/* =========================================================================
   ZOEL DESIGN SYSTEM — tokens + primitives + site components
   v1.1 · 1:1 with zoel-site/index.html · reference: zoel-design-system.html
   Drop-in: class names and values match production, so this file can replace
   the site's inline <style> block without renaming markup.
   Fonts: Space Grotesk 400/500/600/700 + JetBrains Mono 400/500/700
   ========================================================================= */

:root{
  /* ---- brand (canonical, from code) ---------------------------------- */
  --void:#0C0D10;      /* page canvas            oklch(.164 .005 264) */
  --ink:#16181C;       /* raised card / input    oklch(.221 .006 265) */
  --paper:#F1EEE6;     /* primary type + inverse oklch(.947 .012 89)  */
  --amber:#F2A63A;     /* THE accent             oklch(.771 .145 68)  */
  --graphite:#6B7078;  /* inert tick / rule      oklch(.560 .011 258) */

  /* ---- derived surfaces ---------------------------------------------- */
  --panel:#131519;
  --panel-2:#181B21;   /* card hover */

  /* ---- hairlines (white alpha — never solid dark borders) ------------- */
  --line:rgba(255,255,255,.09);    /* default structure */
  --line-2:rgba(255,255,255,.055); /* grid, inner splits */
  --line-3:rgba(255,255,255,.16);  /* hover / registration marks */

  /* ---- text ramp (contrast-checked on --void) ------------------------- */
  --body:#C8CBD1;      /* 11.9:1 — paragraph */
  --mut:#8B9099;       /* 6.0:1  — labels, meta */
  --dim:#5A5F68;       /* 3.0:1  — large/decorative only, never body copy */

  /* ---- semantic ------------------------------------------------------- */
  --fg:var(--paper);
  --bg:var(--void);
  --surface:var(--ink);
  --border:var(--line);
  --accent:var(--amber);

  /* ---- type families --------------------------------------------------- */
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Space Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  /* ---- type scale ------------------------------------------------------ */
  --fs-h1:clamp(23px,3.4vw,38px);   /* hero lead */
  --fs-h2:clamp(28px,4.6vw,52px);   /* section head */
  --fs-h3:clamp(28px,3.4vw,36px);   /* card name */
  --fs-h4:22px;
  --fs-h5:19px;
  --fs-lede:clamp(16px,1.5vw,18px);
  --fs-body:15px;
  --fs-sm:14.5px;
  --fs-label:11px;                  /* mono caps, .18em */
  --fs-micro:10.5px;                /* mono caps, .14em */

  /* tracking — caps ALWAYS positive, display ALWAYS negative */
  --tr-display:-.03em;
  --tr-head:-.025em;
  --tr-tight:-.015em;
  --tr-label:.18em;
  --tr-eyebrow:.26em;

  /* ---- rhythm ---------------------------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:22px;
  --sp-6:28px; --sp-7:40px; --sp-8:56px; --sp-9:76px; --sp-10:112px;
  --pad:56px;            /* page gutter */
  --maxw:1160px;
  --bar:56px;            /* fixed instrument bar height */
  --grid:44px;           /* background graph-paper pitch */

  /* ---- radius ----------------------------------------------------------- */
  --r-1:6px; --r-2:8px; --r-3:10px; --r-4:12px; --r-5:14px; --r-6:16px;
  --r-pill:999px;

  /* ---- z scale ---------------------------------------------------------- */
  --z-rail:20; --z-bar:40; --z-top:60;

  /* ---- motion ----------------------------------------------------------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-quart:cubic-bezier(.25,1,.5,1);
  --ease-quint:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --dur-1:.12s;  /* state flip */
  --dur-2:.18s;  /* hover */
  --dur-3:.3s;   /* reveal */
  --dur-4:.6s;   /* sequence / signal */
}
@media(max-width:1024px){:root{--pad:40px}}
@media(max-width:520px){:root{--pad:22px}}

