/* ==========================================================================
   Game Changer Therapy — Shared Design System (DARK · PREMIUM)
   Authoritative sources: PALETTE-V2.md (dark palette, surfaces, AA rules)
   + PREMIUM-2026.md (premium craft) + BUILD-SPEC.md (structure).

   This is a RE-SKIN, not a rebuild. Every class + token NAME the 20 pages
   already reference is preserved; only VALUES are remapped so the dark,
   premium palette cascades to every page's inlined chrome and inline styles
   without editing a single content page.

   FONTS: self-hosted Nunito + Nunito Sans. Pages link the font sheet BEFORE
   this file:
     <link rel="stylesheet" href="/assets/fonts/nunito.css">
     <link rel="stylesheet" href="/assets/css/design-system.css">

   LIGHT THEME · SOLID COLOURS ONLY · NO GRADIENTS (client direction).
   Green #3E8E2E primary · deep green #14351A chrome/footer · raspberry
   #DF2456 / #C01D45 accent.

   COLOR RULES (WCAG AA — do not break):
   - The page floor is WHITE. Body/UI text = --gc-text / --gc-text-soft,
     headings = --gc-text. Never white text on a light surface.
   - On the deep-green chrome (topbar, footer, .section--dark, .cta-band) use
     --gc-ink-on-dark / --gc-ink-on-dark-soft, and --gc-green-pale for
     green-as-text. #3E8E2E is only 3.3:1 there — never use it as on-dark text.
   - Green-as-TEXT on white is --gc-green-ink (#2E6B1F, 6.5:1). #3E8E2E is
     4.1:1 — fills, borders and display type only.
   - Accent-as-FILL takes white text on red / blue-fill / green-fill / deep
     green. Yellow fill = dark gold #8A6D00 + white.
   - Primary CTA = raspberry fill #DF2456 with white text ("act" colour).
   - Gradients are permitted ONLY as scrims over photography (with white text
     on them) — never as a section or chrome background.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Base / surfaces (the luminance ladder) --------------------------- */
  --gc-bg:        #FFFFFF; /* page floor — white (LIGHT editorial theme) */
  --gc-bg-2:      #F6F8F3; /* alternating section band — warm off-white */
  --gc-surface:   #EEF3E8; /* resting cards / panels — soft green-tinted */
  --gc-surface-2: #FFFFFF; /* raised / hover / popovers */
  --gc-navy:      #14351A; /* deep green — borders, gradient stops (no purple) */
  --gc-chrome:    #14351A; /* deep green chrome band (topbar / footer / dark CTA) */
  --gc-line:      rgb(20 30 20 / .12); /* hairline border / divider on light */

  /* --- Text ------------------------------------------------------------- */
  --gc-text:      #1C241A; /* primary body text — near-black warm (AA on white) */
  --gc-text-soft: #545A52; /* secondary / muted text (AA on white) */

  /* --- Brand accents: BRIGHT (text/icon/border) · FILL · GLOW ----------- */
  --gc-blue:          #2C6E9E;  --gc-blue-fill:   #2C6E9E;  --gc-blue-glow:   rgb(44 110 158 / .12);
  --gc-green-bright:  #3E8E2E;  --gc-green-fill:  #3E8E2E;  --gc-green-glow2: rgb(62 142 46 / .12);
  --gc-red-bright:    #C01D45;  --gc-red-fill:    #2C6E9E;  --gc-red-glow:    rgb(44 110 158 / .12);
  --gc-yellow:        #8A6D00;  --gc-yellow-fill: #8A6D00;  --gc-yellow-glow: rgb(251 218 10 / .16);
  --gc-indigo:        #3E8E2E;  --gc-indigo-fill: #3E8E2E;  --gc-indigo-glow: rgb(62 142 46 / .12);

  /* --- Accent SYSTEM (per-service variety) ------------------------------
     Utility classes (.accent-blue/green/red/yellow/indigo/navy) redefine
     --accent / --accent-fill / --accent-glow; the derived wash + hair
     recompute lazily from --accent, so a single class re-tints every
     component beneath it (card, chip, eyebrow, focus glow, section wash). */
  --accent:       var(--gc-green-bright);
  --accent-fill:  var(--gc-green-fill);
  --accent-glow:  var(--gc-green-glow2);
  /* accent-as-TEXT: same idea as --gc-green-ink vs #3E8E2E. Only the green
     default needs to step darker to clear AA at small sizes; the other
     accents map straight back to --accent (see .accent-* block). */
  --accent-ink:   var(--gc-green-ink);
  --accent-wash:  color-mix(in oklab, var(--accent) 14%, transparent);
  --accent-hair:  color-mix(in oklab, var(--accent) 55%, var(--gc-line));

  /* --- LEGACY token NAMES (remapped to dark values so pages cascade) ---- */
  --gc-white:            #FFFFFF;            /* white ink on colored fills */
  --gc-ink:              var(--gc-text);      /* primary text */
  --gc-ink-soft:         var(--gc-text-soft); /* secondary text */
  --gc-green-ink:        #2E6B1F;             /* green-as-TEXT / links — 6.5:1 on white. The brand #3E8E2E is 4.1:1, just under AA for small text, so fills stay #3E8E2E and text steps one shade darker */
  --gc-green:            var(--gc-green-bright); /* decorative bright green */
  --gc-green-tint:       color-mix(in oklab, var(--gc-green-bright) 12%, transparent); /* soft green wash */
  --gc-green-dark:       #2E6B1F;             /* darker green for text hovers on light */
  --gc-red:              var(--gc-red-fill);  /* primary CTA fill */
  --gc-red-hover:        var(--gc-red-hover-c);
  --gc-red-hover-c:      #1F5F8B;
  --gc-focus:            var(--gc-green-bright); /* focus ring (green, no purple) */
  --gc-border:           var(--gc-line);
  --gc-border-strong:    rgb(20 30 20 / .22);
  --gc-ink-on-dark:      #F3F8F0;             /* text on the deep-green chrome band (stays light) — 13.0:1 on #14351A */
  --gc-ink-on-dark-soft: #D6E4CE;             /* secondary text on deep green — 9.6:1 on #14351A */
  --gc-green-pale:       #C7E6B3;             /* pale green — green-as-TEXT on the deep-green band (9.9:1). #3E8E2E there is only 3.3:1 */
  --gc-green-glow:       color-mix(in oklab, var(--gc-green-bright) 18%, transparent);

  /* --- Gradients -------------------------------------------------------- */
  /* Solid, no gradients (client request) */
  --grad-hero: #FFFFFF;
  --grad-cta:  #14351A;
  --grad-surface: #FFFFFF;

  /* --- Fluid type scale (refined, more expressive top end) -------------- */
  --gc-fs-display: clamp(2.75rem, 5.5vw + 1rem, 6rem);
  --gc-fs-h1:      clamp(2.25rem, 4vw + .75rem, 4rem);
  --gc-fs-h2:      clamp(1.85rem, 3vw + .6rem, 3rem);
  --gc-fs-h3:      clamp(1.3rem, 1.4vw + .6rem, 1.75rem);
  --gc-fs-h4:      clamp(1.1rem, 1vw + .6rem, 1.25rem);
  --gc-fs-body:    clamp(1.0625rem, .35vw + .95rem, 1.1875rem);
  --gc-fs-lead:    clamp(1.2rem, .8vw + 1rem, 1.5rem);
  --gc-fs-small:   clamp(.875rem, .2vw + .8rem, .9375rem);
  --gc-fs-eyebrow: .8125rem;
  --gc-fs-stat:    clamp(2.5rem, 6vw, 4rem);

  /* --- Font families ---------------------------------------------------- */
  --gc-font-head: 'Poppins', system-ui, sans-serif;
  --gc-font-body: 'Inter', system-ui, sans-serif;
  --gc-lh-body:   1.65;
  --gc-lh-head:   1.1;
  --gc-measure:   65ch;

  /* --- Spacing scale (4 / 8 grid) --------------------------------------- */
  --gc-space-1:  0.25rem;
  --gc-space-2:  0.5rem;
  --gc-space-3:  0.75rem;
  --gc-space-4:  1rem;
  --gc-space-5:  1.5rem;
  --gc-space-6:  2rem;
  --gc-space-7:  2.5rem;
  --gc-space-8:  3rem;
  --gc-space-9:  4rem;
  --gc-space-10: 5rem;

  --gc-section-y: clamp(4rem, 9vw, 8rem); /* premium section rhythm */
  --gc-gutter:    clamp(1rem, 4vw, 2rem);
  --gc-container: 1200px;
  --gc-container-wide: 1320px;
  --gc-container-narrow: 780px;

  /* --- Radii ------------------------------------------------------------ */
  --gc-radius-sm:   0.6rem;
  --gc-radius:      1.25rem; /* cards — 16–20px family */
  --gc-radius-lg:   1.5rem;
  --gc-radius-pill: 999px;

  /* --- Elevation (dark: luminance + soft large-blur shadow) ------------- */
  --gc-shadow-rest:  inset 0 1px 0 rgb(255 255 255 / .05), 0 18px 40px -18px rgb(0 0 0 / .55);
  --gc-shadow-hover: inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 50px -16px rgb(0 0 0 / .6);
  --gc-shadow-nav:   0 18px 40px -18px rgb(0 0 0 / .6);
  --gc-hairline-top: inset 0 1px 0 rgb(255 255 255 / .06); /* top highlight */

  /* --- Motion: named easing set (define once, reuse) -------------------- */
  --gc-ease-out:        cubic-bezier(.16, 1, .3, 1);
  --ease-out-expo:      cubic-bezier(.16, 1, .3, 1);   /* reveals / entrances */
  --ease-out-quart:     cubic-bezier(.25, 1, .5, 1);   /* hover / UI state */
  --ease-in-out:        cubic-bezier(.76, 0, .24, 1);  /* larger symmetric */
  --ease-pop:           cubic-bezier(.34, 1.56, .64, 1); /* gentle overshoot */
  --gc-transition:      200ms var(--ease-out-quart);
  --gc-transition-slow: 360ms var(--ease-out-expo);

  /* --- Layout constants ------------------------------------------------- */
  --gc-nav-h:      76px;
  --gc-nav-h-sm:   62px;
  --gc-topbar-h:   40px;
  --gc-mobilebar-h: 64px;

  /* --- Glass (dark) ----------------------------------------------------- */
  --gc-glass-bg:   rgb(255 255 255 / .72);
  --gc-glass-blur: blur(16px) saturate(140%);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--gc-nav-h) + var(--gc-space-4));
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--gc-font-body);
  font-size: var(--gc-fs-body);
  line-height: var(--gc-lh-body);
  color: var(--gc-text);
  background: var(--gc-bg);
  /* LIGHT theme: flat white page floor. (Was a radial-gradient wash from
     #17173F — a leftover from the old dark theme that tinted the top 700px
     of every page indigo. Solid colours only, per the brand direction.) */
  background-image: none;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Headings — Nunito 800/900, tightened tracking as size grows */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gc-font-head);
  font-weight: 800;
  line-height: var(--gc-lh-head);
  /* LIGHT theme: headings are near-black on the white page floor (15.6:1).
     This was #FFFFFF — a dark-theme leftover that rendered every h1-h6 on the
     18 design-system pages as white-on-white (invisible). On-dark surfaces
     re-assert white via .section--dark / .cta-band below. */
  color: var(--gc-text);
  text-wrap: balance;
}
h1 { font-size: var(--gc-fs-h1); font-weight: 900; letter-spacing: -0.025em; }
h2 { font-size: var(--gc-fs-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--gc-fs-h3); letter-spacing: -0.005em; }
h4 { font-size: var(--gc-fs-h4); font-weight: 700; }

