/* =========================================================================
   Geekin — shared design system stylesheet
   =========================================================================
   This file is the single source of truth for every page on the site:
   tokens, header, footer, and the common component set (hero, section
   header, card grid, trust strip, CTA band, buttons, forms-in-waiting).

   Brand tokens are LOCKED, reused as-is (do not invent new brand colors):
     ink    #15171C
     paper  #EDEEF0
     accent #FF9933  (saffron / kesar)
     slate  #4B5563

   Design direction (2026-10-06 rebuild): moving from the old single-page
   dark-terminal aesthetic to a conventional, light-first corporate MSP
   site. The brand identity (logo, wordmark, blinking cursor, accent color)
   is preserved exactly — only the typographic/layout treatment changes.
   JetBrains Mono is now reserved for the logo wordmark and small "kicker"
   labels only; Public Sans carries all headings and body copy. A dark mode
   is still offered as a secondary pass via prefers-color-scheme, mirroring
   (but not dominating) the light default.

   Page-specific CSS (Services, Industries, About, etc.) should be a SEPARATE
   file loaded after this one (e.g. <link rel="stylesheet" href="/services.css">)
   so this shared file stays small and uncontested between pages. Never
   redefine tokens or header/footer rules in a page-specific file.
   ========================================================================= */

:root {
  /* ---- brand colors (locked) ---- */
  --ink: #15171C;
  --paper: #EDEEF0;
  --accent: #FF9933;
  --accent-ink: #15171C;   /* text color when sitting on top of accent */
  --alert: #D92D20;
  --slate: #4B5563;        /* literal brand slate, used directly (light-first now) */

  /* ---- semantic surface tokens — LIGHT is the default/primary theme ---- */
  --bg: #FFFFFF;           /* primary page background — plain white, not a brand color */
  --bg-subtle: var(--paper); /* alternating section tint / footer / subtle cards */
  --bg-raised: #FFFFFF;    /* card surfaces that need to pop off --bg-subtle */
  --fg: var(--ink);
  --fg-muted: var(--slate);
  --border: #DADDE1;
  --border-strong: #C3C7CD;
  --card-bg: #FFFFFF;
  --card-border: #E2E4E8;
  --shadow-sm: 0 1px 2px rgba(21, 23, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(21, 23, 28, 0.08);
  --header-bg: color-mix(in srgb, var(--bg) 85%, transparent);

  color-scheme: light;

  /* ---- type ---- */
  --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: clamp(2.5rem, 4.6vw, 3.6rem);

  /* ---- spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- layout ---- */
  --content-width: 1200px;
  --content-narrow: 740px;
  --gutter: 24px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

/* ---- Dark mode: explicit secondary pass on the same tokens ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink);
    --bg-subtle: #1A1D24;
    --bg-raised: #1C1F26;
    --fg: var(--paper);
    --fg-muted: #9CA3AF;
    --border: #2B2F39;
    --border-strong: #383D49;
    --card-bg: #1C1F26;
    --card-border: #2B2F39;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --header-bg: color-mix(in srgb, var(--bg) 80%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--ink);
  --bg-subtle: #1A1D24;
  --bg-raised: #1C1F26;
  --fg: var(--paper);
  --fg-muted: #9CA3AF;
  --border: #2B2F39;
  --border-strong: #383D49;
  --card-bg: #1C1F26;
  --card-border: #2B2F39;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --header-bg: color-mix(in srgb, var(--bg) 80%, transparent);
  color-scheme: dark;
}

/* ========================================================================
   Reset / base
   ======================================================================== */

* { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  font-weight: 600;
  z-index: 200;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; top: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-4xl); letter-spacing: -0.015em; }
h2 { font-size: var(--text-3xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); font-weight: 600; }
p { margin: 0 0 var(--space-4); }

/* small mono "kicker" label — the ONE place JetBrains Mono shows up
   outside the logo. Use sparingly: one per section/hero, never body copy. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-4);
}
.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  display: inline-block;
}

/* ========================================================================
   Logo / cursor (unchanged brand mechanics — blink is unconditional,
   do NOT reintroduce a prefers-reduced-motion override that disables it)
   ======================================================================== */

.logo-word {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.06em;
  vertical-align: text-bottom;
  background: var(--accent);
  border-radius: 1px;
  animation: blink 1.6s steps(1) infinite;
}
.cursor[data-status="alert"] { background: var(--alert); }
.cursor-lg { width: 0.42em; height: 0.86em; }

@keyframes blink {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/* Deliberate: no @media (prefers-reduced-motion) override here. The blink
   is the core brand signature and animates unconditionally for every
   visitor — same decision already made and verified on helpdesk.geekin.us
   and the main site. Do not reintroduce a disabling rule. */

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg);
}
.logo-small { font-size: 1rem; }