/* =========================================================================
   BASE
   ========================================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 24px)}
body{
  margin:0;background:var(--void);color:var(--paper);
  font-family:var(--font-body);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* signature graph-paper canvas — do not swap for a gradient */
  background-image:
    linear-gradient(var(--line-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);background-position:center top;
  overflow-x:hidden;
}
svg{display:block;max-width:100%}
/* mark holders — the SVG fills its box whether it is inline (design files)
   or injected at runtime by the mark engine (production) */
.wmwrap svg,.hero .bgz svg,footer .fwm svg,.bar .mk svg{width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:1px}
::selection{background:var(--amber);color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =========================================================================
   TYPE PRIMITIVES
   ========================================================================= */
h1,.h1,.lead{
  font-family:var(--font-display);font-weight:600;margin:0;
  font-size:var(--fs-h1);letter-spacing:var(--tr-head);line-height:1.14;
  color:var(--paper);max-width:20ch;text-wrap:balance;
}
h2,.h2{
  font-family:var(--font-display);font-weight:600;margin:0;
  font-size:var(--fs-h2);letter-spacing:var(--tr-display);line-height:1.02;
  max-width:15ch;text-wrap:balance;
}
h3,.h3{font-family:var(--font-display);font-weight:600;margin:0;font-size:var(--fs-h4);letter-spacing:-.02em;color:var(--paper)}
h4,.h4{font-family:var(--font-display);font-weight:600;margin:0;font-size:var(--fs-h5);letter-spacing:-.02em;color:var(--paper)}
.lede{max-width:60ch;margin:26px 0 0;color:var(--body);font-size:var(--fs-lede);line-height:1.72;text-wrap:pretty}
.lede b{color:var(--paper);font-weight:500}
.lede + .lede{margin-top:16px}
.sub{color:var(--mut);font-size:var(--fs-sm);line-height:1.6;margin:0;max-width:30ch}

/* mono instrument voice — labels, data, status, captions */
.label{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--mut)}
.micro{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.eyebrow{
  font-family:var(--font-mono);font-weight:500;
  font-size:12px;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--mut);
  margin:0 0 30px;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);flex:none}

/* the amber tick — the system's only recurring accent shape. Square, never round. */
.tick{width:7px;height:7px;background:var(--amber);flex:none;display:inline-block}
.tick.sm{width:6px;height:6px}
.tick.inert{background:var(--graphite)}

/* =========================================================================
   LAYOUT SCAFFOLD
   ========================================================================= */
main{padding-top:var(--bar)}
section{border-top:1px solid var(--line);padding:var(--sp-10) 0}
@media(max-width:768px){section{padding:var(--sp-9) 0}}
.secnum{
  font-family:var(--font-mono);font-weight:500;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
  display:flex;align-items:center;gap:12px;margin:0 0 28px;
}
.secnum .tick{width:7px;height:7px}
.secnum .n{color:var(--dim)}

/* corner registration marks — instrument-panel signature, decorative only */
.reg{position:fixed;width:14px;height:14px;z-index:5;pointer-events:none;opacity:.5}
.reg::before,.reg::after{content:"";position:absolute;background:var(--line-3)}
.reg::before{width:14px;height:1px}
.reg::after{width:1px;height:14px}
.reg.tl{top:calc(var(--bar) + 12px);left:12px}
.reg.tr{top:calc(var(--bar) + 12px);right:12px}
.reg.tr::before,.reg.tr::after{right:0}
.reg.bl{bottom:12px;left:12px}
.reg.bl::before,.reg.bl::after{bottom:0}
.reg.br{bottom:12px;right:12px}
.reg.br::before{right:0;bottom:0}
.reg.br::after{right:0;bottom:0}
@media(max-width:860px){.reg{display:none}}

/* hairline scroll-position readout */
.scroll-prog{position:fixed;top:var(--bar);left:0;right:0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;z-index:41;pointer-events:none}
@supports (animation-timeline:scroll()){
  .scroll-prog{animation:prog linear both;animation-timeline:scroll(root)}
}
@keyframes prog{to{transform:scaleX(1)}}

