:root {
  /* Editorial light. Warm off-white rather than grey — pure grey reads cold
     and dated on a phone. Deep green carries the brand's lime into something
     an institutional buyer takes seriously; amber stays for the driver side
     and the hazard stripe. */
  --lime: #1F6B4A;                     /* accent on light = deep green */
  --lime-glow: rgba(31,107,74,0.22);
  --bg: #FBFBF9;
  --bg-alt: #FFFFFF;
  --card: #FFFFFF;
  --card-border: #E6E6E1;
  --text: #14181B;
  --text-dim: #5C6670;
  --text-muted: #666E75;   /* #8A9299 measured 3.05:1 on the paper ground */
  --nav-h: 76px;
  --radius-pill: 999px;
}
/* Dark bands: the route manifest and the footer. Used to ground the page and
   give it rhythm, not as the dominant surface. */
.on-dark {
  --lime: #F2A007;
  --bg: #14181B;
  --bg-alt: #0E1114;
  --card: rgba(255,255,255,0.05);
  --card-border: rgba(255,255,255,0.12);
  --text: #FFFFFF;
  --text-dim: rgba(255,255,255,0.72);
  --text-muted: rgba(255,255,255,0.5);
  background: #14181B;
  color: var(--text);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px,4vw,60px);
  background: rgba(7,31,46,0.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: background 0.3s, box-shadow 0.3s;
}
.nav.scrolled { background: rgba(7,31,46,0.98); box-shadow: 0 1px 0 rgba(255,255,255,0.12); }
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-logo { width: 44px; height: 44px; border-radius: var(--radius); }
.nav-name { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.nav-name span { color: var(--lime); }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text-dim);
  transition: color 0.2s; position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--lime); border-radius: 1px;
}
.nav-cta {
  background: var(--hivis); color: var(--cold-deep); border: none;
  padding: 10px 22px; border-radius: var(--radius);
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: box-shadow 0.2s, transform 0.2s;
}
.nav-cta:hover { box-shadow: 0 0 20px var(--lime-glow); transform: translateY(-1px); }
.hamburger {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 32px; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px;
}
.hamburger span {
  display: block; width: 22px; height: 2px; background: var(--text);
  border-radius: 1px; transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ── */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--nav-h) + 40px) 24px 60px;
  position: relative; overflow: hidden;
}
/* The three radial gradients that used to live here were removed:
   the brief calls for no gradients, and a flat cold field reads as
   cold storage rather than as a SaaS landing page. */
.hero-logo { width: 180px; height: 180px; margin-bottom: 28px; position: relative; z-index: 1; border-radius: var(--radius); }
.hero h1 {
  font-size: clamp(36px,6vw,64px); font-weight: 900;
  letter-spacing: -1.5px; line-height: 1.1;
  margin-bottom: 12px; position: relative; z-index: 1;
}
.hero h1 span { color: var(--lime); }
.hero-tagline {
  font-size: clamp(16px,2.5vw,22px); color: var(--text-dim);
  font-weight: 400; margin-bottom: 32px; position: relative; z-index: 1;
  max-width: 600px;
}
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
.btn-primary {
  background: var(--hivis); color: var(--cold-deep); border: none;
  padding: 14px 32px; border-radius: var(--radius);
  font-size: 16px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all 0.2s;
}
.btn-primary:hover { box-shadow: 0 4px 24px var(--lime-glow); transform: translateY(-2px); }
.btn-ghost {
  background: transparent; color: var(--text); border: 1px solid currentColor;
  padding: 14px 32px; border-radius: var(--radius);
  font-size: 16px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all 0.2s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 32px; padding: 8px 18px; border-radius: var(--radius);
  background: rgba(242,160,7,0.12); border: 1px solid rgba(242,160,7,0.35);
  font-size: 13px; font-weight: 600; color: var(--hivis);
  position: relative; z-index: 1;
}

/* ── SECTIONS ── */
section { padding: 100px clamp(20px,6vw,80px); }
.section-alt { background: var(--bg-alt); }
.section-header { text-align: center; margin-bottom: 56px; }
.section-header h2 {
  font-size: clamp(28px,4vw,42px); font-weight: 800;
  letter-spacing: -0.5px; margin-bottom: 12px;
}
.section-header h2 span { color: var(--lime); }
.section-header p {
  color: var(--text-dim); font-size: 17px; max-width: 600px; margin: 0 auto;
}

