/* ==========================================================================
   Nicolau Ltd — CONCEPT D: "Route Card"

   Recruitment-first. Teal is the dominant surface, not an accent: the hero
   is a deep teal field with a driver's route card sitting on it, so the
   empty column the van left is filled by the thing a driver actually cares
   about — what a shift with Nicolau looks like.
   ========================================================================== */
:root {
  color-scheme: only light;

  /* Teal palette, extended into a full ramp so it can carry whole surfaces
     rather than just accents. Sourced from the logo's teal/emerald. */
  --teal-950: #04231F;
  --teal-900: #06322C;
  --teal-800: #0A4D44;
  --teal-700: #0B6B62;
  --teal-600: #0F8E82;
  --teal-500: #14B8A6;
  --teal-300: #5EDCC9;
  --teal-100: #C4EFE8;
  --teal-50:  #EAF7F4;

  --color-amber:      #F0B429;
  --color-amber-deep: #C88A0E;

  --color-bg:         #FFFFFF;
  --color-bg-alt:     var(--teal-50);
  --color-surface:    #FFFFFF;
  --color-ink:        #06322C;
  --color-ink-soft:   #2F4F49;
  --color-muted:      #4A635E;
  --color-border:     #D3E5E0;
  --color-danger:     #B8452C;
  --color-focus:      var(--teal-600);

  --font-heading: 'Archivo', 'Segoe UI', sans-serif;
  --font-body: 'Inter Tight', 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', 'Consolas', monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(6, 50, 44, 0.08);
  --shadow-md: 0 10px 30px rgba(6, 50, 44, 0.10);
  /* Neutral, not tinted: a coloured shadow on the dark hero reads as a glow
     rather than as the card being lifted off the surface. */
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.34);

  --header-height: 76px;
  --max-width: 1180px;
  --transition-fast: 170ms ease;
  --transition-base: 260ms ease;
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; 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; scroll-behavior: auto !important; }
}

body {
  margin: 0; min-height: 100dvh;
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--color-ink); background: var(--color-bg);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.08; margin: 0; color: var(--color-ink); letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-3); color: var(--color-muted); }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--teal-900); color: #fff; padding: 12px 20px; z-index: 1000; }
.skip-link:focus { left: 0; }
.container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-4); }

/* Back to top: fixed bottom-right, hidden (not just invisible — pointer-
   events would otherwise still catch clicks over whatever sits underneath
   it) until js/script.js decides there's a real scroll worth undoing. */
.to-top-btn {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--teal-800);
  border: none;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background var(--transition-fast);
}
.to-top-btn.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.to-top-btn:hover { background: var(--color-amber); }
.to-top-btn:hover .icon { color: var(--teal-950); }
.to-top-btn .icon { width: 22px; height: 22px; color: #fff; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 50px; padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
  border: none; cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--color-amber); color: var(--teal-950); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-amber-deep); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--teal-700); box-shadow: inset 0 0 0 2px var(--teal-600); }
