/* Authority Carriers — "Mile Zero"
   Palette, third pass, 2026-08-11. Two earlier schemes were rejected; this one
   is pulled from the cab photograph that now heads the page rather than chosen
   in isolation, so type and image belong to each other.

   The photo is cool and desaturated — grey-blue windshield light, black wheel,
   grey plaid — with warm skin as its only heat. So: a serious indigo carries
   the brand, a bright signal-blue does the pointing, and the page sits on warm
   ivory rather than a cold white, which is what keeps it from reading clinical.
   Deliberately NOT taking the tan cap as the accent: it is the one warm note in
   the image and lands in exactly the orange family that was rejected twice.

   Signature is still the lane marking — the dashed highway centre line. */

:root {
  --ink:      #20264b;   /* deep indigo — text and dark panels, never pure black */
  --ink-2:    #2c3564;
  --indigo:   #3f3ec7;   /* primary */
  --indigo-d: #302f9e;
  --sky:      #35b6f5;   /* bright accent, the pointing colour */
  --sky-t:    #e8f4fe;   /* accent tint */
  --ivory:    #faf8f5;   /* warm ground */
  --ivory-2:  #f3efe9;
  --white:    #fff;
  --line:     #e4e0da;
  --muted:    #6a6e85;
  --muted-2:  #9498ab;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --pad: clamp(20px, 5vw, 68px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; line-height: .95; margin: 0;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

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

/* ---------------------------------------------------------------- nav --- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--white);
       border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 70px; }

/* Typographic wordmark — no real Authority Carriers logo asset exists. The
   ETS_logo.png in the old Tilda export is leftover template branding. */
.mark { font-family: var(--display); font-weight: 800; font-size: 23px; color: var(--ink);
        letter-spacing: .01em; text-decoration: none; line-height: 1; display: flex;
        align-items: baseline; gap: 8px; white-space: nowrap; }
.mark b { color: var(--indigo); font-weight: 800; }
.mark span { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
             color: var(--muted-2); text-transform: uppercase; font-weight: 500; }

.nav nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav nav a { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--muted); }
.nav nav a:hover { color: var(--indigo); }

.btn {
  display: inline-block; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: 17px;
  padding: 13px 26px; border-radius: 6px; text-decoration: none; border: 0;
  cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.btn-hi { background: var(--indigo); color: var(--white); }
.btn-hi:hover { background: var(--indigo-d); transform: translateY(-1px); }
.btn-out { background: rgba(255,255,255,.08); color: var(--white);
           box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); backdrop-filter: blur(2px); }
.btn-out:hover { box-shadow: inset 0 0 0 2px var(--white); background: rgba(255,255,255,.16); }
.btn-lg { font-size: 21px; padding: 17px 38px; }

/* ------------------------------------------------ signature: lane line --- */
.lane {
  height: 14px; background-color: var(--white);
  background-image: repeating-linear-gradient(90deg, var(--sky) 0 58px, transparent 58px 106px);
  background-position: center; border-block: 1px solid var(--line);
}

/* --------------------------------------------------------------- hero ---
   The photograph is right-weighted: the driver sits around 50-85% across and
   the left third is already darkened. The indigo gradient continues that fade
   in brand colour instead of black, so the headline has a guaranteed contrast
   floor no matter how the image crops. */
.hero {
  position: relative; color: var(--white);
  background-color: var(--ink);
  background-image:
    linear-gradient(100deg, rgba(32,38,75,.97) 0%, rgba(32,38,75,.9) 34%,
                            rgba(32,38,75,.55) 54%, rgba(32,38,75,.15) 76%),
    url("hero.jpg");
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat, no-repeat;
  padding: clamp(56px,9vw,120px) 0 clamp(52px,8vw,110px);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-copy { max-width: min(56%, 640px); }

/* Mile marker, reduced to a badge now the photo carries the visual weight.
   It still says the thing that matters: we hire at mile zero. */
.mile-badge { display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 22px;
              padding: 8px 16px 9px; border-radius: 4px; background: rgba(255,255,255,.1);
              box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); backdrop-filter: blur(3px); }
.mile-badge .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em;
                   text-transform: uppercase; color: rgba(255,255,255,.8); }
.mile-badge b { font-family: var(--mono); font-weight: 700; font-size: 30px; line-height: 1; color: var(--white); }
.mile-badge .sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
                   text-transform: uppercase; color: var(--sky); }

.hero h1 { font-size: clamp(42px, 6.6vw, 84px); text-shadow: 0 2px 24px rgba(20,24,50,.45); }
.hero h1 em { font-style: normal; color: var(--sky); display: block; }
.hero .lede { font-size: clamp(16.5px,1.9vw,20px); color: rgba(255,255,255,.92);
              max-width: 44ch; margin: 20px 0 30px; text-shadow: 0 1px 14px rgba(20,24,50,.5); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn-hi { background: var(--white); color: var(--indigo); }
.hero .btn-hi:hover { background: var(--sky-t); }

/* Interior pages get the same indigo, no photograph — the image stays the
   homepage's moment rather than becoming wallpaper. */
.hero.plain { background-image: linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 60%, var(--indigo) 190%); }
.hero.plain .hero-copy { max-width: 720px; }

