/*
 * HGM Design System — production bundle (concatenated).
 * Generated by build/build_design_system.py — do not edit by hand.
 * Source: ~/workspace/site-redesign/design-system/
 */

/* ===== foundation/tokens.css ===== */
/* ==========================================================================
   HGM Design System — Foundation / Tokens
   --------------------------------------------------------------------------
   Every color, type, spacing, shadow, easing, and layer decision in one place.
   Components reference these tokens; they never hardcode values.
   ========================================================================== */

:root {
  /* ── Color: surfaces ── */
  --ink: #070a13;            /* near-black, body text on light */
  --night: #0d1117;          /* dark section panels */
  --overlay: #03050a;        /* footer / deepest dark */
  --paper: #f5f1e8;          /* light canvas */
  --paper-warm: #fbfbf9;     /* raised light surface (chips) */

  /* ── Color: brand ── */
  --gold: #c9a96e;           /* metallic gold — display accent on dark surfaces */
  --gold-deep: #7a5f2a;      /* bronze gold — buttons, fills (white text) */
  --gold-hover: #d8bc82;     /* bright gold — CTA hover state */
  --gold-ink: #7a5f2a;       /* deep gold text on gold-tinted surfaces */
  --gold-soft: #f0e6cc;      /* champagne tint — light gold card background */
  --gold-soft-line: #e7ddc6;/* champagne border — light gold card border */
  --link-gold: #7a5f2a;      /* link/interactive gold on light surfaces */

  /* ── Color: text tiers ── */
  --muted: #59616b;          /* secondary body on light */
  --kicker-gray: #6c757d;    /* section kickers on light */
  --nav-link: #42484f;       /* topbar nav links */
  --card-meta: #68717a;      /* card numbers / meta on light */

  /* ── Color: lines & borders ── */
  --line: #e7ddc6;           /* hairline on light */
  --line-dark: rgba(255, 255, 255, .14);  /* hairline on dark */

  /* ── Color: on-dark text ── */
  --paper-dim: rgba(245,241,232, .78);
  --paper-faint: rgba(245,241,232, .62);
  --paper-ghost: rgba(245,241,232, .45);

  /* ── Color: on-gold-panel text (intel section) ── */
  --on-gold-deep: #6b4f10;
  --on-gold: #6e5212;
  --on-gold-label: #7d5f16;

  /* ── State ── */
  --focus: #7a5f2a;          /* focus ring with contrast on light surfaces */
  --focus-on-dark: #c9a96e;  /* focus ring on dark surfaces */

  /* ── Type ── */
  --mono: 'DM Mono', monospace;
  --sans: 'Manrope', Arial, sans-serif;

  /* ── Spacing ── */
  --gutter: clamp(24px, 5vw, 64px);
  --section-pad: 7vw;        /* vertical+horizontal desktop section padding */
  --section-pad-mobile: 18vw 7vw;

  /* ── Type scale: display headlines ── */
  --h-display-lg: clamp(52px, 8.2vw, 112px);
  --h-display-md: clamp(44px, 6.4vw, 90px);
  --h-display-sm: clamp(34px, 4.2vw, 64px);
  --tracking-display: -.08em;

  /* ── Labels (mono microcopy) ── */
  --label-size: 11px;
  --label-tracking: .12em;

  /* ── Shadows ── */
  --shadow-card: 0 2px 12px rgba(11, 14, 19, .06);
  --shadow-elevated: 0 8px 32px rgba(11, 14, 19, .1);
  --shadow-dark: 0 12px 40px rgba(0, 0, 0, .35);
  --shadow-cookie: 0 20px 56px rgba(0, 0, 0, .4);
  --shadow-panel: 0 18px 50px rgba(11, 14, 19, .28);

  /* ── Motion ── */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --t-fast: .15s;
  --t-med: .2s;
  --t-slow: .35s;

  /* ── Radius ── */
  --radius-pill: 999px;
  --radius-card: 16px;

  /* ── Breakpoints (documented; media queries use literal px) ── */
  --bp-tablet: 1024px;
  --bp-sub: 900px;
  --bp-mobile: 760px;

  /* ── Z-index ── */
  --z-cookie: 20;
  --z-drawer: 40;
  --z-a11y-tab: 40;
  --z-mega: 50;
  --z-graph: 60;
  --z-a11y-panel: 70;
  --z-skip: 100;
}

/* ===== foundation/base.css ===== */
/* ==========================================================================
   HGM Design System — Foundation / Base
   --------------------------------------------------------------------------
   Global reset, document defaults, focus/selection, skip link, page shell.
   Load AFTER tokens.css, BEFORE components.
   ========================================================================== */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Locked scroll while an overlay/drawer is open (JS adds the class). */
body.modal-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

img { max-width: 100%; height: auto; }

::selection { background: var(--gold); color: var(--ink); }

/* Focus: blue-deep ring on light surfaces, brand blue on dark ones. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* Skip link (first element in <body>). */
.skip-link {
  position: absolute;
  z-index: var(--z-skip);
  top: -100px;
  left: 12px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  transition: top var(--t-med) var(--ease);
}
.skip-link:focus { top: 12px; }

/* Page shell: clips decorative overflow (hero grain, absolute ornaments). */
.site-shell { overflow: hidden; }

/* Live region mount point used by the homepage's JS renderer. */
#app[aria-live] { display: contents; }

/* ===== foundation/typography.css ===== */
/* ==========================================================================
   HGM Design System — Foundation / Typography
   --------------------------------------------------------------------------
   Display headlines, mono micro-labels, lede paragraphs, and the shared
   section header (.section-intro). Applies globally.
   ========================================================================== */

/* ── Mono micro-label family ── */
.eyebrow,
.section-kicker,
.section-index,
.card-label,
.intel-label,
.footer-heading,
.copyright,
.legal-links,
.socials {
  font-family: var(--mono);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

/* Eyebrow: hero / page-hero overline. Color set by context. */
.eyebrow { margin: 0 0 29px; font-size: var(--label-size); }

/* Section kicker: left side of .section-intro. */
.section-kicker {
  margin: 0;
  color: var(--kicker-gray);
  font-size: var(--label-size);
  line-height: 1.3;
}

/* Section index: right side of .section-intro ("01—04", "Legible · Trustworthy"). */
.section-index {
  color: var(--kicker-gray);
  font-size: var(--label-size);
}

/* Card label: small blue caps label inside cards. */
.card-label,
.intel-label {
  margin: 0 0 22px;
  color: #a88a53;
  font-size: var(--label-size);
}

/* ── Section header row: kicker left, index right ── */
.section-intro {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 6vw;
}

/* ── Lede: the standard intro paragraph under big headlines ── */
.lede {
  max-width: 550px;
  margin: 32px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.42;
}

/* ── Display headline conventions ──
   Markup: <h2>Headline <em>accent words.</em></h2>
   The <em> gets the accent color with normal (non-italic) styling. */
h1 em, h2 em {
  color: var(--gold);
  font-style: normal;
}
h1 .serif-em, h2 .serif-em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

@media (max-width: 760px) {
  .section-intro { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lede { margin-top: 24px; font-size: 15px; }
}

/* ===== foundation/buttons.css ===== */
/* ==========================================================================
   HGM Design System — Foundation / Buttons
   --------------------------------------------------------------------------
   All button + CTA atoms. Sections compose these; they never redefine them.
   Markup:
     <button class="menu-button"><span class="menu-bars">☰</span><span>Menu</span></button>
     <a class="booking-button" href="…">Free assessment <span aria-hidden="true">↗</span></a>
     <a class="dark-cta|light-cta|hero-cta|product-cta" href="…">Label <span>↗</span></a>
     <a class="text-link" href="…">Label <span aria-hidden="true">↓</span></a>
   ========================================================================== */

/* ── Neumorphic menu button (topbar: Menu / Graph) ── */
.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  background: var(--paper);
  color: #252a30;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 5px 5px 12px rgba(11, 14, 19, .14),
              -5px -5px 12px rgba(255, 255, 255, .95);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.menu-button:hover {
  box-shadow: 7px 7px 16px rgba(11, 14, 19, .16),
              -7px -7px 16px rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}
.menu-button:active {
  box-shadow: inset 4px 4px 10px rgba(11, 14, 19, .14),
              inset -4px -4px 10px rgba(255, 255, 255, .95);
  transform: translateY(0);
}
.menu-bars { font-size: 13px; line-height: 1; }

/* Graph button variant: solid blue-deep, square, stronger CTA weight. */
.menu-button[data-action="graph"] {
  border-radius: 0;
  background: var(--gold-deep);
  color: #fff;
  padding: 17px 30px;
  font-size: 14px;
  font-weight: 700;
  gap: 10px;
  box-shadow: 0 8px 22px rgba(124, 94, 28, .35);
}
.menu-button[data-action="graph"]:hover {
  background: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}
.menu-button[data-action="graph"]:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(124, 94, 28, .3);
}

/* ── Shared CTA base ── */
.booking-button,
.hero-cta,
.dark-cta,
.light-cta,
.product-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  font-size: 13px;
  font-weight: 700;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.booking-button:hover,
.hero-cta:hover,
.dark-cta:hover,
.light-cta:hover,
.product-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}
.booking-button:hover { background: var(--gold-hover); }
.hero-cta:hover { background: var(--gold-hover); }
.light-cta:hover,
.product-cta:hover { background: var(--gold-hover); }

