@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Baumans&display=swap');

/* ============================================================================
   Tekanon brand layer + design system.
   Loaded AFTER vendor.css (the Industry design system) so these win.

   ┌─ HOW TO RESTYLE THE WHOLE SITE ──────────────────────────────────────────┐
   │ Everything visual is a token in :root below. Change a value ONCE here and │
   │ it updates everywhere — fonts, type scale, spacing, buttons, colors.      │
   │ Individual sections do NOT set their own sizes; they use these tokens.    │
   └──────────────────────────────────────────────────────────────────────────┘
   ========================================================================== */
:root {
  /* — Fonts (family) — */
  --font-heading: "Alfa Slab One", Georgia, serif;   /* stands in for Kerouac BC */
  --font-label:   "Baumans", var(--font-body);        /* stands in for Bauhaus BC */

  /* — Brand colors — */
  --ink:        #33343a;   /* logo charcoal — dark bands */
  --ink-deep:   color-mix(in srgb, var(--ink) 55%, #000);          /* derived: darker end of the band gradient */
  --ink-gradient: linear-gradient(180deg, var(--ink-deep) 0%, var(--ink) 100%);  /* black→charcoal, dark at top */
  --gold:       #f7db83;   /* logo gold (sampled from tekanon-logo.png) — the ONE gold.
                              Change this single value to restyle every gold highlight. */
  --gold-hover: color-mix(in srgb, var(--gold) 90%, #000);   /* derived, not a copy */
  --gold-deep:  var(--gold);                                  /* derived, not a copy */
  --color-accent: var(--gold);

  /* — Type scale (one size per role, used everywhere) — */
  --fs-display: clamp(44px, 6.4vw, 88px);  /* home hero H1 */
  --fs-h1:      clamp(38px, 5.4vw, 72px);  /* page-intro hero H1 */
  --fs-h2:      clamp(26px, 3vw, 40px);    /* every section heading */
  --fs-h3:      20px;                       /* every card / column title */
  --fs-lead:    clamp(16px, 1.4vw, 19px);  /* intros, hero body, category intro */
  --fs-body:    15px;                       /* card body, standard paragraphs */
  --fs-small:   14px;                       /* secondary text, footer, captions */
  --fs-eyebrow: 13px;                       /* uppercase kicker labels */
  --fs-quote:   clamp(20px, 2vw, 25px);    /* pull-quotes */
  --fs-stat:    clamp(38px, 4vw, 54px);    /* stat figures */

  /* — Density factors — the one-screen desktop layer at the bottom of this file
       scales the type down by these instead of restating the sizes, so the
       theme's own "Heading size" choice still drives everything. 1 = as above. */
  --dense-display: 1; --dense-h1: 1; --dense-h2: 1; --dense-h3: 1; --dense-lead: 1;

  /* — Line heights — */
  --lh-tight:   1.05;   /* display / h1 */
  --lh-heading: 1.12;   /* h2 / h3 */
  --lh-body:    1.6;    /* paragraphs */

  /* — Spacing & layout — */
  --maxw:          1200px;
  --gutter:        clamp(20px, 5vw, 72px);  /* page side padding */
  --space-section: clamp(56px, 7vw, 96px);  /* standard section vertical rhythm */
  --space-band:    clamp(48px, 6vw, 80px);  /* colored bands (a touch tighter) */
  --grid-min:      280px;                     /* card-grid min column width */
  --grid-gap:      clamp(24px, 3vw, 40px);
  --split-gap:     clamp(28px, 5vw, 72px);
  --card-pad:      26px;
  --card-gap:      14px;
  --stack-gap:     22px;   /* gap between a heading and its paragraph */

  /* — Buttons (one size everywhere) — */
  --btn-h:  44px;
  --btn-px: 22px;

  /* — Muted body text (one opacity) — */
  --text-muted: color-mix(in srgb, var(--color-text) 80%, transparent);

  /* — Text that sits ON the charcoal stats band (kept light). — */
  --on-ink: #f2f2f3;

  /* — One white background shared by the page, header and footer. — */
  --color-bg: #f5f4f2;            /* soft warm off-white — less jarring than pure white */
  --color-surface: #ffffff;       /* cards sit slightly ABOVE the page (elevated white) */
  --bar:    var(--color-bg);      /* default; header & footer override to the ink gradient */
  --on-bar: var(--color-text);    /* header/footer text = normal text color */
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); text-wrap: pretty; }
a { color: var(--gold-deep); }
a:hover { color: var(--ink); }

/* — Buttons: consistent size + brand colors — */
.btn { min-height: var(--btn-h); padding-inline: var(--btn-px); }
.btn, .nav a, .tag { font-family: var(--font-label); letter-spacing: .04em; }
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn-primary:active { background: color-mix(in srgb, var(--gold) 80%, #000); border-color: color-mix(in srgb, var(--gold) 80%, #000); }
.tag-outline { border-color: var(--gold-deep); color: var(--gold-deep); }
.duotone::after { background: var(--ink); mix-blend-mode: normal; opacity: .32; }
.nav a:hover, .nav a.active { color: var(--on-bar); }

/* — Client-side routing: only the active page is shown (app.js) — */
[data-page] { display: none; }
.navlink { cursor: pointer; }

/* ── Layout primitives ────────────────────────────────────────────────────── */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section   { max-width: var(--maxw); margin-inline: auto; padding: var(--space-section) var(--gutter); }
.band      { width: 100%; }
.band > .section { padding-block: var(--space-band); }
.band-ink     { background: var(--ink-gradient); color: var(--on-ink); }
.band-ink .lead { color: color-mix(in srgb, var(--on-ink) 78%, transparent); }  /* muted lead, legible on dark */
.band-surface { background: var(--color-surface); }
.divided { border-top: 1px solid var(--color-divider); }

/* ── Modern cards ─────────────────────────────────────────────────────────────
   Replaces the blueprint frame (hard edges + corner registration ticks) with
   soft, rounded, elevated surfaces. EVERY blueprint element gets the treatment
   — content cards, the contact form panel, the note box, image frames — so the
   whole site is consistent. Corner marks are hidden. */
.blueprint {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.blueprint > .corner { display: none; }
.card {
  background: var(--color-surface);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* Hover lift only on content cards (not the form panel / note / images). */
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gold) 60%, var(--color-divider));
}

/* ── Type roles ───────────────────────────────────────────────────────────── */
.display, .h1, .h2, .h3 {
  font-family: var(--font-heading); font-weight: 600; margin: 0;
  text-transform: uppercase; letter-spacing: .02em;
}
.display { font-size: calc(var(--fs-display) * var(--dense-display)); line-height: var(--lh-tight); letter-spacing: .01em; }
.display span { display: block; }
.h1 { font-size: calc(var(--fs-h1) * var(--dense-h1)); line-height: var(--lh-tight); letter-spacing: .01em; }
.h2 { font-size: calc(var(--fs-h2) * var(--dense-h2)); line-height: var(--lh-heading); }
.h3 { font-size: calc(var(--fs-h3) * var(--dense-h3)); line-height: 1.15; }

.eyebrow {
  display: block; font-family: var(--font-label); font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-deep);
}
.lead  { font-size: calc(var(--fs-lead) * var(--dense-lead)); line-height: var(--lh-body); color: var(--text-muted); max-width: 62ch; }
.prose { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }
.prose-sm { font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); }

