/* =====================================================================
   JUST-IN TIME MOVING — DESIGN SYSTEM v2
   ---------------------------------------------------------------------
   Loaded AFTER site.css. Retokenises the brand layer and upgrades the
   key components. Deliberately additive: every existing class name and
   every one of the 40 section components in inc/sections/ keeps working,
   so no URL, template, or admin-editable field changes.

   WCAG NOTE — the reason this file exists at all:
   the previous brand accent (#00B9E7) scores 2.19:1 on white. That is a
   failure at every text size, and it was being used for body-size links.
   The scale below keeps the cyan brand identity for fills, icons and
   large display type, and introduces text-safe variants for anything
   at body size. Never set body copy in --brand-500 or lighter.
   ===================================================================== */

:root {
  /* ---- Brand: cyan (from the logo mark) ---------------------------- */
  --brand-50:  #ecfbff;
  --brand-100: #d6f5fc;
  --brand-200: #a9ebf9;
  --brand-300: #4dd1f5;
  --brand-400: #17c2ee;
  --brand-500: #00b9e7;   /* logo cyan - fills and 24px+ display only */
  --brand-600: #0093ba;   /* 3.9:1  - large text (24px+) */
  --brand-700: #0f6f8c;   /* 5.4:1  - AA body text */
  --brand-800: #0d5568;   /* 7.8:1  - AAA body text */
  --brand-900: #0b3f4d;

  /* ---- Ink: deep navy, the structural dark ------------------------- */
  --ink-50:  #f6f8fa;
  --ink-100: #eceff3;
  --ink-200: #d7dde5;
  --ink-300: #b3becd;
  --ink-400: #7e8da3;
  --ink-500: #566579;
  --ink-600: #3d4a5c;
  --ink-700: #2b3547;
  --ink-800: #1a2130;
  --ink-900: #0f1420;
  --ink-950: #080c14;

  /* ---- Signal: amber. Moving trucks, energy, and the one colour
         that reads instantly against navy. Used for primary CTAs. ---- */
  --signal-300: #fcd34d;
  --signal-400: #fbbf24;
  --signal-500: #f59e0b;
  --signal-600: #d97706;
  --signal-700: #a85908;   /* text-safe on white */

  /* ---- Support ----------------------------------------------------- */
  --success-500: #10b981;
  --success-700: #047857;
  --danger-500:  #ef4444;
  --danger-700:  #b91c1c;

  /* =================================================================
     SEMANTIC ALIASES — these override the PrimaryColors.css layer,
     which is why the whole site re-skins from this one block.
     ================================================================= */
  --color-1: var(--brand-500);
  --color-1-light: var(--brand-300);
  --color-1-lighter: var(--brand-100);
  --color-1-dark: var(--brand-600);
  --color-1-darker: var(--brand-700);

  --color-2: var(--ink-900);
  --color-2-dark: var(--ink-950);
  --color-2-darker: #04060a;

  --accent: var(--brand-500);
  --accent-light: var(--brand-300);
  --accent-dark: var(--brand-600);
  --accent-text: var(--brand-700);        /* NEW - use for any body-size accent text */
  --accent-glow: rgba(0, 185, 231, 0.18);

  --dark: var(--ink-900);
  --dark-deep: var(--ink-950);
  --dark-deeper: #04060a;

  --color-white: #ffffff;
  --color-off-white: var(--ink-50);
  --color-cream: var(--ink-100);
  --color-border: rgba(15, 20, 32, 0.09);
  --color-border-strong: rgba(15, 20, 32, 0.16);
  --color-border-light: rgba(255, 255, 255, 0.16);
  --color-muted: var(--ink-500);
  --color-body-text: var(--ink-700);
  --color-heading: var(--ink-900);

  --overlay-dark: rgba(8, 12, 20, 0.68);
  --overlay-light: rgba(255, 255, 255, 0.82);

  /* ---- Elevation: layered, not muddy ------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 20, 32, .05);
  --shadow-sm: 0 1px 3px rgba(15, 20, 32, .07), 0 1px 2px rgba(15, 20, 32, .04);
  --shadow-md: 0 4px 12px rgba(15, 20, 32, .07), 0 2px 4px rgba(15, 20, 32, .04);
  --shadow-lg: 0 12px 32px rgba(15, 20, 32, .10), 0 4px 8px rgba(15, 20, 32, .04);
  --shadow-xl: 0 24px 56px rgba(15, 20, 32, .13), 0 8px 16px rgba(15, 20, 32, .05);
  --shadow-bloom: 0 8px 32px rgba(0, 185, 231, .28);
  --shadow-signal: 0 8px 28px rgba(245, 158, 11, .32);

  /* ---- Radii ------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-2xl: 36px;
  --r-full: 9999px;

  /* ---- Fluid type scale (clamp: no breakpoint jumps) --------------- */
  --fs-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem  + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem,     0.97rem  + 0.18vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.07rem  + 0.3vw,  1.25rem);
  --fs-xl:   clamp(1.25rem,  1.15rem  + 0.5vw,  1.5rem);
  --fs-2xl:  clamp(1.5rem,   1.32rem  + 0.9vw,  2rem);
  --fs-3xl:  clamp(1.875rem, 1.55rem  + 1.6vw,  2.75rem);
  --fs-4xl:  clamp(2.25rem,  1.7rem   + 2.7vw,  3.75rem);
  --fs-5xl:  clamp(2.75rem,  1.9rem   + 4.2vw,  5rem);

  /* ---- Spacing rhythm --------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Motion ------------------------------------------------------ */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .16s;
  --dur: .28s;
  --dur-slow: .5s;

  --container: 1200px;
  --container-wide: 1400px;
  --container-narrow: 760px;
}

