/* ============================================================
   Variation A — "Curtain"  (after itsasidejob.com)
   Smooth inertial scroll; the hero stays pinned and each section
   slides up over it like a curtain; huge type lights up word by
   word; sticky side label; product cards stack; commitments are
   set as giant lines that sharpen as they reach centre screen.
   ============================================================ */
body[data-fx=a]{background:var(--navy-deep)}
body[data-fx=a] main{position:relative}
body[data-fx=a] footer{position:relative;z-index:1}

/* --- hero: pinned, scattered, exits as the curtain arrives --- */
.a-hero{position:sticky;top:var(--hd,82px);z-index:0;height:calc(100vh - var(--hd,82px));min-height:640px;overflow:hidden}
.a-hero-in{height:100%;position:relative;display:grid;grid-template-rows:1fr auto;padding:5vh 0 7vh}
.a-hero-top{position:relative;z-index:3;align-self:center;transform-origin:0 0;transform:translateY(calc(var(--lv,0)*-9vh)) scale(calc(1 - var(--lv,0)*.07));opacity:calc(1 - var(--lv,0)*.9)}
.a-hero h1{margin:16px 0 0;max-width:11.5ch;font-size:min(7.6vw,15vh);line-height:.96;letter-spacing:-.05em;text-wrap:balance}
.a-motif{position:absolute;z-index:1;right:-2%;top:3%;width:min(54vw,800px);transform:translate3d(calc(var(--lv,0)*9vw),calc(var(--lv,0)*-22vh),0) rotate(calc(var(--lv,0)*6deg)) scale(calc(1 - var(--lv,0)*.14));opacity:calc(1 - var(--lv,0)*.85)}
.a-motif svg{max-width:none!important}
.a-hero-bot{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:40px;opacity:calc(1 - var(--lv,0)*1.4)}
.a-hero .lede{font-size:clamp(16px,1.35vw,20px);max-width:520px}
.a-hero .actions{margin-top:22px}
.a-hero .hero-note{margin:0}

/* --- curtain sections --- */
.a-sec{position:relative;z-index:1;border-radius:40px 40px 0 0;margin-top:-40px;box-shadow:0 -26px 60px -22px rgba(12,39,64,.4);overflow:clip}
.a-vision{background:var(--navy)}
.a-vision .vision-inner{max-width:none;padding:22vh 0 18vh}
.a-vision .vision-statement{font-size:clamp(34px,5.5vw,88px);line-height:1.04;letter-spacing:-.04em;font-weight:700;margin-top:34px;max-width:17ch}
.a-vision .vision-foot{margin-top:9vh;font-size:13px}

/* --- why we exist: sticky label left, giant beats scroll right --- */
.a-why{background:var(--paper);padding:16vh 0 10vh}
.a-why .wrap{display:grid;grid-template-columns:.42fr .58fr;gap:6vw;align-items:start}
.a-sticky{position:sticky;top:calc(var(--hd,82px) + 44px)}
.a-sticky h2{margin:18px 0 0;font-size:clamp(30px,3.6vw,56px);line-height:1.06;letter-spacing:-.035em;color:var(--navy);font-weight:700}
.a-why .arc{margin:0}
.a-why .arc-item{grid-template-columns:1fr;gap:18px;min-height:78vh;align-content:center;border:0;padding:6vh 0;opacity:calc(.14 + .86*var(--c,1));transform:translateX(calc((1 - var(--c,1))*46px))}
.a-why .arc-num{font-size:clamp(76px,10vw,150px);color:var(--sky);letter-spacing:-.06em}
.a-why .arc-body h3{font-size:clamp(26px,3.2vw,48px);line-height:1.08;letter-spacing:-.035em}
.a-why .arc-body p{font-size:clamp(17px,1.5vw,21px)}
.a-why .fig{margin-top:26px}

.a-bridge{background:var(--soft);padding:18vh 0}
.a-bridge .fig{border-radius:28px;padding:34px 36px;transform:scale(calc(.8 + .2*var(--in,1))) rotate(calc((1 - var(--in,1))*-3deg));box-shadow:var(--shadow);transform-origin:50% 60%}

