/* Oregon AI Works - site styles, v2 "Obsidian"
   Layout concept: a dark instrument panel lit by Oregon materials. Obsidian ground,
   Crater Lake blue light, sunstone copper highlights. Glass panels hold live product UIs;
   the hero is a 3D point-cloud terrain of the Willamette Valley with town beacons.
   Deliberately single-theme (dark), so every color is set explicitly below. */
/* Fonts are self-hosted (SIL Open Font License, latin subset) so no third-party requests are needed. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/geist.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/geist-mono.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-italic.woff2) format("woff2"); }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/unbounded.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #05070A;            /* obsidian */
  --bg-2: #0A0E13;
  --bg-3: #0F151C;
  --glass: rgba(255,255,255,.035);
  --glass-2: rgba(255,255,255,.06);
  --hair: rgba(255,255,255,.08);
  --hair-2: rgba(255,255,255,.14);
  --ink: #EEF2F6;
  --ink-2: #A3AEBB;
  --ink-3: #7F8B98;         /* brand #6E7A87 lifted slightly for WCAG AA on small text */
  --crater: #3B7BFF;        /* Crater Lake blue */
  --glacier: #6BE4F5;       /* glacial cyan */
  --sun: #FF8F5A;           /* Oregon sunstone, copper */
  --sun-2: #FFC48A;
  --ok: #5BE3A4;
  --grad-light: linear-gradient(100deg, #5B8EFF 0%, #6BE4F5 55%, #FFC48A 100%);
  --grad-sun: linear-gradient(100deg, #FF8F5A, #FFC48A);
  --f-display: "Geist", "Inter", "Segoe UI", system-ui, sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-wide: "Unbounded", "Geist", "Arial Black", sans-serif;
  --f-body: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3.5rem; --s-8: 6rem;
  --r: 14px; --r-lg: 22px;
  --wrap: 76rem;
  --ease: cubic-bezier(.2,.7,.1,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
img, svg, canvas { max-width: 100%; }
a { color: var(--glacier); text-underline-offset: 3px; text-decoration-color: rgba(107,228,245,.4); }
a:hover { text-decoration-color: currentColor; }
::selection { background: rgba(59,123,255,.45); color: #fff; }
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { font-family: var(--f-display); text-wrap: balance; margin: 0; color: var(--ink); font-weight: 500; }
h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .98; letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; }
h3 { font-size: 1.22rem; line-height: 1.25; letter-spacing: -.01em; font-weight: 600; }
h1 em, h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; background: var(--grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
p { margin: 0; max-width: 64ch; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); position: relative; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s-6); }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; font: 500 .74rem/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 12px var(--sun); }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.28rem); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--ink-2); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 80; background: var(--bg-3); padding: 8px 12px; }
mark.todo { background: red; color: yellow; font-weight: bold; padding: 0 .2em; }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: rgba(5,7,10,.62); border-bottom: 1px solid var(--hair); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: .8rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand img { width: 36px; height: 36px; }
.brand b { font: 600 .8rem/1 var(--f-wide); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.brand b span { color: var(--ink-3); }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: .92rem; transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a.btn { color: #05070A; padding: .7rem 1.1rem; }
.nav-toggle { display: none; background: var(--glass); border: 1px solid var(--hair-2); border-radius: 999px; padding: .5rem .9rem; font: 500 .88rem var(--f-body); color: var(--ink); }
@media (max-width: 1000px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: rgba(5,7,10,.97); border-bottom: 1px solid var(--hair); padding: var(--s-2) max(20px, env(safe-area-inset-right, 0px)) var(--s-5) max(20px, env(safe-area-inset-left, 0px)); }
  .nav.open { display: flex; }
  .nav a { padding: .85rem 0; border-top: 1px solid var(--hair); font-size: 1rem; }
  .nav a.btn { margin-top: var(--s-3); padding: .95rem 1.2rem; }
}

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font: 500 .96rem/1 var(--f-body); padding: .95rem 1.35rem; border-radius: 999px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.btn-primary { background: #EEF2F6; color: #05070A; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 40px -10px rgba(107,228,245,.55); }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 14px 50px -8px rgba(107,228,245,.85); }
.btn-primary::after { content: "→"; font-family: var(--f-mono); transition: transform .25s var(--ease); }
.btn-primary:hover::after { transform: translateX(3px); }
.btn-ghost { border-color: var(--hair-2); color: var(--ink); background: var(--glass); }
.btn-ghost:hover { background: var(--glass-2); border-color: rgba(255,255,255,.28); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Sections */
section { padding-block: var(--s-8); position: relative; }
.section-head { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-7); max-width: 52rem; }
.band-alt { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 18%, var(--bg-2) 82%, var(--bg) 100%); }
/* Inner-page hero (class name kept as band-fir for the generator) */
.band-fir { overflow: hidden; padding-block: calc(var(--s-8) + 1rem) var(--s-7); border-bottom: 1px solid var(--hair); }
.band-fir::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60rem 26rem at 78% -10%, rgba(59,123,255,.28), transparent 60%),
    radial-gradient(40rem 20rem at 10% 110%, rgba(255,143,90,.14), transparent 60%),
    linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.band-fir > .wrap { position: relative; z-index: 1; }
.band-fir h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.04; }

/* Glass panels */
.ticket, .svc, .panel { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); border: 1px solid var(--hair); border-radius: var(--r-lg); position: relative; overflow: hidden; }
.ticket::before, .svc::before, .panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(140deg, rgba(255,255,255,.24), transparent 35%, transparent 70%, rgba(107,228,245,.2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.panel .spot { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(22rem 22rem at var(--mx, 50%) var(--my, -20%), rgba(107,228,245,.10), transparent 60%); transition: opacity .3s; }
.ticket-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: .9rem 1.2rem; border-bottom: 1px solid var(--hair); font: 500 .72rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ticket-body { padding: 1.2rem; display: flex; flex-direction: column; gap: var(--s-3); }
.ticket .lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ticket .lines li { display: flex; justify-content: space-between; gap: var(--s-3); border-bottom: 1px solid var(--hair); padding: .6rem 0; font-size: .95rem; color: var(--ink-2); }
.ticket .lines li span:last-child { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.ticket .total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; padding-top: .3rem; }
.ticket .total .mono { font-size: 1.1rem; color: var(--ok); }
.ticket .stamp { align-self: flex-start; font: 500 .7rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sun-2); border: 1px solid rgba(255,196,138,.35); background: rgba(255,143,90,.08); border-radius: 999px; padding: .3rem .65rem; }
.ticket h3 { color: var(--ink); }

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.svc { display: flex; flex-direction: column; gap: var(--s-3); padding: 1.6rem; transition: transform .4s var(--ease), border-color .3s; }
.svc:hover { transform: translateY(-4px); border-color: var(--hair-2); }
.svc .code { font: 500 .72rem var(--f-mono); color: var(--sun-2); letter-spacing: .14em; }
.svc ul { margin: 0; padding-left: 1.05rem; display: flex; flex-direction: column; gap: .3rem; color: var(--ink-2); font-size: .95rem; }
.svc ul li::marker { color: var(--glacier); }
.svc .price { margin-top: auto; font: 500 .9rem var(--f-mono); color: var(--ink); padding-top: var(--s-3); border-top: 1px solid var(--hair); }

/* Steps (a real sequence) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: linear-gradient(90deg, var(--crater), var(--glacier), var(--sun-2)); opacity: .6; }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: var(--s-2); padding-top: 2.2rem; position: relative; }
.steps li::before { content: "0" counter(step); position: absolute; top: 0; left: 0; font: 500 .72rem var(--f-mono); letter-spacing: .14em; color: var(--ink); background: var(--bg); padding-right: .6rem; line-height: 15px; }
.steps li::after { content: ""; position: absolute; top: 3px; left: 2.1rem; width: 9px; height: 9px; border-radius: 50%; background: var(--glacier); box-shadow: 0 0 14px var(--glacier); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps::before { display: none; } }
@media (max-width: 540px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Mile markers */
.markers { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-3); }
.marker { background: var(--glass); border: 1px solid var(--hair); border-radius: var(--r); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.marker b { font: 500 1.02rem var(--f-display); }
.marker span { font: 400 .78rem var(--f-mono); color: var(--ink-3); }

/* Forms and calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: stretch; }
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-weight: 500; font-size: .92rem; color: var(--ink); }
.field input, .field select, .field textarea { font: 400 1rem var(--f-body); padding: .85rem 1rem; border: 1px solid var(--hair-2); border-radius: 12px; background: rgba(255,255,255,.03); color: var(--ink); width: 100%; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--glacier); box-shadow: 0 0 0 4px rgba(107,228,245,.12); }
.field select option { background: var(--bg-3); }
.field textarea { min-height: 7rem; resize: vertical; }
.field small { color: var(--ink-3); font-size: .82rem; }
.field input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--crater), var(--glacier)); padding: 0; border: 0; margin-block: .8rem; }
.field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(107,228,245,.25), 0 0 20px rgba(107,228,245,.6); cursor: pointer; }
.field input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(107,228,245,.25), 0 0 20px rgba(107,228,245,.6); cursor: pointer; }
.range-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.range-row output { font: 500 .95rem var(--f-mono); color: var(--glacier); white-space: nowrap; }
.calc-out { border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); justify-content: center; background: radial-gradient(30rem 18rem at 80% 0%, rgba(255,143,90,.22), transparent 60%), radial-gradient(30rem 20rem at 0% 100%, rgba(59,123,255,.25), transparent 60%), var(--bg-3); border: 1px solid var(--hair); }
.calc-out .big { font: 500 clamp(3rem, 8vw, 5.4rem)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-out small { color: var(--ink-3); }

/* FAQ */
details { border-bottom: 1px solid var(--hair); padding-block: 1.15rem; }
summary { cursor: pointer; font-weight: 500; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--f-mono); color: var(--glacier); transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: var(--s-3); color: var(--ink-2); }

/* Tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .8rem .8rem; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--ink-2); }
th { font: 500 .72rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
tbody th { font: 500 .92rem var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); }
td.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }

/* Prose */
.prose { display: flex; flex-direction: column; gap: var(--s-4); max-width: 46rem; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.prose h2 { font-size: 1.7rem; margin-top: var(--s-5); }
.prose h3 { margin-top: var(--s-3); }
.prose p, .prose li { color: #C9D2DC; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .4rem; max-width: 62ch; }
.prose .note { background: var(--glass); border: 1px solid var(--hair); border-left: 3px solid var(--glacier); padding: var(--s-4); border-radius: 0 var(--r) var(--r) 0; }
.byline { font: 400 .82rem var(--f-mono); color: var(--ink-3); }
.form-msg { padding: var(--s-4); border-radius: 12px; background: rgba(91,227,164,.08); border: 1px solid rgba(91,227,164,.3); }

/* ---------- Home ---------- */
.h-hero { position: relative; min-height: min(54rem, 100svh); display: flex; align-items: center; padding-block: 6rem 6rem; overflow: hidden; isolation: isolate; }
.h-hero #terrain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.h-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60rem 36rem at 22% 45%, rgba(5,7,10,.82), rgba(5,7,10,.25) 62%, transparent), linear-gradient(180deg, rgba(5,7,10,.5), transparent 22%, transparent 84%, var(--bg)); }
.h-hero .content { max-width: 54rem; display: flex; flex-direction: column; gap: var(--s-5); }
.h-hero h1 { font-size: clamp(2.8rem, 6.2vw, 5.4rem); line-height: .96; }
.h-hero .lede { max-width: 38rem; }
.h-hero h1 .line { display: block; }
.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .4rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--hair-2); font: 500 .8rem var(--f-body); color: var(--ink-2); backdrop-filter: blur(10px); }
.badge b { white-space: nowrap; font: 500 .66rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #05070A; background: var(--grad-sun); padding: .28rem .55rem; border-radius: 999px; }
.proof { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font: 400 .8rem var(--f-mono); color: var(--ink-3); }
.proof span::before { content: "✓ "; color: var(--ok); }
.beacons { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.beacon { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 .64rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; will-change: transform; }
.beacon i { width: 1px; height: 30px; background: linear-gradient(180deg, transparent, var(--sun-2)); }
.beacon::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(255,143,90,.25), 0 0 18px var(--sun); } 50% { box-shadow: 0 0 0 10px rgba(255,143,90,0), 0 0 28px var(--sun); } }
.scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); font: 400 .66rem var(--f-mono); letter-spacing: .22em; color: var(--ink-3); text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.scroll-cue::after { content: ""; width: 1px; height: 28px; background: linear-gradient(180deg, var(--ink-3), transparent); animation: cue 2s infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 700px) { .beacon { display: none; } .scroll-cue { display: none; } }

.marquee { border-block: 1px solid var(--hair); padding-block: 1.4rem; overflow: hidden; }
.marquee-mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 48s linear infinite; font: 500 1rem var(--f-display); color: var(--ink-3); white-space: nowrap; }
.marquee-track span { display: inline-flex; align-items: center; gap: 3rem; }
.marquee-track span::after { content: "◆"; font-size: .45rem; color: var(--sun); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-label { font: 500 .7rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin-bottom: 1rem; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.cell { grid-column: span 2; display: flex; flex-direction: column; gap: var(--s-3); padding: 1.6rem; min-height: 23rem; }
.cell.wide { grid-column: span 4; }
.cell.half { grid-column: span 3; }
.cell .viz { flex: 1; min-height: 11rem; position: relative; margin-top: .4rem; display: flex; align-items: center; justify-content: center; }
.cell .tag { font: 500 .7rem var(--f-mono); letter-spacing: .14em; color: var(--sun-2); }
.cell .foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--hair); }
.cell .price { font: 500 .8rem var(--f-mono); color: var(--ink-3); }
.cell a.more { color: var(--ink); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.cell a.more::after { content: " →"; font-family: var(--f-mono); color: var(--glacier); }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cell, .cell.half { grid-column: span 1; } .cell.wide { grid-column: span 2; } }
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .cell.wide { grid-column: span 1; } }

/* Live call console */
.console { width: 100%; border-radius: 16px; background: rgba(0,0,0,.45); border: 1px solid var(--hair); overflow: hidden; font-size: .88rem; }
.console-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--hair); font: 500 .7rem var(--f-mono); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.console-top .live { display: inline-flex; align-items: center; gap: .4rem; color: var(--ok); }
.console-top .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.wave i { width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--glacier), var(--crater)); height: 30%; animation: wave 1s ease-in-out infinite; }
@keyframes wave { 50% { height: 100%; } }
.console-body { padding: .9rem; display: flex; flex-direction: column; gap: .55rem; height: 17rem; overflow: hidden; justify-content: flex-end; }
.msg { max-width: 88%; padding: .55rem .8rem; border-radius: 12px; line-height: 1.45; animation: msgin .5s var(--ease) both; }
@keyframes msgin { from { transform: translateY(8px); opacity: 0; } }
.msg.ai { background: rgba(59,123,255,.14); border: 1px solid rgba(59,123,255,.3); align-self: flex-start; }
.msg.caller { background: rgba(255,255,255,.05); border: 1px solid var(--hair); align-self: flex-end; }
.msg small { display: block; font: 500 .6rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .15rem; }
.event { align-self: center; font: 500 .7rem var(--f-mono); color: var(--ok); border: 1px dashed rgba(91,227,164,.4); padding: .3rem .65rem; border-radius: 999px; animation: msgin .5s var(--ease) both; }

/* Automation graph */
.graph { width: 100%; }
.graph svg { width: 100%; height: auto; overflow: visible; }
.graph .flow { stroke-dasharray: 4 7; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.graph text { font: 500 10px var(--f-mono); fill: #C9D2DC; letter-spacing: .04em; }

/* Map pack card */
.mappack { width: 100%; display: flex; flex-direction: column; gap: .5rem; }
.mp-row { display: grid; grid-template-columns: 1.6rem minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .6rem .75rem; border-radius: 12px; border: 1px solid var(--hair); background: rgba(255,255,255,.025); font-size: .85rem; color: var(--ink-2); transition: transform .6s var(--ease); }
.mp-row b { color: var(--ink); font-weight: 500; display: block; }
.mp-row .pin { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font: 600 .72rem var(--f-mono); background: var(--glass-2); color: var(--ink-2); }
.mp-row.you { border-color: rgba(255,196,138,.45); background: rgba(255,143,90,.08); }
.mp-row.you .pin { background: var(--grad-sun); color: #05070A; }
.stars { color: var(--sun-2); letter-spacing: 1px; font-size: .74rem; }
.search-pill { font: 400 .8rem var(--f-mono); color: var(--ink-2); border: 1px solid var(--hair); border-radius: 999px; padding: .5rem .8rem; margin-bottom: .2rem; }
.search-pill::before { content: "⌕ "; color: var(--glacier); }

/* Pipeline */
.pipe { width: 100%; display: flex; flex-direction: column; gap: .75rem; }
.pipe-row { display: grid; grid-template-columns: 7rem minmax(0,1fr) 2.2rem; gap: .7rem; align-items: center; font: 400 .78rem var(--f-mono); color: var(--ink-3); }
.pipe-bar { height: 10px; border-radius: 10px; background: rgba(255,255,255,.05); overflow: hidden; }
.pipe-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--crater), var(--glacier)); transform-origin: left; }
.pipe-row:last-child .pipe-bar i { background: var(--grad-sun); }
.pipe-row span:last-child { color: var(--ink); text-align: right; }

