:root{
  --ink:        #001f24;
  --ink-open:   #001f24;
  --ink-guide:  #003038;
  --paper:      #f7fcfc;
  --white:      #ffffff;
  --teal-deep:  #004f5a;
  --teal:       #007c89;
  --mint:       #a1d7da;
  --mint-pale:  #e4f1f2;
  --rust:       #f15822;
  --rust-lt:    #f79560;
  --rust-deep:  #c43e10;
  --gold:       #ffb114;
  --gold-lt:    #f8d27d;
  --gold-deep:  #7a5200;
  --wash-mint:  #e4f1f2;
  --wash-aqua:  #e7f3f5;
  --wash-sand:  #f7efe6;
  --wash-cream: #fdf3de;
  --ink-deep:   #001f24;
  --ink-soft:   #0b3c45;
  --shell:      #eaf2f2;
  --cyan:        #38e5ea;
  --neon-orange: #ff7a3c;
  --sand:       #f6efe6;
  --on-light:        #002a31;
  --on-light-muted:  #4a656b;
  --on-light-faint:  #5a7076;
  --on-dark:         #f2fafa;
  --on-dark-muted:   #a9c6cb;
  --on-dark-faint:   #7fa3aa;
  --line-light: rgba(0,48,56,.10);
  --line-dark:  rgba(226,244,244,.14);
  --sans: 'Eudoxus Sans','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-frame: 26px;
  --e-out:    cubic-bezier(.22,1,.36,1);
  --e-spring: cubic-bezier(.34,1.4,.64,1);
  --e-smooth: cubic-bezier(.4,0,.2,1);
  --gut: clamp(20px, 5vw, 76px);
  --sec-y: clamp(80px, 11vh, 150px);
  --maxw: 1360px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--shell);
  color:var(--on-light);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
body.locked{ overflow:hidden; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-0.03em; line-height:1.02; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
img,svg,video{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
:focus-visible{
  outline:2.5px solid var(--rust);
  outline-offset:3px;
  border-radius:4px;
}
.zone-dark :focus-visible{ outline-color:var(--gold); }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:-100px; left:16px; z-index:400;
  background:var(--ink); color:var(--on-dark);
  padding:12px 20px; border-radius:var(--r-sm);
  font-size:13px; font-weight:700; transition:top .2s;
}
.skip:focus{ top:16px; }
.frame{ background:var(--paper); }
.zone{
  position:relative;
  padding:var(--sec-y) var(--gut);
  isolation:isolate;
}
.zone-inner{ max-width:var(--maxw); margin:0 auto; }
.zone-paper{ background:var(--paper); }
.zone-white{ background:var(--white); }
.zone-mint { background:var(--mint-pale); }
.zone-sand { background:var(--sand); }
.zone-dark{
  background:var(--ink);
  color:var(--on-dark);
}
.zone-deep{
  background:var(--ink-deep);
  color:var(--on-dark);
}
.zone-dark h1,.zone-dark h2,.zone-dark h3,
.zone-deep h1,.zone-deep h2,.zone-deep h3{ color:var(--on-dark); }
.edge{ position:absolute; left:0; right:0; height:clamp(40px,5vw,84px); z-index:2; pointer-events:none; }
.edge svg{ width:100%; height:100%; display:block; }
.edge-top{ top:-1px; }
.edge-bot{ bottom:-1px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--pg-ink); margin-bottom:22px;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:currentColor; opacity:.55;
}
.zone-dark .eyebrow,.zone-deep .eyebrow{ color:var(--gold); }
.annot{
  font-family:var(--mono); font-size:9.5px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-light-faint); line-height:1.35;
}
.zone-dark .annot,.zone-deep .annot{ color:var(--on-dark-faint); }
.h-display{
  font-size:clamp(40px,6.6vw,92px);
  letter-spacing:-0.045em;
  line-height:.96;
  text-wrap:balance;
}
.h-sec{
  font-size:clamp(32px,4.6vw,62px);
  letter-spacing:-0.04em;
  line-height:1.0;
  text-wrap:balance;
}
.h-sub{ font-size:clamp(21px,2.2vw,29px); letter-spacing:-0.025em; line-height:1.14; font-weight:700; }
.lede{
  font-size:clamp(15.5px,1.25vw,18px);
  line-height:1.62;
  /* Headings already balance; body copy gets `pretty`, which is the rule
     that actually prevents a single word stranded on the last line. */
  text-wrap:pretty;
  color:var(--on-light-muted);
  max-width:56ch;
  font-weight:400;
}
.zone-dark .lede,.zone-deep .lede{ color:var(--on-dark-muted); }
em.mark{ font-style:normal; color:var(--rust); }
.zone-dark em.mark,.zone-deep em.mark{ color:var(--rust-lt); }
:root{
  --pg-ink:  var(--teal-deep);
  --pg-wash:   var(--wash-mint);
}
/* Sub-page washes. One light tone per theme, shared by the Deep Work and
   shop pages; on mint and sand the tiles use the same tone (--pg-tint = --pg-wash):
     teal (mint)    — var(--paper) #f7fcfc, the home page Deep Work band   Design for Humans, Leadership 360
     orange (sand)  — #f9efe1   Team Identity Lab, Psychosocial Risk
     aqua           — lightened --wash-aqua, accent-mix tiles   Simplify to Amplify (kept by request)
     yellow (cream) — lightened --wash-cream, accent-mix tiles  AI Ready, AI Profiles (pending the client's pick)
   The base --wash-* tokens are untouched — the home page uses them. */
body.pg-th-mint { --pg-ink:var(--teal-deep); --pg-wash:var(--paper); }
body.pg-th-aqua { --pg-ink:var(--teal-deep); --pg-wash:color-mix(in srgb, var(--wash-aqua)  60%, var(--white)); }
body.pg-th-sand { --pg-ink:var(--rust-deep); --pg-wash:#f9efe1; }
body.pg-th-cream{ --pg-ink:var(--gold-deep); --pg-wash:color-mix(in srgb, var(--wash-cream) 60%, var(--white)); }
body[class*="pg-th-"]{ --pg-tint:color-mix(in srgb, var(--pg-ink) 7%, var(--white)); }
body.pg-th-mint, body.pg-th-sand{ --pg-tint:var(--pg-wash); }
body[class*="pg-th-"] .zone-mint,
body[class*="pg-th-"] .zone-paper{ background:var(--pg-wash); }
.zone-mint  + .zone-mint,
.zone-paper + .zone-paper,
.zone-white + .zone-white,
.zone-mint  + .zone-paper,
.zone-paper + .zone-mint{ padding-top:clamp(26px,3.5vh,52px); }
body:not([class*="pg-th-"]) .zone-mint  + .zone-paper,
body:not([class*="pg-th-"]) .zone-paper + .zone-mint{ padding-top:var(--sec-y); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-sm);
  font-size:14px; font-weight:700; letter-spacing:-0.01em;
  border:1.5px solid transparent; white-space:nowrap;
  transition:transform .35s var(--e-spring), background .25s, color .25s, border-color .25s, box-shadow .35s;
}
.btn svg{ width:15px; height:15px; stroke:currentColor; stroke-width:2.2; fill:none; transition:transform .35s var(--e-spring); }
.btn:hover svg{ transform:translateX(4px); }
.btn:hover{ transform:translateY(-2px); }
.btn-ink   { background:var(--ink);  color:var(--on-dark); }
.btn-ink:hover{ background:var(--rust-deep); box-shadow:0 12px 26px -12px rgba(196,62,16,.55); }
.btn-rust  { background:var(--rust-deep); color:#fff; }
.btn-rust:hover{ background:#a33009; box-shadow:0 12px 26px -12px rgba(241,88,34,.7); }
.btn-ghost { background:transparent; color:var(--on-light); border-color:var(--line-light); }
.btn-ghost:hover{ border-color:var(--rust); color:var(--rust-deep); background:rgba(241,88,34,.06); }
.btn-light { background:var(--paper); color:var(--ink); }
.btn-light:hover{ background:var(--rust-deep); color:var(--white); }
.btn-outline-dark{ background:transparent; color:var(--on-dark); border-color:var(--line-dark); }
.btn-outline-dark:hover{ border-color:var(--rust-lt); color:var(--rust-lt); background:rgba(241,88,34,.12); }
.btn-sm{ padding:11px 18px; font-size:13px; }
.js [data-rv]{ opacity:0; will-change:transform,opacity; }
[data-rv].in{ opacity:1; }
[data-drift][data-rv]{ transform:none; transition:opacity .7s var(--e-out); }
[data-rv="up"]      { transform:translateY(34px); transition:opacity .7s var(--e-out), transform .9s var(--e-out); }
[data-rv="left"]    { transform:translateX(-48px); transition:opacity .7s var(--e-out), transform .9s var(--e-out); }
[data-rv="right"]   { transform:translateX(48px); transition:opacity .7s var(--e-out), transform .9s var(--e-out); }
[data-rv="scale"]   { transform:scale(.94); transition:opacity .7s var(--e-out), transform .95s var(--e-out); }
[data-rv="curtain"] { clip-path:inset(0 0 100% 0); transform:none; transition:opacity .5s linear, clip-path 1.15s var(--e-out); }
[data-rv="blur"]    { transform:translateY(20px); filter:blur(12px); transition:opacity .7s var(--e-out), transform .9s var(--e-out), filter .7s var(--e-out); }
[data-rv="tilt"]    { transform:translateY(40px) rotate(-2.5deg); transition:opacity .7s var(--e-out), transform 1s var(--e-out); }
[data-rv="bounce"]  { transform:translateY(30px) scale(.94); transition:opacity .45s var(--e-out), transform .8s var(--e-spring); }
[data-rv="emerge"] { transform:translate3d(0,74px,-320px) rotateX(10deg); transition:opacity .8s var(--e-out), transform 1.05s var(--e-out); }
[data-rv="slide-right"]{
  transform:translateX(84px) scale(1.09);
  transition:opacity .55s var(--e-out), transform .78s var(--e-out);
}
@property --rv-x{ syntax:'<length>'; inherits:false; initial-value:0px; }
[data-rv="slide-z"]{
  --rv-x:84px;
  transition:opacity .55s var(--e-out), --rv-x .78s var(--e-out);
}
[data-rv="slide-z"].in{ --rv-x:0px; }
/* clip-path is only for the curtain entrance. It used to be set on EVERY
   revealed element, and inset(0) is the element's own edges — so any card
   or button inside that lifted or cast a shadow on hover was sliced flat
   at that line. */
[data-rv].in{ filter:none; }
[data-rv="curtain"].in{ clip-path:inset(0 0 0 0); }
[data-rv]:not([data-rv="slide-z"]).in{ transform:none; }

/* ═════════════════════════════════════════════════════════════════════
   TITLES — one entrance, every section.

   Section headings used to arrive three different ways: some rode up
   inside a block carrying data-rv="up", one came in from the left, and
   several — tools, deep, priced, showcase — had no entrance at all and
   were simply already there. Three treatments and a blank is not a
   motion system, it is four decisions made on four different days.

   Now every heading does the same thing: each LINE rises out of its own
   mask, one after the next. Type revealed by a mask reads as typeset
   rather than animated, which is the same instinct as DRIFT further
   down this file — weight and lag, no bounce, nothing springs.

   Why lines and not words: these headings are written as two deliberate
   lines with a hard <br/> and an accent phrase on the second ("Tools
   you'll / actually use."). The line break IS the composition. Splitting
   to words would stagger across a boundary the design already draws,
   and a nine-word heading in nine pieces reads as a effect rather than
   as a sentence.

   Mechanics. The mask is a block with overflow clipped; the line inside
   is translated fully below its own baseline box and comes back to 0.
   Because the mask is exactly one line tall, the letter only exists
   inside it — no partial glyph outside, no bleed, and descenders survive
   (hence the padding, see below).

   --tl-i is the line's index, set by the splitter. The delay is derived
   from it, so pacing is one number here rather than an inline style per
   line, and a heading with four lines needs no new CSS. */
/* --tl-d is the descender allowance, named because THREE rules have to
   agree on it: the mask's padding, the mask's negative margin, and the
   distance the line is pushed down at rest. Get the third one wrong and
   the tops of the letters sit visible in the padding strip before the
   reveal — a row of ghost letter-tops under every heading. */
.tl-m{
  --tl-d:.18em;
  display:block;
  overflow:hidden;
  /* Descenders and the accent's letterforms sit below the line box. A
     mask clipped exactly to line-height shaves the tail off a 'y' or a
     'g' at rest, which looks like a font bug rather than a reveal. The
     negative margin gives the overflow room to spare without adding
     height to the heading — critical, because these headings are
     line-height:1.0 and any real padding would open gaps between the
     lines and break the tight typesetting they were composed for. */
  padding-bottom:var(--tl-d);
  margin-bottom:calc(-1 * var(--tl-d));
}
.tl-l{
  display:block;
  /* 100% is the line's own height, which clears the content box. The
     descender allowance has to be added on top of it or the mask is
     still showing .18em of open strip below the content box for the
     letter-tops to peek into. 5% on top of that is slack for font
     metrics — the line box is 1em at line-height:1.0, but ascent and
     descent are the font's business, not the box's. */
  transform:translateY(calc(105% + var(--tl-d)));
  /* Opacity as well as travel. A pure mask reveal is crisper, but these
     headings sit on washed panels where the type is only a shade or two
     from the ground, and the first frame of a pure mask can read as a
     flicker at the top edge. A short fade under the travel settles it.

     Both in ONE declaration with transition-delay after it, in that
     order, deliberately: `transition` is a shorthand and it resets
     transition-delay to 0s. Written as two rules — travel in the first,
     opacity in a second below — the second one's shorthand silently
     wiped the stagger and every line moved at once. */
  transition:transform 1s var(--e-out), opacity .5s linear;
  transition-delay:calc(var(--tl-i, 0) * 105ms);
  opacity:0;
  will-change:transform, opacity;
}
[data-title].in .tl-l{ transform:translateY(0); opacity:1; }

/* The heading itself must NOT inherit the generic [data-rv] fade — the
   lines do the revealing, and a parent at opacity:0 would hold them all
   invisible until its own transition finished, collapsing the stagger
   into a single block fade. */
/* will-change is released here too, and it has to be on THIS selector,
   not on a bare [data-title]: `.js [data-rv]` is (0,2,0) and would
   outrank it. [data-rv] asks for a compositing layer on the strength of
   transform and opacity, and the heading now animates neither — the
   hint belongs on the lines that actually move. */
.js [data-title]{ opacity:1; will-change:auto; }
[data-title]{ transform:none !important; }

/* Supporting copy follows the title rather than accompanying it, so a
   section resolves in reading order: heading lines, then the lede, then
   the controls. data-rv-after is a plain delay hook the observer honours
   — the entrance itself is still whatever data-rv it carries. */
[data-rv-after="1"]{ transition-delay:.26s !important; }
[data-rv-after="2"]{ transition-delay:.40s !important; }
[data-rv-after="3"]{ transition-delay:.54s !important; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-rv]{ opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important; }
  /* Final state, not a fast one. The global transition-duration override
     above would make the lines snap up in a millisecond, which is still
     a movement — and it would still be waiting on the observer to add
     .in, so a heading scrolled past quickly could be caught mid-clip.
     Rest position, unconditionally, whether .in ever lands or not.
     overflow:visible as well: with nothing to hide there is no reason to
     keep a clip that could crop a descender at an odd zoom level. */
  .tl-l{ transform:none !important; opacity:1 !important; transition:none !important; }
  .tl-m{ overflow:visible !important; }
  [data-rv-after]{ transition-delay:0s !important; }
  .no-rm{ display:none !important; }
}
.progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--rust); z-index:300; transition:width .1s linear;
}
nav.bar{
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--gut);
  color:var(--on-dark);
  background:var(--ink-deep);
  border-bottom:1px solid transparent;
  transition:padding .35s var(--e-out), border-color .35s;
}
nav.bar.stuck{
  padding:10px var(--gut);
  border-bottom-color:rgba(226,244,244,.10);
  box-shadow:0 10px 30px -18px rgba(0,20,24,.6);
}
.brand{ display:inline-flex; align-items:center; flex-shrink:0; }
.brand img{ height:24px; width:auto; }
.nav-mid{ display:flex; align-items:center; gap:4px; }
.nav-mid > a{
  position:relative; padding:9px 13px; border-radius:var(--r-xs);
  font-size:14px; font-weight:500; color:var(--on-dark-muted);
  transition:color .25s, background .25s;
}
.nav-mid > a:hover{ color:var(--on-dark); background:rgba(226,244,244,.08); }
.nav-mid > a.on{ color:var(--on-dark); font-weight:700; }
.nav-mid > a.on::after{
  content:''; position:absolute; left:13px; right:13px; bottom:3px;
  height:2px; border-radius:2px; background:var(--cyan);
}
.nav-grp{ position:relative; display:flex; align-items:center; }
.nav-grp > .nav-trig{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 11px 9px 13px; border-radius:var(--r-xs);
  font-family:inherit; font-size:14px; font-weight:500;
  color:var(--on-dark-muted); background:none; border:0; cursor:pointer;
  transition:color .25s, background .25s;
}
.nav-grp > .nav-trig .caret{
  width:13px; height:13px; stroke:currentColor; stroke-width:2.2; fill:none;
  transition:transform .3s var(--e-out);
}
.nav-grp > .nav-trig:hover{ color:var(--on-dark); background:rgba(226,244,244,.08); }
.nav-grp[data-open="true"] > .nav-trig{ color:var(--on-dark); background:rgba(226,244,244,.08); }
.nav-grp[data-open="true"] > .nav-trig .caret{ transform:rotate(180deg); }
.nav-grp.on > .nav-trig{ color:var(--on-dark); font-weight:700; }
.nav-grp.on > .nav-trig::after{
  content:''; position:absolute; left:13px; right:29px; bottom:3px;
  height:2px; border-radius:2px; background:var(--cyan);
}
.nav-drop a.item[aria-current="page"]{ background:rgba(56,229,234,.09); }
.nav-drop a.item[aria-current="page"] .n{ color:var(--cyan); }
.d-sub a[aria-current="page"]{ color:var(--on-dark); font-weight:700; }
.d-sub a[aria-current="page"] .n{ color:var(--cyan); }
.nav-grp::after{
  content:''; position:absolute; top:100%; left:0; right:0; height:14px;
  display:none;
}
.nav-grp[data-open="true"]::after{ display:block; }
.nav-drop{
  position:absolute; top:calc(100% + 13px); left:-8px;
  z-index:120; width:335px; padding:9px;
  background:var(--ink-deep);
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  box-shadow:0 26px 60px -22px rgba(0,10,14,.9);
  opacity:0; visibility:hidden;
  transform:translateY(-7px) scale(.985); transform-origin:top left;
  transition:opacity .22s var(--e-out), transform .28s var(--e-out), visibility 0s .3s;
}
.nav-grp[data-open="true"] .nav-drop{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .22s var(--e-out), transform .3s var(--e-out), visibility 0s;
}
.nav-drop.align-r{ left:auto; right:-8px; transform-origin:top right; }
.nav-drop a.item{
  position:relative; display:grid;
  grid-template-columns:auto 1fr auto; align-items:baseline;
  column-gap:11px; padding:10px 11px;
  border-radius:var(--r-sm);
  transition:background .2s var(--e-out);
}
.nav-drop a.item:hover,
.nav-drop a.item:focus-visible{ background:rgba(226,244,244,.07); outline:none; }
.nav-drop a.item .n{
  font-family:var(--mono); font-size:9.5px; font-weight:400;
  letter-spacing:.1em; color:var(--gold);
  transition:color .2s;
}
.nav-drop a.item .tx{ min-width:0; }
.nav-drop a.item .t{
  display:block; font-size:13.5px; font-weight:700;
  letter-spacing:-0.015em; color:var(--on-dark);
}
.nav-drop a.item .d{
  display:block; margin-top:3px; font-size:11.5px; line-height:1.4;
  color:var(--on-dark-faint);
}
.nav-drop a.item .ar{
  width:14px; height:14px; align-self:center;
  stroke:var(--on-dark-faint); stroke-width:2.2; fill:none;
  opacity:0; transform:translateX(-5px);
  transition:opacity .2s var(--e-out), transform .28s var(--e-out), stroke .2s;
}
.nav-drop a.item:hover .ar,
.nav-drop a.item:focus-visible .ar{ opacity:1; transform:none; stroke:var(--cyan); }
.nav-drop a.item:hover .n,
.nav-drop a.item:focus-visible .n{ color:var(--cyan); }
.nav-drop .drop-foot{
  margin-top:7px; padding:11px 11px 8px;
  border-top:1px solid var(--line-dark);
}
.nav-drop .drop-foot a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-dark-muted);
  transition:color .2s;
}
.nav-drop .drop-foot a:hover{ color:var(--cyan); }
.nav-drop .drop-foot svg{ width:13px; height:13px; stroke:currentColor; stroke-width:2.2; fill:none; }
@media(prefers-reduced-motion:reduce){
  .nav-drop, .nav-drop a.item .ar, .nav-grp > .nav-trig .caret{ transition:none; }
}
.nav-end{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cart-pill{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:11px 16px; border-radius:var(--r-sm);
  border:1.5px solid rgba(226,244,244,.20);
  font-size:13px; font-weight:700; color:var(--on-dark);
  transition:border-color .25s, background .25s, transform .3s var(--e-spring);
}
.cart-pill:hover{ border-color:var(--cyan); background:rgba(56,229,234,.08); }
.cart-pill svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; }
/* A transition, not a keyframe. Adding two items quickly used to restart
   the keyframe from scale(1) mid-flight, so the second add read as a
   stutter rather than a second beat. A transition retargets from wherever
   the pill currently is. cart.js drops the class on transitionend, which
   is what returns it to rest. */