/* — Section lead-in: eyebrow + divider rule, consistent gaps everywhere — */
.head { margin-bottom: 40px; }
.head .eyebrow { margin-bottom: 12px; }
.rule { height: 1px; border: 0; margin: 0; background: var(--color-divider); }
.rule-gold { background: var(--gold); max-width: 340px; }

/* — Vertical rhythm inside text blocks — */
.hero .rule-gold { margin-bottom: 28px; }
.hero .eyebrow { margin-bottom: 12px; }
.hero .lead { margin-top: 24px; }
.hero .actions { margin-top: 32px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.stack > * + * { margin-top: var(--stack-gap); }

/* ── Grids ────────────────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr)); gap: var(--grid-gap); }
.col { display: flex; flex-direction: column; gap: 8px; }
.split { display: grid; gap: var(--split-gap); align-items: center; }
.split-6-6 { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.split-7-5 { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
.split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--card-gap); }
.card .prose, .col .prose { margin: 0; }
.card-index { font-family: var(--font-label); font-weight: 600; font-size: 15px; letter-spacing: .14em; color: var(--gold-deep); }
.card-link  { font-family: var(--font-label); font-weight: 600; font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); margin-top: auto; padding-top: 8px; }

/* ── Long-form copy (policies, terms, detailed pages) ─────────────────────── */
.long-text-copy { max-width: 74ch; }
.long-text-copy .h2 { margin-bottom: 22px; }
.long-text-copy .prose { margin: 0; }
.long-text-copy .prose + .prose { margin-top: var(--stack-gap); }

/* Category header (services) */
.cat-head { display: grid; gap: 8px; margin-bottom: 32px; }
.cat-head .lead { margin-top: 6px; max-width: 62ch; }

/* ── Embedded third-party code ──────────────────────────────────────────────
   Pasted vendor markup. Intentionally almost unstyled: the snippet brings its
   own look and the site must not fight it. Only the block's outer rhythm is
   set, from the shared tokens. */
.embed-full { width: 100%; padding-block: var(--space-section); }
.embed-block iframe { max-width: 100%; border: 0; }

/* ── Stats band ───────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 36px 28px; }
.stat-value { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-stat); line-height: 1; color: var(--gold); margin: 0; }
.stat-label { font-family: var(--font-label); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 0; color: color-mix(in srgb, var(--on-ink) 62%, transparent); }

/* ── Quotes ───────────────────────────────────────────────────────────────── */
.quote { gap: 20px; }
.quote-text { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-quote); line-height: 1.25; margin: 0; }
.quote-by { font-size: var(--fs-small); color: color-mix(in srgb, var(--color-text) 68%, transparent); }

