/* MERIDIAN tokens — prototype 1-meridian.html lines 18-44, verbatim */
:root[data-theme="dark"]{
  --bg:#060D22; --surface:#0D1834; --surface-2:#142046; --line:#22305C;
  --ink:#EAF2FA; --ink-2:#9FB2D4; --ink-3:#61759E;
  --brand:#1C3885; --accent:#A7DAEE; --accent-hot:#57C7F2;
  --success:#4ED8A0; --warn:#F2C14E; --error:#FF6B6B;
  --on-accent:#06122B;
  --iso-rgb:167,218,238; --iso-hot-rgb:87,199,242;
  --iso-a0:0.075; --iso-a1:0.22;
  --scrim:rgba(6,13,34,0.42); --readout-bg:rgba(13,24,52,0.80);
  --plate:rgba(255,255,255,0.02);
  --shadow:0 24px 60px -28px rgba(0,0,0,0.85);
  --navy-ink:#EAF2FA; --navy-ink-2:#B9CCEC;
}
:root[data-theme="light"]{
  /* mountain terrain: USGS quad — warm paper, sepia contour ink, navy kept for water/headings */
  --bg:#F6F2E7; --surface:#FDFBF4; --surface-2:#EFE8D8; --line:#DCD2BB;
  --ink:#2B241A; --ink-2:#5C523F; --ink-3:#8A7F66;
  --brand:#1C3885; --accent:#8F5B2E; --accent-hot:#B4713A;
  --success:#2E7D4F; --warn:#A8760B; --error:#B54A34;
  --on-accent:#FFF9EE;
  --iso-rgb:143,91,46; --iso-hot-rgb:180,113,58;
  --iso-a0:0.17; --iso-a1:0.42;
  --scrim:rgba(246,242,231,0.55); --readout-bg:rgba(253,251,244,0.92);
  --plate:rgba(143,91,46,0.02);
  --shadow:0 18px 44px -26px rgba(74,52,24,0.35);
  --navy-ink:#F2F7FF; --navy-ink-2:#BACBEC;
}
/* MERIDIAN base (reset, body, type + layout primitives, sounding, reveal, light-theme heading overrides) — prototype 1-meridian.html lines 46-121, verbatim */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .5s ease, color .5s ease;
}
img,svg,canvas{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:rgba(var(--iso-hot-rgb),.28)}

/* ---------- type primitives ---------- */
.display{
  font-weight:600; letter-spacing:-0.025em; line-height:1.02;
  font-size:clamp(44px,5.4vw,76px); margin:0;
}
.h2{
  font-weight:600; letter-spacing:-0.024em; line-height:1.06;
  font-size:clamp(31px,3.4vw,46px); margin:0;
}
.h3{
  font-weight:600; letter-spacing:-0.018em; line-height:1.14;
  font-size:clamp(20px,1.7vw,24px); margin:0;
}
.body{max-width:68ch; color:var(--ink-2); margin:0}
.body + .body{margin-top:16px}
.lede{font-size:19px; line-height:1.55; color:var(--ink-2); max-width:60ch; margin:0}
.eyebrow{
  font-weight:500; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-3); margin:0;
}
.pull{
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(22px,2.3vw,30px); line-height:1.34; letter-spacing:-0.01em;
  color:var(--ink); max-width:30ch; margin:0;
}
.tnum{font-variant-numeric:tabular-nums}
.accent{color:var(--accent)}

/* mountain terrain: navy stays the headline ink (water on a topo quad) */
:root[data-theme="light"] .display,
:root[data-theme="light"] .h2,
:root[data-theme="light"] .h3,
:root[data-theme="light"] .pull,
:root[data-theme="light"] .mailto,
:root[data-theme="light"] .brand{color:var(--brand)}
:root[data-theme="light"] .navy .h2,
:root[data-theme="light"] .navy .h3,
:root[data-theme="light"] .navy .pull{color:var(--navy-ink)}