.cart-pill{ transition:transform .22s var(--e-spring); }
.cart-pill.bump{ transform:scale(1.13); }
@media (prefers-reduced-motion: reduce){
  .cart-pill{ transition:none; }
  .cart-pill.bump{ transform:none; }
}
.cart-n{
  min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--rust-deep); color:#fff;
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  display:grid; place-items:center;
}
.cart-pill[data-empty="true"] .cart-n{ display:none; }
.burger{
  display:none; width:42px; height:42px; border-radius:var(--r-sm);
  border:1.5px solid rgba(226,244,244,.20); place-items:center;
}
.burger span{ display:block; width:17px; height:1.8px; background:var(--on-dark); border-radius:2px; transition:transform .35s var(--e-out), opacity .2s; }
.burger span+span{ margin-top:4.5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.3px) rotate(-45deg); }
.drawer{
  position:fixed; inset:0; z-index:250;
  background:var(--ink); color:var(--on-dark);
  padding:88px var(--gut) 40px;
  display:flex; flex-direction:column; gap:6px;
  /* Exit duration, same reasoning as .cart above. */
  transform:translateY(-100%); transition:transform .28s var(--e-out);
  overflow-y:auto;
}
.drawer.open{ transform:translateY(0); transition-duration:.55s; }
.drawer a.d-link{
  display:flex; align-items:baseline; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--line-dark);
  font-size:26px; font-weight:800; letter-spacing:-0.035em;
}
.drawer a.d-link .n{ font-family:var(--mono); font-size:10px; font-weight:400; color:var(--gold); letter-spacing:.1em; }
.d-grp{ border-bottom:1px solid var(--line-dark); }
.d-grp > .d-link{ border-bottom:0; width:100%; text-align:left; background:none; color:inherit; font-family:inherit; cursor:pointer; }
.d-grp > .d-link .cx{
  margin-left:auto; width:18px; height:18px; align-self:center;
  stroke:var(--on-dark-faint); stroke-width:2.2; fill:none;
  transition:transform .35s var(--e-out), stroke .25s;
}
.d-grp[data-open="true"] > .d-link .cx{ transform:rotate(180deg); stroke:var(--cyan); }
.d-sub{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--e-out);
}
.d-grp[data-open="true"] .d-sub{ grid-template-rows:1fr; }
.d-sub > div{ overflow:hidden; }
.d-sub a{
  display:flex; align-items:center; gap:11px;
  padding:12px 0 12px 26px;
  font-size:15px; font-weight:500; color:var(--on-dark-muted);
  border-top:1px solid var(--line-dark);
}
.d-sub a:first-child{ border-top:0; }
.d-sub a:last-child{ padding-bottom:18px; }
.d-sub a .n{ font-family:var(--mono); font-size:9.5px; color:var(--gold); letter-spacing:.1em; }
.d-sub a:hover{ color:var(--on-dark); }
@media(prefers-reduced-motion:reduce){
  .d-sub{ transition:none; }
}
.drawer-close{
  position:absolute; top:20px; right:var(--gut);
  width:42px; height:42px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-dark); display:grid; place-items:center;
}
.drawer-close svg{ width:16px; height:16px; stroke:var(--on-dark); stroke-width:2; fill:none; }
.drawer-foot{ margin-top:auto; padding-top:32px; display:flex; flex-direction:column; gap:12px; }
/* Seven items now (Overview → FAQ), two of them two words. Never let a
   label wrap onto a second line, and just above the burger breakpoint
   tighten the item padding so all seven still fit on one row. */
.nav-mid > a, .nav-grp > .nav-trig{ white-space:nowrap; }
@media(min-width:1081px) and (max-width:1260px){
  .nav-mid{ gap:2px; }
  .nav-mid > a{ padding-inline:9px; }
  .nav-mid > a.on::after{ left:9px; right:9px; }
  .nav-grp > .nav-trig{ padding-left:9px; padding-right:7px; }
}
@media(max-width:1080px){
  .nav-mid{ display:none; }
  .burger{ display:grid; }
  .nav-end .btn{ display:none; }
}
@media(max-width:520px){
  .cart-pill span.cart-lbl{ display:none; }
}
nav.bar .btn-ink{
  background:transparent; color:var(--on-dark);
  border-color:rgba(226,244,244,.22);
}
nav.bar .btn-ink:hover{
  background:var(--cyan); color:var(--ink-deep); border-color:var(--cyan);
  box-shadow:0 0 22px -4px rgba(56,229,234,.45);
}
.hero-v1{ background:var(--ink-open); color:var(--on-dark); }
.hero-v1 {
    position: relative;
    min-height: 100vh;
    padding: 120px 80px 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
  }
/* ── Hero grid ──────────────────────────────────────────────────────
   Brighter than it was (.08 flat on all four lines), and the lift is
   spent unevenly on purpose: the 36px minor lines go to .12 and the
   180px majors to .19, so it reads as a grid with structure rather than
   an even wash. That hierarchy is most of the "brighter" — the majors
   carry it while the average stays low.

   In custom properties so the two alpha steps are named rather than
   repeated four times as literals. */
:root{
  --grid-minor: rgba(0, 168, 184, 0.12);
  --grid-major: rgba(0, 168, 184, 0.19);
}
.hero-v1::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(var(--grid-minor) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
      linear-gradient(var(--grid-major) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
    background-size: 36px 36px, 36px 36px, 180px 180px, 180px 180px;
    animation: heroGridDrift 40s linear infinite;
    will-change: background-position;
  }
/* Fades late and low: a full viewport with nothing under the fold to
   protect, and the grid is meant to thin out toward the CTAs. */
.hero-v1::before {
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%, #000 10%, #000 48%, rgba(0,0,0,.55) 72%, transparent 92%);
            mask-image: linear-gradient(to bottom,
      transparent 0%, #000 10%, #000 48%, rgba(0,0,0,.55) 72%, transparent 92%);
  }
  @keyframes heroGridDrift {
    0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 36px 36px, 36px 36px, 180px 180px, 180px 180px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-v1::before { animation: none; }
  }

/* ── Hero grid, lit layer ───────────────────────────────────────────
   The same grid again in cyan, revealed only inside a circle that
   follows the cursor. Two nested elements rather than one, because two
   masks are needed and they are not the same shape: the wrapper carries
   the moving circle, the inner carries the vertical fade that the
   resting layer already has. Composing both onto one element means
   mask-composite, whose prefixed and standard syntaxes disagree — and
   when compositing silently fails you get grid lines glowing in the
   faded band above the fold, which is exactly where they must not be.
   Nesting has no such failure mode.

   Cyan, not the teal of the resting layer: --cyan is what the neon icons
   already glow in, so the circle reads as the same light source rather
   than a second one. */
.hero-v1{ --lit-x:50%; --lit-y:50%; --lit-r:clamp(200px, 24vw, 380px); }
.hero-lit{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--e-out);
  -webkit-mask-image:radial-gradient(var(--lit-r) circle at var(--lit-x) var(--lit-y),
    #000 0%, rgba(0,0,0,.55) 45%, transparent 72%);
          mask-image:radial-gradient(var(--lit-r) circle at var(--lit-x) var(--lit-y),
    #000 0%, rgba(0,0,0,.55) 45%, transparent 72%);
}
.hero-v1.lit .hero-lit{ opacity:1; }
.hero-lit i{
  position:absolute; inset:0; display:block;
  background-image:
    linear-gradient(rgba(56, 229, 234, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 229, 234, 0.30) 1px, transparent 1px),
    linear-gradient(rgba(56, 229, 234, 0.44) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 229, 234, 0.44) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px, 180px 180px, 180px 180px;
  /* Same keyframes and same duration as the resting layer. Both pseudo
     and element start together on load, so the two grids stay registered
     — a half-pixel drift between them would read as a blur, not a glow. */
  animation: heroGridDrift 40s linear infinite;
  will-change: background-position;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 10%, #000 48%, rgba(0,0,0,.55) 72%, transparent 92%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, #000 10%, #000 48%, rgba(0,0,0,.55) 72%, transparent 92%);
}
@media (prefers-reduced-motion: reduce){
  .hero-lit i{ animation:none; }
  .hero-lit{ transition:none; }
}
/* Nothing to follow without a cursor, and on a touch screen the layer
   would either sit dark or flash on tap. Left out entirely there. */
@media (hover:none), (pointer:coarse){
  .hero-lit{ display:none; }
}
.hero-v1 .icon-playground {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    perspective: 1400px;
    perspective-origin: 50% 50%;
  }
.hero-v1 .neon-icon {
    position: absolute;
    opacity: 0;
    transform-origin: center;
    filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 20px currentColor);
    will-change: transform, opacity;
  }
.hero-v1 .neon-icon svg {
    width: 100%; height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
.hero-v1 .neon-icon.cyan   { color: var(--cyan); }
.hero-v1 .neon-icon.orange { color: var(--neon-orange); }
.hero-v1 .neon-icon.yellow { color: var(--gold); }
  @keyframes flyIn1 {
    0%   { opacity: 0; transform: translate3d(80px, 40px, -1400px) scale(0.08); }
    30%  { opacity: .9; }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes flyIn2 {
    0%   { opacity: 0; transform: translate3d(120px, -80px, -1600px) scale(0.06); }
    35%  { opacity: .85; }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes flyIn3 {
    0%   { opacity: 0; transform: translate3d(-40px, 120px, -1800px) scale(0.05); }
    40%  { opacity: .8; }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes breathe1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-10px, -14px, 260px) scale(1.18); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes breathe2 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(8px, 10px, 320px) scale(1.22); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes breathe3 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-6px, 8px, 200px) scale(1.14); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes breathe4 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(12px, -8px, 380px) scale(1.25); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }
.hero-v1 .i-rocket     { top: 10%;  left: 15%;
                  width: 60px;  height: 60px;
                  animation: flyIn2 2.0s var(--e-spring) .5s both, breathe2 6.3s ease-in-out 2.8s infinite; }
.hero-v1 .i-chip       { top: 11%;  right: 15%;
                  width: 64px;  height: 64px;
                  animation: flyIn1 1.8s var(--e-spring) .2s both, breathe1 5.5s ease-in-out 2.2s infinite; }
.hero-v1 .i-crystal    { top: 26%;  left: 13%;
                  width: 46px;  height: 46px;
                  animation: flyIn2 1.8s var(--e-spring) 2.0s both, breathe1 5.7s ease-in-out 4.6s infinite; }
.hero-v1 .i-brain      { top: 24%;  right: 13%;
                  width: 54px;  height: 54px;
                  animation: flyIn1 1.9s var(--e-spring) .9s both, breathe1 5.9s ease-in-out 3.0s infinite; }
.hero-v1 .i-atom       { top: 50%;  left: 7%;
                  width: 96px;  height: 96px;
                  margin-top: -48px;
                  animation: flyIn1 2.2s var(--e-spring) .8s both, breathe4 7.0s ease-in-out 3.2s infinite; }
.hero-v1 .i-flask      { top: 50%;  right: 7%;
                  width: 56px;  height: 56px;
                  margin-top: -28px;
                  animation: flyIn3 2.1s var(--e-spring) 1.4s both, breathe1 6.6s ease-in-out 4.0s infinite; }
.hero-v1 .i-compass    { top: 70%;  left: 13%;
                  width: 50px;  height: 50px;
                  animation: flyIn1 1.9s var(--e-spring) 1.7s both, breathe3 6.4s ease-in-out 4.2s infinite; }
.hero-v1 .i-eye        { top: 70%;  right: 13%;
                  width: 50px;  height: 50px;
                  animation: flyIn2 2.0s var(--e-spring) 1.2s both, breathe4 6.2s ease-in-out 3.4s infinite; }
.hero-v1 .i-microscope { bottom: 28%; left: 19%;
                  width: 54px;  height: 54px;
                  animation: flyIn3 1.9s var(--e-spring) 1.8s both, breathe3 6.0s ease-in-out 5.0s infinite; }
.hero-v1 .i-lightbulb  { bottom: 28%; right: 19%;
                  width: 56px;  height: 56px;
                  animation: flyIn2 1.9s var(--e-spring) 1.1s both, breathe3 5.8s ease-in-out 3.6s infinite; }
.hero-v1 .dust {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan);
    opacity: 0;
    animation: dustDrift 8s ease-in-out infinite;
  }
.hero-v1 .dust.orange { background: var(--neon-orange); box-shadow: 0 0 6px var(--neon-orange); }
  @keyframes dustDrift {
    0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
    20%  { opacity: .6; }
    80%  { opacity: .6; }
    100% { opacity: 0; transform: translate(-30px, -50px) scale(1.2); }
  }
.hero-v1 .d1 { top: 30%; left: 11%;  animation-delay: 1s; }
.hero-v1 .d2 { top: 60%; right: 10%; animation-delay: 2.2s; }
.hero-v1 .d3 { top: 75%; left: 12%;  animation-delay: 3.5s; }
.hero-v1 .d4 { top: 25%; right: 13%; animation-delay: 4.5s; }
.hero-v1 .d5 { top: 65%; left: 9%;   animation-delay: 0.5s; }
.hero-v1 .d6 { top: 12%; right: 12%; animation-delay: 5.5s; }
.hero-v1 .hero-content {
    position: relative;
    z-index: 4;
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
    animation: fadeUp .9s var(--e-spring) .15s both;
  }
.hero-v1 .hero-logo-wrap {
    display: inline-block;
    position: relative;
    margin-bottom: 36px;
    animation: logoBreathe 5.5s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes logoBreathe {
    0%, 100% { transform: scale(1);    }
    50%      { transform: scale(1.04); }
  }
.hero-v1 .hero-logo-wrap:last-child{ margin-bottom: 0; }
.hero-v1 .hero-logo {
    display: block;
    width: clamp(320px, 42vw, 600px);
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
  }
.hero-v1 h1.hero-title,
.hero-v1 .hero-tagline {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sans);
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--cyan);
    margin: 0 auto 28px;
    text-shadow:
      0 0 16px rgba(56, 229, 234, 0.45),
      0 0 32px rgba(56, 229, 234, 0.25);
  }
.hero-v1 h1.hero-title::before,
.hero-v1 h1.hero-title::after,
.hero-v1 .hero-tagline::before,
.hero-v1 .hero-tagline::after {
    content: '';
    width: 36px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan));
  }
.hero-v1 h1.hero-title::after,
.hero-v1 .hero-tagline::after {
    background: linear-gradient(90deg, var(--cyan), transparent);
  }
.hero-v1 h1.hero-title em,
.hero-v1 .hero-tagline em {
    font-style: italic;
    color: var(--cyan);
  }
.hero-v1 .hero-eyebrow { display: none; }
.hero-v1 .hero-sub {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--on-dark-muted);
    max-width: 560px;
    margin: 0 auto 36px;
    font-weight: 400;
  }
.hero-v1 .hero-ctas {
    display: flex; align-items: center; justify-content: center;
    gap: 22px; flex-wrap: wrap;
  }
.hero-v1 .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--rust);
    color: var(--white);
    padding: 15px 28px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(241, 88, 34, 0.3), 0 0 20px rgba(241, 88, 34, 0.15);
    transition: transform .3s var(--e-spring), box-shadow .3s, background .3s;
  }
.hero-v1 .btn-primary:hover {
    transform: translateY(-3px);
    background: var(--neon-orange);
    box-shadow: 0 14px 36px rgba(255, 122, 60, 0.5), 0 0 30px rgba(255, 122, 60, 0.3);
  }
.hero-v1 .btn-primary .arrow { transition: transform .3s var(--e-spring); }
.hero-v1 .btn-primary:hover .arrow { transform: translateX(4px); }
.hero-v1 .btn-reel {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--on-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    transition: color .25s;
  }
.hero-v1 .btn-reel .play {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--cyan);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    background: rgba(0, 168, 184, 0.05);
    transition: color .3s var(--e-spring), background-color .3s var(--e-spring), border-color .3s var(--e-spring);
  }
.hero-v1 .btn-reel:hover { color: var(--cyan); }
.hero-v1 .btn-reel:hover .play {
    background: var(--cyan);
    color: var(--ink);
    box-shadow: 0 0 20px rgba(56, 229, 234, 0.6);
    transform: scale(1.08);
  }
@media(max-width:760px){
  .hero-v1 .icon-playground { opacity: .55; }
  .hero-v1 .i-rocket     { width: 42px; height: 42px; top: 9%;  left: 11%; }
  .hero-v1 .i-chip       { width: 46px; height: 46px; top: 9%;  right: 11%; }
  .hero-v1 .i-crystal    { width: 32px; height: 32px; top: 24%; left: 9%; }
  .hero-v1 .i-brain      { width: 38px; height: 38px; top: 22%; right: 9%; }
  .hero-v1 .i-atom       { width: 64px; height: 64px; left: 5%; margin-top: -32px; }
  .hero-v1 .i-flask      { width: 38px; height: 38px; right: 5%; margin-top: -19px; }
  .hero-v1 .i-compass    { width: 36px; height: 36px; top: 70%; left: 9%; }
  .hero-v1 .i-eye        { width: 36px; height: 36px; top: 70%; right: 9%; }
  .hero-v1 .i-microscope { width: 38px; height: 38px; bottom: 24%; left: 13%; }
  .hero-v1 .i-lightbulb  { width: 40px; height: 40px; bottom: 24%; right: 13%; }
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero-v1 .icon-playground,
  .hero-v1 .neon-icon,.hero-v1 .dust{ opacity:0 !important; }
}
.hub-sec{
  background:var(--ink-open); display:flow-root; position:relative;
  scroll-margin-top:-40vh;
}
.hz{
  --fly-dx:0px;
  --fly-dy:0px;
  --fly-s:1;
  --fly-o:1;
  --fly-r:0deg;
  --wm-i:0;
  --wm-in:1;
  --wm-dim:rgba(169,198,203,.32);
  --wm-band: 42vh;
  --wm-lh: clamp(52px, 7.6vw, 104px);
  --hub-mid: calc(var(--wm-lh) * 1.02);
  position:relative; z-index:5;
  margin-top:-100vh;
  /* 270vh, down from 300. The pin is 100vh, so the driver's span is
     height - 100vh = 170vh of scroll. That span and the word window in
     index.html are ONE setting: the words finish at 0.86 of it and the
     remainder is the hold on the last verb, so this height decides how
     long that hold lasts. At 300vh (span 200) the hold came out at 65vh
     — the sentence had ended and two thirds of a screen of scrolling
     changed nothing before the shop sheet began to climb. 270 puts it
     at ~24vh: long enough to land on, short enough not to read as the
     page having stopped. Move this and re-derive the 0.86. */
  height:270vh;
  pointer-events:none;
}
.hz-pin{
  position:sticky; top:0;
  height:100vh; overflow:hidden;
}
.wm-line{
  position:absolute; z-index:2;
  left:var(--gut); right:var(--gut);
  top:calc(var(--wm-band) - (var(--wm-lh) / 2));
  height:var(--wm-lh);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px, 1.4vw, 24px);
  pointer-events:none;
}
.wm-lead{
  flex:0 0 auto;
  font-size:clamp(17px, 2.1vw, 30px);
  font-weight:500; letter-spacing:-0.03em; line-height:1;
  color:var(--on-dark-muted);
  white-space:nowrap;
  opacity:var(--wm-in);
}
.wm-col{
  position:relative; flex:0 0 auto;
  height:var(--wm-lh);
  opacity:var(--wm-in);
}
.wm-sizer{
  display:grid; visibility:hidden;
  height:var(--wm-lh); pointer-events:none;
}
.wm-sizer span{ grid-area:1 / 1; }
.wm-list li, .wm-sizer span{
  height:var(--wm-lh); line-height:var(--wm-lh);
  font-size:var(--wm-lh);
  font-weight:800; letter-spacing:-0.045em;
  white-space:nowrap;
}
.wm-list{
  position:absolute; left:0; top:calc(var(--wm-i) * var(--wm-lh) * -1);
  margin:0; padding:0; list-style:none;
  white-space:nowrap;
}
.wm-list li{ color:var(--wm-dim); }
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .wm-list li{
    background-image:linear-gradient(180deg,
      var(--wm-dim) 0 calc(var(--wm-band) - (var(--wm-lh) * .46)),
      var(--gold)                            calc(var(--wm-band) - (var(--wm-lh) * .40))
                                             calc(var(--wm-band) + (var(--wm-lh) * .40)),
      var(--wm-dim) calc(var(--wm-band) + (var(--wm-lh) * .46)));
    background-attachment:fixed;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
  }
}
.hub-core{
  position:relative; z-index:3;
  display:grid; place-items:center;
}
.hub-fly{
  display:block;
  width:var(--hub-mid); height:var(--hub-mid);
  transform:translate(var(--fly-dx), var(--fly-dy)) scale(var(--fly-s));
  transform-origin:50% 50%;
  opacity:var(--fly-o);
  will-change:transform, opacity;
  pointer-events:none;
}
.hub-fly svg{ display:block; width:100%; height:100%; }
.cog-gear{ fill:var(--rust-lt); }
.cog-head{ fill:var(--white); }
.cog-scroll{
  transform-box:view-box; transform-origin:50% 50%;
  transform:rotate(var(--fly-r));
}
.cog-spin{
  transform-box:view-box; transform-origin:50% 50%;
  animation:cogSpin 26s linear infinite;
  animation-play-state:paused;
}
.spin-live .cog-spin{ animation-play-state:running; }
@keyframes cogSpin{ to{ transform:rotate(360deg); } }
@media (max-width:999.98px), (max-height:699.98px), (prefers-reduced-motion: reduce){
  .hz{
    margin-top:0; height:auto; z-index:1;
    pointer-events:auto;
  }
  .hz-pin{ position:static; height:auto; overflow:visible;
           padding:clamp(48px,8vw,88px) 0; }
  .wm-line{
    position:static; height:auto;
    display:block; text-align:left;
    margin:0 var(--gut) clamp(30px,5vw,52px);
    opacity:1;
  }
  .wm-lead{
    display:block; opacity:1; white-space:normal;
    font-size:clamp(15px,3.4vw,22px);
    margin-bottom:clamp(6px,1.2vw,12px);
  }
  .wm-col{ height:auto; display:block; }
  .wm-list{
    position:static; top:auto;
    display:flex; flex-wrap:wrap;
    gap:0 .38em; white-space:normal;
  }
  .wm-list li{
    height:auto; line-height:1.05;
    font-size:clamp(30px,8.4vw,58px);
    background-image:none;
    -webkit-background-clip:border-box;
            background-clip:border-box;
    color:var(--gold);
  }
  .hub-core{
    display:block; margin:0 var(--gut) clamp(18px,3vw,28px);
  }
  .hub-fly{
    width:clamp(64px,14vw,108px); height:auto; aspect-ratio:1;
    transform:none !important; opacity:1 !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .cog-spin{ animation:none !important; }
}
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,3vw,50px); flex-wrap:wrap;
  margin-bottom:clamp(36px,4.4vw,60px);
}
.sec-head .txt{ max-width:660px; }
.sec-head .side{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.rail-btn{
  width:44px; height:44px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-light); display:grid; place-items:center;
  color:var(--ink); transition:border-color .25s, background .25s, opacity .25s, transform .3s var(--e-spring);
}
.rail-btn svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; }
.rail-btn:hover:not(:disabled){ border-color:var(--rust-deep); background:var(--rust-deep); color:var(--white); }
.rail-btn:disabled{ opacity:.28; cursor:not-allowed; }
.zone-dark .rail-btn{ border-color:var(--line-dark); color:var(--on-dark); }
.zone-dark .rail-btn:hover:not(:disabled){ background:var(--rust); color:var(--white); border-color:var(--rust); }
.head-mid{ text-align:center; max-width:860px; margin:0 auto clamp(44px,5.5vw,80px); }
.head-mid .eyebrow{ justify-content:center; }
.head-mid .eyebrow::before{ display:none; }
.head-mid .lede{ margin:20px auto 0; max-width:58ch; }
.head-mid .annot{ display:block; margin-top:24px; }
.tool-vis{
  position:relative; margin-top:20px; margin-bottom:18px;
  aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(0,48,56,.055) 0 9px, transparent 9px 18px),
    rgba(255,255,255,.55);
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(0,48,56,.08);
}
.tool-vis .ph{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; opacity:.5;
  text-align:center; padding:0 14px;
}
.player{
  position:fixed; inset:0; z-index:320;
  display:grid; place-items:center; padding:clamp(10px,3vw,34px);
  background:rgba(0,20,24,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--e-out);
}
.player.open{ opacity:1; pointer-events:auto; }
.player-card{
  position:relative; width:min(780px,100%); max-height:100%;
  overflow-y:auto; border-radius:var(--r-xl);
  background:var(--paper); color:var(--on-light);
  padding:clamp(24px,3.4vw,46px);
  transform:translateY(26px) scale(.97);
  transition:transform .5s var(--e-spring);
}
.player.open .player-card{ transform:none; }
.player-x{
  position:absolute; top:16px; right:16px; width:38px; height:38px;
  border-radius:var(--r-sm); border:1.5px solid var(--line-light);
  display:grid; place-items:center;
}
.player-x svg{ width:15px; height:15px; stroke:var(--ink); stroke-width:2; fill:none; }
.player-prog{ height:3px; border-radius:3px; background:rgba(0,48,56,.1); overflow:hidden; margin-bottom:26px; }
/* scaleX, not width. width relayouts and repaints the bar every frame of
   a 500ms transition; a scale runs on the compositor. The element is laid
   out at full width and squashed from the left instead. */
