/* ============================================================================
   GEOMORPHIC AI — BRAND STYLESHEET
   Version 1.0 · July 2026
   ----------------------------------------------------------------------------
   This is the production stylesheet. Drop it into any build (Replit, Netlify,
   a framework) and the brand is applied. It contains:
     1. Design tokens (CSS custom properties)
     2. Base / reset
     3. Typography
     4. Layout primitives
     5. Buttons & links
     6. Forms
     7. Components
     8. Sections
     9. Backgrounds & patterns
    10. Motion & accessibility

   Fonts required (Google Fonts):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,400;0,500;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300..1000;1,9..40,300..1000&family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
   ========================================================================= */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

  /* ---- Core palette: accents ------------------------------------------ */
  /* Signal Blue — PRIMARY. Actions, links, focus, interactive state.      */
  --gm-blue-100: #D7EAF4;
  --gm-blue-200: #AFD4E9;
  --gm-blue-300: #87BFDE;
  --gm-blue-400: #5FAAD3;
  --gm-blue-500: #369CD4;   /* base */
  --gm-blue-600: #267EAF;
  --gm-blue-700: #1D6288;
  --gm-blue-800: #14425C;
  --gm-blue-900: #0C2939;

  /* Ore Gold — SECONDARY. Value, metrics, the single hero conversion CTA. */
  --gm-gold-100: #FBF3DC;
  --gm-gold-200: #F7E4A3;
  --gm-gold-300: #F5D97A;
  --gm-gold-400: #F3D162;
  --gm-gold-500: #F1CA51;   /* base — from the logomark */
  --gm-gold-600: #D9AF2E;
  --gm-gold-700: #A9871F;
  --gm-gold-800: #6E5716;
  --gm-gold-900: #3D3110;

  /* Belt Teal — TERTIARY. Eyebrows, section labels, positive/verified.    */
  --gm-teal-100: #DBF0EB;
  --gm-teal-200: #B6E2D8;
  --gm-teal-300: #92D3C4;
  --gm-teal-400: #6ECBB4;
  --gm-teal-500: #4EC4A9;   /* base — from the logomark */
  --gm-teal-600: #37A48B;
  --gm-teal-700: #2A7F6C;
  --gm-teal-800: #1D5649;
  --gm-teal-900: #12352D;

  /* Ember — RESTRICTED. Alerts, destructive, single-point map markers.    */
  --gm-ember-300: #E0A488;
  --gm-ember-500: #C4703F;
  --gm-ember-700: #8A4E2C;

  /* ---- Core palette: neutrals (Basalt) --------------------------------- */
  --gm-black:     #000000;  /* page ground — always true black */
  --gm-basalt-950:#060606;
  --gm-basalt-900:#0A0A0A;  /* surface */
  --gm-basalt-850:#101010;
  --gm-basalt-800:#161616;  /* surface raised */
  --gm-basalt-700:#1F1F1F;
  --gm-basalt-600:#2A2A2A;  /* solid border */
  --gm-basalt-500:#3D3D3D;
  --gm-basalt-400:#5C5C5C;
  --gm-basalt-300:#8A8A8A;  /* muted text — AA at 6.08:1 on black */
  --gm-basalt-200:#B4B4B4;  /* secondary text */
  --gm-basalt-100:#DEDEDE;
  --gm-basalt-050:#EDEDED;
  --gm-white:     #FFFFFF;
  --gm-paper:     #F4F2EC;  /* warm off-white — light surfaces, print, decks */

  /* ---- Alpha strokes (preferred over solid borders on dark) ------------ */
  --gm-line-hairline: rgba(255,255,255,0.10);
  --gm-line:          rgba(255,255,255,0.16);
  --gm-line-strong:   rgba(255,255,255,0.24);
  --gm-veil-04:       rgba(255,255,255,0.04);
  --gm-veil-06:       rgba(255,255,255,0.06);
  --gm-veil-08:       rgba(255,255,255,0.08);

  /* ---- Semantic aliases — USE THESE IN COMPONENTS ---------------------- */
  --gm-bg:              var(--gm-black);
  --gm-bg-surface:      var(--gm-basalt-900);
  --gm-bg-raised:       var(--gm-basalt-800);
  --gm-bg-inset:        var(--gm-basalt-950);

  --gm-text:            var(--gm-white);
  --gm-text-secondary:  var(--gm-basalt-200);
  --gm-text-muted:      var(--gm-basalt-300);
  --gm-text-inverse:    var(--gm-black);

  --gm-border:          var(--gm-line);
  --gm-border-subtle:   var(--gm-line-hairline);
  --gm-border-strong:   var(--gm-line-strong);

  --gm-accent:          var(--gm-blue-500);
  --gm-accent-hover:    var(--gm-blue-400);
  --gm-accent-active:   var(--gm-blue-600);
  --gm-accent-quiet:    var(--gm-blue-900);
  --gm-on-accent:       var(--gm-black);

  --gm-highlight:       var(--gm-gold-500);   /* metrics, hero CTA */
  --gm-on-highlight:    var(--gm-black);
  --gm-signal:          var(--gm-teal-500);   /* eyebrows, verified */

  --gm-success:         var(--gm-teal-500);
  --gm-warning:         var(--gm-gold-500);
  --gm-danger:          var(--gm-ember-500);
  --gm-info:            var(--gm-blue-500);

  --gm-focus:           var(--gm-blue-400);

  /* ---- Typography ----------------------------------------------------- */
  --gm-font-display: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gm-font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --gm-font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gm-fs-display:  clamp(3.25rem, 1.55rem + 5.3vw, 6rem);
  --gm-fs-h1:       clamp(2.5rem, 1.42rem + 3.4vw, 4.25rem);
  --gm-fs-h2:       clamp(2rem, 1.5rem + 1.6vw, 3rem);
  --gm-fs-h3:       clamp(1.5rem, 1.28rem + 0.7vw, 2rem);
  --gm-fs-h4:       clamp(1.25rem, 1.17rem + 0.25vw, 1.375rem);
  --gm-fs-lead:     clamp(1.125rem, 1.03rem + 0.3vw, 1.375rem);
  --gm-fs-body-lg:  1.125rem;
  --gm-fs-body:     1rem;
  --gm-fs-body-sm:  0.9375rem;
  --gm-fs-caption:  0.8125rem;
  --gm-fs-label:    0.75rem;

  --gm-lh-tight:    1.02;
  --gm-lh-heading:  1.1;
  --gm-lh-snug:     1.3;
  --gm-lh-body:     1.65;

  --gm-ls-display:  -0.03em;
  --gm-ls-heading:  -0.022em;
  --gm-ls-tight:    -0.01em;
  --gm-ls-normal:   0;
  --gm-ls-label:    0.14em;

  /* ---- Spacing — 4px base --------------------------------------------- */
  --gm-space-1:  0.25rem;   /*  4 */
  --gm-space-2:  0.5rem;    /*  8 */
  --gm-space-3:  0.75rem;   /* 12 */
  --gm-space-4:  1rem;      /* 16 */
  --gm-space-5:  1.5rem;    /* 24 */
  --gm-space-6:  2rem;      /* 32 */
  --gm-space-7:  3rem;      /* 48 */
  --gm-space-8:  4rem;      /* 64 */
  --gm-space-9:  6rem;      /* 96 */
  --gm-space-10: 8rem;      /* 128 */
  --gm-space-11: 10rem;     /* 160 */

  --gm-section-y: clamp(4rem, 2rem + 8vw, 10rem);
  --gm-gutter:    clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* ---- Layout --------------------------------------------------------- */
  --gm-container:      1280px;
  --gm-container-wide: 1440px;
  --gm-container-text: 68ch;
  --gm-nav-h:          72px;

  /* ---- Lime — the interaction colour ---------------------------------
     ADDED 28 July 2026. This is the fifth accent, and it exists because the
     live site already shipped it: every button hovers to it. It is NOT a
     brand accent in the sense the other four are — it never fills a surface,
     never sets a heading, never appears in a chart. Its only job is "you are
     about to act on this". Keeping it to that one job is what stops it
     competing with Ore Gold, which it otherwise sits uncomfortably close to
     (13.15:1 vs 12.55:1 on the basalt plate).                              */
  --gm-lime-500:   #C9DC6E;
  --gm-lime-ink:   #111111;   /* 12.54:1 on the lime face */
  --gm-lime-halo:  color-mix(in srgb, #C9DC6E 30%, transparent);

  /* ---- Button geometry — measured off the live subscribe button --------
     Declared here so the whole system is four values, not a rebuild.       */
  --gm-btn-face:   #2A2A2A;   /* 14.35:1 against its white label */
  --gm-btn-ink:    #FFFFFF;
  --gm-btn-radius: 999px;
  --gm-btn-pad:    12px 22px; /* 43px tall at the base size */
  --gm-btn-fs:     16px;
  --gm-btn-dur:    0.2s;

  /* ---- Radius — the brand is square. Restraint is the rule. ----------- */
  --gm-radius-0:    0;
  --gm-radius-sm:   2px;    /* buttons, inputs, tags — the default */
  --gm-radius-md:   4px;    /* cards, media */
  --gm-radius-full: 999px;  /* pills & avatars only */

  /* ---- Elevation — dark UI leans on stroke + tint, not shadow --------- */
  --gm-shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --gm-shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --gm-shadow-lg: 0 24px 64px rgba(0,0,0,0.6);
  --gm-glow-accent: 0 0 0 1px rgba(54,156,212,0.4), 0 8px 32px rgba(54,156,212,0.16);

  /* ---- Motion --------------------------------------------------------- */
  --gm-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --gm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --gm-dur-micro:   140ms;
  --gm-dur-base:    240ms;
  --gm-dur-enter:   420ms;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--gm-nav-h) + var(--gm-space-5));
}

