/* ============================================================
Paramount HealthCare — site.css
One stylesheet. Tokens → primitives → components → pages.
Dark hero, light body, dark trust band: Apple-style rhythm.
============================================================ */
/* ---------- tokens ---------- */
:root{
--f-d:'Inter Tight',system-ui,-apple-system,sans-serif;
--f-b:'Inter',system-ui,-apple-system,sans-serif;
/* dark */
--bg-d:#060709; --sur-d:#0E1014; --sur-d2:#15181E;
--ink-d:#F4F5F7; --mut-d:rgba(244,245,247,.62); --line-d:rgba(255,255,255,.10);
/* light */
--bg-l:#F5F4F1; --sur-l:#FFFFFF; --sur-l2:#EDECE8;
--ink-l:#0B0C0F; --mut-l:rgba(11,12,15,.58); --line-l:rgba(11,12,15,.10);
/* family accents */
--c-bone-d:#F5A623; --c-mens:#8CB4FF; --c-womens:#F06A8A;
--c-kids:#FFB26B; --c-cough:#3FD1A5; --c-everyday:#B08CFF;
--brand-g:#2E6B34; --brand-r:#D13227;
--r:22px; --r-s:14px; --r-pill:999px;
--w:1200px; --gut:clamp(18px,4vw,48px);
--ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.3,.64,1);
--dur:.5s;
--nav-h:64px; --ann:34px; --top:calc(var(--nav-h) + var(--ann) + 24px);
}
[data-mode="dark"]{ --bg:var(--bg-d); --sur:var(--sur-d); --sur2:var(--sur-d2); --ink:var(--ink-d); --mut:var(--mut-d); --line:var(--line-d); color-scheme:dark }
[data-mode="light"]{ --bg:var(--bg-l); --sur:var(--sur-l); --sur2:var(--sur-l2); --ink:var(--ink-l); --mut:var(--mut-l); --line:var(--line-l); color-scheme:light }
/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#060709;color:#F4F5F7;font-family:var(--f-b);font-size:16px;line-height:1.5;
-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--c-bone-d);color:#000}
:focus-visible{outline:2px solid var(--c-bone-d);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--w),100% - 2*var(--gut));margin-inline:auto}
.sec{padding-block:clamp(72px,10vw,140px)}
section[data-mode]{background:var(--bg);color:var(--ink)}
/* ---------- type ---------- */
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.h-xl{font-family:var(--f-d);font-weight:600;font-size:clamp(40px,6vw,88px);letter-spacing:-.04em;line-height:.98}
.h-l{font-family:var(--f-d);font-weight:600;font-size:clamp(32px,4.4vw,60px);letter-spacing:-.035em;line-height:1.02}
.h-m{font-family:var(--f-d);font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.025em;line-height:1.1}
.h-s{font-family:var(--f-d);font-weight:600;font-size:20px;letter-spacing:-.015em;line-height:1.2}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--mut);max-width:60ch;font-weight:300}
.mut{color:var(--mut)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}
.sec-head .h-l{max-width:20ch}
.sec-head .eyebrow{margin-bottom:14px}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:var(--r-pill);
font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap;transition:transform .35s var(--spring),background .25s,box-shadow .35s,color .25s;
will-change:transform}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--ink);color:var(--bg)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.btn-a{background:var(--c-bone-d);color:#1A0E00}
.btn-a:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(245,166,35,.6)}
.btn-g{background:rgba(127,127,127,.12);color:var(--ink);border:1px solid var(--line);backdrop-filter:blur(12px)}
.btn-g:hover{background:rgba(127,127,127,.2)}
.btn-l{padding:0;height:auto;font-weight:500;gap:6px;color:var(--ink)}
.btn-l svg{transition:transform .3s var(--ease)}
.btn-l:hover svg{transform:translateX(4px)}
.btn-s{height:40px;padding:0 18px;font-size:14px}
.btn-wa{background:#25D366;color:#053d1c}
.btn-wa:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(37,211,102,.6)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}
/* ---------- glass nav ---------- */
.nav{position:fixed;top:calc(var(--ann) + 10px);left:50%;transform:translateX(-50%);z-index:60;
width:min(1120px,calc(100% - 28px));height:var(--nav-h);border-radius:var(--r-pill);
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px 0 14px;
background:rgba(20,22,28,.55);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px -20px rgba(0,0,0,.7);
color:#F4F5F7;transition:width .5s var(--ease),background .4s,top .4s}
.nav.compact{top:10px;width:min(920px,calc(100% - 28px))}
.nav.on-light{background:rgba(255,255,255,.62);color:#0B0C0F;border-color:rgba(0,0,0,.08);box-shadow:0 20px 50px -24px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-d);font-weight:600;letter-spacing:-.02em;font-size:16px}
.brand svg{width:26px;height:26px}
.brand span{white-space:nowrap}
.brand span b{font-weight:600}
.brand span i{font-style:normal;font-weight:400;opacity:.8}
.nav-links{display:flex;gap:2px;justify-self:start}
.nav-links a{padding:9px 14px;border-radius:var(--r-pill);font-size:14px;font-weight:500;opacity:.85;transition:background .25s,opacity .25s}
.nav-links a:hover,.nav-links a.active{background:rgba(127,127,127,.16);opacity:1}
.nav-acts{display:flex;align-items:center;gap:4px;justify-self:end}
.nav-why{padding:9px 14px;border-radius:var(--r-pill);font-size:14px;font-weight:500;opacity:.85;transition:background .25s,opacity .25s}
.nav-why:hover,.nav-why.active{background:rgba(127,127,127,.16);opacity:1}
.nav .brand{justify-self:center}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;position:relative;transition:background .25s}
.icon-btn:hover{background:rgba(127,127,127,.16)}
.icon-btn svg{width:20px;height:20px}
.cart-n{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--c-bone-d);color:#000;
font-size:10.5px;font-weight:700;display:grid;place-items:center;transform:scale(0);transition:transform .35s var(--spring)}
.cart-n.show{transform:scale(1)}
.burger{display:none}
@media (max-width:860px){ .nav-links{display:none} .nav-why{display:none} .burger{display:grid} .nav{grid-template-columns:44px 1fr auto;padding-left:10px} .nav .brand{justify-self:center} .nav-acts .icon-btn[aria-label=Search]{display:none} .nav::before{content:'';width:44px} }
@media (max-width:420px){ .brand span i{display:none} }
/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:55;background:rgba(6,7,9,.92);backdrop-filter:blur(30px);display:grid;place-items:center;
opacity:0;pointer-events:none;transition:opacity .35s}
.mmenu.open{opacity:1;pointer-events:auto}
.mmenu a{display:block;font-family:var(--f-d);font-size:38px;font-weight:600;letter-spacing:-.03em;padding:10px 0;text-align:center;color:#fff;
opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.mmenu.open a{opacity:1;transform:none}
.mmenu.open a:nth-child(2){transition-delay:.05s}.mmenu.open a:nth-child(3){transition-delay:.1s}.mmenu.open a:nth-child(4){transition-delay:.15s}.mmenu.open a:nth-child(5){transition-delay:.2s}
/* ---------- announce bar ---------- */
.announce{position:fixed;top:0;left:0;right:0;z-index:61;height:var(--ann);display:block;line-height:var(--ann);background:#000;color:rgba(255,255,255,.75);font-size:12.5px;letter-spacing:.02em;text-align:center;padding:0 16px;transition:transform .4s var(--ease)}
.announce.hide{transform:translateY(-100%)}
.announce{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announce .x2{display:inline} .announce .x1{display:none}
@media (max-width:760px){.announce .x2{display:none} .announce .x1{display:inline}}
.announce b{color:var(--c-bone-d);font-weight:600}
/* ---------- pill renders ----------
[img.pill-img] (real render, screen-blended on dark)
(css fallback)
The css version stands in until assets/pills/.webp lands. */
.pill{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:visible;
--c:#F5A623;transform-style:preserve-3d;will-change:transform}
.pill::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent 72%);
opacity:.28;filter:blur(28px);transform:translateZ(-20px);transition:opacity .5s}
.pill:hover::before{opacity:.5}
.pill-img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;transform:translateZ(10px);
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 48%,transparent 70%);mask-image:radial-gradient(circle at 50% 50%,#000 48%,transparent 70%);
filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.pill-cg{position:relative;width:62%;transform:translateZ(10px);filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.pill-cg::after{content:"";position:absolute;inset:0;border-radius:inherit;
background:linear-gradient(120deg,rgba(255,255,255,.55) 8%,transparent 30%,transparent 70%,rgba(255,255,255,.22) 96%);mix-blend-mode:screen}
.pill-cg::before{content:"";position:absolute;left:14%;top:12%;width:44%;height:12%;border-radius:999px;background:rgba(255,255,255,.85);filter:blur(1.5px);opacity:.9}
.pill[data-form="softgel"] .pill-cg{aspect-ratio:2.3/1;border-radius:999px;transform:translateZ(10px) rotate(-22deg);
background:radial-gradient(60% 90% at 35% 30%,color-mix(in srgb,var(--c) 40%,#fff) 0%,var(--c) 40%,color-mix(in srgb,var(--c) 55%,#000) 100%)}
.pill[data-form="capsule"] .pill-cg{aspect-ratio:2.4/1;border-radius:999px;transform:translateZ(10px) rotate(-22deg);
background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#fff) 0 50%,color-mix(in srgb,var(--c) 45%,#000) 50%);
box-shadow:inset 0 -10px 22px rgba(0,0,0,.35),inset 0 8px 14px rgba(255,255,255,.35)}
.pill[data-form="capsule"] .pill-cg::before{left:8%;width:36%}
.pill[data-form="tablet"] .pill-cg{aspect-ratio:1.8/1;border-radius:50%;transform:translateZ(10px) rotate(-14deg);
background:radial-gradient(70% 70% at 40% 35%,#fff,#E9E7E2 55%,#B9B6AF);box-shadow:inset 0 -8px 16px rgba(0,0,0,.18)}
.pill[data-form="tablet"] .pill-cg::before,.pill[data-form="tablet"] .pill-cg::after{display:none}
.pill[data-form="caplet"] .pill-cg{aspect-ratio:2.1/1;border-radius:999px;transform:translateZ(10px) rotate(-18deg);
background:linear-gradient(160deg,color-mix(in srgb,var(--c) 78%,#fff) 0%,var(--c) 40%,color-mix(in srgb,var(--c) 45%,#000) 100%);
box-shadow:inset 0 -10px 20px rgba(0,0,0,.45)}
.pill[data-form="sphere"] .pill-cg{width:56%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(60% 60% at 35% 30%,color-mix(in srgb,var(--c) 35%,#fff) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 50%,#000) 100%);
box-shadow:inset -10px -16px 30px rgba(0,0,0,.35),inset 8px 10px 22px rgba(255,255,255,.3)}
.pill[data-form="sphere"] .pill-cg::before{left:22%;top:16%;width:26%;height:16%;border-radius:50%}
.pill[data-form="sphere"] .pill-cg::after{background:
radial-gradient(circle at 62% 66%,rgba(255,255,255,.55) 0 4%,transparent 5%),
radial-gradient(circle at 44% 58%,rgba(255,255,255,.45) 0 2.5%,transparent 3.5%),
radial-gradient(circle at 70% 40%,rgba(255,255,255,.4) 0 2%,transparent 3%)}
.pill[data-form="drop"] .pill-cg{width:46%;aspect-ratio:1/1.25;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:translateZ(10px) rotate(180deg);
background:radial-gradient(60% 60% at 40% 60%,color-mix(in srgb,var(--c) 35%,#fff),var(--c) 50%,color-mix(in srgb,var(--c) 50%,#000));
box-shadow:inset 0 10px 20px rgba(0,0,0,.35)}
.pill[data-form="drop"] .pill-cg::before{transform:rotate(180deg);top:auto;bottom:18%;left:30%;width:32%}
.pill[data-form="sachet"] .pill-cg{aspect-ratio:1.5/1;border-radius:18% / 26%;transform:translateZ(10px) rotate(-8deg);
background:linear-gradient(135deg,#fff 0%,#E8E6E1 50%,#C9C6BF 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),inset 0 -14px 28px rgba(0,0,0,.14)}
.pill[data-form="sachet"] .pill-cg::before{display:none}
.pill.has-img .pill-cg{display:none}
/* pill on a dark stage tile (for light sections) */
.stage-tile{position:relative;border-radius:var(--r);background:radial-gradient(80% 70% at 50% 38%,#1B1E26,#090A0D 70%);overflow:hidden;
isolation:isolate}
.stage-tile::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 100%,color-mix(in srgb,var(--c,#F5A623) 22%,transparent),transparent 70%);pointer-events:none}
.stage-tile .pill{width:100%}
/* ---------- product card ---------- */
.pcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--sur);border:1px solid var(--line);
overflow:hidden;transition:transform .5s var(--spring),box-shadow .5s var(--ease),border-color .3s;will-change:transform}
.pcard:hover{transform:translateY(-6px);box-shadow:0 40px 60px -30px rgba(0,0,0,.45);border-color:transparent}
.pcard .stage-tile{aspect-ratio:1;border-radius:0;--c:var(--acc)}
.pcard .pill{width:82%;margin:auto;transition:transform .6s var(--spring)}
.pcard:hover .pill{transform:translateY(-8px) scale(1.06)}
.pcard .stage-tile{display:grid;place-items:center}
.pbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pbody .eyebrow{font-size:10.5px}
.pbody h3{font-family:var(--f-d);font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1.15;min-height:2.3em;display:flex;align-items:flex-start}
.pbody p{font-size:13.5px;color:var(--mut);line-height:1.45;min-height:3.9em}
.prow{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px}
.price{font-family:var(--f-d);font-weight:600;font-size:18px;letter-spacing:-.02em}
.price small{font-size:12px;font-weight:500;color:var(--mut);margin-left:6px}
.quick{height:38px;padding:0 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);font-size:13.5px;font-weight:600;
display:inline-flex;align-items:center;gap:6px;transition:transform .3s var(--spring),background .25s}
.quick:hover{transform:scale(1.04)}
.quick.done{background:#2E9E5B;color:#fff}
.badge{position:absolute;top:14px;left:14px;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
padding:6px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18)}
.badge.warn{background:rgba(245,166,35,.18);color:#FFD08A;border-color:rgba(245,166,35,.35)}
.pcard .fam-dot{position:absolute;top:16px;right:16px;z-index:2;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px var(--acc)}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid,.grid-4{grid-template-columns:1fr 1fr;gap:12px} .pbody{padding:14px} .pbody h3{font-size:16px;min-height:0} .pbody p{display:none} .price{font-size:16px} .price small{display:block;margin:2px 0 0;font-size:11px} .quick{height:34px;padding:0 12px;font-size:12.5px}}
/* rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(300px,72vw);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:6px var(--gut) 24px;margin-inline:calc(-1*var(--gut));scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .25s,transform .3s var(--spring)}
.rail-nav button:hover{background:rgba(127,127,127,.14);transform:scale(1.06)}
.rail-nav svg{width:18px;height:18px}
/* ---------- HERO (scroll scrub) ---------- */
.hero{position:relative;height:320vh;background:#1A0803;color:#fff}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#1A0803}
.hero-wash{position:absolute;inset:0;z-index:0;will-change:background}
.hero .bokeh{z-index:0}
.hero-v,.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;mix-blend-mode:screen;
filter:contrast(1.08) brightness(.98);transform:translate(var(--tx,0),-3vh) scale(calc(var(--hs,1) * var(--hm,1)));
transition:none;
-webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 58%,transparent 84%);mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 58%,transparent 84%)}
.hero-poster{transition:opacity .6s}
.hero-vig{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 200px 40px rgba(20,6,0,.35)}
.hero-copy{position:absolute;inset:0;z-index:3;pointer-events:none}
.hch{position:absolute;left:50%;bottom:9vh;transform:translate(-50%,0);width:min(620px,80vw);text-align:center;will-change:opacity,transform}
.hch .acts{justify-content:center}
.hch .eyebrow{color:rgba(255,255,255,.62);margin-bottom:14px}
.hch h2{font-family:var(--f-d);font-weight:600;font-size:clamp(32px,4vw,56px);letter-spacing:-.04em;line-height:1;margin-bottom:10px;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hch p{font-weight:300;font-size:16px;line-height:1.5;color:rgba(255,255,255,.8);text-shadow:0 2px 20px rgba(0,0,0,.5)}
.hch .acts{margin-top:16px}
.hch .acts{display:flex;gap:10px;margin-top:22px;pointer-events:auto}
.hch.r .acts{justify-content:flex-end}
.hero-top{position:absolute;left:0;right:0;top:calc(var(--top) + 18px);z-index:3;text-align:center;pointer-events:none}
.hero-top .h-xl{font-size:clamp(34px,4.8vw,66px);letter-spacing:-.035em}
.hero-top p{margin-top:12px}
.hero-top p{margin-top:14px;color:rgba(255,255,255,.66);font-size:clamp(15px,1.3vw,18px);font-weight:300}
.hero-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);transition:opacity .4s}
.hero-hint b{display:block;margin:8px auto 0;width:1px;height:22px;background:linear-gradient(#fff,transparent)}
.hero-rail{position:absolute;right:26px;top:50%;transform:translateY(-50%);z-index:4;width:2px;height:150px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.hero-rail i{position:absolute;left:0;right:0;top:0;background:#fff}
@media (max-width:760px){
.hch{bottom:7vh;width:88vw}
.hero{height:300vh} .hero-rail{display:none}
.hero-v,.hero-poster{--hm:1.45;object-position:50% 34%}
.hero-top{top:calc(var(--top) + 6px)}
}
@media (prefers-reduced-motion:reduce){ .hero{height:100vh} .hero-v{display:none} .hero-poster{opacity:1!important} .hch{opacity:1!important;position:static;transform:none;margin:20px auto} }
/* ---------- who is it for: three video cards on black ---------- */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:1;max-width:1040px;margin-inline:auto}
.who-card{position:relative;aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:#07080B;border:1px solid rgba(255,255,255,.08);
display:flex;align-items:flex-end;justify-content:center;padding:26px;color:#fff;isolation:isolate;
transition:transform .55s var(--spring),box-shadow .5s,border-color .4s}
.who-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.18);box-shadow:0 60px 80px -50px color-mix(in srgb,var(--acc) 70%,transparent)}
.who-v{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;object-position:50% 20%;z-index:0;
filter:blur(14px) grayscale(1) contrast(1.15) brightness(.85);opacity:0;transition:opacity 1.2s var(--ease)}
.who-card.has-v .who-v{opacity:.9}
.who-card.has-v .who-fx{opacity:0}
/* placeholder figure until the video lands: a blurred silhouette in the family colour */
.who-fx{position:absolute;inset:0;z-index:0;opacity:1;transition:opacity 1s;background:
radial-gradient(22% 16% at 50% 30%,rgba(255,255,255,.28),transparent 70%),
radial-gradient(48% 30% at 50% 62%,rgba(255,255,255,.22),transparent 70%),
radial-gradient(90% 60% at 50% 110%,color-mix(in srgb,var(--acc) 40%,transparent),transparent 70%);filter:blur(18px)}
.who-fade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,8,11,.1) 30%,rgba(7,8,11,.85) 100%);pointer-events:none}
.who-label{position:relative;z-index:2;text-align:center;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.who-label b{display:block;font-family:var(--f-d);font-weight:600;font-size:clamp(22px,2vw,27px);letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
.who-label small{display:block;margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.7);font-weight:400}
.who-card .arrow{position:absolute;top:18px;right:18px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;
border:1px solid rgba(255,255,255,.16);transition:background .3s,transform .4s var(--spring)}
.who-card:hover .arrow{background:var(--acc);color:#000;transform:rotate(-45deg)}
.who-card .arrow svg{width:16px;height:16px}
@media (max-width:820px){.who{grid-template-columns:1fr;max-width:420px} .who-card{aspect-ratio:4/4.4}}
/* ---------- gradient ground + bokeh for dark sections ---------- */
section[data-mode="dark"]{position:relative;background:
radial-gradient(70% 60% at 50% 115%,rgba(255,140,40,.42),transparent 70%),
radial-gradient(50% 40% at 90% 10%,rgba(255,110,40,.16),transparent 60%),
radial-gradient(60% 50% at 8% 0%,rgba(140,180,255,.07),transparent 60%),
linear-gradient(180deg,#140703 0%,#2A0F08 45%,#5A2208 100%)}
section[data-mode="dark"]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
background:radial-gradient(40% 50% at 20% 60%,rgba(255,120,40,.35),transparent 70%),radial-gradient(40% 50% at 80% 40%,rgba(255,90,30,.28),transparent 70%);
animation:aurora 22s ease-in-out infinite alternate}
@keyframes aurora{from{transform:translate3d(-6%,4%,0) scale(1.05)}to{transform:translate3d(6%,-4%,0) scale(1.15)}}
section[data-mode="dark"]>.wrap{position:relative;z-index:1}
.bokeh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bokeh{--bk:255,190,110}
.bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(var(--bk),.9),rgba(var(--bk),.35) 55%,transparent 72%);
animation:bok linear infinite;will-change:transform}
@keyframes bok{from{transform:translate3d(0,10vh,0)}to{transform:translate3d(var(--dx,0),var(--dy,-20vh),0)}}
@media (prefers-reduced-motion:reduce){.bokeh i{animation:none}}
.sec-head.center{justify-content:center;text-align:center}
.sec-head.center .h-l{max-width:none}
.sec-head.center .lede{margin-inline:auto}
/* ---------- trust band ---------- */
.trust{position:relative;overflow:hidden}
.trust::before{display:none}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(36px,5vw,64px)}
.stat{padding:26px 24px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid var(--line-d)}
.stat b{display:block;font-family:var(--f-d);font-weight:600;font-size:clamp(38px,4.6vw,64px);letter-spacing:-.04em;line-height:1}
.stat b small{font-size:.5em;letter-spacing:-.02em;margin-left:2px}
.stat>span{display:block;margin-top:10px;font-size:13.5px;color:var(--mut-d)}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}}
.marq{margin-top:clamp(36px,5vw,64px);overflow:hidden;mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-in{display:flex;gap:44px;width:max-content;animation:marq 40s linear infinite;font-family:var(--f-d);font-weight:600;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;color:rgba(255,255,255,.4);white-space:nowrap}
.marq-in span::before{content:"·";margin-right:44px;color:var(--c-bone-d)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq-in{animation:none}}
/* ---------- concern finder ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{height:44px;padding:0 18px;white-space:nowrap;flex:none;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--sur);font-size:14.5px;font-weight:500;
display:inline-flex;align-items:center;gap:8px;transition:background .25s,transform .3s var(--spring),border-color .25s,color .25s}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--acc,var(--c-bone-d))}
/* ---------- steps / science ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{padding:28px;border-radius:var(--r);background:var(--sur);border:1px solid var(--line)}
.step .n{font-family:var(--f-d);font-weight:600;font-size:13px;letter-spacing:.1em;color:var(--c-bone-d)}
.step h3{margin:14px 0 8px}
.step p{font-size:14.5px;color:var(--mut);line-height:1.5}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
/* ---------- verify strip ---------- */
.verify-band{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:28px;
background:linear-gradient(135deg,#0E1014,#15181E);border:1px solid var(--line-d);color:#fff}
.verify-band form{display:flex;gap:8px}
.verify-band input{flex:1;height:52px;padding:0 18px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-size:15px}
.verify-band input::placeholder{color:rgba(255,255,255,.4)}
@media (max-width:820px){.verify-band{grid-template-columns:1fr}}
/* ---------- footer ---------- */
.foot{background:#000;color:rgba(255,255,255,.7);padding:clamp(48px,7vw,90px) 0 32px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px;font-weight:600}
.foot a{display:block;padding:5px 0;transition:color .2s}
.foot a:hover{color:#fff}
.foot .brand{color:#fff;margin-bottom:14px}
.foot .legal{margin-top:24px;font-size:12px;color:rgba(255,255,255,.4);line-height:1.6;max-width:70ch}
.foot .bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:12.5px;color:rgba(255,255,255,.45)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
/* ---------- shop ---------- */
.shop-head{padding-top:calc(var(--top) + 36px)}
.filters{position:sticky;top:calc(var(--nav-h) + 20px);z-index:20;display:flex;gap:8px;overflow-x:auto;padding:8px 0 16px;scrollbar-width:none;
background:linear-gradient(var(--bg) 70%,transparent)}
.filters::-webkit-scrollbar{display:none}
.count{font-size:13px;color:var(--mut)}
/* ---------- PDP ---------- */
.pdp{padding-top:calc(var(--top) + 16px)}
.crumbs{font-size:13px;color:var(--mut);display:flex;gap:8px;align-items:center;margin-bottom:22px}
.crumbs a:hover{color:var(--ink)}
.pdp-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:start}
.pdp-stage{position:sticky;top:calc(var(--nav-h) + 30px)}
.pdp-stage .stage-tile{aspect-ratio:1;border-radius:32px;display:grid;place-items:center}
.pdp-stage .pill{width:76%;transition:transform .15s linear}
.pdp-stage .form-tag{position:absolute;bottom:18px;left:18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pdp-buy h1{font-family:var(--f-d);font-weight:600;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.035em;line-height:1.02;margin:10px 0 14px}
.pdp-buy .lede{font-size:16.5px}
.opts{display:grid;gap:10px;margin:26px 0 16px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:var(--r-s);border:1.5px solid var(--line);
background:var(--sur);transition:border-color .25s,transform .3s var(--spring);text-align:left}
.opt:hover{transform:translateY(-1px)}
.opt.on{border-color:var(--ink)}
.opt b{font-weight:600;font-size:15px}
.opt small{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.opt .price{font-size:17px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill);height:48px}
.qty button{width:44px;height:100%;font-size:18px}
.qty span{min-width:28px;text-align:center;font-weight:600}
.buy-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.buy-row .btn-a{flex:1;min-width:180px}
.assure{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:22px;font-size:13.5px;color:var(--mut)}
.assure span{display:flex;gap:8px;align-items:center}
.assure svg{width:16px;height:16px;color:var(--c-bone-d);flex:none}
.note{margin-top:18px;padding:14px 16px;border-radius:var(--r-s);font-size:13.5px;line-height:1.5;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3)}
.note b{color:var(--c-bone-d)}
.acc{margin-top:30px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-family:var(--f-d);font-weight:600;font-size:17px;letter-spacing:-.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .35s var(--ease),background .25s}
.acc details[open] summary i{transform:rotate(45deg);background:var(--ink);color:var(--bg)}
.acc .body{padding:0 0 20px;font-size:15px;line-height:1.6;color:var(--mut)}
.acc .body p+p{margin-top:10px}
.acc ul{padding-left:18px}
.acc li+li{margin-top:6px}
.comp{width:100%;border-collapse:collapse;font-size:14.5px}
.comp td{padding:10px 0;border-bottom:1px solid var(--line)}
.comp td:last-child{text-align:right;font-weight:600;color:var(--ink)}
.tl{display:grid;gap:12px}
.tl div{display:grid;grid-template-columns:110px 1fr;gap:12px}
.tl b{color:var(--ink);font-weight:600}
.pairs{margin-top:60px}
@media (max-width:900px){.pdp-grid{grid-template-columns:1fr} .pdp-stage{position:static}}
/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(440px,100%);background:#0E1014;color:#F4F5F7;
transform:translateX(102%);transition:transform .5s var(--ease);display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(0,0,0,.5)}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 16px;border-bottom:1px solid var(--line-d)}
.drawer .items{flex:1;overflow-y:auto;padding:8px 22px}
.citem{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-d)}
.citem .stage-tile{width:76px;height:76px;border-radius:14px;display:grid;place-items:center}
.citem .pill{width:86%}
.citem h4{font-size:15px;font-weight:600;letter-spacing:-.01em}
.citem small{display:block;color:var(--mut-d);font-size:12.5px;margin-top:2px}
.citem .qty{height:36px;margin-top:8px} .citem .qty button{width:34px}
.citem .rm{font-size:12px;color:var(--mut-d);margin-left:10px}
.citem .rm:hover{color:#fff}
.drawer footer{padding:18px 22px 24px;border-top:1px solid var(--line-d);background:#0B0D11}
.tot{display:flex;justify-content:space-between;font-size:15px;padding:4px 0}
.tot.big{font-family:var(--f-d);font-weight:600;font-size:20px;letter-spacing:-.02em;padding-top:10px}
.ship-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;margin:10px 0 6px}
.ship-bar i{display:block;height:100%;background:var(--c-bone-d);transition:width .5s var(--ease)}
.ship-msg{font-size:12.5px;color:var(--mut-d)}
.empty{text-align:center;padding:60px 20px;color:var(--mut-d)}
/* ---------- checkout ---------- */
.co{padding-top:calc(var(--top) + 26px)}
.co-grid{display:grid;grid-template-columns:1fr .8fr;gap:clamp(24px,4vw,56px);align-items:start}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--mut)}
.field input,.field select,.field textarea{height:50px;padding:0 16px;border-radius:var(--r-s);border:1.5px solid var(--line);background:var(--sur);transition:border-color .25s}
.field textarea{height:auto;padding:14px 16px;min-height:90px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pay{display:grid;gap:10px;margin:8px 0 20px}
.pay label{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-s);border:1.5px solid var(--line);cursor:pointer;background:var(--sur)}
.pay label:has(input:checked){border-color:var(--ink)}
.pay input{accent-color:#000}
.summary{position:sticky;top:calc(var(--nav-h) + 30px);padding:24px;border-radius:var(--r);background:var(--sur);border:1px solid var(--line)}
.summary .citem{grid-template-columns:56px 1fr auto;padding:10px 0}
.summary .citem .stage-tile{width:56px;height:56px}
.summary .citem h4{font-size:14px}
@media (max-width:900px){.co-grid{grid-template-columns:1fr} .summary{position:static}}
.done{max-width:560px;margin:0 auto;text-align:center;padding:60px 0}
.done .tick{width:74px;height:74px;border-radius:50%;background:#2E9E5B;display:grid;place-items:center;margin:0 auto 22px;color:#fff}
.done .tick svg{width:34px;height:34px}
/* ---------- about / verify / contact ---------- */
.page{padding-top:calc(var(--top) + 36px)}
.prose{max-width:68ch;font-size:17px;line-height:1.65;color:var(--mut)}
.prose p+p{margin-top:16px}
.prose h2{margin:40px 0 14px;color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.timeline{display:grid;gap:0;border-left:1px solid var(--line);margin-left:8px}
.timeline div{position:relative;padding:0 0 28px 28px}
.timeline div::before{content:"";position:absolute;left:-5px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--c-bone-d)}
.timeline b{display:block;font-family:var(--f-d);font-size:20px;letter-spacing:-.02em}
.timeline span{font-size:14.5px;color:var(--mut)}
/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:80;padding:12px 18px;border-radius:var(--r-pill);
background:#F4F5F7;color:#000;font-size:14px;font-weight:500;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);opacity:0;pointer-events:none;
transition:opacity .3s,transform .4s var(--spring);display:flex;gap:10px;align-items:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* ---------- view transitions ---------- */
#app{min-height:100vh}
.view{animation:vin .6s var(--ease) both}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* cursor glow on dark sections */
.glow{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
background:radial-gradient(closest-side,rgba(245,166,35,.10),transparent);transform:translate(-50%,-50%);opacity:0;transition:opacity .6s}
section:hover .glow{opacity:1}
/* ================= pass 3: editorial type, glass chips, tile cards, certs, distributor ================= */
.serif{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:300;letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" 50}
.serif em{font-style:italic;font-weight:300}
.h-l.serif{font-size:clamp(36px,4.8vw,66px);line-height:1}
.h-xl.serif{font-size:clamp(42px,6vw,84px);line-height:.98}
.h-m.serif{font-size:clamp(26px,2.8vw,38px);line-height:1.05}
/* stats: one giant figure, then a row */
.stats-ed{display:grid;grid-template-columns:1.1fr 1.6fr;gap:24px;align-items:end;margin-top:clamp(36px,5vw,64px)}
.stat-big b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(96px,13vw,190px);letter-spacing:-.05em;line-height:.85;
background:linear-gradient(180deg,#fff 30%,rgba(255,200,140,.55));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-big>span{display:block;margin-top:14px;font-size:14px;color:var(--mut-d);letter-spacing:.02em}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{padding:22px 22px 20px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
.stat b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.04em;line-height:1}
.stat b small{font-size:.55em;margin-left:1px}
.stat>span{display:block;margin-top:8px;font-size:13px;color:var(--mut-d)}
@media (max-width:900px){.stats-ed{grid-template-columns:1fr} .stat-row{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:560px){.stat-row{grid-template-columns:1fr 1fr}}
/* liquid-glass chip rail (concerns + shop filters) */
.glass-rail,.filters{display:flex;gap:4px;padding:5px;border-radius:999px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;
background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 34px -22px rgba(0,0,0,.35);
backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.glass-rail::-webkit-scrollbar,.filters::-webkit-scrollbar{display:none}
.gchip,.filters .chip{height:40px;padding:0 16px;border-radius:999px;border:0;background:transparent;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;flex:none;
display:inline-flex;align-items:center;gap:8px;transition:background .3s var(--ease),color .3s,transform .3s var(--spring)}
.gchip:hover,.filters .chip:hover{background:rgba(255,255,255,.7);transform:none}
.filters .chip.on{background:#0B0C0F;color:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.filters .chip i{display:none}
.filters{position:sticky;top:calc(var(--nav-h) + 20px);z-index:20;margin-top:22px;padding:5px;background:rgba(255,255,255,.62)}
/* product cards: the render is the card */
.pcard{border:0;background:transparent;box-shadow:none;border-radius:26px;overflow:visible}
.pcard:hover{transform:translateY(-8px);box-shadow:none}
.pcard .stage-tile{aspect-ratio:4/4.6;border-radius:26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:box-shadow .5s}
.pcard:hover .stage-tile{box-shadow:0 50px 90px -40px color-mix(in srgb,var(--acc) 55%,#000)}
.pcard .pill{width:74%;margin-bottom:12%}
.pcard .fam-dot{display:none}
.pcard .badge{top:16px;left:16px;font-size:10px;padding:6px 10px}
.pbody{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 20px;color:#fff;gap:2px;z-index:2;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(0,0,0,.55) 40%,rgba(0,0,0,.78))}
.pbody .eyebrow{color:rgba(255,255,255,.55);font-size:10px;letter-spacing:.18em}
.pbody h3{min-height:0;font-size:20px;color:#fff;margin-top:2px}
.pbody p{display:none}
.prow{padding-top:8px;pointer-events:auto}
.price{color:#fff;font-size:17px}
.price small{color:rgba(255,255,255,.6)}
.quick{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);height:36px;padding:0 14px;font-size:13px}
.quick:hover{background:#fff;color:#000}
.quick.done{background:#2E9E5B;border-color:#2E9E5B;color:#fff}
.grid .pcard,.rail .pcard{min-height:0}
@media (max-width:520px){.pbody{padding:12px 14px 14px} .pbody h3{font-size:15px} .price{font-size:14px} .price small{display:inline;margin-left:4px} .quick{height:30px;padding:0 10px;font-size:12px}}
/* certifications band */
.certs{padding:26px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.certs-in{display:flex;justify-content:center;gap:clamp(28px,6vw,90px);flex-wrap:wrap;align-items:center}
.certs figure{display:flex;align-items:center;gap:14px;opacity:.82;transition:opacity .3s}
.certs figure:hover{opacity:1}
.certs img{height:58px;width:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.certs figcaption{font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1.2}
.certs figcaption small{display:block;font-weight:400;font-size:11.5px;color:rgba(255,255,255,.55);margin-top:3px}
/* distributor band */
.dist-band{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:30px;color:#fff;
background:radial-gradient(70% 80% at 100% 100%,rgba(255,140,40,.5),transparent 60%),linear-gradient(135deg,#140703,#3A1408 60%,#6A2A0A);border:1px solid rgba(255,255,255,.1)}
.dist-band form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dist-band form input{height:50px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font-size:15px}
.dist-band form input:first-child{grid-column:1/-1}
.dist-band form input::placeholder{color:rgba(255,255,255,.45)}
.dist-band form .btn{grid-column:1/-1;height:50px}
@media (max-width:820px){.dist-band{grid-template-columns:1fr}}
/* who cards: hover pulls focus and colour in */
.who-card.has-v:hover .who-v{filter:blur(4px) grayscale(.2) contrast(1.1) brightness(.9);transform:scale(1.04)}
.who-v{transition:opacity 1.2s var(--ease),filter .8s var(--ease),transform 1.2s var(--ease)}
.who-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;mix-blend-mode:color;background:var(--acc)}
.who-card:hover::after{opacity:.55}
.who-card:hover .who-fx{filter:blur(10px)}
/* about page values */
.values{margin-top:28px;padding:20px 22px;border-radius:18px;background:var(--sur);border:1px solid var(--line)}
.values p{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--mut)}
/* hero headline: brand stays sans, subline serif italic */
.hero-top p{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(17px,1.5vw,21px);color:rgba(255,255,255,.78);letter-spacing:-.01em}
.hch h2{font-family:var(--f-d)}
.hch .eyebrow{color:rgba(255,255,255,.7)}
.pdp-buy h1{font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.025em;font-size:clamp(32px,3.8vw,50px);line-height:1.02}
@media (max-width:760px){
.hero-v,.hero-poster{--hm:2.05;object-position:50% 40%}
.hero-top{padding:0 22px}
.hero-top p{font-size:16px}
.hch{width:auto}
}
@media (max-width:520px){
.pbody .eyebrow{display:none}
.pbody h3{font-size:16px}
.badge{font-size:9px;padding:5px 8px;white-space:nowrap;letter-spacing:.1em}
.price small{display:none}
.pcard .stage-tile{aspect-ratio:4/4.9}
}
/* ================= pass 4: Apple sans only, certs marquee, glass best sellers, portraits ================= */
.serif,.h-l.serif,.h-xl.serif,.h-m.serif{font-family:var(--f-d);font-weight:600;font-style:normal;letter-spacing:-.04em;font-variation-settings:normal}
.h-l .lt{display:block;font-weight:300;letter-spacing:-.03em;color:var(--mut)}
.hero-top p{font-family:var(--f-b);font-style:normal;font-weight:300;font-size:clamp(16px,1.4vw,19px);color:rgba(255,255,255,.72);letter-spacing:-.005em}
.stat-big b,.stat b{font-family:var(--f-d);font-weight:600;letter-spacing:-.05em;font-variation-settings:normal}
.pdp-buy h1{font-family:var(--f-d);font-weight:600;letter-spacing:-.035em}
.values p{letter-spacing:0}
/* certifications: an infinite strip blended into the bottom of the hero */
.certs-marq{position:absolute;left:0;right:0;bottom:0;z-index:3;height:88px;overflow:hidden;pointer-events:none;
-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
background:linear-gradient(180deg,transparent,rgba(0,0,0,.28))}
.certs-track{display:flex;gap:64px;align-items:center;height:100%;width:max-content;padding-left:64px;animation:certs 46s linear infinite;opacity:.78}
.certs-track figure{display:flex;align-items:center;gap:12px;color:#fff;white-space:nowrap}
.certs-track img{height:44px;width:auto;filter:drop-shadow(0 3px 10px rgba(0,0,0,.35))}
.certs-track figcaption{font-size:12.5px;font-weight:600;letter-spacing:.02em;line-height:1.15}
.certs-track figcaption small{display:block;font-weight:400;font-size:11px;color:rgba(255,255,255,.6);margin-top:2px}
.certs-track figure.t{padding-left:6px;border-left:1px solid rgba(255,255,255,.25)}
@keyframes certs{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.certs-track{animation:none}}
.hero-hint{bottom:96px}
.hch{bottom:calc(88px + 4vh)}
/* portraits in the who cards */
.who-img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;object-position:50% 18%;z-index:0;
filter:grayscale(1) contrast(1.08) brightness(.82) blur(3px);opacity:0;transition:opacity 1.1s var(--ease),filter .7s var(--ease),transform 1.1s var(--ease);transform:scale(1)}
.who-card.has-v .who-img{opacity:1}
.who-card.has-v:hover .who-img{filter:grayscale(.15) contrast(1.05) brightness(.95) blur(0);transform:scale(1.05)}
.who-card:hover::after{opacity:.35}
.who-card .who-fade{background:linear-gradient(180deg,rgba(7,8,11,0) 35%,rgba(7,8,11,.9) 100%)}
/* best sellers on a botanical ground with glass cards */
.best{position:relative;overflow:hidden;background:#0C1F14!important}
.best::after{display:none}
.best-bg{position:absolute;inset:-4%;background-size:cover;background-position:center;filter:blur(18px) saturate(1.15) brightness(.7);z-index:0;transform:scale(1.04)}
.best .wrap{position:relative;z-index:1}
.best .sec-head .h-l{color:#fff}
.best .rail{padding-bottom:30px}
.rail-nav.center{justify-content:center;margin-top:6px}
.rail-nav.center button{border-color:rgba(255,255,255,.3);color:#fff}
.pcard.glass{border-radius:28px;padding:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden}
.pcard.glass:hover{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 50px 80px -40px rgba(0,0,0,.7);background:rgba(255,255,255,.18)}
.pcard.glass .stage-tile{border-radius:18px;aspect-ratio:1;box-shadow:none;background:radial-gradient(80% 70% at 50% 40%,#1A1F26,#07090C 75%)}
.pcard.glass .pbody{position:static;padding:16px 6px 4px;background:none;color:#fff;pointer-events:auto;display:grid;grid-template-columns:1fr auto;grid-template-areas:"eb eb" "h3 h3" "pr add";align-items:center;column-gap:12px;row-gap:2px}
.pcard.glass .pbody .eyebrow{grid-area:eb;font-size:10.5px;color:rgba(255,255,255,.62);letter-spacing:.14em}
.pcard.glass .pbody h3{grid-area:h3;font-size:18px;min-height:0;margin:4px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard.glass .prow{display:contents}
.pcard.glass .price{grid-area:pr;font-size:15px;color:rgba(255,255,255,.9);white-space:nowrap}
.pcard.glass .price small{color:rgba(255,255,255,.55)}
.pcard.glass .quick{grid-area:add;height:42px;padding:0 18px;border-radius:14px;background:rgba(80,200,120,.35);border:1px solid rgba(160,255,190,.45);color:#fff;font-size:13.5px;
box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -12px rgba(80,200,120,.7);backdrop-filter:blur(10px);transition:background .3s,transform .3s var(--spring),box-shadow .3s}
.pcard.glass .quick:hover{background:rgba(80,200,120,.55);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 30px -12px rgba(80,200,120,.9)}
.pcard.glass .quick.done{background:#2E9E5B;border-color:#2E9E5B}
.pcard.glass .quick svg{display:none}
.pcard.glass .badge{top:22px;left:22px}
@media (max-width:520px){.pcard.glass .pbody .eyebrow{display:block} .pcard.glass .quick{height:36px;padding:0 12px;font-size:12px}}
.who-card[data-key=children] .who-img{object-position:50% 42%}
/* ================= pass 5: white section two, calmer hero, trust rebuilt, advert, world map, motion ================= */
/* --- hero: cheaper paint, pill sits lower, clear of the headline --- */
.hero,.hero-stage{background:#1C0903}
.hero-wash{--c:255,110,20;--g:#2A0A02;will-change:auto;background:
radial-gradient(34% 30% at 50% 56%,rgba(0,0,0,.5),rgba(0,0,0,.18) 60%,transparent 100%),
radial-gradient(90% 70% at 50% 108%,rgba(var(--c),.95),transparent 72%),
radial-gradient(70% 50% at 50% -10%,rgba(var(--c),.32),transparent 70%),
linear-gradient(180deg,rgba(var(--c),.2) 0%,rgba(var(--c),.55) 60%,rgba(var(--c),.85) 100%),var(--g);
transition:--c .4s}
.hero-spot{--c:255,110,20;position:absolute;left:0;top:0;width:70vmax;height:70vmax;border-radius:50%;z-index:0;pointer-events:none;
background:radial-gradient(closest-side,rgba(var(--c),.34),rgba(var(--c),.12) 40%,transparent 70%);transform:translate3d(50vw,50vh,0) translate(-50%,-50%);will-change:transform}
.hero-v,.hero-poster{filter:none;transform:translate(0,var(--ty,6vh)) scale(calc(var(--hs,1) * var(--hm,1)));will-change:transform;
-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 56%,transparent 82%);mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 56%,transparent 82%)}
.hero-vig{box-shadow:inset 0 0 160px 30px rgba(20,6,0,.3)}
.hero-top{top:calc(var(--top) + 6px)}
.hero-top .h-xl{font-size:clamp(32px,4.4vw,60px)}
.hch{bottom:calc(88px + 2vh)}
.hch h2{font-size:clamp(28px,3.4vw,46px)}
.hch p{font-size:15px}
.bokeh i{background:radial-gradient(circle at 50% 50%,rgba(var(--bk),.55),rgba(var(--bk),.18) 45%,transparent 68%);filter:none!important}
.hero .bokeh i{mix-blend-mode:screen}
@media (max-width:760px){ .hero-v,.hero-poster{transform:translate(0,calc(var(--ty,6vh) - 2vh)) scale(calc(var(--hs,1) * var(--hm,1)))} .hero-top{top:calc(var(--top) + 0px)} }
/* --- small headings: sentence case, a coloured mark, no tracking --- */
.eyebrow{font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mut);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-bone-d);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-bone-d) 22%,transparent);flex:none}
.eyebrow.red{color:var(--brand-r);font-weight:600}
.eyebrow.red::before{background:var(--brand-r);box-shadow:0 0 0 3px rgba(209,50,39,.18)}
.eyebrow.lime{color:#9EE7B8}
.eyebrow.lime::before{background:#9EE7B8;box-shadow:0 0 0 3px rgba(158,231,184,.2)}
.sec-head .eyebrow{margin-bottom:12px}
.hch .eyebrow{color:rgba(255,255,255,.72)}
.hch .eyebrow::before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.pbody .eyebrow,.pcard.glass .pbody .eyebrow{font-size:12px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.62)}
.pbody .eyebrow::before{width:5px;height:5px;box-shadow:none;background:var(--acc)}
.pdp .eyebrow,.page .eyebrow,.co .eyebrow,.shop-head .eyebrow{color:var(--mut)}
.foot h4{letter-spacing:.06em;font-size:12.5px}
/* --- nav: entrance, sliding highlight, hover, cart bump --- */
.nav{animation:navin .9s var(--ease) both;transition:width .5s var(--ease),background .5s var(--ease),top .4s var(--ease),color .4s,border-color .4s,box-shadow .5s}
@keyframes navin{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
.nav-links{position:relative}
.nav-ind{position:absolute;left:0;top:0;height:100%;width:0;border-radius:var(--r-pill);background:rgba(127,127,127,.28);opacity:0;
transition:transform .45s var(--spring),width .45s var(--spring),opacity .3s;pointer-events:none}
.nav-links a{position:relative;z-index:1;transition:opacity .25s,transform .35s var(--spring)}
.nav-links a:hover,.nav-links a.active{background:transparent}
.nav-links a:active{transform:scale(.96)}
.nav .brand svg{transition:transform .7s var(--spring)}
.nav .brand:hover svg{transform:rotate(-12deg) scale(1.08)}
.nav .brand span{position:relative}
.nav .brand span::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:currentColor;opacity:.5;transition:right .4s var(--ease)}
.nav .brand:hover span::after{right:0}
.nav-why{position:relative;overflow:hidden}
.nav-why::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(127,127,127,.16);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-why:hover::before{transform:scaleX(1)}
.nav-why:hover{background:transparent}
.icon-btn{transition:background .25s,transform .35s var(--spring)}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn svg{transition:transform .4s var(--spring)}
.icon-btn:hover svg{transform:scale(1.1)}
#cartBtn.bump{animation:bump .5s var(--spring)}
@keyframes bump{30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.96)}100%{transform:none}}
.nav.on-light .nav-ind{background:rgba(11,12,15,.09)}
.nav.compact{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px -24px rgba(0,0,0,.75)}
/* --- section two: white, red mark, three tinted portrait cards, faces never revealed --- */
section.who-sec[data-mode]{background:#fff;color:#0B0C0F;overflow:hidden;position:relative}
.who-sec .lede{color:rgba(11,12,15,.6)}
.who-sec .who{max-width:1080px;gap:22px}
.who-card{aspect-ratio:4/5;border-radius:30px;border:1px solid rgba(11,12,15,.06);background:var(--tint,#F4EFE8);color:#0B0C0F;padding:0;align-items:flex-end;
box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 50px -34px rgba(0,0,0,.35);transition:transform .6s var(--spring),box-shadow .6s var(--ease),border-color .4s}
.who-card::before{content:"";position:absolute;inset:0;z-index:0;background:
radial-gradient(80% 50% at 50% 0%,rgba(255,255,255,.75),transparent 70%),
linear-gradient(180deg,rgba(255,255,255,.35),transparent 45%,color-mix(in srgb,var(--acc) 14%,transparent))}
.who-card:hover{transform:translateY(-8px);border-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 50px 80px -40px color-mix(in srgb,var(--acc) 55%,rgba(0,0,0,.5))}
.who-card::after{display:none}
.who-fx{display:none}
.who-pic{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;transition:transform 1.2s var(--ease)}
.who-card:hover .who-pic{transform:scale(1.04)}
.who-img{position:absolute;left:-6%;right:-6%;top:-2%;width:112%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:50% 0%;filter:blur(5px) contrast(.98);opacity:0;
mix-blend-mode:normal;transform:none;transition:opacity 1.1s var(--ease)}
.who-card.has-v .who-img{opacity:.92}
.who-card.has-v:hover .who-img{filter:blur(5px) contrast(.98);transform:none}
/* second copy, far softer, masked to the upper part: the blur climbs toward the face, nothing is recognisable */
.who-img.who-soft{filter:blur(30px) contrast(.95);
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 48%,transparent 78%);mask-image:linear-gradient(180deg,#000 0%,#000 48%,transparent 78%)}
.who-card.has-v .who-img.who-soft{opacity:1}
.who-card[data-key=men] .who-img{top:-27%}
.who-card[data-key=women] .who-img{top:-3%}
.who-card[data-key=children] .who-img{top:-23%}
.who-card .who-fade{background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--tint,#F4EFE8) 92%,#fff) 82%)}
.who-label{width:100%;padding:0 26px 28px;text-shadow:none;color:#0B0C0F;transform:translateY(8px);transition:transform .6s var(--spring)}
.who-card:hover .who-label{transform:none}
.who-label b{font-size:clamp(22px,2vw,28px)}
.who-label small{color:rgba(11,12,15,.6);font-size:14px;margin-top:6px}
.who-label em{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-style:normal;font-size:13.5px;font-weight:600;color:#0B0C0F;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--spring)}
.who-label em svg{width:14px;height:14px}
.who-card:hover .who-label em{opacity:1;transform:none}
.who-card .arrow{background:rgba(255,255,255,.7);border-color:rgba(11,12,15,.08);color:#0B0C0F;backdrop-filter:blur(10px)}
.who-card:hover .arrow{background:#0B0C0F;color:#fff}
@media (max-width:820px){ .who-sec .who{max-width:440px} .who-label em{opacity:1;transform:none} }
/* --- featured advert --- */
section.ad-sec[data-mode]{background:#F5F4F1;overflow:hidden}
.ad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.ad-fig{position:relative;aspect-ratio:4/5;border-radius:34px;overflow:hidden;background:#0E0F12;margin:0;transform:rotate(-1.5deg);
box-shadow:0 60px 120px -50px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.05)}
.ad-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.ad-fig.nopic img{display:none}
.ad-fig.nopic{background:radial-gradient(70% 60% at 50% 60%,#F6EFE6,#E9E2D8)}
.ad-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.55));pointer-events:none}
.ad-fig figcaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:14px;color:#fff;font-size:13px}
.ad-fig figcaption span:first-child{font-family:var(--f-d);font-weight:600;font-size:18px;letter-spacing:-.02em}
.ad-fig figcaption span:last-child{color:rgba(255,255,255,.7);text-align:right}
.ad-copy .h-l{margin:14px 0 18px;max-width:14ch}
.ad-copy .acts{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:26px}
.ad-facts{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.ad-facts li{font-size:13px;font-weight:500;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid rgba(11,12,15,.08)}
@media (max-width:860px){ .ad{grid-template-columns:1fr} .ad-fig{max-width:420px;margin-inline:auto;transform:none} .ad-copy{text-align:center} .ad-copy .acts,.ad-facts{justify-content:center} }
/* --- trust: deep green ground, slow light, proof cards --- */
.trust{background:linear-gradient(180deg,#07211A 0%,#0A2E22 55%,#0B3527 100%)!important;color:#F1F7F3;isolation:isolate}
.trust::after{display:none}
.trust-a,.trust-b{position:absolute;border-radius:50%;pointer-events:none;z-index:0;will-change:transform;filter:none}
.trust-a{width:70vw;height:70vw;left:-20vw;top:-30vw;background:radial-gradient(closest-side,rgba(60,180,120,.28),rgba(60,180,120,.08) 50%,transparent 72%);animation:driftA 26s ease-in-out infinite alternate}
.trust-b{width:60vw;height:60vw;right:-22vw;bottom:-28vw;background:radial-gradient(closest-side,rgba(245,166,35,.22),rgba(245,166,35,.06) 50%,transparent 72%);animation:driftB 32s ease-in-out infinite alternate}
@keyframes driftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vw,10vw,0) scale(1.15)}}
@keyframes driftB{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-12vw,-10vw,0) scale(.95)}}
.trust-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.5px);background-size:28px 28px;
-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.trust-grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.trust .lede{color:rgba(241,247,243,.72);margin-top:18px;max-width:52ch}
.trust .h-l{max-width:16ch;margin-top:14px}
.trust .acts{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:26px}
.btn-w{background:#fff;color:#07211A}
.btn-w:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(255,255,255,.4)}
.proof{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.proof-card{padding:24px 22px 20px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden;
box-shadow:0 1px 0 rgba(255,255,255,.12) inset;transition:transform .5s var(--spring),background .4s,border-color .4s}
.proof-card::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 100% 0%,rgba(158,231,184,.16),transparent 70%);opacity:0;transition:opacity .5s}
.proof-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:rgba(158,231,184,.35)}
.proof-card:hover::before{opacity:1}
.proof-card b{display:block;font-family:var(--f-d);font-weight:600;font-size:clamp(36px,4vw,54px);letter-spacing:-.05em;line-height:1;color:#fff}
.proof-card b small{font-size:.55em;color:#9EE7B8;margin-left:2px}
.proof-card>span{display:block;margin-top:8px;font-size:13.5px;color:rgba(241,247,243,.66)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(36px,5vw,64px);padding-top:clamp(28px,4vw,48px);border-top:1px solid rgba(255,255,255,.12)}
.pillar svg{width:24px;height:24px;color:#9EE7B8;margin-bottom:14px}
.pillar h3{color:#fff}
.pillar p{margin-top:8px;font-size:14.5px;line-height:1.55;color:rgba(241,247,243,.66)}
@media (max-width:900px){ .trust-grid2{grid-template-columns:1fr} .pillars{grid-template-columns:1fr;gap:26px} }
/* --- world: dotted map behind the distributor band --- */
.world{background:#050A08!important;color:#fff;overflow:hidden;padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(48px,6vw,90px)}
.world::after{display:none}
.world-map{position:absolute;left:0;right:0;top:12%;height:76%;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:center;
-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 70%,transparent 100%)}
.world-map svg{width:min(100%,1500px);height:auto;max-height:100%;opacity:.95}
.world-map .land{fill:none;stroke:rgba(255,255,255,.24);stroke-width:2.6;stroke-linecap:round}
.world-map .arc{fill:none;stroke:rgba(245,166,35,.42);stroke-width:.7;stroke-dasharray:600;stroke-dashoffset:600;opacity:0}
.world-map.live .arc{animation:arc 2.4s var(--ease) forwards;animation-delay:calc(.35s + var(--i) * .06s)}
@keyframes arc{0%{stroke-dashoffset:600;opacity:0}20%{opacity:.8}100%{stroke-dashoffset:0;opacity:.55}}
.world-map .pin .dot{fill:#F5A623;opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.world-map .pin .halo{fill:none;stroke:#F5A623;stroke-width:1;opacity:0}
.world-map.live .pin .dot{animation:pinin .6s var(--spring) forwards;animation-delay:calc(1.4s + var(--i) * .06s)}
.world-map.live .pin .halo{animation:halo 3.2s ease-out infinite;animation-delay:calc(1.8s + var(--i) * .25s)}
.world-map .pin.home .dot{fill:#fff}
.world-map .pin.home .halo{stroke:#fff}
@keyframes pinin{to{opacity:1;transform:scale(1)}}
@keyframes halo{0%{opacity:.8;transform:scale(.25)}100%{opacity:0;transform:scale(1.4)}}
.world-head{text-align:center;max-width:760px;margin:0 auto clamp(180px,34vh,380px);position:relative}
.world-head::before{content:"";position:absolute;inset:-40px -80px;background:radial-gradient(60% 60% at 50% 50%,rgba(5,10,8,.9),transparent 70%);z-index:-1}
.world-head .h-l{margin:14px 0 18px;max-width:none}
.world-head .lede{color:rgba(255,255,255,.7)}
.world .dist-band{background:rgba(12,18,15,.62);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);
box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 50px 100px -50px rgba(0,0,0,.9);max-width:1040px;margin-inline:auto}
.world .dist-band form input{background:rgba(255,255,255,.07)}
.world .dist-band form input:focus{outline:none;border-color:rgba(245,166,35,.7);background:rgba(255,255,255,.1)}
@media (max-width:760px){ .world-head{margin-bottom:38vh} .world-map svg{opacity:.7} }
/* --- motion: smoother reveals, life around cards --- */
.rv{transform:translateY(26px) scale(.985);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.rv.in{transform:none}
.pcard,.who-card,.step,.proof-card,.pillar{backface-visibility:hidden}
.pcard .stage-tile{transition:box-shadow .6s var(--ease),transform .6s var(--spring)}
.pcard .pill-img{animation:levitate 6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.3s)}
@keyframes levitate{0%,100%{transform:translateZ(10px) translateY(0)}50%{transform:translateZ(10px) translateY(-7px)}}
.rail .pcard:nth-child(2n) .pill-img{--i:1} .rail .pcard:nth-child(3n) .pill-img{--i:2} .rail .pcard:nth-child(4n) .pill-img{--i:3}
.grid .pcard:nth-child(2n) .pill-img{--i:1} .grid .pcard:nth-child(3n) .pill-img{--i:2} .grid .pcard:nth-child(4n) .pill-img{--i:3}
/* a soft light that travels around glass cards on hover */
.pcard.glass{position:relative}
.pcard.glass::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .5s;
background:conic-gradient(from var(--ang,0deg),transparent 0 60%,rgba(255,255,255,.9) 78%,transparent 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
@property --ang{syntax:'';initial-value:0deg;inherits:false}
.pcard.glass:hover::before{opacity:1;animation:ring 2.6s linear infinite}
@keyframes ring{to{--ang:360deg}}
.pcard.glass .stage-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);transform:translateX(-120%);transition:transform 0s;pointer-events:none}
.pcard.glass:hover .stage-tile::after{transform:translateX(120%);transition:transform 1.1s var(--ease)}
.step{transition:transform .5s var(--spring),box-shadow .5s,border-color .4s}
.step:hover{transform:translateY(-4px);box-shadow:0 30px 50px -34px rgba(0,0,0,.35);border-color:transparent}
.gchip{transition:background .3s var(--ease),color .3s,transform .3s var(--spring),box-shadow .3s}
.gchip:hover{background:#fff;box-shadow:0 8px 20px -12px rgba(0,0,0,.35);transform:translateY(-1px)}
.btn{transition:transform .35s var(--spring),background .3s,box-shadow .4s,color .3s}
.nav.on-light .nav-why::before{background:rgba(11,12,15,.08)}
@media (prefers-reduced-motion:reduce){ .pcard .pill-img,.trust-a,.trust-b,.world-map .arc,.world-map .pin .halo,.nav{animation:none!important} .hero-spot{display:none} }
.dist-band form input{min-width:0;width:100%}
@media (max-width:560px){ .dist-band form{grid-template-columns:1fr} .world-map svg{width:240%;max-width:none;height:auto;max-height:none;flex:none} .world-map .land{stroke-width:3.4;stroke:rgba(255,255,255,.3)} .world-head{margin-bottom:44vh} .world-map{top:22%;height:56%} }
/* ================= pass 6: no eyebrows, gradient heading, gradient-blur portraits, rotating advert, bento finder ================= */
.eyebrow{display:none!important}
.sec-head .lede{margin-top:0}
/* section two heading: big, colour drifts through the hero palette */
.h-xl.help{font-size:clamp(38px,6.2vw,92px);letter-spacing:-.045em;line-height:.96}
.h-xl.help span{background:linear-gradient(90deg,#E8571C,#F5A623,#3F8CFF,#A9C4FF,#F5A623,#E8571C);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:helpc 14s linear infinite}
@keyframes helpc{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.h-xl.help span{animation:none}}
/* portraits: four stacked copies, each softer and masked higher, so the blur climbs smoothly from the shoulders to the face */
.who-pic{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;animation:whofloat 8s ease-in-out infinite;transition:transform 1.2s var(--ease)}
.who-card[data-key=women] .who-pic{animation-delay:-2.7s}
.who-card[data-key=children] .who-pic{animation-delay:-5.3s}
@keyframes whofloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.015)}}
.who-card:hover .who-pic{animation-play-state:paused}
.who-img,.who-img.l0,.who-img.l1,.who-img.l2,.who-img.l3{position:absolute;inset:0;top:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;mix-blend-mode:normal;opacity:0;transform:none;transition:opacity 1.1s var(--ease);mask-image:none;-webkit-mask-image:none}
.who-card[data-key=men] .who-img,.who-card[data-key=women] .who-img,.who-card[data-key=children] .who-img{top:0;bottom:0}
.who-img.l0{filter:blur(2px)}
.who-img.l1{filter:blur(8px);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 78%);mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 78%)}
.who-img.l2{filter:blur(18px);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 60%);mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 60%)}
.who-img.l3{filter:blur(34px);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 22%,transparent 46%);mask-image:linear-gradient(180deg,#000 0%,#000 22%,transparent 46%)}
.who-card.has-v .who-img{opacity:.92}
.who-card.has-v:hover .who-img,.who-card.has-v:hover .who-img.l0{transform:none}
.who-card.has-v:hover .who-img.l0{filter:blur(2px)}
/* a slow band of light crossing each card */
.who-shine{position:absolute;inset:-40%;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);animation:whoshine 9s ease-in-out infinite;mix-blend-mode:soft-light}
.who-card[data-key=women] .who-shine{animation-delay:-3s}
.who-card[data-key=children] .who-shine{animation-delay:-6s}
@keyframes whoshine{0%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}
.who-card::before{animation:whotint 12s ease-in-out infinite alternate}
@keyframes whotint{from{opacity:.8}to{opacity:1}}
.who-card .who-fade{z-index:1;background:linear-gradient(180deg,transparent 46%,color-mix(in srgb,var(--tint,#F4EFE8) 94%,#fff) 80%)}
@media (prefers-reduced-motion:reduce){.who-pic,.who-shine,.who-card::before{animation:none}}
/* rotating advert */
.ad{position:relative;display:block;min-height:min(78vh,720px)}
.ad-slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;opacity:0;pointer-events:none;transition:opacity 1.1s var(--ease)}
.ad-slide.on{opacity:1;pointer-events:auto;position:relative}
.ad-slide .ad-fig{transform:rotate(-1.5deg) translateY(12px);opacity:.001;transition:transform 1.4s var(--ease),opacity 1s var(--ease)}
.ad-slide.on .ad-fig{transform:rotate(-1.5deg) translateY(0);opacity:1}
.ad-slide .ad-fig img{transform:translate3d(0,var(--py,0),0) scale(1.12);transition:none}
.ad-slide.on .ad-fig img{animation:kb 10s linear infinite}
@keyframes kb{from{transform:translate3d(0,var(--py,0),0) scale(1.12)}to{transform:translate3d(0,var(--py,0),0) scale(1.2)}}
.ad-slide .ad-copy>*{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.ad-slide.on .ad-copy>*{opacity:1;transform:none}
.ad-slide.on .ad-copy>*:nth-child(2){transition-delay:.1s}.ad-slide.on .ad-copy>*:nth-child(3){transition-delay:.2s}.ad-slide.on .ad-copy>*:nth-child(4){transition-delay:.3s}
.ad-copy .h-l{margin:0 0 18px;max-width:14ch}
.ad-dots{position:absolute;left:0;bottom:-34px;display:flex;gap:8px;z-index:2}
.ad-dots button{width:34px;height:14px;display:grid;align-items:center}
.ad-dots button i{display:block;height:3px;border-radius:2px;background:rgba(11,12,15,.18);overflow:hidden;position:relative}
.ad-dots button i::after{content:"";position:absolute;inset:0;background:#0B0C0F;transform:scaleX(0);transform-origin:left}
.ad-dots button.on i::after{animation:dotfill 10s linear forwards}
@keyframes dotfill{to{transform:scaleX(1)}}
.ad:hover .ad-dots button.on i::after{animation-play-state:paused}
@media (max-width:860px){ .ad{min-height:0} .ad-slide{grid-template-columns:1fr;position:absolute} .ad-slide.on{position:relative} .ad-dots{position:static;justify-content:center;margin-top:22px} }
/* bento finder */
.finder .sec-head{align-items:end}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);gap:14px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:220px;padding:22px;border-radius:26px;overflow:hidden;color:#0B0C0F;
background:#FBF9F5;border:1px solid rgba(11,12,15,.06);box-shadow:0 1px 0 #fff inset,0 20px 40px -32px rgba(0,0,0,.25);isolation:isolate;
transition:transform .6s var(--spring),box-shadow .6s var(--ease),border-color .4s}
.tile.big{grid-column:span 2;grid-row:span 2;min-height:460px}
.tile:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 1px 0 #fff inset,0 40px 70px -40px rgba(0,0,0,.35)}
.tile-art{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.tile-art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.02);transition:transform 1.2s var(--ease)}
.tile:hover .tile-art img{transform:scale(1.07)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(251,249,245,.92) 78%)}
.tile-txt{position:relative;z-index:2}
.tile-txt b{display:block;font-family:var(--f-d);font-weight:600;font-size:20px;letter-spacing:-.025em;line-height:1.1}
.tile.big .tile-txt b{font-size:clamp(26px,2.4vw,34px)}
.tile-txt small{display:block;margin-top:6px;font-size:13.5px;color:rgba(11,12,15,.6);max-width:26ch}
.tile .arrow{position:absolute;top:16px;right:16px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.75);border:1px solid rgba(11,12,15,.08);display:grid;place-items:center;
backdrop-filter:blur(8px);transition:background .3s,color .3s,transform .45s var(--spring)}
.tile .arrow svg{width:15px;height:15px}
.tile:hover .arrow{background:#0B0C0F;color:#fff;transform:rotate(-45deg)}
@media (max-width:1000px){ .bento{grid-template-columns:repeat(3,1fr)} .tile.big{grid-column:span 3;grid-row:span 1;min-height:300px} }
@media (max-width:600px){ .bento{grid-template-columns:1fr 1fr;gap:10px} .tile{min-height:170px;padding:16px} .tile-txt b{font-size:17px} .tile-txt small{display:none} .tile.big{grid-column:span 2;min-height:240px} }
/* trust + world without the small labels */
.trust .h-l{margin-top:0}
.world-head .h-l{margin-top:0}
/* finder art: contained, feathered into the tile so every render sits on the same ivory */
.tile{background:linear-gradient(180deg,#FBF4EA,#F6ECDF)}
.tile-art{inset:4% 4% 36% 4%}
.tile-art img{object-fit:contain;object-position:50% 50%;-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000 50%,transparent 92%);mask-image:radial-gradient(60% 60% at 50% 50%,#000 50%,transparent 92%)}
.tile.big .tile-art{inset:4% 6% 24% 6%}
.tile::after{background:linear-gradient(180deg,transparent 55%,rgba(246,236,223,.85) 78%)}
.tile-txt small{max-width:22ch}
@media (max-width:600px){ .tile-art{inset:4% 4% 40% 4%} }
.tile{background:#F8EFE4}
.tile-art img{mix-blend-mode:darken;-webkit-mask-image:radial-gradient(55% 55% at 50% 50%,#000 42%,transparent 80%);mask-image:radial-gradient(55% 55% at 50% 50%,#000 42%,transparent 80%)}
.tile::after{background:linear-gradient(180deg,transparent 55%,rgba(248,239,228,.9) 78%)}
.tile-art img{-webkit-mask-image:none;mask-image:none;mix-blend-mode:normal}
.tile-art{-webkit-mask-image:radial-gradient(55% 55% at 50% 50%,#000 40%,transparent 78%);mask-image:radial-gradient(55% 55% at 50% 50%,#000 40%,transparent 78%)}
.tile-art,.tile-art img{-webkit-mask-image:none;mask-image:none}
.tile{background:#F8EFE4}
.who-card[data-key=children] .who-img.l2{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 78%);mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 78%)}
.who-card[data-key=children] .who-img.l3{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 36%,transparent 62%);mask-image:linear-gradient(180deg,#000 0%,#000 36%,transparent 62%)}
@media (max-width:860px){ .ad-copy .h-l{margin-inline:auto} .who-sec.sec{padding-top:clamp(90px,14vw,140px)} }
/* ================= pass 7: rich green secondary, hero copy left with word stagger, richer glass cards, trust bento ================= */
:root{--g:#146B43;--g2:#1E8A57;--g3:#9EE7B8;--g-ink:#08301E}
::selection{background:var(--g3);color:#08301E}
:focus-visible{outline-color:var(--g2)}
.btn-a{background:var(--g);color:#fff}
.btn-a:hover{background:var(--g2);box-shadow:0 14px 34px -10px rgba(20,107,67,.6)}
.cart-n{background:var(--g2);color:#fff}
.announce b{color:var(--g3)}
.ship-bar i{background:var(--g2)}
.step .n,.h-l .lt{color:var(--g)}
.tick{color:var(--g2)}
.chip.on,.filters .chip.on{background:var(--g);color:#fff;border-color:var(--g)}
.rail-nav.center button:hover{background:var(--g);border-color:var(--g)}
.tile:hover .arrow,.who-card:hover .arrow{background:var(--g);color:#fff}
.who-card:hover{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 50px 80px -40px rgba(20,107,67,.45)}
.h-xl.help span{background:linear-gradient(90deg,#08301E,#146B43,#2FA86E,#146B43,#08301E);background-size:300% 100%}
.who-label em{color:var(--g)}
.world.sec{background:linear-gradient(180deg,#06231A,#041A13)!important}
.world .dist-band{background:rgba(8,40,28,.6);border-color:rgba(158,231,184,.18)}
.world-map .arc{stroke:rgba(158,231,184,.5)}
.world-map .pin .dot{fill:#9EE7B8}
.world-map .pin .halo{stroke:#9EE7B8}
.ad-dots button i::after{background:var(--g)}
.foot a:hover{color:var(--g3)}
/* hero copy: left column on desktop, word-by-word rise */
.hch{left:6vw;bottom:auto;top:50%;transform:translate(0,calc(-50% + var(--vy,0px)));width:min(460px,36vw);text-align:left;will-change:opacity,transform}
.hch .acts{justify-content:flex-start}
.hch small{display:block;font-size:14px;color:rgba(255,255,255,.7);margin-bottom:14px;font-weight:500}
.hch h2{font-size:clamp(34px,4.4vw,64px);margin-bottom:12px}
.hch h2 .w,.hero-top .h-xl .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(6px);transition:opacity .7s var(--ease),transform .9s var(--spring),filter .7s var(--ease);transition-delay:calc(var(--i,0) * .09s)}
.hch.show h2 .w,.hero-top .h-xl .w.in{opacity:1;transform:none;filter:none}
.hch p{max-width:36ch}
.hero-top .h-xl .w{transition-delay:calc(.25s + var(--i,0) * .12s)}
@media (max-width:860px){ .hch{left:50%;top:auto;bottom:calc(88px + 2vh);transform:translate(-50%,var(--vy,0px));width:88vw;text-align:center} .hch .acts{justify-content:center} .hch p{margin-inline:auto} }
.hero-v,.hero-poster{transform:translate(var(--tx,0),var(--ty,6vh)) scale(calc(var(--hs,1) * var(--hm,1)))}
@media (max-width:760px){ .hero-v,.hero-poster{transform:translate(0,calc(var(--ty,6vh) - 2vh)) scale(calc(var(--hs,1) * var(--hm,1)))} }
/* badges: sentence case, glass, an icon */
.badge,.pcard .badge,.pcard.glass .badge{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;padding:7px 12px 7px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;
background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.badge svg{width:14px;height:14px}
.badge.warn{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.32)}
.badge.warn svg{color:#FFD08A}
/* glass cards: more to read */
.pcard.glass{padding:12px 12px 16px}
.pcard.glass .pbody{grid-template-areas:"eb eb" "h3 h3" "cp cp" "mt mt" "gl gl" "pr add";padding:14px 8px 2px;row-gap:0}
.pcard.glass .pbody h3{font-size:19px;margin:0 0 6px;white-space:normal}
.pc-copy{grid-area:cp;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.72);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px}
.pc-meta{grid-area:mt;list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:10px}
.pc-meta li+li::before{content:"·";margin:0 8px;color:rgba(255,255,255,.35)}
.pc-glance{grid-area:gl;list-style:none;display:grid;gap:5px;margin-bottom:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.pc-glance li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;color:rgba(255,255,255,.86)}
.pc-glance li svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--g3)}
.pcard.glass .price{font-size:16px}
.pcard.glass .quick{background:var(--g);border-color:rgba(255,255,255,.18);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 12px 26px -12px rgba(20,107,67,.9)}
.pcard.glass .quick:hover{background:var(--g2)}
.rail .pcard.glass{width:min(300px,78vw)}
/* trust bento */
.trust.sec{background:#F5F4F1!important;color:#0B0C0F;isolation:auto}
.trust-a,.trust-b,.trust-grid{display:none}
.trust-bento{grid-auto-rows:minmax(210px,auto)}
.tile.tall{grid-row:span 2;min-height:460px}
.tile.wide{grid-column:span 2;min-height:220px}
.tile.photo{background:#0E1A14;color:#fff;border:0}
.tile.photo .tile-art{inset:0}
.tile.photo .tile-art img{object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.tile.photo:hover .tile-art img{transform:scale(1.1)}
.tile.photo::after{background:linear-gradient(180deg,rgba(6,20,14,0) 40%,rgba(6,20,14,.85) 82%)}
.tile.photo .tile-txt small{color:rgba(255,255,255,.72)}
.tile.photo .arrow{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22);color:#fff}
.tile.green{background:linear-gradient(160deg,#0E5A36,#08301E);color:#fff;border:0;justify-content:center;padding:26px}
.tile.green::after{background:radial-gradient(70% 50% at 100% 0%,rgba(158,231,184,.25),transparent 70%)}
.proofs{position:relative;z-index:2;display:grid;gap:18px}
.proofs>div{display:grid;gap:2px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.proofs>div:last-child{border:0;padding-bottom:0}
.proofs b{font-family:var(--f-d);font-weight:600;font-size:clamp(34px,3.4vw,46px);letter-spacing:-.04em;line-height:1}
.proofs span{font-size:13.5px;color:rgba(255,255,255,.7)}
@media (max-width:1000px){ .tile.tall{grid-row:span 1;grid-column:span 3;min-height:0} .proofs{grid-template-columns:repeat(4,1fr)} .proofs>div{border:0;padding:0} .tile.wide{grid-column:span 3} }
@media (max-width:600px){ .tile.tall,.tile.wide{grid-column:span 2} .proofs{grid-template-columns:1fr 1fr;gap:14px} .tile.photo{min-height:240px} }
/* section two polish */
.who-sec .lede{max-width:52ch}
.who-card{border-radius:32px}
.who-card .arrow{width:42px;height:42px}
.order-bento{grid-template-columns:repeat(3,1fr)}
.order-bento .tile{min-height:250px}
.order-bento .tile.green .tile-txt b{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.03em}
.order-bento .tile.green .tile-txt small{color:rgba(255,255,255,.72);max-width:28ch}
.tile.green .arrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#fff}
.tile.green:hover .arrow{background:#fff;color:var(--g)}
@media (max-width:860px){ .order-bento{grid-template-columns:1fr} .order-bento .tile{min-height:200px} }
.h-xl.help span{-webkit-background-clip:text;background-clip:text;color:transparent}
.proofs span{font-size:inherit;color:inherit}
.proofs>div>span{font-size:13.5px;color:rgba(255,255,255,.7)}
.proofs b span{font:inherit}
.pcard.glass .quick{white-space:nowrap;padding:0 14px}
/* ================= pass 8: final polish, performance, production ================= */
/* certification strip: logos only, two identical halves so -50% loops without a seam */
.certs-track{gap:0;padding:0;opacity:.85;animation-duration:32s;animation-timing-function:linear}
.certs-track .half{display:flex;align-items:center;gap:clamp(48px,7vw,110px);padding-right:clamp(48px,7vw,110px);flex:none}
.certs-track img{height:54px;width:auto;filter:drop-shadow(0 3px 10px rgba(0,0,0,.35));opacity:.9;transition:opacity .3s}
.certs-marq{pointer-events:auto}
.certs-track img:hover{opacity:1}
@media (max-width:760px){ .certs-track img{height:40px} .certs-track .half{gap:36px;padding-right:36px} }
/* buttons: a slow moving gradient and a glow */
.btn-a,.pcard.glass .quick,.dist-band .btn-a{background:linear-gradient(115deg,#0F5A37 0%,#1E8A57 40%,#2FA86E 50%,#1E8A57 60%,#0F5A37 100%);background-size:220% 100%;background-position:100% 0;color:#fff;border:0;
box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 12px 30px -12px rgba(30,138,87,.75);animation:sheen 6s ease-in-out infinite;transition:transform .35s var(--spring),box-shadow .4s}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0% 0}}
.btn-a:hover,.pcard.glass .quick:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 0 0 4px rgba(30,138,87,.16),0 22px 40px -14px rgba(30,138,87,.9)}
.btn-p{position:relative;overflow:hidden}
.btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform 0s}
.btn-p:hover::after{transform:translateX(120%);transition:transform .9s var(--ease)}
.btn-w:hover{box-shadow:0 0 0 4px rgba(255,255,255,.18),0 18px 36px -14px rgba(255,255,255,.5)}
.btn-g:hover{box-shadow:0 0 0 4px rgba(127,127,127,.12)}
.btn:active{transform:scale(.97)!important}
/* cards: 3D tilt that follows the pointer, a light that follows it, and a resting float on the art */
.tile,.pcard.glass,.who-card{transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tile:hover,.pcard.glass:hover,.who-card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
.tile{transition:transform .5s var(--ease),box-shadow .6s var(--ease),border-color .4s}
.pcard.glass{transition:transform .5s var(--ease),box-shadow .6s var(--ease),background .4s}
.tile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .5s;
background:radial-gradient(240px 240px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 70%);mix-blend-mode:soft-light}
.tile:hover::before{opacity:1}
.tile.photo::before,.tile.green::before{background:radial-gradient(260px 260px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 70%);mix-blend-mode:normal}
.tile-art img{animation:tilefloat 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.7s)}
.bento .tile:nth-child(2n) .tile-art img{--i:1} .bento .tile:nth-child(3n) .tile-art img{--i:2} .bento .tile:nth-child(4n) .tile-art img{--i:3}
@keyframes tilefloat{0%,100%{transform:translateY(0) rotate(0deg) scale(1.02)}50%{transform:translateY(-8px) rotate(-1.5deg) scale(1.04)}}
.tile:hover .tile-art img{animation-play-state:paused;transform:translateY(-6px) scale(1.08)}
.tile.photo .tile-art img{animation:none}
.tile .arrow{transition:background .3s,color .3s,transform .5s var(--spring),box-shadow .4s}
.tile:hover .arrow{box-shadow:0 8px 20px -8px rgba(20,107,67,.8)}
.pcard.glass .stage-tile{transition:box-shadow .6s var(--ease)}
.pcard.glass:hover .stage-tile{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 30px 50px -30px rgba(0,0,0,.7)}
.who-card .who-label b{transition:letter-spacing .5s var(--ease)}
.who-card:hover .who-label b{letter-spacing:-.02em}
.proofs>div{transition:transform .5s var(--spring)}
.tile.green:hover .proofs>div{transform:translateX(4px)}
.tile.green:hover .proofs>div:nth-child(2){transition-delay:.04s}.tile.green:hover .proofs>div:nth-child(3){transition-delay:.08s}.tile.green:hover .proofs>div:nth-child(4){transition-delay:.12s}
/* performance: skip layout and paint for sections far off screen; lighter blurs; no cursor spot on touch */
.sec:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 900px}
.foot{content-visibility:auto;contain-intrinsic-size:auto 480px}
.nav{backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.pcard.glass{backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.pcard.glass .quick,.badge,.tile .arrow,.who-card .arrow{backdrop-filter:none;-webkit-backdrop-filter:none}
.best-bg{filter:blur(14px) saturate(1.15) brightness(.7)}
.who-img.l3{filter:blur(28px) contrast(.95)}
.hero-v,.hero-poster{contain:strict}
@media (hover:none){ .hero-spot{display:none} .tile,.pcard.glass,.who-card{transform:none} .tile:hover,.pcard.glass:hover,.who-card:hover{transform:translateY(-4px)} }
@media (prefers-reduced-motion:reduce){ .btn-a,.pcard.glass .quick,.tile-art img,.who-pic,.who-shine{animation:none!important} }
/* mobile finish */
@media (max-width:600px){
.sec{padding-block:clamp(56px,12vw,90px)}
.h-l{font-size:clamp(30px,8.4vw,40px)}
.h-xl.help{font-size:clamp(34px,10vw,44px)}
.bento{gap:10px}
.tile{padding:14px;border-radius:20px;min-height:160px}
.tile.big{min-height:240px}
.tile .arrow{width:32px;height:32px;top:12px;right:12px}
.rail .pcard.glass{width:min(280px,82vw)}
.ad-fig{border-radius:24px}
.who-card{border-radius:24px}
.world .dist-band{padding:22px;border-radius:22px}
.certs-marq{height:72px}
.hch{bottom:calc(72px + 2vh)}
.hch h2{font-size:clamp(28px,8vw,36px)}
.hch .acts .btn-s{height:38px;padding:0 14px;font-size:13px}
}
.pdp-stage .form-tag{font-size:13px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.7);font-weight:500}
.foot h4{text-transform:none;letter-spacing:0;font-size:14px;color:rgba(255,255,255,.7)}
.hero-hint{text-transform:none;letter-spacing:.08em;font-size:12px}
.pc-meta li+li::before{content:none}
.pc-meta li:not(:last-child)::after{content:"·";margin:0 8px;color:rgba(255,255,255,.35)}
/* ================= pass 9: mobile hero — kill the letterbox seam ================= */
/* The hero render is 16:9. On a portrait phone object-fit:contain letterboxed it inside a
full-height box, so the bottom edge of the picture met the wash on a hard horizontal
line and everything below read as dead space — the "cropped" look.
On a phone the element is now sized to the film's own aspect ratio, which makes the
frame edges predictable, and the bottom of the frame is faded out with a mask so the
lit floor dissolves into the wash instead of stopping on a line. */
.hero-floor{position:absolute;left:0;right:0;bottom:0;height:56%;z-index:2;pointer-events:none;display:none;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.10) 20%,rgba(0,0,0,.26) 40%,rgba(0,0,0,.46) 62%,rgba(0,0,0,.60) 84%,rgba(0,0,0,.66) 100%)}
@media (max-width:860px){
.hero-floor{display:block}
.hero-v,.hero-poster{height:auto;aspect-ratio:1152/648;top:50%;bottom:auto;object-fit:fill;
transform:translate(0,calc(-50% + var(--ty,6vh) - 7vh)) scale(calc(var(--hs,1) * var(--hm,1)));
-webkit-mask-image:linear-gradient(180deg,#000 0 74%,transparent 96%);
mask-image:linear-gradient(180deg,#000 0 74%,transparent 96%)}
}
@media (max-width:760px){
.hero-v,.hero-poster{--hm:2.28}
.hero{height:280vh}
.hch{bottom:calc(88px + 1vh)}
}
/* ================= pass 10: hero depth. rays, grain, a lit ring under the product, fact chips, green Camzid chapter ================= */
/* slow light rays behind the product: a repeating conic gradient that only rotates (composited), screen-blended and masked to the centre */
.hero-rays{position:absolute;left:50%;top:58%;width:160vmax;height:160vmax;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.55;
transform:translate(calc(-50% + var(--tx,0)),-50%);
-webkit-mask-image:radial-gradient(closest-side,#000 0,rgba(0,0,0,.5) 30%,transparent 62%);mask-image:radial-gradient(closest-side,#000 0,rgba(0,0,0,.5) 30%,transparent 62%)}
.hero-rays::before{content:"";position:absolute;inset:0;border-radius:50%;
background:repeating-conic-gradient(from 0deg,transparent 0deg 9deg,rgba(var(--c,255,110,20),.10) 11deg,rgba(255,255,255,.07) 12.5deg,transparent 14deg 22deg);
animation:rays 90s linear infinite;will-change:transform}
.hero-rays::after{content:"";position:absolute;inset:0;border-radius:50%;
background:repeating-conic-gradient(from 180deg,transparent 0deg 15deg,rgba(255,255,255,.05) 17deg,transparent 19deg 31deg);
animation:rays 140s linear infinite reverse;will-change:transform}
@keyframes rays{to{transform:rotate(360deg)}}
/* lit ground under the product, in the phase colour, breathing */
.hero-ring{position:absolute;left:50%;top:70%;width:min(60vw,760px);height:22vh;z-index:1;pointer-events:none;mix-blend-mode:screen;
transform:translate(calc(-50% + var(--tx,0)),calc(-50% + var(--ty,6vh)));
background:radial-gradient(50% 50% at 50% 50%,rgba(var(--c,255,110,20),.55),rgba(var(--c,255,110,20),.18) 45%,transparent 70%);
animation:ring 5.5s ease-in-out infinite}
.hero-ring::after{content:"";position:absolute;left:50%;top:50%;width:44%;height:22%;transform:translate(-50%,-50%);border-radius:50%;
border:1px solid rgba(var(--b,255,255,255),.28);box-shadow:0 0 30px rgba(var(--c,255,110,20),.5),inset 0 0 24px rgba(var(--c,255,110,20),.35);
animation:ringline 5.5s ease-in-out infinite}
@keyframes ring{0%,100%{opacity:.75;transform:translate(calc(-50% + var(--tx,0)),calc(-50% + var(--ty,6vh))) scale(1)}50%{opacity:1;transform:translate(calc(-50% + var(--tx,0)),calc(-50% + var(--ty,6vh))) scale(1.08)}}
@keyframes ringline{0%,100%{opacity:.45}50%{opacity:.85}}
/* film grain, one static tile: takes the digital flatness off the wash */
.hero-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' 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");background-size:200px 200px}
/* chapter copy: bigger, numbered, with three fact chips that rise in after the headline */
.hch{width:min(520px,38vw)}
.hch .num{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-bottom:22px;font-variant-numeric:tabular-nums}
.hch .num b{color:#fff;font-weight:600}
.hch .num i{display:block;width:34px;height:1px;background:rgba(255,255,255,.35)}
.hch small{font-size:14.5px}
.hch h2{font-size:clamp(40px,5.2vw,78px);line-height:.98;letter-spacing:-.035em;margin-bottom:16px}
.hch p{font-size:17px;color:rgba(255,255,255,.78);max-width:34ch}
.hch .facts{list-style:none;padding:0;margin:20px 0 26px;display:flex;flex-wrap:wrap;gap:8px}
.hch .facts li{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:#fff;padding:7px 12px 7px 9px;border-radius:999px;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--spring);transition-delay:calc(.45s + var(--j,0) * .09s)}
.hch .facts li svg{width:13px;height:13px;color:var(--g3)}
.hch.show .facts li{opacity:1;transform:none}
.hch .acts{gap:10px}
/* Camzid chapter: white tablet on deep brand green */
.hch[data-k="camzid-tablets"] .facts li svg{color:#BFF5D6}
@media (max-width:860px){
.hero-rays{display:none}
.hero-ring{top:auto;bottom:34%;width:80vw;height:14vh;transform:translate(-50%,0);animation:none;opacity:.8}
.hero-ring::after{display:none}
.hch{width:88vw}
.hch .num{justify-content:center;margin-bottom:10px}
.hch h2{font-size:clamp(34px,10vw,46px);margin-bottom:10px}
.hch p{font-size:15px;margin-inline:auto}
.hch .facts{justify-content:center;margin:12px 0 16px}
.hch .facts li{font-size:12px;padding:6px 10px 6px 8px}
}
@media (prefers-reduced-motion:reduce){.hero-rays::before,.hero-rays::after,.hero-ring,.hero-ring::after{animation:none}}
.hero-rays{opacity:.36}
/* on the green chapter the green button vanishes, so it goes white */
.hch[data-k="camzid-tablets"] .btn-a{background:#fff;color:var(--g-ink);animation:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hch[data-k="camzid-tablets"] .btn-a:hover{background:#EAFBF1;box-shadow:0 14px 36px rgba(0,0,0,.3)}
/* ================= pass 10b: world map as a real block — cropped to the trading hemisphere, shipments travel the arcs, legend by region ================= */
.world-head{margin-bottom:clamp(28px,4vw,48px)}
.world-head::before{display:none}
.world-stage{position:relative;margin:0 auto clamp(36px,5vw,64px);max-width:1180px}
.world-map{position:relative;inset:auto;top:auto;height:auto;display:block;pointer-events:auto;
-webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,#000 55%,transparent 100%)}
.world-map svg{width:100%;height:auto;max-height:none;opacity:1;display:block;overflow:visible}
.world-map .land{stroke:rgba(158,231,184,.30);stroke-width:2.2}
.world-map .arc{stroke:rgba(158,231,184,.42);stroke-width:.55}
.world-map .ship{fill:#fff;opacity:0;filter:drop-shadow(0 0 3px #9EE7B8) drop-shadow(0 0 6px rgba(158,231,184,.8))}
.world-map.live .ship{animation:shipin .4s linear forwards;animation-delay:calc(1.6s + var(--i) * .35s)}
@keyframes shipin{to{opacity:1}}
.world-map .pin .dot{fill:#BFF5D6}
.world-map .pin .halo{stroke:#9EE7B8;stroke-width:.8}
.world-map .pin .halo.h2{animation-delay:calc(3.4s + var(--i) * .25s)!important}
.world-map .pin.home .dot{fill:#fff;filter:drop-shadow(0 0 6px #fff)}
.world-map .home-tag text{fill:#fff;font-size:8.5px;font-weight:600;letter-spacing:.02em;text-anchor:middle;font-family:var(--f-b)}
.world-map .pin:hover .dot{fill:#fff}
.world-legend{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(18px,3vw,34px)}
.world-legend .reg{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .8s var(--spring);transition-delay:calc(1.2s + var(--k) * .12s);
padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(158,231,184,.14)}
.world-legend.live .reg{opacity:1;transform:none}
.world-legend .reg b{display:block;font-size:12.5px;font-weight:600;color:#BFF5D6;margin-bottom:8px;letter-spacing:.01em}
.world-legend .reg span{display:flex;flex-wrap:wrap;gap:5px}
.world-legend .reg i{font-style:normal;font-size:12px;color:rgba(255,255,255,.72);padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06)}
.world .dist-band{max-width:1180px}
@media (max-width:1000px){ .world-legend{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .world-head{margin-bottom:24px} .world-map svg{width:100%;opacity:1} .world-map .land{stroke-width:2.6} .world-legend{grid-template-columns:1fr 1fr;gap:10px} .world-legend .reg{padding:12px 14px} }
@media (max-width:560px){ .world-map{top:auto;height:auto} .world-map svg{width:100%;max-width:none} .world-head{margin-bottom:20px} .world-legend{grid-template-columns:1fr 1fr} }
.world-map svg{height:min(58vh,560px);width:100%}
.world-map .home-tag text{font-size:5.6px}
.world-map .land{stroke:rgba(158,231,184,.36)}
@media (max-width:760px){ .world-map svg{height:auto} }
@media (max-width:760px){
.world-stage{overflow:hidden}
.world-map{width:150%;margin-left:-25%}
.world-map .home-tag text{font-size:7px}
.world-legend{grid-template-columns:1fr;gap:8px}
.world-legend .reg{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px}
.world-legend .reg b{flex:none;width:86px;margin:4px 0 0;font-size:11.5px;line-height:1.2}
.world-legend .reg i{font-size:11.5px;padding:3px 7px}
}
/* the closed cart drawer sits 102% off-screen but its shadow leaked back as a grey smear down the right edge of every light section */
.drawer{box-shadow:none;visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
.drawer.open{visibility:visible;box-shadow:-30px 0 80px rgba(0,0,0,.5);transition:transform .5s var(--ease),visibility 0s}
/* section two: cards fill the same width as every other section */
.who-sec .who{max-width:none;gap:24px}
.who-sec .lede{max-width:60ch}
/* tighter rhythm between sections */
.sec{padding-block:clamp(64px,8vw,116px)}
/* ================= pass 11: hero copy quieter, no chips, no counter; pill clear of the text; certs strip lifted; rays softer ================= */
.hch .num,.hch .facts{display:none}
.hch .spec{display:flex;flex-wrap:wrap;gap:0 14px;margin:14px 0 24px;font-size:13.5px;color:rgba(255,255,255,.62);max-width:none}
.hch .spec span{display:inline-flex;align-items:center;opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(.4s + var(--j,0) * .08s)}
.hch .spec span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4);margin-right:14px}
.hch.show .spec span{opacity:1;transform:none}
.hero-rays{opacity:.25}
/* the product moves further right of the copy column on wide screens and is a touch smaller, so Tribofer and Camzid never sit under the pill */
.hch{width:min(480px,34vw)}
.hero-hint{bottom:118px}
/* certification strip: lifted off the bottom edge with breathing room */
.certs-marq{bottom:0;height:112px;padding-bottom:22px;box-sizing:border-box;background:linear-gradient(180deg,transparent,rgba(0,0,0,.32))}
.certs-track{height:calc(100% - 22px)}
.hch{bottom:calc(112px + 2vh)}
@media (max-width:860px){ .hch{bottom:calc(112px + 1vh)} .hch .spec{justify-content:center;font-size:12.5px;gap:0 10px;margin:8px 0 16px} .hch .spec span+span::before{margin-right:10px} }
@media (max-width:760px){ .certs-marq{height:92px;padding-bottom:18px} .certs-track{height:calc(100% - 18px)} .hero-ring{bottom:36%} }
/* ================= pass 11b: advert cards — editorial stills, straight, caption as a masthead at the top ================= */
.ad-fig,.ad-slide .ad-fig,.ad-slide.on .ad-fig{transform:none;border-radius:30px;box-shadow:0 30px 80px -30px rgba(11,12,15,.35),0 1px 0 rgba(255,255,255,.4) inset}
.ad-slide .ad-fig{transform:translateY(12px)} .ad-slide.on .ad-fig{transform:translateY(0)}
.ad-fig::after{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 22%,transparent 40%)}
.ad-fig figcaption{top:22px;bottom:auto;left:26px;right:26px;align-items:flex-start;flex-direction:column;gap:4px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.ad-fig figcaption span:first-child{font-size:20px;letter-spacing:-.02em}
.ad-fig figcaption span:last-child{text-align:left;font-size:13px;color:rgba(255,255,255,.78);font-weight:400}
.ad-fig figcaption::before{content:"";position:absolute;left:0;top:-2px;width:26px;height:2px;background:var(--g3);border-radius:2px;transform:translateY(-8px);opacity:0}
.ad-slide .ad-fig img,.ad-slide.on .ad-fig img{transform:translate3d(0,var(--py,0),0) scale(1.06)}
@keyframes kb{from{transform:translate3d(0,var(--py,0),0) scale(1.06)}to{transform:translate3d(0,var(--py,0),0) scale(1.13)}}
.ad-facts{gap:0 14px;margin-top:22px}
.ad-facts li{padding:0;border:0;background:none;font-weight:400;color:var(--mut);font-size:13.5px;display:inline-flex;align-items:center}
.ad-facts li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:rgba(11,12,15,.3);margin-right:14px}
/* ================= pass 11c: section two — portraits drift, greyscale until chosen, three-up on a phone ================= */
/* the whole portrait stack drifts on a slow figure-eight and breathes; blur stays exactly as it was */
.who-pic{animation:whodrift 11s ease-in-out infinite;will-change:transform}
.who-card[data-key=women] .who-pic{animation-delay:-3.7s;animation-duration:12.5s}
.who-card[data-key=children] .who-pic{animation-delay:-7.4s;animation-duration:10.2s}
@keyframes whodrift{0%{transform:translate(0,0) scale(1) rotate(0)}25%{transform:translate(-1.6%,-1.2%) scale(1.03) rotate(-.6deg)}50%{transform:translate(1.2%,-2.2%) scale(1.05) rotate(.4deg)}75%{transform:translate(1.8%,.6%) scale(1.02) rotate(.7deg)}100%{transform:translate(0,0) scale(1) rotate(0)}}
.who-card:hover .who-pic,.who-card.is-on .who-pic{animation-play-state:running}
/* colour: grey at rest, full colour when hovered or tapped; each blur layer keeps its own blur */
.who-img.l0{filter:blur(2px) grayscale(1)} .who-img.l1{filter:blur(8px) grayscale(1)} .who-img.l2{filter:blur(18px) grayscale(1)} .who-img.l3{filter:blur(34px) grayscale(1)}
.who-img{transition:opacity 1.1s var(--ease),filter .9s var(--ease)}
.who-card:hover .who-img.l0,.who-card.is-on .who-img.l0,.who-card.has-v:hover .who-img.l0{filter:blur(2px) grayscale(0) saturate(1.08)}
.who-card:hover .who-img.l1,.who-card.is-on .who-img.l1{filter:blur(8px) grayscale(0) saturate(1.08)}
.who-card:hover .who-img.l2,.who-card.is-on .who-img.l2{filter:blur(18px) grayscale(0) saturate(1.08)}
.who-card:hover .who-img.l3,.who-card.is-on .who-img.l3{filter:blur(34px) grayscale(0) saturate(1.08)}
.who-card.is-on{transform:translateY(-8px);border-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 50px 80px -40px color-mix(in srgb,var(--acc) 55%,rgba(0,0,0,.5))}
.who-card.is-on .who-label em{opacity:1;transform:none}
/* phone: the three cards share one screen — a row of three tall portrait tiles, label under each */
@media (max-width:820px){
.who-sec .who{max-width:none;grid-template-columns:repeat(3,1fr);gap:10px}
.who-card{aspect-ratio:3/5;border-radius:20px}
.who-label{padding:0 10px 14px}
.who-label b{font-size:15px;white-space:normal;line-height:1.1}
.who-label small{display:none}
.who-label em{display:none}
.who-card .arrow{width:28px;height:28px;top:10px;right:10px}
.who-card .arrow svg{width:12px;height:12px}
.who-card .who-fade{background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--tint,#F4EFE8) 94%,#fff) 80%)}
}
@media (max-width:420px){ .who-label b{font-size:13.5px} }
@media (prefers-reduced-motion:reduce){ .who-pic{animation:none} }
@media (max-width:860px){
.hch{width:88vw;left:50%}
.hch p{max-width:none}
.hch .spec{max-width:88vw}
.hero-v,.hero-poster{transform:translate(0,calc(-50% + var(--ty,6vh) - 13vh)) scale(calc(var(--hs,1) * var(--hm,1)))}
.hero-ring{bottom:40%}
}
/* the new render frames the product smaller, so the base scale went up (mountHero); phones compensate here */
@media (max-width:760px){ .hero-v,.hero-poster{--hm:1.92} }
@media (max-width:860px){
.hero-v,.hero-poster{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 74%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 74%,transparent 96%)}
}
/* ================= pass 12: hero — tighter frame mask, flare on the morphs ================= */
/* the film's frame is scaled up, so its edges are faded harder: nothing of the rectangle survives */
.hero-v,.hero-poster{-webkit-mask-image:radial-gradient(ellipse 46% 58% at 50% 50%,#000 46%,rgba(0,0,0,.6) 66%,transparent 84%);mask-image:radial-gradient(ellipse 46% 58% at 50% 50%,#000 46%,rgba(0,0,0,.6) 66%,transparent 84%)}
/* flare: an anamorphic streak, a bloom and a ring that breathe in on each morph, driven by --f from mountHero */
.hero-flare{position:absolute;left:50%;top:50%;width:100vw;height:60vh;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:var(--f,0);
transform:translate(calc(-50% + var(--tx,0)),calc(-50% + var(--ty,6vh)));will-change:opacity}
.hero-flare i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.hero-flare i:nth-child(1){width:140%;height:3px;background:linear-gradient(90deg,transparent,rgba(var(--b,255,255,255),.9) 35%,#fff 50%,rgba(var(--b,255,255,255),.9) 65%,transparent);filter:blur(1.5px);transform:translate(-50%,-50%) scaleX(calc(.4 + var(--f,0) * .8))}
.hero-flare i:nth-child(2){width:46vmin;height:46vmin;background:radial-gradient(closest-side,rgba(var(--b,255,255,255),.55),rgba(var(--c,255,110,20),.25) 45%,transparent 72%);filter:blur(6px);transform:translate(-50%,-50%) scale(calc(.6 + var(--f,0) * .6))}
.hero-flare i:nth-child(3){width:30vmin;height:30vmin;border:1.5px solid rgba(var(--b,255,255,255),.55);box-shadow:0 0 24px rgba(var(--b,255,255,255),.5);transform:translate(-50%,-50%) scale(calc(.5 + var(--f,0) * 1.6));opacity:calc(1 - var(--f,0) * .6)}
/* sparks: eight points that fly out once the flare peaks */
.hero-flare::before,.hero-flare::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(var(--b,255,255,255),.8);opacity:0}
.hero-flare.on::before{animation:spark 1.1s var(--ease) forwards}
.hero-flare.on::after{animation:spark 1.1s var(--ease) .12s forwards;transform:rotate(60deg)}
@keyframes spark{0%{opacity:1;transform:translate(-50%,-50%) translateX(0) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translateX(28vmin) scale(.2)}}
@media (max-width:860px){ .hero-flare{width:140vw;height:40vh;transform:translate(-50%,calc(-50% + var(--ty,6vh) - 13vh))} .hero-flare i:nth-child(1){display:none} }
@media (prefers-reduced-motion:reduce){ .hero-flare{display:none} }
.hero-flare i:nth-child(3){border-color:rgba(var(--b,255,255,255),.28);box-shadow:0 0 30px rgba(var(--b,255,255,255),.25);filter:blur(1px);opacity:calc(.7 - var(--f,0) * .5)}
.hero-flare i:nth-child(1){height:2px;opacity:.85}
/* ================= pass 12b: finder tiles — bubbly ================= */
/* each tile breathes like a bubble on its own clock; the art inside bobs with a little squash and stretch; hover pops */
/* the tile itself keeps the pointer tilt, so the bubble breathes on the art layer and the text */
.bento .tile .tile-art{animation:bubble 7s ease-in-out infinite;animation-delay:calc(var(--d,1) * -1.7s);transform-origin:50% 60%}
.bento .tile .tile-txt{animation:bubble 7s ease-in-out infinite;animation-delay:calc(var(--d,1) * -1.7s + -.4s)}
.bento .tile .tile-art img{animation:bob 5.2s ease-in-out infinite;animation-delay:calc(var(--d,1) * -1.1s);transform-origin:50% 80%}
.bento .tile:hover .tile-art,.bento .tile:hover .tile-txt{animation-play-state:paused}
.bento .tile:hover .tile-art img{animation:pop .7s var(--spring) forwards}
.bento .tile .tile-txt b{transition:transform .5s var(--spring)}
.bento .tile:hover .tile-txt b{transform:translateY(-2px)}
@keyframes bubble{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-5px) scale(1.012,1.008)}65%{transform:translateY(2px) scale(.996,1.004)}}
@keyframes bob{0%,100%{transform:translateY(0) scale(1.02)}30%{transform:translateY(-8px) scale(1.0,1.045)}55%{transform:translateY(3px) scale(1.05,.985)}80%{transform:translateY(-3px) scale(1.02)}}
@keyframes pop{0%{transform:scale(1.02)}45%{transform:translateY(-10px) scale(1.14,1.08)}70%{transform:translateY(-4px) scale(1.06,1.1)}100%{transform:translateY(-6px) scale(1.09)}}
@media (prefers-reduced-motion:reduce){ .bento .tile .tile-art,.bento .tile .tile-txt,.bento .tile .tile-art img{animation:none} }
/* ================= pass 12c: advert — a sliding track, long eased, image parallax against the slide ================= */
.ad{overflow:hidden;min-height:0;padding-bottom:6px;touch-action:pan-y;cursor:grab}
.ad:active{cursor:grabbing}
.ad-track{display:flex;transition:transform 1.25s cubic-bezier(.22,1,.36,1);will-change:transform}
.ad-slide,.ad-slide.on{position:relative;flex:0 0 100%;min-width:100%;opacity:1;pointer-events:auto;transition:none}
.ad-slide .ad-fig,.ad-slide.on .ad-fig{opacity:1;transform:translateX(calc(var(--k,0) * -9%));transition:transform 1.25s cubic-bezier(.22,1,.36,1)}
.ad-slide .ad-copy>*{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.ad-slide.on .ad-copy>*{opacity:1;transform:none}
.ad-slide.on .ad-copy>*:nth-child(1){transition-delay:.35s}.ad-slide.on .ad-copy>*:nth-child(2){transition-delay:.45s}.ad-slide.on .ad-copy>*:nth-child(3){transition-delay:.55s}.ad-slide.on .ad-copy>*:nth-child(4){transition-delay:.65s}
.ad-slide .ad-fig img,.ad-slide.on .ad-fig img{transform:translate3d(calc(var(--k,0) * 4%),var(--py,0),0) scale(1.08);transition:transform 1.25s cubic-bezier(.22,1,.36,1)}
.ad-slide.on .ad-fig img{animation:none}
.ad-dots{position:static;margin-top:18px}
@media (max-width:860px){ .ad-slide{grid-template-columns:1fr;position:relative} }
.ad-slide .ad-fig,.ad-slide.on .ad-fig{transform:translateX(calc(var(--k,0) * 12%))}
.ad-slide .ad-fig img,.ad-slide.on .ad-fig img{transform:translate3d(calc(var(--k,0) * -5%),var(--py,0),0) scale(1.08)}
/* ================= pass 12d: map — no label, no rings; routes draw once and stay faint, lights travel them, destinations breathe. Index as editorial rows ================= */
.world-map .arc{stroke:rgba(158,231,184,.30);stroke-width:.5;stroke-dasharray:600;stroke-dashoffset:600;opacity:0}
.world-map.live .arc{animation:arcdraw 2.6s var(--ease) forwards;animation-delay:calc(.3s + var(--i) * .05s)}
@keyframes arcdraw{to{stroke-dashoffset:0;opacity:1}}
.world-map .ship{fill:#fff;opacity:0;filter:drop-shadow(0 0 2px #BFF5D6) drop-shadow(0 0 5px rgba(158,231,184,.7))}
.world-map .pin .halo,.world-map .pin .halo.h2,.world-map .home-tag{display:none}
.world-map .pin .glow{fill:rgba(158,231,184,.18);opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center}
.world-map.live .pin .glow{animation:breathe 5.5s ease-in-out infinite;animation-delay:calc(2.2s + var(--i) * .5s)}
@keyframes breathe{0%,100%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1)}}
.world-map .pin .dot{fill:#BFF5D6;opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.world-map.live .pin .dot{animation:pinin .6s var(--spring) forwards;animation-delay:calc(1.2s + var(--i) * .05s)}
.world-map .pin.home .dot{fill:#fff;filter:drop-shadow(0 0 4px #fff)}
.world-map .pin.home .glow{fill:rgba(255,255,255,.14)}
.world-map svg circle[fill="url(#mapglow)"]{display:none}
.world-legend{display:block;margin-top:clamp(20px,3vw,40px);border-top:1px solid rgba(158,231,184,.16)}
.world-legend .reg{display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:baseline;padding:16px 4px;border:0;border-bottom:1px solid rgba(158,231,184,.12);border-radius:0;background:none;transition-delay:calc(1s + var(--k) * .1s)}
.world-legend .reg-n{font-size:13px;font-weight:600;color:#BFF5D6;letter-spacing:.01em}
.world-legend .reg-c{font-size:16px;color:rgba(255,255,255,.82);line-height:1.5}
.world-legend .reg-k{font-size:12.5px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
@media (max-width:760px){
.world-legend .reg{grid-template-columns:1fr;gap:4px;padding:12px 2px;display:grid}
.world-legend .reg-n{width:auto;margin:0;font-size:12px}
.world-legend .reg-c{font-size:14px}
.world-legend .reg-k{display:none}
}
/* ================= pass 12e: section two — the portrait comes alive on hover ================= */
/* the film sits under the blur layers, white background multiplied away against the tint; on hover it fades in under the same blur, the sharp-ish still fades out, the soft top layers stay so the face never resolves */
.who-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;z-index:0;mix-blend-mode:multiply;opacity:0;
filter:blur(3px) saturate(1.05);transition:opacity .9s var(--ease);pointer-events:none}
.who-card.playing .who-v,.who-card.is-on .who-v{opacity:1}
.who-card.playing .who-img.l0,.who-card.is-on .who-img.l0{opacity:0}
.who-card.playing .who-img.l1,.who-card.is-on .who-img.l1{opacity:.7}
.who-card .who-img{z-index:1}
.who-card.playing .who-pic,.who-card.is-on .who-pic{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .who-v{display:none} }
/* ================= pass 13: performance and legibility ================= */
/* the pointer light sat above the copy and washed it out. It now sits under the text and is much softer */
.tile::before{z-index:0;background:radial-gradient(300px 300px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 72%);mix-blend-mode:normal}
.tile:hover::before{opacity:.7}
.tile.photo::before,.tile.green::before{background:radial-gradient(300px 300px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 72%)}
.tile-art{z-index:1}
.tile-txt{z-index:3}
.tile .arrow{z-index:3}
/* --- hero: seven stacked blend layers over a scaling video was the lag. Rays are gone; grain, ring
and flare no longer blend, so the compositor stops reading back the backdrop every frame --- */
.hero-rays{display:none!important}
.hero-grain{mix-blend-mode:normal;opacity:.035}
.hero-ring{mix-blend-mode:normal;animation:none;opacity:.85}
.hero-ring::after{animation:none;opacity:.5}
.hero-flare{mix-blend-mode:normal;visibility:hidden}
.hero-flare.lit{visibility:visible}
.hero-flare i:nth-child(2){filter:none}
.hero-flare i:nth-child(1){filter:none}
.hero-spot{display:none}
.hero .bokeh{display:none}
/* one composited layer for the film, and no permanent will-change elsewhere */
.hero-v,.hero-poster{will-change:transform;backface-visibility:hidden}
.hero-wash{will-change:auto}
/* the edge fade is baked into the film now (ffmpeg vignette), so the compositor stops masking every frame */
.hero-v,.hero-poster{-webkit-mask-image:none;mask-image:none}
/* the wash is three gradients on its own layer instead of four repainted in place.
The first is the stage the product stands on: --pool comes from the phase table and is written
in the same guarded block as --c, so it costs no extra paint. It is sized and placed to cover
the whole of the product's drift (up to 13vw right, 9vh up) without reaching the headline or
the certificate strip, so it stays a pool of shadow rather than a dark band across the hero. */
.hero-wash{background:
radial-gradient(64% 56% at 55% 48%,rgba(0,0,0,var(--pool,.4)),rgba(0,0,0,calc(var(--pool,.4) * .46)) 50%,transparent 78%),
radial-gradient(85% 65% at 50% 106%,rgba(var(--c),.92),transparent 70%),
linear-gradient(180deg,rgba(var(--c),.16) 0%,rgba(var(--c),.52) 58%,rgba(var(--c),.82) 100%),var(--g);
transform:translateZ(0)}
/* --- portraits: the progressive blur is baked into the files now (tools/bake_portraits.py), so the
cards carry two flat images and a pre-blurred film. No live filters, nothing to re-blur on a
transform. Grey to colour is an opacity cross-fade, which composites for free. --- */
.who-img,.who-img.l0,.who-img.l1,.who-img.l2,.who-img.l3{filter:none!important;-webkit-mask-image:none!important;mask-image:none!important;
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;opacity:0;transition:opacity .7s var(--ease)}
.who-card.has-v .who-img{opacity:1}
.who-img.who-col{opacity:0;z-index:2}
.who-card:hover .who-col,.who-card.is-on .who-col{opacity:1}
.who-v{filter:none;object-fit:contain;object-position:50% 0;z-index:3;mix-blend-mode:normal}
.who-card.playing .who-v,.who-card.is-on .who-v{opacity:1}
.who-card.playing .who-img,.who-card.is-on .who-img{opacity:0}
.who-card.playing .who-col,.who-card.is-on .who-col{opacity:0}
.who-pic{animation-duration:14s}
/* the film's white studio background is multiplied away against the card tint; only the hovered card blends */
.who-card.playing .who-v,.who-card.is-on .who-v{mix-blend-mode:multiply}
/* --- fewer animated elements per section: one bubble clock per tile, art float folded into it --- */
.bento .tile .tile-txt{animation:none}
.tile-art img{animation:none}
.bento .tile .tile-art img{animation:bob 6s ease-in-out infinite;animation-delay:calc(var(--d,1) * -1.3s)}
.who-shine{display:none}
.who-card::before{animation:none}
.trust-a,.trust-b{animation-duration:26s}
/* --- backdrop-filter was the single biggest cost on the page: every blurred panel forces the
compositor to re-read and blur what is behind it on every scrolled frame, and the nav and the
eight glass cards are on screen the whole time. The glass look is kept with translucency and an
inner highlight instead. Only the two full-screen overlays, which appear alone and rarely, still
blur what is behind them. --- */
.nav,.pcard.glass,.pcard.glass .quick,.badge,.tile .arrow,.who-card .arrow,.btn-g,.chip,.quick,
.stat,.world .dist-band,.ad-fig figcaption,.hch .facts li,.certs-marq,.trust .proof-card,.pill-badge{
backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.nav{background:rgba(18,20,26,.82)}
.nav.on-light{background:rgba(255,255,255,.88)}
.pcard.glass{background:rgba(255,255,255,.11)}
.pcard.glass:hover{background:rgba(255,255,255,.16)}
.badge{background:rgba(28,30,36,.72)}
.who-card .arrow{background:rgba(255,255,255,.86)}
.tile .arrow{background:rgba(255,255,255,.9)}
.world .dist-band{background:rgba(8,32,24,.88)}
/* these two cover the whole screen on their own, so the blur is worth it there */
.scrim,.mmenu{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
/* ================= pass 13b: advert — a slow dissolve instead of a slide ================= */
.ad{overflow:visible;cursor:default;min-height:min(74vh,700px)}
.ad-track{display:contents}
.ad-slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
opacity:0;pointer-events:none;transition:opacity 1s var(--ease);min-width:0;flex:none}
.ad-slide.on{position:relative;opacity:1;pointer-events:auto}
.ad-slide .ad-fig,.ad-slide.on .ad-fig{transform:scale(1.03);opacity:0;transition:transform 1.4s cubic-bezier(.22,1,.36,1),opacity 1s var(--ease)}
.ad-slide.on .ad-fig{transform:scale(1);opacity:1}
.ad-slide.out .ad-fig{transform:scale(.985);opacity:0}
.ad-slide .ad-fig img,.ad-slide.on .ad-fig img{transform:translate3d(0,var(--py,0),0) scale(1.06);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.ad-slide.on .ad-fig img{animation:none}
.ad-slide .ad-copy>*{opacity:0;transform:translateY(12px);transition:opacity .75s var(--ease),transform .85s cubic-bezier(.22,1,.36,1)}
.ad-slide.on .ad-copy>*{opacity:1;transform:none}
.ad-slide.on .ad-copy>*:nth-child(1){transition-delay:.25s}.ad-slide.on .ad-copy>*:nth-child(2){transition-delay:.33s}.ad-slide.on .ad-copy>*:nth-child(3){transition-delay:.41s}.ad-slide.on .ad-copy>*:nth-child(4){transition-delay:.49s}
.ad-dots{position:absolute;left:0;bottom:-30px;margin:0}
.ad-dots button.on i::after{animation:dotfill 9s linear forwards}
@media (max-width:860px){ .ad{min-height:0} .ad-slide{grid-template-columns:1fr} .ad-dots{position:static;justify-content:center;margin-top:20px} }
/* ================= pass 13c: the export map — presence, not trajectories ================= */
/* no arcs, no rings: each market is a dot in its region's colour, Pakistan is the warm anchor,
and hovering a row of the index isolates that region on the map */
.world.sec{background:linear-gradient(180deg,#07271D 0%,#062C2A 55%,#05201C 100%)!important}
.world-map .arc,.world-map .ship,.world-map .pin,.world-map .home-tag{display:none}
.world-map .land{stroke:rgba(158,231,184,.22);stroke-width:2.1}
.world-map .mk-d{fill:var(--mc);opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:opacity .45s,fill .45s}
.world-map .mk-h{fill:var(--mc);opacity:0;transition:opacity .5s}
.world-map.live .mk-d{animation:mkin .7s var(--spring) forwards;animation-delay:calc(.5s + var(--i) * .07s)}
.world-map.live .mk-h{animation:mkglow .8s var(--ease) forwards;animation-delay:calc(.6s + var(--i) * .07s)}
@keyframes mkin{to{opacity:1;transform:scale(1)}}
@keyframes mkglow{to{opacity:.16}}
.world-map .home-d{fill:#fff}
.world-map .home-h{fill:#fff;opacity:0}
.world-map.live .home-h{animation:mkglow 1s var(--ease) .2s forwards}
.world-map .mk:hover .mk-d{fill:#fff}
.world-map .mk:hover .mk-h{opacity:.4}
/* isolating a region */
.world-stage[data-only] .mk{opacity:.12;transition:opacity .4s}
.world-stage[data-only="gulf"] .mk[data-r="gulf"],.world-stage[data-only="casia"] .mk[data-r="casia"],
.world-stage[data-only="sasia"] .mk[data-r="sasia"],.world-stage[data-only="seasia"] .mk[data-r="seasia"],
.world-stage[data-only="africa"] .mk[data-r="africa"],.world-stage[data-only="europe"] .mk[data-r="europe"],.world-stage[data-only="cauc"] .mk[data-r="cauc"],.world-stage[data-only="americas"] .mk[data-r="americas"]{opacity:1}
.world-stage[data-only] .mk[data-r] .mk-h{opacity:.16}
/* the index: five rows, each carrying its colour */
.world-legend{display:block;margin-top:clamp(20px,3vw,40px);border-top:1px solid rgba(158,231,184,.14)}
.world-legend .reg{display:grid;grid-template-columns:220px 1fr auto;gap:24px;align-items:baseline;width:100%;text-align:left;
padding:17px 6px;border:0;border-bottom:1px solid rgba(158,231,184,.1);border-radius:0;background:none;color:inherit;font:inherit;cursor:default;
opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .8s var(--spring),background .35s;transition-delay:calc(.9s + var(--k) * .09s)}
.world-legend.live .reg{opacity:1;transform:none}
.world-legend .reg:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 12%,transparent),transparent 60%)}
.world-legend .reg-n{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em}
.world-legend .reg-n i{width:9px;height:9px;border-radius:50%;background:var(--rc);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--rc) 22%,transparent)}
.world-legend .reg-c{display:flex;flex-wrap:wrap;gap:0 7px}
.world-legend .reg-c em{font-style:normal;font-size:15px;color:rgba(255,255,255,.74);line-height:1.55}
.world-legend .reg-c em:not(:last-child)::after{content:"·";margin-left:7px;color:rgba(255,255,255,.28)}
.world-legend .reg:hover .reg-c em{color:#fff}
.world-legend .reg-k{font-size:12.5px;color:rgba(255,255,255,.38);font-variant-numeric:tabular-nums}
@media (max-width:760px){
.world-legend .reg{grid-template-columns:1fr;gap:6px;padding:13px 2px}
.world-legend .reg-n{font-size:13px} .world-legend .reg-c em{font-size:13.5px} .world-legend .reg-k{display:none}
}
/* ================= pass 13d: colour in the finder — each concern carries a tint ================= */
.bento .tile{--tc:#F5A623}
.bento .tile[data-c="bones"]{--tc:#F5A623}
.bento .tile[data-c="immunity"]{--tc:#3FD1A5}
.bento .tile[data-c="vitamin-d-deficiency"],.bento .tile[data-c="vitamin-d"]{--tc:#FFC24D}
.bento .tile[data-c="growth"],.bento .tile[data-c="appetite"]{--tc:#FF9B6B}
.bento .tile[data-c="cough"]{--tc:#5BC8F5}
.bento .tile[data-c="energy"],.bento .tile[data-c="anaemia"]{--tc:#FF7A45}
.bento .tile[data-c="vitality"],.bento .tile[data-c="fertility"]{--tc:#8CB4FF}
.bento .tile[data-c="urinary"]{--tc:#F06A8A}
.bento .tile[data-c="digestion"]{--tc:#7ED08F}
.finder .bento .tile:not(.green):not(.photo){background:
radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--tc) 17%,#FFFDF9),transparent 72%),
linear-gradient(180deg,#FCF7F0,color-mix(in srgb,var(--tc) 11%,#F6EEE3))}
.finder .bento .tile:not(.green):not(.photo) .arrow{color:color-mix(in srgb,var(--tc) 62%,#0B0C0F)}
.finder .bento .tile:not(.green):not(.photo):hover{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 40px 60px -34px color-mix(in srgb,var(--tc) 60%,rgba(0,0,0,.4))}
.finder .bento .tile:not(.green):not(.photo):hover .arrow{background:color-mix(in srgb,var(--tc) 82%,#0B0C0F);color:#fff}
/* ================= pass 14: hero paint cost ================= */
/* the progress rail is scaled from the top instead of resized, so it no longer lays out every frame */
.hero-rail i{top:0;height:100%;transform-origin:50% 0;transform:scaleY(0)}
/* the film's element is sized to the picture instead of the whole stage, so the blended, rasterised
area is roughly half what it was */
.hero-v,.hero-poster{inset:auto;left:50%;top:50%;width:min(100%,168vh);height:auto;aspect-ratio:16/9;
transform:translate(calc(-50% + var(--tx,0)),calc(-50% + var(--ty,6vh))) scale(calc(var(--hs,1) * var(--hm,1)))}
.hero-grain{display:none}
/* the flare stayed composited while hidden, which cost more than the film itself; it leaves the
render tree between morphs instead */
.hero-flare{display:none;visibility:visible}
.hero-flare.lit{display:block}
/* ================= pass 14b: the three fixes ================= */
/* the film only shows once it is actually playing, so a card never flashes the black of an
undecoded video, and it is keyed against the tint by taking the darker of the two */
.who-v{opacity:0;background:transparent}
.who-card.playing .who-v{opacity:1;mix-blend-mode:darken}
.who-card.is-on .who-v{mix-blend-mode:darken}
.who-card.is-on:not(.playing) .who-v{opacity:0}
.who-card.is-on:not(.playing) .who-img{opacity:1}
.who-card.is-on:not(.playing) .who-col{opacity:1}
/* the advert's dissolve is quicker on a ten second beat */
.ad-slide{transition:opacity .62s var(--ease)}
.ad-slide .ad-fig,.ad-slide.on .ad-fig{transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .6s var(--ease)}
.ad-slide .ad-fig img,.ad-slide.on .ad-fig img{transition:transform .85s cubic-bezier(.22,1,.36,1)}
.ad-slide .ad-copy>*{transition:opacity .5s var(--ease),transform .6s cubic-bezier(.22,1,.36,1)}
.ad-slide.on .ad-copy>*:nth-child(1){transition-delay:.14s}.ad-slide.on .ad-copy>*:nth-child(2){transition-delay:.2s}.ad-slide.on .ad-copy>*:nth-child(3){transition-delay:.26s}.ad-slide.on .ad-copy>*:nth-child(4){transition-delay:.32s}
.ad-dots button.on i::after{animation:dotfill 10s linear forwards}
/* ================= pass 14c: routes appear for the region you choose ================= */
/* nothing is drawn at rest; picking a region from the index draws its routes out of Islamabad */
.world-map .ln{fill:none;stroke:var(--mc);stroke-width:.6;stroke-linecap:round;opacity:0;
stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.world-stage[data-only] .world-map .ln[data-r]{transition:none}
.world-stage[data-only="gulf"] .ln[data-r="gulf"],.world-stage[data-only="casia"] .ln[data-r="casia"],
.world-stage[data-only="sasia"] .ln[data-r="sasia"],.world-stage[data-only="seasia"] .ln[data-r="seasia"],
.world-stage[data-only="africa"] .ln[data-r="africa"],.world-stage[data-only="europe"] .ln[data-r="europe"],.world-stage[data-only="cauc"] .ln[data-r="cauc"],.world-stage[data-only="americas"] .ln[data-r="americas"]{animation:lndraw .85s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i) * .035s)}
@keyframes lndraw{from{opacity:0;stroke-dashoffset:var(--len)}25%{opacity:.75}to{opacity:.75;stroke-dashoffset:0}}
.world-stage[data-only] .home-d{fill:#fff}
.world-stage[data-only] .home-h{opacity:.28!important}
/* ================= pass 15: hero ================= */
/* the flare's first child was the streak; it never shows */
.hero-flare i:nth-child(1){display:none}
/* big soft colour discs behind the product, in the phase colour, drifting on transforms only:
feathered radial gradients, no filter, one composited layer each */
.hero-orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-orbs i{position:absolute;border-radius:50%;width:var(--s);height:var(--s);left:var(--x);top:var(--y);
background:radial-gradient(closest-side,rgba(var(--c,255,110,20),.55),rgba(var(--c,255,110,20),.22) 45%,transparent 72%);
opacity:.85;animation:orb var(--t) ease-in-out infinite alternate;animation-delay:var(--d);will-change:transform;transform:translate3d(0,0,0)}
.hero-orbs i:nth-child(1){--s:52vmin;--x:-8%;--y:8%;--t:19s;--d:-3s}
.hero-orbs i:nth-child(2){--s:40vmin;--x:62%;--y:-10%;--t:23s;--d:-9s}
.hero-orbs i:nth-child(3){--s:34vmin;--x:78%;--y:48%;--t:17s;--d:-5s}
.hero-orbs i:nth-child(4){--s:46vmin;--x:14%;--y:58%;--t:25s;--d:-13s}
.hero-orbs i:nth-child(5){--s:26vmin;--x:44%;--y:66%;--t:15s;--d:-1s}
.hero-orbs i:nth-child(6){--s:30vmin;--x:36%;--y:-6%;--t:21s;--d:-7s}
@keyframes orb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,-5vh,0) scale(1.12)}}
@media (max-width:760px){ .hero-orbs i{opacity:.7} .hero-orbs i:nth-child(5),.hero-orbs i:nth-child(6){display:none} }
@media (prefers-reduced-motion:reduce){ .hero-orbs i{animation:none} }
/* ================= pass 15b: section two back to the quieter cards ================= */
.who-sec .who{max-width:1080px;gap:22px}
.who-card{aspect-ratio:4/5}
.who-v{display:none}
/* grey at rest; on hover the card lifts a little and the portrait warms very gently (a 40% cross-fade, no film, no zoom) */
.who-card:hover .who-col,.who-card.is-on .who-col{opacity:.42}
.who-card.playing .who-img,.who-card.is-on .who-img{opacity:1}
.who-card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px)}
.who-pic{animation-duration:16s}
@keyframes whodrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(.6%,-1%) scale(1.015)}100%{transform:translate(0,0) scale(1)}}
@media (max-width:820px){ .who-sec .who{max-width:none} .who-card{aspect-ratio:3/5} }
/* the colour copy is hidden at rest even once the still has loaded (the has-v rule was winning) */
.who-card.has-v .who-img.who-col{opacity:0}
.who-card.has-v:hover .who-img.who-col,.who-card.has-v.is-on .who-img.who-col{opacity:.42}
/* ================= pass 15c: the countries live on the map; the index is five chips ================= */
.world-map .mk-t{font-family:var(--f-b);font-size:5.4px;font-weight:500;fill:#fff;opacity:0;paint-order:stroke;stroke:rgba(4,20,16,.85);stroke-width:1.6px;stroke-linejoin:round;
transition:opacity .35s;pointer-events:none}
.world-map .mk-t.l{text-anchor:end}
.world-stage[data-only] .mk[data-r] .mk-t{opacity:0}
.world-stage[data-only="gulf"] .mk[data-r="gulf"] .mk-t,.world-stage[data-only="casia"] .mk[data-r="casia"] .mk-t,
.world-stage[data-only="sasia"] .mk[data-r="sasia"] .mk-t,.world-stage[data-only="seasia"] .mk[data-r="seasia"] .mk-t,
.world-stage[data-only="africa"] .mk[data-r="africa"] .mk-t,.world-stage[data-only="europe"] .mk[data-r="europe"] .mk-t,.world-stage[data-only="cauc"] .mk[data-r="cauc"] .mk-t,.world-stage[data-only="americas"] .mk[data-r="americas"] .mk-t{opacity:1;transition-delay:calc(.15s + var(--i) * .03s)}
.world-map .mk:hover .mk-t{opacity:1}
.world-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;border:0;margin-top:clamp(14px,2vw,26px)}
.world-legend .reg{display:inline-flex;align-items:center;gap:9px;width:auto;padding:9px 14px 9px 11px;border-radius:999px;border:1px solid rgba(158,231,184,.16);
background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .3s,border-color .3s,transform .4s var(--spring),opacity .6s,transform .6s}
.world-legend .reg i{width:9px;height:9px;border-radius:50%;background:var(--rc);box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 22%,transparent)}
.world-legend .reg b{font-weight:500;color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums}
.world-legend .reg:hover,.world-legend .reg.on{background:color-mix(in srgb,var(--rc) 16%,rgba(255,255,255,.04));border-color:color-mix(in srgb,var(--rc) 55%,transparent);transform:translateY(-2px)}
.world-legend .reg span{white-space:nowrap}
.world-legend .reg-n,.world-legend .reg-c,.world-legend .reg-k{display:none}
.world-map{-webkit-mask-image:none;mask-image:none}
.world-map svg{height:min(64vh,620px)}
@media (max-width:760px){ .world-map .mk-t{font-size:7px} .world-legend .reg{font-size:12.5px;padding:8px 12px 8px 10px} }
/* ================= pass 15d: best sellers ================= */
/* the rail fades out at its right edge instead of cutting a card in half */
.best .rail,.rail{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 140px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 140px),transparent)}
@media (max-width:760px){ .rail{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 60px),transparent)} }
.ad-dots button.on i::after{animation:dotfill 8s linear forwards}
.rail.at-end{-webkit-mask-image:none;mask-image:none}
/* pass 16: product page */
.pdp.sec,.shop-head.sec,.co.sec,.page.sec{padding-top:calc(var(--top) + 18px)}
.pdp .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--mut);margin-bottom:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp .crumbs .sep{opacity:.45}
.pdp .crumbs a{color:var(--mut)} .pdp .crumbs a:hover{color:var(--ink)}
.pdp .crumbs [aria-current]{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.pdp-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.5vw,72px)}
.pdp-stage{top:calc(var(--nav-h) + 24px)}
.pdp-stage .stage-tile{border-radius:28px;background:radial-gradient(120% 90% at 50% 20%,color-mix(in srgb,var(--c,#1b1f2a) 40%,#0b0c10),#07080b 70%)}
.pdp-proof{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:13.5px;color:var(--mut)}
.pdp-proof li{display:flex;align-items:center;gap:9px;min-width:0}
.pdp-proof svg{width:16px;height:16px;flex:none;color:#146B43}
.pdp-buy{padding-top:6px;min-width:0}
.pdp-buy .eyebrow{color:#146B43;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;font-weight:600}
.pdp-buy h1{font-family:var(--f-d);font-weight:600;font-size:clamp(30px,3.3vw,42px);letter-spacing:-.03em;line-height:1.04;margin:10px 0 6px}
.pdp-buy .tag{font-size:19px;font-weight:500;color:var(--ink);letter-spacing:-.01em;margin:0 0 10px}
.pdp-buy .lede{font-size:15.5px;line-height:1.55;color:var(--mut);max-width:48ch}
.price-row{display:flex;align-items:baseline;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.price-row b{font-family:var(--f-d);font-weight:600;font-size:28px;letter-spacing:-.02em}
.price-row span{font-size:14px;color:var(--mut)} .price-row s{opacity:.7;margin-left:4px}
.opt-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px;font-size:13.5px;font-weight:600}
.opt-head .mut{font-weight:400}
.opts{display:grid;gap:10px}
.opt{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:#fff;text-align:left;transition:border-color .2s,box-shadow .2s,transform .2s}
.opt:hover{transform:none;border-color:rgba(11,12,15,.35)}
.opt .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(11,12,15,.35);flex:none;display:grid;place-items:center;transition:border-color .2s,background .2s}
.opt .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .2s}
.opt.on{border-color:#146B43;box-shadow:0 0 0 3px rgba(20,107,67,.12)}
.opt.on .dot{border-color:#146B43;background:#146B43} .opt.on .dot::after{transform:scale(1)}
.opt .lab{flex:1;min-width:0} .opt .lab b{font-size:15px;font-weight:600;display:block} .opt .lab small{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.opt .price{font-size:16px;font-weight:600;text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.opt .price s{font-size:12.5px;font-weight:400;color:var(--mut)}
.buy-row{margin-top:16px;gap:10px}
.buy-row .qty{height:50px;background:#fff}
.buy-row .btn-a{height:50px;min-width:200px;justify-content:center}
.buy-row .btn-wa{height:50px;width:50px;padding:0;justify-content:center;flex:none}
.pay-note{margin-top:12px;font-size:13px;color:var(--mut);line-height:1.5}
.acc{margin-top:26px}
.acc summary{padding:16px 0;font-size:16px}
.acc summary i{width:24px;height:24px;border:1px solid var(--line);background:transparent;color:var(--ink)}
.acc summary i svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.acc details[open] summary i{transform:none;background:var(--ink);color:var(--bg)}
.acc details[open] summary i svg{transform:rotate(180deg)}
.acc .body{padding:0 0 18px;font-size:14.5px}
.comp{width:100%;border-collapse:collapse;font-size:14px}
.comp td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.comp td:last-child{text-align:right;color:var(--ink);font-weight:500;white-space:nowrap;padding-left:16px}
.comp tr:last-child td{border-bottom:0}
.pairs{margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.pairs .sec-head{align-items:end}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;transform:translateY(110%);transition:transform .35s var(--ease);background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding:10px 0 calc(10px + env(safe-area-inset-bottom));display:none}
.buybar.show{transform:none}
.buybar .wrap{display:flex;align-items:center;gap:12px}
.buybar .bb-i{width:44px;height:44px;border-radius:12px;background:#0b0c10;display:grid;place-items:center;overflow:hidden;flex:none}
.buybar .bb-i .pill{width:70%}
.buybar .bb-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.buybar .bb-t b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .buybar .bb-t span{font-size:13px;color:var(--mut)}
.buybar .btn-a{height:44px;padding:0 18px;font-size:14px;flex:none}
@media (max-width:900px){
.pdp-grid{grid-template-columns:1fr;gap:22px}
.pdp-proof{margin-top:12px}
.pdp-buy h1{font-size:clamp(28px,7.5vw,36px)}
.pdp-buy .tag{font-size:17px}
.buybar{display:block}
}
@media (max-width:600px){
.pdp.sec,.shop-head.sec,.co.sec,.page.sec{padding-top:calc(var(--top) + 8px)}
.pdp .crumbs{margin-bottom:14px;font-size:12.5px}
.pdp-stage .stage-tile{border-radius:22px}
.pdp-proof{grid-template-columns:1fr 1fr;gap:8px 12px;font-size:12.5px}
.price-row b{font-size:26px}
.buy-row .btn-a{min-width:0;flex:1}
.buy-row .qty{height:48px} .buy-row .btn-a,.buy-row .btn-wa{height:48px}
.acc summary{font-size:15px;padding:14px 0}
.comp td:last-child{white-space:normal;max-width:50%}
}
@media (max-width:600px){
.buy-row{flex-wrap:nowrap}
.buy-row .qty button{width:36px} .buy-row .qty span{min-width:22px}
.buy-row .btn-a{font-size:14px;padding:0 12px;white-space:nowrap;min-width:0}
.buy-row .btn-wa{width:48px}
}
@media (max-width:600px){
.pdp-proof{grid-template-columns:1fr;gap:7px}
.buy-row .qty button{width:32px} .buy-row .qty{padding:0 2px}
.buy-row .btn-a{font-size:13.5px;padding:0 10px;gap:6px}
.buy-row .btn-a svg{width:15px;height:15px}
}
.buybar{background:#fff;color:#0B0C0F;z-index:50;box-shadow:0 -8px 30px rgba(0,0,0,.08);isolation:isolate}
.buybar .bb-t b{color:#0B0C0F} .buybar .bb-t span{color:#6B6F76}
/* ================= pass 16a: section two, colour portraits and a symbol on hover ================= */
/* the portraits are colour again and blurred harder in the baked file; the hover no longer
cross-fades a second photograph, it draws the sign for that group over a softened portrait */
.who-card .who-col{display:none}
.who-img,.who-card.has-v .who-img{opacity:1;transition:opacity .5s var(--ease),transform .7s var(--ease),filter .5s var(--ease)}
.who-sym{position:absolute;inset:0;display:grid;place-items:center;z-index:4;pointer-events:none;
opacity:0;transform:scale(.82) translateY(10px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.who-sym svg{width:clamp(84px,30%,150px);height:auto;color:var(--acc,#146B43);
filter:drop-shadow(0 6px 18px rgba(11,12,15,.14))}
.who-card:hover .who-sym,.who-card.is-on .who-sym{opacity:1;transform:none}
.who-card:hover .who-img,.who-card.is-on .who-img{opacity:.5;transform:scale(1.04)}
/* the label has to stay readable while the sign is up */
.who-card:hover .who-fade,.who-card.is-on .who-fade{opacity:1}
@media (hover:none){ .who-sym{opacity:.9;transform:none} .who-card .who-img{opacity:.62} }
@media (prefers-reduced-motion:reduce){ .who-sym{transition:opacity .2s} .who-card:hover .who-img{transform:none} }
/* ================= pass 16b: the map zooms to a region and the countries glow ================= */
.world-map .lns{display:none}
.wm-z{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.mk{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.mk-glow{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .5s var(--ease)}
.home-glow{opacity:.5}
.world-stage[data-only] .mk[data-r]{opacity:.22;transition:opacity .45s var(--ease)}
.world-stage[data-only="gulf"] .mk[data-r="gulf"],.world-stage[data-only="casia"] .mk[data-r="casia"],
.world-stage[data-only="sasia"] .mk[data-r="sasia"],.world-stage[data-only="seasia"] .mk[data-r="seasia"],
.world-stage[data-only="africa"] .mk[data-r="africa"],.world-stage[data-only="europe"] .mk[data-r="europe"],.world-stage[data-only="cauc"] .mk[data-r="cauc"],.world-stage[data-only="americas"] .mk[data-r="americas"]{opacity:1}
.world-stage[data-only="gulf"] .mk[data-r="gulf"] .mk-glow,.world-stage[data-only="casia"] .mk[data-r="casia"] .mk-glow,
.world-stage[data-only="sasia"] .mk[data-r="sasia"] .mk-glow,.world-stage[data-only="seasia"] .mk[data-r="seasia"] .mk-glow,
.world-stage[data-only="africa"] .mk[data-r="africa"] .mk-glow,.world-stage[data-only="europe"] .mk[data-r="europe"] .mk-glow,.world-stage[data-only="cauc"] .mk[data-r="cauc"] .mk-glow,.world-stage[data-only="americas"] .mk[data-r="americas"] .mk-glow{opacity:1;animation:mkglow 3.4s ease-in-out infinite alternate;
animation-delay:calc(var(--i) * .12s)}
@keyframes mkglow{from{transform:scale(.82)}to{transform:scale(1.22)}}
.world-map .mk:hover .mk-glow{opacity:1}
/* the label sits beside its dot and is nudged clear of its neighbours by mountMap */
.world-map .mk-t{font-size:5.6px;transition:opacity .35s}
.world-map .land{opacity:.5}
.world-stage[data-only] .land{opacity:.34;transition:opacity .5s var(--ease)}
@media (prefers-reduced-motion:reduce){ .mk-glow{animation:none!important} .wm-z,.mk{transition:none} }
@media (max-width:760px){ .world-map .mk-t{font-size:6.4px} }
/* the map is decorative and now fills its box, so it must not sit over the region chips */
.world-map{pointer-events:none}
.world-map .mk{pointer-events:auto}
.world-map .mk-lead{stroke:var(--mc);stroke-width:.42;opacity:0;fill:none;transition:opacity .35s}
.world-stage[data-only="gulf"] .mk[data-r="gulf"] .mk-lead,.world-stage[data-only="casia"] .mk[data-r="casia"] .mk-lead,
.world-stage[data-only="sasia"] .mk[data-r="sasia"] .mk-lead,.world-stage[data-only="seasia"] .mk[data-r="seasia"] .mk-lead,
.world-stage[data-only="africa"] .mk[data-r="africa"] .mk-lead,.world-stage[data-only="europe"] .mk[data-r="europe"] .mk-lead,.world-stage[data-only="cauc"] .mk[data-r="cauc"] .mk-lead,.world-stage[data-only="americas"] .mk[data-r="americas"] .mk-lead{opacity:.4;transition-delay:calc(.2s + var(--i) * .03s)}
.world-stage[data-only] .land{opacity:.46}
@media (max-width:760px){ .world-map .mk-t{font-size:7.4px} .world-map .mk-lead{stroke-width:.6} }
/* every market carries a soft glow at rest; the chosen region's glow comes up and breathes */
.world-map .land{opacity:.62}
.mk-glow{opacity:.34}
.world-stage[data-only] .mk[data-r] .mk-glow{opacity:.1}
/* ================= pass 17: section two signs, still bento, soft particle field ================= */
/* --- the sign sits centred on the card and the card glows in its own colour --- */
/* .who-sym is a sibling of .who-pic now, so the drift on the photograph no longer carries it.
It centres on the portrait area, clear of the label block at the foot of the card. */
.who-sym{position:absolute;inset:0 0 30% 0;display:grid;place-items:center;z-index:5;pointer-events:none;
opacity:0;transform:scale(.9);transition:opacity .5s var(--ease),transform .7s var(--spring)}
.who-sym svg{width:clamp(76px,26%,128px);height:auto;color:var(--sym,#0B0C0F);
filter:drop-shadow(0 10px 26px color-mix(in srgb,var(--sym,#0B0C0F) 26%,transparent))}
.who-card:hover .who-sym,.who-card.is-on .who-sym{opacity:1;transform:none}
/* a bloom of the card's own colour behind the sign: the light in the card, not a border */
.who-halo{position:absolute;inset:0 0 22% 0;z-index:4;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
background:radial-gradient(38% 34% at 50% 50%,color-mix(in srgb,var(--sym,#fff) 30%,transparent),transparent 72%)}
.who-card:hover .who-halo,.who-card.is-on .who-halo{opacity:1}
/* every hover accent is the card's colour. The green pass had hard-coded the lift, the arrow
and the shop line, so all three cards lit up green whichever one you were on. */
.who-card:hover,.who-card.is-on{border-color:transparent;
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
0 2px 10px -2px color-mix(in srgb,var(--sym,#0B0C0F) 18%,transparent),
0 44px 76px -38px color-mix(in srgb,var(--sym,#0B0C0F) 52%,transparent)}
.who-card:hover .arrow,.who-card.is-on .arrow{background:var(--sym,#0B0C0F);border-color:transparent;color:#fff}
.who-card .who-label em{color:var(--sym,#0B0C0F)}
.who-card:hover .who-img,.who-card.is-on .who-img{opacity:.42;transform:scale(1.03)}
@media (hover:none){ .who-sym{opacity:.92;transform:none} .who-halo{opacity:.85} .who-card .who-img{opacity:.55} }
@media (prefers-reduced-motion:reduce){ .who-sym{transition:opacity .2s;transform:none} }
/* --- the plant bento holds still --- */
/* pass 12b gave every bento tile a bubble-and-bob loop. On the finder tiles that suited the
product art; on photographs of the plant it read as a wobble, so the trust grid opts out. */
.trust-bento .tile .tile-art,.trust-bento .tile .tile-txt,.trust-bento .tile .tile-art img,
.trust-bento .tile:hover .tile-art img{animation:none}
.trust-bento .tile .tile-art img{transform:scale(1.03);transition:transform 1.4s var(--ease)}
.trust-bento .tile:hover .tile-art img{transform:scale(1.08)}
/* --- the hero particle field: more discs, softer, leaning towards the cursor --- */
/* wide feathered stops instead of a blur filter: twelve blurred layers would cost a repaint each,
and a gradient this soft is already indistinguishable from one. */
.hero-orbs i{background:radial-gradient(closest-side,
rgba(var(--c,255,110,20),.40),
rgba(var(--c,255,110,20),.22) 34%,
rgba(var(--c,255,110,20),.09) 58%,
rgba(var(--c,255,110,20),.03) 76%,
transparent 88%);
opacity:.72;
translate:calc(var(--mx,0px) * var(--k,1)) calc(var(--my,0px) * var(--k,1));
transition:translate 1.5s cubic-bezier(.22,.61,.36,1)}
/* --k is depth: the big discs at the back barely move, the small ones at the front lead */
.hero-orbs i:nth-child(1){--s:58vmin;--x:-12%;--y:4%;--t:19s;--d:-3s;--k:.28}
.hero-orbs i:nth-child(2){--s:44vmin;--x:60%;--y:-12%;--t:23s;--d:-9s;--k:.44}
.hero-orbs i:nth-child(3){--s:36vmin;--x:76%;--y:44%;--t:17s;--d:-5s;--k:.66}
.hero-orbs i:nth-child(4){--s:50vmin;--x:10%;--y:56%;--t:25s;--d:-13s;--k:.34}
.hero-orbs i:nth-child(5){--s:26vmin;--x:44%;--y:64%;--t:15s;--d:-1s;--k:.92}
.hero-orbs i:nth-child(6){--s:32vmin;--x:34%;--y:-8%;--t:21s;--d:-7s;--k:.58}
.hero-orbs i:nth-child(7){--s:22vmin;--x:8%;--y:30%;--t:14s;--d:-11s;--k:1.05}
.hero-orbs i:nth-child(8){--s:40vmin;--x:52%;--y:22%;--t:27s;--d:-17s;--k:.40}
.hero-orbs i:nth-child(9){--s:18vmin;--x:86%;--y:12%;--t:13s;--d:-4s;--k:1.2}
.hero-orbs i:nth-child(10){--s:30vmin;--x:66%;--y:70%;--t:20s;--d:-15s;--k:.72}
.hero-orbs i:nth-child(11){--s:24vmin;--x:22%;--y:78%;--t:16s;--d:-6s;--k:.86}
.hero-orbs i:nth-child(12){--s:46vmin;--x:28%;--y:18%;--t:29s;--d:-21s;--k:.22}
@keyframes orb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vw,-4vh,0) scale(1.14)}}
/* a phone gets the six original discs, no lean, no blend: the field is decoration, not content */
@media (max-width:760px){
.hero-orbs i{opacity:.6;translate:none;transition:none}
.hero-orbs i:nth-child(n+7){display:none}
}
@media (prefers-reduced-motion:reduce){ .hero-orbs i{animation:none;transition:none;translate:none} }
/* ================= pass 18: hero ================= */
/* --- the idle is a clip that plays, not a seek per frame --- */
/* #heroIdle shares .hero-v so it sits, scales and blends exactly like the scrubbed film. Only one of
the two is visible at a time; the hand-off is a short cross-fade between two matching frames. */
.hero-idle{opacity:0;transition:opacity .32s var(--ease)}
#heroV{transition:opacity .32s var(--ease)}
.hero.idling .hero-idle{opacity:1}
.hero.idling #heroV{opacity:0}
/* --- a halo of the phase colour around the product --- */
/* Above the film, as a ring with a clear centre: the film is screen-blended, so any light laid
under the product would bleed into the metal (that was the transparency bug). Around it, above
it, the light reads as the product glowing. --gl comes from the phase table, strongest on silver. */
.hero-glow{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;width:min(78vw,1080px);aspect-ratio:1.55;
transform:translate(calc(-50% + var(--tx,0vw)),calc(-50% + var(--ty,6vh)));will-change:transform;
background:radial-gradient(50% 50% at 50% 50%,transparent 24%,rgba(var(--c,255,110,20),calc(var(--gl,.3) * .55)) 40%,rgba(var(--c,255,110,20),calc(var(--gl,.3) * .18)) 56%,transparent 72%);
opacity:.9;animation:glowbreathe 6.5s ease-in-out infinite;mix-blend-mode:screen}
@keyframes glowbreathe{0%,100%{opacity:.72}50%{opacity:1}}
@media (max-width:760px){ .hero-glow{width:120vw} }
@media (prefers-reduced-motion:reduce){ .hero-glow{animation:none} }
/* --- the calls to action --- */
.hch .acts .btn-s{height:46px;padding:0 22px;font-size:15px}
@media (max-width:860px){ .hch .acts .btn-s{height:42px;padding:0 18px;font-size:14px} }
/* the white button on the Camzid chapter keeps the same moving sheen as the green ones, in white */
.hch[data-k="camzid-tablets"] .btn-a{background:linear-gradient(115deg,#E6EFEA 0%,#FFFFFF 40%,#F4FAF6 50%,#FFFFFF 60%,#E6EFEA 100%);background-size:220% 100%;background-position:100% 0;
color:var(--g-ink);animation:sheen 6s ease-in-out infinite;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 30px -12px rgba(0,0,0,.45)}
.hch[data-k="camzid-tablets"] .btn-a:hover{background-position:0% 0;box-shadow:0 1px 0 #fff inset,0 0 0 4px rgba(255,255,255,.16),0 22px 40px -14px rgba(0,0,0,.5)}
/* --- more discs, floating slower --- */
.hero-orbs i:nth-child(1){--t:31s} .hero-orbs i:nth-child(2){--t:37s} .hero-orbs i:nth-child(3){--t:28s} .hero-orbs i:nth-child(4){--t:40s}
.hero-orbs i:nth-child(5){--t:25s} .hero-orbs i:nth-child(6){--t:34s} .hero-orbs i:nth-child(7){--t:23s} .hero-orbs i:nth-child(8){--t:43s}
.hero-orbs i:nth-child(9){--t:22s} .hero-orbs i:nth-child(10){--t:33s} .hero-orbs i:nth-child(11){--t:27s} .hero-orbs i:nth-child(12){--t:46s}
.hero-orbs i:nth-child(13){--s:34vmin;--x:-4%;--y:40%;--t:38s;--d:-19s;--k:.5}
.hero-orbs i:nth-child(14){--s:20vmin;--x:58%;--y:46%;--t:26s;--d:-8s;--k:1.0}
.hero-orbs i:nth-child(15){--s:42vmin;--x:82%;--y:-14%;--t:44s;--d:-23s;--k:.3}
.hero-orbs i:nth-child(16){--s:26vmin;--x:40%;--y:84%;--t:30s;--d:-12s;--k:.8}
@keyframes orb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,-3.5vh,0) scale(1.1)}}
@media (max-width:760px){ .hero-orbs i:nth-child(n+7){display:none} }
/* ================= pass 18b: section two ================= */
/* the heading ran green into ink at both ends, which read as black. Rich green to bright green. */
.h-xl.help span{background:linear-gradient(90deg,#146B43,#1E8A57,#2FA86E,#3DBF80,#2FA86E,#1E8A57,#146B43);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
/* the portraits are reframed at bake time now (tools/bake_portraits.py), so no per-card offsets */
.who-card[data-key=men] .who-img,.who-card[data-key=women] .who-img,.who-card[data-key=children] .who-img{top:0;bottom:0;object-position:50% 0}
/* ================= pass 18c: finder grid and the nav ================= */
/* nine tiles of one size. The 2x2 Bones tile was the odd one out and the client asked for a set. */
.bento.finder-bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(300px,auto)}
.finder-bento .tile.big{grid-column:auto;grid-row:auto;min-height:0}
.finder-bento .tile.big .tile-art{inset:4% 4% 36% 4%}
.finder-bento .tile .tile-txt b,.finder-bento .tile.big .tile-txt b{font-size:20px}
@media (max-width:600px){ .finder-bento .tile .tile-txt b,.finder-bento .tile.big .tile-txt b{font-size:17px} }
.finder-bento .tile-art img{object-position:50% 50%}
@media (max-width:1000px){ .bento.finder-bento{grid-auto-rows:minmax(260px,auto)} .finder-bento .tile.big{grid-column:auto;grid-row:auto;min-height:0} }
@media (max-width:600px){ .bento.finder-bento{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(180px,auto)} .finder-bento .tile.big{grid-column:auto;min-height:0} .finder-bento .tile-txt b{font-size:17px} }
/* the nav gets thinner as it compacts, not only narrower, so less of the page passes under it;
every dimension that changes is on the transition list, so it eases rather than snaps */
.nav{transition:width .55s var(--ease),height .45s var(--ease),background .5s var(--ease),top .45s var(--ease),color .4s,border-color .4s,box-shadow .5s,padding .45s var(--ease)}
.nav.compact{height:52px;padding:0 8px 0 12px}
.nav .brand svg,.nav .brand span{transition:transform .45s var(--ease),font-size .45s var(--ease)}
.nav.compact .brand svg{transform:scale(.88)}
.nav.compact .brand span{font-size:15px}
.nav .nav-links a,.nav .nav-why{transition:color .3s,font-size .45s var(--ease),padding .45s var(--ease)}
.nav.compact .nav-links a{font-size:13.5px;padding:7px 12px}
.nav.compact .nav-why{font-size:13.5px}
.nav .icon-btn{transition:background .25s,transform .35s var(--spring),width .45s var(--ease),height .45s var(--ease)}
.nav.compact .icon-btn{width:36px;height:36px}
@media (max-width:860px){ .nav.compact{height:50px} }
/* ================= pass 18d: advert ================= */
/* the figure clips its picture on every browser: Safari will not clip a transformed child to a
rounded overflow:hidden box without its own compositing context, which is where the square
corners at the top came from. Straight box, one slow dissolve with a settle. */
.ad-fig,.ad-slide .ad-fig,.ad-slide.on .ad-fig,.ad-slide.out .ad-fig{border-radius:30px;isolation:isolate;transform:translateZ(0);
-webkit-mask-image:-webkit-radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}
.ad-fig img,.ad-fig figcaption{border-radius:inherit}
.ad-slide .ad-fig{opacity:0;transform:translateZ(0) scale(1.025)}
.ad-slide.on .ad-fig{opacity:1;transform:translateZ(0) scale(1)}
.ad-slide.out .ad-fig{opacity:0;transform:translateZ(0) scale(.99)}
.ad-slide{transition:opacity 1.1s var(--ease)}
.ad-slide .ad-fig,.ad-slide.on .ad-fig,.ad-slide.out .ad-fig{transition:transform 1.5s cubic-bezier(.22,1,.36,1),opacity 1.05s var(--ease)}
.ad-slide .ad-fig img,.ad-slide.on .ad-fig img{transition:transform 1.5s cubic-bezier(.22,1,.36,1)}
.ad-slide .ad-copy>*{transition:opacity .8s var(--ease),transform .9s cubic-bezier(.22,1,.36,1)}
.ad-slide.on .ad-copy>*:nth-child(1){transition-delay:.22s}.ad-slide.on .ad-copy>*:nth-child(2){transition-delay:.3s}.ad-slide.on .ad-copy>*:nth-child(3){transition-delay:.38s}.ad-slide.on .ad-copy>*:nth-child(4){transition-delay:.46s}
@media (prefers-reduced-motion:reduce){ .ad-slide .ad-fig,.ad-slide.on .ad-fig{transition:opacity .3s;transform:none} }
/* ================= pass 18e: the rail cards carry no chip ================= */
.rail .pcard.glass .badge{display:none}
/* ================= pass 18f: product cards ================= */
/* the render sits in the exact centre of its tile: no bottom margin, no lift at rest */
.pcard .stage-tile{display:grid;place-items:center}
.pcard .pill{margin:0;width:76%}
.pcard.glass .pill{width:74%}
/* the light behind every product at half strength: the stage spot, the colour bloom and the floor wash */
.stage-tile{background:radial-gradient(80% 70% at 50% 40%,#13151B,#090A0D 72%)}
.pill::before{opacity:.14}
.pill:hover::before{opacity:.26}
.stage-tile::after{background:radial-gradient(60% 40% at 50% 100%,color-mix(in srgb,var(--c,#F5A623) 11%,transparent),transparent 70%)}
.pill-img{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 54%,transparent 74%);mask-image:radial-gradient(circle at 50% 50%,#000 54%,transparent 74%)}
/* ================= pass 18g: the plant bento, icons move and photographs do not ================= */
.trust-bento .tile:not(.photo) .tile-art img{animation:bob 6s ease-in-out infinite;animation-delay:calc(var(--d,1) * -1.3s);transform-origin:50% 80%;transition:none}
.trust-bento .tile:not(.photo):hover .tile-art img{animation:pop .7s var(--spring) forwards}
@media (prefers-reduced-motion:reduce){ .trust-bento .tile:not(.photo) .tile-art img{animation:none} }
/* ================= pass 19: the product composites with a real alpha channel ================= */
/* The film was laid over the wash with mix-blend-mode:screen, which is how its black background
dropped out. Screen is result = V + B(1-V): every tone short of white lets the backdrop through
in proportion to how dark it is, so the capsule's shadowed cap — luma 0.02 in the film — showed
the wash straight through and read as glass. Measured on the shipped page, +0.219 of blue in
that cap. The product now carries a matte (tools/hero_matte.py) and #heroCv rebuilds the alpha
on the GPU, so it composites normally: opaque where the product is, nothing where it is not.
The two videos stay in the layout at zero opacity because they are the canvas's only source and
a browser will not decode a video it has removed from the page. */
/* the canvas carries .hero-v so every geometry pass that positions the film positions it too
(pass 14 sizes the element to the picture rather than the stage); only what must differ is set
here, and object-fit letterboxes the 1024x576 backing store exactly as the video was */
.hero-cv{object-fit:contain;pointer-events:none;display:none;mix-blend-mode:normal}
.hero.composited .hero-cv{display:block}
.hero.composited #heroV,.hero.composited #heroIdle{opacity:0!important;mix-blend-mode:normal;z-index:0;transition:none}
.hero.composited .hero-poster{mix-blend-mode:normal}
/* the halo sits behind the product now that the product is opaque and occludes it, so it reads as
light spilling from behind the pill rather than a ring drawn over it */
.hero.composited .hero-glow{z-index:0;mix-blend-mode:screen;
background:radial-gradient(50% 50% at 50% 50%,rgba(var(--c,255,110,20),calc(var(--gl,.3) * .85)),rgba(var(--c,255,110,20),calc(var(--gl,.3) * .30)) 38%,rgba(var(--c,255,110,20),calc(var(--gl,.3) * .08)) 58%,transparent 74%)}
/* with a real alpha the stage under the product no longer has to be black, so the blue can be the
lighter one the client asked for and the pool is only there for depth */
.hero-wash{background:
radial-gradient(64% 56% at 55% 48%,rgba(0,0,0,calc(var(--pool,.4) * .42)),rgba(0,0,0,calc(var(--pool,.4) * .18)) 50%,transparent 78%),
radial-gradient(85% 65% at 50% 106%,rgba(var(--c),.92),transparent 70%),
linear-gradient(180deg,rgba(var(--c),.16) 0%,rgba(var(--c),.52) 58%,rgba(var(--c),.82) 100%),var(--g);
transform:translateZ(0)}
/* ================= pass 19b: footer credit ================= */
.foot .bot .built{opacity:.72}
@media (max-width:760px){ .foot .bot{flex-wrap:wrap;row-gap:6px} }
/* ================= pass 19c: the wash is three layers that cross-fade ================= */
/* One layer whose gradient colours were animated meant re-rasterising the whole viewport on every
scrolled frame that moved the phase colour — the hero's biggest per-frame cost. Three fixed
layers cross-faded on opacity composite on the GPU and never repaint. */
.hero-wash{background:none!important;contain:strict}
.wsh{position:absolute;inset:0;will-change:opacity;transform:translateZ(0)}
.wsh::after{content:"";position:absolute;inset:0;background:inherit}
.w-a{background:
radial-gradient(64% 56% at 55% 48%,rgba(0,0,0,.17),rgba(0,0,0,.07) 50%,transparent 78%),
radial-gradient(85% 65% at 50% 106%,rgba(255,110,20,.92),transparent 70%),
linear-gradient(180deg,rgba(255,110,20,.16) 0%,rgba(255,110,20,.52) 58%,rgba(255,110,20,.82) 100%),#2A0A02}
/* the blue is the lighter one the client asked for (nudged up once more in round 20). The silver
film is now high-key, so the stage under the capsule needs only a soft pool, not a black crush */
.w-s{background:
radial-gradient(64% 56% at 55% 48%,rgba(0,0,0,.30),rgba(0,0,0,.13) 50%,transparent 78%),
radial-gradient(85% 65% at 50% 106%,rgba(118,158,232,.92),transparent 70%),
linear-gradient(180deg,rgba(118,158,232,.16) 0%,rgba(118,158,232,.52) 58%,rgba(118,158,232,.82) 100%),#1A2C55}
.w-g{background:
radial-gradient(64% 56% at 55% 48%,rgba(0,0,0,.24),rgba(0,0,0,.10) 50%,transparent 78%),
radial-gradient(85% 65% at 50% 106%,rgba(34,168,104,.92),transparent 70%),
linear-gradient(180deg,rgba(34,168,104,.16) 0%,rgba(34,168,104,.52) 58%,rgba(34,168,104,.82) 100%),#04231A}
.hero,.hero-stage{background:#1A2C55}
/* ================= pass 19d: fewer promoted layers in the hero ================= */
/* sixteen discs each asking for their own composited layer is a lot of texture memory for
decoration; the animation already promotes the ones that move, so the hint comes off */
.hero-orbs i{will-change:auto}
.hero.composited #heroV,.hero.composited #heroIdle{will-change:auto;contain:none}
/* ================= pass 19e: the phone hero clears its own copy ================= */
/* The product's bright body cleared the headline by 2px, but a capsule's shadowed cap is still the
capsule: it reached about 70px into the copy block and the text sat on the metal. The picture is
a little smaller and sits higher on a phone, which clears the copy and still clears the nav. */
/* the phone rule had been translating Y only. The element is positioned left:50%, so without the
matching -50% on X its centre sat on the right edge of the screen and only a big scale dragged
the product back into view — which is why shrinking it pushed the capsule off to the right. */
@media (max-width:860px){
.hero-v,.hero-poster,.hero-cv{--hm:1.62}
.hero-v,.hero-poster,.hero-cv{transform:translate(-50%,calc(-50% + var(--ty,6vh) - 15vh)) scale(calc(var(--hs,1) * var(--hm,1)))}
}
@media (max-width:760px){ .hero-v,.hero-poster,.hero-cv{--hm:1.62} }
/* round 22: the film is a sequence of cut-out stills drawn into the canvas. The product carries its
own alpha, so it needs neither the screen blend nor the radial feather that faded its edges, and
the two video elements are not loaded at all */
.hero.seq .hero-cv{-webkit-mask-image:none;mask-image:none;mix-blend-mode:normal}
.hero.seq #heroV,.hero.seq #heroIdle{display:none}
/* round 23: the export map section is shorter and the map sits inside the content width; the
land dots are lifted so the continents read against the green instead of vanishing into it */
.world{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(36px,4vw,56px)}
.world-head{margin-bottom:clamp(28px,4vw,48px)}
.world-stage{max-width:960px;margin-bottom:clamp(28px,4vw,48px)}
.world-map .land{stroke:rgba(158,231,184,.58);stroke-width:2.4}
.world-map{-webkit-mask-image:radial-gradient(ellipse 62% 72% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 62% 72% at 50% 50%,#000 58%,transparent 100%)}
.world-map svg{height:min(50vh,470px)}
@media (max-width:760px){ .world-map svg{height:auto} .world-map{-webkit-mask-image:none;mask-image:none} }
/* round 24: a shorter export section and larger country labels */
.world{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(28px,3vw,44px)}
.world-head{margin-bottom:clamp(12px,2vw,24px)}
.world-head .h-l{margin:10px 0 12px}
.world-stage{margin-bottom:clamp(16px,2vw,28px)}
.world-map svg{height:min(40vh,380px)}
.world-legend{margin-top:14px}
.world-map .mk-t{font-size:9.5px;font-weight:600;stroke-width:2.2px}
@media (max-width:760px){ .world-map .mk-t{font-size:10px} }
/* round 25: Why Paramount rebuilt around the plant photography; the export section given air */
.about-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-bottom:clamp(56px,8vw,110px)}
.about-stats{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(18px,3vw,40px);margin-top:32px}
.about-stats b{display:block;font-size:clamp(26px,2.6vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1}
.about-stats span{display:block;margin-top:6px;font-size:13.5px;color:var(--mut)}
.about-fig{margin:0;border-radius:24px;overflow:hidden;background:var(--sur);aspect-ratio:4/3}
.about-fig img{width:100%;height:100%;object-fit:cover;display:block}
.about-fig.small{aspect-ratio:1/1;border-radius:18px;position:relative}
.about-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:14px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.about-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-bottom:clamp(56px,8vw,110px)}
.about-row.flip{align-items:start}
.about-row .prose{max-width:none}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-bottom:clamp(56px,8vw,110px)}
@media (max-width:860px){ .about-hero,.about-row,.about-grid{grid-template-columns:1fr} .about-stats{grid-template-columns:1fr 1fr} .about-fig{aspect-ratio:16/10} .about-row.flip .prose{order:0} }
.world{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(56px,7vw,96px)}
.world-head{margin-bottom:clamp(28px,4vw,52px);max-width:640px}
.world-head .lede{font-size:17px}
.world-stage{max-width:1040px;margin-bottom:clamp(36px,5vw,64px)}
.world-map svg{height:min(46vh,440px)}
.world-legend{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.world .dist-band{margin-top:clamp(40px,6vw,80px);max-width:1040px;margin-left:auto;margin-right:auto}
.world{padding-top:calc(var(--top,88px) + clamp(48px,6vw,88px));padding-bottom:clamp(64px,8vw,110px)}
.world-head{margin-bottom:clamp(40px,5vw,64px)}
.world-stage{max-width:980px}
.world-map svg{height:min(44vh,420px)}
.world-legend{margin-top:30px}
.world-stage{max-width:1280px}
.world-map svg{height:min(66vh,640px)}
.world-map{-webkit-mask-image:radial-gradient(ellipse 70% 78% at 50% 50%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 70% 78% at 50% 50%,#000 64%,transparent 100%)}
.world .dist-band{max-width:1280px}
/* round 26: title, map and legend form one screen, so nothing in it needs an extra scroll to
see. The map takes whatever height is left after the nav, the title and the legend. */
.world{padding-top:0;padding-bottom:clamp(56px,7vw,96px)}
.world-screen{min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;
padding-top:calc(var(--top,88px) + 8px);padding-bottom:clamp(16px,2.5vh,32px)}
.world-head{margin-bottom:clamp(8px,1.5vh,18px)}
.world-head .h-l{margin:0}
.world-stage{max-width:1280px;margin-bottom:0}
.world-map svg{height:calc(100svh - var(--top,88px) - clamp(150px,20vh,210px) - 110px);min-height:260px;max-height:680px}
.world-legend{margin-top:clamp(10px,1.6vh,20px)}
.world .dist-band{margin-top:clamp(24px,4vw,56px)}
@media (max-width:760px){ .world-screen{min-height:0} .world-map svg{height:auto;min-height:0} }
/* round 27: the dot map fades out in an oval, so it never shows the straight edges of its frame */
.world-map{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,rgba(0,0,0,.5) 78%,transparent 100%);
mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,rgba(0,0,0,.5) 78%,transparent 100%)}
@media (max-width:760px){ .world-map{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)} }
.world-map{-webkit-mask-image:radial-gradient(ellipse 58% 60% at 50% 50%,#000 74%,rgba(0,0,0,.45) 90%,transparent 100%);
mask-image:radial-gradient(ellipse 58% 60% at 50% 50%,#000 74%,rgba(0,0,0,.45) 90%,transparent 100%)}
/* round 28: the product page shows the render plainly. The circular fade mask and the blurred colour
halo behind the pill combined into a glowing ring around the picture; both are off here, and the
stage is a flat, even dark so the product's own edge is the only edge */
.pdp-stage .pill::before{display:none}
.pdp-stage .pill-img{-webkit-mask-image:none;mask-image:none;mix-blend-mode:normal;filter:drop-shadow(0 24px 36px rgba(0,0,0,.45))}
.pdp-stage .stage-tile{background:#0B0D11}
.pdp-stage .stage-tile::after{display:none}
/* round 29: the film runs at 24 stills a second and the hero is taller, so one notch of the wheel
moves a handful of frames instead of a leap; the scroll glide is longer to match */
.hero{height:420vh}
@media (max-width:760px){ .hero{height:360vh} }
@media (prefers-reduced-motion:reduce){ .hero{height:100vh} }
/* round 29: three screens of scroll for the three products, not four and a bit */
.hero{height:300vh}
@media (max-width:760px){ .hero{height:260vh} }
/* round 30: a cheaper hero to draw. The bokeh discs no longer screen-blend (twelve blend layers
over a changing canvas made the compositor re-read the screen every frame); at their opacity the
plain discs look the same. The lite class, set by the page's own frame-rate check, removes the
drifting layers and the blur behind the nav while the hero is on screen. */
.hero .bokeh i{mix-blend-mode:normal;opacity:.55}
.hero.lite .bokeh,.hero.lite .hero-orbs,.hero.lite .hero-grain{display:none}
.hero.lite ~ .nav,body:has(.hero.lite) .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,10,12,.82)}
body:has(.hero.lite) .nav.on-light{background:rgba(255,255,255,.94)}
/* round 31: the poster cross-fades into the film instead of vanishing */
.hero-poster{transition:opacity .6s ease}
/* round 32: nav text was unreadable on scroll in lite mode (dark text on the forced-dark glass),
and on phones the who-card signs showed in the resting state. Light sections always get a
light nav, whatever mode the hero is in; on touch the sign and halo only appear on a press. */
.nav.on-light{color:#0B0C0F!important}
.nav.on-light .nav-links a,.nav.on-light .nav-why,.nav.on-light .icon-btn,.nav.on-light .brand{color:#0B0C0F}
.nav:not(.on-light){color:#F4F5F7}
@media (hover:none){
.who-sym{opacity:0;transform:scale(.9)} .who-halo{opacity:0} .who-card .who-img{opacity:.92}
.who-card.is-on .who-sym{opacity:1;transform:none} .who-card.is-on .who-halo{opacity:1} .who-card.is-on .who-img{opacity:.42}
}