:root {
  --ink: #061923;
  --ink-soft: #0d2c3a;
  --steel: #9aa8ac;
  --line: rgba(7, 31, 42, .16);
  --paper: #f2f2ef;
  --white: #fff;
  --signal: #eb6226;
  --blue: #17679a;
  --olive: #4d5c53;
}

* { box-sizing: border-box; }
.skip-link { position: fixed; z-index: 9999; left: 16px; top: 12px; padding: 11px 15px; color: #fff; background: #071b25; border: 2px solid var(--signal); font-weight: 800; transform: translateY(-160%); transition: transform .18s ease; }
.skip-link:focus { transform: translateY(0); }
html { scroll-behavior: smooth; }
section[id], aside[id] { scroll-margin-top: 76px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
h1, h2, h3, strong, .primary-action, .header-cta, .submit-action { overflow-wrap: normal; word-break: normal; hyphens: none; }

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  padding: 0 3.2vw;
  display: grid;
  grid-template-columns: 154px 1fr auto;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.24);
  color: #fff;
  transition: height .25s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled, .site-header.nav-open { height: 76px; border-bottom-color: rgba(255,255,255,.12); background: rgba(2,14,20,.94); box-shadow: 0 14px 40px rgba(0,0,0,.2); backdrop-filter: blur(18px) saturate(1.2); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 11px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3,20,28,.78), rgba(15,53,67,.4), rgba(3,20,28,.76)), url("/blue-ox/assets/optifade-reference-texture-v1.webp") center 47% / 520px auto repeat-x; mix-blend-mode: multiply; transition: opacity .25s ease; animation: optifade-rail 32s linear infinite; }
