/* ==========================================================================
   VOCCEL — shared design system (Design Lab + Product Lab)
   Type: Melodrama (headlines) · Satoshi (text) · Array (lab readouts)
   Color: #ECECEC paper · #141414 ink · #174A43 forest · #FF5400 fire (tiny details only)
   ========================================================================== */

@font-face{font-family:"Melodrama";src:url("../fonts/Melodrama-Variable.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Variable.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-VariableItalic.woff2") format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:"Array";src:url("../fonts/Array-Semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Array";src:url("../fonts/Array-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#ECECEC;
  --paper-2:#E2E4E3;
  --panel:#F5F5F4;
  --ink:#141414;
  --ink-2:#4A504E;
  --ink-3:#7B817F;
  --rule:rgba(20,20,20,.16);
  --rule-2:rgba(20,20,20,.08);
  --forest:#174A43;
  --forest-deep:#0E2F2A;
  --forest-ink:#EAF0EE;
  --forest-2:#A9C3BC;
  --forest-line:rgba(234,240,238,.2);
  --forest-tint:#D5E1DE;
  --leaf:#174A43;
  --amber:#B7791F;
  --red:#B42318;
  /* fire orange: the one spark of colour. Dots, cursor, NEW, sound on, errors, money numbers. Never large areas. */
  --fire:#FF5400;

  --f-display:"Melodrama","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Satoshi","Helvetica Neue",Arial,sans-serif;
  --f-dot:"Array","Courier New",ui-monospace,monospace;

  --gutter:clamp(16px,3.2vw,48px);
  --gap:clamp(14px,1.6vw,24px);
  --sec:clamp(88px,11vw,176px);
  --hdr:72px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.76,0,.24,1);

  /* surface defaults (light) */
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --fg-3:var(--ink-3);
  --line:var(--rule);
  --line-2:var(--rule-2);
  --accent:var(--leaf);
  --on-accent:var(--forest-ink);
  --ph-bg:var(--paper-2);
  color-scheme:light;
}

/* dark surfaces: forest */
.s-forest,.s-deep{
  --bg:var(--forest);
  --fg:var(--forest-ink);
  --fg-2:var(--forest-2);
  --fg-3:#7FA39A;
  --line:var(--forest-line);
  --line-2:rgba(234,240,238,.1);
  --accent:var(--forest-ink);
  --on-accent:var(--forest);
  --ph-bg:rgba(234,240,238,.06);
  background:var(--bg);color:var(--fg);
}
.s-deep{--bg:var(--forest-deep)}
.s-paper{background:var(--bg);color:var(--fg)}
/* light sections are always the same grey: no white bands between sections */
.s-panel{--bg:var(--paper);background:var(--bg);color:var(--fg)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:inherit}
figure{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--forest);color:var(--forest-ink)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:1000;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:4px}
.skip:focus{top:12px}

.wrap{padding-inline:var(--gutter);max-width:1720px;margin-inline:auto}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(56px,7vw,104px)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}

