/* ============================================================
   Freshwater Coast Analytics: brand tokens for the website.
   colors / typography / spacing / effects / base are verbatim copies of
   the canonical FWC\brand\tokens\ files (2026-07-18 revision); do not
   edit them here. Update the canonical files and re-copy instead.
   @font-face lists only the cuts this site uses (Thin, Book, Medium,
   Book Antiqua Italic), served from /fonts/.
   ============================================================ */
@font-face { font-family:'Gotham'; src:url('/fonts/Gotham-Thin.otf') format('opentype');   font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('/fonts/Gotham-Book.otf') format('opentype');   font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('/fonts/Gotham-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Book Antiqua'; src:url('/fonts/BookAntiqua-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }

/* ============================================================
   Freshwater Coast Analytics — Color tokens
   Core palette (from FCA_BrandBoard_v1):
     PMS 2945C  #00509F  deep ocean blue  (primary)
     white      #FFFFFF
     PMS 305C   #58CBF5  freshwater sky   (secondary/accent)
   Ramps below are harmonious extensions of those two anchors.
   ============================================================ */
:root {
  /* ---- Brand anchors ---- */
  --fca-blue: #00509F;   /* PMS 2945C — primary */
  --fca-sky:  #58CBF5;   /* PMS 305C  — accent  */
  --fca-white:#FFFFFF;

  /* ---- Deep blue ramp (anchored on #00509F = blue-500) ---- */
  --blue-50:  #EAF2FB;
  --blue-100: #CFE0F3;
  --blue-200: #9FBFE4;
  --blue-300: #6094CC;
  --blue-400: #2C6FB6;
  --blue-500: #00509F;   /* brand */
  --blue-600: #004488;
  --blue-700: #00396F;
  --blue-800: #002C58;
  --blue-900: #001E3D;

  /* ---- Freshwater sky ramp (anchored on #58CBF5 = sky-300) ---- */
  --sky-50:   #ECFAFE;
  --sky-100:  #D3F2FC;
  --sky-200:  #A6E5FA;
  --sky-300:  #58CBF5;   /* brand */
  --sky-400:  #33B7E9;
  --sky-500:  #189CCE;
  --sky-600:  #137FA8;
  --sky-700:  #146582;

  /* ---- Cool neutrals (slate, tinted toward brand blue) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F8FB;
  --neutral-100: #EDF1F6;
  --neutral-200: #DEE5EE;
  --neutral-300: #C4CFDC;
  --neutral-400: #98A6B7;
  --neutral-500: #6B798B;
  --neutral-600: #4E5B6C;
  --neutral-700: #38434F;   /* headings on light in neutral contexts */
  --neutral-800: #26303B;
  --neutral-900: #151E28;

  /* ---- Functional / status (cool-leaning, understated) ---- */
  --success-500: #1F9D6B;
  --success-50:  #E7F6EF;
  --warning-500: #DB8F27;
  --warning-50:  #FBF1DF;
  --danger-500:  #D24A3F;
  --danger-50:   #FBEAE8;
  --info-500:    var(--sky-500);
  --info-50:     var(--sky-50);

  /* =========================================================
     SEMANTIC ALIASES — reference these in components
     ========================================================= */

  /* Text */
  --text-primary:   #1B2733;
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-heading:   var(--blue-500);   /* brand blue headings */
  --text-link:      var(--blue-500);
  --text-link-hover:var(--blue-700);
  --text-on-brand:  #FFFFFF;
  --text-inverse:   #FFFFFF;
  --text-accent:    var(--sky-500);    /* italic taglines on light */

  /* Surfaces */
  --surface-page:        #FFFFFF;
  --surface-subtle:      var(--neutral-50);
  --surface-muted:       var(--neutral-100);
  --surface-card:        #FFFFFF;
  --surface-brand:       var(--blue-500);
  --surface-brand-strong:var(--blue-700);
  --surface-brand-subtle:var(--blue-50);
  --surface-sky-subtle:  var(--sky-50);
  --surface-dark:        var(--blue-800);
  --surface-dark-deep:   var(--blue-900);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--blue-500);
  --border-on-dark: rgba(255,255,255,0.16);

  /* Interactive / accent */
  --accent:         var(--blue-500);
  --accent-hover:   var(--blue-600);
  --accent-active:  var(--blue-700);
  --accent-sky:     var(--sky-300);
  --focus-ring:     rgba(88,203,245,0.55);

  /* Data-viz sequence (built from the two brand hues) */
  --viz-1: #00509F;
  --viz-2: #58CBF5;
  --viz-3: #2C6FB6;
  --viz-4: #146582;
  --viz-5: #9FBFE4;
  --viz-6: #189CCE;
}

/* ============================================================
   Freshwater Coast Analytics — Typography tokens
   Display / labels : Gotham  (Thin 100 for display, Medium 500 for labels/buttons)
   Body / UI        : Gotham Book (400)
   Accent           : Book Antiqua Italic (taglines, pull-quotes)
   The brand voice leans on airy, WIDE-TRACKED uppercase labels
   (as in the wordmark FRESHWATER COAST / ANALYTICS).
   ============================================================ */
:root {
  /* Families — Gotham is now the full brand family (display + body) */
  --font-display: 'Gotham', system-ui, -apple-system, sans-serif;
  --font-sans:    'Gotham', system-ui, -apple-system, sans-serif;
  --font-accent:  'Book Antiqua', 'Palatino Linotype', 'Palatino', Georgia, serif;
  --font-mono:    'SFMono-Regular', 'Consolas', ui-monospace, monospace;

  /* Weights (mapped to the real Gotham cuts) */
  --weight-thin:       100;   /* Gotham Thin — matches the wordmark; display default */
  --weight-extralight: 200;   /* Gotham Extra Light */
  --weight-light:      300;   /* Gotham Light */
  --weight-regular:    400;   /* Gotham Book — body default */
  --weight-medium:     500;   /* Gotham Medium — labels, buttons */
  --weight-semibold:   600;   /* resolves to Bold */
  --weight-bold:       700;   /* Gotham Bold */
  --weight-black:      800;   /* Gotham Black */
  --weight-ultra:      900;   /* Gotham Ultra */

  /* Type scale (px) */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — the brand's signature airy caps */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.14em;   /* eyebrow / small caps labels */
  --tracking-widest:  0.28em;   /* ANALYTICS-style spacing */

  /* -------- Semantic type roles -------- */
  /* Display headings use Gotham Thin, tight leading, slight tracking */
  --display-family:   var(--font-display);
  --display-weight:   var(--weight-thin);
  --display-leading:  var(--leading-tight);
  --display-tracking: 0.02em;

  /* Eyebrow / kicker (wide caps, brand signature) */
  --eyebrow-family:   var(--font-display);
  --eyebrow-weight:   var(--weight-medium);
  --eyebrow-size:     var(--text-xs);
  --eyebrow-tracking: var(--tracking-widest);

  /* Body */
  --body-family:  var(--font-sans);
  --body-weight:  var(--weight-regular);
  --body-size:    var(--text-base);
  --body-leading: var(--leading-relaxed);

  /* UI label / button */
  --label-family:   var(--font-display);
  --label-weight:   var(--weight-medium);
  --label-tracking: var(--tracking-wide);
}

/* ============================================================
   Freshwater Coast Analytics — Spacing & layout tokens
   4px base grid.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;
  --space-15: 160px;

  /* Layout */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --gutter:        var(--space-7);
  --section-y:     var(--space-13);   /* vertical rhythm between page sections */
}

/* ============================================================
   Freshwater Coast Analytics — Effects: radii, shadows, borders,
   motion. Brand is crisp & geometric (logo is built from square
   bars), so radii are restrained and shadows are soft + cool-tinted.
   ============================================================ */
:root {
  /* Corner radii */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;
  --radius-card: 8px;
  --radius-control: 6px;   /* buttons, inputs */

  /* Border widths */
  --border-width:      1px;
  --border-width-thick:2px;

  /* Shadows — tinted with the deep-blue (#002C58) for a cohesive cool feel */
  --shadow-xs: 0 1px 2px rgba(0,44,88,0.06);
  --shadow-sm: 0 1px 3px rgba(0,44,88,0.08), 0 1px 2px rgba(0,44,88,0.05);
  --shadow-md: 0 4px 14px rgba(0,44,88,0.10), 0 2px 4px rgba(0,44,88,0.05);
  --shadow-lg: 0 12px 30px rgba(0,44,88,0.12), 0 4px 8px rgba(0,44,88,0.06);
  --shadow-xl: 0 24px 56px rgba(0,44,88,0.16);
  --shadow-brand: 0 10px 28px rgba(0,80,159,0.28);
  --shadow-focus: 0 0 0 3px var(--focus-ring);
  --shadow-inset: inset 0 1px 2px rgba(0,44,88,0.06);

  /* Motion — measured, professional; no bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);     /* @kind other */
  --duration-fast:   120ms;   /* @kind other */
  --duration-base:   200ms;   /* @kind other */
  --duration-slow:   360ms;   /* @kind other */

  /* Elevation surfaces on dark */
  --ring-on-dark: inset 0 0 0 1px rgba(255,255,255,0.14);   /* @kind shadow */
}

/* ============================================================
   Freshwater Coast Analytics — Base element defaults + brand
   typographic helpers. Keep this light: tokens do the heavy lifting.
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--display-tracking);
  margin: 0;
}
h3, h4, h5, h6 { font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); }

a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }

/* ---- Brand typographic helpers ---- */
.fca-eyebrow {
  font-family: var(--eyebrow-family);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-sky);
}
.fca-display {
  font-family: var(--display-family);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  color: var(--text-heading);
}
.fca-tagline {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--text-accent);
}
/* Wide-tracked uppercase word (the "ANALYTICS" treatment) */
.fca-caps {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

::selection { background: var(--sky-200); color: var(--blue-900); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   freshwatercoastanalytics.com: site styles.
   Built only from the brand tokens in tokens.css (no new tokens,
   no raw hexes). Editorial layout: white ground, hairline rules,
   numbered sections, deep-blue bands, square bars.
   ============================================================ */

/* ---------- Reset and base extensions ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
strong, b { font-weight: var(--weight-medium); }
button { font: inherit; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--container-xl) + 80px);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* Prose links: underlined so they never rely on color alone */
.prose a, .link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--blue-200);
  transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard);
}
.prose a:hover, .link:hover { text-decoration-color: currentColor; }