/* ---------- layout primitives ---------- */
.wrap{max-width:1200px; margin:0 auto; padding:0 40px}
section{position:relative}
.sect{padding:118px 0}
.sect-tight{padding:82px 0}
.grid{display:grid; gap:32px}
.rule-line{height:1px; background:var(--line); border:0; margin:0}

/* sounding rule — draws left→right on entry */
.sounding{width:100%; height:14px; overflow:visible; color:var(--accent); opacity:.55}
.sounding path{
  fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1500ms cubic-bezier(.22,.61,.24,1);
}
.in .sounding path,.sounding.in path{stroke-dashoffset:0}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.22,.61,.24,1), transform .9s cubic-bezier(.22,.61,.24,1)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* nav — prototype 1-meridian.html lines 122-149, verbatim */
/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:66px;
  display:flex; align-items:center;
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:var(--scrim); border-bottom:1px solid transparent;
  transition:border-color .4s ease, background-color .4s ease;
}
.nav.stuck{border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand{display:flex; align-items:center}
/* ADDITION (owner request, 2026-08-07 — not in the prototype): the Contour icon sits in
   front of the wordmark. It is inline SVG using currentColor, so it needs no light/dark
   variants: base.css already maps .brand to --brand in Mountain terrain, and it inherits
   --ink on Ocean floor. One mark, both themes. */
.brand{gap:11px}
.brand .brandmark{flex:none; display:block; color:inherit}
.brand .logo{height:34px; width:auto; display:block}
.brand .logo-on-light{display:none}
:root[data-theme="light"] .brand .logo-on-dark{display:none}
:root[data-theme="light"] .brand .logo-on-light{display:block}
.navlinks{display:flex; align-items:center; gap:30px}
.navlinks a{font-size:14px; color:var(--ink-2); transition:color .25s ease}
.navlinks a:hover{color:var(--ink)}
.nav-right{display:flex; align-items:center; gap:16px}
.tgl{
  height:34px; padding:0 13px; border:1px solid var(--line); border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); transition:border-color .25s ease,color .25s ease,background-color .25s ease;
}
.tgl:hover{color:var(--ink); border-color:var(--accent); background:rgba(var(--iso-rgb),.07)}
.tgl svg{width:13px; height:13px}

/* buttons — prototype 1-meridian.html lines 150-164, verbatim */
/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:48px; padding:0 24px; border-radius:2px;
  font-size:14.5px; font-weight:500; letter-spacing:-0.005em; white-space:nowrap;
  transition:transform .32s cubic-bezier(.2,1.16,.32,1), background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hot); box-shadow:0 0 0 4px rgba(var(--iso-hot-rgb),.15)}
.btn-ghost{border:1px solid var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); background:rgba(var(--iso-rgb),.06)}
.btn .arw{transition:transform .34s cubic-bezier(.2,1.16,.32,1)}
.btn:hover .arw{transform:translateX(4px)}