/* ---------- type ---------- */
.d-xxl,.d-xl,.d-l,.d-m,.d-s{font-family:var(--f-display);font-weight:500;text-wrap:balance;letter-spacing:-.02em}
.d-xxl{font-size:clamp(60px,12.4vw,204px);line-height:.84;letter-spacing:-.03em}
.d-xl{font-size:clamp(46px,7.4vw,120px);line-height:.9}
.d-l{font-size:clamp(34px,4.2vw,64px);line-height:.96}
.d-m{font-size:clamp(26px,2.5vw,38px);line-height:1.02;letter-spacing:-.01em}
.d-s{font-size:clamp(22px,1.8vw,27px);line-height:1.08;letter-spacing:-.005em}
.d-xxl em,.d-xl em,.d-l em,.d-m em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(18px,1.45vw,22px);line-height:1.45;color:var(--fg-2);max-width:46ch;text-wrap:pretty}
.body-l{font-size:19px;line-height:1.5;max-width:58ch;text-wrap:pretty}
.muted{color:var(--fg-2)}
.small{font-size:14px;line-height:1.5;color:var(--fg-2)}
.label{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.dot{font-family:var(--f-dot);font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1}
.ph-val{padding:0 .2em;border:1px dashed currentColor;border-radius:3px;opacity:.9;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* section head: label strip */
.strip{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:clamp(36px,5vw,72px);color:var(--fg-2)}
.strip .label{color:var(--fg)}
.strip__r{margin-left:auto;text-align:right}
.strip__mark{width:14px;height:10px;flex:none;color:var(--accent)}

/* ---------- buttons ---------- */
.btn{--b-bg:var(--fg);--b-fg:var(--bg);position:relative;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 24px;border-radius:999px;background:var(--b-bg);color:var(--b-fg);font-weight:600;font-size:15px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--on-accent)}
.s-forest .btn:hover,.s-deep .btn:hover{color:var(--forest)}
.btn__arr{display:inline-grid;place-items:center;width:22px;height:22px;overflow:hidden;position:relative}
.btn__arr svg{width:14px;height:14px;transition:transform .5s var(--ease)}
.btn__arr svg+svg{position:absolute;transform:translateX(-160%)}
.btn:hover .btn__arr svg:first-child{transform:translateX(160%)}
.btn:hover .btn__arr svg+svg{transform:translateX(0)}
.btn--ghost{--b-bg:transparent;--b-fg:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{color:var(--on-accent)}
.btn--forest{--b-bg:var(--forest);--b-fg:var(--forest-ink)}
.btn--forest::before{background:var(--ink)}
.btn--forest:hover{color:var(--paper)}
.s-forest .btn--light,.s-deep .btn--light{--b-bg:var(--forest-ink);--b-fg:var(--forest)}
.s-forest .btn--light::before,.s-deep .btn--light::before{background:var(--ink)}
.s-forest .btn--light:hover,.s-deep .btn--light:hover{color:var(--paper)}
.btn--sm{height:40px;padding:0 16px 0 18px;font-size:14px;gap:8px}
.btn__price{font-family:var(--f-dot);font-size:13px;padding-left:12px;margin-left:2px;border-left:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.link-u{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:600}
.link-u::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform .5s var(--ease)}
.link-u:hover::after{transform-origin:left;animation:uline .7s var(--ease)}
@keyframes uline{0%{transform:scaleX(1);transform-origin:right}49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.reassure{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:14px;color:var(--fg-2)}
.reassure span{display:inline-flex;align-items:center;gap:8px}
.reassure span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fire)}
.btn:active,.pill-lab:active,.stack__ctrl button:active{transform:scale(.96);transition-duration:.12s}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:env(safe-area-inset-top,0px);color:var(--ink);transition:transform .6s var(--ease),color .35s ease}
.hdr.is-hidden{transform:translateY(-110%)}
.hdr.on-dark{color:var(--forest-ink)}
.hdr::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .35s ease,background .35s ease;border-bottom:1px solid var(--rule-2)}
.hdr.is-scrolled::before{opacity:1}
.hdr.on-dark::before{background:color-mix(in srgb,var(--forest-deep) 80%,transparent);border-bottom-color:rgba(234,240,238,.08)}
.hdr__in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hdr);padding-inline:var(--gutter);max-width:1720px;margin-inline:auto}
.hdr__menu{display:inline-flex;align-items:center;gap:12px;justify-self:start;height:44px;font-size:14px;font-weight:600}
.burger{position:relative;width:34px;height:12px}
.burger i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--ease),width .5s var(--ease)}
.burger i:first-child{top:0}
.burger i:last-child{bottom:0;right:10px}
.hdr__menu:hover .burger i:last-child{right:0}
.menu-open .burger i:first-child{transform:translateY(5.25px) rotate(20deg)}
.menu-open .burger i:last-child{right:0;transform:translateY(-5.25px) rotate(-20deg)}
.hdr__logo{display:inline-flex;align-items:center;gap:12px}
.hdr__logo .wm{height:17px;width:auto}
.hdr__sub{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding-left:12px;border-left:1px solid color-mix(in srgb,currentColor 40%,transparent);line-height:1.1;white-space:nowrap}
.hdr__right{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.hdr .btn{background:var(--ink);color:var(--paper);transition:background .35s ease,color .35s ease}
.hdr .btn::before{background:var(--forest)}
.hdr .btn:hover{color:var(--forest-ink)}
.hdr.on-dark .btn{background:var(--forest-ink);color:var(--forest-deep)}
.hdr.on-dark .btn::before{background:var(--paper)}
.hdr.on-dark .btn:hover{color:var(--forest-deep)}

.pill-lab{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 8px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 28%,transparent);font-size:14px;font-weight:600;white-space:nowrap;transition:box-shadow .3s ease,background .3s ease}
.pill-lab:hover{box-shadow:inset 0 0 0 1px currentColor}
.pill-lab__tag{display:inline-grid;place-items:center;height:26px;padding:0 9px;border-radius:999px;background:var(--fire);color:#fff;font-family:var(--f-dot);font-size:11px;letter-spacing:.04em}
.pill-lab__sub{font-weight:500;opacity:.65}

/* sound toggle */
.snd{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600}
.snd:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.snd__bars{display:flex;align-items:flex-end;gap:2px;height:14px}
.snd__bars i{width:2px;height:3px;background:currentColor;border-radius:1px;transition:height .3s ease}
.snd[aria-pressed="true"] .snd__bars i{animation:eq 1s ease-in-out infinite}
.snd[aria-pressed="true"] .snd__bars i:nth-child(2){animation-delay:-.3s}
.snd[aria-pressed="true"] .snd__bars i:nth-child(3){animation-delay:-.6s}
.snd[aria-pressed="true"] .snd__bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
.snd__state{font-family:var(--f-dot);font-size:11px;opacity:.7;transition:color .3s ease,opacity .3s ease}
.snd[aria-pressed="true"] .snd__bars i{background:var(--fire)}
.snd[aria-pressed="true"] .snd__state{color:var(--fire);opacity:1}

/* ---------- menu overlay ---------- */
/* One size rule for both labs: the type scales with the smaller of width and height,
   so seven lines always fit on a laptop, a desktop and a phone. */
.menu{--menu-fs:clamp(34px,min(5.4vw,7.2vh),84px);position:fixed;inset:0;z-index:55;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto;column-gap:var(--gap);row-gap:24px;padding:calc(var(--hdr) + env(safe-area-inset-top,0px) + 16px) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease-io),visibility 0s linear .8s;overflow-y:auto;overscroll-behavior:contain}
@supports (height:1svh){.menu{--menu-fs:clamp(34px,min(5.4vw,7.2svh),84px)}}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s var(--ease-io),visibility 0s}
.menu__nav{grid-column:1/9;grid-row:1;align-self:center}
.menu__info{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;padding-top:18px;border-top:1px solid var(--rule)}
.menu__side{grid-column:9/13;grid-row:1;align-self:center;display:flex;justify-content:flex-end}
.menu__side .ph{width:min(100%,300px)}
/* entrance: each line fades in out of a blur */
.menu__nav li{opacity:0;filter:blur(10px);transition:opacity .6s ease,filter .7s ease}
.menu-open .menu__nav li{opacity:1;filter:blur(0)}
.menu-open .menu__nav li:nth-child(1){transition-delay:.22s}
.menu-open .menu__nav li:nth-child(2){transition-delay:.27s}
.menu-open .menu__nav li:nth-child(3){transition-delay:.32s}
.menu-open .menu__nav li:nth-child(4){transition-delay:.37s}
.menu-open .menu__nav li:nth-child(5){transition-delay:.42s}
.menu-open .menu__nav li:nth-child(6){transition-delay:.47s}
.menu-open .menu__nav li:nth-child(7){transition-delay:.52s}
.menu__nav a{display:inline-flex;align-items:baseline;font-family:var(--f-display);font-weight:500;font-size:var(--menu-fs);line-height:1.04;letter-spacing:-.015em;padding-right:12px;transition:filter .45s ease,opacity .45s ease,color .3s ease}
/* hover: the line under the cursor stays sharp, the others blur */
.menu__nav ul:has(a:hover) a:not(:hover),.menu__nav ul:has(a:focus-visible) a:not(:focus-visible){filter:blur(3.5px);opacity:.5}
/* the arrow marks where you are */
.menu__nav a .arr{display:inline-block;width:0;overflow:hidden;white-space:nowrap;color:var(--fire);transition:width .55s var(--ease)}
.menu__nav a.is-current .arr{width:.92em}
.menu__nav .is-lab a{color:var(--leaf)}
.menu__nav .is-lab small{margin-left:16px;font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.02em;align-self:center;padding:5px 10px;border-radius:999px;background:var(--forest);color:var(--forest-ink);white-space:nowrap}

/* ---------- loader + veil ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--forest-deep);color:var(--forest-ink);display:grid;grid-template-rows:auto 1fr auto;padding:calc(24px + env(safe-area-inset-top,0px)) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease-io)}
.loader.is-done{clip-path:inset(0 0 100% 0)}
.no-loader .loader{display:none}
.loader__top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.loader__sym{width:44px;height:auto;color:var(--forest-ink)}
.loader__mid{align-self:center;justify-self:center;text-align:center;display:grid;gap:18px;justify-items:center}
.loader__count{font-size:clamp(72px,14vw,200px);color:var(--forest-ink)}
.loader__bar{width:min(360px,70vw);height:1px;background:rgba(234,240,238,.18);position:relative;overflow:hidden}
.loader__bar i{position:absolute;inset:0;background:var(--forest-ink);transform-origin:left;transform:scaleX(0)}
.loader__bot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.loader .snd{box-shadow:inset 0 0 0 1px rgba(234,240,238,.3);height:44px;padding:0 16px}
/* Veil: the black title card between the labs, timed from "Brand assets/switch product lab.mp4".
   Leave: black rises from the bottom (.5s). Arrive: black holds, the lab's name fades in (.6s),
   holds, then the black clears from the top down (.5s) while the name stays still. */
.veil{position:fixed;inset:0;z-index:190;background:#0A0A0A;color:#F2F2F2;display:grid;place-items:center;clip-path:inset(100% 0 0 0);visibility:hidden;pointer-events:none}
.veil.is-in{clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto;transition:clip-path .5s cubic-bezier(.33,1,.68,1)}
.veil-arrive .veil{clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto}
.veil.is-out{clip-path:inset(100% 0 0 0);visibility:visible;transition:clip-path .5s cubic-bezier(.4,.1,.8,.5)}

/* generic section head */
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.head>h2{grid-column:1/9}
.head>.head__r{grid-column:9/13;display:grid;gap:18px}
.s-forest .d-xxl em,.s-forest .d-xl em,.s-forest .d-l em,.s-deep .d-xl em,.s-deep .d-l em{color:var(--fg-2)}
.hdr__logo .wm{width:112px;height:17px;flex:none}
.ftr__wm svg{aspect-ratio:1809.14/275.32}

/* ---------- cursor ---------- */
/* The small orange dot follows the pointer everywhere, buttons included.
   The outer element only moves (JS sets its transform); the dot itself is drawn by ::before,
   so pressing can resize the dot without ever shifting its position. */
.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .3s ease}
.cursor::before{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--fire);transition:transform .18s var(--ease)}
.cursor.is-on{opacity:1}
.cursor.is-down::before{transform:scale(.7)}
/* click: a thin ring pulses out from the cursor */
.cursor-ring{position:fixed;left:0;top:0;z-index:299;pointer-events:none;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fire);animation:ring .55s var(--ease) forwards}
@keyframes ring{from{transform:var(--at) scale(.3);opacity:1}to{transform:var(--at) scale(1.5);opacity:0}}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none}}
/* click motion: media leans toward the cursor and presses in on click */
[data-tilt]{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--ts,1));transition:transform .6s var(--ease);will-change:transform}
[data-tilt].is-press{--ts:.985;transition-duration:.15s}

