/* Part pages, v2 (8 Oct 2026): the six part pages continue the home page's design language.
   Everything is scoped under body.part2, so the home and any page without the class are untouched.
   Load AFTER site.css. Works with parts.js (the step sequence). Reuses from site.css as they are:
   .parts6 (the six-part tiles), .close.close6 (the blue close), .pts (numbered points), footer.sf.

   The language, in short:
   - section head: 50/50 from 860 px (.rhead = .sec-head left | .rside line or ol.pts right)
   - grey tiles: var(--panel), 24 px corners, 16 px gaps, no outlines or shadows; white inner panels with 12 px corners;
     ONE blue tile per group (--p2-blue)
   - sub-sections: .p2-sub heading, clamp(72px,8vw,120px) above
   - pictures (motion scenes) sit in a 24 px panel in the page's wash colour, screen inside with 12 px corners */

body.part2{--p2-blue:#1F6FB8;--p2-blue-h:#1A63A6;--p2-pad:clamp(20px,2.4vw,32px);--p2-sub:clamp(72px,8vw,120px);--p2-col:clamp(32px,5vw,80px);--sec:clamp(144px,12vw,216px)}
@media (max-width:1099px){body.part2{--sec:128px}}
@media (max-width:767px){body.part2{--sec:104px}}
.part2 main .wrap,.part2 .close .wrap{max-width:none}

/* ---------- type: the home's ladder ---------- */
.part2 .t-h2{font-size:38px;line-height:1.12;letter-spacing:-.02em;font-weight:500}
@media (max-width:1099px){.part2 .t-h2{font-size:32px}}
@media (max-width:767px){.part2 .t-h2{font-size:28px}}
.part2 .p2-sub{margin:var(--p2-sub) 0 clamp(24px,3vw,40px);font:500 clamp(22px,2vw,28px)/1.2 var(--display);font-variation-settings:"opsz" 32;letter-spacing:-.02em;text-wrap:pretty;max-width:34em}

/* ---------- section head, 50/50 from 860 px ---------- */
.part2 .rhead{display:grid;gap:20px;margin-bottom:clamp(32px,4vw,56px)}
.part2 .rhead .sec-head{margin:0;max-width:none}
.part2 .rhead .t-h2{max-width:none;text-wrap:wrap}
.part2 .rhead .rside{margin:0;max-width:34em}
.part2 .rhead .pts{margin:0}
.part2 .rhead .pts li,.part2 .rhead .pts li:last-child{border:0;padding:8px 0;color:var(--ink2);transition:none}
.part2 .rhead .pts li b{color:var(--ink)}
@media (min-width:860px){
  .part2 .rhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--p2-col);align-items:start}
  .part2 .rhead .rside{padding-top:38px}
  .part2 .rhead .pts,.part2 .rhead .p6pts{padding-top:34px}
  .part2 .rhead .p6pts .pts{padding-top:0}
}

/* ---------- hero: label + title left | one line + buttons right, then the motion graphic in its frame ---------- */
.part2 .crumb{margin:clamp(24px,3vw,40px) 0 clamp(24px,2.6vw,36px)}
.part2 .phero,.part2 .phero.wide{gap:clamp(32px,3.6vw,48px);padding-bottom:var(--sec)}
.part2 .phero .copy{gap:18px}
.part2 .phero .tag2{height:auto;padding:0;border-radius:0;background:none;font:500 12px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.part2 .phero .tag2 i{display:none}
.part2 .phero h1.t-display{font-weight:500;font-size:clamp(30px,3.9vw,56px);line-height:1.04;letter-spacing:-.045em;max-width:none;text-wrap:balance}
.part2 .phero .t-bodyL{font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:34em}
.part2 .phero .ctas{margin-top:10px}
@media (min-width:860px){
  .part2 .phero.wide .copy{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--p2-col);row-gap:18px;align-items:start;justify-content:stretch}
  .part2 .phero.wide .copy>*{grid-column:1;justify-self:start}
  .part2 .phero.wide .copy>h1{grid-row:2/span 2}
  .part2 .phero.wide .copy>.t-bodyL{grid-column:2;grid-row:2;padding-top:4px}
  .part2 .phero.wide .copy>.ctas{grid-column:2;grid-row:3;justify-self:start;align-self:start;margin:10px 0 0;flex-wrap:wrap}
}
/* picture panels: 24 px corners, the screen inside 12 px */
.part2 .stage,.part2 .phero.wide .hero-stage{border-radius:24px}
.part2 .stage.shot{padding:clamp(16px,2.2vw,28px)}
.part2 .stage.shot .frame,.part2 .stage.shot .dmock,.part2 .stage.shot .wstack .frame.app{border-radius:12px}

