/* =====================================================================
   NODELINK — design tokens. The whole site derives from these.
   Palette: warm ivory / espresso / bronze — continuous with the printed
   leaflets and posters (chocolate + antique gold), and deliberately the
   opposite pole from dark-mode agency sites. No green anywhere.
   Contrast: ink on bg ≈ 13.8:1 · soft ≈ 7:1 · bronze text ≈ 5.1:1 (AA).
   ===================================================================== */
:root{
  --bg:          #FAF7F2;   /* warm ivory ground            */
  --surface:     #FFFFFF;   /* raised cards                 */
  --surface-2:   #F1EBE2;   /* tinted panels                */
  --ink:         #211A16;   /* espresso — primary text      */
  --ink-soft:    #5C5048;   /* secondary text               */
  --muted:       #8A7D72;   /* labels, captions             */
  --line:        #E3DAD0;   /* hairlines                    */
  --line-strong: #C9BCAD;

  --accent:        #8F5F24; /* bronze — links, accents (AA on bg) */
  --accent-strong: #744C1C; /* hover / active                     */
  --accent-soft:   #F3E6D2; /* accent tint fills                  */
  --on-accent:     #FFF9F0; /* text on bronze                     */

  /* inverted (espresso) sections */
  --dark:        #211A16;
  --dark-2:      #2C231E;
  --dark-text:   #F3EDE6;
  --dark-soft:   #BCAE9F;
  --dark-line:   #3D322A;
  --gold:        #D9A45B;   /* accent on dark (≈7:1) */

  --font-display:"Fraunces", Georgia, serif;
  --font-sans:   "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "Spline Sans Mono", "SF Mono", Consolas, monospace;

  --wrap: 1280px;
  --pad: clamp(20px, 4vw, 52px);
  --sect: clamp(90px, 13vw, 184px);
  --ease: cubic-bezier(.22,1,.3,1);
}

/* ---------- reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; background:var(--bg) }
/* body is transparent so the fixed ambient #bgnet canvas (z-index:-1)
   shows through light sections; dark bands paint their own ground */
body{
  background:transparent; color:var(--ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
#bgnet{ position:fixed; inset:0; width:100vw; height:100vh;
  z-index:-1; pointer-events:none }
/* film grain — fills the "empty" ground with quiet texture */
body::after{ content:""; position:fixed; inset:0; z-index:2;
  pointer-events:none; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
img{ max-width:100%; display:block }
a{ color:var(--accent) }
a:hover{ color:var(--accent-strong) }
::selection{ background:var(--accent); color:var(--on-accent) }

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--bg); padding:10px 18px;
  font-family:var(--font-mono); font-size:13px;
}
.skip:focus{ left:0 }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); display:flex;
  align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--accent); flex-shrink:0 }

h1,h2,h3{ font-family:var(--font-display); font-weight:500; color:var(--ink) }
.d1{ font-size:clamp(46px,8vw,118px);  line-height:.98;  letter-spacing:-.024em }
.d2{ font-size:clamp(33px,4.8vw,64px); line-height:1.03; letter-spacing:-.018em }
.d3{ font-size:clamp(22px,2.4vw,31px); line-height:1.15 }
h1 em, h2 em{ font-style:italic; color:var(--accent); font-weight:400 }
.lede{ font-size:clamp(17px,1.6vw,21px); color:var(--ink-soft); max-width:56ch }
.measure{ max-width:62ch }

/* huge ghost section numeral — the editorial signature */
.sect-no{
  font-family:var(--font-display); font-weight:500; line-height:.8;
  font-size:clamp(90px,14vw,220px); color:transparent;
  -webkit-text-stroke:1px var(--line-strong);
  user-select:none; pointer-events:none;
}
@supports not (-webkit-text-stroke:1px black){
  .sect-no{ color:var(--surface-2) }
}

/* ---------- header ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:90;
  transition:box-shadow .35s ease;
}
/* The translucent blur lives on a pseudo-element: backdrop-filter on the
   header itself would make it the containing block for the fixed-position
   mobile menu, so the "hidden" menu would render inside the header bar. */
.site-head::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:transparent; backdrop-filter:blur(14px);
  opacity:0; transition:opacity .35s ease;
}
.site-head.scrolled{ box-shadow:0 1px 0 var(--line) }
.site-head.scrolled::before{
  background:color-mix(in srgb, var(--bg) 90%, transparent); opacity:1;
}
@supports not (background:color-mix(in srgb, white 50%, transparent)){
  .site-head.scrolled::before{ background:rgba(250,247,242,.92) }
}
.site-head .bar{
  max-width:var(--wrap); margin-inline:auto; padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{
  font-family:var(--font-display); font-weight:600; font-size:21px;
  color:var(--ink); text-decoration:none; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:11px;
}
.brand:hover{ color:var(--ink) }
.brand svg{ flex-shrink:0; display:block }
.brand .lk{ stroke:var(--accent) }
.brand .nd{ fill:var(--accent) }
.brand .nd.g{ fill:var(--ink) }

.nav-links{ display:flex; gap:34px; list-style:none; align-items:center }
.nav-links a{
  font-size:15px; color:var(--ink-soft); text-decoration:none; position:relative;
  padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--accent); transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--ink) }
