/* SayFlight — dark provenance design system
   Tokens and rules: see DESIGN.md (not deployed). */

:root {
  /* Core surfaces */
  --navy: #002344;
  --navy-deep: #00172D;
  --petrol: #06787D;
  --petrol-dark: #045D62;

  /* Accent system: bright magenta is for LINES (strokes, trails, bars,
     arrows); the darker fill magenta is for SOLID SURFACES carrying text,
     where the bright value fails WCAG contrast and reads bubblegum */
  --magenta: #CC44CC;
  --magenta-fill: #A832AC;
  --magenta-fill-hover: #952B99;
  --magenta-brand: #8B008B;
  --light-teal: #5FC0C5;

  /* Text */
  --text-white: #FFFFFF;
  --text-fog: #D9DEDC;
  --text-incard: #DCEEED;
  --text-fine: #AEBBC7;

  /* Light sections */
  --paper: #F4F6F8;
  --cream: #FBFAF6;

  /* Lines and technical detail */
  --border-card: rgba(255, 255, 255, 0.16);
  --grid-line: rgba(255, 255, 255, 0.06);
  --line-light: rgba(0, 35, 68, 0.18);

  /* Geometry and depth */
  --r-ui: 6px;
  --r-panel: 10px;
  --shadow-card: 0 14px 40px rgba(0, 10, 25, 0.35);
  --shadow-plate: 0 28px 80px rgba(0, 10, 25, 0.45);

  --max: 1280px;
  --serif: "IBM Plex Serif", Georgia, serif;
  --sans: "IBM Plex Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--text-fog);
  font-family: var(--sans);
  line-height: 1.55;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; }

section[id], [id] { scroll-margin-top: 96px; }

.section { max-width: var(--max); margin: 0 auto; }

:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: 20px;
  top: 14px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--cream);
  color: var(--navy);
  padding: 10px 14px;
  font-weight: 700;
  border-radius: var(--r-ui);
}
.skip-link:focus { transform: none; }

/* ---------- typographic furniture ---------- */

.eyebrow {
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--light-teal);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.eyebrow:before { content: ""; width: 3px; height: 1.2em; background: var(--magenta); flex: none; }

.seq {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--light-teal);
  letter-spacing: 0.06em;
}
.seq b { color: var(--magenta); font-weight: 500; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--text-white); margin: 0; }

h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.08; }

/* ---------- notice bar ---------- */

.notice-bar {
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notice-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 9px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

.notice-inner-actions-only { justify-content: flex-end; }

.notice-actions { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.notice-secondary { color: var(--text-fine); }
.notice-secondary:hover { color: var(--text-white); }

.notice-highlight { color: var(--light-teal); font-weight: 600; }
.notice-highlight:hover { color: var(--text-white); }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 23, 45, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand img { width: 54px; height: 54px; object-fit: contain; }
.brand-mark { display: inline-flex; }
.brand > span:not(.brand-mark) {
  display: grid;
  line-height: 1.2;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--text-white);
}
.brand strong { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--text-white); }
.brand small {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--light-teal);
}

.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; color: var(--text-fog); }
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--text-white); }
.nav-links a[aria-current]:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--magenta);
}

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--magenta-fill);
  border-radius: var(--r-ui);
  background: var(--magenta-fill);
  color: var(--text-white);
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 10px 30px rgba(0, 10, 25, 0.4);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.button:after { content: "\2192"; font-family: var(--mono); font-weight: 400; transition: transform 160ms ease; }
.button:hover { background: var(--magenta-fill-hover); border-color: var(--magenta-fill-hover); transform: translateY(-1px); }
.button:hover:after { transform: translateX(3px); }

.button.ghost,
.button.cream {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-card);
  color: var(--text-fog);
  box-shadow: none;
}
.button.ghost:after, .button.cream:after { content: none; }
.button.ghost:hover, .button.cream:hover { border-color: var(--light-teal); color: var(--text-white); background: rgba(95, 192, 197, 0.07); }

/* legacy alias: gold buttons are primary actions */
.button.gold { background: var(--magenta-fill); border-color: var(--magenta-fill); color: var(--text-white); }
.button.gold:hover { background: var(--magenta-fill-hover); border-color: var(--magenta-fill-hover); }