/* ---------- the goal: statement left | its figures as tiles right ---------- */
.part2 .p2-g{display:grid;gap:clamp(32px,4vw,56px)}
.part2 .goal{display:flex;flex-direction:column;gap:18px;padding:0;border:0}
.part2 .goal .goal-l{margin:0;padding:0;font:500 12px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.part2 .goal h2.goal-say{margin:0;max-width:22em;font:500 clamp(28px,3.3vw,46px)/1.1 var(--display);font-variation-settings:"opsz" 32;letter-spacing:-.03em;text-wrap:pretty}
.part2 .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border:0}
.part2 .stats>div,.part2 .stats>div+div{background:var(--panel);border:0;border-radius:24px;padding:var(--p2-pad);min-height:176px;display:flex;flex-direction:column;gap:6px;min-width:0}
.part2 .stats .n{margin-bottom:auto;padding-bottom:28px;font:500 clamp(36px,4vw,56px)/1 var(--display);font-variation-settings:"opsz" 32;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.part2 .stats .n small{font-size:max(14px,.36em);font-weight:500;letter-spacing:-.01em;color:var(--ink2)}
.part2 .stats .t-small{font-size:16px;line-height:1.35;color:var(--ink)}
.part2 .stats .src{font-size:13px;line-height:1.4;color:var(--ink2)}
.part2 .stats .blue{background:var(--p2-blue);color:#fff}
.part2 .stats .blue .t-small{color:#fff}
.part2 .stats .blue .src,.part2 .stats .blue .n small{color:rgba(255,255,255,.9)}
.part2 .stats>div:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:1000px){
  .part2 .p2-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--p2-col);align-items:start}
}
@media (max-width:479px){.part2 .stats>div,.part2 .stats>div+div{min-height:148px;padding:20px}.part2 .stats .n{font-size:32px}}

/* ---------- the steps: words down the left half, one picture frame on the right that stays in view ----------
   Markup is the existing .steps > article.step > .txt + .stage. Under 860 px each step is its words, then its picture.
   From 860 px: two halves. parts.js adds .is-live when the tallest picture fits the screen; then the pictures share one
   held frame and the frame shows the step being read (.step.is-on). If it does not fit, each step simply sits beside its picture. */
.part2 .steps{display:flex;flex-direction:column;gap:clamp(56px,8vw,88px)}
.part2 .step{display:flex;flex-direction:column;align-items:stretch;gap:24px;scroll-margin-top:96px}
.part2 .step .txt{position:static;display:flex;flex-direction:column;gap:16px;min-width:0}
.part2 .step .txt .t-h3{margin:0;font:500 clamp(22px,2vw,28px)/1.2 var(--display);font-variation-settings:"opsz" 32;letter-spacing:-.02em;text-wrap:pretty;max-width:20em}
.part2 .step .txt>p{margin:0}
.part2 .step .ba{gap:10px;margin-top:4px}
.part2 .step .ba div{font-size:16px;line-height:1.4;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start}
.part2 .step .ba .bi{width:24px;height:24px}
.part2 .step .txt>.t-small{font-size:14px;line-height:1.4;color:var(--ink3);margin-top:2px}
.part2 .step .stage{min-width:0}
@media (min-width:860px){
  .part2 .steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--p2-col);row-gap:clamp(72px,8vw,120px);align-items:start}
  .part2 .step{display:contents}
  .part2 .step .txt{grid-column:1;position:sticky;top:112px;padding-top:8px}
  .part2 .step .stage{grid-column:2}
  .part2 .steps.is-live{row-gap:0}
  .part2 .steps.is-live .txt{position:static;min-height:min(72vh,580px);padding-block:8px 32px;opacity:.38;transition:opacity .45s ease-out;cursor:pointer}
  .part2 .steps.is-live .step:last-child .txt{min-height:var(--p2-shot,540px)}
  .part2 .steps.is-live .step.is-on .txt{opacity:1;cursor:auto}
  .part2 .steps.is-live .stage{grid-row:1/span var(--p2-n,5);position:sticky;top:var(--p2-top,96px);align-self:start;opacity:0;translate:0 12px;pointer-events:none;transition:opacity .5s cubic-bezier(.2,0,0,1),translate .6s cubic-bezier(.2,0,0,1)}
  .part2 .steps.is-live .step.is-on .stage{opacity:1;translate:0 0;pointer-events:auto;transition-delay:.1s}
}
@media (prefers-reduced-motion:reduce){.part2 .steps .txt,.part2 .steps .stage{transition:none!important}}