/* (2026-10-06) Persistent header tagline -- added so "Never idle." is
   visible on every page via the shared header, not just once in the
   homepage hero (which future pages won't include). Wraps the existing
   .logo span without changing it, so the standalone footer .logo
   instance is unaffected. */
.logo-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-decoration: none;
}
.logo-tagline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--accent);
  line-height: 1;
}

/* ========================================================================
   Header / primary nav
   ======================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-4);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 500;
}

.nav-links a {
  text-decoration: none;
  color: var(--fg-muted);
  transition: color 0.15s ease;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a.is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-portal-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav-portal-link:hover { color: var(--fg); }

/* ---- Theme toggle (sun/moon) ----
   Icon visibility is pure CSS, mirroring the exact three-state selector
   pattern used for the token blocks above: default (no explicit choice)
   follows prefers-color-scheme; an explicit [data-theme] always wins. The
   button itself just flips document.documentElement's data-theme attribute
   and persists the choice — see script.js (initThemeToggle). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--border-strong); }
.theme-toggle svg { width: 18px; height: 18px; }

.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }

.nav-toggle {
  display: none;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--fg);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ========================================================================
   Buttons
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
  line-height: 1;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { opacity: 0.92; }

.btn-secondary {
  border-color: var(--border-strong);
  color: var(--fg);
  background: transparent;
}
.btn-secondary:hover { border-color: var(--fg-muted); }

.btn-sm { padding: 9px 16px; font-size: var(--text-xs); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
}
.btn-text .arrow { transition: transform 0.15s ease; }
.btn-text:hover .arrow { transform: translateX(3px); }

/* ========================================================================
   Page hero pattern — two sizes: .hero (home, large) and
   .page-hero (interior pages, shorter, same anatomy)
   ======================================================================== */

.hero {
  padding-block: var(--space-9) var(--space-8);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}

.hero h1 { margin-bottom: var(--space-2); }

.hero-tagline {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 var(--space-5);
}

.hero-copy {
  max-width: 52ch;
  font-size: var(--text-lg);
  color: var(--fg-muted);
  margin: 0 0 var(--space-6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.page-hero {
  padding-block: var(--space-8) var(--space-7);
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.page-hero h1 { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.page-hero .hero-copy { max-width: 60ch; font-size: var(--text-base); margin-bottom: 0; }

/* ---- Hero illustration (abstract, brand-colored — NOT a stock photo) ----
   A hand-authored inline SVG, same stroke-based approach as the feather-
   style icons elsewhere, evoking "infrastructure feeding a monitored
   network" — echoes exactly what the live-card below it actually reports.
   Colors are CSS custom properties, not hardcoded hex, so it re-themes
   automatically with the rest of the page (light/dark/explicit toggle). */
.hero-visual {
  display: flex;
  flex-direction: column;
}
.hero-illustration {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 0;
  margin-bottom: var(--space-4);
}
.hero-visual .live-card {
  position: relative;
  z-index: 1;
}

/* ---- Hero illustration animation ----
   (2026-10-06) Originally scoped to respect prefers-reduced-motion as
   standard accessibility practice, but the user's own browser/OS has
   that setting on and explicitly asked to see this animate regardless
   -- same call already made for the logo cursor blink. Now unconditional,
   like the cursor. Kept slow/subtle (4-5.5s loops) since that was never
   the issue, just the visibility. */
@keyframes illustration-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.18); }
}
@keyframes illustration-flow {
  to { stroke-dashoffset: -22; }
}
@keyframes illustration-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}
.illustration-pulse {
  animation: illustration-pulse 4.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.illustration-flow {
  animation: illustration-flow 4s linear infinite;
}
.illustration-breathe {
  animation: illustration-breathe 5.5s ease-in-out infinite;
}

/* ---- Live-systems card (hero visual, home page only) ---- */

.live-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.live-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.live-card-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.live-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.live-card-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.live-card-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fg-muted);
  flex-shrink: 0;
  display: inline-block;
}
.live-card-list li[data-healthy="true"] .live-dot { background: var(--accent); }
.live-card-list li[data-healthy="false"] .live-dot { background: var(--alert); }
.live-card-foot {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin: 0;
}
.live-card-foot a { color: var(--fg-muted); text-decoration: underline; }