/* ---------- Type roles ---------- */
.eyebrow {
  font-family: var(--eyebrow-family);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--sky-600);   /* sky-500 is 3.1:1 on white; sky-600 meets WCAG AA at 12px */
  line-height: 1.4;
}
.lede {
  font-size: clamp(17px, 0.5vw + 15px, 20px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 36em;
}
h2 {
  font-size: clamp(32px, 2vw + 22px, 48px);
  line-height: 1.08;
  letter-spacing: 0.01em;
}
.tagline {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--text-accent);
}

/* ---------- Buttons (recipe 4) ---------- */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 22px;
  border: 1px solid var(--border-default); border-radius: var(--radius-control);
  background: var(--surface-card); color: var(--blue-500);
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide);
  line-height: 1.2; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--blue-50); color: var(--blue-600); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn--primary { background: var(--blue-500); border-color: var(--blue-500); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-600); border-color: var(--blue-600); color: var(--text-on-brand); box-shadow: var(--shadow-brand); }
.btn--primary:active:not(:disabled) { background: var(--blue-700); }
.btn--sm { min-height: 40px; padding: 8px 16px; }
.btn--quiet { border-color: transparent; background: transparent; padding-inline: 4px; }
.btn--quiet:hover { background: transparent; color: var(--blue-700); }
.btn--quiet .arrow { transition: transform var(--duration-base) var(--ease-standard); }
.btn--quiet:hover .arrow { transform: translateX(3px); }
.btn--ghost-dark { background: transparent; border-color: rgba(255,255,255,0.32); color: var(--text-inverse); }
.btn--ghost-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); color: var(--text-inverse); }
.arrow { width: 16px; height: 16px; flex: none; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  background: var(--blue-500); color: var(--text-on-brand);
  padding: 10px 16px; border-radius: var(--radius-control);
  font-family: var(--label-family); font-weight: var(--label-weight); font-size: var(--text-sm);
}
.skip:focus { top: 12px; color: var(--text-on-brand); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-page);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled { border-bottom-color: var(--border-subtle); box-shadow: var(--shadow-xs); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
.brand:hover { color: inherit; }
.brand__mark { height: 34px; width: auto; }
.brand__text { display: flex; flex-direction: column; gap: 4px; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: 15px; letter-spacing: 0.02em; color: var(--blue-800); white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--sky-600);
}