.player-prog i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:var(--rust); border-radius:3px;
  transition:transform .5s var(--e-out);
}
.player-step{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--teal); margin-bottom:14px; }
.player-q{ font-size:clamp(21px,2.5vw,31px); font-weight:800; letter-spacing:-0.035em; line-height:1.12; text-wrap:balance; }
.player-hint{ margin-top:12px; font-size:14.5px; color:var(--on-light-muted); }
.player-opts{ display:flex; flex-direction:column; gap:9px; margin:26px 0; }
.player-opt{
  text-align:left; padding:16px 18px; border-radius:var(--r-md);
  border:1.5px solid var(--line-light); background:var(--white);
  font-size:15px; font-weight:600; color:var(--on-light);
  display:flex; align-items:center; gap:13px;
  transition:border-color .25s, background .25s, transform .3s var(--e-spring);
}
.player-opt:hover{ border-color:var(--rust); transform:translateX(4px); }
.player-opt[aria-pressed="true"]{ border-color:var(--ink); background:var(--mint-pale); }
.player-opt .k{
  width:26px; height:26px; border-radius:7px; flex-shrink:0;
  background:var(--mint-pale); color:var(--teal-deep);
  font-family:var(--mono); font-size:11px; display:grid; place-items:center;
}
.player-opt[aria-pressed="true"] .k{ background:var(--ink); color:var(--gold); }
.player-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.player-note{
  margin-top:22px; padding:14px 16px; border-radius:var(--r-md);
  background:rgba(0,124,137,.07); border:1px dashed rgba(0,124,137,.32);
  font-family:var(--mono); font-size:10px; letter-spacing:.09em; line-height:1.7;
  text-transform:uppercase; color:var(--teal);
}
.player-res{ display:none; text-align:center; }
.player.done .player-res{ display:block; }
.player.done .player-quiz{ display:none; }
.res-badge{
  width:96px; height:96px; margin:0 auto 22px; border-radius:26px;
  background:var(--ink); color:var(--gold);
  display:grid; place-items:center;
  font-size:34px; font-weight:800;
  animation:pop .7s var(--e-spring);
}
@keyframes pop{ from{transform:scale(.5) rotate(-14deg);opacity:0} to{transform:none;opacity:1} }
.res-k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); }
.res-t{ margin-top:10px; font-size:clamp(26px,3.2vw,40px); font-weight:800; letter-spacing:-0.04em; }
.res-d{ margin:14px auto 0; max-width:46ch; font-size:15px; line-height:1.6; color:var(--on-light-muted); }
.res-acts{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.res-cap{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line-light); }
.res-cap form{ display:flex; gap:8px; max-width:420px; margin:12px auto 0; }
.res-cap input{
  flex:1; padding:13px 15px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-light); background:var(--white);
  font-family:inherit; font-size:14px; color:var(--on-light);
}
.res-cap input:focus{ outline:none; border-color:var(--rust); box-shadow:0 0 0 3px rgba(241,88,34,.14); }
@media(max-width:980px){ .tool-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:660px){ .tool-grid{ grid-template-columns:1fr; } }
.tgrid{
  --bento-gap:clamp(16px,2vw,30px);
  display:grid;
  grid-template-columns:repeat(20, minmax(0,1fr));
  gap:var(--bento-gap);
  align-items:stretch;
  padding-block:clamp(0px,2vw,32px);
  perspective:1500px;
  perspective-origin:50% 42%;
}
@media(max-width:620px){ .tgrid{ perspective:none; } }
.b-text { grid-column:1  / span 14; grid-row:1; }
.b-quest{ grid-column:15 / span 6;  grid-row:1; }
.b-adv  { grid-column:1  / span 14; grid-row:2; }
.b-clin { grid-column:15 / span 6;  grid-row:2; }
.b-vals { grid-column:1  / span 6;  grid-row:3; }
.b-adopt{ grid-column:7  / span 14; grid-row:3; }
.b-light{ grid-column:1  / span 10; grid-row:4; }
.b-cog  { grid-column:11 / span 10; grid-row:4; }
.tgrid > .ct{ width:100%; align-self:stretch; }
.tgrid > .b-clin, .tgrid > .b-vals{ align-self:start; }
.ts-stage > .ts-dev{ justify-self:center; align-self:center; }
@media(max-width:900px){
  .tgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(12px,2vw,22px); }
  .tgrid > *{ grid-column:auto !important; grid-row:auto !important; }
}
@media(max-width:620px){
  .tgrid{ grid-template-columns:minmax(0,1fr); }
}
.ct{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-md);
  container-type:inline-size;
  transition:box-shadow .5s var(--e-out);
}
.ct[data-rv]{
  transition:box-shadow .5s var(--e-out),
             opacity .8s var(--e-out),
             transform 1.05s var(--e-out);
}
.ct:hover, .ct:focus-within{ box-shadow:0 40px 74px -40px rgba(0,48,56,.46); }
.ct > img, .ct > video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--e-out);
}
.ct:hover > img, .ct:focus-within > img{ transform:scale(1.045); }
.r-land { aspect-ratio:4/3; }
.r-port { aspect-ratio:3/4; }
.r-wide { aspect-ratio:3/2; }
.r-tall { aspect-ratio:1/1.75; }
.r-sq   { aspect-ratio:1/1; }
.r-strip{ aspect-ratio:5/2; }
.ts-stage{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  padding:clamp(14px,2.6vw,40px);
}
.ts-dev{ position:relative; display:block; width:100%; height:auto; }
.ts-dev-laptop { aspect-ratio:2368/1377; }
.ts-dev-mobile { aspect-ratio:843/1709;  width:auto; height:100%; }
.ts-dev-desktop{ aspect-ratio:2300/1988; width:auto; height:100%; }
.ts-frame{ position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%; }
.ts-screen{
  display:block;
  position:absolute; z-index:1; overflow:hidden;
  background:var(--ink-deep);
}
.ts-dev-laptop  .ts-screen{ left:10.008%; top:2.614%; width:80.912%; height:80.392%; }
.ts-dev-mobile  .ts-screen{ left:5.101%;  top:2.224%; width:89.917%; height:95.260%; border-radius:5%/2.6%; }
.ts-dev-desktop .ts-screen{ left:4.957%;  top:5.684%; width:90.304%; height:59.054%; }
.ts-bare{ display:block; width:100%; }
.ts-bare .ts-screen{
  position:relative; left:auto; top:auto; width:100%; height:auto;
  aspect-ratio:1/1.24; border-radius:var(--r-sm);
  box-shadow:0 18px 40px -22px rgba(0,31,36,.5);
}
.r-land .ts-bare .ts-screen{ aspect-ratio:16/10; }
.ts-bare-wide.ts-bare .ts-screen{ aspect-ratio:1806/1488; }
.ts-browser{
  display:block; width:100%; border-radius:var(--r-sm); overflow:hidden;
  background:var(--white);
  box-shadow:0 20px 44px -24px rgba(0,31,36,.55);
}
.ts-bar{
  display:flex; align-items:center; gap:5px;
  padding:8px 10px; background:#e8eced;
  box-shadow:inset 0 -1px 0 rgba(0,48,56,.09);
}
.ts-bar i{
  width:7px; height:7px; border-radius:50%; background:rgba(0,48,56,.26);
  flex:0 0 auto;
}
.ts-browser .ts-screen{
  position:relative; left:auto; top:auto; width:100%; height:auto;
  aspect-ratio:16/10;
}
.ts-media{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 50%;
  opacity:0; transition:opacity .7s var(--e-out);
}
video.ts-media{ opacity:1; }
img.ts-media.is-on{ opacity:1; }
.ts-empty{
  position:absolute; inset:0; display:grid; place-items:center;
  background:repeating-linear-gradient(135deg, rgba(226,244,244,.07) 0 8px, transparent 8px 16px), var(--ink-deep);
  color:var(--on-dark-faint);
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  text-align:center; padding:0 12px;
}
.t-plain{ background:transparent; color:var(--on-light); }
.t-plain.ct:hover, .t-plain.ct:focus-within{ box-shadow:none; }
.t-pale{ background:var(--mint-pale); color:var(--teal-deep); }
.t-mint{ background:var(--mint);      color:var(--teal-deep); }
/* The section-background tint — same pair .zone-mint and .bt-pale use, so
   a tools tile can sit at that weight without inventing a new colour. */
.t-pale{ background:var(--mint-pale); color:var(--teal-deep); }
.t-ink { background:var(--ink);       color:var(--mint); }
.t-deep{ background:var(--teal-deep); color:var(--mint); }
.t-sand{ background:var(--sand);      color:#7a4a1e; }
.t-gold{ background:var(--gold-lt);   color:#6b4a00; }
.t-rust{ background:var(--rust-lt);   color:#5c2a0c; }
.t-line{ background:var(--white);     color:var(--on-light-faint); box-shadow:inset 0 0 0 1px var(--line-light); }
.tools{ background:var(--white); }
.ct-text{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(24px,3vw,48px);
}
.ct-text:hover, .ct-text:focus-within{ box-shadow:none; }
.cx-type{
  position:relative;
  font-size:clamp(19px,2.05vw,29px); font-weight:700;
  letter-spacing:-0.022em; line-height:1.3; color:var(--ink);
}
.cx-ghost{ display:block; }
.js .cx-ghost{ opacity:0; }
.cx-run{ position:absolute; inset:0; display:block; }
.cx-type.is-typing .cx-run::after{
  content:''; display:inline-block;
  width:.06em; height:.92em; margin-left:.06em; vertical-align:-.1em;
  background:currentColor;
  animation:caretBlink .85s steps(1) infinite;
}
@keyframes caretBlink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .js .cx-ghost{ opacity:1; }
  .cx-run{ display:none; }
}
.ct-tag, .ct-soon{
  position:absolute; z-index:3; top:clamp(12px,1.1vw,18px);
  padding:6px 11px; border-radius:100px;
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  transition:opacity .35s var(--e-out), transform .35s var(--e-out);
}
.ct-tag { left:clamp(12px,1.1vw,18px);  background:rgba(255,255,255,.84); color:var(--on-light); }
.ct-soon{ right:clamp(12px,1.1vw,18px); background:rgba(0,31,36,.5); color:var(--mint); }
.ct:hover .ct-tag, .ct:focus-within .ct-tag,
.ct:hover .ct-soon,.ct:focus-within .ct-soon{ opacity:0; transform:translateY(-8px); }
.ct-body{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:clamp(18px,2vw,30px);
  color:var(--on-dark);
  background:linear-gradient(to top,
    rgba(0,31,36,.95) 0%, rgba(0,31,36,.9) 38%, rgba(0,31,36,.6) 72%, rgba(0,31,36,.22) 100%);
  opacity:0; pointer-events:none;
  transition:opacity .45s var(--e-out);
}
.ct:hover .ct-body, .ct:focus-within .ct-body{ opacity:1; pointer-events:auto; }
.ct-body > *{
  transform:translateY(16px);
  transition:transform .5s var(--e-out) var(--d,0s);
}
.ct-body > *:nth-child(1){ --d:.02s; }
.ct-body > *:nth-child(2){ --d:.07s; }
.ct-body > *:nth-child(3){ --d:.12s; }
.ct-body > *:nth-child(4){ --d:.17s; }
.ct:hover .ct-body > *, .ct:focus-within .ct-body > *{ transform:none; }
.ct-t{
  font-size:clamp(19px,1.9vw,26px); font-weight:800;
  letter-spacing:-0.035em; line-height:1.1; color:var(--on-dark);
}
.ct-d{
  margin-top:9px; font-size:14px; line-height:1.55;
  color:var(--on-dark-muted); max-width:46ch;
}
.ct-meta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; }
.ct-meta span{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mint);
}
.ct-meta svg{ width:12px; height:12px; stroke:currentColor; stroke-width:2; fill:none; }
.ct-btn{
  margin-top:16px; display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border:0; border-radius:100px; cursor:pointer;
  text-decoration:none;
  background:var(--white); color:var(--ink-deep);
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:-0.01em;
  transition:background .35s var(--e-out), box-shadow .35s var(--e-out),
             transform .5s var(--e-out) var(--d,0s);
}
.ct-btn:hover{ background:var(--gold); box-shadow:0 14px 28px -14px rgba(255,177,20,.7); }
.ct-btn svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none; transition:transform .35s var(--e-spring); }
.ct-btn:hover svg{ transform:translateX(4px); }
.ct-btn.is-soon{
  background:rgba(226,244,244,.14); color:var(--on-dark); cursor:default;
  box-shadow:inset 0 0 0 1px rgba(226,244,244,.26);
}
.ct-btn.is-soon:hover{
  background:rgba(226,244,244,.22);
  box-shadow:inset 0 0 0 1px rgba(226,244,244,.36);
}
.ct-btn.is-soon:hover svg{ transform:none; }
.ct-deco{ pointer-events:none; }
.ct-deco:hover{ box-shadow:none; }
.ph-slot{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center; gap:8px;
  padding:16px; text-align:center;
  background-image:repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 11px);
  opacity:.34;
  transition:opacity .45s var(--e-out);
}
.ct:hover .ph-slot, .ct:focus-within .ph-slot{ opacity:.14; }
.ph-slot .box{
  background:inherit; opacity:1;
  padding:10px 14px; border-radius:var(--r-xs);
  backdrop-filter:blur(2px);
}
.ph-slot .lbl{
  display:block;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.7;
}
.ph-slot .dim{ display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; opacity:.68; }
.cnote{
  font-size:clamp(17px,1.7vw,24px); font-weight:800;
  letter-spacing:-0.035em; line-height:1.12; color:var(--ink);
  padding:clamp(6px,1vw,14px) 0;
}
.cnote em{ font-style:normal; color:var(--rust); }
@media (hover:none){
  .ct-body{ opacity:1; pointer-events:auto; }
  .ct-body > *{ transform:none; }
  .ph-slot{ opacity:.14; }
}
@container (max-width:300px){
  .ct-d{ display:none; }
}
@media (max-width:900px) and (min-width:621px){
  .r-wide, .r-land{ aspect-ratio:1/1; }
}
@media(max-width:620px){
  .r-wide, .r-land{ aspect-ratio:4/3; }
  .r-tall{ aspect-ratio:1/1.6; }
}
@media (prefers-reduced-motion: reduce){
  .ct-body > *{ transform:none !important; }
  .ct:hover > img, .ct:focus-within > img{ transform:none !important; }
  .ct-body, .ct-body > *, .ct-tag, .ct-soon, .ph-slot, .ct > img{ transition:none !important; }
  .ts-media{ transition:none !important; }
}
.rail-wrap{ position:relative; }
.rail{
  --per-view:3;
  --rail-gap:clamp(12px,1.5vw,20px);
  display:flex; gap:var(--rail-gap);
  overflow-x:auto;
  /* Room for the 7px hover lift and the long card shadow — overflow-x:auto
     clips vertically as well. The negative margins hand the extra space
     back so the section doesn't grow. */
  padding:16px 0 60px;
  margin-block:-10px -26px;
  scrollbar-width:none;
}
@media(max-width:1000px){ .rail{ --per-view:2; } }
@media(max-width:640px){  .rail{ --per-view:1; } }
.rail::-webkit-scrollbar{ display:none; }
.pd-flow{
  list-style:none; margin:clamp(30px,4vw,54px) 0 0; padding:0;
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.pd-flow li{
  position:relative;
  padding:clamp(22px,2.2vw,30px);
  border-radius:var(--r-lg);
  background:var(--mint-pale);
  color:var(--teal-deep);
  display:flex; flex-direction:column;
}
.pd-flow .n{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  opacity:.55; margin-bottom:14px;
}
.pd-flow h3{
  font-size:clamp(16px,1.35vw,19px); font-weight:800;
  letter-spacing:-0.03em; line-height:1.15;
}
.pd-flow p{
  margin-top:9px; font-size:14.5px; line-height:1.5; opacity:.82;
}
.pd-flow .when{
  margin-top:auto; padding-top:16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rust-deep);
}
.rail.rv-snap{ scroll-snap-type:x mandatory; }
html:not(.js) .rail{ scroll-snap-type:x mandatory; }
.pcard{
  will-change:transform;
  position:relative; flex:0 0 auto;
  width:calc((100% - (var(--per-view) - 1) * var(--rail-gap)) / var(--per-view));
  border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) clamp(26px,2.6vw,36px);
  scroll-snap-align:start;
  overflow:hidden; cursor:pointer;
  transition:translate .55s var(--e-out), box-shadow .55s var(--e-out);
}
.zone-dark .pcard{
  box-shadow:0 26px 50px -26px rgba(0,12,15,.65), 0 2px 5px -2px rgba(0,12,15,.4);
}
.pcard[data-rv]{
  transition:transform .78s var(--e-out),
             translate .55s var(--e-out),
             box-shadow .55s var(--e-out),
             opacity .55s var(--e-out);
}
/* translate, not transform — and this is a FIX, not a preference.
   The reveal system ends at `[data-rv]:not([data-rv="slide-z"]).in{
   transform:none }`, which is specificity (0,3,0) against this rule's
   (0,2,0). So while these cards carried transform:translateY(-7px) the
   lift never actually applied to any card that had been revealed, which
   is every card on the page. Only the shadow was landing. The comment
   in the Rapid renderer claiming that dropping data-drift "restores the
   hover lift" was half right: drift was one of two things blocking it.
   `translate` is an independent transform property, so it composes with
   whatever `transform` is set to instead of losing a specificity fight
   with it — and it is immune to the drift engine's inline transform too. */