/* --- products: heading, then cards that pin and stack --- */
.a-products{background:var(--paper);padding:16vh 0 14vh}
.a-products .section-head{grid-template-columns:1fr;gap:18px;margin-bottom:9vh}
.a-products .section-head h2{font-size:clamp(32px,4.6vw,72px);line-height:1.02;letter-spacing:-.04em;max-width:18ch}
.a-products .product-grid{grid-template-columns:1fr;gap:0}
.a-products .pcard{position:sticky;top:calc(var(--hd,82px) + 26px + var(--i,0)*26px);min-height:min(58vh,480px);margin-bottom:11vh;justify-content:center;padding:clamp(28px,4vw,56px);box-shadow:0 34px 70px -34px rgba(18,58,92,.5)}
.a-products .pcard:not(.flagship) h3{font-size:clamp(28px,3.6vw,54px);line-height:1.04;letter-spacing:-.04em;max-width:16ch}
.a-products .pcard:not(.flagship) p{font-size:clamp(17px,1.5vw,21px);max-width:44ch}
.a-products .pcard:nth-child(3){background:var(--soft)}
.a-products .pcard:nth-child(4){background:var(--sky-tint)}
.a-products .pcard:nth-child(5){background:#fff}
.a-products .pcard:last-child{margin-bottom:0}
.a-products .pcard:hover{transform:none}
.a-more{margin-top:8vh}

/* --- commitments: giant lines --- */
.a-commit{background:var(--navy-deep);padding:16vh 0 12vh;color:#fff}
.a-commit:before{display:none}
.a-commit .section-head{grid-template-columns:1fr;margin-bottom:6vh}
.a-commit .section-head h2{font-size:clamp(28px,3.4vw,52px);letter-spacing:-.035em;line-height:1.08;max-width:22ch}
.a-commit .commit{grid-template-columns:1fr;gap:0}
.a-commit .commit-item{border-top:1px solid rgba(242,187,46,.4);padding:8vh 0 9vh;opacity:calc(.12 + .88*var(--c,1))}
.a-commit .commit-item b{font-size:clamp(40px,8.8vw,138px);line-height:.96;letter-spacing:-.055em;margin:0 0 3vh;transform:translateX(calc((1 - var(--c,1))*-7vw))}
.a-commit .commit-item span{font-size:clamp(17px,1.5vw,21px);max-width:46ch}

/* --- who we work with: three cards on different parallax speeds --- */
.a-who{background:var(--soft);padding:16vh 0 20vh}
.a-who .section-head{grid-template-columns:1fr;gap:18px;margin-bottom:9vh}
.a-who .section-head h2{font-size:clamp(30px,4vw,62px);line-height:1.04;letter-spacing:-.04em;max-width:20ch}
.a-who .card-grid{align-items:start;gap:26px}
.a-who .card{min-height:360px;padding:34px;display:flex;flex-direction:column;justify-content:space-between;will-change:transform}
.a-who .card h3{font-size:clamp(24px,2.3vw,34px);margin:80px 0 12px}
.a-who .card p{font-size:16.5px}

/* --- the ask --- */
.a-cta{background:var(--navy-deep);padding:16vh 0 18vh}
.a-cta .idea-box{background:none;padding:0;grid-template-columns:1fr;border-radius:0}
.a-cta .idea-box:before{right:-12vw;top:-30vh}
.a-cta .idea-box h2{font-size:clamp(34px,6vw,96px);line-height:1;letter-spacing:-.045em;max-width:15ch;margin-top:30px}
.a-cta .idea-actions{flex-direction:row;align-items:center;gap:24px;margin-top:6vh}

@media(max-width:860px){
  .a-hero{position:relative;top:0;height:auto;min-height:0}
  .a-hero-in{padding:6vh 0 8vh;gap:30px;display:flex;flex-direction:column}
  .a-hero h1{font-size:clamp(42px,12vw,64px);max-width:none}
  .a-motif{position:relative;width:100%;right:auto;top:auto;transform:none!important;opacity:1!important}
  .a-hero-bot{flex-direction:column;align-items:flex-start;gap:24px}
  .a-hero-top,.a-hero-bot{transform:none;opacity:1}
  .a-why .wrap{grid-template-columns:1fr;gap:30px}
  .a-sticky{position:static}
  .a-why .arc-item{min-height:0;opacity:1;transform:none}
  .a-products .pcard{position:relative;top:auto;margin-bottom:18px;min-height:0}
  .a-commit .commit-item{opacity:1}
  .a-commit .commit-item b{transform:none}
  .a-cta .idea-actions{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .a-hero{position:relative;top:0}
  .a-hero-top,.a-hero-bot,.a-motif,.a-why .arc-item,.a-commit .commit-item,.a-commit .commit-item b,.a-bridge .fig{transform:none!important;opacity:1!important}
  .a-products .pcard{position:relative;top:auto}
}

/* ============================================================
   Inner pages — the same curtain applied to every other page.
   The page hero pins; every following section slides over it.
   ============================================================ */
body[data-fx=a] .page-hero{position:sticky;top:var(--hd,82px);z-index:0;min-height:calc(100vh - var(--hd,82px));display:flex;align-items:center;padding:6vh 0 10vh}
body[data-fx=a] .page-hero .wrap{transform-origin:0 0;transform:translateY(calc(var(--lv,0)*-9vh)) scale(calc(1 - var(--lv,0)*.07));opacity:calc(1 - var(--lv,0)*.9)}
body[data-fx=a] .page-hero h1{font-size:clamp(42px,6.8vw,110px);line-height:.98;letter-spacing:-.05em;max-width:15ch;text-wrap:balance}
body[data-fx=a] .page-hero p{font-size:clamp(17px,1.5vw,22px);max-width:640px}
body[data-fx=a] .curtain{position:relative;z-index:1;border-radius:40px 40px 0 0;margin-top:-40px;box-shadow:0 -26px 60px -22px rgba(12,39,64,.4);overflow:clip;background:var(--paper)}
body[data-fx=a] .curtain.section.soft,body[data-fx=a] .curtain.section.paper,body[data-fx=a] .curtain.stats-band,body[data-fx=a] .curtain.signal-strip,body[data-fx=a] .curtain.culture-band{background:var(--soft)}
body[data-fx=a] .curtain.section.navy,body[data-fx=a] .curtain.vision-band{overflow:clip}
body[data-fx=a] .curtain.section{padding:min(14vh,130px) 0}
body[data-fx=a] .curtain.cta{padding:min(8vh,80px) 0 min(14vh,130px)!important}
body[data-fx=a] .curtain .section-head h2,body[data-fx=a] .curtain .content-title{font-size:clamp(30px,4.2vw,66px);line-height:1.03;letter-spacing:-.04em}
body[data-fx=a] .curtain .section-head>div:first-child{position:sticky;top:calc(var(--hd,82px) + 40px)}
body[data-fx=a] .vision-band.compact .vision-inner{padding:16vh 0 14vh}
body[data-fx=a] .vision-band.compact .vision-statement{font-size:clamp(30px,4.8vw,76px);line-height:1.05;letter-spacing:-.04em;font-weight:700}
body[data-fx=a] .big-copy{font-size:clamp(30px,4.2vw,64px);line-height:1.06;letter-spacing:-.04em}
body[data-fx=a] .pull p{font-size:clamp(28px,4vw,60px);line-height:1.08;letter-spacing:-.04em}
@media(max-width:860px){
  body[data-fx=a] .page-hero{position:relative;top:0;min-height:0;padding:8vh 0}
  body[data-fx=a] .page-hero .wrap{transform:none;opacity:1}
  body[data-fx=a] .page-hero h1{font-size:clamp(38px,11vw,60px)}
  body[data-fx=a] .curtain .section-head>div:first-child{position:static}
}
@media(prefers-reduced-motion:reduce){
  body[data-fx=a] .page-hero{position:relative;top:0}
  body[data-fx=a] .page-hero .wrap{transform:none!important;opacity:1!important}
}
/* the generic curtain background must not repaint the dark bands */
body[data-fx=a] .curtain.vision-band{background:var(--navy)}
body[data-fx=a] .curtain.section.navy{background:var(--navy)}

/* spacing: two boxed blocks that follow one another never touch */
body[data-fx=a] .curtain :is(.wrap,.arc-body,.a-sticky)>:is(.product-grid,.card-grid,.proof-strip,.audience-grid,.module-grid,.principles,.flow,.solution-band,.testimonial-grid,.team-grid,.discipline-grid,.thennow,.commit,.fig,.fig-row,.statfig,.philosophy,.pcard,.trust-row,.integration-grid,.proof-quote,.job-status,.role-archive,.contact-grid,.legal-links,.dept-grid,.principles-dark,.stats-grid,.form,.legal-note,.split,.filterbar,.dept-head)+:is(.product-grid,.card-grid,.proof-strip,.audience-grid,.module-grid,.principles,.flow,.solution-band,.testimonial-grid,.team-grid,.discipline-grid,.thennow,.commit,.fig,.fig-row,.statfig,.philosophy,.pcard,.trust-row,.integration-grid,.proof-quote,.job-status,.role-archive,.contact-grid,.legal-links,.dept-grid,.principles-dark,.stats-grid,.form,.legal-note,.split,.dept-head){margin-top:clamp(32px,4.5vw,64px)}

/* ---- home hero graphic: looping motion ----
   signals travel along each line toward the decision, the rings ripple
   outward from it, the core breathes and the voices twinkle */
.a-motif .flow path{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.06 .94;animation:motif-flow 4.2s linear infinite;animation-delay:calc(var(--i)*-.34s)}
@keyframes motif-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
.a-motif .ring{transform-box:fill-box;transform-origin:center;animation:motif-ripple 5.4s ease-out infinite}
.a-motif .ring:nth-of-type(2){animation-delay:-1.8s}
.a-motif .ring:nth-of-type(3){animation-delay:-3.6s}
@keyframes motif-ripple{0%{transform:scale(.5);opacity:0}18%{opacity:.75}100%{transform:scale(1.12);opacity:0}}
.a-motif .core{transform-box:fill-box;transform-origin:center;animation:motif-breathe 3.4s ease-in-out infinite}
@keyframes motif-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.a-motif .voice circle{animation:motif-twinkle 3.2s ease-in-out infinite}
.a-motif .voice circle:nth-child(3n+1){animation-delay:-.9s}
.a-motif .voice circle:nth-child(3n+2){animation-delay:-1.9s}
@keyframes motif-twinkle{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.a-motif .flow{display:none}.a-motif .ring,.a-motif .core,.a-motif .voice circle{animation:none}}

/* the next curtain overlaps 40px of the one above it — reserve that strip so the
   overlap never eats into content (stat rows, strips, short bands) */
body[data-fx=a] main>.curtain::after{content:"";display:block;height:40px}
body[data-fx=a] main>.curtain:last-child::after{display:none}
body[data-fx=a] .stats-grid{padding:46px 0 34px}

/* team: Amjad sits directly under Apurva (middle column) when there are three columns */
@media(min-width:901px){body[data-fx=a] .dept-card.lead-mid{grid-column:2}}

/* ---- legal documents (privacy policy, terms) ---- */
.legal-links.two{grid-template-columns:repeat(2,1fr)}
.doc-wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.doc-toc-in{position:sticky;top:calc(var(--hd,82px) + 36px);display:grid;gap:2px;font-size:14px}
.doc-toc-in .eyebrow{margin-bottom:12px}
.doc-toc a{display:block;padding:6px 0 6px 14px;border-left:2px solid var(--line);color:var(--grey);font-weight:560;line-height:1.35}
.doc-toc a:hover{color:var(--navy);border-left-color:var(--gold);text-decoration:none}
.doc{max-width:760px}
.doc-date{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-ink);margin:0 0 6px}
.doc section{padding:34px 0 6px;border-top:1px solid var(--line);margin-top:30px;scroll-margin-top:calc(var(--hd,82px) + 24px)}
.doc section:first-of-type{border-top:0;margin-top:10px}
.doc h2{font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.03em;color:var(--navy);margin:0 0 14px}
.doc p,.doc li{font-size:16.5px;line-height:1.75;color:var(--grey)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:22px;display:grid;gap:8px}
.doc strong{color:var(--navy);font-weight:640}
.doc a{color:var(--sky-ink);border-bottom:2px solid rgba(242,187,46,.6)}
.doc a:hover{color:var(--navy);text-decoration:none}
@media(max-width:860px){.doc-wrap{grid-template-columns:1fr;gap:6px}.doc-toc{display:none}.legal-links.two{grid-template-columns:1fr}}

/* ============================================================
   PHONES ONLY (<= 860px). Everything below is inside this media query,
   so the desktop experience is untouched.
   ============================================================ */
@media(max-width:860px){
  /* content blocks rise, sharpen and settle as they scroll into view (scroll-linked, not a one-off fade) */
  html.fx-mobile [data-in]{opacity:calc(.1 + .9*var(--in,1));transform:translateY(calc((1 - var(--in,1))*46px)) scale(calc(.955 + .045*var(--in,1)));transition:none;will-change:transform,opacity}
  html.fx-mobile .card-grid>[data-in]:nth-child(even),html.fx-mobile .principles>[data-in]:nth-child(even){transform:translateY(calc((1 - var(--in,1))*68px)) scale(calc(.955 + .045*var(--in,1)))}
  html.fx-mobile .arc-item[data-in]{transform:translateX(calc((1 - var(--in,1))*-26px)) translateY(calc((1 - var(--in,1))*30px))}
  html.fx-mobile .commit-item[data-in]{transform:translateX(calc((1 - var(--in,1))*34px))}
  /* the hero and its graphic drift away as you start scrolling */
  .a-hero-top,.a-hero-bot{transform:translateY(calc(var(--lv,0)*-7vh));opacity:calc(1 - var(--lv,0)*1.1)}
  .a-motif{transform:translateY(calc(var(--lv,0)*5vh)) scale(calc(1 - var(--lv,0)*.12))!important;opacity:calc(1 - var(--lv,0)*.9)!important}
  body[data-fx=a] .page-hero .wrap{transform:translateY(calc(var(--lv,0)*-6vh));opacity:calc(1 - var(--lv,0)*1.15)}
  /* index: "why we exist" beats and commitments sharpen as they reach mid-screen */
  .a-why .arc-item{opacity:calc(.3 + .7*var(--c,1));transform:translateX(calc((1 - var(--c,1))*-22px))}
  .a-commit .commit-item{opacity:calc(.28 + .72*var(--c,1))}
  .a-commit .commit-item b{font-size:clamp(34px,11vw,52px);transform:translateX(calc((1 - var(--c,1))*-5vw))}
  .a-why .arc-num{font-size:clamp(54px,15vw,76px)}
  /* index: product cards pin and stack on top of one another, like the desktop */
  .a-products .pcard{position:sticky;top:calc(var(--hd,72px) + 12px + var(--i,0)*12px);margin-bottom:34px;min-height:0;box-shadow:0 22px 44px -26px rgba(18,58,92,.55)}
  .a-products .pcard:last-child{margin-bottom:0}
  /* touch feedback and a softer mobile menu */
  .btn:active,.nav-cta:active{transform:scale(.96)}
  .card:active,.pcard:active,.legal-link:active{transform:scale(.985)}
  .menu-open nav{animation:m-menu .32s cubic-bezier(.2,.8,.2,1) both}
  .menu-open nav a{animation:m-menu-item .4s cubic-bezier(.2,.8,.2,1) both}
  .menu-open nav a:nth-child(2){animation-delay:.04s}.menu-open nav a:nth-child(3){animation-delay:.08s}.menu-open nav a:nth-child(4){animation-delay:.12s}
  .menu-open nav a:nth-child(5){animation-delay:.16s}.menu-open nav a:nth-child(6){animation-delay:.2s}.menu-open nav a:nth-child(7){animation-delay:.24s}.menu-open nav a:nth-child(8){animation-delay:.28s}
  /* the scroll-to-top button breathes in */
  .scroll-top.show{animation:m-pop .4s cubic-bezier(.2,1.4,.4,1) both}
}
@keyframes m-menu{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes m-menu-item{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes m-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media(max-width:860px) and (prefers-reduced-motion:reduce){
  html.fx-mobile [data-in],.a-hero-top,.a-hero-bot,.a-motif,body[data-fx=a] .page-hero .wrap,.a-why .arc-item,.a-commit .commit-item,.a-commit .commit-item b{transform:none!important;opacity:1!important}
  .menu-open nav,.menu-open nav a,.scroll-top.show{animation:none}
}