.nav-links a:hover::after, .nav-links a[aria-current]::after{ width:100% }
.nav-links a[aria-current]{ color:var(--ink) }
.nav-cta{
  font-family:var(--font-sans); font-weight:600; font-size:15px;
  background:var(--ink); color:var(--bg) !important; text-decoration:none;
  padding:11px 22px; border-radius:999px; transition:background .25s ease;
}
.nav-cta:hover{ background:var(--accent-strong) }
.nav-cta::after{ display:none }

.menu-btn{ display:none; background:none; border:1px solid var(--line-strong);
  border-radius:999px; padding:10px 16px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.14em; cursor:pointer; color:var(--ink) }

#progress{ position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--gold)); z-index:95 }

/* ---------- ring cursor (desktop fine-pointer only; JS-gated) ---------- */
#cursor{
  position:fixed; top:0; left:0; width:34px; height:34px; z-index:120;
  border:1.5px solid var(--accent); border-radius:50%;
  pointer-events:none; opacity:0;
  transform:translate(-100px,-100px);
  transition:width .25s var(--ease), height .25s var(--ease), opacity .3s ease,
             border-color .25s ease;
}
#cursor.on{ opacity:.65 }
#cursor.hot{ width:52px; height:52px; border-color:var(--gold); opacity:.9 }

/* ---------- hero ---------- */
.hero{ position:relative; padding-top:clamp(150px,22vh,240px); padding-bottom:var(--sect) }
.hero-net{
  position:absolute; right:max(calc((100vw - var(--wrap)) / 2 - 60px), -40px);
  top:clamp(90px,14vh,170px);
  width:clamp(300px,38vw,620px); z-index:-1; opacity:.9;
}
.hero-net svg{ width:100%; height:auto; display:block }
.net-l{ stroke:var(--line-strong); stroke-width:1; fill:none }
.net-l.gl{ stroke:var(--accent); stroke-width:1.5 }
.net-n{ fill:var(--bg); stroke:var(--line-strong); stroke-width:1.2 }
.net-n.gn{ stroke:var(--accent); fill:var(--accent-soft) }
.net-n.core{ fill:var(--accent); stroke:var(--accent) }
/* draw-in */
.js .net-l{ stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s var(--ease) }
.js .net-n{ opacity:0; transition:opacity .8s ease }
.js .hero-net.on .net-l{ stroke-dashoffset:0 }
.js .hero-net.on .net-n{ opacity:1 }
.js .hero-net.on .net-n:nth-of-type(odd){ transition-delay:.9s }
.js .hero-net.on .net-n:nth-of-type(even){ transition-delay:1.15s }

/* ---------- connect-the-nodes game (replaces the static hero svg) ----
   JS swaps the fallback SVG for a canvas; drag node to node to link the
   systems. Desktop keeps the hero-net footprint; mobile shows it in-flow
   below the hero copy (it was display:none there before — part of why
   the mobile background felt empty). */
/* the static svg sits at z-index:-1 behind .wrap; the game must be
   hittable, so it rises above the (visually empty) right side of the
   hero — the copy and buttons live on the left and stay clickable */
.hero-net.ng-on{ opacity:1; z-index:1 }
.hero-net.ng-on canvas{ width:100%; height:100%; display:block;
  touch-action:none; cursor:crosshair }
.ng-cap{ position:absolute; left:2px; bottom:-30px; font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap }
.ng-cap a{ color:var(--accent); text-decoration:none }
.ng-cap a:hover{ color:var(--accent-strong) }
.ng-cap .ng-replay{ cursor:pointer; color:var(--accent); margin-left:10px }
@media (min-width:761px){
  .hero-net.ng-on{ height:clamp(300px,36vw,520px) }
}

.hero h1{ margin:20px 0 28px; max-width:12ch }
.hero .lede{ max-width:46ch }
.hero-meta{ display:flex; gap:28px; flex-wrap:wrap; margin-top:38px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted) }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:16px; text-decoration:none; cursor:pointer;
  padding:15px 30px; border-radius:999px; border:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, color .25s ease,
             transform .2s var(--ease);
}
.btn-primary{ background:var(--accent); color:var(--on-accent) }
.btn-primary:hover{ background:var(--accent-strong); color:var(--on-accent) }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink) }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink) }
.btn .arr{ transition:transform .3s var(--ease) }
.btn:hover .arr{ transform:translateX(4px) }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap }
.hero .btn-row{ margin-top:36px }