.button.compact, .nav .button { min-height: 38px; padding: 0 16px; font-size: 13.5px; box-shadow: none; }

/* light-band button treatment */
.cream-band .button:not(.gold), .band-light .button.ghost {
  border-color: rgba(0, 35, 68, 0.3);
  color: var(--navy);
  background: transparent;
}
.cream-band .button:not(.gold):hover, .band-light .button.ghost:hover {
  border-color: var(--magenta-brand);
  background: var(--magenta-brand);
  color: var(--cream);
}

.text-link {
  color: var(--light-teal);
  font-weight: 600;
  border-bottom: 1px solid rgba(95, 192, 197, 0.4);
  padding-bottom: 1px;
}
.text-link:hover { color: var(--text-white); border-color: var(--text-white); }
.cream-band .text-link, .band-light .text-link { color: var(--magenta-brand); border-color: rgba(139, 0, 139, 0.35); }
.cream-band .text-link:hover, .band-light .text-link:hover { color: var(--navy); border-color: var(--navy); }

/* ---------- plotter field ---------- */

.field-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.field-wrap svg { width: 100%; height: 100%; display: block; }

html.js [data-plot] line,
html.js [data-plot] path,
html.js [data-plot] rect,
html.js [data-plot] circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.js [data-plot] .dot { opacity: 0; }

.plotted [data-plot] line,
.plotted [data-plot] path,
.plotted [data-plot] rect,
.plotted [data-plot] circle {
  animation: plot 850ms ease-out forwards;
  animation-delay: calc(var(--i, 0) * 1ms);
}
.plotted [data-plot] .dot {
  animation: register 420ms ease-out forwards;
  animation-delay: calc(var(--i, 0) * 1ms + 500ms);
}

@keyframes plot { to { stroke-dashoffset: 0; } }
@keyframes register { to { opacity: 1; } }

.bolt-ring { animation: slow-rotate 160s linear infinite; }
.dial { animation: slow-rotate 100s linear infinite; }

.ambient { opacity: 0; transition: opacity 1200ms ease 2800ms; }
.plotted .ambient { opacity: 1; }
html:not(.js) .ambient { opacity: 1; }

@keyframes slow-rotate { to { transform: rotate(360deg); } }

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 130%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 140px 32px 150px;
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.06;
}

.hero-thesis {
  max-width: 600px;
  margin: 26px 0 0;
  font-family: var(--serif);
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.32;
  color: var(--text-fog);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

html.js .hero-copy { animation: rise 700ms ease-out both; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- cert strip ---------- */

.cert-strip { background: var(--navy-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cert-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-fine);
}
.cert-inner b { font-weight: 500; color: var(--light-teal); }

/* ---------- sections ---------- */

.section { position: relative; padding: 130px 32px; }
.section.compact { padding: 96px 32px; }

.section-head, .section-header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 56px;
}

.section-head p, .section-header p { margin: 0; color: var(--text-fog); font-size: 18px; max-width: 520px; }

/* reveals enhance already-visible content: no hidden default, so
   crawlers, link unfurlers, and hidden tabs always see the page */
html.js [data-reveal].is-in { animation: reveal-rise 680ms ease-out; }
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(26px); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}

.body-copy { color: var(--text-fog); font-size: 17px; }
.body-copy p { margin: 0 0 18px; }
.body-copy p:last-of-type { margin-bottom: 0; }
.body-copy .button { margin-top: 18px; }

.large-copy {
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.35;
  color: var(--text-fog);
}

.section-cta { margin-top: 44px; display: flex; justify-content: center; }

/* ---------- entry cards / problem section ---------- */

.entry-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.entry-card {
  border: 1px solid var(--border-card);
  border-radius: var(--r-ui);
  background: linear-gradient(180deg, rgba(4, 93, 98, 0.55), rgba(4, 93, 98, 0.28));
  box-shadow: var(--shadow-card);
  padding: 24px;
  min-height: 130px;
}
.entry-card strong { display: block; color: var(--text-white); font-size: 17px; margin-bottom: 8px; }
.entry-card span { color: var(--text-incard); font-size: 14.5px; }
.entry-card .seq { display: block; margin-bottom: 14px; font-size: 11px; }

/* ---------- provenance plate ---------- */