.site-nav { display: flex; align-items: center; gap: 36px; }
.site-nav a:not(.btn) {
  position: relative; padding: 10px 0;
  font-family: var(--label-family); font-weight: var(--label-weight);
  font-size: var(--text-sm); letter-spacing: var(--label-tracking);
  color: var(--text-primary);
}
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px;
  background: var(--blue-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}
.site-nav a:not(.btn):hover { color: var(--blue-500); }
.site-nav a:not(.btn):hover::after, .site-nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--blue-500); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  background: transparent; border: 0; border-radius: var(--radius-control); cursor: pointer; color: var(--blue-800);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 22px; height: 1.5px; background: currentColor; position: relative;
  transition: transform var(--duration-base) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 8vw, 128px); }
.section--subtle { background: var(--surface-subtle); }
.section + .section:not(.section--subtle) { border-top: 1px solid var(--border-subtle); }
.section--subtle + .section { border-top: 0; }

.section-head {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 20px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px);
}
.section-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.section-num {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wider);
  color: var(--blue-500); font-variant-numeric: tabular-nums;
}
.section-intro { color: var(--text-secondary); font-size: var(--text-md); line-height: 1.6; max-width: 32em; }
.section-head__link { justify-self: end; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 104px) clamp(40px, 4vw, 64px); }
.hero__title {
  margin-top: 22px;
  font-size: clamp(44px, 4.6vw + 20px, 88px);
  line-height: 1.03;
  letter-spacing: 0.005em;
  max-width: 12em;
}
.hero__intro {
  display: grid; grid-template-columns: minmax(0, 40rem) auto;
  justify-content: space-between; align-items: end; gap: 28px 48px;
  margin-top: clamp(28px, 3vw, 40px);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* ---------- Lake chart (signature) ---------- */
.lake { margin-top: clamp(56px, 7vw, 96px); }
.lake__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.lake__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--text-xs); color: var(--text-secondary); }
.lake__key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lake__key--up { background: var(--blue-500); }
.lake__key--down { background: var(--sky-300); margin-left: 8px; }
.lake__plot { position: relative; height: clamp(200px, 19vw, 300px); margin-top: 8px; outline: none; cursor: crosshair; touch-action: pan-y; }
.lake__plot:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.lake__frame { position: absolute; inset: 30px 0; }
.lake__svg { width: 100%; height: 100%; overflow: visible; }
.lake__bars rect { transition: opacity var(--duration-fast) var(--ease-standard); }
.lake__bars .up { fill: var(--blue-500); }
.lake__bars .down { fill: var(--sky-300); }
.lake__plot.is-inspecting .lake__bars rect { opacity: 0.28; }
.lake__plot.is-inspecting .lake__bars rect.is-active { opacity: 1; }
.lake__mean { stroke: var(--neutral-400); stroke-width: 1; }
.lake__mark {
  position: absolute; white-space: nowrap; pointer-events: none;
  font-size: var(--text-xs); line-height: 1.3; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.lake__mark b { font-weight: var(--weight-medium); color: var(--blue-800); margin-right: 4px; }
.lake__plot.is-inspecting .lake__mark { opacity: 0; }
.lake__tip {
  position: absolute; top: 0; z-index: 2; pointer-events: none;
  transform: translate(-50%, -100%);
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--blue-900); color: var(--text-inverse); box-shadow: var(--shadow-md);
  font-size: var(--text-xs); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lake__tip b { font-weight: var(--weight-medium); color: var(--sky-300); margin-right: 6px; }
.lake__axis { position: relative; height: 18px; font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lake__tick { position: absolute; top: 0; transform: translateX(-50%); }
.lake__tick::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1px; height: 4px; background: var(--neutral-300); }
.lake__caption {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-subtle);
}
.lake__lead { font-size: var(--text-md); line-height: 1.5; color: var(--text-primary); max-width: 30em; }
.lake__source { font-size: var(--text-xs); line-height: 1.6; color: var(--text-secondary); max-width: 40em; }
.lake__source a { color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--neutral-300); text-underline-offset: 2px; }
.lake__source a:hover { color: var(--blue-500); }

