/* ============================================================
   Tellico AI Solutions — shared styles
   Design direction: PLANNING.md, Step 4.
   Visual language refreshed 2026-09-23 against tsh.io as the
   reference: large light-weight grotesque display type, square
   corners, hairline grid rules, wide-tracked micro-labels, a
   dark navy chrome, and a pastel shard gradient behind heroes.
   The palette stays Tellico's — navy from the logo, with a
   four-colour accent set used only for the gradient and topic
   chips.
   Light is the default; dark follows the OS preference.
   ============================================================ */

/* ---- Self-hosted type ----
   Loaded from site/fonts/, not a font CDN. privacy.html tells
   visitors that every page except /call loads nothing from
   anyone else; a Google Fonts <link> would make that untrue. */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --brand:   #173352;
  --accent:  #2f6fb0;
  --accent-hover: #21547f;
  --on-accent: #ffffff;
  --ink:     #14181d;
  --muted:   #646d7a;
  --bg:      #ffffff;
  --bg-alt:  #f3f5f7;
  --bg-deep: #101f33;
  --line:    #e1e5ea;
  --line-strong: #cfd6de;
  --on-deep: #eef3f9;
  --on-deep-muted: #9fb6ce;
  --on-deep-line: rgba(255,255,255,.14);
  --ok:      #2f855a;
  --shadow:  0 1px 2px rgba(16,24,40,.04), 0 10px 30px rgba(16,24,40,.07);

  /* Chrome — the dark bar at the top and bottom of every page. */
  --chrome:      #101f33;
  --on-chrome:   #f2f6fb;
  --on-chrome-muted: #9fb6ce;
  --chrome-line: rgba(255,255,255,.13);
  /* The logo mark only ever sits on the dark chrome, so its plate is
     a white wash in both themes rather than the navy from the SVG. */
  --logo-plate: rgba(255,255,255,.12);

  /* Accent set. Used for the hero gradient, shards and topic
     chips — never for body text on its own. Each has a -ink
     partner that is legible on that colour's 12%-tint chip. */
  --amber:   #e8a33d;
  --amber-ink:  #7a4d05;
  --peri:    #7b7ced;
  --peri-ink:   #3b3ca8;
  --sky:     #3ba3e0;
  --sky-ink:    #10567e;
  --teal:    #2fa891;
  --teal-ink:   #10574a;

  --display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:   #4d86c0;
    --accent:  #6fa8dc;
    --accent-hover: #8ebde8;
    /* Dark accent is light, so button text flips to near-black.
       White on #6fa8dc is only 2.5:1 and fails WCAG AA. */
    --on-accent: #0f1419;
    --ink:     #f2f4f6;
    --muted:   #98a2ae;
    --bg:      #0d1116;
    --bg-alt:  #141a21;
    --bg-deep: #0a1520;
    --line:    #222a34;
    --line-strong: #323c48;
    --on-deep: #f2f4f6;
    --on-deep-muted: #98a2ae;
    --on-deep-line: rgba(255,255,255,.1);
    --ok:      #68d391;
    --shadow:  0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.28);

    --chrome:      #0a0e13;
    --on-chrome:   #f2f4f6;
    --on-chrome-muted: #98a2ae;
    --chrome-line: rgba(255,255,255,.1);
    --logo-plate: rgba(255,255,255,.1);

    --amber:   #f0b45f;
    --amber-ink:  #f6cb8c;
    --peri:    #9b9cf5;
    --peri-ink:   #b6b7f8;
    --sky:     #64bbee;
    --sky-ink:    #8fd0f4;
    --teal:    #4cc4ad;
    --teal-ink:   #7ed7c6;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
}
p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 720px; }

/* ---- Micro-label ----
   Wide-tracked uppercase in the display face, with a leading
   arrow. The arrow is decorative, so it is drawn with ::before
   rather than typed into the markup where a screen reader
   would read it out. */