/* hero — prototype 1-meridian.html lines 165-204, verbatim */
/* ---------- hero ---------- */
.hero{min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden; padding:120px 0 90px}
#heroCanvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 45%, rgba(var(--iso-hot-rgb),.055), transparent 60%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 74%, var(--bg) 100%);
}
.hero .wrap{position:relative; z-index:2}
.hero-inner{max-width:880px}
.hero-scrim{
  display:inline-block; padding:6px 0;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.hero h1{margin:20px 0 0; max-width:26ch; font-size:clamp(34px,4.2vw,56px)}
.hero .lede{margin-top:26px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:40px}
.hero-meta{display:flex; flex-wrap:wrap; gap:28px; margin-top:56px; align-items:center}
.hero-meta .eyebrow{white-space:nowrap}

/* instrument readout, fixed */
.readout{
  position:fixed; top:84px; right:40px; z-index:55;
  border:1px solid var(--line); border-left:2px solid var(--accent);
  border-radius:0 6px 6px 0;
  background:var(--readout-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:11px 15px; min-width:196px;
  font-variant-numeric:tabular-nums;
  transition:opacity .5s ease, transform .5s ease;
}
.readout .r-row{display:flex; justify-content:space-between; gap:16px; font-size:11.5px; letter-spacing:.04em}
.readout .r-row + .r-row{margin-top:5px}
.readout .r-k{color:var(--ink-3); font-weight:500; letter-spacing:.12em; text-transform:uppercase; font-size:10px}
.readout .r-v{color:var(--ink); font-weight:500}
.readout .r-hint{margin-top:9px; padding-top:8px; border-top:1px solid var(--line); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.readout.hide{opacity:0; transform:translateX(12px); pointer-events:none}
/* depth is a ocean-floor instrument; mountain terrain surveys have no sounding line */
:root[data-theme="light"] #roDepthRow{display:none}

/* instrument strip — prototype 1-meridian.html lines 205-223, verbatim */
/* ---------- instrument strip ---------- */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip-grid{display:grid; grid-template-columns:repeat(4,1fr)}
.metric{padding:38px 30px 34px; border-left:1px solid var(--line); position:relative}
.metric:first-child{border-left:0; padding-left:0}
.metric .m-val{
  font-size:clamp(32px,3vw,42px); font-weight:600; letter-spacing:-0.03em; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.metric .m-val .suf{font-size:.52em; color:var(--accent); margin-left:3px; letter-spacing:0}
.metric .eyebrow{margin-top:14px}
.metric .m-sub{margin-top:6px; font-size:13.5px; color:var(--ink-3); line-height:1.4}
.metric::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent);
  transition:width 1.2s cubic-bezier(.22,.61,.24,1);
}
.metric:first-child::after{left:0}
.in .metric::after{width:26px}

/* logo carousel (full-bleed) — prototype 1-meridian.html lines 224-245, verbatim */
/* ---------- logo carousel (full-bleed) ---------- */
.logo-marquee{
  width:100%; overflow:hidden; margin-top:30px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-track{
  display:flex; align-items:center; gap:78px; width:max-content;
  padding-right:78px; animation:logoScroll 95s linear infinite;
}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-group{display:flex; align-items:center; gap:78px; flex:none}
.logo-track img{
  height:40px; width:auto; max-width:none; flex:none;
  filter:grayscale(1); opacity:.55;
  transition:filter .35s ease, opacity .35s ease;
}
:root[data-theme="dark"] .logo-track img{filter:grayscale(1) invert(1) brightness(1.55) contrast(.82); opacity:.62}
.logo-track img:hover{filter:none; opacity:1}
@keyframes logoScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.logo-track{animation:none}}

/* ---------- mobile: static grid, all logos visible, no scroll ---------- */
/* Mirrors the .wrap side padding used elsewhere below 860px (base.css/responsive.css) — */
/* this section is intentionally full-bleed on desktop so it needs its own padding here. */
@media (max-width:860px){
  .logo-marquee{
    -webkit-mask-image:none; mask-image:none;
    padding:0 24px;
  }
  .logo-track{display:block; width:100%; padding-right:0; animation:none}
  .logo-group[aria-hidden="true"]{display:none}
  .logo-group{
    display:grid; grid-template-columns:repeat(3,1fr);
    align-items:center; justify-items:center;
    gap:30px 16px; width:100%;
  }
  .logo-track img{max-height:34px; max-width:100%}
}
@media (max-width:560px){
  .logo-group{grid-template-columns:repeat(2,1fr); gap:28px 22px}
}

/* terrain panel — prototype 1-meridian.html lines 246-307, verbatim */
/* ---------- terrain panel ---------- */
.terrain{
  position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow);
  aspect-ratio:16/9; min-height:420px;
}
#terrainCanvas{position:absolute; inset:0; width:100%; height:100%}
.terrain-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:80px 80px; mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent);
}
.terrain-hud{position:absolute; top:16px; left:18px; z-index:3; pointer-events:none}
.terrain-hud .eyebrow + .eyebrow{margin-top:4px; color:var(--ink-2)}
.node{
  position:absolute; z-index:4; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:9px; padding:7px 12px 7px 9px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); color:var(--ink-2);
  font-size:12.5px; font-weight:500; letter-spacing:-0.005em; white-space:nowrap;
  transition:color .35s ease, border-color .35s ease, background-color .35s ease, box-shadow .45s ease;
  cursor:pointer;
}
.node .dot{width:6px; height:6px; border-radius:50%; background:var(--ink-3); transition:background-color .35s ease, box-shadow .45s ease}
.node:hover,.node.on{color:var(--ink); border-color:var(--accent); box-shadow:0 0 0 5px rgba(var(--iso-rgb),.10)}
.node:hover .dot,.node.on .dot{background:var(--accent-hot); box-shadow:0 0 10px 2px rgba(var(--iso-hot-rgb),.6)}
.tele{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:5;
  border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:0 4px 4px 0;
  background:var(--surface-2); padding:14px 18px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 28px;
  transform:translateY(calc(100% + 22px)); opacity:0;
  transition:transform .5s cubic-bezier(.22,.61,.24,1), opacity .4s ease;
  pointer-events:none;
}
.tele.on{transform:none; opacity:1}
.tele .t-name{font-size:14px; font-weight:600; letter-spacing:-0.015em; color:var(--ink); min-width:120px}
.tele .t-item{display:flex; align-items:baseline; gap:8px}
.tele .t-v{font-size:13.5px; font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums}
.terrain-hint{margin-top:14px; text-align:right}
.th-touch{display:none}
@media (hover:none),(pointer:coarse){
  .th-desktop{display:none}
  .th-touch{display:inline}
}
@media (max-width:860px){
  /* idle .tele normally slides fully off-canvas below the panel
     (translateY(calc(100% + 22px))); at this height that offscreen
     position still counts toward the panel's scrollable overflow and
     clips 320-860px viewports. A small rise-and-fade keeps the same
     entrance feel without leaving the panel's box. */
  .tele{transform:translateY(12px)}
}
@media (max-width:700px){
  /* business map: dots only; the active node shows its label, the bar below shows detail */
  #terrainPanel .node{font-size:0; gap:0; padding:7px}
  #terrainPanel .node .dot{width:8px; height:8px}
  #terrainPanel .node.on{font-size:10.5px; gap:7px; padding:5px 10px}
}
.t-links{position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none}
.t-links line{
  stroke:rgb(var(--iso-hot-rgb)); stroke-width:1.2;
  opacity:.5; animation:linkDraw .55s ease forwards;
}
@keyframes linkDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.t-links line{animation:none; stroke-dashoffset:0}}
.node.linked{border-color:rgba(var(--iso-hot-rgb),.55); color:var(--ink)}
.node.linked .dot{background:var(--accent)}