.plate-band {
  position: relative;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-deep) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.plate {
  position: relative;
  border: 1px solid var(--border-card);
  border-radius: var(--r-panel);
  background: rgba(0, 23, 45, 0.62);
  box-shadow: var(--shadow-plate);
  padding: 44px 44px 38px;
}

.plate-cols {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr);
  column-gap: 26px;
}

/* row connectors: architecture row -> through node -> record row (positioned by JS) */
.row-conn {
  position: absolute;
  height: 2px;
  background: rgba(204, 68, 204, 0.7);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms ease-out, opacity 180ms ease;
  pointer-events: none;
}
.row-conn:after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  border-left: 8px solid rgba(204, 68, 204, 0.9);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.is-in .row-conn, html:not(.js) .row-conn { transform: scaleX(1); }
.row-conn[data-row="1"] { transition-delay: 500ms; }
.row-conn[data-row="2"] { transition-delay: 650ms; }
.row-conn[data-row="3"] { transition-delay: 800ms; }
.row-conn[data-row="4"] { transition-delay: 950ms; }
.row-conn[data-row="5"] { transition-delay: 1100ms; }
.row-conn { opacity: 0.55; }
.row-conn.active { opacity: 1; }

.col-label { margin: 0 0 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.col-label.teal { color: var(--light-teal); }
.col-label.magenta { color: var(--magenta); text-align: center; }
.col-sub { margin: 0 0 26px; color: var(--text-fine); font-size: 14px; }
.col-sub.center { text-align: center; }

/* column headers center over their columns */
.arch-col > div:first-child, .rec-col .rec-head { text-align: center; }

.arch-col, .rec-col { display: grid; gap: 16px; align-content: start; }

.arch-row, .rec-row {
  position: relative;
  min-height: 96px;
  border: 1px solid var(--border-card);
  border-radius: var(--r-ui);
  background: var(--petrol-dark);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.arch-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  cursor: pointer;
  color: var(--text-incard);
}
.arch-row:after {
  content: "";
  position: absolute;
  top: -1px; bottom: -1px; right: -1px;
  width: 4px;
  border-radius: 0 var(--r-ui) var(--r-ui) 0;
  background: var(--magenta);
  opacity: 0.4;
  transition: opacity 180ms ease;
}
.arch-row strong {
  display: block;
  color: var(--text-white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.arch-row span { font-size: 15px; line-height: 1.4; }

.rec-row {
  display: flex;
  align-items: center;
  padding: 16px 20px 16px 24px;
  color: var(--text-incard);
  font-size: 15.5px;
  line-height: 1.42;
}
.rec-row:before {
  content: "";
  position: absolute;
  top: -1px; bottom: -1px; left: -1px;
  width: 4px;
  border-radius: var(--r-ui) 0 0 var(--r-ui);
  background: var(--magenta);
  opacity: 0.4;
  transition: opacity 180ms ease;
}

.rec-row.mobile-rec { display: none; }

.arch-row.active, .rec-row.active {
  background: var(--petrol);
  border-color: rgba(204, 68, 204, 0.6);
  box-shadow: 0 10px 34px rgba(0, 10, 25, 0.4);
  transform: translateY(-1px);
}
.arch-row.active:after, .rec-row.active:before { opacity: 1; }

/* spine (nodes positioned by JS to row-pair centers) */
.spine { position: relative; }

.spine-track {
  position: absolute;
  left: 50%;
  width: 0;
  border-left: 2px dotted rgba(204, 68, 204, 0.55);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 1100ms ease-out 200ms;
}
.is-in .spine-track, html:not(.js) .spine-track { transform: translateX(-50%) scaleY(1); }

.spine-node {
  position: absolute;
  left: 50%;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--navy-deep);
  border: 2px solid var(--magenta);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 8px var(--navy-deep);
  opacity: 0;
  cursor: pointer;
  transition: background 180ms ease, opacity 400ms ease;
}
.is-in .spine-node, html:not(.js) .spine-node { opacity: 1; }

/* delays apply to opacity (entry reveal) only; background switches instantly */
.spine-node[data-node="1"] { transition-delay: 0ms, 300ms; }
.spine-node[data-node="2"] { transition-delay: 0ms, 480ms; }
.spine-node[data-node="3"] { transition-delay: 0ms, 660ms; }
.spine-node[data-node="4"] { transition-delay: 0ms, 840ms; }
.spine-node[data-node="5"] { transition-delay: 0ms, 1020ms; }

.spine-node i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-white);
  transform: rotate(-45deg);
}
.spine-node.active { background: var(--magenta-fill); }