/* ---------- marquee ---------- */
.marquee{
  border-block:1px solid var(--line); padding-block:18px;
  overflow:hidden; white-space:nowrap; position:relative;
}
.marquee .track{ display:inline-flex; gap:0; will-change:transform }
.js .marquee .track{ animation:mq 46s linear infinite }
.marquee:hover .track{ animation-play-state:paused }
.marquee span{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); padding-inline:26px;
  display:inline-flex; align-items:center; gap:26px;
}
.marquee span::after{ content:"◆"; font-size:8px; color:var(--accent) }
@keyframes mq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- sections ---------- */
section{ padding-block:var(--sect) }
.sect-head{ margin-bottom:clamp(36px,5vw,68px) }
.sect-head h2{ margin-top:16px }
.sect-head .lede{ margin-top:18px }
.ruled{ border-top:1px solid var(--line) }
.head-row{ display:grid; grid-template-columns:auto 1fr; align-items:start;
  gap:clamp(20px,4vw,64px) }
.head-row .sect-no{ margin-top:-8px }

/* numbered loss grid */
.loss-grid{ display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); column-gap:clamp(16px,3vw,48px) }
.loss{ padding:30px 0; border-bottom:1px solid var(--line);
  display:flex; gap:16px; align-items:baseline; position:relative }
.loss::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px;
  width:0; background:var(--accent); transition:width .5s var(--ease) }
.loss:hover::after{ width:100% }
.loss .n{ font-family:var(--font-mono); font-size:12px; color:var(--accent) }
.loss p{ font-family:var(--font-display); font-size:clamp(18px,1.9vw,23px);
  line-height:1.25; color:var(--ink) }
.loss-cap{ font-family:var(--font-display); font-style:italic;
  font-size:clamp(22px,2.6vw,32px); color:var(--accent); margin-top:40px }

/* service columns (home overview) */
.svc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,72px) }
.svc-col > h3{ font-family:var(--font-mono); font-size:13px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  padding-bottom:16px; border-bottom:2px solid var(--ink); margin-bottom:4px }
.svc{ padding:26px 0; border-bottom:1px solid var(--line);
  transition:border-color .3s ease }
.svc:hover{ border-bottom-color:var(--accent) }
.svc h4{ font-family:var(--font-display); font-weight:500; font-size:21.5px;
  display:flex; justify-content:space-between; gap:14px; align-items:baseline }
.svc h4 .flag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap;
  border:1px solid var(--accent); border-radius:999px; padding:4px 10px }
.svc p{ color:var(--ink-soft); font-size:15.5px; margin-top:9px }
.svc .who{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-top:11px; display:block }
.svc-more{ margin-top:52px }

/* services index page — numbered editorial rows */
.svc-index{ border-top:1px solid var(--line) }
.svc-row{ display:grid; grid-template-columns:110px 1.1fr 1.6fr auto;
  gap:clamp(16px,3vw,48px); align-items:baseline;
  padding:clamp(26px,3.5vw,40px) 0; border-bottom:1px solid var(--line);
  position:relative }
.svc-row::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px;
  width:0; background:var(--accent); transition:width .55s var(--ease) }
.svc-row:hover::after{ width:100% }
.svc-row .no{ font-family:var(--font-display); font-size:clamp(24px,2.6vw,36px);
  color:transparent; -webkit-text-stroke:1px var(--line-strong);
  transition:color .35s ease }
@supports not (-webkit-text-stroke:1px black){ .svc-row .no{ color:var(--line-strong) } }
.svc-row:hover .no{ color:var(--accent); -webkit-text-stroke:1px var(--accent) }
.svc-row h3{ font-size:clamp(21px,2.3vw,29px); font-weight:500 }
.svc-row h3 .flag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap;
  border:1px solid var(--accent); border-radius:999px; padding:4px 10px;
  vertical-align:middle; margin-left:12px; display:inline-block }
.svc-row p{ color:var(--ink-soft); font-size:15.5px; max-width:52ch }
.svc-row .who{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
  justify-self:end; text-align:right }

/* dark band */
.band{ background:var(--dark); color:var(--dark-text) }
.band h2, .band h3, .band h4{ color:var(--dark-text) }
.band .eyebrow{ color:var(--gold) }
.band .eyebrow::before{ background:var(--gold) }
.band .lede, .band p{ color:var(--dark-soft) }
.band h2 em{ color:var(--gold) }
.band .sect-no{ color:transparent; -webkit-text-stroke:1px var(--dark-line) }
@supports not (-webkit-text-stroke:1px black){ .band .sect-no{ color:var(--dark-2) } }