/* one-time instrument scan on power-on */
.scan{
  position:fixed;inset:0;pointer-events:none;z-index:50;
  background:linear-gradient(to bottom,transparent 47%,rgba(255,255,255,.05) 49%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.05) 51%,transparent 53%);
  opacity:0;animation:scan 1.3s var(--ease-quart) .05s 1 forwards;
}
@keyframes scan{0%{opacity:0;transform:translateY(-100%)}14%{opacity:1}88%{opacity:.7}100%{opacity:0;transform:translateY(100%)}}

/* =========================================================================
   BAR — fixed instrument top bar
   ========================================================================= */
.bar{
  position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:var(--z-bar);
  display:flex;align-items:center;gap:20px;padding:0 var(--pad);
  background:rgba(12,13,16,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar .mk{width:58px;line-height:0;flex:none}
.bar .mk svg,.bar .mk img{width:100%;height:auto}
.bar nav{display:flex;gap:4px;margin-left:8px}
.bar nav a{
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);padding:6px 10px;border-radius:var(--r-1);
  position:relative;transition:color .15s,background .15s;
}
.bar nav a:hover{color:var(--paper)}
.bar nav a[aria-current="true"]{color:var(--paper);padding-left:22px}
.bar nav a[aria-current="true"]::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:5px;height:5px;background:var(--amber)}
.bar .status{
  margin-left:auto;display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-weight:400;font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.bar .status b{color:var(--mut);font-weight:400}
.bar .status .dot{width:6px;height:6px;background:var(--amber);border-radius:50%;flex:none;animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.28}}
.bar .cta{margin-left:6px;padding:9px 16px;font-size:12.5px;border-radius:var(--r-2)}
@media(max-width:860px){.bar nav{display:none}.bar .status .sep{display:none}.bar .cta{margin-left:auto}}
@media(max-width:620px){.bar{gap:12px}.bar .status{display:none}}
@media(max-width:400px){.bar .cta{padding:8px 13px}}

/* =========================================================================
   RAIL — left scroll-spy (desktop only, ≥1541px)
   ========================================================================= */
.rail{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:var(--z-rail);display:flex;flex-direction:column;gap:2px}
.rail a{
  display:flex;align-items:center;gap:11px;padding:7px 0;
  font-family:var(--font-mono);font-weight:500;font-size:9.5px;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--dim);transition:color var(--dur-2);
}
.rail a .t{width:30px;height:1px;background:currentColor;transform:scaleX(.53);transform-origin:left center;transition:transform .22s var(--ease),background var(--dur-2);flex:none}
.rail a:hover{color:var(--mut)}
.rail a[aria-current="true"]{color:var(--paper)}
.rail a[aria-current="true"] .t{transform:scaleX(1);background:var(--amber)}
@media(max-width:1540px){.rail{display:none}}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;overflow:hidden;border-top:0;padding:130px 0 96px}
@media(max-width:768px){.hero{padding:92px 0 68px}}
.hero .bgz{position:absolute;right:-9%;top:50%;transform:translateY(-50%);width:min(640px,64%);opacity:.05;pointer-events:none;z-index:0}
.hero .inner{position:relative;z-index:1}
.wmwrap{max-width:620px;line-height:0}
.lead-sub{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(15px,1.7vw,18px);color:var(--body);
  max-width:44ch;line-height:1.6;margin:18px 0 0;text-wrap:pretty;
}
.lead{margin:38px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:42px}
.cta-note{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;color:var(--mut);margin:16px 0 0}
.readout{
  margin:46px 0 0;border-top:1px solid var(--line);padding-top:18px;
  font-family:var(--font-mono);font-weight:400;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px 22px;
}
.readout span{color:var(--mut)}
.readout .sep{opacity:.5}

/* =========================================================================
   BUTTONS — paper solid (primary) / ghost (secondary). One primary per view.
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-body);letter-spacing:-.01em;
  padding:14px 22px;border-radius:var(--r-3);
  background:var(--paper);color:var(--ink);border:1px solid var(--paper);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--dur-2) var(--ease-quart),background var(--dur-2),border-color var(--dur-2),color var(--dur-2);
}
.btn .arw{flex:none;transition:transform .2s var(--ease-quart)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arw{transform:translate(3px,-3px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--line-3)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(255,255,255,.04)}
.btn-sm{padding:9px 16px;font-size:12.5px;border-radius:var(--r-2)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* =========================================================================
   SVCS — hairline-gap grid (1px gap on --line background = seamless rules)
   ========================================================================= */