/* terminal record + feedback loop */
.plate-out {
  position: relative;
  margin-top: 72px;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.record-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 30px;
  border-radius: var(--r-ui);
  background: var(--magenta-fill);
  color: var(--text-white);
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 600;
  box-shadow: 0 14px 44px rgba(0, 10, 25, 0.5);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease 1200ms, transform 500ms ease 1200ms;
}
.is-in .record-bar, html:not(.js) .record-bar { opacity: 1; transform: none; }

.loop-caption {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--text-fine);
  opacity: 0;
  transition: opacity 400ms ease 1500ms;
}
.is-in .loop-caption, html:not(.js) .loop-caption { opacity: 1; }

.record-caption {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--text-fine);
  opacity: 0;
  transition: opacity 500ms ease 1500ms;
}
.is-in .record-caption, html:not(.js) .record-caption { opacity: 1; }

.loop { position: absolute; inset: 0; pointer-events: none; }
.loop-h, .loop-v { position: absolute; }
.loop-h {
  height: 0;
  border-bottom: 1.5px solid rgba(204, 68, 204, 0.7);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 600ms ease-out 1700ms;
}
.loop-v {
  width: 0;
  border-left: 1.5px solid rgba(204, 68, 204, 0.7);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 600ms ease-out 2300ms;
}
.loop-tip {
  position: absolute;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid rgba(204, 68, 204, 0.85);
  opacity: 0;
  transition: opacity 300ms ease 2900ms;
}
.is-in .loop-h, html:not(.js) .loop-h { transform: scaleX(1); }
.is-in .loop-v, html:not(.js) .loop-v { transform: scaleY(1); }
.is-in .loop-tip, html:not(.js) .loop-tip { opacity: 1; }

/* spine continuation: dotted drop from node 5 into the record bar */
.loop-down {
  position: absolute;
  width: 0;
  border-left: 2px dotted rgba(204, 68, 204, 0.55);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 500ms ease-out 1100ms;
}
.loop-down-tip {
  position: absolute;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid rgba(204, 68, 204, 0.85);
  opacity: 0;
  transition: opacity 300ms ease 1500ms;
}
.is-in .loop-down, html:not(.js) .loop-down { transform: scaleY(1); }
.is-in .loop-down-tip, html:not(.js) .loop-down-tip { opacity: 1; }

/* the bolt wheel is the play trigger; the drawing invites, not a button.
   the hero content layer must be click-transparent (interactive children
   opt back in) or it swallows clicks meant for the wheel beneath it */
.hero .hero-inner { pointer-events: none; }
.hero .hero-inner a, .hero .hero-inner button { pointer-events: auto; }

html.js .piece-trigger {
  pointer-events: auto;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M11 27 L11 13 Q11 10.5 13 10.5 Q15 10.5 15 13 L15 6 Q15 3.5 17 3.5 Q19 3.5 19 6 L19 13 L19 8 Q19 5.5 21 5.5 Q23 5.5 23 8 L23 14 L23 11 Q23 9 24.8 9 Q26.5 9 26.5 11 L26.5 19 Q26.5 24 23 27 Z" fill="white" stroke="%23002344" stroke-width="1.4"/><path d="M8.5 15 Q6 13 7.5 11.2 Q9 9.6 11 11.5 L13 13.6" fill="white" stroke="%23002344" stroke-width="1.4"/></svg>') 15 4, pointer;
}
html.js .piece-trigger:focus { outline: none; }
html.js .piece-trigger:focus-visible { outline: none; }
html.js .piece-trigger:focus-visible .hub { stroke-width: 2.4; stroke-opacity: 1; }
.hero.released .piece-trigger { cursor: inherit; }

/* Play cue offset left of the wheel, curved arrow pointing at it.
   Appears quickly as the plot finishes; returns fast after a rebuild
   instead of waiting out the ambient layer's long fuse. */