/* Policy doc */
.doc { width: 78%; max-width: 15rem; aspect-ratio: 3 / 4; border-radius: 10px; background: #E9EEF3; color: #0A0E13; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; transform: rotate(-4deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.2); transition: transform .6s var(--ease); }
.cell:hover .doc { transform: rotate(0deg) translateY(-6px); }
.doc b { font: 600 .82rem var(--f-display); color: #0A0E13; }
.doc i { display: block; height: 5px; border-radius: 3px; background: #C6D0DA; }
.doc i.s { width: 60%; } .doc i.m { width: 82%; }
.doc .seal { margin-top: auto; align-self: flex-end; font: 600 .6rem var(--f-mono); letter-spacing: .12em; color: #2E5BD8; border: 1.5px solid #2E5BD8; border-radius: 999px; padding: .25rem .5rem; }

/* Checkup cell */
.cell.cta-cell { background: radial-gradient(26rem 18rem at 100% 0%, rgba(255,143,90,.25), transparent 60%), radial-gradient(26rem 18rem at 0% 100%, rgba(59,123,255,.3), transparent 60%), var(--bg-3); }
.cell.cta-cell h3 { font-size: 1.8rem; letter-spacing: -.03em; font-weight: 500; }

/* Metrics */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }
.metric { padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; border-right: 1px solid var(--hair); background: rgba(255,255,255,.015); }
.metric:last-child { border-right: 0; }
.metric b { font: 500 clamp(2.2rem, 4.5vw, 3.4rem)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.metric b .u { font: 500 .42em var(--f-mono); letter-spacing: .02em; color: var(--sun-2); margin-left: .25em; align-self: flex-start; padding-top: .35em; -webkit-text-fill-color: var(--sun-2); }
.metric .m-lbl { color: var(--ink-2); font-size: .9rem; }
@media (max-width: 860px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric:nth-child(2) { border-right: 0; } .metric:nth-child(-n+2) { border-bottom: 1px solid var(--hair); } }

/* Valley map */
.valley { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: center; }
.valley-map { position: relative; border-radius: var(--r-lg); border: 1px solid var(--hair); background: radial-gradient(30rem 24rem at 50% 50%, rgba(59,123,255,.12), transparent 70%), var(--bg-2); padding: 1rem; }
.valley svg { width: 100%; height: auto; display: block; }
.valley text { font: 500 11px var(--f-mono); letter-spacing: .14em; fill: #C9D2DC; }
.valley text.sub { fill: #6E7A87; font-size: 9px; letter-spacing: .1em; }
.valley .road { stroke-dasharray: 3 7; animation: flow 1.6s linear infinite; }
.valley .ring { transform-box: fill-box; transform-origin: center; animation: ring 3s ease-out infinite; }
@keyframes ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
@media (max-width: 900px) { .valley { grid-template-columns: minmax(0, 1fr); } }

/* Pledge */
.pledge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }
.pledge div { background: var(--bg); padding: 1.6rem; display: flex; flex-direction: column; gap: .5rem; transition: background .3s; }
.pledge div:hover { background: var(--bg-2); }
.pledge div span { font: 500 .72rem var(--f-mono); color: var(--sun-2); letter-spacing: .14em; }
.pledge div p { color: var(--ink-2); font-size: .94rem; }

/* CTA */
.cta-final { text-align: center; overflow: hidden; padding-block: 9rem; }
.cta-final .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.cta-final h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); max-width: 15ch; }
.cta-final p { margin-inline: auto; }
.cta-final::before { content: ""; position: absolute; left: 50%; top: 50%; width: 80rem; height: 34rem; max-width: 200%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(59,123,255,.38), rgba(107,228,245,.12) 50%, transparent); pointer-events: none; }
.cta-final::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); opacity: .7; }
.cta-final .wrap { z-index: 1; }
.cta-final .btn-row { justify-content: center; }

/* Cursor glow (pointer devices only) */
.cursor-glow { position: fixed; left: 0; top: 0; width: 34rem; height: 34rem; border-radius: 50%; pointer-events: none; z-index: 2; background: radial-gradient(closest-side, rgba(59,123,255,.09), transparent); transform: translate3d(-100rem, -100rem, 0); }
@media (hover: none) { .cursor-glow { display: none; } }

/* Footer */
.site-footer { border-top: 1px solid var(--hair); padding-block: var(--s-7) var(--s-5); font-size: .93rem; color: var(--ink-2); position: relative; overflow: hidden; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.foot-grid h4 { font: 500 .72rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.foot-legal { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font: 400 .78rem var(--f-mono); color: var(--ink-3); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Scroll reveal: content is always visible; motion only adds a short lift. */
.js .reveal { transition: transform 1s var(--ease); }
.js .reveal.pre { transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal.pre { transform: none; }
}

/* Two-column hero used on inner pages (Checkup) */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

@media (max-width: 860px) { .pledge { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pledge { grid-template-columns: minmax(0, 1fr); } }
.cell.full { grid-column: 1 / -1; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding: 2rem; }
.cell.full .copy { display: flex; flex-direction: column; gap: .6rem; max-width: 40rem; }
.cell.full .foot { margin-top: 0; border-top: 0; padding-top: 0; flex-direction: column; align-items: flex-end; }
@media (max-width: 640px) { .cell.full .foot { align-items: flex-start; } }
.foot-word { margin-top: var(--s-7); line-height: 0; }
.foot-word svg { width: 100%; height: auto; display: block; }
.graph text { font-size: 11px; }

/* Hero map beacons: home (Albany) in sunstone, distant towns lighter and smaller */
.beacon.far { color: var(--ink-3); font-size: .55rem; letter-spacing: .12em; }
.beacon.far i { height: 12px; background: linear-gradient(180deg, transparent, rgba(163,174,187,.5)); }
.beacon.far::after { width: 4px; height: 4px; background: #8A96A3; animation: none; box-shadow: none; }
.beacon:not(.far):not(.home)::after { background: var(--glacier); animation: none; box-shadow: 0 0 0 3px rgba(107,228,245,.18), 0 0 14px var(--glacier); }
.beacon:not(.far):not(.home) i { background: linear-gradient(180deg, transparent, var(--glacier)); }
.beacon.home { color: var(--ink); }
.map-legend { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 1.4rem; display: flex; gap: 1.2rem; font: 500 .62rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.map-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.map-legend i { width: 6px; height: 6px; border-radius: 50%; }
@media (max-width: 700px) { .map-legend { display: none; } }
/* Town labels glow briefly as the Albany pulse passes */
.beacon { --hl: 0; text-shadow: 0 0 calc(var(--hl) * 14px) rgba(255, 170, 120, calc(var(--hl) * .95)); }
.beacon::after { transform: scale(calc(1 + var(--hl) * .8)); }
.h-hero > .wrap { width: 100%; }

/* =====================================================================
   v3 "Obsidian Signal" layer (2026-10-19)
   Same brand tokens and fonts; adds depth (ambient light, grid), glass,
   HUD details, motion polish and fixes. Everything here degrades to a
   readable static page with no JS and with reduced motion.
   ===================================================================== */
:root { --hdr: 62px; --glow-c: 0 0 0 1px rgba(107,228,245,.35), 0 0 28px -4px rgba(107,228,245,.45); }
html { scroll-padding-top: calc(var(--hdr) + 4.5rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: transparent; }

/* Ambient field: slow aurora light over a faint engineering grid */
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-fx .aurora { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .55; will-change: transform; }
.bg-fx .a1 { left: -20vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(59,123,255,.16), transparent 70%); animation: drift1 38s ease-in-out infinite alternate; }
.bg-fx .a2 { right: -25vmax; top: 20vh; background: radial-gradient(closest-side, rgba(107,228,245,.08), transparent 70%); animation: drift2 46s ease-in-out infinite alternate; }
.bg-fx .a3 { left: 20vw; bottom: -45vmax; background: radial-gradient(closest-side, rgba(255,143,90,.07), transparent 70%); animation: drift1 52s ease-in-out infinite alternate-reverse; }
.bg-fx .grid-fx { position: absolute; inset: 0; opacity: .5;
  background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 72px 72px, linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 72px 72px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%); }
@keyframes drift1 { to { transform: translate3d(14vw, 10vh, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-12vw, -8vh, 0) scale(.9); } }

/* Scroll progress + header state */
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 70; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--crater), var(--glacier), var(--sun-2)); box-shadow: 0 0 12px rgba(107,228,245,.7); }
.site-header { transition: background .35s, box-shadow .35s, border-color .35s; }
.site-header.scrolled { background: rgba(5,7,10,.82); border-bottom-color: rgba(107,228,245,.14); box-shadow: 0 18px 50px -30px rgba(0,0,0,.9); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(107,228,245,.5), rgba(255,196,138,.4), transparent); opacity: 0; transition: opacity .4s; }
.site-header.scrolled::after { opacity: 1; }
@media (min-width: 1001px) {
  .nav a:not(.btn) { position: relative; padding-block: .35rem; }
  .nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: linear-gradient(90deg, var(--crater), var(--glacier)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); box-shadow: 0 0 8px var(--glacier); }
  .nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
}
@media (max-width: 1000px) { .nav { background: rgba(7,10,14,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); } }

/* Focus: visible, branded, never clipped */
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(107,228,245,.18); }
.btn:focus-visible { border-radius: 999px; }