/* pipeline (case study) */
.pipeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
  margin-top:clamp(36px,5vw,60px) }
.pipeline.p3{ grid-template-columns:repeat(3,1fr) }
.pnode{ border:1px solid var(--dark-line); border-radius:4px; padding:26px 22px;
  background:var(--dark-2); position:relative;
  transition:border-color .3s ease, transform .3s var(--ease) }
.pnode:hover{ border-color:var(--gold); transform:translateY(-4px) }
.pnode .n{ font-family:var(--font-mono); font-size:11px; color:var(--gold);
  letter-spacing:.12em }
.pnode h4{ font-family:var(--font-display); font-size:19px; margin:12px 0 8px }
.pnode p{ font-size:13.5px; line-height:1.5 }
.pnode.gate{ background:#33241573; border-color:var(--gold) }
.pnode.gate::before{ content:"THE HONESTY GATE"; position:absolute; top:-9px; left:18px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
  color:var(--gold); background:var(--dark); padding:0 8px }
.quiet{ margin-top:44px; border-left:3px solid var(--gold); padding:4px 0 4px 22px;
  max-width:70ch }
.quiet strong{ color:var(--dark-text) }
.quiet-light{ margin-top:44px; border-left:3px solid var(--accent);
  padding:4px 0 4px 22px; max-width:70ch; color:var(--ink-soft) }
.quiet-light strong{ color:var(--ink) }

/* price grid (dark) */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin-top:clamp(36px,5vw,60px) }
.price{ border:1px solid var(--dark-line); border-radius:4px; padding:28px 24px;
  background:var(--dark-2); transition:border-color .3s ease, transform .3s var(--ease) }
.price:hover{ border-color:var(--gold); transform:translateY(-4px) }
.price .cad{ font-family:var(--font-mono); font-size:11px; color:var(--gold);
  letter-spacing:.14em; text-transform:uppercase }
.price .amt{ font-family:var(--font-display); font-size:clamp(26px,2.6vw,36px);
  color:var(--dark-text); margin:10px 0 8px }
.price p{ font-size:13.5px; line-height:1.55 }

/* process steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.5vw,48px) }
.step{ border-top:2px solid var(--ink); padding-top:22px }
.step .n{ font-family:var(--font-mono); font-size:12px; color:var(--accent);
  letter-spacing:.14em }
.step h3{ font-size:22px; margin:12px 0 10px }
.step p{ color:var(--ink-soft); font-size:15.5px }

/* principles (about) */
.principles{ border-top:1px solid var(--line) }
.principle{ display:grid; grid-template-columns:72px 1fr 1.4fr;
  gap:clamp(16px,3vw,48px); padding:36px 0; border-bottom:1px solid var(--line) }
.principle .n{ font-family:var(--font-mono); font-size:13px; color:var(--accent) }
.principle h3{ font-size:clamp(20px,2.2vw,27px) }
.principle p{ color:var(--ink-soft) }

/* two-up with image */
.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,84px);
  align-items:center }
.two-up figure{ position:relative }
.two-up img{ border-radius:4px; box-shadow:0 24px 60px -28px rgba(33,26,22,.35);
  width:100% }
.two-up figure::after{ content:""; position:absolute; inset:16px -16px -16px 16px;
  border:1px solid var(--line-strong); border-radius:4px; z-index:-1 }
.two-up .story-p{ margin-top:18px; color:var(--ink-soft); max-width:62ch }
.two-up h2 + .story-p{ margin-top:22px }

/* name origin strip (about) */
.name-strip{ background:var(--surface-2); border-block:1px solid var(--line) }
.name-strip .inner{ display:grid; grid-template-columns:auto 1fr;
  gap:clamp(24px,5vw,80px); align-items:center }
.name-strip .word{ font-family:var(--font-display); font-size:clamp(34px,5vw,64px);
  letter-spacing:-.02em; white-space:nowrap }
.name-strip .word b{ font-weight:600; color:var(--accent) }
.name-strip p{ color:var(--ink-soft); max-width:56ch }

/* FAQ */
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ cursor:pointer; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:20px;
  padding:26px 0; font-family:var(--font-display); font-size:clamp(18px,2vw,23px) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary .tog{ font-family:var(--font-mono); color:var(--accent);
  font-size:20px; transition:transform .3s var(--ease); flex-shrink:0 }
.faq details[open] .tog{ transform:rotate(45deg) }
.faq .a{ padding:0 0 28px; color:var(--ink-soft); max-width:68ch }