.play-cue {
  pointer-events: none;
  opacity: 0;
}
.plotted .play-cue {
  animation:
    cue-in 500ms ease-out 1300ms forwards,
    cue-bob 2.4s ease-in-out 1.8s infinite;
}
.hero.rebuilt.plotted .play-cue {
  animation:
    cue-in 350ms ease-out 250ms forwards,
    cue-bob 2.4s ease-in-out 0.6s infinite;
}
.hero.released .play-cue { animation: none !important; opacity: 0 !important; }
html:not(.js) .play-cue { opacity: 1; }
@keyframes cue-in { to { opacity: 1; } }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* the magenta hub pulses once the drawing has finished plotting */
.plotted [data-plot] circle.hub {
  animation:
    plot 850ms ease-out forwards,
    hub-pulse 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1ms), 3.4s;
}
.hero.released [data-plot] circle.hub { animation: plot 1ms forwards; stroke-dashoffset: 0; }
@keyframes hub-pulse {
  0%, 100% { stroke-opacity: 0.6; stroke-width: 0.9; }
  50% { stroke-opacity: 1; stroke-width: 2.2; }
}

/* Rebuild exists only while the architecture is loose: top-right,
   arriving visibly once the collapse has had its moment */
#heroRebuild {
  display: none;
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 18px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 13.5px;
  box-shadow: none;
  background: rgba(0, 23, 45, 0.92);
  color: #DA77DA; /* brighter magenta: small text on dark needs >=4.5:1 */
  border-color: rgba(204, 68, 204, 0.55);
  opacity: 0;
  transform: translateY(-8px);
}
#heroRebuild:hover {
  background: rgba(204, 68, 204, 0.14);
  border-color: var(--magenta);
  color: #DA77DA;
}
.hero.released #heroRebuild {
  display: inline-flex;
  animation: rebuild-in 420ms ease-out 600ms forwards;
}
@keyframes rebuild-in {
  to { opacity: 1; transform: none; }
}

/* play is a desktop-and-large-tablet feature: on small screens the
   gesture surface belongs to scrolling, so no entry point is offered
   and the hero stays the plotted drawing with ambient motion */

/* while released, vertical scroll stays available; the script swallows
   only touches that land on a physics piece */
.hero.released .field-wrap svg { touch-action: pan-y; }


/* release mode: the field becomes grabbable, hero text stays clickable */
.hero.released .field-wrap { pointer-events: auto; }
.hero.released .field-wrap svg {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M11 27 L11 13 Q11 10.5 13 10.5 Q15 10.5 15 13 L15 6 Q15 3.5 17 3.5 Q19 3.5 19 6 L19 13 L19 8 Q19 5.5 21 5.5 Q23 5.5 23 8 L23 14 L23 11 Q23 9 24.8 9 Q26.5 9 26.5 11 L26.5 19 Q26.5 24 23 27 Z" fill="white" stroke="%23002344" stroke-width="1.4"/><path d="M8.5 15 Q6 13 7.5 11.2 Q9 9.6 11 11.5 L13 13.6" fill="white" stroke="%23002344" stroke-width="1.4"/></svg>') 15 4, grab;
}
.hero.released .field-wrap svg.grabbing {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M10 26 L10 17 Q10 14 12.5 14.5 L13 14.6 L13 12 Q13 9.6 15 9.6 Q17 9.6 17 12 L17 11 Q17 8.6 19 8.6 Q21 8.6 21 11 L21 12.4 Q21 10.4 22.8 10.4 Q24.6 10.4 24.6 12.4 L24.6 19 Q24.6 23.5 21.5 26 Z" fill="white" stroke="%23002344" stroke-width="1.4"/></svg>') 15 4, grabbing;
}
.hero.released .ambient { opacity: 0 !important; }

/* ---------- cards and grids ---------- */

.cards, .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-card);
  border-radius: var(--r-ui);
  background: linear-gradient(180deg, rgba(4, 93, 98, 0.62), rgba(4, 93, 98, 0.34));
  box-shadow: var(--shadow-card);
  padding: 30px 28px;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.card:hover { border-color: var(--light-teal); transform: translateY(-3px); box-shadow: 0 22px 56px rgba(0, 10, 25, 0.45); }