.pcard:hover{ translate:0 -7px; box-shadow:0 40px 70px -38px rgba(0,48,56,.5); }
.zone-dark .pcard:hover{ box-shadow:0 44px 80px -30px rgba(0,12,15,.8), 0 3px 8px -2px rgba(0,12,15,.45); }
.pcard-h{
  min-height:clamp(430px,41vw,520px);
  display:flex; flex-direction:column;
}
.pc-mint{ background:var(--mint);      color:var(--ink); }
.pc-pale{ background:var(--mint-pale); color:var(--ink); }
.pc-ink { background:var(--ink);       color:var(--on-dark); }
.pc-deep{ background:var(--teal-deep); color:var(--on-dark); }
.pc-teal{ background:var(--teal);      color:#fff; }
.pc-rust{ background:var(--rust-lt);   color:var(--ink); }
.pc-sand{ background:var(--gold-lt);   color:var(--ink); }
.pc-gold{ background:var(--gold);      color:var(--ink); }
.pc-cream{ background:var(--sand);     color:var(--ink); }
.pc-idx{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; opacity:.66; margin-bottom:14px;
}
.pc-t{ font-size:clamp(17px,1.6vw,21px); font-weight:800; letter-spacing:-0.035em; line-height:1.1; }
/* Every card title takes its card's own colour — which for all nine
   light variants is --ink. There used to be an exception here forcing
   --on-dark on rust cards inside a dark section, so card 03 alone ran a
   white heading over a dark body. Nothing else did that. */
.pcard .pc-t{ color:inherit; }
.pc-d{ margin-top:12px; font-size:clamp(14.5px,1.08vw,16.5px); line-height:1.5; opacity:.86; }
.pc-list{ margin-top:16px; display:flex; flex-direction:column; gap:7px; }
.pc-list li{ display:flex; gap:9px; font-size:12.5px; line-height:1.45; opacity:.86; }
.pc-list li::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; margin-top:6px; opacity:.6; }
.pcard > *:not(.pc-ico):not(.pc-rev):not(.pc-label){ position:relative; z-index:1; }
.pc-ico{
  position:absolute; z-index:0;
  right:-8px; bottom:-6px;
  width:clamp(138px,13.5vw,182px); aspect-ratio:1;
  pointer-events:none;
  transition:opacity .38s var(--e-out), transform .55s var(--e-out);
}
.pc-ico img{ width:100%; height:100%; object-fit:contain; display:block; }
.pcard:hover .pc-ico,
.pcard:focus-visible .pc-ico,
.pcard:focus-within .pc-ico{ opacity:0; transform:translateY(16px) scale(.94); }
.pc-rev{
  position:absolute; z-index:2; inset:auto 0 0 0;
  padding:0 clamp(22px,2.2vw,30px) clamp(26px,2.6vw,36px);
  opacity:0; transform:translateY(14px);
  pointer-events:none;
  background:inherit;
  transition:opacity .34s var(--e-out), transform .5s var(--e-out);
}
.pc-rev::before{
  content:''; position:absolute; left:0; right:0; bottom:100%; height:26px;
  background:inherit;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
          mask-image:linear-gradient(to top,#000,transparent);
}
.pcard:hover .pc-rev,
.pcard:focus-visible .pc-rev,
.pcard:focus-within .pc-rev{ opacity:1; transform:none; }
.pc-rev .pc-idx{ font-size:11px; letter-spacing:.13em; margin-bottom:11px; }
.pc-inc{ display:flex; flex-direction:column; gap:9px; }
.pc-inc li{
  --d:calc(var(--i,0) * 85ms);
  display:flex; align-items:stretch; gap:11px;
  font-size:15px; line-height:1.42;
  opacity:0; transform:translateY(7px);
  transition:opacity .32s var(--e-out), transform .32s var(--e-out);
}
.pc-inc .tk{
  width:20px; height:20px; border-radius:6px; flex-shrink:0;
  margin-top:1px;
  display:grid; place-items:center;
  background:color-mix(in srgb, currentColor 13%, transparent);
  transform:scale(.55);
  transition:transform .42s var(--e-spring);
}
.pc-inc .tk svg{
  width:11px; height:11px; fill:none;
  stroke:currentColor; stroke-width:2.9;
  stroke-dasharray:24; stroke-dashoffset:24;
  transition:stroke-dashoffset .4s var(--e-out);
}
.pcard:hover .pc-inc li,
.pcard:focus-within .pc-inc li{ opacity:1; transform:none; transition-delay:var(--d); }
.pcard:hover .pc-inc .tk,
.pcard:focus-within .pc-inc .tk{ transform:none; transition-delay:calc(var(--d) + 50ms); }
.pcard:hover .pc-inc .tk svg,
.pcard:focus-within .pc-inc .tk svg{ stroke-dashoffset:0; transition-delay:calc(var(--d) + 130ms); }
.pc-out{
  margin-top:15px; padding-top:13px;
  border-top:1px solid color-mix(in srgb, currentColor 22%, transparent);
  opacity:0; transform:translateY(7px);
  transition:opacity .36s var(--e-out), transform .36s var(--e-out);
}
.pc-out p{ font-size:14px; line-height:1.5; opacity:.84; }
.pcard:hover .pc-out,
.pcard:focus-within .pc-out{ opacity:1; transform:none; transition-delay:.32s; }
@media (hover:none){
  .pc-ico{
    position:relative; right:auto; bottom:auto; z-index:1;
    width:108px; margin:18px 0 4px auto;
    opacity:1; transform:none;
  }
  .pc-rev{
    position:relative; inset:auto; z-index:1;
    margin-top:auto; padding:18px 0 0;
    opacity:1; transform:none; pointer-events:auto;
    background:none;
  }
  .pc-rev::before{ display:none; }
  .pc-inc li, .pc-out{ opacity:1; transform:none; }
  .pc-inc .tk{ transform:none; }
  .pc-inc .tk svg{ stroke-dashoffset:0; }
}
@media (prefers-reduced-motion: reduce){
  .pc-ico, .pc-rev, .pc-inc li, .pc-inc .tk, .pc-inc .tk svg, .pc-out{
    transition-duration:1ms !important; transition-delay:0s !important;
  }
}
.pc-label{
  position:absolute; bottom:0; left:0; z-index:3;
  padding:16px 24px;
  border-radius:0 var(--r-md) 0 var(--r-lg);
  font-size:14.5px; font-weight:700; letter-spacing:-0.02em;
  box-shadow:0 -6px 22px -12px rgba(0,48,56,.4);
  display:flex; align-items:center; gap:10px;
  min-width:62%;
  transition:min-width .5s var(--e-out), padding .5s var(--e-out);
}
.pcard:hover .pc-label{ min-width:76%; }
.pc-label .arw{ margin-left:auto; opacity:0; transform:translateX(-6px); transition:opacity .4s, transform .4s var(--e-spring); }
.pcard:hover .pc-label .arw{ opacity:1; transform:none; }
.pc-label svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none; }
.lb-ink { background:var(--ink);       color:var(--on-dark); }
.lb-mint{ background:var(--mint);      color:var(--teal-deep); }
.lb-pale{ background:var(--mint-pale); color:var(--teal-deep); }
.lb-rust{ background:var(--rust-deep); color:#fff; }
.lb-sand{ background:var(--gold-lt);   color:#5a3c00; }
.lb-gold{ background:var(--gold);      color:#4a3200; }
.lb-white{ background:var(--white);    color:var(--ink); }
.pc-price{
  display:flex; align-items:baseline; gap:8px; margin-top:16px;
  padding-top:15px; border-top:1px solid currentColor;
  border-color:color-mix(in srgb, currentColor 22%, transparent);
}
.pc-price .amt{ font-size:clamp(25px,2.4vw,33px); font-weight:800; letter-spacing:-0.045em; line-height:1; font-variant-numeric:tabular-nums; }
.pc-price .cur{ font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; opacity:.7; }
.pc-price .ph-flag{
  margin-left:auto; padding:4px 8px; border-radius:5px;
  background:rgba(241,88,34,.16); color:inherit;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
}
.pc-ink .pc-price .ph-flag,.pc-deep .pc-price .ph-flag{ background:rgba(255,177,20,.2); }
.tiers{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.tier{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r-xs);
  border:1.5px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size:12.5px; font-weight:600; text-align:left;
  transition:border-color .25s, background .25s;
  width:100%;
}
.tier:hover{ border-color:currentColor; }
.tier[aria-checked="true"]{ border-color:currentColor; background:color-mix(in srgb, currentColor 11%, transparent); }
.tier .rd{
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  border:1.5px solid currentColor; opacity:.5;
  display:grid; place-items:center;
}
.tier[aria-checked="true"] .rd{ opacity:1; }
.tier[aria-checked="true"] .rd::after{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tier .tp{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; }
.pc-cta{
  width:100%; margin-top:16px; padding:14px 18px;
  border-radius:var(--r-sm);
  font-size:13.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .3s var(--e-spring), filter .25s;
}
.pc-cta:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.pc-cta svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none; }
.cta-on-light{ background:var(--ink); color:var(--on-dark); }
.cta-on-dark { background:var(--paper); color:var(--ink); }
.pc-cta.added{ background:#0f7a3d !important; color:#fff !important; }
.rail-hint{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-light-faint);
}
.zone-dark .rail-hint{ color:var(--on-dark-faint); }
.rail-hint .dots{ display:flex; gap:5px; }
.rail-hint .dots i{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.3; transition:opacity .3s, width .3s; }
.rail-hint .dots i.on{ opacity:1; width:16px; border-radius:3px; background:var(--rust); }
.incl{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,44px); padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px);
  border-radius:var(--r-lg); background:var(--ink); color:var(--on-dark);
}
.zone-dark .incl{
  background:rgba(226,244,244,.07);
  box-shadow:inset 0 0 0 1px rgba(226,244,244,.13);
}
.zone-dark .incl .tick{ background:var(--mint); }
.zone-dark .incl .tick svg{ stroke:var(--ink); }
.incl .lbl{ font-size:13px; font-weight:800; letter-spacing:-0.01em; }
.incl ul{ display:flex; gap:clamp(14px,2vw,28px); flex-wrap:wrap; }
.incl li{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--on-dark-muted); }
.incl .tick{ width:19px; height:19px; border-radius:5px; background:var(--teal); display:grid; place-items:center; flex-shrink:0; }
.incl .tick svg{ width:11px; height:11px; stroke:#fff; stroke-width:2.6; fill:none; }
.incl .btn{ margin-left:auto; }
.scrim{
  position:fixed; inset:0; z-index:290;
  background:rgba(0,20,24,.55);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--e-out);
}
.scrim.open{ opacity:1; pointer-events:auto; }
.cart{
  position:fixed; top:0; right:0; bottom:0; z-index:295;
  width:min(430px,100%);
  background:var(--paper); color:var(--on-light);
  display:flex; flex-direction:column;
  /* The short duration is the EXIT: it lives on the closed state, so it
     applies when .open is removed. Entry overrides it below. The user has
     already decided by the time it closes, so the panel gets out of the
     way rather than being savoured. */
  transform:translateX(101%); transition:transform .28s var(--e-out);
  box-shadow:-30px 0 70px -30px rgba(0,32,38,.4);
}
.cart.open{ transform:none; transition-duration:.55s; }
.cart-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:22px 24px; border-bottom:1px solid var(--line-light);
}
.cart-head h3{ font-size:19px; letter-spacing:-0.03em; }
.cart-head .x{ width:36px; height:36px; border-radius:var(--r-sm); border:1.5px solid var(--line-light); display:grid; place-items:center; }
.cart-head .x svg{ width:15px; height:15px; stroke:var(--ink); stroke-width:2; fill:none; }
.cart-body{ flex:1; overflow-y:auto; padding:18px 24px; }
.u-hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.enq-err{
  margin-top:12px; padding:11px 14px;
  border-radius:var(--r-sm);
  background:rgba(198,40,40,.08);
  box-shadow:inset 0 0 0 1px rgba(198,40,40,.22);
  color:#9c1f1f; font-size:13.5px; line-height:1.45;
}
.enq-err[hidden]{ display:none; }
.cart-empty{ text-align:center; padding:56px 10px; color:var(--on-light-muted); }
.cart-empty .ic{
  width:62px; height:62px; margin:0 auto 18px; border-radius:18px;
  background:var(--mint-pale); display:grid; place-items:center; color:var(--teal);
}
.cart-empty .ic svg{ width:24px; height:24px; stroke:currentColor; stroke-width:1.8; fill:none; }
.cart-empty p{ font-size:14.5px; }
.ci{ display:flex; gap:13px; padding:15px 0; border-bottom:1px solid var(--line-light); }
.ci-sw{ width:52px; height:52px; border-radius:var(--r-sm); flex-shrink:0; }
.ci-b{ flex:1; min-width:0; }
.ci-t{ font-size:14px; font-weight:700; letter-spacing:-0.02em; line-height:1.25; }
.ci-m{ margin-top:3px; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--on-light-faint); }
.ci-r{ display:flex; align-items:center; gap:12px; margin-top:9px; }
.qty{ display:inline-flex; align-items:center; gap:2px; border:1.5px solid var(--line-light); border-radius:var(--r-xs); }
.qty button{ width:26px; height:26px; display:grid; place-items:center; font-size:14px; font-weight:700; color:var(--on-light-muted); }
.qty button:hover{ color:var(--ink); }
.qty .v{ min-width:24px; text-align:center; font-family:var(--mono); font-size:12px; }
.ci-p{ margin-left:auto; font-size:14px; font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.ci-x{ font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--on-light-faint); border-bottom:1px solid currentColor; }
.ci-x:hover{ color:var(--rust-deep); }
.cart-foot{ border-top:1px solid var(--line-light); padding:20px 24px 24px; background:var(--white); }
.cart-row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--on-light-muted); margin-bottom:8px; }
.cart-row.tot{ font-size:19px; font-weight:800; letter-spacing:-0.035em; color:var(--ink); margin:14px 0 4px; }
.cart-gst{ font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--on-light-faint); }
.cart-foot .btn{ width:100%; margin-top:16px; }
.cart-pay{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-light-faint);
}
.cart-po{
  margin-top:14px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--mint-pale); font-size:12px; line-height:1.55; color:var(--teal-deep);
}
.cart-po b{ font-weight:700; }
.enq{  }
.enq .f-row{ margin-bottom:15px; }
.enq label,.enq .f-lbl{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-light-faint); margin-bottom:7px; }
.enq input,.enq select,.enq textarea{
  width:100%; padding:13px 14px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-light); background:var(--white);
  font-family:inherit; font-size:14.5px; color:var(--on-light);
}
.enq textarea{ min-height:88px; resize:vertical; }
.enq input:focus,.enq select:focus,.enq textarea:focus{ outline:none; border-color:var(--rust); box-shadow:0 0 0 3px rgba(241,88,34,.14); }
.chipset{ display:flex; gap:7px; flex-wrap:wrap; }
.chipset button{
  padding:9px 13px; border-radius:100px; border:1.5px solid var(--line-light);
  font-size:12.5px; font-weight:600; color:var(--on-light-muted);
  transition:background-color .25s, color .25s, box-shadow .25s;
}
.chipset button[aria-pressed="true"]{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }
.faq{ background:var(--mint-pale); }
.faq-grid{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(30px,4.6vw,80px); align-items:start; }
.faq-left{ position:sticky; top:120px; }
.acc{ border-top:1px solid rgba(0,48,56,.14); }
.acc-i{ border-bottom:1px solid rgba(0,48,56,.14); }
.acc-q{
  width:100%; display:flex; align-items:flex-start; gap:16px;
  padding:20px 0; text-align:left;
  font-size:clamp(15.5px,1.5vw,19px); font-weight:700; letter-spacing:-0.025em; line-height:1.35;
  color:var(--ink);
}
.acc-q .pm{
  margin-left:auto; flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--white); display:grid; place-items:center;
  transition:background .3s, transform .45s var(--e-spring);
}
.acc-q .pm svg{ width:12px; height:12px; stroke:var(--rust-deep); stroke-width:2.4; fill:none; transition:stroke .3s; }
.acc-i[data-open="true"] .acc-q .pm{ background:var(--rust); transform:rotate(135deg); }
.acc-i[data-open="true"] .acc-q .pm svg{ stroke:var(--white); }
/* Both properties on the same duration and the same curve. Opacity used
   to be .4s with the default ease, so the text hit full strength 150ms
   before the panel stopped moving and the last of the opening happened
   against already-solid copy.

   max-height is the sanctioned exception to transform-and-opacity-only:
   an accordion has no transform equivalent. --acc-h is the panel's real
   scrollHeight, measured once per item by the accordion script, so the
   travel is exactly the content's height. The old value was a flat 460px
   magic number, which was comfortably above today's longest answer but
   would have silently clipped any longer one added later. */
.acc-a{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .55s var(--e-out), opacity .55s var(--e-out);
}
.acc-i[data-open="true"] .acc-a{ max-height:var(--acc-h,1200px); opacity:1; }
.acc-a .in{ padding:0 46px 22px 0; font-size:15px; line-height:1.65; color:var(--on-light-muted); max-width:62ch; }
.acc-a .in b{ color:var(--ink); font-weight:700; }
.trust{ margin-top:clamp(34px,4vw,54px); display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.trust-i{ padding:18px 20px; border-radius:var(--r-md); background:var(--white); }
.trust-i .ic{ width:30px; height:30px; border-radius:8px; background:var(--mint-pale); display:grid; place-items:center; color:var(--teal); margin-bottom:12px; }
.trust-i .ic svg{ width:15px; height:15px; stroke:currentColor; stroke-width:2; fill:none; }
.trust-i .t{ font-size:13.5px; font-weight:700; letter-spacing:-0.02em; }
.trust-i .d{ margin-top:5px; font-size:12.5px; line-height:1.5; color:var(--on-light-muted); }
@media(max-width:940px){
  .faq-grid{ grid-template-columns:1fr; gap:30px; }
  .faq-left{ position:static; }
}
.eco{ background:var(--paper); }
.eco-row{
  --eco-gap:clamp(12px,1.5vw,20px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--eco-gap);
  align-items:stretch;
  width:100%;
  pointer-events:auto;
}
@media(max-width:1000px){
  .eco-row{ grid-template-columns:1fr; }
}
/* ── The two side cards ─────────────────────────────────────────────
   These carry data-rv="slide-right", the same entrance as the Rapid
   tiles, and it was not running. Both halves of it were being eaten by
   the zoom-out this block applies as the Opposite panel expands:

     transform  the zoom set transform:scale(...) at (0,1,0), tying with
                [data-rv="slide-right"]'s (0,1,0) and winning on source
                order — so the 84px slide never applied. Worse, once the
                card revealed, [data-rv]:not(...).in{transform:none} at
                (0,3,0) beat the zoom itself, so the shrink stopped
                working too. Both effects cancelled each other out.
     opacity    [data-rv].in{opacity:1} at (0,2,0) outranked the zoom's
                (0,1,0) fade, pinning the cards opaque for the whole
                zoom.

   The fix keeps each property with one owner. The shrink moves to the
   independent `scale` property, which composes with transform instead of
   competing with it — the entrance's scale(1.09) and this multiply, and
   transform:none no longer touches it. The fade stays on opacity but is
   restated at a specificity that wins, with the hidden state restated
   alongside it so the entrance still starts from zero. The .js guard
   mirrors the base rule: without scripting nothing ever adds .in, so an
   unguarded opacity:0 would hide these permanently. */
.eco-side{
  scale:calc(1 - min(1, var(--ez-p, 0) / .45) * .08);
  transform-origin:50% 50%;
  will-change:opacity, scale, transform;
}
.js .ecoz .eco-side[data-rv]      { opacity:0; }
.js .ecoz .eco-side[data-rv].in   { opacity:calc(1 - min(1, var(--ez-p, 0) / .45)); }
.ecoz.on .eco-side{ pointer-events:none; }
.eco-c{
  position:relative; overflow:hidden;
  padding:clamp(24px,2.6vw,36px);
  border-radius:var(--r-lg);
  background:var(--white); box-shadow:0 0 0 1px var(--line-light);
  display:flex; flex-direction:column;
  transition:translate .5s var(--e-out), box-shadow .5s var(--e-out);
}
/* Mirrors .pcard[data-rv] exactly, and for the same reason: .eco-c's own
   transition above is (0,1,0) and sits later in the file than
   [data-rv="slide-right"]'s, so it was replacing it wholesale — leaving
   transform on .5s and opacity with no transition at all, i.e. an
   instant pop rather than a fade. Restating all four here puts the
   Rapid timings back. `scale` is deliberately absent: it is scrubbed
   against scroll and must not lag behind it. */
.eco-c[data-rv]{
  transition:transform .78s var(--e-out),
             translate .5s var(--e-out),
             box-shadow .5s var(--e-out),
             opacity .55s var(--e-out);
}
/* translate, not transform — same specificity trap that was hiding the
   .pcard hover lift. See the note there. */
.eco-c:hover{ translate:0 -5px; box-shadow:0 0 0 1px transparent, 0 34px 60px -34px rgba(0,48,56,.36); }
.eco-c::after{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--teal); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e-out);
}
.eco-c:hover::after{ transform:scaleX(1); }
.eco-logo{
  height:clamp(76px,7.4vw,92px);
  margin-bottom:22px;
  display:flex; align-items:flex-end; justify-content:flex-start;
  transition:transform .5s var(--e-out);
}
.eco-logo img{
  max-height:100%; max-width:100%;
  width:auto; height:auto;
  object-fit:contain; object-position:left bottom;
}
.ecoz-logo img{ max-height:48%; }
.eco-c:hover .eco-logo{ transform:translateY(-3px); }
.eco-tag{
  align-self:flex-start; padding:5px 10px; border-radius:100px;
  background:var(--mint-pale); color:var(--teal-deep);
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
}
.eco-t{ margin-top:14px; font-size:clamp(21px,2.1vw,27px); font-weight:800; letter-spacing:-0.035em; }
.eco-d{ margin-top:10px; font-size:14.5px; line-height:1.58; color:var(--on-light-muted); }
.eco-l{
  position:relative; align-self:flex-start;
  margin-top:auto; padding-top:22px; display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:700; color:var(--teal);
}
/* Underline that draws in from the left on hover, rather than a static
   text-decoration appearing all at once. align-self:flex-start above is
   what keeps it the width of the link and not the width of the card. */
.eco-l::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px;
  height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--e-out);
}
.eco-c:hover .eco-l::after,
.eco-l:focus-visible::after{ transform:scaleX(1); }
.eco-l svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none; transition:transform .35s var(--e-spring); }
.eco-c:hover .eco-l svg{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .eco-l::after{ transition:none; }
}
@media(max-width:860px){
  .eco-row{ grid-template-columns:1fr; }
}
.ecoz{
  --ez-p:  0;
  --ez-s:  1;
  --ez-cs: 1;
  --ez-ar: 1.6;
  position:relative;
  height:150vh;
  margin-top:clamp(12px,1.5vw,20px);
}
.eco{ padding-bottom:0; }
.ecoz-pin{
  position:sticky; top:0;
  height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding-top:0;
  pointer-events:none;
}
/* ── Why the zoom is split across two elements ─────────────────────
   The panel used to scale itself (up to ~3x) and counter-scale its
   content back down. Any browser that composites the panel — and they
   all do while it moves — rasterises it at its small resting size and
   stretches the bitmap, so the copy inside was drawn tiny and blown up:
   soft at best, badly pixelated at worst.

   Now only .ecoz-bg scales: the orange ground, its noise, the watermark
   and the hover rule — flat fill, nothing that shows blur. The panel
   itself never scales, so .ecoz-in is painted at its real on-screen size
   every frame and stays sharp. It gets the same net scale it always had
   (--ez-s × --ez-cs, about the same centre), so the motion is unchanged. */