/* ---------- Results ---------- */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.figure {
  position: relative; padding: 28px 32px 8px 0;
  border-top: 1px solid var(--border-subtle);
}
.figure::before { content: ""; position: absolute; left: 0; top: -1px; width: 32px; height: 3px; background: var(--sky-300); }
.figure + .figure { padding-left: 32px; border-left: 1px solid var(--border-subtle); }
.figure + .figure::before { left: 32px; }
.figure__value {
  font-family: var(--font-display); font-weight: var(--weight-thin);
  font-size: clamp(44px, 2.6vw + 22px, 64px); line-height: 1; letter-spacing: 0;
  color: var(--blue-500); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.figure__value small { font-size: 0.42em; color: var(--text-muted); font-family: var(--font-sans); font-weight: var(--weight-regular); margin-left: 4px; letter-spacing: 0.02em; }
.figure__label { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.figure__source {
  margin-top: 16px; font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary);
}
.figures-note { margin-top: 36px; font-size: var(--text-sm); color: var(--text-secondary); max-width: 48em; }

/* ---------- Services ---------- */
.services-list { border-top: 1px solid var(--border-strong); }
.service {
  display: grid; grid-template-columns: 72px minmax(0, 5fr) minmax(0, 6fr);
  gap: 12px 40px; align-items: baseline;
  padding: 36px 0 38px; border-bottom: 1px solid var(--border-subtle);
}
.service__num {
  font-family: var(--font-display); font-weight: var(--weight-thin);
  font-size: 34px; line-height: 1; color: var(--sky-500); font-variant-numeric: tabular-nums;
}
.service__title {
  font-family: var(--font-display); font-weight: var(--weight-thin);
  font-size: clamp(28px, 1vw + 20px, 36px); line-height: 1.12; letter-spacing: 0.01em; color: var(--blue-500);
}
.service__body { font-size: 17px; line-height: 1.65; color: var(--text-secondary); }
.service__proof {
  grid-column: 3; margin-top: 4px;
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary);
  line-height: 1.8;
}