.card .label, .card .price {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light-teal);
}
.card h3 { margin: 0 0 12px; font-size: 23px; line-height: 1.18; }
.card h3 a { color: inherit; }
.card p:not(.label):not(.price):not(.eyebrow) { margin: 0 0 18px; color: var(--text-incard); font-size: 15px; }
.card .eyebrow { margin-bottom: 12px; }
.card .button, .card .text-link { margin-top: auto; align-self: flex-start; }

.card.offer { min-height: 320px; }

.card.featured { border-color: rgba(204, 68, 204, 0.55); background: linear-gradient(180deg, rgba(6, 120, 125, 0.78), rgba(4, 93, 98, 0.4)); }
.card.featured:before {
  content: "Most direct start";
  position: absolute;
  top: -10px;
  left: 24px;
  padding: 2px 10px;
  border-radius: 3px;
  background: var(--magenta-fill);
  color: var(--text-white);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.survey-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(95, 192, 197, 0.35); background: rgba(6, 120, 125, 0.16); padding: 18px 22px; margin: 0 0 20px; border-radius: var(--r-ui); }
.survey-strip p { margin: 0; color: var(--text-incard); font-size: 15px; line-height: 1.5; }
.survey-strip strong { color: #FFFFFF; }
.survey-strip .button { flex-shrink: 0; }
@media (max-width: 700px) { .survey-strip { flex-direction: column; align-items: flex-start; } }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 56px; margin-top: 10px; }
.faq-item { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 18px; }
.faq-item h3 { font-size: 19px; line-height: 1.35; margin: 0 0 10px; color: #FFFFFF; }
.faq-item p { margin: 0; color: var(--text-fog); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } }
.offerings-grid { display: grid; gap: 20px; }
.offer-lenses { margin: 12px 0 14px; padding-left: 18px; display: grid; gap: 10px; }
.offer-lenses li { color: var(--text-incard); font-size: 15px; line-height: 1.55; }
.offer-lenses li strong { color: #FFFFFF; }

.service-proof {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--magenta);
  background: rgba(0, 23, 45, 0.4);
  font-size: 14px;
  color: var(--text-incard);
}
.service-proof cite { display: block; margin-top: 8px; font-style: normal; color: var(--text-fine); font-size: 12.5px; }

/* ---------- light bands ---------- */

.band-light, .cream-band { background: var(--paper); color: var(--navy); }

.band-light h2, .cream-band h2, .band-light h3, .cream-band h3 { color: var(--navy); }
.band-light p, .cream-band p { color: rgba(0, 35, 68, 0.78); }
.band-light .large-copy, .cream-band .large-copy,
.band-light .body-copy, .cream-band .body-copy { color: rgba(0, 35, 68, 0.78); }
.band-light .section-head p, .cream-band .section-header p { color: rgba(0, 35, 68, 0.72); }

.band-light .eyebrow, .cream-band .eyebrow { color: var(--magenta-brand); }
.band-light .eyebrow:before, .cream-band .eyebrow:before { background: var(--magenta-brand); }
.band-light .seq, .cream-band .seq { color: var(--magenta-brand); }

.cream-band .card, .band-light .card {
  background: var(--cream);
  border-color: var(--line-light);
  box-shadow: 0 18px 50px rgba(0, 35, 68, 0.08);
}
.cream-band .card h3, .band-light .card h3 { color: var(--navy); }
.cream-band .card p:not(.label):not(.price), .band-light .card p:not(.label):not(.price) { color: rgba(0, 35, 68, 0.75); }
.cream-band .card .label, .cream-band .card .price,
.band-light .card .label, .band-light .card .price { color: var(--magenta-brand); }

/* navy band (legacy) */
.navy-band {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- quotes and testimonials ---------- */

.quote-card {
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--magenta-brand);
  border-radius: 0 var(--r-ui) var(--r-ui) 0;
  background: var(--cream);
  box-shadow: 0 18px 50px rgba(0, 35, 68, 0.08);
  padding: 38px 40px;
  color: var(--navy);
}
.quote-card blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 500;
  line-height: 1.28;
  color: var(--navy);
}
.quote-card cite { display: block; margin-top: 24px; font-style: normal; font-size: 14px; color: rgba(0, 35, 68, 0.64); }
.quote-card cite b, .quote-card cite strong { display: block; color: var(--navy); font-weight: 600; }
.quote-card cite span { display: block; margin-top: 2px; }