body {
  margin: 0;
  background: var(--gm-bg);
  color: var(--gm-text);
  font-family: var(--gm-font-body);
  font-size: var(--gm-fs-body);
  line-height: var(--gm-lh-body);
  font-weight: 400;
  /* DM Sans carries an optical-size axis (opsz 9–40); this lets the browser
     use it. Host Grotesk has no opsz axis, so the declaration is a no-op there. */
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

::selection { background: var(--gm-gold-500); color: var(--gm-black); }

:focus-visible {
  outline: 2px solid var(--gm-focus);
  outline-offset: 3px;
  border-radius: var(--gm-radius-sm);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6, .gm-display {
  font-family: var(--gm-font-display);
  font-weight: 700;
  margin: 0 0 var(--gm-space-4);
  color: var(--gm-text);
  text-wrap: balance;
}

.gm-display {
  font-size: var(--gm-fs-display);
  font-weight: 300;                    /* Light — see note in Typography */
  line-height: var(--gm-lh-tight);
  letter-spacing: var(--gm-ls-display);
}
h1, .gm-h1 {
  font-size: var(--gm-fs-h1);
  font-weight: 300;                    /* Light — hero and page titles only */
  line-height: var(--gm-lh-tight);
  letter-spacing: var(--gm-ls-display);
}
h2, .gm-h2 {
  font-size: var(--gm-fs-h2);
  line-height: var(--gm-lh-heading);
  letter-spacing: var(--gm-ls-heading);
}
h3, .gm-h3 {
  font-size: var(--gm-fs-h3);
  line-height: var(--gm-lh-snug);
  letter-spacing: var(--gm-ls-heading);
}
h4, .gm-h4 {
  font-size: var(--gm-fs-h4);
  line-height: var(--gm-lh-snug);
  letter-spacing: var(--gm-ls-tight);
}

/* Lead / intro paragraph — Host Grotesk 400. The only body-role display use. */
.gm-lead {
  font-family: var(--gm-font-display);
  font-weight: 400;
  font-size: var(--gm-fs-lead);
  line-height: 1.45;
  letter-spacing: var(--gm-ls-tight);
  color: var(--gm-text-secondary);
  max-width: 56ch;
  margin: 0 0 var(--gm-space-5);
  text-wrap: pretty;
}

p { margin: 0 0 var(--gm-space-4); max-width: var(--gm-container-text); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.gm-body-lg { font-size: var(--gm-fs-body-lg); }
.gm-body-sm { font-size: var(--gm-fs-body-sm); }
.gm-caption { font-size: var(--gm-fs-caption); line-height: 1.5; color: var(--gm-text-muted); }

.gm-muted     { color: var(--gm-text-muted); }
.gm-secondary { color: var(--gm-text-secondary); }

/* Eyebrow / section label — Belt Teal by default */
.gm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  font-family: var(--gm-font-body);
  font-size: var(--gm-fs-label);
  font-weight: 700;
  letter-spacing: var(--gm-ls-label);
  text-transform: uppercase;
  color: var(--gm-signal);
  margin: 0 0 var(--gm-space-4);
}
.gm-eyebrow--gold { color: var(--gm-highlight); }
.gm-eyebrow--blue { color: var(--gm-accent); }
.gm-eyebrow--muted { color: var(--gm-text-muted); }

/* Numeric / data — tabular figures, always */
.gm-metric {
  font-family: var(--gm-font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--gm-highlight);
}
.gm-mono, code, kbd, samp, pre {
  font-family: var(--gm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}

blockquote {
  margin: 0;
  padding-left: var(--gm-space-5);
  border-left: 2px solid var(--gm-signal);
  font-family: var(--gm-font-display);
  font-weight: 400;
  font-size: var(--gm-fs-lead);
  line-height: 1.45;
  letter-spacing: var(--gm-ls-tight);
  color: var(--gm-text);
}

hr {
  border: 0;
  height: 1px;
  background: var(--gm-border-subtle);
  margin: var(--gm-space-7) 0;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.gm-container {
  width: 100%;
  max-width: var(--gm-container);
  margin-inline: auto;
  padding-inline: var(--gm-gutter);
}
.gm-container--wide { max-width: var(--gm-container-wide); }
.gm-container--text { max-width: var(--gm-container-text); }

.gm-section { padding-block: var(--gm-section-y); }
.gm-section--tight { padding-block: clamp(3rem, 1.5rem + 5vw, 6rem); }
.gm-section--surface { background: var(--gm-bg-surface); }
.gm-section--divided { border-top: 1px solid var(--gm-border-subtle); }

.gm-grid { display: grid; gap: var(--gm-space-6); }
.gm-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.gm-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.gm-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* 2-col with editorial split: content narrower than media */
.gm-split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.gm-split--media-first > :first-child { order: -1; }

@media (max-width: 900px) {
  .gm-grid--3, .gm-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gm-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gm-grid--2, .gm-grid--3, .gm-grid--4 { grid-template-columns: 1fr; }
}

.gm-stack > * + * { margin-top: var(--gm-space-4); }
.gm-cluster { display: flex; flex-wrap: wrap; gap: var(--gm-space-3); align-items: center; }

/* ==========================================================================
   5. BUTTONS & LINKS
   ========================================================================== */
/* ---------------------------------------------------------------------------
   BUTTONS  —  v2, the pill
   ADOPTED 28 July 2026, replacing the square top-lit "physical key" spec.

   Values are measured off the live geomorphic.ai subscribe button's computed
   style (see the data-visualisation addendum, section 07), not eyeballed. The
   site shipped this; the guide now matches the site rather than the other way
   round.

   WHAT THIS REPLACED, and why it matters when reading older files: the previous
   button was square (2px), built from a top-lit gradient of the 200/300/500
   steps of a colour ramp, sat on a hard bottom edge at 700 that depressed on
   press, and came in blue / gold / teal faces. That whole family is retired.

   ONE face now, not four. The colour modifiers below are kept as ALIASES so
   existing markup keeps working, but they no longer change the face — a
   button is a button, and emphasis is carried by placement and by there being
   only one primary per view. Ore Gold keeps its emphasis job on metrics,
   figures and the highlighted series (see §13), where it is genuinely good;
   it is no longer a button face.
   --------------------------------------------------------------------------- */

.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gm-space-2);
  padding: var(--gm-btn-pad);
  border: 0;
  border-radius: var(--gm-btn-radius);
  background: var(--gm-btn-face);
  color: var(--gm-btn-ink);
  font-family: var(--gm-font-body);
  font-size: var(--gm-btn-fs);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 0 0 0 transparent;
  transition:
    background-color var(--gm-btn-dur) var(--gm-ease),
    color var(--gm-btn-dur) var(--gm-ease),
    box-shadow var(--gm-btn-dur) var(--gm-ease);
}

/* Hover: the face goes lime and a soft ring blooms behind it. The ring is a
   spread-only box-shadow, so it costs no layout and never shifts the row. */
.gm-btn:hover {
  background: var(--gm-lime-500);
  color: var(--gm-lime-ink);
  box-shadow: 0 0 0 8px var(--gm-lime-halo);
}
.gm-btn:focus-visible { outline: 2px solid var(--gm-lime-500); outline-offset: 4px; }
.gm-btn:active { transform: translateY(1px); }
.gm-btn:disabled, .gm-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: none;
  background: var(--gm-btn-face);
  color: var(--gm-btn-ink);
}

.gm-btn svg { width: 18px; height: 18px; flex: none; }
.gm-btn .gm-btn__icon { stroke: currentColor; fill: none; }

/* ---- QUIET — the secondary partner. Transparent, one hairline, same hover. */
.gm-btn--quiet,
.gm-btn--outline,
.gm-btn--ghost {
  background: transparent;
  color: var(--gm-text-secondary);
  box-shadow: inset 0 0 0 1px var(--gm-border);
}
.gm-btn--quiet:hover,
.gm-btn--outline:hover,
.gm-btn--ghost:hover {
  background: var(--gm-lime-500);
  color: var(--gm-lime-ink);
  box-shadow: 0 0 0 8px var(--gm-lime-halo);
}
.gm-btn--quiet[aria-pressed="true"] {
  background: var(--gm-btn-face);
  color: var(--gm-btn-ink);
  box-shadow: none;
}

/* ---- Colour modifiers — ALIASES ONLY.
   Retained so markup written against the previous spec keeps rendering. They
   deliberately do nothing: the face is the same on all of them. Remove them
   from new markup. ---- */
.gm-btn--primary, .gm-btn--blue, .gm-btn--gold, .gm-btn--teal { /* no-op */ }

/* ---- Sizes ---- */
.gm-btn--sm { padding: 9px 16px; font-size: var(--gm-fs-caption); }
.gm-btn--lg { padding: 15px 28px; font-size: var(--gm-fs-body); }
.gm-btn--block { display: flex; width: 100%; }

@media (prefers-reduced-motion: reduce) { .gm-btn { transition: none; } }

/* ---- Text link with arrow — the tertiary action ---- */
.gm-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  color: var(--gm-accent);
  font-weight: 700;
  font-size: var(--gm-fs-body-sm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--gm-dur-micro) var(--gm-ease),
              border-color var(--gm-dur-micro) var(--gm-ease);
}
.gm-link:hover { color: var(--gm-accent-hover); border-bottom-color: currentColor; }
.gm-link svg { width: 16px; height: 16px; transition: transform var(--gm-dur-micro) var(--gm-ease); }
.gm-link:hover svg { transform: translateX(3px); }