.btn-ghost:hover { background: var(--teal-600); color: #fff; }
.btn-lg { min-height: 58px; padding: 0 var(--space-6); font-size: 1.08rem; }
.btn-sm { min-height: 44px; padding: 0 var(--space-3); font-size: 0.88rem; }
.btn-block { width: 100%; }

/* On the teal hero field the ghost button needs to invert. */
.hero .btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
.hero .btn-ghost:hover { background: #fff; color: var(--teal-800); box-shadow: inset 0 0 0 2px #fff; }

.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 30px; height: 30px; color: var(--teal-600); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-700); margin-bottom: var(--space-3);
}
.eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--color-amber); flex-shrink: 0; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); }
.site-header.is-scrolled { border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.brand-logo { height: 42px; width: auto; }
.main-nav ul { display: flex; gap: var(--space-4); }
.main-nav a { font-weight: 500; font-size: 0.94rem; color: var(--color-ink-soft); padding: var(--space-2) 0; position: relative; }
.main-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--teal-500); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-fast); }
.main-nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.nav-toggle-bar { width: 20px; height: 2px; background: var(--color-ink); margin-inline: auto; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero — deep teal field, route card fills the old van column
   ========================================================================== */
.hero {
  padding-block: var(--space-7) var(--space-8);
  background: var(--teal-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Faint road-line texture, teal-on-teal, so the field isn't dead flat. */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.028) 0 2px, transparent 2px 46px);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; position: relative; }
.hero .eyebrow { color: var(--teal-300); }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--color-amber); }
.hero-lede { font-size: 1.15rem; max-width: 46ch; margin-top: var(--space-3); color: rgba(255,255,255,0.82); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Trust row, replaces the old hero-tags list */
.hero-tags { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.14); }
.hero-tags li { display: flex; align-items: center; gap: var(--space-2); font-size: 0.88rem; font-weight: 500; color: rgba(255,255,255,0.8); }
.hero-tags .icon { color: var(--teal-300); }

.approved { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-md); background: rgba(255,255,255,0.05); }
.approved-label { font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; color: rgba(255,255,255,0.65); padding-right: var(--space-3); border-right: 1px solid rgba(255,255,255,0.18); }
.approved-logo { height: 40px; width: auto; }

/* ---- SIGNATURE: the route card ---------------------------------------- */
.route-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  max-width: 420px;
  margin-inline: auto;
  transform: rotate(-1.5deg);
  animation: card-in 700ms var(--ease-out) both;
}
@keyframes card-in { from { opacity: 0; transform: rotate(-1.5deg) translateY(20px); } to { opacity: 1; transform: rotate(-1.5deg) translateY(0); } }
@media (prefers-reduced-motion: reduce) { .route-card { animation: none; } }

.route-card-head { background: var(--teal-800); color: #fff; padding: var(--space-4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.route-card-head h2 { font-size: 1.05rem; color: #fff; letter-spacing: 0; }
.route-card-tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-300); }
.route-card-body { padding: var(--space-4); }

.route-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.route-card-row:last-of-type { border-bottom: none; }
.route-card-row dt { font-size: 0.88rem; color: var(--color-muted); margin: 0; }
.route-card-row dd { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--color-ink); text-align: right; }
/* Inline link inside a card row still needs a real hit area. */
.route-card-row dd a {
  display: inline-block;
  padding: 4px 2px;
  color: var(--teal-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.route-card-row dd a:hover { color: var(--teal-600); }
.route-card-row dd .tbc { font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem; color: var(--teal-700); background: var(--teal-50); border: 1px dashed var(--teal-300); border-radius: 4px; padding: 3px 7px; }

/* Week strip — the actual Mon–Sat rota, a real fact we have */
.week-strip { display: flex; gap: 5px; margin-top: var(--space-4); }
.week-strip li {
  flex: 1; text-align: center; padding: 9px 0;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  border-radius: 4px; background: var(--teal-50); color: var(--teal-700);
}
.week-strip li[data-state="on"] { background: var(--teal-600); color: #fff; }
.week-strip li[data-state="rota"] { background: var(--color-amber); color: var(--teal-950); }
.week-strip li[data-state="off"] { background: #F1F4F3; color: #97A5A1; }
.week-key { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); font-size: 0.78rem; color: var(--color-muted); }
.week-key span { display: inline-flex; align-items: center; gap: 6px; }
.week-key i { width: 10px; height: 10px; border-radius: 2px; display: block; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: var(--space-8); background: var(--color-bg); }
.section-alt { background: var(--color-bg-alt); }
.section-head { max-width: 62ch; margin-bottom: var(--space-6); }
.section-lede { font-size: 1.05rem; margin-top: var(--space-3); }
.grid { display: grid; gap: var(--space-4); }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

/* Cards */
/* Cards put the icon inline with the heading rather than stacked in a tile
   above it — the tile-above-heading arrangement is the one block that read
   as interchangeable-with-any-product in review, and inline is tighter to
   scan besides. */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-300); }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.card-head .icon { width: 22px; height: 22px; color: var(--teal-600); }
.card-head h3 { margin: 0; }
.card p { margin: 0; font-size: 0.95rem; }
.value-card { text-align: left; }
.value-card h3 { margin: var(--space-3) 0 var(--space-2); }
.value-card p { font-size: 0.95rem; margin: 0; }

/* Fleet */
.fleet-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
.check-list { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.check-list li { position: relative; padding-left: 30px; color: var(--color-ink-soft); font-weight: 500; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 11px 11px no-repeat, var(--teal-600);
}
.fleet-visual { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.spec-plate { display: flex; flex-direction: column; }
.spec-plate dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-700); margin: 0 0 4px; }
.spec-plate dd { margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--color-ink); }
.spec-plate div:last-child dd { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* ---- Ways to earn: three engagement models, compared -------------------
   Deliberately reuses the hero route-card's head/row anatomy so the page
   reads as one system: a driver who understood the hero card already knows
   how to read these. */
.pay-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: stretch; }