/* ── CTA colorways ── */
.booking-button { background: var(--gold-deep); color: #fff; padding: 17px 30px; font-size: 14px; box-shadow: 0 8px 22px rgba(124, 94, 28, .35); }
.booking-button [aria-hidden="true"] { display: inline-block; transition: transform var(--t-fast) var(--ease); }
.booking-button:hover [aria-hidden="true"] { transform: translate(3px, -3px); }
.hero-cta  { background: var(--gold); color: #070a13; box-shadow: 0 8px 26px rgba(201,169,110, .35); }
.dark-cta  { margin-top: 34px; background: var(--ink); color: var(--paper); }
.light-cta { color: var(--ink); background: var(--gold); }
.product-cta { margin-top: 34px; background: var(--product-accent, var(--gold)); color: var(--ink); }

/* ── Text link (mono, with trailing glyph) ── */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.text-link--light { color: var(--muted); }

/* ── Modal close button (shared by mega-menu, graph-menu, a11y panel) ── */
.modal-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}
.modal-close:hover { opacity: .7; }

@media (max-width: 760px) {
  .booking-button { padding: 11px 16px; font-size: 12px; }
}

/* ===== foundation/theme.css ===== */
/* ==========================================================================
   HGM Design System — Foundation / Theme
   --------------------------------------------------------------------------
   Light is the default palette (tokens.css). `[data-theme="dark"]` flips the
   palette and adjusts components that need more than token swaps.
   The theme is set before first paint by the inline early-theme script and
   toggled from the a11y widget (Light / Dark / Auto). Auto follows
   prefers-color-scheme via site.js.
   Load order: after buttons.css, before components.
   ========================================================================== */

/* ---- Themes: light is default; dark flips the palette ---- */
[data-theme="dark"] {
  --ink: #f5f1e8;
  --night: #dfe3e6;
  --paper: #070a13;
  --muted: #a8aeb7;
  --gold: #c9a96e;
  --line: #262c34;
  --shadow-card: 0 2px 12px rgba(0,0,0,.45);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,.55);
}
[data-theme="dark"] .article-body p,
[data-theme="dark"] .article-body ul,
[data-theme="dark"] .article-body ol { color: #c9cfd6; }
[data-theme="dark"] .article-body .pull { color: var(--ink); border-left-color: var(--gold); }
[data-theme="dark"] .article-body blockquote { color: #c9cfd6; border-left-color: var(--gold); }
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select { background: #0b1020; color: var(--ink); }
[data-theme="dark"] .a11y-tab:hover { background: #161c25; }
[data-theme="dark"] .a11y-switch { background: #2a313b; }
[data-theme="dark"] .table-wrap table { background: #0b1020; }
[data-theme="dark"] .table-wrap th { background: #1a212b; color: var(--ink); }
[data-theme="dark"] .table-wrap td { border-color: var(--line); color: #c9cfd6; }
[data-theme="dark"] pre { background: #0b1020; color: #dbe2ea; border-color: var(--line); }
[data-theme="dark"] code { background: rgba(201,169,110,.12); }
[data-theme="dark"] .a11y-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
html.a11y-contrast[data-theme="dark"] { --muted: #c9cfd6; }
[data-theme="dark"] .timeline-phase {
  background: #0b1020;
}

/* ===== components/motion/motion.css ===== */
/* ==========================================================================
   HGM Design System — Component / Motion
   --------------------------------------------------------------------------
   All animation: scroll-reveal, hero entrance stagger, shared keyframes, and
   the global reduced-motion guard.
   Usage:
     <section class="reveal">…</section>              — fades/slides in on scroll
     <section class="reveal reveal-delay-2">…</section> — staggered (delays 1–5)
   JS adds .visible via IntersectionObserver (see site's graph.js). Without JS,
   add a no-JS fallback: `.no-js .reveal { opacity: 1; transform: none; }`.
   Depends on: tokens.
   ========================================================================== */

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-delay-1 { transition-delay: 0s; }
.reveal-delay-2 { transition-delay: .12s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .36s; }
.reveal-delay-5 { transition-delay: .48s; }

.no-js .reveal { opacity: 1; transform: none; }

/* ── Hero entrance stagger ── */
.hero-copy > * {
  opacity: 0;
  animation: heroFade .9s var(--ease) forwards;
}
.hero-copy .eyebrow { animation-delay: .2s; }
.hero-copy h1 { animation-delay: .4s; }
.hero-copy .hero-tagline,
.hero-copy .hero-proof { animation-delay: .6s; }
.hero-copy .hero-actions { animation-delay: .8s; }

@keyframes heroFade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Shared keyframes ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  50% { opacity: .35; transform: scale(.7); }
}
@keyframes float {
  50% { transform: translateY(-8px); }
}
@keyframes barPulse {
  to { transform: scaleY(.65); transform-origin: bottom; }
}
@keyframes ringPulse {
  50% { transform: scale(1.08); opacity: .8; }
}

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

/* ===== components/topbar/topbar.css ===== */
/* ==========================================================================
   HGM Design System — Component / Topbar
   --------------------------------------------------------------------------
   Global header. Absolute over the homepage hero; `.topbar--page` is the
   sticky variant used on subpages (with .page-hero below it).
   Markup:
     <header class="topbar">
       <a class="wordmark" href="/" aria-label="…home">
         <img class="wordmark__img" src="…" alt="…" width="32" height="32"></a>
       <nav class="desktop-nav" aria-label="Main navigation">…</nav>
       <div class="nav-actions">
         <button class="menu-button mobile-toggle" data-action="drawer">…</button>
         <button class="menu-button" data-action="graph">…</button>
         <a class="booking-button" href="…">Free assessment ↗</a>
       </div>
     </header>
   Depends on: tokens, base, buttons.
   ========================================================================== */

.topbar {
  position: absolute;
  z-index: 8;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 7vw;
  background: rgba(248, 248, 246, .97);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
}

/* Sticky page variant (subpages). */
.topbar--page { position: sticky; top: 0; }

/* Brand wordmark (logo image). */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .18em;
}
.wordmark__img { display: block; width: auto; height: 28px; }

/* Desktop nav links + overlay trigger buttons. */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-right: auto;
}
.desktop-nav a,
.desktop-nav button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--nav-link);
  font-size: 13px;
  transition: color var(--t-fast) var(--ease);
}
.desktop-nav button { display: inline-flex; align-items: center; gap: 6px; }
.desktop-nav small { color: var(--link-gold); font-size: 13px; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

a:hover,
.desktop-nav button:hover { color: #a88a53; }

/* Mobile-only menu toggle; hidden on desktop. */
.mobile-toggle { display: none; }

@media (max-width: 760px) {
  .topbar { height: 50px; padding: 0 7vw; gap: 8px; }
  .desktop-nav { display: none; }
  .nav-actions { margin-left: auto; gap: 8px; }
  .mobile-toggle { display: inline-flex; }
}

/* ===== components/mobile-drawer/mobile-drawer.css ===== */
/* ==========================================================================
   HGM Design System — Component / Mobile drawer
   --------------------------------------------------------------------------
   Slide-in navigation drawer for mobile. Opened by
   [data-action="drawer"] (the .mobile-toggle button in the topbar);
   JS adds .open on the next frame for the slide transition.
   Markup:
     <div class="mobile-drawer" data-overlay="drawer" role="dialog" aria-modal="true" aria-label="Navigation">
       <div class="mobile-drawer__top">
         <img class="wordmark__img" src="…" alt="…" width="32" height="32">
         <button class="mobile-drawer__close" data-action="close">Close ×</button>
       </div>
       <nav><a href="…" data-action="close">Home</a>
         <button data-action="mega" data-menu="services">Services <small>+</small></button>…</nav>
       <a class="mobile-drawer__cta" href="/free-assessment.html">Free assessment ↗</a>
     </div>
   Depends on: tokens, base, buttons (wordmark).
   ========================================================================== */

.mobile-drawer {
  position: fixed;
  z-index: var(--z-drawer);
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
  transform: translateX(-100%);
  transition: transform var(--t-slow) var(--ease);
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }

.mobile-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 7vw;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mobile-drawer__close {
  border: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}
.mobile-drawer__close:hover { opacity: .65; }

.mobile-drawer nav {
  display: flex;
  flex-direction: column;
  padding: 32px 7vw;
}
.mobile-drawer nav a,
.mobile-drawer nav button {
  border: 0;
  padding: 18px 0;
  background: transparent;
  color: rgba(245,241,232, .78);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.04em;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mobile-drawer nav a:hover,
.mobile-drawer nav button:hover {
  color: var(--gold);
  transform: translateX(7px);
}

.mobile-drawer__cta {
  margin: auto 7vw 7vw;
  padding: 18px;
  background: var(--gold-deep);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  box-shadow: 0 8px 22px rgba(124, 94, 28, .35);
}

/* ===== components/mega-menu/mega-menu.css ===== */
/* ==========================================================================
   HGM Design System — Component / Mega menu
   --------------------------------------------------------------------------
   Full-screen dark overlay: Services / Tools grouped link columns.
   Opened by [data-action="mega"][data-menu="services|tools"]; closed by
   [data-action="close"] or clicking the backdrop.
   Markup (JS-rendered):
     <div class="mega-menu" data-overlay="mega" role="dialog" aria-modal="true" aria-label="services menu">
       <div class="mega-menu__top">
         <p class="section-kicker">HGM / Capabilities</p>
         <button class="modal-close" data-action="close">× Close</button>
       </div>
       <div class="mega-menu__grid">
         <div><p class="mega-menu__heading">Strategy</p>
           <a href="…" data-action="close">Label ↗</a>…</div> × 4
       </div>
     </div>
   Depends on: tokens, base, typography, buttons (modal-close).
   ========================================================================== */

.mega-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-mega);
  display: flex;
  flex-direction: column;
  padding: 34px 6vw 7vw;
  background: var(--ink);
  color: var(--paper);
  animation: fadeIn .18s var(--ease) both;
}

.mega-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.mega-menu__top .section-kicker { color: var(--gold); }

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5vw;
  padding-top: 9vw;
}
.mega-menu__heading {
  margin: 0 0 22px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mega-menu__grid a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  color: rgba(245,241,232, .8);
  font-size: 16px;
  line-height: 1.5;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mega-menu__grid a:hover {
  transform: translateX(7px);
  color: var(--gold);
}

@media (max-width: 760px) {
  .mega-menu { padding: 25px 7vw 10vw; overflow-y: auto; }
  .mega-menu__grid { grid-template-columns: 1fr 1fr; gap: 42px 25px; padding-top: 16vw; }
  .mega-menu__grid a { font-size: 14px; }
}

/* ===== components/graph-menu/graph-menu.css ===== */
/* ==========================================================================
   HGM Design System — Component / Graph menu (Graph Series overlay)
   --------------------------------------------------------------------------
   Full-screen BLUE overlay showcasing the five Graph Series products as
   animated `.graph-card`s. Opened by [data-action="graph"].
   Markup (JS-rendered):
     <div class="graph-menu" data-overlay="graph" role="dialog" aria-modal="true" aria-label="HGM Graph Series">
       <div class="graph-menu__top">
         <div><p class="section-kicker">HGM / Flagship product line</p><h2>Graph Series</h2></div>
         <button class="modal-close" data-action="close">× Close</button>
       </div>
       <p class="graph-menu__intro">…</p>
       <div class="graph-menu__grid">
         <a class="graph-card graph-card--nodes" href="?product=schemagraph" data-product="schemagraph">
           <span class="graph-card__number">01</span>
           <div class="graph-card__visual" aria-hidden="true"><i></i><i></i><i></i><b>SG</b></div>
           <div><h3>SchemaGraph</h3><p>…</p></div>
           <span aria-hidden="true">↗</span>
         </a>…
       </div>
       <div class="graph-menu__footer">
         <span>Schema · Copy · Signal · Omni · Search</span>
         <a href="/contact.html">Request Graph Series access ↗</a>
       </div>
     </div>
   Visual variants: graph-card--nodes | --copy | --signal | --omni | --search.
   Depends on: tokens, base, typography, buttons (modal-close), motion (fadeIn).
   ========================================================================== */

.graph-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-graph);
  display: flex;
  flex-direction: column;
  padding: 34px 6vw 5vw;
  background: var(--gold);
  color: var(--ink);
  animation: fadeIn .18s var(--ease) both;
}

.graph-menu__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(11, 14, 19, .25);
}
.graph-menu__top .section-kicker { margin: 0 0 18px; color: var(--on-gold-label); }
.graph-menu__top h2 {
  margin: 0;
  font-size: clamp(52px, 8vw, 116px);
  line-height: .82;
  letter-spacing: var(--tracking-display);
}

.graph-menu__intro {
  max-width: 500px;
  margin: 35px 0 45px;
  color: var(--on-gold);
  font-size: clamp(17px, 2vw, 25px);
  line-height: 1.2;
  letter-spacing: -.04em;
}

/* ── Product cards ── */
.graph-menu__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.graph-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(11, 14, 19, .25);
  color: var(--ink);
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.graph-card:hover {
  background: rgba(245,241,232, .4);
  transform: translateY(-5px);
  border-color: rgba(201,169,110, .55);
  box-shadow: 0 8px 28px rgba(11, 14, 19, .08), 0 0 0 1px rgba(201,169,110, .25), 0 12px 34px rgba(201,169,110, .14);
}
.graph-card__number {
  color: var(--on-gold-label);
  font-family: var(--mono);
  font-size: var(--label-size);
}
.graph-card h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.02;
  letter-spacing: -.07em;
}
.graph-card p {
  max-width: 180px;
  margin: 0;
  color: var(--on-gold);
  font-size: 14px;
  line-height: 1.55;
}
.graph-card > span:last-child { align-self: flex-end; }

/* Animated CSS ornament per product. */
.graph-card__visual {
  position: relative;
  height: 120px;
  margin: 12px 0 22px;
  overflow: hidden;
}
.graph-card__visual i,
.graph-card__visual b {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.graph-card__visual i { width: 12px; height: 12px; background: currentColor; opacity: .55; }
.graph-card__visual i:nth-child(1) { left: 17%; top: 21px; }
.graph-card__visual i:nth-child(2) { left: 49%; top: 7px; }
.graph-card__visual i:nth-child(3) { left: 77%; top: 29px; }
.graph-card__visual b {
  left: 47%; top: 15px;
  width: 27px; height: 27px;
  background: rgba(245,241,232, .25);
}
.graph-card:hover .graph-card__visual i:nth-child(1) { transform: translate(5px, -5px) scale(1.25); }
.graph-card:hover .graph-card__visual i:nth-child(2) { transform: translateY(5px) scale(1.35); }
.graph-card:hover .graph-card__visual i:nth-child(3) { transform: translate(-5px, -3px) scale(1.25); }
.graph-card:hover .graph-card__visual b { transform: rotate(12deg) scale(1.1); background: rgba(245,241,232, .6); }

/* Per-product visual dialects. */
.graph-card--copy .graph-card__visual i,
.graph-card--signal .graph-card__visual i,
.graph-card--search .graph-card__visual i { border: 0; }
.graph-card--copy .graph-card__visual i { width: 26%; height: 3px; }
.graph-card--signal .graph-card__visual i { width: 5px; height: 30px; top: auto; bottom: 3px; }
.graph-card--omni .graph-card__visual i {
  inset: 6px auto auto 36%;
  width: 42px; height: 42px;
  background: transparent; opacity: .7; border: 0;
}
.graph-card--omni .graph-card__visual i:nth-child(2) { inset: 14px auto auto 43%; width: 26px; height: 26px; }
.graph-card--omni .graph-card__visual i:nth-child(3) { inset: 22px auto auto 50%; width: 10px; height: 10px; }

/* Featured (first) card can span wider on large screens. */
.graph-card--featured { grid-column: auto; }

.graph-menu__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  padding-top: 25px;
  border-top: 1px solid rgba(11, 14, 19, .25);
  color: var(--on-gold-label);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.graph-menu__footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

@media (max-width: 1024px) {
  .graph-menu__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .graph-menu { padding: 25px 7vw 10vw; overflow-y: auto; }
  .graph-menu__top h2 { font-size: 64px; }
  .graph-menu__intro { margin: 28px 0 30px; font-size: 18px; }
  .graph-menu__grid { grid-template-columns: 1fr; gap: 10px; }
  .graph-card {
    min-height: 135px;
    padding: 18px;
    display: grid;
    grid-template-columns: 28px 1fr 18px;
    gap: 14px;
    align-items: start;
  }
  .graph-card h3 { font-size: 28px; }
  .graph-card__visual { grid-column: 2; margin: 0 0 8px; }
  .graph-card > span:last-child { align-self: center; }
  .graph-menu__footer { align-items: flex-start; flex-direction: column; margin-top: 45px; }
}

/* ===== components/cookie-bar/cookie-bar.css ===== */
/* ==========================================================================
   HGM Design System — Component / Cookie bar
   --------------------------------------------------------------------------
   Floating consent bar, bottom-center. Dismissed by [data-action="cookie"].
   Markup:
     <div class="cookie-bar" data-cookie>
       <div class="cookie-copy">
         <p class="cookie-label">Cookies</p>
         <p>This website uses cookies… <a href="/privacy.html">Privacy Policy</a>.</p>
       </div>
       <button data-action="cookie">Understood</button>
     </div>
   Depends on: tokens, base.
   ========================================================================== */

.cookie-bar {
  position: fixed;
  z-index: var(--z-cookie);
  bottom: 24px;
  left: 50%;
  width: min(620px, calc(100% - 48px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 28px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-card);
  background: rgba(10, 14, 21, .94);
  color: var(--paper-dim);
  font-size: 13px;
  line-height: 1.6;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-cookie);
}
.cookie-bar p { margin: 0; }
.cookie-label {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.cookie-bar a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-bar button {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 13px 26px;
  background: var(--gold-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cookie-bar button:hover {
  background: var(--gold-hover);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .cookie-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
    bottom: 16px;
  }
  .cookie-bar button { width: 100%; text-align: center; }
}


/* ── Rich variant (homepage + 2 tool pages) ── */
.cookie-copy { display: grid; gap: 6px; }
.cookie-copy .cookie-label { margin: 0; }
.cookie-copy p { margin: 0; }

/* ===== components/a11y/a11y.css ===== */
/* ==========================================================================
   HGM Design System — Component / A11y (accessibility widget)
   --------------------------------------------------------------------------
   User-chosen accessibility controls: vertical edge tab opens a settings
   panel — text size (A / A+ / A++ via zoom), theme (Light / Dark / Auto),
   high contrast, reduce motion, underline links, reset all. Preferences
   persist in localStorage ('hgm-a11y') and re-apply on load; Escape closes
   the panel. Proper switch semantics (role=switch, aria-checked,
   aria-expanded).
   Markup (JS-injected by assets/site.js):
     <button class="a11y-tab" data-a11y-tab aria-expanded="false"
             aria-label="Accessibility options">…</button>
     <div class="a11y-panel" data-a11y-panel hidden role="dialog"
          aria-modal="false" aria-label="Accessibility options">…</div>
   Theme rows inside the panel:
     <div class="a11y-theme"><span class="a11y-theme-label">Theme</span>
       <div class="a11y-seg" role="group" aria-label="Color theme">…</div></div>
   The panel JS toggles classes on <html>:
     .a11y-text-large / .a11y-text-larger / .a11y-contrast /
     .a11y-reduce-motion / .a11y-underline-links
   Depends on: tokens, base, typography, theme.
   ========================================================================== */

.a11y-tab { position: fixed; z-index: var(--z-a11y-tab); right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; height: 158px; padding: 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-right: 0; writing-mode: vertical-rl; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.a11y-tab:hover { background: #ffffff; }
.a11y-tab__icon { writing-mode: horizontal-tb; display: inline-flex; line-height: 0; }
.a11y-tab i { width: 1px; height: 30px; background: #c8cbc8; }
@media (max-width: 760px) { .a11y-tab { transform: translateY(-50%) scale(.85); transform-origin: right center; } }
.a11y-panel { position: fixed; z-index: var(--z-a11y-panel); right: 16px; top: 50%; transform: translateY(-50%); width: 280px; padding: 20px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(11,14,19,.28); }
.a11y-panel[hidden] { display: none; }
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin: 0; padding-bottom: 14px; }
.a11y-panel__head .footer-heading { margin: 0; }
.a11y-panel__head .modal-close { color: var(--ink); }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.a11y-seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.a11y-seg button { border: 0; background: transparent; padding: 8px 12px; font-size: 11px; font-weight: 700; color: var(--muted); font-family: var(--mono); cursor: pointer; }
.a11y-seg button + button { border-left: 1px solid var(--line); }
.a11y-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.a11y-switch { position: relative; flex: none; width: 44px; height: 24px; border: 1px solid var(--line); border-radius: 999px; background: #e2e4e1; padding: 0; cursor: pointer; }
.a11y-switch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .18s var(--ease); }
.a11y-switch.is-on { background: var(--gold-deep); border-color: var(--gold-deep); }
.a11y-switch.is-on i { left: 22px; }
.a11y-reset { width: 100%; margin: 16px 0 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); padding: 11px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.a11y-reset:hover { background: var(--ink); color: var(--paper); }
html.a11y-text-large { zoom: 1.12; }
html.a11y-text-larger { zoom: 1.25; }
html.a11y-contrast { --muted: #2f353c; }
html.a11y-contrast .footer-brand p, html.a11y-contrast .footer-caption { color: rgba(245,241,232,.94); }
html.a11y-contrast .footer-links a { color: rgba(245,241,232,.88); }
html.a11y-contrast .service-card p { color: #3a4149; }
html.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
@media (max-width: 760px) { .a11y-panel { left: 12px; right: 12px; top: auto; bottom: 12px; transform: none; width: auto; } }

/* ── Theme selector rows (were unstyled before the DS port) ── */
.a11y-theme { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); }
.a11y-theme-label { font-size: 14px; font-weight: 600; }

/* ===== components/hero/hero.css ===== */
/* ==========================================================================
   HGM Design System — Component / Hero
   --------------------------------------------------------------------------
   Full-viewport dark hero: layered background (image + vignette + grain),
   staggered copy entrance, proof points, actions, scroll cue.
   Markup:
     <section class="hero">
       <div class="hero-image" aria-hidden="true"><img … fetchpriority="high"></div>
       <div class="hero-vignette" aria-hidden="true"></div>
       <div class="hero-grain" aria-hidden="true"></div>
       …header…
       <div class="hero-copy">
         <p class="eyebrow">…</p>
         <h1>…<em>accent</em>…</h1>
         <p class="hero-tagline">…</p>
         <p class="hero-proof"><span>…</span>…</p>
         <div class="hero-actions"><a class="hero-cta">…</a><a class="text-link">…</a></div>
       </div>
       <a class="scroll-cue" href="#…">Scroll to explore <span>↓</span></a>
     </section>
   Depends on: tokens, base, typography, buttons, motion (entrance animation).
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  height: 900px;
  max-height: 1000px;
  overflow: hidden;
  background: #07080b;
  color: var(--paper);
}

/* Layered backdrop: photographic image, readability vignette, film grain. */
.hero-image,
.hero-vignette,
.hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-image {
  z-index: 0;
  background: radial-gradient(120% 90% at 70% 10%, #3a2c12 0%, #141007 45%, #07080b 100%),
              radial-gradient(55% 40% at 18% 82%, rgba(201,169,110, .13), transparent 70%);
  overflow: hidden;
}
.hero-image img {
  position: absolute;
  top: 50%;
  left: 70%;
  height: 70%;
  width: auto;
  transform: translate(-70%, -50%) scale(1.02);
}
.hero-vignette {
  z-index: 1;
  background: linear-gradient(90deg, rgba(5, 9, 14, .7), transparent 75%),
              linear-gradient(0deg, rgba(4, 7, 11, .85), transparent 50%, rgba(3, 6, 10, .28));
}
.hero-grain {
  z-index: 2;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

/* Copy block, vertically centered. */
.hero-copy {
  position: absolute;
  z-index: 4;
  left: 7vw;
  top: 49%;
  width: min(930px, 86vw);
  transform: translateY(-50%);
}
.hero-copy .eyebrow { color: var(--gold); }

.hero-copy h1 {
  margin: 0;
  max-width: 930px;
  color: var(--paper);
  font-size: var(--h-display-lg);
  line-height: .9;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

.hero-tagline {
  max-width: 480px;
  margin: 32px 0 0;
  color: var(--paper-dim);
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.4;
}

/* Mono proof points with gold dots. */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 22px 0 0;
  color: var(--paper-faint);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof span::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 35px;
}

/* Bottom-left scroll cue. */
.scroll-cue {
  position: absolute;
  z-index: 4;
  left: 7vw;
  bottom: 34px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--paper-faint);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.scroll-cue span:last-child { color: var(--gold); font-size: 15px; }

@media (max-width: 760px) {
  .hero { height: 850px; }
  .hero-copy { top: 47%; left: 7vw; transform: translateY(-18%); }
  .hero-copy h1 { font-size: clamp(42px, 13vw, 70px); }
  .hero-tagline { max-width: 315px; margin-top: 24px; font-size: 14px; }
  .hero-proof { font-size: 11px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 28px; }
  .scroll-cue { left: 7vw; bottom: 26px; }
}

/* ===== components/assessment/assessment.css ===== */
/* ==========================================================================
   HGM Design System — Component / Assessment
   --------------------------------------------------------------------------
   §01 readiness section: two-column grid — headline + lede + dark CTA on the
   left, blue-tinted assessment card on the right.
   Markup:
     <section class="assessment-section">
       <div class="section-intro">…</div>
       <div class="assessment-grid">
         <div><h2>…<em>…</em></h2><p class="lede">…</p><a class="dark-cta">…</a></div>
         <div class="assessment-card">
           <p class="card-label">…</p><h3>…</h3><p>…</p><a href="…">… ↗</a>
         </div>
       </div>
     </section>
   Depends on: tokens, base, typography, buttons.
   ========================================================================== */

.assessment-section {
  padding: var(--section-pad);
  background: var(--paper);
}

.assessment-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 10vw;
  align-items: end;
}

.assessment-section h2 {
  margin: 0;
  font-size: var(--h-display-md);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

/* Blue-tinted info card. */
.assessment-card {
  padding: 30px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-soft-line);
  box-shadow: var(--shadow-card);
}
.assessment-card h3 {
  margin: 0;
  font-size: clamp(22px, 2.7vw, 36px);
  line-height: 1;
  letter-spacing: -.05em;
}
.assessment-card p:not(.card-label) {
  color: #4b5461;
  font-size: 15px;
  line-height: 1.65;
}
.assessment-card a {
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .assessment-section { padding: var(--section-pad-mobile); }
  .assessment-grid { grid-template-columns: 1fr; gap: 50px; }
  .assessment-card { padding: 24px; }
}

/* ===== components/metrics/metrics.css ===== */
/* ==========================================================================
   HGM Design System — Component / Metrics
   --------------------------------------------------------------------------
   Stat band: headline + lede, then a 4-up row of large figures with mono
   captions, framed by top/bottom hairlines.
   Markup:
     <section class="metrics-section">
       <div class="section-intro">…</div>
       <h2>…<em>…</em></h2>
       <div class="metrics-band">
         <div class="metric"><strong>$0</strong><span>Platform licensing fees</span></div>
         … × 4
       </div>
     </section>
   Emphasis inside figures: <strong>100<em>%</em></strong> renders the unit in blue.
   Depends on: tokens, base, typography.
   ========================================================================== */

.metrics-section {
  padding: var(--section-pad);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.metrics-section h2 {
  margin: 0;
  font-size: var(--h-display-md);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

.metrics-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 4vw;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.metric { padding: 34px 22px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }

.metric strong {
  display: block;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .9;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}
/* Accent unit inside the figure ("%", "/"). */
.metric strong em { color: var(--link-gold); font-style: normal; }

.metric span {
  display: block;
  margin-top: 18px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .metrics-section { padding: var(--section-pad-mobile); }
  .metrics-band { grid-template-columns: 1fr 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line); padding: 26px 16px; }
}

/* ===== components/schema/schema.css ===== */
/* ==========================================================================
   HGM Design System — Component / Schema (featured platform)
   --------------------------------------------------------------------------
   §02 dark split: product visual left, copy right, with a check-mark
   feature list and light CTA.
   Markup:
     <section class="schema-section">
       <figure class="schema-visual"><img …></figure>
       <div class="schema-copy">
         <p class="section-kicker">02 / Featured platform</p>
         <h2>SchemaGraph</h2>
         <p class="lede">…</p>
         <div class="feature-list">
           <p><span aria-hidden="true">✓</span> Entity relationship mapping</p>…
         </div>
         <p class="lede">…</p>
         <a class="light-cta" href="…">Explore SchemaGraph ↗</a>
       </div>
     </section>
   `.feature-list` is shared with proof/intel sections (dark usage).
   Depends on: tokens, base, typography, buttons.
   ========================================================================== */

.schema-section {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 10vw;
  align-items: center;
  padding: var(--section-pad);
  background: var(--night);
  color: var(--paper);
}

.schema-visual { margin: 0; }
.schema-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(201,169,110, .35);
  box-shadow: var(--shadow-dark);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.schema-visual img:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .45);
}

.schema-copy h2 {
  margin: 0;
  font-size: clamp(48px, 7vw, 104px);
  line-height: .9;
  letter-spacing: var(--tracking-display);
}
.schema-copy .lede { color: var(--paper-dim); }

/* ── Feature list (dark variant) ──
   Two-column checklist with blue check marks. */
.feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  margin: 34px 0;
}
.feature-list p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--paper-dim);
  font-size: 12px;
  line-height: 1.5;
}
.feature-list p span { color: var(--gold); }

@media (max-width: 760px) {
  .schema-section { grid-template-columns: 1fr; gap: 50px; padding: var(--section-pad-mobile); }
  .feature-list { grid-template-columns: 1fr; }
}

/* ===== components/services/services.css ===== */
/* ==========================================================================
   HGM Design System — Component / Services
   --------------------------------------------------------------------------
   Card grid section: `.services-head` (headline + side paragraph) above a
   3-up grid of `.service-card` — number, title, copy, tech chips, arrow chip.
   Markup:
     <section class="services-section">
       <div class="section-intro">…</div>
       <div class="services-head"><h2>…<em>…</em></h2><p>…</p></div>
       <div class="services-grid">
         <article class="service-card">
           <span>01</span>
           <h3>…</h3><p>…</p><p class="card-label">GSC API · GA4 · BigQuery</p>
           <a href="…" aria-label="…">↗</a>
         </article>…
       </div>
     </section>
   `.service-card` is also reused by subpage `.page-section--dark` layouts.
   Depends on: tokens, base, typography, buttons.
   ========================================================================== */

.services-section {
  padding: var(--section-pad);
  background: var(--paper);
}

.services-head {
  display: grid;
  grid-template-columns: 1fr .65fr;
  gap: 10vw;
  align-items: end;
  margin-bottom: 7vw;
}
.services-head h2 {
  margin: 0;
  font-size: var(--h-display-md);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}
.services-head > p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Card grid ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.service-card {
  position: relative;
  min-height: 280px;
  padding: 28px 24px 32px 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.service-card:hover {
  background: rgba(201,169,110, .06);
  transform: translateY(-5px);
  box-shadow: 0 8px 28px rgba(11, 14, 19, .08);
}
/* Gutters between columns. */
.service-card:nth-child(3n+2),
.service-card:nth-child(3n+3) { padding-left: 24px; }
.service-card:nth-child(3n) { border-right: 0; }

.service-card > span {
  color: var(--card-meta);
  font-family: var(--mono);
  font-size: var(--label-size);
}
.service-card h3 {
  max-width: 260px;
  margin: 40px 0 16px;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.05em;
  transition: color var(--t-fast) var(--ease);
}
.service-card:hover h3 { color: var(--gold); }
.service-card p {
  max-width: 290px;
  margin: 0 0 22px;
  color: #4c555f;
  font-size: 15px;
  line-height: 1.65;
}
.service-card p.card-label {
  max-width: 280px;
  margin: 0 0 12px;
  color: #a88a53;
  font-size: var(--label-size);
  line-height: 1.9;
}
/* Arrow chip, top-right. */
.service-card a {
  position: absolute;
  top: 22px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #b7bcb9;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.service-card:hover a {
  border-color: var(--gold);
  background: rgba(201,169,110, .1);
}

@media (max-width: 1024px) {
  .services-head { grid-template-columns: 1fr; gap: 28px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .service-card:nth-child(2n) { border-right: 0; }
  .service-card:nth-child(3n+2),
  .service-card:nth-child(3n+3) { padding-left: 0; }
  .service-card:nth-child(2n) { padding-left: 24px; }
}

@media (max-width: 760px) {
  .services-section { padding: var(--section-pad-mobile); }
  .services-head { grid-template-columns: 1fr; gap: 24px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card,
  .service-card:nth-child(3n+2),
  .service-card:nth-child(3n+3),
  .service-card:nth-child(2n) {
    min-height: 220px;
    padding: 22px 40px 28px 0;
    border-right: 0;
  }
  .service-card a { right: 0; }
}

/* ===== components/process/process.css ===== */
/* ==========================================================================
   HGM Design System — Component / Process
   --------------------------------------------------------------------------
   §04 dark section: 4-up phase steps with top hairlines and blue mono phase
   labels.
   Markup:
     <section class="process-section">
       <div class="section-intro"><p class="section-kicker">04 / Process</p>
         <span class="section-index">Assessment → Architecture → Build → Operate</span></div>
       <h2>…<em>…</em></h2>
       <div class="process-steps">
         <div class="process-step"><span>Phase 01</span><h3>Assess</h3><p>…</p></div>…
       </div>
     </section>
   Depends on: tokens, base, typography.
   ========================================================================== */

.process-section {
  padding: var(--section-pad);
  background: var(--night);
  color: var(--paper);
}
.process-section .section-kicker { color: var(--gold); }

.process-section h2 {
  margin: 0;
  font-size: var(--h-display-md);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  margin-top: 5vw;
}

.process-step {
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}
.process-step span {
  color: var(--gold);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
}
.process-step h3 {
  margin: 22px 0 12px;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.process-step p {
  margin: 0;
  color: var(--paper-faint);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

@media (max-width: 760px) {
  .process-section { padding: var(--section-pad-mobile); }
  .process-steps { grid-template-columns: 1fr; }
}

/* ===== components/integrations/integrations.css ===== */
/* ==========================================================================
   HGM Design System — Component / Integrations
   --------------------------------------------------------------------------
   §05 section: services-head layout with a 6-up grid of mono integration
   chips that invert to black on hover.
   Markup:
     <section class="integrations-section">
       <div class="section-intro">…</div>
       <div class="services-head"><h2>…<em>…</em></h2><p>…</p></div>
       <div class="integrations-grid">
         <div class="integration-chip">Search Console</div>…
       </div>
     </section>
   Depends on: tokens, base, typography, services (reuses .services-head).
   ========================================================================== */

.integrations-section { padding: var(--section-pad); }

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 4vw;
}

.integration-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--paper-warm);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4b5461;
  text-align: center;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.integration-chip:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

@media (max-width: 1024px) {
  .integrations-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px) {
  .integrations-section { padding: var(--section-pad-mobile); }
  .integrations-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== components/who/who.css ===== */
/* ==========================================================================
   HGM Design System — Component / Who (audience profiles)
   --------------------------------------------------------------------------
   §07 section. NOTE: the homepage shipped this markup with NO styles — this
   component authors the visual treatment in the system's 3-up card language
   (sibling of resources/case cards): blue label, tight headline, muted copy,
   top hairline, subtle blue hover wash.
   Markup:
     <section class="who-section">
       <div class="section-intro">…</div>
       <div class="services-head"><h2>…<em>…</em></h2><p>…</p></div>
       <div class="who-grid">
         <div class="who-card">
           <p class="card-label">Profile 01</p>
           <h3>Growth &amp; SEO leaders</h3>
           <p>…</p>
         </div>…
       </div>
     </section>
   Depends on: tokens, base, typography, services (reuses .services-head).
   ========================================================================== */

.who-section { padding: var(--section-pad); }

.who-section h2 {
  margin: 0;
  font-size: var(--h-display-md);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

.who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 5vw;
  border-top: 1px solid var(--line);
}

.who-card {
  padding: 36px 36px 12px 0;
  border-right: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease);
}
.who-card + .who-card { padding-left: 36px; }
.who-card:last-child { border-right: 0; }
.who-card:hover { background: rgba(201,169,110, .05); }

.who-card h3 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -.05em;
}
.who-card p:not(.card-label) {
  margin: 0;
  color: #4c555f;
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 1024px) {
  .who-grid { grid-template-columns: 1fr 1fr; }
  .who-card:nth-child(2) { border-right: 0; padding-left: 36px; }
  .who-card:nth-child(3) { border-right: 0; border-top: 1px solid var(--line); padding-left: 0; }
}

@media (max-width: 760px) {
  .who-section { padding: var(--section-pad-mobile); }
  .who-grid { grid-template-columns: 1fr; }
  .who-card, .who-card + .who-card {
    padding: 28px 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .who-card:first-child { border-top: 0; padding-top: 8px; }
}

/* ===== components/intel/intel.css ===== */
/* ==========================================================================
   HGM Design System — Component / Intel (blue feature panel)
   --------------------------------------------------------------------------
   §08 section: full-bleed blue (#c9a96e) split panel — headline left, lede +
   status-style feature list + dark CTA right.
   Markup:
     <section class="intel-section">
       <div><p class="section-kicker">08 / Featured application / Beta</p>
         <h2>Search<br><em>Intel OS</em></h2></div>
       <div>
         <p class="intel-label">SEO · AEO · GEO intelligence</p>
         <p class="lede">…</p>
         <div class="feature-list">…</div>
         <a class="light-cta" href="…">Request beta access ↗</a>
       </div>
     </section>
   Depends on: tokens, base, typography, buttons, schema (dark .feature-list).
   ========================================================================== */

.intel-section {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 10vw;
  align-items: center;
  padding: var(--section-pad);
  background: #c9a96e;
  color: var(--ink);
}

.intel-section .section-kicker,
.intel-section .intel-label { color: var(--on-gold-deep); }
.intel-section .lede { color: var(--on-gold); }

.intel-section h2 {
  margin: 0;
  font-size: var(--h-display-md);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}
/* Accent word on the blue panel uses ink for contrast. */
.intel-section h2 em { color: var(--ink); }

/* Dark-variant feature list is readable as-is on the blue panel. */
.intel-section .feature-list p { color: var(--on-gold); }
.intel-section .feature-list p span { color: var(--on-gold-deep); }

.intel-section .light-cta {
  margin-top: 34px;
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 760px) {
  .intel-section { grid-template-columns: 1fr; gap: 50px; padding: var(--section-pad-mobile); }
}

/* ===== components/proof/proof.css ===== */
/* ==========================================================================
   HGM Design System — Component / Proof (dark economics + testimonials)
   --------------------------------------------------------------------------
   Dark proof section: kicker, 2-up headline/economics grid, check feature
   lists, then the classy 3-up testimonial grid.
   NOTE: the homepage's inline CSS never defined the quote base styles — this
   component restores them in a classy editorial treatment: oversized serif
   quote mark in brand blue, tight editorial quote text, mono attribution
   with blue em-dash, top rule, subtle hover wash.
   Markup:
     <section class="proof-section">
       <p class="section-kicker">Own the economics.</p>
       <div class="proof-grid">
         <h2>Own the data.<br><em>Own the logic.</em></h2>
         <div>
           <p class="lede">…</p>
           <p class="proof-note">…</p>
           <div class="feature-list">…</div>
         </div>
       </div>
       <div class="quote-grid">
         <p class="reviews-label">Client reviews</p>
         <figure class="quote-card">
           <span class="quote-mark" aria-hidden="true">&ldquo;</span>
           <blockquote>…</blockquote>
           <figcaption><span class="quote-name">Name</span></figcaption>
         </figure>…
       </div>
     </section>
   Depends on: tokens, base, typography, schema (dark .feature-list).
   ========================================================================== */

.proof-section {
  padding: var(--section-pad);
  background: var(--ink);
  color: var(--paper);
}
.proof-section > .section-kicker { color: var(--gold); }

.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  align-items: end;
  margin-top: 7vw;
}
.proof-grid h2 {
  margin: 0;
  font-size: var(--h-display-md);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}
.proof-grid .lede { color: var(--paper-faint); }

.proof-note {
  margin-top: 42px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ── Classy testimonial grid ── */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 10vw;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.reviews-label {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 0;
  color: var(--gold);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-dark);
}

.quote-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 52px 44px 48px;
  border-left: 1px solid var(--line-dark);
  transition: background .25s var(--ease);
}
.quote-card:first-of-type { border-left: 0; }
.quote-card:hover { background: rgba(201,169,110, .05); }

.quote-mark {
  display: block;
  margin-bottom: 30px;
  color: var(--gold);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 72px;
  line-height: .55;
}

.quote-card blockquote {
  flex: 1;
  max-width: 380px;
  margin: 0;
  color: rgba(245,241,232, .92);
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.5;
  letter-spacing: -.02em;
}

.quote-card figcaption {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
}
.quote-name {
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.quote-name::before { content: "— "; color: var(--gold); }
.quote-role {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
}

@media (max-width: 760px) {
  .proof-section { padding: var(--section-pad-mobile); }
  .proof-grid { grid-template-columns: 1fr; gap: 50px; }
  .quote-grid { grid-template-columns: 1fr; }
  .quote-card {
    padding: 40px 0;
    border-left: 0;
    border-top: 1px solid var(--line-dark);
  }
  .quote-card:first-of-type { border-top: 0; }
}

/* ===== components/compare/compare.css ===== */
/* ==========================================================================
   HGM Design System — Component / Compare (rented vs. owned table)
   --------------------------------------------------------------------------
   §09 section. NOTE: the homepage shipped this table with NO styles — this
   component authors the treatment: editorial comparison table with a
   highlighted "HGM-owned" column (blue-tint wash + blue header), mono
   dimension labels, hairline rules.
   Markup:
     <section class="compare-section">
       <div class="section-intro">…</div>
       <h2>…<em>…</em></h2>
       <table class="compare-table">
         <thead><tr><th>Dimension</th>
           <th class="col-rented">Rented SaaS platform</th>
           <th class="col-hgm">HGM-owned architecture</th></tr></thead>
         <tbody><tr><td>Platform licensing</td>
           <td class="col-rented">…</td><td class="col-hgm">…</td></tr>…</tbody>
       </table>
     </section>
   Depends on: tokens, base, typography.
   ========================================================================== */

.compare-section { padding: var(--section-pad); }

.compare-section h2 {
  margin: 0 0 4vw;
  font-size: var(--h-display-md);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
}
.compare-table th,
.compare-table td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.compare-table thead th {
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}
.compare-table tbody td:first-child {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--card-meta);
  white-space: nowrap;
}
/* The owned column is the hero: blue-tint wash + blue header. */
.compare-table .col-hgm {
  background: rgba(201,169,110, .08);
  font-weight: 700;
}
.compare-table thead .col-hgm { color: var(--link-gold); }
.compare-table .col-rented { color: var(--muted); }

@media (max-width: 760px) {
  .compare-section { padding: var(--section-pad-mobile); }
  .compare-table { font-size: 12px; }
  .compare-table th,
  .compare-table td { padding: 12px 8px; }
  .compare-table tbody td:first-child { white-space: normal; }
}

/* ===== components/resources/resources.css ===== */
/* ==========================================================================
   HGM Design System — Component / Resources (guides & resources cards)
   --------------------------------------------------------------------------
   §10 section. NOTE: the homepage shipped this grid with NO base styles —
   this component authors the 3-up card treatment in the system's card
   language: top hairline, blue kind label, tight headline, muted copy,
   arrow link, subtle hover lift.
   Markup:
     <section class="resources-section">
       <div class="section-intro">…</div>
       <div class="services-head"><h2>…<em>…</em></h2><p>…</p></div>
       <div class="resources-grid">
         <article class="resource-card">
           <p class="card-label">Guide</p>
           <h3>…</h3><p>…</p>
           <a href="…">Read more <span aria-hidden="true">↗</span></a>
         </article>…
       </div>
     </section>
   Depends on: tokens, base, typography, services (reuses .services-head).
   ========================================================================== */

.resources-section { padding: var(--section-pad); }

.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 4vw;
  border-top: 1px solid var(--line);
}

.resource-card {
  display: flex;
  flex-direction: column;
  padding: 36px 36px 40px 0;
  border-right: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.resource-card + .resource-card { padding-left: 36px; }
.resource-card:last-child { border-right: 0; }
.resource-card:hover {
  background: rgba(201,169,110, .05);
  transform: translateY(-4px);
}

.resource-card h3 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -.05em;
}
.resource-card > p:not(.card-label) {
  flex: 1;
  margin: 0 0 26px;
  color: #4c555f;
  font-size: 15px;
  line-height: 1.65;
}
.resource-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--link-gold);
  font-size: 13px;
  font-weight: 700;
  transition: color var(--t-fast) var(--ease);
}
.resource-card a:hover { color: var(--ink); }

@media (max-width: 1024px) {
  .resources-grid { grid-template-columns: 1fr 1fr; }
  .resource-card:nth-child(2) { border-right: 0; padding-left: 36px; }
  .resource-card:nth-child(3) { border-right: 0; border-top: 1px solid var(--line); padding-left: 0; }
}

@media (max-width: 760px) {
  .resources-section { padding: var(--section-pad-mobile); }
  .resources-grid { grid-template-columns: 1fr; }
  .resource-card, .resource-card + .resource-card {
    padding: 28px 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .resource-card:first-child { border-top: 0; padding-top: 8px; }
}

/* ===== components/faq/faq.css ===== */
/* ==========================================================================
   HGM Design System — Component / FAQ
   --------------------------------------------------------------------------
   Accordion section built on native <details>/<summary> — works with NO JS.
   The homepage's sizeFaq() JS (measured-height animation) is optional
   enhancement only; the CSS never depends on it. Decision 2026-09-27: keep
   the accordion pattern (do NOT convert to a static list).
   Markup:
     <section class="faq-section">
       <div class="section-intro"><p class="section-kicker">11 / Before you build.</p></div>
       <div class="faq-main">
         <h2>…</h2>
         <details><summary>Question <span aria-hidden="true">+</span></summary>
           <div class="faq-a"><p>Answer.</p></div></details>…
       </div>
     </section>
   Depends on: tokens, base, typography.
   ========================================================================== */

.faq-section {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 10vw;
  padding: var(--section-pad);
  background: var(--paper);
}

.faq-section h2 {
  margin: 0;
  font-size: var(--h-display-sm);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

.faq-main details {
  position: relative;
  padding: 26px 0 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease), padding var(--t-fast) var(--ease);
}
/* Hover accent: blue bar slides in from the left edge. */
.faq-main details::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 2px;
  background: var(--gold-deep);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-med) var(--ease);
}
.faq-main details:hover::before { transform: scaleY(1); }
.faq-main details:hover { background: rgba(124, 94, 28, .045); padding-left: 22px; }
.faq-main details[open] { background: rgba(124, 94, 28, .03); padding-left: 22px; }
.faq-main details[open]::before { transform: scaleY(1); }

.faq-main summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.03em;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.faq-main summary:hover { color: var(--gold-deep); }
.faq-main summary::-webkit-details-marker { display: none; }
.faq-main summary span {
  flex: none;
  font-size: 22px;
  font-weight: 400;
  color: var(--muted);
  transition: transform var(--t-med) var(--ease), color var(--t-fast) var(--ease);
}
.faq-main details:hover summary span { color: var(--gold-deep); transform: translateX(3px); }
.faq-main details[open] summary span { transform: rotate(45deg); color: var(--gold-deep); }

.faq-main .faq-a p {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .faq-section { grid-template-columns: 1fr; gap: 50px; padding: var(--section-pad-mobile); }
  .faq-main details:hover { padding-left: 16px; }
  .faq-main details[open] { padding-left: 16px; }
}

/* ===== components/contact-strip/contact-strip.css ===== */
/* ==========================================================================
   HGM Design System — Component / Contact strip
   --------------------------------------------------------------------------
   Dark CTA band that sits directly above the footer: headline left, big
   underlined action link right.
   Markup:
     <section class="contact-strip">
       <div><p class="section-kicker">Make the next move yours.</p>
         <h2>Start with the architecture,<br><em>not a generic package.</em></h2></div>
       <a href="/contact.html">Tell us where your growth system breaks ↗</a>
     </section>
   Depends on: tokens, base, typography.
   ========================================================================== */

.contact-strip {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8vw;
  padding: var(--section-pad);
  background: var(--night);
  color: var(--paper);
}
.contact-strip .section-kicker { color: var(--gold); }

.contact-strip h2 {
  margin: 24px 0 0;
  font-size: clamp(38px, 5vw, 76px);
  line-height: .94;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

.contact-strip > a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold);
  color: var(--gold);
  font-size: 14px;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.contact-strip > a:hover {
  border-color: var(--paper);
  color: var(--paper);
}

@media (max-width: 760px) {
  .contact-strip { flex-direction: column; align-items: flex-start; padding: var(--section-pad-mobile); }
}

/* ===== components/footer/footer.css ===== */
/* ==========================================================================
   HGM Design System — Component / Footer
   --------------------------------------------------------------------------
   `.site-footer` (black): brand + tagline | 4 link columns | newsletter
   signup, then a bottom bar with socials, legal links, copyright.
   Markup:
     <footer class="site-footer">
       <div class="footer-main">
         <div class="footer-brand"><a class="wordmark" href="/">…</a><p>…</p></div>
         <div class="footer-links">
           <div><p class="footer-heading">Explore</p><a href="…">…</a>…</div> × 4
         </div>
         <div class="footer-signup">
           <p class="footer-heading">The intelligence layer</p>
           <h3>Get the signal, not the noise.</h3>
           <form data-action="signup"><input type="email" …><button>↗</button></form>
           <p class="footer-caption">…</p>
         </div>
       </div>
       <div class="footer-bottom">
         <div class="socials"><a href="…" aria-label="LinkedIn"><svg>…</svg></a>…</div>
         <div class="legal-links"><a href="…">Privacy</a>…</div>
         <span class="copyright">© 2026 Holistic Growth Marketing</span>
       </div>
     </footer>
   Depends on: tokens, base, typography, buttons (wordmark, modal-close).
   ========================================================================== */

.site-footer {
  padding: var(--section-pad) var(--section-pad) 28px;
  background: var(--overlay);
  color: var(--paper);
}

.footer-main {
  display: grid;
  grid-template-columns: .7fr 1.5fr .9fr;
  gap: 7vw;
  padding-bottom: 10vw;
}

.footer-brand p {
  max-width: 210px;
  margin-top: 28px;
  color: var(--paper-faint);
  font-size: 14px;
  line-height: 1.5;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.footer-heading {
  margin: 0 0 22px;
  color: var(--gold);
  font-size: var(--label-size);
}
.footer-links a {
  display: block;
  margin-bottom: 13px;
  color: var(--paper-faint);
  font-size: 14px;
  line-height: 1.5;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer-links a:hover {
  color: var(--gold);
  transform: translateX(4px);
}

/* ── Newsletter signup ── */
.footer-signup h3 {
  max-width: 230px;
  margin: 0 0 25px;
  font-size: clamp(25px, 2.5vw, 38px);
  line-height: .98;
  letter-spacing: -.06em;
}
.footer-signup form {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  transition: border-color var(--t-fast) var(--ease);
}
.footer-signup form:focus-within { border-color: var(--gold); }
.footer-signup input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  padding: 12px 0;
  background: transparent;
  color: var(--paper);
  font-size: 14px;
}
.footer-signup input::placeholder { color: var(--paper-ghost); }
.footer-signup button {
  border: 0;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.footer-signup button:hover { color: var(--paper); }
.footer-caption {
  max-width: 260px;
  margin-top: 16px;
  color: var(--paper-ghost);
  font-size: 12px;
  line-height: 1.5;
}
/* JS swaps the form for this on successful signup. */
.signup-success {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 13px;
}

/* ── Bottom bar ── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.socials,
.legal-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.socials a {
  display: grid;
  place-items: center;
  color: var(--paper-faint);
  transition: color var(--t-fast) var(--ease);
}
.socials a:hover { color: var(--gold); }
.socials svg { display: block; width: 18px; height: 18px; fill: currentColor; }
.legal-links { margin-left: auto; }
.legal-links a,
.copyright {
  color: var(--paper-ghost);
  font-size: var(--label-size);
  transition: color var(--t-fast) var(--ease);
}
.legal-links a:hover { color: var(--gold); }

@media (max-width: 760px) {
  .footer-main { grid-template-columns: 1fr; gap: 54px; padding-bottom: 70px; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 38px 18px; }
  .footer-bottom { align-items: flex-start; flex-wrap: wrap; }
  .legal-links { order: 3; width: 100%; margin-left: 0; }
  .copyright { margin-left: auto; }
}

.tel-link { color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.tel-link:hover { text-decoration: underline; }

/* ===== components/product/product.css ===== */
/* ==========================================================================
   HGM Design System — Component / Product (Graph Series product page)
   --------------------------------------------------------------------------
   The ?product= product view: slim product nav, dark accent-tinted hero with
   animated CSS visual, detail split, series cross-links, slim footer.
   Per-product theming via the --product-accent custom property.
   Markup:
     <main class="product-page" style="--product-accent:var(--gold)">
       <header class="product-nav">
         <a class="wordmark" href="/">…</a>
         <span class="product-nav__series">Graph Series / 01</span>
         <a class="product-nav__back" href="/">← Back to HGM</a>
       </header>
       <section class="product-hero">
         <div class="product-hero__copy">
           <p class="section-kicker">01 / Entity intelligence</p>
           <h1>SchemaGraph</h1>
           <p class="product-summary">…</p>
           <a class="product-cta" href="…">See plans &amp; pricing ↗</a>
         </div>
         <div class="product-visual" style="--product-accent:var(--gold)">
           <div class="product-visual__top"><span>LIVE PREVIEW</span><i></i></div>
           … one of .pv-node/.pv-copy-lines/.pv-bars/.pv-rings/.pv-search …
           <div class="product-visual__metric"><strong>92%</strong><span>entity coverage</span></div>
         </div>
       </section>
       <section class="product-detail">
         <div><p class="section-kicker">…</p><h2>…</h2></div>
         <div><p class="product-description">…</p>
           <div class="product-points"><p><span>✓</span> …</p>…</div></div>
       </section>
       <section class="product-series">
         <div class="section-intro">…</div>
         <div class="product-series__grid">
           <a href="?product=…" class="is-current"><span>01</span><strong>…</strong>↗</a>…
         </div>
       </section>
       <footer class="product-footer"><span>…</span><a href="…">…</a></footer>
     </main>
   Depends on: tokens, base, typography, buttons, motion (pv animations).
   ========================================================================== */

.product-page {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  --product-accent: var(--gold);
}

/* ── Slim product nav ── */
.product-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 24px 6vw;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.product-nav .wordmark { color: var(--ink); }
.product-nav__series,
.product-nav__back {
  font-family: var(--mono);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: #677079;
  font-size: 12px;
}
.product-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.product-nav__back:hover { color: var(--gold); }

/* ── Dark hero ── */
.product-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: center;
  min-height: 710px;
  padding: var(--section-pad);
  background: var(--night);
  color: var(--paper);
  margin: 0 7vw 1px;
}
.product-hero__copy h1 {
  margin: 24px 0 0;
  color: var(--product-accent);
  font-size: clamp(60px, 9vw, 138px);
  line-height: .82;
  letter-spacing: -.09em;
}
.product-summary {
  max-width: 510px;
  margin: 38px 0 0;
  font-size: clamp(20px, 2.5vw, 34px);
  line-height: 1.15;
  letter-spacing: -.055em;
}

/* ── Animated product visual (CSS ornaments, accent-tinted) ── */
.product-visual {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--product-accent) 55%, transparent);
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--product-accent) 18%, transparent), transparent 45%), #0c1118;
}
.product-visual__top {
  display: flex;
  justify-content: space-between;
  padding: 18px;
  color: color-mix(in srgb, var(--product-accent) 85%, white);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--label-tracking);
}
.product-visual__top i {
  width: 7px; height: 7px;
  background: var(--product-accent);
  box-shadow: 0 0 18px var(--product-accent);
  animation: pulse 1.8s infinite;
}
.product-visual__metric {
  position: absolute;
  right: 18px; bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.product-visual__metric strong { color: var(--product-accent); font-size: 28px; letter-spacing: -.08em; }
.product-visual__metric span { color: var(--paper-faint); font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.product-visual__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Visual dialects. */
.pv-node, .pv-core {
  position: absolute;
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border: 1px solid var(--product-accent);
  color: var(--product-accent);
  font-family: var(--mono);
  font-size: 11px;
}
.pv-node--a { left: 11%; top: 46%; }
.pv-node--b { right: 11%; top: 25%; }
.pv-node--c { right: 11%; bottom: 21%; }
.pv-core {
  left: calc(50% - 36px); top: calc(50% - 36px);
  background: var(--product-accent);
  color: var(--ink);
  font-size: 22px;
  animation: float 3s ease-in-out infinite;
}
.pv-line {
  position: absolute;
  left: 26%; width: 49%;
  border-top: 1px dashed var(--product-accent);
  transform-origin: left;
  opacity: .7;
}
.pv-line--one { top: 47%; transform: rotate(-21deg); }
.pv-line--two { top: 55%; transform: rotate(21deg); }

.pv-copy-lines { position: absolute; inset: 32% 16%; display: grid; gap: 13px; }
.pv-copy-lines span { height: 6px; background: var(--product-accent); opacity: .55; }
.pv-copy-lines span.short { width: 63%; }
.pv-copy-lines b { color: var(--product-accent); font-family: var(--mono); font-size: 12px; }

.pv-bars {
  position: absolute; inset: 27% 17%;
  display: flex; align-items: end; gap: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--product-accent) 40%, transparent);
}
.pv-bars i { flex: 1; background: var(--product-accent); opacity: .7; animation: barPulse 2s ease-in-out infinite alternate; }
.pv-bars i:nth-child(1) { height: 30%; } .pv-bars i:nth-child(2) { height: 55%; }
.pv-bars i:nth-child(3) { height: 42%; } .pv-bars i:nth-child(4) { height: 76%; }
.pv-bars i:nth-child(5) { height: 58%; } .pv-bars i:nth-child(6) { height: 90%; }
.pv-bars i:nth-child(7) { height: 68%; }
.pv-bars b { position: absolute; right: 0; top: -28px; color: var(--product-accent); font-size: 22px; }

