/* TideMerge — the Confluence, second pass.

   COLOUR comes from the brand, not a gradient pack:
     #0050FF  TideMerge Blue — the wordmark. The one colour we flood the screen with, twice.
     #09111F  Surge navy     — the business card front. Where the machinery lives.
     #00E0FF  Surge          — the card's wave. Light only: packets, live states, the rim.
     #EDEBE4  paper          — the site's warm paper. Where people read.
   State colours only ever mean state: mint = done, amber = needs a person, vermilion = missed.

   The page travels:  paper → BLUE (inside the system) → paper (live demo)
                      → navy (the systems) → paper (proof) → navy (the build) → BLUE (yours).

   MOTION tokens — every movement is one of these:
     --t-micro  .16s  hover, press
     --t-ui     .32s  state changes
     --t-reveal .9s   headings wipe, rules draw
     --t-scene  1.4s  anything that moves through space                                  */

:root {
  /* one ground for the whole page. Depth comes from the 3D and from space, not from
     changing the background. Blue is the brand, lifted a step so it reads on the dark. */
  --paper: #07090E;
  --paper-hi: #0D1119;
  --ink: #ECEEF3;
  --ink-2: #A6ACB9;
  --ink-3: #6C7280;
  --hair: rgba(236, 238, 243, .1);
  --blue: #3A74FF;
  --blue-deep: #0050FF;
  --navy: #07090E;
  --navy-2: #0D1119;
  --navy-hair: rgba(236, 238, 243, .1);
  --on-navy: #ECEEF3;
  --on-navy-2: #8A909E;
  --surge: #7FB0FF;
  --done: #19C37D;
  --wait: #F2B544;
  --miss: #FF4A2B;

  --serif: 'Geist', system-ui, sans-serif;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --edge: clamp(20px, 3.6vw, 72px);
  --t-micro: .2s; --t-ui: .4s; --t-reveal: 1.3s; --t-scene: 1.6s;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.65, 0, .25, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font: 400 16.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
::selection { background: var(--blue); color: #fff; }

/* type — four voices, used deliberately, not in the same order every time */
.display { font: 300 clamp(3rem, 1.2rem + 6vw, 7.6rem)/.94 var(--serif); letter-spacing: -.035em; }
.statement { font: 300 clamp(2rem, 1.1rem + 3vw, 3.9rem)/1.02 var(--serif); letter-spacing: -.025em; }
.plain { font: 500 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.2 var(--sans); letter-spacing: -.02em; }
.micro { font: 500 10.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
em { font-style: italic; }
.dim { color: var(--ink-3); }

/* folios replace eyebrows: a section number in the margin, like a printed book */
.folio { position: absolute; left: var(--edge); top: clamp(88px, 11vh, 120px); display: flex; gap: 14px; align-items: baseline; }
.folio b { font: 400 13px/1 var(--mono); }
.folio span { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }

/* buttons: one real one. Everything else is a text link with a line under it. */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 17px 26px 17px 24px; font: 600 15px/1 var(--sans);
  text-decoration: none; background: var(--ink); color: var(--paper); border-radius: 2px; transition: background var(--t-micro), gap var(--t-ui) var(--ease); }
.btn::after { content: "→"; transition: transform var(--t-ui) var(--ease); }
.btn:hover { background: var(--blue); }
.btn:hover::after { transform: translateX(4px); }
.link { font: 500 15px/1 var(--sans); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 5px; transition: background-size var(--t-ui) var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ── nav: the wordmark, a few words, and the tide line ── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 20px var(--edge); color: var(--ink); transition: color var(--t-ui); }
.wordmark { font: 700 21px/1 var(--sans); letter-spacing: -.035em; text-decoration: none; }
.wordmark b { color: var(--blue); font-weight: 700; transition: color var(--t-ui); }
.nav-mode { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .5; }
.nav nav { margin-left: auto; display: flex; gap: 30px; align-items: center; }
.nav nav a { font: 500 13.5px/1 var(--sans); text-decoration: none; opacity: .7; transition: opacity var(--t-micro); }
.nav nav a:hover { opacity: 1; }
.nav .nav-cta { opacity: 1; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; }
.tideline { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--blue); transition: background var(--t-ui); }
body[data-bg="blue"] .nav, body[data-bg="navy"] .nav { color: #fff; }
body[data-bg="blue"] .wordmark b { color: var(--surge); }
body[data-bg="blue"] .tideline { background: var(--surge); }
body[data-bg="navy"] .tideline { background: var(--surge); }

/* ── the confluence ── */
.confluence { height: 440vh; position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#flow, .flow-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-fallback { display: none; }
.no-webgl .flow-fallback { display: block; }
.labels { position: absolute; inset: 0; pointer-events: none; }
.lab { position: absolute; transform: translate(0, -50%); padding: 4px 0 4px 16px; font: 500 13px/1 var(--sans); white-space: nowrap;
  pointer-events: auto; cursor: pointer; color: var(--ink); transition: color var(--t-micro), opacity .5s, transform var(--t-scene) var(--ease); }
.lab::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: currentColor; transition: width var(--t-ui) var(--ease); }
.lab { text-shadow: 0 0 8px var(--paper), 0 0 3px var(--paper), 0 0 1px var(--paper); }
.lab small { font: 400 11px/1 var(--mono); color: var(--ink-3); margin-left: 8px; transition: color var(--t-micro); }
.lab:hover, .lab.on { color: var(--blue); }
.lab:hover::before, .lab.on::before { width: 12px; }
.lab.on small { color: var(--blue); }
.lab.dest { cursor: default; padding-left: 0; padding-right: 16px; transform: translate(-100%, -50%); font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.lab.dest::before { left: auto; right: 0; }
.labels.picking .lab:not(.on):not(.dest) { opacity: .25; }
.labels.faded .lab { opacity: 0; pointer-events: none; }

.hero-copy { position: absolute; left: var(--edge); bottom: clamp(40px, 9vh, 110px); z-index: 3; transition: opacity .6s, transform var(--t-scene) var(--ease); pointer-events: none; }
.hero-copy h1 { max-width: 11ch; }
.hero-copy h1 em { color: var(--blue); }
.hero-copy .lede { margin-top: 26px; max-width: 30ch; color: var(--ink-2); font-size: 17px; }
.hero-copy .row { display: flex; gap: 28px; align-items: center; margin-top: 30px; pointer-events: auto; }
.hero-copy.gone { opacity: 0; transform: translateY(-3vh); }
.hero-tag { position: absolute; right: var(--edge); top: 50%; transform: translateY(-50%); z-index: 2; writing-mode: vertical-rl; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

.inspect { position: absolute; left: var(--edge); bottom: clamp(40px, 9vh, 110px); width: min(420px, calc(100vw - 36px)); z-index: 6; }
.inspect h2 { font: 300 2.2rem/1.02 var(--serif); letter-spacing: -.02em; margin: 10px 0 22px; }
.inspect .micro { color: var(--blue); }
.inspect-x { position: absolute; right: 0; top: -6px; font: 400 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 8px 0; }
.inspect-x:hover { color: var(--ink); }
.trace { list-style: none; border-left: 1px solid var(--hair); }
.trace li { display: grid; grid-template-columns: 94px 1fr; gap: 14px; padding: 10px 0 10px 18px; position: relative; clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease); }
.trace li::before { content: ""; position: absolute; left: -4px; top: 17px; width: 7px; height: 7px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-3); border-radius: 50%; transition: all var(--t-ui); }
.trace li.on { clip-path: inset(0 0 0 0); }
.trace li.on::before { background: var(--blue); box-shadow: none; }
.trace li:last-child.on::before { background: var(--done); }
.trace span { font: 500 10.5px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.trace p { font-size: 15px; line-height: 1.45; }

.stream-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.stream-list:focus-within { width: auto; height: auto; clip: auto; left: var(--edge); top: 90px; display: flex; flex-wrap: wrap; gap: 14px; list-style: none; z-index: 7; }
.stream-list button { font-size: 13px; text-decoration: underline; }

.beats { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.beat { position: absolute; opacity: 0; transition: opacity .8s, transform var(--t-scene) var(--ease); }
.beat.on { opacity: 1; transform: none !important; }
.beat[data-beat="1"] { left: var(--edge); top: 18vh; transform: translateY(2vh); width: min(560px, 40vw); }
.beat[data-beat="1"] .micro { color: var(--miss); margin-bottom: 18px; }
.beat[data-beat="2"] { right: var(--edge); bottom: 12vh; transform: translateY(2vh); width: min(820px, 58vw); text-align: right; }
.beat[data-beat="2"] p { font: italic 300 clamp(2.2rem, 1.2rem + 3.2vw, 4.4rem)/1 var(--serif); letter-spacing: -.03em; }
.beat[data-beat="2"] footer { margin-top: 22px; }
.beat[data-beat="3"] { left: var(--edge); bottom: 14vh; transform: translateY(2vh); width: min(640px, 46vw); }
.beat[data-beat="3"] em { color: var(--blue); }
.story-rail { position: absolute; left: var(--edge); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; z-index: 3; opacity: 0; transition: opacity .6s; }
.story-rail.on { opacity: 1; }
.story-rail span { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 10px; transition: color var(--t-ui); }
.story-rail span::before { content: ""; width: 6px; height: 1px; background: currentColor; transition: width var(--t-ui) var(--ease); }
.story-rail span.on { color: var(--ink); }
.story-rail span.on::before { width: 22px; }
.story-rail span.on[data-s="2"] { color: var(--miss); }
.story-rail span.on[data-s="3"] { color: var(--blue); }
.hint { position: absolute; right: var(--edge); bottom: clamp(40px, 9vh, 110px); font: 500 10.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-align: right; transition: opacity .5s; max-width: 16ch; }

/* the dive: the merge point opens and the page falls into TideMerge Blue */
.dive { position: fixed; inset: 0; z-index: 40; background: var(--blue); pointer-events: none; clip-path: circle(0px at var(--dx, 60%) var(--dy, 50%)); visibility: hidden; }

/* ── generic section frame: no containers, just edges ── */
.sec { position: relative; padding: clamp(110px, 16vh, 190px) var(--edge); }
.sec.blue { background: var(--blue); color: #fff; }
.sec.navy { background: var(--navy); color: var(--on-navy); }
.sec.navy .dim { color: var(--on-navy-2); }
.sec.blue .dim { color: rgba(255,255,255,.62); }

/* headings wipe in like a line being set; rules draw; nothing else fades up */
.wipe { clip-path: inset(0 100% 0 0); transition: clip-path var(--t-reveal) var(--ease-io); }
.wipe { padding-right: .12em; }
.wipe.in { clip-path: inset(0 0 0 0); }
.draw { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease-io); }
.draw.in { transform: scaleX(1); }

/* ── 02 · inside the system (blue) ── */
.loop { position: relative; z-index: 41; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); grid-template-rows: auto 1fr auto; gap: 0 5vw; padding-top: clamp(120px, 18vh, 200px); }
.loop .lede-col { grid-column: 1; grid-row: 1 / 3; align-self: start; }
.loop h2 { max-width: 11ch; }
.loop .lede-col p { margin-top: 24px; max-width: 26ch; color: rgba(255,255,255,.78); }
.loop-world { grid-column: 2; grid-row: 1 / 3; position: relative; min-height: 56vh; }
#loopSvg { width: 100%; height: 100%; overflow: visible; }
.loop-caption { position: absolute; right: 0; top: 0; max-width: 30ch; text-align: right; font-size: 15px; color: rgba(255,255,255,.86); }
.loop-caption .micro { display: block; margin-bottom: 8px; color: var(--surge); }
.loop-tabs { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 6vh; border-top: 1px solid rgba(255,255,255,.28); }
.loop-tabs button { text-align: left; padding: 18px 16px 0 0; position: relative; color: rgba(255,255,255,.55); transition: color var(--t-ui); }
.loop-tabs button::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--surge); transition: width .5s var(--ease); }
.loop-tabs button b { display: block; font: 400 clamp(1.3rem, 1rem + .9vw, 2rem)/1 var(--serif); letter-spacing: -.02em; }
.loop-tabs button small { display: block; font: 500 10px/1 var(--mono); letter-spacing: .14em; margin-bottom: 12px; }
.loop-tabs button span { display: block; font-size: 13px; margin-top: 8px; opacity: 0; transition: opacity var(--t-ui); }
.loop-tabs button[aria-selected="true"] { color: #fff; }
.loop-tabs button[aria-selected="true"]::before { width: 100%; }
.loop-tabs button[aria-selected="true"] span { opacity: .75; }
.loop-tabs button:hover { color: #fff; }

/* ── 03 · the call (paper, bright live states) ── */
.call { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 6vw; align-items: start; }
.call .head { grid-column: 1 / -1; margin-bottom: 8vh; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.call .head h2 { max-width: 19ch; }
.call .head p { max-width: 30ch; color: var(--ink-2); }
.phone { position: relative; max-width: 410px; width: 100%; justify-self: end; background: var(--navy); color: var(--on-navy); border-radius: 38px; padding: 26px 22px 22px; display: grid; gap: 18px; min-height: 600px; grid-template-rows: auto auto 1fr auto; margin-right: -3vw; z-index: 2; }
.phone-top { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-2); padding: 0 6px; }
.phone.live .phone-top span:last-child { color: var(--surge); }
.waves { display: flex; gap: 3px; height: 46px; align-items: center; justify-content: center; }
.waves i { width: 3px; height: 4px; border-radius: 2px; background: #25324D; transition: height .1s, background var(--t-ui); }
.phone.live .waves i { background: var(--surge); }
.transcript { list-style: none; overflow: auto; display: flex; flex-direction: column; gap: 9px; padding: 0 4px; max-height: 380px; scroll-behavior: smooth; }
.transcript li { max-width: 84%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; animation: bubble var(--t-ui) var(--ease); }
@keyframes bubble { from { transform: scale(.94); opacity: 0; } }
.transcript li.sp-caller { background: #172238; align-self: flex-start; border-bottom-left-radius: 4px; transform-origin: 0 100%; }
.transcript li.sp-agent { background: var(--blue); align-self: flex-end; border-bottom-right-radius: 4px; transform-origin: 100% 100%; }
.call-btn { justify-self: stretch; justify-content: center; background: var(--paper) !important; color: var(--ink) !important; border-radius: 999px; }
.call-btn::after { content: none; }
.phone.live .call-btn { background: var(--miss) !important; color: #fff !important; }
/* the docket: no card, no shadow — a printed slip on the paper */
.ticket { padding-top: 6px; }
.ticket .micro { color: var(--ink-3); display: flex; justify-content: space-between; }
.ticket dl { display: grid; grid-template-columns: 120px 1fr; margin-top: 18px; border-top: 2px solid var(--ink); }
.ticket dt, .ticket dd { padding: 15px 0; border-bottom: 1px solid var(--hair); }
.ticket dt { font: 500 10.5px/1.8 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ticket dd { font: 400 19px/1.3 var(--serif); color: var(--hair); transition: color var(--t-ui); }
.ticket dd.set { color: var(--ink); animation: stamp .6s var(--ease); }
.ticket dd.flag { color: #B86E00; font-style: italic; }
.ticket dd.done { color: var(--done); font: 600 19px/1.3 var(--sans); }
@keyframes stamp { 0% { background: rgba(0,80,255,.12); clip-path: inset(0 100% 0 0); } 60% { clip-path: inset(0 0 0 0); } 100% { background: transparent; } }
.ticket-note { margin-top: 18px; font: 400 11.5px/1.6 var(--mono); color: var(--ink-3); max-width: 60ch; }
.square { grid-column: 1 / -1; margin-top: 16vh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 5vw; align-items: start; }
.square h3 { font: 300 clamp(1.7rem, 1.1rem + 1.6vw, 2.6rem)/1.05 var(--serif); letter-spacing: -.02em; max-width: 13ch; }
.square .dim { margin-top: 16px; max-width: 34ch; font-size: 15px; }
.sq-flow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: q; }
.sq-flow li { position: relative; padding: 30px 26px 0 0; counter-increment: q; }
.sq-flow li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hair); }
.sq-flow li::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--blue); transition: width .6s var(--ease); }
.sq-flow li.on::after { width: 100%; }
.sq-flow li:last-child.on::after { background: var(--done); }
.sq-flow li b { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 14px; }
.sq-flow li b::before { content: "0" counter(q) "  "; color: var(--ink-3); }
.sq-flow li p { font-size: 14.5px; color: var(--ink-2); }

/* ── 04 · the systems (navy, a place) ── */
.systems { padding: 0; }
.sys-stage { position: relative; height: 100vh; min-height: 720px; overflow: hidden; }
#universe { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
#universe:active { cursor: grabbing; }
.u-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.u-lab { position: absolute; left: 0; top: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-2); white-space: nowrap; transition: color var(--t-ui); }
.u-lab.on { color: #fff; }
.u-lab.rel { color: var(--surge); }
.sys-head { position: absolute; left: var(--edge); top: clamp(110px, 15vh, 170px); z-index: 2; pointer-events: none; }
.sys-head h2 { max-width: 11ch; }
.sys-head p { margin-top: 20px; max-width: 24ch; }
.sys-list { position: absolute; left: var(--edge); bottom: 7vh; z-index: 3; display: grid; grid-template-columns: repeat(2, auto); gap: 2px 26px; }
.sys-list .grp { grid-column: 1 / -1; margin: 14px 0 6px; color: var(--on-navy-2); }
.sys-list .grp:first-child { margin-top: 0; }
.sys-list button { text-align: left; padding: 5px 0; font: 400 14px/1.2 var(--sans); color: var(--on-navy-2); transition: color var(--t-micro); }
.sys-list button:hover, .sys-list button[aria-selected="true"] { color: #fff; }
.sys-list button[aria-selected="true"]::before { content: "— "; color: var(--surge); }
.sys-panel { position: absolute; right: var(--edge); top: 50%; transform: translateY(-40%); width: min(380px, 30vw); z-index: 3; }
.sys-panel .kind { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--surge); }
.sys-panel h3 { font: 300 clamp(2.6rem, 1.6rem + 2.6vw, 4.4rem)/.95 var(--serif); letter-spacing: -.035em; margin: 14px 0 20px; }
.sys-panel .what { font-size: 15px; color: var(--on-navy); }
.sys-panel .prob { font: italic 300 19px/1.3 var(--serif); color: var(--on-navy-2); margin: 20px 0 24px; }
.io { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; border-top: 1px solid var(--navy-hair); }
.io div { padding: 12px 0; border-bottom: 1px solid var(--navy-hair); }
.io span { display: block; font: 500 9.5px/1.8 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-2); }
.io p { font-size: 13.5px; }
.sys-panel .link { display: inline-block; margin-top: 24px; color: #fff; }
.sys-swap { animation: swap .55s var(--ease); }
@keyframes swap { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ── 05 · the agents (still navy — the systems world continues into the company) ── */
.agents { padding-top: 6vh; }
.agents .intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 5vw; align-items: end; }
.agents h2 { max-width: 16ch; }
.agents .intro p { max-width: 34ch; }
.chain { display: flex; margin-top: 12vh; position: relative; overflow-x: auto; }
.chain::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--navy-hair); }
.agent { flex: 1 0 140px; position: relative; padding: 34px 18px 0 0; }
.agent .node { position: absolute; top: 3px; left: 0; width: 9px; height: 9px; background: var(--navy); box-shadow: inset 0 0 0 1.5px var(--on-navy-2); transition: all var(--t-ui); }
.agent.lit .node { background: var(--surge); box-shadow: none; }
.agent.gate.lit .node { background: var(--wait); transform: rotate(45deg); }
.agent.human .node { border-radius: 50%; }
.agent.human.lit .node { background: var(--done); }
.agent .wire { position: absolute; top: 7px; left: 9px; right: 0; height: 1px; overflow: hidden; }
.agent .wire i { position: absolute; top: 0; left: -30%; width: 30%; height: 1px; background: var(--surge); opacity: 0; }
.agent.pass .wire i { animation: packet .9s var(--ease) forwards; }
@keyframes packet { 0% { left: -30%; opacity: 1; } 100% { left: 100%; opacity: 1; } }
.agent:last-child .wire { display: none; }
.agent small { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--on-navy-2); }
.agent h4 { font: 500 15px/1.25 var(--sans); margin: 10px 0 8px; color: #fff; }
.agent p { font-size: 13px; color: var(--on-navy-2); line-height: 1.45; max-width: 20ch; }

/* ── 06 · proof (paper, and the only red on the page) ── */
.field { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 4vw; overflow: hidden; }
.field .big6 { grid-column: 1; grid-row: 1 / 3; font: 300 clamp(18rem, 8rem + 34vw, 46rem)/.72 var(--serif); letter-spacing: -.06em; color: var(--miss); margin-left: -1.5vw; margin-top: 4vh; font-feature-settings: "lnum"; }
.field .big6 small { font-size: .18em; letter-spacing: -.02em; color: var(--ink); vertical-align: top; margin-left: .2em; font-style: italic; }
.field .side { grid-column: 2; grid-row: 1; align-self: start; padding-top: 2vh; }
.field .side h2 { max-width: 14ch; }
.field .side p.lead { margin-top: 22px; max-width: 32ch; color: var(--ink-2); }
.dial { grid-column: 2; grid-row: 2; width: min(300px, 70%); margin-top: 5vh; }
.dial svg { width: 100%; overflow: visible; }
.field-list { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(10, 1fr); margin-top: 10vh; border-top: 2px solid var(--ink); }
.field-list li { padding: 14px 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); border-right: 1px solid var(--hair); padding-left: 10px; }
.field-list li:first-child { padding-left: 0; }
.field-list li b { display: block; font: 500 9.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.field-list li.rang b { color: var(--miss); }
.source { font: 400 11.5px/1.6 var(--mono); color: var(--ink-3); margin-top: 22px; }
.field .source { grid-column: 1 / -1; }

/* ── 07 · where it lands: one manifold, not four cards ── */
.manifold { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 5vw; align-items: center; }
.manifold h2 { max-width: 12ch; }
.manifold .dim { margin-top: 20px; max-width: 28ch; }
.mf { position: relative; }
.mf svg { width: 100%; overflow: visible; }
.mf-row { cursor: default; }
.mf-row text { transition: fill var(--t-ui); }

/* ── before / after ── */
.ba h2 { max-width: 12ch; }
.ba .head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 7vh; }
.ba-frame { position: relative; min-height: 460px; user-select: none; margin: 0 calc(var(--edge) * -1); }
.ba-side { position: absolute; inset: 0; padding: 44px var(--edge); }
.ba-side ol { list-style: none; max-width: 1100px; }
.ba-side li { display: grid; grid-template-columns: 90px 1fr auto; gap: 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--hair); font: 400 19px/1.3 var(--serif); }
.ba-side li time { font: 400 12px/1 var(--mono); color: var(--ink-3); }
.ba-side li em { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; font-style: normal; }
.before { background: var(--paper-hi); }
.before li em { color: var(--miss); }
.after { background: var(--navy); color: var(--on-navy); clip-path: inset(0 0 0 50%); }
.after li { border-color: var(--navy-hair); }
.after li time { color: var(--on-navy-2); }
.after li em { color: var(--surge); }
.after li em.done { color: var(--done); }
.ba-frame input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 3; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--blue); z-index: 2; pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); padding: 10px 12px; background: var(--blue); color: #fff; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; white-space: nowrap; }