/* =====================================================================
   BASE
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-body-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
  font-weight: 600;
}
h1 { font-size: var(--fs-4xl); letter-spacing: -0.032em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.026em; }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }

p { text-wrap: pretty; }
p, li { max-width: 72ch; }

a { color: var(--accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-800); }

::selection { background: var(--brand-200); color: var(--ink-900); }

:focus-visible {
  outline: 3px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

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

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush { padding-block: 0; }

/* =====================================================================
   TYPOGRAPHIC UTILITIES
   ===================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
}
.eyebrow--on-dark { color: var(--brand-300); }

.lede { font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-600); }
.display { font-size: var(--fs-5xl); letter-spacing: -0.038em; line-height: 1.02; }

/* Gradient headline accent — for a word or two, never a whole heading */
.hl {
  background: linear-gradient(105deg, var(--brand-400) 0%, var(--brand-600) 60%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* fallback for clip-unsupported engines */
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) { .hl { color: var(--brand-700); -webkit-text-fill-color: currentColor; } }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn, .button, a.btn, button.btn {
  --btn-bg: var(--ink-900);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 0.9em 1.65em;
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: .005em;
  line-height: 1.15;
  border-radius: var(--r-full);
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--btn-fg); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

.btn--primary {
  --btn-bg: linear-gradient(135deg, var(--signal-400), var(--signal-600));
  --btn-fg: var(--ink-950);
  box-shadow: var(--shadow-signal);
}
.btn--primary:hover { box-shadow: 0 12px 36px rgba(245,158,11,.42); }

.btn--brand {
  --btn-bg: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  --btn-fg: #fff;
  box-shadow: var(--shadow-bloom);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-bd: var(--color-border-strong);
  box-shadow: none;
}
.btn--ghost:hover { --btn-bd: var(--ink-900); background: var(--ink-50); }

.btn--on-dark {
  --btn-bg: rgba(255,255,255,.08);
  --btn-fg: #fff;
  --btn-bd: rgba(255,255,255,.24);
  backdrop-filter: blur(10px);
  box-shadow: none;
}
.btn--on-dark:hover { --btn-bg: rgba(255,255,255,.16); --btn-bd: rgba(255,255,255,.44); }

.btn--lg { padding: 1.05em 2.1em; font-size: var(--fs-base); }
.btn--sm { padding: .7em 1.25em; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }

/* =====================================================================
   CARDS
   ===================================================================== */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--brand-200); }

/* Accent hairline that draws on hover */
.card--accent::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  height: 3px; width: 100%;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--brand-500), var(--signal-400));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card--accent:hover::before { transform: scaleX(1); }

.card__icon {
  display: grid; place-items: center;
  width: 3.25rem; aspect-ratio: 1;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-700);
  font-size: 1.375rem;
  margin-bottom: var(--sp-4);
}
.card__title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.card__body  { color: var(--ink-600); font-size: var(--fs-sm); }