/* Buttons: light sheen, glow ring, pressed state */
.btn { isolation: isolate; overflow: hidden; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, transparent 25%, rgba(107,228,245,.45) 45%, rgba(255,196,138,.35) 55%, transparent 75%); transform: translateX(-130%); transition: transform .8s var(--ease); }
.btn:hover::before { transform: translateX(130%); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary { background: linear-gradient(180deg, #FFFFFF, #DCE6EF); }
.btn-ghost { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: rgba(107,228,245,.45); box-shadow: 0 0 24px -6px rgba(107,228,245,.45); }
.btn-ghost::before { background: linear-gradient(110deg, transparent 30%, rgba(107,228,245,.14) 50%, transparent 70%); }

/* Section rhythm: numbered heads and a lit seam between sections */
main { counter-reset: sec; }
.section-head .eyebrow, .pg-index .stack.reveal > .eyebrow:first-child { counter-increment: sec; }
.section-head .eyebrow::before, .pg-index .stack.reveal > .eyebrow:first-child::before { content: counter(sec, decimal-leading-zero); width: auto; height: auto; border-radius: 6px; padding: .22rem .42rem; font: 500 .66rem/1 var(--f-mono); letter-spacing: .08em; color: var(--sun-2); background: rgba(255,143,90,.08); border: 1px solid rgba(255,196,138,.3); box-shadow: 0 0 16px -4px rgba(255,143,90,.5); }
main > section + section:not(.cta-final):not(.band-fir)::before { content: ""; position: absolute; top: 0; left: 50%; width: min(76rem, 92%); height: 1px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(107,228,245,.28) 30%, rgba(255,196,138,.22) 70%, transparent); }
.band-alt { background: linear-gradient(180deg, transparent 0%, rgba(10,14,19,.72) 18%, rgba(10,14,19,.72) 82%, transparent 100%); }
section:has(> .wrap > .metrics) { padding-block: 2.5rem 1rem; }
section:has(> .wrap > .metrics)::before { display: none; }
h2 { letter-spacing: -.04em; }

/* Glass, hover glow and pointer spotlight on every card type */
.ticket, .svc, .panel { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(10,14,19,.55); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -50px rgba(0,0,0,.9); transition: transform .45s var(--ease), box-shadow .45s, border-color .3s; }
.ticket::before, .svc::before, .panel::before { transition: opacity .4s; }
.svc::after, .ticket::after, .metric::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, -30%), rgba(107,228,245,.09), transparent 60%); opacity: 0; transition: opacity .35s; }
.svc:hover::after, .ticket:hover::after, .metric:hover::after { opacity: 1; }
.svc:hover, .panel:hover, main .ticket:hover { border-color: rgba(107,228,245,.28); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 40px 90px -45px rgba(59,123,255,.55), 0 0 0 1px rgba(107,228,245,.08); }
.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
.tilt.svc:hover, .tilt.cell:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.js .reveal.tilt:not(.pre) { transition: transform .45s var(--ease), opacity .9s var(--ease), filter .9s var(--ease), box-shadow .45s, border-color .3s; }

/* Scroll reveal: fade, lift and de-blur. Never applied without JS or with reduced motion. */
.js .reveal { transition: transform 1s var(--ease), opacity .9s var(--ease), filter .9s var(--ease); }
.js .reveal.pre { opacity: 0; transform: translateY(26px); filter: blur(6px); }

/* ---------- Home hero ---------- */
.h-hero { padding-block: 6rem 8rem; }
.js .h-hero .content > * { animation: rise .9s var(--ease) both; }
.js .h-hero .content > :nth-child(1) { animation-delay: .05s; }
.js .h-hero h1 { animation: none !important; }
.js .h-hero h1 .line { animation: rise-line 1s var(--ease) both; }
.js .h-hero h1 .line:nth-child(1) { animation-delay: .12s; }
.js .h-hero h1 .line:nth-child(2) { animation-delay: .26s; }
.js .h-hero .content > :nth-child(3) { animation-delay: .4s; }
.js .h-hero .content > :nth-child(4) { animation-delay: .5s; }
.js .h-hero .content > :nth-child(5) { animation-delay: .6s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
@keyframes rise-line { from { opacity: .1; transform: translateY(.35em); filter: blur(10px); } }
.h-hero h1 em { background: linear-gradient(100deg, #5B8EFF 0%, #6BE4F5 28%, #FFC48A 50%, #6BE4F5 72%, #5B8EFF 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 9s linear infinite; }
@keyframes shimmer { to { background-position: 200% 0; } }
.badge { box-shadow: 0 0 0 1px rgba(255,196,138,.08), 0 10px 30px -14px rgba(255,143,90,.5); }
.badge b { position: relative; }
.badge b::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 1px solid rgba(255,196,138,.6); animation: ping 2.6s var(--ease) infinite; }
@keyframes ping { 0% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.35, 1.6); } }
.proof { font-size: .78rem; }
.proof span { padding: .3rem .6rem; border: 1px solid var(--hair); border-radius: 999px; background: rgba(5,7,10,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.proof span::before { content: "● "; font-size: .6rem; vertical-align: .12em; text-shadow: 0 0 8px var(--ok); }
.proof { gap: .5rem .6rem; }

/* HUD frame around the map and a systems rail along the bottom of the hero */
.hud-frame { position: absolute; top: 7rem; bottom: 6.5rem; right: max(20px, calc((100vw - var(--wrap)) / 2 + 20px)); left: 54%; pointer-events: none; z-index: -1; }
.hud-frame i { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(107,228,245,.5); }
.hud-frame i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.hud-frame i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.hud-frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.hud-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.hud-frame::after { content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(107,228,245,.55), transparent); box-shadow: 0 0 14px rgba(107,228,245,.6); animation: scan 7s ease-in-out infinite; opacity: .7; }
@keyframes scan { 0%, 100% { transform: translateY(0); opacity: 0; } 10%, 90% { opacity: .7; } 50% { transform: translateY(var(--scan, 30rem)); } }
.hud-frame { --scan: calc(100svh - 18rem); }
.hud-frame.locked { right: auto; bottom: auto; } /* site.js sizes it to the I-5 corridor */
@media (max-width: 1000px) { .hud-frame { display: none; } }
.sys-rail { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--hair); background: linear-gradient(180deg, rgba(5,7,10,.35), rgba(5,7,10,.75)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sys-rail .wrap { display: flex; align-items: center; gap: 1.6rem; padding-block: .95rem; font: 500 .68rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.sys-rail .sys-h { color: var(--ink-2); padding-right: 1.4rem; border-right: 1px solid var(--hair-2); }
.sys-rail .sys { display: inline-flex; align-items: center; gap: .55rem; }
.sys-rail .sys i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 2.4s infinite; }
.sys-rail .sys:nth-child(3) i { animation-delay: .4s; } .sys-rail .sys:nth-child(4) i { animation-delay: .8s; } .sys-rail .sys:nth-child(5) i { animation-delay: 1.2s; } .sys-rail .sys:nth-child(6) i { animation-delay: 1.6s; }
@media (max-width: 700px) { .sys-rail .wrap { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); gap: 1.1rem; } .sys-rail .sys-h { padding-right: 1.1rem; } .h-hero { padding-block: 4.5rem 6.5rem; } }

/* Marquee */
.marquee { background: rgba(5,7,10,.4); }
.marquee-track { color: #8C98A5; }

/* ---------- Bento demos ---------- */
.cell h3 { font-size: 1.32rem; letter-spacing: -.02em; font-weight: 500; }
.cell .tag { display: inline-flex; align-items: center; gap: .5rem; }
.cell .tag::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--sun); box-shadow: 0 0 8px var(--sun); transform: rotate(45deg); }