/* contact cards */
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.ccard{ background:var(--surface); border:1px solid var(--line); border-radius:4px;
  padding:36px 32px; transition:border-color .3s ease, transform .3s var(--ease) }
.ccard:hover{ border-color:var(--accent); transform:translateY(-3px) }
.ccard .nm{ font-family:var(--font-display); font-size:24px }
.ccard .role{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:6px 0 20px }
.ccard a{ display:block; text-decoration:none; margin-top:6px }
.ccard .tel{ font-family:var(--font-mono); font-size:clamp(20px,2.2vw,26px);
  color:var(--accent) }
.ccard .mail{ font-size:14.5px; color:var(--ink-soft); word-break:break-all }
.ccard a:hover .tel{ color:var(--accent-strong) }

/* form */
.form{ display:grid; gap:22px; max-width:780px }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.form label{ display:grid; gap:9px; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.form input, .form select, .form textarea{
  font-family:var(--font-sans); font-size:16.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:4px; padding:14px 15px; width:100%;
  transition:border-color .25s ease;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:var(--accent);
}
.form textarea{ resize:vertical; min-height:110px }
.chips{ display:flex; flex-wrap:wrap; gap:10px }
.chip input{ position:absolute; opacity:0; width:0; height:0 }
.chip span{ display:inline-block; border:1px solid var(--line-strong);
  border-radius:999px; padding:9px 18px; font-size:14.5px; color:var(--ink-soft);
  cursor:pointer; transition:all .22s ease; font-family:var(--font-sans);
  text-transform:none; letter-spacing:0 }
.chip input:checked + span{ background:var(--accent-soft); border-color:var(--accent);
  color:var(--ink) }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px }
.form-note{ font-size:13.5px; color:var(--muted); max-width:60ch }
.form-note.ok{ color:var(--accent) }
.legend{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px }
.fieldset-plain{ border:none }

/* ---------- pre-footer CTA (espresso) ---------- */
.cta-big{ background:var(--dark); color:var(--dark-text); position:relative;
  overflow:hidden }
.cta-big .eyebrow{ color:var(--gold) }
.cta-big .eyebrow::before{ background:var(--gold) }
.cta-big h2{ color:var(--dark-text); font-size:clamp(38px,6.4vw,92px);
  line-height:1.0; letter-spacing:-.022em; max-width:14ch; margin-top:18px }
.cta-big h2 em{ color:var(--gold) }
.cta-big .lede{ color:var(--dark-soft); margin-top:22px }
.cta-big .btn-row{ margin-top:40px }
.cta-big .btn-ghost{ border-color:var(--dark-line); color:var(--dark-text) }
.cta-big .btn-ghost:hover{ border-color:var(--gold); color:var(--dark-text) }
.cta-big .net-bg{ position:absolute; right:-6%; bottom:-14%;
  width:clamp(280px,36vw,560px); opacity:.33; pointer-events:none }
.cta-big .net-bg .net-l{ stroke:var(--dark-line) }
.cta-big .net-bg .net-l.gl{ stroke:var(--gold) }
.cta-big .net-bg .net-n{ fill:var(--dark); stroke:var(--dark-line) }
.cta-big .net-bg .net-n.gn{ stroke:var(--gold); fill:var(--dark-2) }
.cta-big .net-bg .net-n.core{ fill:var(--gold); stroke:var(--gold) }

/* ---------- footer ---------- */
.site-foot{ background:var(--dark); color:var(--dark-soft);
  border-top:1px solid var(--dark-line); padding:64px 0 40px }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px }
.site-foot .brand{ color:var(--dark-text) }
.site-foot .brand .lk{ stroke:var(--gold) }
.site-foot .brand .nd{ fill:var(--gold) }
.site-foot .brand .nd.g{ fill:var(--dark-text) }
.foot-tag{ margin-top:16px; font-size:14.5px; max-width:34ch }
.foot-h{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:16px }
.site-foot ul{ list-style:none; display:grid; gap:10px }
.site-foot a{ color:var(--dark-soft); text-decoration:none; font-size:14.5px }
.site-foot a:hover{ color:var(--dark-text) }
.site-foot .ftel{ font-family:var(--font-mono); color:var(--gold) }
.site-foot .ftel:hover{ color:var(--dark-text) }
.fineprint{ margin-top:48px; padding-top:24px; border-top:1px solid var(--dark-line);
  font-family:var(--font-mono); font-size:11.5px; color:var(--dark-soft);
  letter-spacing:.04em; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap }

/* ---------- 404 ---------- */
.lost{ min-height:72vh; display:grid; place-content:center; text-align:center;
  padding-top:120px }