.eyebrow {
  font-family: var(--display);
  font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 22px;
  display: flex; align-items: center; gap: 9px;
}
.eyebrow::before {
  content: "→"; color: var(--accent);
  letter-spacing: 0; font-size: 13px;
}
.deep .eyebrow::before, .hero .eyebrow::before { color: var(--amber); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 0;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font-family: var(--display);
  font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em;
  transition: background .18s ease, transform .18s ease;
  white-space: nowrap; border: 0;
}
.btn::after { content: "→"; transition: transform .18s ease; }
.btn:hover { background: var(--accent-hover); }
.btn:hover::after { transform: translateX(4px); }
.btn-ghost {
  background: transparent; color: var(--on-deep);
  border: 1px solid var(--on-deep-line);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-quiet {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-quiet:hover { background: var(--bg-alt); }
.btn-chrome {
  background: var(--on-chrome); color: var(--chrome);
}
.btn-chrome:hover { background: #ffffff; }

/* ---- Header ----
   Dark chrome, square, full width, hairline-separated from the
   page. Sticky so the CTA stays reachable on long pages. */
header.site {
  position: sticky; top: 0; z-index: 30;
  background: var(--chrome);
  color: var(--on-chrome);
}
.nav { display: flex; align-items: center; gap: 36px; height: 70px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--on-chrome); }
.logo-mark { width: 32px; height: 32px; flex: none; }
.logo-type {
  font-family: var(--display);
  font-size: 15.5px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.16;
}
.logo-type span { color: var(--on-chrome-muted); font-weight: 400; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a {
  font-family: var(--display);
  color: var(--on-chrome-muted); text-decoration: none;
  font-size: 15px; font-weight: 400; letter-spacing: -0.01em;
  transition: color .15s ease; position: relative; padding: 4px 0;
}
.nav-links a:hover { color: var(--on-chrome); }
.nav-links a[aria-current="page"] { color: var(--on-chrome); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--amber);
}
.nav-cta { padding: 11px 20px; font-size: 14.5px; }

/* ---- Mobile menu ----
   The button only exists once site.js has marked the document as
   enhanced. Without it the links fall back to a wrapped row under the
   logo, which is plainer but reachable — see the narrow breakpoint. */
.nav-toggle { display: none; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 1.5px; background: var(--on-chrome);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; }
.nav-toggle-bars::before { transform: translateY(-6px); }
.nav-toggle-bars::after  { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: rotate(-45deg); }

/* ---- Sections ----
   Hairline top rules rather than boxed cards — the grid does
   the separating, matching the reference's full-bleed feel. */
section { padding: 112px 0; position: relative; }
.band { background: var(--bg-alt); border-block: 1px solid var(--line); }
.deep { background: var(--bg-deep); color: var(--on-deep); }
.deep h1, .deep h2, .deep h3 { color: var(--on-deep); }
.deep .sub, .deep .eyebrow { color: var(--on-deep-muted); }
h2 { font-size: clamp(32px, 4.6vw, 52px); max-width: 20ch; }
h3 { font-size: 20px; letter-spacing: -0.025em; }
.sub { font-size: 18px; color: var(--muted); margin-top: 22px; max-width: 60ch; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---- Shard backdrop ----
   Soft pastel mesh plus three angular shards, the reference's
   signature. Purely decorative: aria-hidden in the markup and
   pointer-events none here, so it never intercepts a click. */
.shards {
  /* One knob for how present the wash is. The home hero is the loudest
     thing on the site; interior heroes are deliberately quieter so the
     page below them keeps the attention. */
  --shard-alpha: 40%;
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.page-hero .shards { --shard-alpha: 30%; }
.shards::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%;
  background:
    radial-gradient(52% 62% at 4% 10%,  color-mix(in srgb, var(--amber) var(--shard-alpha), transparent) 0%, transparent 64%),
    radial-gradient(50% 60% at 90% 2%,  color-mix(in srgb, var(--peri)  var(--shard-alpha), transparent) 0%, transparent 62%),
    radial-gradient(62% 68% at 68% 82%, color-mix(in srgb, var(--sky)   var(--shard-alpha), transparent) 0%, transparent 66%),
    radial-gradient(48% 54% at 24% 92%, color-mix(in srgb, var(--teal)  var(--shard-alpha), transparent) 0%, transparent 64%);
  filter: blur(6px);
}
.shards svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The chevrons are cut out of the wash in the page colour, which is what
   gives the reference its faceted look rather than a plain blur. */
.shards .shard { fill: var(--bg); opacity: .34; }
.shards .shard-2 { opacity: .22; }
.shards .shard-3 { opacity: .28; }
@media (prefers-color-scheme: dark) {
  /* On a near-black page the same tints read as a glow rather than a
     wash, so they need less alpha, and the cut-outs need more to stay
     visible as shapes. */
  :root:not([data-theme="light"]) .shards { --shard-alpha: 26%; }
  :root:not([data-theme="light"]) .page-hero .shards { --shard-alpha: 20%; }
  :root:not([data-theme="light"]) .shards .shard { opacity: .5; }
  :root:not([data-theme="light"]) .shards .shard-2 { opacity: .38; }
  :root:not([data-theme="light"]) .shards .shard-3 { opacity: .44; }
}
.shards + .wrap, .shards ~ .wrap { position: relative; z-index: 1; }

/* ---- Page hero (interior pages) ---- */
.page-hero { padding-block: 96px 74px; position: relative; overflow: hidden; }
.page-hero h1 { font-size: clamp(40px, 6vw, 72px); max-width: 17ch; }
.page-hero .sub { font-size: 19.5px; margin-top: 26px; max-width: 58ch; }

/* ---- Home hero ---- */
.hero { padding-block: 124px 104px; position: relative; overflow: hidden; }
.hero h1 { font-size: clamp(44px, 7.2vw, 88px); max-width: 15ch; line-height: 1.08; }
/* The headline is two sentences. Run together as one string they wrap
   mid-line, so the second sentence starts wherever the first happens to
   end — the hardest place in the block to find it. Each sentence gets
   its own line, and each still wraps naturally within itself, so this
   holds up at phone width instead of forcing an awkward break. */
.hero h1 span { display: block; }
.hero h1 span + span { margin-top: .42em; }
.hero h1 em {
  font-style: normal; color: var(--ink);
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--amber) 55%, transparent) 62%);
  padding: 0 .06em;
}
.hero p.lede { font-size: 20px; color: var(--muted); max-width: 58ch; margin: 30px 0 40px; line-height: 1.55; }
.hero-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-cta .note { font-size: 15px; color: var(--muted); }
.hero-meta {
  margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line-strong);
  font-family: var(--display);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* ---- Symptom list ----
   Hairline rows, no card chrome, big index numerals. */