/* ── 08 · the build (navy): the flow line becomes a timeline ── */
.build h2 { max-width: 17ch; }
.build h2 em { color: var(--surge); }
.build-line { list-style: none; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr; margin-top: 12vh; position: relative; }
.build-line::before { content: ""; position: absolute; left: 0; right: calc(var(--edge) * -1); top: 5px; height: 1px; background: var(--navy-hair); }
.build-line::after { content: ""; position: absolute; left: 0; top: 4px; height: 3px; width: var(--p, 0%); background: var(--surge); transition: width 1.6s var(--ease-io); }
.build-line li { padding: 38px 30px 0 0; position: relative; }
.build-line li::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; background: var(--navy); box-shadow: inset 0 0 0 1.5px var(--on-navy-2); transition: all .5s; z-index: 1; }
.build-line li.on::before { background: var(--surge); box-shadow: none; }
.build-line li:last-child.on::before { background: var(--done); }
.build-line small { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--surge); }
.build-line b { font: 300 clamp(1.8rem, 1.2rem + 1.4vw, 2.8rem)/1 var(--serif); display: block; margin: 12px 0 14px; letter-spacing: -.02em; }
.build-line p { color: var(--on-navy-2); font-size: 14.5px; max-width: 26ch; }
.honest { margin: 16vh 0 0 auto; max-width: 22ch; font: 300 clamp(1.5rem, 1rem + 1.4vw, 2.3rem)/1.18 var(--serif); letter-spacing: -.015em; }
.honest b { font-weight: 400; font-style: italic; color: var(--surge); }

