/* ============================================================
   CHORD33 · v8 FIELD
   One committed look: deep ink, cerulean instrument light,
   survey-field 3D, big quiet type. Dark is the design, not a
   theme option, so there is no theme machinery in here.
   ============================================================ */

/* ---------- 0 · Tokens ---------- */
:root{
  --bg:      #05080F;
  --ink:     #070D18;
  --panel:   #0A1322;
  --panel-2: #0D1830;

  --line:  rgba(186,214,242,.09);
  --line2: rgba(186,214,242,.22);

  --text: #E9EFF7;
  --mut:  #94A1B5;
  --dim:  #5F6B82;

  --act:      #2FB1DC;   /* cerulean, the one pointer */
  --act-2:    #8FDCF5;   /* glow core, big display only */
  --act-deep: #0B3B4E;   /* washes, never text */

  --live: #4AA370;       /* true and happening, nothing else */
  --no:   #E07167;       /* the pricing cross, nothing else */

  --font-d: "Space Grotesk", "Inter", sans-serif;
  --font-b: "Inter", system-ui, sans-serif;
  --font-m: "IBM Plex Mono", ui-monospace, monospace;

  --d1: clamp(46px, 7.3vw, 122px);
  --d2: clamp(36px, 5.4vw, 88px);
  --d3: clamp(24px, 2.8vw, 40px);
  --lede: clamp(16.5px, 1.3vw, 19.5px);

  --pad: clamp(20px, 4.2vw, 76px);   /* page gutter */
  --sec: clamp(96px, 14vh, 180px);   /* section rhythm */

  --ease: cubic-bezier(.19,1,.22,1); /* long expo-out, the house ease */
}

/* ---------- 1 · Reset & ground ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ background:var(--bg); }
body{
  font-family:var(--font-b);
  font-size:16.5px; line-height:1.6;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--act); color:#04121B; }
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }

.skip{ position:fixed; left:-999px; top:14px; z-index:300; background:var(--act); color:#04121B;
  padding:10px 18px; font-family:var(--font-m); font-size:13px; }
.skip:focus{ left:14px; }

/* Focus that matches the instrument look */
:focus-visible{ outline:1px solid var(--act); outline-offset:3px; }

/* ---------- 2 · Atmosphere layers ---------- */
/* The fixed WebGL stage (index) or still field (inner pages) */
#stage{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
}
/* Scroll-driven colour wash. JS drives --washo and the two hues. */
.wash{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 110%, var(--washA, rgba(11,59,78,.32)), transparent 60%),
    radial-gradient(100% 70% at 80% -10%, var(--washB, rgba(22,32,59,.35)), transparent 55%);
  opacity:var(--washo, .6);
  transition:opacity .8s linear;
}
/* Pointer halo, desktop only. JS moves it, CSS keeps it faint. */
.halo{
  position:fixed; z-index:2; pointer-events:none;
  width:520px; height:520px; margin:-260px 0 0 -260px; left:0; top:0;
  background:radial-gradient(circle, rgba(47,177,220,.075), transparent 62%);
  opacity:0; transition:opacity .6s linear;
}
body.has-pointer .halo{ opacity:1; }
/* Ambient dot field for pages without the WebGL stage: dots that
   breathe on staggered timers, plus two slow glow orbs. All compositor
   animation, no per-frame script. site8.js builds it. */
/* The burst fires once, then the layer goes dark until the next shot.
   site8.js restarts the scene itself so every appearance is the opening
   expand, not a slice of a loop. */