/* ---------- placeholder (drawing frame) ---------- */
.ph{--c:var(--fg-3);position:relative;aspect-ratio:var(--ar,4/3);max-width:100%;background:var(--ph-bg);color:var(--fg-2);overflow:hidden;isolation:isolate;border-radius:2px}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top right,transparent calc(50% - .5px),var(--line) calc(50% - .5px),var(--line) calc(50% + .5px),transparent calc(50% + .5px)),
  linear-gradient(to bottom right,transparent calc(50% - .5px),var(--line) calc(50% - .5px),var(--line) calc(50% + .5px),transparent calc(50% + .5px))}
.ph::after{content:"";position:absolute;inset:10px;z-index:-1;pointer-events:none;background:
  linear-gradient(var(--c),var(--c)) left top/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px 14px no-repeat,
  linear-gradient(var(--c),var(--c)) right top/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px 14px no-repeat,
  linear-gradient(var(--c),var(--c)) left bottom/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px 14px no-repeat,
  linear-gradient(var(--c),var(--c)) right bottom/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px 14px no-repeat}
.ph__scan{position:absolute;left:0;right:0;top:0;height:1px;background:var(--accent);opacity:0;z-index:0}
.ph:hover .ph__scan{animation:scan 1.6s var(--ease-io) infinite}
@keyframes scan{0%{top:0;opacity:0}10%{opacity:.8}90%{opacity:.8}100%{top:100%;opacity:0}}
.ph__id{position:absolute;left:20px;top:18px;font-family:var(--f-dot);font-size:12px;color:var(--fg)}
.ph__kind{position:absolute;right:20px;top:18px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ph__note{position:absolute;left:20px;right:20px;bottom:16px;font-size:13px;line-height:1.4;max-width:44ch;text-wrap:pretty}
.ph__note b{color:var(--fg);font-weight:600}
.ph__ratio{position:absolute;right:20px;bottom:16px;font-family:var(--f-dot);font-size:11px}
.ph__note+.ph__ratio{display:none}
.ph__play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--fg);box-shadow:0 0 0 1px var(--line)}
.ph__play svg{width:18px;height:18px;margin-left:3px}
.ph--dark{--ph-bg:#1C1F1E;--line:rgba(234,240,238,.14);--fg:#EAF0EE;--fg-2:#A9B3B0;--fg-3:#6D7775;--bg:#EAF0EE;color:#A9B3B0}
.ph--dark .ph__play{background:#EAF0EE;color:#141414}
.ph--tint{--ph-bg:var(--forest-tint)}

/* swatches (CMF chips) */
.chips-cmf{display:flex;gap:6px;align-items:center}
.chips-cmf i{width:14px;height:14px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(20,20,20,.12)}

/* ---------- reveal ---------- */
.js-motion [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js-motion [data-reveal].is-in{opacity:1;transform:none}
.js-motion [data-reveal="2"]{transition-delay:.08s}
.js-motion [data-reveal="3"]{transition-delay:.16s}
.js-motion [data-reveal="4"]{transition-delay:.24s}
/* side padding (cancelled by negative margin) so round glyphs like the full stop aren't clipped by the reveal mask */
.split-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .14em .06em;margin:0 -.14em -.06em}
.split-w>span{display:inline-block}
.js-motion [data-split] .split-w>span{transform:translateY(135%);transition:transform 1.1s var(--ease)}
.js-motion [data-split].is-in .split-w>span{transform:none}

/* ==========================================================================
   DESIGN LAB
   ========================================================================== */

/* hero */
/* --hero-fs: headline size. --hero-reach: how far the card stage reaches down beside "Ideas in." */
.hero{--hero-fs:clamp(60px,11vw,190px);--hero-reach:calc(41px + .8 * var(--hero-fs));position:relative;padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + clamp(8px,1vw,20px));padding-bottom:clamp(48px,6vw,88px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end}
.hero__meta{grid-column:1/6;grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding-bottom:6px;position:relative;z-index:3}
.hero__count{display:flex;align-items:flex-start;gap:8px}
.hero__count .dot{font-size:clamp(56px,7vw,104px);transition:filter .5s ease,opacity .5s ease}
.hero__count .dot.is-blur{filter:blur(8px);opacity:.3}
.hero__count sup{font-family:var(--f-dot);font-size:14px;margin-top:6px}
.hero__stagecap{display:grid;gap:6px;max-width:34ch}
.hero__stagecap .d-s{transition:opacity .4s ease}
.hero__stagecap p{font-size:14px;color:var(--fg-2);transition:opacity .4s ease}
.hero__stage{grid-column:6/13;grid-row:1;position:relative;z-index:1;margin-bottom:calc(-1 * var(--hero-reach) - var(--gap));clip-path:inset(-100vh -100vw 0 -100vw)}
.hero__title{grid-column:1/-1;grid-row:2;position:relative;z-index:2;margin-top:clamp(4px,1vw,16px);pointer-events:none}
.hero__title .d-xxl{font-size:var(--hero-fs)}
.hero__title h1 .eyebrow{display:block;line-height:1.45;font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px;color:var(--fg)}
.hero__title h1 .eyebrow::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--fire);margin-right:10px;vertical-align:1px}
.hero__lede{grid-column:1/6;grid-row:3;align-self:start;margin-top:10px}
.hero__act{grid-column:8/13;grid-row:3;justify-self:end;align-self:start;margin-top:10px}

/* Flip stack: the next card rises from below, the current one folds back onto the pile */
/* touch-action:none: on a phone, a swipe that starts on the photos turns the photos instead of scrolling the page */
.stack{position:relative;height:clamp(420px,min(40vw,68vh),760px);perspective:1600px;perspective-origin:50% 30%;user-select:none;-webkit-user-select:none;outline-offset:-2px;touch-action:none;cursor:grab}
.stack.is-drag{cursor:grabbing}
.stack__card{position:absolute;left:50%;top:58%;width:clamp(260px,min(27vw,44vh * 1.333),500px);transform-style:preserve-3d;will-change:transform,opacity;cursor:pointer;background:var(--panel);padding:10px;box-shadow:0 40px 70px -34px rgba(20,20,20,.4),0 1px 0 rgba(20,20,20,.04);border-radius:3px;backface-visibility:hidden}
.stack__card .ph{--ar:4/3}
.stack__card .ph__note{font-size:12.5px}
.stack__tag{position:absolute;left:10px;top:-26px;font-family:var(--f-dot);font-size:12px;color:var(--fg);white-space:nowrap}
.stack__ctrl{display:flex;align-items:center;gap:6px}
.stack__ctrl button{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;background:transparent;transition:box-shadow .3s ease,transform .3s var(--ease)}
.stack__ctrl button:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.stack__ctrl svg{width:14px;height:14px}
.stack__dots{display:flex;gap:6px;align-items:center;padding:0 8px}
.stack__dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .3s ease,width .4s var(--ease)}
.stack__dots i.is-on{background:var(--fire);width:18px;border-radius:3px}

