/* ─────────────────────────────────────────────────────────────────── */
/*  GTMhub.ai — shared site styles (used across all pages)             */
/* ─────────────────────────────────────────────────────────────────── */
:root {
  /* color */
  --ink:        oklch(0.18 0.012 250);
  --ink-2:      oklch(0.26 0.012 250);
  --ink-3:      oklch(0.34 0.010 250);
  --ash:        oklch(0.55 0.008 250);
  --mist:       oklch(0.82 0.006 250);
  --mist-2:     oklch(0.90 0.006 250);
  --paper:      oklch(0.96 0.004 80);
  --bone:       oklch(0.985 0.004 80);
  --signal:     oklch(0.86 0.19 112);
  --signal-ink: oklch(0.35 0.10 112);

  /* type */
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --serif: "Instrument Serif", "Times New Roman", serif;

  /* type scale */
  --text-display: clamp(56px, 8.4vw, 112px);
  --text-h1:      clamp(40px, 5vw, 64px);
  --text-h2:      clamp(32px, 3.6vw, 48px);
  --text-h3:      clamp(22px, 2vw, 28px);
  --text-h4:      clamp(18px, 1.4vw, 20px);
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-sm:      14px;
  --text-xs:      12px;
  --text-mono:    11px;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* radius */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  /* layout */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 64px);

  /* motion */
  --ease: cubic-bezier(.4,.1,.2,1);

  /* logo lockup gap — icon box (1.5em) to wordmark.
     The orbit's visible art fills only x=15–67.6 of its 80-unit box, so the
     box carries ~0.2325em of transparent padding on its right. A 0.075em
     flex-gap therefore yields the spec'd ~0.30em VISIBLE gap (icon edge→"G"),
     matching every lockup SVG in /assets exactly. Do not use px here. */
  --lockup-gap: 0.075em;
}

/* ─── reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--signal); color: var(--signal-ink); }

/* ─── layout ─── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ─── primitives ─── */
.eyebrow {
  font-family: var(--mono); font-size: var(--text-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ash);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow--signal { color: var(--signal-ink); }
.eyebrow--dark   { color: color-mix(in oklab, var(--bone) 55%, transparent); }

.section-title {
  font-family: var(--sans); font-weight: 400;
  font-size: var(--text-h2); line-height: 1.05;
  letter-spacing: -0.03em; margin: 0; max-width: 22ch;
}
.section-title em { font-style: italic; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: var(--radius);
  font-family: var(--sans); font-weight: 500; font-size: var(--text-sm); letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--signal); color: var(--signal-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--signal) 90%, var(--ink)); }
.btn--ghost { background: transparent; border-color: color-mix(in oklab, currentColor 25%, transparent); color: currentColor; }
.btn--ghost:hover { border-color: currentColor; }
.btn--ink { background: var(--ink); color: var(--bone); }
.btn--ink:hover { background: var(--ink-2); }

.pulse {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--signal);
  position: relative; flex: 0 0 8px;
}
.pulse::before {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; background: var(--signal);
  opacity: 0.4; animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}
.slash { color: color-mix(in oklab, currentColor 45%, transparent); margin: 0 0.18em; }
.arrow { transition: transform 0.15s var(--ease); display: inline-block; }
.btn:hover .arrow, a:hover .arrow { transform: translateX(2px); }

/* ─── mark + wordmark ───────────────────────────────────────────────
   ICON SIZING — v2.2 canonical
   The orbit's visible content occupies y=15→68.4 (h=53.4) of its 80-unit
   viewBox, so visible_h = (53.4/80) × box_h = 0.6675 × box_h. To make the
   icon's visible content rhyme with the wordmark font-size F at parity
   (visible_h = 1.0×F — same rule as all SVG assets), the icon BOX should
   be 1.5em. We set this as the default when .mark sits inside any
   wordmark-paired container (.lockup, .nav__brand, .footer__brand-row).
   Standalone .mark uses (hero backgrounds, ornaments) keep an explicit
   pixel size via inline style or component-local CSS. */
.mark {
  display: block; flex: 0 0 auto;
  width: 44px; height: 44px;             /* default for standalone use */
  color: var(--ink); --mark-accent: var(--signal-ink);
}
.mark--dark { color: var(--bone); --mark-accent: var(--signal); }
.mark--ink  { color: var(--ink);  --mark-accent: var(--ink); }
/* When .mark is used inline, use a cropped viewBox so the orbit fills its box.
   We do this via an attribute override; markup keeps viewBox="0 0 80 80". */
.mark[data-fit="tight"] { /* opt-in for explicit lockup use */ }
.wordmark {
  font-family: var(--sans); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1;
  display: inline-flex; align-items: baseline;
}
/* v2 wordmark · "GTM/hub" — no .ai.
   GTM weight 600, hub weight 400, signal slash between them.
   The slash is drawn via the ::after pseudo so existing markup
   <span class="gtm">GTM</span><span class="hub">hub</span><span class="tld">.ai</span>
   renders correctly without HTML changes: .tld is hidden, the slash
   appears between .gtm and .hub. */
.wordmark > .gtm  { font-weight: 600; letter-spacing: -0.04em; }
.wordmark > .hub  { font-weight: 400; letter-spacing: -0.04em; }
.wordmark > .tld  { display: none; }
.wordmark > .gtm::after {
  content: "/";
  color: var(--signal-ink);
  font-weight: 700;
  margin: 0 0.06em 0 0.10em;
  display: inline-block;
  transform: skewX(-6deg);
  /* Slightly larger so the slash leans visually like our spec'd stroke. */
  font-size: 1.06em;
  letter-spacing: 0;
}
.wordmark--dark > .gtm::after { color: var(--signal); }

