/* ============================================================
   KAIAK — MASTER — sections
   CONNECTIVE TISSUE lifted from v9/signal's motion system:
   one shared reveal clock, a page-wide column-rule overlay, and
   a per-section background layer carrying an animated grain.
   Signal's soft radial "glows" are deliberately NOT carried over
   (blur-blobs are out); flat tinted grounds do that job instead.
   ============================================================ */
@keyframes grain-shift{
  0%{ transform:translate(0,0); } 20%{ transform:translate(-4%,-6%); }
  40%{ transform:translate(-8%,3%); } 60%{ transform:translate(5%,-4%); }
  80%{ transform:translate(-3%,7%); } 100%{ transform:translate(0,0); }
}
.grain{
  position:absolute; inset:-20%;
  width:140%; height:140%;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-shift 8s steps(8) infinite;
}
.band .grain,.hero .grain{ mix-blend-mode:overlay; opacity:.14; }
.sec-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.sec > .wrap,.sec > .fold{ position:relative; z-index:1; }

/* page-wide column rules — the one layer every section shares */
.grid-overlay{
  position:fixed; inset:0; z-index:3;
  pointer-events:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:var(--container);
  margin:0 auto;
}
.grid-overlay i{ border-left:1px solid rgba(2,43,114,.045); height:100%; }
.grid-overlay i:last-child{ border-right:1px solid rgba(2,43,114,.045); }
@media (max-width:900px){ .grid-overlay{ display:none; } }

/* the one shared entrance primitive; sections vary what they do ON TOP */
.reveal-up{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-up.is-in{ opacity:1; transform:none; }

.sec{ position:relative; padding:clamp(72px,10vw,132px) 0; background:var(--paper); }
.sec + .sec{ border-top:1px solid var(--line); }
.section-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:24px 56px;
  margin-bottom:clamp(38px,5vw,64px);
}
.section-head h2{
  font-weight:800;
  font-size:clamp(2.1rem,1.1rem + 3.9vw,4.2rem);
  letter-spacing:-.04em;
  line-height:.94;
  max-width:15ch;
}
.section-head .lede{
  max-width:44ch;
  color:var(--ink-soft);
  font-size:clamp(1rem,.94rem + .3vw,1.12rem);
  line-height:1.62;
}

/* ============ LEFT INDEX RAIL (clickable) ============ */
.shell{ display:grid; grid-template-columns:var(--rail) minmax(0,1fr); }
.main{ min-width:0; grid-column:2; }
.rail-desktop{
  grid-column:1;
  position:sticky; top:0; align-self:start;
  height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 22px 0 clamp(20px,2.6vw,40px); /* clear the fixed nav bar */
  border-right:1px solid var(--line);
  background:var(--lite);
  z-index:40;
}
.rail-brand{
  position:absolute; top:clamp(22px,5vh,40px); left:clamp(20px,2.6vw,40px);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-ink);
}
.rail-foot{
  position:absolute; bottom:clamp(22px,5vh,40px); left:clamp(20px,2.6vw,40px);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  color:var(--mut);
}
.rail-list{ display:flex; flex-direction:column; gap:1.45rem; position:relative; }
.rail-list::before{
  content:''; position:absolute; left:5px; top:8px; bottom:8px;
  width:1px; background:var(--line);
}
.rail-item{
  display:flex; align-items:center; gap:.85rem;
  text-decoration:none;
  color:var(--mut);
  transition:color .3s var(--ease-out);
}
.rail-dot{
  width:11px; height:11px; border-radius:50%;
  background:var(--lite); border:1.5px solid var(--line-2);
  flex:none; position:relative;
  transition:background .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.rail-label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  transition:opacity .3s var(--ease-out), color .3s var(--ease-out);
  white-space:nowrap;
}
.rail-item:hover{ color:var(--navy); }
.rail-item:hover .rail-dot{ border-color:var(--accent); }
.rail-item.is-active{ color:var(--navy); }
.rail-item.is-active .rail-dot{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 5px rgba(31,59,255,.16);
  transform:scale(1.15);
}
.rail-item.is-active .rail-label{ font-weight:700; color:var(--navy); }
.rail-item.is-done .rail-dot{ background:var(--blueb); border-color:var(--blueb); }
.rail-mobile{ display:none; }

/* mobile: the rail becomes a compact sticky top strip — a real progress bar
   plus horizontally scrollable jump chips */
@media (max-width:1080px){
  :root{ --rail:0px; }
  .shell{ display:block; }
  .rail-desktop{ display:none; }
  .rail-mobile{
    display:block;
    /* sits directly beneath the fixed nav bar, not behind it */
    position:sticky; top:64px; z-index:120;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transform:translateY(0);
    transition:transform .28s var(--ease);
  }
  /* below 1080px the top nav AND this chip rail are both sticky, so they
     permanently stack two bars. app.js toggles this on scroll direction —
     the nav stays put, only the rail (the less essential of the two) yields
     on the way down and returns on the way up. */
  .rail-mobile.is-hidden{ transform:translateY(-100%); }
  @media (prefers-reduced-motion:reduce){ .rail-mobile{ transition:none; } }
  .rail-mobile-bar{ height:2px; background:var(--lite-2); }
  /* scaleX rather than width: same bar, no layout on every scroll tick */
  .rail-mobile-bar i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center; background:var(--accent); transition:transform .2s linear; }
  .rail-mobile-scroll{
    display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
    padding:9px var(--edge);
    -webkit-overflow-scrolling:touch;
  }
  .rail-mobile-scroll::-webkit-scrollbar{ display:none; }
  .rail-mobile .rail-item{
    flex:none;
    padding:7px 13px;
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--mut);
  }
  .rail-mobile .rail-item.is-active{ background:var(--accent); border-color:var(--accent); }
  .rail-mobile .rail-item.is-active .rail-label{ color:#fff; font-weight:700; }
  .site-nav .wrap{ height:64px; }
}

/* ============ 1. ROLE PICKER + WORKFLOW GRAPH ============ */
.graph-layout{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(28px,3.4vw,52px);
  align-items:start;
}
.role-list{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.role{
  position:relative; display:block; width:100%; text-align:left;
  background:transparent; border:0; border-radius:4px;
  padding:20px 22px 22px 24px;
  cursor:pointer;
  transition:background .3s ease, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.role::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px;
  width:3px; background:var(--accent);
  opacity:0; transform:scaleY(.4); transform-origin:center;
  transition:opacity .3s ease, transform .35s var(--ease);
}
.role-who{
  display:block;
  font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.18rem,.95rem + .75vw,1.5rem); line-height:1.06;
  color:var(--navy); margin-bottom:8px;
}
.role-outcome{
  display:block; font-size:.98rem; line-height:1.5; color:var(--mut);
  max-width:34ch; transition:color .3s ease;
}
.role:hover{ background:rgba(2,43,114,.04); }
.role[aria-selected="true"]{ background:var(--lite); box-shadow:var(--shadow); }
.role[aria-selected="true"]::before{ opacity:1; transform:scaleY(1); }
.role[aria-selected="true"] .role-outcome{ color:var(--ink-soft); }
.role-foot{
  margin-top:26px; padding-left:24px;
  font-size:.92rem; line-height:1.55; color:var(--mut); max-width:32ch;
}
.graph-frame{
  min-width:0;
  border:1.5px solid var(--line-2);
  border-radius:4px;
  background:var(--lite);
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.2vw,28px) clamp(22px,2.6vw,32px);
}
.graph-caption{
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:16px; margin-bottom:clamp(12px,2vw,20px);
  border-bottom:1px solid var(--line);
}
.graph-caption-label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; color:var(--accent);
}
.graph-caption-title{ font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--mut); }
.graph-stage{ min-width:0; }
.graph-stage svg{ width:100%; height:auto; overflow:visible; }
.g-node rect{ fill:#fff; stroke:var(--navy); stroke-width:3; }
.g-node.is-trigger rect{ fill:var(--lite-2); }
.g-node.is-branch rect{ fill:var(--accent-soft); stroke:var(--accent); }
.g-node.is-outcome rect{ fill:var(--accent); stroke:var(--navy); }
.g-label{ font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.015em; fill:var(--navy); }
.g-node.is-outcome .g-label{ fill:#fff; }
.g-kicker{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; font-weight:700; fill:var(--mut); }
.g-node.is-branch .g-kicker{ fill:var(--accent); }
.g-node.is-outcome .g-kicker{ fill:var(--navy); }
.g-edge,.g-arrow{ fill:none; stroke:var(--navy); stroke-width:2.9; stroke-linecap:round; stroke-linejoin:round; }
.g-edge.is-soft,.g-arrow.is-soft{ stroke:var(--accent); }
.g-edge-label{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  fill:var(--ink-soft);
  paint-order:stroke; stroke:var(--lite); stroke-width:7px; stroke-linejoin:round;
}
/* Real backing chip behind each edge-label, sized to the text's own bbox
   in app.js (addLabelBackgrounds). Same colour as .graph-frame's own
   background, so on a clean stretch of edge it reads as invisible and only
   does visible work where a label would otherwise sit over an edge line or
   a word-gap in a multi-word label. */
.g-edge-label-bg{ fill:var(--lite); }
.g-dot{ fill:var(--accent); }
@media (max-width:1000px){
  .graph-layout{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .role-outcome{ max-width:46ch; }
}
@media (max-width:740px){
  /* app.js builds a tighter mobile layout grammar (smaller columns/rows)
     for this breakpoint, so the diagram fits the card at its natural
     width:100% scale instead of overflowing into a horizontal scroll. */
  .graph-stage svg{ width:100%; max-width:100%; }
  /* Node boxes are ~78px wide at this breakpoint (vs ~140px on desktop);
     the 17px label size that fits comfortably on desktop runs several
     labels right up to (and past) the box edge on mobile. Drop a step so
     text-rect padding clears the box border on every label. */
  .g-label{ font-size:14px; }
}

/* ============ 2. GAPLESS CONTROL FOLD ============
   Shared-border technique from x-relay: zero gap, every tile owns only
   its right + bottom border, the container supplies top + left. Hover
   switches the tile's FULL background colour, as asked. */
/* roles' right column (.graph-frame) already reaches almost to the section's
   own bottom padding, so the roles->focus handoff was stacking a full
   section-bottom-padding on top of a full section-top-padding for close to
   600px of near-empty grid-lined band. Trim this section's top padding to
   the page's normal inter-section rhythm (~280-300px total) instead. */
.sec-control{ background:var(--lite); padding-bottom:0; padding-top:clamp(56px,7vw,96px); }
.fold{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--navy);
  border-left:1px solid var(--navy);
}
.tile{
  position:relative;
  border-right:1px solid var(--navy);
  border-bottom:1px solid var(--navy);
  padding:clamp(28px,3vw,44px);
  min-height:298px;
  display:flex; flex-direction:column; gap:16px;
  background:var(--paper);
  /* the tile carries the heading colour so a hover state can swap ground and
     type in one rule; every other child sets its own colour explicitly */
  color:var(--navy);
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transition:opacity .6s var(--ease-out), clip-path .7s var(--ease-out),
             background-color .3s ease, color .3s ease, border-color .3s ease;
  transition-delay:var(--d,0s);
}
.tile.is-in{ opacity:1; clip-path:inset(0 0 0 0); }
/* grid items default to min-width:auto, so a single nowrap label inside a
   vignette would otherwise push its whole 1fr column wider than the page */
.fold > .tile{ min-width:0; }
/* the double-wide tile lays its own copy out in two columns rather than
   leaving half of itself empty */
.tile-wide{
  grid-column:span 2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:auto auto 1fr auto;
  column-gap:clamp(24px,3vw,44px);
  align-content:start;
}
.tile-wide .tile-eyebrow{ grid-column:1 / -1; grid-row:1; }
.tile-wide h3{ grid-column:1; grid-row:2; align-self:start; }
.tile-wide .tile-body{ grid-column:1; grid-row:3; align-self:start; padding-top:14px; }
.tile-wide .vig{ grid-column:2; grid-row:2 / span 2; align-self:start; margin-top:4px; }
.tile-wide .tile-replaces{ grid-column:1 / -1; grid-row:4; margin-top:0; }

/* the closing tile runs the full width so the grid never ends ragged */
.tile-row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:6px clamp(20px,3vw,44px);
  align-items:center;
  min-height:0;
}
.tile-row .tile-eyebrow{ grid-column:1; grid-row:1; }
.tile-row h3{ grid-column:1; grid-row:2; max-width:24ch; }
.tile-row .tile-replaces{ grid-column:2; grid-row:1 / span 2; margin-top:0; padding-top:0; align-self:center; }
.tile-eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--mut);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  transition:color .3s ease;
}
.chip{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em;
  background:var(--accent); color:#fff;
  padding:4px 8px; border-radius:2px;
  transition:background .3s ease, color .3s ease;
}
.tile h3{
  color:inherit;
  font-weight:700;
  font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem);
  letter-spacing:-.032em; line-height:1.08;
  max-width:20ch;
  transition:color .3s ease;
}
.tile-wide h3{ font-size:clamp(1.6rem,1.1rem + 1.9vw,2.7rem); max-width:18ch; }
.tile-body{
  font-size:.99rem; line-height:1.6; color:var(--ink-soft); max-width:42ch;
  transition:color .3s ease;
}
.tile-replaces{
  margin-top:auto; padding-top:22px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; line-height:1.5;
  color:var(--mut);
  transition:color .3s ease;
}
.tile-replaces::before{
  content:""; display:block; width:28px; height:2px;
  background:var(--line-2); margin-bottom:14px;
  transition:background .3s ease;
}
/* full background-colour switches on hover — foreground and background are
   set in the SAME rule/state so the pair is always evaluated together, and
   the heading inherits it rather than being recoloured out of band */