/* split (obstacles) — prototype 1-meridian.html lines 308-349, verbatim */
/* ---------- split (obstacles) ---------- */
.split{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center}
.iso-plate{
  position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--surface); aspect-ratio:4/3;
}
.iso-plate svg,.iso-plate canvas{position:absolute; inset:0; width:100%; height:100%}
.iso-plate .corner{position:absolute; width:14px; height:14px; border:1px solid var(--accent); opacity:.5}
.iso-plate .c1{top:10px;left:10px;border-right:0;border-bottom:0}
.iso-plate .c2{top:10px;right:10px;border-left:0;border-bottom:0}
.iso-plate .c3{bottom:10px;left:10px;border-right:0;border-top:0}
.iso-plate .c4{bottom:10px;right:10px;border-left:0;border-top:0}
.iso-plate .plate-tag{position:absolute; left:14px; bottom:12px}
.iso-plate .fpoint{
  position:absolute; z-index:3; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; border:0; padding:0; background:transparent; cursor:pointer;
  opacity:0; transform:scale(.2);
  transition:opacity .45s ease, transform .5s cubic-bezier(.2,1.2,.32,1);
}

.iso-plate .fpoint.on{opacity:1; transform:scale(1)}
.iso-plate .fpoint i{position:absolute; inset:5px; border-radius:50%; background:var(--accent-hot); box-shadow:0 0 9px 1px rgba(var(--iso-hot-rgb),.55)}
.iso-plate .fpoint::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(var(--iso-hot-rgb),.7); opacity:0}
.iso-plate .fpoint.on::after{animation:fping 2.4s ease-out infinite}
@keyframes fping{0%{transform:scale(.5); opacity:.9} 70%{transform:scale(3.4); opacity:0} 100%{opacity:0}}
.fcall{
  position:absolute; z-index:4; width:236px; padding:11px 14px;
  border:1px solid var(--line); border-left:2px solid var(--accent-hot); border-radius:0 4px 4px 0;
  background:var(--readout-bg); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .5s cubic-bezier(.22,.61,.24,1);
  pointer-events:none;
}
.fcall.on{opacity:1; transform:none}
.fcall b{display:block; font-size:13px; font-weight:600; color:var(--ink); letter-spacing:-0.01em}
.fcall .tw{display:block; font-size:12.5px; margin-top:4px; color:var(--ink-2); line-height:1.5; min-height:3em}
.fcall.on .tw::after{content:"▍"; color:var(--accent-hot); animation:twblink 1s steps(1) infinite}
.fcall.done .tw::after{content:""}
@keyframes twblink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.iso-plate .fpoint.on::after{animation:none}}