.svcs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:42px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-6);overflow:hidden}
@media(max-width:640px){.svcs{grid-template-columns:1fr}}
.svc{background:var(--void);padding:30px 28px;display:flex;flex-direction:column;gap:13px;transition:background .22s}
.svc:hover{background:var(--ink)}
.svc .k{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--mut)}
.svc h3{font-size:var(--fs-h4)}
.svc p{color:var(--body);font-size:var(--fs-sm);line-height:1.62;margin:0}

/* =========================================================================
   CARD — ink panel with travelling corner marks
   ========================================================================= */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{
  position:relative;border:1px solid var(--line);border-radius:var(--r-6);background:var(--ink);
  padding:28px 26px;display:flex;flex-direction:column;gap:16px;min-height:236px;
  transition:border-color .2s,background .2s;
}
.card:hover{border-color:var(--line-3);background:var(--panel-2)}
.card .crn{position:absolute;width:9px;height:9px;pointer-events:none;transition:transform var(--dur-3) var(--ease-quart)}
.card .crn::before,.card .crn::after{content:"";position:absolute;background:var(--line-3);transition:background var(--dur-3)}
.card .crn::before{width:9px;height:1px}
.card .crn::after{width:1px;height:9px}
.card .crn.a{top:12px;left:12px}
.card .crn.b{bottom:12px;right:12px}
.card .crn.b::before,.card .crn.b::after{bottom:0;right:0}
.card:hover .crn.a{transform:translate(-3px,-3px)}
.card:hover .crn.b{transform:translate(3px,3px)}
.card:hover .crn::before,.card:hover .crn::after{background:rgba(255,255,255,.42)}
.card .head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card .status{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:8px}
.card .status .d{width:5px;height:5px;border-radius:50%;background:var(--graphite)}
.card .plat{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.card .name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);letter-spacing:var(--tr-head);color:var(--paper);margin:0}
.card .tags{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:-6px 0 0}
.card .line{color:var(--body);font-size:var(--fs-body);line-height:1.6;margin-top:auto;max-width:34ch}

/* =========================================================================
   WORK SPECIMENS — real product screens inside a .card
   Actual shipped UI, not a mockup: Allby's App Store home shot (lifted out
   of its marketing device frame) and Hark's own home render. Because both
   are images, no product colour enters this stylesheet at all — the Zoel
   system stays uncontaminated by construction rather than by convention.
   Anchored to the card top and cropped by the card's overflow, so the
   screen reads as a specimen plate rather than a floating phone mockup.
   ========================================================================= */
.card:has(.spec){min-height:300px;overflow:hidden}
.card:has(.spec) .crn.b{display:none}        /* one registration mark, not two over artwork */
.card:has(.spec) .line{max-width:24ch}
.card:has(.spec) .tags{max-width:30ch}
.spec{
  position:absolute;top:62px;right:24px;width:148px;
  border-radius:18px;border:1px solid var(--line-3);overflow:hidden;
  line-height:0;pointer-events:none;
  transition:transform .4s var(--ease-quart);
}
.spec img{display:block;width:100%;height:auto}
.card:hover .spec{transform:translateY(-8px)}
/* below this width the screen would crowd the card copy — drop it, keep the text */
@media(max-width:430px){
  .spec{display:none}
  .card:has(.spec){min-height:236px}
  .card:has(.spec) .line{max-width:34ch}
}

/* =========================================================================
   CTABAND — mid-page conversion rule
   ========================================================================= */
.ctaband{margin-top:6px;border-top:1px solid var(--line);padding-top:34px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.ctaband p{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.4vw,26px);letter-spacing:-.02em;color:var(--paper);margin:0;max-width:20ch;text-wrap:balance}
.ctaband .acts{display:flex;flex-wrap:wrap;gap:12px}

/* =========================================================================
   SIGNAL — process path, nodes light in sequence
   ========================================================================= */
