/* ===========================================================================
   NW Navigator Jobs Hub — nwnavigatorjobs.com

   Brand values sampled directly from nwnavigator.com's live CSS (see
   /CLAUDE.md at the project root for the full audit and sourcing). This is
   the official hiring presence, not a campaign page, so nothing here departs
   from the real site's tokens:

     Poppins 400/700/800 ................. the site's only typeface
     #03633b  green ....................... the one accent — every CTA
     #3131cc  blue ........................ utility bar + footer
     #003da5  nav-link blue ................ in-page nav links
     border-radius: 5px on buttons ........ soft rounded rectangle, not a pill,
                                             not square
     two-tier header ...................... blue utility bar + white nav,
                                             matching the real site exactly
   =========================================================================== */

:root {
  --green: #03633b;
  --green-dark: #024a2c;
  /* Same hue as brand green, lightened for legibility as a small "live"
     status dot against dark photography — not a new accent color. */
  --green-live: #16c172;
  --blue: #3131cc;
  --blue-dark: #2727a8;
  --nav-link: #003da5;
  --ink: #000000;
  --body: #4e4e4e;
  --white: #ffffff;
  --paper-2: #f4f6f9;
  --line: #e2e5ea;
  --line-strong: #cfd6df;
  --line-on-blue: rgba(255, 255, 255, 0.28);

  /* type scale, ratio 1.25 from 17px — carried from the driver-ad build for
     consistency across NWN's hiring properties (see CLAUDE.md: this ratio
     isn't itself sampled from the real site, which has no clean scale) */
  --t-2xs: 0.75rem;
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-base: 1.0625rem;
  --t-m: 1.3125rem;
  --t-l: 1.625rem;
  --t-xl: 2rem;
  --t-2xl: 2.5rem;
  --t-3xl: 3.5rem;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  --wrap: 1240px;
  --pad: var(--s5);
  --radius: 5px;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --fast: 180ms;

  /* Height of the sticky nav. Anchor jumps have to clear it or the nav sits
     on top of whatever you just jumped to. main.js measures the real nav and
     overwrites this on load and on resize — these are the fallbacks for
     before that runs (and if JS never does). */
  --nav-h: 90px;
}