/* Console: terminal chrome + agent log */
.console { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(3,6,10,.7)); box-shadow: inset 0 0 0 1px rgba(107,228,245,.05), 0 20px 50px -30px rgba(59,123,255,.6); }
.console-top .dots { display: inline-flex; gap: 5px; margin-right: .2rem; }
.console-top .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.console-top .dots i:nth-child(2) { background: rgba(255,196,138,.55); } .console-top .dots i:nth-child(3) { background: rgba(91,227,164,.55); }
.console-top .who { margin-left: auto; }
.console-top .wave { margin-left: auto; }
.console-grid { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; }
.console-log { border-left: 1px solid var(--hair); padding: .8rem .9rem; font: 400 .68rem/1.5 var(--f-mono); color: var(--ink-3); display: flex; flex-direction: column; background: repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px); min-width: 0; }
.console-log .log-h { color: var(--ink-2); letter-spacing: .1em; text-transform: uppercase; padding-bottom: .5rem; margin-bottom: .4rem; border-bottom: 1px dashed var(--hair-2); }
.console-log .log-h::before { content: "$ tail -f "; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
#console-log { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; gap: .28rem; overflow: hidden; }
#console-log p { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); gap: 0 .4rem; animation: msgin .4s var(--ease) both; max-width: none; }
#console-log .ts { color: #5E6A77; grid-row: span 2; }
#console-log .fn { color: var(--glacier); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#console-log .rv { color: var(--ok); }
#console-log .rv::before { content: "→ "; color: var(--ink-3); }
#console-log p:last-child .rv::after { content: "▍"; color: var(--glacier); margin-left: .3em; animation: blink 1s steps(1) infinite; }
.msg.ai { background: linear-gradient(180deg, rgba(59,123,255,.2), rgba(59,123,255,.1)); box-shadow: 0 0 24px -12px rgba(59,123,255,.8); }
@media (max-width: 760px) {
  .console-grid { grid-template-columns: minmax(0, 1fr); }
  .console-log { border-left: 0; border-top: 1px solid var(--hair); max-height: 9.5rem; }
  .console-top .wave, .console-top .dots { display: none; }
  .console-top { font-size: .62rem; letter-spacing: .06em; }
  .console-top .live { white-space: nowrap; }
}

/* Automation graph: vertical, larger type, travelling pulses */
.viz.graph { max-width: 19rem; margin-inline: auto; }
.graph text { font: 500 12px var(--f-mono); fill: #D3DBE4; letter-spacing: .02em; }
.graph text.sub { fill: #8C98A5; font-size: 11px; }
.graph .pulse { stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 9 91; stroke-dashoffset: 100; animation: comet 2.6s linear infinite; filter: drop-shadow(0 0 4px rgba(107,228,245,.9)); }
.graph .pulse.p2 { animation-delay: .9s; } .graph .pulse.p3 { animation-delay: 1.5s; filter: drop-shadow(0 0 4px rgba(255,196,138,.9)); }
@keyframes comet { to { stroke-dashoffset: 0; } }
.graph .node.live { animation: nodeglow 2.6s ease-in-out infinite; }
@keyframes nodeglow { 50% { fill: rgba(59,123,255,.28); } }

/* Policy doc: dark glass sheet with a reading scanline */
.doc { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); color: var(--ink); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 50px -16px rgba(59,123,255,.55); }
.doc b { color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
.doc i { background: rgba(163,174,187,.22); }
.doc .seal { color: var(--ok); border-color: rgba(91,227,164,.7); box-shadow: 0 0 14px -2px rgba(91,227,164,.5); }
.doc::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(107,228,245,.14) 85%, rgba(107,228,245,.5) 100%); border-bottom: 1px solid rgba(107,228,245,.6); animation: read 4.5s ease-in-out infinite; }
@keyframes read { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(340%); } }

/* Map pack + pipeline polish */
.mp-row.you { box-shadow: 0 0 30px -12px rgba(255,143,90,.7); }
.pipe-bar { height: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.pipe-bar i { box-shadow: 0 0 14px rgba(107,228,245,.5); }
.cell.cta-cell { background: radial-gradient(26rem 18rem at 100% 0%, rgba(255,143,90,.25), transparent 60%), radial-gradient(26rem 18rem at 0% 100%, rgba(59,123,255,.3), transparent 60%), rgba(15,21,28,.8); }

/* Metrics: HUD spec tiles */
.metrics { gap: 0; background: rgba(8,11,15,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 40px 90px -60px rgba(59,123,255,.6); }
.metric { position: relative; gap: .7rem; padding: 1.7rem 1.6rem 1.5rem; background: transparent; }
.metric .m-code { font: 500 .64rem/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-3); }
.metric b { display: flex; align-items: flex-start; background: linear-gradient(180deg, #FFFFFF 20%, #9FC2FF); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
.metric b .n { font: inherit; }
.metric .m-bar { display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,.07); margin-top: .3rem; overflow: hidden; }
.metric .m-bar::after { content: ""; display: block; height: 100%; width: var(--v); background: linear-gradient(90deg, var(--crater), var(--glacier)); box-shadow: 0 0 10px var(--glacier); transform-origin: left; transition: transform 1.6s .35s var(--ease); }
.metrics.pre .m-bar::after { transform: scaleX(0); }

/* Calculator */
.calc .panel { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(10,14,19,.6); }
.calc-out { position: relative; overflow: hidden; box-shadow: 0 40px 90px -50px rgba(255,143,90,.45); }
.calc-out::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 28px 28px; -webkit-mask-image: radial-gradient(80% 80% at 80% 20%, #000, transparent); mask-image: radial-gradient(80% 80% at 80% 20%, #000, transparent); }
.calc-out > * { position: relative; }
.calc-out .big { filter: drop-shadow(0 0 28px rgba(255,143,90,.35)); }

/* Steps: line draws in, nodes glow in sequence */
.steps::before { background: var(--hair-2); opacity: 1; }
.steps::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: linear-gradient(90deg, var(--crater), var(--glacier), var(--sun-2)); box-shadow: 0 0 12px rgba(107,228,245,.8); transform-origin: left; transition: transform 1.8s var(--ease); }
.js .steps:not(.on)::after { transform: scaleX(0); }
.steps li::after { transition: transform .5s var(--ease), box-shadow .5s; }
.steps.on li::after { animation: nodepulse 3.2s ease-in-out infinite; }
.steps.on li:nth-child(2)::after { animation-delay: .5s; } .steps.on li:nth-child(3)::after { animation-delay: 1s; } .steps.on li:nth-child(4)::after { animation-delay: 1.5s; }
@keyframes nodepulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(107,228,245,.5), 0 0 14px var(--glacier); } 40% { box-shadow: 0 0 0 7px rgba(107,228,245,0), 0 0 22px var(--glacier); } }
.steps li h3 { font-weight: 500; font-size: 1.18rem; }
@media (max-width: 960px) { .steps::after { display: none; } }

/* Outcome + pledge grids */
.pledge { background: rgba(255,255,255,.07); }
.pledge div { background: rgba(7,10,14,.88); position: relative; }
.pledge div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(107,228,245,.6), transparent); opacity: 0; transition: opacity .35s; }
.pledge div:hover { background: rgba(12,17,23,.92); }
.pledge div:hover::before { opacity: 1; }
.pledge div h3 { font-weight: 500; }

/* FAQ as glass accordions */
details { border: 1px solid var(--hair); border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: .6rem; background: rgba(255,255,255,.025); transition: border-color .3s, background .3s; }
details:hover { border-color: var(--hair-2); }
details[open] { border-color: rgba(107,228,245,.3); background: rgba(59,123,255,.06); }
summary { align-items: center; }
summary::after { flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid var(--hair-2); border-radius: 50%; font-size: .95rem; }
details[open] summary::after { border-color: rgba(107,228,245,.5); box-shadow: 0 0 12px -2px rgba(107,228,245,.6); }
summary:focus-visible { border-radius: 8px; }