/* ---------- Engagements ---------- */
.engagements { border-top: 1px solid var(--border-strong); }
.eng-scale, .engagement {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: 12px 48px;
}
.eng-scale { padding: 14px 0 10px; border-bottom: 1px solid var(--border-subtle); }
.eng-scale__ticks {
  grid-column: 3; display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.eng-scale__label { grid-column: 1 / 3; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary); }
.engagement { align-items: center; padding: 34px 0; border-bottom: 1px solid var(--border-subtle); }
.engagement__name h3 {
  font-family: var(--font-display); font-weight: var(--weight-thin);
  font-size: clamp(28px, 1vw + 20px, 36px); line-height: 1.1; letter-spacing: 0.01em; color: var(--blue-500);
}
.engagement__time {
  margin-top: 10px; font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--sky-600);
}
.engagement__body { font-size: 17px; line-height: 1.65; color: var(--text-secondary); }
.span { position: relative; height: 12px; background: var(--neutral-100); }
.span__solid, .span__range { position: absolute; top: 0; bottom: 0; }
.span__solid { left: 0; background: var(--blue-500); }
.span__range { background: var(--blue-200); }
.span--assess .span__solid { width: 12.5%; }
.span--assess .span__range { left: 12.5%; width: 12.5%; }
.span--build .span__solid { width: 37.5%; }
.span--build .span__range { left: 37.5%; width: 37.5%; }
.span--lead .span__solid { width: 100%; background: var(--blue-800); }
.span__note { margin-top: 10px; font-size: var(--text-xs); color: var(--text-secondary); }