@media (min-width: 900px) { :root { --pad: var(--s7); } }
@media (min-width: 1160px) { :root { --nav-h: 104px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Every in-page anchor stops this far short of the top, so a section
     lands just under the nav instead of behind it. */
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.on-blue :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 300;
  background: var(--green); color: #fff;
  padding: var(--s3) var(--s5); font-weight: 700; text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.skip:focus { top: var(--s4); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

/* ---------- type roles ----------
   Two registers, both real: body headings are normal-case 700 (how NW
   Navigator sets h1-h6 inside page content), hero/section titles are
   uppercase 800 (how their page-builder's title component sets big display
   type). Using the wrong one in the wrong place is the fastest way to drift
   off-brand, so they're named for where each belongs. */

.display {
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.heading {
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-2xs);
  color: var(--green);
}
.on-blue .eyebrow, .hero .eyebrow { color: #fff; }

.prose { max-width: 38rem; color: var(--body); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: var(--s5); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose h2 { font: inherit; font-weight: 700; color: var(--ink); font-size: var(--t-l); margin-top: var(--s8); margin-bottom: var(--s4); }
.prose > h2:first-child { margin-top: 0; }
.prose ul { display: grid; gap: var(--s3); }
.prose li { position: relative; padding-left: var(--s5); }
.prose li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}

/* ---------- buttons ----------
   Real-site values: solid green, white text, Poppins 700 uppercase,
   letter-spacing ~0.8px, 5px radius — a soft rounded rectangle. Not a pill,
   not square. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  background: var(--green); color: #fff;
  font-weight: 700; font-size: var(--t-s);
  text-transform: uppercase; letter-spacing: 0.05em;
  text-decoration: none; text-align: center; white-space: nowrap;
  padding: 14px 28px; border: none; border-radius: var(--radius);
  transition: background var(--fast) var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform var(--fast) var(--ease); }
.btn:hover { background: var(--green-dark); }
.btn:hover svg { transform: translateX(3px); }
.btn--lg { font-size: var(--t-base); padding: 18px 38px; }
.btn--white { background: #fff; color: var(--green); }
.btn--white:hover { background: var(--paper-2); }
.btn--ghost {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.55);
}
.btn--ghost:hover { background: rgba(255,255,255,0.12); }
.btn--disabled, .btn--disabled:hover {
  background: var(--line-strong); color: #8a8f98; cursor: default; pointer-events: none;
}

/* ---------- main nav ---------- */

.nav {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.nav .wrap {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s3) var(--s6); padding-block: var(--s3);
}

.nav-logo { flex: none; transition: opacity var(--fast) var(--ease); }
.nav-logo img { width: 180px; height: auto; display: block; }
@media (min-width: 1160px) { .nav-logo img { width: 220px; } }
.nav-logo:hover { opacity: 0.68; }
.nav-logo:active { opacity: 0.52; }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.main-nav a {
  display: block; text-decoration: none;
  color: var(--nav-link); font-weight: 600;
  font-size: var(--t-s); text-transform: uppercase; letter-spacing: 0.06em;
}
.main-nav a:hover { color: var(--blue); }
/* Higher specificity than ".main-nav a" above is required here — without it
   that rule's color and display:block both win over .btn's (same-specificity
   tiebreak goes to source order), leaving the button text nearly invisible
   AND stacking its icon above the label instead of beside it. */
.main-nav a.btn, .main-nav a.btn:hover { color: #fff; display: inline-flex; }

/* ---------- Careers pill ----------
   The one deliberate style break from the real site's 5px-radius buttons:
   a fully-rounded pill for the primary "Careers" nav CTA, modeled on
   careers.nike.com's own nav button. Nike's is a white pill because it
   sits on a dark photo; ours stays brand green because it sits on our white
   nav, where white would disappear. Every other button (Apply Now, View
   Job...) keeps the real site's 5px radius. */
.btn--pill { border-radius: 999px; padding-inline: 26px; }

/* ---------- hero (home) ---------- */

.hero { position: relative; color: #fff; overflow: hidden; background: #111; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  animation: heroSettle 6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Two layers: a bottom-weighted fade so the headline (hero-inner is
     bottom-anchored) sits on near-black, plus a soft vignette that dims
     the corners — the photo is a bright daylight shot with white uniform
     shirts and reflective bus paint, busy enough to fight white text
     without both. */
  background:
    radial-gradient(120% 120% at 50% 32%, transparent 45%, rgba(0,0,0,0.4) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.28) 25%, rgba(0,0,0,0.58) 55%, rgba(0,0,0,0.93) 100%);
}
.hero-inner {
  position: relative;
  padding-block: var(--s9) var(--s8);
  min-height: 74vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (min-width: 900px) { .hero-inner { min-height: 88vh; padding-block: var(--s10) var(--s9); } }

.hero-content > * { animation: heroRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.15s; }
.hero-content > *:nth-child(3) { animation-delay: 0.28s; }
.hero-content > *:nth-child(4) { animation-delay: 0.4s; }

/* "Now hiring" — a glass pill rather than plain text, with a live-status
   dot (pulsing ring) instead of a flat one. This is the one flourish on
   the page that argues "this listing is real, right now," so it earns
   the extra polish. */
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 9px 18px 9px 14px; border-radius: 999px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: var(--t-2xs); color: #fff;
}
.live-dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-live); flex: none;
}
.live-dot::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: var(--green-live);
  animation: livePulse 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.hero h1 { font-size: clamp(2.5rem, 6.5vw, 4.5rem); margin-block: var(--s5) var(--s5); max-width: 17ch; }
.hero-sub { font-size: var(--t-m); max-width: 42ch; color: rgba(255,255,255,0.92); margin-bottom: var(--s6); }
.hero-actions { display: flex; gap: var(--s4); flex-wrap: wrap; }

.scroll-cue {
  position: absolute; left: 50%; bottom: var(--s6); transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  animation: heroRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both, scrollBounce 2.2s ease-in-out 1.2s infinite;
  display: none;
}
@media (min-width: 700px) { .scroll-cue { display: block; } }
.scroll-cue svg { width: 22px; height: 22px; }
.scroll-cue:hover { color: #fff; }

@keyframes heroSettle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scrollBounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@keyframes livePulse {
  0% { transform: scale(0.7); opacity: 0.7; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- why section ---------- */

.section { padding-block: var(--s9); }
.section--alt { background: var(--paper-2); }
.section-head { max-width: 42rem; margin-bottom: var(--s7); }
.section-head p { color: var(--body); font-size: var(--t-m); margin-top: var(--s4); }
.section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); }

.stats { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 620px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s6) var(--s5);
}
.stat-figure {
  display: block; font-weight: 800; color: var(--green);
  font-size: var(--t-2xl); line-height: 1.1; margin-bottom: var(--s3);
}
.stat-label { color: var(--ink); font-weight: 600; font-size: var(--t-s); line-height: 1.5; }

/* ---------- why stories ----------
   Alternating photo+copy blocks, careers.nike.com's "Culture in Action" /
   "From the Inside Out" pattern — one claim, one real photo per block,
   image and copy swapping sides so the rhythm doesn't feel like a
   repeating template. Lives inline in the homepage's #why section. */

.stories { display: grid; gap: var(--s9); margin-top: var(--s9); }
.story { display: grid; gap: var(--s6); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .story { grid-template-columns: 1fr 1fr; gap: var(--s9); }
  .story--reverse .story-media { order: 2; }
}
.story-media img { width: 100%; height: auto; }
.story-copy { max-width: 34rem; }
.story-title { color: var(--ink); font-size: clamp(1.75rem, 3.5vw, 2.25rem); margin-block: var(--s3) var(--s4); }
.story-copy p { color: var(--body); font-size: var(--t-base); }

/* ---------- fleet band ----------
   Full-bleed band showing one photo at a time, cross-fading on a 5s timer
   (fleet.js), with Nike-style notches bottom-left. Class names still say
   "fleet" from when this section was only about the vehicles; it now covers
   the whole team. Renaming would churn the CSS and JS for no visible gain. */

.fleet-band {
  position: relative; overflow: hidden;
  background: #0b0d0c; color: #fff;
  padding-block: var(--s10);
  min-height: 660px; display: flex; align-items: center;
}
@media (max-width: 700px) { .fleet-band { min-height: 0; padding-block: var(--s9); } }

.fleet-stage { position: absolute; inset: 0; }
.fleet-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 900ms var(--ease);
}
.fleet-slide.is-active { opacity: 1; }
.fleet-slide picture, .fleet-slide img { display: block; width: 100%; height: 100%; }
/* Slow drift while a slide is up — settles rather than sits dead still. */
.fleet-slide img { object-fit: cover; transform: scale(1.06); }
.fleet-slide.is-active img { transform: scale(1); transition: transform 8s linear; }