.pay-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.pay-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-300); }

.pay-card-head { background: var(--teal-800); color: #fff; padding: var(--space-4); }
.pay-card-head h3 { color: #fff; font-size: 1.25rem; margin: 0; }
.pay-cut {
  display: inline-block; margin-top: var(--space-2);
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal-950); background: var(--color-amber);
  border-radius: 999px; padding: 4px 10px;
}
.pay-card-blurb { margin: 0; padding: var(--space-4) var(--space-4) 0; font-size: 0.94rem; }

.pay-card dl { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); flex: 1; }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 54px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.pay-row:last-child { border-bottom: none; }
.pay-row dt { margin: 0; font-size: 0.88rem; color: var(--color-muted); }
.pay-row dd { margin: 0; text-align: right; font-weight: 600; font-size: 0.9rem; color: var(--color-ink); }

/* Who-pays-what is the whole decision, so it gets colour rather than
   another line of grey text: teal = we cover it, amber = you cover it. */
.pay-row dd[data-who="us"] { color: var(--teal-700); }
.pay-row dd[data-who="you"] { color: #8A5A00; }

/* "More stops, more pay" reads as one green block instead of the us/you
   split the other cards use — every figure on it, including Our share
   (no data-who of its own), same green as a positive trend elsewhere in
   the app (.dhl-anomaly-pill.high, js/dhl-analysis.js). Needs the extra
   .pay-card on the selector to outrank the us/you rules above, which sit
   at the same specificity otherwise. */
.pay-card-green.pay-card .pay-row dd { color: #15803D; }
.pay-row dd .tbc {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem;
  color: var(--teal-700); background: var(--teal-50);
  border: 1px dashed var(--teal-300); border-radius: 4px; padding: 3px 7px;
}

/* The fourth card in the grid, not a fourth route: reassurance rather than
   another option to weigh, so it gets its own amber head (the three real
   options stay teal) and spans the full row on desktop instead of
   squeezing into an uneven 4th column. Replaces the old plain-text
   .pay-note footnote with something that actually matches the weight of
   the choice it's answering. */
.pay-card-help { grid-column: 1 / -1; }
.pay-card-head-help { background: var(--color-amber); }
.pay-card-head-help h3 { color: var(--teal-950); }

/* Pushed to the bottom of the card regardless of how much blurb/dl content
   sits above it (.pay-card is a column flex), so all four "Choose"
   buttons line up along the same row instead of trailing at whatever
   height each card's own content happens to end. */
.pay-card-action { margin-top: auto; padding: var(--space-4); padding-top: var(--space-3); }

/* ---- How it works: the three-step application path -------------------- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4); counter-reset: step; }
.step { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); padding-top: var(--space-6); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-5);
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: var(--teal-600); color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 0 0 5px var(--color-bg);
}
.section-alt .step::before { box-shadow: 0 0 0 5px var(--color-bg-alt); }
.step h3 { margin-bottom: var(--space-2); }
.step p { margin: 0; font-size: 0.95rem; }

/* Coverage */
.coverage-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
.area-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-content: flex-start; }
.area-chips li { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-weight: 500; font-size: 0.92rem; color: var(--color-ink); }
.area-chips li::before { content: attr(data-code); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; color: var(--teal-600); }
.map-embed { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); aspect-ratio: 16 / 11; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* Careers / Contact */
.careers-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.contact-list { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-list li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-ink-soft); font-size: 1.05rem; }
.contact-list .icon { color: var(--teal-600); margin-top: 2px; }

