/* ============ TOKENS ============ */
:root{
  --paper: #FAFAF7;
  --paper-dim: #F2F1EC;
  --ink: #14171B;
  --slate: #5B616B;
  --line: #E3E1DB;
  --verified: #0F6FA8;   /* primary accent — calibrated / confirmed */
  --verified-light: #5FCBEC;
  --verified-deep: #0A4E85;
  --verified-grad: linear-gradient(120deg, var(--verified-light), var(--verified) 50%, var(--verified-deep) 100%);
  --verified-10: rgba(15,111,168,0.10);
  --flag: #C97A3E;       /* secondary accent — used sparingly */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --container: 1120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 40px; }

::selection{ background:var(--verified); color:var(--paper); }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--verified);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ============ NAV + CALIBRATION BAR ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(250,250,247,0.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--container); margin:0 auto; padding:20px 40px;
}
.nav-name{
  font-family:var(--font-display); font-weight:600; font-size:16px;
  letter-spacing:0.02em; display:flex; align-items:center; gap:8px;
  user-select:none;
}
.nav-name .word{ position:relative; display:inline-flex; overflow:visible; }
.nav-name.recalibrating .word{ animation:word-flicker .55s ease-out; }
@keyframes word-flicker{
  0%{ filter:brightness(1); }
  12%{ filter:brightness(1.7); }
  20%{ filter:brightness(0.95); }
  36%{ filter:brightness(1.4); }
  55%{ filter:brightness(1); }
  100%{ filter:brightness(1); }
}
.nav-name .nl{ display:inline-block; }
.nav-name.recalibrating .nl{
  animation:letter-flow .6s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--i) * 42ms);
}
@keyframes letter-flow{
  0%{ transform:translateY(0) scale(1); filter:blur(0); opacity:1; color:var(--ink); }
  30%{ transform:translateY(7px) scale(0.82); filter:blur(2.5px); opacity:.3; color:var(--verified); }
  100%{ transform:translateY(0) scale(1); filter:blur(0); opacity:1; color:var(--ink); }
}
.nav-scan{
  position:absolute; top:-3px; bottom:-3px; left:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--verified-light) 30%, var(--verified) 55%, var(--verified-deep) 75%, transparent);
  opacity:0; pointer-events:none;
}
.nav-name.recalibrating .nav-scan{ animation:nav-sweep .62s cubic-bezier(.65,0,.35,1); }
@keyframes nav-sweep{
  0%{ opacity:1; left:-6%; }
  88%{ opacity:1; }
  100%{ left:104%; opacity:0; }
}
.nav-name .bolt-mark{
  position:relative; width:14px; height:14px;
  display:inline-flex; align-items:center; justify-content:center;
  transform:rotate(-4deg); margin-left:1px;
}
.nav-name .bolt-mark svg{
  width:100%; height:100%; fill:url(#brandGrad); transition:transform .15s ease;
}
.nav-name:hover .bolt-mark svg{ transform:scale(1.15); }
.nav-name .bolt-mark::after{
  content:''; position:absolute; inset:-9px; border-radius:50%;
  background:radial-gradient(circle, var(--verified-light) 0%, var(--verified-10) 55%, transparent 75%);
  opacity:0; transform:scale(0.3);
}
.nav-name.recalibrating .bolt-mark svg{ animation:bolt-strike .55s cubic-bezier(.34,1.56,.64,1); }
.nav-name.recalibrating .bolt-mark::after{ animation:flash-burst .55s ease-out; }
@keyframes bolt-strike{
  0%{ transform:rotate(-4deg) scale(1); filter:drop-shadow(0 0 0 transparent); }
  12%{ transform:rotate(6deg) scale(1.35); filter:drop-shadow(0 0 6px var(--verified-light)); }
  24%{ transform:rotate(-10deg) scale(0.9); filter:drop-shadow(0 0 2px transparent); }
  36%{ transform:rotate(4deg) scale(1.2); filter:drop-shadow(0 0 5px var(--verified-light)); }
  55%{ transform:rotate(-4deg) scale(1); filter:drop-shadow(0 0 0 transparent); }
  100%{ transform:rotate(-4deg) scale(1); filter:drop-shadow(0 0 0 transparent); }
}
@keyframes flash-burst{
  0%{ opacity:0; transform:scale(0.3); }
  15%{ opacity:.9; transform:scale(1.1); }
  100%{ opacity:0; transform:scale(2.1); }
}
.nav-links{ display:flex; gap:32px; }
.nav-links a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--slate);
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); border-color:var(--verified); }