.symptoms { margin-top: 52px; border-top: 1px solid var(--line); }
.symptom {
  padding: 28px 0; display: grid; grid-template-columns: 74px 1fr; gap: 24px;
  align-items: start; border-bottom: 1px solid var(--line);
}
.symptom b {
  font-family: var(--display); font-size: 30px; font-weight: 400;
  color: var(--line-strong); letter-spacing: -0.04em; line-height: 1;
}
.symptom p { font-size: 17.5px; max-width: 62ch; }

/* ---- Two-up ---- */
.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.twoup.lean { grid-template-columns: 4fr 5fr; }
.contrast { display: grid; gap: 0; border-top: 1px solid var(--line); }
.contrast div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.contrast strong {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.025em; margin-bottom: 7px;
}
.contrast p { color: var(--muted); font-size: 16.5px; line-height: 1.55; }

/* ---- Metrics ---- */
.metrics { display: flex; gap: 72px; flex-wrap: wrap; margin: 56px 0 14px; }
.metric .n {
  font-family: var(--display); font-size: clamp(48px, 6vw, 72px); font-weight: 400;
  letter-spacing: -0.045em; line-height: 1; color: #fff;
}
.metric .l { font-size: 15px; color: var(--on-deep-muted); margin-top: 14px; max-width: 22ch; }

/* ---- Diagram ----
   Diagram styles live here, not in a <style> inside the SVG — styles inside
   inline SVG are document-global and would leak these class names site-wide. */
