/* self-hosted logo font — never depend on a 3rd-party CDN for the brand mark */
@font-face{font-family:'Clash Display';font-weight:500;font-display:swap;src:url(/fonts/clash-display-500.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-weight:600;font-display:swap;src:url(/fonts/clash-display-600.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-weight:700;font-display:swap;src:url(/fonts/clash-display-700.woff2) format('woff2')}
@font-face{font-family:'General Sans';font-weight:400;font-display:swap;src:url(/fonts/general-sans-400.woff2) format('woff2')}
@font-face{font-family:'General Sans';font-weight:500;font-display:swap;src:url(/fonts/general-sans-500.woff2) format('woff2')}
@font-face{font-family:'General Sans';font-weight:600;font-display:swap;src:url(/fonts/general-sans-600.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/space-grotesk-600.woff2) format('woff2')}
:root{
  --sec-gap:120px;      /* one interval for every major section */
  --sec-gap-s:80px;     /* subordinate blocks */
  --lime:#C6F24E;
  --lime-ink:#7FA62B;   /* darkened lime for light/cream backgrounds — #C6F24E washes out on cream */
  --ink:#07070A;
  --paper:#F4F3EE;
  --muted:#8f8f86;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.06);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-2:cubic-bezier(.16,1,.3,1);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --display:"Clash Display","Helvetica Neue",Arial,sans-serif;
  --sans:"General Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:var(--ink)}

/* ---- film grain + global ambient ----------------------------------------- */
/* atmosphere: a moody edge vignette behind the content (darkens the frame,
   never the text — sits under the sections, shows through the dark gaps) */
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 118% at 50% 30%,transparent 54%,rgba(0,0,0,.34) 78%,rgba(0,0,0,.6) 100%)}
/* (.grain film-grain/static overlay removed — read as a glitch effect) */

/* ---- cursor spotlight ---------------------------------------------------- */
.spot{position:fixed;width:640px;height:640px;border-radius:50%;left:0;top:0;z-index:1;pointer-events:none;
  transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle,rgba(198,242,78,.07) 0%,rgba(198,242,78,.03) 24%,rgba(198,242,78,.012) 46%,transparent 68%);
  transition:opacity .5s var(--ease);will-change:transform}
@media (hover:none){.spot{display:none}}

/* ---- aurora: drifting ambient blooms (prestige atmospheric depth) --------
   A plain fixed div (same proven-safe pattern as .grain/.vignette) — NOT a
   body pseudo-element, which on a body-scroll-container page can jam iOS
   scrolling. pointer-events:none, so it never intercepts touch/scroll. */
/* layered depth base — the no-JS / behind-canvas fallback (dark, volumetric) */
.bg-base{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(70% 50% at 50% 112%, rgba(40,52,70,.14), transparent 60%),
  radial-gradient(135% 100% at 50% -8%, #0c0d12 0%, #08080c 48%, #050507 100%)}
/* ISOFORGE — a live topographic contour survey painted into one fixed canvas
   (marching-squares isolines of a domain-warped field; ridge rises under the cursor).
   Transparent, pointer-events:none, sits above .bg-base; .bg-base is the no-JS look. */
/* ---- ground -------------------------------------------------------------
   A single soft light source, top-right, and a fine grain tile. Both are
   static: nothing here paints per frame. The grain is what keeps a near-black
   page from reading as flat digital fill — it gives it the tooth of print. */
.bg-wash{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 88% -12%, rgba(226,232,208,.055), rgba(226,232,208,.018) 38%, transparent 68%),
    radial-gradient(80% 60% at 12% 104%, rgba(198,242,78,.030), transparent 62%);}
.bg-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.30;
  background-image:url("images/grain.png");background-repeat:repeat;background-size:160px 160px;}
@media(max-width:860px){.bg-grain{opacity:.22}}

/* ---- shell --------------------------------------------------------------- */
.wrap{position:relative;z-index:2}
.container{max-width:1240px;margin:0 auto;padding:0 40px}

/* ---- nav ----------------------------------------------------------------- */
.nav{position:fixed;top:13px;left:50%;transform:translateX(-50%);z-index:1600;
  width:min(1140px,calc(100% - 36px));
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 9px 9px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(26,28,34,.72),rgba(13,14,19,.55));
  backdrop-filter:blur(20px) saturate(175%);-webkit-backdrop-filter:blur(20px) saturate(175%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 34px -12px rgba(198,242,78,.07);
  transition:transform .5s var(--ease),opacity .5s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.nav:hover{border-color:color-mix(in srgb,var(--lime) 20%,rgba(255,255,255,.12));
  box-shadow:0 18px 50px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 40px -12px rgba(198,242,78,.11)}
.nav.hidden{transform:translateX(-50%) translateY(-130%)}
.brand{display:inline-flex;align-items:center;font-size:22px;letter-spacing:0;color:var(--paper)}
.nav-links{display:flex;gap:3px;align-items:center}
.nav-links a{font-size:12px;color:var(--muted);font-weight:500;padding:9px 14px;border-radius:10px;transition:color .3s var(--ease),background .3s var(--ease)}
.nav-links a:hover{color:var(--paper);background:rgba(255,255,255,.06)}
.nav-cta{font-size:12px;font-weight:600;color:var(--ink) !important;background:var(--lime);margin-left:5px;
  padding:10px 18px !important;border-radius:13px !important;box-shadow:0 0 0 0 rgba(198,242,78,.4);transition:transform .3s var(--ease),box-shadow .4s var(--ease)}
.nav-cta:hover{background:var(--lime) !important;transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
@media(max-width:860px){.nav-links a:not(.nav-cta){display:none}}
.nav-burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.04);position:relative;cursor:pointer;flex:none}
.nav-burger{position:relative}
.nav-burger::after{content:"";position:absolute;inset:-4px}
.nav-burger span{position:absolute;left:11px;right:11px;height:1.6px;background:var(--paper);border-radius:2px;transition:transform .35s var(--ease)}
.nav-burger span:nth-child(1){top:16px}.nav-burger span:nth-child(2){bottom:16px}
.nav-burger.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:860px){.nav-burger{display:block}}
/* ===== mobile menu — circular clip-path reveal from the burger ===== */
.mobile-menu{position:fixed;inset:0;z-index:1400;overflow:hidden;
  background:
    radial-gradient(76% 46% at 88% 6%, rgba(198,242,78,.16), transparent 58%),
    linear-gradient(rgba(244,243,238,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,243,238,.04) 1px,transparent 1px),
    #09090c;
  background-size:100% 100%,64px 64px,64px 64px,100% 100%;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:max(104px,18vw) clamp(28px,8vw,52px) clamp(30px,9vw,54px);
  /* GPU-cheap fade+scale (opacity/transform only) — the links carry the motion */
  opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.03);
  transition:opacity .34s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s linear .4s}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);
  transition:opacity .28s ease,transform .55s cubic-bezier(.16,1,.3,1)}

/* editorial link list: index · mask-reveal label · arrow, on hairline rows */
.mm-links{display:flex;flex-direction:column;border-top:1px solid rgba(244,243,238,.10)}
.mm-links a{--d:0s;position:relative;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:14px;
  padding:clamp(14px,4.3vw,20px) 8px clamp(14px,4.3vw,20px) 4px;
  border-bottom:1px solid rgba(244,243,238,.10);text-decoration:none;color:var(--paper);
  transition:padding-left .45s var(--hx-spring),background .35s var(--ease)}
.mm-links a:nth-child(1){--d:.15s}
.mm-links a:nth-child(2){--d:.22s}
.mm-links a:nth-child(3){--d:.29s}
.mm-links a:nth-child(4){--d:.36s}
.mm-t{display:block;overflow:hidden;padding-bottom:.12em;
  font-family:var(--display);font-weight:600;font-size:clamp(30px,8.8vw,44px);letter-spacing:-.02em;line-height:1.1}
.mm-t>span{display:block;transform:translateY(118%);transition:transform .65s cubic-bezier(.16,1,.3,1) var(--d)}
.mobile-menu.open .mm-t>span{transform:translateY(0)}
/* press/hover: lime wash, row nudges in, arrow + index brighten */
.mobile-menu .mm-links a:hover,.mobile-menu .mm-links a:active{
  background:linear-gradient(90deg,rgba(198,242,78,.10),transparent 74%);padding-left:14px}
.mm-foot{position:absolute;left:clamp(28px,8vw,52px);right:clamp(20px,8vw,52px);bottom:clamp(26px,8vw,42px);
  font-family:var(--mono);font-size:clamp(8.5px,2.7vw,10.5px);letter-spacing:.1em;white-space:nowrap;
  text-transform:uppercase;color:rgba(244,243,238,.42);
  opacity:0;transition:opacity .5s var(--ease) .48s}
.mobile-menu.open .mm-foot{opacity:1}

/* nav lifts above the overlay (so the X is always tappable) and dissolves into it */
.nav.menu-open{background:transparent;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.menu-open .nav-cta{opacity:0;visibility:hidden}
.nav.menu-open .nav-burger{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
/* mobile nav: the floating pill is glassy (.6 alpha) on desktop, which lets the
   bright lime hero CTA bleed through as you scroll. On phones/tablets the bar
   goes near-solid so scrolling content can't show through, the controls slim
   down, and the burger becomes a circle so its roundness matches the pill CTA.
   The CTA label shortens so it never wraps on narrow screens. Desktop untouched. */
.nc-sm{display:none}
@media(max-width:860px){
  /* rounded-RECTANGLE bar matching the hero buttons (13px), not a pill. The
     oversized Free-audit pill is dropped on mobile (it lives in the hero and in
     the menu), leaving a clean brand + burger bar. */
  .nav{background:rgba(12,12,16,.96);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-radius:14px;padding:7px 8px 7px 15px;
    transition:transform .5s var(--ease),opacity .5s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
  .brand{font-size:18px}
  .nav-cta{display:none}
  /* burger: rounded square (same roundness family as the hero buttons) */
  .nav-burger{width:36px;height:36px;border-radius:11px}
  .nav-burger span{left:10px;right:10px;height:2px;transition:transform .38s var(--hx-ease2)}
  .nav-burger span:nth-child(1){top:14px}    /* centre 15px */
  .nav-burger span:nth-child(2){bottom:14px} /* centre 21px */
  /* both lines converge EXACTLY to the box centre (y=18) so the X is true */
  .nav-burger.open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
  .nav-burger.open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
}
@media(max-width:480px){
  .nc-lg{display:none}
  .nc-sm{display:inline}
}
.hero{position:relative;min-height:100vh;width:100%;overflow:hidden;isolation:isolate;
  display:flex;align-items:center}
@keyframes hxBreathe{from{transform:translate3d(0,0,0) scale(1);opacity:.85}to{transform:translate3d(-34px,32px,0) scale(1.09);opacity:1}}
@keyframes hxGhostin{to{opacity:1}}
/* the second sentence, demoted — as in the original headline: the claim reads
   bright, the counter-line sits back so the two sentences don't shout together */
.hx-h1 .hx-dim{color:#cfcfc6}
@keyframes hxKeyPulse{from{opacity:.78}to{opacity:1}}

@keyframes hxSlideUp{to{transform:translateY(0)}}
@keyframes hxRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.hx-screen{position:absolute;border-radius:14px;overflow:hidden;pointer-events:auto;
  background:#0d0d12;border:1px solid rgba(244,243,238,.10);
  box-shadow:0 50px 110px -34px rgba(0,0,0,.9), 0 12px 40px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  will-change:transform;opacity:0;backface-visibility:hidden}
.hx-screen img{display:block;width:100%;height:auto}
/* crop tall shots so we show the rich top, not empty space */
.hx-crop{overflow:hidden;position:relative}

/* register animatable props for smooth parallax via vars */
@property --hx-px{syntax:'<length>';inherits:false;initial-value:0px}
@property --hx-py{syntax:'<length>';inherits:false;initial-value:0px}
@property --hx-sc{syntax:'<number>';inherits:false;initial-value:1}
@property --hx-hz{syntax:'<length>';inherits:false;initial-value:0px}
@property --hx-hsc{syntax:'<number>';inherits:false;initial-value:1}
@property --hx-hlift{syntax:'<length>';inherits:false;initial-value:0px}
@property --hx-flat{syntax:'<number>';inherits:false;initial-value:1}
@property --hx-front{syntax:'<number>';inherits:false;initial-value:0}

.hx-screen{
  --hx-px:0px;--hx-py:0px;--hx-mx:0px;--hx-my:0px;
  /* hover-focus deltas (defaults = no-op) */
  --hx-hz:0px;        /* absolute front depth applied on hover (NOT added to base --hx-tz) */
  --hx-front:0;       /* 0 = use base --hx-tz, 1 = jump to absolute front plane --hx-hz */
  --hx-hsc:1;         /* extra scale on hover */
  --hx-hlift:0px;     /* extra lift (translateY) on hover */
  --hx-flat:1;        /* 1 = full tilt, 0 = flattened toward camera on hover */
  /* FIX (a): translateZ resolves to EITHER the base depth OR the absolute front
     plane (--hx-hz), chosen by --hx-front (0/1) — it is NOT base + delta, so every
     hovered screen lands on the identical front plane regardless of its base depth. */
  transform:translate3d(calc(var(--hx-px) + var(--hx-mx)),calc(var(--hx-py) + var(--hx-my) + var(--hx-hlift)),
              calc(var(--hx-tz,0px) * (1 - var(--hx-front)) + var(--hx-hz) * var(--hx-front)))
            rotateY(calc(var(--hx-ry,0deg) * var(--hx-flat))) rotateX(calc(var(--hx-rx,0deg) * var(--hx-flat))) rotateZ(calc(var(--hx-rz,0deg) * var(--hx-flat)))
            scale(calc(var(--hx-sc,1) * var(--hx-hsc)));
  animation-name:var(--hx-anim);animation-duration:.95s;animation-timing-function:var(--hx-ease2);animation-fill-mode:forwards;
  /* FIX (b): smoothness — tween ONLY the transform-driving vars + opacity with one
     smooth spring/ease; we deliberately do NOT transition filter or box-shadow. */
  transition:--hx-hz .5s var(--hx-spring),--hx-front .5s var(--hx-spring),--hx-hsc .5s var(--hx-spring),
             --hx-hlift .5s var(--hx-spring),--hx-flat .5s var(--hx-ease),opacity .4s var(--hx-ease);
}

/* ---------- HOVER-TO-FOCUS ----------
   JS keeps writing --hx-mx/--hx-my parallax; hover only flips these extra vars +
   z-index, so the two systems compose instead of fighting. */
.hx-scene.has-focus .hx-screen{opacity:.6}
@keyframes hxKIn{from{opacity:0;--hx-px:-60px;--hx-py:-34px;--hx-sc:.92}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}
@keyframes hxAIn{from{opacity:0;--hx-px:60px;--hx-py:-44px}to{opacity:1;--hx-px:0;--hx-py:0}}
@keyframes hxCoIn{from{opacity:0;--hx-px:-46px;--hx-py:30px;--hx-sc:.93}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}
@keyframes hxPrIn{from{opacity:0;--hx-px:52px;--hx-py:30px;--hx-sc:.94}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}
@keyframes hxIIn{from{opacity:0;--hx-px:-36px;--hx-py:54px;--hx-sc:.93}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}

/* left was 244px. Once this tile stopped rendering as a 6px sliver it became a
   full 281x268 card again, and rotateY(-11deg) throws its right edge toward the
   camera — far enough forward to intersect the lessonu tile beside it and eat
   the first two letters of its "lessonu.com" chrome label. 214px pulls it clear
   of the label (which starts ~60px in) without reaching the invoicing tile. */
.hx-s-class{width:280px;left:214px;top:446px;z-index:12;--hx-tz:10px;--hx-ry:-11deg;--hx-rx:5.5deg;--hx-rz:-1.5deg;
  --hx-anim:hxCIn;animation-delay:.73s;
  border-color:rgba(198,242,78,.20);
  box-shadow:0 50px 110px -34px rgba(0,0,0,.9),0 0 0 1px rgba(198,242,78,.10),inset 0 0 60px rgba(198,242,78,.05)}
@keyframes hxCIn{from{opacity:0;--hx-px:-22px;--hx-py:50px}to{opacity:1;--hx-px:0;--hx-py:0}}
@keyframes hxCalIn{from{opacity:0;--hx-px:48px;--hx-py:50px;--hx-sc:.93}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}
@keyframes hxDIn{from{opacity:0;--hx-px:42px;--hx-py:-30px;--hx-sc:.94}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}

/* --- FRONT --- */
.hx-s-dash{width:430px;left:46px;top:150px;z-index:16;--hx-tz:150px;--hx-ry:-12.5deg;--hx-rx:3.5deg;--hx-rz:-0.5deg;
  --hx-anim:hxDashIn;animation-delay:.94s;
  box-shadow:0 70px 130px -36px rgba(0,0,0,.92),0 20px 50px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
@keyframes hxDashIn{from{opacity:0;--hx-px:60px;--hx-py:42px;--hx-sc:.93}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}

@media(max-width:1080px){   /* subtle giant "STUDIO" reads as clutter on phones */
  .hx-s-dash{width:420px;left:6px;top:90px}}

/* shared buttons (used by hero CTAs + contact form) — softened to 10px rect */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--lime);color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:15.5px;padding:16px 26px;border-radius:13px;line-height:1;
  border:none;cursor:pointer;position:relative;will-change:transform;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.75);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.btn-primary:hover{box-shadow:0 20px 44px -18px rgba(0,0,0,.8);transform:translateY(-2px)}
/* The arrow was box-centred and still read low: General Sans sets → near the
   baseline, so against 600-weight caps its optical centre sits under the text's.
   The lift is 3.5px, and that number was measured off rendered pixels rather
   than guessed: the label's cap-height band centres exactly on the button, and
   the arrow's ink centre sat 2.67px under it on top of a 1px first attempt.
   The negative margin pays back the closing quote's right sidebearing on this
   one label — the flex gap said 10px and the eye saw nearly twice that. */
.btn-primary .arr{font-size:17px;line-height:1;margin-left:-2px;
  transform:translate(0,-3.5px);transition:transform .35s var(--ease)}
@media(max-width:560px){
  /* stack hero CTAs so the long primary label fits on ONE line, and trim size */
  .hx-ctas{flex-direction:column;align-items:flex-start;gap:12px}
  .btn-primary,.btn-ghost{font-size:14px;padding:13px 22px;white-space:nowrap}
}

/* ---- marquee ------------------------------------------------------------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  padding:20px 0;background:rgba(255,255,255,.012);position:relative;z-index:3;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* seamless: 4 identical copies, the inter-item gap built into each item (padding-right)
   so translateX(-50%) lands copy 3 exactly on copy 1 — no jump, no edge gap. */
.marquee-track{display:flex;width:max-content;animation:marq 65s linear infinite;will-change:transform}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* No perpetual ticker on phones: a permanently-moving band on a page the client
   already calls laggy, announcing services the caps section lists one screen later. */
@media(max-width:860px){.marquee{display:none}}
/* .sec-eyebrow removed: "SELECTED WORK" over "Four products, live at public
   URLs." told a reader nothing the headline had not already said. Seven of
   them, one per section, is the house style of an agency template rather
   than a voice. The headlines carry it alone. */
/* monospace metadata voice — type contrast against the display grotesk */
.case-num,.case-cat,.case-year,.oc-label,.cap-seen,.price-tier,.tl-when,.frame-tag,.lh-old,.lh-new,.frame-url,.price-badge{font-family:var(--mono)}

/* ---- cases --------------------------------------------------------------- */
.case{position:relative;padding:60px 0;overflow:hidden}
.fav{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:12px;color:var(--ink);
  background:var(--acc);box-shadow:0 2px 10px -2px var(--acc)}

/* product showcase (multi-screen) */
.showcase{display:flex;flex-direction:column;gap:14px}
.chip{font-size:12.5px;font-weight:500;letter-spacing:.02em;padding:7px 15px;border-radius:100px;
  color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  background:color-mix(in srgb,var(--acc) 9%,transparent)}
.stk{font-family:var(--sans);font-size:12px;color:#cfcfc6;padding:4px 11px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.025)}

/* ---- capabilities ------------------------------------------------------- */
.caps{padding:var(--sec-gap) 0 44px}
/* ===== capability bento — every tile is a realistic, animated micro-UI (single lime) ===== */
.caps-bento{display:flex;flex-direction:column;margin-top:44px;position:relative}
/* the whole bento is one left-to-right workflow: a faint vertical spine threads the
   three stage nodes, and each stage row carries its own connector rail + comet */
.caps-bento::before{content:"";position:absolute;left:13px;top:14px;bottom:46px;width:1px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--lime) 26%,transparent) 8%,color-mix(in srgb,var(--lime) 26%,transparent) 92%,transparent);opacity:.6}
@keyframes cbfArrow{0%,100%{opacity:.35;border-color:color-mix(in srgb,var(--lime) 40%,var(--line))}
  18%{opacity:1;border-color:var(--lime)}40%{opacity:.5}}

.cbx{--ca:#c6f24e;position:relative;z-index:1;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border:1px solid rgba(244,243,238,.17);
  /* opaque, defined surface so each tile reads as a real, tappable button — not a
     faint outline floating in the dark. lime wash up top, solid charcoal base. */
  background:radial-gradient(130% 90% at 50% -18%,color-mix(in srgb,var(--ca) 15%,transparent),transparent 60%),linear-gradient(180deg,#181a11,#101108);
  box-shadow:inset 0 1.5px 0 color-mix(in srgb,var(--ca) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.06),0 20px 44px -32px rgba(0,0,0,.92);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.cbx>*{position:relative;z-index:2}
.cbx::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--ca) 78%,transparent),color-mix(in srgb,var(--ca) 8%,transparent) 48%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .4s var(--ease)}
.cbx:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ca) 28%,var(--line));
  box-shadow:inset 0 1.5px 0 color-mix(in srgb,var(--ca) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.07),0 32px 64px -40px rgba(0,0,0,.95),0 0 60px -34px color-mix(in srgb,var(--ca) 50%,transparent)}
.cbx:hover::before{opacity:1}
/* reveal sheen */
.cbx::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--ca) 15%,transparent) 50%,transparent 58%);transform:translateX(-100%)}
/* reveal cascade: the sheen sweeps each tile in workflow order (staggered by --i),
   so the row visibly "flows" tile-into-tile as it scrolls in */