/* Inline prose link */
.gm-prose a, a.gm-inline {
  color: var(--gm-accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(95,170,211,0.45);
  transition: text-decoration-color var(--gm-dur-micro) var(--gm-ease);
}
.gm-prose a:hover, a.gm-inline:hover { text-decoration-color: currentColor; }
   6. FORMS
   ========================================================================== */

.gm-field { display: flex; flex-direction: column; gap: var(--gm-space-2); }

.gm-label {
  font-size: var(--gm-fs-label);
  font-weight: 700;
  letter-spacing: var(--gm-ls-label);
  text-transform: uppercase;
  color: var(--gm-text-muted);
}
.gm-label .gm-req { color: var(--gm-highlight); margin-left: 2px; }

.gm-input, .gm-textarea, .gm-select {
  width: 100%;
  min-height: 48px;
  padding: var(--gm-space-3) var(--gm-space-4);
  background: var(--gm-bg-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-sm);
  color: var(--gm-text);
  font-family: var(--gm-font-body);
  font-size: var(--gm-fs-body);
  line-height: 1.4;
  transition: border-color var(--gm-dur-micro) var(--gm-ease),
              background-color var(--gm-dur-micro) var(--gm-ease);
}
.gm-input::placeholder, .gm-textarea::placeholder { color: var(--gm-basalt-400); }
.gm-input:hover, .gm-textarea:hover, .gm-select:hover { border-color: var(--gm-border-strong); }
.gm-input:focus, .gm-textarea:focus, .gm-select:focus {
  outline: none;
  border-color: var(--gm-accent);
  background: var(--gm-bg-raised);
  box-shadow: 0 0 0 3px rgba(54,156,212,0.20);
}
.gm-textarea { min-height: 140px; resize: vertical; }

.gm-select {
  appearance: none;
  padding-right: var(--gm-space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--gm-space-4) center;
  background-size: 18px;
}

.gm-check { display: flex; gap: var(--gm-space-3); align-items: flex-start; cursor: pointer; }
.gm-check input[type="checkbox"], .gm-check input[type="radio"] {
  appearance: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  flex: none;
  background: var(--gm-bg-surface);
  border: 1px solid var(--gm-border-strong);
  border-radius: var(--gm-radius-sm);
  cursor: pointer;
  transition: background-color var(--gm-dur-micro) var(--gm-ease),
              border-color var(--gm-dur-micro) var(--gm-ease);
}
.gm-check input[type="radio"] { border-radius: var(--gm-radius-full); }
.gm-check input:checked {
  background: var(--gm-accent);
  border-color: var(--gm-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.gm-check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 4px var(--gm-black); }
.gm-check span { font-size: var(--gm-fs-body-sm); color: var(--gm-text-secondary); }

.gm-help  { font-size: var(--gm-fs-caption); color: var(--gm-text-muted); }
.gm-error { font-size: var(--gm-fs-caption); color: var(--gm-ember-300); }
.gm-input[aria-invalid="true"], .gm-textarea[aria-invalid="true"] { border-color: var(--gm-danger); }

/* ==========================================================================
   7. COMPONENTS
   ========================================================================== */

/* ---- Card ---- */
.gm-card {
  display: flex;
  flex-direction: column;
  background: var(--gm-bg-surface);
  border: 1px solid var(--gm-border-subtle);
  border-radius: var(--gm-radius-md);
  padding: var(--gm-space-6);
  transition: border-color var(--gm-dur-base) var(--gm-ease),
              background-color var(--gm-dur-base) var(--gm-ease),
              transform var(--gm-dur-base) var(--gm-ease);
}
.gm-card--link { text-decoration: none; color: inherit; cursor: pointer; }
.gm-card--link:hover {
  border-color: var(--gm-border-strong);
  background: var(--gm-bg-raised);
  transform: translateY(-2px);
}
.gm-card__index {
  font-family: var(--gm-font-mono);
  font-size: var(--gm-fs-caption);
  color: var(--gm-accent);
  letter-spacing: 0.08em;
  margin-bottom: var(--gm-space-5);
}
.gm-card__title { font-size: var(--gm-fs-h4); margin-bottom: var(--gm-space-3); }
.gm-card__body { color: var(--gm-text-secondary); font-size: var(--gm-fs-body-sm); margin: 0; }
.gm-card__media {
  margin: calc(var(--gm-space-6) * -1) calc(var(--gm-space-6) * -1) var(--gm-space-5);
  border-radius: var(--gm-radius-md) var(--gm-radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.gm-card__media img { width: 100%; height: 100%; object-fit: cover; }
.gm-card__foot {
  margin-top: auto;
  padding-top: var(--gm-space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--gm-space-3);
}

/* ---- Tag / badge ---- */
.gm-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  height: 26px;
  padding-inline: var(--gm-space-3);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-sm);
  font-size: var(--gm-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gm-text-secondary);
  background: transparent;
}
.gm-tag--gold { color: var(--gm-gold-500); border-color: rgba(241,202,81,0.35); background: rgba(241,202,81,0.08); }
.gm-tag--teal { color: var(--gm-teal-500); border-color: rgba(78,196,169,0.35); background: rgba(78,196,169,0.08); }
.gm-tag--blue { color: var(--gm-blue-400); border-color: rgba(54,156,212,0.35); background: rgba(54,156,212,0.10); }
.gm-tag--solid { background: var(--gm-basalt-700); border-color: transparent; }
.gm-tag__dot { width: 6px; height: 6px; border-radius: var(--gm-radius-full); background: currentColor; }

/* ---- Stat / metric block ---- */
.gm-stat { border-top: 1px solid var(--gm-border-subtle); padding-top: var(--gm-space-4); }
.gm-stat__value { font-family: var(--gm-font-display); font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--gm-highlight); }
.gm-stat__label { margin-top: var(--gm-space-3); font-size: var(--gm-fs-body-sm); color: var(--gm-text-secondary); }
.gm-stat--blue .gm-stat__value { color: var(--gm-accent); }
.gm-stat--teal .gm-stat__value { color: var(--gm-signal); }
.gm-stat--plain .gm-stat__value { color: var(--gm-text); }

/* ---- Data table ---- */
.gm-table-wrap { overflow-x: auto; border: 1px solid var(--gm-border-subtle); border-radius: var(--gm-radius-md); }
.gm-table { width: 100%; border-collapse: collapse; font-size: var(--gm-fs-body-sm); }
.gm-table th {
  text-align: left;
  padding: var(--gm-space-3) var(--gm-space-4);
  background: var(--gm-bg-raised);
  border-bottom: 1px solid var(--gm-border);
  font-size: var(--gm-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-text-muted);
  white-space: nowrap;
}
.gm-table td {
  padding: var(--gm-space-3) var(--gm-space-4);
  border-bottom: 1px solid var(--gm-border-subtle);
  color: var(--gm-text-secondary);
}
.gm-table tbody tr:last-child td { border-bottom: 0; }
.gm-table tbody tr:hover td { background: var(--gm-veil-04); }
.gm-table .gm-num { font-family: var(--gm-font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--gm-text); }

/* ---- Testimonial ---- */
.gm-quote { display: flex; flex-direction: column; gap: var(--gm-space-5); }
.gm-quote__text {
  font-family: var(--gm-font-display); font-weight: 400;
  font-size: var(--gm-fs-lead); line-height: 1.45; letter-spacing: var(--gm-ls-tight);
  color: var(--gm-text); margin: 0;
}
.gm-quote__attr { display: flex; align-items: center; gap: var(--gm-space-3); margin-top: auto; }
.gm-quote__name { font-weight: 700; font-size: var(--gm-fs-body-sm); }
.gm-quote__role { font-size: var(--gm-fs-caption); color: var(--gm-text-muted); }

/* ---- Testimonial: client mark in the attribution ---- */
.gm-quote__logo { height: 40px; width: auto; opacity: 0.8; flex: none; }

/* ---- Testimonial: feature slider ---- */
.gm-tslider {
  position: relative; overflow: hidden;
  padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  border: 1px solid var(--gm-border-subtle);
  border-radius: var(--gm-radius-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 45%, rgba(255,255,255,0.05));
}
.gm-tslider__grid {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1fr 1fr; align-items: center;
}
@media (max-width: 900px) { .gm-tslider__grid { grid-template-columns: 1fr; } }

.gm-tslider__badge {
  display: inline-flex; align-items: center;
  padding: 5px var(--gm-space-3);
  border: 1px solid rgba(78,196,169,0.28);
  border-radius: var(--gm-radius-full);
  background: var(--gm-teal-900);
  color: var(--gm-teal-400);
  font-size: var(--gm-fs-label); font-weight: 700;
  letter-spacing: var(--gm-ls-label); text-transform: uppercase;
}
.gm-tslider__title {
  font-family: var(--gm-font-display); font-weight: 300;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.06; letter-spacing: var(--gm-ls-display);
  color: var(--gm-text); margin: var(--gm-space-5) 0 0; text-wrap: balance;
}
.gm-tslider__intro { margin-top: var(--gm-space-4); color: var(--gm-text-secondary); max-width: 46ch; }

.gm-tslider__ctrl { display: flex; align-items: center; gap: var(--gm-space-3); margin-top: var(--gm-space-7); }
.gm-tslider__btn {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gm-border); border-radius: var(--gm-radius-full);
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
  color: var(--gm-text); cursor: pointer;
  transition: background-color var(--gm-dur-micro) var(--gm-ease), border-color var(--gm-dur-micro) var(--gm-ease);
}
.gm-tslider__btn:hover { background: var(--gm-veil-08); border-color: var(--gm-border-strong); }
.gm-tslider__btn svg { width: 20px; height: 20px; }
.gm-tslider__dots { display: flex; gap: var(--gm-space-2); margin-left: var(--gm-space-2); }
.gm-tslider__dots button {
  width: 9px; height: 9px; padding: 0; border-radius: var(--gm-radius-full);
  border: 1px solid var(--gm-line-hairline); background: rgba(255,255,255,0.2);
  cursor: pointer; transition: background-color var(--gm-dur-base) var(--gm-ease);
}
.gm-tslider__dots button[aria-current="true"] { background: var(--gm-teal-500); }