.pv-rings { position: absolute; inset: 20%; display: grid; place-items: center; }
.pv-rings i {
  position: absolute; width: 100%; aspect-ratio: 1;
  border: 1px solid var(--product-accent); opacity: .4;
  animation: ringPulse 3s ease-in-out infinite;
}
.pv-rings i:nth-child(2) { width: 66%; }
.pv-rings i:nth-child(3) { width: 32%; }
.pv-rings b { z-index: 1; color: var(--product-accent); font-family: var(--mono); font-size: 12px; }

.pv-search { position: absolute; inset: 25% 13%; display: grid; align-content: center; gap: 15px; }
.pv-search span { color: var(--product-accent); font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.pv-search b { font-size: 21px; line-height: 1; letter-spacing: -.06em; }
.pv-search i { height: 4px; background: var(--product-accent); opacity: .65; }
.pv-search i:nth-of-type(2) { width: 70%; }
.pv-search i:nth-of-type(3) { width: 43%; }

/* ── Detail split ── */
.product-detail {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 10vw;
  padding: var(--section-pad);
}
.product-detail h2 {
  max-width: 400px;
  margin: 0;
  font-size: clamp(40px, 5vw, 70px);
  line-height: .9;
  letter-spacing: -.075em;
}
.product-description {
  max-width: 650px;
  margin: 0;
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -.045em;
}
.product-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-top: 40px;
}
.product-points p {
  display: flex; align-items: center; gap: 9px;
  margin: 0; color: #56616c; font-size: 14px; line-height: 1.5;
}
.product-points p span { color: var(--product-accent); }