p { max-width: var(--gc-measure); }
p, ul, ol, dl, figure, blockquote { text-wrap: pretty; }

/* Links — bright green on dark; brighten on hover */
a {
  color: var(--gc-green-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
  transition: color var(--gc-transition);
}
a:hover { color: var(--gc-green-dark); }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { border-style: none; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

.list-reset { list-style: none; padding: 0; margin: 0; }

hr { border: none; border-top: 1px solid var(--gc-line); margin: var(--gc-space-6) 0; }

/* Focus — visible, high-contrast on dark (two-part gap ring where it lands
   on a solid surface; plain bright outline everywhere as the guaranteed base) */
:focus-visible {
  outline: 2px solid var(--gc-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Accessibility helpers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: var(--gc-space-3); top: -100%;
  z-index: 1000;
  background: var(--gc-chrome);   /* deep green: white on #3E8E2E was only 4.1:1 */
  color: #fff;
  padding: var(--gc-space-3) var(--gc-space-5);
  border-radius: var(--gc-radius-sm);
  text-decoration: none;
  font-weight: 700;
  box-shadow: var(--gc-shadow-hover);
  transition: top var(--gc-transition);
}
.skip-link:focus { top: var(--gc-space-3); color: #fff; }

[hidden] { display: none !important; }

/* Text-selection uses the brand accent */
/* Light green highlight with the normal dark ink — white text on a 45% green
   wash over white was ~1.9:1. */
::selection { background: color-mix(in oklab, var(--gc-green-bright) 28%, transparent); color: var(--gc-text); }

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--gc-container);
  margin-inline: auto;
  padding-inline: var(--gc-gutter);
}
.container--narrow { max-width: var(--gc-container-narrow); }
.container--wide   { max-width: var(--gc-container-wide); }

/* Full-bleed escape inside a constrained page */
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

.section { padding-block: var(--gc-section-y); }
/* Surface ladder: bg → bg-2 → surface — subtle rhythm, no hard blocks */
.section--tint    { background: var(--gc-bg-2); }
.section--surface { background: var(--gc-surface); }
/* Deep-green band. Text must be the on-dark ink, not --gc-text (#1C241A),
   which was near-black on near-black (1.4:1). */
.section--dark    { background: var(--gc-chrome); color: var(--gc-ink-on-dark); }
/* accent-washed band (needs an .accent-* class on the section) */
.section--wash    { background: var(--accent-wash); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: #FFFFFF; }
.section--dark a { color: var(--gc-green-pale); }   /* 9.9:1 — #3E8E2E here was 3.3:1 (fails AA) */
.section--dark p { color: var(--gc-ink-on-dark-soft); }
/* Eyebrows are 13px (small text → AA wants 4.5:1). The default green --accent
   #3E8E2E on this band is only 3.64:1, so use the accent-as-TEXT token, which
   steps green to #2E6B1F (5.75:1 here) and leaves other accents untouched.
   Later .cta-band/.hero eyebrow rules still win on equal specificity. */
.section--surface .eyebrow { color: var(--accent-ink); }

/* 12-col grid backbone (editorial / asymmetric splits) */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }

.section__head { max-width: 60ch; margin-bottom: var(--gc-space-7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { margin-bottom: var(--gc-space-3); }
.section__lead { font-size: var(--gc-fs-lead); color: var(--gc-text-soft); max-width: 46ch; }
.section--dark .section__lead { color: var(--gc-ink-on-dark-soft); }
.section__head--center .section__lead { margin-inline: auto; }

.stack > * + * { margin-top: var(--gc-space-4); }
.stack-lg > * + * { margin-top: var(--gc-space-6); }

.grid { display: grid; gap: var(--gc-space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--gc-space-5);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--gc-space-6), 5vw, var(--gc-space-9));
  align-items: center;
}
.split--media-right > .split__media { order: 2; }
/* editorial 7/5 + 5/7 splits (premium asymmetry) */
.split--7-5 { grid-template-columns: 7fr 5fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }

/* Sticky media, scrolling text — one signature pin per page */
.sticky-media { position: sticky; top: clamp(5rem, 12vh, 8rem); align-self: start; }

.flow-center { display: flex; flex-direction: column; align-items: center; text-align: center; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.text-center { text-align: center; }
.text-soft { color: var(--gc-text-soft); }
.text-accent { color: var(--accent); }
.measure { max-width: var(--gc-measure); }
.measure-center { max-width: var(--gc-measure); margin-inline: auto; }

/* Rounded / softened media */
.media-round   { border-radius: var(--gc-radius); overflow: hidden; }
.media-round-lg { border-radius: var(--gc-radius-lg); overflow: hidden; }
.media-oval    { border-radius: 999px / 45%; overflow: hidden; }
.media-cover   { width: 100%; height: 100%; object-fit: cover; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
/* Unify mismatched clinic photos toward the brand hue */
.img-unify { position: relative; }
.img-unify::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* photo scrim only (never a section/chrome background) — retinted from the
     old indigo rgb(15 15 46) to the brand's green-black */
  background: linear-gradient(180deg, transparent 40%, rgb(12 28 8 / .35));
  mix-blend-mode: multiply;
}

/* --- Accent-variety utilities ----------------------------------------
   Each class re-declares --accent-wash / --accent-hair too: derived tokens
   declared only at :root are substituted once (with :root's --accent) and
   then inherit frozen, so overriding --accent alone would NOT re-tint the
   wash/hair. Re-declaring them here (same block as --accent) makes them
   recompute against the local accent. */
.accent-blue,
.accent-green,
.accent-red,
.accent-yellow,
.accent-indigo,
.accent-navy {
  --accent-wash: color-mix(in oklab, var(--accent) 14%, transparent);
  --accent-hair: color-mix(in oklab, var(--accent) 55%, var(--gc-line));
  --accent-ink:  var(--accent);   /* non-green accents keep their own hue as text */
}
.accent-blue   { --accent: var(--gc-blue);         --accent-fill: var(--gc-blue-fill);   --accent-glow: var(--gc-blue-glow); }
.accent-green  { --accent: var(--gc-green-bright);  --accent-fill: var(--gc-green-fill);  --accent-glow: var(--gc-green-glow2); --accent-ink: var(--gc-green-ink); }
.accent-red    { --accent: var(--gc-red-bright);    --accent-fill: var(--gc-red-fill);    --accent-glow: var(--gc-red-glow); }
.accent-yellow { --accent: var(--gc-yellow);        --accent-fill: var(--gc-yellow-fill); --accent-glow: var(--gc-yellow-glow); }
/* --gc-indigo is a legacy name remapped to the brand green (#3E8E2E), so these
   take the green ink as text, exactly like .accent-green. */
.accent-indigo,
.accent-navy   { --accent: var(--gc-indigo);        --accent-fill: var(--gc-indigo-fill); --accent-glow: var(--gc-indigo-glow); --accent-ink: var(--gc-green-ink); }

/* ==========================================================================
   4. PREMIUM FINISHES (grain, aurora, glass, gradients)
   ========================================================================== */

/* Grain / noise — kills banding on big gradients + adds atmosphere */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .05; mix-blend-mode: overlay;
  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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Aurora — dark-theme decorative blobs. Retired for the light theme: the
   indigo/blue stops were the last purple in the sheet and it is not used by
   any of the 20 pages. Kept as a no-op so any stray markup stays invisible. */
.aurora { display: none; }

/* Gradient bands */
.grad-hero { background: var(--grad-hero); }
.grad-cta  { background: var(--grad-cta); }

/* Glass — nav / quick-actions / chat / hero pills ONLY */
.glass {
  background: var(--gc-glass-bg);
  -webkit-backdrop-filter: var(--gc-glass-blur);
          backdrop-filter: var(--gc-glass-blur);
  border: 1px solid var(--gc-line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 20px 44px -16px rgb(0 0 0 / .6);
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- Eyebrow (accent, uppercase, tracked) ----------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--gc-font-head);
  font-weight: 800;
  font-size: var(--gc-fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--gc-space-3);
}

/* --- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gc-space-2);
  min-height: 42px;
  padding: 0.55rem 1.2rem;
  border-radius: var(--gc-radius-pill);
  font-family: var(--gc-font-head);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out-quart),
              border-color 180ms var(--ease-out-quart),
              color 180ms var(--ease-out-quart),
              box-shadow 180ms var(--ease-out-quart),
              transform 180ms var(--ease-out-quart);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); } /* tactile press */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gc-bg), 0 0 0 4px var(--gc-focus);
}
.btn__icon { width: 1.15em; height: 1.15em; flex: none; }

/* Primary — the "act" colour: solid raspberry fill, white text.
   OPAQUE ON PURPOSE. This was a 16%-alpha raspberry wash with #C01D45 ink,
   which made the contrast depend on whatever happened to sit behind it:
   4.69:1 on the white page floor (pass), but 4.19:1 on --gc-surface in the
   mobile drawer, 3.78:1 on the green panel on /contact/, and 2.14:1 on the
   deep-green .cta-band — all AA failures at 16-17px/800. An opaque fill is
   4.64:1 against its own white text in EVERY context, so the CTA can no
   longer be broken by its surroundings. It also matches the brand brief,
   which specifies #DF2456 as a CTA *fill* — the wash was a drift from that. */
.btn--primary {
  background: var(--gc-red-fill);
  color: #fff;
  border-color: var(--gc-red-fill);
}
.btn--primary:hover {
  background: var(--gc-red-bright);   /* #C01D45 — steps darker, 5.99:1 */
  border-color: var(--gc-red-bright);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgb(44 110 158 / .4);
}
.btn--primary:active { transform: scale(0.97); }

/* Dark-context boundary. The fill is AA against its own text anywhere, but
   #DF2456 on #14351A is only 2.91:1 edge-against-background — under the 3:1
   WCAG 1.4.11 asks for a control's boundary. A white hairline gives the pill
   a readable edge on the deep-green bands. Placed after :hover (equal
   specificity) so the edge survives hover too. */
.cta-band .btn--primary,
.section--dark .btn--primary {
  border-color: #fff;
}
/* On the solid-raspberry band the pill would be raspberry-on-raspberry, i.e.
   invisible. Invert it there: white fill, raspberry ink (5.99:1). */
.cta-band--red .btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--gc-red-bright);
}
.cta-band--red .btn--primary:hover {
  background: var(--gc-red-bright);
  border-color: #fff;
  color: #fff;
}