/* Contact page: just the details, no form (see contact.html) — one centred
   card rather than the old two-column form layout, since there's only one
   thing on the page now. */
.contact-page { display: flex; justify-content: center; }
.contact-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: var(--space-6); max-width: 46ch; width: 100%;
}

.contact-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.careers-thank-you { background: var(--teal-50); border: 1px solid var(--teal-300); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); text-align: center; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--teal-800); }
.form-row { margin-bottom: var(--space-4); }
.form-row label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-2); color: var(--color-ink); }
.form-row .optional { font-weight: 400; color: var(--color-muted); }
.form-row input, .form-row textarea {
  width: 100%; min-height: 48px; padding: var(--space-3);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  font: inherit; font-size: 1rem; color: var(--color-ink); background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus, .form-row textarea:focus { border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(15,142,130,0.15); outline: none; }
.form-row input[aria-invalid="true"], .form-row textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.field-error { color: var(--color-danger); font-size: 0.85rem; margin: var(--space-1) 0 0; min-height: 1.2em; }
.form-status { margin: var(--space-3) 0 0; font-weight: 600; font-size: 0.9rem; color: var(--teal-700); text-align: center; }

/* --------------------------------------------------------------------------
   Apply form as three short steps (apply.html / js/script.js)
   -------------------------------------------------------------------------- */
.careers-copy h2 em { font-style: normal; color: var(--teal-600); }
.apply-steps { padding: var(--space-5) var(--space-4); }
@media (min-width: 560px) { .apply-steps { padding: var(--space-5); } }

.apply-progress { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: none; }
.apply-progress li { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); }
.apply-progress li::before { content: ''; display: block; height: 4px; border-radius: 4px; background: var(--color-border); transition: background var(--transition-fast); }
.apply-progress li span { display: none; }
.apply-progress li.is-done::before { background: var(--teal-500); }
.apply-progress li.is-current::before { background: var(--color-amber); }
.apply-progress li.is-current { color: var(--color-ink); }

.apply-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.apply-step-title { padding: 0; margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--color-ink); }
.apply-step-hint { margin: 0 0 var(--space-4); color: var(--color-muted); font-size: 0.95rem; }
.apply-q { margin: var(--space-4) 0 var(--space-2); font-weight: 600; font-size: 0.95rem; color: var(--color-ink); }
.apply-q:first-of-type { margin-top: 0; }

.apply-choices-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.apply-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: var(--space-3) var(--space-3); min-height: 76px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: #fff;
  font: inherit; color: var(--color-ink); cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.apply-choice strong { font-family: var(--font-heading); font-size: 1.25rem; }
.apply-choice span { font-size: 0.85rem; color: var(--color-muted); }
.apply-choice:hover { border-color: var(--teal-600); }
.apply-choice[aria-pressed="true"] { border-color: var(--teal-600); background: var(--teal-50); box-shadow: inset 0 0 0 1px var(--teal-600); }
.apply-choice:active, .apply-chip:active { transform: scale(0.98); }