.ecoz-panel{
  position:relative; z-index:2;
  padding:clamp(24px,2.6vw,36px);
  display:flex; align-items:stretch;
  color:var(--white);
  transform:translateX(var(--rv-x,0px));
}
.ecoz-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none;
  border-radius:calc(var(--r-lg) * (1 - min(1, var(--ez-p) / .3)));
  /* Opposite's own orange. Everything inside is set against it below —
     white type and white-alpha chrome, since the mint/gold tokens the
     panel used on ink all collapse in value on this ground. */
  background-color:#db7126;
  transform:scale(var(--ez-s));
  transform-origin:50% 50%;
  will-change:transform;
  box-shadow:0 44px 90px -54px rgba(0,31,36,.8), 0 0 0 1px rgba(226,244,244,.08);
  transition:box-shadow .6s var(--e-out);
}
.ecoz.on .ecoz-bg{ box-shadow:none; }
.ecoz-bg::after{
  content:''; position:absolute; top:0; left:0; right:0; z-index:2;
  /* Dark teal, so the rule matches the two side cards. */
  height:3px; background:var(--teal-deep);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e-out);
  opacity:calc(1 - min(1, var(--ez-p, 0) / .15));
  pointer-events:none;
}
.ecoz-panel:hover .ecoz-bg::after{ transform:scaleX(1); }
/* The watermark, as it was — only the colour changes, because mint on
   the orange ground is muddy where white is not. It rides the ground
   (clipped by it, as it was by the panel) and counter-scales as before. */
.ecoz-mark{
  position:absolute; left:50%; top:50%; z-index:0;
  transform:translate(-50%,-50%) scale(var(--ez-cs));
  font-size:clamp(140px,20vw,320px); font-weight:800; letter-spacing:-0.055em;
  line-height:.8; white-space:nowrap; pointer-events:none;
  color:var(--white);
  opacity:calc(var(--ez-p) * .075);
}
/* No will-change, deliberately: a promoted layer is rasterised once and
   stretched. Left alone, it is repainted at its true size. */
.ecoz-in{
  position:relative; z-index:1;
  width:100%;
  display:flex; flex-direction:column;
  transform:scale(calc(var(--ez-s) * var(--ez-cs)));
  transform-origin:50% 50%;
}
/* The panel is also a scroll-reveal element, and [data-rv] carries a
   permanent will-change. Once it has revealed, hand it back. */
.js .ecoz-panel[data-rv].in{ will-change:auto; }
.ecoz-logo{
  align-self:flex-start;
  flex:0 0 auto;
}
.ecoz:not(.on) .ecoz-panel:hover .ecoz-logo{ transform:translateY(-3px); }
/* Logo_Orange.png is the orange lockup, invisible on an orange ground.
   brightness(0) crushes every opaque pixel to black, invert(1) lifts it
   to white, and the alpha channel is untouched — so the same file reads
   as a white logo with no second asset to keep in sync. */
.ecoz-logo img{ filter:brightness(0) invert(1); }
.ecoz-tag{ background:rgba(255,255,255,.18); color:var(--white); }
.ecoz-t{
  margin-top:12px; font-size:clamp(30px,3.1vw,42px); font-weight:800;
  line-height:1.05; letter-spacing:-0.045em; color:var(--white);
}
.ecoz-t em{ font-style:normal; color:var(--ink); }
.ecoz-d{
  margin-top:10px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.92);
  max-width:56ch;
}
/* The three secondary buttons are .btn-outline-dark, whose border is a
   pale-teal alpha tuned for ink. On orange it disappears, so they take a
   white outline here and invert on hover. */
.ecoz-links .btn-outline-dark{
  border-color:rgba(255,255,255,.55); color:var(--white);
}
.ecoz-links .btn-outline-dark:hover{
  background:var(--white); border-color:var(--white); color:#a34f13;
}
/* Back to the plain text link it was. Gold is gone: on the orange ground
   it is nearly the same value, so the link is white and carries an
   underline on hover to stay legible as a link. */
.ecoz-l{
  position:relative;
  margin-top:auto; padding-top:22px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:700; color:var(--white);
}
/* Same drawn underline as the two side cards, in white. */
.ecoz-l::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px;
  height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--e-out);
}
.ecoz-panel:hover .ecoz-l::after,
.ecoz-l:focus-visible::after{ transform:scaleX(1); }
.ecoz-l svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none; transition:transform .35s var(--e-spring); }
.ecoz-l:hover svg{ transform:translateX(4px); }
.ecoz-links{
  display:flex; flex-wrap:wrap; gap:12px;
  margin:20px 0 0; padding:0;
  list-style:none;
  opacity:0; visibility:hidden; transform:translateY(10px);
  pointer-events:none;
  transition:opacity .55s var(--e-out),
             transform .55s var(--e-out),
             visibility 0s linear .55s;
}
.ecoz.on .ecoz-links{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .55s var(--e-out),
             transform .55s var(--e-out),
             visibility 0s linear 0s;
}
@media (max-width:999.98px), (max-height:519.98px), (prefers-reduced-motion: reduce){
  .ecoz{ height:auto; }
  .ecoz-pin{ position:static; height:auto; display:block; }
  .ecoz-panel{
    width:100%; aspect-ratio:auto; padding:clamp(24px,2.6vw,36px);
    transform:none !important;
  }
  .ecoz-bg{
    transform:none !important; border-radius:var(--r-lg) !important;
    box-shadow:0 0 0 1px rgba(226,244,244,.08) !important;
  }
  .ecoz-in{ transform:none !important; }
  .ecoz-mark{ display:none; }
  .ecoz-links{
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
  }
}
footer.ft{ background:var(--ink-deep); color:var(--on-dark); padding:clamp(52px,6vw,84px) var(--gut) 30px; position:relative; }
.ft-in{ max-width:var(--maxw); margin:0 auto; }
.ft-top{
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.85fr));
  gap:clamp(24px,3vw,44px); padding-bottom:clamp(36px,4vw,54px);
  border-bottom:1px solid var(--line-dark);
}
.ft-brand{ display:inline-flex; align-items:center; }
.ft-brand img{ height:30px; }
.ft-txt{ margin-top:16px; font-size:13.5px; line-height:1.62; color:var(--on-dark-muted); max-width:38ch; }
.ft-news{ margin-top:24px; }
.ft-news .promise{ font-size:13px; font-weight:700; }
.ft-news .cadence{ margin-top:5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--gold); }
.ft-news form{ display:flex; gap:7px; margin-top:13px; max-width:360px; }
.ft-news input{
  flex:1; min-width:0; padding:12px 14px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-dark); background:rgba(226,244,244,.05);
  color:var(--on-dark); font-family:inherit; font-size:13.5px;
}
.ft-news input::placeholder{ color:var(--on-dark-faint); }
.ft-news input:focus{ outline:none; border-color:var(--mint); }
.ft-news button{
  padding:12px 18px; border-radius:var(--r-sm);
  background:var(--gold); color:#3d2900; font-size:13px; font-weight:700;
  transition:background .25s, transform .3s var(--e-spring);
}
.ft-news button:hover{ background:var(--gold-lt); transform:translateY(-2px); }
.ft-news .fine{ margin-top:9px; font-size:11px; color:var(--on-dark-faint); }
.ft-col h4{ font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.ft-col li+li{ margin-top:9px; }
.ft-col a{ font-size:13.5px; color:var(--on-dark-muted); transition:color .25s, padding-left .25s; }
.ft-col a:hover{ color:var(--on-dark); padding-left:4px; }
.ft-ack{
  margin-top:clamp(28px,3vw,40px); padding:clamp(18px,2.2vw,26px);
  border-radius:var(--r-md); background:rgba(226,244,244,.045);
  border:1px solid var(--line-dark);
}
.ft-ack .k{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:9px; }
.ft-ack p{ font-size:12.5px; line-height:1.65; color:var(--on-dark-muted); max-width:84ch; }
.ft-legal{
  margin-top:clamp(24px,2.6vw,34px); display:flex; flex-wrap:wrap; gap:10px 26px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-faint);
}
.ft-bot{
  margin-top:22px; padding-top:22px; border-top:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.ft-copy{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--on-dark-faint); }
.ft-soc{ display:inline-flex; gap:7px; }
.ft-soc a{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-dark); display:grid; place-items:center;
  color:var(--on-dark-muted); transition:color .3s var(--e-out), background-color .3s var(--e-out), border-color .3s var(--e-out);
}
.ft-soc a:hover{ color:var(--ink); background:var(--mint); border-color:var(--mint); transform:translateY(-3px); }
.ft-soc svg{ width:14px; height:14px; stroke:currentColor; stroke-width:1.9; fill:none; }
@media(max-width:1000px){
  .ft-top{ grid-template-columns:1fr 1fr; }
  .ft-brand-col{ grid-column:1/-1; }
}
@media(max-width:560px){ .ft-top{ grid-template-columns:1fr; } }
.totop{
  position:fixed; bottom:22px; left:22px; z-index:180;
  width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transform:translateY(14px);
  transition:opacity .4s, transform .4s var(--e-out), background .25s;
}
.totop.show{ opacity:1; pointer-events:auto; transform:none; }
.totop:hover{ background:var(--rust); }
.totop svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2.2; fill:none; }
.srail{
  position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:170;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
.srail a{ display:flex; align-items:center; gap:9px; }
.srail .nm{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-light-faint); opacity:0; transform:translateX(6px);
  transition:opacity .3s, transform .3s; white-space:nowrap;
}
.srail a:hover .nm{ opacity:1; transform:none; }
.srail .pip{ width:20px; height:2px; border-radius:2px; background:rgba(0,48,56,.22); transition:width .35s var(--e-out), background-color .35s var(--e-out), opacity .35s var(--e-out); }
.srail a.on .pip{ width:30px; background:var(--rust); }
.srail.on-dark .nm{ color:var(--on-dark-faint); }
.srail.on-dark .pip{ background:rgba(226,244,244,.28); }
.srail.on-dark a.on .pip{ background:var(--gold); }
@media(max-width:1240px){ .srail{ display:none; } }
.cul-head{ max-width:52ch; margin-bottom:clamp(38px,4.6vw,64px); }
.cul-head .lede{ margin-top:20px; }
.dfl{
  --dfl-h:clamp(430px,52vw,720px);
  --dfl-gap:clamp(9px,1vw,14px);
  height:var(--dfl-h);
  display:grid;
  gap:var(--dfl-gap);
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  transition:grid-template-columns .55s var(--e-out), grid-template-rows .55s var(--e-out);
}
.dfl-f{
  position:relative; overflow:hidden; min-width:0; min-height:0;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);
  box-shadow:0 34px 64px -34px rgba(0,10,14,.75), inset 0 0 0 1px rgba(226,244,244,.10);
  transition:box-shadow .5s var(--e-out), opacity .45s var(--e-out);
}
.dfl-f img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(.78) contrast(1.03) brightness(.9);
  transform:scale(1.04);
  transition:transform .8s var(--e-out), filter .5s var(--e-out);
}
.dfl[data-active="true"] .dfl-f{ opacity:.5; }
.dfl[data-active="true"] .dfl-f.is-on{ opacity:1; }
.dfl-f.is-on{ box-shadow:0 48px 86px -36px rgba(0,10,14,.9), inset 0 0 0 1px rgba(226,244,244,.22); }
.dfl-f.is-on img{ transform:scale(1); filter:saturate(1) contrast(1.02) brightness(1); }
.dfl-f figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:44px clamp(14px,1.4vw,20px) clamp(13px,1.3vw,17px);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; line-height:1.5;
  background:linear-gradient(to top, rgba(0,16,20,.85) 0%, rgba(0,16,20,.45) 50%, transparent 100%);
  text-shadow:0 1px 3px rgba(0,16,20,.6);
  opacity:.72; transition:opacity .4s var(--e-out);
}
.dfl-f.is-on figcaption{ opacity:1; }
@media(max-width:720px){
  .dfl{
    height:auto; grid-template-columns:1fr; grid-template-rows:none;
    transition:none;
  }
  .dfl-f{ aspect-ratio:4/3; }
  .dfl[data-active="true"] .dfl-f{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .dfl, .dfl-f, .dfl-f img, .dfl-f figcaption{ transition:none; }
}
/* ── The three controls ─────────────────────────────────────────────
   A row under the device stage. Each is a real link to its section, and
   also the handle that wakes a screen and slides a tile down.

   At rest they are ink pills with a coloured dot; on hover the pill
   floods with that colour and the dot dissolves into it. The dot is
   doing work beyond decoration — it is the only thing tying a button to
   its tile and its screen before anything has moved, so the three read
   as one set rather than three separate widgets. */
.shx-nav{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(11px,1.2vw,15px);
}
.shx-note{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-light-faint);
}
.shx-note svg{ width:15px; height:15px; opacity:.75; }
.shx-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(9px,1vw,14px);
}
.shx-btn{
  --a:var(--mint);
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:999px;
  background:var(--ink); color:var(--on-dark);
  font-size:clamp(13.5px,1.05vw,15px); font-weight:700;
  letter-spacing:-0.01em; text-decoration:none; white-space:nowrap;
  translate:0 0;
  transition:translate .4s var(--e-out), background-color .4s var(--e-out),
             color .4s var(--e-out), box-shadow .4s var(--e-out);
}
.shx-btn .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--a); flex-shrink:0;
  transition:scale .4s var(--e-out);
}
.shx-btn svg{
  width:15px; height:15px; flex-shrink:0;
  stroke:currentColor; stroke-width:2.2;
  translate:0 0; transition:translate .4s var(--e-out);
}
.shx-btn:hover, .shx-btn:focus-visible{
  background:var(--a); color:var(--ink);
  translate:0 -3px;
  box-shadow:0 20px 36px -20px rgba(0,48,56,.55);
}
.shx-btn:hover .dot, .shx-btn:focus-visible .dot{ scale:0; }
.shx-btn:hover svg, .shx-btn:focus-visible svg{ translate:3px 0; }
.shx-btn.is-products { --a:var(--mint);    }
.shx-btn.is-workshops{ --a:var(--gold-lt); }
.shx-btn.is-tools    { --a:var(--rust-lt); }
@media (prefers-reduced-motion: reduce){
  .shx-btn, .shx-btn .dot, .shx-btn svg{ transition:none; }
  .shx-btn:hover, .shx-btn:focus-visible{ translate:0 0; }
}

/* Anchor target for the Products card. Every other anchor on the page is
   a .zone whose --sec-y top padding already clears the sticky nav; this
   heading has none of its own, so it carries the offset itself. */
#products{ scroll-margin-top:clamp(88px,11vh,132px); }
/* Same reason, same numbers, for the Free tools target. #tools is now
   .rs-head, whose own padding-top is clamp(48px,6.5vh,90px) — enough to
   look composed but not enough to clear a sticky nav at the small end, so
   the offset is declared rather than left to the padding. Deliberately
   identical to #products above: two anchors that land on a centred
   heading over a grid should come to rest at the same height, or the page
   feels like it stops in a different place depending on which link you
   took. */
#tools{ scroll-margin-top:clamp(88px,11vh,132px); }
.bento{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,1.7vw,26px);
}
.bt{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(26px,3vw,44px);
  display:flex; flex-direction:column;
  text-decoration:none;
  will-change:transform;
  transition:box-shadow .55s var(--e-out);
}
.bt:hover{ box-shadow:0 44px 80px -44px rgba(0,48,56,.45); }
.bt-wide{ grid-column:1 / -1; }
.bt-pale{ background:var(--mint-pale); color:var(--teal-deep); }
.bt-ink { background:var(--ink);       color:var(--on-dark); }
.bt-gold{ background:var(--gold);      color:#4a3200; }
/* The lighter brand yellow. Separate from .bt-gold so the saturated
   gold stays available for the program cards. */
.bt-sun { background:var(--gold-lt);   color:#4a3200; }
.bt-rust{ background:var(--rust-lt);   color:#3d1000; }
.bt-deep{ background:var(--teal-deep); color:var(--on-dark); }
.bt-kick{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.66; margin-bottom:18px;
}
.bt-kick .sep{ width:16px; height:1px; background:currentColor; opacity:.5; }
.bt-t{
  font-size:clamp(21px,2.4vw,36px); font-weight:800;
  letter-spacing:-0.042em; line-height:1.04; text-wrap:balance;
}
/* Title size is .bt-t's for every tile now. The wide one used to take
   clamp(28px,4vw,60px) — 60px against the squares' 44px — which read as
   two different type scales sitting next to each other rather than one
   tile being emphasised.
   max-width stays: the wide tile is three times the width of a square,
   and without a measure its title runs the full span and stops looking
   like a heading. */
.bt-wide .bt-t{ max-width:18ch; }
.bt-s{
  margin-top:12px; font-size:clamp(13px,1.05vw,15px);
  line-height:1.52; opacity:.82; max-width:40ch;
}
.bt-vis{
  position:relative; margin:clamp(22px,2.6vw,36px) 0 0;
  border-radius:var(--r-lg); overflow:hidden;
  background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(0,48,56,.07);
  display:grid; place-items:center;
}
.bt-ink .bt-vis,.bt-deep .bt-vis{ background:rgba(0,0,0,.22); box-shadow:inset 0 0 0 1px rgba(226,244,244,.10); }
.bt-gold .bt-vis,.bt-sun .bt-vis,.bt-rust .bt-vis{ background:rgba(255,255,255,.30); box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); }
.bt-wide .bt-vis{ aspect-ratio:21/8; }
.bt-sq   .bt-vis{ aspect-ratio:16/10; }
.bt-vis .ph{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; opacity:.5; text-align:center; line-height:1.8; padding:0 16px;
}
/* Real product shot. grid-area pins it to the same cell the placeholder
   used, so the tile height never depends on the file's own ratio. */
.bt-vis .bt-shot{
  grid-area:1/1; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
.bt-cap{
  margin-top:14px; text-align:center;
  font-size:12.5px; opacity:.66;
}
.bt-foot{
  margin-top:auto; padding-top:clamp(22px,2.6vw,34px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.bt-price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.bt-price .amt{
  font-size:clamp(27px,2.7vw,40px); font-weight:800;
  letter-spacing:-0.05em; line-height:1; font-variant-numeric:tabular-nums;
}
.bt-price .from{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.62;
}
.bt-price .flag{
  padding:3px 7px; border-radius:5px;
  background:color-mix(in srgb, currentColor 16%, transparent);
  font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase;
}
.bt-acts{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bt-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:700; white-space:nowrap;
  border:1.5px solid transparent;
  transition:transform .3s var(--e-spring), filter .25s, background .25s, border-color .25s;
}
.bt-btn svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.3; fill:none; transition:transform .3s var(--e-spring); }
.bt-btn:hover{ transform:translateY(-2px); }
.bt-btn:hover svg{ transform:translateX(3px); }
.bt-pale .bt-add,.bt-gold .bt-add,.bt-sun .bt-add,.bt-rust .bt-add{ background:var(--ink); color:var(--on-dark); }
.bt-ink  .bt-add,.bt-deep .bt-add{ background:var(--paper); color:var(--ink); }
.bt-add.added{ background:#0f7a3d !important; color:#fff !important; }
.bt-view{ border-color:color-mix(in srgb, currentColor 28%, transparent); color:inherit; }
.bt-view:hover{ border-color:currentColor; background:color-mix(in srgb, currentColor 8%, transparent); }
.bt-link{ position:absolute; inset:0; z-index:1; }
.bt-body{ position:relative; z-index:2; display:flex; flex-direction:column; flex:1; pointer-events:none; }
.bt-body a,.bt-body button{ pointer-events:auto; }
/* .bento-foot lived here — the "Prices incl. GST · PO & invoicing
   available" line under the products grid. Removed with its markup; the
   same facts are in the products lede above the grid and in each
   product page's spec table. */
@media(max-width:820px){
  .bento{ grid-template-columns:1fr; }
  .bt{ transform:none !important; }
  .bt-wide .bt-vis{ aspect-ratio:16/9; }
}
@media (prefers-reduced-motion: reduce){
  .bt{ transform:none !important; }
}
.pd-hero{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,4vw,70px); align-items:start;
}
@media(max-width:940px){ .pd-hero{ grid-template-columns:1fr; } }
.pd-gal{ display:flex; flex-direction:column; gap:clamp(10px,1.2vw,16px); }
.pd-shot{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--pg-tint, color-mix(in srgb, var(--pg-ink) 7%, var(--white)));
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(0,48,56,.06);
}
.pd-shot .ph{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--pg-ink); opacity:.7;
  text-align:center; line-height:1.8; padding:0 16px;
}
.pd-shot img{
  grid-area:1/1; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
.pd-gal-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.2vw,16px); }
.pd-buy{ position:sticky; top:104px; }
@media(max-width:940px){ .pd-buy{ position:static; } }
.pd-t{ font-size:clamp(29px,3.6vw,50px); font-weight:800; letter-spacing:-0.045em; line-height:1.0; }
.pd-lede{ margin-top:16px; font-size:clamp(15px,1.3vw,17.5px); line-height:1.6; color:var(--on-light-muted); }
.pd-price{
  margin-top:clamp(24px,3vw,34px); padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line-light);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.pd-price .amt{ font-size:clamp(34px,4vw,54px); font-weight:800; letter-spacing:-0.05em; line-height:1; font-variant-numeric:tabular-nums; }
.pd-price .cur{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-light-faint); }
.pd-price .flag{
  padding:4px 8px; border-radius:5px; background:rgba(241,88,34,.14); color:var(--rust-deep);
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
}
.pd-tiers{ margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.pd-tiers .tier{
  border-color:var(--line-light); color:var(--on-light);
  font-size:14px; padding:14px 16px; border-radius:var(--r-sm);
}
.pd-tiers .tier:hover{ border-color:var(--ink); }
.pd-tiers .tier[aria-checked="true"]{ border-color:var(--ink); background:var(--pg-tint, color-mix(in srgb, var(--pg-ink) 7%, var(--white))); }
.pd-cta{ margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
.pd-cta .btn{ flex:1 1 auto; }
.pd-assure{ margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.pd-assure li{ display:flex; gap:10px; font-size:13px; color:var(--on-light-muted); line-height:1.45; }
.pd-assure svg{ width:15px; height:15px; stroke:var(--pg-ink); stroke-width:2; fill:none; flex-shrink:0; margin-top:2px; }
.pd-inc{
  margin-top:clamp(22px,2.6vw,30px);
  padding-top:clamp(18px,2.2vw,22px);
  border-top:1px solid var(--line-light);
}
.pd-inc .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--pg-ink); margin-bottom:12px; }
.pd-inc li{ display:flex; gap:10px; font-size:14px; line-height:1.5; color:var(--pg-ink); }
.pd-inc li+li{ margin-top:8px; }
.pd-inc li::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.55; flex-shrink:0; margin-top:8px; }
.pd-who,
.pg-out{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  /* Heading + body sit on the vertical middle of the list beside them,
     not pinned to its top. Stacked on mobile this has no effect. */
  gap:clamp(24px,4vw,64px); align-items:center;
}
@media(max-width:880px){
  .pd-who,
  .pg-out{ grid-template-columns:1fr; gap:26px; }
}
.pd-who ul,
.pg-out ul{ display:grid; gap:10px; }
.pd-who li,
.pg-out li{
  display:flex; gap:13px; padding:16px 18px; border-radius:var(--r-md);
  background:var(--white); box-shadow:0 0 0 1px var(--line-light);
  font-size:14.5px; line-height:1.5;
}
.pd-who li svg,
.pg-out li svg{ width:16px; height:16px; stroke:var(--pg-ink); stroke-width:2.2; fill:none; flex-shrink:0; margin-top:3px; }
.zone-white .pd-who li,
.zone-white .pg-out li{ box-shadow:0 0 0 1px var(--line-light), 0 10px 22px -16px rgba(0,48,56,.35); }
.pd-spec{ width:100%; border-collapse:collapse; }
.pd-spec tr{ border-bottom:1px solid var(--line-light); }
.pd-spec tr:first-child{ border-top:1px solid var(--line-light); }
.pd-spec th,.pd-spec td{ text-align:left; padding:15px 0; font-size:14.5px; vertical-align:top; }
.pd-spec th{
  width:34%; font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-light-faint); padding-right:20px;
}
.pd-spec td{ color:var(--on-light); }
.pd-rel{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,20px); }
@media(max-width:720px){ .pd-rel{ grid-template-columns:1fr; } }
.pd-rel-c{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.pd-rel-c:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -34px rgba(0,48,56,.4); }
.zone-white .pd-rel-c.bt-pale{ box-shadow:inset 0 0 0 1px var(--line-light); }
.zone-white .pd-rel-c.bt-pale:hover{ box-shadow:inset 0 0 0 1px var(--line-light), 0 34px 60px -34px rgba(0,48,56,.4); }
.pd-rel-c .k{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; opacity:.66; }
.pd-rel-c .t{ margin-top:12px; font-size:clamp(19px,2vw,25px); font-weight:800; letter-spacing:-0.035em; line-height:1.08; }
.pd-rel-c .s{ margin-top:9px; font-size:13.5px; line-height:1.5; opacity:.82; }
.pd-rel-c .p{ margin-top:auto; padding-top:22px; display:flex; align-items:baseline; gap:8px; }
.pd-rel-c .p .amt{ font-size:23px; font-weight:800; letter-spacing:-0.04em; }
.pd-rel-c .p .cur{ font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase; opacity:.66; }
.pd-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:190;
  display:none; align-items:center; gap:14px;
  padding:12px var(--gut);
  background:rgba(0,31,36,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  color:var(--on-dark);
  border-top:1px solid rgba(226,244,244,.12);
}
.pd-bar .amt{ font-size:19px; font-weight:800; letter-spacing:-0.04em; }
.pd-bar .l{ font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--on-dark-faint); }
.pd-bar .btn{ margin-left:auto; }
@media(max-width:940px){
  .pd-bar{ display:flex; }
  body.has-bar{ padding-bottom:78px; }
}
.dw{ position:relative; }
.dw-stage{ position:relative; }
.dw-view{ position:relative; margin:0 calc(var(--gut) * -1); overflow:hidden; }