/* ── 09 · fit: a sentence you finish ── */
.fit .sentence { font: 300 clamp(2rem, 1.1rem + 3vw, 4.2rem)/1.22 var(--serif); letter-spacing: -.025em; max-width: 20ch; }
.pick { position: relative; display: inline-block; }
.pick > button { font: inherit; color: var(--blue); font-style: italic; background: linear-gradient(var(--blue), var(--blue)) 0 92% / 100% 2px no-repeat; padding: 0 .1em; }
.pick > button::after { content: "↓"; font: 400 .34em/1 var(--mono); vertical-align: super; margin-left: .2em; }
.menu { position: absolute; left: 0; top: 100%; z-index: 5; background: var(--ink); color: var(--paper); padding: 10px 0; min-width: 240px; font: 400 15px/1 var(--sans); letter-spacing: 0; display: none; }
.pick.open .menu { display: block; animation: swap .3s var(--ease); }
.menu button { display: block; width: 100%; text-align: left; padding: 10px 18px; color: var(--paper); font-style: normal; }
.menu button:hover, .menu button[aria-checked="true"] { color: var(--surge); }
.fit-out { margin-top: 9vh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5vw; align-items: end; border-top: 2px solid var(--ink); padding-top: 26px; min-height: 180px; }
.fit-out .micro { color: var(--ink-3); }
.fit-out h3 { font: 300 clamp(2.4rem, 1.4rem + 2.8vw, 4.4rem)/.95 var(--serif); letter-spacing: -.03em; margin: 12px 0 16px; }
.fit-out p { color: var(--ink-2); max-width: 44ch; }
.fit-out .go { justify-self: end; text-align: right; }
.fit-out .go p { font: 400 12px/1.6 var(--mono); color: var(--ink-3); margin-top: 14px; }