/* ── Series cross-links ── */
.product-series { padding: var(--section-pad); background: var(--gold-soft); }
.product-series__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.product-series__grid a {
  display: flex; flex-direction: column; gap: 20px;
  min-height: 160px; padding: 18px;
  border: 1px solid #e7ddc6; color: #7a5f2a;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.product-series__grid a:hover,
.product-series__grid a.is-current {
  background: var(--product-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}
.product-series__grid span { font-family: var(--mono); font-size: 11px; }
.product-series__grid strong { margin-top: auto; font-size: 20px; letter-spacing: -.06em; }
.product-series__grid span:last-child { align-self: flex-end; }

/* ── Slim footer ── */
.product-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 27px 7vw;
  background: var(--overlay);
  color: var(--paper-faint);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.product-footer a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--product-accent);
  transition: color var(--t-fast) var(--ease);
}
.product-footer a:hover { color: var(--paper); }

@media (max-width: 1024px) {
  .product-series__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .product-nav { padding: 20px 7vw; }
  .product-nav__series { display: none; }
  .product-hero, .product-detail { grid-template-columns: 1fr; gap: 55px; min-height: auto; padding: var(--section-pad); }
  .product-hero { margin: 0; }
  .product-hero__copy h1 { font-size: 74px; }
  .product-visual { min-height: 340px; }
  .product-points { grid-template-columns: 1fr; }
  .product-series__grid { grid-template-columns: 1fr 1fr; }
  .product-series__grid a { min-height: 130px; }
  .product-footer { flex-direction: column; align-items: flex-start; padding: 28px 7vw; line-height: 1.5; }
}