.aura{ position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .9s ease; }
.aura.is-lit{ opacity:1; }
.dots{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.dots i{ position:absolute; border-radius:50%; background:var(--c, rgba(47,177,220,.8));
  animation:dotPulse var(--dur,7s) ease-in-out var(--del,0s) infinite;
  will-change:transform,opacity; }
@keyframes dotPulse{
  0%,100%{ opacity:.14; transform:translateY(9px) scale(.72); }
  50%{ opacity:.7; transform:translateY(-11px) scale(1.06); }
}
.dots .orb{ position:absolute; border-radius:50%;
  animation:orbPulse var(--dur,11s) ease-in-out infinite alternate; }
@keyframes orbPulse{ from{ opacity:.5; transform:scale(1); } to{ opacity:1; transform:scale(1.12); } }

/* Film grain above everything. Material, not decoration. */
.grain{
  position:fixed; inset:-40px; z-index:90; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* Everything readable sits above the atmosphere */
.site-head, main, .site-foot, .menu, .big-cta{ position:relative; z-index:10; }

/* ---------- 3 · Mono HUD voice ---------- */
.m{
  font-family:var(--font-m); font-weight:500;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
}
.m b{ color:var(--mut); font-weight:500; }
.m .tick{ color:var(--act); }

/* ---------- 4 · Header ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:120;
  transition:background .5s linear, border-color .5s linear;
  border-bottom:1px solid transparent;
}
.site-head.is-solid{ background:rgba(5,8,15,.86); border-bottom-color:var(--line); }
.head-row{
  display:flex; align-items:center; justify-content:space-between;
  height:66px; padding:0 var(--pad);
}
.mark{ display:flex; align-items:center; gap:12px; }
.mark svg{ width:26px; height:26px; color:var(--text); }
.wordmark{
  font-family:var(--font-m); font-weight:600; font-size:14px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--text);
}
/* Header animates with clip/opacity only. Never transforms. */
.head-actions{ display:flex; align-items:center; gap:clamp(14px,3vw,36px); }
.head-cta{ font-family:var(--font-m); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--act); }
.head-cta .arw{ display:inline-block; transition:none; }
.head-cta:hover{ color:var(--act-2); }
.menu-btn{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-m); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); padding:8px 0;
}
.menu-btn .bars{ position:relative; width:22px; height:10px; }
.menu-btn .bars i{ position:absolute; left:0; right:0; height:1.5px; background:currentColor;
  transition:transform .45s var(--ease), top .45s var(--ease); }
.menu-btn .bars i:first-child{ top:0; }
.menu-btn .bars i:last-child{ top:8px; }
body.menu-open .menu-btn .bars i:first-child{ top:4px; transform:rotate(45deg); }
body.menu-open .menu-btn .bars i:last-child{ top:4px; transform:rotate(-45deg); }

/* ---------- 5 · Menu overlay ---------- */
.menu{
  position:fixed; inset:0; z-index:110;
  background:rgba(4,6,12,.97);
  visibility:hidden; opacity:0;
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad);
  overflow-y:auto;
}
body.menu-open .menu{ visibility:visible; opacity:1; transition:opacity .5s var(--ease); }
.menu-links{ display:flex; flex-direction:column; }
.menu-links a{
  display:flex; align-items:baseline; gap:26px;
  padding:clamp(6px,1.4vh,14px) 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-d); font-weight:500;
  font-size:clamp(30px, 5.6vh, 62px); text-transform:uppercase; letter-spacing:.005em;
  color:var(--mut);
  transition:color .35s var(--ease), padding-left .35s var(--ease);
}
.menu-links a .no{ font-family:var(--font-m); font-size:12px; letter-spacing:.16em; color:var(--dim);
  min-width:34px; }
.menu-links a:hover{ color:var(--text); padding-left:14px; }
.menu-links a:hover .no{ color:var(--act); }
.menu-links a.is-here{ color:var(--text); }
.menu-links a.is-here .no{ color:var(--act); }
/* stagger-in */
.menu-links a{ opacity:0; translate:0 18px; }
body.menu-open .menu-links a{
  opacity:1; translate:0 0;
  transition:opacity .6s var(--ease), translate .6s var(--ease),
             color .35s var(--ease), padding-left .35s var(--ease);
  transition-delay:calc(var(--i, 0) * 45ms);
}
.menu-foot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:26px 0 8px; }
.menu-foot a{ color:var(--mut); }
.menu-foot a:hover{ color:var(--act); }