/* ── Carousel arrows, straddling the card edge ──────────────────────
   -23px is half the button, so each one sits centred on the card's left
   or right edge — half over the card, half over the page. Fully outside
   would be tidier but there is only var(--gut) of room out there and it
   collapses to 20px on a phone; fully inside would put a button on top of
   the copy. Straddling, the half that overlaps lands inside the card's own
   padding, which is 43px at this width, so it never covers text.

   The card's left edge is at 0 here despite .dw-view bleeding to
   ±var(--gut): the track pads itself back in by exactly that much. */
.dw-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:6;
  width:46px; height:46px; border-radius:50%;
  /* Hidden by default, shown from 861px up — see the pair of rules at the
     end of this block. */
  display:none; place-items:center;
  background:var(--white); color:var(--ink);
  box-shadow:0 12px 28px -12px rgba(0,31,36,.45), inset 0 0 0 1px var(--line-light);
  transition:transform .3s var(--e-spring), background .25s, color .25s, opacity .25s, box-shadow .3s;
}
.dw-nav svg{ width:19px; height:19px; stroke:currentColor; stroke-width:2; fill:none; }
.dw-nav.prev{ left:-23px; }
.dw-nav.next{ right:-23px; }
.dw-nav:hover:not(:disabled){
  background:var(--rust-deep); color:var(--white);
  transform:translateY(-50%) scale(1.07);
  box-shadow:0 16px 34px -12px rgba(0,31,36,.5);
}
.dw-nav:disabled{ opacity:.32; cursor:not-allowed; box-shadow:inset 0 0 0 1px var(--line-light); }
/* One visible set of controls, not two. Below 861px the gutter is too
   narrow for the arrows to straddle without hanging off the page, so they
   hand back to the pair in the section head — which is hidden above it.
   Both pairs stay in the DOM and both carry data-dw, so the carousel
   script drives whichever is showing without knowing which that is. */
@media (min-width:861px){
  .dw-nav{ display:grid; }
  .sec-head .side.dw-head-nav{ display:none; }
}
/* From 1200px the gutter is 60px or more — enough to clear the card
   entirely (46px button + 12px of air), so the arrows stop straddling and
   stand on their own ground. Below that they go back to the straddle,
   which is the only way they fit. */
@media (min-width:1200px){
  .dw-nav.prev{ left:-58px; }
  .dw-nav.next{ right:-58px; }
}
@media (prefers-reduced-motion: reduce){
  .dw-nav{ transition:none; }
  .dw-nav:hover:not(:disabled){ transform:translateY(-50%); }
}
.dw-track{
  display:flex; gap:clamp(12px,1.6vw,24px);
  padding:6px var(--gut) 8px;
  transition:transform .8s var(--e-out);
  will-change:transform;
}
.dwc{ flex:0 0 100%; }
.dwc{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(24px,3vw,46px);
  min-height:clamp(360px,32vw,470px);
  display:flex;
  transition:opacity .6s var(--e-out), filter .6s var(--e-out);
}
/* The off-card used to sit at .42 opacity, which meant a ghost tile
   peeking into the gutter directly under the next arrow. Hidden outright
   so the arrows have clear ground either side of the live card. */