/* ========================================================================
   Section header pattern (left-aligned, not centered)
   ======================================================================== */

section { padding-block: var(--space-9); }
.section-alt {
  background-color: var(--bg-subtle);
  /* Subtle CSS-only geometric texture (dot/circuit grid) — a restrained
     brand echo, not a photo or clipart. Opacity is derived from --fg-muted
     via color-mix so it stays whisper-quiet in both themes automatically. */
  background-image: radial-gradient(color-mix(in srgb, var(--fg-muted) 35%, transparent) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}

.section-head {
  max-width: 62ch;
  margin-bottom: var(--space-7);
}
.section-head h2 { margin-bottom: var(--space-3); }
.section-head p {
  color: var(--fg-muted);
  font-size: var(--text-lg);
  margin: 0;
}
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* ========================================================================
   Card grid (services / industries)
   ======================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--accent);
}
.card-icon svg { width: 20px; height: 20px; }

.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--fg-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }

/* ========================================================================
   Trust strip
   ======================================================================== */

.trust-strip {
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-7);
}
.trust-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.trust-item .card-icon { margin-bottom: 0; flex-shrink: 0; background: var(--bg-raised); }
.trust-item h3 { font-size: var(--text-base); margin-bottom: 4px; }
.trust-item p { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; }

/* ========================================================================
   How-we-work list (replaces the old full-terminal block — one small mono
   accent survives as a tag, not a dominant aesthetic)
   ======================================================================== */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}
.work-item { display: flex; gap: var(--space-4); }
.work-index {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  flex-shrink: 0;
  width: 2ch;
}
.work-item h3 { margin-bottom: 4px; }
.work-item p { color: var(--fg-muted); font-size: var(--text-sm); margin: 0; }

/* ========================================================================
   CTA band
   ======================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
/* Subtle CSS-only dot texture on the dark band — same restrained-geometry
   idea as .section-alt above, just tuned for a dark surface. */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(237, 238, 240, 0.08) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  pointer-events: none;
}
.cta-band > div { position: relative; z-index: 1; }
.cta-band h2 { color: var(--paper); margin-bottom: var(--space-2); font-size: var(--text-2xl); }
.cta-band p { color: #B9BEC8; margin: 0; max-width: 46ch; }
.cta-band-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.cta-band .btn-secondary { border-color: #3A3E47; color: var(--paper); }
.cta-band .btn-secondary:hover { border-color: #565B66; }

/* ========================================================================
   Footer
   ======================================================================== */

.site-footer {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  padding-block: var(--space-8) var(--space-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}

.footer-brand .logo { margin-bottom: var(--space-3); }
.footer-brand p {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  max-width: 32ch;
  margin: 0;
}

.footer-col h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-bottom: var(--space-4);
  font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer-col a {
  text-decoration: none;
  color: var(--fg);
  font-size: var(--text-sm);
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--fg-muted);
  font-size: var(--text-xs);
}
.footer-bottom a { color: var(--fg-muted); text-decoration: underline; }

/* ========================================================================
   Responsive — phone width (~400px) and general mobile breakpoint
   ======================================================================== */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .nav-links, .nav-portal-link { display: none; }
  .nav-toggle { display: flex; }
  .site-nav { gap: var(--space-3); }

  .site-nav.is-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--gutter) var(--space-5);
    box-shadow: var(--shadow-md);
  }
  .site-nav.is-open .nav-links a { padding: 10px 0; width: 100%; border-bottom: 1px solid var(--border); }

  .header-inner { height: 64px; }
  .hero-illustration { margin-bottom: var(--space-3); }
  .hero { padding-block: var(--space-7) var(--space-6); }
  section { padding-block: var(--space-7); }
  .page-hero { padding-block: var(--space-7); }
  h1 { font-size: 2rem; }
  h2 { font-size: var(--text-2xl); }
  .cta-band { padding: var(--space-6) var(--space-5); flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .card-grid { grid-template-columns: 1fr; }
}