.gm-tslider__card {
  position: relative; margin: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--gm-border-subtle);
  border-radius: var(--gm-radius-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}
.gm-tslider__mark { width: 34px; height: 34px; color: var(--gm-teal-500); margin-bottom: var(--gm-space-4); }
.gm-tslider__quote {
  margin: 0; padding: 0; border: 0;
  font-family: var(--gm-font-display); font-weight: 300;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem);
  line-height: 1.2; letter-spacing: var(--gm-ls-heading);
  color: var(--gm-text);
  transition: opacity var(--gm-dur-base) var(--gm-ease);
}
.gm-tslider__attr { display: flex; align-items: center; gap: var(--gm-space-4); margin-top: var(--gm-space-6); }
.gm-tslider__logo { height: 46px; width: auto; opacity: 0.85; flex: none;
  transition: opacity var(--gm-dur-base) var(--gm-ease); }
.gm-tslider__name { font-size: var(--gm-fs-body-sm); font-weight: 700; color: var(--gm-text); }
.gm-tslider__role { font-size: var(--gm-fs-caption); color: var(--gm-text-muted); margin-top: 2px; }
.gm-tslider.is-fading .gm-tslider__quote,
.gm-tslider.is-fading .gm-tslider__attr { opacity: 0.15; }
.gm-tslider__attr { transition: opacity var(--gm-dur-base) var(--gm-ease); }