.dwc:not(.on){ opacity:0; pointer-events:none; }
.dwc-ink { background:var(--ink);       color:var(--on-dark); }
.dwc-mint{ background:var(--mint);      color:var(--ink); }
.dwc-rust{ background:var(--rust-lt);   color:#3d1000; }
.dwc-gold{ background:var(--gold);      color:#4a3200; }
.dwc-deep{ background:var(--teal-deep); color:var(--on-dark); }
.dwc-pale{ background:var(--mint-pale); color:var(--teal-deep); }
.dwc-in{
  position:relative; z-index:2; flex:1;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,52px); align-items:start;
}
.dwc-main{ display:flex; flex-direction:column; height:100%; }
.dwc-t{
  font-size:clamp(25px,3.4vw,50px); font-weight:800;
  letter-spacing:-0.045em; line-height:.98;
}
.dwc-t .l1, .dwc-t .l2{
  display:block;
  opacity:0; transform:translateY(16px);
  transition:opacity .45s var(--e-out), transform .6s var(--e-out);
}
.dwc-t .l1{ transition-delay:.05s; }
.dwc-t .l2{ position:relative; transition-delay:.12s; }
.dwc.on .dwc-t .l1, .dwc.on .dwc-t .l2{ opacity:1; transform:none; }
.dwc-t .l2 .g,.dwc-t .l2 .s{ display:block; }
.dwc-t .l2 .g{
  font-style:italic; opacity:.34;
  transition:opacity .5s var(--e-out) .26s;
}
.dwc-t .l2 .s{
  position:absolute; inset:0;
  font-style:normal; opacity:0;
  transition:opacity .5s var(--e-out) .26s;
}
.dwc.on .dwc-t .l2 .g{ opacity:0; }
.dwc.on .dwc-t .l2 .s{ opacity:1; }
.dwc-s{
  margin-top:12px; font-size:clamp(13px,1.15vw,15.5px);
  line-height:1.5; max-width:34ch;
  opacity:0; transform:translateY(12px);
  transition:opacity .45s var(--e-out) .18s, transform .55s var(--e-out) .18s;
}
.dwc.on .dwc-s{ opacity:.72; transform:none; }
.dwc-chips{
  display:flex; gap:clamp(8px,1vw,14px); flex-wrap:wrap;
  margin-top:clamp(20px,2.4vw,30px);
}
.dwc-chip{
  display:flex; flex-direction:column; gap:8px;
  width:clamp(66px,7vw,92px);
  opacity:0; transform:scale(.86) translateY(14px);
  transition:opacity .34s var(--e-out), transform .52s var(--e-spring);
}
.dwc.on .dwc-chip{ opacity:1; transform:none; }
.dwc.on .dwc-chip:nth-child(1){ transition-delay:.32s; }
.dwc.on .dwc-chip:nth-child(2){ transition-delay:.41s; }
.dwc.on .dwc-chip:nth-child(3){ transition-delay:.50s; }
.dwc.on .dwc-chip:nth-child(4){ transition-delay:.59s; }
.dwc-chip .sq{
  width:clamp(38px,4vw,50px); height:clamp(38px,4vw,50px);
  border-radius:var(--r-sm);
  display:grid; place-items:center; flex-shrink:0;
  transition:transform .35s var(--e-spring);
}
.dwc-chip:hover .sq{ transform:translateY(-3px) rotate(-5deg); }
.dwc-chip .sq svg{ width:20px; height:20px; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.dwc-chip:nth-child(1) .sq{ background:var(--mint);      color:var(--teal-deep); }
.dwc-chip:nth-child(2) .sq{ background:var(--gold-lt);   color:#5a3c00; }
.dwc-chip:nth-child(3) .sq{ background:var(--paper);     color:var(--teal); }
.dwc-chip:nth-child(4) .sq{ background:var(--rust-lt);   color:#5c2a0c; }
.dwc-gold .dwc-chip:nth-child(2) .sq{ background:var(--paper); color:#6b4a00; }
.dwc-rust .dwc-chip:nth-child(4) .sq{ background:var(--paper); color:#5c2a0c; }
/* Same reason as the two lines above it, but worse: the first chip square
   is --mint, and on a --mint card that is not a near-match, it is the
   identical value. Without this the square disappears and its icon floats
   unboxed next to three that are boxed. */
.dwc-mint .dwc-chip:nth-child(1) .sq{ background:var(--white); color:var(--teal-deep); }
/* Same problem on a --mint-pale card, but for chip 3, whose square is
   --paper: near-identical to the card, so it needs the hairline. */
.dwc-pale .dwc-chip:nth-child(3) .sq{
  background:var(--white); box-shadow:inset 0 0 0 1px rgba(0,48,56,.10);
}
.dwc-chip .cl{
  font-size:11px; line-height:1.3; opacity:.78;
  letter-spacing:-0.005em;
}
.dwc-cta{ margin-top:auto; padding-top:clamp(20px,2.4vw,30px); }
.dwc-cta .btn{
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--e-out) .64s, transform .55s var(--e-out) .64s;
}
.dwc.on .dwc-cta .btn{ opacity:1; transform:none; }
.dwc-panel{
  position:relative;
  align-self:stretch;
  border-radius:var(--r-lg);
  padding:clamp(16px,2vw,26px);
  background:var(--white);
  box-shadow:0 26px 50px -28px rgba(0,12,15,.55), inset 0 0 0 1px rgba(0,48,56,.06);
  display:grid; place-items:center; overflow:hidden;
  opacity:0; transform:translateY(72%);
  transition:opacity .5s var(--e-out) .10s, transform .85s var(--e-out) .10s;
}
.dwc.on .dwc-panel{ opacity:1; transform:none; }
.dwc-lot{
  width:100%; height:100%; min-height:clamp(220px,22vw,340px);
  display:grid; place-items:center;
}
.dwc-lot svg{
  display:block;
  width:100%; height:100%;
  max-width:100%; max-height:100%;
  margin:auto;
}
.dwc-lot:empty::after{
  content:''; width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(0,48,56,.12); border-top-color:rgba(0,48,56,.34);
  animation:lotSpin .9s linear infinite;
}
@keyframes lotSpin{ to{ transform:rotate(360deg); } }
.dwc-lot.failed:empty::after{
  content:attr(aria-label); width:auto; height:auto; border:0; animation:none;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(0,48,56,.5); text-align:center;
  line-height:1.7; padding:0 12px;
}
@media (prefers-reduced-motion: reduce){
  .dwc-lot:empty::after{ animation:none; }
}
.dw-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-top:clamp(18px,2.2vw,28px);
}
.dw-dots{ display:flex; gap:6px; }
.dw-dots button{
  width:26px; height:4px; border-radius:3px;
  background:rgba(0,48,56,.16); transition:width .35s var(--e-out), background-color .35s var(--e-out), opacity .35s var(--e-out);
}
.dw-dots button[aria-current="true"]{ width:40px; background:var(--rust); }
@media(max-width:860px){
  .dwc-in{ grid-template-columns:1fr !important; }
  .dwc-panel{ transform:translateY(52%); align-self:auto; aspect-ratio:16/9; }
  .dwc-lot{ min-height:0; }
}
@media (prefers-reduced-motion: reduce){
  .dwc-t .l2 .g{ opacity:0 !important; }
  .dwc-t .l1,.dwc-t .l2,
  .dwc-t .l2 .s,.dwc-chip,.dwc-panel,.dwc-cta .btn{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .dwc-s{ opacity:.72 !important; transform:none !important; transition:none !important; }
  /* Off-cards stay hidden here too — this rule used to reveal them at
     full opacity to defeat the fade, but the ghost tile beside the arrows
     is what it is with or without motion. */
  .dwc:not(.on){ opacity:0; filter:none; transition:none; }
}

/* Both rising sheets need runway BELOW the section they climb over, and
   that neighbour is set by document order — so these two rules move
   whenever the sections do. #shop rises over #summary; #showcase rises
   over #rapid. The gap is what stops the sheet swallowing a section the
   reader has not finished yet: it delays the whole window by its own
   height without either script needing to know about it.

   The two boxes are now built identically — both lifted a full 100vh,
   both travelling 100vh — so the two numbers mean the same thing and
   read the same way: the section above finishes N vh clear of the fold
   at the instant the sheet starts to climb.

     #shop     starts when its own top hits the fold, and its box top is
               exactly the previous section's bottom, so N of extra
               padding IS N of clearance. Currently 0 — #summary ends on
               a soft note and wants no gap.
     #showcase same construction over #rapid, but this one is MEASURED,
               not set: the RAPID RUNWAY block in index.html overwrites
               --rs-gap with whatever makes Rapid exactly fill the screen
               at q=0 — the whole section on view, the "Request a quote"
               bar clear of the fold, and no empty strip under it. The
               0vh below is only what the first paint uses before that
               script runs, and what the fallbacks fall back to.

   Why a full 100vh lift is now available here when it was not before:
   the old constraint pair (runway >= L, runway <= 100 - L) came from the
   sheet being SHORTER than a viewport. At L = 46vh the sheet's top edge
   already sat 54vh up the screen at q=0, so white was on screen before
   any scrolling — hence runway had to exceed the lift just to keep that
   white off the cards. At L = 100vh the sheet top sits exactly on the
   bottom edge at q=0: no white until the reader scrolls, so the runway
   is free to be whatever clearance the section above deserves. */
:root{ --sh-gap:0vh; --rs-gap:0vh; }
#summary{ padding-bottom:var(--sh-gap); }
/* --rs-gap was cut for the showcase sheet, which used to climb Rapid.
   The showcase is unpinned and Rapid moved after Deep work, so the
   section that climbs Rapid now is #priced — and this same runway is
   what gives it room. The measuring script is unchanged: it still makes
   Rapid exactly fill the screen and adds a short hold, which is what a
   climbing sheet needs regardless of which sheet is doing the climbing.
   Without this the padding would have been a screen of empty dark with
   nothing arriving over it. */
#rapid{ padding-bottom:calc(var(--sec-y) + var(--rs-gap)); }
.sh{
  --sheet:0;
  position:relative; z-index:5;
  pointer-events:none;
  margin-top:-100vh;
}
.sh-sheet{
  position:relative;
  pointer-events:auto;
  background:var(--white);
  /* Bottom is deliberately short of --sec-y. The card rail is the last
     thing in this sheet and "Built in the lab" is the first thing in the
     next one, so the seam was carrying three full section gaps at once:
     the rail's own bottom margin, this padding, and .rs-head's top
     padding. Two of the three were sized when the products block still
     sat between them. */
  padding:var(--sec-y) var(--gut) clamp(48px,6.5vh,90px);
  translate:0 calc((1 - var(--sheet)) * 100vh);
  will-change:translate;
  backface-visibility:hidden;
}
.sh-sheet::after{
  content:'';
  position:absolute; left:0; right:0; top:100%;
  height:calc((1 - var(--sheet)) * 100vh);
  background:var(--white);
  pointer-events:none;
}
@media (max-width:999.98px), (max-height:699.98px), (prefers-reduced-motion: reduce){
  #summary{ padding-bottom:0; }
  .sh{ margin-top:0; }
  .sh-sheet{ translate:none !important; will-change:auto; }
  .sh-sheet::after{ display:none; }
  .pr{ margin-top:0; pointer-events:auto; z-index:1; }
  .pr-sheet{ translate:none !important; will-change:auto; }
  .pr-sheet::after{ display:none; }
}
html:not(.js) #summary{ padding-bottom:0; }
html:not(.js) .sh{ margin-top:0; }
html:not(.js) .sh-sheet{ translate:none; }
html:not(.js) .sh-sheet::after{ display:none; }
/* ── Built in the lab ───────────────────────────────────────────────
   Now byte-for-byte the same construction as .sh, because it should read
   as the same move: the box is lifted a full viewport so it overlaps the
   dark section above, the sheet inside starts a full viewport low, and
   it travels to zero as --sheet runs 0 → 1. Three 100vh here and the
   1.0 window in the driver are ONE number — change one, change all four.

   The 46vh version this replaces was a compromise forced by the sheet
   being shorter than the screen. Its symptom was that white was already
   sitting in the bottom half of the viewport before the reader had
   scrolled at all, which is why it needed 50vh of runway to hold that
   white off the Rapid cards, and why the wipe then finished in ~21vh
   and snapped shut. A full-viewport lift starts the sheet exactly on
   the bottom edge instead: nothing white until the reader scrolls, and
   the same unhurried 2x wipe #shop has.

   Runway lives in --rs-gap above, not here. */
.rs{
  --q:0; --sheet:0;
  position:relative; z-index:5;
  pointer-events:none;
  margin-top:-100vh;
}
/* ── Priced, boxed ───────────────────────────────────────────────────
   The same sheet #shop has, and deliberately the same numbers: a full
   viewport of lift, a full viewport of travel, so the two white sheets on
   this page wipe at an identical 2x against the eye. Splitting the
   section out of #shop cost it that entrance; this gives it back.

   .pr-sheet, not .sh-sheet: the shop sheet carries --sec-y --gut padding
   that the products block does not want twice, and sharing the class
   would have meant unpicking that with an override. A parallel class is
   fewer moving parts than a shared one with exceptions. */
.pr{
  --sheet:0;
  position:relative; z-index:5;
  pointer-events:none;
  margin-top:-100vh;
}
.pr-sheet{
  position:relative;
  pointer-events:auto;
  background:var(--white);
  padding:var(--sec-y) var(--gut);
  translate:0 calc((1 - var(--sheet)) * 100vh);
  will-change:translate;
  backface-visibility:hidden;
}
/* Fills the strip the sheet has vacated below itself while it travels,
   so Deep work is not visible through the gap. */
.pr-sheet::after{
  content:'';
  position:absolute; left:0; right:0; top:100%;
  height:calc((1 - var(--sheet)) * 100vh);
  background:var(--white);
  pointer-events:none;
}

/* ── Built in the lab, unpinned ──────────────────────────────────────
   The section moved above Rapid, so it has nothing underneath it to
   wipe. These three declarations are the static fallback this stylesheet
   already used at narrow widths and for reduced motion, promoted to a
   permanent state: no 100vh lift, no travel, and no ::after strip to
   fill a gap that never opens. The JS driver disables itself separately
   — it looks for $('#showcase.rs') and this section is .rs-flat now.

   Everything inside (.rs-head, .rs-copy, the nested #tools grid) still
   matches on its own class, so the section keeps its layout untouched. */
.rs-flat{ position:relative; z-index:1; }
.rs-flat .rs-sheet{ translate:none; will-change:auto; }
.rs-flat .rs-sheet::after{ display:none; }

.rs-sheet{
  position:relative;
  pointer-events:auto;
  background:var(--white);
  translate:0 calc((1 - var(--sheet)) * 100vh);
  will-change:translate;
  backface-visibility:hidden;
}
/* Fills the strip the sheet has vacated below itself while it is still
   travelling, so the section underneath is not visible through the gap. */
.rs-sheet::after{
  content:'';
  position:absolute; left:0; right:0; top:100%;
  height:calc((1 - var(--sheet)) * 100vh);
  background:var(--white);
  pointer-events:none;
}
/* The heading band. It carries the sheet's own padding because #tools is
   nested inside the sheet now and brings its own --gut and --sec-y — put
   the padding on .rs-sheet instead and every tool card gets indented. */
/* Top matches .sh-sheet's new bottom — see the note there. */
.rs-head{ padding:clamp(48px,6.5vh,90px) var(--gut) 0; }
/* #tools brings a full --sec-y of its own top padding, which would stack
   on top of the head's margin-bottom below and open a gap twice the size
   of every other section's. The head's margin is the whole gap — same as
   .head-mid → .bento in #shop. Scoped to this sheet so the standalone
   #tools rhythm is untouched anywhere else. */
.rs-sheet > .tools{ padding-top:0; }
/* Deliberately .head-mid's numbers, not new ones: this is the same thing
   — a centred heading with a lede over a grid — so it gets the same
   rhythm. A previous version held this box to a full viewport so the
   cards started below the fold, which technically worked but read as a
   screen of empty white either side of two lines of text. */
.rs-copy{
  text-align:center; max-width:760px;
  margin:0 auto clamp(44px,5.5vw,80px);
}
.rs-copy .h{
  font-size:clamp(28px,4.4vw,60px); font-weight:800;
  letter-spacing:-0.045em; line-height:1.0; color:var(--ink);
}
.rs-copy .h em{ font-style:normal; color:var(--rust); display:block; }
/* 20px is .head-mid .lede's margin — same reason as the block above. */
.rs-copy .s{
  margin:20px auto 0; max-width:52ch;
  font-size:clamp(14.5px,1.2vw,17px); line-height:1.55; color:var(--on-light-muted);
}
.rs-stage{ position:relative; flex:1; min-height:0; }
.rs-stage .ts-dev{ width:100%; height:auto; }
.rs-scr{
  position:absolute; bottom:6%;
  display:block;
  will-change:translate;
  backface-visibility:hidden;
}
.rs-c{
  left:50%; width:36%; margin-left:-18%;
  z-index:1;
  translate:0 calc((1 - var(--d)) * 62vh);
}
.rs-l{
  left:23%; width:11%;
  z-index:3;
  translate:calc((1 - var(--d)) * -46vw) calc((1 - var(--d)) * 7vh);
}
.rs-r{
  right:7%; width:32%;
  z-index:2;
  translate:calc((1 - var(--d)) * 46vw) calc((1 - var(--d)) * 7vh);
}
.rs-cap{
  position:absolute; left:0; right:0; bottom:14px; z-index:4;
  text-align:center;
  font-family:var(--mono); font-size:9px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-light-faint);
}
/* ── Device cluster in the shop head ────────────────────────────────
   The screens and their .rs-* positioning are reused from the old
   showcase; what changes here is the driver and the distances. The pin
   scrubbed --d against scroll and flew the screens in from 46vw away,
   which only works when the stage owns the whole viewport. Here --d is
   a two-state value flipped by the same [data-rv] observer the rest of
   the page uses, and the travel is short enough that nothing sweeps
   across neighbouring content on the way in. */
/* ── The landing view ───────────────────────────────────────────────
   The shop sheet lands with its first screen filling the window, so
   whatever sits in this box is the view the reader is left holding when
   the rise finishes. Holding it to a screen tall — minus the sheet's own
   top padding, which is part of that first screen — is what keeps the
   bento below the fold at that instant instead of peeking in at the
   bottom and pulling the eye straight past the devices.

   It only does work on tall windows: below about 1100px the heading and
   the cluster already exceed a screen on their own, and min-height is a
   floor, not a cap. Centred rather than top-aligned so the extra room on
   a very tall window is split above and below the devices. */
.sh-view{
  min-height:calc(100vh - var(--sec-y));
  display:flex; flex-direction:column; justify-content:center;
  /* Was clamp(80px,9vw,180px), when the products heading came next and
     the gap existed to separate two ideas. The card rail follows the
     screens directly now — the screens showcase three categories, the
     cards are what is in them — so this seam is inside one idea and
     closes right up. Note it is only PART of the gap on a tall window:
     .sh-view is centred inside a 100vh floor, so any slack is split
     above and below the content and lands here too. Carrying the button
     row again makes that block tall enough to leave little slack on most
     screens, which is most of why the gap looks closed.

     This is now the ENTIRE distance from the laptops to the cards — the
     arrows moved to the sides of the rail, so the 46px control row that
     used to sit in between is gone, and the rail's own +14/-10 top
     padding and margin cancel to 4px. */
  margin-bottom:clamp(14px,1.5vw,24px);
}
@media (max-width:999.98px){
  .sh-view{ min-height:0; display:block; margin-bottom:0; }
}
/* ── Pressed states ──────────────────────────────────────────────────
   Every interactive element on the page had hover and focus but nothing
   for the press itself, so a tap or click registered only after the
   navigation happened. A 1px sink is the cheapest honest feedback there
   is: it costs no layout, reads as the surface taking the weight, and it
   is the one moment the user is definitely watching.

   translate, not transform: several of these elements already animate
   transform (the card lift, the arrow slide), and translate composes
   with it instead of overwriting it.

   Durations are deliberately far under the 300ms UI ceiling — press
   feedback belongs in the 100 to 160ms band, and anything slower stops
   feeling like a button and starts feeling like an animation. */
.btn:active,
.btn-primary:active,
.btn-light:active,
.shx-btn:active,
.ct-btn:active,
.bt-btn:active,
.rail-btn:active:not(:disabled),
.lib-arw:active:not(:disabled),
.dw-nav:active:not(:disabled),
.lib-tab:active{
  translate:0 1px;
  transition-duration:120ms;
}
/* The library cards lift 7px on hover, so the press reads as that lift
   partly giving way rather than as a separate movement. */
.lc:active{ translate:0 -3px; transition-duration:120ms; }
@media (prefers-reduced-motion: reduce){
  .btn:active, .btn-primary:active, .btn-light:active, .shx-btn:active,
  .ct-btn:active, .bt-btn:active, .rail-btn:active:not(:disabled),
  .lib-arw:active:not(:disabled), .dw-nav:active:not(:disabled),
  .lib-tab:active, .lc:active{ translate:none; }
}

/* ══ LIBRARY RAIL ═══════════════════════════════════════════════════
   The shelf: the inventory behind the three screens above it. No ground
   of its own and no heading of its own — it shares the sheet's white and
   the "Tools you'll actually use" title, because the screens and the
   cards are one idea (here are the three categories / here is what is in
   them) and a band or a second title between them reads as two.

   Centred and capped, not bled to the page edge. The full-bleed version
   put the first card out past every other element in the sheet and the
   rail stopped reading as part of the page at all. .lib is still a
   direct child of .sh-sheet rather than of a .zone-inner, because the
   arrows have to hang outside the rail and a .zone-inner would give them
   nothing to hang into. */
.lib{
  /* Six cards at their full 300px plus five gaps. The content column
     (--maxw, 1360px) cannot hold that — six 300s need 1880 — so the rail
     takes the wider of the two, still centred and still inside the
     sheet's --gut padding, never bled to the window edge. On a wide
     display that lands exactly six at full size; on a laptop the width
     runs out first and you get four and a half, with the rest a scroll
     away. Card width is fixed rather than divided by a count, so it
     never shrinks to make six fit a narrow screen. */
  --rail-gap:clamp(12px,1.4vw,20px);
  position:relative;
  width:min(100%, calc(6 * 300px + 5 * 20px)); margin-inline:auto;
  /* Top is zero on purpose — the cards read as what the screens above
     are showcasing, and .sh-view's own bottom margin is the whole seam.
     The bottom figure is larger than it looks: the rail gives 44px of it
     straight back as negative margin to reclaim its shadow gutter, so
     this has to cover the seam to the products heading twice over. */
  /* Was clamp(66px,7vw,110px), sized to clear the products heading that
     used to follow. That block is its own section now, so the sheet's own
     bottom padding closes this end and the rail only needs to clear its
     own shadow gutter. */
  margin-block:0 clamp(20px,2.2vw,36px);
}

/* Arrows. Built to .dw-nav's pattern — same 46px circle, same shadow,
   same straddle — because that is how this site already flanks a
   carousel, and two different answers to one problem on one page is
   worse than either. .lib-head and .lib-arrows survive only as markup;
   display:contents drops them out of layout so the buttons position
   against .lib itself.

   top is NOT 50%. The rail's negative block margins do not shrink .lib —
   having no padding or border of its own, .lib collapses those margins
   through to its own box instead, so .lib ends up exactly as tall as the
   rail's border box: 14px padding, the cards, then 56px of shadow
   gutter. A 50% centre therefore lands (56-14)/2 = 21px BELOW the cards.
   Subtracting the rail's block padding from 100% leaves the card height,
   so this resolves to the card row's real middle at any card size. */
.lib-head, .lib-arrows{ display:contents; }
.lib-arw{
  position:absolute;
  top:calc(14px + (100% - 70px) / 2); transform:translateY(-50%);
  z-index:6;
  width:46px; height:46px; border-radius:50%;
  display:none; place-items:center;
  background:var(--white); color:var(--ink);
  border:0;
  box-shadow:0 12px 28px -12px rgba(0,31,36,.45), inset 0 0 0 1px var(--line-light);
  transition:transform .3s var(--e-spring), background .25s, color .25s, opacity .25s, box-shadow .3s;
}
.lib-arw svg{ width:19px; height:19px; stroke:currentColor; stroke-width:2; fill:none; }
.lib-arw[data-dir="left"]{ left:-23px; }
.lib-arw[data-dir="right"]{ right:-23px; }
.lib-arw:hover:not(:disabled){
  background:var(--rust-deep); color:var(--white);
  transform:translateY(-50%) scale(1.07);
  box-shadow:0 16px 34px -12px rgba(0,31,36,.5);
}
.lib-arw:disabled{ opacity:.32; cursor:not-allowed; box-shadow:inset 0 0 0 1px var(--line-light); }
/* Below 861px the gutter is too narrow for a straddling button to clear
   the page edge, so the rail hands over to swipe and the hint below it.
   Same threshold .dw-nav uses. */
@media (min-width:861px){ .lib-arw{ display:grid; } }
/* From 1200px --gut is 60px or more — enough to clear the cards entirely
   (46px button plus air), so the arrows stop straddling and stand off
   the column instead of sitting on the first and last card. */
@media (min-width:1200px){
  .lib-arw[data-dir="left"]{ left:-58px; }
  .lib-arw[data-dir="right"]{ right:-58px; }
}
@media (prefers-reduced-motion: reduce){
  .lib-arw{ transition:none; }
  .lib-arw:hover:not(:disabled){ transform:translateY(-50%); }
}

/* The rail. No horizontal padding: the cards ARE the column now, so the
   first and last sit flush with its edges.

   The block padding is the fix for a shadow that stopped dead in a
   straight line under the cards. Setting overflow-x:auto makes the
   OTHER axis compute to auto too — that is the spec, not a quirk — so
   this is a scroll container vertically as well, and it was clipping the
   hover shadow at 4px below the card. The padding gives the shadow the
   room it needs to fade out, and the negative margin gives that room
   back to the page so the rail does not push the section open. */
.lib-rail{
  display:flex; gap:var(--rail-gap);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
  padding:14px 0 56px;
  margin-block:-10px -44px;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.lib-rail::-webkit-scrollbar{ display:none; }
@media (prefers-reduced-motion: reduce){ .lib-rail{ scroll-behavior:auto; } }

/* ── Cards ────────────────────────────────────────────────────────────
   Built to the Rapid grammar (.pcard), because these two rails are the
   same promise made twice and they should look it: a solid colour field,
   --r-lg corners, a mono kicker, a bold short title, and one big line
   glyph bleeding out of the bottom-right corner.

   What is deliberately NOT copied is Rapid's hover reveal. A .pcard is
   an enquiry — the card has to sell a session it cannot link to, so it
   opens a panel of inclusions. These are links to things that already
   exist; the whole job is to get out of the way, so hover is a lift and
   an arrow, nothing more.

   Screenshots are gone. Ten browser captures shrunk to 280px read as ten
   grey smudges — nothing in them survived the scale — and they forced a
   white card to carry them, which is what made the rail look like a
   spreadsheet. A glyph at 150px is legible at any size the rail takes. */
.lc{
  position:relative; flex:0 0 auto;
  width:clamp(228px,23vw,300px);
  min-height:clamp(268px,23vw,320px);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  padding:clamp(20px,1.8vw,26px);
  border-radius:var(--r-lg);
  overflow:hidden;
  /* Rapid's shadow pair, scaled to a smaller card. Both are heavily
     negative-spread so they stay under the card instead of haloing it. */
  box-shadow:0 16px 30px -22px rgba(0,48,56,.42);
  /* translate, not transform: transform belongs to the icon parallax and
     to the reveal system, and .pcard already learned this fight the hard
     way — see the note above .pcard:hover. */
  transition:translate .5s var(--e-out), box-shadow .5s var(--e-out);
}
.lc:hover, .lc:focus-visible{
  translate:0 -7px;
  box-shadow:0 40px 70px -38px rgba(0,48,56,.5);
}
.lc[hidden]{ display:none; }

/* Same nine grounds as .pc-*, named apart on purpose: .lb-mint and
   friends are already taken, by .pc-label. */
.lc-mint { background:var(--mint);       color:var(--ink); }
.lc-pale { background:var(--mint-pale);  color:var(--ink); }
.lc-cream{ background:var(--sand);       color:var(--ink); }
/* Added to break a repeat, not because the palette was short of warm
   tints: --sand is a grey-leaning beige and --wash-cream a yellow one,
   which is just enough separation to sit three cards apart. */
.lc-butter{ background:var(--wash-cream); color:var(--ink); }
.lc-sand { background:var(--gold-lt);   color:var(--ink); }
.lc-gold { background:var(--gold);      color:var(--ink); }
.lc-rust { background:var(--rust-lt);   color:var(--ink); }
.lc-teal { background:var(--teal);      color:#fff; }
.lc-deep { background:var(--teal-deep); color:var(--on-dark); }
.lc-ink  { background:var(--ink);       color:var(--on-dark); }

/* Everything except the glyph rides above it. */
.lc > *:not(.lc-ico){ position:relative; z-index:1; }

.lc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lc-kick{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; opacity:.66;
}
/* currentColor at 13%, the same mix .pc-inc .tk uses, so one rule covers
   a chip on --gold and a chip on --ink without a per-ground override. */
.lc-pill{
  flex-shrink:0;
  padding:4px 9px; border-radius:100px;
  background:color-mix(in srgb, currentColor 13%, transparent);
  font-family:var(--mono); font-size:8.5px; letter-spacing:.13em;
  text-transform:uppercase;
}
.lc-t{
  margin-top:18px;
  font-size:clamp(17px,1.6vw,21px); font-weight:800;
  letter-spacing:-0.035em; line-height:1.1; color:inherit;
}
.lc-d{
  margin-top:10px; max-width:24ch;
  font-size:clamp(13.5px,1vw,15px); line-height:1.5; opacity:.82;
}
.lc-go{
  margin-top:auto; padding-top:18px;
  display:flex; align-items:center;
}
.lc-go svg{
  width:19px; height:19px;
  transition:transform .42s var(--e-spring);
}
.lc:hover .lc-go svg{ transform:translateX(6px); }

/* The glyph. Bleeds past two edges like .pc-ico so the card reads as a
   crop of something larger rather than a sticker centred in a box. */
.lc-ico{
  position:absolute; z-index:0;
  right:-16px; bottom:-14px;
  width:clamp(126px,12vw,158px); aspect-ratio:1;
  opacity:.26; pointer-events:none;
  transition:opacity .45s var(--e-out), transform .55s var(--e-out);
}
.lc-ico svg{ width:100%; height:100%; }
.lc:hover .lc-ico{ opacity:.34; transform:translate(-4px,-4px) scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .lc, .lc-ico, .lc-go svg{ transition:none !important; }
  .lc:hover{ translate:none; }
  .lc:hover .lc-ico{ transform:none; }
  .lc:hover .lc-go svg{ transform:none; }
}

.lib-swipe{
  display:none;
  margin-top:14px; padding:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-light-faint);
}
/* Swipe hint appears exactly where the arrows disappear. */
@media(max-width:860px){ .lib-swipe{ display:block; } }

.shs{
  --d:0;
  position:relative;
  /* The 78/98 padding was headroom for buttons that used to be placed
     absolutely above and below the stage. Those are gone, and the button
     row that replaced them now sits ABOVE the stage, between the lede and
     the screens — so the stage reserves nothing at either end.

     Held under the content column rather than filling it. Every device
     inside is sized in % of this box, so one width scales the whole
     cluster at once; at --maxw the screens were reading as the subject
     of the page instead of a showcase for the cards below them.

     width, NOT max-width — and that distinction is the difference
     between three screens and an empty hole. .shs is a flex item of
     .sh-view (a column flex container), so auto margins on the inline
     axis are CROSS-axis auto margins, and those switch off the default
     align-items:stretch. With stretch gone the item falls back to its
     own width, and `max-width` leaves that `auto` — i.e. shrink-to-fit.
     Every child of .rs-stage is position:absolute and contributes no
     intrinsic width, so shrink-to-fit resolved to 0, the stage's
     aspect-ratio turned 0 width into 0 height, and the cluster vanished
     while .sh-view's 100vh floor held the empty space open. A definite
     width gives the auto margins something to centre and never consults
     the contents. */
  width:min(100%, 1080px); margin-inline:auto;
  margin-block:clamp(26px,3vw,42px) 0;
  padding:0;
}
.shs.in{ --d:1; }
/* ── Copy inside the screens ────────────────────────────────────────
   One rule, no per-category selectors: the driver puts .is-open on the
   screen itself, so adding a fourth category needs no CSS at all. The
   two screens that are not open are left completely alone — no dim, no
   desaturate — so the cluster reads as switched TO something rather than
   switched off.

   Each panel takes its own button's colour through --sc, which is what
   ties the pill in the row to the surface that opens above it.

   This rule was briefly deleted along with the .shx-lbl block above it —
   the two shared a region of the file, and removing the outside labels
   took the inside panels with them. Nothing in CSS matched .is-open, so
   the buttons still set the class and nothing happened. Kept separate
   now so the next edit to one cannot reach the other. */
.rs-scr.is-open .scr-info{ opacity:1; }

.rs-scr[data-cat="products"]  .scr-info{ --sc:var(--mint);    }
.rs-scr[data-cat="workshops"] .scr-info{ --sc:var(--gold-lt); }
.rs-scr[data-cat="tools"]     .scr-info{ --sc:var(--rust-lt); }
/* Type has to scale with the SCREEN, not the viewport: a laptop screen is
   about 450px wide inside a 1360px container, so a vw-based size that
   looks right on the monitor is unreadable there and vice versa. cqw is
   a percentage of this container's own width, which is exactly the
   relationship needed. Scoped to .shs so the tools grid's screens, which
   hold no text, are untouched. */
.shs .ts-screen{ container-type:inline-size; }
.scr-info{
  --sc:var(--mint);
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center;
  padding:7% 8%;
  background:var(--sc); color:var(--ink);
  opacity:0; transition:opacity .4s var(--e-out);
}
/* The monitor sits behind both laptops, and they cover its screen's
   bottom corners once they overlap. Everything above ~72% of the screen
   height is clear at full width, so the panel is inset from the bottom
   to keep the copy inside that band. */
.ts-dev-desktop .scr-info{ padding:8% 11% 28%; }
/* currentColor tint rather than a fixed value, so one rule sits
   correctly on mint, gold and rust alike. */
.scr-pill{
  margin-bottom:.75em;
  padding:.42em 1em; border-radius:999px;
  font-family:var(--mono); font-weight:500;
  font-size:clamp(7px, 2.5cqw, 10.5px);
  letter-spacing:.14em; text-transform:uppercase;
  background:color-mix(in srgb, currentColor 15%, transparent);
  color:inherit;
}
/* Free is the one worth noticing, so it inverts to solid ink. */
.scr-pill.is-free{ background:var(--ink); color:var(--mint); }
.scr-t{
  font-size:clamp(12px, 5.4cqw, 27px);
  font-weight:800; letter-spacing:-0.03em; line-height:1.12;
  text-wrap:balance;
}
.scr-d{
  margin-top:.6em;
  font-size:clamp(8.5px, 3.4cqw, 15px);
  line-height:1.45; color:inherit; opacity:.78;
  max-width:34ch;
}
@media (prefers-reduced-motion: reduce){
  .scr-info{ transition:none; }
}
/* aspect-ratio, not a vw height: the stage is inside a max-width
   container, so a viewport-relative height keeps growing after the
   container has stopped and leaves a widening band of dead space above
   the devices — which is what pushed the Tools button off the monitor. */
/* 2.25, down from 2.6, to make room for the taller monitor below —
   the devices are bottom-anchored, so the stage has to be deep enough
   for the tallest of them or it overflows upward into the button. */
/* Taller than it was (2.25). The devices grew, and the monitor is the
   tallest of them — at 52% width its box is 611px against a 1360px
   container, which simply does not fit inside a stage 604px deep. The
   stage depth and the device widths are one setting: enlarge a device
   without opening the stage and the monitor overflows upward into the
   heading, because these are bottom-anchored. */
.shs .rs-stage{ aspect-ratio:1.95; height:auto; }
/* Entrance only. The hover response lives on .scr-info inside the
   screen now, so the device itself never animates on hover. */
.shs .rs-scr{ transition:translate 1s var(--e-out); }
/* Monitor centre, a laptop each side, phone tucked in behind the left
   one. z-index puts the laptops in front, the phone next, monitor last. */
.shs-c{
  left:50%; width:52%; margin-left:-26%; bottom:4%; z-index:1;
  translate:0 calc((1 - var(--d)) * 14vh); transition-delay:.04s;
}
/* The .shs-ph phone rules lived here. Removed with the element: it
   belonged to no category, so once every screen had a label and a panel
   it was the only object in the cluster that meant nothing. */
.shs-ll{
  left:0; width:41%; bottom:0; z-index:3;
  translate:calc((1 - var(--d)) * -14vw) calc((1 - var(--d)) * 4vh); transition-delay:.14s;
}
.shs-rl{
  right:0; width:41%; bottom:0; z-index:3;
  translate:calc((1 - var(--d)) * 14vw) calc((1 - var(--d)) * 4vh); transition-delay:.10s;
}
/* The .shs-btn and .shs-tie rules lived here — three absolutely placed
   buttons on the device centres (19% / 50% / 81%) and the orange lines
   tying each to its screen. Both are gone with the markup: the summary
   tiles below are the labels now, and they sit on those same three
   percentages, so the tie the lines used to draw is made by alignment
   instead of by a rule. */
/* Devices bigger again below this, because there is less width to share
   and the frames have to stay legible. */
@media (max-width:999.98px){
  .shs{ text-align:center; }
  .shs .rs-stage{ aspect-ratio:1.72; }
  .shs-c { width:58%; margin-left:-29%; }
  .shs-ll{ width:46%; left:0; }
  .shs-rl{ width:46%; right:0; }
}
/* No pointer, no hover, so the panels would never open and the copy —
   which lives nowhere else now — would be unreachable. Each screen holds
   its own panel, so all three can simply stay open; there is no conflict
   the way there would be with one shared surface.

   .shx-note used to be hidden here too, back when it read "Hover to see
   more" — an instruction nobody on a touch screen can follow. It says
   "Click to see more" now, which is true on every device: the buttons
   are links, and tapping one goes to that section. So it stays. */
@media (hover:none){
  .scr-info{ opacity:1; transition:none; }
}
@media (prefers-reduced-motion: reduce){
  .shs .rs-scr{ transition:none; }
}
/* Sheet unwound, exactly as .sh unwinds at the same thresholds: no lift,
   no travel, no filler strip — a plain white section in normal flow. */
@media (max-width:999.98px), (max-height:699.98px), (prefers-reduced-motion: reduce){
  #rapid{ padding-bottom:var(--sec-y); }
  .rs{ margin-top:0; pointer-events:auto; z-index:1; }
  .rs-sheet{ translate:none !important; will-change:auto; }
  .rs-sheet::after{ display:none; }
  .rs-scr{ translate:0 0 !important; }
}
html:not(.js) #rapid{ padding-bottom:var(--sec-y); }
html:not(.js) .rs{ margin-top:0; }
html:not(.js) .rs-sheet{ translate:none; }
html:not(.js) .rs-sheet::after{ display:none; }
.zone-dark, .zone-deep, .hero-v1, .hub-sec, footer.ft, .ecoz-bg{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size:140px 140px;
  background-position:0 0;
}
.hero-v1 .icon-playground{ z-index:1; }
.hero-v1 .hero-content   { z-index:4; }
.pcard, .eco-c, .trust-i, .incl,
.cart, .player-card, .drawer, .tool-vis{
  background-image:none;
}
.pg-facts{
  margin-top:clamp(20px,2.4vw,26px);
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line-light);
}
.pg-facts div{
  padding:14px 0; border-bottom:1px solid var(--line-light);
}
.pg-facts div:nth-child(odd){ padding-right:18px; }
.pg-facts .k{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-light-faint);
}
.pg-facts .v{
  display:block; margin-top:5px; font-size:14.5px; font-weight:700;
  letter-spacing:-0.015em; color:var(--on-light);
}
@media(max-width:420px){ .pg-facts{ grid-template-columns:1fr; } }
.pg-themes{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.4vw,18px);
  margin-bottom:clamp(26px,3.2vw,42px);
}
@media(max-width:760px){ .pg-themes{ grid-template-columns:1fr 1fr; } }
.pg-theme{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:var(--r-md);
  background:var(--pg-tint, color-mix(in srgb, var(--pg-ink) 7%, var(--white)));
}
.pg-theme .sq{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  display:grid; place-items:center; background:var(--white);
}
.pg-theme .sq svg{ width:16px; height:16px; stroke:var(--pg-ink); stroke-width:1.8; fill:none; }
.pg-theme .cl{ font-size:13.5px; font-weight:700; letter-spacing:-0.02em; line-height:1.25; }
.pg-days{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.8vw,24px); }
@media(max-width:760px){ .pg-days{ grid-template-columns:1fr; } }
.pg-day{
  border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,34px);
  background:var(--white);
  border-top:3px solid var(--ink);
  box-shadow:0 22px 44px -30px rgba(0,48,56,.45), 0 0 0 1px var(--line-light);
}
.pg-day:nth-child(2){ border-top-color:var(--rust); }
.pg-day .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--teal);
}
.pg-day .t{
  margin-top:11px; font-size:clamp(20px,2.1vw,27px); font-weight:800;
  letter-spacing:-0.035em; line-height:1.08;
}
.pg-day .s{ margin-top:10px; font-size:14px; line-height:1.55; color:var(--on-light-muted); }
.pg-day ul{ margin-top:clamp(18px,2.2vw,24px); border-top:1px solid var(--line-light); }
.pg-day li{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 0; border-bottom:1px solid var(--line-light);
  font-size:14.5px; line-height:1.5;
}
.pg-day li svg{ width:15px; height:15px; stroke:var(--pg-ink); stroke-width:2.2; fill:none; flex-shrink:0; margin-top:3px; }
.pg-out-lede{
  margin-top:20px; font-size:clamp(18px,2vw,25px); font-weight:700;
  letter-spacing:-0.03em; line-height:1.32; color:var(--ink);
  max-width:30ch;
}
.pd-rel-c .go{
  margin-top:auto; padding-top:22px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
}
.pd-rel-c .go svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none; }
.dwc-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.pd-rel-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:940px){ .pd-rel-3{ grid-template-columns:1fr 1fr; } }
@media(max-width:720px){ .pd-rel-3{ grid-template-columns:1fr; } }
/* Program page hero: the home page Deep work Lottie on one white card,
   in place of the three photo placeholders. On desktop the card takes no
   height of its own (the Lottie is absolutely positioned inside it) and
   stretches to the row, so its top and bottom line up with the text
   column on the right. Once the hero stacks it falls back to a 4:3 box.
   The inner .dwc-lot reuses the home page's spinner and failed-load
   fallback. */