/* proof bar */
.proof{border-block:1px solid var(--line)}
.proof__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.proof__item{padding:26px 22px 24px 0;display:grid;gap:10px;align-content:start}
.proof__item+.proof__item{padding-left:22px;border-left:1px solid var(--line)}
.proof__num{font-size:clamp(28px,2.6vw,40px);color:var(--fg)}
.proof__lbl{font-size:14px;color:var(--fg-2);line-height:1.35}

/* doors */
.doors{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.door{grid-column:span 3;position:relative;display:flex;flex-direction:column;gap:18px;padding:26px 24px 24px;min-height:340px;background:var(--panel);border-radius:4px;transition:background .45s ease,color .45s ease,transform .6s var(--ease)}
.door:hover{background:var(--ink);color:var(--paper)}
.door:hover .door__who,.door:hover .door__p{color:#B9BDBC}
.door__who{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.door__q{font-family:var(--f-display);font-weight:500;font-size:clamp(30px,2.6vw,40px);line-height:1;letter-spacing:-.015em}
.door__p{font-size:15.5px;color:var(--fg-2);line-height:1.5}
.door__next{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:14px;font-weight:600}
.door__next svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.door:hover .door__next svg{transform:translateX(4px)}
.door--lab{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center;background:var(--forest);color:var(--forest-ink);padding:30px 28px}
.door--lab:hover{background:var(--forest-deep);color:var(--forest-ink)}
.door--lab .door__who{color:var(--forest-2);grid-column:1/4}
.door--lab .door__q{grid-column:4/9;font-size:clamp(32px,3.2vw,50px)}
.door--lab .door__p{grid-column:9/12;color:var(--forest-2)}
.door--lab:hover .door__who,.door--lab:hover .door__p{color:var(--forest-2)}
.door--lab .door__go{grid-column:12/13;justify-self:end;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--forest-ink);color:var(--forest);transition:transform .6s var(--ease)}
.door--lab:hover .door__go{transform:rotate(-45deg)}
.door--lab .door__go svg{width:20px;height:20px}

/* services index */
.svc{border-top:1px solid var(--line)}
.svc__row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:baseline;padding:30px 0 28px;border-bottom:1px solid var(--line);isolation:isolate}
.svc__row::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);background:var(--forest-tint);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:-1}
.svc__row:hover::before{transform:scaleY(1)}
.svc__n{grid-column:1/2;font-size:14px;color:var(--fg-3)}
.svc__t{grid-column:2/6}
.svc__p{grid-column:6/10;color:var(--fg-2);font-size:16px;line-height:1.5}
.svc__tags{grid-column:10/13;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--fg)}
.svc__note{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:28px}
.svc__note p{grid-column:6/12;font-size:15px;color:var(--fg-2)}
.svc__note .label{grid-column:2/6;color:var(--fg)}
.float-prev{position:fixed;left:0;top:0;z-index:40;width:280px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .3s ease,transform .45s var(--ease)}
.float-prev.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.float-prev .ph{box-shadow:0 24px 48px -20px rgba(20,20,20,.4)}

/* process (sticky) */
.proc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.proc__aside{grid-column:1/6;position:sticky;top:calc(var(--hdr) + 28px);align-self:start;display:grid;gap:28px}
.proc__meter{display:flex;align-items:center;gap:16px}
.proc__meter .dot{font-size:48px}
.proc__rail{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.proc__rail i{position:absolute;inset:0;background:var(--leaf);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .4s var(--ease)}
.proc__pay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:4px;overflow:hidden}
.proc__pay div{padding:14px 14px 12px;display:grid;gap:6px}
.proc__pay div+div{border-left:1px solid var(--line)}
.proc__pay .dot{font-size:22px}
.proc__pay span{font-size:13px;color:var(--fg-2);line-height:1.35}
.proc__list{grid-column:7/13;display:grid}
.stage{display:grid;grid-template-columns:64px 1fr;gap:6px 18px;padding:34px 0;border-top:1px solid var(--line);opacity:.38;transition:opacity .5s ease}
.stage:last-child{border-bottom:1px solid var(--line)}
.stage.is-active{opacity:1}
.stage__n{font-size:22px;padding-top:6px;color:var(--leaf)}
.stage__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.stage__time{font-family:var(--f-dot);font-size:13px;color:var(--fg-2);white-space:nowrap}
.stage dl{grid-column:2/3;display:grid;grid-template-columns:110px 1fr;gap:8px 16px;margin:14px 0 0;font-size:15.5px}
.stage dt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);padding-top:3px}
.stage dd{margin:0;color:var(--fg-2)}
.stage dd.gate{color:var(--fg);font-weight:600}
.stage dd.gate::before{content:"";display:inline-block;width:10px;height:10px;border:1.5px solid var(--leaf);border-radius:50%;margin-right:8px;vertical-align:-1px;transition:background .4s ease}
.stage.is-active dd.gate::before{background:var(--leaf)}

/* lab */
.lab__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.lab__head h2{grid-column:1/9}
.lab__head p{grid-column:9/13}
.lab__film{width:calc(100% - var(--film-in,0px) * 2);margin-inline:auto;transition:width .1s linear}
.lab__film .ph{--ar:16/9}
.lab__facts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:clamp(48px,6vw,88px)}
.lab__fact{grid-column:span 4;display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.lab__fact .dot{font-size:clamp(40px,4vw,60px)}
.lab__fact p{color:var(--fg-2);font-size:15.5px;max-width:34ch}
.lab__lists{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:clamp(56px,7vw,104px)}
.lab__list{grid-column:span 6;display:grid;gap:18px;align-content:start}
.lab__list ul{display:grid}
.lab__list li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:16px}
.lab__list li:last-child{border-bottom:1px solid var(--line)}
.lab__list li::before{content:"+";font-family:var(--f-dot);color:var(--fire)}
.lab__list--no li::before{content:"−";color:var(--fg-3)}
.lab__list--no li{color:var(--fg-2)}
.lab__kit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(48px,6vw,88px)}
.lab__kit .ph{--ar:3/4}
.lab__kit figcaption{margin-top:12px;font-size:14px;font-weight:600}
.lab__kit figcaption span{display:block;font-weight:400;color:var(--fg-2)}