.quote-card.featured { background: var(--navy); border-color: var(--navy); border-left-color: var(--magenta); }
.quote-card.featured blockquote { color: var(--cream); }
.quote-card.featured cite { color: rgba(251, 250, 246, 0.7); }
.quote-card.featured cite b, .quote-card.featured cite strong { color: var(--cream); }

.testimonial-carousel { display: grid; gap: 20px; max-width: 100%; }
.testimonial-window { overflow: hidden; }
.testimonial-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }

.testimonial-card {
  flex: 0 0 calc((100% - 20px) / 2);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
}

.testimonial-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.carousel-button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(0, 35, 68, 0.3);
  border-radius: var(--r-ui);
  background: transparent;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.carousel-button:hover { border-color: var(--magenta-brand); background: var(--magenta-brand); color: var(--cream); }
.carousel-dots { display: flex; gap: 8px; align-items: center; }
.carousel-dot { width: 28px; height: 3px; border: 0; border-radius: 2px; background: rgba(0, 35, 68, 0.2); padding: 0; cursor: pointer; }
.carousel-dot.is-active { background: var(--magenta-brand); }

/* ---------- about ---------- */

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.about-copy p { margin: 0 0 22px; color: var(--text-fog); font-size: 17.5px; }

/* ---------- legacy page furniture ---------- */

.page-hero {
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.page-hero .section { padding: 110px 32px 90px; }
.page-hero h1 {
  max-width: 880px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
}
.page-hero p { max-width: 640px; margin: 22px 0 0; color: var(--text-fog); font-size: 18px; }

.framework-teaser { font-size: 15.5px; color: var(--text-fine); }
.framework-teaser a { color: var(--light-teal); }
.framework-teaser a:hover { color: var(--text-white); }

.oda-principle {
  border: 1px solid var(--border-card);
  border-radius: var(--r-ui);
  background: var(--petrol);
  box-shadow: var(--shadow-card);
  padding: 36px 34px;
  display: grid;
  gap: 20px;
}
.oda-principle span {
  position: relative;
  display: block;
  padding-left: 22px;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-white);
}
.oda-principle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 10px;
  height: 2px;
  background: var(--magenta);
}

.work-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}

.credential-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.credential {
  border: 1px solid var(--line-light);
  border-radius: var(--r-ui);
  background: var(--cream);
  padding: 18px;
}
.credential strong { display: block; color: var(--navy); font-size: 15px; margin-bottom: 6px; }
.credential span { color: rgba(0, 35, 68, 0.66); font-size: 13px; line-height: 1.4; }

.founder-profile {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.founder-image img { width: 100%; border-radius: var(--r-panel); border: 1px solid var(--border-card); }

/* ---------- forms (contact) ---------- */

.form {
  display: grid;
  gap: 18px;
  border: 1px solid var(--border-card);
  border-radius: var(--r-panel);
  background: rgba(0, 23, 45, 0.6);
  box-shadow: var(--shadow-card);
  padding: 34px 32px;
}

.form-fields { display: grid; gap: 16px; }

.form label {
  display: grid;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-fog);
}

.form input,
.form select,
.form textarea {
  font: inherit;
  color: var(--text-white);
  background: rgba(4, 93, 98, 0.35);
  border: 1px solid var(--border-card);
  border-radius: var(--r-ui);
  padding: 11px 12px;
  transition: border-color 160ms ease, background 160ms ease;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--light-teal);
  background: rgba(4, 93, 98, 0.5);
}
.form textarea { min-height: 120px; resize: vertical; }
.form option { color: var(--navy); background: var(--cream); }

.optional-label { font-weight: 400; color: var(--text-fine); font-size: 12px; }

.form-note { margin: 0; font-size: 12.5px; color: var(--text-fine); }
.form-note a { color: var(--light-teal); }