/* =====================================================================
   GRID
   ===================================================================== */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero, .hero-cinematic {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(5rem, 4rem + 10vw, 10rem);
  background: var(--ink-900);
  overflow: hidden;
}
/* Readability scrim over any background image */
.hero::after, .hero-cinematic::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,185,231,.22), transparent 60%),
    linear-gradient(180deg, rgba(8,12,20,.55) 0%, rgba(8,12,20,.80) 55%, rgba(8,12,20,.94) 100%);
}
.hero h1, .hero-cinematic h1 { color: #fff; max-width: 20ch; }
.hero p, .hero-cinematic p { color: rgba(255,255,255,.86); max-width: 58ch; font-size: var(--fs-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* Subtle animated grain/scan so full-bleed photos don't feel flat */
.hero__glow {
  position: absolute; inset: auto -20% -40% -20%; height: 60%; z-index: -1;
  background: radial-gradient(closest-side, rgba(0,185,231,.20), transparent);
  filter: blur(40px);
  pointer-events: none;
}

/* =====================================================================
   TRUST / STATS
   ===================================================================== */
.stat { text-align: center; }
.stat__num {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) { .stat__num { color: var(--brand-700); -webkit-text-fill-color: currentColor; } }
.stat__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-500); margin-top: var(--sp-2); }
.stat--on-dark .stat__num { background: none; color: #fff; -webkit-text-fill-color: #fff; }
.stat--on-dark .stat__label { color: rgba(255,255,255,.66); }

.trust-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-7);
  padding: var(--sp-5) 0;
  border-block: 1px solid var(--color-border);
}
.trust-bar__item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-600);
}
.trust-bar__item i, .trust-bar__item svg { color: var(--brand-600); }

/* =====================================================================
   BADGES / PILLS
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .38em .9em;
  font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .02em;
  border-radius: var(--r-full);
  background: var(--brand-50);
  color: var(--brand-800);
  border: 1px solid var(--brand-200);
}
.badge--signal { background: #fffbeb; color: var(--signal-700); border-color: #fde68a; }
.badge--on-dark { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); }

/* =====================================================================
   FORMS
   ===================================================================== */
input, select, textarea {
  width: 100%;
  padding: .8em 1em;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-900);
  background: #fff;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
input::placeholder, textarea::placeholder { color: var(--ink-400); }
label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); margin-bottom: var(--sp-2); }
.field { margin-bottom: var(--sp-4); }
.field__hint { font-size: var(--fs-xs); color: var(--ink-500); margin-top: var(--sp-1); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--dur), background-color var(--dur);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); background: rgba(255,255,255,.94); }
.site-header .container { display: flex; align-items: center; gap: var(--sp-5); min-height: 4.5rem; }
.site-header__nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.site-header__nav-link {
  position: relative;
  padding: .55em .9em;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-700);
  background: none; border: 0; cursor: pointer;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.site-header__nav-link:hover { color: var(--ink-950); background: var(--ink-50); }
.site-header__nav-link--active { color: var(--brand-700); }
.site-header__nav-link--active::after {
  content: ""; position: absolute; left: .9em; right: .9em; bottom: .18em;
  height: 2px; border-radius: 2px; background: var(--brand-500);
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  background: var(--ink-950);
  color: rgba(255,255,255,.72);
  padding-block: var(--sp-9) var(--sp-6);
  font-size: var(--fs-sm);
}
.site-footer h3, .site-footer h4 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-4); }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; transition: color var(--dur-fast); }
.site-footer a:hover { color: var(--brand-300); }
.site-footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.10); font-size: var(--fs-xs); color: rgba(255,255,255,.5); }

/* =====================================================================
   SECTION BACKGROUNDS
   ===================================================================== */