.apply-choices-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.apply-chip {
  min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--color-border); background: #fff;
  font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--color-ink); cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.apply-chip:hover { border-color: var(--teal-600); }
.apply-chip[aria-pressed="true"] { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.apply-choice:focus-visible, .apply-chip:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.apply-check { display: flex; align-items: center; gap: 10px; margin: var(--space-3) 0 0; font-size: 0.92rem; color: var(--color-ink-soft); cursor: pointer; }
.apply-check input { width: 20px; height: 20px; accent-color: var(--teal-600); flex-shrink: 0; }

.apply-sorry { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid #F1D3A1; border-radius: var(--radius-md); background: #FFF8EC; color: var(--color-ink-soft); }
.apply-sorry p { margin: 0; }

.apply-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.apply-nav .btn-primary { flex: 1; max-width: 260px; margin-left: auto; }
.apply-step .form-note { font-size: 0.85rem; color: var(--color-muted); margin: var(--space-3) 0 0; }
.careers-thank-you p { margin: 0; }
.careers-thank-you-sub { margin-top: var(--space-2) !important; font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--color-ink-soft); }
@media (prefers-reduced-motion: reduce) { .apply-choice, .apply-chip, .apply-progress li::before { transition: none; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--teal-950); color: #B6CFC9; padding-top: var(--space-6); }
.footer-inner { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid rgba(255,255,255,0.12); }
.brand-footer .brand-logo { height: 46px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-nav a { color: #B6CFC9; font-size: 0.92rem; transition: color var(--transition-fast); }
.footer-nav a:hover { color: var(--teal-300); }
.footer-note { margin: 0; font-size: 0.9rem; color: #86A49E; }
.footer-bottom { padding-block: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.footer-bottom p { margin: 0; font-size: 0.82rem; color: #7F9C96; }
.header-staff-link { font-size: 0.84rem; font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.header-staff-link:hover { color: var(--teal-700); text-decoration: underline; }
@media (max-width: 639px) { .header-staff-link { display: none; } }
.main-nav-staff-link { display: none; }
@media (max-width: 639px) {
  .main-nav-staff-link { display: block; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
  .main-nav-staff-link a { border-bottom: none !important; color: var(--color-muted) !important; }
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .pay-grid { grid-template-columns: repeat(3, 1fr); }
  .pay-card-blurb { min-height: 8.4em; }
}
@media (min-width: 768px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .coverage-grid { grid-template-columns: 0.85fr 1.15fr; }
  .careers-grid { grid-template-columns: 1fr 1.1fr; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .fleet-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 1023px) {
  .main-nav { position: fixed; inset: var(--header-height) 0 0 0; background: var(--color-bg); padding: var(--space-5) var(--space-4); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base); }
  .main-nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
  .main-nav ul { flex-direction: column; gap: var(--space-1); }
  .main-nav a { display: block; padding: var(--space-3) 0; font-size: 1.05rem; border-bottom: 1px solid var(--color-border); }
  .nav-toggle { display: flex; }
}

/* Referral bonus band under the pay cards */
.refer-band { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border: 2px solid var(--color-amber); border-radius: 14px; background: #FFF6DB; }
.refer-amount { margin: 0; flex: none; font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--teal-950); background: var(--color-amber); border-radius: 12px; padding: 10px 14px; }
.refer-text { margin: 0; font-size: 1rem; color: var(--teal-950); }
.pay-cut-alt { margin-left: 6px; background: #fff; }
.pay-help { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border); border-left: 4px solid var(--color-amber); border-radius: var(--radius-lg); background: var(--color-surface); }
.pay-help h3 { margin: 0 0 var(--space-2); }
.pay-help p { margin: 0; font-size: 0.95rem; }
.pay-help .btn { flex: none; }
@media (max-width: 720px) { .pay-help { flex-direction: column; align-items: stretch; } }
@media (max-width: 520px) { .refer-band { flex-direction: column; align-items: flex-start; gap: var(--space-2); } }