/* small plates (friction.js switches to JS-computed, clamped left/top below
   this same 700px threshold — keep both in sync) */
@media (max-width:700px){
  .fcall{width:min(210px, calc(100% - 24px)); padding:9px 11px}
  .fcall b{font-size:12.5px}
  .fcall .tw{font-size:11.5px; min-height:4.4em}
}
.obstacle-list .n{color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:.12em; padding-top:4px; flex:0 0 26px}

/* services (depth layered) — prototype 1-meridian.html lines 350-377, verbatim */
/* ---------- services (depth layered) ---------- */
.depth-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.dcard{
  position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--surface); padding:34px 30px 32px; min-height:340px;
  display:flex; flex-direction:column;
  transition:border-color .45s ease, transform .5s cubic-bezier(.22,.61,.24,1), box-shadow .5s ease;
}
.dcard::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:repeating-linear-gradient(var(--layer-angle,168deg), transparent 0 13px, rgba(var(--iso-rgb),var(--iso-a0)) 13px 14px);
  mask-image:linear-gradient(to bottom, #000, transparent 62%);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 62%);
  transition:opacity .5s ease;
}
.dcard:nth-child(2){--layer-angle:176deg}
.dcard:nth-child(3){--layer-angle:184deg}
.dcard:hover{border-color:var(--accent); transform:translateY(-5px); box-shadow:var(--shadow)}
.dcard:hover::before{opacity:1}
.dcard > *{position:relative}
.dcard .depth{
  position:absolute; top:26px; right:28px; font-size:11px; letter-spacing:.12em;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.dcard .h3{margin-top:16px}
.dcard .body{margin-top:14px; font-size:15.5px}
.dcard .foot{margin-top:auto; padding-top:24px; display:flex; align-items:center; gap:9px; color:var(--accent); font-size:13px; font-weight:500}

/* AI capability — prototype 1-meridian.html lines 378-401, verbatim */
/* ---------- AI capability ---------- */
.ai-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line)}
.ai-col{padding:34px 30px 8px; border-left:1px solid var(--line)}
.ai-col:first-child{border-left:0; padding-left:0}
.ai-col .h3{margin-top:14px; font-size:19px}
.ai-col .body{margin-top:12px; font-size:15px}
.stack-row{display:flex; flex-wrap:wrap; gap:9px; margin-top:32px}
.chip{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 13px;
  border:1px solid var(--line); border-radius:2px; background:var(--surface);
  font-size:12.5px; font-weight:500; color:var(--ink-2);
  transition:border-color .3s ease,color .3s ease,background-color .3s ease;
}
.chip:hover{border-color:var(--accent); color:var(--ink); background:rgba(var(--iso-rgb),.06)}
.chip .cd{width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* experience — prototype 1-meridian.html lines 402-408, verbatim */
/* ---------- experience ---------- */
.exp{display:grid; grid-template-columns:.9fr 1.1fr; gap:72px}
.exp-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:36px}
.exp-stats > div{background:var(--bg); padding:24px 22px}
.exp-stats .es{font-size:26px; font-weight:600; letter-spacing:-0.025em; font-variant-numeric:tabular-nums}
.exp-stats .eyebrow{margin-top:8px}