.site-header.is-scrolled::after, .site-header.nav-open::after { opacity: .42; }
.brand img { display: block; width: 104px; height: auto; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
nav { display: flex; gap: clamp(.72rem, 1vw, 1.15rem); padding-left: 1rem; }
nav a, .nav-group-toggle, .recruiter-link {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .095em;
  white-space: nowrap;
  text-transform: uppercase;
}
nav a { position: relative; }
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background: var(--signal);
  transition: width .25s ease;
}
nav a:hover::after, nav a:focus-visible::after, nav a.is-active::after { width: 100%; }
.nav-group { position: relative; }
.nav-group-toggle { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: white; cursor: pointer; }
.nav-group-toggle span { color: var(--signal); font-size: .95rem; line-height: 1; transition: transform .25s ease; }
.nav-group.is-open .nav-group-toggle span { transform: rotate(45deg); }
.nav-group-toggle::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 0; height: 2px; background: var(--signal); transition: width .25s ease; }
.nav-group-toggle:hover::after, .nav-group-toggle:focus-visible::after, .nav-group.is-active .nav-group-toggle::after, .nav-group.is-open .nav-group-toggle::after { width: 100%; }
.nav-menu { position: absolute; top: calc(100% + 23px); right: 0; display: grid; min-width: 205px; padding: 9px; border: 1px solid rgba(255,255,255,.14); background: rgba(3,20,28,.98); box-shadow: 0 24px 60px rgba(0,0,0,.32); opacity: 0; visibility: hidden; transform: translateY(-7px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
.nav-group.is-open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu a { padding: 12px 13px; border-bottom: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.77); }
.nav-menu a:last-child { border-bottom: 0; }
.nav-menu a:hover, .nav-menu a:focus-visible, .nav-menu a.is-active { color: white; background: rgba(255,255,255,.045); }
.nav-menu a::after { bottom: 5px; left: 13px; }
.mobile-utilities { display: none; }
.header-actions { display: flex; align-items: center; gap: 1.6rem; }
.utility-links { display: flex; align-items: center; gap: .45rem; }
/* A faint dark, frosted backing keeps the pills legible over bright hero
   photos without competing with the orange Quick Apply. */
.utility-links a { white-space: nowrap; padding: 8px 11px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(4,20,28,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: rgba(255,255,255,.92); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.utility-links a:hover { border-color: rgba(255,255,255,.66); background: rgba(4,20,28,.6); color: white; }
.recruiter-link { font-size: .68rem; color: rgba(255,255,255,.78); }
.header-cta, .primary-action, .submit-action {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 0;
  background: var(--signal);
  color: white;
  text-transform: uppercase;
  font-family: Bahnschrift, "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: .075em;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  transition: filter .25s ease, box-shadow .25s ease;
}
.header-cta::before, .primary-action::before, .submit-action::before { content: ""; position: absolute; z-index: 2; top: -60%; bottom: -60%; left: -35%; width: 24%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); transform: skewX(-18deg) translateX(-220%); transition: transform .7s cubic-bezier(.2,.72,.2,1); }
.header-cta:hover, .primary-action:hover, .submit-action:hover { filter: brightness(1.045); box-shadow: 0 14px 34px rgba(235,98,38,.2); }
.header-cta:hover::before, .primary-action:hover::before, .submit-action:hover::before { transform: skewX(-18deg) translateX(700%); }
.header-cta { min-width: 176px; padding: 13px 21px; font-size: .7rem; }
.cta-short, .nav-toggle { display: none; }
.nav-toggle { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(2,14,20,.18); color: white; }
.nav-toggle span { display: block; width: 17px; height: 2px; margin: 4px auto; background: currentColor; transition: transform .25s ease; }
.site-header.nav-open .nav-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }

.hero {
  position: relative;
  min-height: 820px;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
  color: white;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,14,21,.94) 0%, rgba(3,14,21,.74) 37%, rgba(3,14,21,.15) 66%, rgba(3,14,21,.24) 100%),
    linear-gradient(0deg, rgba(3,14,21,.68) 0%, transparent 35%);
}
.hero-copy {
  position: absolute;
  z-index: 2;
  left: clamp(42px, 6vw, 116px);
  top: 50%;
  width: min(52vw, 770px);
  transform: translateY(-47%);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-family: Bahnschrift, "Arial Narrow", sans-serif;
  font-size: .74rem;
  font-weight: 700;
  color: rgba(255,255,255,.78);
}
.eyebrow span { display: block; width: 42px; height: 2px; background: var(--signal); }
.eyebrow.dark { color: #53636a; }
.eyebrow.light { color: rgba(255,255,255,.65); }
.hero h1 {
  margin: 0;
  max-width: 820px;
  font-family: Bahnschrift, "Arial Narrow", sans-serif;
  /* The hero box is sized by viewport HEIGHT (100svh) but the headline was sized
     purely by viewport WIDTH, so stretching the window wide without making it
     taller grew the copy past the hero — it slid under the fixed header and
     spilled into the next section. The vh term caps the type to the space the
     hero actually has; on tall displays the width clamp still wins, so the
     designed size is unchanged there. */
  font-size: min(clamp(4.4rem, 7vw, 8.3rem), 12vh);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-lede {
  max-width: 630px;
  margin: 1.8rem 0 0;
  color: rgba(255,255,255,.84);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.55;
}
.hero-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 2rem; }
.primary-action { min-width: 240px; padding: 17px 21px; font-size: .78rem; }
.hero-proof {
  display: grid;
  grid-template-columns: 1.45fr .8fr 1fr .8fr;
  max-width: 760px;
  margin-top: 2.45rem;
  border-top: 1px solid rgba(255,255,255,.32);
  border-bottom: 1px solid rgba(255,255,255,.32);
}
.hero-proof div { padding: 14px 16px 13px 0; border-right: 1px solid rgba(255,255,255,.19); }
.hero-proof div:not(:first-child) { padding-left: 16px; }
.hero-proof div:last-child { border-right: 0; }
.hero-proof span, .role-row small {
  display: block;
  margin-bottom: 5px;
  color: rgba(255,255,255,.58);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.hero-proof strong { font-size: .79rem; line-height: 1.35; }
.schedule-value { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: .12rem .48rem; text-wrap: pretty; }
.schedule-value > span { display: inline-block !important; white-space: nowrap; }

.quick-start {
  position: absolute;
  z-index: 3;
  top: 118px;
  right: 3.2vw;
  width: min(390px, 30vw);
  min-width: 340px;
  padding: 35px 35px 28px;
  background: rgba(246,248,247,.96);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  border-top: 4px solid var(--signal);
  backdrop-filter: blur(16px);
}
.quick-texture {
  position: absolute;
  top: 0;
  right: 0;
  width: 112px;
  height: 112px;
  opacity: .28;
  background: url("/blue-ox/assets/optifade-reference-texture-v1.webp") 58% 44% / 310px auto no-repeat;
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  filter: saturate(.72) contrast(.92);
  mix-blend-mode: multiply;
}
.quick-index { margin: 0 0 .75rem; color: var(--blue); font: 700 .68rem/1 Bahnschrift, sans-serif; letter-spacing: .12em; }
.quick-start h2 { margin: 0; max-width: 280px; font: 700 2.05rem/.98 Bahnschrift, sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.quick-intro { margin: 1rem 0 1.3rem; color: #506169; font-size: .88rem; line-height: 1.5; }
.quick-start form { display: grid; gap: .85rem; }
.quick-start label span { display: block; margin-bottom: .38rem; color: #40545e; font-size: .62rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.quick-start input, .quick-start select {
  width: 100%;
  height: 43px;
  border: 0;
  border-bottom: 1px solid #9ba9ae;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  outline: none;
  font-size: .87rem;
}
.quick-start input:focus, .quick-start select:focus { border-bottom-color: var(--signal); box-shadow: 0 1px 0 var(--signal); }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.submit-action { width: 100%; min-height: 48px; margin-top: .2rem; padding: 0 20px; font-size: .72rem; }
.not-ready { justify-self: start; border-bottom: 1px solid #829096; color: #42565f; font-size: .77rem; font-weight: 600; }
.official-apply-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border: 1px solid rgba(23,103,154,.32); color: var(--blue); font-size: .69rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.official-apply-link[hidden] { display: none; }
.form-status { min-height: 18px; margin: 0; color: var(--blue); font-size: .74rem; font-weight: 700; }
.scroll-cue {
  position: absolute;
  z-index: 3;
  left: 3.2vw;
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255,255,255,.7);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.scroll-cue i { display: block; width: 70px; height: 1px; background: rgba(255,255,255,.55); }

.openings { padding: 120px max(5vw, 34px) 130px; background: #f0f1ef; }
.section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 4rem; margin-bottom: 52px; }
.section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -14px; }
.section-heading h2, .work-copy h2 { margin: 0; font: 700 clamp(2.7rem, 4vw, 4.9rem)/.96 Bahnschrift, sans-serif; letter-spacing: -.05em; text-transform: uppercase; }
.section-heading > p { max-width: 570px; margin: 0; color: #5a6a71; font-size: 1rem; line-height: 1.55; }
.role-ledger { border-top: 2px solid var(--ink); }
.role-row {
  width: 100%;
  display: grid;
  grid-template-columns: 64px minmax(220px, 1.4fr) 1.1fr .8fr .8fr 30px;
  align-items: center;
  gap: 1.4rem;
  min-height: 106px;
  padding: 20px 15px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.role-row:hover, .role-row:focus-visible, .role-row.active { background: var(--ink); color: white; transform: translateX(7px); }
.role-number { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%; font: 700 .9rem Bahnschrift, sans-serif; }
.role-row small { color: #738188; }
.role-row.active small, .role-row:hover small { color: rgba(255,255,255,.55); }
.role-row strong { display: block; font-size: .84rem; line-height: 1.25; }
.role-place strong { font: 700 1rem/1.2 Bahnschrift, sans-serif; text-transform: uppercase; }
.row-arrow { justify-self: end; font-size: 1.4rem; color: var(--signal); }
.general-apply { margin-top: 30px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--ink); color: #fff; border-left: 4px solid var(--signal); box-shadow: 0 18px 44px rgba(7, 31, 42, .16); }
.general-apply-copy small { display: block; margin-bottom: 7px; color: var(--signal); font: 700 .6rem Bahnschrift, "Arial Narrow", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.general-apply-copy strong { font: 750 1.15rem/1.25 Bahnschrift, "Arial Narrow", sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.opening-source-note { max-width: 780px; margin: 26px 0 0 auto; color: #66767d; font-size: .76rem; line-height: 1.55; text-align: right; }

.role-dialog { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; background: transparent; color: var(--ink); }
.role-dialog::backdrop { background: rgba(1,11,16,.78); backdrop-filter: blur(9px); }
.role-dialog-shell { position: relative; padding: clamp(30px, 5vw, 64px); border-top: 5px solid var(--signal); background: #f4f5f2; box-shadow: 0 35px 110px rgba(0,0,0,.42); }
.role-dialog-close { position: absolute; top: 18px; right: 20px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(7,31,42,.2); border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.55rem; line-height: 1; }
.role-dialog-location { width: fit-content; min-width: 230px; display: grid; grid-template-columns: 42px auto; align-items: center; gap: 12px; margin: 0 60px 22px 0; padding: 10px 17px 10px 10px; border: 1px solid rgba(7,31,42,.2); border-left: 4px solid var(--signal); background: #fff; box-shadow: 0 13px 32px rgba(7,31,42,.08); }
.role-dialog-location-mark { display: grid; place-items: center; width: 40px; height: 40px; background: var(--ink); color: white; }
.role-dialog-location-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.role-dialog-location-copy { display: grid; gap: 3px; }
.role-dialog-location-copy small { color: #6b7a80; font-size: .57rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.role-dialog-location-copy strong { color: var(--ink); font: 750 1.05rem/1.1 Bahnschrift, sans-serif; letter-spacing: .025em; text-transform: uppercase; }
.role-dialog h2 { max-width: 820px; margin: 0 55px 28px 0; font: 700 clamp(2.2rem, 4vw, 4.6rem)/.94 Bahnschrift, sans-serif; letter-spacing: -.05em; text-transform: uppercase; }
.role-dialog-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; border-block: 1px solid rgba(7,31,42,.18); }
.role-dialog-facts div { min-height: 92px; padding: 20px 22px; border-right: 1px solid rgba(7,31,42,.14); }
.role-dialog-facts div:last-child { border-right: 0; }
.role-dialog-facts span, .role-dialog-facts strong { display: block; }
.role-dialog-facts span { margin-bottom: 7px; color: #667980; font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.role-dialog-facts strong { font: 700 .88rem/1.4 Bahnschrift, sans-serif; }
/* pre-line so the paragraph breaks in a multi-paragraph job description
   survive: the text is assigned with textContent, and without this the lane
   line a recruiter adds on its own line ("Dedicated: New Brighton, MN >
   Ames, IA") runs into the paragraph above it. */
.role-dialog-about { max-width: 900px; margin: 29px 0; color: #4f636b; font-size: 1rem; line-height: 1.7; white-space: pre-line; }
.role-dialog-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; padding: 28px 0; border-top: 1px solid rgba(7,31,42,.16); }
.role-dialog-columns h3 { margin: 0 0 16px; font: 700 .83rem Bahnschrift, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.role-dialog-columns ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.role-dialog-columns li { position: relative; padding-left: 20px; color: #53666d; font-size: .85rem; line-height: 1.5; }
.role-dialog-columns li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--signal); transform: rotate(45deg); }
.role-dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.role-dialog-actions .primary-action { min-width: 300px; justify-content: space-between; box-shadow: 0 16px 34px rgba(235,98,38,.18); }
body.dialog-open { overflow: hidden; }

.benefits {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(54px, 6vw, 110px);
  min-height: calc(100svh - 76px);
  padding: clamp(46px, 5.3vh, 66px) max(6vw, 50px) 0;
  overflow: hidden;
  background: #0a202b;
  color: white;
}
.benefits::before {
  content: "BENEFITS";
  position: absolute;
  left: -1.5vw;
  top: 25px;
  color: rgba(255,255,255,.025);
  font: 700 clamp(8rem, 17vw, 17rem)/1 Bahnschrift, sans-serif;
  letter-spacing: -.07em;
}
.benefits-intro, .benefit-ledger, .benefit-proof { position: relative; z-index: 1; }
.benefits-intro { align-self: start; max-width: 690px; }
.benefits h2, .founder h2 {
  margin: 0;
  font: 700 clamp(3rem, 4.8vw, 5.5rem)/.92 Bahnschrift, sans-serif;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.benefits h2 { font-size: clamp(2.9rem, 4.15vw, 4.7rem); line-height: .91; }
.benefits-intro > p {
  max-width: 590px;
  color: rgba(255,255,255,.68);
  font-size: .95rem;
  line-height: 1.58;
}
.eligibility-line {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 1.4rem;
  margin-top: 28px;
  padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.eligibility-line strong { color: white; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.eligibility-line span { color: rgba(255,255,255,.57); font-size: .8rem; line-height: 1.55; }
.benefit-ledger { border-top: 1px solid rgba(255,255,255,.28); }
.benefit-ledger article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.1rem;
  padding: 15px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.benefit-number { color: var(--signal); font: 700 .72rem Bahnschrift, sans-serif; letter-spacing: .08em; }
.benefit-ledger h3 { margin: -3px 0 6px; font: 700 .96rem Bahnschrift, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.benefit-ledger p { max-width: 700px; margin: 0; color: rgba(255,255,255,.62); font-size: .76rem; line-height: 1.42; }
.benefit-detail { margin-top: 8px; }
.benefit-detail summary { width: fit-content; cursor: pointer; color: rgba(255,255,255,.86); font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.benefit-detail[open] summary { color: var(--signal); }
.benefit-detail p { margin-top: 12px; padding-left: 16px; border-left: 2px solid rgba(235,98,38,.62); }
.med-panel { margin-top: 12px; padding-left: 16px; border-left: 2px solid rgba(235,98,38,.62); }
.med-detail .med-panel p { margin: 0; padding: 0; border: 0; }
.med-panel .med-lead { color: rgba(255,255,255,.78); }
.med-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; padding: 0; list-style: none; }
.med-chips li { padding: 5px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.72); font-size: .66rem; white-space: nowrap; }
.med-chips strong { color: var(--signal); font: 700 .78rem Bahnschrift, sans-serif; margin-right: 2px; }
.med-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.med-terms div { padding: 9px 11px; border-left: 2px solid rgba(255,255,255,.22); background: rgba(255,255,255,.03); }
.med-terms dt { color: white; font: 700 .64rem Bahnschrift, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.med-terms dd { margin: 4px 0 0; color: rgba(255,255,255,.62); font-size: .66rem; line-height: 1.4; }
.med-panel .med-fit { margin: -2px 0 9px; color: rgba(255,255,255,.8); font-size: .67rem; font-style: italic; line-height: 1.38; }
.med-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.med-plan { position: relative; padding: 13px 13px 12px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(150deg, rgba(20,59,76,.55), rgba(7,27,37,.55)); }
.med-plan.is-top { border-color: rgba(235,98,38,.55); box-shadow: inset 0 2px 0 var(--signal); }
.med-tag { display: block; color: var(--signal); font: 700 .58rem Bahnschrift, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.med-price { display: block; margin: 6px 0 9px; color: white; font: 700 1.25rem/1 Bahnschrift, sans-serif; letter-spacing: -.02em; }
.med-price small { display: block; margin-top: 3px; color: rgba(255,255,255,.55); font: 600 .62rem system-ui, sans-serif; letter-spacing: 0; }
.med-plan ul { margin: 0; padding: 0; list-style: none; }
.med-plan li { position: relative; padding: 0 0 5px 13px; color: rgba(255,255,255,.7); font-size: .68rem; line-height: 1.38; }
.med-plan li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.med-plan li.med-no { color: rgba(255,255,255,.48); }
.med-plan li.med-no::before { background: transparent; border: 1px solid rgba(255,255,255,.4); }
.med-panel .med-fine { margin-top: 10px; color: rgba(255,255,255,.44); font-size: .62rem; line-height: 1.45; }
@media (max-width: 900px) { .med-plans, .med-terms { grid-template-columns: 1fr; } .med-chips li { white-space: normal; } }
.benefit-proof {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(24px, 3.2vh, 38px);
  padding: 1px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.14);
  color: white;
}
.benefit-proof article { position: relative; min-height: 142px; padding: 19px 22px 21px; overflow: hidden; background: linear-gradient(145deg, #0e2d3a, #071b25); transition: background .25s ease, transform .25s ease; }
.benefit-proof article::after { content: ""; position: absolute; right: -18px; bottom: -24px; width: 118px; height: 118px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.018); }
.benefit-proof article:hover { z-index: 1; background: linear-gradient(145deg, #143b4c, #08212d); transform: translateY(-5px); }
.proof-index { display: block; margin-bottom: 15px; color: var(--signal); font: 700 .61rem Bahnschrift, sans-serif; letter-spacing: .13em; }
.benefit-proof strong { position: relative; z-index: 1; display: block; font: 700 clamp(1.25rem, 1.65vw, 1.85rem)/.92 Bahnschrift, sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.benefit-proof strong em { display: block; color: rgba(255,255,255,.54); font-style: normal; }
.benefit-proof p { position: relative; z-index: 1; max-width: 220px; margin: 10px 0 0; color: rgba(255,255,255,.58); font-size: .69rem; line-height: 1.42; }
.benefits-disclaimer { grid-column: 1 / -1; position: relative; z-index: 2; margin: 0; padding: 14px 0 18px; color: rgba(255,255,255,.48); font-size: .65rem; line-height: 1.45; }

.real-fleet { position: relative; padding: clamp(58px, 7vh, 82px) max(5vw, 36px) 0; overflow: hidden; background: #071a24; color: white; }
.real-fleet-heading { display: grid; grid-template-columns: 1fr; align-items: end; max-width: 1500px; margin: 0 auto clamp(28px, 4vh, 42px); }
.real-fleet-heading h2 { max-width: 850px; margin: 0; font: 700 clamp(3rem, 5vw, 6rem)/.92 Bahnschrift, sans-serif; letter-spacing: -.052em; text-transform: uppercase; }
.fleet-panorama { max-width: 1500px; margin: 0 auto; }
.fleet-panorama-stage { --focus-x: 50%; --focus-y: 52%; position: relative; width: 100%; max-height: min(48svh, 560px); aspect-ratio: 21 / 9; overflow: hidden; border: 1px solid rgba(255,255,255,.17); background: #0c2530; isolation: isolate; box-shadow: 0 34px 90px rgba(0,0,0,.33); }
.fleet-panorama-stage::before { content: ""; position: absolute; z-index: 100; inset: 0; pointer-events: none; background: radial-gradient(circle 190px at var(--focus-x) var(--focus-y), transparent 0 43%, rgba(235,98,38,.15) 44% 44.6%, transparent 45.3%), linear-gradient(0deg, rgba(2,14,20,.42), transparent 42%); opacity: 0; transition: opacity .25s ease; }
.fleet-panorama-stage:hover::before { opacity: 1; }
.fleet-panorama-plate { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.006); transform-origin: var(--focus-x) var(--focus-y); filter: saturate(.96) contrast(1.025) brightness(.96); transition: transform .7s cubic-bezier(.2,.75,.2,1), filter .35s ease; }
.fleet-panorama-stage:hover .fleet-panorama-plate { transform: scale(1.018); filter: saturate(1) contrast(1.03) brightness(1); }
.verified-unit-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 1500px; margin: 22px auto 0; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.verified-unit-rail article { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: 1fr 1fr; column-gap: 18px; min-height: 84px; padding: 10px; background: #0b2530; }
.verified-unit-rail img { grid-row: 1 / 3; width: 84px; height: 64px; align-self: center; object-fit: cover; filter: saturate(.8); }
.verified-unit-rail span { align-self: end; color: var(--signal); font-size: .6rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.verified-unit-rail strong { align-self: start; margin-top: 4px; font: 700 .75rem Bahnschrift, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.fleet-proof-line { display: grid; grid-template-columns: repeat(3, 1fr) minmax(215px,.8fr); max-width: 1500px; margin: 22px auto 0; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(110deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); box-shadow: 0 22px 65px rgba(0,0,0,.2); }
.fleet-proof-line > * { min-height: 112px; position: relative; display: grid; align-content: center; gap: 7px; padding: 22px 26px; border-right: 1px solid rgba(255,255,255,.12); color: white; text-transform: uppercase; overflow: hidden; }
.fleet-proof-line > *::after { content: ""; position: absolute; left: 26px; bottom: 0; width: 34px; height: 2px; background: var(--signal); transition: width .3s ease; }
.fleet-proof-line > *:hover::after { width: calc(100% - 52px); }
.fleet-proof-line small { color: var(--signal); font-size: .56rem; font-weight: 800; letter-spacing: .18em; }
.fleet-proof-line strong { font: 700 .84rem/1.15 Bahnschrift, sans-serif; letter-spacing: .045em; }
.fleet-proof-line em { color: rgba(255,255,255,.48); font-size: .6rem; font-style: normal; font-weight: 650; letter-spacing: .055em; }
.fleet-proof-line a { color: white; background: rgba(255,255,255,.055); }
.fleet-proof-line a:hover { background: var(--signal); }
.fleet-proof-line a:hover small,.fleet-proof-line a:hover em { color: white; }
.fleet-camo-band { height: 18px; margin: 58px -5vw 0; opacity: .58; background: url("/blue-ox/assets/optifade-reference-texture-v1.webp") center 47% / 560px auto repeat-x; filter: saturate(.74) contrast(.92); }

/* Keep the complete Fleet decision panel in the first desktop viewport. */
@media (min-width: 861px) {
  .real-fleet {
    height: calc(100svh - 76px);
    min-height: 690px;
    display: grid;
    grid-template-rows: auto minmax(250px, 1fr) auto 10px;
    padding-top: clamp(28px, 3.7vh, 42px);
  }
  .real-fleet-heading {
    align-items: center;
    margin-bottom: clamp(14px, 2.2vh, 24px);
  }
  .real-fleet-heading h2 { font-size: clamp(2.85rem, 4.35vw, 5.35rem); }
  .fleet-panorama { width: 100%; height: 100%; min-height: 0; }
  .fleet-panorama-stage { height: 100%; max-height: none; aspect-ratio: auto; }
  .fleet-proof-line { margin-top: clamp(10px, 1.5vh, 16px); }
  .fleet-proof-line > * { min-height: clamp(74px, 9.5vh, 94px); padding: 13px 22px; }
  .fleet-proof-line > *::after { left: 22px; }
  .fleet-camo-band { height: 10px; margin-top: clamp(8px, 1.2vh, 13px); }
}
.qualification-stop { margin-top: 18px; padding: 17px 19px; display: grid; gap: 6px; border-left: 4px solid var(--signal); background: #fff1e9; color: #122630; }
.qualification-stop[hidden] { display: none; }
.qualification-stop strong { font: 750 .82rem Bahnschrift, sans-serif; letter-spacing: .035em; text-transform: uppercase; }
.qualification-stop span { color: #52636b; font-size: .82rem; line-height: 1.55; }
.apply-submit-status { min-height: 1.4em; color: #155f7c; font-size: .78rem; font-weight: 700; line-height: 1.5; }

/* Amy recruiting-guide concept: local-only until public authority and data handling are approved. */
.amy-launch { position: fixed; z-index: 70; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 11px; min-width: 178px; padding: 12px 17px; border: 1px solid rgba(255,255,255,.22); color: white; background: linear-gradient(135deg,rgba(8,38,52,.97),rgba(12,71,96,.97)); box-shadow: 0 18px 55px rgba(1,17,24,.38); backdrop-filter: blur(12px); cursor: pointer; text-align: left; }
.amy-launch::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.06); pointer-events: none; }
.amy-launch > span:last-child { display: grid; gap: 2px; }
.amy-launch small { color: rgba(255,255,255,.56); font-size: .53rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.amy-launch strong { font: 750 .9rem Bahnschrift,sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.amy-pulse { width: 10px; height: 10px; border-radius: 50%; background: #50bde4; box-shadow: 0 0 0 5px rgba(80,189,228,.12),0 0 22px rgba(80,189,228,.72); }
.amy-dialog { width: min(440px,calc(100vw - 24px)); height: min(780px,calc(100vh - 24px)); max-height: min(780px,calc(100vh - 24px)); margin: auto 18px 18px auto; padding: 0; border: 1px solid rgba(255,255,255,.2); color: white; background: #071c26; box-shadow: 0 34px 100px rgba(0,0,0,.52); transition: width .28s ease,height .28s ease; }
.amy-dialog::backdrop { background: rgba(0,15,21,.35); backdrop-filter: blur(2px); }
.amy-shell { display: grid; grid-template-rows: auto auto minmax(120px,1fr) auto auto auto; height: 100%; max-height: inherit; }
.amy-dialog.is-chat-mode { width: min(620px,calc(100vw - 24px)); height: min(760px,calc(100vh - 24px)); }
.amy-dialog.is-chat-mode .amy-shell { grid-template-rows: auto auto minmax(0,1fr) auto auto; }
.amy-dialog.is-chat-mode .amy-prompts,.amy-dialog.is-chat-mode .amy-prefill { display: none; }
.amy-dialog.is-chat-mode .amy-messages { min-height: 0; padding: 24px; }
.amy-dialog.is-chat-mode .amy-message { max-width: 82%; font-size: .83rem; line-height: 1.65; }
.amy-dialog.is-chat-mode .amy-form { box-shadow: 0 -18px 42px rgba(0,0,0,.18); }
.amy-header { display: flex; align-items: center; gap: 12px; padding: 20px 20px 17px; border-bottom: 1px solid rgba(255,255,255,.12); background: linear-gradient(115deg,#0a3041,#0b202b); }
.amy-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); background: linear-gradient(145deg,#1f7dad,#0c4965); font: 800 1.25rem Bahnschrift,sans-serif; box-shadow: inset 0 0 0 4px rgba(255,255,255,.04); }
.amy-header > div:nth-child(2) { flex: 1; display: grid; gap: 1px; }
.amy-header small { color: #ff7844; font-size: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.amy-header h2 { margin: 0; font: 800 1.42rem/1 Bahnschrift,sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.amy-header span { color: rgba(255,255,255,.52); font-size: .62rem; }
.amy-header i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #f0ad4e; }
.amy-header [data-amy-close] { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.13); color: white; background: transparent; font-size: 1.4rem; cursor: pointer; }
.amy-trust { display: grid; gap: 5px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.09); background: url("/blue-ox/assets/optifade-reference-texture-v1.webp") center 44% / 420px auto; position: relative; isolation: isolate; }
.amy-trust::before { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(5,31,42,.89); }
.amy-trust strong { font: 750 .75rem Bahnschrift,sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.amy-trust span { color: rgba(255,255,255,.62); font-size: .69rem; line-height: 1.5; }
.amy-messages { display: flex; flex-direction: column; gap: 10px; min-height: 150px; padding: 18px 20px; overflow: auto; background: radial-gradient(circle at 100% 0,rgba(37,119,151,.13),transparent 42%); }
.amy-message { max-width: 88%; padding: 11px 13px; color: #d9e6ea; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); font-size: .76rem; line-height: 1.55; }
.amy-message.is-user { align-self: flex-end; color: #09212b; background: #edf4f4; border-color: #edf4f4; }
.amy-prompts { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 20px 15px; }
.amy-prompts button { padding: 8px 10px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75); background: rgba(255,255,255,.035); font-size: .62rem; font-weight: 700; cursor: pointer; }
.amy-prompts button:hover { border-color: #ff6a2e; color: white; }
.amy-form { padding: 15px 20px 17px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.12); }
.amy-form > label { display: block; margin-bottom: 8px; color: rgba(255,255,255,.58); font-size: .57rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.amy-form > div { display: grid; grid-template-columns: 1fr 48px; }
.amy-form input { min-width: 0; height: 48px; padding: 0 13px; border: 1px solid rgba(255,255,255,.16); border-right: 0; color: white; background: rgba(255,255,255,.055); outline: none; }
.amy-form input:focus { border-color: #58bce1; }
.amy-form button { border: 0; color: white; background: var(--signal); font-size: 1.05rem; cursor: pointer; }
.amy-form > small { display: block; margin-top: 8px; color: rgba(255,255,255,.39); font-size: .57rem; line-height: 1.45; }
.amy-prefill { margin: 0 20px 16px; padding: 16px; display: grid; gap: 12px; border: 1px solid rgba(89,190,227,.28); background: linear-gradient(145deg,rgba(20,93,122,.24),rgba(7,28,38,.72)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.amy-prefill[hidden] { display: none; }
.amy-prefill > div:first-child { display: grid; gap: 4px; padding-bottom: 3px; }
.amy-prefill small { color: #ff7844; font-size: .53rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.amy-prefill strong { font: 750 .88rem Bahnschrift,sans-serif; letter-spacing: .025em; text-transform: uppercase; }
.amy-prefill span { color: rgba(255,255,255,.58); font-size: .64rem; line-height: 1.45; }
.amy-prefill label { display: grid; gap: 5px; color: rgba(255,255,255,.55); font-size: .53rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.amy-prefill input,.amy-prefill select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 0; color: white; background: rgba(255,255,255,.055); outline: none; }
.amy-prefill input:focus,.amy-prefill select:focus { border-color: #58bce1; }
.amy-prefill select option { color: #071c26; background: white; }
.amy-prefill-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.amy-prefill > button { min-height: 43px; border: 0; color: white; background: var(--signal); font: 750 .66rem Bahnschrift,sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.amy-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.12); }
.amy-actions > * { min-height: 50px; display: grid; place-items: center; border: 0; border-right: 1px solid rgba(255,255,255,.12); color: white; background: rgba(255,255,255,.04); font: 750 .63rem Bahnschrift,sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.amy-actions > *:first-child { background: #116b91; }
@media (max-width: 600px) { .amy-launch { right: 12px; bottom: 12px; min-width: 148px; padding: 10px 12px; } .amy-dialog,.amy-dialog.is-chat-mode { margin: auto; width: calc(100vw - 16px); height: calc(100vh - 16px); max-height: calc(100vh - 16px); } .amy-dialog.is-chat-mode .amy-trust { display: none; } .amy-dialog.is-chat-mode .amy-messages { padding: 18px 15px; } .amy-dialog.is-chat-mode .amy-message { max-width: 92%; } }

.work { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 760px; background: var(--ink); color: white; }
.work-media { position: relative; min-height: 650px; overflow: hidden; }
.work-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--ink) 100%); }
.work-media img { width: 100%; height: 100%; object-fit: cover; object-position: 43% center; filter: saturate(.84) contrast(1.04); }
.work-unit-plaque { position: absolute; z-index: 2; left: 7%; bottom: 8%; display: grid; gap: 4px; min-width: 260px; padding: 18px 22px 17px; border-left: 4px solid var(--signal); background: rgba(4,19,27,.78); box-shadow: 0 18px 45px rgba(0,0,0,.25); backdrop-filter: blur(12px); }
.work-unit-plaque span, .work-unit-plaque small { color: rgba(255,255,255,.56); font-size: .58rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.work-unit-plaque strong { font: 700 1.1rem Bahnschrift, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.work-copy { align-self: center; max-width: 680px; padding: 80px 7vw 80px 4vw; }
.work-copy h2 { max-width: 640px; }
.work-copy > p { max-width: 580px; color: rgba(255,255,255,.68); font-size: 1.05rem; line-height: 1.68; }
.work-points { margin: 42px 0 35px; border-top: 1px solid rgba(255,255,255,.18); }
.work-points div { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.work-points strong { font-size: .83rem; text-transform: uppercase; letter-spacing: .04em; }
.work-points span { color: rgba(255,255,255,.62); font-size: .86rem; }
.text-link { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid var(--signal); color: white; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

/* Branded application experience */
.application-page { min-height: 100vh; background: #071a24; }
.apply-header { position: fixed; z-index: 20; inset: 0 0 auto; height: 78px; display: grid; grid-template-columns: 180px 1fr auto; align-items: center; padding: 0 3.2vw; border-bottom: 1px solid rgba(255,255,255,.15); background: rgba(4,20,29,.95); color: white; backdrop-filter: blur(16px); }
.apply-brand img { display: block; width: 105px; }
.apply-header-center { display: grid; gap: 2px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.2); }
.apply-header-center span { color: rgba(255,255,255,.48); font-size: .57rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.apply-header-center strong { font: 700 .78rem Bahnschrift, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.apply-header-actions { display: flex; align-items: center; gap: 10px; }
.apply-header-actions a { padding: 10px 13px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75); font-size: .61rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.apply-header-actions a:hover { border-color: var(--signal); color: white; }
.apply-main { min-height: 100vh; display: grid; grid-template-columns: minmax(400px, 42%) 1fr; padding-top: 78px; }
.apply-role-panel { position: sticky; top: 78px; align-self: start; min-height: calc(100vh - 78px); overflow: hidden; background: #071a24; color: white; }
.apply-role-photo { position: absolute; inset: 0; }
.apply-role-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,17,24,.98) 4%, rgba(3,17,24,.82) 52%, rgba(3,17,24,.24)), linear-gradient(90deg, rgba(3,17,24,.24), rgba(3,17,24,.55)); }
.apply-role-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 44% center; filter: saturate(.78) contrast(1.04); }
.apply-role-content { position: relative; z-index: 2; display: flex; min-height: calc(100vh - 78px); flex-direction: column; justify-content: flex-end; padding: 70px clamp(34px, 5vw, 84px) 58px; }
.apply-location { width: fit-content; min-width: 220px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 18px; padding: 11px 16px 12px; border: 1px solid rgba(255,255,255,.19); border-left: 4px solid var(--signal); color: white; background: rgba(4,20,29,.68); box-shadow: 0 16px 38px rgba(0,0,0,.22); backdrop-filter: blur(10px); font: 750 .86rem Bahnschrift, sans-serif; letter-spacing: .045em; text-transform: uppercase; }
.apply-location::before { content: "Job location"; grid-column: 1 / -1; color: rgba(255,255,255,.5); font-size: .54rem; font-weight: 800; letter-spacing: .14em; }
.apply-role-content h1 { max-width: 680px; margin: 0; font: 700 clamp(2.8rem, 4.4vw, 5.5rem)/.9 Bahnschrift, sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
.apply-role-summary { max-width: 620px; margin: 22px 0 28px; color: rgba(255,255,255,.7); font-size: .95rem; line-height: 1.65; }
.apply-role-facts { display: grid; grid-template-columns: 1fr; max-width: 620px; margin: 0; border-top: 1px solid rgba(255,255,255,.25); }
.apply-role-facts div { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.apply-role-facts dt { color: rgba(255,255,255,.45); font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.apply-role-facts dd { margin: 0; font: 700 .78rem/1.4 Bahnschrift, sans-serif; }
.apply-standard { max-width: 620px; margin-top: 28px; padding: 18px 20px; border-left: 3px solid var(--signal); background: rgba(3,16,23,.66); backdrop-filter: blur(9px); }
.apply-standard span { color: rgba(255,255,255,.48); font-size: .57rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.apply-standard strong { display: block; margin-top: 4px; font: 700 1rem Bahnschrift, sans-serif; text-transform: uppercase; }
.apply-standard p { margin: 8px 0 0; color: rgba(255,255,255,.6); font-size: .75rem; line-height: 1.5; }
.apply-optifade { position: absolute; z-index: 1; top: 0; right: 0; width: 120px; height: 100%; opacity: .23; background: url("/blue-ox/assets/optifade-reference-texture-v1.webp") 60% center / 360px auto repeat-y; filter: saturate(.8) contrast(1.02); mix-blend-mode: screen; }
.apply-form-panel { min-width: 0; background: #f3f3ef; }
.apply-form-wrap { width: min(830px, calc(100% - 70px)); margin: 0 auto; padding: 58px 0 35px; }
.apply-progress { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 64px; border-bottom: 1px solid rgba(7,31,42,.18); }
.apply-progress-step { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; min-height: 58px; padding: 0 10px 17px 0; border: 0; background: transparent; color: #718087; text-align: left; }
.apply-progress-step::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; }
.apply-progress-step span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font: 700 .6rem Bahnschrift, sans-serif; }
.apply-progress-step strong { font: 700 .7rem Bahnschrift, sans-serif; letter-spacing: .045em; text-transform: uppercase; }
.apply-progress-step.is-active { color: var(--ink); }
.apply-progress-step.is-active::after { background: var(--signal); }
.apply-progress-step.is-complete span { border-color: var(--blue); background: var(--blue); color: white; }
.apply-kicker { margin: 0 0 14px; color: var(--blue); font: 700 .66rem Bahnschrift, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.apply-step h2, .apply-review h2 { max-width: 760px; margin: 0; font: 700 clamp(2.65rem, 4.2vw, 4.6rem)/.93 Bahnschrift, sans-serif; letter-spacing: -.05em; text-transform: uppercase; }
.apply-step-intro, .apply-review > p { max-width: 690px; margin: 20px 0 38px; color: #596b72; font-size: .96rem; line-height: 1.65; }
.apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 22px; }
.apply-field { display: grid; gap: 7px; }
.apply-field-wide { margin-bottom: 28px; }
.apply-field > span { color: #435760; font-size: .62rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.apply-field input, .apply-field select { width: 100%; height: 50px; padding: 0 4px; border: 0; border-bottom: 1px solid #a1adb1; border-radius: 0; background: transparent; color: var(--ink); outline: 0; }
.apply-field input:focus, .apply-field select:focus { border-bottom-color: var(--signal); box-shadow: 0 1px 0 var(--signal); }
.apply-step-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 54px; padding-top: 24px; border-top: 1px solid rgba(7,31,42,.16); }
.apply-back-link { border: 0; background: transparent; color: #53666e; font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.apply-next { min-width: 270px; min-height: 52px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 23px; border: 0; background: var(--signal); color: white; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); font: 700 .72rem Bahnschrift, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.apply-choice-list { display: grid; gap: 16px; }
.apply-choice-list fieldset { margin: 0; padding: 20px; border: 1px solid rgba(7,31,42,.17); transition: border-color .2s ease, background .2s ease; }
.apply-choice-list fieldset.needs-answer { border-color: var(--signal); background: rgba(235,98,38,.04); }
.apply-choice-list legend { padding: 0 8px; color: var(--ink); font: 700 .78rem Bahnschrift, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.apply-choice-list fieldset label { display: inline-flex; align-items: center; gap: 8px; margin: 7px 22px 2px 0; color: #53666e; font-size: .79rem; }
.apply-choice-list input { accent-color: var(--signal); }
.apply-expectation { margin: 22px 0 0; padding: 15px 18px; border-left: 3px solid var(--blue); background: white; color: #52666e; font-size: .76rem; line-height: 1.55; }
.document-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.document-drop { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 15px; min-height: 106px; padding: 22px; border: 1px solid rgba(7,31,42,.17); background: #fff; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.document-drop:hover { border-color: var(--signal); transform: translateY(-2px); }
.document-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.document-drop > span { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--signal); border-radius: 50%; color: var(--signal); font: 700 .66rem Bahnschrift, sans-serif; }
.document-drop strong { align-self: end; font: 700 .82rem Bahnschrift, sans-serif; text-transform: uppercase; }
.document-drop small { align-self: start; margin-top: 5px; color: #738087; }
.document-drop:has(input:valid:not([value=""])) { border-color: var(--blue); }
.referral-field { margin-top: 24px; }
.consent-line { display: grid; grid-template-columns: 18px 1fr; gap: 12px; margin-top: 25px; color: #607178; font-size: .7rem; line-height: 1.55; }
.consent-line input { margin-top: 3px; accent-color: var(--signal); }
.review-role { display: grid; gap: 7px; margin: 35px 0; padding: 24px; border-left: 4px solid var(--signal); background: white; box-shadow: 0 18px 45px rgba(7,31,42,.08); }
.review-role span { color: var(--blue); font-size: .61rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.review-role strong { font: 700 1.25rem Bahnschrift, sans-serif; text-transform: uppercase; }
.review-role small { color: #607179; font-size: .75rem; }
.screening-next { margin: 30px 0; padding: 25px 27px; border: 1px solid rgba(7,31,42,.14); border-top: 3px solid var(--blue); background: linear-gradient(145deg,#fff,#eef3f3); box-shadow: 0 18px 48px rgba(7,31,42,.07); }
.screening-next > span { display: block; margin-bottom: 17px; color: var(--blue); font-size: .61rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.screening-next ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; list-style: none; counter-reset: screening-step; }
.screening-next li { position: relative; min-height: 126px; padding: 38px 15px 15px; border-left: 1px solid rgba(7,31,42,.13); counter-increment: screening-step; }
.screening-next li::before { content: "0" counter(screening-step); position: absolute; top: 0; left: 15px; color: var(--signal); font: 800 .68rem Bahnschrift,sans-serif; letter-spacing: .08em; }
.screening-next strong { display: block; margin-bottom: 7px; color: var(--ink); font: 750 .76rem/1.28 Bahnschrift,sans-serif; text-transform: uppercase; }
.screening-next small { display: block; color: #687980; font-size: .68rem; line-height: 1.5; }
.official-handoff { width: min(380px, 100%); }
.restart-preview { display: block; margin-top: 20px; padding: 0 0 4px; border: 0; border-bottom: 1px solid #7d8b90; background: transparent; color: #52656d; font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.apply-footer-note { display: flex; justify-content: space-between; gap: 20px; margin-top: 75px; padding-top: 20px; border-top: 1px solid rgba(7,31,42,.14); color: #748187; font-size: .63rem; }

@media (max-width: 1050px) {
  .apply-main { grid-template-columns: 1fr; }
  .apply-role-panel { position: relative; top: auto; min-height: 700px; }
  .apply-role-content { min-height: 700px; }
  .apply-header-center { display: none; }
  .apply-header { grid-template-columns: 140px 1fr; }
  .verified-unit-rail { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .apply-header { height: 68px; grid-template-columns: 100px 1fr; padding-inline: 18px; }
  .apply-brand img { width: 84px; }
  .apply-header-actions a:first-child { display: none; }
  .apply-header-actions { justify-content: end; }
  .apply-header-actions a { padding: 8px 9px; font-size: .54rem; }
  .apply-main { padding-top: 68px; }
  .apply-role-panel { min-height: 570px; }
  .apply-role-content { min-height: 570px; padding: 55px 24px 38px; }
  .apply-role-content h1 { font-size: 2.65rem; }
  .apply-standard { display: none; }
  .apply-form-wrap { width: calc(100% - 38px); padding-top: 38px; }
  .apply-progress { margin-bottom: 44px; }
  .apply-progress-step { grid-template-columns: 28px; }
  .apply-progress-step strong { display: none; }
  .apply-grid, .document-grid { grid-template-columns: 1fr; }
  .apply-step h2, .apply-review h2 { font-size: 2.55rem; }
  .apply-step-actions { align-items: stretch; flex-direction: column-reverse; }
  .apply-next { width: 100%; min-width: 0; }
  .apply-back-link { align-self: flex-start; min-height: 35px; }
  .apply-choice-list fieldset label { display: flex; margin-right: 0; }
  .screening-next ol { grid-template-columns: 1fr; }
  .screening-next li { min-height: 0; }
  .amy-prefill-pair { grid-template-columns: 1fr; }
  .apply-footer-note { flex-direction: column; }
  .fleet-panorama-stage { aspect-ratio: 4 / 3; }
  .fleet-panorama-plate { min-height: 100%; object-fit: cover; }
  .verified-unit-rail article { grid-template-columns: 72px 1fr; }
  .verified-unit-rail img { width: 72px; }
}

.founder {
  position: relative;
  display: grid;
  grid-template-columns: minmax(380px, .82fr) 1.18fr;
  gap: 7vw;
  align-items: center;
  min-height: 850px;
  padding: 120px max(7vw, 50px);
  overflow: hidden;
  background: #e9ecea;
}
.founder-photo { position: relative; max-width: 600px; }
.founder-photo::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 54%;
  height: 55%;
  border-top: 2px solid var(--signal);
  border-left: 2px solid var(--signal);
}
.founder-photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 40%; filter: saturate(.8) contrast(1.04); }
.founder-caption {
  position: absolute;
  right: -28px;
  bottom: 32px;
  min-width: 260px;
  padding: 20px 24px;
  background: var(--ink);
  color: white;
}
.founder-caption strong, .founder-caption span { display: block; }
.founder-caption strong { font: 700 1rem Bahnschrift, sans-serif; text-transform: uppercase; }
.founder-caption span { margin-top: 5px; color: rgba(255,255,255,.58); font-size: .74rem; }
.founder-copy { position: relative; z-index: 1; max-width: 820px; }
.founder-year {
  position: absolute;
  z-index: -1;
  right: -5vw;
  top: -150px;
  color: transparent;
  opacity: .25;
  background: url("/blue-ox/assets/optifade-reference-texture-v1.webp") 56% 46% / 590px auto no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.35px rgba(11,51,65,.2);
  filter: saturate(.72) contrast(1.08) hue-rotate(4deg) drop-shadow(0 12px 24px rgba(8,34,45,.09));
  font: 700 clamp(9rem, 18vw, 19rem)/1 Bahnschrift, sans-serif;
  letter-spacing: -.08em;
  animation: optifade-year-drift 20s ease-in-out infinite alternate;
}
.founder-copy > p { max-width: 720px; margin: 24px 0 0; color: #53656c; font-size: 1.02rem; line-height: 1.68; }
.founder blockquote {
  max-width: 720px;
  margin: 34px 0;
  padding: 3px 0 3px 25px;
  border-left: 3px solid var(--signal);
  color: var(--ink);
  font: 700 1.18rem/1.5 Bahnschrift, sans-serif;
}
.selective-message {
  display: grid;
  grid-template-columns: 155px 1fr;
  gap: 1.4rem;
  max-width: 720px;
  padding-top: 22px;
  border-top: 1px solid rgba(7,31,42,.22);
}
.selective-message strong { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.selective-message span { color: #52646c; font-size: .88rem; line-height: 1.55; }

.growth-story { position: relative; min-height: 680px; display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: clamp(40px, 6vw, 110px); padding: 105px max(7vw, 50px); overflow: hidden; border-block: 1px solid rgba(255,255,255,.09); background: radial-gradient(circle at 31% 46%, rgba(35,87,105,.25), transparent 42%), #081e29; color: white; isolation: isolate; }
.growth-story::before { content: ""; position: absolute; z-index: -2; inset: -2%; opacity: .2; background: url("/blue-ox/assets/optifade-reference-texture-v1.webp") 14% 46% / 900px auto no-repeat; mix-blend-mode: luminosity; animation: optifade-growth-drift 24s ease-in-out infinite alternate; }
.growth-story::after { content: ""; position: absolute; z-index: -1; inset: 70px max(5vw, 34px); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 36px 100px rgba(0,0,0,.16); pointer-events: none; }
.growth-number { position: relative; z-index: 1; display: grid; justify-items: start; align-content: center; min-height: 420px; padding-left: clamp(12px, 2vw, 34px); isolation: isolate; }
.growth-number::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; background: linear-gradient(180deg, transparent, var(--signal) 25% 75%, transparent); }
.growth-number > small { position: relative; z-index: 2; }
.growth-number > small { margin: 30px 0 0 12px; color: rgba(255,255,255,.54); font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.growth-number-mark { position: relative; z-index: 2; display: block; width: min(100%, 620px); height: auto; overflow: visible; pointer-events: none; filter: drop-shadow(0 28px 70px rgba(0,0,0,.22)); }
.growth-number-mark text { fill: transparent; font: 700 330px Bahnschrift, sans-serif; letter-spacing: -.1em; vector-effect: non-scaling-stroke; }
.growth-number-outline { stroke: rgba(255,255,255,.24); stroke-width: 2; }
.growth-number-fuse { opacity: 0; stroke: #ffd59b; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30 1470; filter: drop-shadow(0 0 2px #fff3c7) drop-shadow(0 0 7px #ff963f) drop-shadow(0 0 13px rgba(235,98,38,.88)); }
.growth-story.is-fuse-active .growth-number-fuse { opacity: .96; animation: growth-number-outline-fuse 18s linear infinite; }
.growth-story.is-fuse-active .growth-number-fuse-two { animation-delay: -6s; }
.growth-story.is-fuse-active .growth-number-fuse-three { animation-delay: -12s; }
.growth-copy { position: relative; z-index: 1; max-width: 850px; padding: clamp(34px, 4vw, 62px); border-left: 1px solid rgba(255,255,255,.14); background: linear-gradient(110deg, rgba(7,27,37,.76), rgba(7,27,37,.38)); backdrop-filter: blur(9px); }
.growth-copy h2 { margin: 0; font: 700 clamp(3rem, 5vw, 6.2rem)/.91 Bahnschrift, sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.growth-copy > p { max-width: 750px; color: rgba(255,255,255,.72); font-size: 1.02rem; line-height: 1.72; }
.growth-copy .growth-qualifier { max-width: 730px; margin: 25px 0 0; padding: 5px 0 5px 19px; border-left: 2px solid rgba(235,98,38,.8); color: rgba(255,255,255,.78); font: 650 clamp(.86rem, 1vw, 1rem)/1.58 Bahnschrift, sans-serif; letter-spacing: .005em; }
.growth-actions { display: flex; align-items: center; margin-top: 38px; }
.growth-leadership-cta { width: min(100%, 345px); min-height: 62px; padding: 12px 24px; }
.growth-leadership-cta > span { display: grid; gap: 4px; }
.growth-leadership-cta small { color: rgba(255,255,255,.7); font: 700 .54rem Bahnschrift, sans-serif; letter-spacing: .13em; }
.growth-leadership-cta i { font-style: normal; font-size: 1.15rem; }

.leadership { padding: 110px max(7vw, 50px) 125px; background: #061923; color: white; }
/* Fixed gap, not vw: the container is capped at 1180px, so a viewport-relative
   gap kept shrinking the headline column as the screen got wider and tipped the
   heading onto a third line at 2560px. */
.leadership-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: end; max-width: 1180px; margin: 0 auto 48px; }
/* Scaled down with the cards — at the old size the headline overpowered the
   smaller portraits and wrapped to three lines in the narrower column. */
.leadership-heading h2 { max-width: 640px; margin: 0; font: 700 clamp(2.3rem, 3.4vw, 4rem)/.98 Bahnschrift, sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
.leadership-heading > p { max-width: 480px; margin: 0; color: rgba(255,255,255,.58); font-size: .94rem; line-height: 1.68; }
/* Five leaders: three on the first row, two CENTRED on the second. An empty
   cell reads as a missing person, so the hairlines are drawn per card (outline)
   rather than by the grid background, and the second row is offset into the
   middle columns. Revisit the nth-child(4)/(5) placements if the team size
   changes. */
.leadership-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 1px; max-width: 1180px; margin: 0 auto; }
.leader-card { position: relative; grid-column: span 4; min-width: 0; background: #0a222d; outline: 1px solid rgba(255,255,255,.12); }
.leader-card:nth-child(4) { grid-column: 3 / span 4; }
.leader-card:nth-child(5) { grid-column: 7 / span 4; }
/* Portrait ratio rather than a fixed height, so the cards scale with the column
   instead of dominating the section. */
.leader-card summary { position: relative; aspect-ratio: 1 / 1.12; cursor: pointer; list-style: none; overflow: hidden; }
.leader-card summary::-webkit-details-marker { display: none; }
.leader-card summary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(2,13,19,.2) 62%, rgba(2,13,19,.93) 100%); }
.leader-card summary img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: saturate(.68) contrast(1.03); transition: transform .55s ease, filter .4s ease; }
.leader-card:nth-child(1) summary img { object-position: center 48%; transform: scale(1.55); }
.leader-card:nth-child(2) summary img { object-position: center 22%; }
.leader-card:nth-child(4) summary img { object-position: center 15%; }
.leader-card.is-joe summary img { object-position: center 24%; }
.leader-card:hover summary img { transform: scale(1.02); filter: saturate(.9) contrast(1.04); }
.leader-card:nth-child(1):hover summary img { transform: scale(1.58); }
.leader-card-copy { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 50px; }
.leader-card-copy small, .leader-card-copy strong, .leader-card-copy em { display: block; }
.leader-card-copy small { min-height: 26px; color: var(--signal); font-size: .53rem; font-weight: 800; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; }
.leader-card-copy strong { margin-top: 4px; font: 700 1.02rem/1.12 Bahnschrift, sans-serif; letter-spacing: .012em; text-transform: uppercase; }
.leader-card-copy em { margin-top: 8px; color: rgba(255,255,255,.52); font-size: .68rem; line-height: 1.5; }
.bio-toggle { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.88); font-size: .55rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.bio-toggle i { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid rgba(235,98,38,.45); border-radius: 50%; color: var(--signal); font-style: normal; font-size: .92rem; transition: color .25s ease, background .25s ease, transform .25s ease; }
.leader-card:hover .bio-toggle i { background: var(--signal); color: white; transform: rotate(90deg); }
.leader-bio { display: none; }

.leader-dialog { width: min(1120px, calc(100% - 40px)); max-width: none; max-height: min(820px, calc(100vh - 46px)); margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--ink); }
.leader-dialog::backdrop { background: rgba(1,11,16,.84); backdrop-filter: blur(13px) saturate(.75); }
.leader-dialog-shell { position: relative; display: grid; grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr); min-height: 620px; overflow: hidden; border-top: 5px solid var(--signal); background: #f1f2ef; box-shadow: 0 45px 140px rgba(0,0,0,.65); }
.leader-dialog-shell::after { content: ""; position: absolute; right: 0; top: 0; width: 210px; height: 180px; background: url("/blue-ox/assets/optifade-reference-texture-v1.webp") center 32% / 470px auto no-repeat; opacity: .055; mix-blend-mode: multiply; pointer-events: none; }
.leader-dialog-close { position: absolute; z-index: 5; top: 18px; right: 20px; display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid rgba(7,31,42,.2); border-radius: 50%; background: rgba(255,255,255,.78); color: var(--ink); font-size: 1.65rem; line-height: 1; backdrop-filter: blur(8px); transition: color .2s ease, background .2s ease, transform .2s ease; }
.leader-dialog-close:hover { background: var(--signal); color: white; transform: rotate(90deg); }
.leader-dialog-visual { position: relative; min-height: 620px; overflow: hidden; background: #0b222c; }
.leader-dialog-visual::after { content: ""; position: absolute; inset: 46% 0 0; background: linear-gradient(180deg, transparent, rgba(2,14,20,.9)); }
.leader-dialog-visual img { display: block; width: 100%; height: 100%; min-height: 620px; object-fit: cover; object-position: center 24%; filter: saturate(.78) contrast(1.04); }
.leader-dialog-visual span { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 29px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.42); color: rgba(255,255,255,.86); font-size: .63rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.leader-dialog-copy { position: relative; z-index: 2; align-self: center; padding: 72px clamp(42px, 6vw, 82px) 62px; }
.leader-dialog-role { margin: 30px 0 8px; color: var(--signal); font-size: .68rem; font-weight: 850; letter-spacing: .115em; text-transform: uppercase; }
.leader-dialog-copy h2 { max-width: 620px; margin: 0; font: 700 clamp(3.3rem, 6vw, 6.5rem)/.82 Bahnschrift, sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.leader-dialog-copy blockquote { max-width: 610px; margin: 28px 0; color: #41555d; font: italic 1.15rem/1.55 Georgia, serif; }
.leader-dialog-rule { display: flex; align-items: center; gap: 14px; margin: 30px 0 26px; color: #66777d; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.leader-dialog-rule i { display: block; width: 54px; height: 2px; background: var(--signal); }
.leader-dialog-bio { max-width: 640px; }
.leader-dialog-bio p { margin: 0 0 16px; color: #4d6068; font-size: .94rem; line-height: 1.72; }
.leader-dialog-bio p:last-child { margin-bottom: 0; }

.site-footer { display: grid; grid-template-columns: 1.2fr .7fr .9fr 1.15fr; gap: 5vw; padding: 72px max(5vw, 35px) 0; background: #020e14; color: rgba(255,255,255,.65); font-size: .75rem; }
.site-footer img { width: 118px; height: auto; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: white; }
.footer-brand p { max-width: 320px; margin: 18px 0; line-height: 1.65; }
.footer-social { display: flex; gap: 16px; }
.footer-social a { font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-column strong, .footer-apply > strong { margin-bottom: 7px; color: white; font: 700 .78rem Bahnschrift, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.footer-column a { font-size: .71rem; }
.footer-apply p { max-width: 290px; line-height: 1.6; }
.footer-cta { display: inline-flex; justify-content: space-between; width: min(100%, 270px); margin-top: 12px; padding: 15px 17px; background: var(--signal); color: #071822 !important; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.footer-legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 25px; margin-top: 34px; padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-legal p { margin: 0; }
.footer-legal div { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal a { font-size: .62rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }

.legal-page { background: #e9ecea; }
.legal-header { position: sticky; z-index: 20; top: 0; min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(5vw, 24px); border-bottom: 1px solid rgba(255,255,255,.13); background: rgba(2,14,20,.96); color: white; }
.legal-header img { display: block; width: 98px; }
.legal-header > a:last-child { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.legal-hero { min-height: 330px; display: flex; flex-direction: column; justify-content: end; padding: 80px max(8vw, 28px) 62px; background: #071c27; color: white; }
.legal-hero h1 { margin: 0; font: 700 clamp(3.5rem, 7vw, 7.5rem)/.88 Bahnschrift, sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.legal-hero > p:last-child { margin: 22px 0 0; color: rgba(255,255,255,.56); font-size: .78rem; }
.legal-document { width: min(940px, calc(100% - 40px)); margin: -28px auto 80px; padding: clamp(34px, 6vw, 78px); border-top: 4px solid var(--signal); background: white; box-shadow: 0 28px 70px rgba(6,25,35,.12); }
.legal-document h2 { margin: 42px 0 13px; font: 700 1.35rem Bahnschrift, sans-serif; letter-spacing: -.015em; text-transform: uppercase; }
.legal-document h3 { margin: 25px 0 8px; font: 700 .84rem Bahnschrift, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.legal-document p, .legal-document li { color: #4d6169; font-size: 1rem; line-height: 1.75; }
.legal-document a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.legal-document ul { padding-left: 24px; }
.legal-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 28px; background: #020e14; color: rgba(255,255,255,.66); font-size: .7rem; }
.legal-footer a { color: white; }

@keyframes optifade-rail {
  from { background-position: 0 47%; }
  to { background-position: 520px 47%; }
}

@keyframes optifade-year-drift {
  from { background-position: 53% 43%; }
  to { background-position: 59% 49%; }
}

@keyframes optifade-growth-drift {
  from { transform: translate3d(-.5%, 0, 0) scale(1.01); background-position: 12% 45%; }
  to { transform: translate3d(.7%, -.5%, 0) scale(1.025); background-position: 17% 48%; }
}

@keyframes growth-number-outline-fuse {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1500; }
}

/* Four utility pills need ~400px; below 1260 they would crowd the main nav,
   so they live in the footer (and the phone menu) there. */
@media (max-width: 1260px) { .utility-links { display: none; } }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: 120px 1fr auto; }
  .utility-links { display: none; }
  .hero-copy { width: 54vw; left: 50px; }
  .hero h1 { font-size: min(clamp(4rem, 7vw, 6.6rem), 12vh); }
  .hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: min(54vw, 520px); }
  .hero-proof div:nth-child(2) { border-right: 0; }
  .hero-proof div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
  .quick-start { right: 28px; width: 340px; min-width: 0; padding: 29px; }
  .role-row { grid-template-columns: 56px 1.2fr 1fr .8fr .8fr 25px; gap: .8rem; }
  .leadership-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .leader-card { grid-column: span 2; }
  .leader-card:nth-child(4) { grid-column: 2 / span 2; }
  .leader-card:nth-child(5) { grid-column: 4 / span 2; }
}

@media (max-width: 1050px) and (min-width: 861px) {
  .role-row { grid-template-columns: 52px minmax(220px, 1.25fr) minmax(180px, 1fr) minmax(130px, .8fr) 26px; }
  .role-row > span:nth-child(5) { display: none; }
  .work-points div { grid-template-columns: 1fr; gap: .55rem; }
}

@media (max-width: 860px) {
  section[id], aside[id] { scroll-margin-top: 82px; }
  .site-header, .site-header.is-scrolled, .site-header.nav-open { height: 74px; grid-template-columns: 1fr auto auto; gap: 10px; padding: 0 16px; }
  .site-header nav { position: fixed; top: 74px; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; max-height: 0; padding: 0 22px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(2,14,20,.98); opacity: 0; pointer-events: none; transition: max-height .35s ease, padding .35s ease, opacity .2s ease; }
  .site-header.nav-open nav { max-height: calc(100vh - 74px); padding-top: 12px; padding-bottom: 24px; opacity: 1; pointer-events: auto; overflow-y: auto; }
  .site-header nav > a { display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid rgba(255,255,255,.11); font-size: .78rem; }
  .site-header nav > a::after { bottom: 0; }
  .nav-group { display: contents; }
  .nav-group-toggle { display: none; }
  .nav-menu { position: static; display: contents; opacity: 1; visibility: visible; transform: none; }
  .nav-menu a { display: flex; align-items: center; min-height: 54px; padding: 0; border-bottom: 1px solid rgba(255,255,255,.11); background: transparent; font-size: .78rem; }
  .nav-menu a::after { left: 0; bottom: 0; }
  .mobile-utilities { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 20px; }
  .mobile-utilities a { display: grid; place-items: center; min-height: 45px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: rgba(255,255,255,.82); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .mobile-utilities a::after { display: none; }
  /* Driver login leads on phones (drivers sign in from their phones); full row
     so the remaining two utilities still pair up. */
  .mobile-utilities a[href*="/driver/"] { grid-column: 1 / -1; order: -1; }
  /* Four utilities: Mobile login and Back office take full rows, RFI and
     Regional Partner pair up between them. */
  .mobile-utilities a:last-child { grid-column: 1 / -1; }
  .nav-toggle { display: block; }
  body.menu-open { overflow: hidden; }
  .brand img { width: 86px; }
  .header-actions { gap: 0; }
  .header-cta { min-width: 122px; padding: 11px 15px; font-size: .62rem; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .hero { min-height: 1100px; height: auto; padding-bottom: 30px; }
  .hero-scrim { background: linear-gradient(180deg, rgba(3,14,21,.35) 0%, rgba(3,14,21,.84) 39%, rgba(3,14,21,.96) 100%); }
  .hero-copy { position: relative; left: auto; top: auto; width: auto; padding: 150px 24px 30px; transform: none; }
  .hero h1 { font-size: clamp(3.6rem, 16vw, 5.4rem); }
  .hero-lede { font-size: 1rem; }
  .hero-actions { flex-wrap: wrap; }
  .hero-proof { grid-template-columns: 1fr 1fr; }
  .hero-proof div { border-bottom: 1px solid rgba(255,255,255,.18); }
  .quick-start { position: relative; top: auto; right: auto; width: auto; margin: 0 20px 55px; }
  .scroll-cue { display: none; }
  .section-heading { grid-template-columns: 1fr; gap: 1.2rem; }
  .role-row { grid-template-columns: 48px 1fr 30px; gap: .8rem; padding: 20px 10px; }
  .role-row > span:nth-child(3), .role-row > span:nth-child(4), .role-row > span:nth-child(5) { display: none; }
  .work { grid-template-columns: 1fr; }
  .real-fleet { padding-inline: 28px; }
  .real-fleet-heading { grid-template-columns: 1fr; gap: 24px; }
  .fleet-panorama-stage { max-height: none; aspect-ratio: 16 / 9; }
  .verified-unit-rail { grid-template-columns: 1fr; }
  .fleet-proof-line { grid-template-columns: 1fr 1fr; }
  .work-media { min-height: 430px; }
  .work-copy { padding: 70px 28px; }
  .growth-story { grid-template-columns: 1fr; min-height: 0; padding: 90px 28px; }
  .growth-story::after { inset: 34px 18px; }
  .growth-number { position: absolute; right: -12px; top: 70px; min-height: 0; padding: 0; opacity: .42; }
  .growth-number::before, .growth-number > small { display: none; }
  .growth-number-mark { width: min(100%, 470px); }
  .growth-copy { max-width: 680px; padding: 38px 32px; }
  .leadership { padding: 85px 28px 95px; }
  .leadership-heading { grid-template-columns: 1fr; gap: 22px; }
  .leadership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leader-card, .leader-card:nth-child(4) { grid-column: auto; }
  /* The fifth card sits alone on the last row: centre it at one column wide. */
  .leader-card:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5px); }
  .benefits { grid-template-columns: 1fr; gap: 60px; padding: 90px 28px 0; }
  .benefit-proof { grid-template-columns: 1fr 1fr; margin-top: 10px; }
  .benefit-proof article:nth-child(2) { border-right: 0; }
  .founder { grid-template-columns: 1fr; padding: 95px 28px; }
  .founder-photo { max-width: 520px; margin-left: 20px; }
  .founder-copy { padding-top: 25px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-apply, .footer-legal { grid-column: 1 / -1; }
  .footer-legal { flex-direction: column; }
  .role-dialog-facts { grid-template-columns: 1fr; }
  .role-dialog-facts div { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(7,31,42,.14); }
  .role-dialog-columns { grid-template-columns: 1fr; gap: 30px; }
  .leader-dialog { width: calc(100% - 28px); max-height: calc(100vh - 28px); overflow-y: auto; }
  .leader-dialog-shell { grid-template-columns: 1fr; }
  .leader-dialog-visual, .leader-dialog-visual img { min-height: 360px; height: 360px; }
  .leader-dialog-visual img { object-position: center 25%; }
  .leader-dialog-copy { padding: 48px 34px 42px; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 3.45rem; }
  .hero-copy { padding-top: 132px; }
  .hero-copy .eyebrow { gap: .5rem; font-size: .62rem; letter-spacing: .12em; white-space: nowrap; }
  .hero-copy .eyebrow span { width: 34px; }
  .hero-proof { grid-template-columns: 1fr 1fr; }
  .primary-action { min-width: 210px; }
  .form-pair { grid-template-columns: 1fr; }
  .quick-start { padding: 28px 23px 24px; }
  .quick-start h2 { font-size: 1.72rem; }
  .openings { padding: 82px 20px 90px; }
  .real-fleet { padding: 80px 20px 0; }
  .real-fleet-heading h2 { font-size: 3rem; }
  .fleet-panorama { margin-inline: -4px; }
  .fleet-panorama-stage { aspect-ratio: 4 / 3; }
  .fleet-proof-line { grid-template-columns: 1fr; }
  .fleet-proof-line > * { min-height: 56px; }
  .fleet-camo-band { margin-left: -20px; margin-right: -20px; }
  .section-heading h2, .work-copy h2, .benefits h2, .founder h2 { font-size: 2.6rem; }
  .benefit-proof { grid-template-columns: 1fr; }
  .benefit-proof article { min-height: 165px; }
  .eligibility-line, .selective-message { grid-template-columns: 1fr; gap: .6rem; }
  .founder-caption { right: -10px; min-width: 235px; }
  .leadership { padding-inline: 20px; }
  .leadership-heading h2 { font-size: 2.6rem; }
  .leadership-grid { grid-template-columns: 1fr; }
  .leader-card:nth-child(5) { width: auto; justify-self: stretch; }
  /* Single-column cards keep an explicit height, so the ratio must be cleared —
     with both set the browser derives the card's WIDTH from the ratio
     (460 / 1.12 = 411px) and it overflows a 390px screen. */
  .leader-card summary { aspect-ratio: auto; }
  .leader-card summary, .leader-card summary img { height: 460px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-column, .footer-brand, .footer-apply, .footer-legal { grid-column: 1; }
  .role-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .role-dialog-shell { padding: 34px 22px 28px; }
  .role-dialog h2 { margin-right: 40px; font-size: 2.05rem; }
  .role-dialog-actions .primary-action { width: 100%; }
  .leader-dialog { width: calc(100% - 16px); max-height: calc(100vh - 16px); }
  .leader-dialog-visual, .leader-dialog-visual img { min-height: 300px; height: 300px; }
  .leader-dialog-copy { padding: 40px 24px 34px; }
  .leader-dialog-copy h2 { margin-right: 36px; font-size: 3rem; }
  .leader-dialog-copy blockquote { margin-block: 22px; font-size: 1rem; }
  .growth-story { padding-inline: 22px; }
  .growth-copy h2 { font-size: 3.05rem; }
  .growth-copy { padding: 32px 22px; }
  .growth-leadership-cta { min-width: 0; }
  .legal-document { width: calc(100% - 24px); padding: 30px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-video { display: none; }
  .hero { background: var(--ink) url("/blue-ox/assets/hero-video-poster.webp") center/cover no-repeat; }
  .growth-number-fuse { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}