.lost .code{ font-family:var(--font-display); font-size:clamp(90px,18vw,220px);
  line-height:1; color:transparent; -webkit-text-stroke:1.5px var(--accent) }
@supports not (-webkit-text-stroke:1px black){ .lost .code{ color:var(--accent-soft) } }
.lost p{ color:var(--ink-soft); margin:18px 0 30px }
.lost .btn-row{ justify-content:center }

/* ---------- motion ---------- */
.js .rv{ opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease) }
.js .rv.on{ opacity:1; transform:none }
.js [data-stagger] > *{ opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease) }
.js [data-stagger].on > *{ opacity:1; transform:none }

.ln{ display:block; overflow:hidden }
.ln > i{ display:block; font-style:inherit; transform:translateY(108%);
  transition:transform 1s var(--ease) }
.on .ln > i, .ln.on > i{ transform:none }
.ln:nth-child(2) > i{ transition-delay:.08s }
.ln:nth-child(3) > i{ transition-delay:.16s }
.ln:nth-child(4) > i{ transition-delay:.24s }

/* ---------- char flip-up reveal (bytglen data-split port) ----------
   Each character rises out of a line mask, flipped back in 3D, flashing
   bronze before settling on its real colour. Per-char delays are inline.
   The mask's padding/negative-margin pair keeps descenders unclipped. */
:root{ --ease-expo: cubic-bezier(.16,1,.3,1) }
.lm{ display:block; overflow:hidden; perspective:760px;
  padding-bottom:.1em; margin-bottom:-.1em }
.tw{ display:inline-block; white-space:nowrap }
.js .tch{ display:inline-block; opacity:0; color:var(--accent);
  transform:translateY(118%) rotateX(-96deg); transform-origin:50% 100%;
  transition:transform 1.3s var(--ease-expo), opacity .9s var(--ease-expo),
             color 1.3s ease, filter 1.1s ease }
.js [data-split].on .tch{ opacity:1; transform:none; color:inherit }
.js .tch.itch{ font-style:italic; font-weight:400 }
.js [data-split].on .tch.itch{ color:var(--accent) }
@media (min-width:761px){
  .js .tch{ filter:blur(7px) }
  .js [data-split].on .tch{ filter:blur(0) }
}

/* ---------- scramble typewriter caret (bytglen data-type port) ------- */
.tc{ opacity:0; position:relative }
.tc.is-cur::after{ content:""; position:absolute; right:-.45em; top:.1em;
  width:.45em; height:1.1em; background:var(--accent);
  animation:caret-blink .7s steps(1) infinite }
@keyframes caret-blink{ 50%{ opacity:0 } }

/* ---------- clip-path media reveal (bytglen data-reveal-card port) ---
   The frame crops in from an inset rounded rectangle while the image
   counter-zooms down, settling into place. */
.rc{ display:block; overflow:hidden; border-radius:4px }
.js [data-reveal-card]{ clip-path:inset(18% 6% 0% 6% round 24px);
  transform:translateY(60px);
  transition:clip-path 1.5s var(--ease-expo), transform 1.5s var(--ease-expo) }
.js [data-reveal-card] img{ transform:scale(1.35);
  transition:transform 1.8s var(--ease-expo) }
.js [data-reveal-card].on{ clip-path:inset(0% 0% 0% 0% round 0px); transform:none }
.js [data-reveal-card].on img{ transform:scale(1.02) }

/* ---------- marquee rows (velocity-reactive, per-row direction) ------ */
.marquee .row{ overflow:hidden; white-space:nowrap }
.marquee .row + .row{ margin-top:12px }
.marquee .row:nth-child(2) .track{ animation-direction:reverse }
.js .marquee .track.drive{ animation:none }

/* ---------- ghost numeral parallax ---------- */
.sect-no{ will-change:transform }

/* ---------- smooth-wheel mode: JS owns the easing ---------- */
.sw{ scroll-behavior:auto }

/* ---------- pointer fluid / ink trail ---------- */
#ink{ position:fixed; inset:0; width:100vw; height:100vh; z-index:60;
  pointer-events:none; mix-blend-mode:multiply }

/* ---------- first-visit loader (bytglen loader port) ----------
   html.ld::before covers the page pre-paint (inline head script);
   main.js builds the .loader UI, tracks real readiness, wipes away.
   ld-auto is the CSS-only failsafe if scripts die. */
html.ld::before{ content:""; position:fixed; inset:0; z-index:220;
  background:var(--dark); animation:ld-auto 0s 3s forwards }