.cbx.show::after{animation:cbxScan 1s var(--ease) calc(.1s + var(--i,0)*.07s) 1}
@keyframes cbxScan{0%{opacity:0;transform:translateX(-100%)}22%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
.cbx.show{animation:cbxPop .6s var(--ease) calc(.1s + var(--i,0)*.07s) both}
@keyframes cbxPop{0%{border-color:rgba(244,243,238,.17)}30%{border-color:color-mix(in srgb,var(--ca) 60%,var(--line))}100%{border-color:rgba(244,243,238,.17)}}
/* the demo stage is hidden on the calm tab; it reveals (and animates) on open */
.cbx-stage{position:relative;flex:1;min-height:150px;padding:18px 16px;display:none;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid rgba(244,243,238,.055);
  background:radial-gradient(circle at 1px 1px,rgba(244,243,238,.05) 1px,transparent 1.7px) -1px -1px/15px 15px,radial-gradient(125% 95% at 50% -10%,color-mix(in srgb,var(--ca) 6%,transparent),transparent 60%)}
/* calm tile = a legible vertical capability card: a bold icon + a clear "watch" play
   chip up top, then a full-width title and a one-line plain-English descriptor below.
   (The old icon|text row was cramped — descriptors broke onto orphan lines and the 12
   tiles read as a muddy sea of look-alike buttons.) Column layout also matches the
   .open state, so a tile expands seamlessly into the spotlight demo. */
.cbx-cap{display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:20px 20px 22px;min-height:146px}
.cbx-tx{display:flex;flex-direction:column;gap:5px;width:100%;min-width:0}
.cbx-tx b{font-family:var(--sans);font-weight:600;font-size:16.5px;line-height:1.22;color:#fbfbf7;letter-spacing:-.01em}
.cbx-tx span{font-size:13px;line-height:1.45;color:#bcbcb2}
.cbx.rv{transform:translateY(16px)}

/* ---- click to open: tab expands full-width into a spotlight that plays the demo ---- */
.cbx.open{grid-column:1/-1;flex-direction:row;cursor:default;
  border-color:color-mix(in srgb,var(--ca) 34%,var(--line));
  box-shadow:inset 0 1.5px 0 color-mix(in srgb,var(--ca) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.07),0 36px 80px -44px rgba(0,0,0,.96),0 0 80px -40px color-mix(in srgb,var(--ca) 52%,transparent)}
.cbx.open:hover{transform:none}
.cbx.open .cbx-stage{display:flex;flex:1 1 56%;min-height:296px;border-bottom:none;border-right:1px solid rgba(244,243,238,.07);animation:cbxStageIn .5s var(--ease) both}
@keyframes cbxStageIn{from{opacity:0}to{opacity:1}}
.cbx.open .cbx-stage>div{transform:scale(1.5);transform-origin:center}
.cbx.open .cbx-tx{gap:5px}
.cbx.open .cbx-tx b{font-size:21px;letter-spacing:-.01em}
.cbx.open .cbx-tx span{font-size:14px;line-height:1.5}
.cbx.open .cbx-tx::after{content:"Live in real client builds — built start to finish.";font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:color-mix(in srgb,var(--ca) 60%,#8a8a82);margin-top:4px}
/* hold demo animations OFF until the tab opens — otherwise the one-shot animations
   would run (and finish) while the stage is display:none, so opening would show only
   the end state. Killing them while closed makes them start fresh on open. */
.cbx:not(.open) .cbx-stage *,.cbx:not(.open) .cbx-stage *::before,.cbx:not(.open) .cbx-stage *::after{animation:none!important}

/* ---- shared ---- */
@keyframes dCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes dTwCaret{0%,49%{border-color:var(--ca)}50%,100%{border-color:transparent}}
@keyframes dBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes dSpin{to{transform:rotate(360deg)}}

/* booking — cursor moves in, taps a slot, confirmation slides up (plays once, holds) */
.d-book{position:relative;width:100%;max-width:252px;display:flex;flex-direction:column;gap:9px}
@keyframes dPick{0%,17%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07);color:#b6b6ae}22%,90%{background:color-mix(in srgb,var(--ca) 26%,transparent);border-color:var(--ca);color:var(--paper);box-shadow:0 0 0 1px color-mix(in srgb,var(--ca) 28%,transparent)}97%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07);color:#b6b6ae;box-shadow:none}}
@keyframes dBookOk{0%,23%{opacity:0;transform:translateY(4px)}29%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(4px)}}
@keyframes dBookSms{0%,38%{opacity:0;transform:translateY(3px)}44%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
@keyframes dCur{0%{left:80%;top:88%;opacity:0;transform:scale(1)}6%{opacity:1}18%{left:52%;top:56%;transform:scale(1)}22%{transform:scale(.8)}26%{transform:scale(1)}36%{left:52%;top:56%;opacity:1}44%,100%{left:80%;top:88%;opacity:0}}

/* payment — Pay → spinner → Paid (plays once, holds Paid) */
.d-pay{width:100%;max-width:228px;display:flex;flex-direction:column;gap:9px}
@keyframes dPayCard{0%,6%{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.05)}9%,14%{border-color:color-mix(in srgb,var(--ca) 45%,transparent);background:color-mix(in srgb,var(--ca) 8%,transparent)}19%,100%{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.05)}}
@keyframes dPl1{0%,46%{opacity:1}52%,92%{opacity:0}98%,100%{opacity:1}}
@keyframes dPl2{0%,48%{opacity:0}54%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes dPayRoll{0%,46%{transform:translateY(0)}54%,92%{transform:translateY(-22px)}98%,100%{transform:translateY(0)}}
@keyframes dPb1{0%,15%{opacity:1}20%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes dPbMid{0%,16%{opacity:0}21%,29%{opacity:1}34%,100%{opacity:0}}
@keyframes dPb2{0%,32%{opacity:0}37%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dPayRcpt{0%,56%{opacity:0;transform:translateY(3px)}62%,91%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}

/* login — password types in, Sign in → Welcome back (plays once, holds) */
.d-login{width:100%;max-width:206px;display:flex;flex-direction:column;gap:8px}
@keyframes dPwType{0%,4%{width:0}17%,92%{width:60px}98%,100%{width:0}}
@keyframes dLb1{0%,25%{opacity:1}30%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes dLb2{0%,27%{opacity:0}32%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dLoginMem{0%,40%{opacity:0;transform:translateY(5px)}47%,91%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(5px)}}

/* video — second camera joins, live waveform (waveform/REC keep looping = live) */
.d-vid{width:100%;max-width:232px;display:flex;flex-direction:column;gap:7px}
@keyframes dGlare{0%,55%{transform:translateX(-130%)}80%,100%{transform:translateX(130%)}}
@keyframes dJoin{0%{opacity:0;transform:scale(.84)}60%,100%{opacity:1;transform:scale(1)}}
@keyframes dVidT{0%{content:"00:12"}25%{content:"00:13"}50%{content:"00:14"}75%{content:"00:15"}}
@keyframes dWave{0%,100%{height:22%}50%{height:92%}}

/* chat — incoming, AI types, replies, books (plays once, holds the booked chat) */
.d-chat{width:100%;max-width:250px;display:flex;flex-direction:column;gap:6px}
@keyframes dInMsg{0%,2%{opacity:0;transform:translateY(6px)}7%,92%{opacity:1;transform:translateY(0)}97%,100%{opacity:0;transform:translateY(6px)}}
@keyframes dOutMsg{0%,10%{opacity:0;transform:translateY(6px) scale(.96)}14%,91%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0;transform:translateY(6px) scale(.96)}}
@keyframes dDots{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes dOtDots{0%,13%{opacity:1;max-width:40px}17%,100%{opacity:0;max-width:0}}
@keyframes dOtTxt{0%,17%{opacity:0;font-size:0}21%,100%{opacity:1;font-size:11px}}
@keyframes dChipShow{0%,33%{opacity:0;transform:translateY(4px)}38%,90%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(4px)}}

/* search — query types in, answer resolves (plays once, holds; caret keeps blinking) */
.d-search{width:100%;max-width:226px;display:flex;flex-direction:column;gap:9px}
.sq{display:inline-block;white-space:nowrap;overflow:hidden;width:0;border-right:2px solid transparent}
.sq.q2{animation:dSq2 13s var(--ease) infinite}
@keyframes dSq1{0%,2%{width:0;border-color:var(--ca)}13%,42%{width:130px;border-color:var(--ca)}44%{width:130px;border-color:transparent}46%,100%{width:0;border-color:transparent}}
@keyframes dSq2{0%,48%{width:0;border-color:transparent}49%{width:0;border-color:var(--ca)}61%,93%{width:132px;border-color:var(--ca)}95%{width:132px;border-color:transparent}99%,100%{width:0;border-color:transparent}}
@keyframes dAns1{0%,17%{opacity:0;transform:translateY(3px)}22%,42%{opacity:1;transform:translateY(0)}46%,100%{opacity:0;transform:translateY(3px)}}
@keyframes dAns2{0%,66%{opacity:0;transform:translateY(3px)}71%,94%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(3px)}}
@keyframes dSr1{0%,24%{opacity:0;transform:translateY(3px)}29%,42%{opacity:1;transform:translateY(0)}46%,72%{opacity:0;transform:translateY(3px)}77%,94%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(3px)}}
@keyframes dSr2{0%,28%{opacity:0;transform:translateY(3px)}33%,42%{opacity:1;transform:translateY(0)}46%,76%{opacity:0;transform:translateY(3px)}81%,94%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(3px)}}

/* admin — tasks tick off in sequence (plays once, holds all checked) */
.d-admin{width:100%;max-width:230px;display:flex;flex-direction:column;gap:9px}
@keyframes dTw1{0%,2%{opacity:0}4%,12%{opacity:1}14%,100%{opacity:0}}
@keyframes dTd1{0%,13%{opacity:0}15%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dTw2{0%,16%{opacity:0}18%,26%{opacity:1}28%,100%{opacity:0}}
@keyframes dTd2{0%,27%{opacity:0}29%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dTw3{0%,30%{opacity:0}32%,40%{opacity:1}42%,100%{opacity:0}}
@keyframes dTd3{0%,41%{opacity:0}43%,91%{opacity:1}96%,100%{opacity:0}}.t1>span{animation:dTaskTxt1 7s var(--ease) infinite}.t2>span{animation:dTaskTxt2 7s var(--ease) infinite}
@keyframes dChkBox1{0%,8%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}14%,91%{background:color-mix(in srgb,var(--ca) 28%,transparent);border-color:var(--ca)}96%,100%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}}
@keyframes dChkMark1{0%,9%{opacity:0}15%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dTaskTxt1{0%,9%{color:#8a8a82}15%,91%{color:#cfcfc6}96%,100%{color:#8a8a82}}
@keyframes dChkBox2{0%,22%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}28%,91%{background:color-mix(in srgb,var(--ca) 28%,transparent);border-color:var(--ca)}96%,100%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}}
@keyframes dChkMark2{0%,23%{opacity:0}29%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dTaskTxt2{0%,23%{color:#8a8a82}29%,91%{color:#cfcfc6}96%,100%{color:#8a8a82}}
@keyframes dChkBox3{0%,36%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}42%,91%{background:color-mix(in srgb,var(--ca) 28%,transparent);border-color:var(--ca)}96%,100%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}}
@keyframes dChkMark3{0%,37%{opacity:0}43%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dTaskTxt3{0%,37%{color:#8a8a82}43%,91%{color:#cfcfc6}96%,100%{color:#8a8a82}}
@keyframes dAdmDone{0%,52%{opacity:0;transform:translateY(4px)}58%,90%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(4px)}}

/* writes — typewriter (types once, holds; caret keeps blinking) */
.d-write{width:100%;max-width:236px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@keyframes dTwA{0%,3%{width:0}25%,94%{width:27ch}99%,100%{width:0}}
@keyframes dTwAState{0%,30%{color:var(--paper);border-color:var(--ca);text-decoration-color:transparent}34%,94%{color:#6c6c64;border-color:transparent;text-decoration-color:#6c6c64}96%,100%{color:var(--paper);border-color:transparent;text-decoration-color:transparent}}
@keyframes dTwB{0%,38%{width:0}62%,94%{width:26ch}99%,100%{width:0}}
@keyframes dTwBCaret{0%,37%{border-color:transparent}38%,92%{border-color:var(--ca)}94%,100%{border-color:transparent}}
@keyframes dTwX{0%,28%{opacity:0;transform:translateX(-4px)}32%,94%{opacity:1;transform:translateX(0)}99%,100%{opacity:0}}
@keyframes dTwOk{0%,64%{opacity:0;transform:translateX(-4px)}68%,92%{opacity:1;transform:translateX(0)}97%,100%{opacity:0}}

/* google rank — result card, rank rolls up to #1 (rolls once, holds #1) */
.d-serp{width:100%;max-width:238px;display:flex;flex-direction:column;gap:7px}
@keyframes dSerpPulse{0%,40%{box-shadow:0 0 0 0 transparent}47%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ca) 18%,transparent)}54%,100%{box-shadow:0 0 0 0 transparent}}
@keyframes dRoll{0%,6%{transform:translateY(0)}12%,17%{transform:translateY(-14px)}22%,26%{transform:translateY(-28px)}31%,35%{transform:translateY(-42px)}41%,90%{transform:translateY(-56px)}98%,100%{transform:translateY(0)}}
@keyframes dSerpUp{0%,52%{opacity:0;transform:translateY(3px)}58%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}

/* reviews — stars fill, new review slides in (plays once, holds) */
.d-rev{width:100%;max-width:230px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
@keyframes dStarsFill{0%,5%{width:0}22%,92%{width:100%}98%,100%{width:0}}
@keyframes dRevRoll{0%,30%{transform:translateY(0)}34%,92%{transform:translateY(-11px)}98%,100%{transform:translateY(0)}}
@keyframes dRevTh{0%,46%{opacity:0;transform:translateX(-6px)}52%,90%{opacity:1;transform:translateX(0)}95%,100%{opacity:0}}
@keyframes dRevNew{0%,26%{opacity:0;transform:translateX(-6px)}31%,90%{opacity:1;transform:translateX(0)}95%,100%{opacity:0;transform:translateX(-6px)}}

/* analytics — bars draw, trend line draws over them (already one-shot) */
.d-chart{width:100%;max-width:236px;display:flex;flex-direction:column;gap:12px}
@keyframes dBar{to{transform:scaleY(1)}}
@keyframes dKpiGlow{0%,100%{text-shadow:0 0 20px color-mix(in srgb,var(--ca) 38%,transparent)}50%{text-shadow:0 0 30px color-mix(in srgb,var(--ca) 72%,transparent)}}
@keyframes dBarBreathe{0%,100%{box-shadow:0 0 14px -3px var(--ca)}50%{box-shadow:0 0 22px -2px var(--ca)}}
@keyframes dDraw{to{stroke-dashoffset:0}}

/* inline edit — value changes, saves (plays once, holds; caret keeps blinking) */
.d-edit{width:100%;max-width:220px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
@keyframes dEt1{0%,22%{opacity:1}27%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes dEt2{0%,23%{opacity:0}28%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dEbPress{0%,41%{transform:scale(1)}43%{transform:scale(.965)}46%,100%{transform:scale(1)}}
@keyframes dEb1{0%,44%{opacity:1}49%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes dEb2{0%,46%{opacity:0}51%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dEsFlash{0%,56%{border-color:rgba(255,255,255,.06)}60%,68%{border-color:color-mix(in srgb,var(--ca) 40%,transparent)}74%,100%{border-color:rgba(255,255,255,.06)}}
@keyframes dEsOld{0%,56%{opacity:1}60%,94%{opacity:0}99%,100%{opacity:1}}
@keyframes dEsNew{0%,58%{opacity:0}62%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes dEsLive{0%,62%{opacity:0}66%,90%{opacity:1}95%,100%{opacity:0}}
@keyframes dEditOk{0%,33%{opacity:0;transform:translateY(3px)}38%,90%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(3px)}}

@media(prefers-reduced-motion:reduce){
  .cbx.rv{transform:none}
  .cbx-stage *,.cbx-stage *::before,.cbx-stage *::after,.cbx::after{animation:none!important}.sq.q2{width:0;opacity:0;border-color:transparent}
}
@media(max-width:980px){.caps-bento{margin-top:30px}.caps-bento::before{display:none}
  .cbx.open{flex-direction:column}.cbx.open .cbx-stage{flex:none;border-right:none;border-bottom:1px solid rgba(244,243,238,.07);min-height:230px}.cbx.open .cbx-stage>div{transform:scale(1.3)}}
@media(max-width:560px){.cbx.open .cbx-stage{min-height:200px}.cbx.open .cbx-stage>div{transform:scale(1.15)}}

/* ===== SWITCHBOARD (desktop ≥981px) — slim index rows on the spine + ONE shared
   demo stage. The 12 hand-built .cbx-stage demos are untouched; they simply land
   inside the bay, ~2× bigger. Mobile/tablet keep the card accordion above. ===== */
.caps-stagebay,.caps-comet{display:none}
@media(min-width:981px){
  .caps-bento{display:grid;grid-template-columns:378px 1fr;column-gap:46px;align-items:start}

  /* rows — the switchboard index */
  .cbx{position:static;display:flex;overflow:visible;border:none;background:transparent;box-shadow:none;grid-column:auto}
  .cbx::before,.cbx::after{display:none}
  .cbx:hover{transform:none;box-shadow:none}
  .cbx.open{grid-column:auto;flex-direction:row;cursor:pointer}
  .cbx .cbx-tx,.cbx.open .cbx-tx{flex-direction:row;align-items:center;gap:0}
  .cbx .cbx-tx b,.cbx.open .cbx-tx b{font-size:14.5px;letter-spacing:0;color:#c6c6bc;white-space:nowrap;transition:color .25s var(--ease)}
  .cbx .cbx-tx span,.cbx.open .cbx-tx span{display:none}
  .cbx.open .cbx-tx::after{content:none}
  .cbx:hover .cbx-tx b{color:var(--paper)}
  .cbx.open .cbx-tx b{color:var(--paper)}

  /* comet — rides the spine to the active row */
  .caps-comet{display:block;position:absolute;left:13px;top:24px;width:7px;height:7px;margin-left:-3px;border-radius:50%;
    background:var(--lime);box-shadow:0 0 12px 2px rgba(198,242,78,.55);z-index:2;pointer-events:none;
    transition:top .55s cubic-bezier(.3,1.4,.4,1);opacity:0}
  .caps-bento:has(.cbx.open) .caps-comet{opacity:1}

  /* the stage bay */
  .caps-stagebay{display:flex;flex-direction:column;grid-column:2;grid-row:1/7;align-self:stretch;min-height:480px;
    border:1px solid rgba(244,243,238,.09);border-radius:18px;overflow:hidden;position:relative;
    background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
    box-shadow:0 44px 90px -44px rgba(0,0,0,.85)}
  @keyframes csbProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* test-bench backdrop: fine dot lattice + a centre glow so the canvas reads
     designed, not empty */
  .caps-stagebay::before{content:"";position:absolute;inset:92px 0 0 0;pointer-events:none;
    background:
      radial-gradient(52% 44% at 50% 46%, rgba(198,242,78,.055), transparent 72%),
      radial-gradient(rgba(244,243,238,.05) 1px, transparent 1.3px);
    background-size:auto,26px 26px;background-position:center,center}
  /* close control (bay chrome) + resting hint shown when the user has closed everything */
  .csb-close{margin-left:6px;flex:none;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
    padding:0;border:none;border-radius:6px;background:rgba(244,243,238,.06);color:#9a9a90;cursor:pointer;
    transition:background .2s var(--ease),color .2s var(--ease)}
  .csb-close:hover{background:rgba(244,243,238,.14);color:var(--paper)}
  .csb-close svg{width:12px;height:12px}
  .caps-bento.sw-idle .csb-close{display:none}
  /* nothing auto-opens any more, so the bay can genuinely be at rest — don't
     claim "RUNNING" over an empty stage */
  .caps-bento.sw-idle .csb-live{display:none}

  /* land the active demo inside the bay (positioned against .caps-bento) */
  .cbx.open .cbx-stage{display:flex;position:absolute;left:calc(378px + 46px + 1px);right:1px;top:92px;bottom:18%;height:auto;
    flex:none;min-height:0;border:none;background:transparent;align-items:center;justify-content:center;z-index:2;
    animation:swStageIn .45s var(--ease) both}
  @keyframes swStageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .cbx.open .cbx-stage>div{transform:scale(2.15);transform-origin:center}
}

/* ===== POCKET SWITCHBOARD v2 (phones ≤640px) — demo-at-your-thumb: slim grouped
   rows on the spine; tapping a row expands its demo INLINE, directly beneath the
   row (no shared top bay on phones — tapping deep and playing the demo far away
   was disorienting). Row expands to show its one-liner + a framed mini-stage.
   Tablet (641–980px) keeps the old card accordion. ===== */
@media(max-width:640px){
  .caps-bento{display:flex;flex-direction:column}
  .caps-stagebay,.caps-comet{display:none}

  /* spine along the rows */
  .caps-bento::before{display:block;left:13px;top:14px;bottom:24px}

  /* rows — slim switchboard index */
  .cbx,.cbx.open{position:relative;display:flex;flex-direction:column;overflow:visible;border:none;background:none;
    box-shadow:none;border-radius:10px;cursor:pointer}
  .cbx::before,.cbx::after{display:none}
  .cbx:hover{transform:none;box-shadow:none}
  .cbx .cbx-cap,.cbx.open .cbx-cap{flex:none;order:-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:11px;
    padding:8px 10px 8px 32px;min-height:0;border-radius:10px;position:relative;transition:background .25s var(--ease)}
  /* stage markup precedes the cap — order flips it so the demo expands BELOW the tapped row */
  .cbx-cap::after,.cbx.open .cbx-cap::after{display:none;content:none}
  .cbx-cap::before{content:"";position:absolute;left:10px;top:19px;width:5px;height:5px;border-radius:50%;
    background:rgba(244,243,238,.22);transform:none;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
  .cbx .cbx-ic,.cbx.open .cbx-ic{width:26px;height:26px;border-radius:7px;flex:none;background:rgba(255,255,255,.03);
    border-color:rgba(244,243,238,.1);opacity:.55;filter:saturate(.35);transition:opacity .25s var(--ease),filter .25s var(--ease)}
  .cbx .cbx-ic svg,.cbx.open .cbx-ic svg{width:13px;height:13px}
  .cbx .cbx-tx,.cbx.open .cbx-tx{flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
  .cbx .cbx-tx b,.cbx.open .cbx-tx b{font-size:13.5px;letter-spacing:0;color:#c6c6bc;white-space:nowrap;transition:color .25s var(--ease)}
  .cbx .cbx-tx span{display:none}
  .cbx.open .cbx-tx span{display:block;font-size:11.5px;line-height:1.45;color:#a9a99f;white-space:normal}
  .cbx.open .cbx-tx::after{content:none}
  .cbx.open .cbx-cap{background:rgba(198,242,78,.07)}
  .cbx.open .cbx-tx b{color:var(--paper)}
  .cbx.open .cbx-ic{color:var(--lime);background:rgba(198,242,78,.12);border-color:rgba(198,242,78,.35);opacity:1;filter:none}
  .cbx.open .cbx-cap::before{background:var(--lime);box-shadow:0 0 9px rgba(198,242,78,.95)}

  /* compact domain headers */
  .cb-domain{margin-top:14px}
  .cb-domain h3{font-size:15px}
  .cbd-node{width:28px;height:28px}
  .cbd-no{font-size:11px}
  .cb-group{display:block;margin:8px 0 10px;position:static}

  /* the inline mini-stage — expands right under the tapped row */
  .cbx.open .cbx-stage{display:flex;position:static;height:236px;margin:8px 0 10px 32px;flex:none;min-height:0;
    align-items:center;justify-content:center;overflow:hidden;z-index:1;
    border:1px solid rgba(244,243,238,.09);border-radius:14px;
    background:
      radial-gradient(60% 52% at 50% 46%, rgba(198,242,78,.05), transparent 72%),
      radial-gradient(rgba(244,243,238,.05) 1px, transparent 1.3px),
      linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
    background-size:auto,22px 22px,auto;background-position:center;
    box-shadow:0 24px 50px -28px rgba(0,0,0,.85);
    animation:swStageIn .4s var(--ease) both}
  .cbx.open .cbx-stage>div{transform:scale(1.12);transform-origin:center}
}
/* alert (DSE) */
.alert{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px;padding:18px 20px;border-radius:14px;
  background:linear-gradient(120deg,rgba(232,70,58,.14),rgba(232,70,58,.05));
  border:1px solid rgba(232,70,58,.42);
  box-shadow:0 0 44px -16px rgba(232,70,58,.6),inset 0 0 0 1px rgba(232,70,58,.08)}
@keyframes warn{0%,100%{box-shadow:0 0 22px -2px rgba(232,70,58,.85)}50%{box-shadow:0 0 34px 2px rgba(232,70,58,1)}}

/* hl band hint */
.case.hl{background:linear-gradient(180deg,transparent,rgba(232,70,58,.03),transparent)}

/* ---- closing CTA --------------------------------------------------------- */
.closing{position:relative;padding:var(--sec-gap) 0 110px;overflow:hidden;text-align:center}
.closing-glow{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:880px;height:560px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(198,242,78,.08) 0%,transparent 62%)}
.closing .container{position:relative;z-index:2}
.closing h2{font-family:var(--display);font-weight:600;font-size:clamp(46px,8vw,108px);line-height:.96;letter-spacing:-.035em;margin-bottom:26px}
.closing h2 .lime{color:var(--lime)}
.closing p{max-width:560px;margin:0 auto 42px;color:#bdbdb4;font-size:19px;line-height:1.6}
/* testimonials */
.quotes{padding:60px 0}
/* contact — refined glass panel + stat rail (concept C) */
.cxC-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;text-align:left;margin-top:20px}
.ca-pulse{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 11px 1px rgba(198,242,78,.85);animation:pulse 2s var(--ease) infinite;flex:none}
.closing .cxC-h{font-family:var(--display);font-weight:600;font-size:clamp(40px,5.2vw,76px);line-height:.95;letter-spacing:-.035em;margin:0 0 24px}
.cxC-h .lime{color:var(--lime)}
.closing .cxC-p{max-width:440px;color:#bdbdb4;font-size:17px;line-height:1.62;margin:0 0 28px}
.cxC-avail{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--muted)}
.cxC-avail b{color:var(--paper);font-weight:600}
.cxC-stat{display:flex;gap:40px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.cxC-stat > div{display:flex;flex-direction:column;gap:5px}
.cxC-stat b{font-family:var(--display);font-weight:600;font-size:clamp(26px,2.6vw,32px);color:var(--paper);letter-spacing:-.02em;line-height:1}
.cxC-stat span{font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
/* ===== THE AUDIT CONSOLE — the contact panel reframed as an instrument that
   shows the work: a console header, a live security-scan preview, a brief-signal
   meter, and a transmit→received sequence. Engineering on display. ===== */
.cxC-panel{position:relative;overflow:hidden;border-radius:22px;border:1px solid color-mix(in srgb,var(--lime) 26%,var(--line));
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  box-shadow:0 50px 130px -50px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.08)}
/* console header bar */
.auc-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.12));position:relative;z-index:3}
.auc-dots{display:inline-flex;gap:7px;flex:none}
.auc-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.08)}
.auc-dots i:first-child{background:color-mix(in srgb,var(--lime) 75%,transparent);border-color:transparent;box-shadow:0 0 8px -1px rgba(198,242,78,.7)}
.auc-path{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:#8a8a80;margin-right:auto}
.auc-conn{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.auc-conn .ca-pulse{width:7px;height:7px}
/* travelling scan line — ambient "scanning" pulse across the device */
.auc-scanline{position:absolute;left:0;right:0;top:0;height:140px;z-index:1;pointer-events:none;opacity:.5;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lime) 8%,transparent),transparent 70%);
  -webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent);
  animation:aucScanline 7s var(--ease) infinite}
@keyframes aucScanline{0%{transform:translateY(-140px)}60%,100%{transform:translateY(560px)}}
.auc-body{position:relative;z-index:2;padding:24px 28px 28px}
/* form header */
.cxC-phead{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.cxC-phead-eb{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.cxC-phead h3{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.02em;color:var(--paper);line-height:1.05;margin:0 0 8px}
.cxC-phead p{font-size:13.5px;color:#aeaea6;line-height:1.5;margin:0}
.cxC-form{display:flex;flex-direction:column;gap:16px}
.cxC-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.gfield{display:flex;flex-direction:column;gap:8px;min-width:0}
.gfield label{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#cfcfc6}
.gf-ix{font-size:10px;font-weight:600;color:color-mix(in srgb,var(--lime) 60%,#7c7c74);letter-spacing:.06em}
.gfield:focus-within label{color:var(--paper)}
.gfield:focus-within .gf-ix{color:var(--lime)}
.gfield label .opt{color:#7c7c74;text-transform:none;letter-spacing:0;font-weight:400}
.gfield input,.gfield textarea{width:100%;background:rgba(255,255,255,.045);border:1px solid color-mix(in srgb,var(--paper) 14%,var(--line));border-radius:12px;
  padding:15px 16px;color:var(--paper);font-family:var(--sans);font-size:15.5px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.gfield input::placeholder,.gfield textarea::placeholder{color:#86867d}
.gfield input:focus,.gfield textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(198,242,78,.16);background:rgba(255,255,255,.07)}
.gfield textarea{resize:vertical;min-height:104px;line-height:1.5}
.pv-submit{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--lime);color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:16px;padding:15px 28px;border-radius:13px;border:none;cursor:pointer;
  box-shadow:0 16px 40px -20px rgba(0,0,0,.75);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pv-submit:hover{transform:translateY(-2px);box-shadow:0 22px 50px -20px rgba(0,0,0,.8)}
.pv-submit i{font-style:normal;font-size:19px;transition:transform .35s var(--ease)}
.pv-submit:hover i{transform:translateX(5px)}
.cxC-submit{width:100%;margin-top:8px;padding:17px 28px;font-size:16.5px}
.closing .cf-fine{margin:6px auto 0;max-width:none;text-align:center;color:var(--muted);font-size:12px;line-height:1.5}
/* security-scan consent — the free-audit opt-in */
.cf-consent{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin-top:2px;
  font-size:13.5px;line-height:1.5;color:#bdbdb4;-webkit-tap-highlight-color:transparent}
.cf-consent input{position:absolute;opacity:0;width:0;height:0}
.cf-check{flex:none;width:20px;height:20px;border-radius:6px;margin-top:1px;position:relative;
  border:1px solid color-mix(in srgb,var(--lime) 38%,var(--line));background:rgba(0,0,0,.25);
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.cf-check::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease-2)}
.cf-consent input:checked + .cf-check{background:var(--lime);border-color:var(--lime)}
.cf-consent input:checked + .cf-check::after{transform:rotate(45deg) scale(1)}
.cf-consent input:focus-visible + .cf-check{box-shadow:0 0 0 3px rgba(198,242,78,.2)}
.cf-consent-txt b{color:var(--paper);font-weight:600}
/* the consent's own footnote — the authority rule, and why the box is off until
   a site is entered (.is-off is set by JS, so no-JS keeps the box usable).
   Scoped on .closing to clear `.closing p`, same as .cf-fine below. */
.closing .cf-scanote{margin:-7px 0 0;max-width:none;font-size:12.5px;line-height:1.5;color:var(--muted)}
.closing .cf-scanote a{color:#bdbdb4;text-decoration:underline;text-underline-offset:2px}
.closing .cf-scanote a:hover{color:var(--lime)}
.cf-scanote-need{display:none}
.auc-scanrow.is-off{opacity:.6;cursor:default}
.auc-scanrow.is-off + .cf-scanote .cf-scanote-need{display:inline;color:#cfcfc6}
/* scan consent reframed as a togglable module that arms the live preview */
.auc-scanrow{border:1px solid color-mix(in srgb,var(--lime) 16%,var(--line));border-radius:12px;
  padding:13px 15px;background:color-mix(in srgb,var(--lime) 4%,transparent);margin-top:2px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.auc-scanrow.is-on{border-color:color-mix(in srgb,var(--lime) 40%,var(--line));background:color-mix(in srgb,var(--lime) 8%,transparent)}
/* live security-scan preview terminal */
.auc-term{max-height:0;opacity:0;overflow:hidden;margin-top:-16px;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .5s var(--ease)}
.auc-term.is-on{max-height:320px;opacity:1;margin-top:0}
.auc-term-out{background:#06070a;border:1px solid color-mix(in srgb,var(--lime) 18%,var(--line));border-radius:12px;
  padding:14px 16px;font-family:var(--mono);font-size:12px;line-height:1.2;color:#b9c2ad;
  box-shadow:inset 0 0 40px -20px rgba(198,242,78,.4)}
.auc-tl{display:flex;align-items:center;gap:8px;padding:3px 0;opacity:0;transform:translateY(3px);
  animation:aucTl .34s var(--ease) forwards}
@keyframes aucTl{to{opacity:1;transform:none}}
.auc-tl .tp{color:color-mix(in srgb,var(--lime) 80%,#fff);flex:none}
.auc-tl-cmd{color:#dfe6d2;margin-bottom:4px}
.auc-tl-cmd b{color:var(--lime);font-weight:500}
.auc-tl .tk{color:#9aa091}
.auc-tl .td{flex:1;border-bottom:1px dotted rgba(255,255,255,.14);margin:0 2px;align-self:flex-end;margin-bottom:4px}
.auc-tl .tv{flex:none;font-size:11px;letter-spacing:.04em}
.auc-tl .tv-q{color:#e0c878}
.auc-tl-ok{color:color-mix(in srgb,var(--lime) 75%,#cfcfc6);margin-top:6px;font-size:11.5px}
/* foot: brief-signal meter + submit */
.auc-foot{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.auc-signal{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.auc-bars{display:inline-flex;gap:4px}
.auc-bars i{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.auc-bars i.on{background:var(--lime);box-shadow:0 0 9px -1px rgba(198,242,78,.8)}
.auc-signal-pct{margin-left:auto;color:var(--lime);font-weight:600}
.cxC-submit{width:100%;margin:0;padding:17px 28px;font-size:16.5px}
.auc-submit{position:relative;overflow:hidden}
.auc-submit.is-sending{pointer-events:none}
.auc-submit.is-sending .auc-sb-txt::after{content:"";display:inline-block;width:1ch;animation:aucDots 1.1s steps(4,end) infinite;text-align:left}
@keyframes aucDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.auc-submit.is-sending i{opacity:0}
/* received overlay */
.auc-done{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  padding:40px;background:linear-gradient(180deg,rgba(8,9,7,.94),rgba(8,9,7,.985));
  opacity:0;transition:opacity .5s var(--ease)}
.auc-done.show{opacity:1}
.auc-done[hidden]{display:none}
.auc-done-ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--lime);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--lime) 14%,transparent),0 18px 46px -14px rgba(198,242,78,.7);
  animation:aucPop .55s var(--ease-2) both}
.auc-done-ic svg{width:28px;height:28px}
@keyframes aucPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.auc-done b{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--paper)}
.auc-done span{color:#b6b6ad;font-size:15px;max-width:34ch}
.auc-done:focus{outline:none}
/* failed send — the alert region ships empty but rendered, so assistive tech has
   it registered before there is anything to announce; the negative margin at rest
   cancels the flex gap it would otherwise leave in the form */
.closing .cf-err{margin:0;max-width:none;font-size:14.5px;line-height:1.55;color:#e8a0a0;text-align:center}
.closing .cf-err:empty{margin-top:-16px}
.closing .cf-err:focus{outline:none}
.closing .cf-err.is-on{display:flex;flex-direction:column;align-items:center;gap:11px}
.cf-err-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cf-err-a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:11px;
  border:1px solid color-mix(in srgb,#e8a0a0 40%,var(--line));background:rgba(232,160,160,.08);
  color:#f0cfcf;font-family:var(--sans);font-weight:500;font-size:14px;text-decoration:none;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.cf-err-a:hover{background:rgba(232,160,160,.16);border-color:#e8a0a0}
@media(prefers-reduced-motion:reduce){.auc-scanline{display:none}.auc-tl{animation-duration:.01s}}
@media(max-width:900px){
  .auc-body{padding:22px 20px 24px}
  .cxC-grid{grid-template-columns:1fr;gap:38px;text-align:left}
  .closing{padding:52px 0 90px}
  .closing .cxC-h{font-size:clamp(40px,9vw,58px)}
  .cxC-row{grid-template-columns:1fr}
  .cxC-stat{gap:26px}}

/* ===== under the hood — code window + case tech stacks ==================== */
.engine{padding:var(--sec-gap) 0 36px}
/* languages/tools chips — shows breadth beyond the one TS example on screen */
.engine-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.engine-stack .lang{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;
  color:#cfcfc6;cursor:pointer;border:1px solid var(--line);border-radius:11px;padding:7px 13px 7px 8px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));-webkit-tap-highlight-color:transparent;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease)}
.engine-stack .lang:hover{border-color:color-mix(in srgb,var(--lime) 38%,var(--line));color:var(--paper);transform:translateY(-1px);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.engine-stack .lang.is-on{color:var(--paper);font-weight:600;border-color:color-mix(in srgb,var(--lime) 50%,var(--line));
  background:linear-gradient(160deg,rgba(198,242,78,.13),rgba(198,242,78,.02));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--lime) 28%,transparent) inset,0 10px 26px -16px rgba(198,242,78,.65)}
/* live typing caret */
.ccaret{display:inline-block;width:7px;height:1.04em;margin-left:1px;transform:translateY(2px);
  background:var(--lime);box-shadow:0 0 6px rgba(198,242,78,.7);vertical-align:baseline;
  animation:codeCaret 1.05s steps(1) infinite}
.ct-line{opacity:0;transform:translateY(3px);animation:ctIn .32s var(--ease) forwards}
@keyframes ctIn{to{opacity:1;transform:none}}

/* ===== process — scroll-driven build animation ========================== */
.build{padding:var(--sec-gap) 0 52px}
.bld{width:100%;height:auto;display:block;overflow:visible}
/* persistent browser window — morphs between steps */
.frame{transform-box:view-box;transform-origin:270px 206px;transition:transform .7s var(--ease-2)}
.bld.s3 .frame{transform:scale(.4)}
/* extras */
.ex{opacity:0;transition:opacity .5s var(--ease)}
/* draw + pop, revealed per active stage */
.bld [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease)}
.bld [data-pop]{opacity:0;transform:scale(.92);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
@keyframes flowpulse{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.18)}}
@keyframes magfloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-5px,-4px)}}
/* audit: scanning magnifier sweeps the markers, each verdict lights up in turn */
.mk{transform-box:fill-box;transform-origin:center}
@keyframes auditScan{
  0%,15%{transform:translate(0,0)}
  25%,40%{transform:translate(142px,10px)}
  50%,65%{transform:translate(20px,76px)}
  75%,90%{transform:translate(160px,76px)}
  100%{transform:translate(0,0)}
}
@keyframes mk1p{0%,15%{opacity:1;transform:scale(1.18)}22%,95%,100%{opacity:.2;transform:scale(.82)}}
@keyframes mk2p{0%,20%{opacity:.2;transform:scale(.82)}25%,40%{opacity:1;transform:scale(1.18)}47%,100%{opacity:.2;transform:scale(.82)}}
@keyframes mk3p{0%,45%{opacity:.2;transform:scale(.82)}50%,65%{opacity:1;transform:scale(1.18)}72%,100%{opacity:.2;transform:scale(.82)}}
@keyframes mk4p{0%,70%{opacity:.2;transform:scale(.82)}75%,90%{opacity:1;transform:scale(1.18)}97%,100%{opacity:.2;transform:scale(.82)}}
@keyframes wipe{
  0%,12%{transform:translateX(266px)}
  50%,62%{transform:translateX(6px)}
  100%{transform:translateX(266px)}
}
@keyframes ringflow{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes modglow{0%,72%,100%{opacity:0;transform:scale(.99)}14%{opacity:.7;transform:scale(1.03)}}
@keyframes ripple{0%{transform:scale(.7);opacity:.55}100%{transform:scale(2.5);opacity:0}}
@keyframes liveRing{0%{transform:scale(.5);opacity:.7}100%{transform:scale(3.4);opacity:0}}
/* The LIVE panel was the deadest thing on the page: measured against the other
   three stages it had ~13x less pixel change per second, because the bars grow
   once and stop and everything else is a 3px dot. It is also the stage you
   dwell on, being the payoff. Two additions, both tied to something real rather
   than decorative wobble — this page already ruled that blinking telemetry next
   to marketing copy is fake liveness.
   1. .live-trace: a lit segment runs the trend line, the way a feed plots.
   2. .bar-hit: when a booking actually lands (app.js startLiveTick) the last
      bar takes the hit and the endpoint flares. One event, visible reaction. */
.live-trace{stroke-dasharray:.16 .84;stroke-dashoffset:1;opacity:.95;
  filter:drop-shadow(0 0 5px rgba(198,242,78,.85));animation:liveTrace 3.4s linear infinite}
@keyframes liveTrace{to{stroke-dashoffset:0}}
.bars .bar.bar-hit{animation:barHit .75s var(--ease)}
@keyframes barHit{0%{filter:none}30%{filter:drop-shadow(0 0 7px rgba(198,242,78,.95)) brightness(1.35)}100%{filter:none}}
/* live dashboard: bars grow on arrival */
.bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.bld.s4 .bars .bar{animation:barGrow .5s var(--ease) forwards}
.bld.s4 .bars .bar:nth-child(1){animation-delay:.04s}
.bld.s4 .bars .bar:nth-child(2){animation-delay:.1s}
.bld.s4 .bars .bar:nth-child(3){animation-delay:.16s}
.bld.s4 .bars .bar:nth-child(4){animation-delay:.22s}
.bld.s4 .bars .bar:nth-child(5){animation-delay:.28s}
.bld.s4 .bars .bar:nth-child(6){animation-delay:.34s}
.bld.s4 .bars .bar:nth-child(7){animation-delay:.4s}
@keyframes barGrow{to{transform:scaleY(1)}}
.barlast{filter:drop-shadow(0 0 4px rgba(198,242,78,.65))}
/* steps */
.build-steps{display:flex;flex-direction:column}
.bstep{min-height:42vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0;opacity:.66;
  transition:opacity .5s var(--ease)}
.bstep:first-child{padding-top:0}
.bstep.active{opacity:1}
/* desktop: tighten the step rhythm — 42vh left long dead-scroll stretches where the
   sticky viz sat unchanged; 34vh keeps the midpoint-switch feel with less empty travel.
   Mobile forge keeps its own spacing. */
@media(min-width:901px){ .bstep{min-height:34vh} }
.bstep-n{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-family:var(--display);font-weight:600;
  font-size:18px;color:var(--lime);background:rgba(198,242,78,.07);border:1px solid color-mix(in srgb,var(--lime) 32%,var(--line));
  transition:background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
.bstep.active .bstep-n{background:var(--lime);color:var(--ink);box-shadow:0 0 26px -4px rgba(198,242,78,.85);transform:translateY(-1px)}
.bstep h3{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;line-height:1;margin-bottom:11px}
.bstep p{color:#bdbdb4;font-size:15px;line-height:1.6;max-width:460px;margin-bottom:15px}
@media(max-width:900px){
  /* PROCESS on mobile: the desktop sticky viz drifted out of sync on a phone, so
     each step becomes its own glass card that ASSEMBLES as you scroll — the
     number lights up, its mini-diagram draws itself in, and the rail fills with
     scroll progress. Same "built as you scroll" idea, made reliable for touch. */
  .build{padding:36px 0 34px}
  .build-steps{position:relative;--p:0}
  /* rail down the badge gutter (visible in the gaps) + lime fill driven by scroll;
     top/length are measured from the real badge centres in JS (--rail-top/--rail-len) */
  .build-steps::before,.build-steps::after{content:"";position:absolute;left:34px;top:var(--rail-top,40px);height:var(--rail-len,calc(100% - 80px));bottom:auto;width:2px;border-radius:2px;z-index:0}
  .build-steps::before{background:var(--line)}
  .build-steps::after{background:linear-gradient(180deg,var(--lime),color-mix(in srgb,var(--lime) 28%,transparent));
    transform-origin:top;transform:scaleY(var(--p));box-shadow:0 0 12px rgba(198,242,78,.45);transition:transform .22s linear}

  .bstep{position:relative;z-index:1;min-height:auto;justify-content:flex-start;
    margin:0 0 9px;padding:22px 20px 21px 64px;border-radius:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014));border:1px solid var(--line);opacity:1;
    box-shadow:0 10px 28px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04);
    transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
  .bstep:last-child{margin-bottom:0}
  .bstep:first-child{padding-top:22px} /* override desktop's first-child padding-top:0 */
  .bstep.active{border-color:color-mix(in srgb,var(--lime) 34%,var(--line));
    box-shadow:0 18px 40px -24px rgba(0,0,0,.9),inset 0 0 0 1px color-mix(in srgb,var(--lime) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.05)}
  .bstep-n{position:absolute;left:18px;top:21px;width:34px;height:34px;border-radius:11px;font-size:14.5px;flex:none;z-index:2;
    background:#0e0e13;color:var(--lime);box-shadow:none;transform:none;border:1px solid color-mix(in srgb,var(--lime) 32%,var(--line));
    transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
  .bstep.active .bstep-n{background:var(--lime);color:var(--ink);border-color:var(--lime)} /* halo owned by --boot below */
  .bstep .bstep-n.done{background:var(--lime);color:var(--ink);border-color:var(--lime)}
  .bstep h3{font-size:20px;line-height:1.12;margin:0 0 11px;padding:0 54px 0 0}
  .bstep p{display:block;font-size:14.5px;line-height:1.64;margin:0 0 17px;padding:0;max-width:none}

  /* scroll-linked reveal: --t (0..1, set per card every scroll frame) eases the card
     up and in continuously with the scroll — not a one-shot fade. No opacity/transform
     transition here so it tracks the finger; the .active border/glow keeps its ease. */
  .build-steps.anim .bstep{opacity:calc(.5 + .5*var(--t,1));
    transform:translateY(calc((1 - var(--t,1)) * 22px));
    transition:border-color .45s var(--ease),box-shadow .45s var(--ease);will-change:opacity,transform}

  /* ===== PINNED FORGE — sticky mini-device that morphs audit->rebuild->expansion->live,
     every frame scrubbed by global progress (mirrored into --te/--exp/--live by JS),
     synced to the same scroll position that drives the rail bar + comet. Pure SVG. ===== */
  .bstage{position:sticky;top:64px;z-index:5;height:clamp(182px,38vh,226px);
    margin:0 0 22px;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 44px -28px #000}
  .bstage svg{width:100%;height:100%;display:block;overflow:visible}
  /* only the 2 relevant scenes ever paint (visibility:hidden skips paint on the rest) */
  .bstage svg .m-scene{opacity:0;visibility:hidden}
  /* each stage shows ITS OWN scene; only the last 28% of a step crossfades to the next (--mo) */
  .bstage svg[data-stage="0"] .m-audit{visibility:visible;opacity:calc(1 - var(--mo,0))}
  .bstage svg[data-stage="0"] .m-rebuild{visibility:visible;opacity:var(--mo,0)}
  .bstage svg[data-stage="1"] .m-rebuild{visibility:visible;opacity:calc(1 - var(--mo,0))}
  .bstage svg[data-stage="1"] .m-expand{visibility:visible;opacity:var(--mo,0)}
  .bstage svg[data-stage="2"] .m-expand{visibility:visible;opacity:calc(1 - var(--mo,0))}
  .bstage svg[data-stage="2"] .m-live{visibility:visible;opacity:var(--mo,0)}
  .bstage svg[data-stage="3"] .m-live{visibility:visible;opacity:1}
  .m-mag{transform-box:fill-box;transform-origin:center;
    transform:translate(calc(var(--te,0)*46px),calc(var(--te,0)*-28px)) scale(calc(1 - .42*var(--te,0)));opacity:calc(1 - var(--te,0))}
  .m-score-tint{color:#C6F24E;color:color-mix(in srgb,#C6F24E calc(var(--te,0)*100%),#ff5a5a)}
  text.m-score-tint{fill:#ff5a5a;fill:color-mix(in srgb,#C6F24E calc(var(--te,0)*100%),#ff5a5a)}
  .m-module{transform-box:fill-box;transform-origin:center;opacity:var(--exp,0);
    transform:translate(calc(160px + var(--mx)*var(--exp,0)),calc(113px + var(--my)*var(--exp,0))) scale(calc(.4 + .6*var(--exp,0)))}
  .m-expand [data-draw]{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--exp,0))}
  .m-ring{transform-box:fill-box;transform-origin:center;transform:scale(var(--exp,0));opacity:calc(var(--exp,0)*.9)}
  .m-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(clamp(0,(var(--live,0) - .08*var(--bi,0))/.5,1))}
  .m-live [data-draw]{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--live,0))}
  .m-pulse{transform-box:fill-box;transform-origin:center;animation:mPulse 2.4s var(--ease) infinite}
  @keyframes mPulse{0%{transform:scale(.7);opacity:1}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
  /* audit: a scanning beam sweeps the page being analysed */
  .m-scan{transform-box:fill-box;transform-origin:left;animation:mScan 2.8s var(--ease) infinite}
  @keyframes mScan{0%,100%{transform:translateX(0);opacity:0}10%{opacity:.85}48%{transform:translateX(256px);opacity:.85}56%{transform:translateX(256px);opacity:0}}
  /* rebuild: a glowing slider edge rides the before->after wipe boundary (--wipeW from JS) */
  .m-wipe-edge{opacity:0;transform:translateX(calc(var(--wipeW,0)*1px))}
  .bstage svg[data-stage="1"] .m-wipe-edge{opacity:calc(var(--le,0)*(1 - var(--le,0))*4)}
  .m-wipe-edge circle{filter:drop-shadow(0 0 4px rgba(198,242,78,.65))}
  /* expansion: a rotating system ring, a hub pulse, and data packets flowing the spokes */
  .m-ring-rot{transform-box:fill-box;transform-origin:center;opacity:calc(var(--exp,0)*.55);animation:mSpin 16s linear infinite}
  @keyframes mSpin{to{transform:rotate(360deg)}}
  .m-hub-pulse{transform-box:fill-box;transform-origin:center;opacity:var(--exp,0);animation:mPulse 2.4s var(--ease) infinite}
  .m-pk{transform-box:fill-box;transform-origin:center;opacity:0}
  .m-pk1{animation:mPk1 2.4s linear infinite}
  .m-pk2{animation:mPk2 2.4s linear infinite .6s}
  .m-pk3{animation:mPk3 2.4s linear infinite 1.2s}
  .m-pk4{animation:mPk4 2.4s linear infinite 1.8s}
  @keyframes mPk1{0%{transform:translate(0,0);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(-74px,-43px);opacity:0}}
  @keyframes mPk2{0%{transform:translate(0,0);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(74px,-43px);opacity:0}}
  @keyframes mPk3{0%{transform:translate(0,0);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(-74px,45px);opacity:0}}
  @keyframes mPk4{0%{transform:translate(0,0);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(74px,45px);opacity:0}}
  /* ===== IDLE ALIVENESS — continuous micro-motion so the device reads as a live
     instrument even when not scrolling. 2.4s heartbeat; all on NEW/decorative nodes
     or non-scrubbed props so the scroll-scrubbed morph is never overridden. ===== */
  /* audit: the lens actively reads; the score keeps recomputing; the defect pulses */
  .m-mag-line{transform-box:fill-box;transform-origin:center;animation:mLensScan 2.4s var(--ease) infinite}
  @keyframes mLensScan{0%{transform:translateY(-27px);opacity:0}12%{opacity:.5}88%{opacity:.5}100%{transform:translateY(27px);opacity:0}}
  #mScore{transform-box:fill-box;transform-origin:center;animation:mScoreJit 2.4s steps(1,end) infinite}
  @keyframes mScoreJit{0%,28%,72%,100%{transform:translateY(0);opacity:1}8%{transform:translate(.4px,-.4px);opacity:.85}16%{transform:translate(-.4px,.4px);opacity:1}60%{transform:translate(.3px,.3px);opacity:.9}}
  .m-issue{animation:mIssue 2.4s var(--ease) infinite}
  @keyframes mIssue{0%,100%{opacity:1}50%{opacity:.45}}
  /* rebuild: editor caret, a live LED, data pulsing the chart trend, an occasional CTA sheen */
  .m-rb-caret{animation:mRbCaret 1.2s steps(1,end) infinite}
  @keyframes mRbCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
  .m-rb-live-ring{transform-box:fill-box;transform-origin:center;animation:mPulse 2.4s var(--ease) infinite}
  .m-rb-live-dot{animation:mRbLed 2.4s var(--ease) infinite}
  @keyframes mRbLed{0%,100%{opacity:.55}50%{opacity:1}}
  .m-rb-trend{stroke-dasharray:6 70;stroke-dashoffset:76;opacity:.9;animation:mRbTrend 2.4s linear infinite}
  @keyframes mRbTrend{from{stroke-dashoffset:76}to{stroke-dashoffset:0}}
  .m-rb-sheen{transform-box:fill-box;transform-origin:center;opacity:0;animation:mRbSheen 4.8s var(--ease) infinite}
  @keyframes mRbSheen{0%{transform:translateX(-22px) skewX(-18deg);opacity:0}10%{opacity:.5}38%{transform:translateX(94px) skewX(-18deg);opacity:0}100%{transform:translateX(94px) skewX(-18deg);opacity:0}}
  /* expansion: module status LEDs poll in sequence, a pip laps the ring, packets return */
  .m-led{animation:mLed 2.4s var(--ease) infinite}
  .m-led2{animation-delay:.6s}
  .m-led3{animation-delay:1.2s}
  .m-led4{animation-delay:1.8s}
  @keyframes mLed{0%,22%,100%{opacity:.22}8%{opacity:1}}
  .m-orbit{transform-box:fill-box;transform-origin:center;opacity:calc(var(--exp,0)*.85);animation:mSpin 4.8s linear infinite}
  .m-pkr1{animation:mPkr1 2.4s linear infinite .3s}
  .m-pkr2{animation:mPkr2 2.4s linear infinite .9s}
  .m-pkr3{animation:mPkr3 2.4s linear infinite 1.5s}
  .m-pkr4{animation:mPkr4 2.4s linear infinite 2.1s}
  @keyframes mPkr1{0%{transform:translate(-74px,-43px);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(0,0);opacity:0}}
  @keyframes mPkr2{0%{transform:translate(74px,-43px);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(0,0);opacity:0}}
  @keyframes mPkr3{0%{transform:translate(-74px,45px);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(0,0);opacity:0}}
  @keyframes mPkr4{0%{transform:translate(74px,45px);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(0,0);opacity:0}}
  /* live: a record light, a spark streaming the trend to the end-node, a breathing now-bar, a +1 tick */
  .m-live .m-rec-dot{transform-box:fill-box;transform-origin:center;animation:mRecBlink 2.4s var(--ease) infinite}
  @keyframes mRecBlink{0%,100%{opacity:.3}50%{opacity:1}}
  .m-live .m-live-spark{transform-box:fill-box;transform-origin:center;opacity:0;filter:drop-shadow(0 0 3px rgba(198,242,78,.8));animation:mLiveStream 2.4s linear infinite .34s}
  @keyframes mLiveStream{0%{transform:translate(0,0);opacity:0}8%{opacity:1}14%{transform:translate(38px,-6px)}29%{transform:translate(76px,-12px)}43%{transform:translate(114px,-20px)}57%{transform:translate(152px,-28px)}71%{transform:translate(190px,-36px)}86%{transform:translate(228px,-46px);opacity:1}93%{transform:translate(228px,-46px);opacity:0}100%{transform:translate(228px,-46px);opacity:0}}
  .m-live .m-bar[style*="--bi:6"]{animation:mNowBar 2.4s var(--ease) infinite}
  @keyframes mNowBar{0%,100%{opacity:1}50%{opacity:.7}}
  .m-live .m-tick{transform-box:fill-box;transform-origin:center;opacity:0;animation:mTick 4.8s var(--ease) infinite}
  @keyframes mTick{0%,82%{opacity:0;transform:translateY(0)}87%{opacity:1;transform:translateY(-1.5px)}95%{opacity:1}100%{opacity:0;transform:translateY(-3px)}}
  .build-steps.inview .m-module,.build-steps.inview .m-bar,.build-steps.inview .brail-comet,.build-steps.inview .m-live-spark{will-change:transform}
  /* PERF: while actively scrolling, pause the SVG's ~20 decorative idle animations
     (heartbeats, scans, spins, packet flows, stroke-draws) so the scroll-scrubbed
     morph keeps the full paint budget — the main cause of lag on fast flicks. They
     resume ~180ms after scroll settles; imperceptible mid-flick. The var-driven
     scrub is NOT an animation, so it keeps tracking scroll. */
  .build-steps.scrolling .bstage svg *{animation-play-state:paused}

  /* energized rail comet — rides the bar in lockstep with --p (the same scroll progress) */
  .brail-comet{position:absolute;left:34px;width:2px;height:0;z-index:1;pointer-events:none;
    top:var(--rail-top,40px);transform:translateY(calc(var(--p,0)*var(--rail-len,0px)))}
  .brail-comet::before{content:"";position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--lime);
    box-shadow:0 0 6px 1px rgba(198,242,78,.9),0 0 16px 4px rgba(198,242,78,.45),0 0 30px 8px rgba(198,242,78,.16)}

  /* each badge boots up as the comet passes its node (escaping halo; cards don't clip) */
  /* PERF: the boot halo was a box-shadow with a var-driven BLUR RADIUS, which
     re-rasterises every scroll frame. Move it to a pseudo-element with a STATIC
     blur and drive only opacity via --boot (compositor-friendly, no re-raster). */
  .build-steps.anim .bstep-n::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:0 0 22px -2px rgba(198,242,78,.72);opacity:var(--boot,0)}

  /* specular glass sheen sweeping the focused card (radius-clipped via background; no overflow:hidden) */
  .build-steps.anim .bstep::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:3;
    background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.09) 47%,rgba(198,242,78,.08) 53%,transparent 64%);
    background-size:260% 100%;background-repeat:no-repeat;
    background-position-x:calc((1 - (var(--sweep,1) + 1)/2)*100%);opacity:calc(var(--fcs,0)*.85)}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .build-steps::after{transition:none}
  .build-steps.anim .bstep{opacity:1;transform:none}
  .build-steps.anim .bstep::before{opacity:0}
  .m-pulse{animation:none}
  .m-scan,.m-ring-rot,.m-hub-pulse,.m-pk{animation:none;opacity:0}
  .brail-comet{display:none}
  /* freeze + hide the idle-aliveness decoration */
  .m-mag-line,.m-rb-live-ring,.m-rb-trend,.m-rb-sheen,.m-orbit,.m-live .m-live-spark{animation:none;opacity:0}
  /* park the informative bits in a steady, legible resting state */
  #mScore{animation:none;transform:none;opacity:1}
  .m-issue{animation:none;opacity:1}
  .m-rb-caret{animation:none;opacity:1}
  .m-rb-live-dot{animation:none;opacity:1}
  .m-led{animation:none;opacity:.9}
  .m-live .m-rec-dot{animation:none;opacity:1}
  .m-live .m-tick{animation:none;opacity:.6}
  .m-live .m-bar[style*="--bi:6"]{animation:none;opacity:1}
}
/* ====================================================================
   THE DATUM FOOTER — the page's topographic survey lands on one ruled
   datum line (EL 0.00 m); the brand becomes a benchmark, the wordmark a
   monument carved into the ground. Bookends the Audit Console up top.
   Reuses tokens + .ca-pulse + the .rv observer. No new JS.
   ==================================================================== */
.foot{position:relative;z-index:2;background:transparent;margin-top:clamp(80px,12vw,140px)}
.foot a{color:#9a9a90;transition:color .25s var(--ease)}

.foot-gaz{column-count:4;column-gap:clamp(22px,3vw,44px)}
.foot-state{break-inside:avoid;margin-bottom:28px}
.foot-code{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:color-mix(in srgb,var(--lime) 62%,var(--muted));
  margin-bottom:12px;display:flex;align-items:center;gap:8px}
.foot-code::before{content:"";width:14px;height:1px;background:var(--line);flex:none}
.foot-gaz ul,.foot-reg ul{list-style:none;margin:0;padding:0}
.foot-gaz a,.foot-reg a{display:block;position:relative;padding-left:15px;color:#9a9a90}
.foot-gaz a{font-size:12.5px;line-height:1.75}
.foot-gaz a::before,.foot-reg a::before{content:"";position:absolute;left:0;top:.92em;width:7px;height:1px;background:rgba(255,255,255,.2);transition:background .25s var(--ease)}
.foot-gaz a:hover,.foot-reg a:hover{color:var(--lime)}
.foot-gaz a:hover::before,.foot-reg a:hover::before{background:var(--lime)}
/* The wordmark's margin-top must be in em, not px. line-height:.92 makes the line
   box ~.18em SHORTER than the glyphs, so a px margin is silently eaten by the
   overshoot — clamp(8px,2vw,20px) rendered as a 4px optical gap under a 90px
   wordmark on desktop, and -3px (an overlap) on a phone. In em it scales with the
   glyph, so the air stays proportional at every size. */
.foot-word{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;text-decoration:none;
  font-size:clamp(30px,6.4vw,90px);line-height:.92;letter-spacing:0;
  color:color-mix(in srgb,var(--paper) 90%,transparent);
  margin-top:.62em;padding-bottom:clamp(12px,1.6vw,22px);
  opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-2),transform .9s var(--ease-2)}

/* ---- shared section heads ----------------------------------------------- */
.sec-h2{font-family:var(--display);font-weight:600;font-size:clamp(32px,4.6vw,58px);line-height:1.02;letter-spacing:-.03em;max-width:16ch;margin-bottom:20px}
.sec-h2 em{font-style:normal}

/* ---- services pillars --------------------------------------------------- */

/* ---- process timeline --------------------------------------------------- */
.process{padding:112px 0 24px}
.timeline{position:relative;margin-top:66px}
@keyframes tlrun{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

/* ---- pricing ------------------------------------------------------------ */
.pricing{padding:var(--sec-gap) 0 24px}
.care-cta{color:var(--lime);font-weight:600;white-space:nowrap;font-size:14.5px;cursor:pointer}

/* ---- about / ledger ----------------------------------------------------- */
.about{padding:var(--sec-gap) 0 16px}
.ledger{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.014)}

@media(max-width:900px){
  /* tighter vertical rhythm between sections on mobile */
  .engine{padding:34px 0 28px}
  .pricing{padding:44px 0 20px}
  /* pricing cards: tighter padding + bigger price on a phone, care strip stacks */
  .price-grid{gap:14px;margin:30px 0 16px}}

/* ---- reveals ------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(34px);filter:blur(8px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.show{opacity:1;transform:none;filter:none}

/* perf: freeze decorative infinite loops when their section is off-screen
   (app.js toggles .anim-idle) or during the scroll gesture (html.is-scrolling).
   ~30 loops (build viz, audit console, fleet dots, marquee) otherwise repaint
   every frame and jank mobile scrolling. Reveals use transitions, not
   animations, so they're unaffected. */
.anim-idle *{animation-play-state:paused!important}
/* the build viz alone runs ~25 loops; freeze it (and the marquee) during the
   scroll gesture so the compositor is free for the scroll itself */

@media(max-width:900px){
  .container{padding:0 24px}
  /* lighter reveal on phones — animating filter:blur is costly on mobile GPUs */
  .rv{filter:blur(3px);transition-duration:.65s,.65s,.65s}
  .rv.show{filter:none}}

/* ===== ADDITIONS: pulse / hero scrim / pricing CTAs / proof / reel ======== */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.78)}}

/* hero screen edge-integration — white UIs fade into the dark stage */
.hx-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:14px;
  background:radial-gradient(135% 118% at 50% 6%, transparent 56%, rgba(8,8,11,.42) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

/* pricing — per-tier CTA */
.price-cta{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-radius:11px;
  font-family:var(--sans);font-weight:600;font-size:14.5px;
  border:1px solid color-mix(in srgb,var(--lime) 36%,var(--line));color:var(--paper);background:rgba(255,255,255,.02);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.price-cta i{font-style:normal;color:var(--lime);transition:transform .3s var(--ease)}
.price-cta:hover{background:rgba(198,242,78,.08);border-color:color-mix(in srgb,var(--lime) 55%,var(--line));transform:translateY(-2px)}
.price-cta:hover i{transform:translateX(3px)}

/* signature reel — pinned scroll-scrub through live products */
.reel{position:relative;z-index:3}
/* ===== THE FLEET — merged work / production showcase ====================== */
.fleet{padding:var(--sec-gap) 0 58px;position:relative;z-index:3}
.fm-win{position:relative;border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--acc) 42%,var(--line));
  background:color-mix(in srgb,var(--acc) 7%,#0c0c11);
  box-shadow:0 54px 120px -40px rgba(0,0,0,.95),0 0 120px -26px var(--acc),inset 0 0 0 1px rgba(255,255,255,.05);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
@keyframes fmScan{0%{opacity:0;transform:translateY(-110%)}22%{opacity:.95}100%{opacity:0;transform:translateY(300%)}}
/* desktop monitor: 2x2 shot grid — mirrors the mobile card, main photo split into four */
.fm-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;
  background:color-mix(in srgb,var(--acc) 10%,rgba(255,255,255,.045))}
.fm-cell{position:relative;overflow:hidden;background:#0c0c12;min-height:0}
.fm-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.fm-cell-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 13px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#eaeae3;background:linear-gradient(0deg,rgba(6,6,9,.9),rgba(6,6,9,.5) 55%,transparent);
  opacity:0;transform:translateY(8px);transition:opacity .34s var(--ease),transform .34s var(--ease-2);pointer-events:none}
.fm-cell:hover .fm-cell-cap{opacity:1;transform:none}
.fm-cell-ph{display:grid;place-items:center;align-content:center;gap:12px;text-align:center;padding:12px;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--acc) 10%,transparent),transparent 68%),linear-gradient(155deg,#0e0e15,#0a0a10)}
.fm-cell-plus{width:40px;height:40px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--acc) 52%,var(--line));display:grid;place-items:center;
  color:var(--acc);font-size:21px;line-height:1}
.fm-cell-ph em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:color-mix(in srgb,var(--acc) 60%,#8f8f87);max-width:82%;line-height:1.4}
/* staggered tile reveal — board entrance + each product switch */
.fm-grid.lit .fm-cell{animation:fmCellIn .52s var(--ease-2) both}
.fm-grid.lit .fm-cell:nth-child(1){animation-delay:.03s}
.fm-grid.lit .fm-cell:nth-child(2){animation-delay:.10s}
.fm-grid.lit .fm-cell:nth-child(3){animation-delay:.17s}
.fm-grid.lit .fm-cell:nth-child(4){animation-delay:.24s}
@keyframes fmCellIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
/* board layout: two stacked desktop shots (left) + one tall phone with the real
   mobile view (right) — shows marketing + app + mobile in one frame */
.fm-grid.fm-board{grid-template-columns:1fr .9fr}
.fm-board .fm-cd:nth-child(1){grid-column:1;grid-row:1}
.fm-board .fm-cd:nth-child(2){grid-column:1;grid-row:2}
.fm-board .fm-cph{grid-column:2;grid-row:1 / 3;display:flex;align-items:center;justify-content:center;padding:10px;
  background:radial-gradient(120% 70% at 50% 0,color-mix(in srgb,var(--acc) 15%,transparent),transparent 62%),#0a0a10}
/* the device: Galaxy-class Android — titanium conic rail, side buttons, hairline
   bezel, centred punch-hole, One-UI status bar, gesture pill, glass glare */
.fm-phone{position:relative;height:97%;width:auto;aspect-ratio:17 / 37;border-radius:30px;padding:3px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 14%,rgba(0,0,0,.28) 92%),
    conic-gradient(from 210deg,#4a4f58,#23262c 12%,#565b64 26%,#16181d 42%,#3e434b 56%,#1a1c22 70%,#5a5f68 84%,#26292f 93%,#4a4f58);
  box-shadow:0 42px 70px -28px rgba(0,0,0,.95),0 4px 14px -4px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.55),0 0 44px -10px color-mix(in srgb,var(--acc) 55%,transparent);
  transition:transform .5s var(--ease)}
.fm-cph:hover .fm-phone{transform:translateY(-4px)}
.fm-phone::before,.fm-phone::after{content:'';position:absolute;right:-2px;width:2.5px;border-radius:2px;
  background:linear-gradient(90deg,#41454d,#15171c);box-shadow:1px 0 2px rgba(0,0,0,.55)}
.fm-phone::before{top:23%;height:11.5%}
.fm-phone::after{top:37.5%;height:6.5%}
.fm-phscr{position:relative;height:100%;border-radius:27px;overflow:hidden;background:#050505;
  border:3px solid #050505;display:flex;flex-direction:column}
.fm-phscr::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:24px;
  background:linear-gradient(118deg,rgba(255,255,255,.07),rgba(255,255,255,0) 16%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.fm-phsb{flex:0 0 3.8%;display:flex;align-items:center;justify-content:space-between;padding:0 9%;
  background:#050505;color:#e9e9ee}
.fm-phscr.lt .fm-phsb{background:#fff;color:#16181d}
.fm-phtime{font-size:8.5px;font-weight:600;letter-spacing:.02em;line-height:1}
.fm-phsb svg{height:8px;width:auto;display:block;opacity:.92}
.fm-phcam{position:absolute;top:1.2%;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 32%,#39434f 0 18%,#10141b 45%,#000 72%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.fm-phscr.lt .fm-phcam{box-shadow:0 0 0 1.5px rgba(0,0,0,.10)}
.fm-phnav{position:absolute;left:50%;bottom:1.3%;transform:translateX(-50%);width:32%;height:3px;border-radius:99px;z-index:3;
  background:rgba(255,255,255,.55)}
.fm-phscr.lt .fm-phnav{background:rgba(20,20,24,.55)}
.fm-phscr>img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top center;display:block}
.fm-grid.lit .fm-cph{animation:fmCellIn .52s var(--ease-2) both;animation-delay:.2s}

/* detail panel (themed to active product) */
.fd-top{display:flex;align-items:center;gap:16px;margin-bottom:13px;flex-wrap:wrap}
@keyframes fdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the fleet strip — all five, always live */
.fleet-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.fw{position:relative;cursor:pointer;text-align:left;font-family:inherit;display:flex;flex-direction:column;padding:0;
  border:1px solid var(--line);border-radius:13px;overflow:hidden;background:rgba(255,255,255,.018);opacity:.82;
  transition:opacity .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease-2),box-shadow .4s var(--ease)}
.fw:hover{opacity:.96;transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.fw:focus-visible{outline:none;opacity:1;border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 55%,transparent)}
.fw.active{opacity:1;border-color:color-mix(in srgb,var(--acc) 60%,var(--line));transform:translateY(-4px) scale(1.015);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 75%,#fff),0 0 0 5px color-mix(in srgb,var(--acc) 20%,transparent),0 28px 66px -30px var(--acc)}
.fw::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fw.active::before{transform:scaleX(1)}
.fw-shot{display:block;aspect-ratio:16/10;overflow:hidden;background:#0d0d12}
.fw-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--ease-2),filter .4s var(--ease)}
.fw:not(.active) .fw-shot img{filter:saturate(.8) brightness(.82)}
.fw:hover .fw-shot img{transform:scale(1.04)}
.fw-info{display:none}   /* desktop strip = compact thumbnails; rich info shows on the mobile carousel */
.fw-grid{display:none}

@media(max-width:980px){
  /* the strip becomes a swipeable carousel of luxe, accent-themed project cards */
  /* horizontal scroller: overflow-x:auto forces overflow-y to auto, which would clip
     each card's downward box-shadow at a hard line. Pad the strip so the ~70px glow
     fades out INSIDE the scroll box, then pull the following content back up with a
     negative margin so the carousel keeps its spacing. The card glow now dissolves
     smoothly and merges with the seam bleed instead of being cut off. */
  .fleet-strip{display:flex;grid-template-columns:none;gap:16px;margin-top:30px;padding:20px 2px 82px;margin-bottom:-56px;border-top:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain}
  .fw{flex:0 0 73%;max-width:380px;scroll-snap-align:center;scroll-snap-stop:always;opacity:1;border-radius:18px;overflow:hidden;
    border:1px solid color-mix(in srgb,var(--acc) 32%,rgba(244,243,238,.07));
    background:radial-gradient(135% 78% at 50% -8%, color-mix(in srgb,var(--acc) 26%,transparent), transparent 58%),
      linear-gradient(180deg, color-mix(in srgb,var(--acc) 12%,#101017), #0a0a10 64%)}
  .fw,.fw:hover,.fw.active{transform:none;
    box-shadow:0 30px 72px -32px color-mix(in srgb,var(--acc) 82%,transparent), 0 16px 40px -32px rgba(0,0,0,.92), 0 1px 0 rgba(255,255,255,.08) inset}
  .fw::before{height:2px;transform:scaleX(1);background:linear-gradient(90deg,var(--acc),transparent 72%)}
  /* the single screenshot is replaced by a compact 2x2 grid of feature shots */
  .fw-shot{display:none}
  .fw-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;
    aspect-ratio:16/9;background:color-mix(in srgb,var(--acc) 9%,rgba(255,255,255,.03))}
  .fw-cell{position:relative;overflow:hidden;background:#0c0c12;min-height:0}
  .fw-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  /* board variant: same layout as the desktop monitor — 2 stacked desktop shots
     (left) + the Galaxy device with the real mobile view (right) */
  .fw-grid.fw-board{grid-template-columns:1fr .92fr;aspect-ratio:16/10}
  .fw-board .fw-cell:nth-child(1){grid-column:1;grid-row:1}
  .fw-board .fw-cell:nth-child(2){grid-column:1;grid-row:2}
  .fw-cph{grid-column:2;grid-row:1 / 3;position:relative;min-height:0;
    background:radial-gradient(120% 70% at 50% 0,color-mix(in srgb,var(--acc) 15%,transparent),transparent 62%),#0a0a10}
  /* device chrome scaled to card size. Absolutely positioned so the tall mobile
     screenshot can't inflate the grid's min-content height once it lazy-loads —
     that stretched the whole card and caused reflow jank mid-scroll. */
  .fw-board .fm-phone{position:absolute;top:8px;bottom:8px;left:50%;transform:translateX(-50%);height:auto;
    border-radius:17px;padding:2px;
    box-shadow:0 20px 34px -16px rgba(0,0,0,.95),0 2px 8px -2px rgba(0,0,0,.7),
      0 0 0 1px rgba(0,0,0,.55),0 0 26px -8px color-mix(in srgb,var(--acc) 55%,transparent)}
  .fw-board .fm-phscr{border-radius:15px;border-width:2px}
  .fw-board .fm-phscr::after{border-radius:13px}
  .fw-board .fm-phtime,.fw-board .fm-phsb svg{display:none}   /* too small to read — bar + camera only */
  .fw-board .fm-phcam{width:4px;height:4px;top:1%}
  .fw-board .fm-phnav{height:2px;bottom:1.6%}
  .fw-board .fm-phone::before{right:-1.5px;width:2px}
  .fw-board .fm-phone::after{right:-1.5px;width:2px}
  .fw-ph{display:grid;place-items:center;background:linear-gradient(155deg,color-mix(in srgb,var(--acc) 8%,#0e0e15),#0a0a10)}
  .fw-ph span{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:0 6px;
    color:color-mix(in srgb,var(--acc) 48%,#74746c)}
  .fw-info{position:relative;display:flex;flex-direction:column;gap:6px;padding:13px 16px 15px;z-index:1}
  .fw-info>*{position:relative;z-index:1}
  .fw-num{position:absolute;top:7px;right:14px;z-index:0;font-family:var(--display);font-weight:600;font-size:40px;line-height:1;
    color:color-mix(in srgb,var(--acc) 30%,transparent);opacity:.45;letter-spacing:-.04em;pointer-events:none}
  .fw-meta{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--acc) 78%,#cfcfc6)}
  .fw-h{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1;color:var(--paper);margin:1px 0 0}
  .fw-is{font-size:12px;line-height:1.45;color:#a0a098;margin:0}
  .fw-res{font-size:12.5px;line-height:1.4;color:var(--paper);font-weight:500;margin:2px 0;padding-left:11px;
    border-left:2px solid var(--acc)}
  .fw-open{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:7px;font-family:var(--sans);font-weight:600;font-size:12px;
    color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,var(--line));
    padding:8px 14px;border-radius:999px}
  .fw-open i{font-style:normal;font-size:13px}}
@media(max-width:620px){
  .fleet{padding:40px 0 34px}
  .fw{flex:0 0 80%}}
@media(prefers-reduced-motion:reduce){
  .fm-screen img,.fm-screen.swap img,.fw,.fw-shot img,.fd-link,.fleet-foot,.fm-phone{transition:none}
  .fm-grid.lit .fm-cell,.fm-grid.lit .fm-cph{animation:none}
  .fw::before{transition:none}}

/* ===== THE FLEET — signature motion: fly-to-monitor + entrance ============ */
.fm-win{will-change:transform}

/* ===== Selected Work -> How it works accent bleed (mobile) =================
   A soft glow tinted by the centred carousel card (--fleet-acc, set in JS) sits at
   the bottom of Selected Work and the top of How it works, so the card's colour
   bleeds across the seam instead of being cut off. */
@property --fleet-acc{syntax:"<color>";inherits:true;initial-value:#8b7bff}
@media(max-width:900px){
  /* the carousel card's accent (--fleet-acc, set in JS) feeds DOWN across the
     Selected Work -> How it works seam as a single soft glow that dissolves
     gradually into the next section.
     PERF: the colour SNAPS per card (no CSS transition on --fleet-acc). A tween
     repainted this ~1MP gradient every frame for its whole duration, and swiping
     across cards stacked those tweens -> the scroll dropped to ~9fps. Snapping
     repaints it once per settled card instead. */
  .fleet{position:relative;overflow-x:clip;overflow-y:visible}
  .build{position:relative}
  .build>.container{position:relative;z-index:1}
  /* soft accent bleed at the seam — a multi-stop radial gives the diffuse look WITHOUT
     filter:blur(), which was re-rasterising a large surface every scroll frame (mobile jank).
     Kept modest in size so each per-card repaint stays cheap. */
  .fleet::after{content:"";position:absolute;left:50%;bottom:-430px;transform:translateX(-50%);
    width:min(860px,124vw);height:860px;pointer-events:none;z-index:0;
    background:radial-gradient(58% 50% at 50% 50%,
      color-mix(in srgb,var(--fleet-acc,#8b7bff) 20%,transparent),
      color-mix(in srgb,var(--fleet-acc,#8b7bff) 9%,transparent) 42%,
      transparent 78%);
    opacity:.85}
}

/* ===== SEO landing pages (city / guide / industry) ======================= */
.lp-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 24px;border-bottom:1px solid var(--line);background:rgba(10,10,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lp-nav .brand{display:inline-flex;align-items:baseline;font-size:21px;letter-spacing:0;color:var(--paper)}
.lp-nav-links{display:flex;align-items:center;gap:6px}
.lp-nav-links a{font-size:12px;color:var(--muted);padding:8px 13px;border-radius:8px;transition:color .3s var(--ease)}
.lp-nav-links a:hover{color:var(--paper)}
.lp-nav-cta{color:var(--ink)!important;background:var(--lime);font-weight:600;font-size:12px;padding:8px 13px!important;border-radius:9px}
.lp-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.lp-hero{padding:90px 0 60px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.lp-hero::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;right:-240px;top:-320px;background:radial-gradient(circle,rgba(198,242,78,.13),transparent 60%);pointer-events:none}
.lp-crumb{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:18px;position:relative}
.lp-crumb a{color:var(--muted)}.lp-crumb a:hover{color:var(--lime)}
.lp-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.03em;max-width:20ch;position:relative}
.lp-hero .lp-intro{max-width:66ch;color:#c2c2ba;font-size:17px;line-height:1.62;margin-top:20px;position:relative}
.lp-hero .lp-intro p{margin-bottom:14px}
.lp-tokens{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;position:relative}
.lp-tok{font-family:var(--mono);font-size:12px;color:#cfcfc6;border:1px solid var(--line);border-radius:20px;padding:7px 13px;display:inline-flex;gap:8px;align-items:center}
.lp-tok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;position:relative}
.lp-btn{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:var(--ink);font-weight:600;font-size:16px;padding:14px 24px;border-radius:11px;box-shadow:0 16px 42px -16px rgba(198,242,78,.5);transition:transform .3s var(--ease)}
.lp-btn:hover{transform:translateY(-2px)}
.lp-btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--line);box-shadow:none}
.lp-section{padding:64px 0;border-bottom:1px solid var(--line)}
.lp-section h2{font-family:var(--display);font-weight:600;font-size:clamp(25px,3.2vw,38px);line-height:1.06;letter-spacing:-.02em;margin-bottom:22px}
.lp-prose h3{font-family:var(--display);font-weight:600;font-size:19px;margin:20px 0 8px;color:var(--paper)}
.lp-prose p{color:#c2c2ba;font-size:16px;line-height:1.7;margin-bottom:16px;max-width:72ch}
.lp-prose ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:8px 0 18px}
.lp-prose li{position:relative;padding-left:24px;color:#d2d2ca;font-size:15.5px;line-height:1.5;max-width:70ch}
.lp-prose li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--lime);box-shadow:0 0 8px color-mix(in srgb,var(--lime) 55%,transparent)}
.lp-prose strong{color:var(--paper);font-weight:600}
.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-card{border:1px solid var(--line);border-radius:18px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.lp-card h3{font-family:var(--display);font-weight:600;font-size:19px;margin:0 0 8px}
.lp-card h3 a{color:var(--paper)}.lp-card h3 a:hover{color:var(--lime)}
.lp-card p{color:#bdbdb4;font-size:14.5px;line-height:1.55;margin:0}

/* ---- /demos/ : each demo beside a shot of itself mid-work -----------------
   A card that only describes working software argues against itself. Every
   screenshot here is the real page driven into a working state before capture
   — a priced estimate, a filled cart, a booking with unavailable times greyed
   out — not an empty form. Rows rather than a 3-up grid so the shot can be
   large enough to read at a glance. */
.demo-list{list-style:none;display:flex;flex-direction:column;gap:clamp(20px,2.6vw,30px);margin:0;padding:0}
.demo-row{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:clamp(18px,2.8vw,34px);
  align-items:center;border:1px solid var(--line);border-radius:18px;padding:clamp(14px,1.6vw,20px);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.demo-row:hover{border-color:color-mix(in srgb,var(--lime) 22%,var(--line));box-shadow:0 22px 54px -32px rgba(0,0,0,.85)}
.demo-shot{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:#0d0d12;line-height:0}
.demo-shot img{display:block;width:100%;height:auto}
.demo-body h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,23px);
  letter-spacing:-.01em;line-height:1.14;margin:0 0 9px}
.demo-body h3 a{color:var(--paper)}.demo-body h3 a:hover{color:var(--lime)}
.demo-body p{color:#bdbdb4;font-size:15px;line-height:1.6;margin:0 0 14px}
.demo-go{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--lime)}
.demo-go:hover{text-decoration:underline}
@media(max-width:760px){.demo-row{grid-template-columns:1fr;gap:15px}}

.lp-faq{display:flex;flex-direction:column;gap:12px;max-width:780px}
.lp-faq details{border:1px solid var(--line);border-radius:14px;padding:2px 20px;background:linear-gradient(180deg,rgba(15,15,19,.82),rgba(15,15,19,.72));transition:border-color .3s var(--ease)}
.lp-faq summary{cursor:pointer;padding:18px 0;font-family:var(--display);font-weight:500;font-size:17px;color:var(--paper);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";color:var(--lime);font-size:19px;line-height:1;flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.lp-faq details[open] summary::after{content:"–"}
.lp-faq details p{color:#c2c2ba;font-size:15px;line-height:1.62;padding:0 0 16px;margin:0;max-width:70ch}
.lp-related{display:flex;flex-wrap:wrap;gap:9px}
.lp-related a{font-family:var(--mono);font-size:12.5px;color:#cfcfc6;border:1px solid var(--line);border-radius:8px;padding:8px 13px;transition:border-color .3s var(--ease),color .3s var(--ease)}
.lp-related a:hover{border-color:color-mix(in srgb,var(--lime) 50%,var(--line));color:var(--paper)}
.lp-ctaband{text-align:center;padding:66px 24px}
.lp-ctaband h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,4vw,46px);letter-spacing:-.02em;margin-bottom:14px}
.lp-ctaband p{color:#bdbdb4;font-size:17px;margin-bottom:26px;max-width:52ch;margin-left:auto;margin-right:auto}
.lp-foot{border-top:1px solid var(--line);padding:40px 0}
.lp-foot .lp-wrap{display:flex;flex-direction:column;gap:16px}
.lp-foot-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13.5px}
.lp-foot-links a{color:#bdbdb4}.lp-foot-links a:hover{color:var(--lime)}
.lp-foot-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:13px}
.lp-foot-meta span:last-child{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
@media(max-width:760px){.lp-cards{grid-template-columns:1fr}.lp-nav-links a:not(.lp-nav-cta){display:none}.lp-hero{padding:56px 0 40px}}
/* ===== lp-* premium uplift — calm, homepage-grade polish for the templated pages ===== */
/* ambient depth + accent glow behind everything (pure CSS — no canvas/JS) */
body.lp{background-color:#07070a}
body.lp::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(95% 60% at 86% -6%, rgba(198,242,78,.05), transparent 52%),
  radial-gradient(70% 50% at 50% 112%, rgba(40,52,70,.14), transparent 60%),
  radial-gradient(135% 100% at 50% -8%, #0c0d12 0%, #08080c 48%, #050507 100%)}
body.lp .lp-nav, body.lp main, body.lp .lp-foot{position:relative;z-index:1}
/* second, cool counter-glow low-left of the hero */
.lp-hero::after{content:"";position:absolute;left:-260px;bottom:-340px;width:600px;height:600px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(40,52,70,.18),transparent 64%)}
/* card hover lift */
.lp-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--lime) 22%,var(--line));box-shadow:0 22px 54px -32px rgba(0,0,0,.85)}
/* faq open state */
.lp-faq details[open]{border-color:color-mix(in srgb,var(--lime) 26%,var(--line))}
.lp-faq details[open] summary::after{background:var(--lime);color:var(--ink);border-color:var(--lime)}
/* framed CTA band with a soft accent wash */
.lp-ctaband{border-top:1px solid var(--line);position:relative;overflow:hidden}
.lp-ctaband::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:720px;height:420px;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(198,242,78,.07),transparent 70%)}
.lp-ctaband>.lp-wrap{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.lp-card:hover{transform:none}}

/* homepage FAQ + footer cities */
.faq-sec{padding:var(--sec-gap-s) 0 76px;border-top:1px solid var(--line);position:relative;z-index:2}
.faq-sec .container{display:flex;flex-direction:column;align-items:center}
/* centred, prestige heading */
.faq-head{text-align:center;max-width:680px;margin:0 auto}
.faq-sec .sec-h2{max-width:none;margin:16px auto 0;text-align:center}
/* unified accordion panel with hairline-divided rows */
.faq-list{width:100%;max-width:880px;margin:46px auto 0;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(15,15,19,.9),rgba(15,15,19,.82));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);overflow:hidden}
.faq-list details{border-top:1px solid var(--line-2)}
.faq-list details:first-child{border-top:0}
.faq-q{cursor:pointer;list-style:none;display:flex;align-items:center;gap:22px;padding:25px 30px 25px 32px;
  position:relative;transition:background .35s var(--ease)}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{background:rgba(255,255,255,.022)}
/* lime spine that slides in on the open row — echoes the Selected-work result callout */
.faq-q::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime);
  transform:scaleY(0);transform-origin:center;box-shadow:0 0 12px rgba(198,242,78,.55);
  transition:transform .42s var(--ease-2)}
.faq-list details[open] .faq-q::before{transform:scaleY(1)}
.faq-q-t{flex:1;font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-.01em;
  color:var(--paper);transition:color .35s var(--ease)}
.faq-list details[open] .faq-q-t{color:#fff}
/* circular +/- toggle */
.faq-ic{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);position:relative;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .4s var(--ease-2)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;top:50%;left:50%;background:var(--lime);border-radius:2px;
  transition:transform .42s var(--ease-2),background .35s var(--ease)}
.faq-ic::before{width:12px;height:1.7px;transform:translate(-50%,-50%)}
.faq-ic::after{width:1.7px;height:12px;transform:translate(-50%,-50%)}
.faq-q:hover .faq-ic{border-color:color-mix(in srgb,var(--lime) 55%,var(--line))}
.faq-list details[open] .faq-ic{background:var(--lime);border-color:var(--lime);transform:rotate(180deg)}
.faq-list details[open] .faq-ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-list details[open] .faq-ic::before,.faq-list details[open] .faq-ic::after{background:var(--ink)}
/* answer */
.faq-a{margin:0;padding:0 60px 28px 32px;color:#c2c2ba;font-size:15.5px;line-height:1.66;max-width:78ch}
.faq-list details[open] .faq-a{animation:faqReveal .46s var(--ease-2)}
@keyframes faqReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* closing prompt to contact */
.faq-more{margin:34px auto 0;text-align:center;font-size:15.5px;color:#9d9d94}
.faq-more a{color:var(--lime);font-weight:500;white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--lime) 35%,transparent);transition:border-color .3s var(--ease)}
.faq-more a:hover{border-bottom-color:var(--lime)}
@media(max-width:760px){
  .faq-sec{padding:64px 0 52px}
  .faq-q{padding:20px 18px 20px 20px;gap:14px}
  .faq-q-t{font-size:16.5px}
  .faq-a{padding:0 20px 22px 20px;font-size:15px}
  .faq-list{margin-top:34px}
}
@media(prefers-reduced-motion:reduce){.faq-list details[open] .faq-a{animation:none}}
/* ---- DATUM footer — responsive + reduced-motion ----------------------- */
@media(max-width:1100px){.foot-gaz{column-count:3}}
@media(max-width:760px){
  .foot-gaz{column-count:2}
}
@media(max-width:620px){
  /* phones: collapse the 32-city grid (it added ~600px of scroll) — the
     "All locations ->" link to /web-design/ is the gateway, and the cities
     stay in the DOM (crawlable) + the sitemap + the hub. Desktop/tablet keep
     the full reference index. Then tighten the desktop-sized voids so the
     stacked footer reads dense and intentional, not sparse. */
  .foot-gaz{display:none}
}
/* Monument: drop the clip on small screens so the wordmark never reads as a broken cut */
@media(max-width:700px){
  /* the summit mark is hidden below 700px (see below), so the wordmark loses its
     step-down and lands straight under the 12px legal row — it needs MORE air
     here than on desktop, not less */
  .foot-word{font-size:clamp(52px,15vw,112px);margin-top:.78em}
  .foot-datum-line::before{display:none}
}
/* on phones the decorative summit mark (</> + pulse + line) collides with the
   quick-links row and reads as noise above the wordmark — drop it entirely */
@media(max-width:700px){.foot-summit{display:none}}
/* bigger tap targets on touch */
@media(pointer:coarse){.foot-gaz a,.foot-reg a{line-height:2.35}}
/* ...but compact the stacked sectors/guides on phones (must follow the coarse rule
   above to win the cascade, else the 2.35 line-height sprawls the footer) */
@media(max-width:620px){.foot-reg a{line-height:1.95}}
/* mobile footer index: drop the fake 01/02/03 sequence, surface a survey-style
   count, and turn the sector/guide lists into compact tappable chips */
@media(max-width:700px){
  .foot-kicker{display:flex;width:100%}
  .foot-n{display:none}
  .foot-ct{display:inline-block}
  .foot-sub{display:none}
  .foot-jargon{display:none}                 /* drop the surveyor jargon prefix — clutter on a phone */
  .foot-index{padding-top:32px}
  .foot-index-head{margin-bottom:14px;gap:12px}
  .foot-lead{font-size:15.5px}               /* the lone Coverage link was oversized */
  .foot-registers{gap:26px;margin-top:22px}
  .foot-monument{margin-top:34px}            /* tighten the run-up to the wordmark */
  .foot-datum-row{gap:6px}
  .foot-datum-l,.foot-datum-r{font-size:11.5px}
  .foot-reg ul,.foot-registers .foot-reg:first-of-type ul{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;grid-template-columns:none;column-gap:9px}
  .foot-reg a,.foot-registers .foot-reg:first-of-type a{display:inline-flex;align-items:center;padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);font-size:13px;line-height:1.1;color:#c9c9c0}
  .foot-reg a::before{display:none}
  .foot-reg a:hover{border-color:color-mix(in srgb,var(--lime) 45%,var(--line));background:rgba(198,242,78,.06);color:var(--lime)}
}

/* ===== HERO MONTAGE — clean, static, performant on mobile/touch ========== */
@media(pointer:coarse){ .spot{display:none} }
@media(max-width:860px){
  /* ============================================================
     MOBILE HERO — 3D COVERFLOW FLICK-DECK  (<=860px)
     The desktop scatter becomes a bespoke coverflow: browser-framed
     project shots in a 3D arc — the centre card flat + large + readable,
     neighbours angled back in perspective. app.js drives a float-based
     index with momentum flicks, infinite wrap, tap-to-focus and idle
     auto-advance; it writes each card's live transform/opacity inline.
     These rules just set the 3D stage. Desktop montage is untouched.
     ============================================================ */
  .hx-montage{position:relative!important;height:288px!important;min-height:0!important;
    perspective:none!important;transform:none!important;margin:18px 0 4px!important;padding:0!important;
    overflow:hidden;width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}

  /* every card: absolutely centred; JS writes the live 3D transform + opacity */
  .hx-screen{display:block!important;position:absolute!important;left:50%!important;top:50%!important;
    right:auto!important;bottom:auto!important;margin:0!important;opacity:1;
    width:min(266px,68vw)!important;border-radius:14px!important;animation:none!important;
    transition:none!important;backface-visibility:hidden;will-change:transform,opacity;
    --hx-mx:0px!important;--hx-my:0px!important;border-color:rgba(244,243,238,.12)!important;
    box-shadow:0 26px 54px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07)!important}
  /* centre card gets a lime ring + glow so it clearly reads as the front */
  .hx-screen.is-active{box-shadow:0 34px 70px -22px rgba(0,0,0,.95),0 0 0 1px rgba(198,242,78,.30),0 0 56px -16px rgba(198,242,78,.28)!important}
  /* The linked tiles are back in the phone deck. They were pulled because a tap
     CENTRES the tapped card, so a card that is also a link fired mid-swipe;
     app.js now only follows an href when the card is ALREADY centred, and never
     after a drag. Both doors are open on phones again. */

  /* uniform image area: crop each shot to its rich top, equal heights */
  .hx-screen img{width:100%!important;height:160px!important;object-fit:cover!important;object-position:top center!important}
  .hx-screen::after{border-radius:14px!important}

}

/* let Fleet grid/flex children shrink below content (fix <=345px overflow) */
.fleet-board>.fleet-monitor,.fleet-board>.fleet-detail,.fm-win,.fm-tabs,.fm-bar{min-width:0}

/* ===== mobile polish: fit code window, wrap fleet badge ==== */
@media(max-width:760px){
  .caps{padding:40px 0 18px;margin-top:6px}
  /* code window: fit on screen */
  .code-body{font-size:12px;line-height:1.7;padding:16px 16px 18px}
  /* fleet review bar: let it wrap instead of overflowing tiny screens */
  .fleet-foot{flex-wrap:wrap}
  .ff-txt{min-width:0}
}
@keyframes codeCaret{0%,50%{opacity:1}51%,100%{opacity:0}}

/* (capabilities cards + expand panel are now unified above for all viewports) */

/* ---- touch performance: trim per-frame compositing so scrolling stays smooth ----
   Phones recomposite fixed/animated/blurred layers every scroll frame. On touch
   devices we drop the blend-mode grain, freeze the aurora, and shrink the big
   blur radii — keeps the look while killing the hero -> next-section scroll lag. */
@media (pointer:coarse), (max-width:760px){
  .hx-glow-deep{opacity:.6}
  .hx-montage::before{filter:blur(42px)!important}
  /* hero key light: dim, static, no blend (the ISOFORGE canvas is the bg now) */
  .hx-shaft{display:none}
  .hx-key{animation:none;mix-blend-mode:normal;opacity:.32;transform:translate3d(0,-6%,0);will-change:auto;width:560px;height:560px;
    background:radial-gradient(circle, rgba(198,242,78,.1), transparent 64%)}
}

.foot-code{font-family:var(--mono);font-weight:600;font-size:clamp(16px,2vw,22px);color:var(--lime);letter-spacing:-.04em;line-height:1}

/* ===== <winship/> brand lockup — chiseled blades + Space Grotesk, em-scaled from font-size ===== */
.wl-w{font-family:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1;color:inherit;white-space:pre}
.wl-b{flex:none;display:inline-block}
.wl-lt{width:.406em;height:.656em;margin-right:.058em}
.wl-sl{width:.316em;height:.656em;margin-left:.088em}
.wl-gt{width:.406em;height:.656em;margin-left:.046em}
.wl-lt path,.wl-sl path,.wl-gt path{fill:var(--lime)}
.wl-lt,.wl-sl,.wl-gt{filter:drop-shadow(0 0 .05em rgba(198,242,78,.3))}
/* optical correction: at phone sizes the SMALL nav blades read under-weight next
   to the word, so they get ~13% more size on mobile. Scoped to .brand only —
   the big footer wordmark keeps the base em-proportions so it matches desktop. */
@media(max-width:860px){
  .brand .wl-lt{width:.46em;height:.743em;margin-right:.066em}
  .brand .wl-sl{width:.358em;height:.743em;margin-left:.1em}
  .brand .wl-gt{width:.46em;height:.743em;margin-left:.052em}
}
.wd-val{font-family:var(--display);font-weight:600;font-size:26px;line-height:.95;letter-spacing:-.025em;color:var(--paper);font-variant-numeric:tabular-nums}
@keyframes wdDraw{to{stroke-dashoffset:0}}
@keyframes wdFade{to{opacity:1}}
@keyframes wdBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wdPop{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}
@keyframes wdRing{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.9);opacity:0}100%{opacity:0}}

/* desktop bay: fill it, kill the 2.15x demo scale for this one demo */
@media(min-width:981px){
  .cbx.open .cbx-stage.wd-stage{bottom:6%}
  .cbx.open .cbx-stage.wd-stage>.wd{transform:none;max-width:none}
}
/* mobile/tablet card: reflow, natural height, no scale */
@media(max-width:980px){
  .cbx.open .cbx-stage.wd-stage{min-height:0;height:auto;overflow:visible}
  .cbx.open .cbx-stage.wd-stage>.wd{transform:none}
  .wd-kpis{grid-template-columns:1fr;gap:9px}
  .wd-tile{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
  .wd-tile>div{min-width:0}
  .wd-row{margin-top:0}.wd-sub{display:none}.wd-spark{position:static;width:60px}
  .wd-mid{grid-template-columns:1fr}
}
@keyframes wdDrawL{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
@keyframes wdDrawS{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes wdIn{from{opacity:0}to{opacity:1}}
.pg-pay{position:relative;height:48px;border-radius:12px;border:none;overflow:hidden;cursor:pointer;margin-top:2px;width:100%;background:linear-gradient(180deg,#d2f95a,var(--lime));box-shadow:0 10px 26px -10px rgba(198,242,78,.6);font:inherit}
.pg-pay>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14.5px}
.pg-go .pg-pay{animation:pgBtn .5s var(--ease) 3.5s forwards}
@keyframes pgRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pgShine{to{transform:translateX(320%)}}
@keyframes pgHide{to{opacity:0}}
@keyframes pgShow{from{opacity:0}to{opacity:1}}
@keyframes pgSpin{to{transform:rotate(360deg)}}
@keyframes pgDraw{to{stroke-dashoffset:0}}
@keyframes pgBtn{0%{transform:scale(1)}45%{transform:scale(1.025)}100%{transform:scale(1);background:linear-gradient(180deg,#e4ff7a,#c2ef46);box-shadow:0 0 36px -6px rgba(198,242,78,.9)}}
@keyframes pgSlide{to{opacity:1;transform:none}}
.pg-ptr{position:absolute;top:0;left:0;width:22px;height:22px;z-index:7;pointer-events:none;opacity:0;transform:translate(var(--px,120px),var(--py,180px));filter:drop-shadow(0 4px 7px rgba(0,0,0,.55))}
.pg-ptr svg{width:100%;height:100%;display:block}
.pg-go .pg-ptr{animation:pgCur 2s cubic-bezier(.5,0,.2,1) .6s both}
@keyframes pgCur{
  0%{opacity:0;transform:translate(calc(var(--px) - 34px),calc(var(--py) + 30px)) scale(1.14)}
  12%{opacity:1;transform:translate(calc(var(--px) - 20px),calc(var(--py) + 18px)) scale(1.06)}
  80%{opacity:1;transform:translate(var(--px),var(--py)) scale(1)}
  90%{transform:translate(var(--px),var(--py)) scale(.8)}
  96%{transform:translate(var(--px),var(--py)) scale(1)}
  100%{opacity:1;transform:translate(var(--px),var(--py)) scale(1)}
}
@keyframes pgClick{
  0%,85%{opacity:0;transform:scale(.3)}
  90%{opacity:.85;transform:scale(.4)}
  100%{opacity:0;transform:scale(2)}
}
@media(max-width:980px){
  .pg{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .pg-ptr{display:none}
}

/* ===== LG — upgraded "Logins & member areas" demo (caps switchboard) =====
   Namespaced .lg-* ; sign-in -> members-area unlock. Fills the desktop bay,
   reflows in the mobile card. Entrance gated on .lg-go (JS on open). Base =
   locked/idle; reduced-motion shows the unlocked state statically. ========= */
.lg{width:100%;display:grid;grid-template-columns:1fr 1.05fr;gap:14px;align-items:stretch;font-family:var(--sans);text-align:left;color:var(--paper)}
@keyframes lgRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lgType{from{width:0}to{width:auto}}
@keyframes lgHide{to{opacity:0}}
@keyframes lgShow{from{opacity:0}to{opacity:1}}
@keyframes lgSpin{to{transform:rotate(360deg)}}
@keyframes lgDraw{to{stroke-dashoffset:0}}
@keyframes lgBtn{0%{transform:scale(1)}45%{transform:scale(1.02)}100%{transform:scale(1);background:linear-gradient(180deg,#e4ff7a,#c2ef46);box-shadow:0 0 28px -10px rgba(198,242,78,.7)}}
@keyframes lgUnlockOv{to{opacity:0;visibility:hidden}}
@keyframes lgUnlock{to{filter:blur(0);opacity:1}}
@keyframes lgUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes lgBar{from{width:0}to{width:82%}}
@media(max-width:980px){
  .lg{grid-template-columns:1fr}
}

/* ===== AST — upgraded "An assistant that never sleeps" demo (caps switchboard)
   Live AI chat (Ava) + a "what it did" telemetry ledger. Namespaced .ast-* ;
   fills the desktop bay, reflows in the mobile card; gated on .ast-go. ======= */
.ast{width:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:stretch;font-family:var(--sans);text-align:left;color:var(--paper)}
@keyframes astMsgIn{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
@keyframes astTin{from{opacity:0}to{opacity:1}}
@keyframes astTout{to{opacity:0;max-height:0;margin-bottom:0}}
@keyframes astShow{from{opacity:0}to{opacity:1}}
@keyframes astHide{to{opacity:0}}
@keyframes astPop{0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes astConfirm{from{border-color:rgba(244,243,238,.08);background:rgba(255,255,255,.02);box-shadow:none}to{border-color:rgba(198,242,78,.24);background:linear-gradient(180deg,rgba(198,242,78,.08),rgba(198,242,78,.02));box-shadow:0 0 26px -14px rgba(198,242,78,.45)}}
@keyframes astBicOn{to{color:var(--lime);background:rgba(198,242,78,.12);border-color:rgba(198,242,78,.3)}}
@keyframes astStepIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@keyframes astBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes astSpin{to{transform:rotate(360deg)}}
@keyframes astBlink{0%,100%{opacity:1}50%{opacity:.32}}
@media(max-width:980px){
  .ast{grid-template-columns:1fr}
}

/* ===== BK — upgraded "Take bookings 24/7" demo (caps switchboard). One coherent
   day-model: customer picks the open slot, it lands 1:1 in the owner's synced day.
   Namespaced .bk-* ; fills the desktop bay, reflows in the mobile card. ======== */
.bk{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;font-family:var(--sans);text-align:left;color:var(--paper)}
.bk-pick{color:var(--lime);border-color:rgba(198,242,78,.55);background:rgba(198,242,78,.06)}
.bk-pick.sel{background:rgba(198,242,78,.14);box-shadow:inset 0 0 0 1px rgba(198,242,78,.55),0 0 16px -6px rgba(198,242,78,.5);font-weight:700}
.bk-btn{position:relative;height:42px;border-radius:11px;border:none;overflow:hidden;cursor:pointer;margin-top:13px;width:100%;background:linear-gradient(180deg,#d2f95a,var(--lime));box-shadow:0 6px 16px -12px rgba(198,242,78,.5);font:inherit}
.bk-btn>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:13.5px;color:#0a0f02}
.bk-btn>span b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700}
.bk-go .bk-pick{animation:bkPop .4s var(--ease) 1s both, bkSel .3s var(--ease) 2s forwards}
.bk-go .bk-btn{animation:bkRise .5s var(--ease) 2.4s both, bkBtn .4s var(--ease) 3.2s forwards}
@keyframes bkRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bkPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes bkSel{to{background:rgba(198,242,78,.14);box-shadow:inset 0 0 0 1px rgba(198,242,78,.55),0 0 16px -6px rgba(198,242,78,.5);font-weight:700}}
@keyframes bkHide{to{opacity:0}}
@keyframes bkShow{from{opacity:0}to{opacity:1}}
@keyframes bkDraw{to{stroke-dashoffset:0}}
@keyframes bkBtn{0%{transform:scale(1)}45%{transform:scale(1.015)}100%{transform:scale(1);background:linear-gradient(180deg,#e4ff7a,#c2ef46)}}
@keyframes bkUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bkSlot{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes bkBlink{0%,100%{opacity:1}50%{opacity:.32}}
.bk-cur{position:absolute;top:0;left:0;width:22px;height:22px;z-index:7;pointer-events:none;opacity:0;transform:translate(var(--cx1,60px),var(--cy1,120px));filter:drop-shadow(0 4px 7px rgba(0,0,0,.55))}
.bk-cur svg{width:100%;height:100%;display:block}
.bk-go .bk-cur{animation:bkCur 2.6s cubic-bezier(.5,0,.2,1) 1s both}
@keyframes bkCur{
  0%{opacity:0;transform:translate(calc(var(--cx1) - 30px),calc(var(--cy1) + 30px)) scale(1.14)}
  9%{opacity:1;transform:translate(calc(var(--cx1) - 18px),calc(var(--cy1) + 18px)) scale(1.06)}
  33%{opacity:1;transform:translate(var(--cx1),var(--cy1)) scale(1)}
  37%{transform:translate(var(--cx1),var(--cy1)) scale(.8)}
  42%{transform:translate(var(--cx1),var(--cy1)) scale(1)}
  76%{transform:translate(var(--cx2),var(--cy2)) scale(1)}
  84%{transform:translate(var(--cx2),var(--cy2)) scale(.8)}
  90%{transform:translate(var(--cx2),var(--cy2)) scale(1)}
  100%{opacity:1;transform:translate(var(--cx2),var(--cy2)) scale(1)}
}
@keyframes bkClick{
  0%,35%{opacity:0;transform:scale(.3)}
  37%{opacity:.85;transform:scale(.3)}
  45%{opacity:0;transform:scale(1.9)}
  46%,82%{opacity:0;transform:scale(.3)}
  84%{opacity:.85;transform:scale(.3)}
  92%{opacity:0;transform:scale(1.9)}
  100%{opacity:0}
}
@media(max-width:980px){
  .bk{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .bk-pick{background:rgba(198,242,78,.14);box-shadow:inset 0 0 0 1px rgba(198,242,78,.55);font-weight:700}
  .bk-cur{display:none}
}

/* ===== Ask-anything search demo (.ask) — cited AI answer over the business's own pages ===== */
.ask{width:100%;text-align:left;color:var(--paper);font-family:var(--sans)}
@keyframes askBlinkC{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes askPress{0%{transform:scale(1)}45%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes askRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes askReveal{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
@keyframes askCite{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes askShow{from{opacity:0}to{opacity:1}}
@keyframes askCard{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes askBlink{0%,100%{opacity:1}50%{opacity:.32}}

/* ===== Reviews on autopilot demo (.rw) — live feed + rollup, human-in-the-loop reply ===== */
.rw{width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:stretch;text-align:left;color:var(--paper);font-family:var(--sans)}
@keyframes rwRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rwDrop{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes rwPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes rwReveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rwShow{from{opacity:0}to{opacity:1}}
@keyframes rwBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rwPulse{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1);text-shadow:none}}
@keyframes rwPlus{0%{opacity:0;transform:translateY(8px) scale(.8)}25%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@keyframes rwBlink{0%,100%{opacity:1}50%{opacity:.38}}
@keyframes rwCaretBlink{0%,49%{border-color:rgba(244,243,238,.5)}50%,100%{border-color:transparent}}
.rw-tw{white-space:normal}
.rw-tw.rw-typing{border-right:1.5px solid rgba(244,243,238,.5);animation:rwCaretBlink .8s steps(1) infinite}
@media(max-width:980px){
  .rw{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .rw-tw.rw-typing{border-right:none;animation:none}
}

/* ===== Let AI run the admin demo (.oa) — inbox queue auto-handled, one held for you ===== */
.oa{width:100%;display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:stretch;text-align:left;color:var(--paper);font-family:var(--sans)}

/* timeline (gated on .oa-go) — base = final/idle; rows queue, then ONE spinner sweeps, enquiry last */
.oa-go .oa-row{opacity:0}
@keyframes oaRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes oaHide{to{opacity:0}}
@keyframes oaShow{from{opacity:0}to{opacity:1}}
@keyframes oaWork{0%{opacity:0}17%{opacity:1}83%{opacity:1}100%{opacity:0}}
@keyframes oaSpin{to{transform:rotate(360deg)}}
@keyframes oaBlink{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:980px){
  .oa{grid-template-columns:1fr}
}

/* ============================================================ *
 *  CAPS SWITCHBOARD — 4 upgraded demos: get-found (.gf), video (.vd),
 *  writes-in-your-voice (.wr), run-it-yourself (.ed). Ported from the
 *  reviewed preview mocks; base = settled/idle (no-JS + reduced-motion safe),
 *  entrance gated on .<k>-go. Bay (≥981) kills the 2.15x scale & fills;
 *  card (≤980) reflows to one column. Matches the wd/pg/bk/rw/oa pattern.
 * ============================================================ */

/* ============================================================ *
 *  .gf — "Get found on Google"  (PORT THIS BLOCK)
 * ============================================================ */
.gf{width:100%;display:grid;grid-template-columns:1.06fr .94fr;gap:14px;align-items:stretch;
    font-family:var(--sans);text-align:left;color:var(--paper)}

/* ---- entrance: base = settled (no-JS safe); JS adds .gf-go on every open ---- */
@media (prefers-reduced-motion:no-preference){
  .gf-go .gf-panel{animation:gfRise .7s cubic-bezier(.16,1,.3,1) both}
  .gf-go .gf-panel:nth-child(2){animation-delay:.09s}
  .gf-go .gf-win{animation:gfWin 1.1s cubic-bezier(.16,1,.3,1) .5s both}
  .gf-go .gf-top{animation:gfPop .5s cubic-bezier(.16,1,.3,1) 1.15s both}
  .gf-go .gf-acts-row .gf-abtn{opacity:0;animation:gfFade .5s ease forwards}
  .gf-go .gf-acts-row .gf-abtn:nth-child(1){animation-delay:1.25s}
  .gf-go .gf-acts-row .gf-abtn:nth-child(2){animation-delay:1.38s}
  .gf-go .gf-acts-row .gf-abtn:nth-child(3){animation-delay:1.51s}
  .gf-go .gf-mepin{animation:gfPin 2.4s ease .6s infinite}
  .gf-go .gf-sparkline{stroke-dasharray:230;stroke-dashoffset:230;animation:gfDraw 1.4s ease .7s forwards}
  .gf-go .gf-sparkarea{opacity:0;animation:gfFade .9s ease 1.5s forwards}
  .gf-go .gf-sparkdot{opacity:0;animation:gfPop .5s cubic-bezier(.16,1,.3,1) 2s forwards}
  .gf-go .gf-act{animation:gfRise .55s cubic-bezier(.16,1,.3,1) both}
  .gf-go .gf-act:nth-child(1){animation-delay:.9s}.gf-go .gf-act:nth-child(2){animation-delay:1s}
  .gf-go .gf-act:nth-child(3){animation-delay:1.1s}.gf-go .gf-act:nth-child(4){animation-delay:1.2s}
}
@keyframes gfRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes gfFade{to{opacity:1}}
@keyframes gfPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes gfWin{0%{background:transparent;border-color:transparent}
  35%{box-shadow:0 0 0 1px rgba(198,242,78,.35),0 0 20px rgba(198,242,78,.18)}
  100%{background:linear-gradient(180deg,rgba(198,242,78,.07),rgba(198,242,78,.02));border-color:rgba(198,242,78,.22);box-shadow:none}}
@keyframes gfDraw{to{stroke-dashoffset:0}}
@keyframes gfPin{0%,100%{filter:drop-shadow(0 2px 5px rgba(0,0,0,.6)) drop-shadow(0 0 7px rgba(198,242,78,.45))}
  50%{filter:drop-shadow(0 2px 5px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(198,242,78,.7))}}

/* --- gf: bay fill + card reflow (overrides the shared 2.15x scale / 236px stage) --- */
@media(min-width:981px){
  .cbx.open .cbx-stage.gf-stage{bottom:6%}
  .cbx.open .cbx-stage.gf-stage>.gf{transform:none;max-width:none}
}
@media(max-width:980px){
  .gf{grid-template-columns:1fr;gap:10px}
}

/* ============================================================ *
 *  .vd — "Teach or meet on video"  (PORT THIS BLOCK)
 * ============================================================ */
.vd{width:100%;display:grid;grid-template-columns:1.06fr .94fr;gap:14px;align-items:stretch;
    font-family:var(--sans);text-align:left;color:var(--paper)}

/* ---- entrance: base = settled; JS adds .vd-go on open ---- */
@media (prefers-reduced-motion:no-preference){
  .vd-go .vd-panel{animation:vdRise .7s cubic-bezier(.16,1,.3,1) both}
  .vd-go .vd-panel:nth-child(2){animation-delay:.09s}
  .vd-go .vd-fill{width:0;animation:vdSeek 2.4s cubic-bezier(.33,0,.2,1) .5s forwards}
  .vd-go .vd-knob{left:0;animation:vdSeekK 2.4s cubic-bezier(.33,0,.2,1) .5s forwards}
  .vd-go .vd-pfill{width:0;animation:vdSeek 2.4s cubic-bezier(.33,0,.2,1) .5s forwards}
  .vd-go .vd-play{animation:vdPulse 2.6s ease .3s infinite}
  .vd-go .vd-eq i{animation:vdEq .9s ease-in-out infinite}
  .vd-go .vd-eq i:nth-child(1){animation-delay:0s}.vd-go .vd-eq i:nth-child(2){animation-delay:.2s}
  .vd-go .vd-eq i:nth-child(3){animation-delay:.45s}.vd-go .vd-eq i:nth-child(4){animation-delay:.15s}
  .vd-go .vd-les.now{animation:vdPop .6s var(--ease,cubic-bezier(.16,1,.3,1)) .6s both}
  .vd-go .vd-live{opacity:0;animation:vdRise .6s cubic-bezier(.16,1,.3,1) 1.1s forwards}
}
@keyframes vdRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes vdPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes vdSeek{to{width:40%}}
@keyframes vdSeekK{to{left:40%}}
@keyframes vdPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.05)}}
@keyframes vdEq{0%,100%{height:30%}50%{height:95%}}

/* --- vd: bay fill + card reflow (overrides the shared 2.15x scale / 236px stage) --- */
@media(min-width:981px){
  .cbx.open .cbx-stage.vd-stage{bottom:6%}
  .cbx.open .cbx-stage.vd-stage>.vd{transform:none;max-width:none}
}
@media(max-width:980px){
  .vd{grid-template-columns:1fr;gap:10px}
}

/* ============================================================ *
 *  .wr — "Writes in your voice"  (PORT THIS BLOCK)
 * ============================================================ */
.wr{width:100%;display:grid;grid-template-columns:1.04fr .96fr;gap:14px;align-items:stretch;
    font-family:var(--sans);text-align:left;color:var(--paper)}
.wr-dtext{font-size:12.5px;line-height:1.6;color:#ecebe5;min-height:92px}

/* ---- entrance: base = settled; JS adds .wr-go on open ---- */
@media (prefers-reduced-motion:no-preference){
  .wr-go .wr-panel{animation:wrRise .7s cubic-bezier(.16,1,.3,1) both}
  .wr-go .wr-panel:nth-child(2){animation-delay:.09s}
  .wr-go .wr-match{opacity:0;animation:wrRise .5s ease 2.7s forwards}
  .wr-go .wr-ch{opacity:0;animation:wrRise .55s cubic-bezier(.16,1,.3,1) both}
  .wr-go .wr-ch:nth-child(1){animation-delay:1.2s}
  .wr-go .wr-ch:nth-child(2){animation-delay:1.45s}
  .wr-go .wr-ch:nth-child(3){animation-delay:1.7s}
  .wr-go .wr-voice{opacity:0;animation:wrRise .6s ease 2.1s forwards}
}
@keyframes wrRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes wrBlink{50%{opacity:0}}

/* --- wr: bay fill + card reflow (overrides the shared 2.15x scale / 236px stage) --- */
@media(min-width:981px){
  .cbx.open .cbx-stage.wr-stage{bottom:6%}
  .cbx.open .cbx-stage.wr-stage>.wr{transform:none;max-width:none}
}
@media(max-width:980px){
  .wr{grid-template-columns:1fr;gap:10px}
}

/* ============================================================ *
 *  .ed — "Run it yourself"  (PORT THIS BLOCK)
 *  base = idle (edited, ready to publish); .ed-go plays edit->publish
 * ============================================================ */
.ed{width:100%;display:grid;grid-template-columns:1.08fr .92fr;gap:14px;align-items:stretch;
    font-family:var(--sans);text-align:left;color:var(--paper)}

/* --- LEFT: the live site, edited inline --- */
.ed-chrome{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid rgba(244,243,238,.06);
    background:rgba(255,255,255,.015)}
.ed-page{position:relative;flex:1;padding:15px 16px;display:flex;flex-direction:column}
.ed-editbox{position:relative;display:inline-flex;align-items:center;padding:3px 8px;border-radius:7px;
    background:rgba(255,255,255,.06);border:1.5px solid rgba(244,243,238,.28);box-shadow:0 0 0 3px rgba(244,243,238,.05)}
.ed-editbox .val{position:relative;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:11px;color:#e2e1db;white-space:nowrap}
.ed-editbox .val .swap{position:relative;display:inline-block}
.ed-editbox .val .old{color:#e2e1db;position:absolute;left:0;top:0;opacity:0}
.ed-editbox .val .new{color:var(--lime);font-weight:600}
.ed-cur{position:absolute;left:0;top:0;z-index:7;pointer-events:none;opacity:0;
    transform:translate(var(--cx0,26px),var(--cy0,150px))}
.ed-cur svg{width:20px;height:20px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}

/* ---- entrance: base = idle (ready to publish); JS adds .ed-go on open ---- */
@media (prefers-reduced-motion:no-preference){
  .ed-go .ed-panel{animation:edRise .7s cubic-bezier(.16,1,.3,1) both}
  .ed-go .ed-panel:nth-child(2){animation-delay:.09s}
  .ed-go .ed-cur{animation:edCur 2s cubic-bezier(.5,0,.2,1) .5s both}
  .ed-go .ed-click{animation:edClick 2s linear .5s both}
  .ed-go .ed-tbar{animation:edTbar 1.5s ease 1.35s both}
  .ed-go .ed-editbox{animation:edEditPulse 1.2s ease 1.5s both}
  .ed-go .ed-editbox .old{animation:edOldSwap 2.4s ease 0s both}
  .ed-go .ed-chg.fresh{opacity:0;animation:edSlide .55s cubic-bezier(.16,1,.3,1) 2.3s forwards}
  .ed-go .ed-chg.fresh .cdot{opacity:0;animation:edShow .4s ease 4.3s forwards}
  .ed-go .ed-pl{animation:edHide .3s ease 3.2s forwards}
  .ed-go .ed-ps{animation:edShow .3s ease 3.25s forwards, edHide .3s ease 4.2s forwards}
  .ed-go .ed-pd{animation:edShow .4s var(--ease,cubic-bezier(.16,1,.3,1)) 4.25s forwards}
  .ed-go .ed-pub{animation:edBtnDone .5s var(--ease,cubic-bezier(.16,1,.3,1)) 4.2s forwards}
  .ed-go .ed-liveline{animation:edFade .5s ease 4.5s forwards}
  .ed-go .ed-hrow.cur{animation:edSlide .5s cubic-bezier(.16,1,.3,1) 4.6s both}
}
@keyframes edRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes edSlide{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes edFade{to{opacity:1}}
@keyframes edHide{to{opacity:0}}
@keyframes edShow{from{opacity:0}to{opacity:1}}
@keyframes edOldSwap{0%{opacity:1}72%{opacity:1}100%{opacity:0}}
@keyframes edTbar{0%{opacity:0;transform:translate(-50%,-100%) translateY(4px)}18%{opacity:1;transform:translate(-50%,-100%)}80%{opacity:1;transform:translate(-50%,-100%)}100%{opacity:0;transform:translate(-50%,-100%) translateY(-2px)}}
@keyframes edEditPulse{0%{box-shadow:0 0 0 3px rgba(244,243,238,0)}40%{box-shadow:0 0 0 4px rgba(244,243,238,.09)}100%{box-shadow:0 0 0 3px rgba(244,243,238,.05)}}
@keyframes edBtnDone{to{background:rgba(198,242,78,.13);color:var(--lime);box-shadow:inset 0 0 0 1px rgba(198,242,78,.4)}}
@keyframes edCur{0%{opacity:0;transform:translate(var(--cx0,26px),var(--cy0,150px))}
  15%{opacity:1}55%{opacity:1;transform:translate(var(--cx1,120px),var(--cy1,120px))}
  78%{opacity:1;transform:translate(var(--cx1,120px),var(--cy1,120px))}
  100%{opacity:0;transform:translate(calc(var(--cx1,120px) + 8px),calc(var(--cy1,120px) + 8px))}}
@keyframes edClick{0%,48%{opacity:0;transform:translate(var(--cx0,26px),var(--cy0,150px)) scale(.4)}
  55%{opacity:1;transform:translate(var(--cx1,120px),var(--cy1,120px)) scale(.5)}
  70%{opacity:.6;transform:translate(var(--cx1,120px),var(--cy1,120px)) scale(1.4)}
  85%,100%{opacity:0;transform:translate(var(--cx1,120px),var(--cy1,120px)) scale(1.6)}}
@keyframes edSpin{to{transform:rotate(360deg)}}

/* --- ed: bay fill + card reflow (overrides the shared 2.15x scale / 236px stage) --- */
@media(min-width:981px){
  .cbx.open .cbx-stage.ed-stage{bottom:6%}
  .cbx.open .cbx-stage.ed-stage>.ed{transform:none;max-width:none}
}
@media(max-width:980px){
  .ed{grid-template-columns:1fr;gap:10px}
}

/* ---- hero: the one linked tile -------------------------------------------
   Eight montage tiles are static example-software screens; this one opens a
   real Winship studio build. It must lay out exactly like its neighbours, so
   the shot stays IN FLOW and the tile takes its height from the image.
   (Previously .hx-shot was position:absolute;inset:0 — written when every tile
   was a link and the frames carried their own height. Once the other eight
   went back to plain <img>, .hx-screen was left with no in-flow content and
   this tile collapsed to a 278x6px sliver with the shot painted inside it.)
   The URL and the ↗ in the chrome bar are the only cues that this one opens. */
.hx-shot{display:block;text-decoration:none;color:inherit;border-radius:inherit;overflow:hidden}

/* ==== /industries/<slug>/ ==================================================
   Was five stacked prose blocks in one column: a hero, a 7-item bullet wall,
   two paragraphs, one more paragraph, four collapsed FAQs. No images on a site
   whose whole argument is that you can press things, no prices, and swapping
   the nouns gave you any agency page. Rebuilt around what the studio actually
   has: software you can open, products at public URLs, and three real prices.
   One template, four industries, no new prose to write. */

/* mono section plates — sameness lives at caption scale so the display-size
   moments (the h2s, the prices) can each be their own thing */
.ind-plate{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.ind-plate::before{content:"";width:26px;height:1px;background:var(--lime);opacity:.7;flex:none}
.ind-lede{color:#bdbdb4;font-size:15.5px;line-height:1.65;max-width:64ch;margin:0 0 26px}

/* fault register: the same <li>s, numbered and ruled instead of bulleted */
.fault-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2);max-width:78ch}
.fault{display:grid;grid-template-columns:44px 1fr;gap:0 14px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line-2)}
.fault-n{font-family:var(--mono);font-size:12px;color:var(--lime);opacity:.8;letter-spacing:.04em}
.fault-t{color:#d2d2ca;font-size:15.5px;line-height:1.55}
.fault-t strong{color:var(--paper);font-weight:600}

/* evidence rows: the demo/production screenshot beside what it proves */
.ev-list{list-style:none;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px);margin:0;padding:0}
.ev-row{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:clamp(16px,2.6vw,30px);
  align-items:center;border:1px solid var(--line);border-radius:18px;padding:clamp(13px,1.5vw,18px);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.ev-row:hover{border-color:color-mix(in srgb,var(--lime) 22%,var(--line));box-shadow:0 22px 54px -32px rgba(0,0,0,.85)}
.ev-row.is-adj{opacity:.86}
.ev-shot{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:#0d0d12;line-height:0}
.ev-shot img{display:block;width:100%;height:auto}
.ev-stamp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--lime)}
.ev-stamp i{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
.ev-fit{color:var(--muted,#a7a79e);letter-spacing:.06em;text-transform:none;font-size:11px}
.ev-body h3{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.9vw,22px);
  letter-spacing:-.01em;line-height:1.16;margin:0 0 8px}
.ev-body h3 a{color:var(--paper)}.ev-body h3 a:hover{color:var(--lime)}
.ev-is{color:#bdbdb4;font-size:14.5px;line-height:1.6;margin:0 0 13px}
.ev-go{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--lime)}
.ev-go:hover{text-decoration:underline}

/* the rate card: numerals at display size, no cards, no "most popular" badge */
.rate-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2);max-width:82ch}
.rate{display:grid;grid-template-columns:minmax(140px,.9fr) minmax(150px,1fr) minmax(0,1.6fr);
  gap:6px 20px;align-items:baseline;padding:19px 0;border-bottom:1px solid var(--line-2)}
.rate-p{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;color:var(--paper)}
.rate-n{font-size:15.5px;font-weight:600;color:var(--paper)}
.rate-d{color:#a7a79e;font-size:14.5px;line-height:1.55}
.rate-note{margin:18px 0 0;color:#a7a79e;font-size:14px;line-height:1.6;max-width:70ch}
.rate-note a{color:var(--lime)}.rate-note a:hover{text-decoration:underline}

/* the honest paragraph, given its own quiet band */
.ind-straight{max-width:74ch}
.ind-straight p{color:#c2c2ba;font-size:16.5px;line-height:1.72;margin:0}

/* questions, open — nothing on this page hides behind a click */
.qa-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px;max-width:92ch}
.qa{border-top:1px solid var(--line-2);padding-top:16px}
.qa-q{display:flex;gap:10px;margin:0 0 8px;font-size:16px;font-weight:600;color:var(--paper);line-height:1.4}
.qa-n{font-family:var(--mono);font-size:11.5px;color:var(--lime);opacity:.85;padding-top:3px;flex:none}
.qa-a{margin:0;color:#a7a79e;font-size:14.5px;line-height:1.65}

@media(max-width:860px){
  .ev-row{grid-template-columns:1fr;gap:14px}
  .qa-list{grid-template-columns:1fr;gap:22px}
  .rate{grid-template-columns:1fr;gap:3px;padding:16px 0}
  .fault{grid-template-columns:32px 1fr;gap:0 10px}
}

/* ===== THE THUMB BAR — the action, wherever they are =======================
   Measured on a phone, this homepage is 12.4 screens tall and the first button
   that asks for the job sits SIX screens down. Everything above it — the four
   production sites, the demos, the whole switchboard — is the page doing its
   best persuading with nothing to act on. Someone who decides yes at screen
   three has to scroll blind to find out where to say so.

   So the action follows them. Rules, because a bar like this cheapens a page if
   it just sits there shouting:
     · phones only — a desk has the nav and the room
     · never over the hero, which earns the whole viewport
     · gone once the form itself is on screen, or the footer: no point asking
       someone to start a project while they are already typing one
     · gone while the menu is open
   Slim, one hairline, the studio's own ink and lime. Not a slab.              */
.mcta{display:none}
@media(max-width:760px){
  .mcta{
    display:flex;align-items:center;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:1300;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
    background:rgba(7,7,10,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line);text-decoration:none;color:#fff;
    transform:translateY(102%);opacity:0;pointer-events:none;
    transition:transform .34s var(--ease-2),opacity .2s linear}
  .mcta.is-on{transform:translateY(0);opacity:1;pointer-events:auto}
  .mcta-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .mcta-t b{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
  .mcta-t i{font-style:normal;font-family:var(--sans);font-size:12.5px;letter-spacing:0;
    text-transform:none;color:var(--muted)}
  .mcta-go{flex:none;width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--ink);
    display:grid;place-items:center;font-size:17px;font-weight:600;line-height:1;
    transition:transform .18s var(--ease)}
  .mcta:active .mcta-go{transform:scale(.94)}
  .mcta:focus-visible{outline:2px solid var(--lime);outline-offset:-3px}
}
@media(prefers-reduced-motion:reduce){
  .mcta{transition:opacity .2s linear;transform:none}
  .mcta:not(.is-on){opacity:0;transform:none}
}

/* ---- direct contact ------------------------------------------------------
   The form is the main path and stays the main path. This is the line for a
   buyer who would rather say it out loud, and it is also the number the
   Google Business Profile carries — the two matching is a signal in itself. */
/* Scoped to .closing because .closing p sets font-size:19px and
   margin:0 auto 42px — a bare .cxC-direct loses to it on specificity and the
   size and top gap below never land. */
.closing .cxC-direct{margin:16px 0 0;font-size:15px;color:var(--muted);display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.cxC-direct a{color:#e9e9e4;text-decoration:none;border-bottom:1px solid rgba(198,242,78,.4);
  padding-bottom:1px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.cxC-direct a:hover{color:var(--lime);border-color:var(--lime)}
/* The links wrap on their own content width. Giving them flex-basis:100% here
   stretched each underline the full column, which read as two form fields. */
@media(max-width:520px){.closing .cxC-direct{gap:6px 14px}.cxC-sep{display:none}}

/* ===================== HERO shared (copy column, reveals) ===================== */
:root{--display:'Clash Display','Helvetica Neue',Arial,sans-serif;--sans:'General Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hc-ease:cubic-bezier(.16,1,.3,1);--hc-ease2:cubic-bezier(.32,.72,0,1)}
@keyframes hcUp{to{transform:translateY(0)}}
@keyframes hcRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* act 1: the brief, handwritten */
.mf-brief{position:absolute;left:24px;top:40px;z-index:4;font-family:'Architects Daughter',cursive;font-size:17px;line-height:1.45;color:#d9d5c8;pointer-events:none;max-width:320px}
@keyframes ink{to{opacity:1}}
@keyframes gridSnap{0%{opacity:1}18%{opacity:0}30%{opacity:1}46%{opacity:0}56%{opacity:1}100%{opacity:1}}
@keyframes gridOff{from{opacity:1}to{opacity:0}}

/* ===================== GENTLE LIGHT SYSTEM ===================== */
/* gentle light system for the paper run (work board + comparison): soft, Apple-quiet, no grain, no hard ink borders */
:root{--g-bg:#F3F3F1;--g-card:#FFFFFF;--g-ink:#0B0B0A;--g-2:#55554F;--g-3:#8A8A84;--g-line:rgba(11,11,10,.08);--g-shadow:0 30px 60px -30px rgba(11,11,10,.22),0 1px 2px rgba(11,11,10,.06),0 0 0 1px rgba(11,11,10,.04);--g-olive:#4C9A12;--g-yes:#DDF5A6;--g-tick:#2F7A08;--g-no:#FFDAD4;--g-nored:#D4382A}
.g-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-olive);margin-bottom:18px}
.g-h2{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.2vw,56px);line-height:1;letter-spacing:-.025em;color:var(--g-ink);margin:0 0 18px}
.g-h2 em{font-style:normal;color:#9A9A94}
.g-p{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--g-2);margin:0 0 14px;max-width:44ch}
.g-p b{color:var(--g-ink);font-weight:500}
.g-btn{display:inline-flex;align-items:center;gap:10px;background:var(--g-ink);color:#F4F3EE;font-family:var(--sans);font-weight:500;font-size:15px;padding:13px 20px 13px 22px;border-radius:999px;text-decoration:none;transition:transform .35s var(--hc-ease),background .35s}
.g-btn i{font-style:normal;color:var(--lime);transition:transform .35s var(--hc-ease)}
.g-btn:hover{transform:translateY(-2px);background:#000}.g-btn:hover i{transform:translateX(3px)}

/* ===================== WORK BOARD ===================== */

/* ---------- selected work: one board. pick a product, watch the real thing run ---------- */
.wk{position:relative;z-index:3;color:var(--g-ink);background:var(--g-bg);padding:96px 0 104px;overflow:hidden;border-radius:28px 28px 0 0;margin-top:-28px}
.wk-grain{display:none}
.wk-in{position:relative;max-width:1240px;margin:0 auto;padding:0 24px;z-index:2}
.wk-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:end;margin-bottom:44px}
.wk-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-olive);margin-bottom:18px}
.wk-h2{font-family:var(--display);font-weight:600;font-size:clamp(36px,4.6vw,62px);line-height:.98;letter-spacing:-.026em;margin:0}.wk-h2 em{font-style:normal;color:var(--g-3)}
.wk-sub{font-family:var(--sans);font-size:16.5px;line-height:1.6;color:var(--g-2);max-width:42ch;margin:0}
.wk-sub b{color:var(--g-ink);font-weight:500}
/* board */
.wk-board{display:grid;grid-template-columns:minmax(0,4.3fr) minmax(0,7.7fr);gap:44px;align-items:start}
/* the list */
.wk-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--g-line)}
.wk-item{border-bottom:1px solid var(--g-line)}
.wk-row{display:grid;grid-template-columns:30px 26px 1fr;align-items:center;gap:14px;width:100%;padding:17px 0;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.wk-row i{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--g-3);font-style:normal;transition:color .3s}
.wk-row img{width:28px;height:28px;border-radius:8px;object-fit:contain;background:#fff;padding:4px;box-shadow:0 1px 3px rgba(21,21,15,.08),0 0 0 1px rgba(21,21,15,.05)}
.wk-row b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.012em;color:#15150F;transition:color .3s}
.wk-row small{display:block;font-family:var(--sans);font-size:13.5px;color:var(--g-2);margin-top:2px}
.wk-row:hover b{color:#000}
.wk-item.on .wk-row i{color:var(--acc)}
.wk-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--hc-ease)}
.wk-item.on .wk-more{grid-template-rows:1fr}
.wk-more>div{overflow:hidden}
.wk-body{padding:0 0 24px 70px}
.wk-res{font-family:var(--display);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.08;letter-spacing:-.02em;margin:2px 0 14px;color:var(--g-ink)}
.wk-pts{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.wk-pts li{font-family:var(--sans);font-size:15px;line-height:1.5;color:#3A3A35;padding-left:26px;position:relative;max-width:40ch}
.wk-pts li:before{content:'';position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:50%;background:var(--g-yes) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%232F7A08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat}
.wk-open{display:inline-flex;align-items:center;gap:10px;background:#15150F;color:#F4F3EE;font-family:var(--sans);font-weight:500;font-size:14px;padding:11px 16px 11px 18px;border-radius:999px;text-decoration:none;transition:transform .35s var(--hc-ease),background .35s}
.wk-open i{font-style:normal;color:var(--lime);transition:transform .35s var(--hc-ease)}
.wk-open:hover{transform:translateY(-2px);background:#000}.wk-open:hover i{transform:translate(2px,-2px)}
.wk-hint{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-3)}
/* the stage */
.wk-stage{position:sticky;top:96px;border-radius:28px;background:var(--tint,#E2ECE3);padding:5.5% 5% 6.5%;box-shadow:var(--g-shadow);transition:background .7s var(--hc-ease);overflow:hidden}
.wk-big{position:absolute;right:-.02em;top:-.14em;font-family:var(--display);font-weight:700;font-size:clamp(200px,26vw,380px);line-height:1;letter-spacing:-.06em;color:var(--acc);opacity:.13;pointer-events:none;user-select:none;transition:color .7s}
.wk-scene{position:relative;aspect-ratio:16/10.2;z-index:1;transition:opacity .25s,transform .25s}
.wk-scene.out{opacity:0;transform:translateY(10px)}
.wk-win{position:absolute;left:0;top:2%;width:88%;border-radius:12px;overflow:hidden;background:#0d0e12;box-shadow:0 40px 80px -30px rgba(21,21,15,.55),0 10px 24px -12px rgba(21,21,15,.35);transform:rotate(-1.4deg);transition:transform .8s var(--hc-ease)}
.wk-stage:hover .wk-win{transform:rotate(-1.4deg) translateY(-6px)}
.wk-win .bar{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;background:#15161b;border-bottom:1px solid rgba(255,255,255,.06);transition:background .5s}
.wk-win .bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}.wk-win .bar i:first-child{background:var(--lime)}
.wk-win .bar span{margin-left:8px;font-family:var(--mono);font-size:11px;color:rgba(244,243,238,.6);letter-spacing:.02em}
.wk-win .bar em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--lime);display:inline-flex;align-items:center;gap:6px}
.wk-win .bar em:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.wk-win.light{background:#f4f3ee}.wk-win.light .bar{background:#f2efe8;border-bottom-color:rgba(0,0,0,.06)}.wk-win.light .bar span{color:rgba(21,21,15,.6)}.wk-win.light .bar em{color:#3d6b1f}.wk-win.light .bar em:before{background:#3d6b1f;box-shadow:none}
.wk-screens{position:relative;aspect-ratio:1500/888;overflow:hidden;background:#0d0e12}
.wk-screens video,.wk-screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s var(--hc-ease)}
.wk-screens .on{opacity:1}
.wk-ph{position:absolute;right:0;bottom:-4%;width:26%;border-radius:24px;padding:6px;background:#0a0a0c;box-shadow:0 44px 60px -24px rgba(21,21,15,.6),0 0 0 1px rgba(255,255,255,.08) inset;transform:rotate(4deg);z-index:2;transition:transform .8s var(--hc-ease)}
.wk-stage:hover .wk-ph{transform:rotate(4deg) translateY(-10px)}
.wk-ph video{display:block;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:19px;background:#111}
.wk-ph:after{content:'';position:absolute;left:50%;top:11px;width:34%;height:6px;border-radius:3px;background:#0a0a0c;transform:translateX(-50%)}
.wk-shadow{position:absolute;left:6%;right:10%;bottom:-2%;height:14%;background:radial-gradient(50% 60% at 50% 50%,rgba(21,21,15,.35),transparent 70%);filter:blur(10px);z-index:0}
@media(max-width:1000px){
  .wk{padding:56px 0 56px;border-radius:22px 22px 0 0}.wk-head{grid-template-columns:1fr;gap:16px;margin-bottom:26px}
  .wk-board{grid-template-columns:1fr;gap:20px}.wk-stage{position:relative;top:auto;order:-1;border-radius:18px;margin:0 -4px;padding:7% 5% 6%}
  .wk-big{font-size:clamp(150px,40vw,220px)}
  .wk-win{width:86%}.wk-ph{width:32%}
  .wk-body{padding-left:0}.wk-row{grid-template-columns:26px 24px 1fr;padding:14px 0}.wk-row b{font-size:18px}
}

/* ===================== AGENCY VS WINSHIP ===================== */

.cp{position:relative;z-index:3;color:var(--g-ink);background:var(--g-bg);padding:96px 0 110px;overflow:hidden}
.cp-in{position:relative;max-width:1180px;margin:0 auto;padding:0 24px;z-index:2;display:grid;grid-template-columns:minmax(0,6.3fr) minmax(0,5.7fr);gap:64px;align-items:start}
.cp-pitch{position:sticky;top:110px;order:2}
.cp-card{position:relative;background:var(--g-card);border-radius:24px;box-shadow:var(--g-shadow);border:1px solid rgba(21,21,15,.05);overflow:hidden}
.cp-cardhead{display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:center;gap:14px;padding:24px 28px 16px;border-bottom:1px solid var(--g-line)}
.cp-cardhead h3{font-family:var(--sans);font-size:18px;color:var(--g-ink);margin:0;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.cp-cardhead span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-3)}
.cp-cardhead span.us{color:var(--g-olive)}
.cp-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px;align-items:center;padding:17px 28px;border-bottom:1px solid var(--g-line);font-family:var(--sans);opacity:0;transform:translateY(8px);transition:opacity .6s var(--hc-ease),transform .6s var(--hc-ease)}
.cp.in .cp-row{opacity:1;transform:none}
.cp-row .u:before,.cp-row .t:before{transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1) .25s,opacity .3s .25s}
.cp.in .cp-row .u:before,.cp.in .cp-row .t:before{transform:none;opacity:1}
.cp-row .k{display:flex;align-items:center;gap:11px;font-weight:600;font-size:14.5px;color:var(--g-ink);letter-spacing:-.005em}
.cp-row .k svg{width:17px;height:17px;flex:none;stroke:var(--g-ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cp-row .t,.cp-row .u{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.4}
.cp-row .t{color:#7C7C76}.cp-row .u{color:var(--g-ink);font-weight:500}
.cp-row .t:before,.cp-row .u:before{content:'';flex:none;width:18px;height:18px;border-radius:50%;margin-top:0;background-position:center;background-size:62%;background-repeat:no-repeat}
.cp-row .t:before{background-color:var(--g-no);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23D4382A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.cp-row .u:before{background-color:var(--g-yes);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%232F7A08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cp-row .lbl{display:none}
.cp-row.last{background:var(--g-ink);color:#F4F3EE;border-bottom:0;padding:20px 28px;grid-template-columns:.95fr 1.25fr .9fr}
.cp-row.last .u,.cp-row.last .t{white-space:nowrap}
.cp-row.last .k{color:#F4F3EE;white-space:nowrap}.cp-row.last .k svg{stroke:var(--lime)}
.cp-row.last .t{color:rgba(244,243,238,.55)}.cp-row.last .t:before{background-color:rgba(255,255,255,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23F4F3EE' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.cp-row.last .u{color:#F4F3EE}.cp-row.last .u:before{background-color:var(--lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2307070A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cp-row.last .u b{color:var(--lime);font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;margin-right:6px}
.cp-fine{font-family:var(--sans);font-style:italic;font-size:12.5px;line-height:1.5;color:var(--g-3);margin:0;padding:16px 28px 20px;border-top:1px solid var(--g-line)}
@media(prefers-reduced-motion:reduce){.cp-row{opacity:1;transform:none;transition:none}}
@media(max-width:960px){
  .cp{padding:64px 0 96px}.cp-in{grid-template-columns:1fr;gap:28px}.cp-pitch{position:static;order:0}.cp-cardwrap{order:1}
  .g-h2{font-size:clamp(32px,8.6vw,42px)}.g-p{font-size:15.5px}
  .cp-card{border-radius:20px}
  .cp-cardhead{display:block;padding:20px 20px 14px}.cp-cardhead span{display:none}.cp-cardhead h3{font-size:17px}
  .cp-row{display:block;padding:14px 18px}
  .cp-row .k{font-size:15px;margin-bottom:9px}
  .cp-row .t,.cp-row .u{font-size:14px;padding-left:0;margin:0 0 7px;white-space:nowrap}.cp-row .t{margin-bottom:0}
  .cp-row .lbl{display:inline;font-style:normal;font-weight:400;color:var(--g-3);margin-right:4px}
  .cp-row.last .u .lbl,.cp-row.last .t .lbl{color:rgba(244,243,238,.5)}
  .cp-row.last{padding:18px 20px}
}

/* ===================== LIGHT RUN (board → table → pricing → faq → contact panel) ===================== */
.light{position:relative;z-index:3;background:var(--g-bg);color:var(--g-ink);padding-bottom:28px}
.light .cp{padding-top:96px}
.light .wk{margin-top:0;padding-top:40px}
/* pricing */
.light .pricing{background:transparent;padding:32px 0 24px}
.light .sec-h2{color:var(--g-ink)}
.light .sec-h2 em{color:#9A9A94;font-style:normal}
.light .price-cta{background:var(--g-ink);color:#F4F3EE;border-color:var(--g-ink);box-shadow:none}
.light .price-cta i{color:var(--lime)}
.light .price-cta:hover{background:#000}
.light .care-cta{color:var(--g-ink)}
/* faq */
.light .faq-sec{background:transparent;border-top:0;padding-top:48px}
.light .faq-sec .sec-h2{color:var(--g-ink)}
.light .faq-list{background:#fff;border:1px solid rgba(11,11,10,.06);box-shadow:var(--g-shadow);border-radius:24px}
.light .faq-list details{border-top-color:rgba(11,11,10,.07)}
.light .faq-q-t,.light .faq-list details[open] .faq-q-t{color:var(--g-ink)}
.light .faq-q:hover{background:rgba(11,11,10,.025)}
.light .faq-ic{border-color:rgba(11,11,10,.16)}
.light .faq-ic::before,.light .faq-ic::after{background:var(--g-ink)}
.light .faq-list details[open] .faq-ic{background:var(--g-ink);border-color:var(--g-ink)}
.light .faq-list details[open] .faq-ic::before,.light .faq-list details[open] .faq-ic::after{background:#fff}
.light .faq-list details[open] .faq-q::before{background:var(--g-olive)}
.light .faq-a{color:var(--g-2)}
.light .faq-more{color:var(--g-3)}
.light .faq-more a{color:var(--g-ink)}
/* contact: a dark rounded panel inset in the light page */
.light .closing{background:var(--ink);border-radius:32px;margin:24px 24px 0;padding:88px 0 96px;color:var(--paper);overflow:hidden}
.light .closing .cxC-h{color:var(--paper)}
@media(max-width:700px){.light .closing{margin:16px 12px 0;border-radius:22px;padding:56px 0 64px}}
/* footer sits on dark again */
.light + .wrap,.foot{position:relative;z-index:3}

/* ===================== HOME: light page, dark inset panels ===================== */
body.home{background:var(--g-bg)}
.home .bg-wash,.home .bg-grain,.home .bg-base,.home .vignette,.home .spot{display:none}
.home .light .wk{margin-top:0;border-radius:0}
/* phone hero panel */
.mh{display:none}
@media(max-width:1080px){
  .mh{display:block;padding:84px 14px 0}
  .mh-panel{position:relative;border-radius:28px;padding:34px 24px 26px;color:#F4F3EE;background:radial-gradient(120% 90% at 20% 100%,#1B2219 0%,#0F120F 48%,#0B0B0A 100%);box-shadow:0 30px 70px -40px rgba(11,11,10,.6)}
  .mh-h1{font-family:var(--display);font-weight:500;font-size:clamp(28px,7.6vw,34px);line-height:1.12;letter-spacing:-.015em;margin:0 0 26px;color:#F4F3EE}
  .mh-caps{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
  .mh-caps li{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-size:15.5px;font-weight:500;color:#F4F3EE}
  .mh-caps i{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(198,242,78,.08);border:1px solid rgba(198,242,78,.14);display:grid;place-items:center}
  .mh-caps svg{width:18px;height:18px;fill:none;stroke:#C6F24E;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .mh-stance{font-family:var(--sans);font-size:19px;line-height:1.3;letter-spacing:-.01em;color:rgba(244,243,238,.55);margin:0 0 26px}
  .mh-stance b{color:#F4F3EE;font-weight:500}
  .mh-card{padding:20px 20px 20px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
  .mh-card b{display:block;font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.2;margin-bottom:6px;color:#F4F3EE;letter-spacing:-.01em;white-space:nowrap}
  .mh-card small{display:block;font-family:var(--sans);font-size:14px;line-height:1.45;color:rgba(244,243,238,.55);margin-bottom:14px}
  .mh-btn{display:inline-flex;align-items:center;gap:10px;background:#F4F3EE;color:#0B0B0A;font-family:var(--sans);font-weight:600;font-size:15px;padding:11px 18px;border-radius:999px;text-decoration:none}
  .mh-btn i{width:9px;height:9px;border-radius:50%;background:#C6F24E}
  .mh-copy{margin:26px 0 0;font-family:var(--sans);font-size:12.5px;color:rgba(244,243,238,.4)}
  .home .light{padding-top:8px}.home .light .cp{padding:56px 0 64px}.home .light .wk{padding-top:32px}
}
.home .nav{background:rgba(11,11,10,.94);border-color:rgba(255,255,255,.08)}

/* home: headings in General Sans (calm grotesque), Clash kept for the desktop hero headline only */
.home .mh-h1{font-family:var(--sans);font-weight:600;font-size:clamp(28px,7.4vw,33px);line-height:1.15;letter-spacing:-.022em}
.home .wk-h2,.home .g-h2,.home .sec-h2,.home .cxC-h,.home .wk-res,.home .wk-row b,.home .price-now,.home .cp-cardhead h3{font-family:var(--sans);letter-spacing:-.025em}
.home .wk-h2,.home .g-h2,.home .sec-h2{font-weight:600}
.home .cxC-h{font-weight:600}
.home .wk-res{font-weight:600;letter-spacing:-.015em}

/* phone hero: sketch → print → folds into the icon grid; tap an icon to open that screen */
@media(max-width:1080px){
  .mh-panel{padding-top:30px}
  .mh-stage{position:relative;aspect-ratio:1280/880;margin:0 0 22px;border-radius:14px;overflow:hidden;transition:max-height .7s var(--hc-ease),opacity .5s,margin .7s var(--hc-ease),transform .7s var(--hc-ease);max-height:400px}
  .mh-stage.gone{max-height:0;margin-bottom:0;opacity:0;transform:scale(.96)}
  .mh-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .4s}.mh-stage canvas.on{opacity:1}
  .mh-sk{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none;transition:opacity .6s}.mh-sk.gone{opacity:0}
  .mh-sk svg{position:absolute;overflow:visible}
  .mh-sk path,.mh-sk circle{fill:none;stroke:#EFEBDF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mh-sk .thin{stroke-width:1.2;opacity:.82}.mh-sk .soft{opacity:.55}.mh-sk .shade{fill:rgba(239,235,223,.10);stroke:none;opacity:0;transition:opacity .35s}.mh-sk .shade.in{opacity:1}
  .mh-sk .peel{fill:rgba(8,8,11,.94);stroke:none;opacity:0;transition:opacity .3s}.mh-sk .peel.in{opacity:1}
  .mh-sk text{font-family:'Architects Daughter',cursive;font-size:15.5px;fill:#d9d5c8}.mh-sk text.small{font-size:12px;fill:#a7a49a}.mh-sk text.big{font-size:23px;fill:#EFEBDF}.mh-sk text.dead{fill:#7d7a70;font-size:20px}.mh-sk .strike{stroke:#b9b5a8;stroke-width:1.6}
  .mh-sk .lbl{opacity:0;transition:opacity .45s}.mh-sk .lbl.in{opacity:1}.mh-sk .under{stroke:var(--lime);stroke-width:2}
  .mh-sk .pen{fill:var(--lime);stroke:none;filter:drop-shadow(0 0 6px rgba(198,242,78,.9));opacity:0;transition:opacity .4s}.mh-sk .pen.on{opacity:1}.mh-sk .pressdup{opacity:0}
  .mh-caps{opacity:0;transform:translateY(10px);max-height:0;overflow:hidden;margin-bottom:0;transition:opacity .6s var(--hc-ease) .15s,transform .6s var(--hc-ease) .15s,max-height .7s var(--hc-ease),margin .7s var(--hc-ease)}.mh-caps.in,.mh-caps.now{opacity:1;transform:none;max-height:420px;margin-bottom:28px}
  .mh-caps li{display:block}
  .mh-caps button{display:flex;align-items:center;gap:12px;width:100%;padding:0;background:none;border:0;font:inherit;color:#F4F3EE;font-family:var(--sans);font-size:15px;font-weight:500;text-align:left;cursor:pointer}
  .mh-caps button i{transition:background .3s,border-color .3s}
  .mh-caps button[aria-pressed="true"] i{background:var(--lime);border-color:var(--lime)}.mh-caps button[aria-pressed="true"] svg{stroke:#0B0B0A}
  .mh-view{margin:6px 0 24px;border-radius:16px;overflow:hidden;background:#0d0e12;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
  .mh-view[hidden]{display:none}
  .mh-vbar{display:flex;align-items:center;gap:10px;height:38px;padding:0 6px 0 14px;background:#15161b;border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:11px;color:rgba(244,243,238,.6)}
  .mh-vbar em{font-style:normal;color:var(--lime);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;margin-left:auto}.mh-vbar em:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lime)}
  .mh-close{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#F4F3EE;font-size:18px;line-height:1;cursor:pointer;margin-left:6px}
  .mh-view canvas{display:block;width:100%;aspect-ratio:1280/880;height:auto}
  .mh-vcap{padding:14px 16px 16px;display:grid;gap:3px}
  .mh-vcap small{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,243,238,.5)}
  .mh-vcap b{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:-.015em;color:#F4F3EE}
  .mh-vcap span{font-family:var(--sans);font-size:13px;color:rgba(244,243,238,.6)}
}

/* the panel owns the first screen */
@media(max-width:1080px){
  .mh{padding:78px 12px 0}
  .mh-panel{min-height:calc(100dvh - 90px);display:flex;flex-direction:column;padding:28px 22px 22px;border-radius:26px}
  .mh-eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:rgba(244,243,238,.45);margin:0 0 12px}
  .home .mh-h1{margin-bottom:22px}
  .mh-stage{margin-bottom:18px}
  .mh-stance{margin-bottom:22px}
  .mh-card{margin-top:auto}
  .mh-proof{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:22px 0 0}
  .mh-proof span{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:rgba(244,243,238,.4);margin-right:2px}
  .mh-proof a{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;font-weight:500;color:rgba(244,243,238,.75);text-decoration:none}
  .mh-proof img{width:18px;height:18px;border-radius:5px;background:#fff;padding:2px;object-fit:contain}
  .mh-copy{margin-top:16px}
}
@media(min-width:1081px){.mh-eyebrow,.mh-proof{display:none}}

/* mobile CTA: one floating pill, nothing else */
@media(max-width:1080px){
  .mcta{left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:0 8px 0 22px;height:58px;border-radius:999px;background:#0B0B0A;border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 50px -18px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.25);justify-content:space-between;gap:12px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .mcta-t{flex:1;align-items:flex-start;justify-content:center}
  .mcta-t b{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;color:#F4F3EE}
  .mcta-go{width:42px;height:42px;font-size:18px}
  .mcta.is-on{transform:translateY(0)}
  .mcta:not(.is-on){transform:translateY(90px)}
  .mcta{transition:transform .5s var(--hc-ease),opacity .3s}
}

/* phone hero: same side margins as the nav (18px), no forced gap before the card */
@media(max-width:1080px){
  .mh{padding:78px 18px 0}
  .mh-panel{min-height:0;padding:28px 20px 22px}
  .mh-card{margin-top:0}
  .mcta{left:18px;right:18px}
}

@media(max-width:1080px){
  .mh-view{margin:0 0 22px}
  .mh-vbar{padding:0 6px 0 6px;gap:8px}
  .mh-vbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .mh-nav{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#F4F3EE;font-size:20px;line-height:1;cursor:pointer;padding:0 0 3px}
  .mh-caps.off{max-height:0!important;margin-bottom:0!important;opacity:0!important;transform:translateY(-6px)!important}
}

@media(max-width:1080px){.mh-view{scroll-margin-top:96px}}

/* phone hero slot: sketch, icon grid and the opened screen share one fixed box, so the card never moves */
@media(max-width:1080px){
  .mh-slot{position:relative;height:318px;margin:0 0 22px}
  .mh-stage{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:1280/880;margin:0;max-height:none;transition:opacity .5s,transform .6s var(--hc-ease)}
  .mh-stage.gone{max-height:none;margin:0;opacity:0;transform:translateY(-50%) scale(.96);pointer-events:none}
  .mh-caps{position:absolute;inset:0;margin:0!important;max-height:none!important;overflow:visible;display:grid;grid-template-columns:1fr 1fr;align-content:space-between;gap:0 12px;transition:opacity .5s var(--hc-ease) .1s,transform .5s var(--hc-ease) .1s;pointer-events:none}
  .mh-caps.in,.mh-caps.now{pointer-events:auto}
  .mh-caps.off{opacity:0!important;transform:translateY(-6px)!important;pointer-events:none}
  .mh-view{position:absolute;inset:0;margin:0;display:flex;flex-direction:column}
  .mh-view[hidden]{display:none}
  .mh-vbar{flex:none;height:36px}
  .mh-view canvas{flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#0d0e12}
  .mh-vcap{flex:none;padding:8px 14px 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .mh-vcap small{order:2;letter-spacing:.04em}.mh-vcap b{font-size:17px}.mh-vcap span{display:none}
  /* the card: more presence */
  .mh-card{padding:22px 20px;border-radius:22px;background:linear-gradient(160deg,rgba(198,242,78,.08),rgba(255,255,255,.03) 45%,rgba(255,255,255,.02));border:1px solid rgba(198,242,78,.22);box-shadow:0 0 0 1px rgba(198,242,78,.05),0 24px 60px -30px rgba(198,242,78,.35),inset 0 1px 0 rgba(255,255,255,.06)}
  .mh-card b{font-size:20px}
  .mh-card small{font-size:14.5px;margin-bottom:16px}
}
/* phone hero: breathe like theirs */
@media(max-width:1080px){
  .mh-panel{padding:30px 24px 26px}
  .mh-eyebrow{margin-bottom:14px;font-size:12px}
  .home .mh-h1{font-size:clamp(30px,8vw,35px);line-height:1.14;margin-bottom:28px}
  .mh-slot{margin-bottom:30px}
  .mh-caps button{font-size:15.5px;gap:14px}
  .mh-stance{font-size:20px;line-height:1.32;margin-bottom:30px}
  .mh-card{padding:24px 22px}
  .mh-card b{font-size:21px;margin-bottom:8px}
  .mh-card small{font-size:15px;line-height:1.5;margin-bottom:18px}
  .mh-btn{padding:13px 20px;font-size:15.5px}
  .mh-copy{margin-top:22px;font-size:13px}
}
/* phone: bare nav (lockup on a small ink pill + menu circle), tighter slot, bigger tiles and stance */
@media(max-width:860px){
  .mh-slot{height:304px;margin-bottom:28px}
  .mh-stage{top:0;transform:none}
  .mh-stage.gone{transform:scale(.96)}
  .mh-caps i{width:52px;height:52px;border-radius:14px}
  .mh-caps svg{width:20px;height:20px}
  .mh-caps button{font-size:16px;gap:14px}
  .mh-stance{font-size:22px;line-height:1.28;margin-bottom:28px}
  .mh-stance b{font-weight:500}
}
@media(max-width:860px){
  .mh-slot{height:268px;margin-bottom:26px}
  .mh-caps{align-content:start;gap:20px 12px}
}

/* phone hero: their sizes */
@media(max-width:860px){
  .mh-eyebrow{font-size:11.5px;margin-bottom:12px}
  .home .mh-h1{font-size:27px;line-height:1.18;letter-spacing:-.02em;margin-bottom:24px}
  .mh-caps i{width:48px;height:48px;border-radius:13px}.mh-caps svg{width:18px;height:18px}
  .mh-caps button{font-size:15px;gap:13px}
  .mh-caps{gap:18px 12px}.mh-slot{height:246px}
  .mh-stance{font-size:19px;line-height:1.3;margin-bottom:26px}
  .mh-card{padding:22px 20px}.mh-card b{font-size:18px}.mh-card small{font-size:14px;margin-bottom:14px}
  .mh-btn{font-size:15px;padding:12px 18px}
  .mh-copy{font-size:12.5px}
}
/* phone hero: icon grid in three columns, small */
@media(max-width:860px){
  .mh-slot{height:176px;margin-bottom:24px}
  .mh-stage{left:12%;right:12%;top:0}
  .mh-caps{grid-template-columns:1fr 1fr 1fr;gap:16px 10px;align-content:start}
  .mh-caps i{width:36px;height:36px;border-radius:10px}.mh-caps svg{width:15px;height:15px}
  .mh-caps button{font-size:13px;gap:8px;font-weight:500;letter-spacing:-.005em}
}
@media(max-width:860px){
  .mh-slot{overflow:visible}
  .mh-view{position:absolute;left:0;right:0;top:0;bottom:auto;height:auto;z-index:6;box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
  .mh-view canvas{flex:none;aspect-ratio:1280/880;height:auto;object-fit:contain}
}
@media(max-width:860px){
  .mh-view{left:-24px;right:-24px;border-radius:18px;border:0;background:#0d0e12}
  .mh-vbar{position:absolute;inset:0;height:auto;background:none;border:0;padding:0;pointer-events:none;z-index:2}
  .mh-vbar span,.mh-vbar em{display:none}
  .mh-vbar button{pointer-events:auto;position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(11,11,10,.72);color:#F4F3EE;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .mh-close{right:10px;top:10px;font-size:20px}
  .mh-nav#mhPrev{left:10px;top:50%;transform:translateY(-50%)}
  .mh-nav#mhNext{right:10px;top:50%;transform:translateY(-50%)}
  .mh-vcap{display:none}
  .mh-view canvas{border-radius:18px}
  .mh-panel.viewing .mh-stance{visibility:hidden}
}

/* phone hero: wider, bigger stage, smaller type, compact card */
@media(max-width:860px){
  .mh{padding:78px 10px 0}
  .mh-panel{padding:24px 16px 18px;border-radius:24px}
  .mh-eyebrow{font-size:11px;margin-bottom:10px}
  .home .mh-h1{font-size:24px;line-height:1.2;margin-bottom:20px}
  .mh-slot{height:calc((100vw - 52px) * 880 / 1280 + 2px);min-height:230px;margin-bottom:18px}
  .mh-stage{left:0;right:0}
  .mh-caps{grid-template-columns:1fr 1fr 1fr;gap:14px 8px;align-content:start}
  .mh-caps i{width:34px;height:34px;border-radius:10px}.mh-caps svg{width:15px;height:15px}
  .mh-caps button{font-size:12.5px;gap:8px}
  .mh-view{left:-16px;right:-16px;border-radius:16px}
  .mh-stance{font-size:16.5px;line-height:1.35;margin-bottom:18px}
  .mh-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 14px 14px 16px;border-radius:18px}
  .mh-card b{font-size:15.5px;margin-bottom:3px;white-space:normal}
  .mh-card small{font-size:12.5px;line-height:1.4;margin:0}
  .mh-btn{font-size:14px;padding:11px 14px;gap:8px;white-space:nowrap}
  .mh-copy{font-size:11.5px;margin-top:14px}
  .mh-panel.viewing .mh-caps{visibility:hidden}
}
@media(max-width:860px){.mh{padding-left:12px;padding-right:12px}.home .nav{width:calc(100% - 24px)}.home .mcta{left:12px;right:12px}}

@media(max-width:860px){
  .mh-card{grid-template-columns:1fr auto;grid-template-areas:'t t' 's b';gap:6px 14px;align-items:center;padding:16px 14px 14px 16px}
  .mh-card b{grid-area:t;margin-bottom:2px}
  .mh-card small{grid-area:s}
  .mh-btn{grid-area:b}
}
@media(max-width:860px){.mh-slot{transition:height .7s var(--hc-ease)}.mh-slot.grid{height:192px}}

/* phone hero: quieter, modern icon tiles; screen inset from the panel edge */
@media(max-width:860px){
  .mh-caps i{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:11px}
  .mh-caps svg{stroke:rgba(244,243,238,.92);stroke-width:1.75;width:16px;height:16px}
  .mh-caps button[aria-pressed="true"] i{background:#F4F3EE;border-color:#F4F3EE}.mh-caps button[aria-pressed="true"] svg{stroke:#0B0B0A}
  .mh-view{left:-10px;right:-10px;border-radius:14px}
}
@media(max-width:860px){.mh-caps{grid-template-columns:auto auto auto;justify-content:space-between;column-gap:10px}}

@media(max-width:860px){
  .home .nav{border-radius:18px}
  .mh-panel{border-radius:18px}
  .mh-stage{left:3%;right:3%}
  .mh-view{border-radius:12px}
}

/* opened screen: controls in a quiet strip under the picture, never over it */
@media(max-width:860px){
  .mh-vbar{position:static;inset:auto;height:34px;display:flex;align-items:center;gap:6px;padding:0 4px 0 6px;background:transparent;border:0;pointer-events:auto}
  .mh-vbar button{position:static;transform:none;width:30px;height:30px;border-radius:50%;background:transparent;border:0;color:rgba(244,243,238,.55);backdrop-filter:none;-webkit-backdrop-filter:none;font-size:20px;line-height:1;padding:0 0 2px}
  .mh-vbar button:active{color:#fff}
  .mh-vbar span{display:block;flex:1;font-family:var(--sans);font-size:12px;color:rgba(244,243,238,.4);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mh-vbar em{display:none}
  .mh-close{margin-left:auto}
  .mh-view canvas{border-radius:12px 12px 0 0}
  .mh-view{background:#0d0e12;border-radius:12px}
}
@media(max-width:860px){.mh-slot,.mh-slot.grid{height:calc((100vw - 52px) * 880 / 1280 + 2px);transition:none}.mh-caps{align-content:space-evenly;height:100%}}

/* ===================== DESKTOP HERO: same language as the phone panel ===================== */
@media(min-width:1081px){
  .home .mf{padding:48px 0 44px}
  .home .mf-wrap{grid-template-columns:minmax(0,470px) minmax(0,1fr);grid-template-areas:'copy stage';gap:0 44px;padding-left:48px;align-items:center}
  .mf-copy{display:block}
  .mf-eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,243,238,.45);margin:0 0 14px}
  .mf-h1t{font-family:var(--sans);font-weight:600;font-size:clamp(34px,3vw,44px);line-height:1.1;letter-spacing:-.025em;color:#F4F3EE;margin:0 0 20px}
  .mf-stance{font-family:var(--sans);font-size:17px;line-height:1.45;color:rgba(244,243,238,.55);margin:0 0 26px;max-width:44ch}
  .mf-stance b{color:#F4F3EE;font-weight:500}
  .mf-caps{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:auto auto auto;justify-content:space-between;gap:16px 10px}
  .mf-caps li{display:block}
  .mf-caps button{display:flex;align-items:center;gap:10px;padding:0;background:none;border:0;font:inherit;color:#F4F3EE;font-family:var(--sans);font-size:13.5px;font-weight:500;cursor:pointer;text-align:left}
  .mf-caps i{flex:none;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);display:grid;place-items:center;transition:background .3s,border-color .3s}
  .mf-caps svg{width:17px;height:17px;fill:none;stroke:rgba(244,243,238,.92);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .mf-caps button:hover i{background:rgba(255,255,255,.1)}
  .mf-caps button[aria-pressed="true"] i{background:#F4F3EE;border-color:#F4F3EE}.mf-caps button[aria-pressed="true"] svg{stroke:#0B0B0A}
  .mf-card{display:grid;grid-template-columns:1fr auto;grid-template-areas:'t t' 's b';gap:6px 16px;align-items:center;padding:18px 18px 18px 20px;border-radius:18px;background:linear-gradient(160deg,rgba(198,242,78,.08),rgba(255,255,255,.03) 45%,rgba(255,255,255,.02));border:1px solid rgba(198,242,78,.22);box-shadow:0 24px 60px -30px rgba(198,242,78,.35),inset 0 1px 0 rgba(255,255,255,.06)}
  .mf-card b{grid-area:t;font-family:var(--sans);font-weight:600;font-size:17px;color:#F4F3EE;letter-spacing:-.01em}
  .mf-card small{grid-area:s;font-family:var(--sans);font-size:13px;line-height:1.45;color:rgba(244,243,238,.55)}
  .mf-card .mh-btn{grid-area:b;display:inline-flex;align-items:center;gap:9px;background:#F4F3EE;color:#0B0B0A;font-family:var(--sans);font-weight:600;font-size:14.5px;padding:12px 18px;border-radius:999px;text-decoration:none;white-space:nowrap}
  .mf-card .mh-btn i{width:9px;height:9px;border-radius:50%;background:#C6F24E}
  .mf-copyline{margin:16px 0 0;font-family:var(--sans);font-size:12.5px;color:rgba(244,243,238,.4)}
  .mf-tabs{display:none!important}
  .home .mf-stage{height:clamp(520px,72vh,720px)}
}

/* ===================== OPENING: the lockup draws itself, then becomes the icons ===================== */
@media(max-width:1080px){
  .mh-stage{display:grid;place-items:center;overflow:visible}
  .mh-lock{width:92%;height:auto;overflow:visible;transition:transform .7s var(--hc-ease),opacity .5s var(--hc-ease)}
  .mh-stage.gone .mh-lock{transform:translateY(-30px) scale(.86);opacity:0}
  .mh-lock .bl{fill:none;stroke:#C6F24E;stroke-width:5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:2000;stroke-dashoffset:2000;transition:fill .3s}
  .mh-lock .bl.done{fill:#C6F24E;stroke-width:0}
  .mh-lock text{font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;font-weight:600;font-size:118px;letter-spacing:-.03em;fill:#F4F3EE}
  .mh-lock .pen{fill:#C6F24E;filter:drop-shadow(0 0 7px rgba(198,242,78,.95));opacity:0;transition:opacity .25s}.mh-lock .pen.on{opacity:1}
  .mh-lock.pulse .bl{filter:drop-shadow(0 0 14px rgba(198,242,78,.9))}
  .mh-caps li{opacity:0;transform:translateY(14px) scale(.92);transition:opacity .5s var(--hc-ease),transform .6s var(--hc-ease);transition-delay:calc(var(--i,0)*55ms)}
  .mh-caps.in li,.mh-caps.now li{opacity:1;transform:none}
  .mh-caps svg *{stroke-dasharray:1;stroke-dashoffset:1}
  .mh-caps.now svg *{stroke-dashoffset:0}
  .mh-caps.in svg *{animation:mhDash .8s var(--hc-ease) forwards;animation-delay:calc(var(--i,0)*55ms + .18s)}
  @keyframes mhDash{to{stroke-dashoffset:0}}
}

/* opening, cinematic pass + breathing panel */
@media(max-width:1080px){
  .mh-panel{position:relative;overflow:hidden}
  .mh-panel:before,.mh-panel:after{content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(40px)}
  .mh-panel:before{width:70%;padding-top:70%;left:-18%;top:34%;background:radial-gradient(closest-side,rgba(198,242,78,.16),rgba(198,242,78,0));animation:mhBreath 9s ease-in-out infinite alternate}
  .mh-panel:after{width:60%;padding-top:60%;right:-20%;bottom:-24%;background:radial-gradient(closest-side,rgba(120,150,60,.14),rgba(120,150,60,0));animation:mhBreath2 13s ease-in-out infinite alternate}
  @keyframes mhBreath{from{transform:translate(0,0) scale(1)}to{transform:translate(8%,10%) scale(1.18)}}
  @keyframes mhBreath2{from{transform:translate(0,0) scale(1)}to{transform:translate(-10%,-8%) scale(1.15)}}
  .mh-panel>*{position:relative;z-index:1}
  .mh-lock{transform:scale(1.07);transition:transform 2.4s cubic-bezier(.2,.7,.2,1),opacity .5s var(--hc-ease)}
  .mh-lock.set{transform:scale(1)}
  .mh-stage.gone .mh-lock{transform:translateY(-22px) scale(.84);opacity:0;transition:transform .6s var(--hc-ease),opacity .45s var(--hc-ease)}
  .mh-lock .bl{stroke-dashoffset:2010}
  .mh-lock .pen{filter:drop-shadow(0 0 5px rgba(198,242,78,.8))}
  .mh-lock .sweep{mix-blend-mode:screen;opacity:0}
  .mh-lock .sweep.go{opacity:1;animation:mhSweep .9s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes mhSweep{from{transform:translateX(0)}to{transform:translateX(980px)}}
  .mh-caps li{transform:translate(var(--dx,0px),var(--dy,14px)) scale(.6);transition:opacity .55s var(--hc-ease),transform .75s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*45ms)}
  .mh-caps.in li,.mh-caps.now li{transform:none}
}
@media(max-width:860px){.mh-caps{justify-content:space-evenly;padding:0 6px;column-gap:14px;align-content:center;row-gap:18px;height:100%}}
@media(max-width:860px){.mh-caps{justify-content:space-between;padding:0 2px 0 4px;column-gap:10px;row-gap:16px}}

/* headline swaps to the selected story's line */
.mh-h1{transition:opacity .18s ease,transform .18s ease}.mh-h1.swap{opacity:0;transform:translateY(6px)}
/* view strip: true centre — equal side columns, chevrons drawn not typed */
@media(max-width:1080px){
  .mh-vbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;padding:0 2px 0 4px;height:34px}
  .mh-vbar #mhPrev{grid-column:1;grid-row:1;justify-self:start}
  .mh-vbar #mhNext{grid-column:1;grid-row:1;justify-self:start;margin-left:32px}
  .mh-vbar span{grid-column:2;grid-row:1;flex:none;max-width:52vw;line-height:34px}
  .mh-vbar #mhClose{grid-column:3;grid-row:1;justify-self:end;font-size:18px;line-height:30px;padding:0}
  .mh-vbar #mhPrev,.mh-vbar #mhNext{position:relative;left:auto;right:auto;top:auto;transform:none;font-size:0;padding:0}
  .mh-vbar .mh-nav::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(-40%,-50%) rotate(45deg)}
  .mh-vbar #mhNext::before{transform:translate(-60%,-50%) rotate(-135deg)}
}
/* compare card on phones: full-bleed to the 12px page margin, nested tick/cross lines */
@media(max-width:860px){
  .cp-cardwrap{margin:0 -12px}
  .cp-card{border-radius:18px;border:1px solid rgba(76,154,18,.22);box-shadow:0 24px 50px -28px rgba(11,11,10,.22),0 1px 2px rgba(11,11,10,.04)}
  .cp-cardhead{padding:20px 20px 16px}
  .cp-row{padding:15px 20px 14px}
  .cp-row .k{gap:11px;margin-bottom:8px}
  .cp-row .t,.cp-row .u{padding-left:28px;gap:9px}
  .cp-row.last{padding:18px 20px 16px}
  .cp-fine{padding:16px 20px 20px 48px}
}
/* desktop compare: more room for the card so lines stay single */
@media(min-width:861px){
  .cp-in{grid-template-columns:minmax(0,7.2fr) minmax(0,4.8fr);gap:56px}
  .cp-cardhead,.cp-row{grid-template-columns:.8fr 1.12fr 1.08fr;gap:12px}
  .cp-row{padding:16px 24px}.cp-cardhead{padding:22px 24px 16px}
  .cp-row .t,.cp-row .u{font-size:13.5px;white-space:nowrap}
  .cp-row.last{grid-template-columns:.8fr 1.12fr 1.08fr}
}
.cp-fine{text-align:center}
@media(max-width:860px){.cp-fine{padding:16px 24px 20px}}
/* no notch on the phone frames — real footage will be recorded */
.wk-ph:after{display:none}
/* selected work on phones: four logo squares; tap one and its card opens under that row */
.wk-sq{display:none}
@media(max-width:1000px){
  .wk-board,.wk-hint{display:none}
  .wk-sq{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 -12px}
  .wk-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:96px;padding:14px;background:var(--g-card);border:1px solid rgba(21,21,15,.05);border-radius:18px;box-shadow:0 10px 26px -18px rgba(11,11,10,.18),0 1px 2px rgba(11,11,10,.03);cursor:pointer;font-family:var(--sans);color:var(--g-ink);text-align:left;transition:transform .35s var(--hc-ease),box-shadow .35s,background .35s,color .35s,border-color .35s}
  .wk-tile:active{transform:scale(.98)}
  .wk-tile .lk{display:flex;align-items:center;gap:9px;width:100%;justify-content:center}
  .wk-tile img{width:26px;height:26px;border-radius:7px;object-fit:contain;background:#fff;padding:3px;box-shadow:0 1px 2px rgba(21,21,15,.1);flex:none}
  .wk-tile b{font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.012em;line-height:1.05;min-width:0}
  .wk-tile span{display:none}
  .wk-tile i{display:none}
  .wk-tile.on{background:#15150F;color:#F4F3EE;border-color:#15150F;transform:translateY(-1px)}
  .wk-tile.on span{border-color:rgba(255,255,255,.18);color:rgba(244,243,238,.75)}
  .wk-lock .mcta{opacity:0!important;pointer-events:none!important}
  .home .wk-head{text-align:center;justify-items:center}.home .wk-h2{margin:0 auto}.home .wk-sub{margin:0 auto;max-width:34ch}
  .wk-tile i{display:none}
  .wk-card{--tint:#E2ECE3;background:#fff;overflow:hidden}
  .wk-sheet{position:fixed;inset:0;z-index:120;display:none}.wk-sheet.open{display:block}
  .wk-dim{position:absolute;inset:0;background:rgba(11,11,10,.55);opacity:0;transition:opacity .35s}
  .wk-pane{position:absolute;left:0;right:0;bottom:0;max-height:92dvh;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -20px 60px rgba(11,11,10,.3);transform:translateY(104%);transition:transform .45s var(--hc-ease);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
  .wk-sheet.in .wk-dim{opacity:1}.wk-sheet.in .wk-pane{transform:none}
  .wk-grip{flex:none;height:26px;display:flex;align-items:center;justify-content:center;touch-action:none}.wk-grip i{width:40px;height:4px;border-radius:2px;background:rgba(21,21,15,.18)}
  .wk-x{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(21,21,15,.06);color:#15150F;font-size:20px;line-height:1;cursor:pointer;z-index:2}
  .wk-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 12px 16px;overscroll-behavior:contain}
  .wk-lock,.wk-lock body{overflow:hidden}
  .wk-body .wk-cm{border-radius:18px}
  .wk-cm{position:relative;background:var(--tint);padding:9% 6% 10%;overflow:hidden}
  .wk-cm .wk-big{font-size:clamp(96px,28vw,150px);top:-.04em;right:.02em}
  .wk-cm .wk-win{width:86%}.wk-cm .wk-ph{width:32%}
  .wk-ct{padding:16px 18px 18px}
  .wk-ct .top{display:flex;align-items:center;gap:10px}
  .wk-ct .top img{width:28px;height:28px;border-radius:8px;object-fit:contain;background:#fff;padding:4px;box-shadow:0 1px 3px rgba(21,21,15,.08)}
  .wk-ct .top b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.012em;color:#15150F;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wk-go{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:500;font-size:13px;color:#15150F;text-decoration:none;border:1px solid rgba(21,21,15,.14);border-radius:999px;padding:6px 12px;background:#fff}
  .wk-go i{font-style:normal;color:var(--g-olive)}
  .wk-ct small{display:block;font-family:var(--sans);font-size:14.5px;line-height:1.45;color:var(--g-2);margin:6px 0 12px}
  .wk-ct .wk-res{font-size:20px;line-height:1.15;margin:0 0 12px}
  .wk-card .wk-pts{margin:0}
}
/* who we help: industry tiles on the gentle system */
.wh{position:relative;z-index:3;background:var(--g-bg);color:var(--g-ink);padding:40px 0 110px}
.wh-in{max-width:1180px;margin:0 auto;padding:0 24px}
.wh .g-h2{max-width:22ch;margin-bottom:40px}
.wh-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wh-grid a{display:flex;align-items:center;gap:14px;min-height:70px;padding:14px 18px;background:var(--g-card);border-radius:18px;border:1px solid rgba(21,21,15,.05);box-shadow:0 14px 34px -22px rgba(11,11,10,.2),0 1px 2px rgba(11,11,10,.03);text-decoration:none;color:var(--g-ink);transition:transform .35s var(--hc-ease),box-shadow .35s,border-color .35s}
.wh-grid a:hover{transform:translateY(-3px);box-shadow:0 26px 44px -24px rgba(11,11,10,.3),0 1px 2px rgba(11,11,10,.03);border-color:rgba(76,154,18,.35)}
.wh-grid svg{width:21px;height:21px;flex:none;stroke:var(--g-ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wh-grid li{min-width:0}.wh-grid a{min-width:0}.wh-grid span{display:block;min-width:0;flex:1}
.wh-grid b{display:block;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-grid small{display:block;font-family:var(--sans);font-size:12px;line-height:1.3;color:var(--g-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-grid i{margin-left:auto;font-style:normal;color:var(--g-olive);opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s}
.wh-grid a:hover i{opacity:1;transform:none}
.wh-fine{font-family:var(--sans);font-size:14.5px;color:var(--g-2);margin:26px 0 0}.wh-fine a{color:var(--g-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(76,154,18,.6)}
@media(max-width:1000px){.wh-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.wh{padding:24px 0 80px}.wh .g-h2{margin-bottom:28px}.wh-grid{grid-template-columns:1fr 1fr;gap:10px}.wh-grid a{min-height:60px;padding:11px 13px;gap:11px;border-radius:14px}.wh-grid svg{width:19px;height:19px}.wh-grid b{font-size:14px}.wh-grid small{font-size:11px;margin-top:2px}.wh-grid i{display:none}.wh-fine{font-size:14px;margin-top:20px}}

/* reviews: no card chrome — stars, the quote, the person. One per swipe on phones, three columns on desktop */
.rvw{position:relative;z-index:3;background:var(--g-bg);color:var(--g-ink);padding:24px 0 100px}
.rvw-in{max-width:1180px;margin:0 auto;padding:0 24px}
.rvw-head{text-align:center;max-width:640px;margin:0 auto 44px}.rvw-head .g-h2{margin:0 auto 14px}.rvw-head .g-p{margin:0 auto;max-width:36ch}
.rvw-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rvw-card{position:relative;display:flex;flex-direction:column;gap:18px;padding:8px 36px 8px 0}
.rvw-card+.rvw-card{padding-left:36px;border-left:1px solid var(--g-line)}
.rvw-top{display:flex;align-items:center;justify-content:space-between}
.rvw-stars{display:flex;gap:3px}.rvw-stars i{width:13px;height:13px;background:#E9A93A;clip-path:polygon(50% 2%,62% 36%,98% 38%,69% 60%,79% 96%,50% 75%,21% 96%,31% 60%,2% 38%,38% 36%)}
.rvw-src{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-3)}
.rvw-card blockquote{margin:0;font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.55;color:#2A2A26;flex:1}
.rvw-card blockquote:before{content:'“'}.rvw-card blockquote:after{content:'”'}
.rvw-who{display:flex;align-items:center;gap:12px;padding-top:4px}
.rvw-site{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#15150F;box-shadow:0 2px 8px -2px rgba(11,11,10,.35)}.rvw-site img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.rvw-p{min-width:0}.rvw-p b{display:block;font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--g-ink)}.rvw-p small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--g-3);margin-top:2px}
.rvw-tag{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#B5B5AE;border:1px dashed #D6D6D0;border-radius:999px;padding:3px 7px}
.rvw-dots{display:none}
@media(max-width:860px){
  .rvw{padding:8px 0 72px}.rvw-in{padding:0}.rvw-head{padding:0 24px;margin-bottom:22px}
  .rvw-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}.rvw-track::-webkit-scrollbar{display:none}
  .rvw-card,.rvw-card+.rvw-card{flex:0 0 100%;scroll-snap-align:start;padding:6px 32px 0;border:0;gap:16px;align-items:center;text-align:center}
  .rvw-top{flex-direction:column;gap:8px}
  .rvw-card blockquote{font-size:18px;line-height:1.5;color:#15150F;max-width:32ch;letter-spacing:-.005em}
  .rvw-who{flex-direction:column;gap:10px;padding-top:2px}.rvw-tag{margin:0}
  .rvw-dots{display:flex;justify-content:center;gap:6px;margin-top:22px}.rvw-dots i{width:6px;height:6px;border-radius:50%;background:rgba(21,21,15,.15);transition:background .3s,width .3s}.rvw-dots i.on{background:var(--g-olive);width:18px;border-radius:3px}
}

/* how it works: four numbered lines with a rail that fills as each step arrives */
.hw{position:relative;z-index:3;background:var(--g-bg);color:var(--g-ink);padding:24px 0 100px}
.hw-in{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.hw-head{position:sticky;top:110px}.hw-head .g-h2{max-width:14ch;margin-bottom:14px}.hw-head .g-p{margin:0;max-width:30ch}
.hw-steps{list-style:none;margin:0;padding:0;position:relative;--p:0px}
.hw-steps:before{content:'';position:absolute;left:19px;top:0;bottom:0;width:1px;background:var(--g-line)}
.hw-steps:after{content:'';position:absolute;left:19px;top:0;width:1px;height:var(--p);background:var(--g-olive);transition:height .9s var(--hc-ease)}
.hw-steps li{position:relative;display:grid;grid-template-columns:40px 1fr;gap:26px;padding:26px 0 30px;opacity:0;transform:translateY(12px);transition:opacity .7s var(--hc-ease),transform .7s var(--hc-ease)}
.hw-steps li.in,.hw-steps.all li{opacity:1;transform:none}
.hw-steps li+li{border-top:1px solid var(--g-line)}
.hw-steps i{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--g-bg);border:1px solid var(--g-line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--g-3);font-style:normal;transition:background .5s,color .5s,border-color .5s,transform .5s var(--hc-ease);transition-delay:.25s}
.hw-steps li.in i,.hw-steps.all i{background:var(--g-ink);color:var(--lime);border-color:var(--g-ink)}
.hw-steps b{display:block;font-family:var(--display);font-weight:600;font-size:24px;line-height:1.12;letter-spacing:-.02em;color:var(--g-ink);margin:8px 0 8px}
.hw-steps p{margin:0;font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--g-2);max-width:44ch}
.hw-tag{display:inline-block;vertical-align:middle;margin:-4px 0 0 10px;padding:4px 9px;border-radius:999px;background:var(--lime);color:#15150F;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1) .35s,opacity .3s .35s}
.hw-steps li.in .hw-tag,.hw-steps.all .hw-tag{transform:none;opacity:1}
@media(max-width:1000px){.hw-in{grid-template-columns:1fr;gap:28px}.hw-head{position:static}}
@media(max-width:860px){.hw{padding:8px 0 72px}.hw-steps:before,.hw-steps:after{left:15px}.hw-steps li{grid-template-columns:32px 1fr;gap:18px;padding:20px 0 24px}.hw-steps i{width:32px;height:32px;font-size:11px}.hw-steps b{font-size:20px;margin:5px 0 6px}.hw-steps p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.hw-steps li{opacity:1;transform:none;transition:none}.hw-steps:after{transition:none}.hw-tag{opacity:1;transform:none;transition:none}}

/* contact: dark inset panel, white form card on top, then the talk block. Same 12px/18px language as the hero */
.home .closing{text-align:left;padding:0;margin:0 18px 18px;border-radius:32px;overflow:hidden;background:radial-gradient(130% 100% at 22% 100%,#1A2018 0%,#0E110E 46%,#0B0B0A 100%)}
.home .closing .container{padding:72px 56px}
.home .cxC-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:start;margin-top:0}
.home .cxC-panel{background:#fff;color:#15150F;border:0;border-radius:24px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.home .auc-body{padding:34px 34px 30px}
.home .cxC-phead{margin-bottom:26px}
.cxC-mark{display:inline-flex;align-items:center;gap:2px;font-family:'Space Grotesk',var(--sans);font-weight:600;font-size:18px;letter-spacing:-.02em;color:#15150F;margin-bottom:16px}
.cxC-mark .lt,.cxC-mark .sl,.cxC-mark .gt{display:inline-block;width:.42em;height:.7em;background:var(--lime);clip-path:polygon(100% 0,0 50%,100% 100%,78% 100%,0 50%,78% 0)}
.cxC-mark .lt{clip-path:polygon(100% 0,58% 0,0 50%,58% 100%,100% 100%,42% 50%);margin-right:.06em}
.cxC-mark .sl{width:.36em;clip-path:polygon(70% 0,100% 0,30% 100%,0 100%);margin-left:.08em}
.cxC-mark .gt{clip-path:polygon(0 0,42% 0,100% 50%,42% 100%,0 100%,58% 50%);margin-left:.04em}
.home .cxC-phead h3{font-family:var(--sans);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.025em;margin:0;color:#15150F}
.home .cxC-phead h3 em{font-style:normal;color:#8A8A84}
.home .cxC-form{display:grid;gap:18px}
.home .gfield label{display:block;font-family:var(--sans);font-weight:500;font-size:14.5px;color:#15150F;margin-bottom:8px}
.home .gfield label i{font-style:normal;color:#15150F}.home .gfield label .opt{font-weight:400;color:#8A8A84;margin-left:6px;font-size:13px}
.home .gfield input,.home .gfield textarea{background:#F4F4F2;border:1px solid transparent;border-radius:14px;color:#15150F;font-size:16px;padding:16px 18px;height:auto;box-shadow:none}
.home .gfield input::placeholder,.home .gfield textarea::placeholder{color:#A3A39D}
.home .gfield input:focus,.home .gfield textarea:focus{background:#fff;border-color:#15150F;box-shadow:0 0 0 4px rgba(198,242,78,.35)}
.home .gfield textarea{min-height:132px;resize:vertical}
.home .cf-consent{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:14px;color:#3A3A35;cursor:pointer;margin:-4px 0 0}
.home .cf-consent .cf-check{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(21,21,15,.25);background:#fff;flex:none;position:relative}
.home .cf-consent input:checked+.cf-check{background:#15150F;border-color:#15150F}
.home .cf-consent input:checked+.cf-check:after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--lime);border-width:0 2px 2px 0;transform:rotate(45deg)}
.home .cf-scanote{font-family:var(--sans);font-size:12.5px;color:#8A8A84;margin:-8px 0 0}.home .cf-scanote a{color:#15150F}
.home .auc-foot{margin-top:4px}
.home .auc-submit{width:100%;justify-content:center;height:56px;border-radius:999px;background:#15150F;color:#F4F3EE;font-family:var(--sans);font-weight:600;font-size:16px;border:0;box-shadow:none}
.home .auc-submit i{color:var(--lime)}
.home .cf-fine{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:#8A8A84;margin:2px 0 0}.home .cf-fine a{color:#15150F;text-decoration:underline;text-underline-offset:2px}
.home .cxC-lead{padding-top:10px}
.home .closing .cxC-h{font-family:var(--sans);font-weight:600;font-size:clamp(40px,4.6vw,64px);letter-spacing:-.03em;line-height:1;margin:0 0 16px;color:#F4F3EE}
.home .closing .cxC-p{font-size:17px;color:rgba(244,243,238,.6);max-width:38ch;margin:0 0 30px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.cxC-points{display:grid;gap:26px;margin-bottom:34px}
.cxC-pt svg{width:22px;height:22px;stroke:#F4F3EE;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.cxC-pt b{display:block;font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.015em;color:#F4F3EE;margin-bottom:6px}
.cxC-pt p{font-family:var(--sans);font-size:15px;line-height:1.55;color:rgba(244,243,238,.6);margin:0;max-width:36ch}
.home .cxC-direct{font-family:var(--sans);font-size:14px;color:rgba(244,243,238,.55);margin:0}.home .cxC-direct a{color:#F4F3EE;text-decoration:none}
@media(max-width:1000px){.home .cxC-grid{grid-template-columns:1fr;gap:44px}.home .closing .container{padding:56px 32px}}
@media(max-width:860px){
  .home .closing{margin:0 12px 12px;border-radius:18px}.home .closing .container{padding:18px 12px 40px}
  .home .cxC-panel{border-radius:18px}.home .auc-body{padding:26px 20px 22px}
  .home .cxC-phead h3{font-size:26px}
  .home .cxC-form{gap:16px}.home .gfield input,.home .gfield textarea{padding:15px 16px;font-size:16px}
  .home .cxC-lead{padding:10px 8px 0}
  .home .closing .cxC-h{font-size:44px}
  .cxC-points{gap:22px;margin-bottom:26px}.cxC-pt b{font-size:18px}
}
.home .gfield label{font-family:var(--sans);text-transform:none;letter-spacing:-.005em;font-size:14.5px}
.home .cf-consent-txt{color:#3A3A35}.home .cf-consent-txt b{color:#15150F;font-weight:600}
.home .cf-consent{background:#F4F4F2;border-radius:14px;padding:14px 16px}
.home .cf-consent .cf-check{background:#fff}
@media(max-width:860px){.home .closing .container{padding:40px 12px 44px}}
@media(min-width:861px){.home .closing .container{padding:80px 56px 72px}}
/* how it works as a dark inset panel — the offer gets the weight */
.home .hw{margin:0 18px;padding:0;border-radius:32px;overflow:hidden;color:#F4F3EE;background:radial-gradient(130% 100% at 78% 100%,#1A2018 0%,#0E110E 46%,#0B0B0A 100%)}
.home .hw-in{padding:72px 56px 64px}
.home .hw .g-eyebrow{color:var(--lime)}
.home .hw .g-h2{color:#F4F3EE}.home .hw .g-h2 em{color:rgba(244,243,238,.45)}
.home .hw .g-p{color:rgba(244,243,238,.6)}
.home .hw-steps:before{background:rgba(255,255,255,.1)}.home .hw-steps:after{background:var(--lime)}
.home .hw-steps li+li{border-top-color:rgba(255,255,255,.08)}
.home .hw-steps i{background:#0F120F;border-color:rgba(255,255,255,.14);color:rgba(244,243,238,.5)}
.home .hw-steps li.in i,.home .hw-steps.all i{background:var(--lime);color:#0B0B0A;border-color:var(--lime)}
.home .hw-steps b{color:#F4F3EE}.home .hw-steps p{color:rgba(244,243,238,.6)}
.home .hw-tag{background:var(--lime);color:#0B0B0A}
.home .hw+.faq-sec{padding-top:96px}
@media(max-width:1000px){.home .hw-in{padding:56px 32px 48px}}
@media(max-width:860px){.home .hw{margin:0 12px;border-radius:18px}.home .hw-in{padding:36px 20px 30px}.home .hw+.faq-sec{padding-top:64px}}
/* the talk block under the phone form: smaller */
@media(max-width:860px){
  .home .cxC-lead{padding:6px 6px 0}
  .home .closing .cxC-h{font-size:32px;margin-bottom:10px}
  .home .closing .cxC-p{font-size:15px;margin-bottom:20px;padding-bottom:20px}
  .cxC-points{gap:16px;margin-bottom:20px}
  .cxC-pt svg{width:18px;height:18px;margin-bottom:8px}.cxC-pt b{font-size:16px;margin-bottom:4px}.cxC-pt p{font-size:14px;line-height:1.5}
  .home .cxC-direct{font-size:13.5px}
}

/* form rhythm: one shape, repeated. label · 56px box · 20px gap */
.home .cxC-phead{margin-bottom:34px}.home .cxC-form{gap:20px}
.home .gfield label{font-size:15px;margin-bottom:9px;font-weight:500}
.home .gfield input,.home .gfield textarea{height:56px;padding:0 18px;border-radius:16px;font-size:16px;line-height:56px}
.home .gfield textarea{height:auto;min-height:150px;line-height:1.5;padding:16px 18px}
.home .auc-foot{margin-top:6px}.home .cf-fine{text-align:center;margin-top:6px}
@media(max-width:860px){.home .auc-body{padding:30px 22px 26px}.home .cxC-phead{margin-bottom:30px}.home .cxC-form{gap:18px}}

/* ===== mobile menu v3: the hero panel's language. rows with a purpose, the offer, direct contact ===== */
.mobile-menu{background:#0B0B0A;padding:0;display:block;justify-content:flex-start;transform:none}
.mobile-menu.open{transform:none}
.mm-panel{position:absolute;left:12px;right:12px;top:78px;bottom:12px;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;padding:10px 18px 18px;background:radial-gradient(120% 90% at 20% 100%,#1B2219 0%,#0F120F 48%,#0B0B0A 100%);transform:translateY(14px) scale(.985);opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s}
.mobile-menu.open .mm-panel{transform:none;opacity:1}
.mm-panel:before{content:'';position:absolute;left:-18%;bottom:-24%;width:70%;padding-top:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(198,242,78,.16),rgba(198,242,78,0));filter:blur(40px);animation:mhBreath 9s ease-in-out infinite alternate;pointer-events:none}
.mm-panel>*{position:relative;z-index:1}
.mm-links{display:flex;flex-direction:column;border-top:0;flex:1;justify-content:center;gap:0}
.mm-links a{--d:0s;display:flex;align-items:center;gap:14px;padding:18px 2px;border-bottom:1px solid rgba(244,243,238,.08);text-decoration:none;color:#F4F3EE;opacity:0;transform:translateY(14px);transition:opacity .5s ease var(--d),transform .6s cubic-bezier(.16,1,.3,1) var(--d)}
.mm-links a:first-child{border-top:1px solid rgba(244,243,238,.08)}
.mobile-menu.open .mm-links a{opacity:1;transform:none}
.mm-links a:nth-child(1){--d:.08s}.mm-links a:nth-child(2){--d:.14s}.mm-links a:nth-child(3){--d:.2s}.mm-links a:nth-child(4){--d:.26s}
.mm-links .mm-t{display:block;flex:1;min-width:0;overflow:visible;padding:0}
.mm-links b{display:block;font-family:var(--display);font-weight:600;font-size:30px;line-height:1;letter-spacing:-.025em;color:#F4F3EE;transition:color .3s}
.mm-links small{display:block;font-family:var(--sans);font-size:13px;color:rgba(244,243,238,.45);margin-top:6px}
.mm-go{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(244,243,238,.16);position:relative;transition:background .3s,border-color .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.mm-go:before,.mm-go:after{content:'';position:absolute;background:#F4F3EE;transition:background .3s}
.mm-go:before{left:12px;top:50%;width:14px;height:1.5px;transform:translateY(-50%)}
.mm-go:after{right:11px;top:50%;width:7px;height:7px;border-top:1.5px solid #F4F3EE;border-right:1.5px solid #F4F3EE;background:none;transform:translateY(-50%) rotate(45deg)}
.mm-links a:active .mm-go,.mm-links a.cur .mm-go{background:var(--lime);border-color:var(--lime)}
.mm-links a:active .mm-go:before,.mm-links a.cur .mm-go:before{background:#0B0B0A}
.mm-links a:active .mm-go:after,.mm-links a.cur .mm-go:after{border-color:#0B0B0A}
.mm-links a.cur b{color:var(--lime)}
.mm-links a:active .mm-go{transform:translateX(3px)}
.mm-card{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin:18px 0 0;padding:16px 16px 16px 18px;border-radius:16px;background:rgba(11,11,10,.55);border:1px solid rgba(198,242,78,.35);box-shadow:0 0 0 1px rgba(198,242,78,.08),0 24px 60px -30px rgba(198,242,78,.35);text-decoration:none;color:#F4F3EE;opacity:0;transform:translateY(12px);transition:opacity .5s ease .34s,transform .6s cubic-bezier(.16,1,.3,1) .34s}
.mobile-menu.open .mm-card{opacity:1;transform:none}
.mm-ct b{display:block;font-family:var(--sans);font-weight:600;font-size:15.5px;letter-spacing:-.01em;line-height:1.2}
.mm-ct small{display:block;font-family:var(--sans);font-size:12.5px;line-height:1.4;color:rgba(244,243,238,.55);margin-top:4px}
.mm-btn{flex:none;display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:999px;background:#F4F3EE;color:#0B0B0A;font-family:var(--sans);font-weight:600;font-size:13.5px;white-space:nowrap}
.mm-btn i{width:8px;height:8px;border-radius:50%;background:var(--lime)}
.mm-foot{position:static;margin-top:16px;padding-top:14px;border-top:1px solid rgba(244,243,238,.08);display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity .5s ease .42s;font-family:var(--sans);font-size:13px;color:rgba(244,243,238,.5);text-align:left;letter-spacing:0;text-transform:none}
.mobile-menu.open .mm-foot{opacity:1}
.mm-direct a{color:#F4F3EE;text-decoration:none}.mm-direct span{margin:0 8px;color:rgba(244,243,238,.3)}
.mm-avail{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,243,238,.45)}
.mm-avail i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
@media(max-height:700px){.mm-links b{font-size:26px}.mm-links a{padding:14px 2px}.mm-ct small{display:none}}
@media(max-width:360px){.mm-btn{padding:11px 12px;font-size:13px}.mm-ct b{font-size:14.5px}}

/* ===== footer v3: two link columns, hello, the city index folded away, the monument, an ink bar ===== */
.ft{position:relative;z-index:2;background:var(--g-bg);color:var(--g-ink);margin-top:0;padding-top:72px;overflow:hidden}
.ft-in{max-width:1180px;margin:0 auto;padding:0 24px}
.ft-cols{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:40px}
.ft-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-3);margin:0 0 16px;font-weight:500}
.ft-col a{display:block;font-family:var(--sans);font-size:16px;line-height:1.3;color:var(--g-ink);text-decoration:none;padding:7px 0;transition:color .25s,transform .35s var(--hc-ease)}
.ft-col a:hover{color:var(--g-olive);transform:translateX(3px)}
.ft-col a.ft-hi{color:var(--g-olive);font-weight:500}
.ft-say a{display:inline-flex;align-items:center;gap:6px;font-weight:500}.ft-say a i{font-style:normal;color:var(--g-olive)}
.ft-avail{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-3)}
.ft-avail i{width:6px;height:6px;border-radius:50%;background:#2F7A08;box-shadow:0 0 0 3px rgba(76,154,18,.18)}
.ft-gaz{margin-top:44px;border-top:1px solid var(--g-line);border-bottom:1px solid var(--g-line)}
.ft-gaz summary{list-style:none;display:flex;align-items:center;gap:10px;padding:18px 0;cursor:pointer;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--g-ink)}
.ft-gaz summary::-webkit-details-marker{display:none}
.ft-gaz summary em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--g-3)}
.ft-gaz summary i{margin-left:auto;width:16px;height:16px;border-radius:50%;border:1px solid rgba(21,21,15,.25);position:relative;transition:transform .35s var(--hc-ease)}
.ft-gaz summary i:before,.ft-gaz summary i:after{content:'';position:absolute;left:50%;top:50%;width:8px;height:1.5px;background:var(--g-ink);transform:translate(-50%,-50%)}
.ft-gaz summary i:after{transform:translate(-50%,-50%) rotate(90deg)}
.ft-gaz[open] summary i{transform:rotate(45deg)}
.ft-gaz .foot-gaz{column-count:4;column-gap:32px;padding:6px 0 24px}
.ft-gaz .foot-state{break-inside:avoid;margin-bottom:18px}
.ft-gaz .foot-code{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--g-olive);margin-bottom:6px}
.ft-gaz ul{list-style:none;margin:0;padding:0}.ft-gaz li a{font-family:var(--sans);font-size:14px;color:var(--g-2);text-decoration:none;line-height:1.9}.ft-gaz li a:hover{color:var(--g-ink)}
.ft-word{display:flex;justify-content:center;align-items:center;gap:.02em;margin:56px auto -.16em;padding:0 8px;font-family:'Space Grotesk',var(--sans);font-weight:600;font-size:clamp(88px,15.6vw,230px);line-height:.9;letter-spacing:-.045em;color:#15150F;text-decoration:none;white-space:nowrap;position:relative;z-index:1}
.ft-word .wl-w{display:inline-block}
.ft-word .wl-b{height:.64em;width:auto;fill:var(--lime);display:inline-block;flex:none}
.ft-word .wl-lt{margin-right:.02em}.ft-word .wl-sl{height:.78em;margin-left:.03em}.ft-word .wl-gt{margin-left:.01em}
.ft-bar{position:relative;z-index:2;background:#0B0B0A;color:rgba(244,243,238,.55);border-radius:18px 18px 0 0;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--sans);font-size:13.5px}
.ft-bar b{color:var(--lime);font-weight:500}
.ft-bar nav{display:flex;gap:18px}.ft-bar nav a{color:#F4F3EE;text-decoration:none}
@media(max-width:860px){
  .ft{padding-top:56px}
  .ft-cols{grid-template-columns:1fr 1fr;gap:28px 16px}
  .ft-say{grid-column:1/-1;padding-top:8px}
  .ft-col a{font-size:15.5px;padding:6px 0}
  .ft-gaz{margin-top:32px}.ft-gaz .foot-gaz{column-count:2;column-gap:20px}
  .ft-word{margin-top:40px;font-size:24vw}
  .ft-bar{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 24px 28px;border-radius:18px 18px 0 0;margin:0}
}

/* burger → X: both lines pivot on the same centre, so the cross is symmetrical */
.nav-burger span{top:50%;bottom:auto;margin-top:-.8px;transform-origin:50% 50%}
.nav-burger span:nth-child(1){transform:translateY(-3.5px)}.nav-burger span:nth-child(2){transform:translateY(3.5px)}
.nav-burger.open span:nth-child(1){transform:rotate(45deg)}.nav-burger.open span:nth-child(2){transform:rotate(-45deg)}
/* menu v3.1: real viewport height, room at the bottom, stacked offer card */
.mobile-menu{height:100dvh}
.mm-panel{bottom:max(12px,env(safe-area-inset-bottom,12px));padding:6px 18px 20px}
.mm-links a{padding:16px 2px}
.mm-links b{font-size:28px}
.mm-card{grid-template-columns:1fr;gap:12px;padding:16px 16px 14px}
.mm-btn{justify-content:center;width:100%;padding:13px 14px;font-size:14px}
.mm-foot{margin-top:14px;padding-top:14px;gap:10px}
.mm-direct a{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.mm-direct a:after{content:'↗';color:var(--lime);font-size:12px}
@media(max-height:760px){.mm-ct small{display:none}.mm-links b{font-size:25px}.mm-links a{padding:13px 2px}.mm-links small{font-size:12px;margin-top:4px}}
/* footer monument: fit the width, blades intact */
.ft-word{font-size:clamp(64px,13.2vw,220px);margin:56px auto -.12em}
@media(max-width:860px){.ft-word{font-size:19vw;margin:40px auto -.1em}.ft-col a.ft-hi{white-space:nowrap}.ft-cols{gap:28px 12px}}
/* footer on phones: hello, the city line and the bar centred; less air above */
@media(max-width:860px){
  .ft{padding-top:36px}
  .ft-say{text-align:center;padding-top:14px;margin-top:6px;border-top:1px solid var(--g-line)}
  .ft-say h4{margin-top:14px}
  .ft-say a{justify-content:center}
  .ft-avail{justify-content:center;margin-top:12px}
  .ft-gaz summary{justify-content:center;gap:8px;padding:16px 0}
  .ft-gaz summary i{margin-left:4px}
  .ft-word{font-size:18.4vw;margin:36px auto -.1em}
  .ft-bar{align-items:center;text-align:center;gap:10px;padding:22px 24px 30px}
  .ft-bar nav{justify-content:center;gap:22px}
}
.ft-word{margin:56px auto 28px}
@media(max-width:860px){.ft-word{margin:32px auto 26px;font-size:18vw}.ft-avail{white-space:nowrap}}

/* hero copy cut: one stance line, card = title + button on one row */
.mh-stance{max-width:none}
@media(max-width:1080px){
  .mh-card{grid-template-columns:1fr auto;grid-template-areas:'t b';gap:0 14px;align-items:center;padding:14px 12px 14px 16px}
  .mh-card b{grid-area:t;margin:0;white-space:normal;font-size:16px;line-height:1.2}
  .mh-card .mh-btn{grid-area:b}
  .mh-stance{font-size:16px;margin-bottom:16px}
}
@media(max-width:1080px){.mh-stance{font-size:15px;text-wrap:balance;max-width:30ch;margin-bottom:14px}}
/* the city index inside the footer disclosure must be visible on phones too */
.ft-gaz[open] .foot-gaz{display:block!important}
.ft-gaz .foot-gaz a{padding-left:0;color:var(--g-2);font-size:14px;line-height:1.9}.ft-gaz .foot-gaz a::before{display:none}

/* hero card: title + one short sub, button beside */
@media(max-width:1080px){
  .mh-card{grid-template-areas:'t b' 's b';gap:2px 14px;padding:14px 12px 14px 16px}
  .mh-card b{grid-area:t;font-size:16px;margin:0}
  .mh-card small{grid-area:s;display:block;font-size:12.5px;line-height:1.4;margin:0;color:rgba(244,243,238,.55)}
  .mh-card .mh-btn{grid-area:b;align-self:center}
}

/* full-height landing hero on phones: the panel fills the first screen, the card sits at its foot */
@media(max-width:1080px){
  .mh-panel{min-height:calc(100dvh - 90px);display:flex;flex-direction:column}
  .mh-slot{flex:none}
  .mh-stance{font-size:15.5px;max-width:none;text-wrap:pretty;margin:auto 0 16px;padding-top:18px}
  .mh-stance b{display:inline}
  .mh-card{margin-top:0}
}
@media(max-width:1080px){
  .mh-slot,.mh-slot.grid{flex:1;height:auto;min-height:calc((100vw - 52px)*880/1280 + 2px)}
  .mh-caps{align-content:center;row-gap:22px}
  .mh-view{top:50%;transform:translateY(-50%)}
  .mh-stance{margin:0 0 16px;padding-top:6px}
}

/* how it works: the rail follows the scroll, a lit tip rides it, numbers light as it passes */
.hw-steps:after{transition:none}
.hw-steps.live:after{box-shadow:0 0 12px rgba(198,242,78,.35)}
.hw-steps .hw-tip{content:'';position:absolute;left:19px;top:var(--p);width:9px;height:9px;margin:-4.5px 0 0 -4px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(198,242,78,.18),0 0 18px rgba(198,242,78,.7);opacity:0;transition:opacity .3s}
.hw-steps.live .hw-tip{opacity:1}
.hw-steps li{opacity:.38;transform:none;transition:opacity .45s ease}
.hw-steps li.in,.hw-steps.all li{opacity:1}
.hw-steps i{transition:background .35s,color .35s,border-color .35s,transform .45s cubic-bezier(.34,1.56,.64,1);transition-delay:0s}
.hw-steps li.in i{transform:scale(1.08)}
.hw-tag{transition-delay:.05s,.05s}
@media(max-width:860px){.hw-steps .hw-tip{left:15px}}
.hw-steps .hw-tip{z-index:0}.hw-steps i{z-index:2}

/* floating CTA arrow: a drawn arrow, dead centre in its disc */
.mcta-go{display:flex;align-items:center;justify-content:center;font-size:0;line-height:0;padding:0}
.mcta-go svg{width:20px;height:20px;display:block;stroke:#0B0B0A;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--hc-ease)}
.mcta:active .mcta-go svg{transform:translateX(3px)}
@media(max-width:1080px){.mcta{padding:0 8px 0 22px}.mcta-go{width:42px;height:42px;border-radius:50%;background:var(--lime);flex:none}}
/* how it works numbers: small mono index, no big disc; the rail passes through a dot */
.hw-steps li{grid-template-columns:40px 1fr}
.hw-steps i{width:auto;height:auto;border:0;background:none;border-radius:0;display:block;font-size:11.5px;letter-spacing:.1em;color:var(--g-3);padding:8px 0 0 0;position:relative;transform:none!important}
.home .hw-steps i{background:none;border:0;color:rgba(244,243,238,.4)}
.hw-steps i:before{content:'';position:absolute;left:19px;top:15px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#0F120F;border:1px solid rgba(255,255,255,.22);transition:background .3s,border-color .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.hw-steps li.in i,.hw-steps.all i,.home .hw-steps li.in i{color:var(--lime);background:none;border:0}
.hw-steps li.in i:before,.hw-steps.all i:before{background:var(--lime);border-color:var(--lime);transform:scale(1.3)}
.hw-steps i{text-indent:0;padding-left:0;text-align:right;width:40px}
.hw-steps i span{display:none}
.hw-steps:before,.hw-steps:after,.hw-steps .hw-tip{left:19px}
@media(max-width:860px){.hw-steps li{grid-template-columns:34px 1fr;gap:16px}.hw-steps i{width:34px;font-size:11px}.hw-steps i:before{left:15px}.hw-steps:before,.hw-steps:after,.hw-steps .hw-tip{left:15px}}

/* how it works index: dot on the rail, digits to its right */
.hw-steps li{grid-template-columns:60px 1fr;gap:18px}
.hw-steps i{width:60px;text-align:left;padding:8px 0 0 34px}
.hw-steps i:before{left:19px;margin-left:-3.5px}
@media(max-width:860px){.hw-steps li{grid-template-columns:50px 1fr;gap:12px}.hw-steps i{width:50px;padding-left:30px}.hw-steps i:before{left:15px}}
/* one rhythm on phones: section heads centred */
@media(max-width:860px){
  .cp-pitch{text-align:center}.cp-pitch .g-btn{margin:0 auto}
  .wh-in{text-align:center}.wh .g-h2{margin-left:auto;margin-right:auto}.wh-grid{text-align:left}.wh-fine{text-align:center}
  .hw-head{text-align:center}.hw-head .g-h2,.hw-head .g-p{margin-left:auto;margin-right:auto}
}
/* stable hero height: svh ignores the collapsing browser bar, so the panel never grows on scroll */
@media(max-width:1080px){.mh-panel{min-height:calc(100svh - 90px)}}
.hw-tag{font-size:9px;padding:3px 7px;margin:-3px 0 0 8px;letter-spacing:.08em}

@media(min-width:1081px){
.mh-caps{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.mh-caps li{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-size:15.5px;font-weight:500;color:#F4F3EE}
.mh-caps i{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(198,242,78,.08);border:1px solid rgba(198,242,78,.14);display:grid;place-items:center}
.mh-caps svg{width:18px;height:18px;fill:none;stroke:#C6F24E;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mh-card{padding:20px 20px 20px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.mh-card b{display:block;font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.2;margin-bottom:6px;color:#F4F3EE;letter-spacing:-.01em;white-space:nowrap}
.mh-card small{display:block;font-family:var(--sans);font-size:14px;line-height:1.45;color:rgba(244,243,238,.55);margin-bottom:14px}
.mh-btn{display:inline-flex;align-items:center;gap:10px;background:#F4F3EE;color:#0B0B0A;font-family:var(--sans);font-weight:600;font-size:15px;padding:11px 18px;border-radius:999px;text-decoration:none}
.mh-btn i{width:9px;height:9px;border-radius:50%;background:#C6F24E}
.mh-copy{margin:26px 0 0;font-family:var(--sans);font-size:12.5px;color:rgba(244,243,238,.4)}
.mh-stage{position:relative;aspect-ratio:1280/880;margin:0 0 22px;border-radius:14px;overflow:hidden;transition:max-height .7s var(--hc-ease),opacity .5s,margin .7s var(--hc-ease),transform .7s var(--hc-ease);max-height:400px}
.mh-stage.gone{max-height:0;margin-bottom:0;opacity:0;transform:scale(.96)}
.mh-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .4s}
.mh-caps{opacity:0;transform:translateY(10px);max-height:0;overflow:hidden;margin-bottom:0;transition:opacity .6s var(--hc-ease) .15s,transform .6s var(--hc-ease) .15s,max-height .7s var(--hc-ease),margin .7s var(--hc-ease)}
.mh-caps li{display:block}
.mh-caps button{display:flex;align-items:center;gap:12px;width:100%;padding:0;background:none;border:0;font:inherit;color:#F4F3EE;font-family:var(--sans);font-size:15px;font-weight:500;text-align:left;cursor:pointer}
.mh-caps button i{transition:background .3s,border-color .3s}
.mh-caps button[aria-pressed="true"] i{background:var(--lime);border-color:var(--lime)}
.mh-eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:rgba(244,243,238,.45);margin:0 0 12px}
.mh-stage{margin-bottom:18px}
.mh-card{margin-top:auto}
.mh-copy{margin-top:16px}
.mh-card{margin-top:0}
.mh-caps.off{max-height:0!important;margin-bottom:0!important;opacity:0!important;transform:translateY(-6px)!important}
.mh-stage{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:1280/880;margin:0;max-height:none;transition:opacity .5s,transform .6s var(--hc-ease)}
.mh-stage.gone{max-height:none;margin:0;opacity:0;transform:translateY(-50%) scale(.96);pointer-events:none}
.mh-caps{position:absolute;inset:0;margin:0!important;max-height:none!important;overflow:visible;display:grid;grid-template-columns:1fr 1fr;align-content:space-between;gap:0 12px;transition:opacity .5s var(--hc-ease) .1s,transform .5s var(--hc-ease) .1s;pointer-events:none}
.mh-caps.in,.mh-caps.now{pointer-events:auto}
.mh-caps.off{opacity:0!important;transform:translateY(-6px)!important;pointer-events:none}
.mh-card{padding:22px 20px;border-radius:22px;background:linear-gradient(160deg,rgba(198,242,78,.08),rgba(255,255,255,.03) 45%,rgba(255,255,255,.02));border:1px solid rgba(198,242,78,.22);box-shadow:0 0 0 1px rgba(198,242,78,.05),0 24px 60px -30px rgba(198,242,78,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.mh-card b{font-size:20px}
.mh-card small{font-size:14.5px;margin-bottom:16px}
.mh-eyebrow{margin-bottom:14px;font-size:12px}
.mh-caps button{font-size:15.5px;gap:14px}
.mh-card{padding:24px 22px}
.mh-card b{font-size:21px;margin-bottom:8px}
.mh-card small{font-size:15px;line-height:1.5;margin-bottom:18px}
.mh-btn{padding:13px 20px;font-size:15.5px}
.mh-copy{margin-top:22px;font-size:13px}
.mh-stage{top:0;transform:none}
.mh-stage.gone{transform:scale(.96)}
.mh-caps i{width:52px;height:52px;border-radius:14px}
.mh-caps svg{width:20px;height:20px}
.mh-caps button{font-size:16px;gap:14px}
.mh-caps{align-content:start;gap:20px 12px}
.mh-eyebrow{font-size:11.5px;margin-bottom:12px}
.mh-caps i{width:48px;height:48px;border-radius:13px}
.mh-caps button{font-size:15px;gap:13px}
.mh-caps{gap:18px 12px}
.mh-card{padding:22px 20px}
.mh-btn{font-size:15px;padding:12px 18px}
.mh-copy{font-size:12.5px}
.mh-stage{left:12%;right:12%;top:0}
.mh-caps{grid-template-columns:1fr 1fr 1fr;gap:16px 10px;align-content:start}
.mh-caps i{width:36px;height:36px;border-radius:10px}
.mh-caps button{font-size:13px;gap:8px;font-weight:500;letter-spacing:-.005em}
.mh-eyebrow{font-size:11px;margin-bottom:10px}
.mh-stage{left:0;right:0}
.mh-caps{grid-template-columns:1fr 1fr 1fr;gap:14px 8px;align-content:start}
.mh-caps i{width:34px;height:34px;border-radius:10px}
.mh-caps button{font-size:12.5px;gap:8px}
.mh-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 14px 14px 16px;border-radius:18px}
.mh-card b{font-size:15.5px;margin-bottom:3px;white-space:normal}
.mh-card small{font-size:12.5px;line-height:1.4;margin:0}
.mh-btn{font-size:14px;padding:11px 14px;gap:8px;white-space:nowrap}
.mh-copy{font-size:11.5px;margin-top:14px}
.mh-card{grid-template-columns:1fr auto;grid-template-areas:'t t' 's b';gap:6px 14px;align-items:center;padding:16px 14px 14px 16px}
.mh-card b{grid-area:t;margin-bottom:2px}
.mh-card small{grid-area:s}
.mh-btn{grid-area:b}
.mh-caps i{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:11px}
.mh-caps svg{stroke:rgba(244,243,238,.92);stroke-width:1.75;width:16px;height:16px}
.mh-caps button[aria-pressed="true"] i{background:#F4F3EE;border-color:#F4F3EE}
.mh-caps{grid-template-columns:auto auto auto;justify-content:space-between;column-gap:10px}
.mh-stage{left:3%;right:3%}
.mh-stage{display:grid;place-items:center;overflow:visible}
.mh-lock{width:92%;height:auto;overflow:visible;transition:transform .7s var(--hc-ease),opacity .5s var(--hc-ease)}
.mh-stage.gone .mh-lock{transform:translateY(-30px) scale(.86);opacity:0}
.mh-lock .bl{fill:none;stroke:#C6F24E;stroke-width:5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:2000;stroke-dashoffset:2000;transition:fill .3s}
.mh-lock .bl.done{fill:#C6F24E;stroke-width:0}
.mh-lock text{font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;font-weight:600;font-size:118px;letter-spacing:-.03em;fill:#F4F3EE}
.mh-lock .pen{fill:#C6F24E;filter:drop-shadow(0 0 7px rgba(198,242,78,.95));opacity:0;transition:opacity .25s}
.mh-lock.pulse .bl{filter:drop-shadow(0 0 14px rgba(198,242,78,.9))}
.mh-caps li{opacity:0;transform:translateY(14px) scale(.92);transition:opacity .5s var(--hc-ease),transform .6s var(--hc-ease);transition-delay:calc(var(--i,0)*55ms)}
.mh-caps.in li,.mh-caps.now li{opacity:1;transform:none}
.mh-caps svg *{stroke-dasharray:1;stroke-dashoffset:1}
.mh-caps.now svg *{stroke-dashoffset:0}
.mh-caps.in svg *{animation:mhDash .8s var(--hc-ease) forwards;animation-delay:calc(var(--i,0)*55ms + .18s)}
.mh-lock{transform:scale(1.07);transition:transform 2.4s cubic-bezier(.2,.7,.2,1),opacity .5s var(--hc-ease)}
.mh-lock.set{transform:scale(1)}
.mh-stage.gone .mh-lock{transform:translateY(-22px) scale(.84);opacity:0;transition:transform .6s var(--hc-ease),opacity .45s var(--hc-ease)}
.mh-lock .bl{stroke-dashoffset:2010}
.mh-lock .pen{filter:drop-shadow(0 0 5px rgba(198,242,78,.8))}
.mh-lock .sweep{mix-blend-mode:screen;opacity:0}
.mh-lock .sweep.go{opacity:1;animation:mhSweep .9s cubic-bezier(.4,0,.2,1) forwards}
.mh-caps li{transform:translate(var(--dx,0px),var(--dy,14px)) scale(.6);transition:opacity .55s var(--hc-ease),transform .75s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*45ms)}
.mh-caps.in li,.mh-caps.now li{transform:none}
.mh-caps{justify-content:space-evenly;padding:0 6px;column-gap:14px;align-content:center;row-gap:18px;height:100%}
.mh-card{grid-template-columns:1fr auto;grid-template-areas:'t b';gap:0 14px;align-items:center;padding:14px 12px 14px 16px}
.mh-card b{grid-area:t;margin:0;white-space:normal;font-size:16px;line-height:1.2}
.mh-card .mh-btn{grid-area:b}
.mh-card{grid-template-areas:'t b' 's b';gap:2px 14px;padding:14px 12px 14px 16px}
.mh-card b{grid-area:t;font-size:16px;margin:0}
.mh-card small{grid-area:s;display:block;font-size:12.5px;line-height:1.4;margin:0;color:rgba(244,243,238,.55)}
.mh-card .mh-btn{grid-area:b;align-self:center}
.mh-card{margin-top:0}
.mh-caps{align-content:center;row-gap:22px}
}
@keyframes mhDash{to{stroke-dashoffset:0}}
/* ===== ONE HERO. Desktop and tablet get the panel in two columns: copy + tiles left, the stage right ===== */
.home .mf{display:none!important}
.mh{display:block}
@media(min-width:1081px){
  .mh{padding:92px 18px 0}
  .mh-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:'eb stage' 'h1 stage' 'stance stage' 'caps stage' 'card stage' 'copy stage';grid-template-rows:auto auto auto auto auto auto;column-gap:56px;align-content:center;min-height:calc(100vh - 116px);padding:56px 64px;border-radius:32px;position:relative;overflow:hidden;background:radial-gradient(130% 100% at 22% 100%,#1A2018 0%,#0E110E 46%,#0B0B0A 100%)}
  .mh-panel:before,.mh-panel:after{content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(50px)}
  .mh-panel:before{width:50%;padding-top:50%;left:-14%;top:34%;background:radial-gradient(closest-side,rgba(198,242,78,.14),rgba(198,242,78,0));animation:mhBreath 9s ease-in-out infinite alternate}
  .mh-panel:after{width:44%;padding-top:44%;right:-16%;bottom:-24%;background:radial-gradient(closest-side,rgba(120,150,60,.12),rgba(120,150,60,0));animation:mhBreath2 13s ease-in-out infinite alternate}
  .mh-panel>*{position:relative;z-index:1}
  .mh-eyebrow{grid-area:eb;display:block}
  .mh-h1{grid-area:h1;font-size:clamp(34px,3.1vw,46px);line-height:1.08;margin:0 0 18px;max-width:14ch}
  .mh-stance{grid-area:stance;font-size:16px;max-width:38ch;margin:0 0 26px;padding:0}
  .mh-slot{display:contents}
  .mh-caps{grid-area:caps;display:grid;grid-template-columns:repeat(3,max-content);column-gap:30px;row-gap:14px;justify-content:start;align-content:start;height:auto;padding:0;margin:0 0 28px}
  .mh-caps i{width:34px;height:34px}.mh-caps button{font-size:13.5px;gap:10px}
  .mh-panel.viewing .mh-stance,.mh-panel.viewing .mh-caps{visibility:visible}
  .mh-card{grid-area:card;max-width:520px;margin:0}
  .mh-copy{grid-area:copy;margin:18px 0 0}
  .mh-stage{grid-area:stage;align-self:center;justify-self:center;width:min(100%,760px);z-index:1}
  .mh-stage.gone{visibility:hidden}
  .mh-view{grid-area:stage;position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;align-self:center;z-index:2;perspective:1800px;background:none;border:0;padding:0}
  .mh-view canvas{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);transform-origin:50% 50%}
  #mhGhost{position:absolute;left:0;top:0;pointer-events:none;opacity:0;box-shadow:none}
  .mh-view.swap #mhGhost{animation:plateOut .55s var(--hc-ease) forwards}
  .mh-view.swap #mhVcv{animation:plateIn .65s var(--hc-ease)}
  .mh-view.swap.back #mhGhost{animation-name:plateOutB}.mh-view.swap.back #mhVcv{animation-name:plateInB}
  .mh-vbar{position:static;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:40px;margin-top:12px;padding:0;background:none;border:0;pointer-events:auto}
  .mh-vbar #mhPrev,.mh-vbar #mhNext{position:relative;left:auto;right:auto;top:auto;transform:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#F4F3EE;font-size:0}
  .mh-vbar #mhPrev{grid-column:1;grid-row:1;justify-self:start}.mh-vbar #mhNext{grid-column:1;grid-row:1;justify-self:start;margin-left:42px}
  .mh-vbar #mhPrev::before,.mh-vbar #mhNext::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(-40%,-50%) rotate(45deg)}
  .mh-vbar #mhNext::before{transform:translate(-60%,-50%) rotate(-135deg)}
  .mh-vbar span{grid-column:2;grid-row:1;display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,243,238,.55)}
  .mh-vbar em,.mh-vbar #mhClose{display:none}
  .mh-vcap{display:none}
}
@keyframes plateOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-7%) rotateY(16deg) scale(.94)}}
@keyframes plateIn{0%{opacity:0;transform:translateX(7%) rotateY(-16deg) scale(.94)}100%{opacity:1;transform:none}}
@keyframes plateOutB{0%{opacity:1;transform:none}100%{opacity:0;transform:translateX(7%) rotateY(-16deg) scale(.94)}}
@keyframes plateInB{0%{opacity:0;transform:translateX(-7%) rotateY(16deg) scale(.94)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mh-view.swap canvas{animation:none!important}}

@media(min-width:1081px){
  .mh-h1{max-width:22ch;font-size:clamp(34px,3vw,44px)}
  .mh-caps li{transform:translate(var(--dx,0px),var(--dy,14px)) scale(.6);opacity:0;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .4s;transition-delay:calc(var(--i)*45ms)}
  .mh-caps.in li,.mh-caps.now li{transform:none;opacity:1}
  .mh-caps button{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;color:#F4F3EE;font-family:var(--sans);font-size:13.5px;cursor:pointer}
  .mh-caps i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);transition:background .3s,border-color .3s}
  .mh-caps svg{width:16px;height:16px;stroke:rgba(244,243,238,.92);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .mh-caps button:hover i{background:rgba(255,255,255,.1)}
  .mh-caps button[aria-pressed="true"] i{background:#F4F3EE;border-color:#F4F3EE}.mh-caps button[aria-pressed="true"] svg{stroke:#0B0B0A}
  .mh-caps button[aria-pressed="true"]{color:#C6F24E}
  .mh-card{display:grid;grid-template-columns:1fr auto;grid-template-areas:'t b' 's b';gap:2px 16px;align-items:center;padding:16px 16px 16px 20px;border-radius:18px;background:linear-gradient(160deg,rgba(198,242,78,.08),rgba(255,255,255,.03) 45%,rgba(255,255,255,.03));border:1px solid rgba(198,242,78,.3);box-shadow:0 0 0 1px rgba(198,242,78,.06),0 30px 60px -30px rgba(198,242,78,.35)}
  .mh-card b{grid-area:t;display:block;font-family:var(--sans);font-weight:600;font-size:16px;color:#F4F3EE;margin:0}
  .mh-card small{grid-area:s;display:block;font-family:var(--sans);font-size:13px;color:rgba(244,243,238,.55);margin:0}
  .mh-btn{grid-area:b;display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:#F4F3EE;color:#0B0B0A;font-family:var(--sans);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
  .mh-btn i{width:8px;height:8px;border-radius:50%;background:#C6F24E}
  .mh-copy{font-family:var(--sans);font-size:12.5px;color:rgba(244,243,238,.4)}
  .mh-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,238,.5);margin:0 0 14px}
  .mh-lock{width:100%;height:auto;display:block}
  .mh-lock .bl{fill:none;stroke:#C6F24E;stroke-width:5}.mh-lock .bl.done{fill:#C6F24E;stroke-width:0}
  .mh-lock text{font-family:'Space Grotesk',var(--sans);font-weight:600;font-size:118px;fill:#F4F3EE}
}
@media(min-width:1081px){
  .mh-caps.off{max-height:none!important;margin-bottom:28px!important;opacity:1!important;transform:none!important;pointer-events:auto!important}
  .mh-caps{max-height:none}
}
@media(min-width:1081px){
  .mh{padding:92px 18px 0;max-width:1400px;margin:0 auto}
  .mh-panel{min-height:0;padding:64px 64px 60px;align-content:start}
  .mh-caps{position:relative!important;left:auto!important;right:auto!important;top:auto!important;height:auto!important}
  .mh-stage,.mh-view{align-self:center}
}
@media(min-width:1600px){.mh{max-width:1480px}.mh-panel{padding:72px 80px 68px;column-gap:72px}.mh-h1{font-size:48px}}
/* one column width on wide screens: hero panel and every section share 1240px */
@media(min-width:1081px){.mh{max-width:1276px}.mh-panel{padding:60px 64px 56px}}
@media(min-width:1600px){.mh{max-width:1276px}.mh-panel{padding:64px 72px 60px;column-gap:64px}.mh-h1{font-size:44px}}
.cp-in,.wh-in,.rvw-in,.hw-in,.ft-in{max-width:1240px}
.home .hw,.home .closing{max-width:1240px;margin-left:auto;margin-right:auto}
@media(max-width:1276px){.home .hw,.home .closing{margin-left:18px;margin-right:18px}}
@media(max-width:860px){.home .hw,.home .closing{margin-left:12px;margin-right:12px}}

/* desktop icons: a touch bigger */
@media(min-width:1081px){.mh-caps i{width:40px;height:40px;border-radius:12px}.mh-caps svg{width:19px;height:19px}.mh-caps button{font-size:15px;gap:12px}.mh-caps{column-gap:34px;row-gap:16px}}
/* how it works on desktop: tighter */
@media(min-width:1081px){.home .hw-in{padding:56px 56px 48px}.hw-steps li{padding:22px 0 24px}}
/* selected work on desktop and tablet: four cards inline, the same card as the phone sheet */
.wk-board,.wk-hint{display:none}
@media(min-width:1001px){
  .wk-card{--tint:#E2ECE3;display:flex;flex-direction:column;background:#fff;border-radius:22px;box-shadow:var(--g-shadow);border:1px solid rgba(21,21,15,.06);overflow:hidden;transition:transform .45s var(--hc-ease),box-shadow .45s}
  .wk-card:hover{transform:translateY(-4px);box-shadow:0 40px 70px -40px rgba(11,11,10,.35),0 1px 2px rgba(11,11,10,.03)}
  .wk-cm{position:relative;background:var(--tint);padding:11% 7% 12%;overflow:hidden}
  .wk-cm .wk-big{font-size:clamp(80px,7vw,120px);top:-.04em;right:.02em}
  .wk-cm .wk-win{width:86%}.wk-cm .wk-ph{width:32%}
  .wk-ct{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
  .wk-ct .top{display:flex;align-items:center;gap:10px}
  .wk-ct .top img{width:26px;height:26px;border-radius:8px;object-fit:contain;background:#fff;padding:4px;box-shadow:0 1px 3px rgba(21,21,15,.08)}
  .wk-ct .top b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.012em;color:#15150F;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wk-go{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:500;font-size:12.5px;color:#15150F;text-decoration:none;border:1px solid rgba(21,21,15,.14);border-radius:999px;padding:5px 10px;background:#fff}
  .wk-go i{font-style:normal;color:var(--g-olive)}
  .wk-ct small{display:block;font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--g-2);margin:6px 0 10px}
  .wk-ct .wk-res{font-size:16.5px;line-height:1.2;margin:0 0 10px}
  .wk-card .wk-pts{margin:auto 0 0;gap:6px}.wk-card .wk-pts li{font-size:13.5px;line-height:1.45;padding-left:22px}.wk-card .wk-pts li:before{width:14px;height:14px;top:.15em}
}

/* selected work on desktop and tablet: four quiet squares, a centred pop-up when clicked */
.wk-row4{display:none}
@media(min-width:1001px){
  .wk-sq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .wk-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:132px;padding:18px;background:var(--g-card);border:1px solid rgba(21,21,15,.05);border-radius:20px;box-shadow:0 12px 30px -20px rgba(11,11,10,.18),0 1px 2px rgba(11,11,10,.03);cursor:pointer;font-family:var(--sans);color:var(--g-ink);transition:transform .4s var(--hc-ease),box-shadow .4s,background .3s,color .3s,border-color .3s}
  .wk-tile:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(11,11,10,.32),0 1px 2px rgba(11,11,10,.03);border-color:rgba(76,154,18,.35)}
  .wk-tile .lk{display:flex;align-items:center;gap:12px}
  .wk-tile img{width:34px;height:34px;border-radius:9px;object-fit:contain;background:#fff;padding:4px;box-shadow:0 1px 3px rgba(21,21,15,.1);flex:none}
  .wk-tile b{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.014em;line-height:1.05}
  .wk-tile span,.wk-tile i{display:none}
  .wk-tile.on{background:#15150F;color:#F4F3EE;border-color:#15150F}
  .wk-sheet{position:fixed;inset:0;z-index:120;display:none}.wk-sheet.open{display:block}
  .wk-dim{position:absolute;inset:0;background:rgba(11,11,10,.55);opacity:0;transition:opacity .35s;backdrop-filter:blur(4px)}
  .wk-pane{position:absolute;left:50%;top:50%;width:min(780px,92vw);max-height:88vh;bottom:auto;background:#fff;border-radius:24px;box-shadow:0 60px 120px -40px rgba(11,11,10,.6);transform:translate(-50%,-48%) scale(.96);opacity:0;transition:transform .45s var(--hc-ease),opacity .3s;display:flex;flex-direction:column}
  .wk-sheet.in .wk-dim{opacity:1}.wk-sheet.in .wk-pane{transform:translate(-50%,-50%) scale(1);opacity:1}
  .wk-grip{display:none}
  .wk-x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(21,21,15,.06);color:#15150F;font-size:20px;line-height:1;cursor:pointer;z-index:2}
  .wk-body{overflow-y:auto;padding:14px 14px 16px}
  .wk-lock,.wk-lock body{overflow:hidden}
  .wk-card{--tint:#E2ECE3;background:#fff;overflow:hidden}
  .wk-cm{position:relative;background:var(--tint);padding:8% 6% 9%;overflow:hidden;border-radius:18px}
  .wk-cm .wk-big{font-size:clamp(120px,14vw,180px);top:-.04em;right:.02em}
  .wk-cm .wk-win{width:86%}.wk-cm .wk-ph{width:32%}
  .wk-ct{padding:18px 8px 6px}
  .wk-ct .top{display:flex;align-items:center;gap:12px}
  .wk-ct .top img{width:30px;height:30px;border-radius:9px;object-fit:contain;background:#fff;padding:4px;box-shadow:0 1px 3px rgba(21,21,15,.08)}
  .wk-ct .top b{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.014em;color:#15150F}
  .wk-go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:500;font-size:13.5px;color:#15150F;text-decoration:none;border:1px solid rgba(21,21,15,.14);border-radius:999px;padding:7px 13px;background:#fff}
  .wk-go i{font-style:normal;color:var(--g-olive)}
  .wk-ct small{display:block;font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--g-2);margin:6px 0 12px}
  .wk-ct .wk-res{font-size:22px;line-height:1.15;margin:0 0 12px}
  .wk-card .wk-pts{margin:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 18px}
  .wk-card .wk-pts li{max-width:none}
}
@media(min-width:1001px) and (max-width:1280px){.wk-sq{gap:12px}.wk-tile b{font-size:17px}.wk-tile{min-height:112px}}
/* winship care: the after-launch line, inside how it works */
.hw-care{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-top:36px;padding:22px 26px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.hw-care .g-eyebrow{margin-bottom:8px;color:var(--lime)}
.hw-care b{display:block;font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.1;color:#F4F3EE;margin-bottom:8px}
.hw-care p{margin:0;font-family:var(--sans);font-size:15px;line-height:1.55;color:rgba(244,243,238,.6);max-width:60ch}
.hw-care-r{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.hw-care-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,243,238,.5);white-space:nowrap}
.hw-care-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:#F4F3EE;color:#0B0B0A;font-family:var(--sans);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.hw-care-btn i{font-style:normal;color:var(--g-olive)}
@media(max-width:860px){.hw-care{grid-template-columns:1fr;gap:16px;margin-top:8px;padding:20px 18px;text-align:left}.hw-care-r{flex-direction:row;align-items:center;justify-content:space-between}.hw-care b{font-size:20px}.hw-care p{font-size:14.5px}}
/* footer on wide screens: the lockup sized to the column, the bar inside the column */
.ft-word{font-size:clamp(64px,11vw,168px);max-width:1240px;margin:56px auto 28px}
.ft-bar{max-width:1240px;margin:0 auto;border-radius:18px 18px 0 0}
@media(max-width:1276px){.ft-bar{margin:0 18px}}
@media(max-width:860px){.ft-bar{margin:0 12px}}
/* nav shares the hero column on desktop and tablet */
@media(min-width:861px){.nav,.home .nav{width:min(1240px,calc(100% - 36px))}}
/* one radius language on desktop and tablet: nav and hero panel both 18px */
@media(min-width:861px){.nav,.home .nav{border-radius:18px}.mh-panel,.home .hw,.home .closing{border-radius:18px}}
/* selected work pop-up on desktop: a case-study card. media left to the edge, the story on the right */
@media(min-width:1001px){
  .wk-pane{width:min(1120px,94vw);max-height:86vh;border-radius:28px;padding:0;overflow:hidden;background:#fff}
  .wk-body{padding:0;overflow:hidden;display:flex}
  .wk-body .wk-card{display:grid;grid-template-columns:1.22fr 1fr;width:100%;border:0;box-shadow:none;border-radius:0}
  .wk-body .wk-cm{border-radius:0;padding:9% 8% 10%;display:flex;align-items:center;min-height:520px}
  .wk-body .wk-scene{width:100%}
  .wk-body .wk-cm .wk-big{font-size:clamp(160px,18vw,260px);top:-.06em;right:-.02em;opacity:.16}
  .wk-body .wk-ct{padding:40px 40px 36px;display:flex;flex-direction:column;gap:0;min-width:0}
  .wk-body .wk-ct .top{display:contents}
  .wk-body .wk-ct .top img{order:0;width:40px;height:40px;border-radius:12px;padding:6px;margin-bottom:18px}
  .wk-body .wk-ct .top b{order:1;font-size:30px;letter-spacing:-.02em;white-space:normal;overflow:visible;line-height:1.02;margin-bottom:10px}
  .wk-body .wk-ct small{order:2;font-size:15.5px;line-height:1.5;margin:0 0 22px;color:var(--g-2)}
  .wk-body .wk-ct .wk-res{order:3;font-size:21px;line-height:1.18;margin:0 0 18px;padding-top:22px;border-top:1px solid var(--g-line)}
  .wk-body .wk-card .wk-pts{order:4;display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 28px}
  .wk-body .wk-card .wk-pts li{font-size:14.5px;line-height:1.5;padding-left:26px}.wk-body .wk-card .wk-pts li:before{width:16px;height:16px;top:.2em}
  .wk-body .wk-go{order:9;margin:auto 0 0;width:100%;justify-content:center;height:52px;border-radius:999px;background:#15150F;color:#F4F3EE;border:0;font-size:15px;font-weight:600}
  .wk-body .wk-go i{color:var(--lime)}
  .wk-x{right:16px;top:16px;width:38px;height:38px;background:rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(11,11,10,.18)}
  .wk-pane{transform:translate(-50%,-47%) scale(.94)}
  .wk-sheet.in .wk-pane{transform:translate(-50%,-50%) scale(1)}
  .wk-sheet.in .wk-body .wk-scene{animation:wkPan .9s var(--hc-ease)}
}
@keyframes wkPan{from{transform:translateX(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@media(min-width:1001px) and (max-width:1200px){.wk-body .wk-card{grid-template-columns:1.05fr 1fr}.wk-body .wk-cm{min-height:440px}.wk-body .wk-ct{padding:30px 28px 28px}.wk-body .wk-ct .top b{font-size:26px}}

.wk-go-l{display:none}
@media(min-width:1001px){.wk-body .wk-go-s{display:none}.wk-body .wk-go-l{display:inline}}
/* footer lockup: a signature, not a billboard */
.ft-word{font-size:clamp(56px,7vw,112px);margin:48px auto 24px}
@media(max-width:860px){.ft-word{font-size:15vw;margin:32px auto 24px}}
.ft-word{font-size:clamp(40px,4.5vw,72px);margin:44px auto 22px}
@media(max-width:860px){.ft-word{font-size:10vw;margin:30px auto 22px}}
/* desktop: full-width section heads centred, two-column heads stay left */
@media(min-width:861px){
  .home .wk-head{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;margin-bottom:40px}
  .home .wk-h2{max-width:18ch}.home .wk-sub{max-width:44ch}
  .wh-in{text-align:center}.wh .g-h2{margin-left:auto;margin-right:auto}.wh-grid{text-align:left}.wh-fine{text-align:center}
}
/* the swap ghost canvas never takes layout space, on any size */
#mhGhost{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;pointer-events:none;display:block}
/* very wide screens: scale the whole page up so a 1240px column doesn't read as a strip on a 32-inch */
@media(min-width:1900px){html{zoom:1.15}}
@media(min-width:2500px){html{zoom:1.3}}
@media(min-width:3400px){html{zoom:1.6}}

/* desktop opening: the lockup settles back a touch and fades as the first plate
   comes up under it. Kept tight: no heavy blur, no oversized plate, no dead frame. */
@media(min-width:1081px){
  .mh-stage{transition:visibility 0s linear .6s}
  .mh-stage .mh-lock{transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .38s ease,filter .5s ease}
  .mh-stage.gone .mh-lock{transform:scale(.9);opacity:0;filter:blur(3px)}
  .mh-view.first #mhVcv{animation:plateFirst .8s cubic-bezier(.16,1,.3,1) both}
  .mh-view.first #mhGhost{animation:none;opacity:0}
}
@keyframes plateFirst{0%{opacity:0;transform:scale(.985) translateY(6px)}40%{opacity:1}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mh-view.first #mhVcv{animation:none}.mh-stage .mh-lock{transition:opacity .2s}}

/* self-hosted mono + handwriting: the canvas screens must never fall back to a wider system mono */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/jetbrains-mono.woff2) format("woff2")}
@font-face{font-family:"Architects Daughter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/architects-daughter.woff2) format("woff2")}
/* the opened screen never touches the headline: the slot is at least canvas + strip tall, with a gap above */
@media(max-width:860px){.mh-slot,.mh-slot.grid{min-height:calc((100vw - 52px)*880/1280 + 46px);margin-top:8px}}
/* phone: slot back to canvas height; the opened screen anchors to the slot's top and its strip spills into the hidden stance area */
@media(max-width:860px){
  .mh-slot,.mh-slot.grid{min-height:calc((100vw - 52px)*880/1280 + 2px);margin-top:6px}
  .mh-view{top:0;transform:none}
  .mh-caps{row-gap:18px}
}

/* ===== SUBPAGE SYSTEM (sp-): every generated page on the homepage's language ===== */
.home.sub{background:var(--g-bg)}
.sp-hero{padding:92px 18px 0}
.sp-panel{position:relative;overflow:hidden;max-width:1240px;margin:0 auto;padding:56px 64px 52px;border-radius:18px;color:#F4F3EE;background:radial-gradient(130% 100% at 22% 100%,#1A2018 0%,#0E110E 46%,#0B0B0A 100%)}
.sp-panel:before{content:'';position:absolute;left:-14%;top:34%;width:50%;padding-top:50%;border-radius:50%;background:radial-gradient(closest-side,rgba(198,242,78,.14),rgba(198,242,78,0));filter:blur(50px);animation:mhBreath 9s ease-in-out infinite alternate;pointer-events:none}
.sp-panel>*{position:relative;z-index:1}
.sp-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,243,238,.5);margin:0 0 22px}
.sp-crumb a{color:inherit;text-decoration:none}.sp-crumb a:hover{color:#F4F3EE}.sp-crumb i{font-style:normal;opacity:.45}.sp-crumb span{color:rgba(244,243,238,.8)}
.sp-panel h1{font-family:var(--sans);font-weight:600;font-size:clamp(30px,4vw,50px);line-height:1.06;letter-spacing:-.025em;margin:0 0 18px;max-width:22ch;color:#F4F3EE}
.sp-panel h1 em{font-style:normal;color:rgba(244,243,238,.45)}
.sp-intro{font-family:var(--sans);font-size:17px;line-height:1.6;color:rgba(244,243,238,.68);max-width:60ch}.sp-intro p{margin:0 0 12px}.sp-intro p:last-child{margin:0}.sp-intro strong{color:#F4F3EE;font-weight:500}.sp-intro a{color:#F4F3EE}
.sp-toks{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}.sp-toks span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(244,243,238,.72);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 12px}
.sp-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sp-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;background:#F4F3EE;color:#0B0B0A;font-family:var(--sans);font-weight:600;font-size:15px;text-decoration:none;transition:transform .3s var(--hc-ease)}
.sp-btn:after{content:'';width:8px;height:8px;border-radius:50%;background:var(--lime)}.sp-btn:hover{transform:translateY(-2px)}
.sp-btn.ghost{background:rgba(255,255,255,.06);color:#F4F3EE;border:1px solid rgba(255,255,255,.14)}.sp-btn.ghost:after{display:none}
.sp{padding:64px 0 0}.sp-in{max-width:1240px;margin:0 auto;padding:0 24px}
.sp .g-eyebrow{margin-bottom:14px}.sp .g-h2{max-width:24ch;margin:0 0 18px;font-size:clamp(28px,3.4vw,44px)}.sp-lede{max-width:62ch;margin:0 0 26px}
.sp-prose{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--g-2)}
.sp-prose .sp-in>p,.sp-prose .sp-in>ul,.sp-prose .sp-in>ol,.sp-prose .sp-in>h3,.sp-prose .sp-in>.g-h2,.sp-prose .sp-in>.sp-lede{max-width:70ch}
.sp-prose p{margin:0 0 16px}.sp-prose p:last-child{margin-bottom:0}.sp-prose h3{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--g-ink);margin:28px 0 10px}
.sp-prose ul,.sp-prose ol{padding-left:22px;margin:0 0 16px}.sp-prose li{margin:6px 0}.sp-prose strong,.sp-prose b{color:var(--g-ink);font-weight:600}
.sp-prose a{color:var(--g-ink);text-decoration:underline;text-decoration-color:rgba(76,154,18,.6);text-underline-offset:3px}
.sp-straight{background:#fff;border-radius:18px;padding:26px 30px;border:1px solid rgba(21,21,15,.05);box-shadow:0 14px 34px -22px rgba(11,11,10,.2)}
.sp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.sp-cards-1{grid-template-columns:1fr;max-width:860px}.sp-cards-2{grid-template-columns:1fr 1fr}
.sp-card{display:block;background:#fff;border-radius:18px;padding:24px 26px;border:1px solid rgba(21,21,15,.05);box-shadow:0 14px 34px -22px rgba(11,11,10,.2),0 1px 2px rgba(11,11,10,.03);color:var(--g-ink);text-decoration:none;transition:transform .35s var(--hc-ease),box-shadow .35s}
.sp-card h3{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.01em;margin:0 0 8px;color:var(--g-ink)}.sp-card p{margin:0;font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--g-2)}
.sp-card-link span{display:inline-block;margin-top:14px;font-family:var(--sans);font-weight:500;font-size:14px;color:var(--g-olive)}.sp-card-link:hover{transform:translateY(-3px);box-shadow:0 26px 44px -24px rgba(11,11,10,.3)}
.sp-rate b{display:block;font-family:var(--display);font-weight:600;font-size:32px;letter-spacing:-.02em;color:var(--g-ink);margin-bottom:6px}
.sp-ev{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sp-ev-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:26px;align-items:center;background:#fff;border-radius:20px;padding:16px;border:1px solid rgba(21,21,15,.05);box-shadow:0 14px 34px -22px rgba(11,11,10,.2)}
.sp-ev-shot{display:block;border-radius:12px;overflow:hidden;background:#0d0e12}.sp-ev-shot img{display:block;width:100%;height:auto}
.sp-ev-stamp{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-olive);margin:0 0 10px}
.sp-ev-stamp i{width:6px;height:6px;border-radius:50%;background:var(--g-olive)}.sp-ev-stamp span{margin-left:auto;font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--g-3)}
.is-adj .sp-ev-stamp span{color:#B8860B}
.sp-ev-body h3{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:-.015em;margin:0 0 8px;line-height:1.2}.sp-ev-body h3 a{color:var(--g-ink);text-decoration:none}
.sp-ev-body p{margin:0 0 12px;font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--g-2)}
.sp-ev-go{font-family:var(--sans);font-weight:500;font-size:14.5px;color:var(--g-ink);text-decoration:none;border-bottom:1px solid rgba(76,154,18,.6)}
.sp-faults{list-style:none;margin:0;padding:0;background:#fff;border-radius:18px;border:1px solid rgba(21,21,15,.05);box-shadow:0 14px 34px -22px rgba(11,11,10,.2);overflow:hidden}
.sp-faults li{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:16px 22px;border-top:1px solid var(--g-line);font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--g-ink)}
.sp-faults li:first-child{border-top:0}.sp-faults .n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--g-olive);padding-top:3px}
.sp-links{display:flex;flex-wrap:wrap;gap:8px}
.sp-links a{padding:9px 14px;border-radius:999px;background:#fff;border:1px solid rgba(21,21,15,.08);font-family:var(--sans);font-size:14px;font-weight:500;color:var(--g-ink);text-decoration:none;transition:transform .3s var(--hc-ease),border-color .3s}
.sp-links a:hover{transform:translateY(-2px);border-color:rgba(76,154,18,.4)}.sp-links a.all{background:var(--g-ink);color:#F4F3EE;border-color:var(--g-ink)}
.sp-links-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.sp-links-grid a{text-align:center;padding:14px 12px}
.sp-cta{padding:64px 18px 0}
.sp-cta-in{max-width:1240px;margin:0 auto;padding:44px 56px;border-radius:18px;color:#F4F3EE;background:radial-gradient(120% 100% at 80% 100%,#1A2018 0%,#0E110E 46%,#0B0B0A 100%);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.sp-cta h2{font-family:var(--sans);font-weight:600;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.02em;line-height:1.1;margin:0 0 8px;color:#F4F3EE}.sp-cta p{margin:0;font-family:var(--sans);font-size:16px;line-height:1.5;color:rgba(244,243,238,.6);max-width:52ch}
.sp-cta-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 22px;border-radius:999px;background:#F4F3EE;color:#0B0B0A;font-family:var(--sans);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .3s var(--hc-ease)}
.sp-cta-btn i{width:8px;height:8px;border-radius:50%;background:var(--lime)}.sp-cta-btn:hover{transform:translateY(-2px)}
.sub .faq-sec{padding:64px 0 0}.sub .faq-sec .container{max-width:1240px}
.sub .ft{margin-top:72px}
@media(max-width:1000px){.sp-cards{grid-template-columns:1fr 1fr}.sp-links-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
  .sp-hero{padding:84px 12px 0}.sp-panel{padding:30px 20px 26px;border-radius:18px}
  .sp-panel h1{font-size:clamp(28px,7.6vw,34px);line-height:1.1;margin-bottom:14px}.sp-intro{font-size:15.5px}
  .sp-toks{margin-top:18px}.sp-toks span{font-size:10.5px;padding:6px 10px}.sp-ctas{margin-top:22px}.sp-btn{padding:12px 18px;font-size:14.5px}
  .sp{padding:48px 0 0}.sp-in{padding:0 20px}.sp .g-h2{font-size:clamp(26px,7vw,32px)}
  .sp-prose{font-size:16px}.sp-cards,.sp-cards-2{grid-template-columns:1fr;gap:10px}.sp-card{padding:20px 20px}
  .sp-ev-row{grid-template-columns:1fr;gap:12px;padding:12px}.sp-ev-body{padding:4px 6px 6px}.sp-ev-body h3{font-size:18px}
  .sp-faults li{grid-template-columns:36px 1fr;gap:10px;padding:14px 16px;font-size:15px}
  .sp-links-grid{grid-template-columns:1fr 1fr}
  .sp-cta{padding:48px 12px 0}.sp-cta-in{grid-template-columns:1fr;gap:22px;padding:28px 22px}.sp-cta-btn{width:100%;justify-content:center}
  .sub .faq-sec{padding-top:48px}.sub .ft{margin-top:56px}
}
.sub .light.sub-faq{padding:0;margin-top:0}.sub .light.sub-faq .faq-sec{padding-top:64px}
@media(max-width:860px){.sub .light.sub-faq .faq-sec{padding-top:48px}}

.mm-links a:nth-child(4){--d:.26s}.mm-links a:nth-child(5){--d:.32s}
@media(max-height:760px){.mm-links b{font-size:24px}.mm-links a{padding:12px 2px}}

/* demos hub: device-pair cards */
.sp-demos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sp-demo{background:#fff;border-radius:22px;border:1px solid rgba(21,21,15,.05);box-shadow:0 18px 40px -24px rgba(11,11,10,.22),0 1px 2px rgba(11,11,10,.03);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--hc-ease),box-shadow .4s}
.sp-demo:hover{transform:translateY(-4px);box-shadow:0 34px 60px -34px rgba(11,11,10,.35),0 1px 2px rgba(11,11,10,.03)}
.sp-demo-shot{display:block;background:#EDEDEA}.sp-demo-shot img{display:block;width:100%;height:auto}
.sp-demo-b{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.sp-demo-ind{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-olive);margin-bottom:8px}
.sp-demo h3{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:-.015em;line-height:1.2;margin:0 0 8px}.sp-demo h3 a{color:var(--g-ink);text-decoration:none}
.sp-demo p{margin:0 0 12px;font-family:var(--sans);font-size:14.5px;line-height:1.55;color:var(--g-2)}
.sp-demo ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}.sp-demo li{position:relative;padding-left:20px;font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--g-ink)}
.sp-demo li:before{content:'';position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--g-yes,#DDF5A6);border:1px solid rgba(47,122,8,.4)}
.sp-demo-go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:#15150F;color:#F4F3EE;font-family:var(--sans);font-weight:600;font-size:14px;text-decoration:none}.sp-demo-go i{font-style:normal;color:var(--lime)}
@media(max-width:860px){.sp-demos{grid-template-columns:1fr;gap:14px}.sp-demo-b{padding:16px 18px 20px}.sp-demo h3{font-size:18px}}
/* burger and X: both lines on the exact centre line, whatever size the button is */
.nav-burger span:nth-child(1),.nav-burger span:nth-child(2){top:50%;bottom:auto;left:9px;right:9px;height:2px;margin-top:-1px;transform-origin:50% 50%}
.nav-burger span:nth-child(1){transform:translateY(-4px)}.nav-burger span:nth-child(2){transform:translateY(4px)}
.nav-burger.open span:nth-child(1){transform:rotate(45deg)}.nav-burger.open span:nth-child(2){transform:rotate(-45deg)}
/* menu foot: the card carries its line again; the contact row sits on a hairline with room under it */
.mm-panel{padding:6px 18px 26px;bottom:max(14px,env(safe-area-inset-bottom,14px))}
.mm-card{padding:18px 18px 16px}.mm-ct small{display:block!important}
.mm-foot{margin-top:18px;padding-top:16px;gap:8px;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mm-direct a{font-size:13.5px}.mm-avail{font-size:10px}
@media(max-height:760px){.mm-links b{font-size:24px}.mm-links a{padding:11px 2px}.mm-ct small{display:block!important}.mm-card{margin-top:12px}.mm-foot{margin-top:12px;padding-top:12px}}
/* the menu panel is a sheet: it runs to the bottom edge, so nothing shows through under it */
.mobile-menu{height:100dvh;min-height:100vh;background:#0B0B0A}
.mm-panel{bottom:0;border-radius:18px 18px 0 0;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
/* menu: a full-width sheet under the nav, sized to the visible viewport, scrolls if it must */
.mobile-menu{height:100dvh;min-height:0;background:#0B0B0A}
.mm-panel{left:0;right:0;top:74px;bottom:0;border-radius:22px 22px 0 0;padding:8px 20px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;-webkit-overflow-scrolling:touch}
.mm-links{flex:1 0 auto;justify-content:center}
.mm-card{margin-top:14px}.mm-foot{flex:none}
/* menu: never scrolls; the link block gives way, short screens tighten */
.mm-panel{overflow:hidden}
.mm-links{flex:1 1 auto;min-height:0;justify-content:center}
.mm-links a{padding:14px 2px}
@media(max-height:760px){.mm-links b{font-size:24px}.mm-links a{padding:10px 2px}.mm-links small{margin-top:3px}}
@media(max-height:660px){.mm-links b{font-size:21px}.mm-links a{padding:8px 2px}.mm-links small{display:none}.mm-ct small{display:none!important}.mm-card{padding:14px 16px 12px}.mm-foot{margin-top:10px;padding-top:10px}}

/* demos hub: drawn mark beside each business name */
.sp-demo-hd{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.sp-demo-mk{flex:none;width:40px;height:40px;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sp-demo-mk svg{display:block;width:100%;height:100%}
.sp-demo-hd h3{margin:0}
.sp-demo-hd .sp-demo-ind{margin-bottom:5px;display:block}
@media(max-width:860px){.sp-demo-mk{width:36px;height:36px;border-radius:9px}}

/* desktop nav: hover panels (Demos, Who we help) */
.nv-ch{width:10px;height:10px;margin-left:5px;vertical-align:-1px;opacity:.55;transition:transform .25s var(--ease),opacity .2s}
.nav-links a.on{color:var(--paper);background:rgba(255,255,255,.08)}
.nav-links a.on .nv-ch{transform:rotate(180deg);opacity:1}
.mega{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;color:#141414;border-radius:16px;padding:10px;box-shadow:0 40px 90px -24px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.06);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .22s var(--ease),transform .3s var(--ease);z-index:5}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mega.on{opacity:1;transform:none;pointer-events:auto}
.mega[hidden]{display:none}
.mega-p{display:none;grid-template-columns:minmax(0,1fr) 250px;gap:8px}
.mega-p.on{display:grid}
.mega-grid{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.mg-it{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border:1px solid #E9E9E3;border-radius:12px;background:#FAFAF7;color:#141414;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.mg-it:hover{background:#fff;border-color:#D8D8D0;transform:translateY(-1px);box-shadow:0 12px 30px -18px rgba(0,0,0,.35)}
.mg-it i{width:30px;height:30px;border-radius:8px;flex:none;overflow:hidden;display:block}
.mg-it i svg{width:100%;height:100%;display:block}
.mg-it i.ln{background:#fff;border:1px solid #E4E4DD;color:#4C9A12;padding:6px}
.mg-it b{display:block;font-family:var(--sans);font-weight:600;font-size:13.5px;line-height:1.3;color:#141414;letter-spacing:-.01em}
.mg-it b span{display:inline-block;transition:transform .2s var(--ease)}
.mg-it:hover b span{transform:translateX(3px)}
.mg-it p{margin:2px 0 0;font-size:12px;line-height:1.45;color:#6A6A66}
.mg-it p em{font-style:normal;color:#141414;font-weight:600}
.mg-card{grid-column:2;grid-row:1/3;background:radial-gradient(120% 90% at 100% 100%,rgba(198,242,78,.16),transparent 60%),linear-gradient(160deg,#12160F,#0A0D0A);color:#fff;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(255,255,255,.08);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.mg-card:hover{transform:translateY(-1px);box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
.mg-card small{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.mg-card b{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.3;letter-spacing:-.01em}
.mg-card span{margin-top:auto;font-size:13px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.mg-card span i{font-style:normal;transition:transform .2s var(--ease)}
.mg-card:hover span i{transform:translateX(3px)}
.mg-all{grid-column:1;grid-row:2;justify-self:start;font-size:12.5px;font-weight:600;color:#141414;padding:2px 6px 0}
.mg-all i{font-style:normal}
.mg-all:hover{text-decoration:underline}
@media(max-width:860px){.mega{display:none!important}.nv-ch{display:none}}

/* the seam: platform marks drifting on the light ground between the hero and the table */
.seam{position:relative;z-index:2;background:var(--g-bg);max-width:1240px;margin:0 auto;padding:34px 18px 0}
.seam-m{position:relative;height:40px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.seam-t{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;white-space:nowrap;animation:seamDrift 44s linear infinite;will-change:transform}
.sm-l{display:inline-flex;align-items:center;gap:9px;padding:0 30px;font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.01em;color:rgba(20,22,18,.5)}
.sm-l svg{width:22px;height:22px;fill:rgba(20,22,18,.5);flex:none}
@keyframes seamDrift{to{transform:translate(-50%,-50%)}}
.seam:hover .seam-t{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.seam-t{animation:none}}
@media(max-width:860px){.seam{padding:24px 12px 0}.seam-m{height:36px}.sm-l{padding:0 20px;font-size:14.5px;gap:8px}.sm-l svg{width:19px;height:19px}}

/* ── polish pass: one elevation system across the page ─────────────────────
   Light ground: cards get a real edge (9% hairline) and a two-part shadow
   (contact + ambient) instead of a shadow whose spread never reaches the edge.
   One radius for content cards (20), one for tiles (14). Dark ground: inner
   cards step up a full tone with an inset top light so they read as raised. */
:root{--g-line:rgba(11,11,10,.10);--g-shadow:0 1px 2px rgba(11,11,10,.06),0 10px 24px -14px rgba(11,11,10,.18),0 30px 60px -30px rgba(11,11,10,.16);--g-shadow-sm:0 1px 2px rgba(11,11,10,.05),0 8px 20px -14px rgba(11,11,10,.18);--g-shadow-hover:0 2px 4px rgba(11,11,10,.05),0 18px 36px -18px rgba(11,11,10,.24)}
.cp-card,.faq-list.rv{border:1px solid rgba(21,21,15,.09);box-shadow:var(--g-shadow);border-radius:20px}
.cp-cardhead{background:#FAFAF7;border-bottom:1px solid var(--g-line)}
.cp-row{border-bottom:1px solid rgba(11,11,10,.07)}
.cp-row:hover{background:#FCFCFA}
.wk-tile,.wh-grid a{border:1px solid rgba(21,21,15,.09);border-radius:14px;box-shadow:var(--g-shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.wk-tile:hover,.wh-grid a:hover{transform:translateY(-2px);box-shadow:var(--g-shadow-hover);border-color:rgba(21,21,15,.16)}
.faq-list details{border-top:1px solid rgba(11,11,10,.08)}
.faq-list .faq-q:hover{background:#FAFAF7}
/* reviews: three real cards, not three columns of loose text */
@media(min-width:861px){
  .rvw-track{gap:16px}
  .rvw-card{background:#fff;border:1px solid rgba(21,21,15,.09);border-radius:20px;box-shadow:var(--g-shadow-sm);padding:26px 26px 22px}
  .rvw-card+.rvw-card{padding-left:26px;border-left:1px solid rgba(21,21,15,.09)}
}
@media(max-width:860px){
  .rvw-card{background:#fff;border:1px solid rgba(21,21,15,.09);border-radius:18px;box-shadow:var(--g-shadow-sm);padding:26px 22px 24px;margin:0 6px}
  .rvw-card+.rvw-card{padding:26px 22px 24px;border:1px solid rgba(21,21,15,.09)}
}
/* dark ground: the Care box steps up a tone and gets a top light */
.hw-care{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 24px 50px -30px rgba(0,0,0,.7)}
.hw-steps{--rail:rgba(255,255,255,.14)}
/* contact: the white form lifts off the dark panel */
.home .cxC-panel{border:1px solid rgba(255,255,255,.06);box-shadow:0 1px 0 rgba(255,255,255,.04),0 30px 70px -30px rgba(0,0,0,.75),0 60px 120px -60px rgba(0,0,0,.6)}
/* hero panel edge, so the dark card reads as an object on the ground */
.mh-panel{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px -30px rgba(11,11,10,.55),0 2px 6px rgba(11,11,10,.12)}
.home .hw{box-shadow:0 24px 60px -30px rgba(11,11,10,.55),0 2px 6px rgba(11,11,10,.12)}
.home .closing{box-shadow:0 24px 60px -30px rgba(11,11,10,.55),0 2px 6px rgba(11,11,10,.12)}
/* how-it-works on phones: the steps column must not be sized by its min-content or it runs past the card */
@media(max-width:860px){.hw-in{grid-template-columns:minmax(0,1fr)}.hw-steps,.hw-steps li,.hw-steps p,.hw-steps b{min-width:0;max-width:100%}.hw-steps li{grid-template-columns:50px minmax(0,1fr)}}
/* polish, second turn: a deeper ground so white cards contrast, and shadows you can see */
:root{--g-bg:#ECECE6;--g-shadow:0 1px 3px rgba(11,11,10,.08),0 12px 28px -12px rgba(11,11,10,.22),0 36px 70px -34px rgba(11,11,10,.22);--g-shadow-sm:0 1px 3px rgba(11,11,10,.07),0 10px 24px -12px rgba(11,11,10,.22);--g-shadow-hover:0 2px 5px rgba(11,11,10,.07),0 22px 44px -18px rgba(11,11,10,.3)}
.cp-card,.faq-list.rv,.wk-tile,.wh-grid a{border-color:rgba(21,21,15,.11)}
@media(min-width:861px){.rvw-card{border-color:rgba(21,21,15,.11)}}
.cp-cardhead{background:#F7F7F3}
.cp-row:hover{background:#F9F9F6}
/* strip sits a little lower off the hero and a little tighter to the table */
.home .cp{padding-top:46px}
@media(max-width:860px){.home .cp{padding-top:40px}}
/* the strip marks read as pressed into the ground: darker than the ground, a white catch-light on the lower edge */
.sm-l{color:rgba(20,22,18,.34);text-shadow:0 1px 0 rgba(255,255,255,.85),0 -1px 0 rgba(0,0,0,.05)}
.sm-l svg{fill:rgba(20,22,18,.34);filter:drop-shadow(0 1px 0 rgba(255,255,255,.85))}

/* reviews: two real ones plus the Google summary tile */
.rvw-sum{justify-content:center;gap:12px}
.rvw-big{display:flex;align-items:baseline;gap:12px}
.rvw-big b{font-family:var(--display);font-weight:600;font-size:44px;letter-spacing:-.03em;line-height:1;color:var(--g-ink)}
.rvw-sum p{margin:0;font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--g-2)}
.rvw-go{align-self:flex-start;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--g-ink);text-decoration:none;border-bottom:1px solid var(--g-line);padding-bottom:2px}
.rvw-go i{font-style:normal;display:inline-block;transition:transform .2s var(--ease)}
.rvw-go:hover i{transform:translateX(3px)}
@media(min-width:861px){.rvw-sum{background:var(--g-bg);box-shadow:none;border:1px dashed rgba(21,21,15,.16)}}

/* reviewer photos are faces, not site thumbnails: centre them, lighter ring */
.rvw-site{background:var(--g-bg);box-shadow:0 0 0 1px rgba(21,21,15,.10)}
.rvw-site img{object-position:center}