/* Final CTA: orbit rings */
.cta-final .orbit, .cta-final .wrap::before, .cta-final .wrap::after { pointer-events: none; }
.cta-final .wrap::before, .cta-final .wrap::after { content: ""; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px), #000 100%, transparent 100%); mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px), #000 100%, transparent 100%); }
.cta-final .wrap::before { width: min(46rem, 130vw); background: conic-gradient(from 0deg, transparent 0 55%, rgba(107,228,245,.9) 75%, transparent 76%); animation: spin 18s linear infinite; translate: -50% -50%; }
.cta-final .wrap::after { width: min(34rem, 100vw); background: conic-gradient(from 180deg, transparent 0 60%, rgba(255,196,138,.8) 80%, transparent 81%); animation: spin 26s linear infinite reverse; translate: -50% -50%; opacity: .8; }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- Inner pages ---------- */
.band-fir::after { content: ""; position: absolute; left: -30%; right: -30%; bottom: 0; height: 75%; pointer-events: none; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  background: linear-gradient(rgba(107,228,245,.18) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(107,228,245,.14) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 85%); mask-image: linear-gradient(0deg, #000, transparent 85%); opacity: .45; animation: floor 5s linear infinite; }
@keyframes floor { to { background-position: 0 56px, 0 0; } }
.band-fir { padding-block: calc(var(--s-8) + .5rem) calc(var(--s-7) + 1rem); }
.band-fir h1 { max-width: 18ch; }
.band-fir .hero-grid h1 { max-width: none; }
.js .band-fir .wrap > *, .js .band-fir .stack-lg > *, .js .band-fir .hero-grid > aside { animation: rise .9s var(--ease) both; }
.js .band-fir .wrap > :nth-child(2), .js .band-fir .stack-lg > :nth-child(2) { animation-delay: .08s; }
.js .band-fir .wrap > :nth-child(3), .js .band-fir .stack-lg > :nth-child(3) { animation-delay: .16s; }
.js .band-fir .wrap > :nth-child(4), .js .band-fir .hero-grid > aside { animation-delay: .24s; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.crumb a { color: var(--ink-3); text-decoration: none; transition: color .2s; }
.crumb a:hover { color: var(--ink); }
.crumb span[aria-hidden] { color: #4A5562; }
.crumb [aria-current] { color: var(--ink-2); display: inline-flex; align-items: center; gap: .55rem; }
.crumb [aria-current]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 12px var(--sun); }

/* Services: sticky work-order index */
.wo-nav { position: sticky; top: calc(var(--hdr) + env(safe-area-inset-top, 0px)); z-index: 35; background: rgba(5,7,10,.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--hair); }
.wo-nav .wrap { display: flex; gap: .5rem; overflow-x: auto; padding-block: .7rem; scrollbar-width: none; }
.wo-nav .wrap::-webkit-scrollbar { display: none; }
.wo-nav a { flex: none; display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--hair); background: rgba(255,255,255,.03); color: var(--ink-2); text-decoration: none; font-size: .86rem; transition: border-color .25s, color .25s, background .25s, box-shadow .25s; }
.wo-nav a span { font: 500 .66rem var(--f-mono); letter-spacing: .1em; color: var(--sun-2); }
.wo-nav a:hover, .wo-nav a[aria-current="true"] { color: var(--ink); border-color: rgba(107,228,245,.4); background: rgba(59,123,255,.1); box-shadow: 0 0 20px -8px rgba(107,228,245,.7); }
ul.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
ul.checks li { position: relative; padding-left: 2rem; color: var(--ink-2); }
ul.checks li::before { content: "✓"; position: absolute; left: 0; top: .15em; width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 6px; font: 600 .7rem/1 var(--f-mono); color: var(--glacier); background: rgba(107,228,245,.08); border: 1px solid rgba(107,228,245,.3); }
.svc ul { list-style: none; padding-left: 0; }
.svc ul li { position: relative; padding-left: 1.1rem; }
.svc ul li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: 5px; height: 5px; background: var(--glacier); transform: rotate(45deg); box-shadow: 0 0 8px var(--glacier); }
.ticket-head span:first-child { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-2); }
.ticket-head span:first-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.ticket-head { background: rgba(255,255,255,.02); }
.svc h3 { font-weight: 500; font-size: 1.28rem; letter-spacing: -.02em; }
table th, table td { transition: background .2s; }
tbody tr:hover td, tbody tr:hover th { background: rgba(107,228,245,.035); }
.table-wrap { border: 1px solid var(--hair); border-radius: var(--r-lg); background: rgba(8,11,15,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ticket .table-wrap { border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
.table-wrap > table th:first-child, .table-wrap > table td:first-child { padding-left: 1.2rem; }
.table-wrap > table tr:last-child > * { border-bottom: 0; }
.field input, .field select, .field textarea { background: rgba(8,11,15,.6); backdrop-filter: blur(8px); }
.prose h2 { letter-spacing: -.03em; }

/* Footer */
.site-footer { background: radial-gradient(50rem 22rem at 50% 120%, rgba(59,123,255,.14), transparent 70%), rgba(5,7,10,.6); }
.site-footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(107,228,245,.45), rgba(255,196,138,.35), transparent); }

@media (prefers-reduced-motion: reduce) {
  .bg-fx .aurora, .hud-frame::after, .doc::after { animation: none !important; }
  .js .reveal.pre { opacity: 1; filter: none; transform: none; }
  .js .steps:not(.on)::after { transform: none; }
}

/* Services: outlined work-order numerals behind each section */
section[data-code] { overflow: hidden; }
section[data-code]::after { content: attr(data-code); position: absolute; left: max(12px, calc((100vw - var(--wrap)) / 2)); top: 1.2rem; z-index: 0; pointer-events: none;
  font: 700 clamp(4.5rem, 13vw, 10.5rem)/1 var(--f-wide); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(107,228,245,.09);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 90%); mask-image: linear-gradient(180deg, #000 20%, transparent 90%); }
section[data-code] > .wrap { z-index: 1; }

/* Forms sit on a glass panel */
main form[data-endpoint] { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--hair); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), rgba(10,14,19,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 40px 90px -60px rgba(59,123,255,.6); }
input[type="checkbox"] { accent-color: var(--glacier); width: 1.05rem; height: 1.05rem; margin-top: .2rem; flex: none; }

/* ===== v4 subpages (2026-10-19): pledge ledger, legal documents, about, industries, resources ===== */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips span { font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: .4rem .75rem; border: 1px solid var(--hair-2); border-radius: 999px; background: rgba(255,255,255,.03); }
.chips span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--glacier); margin-right: .5rem; vertical-align: middle; box-shadow: 0 0 8px var(--glacier); }
.band-fir h1 em, .section-head h2 em, .ind-other h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; background: var(--grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }

/* facts strip */
.facts-strip { padding: 0; border-bottom: 1px solid var(--hair); background: rgba(255,255,255,.015); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts > div { padding: 1.4rem 1.2rem; border-left: 1px solid var(--hair); display: flex; flex-direction: column; gap: .35rem; }
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts .k { font: 500 .68rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.facts b { font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.facts.glance b { color: var(--sun-2); }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts > div:nth-child(3) { border-left: 0; padding-left: 0; } .facts > div { border-top: 1px solid var(--hair); } .facts > div:nth-child(-n+2) { border-top: 0; } }

/* pledge */
.pledge-hero { align-items: center; }
.seal-wrap { display: grid; place-items: center; }
.seal { width: min(20rem, 70vw); height: auto; animation: sealspin 60s linear infinite; filter: drop-shadow(0 0 40px rgba(59,123,255,.25)); }
.seal .ring { font: 500 11.5px var(--f-mono); letter-spacing: .32em; fill: var(--ink-2); }
.seal .big, .seal .small { animation: sealspin 60s linear infinite reverse; transform-origin: 100px 100px; }
.seal .big { font: 600 54px var(--f-wide); fill: var(--sun-2); }
.seal .small { font: 500 9px var(--f-mono); letter-spacing: .3em; fill: var(--ink-3); }
@keyframes sealspin { to { transform: rotate(360deg); } }
.seal { transform-origin: 50% 50%; }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); counter-reset: none; }
.promise { display: grid; grid-template-columns: 5.5rem minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--hair); position: relative; transition: background .4s; }
.promise::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--grad-light); transition: width .8s var(--ease); }
.promise:hover::before { width: 100%; }
.promise .n { font: 600 2.6rem/1 var(--f-wide); background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
.promise h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 500; letter-spacing: -.02em; margin: 0 0 .5rem; }
.promise .pt p { color: var(--ink-2); max-width: 46ch; }
.promise .pw { margin: 0; display: flex; flex-direction: column; gap: 1rem; padding-left: var(--s-5); border-left: 1px solid var(--hair); }
.promise dt { font: 500 .68rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--glacier); margin-bottom: .25rem; }
.promise dd { margin: 0; color: var(--ink); font-size: .95rem; }
.promise .pw div:last-child dt { color: var(--ok); }
@media (max-width: 860px) { .promise { grid-template-columns: 1fr; gap: var(--s-4); } .promise .pw { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); padding-top: var(--s-4); } }
.steps.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .steps.steps-3 { grid-template-columns: 1fr; } }

/* legal documents */
.legal { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.toc { position: sticky; top: 6rem; }
.toc-h { font: 500 .68rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .8rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--hair); }
.toc a { display: flex; gap: .7rem; padding: .45rem 0 .45rem 1rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--ink-2); text-decoration: none; font-size: .9rem; transition: color .2s, border-color .2s; }
.toc a span { font: 500 .72rem/1.6 var(--f-mono); color: var(--ink-3); }
.toc a:hover, .toc a[aria-current] { color: var(--ink); border-left-color: var(--glacier); }
.toc a[aria-current] span { color: var(--glacier); }
.legal-doc { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 3.25rem); display: flex; flex-direction: column; gap: var(--s-6); max-width: 50rem; position: relative; overflow: hidden; }
.legal-doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--grad-light); opacity: .7; }
.legal-note:empty { display: none; }
.clause { scroll-margin-top: 6rem; display: flex; flex-direction: column; gap: .7rem; padding-top: var(--s-5); border-top: 1px solid var(--hair); }
.legal-note + .clause, .legal-doc > .clause:first-child { border-top: 0; padding-top: 0; }
.sec-no { font: 500 .72rem var(--f-mono); letter-spacing: .14em; color: var(--sun-2); margin: 0; }
.clause h2 { font-size: 1.45rem; font-weight: 500; letter-spacing: -.02em; margin: 0; }
.clause p, .clause li { color: #C9D2DC; line-height: 1.7; }
.clause ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.clause li { padding-left: 1.4rem; position: relative; }
.clause li::before { content: ""; position: absolute; left: .2rem; top: .7em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--glacier); }
@media (max-width: 960px) { .legal { grid-template-columns: 1fr; gap: var(--s-5); } .toc { position: static; } .toc ol { flex-direction: row; flex-wrap: wrap; border-left: 0; gap: .4rem; } .toc a { border: 1px solid var(--hair); border-radius: 999px; padding: .35rem .8rem; margin: 0; font-size: .82rem; } }

/* article pages reuse the document sheet */
.article-wrap { display: flex; justify-content: center; }
.article-wrap .legal-doc { max-width: 48rem; width: 100%; }
.article-wrap .legal-doc h2 { font-size: 1.5rem; font-weight: 500; margin-top: var(--s-4); }