/* portfolio plates — prototype 1-meridian.html lines 409-437, verbatim */
/* ---------- portfolio plates ---------- */
.plates{display:grid; gap:28px}
.plate{
  border:1px solid var(--line); border-radius:4px; background:var(--surface); overflow:hidden;
  display:grid; grid-template-columns:.85fr 1.15fr;
  transform-style:preserve-3d; will-change:transform;
  transition:transform 320ms cubic-bezier(.2,1.24,.32,1), border-color .4s ease, box-shadow .4s ease;
}
.plate:hover{border-color:var(--accent); box-shadow:var(--shadow)}
.plate-info{padding:38px 36px; border-right:1px solid var(--line); display:flex; flex-direction:column}
.plate-info .h3{margin-top:14px}
.plate-info .body{margin-top:14px; font-size:15.5px}
.plate-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:26px}
.tag{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  padding:5px 10px; border:1px solid var(--line); color:var(--ink-3); border-radius:2px;
}
/* auto-height on all viewports (agent-feeds redesign 2026-08-10, owner-approved) —
   the miniature is now a self-paced action feed, not a fixed-height board/table that
   needed a bottom fade mask to hide its overflow. The plate sizes to its feed. */
.plate-ui{padding:22px; background:var(--surface-2); position:relative}
.plate-ui::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom right, transparent 60%, rgba(var(--iso-rgb),.05));
}

/* miniature agent-feed UI — agent-feeds redesign 2026-08-10 (owner-approved), not in
   prototype. Each chart plate's miniature now depicts an AI agent's action feed rather
   than the prototype's product-UI board/table/list. See plates-agents-proposal.html
   (the approved mockup) and .claude/primitives.md for the grammar this replaces. */
.mini{font-size:11px; line-height:1.35; color:var(--ink-2)}
.mini-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}
.mini-title{font-size:12.5px; font-weight:600; color:var(--ink); letter-spacing:-0.01em}
.mini-sub{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-variant-numeric:tabular-nums}
.mini-sub .cursor{color:var(--accent-hot); animation:mini-blink 1s steps(1) infinite}
@keyframes mini-blink{50%{opacity:0}}

.feed{border:1px solid var(--line); border-radius:4px; background:var(--bg); overflow:hidden}
.ev{
  display:flex; gap:10px; padding:9px 11px; border-top:1px solid var(--line);
  opacity:0; transform:translateY(-4px);
  transition:opacity .45s ease, transform .5s cubic-bezier(.22,.61,.24,1);
}
.ev:first-child{border-top:0}
.ev.on{opacity:1; transform:none}
.ev .t{flex:0 0 44px; color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:10px; padding-top:1px}
.ev .body{flex:1; min-width:0}
.ev .a{color:var(--ink); font-weight:500}
.ev .d{color:var(--ink-2); margin-top:2px}
.ev .d .tw::after{content:"▍"; color:var(--accent-hot); animation:mini-blink 1s steps(1) infinite}
.ev .d.done .tw::after{content:""}

.chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px}
/* .mchip, not .chip — the AI-capability section already owns `.chip` (a taller,
   dotted stack-tag, ai-capability.css) and loads before this file; reusing the same
   class name would let this smaller status-tag definition clobber it. */