/* Ghost — dark ink + visible hairline on the LIGHT page. The old
   rgb(255 255 255 / .28) border was white-on-white (invisible outline). */
.btn--ghost {
  background: rgb(62 142 46 / .10);
  color: var(--gc-text);
  border-color: var(--gc-border-strong);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-hair), 0 12px 40px -14px var(--accent-glow);
}

/* On-dark — white outline; fills white with navy text on hover */
.btn--on-dark {
  background: transparent;
  color: #fff;
  border-color: rgb(255 255 255 / .55);
}
.btn--on-dark:hover {
  background: #fff;
  color: var(--gc-chrome);   /* was var(--gc-bg) — which is now #FFFFFF, i.e. white on white */
  border-color: #fff;
}

/* Solid green — bright green fill with navy text (AA 10:1; never white) */
.btn--green {
  background: rgb(62 142 46 / .14);
  color: var(--gc-green-bright);
  border-color: var(--gc-green-bright);
}
.btn--green:hover {
  background: var(--gc-green-fill);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 40px -14px var(--gc-green-glow);
}

.btn--lg { min-height: 48px; padding: 0.7rem 1.5rem; font-size: 1rem; }
.btn--sm { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.9375rem; }
.btn--block { display: flex; width: 100%; }

/* Plain text arrow link */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--gc-space-2);
  font-family: var(--gc-font-head); font-weight: 700;
  color: var(--gc-green-ink); text-decoration: none;
}
.link-arrow::after {
  content: ""; width: 1.1em; height: 1.1em; flex: none;
  background: currentColor;
  -webkit-mask: var(--gc-icon-arrow) center / contain no-repeat;
          mask: var(--gc-icon-arrow) center / contain no-repeat;
  transition: transform var(--gc-transition);
}
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: translateX(4px); }
.link-arrow:hover { color: var(--gc-green-dark); }