/* about */
.founder { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.mono-badge { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; font: 600 1.4rem var(--f-wide); color: #05070A; background: var(--grad-light); box-shadow: 0 0 0 6px rgba(107,228,245,.08), 0 18px 40px -14px rgba(59,123,255,.6); }
.founder-card h2 { font-size: 1.6rem; margin: .4rem 0 0; }
.founder-bio .big { font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.45; color: var(--ink); letter-spacing: -.01em; }
.founder-bio p { color: var(--ink-2); max-width: 60ch; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }
.principles li { background: rgba(7,10,14,.92); padding: 1.6rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; transition: background .3s; }
.principles li:hover { background: rgba(12,17,23,.95); }
.principles .n { font: 500 .72rem var(--f-mono); letter-spacing: .14em; color: var(--sun-2); }
.principles h3 { font-weight: 500; font-size: 1.12rem; }
.principles p { color: var(--ink-2); font-size: .93rem; }
@media (max-width: 1000px) { .founder { grid-template-columns: 1fr; } .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .principles { grid-template-columns: 1fr; } }

/* industries + resources cards */
.ind { display: flex; flex-direction: column; gap: .8rem; scroll-margin-top: 9rem; }
.ind-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ind-n { font: 500 .72rem var(--f-mono); color: var(--ink-3); letter-spacing: .1em; white-space: nowrap; }
.ind ul { flex: 1; }
.ind-start { margin: 0; padding-top: .8rem; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 1rem; font: 500 .74rem var(--f-mono); letter-spacing: .06em; color: var(--sun-2); }
.ind-start span { color: var(--ink-3); text-transform: uppercase; letter-spacing: .14em; }
.ind-other { margin-top: var(--s-6); display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; padding: clamp(1.4rem, 3vw, 2.2rem); }
.ind-other h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -.02em; margin-top: .4rem; max-width: 30ch; }
.art { position: relative; display: flex; flex-direction: column; gap: .8rem; }
.art h3 a.stretch { color: inherit; text-decoration: none; }
.art h3 a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.art:hover h3 { color: var(--glacier); }
.art .muted { flex: 1; }
.art.feat { padding: clamp(1.6rem, 4vw, 3rem); }
.art.feat h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -.03em; max-width: 24ch; }
.art.feat .muted { font-size: 1.05rem; max-width: 60ch; }