/* ── ABOUT ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1100px; margin: 0 auto; align-items: center; }
.about-text p { color: var(--text-dim); font-size: 16px; margin-bottom: 16px; }
.about-text p:first-child { font-size: 18px; color: var(--text); font-weight: 500; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 24px 20px; text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.stat-card:hover { border-color: var(--cold); transform: translateY(-2px); }
.stat-num { font-size: 36px; font-weight: 900; color: var(--lime); line-height: 1; margin-bottom: 4px; }
.stat-label { font-size: 13px; color: var(--text-dim); font-weight: 500; }
.programs { margin-top: 40px; }
.programs h3, .programs h2 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.program-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.program-badge {
  padding: 6px 14px; border-radius: var(--radius);
  background: #FFFFFF; border: 1px solid var(--rule);
  font-size: 12px; font-weight: 600; color: var(--cold); letter-spacing: 0.3px;
}

/* ── SERVICES ── */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.service-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 32px 24px;
  transition: all 0.25s; position: relative; overflow: hidden;
}
/* card gradient wash removed — no gradients per the brief */
.service-card:hover { border-color: var(--cold); transform: translateY(-4px); box-shadow: 0 6px 20px rgba(11,47,69,0.10); }

.service-icon { font-size: 40px; margin-bottom: 16px; position: relative; z-index: 1; }
.service-card h3, .service-card h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; position: relative; z-index: 1; }
.service-card p { font-size: 14px; color: var(--text-dim); line-height: 1.6; position: relative; z-index: 1; }

/* ── COVERAGE ── */
.coverage-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.coverage-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 28px 24px; text-align: center;
  transition: all 0.25s;
}
.coverage-card:hover { border-color: var(--cold); transform: translateY(-3px); }
.coverage-icon { font-size: 36px; margin-bottom: 12px; }
.coverage-card h3, .coverage-card h2 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.coverage-card p { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* ── CAREERS / APPLY ── */
.apply-form {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 36px; max-width: 720px; margin: 0 auto;
}
.apply-form h3, .apply-form h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.apply-form .apply-subtitle { font-size: 14px; color: var(--text-dim); margin-bottom: 24px; }
.apply-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.apply-form .form-group { margin-bottom: 14px; }
.apply-form .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.apply-form .form-group input,
.apply-form .form-group select,
.apply-form .form-group textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink);
  font-size: 14px; font-family: inherit; transition: border-color 0.2s;
}
.apply-form .form-group input:focus,
.apply-form .form-group select:focus,
.apply-form .form-group textarea:focus {
  outline: none; border-color: var(--hivis); box-shadow: 0 0 0 3px rgba(242,160,7,0.18);
}
.apply-form .form-group textarea { min-height: 80px; resize: vertical; }
.apply-form .form-group select { appearance: none; cursor: pointer; }
.apply-form .form-group select option { background: var(--paper); color: var(--ink); }
.apply-perks { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; max-width: 720px; margin: 0 auto 36px; }
.apply-perk {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 20px 16px; text-align: center;
}
.apply-perk-icon { font-size: 28px; margin-bottom: 8px; }
.apply-perk h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.apply-perk p { font-size: 12px; color: var(--text-dim); }
.apply-success { display: none; text-align: center; padding: 40px 20px; }
.apply-success h3 { font-size: 20px; margin-bottom: 8px; color: var(--lime); }
.apply-success p { color: var(--text-dim); }
@media (max-width: 768px) {
  .apply-form .form-row { grid-template-columns: 1fr; }
  .apply-perks { grid-template-columns: 1fr; }
}

/* ── CONTACT ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; max-width: 1000px; margin: 0 auto; }
.contact-info h3, .contact-info h2 { font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.contact-item { display: flex; gap: 14px; margin-bottom: 20px; }
.contact-item-icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.contact-item-text label { display: block; font-size: 12px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.contact-item-text span { font-size: 15px; font-weight: 500; }
.contact-item-text a { color: var(--lime); transition: opacity 0.2s; }
.contact-item-text a:hover { opacity: 0.8; }
.contact-form {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 32px;
}
.contact-form h3, .contact-form h2 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink);
  font-size: 14px; font-family: inherit;
  transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--hivis); box-shadow: 0 0 0 3px rgba(242,160,7,0.18);
}
.form-group textarea { min-height: 100px; resize: vertical; }
.form-group select { appearance: none; cursor: pointer; }
.form-group select option { background: var(--paper); color: var(--ink); }
.form-submit {
  width: 100%; padding: 14px; border: none; border-radius: var(--radius);
  background: var(--hivis); color: var(--cold-deep);
  font-size: 16px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all 0.2s; margin-top: 6px;
}
.form-submit:hover { box-shadow: 0 4px 20px var(--lime-glow); transform: translateY(-1px); }
.form-success {
  display: none; text-align: center; padding: 40px 20px;
}
.form-success h3 { font-size: 20px; margin-bottom: 8px; color: var(--lime); }
.form-success p { color: var(--text-dim); }

/* ── FOOTER ── */
.footer {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 48px clamp(20px,6vw,80px) 32px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; max-width: 1100px; margin: 0 auto; }
.footer-brand p { color: var(--text-muted); font-size: 14px; margin-top: 12px; max-width: 300px; line-height: 1.6; }
.footer h2 { font-size: 14px; font-weight: 700; margin-bottom: 14px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-body); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 14px; color: var(--text-muted); transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1100px; margin: 32px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p { font-size: 13px; color: var(--text-muted); }