/* ---------- 6 · Layout primitives ---------- */
.wrap{ padding-left:var(--pad); padding-right:var(--pad); }
.sec{ padding-top:var(--sec); padding-bottom:var(--sec); }
.sec-tight{ padding-top:calc(var(--sec)*.55); padding-bottom:calc(var(--sec)*.55); }
.hairline{ border-top:1px solid var(--line); }

/* Section opener: mono rail + huge head */
.sec-mark{ display:flex; align-items:center; gap:18px; margin-bottom:clamp(28px,4.5vh,54px); }
.sec-mark .rule{ flex:0 0 clamp(40px,6vw,110px); height:1px; background:var(--line2); }
.d1,.d2,.d3{
  font-family:var(--font-d); font-weight:500; text-transform:uppercase;
  letter-spacing:-0.015em; line-height:.94; text-wrap:balance;
}
.d1{ font-size:var(--d1); line-height:.9; }
.d2{ font-size:var(--d2); }
.d3{ font-size:var(--d3); letter-spacing:-.005em; }
/* Highlighted words: a slow gradient sweeping through the fill.
   Stops start and end on the same colour so the loop has no seam. */
.em{
  color:var(--act);
  background:linear-gradient(90deg, #2FB1DC, #8FDCF5 30%, #57A0E4 58%, #2FB1DC 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:emsweep 7s linear infinite;
}
@keyframes emsweep{ to{ background-position:-220% center; } }
.lede{
  font-size:var(--lede); line-height:1.65; color:var(--mut); max-width:62ch;
}
.lede strong,.lede b{ color:var(--text); font-weight:500; }
.lede a{ color:var(--act); }
.lede a:hover{ color:var(--act-2); }

/* ---------- 7 · Word & reveal animation ---------- */
/* splitWords() wraps words in .w > .wi ; the mask clips, the inner rises. */
.rv-words .w{ display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.08em; margin-bottom:-.08em; }
.rv-words .wi{ display:inline-block; translate:0 110%; rotate:.001deg;
  transition:translate 1.1s var(--ease); transition-delay:calc(var(--wd, 0) * 1ms); }
.rv-words.is-in .wi{ translate:0 0; }

.rv{ opacity:0; translate:0 34px; transition:opacity .9s var(--ease), translate .9s var(--ease);
  transition-delay:var(--rvd, 0ms); }
.rv.is-in{ opacity:1; translate:0 0; }

.js-off .rv, .js-off .rv-words .wi{ opacity:1; translate:0 0; }

/* ---------- 8 · Buttons & links ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-m); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text);
  border:1px solid var(--line2);
  padding:16px 26px;
  overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--act);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:scaleX(1); }
.btn>*{ position:relative; }
.btn:hover{ color:#04121B; border-color:var(--act); }
.btn .arw{ transition:translate .4s var(--ease); }
.btn:hover .arw{ translate:5px 0; }
.btn-act{ border-color:var(--act); color:var(--act); }
.btn-solid{ background:var(--act); border-color:var(--act); color:#04121B; }
.btn-solid::before{ background:var(--act-2); }
.btn-solid:hover{ color:#04121B; }

.link-line{ position:relative; color:var(--text); }
.link-line::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
  background:var(--act); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease); }
.link-line:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- 9 · Index hero ---------- */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(66px + 11vh);
  padding-bottom:4vh; position:relative;
}
.hero-tag{ position:absolute; top:calc(66px + 4vh); left:var(--pad); display:grid; gap:6px; }
.hero-co{ position:absolute; top:calc(66px + 4vh); right:var(--pad); text-align:right; display:grid; gap:6px; }
.hero h1{ font-size:clamp(44px, 6.9vw, 112px); margin-top:auto; }
.hero .lede{ margin-top:clamp(20px,3vh,34px); max-width:46ch; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:clamp(26px,4vh,42px); }
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:18px;
  margin-top:clamp(30px,5vh,52px); padding-top:18px; border-top:1px solid var(--line);
}
.scroll-cue{ display:flex; align-items:center; gap:12px; }
.scroll-cue .linev{ width:1px; height:34px; background:var(--line2); position:relative; overflow:hidden; }
.scroll-cue .linev::after{ content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--act); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{ top:-100%; } 55%{ top:0; } 100%{ top:100%; } }