/* ---- Accordion ---- */
.gm-accordion { border-top: 1px solid var(--gm-border-subtle); }
.gm-accordion__item { border-bottom: 1px solid var(--gm-border-subtle); }
.gm-accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--gm-space-4);
  padding: var(--gm-space-5) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--gm-font-display); font-weight: 700; font-size: var(--gm-fs-h4);
  letter-spacing: var(--gm-ls-tight); color: var(--gm-text); text-align: left;
}
.gm-accordion__trigger:hover { color: var(--gm-accent-hover); }
.gm-accordion__trigger svg { flex: none; width: 20px; height: 20px; transition: transform var(--gm-dur-base) var(--gm-ease); }
.gm-accordion__trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.gm-accordion__panel { padding: 0 0 var(--gm-space-5); color: var(--gm-text-secondary); max-width: var(--gm-container-text); }

/* ---- Alert / note ---- */
.gm-note {
  display: flex; gap: var(--gm-space-4);
  padding: var(--gm-space-4) var(--gm-space-5);
  border: 1px solid var(--gm-border-subtle);
  border-left: 2px solid var(--gm-accent);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-bg-surface);
  font-size: var(--gm-fs-body-sm);
  color: var(--gm-text-secondary);
}
.gm-note--warn { border-left-color: var(--gm-warning); }
.gm-note--ok   { border-left-color: var(--gm-success); }
.gm-note--err  { border-left-color: var(--gm-danger); }