/* ── ANIMATIONS ── */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-links {
    display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: rgba(251,251,249,0.98); backdrop-filter: blur(20px);
    flex-direction: column; padding: 24px; gap: 20px;
    border-bottom: 1px solid var(--rule);
  }
  .nav-links.open { display: flex; }
  .nav-cta-wrap { display: none; }
  .nav-links .mobile-cta {
    display: block; background: var(--hivis); color: var(--cold-deep);
    padding: 12px; border-radius: var(--radius); text-align: center;
    font-weight: 700; font-size: 14px;
  }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .services-grid { grid-template-columns: 1fr; }
  .coverage-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .hero-logo { width: 140px; height: 140px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN FOUNDATION — brief section 4 "hi-vis dispatch"
   Tokens, type system and icon set. The colour tokens below are DECLARED here
   and consumed by the page rebuilds in later commits; the palette on screen is
   still the current one until then. Icons: Lucide (ISC licence).
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-var.woff2') format('woff2-variations');
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Black'; src: url('/fonts/archivo-black-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Palette — exact tokens from the brief. Amber is reserved: primary CTAs and
     the hazard stripe only. Used decoratively it stops meaning "click here". */
  --cold:      #14181B;   /* ink, used for dark bands */
  --cold-deep: #0E1114;
  --frost:     #FBFBF9;
  --paper:     #FFFFFF;
  --hivis:     #F2A007;
  --produce:   #3E8E5A;   /* status green, for light surfaces */
  --produce-on-dark: #5CBE80;  /* same green lifted for the cold field:
                                  #3E8E5A on #071F2E measures 4.19:1, under the floor */
  --alert:     #C8442E;
  --ink:       #14181B;
  --ink-soft:  #5C6670;
  --rule:      #E6E6E1;

  /* Type */
  --font-display: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale — mobile to desktop, per brief section 4 */
  --t-h1:    clamp(32px, 7vw,  56px);
  --t-h2:    clamp(24px, 4.5vw, 36px);
  --t-body:  clamp(16px, 1vw,  17px);
  --t-mono:  clamp(12px, 0.9vw, 13px);

  --radius: 14px;         /* softened from the brief's 4px on Jose's call */
}

body { font-family: var(--font-body); font-size: var(--t-body); }

/* Display face is single-weight; asking for 900 would make the browser fake it. */
.hero h1,
.section-header h2,
.stat-num { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.035em; }
.hero h1  { font-size: var(--t-h1); letter-spacing: -0.02em; }
.section-header h2 { font-size: var(--t-h2); letter-spacing: -0.015em; }
.stat-num { letter-spacing: -0.01em; }