/* Live presence: jade only, hides itself when the Worker is unreachable */
.presence{ display:flex; align-items:center; gap:10px; }
.presence .dot{ width:6px; height:6px; border-radius:50%; background:var(--live);
  box-shadow:0 0 10px rgba(74,163,112,.8); }

/* ---------- 10 · Stat band ---------- */
.band{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.band .cell{ padding:clamp(22px,3.4vh,40px) clamp(14px,1.6vw,28px);
  border-left:1px solid var(--line); display:grid; gap:8px; align-content:start; }
.band .cell:first-child{ border-left:0; }
.band .n{ font-family:var(--font-d); font-weight:500; font-size:clamp(26px,3vw,44px);
  letter-spacing:-.01em; text-transform:uppercase; }
.band .n.hi{ color:var(--act); }
.band .k{ composes:m; }
.band .k{ font-family:var(--font-m); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); }

/* ---------- 11 · Index scroll plates ---------- */
/* Sparse full-height statements that ride over the 3D field. */
.plate{ min-height:92svh; display:flex; flex-direction:column; justify-content:center; }
.plate-inner{ max-width:1100px; }
.plate .lede{ margin-top:clamp(18px,2.6vh,30px); }
.plate-kv{ display:grid; gap:0; margin-top:clamp(24px,4vh,44px); max-width:760px; }
.plate-kv li{ display:flex; gap:22px; align-items:baseline; padding:15px 0; border-top:1px solid var(--line); }
.plate-kv li:last-child{ border-bottom:1px solid var(--line); }
.plate-kv .no{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.14em; color:var(--act); min-width:30px; }
.plate-kv b{ font-weight:500; color:var(--text); }
.plate-kv span{ color:var(--mut); }

/* Service cards: solid ink, hairline, index numerals. No glass. */
.svc{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:clamp(30px,5vh,56px); }
.svc .card{ background:var(--ink); padding:clamp(22px,2.6vw,38px); min-height:260px;
  display:flex; flex-direction:column; gap:14px;
  transition:background .5s var(--ease); position:relative; overflow:hidden; }
.svc .card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--act); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.svc .card:hover{ background:var(--panel); }
.svc .card:hover::after{ transform:scaleX(1); }
.svc .idx{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.16em; color:var(--act); }
.svc h3{ font-family:var(--font-d); font-weight:500; font-size:clamp(19px,1.6vw,25px);
  text-transform:uppercase; letter-spacing:.01em; margin-top:auto; }
.svc p{ color:var(--mut); font-size:15px; line-height:1.6; }

/* ---------- 12 · Work rows ---------- */
.work-list{ border-top:1px solid var(--line); margin-top:clamp(26px,4vh,48px); }
.work-row{
  display:grid; grid-template-columns:minmax(60px,110px) 1fr minmax(250px,330px) auto;
  gap:clamp(16px,3vw,44px);
  align-items:center;
  padding:clamp(28px,4.5vh,52px) 0; border-bottom:1px solid var(--line);
  position:relative;
  transition:padding-left .45s var(--ease);
}
.work-row.no-thumb{ grid-template-columns:minmax(60px,110px) 1fr auto; }
.wr-thumb{
  aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line2);
  background:var(--panel); position:relative;
}
.wr-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top;
  filter:saturate(.92); transition:scale .6s var(--ease); }