.bg-soft { background: var(--ink-50); }
.bg-brand-soft { background: linear-gradient(180deg, var(--brand-50), #fff); }
.bg-dark { background: var(--ink-900); color: rgba(255,255,255,.82); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #fff; }
.bg-dark a { color: var(--brand-300); }

/* Mesh backdrop for CTA bands */
.bg-mesh {
  position: relative; isolation: isolate;
  background: var(--ink-900); color: #fff;
}
.bg-mesh::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60rem 30rem at 10% 0%,  rgba(0,185,231,.24), transparent 60%),
    radial-gradient(50rem 26rem at 90% 100%, rgba(245,158,11,.18), transparent 60%);
}
.bg-mesh h2 { color: #fff; }
.bg-mesh p { color: rgba(255,255,255,.82); }

/* =====================================================================
   REVEAL ON SCROLL (progressive — visible if JS/IO absent)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100%;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink-900); color: #fff;
  border-radius: var(--r-sm); font-weight: 650;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--sp-4); }

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

/* =====================================================================
   PRINT
   ===================================================================== */
@media print {
  .site-header, .site-footer, .mobile-nav, .btn, .hero__actions { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}


/* =====================================================================
   ==== HERO BANNER ====
   Home-page hero. Treats the photograph as content rather than as a dark
   texture behind text.

   The old .hero-cinematic laid a 0.50 -> 0.82 navy gradient over the whole
   frame, which washed the image out and left the eyebrow at roughly 1.5:1
   against its own backdrop. Here the scrim is bottom-weighted: the top of
   the image stays bright, and the copy sits in a darkened band where it has
   real contrast.
   ===================================================================== */

.hero-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 68vh, 47.5rem);
  overflow: hidden;
  background: var(--ink-900);
  padding-block: 0;
}
.hero-banner::after { content: none; }   /* cancel the .hero-cinematic wash */

.hero-banner__media { position: absolute; inset: 0; z-index: 0; }
.hero-banner__media img,
.hero-banner__media picture {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Phone snap in flat midday light — a small lift stops it going muddy once
   the scrim is over it. Applied to the image only, never to the text. */
.hero-banner__media img { filter: saturate(1.08) contrast(1.06) brightness(1.03); }

/* Bottom-weighted so the photograph reads at the top and the copy reads at
   the bottom. The mid stop is what keeps the crew visible. */
.hero-banner__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Narrow screens put the copy full-width over the middle of the photograph,
     so this carries more weight than the wide-screen version, which can lean
     on a horizontal gradient instead. */
  background:
    linear-gradient(to bottom,
      rgba(8,12,20,0.58) 0%,
      rgba(8,12,20,0.50) 20%,
      rgba(8,12,20,0.66) 48%,
      rgba(8,12,20,0.86) 82%,
      rgba(8,12,20,0.94) 100%);
}
/* A little extra weight behind the text column on wide screens only, so the
   left edge stays legible without darkening the whole frame. */
@media (min-width: 62rem) {
  /* The subject of this photograph — the crew and the truck's own painted
     lettering — sits left of centre, and cover-cropping cannot move it
     (container is wider than the source, so only height is cropped). So the
     copy goes right, over the plain body panel, and the scrim runs the other
     way. Left half stays clear for the photograph. */
  .hero-banner__scrim {
    background:
      linear-gradient(to left,
        rgba(8,12,20,0.95) 0%,
        rgba(8,12,20,0.93) 30%,
        rgba(8,12,20,0.80) 45%,
        rgba(8,12,20,0.38) 61%,
        rgba(8,12,20,0.08) 78%,
        rgba(8,12,20,0.00) 90%),
      linear-gradient(to bottom,
        rgba(8,12,20,0.26) 0%,
        rgba(8,12,20,0.06) 30%,
        rgba(8,12,20,0.20) 76%,
        rgba(8,12,20,0.52) 100%);
  }
  .hero-banner__copy {
    max-width: 33rem;
    margin-left: auto;   /* text itself stays left-aligned; the block moves */
  }
}

.hero-banner__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
}
.hero-banner__copy { max-width: 46rem; }

.hero-banner__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 .9rem;
  font-family: var(--font-h, inherit);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* brand-300 on the scrim clears AA comfortably. The old hero used the
     raw logo cyan on a navy wash and was effectively unreadable. */
  color: var(--brand-300, #4dd1f5);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.hero-banner__eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
  background: var(--signal-400, #fbbf24);
}

.hero-banner__title {
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(2.15rem, 1.35rem + 3.4vw, 4.05rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0,0,0,.42);
}

.hero-banner__lede {
  margin: 0 0 1.75rem;
  max-width: 40rem;
  color: rgba(255,255,255,.93);
  font-size: clamp(1.02rem, .96rem + .3vw, 1.19rem);
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

.hero-banner__actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.6rem;
}
.hero-banner__cta {
  min-height: 3rem;
  padding: .8rem 1.55rem;
  font-size: 1rem;
  border-radius: 999px;
}
.hero-banner__cta--ghost {
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
.hero-banner__cta--ghost:hover,
.hero-banner__cta--ghost:focus-visible {
  background: rgba(255,255,255,.19);
  border-color: #fff;
  color: #fff;
}

.hero-banner__chips {
  display: flex; flex-wrap: wrap; gap: .5rem .65rem;
  margin: 0; padding: 0; list-style: none;
}
.hero-banner__chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  backdrop-filter: blur(6px);
}
.hero-banner__chip::before {
  content: ""; flex: none;
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--signal-400, #fbbf24);
}

@media (max-width: 47.99rem) {
  .hero-banner { min-height: clamp(26rem, 76vh, 34rem); }
  .hero-banner__copy { max-width: 100%; }
  .hero-banner__actions .hero-banner__cta { flex: 1 1 100%; justify-content: center; text-align: center; }
  .hero-banner__chip { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner, .hero-banner * { animation: none !important; transition: none !important; }
}