/* ===== TYPEFACES — self-hosted, with metric-matched fallbacks =====

   IBM Plex, SIL Open Font License 1.1 — licence text in assets/fonts/LICENSE.txt.
   Shipped: Sans 3.201 (variable, wght 100-700), Serif 2.6, Mono 2.3.

   These came from fonts.googleapis.com until 2026-08-17. Two reasons they are
   local now:

     1. about.html measured CLS bimodally: ~0.076 on most runs and ~0.33 on a
        minority. The shifting node was the section BELOW .page-hero, which means
        the hero itself changed height — the h1 and the lead paragraph re-wrapped
        when IBM Plex replaced the fallback. rel="preload" on the Google
        stylesheet had no effect and display=fallback only softened it; neither
        shipped. (docs/website-remediation-qa.md §11.)
     2. One fewer third party in the request path, and two fewer origins in the
        CSP.

   The files are the same "latin" subsets Google served, byte for byte. Every
   character this site renders is inside that subset — except -> and the two
   arrow/check glyphs, which are in none of Google's subsets and already came
   from a system font. So coverage is unchanged, not merely similar.

   ---- Why the fallback faces exist ----

   A fallback prevents reflow only if it occupies the same space as the real
   font. Times New Roman is 19% narrower than IBM Plex Serif Medium, which is
   exactly why a 48px h1 re-wrapped on swap. size-adjust scales the fallback to
   match, and the ascent/descent overrides make the line box match, so the swap
   changes nothing about layout.

   Every number below is MEASURED. A guessed override is the failure mode here:
   the page still looks right and still shifts, and nothing reports it.

     node scripts/derive-font-metrics.js

   re-derives all of them — parsing the woff2 files in assets/fonts/ and the real
   Arial, Times New Roman and Courier New in C:\Windows\Fonts — and prints this
   exact block. Rerun it after any font change and paste the result.

     size-adjust       = avgCharWidth(plex) / avgCharWidth(fallback)
     ascent-override   = ascent    / (unitsPerEm * size-adjust)
     descent-override  = |descent| / (unitsPerEm * size-adjust)
     line-gap-override = lineGap   / (unitsPerEm * size-adjust)

   ascent/descent/lineGap come from hhea, or from OS/2 sTypo* where
   USE_TYPO_METRICS is set (Sans and Mono set it; Serif does not). avgCharWidth
   is measured from real hmtx advances weighted by English letter frequency —
   NOT read from OS/2.xAvgCharWidth, which different foundries compute
   differently and which therefore cannot be compared across two fonts.

   Serif gets one fallback face per weight because its average advance spans
   0.464232 em at 400 to 0.479319 em at 600. Mono gets one face: every weight
   measures 0.600000 em exactly, because it is monospaced. Sans gets one because
   Google now ships the whole family as a single variable file, so only the
   default instance's advances are in hmtx — the per-weight widths live in HVAR
   deltas. 400 is the weight of every paragraph on this site, which is what
   re-wraps.

   Every local() in a fallback src must be metric-compatible with the font that
   was measured, or the overrides are right for one of them and wrong for the
   rest. Arial ~ Helvetica ~ Liberation Sans; Times New Roman ~ Times ~
   Liberation Serif; Courier New ~ Liberation Mono. */

@font-face { font-family:'IBM Plex Sans';  font-style:normal; font-weight:100 700; font-display:swap; src:url(fonts/plex-sans-latin.woff2) format('woff2'); }

@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/plex-serif-400-latin.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/plex-serif-500-latin.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/plex-serif-600-latin.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Serif'; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/plex-serif-400-italic-latin.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Serif'; font-style:italic; font-weight:500; font-display:swap; src:url(fonts/plex-serif-500-italic-latin.woff2) format('woff2'); }