@keyframes ld-auto{ to{ visibility:hidden; opacity:0 } }
.loader{ position:fixed; inset:0; z-index:230; background:var(--dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; transition:clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s .7s;
  animation:ld-auto 0s 4s forwards /* CSS-only failsafe if JS dies mid-load */ }
.loader.done{ clip-path:inset(0 0 100% 0); visibility:hidden }
.loader .lw{ display:block; overflow:hidden; font-family:var(--font-display);
  font-weight:500; font-size:clamp(30px,4.6vw,52px); color:var(--dark-text) }
.loader .lw i{ display:block; font-style:normal; transform:translateY(120%);
  animation:ld-rise .7s var(--ease-expo) .1s forwards }
@keyframes ld-rise{ to{ transform:none } }
.loader .ltag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dark-soft); opacity:0;
  animation:ld-fade .8s ease .35s forwards }
@keyframes ld-fade{ to{ opacity:1 } }
.loader .lline{ width:min(220px,44vw); height:1.5px; background:var(--dark-line);
  position:relative; overflow:hidden }
.loader .lline i{ position:absolute; inset:0; background:var(--gold);
  transform-origin:0 50%; transform:scaleX(0); transition:transform .3s ease }
.loader .lpct{ font-family:var(--font-mono); font-size:12px; color:var(--gold);
  letter-spacing:.14em }

/* ---------- scroll-drawn cable (bytglen 3D tube, 2D port) ---------- */
.cable{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  overflow:visible }
.cable svg{ width:100%; height:100%; display:block }
.cable path{ fill:none; stroke-width:9; stroke-linecap:round }
.cable .glow{ stroke-width:18; opacity:.18; filter:blur(6px) }
section.has-cable{ position:relative }

/* ---------- stat strip with count-ups (bytglen data-to) ---------- */
.stats{ display:flex; gap:clamp(24px,5vw,72px); flex-wrap:wrap;
  margin-top:clamp(36px,5vw,60px); border-top:1px solid var(--line);
  padding-top:28px }
.stat .n{ font-family:var(--font-display); font-size:clamp(34px,4.4vw,58px);
  color:var(--ink); line-height:1 }
.stat .n em{ font-style:normal; color:var(--accent) }
.stat .l{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-top:8px; display:block }

/* ---------- next-page band (bytglen data-next auto-advance) ---------- */
.next-band{ position:relative; display:block; text-decoration:none;
  border-top:1px solid var(--line); padding-block:clamp(70px,10vw,130px);
  overflow:hidden }
.next-band .nb-kicker{ font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
.next-band .nb-title{ font-family:var(--font-display); font-weight:500;
  font-size:clamp(40px,7vw,104px); letter-spacing:-.02em; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--line-strong);
  margin-top:14px; transition:color .5s ease }
@supports not (-webkit-text-stroke:1px black){
  .next-band .nb-title{ color:var(--surface-2) } }
.next-band:hover .nb-title{ color:var(--accent);
  -webkit-text-stroke:1.5px var(--accent) }
.next-band .nb-line{ position:absolute; left:0; bottom:0; height:2px;
  width:100%; background:var(--accent); transform:scaleX(0);
  transform-origin:0 50% }

/* ---------- FAQ grid-rows open animation (bytglen accordion) ---------- */
.js .faq .a{ display:grid; grid-template-rows:0fr; padding:0;
  transition:grid-template-rows .55s var(--ease-expo),
             padding-bottom .55s var(--ease-expo) }
.js .faq details[open].is-open .a{ grid-template-rows:1fr; padding-bottom:28px }
.js .faq .a .ai{ overflow:hidden; min-height:0 }

/* ---------- about image hover (bytglen uZoom hover, CSS port) ------- */
@media (hover:hover) and (pointer:fine){
  .rc img{ transition:transform 1.1s var(--ease-expo) }
  .rc:hover img{ transform:scale(1.06) !important }
}

/* ---------- mobile menu stagger ---------- */
@media (max-width:760px){
  .nav-links li{ opacity:0; transform:translateY(16px);
    transition:opacity .4s ease, transform .5s var(--ease-expo) }
  .nav-links.open li{ opacity:1; transform:none }
  .nav-links.open li:nth-child(1){ transition-delay:.06s }
  .nav-links.open li:nth-child(2){ transition-delay:.11s }
  .nav-links.open li:nth-child(3){ transition-delay:.16s }
  .nav-links.open li:nth-child(4){ transition-delay:.21s }
  .nav-links.open li:nth-child(5){ transition-delay:.26s }
}

/* ---------- page transition (bytglen .pt port) ----------
   Exit: the .pt overlay wipes up over the old page. Arrival: html.pt-in
   (set pre-paint by an inline head script) covers the page with ::before,
   and .pt-out wipes it away. The pt-auto animation is a CSS-only failsafe
   that force-hides a stuck cover even if every script dies. */