/* ===== v5 product demos (2026-10-19): demo studio, owner phone, monthly report, service samples ===== */
.studio { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.st-tabs { display: flex; flex-direction: column; gap: .5rem; }
.st-tabs button { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: var(--r); border: 1px solid var(--hair); background: rgba(255,255,255,.02); transition: border-color .25s, background .25s, transform .25s var(--ease); }
.st-tabs button span { font-weight: 500; color: var(--ink-2); }
.st-tabs button small { font: 500 .66rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.st-tabs button:hover { border-color: var(--hair-2); transform: translateX(3px); }
.st-tabs button[aria-selected="true"] { border-color: rgba(107,228,245,.45); background: linear-gradient(90deg, rgba(59,123,255,.16), rgba(107,228,245,.04)); box-shadow: 0 0 30px -14px rgba(107,228,245,.7); }
.st-tabs button[aria-selected="true"] span { color: var(--ink); }
.st-tabs button:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; }
.st-main { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--s-5); padding: var(--s-5); align-items: stretch; }
.st-console .console-body { height: 21rem; }
.st-biz { color: var(--ink-2); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-clock { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .8rem; align-items: center; padding: .8rem .9rem; border-top: 1px solid var(--hair); }
.st-meta div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; opacity: .35; transition: opacity .5s; }
.studio.done .st-meta div { opacity: 1; }
.st-meta span { font: 500 .62rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.st-meta b { font-weight: 500; font-size: .86rem; color: var(--ink); }
.st-replay { padding: .45rem .9rem; font-size: .82rem; }
.phone { position: relative; border-radius: 34px; padding: 2.2rem .9rem 1rem; background: linear-gradient(180deg, #0C1117, #070A0E); border: 1px solid var(--hair-2); box-shadow: inset 0 0 0 5px rgba(255,255,255,.025), 0 30px 60px -30px rgba(0,0,0,.9), 0 0 60px -30px rgba(59,123,255,.6); display: flex; flex-direction: column; gap: .7rem; min-height: 26rem; }
.ph-notch { position: absolute; top: .7rem; left: 50%; width: 5.5rem; height: 1.1rem; border-radius: 999px; background: #000; transform: translateX(-50%); }
.ph-top { display: flex; justify-content: space-between; gap: .5rem; font: 500 .66rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 0 .3rem .5rem; border-bottom: 1px solid var(--hair); }
.ph-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; }
.sms { align-self: flex-start; max-width: 92%; padding: .6rem .8rem; border-radius: 16px 16px 16px 4px; background: rgba(91,227,164,.12); border: 1px solid rgba(91,227,164,.32); color: var(--ink); font-size: .84rem; line-height: 1.45; }
.sms.in { animation: smsin .55s var(--ease) both; }
@keyframes smsin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.ph-from { text-align: center; font: 500 .62rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.phone-sm { min-height: 0; max-width: 20rem; margin-inline: auto; width: 100%; }
@media (max-width: 1060px) { .studio { grid-template-columns: 1fr; } .st-tabs { flex-direction: row; overflow-x: auto; padding-bottom: .3rem; } .st-tabs button { flex: 0 0 auto; } .st-tabs button:hover { transform: none; } }
@media (max-width: 860px) { .st-main { grid-template-columns: 1fr; padding: var(--s-4); } .phone { min-height: 0; } .st-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-console .console-body { height: 19rem; } }

.report-wrap { align-items: center; gap: var(--s-7); }
.report { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rp-head h3 { font-weight: 500; font-size: 1.25rem; margin-top: .4rem; }
.rp-stamp { font: 500 .66rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sun-2); border: 1px solid rgba(255,196,138,.4); border-radius: 6px; padding: .3rem .55rem; transform: rotate(-3deg); white-space: nowrap; }
.rp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.rp-kpis div { padding: .8rem .7rem; display: flex; flex-direction: column; gap: .2rem; border-left: 1px solid var(--hair); min-width: 0; }
.rp-kpis div:first-child { border-left: 0; }
.rp-kpis b { font-size: 1.35rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-kpis b.ok { color: var(--ok); }
.rp-kpis span { font-size: .72rem; color: var(--ink-3); line-height: 1.3; }
.rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.rp-card { border: 1px solid var(--hair); border-radius: var(--r); padding: .9rem 1rem; background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.rp-card.wide { grid-column: span 1; }
.rp-h { font: 500 .64rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.rp-bars { width: 100%; height: auto; }
.rp-bars rect { fill: var(--crater); opacity: .85; }
.rp-bars rect:nth-child(7n+1), .rp-bars rect:nth-child(7n+2) { fill: var(--glacier); }
.rp-axis { display: flex; justify-content: space-between; font-size: .62rem; color: var(--ink-3); }
.rp-min { display: flex; align-items: baseline; gap: .4rem; }
.rp-min b { font-size: 1.6rem; font-weight: 500; color: var(--ink); }
.rp-min span { font-size: .75rem; color: var(--ink-3); }
.rp-meter { position: relative; height: 10px; border-radius: 10px; background: rgba(255,255,255,.06); }
.rp-meter i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--crater), var(--glacier) 80%, var(--sun-2)); }
.rp-meter em { position: absolute; top: -4px; bottom: -4px; left: var(--at); width: 2px; background: var(--sun); box-shadow: 0 0 8px var(--sun); }
.rp-note { font-size: .78rem; }
.rp-r { display: grid; grid-template-columns: minmax(0, 1fr) 5rem 2.4rem; gap: .6rem; align-items: center; font-size: .8rem; color: var(--ink-2); }
.rp-r .mono { text-align: right; color: var(--ink); }
.rp-card .checks { font-size: .82rem; gap: .35rem; }
@media (max-width: 1000px) { .report-wrap { gap: var(--s-6); } }
@media (max-width: 640px) { .rp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rp-kpis div:nth-child(4) { border-left: 0; } .rp-kpis div:nth-child(n+4) { border-top: 1px solid var(--hair); } .rp-grid { grid-template-columns: 1fr; } }

.svc-side { gap: var(--s-4); }
.svc-demo { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.svc-demo .viz { display: flex; justify-content: center; align-items: center; min-height: 12rem; }
.svc-demo .viz.graph { max-width: 19rem; margin-inline: auto; width: 100%; }
.seq { width: 100%; display: flex; flex-direction: column; gap: .5rem; }
.seq-row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .65rem .8rem; border: 1px solid var(--hair); border-radius: 10px; background: rgba(255,255,255,.02); font-size: .86rem; }
.seq-row .mono { font-size: .7rem; color: var(--ink-3); }
.seq-row b { font-weight: 500; }
.seq-row.dim { opacity: .5; }
.pill { font: 500 .62rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--ink-3); white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: rgba(91,227,164,.4); }
.pill.sun { color: var(--sun-2); border-color: rgba(255,196,138,.45); }
@media (prefers-reduced-motion: reduce) { .sms.in { animation: none; } }
.ph-thread:empty::after { content: "Owner texts appear here when it finishes"; margin: auto; text-align: center; font: 500 .66rem/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); max-width: 12rem; animation: waitpulse 2.4s ease-in-out infinite; }
@keyframes waitpulse { 50% { opacity: .45; } }
@media (min-width: 1001px) { .report-wrap.grid-2 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.rp-r { grid-template-columns: minmax(0, 1fr) 4.5rem 2.4rem; }
.rp-head .tag { font: 500 .66rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ===== v6 custom projects (WO-601) ===== */
.capcloud { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; max-width: 34rem; margin-inline: auto; }
.cap { font: 500 .74rem var(--f-mono); letter-spacing: .04em; padding: .42rem .75rem; border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(255,255,255,.03); color: var(--ink-2); white-space: nowrap; transition: transform .3s var(--ease), border-color .3s, color .3s; }
.cap.c0 { border-color: rgba(59,123,255,.45); } .cap.c1 { border-color: rgba(107,228,245,.4); } .cap.c2 { border-color: rgba(255,196,138,.4); } .cap.c3 { border-color: rgba(91,227,164,.35); }
.cap:hover { transform: translateY(-2px); color: var(--ink); }
.custom-cell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "copy viz" "foot viz"; gap: var(--s-4) var(--s-6); align-items: center; }
.custom-cell .copy { grid-area: copy; display: flex; flex-direction: column; gap: .7rem; }
.custom-cell .viz { grid-area: viz; min-height: 0; margin: 0; }
.custom-cell .foot { grid-area: foot; }
@media (max-width: 860px) { .custom-cell { grid-template-columns: 1fr; grid-template-areas: "copy" "viz" "foot"; } }
.caps-band { border-top: 1px solid var(--hair); }
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }
.capcol { background: rgba(7,10,14,.92); padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .8rem; transition: background .3s; }
.capcol:hover { background: rgba(12,17,23,.95); }
.capcol h3 { font-weight: 500; font-size: 1.08rem; }
.capcol .checks { font-size: .86rem; gap: .4rem; color: var(--ink-2); }
@media (max-width: 1100px) { .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .caps { grid-template-columns: 1fr; } .cap { white-space: normal; } }
.cell.full.custom-cell .foot { display: flex; flex-direction: row; border-top: 1px solid var(--hair); padding-top: var(--s-3); justify-content: space-between; align-items: center; gap: 1rem; width: 100%; margin-top: 0; }

/* ===== v7 demo studio: system modes, sample note, structured owner texts ===== */
.studio { grid-template-columns: 15.5rem minmax(0, 1fr); grid-template-areas: "bar bar" "tabs main"; row-gap: var(--s-4); }
.st-bar { grid-area: bar; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.st-tabs { grid-area: tabs; } .st-main { grid-area: main; }
.st-modes { display: inline-flex; gap: .3rem; padding: .3rem; border: 1px solid var(--hair); border-radius: 999px; background: rgba(255,255,255,.02); flex-wrap: wrap; }
.st-mode { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; transition: background .25s, color .25s; color: var(--ink-2); }
.st-mode span { font-weight: 500; }
.st-mode small { font: 500 .62rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.st-mode:hover { color: var(--ink); }
.st-mode[aria-pressed="true"] { background: var(--ink); color: #05070A; }
.st-mode[aria-pressed="true"] small { color: #3A4552; }
.st-mode:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; }
.st-note { margin: 0; display: inline-flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--ink-3); max-width: 34rem; }
.st-meta { grid-template-columns: minmax(0, 1fr) auto; }
.st-mrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; min-width: 0; }
.st-mrow div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; opacity: .35; transition: opacity .5s; }
.studio.done .st-mrow div { opacity: 1; }
.st-meta > div:not(.st-mrow) { opacity: 1; }
.sms { display: flex; flex-direction: column; gap: .15rem; }
.sms b { font-weight: 600; font-size: .78rem; letter-spacing: .02em; color: var(--ok); margin-bottom: .15rem; }
.sms span { font-size: .84rem; color: var(--ink); }
.sms span + span { color: var(--ink-2); }
@media (max-width: 1060px) { .studio { grid-template-columns: 1fr; grid-template-areas: "bar" "tabs" "main"; } }
@media (max-width: 860px) { .st-mrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .st-meta { grid-template-columns: 1fr; } .st-mode small { display: none; } }
.st-meta > .st-mrow { display: grid; flex-direction: initial; opacity: 1; }
.st-tabs button[hidden] { display: none; }
.st-note { max-width: 44rem; }
/* city labels: dark outline so names read against the contour lines */
.beacon { text-shadow: 0 0 calc(var(--hl) * 14px) rgba(255, 170, 120, calc(var(--hl) * .95)), 0 1px 2px #05070A, 0 0 6px #05070A, 0 0 10px rgba(5,7,10,.9); }
.beacon.far { color: #C9D2DC; }
.beacon.far::after { width: 5px; height: 5px; background: #FFD9A8; box-shadow: 0 0 8px rgba(255,196,138,.8); }
.beacon.far i { background: linear-gradient(180deg, transparent, rgba(255,217,168,.55)); }
/* map zoom controls (desktop) */
.map-zoom { position: absolute; right: max(20px, calc((100vw - var(--wrap)) / 2 + 20px)); bottom: 4.6rem; display: flex; align-items: center; gap: .35rem; z-index: 2; }
.map-zoom button { all: unset; cursor: pointer; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--hair-2); background: rgba(5,7,10,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink-2); font: 500 1rem var(--f-mono); transition: color .2s, border-color .2s; }
.map-zoom button:hover { color: var(--ink); border-color: rgba(107,228,245,.5); }
.map-zoom button:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; }
.map-zoom span { font: 500 .62rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-left: .4rem; }
@media (max-width: 900px) { .map-zoom { display: none; } }
/* wide screens: map fades out just past the content column; tools strip sits inside the column */
@media (min-width: 1000px) {
  .h-hero #terrain { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% + 40rem), transparent calc(50% + 52rem)); mask-image: linear-gradient(90deg, #000 0, #000 calc(50% + 40rem), transparent calc(50% + 52rem)); }
}
.marquee-label, .marquee-mask { max-width: var(--wrap); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.marquee-label { text-align: left; }
.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* systems rail now sits below the tools strip, in normal page flow */
.marquee + .sys-rail { position: static; border-top: 0; border-bottom: 1px solid var(--hair); background: rgba(5,7,10,.4); backdrop-filter: none; -webkit-backdrop-filter: none; }
.h-hero { padding-block: 6rem 6rem; }
.map-zoom { bottom: 1.6rem; }
/* spacing: gap between the tools strip and the systems rail; rail sits close to the platform section */
.marquee + .sys-rail { margin-top: 2.5rem; border-top: 1px solid var(--hair); }
.marquee + .sys-rail + section { padding-top: 3rem; }
/* bar lines stop at the content column instead of running edge to edge */
.marquee { max-width: var(--wrap); margin-inline: auto; background: none; border-block: 1px solid var(--hair); }
.marquee + .sys-rail { border: 0; background: none; }
.marquee + .sys-rail .wrap { border-block: 1px solid var(--hair); }

/* v9: services work-order bar fits on desktop, scrolls with a fade on phones */
@media (min-width: 1180px) { .wo-nav .wrap { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: .45rem; } .wo-nav a { padding: .45rem .75rem; font-size: .84rem; } }
@media (max-width: 1179px) { .wo-nav .wrap { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 2rem; } }
/* v10: glass tool chips + centered systems board */
.marquee + .sys-rail .wrap { justify-content: center; flex-wrap: wrap; gap: .55rem; padding-block: 1.1rem; overflow: visible; -webkit-mask-image: none; mask-image: none; white-space: nowrap; }
.sys-rail .sys-h, .sys-rail .sys { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 999px; border: 1px solid var(--hair); background: rgba(255,255,255,.03); }
.sys-rail .sys-h { border-right: 1px solid rgba(80,227,164,.35); padding-right: .8rem; color: var(--ink); background: rgba(80,227,164,.08); border-color: rgba(80,227,164,.35); }
.sys-rail .sys-h i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.marquee + .sys-rail { margin-top: 0; }
.marquee + .sys-rail .wrap { border-top: 0; padding-block: 1.2rem 1.4rem; row-gap: .6rem; }
.sys-rail .sys-h { flex-basis: 100%; justify-content: center; background: none; border: 0; padding: 0 0 .2rem; font-size: .64rem; color: #8FE8BF; }
.sys-rail .sys { padding: .45rem .75rem; }
@media (max-width: 700px) { .marquee + .sys-rail .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sys-rail .sys-h { grid-column: 1 / -1; } .sys-rail .sys { justify-content: center; font-size: .6rem; } }
@media (max-width: 700px) { .sys-rail .sys { letter-spacing: .05em; padding-inline: .5rem; } }