/* Two layers: an overall darkening so no photo ever gets bright enough to
   fight the type, plus a heavier left-side gradient under the copy column. */
.fleet-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,10,9,0.95) 0%, rgba(8,10,9,0.88) 38%, rgba(8,10,9,0.55) 68%, rgba(8,10,9,0.42) 100%),
    linear-gradient(180deg, rgba(8,10,9,0.5) 0%, rgba(8,10,9,0.25) 40%, rgba(8,10,9,0.72) 100%);
}

/* Two layers: an overall darkening so no photo ever gets bright enough to
   fight the type, plus a heavier left-side gradient under the copy column. */
.fleet-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,10,9,0.95) 0%, rgba(8,10,9,0.88) 38%, rgba(8,10,9,0.55) 68%, rgba(8,10,9,0.42) 100%),
    linear-gradient(180deg, rgba(8,10,9,0.5) 0%, rgba(8,10,9,0.25) 40%, rgba(8,10,9,0.72) 100%);
}
@media (max-width: 700px) {
  .fleet-scrim { background: linear-gradient(180deg, rgba(8,10,9,0.88) 0%, rgba(8,10,9,0.8) 55%, rgba(8,10,9,0.92) 100%); }
}

.fleet-overlay { position: relative; z-index: 2; max-width: var(--wrap); width: 100%; }
.fleet-band .eyebrow { color: #fff; }
.fleet-headline {
  color: #fff; max-width: 16ch;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-block: var(--s4) var(--s5);
}
.fleet-lede { color: rgba(255,255,255,0.88); font-size: var(--t-m); max-width: 40ch; }

.fleet-support {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-top: var(--s6); padding: var(--s4) var(--s5);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.26);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; color: #fff;
  font-weight: 700; font-size: var(--t-s);
}
.fleet-support-icon { flex: none; width: 20px; height: 20px; color: var(--green-live); }