.pt{ position:fixed; inset:0; z-index:150; background:var(--dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; clip-path:inset(100% 0 0 0); visibility:hidden;
  transition:clip-path .55s cubic-bezier(.7,0,.2,1), visibility 0s .55s }
.pt.up{ clip-path:inset(0 0 0 0); visibility:visible;
  transition:clip-path .55s cubic-bezier(.7,0,.2,1), visibility 0s 0s }
.pt-word{ display:block; overflow:hidden; font-family:var(--font-display);
  font-weight:500; font-size:clamp(28px,4vw,44px); color:var(--dark-text) }
.pt-word i{ display:block; font-style:normal; transform:translateY(120%);
  transition:transform .5s var(--ease-expo) .18s }
.pt.up .pt-word i{ transform:none }
.pt-line{ display:block; width:0; height:1.5px; background:var(--gold);
  transition:width .6s var(--ease-expo) .3s }
.pt.up .pt-line{ width:min(200px,40vw) }

html.pt-in::before{ content:""; position:fixed; inset:0; z-index:160;
  background:var(--dark); clip-path:inset(0 0 0 0);
  animation:pt-auto 0s 1.6s forwards }
html.pt-in.pt-out::before{
  transition:clip-path .65s cubic-bezier(.7,0,.2,1);
  clip-path:inset(0 0 100% 0) }
@keyframes pt-auto{ to{ visibility:hidden; opacity:0 } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js .rv, .js [data-stagger] > *{ opacity:1 !important; transform:none !important;
    transition:none }
  .ln > i{ transform:none !important; transition:none }
  .js .tch{ opacity:1 !important; transform:none !important; filter:none !important;
    color:inherit; transition:none }
  .js [data-reveal-card]{ clip-path:none !important; transform:none !important;
    transition:none }
  .js [data-reveal-card] img{ transform:none !important; transition:none }
  .js .marquee .track{ animation:none }
  .js .net-l{ stroke-dasharray:none; stroke-dashoffset:0; transition:none }
  .js .net-n{ opacity:1; transition:none }
  .btn, .pnode, .ccard, .price{ transition:none }
  #cursor, #ink, .pt{ display:none }
  html.pt-in::before{ display:none }
  .sect-no{ transform:none !important }
  html.ld::before, .loader{ display:none }
  .nav-links li{ opacity:1 !important; transform:none !important; transition:none }
  .cable path{ stroke-dashoffset:0 !important }
  .next-band .nb-line{ transform:none }
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-net{ opacity:.38 }
  .pipeline{ grid-template-columns:repeat(2,1fr) }
  .price-grid{ grid-template-columns:repeat(2,1fr) }
  .principle{ grid-template-columns:48px 1fr }
  .principle p{ grid-column:2 }
  .svc-row{ grid-template-columns:70px 1fr; row-gap:10px }
  .svc-row p{ grid-column:2 }
  .svc-row .who{ grid-column:2; justify-self:start; text-align:left }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .head-row{ grid-template-columns:1fr }
  .head-row .sect-no{ display:none }
  .name-strip .inner{ grid-template-columns:1fr }
}
@media (max-width:760px){
  .nav-links{
    position:fixed; inset:0; background:var(--bg); z-index:85;
    flex-direction:column; justify-content:center; gap:30px;
    transform:translateY(-102%); visibility:hidden;
    transition:transform .45s var(--ease), visibility 0s .45s;
  }
  .nav-links.open{ transform:none; visibility:visible;
    transition:transform .45s var(--ease), visibility 0s 0s }
  .nav-links a{ font-family:var(--font-display); font-size:30px }
  .nav-links .nav-cta{ font-family:var(--font-sans); font-size:17px;
    padding:15px 30px }
  .menu-btn{ display:block; position:relative; z-index:86 }
  .hero{ padding-top:130px }
  /* the static svg stays hidden on mobile, but the game shows in-flow,
     ordered BELOW the hero copy (the div precedes .wrap in the DOM) */
  .hero-net{ display:none }
  .hero{ display:flex; flex-direction:column }
  .hero > .wrap{ order:0; width:100% }
  .js .hero-net.ng-on{ display:block; position:relative; order:1; width:100%;
    height:290px; margin:36px 0 26px; right:auto; top:auto; opacity:1 }
  .ng-cap{ bottom:-26px; font-size:10px; letter-spacing:.08em;
    white-space:normal; padding-right:12px }
  .loss-grid, .svc-cols, .steps, .two-up, .contact-cards,
  .form .row2, .pipeline, .pipeline.p3, .price-grid{ grid-template-columns:1fr }
  .loss{ padding:22px 0 }
  .foot-grid{ grid-template-columns:1fr }
  #cursor{ display:none }
}