/* ---------- Case list (home preview) ---------- */
.cases { border-top: 1px solid var(--border-strong); }
.cases > li { border-bottom: 1px solid var(--border-subtle); }
.case {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 8px 40px;
  align-items: baseline; padding: 30px 20px; margin-inline: -20px; color: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}
.case:hover { background: var(--blue-50); color: inherit; }
.case__org {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary);
  line-height: 1.6;
}
.case__title {
  font-family: var(--font-display); font-weight: var(--weight-thin);
  font-size: clamp(26px, 0.8vw + 19px, 32px); line-height: 1.15; letter-spacing: 0.01em; color: var(--blue-500);
}
.case__metric {
  justify-self: end; text-align: right;
  font-family: var(--font-display); font-weight: var(--weight-thin);
  font-size: clamp(28px, 1vw + 20px, 36px); line-height: 1; color: var(--blue-800);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.case__metric small { display: block; margin-top: 8px; font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--text-secondary); white-space: normal; }

/* ---------- Dark bands ---------- */
.band { position: relative; overflow: hidden; color: var(--text-inverse); }
.band--dark { background: var(--surface-dark); }
.band--deep { background: var(--surface-dark-deep); }
.band h2, .band h3 { color: var(--text-inverse); }
.band .eyebrow { color: var(--sky-300); }
.band .section-num { color: var(--sky-300); }
.band .section-label::after { background: var(--border-on-dark); }
.band__watermark {
  position: absolute; right: -70px; bottom: -48px; width: min(560px, 70vw); height: auto;
  opacity: 0.07; pointer-events: none;
}
.band p { color: rgba(255,255,255,0.78); }
.band a:not(.btn) { color: var(--text-inverse); }

.story { padding-block: clamp(80px, 9vw, 136px); }
.story__grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px clamp(48px, 7vw, 120px); }
.story h2 { margin-top: 20px; max-width: 13em; }
.story__text p { margin-top: 22px; font-size: 17px; line-height: 1.75; max-width: 35em; }
.story__text p:first-of-type { margin-top: 28px; }
.story__text .btn { margin-top: 36px; }
/* How-we-work tenets beside the story (square markers echo the mark's bars) */
.tenets { align-self: start; margin-top: 44px; display: grid; gap: 28px; border-left: 1px solid var(--border-on-dark); padding-left: 30px; }
.tenets li { position: relative; }
.tenets li::before { content: ""; position: absolute; left: -35px; top: 8px; width: 9px; height: 9px; background: var(--sky-300); }
.tenets h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 17px; line-height: 1.35; letter-spacing: 0.01em; }
.band .tenets p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.7); }

/* ---------- Contact band ---------- */
.contact-band { padding-block: clamp(72px, 8vw, 112px); }
.contact-band .band__watermark { width: min(360px, 48vw); right: -56px; bottom: -72px; opacity: 0.06; }
.contact-band__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 80px; align-items: end; }
.contact-band h2 { margin-top: 18px; }
.contact-band__grid > div > p:not(.eyebrow) { margin-top: 18px; font-size: var(--text-md); line-height: 1.6; max-width: 30em; }
.contact-band__email {
  display: inline-block; font-family: var(--font-display); font-weight: var(--weight-thin);
  font-size: clamp(22px, 1.6vw + 14px, 38px); line-height: 1.2; letter-spacing: 0.01em;
  color: var(--text-inverse); overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 6px;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.contact-band__email:hover { color: var(--text-inverse); border-bottom-color: var(--sky-300); }
.contact-band__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.copy-status { font-size: var(--text-sm); color: var(--sky-300); align-self: center; min-height: 1.5em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface-dark-deep); color: rgba(255,255,255,0.72); font-size: var(--text-sm); border-top: 1px solid var(--border-on-dark); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.4fr)); gap: 40px; padding-block: 72px 56px; }
.site-footer__brand img { width: 216px; height: auto; }
.site-footer__brand .tagline { margin-top: 22px; font-size: 17px; color: var(--sky-300); }
.site-footer .eyebrow { color: var(--sky-300); margin-bottom: 14px; font-size: var(--text-2xs); }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer__col a { color: rgba(255,255,255,0.82); }
.site-footer__col a:hover { color: var(--text-inverse); }
.site-footer__col p { color: rgba(255,255,255,0.82); }
.site-footer__lake { margin-top: 6px; font-size: var(--text-xs); color: rgba(255,255,255,0.55) !important; line-height: 1.6; font-variant-numeric: tabular-nums; }
.site-footer__base {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-block: 20px 28px;
  font-size: var(--text-xs); color: rgba(255,255,255,0.5);
}
/* Hairline inside the container's padding so it lines up with the grid above */
.site-footer__base::before {
  content: ""; position: absolute; top: 0; left: clamp(16px, 4vw, 40px); right: clamp(16px, 4vw, 40px);
  height: 1px; background: var(--border-on-dark);
}
.site-footer__base a { color: rgba(255,255,255,0.62); }
.site-footer__base a:hover { color: var(--text-inverse); }