/* ---------- case studies: grey tiles with a white cover panel ---------- */
.part2 .cs-row{margin-top:0;gap:16px}
.part2 .csc{background:var(--panel);box-shadow:none;border-radius:24px;padding:12px 12px 24px;transition:background-color .2s ease-out}
.part2 .csc .cv{background:#fff;border-radius:12px}
.part2 .csc .tag{background:#fff;font-size:12px}
.part2 .csc .t-card{font:500 clamp(18px,1.6vw,20px)/1.3 var(--display);letter-spacing:-.01em}
.part2 .csc .cs-cta{box-shadow:none}
@media (hover:hover){.part2 .csc:hover{background:#ECECE8;box-shadow:none;transform:none}}
.part2 .cs-row.one .csc{background:var(--panel);padding:12px clamp(20px,3vw,48px) 12px 12px}
.part2 .cs-row.one .csc .t-card{font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.02em}
@media (max-width:1099px){.part2 .cs-row.one .csc{padding:12px 12px 24px}}
@media (min-width:768px) and (max-width:959px){.part2 .cs-row.three .csc{padding:12px 24px 12px 12px}}

/* ---------- "already have one? keep it": two tiles, ours in blue ---------- */
.part2 .two{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:860px){.part2 .two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.part2 .opt,.part2 .opt.have,.part2 .opt.need{background:var(--panel);box-shadow:none;border-radius:24px;padding:var(--p2-pad);gap:0;min-width:0}
.part2 .opt .kick{flex-direction:column;align-items:flex-start;gap:clamp(28px,4vw,56px);font:400 14px/1.35 var(--body);letter-spacing:0;text-transform:none;color:var(--ink2)}
.part2 .opt .kick .ic,.part2 .opt.have .kick .ic{box-sizing:content-box;width:22px;height:22px;padding:11px;border-radius:12px;background:#fff;color:var(--ink)}
.part2 .opt h3{margin:8px 0 0;font:500 clamp(22px,2vw,28px)/1.2 var(--display);font-variation-settings:"opsz" 32;letter-spacing:-.02em;text-wrap:pretty;max-width:18em}
.part2 .opt ul{margin:clamp(20px,2.4vw,28px) 0 0;gap:10px}
.part2 .opt li{grid-template-columns:20px minmax(0,1fr);gap:12px;font-size:16px;line-height:1.4;color:var(--ink2)}
.part2 .opt li .ic,.part2 .opt.need li .ic{width:18px;height:18px;margin-top:2px;color:var(--ink3)}
.part2 .opt.need{background:var(--p2-blue);color:#fff}
.part2 .opt.need .kick,.part2 .opt.need li{color:rgba(255,255,255,.92)}
.part2 .opt.need .kick .ic{color:var(--p2-blue)}
.part2 .opt.need li .ic{color:#fff}
.part2 .opt.need a:focus-visible{outline-color:#fff}

/* ---------- what comes in / goes out: one grey card, three panels, the part in blue ---------- */
.part2 .flow{background:var(--panel);border-radius:24px;padding:clamp(12px,1.6vw,20px);grid-template-columns:minmax(0,1fr) clamp(56px,6vw,88px) minmax(0,1fr) clamp(56px,6vw,88px) minmax(0,1fr)}
.part2 .flow .fcol{background:#fff;border-radius:12px;padding:clamp(20px,2.2vw,28px);gap:14px}
.part2 .flow .fcol.mid{background:var(--p2-blue);color:#fff}
.part2 .flow .fcol.mid .t-eyebrow{color:rgba(255,255,255,.9)}
.part2 .flow .fcol li{font-size:16px;line-height:1.4}
.part2 .flow li[data-fs=on]{background:var(--panel);box-shadow:none}
.part2 .flow .fcol.mid li[data-fs=work]{background:rgba(255,255,255,.14)}
.part2 .flow .fcol.mid .fs{background:rgba(255,255,255,.16)}
.part2 .flow .fcol.mid .fs::before{background:#fff}
.part2 .flow li[data-fs=work] .fs::before{background:none;border-color:rgba(255,255,255,.35);border-top-color:#fff}
.part2 .flow .fcol.mid li[data-fs=done] .fs{background:rgba(255,255,255,.2)}
.part2 .flow .fcol.mid li[data-fs=done] .fs::before{background:#fff}
.part2 .flow .fdone{border-top-color:rgba(255,255,255,.25);color:#fff}
.part2 .flow .fdone i{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
@media (max-width:1099px){.part2 .flow{grid-template-columns:minmax(0,1fr)}.part2 .flow .farr{height:56px}}

/* ---------- all six parts: the home's .parts6 tiles; this page's tile is the blue one ---------- */
.part2 .parts6 .p6lead:not([aria-current]){background:var(--panel);color:var(--ink)}
.part2 .parts6 .p6lead:not([aria-current]) .p6w,.part2 .parts6 .p6lead:not([aria-current]) .p6d{color:var(--ink2)}
.part2 .parts6 .p6lead:not([aria-current]) .p6go{color:var(--ink2)}
.part2 .parts6 .p6t[aria-current]{background:var(--p2-blue);color:#fff}
.part2 .parts6 .p6t[aria-current] .p6w,.part2 .parts6 .p6t[aria-current] .p6d{color:rgba(255,255,255,.9)}
.part2 .parts6 .p6here{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.18);font:500 13px/1 var(--body);color:#fff;white-space:nowrap}
@media (hover:hover){.part2 .parts6 .p6lead:not([aria-current]):hover{background:#ECECE8}.part2 .parts6 .p6lead:not([aria-current]):hover .p6go{color:var(--ink)}}

/* ---------- close: the home's blue panel (.close.close6 from site.css); the moving gradient and grain live here
   because hero-compare.css is not loaded on the part pages ---------- */
.part2 .close6 .c6t{display:flex;flex-direction:column;align-items:center}
.part2 .close6 .h8-blobs{position:absolute;inset:-10%;z-index:-2;filter:blur(56px)}
.part2 .close6 .h8-blobs i{position:absolute;border-radius:50%;opacity:.9;will-change:transform}
.part2 .close6 .h8-blobs i:nth-child(1){left:-4%;top:2%;width:44%;height:62%;border-radius:58% 42% 63% 37%/45% 58% 42% 55%;animation:p2b1 19s ease-in-out infinite alternate}
.part2 .close6 .h8-blobs i:nth-child(2){left:46%;top:-12%;width:42%;height:60%;border-radius:40% 60% 35% 65%/60% 38% 62% 40%;animation:p2b2 23s ease-in-out infinite alternate}
.part2 .close6 .h8-blobs i:nth-child(3){left:56%;top:44%;width:40%;height:58%;border-radius:63% 37% 54% 46%/38% 60% 40% 62%;animation:p2b3 21s ease-in-out infinite alternate}
.part2 .close6 .h8-blobs i:nth-child(4){left:12%;top:54%;width:38%;height:50%;border-radius:45% 55% 38% 62%/57% 43% 57% 43%;animation:p2b4 26s ease-in-out infinite alternate}
@keyframes p2b1{50%{border-radius:38% 62% 44% 56%/60% 40% 60% 40%}to{transform:translate(34%,22%) rotate(40deg) scale(1.2);border-radius:60% 40% 36% 64%/42% 62% 38% 58%}}
@keyframes p2b2{50%{border-radius:62% 38% 58% 42%/40% 62% 38% 60%}to{transform:translate(-38%,30%) rotate(-50deg) scale(.82);border-radius:36% 64% 60% 40%/58% 36% 64% 42%}}
@keyframes p2b3{50%{border-radius:42% 58% 36% 64%/62% 42% 58% 38%}to{transform:translate(-30%,-34%) rotate(60deg) scale(1.25);border-radius:55% 45% 62% 38%/40% 56% 44% 60%}}
@keyframes p2b4{50%{border-radius:60% 40% 62% 38%/38% 60% 40% 62%}to{transform:translate(44%,-20%) rotate(-35deg) scale(1.1);border-radius:40% 60% 44% 56%/62% 40% 60% 38%}}
.part2 .close6 .h8-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.34;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.part2 .close6 .h8-blobs i{animation:none}}

/* 8 Oct, fixes after all six pages were converted */
/* steps that are not held (a picture taller than the screen): each step is its own row, words beside its picture, nothing sticky */
@media (min-width:860px){
  .part2 .steps:not(.is-live)>.step{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--p2-col);align-items:start}
  .part2 .steps:not(.is-live)>.step>.txt{position:static;grid-column:1}
  .part2 .steps:not(.is-live)>.step>.stage{grid-column:2}
}
/* the blue close carries "Book a demo", so the footer's own button is not repeated under it (same as the home) */
.part2 .close6~footer.sf .sf-act>.btn{display:none}
/* a hero stage without the .shot frame keeps 24 px corners on phones too */
.part2 .phero.wide .stage.hero-stage:not(.shot){border-radius:24px}

/* 8 Oct (owner): the steps behave the same on every page, as on the home: one frame that stays in view and follows the step.
   parts.js sets --p2-z on a picture that is taller than the screen; the card hugs its picture and starts at the top of the frame. */
@media (min-width:860px){
  .part2 .steps .stage>*{zoom:var(--p2-z,1)}
  .part2 .steps.is-live .stage{max-height:calc(100vh - 112px);overflow:hidden;height:auto}
}

/* 8 Oct: a step picture that is still taller than the frame after fitting fades out at its foot instead of ending on a hard cut */
@media (min-width:860px){.part2 .steps.is-live .stage.is-cut{-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}}

/* 8 Oct (owner): at the top of a part page the navigation bar blends with the page: no white pill, no border, no shadow.
   The white round bar shows only when the visitor scrolls back up after scrolling down (parts.js sets .nav-solid), as on the home. */
.part2 header.nav.nav3 .n3-bar{transition:background-color .25s ease-out,border-color .25s ease-out,box-shadow .25s ease-out}
.part2 header.nav.nav3:not(.nav-solid):not(.n3-has-open) .n3-bar{background:transparent;border-color:transparent;box-shadow:none}
@media (prefers-reduced-motion:reduce){.part2 header.nav.nav3 .n3-bar{transition:none}}

/* page tone (8 Oct, owner): the comes-in / goes-out picture sits on the page's pale tone, like the step pictures */
.part2 .flow{background:var(--wash)}

/* 8 Oct (owner): the before / now points under each step look like the home's points: a small grey numbered circle and
   plain text, with a short bold lead-in ("Before:", "Now:"). The coloured tick and the cross are gone. */
.part2 .step .ba{counter-reset:ba;gap:0;margin-top:4px}
.part2 .step .ba>div{counter-increment:ba;display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:8px 0;font-size:17px;line-height:1.4;color:var(--ink2);opacity:1}
.part2 .step .ba .bi{display:block;width:24px;height:24px;border-radius:99px;background:var(--panel)!important;color:var(--ink2)!important;box-shadow:none!important;font:600 12px/24px var(--body);text-align:center}
.part2 .step .ba .bi svg{display:none}
.part2 .step .ba .bi::before{content:counter(ba)}
.part2 .step .ba b{font-weight:500;color:var(--ink)}
/* page tone, stronger (see site.css) */
.part2 .flow,.part2 .steps .stage.shot,.part2 .phero .stage.hero-stage{background:var(--tone)}

/* sweep, 8 Oct (owner: some parts did not cope with the tones) */
.part2 .flow .fcol.mid{background:var(--c-ink)}                               /* the part's own block takes the page colour, not blue on a pink or peach card */
.part2 .flow li[data-fs=on]{background:color-mix(in srgb,var(--c) 9%,#fff)}   /* the row being handled: a tint of the page colour, not grey */
.part2 .parts6 .p6here{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}  /* "This page": was 3.7:1 */
.part2 .stats .n{font-size:clamp(30px,3.1vw,44px)}                            /* "25→70%" ran 7 px out of its tile */

/* ===== Phone and tablet pass, 8 Oct ===== */
@media (min-width:700px) and (max-width:859px){.part2 .two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:999px){.part2 .crumb a{display:inline-flex;align-items:center;min-height:40px}}