/* Mono carries the operations-company signal: stat labels, field labels, data. */
.stat-label,
.form-group label,
.contact-item-text label {
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── Icons ── inherit currentColor, so the later repaint is a colour change only */
.service-icon svg, .coverage-icon svg,
.apply-perk-icon svg, .contact-item-icon svg, .ok-icon {
  display: block; stroke: currentColor; fill: none;
}
.service-icon    { color: var(--lime); line-height: 0; }
.service-icon    svg { width: 40px; height: 40px; stroke-width: 1.5; }
.coverage-icon   { color: var(--lime); line-height: 0; display: flex; justify-content: center; }
.coverage-icon   svg { width: 36px; height: 36px; stroke-width: 1.5; }
.apply-perk-icon { color: var(--lime); line-height: 0; display: flex; justify-content: center; }
.apply-perk-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.contact-item-icon { color: var(--lime); }
.contact-item-icon svg { width: 20px; height: 20px; stroke-width: 1.75; }
.ok-icon { width: 28px; height: 28px; stroke-width: 2; display: inline-block; vertical-align: -5px; color: var(--lime); }

/* ── Language toggle ── always visible, both breakpoints */
.lang-toggle {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; line-height: 1;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 9px 12px; cursor: pointer; margin-left: 16px;
  transition: color .2s, border-color .2s;
}
.lang-toggle:hover { color: var(--lime); border-color: var(--lime); }
@media (max-width: 768px) { .lang-toggle { margin-left: auto; margin-right: 14px; } }

/* Accessibility floor — brief section 2.6 */
:focus-visible { outline: 3px solid var(--hivis); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Render scroll-revealed content static rather than merely instant: content
     must never depend on an IntersectionObserver firing to become visible. */
  .fade-up { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   /drivers — recruitment landing page
   ══════════════════════════════════════════════════════════════════════════ */
.drv-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.drv-wrap-narrow { max-width: 720px; }
.drv-section { padding: 72px 0; }
.drv-section-alt { background: var(--bg-alt); }

.drv-hero { padding: calc(var(--nav-h) + 64px) 0 64px; text-align: center; }
.drv-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-mono); color: var(--lime);
  letter-spacing: 0.12em; margin-bottom: 20px;
}
.drv-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.drv-hero h1 span { color: var(--lime); }
.drv-sub { font-size: 17px; color: var(--text-dim); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }
.drv-sub-center { text-align: center; }

.drv-hero-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.drv-btn-primary {
  display: inline-block; background: var(--hivis); color: var(--cold-deep);
  font-weight: 700; font-size: 16px; padding: 16px 32px;
  border-radius: var(--radius); min-width: 280px;
}
.drv-btn-primary:hover { filter: brightness(1.08); }

/* WhatsApp keeps its own brand green — for this audience it is a recognised
   affordance, not decoration, and it will out-convert the form. */
.drv-btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #25D366; color: #062512; font-weight: 700; font-size: 15px;
  padding: 15px 26px; border-radius: var(--radius); min-width: 280px; text-align: left;
}
.drv-btn-wa:hover { filter: brightness(1.06); }
.drv-btn-wa svg { width: 20px; height: 20px; flex-shrink: 0; }

.drv-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; }
.drv-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 28px 24px;
}
.drv-card-icon { color: var(--lime); line-height: 0; margin-bottom: 14px; }
.drv-card-icon svg { width: 30px; height: 30px; stroke-width: 1.5; }
.drv-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.drv-card p { font-size: 14px; color: var(--text-dim); line-height: 1.6; }

.drv-reqs { list-style: none; margin-top: 28px; }
.drv-reqs li {
  position: relative; padding: 16px 0 16px 34px; font-size: 15px;
  color: var(--text-dim); line-height: 1.6; border-bottom: 1px solid var(--card-border);
}
.drv-reqs li:last-child { border-bottom: 0; }
.drv-reqs li strong { color: var(--text); font-weight: 600; }
.drv-reqs li::before {
  content: ""; position: absolute; left: 6px; top: 23px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
}

.drv-more { margin: 4px 0 22px; border-top: 1px solid var(--card-border); padding-top: 18px; }
.drv-more summary {
  cursor: pointer; font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim);
  padding: 6px 0; list-style: revert;
}
.drv-more summary:hover { color: var(--lime); }
.drv-more[open] summary { margin-bottom: 14px; }

.drv-alt-cta { text-align: center; margin-top: 40px; }
.drv-alt-cta > p { color: var(--text-dim); font-size: 15px; margin-bottom: 14px; }
.drv-alt-cta .drv-btn-wa { margin: 0 auto; }
.drv-call { margin-top: 18px; font-size: 15px; color: var(--text-dim); }
.drv-call a { color: var(--lime); font-weight: 600; }

@media (max-width: 768px) {
  .drv-cards { grid-template-columns: 1fr; }
  .drv-section { padding: 52px 0; }
  .drv-btn-primary, .drv-btn-wa { width: 100%; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME — split-intent hero, route manifest, proof bar, how we run a route
   ══════════════════════════════════════════════════════════════════════════ */
.hero { min-height: auto; padding: calc(var(--nav-h) + 72px) 24px 72px; }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.14em; color: var(--hivis); margin-bottom: 22px;
}
.hero h1 { max-width: 16ch; }
.hero h1 span { color: var(--hivis); display: block; }
.hero-tagline { max-width: 62ch; margin-bottom: 40px; }

/* Two doors, side by side. A buyer and a driver want opposite things, so
   neither is made to scroll past the other. */
.hero-split { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; width: 100%; max-width: 720px; }
.hero-path {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 22px 24px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.22); text-align: left;
  transition: border-color .2s, background .2s, transform .2s;
}
.hero-path:hover { transform: translateY(-2px); }
.hero-path-kicker {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.06em; color: rgba(255,255,255,0.88);
}
.hero-path-cta { font-size: 17px; font-weight: 700; }
.hero-path.is-buyer { background: var(--hivis); border-color: var(--hivis); }
.hero-path.is-buyer .hero-path-kicker { color: var(--cold-deep); }
.hero-path.is-buyer .hero-path-cta { color: var(--cold-deep); }
.hero-path.is-buyer:hover { filter: brightness(1.06); }
.hero-path.is-driver:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.08); }