/* ── Text + media ─────────────────────────────────────────────────────────── */
.text-media .head { margin-bottom: 20px; }
.text-media .prose { margin-top: 20px; max-width: 52ch; }
.text-media .btn { margin-top: 26px; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.cta-center { text-align: center; }
.cta-center .h2 { max-width: 22ch; margin-inline: auto; }
.cta-center .prose { max-width: 52ch; margin: 20px auto 0; }
.cta-center .btn { margin-top: 28px; }
.cta-split { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.cta-split .prose { margin-top: 12px; max-width: 50ch; }

/* ── Header / footer ──────────────────────────────────────────────────────── */
.site-header {
  /* Header-only token override: the nav bar is the one dark surface. The footer
     keeps the root --bar/--on-bar (white), so this stays a scoped change, not a
     per-element exception. */
  --bar: var(--ink-gradient);
  --on-bar: var(--on-ink);
  position: sticky; top: 0; z-index: 30;
  background: var(--bar); color: var(--on-bar);
}
.site-header .nav { flex-wrap: wrap; gap: clamp(14px, 2vw, 28px); }
.brand { margin-right: auto; display: flex; align-items: center; }
.brand img { width: min(50vw, 560px); height: auto; display: block; }

/* Footer: same black gradient as the header (scoped token override, like the
   header — the page background token is untouched). */
.site-footer {
  --bar: var(--ink-gradient);
  --on-bar: var(--on-ink);
  background: var(--bar); color: var(--on-bar);
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px 28px; align-items: start; }
.footer-logo { display: inline-block; }
.footer-logo img { height: 52px; width: auto; display: block; }
.footer-heading { display: block; font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--on-bar) 55%, transparent); margin: 0 0 14px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--on-bar); text-decoration: none; font-size: 15px; }
.footer-note { font-size: var(--fs-small); line-height: 1.55; margin: 18px 0 0; color: color-mix(in srgb, var(--on-bar) 68%, transparent); }
.footer-contact { font-size: 15px; color: color-mix(in srgb, var(--on-bar) 82%, transparent); }
.footer-bar .container { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-block: 18px; font-size: 12px; letter-spacing: .04em; color: color-mix(in srgb, var(--on-bar) 55%, transparent); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal-links a { color: inherit; text-decoration: none; }
.footer-legal-links a:hover { color: var(--on-bar); text-decoration: underline; }

/* ── Service category tabs ────────────────────────────────────────────────── */
.cat-tabs { max-width: var(--maxw); margin-inline: auto; }
.cat-tablist {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 var(--gutter); border-bottom: 1px solid var(--color-divider);
}
.cat-tab {
  font-family: var(--font-label); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: .06em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-muted); padding: 12px 4px; margin-bottom: -1px; cursor: pointer;
}
.cat-tab:hover { color: var(--color-text); }
.cat-tab.active { color: var(--color-text); border-bottom-color: var(--gold); }
/* The active tab already names the category — keep the heading for screen
   readers only so the title is not printed twice. */
.cat-tabs .cat-head .h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cat-tabs .section.divided { border-top: 0; }

/* ── Capability accordion (home) ──────────────────────────────────────────────
   Summary cards that expand to their detail. Built from tokens only. */