.cal-track{
  position:relative; height:2px; background:var(--line);
}
.cal-fill{
  position:absolute; top:0; left:0; height:100%;
  background:var(--verified); width:0%;
  transition:width .08s linear;
}
.cal-tick{
  position:absolute; top:-2px; width:1px; height:6px; background:var(--ink);
  opacity:.35;
}

/* ============ SECTION SHELL ============ */
section{ padding:100px 0; border-bottom:1px solid var(--line); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:64px; gap:24px; flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.4vw,38px);
  letter-spacing:-0.01em;
}
.section-note{
  font-family:var(--font-mono); font-size:12px; color:var(--slate);
  max-width:34ch; text-align:right;
}

/* ============ BUTTONS ============ */
.btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  text-transform:uppercase; padding:13px 24px;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); border-radius:2px;
  display:inline-block;
  transition:background .15s ease, color .15s ease;
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn-ghost{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--slate);
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease;
}
.btn-ghost:hover{ color:var(--ink); border-color:var(--verified); }

/* placeholder-content flag (visible in code + on page so it's easy to find) */
.todo{ background:var(--verified-10); border-radius:2px; padding:0 4px; }

footer{
  padding:28px 0; display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:11px; color:var(--slate);
  flex-wrap:wrap; gap:12px;
}

/* ============ IMAGE LIGHTBOX (case studies) ============ */
.zoomable-wrap{
  position:relative;
  cursor:zoom-in;
  border-radius:3px;
  overflow:hidden;
}
.zoomable-wrap img{ display:block; width:100%; height:auto; }
.zoomable-overlay{
  position:absolute; inset:0;
  background:rgba(20,23,27,0.5);
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--paper);
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .2s ease;
}
.zoomable-overlay svg{ width:16px; height:16px; flex-shrink:0; }
.zoomable-wrap:hover .zoomable-overlay,
.zoomable-wrap:focus-visible .zoomable-overlay{ opacity:1; }