/* ── Standalone product pages: beta timeline + 4-up series grid ──
   (ported 2026-09-27 from graph.css; used by schemagraph/copygraph/
   searchgraph.html) */
.beta-timeline {
  padding: 7vw;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.beta-timeline h2 {
  margin: 20px 0 0;
  max-width: 840px;
  font-size: clamp(40px, 5vw, 72px);
  line-height: .92;
  letter-spacing: -.075em;
}
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 52px 0 44px;
}
.timeline-phase {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.timeline-phase--now {
  border-color: var(--product-accent, var(--gold));
  box-shadow: var(--shadow-card);
}
.timeline-status {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}
.timeline-phase--complete .timeline-status {
  color: var(--ink);
  border-color: var(--ink);
}
.timeline-phase--now .timeline-status {
  background: var(--product-accent, var(--gold));
  border-color: transparent;
  color: var(--ink);
}
.timeline-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.timeline-phase h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.04em;
}
.timeline-phase p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.product-series__grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.product-series__grid p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #3c4763;
}

@media (max-width: 900px) {
  .timeline-grid {
    grid-template-columns: 1fr;
  }
  .product-series__grid--4 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Beta visual treatment ──
   Applied to .product-visual for products in private beta. Adds a floating
   BETA pill and an accent glow to distinguish from generally-available. */
.product-visual--beta {
  border-color: var(--product-accent);
  box-shadow: 0 0 0 1px var(--product-accent), 0 18px 50px rgba(11, 14, 19, .35);
}
.product-visual--beta::after {
  content: "Beta";
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--product-accent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── Series card arrow ── */
.series-arrow {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.product-series__grid a:hover .series-arrow {
  transform: translate(3px, -3px);
  background: rgba(11, 14, 19, .08);
}

/* ── Timeline phase states ── */
.timeline-phase--next {
  border-style: dashed;
  border-color: var(--product-accent, var(--gold));
  background: rgba(124, 94, 28, .05);
}
.timeline-phase--next .timeline-status {
  border-style: dashed;
  border-color: var(--product-accent, var(--gold));
  color: var(--product-accent, var(--gold-deep));
}
.timeline-phase--later {
  opacity: .62;
}

/* ===== components/page/page.css ===== */
/* ==========================================================================
   HGM Design System — Component / Page (subpage scaffolding)
   --------------------------------------------------------------------------
   Structure for non-homepage pages: dark `.page-hero` banner + repeating
   `.page-section` blocks (light default, `.page-section--dark` variant).
   Used with .topbar--page for the sticky header.
   Markup:
     <header class="topbar topbar--page">…</header>
     <section class="page-hero">
       <p class="eyebrow">Services / Agentic SEO</p>
       <h1>Agentic <em class="serif-em">SEO</em> &amp; AEO</h1>
       <p class="lede">…</p>
       <div class="hero-actions"><a class="booking-button">…</a></div>
     </section>
     <section class="page-section">
       <p class="section-kicker">…</p><h2>…</h2><p class="lede">…</p>…
     </section>
     <section class="page-section page-section--dark">…</section>
   `.service-card` adapts automatically inside dark page sections.
   Depends on: tokens, base, typography, buttons, services (card), steps,
   spec-table, article, case, contact-form.
   ========================================================================== */

/* ── Page hero: dark banner ── */
.page-hero {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(110px, 15vw, 180px) var(--gutter) clamp(64px, 8vw, 104px);
}
.page-hero .eyebrow { color: var(--gold); }
.page-hero h1 {
  max-width: 16ch;
  margin: 26px 0 30px;
  font-size: clamp(44px, 7vw, 108px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.06em;
}
.page-hero .lede {
  max-width: 62ch;
  color: var(--paper-dim);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
}
.page-hero .hero-actions { margin-top: 40px; }

/* ── Content section ── */
.page-section {
  padding: clamp(70px, 9vw, 128px) var(--gutter);
  background: var(--paper);
  color: var(--ink);
}
.page-section--dark { background: var(--ink); color: var(--paper); }

.page-section h2 {
  max-width: 22ch;
  margin: 24px 0 18px;
  font-size: clamp(34px, 4.6vw, 70px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.055em;
}
.page-section .lede { max-width: 64ch; }
.page-section--dark .lede { color: var(--paper-dim); }

/* Group labels between content blocks. */
.group-label {
  margin: 72px 0 8px;
  color: var(--link-gold);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.group-label:first-of-type { margin-top: 48px; }
.page-section--dark .group-label { color: var(--gold); }

/* service-card dark adaptation. */
.page-section--dark .service-card { border-color: rgba(255, 255, 255, .14); }
.page-section--dark .service-card h3 { color: var(--paper); }
.page-section--dark .service-card p { color: var(--paper-dim); }
.page-section--dark .service-card p.card-label { color: var(--gold); }
.page-section--dark .service-card a { color: var(--paper); border-color: rgba(255, 255, 255, .3); }

/* ===== components/steps/steps.css ===== */
/* ==========================================================================
   HGM Design System — Component / Steps
   --------------------------------------------------------------------------
   3-up numbered step grid for subpage process explanations.
   Markup:
     <div class="steps-grid">
       <div class="step"><span class="step__num">Step 01</span>
         <h3>…</h3><p>…</p></div>…
     </div>
   Depends on: tokens, base.
   ========================================================================== */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  border-top: 1px solid var(--line);
}
.page-section--dark .steps-grid { border-color: rgba(255, 255, 255, .16); }

.step { padding: 32px 36px 8px 0; border-right: 1px solid var(--line); }
.page-section--dark .step { border-color: rgba(255, 255, 255, .16); }
.step:last-child { border-right: 0; }
.step + .step { padding-left: 36px; }

.step__num {
  color: var(--link-gold);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .14em;
}
.page-section--dark .step__num { color: var(--gold); }

.step h3 { margin: 16px 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.step p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.page-section--dark .step p { color: var(--paper-dim); }

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .page-section--dark .step { border-color: rgba(255, 255, 255, .16); }
  .step:last-child { border-bottom: 0; }
  .step + .step { padding-left: 0; }
}

/* ===== components/spec-table/spec-table.css ===== */
/* ==========================================================================
   HGM Design System — Component / Spec table
   --------------------------------------------------------------------------
   Definition-list rows for spec/feature sheets on subpages.
   Markup:
     <dl class="spec-table">
       <div class="spec-row"><dt>Platform licensing</dt><dd>$0 — one-time build</dd></div>…
     </dl>
   Depends on: tokens, base.
   ========================================================================== */

.spec-table { margin-top: 56px; border-top: 1px solid var(--line); }
.page-section--dark .spec-table { border-color: rgba(255, 255, 255, .16); }

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.page-section--dark .spec-row { border-color: rgba(255, 255, 255, .16); }

.spec-row dt {
  flex: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.page-section--dark .spec-row dt { color: var(--gold); }

.spec-row dd {
  margin: 0;
  max-width: 62%;
  text-align: right;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .spec-row { flex-direction: column; gap: 6px; }
  .spec-row dd { max-width: 100%; text-align: left; }
}

/* ===== components/article/article.css ===== */
/* ==========================================================================
   HGM Design System — Component / Article
   --------------------------------------------------------------------------
   Long-form reading column for guides/blog posts, with pull quotes.
   Markup:
     <div class="article-body">
       <h2>…</h2><p>…</p>
       <ul><li>…</li>…</ul>
       <p class="pull">…</p>
     </div>
   Depends on: tokens, base.
   ========================================================================== */

.article-body { max-width: 740px; margin: 0 auto; }

.article-body h2 {
  margin: 64px 0 18px;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.article-body h2:first-child { margin-top: 0; }

.article-body p {
  margin: 0 0 22px;
  color: #3c434c;
  font-size: 17px;
  line-height: 1.75;
}
.article-body ul {
  margin: 0 0 26px;
  padding-left: 22px;
  color: #3c434c;
  font-size: 16px;
  line-height: 1.7;
}
.article-body li { margin-bottom: 10px; }

/* Pull quote: blue left rule, tight display type. */
.article-body .pull {
  margin: 48px 0;
  padding: 8px 0 8px 28px;
  border-left: 2px solid var(--link-gold);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.3;
  color: var(--ink);
}


/* ── Converted long-form content (ported 2026-09-27 from graph.css) ──
   Tables, code blocks, quotes, and legacy article helpers used by the
   converted resource/blog/location pages. */
.table-wrap { overflow-x: auto; margin: 0 0 26px; border: 1px solid var(--line); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.table-wrap th { text-align: left; padding: 12px 16px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.table-wrap td { padding: 12px 16px; border-top: 1px solid var(--line); color: #3c434c; line-height: 1.6; vertical-align: top; }
.article-body blockquote { margin: 0 0 26px; padding: 8px 0 8px 28px; border-left: 2px solid var(--link-gold); color: #3c434c; font-size: 19px; line-height: 1.6; }
.article-body h3 { margin: 44px 0 14px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.article-body h4 { margin: 32px 0 10px; font-size: 18px; font-weight: 700; }
.article-body ol { margin: 0 0 26px; padding-left: 22px; color: #3c434c; font-size: 16px; line-height: 1.7; }
.article-body li { margin-bottom: 10px; }
.article-body a { color: var(--on-gold-label); text-decoration: underline; text-underline-offset: 3px; }
.article-body img { max-width: 100%; height: auto; }
.article-body figure { margin: 0 0 26px; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
pre { overflow-x: auto; padding: 20px; margin: 0 0 26px; background: #0b1020; color: #dbe2ea; font-family: var(--mono); font-size: 13px; line-height: 1.6; border: 1px solid var(--line); }
code { font-family: var(--mono); font-size: .88em; background: rgba(11,14,19,.06); padding: 2px 6px; }
pre code { background: none; padding: 0; }
.article-body form { margin: 0 0 26px; }
.article-body label { display: block; font-size: 13px; font-weight: 700; margin: 18px 0 8px; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.article-body input[type="text"], .article-body input[type="email"], .article-body input[type="tel"], .article-body input[type="url"], .article-body input[type="number"], .article-body textarea, .article-body select { width: 100%; padding: 14px 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-family: var(--sans); font-size: 15px; }
.article-body textarea { min-height: 120px; resize: vertical; }
.article-body button[type="submit"], .article-body input[type="submit"] { margin-top: 20px; padding: 14px 28px; background: var(--ink); color: var(--paper); border: 0; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }


/* ── Legacy article helpers (still used; kept intentionally) ── */
/* ---- Legacy compatibility (ported from pre-Graph stylesheet; legacy classes only) ---- */
.schema-orbit {position:relative; width:min(37vw,430px); aspect-ratio:1; margin:auto; border:1px solid rgba(201,169,110,.4); border-radius:50%; display:grid; place-items:center;}
.schema-orbit:before,.schema-orbit:after {content:""; position:absolute; inset:15%; border:1px solid rgba(201,169,110,.25); border-radius:50%; transform:rotate(45deg);}
.schema-orbit:after {inset:30%; transform:rotate(-35deg);}
.schema-orbit b {z-index:1; display:grid; place-items:center; width:72px; height:72px; border-radius:18px; background:var(--gold); color:var(--ink); font-size:24px; letter-spacing:-.08em;}
.schema-orbit span {position:absolute; z-index:2; color:var(--gold); font-family:var(--mono); font-size:11px; text-transform:uppercase;}
.schema-orbit span:nth-child(2) {top:12%;left:36%}
.schema-orbit span:nth-child(3) {right:3%;top:48%}
.schema-orbit span:nth-child(4) {bottom:14%;left:35%}
.schema-orbit span:nth-child(5) {left:2%;top:48%}
.table-scroll {overflow-x:auto;margin:0 0 1.8em;border:1px solid var(--line);border-radius:10px}
.flow-list {list-style:none;padding:0;margin:0 0 1.6em;counter-reset:flow}
.flow-list li {counter-increment:flow;position:relative;padding:16px 16px 16px 64px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff;font-size:16px}
.flow-list li::before {content:counter(flow,decimal-leading-zero);position:absolute;left:20px;top:16px;font-family:var(--mono);font-size:11px;color:var(--gold)}
.article-section {padding:6vw 9vw;background:var(--paper)}
@media (max-width:760px) {
  .schema-orbit {width:min(76vw,340px)}
}
@media (max-width:760px) {
  .article-section {padding:18vw 8vw}
}

/* ===== components/case/case.css ===== */
/* ==========================================================================
   HGM Design System — Component / Case (case-study grid)
   --------------------------------------------------------------------------
   Dark 3-up case-study cards with mono metric footer.
   Markup:
     <div class="case-grid">
       <figure class="case-card">
         <h3>…</h3><p>…</p>
         <span class="case-metric">Traffic +112% / 6 months</span>
       </figure>…
     </div>
   Depends on: tokens, base.
   ========================================================================== */

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.case-card {
  margin: 0;
  padding: 44px 40px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.case-card:first-child { border-left: 0; }

.case-card h3 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.case-card p {
  margin: 0 0 14px;
  color: var(--paper-dim);
  font-size: 15px;
  line-height: 1.65;
}

.case-metric {
  display: block;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-card { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); padding: 36px 0; }
  .case-card:first-child { border-top: 0; }
}

/* ===== components/contact-form/contact-form.css ===== */
/* ==========================================================================
   HGM Design System — Component / Contact form
   --------------------------------------------------------------------------
   Two-column contact layout: form left, contact details right.
   Markup:
     <div class="contact-grid">
       <form class="contact-form" data-form="contact">
         <label>Your name <input type="text" name="name" required></label>
         <label>Email <input type="email" name="email" required></label>
         <label>Message <textarea name="message"></textarea></label>
         <button class="dark-cta" type="submit">Send ↗</button>
         <p class="form-note">…</p>
       </form>
       <div class="contact-side">
         <h3>…</h3><p>… <a class="inline" href="mailto:…">…</a></p>
       </div>
     </div>
     <!-- Success state (JS swaps the form for this): -->
     <div class="form-success">…</div>
   Depends on: tokens, base, typography, buttons.
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 8vw;
  margin-top: 56px;
}

.contact-form { display: grid; gap: 18px; }
.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: 2px solid var(--link-gold);
  outline-offset: -1px;
  border-color: var(--link-gold);
}

.contact-side h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.contact-side p { margin: 0 0 26px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.contact-side a.inline { color: var(--focus); }

.form-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.form-success {
  padding: 26px;
  border: 1px solid var(--link-gold);
  background: rgba(87, 120, 255, .07);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}


/* ── Submission status line (location + service pages) ── */
.form-status {
  margin: 18px 0 0;
  text-align: center;
  color: var(--gold-deep);
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.form-error {
  padding: 26px;
  border: 1px solid #c0564f;
  background: rgba(192, 86, 79, .08);
  font-size: 15px;
  line-height: 1.6;
}