.mchip{
  font-size:9px; letter-spacing:.07em; text-transform:uppercase; font-weight:500;
  padding:2px 6px; border:1px solid var(--line); border-radius:2px; color:var(--ink-3);
  background:var(--surface);
}

.pill{
  display:inline-block; font-size:9px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; padding:2px 7px; border-radius:999px; white-space:nowrap;
}
.pill-done{background:rgba(78,216,160,.15); color:var(--success)}
.pill-wait{background:rgba(242,193,78,.16); color:var(--warn)}
.pill-act{background:rgba(var(--iso-hot-rgb),.16); color:var(--accent-hot)}
:root[data-theme="light"] .pill-done{background:rgba(46,125,79,.12)}
:root[data-theme="light"] .pill-wait{background:rgba(168,118,11,.14)}

.tally{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.tally>div{flex:1 1 110px; border:1px solid var(--line); border-radius:4px; background:var(--bg); padding:8px 11px}
.tally .v{font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.tally .k{font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}

.draft{
  border:1px solid var(--line); border-left:2px solid var(--accent-hot); border-radius:0 4px 4px 0;
  background:var(--surface); padding:8px 11px; margin-top:5px; color:var(--ink-2);
}
.draft .from{font-size:9.5px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px}
/* navy band — prototype 1-meridian.html lines 500-514, verbatim */
/* ---------- navy band ---------- */
.navy{background:var(--brand); color:var(--navy-ink); position:relative; overflow:hidden}
.navy::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:repeating-radial-gradient(circle at 78% 30%, transparent 0 26px, rgba(167,218,238,.10) 26px 27px);
}
.navy .wrap{position:relative}
.navy .eyebrow{color:rgba(167,218,238,.75)}
.navy .body{color:var(--navy-ink-2)}
.navy .pull{color:var(--navy-ink)}
.navy-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(167,218,238,.18); border:1px solid rgba(167,218,238,.18); margin-top:44px}
.navy-grid > div{background:var(--brand); padding:38px 34px}
.navy-grid .h3{color:var(--navy-ink); margin-top:14px}
.navy-grid .body{margin-top:14px; font-size:15.5px}

/* process — prototype 1-meridian.html lines 515-533, verbatim */
/* ---------- process ---------- */
.proc-layout{display:grid; grid-template-columns:.82fr 1.18fr; gap:64px}
.proc-aside{position:sticky; top:112px; align-self:start}
.proc{display:grid; grid-template-columns:34px 1fr; gap:0 34px}
.proc-track{position:relative; width:1px; background:var(--line); justify-self:center; margin-top:12px}
.proc-track i{position:absolute; inset:0 auto auto 0; width:1px; background:var(--accent); height:0; transition:height .12s linear}
.proc-steps{display:grid; gap:0}
.pstep{padding:0 0 62px; position:relative; opacity:.34; transition:opacity .6s ease}
.pstep:last-child{padding-bottom:0}
.pstep.on{opacity:1}
.pstep .pdot{
  position:absolute; left:-56.5px; top:9px; width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line);
  transition:border-color .5s ease, box-shadow .5s ease, background-color .5s ease;
}
.pstep.on .pdot{border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 5px rgba(var(--iso-rgb),.14)}
.pstep .h3{margin-top:12px}
.pstep .body{margin-top:10px; font-size:15.5px}