@font-face { font-family:'IBM Plex Mono';  font-style:normal; font-weight:400; font-display:swap; src:url(fonts/plex-mono-400-latin.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono';  font-style:normal; font-weight:500; font-display:swap; src:url(fonts/plex-mono-500-latin.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono';  font-style:normal; font-weight:600; font-display:swap; src:url(fonts/plex-mono-600-latin.woff2) format('woff2'); }

/* Metric-matched fallbacks. Generated by scripts/derive-font-metrics.js — do not
   hand-edit the percentages. */
@font-face { font-family:'Plex Sans Fallback'; font-weight:100 700; src:local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust:101.09%; ascent-override:101.40%; descent-override:27.20%; line-gap-override:0.00%; }
@font-face { font-family:'Plex Serif Fallback'; font-style:normal; font-weight:400; src:local('Times New Roman'), local('Times'), local('Liberation Serif'); size-adjust:116.88%; ascent-override:87.70%; descent-override:23.53%; line-gap-override:0.00%; }
@font-face { font-family:'Plex Serif Fallback'; font-style:normal; font-weight:500; src:local('Times New Roman'), local('Times'), local('Liberation Serif'); size-adjust:119.13%; ascent-override:86.04%; descent-override:23.08%; line-gap-override:0.00%; }
@font-face { font-family:'Plex Serif Fallback'; font-style:normal; font-weight:600 700; src:local('Times New Roman'), local('Times'), local('Liberation Serif'); size-adjust:120.68%; ascent-override:84.94%; descent-override:22.79%; line-gap-override:0.00%; }
@font-face { font-family:'Plex Serif Fallback'; font-style:italic; font-weight:400; src:local('Times New Roman'), local('Times'), local('Liberation Serif'); size-adjust:104.35%; ascent-override:98.23%; descent-override:26.35%; line-gap-override:0.00%; }
@font-face { font-family:'Plex Serif Fallback'; font-style:italic; font-weight:500; src:local('Times New Roman'), local('Times'), local('Liberation Serif'); size-adjust:108.17%; ascent-override:94.76%; descent-override:25.42%; line-gap-override:0.00%; }
@font-face { font-family:'Plex Mono Fallback'; font-weight:400 600; src:local('Courier New'), local('Liberation Mono'); size-adjust:99.98%; ascent-override:102.52%; descent-override:27.50%; line-gap-override:0.00%; }

/* ===== COLDFUSION CAFÉ — COLD TERMINAL DESIGN SYSTEM (3c) =====
   Cool navy engineering system with a single ember accent.
   Rule: cobalt carries links, labels, and secondary UI.
   Ember is reserved for the logo cursor and primary CTAs only.

   3c is an accessibility pass, not a redesign. The palette is unchanged in
   character: the brand ember is still #e2711d. What changed is that every
   text/background pair now clears WCAG AA (4.5:1) at its real rendered size,
   and the values live in semantic tokens instead of scattered literals.

   Two token layers:

     1. Raw palette (--ember, --cobalt, ...) — the brand colours.
     2. Role tokens (--cta-fg, --accent-on-dark, ...) — what a role resolves to
        on a given surface, with the measured ratio recorded beside it.

   Components then reference --surface-* , which dark containers redefine. That
   is why a .section-label is legible in the hero and on cream without a single
   per-page override: the surface decides, not the markup.

   Ratios below were computed, not eyeballed. `node scripts/check-contrast.js`
   re-derives them and fails the build if any pair drops under 4.5:1. */
:root {
  /* Core surfaces (var names kept from v1 so all markup keeps working) */
  --espresso: #0b1520;        /* ink navy — primary dark surface */
  --espresso-mid: #16283a;    /* deep slate — raised dark surface */
  --espresso-deep: #070f17;   /* deepest navy — terminal / footer */
  /* The light end of the .ai-band gradient. It is a real surface — .card-tag,
     .card-desc, .pill and links are all drawn on it — but it lived as a bare
     literal inside the gradient, so check-contrast.js never saw it and the
     band was only ever measured against --espresso-mid, its dark end. At the
     previous value (#1c334c) .card-tag measured 4.42:1 there. */
  --espresso-band: #1a2f46;   /* light end of the AI band gradient */
  --border-dark: #1e3348;
  --border-warm: #2a3c52;

  /* Light surfaces */
  --cream: #e9f1fb;           /* ice — light text on dark / page bg */
  --cream-light: #f4f8fd;

  /* Accents (unchanged brand values) */
  --ember: #e2711d;           /* reserved: logo cursor + primary CTA fill */
  --ember-ink: #c25c12;
  --cobalt: #2e6be6;
  --cobalt-light: #5e96f0;
  --sky: #9cc3f5;

  /* Text */
  --text-muted: #64778e;
  --text-warm: #9db0c6;
  --text-body: #4a5c72;
  --text-label: #64778e;
  --border-light: #ccd9ea;
  --green: #5f9e6b;

  /* ---- Font stacks ----
     One place per family, because the fallback name has to appear in every
     stack for the metric override to apply, and there are 61 font-family
     declarations across the stylesheet and the eleven pages. The third entry is
     the generic escape hatch: if none of the local() faces exist, the
     *-Fallback @font-face never loads and the browser falls through to it,
     which is the behaviour the site had before any of this. */
  --font-sans: 'IBM Plex Sans', 'Plex Sans Fallback', Arial, sans-serif;
  --font-serif: 'IBM Plex Serif', 'Plex Serif Fallback', 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', 'Plex Mono Fallback', 'Courier New', monospace;

  /* ---- Role tokens (worst-case measured ratio in the comment) ---- */

  /* Primary CTA. The ember stays exactly the brand orange; what changed is the
     label. White on #e2711d measured 3.18:1 and could not be fixed without
     muddying the orange into brown, so the label flips to ink navy instead —
     5.79:1 at rest, 6.93:1 on hover, brand colour untouched. */
  --cta-bg: var(--ember);           /* #e2711d */
  --cta-bg-hover: #f0821f;
  --cta-fg: #0b1520;                /* 5.79 on rest, 6.93 on hover */

  /* Accents by surface */
  --accent-on-dark: #5e96f0;        /* 5.07 worst case (on --espresso-mid) */
  --accent-on-light: #2960cf;       /* 5.03 worst case (on --cream) */

  /* Muted / small print by surface */
  --muted-on-dark: #8b99aa;         /* 5.17 worst case (on --espresso-mid) */
  --muted-on-light: #556579;        /* 5.23 worst case (on --cream) */

  /* Ember-coloured *text* on light surfaces. Never use raw --ember for text:
     it measures 2.79:1 on cream. This is the readable sibling. */
  --ember-on-light: #a95516;        /* 4.61 worst case (on --cream) */

  /* Same story for the success green. --green is tuned for the terminal block
     on --espresso-deep and measures 2.77:1 on cream, so the light-surface form
     confirmation needs its own value. */
  --green-on-light: #3d774a;        /* 4.68 worst case (on --cream) */

  /* Focus ring. Ember on both surface families, at the depth each one needs.
     Always paired with an offset so focus is a shape change, not only a hue
     change (WCAG 1.4.1: never signal state by colour alone).

     This is surface-contextual for a reason that is easy to miss: `outline` is
     drawn OUTSIDE the element, so with an offset the ring sits on the *page*
     background, not on the control. A single bright ember ring measured 2.32:1
     on cream — under the 3:1 that WCAG 1.4.11 asks of a focus indicator — which
     made keyboard focus effectively invisible on every light section while
     looking fine on the dark ones. Light surfaces get the deeper ember instead.

     Light: 4.61:1 on --cream, 4.93:1 on --cream-light.
     Dark:  6.97:1 on --espresso. */
  --focus-ring: #a95516;

  /* ---- Surface-contextual roles. Light is the default; dark containers
         redefine these three, and every component reads them. ---- */
  --surface-accent: var(--accent-on-light);
  --surface-muted: var(--muted-on-light);
  --surface-body: var(--text-body);
}

/* Dark containers flip the contextual roles once, here. */
.hero,
.page-hero,
.section-dark,
.trustbar,
.site-nav,
.site-footer,
.terminal,
.card-dark,
.ai-band {
  --surface-accent: var(--accent-on-dark);
  --surface-muted: var(--muted-on-dark);
  --surface-body: var(--text-warm);
  --focus-ring: #f0821f;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-sans); color:var(--espresso); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--surface-accent); }
img { max-width:100%; display:block; }
::selection { background:var(--cobalt); color:#fff; }

/* Visible keyboard focus everywhere. Shape + colour, never colour alone. */
:focus-visible {
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:4px;
}
/* Filled controls sit their ring inside so it is never clipped by a parent. */
.btn:focus-visible, .nav-cta:focus-visible { outline-offset:4px; }
.form-input:focus-visible { outline-offset:1px; }

/* Skip link — first tab stop, invisible until focused. */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--cta-bg); color:var(--cta-fg);
  padding:12px 20px; border-radius:0 0 8px 0; font-weight:600; font-size:14px;
}
.skip-link:focus { left:0; color:var(--cta-fg); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

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

/* Layout */
.container { max-width:1160px; margin:0 auto; padding-left:32px; padding-right:32px; }

/* Typography */
.ember { color:var(--surface-accent); }
.hot { color:var(--ember); }
.section-light .hot, .section-warm .hot { color:var(--ember-on-light); }
.italic { font-style:italic; }
.light { color:var(--cream); }
.section-label { font-family:var(--font-mono); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--surface-accent); margin-bottom:18px; }
.section-heading { font-family:var(--font-serif); font-weight:500; font-size:42px; line-height:1.1; letter-spacing:-0.01em; margin-bottom:20px; max-width:760px; }
.section-intro { font-size:17px; line-height:1.65; color:var(--surface-body); max-width:680px; margin-bottom:48px; }

/* Inline code. The site's own mono stack rather than the browser default, which
   renders a size larger than the surrounding text and breaks the line rhythm. */
code { font-family:var(--font-mono); font-size:0.94em; }

/* Inline link inside body copy. Underlined so it is not identified by colour
   alone, in either surface family. */
.link { color:var(--surface-accent); text-decoration:underline; }
.link:hover { color:var(--surface-accent); }

/* Sections */
.section { padding:96px 0; }
.section-light { background:var(--cream); }
.section-dark { background:var(--espresso); color:var(--cream); }
.section-warm { background:var(--cream-light); border-top:1px solid #dbe6f3; border-bottom:1px solid #dbe6f3; }

/* Nav */
.site-nav { position:sticky; top:0; z-index:50; background:rgba(11,21,32,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-dark); }
.nav-inner { padding-top:16px; padding-bottom:16px; display:flex; align-items:center; gap:28px; }
.nav-logo { display:flex; align-items:center; gap:12px; }
.nav-logo:hover { color:inherit; }
/* Logo mark: cf + live ember cursor */
.cf-mark { width:40px; height:40px; border-radius:10px; background:var(--espresso-mid); border:1px solid var(--border-warm); display:flex; align-items:center; justify-content:center; gap:2px; }
.cf-text { font-family:var(--font-mono); font-weight:600; font-size:17px; color:var(--cream); letter-spacing:-0.02em; }
.cf-cursor { width:5px; height:13px; background:var(--ember); border-radius:1.5px; margin-top:2px; animation:cf-blink 1.2s step-end infinite; }
@keyframes cf-blink { 0%,100% { opacity:1; } 50% { opacity:0.25; } }
.nav-wordmark { font-family:var(--font-mono); font-weight:500; font-size:16px; color:var(--cream); }
.nav-links { margin-left:auto; display:flex; align-items:center; gap:26px; }
.nav-link { font-size:14px; color:var(--text-warm); padding:6px 0; transition:color .15s ease; }
.nav-link:hover { color:var(--accent-on-dark); }
/* Current page. Replaces the old inline style="color:var(--ember)", which
   measured under AA on the nav's navy and marked state by colour alone. */
.nav-link.is-current { color:var(--accent-on-dark); font-weight:600; border-bottom:2px solid var(--accent-on-dark); padding-bottom:2px; }
.nav-cta { font-size:14px; font-weight:600; color:var(--cta-fg); background:var(--cta-bg); padding:9px 18px; border-radius:8px; transition:transform .15s ease, background .15s ease; }
.nav-cta:hover { transform:translateY(-2px); background:var(--cta-bg-hover); color:var(--cta-fg); }
/* The CTA is already filled, so current-page state is an inset ring rather than
   a colour change — same reasoning as .nav-link.is-current. */
.nav-cta[aria-current="page"] { box-shadow:inset 0 0 0 2px var(--espresso); }

/* Hero */
.hero { background:var(--espresso); color:var(--cream); padding:96px 0 88px; }
.hero-title { font-family:var(--font-serif); font-weight:500; font-size:64px; line-height:1.04; letter-spacing:-0.015em; margin-bottom:24px; max-width:900px; }
.hero-sub { font-size:19px; line-height:1.6; color:var(--text-warm); max-width:640px; margin-bottom:22px; }
/* Principal byline. A buyer of a solo practice checks who the principal is
   before checking the offer, so the name sits above the fold — but quietly.
   Sized between .section-label (13px) and .hero-sub (19px), mono rather than
   serif, and reading --surface-muted so the hero's dark-surface role tokens
   resolve it without a per-page override. .hero-sub's bottom margin drops from
   40px to 22px because this line now carries the gap to the CTA; the two are a
   pair and only index.html renders either. */
.hero-byline { font-family:var(--font-mono); font-size:14px; line-height:1.7; letter-spacing:0.01em; color:var(--surface-muted); max-width:660px; margin-bottom:36px; }
.hero-byline strong { color:var(--text-warm); font-weight:600; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* Buttons */
.btn { display:inline-block; font-weight:600; border-radius:10px; padding:14px 26px; font-size:15px; transition:transform .15s ease, background .15s ease; border:none; cursor:pointer; font-family:inherit; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:var(--cta-fg); background:var(--cta-bg); }
.btn-primary:hover, .btn-primary:focus-visible { background:var(--cta-bg-hover); color:var(--cta-fg); }
.btn-outline { color:var(--cream); background:transparent; border:1px solid var(--text-warm); }
.btn-outline:hover, .btn-outline:focus-visible { color:var(--cream); border-color:var(--accent-on-dark); }
/* Outline button on a light surface. */
.section-light .btn-outline, .section-warm .btn-outline { color:var(--espresso); border-color:var(--muted-on-light); }
.section-light .btn-outline:hover, .section-warm .btn-outline:hover { color:var(--espresso); border-color:var(--accent-on-light); }
.btn[disabled], .btn:disabled { opacity:1; background:var(--muted-on-light); color:var(--cream-light); cursor:not-allowed; transform:none; }

/* Terminal */
.terminal { margin-top:64px; background:var(--espresso-deep); border:1px solid var(--border-dark); border-radius:14px; max-width:560px; overflow:hidden; }
.terminal-bar { display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--border-dark); }
.terminal-dot { width:10px; height:10px; border-radius:50%; background:#33496a; }
.terminal-dot.dot-active { background:var(--ember); }
.terminal-title { font-family:var(--font-mono); font-size:12px; color:var(--muted-on-dark); margin-left:8px; }
.terminal-body { padding:18px 20px; font-family:var(--font-mono); font-size:13.5px; line-height:1.9; color:var(--text-warm); }
.green { color:var(--green); }

/* Trust Bar */
.trustbar { background:var(--espresso-mid); border-bottom:1px solid var(--border-dark); }
.trustbar-inner { padding-top:22px; padding-bottom:22px; display:flex; align-items:center; gap:36px; flex-wrap:wrap; }
.trustbar-label { font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-on-dark); }
.trustbar-item { font-size:14px; color:var(--text-warm); font-weight:500; }

/* Grids */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

/* Cards - Light */
.card-light { background:var(--cream-light); border:1px solid var(--border-light); border-radius:16px; padding:32px; }
.card-light h3 { font-weight:600; font-size:16px; margin-bottom:8px; }
.card-light p { font-size:14.5px; line-height:1.6; color:var(--text-body); }
.card-stat { font-family:var(--font-serif); font-size:38px; color:var(--accent-on-light); margin-bottom:10px; }

/* Cards - Dark */
.card-dark { background:var(--espresso-mid); border:1px solid var(--border-warm); border-radius:16px; padding:34px; display:flex; flex-direction:column; }
.card-dark h3 { font-family:var(--font-serif); font-weight:500; font-size:26px; margin-bottom:12px; color:var(--cream); }
.card-tag { font-family:var(--font-mono); font-size:12px; color:var(--surface-muted); margin-bottom:18px; }
.card-desc { font-size:14.5px; line-height:1.6; color:var(--text-warm); margin-bottom:20px; }
.card-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.card-list li { font-size:13.5px; color:var(--text-warm); display:flex; gap:10px; }

/* Small print that sits under a card — prices, availability, qualifiers. */
.card-meta { margin-top:12px; font-family:var(--font-mono); font-size:13px; color:var(--ember-on-light); }
.card-dark .card-meta { color:var(--accent-on-dark); }

/* AI Band */
.ai-band { background:linear-gradient(100deg,var(--espresso-mid),var(--espresso-band)); border:1px solid var(--border-warm); border-radius:16px; padding:34px; display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.ai-band-content { flex:1; min-width:280px; }
.ai-band-content h3 { font-family:var(--font-serif); font-weight:500; font-size:26px; margin-bottom:10px; color:var(--cream); }
.ai-band-tags { display:flex; gap:10px; flex-wrap:wrap; }
.pill { font-family:var(--font-mono); font-size:12px; color:var(--text-warm); border:1px solid var(--border-warm); border-radius:999px; padding:8px 14px; }

/* Steps */
.step { border-top:2px solid var(--surface-accent); padding-top:20px; }
.step-num { font-family:var(--font-mono); font-size:13px; color:var(--surface-accent); margin-bottom:12px; }
.step h3 { font-family:var(--font-serif); font-size:21px; margin-bottom:10px; }
.step p { font-size:14px; line-height:1.6; color:var(--surface-body); }

/* ===== Proof strip =====
   Quantified prior work. Built from the existing .step rhythm (rule on top,
   mono label, serif figure) rather than a new visual language, and kept
   deliberately quiet — this is evidence, not a banner. Works on either
   surface because it reads --surface-*. */
.proofstrip { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px; }
.proof-item { border-top:2px solid var(--surface-accent); padding-top:18px; }
.proof-metric { font-family:var(--font-serif); font-size:30px; line-height:1.1; color:var(--surface-accent); margin-bottom:8px; }
.proof-label { font-size:14px; line-height:1.55; color:var(--surface-body); }
/* Provenance line. Mandatory next to the strip: these are the principal's prior
   results as a CTO, not ColdFusion Café client engagements or typical outcomes. */
.proof-note { font-size:13.5px; line-height:1.6; color:var(--surface-muted); margin-top:28px; max-width:760px; }

/* ===== Career timeline ===== */
.timeline { list-style:none; display:flex; flex-direction:column; gap:0; margin-top:8px; }
.timeline li { display:grid; grid-template-columns:150px 1fr; gap:20px; padding:16px 0; border-top:1px solid var(--border-light); }
.timeline li:last-child { border-bottom:1px solid var(--border-light); }
.timeline-when { font-family:var(--font-mono); font-size:13px; color:var(--surface-accent); }
.timeline-what { font-size:15px; line-height:1.6; color:var(--text-body); }
.timeline-what strong { color:var(--espresso); font-weight:600; }

/* ===== Published writing (external essays) =====
   Visually distinct from the site's own article index so an external essay is
   never mistaken for an original site article: a left rule, a publication tag,
   and a date — none of which the internal .faq-item list carries. */
.article-list { display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.article { display:block; padding:20px 24px; border-left:3px solid var(--surface-accent); background:var(--cream-light); border-radius:0 10px 10px 0; transition:background .15s ease, transform .15s ease; }
.article:hover { background:#eaf1fa; transform:translateX(2px); color:inherit; }
.article-meta { font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; color:var(--muted-on-light); margin-bottom:6px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.article-pub { color:var(--ember-on-light); }
.article h3 { font-family:var(--font-serif); font-size:19px; line-height:1.3; margin-bottom:6px; color:var(--espresso); }
.article p { font-size:14.5px; line-height:1.6; color:var(--text-body); margin:0; }
/* The "opens in a new tab" affordance, so it is not signalled by colour alone. */
.ext::after { content:" ↗"; font-size:0.85em; color:var(--muted-on-light); }

/* ===== Notes / callouts ===== */
.note { border-left:3px solid var(--surface-accent); background:var(--cream-light); padding:18px 22px; border-radius:0 10px 10px 0; font-size:15px; line-height:1.65; color:var(--text-body); }
.note strong { color:var(--espresso); }
.section-dark .note { background:rgba(255,255,255,0.04); color:var(--text-warm); }
.section-dark .note strong { color:var(--cream); }

/* ===== Comparison table (Lucee decision framework) =====
   Scrolls inside its own container so the page body never scrolls sideways. */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:28px; border:1px solid var(--border-light); border-radius:14px; background:var(--cream-light); }
.cmp { border-collapse:collapse; width:100%; min-width:720px; font-size:14.5px; }
.cmp th, .cmp td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--border-light); vertical-align:top; line-height:1.55; }
.cmp thead th { font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-on-light); border-bottom:2px solid var(--border-light); white-space:nowrap; }
.cmp tbody th { font-weight:600; color:var(--espresso); white-space:nowrap; }
.cmp td { color:var(--text-body); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom:none; }

/* ===== Booking (schedule page) =====
   The 700px reservation is applied ONLY once assets/booking.js has run and added
   .booking-js. Putting it on .booking-frame unconditionally meant a visitor with
   JavaScript disabled — who can never receive the widget — got an empty 700px
   rectangle with the <noscript> panel a viewport and a half below it, which is
   the exact "large blank booking region" the fallback exists to prevent. */
.booking-js .booking-frame { min-height:700px; }
.booking-js .calendly-inline-widget { height:700px; }
/* The fallback ships in the HTML and is revealed — never fetched — so it is
   available precisely when the network or the third party is the problem. */
.booking-fallback { display:none; }
.booking-failed .booking-frame { display:none; }
.booking-failed .booking-fallback { display:block; }
.booking-routes { display:flex; flex-direction:column; gap:14px; margin-top:24px; max-width:420px; }

/* Phone contact line. Rendered by scripts/apply-site-config.js only when both
   the display and E.164 values are configured; absent entirely otherwise. */
.phone-line { font-size:15px; line-height:1.6; color:var(--surface-body); margin-top:14px; }
.phone-line a { color:var(--surface-accent); text-decoration:underline; font-weight:600; }

/* About */
.about-grid { padding-top:96px; padding-bottom:96px; display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start; }
.about-photo { aspect-ratio:4/5; border-radius:16px; border:1px solid var(--border-light); background:repeating-linear-gradient(135deg,#e4edf8,#e4edf8 10px,#dae5f3 10px,#dae5f3 20px); display:flex; align-items:center; justify-content:center; }
.photo-placeholder { font-family:var(--font-mono); font-size:12px; color:var(--muted-on-light); letter-spacing:0.08em; }
/* The source photo is 3:4 and the frame is 4:5, so cover crops a few percent
   off the top and bottom. Biased upward to keep the face centred in the frame
   rather than drifting low. */
.about-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 25%; border-radius:inherit; display:block; }
.about-grid > div:last-child p { font-size:17px; line-height:1.7; color:#3b4d63; margin-bottom:18px; max-width:620px; }
.about-stats { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.about-stat { border:1px solid var(--border-light); border-radius:10px; padding:14px 20px; }
.about-stat-num { font-family:var(--font-serif); font-size:26px; color:var(--accent-on-light); }
.about-stat-label { font-size:12.5px; color:var(--muted-on-light); margin-top:2px; }

/* Pull quote — the positioning statement on About. Serif, indented, quiet rule. */
.pullquote { border-left:3px solid var(--accent-on-light); padding:6px 0 6px 26px; margin:8px 0 28px; }
.pullquote p { font-family:var(--font-serif); font-size:20px !important; line-height:1.55 !important; color:var(--espresso) !important; font-style:italic; max-width:640px !important; }

/* Edge cards */
.edge-card { display:flex; gap:16px; padding:22px; background:var(--cream-light); border:1px solid #dbe6f3; border-radius:14px; }
.edge-num { font-family:var(--font-mono); font-size:13px; color:var(--accent-on-light); padding-top:2px; flex-shrink:0; }
.edge-card h3 { font-weight:600; font-size:16.5px; margin-bottom:6px; }
.edge-card p { font-size:14.5px; line-height:1.6; color:var(--text-body); }

/* Contact */
.contact-section { text-align:center; }
.contact-sub { font-size:18px; line-height:1.6; color:var(--text-warm); max-width:560px; margin:0 auto 36px; }
.contact-footer { margin-top:20px; font-family:var(--font-mono); font-size:13px; color:var(--surface-muted); }

/* Forms on dark sections */
.contact-form, .form-card { text-align:left; background:rgba(255,255,255,0.04); padding:32px; border-radius:12px; border:1px solid var(--border-warm); display:flex; flex-direction:column; gap:16px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-label { font-family:var(--font-mono); font-size:0.85rem; color:var(--text-warm); }
.form-input { width:100%; padding:12px; background:rgba(0,0,0,0.3); border:1px solid var(--text-warm); color:var(--cream); font-family:var(--font-sans); font-size:15px; border-radius:6px; transition:border-color .15s ease; }
/* The border shift is reinforcement, not the indicator. It must not carry
   `outline:none` — that beat the global :focus-visible rule on specificity and
   left every form control on the site signalling focus by hue alone. */
.form-input:focus { border-color:var(--accent-on-dark); }
.form-input::placeholder { color:var(--muted-on-dark); }
.form-note { font-family:var(--font-mono); font-size:0.78rem; color:var(--surface-muted); text-align:center; }
.form-note a { color:var(--accent-on-dark); text-decoration:underline; }
.form-success { text-align:center; padding:24px; }
.form-success-check { font-size:2rem; color:var(--green); margin-bottom:12px; }
.form-success p { color:var(--cream); }

/* Light-surface form (contact page). Declared here rather than inline so the
   input borders and labels are governed by the same tokens as everything else. */
.form-light { display:grid; gap:20px; }
.assessment-details { min-width:0; display:grid; gap:16px; margin:0; padding:20px; border:1px solid var(--border-light); border-radius:10px; }
.assessment-details legend { padding:0 6px; font-size:15px; font-weight:600; color:var(--espresso); }
.assessment-details .form-fine { text-align:left; }
.assessment-disclosure > summary { padding:14px 0; font-size:15px; font-weight:600; cursor:pointer; color:var(--espresso); }
.assessment-disclosure > summary:hover { color:var(--surface-accent); }
.disclosure-note { color:var(--surface-muted); font-weight:400; }
.assessment-disclosure[open] .assessment-details { margin-top:8px; }
.form-light label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--espresso); }
.form-light input, .form-light select, .form-light textarea {
  width:100%; padding:12px 14px; border:1px solid var(--muted-on-light); border-radius:8px;
  font-family:var(--font-sans); font-size:15px; background:var(--cream-light); color:var(--espresso);
}
.form-light textarea { resize:vertical; }
.form-light input::placeholder, .form-light textarea::placeholder { color:var(--muted-on-light); }
.form-light input:focus, .form-light select:focus, .form-light textarea:focus { border-color:var(--accent-on-light); box-shadow:0 0 0 3px rgba(41,96,207,0.18); }
.form-light input:focus-visible, .form-light select:focus-visible, .form-light textarea:focus-visible { outline-offset:1px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-fine { font-size:12.5px; color:var(--muted-on-light); text-align:center; }
.req { color:var(--ember-on-light); }

/* Inline submission errors. Carries its own background rather than inheriting,
   because the same box has to stay legible on the dark homepage section and on
   the light contact page. */
.form-error { margin-top:14px; padding:12px 14px; border-radius:6px; background:#fdecea; border:1px solid #f3c2bd; color:#a02c22; font-size:14px; line-height:1.5; text-align:left; }
.form-error a { color:inherit; text-decoration:underline; }

/* Honeypot: off-screen rather than display:none, which bots skip. */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Footer */
.site-footer { background:var(--espresso-deep); color:var(--muted-on-dark); }
.footer-inner { padding:32px 0; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-copy { font-size:13px; margin-left:auto; color:var(--muted-on-dark); }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; }
.footer-links a { display:inline-block; padding:4px 0; color:var(--muted-on-dark); text-decoration:underline; }
.footer-links a:hover { color:var(--accent-on-dark); }

/* Hover effects */
.hoverlift { transition:transform .18s ease, border-color .18s ease; }
.hoverlift:hover { transform:translateY(-3px); border-color:var(--surface-accent) !important; }

/* Page hero (interior pages) */
.page-hero { background:var(--espresso); color:var(--cream); padding:72px 0; }
.page-hero h1 { font-family:var(--font-serif); font-weight:500; font-size:48px; line-height:1.08; color:var(--cream); margin-bottom:16px; }
.page-hero p { font-size:18px; line-height:1.6; color:var(--text-warm); max-width:640px; }
.page-hero .hero-byline { font-size:14px; line-height:1.7; color:var(--surface-muted); margin-top:24px; margin-bottom:0; max-width:760px; }

/* FAQ */
.faq-item { border:1px solid var(--border-light); border-radius:14px; padding:24px 28px; margin-bottom:16px; background:var(--cream-light); }
.faq-item h3 { font-family:var(--font-serif); font-size:20px; margin-bottom:12px; color:var(--espresso); }
.faq-item p { font-size:15px; line-height:1.7; color:var(--text-body); margin:0; }
.article-status { font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--surface-muted); vertical-align:middle; }
.article-status-published { color:var(--ember-on-light); }
.recovery-links { padding-left:20px; }
.recovery-links li { margin-bottom:8px; line-height:1.6; }
.recovery-links a { display:inline-block; padding:4px 0; }
.faq-item p + p { margin-top:12px; }

/* Prose blocks on interior content pages */
.prose h2 { font-family:var(--font-serif); font-weight:500; font-size:30px; line-height:1.2; margin-bottom:16px; color:var(--espresso); }
.prose h3 { font-family:var(--font-serif); font-weight:500; font-size:21px; margin:26px 0 10px; color:var(--espresso); }
.prose p { font-size:16px; line-height:1.75; color:var(--surface-body); margin-bottom:16px; max-width:760px; }
.prose ul, .prose ol { margin:0 0 20px 22px; max-width:760px; }
.prose li { font-size:16px; line-height:1.7; color:var(--surface-body); margin-bottom:9px; }
.prose li strong { color:var(--espresso); }
.prose a { color:var(--surface-accent); text-decoration:underline; }
.source-list li { scroll-margin-top:96px; }

/* Mobile nav toggle */
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--cream); margin:5px 0; border-radius:2px; transition:all .2s ease; }

/* Responsive */
@media (max-width:900px) {
  .grid-3 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .proofstrip { grid-template-columns:1fr 1fr; }
  .about-grid { grid-template-columns:1fr; }
  .about-photo { width:min(280px, 100%); margin:0 auto; }
  .hero-title { font-size:38px; }
  .section-heading { font-size:32px; }
  .page-hero h1 { font-size:34px; }
  .prose h2 { font-size:26px; }
}
@media (max-width:768px) {
  .nav-toggle { display:block; margin-left:auto; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:var(--espresso); border-bottom:1px solid var(--border-dark); flex-direction:column; padding:20px 32px; gap:16px; }
  .nav-links.open { display:flex; }
  .nav-inner { position:relative; }
  .container { padding-left:20px; padding-right:20px; }
  .grid-4 { grid-template-columns:1fr; }
  .proofstrip { grid-template-columns:1fr; }
  .ai-band { flex-direction:column; }
  .about-stats { gap:10px; }
  .about-stat { padding:10px 14px; }
  .trustbar-inner { gap:16px; }
  .timeline li { grid-template-columns:1fr; gap:4px; }
  .form-row { grid-template-columns:1fr; }
  .nav-link.is-current { border-bottom:none; border-left:2px solid var(--accent-on-dark); padding-left:10px; padding-bottom:0; }
}

/* Homepage: a compact introduction, buyer-led routes, and optional intake.
   Scoped so the established interior-page layouts keep their own rhythm. */
.home-hero { padding:64px 0 56px; }
.home-hero-grid { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:64px; align-items:center; }
.home-hero .hero-title { font-size:56px; line-height:1.08; margin-bottom:24px; }
.home-hero .hero-sub { font-size:18px; margin-bottom:28px; }
.hero-offer-note { font-size:13px; color:var(--surface-muted); margin-top:14px; }
.home-terminal { margin-top:28px; max-width:520px; border-radius:10px; }
.home-terminal .terminal-bar { padding:10px 16px; }
.home-terminal .terminal-title { margin-left:4px; }
.home-terminal .terminal-body { padding:12px 16px; display:flex; flex-wrap:wrap; gap:2px 20px; font-size:12.5px; }
.home-principal { width:340px; margin:0; }
.home-principal .about-photo { width:340px; }
.home-principal figcaption { margin-top:18px; color:var(--surface-muted); font-size:13px; line-height:1.7; }
.home-principal figcaption strong { display:block; color:var(--cream); font-size:20px; font-weight:600; margin-bottom:4px; }
.home-principal figcaption span { display:block; }
.home-section { padding:72px 0; scroll-margin-top:74px; }
.home-background { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:72px; align-items:start; }
.home-background .section-heading { font-size:34px; }
.home-background p { color:var(--surface-body); font-size:16px; margin-bottom:18px; }
.home-background .home-credential { font-size:13px; color:var(--surface-muted); margin-bottom:14px; }
.home-proof { border-left:2px solid var(--surface-accent); padding-left:28px; }
.home-proof .proof-metric { font-family:var(--font-serif); font-size:30px; line-height:1.2; color:var(--surface-accent); }
.home-proof .proof-note { font-size:13px; color:var(--surface-muted); margin:0; }
.home-services .section-heading { margin-bottom:36px; }
.home-service-card { display:flex; flex-direction:column; padding:28px; }
.home-service-card h3 { font-family:var(--font-serif); font-weight:500; font-size:26px; line-height:1.2; margin-bottom:16px; }
.home-service-card p { font-size:15px; margin-bottom:24px; }
.service-route { display:inline-block; padding:6px 0; font-size:14px; font-weight:600; margin-top:auto; }
.home-capabilities, .home-fit { margin-top:32px; color:var(--surface-body); font-size:15px; max-width:850px; }
.home-lifecycle { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.home-lifecycle .section-heading { font-size:36px; margin:0; }
.home-lifecycle p { color:var(--surface-body); font-size:16px; margin-bottom:18px; }
.home-guide-link { display:inline-block; padding:6px 0; font-weight:600; }
.home-steps { margin-top:36px; gap:32px; }
.home-steps .step p { font-size:15px; }
.home-fit { border-top:1px solid var(--border-light); padding-top:24px; max-width:none; }
.home-contact { max-width:760px; }
.home-contact .section-heading { margin-left:auto; margin-right:auto; }
.home-contact .hero-actions { justify-content:center; }
.home-contact .contact-sub { font-size:17px; margin-bottom:28px; }
.home-intake { margin:28px auto 0; max-width:600px; }
.home-intake > summary { padding:12px; color:var(--surface-accent); font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.home-intake .contact-form { margin-top:16px; }
.home-contact .contact-footer { margin-top:24px; }
@media (max-width:900px) {
  .home-hero-grid, .home-background, .home-lifecycle { grid-template-columns:1fr; gap:36px; }
  .home-hero-copy { max-width:640px; }
  .home-hero .hero-title { font-size:42px; }
  .home-principal { width:280px; margin:0 auto; }
  .home-principal .about-photo { width:280px; }
  .home-steps { gap:24px; }
}
@media (max-width:768px) {
  .home-hero { padding:40px 0 44px; }
  .home-hero .section-label { font-size:12px; letter-spacing:0.08em; margin-bottom:16px; }
  .home-hero .hero-title { font-size:38px; margin-bottom:20px; }
  .home-hero .hero-sub { font-size:16px; line-height:1.6; margin-bottom:24px; }
  .home-hero .hero-actions, .home-contact .hero-actions { flex-direction:column; align-items:stretch; gap:12px; }
  .home-hero .hero-actions .btn, .home-contact .hero-actions .btn { text-align:center; }
  .home-section { padding:48px 0; }
  .home-background .section-heading, .home-lifecycle .section-heading { font-size:30px; }
  .home-proof { padding-left:22px; }
  .home-service-card { padding:24px; }
  .home-intake .contact-form { padding:22px 18px; }
}