.pd-gal-lot{ align-self:stretch; }
.pd-lot-card{
  position:relative; flex:1 1 auto;
  border-radius:var(--r-lg);
  background:var(--white);
  box-shadow:0 26px 50px -28px rgba(0,12,15,.55), inset 0 0 0 1px rgba(0,48,56,.06);
  overflow:hidden;
}
.pd-lot-card .dwc-lot{
  position:absolute; inset:clamp(16px,2vw,26px);
  width:auto; height:auto; min-height:0;
}
@media(max-width:940px){
  .pd-gal-lot{ align-self:start; }
  .pd-lot-card{ flex:none; aspect-ratio:4/3; }
}
/* "You leave with" in plain body colours instead of the page accent */
.pd-inc-ink .k{ color:var(--on-light-faint); }
.pd-inc-ink li{ color:var(--on-light); }
/* Related program tiles with the eyebrow removed: title sits at the top */
.pd-rel-c .t:first-child{ margin-top:0; }
/* Bare variant: the Lottie sits straight on the section background, no
   white card. The artwork is cropped to its own bounds in JS, so there is
   no inset either. */
.pd-lot-card.pd-lot-bare{ background:none; box-shadow:none; border-radius:0; overflow:visible; }
/* Inset so the trimmed artwork sits at roughly three-quarters of the
   column rather than edge to edge, centred against the text. */
.pd-lot-bare .dwc-lot{ inset:10% 12%; }
/* ── Product page: "What's included" as its own band. Heading left,
      a 2x2 of tinted cards right, each with the same icon tile the
      Deep Work theme chips use. ── */
.pd-inc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.2vw,16px); }
@media(max-width:560px){ .pd-inc-grid{ grid-template-columns:1fr; } }
.pd-inc-card{
  display:flex; flex-direction:column;
  padding:clamp(20px,2.2vw,28px); border-radius:var(--r-lg);
  background:var(--pg-tint, color-mix(in srgb, var(--pg-ink) 7%, var(--white)));
}
.pd-inc-card .ic,
.pd-flow-ic .ic{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  display:grid; place-items:center; background:var(--white);
}
.pd-inc-card .ic svg,
.pd-flow-ic .ic svg{ width:19px; height:19px; stroke:var(--pg-ink); stroke-width:1.8; fill:none; }
.pd-inc-card .t{
  margin-top:18px; font-size:clamp(16px,1.35vw,18.5px); font-weight:800;
  letter-spacing:-0.03em; line-height:1.2; color:var(--ink);
}
.pd-inc-card .s{ margin-top:8px; font-size:14px; line-height:1.5; color:var(--on-light-muted); }

/* ── "How it works" steps with an icon. White cards so they read on the
      light-teal band; the step number moves to the top-right. ── */
.pd-flow-ic li{ background:var(--white); color:var(--on-light); box-shadow:0 0 0 1px var(--line-light); }
.pd-flow-ic .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pd-flow-ic .top .n{ margin-bottom:0; }
.pd-flow-ic .ic{ background:var(--pg-tint, color-mix(in srgb, var(--pg-ink) 7%, var(--white))); }

/* FAQ on a white band: the closed +/- circle is white by default, which
   disappears on white. Tint it. The open (orange) state still wins. */
.zone-white .acc-q .pm{ background:var(--pg-tint, color-mix(in srgb, var(--pg-ink) 7%, var(--white))); }
/* Five-step "How it works": one row on wide screens rather than four
   plus an orphan. Narrower screens keep the auto-fit wrap. */
@media(min-width:1100px){ .pd-flow-5{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

/* ── Shop page tile hover — the home page's vocabulary:
      the card lifts (translate, as .pcard/.eco-c do, so it never fights
      the reveal system's transform), the shadow deepens, and the icon
      tile does the Deep Work chip's springy tilt. Scoped to product
      pages via main[data-product]; pointer devices only. ── */
[data-product] .pd-inc-card,
[data-product] .pd-flow-ic li,
[data-product] .pd-who li{
  position:relative;
  transition:translate .5s var(--e-out), box-shadow .5s var(--e-out), background-color .4s var(--e-out);
}
[data-product] .pd-inc-card .ic,
[data-product] .pd-flow-ic .ic{ transition:transform .35s var(--e-spring), background-color .35s var(--e-out); }
[data-product] .pd-who li svg{ transition:transform .35s var(--e-spring); }
@media (hover:hover){
  [data-product] .pd-inc-card:hover,
  [data-product] .pd-flow-ic li:hover,
  [data-product] .pd-who li:hover{ z-index:1; }
  [data-product] .pd-inc-card:hover{
    translate:0 -6px;
    box-shadow:0 34px 60px -34px rgba(0,48,56,.40);
  }
  [data-product] .pd-flow-ic li:hover{
    translate:0 -6px;
    box-shadow:0 0 0 1px transparent, 0 34px 60px -34px rgba(0,48,56,.40);
  }
  [data-product] .pd-inc-card:hover .ic,
  [data-product] .pd-flow-ic li:hover .ic{ transform:translateY(-3px) rotate(-5deg); }
  [data-product] .pd-flow-ic li:hover .ic{ background:color-mix(in srgb, var(--pg-ink) 16%, var(--white)); }
  body.pg-th-sand [data-product] .pd-flow-ic li:hover .ic{ background:#ecd6b8; }
  [data-product] .pd-who li:hover{
    translate:4px 0;
    box-shadow:0 0 0 1px var(--line-light), 0 18px 34px -24px rgba(0,48,56,.40);
  }
  [data-product] .pd-who li:hover svg{ transform:scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  [data-product] .pd-inc-card,
  [data-product] .pd-flow-ic li,
  [data-product] .pd-who li{ translate:none !important; }
  [data-product] .pd-inc-card .ic,
  [data-product] .pd-flow-ic .ic,
  [data-product] .pd-who li svg{ transform:none !important; }
}


/* Mint pages: the wash is --paper (#f7fcfc), which is all but white, so
   tiles in that colour sitting on a white band need the same hairline the
   home page gives its paper-on-white cards, or they vanish. */
body.pg-th-mint .pd-inc-card,
body.pg-th-mint .pg-theme,
body.pg-th-mint .pd-flow-ic .ic,
body.pg-th-mint .zone-white .acc-q .pm{ box-shadow:inset 0 0 0 1px var(--line-light); }
@media (hover:hover){
  body.pg-th-mint [data-product] .pd-inc-card:hover{
    box-shadow:inset 0 0 0 1px var(--line-light), 0 34px 60px -34px rgba(0,48,56,.40);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   VALUES CARDS — product-values-cards.html
   Ten sets, sold singly or as the full collection. The page owns a set
   picker (checklist in the buy box + a toggle on every set tile, both
   driving one selection) instead of the usual one-product tier radio.
   Each set carries --c, its colour sampled from the printed card, which
   is used for the swatch, the mini card and the selected ring only —
   never behind text, because half the spectrum is too light for it.
   ══════════════════════════════════════════════════════════════════════ */

/* Contained shots are pinned to the frame. The shared rules size an
   image at width/height 100% of a grid cell that is itself sized by the
   image, so the height never resolves and the picture runs past the
   frame — invisible with cover (overflow clips it), a cropped product
   with contain. Absolute + inset gives the percentages a real box. */
.bt-vis .bt-shot.is-contain{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; box-sizing:border-box;
}
/* Home bento: a wide cut-out letterboxed rather than cropped. */
.bt-vis .bt-shot.is-contain{ padding:5% 4%; }

/* Hero gallery: the box-set photo, then a second shot that takes up
   whatever height is left, so the gallery ends level with the buy box
   (the set checklist makes that column long). The row stretches, the
   second frame grows into the space and the photo covers it. The floor
   stops it turning into a sliver when "Full collection" hides the
   checklist and the buy box gets short. */
@media(min-width:941px){
  .pd-hero.vc-hero{ align-items:stretch; }
  .vc-hero .pd-buy{ position:static; }
  .vc-gal-fill{ flex:1 1 0; min-height:300px; }
  .vc-gal-fill img{ position:absolute; inset:0; }
}
/* Stacked on a phone the gallery comes before the title; one photo is
   enough there. */
@media(max-width:940px){ .vc-gal-fill{ display:none; } }

/* Specs: the box-set shot on its own in the left column, heading and
   table on the right. A transparent cut-out on a white band, so no
   frame. */
.vc-spec-shot{
  display:block; width:100%; max-width:480px; height:auto;
  margin-inline:auto;
}
@media(max-width:880px){ .vc-spec-shot{ max-width:300px; margin-inline:0; } }


/* Price line: a small count after the currency. */
.vc-count{
  padding:5px 10px; border-radius:999px;
  background:var(--pg-tint); color:var(--on-light);
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
  align-self:center;
}
.pd-tiers .tier .vc-save{
  display:inline-block; margin-left:8px; padding:3px 7px; border-radius:5px;
  background:color-mix(in srgb, var(--rust) 13%, transparent); color:var(--rust-deep);
  font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  vertical-align:2px;
}

/* ── Checklist in the buy box ──────────────────────────────────────── */
.vc-pick{ margin-top:14px; border:0; padding:0; min-width:0; }
.vc-pick[hidden]{ display:none; }
.vc-opts{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
@media(max-width:480px){ .vc-opts{ grid-template-columns:1fr; } }
.vc-opt{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-xs);
  border:1.5px solid var(--line-light); background:var(--white);
  font-size:13px; font-weight:600; line-height:1.25; color:var(--on-light);
  cursor:pointer; transition:border-color .2s, background .2s;
}
.vc-opt:hover{ border-color:color-mix(in srgb, var(--ink) 45%, transparent); }
.vc-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.vc-opt .bx{
  width:16px; height:16px; flex-shrink:0; border-radius:4px;
  border:1.5px solid color-mix(in srgb, var(--ink) 40%, transparent);
  display:grid; place-items:center; transition:background .2s, border-color .2s;
}
.vc-opt .bx svg{ width:11px; height:11px; stroke:#fff; stroke-width:3; fill:none; opacity:0; }
.vc-opt .sw{ width:6px; align-self:stretch; border-radius:3px; background:var(--c); flex-shrink:0; }
.vc-opt:has(input:checked){ border-color:var(--ink); background:var(--pg-tint); }
.vc-opt input:checked ~ .bx{ background:var(--ink); border-color:var(--ink); }
.vc-opt input:checked ~ .bx svg{ opacity:1; }
.vc-opt:has(input:focus-visible){ outline:2.5px solid var(--rust); outline-offset:2px; }

.vc-hint{
  margin-top:12px; padding:12px 14px; border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold) 16%, var(--white));
  font-size:13px; line-height:1.5; color:var(--on-light);
}
.vc-hint[hidden]{ display:none; }
.vc-hint button{
  margin-top:4px; font-weight:700; color:var(--rust-deep);
  border-bottom:1.5px solid currentColor; padding:0;
}
.vc-status{ margin-top:12px; font-size:13px; line-height:1.5; color:var(--on-light-muted); min-height:1px; }
.vc-status:empty{ display:none; }
.vc-status button{ font-weight:700; color:var(--on-light); border-bottom:1.5px solid currentColor; padding:0; margin-left:4px; }
.btn[aria-disabled="true"]{ opacity:.55; }
.btn[aria-disabled="true"]:hover{ transform:none; box-shadow:none; }
.btn-ink[aria-disabled="true"]:hover{ background:var(--ink); }
.btn[aria-disabled="true"]:hover svg{ transform:none; }

/* ── The ten sets ──────────────────────────────────────────────────── */
/* Desktop: four across — rows of 4, 4 and 2, with the collection tile
   taking the last two cells beside sets 9 and 10. Tablet: two across
   (five even rows) with the collection tile full width underneath.
   Phone: one. */
.vc-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
}
@media(min-width:1180px){ .vc-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:640px){ .vc-grid{ grid-template-columns:1fr; } }

.vc-set{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(20px,2vw,26px); border-radius:var(--r-lg);
  background:var(--white);
  box-shadow:0 0 0 1px var(--line-light), 0 10px 22px -16px rgba(0,48,56,.35);
  transition:box-shadow .3s var(--e-out), transform .45s var(--e-out);
  scroll-margin-top:110px;
}
.vc-set.is-on{
  box-shadow:0 0 0 2px var(--c), 0 18px 34px -22px rgba(0,48,56,.45);
}
.vc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
/* A card in miniature: the set's colour, the title bars the printed
   cards carry across their top edge, and the same slight lean they have
   in the fanned shot. */
.vc-mini{
  position:relative; width:40px; height:54px; border-radius:6px;
  background:var(--c); transform:rotate(-7deg);
  box-shadow:0 8px 16px -10px rgba(0,31,36,.55);
  transition:transform .45s var(--e-spring);
}
.vc-mini::before,
.vc-mini::after{
  content:''; position:absolute; left:7px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.75);
}
.vc-mini::before{ top:9px; width:22px; }
.vc-mini::after { top:15px; width:14px; }
.vc-set.is-on .vc-mini{ transform:rotate(0deg) translateY(-2px); }
.vc-n{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-light-faint); text-align:right; line-height:1.6;
}
.vc-n b{ display:block; font-weight:500; color:var(--pg-ink); }
.vc-t{ margin-top:16px; font-size:clamp(18px,1.45vw,21px); font-weight:800; letter-spacing:-0.03em; line-height:1.12; }
.vc-d{ margin-top:8px; font-size:14px; line-height:1.55; color:var(--on-light-muted); text-wrap:pretty; }
.vc-ft{
  margin-top:auto; padding-top:18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.vc-p{ font-size:19px; font-weight:800; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.vc-tgl{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 15px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-light); color:var(--on-light);
  font-size:13px; font-weight:700; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s, transform .3s var(--e-spring);
}
.vc-tgl svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.4; fill:none; }
.vc-tgl .on,
.vc-tgl .off{ display:inline-flex; align-items:center; gap:8px; }
.vc-tgl .on{ display:none; }
.vc-tgl:hover{ border-color:var(--ink); transform:translateY(-1px); }
.vc-tgl[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--on-dark); }
.vc-tgl[aria-pressed="true"] .on{ display:inline-flex; }
.vc-tgl[aria-pressed="true"] .off{ display:none; }
.vc-tgl[aria-disabled="true"]{ cursor:default; transform:none; }

/* The full collection. At four across it fills the two cells beside
   sets 9 and 10, level with them, offer stacked above the button. At two
   across it runs full width under the grid, set a little apart from the
   tiles, offer on the left and button bottom right; stacked again once
   it is too narrow for both. */
.vc-all{
  grid-column:1/-1;
  /* Set apart from the set tiles: an offer, not an eleventh set. */
  margin-top:clamp(14px,2vw,28px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
  gap:22px clamp(24px,4vw,64px);
  padding:clamp(22px,2.4vw,32px); border-radius:var(--r-lg);
  background:var(--ink); color:var(--on-dark);
  overflow:hidden; position:relative;
}
/* The spectrum: a strip of the ten set colours. */
.vc-spec{ display:flex; gap:4px; margin-top:18px; }
.vc-spec i{ flex:1; height:6px; border-radius:3px; }
.vc-all .t{ font-size:clamp(22px,2.2vw,30px); font-weight:800; letter-spacing:-0.04em; line-height:1.05; }
.vc-all .s{ margin-top:10px; font-size:14px; line-height:1.55; color:var(--on-dark-muted); max-width:46ch; }
.vc-all .p{ margin-top:16px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.vc-all .p .amt{ font-size:clamp(28px,2.8vw,38px); font-weight:800; letter-spacing:-0.05em; line-height:1; font-variant-numeric:tabular-nums; }
.vc-all .p .cur{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-faint); }
.vc-all .p s{ font-size:15px; font-weight:700; color:var(--on-dark-faint); }
.vc-all > div{ max-width:620px; }
@media(min-width:1180px){
  .vc-all{
    grid-column:span 2; margin-top:0;
    grid-template-columns:1fr; align-content:space-between;
  }
  .vc-all .btn{ justify-self:start; }
}
@media(max-width:700px){ .vc-all{ grid-template-columns:1fr; } .vc-all .btn{ justify-self:start; } }
.vc-all .btn.added,
.pd-cta .btn.added,
.pd-bar .btn.added{ background:#0f7a3d; color:#fff; }

@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .vc-set:hover{ transform:translateY(-4px); }
  .vc-set:hover .vc-mini{ transform:rotate(-2deg) translateY(-2px); }
}
@media (prefers-reduced-motion: reduce){
  .vc-set, .vc-mini, .vc-tgl{ transition:none; transform:none !important; }
}


/* ── Product page quantity stepper (Leadership 360 "Number of leaders").
      Sits where a tier row would, and borrows the tier row's box. ── */
.pd-qty{
  margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1.5px solid var(--ink); border-radius:var(--r-sm); padding:10px 10px 10px 16px;
  background:var(--pg-tint, color-mix(in srgb, var(--pg-ink) 7%, var(--white)));
}
.pd-qty-l{ display:flex; flex-direction:column; gap:3px; font-size:14px; font-weight:600; color:var(--on-light); }
.pd-qty-l span{ font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--on-light-muted); }
.qty.qty-lg{ background:var(--white); border-color:var(--line-light); }
.qty.qty-lg button{ width:40px; height:40px; font-size:18px; }
.qty.qty-lg button:disabled{ opacity:.3; cursor:not-allowed; }
.qty.qty-lg input{
  width:46px; height:40px; border:0; background:transparent; text-align:center;
  font-family:var(--mono); font-size:15px; color:var(--ink); -moz-appearance:textfield; appearance:textfield;
}
.qty.qty-lg input::-webkit-outer-spin-button,
.qty.qty-lg input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }