/* Homepage v3 draft: the motion and layout pass on top of v2.
   v2.css is an untouched copy of ../home-v2/v2.css. Everything v3 changes lives here and in v3.js.
   Rule of the page: the default CSS is a complete static layout. v3.js adds .v3-anim (motion allowed),
   .v3-pin (desktop pinned scenes) and .is-h (horizontal steps) only inside gsap.matchMedia. */

html{scroll-behavior:auto}
/* v2 clipped its shapes inside boxes; with the boxes gone the page itself clips sideways (clip keeps sticky and pins working) */
main{overflow-x:clip}

/* hero waits for the intro timeline; the head script drops .v3-wait after 3.5s if GSAP never loads */
@media (prefers-reduced-motion:no-preference){
  .v3-wait .hero-inner,.v3-wait .hero-stage,.v3-wait .hero-shapes{visibility:hidden}
}
.v2-band b,.kpis b,.bm-row b{font-variant-numeric:tabular-nums}
/* SplitText line masks: room for descenders */
.v3l-mask{padding-bottom:.14em;margin-bottom:-.14em}
.v3-blob{z-index:-1}

/* highlight wipes in when motion is on */
.v3-anim .v2-hl{background:linear-gradient(color-mix(in srgb,var(--sun) 72%,#fff),color-mix(in srgb,var(--sun) 72%,#fff)) 0 100%/0% 38% no-repeat;transition:background-size 1.1s var(--ease) .15s}
.v3-anim .v2-hl.on{background-size:100% 38%}

/* ---------- 2. the problem: one full-bleed field, type lines, night sting ---------- */
.v3-why{position:relative;padding:40px 0 0}
.v3-why-pin{position:relative;overflow:hidden;isolation:isolate;background:color-mix(in srgb,var(--sun) 32%,#fff);border-radius:56px;padding:120px 0 0}
.v3-why-pin>.shape{z-index:0}
.v3-why .fs-a{width:520px;height:520px;right:-160px;top:-180px;bottom:auto;left:auto;opacity:.5}
.v3-why .fs-b{width:420px;height:210px;left:-130px;top:58%;bottom:auto;opacity:.5}
.v3-why-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center;z-index:1;padding-bottom:120px}
.v3-why-left .h2{font-size:clamp(34px,4.3vw,62px)}
.v3-why-list{list-style:none}
.v3-why-list li{display:flex;align-items:center;gap:24px;padding:26px 0;border-top:1.5px solid rgba(30,28,25,.14)}
.v3-why-list li:last-child{border-bottom:1.5px solid rgba(30,28,25,.14)}
.v3-why-list .gl{width:48px;height:48px;flex:none;fill:var(--hue)}
.v3-why-list b{display:block;font-weight:400;font-size:clamp(22px,2.5vw,36px);line-height:1.14;letter-spacing:-.022em;color:var(--night)}
.v3-sting{position:relative;z-index:2;background:var(--night);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;text-align:center;padding:100px var(--gut)}
.v3-sting p{font-size:clamp(32px,6vw,92px);line-height:1.02;letter-spacing:-.035em;max-width:13em;text-wrap:balance}
.v3-sting-gl{width:clamp(54px,6vw,88px);height:clamp(54px,6vw,88px);fill:var(--coral);rotate:-18deg}
/* desktop pinned scene: the field fills the screen, the sting grows over it */
.v3-pin .v3-why{padding-top:0}
.v3-pin .v3-why-pin{height:100vh;padding:0;display:flex;align-items:center}
.v3-pin .v3-why-grid{width:100%;padding-bottom:0}
.v3-pin .v3-sting{position:absolute;inset:0;padding:0 var(--gut)}
@media (max-width:1000px){
  .v3-why-pin{padding-top:84px;border-radius:44px}
  .v3-why-grid{grid-template-columns:1fr;gap:44px;padding-bottom:84px}
  .v3-sting{padding:84px var(--gut)}
}
@media (max-width:640px){
  .v3-why{padding-top:20px}
  .v3-why-pin{padding-top:64px;border-radius:36px}
  .v3-why-grid{gap:32px;padding-bottom:64px}
  .v3-why-list li{gap:16px;padding:20px 0}
  .v3-why-list .gl{width:36px;height:36px}
  .v3-why .fs-a{width:280px;height:280px;right:-110px;top:-120px}
  .v3-why .fs-b{display:none}
  .v3-sting{padding:72px var(--gut);gap:22px}
  .v3-sting p{font-size:10.4vw}
}

/* ---------- 3. the belief: the headline is the visual ---------- */
.v3-belief{padding:150px 0 130px}
.v3-mega{font-size:14vw;line-height:.95;letter-spacing:-.045em}
@media (min-width:761px){.v3-mega{font-size:clamp(60px,8.6vw,132px);white-space:nowrap}}
.v3-belief-grid{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:center;margin-top:96px}
.v3-belief-copy .lead-p{margin-top:22px;max-width:470px}
.v3-belief-copy .lead-p:first-child{margin-top:0}
.v3-belief-copy .v2-first{font-size:clamp(22px,2.2vw,30px);line-height:1.32;letter-spacing:-.012em;max-width:520px}
.v3-follow{position:relative;isolation:isolate;min-height:400px;padding:10px 0}
.v3-follow .v3-blob{width:470px;height:470px;right:-50px;bottom:-90px;opacity:.9}
.v3-follow .v2-co{width:68%;margin-left:5%}
.v3-follow .v2-me{width:86%;margin-top:-4px}
@media (max-width:1000px){
  .v3-belief{padding:110px 0 100px}
  .v3-belief-grid{grid-template-columns:1fr;gap:56px;margin-top:64px}
}
@media (max-width:640px){
  .v3-belief{padding:84px 0 80px}
  .v3-belief-grid{margin-top:44px;gap:44px}
  .v3-follow{min-height:0}
  .v3-follow .v3-blob{width:300px;height:300px;right:-70px;bottom:-60px}
  .v3-follow .v2-co{width:78%;margin-left:0}
  .v3-follow .v2-me{width:94%}
}

/* ---------- 4. how it works ---------- */
.v3-how{padding:0}
.v3-how-pin{padding:120px 0 0}
.v3-how-head{text-align:center}
.v3-how-prog{display:none}
.v3-how-after{padding-bottom:120px}
.v3-how-count{color:var(--night);font-size:12px}
.v3-how-bar{display:block;width:180px;height:3px;border-radius:3px;background:rgba(30,28,25,.16);overflow:hidden}
.v3-how-bar i{display:block;height:100%;background:var(--night);border-radius:3px;transform-origin:0 50%;transform:scaleX(.2)}
@media (max-width:760px){
  .v3-how-pin{padding-top:80px}
  .v3-how-after{padding-bottom:80px}
}
/* desktop pinned scene: one colour field, five panels sliding through it */
.v3-how.is-h .v3-how-pin{height:100vh;padding:44px 0 0;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,5vh,60px);overflow:hidden;border-radius:56px;background-color:color-mix(in srgb,var(--hue,var(--coral)) 22%,#fff);transition:background-color .8s ease}
.is-h .v3-how-head{z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;text-align:left;width:100%}
.is-h .v3-how-head .eyebrow{margin-bottom:14px}
.is-h .v3-how-head .h2{font-size:clamp(34px,3.7vw,56px)}
.is-h .v3-how-prog{display:flex;align-items:center;gap:14px;padding-bottom:12px;flex:none}
.is-h .v3-how-rail{width:100%}
.is-h .v2-steps{display:flex;gap:0;width:max-content;margin-top:0;will-change:transform}
.is-h .v2-step,.is-h .v2-step:nth-child(n+4){flex:0 0 min(1040px,78vw);grid-column:auto;min-height:0;height:min(560px,calc(100vh - 300px));background:none;border-radius:0;overflow:visible;padding:0 90px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto auto auto;align-content:center;column-gap:64px}
.is-h .v2-step>.shape{--sz:min(480px,54vh);width:var(--sz);height:var(--sz);right:70px;top:50%;margin-top:calc(var(--sz) / -2);opacity:.85}
.is-h .v2-step .num{grid-column:1;width:auto;height:auto;border-radius:0;background:none;color:var(--night);font-family:var(--font);font-weight:400;font-size:clamp(90px,19vh,190px);line-height:.86;letter-spacing:-.05em;margin:0 0 22px;justify-self:start;align-self:auto}
.is-h .v2-step h3{grid-column:1;font-size:clamp(30px,3.3vw,48px);line-height:1.05;margin-bottom:14px}
.is-h .v2-step>p{grid-column:1;font-size:clamp(17px,1.4vw,20px);max-width:440px;margin-bottom:0}
.is-h .v2-mock{grid-column:2;grid-row:1/4;align-self:center;justify-self:center;margin:0;width:min(86%,400px);border-radius:24px;box-shadow:0 44px 70px -34px rgba(30,28,25,.5),0 0 0 1px rgba(30,28,25,.04);zoom:1.15}
.v3-how.is-h .v3-how-after{padding-top:40px}

/* ---------- 5. your voice: two pieces on the canvas ---------- */
.v3-voice{padding:130px 0}
.v3-cmp{position:relative;isolation:isolate;min-height:440px}
.v3-cmp .v3-blob{width:440px;height:440px;left:50%;top:50%;margin:-220px 0 0 -190px;opacity:.9}
.v3-cmp .v2-gen{position:absolute;left:2%;top:14px;width:58%;min-height:200px;rotate:-5deg;box-shadow:0 20px 40px -26px rgba(30,28,25,.4)}
.v3-cmp .v2-yours{position:absolute;right:0;bottom:48px;width:66%;translate:none}
.v3-cmp .pause,.v3-ring .pause{position:absolute;right:0;bottom:0;top:auto;height:30px;font-size:10px;z-index:6}
@media (max-width:1000px){.v3-voice{padding:100px 0}}
@media (max-width:640px){
  .v3-voice{padding:80px 0}
  .v3-cmp{min-height:0;padding-bottom:50px}
  .v3-cmp .v3-blob{width:300px;height:300px;margin:-150px 0 0 -110px}
  .v3-cmp .v2-gen{position:relative;left:0;top:0;width:82%;min-height:0}
  .v3-cmp .v2-yours{position:relative;right:auto;bottom:auto;width:92%;margin:-26px 0 0 auto}
}

/* ---------- 6. every platform: the page turns into the app ---------- */
.v3-plat{padding:20px 0}
.v3-plat-in{position:relative;overflow:hidden;isolation:isolate;background:var(--night);color:#ECE8E2;border-radius:56px;padding:130px 0 120px}
.v3-plat .eyebrow{color:var(--mint)}
.v3-plat .h2,.v3-plat .v2-part{color:#fff}
.v3-plat .lead-p{color:#b9b5ae}
.v3-plat-s1{width:420px;height:420px;left:-180px;top:-160px;opacity:.9;z-index:-1}
.v3-plat-s2{width:380px;height:190px;right:-120px;bottom:70px;opacity:.9;z-index:-1}
.v3-grp{position:relative;max-width:1120px;margin:72px auto 0;display:flex;flex-direction:column;gap:18px;font-size:13px;line-height:1.4}
.v3-url{align-self:center;margin:0 auto 4px}
.v3-grp .v2-ghead{border-bottom-color:#34312d}
.v3-grp .wv i{animation:none}
.js .v3-grp .v2-d{opacity:1;translate:none;scale:1}
@media (max-width:760px){
  .v3-plat-in{border-radius:36px;padding:84px 0 80px}
  .v3-grp{margin-top:48px}
  .v3-grp .v2-ghead,.v3-grp .v2-gtop{margin:0}
  .v3-grp .v2-drafts{margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 4px;scroll-padding-inline:var(--gut)}
  .v3-plat-s1{width:190px;height:190px;left:-110px;top:-100px}
  .v3-plat-s2{width:220px;height:110px;right:-80px;bottom:30px}
}

/* ---------- 7. the loop: a ring, not four boxes ---------- */
.v3-loop{padding:130px 0 110px}
.v3-ring{position:relative;padding-bottom:44px}
.v3-ring-in{position:relative;width:min(100%,540px);aspect-ratio:1;margin:0 auto}
.v3-ring-svg{position:absolute;left:9%;top:9%;width:82%;height:82%;overflow:visible}
.v3-ring-track{fill:none;stroke:rgba(30,28,25,.2);stroke-width:2;stroke-dasharray:2 8;stroke-linecap:round}
.v3-ring-path{fill:none;stroke:var(--tiff);stroke-width:3.5;stroke-linecap:round}
.v3-ring-arrows circle{fill:var(--night)}
.v3-ring-arrows path{fill:#fff}
.v3-ring-dot{fill:var(--tiff);stroke:rgba(0,161,155,.28);stroke-width:12;paint-order:stroke}
.v3-ring-hub{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 24px 44px -24px rgba(30,28,25,.4),0 0 0 1px rgba(30,28,25,.05);z-index:1}
.v3-ring-mark{width:60%;height:60%;fill:var(--tiff)}
.v3-node{position:absolute;display:flex;align-items:center;gap:10px;width:max-content;max-width:214px;background:#fff;border-radius:26px;padding:8px 18px 8px 8px;box-shadow:0 16px 30px -18px rgba(30,28,25,.45),0 0 0 1px rgba(30,28,25,.05);translate:-50% -50%;z-index:2}
.v3-node span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--night);color:#fff;font-family:var(--mono);font-size:12px;flex:none}
.v3-node b{font-weight:500;font-size:15px;line-height:1.2;letter-spacing:-.01em}
.v3-node.n1{left:50%;top:19.25%}
.v3-node.n2{left:80.75%;top:50%}
.v3-node.n3{left:50%;top:80.75%}
.v3-node.n4{left:19.25%;top:50%}
@media (prefers-reduced-motion:reduce){.v3-ring-dot{display:none}}
@media (max-width:1000px){.v3-loop{padding:100px 0 90px}}
@media (max-width:640px){
  .v3-loop{padding:80px 0 70px}
  .v3-ring-svg{left:13%;top:13%;width:74%;height:74%}
  .v3-node{max-width:170px;padding:6px 13px 6px 6px;gap:8px}
  .v3-node span{width:24px;height:24px;font-size:11px}
  .v3-node b{font-size:13px}
  .v3-node.n1{top:22.25%}
  .v3-node.n2{left:81%}
  .v3-node.n3{top:77.75%}
  .v3-node.n4{left:20.5%}
  .v3-ring-hub{width:19%}
}

/* ---------- 8. revenue: the report floats, the bullets are plain lines ---------- */
.v3-revsec{padding:110px 0 130px}
.v3-rev{position:relative;isolation:isolate;padding:30px 0 44px}
.v3-rev .v3-blob{width:540px;height:270px;right:-50px;top:30px;opacity:.9}
.v3-copy .v2-bul{gap:0}
.v3-copy .v2-bul li{background:none;border-radius:0;box-shadow:none;padding:18px 0;border-top:1.5px solid rgba(30,28,25,.13)}
.v3-copy .v2-bul li:last-child{border-bottom:1.5px solid rgba(30,28,25,.13)}
html:not(.v3-anim) .v3-rev .draw{stroke-dashoffset:0}
@media (max-width:1000px){.v3-revsec{padding:90px 0 100px}}
@media (max-width:640px){
  .v3-revsec{padding:70px 0 80px}
  .v3-rev .v3-blob{width:340px;height:170px;right:-70px}
}

/* ---------- 9. proof: same photo cards, off the grid line ---------- */
@media (min-width:1001px){
  .v3-proof{padding-bottom:140px}
  .v3-proof .lcard:nth-child(even){margin-top:56px}
}

/* ---------- 10. questions: hairlines ---------- */
.v3-faq{padding:60px 0 140px}
.v3-faq .faq{gap:0}
.v3-faq .faq li,.v3-faq .faq li.open{background:none;border-radius:0;box-shadow:none;border-top:1.5px solid rgba(30,28,25,.14)}
.v3-faq .faq li:last-child{border-bottom:1.5px solid rgba(30,28,25,.14)}
.v3-faq .faq-q{padding:28px 4px 28px 0;font-size:clamp(19px,1.9vw,26px);font-weight:400;letter-spacing:-.018em;border-radius:10px}
.v3-faq .faq-ic{background:#fff;box-shadow:inset 0 0 0 1px rgba(30,28,25,.08)}
.v3-faq .faq li.open .faq-ic{background:var(--tiff)}
.v3-faq .faq-a p{padding:0 64px 30px 0;font-size:17.5px}
@media (max-width:640px){
  .v3-faq{padding:40px 0 90px}
  .v3-faq .faq-q{padding:22px 2px 22px 0}
  .v3-faq .faq-a p{padding:0 20px 24px 0;font-size:16.5px}
}

/* ---------- 11. the close: full-bleed night ---------- */
.v3-cta{padding:0}
.v3-cta .cta-card{max-width:none;border-radius:56px;padding:150px 32px}
.v3-cta .h2{font-size:clamp(38px,6.4vw,100px)}
@media (max-width:640px){
  .v3-cta .cta-card{border-radius:36px;padding:96px 20px}
}

/* ---------- 8b. agents arc (from the live homepage): a sheet whose tint follows the centred agent ---------- */
.v3-agents{margin:20px 0;padding:120px 0 104px;border-radius:56px;background-color:color-mix(in srgb,var(--hue,var(--seo)) 18%,#fff);transition:background-color .8s ease}
@media (max-width:760px){
  .v3-agents{border-radius:36px;padding:80px 0 72px}
  .v3-agents .bg-s1{width:220px;height:220px;left:-110px;top:-120px}
}