.tile[data-tone="navy"]:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.tile[data-tone="deep"]:hover{ background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; }
.tile[data-tone="blue"]:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tile[data-tone="navy"]:hover .tile-body,.tile[data-tone="deep"]:hover .tile-body,.tile[data-tone="blue"]:hover .tile-body{ color:rgba(234,240,251,.78); }
.tile[data-tone="navy"]:hover .tile-eyebrow,.tile[data-tone="deep"]:hover .tile-eyebrow,.tile[data-tone="blue"]:hover .tile-eyebrow,
.tile[data-tone="navy"]:hover .tile-replaces,.tile[data-tone="deep"]:hover .tile-replaces,.tile[data-tone="blue"]:hover .tile-replaces{ color:rgba(234,240,251,.72); }
.tile[data-tone="navy"]:hover .tile-replaces::before,.tile[data-tone="deep"]:hover .tile-replaces::before,.tile[data-tone="blue"]:hover .tile-replaces::before{ background:rgba(234,240,251,.45); }
.tile[data-tone="navy"]:hover .chip{ background:var(--accent-lit); color:#fff; }
.tile[data-tone="blue"]:hover .chip{ background:#fff; color:var(--accent); }

/* ---------------------------------------------------------------
   TOOL VIGNETTES — miniature honest tool interfaces inside the
   tiles. Built entirely from HTML/CSS: no screenshots, no invented
   numbers. The vignette is a PROTECTED CHIP — it keeps its own
   porcelain ground and navy ink no matter what the tile does on
   hover, so the mock-UI stays legible through the full-colour swap.
   Every state element carries an ambient loop (slow, staggered,
   transform/opacity/width only) that starts once the card is lit
   and pauses the moment it leaves the viewport.
--------------------------------------------------------------- */
.vig{
  --vink:#022B72;
  --vmut:#5B6C8E;
  --vline:rgba(2,43,114,.15);
  --cyc:10s;
  position:relative;
  margin:2px 0 4px;
  background:#FBFCFE;
  border:1px solid rgba(2,43,114,.20);
  border-radius:5px;
  overflow:hidden;
  font-family:var(--font-mono);
  color:var(--vink);
  min-width:0;
  box-shadow:0 1px 0 rgba(2,43,114,.05);
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
/* the vignette stays a light object on a dark tile — it only gains a ring */
.tile:hover .vig{
  background:#fff;
  border-color:rgba(31,59,255,.7);
  box-shadow:0 0 0 3px rgba(31,59,255,.22), 0 6px 18px -10px rgba(0,0,0,.5);
}
.vig-bar{
  display:flex; align-items:center; gap:6px;
  padding:7px 10px;
  background:#EDF2FC;
  border-bottom:1px solid var(--vline);
}
.vig .vd{ width:7px; height:7px; border-radius:50%; flex:none; }
.vig .vd:nth-child(1){ background:#D9A2A2; }
.vig .vd:nth-child(2){ background:#DCC28F; }
.vig .vd:nth-child(3){ background:#96BFA2; }
.vig-title{
  margin-left:5px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vig-live{
  margin-left:auto; flex:none;
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--vmut);
}
.vig-live::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--accent);
  animation:vbreathe 3.4s ease-in-out infinite;
}
.vig-body{ padding:9px 10px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.vig-body > *{ min-width:0; }

/* --- shared row / label / chip primitives --- */
.vrow,.vstep,.vnode,.vsrc,.vdoc,.vprow,.vfield{
  display:flex; align-items:center; gap:8px;
  font-size:12px; line-height:1.25;
}
.vrow,.vdoc,.vfield{
  padding:7px 9px; background:#fff;
  border:1px solid var(--vline); border-radius:3px;
}
.vlab{ color:var(--vink); font-weight:600; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vlab-mut{ color:var(--vmut); font-weight:500; }
.vico{ flex:none; color:var(--accent); font-size:12px; width:13px; text-align:center; }
.vext{
  flex:none; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  color:var(--vmut); background:#EDF2FC; border-radius:2px; padding:2px 5px;
}
.vchip{
  flex:none; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  padding:3px 7px; border-radius:2px; white-space:nowrap;
}
.vchip-a{ background:var(--accent); color:#fff; }
.vchip-q{ background:#E4EBF8; color:#41537A; }
.vchip-f{ background:#fff; color:var(--accent); border:1px solid rgba(31,59,255,.38); }

/* --- status badges: ring that fills for done, slow arc for waiting --- */
.vbadge{
  flex:none; position:relative;
  width:16px; height:16px; border-radius:50%;
  border:1px solid transparent;
  display:grid; place-items:center;
}
.vbadge.is-done{ background:var(--accent); border-color:var(--accent); }
.vbadge.is-done::before{
  content:"✓"; font-size:10px; line-height:1; font-weight:700; color:#fff;
}
.vbadge.is-wait{ background:#fff; border-color:#DCC28F; }
.vbadge.is-wait::before{
  content:""; position:absolute; inset:2px; border-radius:50%;
  background:conic-gradient(#C79A3C 0deg 110deg, transparent 110deg 360deg);
  -webkit-mask:radial-gradient(circle, transparent 46%, #000 48%);
          mask:radial-gradient(circle, transparent 46%, #000 48%);
}
.vbadge.is-off{ background:#fff; border-color:#C6D3EA; }
.vbadge.is-off::before{ content:"✕"; font-size:9px; font-weight:700; color:#93A2BE; }

/* --- toggle --- */
.vtog{
  flex:none; width:26px; height:15px; border-radius:8px;
  background:var(--accent); position:relative;
}
.vtog i{
  position:absolute; top:2px; left:2px;
  width:11px; height:11px; border-radius:50%; background:#fff;
  transform:translateX(11px);
}

/* --- vertical pipeline (knotch's checklist) --- */
.vpipe{ gap:0; }
.vstep{
  position:relative; padding:7px 9px; background:#fff;
  border:1px solid var(--vline); border-radius:3px;
}
.vstep + .vstep{ margin-top:14px; }
.vstep + .vstep::before{
  content:""; position:absolute; left:17px; top:-15px; width:1px; height:14px;
  background:repeating-linear-gradient(180deg, rgba(2,43,114,.34) 0 3px, transparent 3px 6px);
}

/* --- horizontal track: badges ride a single rail, labels sit under
   them, so three steps fit a one-third-width tile without crushing --- */
.vtrack{ display:flex; align-items:flex-start; gap:0; padding:2px 2px 0; }
.vnode{
  flex:0 1 auto; min-width:0;
  flex-direction:column; align-items:center; gap:5px; text-align:center;
}
.vnlab{
  font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--vink);
  white-space:nowrap;
}
.vconn{
  flex:1 1 auto; min-width:12px; height:1px; position:relative;
  margin:8px 5px 0; background:rgba(2,43,114,.24); overflow:hidden;
}
.vconn::before{
  content:""; position:absolute; top:-1px; left:0; width:44%; height:3px;
  border-radius:2px; background:var(--accent); opacity:0;
}
.vig-note{
  margin-top:2px; font-size:11.5px; letter-spacing:.04em; color:var(--vmut);
}

/* --- report / file assembly --- */
.vdoc-ico{ flex:none; color:var(--accent); font-size:12px; }
.vsrc{ padding:1px 3px; }
.vsrc .vlab{ flex:0 0 66px; font-size:11.5px; }
.vrail{
  flex:1 1 auto; min-width:0; height:5px; border-radius:3px;
  background:rgba(2,43,114,.11); overflow:hidden;
}
.vbar{ display:block; height:100%; border-radius:3px; background:var(--accent); width:var(--w,60%); }
.vstamp{
  margin-left:auto; flex:none;
  font-size:11.5px; font-weight:700; letter-spacing:.06em;
  color:#fff; background:var(--navy); padding:2px 6px; border-radius:2px;
}

/* --- search / chat field --- */
.vfield{ gap:7px; }
/* a drawn magnifier reads far crisper at this size than a glyph does */
.vmag{
  flex:none; position:relative; width:11px; height:11px;
  border:1.4px solid var(--accent); border-radius:50%;
}
.vmag::after{
  content:""; position:absolute; right:-4px; bottom:-3px;
  width:5px; height:1.4px; border-radius:1px; background:var(--accent);
  transform:rotate(45deg);
}
/* secondary detail on a row — gives up its width before the main label does */
.vsub{
  flex:1 1 auto; min-width:0; text-align:right;
  font-size:11.5px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vrow:has(.vsub) .vlab{ flex:0 0 auto; }
.vfield{ overflow:hidden; }
.vtype{
  display:inline-block; overflow:hidden; white-space:nowrap;
  font-size:12px; font-weight:600; color:var(--vink);
  width:calc(var(--n) * 1ch);
}
.vcaret{
  flex:none; width:1.5px; height:12px; background:var(--accent); margin-left:-4px;
}

/* --- progress meters (unlabelled: no numbers anywhere) --- */
.vprow{ padding:2px 3px; }
.vprow .vlab{ flex:0 0 84px; font-size:11.5px; }
.vmeter{
  flex:1 1 auto; height:5px; border-radius:3px;
  background:rgba(2,43,114,.11); overflow:hidden; min-width:0;
}
.vmeter i{ display:block; height:100%; border-radius:3px; background:var(--accent); width:var(--w,60%); }

/* --- channel strip: the doors an enquiry can come through --- */
.vchan{ display:flex; flex-wrap:wrap; gap:5px; padding-top:1px; }
.vcpill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; letter-spacing:.03em; color:var(--vmut);
  background:#fff; border:1px solid var(--vline); border-radius:2px; padding:3px 7px;
}
.vcpill i{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; }

/* --- entrance: rows wipe up once, on scroll-into-view --- */
.vig .vr{
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:var(--vd,0s);
}
.vig.is-lit .vr{ opacity:1; transform:none; }

/* --- ambient loops: quiet, staggered, and only while on screen --- */
.vig .vloop,.vig .vloop::before,.vig .vloop i{ animation-play-state:paused; }
.vig.is-lit .vloop,.vig.is-lit .vloop::before,.vig.is-lit .vloop i{ animation-play-state:running; }
.vig.is-off .vloop,.vig.is-off .vloop::before,.vig.is-off .vloop i{ animation-play-state:paused; }

@keyframes vbreathe{ 0%,100%{ opacity:.35; transform:scale(.82); } 50%{ opacity:1; transform:scale(1); } }
@keyframes vpop{
  0%,3%{ opacity:0; transform:translateY(4px) scale(.94); }
  9%   { opacity:1; transform:translateY(0) scale(1.05); }
  13%  { opacity:1; transform:translateY(0) scale(1); }
  74%  { opacity:1; transform:none; }
  84%,100%{ opacity:0; transform:translateY(-3px) scale(.97); }
}
.vl-pop{ animation:vpop var(--cyc) var(--lo,0s) cubic-bezier(.22,1,.36,1) infinite both; }

@keyframes vfade{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.vl-blink{ animation:vfade 4.4s var(--lo,0s) ease-in-out infinite; }

@keyframes vtickfill{
  0%,5%   { background:#fff; border-color:#C6D3EA; transform:scale(.9); }
  11%     { background:var(--accent); border-color:var(--accent); transform:scale(1.18); }
  15%,76% { background:var(--accent); border-color:var(--accent); transform:scale(1); }
  86%,100%{ background:#fff; border-color:#C6D3EA; transform:scale(.9); }
}
@keyframes vtickmark{
  0%,7%   { opacity:0; transform:scale(.4); }
  13%,78% { opacity:1; transform:scale(1); }
  86%,100%{ opacity:0; transform:scale(.4); }
}
.vl-tick{ animation:vtickfill var(--cyc) var(--lo,0s) cubic-bezier(.22,1,.36,1) infinite both; }
.vl-tick::before{ animation:vtickmark var(--cyc) var(--lo,0s) cubic-bezier(.22,1,.36,1) infinite both; }

@keyframes vturn{ to{ transform:rotate(360deg); } }
.vl-spin::before{ animation:vturn 3.6s linear infinite; }

@keyframes vtogtrack{
  0%,8%   { background:#D6E0F2; }
  16%,74% { background:var(--accent); }
  84%,100%{ background:#D6E0F2; }
}
@keyframes vtogknob{
  0%,8%   { transform:translateX(0); }
  16%,74% { transform:translateX(11px); }
  84%,100%{ transform:translateX(0); }
}
.vl-tog{ animation:vtogtrack var(--cyc) var(--lo,0s) cubic-bezier(.22,1,.36,1) infinite both; }
.vl-tog i{ animation:vtogknob var(--cyc) var(--lo,0s) cubic-bezier(.22,1,.36,1) infinite both; }

@keyframes vgrow{
  0%,5%   { width:0; }
  24%,76% { width:var(--w); }
  90%,100%{ width:0; }
}
.vl-grow,.vl-fill{ animation:vgrow var(--cyc) var(--lo,0s) cubic-bezier(.22,1,.36,1) infinite both; }

@keyframes vflow{
  0%,6%   { opacity:0; transform:translateX(0); }
  12%     { opacity:1; }
  30%     { opacity:1; transform:translateX(150%); }
  34%,100%{ opacity:0; transform:translateX(150%); }
}
.vl-flow::before{ animation:vflow var(--cyc) var(--lo,0s) cubic-bezier(.4,0,.2,1) infinite both; }

@keyframes vslide{
  0%,5%   { opacity:0; transform:translateX(-5px); }
  14%,74% { opacity:1; transform:translateX(0); }
  84%,100%{ opacity:0; transform:translateX(-5px); }
}
.varrow{ flex:none; width:13px; height:9px; position:relative; }
.varrow::before{
  content:"→"; position:absolute; inset:0;
  font-size:12px; line-height:9px; color:var(--accent);
}
.vl-slide::before{ animation:vslide var(--cyc) var(--lo,0s) cubic-bezier(.22,1,.36,1) infinite both; }

@keyframes vstamp{
  0%,32%  { opacity:0; transform:scale(1.3) rotate(-4deg); }
  38%     { opacity:1; transform:scale(.96) rotate(0deg); }
  42%,80% { opacity:1; transform:scale(1) rotate(0deg); }
  90%,100%{ opacity:0; transform:scale(1.1); }
}
.vl-stamp{ animation:vstamp var(--cyc) var(--lo,0s) cubic-bezier(.22,1,.36,1) infinite both; }

/* the typing field: steps() needs a literal count, so each typing
   instance gets its own rule keyed to its character length */
@keyframes vtype26{
  0%,4%   { width:0; }
  36%,80% { width:26ch; }
  90%,100%{ width:0; }
}
.vig-search .vl-type{ animation:vtype26 var(--cyc) steps(26,end) infinite both; }
@keyframes vcaret{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
.vl-caret{ animation:vcaret 1.08s steps(1,end) infinite; }

/* ---------------------------------------------------------------
   2a. SYSTEMS, UP CLOSE — the dark masonry band.
   Deliberately the ONLY dark stop inside the focus run. The cards
   reuse every vignette primitive above; the whole inversion is done
   by re-pointing the three --v* tokens, so a fix to a badge or a
   toggle lands in both the light tiles and the dark grid at once.
--------------------------------------------------------------- */
.sec-lab{
  position:relative;
  background:
    radial-gradient(120% 80% at 78% 4%, rgba(31,59,255,.20) 0%, transparent 58%),
    linear-gradient(180deg, var(--navy-deep) 0%, #01143A 58%, var(--navy-deep) 100%);
  color:#EAF0FB;
}
.sec-lab .eyebrow{ color:var(--blueb); }
.sec-lab .eyebrow::before{ background:var(--accent-lit); }
.sec-lab h2{ color:#fff; }
.sec-lab .accent{ color:var(--accent-lit); }
.sec-lab .lede{ color:rgba(234,240,251,.74); }

/* CSS columns give real masonry — knotch's grid is ragged by design,
   and a row-based grid would stretch every card to its tallest sibling */
.lab-grid{
  margin-top:clamp(34px,4vw,58px);
  column-count:3; column-gap:clamp(14px,1.6vw,22px);
}
.lab-card{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 clamp(14px,1.6vw,22px);
  background:#021A46;
  border:1px solid rgba(138,166,216,.20);
  border-radius:10px;
  padding:clamp(14px,1.3vw,18px);
  display:flex; flex-direction:column; gap:16px;
  transition:border-color .35s ease, background .35s ease, transform .35s var(--ease-out);
}
.lab-card:hover{ border-color:rgba(31,59,255,.75); background:#03205A; }
.lab-copy{
  font-size:.98rem; line-height:1.58; color:rgba(234,240,251,.66);
  margin-top:auto;
}
.lab-copy b{ color:#fff; font-weight:800; letter-spacing:-.01em; }

/* --- the token flip: same primitives, dark ground --- */
.lab-card .vig{
  --vink:#EAF0FB;
  --vmut:#8AA6D8;
  --vline:rgba(138,166,216,.20);
  margin:0;
  background:#01102F;
  border-color:rgba(138,166,216,.22);
  box-shadow:none;
}
.lab-card:hover .vig{
  background:#01102F; border-color:rgba(31,59,255,.6);
  box-shadow:0 0 0 3px rgba(31,59,255,.16);
}
.lab-card .vig-bar{ background:rgba(138,166,216,.09); }
.lab-card .vig .vd:nth-child(1){ background:#8E5A5A; }
.lab-card .vig .vd:nth-child(2){ background:#8E7A4B; }
.lab-card .vig .vd:nth-child(3){ background:#547D5F; }
.lab-card .vrow,.lab-card .vstep,.lab-card .vdoc,
.lab-card .vfield,.lab-card .vtogrow,.lab-card .vask,.lab-card .vperson{
  background:rgba(255,255,255,.04);
  border-color:rgba(138,166,216,.16);
}
.lab-card .vchip-q{ background:rgba(138,166,216,.16); color:#C7D6EF; }
.lab-card .vchip-f{ background:transparent; color:var(--accent-lit); border-color:rgba(74,98,255,.5); }
.lab-card .vext{ background:rgba(138,166,216,.14); color:#B7C8E6; }
.lab-card .vbadge.is-done{ background:var(--accent-lit); border-color:var(--accent-lit); }
.lab-card .vbadge.is-wait{ background:transparent; border-color:#8E7A4B; }
.lab-card .vbadge.is-off{ background:transparent; border-color:rgba(138,166,216,.35); }
.lab-card .vbadge.is-off::before{ color:#7C8FB2; }
.lab-card .vstep + .vstep::before{
  background:repeating-linear-gradient(180deg, rgba(138,166,216,.4) 0 3px, transparent 3px 6px);
}
.lab-card .vmeter,.lab-card .vrail{ background:rgba(138,166,216,.16); }
.lab-card .vmag{ border-color:var(--accent-lit); }
.lab-card .vmag::after{ background:var(--accent-lit); }
.lab-card .vcaret{ background:var(--accent-lit); }
.lab-card .vig-note{ color:#8AA6D8; }
@keyframes vtickfill-d{
  0%,5%   { background:transparent; border-color:rgba(138,166,216,.35); transform:scale(.9); }
  11%     { background:var(--accent-lit); border-color:var(--accent-lit); transform:scale(1.18); }
  15%,76% { background:var(--accent-lit); border-color:var(--accent-lit); transform:scale(1); }
  86%,100%{ background:transparent; border-color:rgba(138,166,216,.35); transform:scale(.9); }
}
.lab-card .vl-tick{ animation-name:vtickfill-d; }
@keyframes vtogtrack-d{
  0%,8%   { background:rgba(138,166,216,.26); }
  16%,74% { background:var(--accent-lit); }
  84%,100%{ background:rgba(138,166,216,.26); }
}
.lab-card .vl-tog{ animation-name:vtogtrack-d; }

/* --- lab-only parts --- */
.vig-sect{
  display:flex; align-items:center; gap:8px;
  padding:6px 2px 2px;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--vmut);
}
.vchev{
  margin-left:auto; width:7px; height:7px; flex:none;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}
.vtogrow{
  display:flex; align-items:center; gap:8px;
  padding:6px 9px; border:1px solid var(--vline); border-radius:3px;
  font-size:12px;
}

/* roster: chips step in and out of line the way knotch's do */
.vroster{ gap:5px; }
.vperson{
  display:flex; align-items:center; gap:9px;
  padding:6px 9px; border:1px solid var(--vline); border-radius:4px;
}
.vp-in{ margin-left:16px; }
.vav{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font-size:9.5px; font-weight:800; letter-spacing:.02em;
  background:rgba(31,59,255,.3); color:#DCE5FF;
  border:1px solid rgba(138,166,216,.3);
}
.vav-sm{ width:18px; height:18px; font-size:8.5px; }
.vpi{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.vpi b{ font-size:11.5px; font-weight:700; color:var(--vink); white-space:nowrap; }
.vpi em{ font-size:11.5px; font-style:normal; color:var(--vmut);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vdot{ flex:none; margin-left:auto; width:7px; height:7px; border-radius:50%; }
.vdot.is-on{ background:#57C08A; }
.vdot.is-busy{ background:#D9A94E; }
@keyframes vdotbreathe{
  0%,100%{ opacity:.4; box-shadow:0 0 0 0 currentColor; }
  50%    { opacity:1;  box-shadow:0 0 0 3px rgba(87,192,138,.14); }
}
.vl-dot{ animation:vdotbreathe 4.6s var(--lo,0s) ease-in-out infinite; }

/* chart: unlabelled columns, easing to new heights on a slow cycle */
.vplot{
  position:relative;
  display:flex; align-items:flex-end; gap:5px;
  height:92px; padding:6px 3px 0;
  border-bottom:1px solid rgba(138,166,216,.22);
}
.vcol{
  flex:1 1 0; min-width:0; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, rgba(74,98,255,.92) 0%, rgba(31,59,255,.18) 100%);
  height:var(--h);
}
@keyframes vcol{
  0%,100%{ height:var(--h); }
  35%    { height:calc(var(--h) * .52); }
  70%    { height:calc(var(--h) * 1.12); }
}
.vl-col{ animation:vcol var(--cyc) var(--lo,0s) cubic-bezier(.4,0,.2,1) infinite; }

/* chat input */
.vask{
  display:flex; align-items:center; gap:6px;
  padding:7px 7px 7px 10px; border:1px solid var(--vline); border-radius:20px;
  overflow:hidden;
}
.vsend{
  flex:none; margin-left:auto; width:22px; height:22px; border-radius:50%;
  border:0; background:var(--accent-lit); display:grid; place-items:center; cursor:default;
}
.vsend i{
  width:0; height:0; margin-left:2px;
  border-left:6px solid #fff; border-top:4px solid transparent; border-bottom:4px solid transparent;
}
.vwho{ display:flex; align-items:center; gap:5px; font-size:11.5px; padding:0 2px; }
.vwho .vav-sm + .vav-sm{ margin-left:-7px; }
.vwho .vlab-mut{ margin-left:6px; }

/* waveform */
.vwave{
  display:flex; align-items:center; justify-content:space-between;
  gap:2px; height:54px; padding:0 2px;
}
.vwave i{
  flex:0 0 3px; border-radius:2px;
  background:var(--accent-lit); opacity:.8;
  height:var(--h);
  animation:vwave 2.6s var(--lo,0s) ease-in-out infinite alternate;
  animation-play-state:paused;
}
.vig.is-lit .vwave i{ animation-play-state:running; }
.vig.is-off .vwave i{ animation-play-state:paused; }
@keyframes vwave{
  from{ transform:scaleY(.4); opacity:.5; }
  to  { transform:scaleY(1); opacity:.9; }
}

/* the two typing fields in the dark grid, each keyed to its length */
@keyframes vtype22{ 0%,4%{ width:0; } 34%,80%{ width:22ch; } 90%,100%{ width:0; } }
.vt-desk{ animation:vtype22 var(--cyc) steps(22,end) infinite both; }
@keyframes vtype24{ 0%,4%{ width:0; } 34%,80%{ width:24ch; } 90%,100%{ width:0; } }
.vt-ask{ animation:vtype24 var(--cyc) steps(24,end) infinite both; }

@media (max-width:940px){ .lab-grid{ column-count:2; } }
@media (max-width:640px){ .lab-grid{ column-count:1; } }

/* On a phone the mock rows have no width to give away, so they stop
   ellipsising and wrap instead — a truncated status reads as a bug,
   a wrapped one just reads as a smaller screen. */
@media (max-width:620px){
  .vig .vrow,.vig .vstep,.vig .vtogrow,.vig .vperson{ flex-wrap:wrap; row-gap:6px; }
  .vig .vlab,.vig .vpi b,.vig .vpi em{ white-space:normal; overflow:visible; }
  .vsub{ flex:0 1 auto; text-align:left; white-space:normal; }
  .vig-title{ white-space:normal; }
}

@media (prefers-reduced-motion: reduce){
  .vig .vr{ opacity:1 !important; transform:none !important; transition:none; }
  .vig .vloop,.vig .vloop::before,.vig .vloop i,.vig-live::before,
  .vwave i,.vt-desk,.vt-ask{ animation:none !important; }
}

@media (max-width:960px){
  .fold{ grid-template-columns:repeat(2,1fr); }
  .tile-wide{ grid-column:span 2; grid-template-columns:1fr; grid-template-rows:auto auto auto auto; }
  .tile-wide h3,.tile-wide .tile-body{ grid-column:1; grid-row:auto; }
  /* without this the vignette keeps asking for a second column and the
     one-column wide tile silently grows an implicit one, crushing the h3 */
  .tile-wide .vig{ grid-column:1; grid-row:auto; margin-top:0; }
  .tile-wide .tile-replaces{ grid-column:1; grid-row:auto; margin-top:18px; }
  .tile-row{ grid-template-columns:1fr; }
  .tile-row .tile-eyebrow,.tile-row h3,.tile-row .tile-replaces{ grid-column:1; grid-row:auto; }
  .tile-row .tile-replaces{ padding-top:18px; }
}
@media (max-width:620px){
  .fold{ grid-template-columns:1fr; }
  .tile-wide{ grid-column:span 1; }
  .tile{ min-height:0; }
}

/* ============ 3. PROCESS — varied stick figures ============ */
.fig-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,24px);
}
.fig-card{
  position:relative;
  background:var(--lite);
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(24px,2.6vw,34px);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(30px) scale(.97);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color .3s ease, background .3s ease;
  transition-delay:var(--d,0s);
}
.fig-card.is-in{ opacity:1; transform:none; }
.fig-card:hover{ border-color:var(--accent); background:#fff; }
.fig-no{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em; font-weight:700;
  color:var(--accent); margin-bottom:14px;
}
.fig-art{ height:136px; display:grid; place-items:center; margin-bottom:18px; }
.fig-art svg{
  width:116px; height:auto; overflow:visible;
  fill:none;
  stroke:var(--navy); stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.fig-art .pop{ stroke:var(--accent); stroke-width:3; }
.fig-art .fig-ground{ stroke:var(--blueb); stroke-width:2.4; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.1s var(--ease-out) .3s; }
.fig-card.is-in .fig-art .fig-ground{ stroke-dashoffset:0; }
.fig-card h3{
  font-weight:800; font-size:1.3rem; letter-spacing:-.032em; margin-bottom:10px;
}
.fig-card p{ color:var(--ink-soft); font-size:.96rem; line-height:1.6; }
@media (max-width:940px){ .fig-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .fig-grid{ grid-template-columns:1fr; } }

/* ============ 4. WHY KAIAK — rotating cards ============ */
@property --spin{ syntax:'<angle>'; inherits:true; initial-value:0deg; }
.sec-why{ background:var(--lite); overflow:hidden; }
.why-layout{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(28px,4vw,56px); align-items:center;
}
.why-copy h2{
  margin-top:16px;
  font-weight:800; font-size:clamp(2.1rem,1.1rem + 3.6vw,3.9rem);
  letter-spacing:-.04em; line-height:.94; max-width:12ch;
}
.why-copy .lede{
  margin-top:22px; max-width:46ch; color:var(--ink-soft);
  font-size:clamp(1rem,.94rem + .3vw,1.1rem); line-height:1.62;
}
.why-cta{ margin-top:30px; }
.orbit-stage{
  position:relative; height:clamp(440px,42vw,580px);
  display:flex; align-items:center; justify-content:center;
  perspective:1200px;
}
.orb-core{
  position:absolute; width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #6E85FF, var(--accent) 55%, var(--navy) 100%);
  box-shadow:0 14px 34px -12px rgba(31,59,255,.55), 0 0 0 10px rgba(31,59,255,.07), 0 0 0 22px rgba(31,59,255,.04);
}
.orbit-ring{ position:absolute; inset:0; transform:rotate(var(--spin,0deg)); }
.orbit-ring.idle-spin{ animation:ring-spin 52s linear infinite; }
.orbit-ring.idle-spin:hover{ animation-play-state:paused; }
@keyframes ring-spin{ from{ --spin:0deg; } to{ --spin:360deg; } }
.orbit-card{
  position:absolute; top:50%; left:50%;
  /* six cards on a hexagon: adjacent spacing equals the radius, so the card
     diagonal has to stay under it or neighbours collide */
  width:150px;
  min-height:116px;
  transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(calc(var(--spin,0deg) * -1));
  border-radius:4px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 4px 8px rgba(2,43,114,.05), 0 24px 44px -26px rgba(2,43,114,.5);
  padding:15px 16px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.orbit-card:hover{ z-index:5; border-color:var(--accent); box-shadow:0 4px 8px rgba(2,43,114,.06), 0 30px 54px -22px rgba(31,59,255,.5); }
.orbit-card .dot{ display:block; width:9px; height:9px; border-radius:50%; background:var(--accent); margin-bottom:10px; box-shadow:0 0 0 4px rgba(31,59,255,.14); }
.orbit-card b{ display:block; font-family:var(--font-display); font-weight:800; font-size:.94rem; letter-spacing:-.02em; line-height:1.16; margin-bottom:5px; color:var(--navy); }
.orbit-card span{ font-size:.78rem; line-height:1.4; color:var(--mut); }
@media (max-width:1000px){
  .why-layout{ grid-template-columns:1fr; gap:20px; }
  .orbit-stage{ height:520px; }
}
@media (max-width:620px){
  .orbit-stage{ height:auto; padding:8px 0; perspective:none; }
  .orbit-ring{ position:static; transform:none !important; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .orbit-card{ position:static; width:auto; transform:none !important; }
  .orb-core{ display:none; }
}

/* ============ 5. HORIZONTAL — things already built ============ */
.hscroll{
  position:relative;
  background:var(--navy-deep);
  color:var(--on-navy);
  overflow:hidden;
}
.hscroll-pin{ height:100vh; min-height:560px; display:flex; align-items:center; }
.htrack{ display:flex; gap:22px; padding:0 clamp(24px,5vw,64px); will-change:transform; }
.hcard{
  flex:0 0 clamp(290px,40vw,450px);
  background:rgba(234,240,251,.055);
  border:1px solid rgba(234,240,251,.18);
  border-radius:4px;
  padding:34px;
  /* Was space-between at a 66vh floor stretched to the tallest sibling (the
     borderless intro card, whose big headline + placeholder box needs far
     more room than a proof line): that produced a constant ~200px void
     below PROOF on every real card. align-self:flex-start takes each card
     out of that stretch entirely, so intro can stay tall without dragging
     the bordered cards up to match it; min-height is now a real content-fit
     floor (tallest of the three capability cards + breathing room) instead
     of a no-op under the old stretch. */
  display:flex; flex-direction:column; justify-content:flex-start; gap:24px;
  align-self:flex-start; min-height:460px;
  transition:background .3s ease, border-color .3s ease;
}
.hcard:hover{ background:rgba(234,240,251,.09); border-color:var(--accent); }
.hcard .hn{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--blueb);
  display:block; margin-bottom:16px;
}
.hcard h3{
  font-weight:800; font-size:clamp(1.35rem,1rem + 1.1vw,1.95rem);
  letter-spacing:-.032em; line-height:1.08; color:var(--on-navy); margin-bottom:14px;
}
.hcard p{ color:var(--on-navy-mut); font-size:.98rem; line-height:1.62; }
.hlbl{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blueb);
}
.hcard-intro{ background:none; border:none; padding-left:0; justify-content:center; }
.hcard-intro h2{
  font-weight:800; font-size:clamp(2rem,1.2rem + 3vw,3.5rem);
  letter-spacing:-.042em; line-height:.94; color:var(--on-navy);
  margin:16px 0 18px; max-width:12ch;
}
.hcard-intro .accent{ color:var(--accent-lit); }
.hcard-intro p{ max-width:32ch; }
.hcard-you{ background:rgba(31,59,255,.18); border-color:var(--accent); }
.hprog{
  position:absolute; bottom:36px; left:clamp(24px,5vw,64px); right:clamp(24px,5vw,64px);
  height:2px; background:rgba(234,240,251,.16);
}
.hprog i{ display:block; height:100%; width:0; background:var(--accent-lit); }
@media (max-width:760px){
  .hscroll-pin{ height:auto; min-height:0; padding:clamp(56px,9vw,80px) 0; }
  .htrack{ flex-direction:column; gap:16px; }
  .hcard{ flex:none; min-height:0; }
  .hprog{ display:none; }
}

/* ============ 6. NAVY BAND — comparison + envelope ============ */
.band{ background:var(--navy); color:var(--on-navy); overflow:hidden; }
.band .section-head h2,.band h2,.band h3{ color:var(--on-navy); }
.band .section-head h2 .accent,.band h2 .accent{ color:var(--accent-lit); }
.band .section-head .lede{ color:var(--on-navy-mut); max-width:46ch; }
.band .eyebrow{ color:var(--blueb); }

.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,30px); }
.card-pop{ opacity:0; }
.compare-col{
  border-radius:4px;
  padding:clamp(26px,3vw,38px);
  border:1.5px solid rgba(234,240,251,.2);
  background:rgba(234,240,251,.05);
}
.compare-col.is-kaiak{
  background:#fff; color:var(--ink);
  border-color:var(--accent);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.6);
}
.compare-col.is-kaiak h3{ color:var(--navy); }
.compare-col-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  margin-bottom:20px; padding-bottom:18px;
  border-bottom:1px solid rgba(234,240,251,.2);
}
.compare-col.is-kaiak .compare-col-head{ border-bottom-color:var(--line); }
.compare-col-head h3{ font-weight:800; font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem); letter-spacing:-.035em; line-height:1.02; }
.timing-badge{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; font-weight:700;
  padding:7px 12px; border-radius:2px; white-space:nowrap;
  background:rgba(234,240,251,.1); color:var(--on-navy-mut);
  border:1px solid rgba(234,240,251,.2);
}
.compare-col.is-kaiak .timing-badge{ background:var(--accent); border-color:var(--accent); color:#fff; }
.compare-note{ font-size:.96rem; line-height:1.6; color:var(--on-navy-mut); margin-bottom:24px; max-width:40ch; }
.compare-col.is-kaiak .compare-note{ color:var(--ink-soft); }
.stage-list{ display:flex; flex-direction:column; gap:9px; }
.stage{
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; border-radius:3px;
  background:rgba(234,240,251,.07); border:1px solid rgba(234,240,251,.16);
}
.compare-col.is-kaiak .stage{ background:var(--lite); border-color:var(--line); }
.stage .num{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  width:25px; height:25px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(234,240,251,.14); color:var(--on-navy);
}
.compare-col.is-kaiak .stage .num{ background:var(--accent); color:#fff; }
.stage .label{ font-size:.95rem; font-weight:600; color:var(--on-navy); }
.compare-col.is-kaiak .stage .label{ color:var(--ink); }

.envelope{
  margin-top:clamp(36px,4.5vw,56px);
  padding-top:clamp(28px,3.4vw,40px);
  border-top:1px solid rgba(234,240,251,.2);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,4vw,56px); align-items:center;
}
.envelope-figure{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.045em; line-height:1;
  font-size:clamp(1.6rem,.9rem + 2.2vw,3rem);
  /* was .5 alpha, which lands at ~3.4:1 on the navy band and only scrapes
     large-text AA. At .72 the blend is #A7B7D4 → 6.5:1 on #022B72, so the
     "before" figure is properly legible while still reading as the quieter
     half of the pair. */
  color:rgba(234,240,251,.72);
  display:flex; align-items:center; white-space:nowrap; gap:.26em;
  font-variant-numeric:tabular-nums;
}
.envelope-figure .envelope-arrow{ color:var(--accent-lit); }
.envelope-figure .is-kaiak-fig{ color:var(--on-navy); }
.envelope-note p{ font-size:clamp(.95rem,.9rem + .2vw,1.02rem); line-height:1.65; color:var(--on-navy-mut); max-width:48ch; }
@media (max-width:860px){
  .compare-grid{ grid-template-columns:1fr; }
  .envelope{ grid-template-columns:1fr; align-items:start; gap:18px; }
}

/* ============ 7. INSTRUMENTS ============ */
.gauges{ border:1.5px solid var(--line-2); border-radius:4px; background:var(--lite); padding:clamp(26px,3vw,40px); }
.gauges-head{
  display:grid; grid-template-columns:190px minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  padding-bottom:clamp(24px,3vw,32px); margin-bottom:clamp(24px,3vw,34px);
  border-bottom:1px solid var(--line); align-items:start;
}
.gauges-label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--accent);
}
.gauges-head p{ color:var(--ink-soft); font-size:1.02rem; line-height:1.62; max-width:62ch; }
.gauge-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px); }
.gauge{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:4px;
  padding:clamp(22px,2.6vw,30px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.gauge-dial{ position:relative; width:min(200px,100%); }
.gauge-dial svg{ width:100%; height:auto; }
.gauge-ring{ fill:none; stroke:var(--line-2); stroke-width:3; stroke-dasharray:3 11; stroke-linecap:round; }
.gauge-ring-inner{ fill:none; stroke:var(--line); stroke-width:1.5; stroke-dasharray:1 9; stroke-linecap:round; }
.gauge-tick{ stroke:var(--line-2); stroke-width:2.5; stroke-linecap:round; }
.gauge-tick.is-top{ stroke:var(--accent); stroke-width:3.5; }
.gauge-slot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em; line-height:1.45;
  color:var(--ink-soft); white-space:nowrap;
}
.gauge figcaption{ margin-top:20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.gauge-status{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--accent); border:1px solid var(--accent); border-radius:2px;
  padding:6px 13px; background:var(--accent-soft);
}
.gauge-what{ font-size:.95rem; line-height:1.5; color:var(--ink-soft); max-width:30ch; }
@media (max-width:720px){
  .gauges-head{ grid-template-columns:1fr; gap:12px; }
  .gauge-grid{ grid-template-columns:1fr; }
}

/* ============ 8. STAYED A NOTE ============
   Deliberately LIGHT. It used to be a second dark band directly after the
   comparison band, which both pushed the page over its dark budget and put
   two identical-feeling sections back to back. */
.sec-note{ background:var(--lite); }
.sec-note .quiet-copy h2{ color:var(--navy); }
.sec-note .quiet-copy h2 .accent{ color:var(--accent); }
.sec-note .quiet-copy p{ color:var(--ink-soft); }
.sec-note .note-paper{ box-shadow:0 26px 60px -30px rgba(2,43,114,.45); border-color:var(--line-2); }
.sec-note .note-card figcaption{ color:var(--mut); }
.quiet-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.quiet-copy h2{
  font-weight:800; font-size:clamp(2rem,1.2rem + 3vw,3.5rem);
  letter-spacing:-.04em; line-height:.95; max-width:14ch; margin-bottom:22px;
}
.quiet-copy p{ color:var(--on-navy-mut); font-size:clamp(1rem,.94rem + .25vw,1.1rem); line-height:1.68; max-width:50ch; }
.note-card{ margin:0; opacity:0; transform:translateY(34px) rotate(-4deg); transition:opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.note-card.is-in{ opacity:1; transform:translateY(0) rotate(0); }
.note-paper{
  background:#fff; color:var(--ink);
  border-radius:2px 12px 2px 10px;
  padding:clamp(24px,2.8vw,34px);
  transform:rotate(-1.15deg);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.7);
  border:1px solid var(--line);
  background-image:repeating-linear-gradient(to bottom,transparent 0 30px,rgba(2,43,114,.07) 30px 31px);
}
.note-meta{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--mut); display:block; margin-bottom:14px;
}
.note-paper h3{ font-weight:800; font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem); letter-spacing:-.03em; line-height:1.08; margin-bottom:12px; max-width:18ch; color:var(--navy); }
.note-paper p{ font-size:.97rem; line-height:1.64; color:var(--ink-soft); max-width:40ch; }
.note-stamp{
  display:inline-block; margin-top:22px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--accent); border:1.5px solid var(--accent); border-radius:2px;
  padding:7px 12px; transform:rotate(-2.4deg);
}
.note-card figcaption{ margin-top:26px; font-size:.92rem; line-height:1.55; color:var(--on-navy-mut); max-width:40ch; }
@media (max-width:900px){ .quiet-grid{ grid-template-columns:1fr; gap:36px; } }

/* ============ FULL-BLEED BREAKOUT ============
   The rail owns a real grid column, so a section inside <main> stops short
   of the left edge. The two sections that must run edge-to-edge break out
   of that column, and the rail politely gets out of the way while one of
   them holds the viewport. */
.fullbleed{
  margin-left:calc(-1 * var(--rail));
  width:calc(100% + var(--rail));
  /* the rail is a sticky z-40 column; a band that runs edge-to-edge has to
     paint OVER it, otherwise the rail's absolutely-positioned foot note sits
     on top of the photograph for the whole half-second of the yield fade */
  position:relative; z-index:41;
}
.rail-desktop{ transition:opacity .34s var(--ease-out), transform .34s var(--ease-out); }
body.rail-hidden .rail-desktop{ opacity:0; transform:translateX(-18px); pointer-events:none; }
/* the two absolutely-positioned rail captions leave first and fastest — they
   are the parts that reach the band's edge */
.rail-brand,.rail-foot{ transition:opacity .16s linear; }
body.rail-hidden .rail-brand,body.rail-hidden .rail-foot{ opacity:0; transition-duration:.1s; }
@media (max-width:1080px){ .fullbleed{ margin-left:0; width:100%; } }

/* ============ PHOTO BAND (full-bleed) ============ */
.photoband{
  position:relative;
  min-height:clamp(460px,74vh,760px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--navy-deep);
  border-top:0;
}
.photoband-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 46%;
  transform:scale(1.08);
  will-change:transform;
}
/* a flat navy multiply pulls the photo's teal onto the page palette —
   a colour correction, not a wash */
.photoband::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--navy);
  mix-blend-mode:multiply;
  opacity:.24;
  pointer-events:none;
}
/* a scrim only where the type sits — no full-frame wash */
.photoband::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(1,27,75,.86) 0%, rgba(1,27,75,.5) 26%, rgba(1,27,75,.06) 54%, transparent 74%);
  pointer-events:none;
}
.photoband .wrap{ position:relative; z-index:2; padding-bottom:clamp(44px,6vw,80px); padding-top:clamp(120px,20vw,240px); width:100%; }
.photoband h2{
  font-weight:800;
  font-size:clamp(2.6rem,1rem + 8.4vw,8rem);
  letter-spacing:-.05em; line-height:.88;
  color:#fff;
  max-width:11ch;
}
.photoband .eyebrow{ color:#BFD0EE; margin-bottom:20px; }
.photoband .eyebrow::before{ background:var(--accent-lit); }
.photoband-foot{
  margin-top:clamp(20px,2.4vw,30px);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
}
.photoband-foot p{ color:rgba(255,255,255,.82); font-size:clamp(1rem,.94rem + .3vw,1.14rem); line-height:1.6; max-width:44ch; }
.photoband-credit{
  position:absolute; right:var(--edge); bottom:clamp(16px,2.4vw,26px); z-index:3;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  text-decoration:none;
}
.photoband-credit:hover{ color:#fff; }
@media (max-width:700px){
  .photoband{ min-height:520px; }
  .photoband h2{ font-size:clamp(2.4rem,10vw,3.4rem); max-width:14ch; }
  .photoband-credit{ display:none; }
}

/* ============ 9. CLOSER ============ */
.closer{ background:var(--paper); text-align:center; padding:clamp(80px,11vw,150px) 0 clamp(70px,9vw,120px); }
.closer-inner{ max-width:820px; margin:0 auto; }
.closer .eyebrow{ margin-bottom:24px; }
.closer h2{
  font-weight:800; letter-spacing:-.045em; line-height:.95;
  font-size:clamp(2.4rem,1.2rem + 4.6vw,4.8rem);
  max-width:15ch; margin:0 auto;
}
/* the colour-shifting headline word, lifted from 09-reel-rich — parked on the
   closing line rather than the hero, where it would fight the waterline clip */
.closer h2 .grad{
  background:linear-gradient(100deg,var(--accent),#5C7BFF 34%,var(--navy) 62%,var(--accent) 100%);
  background-size:280% 280%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:gradflow 9s ease-in-out infinite;
}
@keyframes gradflow{ 50%{ background-position:100% 50%; } }
.closer-sub{
  margin:clamp(20px,2.6vw,30px) auto 0; max-width:54ch;
  color:var(--ink-soft); font-size:clamp(1rem,.94rem + .35vw,1.16rem); line-height:1.65;
}
.closer-cta{ margin-top:clamp(28px,3.6vw,40px); }

/* ============ FOOTER ============ */
footer{ border-top:1px solid var(--line); background:var(--lite); padding:clamp(44px,5.5vw,66px) 0 clamp(26px,3.4vw,36px); }
.footer-top{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
  gap:32px 48px; padding-bottom:clamp(28px,3.6vw,40px); margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.footer-brand{ max-width:34ch; }
.footer-brand p{ margin-top:16px; color:var(--ink-soft); font-size:.98rem; line-height:1.58; }
.footer-mail{
  display:inline-block; margin-top:14px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.03em;
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:2px;
}
.footer-mail:hover{ border-bottom-color:var(--accent); }
.footer-links{ display:flex; gap:clamp(32px,6vw,80px); flex-wrap:wrap; }
.footer-col h3{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-bottom:14px; font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ text-decoration:none; font-size:.94rem; color:var(--ink-soft); }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 32px;
  font-family:var(--font-mono); font-size:11px; line-height:1.6; color:var(--mut); letter-spacing:.02em;
}
.footer-bottom .footnote{ max-width:62ch; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal-up,.tile,.fig-card,.note-card,.card-pop{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  .grain,.orbit-ring.idle-spin,.closer h2 .grad{ animation:none; }
}

/* ============================================================
   ADDED FOR MASTER2 — belief list, "what success looks like",
   the docked-chip zoom lifted from v9/signal, capability cards,
   resting card tints, and the Are-you-building closer.
   ============================================================ */

/* ---- 1. RESTING CARD TINTS (signal treatment) --------------------
   Signal's cards sit in hues distinct from the ground and swap boldly
   on hover. The gapless grid already swapped; now it rests in tints
   too, so the fold reads as a mosaic rather than a sheet of white. */
.tile[data-tone="navy"]{ background:#E4ECFA; }
.tile[data-tone="blue"]{ background:var(--accent-soft); }
.tile[data-tone="pale"]{ background:var(--paper); }
.tile[data-tone="deep"]{ background:#CBD9F2; }
.tile[data-tone="pale"]:hover{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; }
.tile[data-tone="pale"]:hover .tile-body{ color:rgba(234,240,251,.78); }
.tile[data-tone="pale"]:hover .tile-eyebrow,
.tile[data-tone="pale"]:hover .tile-replaces{ color:rgba(234,240,251,.72); }
.tile[data-tone="pale"]:hover .tile-replaces::before{ background:rgba(234,240,251,.45); }
.tile[data-tone="blue"]:hover .tile-body{ color:rgba(234,240,251,.82); }
.tile[data-tone="deep"]:hover .tile-body{ color:rgba(234,240,251,.78); }
/* claymorphism, restrained: a 1px top light-line and a soft inner
   floor, so each tile reads as a slab pressed out of the sheet rather
   than a rectangle drawn on it. No blur blobs, no gradients. */
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -14px 22px -18px rgba(2,43,114,.42);
  transition:box-shadow .3s ease;
}
.tile:hover::after{ box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -18px 30px -20px rgba(0,0,0,.5); }
.tile-body{ max-width:44ch; }

/* ---- 2. WE BELIEVE IN… ------------------------------------------ */
.sec-beliefs{ background:var(--paper); }
.beliefs-layout{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,88px); align-items:center;
}
.beliefs-head h2{
  font-weight:800; font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem);
  letter-spacing:-.042em; line-height:.96; margin:14px 0 18px; max-width:13ch;
}
.beliefs-head .lede{ max-width:36ch; }
.belief-list{ display:flex; flex-wrap:wrap; gap:14px; padding-top:10px; }
.belief{
  display:block; opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:var(--d,0s);
}
.belief.is-in{ opacity:1; transform:none; }
.belief span{
  display:inline-block;
  padding:14px 24px 15px;
  border-radius:999px;
  background:var(--lite-2);
  color:var(--navy);
  font-weight:700; letter-spacing:-.024em;
  font-size:clamp(1.02rem,.86rem + .62vw,1.42rem);
  line-height:1.14;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -2px 6px -2px rgba(2,43,114,.22),
             0 10px 22px -14px rgba(2,43,114,.45);
  transition:background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease-out), box-shadow .28s var(--ease);
}
.belief:nth-child(2n) span{ background:var(--accent-soft); }
.belief:nth-child(3n) span{ background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line), 0 10px 22px -14px rgba(2,43,114,.32); }
.belief span:hover{
  background:var(--accent); color:#fff; transform:translateY(-3px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28), 0 16px 30px -14px rgba(31,59,255,.6);
}
.belief:nth-child(4n) span:hover{ background:var(--navy); }
@media (max-width:860px){ .beliefs-layout{ grid-template-columns:1fr; } }

/* ---- 3. CAPABILITY CARDS (horizontal work track) ----------------- */
.hcard[data-tone="blue"]{ background:rgba(31,59,255,.24); border-color:rgba(31,59,255,.55); }
.hcard[data-tone="navy"]{ background:rgba(138,166,216,.2); border-color:rgba(138,166,216,.4); }
.hcard[data-tone="deep"]{ background:rgba(234,240,251,.1); border-color:rgba(234,240,251,.26); }
.hcard[data-tone="blue"]:hover{ background:var(--accent); border-color:var(--accent); }
.hcard[data-tone="navy"]:hover{ background:var(--navy-2); border-color:var(--navy-2); }
.hcard[data-tone="deep"]:hover{ background:var(--blueb); border-color:var(--blueb); }
.hcard[data-tone]:hover .hn,
.hcard[data-tone]:hover .hproof-lbl{ color:rgba(255,255,255,.86); }
.hcard[data-tone]:hover p{ color:rgba(255,255,255,.9); }
/* the pale hover ground is restated on the type itself so foreground and
   background always resolve as a pair; the colour is identical to the card's
   own hover ground and transitions on the same curve, so nothing shows */
.hcard h3,.hcard p,.hcard .hn{ background-color:transparent; transition:color .3s ease, background-color .3s ease; }
.hcard[data-tone="deep"]:hover h3,
.hcard[data-tone="deep"]:hover p{ color:var(--navy-deep); background-color:var(--blueb); }
.hcard[data-tone="deep"]:hover .hn,
.hcard[data-tone="deep"]:hover .hproof-lbl{ color:rgba(1,27,75,.78); background-color:var(--blueb); }
.hproof{
  border-top:1px solid rgba(234,240,251,.22);
  padding-top:16px;
  font-size:.95rem; line-height:1.5; color:var(--on-navy);
  font-weight:500;
}
.hproof-lbl{
  display:block; margin-bottom:7px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--accent-lit);
}
.hcard-slot{
  background:transparent;
  border:1.5px dashed rgba(234,240,251,.34);
  /* shorter natural content (placeholder line / a single CTA button) than
     the three capability cards, so anchor the second block to the card's
     own bottom edge instead of leaving it stranded under a trailing void. */
  justify-content:space-between;
}
.hcard-slot h3{ color:rgba(234,240,251,.74); }
.hcard-slot p{ color:rgba(234,240,251,.52); }
.hcard-slot .hn{ color:rgba(138,166,216,.8); }
.hcard-slot:hover{ background:rgba(234,240,251,.05); border-color:var(--accent-lit); }
.hproof-empty{ color:rgba(138,166,216,.72); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; }
.hcard-you{ background:rgba(31,59,255,.16); border-style:solid; border-color:var(--accent); }
.hcard-you h3{ color:var(--on-navy); }
.hlbl-src{ display:block; margin-top:22px; color:rgba(138,166,216,.66); }

/* ---- 4. WHAT SUCCESS LOOKS LIKE --------------------------------- */
.sec-success{ background:var(--lite); }
.success-head{
  font-weight:800; letter-spacing:-.04em; line-height:1.02;
  font-size:clamp(1.85rem,1.1rem + 3vw,3.5rem);
  max-width:22ch; margin:16px 0 clamp(44px,5vw,72px);
  color:var(--navy);
}
.success-head .fill-word{ color:rgba(2,43,114,.19); transition:color .2s linear; }
.outcome-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
.outcome-card{
  position:relative; overflow:hidden;
  border-radius:18px;
  padding:clamp(24px,2.4vw,32px);
  min-height:clamp(180px,17vw,230px);
  display:flex; flex-direction:column; justify-content:space-between; gap:18px;
  color:#fff;
  opacity:0;
  will-change:transform,opacity;
  transform-origin:50% 100%;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3), inset 0 -30px 40px -34px rgba(0,0,0,.7),
             0 26px 52px -30px rgba(2,43,114,.62);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.outcome-card[data-pop="accent"]{ background:var(--accent); }
.outcome-card[data-pop="navy"]{ background:var(--navy); }
.outcome-card[data-pop="deep"]{ background:var(--navy-deep); }
.outcome-card::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:.4; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(circle at 100% 0%, #000 0%, transparent 62%);
          mask-image:radial-gradient(circle at 100% 0%, #000 0%, transparent 62%);
}
.outcome-card:hover{ transform:translateY(-5px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 34px 62px -28px rgba(2,43,114,.7); }
.outcome-card p{
  position:relative; z-index:1;
  font-weight:700; letter-spacing:-.03em; line-height:1.16;
  font-size:clamp(1.12rem,.92rem + .95vw,1.5rem); max-width:18ch;
}
.outcome-mark{
  position:relative; z-index:1; display:block;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -4px 8px -4px rgba(0,0,0,.55);
}
.outcome-card[data-pop="accent"] .outcome-mark{ background:rgba(255,255,255,.28); }
@media (max-width:900px){ .outcome-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .outcome-grid{ grid-template-columns:1fr; } }

/* ---- 5. THE ZOOM — docked chip expands to full bleed -------------
   Mechanic lifted from v9/signal (setupExpand): a pinned, scrubbed
   timeline grows a chip-sized canvas from 1.5em x 0.86em to
   100vw x 100vh while the lede fades out and the headline fades in.
   Recoloured onto the blue system. */
.expand-pin{ position:relative; height:100vh; min-height:540px; overflow:hidden; background:var(--paper); }
/* overflow:hidden matters: the 140%-wide .grain inside would otherwise
   project past the viewport and widen the mobile layout viewport, pushing
   the fixed nav (and its burger) off the right edge of real phones. */
.expand-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.expand-bg .grain{ opacity:.12; }
.expand-inner{ position:relative; height:100%; display:flex; align-items:center; justify-content:center; padding:0 var(--edge); }
.expand-lede{
  position:relative; z-index:3; max-width:21ch; text-align:center;
  font-weight:800; letter-spacing:-.04em; line-height:1.08;
  font-size:clamp(1.7rem,1rem + 3.1vw,3.2rem);
  color:var(--navy);
}
.expand-chip{
  display:inline-block; vertical-align:baseline;
  width:1.5em; height:.86em; margin:0 .1em; border-radius:.14em;
  background:linear-gradient(140deg,var(--accent) 0%,var(--navy) 62%,var(--navy-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 6px 14px -8px rgba(2,43,114,.7);
}
.expand-canvas{
  position:absolute; z-index:2; left:50%; top:50%;
  width:1.5em; height:.86em; transform:translate(-50%,-50%);
  border-radius:.14em; overflow:hidden; opacity:0;
  background:linear-gradient(140deg,var(--accent) 0%,var(--navy) 58%,var(--navy-deep) 100%);
  box-shadow:0 60px 140px -30px rgba(2,43,114,.6), inset 0 0 0 1px rgba(255,255,255,.07);
}
.expand-canvas::before{
  content:""; position:absolute; inset:0; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.expand-canvas::after{
  content:""; position:absolute; inset:0; opacity:.75;
  background-image:
    radial-gradient(rgba(255,255,255,.5) 1.2px, transparent 1.8px),
    linear-gradient(to right, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:28px 28px, 112px 112px, 112px 112px;
  -webkit-mask-image:radial-gradient(circle at 76% 14%, #000 0%, transparent 78%);
          mask-image:radial-gradient(circle at 76% 14%, #000 0%, transparent 78%);
}
.expand-head{
  position:absolute; inset:0; z-index:4;
  display:flex; align-items:center; justify-content:center; text-align:center;
  /* it is an inset:0 overlay, so it was what the nav's elementFromPoint probe
     kept hitting instead of the canvas underneath it */
  pointer-events:none;
  padding:0 var(--edge); opacity:0;
  font-weight:800; letter-spacing:-.045em; line-height:1.02;
  font-size:clamp(2rem,1rem + 5.2vw,4.5rem);
  color:#FFFFFF;
  text-shadow:0 20px 44px rgba(1,27,75,.45);
}

/* ---- 6. ARE YOU BUILDING? — closer warmth ----------------------- */
.closer-warm{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px;
  margin:30px auto 34px; max-width:44rem;
}
.closer-warm li{
  padding:10px 20px 11px; border-radius:999px;
  background:var(--lite-2);
  color:var(--navy);
  font-weight:700; font-size:.96rem; letter-spacing:-.016em;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -2px 6px -2px rgba(2,43,114,.2),
             0 8px 18px -12px rgba(2,43,114,.4);
}
.closer-warm li:nth-child(2n){ background:var(--accent-soft); }
.closer-mail{
  display:block; margin-top:22px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.closer-mail:hover{ color:var(--navy); border-bottom-color:var(--navy); }

@media (prefers-reduced-motion:reduce){
  .expand-pin{ height:auto; min-height:0; padding:clamp(56px,8vw,100px) 0; }
  .expand-inner{ position:relative; flex-direction:column; gap:30px; height:auto; }
  .expand-canvas{ position:relative; left:auto; top:auto; transform:none; width:min(80vw,440px); height:230px; opacity:1; border-radius:18px; }
  .expand-head{ position:relative; opacity:1; padding:0; color:var(--navy); text-shadow:none; }
  .outcome-card,.belief{ opacity:1 !important; transform:none !important; }
}
@media (max-width:760px){
  .expand-lede{ max-width:16ch; }
  .belief span{ padding:11px 18px 12px; }
}

/* ============================================================
   FIX ROUND — added for master3
   ============================================================ */

/* ---- section heads that now carry an eyebrow above the h2 ---- */
.section-head > div{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:16px; min-width:0;
}
.quiet-copy .eyebrow{ margin-bottom:18px; }

/* ---- Work intro: the market stat is an OWNED gap, framed the way the
        instruments gauges frame theirs, rather than a naked bracket ---- */
.src-slot{
  display:block; margin-top:24px; max-width:32ch;
  border:1.5px dashed rgba(234,240,251,.3);
  border-radius:4px;
  padding:14px 16px 15px;
}
.src-status{
  display:inline-block; margin-bottom:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700;
  color:var(--accent-lit);
  border:1px solid var(--accent-lit); border-radius:2px;
  padding:5px 10px;
}
.src-what{
  display:block;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; line-height:1.5;
  color:rgba(138,166,216,.82);
}

/* ---- THE CLOSER'S MAILTO — the front door, dressed as one ----
   It is no longer a button that scrolls to itself, so it gets the states a
   real action needs: hover, active, and a visible focus ring. */
.closer-cta{
  font-size:13.5px;
  padding:20px 34px;
  box-shadow:0 1px 2px rgba(31,59,255,.2), 0 18px 40px -20px rgba(31,59,255,.65);
}
.closer-cta-icon{ font-size:15px; line-height:1; transform:translateY(-.5px); }
.closer-cta:hover{
  background:var(--accent-lit);
  transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(31,59,255,.24), 0 26px 52px -20px rgba(31,59,255,.8);
}
.closer-cta:active{
  transform:translateY(0);
  background:#1730D6;
  box-shadow:0 1px 2px rgba(2,43,114,.3), 0 6px 14px -10px rgba(31,59,255,.6);
  transition-duration:.08s;
}
.closer-cta:focus-visible{ outline:2.5px solid var(--navy); outline-offset:4px; }
.closer-mail{ margin-top:20px; }

/* ---- MOBILE (≤760px) ----------------------------------------------- */
@media (max-width:760px){
  /* 1. the zoom stops being a pin. It paints its END STATE, statically —
        the same bailout the hero takes on a narrow screen. No pin, no
        mid-transform, nothing to park on. app.js returns early here. */
  .expand-pin{ height:auto; min-height:0; padding:clamp(56px,10vw,86px) 0; overflow:visible; }
  /* a grid rather than a flex column: .expand-canvas and .expand-head are
     siblings in the markup, and on mobile they need to occupy the SAME
     cell — the heading laid over the textured panel, like the desktop
     end-state — rather than stacking as an empty box then a heading. */
  .expand-inner{
    position:relative; height:auto; padding:0 var(--edge);
    display:grid; grid-template-columns:1fr; row-gap:22px;
  }
  .expand-lede{ grid-row:1; max-width:20ch; }
  .expand-chip{ display:none; }
  .expand-canvas{
    grid-row:2; grid-column:1;
    position:relative; left:auto; top:auto; transform:none;
    width:min(84vw,440px); height:230px; margin:0 auto; opacity:1; border-radius:16px;
  }
  .expand-head{
    grid-row:2; grid-column:1; align-self:center; justify-self:center;
    position:relative; inset:auto; opacity:1; z-index:5;
    width:min(84vw,440px); padding:0 20px;
    color:#FFFFFF; text-shadow:0 12px 28px rgba(1,27,75,.5);
    font-size:clamp(1.5rem,6.2vw,2rem); letter-spacing:-.04em; line-height:1.06;
  }

  /* 2. the mailto is THE action down here — it already works perfectly on a
        phone, so it gets dressed as the hero of the closer rather than as a
        button that happens to be last. */
  .closer-cta{
    display:flex; width:100%; justify-content:center;
    padding:22px 24px;
    font-size:13px; letter-spacing:.07em;
    border-radius:6px;
    margin-top:clamp(24px,5vw,34px);
  }
  .closer-cta-icon{ font-size:17px; }
  .closer-warm{ margin-bottom:26px; }
  .closer-mail{ margin-top:18px; font-size:12.5px; padding:10px 0; }
}

/* ============================================================
   MASTER4 ADDITIONS — restructure-only, design language frozen
   ============================================================ */

/* ---- "What we build": 4 macro capability cards, gapless 2-col,
   reuses .fold/.tile border + hover-recolour system verbatim ---- */
.macro-fold{ grid-template-columns:repeat(2,1fr); margin-top:clamp(34px,4vw,54px); }
.macro-card{ min-height:460px; padding:clamp(30px,3.2vw,48px); }
.macro-card .tile-body{ max-width:52ch; }
.macro-card .vig{ align-self:flex-start; margin:6px 0 2px; }
.tile-includes{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  color:var(--mut); margin-top:-6px;
  transition:color .3s ease;
}
.tile[data-tone="navy"]:hover .tile-includes,.tile[data-tone="deep"]:hover .tile-includes,
.tile[data-tone="blue"]:hover .tile-includes{ color:rgba(234,240,251,.72); }
@media (max-width:820px){ .macro-fold{ grid-template-columns:1fr; } }

.macro-more{
  margin-top:clamp(28px,3vw,40px); padding-top:clamp(28px,3vw,40px);
  padding-bottom:clamp(48px,6vw,64px);
  border-top:1px solid var(--line);
}
.macro-more a{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.05em;
  color:var(--accent); text-decoration:none; font-weight:700;
}
.macro-more a:hover{ color:var(--navy); text-decoration:underline; }

/* ---- Photoband, rebuilt design-native: no photograph — navy gradient,
   the hero's own dot/grid + wave motifs, and the kayak SVG, surfacing ---- */
.photoband-native{ background:linear-gradient(180deg, var(--navy-2,#0A3A93) 0%, var(--navy) 46%, var(--navy-deep) 78%, #00102E 100%); }
.photoband-native::before{ display:none; }
.photoband-native::after{
  background:radial-gradient(ellipse 70% 60% at 26% 78%, rgba(31,59,255,.24), transparent 62%);
}
.photoband-tex{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(234,240,251,.05) 1px, transparent 1px),
    radial-gradient(rgba(234,240,251,.14) 1.4px, transparent 1.6px);
  background-size:120px 100%, 26px 26px;
  opacity:.7;
}
.photoband-wave{ position:absolute; left:-10%; width:120%; max-width:none; top:4%; z-index:0; pointer-events:none; }
.photoband-kayak{
  position:absolute; right:6%; bottom:10%; width:min(30vw,340px); z-index:1; pointer-events:none;
  filter:drop-shadow(0 18px 30px rgba(1,27,75,.5));
}
.photoband-kayak svg{ width:100%; height:auto; overflow:visible; }
@media (max-width:820px){
  .photoband-kayak{ width:56vw; right:-6%; bottom:6%; opacity:.85; }
}

/* ---- Proof band copy tweaks ---- */
.proof-lead{ font-weight:600; color:var(--ink); }
.proof-foot{
  margin-top:clamp(20px,2.4vw,28px); padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.03em;
  color:var(--mut);
}

/* ---- "Who this is not for" — reuses .stage/.stage-list from the compare
   band; a two-column layout (context left, filter list right) so it fills
   the same width as the compare-grid above it instead of stopping at 640px ---- */
.not-for{
  margin-top:clamp(48px,5.5vw,72px); padding-top:clamp(36px,4vw,52px);
  border-top:1px solid rgba(234,240,251,.16);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4.5vw,64px); align-items:start;
}
.not-for-head{ max-width:40ch; }
.not-for-kicker{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--blueb); margin-bottom:16px;
}
.not-for-note{ font-size:.98rem; line-height:1.62; color:var(--on-navy-mut); }
.not-for-list .stage .num{ background:rgba(234,240,251,.1); color:#E6879A; }
.not-for-link{
  display:inline-block; margin-top:20px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.05em;
  color:var(--accent-lit); text-decoration:none; font-weight:700;
}
.not-for-link:hover{ color:#fff; text-decoration:underline; }
@media (max-width:860px){
  .not-for{ grid-template-columns:1fr; }
}

/* ---- Subpage hero band (systems / work / about) ---- */
/* subpages carry no left rail, but .shell still reserves the --rail grid
   column for it; without a breakout the dark band stops short of the left
   edge and leaves a light gutter under the fixed nav / wordmark at y0 (see
   .fullbleed above for the same problem on the homepage photoband). */
.subhero{
  position:relative;
  margin-left:calc(-1 * var(--rail));
  width:calc(100% + var(--rail));
  background:
    radial-gradient(120% 80% at 78% 4%, rgba(31,59,255,.20) 0%, transparent 58%),
    linear-gradient(180deg, var(--navy-deep) 0%, #01143A 58%, var(--navy-deep) 100%);
  color:#EAF0FB;
  padding:clamp(150px,20vw,200px) 0 clamp(56px,7vw,84px);
}
@media (max-width:1080px){ .subhero{ margin-left:0; width:100%; } }
.subhero .eyebrow{ color:var(--blueb); }
.subhero .eyebrow::before{ background:var(--accent-lit); }
.subhero h1{
  color:#fff; font-weight:800; letter-spacing:-.04em; line-height:.98;
  font-size:clamp(2.3rem,1.5rem + 3.4vw,4.2rem); max-width:18ch;
}
.subhero .accent{ color:var(--accent-lit); }
.subhero-lede{ color:rgba(234,240,251,.74); max-width:58ch; margin-top:18px; font-size:1.05rem; line-height:1.62; }
.subhero-back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  color:rgba(234,240,251,.6); text-decoration:none;
}
.subhero-back:hover{ color:#fff; }

/* ============ WHO RUNS KAIAK — founder block (about page) ============ */
.sec-founder{ border-top:1px solid var(--line); }
.founder-grid{
  display:grid; grid-template-columns:minmax(220px,320px) 1fr;
  gap:clamp(28px,4.5vw,60px); align-items:center;
}
.founder-photo{
  width:100%; height:auto; display:block;
  border:1px solid var(--line);
}
.founder-copy h2{ margin-top:12px; }
.founder-copy p{ margin-top:14px; color:var(--ink-soft); max-width:58ch; line-height:1.65; }
.founder-receipts{ margin-top:20px; display:flex; flex-direction:column; gap:9px; }
.founder-receipts a{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none; color:var(--accent);
}
.founder-receipts a:hover{ text-decoration:underline; }
@media (max-width:760px){
  .founder-grid{ grid-template-columns:1fr; }
  .founder-photo{ max-width:280px; }
}