.work-row:hover .wr-thumb img{ scale:1.05; }
.wr-thumb::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,7,13,.28), transparent 40%); pointer-events:none; }
/* a spec plate where a screenshot would be dishonest or unwanted */
.wr-spec{
  aspect-ratio:16/10; border:1px solid var(--line2); background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:clamp(14px,1.6vw,24px);
}
.wr-spec .row{ display:flex; justify-content:space-between; gap:12px;
  border-top:1px solid var(--line); padding-top:9px; }
.wr-spec .row:first-child{ border-top:0; padding-top:0; }
.work-row::before{ content:""; position:absolute; inset:0 calc(-1*var(--pad)); background:var(--ink);
  opacity:0; transition:opacity .45s var(--ease); z-index:-1; }
.work-row:hover::before{ opacity:1; }
.work-row:hover{ padding-left:10px; }
.work-row .wr-no{ font-family:var(--font-m); font-size:12px; letter-spacing:.16em; color:var(--dim);
  align-self:start; padding-top:8px; }
.work-row h3{ font-family:var(--font-d); font-weight:500; font-size:clamp(28px,4vw,62px);
  text-transform:uppercase; letter-spacing:-.01em; line-height:1; }
.work-row .wr-meta{ display:flex; gap:22px; flex-wrap:wrap; margin-top:12px; }
.work-row p{ color:var(--mut); max-width:64ch; margin-top:14px; font-size:15.5px; }
.work-row .go{ font-family:var(--font-m); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap; transition:color .4s var(--ease); display:flex; gap:10px; }
.work-row:hover .go{ color:var(--act); }
.work-row:hover .go .arw{ translate:6px 0; }
.work-row .go .arw{ transition:translate .4s var(--ease); display:inline-block; }

/* ---------- 13 · Marquee ---------- */
.marq{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px 0; white-space:nowrap; }
.marq-track{ display:inline-flex; gap:64px; padding-right:64px;
  animation:marq 36s linear infinite; will-change:transform; }
.marq span{ font-family:var(--font-d); font-weight:500; font-size:clamp(18px,2vw,28px);
  text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
.marq span i{ font-style:normal; color:var(--act); padding-right:64px; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- 14 · Steps ---------- */
.steps{ counter-reset:step; display:grid; gap:0; border-top:1px solid var(--line); }
.steps li{ counter-increment:step; display:grid; grid-template-columns:minmax(56px,110px) 1fr;
  gap:clamp(14px,3vw,40px); padding:clamp(22px,3.4vh,40px) 0; border-bottom:1px solid var(--line); }
.steps li::before{ content:"0" counter(step); font-family:var(--font-m); font-size:12px;
  letter-spacing:.16em; color:var(--act); padding-top:8px; }
.steps h3{ font-family:var(--font-d); font-weight:500; font-size:clamp(20px,2vw,30px);
  text-transform:uppercase; }
.steps p{ color:var(--mut); margin-top:10px; max-width:66ch; font-size:15.5px; }

/* ---------- 15 · Panels, kv, tags ---------- */
.panel{ background:var(--ink); border:1px solid var(--line); padding:clamp(26px,4vw,56px); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,84px); align-items:start; }
.kv{ display:grid; }
.kv li{ padding:14px 0; border-bottom:1px solid var(--line); color:var(--mut); font-size:15.5px; }
.kv li:first-child{ border-top:1px solid var(--line); }
.kv b{ color:var(--text); font-weight:500; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-family:var(--font-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut); border:1px solid var(--line2); padding:6px 12px; }

.prose h2{ font-family:var(--font-d); font-weight:500; font-size:clamp(20px,2vw,30px);
  text-transform:uppercase; margin:34px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--mut); margin-bottom:14px; max-width:66ch; font-size:15.5px; line-height:1.7; }
.prose strong{ color:var(--text); font-weight:500; }