.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,17,20,0.94);
  display:flex; align-items:center; justify-content:center;
  padding:56px;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease;
  cursor:zoom-out;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:100%; max-height:100%;
  border-radius:3px;
  box-shadow:0 24px 64px rgba(0,0,0,0.45);
}
.lightbox-close{
  position:absolute; top:24px; right:28px;
  width:40px; height:40px;
  border:1px solid rgba(250,250,247,0.25); border-radius:50%;
  background:rgba(250,250,247,0.06);
  color:var(--paper);
  font-family:var(--font-mono); font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.lightbox-close:hover{ background:rgba(250,250,247,0.14); border-color:var(--verified); }

@media (max-width: 620px){
  .lightbox{ padding:24px; }
  .zoomable-overlay{ font-size:11px; }
}

/* ============ RESPONSIVE (shared) ============ */
@media (max-width: 860px){
  .wrap, nav{ padding-left:24px; padding-right:24px; }
  section{ padding:72px 0; }
  .nav-links{ gap:18px; }
}
@media (max-width: 520px){
  .nav-links a{ font-size:10.5px; }
}

/* ---- Mono label weight ----
   The small uppercase mono kickers (section labels, eyebrows, field labels,
   card/step numbers, table heads) were too light to read at 11–12px.
   Applied globally so every case study picks it up. Plex Mono 500 is loaded. */
.eyebrow, .gate-eyebrow, .cs-block-sub, .feat-kicker, .feat-step,
.field-label, .shot-label, .card-label, .cap-num, .stage-num,
.ba-label, .edge-label, .task-row.head{
  font-weight:500;
}

/* Mono labels at a fixed 14px (each page sets its own size inline,
   so this needs !important to win the cascade). */
.eyebrow, .gate-eyebrow, .cs-block-sub, .feat-kicker, .feat-step,
.field-label, .shot-label, .card-label, .cap-num, .stage-num,
.ba-label, .edge-label, .task-row.head{
  font-size:14px !important;
}

/* ============ CASE STUDY VERTICAL RHYTHM ============
   One spacing scale for every case study, applied to the direct children of
   a section's .wrap. Baseline: any block that follows another gets 32px.
   Tighter pairs (a heading and the copy under it, paragraph runs, a figure
   and its caption) and looser ones (a new heading mid-section, a figure or
   table after prose) are the only exceptions. Pages must not set margin-top
   inline on these children — that would override the scale. */
:root{
  --cs-gap-tight:20px;   /* paragraph after paragraph */
  --cs-gap-base:32px;    /* minimum between any two blocks */
  --cs-gap-block:40px;   /* figures, tables, grids, quotes after prose */
  --cs-gap-h3:56px;      /* new sub-heading mid-section */
  --cs-gap-h2:64px;      /* new heading mid-section */
}
.cs-section .wrap > * + *{ margin-top:var(--cs-gap-base); }

/* Headings: the copy directly under a heading sits close to it */
.cs-section .wrap > h2{ margin-bottom:0; }
.cs-section .wrap > h2 + *{ margin-top:24px; }
.cs-section .wrap > h3{ font-size:16.5px; margin-bottom:0; }
.cs-section .wrap > h3 + *{ margin-top:14px; }
.cs-section .wrap > .cs-block-sub{ margin-bottom:0; }
.cs-section .wrap > .cs-block-sub + *{ margin-top:16px; }

/* New headings mid-section get the most room */
.cs-section .wrap > * + h2{ margin-top:var(--cs-gap-h2); }
.cs-section .wrap > * + h3{ margin-top:var(--cs-gap-h3); }
.cs-section .wrap > * + .cs-block-sub{ margin-top:var(--cs-gap-h2); }

/* Prose runs */
.cs-section .wrap > p + p{ margin-top:var(--cs-gap-tight); }
.cs-section .wrap > p + .cs-list,
.cs-section .wrap > p + .cs-stage-list{ margin-top:24px; }
.cs-section .wrap > .cs-quote + .cs-quote{ margin-top:24px; }

/* Visual blocks after prose */
.cs-section .wrap > * + .cs-figure,
.cs-section .wrap > * + .task-table,
.cs-section .wrap > * + .cap-grid,
.cs-section .wrap > * + .shot-grid,
.cs-section .wrap > * + .stage-grid,
.cs-section .wrap > * + .ba-grid,
.cs-section .wrap > * + .stat-table,
.cs-section .wrap > * + .metrics-panel,
.cs-section .wrap > * + .timeline,
.cs-section .wrap > * + .cs-quote,
.cs-section .wrap > * + .soon-panel,
.cs-section .wrap > * + .zoomable-wrap,
.cs-section .wrap > * + .edge-case{ margin-top:var(--cs-gap-block); }

/* A caption belongs to its figure */
.cs-section .wrap > .cs-figure + .cs-caption,
.cs-section .wrap > .shot-grid + .cs-caption,
.cs-section .wrap > .zoomable-wrap + .cs-caption,
.cs-section .wrap > .ba-grid + .cs-caption{ margin-top:20px; }
.cs-section .wrap > .cs-block-sub + .zoomable-wrap,
.cs-section .wrap > .cs-block-sub + .cs-figure{ margin-top:20px; }

/* A caption ends a figure; whatever follows starts fresh */
.cs-section .wrap > .cs-caption + p{ margin-top:var(--cs-gap-base); }

/* Feature rows keep their own, larger rhythm */
.cs-section .wrap > .feat,
.cs-section .wrap > .feat-divider{ margin-top:56px; }

@media (max-width: 860px){
  :root{ --cs-gap-h3:44px; --cs-gap-h2:52px; }
  .cs-section .wrap > .feat,
  .cs-section .wrap > .feat-divider{ margin-top:44px; }
}