/* ---- Filter bar / chips ---- */
.gm-chip {
  height: 36px; padding-inline: var(--gm-space-4);
  display: inline-flex; align-items: center; gap: var(--gm-space-2);
  background: transparent; border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-full);
  font-size: var(--gm-fs-caption); font-weight: 700; color: var(--gm-text-secondary);
  cursor: pointer;
  transition: all var(--gm-dur-micro) var(--gm-ease);
}
.gm-chip:hover { border-color: var(--gm-border-strong); color: var(--gm-text); }
.gm-chip[aria-pressed="true"] { background: var(--gm-white); border-color: var(--gm-white); color: var(--gm-black); }

/* ---- Logo strip ---- */
.gm-logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(2rem, 1rem + 3vw, 4rem); }
/* Client marks ship as white knockouts on transparent, so four unrelated
   palettes read as one row. No filter needed — the file is already white. */
.gm-logos img { height: 30px; width: auto; opacity: 0.55;
  transition: opacity var(--gm-dur-base) var(--gm-ease); }
.gm-logos img:hover { opacity: 1; }
.gm-logos--sm img { height: 22px; }

/* ---- Icon ---- */
.gm-icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; fill: none; }
.gm-icon--sm { width: 18px; height: 18px; stroke-width: 1.75; }
.gm-icon--lg { width: 32px; height: 32px; stroke-width: 1.25; }
.gm-icon-tile {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--gm-border-subtle); border-radius: var(--gm-radius-sm);
  background: var(--gm-bg-raised); color: var(--gm-accent);
}

/* ==========================================================================
   8. SECTIONS
   ========================================================================== */

/* ---------------------------------------------------------------------------
   NAV BAR
   Blurred black rail, the logomark at full colour on the left, links held in a
   floating pill in the centre, and a single gradient-edged CTA on the right.
   The gradient runs blue -> teal -> gold: the logomark's own three accents,
   in logomark order. It is the ONE place a multi-accent gradient is allowed.
   --------------------------------------------------------------------------- */
.gm-nav {
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  height: var(--gm-nav-h);
  display: flex; align-items: center;
  background: rgba(0,0,0,0.80);
  backdrop-filter: saturate(150%) blur(20px);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.gm-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gm-space-5); width: 100%;
}

.gm-nav__logo { display: inline-flex; align-items: center; gap: var(--gm-space-3); text-decoration: none; flex: none; }
.gm-nav__logo img { height: 26px; width: auto; }

/* Centre pill */
.gm-nav__links {
  display: flex; align-items: center; gap: var(--gm-space-1);
  list-style: none; margin: 0;
  padding: var(--gm-space-1) var(--gm-space-2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--gm-radius-full);
  background: rgba(255,255,255,0.02);
}
.gm-nav__link {
  display: inline-block;
  padding: var(--gm-space-2) var(--gm-space-3);
  border-radius: var(--gm-radius-full);
  font-size: var(--gm-fs-body-sm);
  font-weight: 500;
  color: var(--gm-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--gm-dur-micro) var(--gm-ease),
              background-color var(--gm-dur-micro) var(--gm-ease);
}
.gm-nav__link:hover { color: var(--gm-text); background: rgba(255,255,255,0.05); }
.gm-nav__link[aria-current="page"] { color: var(--gm-text); background: rgba(255,255,255,0.07); }