/* ---------- 16 · Pricing ---------- */
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); }
.tier{ background:var(--ink); padding:clamp(20px,2vw,34px); display:flex; flex-direction:column; gap:16px; }
.tier.pick{ background:var(--panel); box-shadow:inset 0 2px 0 var(--act); }
.tier .idx{ font-family:var(--font-m); font-size:11px; letter-spacing:.16em; color:var(--act); text-transform:uppercase; }
.tier h3{ font-family:var(--font-d); font-weight:500; font-size:clamp(20px,1.8vw,28px); text-transform:uppercase; }
.tier .blurb{ color:var(--mut); font-size:14.5px; min-height:3em; }
.tier .amt{ font-family:var(--font-d); font-weight:500; font-size:clamp(30px,2.6vw,44px); letter-spacing:-.01em; }
.tier .pre{ display:block; font-family:var(--font-m); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); margin-top:6px; }
.tier .alt{ color:var(--dim); font-size:13.5px; }
.tier .np{ color:var(--mut); font-size:13.5px; }
.tier .np b{ color:var(--live); font-weight:600; }
.feat{ display:grid; margin-top:4px; }
.feat li{ position:relative; padding:9px 0 9px 26px; border-top:1px solid var(--line);
  color:var(--mut); font-size:14px; }
.feat li::before{
  content:""; position:absolute; left:2px; top:14px; width:12px; height:12px;
  background:var(--live);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5 4.5 9.5 10.5 2.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5 4.5 9.5 10.5 2.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.feat li.nope{ color:var(--dim); }
.feat li.nope::before{
  background:var(--no);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2 10 10 M10 2 2 10' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2 10 10 M10 2 2 10' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tier .btn{ margin-top:auto; justify-content:center; }

.tablewrap{ overflow-x:auto; border:1px solid var(--line); }
.plans{ width:100%; border-collapse:collapse; min-width:640px; }
.plans th,.plans td{ text-align:left; padding:15px 18px; border-bottom:1px solid var(--line);
  font-size:14.5px; color:var(--mut); }
.plans thead th{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text); background:var(--ink); }
.plans tbody th{ font-weight:500; color:var(--text); }
.plans .hi{ background:rgba(47,177,220,.05); }
.plans .amt{ font-family:var(--font-d); font-size:24px; font-weight:500; color:var(--text); }
.plans .dash{ color:var(--dim); }

/* ---------- 17 · Inner-page hero ---------- */
.page-hero{ padding-top:calc(66px + clamp(70px,12vh,140px)); padding-bottom:clamp(40px,7vh,80px); position:relative; }
.page-hero .crumb{ margin-bottom:clamp(20px,3.5vh,36px); display:flex; gap:14px; align-items:center; }
.page-hero .crumb .rule{ width:44px; height:1px; background:var(--line2); }
.page-hero h1{ max-width:14ch; }
.page-hero .lede{ margin-top:clamp(18px,3vh,30px); }

/* The contour-dial set dressing was removed sitewide on Wisper's call. */

/* ---------- 18 · Big CTA + footer ---------- */
.big-cta{ padding:var(--sec) var(--pad); border-top:1px solid var(--line); position:relative; overflow:hidden; }
.big-cta h2{ max-width:14ch; }
.big-cta .lede{ margin-top:22px; }
.mailto{
  display:inline-block; align-self:flex-start; margin-top:clamp(28px,5vh,48px);
  font-family:var(--font-d); font-weight:500;
  font-size:clamp(26px,4.6vw,72px); letter-spacing:-.01em; text-transform:lowercase;
  color:var(--text); position:relative;
}
.mailto::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:var(--act); transform:scaleX(0); transform-origin:right; transition:transform .55s var(--ease); }
.mailto:hover{ color:var(--act-2); }
.mailto:hover::after{ transform:scaleX(1); transform-origin:left; }

/* Solid ground: the scene slides up at this line instead of bleeding
   through behind the footer. No hairlines. */
.site-foot{ background:var(--bg); }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(24px,4vw,64px);
  padding:clamp(40px,7vh,72px) var(--pad); }