:root {
  --gc-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Card ------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--grad-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow: var(--gc-shadow-rest);
  transition: transform 220ms var(--ease-out-quart),
              box-shadow 220ms var(--ease-out-quart),
              border-color 220ms var(--ease-out-quart),
              background-color 220ms var(--ease-out-quart);
}
.card__media {
  margin: calc(-1 * clamp(1.25rem, 2vw, 1.75rem)) calc(-1 * clamp(1.25rem, 2vw, 1.75rem)) var(--gc-space-5);
  border-radius: var(--gc-radius) var(--gc-radius) 0 0;
  overflow: hidden;
}
.card__media img { width: 100%; object-fit: cover; }
.card__title { margin-bottom: var(--gc-space-2); color: var(--gc-text); }
.card__text { color: var(--gc-text-soft); }
.card__foot { margin-top: auto; padding-top: var(--gc-space-4); }

/* Optional top accent rule for service cards */
.card--accent-top { position: relative; overflow: hidden; }
.card--accent-top::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent);
}

.card--link { position: relative; }
.card--link .card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link .card__title a { text-decoration: none; color: inherit; }

.card--tint { background: var(--accent-wash); border-color: var(--accent-hair); }
.card--surface { background: var(--gc-surface-2); }
/* keep a card visible when it sits on a same-value surface section */
.section--surface .card { background: var(--gc-surface-2); }

/* --- Icon chip (accent square/circle behind an SVG) ------------------- */
.chip, .icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 0.9rem;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-hair);
  flex: none;
  transition: transform 200ms var(--ease-pop), box-shadow var(--gc-transition);
}
.chip svg, .chip img, .icon-chip svg { width: 1.6rem; height: 1.6rem; stroke: currentColor; }
.chip--sm { width: 2.6rem; height: 2.6rem; border-radius: 0.75rem; }
.chip--sm svg { width: 1.3rem; height: 1.3rem; }
.chip--round { border-radius: 50%; }
.chip--tint { background: var(--accent-wash); color: var(--accent); }
.chip--check { color: var(--gc-green-bright); background: var(--gc-green-tint); border-color: color-mix(in oklab, var(--gc-green-bright) 55%, var(--gc-line)); }

/* --- Pill (tag / label) ----------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--gc-space-2);
  padding: 0.4rem 0.85rem;
  border-radius: var(--gc-radius-pill);
  background: var(--accent-wash);
  color: var(--accent);
  border: 1px solid var(--accent-hair);
  font-family: var(--gc-font-head);
  font-weight: 700;
  font-size: var(--gc-fs-small);
  text-decoration: none;
  transition: background-color var(--gc-transition), border-color var(--gc-transition), color var(--gc-transition);
}
a.pill:hover, a.pill:focus-visible {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.pill--outline { background: transparent; border-color: var(--gc-border-strong); color: var(--gc-text); }

/* --- Stat (big numeral + label) --------------------------------------- */
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--gc-font-head);
  font-weight: 900;
  font-size: var(--gc-fs-stat);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.stat__label { display: block; margin-top: var(--gc-space-2); font-weight: 600; color: var(--gc-text-soft); }
.section--dark .stat__num { color: var(--gc-green-pale); }
.section--dark .stat__label { color: var(--gc-ink-on-dark-soft); }

/* --- CTA band (solid deep green by default; solid raspberry variant) --- */
.cta-band {
  position: relative;
  isolation: isolate;
  background: var(--grad-cta);
  color: var(--gc-ink-on-dark);
  text-align: center;
  overflow: hidden;
}
.cta-band--red { background: var(--gc-red-fill); }   /* solid raspberry — was a 120deg gradient */
.cta-band__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gc-space-5);
  padding-block: var(--gc-section-y);
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: rgb(255 255 255 / .88); max-width: 55ch; margin-inline: auto; }
.cta-band .eyebrow { color: #fff; opacity: .9; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--gc-space-4); justify-content: center; align-items: center; }
.cta-band__phone { color: #fff; font-family: var(--gc-font-head); font-weight: 800; font-size: 1.25rem; text-decoration: none; }
.cta-band__phone:hover { color: #fff; text-decoration: underline; }

/* --- Quick actions (glass bar, 4 tiles) ------------------------------- */
.quick-actions {
  background: var(--gc-glass-bg);
  -webkit-backdrop-filter: var(--gc-glass-blur);
          backdrop-filter: var(--gc-glass-blur);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-lg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 20px 44px -16px rgb(0 0 0 / .6);
  padding: var(--gc-space-3);
}
.quick-actions__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gc-space-2); }
.quick-action {
  display: flex; flex-direction: column; align-items: center; gap: var(--gc-space-3);
  padding: var(--gc-space-5) var(--gc-space-3);
  border-radius: var(--gc-radius);
  text-align: center; text-decoration: none;
  color: var(--gc-text);
  transition: background-color var(--gc-transition), transform var(--gc-transition);
}
.quick-action:hover, .quick-action:focus-visible { background: var(--gc-surface-2); color: var(--gc-text); }
.quick-action__label { font-family: var(--gc-font-head); font-weight: 700; font-size: var(--gc-fs-small); line-height: 1.25; }
.quick-actions--overlap { margin-top: calc(-1 * var(--gc-space-8)); position: relative; z-index: 5; }

/* --- Carousel --------------------------------------------------------- */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: var(--gc-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--gc-space-2);
  padding-inline: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--gc-border-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.carousel__track > * { scroll-snap-align: start; flex: 0 0 clamp(260px, 80%, 380px); }
@media (min-width: 640px) { .carousel__track > * { flex-basis: clamp(300px, 45%, 400px); } }
@media (min-width: 1024px) { .carousel__track > * { flex-basis: clamp(320px, 31%, 420px); } }
.carousel__track::-webkit-scrollbar { height: 8px; }
.carousel__track::-webkit-scrollbar-thumb { background: var(--gc-border-strong); border-radius: 999px; }
.carousel__controls { display: flex; gap: var(--gc-space-3); justify-content: flex-end; margin-top: var(--gc-space-4); }
.carousel__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gc-surface);
  border: 1.5px solid var(--gc-border-strong);
  color: var(--gc-text);
  transition: background-color var(--gc-transition), color var(--gc-transition), border-color var(--gc-transition), transform var(--gc-transition);
}
.carousel__btn:hover:not(:disabled), .carousel__btn:focus-visible {
  background: var(--accent-fill); border-color: var(--accent); color: #fff;
}
.carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel__btn svg { width: 1.4rem; height: 1.4rem; }