.gm-nav__right { display: flex; align-items: center; gap: var(--gm-space-2); flex: none; }
.gm-nav__quiet {
  font-size: var(--gm-fs-body-sm); font-weight: 500; color: var(--gm-text-secondary);
  text-decoration: none; white-space: nowrap; padding: var(--gm-space-2) var(--gm-space-3);
  transition: color var(--gm-dur-micro) var(--gm-ease);
}
.gm-nav__quiet:hover { color: var(--gm-text); }

/* ---------------------------------------------------------------------------
   NAV CTA — the one animated element in the system.
   A dark face ringed by a slowly travelling brand gradient, doubled and blurred
   behind itself so the ring also throws light onto the rail. The gradient
   cycles blue -> teal -> gold -> teal -> blue, so it never lands on a colour
   that is not ours. 20s is deliberate: it should be noticed on the second look,
   not the first.
   --------------------------------------------------------------------------- */
.gm-nav__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: none;
  border: 0;
  padding: 0;
  background: none;
  border-radius: var(--gm-btn-radius);
  text-decoration: none;
  cursor: pointer;
}
.gm-nav__cta::before,
.gm-nav__cta::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--gm-btn-radius) + 2px);
  background: linear-gradient(45deg,
    var(--gm-blue-500), var(--gm-teal-500), var(--gm-gold-500), var(--gm-teal-500),
    var(--gm-blue-500), var(--gm-teal-500), var(--gm-gold-500), var(--gm-teal-500),
    var(--gm-blue-500));
  background-size: 400% 400%;
  animation: gm-steam 20s linear infinite;
}
.gm-nav__cta::before { z-index: 0; }                       /* the crisp ring   */
.gm-nav__cta::after  { z-index: -1; filter: blur(18px); opacity: 0.55; }  /* its light */

.gm-nav__cta > span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--gm-space-2);
  min-width: 110px;
  padding: 12px 20px;
  border-radius: var(--gm-btn-radius);
  background: linear-gradient(0deg, #000000, #272727);
  color: var(--gm-white);
  font-family: var(--gm-font-body);
  font-size: var(--gm-fs-caption);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--gm-dur-base) var(--gm-ease);
}
.gm-nav__cta:hover > span { background: linear-gradient(0deg, #0B0B0B, #333333); }
.gm-nav__cta:hover::after { opacity: 0.85; }
.gm-nav__cta:active { transform: translateY(1px); }
.gm-nav__cta:focus-visible { outline: 2px solid var(--gm-blue-400); outline-offset: 4px; }
.gm-nav__cta svg { flex: none; width: 16px; height: 16px; transition: transform var(--gm-dur-micro) var(--gm-ease); }
.gm-nav__cta:hover svg { transform: translateX(2px); }

@keyframes gm-steam {
  0%   { background-position:   0% 0%; }
  50%  { background-position: 400% 0%; }
  100% { background-position:   0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-nav__cta::before, .gm-nav__cta::after { animation: none; }
}

/* Mobile */
.gm-nav__burger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-sm); color: var(--gm-text); cursor: pointer;
}
@media (max-width: 1180px) { .gm-nav__quiet { display: none; } }
/* Below this the CTA, the logo and the burger stop fitting side by side —
   the CTA goes compact rather than the burger disappearing. */
@media (max-width: 620px) {
  .gm-nav__cta > span { min-width: 0; padding: 10px 14px; font-size: 11px; letter-spacing: 0.06em; }
  .gm-nav__cta svg { display: none; }
  .gm-nav__logo img { height: 22px; }
}
@media (max-width: 980px) {
  .gm-nav__links { display: none; }
  .gm-nav__burger { display: inline-flex; }
}

/* ---- Hero ---- */
.gm-hero { position: relative; display: grid; align-items: end; min-height: min(88vh, 900px); overflow: hidden; }
.gm-hero__media { position: absolute; inset: 0; z-index: 0; }
.gm-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.gm-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 32%, rgba(0,0,0,0.86) 88%, #000 100%),
    linear-gradient(90deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0) 60%);
}
.gm-hero__inner { position: relative; z-index: 2; padding-block: var(--gm-space-9) var(--gm-space-8); }
.gm-hero__title { max-width: 18ch; margin-bottom: var(--gm-space-5); }
.gm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gm-space-3); margin-top: var(--gm-space-6); }

/* ---- Numbered process steps ---- */
.gm-steps { counter-reset: gmstep; display: grid; gap: var(--gm-space-6); grid-template-columns: repeat(3, minmax(0,1fr)); }
.gm-step { border-top: 1px solid var(--gm-border); padding-top: var(--gm-space-5); }
.gm-step::before {
  counter-increment: gmstep; content: "0" counter(gmstep);
  display: block; font-family: var(--gm-font-mono); font-size: var(--gm-fs-caption);
  letter-spacing: 0.1em; color: var(--gm-accent); margin-bottom: var(--gm-space-4);
}
@media (max-width: 800px) { .gm-steps { grid-template-columns: 1fr; } }

/* ---- Section heading block ---- */
.gm-sec-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* ---- CTA band ---- */
.gm-cta {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--gm-border-subtle);
  background: var(--gm-bg-surface);
  text-align: center;
}
.gm-cta__inner { position: relative; z-index: 1; padding-block: clamp(4rem, 2rem + 7vw, 8rem); }
.gm-cta__title { max-width: 20ch; margin-inline: auto; }
.gm-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--gm-space-3); margin-top: var(--gm-space-6); }

/* ---- Footer ---- */
.gm-footer { border-top: 1px solid var(--gm-border-subtle); background: var(--gm-black); padding-block: var(--gm-space-8) var(--gm-space-6); }
.gm-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gm-space-6); }
.gm-footer__col h5 {
  font-family: var(--gm-font-body); font-size: var(--gm-fs-label); font-weight: 700;
  letter-spacing: var(--gm-ls-label); text-transform: uppercase;
  color: var(--gm-text-muted); margin-bottom: var(--gm-space-4);
}
.gm-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gm-space-3); }
.gm-footer__col a { color: var(--gm-text-secondary); text-decoration: none; font-size: var(--gm-fs-body-sm); }
.gm-footer__col a:hover { color: var(--gm-text); }
.gm-footer__bar {
  margin-top: var(--gm-space-8); padding-top: var(--gm-space-5);
  border-top: 1px solid var(--gm-border-subtle);
  display: flex; flex-wrap: wrap; gap: var(--gm-space-4);
  align-items: center; justify-content: space-between;
  font-size: var(--gm-fs-caption); color: var(--gm-text-muted);
}
@media (max-width: 800px) { .gm-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .gm-footer__grid { grid-template-columns: 1fr; } }