/* work */
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,5vw,72px) var(--gap)}
.case{grid-column:span 6;display:grid;gap:18px;align-content:start}
.case:nth-child(4n+2),.case:nth-child(4n+3){margin-top:clamp(0px,8vw,140px)}
.case .ph{--ar:5/4;transition:transform .8s var(--ease)}
.case__media{overflow:hidden;border-radius:2px}
.case:hover .case__media .ph{transform:scale(1.025)}
.case__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.case__n{font-size:14px;color:var(--fg-3)}
.case__cat{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.case p{color:var(--fg-2);max-width:52ch;font-size:16px}
.case__steps{display:flex;flex-wrap:wrap;gap:6px}
.case__steps .tag{font-size:12px;height:24px}
.case__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

/* product lab band */
.plband{position:relative;overflow:hidden}
.plband__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
.plband__txt{grid-column:1/7;display:grid;gap:26px}
.plband__vis{grid-column:8/13;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.plband__vis .ph{--ar:3/4}
.plband__arrow{font-family:var(--f-dot);font-size:26px;color:var(--forest-2)}
.plband__vis figcaption{margin-top:10px;font-size:13px;color:var(--fg-2)}
.plband__ladder{display:flex;flex-wrap:wrap;gap:8px}
.plband__ladder span{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.plband__ladder b{font-family:var(--f-dot);font-weight:600;font-size:11px}

/* founder */
.founder{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.founder__img{grid-column:1/5}
.founder__img .ph{--ar:4/5}
.founder__txt{grid-column:6/12;display:grid;gap:26px}
.founder__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.founder__facts div{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.founder__facts div:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
.founder__facts dt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.founder__facts dd{margin:0;font-size:16px}
.quote{font-family:var(--f-display);font-size:clamp(26px,2.4vw,36px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}

/* faq */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.faq__head{grid-column:1/5;display:grid;gap:20px;align-content:start}
.faq__list{grid-column:6/13;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:grid;grid-template-columns:1fr 28px;gap:16px;align-items:center;padding:24px 0;cursor:pointer;font-family:var(--f-display);font-weight:500;font-size:clamp(22px,1.9vw,28px);line-height:1.12;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s ease,transform .5s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--fire);transition:transform .4s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{background:var(--fg);color:var(--bg);transform:rotate(180deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq__a{padding:0 44px 26px 0;color:var(--fg-2);display:grid;gap:10px;max-width:64ch}

/* form (start) */
.start{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.start__head{grid-column:1/6;display:grid;gap:24px;align-content:start}
.start__form{grid-column:7/13;display:grid;gap:30px}
.q{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
.q legend,.q>label{padding:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.q legend span,.q>label span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-2);margin-left:6px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 15px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;line-height:1.25;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.chip:hover span{box-shadow:inset 0 0 0 1px var(--fg)}
.chip input:checked+span{background:var(--fg);color:var(--bg);box-shadow:none}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.field{width:100%;height:52px;padding:0 2px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;font-size:17px;border-radius:0;transition:border-color .25s ease}
textarea.field{height:auto;min-height:104px;padding-top:12px;resize:vertical;line-height:1.5}
select.field{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px;cursor:pointer}
.s-forest select.field option,.s-deep select.field option{color:#141414}
.field:hover{border-bottom-color:var(--fg-2)}
.field:focus{outline:none;border-bottom-color:var(--fg)}
.field::placeholder{color:var(--fg-3)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gap)}
.hint{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:4px;background:var(--forest);color:var(--forest-ink);font-size:15px}
.hint a{text-decoration:underline;text-underline-offset:3px;font-weight:600;white-space:nowrap}
.form-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:6px}
/* errors and missing answers: fire orange, never red */
.form-msg.is-error{color:var(--fire);font-weight:600}
.field.is-invalid,.field.is-invalid:hover{border-bottom-color:var(--fire)}
.q.is-invalid>legend,.q.is-invalid>label{color:var(--fire)}
.form-foot .small{max-width:38ch}
.done{display:grid;gap:16px;padding:28px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.done .dot{font-size:14px;color:var(--accent)}

/* footer */
.ftr{padding-top:clamp(72px,9vw,140px);padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.ftr__cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;padding-bottom:clamp(56px,7vw,104px)}
.ftr__cta h2{grid-column:1/9}
.ftr__cta .cta-row{grid-column:9/13;justify-content:flex-end}
.ftr__cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-block:36px;border-top:1px solid var(--line)}
.ftr__col{grid-column:span 3;display:grid;gap:12px;align-content:start}
.ftr__col .label{color:var(--fg-3);margin-bottom:4px}
.ftr__col a{width:fit-content;font-size:16px}
.ftr__col a:hover{color:var(--accent)}
.ftr__wm{padding-block:clamp(24px,3vw,40px)}
.ftr__wm svg{width:100%;height:auto;color:var(--fg)}
.tblock{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--fg);font-size:12.5px}
.tblock div{padding:9px 12px;border-right:1px solid var(--fg);display:grid;gap:2px;min-width:0}
.tblock div:last-child{border-right:0}
.tblock b{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.tblock span{overflow-wrap:anywhere}
.ftr__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:18px;font-size:13px;color:var(--fg-2)}
.ftr__legal nav{display:flex;gap:18px}

/* ==========================================================================
   PRODUCT LAB
   ========================================================================== */
.pl-hero{padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + clamp(28px,4vw,64px));padding-bottom:clamp(56px,7vw,104px)}
.pl-hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end}
.pl-hero__kick{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:clamp(24px,3vw,44px);padding-bottom:14px;border-bottom:1px solid var(--line)}
.pl-hero__kick .dot{font-size:13px;color:var(--fg-2)}
.pl-hero__title{grid-column:1/8;display:grid;gap:30px}
.pl-hero__title h1 .eyebrow{display:block;line-height:1.45;font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px;color:var(--fg-2)}
.pl-hero__vis{grid-column:8/13}
.pl-hero .lede{color:var(--fg-2);max-width:50ch}
.catline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15px;font-weight:600}
.catline .dot{font-size:14px;padding:6px 10px;border-radius:3px;background:rgba(234,240,238,.1)}

/* compare slider */
.cmp{position:relative;--pos:50%;border-radius:3px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cmp .ph{--ar:4/5}
.cmp__a,.cmp__b{position:relative}
.cmp__b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.cmp__line{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;background:var(--forest-ink);pointer-events:none;z-index:3}
.cmp__knob{position:absolute;top:50%;left:var(--pos);width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--forest-ink);color:var(--forest);display:grid;place-items:center;z-index:4;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cmp__knob svg{width:22px;height:22px}
.cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:5}
.cmp input[type=range]:focus-visible~.cmp__knob{outline:2px solid var(--forest-ink);outline-offset:4px}
.cmp__lbl{position:absolute;top:16px;z-index:2;font-family:var(--f-dot);font-size:12px;padding:6px 9px;border-radius:3px}
.cmp__lbl--a{left:16px;background:#141414;color:#ECECEC}
.cmp__lbl--b{right:16px;background:var(--forest-ink);color:var(--forest)}
.cmp__cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px;color:var(--fg-2)}

/* proof categories */
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats span{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px}

/* problem: listings */
.prob{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.prob__head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;margin-bottom:clamp(36px,4vw,64px)}
.prob__head h2{grid-column:1/8}
.prob__head p{grid-column:8/13}
.listings{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;gap:var(--gap);align-items:center}
.listing{background:var(--panel);border-radius:6px;padding:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:center;box-shadow:0 1px 0 rgba(20,20,20,.05)}
.listing .ph{--ar:1/1}
.listing__src{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.listing__src i{width:8px;height:8px;border-radius:50%;background:var(--leaf)}
.listing--gen .listing__src i{background:#E4572E}
.listing__body{display:grid;gap:10px}
.listing__title{font-size:16px;font-weight:600;line-height:1.3}
.listing__price{font-size:clamp(30px,2.8vw,42px)}
.listing__meta{font-size:13.5px;color:var(--fg-2);display:grid;gap:4px}
.listing__meta b{color:var(--fg);font-weight:600}
.eq{display:grid;justify-items:center;gap:8px;text-align:center}
.eq .dot{font-size:48px;color:var(--fg)}
.eq span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.pains{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(40px,5vw,72px)}
.pain{display:grid;gap:12px;padding-top:18px;border-top:1px solid var(--line);align-content:start}
.pain .dot{font-size:13px;color:var(--fg-3)}
.pain p{color:var(--fg-2);font-size:16px}
.pain small{font-size:12.5px;color:var(--fg-3)}

/* ladder */
.ladder{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end}
.ladder__head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.ladder__head h2{grid-column:1/8}
.ladder__head p{grid-column:8/13}
.rungs{grid-column:1/8;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end;height:clamp(360px,34vw,500px)}
.rung{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;height:var(--h);padding:16px 14px;text-align:left;border-radius:4px;background:rgba(234,240,238,.06);box-shadow:inset 0 0 0 1px var(--line);transition:background .35s ease,box-shadow .35s ease,color .35s ease}
.rung:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.rung[aria-selected="true"]{background:var(--forest-ink);color:var(--forest);box-shadow:none}
.rung[aria-selected="true"] .rung__price{color:var(--forest)}
.rung__lv{font-size:clamp(26px,2.4vw,38px)}
.rung__name{font-family:var(--f-display);font-weight:500;font-size:clamp(18px,1.5vw,23px);line-height:1.02;margin-top:auto}
.rung__price{font-family:var(--f-dot);font-size:12px;color:var(--fg-2)}
.rung__star{position:absolute;top:-30px;left:0;right:0;text-align:center;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.rung-panel{grid-column:8/13;align-self:stretch;display:grid;gap:22px;align-content:start;padding:28px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.rung-panel__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rung-panel__top .dot{font-size:14px;color:var(--fg-2)}
.rung-panel dl{display:grid;grid-template-columns:120px 1fr;gap:12px 16px;margin:0;border-top:1px solid var(--line);padding-top:18px}
.rung-panel dt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);padding-top:3px}
.rung-panel dd{margin:0;font-size:16px}
.rung-panel dd.big{font-family:var(--f-dot);font-size:26px}
.ladder__foot{grid-column:1/-1;margin-top:20px;font-size:13.5px;color:var(--fg-2)}

/* calculator */
.calc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.calc__head{grid-column:1/5;display:grid;gap:22px}
.calc__box{grid-column:6/13;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:6px;overflow:hidden;background:var(--panel)}
.calc__in{padding:28px;display:grid;gap:26px;align-content:start}
.calc__out{padding:28px;background:var(--ink);color:var(--paper);display:grid;gap:20px;align-content:space-between}
.rng{display:grid;gap:10px}
.rng__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rng__top label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.rng__top output{font-family:var(--f-dot);font-size:22px}
input[type=range].slider{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer}
input[type=range].slider::-webkit-slider-runnable-track{height:2px;background:linear-gradient(var(--leaf),var(--leaf)) 0/var(--fill,50%) 100% no-repeat,var(--rule)}
input[type=range].slider::-moz-range-track{height:2px;background:var(--rule)}
input[type=range].slider::-moz-range-progress{height:2px;background:var(--leaf)}
input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--leaf);border:4px solid var(--panel);box-shadow:0 0 0 1px var(--leaf)}
input[type=range].slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--leaf);border:4px solid var(--panel);box-shadow:0 0 0 1px var(--leaf)}
.calc__big{font-size:clamp(64px,7vw,112px);line-height:.9}
.calc__big small{font-family:var(--f-body);font-size:18px;font-weight:600;margin-left:8px;letter-spacing:0}
.calc__rows{display:grid;border-top:1px solid rgba(236,236,236,.18)}
.calc__rows div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(236,236,236,.18);font-size:14px}
.calc__rows span{color:#B9BDBC}
.calc__rows b{font-family:var(--f-dot);font-weight:600}
.calc__note{font-size:12.5px;color:#B9BDBC}
/* money the client gains: turns from white to fire orange every time it changes */
.calc__rows .hot{color:var(--fire);transition:color 1.1s ease}
.calc__rows .hot.is-flash{color:#fff;transition:none}
.calc__rows .hot.is-neg{color:inherit}

/* PL process track */
.track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);position:relative}
.track::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:var(--line)}
.track__fill{position:absolute;left:0;top:15px;height:1px;width:100%;background:var(--leaf);transform-origin:left;transform:scaleX(var(--p,0));transition:transform 1.4s var(--ease)}
.step{position:relative;display:grid;gap:12px;align-content:start;padding-top:48px}
.step::before{content:"";position:absolute;top:8px;left:0;width:15px;height:15px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--leaf)}
.step.is-on::before{background:var(--leaf)}
.step__n{font-size:13px;color:var(--fg-3)}
.step__time{font-family:var(--f-dot);font-size:12px;color:var(--leaf)}
.step p{font-size:15px;color:var(--fg-2)}
.paystrip{margin-top:clamp(36px,4vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:16px 20px;border-radius:4px;background:var(--panel);font-size:15px}
.paystrip .dot{font-size:18px;color:var(--leaf)}

/* case tabs */
.ct{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.ct__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,44px)}
.ct__tabs{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);margin-bottom:clamp(28px,3vw,44px)}
.ct__tab{position:relative;display:grid;gap:6px;padding:16px 14px 16px 0;text-align:left;color:var(--fg-3);transition:color .3s ease}
.ct__tab::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--leaf);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ct__tab[aria-selected="true"]{color:var(--fg)}
.ct__tab[aria-selected="true"]::before{transform:scaleX(1)}
.ct__tab:hover{color:var(--fg)}
.ct__tab .dot{font-size:13px}
.ct__tab b{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,1.8vw,26px);line-height:1}
.ct__panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.ct__panel[hidden]{display:none}
.ct__panel .ph{grid-column:1/7;--ar:4/3}
.ct__txt{grid-column:8/13;display:grid;gap:20px}
.ct__txt ul{display:grid}
.ct__txt li{padding:12px 0;border-top:1px solid var(--line);font-size:16px;color:var(--fg-2)}
.ct__txt li:last-child{border-bottom:1px solid var(--line)}
.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.results div{padding:18px 16px 18px 0;border-bottom:1px solid var(--line);display:grid;gap:8px}
.results div:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
.results .dot{font-size:clamp(26px,2.4vw,36px)}
.results span{font-size:13px;color:var(--fg-2)}