/* --- Testimonial ------------------------------------------------------ */
.testimonial {
  background: var(--grad-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--gc-shadow-rest);
}
.testimonial__quote { font-size: 1.125rem; color: var(--gc-text); max-width: none; }
.testimonial__quote::before { content: "\201C"; color: var(--accent); }
.testimonial__quote::after  { content: "\201D"; color: var(--accent); }
.testimonial__cite { margin-top: var(--gc-space-4); font-style: normal; font-weight: 700; color: var(--gc-green-ink); }
.testimonial__meta { display: block; font-weight: 400; color: var(--gc-text-soft); }

/* --- FAQ (native details/summary) ------------------------------------- */
.faq { max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--gc-line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-4);
  padding: var(--gc-space-5) 0;
  font-family: var(--gc-font-head); font-weight: 700; font-size: var(--gc-fs-h4);
  color: var(--gc-text); cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; width: 1.25rem; height: 1.25rem; flex: none;
  background: var(--accent);
  -webkit-mask: var(--gc-icon-plus) center / contain no-repeat;
          mask: var(--gc-icon-plus) center / contain no-repeat;
  transition: transform var(--gc-transition);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--accent); }
.faq__answer { padding-bottom: var(--gc-space-5); color: var(--gc-text-soft); }
.faq__answer > * { max-width: var(--gc-measure); }

:root {
  --gc-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size var(--gc-transition-slow), content-visibility var(--gc-transition-slow) allow-discrete;
    }
    .faq__item[open]::details-content { block-size: auto; }
  }
}

/* --- Forms ------------------------------------------------------------ */
.form { max-width: var(--gc-container-narrow); }
.field { margin-bottom: var(--gc-space-5); }
.field__label, .form label {
  display: block;
  font-family: var(--gc-font-head); font-weight: 700; font-size: var(--gc-fs-small);
  color: var(--gc-text);
  margin-bottom: var(--gc-space-2);
}
.field__req { color: var(--gc-red-bright); }
.field__hint { display: block; font-weight: 400; color: var(--gc-text-soft); margin-top: var(--gc-space-1); }

.input, .select, .textarea,
.form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1rem;
  background: rgb(255 255 255 / .04);
  color: var(--gc-text);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-sm);
  transition: border-color 160ms var(--ease-out-quart), box-shadow 160ms var(--ease-out-quart), background-color 160ms;
}
.textarea, .form textarea { min-height: 130px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus,
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--gc-focus);
  background: rgb(255 255 255 / .06);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gc-focus) 30%, transparent);
}
.input::placeholder, .textarea::placeholder, .form input::placeholder, .form textarea::placeholder {
  color: color-mix(in oklab, var(--gc-text-soft) 70%, transparent);
}
.select, .form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23C3C6E8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.15rem;
  padding-right: 2.75rem;
}
.field--invalid .input, .field--invalid .select, .field--invalid .textarea,
.form :is(input, select, textarea):user-invalid { border-color: var(--gc-red-bright); }

/* Chip/tile radio group */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gc-space-3); }
.choice {
  position: relative; display: flex; align-items: center; gap: var(--gc-space-3);
  padding: var(--gc-space-4);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  background: rgb(255 255 255 / .03);
  color: var(--gc-text);
  cursor: pointer; font-weight: 700;
  transition: border-color var(--gc-transition), background-color var(--gc-transition);
}
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice:hover { border-color: var(--accent-hair); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); color: var(--gc-text); }
.choice:has(input:focus-visible) { outline: 2px solid var(--gc-focus); outline-offset: 2px; }

/* Honeypot */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Inline form status */
.form-status { border-radius: var(--gc-radius); padding: var(--gc-space-5); margin-top: var(--gc-space-4); border: 1px solid transparent; }
.form-status[hidden] { display: none !important; }
.form-status--success {
  background: color-mix(in oklab, var(--gc-green-bright) 14%, transparent);
  border-color: color-mix(in oklab, var(--gc-green-bright) 55%, var(--gc-line));
  color: var(--gc-text);
}
.form-status--error {
  background: color-mix(in oklab, var(--gc-red-bright) 16%, transparent);
  border-color: color-mix(in oklab, var(--gc-red-bright) 55%, var(--gc-line));
  color: var(--gc-text);
}
/* inherit, not #fff — .form-status sits on a pale green/red wash over white,
   so a white title was invisible. */
.form-status__title { font-family: var(--gc-font-head); font-weight: 800; margin-bottom: var(--gc-space-2); color: inherit; }

/* ==========================================================================
   6. GLOBAL CHROME (dark)
   ========================================================================== */

/* --- Top services bar (the "slim colored bar" — differentiated) ------- */
/* SOLID deep green (#14351A). This was a 90deg gradient from the near-white
   --gc-bg-2 to --gc-chrome, which made the left half of the bar near-white —
   so `.topbar a:hover { color:#fff }` was white-on-white, while the phone
   number's #fff sat on green. One solid chrome colour fixes both ends. */
.topbar {
  background: var(--gc-chrome);
  border-bottom: 1px solid color-mix(in oklab, var(--gc-green-bright) 45%, transparent);
  color: var(--gc-ink-on-dark-soft);
  font-size: var(--gc-fs-small);
}
.topbar__inner {
  display: flex; align-items: center; gap: var(--gc-space-5);
  min-height: var(--gc-topbar-h);
  max-width: var(--gc-container); margin-inline: auto; padding-inline: var(--gc-gutter);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.topbar__inner::-webkit-scrollbar { display: none; }
.topbar__links { display: flex; align-items: center; gap: var(--gc-space-5); list-style: none; margin: 0; padding: 0; }
.topbar__label { font-weight: 800; font-family: var(--gc-font-head); color: var(--gc-green-pale); letter-spacing: .02em; }
.topbar a { color: var(--gc-ink-on-dark-soft); text-decoration: none; font-weight: 600; }
.topbar a:hover, .topbar a:focus-visible { color: #fff; text-decoration: underline; }
.topbar__phone {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--gc-space-2);
  color: #fff !important; font-weight: 800 !important; font-family: var(--gc-font-head);
}
.topbar__phone svg { width: 1rem; height: 1rem; }

/* --- Sticky nav (dark glass) ------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 100; }
.nav {
  background: var(--gc-glass-bg);
  -webkit-backdrop-filter: var(--gc-glass-blur);
          backdrop-filter: var(--gc-glass-blur);
  border-bottom: 1px solid var(--gc-line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
  transition: box-shadow var(--gc-transition), background-color var(--gc-transition);
}
.nav__inner {
  display: flex; align-items: center; gap: var(--gc-space-5);
  min-height: var(--gc-nav-h);
  max-width: var(--gc-container); margin-inline: auto; padding-inline: var(--gc-gutter);
  transition: min-height var(--gc-transition);
}
.nav.is-scrolled { box-shadow: var(--gc-shadow-nav); background: rgb(255 255 255 / .88); }
.nav.is-scrolled .nav__inner { min-height: var(--gc-nav-h-sm); }
.nav.is-scrolled .nav__logo img { height: 40px; }

.nav__logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
/* Light theme → use the full-color logo (nav is light) */
.nav__logo img {
  height: 48px; width: auto;
  content: url("/assets/img/gc-logo.png");
  transition: height var(--gc-transition);
}

.nav__menu { display: flex; align-items: center; gap: var(--gc-space-2); list-style: none; margin: 0 auto 0 var(--gc-space-4); padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--gc-space-1);
  padding: var(--gc-space-3);
  border-radius: var(--gc-radius-sm);
  font-family: var(--gc-font-head); font-weight: 700; font-size: 1.0625rem;
  color: var(--gc-text); text-decoration: none; white-space: nowrap;
  transition: color var(--gc-transition), background-color var(--gc-transition);
}
.nav__link:hover, .nav__link:focus-visible,
.nav__item:hover > .nav__link, .nav__item:focus-within > .nav__link { color: var(--gc-indigo); }
.nav__link[aria-current="page"] { color: var(--gc-indigo); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--gc-space-3); right: var(--gc-space-3);
  bottom: 8px; height: 2px; background: var(--gc-indigo); border-radius: 2px;
}
.nav__caret { width: 1em; height: 1em; transition: transform var(--gc-transition); }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.nav__actions { display: flex; align-items: center; gap: var(--gc-space-3); flex: none; }
.nav__phone {
  display: inline-flex; align-items: center; gap: var(--gc-space-2);
  font-family: var(--gc-font-head); font-weight: 800;
  color: var(--gc-green-ink); text-decoration: none; white-space: nowrap;
}
.nav__phone svg { width: 1.15rem; height: 1.15rem; }
/* The phone already sits in the services topbar directly above, so repeating it
   here was redundant AND pushed the Get Started CTA off the right edge. */
