/* hero */
.hero{position:relative;overflow:clip;padding-block:clamp(24px,4vw,48px) clamp(44px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:1fr;align-items:center;position:relative}
@media(min-width:900px){.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.hero-copy{position:relative;z-index:4;padding-top:8px}
.h1{font-family:var(--f-display);font-weight:400;font-size:clamp(3rem,6.5vw,6.3rem);line-height:.92;letter-spacing:-.018em;margin-top:18px}
.h1 .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.h1 .ln>span{display:inline-block;animation:lineup 1.1s var(--ease) both;animation-delay:calc(.4s + var(--i,0)*.09s)}
.h1 em{font-style:italic;color:var(--teal)}
@keyframes lineup{from{transform:translateY(110%)}}
.lede{margin-top:22px;max-width:31em;font-size:clamp(1rem,1.25vw,1.12rem);color:var(--ink-2);animation:nudgeup .9s .2s var(--ease) both}
@keyframes nudgeup{from{transform:translateY(14px)}}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.hero-copy .actions{animation:fadeup .9s .9s var(--ease) both}
.trust{position:absolute;right:var(--gutter);bottom:20px;z-index:4;font-size:.8rem;line-height:1.4;color:var(--ink-3);text-align:right;max-width:17em;animation:fadeup .9s 1.2s var(--ease) both}
@media(max-width:899px){.trust{position:static;text-align:left;max-width:none;margin:22px var(--gutter) 0}}
.hero-visual{--S:min(600px,43vw);position:relative;display:grid;place-items:center;height:calc(var(--S)*.94)}
@media(max-width:899px){.hero-visual{--S:min(88vw,460px);margin-top:18px}}
.badge{position:absolute;top:0;right:0;width:clamp(84px,8vw,112px);aspect-ratio:1;z-index:5;animation:fadeup .8s 1.1s var(--ease) both}
.badge svg.ring{width:100%;height:100%;animation:spin360 28s linear infinite}
.badge text{font-family:var(--f-tape);font-weight:600;font-size:10.6px;letter-spacing:2.1px;fill:var(--ink)}
.badge .ctr{position:absolute;inset:31%;display:grid;place-items:center;background:var(--teal);border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(212,175,55,.6)}
.badge .ctr svg{width:46%;height:46%}
@keyframes spin360{to{transform:rotate(360deg)}}
@media(max-width:899px){.badge{top:-6px;right:-4px;width:78px}}

/* stage and thali scene. The scene angles and the lift are registered as non-inherited properties: changing one restyles
   only the element it is set on, not the 1,100 shapes inside the thali (that restyle was what made phones stall). */
@property --srx{syntax:'<angle>';inherits:false;initial-value:56deg}
@property --srz{syntax:'<angle>';inherits:false;initial-value:-22deg}
@property --explode{syntax:'<number>';inherits:false;initial-value:0}
/* stage and thali scene */
.cv-off{content-visibility:hidden}
.stage{position:relative;width:var(--S);height:var(--S);perspective:2400px;perspective-origin:50% 28%;z-index:2;margin-top:calc(var(--S)*-.06)}
.lev{position:absolute;inset:0;transform-style:preserve-3d;animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-1.4%)}50%{transform:translateY(1.4%)}}
.scene{--u:calc(var(--S)/600);position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--srx,56deg)) rotateZ(var(--srz,-22deg))}
.scene .sl{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(calc(var(--u)*var(--z,0))) scale(var(--s,1))}
.shadow{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(19,32,30,.4),rgba(19,32,30,.14) 62%,transparent);transform:translateZ(calc(var(--u)*-150));filter:blur(12px)}
.plate{position:absolute;inset:0;transform-style:preserve-3d;animation:rise 1.25s var(--ease) both;animation-delay:.3s}
@keyframes rise{from{translate:0 0 calc(var(--u)*-240);scale:.8}}
.plate .ps{border-radius:50%;background:radial-gradient(circle at 38% 30%,#CBA444,#7C5B17 68%,#5A410F)}
.item{position:absolute;left:calc(var(--x)/6*1%);top:calc(var(--y)/6*1%);width:calc(var(--r)/3*1%);aspect-ratio:1;transform-style:preserve-3d;transform:translate(-50%,-50%) translateZ(calc(var(--u)*(16 + var(--explode,0)*var(--ex,0))));animation:drop 1.15s cubic-bezier(.3,1.25,.5,1) both;animation-delay:calc(.6s + var(--d,0s))}
@keyframes drop{from{translate:0 0 calc(var(--u)*380)}}
.wall{border-radius:50%;background:radial-gradient(circle at 36% 30%,#DDB958,#A07A23 56%,#6A4C12)}
.rb{border-radius:50%}
.rb.r0{background:#B9813F}.rb.r1{background:#CC9550}
.rice .rs0{border-radius:50%;background:radial-gradient(circle at 40% 35%,#EFE8D7,#CFC2A6)}

/* tape ring around the thali */
.band{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(calc(var(--u)*(34 + var(--explode,0)*175))) rotateX(13deg) rotateY(-9deg)}
.band-spin{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;animation:bandspin 90s linear infinite}
@keyframes bandspin{to{transform:rotateZ(-360deg)}}
/* lite (weaker devices): the ring, floating cards and badge hold still; everything else is unchanged */
.lite .band-spin,.lite .badge svg.ring{animation:none}
.lite .fc{animation:fcin .9s var(--ease) both;animation-delay:calc(1.05s + var(--k,0)*.11s)}
/* 36 faces placed straight on the spinning ring (no wrapper per face): 72 GPU layers instead of 180, with corners under 1.5 px */
.seg{--w:calc(var(--u)*56.2);--bh:calc(var(--u)*34);--R:calc(var(--u)*318.3);--seg:rotateZ(calc(var(--i)*10deg)) translateY(calc(var(--R)*-1)) rotateX(90deg);position:absolute;left:calc(var(--w)/-2);top:calc(var(--bh)/-2);width:var(--w);height:var(--bh);display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:var(--seg);animation:segin .5s var(--ease) both;animation-delay:calc(1.15s + var(--i)*27ms)}
.seg.sf{background:#0B5450 url(../img/strip.png) no-repeat;background-size:3600% 100%;background-position:calc(var(--i)*100%/35) 0}
.seg.sb{background:#032E2B;transform:var(--seg) rotateY(180deg);animation-name:seginb}
@keyframes segin{from{transform:var(--seg) scaleY(0)}}
@keyframes seginb{from{transform:var(--seg) rotateY(180deg) scaleY(0)}}

/* gram labels: billboards that always face the viewer */
.tag{position:absolute;left:calc(var(--x)/6*1%);top:calc(var(--y)/6*1%);width:0;height:0;transform:translateZ(calc(var(--u)*(16 + var(--h) + var(--explode,0)*var(--ex,0)))) rotateZ(calc(-1*var(--srz,-22deg))) rotateX(calc(-1*var(--srx,56deg)))}
.tag span{position:absolute;left:0;bottom:0;transform:translate(calc(-50% + var(--ox,0px)),0);white-space:nowrap;font-family:var(--f-tape);font-weight:600;font-size:clamp(10px,.92vw,13px);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night);background:rgba(7,23,21,.9);border:1px solid rgba(212,175,55,.55);padding:4px 9px 3px;border-radius:999px;animation:tagin .55s var(--ease) both;animation-delay:calc(1.85s + var(--k)*.13s)}
.tag span b{color:var(--gold-hi);font-weight:700}
.tag span::after{content:"";position:absolute;left:calc(50% - var(--ox,0px));top:100%;width:1px;height:calc(var(--u)*var(--h)*.8);background:linear-gradient(rgba(19,32,30,.6),rgba(19,32,30,0))}
@keyframes tagin{from{opacity:0;transform:translate(calc(-50% + var(--ox,0px)),10px) scale(.85)}}
.illus{position:absolute;left:50%;bottom:-2px;translate:-50% 0;z-index:4;font-size:.72rem;color:var(--ink-3);white-space:nowrap;animation:fadeup .8s 2.5s var(--ease) both}
@media(max-width:899px){.tag span{font-size:9px;padding:3px 7px 2px}.illus{font-size:.68rem}}

/* floating proof cards */
.floaters{position:absolute;inset:0;z-index:1;pointer-events:none}
.floaters.front{z-index:3}
.fc{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;rotate:var(--r,0deg);animation:fcin .9s var(--ease) both,drift var(--dur,9s) ease-in-out infinite alternate;animation-delay:calc(1.05s + var(--k,0)*.11s),calc(var(--k,0)*-1.3s)}
@keyframes fcin{from{opacity:0;scale:.7}}
@keyframes drift{from{transform:translate3d(0,-8px,0)}to{transform:translate3d(0,9px,0)}}
.fc.img{width:var(--fw,clamp(150px,15vw,232px));border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 24px 44px -22px rgba(19,32,30,.55),0 0 0 1px rgba(19,32,30,.07)}
.fc.img img{width:100%;height:auto}
.st{font-family:var(--f-tape);text-transform:uppercase;letter-spacing:.06em;padding:10px 15px 9px;border-radius:12px;box-shadow:0 18px 34px -18px rgba(19,32,30,.6);line-height:1.05;white-space:nowrap}
.st b{display:block;font-weight:700;font-size:clamp(1rem,1.55vw,1.5rem);letter-spacing:.02em}
.st span{display:block;font-weight:500;font-size:.72rem;opacity:.86;margin-top:3px}
.st.clay{background:var(--clay);color:#FFF4EC}.st.gold{background:var(--gold);color:var(--night)}.st.teal{background:var(--teal);color:var(--on-night)}
@media(max-width:899px){.fc.hm{display:none}.fc.img{--fw:34vw}.st b{font-size:.95rem}}

.trust span{display:block;margin-top:6px;font-size:.7rem;opacity:.85}
/* proof: base layout is static; .motion upgrades it to the pinned prism */
.proof{position:relative;background:var(--bone);padding-block:clamp(70px,9vw,120px)}
.proof-pin{position:relative}
.proof-sentence{font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,5.6vw,5rem);line-height:1;letter-spacing:-.015em;max-width:17ch;margin-inline:auto;padding-inline:var(--gutter);text-align:center;text-wrap:balance}
.prism-stage{width:min(1180px,100% - 2*var(--gutter));margin:48px auto 0}
.prism{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.face{position:relative;aspect-ratio:3/4;border-radius:20px;padding:20px 20px 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 60px -36px rgba(19,32,30,.55)}
.face .fl{font-family:var(--f-tape);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.86}
.face .fv{font-family:var(--f-display);font-size:clamp(3rem,4.6vw,4.6rem);line-height:.95;margin-top:8px;letter-spacing:-.01em}
.face .ff{font-size:.84rem;line-height:1.35;margin-top:8px;max-width:21ch;opacity:.92}
.face .mini{position:absolute;left:0;right:0;bottom:-14%;height:66%;display:grid;place-items:center;perspective:800px;pointer-events:none}
.face .mini svg{width:94%;height:auto;transform:rotateX(54deg);filter:drop-shadow(0 26px 18px rgba(0,0,0,.3))}
.f-gold{background:linear-gradient(160deg,#E9C95E,#D4AF37 46%,#C39C2B);color:var(--night);--m1:#8F6E1E;--m2:#B8922E;--m3:#E6C865;--m4:#F7EAB9}
.f-clay{background:linear-gradient(160deg,#B66A51,#A25B44 50%,#8E4C37);color:#FFF4EC;--m1:#5E2C1E;--m2:#7E3F2C;--m3:#C8755A;--m4:#EAB39E}
.f-teal{background:linear-gradient(160deg,#0B6461,#004B49 50%,#003C3A);color:var(--on-night);--m1:#012826;--m2:#023836;--m3:#0E7470;--m4:#5FA8A2}
.f-bone{background:linear-gradient(160deg,#F3EDE1,#E6DECD 60%,#D9CFBA);color:var(--ink);--m1:#A39679;--m2:#C4B89E;--m3:#E4DCCB;--m4:#FBF8F1}
.f-ink{background:radial-gradient(120% 90% at 50% 30%,#13302D,var(--night) 70%);color:var(--gold-hi);align-items:center;justify-content:center;text-align:center;padding:24px}
.f-ink .em{width:46%;filter:drop-shadow(0 0 26px rgba(212,175,55,.35))}
.f-ink .fs{font-family:var(--f-display);font-size:clamp(1.6rem,2.3vw,2.2rem);line-height:1.05;margin-top:18px;color:var(--on-night)}
.f-ink .fs em{color:var(--gold-hi)}
.motion .proof{padding:0}
.motion .proof-pin{height:100vh;height:100svh;overflow:hidden}
/* seamless hand-offs: the section after a pinned scene starts underneath that scene's last full-screen frame,
   which then fades away (proof and interlude timelines in home.js), so there is never an empty screen between them */
.motion .proof-pin{z-index:2;background:var(--bone)}
/* the problem section stays under the card, but its heading sits above it so it can grow out of the card's centre;
   the section must not clip it while it is still higher up than the section's own top */
.motion .problem{margin-top:-100vh;margin-top:-100svh;overflow:visible;overflow-x:clip}
.motion .prob-head{z-index:3}
.motion .inter-pin{z-index:2}
.motion .process{z-index:1;margin-top:-100vh;margin-top:-100svh}
/* the dark header follows the interlude only while its scene is on screen (its box runs on under How it works) */
.theme-mark{position:absolute;inset:0;pointer-events:none}
.motion .interlude .theme-mark{bottom:calc(100vh + 30vh);bottom:calc(100svh + 30vh)}
.motion .proof-sentence{position:absolute;left:0;top:50%;translate:0 -50%;max-width:none;padding:0;margin:0;white-space:nowrap;text-align:left;font-size:clamp(5rem,15vw,15rem);will-change:transform}
.motion .prism-stage{--cw:clamp(210px,22vw,320px);--ch:calc(var(--cw)*1.3);--ap:calc(var(--cw)*.688);position:absolute;left:50%;top:50%;width:var(--cw);height:var(--ch);margin:calc(var(--ch)/-2) 0 0 calc(var(--cw)/-2);perspective:1400px;z-index:2;will-change:transform}
@property --pry{syntax:'<angle>';inherits:false;initial-value:0deg}
.motion .prism{display:block;position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--ap)*-1)) rotateY(var(--pry,0deg))}
.motion .face{position:absolute;inset:0;aspect-ratio:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotateY(calc(var(--i)*72deg)) translateZ(var(--ap))}
/* the plate sits under the text in the card's own flow, so longer text pushes it down instead of covering it */
.motion .face .mini{position:relative;left:auto;right:auto;bottom:auto;flex:none;height:56%;margin:auto -20px -16%}
@media(max-width:899px){.motion .prism-stage{--cw:min(62vw,250px);--ch:calc(var(--cw)*1.42)}.motion .face{padding:18px 18px 0}.motion .face .mini{margin-inline:-18px}.motion .face .fv{font-size:2.8rem}.motion .face .ff{font-size:.8rem}}

/* problem */
.problem{position:relative;padding-block:clamp(80px,10vw,140px) clamp(30px,5vw,60px);overflow:hidden;overflow:clip}
.prob-head{display:grid;gap:28px;align-items:end;position:relative;z-index:2}
@media(min-width:900px){.prob-head{grid-template-columns:1.35fr .65fr}}
.prob-aside{font-size:.95rem;color:var(--on-night-2);max-width:22em}
@media(min-width:900px){.prob-aside{justify-self:end}}
.mini-h{font-family:var(--f-tape);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--gold-hi);margin-bottom:8px}
.prob-aside li{padding:9px 0;border-top:1px solid var(--line-night)}
.crowd{position:relative;height:clamp(280px,50vw,700px);perspective:1000px;perspective-origin:50% 0%;margin-top:clamp(16px,3vw,36px);overflow:hidden}
.crowd-plane{position:absolute;left:50%;top:0;width:120vw;height:72vw;transform-style:preserve-3d;will-change:transform;transform-origin:50% 0;transform:translateX(-50%) rotateX(58deg)}
.dp{position:absolute;left:var(--x);top:var(--y);width:8.4vw;height:8.4vw;translate:-50% -50%;rotate:var(--r);opacity:var(--o)}
.dp svg{width:100%;height:100%;display:block}
.dp.gold{opacity:1;width:9.6vw;height:9.6vw;transform:translateZ(1.2vw);--m1:#8F6E1E;--m2:#C29B33;--m3:#EBCD6B;--m4:#FAEBB6;filter:drop-shadow(0 0 2.4vw rgba(240,214,122,.55))}
.glow{position:absolute;left:var(--x);top:var(--y);width:30vw;height:30vw;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,214,122,.32),rgba(240,214,122,.08) 55%,transparent);transform:translateZ(.2vw)}
.halo{position:absolute;left:var(--x);top:var(--y);width:0;height:0;transform:translateZ(9vw) rotateX(-58deg)}
.halo svg{position:absolute;width:4.4vw;height:4.4vw;left:-2.2vw;top:-2.2vw;filter:drop-shadow(0 0 1.4vw rgba(240,214,122,.7))}
.crowd-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--night) 0%,rgba(7,23,21,.35) 22%,transparent 45%,transparent 78%,var(--night) 100%)}
.prob-foot{position:relative;z-index:2;margin-top:clamp(8px,2vw,20px);font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.3rem);color:var(--on-night)}
.prob-foot em{color:var(--gold-hi)}

/* results: horizontal case studies */
.results{position:relative;padding-block:clamp(60px,8vw,110px) clamp(40px,5vw,60px)}
.res-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px 40px}
.res-sub{color:var(--on-night-2);max-width:25em}
.cases{margin-top:clamp(26px,3.5vw,44px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.cases::-webkit-scrollbar{display:none}
.cases-track{will-change:transform;display:flex;gap:clamp(14px,2vw,28px);padding-inline:var(--gutter);width:max-content}
.case{scroll-snap-align:center;position:relative;flex:0 0 auto;width:min(86vw,720px);height:clamp(440px,58vh,520px);border-radius:24px;overflow:hidden;padding:clamp(18px,2.4vw,30px);isolation:isolate}
.case-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.case-cat{font-family:var(--f-tape);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.case-name{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:.95;margin-top:6px}
.case-quote{font-family:var(--f-display);font-style:italic;font-size:clamp(1.05rem,1.4vw,1.3rem);margin-top:10px;max-width:16em;opacity:.92}
.pills{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.pills li{font-family:var(--f-tape);font-weight:600;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px 4px;border-radius:999px;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);white-space:nowrap}
.pills li b{font-weight:700}
.arts{position:absolute;left:0;right:0;top:45%;bottom:-7%;perspective:1000px;perspective-origin:30% 0;z-index:1}
.art{position:absolute;bottom:0;border-radius:12px;box-shadow:0 30px 44px -22px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.08);transform-origin:50% 100%;transform:translateX(calc(var(--fan,1)*var(--fx,0%))) rotateY(calc(var(--ry,-20deg) + var(--fan,1)*8deg)) rotateZ(var(--rz,0deg))}
.art.a1{left:5%;width:24%;height:100%;object-fit:cover;object-position:top;--ry:-26deg;--rz:-2deg}
.art.a2{left:30%;width:41%;bottom:34%;--ry:-22deg;--fx:6%}
.art.a3{left:53%;width:42%;bottom:6%;--ry:-18deg;--fx:12%;--rz:2deg}
.c-gold{background:linear-gradient(150deg,#ECCB5E,#D4AF37 55%,#BE972A);color:var(--night)}
.c-clay{background:linear-gradient(150deg,#BC6F55,#A25B44 55%,#8B4A36);color:#FFF4EC}
.c-teal{background:linear-gradient(150deg,#0D6A66,#004B49 55%,#003836);color:var(--on-night)}
.c-bone{background:linear-gradient(150deg,#F6F1E7,#E6DECD 60%,#D6CBB4);color:var(--ink)}
.c-bone .pills li{background:rgba(19,32,30,.07);box-shadow:inset 0 0 0 1px rgba(19,32,30,.12)}
.fine{margin-top:18px;font-size:.8rem;color:var(--on-night-2)}
@media(min-width:900px){.motion .cases{overflow:visible}.motion .results{height:100vh;height:100svh;padding-block:clamp(60px,9vh,96px) 0;display:flex;flex-direction:column}.motion .fine{position:absolute;left:0;right:0;bottom:22px}}

/* interlude: drifting proof and the emblem zoom */
.interlude{position:relative}
.inter-pin{position:relative;height:72vh;min-height:460px;overflow:hidden;display:grid;place-items:center;background:var(--night)}
.motion .inter-pin{height:100vh;height:100svh}
.drift{position:absolute;left:var(--x);top:var(--y);width:var(--w);border-radius:10px;overflow:hidden;rotate:var(--r);opacity:.9;box-shadow:0 24px 44px -20px rgba(0,0,0,.7)}
.drift img{width:100%;height:auto}
.drift.dim{opacity:.45;filter:saturate(.7)}
.emblem-wrap{will-change:transform;position:relative;z-index:2;width:clamp(150px,17vw,230px);display:grid;place-items:center}
.emblem-wrap svg{width:100%;height:auto;overflow:visible}
.inter-cap{position:absolute;left:0;right:0;bottom:7%;z-index:2;text-align:center;font-family:var(--f-tape);font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;color:var(--on-night-2)}
.flash{position:absolute;inset:0;z-index:4;background:var(--bone);opacity:0;pointer-events:none}

/* round 21: a small line above the dark face's statement */
.f-ink .fsw .fl{margin:16px auto 0;font-size:.72rem;letter-spacing:.12em;text-wrap:balance;opacity:.95}
.f-ink .fsw .fs{margin-top:8px}