/* ---- Team ---- */
.gm-person__photo {
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--gm-radius-md);
  background: var(--gm-bg-raised); margin-bottom: var(--gm-space-4);
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--gm-dur-enter) var(--gm-ease);
}
.gm-person:hover .gm-person__photo { filter: grayscale(0) contrast(1); }
.gm-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.gm-person__name { font-family: var(--gm-font-display); font-weight: 700; font-size: var(--gm-fs-h4);
  letter-spacing: var(--gm-ls-tight); margin: 0 0 var(--gm-space-1); }
.gm-person__role { font-size: var(--gm-fs-body-sm); color: var(--gm-signal); margin: 0 0 var(--gm-space-3); }
.gm-person__bio { font-size: var(--gm-fs-body-sm); color: var(--gm-text-secondary); margin: 0; }

/* ==========================================================================
   9. BACKGROUNDS & PATTERNS
   ========================================================================== */

/* Grain — the signature texture. Sits above background, below content. */
.gm-grain { position: relative; isolation: isolate; }
.gm-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.055; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gm-grain > * { position: relative; z-index: 2; }
.gm-grain--heavy::after { opacity: 0.11; }

/* Survey grid — technical underlay */
.gm-grid-bg {
  background-image:
    linear-gradient(to right, var(--gm-veil-04) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gm-veil-04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.gm-grid-bg--fine { background-size: 32px 32px; }

/* Contour lines — the geomorphic signature. Use at low opacity, large scale. */
.gm-contour-bg {
  background-image: url("../assets/patterns/contour.svg");
  background-size: 1200px auto;
  background-position: center;
  background-repeat: repeat;
}

/* Horizon glow — a single accent-tinted radial. Never more than one per view. */
.gm-glow { position: relative; isolation: isolate; overflow: hidden; }
.gm-glow::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 0; translate: -50% -40%;
  width: min(1100px, 120%); aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center, rgba(54,156,212,0.16) 0%, rgba(54,156,212,0) 62%);
}
.gm-glow--gold::before { background: radial-gradient(ellipse at center, rgba(241,202,81,0.13) 0%, rgba(241,202,81,0) 62%); }
.gm-glow--teal::before { background: radial-gradient(ellipse at center, rgba(78,196,169,0.13) 0%, rgba(78,196,169,0) 62%); }
.gm-glow > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   MOTION BACKGROUNDS (Unicorn Studio)
   A hosted WebGL scene sits behind a section as a living version of the
   horizon glow. Same discipline as the static glow: ONE per view, always
   behind a scrim, never under body copy.
   --------------------------------------------------------------------------- */
.gm-motion {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;               /* the scene must never eat clicks */
  overflow: hidden;
}
.gm-motion > [data-us-project] { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Fade the scene out at the edges so it never collides with type */
.gm-motion--feather {
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 80%, transparent);
          mask-image: linear-gradient(transparent, #000 8%, #000 80%, transparent);
}
.gm-motion--saturate { filter: saturate(1.5); }
.gm-motion--dim      { opacity: 0.55; }

/* Any section hosting a scene needs a stacking context and a lid */
.gm-motion-host { position: relative; isolation: isolate; overflow: hidden; }
.gm-motion-host > .gm-container,
.gm-motion-host > .gm-motion-content { position: relative; z-index: 2; }
.gm-motion-host > .gm-motion-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.85) 100%);
}

/* Respect the user's motion preference — swap the scene for a static glow */
@media (prefers-reduced-motion: reduce) {
  .gm-motion { display: none; }
  .gm-motion-host::before {
    content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(54,156,212,0.16) 0%, rgba(54,156,212,0) 62%);
  }
}

/* Scrim — apply over any photo carrying text */
.gm-scrim-b { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 78%, #000 100%); }
.gm-scrim-l { background: linear-gradient(90deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0) 62%); }

/* Media treatment — the house grade, approximated in CSS for web photos */
.gm-media-grade img { filter: saturate(0.72) contrast(0.94) brightness(0.96); }

/* ==========================================================================
   10. MOTION & ACCESSIBILITY
   ========================================================================== */

.gm-reveal { opacity: 0; transform: translateY(16px);
  transition: opacity var(--gm-dur-enter) var(--gm-ease), transform var(--gm-dur-enter) var(--gm-ease); }
.gm-reveal.is-in { opacity: 1; transform: none; }

.gm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gm-highlight); color: var(--gm-black);
  padding: var(--gm-space-3) var(--gm-space-4); font-weight: 700;
}
.gm-skip:focus { left: var(--gm-space-4); top: var(--gm-space-4); }

.gm-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;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .gm-reveal { opacity: 1; transform: none; }
}

/* ---- Light surface (decks, print, one-pagers) ------------------------- */
.gm-paper {
  background: var(--gm-paper);
  --gm-text: #101010;
  --gm-text-secondary: #3D3D3D;
  --gm-text-muted: #6E6E6E;
  --gm-border: rgba(0,0,0,0.14);
  --gm-border-subtle: rgba(0,0,0,0.08);
  --gm-border-strong: rgba(0,0,0,0.28);
  --gm-bg-surface: #FFFFFF;
  --gm-bg-raised: #FFFFFF;
  --gm-accent: #1D6288;
  --gm-accent-hover: #267EAF;
  --gm-on-accent: #FFFFFF;
  --gm-highlight: #A9871F;
  --gm-signal: #2A7F6C;
  color: var(--gm-text);
}

@media print {
  body { background: #fff; color: #000; }
  .gm-nav, .gm-cta, .gm-footer { display: none; }
}