.signal{display:flex;align-items:stretch;gap:0;margin-top:44px}
.node{
  flex:1;border:1px solid var(--line);background:var(--ink);border-radius:var(--r-5);
  padding:24px 22px;display:flex;flex-direction:column;gap:12px;position:relative;
  transition:border-color .4s var(--ease-quart);
}
.node .idx{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:9px}
.node .idx .tick{width:6px;height:6px;background:var(--graphite);transition:background var(--dur-3)}
.node .idx[data-live] .tick{background:var(--amber)}
.node .name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);letter-spacing:-.02em;color:var(--paper);margin:0}
.node .desc{color:var(--body);font-size:var(--fs-sm);line-height:1.55;margin:0}
.conn{flex:none;width:44px;align-self:center;display:flex;align-items:center;justify-content:center;color:var(--dim);position:relative}
.conn svg{width:44px;height:12px}
.conn::after{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--amber);opacity:0;transform:translate(-50%,-50%)}
.signal.live .node{animation:node-wake var(--dur-4) var(--ease-quart) both}
.signal.live .node:nth-child(3){animation-delay:.32s}
.signal.live .node:nth-child(5){animation-delay:.64s}
.signal.live .node:nth-child(1) .tick,.signal.live .node:nth-child(5) .tick{animation:tick-flash .7s ease both}
.signal.live .node:nth-child(5) .tick{animation-delay:.64s}
.signal.live .conn:nth-child(2)::after{animation:wire .55s ease .18s both}
.signal.live .conn:nth-child(4)::after{animation:wire .55s ease .5s both}
@keyframes node-wake{0%{border-color:var(--line)}45%{border-color:var(--line-3)}100%{border-color:var(--line)}}
@keyframes tick-flash{0%{background:var(--graphite)}35%{background:var(--amber)}100%{background:var(--graphite)}}
@keyframes wire{0%{left:2px;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:42px;opacity:0}}
@media(max-width:760px){.signal{flex-direction:column}.conn{width:100%;height:34px;transform:rotate(90deg)}}

/* =========================================================================
   STACK — keyed spec rows (label column + value)
   ========================================================================= */
.stack{margin-top:42px;border-top:1px solid var(--line)}
.stack .grp{display:flex;gap:32px;padding:22px 0;border-bottom:1px solid var(--line-2);align-items:baseline;transition:border-color .25s}
.stack .grp:hover{border-color:var(--line-3)}
.stack .grp-k{
  flex:none;width:132px;padding-top:5px;
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--mut);transition:color .25s;
}
.stack .grp:hover .grp-k{color:var(--paper)}
.stack .grp-v{
  margin:0;color:var(--paper);font-family:var(--font-display);font-weight:500;
  font-size:clamp(17px,1.9vw,21px);letter-spacing:-.01em;line-height:1.45;
  display:flex;flex-wrap:wrap;align-items:baseline;
}
.stack .grp-v .t{white-space:nowrap}
.stack .grp-v .sep{color:var(--dim);margin:0 13px}
.stack .grp-v .sub{color:var(--mut);font-size:.78em;letter-spacing:0;max-width:none}
@media(max-width:560px){.stack .grp{flex-direction:column;gap:10px;padding:18px 0}.stack .grp-k{width:auto;padding-top:0}}

/* =========================================================================
   TEAM
   ========================================================================= */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:40px}
.person{border:1px solid var(--line);border-radius:var(--r-6);background:var(--ink);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.person .avatar{width:52px;height:52px;border-radius:var(--r-4);background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--paper)}
.person .nm{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h5);letter-spacing:-.02em;color:var(--paper);margin:0}
.person .role{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:-8px 0 0}
.person .bio{color:var(--body);font-size:var(--fs-sm);line-height:1.6;margin:0}
.person .links{display:flex;gap:16px;margin-top:auto;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.06em;color:var(--mut)}
.person .links a{color:var(--mut);border-bottom:1px solid var(--line-3)}
.person .links a:hover{color:var(--paper);border-color:var(--paper)}

/* =========================================================================
   POINTS — 3-up rule-topped statements
   ========================================================================= */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px;margin-top:40px}