.diagram-scroll { overflow-x: auto; margin: 56px 0 38px; padding-bottom: 6px; }
.diagram-scroll svg { display: block; min-width: 760px; width: 100%; height: auto; }
.diagram-scroll .bx  { fill: rgba(255,255,255,.04); stroke: #3d6489; }
.diagram-scroll .lbl { fill: #ffffff; font: 500 15px "Space Grotesk", Inter, sans-serif; letter-spacing: -0.02em; }
.diagram-scroll .sm  { fill: #9fb6ce; font: 400 12.5px Inter, sans-serif; }
.diagram-scroll .ln  { stroke: #4f7ba6; stroke-width: 1.5; }

/* ---- Step cards ----
   Square, hairline-divided columns rather than shadowed cards. */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 58px; border-top: 1px solid var(--line);
}
.step {
  padding: 34px 32px 38px; border-left: 1px solid var(--line);
  transition: background .2s ease;
}
.step:first-child { border-left: 0; padding-left: 0; }
.step:hover { background: var(--bg-alt); }
.step .k {
  font-family: var(--display); font-size: 12px; font-weight: 500;
  color: var(--accent); letter-spacing: .16em;
}
.step h3 { margin: 16px 0 12px; }
.step p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.pricing-note {
  margin-top: 40px; font-size: 16px; color: var(--muted);
  padding: 22px 26px; border-left: 2px solid var(--amber); background: var(--bg-alt);
}

/* ---- Service blocks (services page) ---- */
.service { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; padding: 68px 0; border-top: 1px solid var(--line); align-items: start; }
.service:first-of-type { border-top: 0; padding-top: 22px; }
.service .stage {
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; color: var(--accent);
}
.service h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 14px; }
.service .dur { margin-top: 16px; font-size: 15px; color: var(--muted); }
.service p.body { font-size: 17.5px; }
.service p.body + p.body { margin-top: 16px; }
.deliverables { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.deliverables li { position: relative; padding: 13px 0 13px 28px; font-size: 16.5px; line-height: 1.5; border-bottom: 1px solid var(--line); }
.deliverables li::before { content: "→"; position: absolute; left: 0; top: 13px; color: var(--accent); font-size: 14px; }

/* ---- Fit lists ---- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 52px; }
.fit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.fit li { display: flex; gap: 14px; font-size: 16.5px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
.fit li span { flex: none; font-weight: 700; }
.yes span { color: var(--ok); }
.no li { color: var(--muted); }
.no span { color: var(--muted); }
.fit h3 {
  font-family: var(--display); font-size: 12px; margin-bottom: 18px; color: var(--muted);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}

/* ---- Callout ---- */
.callout {
  margin-top: 48px; padding: 34px 36px;
  background: var(--bg-alt); border-left: 2px solid var(--accent);
}
.callout h3 { font-size: 20px; margin-bottom: 11px; }
.callout p { color: var(--muted); font-size: 17px; }

/* ---- Case study specifics ---- */
.factbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 52px;
}
.fact { padding: 26px 26px 26px 0; border-left: 1px solid var(--line); padding-left: 26px; }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact dt {
  font-family: var(--display); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.fact dd { margin: 10px 0 0; font-size: 16.5px; font-weight: 500; font-family: var(--display); letter-spacing: -0.02em; }
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(26px, 3.2vw, 36px); margin-top: 62px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 17.5px; margin-top: 18px; }
.prose ul { margin: 22px 0 0; padding-left: 0; list-style: none; display: grid; gap: 12px; }
.prose ul li { position: relative; padding-left: 26px; font-size: 17px; }
.prose ul li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-size: 14px; }

blockquote.pull {
  margin: 54px 0 0; padding: 34px 38px; border-left: 2px solid var(--amber);
  background: var(--bg-alt);
}
blockquote.pull p {
  font-family: var(--display); font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.32; letter-spacing: -0.03em; font-weight: 400;
}
blockquote.pull footer { margin-top: 20px; font-size: 15px; color: var(--muted); border: 0; padding: 0; font-family: var(--text); }

/* ---- Client logo (case study) ----
   Always on a white plate. The client wordmark is navy (#253762) and would
   disappear against the dark theme, and recolouring someone else's logo isn't
   ours to do. The plate is the standard fix and reads as deliberate. */
.client-plate {
  display: inline-flex; align-items: center; margin-top: 44px;
  padding: 18px 28px; background: #ffffff;
  border: 1px solid var(--line);
}
.client-logo { display: block; width: 240px; height: auto; }

/* Evidence block — a single documented incident, set apart from the prose. */
.evidence {
  margin-top: 48px; padding: 30px 34px;
  background: var(--bg-alt); border-left: 2px solid var(--accent);
}
.evidence .tag {
  font-family: var(--display); font-weight: 500;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.evidence p { font-size: 17.5px; margin-top: 12px; }

/* ---- Placeholder (mockup only — replace before launch) ---- */
.placeholder {
  border: 1px dashed var(--line-strong); padding: 36px;
  color: var(--muted); font-size: 16px; text-align: center; background: var(--bg-alt);
}
.placeholder strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 8px; font-weight: 600; }
.placeholder.portrait { aspect-ratio: 4/5; display: flex; flex-direction: column; justify-content: center; }

/* Founder portrait. Square by design — the source is a landscape frame, and a
   square crop keeps the face large without slicing the composition. */
.portrait {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--line);
}