.foot-grid h4{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); font-weight:500; margin-bottom:16px; }
.foot-links{ display:grid; gap:9px; }
.foot-links a{ color:var(--mut); font-size:15px; transition:color .3s; }
.foot-links a:hover{ color:var(--act); }
.foot-note{ color:var(--dim); font-size:14px; max-width:34ch; margin-top:16px; line-height:1.6; }
.foot-bar{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:20px var(--pad) 26px; }

/* ---------- 19 · Contact form ---------- */
.form{ display:grid; gap:0; }
.field{ display:grid; gap:10px; padding:20px 0; border-bottom:1px solid var(--line); }
.field:first-child{ border-top:1px solid var(--line); }
.field label{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); }
.field input,.field select,.field textarea{
  background:transparent; border:0; color:var(--text);
  font-family:var(--font-b); font-size:17px; padding:2px 0;
}
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--ink); color:var(--text); }
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; }
.field:focus-within label{ color:var(--act); }
.form .btn{ margin-top:26px; justify-self:start; }
@media (max-width:700px){
  /* phone: the native control itself must be a full thumb target
     (44px+), not just the field row around it; 17px font also keeps
     iOS from zoom-jumping on focus */
  .field input,.field select,.field textarea{ padding:11px 0; }
}

/* ---------- 20 · Figure slots (photography) ---------- */
/* Capped a touch below full column width: generated sources are ~1400px
   wide, and stretching past the source is what reads as blur. Sharp and
   slightly inset beats big and fuzzy. */
.photo{ position:relative; overflow:hidden; border:1px solid var(--line); background:var(--panel);
  max-width:1240px; margin-left:auto; margin-right:auto; }
.photo img{ width:100%; height:100%; object-fit:cover; }
.photo .ph-cap{ position:absolute; left:12px; bottom:12px; z-index:2;
  background:rgba(4,7,13,.78); padding:7px 11px; color:var(--mut); }
.photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,7,13,.5), transparent 38%); }
.photo.empty{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(80% 120% at 70% 0%, rgba(22,32,59,.7), transparent 60%),
    radial-gradient(90% 120% at 20% 100%, rgba(11,59,78,.55), transparent 55%),
    var(--panel);
}
.photo.empty::after{ display:none; }

/* ---------- 21 · (Bench was removed from v8 on Wisper's call) ---------- */

/* ---------- 22 · 404 ---------- */
.lost{ min-height:82svh; display:flex; flex-direction:column; justify-content:center; }
.lost .m{ margin-bottom:18px; }

/* ---------- 22b · Page wipe ---------- */
/* The curtain: a slanted ink block sweeps across between pages with the
   mark centred on it, a thin cerulean sliver riding the visible edge.
   The block's edge runs at exactly 33 degrees - the hatch angle.
   Scripted on every engine (native view transitions deliberately unused)
   so Chromium, Safari and Firefox all get the same brand moment.
   site8.js section 6b drives --wx: -160% rest, 0% covered, 165% gone. */
#c33w{ position:fixed; inset:0; z-index:9998; overflow:hidden;
  pointer-events:none; display:none; }
#c33w.cover{ display:block; }
/* Skewed, not rotated: a rotated rect leaks its CORNERS into the viewport
   as a chevron (proven twice by frozen frames); a skewed one keeps its top
   and bottom edges horizontal and parked off-screen, so the visible edge
   is always one clean line. skewX(-57deg) puts that edge at exactly 33deg
   from horizontal, rising left to right - the hatch angle and direction.
   Performance rules learned from a choppy first cut: ONE shape only (the
   cerulean edges are its borders, not a second giant layer), sized as
   small as coverage allows, will-change'd, and driven by FIXED keyframes
   because Firefox only guarantees compositor animation for those. */
/* Physics matched to palantir's wipe: symmetric travel (-110% rest, 0
   covered, +110% gone), equal legs, one plain block, no edge decoration.
   The angle stays ours. */