@media(max-width:720px){.points{grid-template-columns:1fr;gap:0}}
.point{border-top:1px solid var(--line);padding-top:20px}
@media(max-width:720px){.point{padding:22px 0;border-top:1px solid var(--line-2)}.point:first-child{border-top:1px solid var(--line)}}
.point .lbl{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:0 0 13px;display:flex;align-items:center;gap:9px}
.point .lbl .tick{width:6px;height:6px}
.point .txt{color:var(--paper);font-size:17px;line-height:1.4;letter-spacing:var(--tr-tight);margin:0 0 10px;font-weight:500}

/* =========================================================================
   ENG — 3-up engagement columns
   ========================================================================= */
.eng{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media(max-width:720px){.eng{grid-template-columns:1fr;gap:0}}
.eng .col{border-top:1px solid var(--line);padding-top:20px}
@media(max-width:720px){.eng .col{padding:22px 0;border-top:1px solid var(--line-2)}.eng .col:first-child{border-top:1px solid var(--line)}}
.eng .col .k{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:0 0 12px}
.eng .col .h{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:var(--tr-tight);color:var(--paper);margin:0 0 8px}
.eng .col p{color:var(--body);font-size:var(--fs-sm);line-height:1.62;margin:0}

/* =========================================================================
   FAQ — the plus collapses to an amber minus when open
   ========================================================================= */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-display);font-weight:500;font-size:clamp(16px,1.9vw,19px);letter-spacing:-.01em;color:var(--paper);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:14px;height:14px;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--mut);transition:transform .25s var(--ease-quart),background .2s}
.faq summary .pm::before{top:6px;left:0;width:14px;height:1.5px}
.faq summary .pm::after{left:6px;top:0;width:1.5px;height:14px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq details[open] summary .pm::before{background:var(--amber)}
.faq .a{color:var(--body);font-size:var(--fs-body);line-height:1.7;margin:0;padding:0 0 22px;max-width:70ch}

/* =========================================================================
   CONTACT + INTAKE FORM
   ========================================================================= */
.contact{border-top:1px solid var(--line);padding:var(--sp-10) 0 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:40px;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:36px}}
.contact .line{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,3.4vw,36px);letter-spacing:var(--tr-head);color:var(--paper);max-width:18ch;margin:0;line-height:1.22;text-wrap:balance}
.contact .side .line{margin-bottom:22px}
.contact .side .note{color:var(--body);font-size:var(--fs-body);line-height:1.7;max-width:38ch;margin:0 0 26px}
.contact .side .direct{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--mut);line-height:2}
.contact .side .direct a{color:var(--paper);border-bottom:1px solid var(--graphite)}
.contact .side .direct a:hover{border-color:var(--paper)}
.contact .mail{color:var(--paper);border-bottom:1px solid var(--graphite);padding-bottom:3px;transition:border-color .16s}
.contact .mail:hover{border-color:var(--paper)}