.accordion { display: block; }
/* Each item is a full-width .section (keeps the page's max-width + gutter);
   dividers come from the item borders, not .section padding. */
.acc-item { border-top: 1px solid var(--color-divider); padding-block: 0; }
.acc-item:last-child { border-bottom: 1px solid var(--color-divider); }
.acc-head {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--color-text);
  padding: clamp(16px, 2vw, 22px) 0;
}
.acc-index { font-family: var(--font-label); font-weight: 600; font-size: var(--fs-small); color: var(--gold-deep); }
.acc-title {
  font-family: var(--font-heading); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  font-size: calc(var(--fs-h3) * var(--dense-h3)); flex: 0 0 auto;
}
.acc-summary { flex: 1 1 240px; font-family: var(--font-body); font-size: var(--fs-lead); color: var(--text-muted); }
.acc-chevron {
  flex: 0 0 auto; margin-left: auto; width: 11px; height: 11px;
  border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep);
  transform: rotate(45deg); transition: transform .18s ease;
}
.acc-head[aria-expanded="true"] .acc-chevron { transform: rotate(225deg); }
.acc-head:hover .acc-title { color: var(--gold-deep); }
.acc-head:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.acc-panel { padding-bottom: clamp(14px, 2vw, 26px); }

/* The accordion only earns its keep on narrow screens. On desktop every panel
   is shown expanded and the toggle affordance is dropped; collapsing is a
   mobile-only behaviour (the click handler is also gated to mobile in app.js). */
@media (min-width: 768px) {
  .acc-panel[hidden] { display: block; }
  .acc-head { cursor: default; }
  .acc-chevron { display: none; }
  .acc-head:hover .acc-title { color: var(--color-text); }
}

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact-aside { display: flex; flex-direction: column; gap: 26px; }
.contact-label { display: block; font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 6px; }
.contact-value { font-size: 16px; line-height: 1.5; margin: 0; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.contact-panel { padding: clamp(24px, 3vw, 40px); }
.contact-note { padding: 22px; margin-top: 6px; }

/* ── Pasted contact form — make it fill the card and match the site ───────────
   Targeted STRUCTURALLY (the form and its elements), not by the vendor's class
   names, so a re-paste that renames classes still works. Scoped to
   .contact-panel; !important beats the embed's own inline <style>. */
/* The form and its wrapper divs go full width, so a field is never boxed into a
   narrow column — this is what actually makes inputs fill the card. */
.contact-panel form { max-width: 100% !important; width: 100%; }
.contact-panel form div { width: 100% !important; float: none !important; box-sizing: border-box; margin-left: 0 !important; }
/* Every real input/textarea/select fills its row and gets the site's styling.
   Hidden and button inputs are excluded. */
.contact-panel input:not([type="submit"]):not([type="reset"]):not([type="hidden"]),
.contact-panel textarea,
.contact-panel select {
  width: 100% !important; box-sizing: border-box; float: none !important;
  padding: 9px 11px; font: inherit;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-bg);
}
.contact-panel input:focus, .contact-panel textarea:focus, .contact-panel select:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
/* Description is a project write-up, not a one-liner: room for several sentences,
   draggable taller. */