/* ── Route manifest: the one element a stock photo cannot fake ── */
.manifest { padding: 0; background: var(--cold-deep); }
.manifest-inner { max-width: 1100px; margin: 0 auto; padding: 28px clamp(20px,6vw,80px) 34px; }
.manifest-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.manifest-title {
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: 0.16em; color: var(--hivis);
}
.manifest-note { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.72); letter-spacing: 0.04em; }
.manifest-row {
  display: grid; grid-template-columns: 1fr 1fr 64px 108px; gap: 10px;
  align-items: center;
  font-family: var(--font-mono); font-size: 13px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
}
.manifest-row:last-child { border-bottom: 0; }
.m-area, .m-time { color: rgba(255,255,255,0.6); }
.m-time { text-align: right; }
.m-ok { color: var(--produce-on-dark); font-weight: 500; text-align: right; white-space: nowrap; }
.m-ok::before { content: "\2713"; margin-right: 6px; }
/* stagger the reveal so it reads like rows landing on a dispatch board */
.manifest-row.fade-up { transform: translateY(12px); }
.manifest-row:nth-child(1) { transition-delay: 0ms; }
.manifest-row:nth-child(2) { transition-delay: 90ms; }
.manifest-row:nth-child(3) { transition-delay: 180ms; }
.manifest-row:nth-child(4) { transition-delay: 270ms; }
.manifest-row:nth-child(5) { transition-delay: 360ms; }

/* ── Proof bar ── */
.proofbar { padding: 52px clamp(20px,6vw,80px); background: var(--paper); }
.proofbar-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.proof { text-align: center; }
.proof-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px,6vw,60px); line-height: 1; color: var(--cold);
  letter-spacing: -0.02em; margin-bottom: 10px;
}
.proof-label {
  font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.4;
}

/* ── Hazard stripe: a divider, used sparingly ── */
.hazard {
  height: 6px;
  background: repeating-linear-gradient(-45deg,
    var(--hivis) 0 14px, var(--cold) 14px 28px);
}

/* ── How we run a route ── */
.howsteps { list-style: none; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; counter-reset: none; }
.howstep {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 28px 26px; position: relative;
}
.howstep-n {
  display: block; font-family: var(--font-mono); font-size: var(--t-mono);
  font-weight: 500; letter-spacing: 0.12em; color: var(--hivis); margin-bottom: 12px;
}
.howstep h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.howstep p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; }

.about-grid.is-single { grid-template-columns: 1fr; max-width: 760px; }

@media (max-width: 768px) {
  .hero-split { grid-template-columns: 1fr; max-width: none; }
  .proofbar-inner { grid-template-columns: repeat(2,1fr); gap: 32px 16px; }
  .howsteps { grid-template-columns: 1fr; }
  .manifest-row { grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 12px; }
  .m-area { order: 3; }
  .m-time { order: 2; text-align: right; }
  .m-ok { order: 4; text-align: right; }
}

/* ══════════════════════════════════════════════════════════════════════════
   /capabilities — the government-buyer page
   ══════════════════════════════════════════════════════════════════════════ */
.cap-wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px,5vw,40px); }
.cap-wrap-center { text-align: center; }

.cap-hero { padding: calc(var(--nav-h) + 64px) 0 60px; }
.cap-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.16em; color: var(--hivis); margin-bottom: 18px;
}
.cap-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.02em;
  max-width: 20ch; margin-bottom: 18px;
}
.cap-sub { font-size: 17px; line-height: 1.65; color: var(--text-dim); max-width: 70ch; }
.cap-hero .cap-sub { margin-bottom: 32px; }

.cap-dl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--hivis); color: var(--cold-deep);
  font-weight: 700; font-size: 16px; padding: 16px 28px;
  border-radius: var(--radius);
}
.cap-dl-btn:hover { filter: brightness(1.07); }
.cap-dl-btn svg { width: 19px; height: 19px; }
.cap-nogate {
  font-family: var(--font-mono); font-size: var(--t-mono);
  color: rgba(255,255,255,0.6); margin-top: 12px; letter-spacing: 0.04em;
}