.intake{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.intake .full{grid-column:1 / -1}
@media(max-width:560px){.intake{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.field input,.field textarea,.field select{
  background:var(--ink);border:1px solid var(--line);border-radius:9px;padding:12px 14px;
  color:var(--paper);font-family:var(--font-body);font-size:var(--fs-body);
  transition:border-color var(--dur-2);width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--mut)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.field textarea{resize:vertical;min-height:104px}
.field select{appearance:none;cursor:pointer}
.form-status{grid-column:1 / -1;display:none;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;padding:16px 18px;border-radius:var(--r-3);border:1px solid var(--line-3);background:var(--ink);color:var(--paper)}
.form-status.show{display:block}
.form-status b{color:var(--paper)}
.next-step{grid-column:1 / -1;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.06em;color:var(--mut);margin:2px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================================
   FOOTER
   ========================================================================= */
footer{margin-top:80px;border-top:1px solid var(--line);padding:34px 0 64px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
footer .fwm{width:120px;line-height:0}
footer .meta{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--mut);line-height:1.95;text-align:right}
footer .meta a{color:var(--mut)}
footer .meta a:hover{color:var(--paper)}
footer .egg{color:var(--dim);opacity:.7;letter-spacing:.05em;text-transform:none}
@media(max-width:520px){footer .meta{text-align:left}}

/* =========================================================================
   MOTION — hero load reveal + generic scroll rise
   ========================================================================= */
.reveal{opacity:0;transform:translateY(16px);animation:rise .9s var(--ease) forwards}
.reveal.d1{animation-delay:.10s}
.reveal.d2{animation-delay:.22s}
.reveal.d3{animation-delay:.34s}
.reveal.d4{animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:none}}
.rise{opacity:0;transform:translateY(14px)}
.rise.in{animation:rise .6s var(--ease-quart) both}
.hero .bgz{opacity:0;animation:zin 1.6s ease .1s forwards}
@keyframes zin{to{opacity:.05}}
.hero .bgz polygon{opacity:0;animation:seg .8s ease forwards}
.hero .bgz polygon:nth-child(1){animation-delay:.22s}
.hero .bgz polygon:nth-child(2){animation-delay:.44s}
.hero .bgz polygon:nth-child(3){animation-delay:.66s}
@keyframes seg{to{opacity:1}}
/* the amber period blips in last — the one wink */
.wmwrap circle{transform-box:fill-box;transform-origin:center;animation:blip .5s var(--ease-quint) .82s both}
@keyframes blip{0%{transform:scale(0)}100%{transform:scale(1)}}

/* =========================================================================
   SCROLL ARRIVAL — sections land once, on the hero's curve
   Two roles only: --ease arrives, --ease-quart responds.
   Gated on `.motion-ready` (set by a one-line head script) so the page still
   renders in full when JS is unavailable, and on no-preference so reduced
   motion never hides anything.
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
  .motion-ready [data-rv] > *{opacity:0;transform:translateY(14px)}
  .motion-ready [data-rv].in > *{
    opacity:1;transform:none;
    transition:opacity .52s var(--ease),transform .52s var(--ease);
  }
  .motion-ready [data-rv].in > :nth-child(2){transition-delay:60ms}
  .motion-ready [data-rv].in > :nth-child(3){transition-delay:90ms}
  .motion-ready [data-rv].in > :nth-child(4){transition-delay:115ms}
  .motion-ready [data-rv].in > :nth-child(n+5){transition-delay:135ms}

  /* the two proof cards land in sequence — the page's one staggered beat */
  .motion-ready [data-rv] .cards .card{opacity:0;transform:translateY(10px)}
  .motion-ready [data-rv].in .cards .card{
    opacity:1;transform:none;
    transition:opacity .52s var(--ease) .12s,transform .52s var(--ease) .12s;
  }
  .motion-ready [data-rv].in .cards .card:nth-child(2){transition-delay:.2s}

  /* disclosure — the answer arrives, it doesn't blink into place */
  .faq details[open] .a{animation:faq-in .2s var(--ease-quart) both}
  @keyframes faq-in{from{opacity:0;transform:translateY(-6px)}}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.rise,.hero .bgz,.hero .bgz polygon{opacity:1;transform:none}
  .hero .bgz{opacity:.05}
  .wmwrap circle{transform:none!important}
  .scan{display:none}
  .scroll-prog{display:none}
  .bar .status .dot{opacity:1}
}

/* =========================================================================
   HERO MARK — WebGL layer (progressive enhancement)
   The .bgz watermark upgrades from flat SVG to extruded geometry when WebGL
   is available; the SVG stays untouched as the fallback. Declared last so it
   overrides the .bgz opacity animation above.
   A 1px wireframe is far sparser than a filled silhouette, so the GL layer
   needs .34 to read at all — the SVG watermark's .05 is not comparable.
   The mark also sits fully inside its canvas rather than bleeding, so the
   container runs to the edge — the breathing room comes from the framing
   inside the scene, not from an extra offset stacked on top of it.
   ========================================================================= */
.hero .bgz canvas{display:block;width:100%;aspect-ratio:1}
.hero .bgz.bgz--gl > svg{display:none}
.hero .bgz.bgz--gl{right:0;animation:zin-gl 1.6s ease .1s forwards}
@keyframes zin-gl{to{opacity:.34}}
@media(prefers-reduced-motion:reduce){
  .hero .bgz.bgz--gl{opacity:.34;animation:none}
}