/* Caption + notches, bottom-left of the band. */
.fleet-controls { margin-top: var(--s8); }
.fleet-caption {
  font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.8);
  margin-bottom: var(--s4); min-height: 1.2em;
}

.fleet-dots { display: flex; gap: 8px; }
.fleet-dot {
  position: relative;
  width: 42px; height: 3px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255,255,255,0.28); cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.fleet-dot:hover { background: rgba(255,255,255,0.55); }
.fleet-dot.is-active { background: #fff; }
/* Bigger invisible hit area than the 3px bar, so it's actually tappable. */
.fleet-dot::before { content: ""; position: absolute; inset: -14px -4px; }

/* ---------- mission ----------
   The company's own published mission and values, as a standalone
   statement band rather than a third photo+text block — three of the same
   shape in a row would read as a repeating template. Deliberately quieter
   than the hero: no photo, no motion, just the words on a flat tint. */

.mission { background: var(--paper-2); text-align: center; }
.mission-statement {
  color: var(--ink); font-size: clamp(2rem, 5vw, 3.5rem);
  max-width: 22ch; margin: var(--s4) auto var(--s5); letter-spacing: -0.01em;
}
.mission-lead { color: var(--body); font-size: var(--t-m); max-width: 46ch; margin: 0 auto var(--s8); }

.mission-values {
  list-style: none; padding: 0; margin: 0 auto; max-width: 54rem;
  display: grid; grid-template-columns: 1fr; gap: var(--s4); text-align: left;
}
@media (min-width: 700px) { .mission-values { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s8); } }
.mission-values li {
  position: relative; padding-left: var(--s6);
  font-weight: 600; color: var(--ink); font-size: var(--t-base);
}
.mission-values li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 16px; height: 2px; background: var(--green);
}

/* ---------- positions ---------- */

.positions-list { display: grid; gap: var(--s5); }

.job-card {
  display: grid; gap: var(--s5);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s6);
  transition: border-color var(--fast) var(--ease);
}
.job-card:hover { border-color: var(--line-strong); }
@media (min-width: 760px) {
  .job-card { grid-template-columns: 1fr auto; align-items: center; }
}

.job-card-title {
  font-weight: 700; font-size: var(--t-l); color: var(--ink);
  text-decoration: none; display: inline-block; margin-bottom: var(--s3);
}
.job-card-title:hover { color: var(--green); }

.job-meta { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.job-meta-item {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-s); color: var(--body);
}
.job-meta-item svg { width: 16px; height: 16px; flex: none; color: var(--green); }
.job-meta-item b { color: var(--ink); font-weight: 600; }