/* ── finale: blue, and everything gathers ── */
.finale { position: relative; height: 100vh; height: 100svh; min-height: 620px; background: var(--blue); color: #fff; overflow: hidden; }
#finaleFlow { position: absolute; inset: 0; width: 100%; height: 100%; }
.finale-copy { position: absolute; left: var(--edge); top: 20vh; z-index: 2; }
.finale-copy h2 { max-width: 7ch; }
.finale-copy p { margin-top: 22px; color: rgba(255,255,255,.8); max-width: 26ch; }
.finale .cta { position: absolute; left: 50%; top: 61%; transform: translate(-50%, -50%); z-index: 2; }
.finale .btn { background: #fff; color: var(--blue); padding: 20px 30px 20px 28px; font-size: 16px; white-space: nowrap; }
.finale .btn:hover { background: var(--ink); color: #fff; }

.foot { background: var(--paper); padding: 30px var(--edge) 34px; display: flex; gap: 34px; align-items: baseline; flex-wrap: wrap; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot nav a { font-size: 13px; text-decoration: none; color: var(--ink-2); }
.foot nav a:hover { color: var(--ink); }
.foot .micro { margin-left: auto; color: var(--ink-3); }

/* ── large screens use the space ── */
@media (min-width: 1800px) {
  body { font-size: 17.5px; }
  .sys-panel { width: 440px; }
}

/* ── mobile: the same story, re-set for a thumb ── */
@media (max-width: 900px) {
  .nav nav a:not(.nav-cta), .nav-mode { display: none; }
  .confluence { height: 380vh; }
  .hero-tag { display: none; }
  .hero-copy { bottom: 6vh; right: var(--edge); }
  .hero-copy h1 { max-width: none; }
  .inspect { bottom: 5vh; left: var(--edge); right: var(--edge); width: auto; }
  .beat[data-beat="1"] { top: auto; bottom: 14vh; width: auto; right: var(--edge); }
  .beat[data-beat="2"] { left: var(--edge); text-align: left; width: auto; }
  .beat[data-beat="3"] { width: auto; right: var(--edge); }
  .story-rail { top: auto; bottom: 4vh; transform: none; grid-auto-flow: column; }
  .hint { display: none; }
  .lab { font-size: 12px; }
  .lab small { display: none; }
  .loop { grid-template-columns: 1fr; grid-template-rows: auto; }
  .loop .lede-col, .loop-world, .loop-tabs { grid-column: 1; grid-row: auto; }
  .loop-world { min-height: 340px; margin-top: 30px; }
  .loop-caption { position: relative; text-align: left; margin-bottom: 14px; }
  .loop-tabs { grid-template-columns: repeat(6, 44vw); overflow-x: auto; scroll-snap-type: x mandatory; }
  .loop-tabs button { scroll-snap-align: start; }
  .call { grid-template-columns: 1fr; }
  .call .head { flex-direction: column; align-items: start; }
  .phone { margin-right: 0; min-height: 520px; }
  .ticket { margin-top: 40px; }
  .square { grid-template-columns: 1fr; }
  .sq-flow { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .sys-stage { height: auto; min-height: 0; padding-bottom: 50px; display: flex; flex-direction: column; }
  .sys-head { position: relative; left: auto; top: auto; padding: 110px var(--edge) 0; order: -2; }
  #universe { position: relative; height: 52vh; order: -1; }
  .u-labels { display: none; }
  .sys-list { position: relative; left: auto; bottom: auto; padding: 0 var(--edge); margin-top: 10px; }
  .sys-panel { position: relative; right: auto; top: auto; transform: none; width: auto; margin: 34px var(--edge) 0; }
  .agents .intro { grid-template-columns: 1fr; }
  .chain { scroll-snap-type: x mandatory; }
  .agent { flex-basis: 62vw; scroll-snap-align: start; }
  .field { grid-template-columns: 1fr; }
  .field .big6 { grid-row: auto; font-size: 62vw; margin-top: 0; }
  .field .side, .dial { grid-column: 1; grid-row: auto; }
  .field-list { grid-template-columns: 1fr 1fr; }
  .field-list li { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--hair); padding-bottom: 12px; }
  .manifold { grid-template-columns: 1fr; }
  .ba .head { flex-direction: column; align-items: start; }
  .ba-side li { grid-template-columns: 56px 1fr; font-size: 16px; }
  .ba-side li em { grid-column: 2; }
  .ba-frame { min-height: 620px; }
  .build-line { grid-template-columns: 1fr; gap: 36px; }
  .build-line::before, .build-line::after { display: none; }
  .fit-out { grid-template-columns: 1fr; }
  .fit-out .go { justify-self: start; text-align: left; }
  .finale-copy { top: 14vh; }
  .finale .cta { top: 66%; }
  .foot .micro { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .wipe, .draw { clip-path: none; transform: none; }
  .dive { display: none; }
}


/* ═══ studio pass — one continuous dark page ═══════════════════════════════════════
   Everything above still lays the page out; this block sets the voice. Type is one
   family (Geist) with a two-tone headline instead of italics. Headings rise out of
   a mask. Sections no longer change colour: they are separated by space. */
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
body { background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); letter-spacing: -.005em; }
em { font-style: normal; color: var(--ink-3); }
.display { font: 500 clamp(2.7rem, 1rem + 4.4vw, 5.4rem)/.98 var(--sans); letter-spacing: -.045em; }
.statement { font: 500 clamp(1.9rem, 1rem + 2.4vw, 3.3rem)/1.04 var(--sans); letter-spacing: -.038em; }
.micro, .folio span, .folio b { font-family: var(--mono); }
.hero-copy h1 em, .beat[data-beat="3"] em, .build h2 em { color: var(--blue); }
.hero-copy h1 { max-width: 12ch; }
.hero-copy .lede { color: var(--ink-2); font-size: 16.5px; max-width: 33ch; }

.btn { background: var(--ink); color: var(--paper); border-radius: 100px; padding: 16px 24px 16px 26px; font: 500 15px/1 var(--sans); }
.btn:hover { background: var(--blue-deep); color: #fff; }
.link { font-weight: 500; }

.nav { mix-blend-mode: normal; }
.wordmark b, body[data-bg] .wordmark b { color: var(--blue); }
.tideline, body[data-bg] .tideline { background: var(--blue); height: 1px; }

/* the section frame: no fills, generous air, headlines rise out of a mask */
.sec, .sec.blue, .sec.navy { background: transparent; color: var(--ink); }
.sec { padding: clamp(140px, 22vh, 260px) var(--edge); }
.sec.blue .dim, .sec.navy .dim, .dim { color: var(--ink-3); }
.wipe { clip-path: inset(-.1em 0 100% 0); transform: translateY(.35em); transition: clip-path var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); padding-right: 0; }
.wipe.in { clip-path: inset(-.1em 0 -.25em 0); transform: none; }
.folio { opacity: .8; }
.dive { display: none; }

/* hero labels: quiet type sitting on the cables */
.lab { color: var(--ink); text-shadow: 0 0 10px var(--paper), 0 0 4px var(--paper); font: 500 13px/1 var(--sans); }
.lab small { color: var(--ink-3); font-family: var(--mono); }
.lab:hover, .lab.on, .lab.on small { color: var(--blue); }
.lab.dest { transform: translate(-50%, -100%); padding: 0 0 8px; color: var(--ink-2); font: 500 10.5px/1 var(--mono); }
.lab.dest::before { left: 50%; right: auto; top: auto; bottom: 0; width: 1px; height: 6px; }
.hint { color: var(--ink-3); }
.inspect { background: rgba(7, 9, 14, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 24px 26px 18px; border: 1px solid var(--hair); border-radius: 14px; }
.inspect h2 { font: 500 1.8rem/1.05 var(--sans); letter-spacing: -.035em; }
.inspect-x { right: 22px; top: 18px; }
.trace li::before { background: var(--paper); }
.beat[data-beat="2"] p { font: 500 clamp(2rem, 1rem + 2.8vw, 3.8rem)/1.02 var(--sans); letter-spacing: -.04em; }
.story-rail span.on { color: var(--ink); }

/* inside the system: now the same ground, the diagram carries it */
.loop { z-index: 1; }
.loop .lede-col p, .loop-caption { color: var(--ink-2); }
.loop-tabs { border-top-color: var(--hair); }
.loop-tabs button { color: var(--ink-3); }
.loop-tabs button b { font: 500 clamp(1.2rem, 1rem + .7vw, 1.7rem)/1 var(--sans); letter-spacing: -.03em; }
.loop-tabs button::before { background: var(--blue); height: 1px; }

/* the call */
.phone { background: var(--paper-hi); border: 1px solid var(--hair); }
.transcript li.sp-caller { background: #151B27; }
.transcript li.sp-agent { background: var(--blue-deep); }
.waves i { background: #1D2433; }
.phone.live .waves i { background: var(--surge); }
.call-btn { background: var(--ink) !important; color: var(--paper) !important; }
.ticket dl { border-top: 1px solid var(--ink-3); }
.ticket dd { font: 500 18px/1.3 var(--sans); letter-spacing: -.02em; color: rgba(236,238,243,.14); }
.ticket dd.set { color: var(--ink); }
.ticket dd.done { font: 600 18px/1.3 var(--sans); }
@keyframes stamp { 0% { clip-path: inset(0 100% 0 0); } 60% { clip-path: inset(0 0 0 0); } }
.square h3, .fit-out h3, .sys-panel h3, .build-line b { font-family: var(--sans); font-weight: 500; letter-spacing: -.04em; }
.sq-flow li::after { height: 1px; }

/* the harbour sits on the same ground as everything else */
.sys-panel .prob { font: 400 17px/1.4 var(--sans); color: var(--ink-3); }
.sys-panel .kind, .u-lab.rel { color: var(--surge); }
.sys-list button[aria-selected="true"]::before { color: var(--blue); }

/* proof: red means missed, here and in the hero */
.field .big6 { font-family: var(--sans); font-weight: 500; letter-spacing: -.07em; }
.field .big6 small { color: var(--ink-3); font-style: normal; }
.field-list { border-top: 1px solid var(--ink-3); }

.before { background: var(--paper-hi); }
.after { background: #0F1624; }
.ba-side li { font: 500 18px/1.3 var(--sans); letter-spacing: -.02em; }
.ba-handle, .ba-handle span { background: var(--blue-deep); }

.build-line::after { height: 1px; top: 5px; background: var(--blue); }
.build-line small { color: var(--surge); }
.honest { font: 500 clamp(1.4rem, 1rem + 1.2vw, 2.1rem)/1.2 var(--sans); letter-spacing: -.035em; color: var(--ink-2); }
.honest b { font-style: normal; font-weight: 500; color: var(--ink); }

.fit .sentence { font: 500 clamp(1.9rem, 1rem + 2.6vw, 3.6rem)/1.2 var(--sans); letter-spacing: -.04em; }
.pick > button { color: var(--blue); font-style: normal; background: linear-gradient(var(--blue), var(--blue)) 0 96% / 100% 1px no-repeat; }
.menu { background: var(--paper-hi); color: var(--ink); border: 1px solid var(--hair); border-radius: 12px; }
.menu button { color: var(--ink-2); }
.menu button:hover, .menu button[aria-checked="true"] { color: var(--ink); }
.fit-out { border-top: 1px solid var(--hair); }

/* the finale: the hub again, turning slowly, on the same ground */
.finale { background: transparent; color: var(--ink); }
.finale-copy p { color: var(--ink-2); }
.finale .btn { background: var(--ink); color: var(--paper); }
.finale .btn:hover { background: var(--blue-deep); color: #fff; }
.finale-copy { top: 16vh; }
.finale .cta { top: calc(16vh + clamp(250px, 21vw, 330px)); bottom: auto; left: var(--edge); transform: none; }

.foot { background: var(--paper); border-top: 1px solid var(--hair); }

/* input labels end at their cable, reading toward the hub */
.lab:not(.dest) { transform: translate(-100%, -50%); padding: 4px 16px 4px 0; text-align: right; }
.lab:not(.dest)::before { left: auto; right: 0; }

/* the harbour: text sits on frosted panels so the 3D can pass underneath */
.sys-panel { background: rgba(7, 9, 14, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hair); border-radius: 16px; padding: 28px 28px 24px; }
.sys-head p { color: var(--ink-3); }

/* ═══ edit pass — big moments, quiet moments ═══════════════════════════════════════
   Three big moments get the motion: the hub, the call, the harbour. Everything
   between them is type and space. */

/* hero: the cables carry names only; the detail appears when you reach for one */
.lab:not(.dest) small { display: none; }
.lab:not(.dest):hover small, .lab.on small { display: inline; }
.labels.picking .lab:not(.on):not(.dest) { opacity: .2; }

/* quiet: one sentence and a lot of room */
.thesis { min-height: 100vh; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.thesis h2 { max-width: 16ch; }

/* the call: the phone and what it writes down, nothing else */
.phone { grid-template-rows: auto 1fr auto; min-height: 560px; }
.call .head { margin-bottom: 10vh; }

/* the harbour: one list, no group headings */
.sys-list { grid-template-columns: repeat(2, auto); gap: 4px 30px; }
.sys-panel .what { color: var(--ink-2); margin-top: 4px; }
.sys-panel .link { margin-top: 26px; }

/* proof: the number and one paragraph */
.field { align-items: center; min-height: 100vh; }
.field .big6 { grid-row: 1; margin-top: 0; font-size: clamp(16rem, 6rem + 30vw, 38rem); }
.field .side { grid-row: 1; align-self: center; padding-top: 0; }
.field .side h2 { max-width: 13ch; margin: 18px 0 22px; }
.field .source { margin-top: 28px; }

/* implementation: quiet, no progress animation on the line */
.build-line::after { display: none; }
.build-line li::before { background: var(--ink-3); box-shadow: none; width: 7px; height: 7px; top: 2px; }
.build-line li.on::before, .build-line li:last-child.on::before { background: var(--ink); }
.honest { margin-top: 20vh; }

/* the close: type, one line, one button */
.close { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; }
.close h2 { max-width: 10ch; }
.close p { margin: 26px 0 40px; color: var(--ink-2); max-width: 30ch; }
.close .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .field .big6 { font-size: 58vw; grid-row: auto; }
  .field .side { grid-row: auto; }
  .thesis, .field, .close { min-height: 0; }
}

/* input names: small caps on the cable where it enters the frame, the same voice as
   the destination names on the modules. The detail appears when you reach for one. */
.lab:not(.dest) { transform: translate(0, -100%); padding: 0 0 7px; text-align: left;
  font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.lab:not(.dest)::before { display: none; }
.lab:not(.dest) small { letter-spacing: 0; text-transform: none; margin-left: 10px; }

/* the thesis carries one supporting line */
.thesis { flex-direction: column; align-items: flex-start; justify-content: center; }
.thesis h2 { max-width: 13ch; }
.thesis p { margin-top: 34px; max-width: 46ch; color: var(--ink-2); font-size: 17px; }

/* beat two is a statement now; the owner's words sit under it */
.beat[data-beat="2"] h2 { margin-left: auto; max-width: 16ch; }
.beat[data-beat="2"] footer { margin-top: 22px; max-width: 60ch; margin-left: auto; text-transform: none; letter-spacing: .02em; }

/* systems panel leads with the job, then how */
.sys-panel .prob { font: 500 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.3 var(--sans); letter-spacing: -.02em; color: var(--ink); margin: 6px 0 14px; }
.sys-head h2 { max-width: 14ch; }
.close h2 { max-width: 12ch; }
.close p { max-width: 40ch; }

/* ═══ editorial pass — type, space and the 3D do the work; no interface ═══════════════
   One ground (--paper) for the whole page and nothing lifted off it. No boxes, no
   borders around content, no tiny uppercase monospace. The only monospace left is
   the clock on the call, where the figures genuinely need to hold still. */

/* the nav sits on the ground, so it never overlaps a headline */
.nav { background: var(--paper); padding-top: 18px; padding-bottom: 18px; }

/* small labels are written, not stamped */
.micro, .kicker, .foot-meta, .source, .lab, .lab.dest, .lab small, .build-line small, .inspect-x, .ticket-note {
  font-family: var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important; }
.kicker { font-size: 15px; color: var(--ink-3); }
.beat[data-beat="1"] .kicker { color: var(--miss); margin-bottom: 20px; }
.lab, .lab.dest { font-size: 13px !important; font-weight: 500; }
.lab small { font-size: 13px !important; }
.lab.dest::before { display: none; }
.source { font-size: 14px; color: var(--ink-3); }
.build-line small { font-size: 14px; color: var(--ink-3); }
.foot-meta { margin-left: auto; font-size: 14px; color: var(--ink-3); }
.inspect { background: var(--paper); border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ── the call: a script and the sentence it produces ── */
.call { display: block; }
.call .head { display: block; margin-bottom: 14vh; }
.call .head h2 { max-width: 14ch; }
.call .head p { margin-top: 30px; max-width: 42ch; font-size: 19px; color: var(--ink-2); }
.play { margin-top: 44px; display: inline-flex; align-items: baseline; gap: 16px; font: 500 22px/1 var(--sans);
  letter-spacing: -.02em; color: var(--ink); padding: 0 0 8px; border-bottom: 1px solid var(--ink); }
.play::before { content: ""; width: 0; height: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent;
  border-bottom: 8px solid transparent; align-self: center; }
.call.live .play::before { border: 0; width: 12px; height: 12px; background: currentColor; }
.play-time { font: 400 16px/1 var(--mono); color: var(--ink-3); }
.play:hover { color: var(--blue); border-color: var(--blue); }
.call-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 7vw; align-items: start; min-height: 46vh; }
.call .transcript { list-style: none; max-height: none; overflow: visible; display: block; padding: 0; }
.call .transcript li { max-width: none; padding: 0; border-radius: 0; background: none !important; margin: 0 0 28px;
  font: 500 clamp(1.3rem, 1rem + 1vw, 2rem)/1.3 var(--sans); letter-spacing: -.025em; color: var(--ink); animation: rise .6s var(--ease); }
.call .transcript li.sp-caller { color: var(--ink-2); }
.call .transcript li:not(:last-child) { opacity: .3; transition: opacity .6s; }
.call .transcript .who { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-bottom: 6px; }
.call .transcript li.sp-agent .who { color: var(--blue); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.booking { font: 500 clamp(1.5rem, 1rem + 1.6vw, 2.6rem)/1.28 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.booking .part { color: rgba(236, 238, 243, .13); transition: color .8s var(--ease); }
.booking .part.said { color: var(--ink); }
.booking .part:last-child.said { color: var(--done); }
.call-note { margin-top: 10vh; font-size: 14px; color: var(--ink-3); max-width: 60ch; }

/* ── systems: the system is the hero ── */
.u-labels { display: none; }
.sys-panel { background: none; border: 0; border-radius: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  width: min(520px, 40vw); top: 50%; transform: translateY(-50%); }
.sys-panel h3 { font: 500 clamp(4rem, 2rem + 6vw, 8.5rem)/.9 var(--sans); letter-spacing: -.06em; margin: 0 0 30px; }
.sys-panel .prob { font: 500 clamp(1.4rem, 1rem + 1.1vw, 2.1rem)/1.2 var(--sans); letter-spacing: -.03em; color: var(--ink); margin: 0 0 22px; max-width: 18ch; }
.sys-panel .what { font-size: 16px; line-height: 1.6; color: var(--ink-3); max-width: 44ch; }
.sys-panel .link { margin-top: 30px; }
.sys-list { gap: 6px 34px; }
.sys-list button { font: 500 16px/1.3 var(--sans); color: var(--ink-3); padding: 4px 0; }
.sys-list button[aria-selected="true"] { color: var(--ink); }
.sys-list button[aria-selected="true"]::before { content: none; }
.sys-head h2 { max-width: 13ch; }

@media (max-width: 900px) {
  .call-body { grid-template-columns: 1fr; gap: 50px; min-height: 0; }
  .sys-panel { width: auto; transform: none; }
  .sys-panel h3 { font-size: 22vw; }
}

/* input names ride on their cable: rotated from their bottom-left corner, which sits on the line */
.lab:not(.dest) { transform-origin: 0 100%; white-space: nowrap; }

/* ── phones: the hero ── */
@media (max-width: 600px) {
  .labels .lab:not(.dest) { display: none; }        /* six names can't fit where the cables meet on a phone */
  .lab.dest { font-size: 12px !important; }
  .hero-copy .row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-copy .btn { font-size: 15px; padding: 15px 22px; }
  .hero-copy .lede { font-size: 16px; }
}

/* ── phones: tighter rhythm — desktop's big pauses read as empty screen on a phone ── */
@media (max-width: 600px) {
  .sec { padding-top: 13vh; padding-bottom: 13vh; }
  .thesis, .field, .close { min-height: 0; }
  .call .head { margin-bottom: 7vh; }
  .call .head p { font-size: 17px; }
  .call-note { margin-top: 5vh; }
  .sys-stage { padding-bottom: 20px; }
  .build-line { margin-top: 6vh; gap: 28px; }
  .build-line li { padding-top: 22px; }
  .honest { margin-top: 9vh; }
  .field .big6 { font-size: 46vw; }
}

/* ═══ clarity pass — one idea: TideMerge = AI implementation + automation ════════════
   Six sections in story order: hero → what we do → the systems → how it works → proof
   → close. One accent (TideMerge Blue) on text and lines only; each system's own tint
   appears only on that system. Small blue labels name each section so a visitor always
   knows where they are in the story. */

.kicker { display: block; font-size: 14px !important; font-weight: 500; color: var(--blue); margin-bottom: 22px; }
.hero-copy h1 { max-width: 13ch; }
.does h2 em, .close h2 em, .sys-head h2 em, .build h2 em, .call h2 em { color: var(--blue); }

/* 2 · what TideMerge does: three columns, the middle one is us */
.does { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.does h2 { max-width: 15ch; }
.idea-line { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4vw; margin-top: 12vh; }
.idea-line li { position: relative; padding-top: 26px; border-top: 1px solid var(--hair); }
.idea-line li span { display: block; font: 500 clamp(1.2rem, 1rem + .7vw, 1.6rem)/1.2 var(--sans); letter-spacing: -.03em; color: var(--ink); margin-bottom: 12px; }
.idea-line li p { color: var(--ink-3); max-width: 30ch; font-size: 15.5px; }
.idea-line li:nth-child(2) { border-top-color: var(--blue); }
.idea-line li:nth-child(2) span { color: var(--blue); }
.idea-line li:not(:last-child)::after { content: "→"; position: absolute; right: -2.6vw; top: 22px; color: var(--ink-3); font-size: 20px; }

/* 3 · the systems: same anatomy for every system, each in its own tint */
.sys-head .kicker { margin-bottom: 18px; }
.sys-panel { --tint: var(--blue); }
.sys-panel .kind { font-size: 14px; font-weight: 500; color: var(--tint); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.sys-panel .kind::before { content: ""; width: 22px; height: 2px; background: var(--tint); }
.io-line { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 26px; border-top: 1px solid var(--hair); max-width: 44ch; }
.io-line div { padding-top: 14px; }
.io-line dt { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.io-line dd { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }

/* 4 · how it works: five steps on one line that draws itself once */
.build-line { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 11vh; }
.build-line::after { display: block; height: 1px; top: 5px; background: var(--blue); }
.build-line li { padding-right: 22px; }
.build-line li.on::before, .build-line li:last-child.on::before { background: var(--blue); }
.build-line b { font-size: clamp(1.2rem, .95rem + .8vw, 1.75rem); line-height: 1.12; }
.build-line p { max-width: 24ch; }

/* 6 · close */
.close h2 { max-width: none; }

@media (max-width: 900px) {
  .does { min-height: 0; }
  .idea-line { grid-template-columns: 1fr; gap: 34px; margin-top: 7vh; }
  .idea-line li:not(:last-child)::after { content: none; }
  .io-line { grid-template-columns: 1fr; gap: 0; }
  .build-line { grid-template-columns: 1fr; }
}
/* the panel now carries the system's anatomy too, so the name steps down a size to fit one screen */
.sys-panel { top: calc(50% + 30px); }
.sys-panel h3 { font-size: clamp(3rem, 1.6rem + 3.6vw, 5.8rem); margin-bottom: 22px; }
.sys-panel .prob { font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); margin-bottom: 16px; }
.sys-panel .what { font-size: 15px; }
.sys-panel .link { margin-top: 24px; }
.sys-panel .kind { font-family: var(--sans); text-transform: none; letter-spacing: 0; }

/* the hero cables carry no names: the object explains itself, the headline does the talking */
.labels .lab:not(.dest) { display: none; }

/* ═══ systems list: obviously clickable, and it shows you around ═══════════════════ */
.sys-list { grid-template-columns: repeat(3, minmax(0, auto)); gap: 4px 30px; bottom: 6vh; }
.sys-list button { --tint: var(--blue); position: relative; display: grid; grid-template-columns: 14px auto; align-items: baseline;
  column-gap: 10px; padding: 9px 4px 11px 0; color: var(--ink-2); transition: color var(--t-micro), transform var(--t-ui) var(--ease); }
.sys-list button i { width: 8px; height: 8px; border-radius: 2px; background: var(--tint); opacity: .55; align-self: center;
  transition: opacity var(--t-micro), transform var(--t-ui) var(--ease); }
.sys-list button span { font: 500 17px/1.2 var(--sans); letter-spacing: -.02em; }
.sys-list button small { grid-column: 2; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; }
.sys-list button:hover { color: var(--ink); transform: translateX(4px); }
.sys-list button:hover i { opacity: 1; transform: scale(1.25); }
.sys-list button[aria-selected="true"] { color: var(--ink); }
.sys-list button[aria-selected="true"] i { opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint) 22%, transparent); }
.sys-list button[aria-selected="true"] small { color: var(--tint); }
/* the timer line under the current system while the tour runs */
.sys-list button::after { content: ""; position: absolute; left: 24px; right: 8px; bottom: 2px; height: 1px; background: var(--tint);
  transform: scaleX(0); transform-origin: 0 50%; }
.sys-list.touring button[aria-selected="true"]::after { animation: tourline var(--tour, 5.2s) linear forwards; }
@keyframes tourline { to { transform: scaleX(1); } }

.sys-panel .kind .count { margin-left: auto; padding-left: 18px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sys-panel .kind { max-width: 44ch; }
.sys-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px 34px; margin-top: 24px; }
.sys-actions .link { margin-top: 0 !important; }
.sys-next { font: 500 15px/1 var(--sans); color: var(--tint); padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent);
  border-radius: 100px; transition: background var(--t-micro), color var(--t-micro); }
.sys-next span { display: inline-block; transition: transform var(--t-ui) var(--ease); }
.sys-next:hover { background: var(--tint); color: var(--paper); }
.sys-next:hover span { transform: translateX(4px); }

@media (max-width: 900px) {
  .sys-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .sys-list.touring button::after { animation: none; } }
/* a soft shadow of the ground behind the panel, so a plate drifting underneath never crosses the words */
.sys-panel::before { content: ""; position: absolute; inset: -70px -60px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 9, 14, .94) 62%, rgba(7, 9, 14, 0)); }

/* fewer words: names only in the list; the panel is kind, name, job, next */
.sys-list button { padding: 8px 4px 10px 0; }
.sys-list button span { font-size: 18px; }
.sys-actions { margin-top: 30px; }

/* the harbour is the show: the panel steps to the right edge and gets narrower */
.sys-panel { right: var(--edge); width: min(400px, 28vw); }
.sys-panel h3 { font-size: clamp(2.8rem, 1.4rem + 3vw, 4.8rem); }
.sys-panel .prob { font-size: clamp(1.1rem, .95rem + .55vw, 1.45rem); max-width: 20ch; }
.sys-panel .kind { max-width: none; }
.sys-panel::before { inset: -50px -40px; background: radial-gradient(closest-side, rgba(7, 9, 14, .9) 55%, rgba(7, 9, 14, 0)); }
.sys-actions { gap: 16px 26px; }
@media (max-width: 900px) { .sys-panel { width: auto; } }

/* ═══ systems layout: header across the top, then list · harbour · panel — nothing on the 3D ═══ */
.systems { padding: 0; }
.sys-stage { height: auto; min-height: 100vh; overflow: visible; display: grid; padding: 0 var(--edge) clamp(60px, 9vh, 110px);
  grid-template-columns: minmax(150px, .7fr) minmax(0, 2.1fr) minmax(260px, 1fr); grid-template-rows: auto 1fr; gap: 0 3vw; }
.sys-head { position: static; grid-column: 1 / -1; padding-top: clamp(100px, 14vh, 160px); pointer-events: auto; }
.sys-head h2 { max-width: none; }
.sys-list { position: static; grid-column: 1; grid-row: 2; align-self: center; grid-template-columns: 1fr; gap: 0; bottom: auto; left: auto; }
#universe { position: relative; inset: auto; grid-column: 2; grid-row: 2; align-self: center; width: 100%; height: min(68vh, 640px); }
.sys-panel { position: static; grid-column: 3; grid-row: 2; align-self: center; transform: none; width: auto; right: auto; top: auto; }
.sys-panel::before { content: none; }
@media (max-width: 900px) {
  .sys-stage { grid-template-columns: 1fr; grid-template-rows: none; padding-bottom: 50px; display: grid; }
  .sys-head, .sys-list, #universe, .sys-panel { grid-column: 1; grid-row: auto; }
  .sys-head { padding: 100px 0 0; }
  #universe { height: 46vh; order: 0; }
  .sys-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; padding: 0; }
  .sys-panel { margin: 30px 0 0; }
}
.sys-stage { grid-template-rows: auto 1fr; }
.sys-list { margin-top: 5vh; }
#universe { height: min(72vh, 700px); }

/* the harbour runs the full width behind the columns and fades out before it reaches the words */
#universe { grid-column: 1 / -1; grid-row: 2; z-index: 0; height: min(78vh, 760px); pointer-events: auto;
  -webkit-mask-image: radial-gradient(ellipse 34% 50% at 50% 52%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 34% 50% at 50% 52%, #000 62%, transparent 100%); }
.sys-list, .sys-panel { position: relative; z-index: 2; }
@media (max-width: 900px) {
  #universe { grid-column: 1; -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 65%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 65%, transparent 100%); }
}
/* the fade follows the orb, which sits halfway between the list and the panel */
@media (min-width: 901px) {
  #universe { -webkit-mask-image: radial-gradient(ellipse 30% 52% at var(--cx, 50%) 52%, #000 64%, transparent 100%);
    mask-image: radial-gradient(ellipse 30% 52% at var(--cx, 50%) 52%, #000 64%, transparent 100%); }
}

/* the call: a speaker cue next to play, so people know it's something to listen to */
.play-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 44px; }
.play-row .play { margin-top: 0; }
.sound-on { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--blue);
  padding: 9px 16px 9px 12px; border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent); border-radius: 100px; }
.sound-on .w1, .sound-on .w2 { animation: soundwave 1.6s ease-in-out infinite; }
.sound-on .w2 { animation-delay: .25s; }
@keyframes soundwave { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }
.call.live .sound-on .w1, .call.live .sound-on .w2 { animation-duration: .7s; }

/* the call: the right column is labelled as what the system writes down — a ticket that fills in */
.writes-label { font-size: 14px; font-weight: 500; color: var(--blue); }
.writes-sub { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
.booking-ticket { margin-top: 22px; border-top: 1px solid var(--hair); }
.booking-ticket .row { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.booking-ticket dt { font-size: 14px; color: var(--ink-3); }
.booking-ticket dd { font: 500 clamp(1.1rem, .95rem + .6vw, 1.5rem)/1.25 var(--sans); letter-spacing: -.02em; color: rgba(236, 238, 243, .16); transition: color .8s var(--ease); }
.booking-ticket .row.said dd { color: var(--ink); }
.booking-ticket .row.done.said dd { color: var(--done); }

/* a system that needs explaining gets its steps: numbered, in its own tint */
.sys-steps { list-style: none; counter-reset: st; margin-top: 22px; display: grid; gap: 12px; max-width: 38ch; }
.sys-steps li { counter-increment: st; display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.sys-steps li::before { content: counter(st); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
  font-size: 12px; font-weight: 600; color: var(--tint); border: 1px solid color-mix(in srgb, var(--tint) 50%, transparent); }
.sys-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); max-width: 38ch; }

/* ── the scroll cue: a little 3D mouse, its wheel rolling down, an arrow bouncing under it ── */
.scroll-cue { position: absolute; left: 50%; bottom: clamp(26px, 5vh, 54px); z-index: 4; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; color: var(--ink);
  animation: cueFloat 3.2s ease-in-out infinite; transition: opacity .5s, visibility .5s; }
.scroll-cue.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.sc-mouse { position: relative; width: 26px; height: 40px; border-radius: 14px;
  background: linear-gradient(160deg, #F4F6FA 0%, #C9CFDB 55%, #8C94A6 100%);
  box-shadow: inset -3px -4px 6px rgba(0, 0, 0, .28), inset 2px 2px 3px rgba(255, 255, 255, .8), 0 8px 18px rgba(0, 0, 0, .55); }
.sc-mouse::before { content: ""; position: absolute; inset: -9px; border-radius: 22px; border: 1px solid var(--blue); opacity: 0;
  animation: cuePulse 2.4s ease-out infinite; }
.sc-mouse i { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--blue);
  animation: cueWheel 1.6s cubic-bezier(.6, 0, .4, 1) infinite; }
.sc-arrow { width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg);
  animation: cueArrow 1.6s ease-in-out infinite; }
.sc-label { font-size: 13px; font-weight: 500; color: var(--ink-2); letter-spacing: .02em; }
.scroll-cue:hover .sc-label, .scroll-cue:hover .sc-arrow { color: var(--ink); border-color: var(--ink); }
@keyframes cueFloat { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }
@keyframes cuePulse { 0% { opacity: .7; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes cueWheel { 0% { opacity: 0; transform: translateY(-2px); } 25% { opacity: 1; } 70% { opacity: 1; transform: translateY(10px); } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes cueArrow { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; } 50% { transform: translateY(5px) rotate(45deg); opacity: 1; } }
@media (max-width: 600px) { .scroll-cue { left: auto; right: var(--edge); transform: none; animation-name: cueFloatR; } }
@keyframes cueFloatR { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue, .sc-mouse::before, .sc-mouse i, .sc-arrow { animation: none; } }