.cap-body { padding: 64px 0 72px; background: var(--frost); }
.cap-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: start; }
.cap-block { margin-bottom: 40px; }
.cap-block:last-child { margin-bottom: 0; }
.cap-block h2 {
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--cold);
  padding-bottom: 8px; margin-bottom: 18px;
  border-bottom: 2px solid var(--hivis); display: inline-block;
}
.cap-comps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cap-comp {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 20px 20px 22px;
}
.cap-comp h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.cap-comp p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.cap-list { list-style: none; }
.cap-list li {
  position: relative; padding: 9px 0 9px 22px;
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.cap-list li::before {
  content: ""; position: absolute; left: 2px; top: 17px;
  width: 7px; height: 7px; background: var(--hivis); border-radius: 50%;
}

.cap-table { width: 100%; border-collapse: collapse; }
.cap-table th, .cap-table td {
  text-align: left; padding: 11px 0; vertical-align: top;
  border-bottom: 1px solid var(--rule); font-size: 14px;
}
.cap-table th {
  font-family: var(--font-mono); font-weight: 500; color: var(--cold);
  width: 130px; letter-spacing: 0.04em; white-space: nowrap;
}
.cap-table td { color: var(--ink-soft); line-height: 1.55; }

.cap-side .cap-block { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 22px 24px; }
.cap-side .cap-block h2 { margin-top: 0; }
.cap-side p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.cap-side a { color: var(--cold); font-weight: 600; }
.cap-side a:hover { color: var(--hivis); }
.cap-poc { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.cap-poc span { display: block; font-size: 13px; font-weight: 400; color: var(--ink-soft); }

.cap-dl { margin: 0; }
.cap-dl dt {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--cold); letter-spacing: 0.04em;
}
.cap-dl dd { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
.cap-dl-split dt { color: var(--ink-soft); font-family: var(--font-body); font-size: 13px; }
.cap-dl-split dd { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }

.cap-note { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-top: 12px; }
.cap-note-light { color: rgba(255,255,255,0.62); }

.cap-cta { padding: 64px 0 68px; }
.cap-cta h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-h2); letter-spacing: -0.015em; margin-bottom: 12px;
}
.cap-cta .cap-sub { margin: 0 auto 26px; }
.cap-cta .btn-primary { display: inline-block; }
.cap-cta .cap-note { margin-top: 16px; }

