/* ──────────────────────────────────────────────────────────────
   microanalytics — Design System
   base.css · resets, font loading, element bindings
   ──────────────────────────────────────────────────────────────
   Wires the three typefaces (Fraunces / Inter / IBM Plex Mono),
   sets sensible HTML defaults, and binds bare element tags
   (h1, h2, h3, p, body) to the canonical type scale.
   ────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Heritage font — Geomanist (full family, 100–900 + italics).
   Retained as a fallback only. Inter is the canonical sans. */
@font-face { font-family: 'Geomanist'; src: url('../fonts/geomanist-regular-webfont.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('../fonts/geomanist-medium-webfont.ttf')  format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geomanist'; src: url('../fonts/geomanist-bold-webfont.ttf')    format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ──────────────────────────────────────────────────────────────
   Reset
   ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ──────────────────────────────────────────────────────────────
   Body defaults — Inter Body (15 / 1.65 / 400)
   ────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  background: var(--bg-page);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "kern";
}

a { color: inherit; text-decoration: none; }

/* No italics anywhere on the site (brand decision). Emphasis is carried by
   weight, accent colour, or a drawn underline — never slant. Applies to
   headings, body <em>, blockquotes, <cite>, <i>, everything. */
*, *::before, *::after { font-style: normal !important; }

/* ──────────────────────────────────────────────────────────────
   Element bindings — bare h1/h2/h3/p map to the canonical scale.
   These rules carry !important to win against legacy per-page
   <style> blocks. When a page is refactored, those overrides can
   be removed; the !important here lets the system be authoritative
   meanwhile.
   ────────────────────────────────────────────────────────────── */

/* HERO — Fraunces · clamp(38, 5.3vw, 48) · 500 · opsz 120
   Bumped +20% over the brand-spec base. Hero titles render on TWO lines
   via an explicit <br> at a natural break in each headline — no line-clamp
   truncation, so every line stays fully visible at all widths. */
/* RULE: hero titles are ALWAYS two lines. The hero section is a query
   container, so the title scales with the CONTAINER width (cqi), not the
   viewport (vw) — it keeps the same two-line wrap at every screen width.
   The <br> in each headline sets the break point; the cqi size keeps each
   line from over-wrapping into a third line. No fixed-px media overrides. */
.svc-hero, .hero { container-type: inline-size; }
h1, h1.lead, .lead, .svc-hero h1, .svc-hero h1.lead, .hero-h1, .hero h1 {
  font-family: var(--font-hero) !important;
  font-weight: 500 !important;
  font-size: clamp(32px, 4.1cqi, 60px) !important;   /* 4.1cqi tuned to the longest title (consent, ~46ch) so EVERY hero is 2 lines */
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
  max-width: none !important;
  margin: 0;
}

/* H2 — Fraunces 28 / 1.20 / 500 · opsz 72 */
h2, .solutions-head h2, .foundation-head h2,
.engage-head h2, .indep h2, .indep h1 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 3vw, 28px) !important;
  line-height: 1.20 !important;
  letter-spacing: 0 !important;
  font-variation-settings: 'opsz' 72, 'wght' 500;
  text-wrap: balance;
  margin: 0;
}

/* H3 — Fraunces 20 / 1.30 / 500 · opsz 48 */
h3, .engage-card h3, .sol-row h3 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 1.30 !important;
  letter-spacing: 0 !important;
  font-variation-settings: 'opsz' 48, 'wght' 500;
  margin: 0;
}

h1 em, h2 em, h3 em,
.svc-hero h1.lead em,
.engage-card h3 em,
.sol-row h3 em {
  font-style: normal;
  color: var(--fg-2);
  font-weight: 500;
}

/* No italics in titles (Hallmark gate 38a). Any <em> inside a heading/title
   renders roman — emphasis is carried by tone + weight + accent colour, never
   slant. Body-copy <em> (ledes, paragraphs, quotes) keeps its italic.
   font-style ONLY, so each em keeps its own colour (e.g. lime on .closing-word). */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.t-hero em, .t-display em, .t-h1 em, .t-h2 em, .t-h3 em, .t-stat em,
.lead em, .hero-h1 em, .section-title em, .closing-word em, .news-h3 em,
.sol-card .nm em, .problem h4 em, .engage-card h3 em, .sol-row h3 em {
  font-style: normal !important;
}

/* Default <p> — Inter Body */
p, p.sol-body, p.sol-quote, p.cap-mech,
.engage-card p, .indep p, .indep .body {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   Focus state — two-tone ring. Ink on light/cream surfaces (lime
   failed 3:1 on cream); lime only on dark sections. Never animated.
   ────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* Dark surfaces — the ink ring would vanish, so switch to lime.
   Targets focusable descendants of dark sections (dark nav, feature
   cards, petrol/closing breaks, dark service/method panels). */
.topbar--dark :focus-visible,
.hp-close :focus-visible,
.sol-card.feature :focus-visible,
:is(.petrol-break, .closing-mark, .indep,
    .svc-card.feature, .svc-card.procurement,
    .engage-card.flagship, .method-card.build) :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* ──────────────────────────────────────────────────────────────
   Reduced motion — honour the OS setting. Collapses every
   transition/animation to near-instant so no spatial motion plays
   (card lifts, dropdown slides, scroll-fades). gate 27 / WCAG 2.3.3.
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}