/* Lockup helper — canonical: icon visible h = 1.0× wordmark font-size.
   Box = 1.5em; visible content = 0.6675 × 1.5em = 1.0em (matches every SVG asset). */
.lockup {
  display: inline-flex; align-items: center; gap: var(--lockup-gap);
  line-height: 1;
}
.lockup > .mark { width: 1.5em; height: 1.5em; }
.lockup--stacked { flex-direction: column; align-items: flex-start; gap: 0.5em; }
.lockup--stacked > .mark { width: 2.4em; height: 2.4em; }  /* matches lockup-stacked-*.svg: box = 2.4× wordmark font-size */

/* Canonical override: anywhere .mark sits beside .wordmark, size by em
   so the icon visible content rhymes with the wordmark font-size 1:1. */
.nav__brand > .mark,
.footer__brand-row > .mark {
  width: 1.5em; height: 1.5em;
}

/* ─── NAV (consistent across pages) ─── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--ink) 92%, transparent);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  color: var(--bone);
  border-bottom: 1px solid color-mix(in oklab, var(--bone) 8%, transparent);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  max-width: var(--container); margin: 0 auto; gap: 32px;
}
.nav__brand {
  display: inline-flex; align-items: center; gap: var(--lockup-gap);
  color: var(--bone); font-size: 20px;
}
.nav__links {
  display: flex; gap: 32px;
  font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--bone) 65%, transparent);
}
.nav__links a { transition: color 0.15s var(--ease); }
.nav__links a:hover, .nav__links a.is-current { color: var(--bone); }
@media (max-width: 880px) { .nav__links { display: none; } }

/* ─── SECTION shared ─── */
.section { padding: var(--space-9) 0; }
.section__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7);
  align-items: end; margin-bottom: var(--space-7);
}
.section__head-lead { display: flex; flex-direction: column; gap: var(--space-4); }
.section__head-meta { font-size: var(--text-body); line-height: 1.6; color: var(--ash); max-width: 44ch; }
@media (max-width: 760px) { .section__head { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ─── tags / badges ─── */
.tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ash); padding: 4px 9px;
  border: 1px solid var(--mist); border-radius: 999px; background: var(--bone);
}
.tag--signal { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.tag--ink { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ─── FOOTER (shared) ─── */
.footer {
  background: var(--ink-2);
  color: color-mix(in oklab, var(--bone) 75%, transparent);
  padding: var(--space-8) 0 var(--space-5);
  font-size: var(--text-sm);
}
.footer__grid {
  display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: var(--space-6);
}
@media (max-width: 880px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
/* Social icon row — LinkedIn / X, sized as buttons, signal-fill on hover. */
.footer__social { display: flex; gap: 10px; margin-top: var(--space-2); }
.footer__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--bone) 16%, transparent);
  color: color-mix(in oklab, var(--bone) 72%, transparent);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.footer__social-link:hover { color: var(--signal-ink); background: var(--signal); border-color: var(--signal); transform: translateY(-1px); }
.footer__social-link svg { width: 18px; height: 18px; }
/* Brand row carries the wordmark's own size (24px) so the 1.5em icon peg
   resolves against the wordmark — not the 14px footer body — and the mark
   rhymes 1:1 with the wordmark, same as the nav lockup. */
.footer__brand-row { display: flex; align-items: center; gap: var(--lockup-gap); color: var(--bone); font-size: 24px; }
.footer__brand-tag { color: color-mix(in oklab, var(--bone) 60%, transparent); font-size: 13px; max-width: 36ch; }
.footer__col h5 {
  font-family: var(--mono); font-size: var(--text-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in oklab, var(--bone) 50%, transparent);
  margin: 0 0 var(--space-3); font-weight: 500;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { transition: color 0.15s var(--ease); }
.footer__col a:hover { color: var(--bone); }
.footer__bottom {
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid color-mix(in oklab, var(--bone) 8%, transparent);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: var(--text-mono); letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--bone) 50%, transparent);
  flex-wrap: wrap; gap: 12px;
}
.footer__bottom-right { display: flex; gap: 18px; }

/* ─────────────────────────────────────────────────────────────────── */
/*  Accessibility layer — focus, skip link, motion, sr-only            */
/* ─────────────────────────────────────────────────────────────────── */

/* Visible focus ring for keyboard users only (mouse clicks stay clean).
   Signal-coloured halo + ink core so it reads on both bone and ink. */
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--signal);
}
/* On dark surfaces (nav, footer, ink sections) invert the core so it stays visible. */
.nav :where(a, button):focus-visible,
.footer :where(a, button):focus-visible,
.is-dark :where(a, button):focus-visible {
  outline-color: var(--bone);
}

/* Skip-to-content link — first tab stop, hidden until focused. */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  transform: translateY(-150%);
  background: var(--ink); color: var(--bone);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 18px; border-radius: var(--radius);
  transition: transform 0.18s var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--signal); outline-offset: 2px;
}

/* Screen-reader-only utility. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Respect reduced-motion: kill transforms/animations, keep states instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover { transform: none; }
  .pulse::before { animation: none; opacity: 0.4; }
  .arrow { transition: none; }
}