/* ---------- Inner-page hero ---------- */
.page-hero { padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px); }
.page-hero h1 { margin-top: 20px; font-size: clamp(42px, 3.4vw + 22px, 76px); line-height: 1.05; letter-spacing: 0.005em; max-width: 13em; }
.page-hero .lede { margin-top: 26px; }
.page-hero + .section { padding-top: clamp(8px, 2vw, 32px); }

/* ---------- Work page: case notes ---------- */
.notes { border-top: 1px solid var(--border-strong); }
.note {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px clamp(40px, 6vw, 96px);
  padding-block: clamp(44px, 5vw, 64px); border-bottom: 1px solid var(--border-subtle);
}
.note__meta { align-self: start; position: sticky; top: 108px; }
.note__org {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary);
  line-height: 1.7;
}
.note__metric {
  margin-top: 22px; font-family: var(--font-display); font-weight: var(--weight-thin);
  font-size: clamp(44px, 2vw + 28px, 64px); line-height: 1; color: var(--blue-500);
  font-variant-numeric: tabular-nums;
}
.note__metric-label { margin-top: 12px; font-size: var(--text-sm); color: var(--text-secondary); max-width: 20em; line-height: 1.5; }
.note h2 { font-size: clamp(30px, 1.2vw + 22px, 40px); }
.note__body p { margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--text-secondary); max-width: 38em; }
.note__facts { margin-top: 26px; display: grid; gap: 10px; max-width: 38em; }
.note__facts li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--text-primary); }
.note__facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--sky-300); }
.work-note { margin-top: 40px; font-size: var(--text-sm); color: var(--text-secondary); max-width: 52em; }

/* ---------- About page ---------- */
/* Two-column block: label + heading left, prose right */
.leader { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(48px, 7vw, 120px); align-items: start; }
.leader h2 { margin-top: 20px; }
.leader__text p { font-size: 18px; line-height: 1.75; color: var(--text-secondary); max-width: 36em; }
.leader__text p + p { margin-top: 20px; }
.leader__text p:first-child { color: var(--text-primary); }

.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border-strong); }
.principle { padding: 36px 40px 40px 0; border-bottom: 1px solid var(--border-subtle); }
.principle:nth-child(even) { padding-left: 40px; padding-right: 0; border-left: 1px solid var(--border-subtle); }
.principle h3 {
  font-family: var(--font-display); font-weight: var(--weight-thin);
  font-size: clamp(26px, 0.8vw + 20px, 32px); line-height: 1.15; letter-spacing: 0.01em; color: var(--blue-500);
}
.principle p { margin-top: 14px; font-size: 17px; line-height: 1.65; color: var(--text-secondary); max-width: 30em; }