/* Sizing must carry a vh term: the skew's horizontal lean scales with the
   element HEIGHT (tan 57deg of it), so a pure-vw width that covers a
   landscape screen leaves gaps on a portrait phone. calc() folds the lean
   into both edges for every orientation. */
#c33w .shape{ position:absolute; top:-2vh; height:104vh;
  left:calc(-60vw - 84vh); width:calc(220vw + 168vh);
  background:#0B1220;
  transform:translateX(var(--wx,-110%)) skewX(-57deg); }
#c33w.cover .shape{ will-change:transform; }
#c33w.cover.in .shape{ animation:c33wIn .6s cubic-bezier(.76,0,.24,1) forwards; }
#c33w.cover.covered .shape{ --wx:0%; }
#c33w.cover.out .shape{ animation:c33wOut .6s cubic-bezier(.76,0,.24,1) forwards; }
@keyframes c33wIn{
  from{ transform:translateX(-110%) skewX(-57deg); }
  to{ transform:translateX(0%) skewX(-57deg); }
}
@keyframes c33wOut{
  from{ transform:translateX(0%) skewX(-57deg); }
  to{ transform:translateX(110%) skewX(-57deg); }
}
#c33w .wmark{ position:absolute; left:50%; top:50%; width:76px; height:76px;
  transform:translate(-50%,-50%); color:#E9EFF7; opacity:0;
  transition:opacity .18s ease .2s; }
/* While the curtain flies, everything else stands still: the WebGL field
   skips frames (scene.js checks this class) and the ambient CSS loops
   pause, so the wipe owns the frame budget. */
.c33-wiping .dots i, .c33-wiping .dots .orb, .c33-wiping .marq-track,
.c33-wiping .em{ animation-play-state:paused; }
.c33-wiping .aura{ visibility:hidden; }

/* Screenshot mode: everything lands instantly. Set by site8.js on ?still=1. */
.still *, .still *::before, .still *::after{
  transition-duration:0ms !important; transition-delay:0ms !important;
  animation-duration:0ms !important; animation-delay:0ms !important;
}

/* ---------- 23 · Motion gate ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv, .rv-words .wi{ opacity:1 !important; translate:0 0 !important; transition:none !important; }
  .marq-track{ animation:none; }
  .scroll-cue .linev::after{ animation:none; }
  .grain{ display:none; }
  .em{ animation:none; }
  .dots i{ animation:none; opacity:.32; transform:none; }
  .dots .orb{ animation:none; opacity:.7; }
  #c33w{ display:none !important; }
}

/* ---------- 24 · Responsive ---------- */
@media (max-width:1080px){
  .work-row{ grid-template-columns:minmax(60px,110px) 1fr auto; }
  .wr-thumb,.wr-spec{ display:none; }
  .svc{ grid-template-columns:1fr 1fr; }
  .tiers{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .band{ grid-template-columns:1fr 1fr; }
  .band .cell:nth-child(odd){ border-left:0; }
  .band .cell{ border-top:1px solid var(--line); }
  .band .cell:nth-child(-n+2){ border-top:0; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .svc{ grid-template-columns:1fr; }
  .tiers{ grid-template-columns:1fr; }
  .work-row{ grid-template-columns:1fr; gap:10px; }
  .work-row .go{ margin-top:8px; }
  .hero-co{ display:none; }
  .foot-grid{ grid-template-columns:1fr; }
  .band{ grid-template-columns:1fr; }
  .band .cell{ border-left:0; }
  .steps li{ grid-template-columns:34px 1fr; gap:12px; }
  .plate{ min-height:0; padding-top:calc(var(--sec)*.5); padding-bottom:calc(var(--sec)*.5); }
  .marq span{ font-size:16px; }
}
@media (max-width:560px){
  .head-cta{ display:none; }
  .hero-foot{ flex-wrap:wrap; gap:12px; }
  .menu-foot{ flex-direction:column; gap:8px; }
  .panel{ padding:20px 16px; }
  .plans th,.plans td{ padding:11px 10px; font-size:13px; }
}