/* contact / footer — prototype 1-meridian.html lines 534-572, verbatim */
/* ---------- contact / footer ---------- */
.contact-grid{display:grid; grid-template-columns:1fr .9fr; gap:72px; align-items:start}
.cform{
  border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:0 4px 4px 0;
  background:var(--readout-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:30px 30px 26px;
}
.cf-field{display:block}
.cf-field + .cf-field{margin-top:18px}
.cform .btn{margin-top:24px}
.cf-field input,.cf-field textarea{
  display:block; width:100%; margin-top:8px; padding:0 12px;
  height:40px; background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line); border-radius:4px; font:inherit; font-size:15px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.cf-field textarea{height:auto; padding:10px 12px; line-height:1.5; resize:vertical; min-height:96px}
.cf-field input:focus,.cf-field textarea:focus{
  outline:none; border-color:var(--accent-hot); box-shadow:0 0 0 3px rgba(var(--iso-hot-rgb),.14);
}
@media (max-width:1080px){.contact-grid{grid-template-columns:1fr; gap:44px}}
.contact{position:relative; overflow:hidden; padding-bottom:150px}
#footCanvas{position:absolute; inset:auto 0 0 0; height:70%; width:100%; z-index:0}
.contact-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, var(--bg) 0%, transparent 34%, transparent 58%, var(--bg) 96%);
}
.contact .wrap{position:relative; z-index:2}
.mailto{
  display:inline-block; margin-top:26px;
  font-size:clamp(26px,3.6vw,50px); font-weight:600; letter-spacing:-0.028em; line-height:1.05;
  color:var(--ink); position:relative;
}
.mailto::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.22,.61,.24,1)}
.mailto:hover::after{transform:scaleX(1)}
.footer{border-top:1px solid var(--line); padding:28px 0 44px; position:relative; z-index:2}
.footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center}
.footer .eyebrow{color:var(--ink-3)}
/* ADDITION (owner request, 2026-08-07 — not in the prototype): legal links, so /privacy
   and /terms are reachable instead of orphaned. Same muted ink and hover convention as
   .navlinks a, so it reads as part of the footer chrome rather than a bolted-on row. */
.footer-legal{display:flex; align-items:center; gap:8px}
.footer-legal a{color:var(--ink-3); transition:color .25s ease}
.footer-legal a:hover{color:var(--ink)}

/* responsive (all breakpoints + reduced-motion) — prototype 1-meridian.html lines 573-629, verbatim */
/* ---------- responsive ---------- */
@media (max-width:1080px){
  .split,.exp{grid-template-columns:1fr; gap:44px}
  .plate{grid-template-columns:1fr}
  .plate-info{border-right:0; border-bottom:1px solid var(--line)}
  .depth-cards{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
}
@media (max-width:860px){
  .wrap{padding:0 24px}
  .sect{padding:84px 0}
  .strip-grid{grid-template-columns:1fr 1fr}
  .metric{padding:26px 20px; border-top:1px solid var(--line)}
  .metric:first-child,.metric:nth-child(2){border-top:0}
  .metric:nth-child(odd){border-left:0; padding-left:0}
  .ai-grid{grid-template-columns:1fr}
  .ai-col{border-left:0; padding:26px 0 0; border-top:1px solid var(--line)}
  .ai-col:first-child{border-top:0}
  .navy-grid{grid-template-columns:1fr}
  .readout{display:none}
  .terrain{aspect-ratio:auto; min-height:400px}
  .pill{white-space:nowrap}
  .proc-layout{grid-template-columns:1fr; gap:40px}
  .proc-aside{position:static}
  .proc{grid-template-columns:20px 1fr; gap:0 22px}
  .pstep .pdot{left:-37.5px}
}
@media (max-width:620px){
  .tgl{padding:0 11px; gap:0}
  .tgl span{display:none}
  .tgl svg{width:15px; height:15px}
  .nav-right{gap:10px}
}
@media (max-width:560px){
  body{font-size:16px}
  .depth-cards{grid-template-columns:1fr}
  .exp-stats{grid-template-columns:1fr 1fr}
  .hero{min-height:92svh}
  .hero-cta .btn{flex:1 1 100%}
  .plate-ui{padding:16px}
  .logos{gap:10px 26px}
  .logos span{font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important}
  .rv{transform:none !important; transition:opacity .5s ease !important}
  .dcard:hover,.plate:hover{transform:none !important}
  .sounding path{transition:none; stroke-dashoffset:0}
}