/* ---------- Contact page ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px clamp(48px, 7vw, 120px); }
.contact__email {
  display: inline-block; font-family: var(--font-display); font-weight: var(--weight-thin);
  font-size: clamp(24px, 1.8vw + 14px, 40px); line-height: 1.2; color: var(--blue-500); overflow-wrap: anywhere;
  border-bottom: 1px solid var(--blue-200); padding-bottom: 6px;
}
.contact__email:hover { border-bottom-color: var(--blue-500); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contact__actions .copy-status { color: var(--sky-600); }
.contact__prompt { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border-subtle); }
.contact__prompt h2 { font-size: clamp(24px, 0.8vw + 18px, 30px); }
.contact__prompt ul { margin-top: 16px; display: grid; gap: 10px; }
.contact__prompt li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.contact__prompt li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--sky-300); }
.steps { counter-reset: step; border-top: 3px solid var(--sky-300); background: var(--surface-subtle); padding: 32px; border-radius: 0 0 var(--radius-card) var(--radius-card); align-self: start; }
.steps h2 { font-size: clamp(24px, 0.8vw + 18px, 30px); }
.steps ol { margin-top: 20px; display: grid; gap: 22px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
.steps li::before {
  content: counter(step, decimal-leading-zero); grid-row: span 2;
  font-family: var(--font-display); font-weight: var(--weight-thin); font-size: 28px; line-height: 1; color: var(--sky-500);
}
.steps strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.steps li p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.steps__place { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-secondary); }

/* ---------- Plain document pages (privacy, 404) ---------- */
.doc { max-width: 44em; }
.doc h2 { margin-top: 44px; font-size: clamp(24px, 0.8vw + 18px, 30px); }
.doc p { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--text-secondary); }
.doc .lede { margin-top: 24px; }
.lost { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; }
.lost .hero__actions { margin-top: 36px; }

/* ---------- Reveal on scroll (JS adds .js to <html>) ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Scrollbars (webkit) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--neutral-50); }
::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: var(--radius-md); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure:nth-child(3) { padding-left: 0; border-left: 0; }
  .figure:nth-child(3)::before { left: 0; }
  .figure { padding-bottom: 32px; }
  .service { grid-template-columns: 56px minmax(0, 1fr); }
  .service__body, .service__proof { grid-column: 2; }
  .eng-scale, .engagement { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .engagement__body { grid-column: 1 / -1; grid-row: 2; }
  .eng-scale__ticks { grid-column: 2; }
  .eng-scale__label { grid-column: 1; }
  .case { grid-template-columns: minmax(0, 1fr) auto; }
  .case__org { grid-column: 1 / -1; }
  .story__grid, .contact-band__grid, .leader, .contact { grid-template-columns: minmax(0, 1fr); }
  .tenets { margin-top: 0; }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px clamp(16px, 4vw, 40px) 24px;
    background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-md);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-md); }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav .btn { margin-top: 20px; min-height: 48px; }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-head__link { justify-self: start; }
  .hero__intro { grid-template-columns: minmax(0, 1fr); }
  .lake__caption { grid-template-columns: minmax(0, 1fr); }
  .note { grid-template-columns: minmax(0, 1fr); }
  .note__meta { position: static; }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principle, .principle:nth-child(even) { padding: 32px 0; border-left: 0; }
}

@media (max-width: 600px) {
  .brand__name { font-size: 14px; }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure, .figure + .figure { padding-left: 0; border-left: 0; }
  .figure + .figure::before { left: 0; }
  .lake__mark .lake__dev { display: none; }
  .eng-scale { display: none; }
  .engagement { grid-template-columns: minmax(0, 1fr); }
  .engagement__body { grid-row: auto; }
  .case { grid-template-columns: minmax(0, 1fr); }
  .case__metric { justify-self: start; text-align: left; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .steps { padding: 24px; }
}

/* generated: lake chart positions */
.lake__mark--high{left:94.907%;top:5.00%;transform:translate(calc(-100% + 10px),calc(-100% - 8px))}
.lake__mark--low{left:43.056%;top:90.19%;transform:translate(-50%,8px)}
.lake__tick--1920{left:2.315%}
.lake__tick--1940{left:20.833%}
.lake__tick--1960{left:39.352%}
.lake__tick--1980{left:57.870%}
.lake__tick--2000{left:76.389%}
.lake__tick--2020{left:94.907%}