/* --------------------------------------------------------------- stats --- */
.stats { background: var(--white); border-bottom: 1px solid var(--line); }
.stats .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1px; background: var(--line); }
.stat { background: var(--white); padding: 26px 22px; }
.stat .v { font-family: var(--display); font-weight: 800; font-size: 40px; color: var(--indigo); line-height: 1; }
.stat .k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

.tbd { background: #ffe9a8; color: #6b4c00; font-family: var(--mono); font-size: 12px;
       font-weight: 600; padding: 2px 7px; border-radius: 3px; letter-spacing: .04em; text-transform: none; }

/* -------------------------------------------------------------- blocks --- */
section { padding: clamp(52px, 7vw, 92px) 0; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .24em;
           text-transform: uppercase; color: var(--indigo); margin-bottom: 14px; }
.h2 { font-size: clamp(32px, 4.6vw, 54px); margin-bottom: 14px; }
.intro { color: var(--muted); max-width: 60ch; font-size: 18px; }

/* Numbered because it genuinely is a sequence — the order carries meaning. */
.miles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 0;
         margin-top: 44px; border-top: 3px solid var(--indigo); }
.mile { padding: 26px 24px 30px 0; border-right: 1px solid var(--line); }
.mile:last-child { border-right: 0; }
.mile .n { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--indigo); text-transform: uppercase; }
.mile h3 { font-size: 26px; margin: 10px 0 8px; }
.mile p { margin: 0; color: var(--muted); font-size: 15.5px; }

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 20px; margin-top: 40px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 10px;
        padding: 26px 24px; box-shadow: 0 1px 2px rgba(32,38,75,.04); }
.card .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
             color: var(--indigo-d); background: var(--sky-t); display: inline-block;
             padding: 4px 10px; border-radius: 20px; }
.card h3 { font-size: 24px; margin: 14px 0 8px; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; }

.band { background: var(--ivory-2); }

/* ---------------------------------------------------------------- form --- */
.formwrap { background: var(--white); border: 1px solid var(--line); border-radius: 12px;
            padding: clamp(24px,4vw,44px); margin-top: 40px; box-shadow: 0 2px 12px rgba(32,38,75,.06); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.f.wide { grid-column: 1 / -1; }
label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
        text-transform: uppercase; color: var(--muted); font-weight: 500; }
label .req { color: #c0392b; }
input, select, textarea {
  font-family: var(--body); font-size: 16px; color: var(--ink);
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--white); width: 100%; max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(63,62,199,.14); outline: none;
}
textarea { min-height: 108px; resize: vertical; }
input[type=file] { padding: 9px; background: var(--ivory); font-size: 14px; }
.hint { font-size: 12.5px; color: var(--muted-2); }
fieldset { border: 0; padding: 0; margin: 0 0 34px; min-width: 0; }
legend { font-family: var(--display); font-weight: 800; text-transform: uppercase;
         font-size: 22px; padding: 0 0 4px; border-bottom: 2px solid var(--indigo);
         width: 100%; margin-bottom: 22px; color: var(--ink); }
.check { display: flex; gap: 11px; align-items: flex-start; }
.check input { width: auto; margin-top: 4px; }
.check label { text-transform: none; font-family: var(--body); font-size: 15px;
               letter-spacing: 0; color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- footer --- */
footer { background: var(--ink); color: #b3b8d0; padding: 48px 0 40px; font-size: 14.5px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 26px 44px; align-items: flex-start; }
footer a { color: #dde1f2; }
footer .mark { color: var(--white); }
footer .mark b { color: var(--sky); }
footer .sp { margin-left: auto; text-align: right; }

.staging { background: #ffe9a8; color: #6b4c00; font-family: var(--mono);
           font-size: 13px; padding: 9px var(--pad); text-align: center; font-weight: 500; }

@media (max-width: 900px) {
  /* Below this the driver is cropped out of frame, so stop fighting for the
     right half and let the gradient take the whole panel. */
  .hero { background-position: center, 72% center; }
  .hero-copy { max-width: 100%; }
  .hero {
    background-image:
      linear-gradient(180deg, rgba(32,38,75,.86) 0%, rgba(32,38,75,.93) 100%),
      url("hero.jpg");
  }
}
@media (max-width: 760px) {
  .nav nav a:not(.btn) { display: none; }
  .mile { border-right: 0; border-bottom: 1px solid var(--line); }
  footer .sp { margin-left: 0; text-align: left; }
}