.nav__phone { display: none; }

/* Dropdown menus */
.nav__dropdown {
  position: absolute; top: calc(100% - 4px); left: 0; min-width: 264px;
  background: var(--gc-surface-2);
  -webkit-backdrop-filter: var(--gc-glass-blur);
          backdrop-filter: var(--gc-glass-blur);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  box-shadow: var(--gc-shadow-hover);
  padding: var(--gc-space-2); list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--gc-transition), transform var(--gc-transition), visibility var(--gc-transition);
  z-index: 20;
}
.nav__item:hover > .nav__dropdown, .nav__item:focus-within > .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown a { display: block; padding: var(--gc-space-3) var(--gc-space-4); border-radius: var(--gc-radius-sm); color: var(--gc-text); text-decoration: none; font-weight: 600; }
.nav__dropdown a small { display: block; font-weight: 400; color: var(--gc-text-soft); font-size: var(--gc-fs-small); }
.nav__dropdown a:hover, .nav__dropdown a:focus-visible { background: var(--accent-wash); color: var(--gc-indigo); }
.nav__dropdown a:hover small, .nav__dropdown a:focus-visible small { color: var(--gc-text-soft); }

/* Hamburger */
.nav__toggle { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--gc-radius-sm); color: var(--gc-text); }
.nav__toggle svg { width: 1.75rem; height: 1.75rem; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__backdrop { position: absolute; inset: 0; background: rgb(12 28 8 / .6); opacity: 0; transition: opacity var(--gc-transition); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 400px);
  background: var(--gc-surface);
  border-left: 1px solid var(--gc-line);
  box-shadow: var(--gc-shadow-hover);
  padding: var(--gc-space-6) var(--gc-space-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--gc-transition-slow);
  display: flex; flex-direction: column; gap: var(--gc-space-4);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gc-space-2); }
.drawer__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gc-radius-sm); color: var(--gc-text); }
.drawer__close svg { width: 1.6rem; height: 1.6rem; }
.drawer__nav { list-style: none; margin: 0; padding: 0; }
.drawer__nav > li { border-bottom: 1px solid var(--gc-line); }
.drawer__nav a, .drawer__nav summary {
  display: block; padding: var(--gc-space-4) var(--gc-space-2);
  font-family: var(--gc-font-head); font-weight: 700; font-size: 1.125rem;
  color: var(--gc-text); text-decoration: none; cursor: pointer;
}
.drawer__nav a:hover, .drawer__nav summary:hover { color: var(--gc-indigo); }
.drawer__nav details summary { display: flex; align-items: center; justify-content: space-between; list-style: none; }
.drawer__nav details summary::-webkit-details-marker { display: none; }
.drawer__nav details summary::after {
  content: ""; width: 1.1rem; height: 1.1rem; background: var(--gc-indigo);
  -webkit-mask: var(--gc-icon-plus) center / contain no-repeat;
          mask: var(--gc-icon-plus) center / contain no-repeat;
  transition: transform var(--gc-transition);
}
.drawer__nav details[open] summary::after { transform: rotate(45deg); }
.drawer__sub { list-style: none; margin: 0 0 var(--gc-space-3); padding: 0 0 0 var(--gc-space-4); }
.drawer__sub a { font-size: 1rem; font-weight: 600; color: var(--gc-text-soft); padding-block: var(--gc-space-3); }
.drawer__cta { margin-top: var(--gc-space-4); }

/* Footer */
/* Deep-green footer. Every colour below is the ON-DARK ink: the sheet used to
   reuse --gc-text-soft (#545A52), which is only 1.9:1 on #14351A — the whole
   footer was dark grey on dark green. */