@media (max-width: 900px) {
  .cap-grid { grid-template-columns: 1fr; gap: 36px; }
  .cap-comps { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cap-dl-btn { width: 100%; justify-content: center; }
  .cap-table th { width: 96px; font-size: 12px; }
}

/* ── Programs framing line ── */
.programs-frame { font-size: 14px; color: var(--ink-soft); margin: -6px 0 14px; }

/* ── Leadership: who is accountable ── */
.leadership {
  display: flex; gap: 18px; align-items: center; margin-top: 32px;
  padding: 20px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
/* Neutral placeholder rather than stock imagery: a stock photo of a smiling
   warehouse worker actively damages credibility with this audience. */
.leader-photo {
  width: 96px; height: 96px; flex-shrink: 0;
  background: var(--cold); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.leader-photo span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5); padding: 0 6px; line-height: 1.4;
}
.leader-name { font-size: 18px; font-weight: 700; color: var(--ink); }
.leader-title {
  font-family: var(--font-mono); font-size: var(--t-mono); color: var(--cold);
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px;
}
.leader-note { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.leader-note a { color: var(--cold); font-weight: 600; }

/* ── Contact: directions + map ── */
.contact-directions {
  display: inline-block; margin: 4px 0 24px;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.06em; color: var(--cold); font-weight: 500;
  border-bottom: 1px solid var(--hivis); padding-bottom: 2px;
}
.contact-directions:hover { color: var(--hivis); }
.contact-map {
  grid-column: 1 / -1; margin-top: 8px;
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  line-height: 0;
}
.contact-map iframe { width: 100%; height: 300px; border: 0; }
@media (max-width: 768px) { .contact-map iframe { height: 220px; } }
@media (max-width: 768px) { .leadership { flex-direction: column; text-align: center; } }

/* ══════════════════════════════════════════════════════════════════════════
   EDITORIAL — Jose picked direction B and asked for it a little more modern.
   Lighter display weights, pill CTAs, more air, warm neutrals. Dark is now a
   punctuation band (manifest, footer), not the dominant surface.
   ══════════════════════════════════════════════════════════════════════════ */

/* Nav: light with a hairline, and the logo on a dark chip. The mark is lime
   green and washes out on near-white — the chip keeps it crisp without
   altering the brand asset. */
.nav { background: rgba(251,251,249,0.82); border-bottom: 1px solid var(--rule); }
.nav.scrolled { background: rgba(251,251,249,0.96); box-shadow: 0 1px 0 var(--rule); }
.nav-logo {
  background: var(--ink); padding: 5px; border-radius: 11px;
  width: 42px; height: 42px; object-fit: contain;
}
.nav-name { font-weight: 600; letter-spacing: -0.02em; }
.nav-links a { color: var(--ink-soft); font-weight: 450; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after { background: var(--lime); }
.hamburger span { background: var(--ink); }
.lang-toggle { color: var(--ink-soft); border-color: var(--rule); }
.lang-toggle:hover { color: var(--ink); border-color: var(--ink); }

/* CTAs become pills. Amber stays the primary action; the deep green is the
   quiet accent so the two never compete. */
.nav-cta, .btn-primary, .form-submit, .drv-btn-primary, .drv-btn-wa, .cap-dl-btn,
.nav-links .mobile-cta { border-radius: var(--radius-pill); }
/* The two hero doors are cards, not buttons — a pill radius on a two-line
   block reads as a lozenge. */
.hero-path { border-radius: 20px; }
.nav-cta { padding: 11px 24px; }
.btn-primary, .form-submit, .drv-btn-primary, .cap-dl-btn { padding: 15px 32px; }
.btn-primary:hover, .form-submit:hover, .nav-cta:hover { box-shadow: 0 8px 20px rgba(242,160,7,.30); transform: translateY(-1px); }
.btn-ghost { border-radius: var(--radius-pill); border: 1px solid var(--rule); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Type: bigger, tighter, lighter. This is what actually reads as modern. */
.hero h1 { font-size: clamp(36px, 6.4vw, 68px); line-height: 1.02; font-weight: 500; }
.hero h1 span { color: var(--lime); display: block; }
.hero-eyebrow { color: var(--lime); letter-spacing: 0.18em; }
.hero-tagline { font-size: clamp(17px, 2vw, 20px); color: var(--ink-soft); max-width: 58ch; }
.section-header h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 500; letter-spacing: -0.035em; }
.section-header h2 span { color: var(--lime); }
.section-header p { color: var(--ink-soft); font-size: 17px; }
section { padding: clamp(64px, 9vw, 116px) clamp(20px, 6vw, 80px); }

/* Hero: light field, two doors still distinct. */
.hero { background: var(--bg); color: var(--ink); padding: calc(var(--nav-h) + 76px) 24px 84px; }
.hero-split { max-width: 760px; gap: 14px; }
.hero-path { border: 1px solid var(--rule); background: var(--card); padding: 24px 26px; }
.hero-path-kicker { color: var(--ink-soft); }
.hero-path-cta { color: var(--ink); }
.hero-path.is-buyer { background: var(--ink); border-color: var(--ink); }
.hero-path.is-buyer .hero-path-kicker { color: rgba(255,255,255,.72); }
.hero-path.is-buyer .hero-path-cta { color: #fff; }
.hero-path.is-driver:hover { border-color: var(--ink); background: var(--card); }

/* Cards: soft fills and generous radii instead of hard borders. */
.service-card, .coverage-card, .apply-perk, .contact-form, .apply-form,
.howstep, .drv-card, .cap-comp, .leadership, .cap-side .cap-block {
  border-radius: 18px; border: 1px solid var(--rule); box-shadow: none;
}
.service-card:hover, .coverage-card:hover {
  border-color: var(--ink); transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20,24,27,.07);
}
.howstep, .drv-card, .cap-comp { background: var(--card); }
.howstep-n, .drv-card-icon, .service-icon, .coverage-icon, .apply-perk-icon { color: var(--lime); }
.contact-item-icon { background: var(--bg); border-color: var(--rule); color: var(--lime); }
.program-badge { border-radius: var(--radius-pill); padding: 7px 16px; color: var(--ink); }
.proofbar { background: var(--bg-alt); }
.proof-num { color: var(--ink); font-weight: 500; letter-spacing: -0.04em; }
.proof-label { color: var(--ink-soft); }
.cap-block h2 { border-bottom-color: var(--lime); color: var(--ink); }
.cap-list li::before, .drv-reqs li::before { background: var(--lime); }

/* Inputs: rounder, quieter, with a green focus ring. */
.form-group input, .form-group select, .form-group textarea,
.apply-form .form-group input, .apply-form .form-group select, .apply-form .form-group textarea {
  border-radius: 12px; background: var(--bg); border-color: var(--rule); padding: 14px 16px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.apply-form .form-group input:focus, .apply-form .form-group select:focus, .apply-form .form-group textarea:focus {
  border-color: var(--lime); box-shadow: 0 0 0 3px rgba(31,107,74,.14);
}
:focus-visible { outline-color: var(--lime); }

/* Dark bands keep their own logo chip treatment off. */
.on-dark .nav-logo { background: transparent; padding: 0; }
.footer { background: var(--cold); }
.footer .nav-name span { color: var(--hivis); }

/* Hazard stripe: thinner and calmer against a light page. */
.hazard { height: 5px; background: repeating-linear-gradient(-45deg, var(--hivis) 0 12px, var(--ink) 12px 24px); }

/* Drivers hero moves to light too, so WhatsApp green does the shouting. */
.drv-hero { background: var(--bg); color: var(--ink); }
.drv-hero h1 { font-weight: 500; letter-spacing: -0.035em; }
.drv-hero h1 span { color: var(--lime); }
.drv-eyebrow { color: var(--lime); }
.drv-sub { color: var(--ink-soft); }
.drv-btn-primary { background: var(--ink); color: #fff; }
.drv-btn-primary:hover { filter: none; box-shadow: 0 10px 24px rgba(20,24,27,.18); }
.drv-more summary { color: var(--ink-soft); }
.drv-more summary:hover { color: var(--lime); }

/* Capabilities hero likewise. */
.cap-hero { background: var(--bg); color: var(--ink); }
.cap-hero h1 { font-weight: 500; letter-spacing: -0.035em; }
.cap-eyebrow { color: var(--lime); }
.cap-hero .cap-sub { color: var(--ink-soft); }
.cap-dl-btn { background: var(--ink); color: #fff; }
.cap-dl-btn:hover { filter: none; box-shadow: 0 10px 24px rgba(20,24,27,.18); }
.cap-nogate { color: var(--ink-soft); }
.cap-cta { background: var(--cold); }
.cap-cta h2 { font-weight: 500; }

/* ── Mobile action bar ── phone-only; call, convert, or go drive ───────── */
.grf-bar { display: none; }
@media (max-width: 768px) {
  .grf-bar {
    display: grid; grid-template-columns: 1fr 1.35fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: rgba(251,251,249,0.97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--rule);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .grf-bar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 6px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 600; color: var(--ink-soft);
    font-family: var(--font-body); text-align: center; line-height: 1.2;
    min-height: 46px;
  }
  .grf-bar-item svg { width: 19px; height: 19px; }
  .grf-bar-item.is-primary {
    background: var(--hivis); color: var(--cold-deep); font-size: 14px; font-weight: 700;
  }
  .grf-bar-item.is-drive { color: var(--lime); }
  .grf-bar-item:active { transform: scale(.97); }
  /* keep the bar from sitting on top of the last of the page */
  body.has-grf-bar { padding-bottom: 78px; }
}
/* WhatsApp green at 12px measured 4.16:1 on the bar's paper background —
   darkened to 5.23:1. The button on the page keeps the brand green,
   which is fine there because the text sits on the green, not beside it. */
@media (max-width: 768px) { .grf-bar-item.is-wa { color: #0F7A40; } }

/* ══════════════════════════════════════════════════════════════════════════
   MULTI-PAGE — nav Drive button, page leads, closing band
   ══════════════════════════════════════════════════════════════════════════ */
.nav-cta-wrap { display: flex; align-items: center; gap: 10px; }
/* Two audiences, two doors — never the same button. */
.nav-drive {
  font-size: 14px; font-weight: 600; color: var(--lime);
  border: 1px solid var(--lime); border-radius: var(--radius-pill);
  padding: 10px 20px; white-space: nowrap;
}
.nav-drive:hover { background: var(--lime); color: #fff; }
.nav-cta { display: inline-block; white-space: nowrap; }

/* A section that opens its own page shouldn't sit in the alternating rhythm
   it had as one band among many. */
.page-lead { padding-top: calc(var(--nav-h) + 56px); background: var(--bg); }

.programs-wrap { max-width: 820px; margin: 0 auto; text-align: center; }
.programs-wrap .program-badges { justify-content: center; margin-bottom: 30px; }
.programs-wrap .btn-ghost { display: inline-block; }

.closing { padding: clamp(60px,8vw,96px) clamp(20px,6vw,80px); }
.closing-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.closing h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px,4vw,44px); letter-spacing: -0.035em; margin-bottom: 14px;
}
.closing p { color: rgba(255,255,255,0.74); font-size: 17px; margin-bottom: 28px; }
.closing-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.closing .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.closing .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

@media (max-width: 1024px) { .nav-drive { display: none; } }

/* A page-leading section header is an h1 now, and needs the h2's treatment. */
.section-header h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.035em;
  line-height: 1.05; margin-bottom: 12px;
}
.section-header h1 span { color: var(--lime); }