.job-card-cta { justify-self: start; }
@media (min-width: 760px) { .job-card-cta { justify-self: end; } }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 12px; border-radius: var(--radius);
  /* Transparent border matching .tag's 1px solid — without it .tag's box
     is 2px taller than .badge's and the two sit slightly out of line
     wherever they appear side by side (e.g. the job page header). */
  border: 1px solid transparent;
  vertical-align: middle;
}
.badge--open { background: rgba(3, 99, 59, 0.1); color: var(--green); }
.badge--closed { background: var(--line); color: #6b7280; }
.badge-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
/* Same live-pulse as the hero badge, scoped to open postings only — a
   "Filled" badge has no business looking active. */
.badge--open .badge-dot::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: var(--green-live);
  animation: livePulse 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

/* Career-area tag (Driving, Maintenance, Sales, Corporate...) — neutral,
   distinct from the green/gray status badge so the two read as separate
   facets: one is "is this open," the other is "what kind of job is this." */
.tag {
  display: inline-flex; align-items: center;
  font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 12px; border-radius: var(--radius);
  background: var(--paper-2); color: var(--body); border: 1px solid var(--line);
  margin-left: var(--s3); vertical-align: middle;
}

.empty-state {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: var(--s7); text-align: center; color: var(--body);
}

/* ---------- FAQ ----------
   Native <details>/<summary> — keyboard- and screen-reader-accessible
   disclosure with no JS. The default marker triangle is hidden in favor of
   a plus that rotates into an x, matching the rest of the icon language. */

.faq { max-width: 46rem; margin-top: var(--s7); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding-block: var(--s5); font-weight: 600; color: var(--ink); font-size: var(--t-base);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--green); }
.faq-icon { flex: none; width: 18px; height: 18px; color: var(--green); transition: transform var(--fast) var(--ease); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding-bottom: var(--s5); margin-top: -8px; color: var(--body); max-width: 60ch; }

/* ---------- job detail page ----------
   Single column, modeled on careers.nike.com's own job page: a back link,
   title, a flat label/value metadata list, Apply right under it, then the
   full description at one readable column width. No sidebar, no photo
   banner — Nike's job pages don't carry one either, and a posting is a
   reference document a candidate reads start to finish, not a landing
   page with a hero to sell. Apply repeats at the bottom to close it out. */

.job-page { padding-block: var(--s8) var(--s9); }
/* Wider than the old 46rem shell — the title and meta grid can use the
   extra room (meta grid goes to three columns at this width), while the
   prose itself stays narrower on its own (see .job-prose) so paragraph
   lines don't run past a comfortable measure. */
.job-col { max-width: 64rem; }

.breadcrumb { font-size: var(--t-xs); color: var(--body); margin-bottom: var(--s6); }
.breadcrumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--nav-link); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb svg { width: 14px; height: 14px; }

.job-page h1 { font-size: clamp(1.875rem, 4.5vw, 3.25rem); margin-block: var(--s3) var(--s6); max-width: 28ch; }

.job-meta-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s5);
  padding: var(--s6) 0; border-block: 1px solid var(--line);
}
@media (min-width: 620px) { .job-meta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .job-meta-grid { grid-template-columns: repeat(3, 1fr); } }
.job-meta-grid dt { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--body); margin-bottom: 4px; }
.job-meta-grid dd { font-weight: 700; color: var(--ink); font-size: var(--t-base); }
/* Pay is the one fact every candidate scans for first — same grid, same
   position as every other field, just weighted so the eye lands there
   first instead of reading all six as equally important. */
.job-meta-grid dd.pay-figure { color: var(--green); font-size: var(--t-l); font-weight: 800; }

.job-apply-row { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; padding-block: var(--s6); }
.job-apply-row--end { border-top: 1px solid var(--line); margin-top: var(--s3); }
.spec-note { font-size: var(--t-xs); color: var(--body); margin: 0; }

/* Prose keeps its own narrower measure (inherited from .prose, ~38rem ≈
   65-75 characters) inside the wider shell above — a wide page with
   full-width paragraphs is harder to read, not more generous. */
.job-prose { padding-block: var(--s3); }