.site-footer {
  position: relative;
  background: var(--gc-chrome);
  color: var(--gc-ink-on-dark-soft);
  border-top: 1px solid var(--gc-line);
  padding-block: var(--gc-space-9) var(--gc-space-6);
}
/* restrained multi-colour paint signature (echoes the logo) — once, small */
.site-footer::before {
  content: ""; position: absolute; top: 0; right: clamp(1rem, 5vw, 4rem);
  width: min(320px, 60vw); height: 46px;
  transform: translateY(-50%);
  background: image-set(url("/assets/img/gc-paint-blue.png") 1x) center/contain no-repeat;
  opacity: .0; pointer-events: none;
}
.site-footer a { color: var(--gc-ink-on-dark-soft); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gc-space-7); }
.footer__brand { max-width: 34ch; }
.footer__logo img { height: 44px; width: auto; margin-bottom: var(--gc-space-4); }
.footer__tagline { color: var(--gc-ink-on-dark-soft); }
.footer__col h3 { color: #fff; font-size: 1.0625rem; margin-bottom: var(--gc-space-4); letter-spacing: .01em; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--gc-space-3); }
.footer__nap { font-style: normal; margin-bottom: var(--gc-space-4); }
.footer__nap strong { color: #fff; font-family: var(--gc-font-head); display: block; }
.footer__nap span { color: var(--gc-ink-on-dark-soft); display: block; font-size: var(--gc-fs-small); }
.footer__social { display: flex; gap: var(--gc-space-3); margin-top: var(--gc-space-4); }
.footer__social a {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; color: var(--gc-ink-on-dark-soft);
  transition: background-color var(--gc-transition), color var(--gc-transition), border-color var(--gc-transition);
}
.footer__social a:hover { background: rgb(255 255 255 / .10); color: var(--gc-green-pale); border-color: var(--gc-green-pale); }
.footer__social svg { width: 1.25rem; height: 1.25rem; }
.footer__bottom {
  margin-top: var(--gc-space-8); padding-top: var(--gc-space-5);
  border-top: 1px solid rgb(255 255 255 / .14);   /* --gc-line is a dark hairline: invisible on deep green */
  display: flex; flex-wrap: wrap; gap: var(--gc-space-3) var(--gc-space-5);
  align-items: center; justify-content: space-between;
  font-size: var(--gc-fs-small); color: var(--gc-ink-on-dark-soft);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--gc-space-4); }

/* Mobile bottom bar */
.mobilebar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  gap: 1px; background: var(--gc-line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 30px -12px rgb(0 0 0 / .7);
}
.mobilebar a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--gc-space-2);
  min-height: var(--gc-mobilebar-h);
  font-family: var(--gc-font-head); font-weight: 800; font-size: 1.0625rem; text-decoration: none;
}
.mobilebar svg { width: 1.25rem; height: 1.25rem; }
.mobilebar__call { background: var(--gc-chrome); color: #fff; }
.mobilebar__start { background: var(--gc-red-fill); color: #fff; }

/* ==========================================================================
   7. HERO (full-bleed video, dark 4-layer scrim)
   ========================================================================== */
/* Clean LIGHT split hero: dark text on white, contained side photo, no scrim/gradient.
   NOTE: .hero__media is a SIBLING of .hero__inner in the markup, so .hero itself
   must be the grid container (not .hero__inner), or the photo goes full-width. */
.hero:not(.flow) {
  position: relative; background: var(--gc-bg);
  max-width: var(--gc-container); margin-inline: auto;
  padding-inline: var(--gc-gutter); padding-block: clamp(2rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.hero:not(.flow) .hero__media {
  position: static; z-index: auto; order: 2; min-width: 0;
  border-radius: var(--gc-radius); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--gc-shadow-rest);
}
.hero:not(.flow) .hero__media img, .hero:not(.flow) .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero:not(.flow) .hero__media::after { display: none; }   /* no colour wash */
.hero:not(.flow) .hero__scrim { display: none; }          /* no dark scrim */
.hero:not(.flow) .hero__blob { display: none; }           /* no decorative glow */
.hero:not(.flow) .hero__inner {
  order: 1; min-width: 0;
  max-width: none; margin-inline: 0; padding-inline: 0; padding-block: 0;
  display: block; min-height: 0;
}
.hero__content { max-width: none; }
.hero__title { margin-bottom: var(--gc-space-4); }
.hero__title .hero__brand {
  display: block; color: var(--gc-green-ink);
  font-size: clamp(2.2rem, 5vw, 3.75rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02;
}
.hero__title .hero__sub {
  display: block; color: var(--gc-text); font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700;
  margin-top: var(--gc-space-3); letter-spacing: -0.01em;
}
.hero__lead { font-size: var(--gc-fs-lead); color: var(--gc-text-soft); margin-bottom: var(--gc-space-6); max-width: 48ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--gc-space-4); }
.hero .eyebrow { color: var(--gc-green-ink); }
@media (max-width: 800px){ .hero:not(.flow){ grid-template-columns: 1fr; } .hero:not(.flow) .hero__media{ order: -1; } }

/* decorative accent glow behind content (motion-gated parallax below) */
.hero__blob {
  position: absolute; z-index: -2;
  width: clamp(260px, 34vw, 520px); aspect-ratio: 1;
  right: -8%; top: 6%;
  background: radial-gradient(circle at 30% 30%, var(--gc-indigo-glow), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* ==========================================================================
   8. EFFECTS (all motion opt-in / a11y-gated)
   ========================================================================== */

/* Scroll-reveal — DEFAULT state is fully visible (opt-in motion) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: gc-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    .reveal--up    { --gc-reveal-from: translateY(28px); }
    .reveal--left  { --gc-reveal-from: translateX(-28px); }
    .reveal--right { --gc-reveal-from: translateX(28px); }
    @keyframes gc-reveal {
      from { opacity: 0; transform: var(--gc-reveal-from, translateY(28px)); }
      to   { opacity: 1; transform: none; }
    }
    .reveal-group > *, .stagger > * {
      animation: gc-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
    /* small stagger — set style="--i:0/1/2..." on children */
    .reveal-group > *, .stagger > * { animation-delay: calc(var(--i, 0) * 60ms); }
  }

  /* hero blob parallax */
  @supports (animation-timeline: scroll()) {
    .hero__blob {
      animation: gc-blob-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    @keyframes gc-blob-drift {
      from { transform: translateY(0) scale(1); }
      to   { transform: translateY(70px) scale(1.12); }
    }
  }
}

/* Card hover: lift + surface step-up + branded accent glow (interaction only) */
@media (prefers-reduced-motion: no-preference) {
  .card:hover, .card:focus-within {
    transform: translateY(-6px);
    background: var(--gc-surface-2);
    border-color: var(--accent-hair);
    box-shadow: 0 24px 50px -16px rgb(0 0 0 / .6),
                0 0 0 1px var(--accent-hair),
                0 12px 40px -12px var(--accent-glow);
  }
  .card:hover .chip, .card:focus-within .chip,
  .card:hover .icon-chip, .card:focus-within .icon-chip { transform: scale(1.08); }
  .quick-action:hover, .quick-action:focus-within { transform: translateY(-2px); }
}
/* Under reduced motion, keep a non-moving hover cue */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .card:focus-within {
    background: var(--gc-surface-2);
    border-color: var(--accent-hair);
    box-shadow: var(--gc-shadow-hover), 0 0 0 1px var(--accent-hair);
  }
}

/* The reduced-motion contract */
@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;
  }
}

/* Glass fallbacks — solid when transparency reduced or unsupported */
@media (prefers-reduced-transparency: reduce) {
  .nav, .nav.is-scrolled, .quick-actions, .glass, .nav__dropdown {
    background: #14143A;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .quick-actions, .glass, .nav__dropdown { background: rgb(255 255 255 / .98); }
}

/* ==========================================================================
   9. CONTENT-PAGE DARK RECONCILIATION
   A handful of page-scoped inline styles reference tokens that inverted
   meaning on dark. These 20 content pages cannot be edited, so the shared
   sheet reconciles them here with just-enough specificity. (Reported.)
   ========================================================================== */
/* Step-number circles used dark text on a green fill (now off-white on green,
   which fails). Repaint to bright-green fill + navy text (AA 10:1). */
.step .step__num,
.gs-timeline .gs-timeline__num,
.ins-steps.ins-steps li::before {
  background: var(--gc-green-bright) !important;
  color: var(--gc-bg) !important;
}
/* Careers application card was a white panel (var(--gc-white)); make it a
   dark surface so the (now off-white) form text stays readable. */
.cr-apply .cr-apply__form {
  background: var(--gc-surface);
  border-color: var(--gc-line);
  box-shadow: var(--gc-shadow-rest);
}
/* Careers hero accent word → bright accent (was ink-green, still fine, but
   keep it on the bright ramp for consistency). */
.cr-accent { color: var(--gc-indigo); }

/* ==========================================================================
   10. RESPONSIVE (mobile-first; 640 / 760 / 900 / 1024)
   ========================================================================== */
@media (max-width: 1023px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .split--7-5, .split--5-7 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .split, .split--7-5, .split--5-7 { grid-template-columns: 1fr; }
  .split--media-right > .split__media { order: 0; }
  .sticky-media { position: static; }
  .quick-actions__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--gc-space-6); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .cta-band__actions { flex-direction: column; width: 100%; }
  .cta-band__actions .btn { width: 100%; }
  .hero__inner { min-height: 0; }
}
@media (max-width: 640px) {
  .quick-actions__grid { grid-template-columns: 1fr 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}

@media (max-width: 900px) {
  .nav__menu { display: none; }
  .nav__phone { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__menu { margin-left: auto; }
}
@media (min-width: 901px) { .drawer { display: none; } }

@media (max-width: 760px) {
  .mobilebar { display: flex; }
  body { padding-bottom: calc(var(--gc-mobilebar-h) + env(safe-area-inset-bottom)); }
  .site-footer { margin-bottom: 0; }
  /* mobile → poster only for the hero video */
  .hero__media video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media video { display: none; }
}

@media (max-width: 480px) { .nav__actions .btn--primary { display: none; } }

/* ==========================================================================
   11. PRINT
   ========================================================================== */
@media print {
  .topbar, .site-header, .drawer, .mobilebar, .cta-band, .carousel__controls { display: none !important; }
  body { padding: 0; color: #000; background: #fff; background-image: none; }
  a { color: #000; text-decoration: underline; }
}

/* Intake routing result (replaces the form after a successful submit) */
.gc-intake-done { padding: var(--gc-space-2) 0; }
.gc-intake-done h3 { margin: var(--gc-space-2) 0 var(--gc-space-3); color: var(--gc-text); }
.gc-intake-done p { color: var(--gc-text-soft); }
.gc-intake-next { margin-top: var(--gc-space-5); color: var(--gc-text) !important; }
.gc-intake-done ol { margin: var(--gc-space-2) 0 0 1.1rem; color: var(--gc-text-soft); }
.gc-intake-done ol li { margin-bottom: .4rem; }
.gc-intake-call { margin-top: var(--gc-space-5); font-weight: 600; }

/* ============================================================
   gc-accent-system-v2 — logo-palette text accents
   Yellow #FBD209 is a HIGHLIGHT, never a text colour on white
   (it measures ~1.4:1). It is used as underline / rule / chip
   behind dark text. Blue and green carry the coloured type.
   ============================================================ */

/* Kickers alternate blue as the default voice; green stays available. */
.eyebrow { color: var(--gc-blue-fill); }
.eyebrow--green { color: var(--gc-green-ink); }
.eyebrow--ink   { color: var(--gc-text); }

/* Headline accent words — the phrase that should catch the eye. */
.accent-blue-text  { color: var(--gc-blue-fill); }
.accent-green-text { color: var(--gc-green-ink); }

/* Yellow marker: dark text sitting on a soft yellow wash (11.8:1) —
   this is how yellow reads as brand colour without failing contrast. */
.mark-yellow {
  background: linear-gradient(180deg, transparent 58%, rgb(251 218 10 / .55) 58%);
  color: var(--gc-text);
  padding: 0 .12em;
}
/* Yellow underline for a heading, echoing the logo's brush strokes. */
.rule-yellow { position: relative; }
.rule-yellow::after {
  content: ""; display: block; width: 3.25rem; height: 4px; margin-top: .6rem;
  background: #2C6E9E; border-radius: 2px;
}
/* Small yellow chip: dark ink on yellow, AA-safe. */
.chip--yellow { background: #FBD209; color: #1C241A; }

/* ============================================================
   gc-topbar-oneline — keep the services bar on ONE line.
   Fluid type + tightened gaps let all five services + the phone
   fit without wrapping; below ~900px the bar scrolls sideways
   (it already has overflow-x + hidden scrollbars) rather than
   stacking into a second row.
   ============================================================ */
.topbar__inner {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: clamp(.55rem, 1.6vw, 1.5rem);
  font-size: clamp(.72rem, .38vw + .62rem, .8125rem);
}
.topbar__links {
  flex-wrap: nowrap;
  gap: clamp(.55rem, 1.6vw, 1.5rem);
  min-width: 0;
}
.topbar__links a { white-space: nowrap; }
.topbar__label { flex: none; white-space: nowrap; }
.topbar__phone { flex: none; margin-left: auto; white-space: nowrap; }
/* Reclaim width on tighter desktops before resorting to scroll. */
@media (max-width: 1180px) { .topbar__label { display: none; } }

/* ------------------------------------------------------------------
   Mobile fix: inside a horizontally-scrolling flex row, `margin-left:auto`
   on the phone positions it against the SCROLL VIEWPORT rather than after
   the links, so it sat on top of the service names once the row scrolled.
   On narrow screens let it flow inline at the end of the row instead.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .topbar__inner { gap: 1rem; padding-inline: var(--gc-gutter); }
  .topbar__phone {
    margin-left: 0;           /* stop it detaching from the flow */
    padding-left: 1rem;
    border-left: 1px solid rgb(255 255 255 / .22);
    flex: none;
  }
  .topbar__links { flex: none; }
}

/* ============================================================
   gc-brand-elements — the four logo colours used as SHAPE, not type.
   Rule: yellow and red never carry text on white. They appear as
   bars, chips, rules and splashes. Any label sitting ON them uses
   navy ink (#262462) or white, whichever passes AA.
   True logo values: green #78C042 · blue #388ECC · yellow #FBD209
   · red #D3284E · navy #262462
   ============================================================ */

/* Accent bar across the top of a card — cycles the brand palette. */
.card--bar { position: relative; overflow: hidden; }
.card--bar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--bar, #388ECC);
}
.bar-green  { --bar: #78C042; }
.bar-blue   { --bar: #388ECC; }
.bar-yellow { --bar: #FBD209; }
.bar-red    { --bar: #D3284E; }
.bar-navy   { --bar: #262462; }

/* Numbered/step chips — solid brand fill with AA-safe ink on top. */
.chip-brand {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  font-family: var(--gc-font-head); font-weight: 800; font-size: 1.15rem;
}
.chip-green  { background: #78C042; color: #14351A; }   /* 6.6:1 */
.chip-blue   { background: #388ECC; color: #FFFFFF; }   /* 4.6:1 */
.chip-yellow { background: #FBD209; color: #262462; }   /* 9.9:1 — navy ink, never white */
.chip-red    { background: #D3284E; color: #FFFFFF; }   /* 5.2:1 */
.chip-navy   { background: #262462; color: #FFFFFF; }   /* 13.9:1 */

/* Brush-stroke divider using the real logo paint graphics. */
.splash-divider {
  height: 26px; margin: var(--gc-space-6) 0;
  background-repeat: no-repeat; background-position: left center;
  background-size: auto 100%; opacity: .9;
}
.splash-yellow { background-image: url("/assets/img/gc-paint-yellow.png"); }
.splash-green  { background-image: url("/assets/img/gc-paint-green.png"); }
.splash-blue   { background-image: url("/assets/img/gc-paint-blue.png"); }
.splash-red    { background-image: url("/assets/img/gc-paint-red.png"); }

/* Thin brand rule under a heading (shape, not text). */
.rule-brand::after {
  content: ""; display: block; width: 3.25rem; height: 4px;
  margin-top: .6rem; border-radius: 2px; background: var(--bar, #388ECC);
}

/* ============================================================
   gc-nav-actions-tighten — smaller nav CTA + hamburger, both
   right-aligned and vertically centred in the bar.
   ============================================================ */
.nav__actions {
  margin-left: auto;              /* push the group to the right edge */
  align-items: center;            /* vertically centre against the logo */
  gap: var(--gc-space-2);
}
/* Nav Get Started pill: smaller than a body CTA, still solid blue. */
.nav__actions .btn--primary {
  min-height: 36px;
  padding: 0.4rem 0.95rem;
  font-size: 0.85rem;
  border-width: 1px;
}
/* Hamburger: smaller square, centred glyph. */
.nav__toggle {
  width: 40px; height: 40px;
  align-self: center;
  flex: none;
}
.nav__toggle svg { width: 1.35rem; height: 1.35rem; }
@media (max-width: 560px) {
  .nav__actions .btn--primary { padding: 0.35rem 0.8rem; font-size: 0.8rem; min-height: 34px; }
  .nav__toggle { width: 38px; height: 38px; }
}

/* ============================================================
   gc-footer-black — footer only. NOT via --gc-chrome, which the
   services topbar also uses; overriding the token would turn the
   top bar black too. Text shifts from green-tinted to neutral so
   it reads correctly on black.
   ============================================================ */
.site-footer { background: #0D0D0D; }
.site-footer,
.site-footer p,
.site-footer li,
.site-footer address,
.site-footer .footer__tagline,
.site-footer .footer__nap span { color: #D9D9D9; }
.site-footer h3, .site-footer h4, .site-footer strong { color: #FFFFFF; }
.site-footer a { color: #E6E6E6; }
.site-footer a:hover, .site-footer a:focus-visible { color: #6FB8E8; }   /* logo blue, lifted for black */
.site-footer .footer__bottom,
.site-footer .footer__social a { border-color: rgb(255 255 255 / .16); }
.site-footer .footer__bottom { color: #B3B3B3; }