/* audit offer */
.audit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.audit__l{grid-column:1/6;display:grid;gap:28px;position:sticky;top:calc(var(--hdr) + 28px)}
.audit__price{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.audit__price .dot{font-size:clamp(64px,7.6vw,124px);line-height:.85}
.audit__price span{font-family:var(--f-dot);font-size:15px;color:var(--fg-2)}
.audit__promise{font-family:var(--f-display);font-size:clamp(24px,2.1vw,32px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.audit__r{grid-column:7/13;display:grid;gap:40px}
.deliv{counter-reset:d;display:grid}
.deliv li{counter-increment:d;display:grid;grid-template-columns:48px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--line);font-size:17px}
.deliv li:last-child{border-bottom:1px solid var(--line)}
.deliv li::before{content:counter(d,decimal-leading-zero);font-family:var(--f-dot);font-size:14px;color:var(--fg-2);padding-top:3px}
.deliv li span{display:block;font-size:14.5px;color:var(--fg-2);margin-top:4px}
.credit{display:flex;gap:18px;align-items:center;padding:20px 22px;border-radius:4px;background:var(--forest-ink);color:var(--forest)}
.credit .dot{font-size:40px}
.credit p{font-size:16px;font-weight:600;line-height:1.35}
.credit small{display:block;font-weight:400;font-size:14px;opacity:.8}
.give{display:grid;gap:12px}
.give ul{display:flex;flex-wrap:wrap;gap:8px}
.give li{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.price-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.price-head h2{grid-column:1/8}
.price-head p{grid-column:8/13}
.ptable{grid-column:1/-1;border-top:1px solid var(--fg)}
.ptable__grp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding:22px 0 10px}
.ptable__grp .label{grid-column:1/4;color:var(--fg)}
.ptable__grp p{grid-column:4/13;font-size:14px;color:var(--fg-2)}
.prow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.prow:hover{background:linear-gradient(90deg,var(--forest-tint),transparent 80%)}
.prow__lv{grid-column:1/2;font-size:13px;color:var(--fg-3)}
.prow__lv--plus{color:var(--fire)}
.prow__name{grid-column:2/5;font-family:var(--f-display);font-weight:500;font-size:clamp(20px,1.7vw,25px);line-height:1.05}
.prow__what{grid-column:5/10;font-size:15px;color:var(--fg-2)}
.prow__time{grid-column:10/11;font-size:13px;color:var(--fg-2);white-space:nowrap}
.prow__price{grid-column:11/13;text-align:right;font-family:var(--f-dot);font-size:20px;white-space:nowrap}
.prow__price small{display:block;font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:4px}
.tiers{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(40px,5vw,72px)}
.tier{display:grid;gap:18px;align-content:start;padding:26px;border-radius:6px;background:var(--panel)}
.tier--star{background:var(--forest);color:var(--forest-ink);--fg:var(--forest-ink);--fg-2:var(--forest-2);--fg-3:#8FB2A9;--line:var(--forest-line)}
.tier__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tier__badge{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--forest-ink);color:var(--forest)}
.tier__price{display:flex;align-items:baseline;gap:8px}
.tier__price .dot{font-size:clamp(36px,3.4vw,52px)}
.tier__price span{font-size:14px;color:var(--fg-2)}
.tier p{font-size:15px;color:var(--fg-2)}
.tier ul{display:grid;border-top:1px solid var(--line)}
.tier li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;display:flex;justify-content:space-between;gap:12px}
.tier li span{color:var(--fg-2)}
.tier li b{font-weight:600;text-align:right}
.tiers__note{grid-column:1/-1;font-size:14px;color:var(--fg-2);margin-top:6px}
.extras{grid-column:1/-1;margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.extras summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-family:var(--f-display);font-size:clamp(22px,2vw,30px);line-height:1.1}
.extras summary::-webkit-details-marker{display:none}
.extras summary .tag{font-family:var(--f-body)}
.lights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding-bottom:26px}
.light{display:grid;gap:12px;align-content:start;padding:20px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.light__h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.light__h i{width:10px;height:10px;border-radius:50%}
.light p{font-size:14.5px;color:var(--fg-2)}

/* fit */
.fit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.fit h2{grid-column:1/-1;margin-bottom:clamp(32px,4vw,56px)}
.fit__col{grid-column:span 6;display:grid;gap:16px;align-content:start}
.fit__col ul{display:grid}
.fit__col li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:15px 0;border-top:1px solid var(--line);font-size:16.5px}
.fit__col li:last-child{border-bottom:1px solid var(--line)}
.fit__col li::before{font-family:var(--f-dot);font-size:15px;padding-top:2px}
.fit__col--yes li::before{content:"✓";font-family:var(--f-body);font-weight:700;color:var(--leaf)}
.fit__col--no li::before{content:"×";font-family:var(--f-body);font-weight:700;color:var(--fg-3)}
.fit__col--no li{color:var(--fg-2)}