/* ---- Booking ---- */
.booking { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.expect { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.expect li { display: flex; gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.expect .t { font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--accent); flex: none; width: 56px; }
.expect strong { display: block; font-family: var(--display); font-weight: 500; font-size: 17.5px; letter-spacing: -0.025em; }
.expect p { color: var(--muted); font-size: 16px; line-height: 1.5; margin-top: 4px; }
.alt-contact { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 16.5px; color: var(--muted); }
.alt-contact a { font-weight: 500; }

/* ---- Booking embed (Google Appointment Schedules) ---- */
.embed {
  border: 1px solid var(--line); overflow: hidden;
  background: #fff;
}
.embed iframe { display: block; width: 100%; height: 660px; border: 0; }
.embed-fallback { margin-top: 16px; font-size: 15px; color: var(--muted); }

/* ============================================================
   Resources library
   ============================================================ */

/* Topic chips — filter controls above the list. Progressive
   enhancement: .has-filters is set by site.js only once it has found
   the list and wired the buttons, so the chips never appear as dead
   controls. Without them every card stays visible. */
.topics { display: none; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.has-filters .topics { display: flex; }
.topic-btn {
  font-family: var(--display); font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.topic-btn:hover { color: var(--ink); border-color: var(--ink); }
.topic-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.res-count { margin-top: 20px; font-size: 14.5px; color: var(--muted); }

/* The list itself — hairline rows, numbered, with the source
   and topic sitting in a left rail on wide screens. */
.res-list { margin-top: 14px; border-top: 1px solid var(--line); list-style: none; padding: 0; }
.res {
  display: grid; grid-template-columns: 210px 1fr; gap: 40px;
  padding: 34px 0; border-bottom: 1px solid var(--line);
  transition: background .2s ease;
}
.res:hover { background: var(--bg-alt); }
.res[hidden] { display: none; }
.res-rail { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.res-topic {
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px;
}
.res-topic[data-topic="start-here"] { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber-ink); }
.res-topic[data-topic="strategy"]    { background: color-mix(in srgb, var(--peri)  16%, transparent); color: var(--peri-ink); }
.res-topic[data-topic="risk-rules"]  { background: color-mix(in srgb, var(--sky)   16%, transparent); color: var(--sky-ink); }
.res-topic[data-topic="security"]    { background: color-mix(in srgb, var(--teal)  16%, transparent); color: var(--teal-ink); }
.res-topic[data-topic="research"]    { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line-strong); }
.res-topic[data-topic="training"]    { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber-ink); }
.res-meta { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.res-meta .src { display: block; font-weight: 600; color: var(--ink); font-size: 14px; }

.res-body h3 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.16; }
.res-body h3 a { color: var(--ink); text-decoration: none; }
.res-body h3 a:hover { color: var(--accent); }
.res-body h3 a::after { content: " ↗"; font-size: .7em; color: var(--muted); vertical-align: 1px; }
.res-sum { margin-top: 14px; font-size: 16.5px; color: var(--muted); max-width: 64ch; line-height: 1.6; }
.res-take {
  margin-top: 18px; padding: 14px 18px; background: var(--bg-alt);
  border-left: 2px solid var(--accent); max-width: 64ch;
}
.res:hover .res-take { background: var(--bg); }
.res-take b {
  display: block; font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.res-take p { font-size: 16px; line-height: 1.55; }

/* Empty state, shown by the filter script when a topic has
   nothing in it yet. */
.res-empty { padding: 48px 0; color: var(--muted); font-size: 16.5px; }

/* Weekly cadence note + subscribe row */
.cadence { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.cadence p { color: var(--muted); font-size: 16.5px; max-width: 54ch; }
.subscribe { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Closing ---- */
.close { text-align: center; }
.close h2 { margin: 0 auto; max-width: 16ch; }
.close .sub { margin: 22px auto 40px; }
.close .eyebrow { justify-content: center; }
.close .btn { margin: 0 auto; }

/* ---- Footer ---- */
footer.site {
  background: var(--chrome); color: var(--on-chrome-muted);
  padding: 72px 0 56px; font-size: 15px;
}
.foot-grid { display: flex; gap: 56px; flex-wrap: wrap; justify-content: space-between; }
footer.site a { color: var(--on-chrome-muted); text-decoration: none; }
footer.site a:hover { color: var(--on-chrome); }
footer.site .logo { color: var(--on-chrome); }
.foot-links { display: grid; gap: 11px; align-content: start; }
.foot-head {
  font-family: var(--display); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-chrome);
  margin-bottom: 4px;
}
.fine { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--chrome-line); font-size: 13.5px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 20px; }
  .nav { gap: 14px; }
  .nav-cta { padding: 10px 15px; font-size: 14px; }

  /* Enhanced: links collapse behind the toggle. Unenhanced (no .js on
     <html>): they stay in the bar as a wrapped row, so every page —
     Resources included — is still reachable without the footer. */
  .nav-links { margin-left: auto; gap: 18px; flex-wrap: wrap; font-size: 14px; }
  /* Unenhanced fallback: the links drop to their own full-width row, and
     the bar grows to hold them. Without this they wrap inside the fixed
     70px height and spill over the hero. */
  /* padding-block, not the padding shorthand — .nav is also .wrap, and
     the shorthand would drop the gutter that keeps text off the edge. */
  html:not(.js) .nav { height: auto; min-height: 70px; flex-wrap: wrap; padding-block: 13px; }
  html:not(.js) .nav-links { order: 3; width: 100%; margin-left: 0; padding-top: 10px; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; margin-left: auto; width: 40px; height: 40px;
    background: transparent; border: 1px solid var(--chrome-line);
    color: var(--on-chrome); cursor: pointer; padding: 0; flex: none;
  }
  .js .nav-links { display: none; }
  .js .nav-links.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 70px; left: 0; right: 0;
    background: var(--chrome); border-top: 1px solid var(--chrome-line);
    padding: 8px 20px 20px;
  }
  .js .nav-links.open a { padding: 15px 0; border-bottom: 1px solid var(--chrome-line); font-size: 17px; }
  .js .nav-links.open a:last-child { border-bottom: 0; }
  .js .nav-links.open a[aria-current="page"]::after { display: none; }
  .nav-cta .cta-long { display: none; }
  .twoup, .twoup.lean, .steps, .fit, .service, .booking, .cadence { grid-template-columns: 1fr; gap: 34px; }
  .steps { gap: 0; }
  .step { border-left: 0; border-bottom: 1px solid var(--line); padding: 28px 0 30px; }
  .step:first-child { padding-top: 28px; }
  .factbar { grid-template-columns: 1fr 1fr; }
  .fact { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .fact:first-child, .fact:nth-child(2) { border-top: 0; }
  .embed iframe { height: 740px; }
  section, .hero { padding-block: 72px; }
  .page-hero { padding-block: 60px 48px; }
  .service { padding: 48px 0; }
  .metrics { gap: 36px; }
  .client-logo { width: 190px; }
  .client-plate { padding: 14px 20px; }
  .symptom { grid-template-columns: 52px 1fr; gap: 16px; }
  .symptom b { font-size: 22px; }
  .res { grid-template-columns: 1fr; gap: 16px; }
  .res-rail { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
  /* The rail goes from a stacked column to one inline run, so the source
     needs a separator it doesn't need when it's on its own line. */
  .res-meta .src { display: inline; }
  .res-meta .src::after { content: " · "; font-weight: 400; color: var(--muted); }
  .cadence { align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}