.form-status { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--light-teal); }
.form-status.is-error { color: #FF9D9D; }

.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact-direct { margin-top: 18px; font-size: 15.5px; }
.contact-direct a { color: var(--light-teal); border-bottom: 1px solid rgba(95, 192, 197, 0.4); }
.contact-direct a:hover { color: var(--text-white); border-color: var(--text-white); }

/* ---------- CTA band ---------- */

.cta-band {
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.cta-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 110px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
}
.cta-inner p { margin: 14px 0 0; color: var(--text-fog); font-size: 18px; max-width: 580px; }

/* ---------- footer ---------- */

.site-footer { background: var(--navy-deep); border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-fine); }
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  font-size: 13px;
}
.footer-brand { font-family: var(--serif); font-size: 20px; color: var(--text-white); margin-bottom: 6px; }
.footer-email { color: var(--light-teal); }
.footer-email:hover { color: var(--text-white); }
.footer-inner .legal { max-width: 680px; margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.footer-inner .legal a { color: var(--text-fog); border-bottom: 1px solid rgba(217, 222, 220, 0.3); }
.footer-meta { margin: 6px 0 0; font-size: 12px; }
.footer-links { display: flex; gap: 18px; }
.footer-links a:hover { color: var(--text-white); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  html.js [data-plot] line, html.js [data-plot] path, html.js [data-plot] rect, html.js [data-plot] circle { stroke-dashoffset: 0; }
  html.js [data-plot] .dot { opacity: 1; }
  .bolt-ring, .dial { animation: none; }
  .tracer { display: none; }
  .ambient { opacity: 1; }
  .spine-track { transform: translateX(-50%) scaleY(1); }
  .spine-node { opacity: 1; }
  .record-bar, .record-caption, .loop-caption, .loop-tip { opacity: 1; }
  .record-bar { transform: none; }
  .loop-h { transform: scaleX(1); }
  .loop-v { transform: scaleY(1); }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .nav { flex-wrap: wrap; gap: 12px; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; gap: 18px; padding-bottom: 4px; }
  .notice-inner { padding: 8px 20px; }

  .hero-inner { padding: 84px 24px 96px; }
  .section, .section.compact { padding: 84px 24px; }
  .page-hero .section { padding: 76px 24px 64px; }

  .section-head, .section-header, .split, .work-panel, .about-split,
  .cta-inner, .footer-inner, .founder-profile { grid-template-columns: minmax(0, 1fr); }
  .section-head, .section-header { gap: 20px; }
  .split, .work-panel, .about-split { gap: 40px; }
  .hero-inner > *, .split > *, .work-panel > * { min-width: 0; }

  .entry-cards, .cards, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .credential-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card.offer { min-height: 0; }

  /* plate: interleave rows, hide spine and right column, keep pairing */
  .plate { padding: 26px 18px; }
  .plate-cols { display: block; }
  .spine, .rec-col, .col-sub.center, .col-label.magenta, .row-conn { display: none; }
  .arch-col { display: block; }
  .plate-cols .pair { display: grid; gap: 0; margin-bottom: 18px; }
  .pair .arch-row { border-radius: var(--r-ui) var(--r-ui) 0 0; }
  .pair .arch-row:after { display: none; }
  .pair .rec-row.mobile-rec {
    display: flex;
    border-top: 0;
    border-radius: 0 0 var(--r-ui) var(--r-ui);
    min-height: 0;
    font-size: 14px;
  }
  .loop { display: none; }

  /* the record caption is JS-positioned and nowrap on desktop; on phones
     it must be a normal wrapped line inside the card (important beats any
     stale inline positioning from a desktop-size pass) */
  .record-caption {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }

  .testimonial-card { flex-basis: 100%; min-height: 0; }
  .quote-card { padding: 28px 24px; }
}

@media (max-width: 560px) {
  .hero-inner { padding-left: 20px; padding-right: 20px; }
  .credential-strip { grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .record-bar { font-size: 15px; padding: 0 16px; min-height: 48px; text-align: center; }
  /* the survey notice duplicates the hero CTA two inches below it */
  .notice-secondary { display: none; }
}

/* Artifact figure: framed deliverable exhibit (Audit Cross-Walk page) */
.artifact-figure { margin: 0 auto; max-width: 680px; border: 1px solid var(--border-card); border-radius: var(--r-panel); overflow: hidden; background: var(--navy-deep); box-shadow: var(--shadow-card); }
.artifact-figure img { display: block; width: 100%; height: auto; }
.artifact-figure figcaption { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--text-fine); padding: 12px 16px; border-top: 1px solid var(--border-card); text-transform: uppercase; }