.contact-panel textarea { min-height: 160px; line-height: 1.5; resize: vertical; }
/* Submit → gold; Reset → quiet outline. (Generic type selectors, no classes.) */
.contact-panel input[type="submit"] {
  width: auto !important; background: var(--gold) !important; color: var(--ink) !important;
  border: 1px solid var(--gold) !important; border-radius: var(--radius-md);
  padding: 10px 22px; font-family: var(--font-label); font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
}
.contact-panel input[type="submit"]:hover {
  background: var(--gold-hover) !important; border-color: var(--gold-hover) !important;
}
.contact-panel input[type="reset"] {
  width: auto !important; background: transparent !important; color: var(--color-text) !important;
  border: 1px solid var(--color-divider) !important; border-radius: var(--radius-md);
  padding: 10px 18px; font-family: var(--font-label); font-weight: 600; cursor: pointer;
  margin-left: 8px;
}
.contact-form { display: grid; gap: 18px; }
.req { color: var(--color-accent); }
.form-legend { font-size: 12px; margin: 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.contact-thanks { display: none; flex-direction: column; gap: 14px; padding: 12px 0; }
.contact-thanks .h2 { text-transform: uppercase; }

/* image placeholder — swap for a real <img> when you have photos */
.photo-ph { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--color-surface); margin: 0; }
.photo-ph.tall { aspect-ratio: 3 / 4; }
.media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.media.tall { aspect-ratio: 3 / 4; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Background-removed portrait: no frame, transparent PNG shown whole (contain)
   so the cutout sits directly on the page with no box or outline. */
.portrait { border: 0; margin: 0; aspect-ratio: 1 / 1; width: 100%; max-width: 360px; }
.portrait img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; }
.photo-ph span {
  font-family: var(--font-label); letter-spacing: .06em; text-transform: uppercase;
  font-size: 13px; text-align: center; padding: 16px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ============================================================================
   RESPONSIVE CONTRACT — read before touching any layout below.
   R1  Base (no media query) styles must be correct at 320px, single column.
       Media queries ENHANCE upward with min-width; no max-width patch-ups
       except the one stack layer here (fixing pre-existing fixed splits).
   R2  No fixed multi-column (fixed `fr` tracks) without an explicit stack.
       Use auto-fit/minmax(min,1fr) so it self-wraps, or introduce the columns
       only above the stack breakpoint. Below it, one column.
   R3  Never size content images by viewport height. Size from container width
       with a max-width/max-height cap. (vh sizing caused the photo inversion.)
   R4  One breakpoint system: stack <=767px, desktop density >=1024px. No
       ad-hoc pixel breakpoints elsewhere.
   R5  Verify every change at 375 / 768 / 1024 / 1440 on all four pages:
       no horizontal scroll, splits stacked <=767, form usable, photo
       consistent (never bigger on a smaller screen), text top-aligned.
   R6  Prefer intrinsic primitives (auto-fit/minmax, flex-wrap, clamp) over
       fixed columns and manual breakpoints.
   ========================================================================== */

/* R2/R4 — Stack layer: below 767px every fixed split collapses to one column.
   DOM order already reads correctly stacked (About text->photo, Contact
   info->form), so no reordering is needed. */
@media (max-width: 767px) {
  .split, .split-6-6, .split-7-5, .split-5-7 {
    grid-template-columns: 1fr; align-items: stretch;
  }
}

/* ============================================================================
   ONE-SCREEN DESKTOP LAYER
   Target: every page fits a 1920×1080 viewport with no scrolling.

   This is a density pass, not a redesign: it only re-points the :root tokens
   above (and the few fixed rhythm values) at tighter numbers once there is a
   desktop-width viewport. Nothing here introduces a new colour, font or
   component — change a value in :root and it still flows through both modes.
   Below 1024px the original, roomier scale applies unchanged.
   ========================================================================== */
@media (min-width: 1024px) {
  :root {
    /* Type: scale the theme's own sizes down rather than replacing them, so
       changing "Heading size" in the editor still changes both modes. */
    --dense-display: .48;
    --dense-h1:      .50;
    --dense-h2:      .66;
    --dense-h3:      .85;
    --dense-lead:    .80;

    --space-section: clamp(22px, 1.8vw, 28px);
    --space-band:    clamp(18px, 1.4vw, 24px);
    --grid-min:      230px;
    --grid-gap:      clamp(14px, 1.2vw, 20px);
    --split-gap:     clamp(24px, 2.4vw, 40px);
    --card-pad:      16px;
    --card-gap:      8px;
    --stack-gap:     12px;
  }

  /* Header: the logo drove a 186px bar — height-capped it is ~90px. */
  .brand img { width: auto; height: clamp(44px, 5.2vh, 58px); }
  .site-header .nav { padding-block: 12px; }

  /* Section lead-ins and hero rhythm. */
  .head { margin-bottom: 18px; }
  .cat-head { gap: 5px; margin-bottom: 16px; }
  .hero .rule-gold { margin-bottom: 16px; }
  .hero .lead { margin-top: 14px; }
  .hero .actions { margin-top: 18px; }
  .text-media .head { margin-bottom: 12px; }
  .text-media .prose { margin-top: 12px; }
  .text-media .btn { margin-top: 16px; }

  /* Contact form: tighter rows and a shorter message box. */
  .contact-panel { padding: 22px; }
  .contact-form { gap: 12px; }
  .field-row { gap: 14px; }
  .contact-aside { gap: 16px; }
  .contact-note { padding: 16px; }
  textarea.input { min-height: 68px; }
  .cat-tab { padding: 9px 4px; }
}