/* routing */
.route{display:grid;gap:10px}
.route__opt{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 18px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line);opacity:.45;transition:opacity .35s ease,background .35s ease,color .35s ease}
.route__opt.is-on{opacity:1;background:var(--forest-ink);color:var(--forest);box-shadow:none}
.route__opt .dot{font-size:13px;padding-top:3px;white-space:nowrap}
.route__opt b{display:block;font-size:16px;margin-bottom:2px}
.route__opt span{font-size:14px;opacity:.85}
.refer{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center;padding-block:28px;border-block:1px solid var(--line)}
.refer p{grid-column:1/9;font-family:var(--f-display);font-size:clamp(22px,2vw,30px);line-height:1.12}
.refer .cta-row{grid-column:9/13;justify-content:flex-end}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:1180px){
  .door{grid-column:span 6;min-height:280px}
  .proof__row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .proof__item:nth-child(4){padding-left:0;border-left:0}
  .proof__item:nth-child(n+4){border-top:1px solid var(--line)}
  .svc__t{grid-column:2/7}
  .svc__p{grid-column:7/13}
  .svc__tags{grid-column:2/13;justify-content:flex-start;margin-top:8px}
  .calc__head{grid-column:1/-1}
  .calc__box{grid-column:1/-1}
  .pill-lab__sub{display:none}
}
@media (max-width:900px){
  :root{--hdr:64px}
  body{font-size:16.5px}
  .hdr__in{grid-template-columns:auto 1fr auto;gap:10px}
  .hdr__logo{justify-self:center}
  .hdr__menu-t,.snd__t,.hdr__sub,.hdr .btn{display:none}
  .pill-lab{padding:0 10px 0 6px;height:36px;font-size:13px}
  .hero__meta,.hero__title,.hero__lede,.hero__act,.hero__stage{grid-column:1/-1;grid-row:auto;justify-self:stretch}
  .hero__title{order:0;pointer-events:auto}
  .hero__lede{order:1}
  .hero__act{order:2}
  .hero__stage{order:3;margin:12px 0 0}
  .hero__meta{order:4;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:14px 18px;padding-bottom:0}
  .hero__meta .stack__ctrl{grid-column:1/-1}
  .hero__count .dot{font-size:48px}
  .stack{height:clamp(340px,96vw,480px)}
  .stack__card{width:min(68vw,320px);top:60%}
  .head>*,.grid>*,.lab__head>*,.plband__grid>*,.founder>*,.faq>*,.start>*,.proc>*,.ftr__cta>*,.prob__head>*,.ladder__head>*,.price-head>*,.audit>*,.ct__panel>*,.refer>*,.pl-hero__grid>*{grid-column:1/-1}
  .proc__aside,.audit__l{position:relative;top:auto}
  .proc__list{margin-top:24px}
  .door{grid-column:1/-1}
  .door--lab{grid-template-columns:1fr auto;gap:14px}
  .door--lab .door__who,.door--lab .door__q,.door--lab .door__p{grid-column:1/2}
  .door--lab .door__go{grid-column:2/3;grid-row:1/4;align-self:end}
  .svc__row{grid-template-columns:40px 1fr;padding:24px 0}
  .svc__n{grid-column:1/2}
  .svc__t,.svc__p,.svc__tags{grid-column:2/3}
  .svc__note>*{grid-column:1/-1!important}
  .lab__fact{grid-column:1/-1}
  .lab__list{grid-column:1/-1}
  .lab__kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case{grid-column:1/-1;margin-top:0!important}
  .plband__vis{grid-column:1/-1}
  .ftr__col{grid-column:span 6}
  .tblock{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tblock div:nth-child(3){border-right:0}
  .tblock div:nth-child(-n+3){border-bottom:1px solid var(--fg)}
  .menu{--menu-fs:clamp(32px,min(10.4vw,6.2vh),56px)}
  @supports (height:1svh){.menu{--menu-fs:clamp(32px,min(10.4vw,6.2svh),56px)}}
  .menu__nav{grid-column:1/-1;align-self:center}
  .menu__side{display:none}
  .menu__info{flex-direction:column;align-items:flex-start;gap:14px}
  .row2{grid-template-columns:1fr}
  .listings{grid-template-columns:1fr}
  .eq{grid-auto-flow:column;align-items:center;justify-content:center;gap:12px}
  .eq .dot{font-size:32px}
  .pains{grid-template-columns:1fr}
  .rungs{grid-column:1/-1;height:auto;grid-template-columns:1fr;gap:6px}
  .rung{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;height:auto;padding:14px 16px}
  .rung__name{margin-top:0}
  .rung__star{display:none}
  .rung-panel{grid-column:1/-1;margin-top:10px}
  .calc__box{grid-template-columns:1fr}
  .track{grid-template-columns:1fr;gap:0}
  .track::before{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .track__fill{left:7px;top:0;width:1px;height:100%;transform:scaleY(var(--p,0));transform-origin:top}
  .step{padding:0 0 28px 40px}
  .step::before{top:2px}
  .ct__tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ct__panel .ph,.ct__txt{grid-column:1/-1}
  .prow{grid-template-columns:1fr auto;gap:6px 16px}
  .prow__lv{display:none}
  .prow__name{grid-column:1/2}
  .prow__price{grid-column:2/3;grid-row:1/3}
  .prow__what{grid-column:1/2}
  .prow__time{grid-column:1/2}
  .ptable__grp>*{grid-column:1/-1!important}
  .tiers{grid-template-columns:1fr}
  .lights{grid-template-columns:1fr}
  .fit__col{grid-column:1/-1}
  .fit__col+.fit__col{margin-top:32px}
  .rung-panel dl,.stage dl{grid-template-columns:1fr;gap:4px}
  .stage dt{margin-top:8px}
  .refer .cta-row,.ftr__cta .cta-row{justify-content:flex-start}
}
@media (max-width:600px){
  .proof__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof__item,.proof__item+.proof__item{padding:18px 12px 18px 0;border-left:0}
  .proof__item:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
  .proof__item:nth-child(n+3){border-top:1px solid var(--line)}
  .proof__item:nth-child(5){grid-column:1/-1}
  .pill-lab__tag{display:none}
  .menu__nav .is-lab small{display:none}
  .pill-lab{padding:0 12px;gap:6px}
  .hdr__logo .wm{width:86px;height:13px}
  .hdr__right{gap:4px}
  .snd{padding:0 8px}
  .listing{grid-template-columns:112px 1fr;gap:14px;padding:10px}
  .listing__price{font-size:28px}
  .founder__facts{grid-template-columns:1fr}
  .founder__facts div:nth-child(even){padding-left:0;border-left:0}
  .results{grid-template-columns:1fr}
  .results div:nth-child(even){padding-left:0;border-left:0}
  .ftr__col{grid-column:1/-1}
  .lab__kit{grid-template-columns:1fr 1fr}
  .hero__stagecap p{display:none}
  .ph__note{font-size:12px;left:14px;right:14px;bottom:12px}
  .ph__id{left:14px;top:12px}
  .ph__kind{right:14px;top:12px}
  .calc__in,.calc__out{padding:22px}
  .plband__vis{grid-template-columns:1fr;justify-items:stretch}
  .plband__arrow{justify-self:center;transform:rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Playground-style black title card: Product Lab intro + transition */
.intro__t{font-family:var(--f-display);font-weight:500;text-transform:uppercase;text-align:center;font-size:clamp(38px,8.4vw,136px);line-height:.95;letter-spacing:-.01em;color:#F2F2F2;padding-inline:var(--gutter);text-wrap:balance}
/* the name only fades: no slide, no blur */
.intro__t{opacity:0;transition:opacity .6s ease}
.veil.is-text .intro__t{opacity:1}

@media (max-width:700px){.intro__t{font-size:clamp(46px,14vw,110px)}}

/* ==========================================================================
   DARK VERSION: html[data-vc-theme="dark"]. Ground #141414; the same forest bands
   and fire-orange details. Text greens lighten so they stay readable on dark.
   ========================================================================== */
[data-vc-theme="dark"]{
  --paper:#141414;
  --paper-2:#222222;
  --panel:#1C1C1C;
  --ink:#ECECEC;
  --ink-2:#A9ADAB;
  --ink-3:#7A7F7D;
  --rule:rgba(236,236,236,.16);
  --rule-2:rgba(236,236,236,.08);
  --forest-tint:#1A2F2B;
  --leaf:#7DB3A6;
  --on-accent:#141414;
  color-scheme:dark;
}
[data-vc-theme="dark"] body{background:var(--paper)}
[data-vc-theme="dark"] .s-forest,[data-vc-theme="dark"] .s-deep{--on-accent:var(--forest)}
/* cards turn forest on hover instead of flipping to a light card */
[data-vc-theme="dark"] .door:hover{background:var(--forest);color:var(--forest-ink)}
[data-vc-theme="dark"] .door:hover .door__who,[data-vc-theme="dark"] .door:hover .door__p{color:var(--forest-2)}
/* the payback result stays a dark box (numbers go white, then orange) */
[data-vc-theme="dark"] .calc__out{background:#0B0B0B;color:#ECECEC}
[data-vc-theme="dark"] .hdr.on-dark .btn::before{background:#ECECEC}
[data-vc-theme="dark"] .stack__card{box-shadow:0 40px 70px -30px rgba(0,0,0,.7),0 0 0 1px rgba(236,236,236,.06)}
[data-vc-theme="dark"] .listing,[data-vc-theme="dark"] .tier:not(.tier--star),[data-vc-theme="dark"] .door:not(.door--lab){box-shadow:inset 0 0 0 1px rgba(236,236,236,.06)}
[data-vc-theme="dark"] .chips-cmf i{box-shadow:inset 0 0 0 1px rgba(236,236,236,.2)}
[data-vc-theme="dark"] .ph--tint{--ph-bg:#1A2F2B}

/* ==========================================================================
   Placeholder media (AI-generated stand-ins, local ComfyUI). Each FIG keeps its
   label; hovering shows the original shoot brief. Replace the files in
   assets/media/ with real photos/films of the same name and ratio.
   ========================================================================== */
.ph--media{--ph-bg:#1C1F1E}
.ph__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;background:#1C1F1E}
.ph--media .ph__kind,.ph--media .ph__play,.ph--media .ph__scan,.ph--media .ph__ratio{display:none}
.ph--media .ph__id{z-index:2;left:12px;top:12px;padding:5px 8px 4px;border-radius:3px;background:rgba(20,20,20,.55);color:#ECECEC;font-size:11px;line-height:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ph--media .ph__note{z-index:2;left:0;right:0;bottom:0;max-width:none!important;margin:0;padding:48px 16px 14px;background:linear-gradient(rgba(20,20,20,0),rgba(20,20,20,.82));color:#D9DDDB;text-align:left!important;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s var(--ease);pointer-events:none}
.ph--media .ph__note b{color:#fff}
.ph--media:hover .ph__note{opacity:1;transform:none}
.cmp .ph--media .ph__note{display:none}
.float-prev .ph--media .ph__note{opacity:1;transform:none}
.lab__film .ph--media video{cursor:pointer}
.ph__snd{position:absolute;right:14px;bottom:14px;z-index:3;font-family:var(--f-dot);font-size:11px;padding:6px 9px 5px;border-radius:3px;background:rgba(20,20,20,.6);color:#ECECEC;border:0;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ph__snd i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--fire);margin-right:7px;vertical-align:1px;opacity:.35}
.ph__snd.is-on i{opacity:1}
.cmp .ph--media .ph__id{top:auto;bottom:12px}
.ph--media:has(video) .ph__id{display:none}

/* no text on photos: captions, figure numbers and kind tags are removed from the markup; this keeps them off if one is ever re-added */
.ph .ph__id,.ph .ph__kind,.ph .ph__note,.ph .ph__ratio{display:none!important}

/* Legal: one button that opens and closes the imprint, privacy and terms */
.strip--btn{width:100%;cursor:pointer;text-align:left;background:none;border-top:0;border-left:0;border-right:0;font:inherit;transition:color .25s var(--ease-io,ease)}
.strip--btn:hover .label,.strip--btn:focus-visible .label{color:var(--accent)}
.strip--btn:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.legal .strip--btn{margin-bottom:0}
.strip__tog{position:relative;width:14px;height:14px;flex:none;margin-left:6px}
.strip__tog::before,.strip__tog::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--fg);transition:transform .4s var(--ease-io,ease)}
.strip__tog::after{transform:rotate(90deg)}
.strip--btn[aria-expanded="true"] .strip__tog::after{transform:rotate(0)}
.legal__body{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--ease-io,ease),visibility 0s .55s}
.legal__body.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease-io,ease),visibility 0s}
.legal__body.no-anim{transition:none}
.legal__inner{overflow:hidden;min-height:0}
.legal__body.is-open .legal__inner{padding-top:clamp(36px,5vw,72px)}
@media (prefers-reduced-motion:reduce){.legal__body,.strip__tog::before,.strip__tog::after{transition:none}}