/* A "**Term** — value" bullet list (pay perks, equipment specs) renders as
   this instead of plain bullets — a bordered row per fact, term left,
   value right, closer to a real spec sheet than a wall of dots. */
.spec-list {
  display: grid; gap: 0; margin: var(--s2) 0 var(--s6);
  border-top: 1px solid var(--line);
}
.spec-list > div {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding-block: var(--s4); border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .spec-list > div { grid-template-columns: 12rem 1fr; gap: var(--s4); align-items: baseline; }
}
.spec-list dt { font-weight: 700; color: var(--ink); }
.spec-list dd { margin: 0; color: var(--body); }

/* ---------- footer ----------
   Same structural pattern as the driver-ad site's footer, which itself
   matches the real nwnavigator.com footer: blue ground, reversed logo, the
   compass watermark bleeding off the edge, column widgets, a copyright bar. */

.site-footer { position: relative; overflow: hidden; background: var(--blue); color: #fff; }
.footer-compass {
  position: absolute; right: -90px; top: 50%; transform: translateY(-50%);
  width: 420px; height: auto; opacity: 0.09; pointer-events: none;
}
@media (max-width: 900px) { .footer-compass { width: 300px; right: -110px; } }
.site-footer .wrap { position: relative; }

.footer-top {
  display: grid; grid-template-columns: 1fr; gap: var(--s6);
  align-items: start; padding-block: var(--s9) var(--s7);
  border-bottom: 1px solid var(--line-on-blue);
}
@media (min-width: 860px) { .footer-top { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--s8); } }

.footer-logo-link { display: inline-block; transition: opacity var(--fast) var(--ease); }
.footer-logo-link:hover { opacity: 0.84; }
.footer-logo { width: 280px; max-width: 88%; height: auto; }
@media (min-width: 860px) { .footer-logo { width: 320px; } }
.footer-tag { margin-top: var(--s5); font-size: var(--t-base); line-height: 1.6; max-width: 34rem; color: rgba(255,255,255,0.9); }

.footer-cols { display: grid; grid-template-columns: 1fr; gap: var(--s7); padding-block: var(--s7); }
@media (min-width: 620px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .footer-cols { grid-template-columns: repeat(4, 1fr); gap: var(--s8); } }
.footer-label { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.65); margin-bottom: var(--s3); font-weight: 700; }
.footer-cols p { font-size: var(--t-s); line-height: 1.65; }
.footer-cols p + p { margin-top: var(--s3); }
.footer-cols a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); }
.footer-cols a:hover { border-bottom-color: #fff; }

.footer-social-row { display: flex; gap: var(--s5); padding-bottom: var(--s7); }
.footer-social-row a { width: 20px; height: 20px; color: #fff; opacity: 0.85; }
.footer-social-row a:hover { opacity: 1; }
.footer-social-row svg { width: 100%; height: 100%; }

.footer-bar { background: rgba(0,0,0,0.15); font-size: var(--t-xs); }
.footer-bar .wrap { padding-block: var(--s5); display: flex; flex-direction: column; gap: 6px; }
.footer-bar p { color: rgba(255,255,255,0.75); line-height: 1.6; }

/* ---------- 404 ---------- */
.notfound { text-align: left; padding-block: var(--s10); }
.notfound p { color: var(--body); margin-block: var(--s4) var(--s6); max-width: 40ch; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn svg, .nav-logo, .job-card, .footer-logo-link { transition: none; }
  .hero-bg img, .hero-content > *, .scroll-cue {
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
  /* fleet.js skips its timer under reduced motion, so the band holds on
     whichever slide is up and the notches stay as manual controls. */
  .fleet-slide { transition: none !important; }
  .fleet-slide img, .fleet-slide.is-active img { transform: none !important; transition: none !important; }
  .scroll-cue { transform: translateX(-50%) !important; }
  .live-dot::before, .badge--open .badge-dot::before { animation: none !important; display: none; }
}