/* ==========================================================================
   Marco's Auto Transport — "Contemporary Freight" design system
   --------------------------------------------------------------------------
   Brand palette: Indigo #3231bd (actions/accents), Ink Navy #0c0b2b (dark
   bands, text), White. All other values below are tints/shades derived from
   those two hues — no unrelated colors introduced:
     --indigo-hover  darkened indigo        (hover)
     --indigo-soft   lightened indigo       (accents on dark bands, links on navy)
     --navy-800/700  navy raised surfaces + borders on dark
     --wash/-2       indigo-tinted near-whites (subtle light backgrounds)
     --border-light  indigo-tinted border on light
     --muted / --muted-dark  desaturated navy/indigo text tints
     --disabled      indigo tint for disabled controls
   ========================================================================== */

/* Montserrat (SIL OFL variable font) — the display/heading face, bundled so
   it renders for every visitor. Magneto Bold sets the "Marco's" wordmark. */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Magneto";
  src: url("/assets/fonts/Magneto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --indigo: #3231bd;
  --indigo-hover: #282795;
  --indigo-deep: #1d1c6e;
  --indigo-soft: #a5a4f2;
  --indigo-glow: rgba(80, 79, 224, 0.55);
  --navy: #0c0b2b;
  --navy-800: #14133e;
  --navy-700: #201f55;
  --white: #ffffff;
  --wash: #f5f5fc;
  --wash-2: #eaeaf8;
  --border-light: #d6d6f0;
  --muted: #565578;
  --muted-dark: #a3a2cf;
  --disabled: #ababdd;

  --font-display: "Montserrat", "Archivo", system-ui, sans-serif;
  --font-wordmark: "Magneto", "Montserrat", "Archivo", cursive;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-narrow: "Archivo Narrow", "Archivo", system-ui, sans-serif;

  --track: 0.08em;          /* business-card letterspacing */
  --track-wide: 0.18em;

  --container: 74rem;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(12, 11, 43, 0.06), 0 8px 28px rgba(12, 11, 43, 0.08);
  --shadow-pop: 0 2px 6px rgba(12, 11, 43, 0.18), 0 18px 50px rgba(12, 11, 43, 0.28);

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset, address { margin: 0; }
ul, ol { padding: 0; }
address { font-style: normal; }
a { color: var(--indigo); text-underline-offset: 3px; }
a:hover { color: var(--indigo-hover); }
button { font: inherit; cursor: pointer; }
::selection { background: var(--indigo); color: var(--white); }

:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 2px;
}
.band-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--indigo-soft); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--white);
  color: var(--navy);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.container {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
}
.container.narrow { max-width: 52rem; }

/* ---------- type ---------- */
.display-xl, .display-l, .display-m, .kicker, .brand-name,
.card h3, .step h3, .qt-panel-title, .route-panel-title,
.footer-col h3, .card-index {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
}

.display-xl {
  font-size: clamp(1.75rem, 5vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: var(--track);
  margin: 0.9rem 0 1.4rem;
}
.display-l {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: var(--track);
  margin: 0.8rem 0 1.2rem;
}
.display-m {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: var(--track);
  margin: 0.7rem 0 1rem;
}

/* kicker with route-tick — the little manifest dash before section labels */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: var(--track-wide);
  color: var(--indigo);
}
.kicker::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  flex: none;
}
.band-dark .kicker, .band-cta .kicker { color: var(--indigo-soft); }

.lead {
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  max-width: 38em;
}
.band-dark .lead, .band-cta .lead { color: var(--muted-dark); }
.band-dark p, .band-cta p { color: var(--muted-dark); }
.band-dark h1, .band-dark h2, .band-dark h3,
.band-cta h1, .band-cta h2 { color: var(--white); }
.band-dark a:not(.btn), .band-cta a:not(.btn) { color: var(--indigo-soft); }
.band-dark a:not(.btn):hover, .band-cta a:not(.btn):hover { color: var(--white); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.72rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms, color 160ms, border-color 160ms,
    transform 160ms var(--ease-out), box-shadow 160ms;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--indigo);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--indigo-hover);
  color: var(--white);
  box-shadow: 0 6px 20px var(--indigo-glow);
  transform: translateY(-1px);
}
.btn-primary:disabled { background: var(--disabled); box-shadow: none; cursor: default; transform: none; }
.btn-ghost {
  border-color: var(--indigo);
  color: var(--indigo);
  background: transparent;
}
.btn-ghost:hover { background: var(--indigo); color: var(--white); }
.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
  background: transparent;
}
.btn-outline-light:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,0.08); }
.btn-lg { padding: 0.95rem 2rem; font-size: 1.08rem; }
.btn-small { padding: 0.45rem 0.9rem; font-size: 0.85rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1200; /* above Leaflet's internal panes/controls */
  background: color-mix(in srgb, var(--navy) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navy-700);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.65rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.brand-mark { width: 5.8rem; height: auto; }
.brand-name {
  color: var(--white);
  font-size: 1.32rem;
  letter-spacing: var(--track);
  line-height: 1.15;
  display: flex;
  flex-direction: column;
}
/* "Marco's" set in Magneto Bold — a script face, so keep natural case */
.brand-name .wordmark {
  font-family: var(--font-wordmark);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 1.7rem;
  line-height: 1;
}
.brand-name em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: var(--track-wide);
  color: var(--indigo-soft);
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
}
.nav-menu a:not(.btn) {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-family: var(--font-narrow);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.95rem;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 150ms, border-color 150ms;
}
.nav-menu a:not(.btn):hover { color: var(--white); }
.nav-menu a:not(.btn)[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--indigo-soft);
}
.nav-cta { padding: 0.55rem 1.15rem; font-size: 0.9rem; }
.nav-toggle { display: none; }

/* ---------- bands ---------- */
.band { padding-block: clamp(3.5rem, 8vw, 6rem); position: relative; }
.band-light { background: var(--white); }
.band-light:nth-of-type(even) { background: var(--wash); }
.band-dark { background: var(--navy); color: var(--muted-dark); }
.band-cta {
  background: linear-gradient(135deg, var(--indigo-deep), var(--navy) 70%);
  color: var(--muted-dark);
}
/* clean rule between dark and light bands */
.band-dark::after, .band-cta::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--indigo);
  opacity: 0.9;
}

/* ---------- hero ---------- */
.hero {
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) 2.5rem;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(50, 49, 189, 0.28), transparent 60%),
    var(--navy);
  position: relative;
}
/* oversized watermark of the shield mark — quiet brand presence,
   centered on the hero so it never clips at an edge */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/logo.svg") no-repeat center / min(68rem, 92%);
  opacity: 0.05;
  pointer-events: none;
}
.hero .container { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas:
    "copy map"
    "cta map";
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-copy { grid-area: copy; align-self: end; }
.hero-cta { grid-area: cta; align-self: start; }
.nowrap { white-space: nowrap; }
.hero-footnote { font-size: 0.9rem; color: var(--muted-dark); margin-top: 0.8rem; }

.hero-map { position: relative; grid-area: map; }
.hero-map svg { width: 100%; height: auto; }

/* hero quote strip */
.hero-quote-strip {
  margin-top: 2rem;
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-lg);
  padding: 0.6rem;
  max-width: 34rem;
}
.hqs-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.3rem 0.6rem;
}
.hqs-field label {
  font-family: var(--font-narrow);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--indigo-soft);
}
.hqs-field input {
  background: transparent;
  border: none;
  color: var(--white);
  font-family: var(--font-narrow);
  font-size: 1.15rem;
  font-weight: 600;
  width: 100%;
  padding: 0;
}
.hqs-field input:focus { outline: none; }
.hqs-field:focus-within { box-shadow: inset 0 -2px 0 var(--indigo-soft); }
.hqs-field input::placeholder { color: var(--muted-dark); opacity: 0.55; }
.hqs-arrow {
  align-self: center;
  width: 1.6rem;
  height: 2px;
  background: var(--indigo-soft);
  position: relative;
  flex: none;
}
.hqs-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  border-left: 6px solid var(--indigo-soft);
  border-block: 5px solid transparent;
}

/* ---------- page heroes ---------- */
.page-hero {
  background:
    radial-gradient(50rem 30rem at 80% -20%, rgba(50, 49, 189, 0.25), transparent 60%),
    var(--navy);
}
.page-hero.tall { padding-block: clamp(5rem, 12vw, 9rem); }

/* ---------- cards & grids ---------- */
.card-grid {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.2rem;
}
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.card-grid.one { grid-template-columns: 1fr; }
.card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  box-shadow: var(--shadow-card);
}
.band-dark .card {
  background: var(--navy-800);
  border-color: var(--navy-700);
  box-shadow: none;
}
.card h3, .card h2 { font-size: 1.02rem; letter-spacing: var(--track); margin-bottom: 0.7rem; }
.band-dark .card h2, .band-dark .card h3 { color: var(--white); }
.card p { color: var(--muted); font-size: 0.98rem; }
.band-dark .card p { color: var(--muted-dark); }
.card-index {
  font-size: 0.75rem;
  color: var(--indigo);
  letter-spacing: var(--track-wide);
  display: inline-block;
  margin-bottom: 0.9rem;
  border-bottom: 2px solid var(--indigo);
  padding-bottom: 0.3rem;
}
.card .tag {
  font-family: var(--font-narrow);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  background: var(--indigo);
  color: var(--white);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.location-card address { margin-block: 0.6rem; font-size: 1rem; line-height: 1.5; }
.location-card .contact-list { margin-block: 0.6rem 0.8rem; }

/* ---------- split layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.split p + p, .process-step p + p, .cta-inner p + p { margin-top: 1rem; }

/* check list */
.check-list {
  list-style: none;
  margin-block: 1.4rem;
  display: grid;
  gap: 0.9rem;
}
.check-list li {
  padding-left: 1.9rem;
  position: relative;
  color: var(--muted-dark);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.95rem;
  height: 0.55rem;
  border-left: 3px solid var(--indigo-soft);
  border-bottom: 3px solid var(--indigo-soft);
  transform: rotate(-45deg);
}
.check-list strong { color: var(--white); }
.band-light .check-list li { color: var(--muted); }
.band-light .check-list strong { color: var(--navy); }
.band-light .check-list li::before { border-color: var(--indigo); }

/* route panel — the manifest card */
.route-panel {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
}
.route-panel-title {
  font-size: 0.8rem;
  letter-spacing: var(--track-wide);
  color: var(--indigo-soft);
  margin-bottom: 1.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed var(--navy-700);
}
/* pricing manifest tile */
.price-lines {
  list-style: none;
  display: grid;
  gap: 0;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.price-lines li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding-block: 0.65rem;
  border-bottom: 1px dashed var(--navy-700);
}
.pl-op {
  flex: none;
  width: 1.1rem;
  text-align: center;
  color: var(--indigo-soft);
  font-weight: 700;
}
.price-lines .pl-total {
  border-bottom: none;
  color: var(--indigo-soft);
  font-size: 1.12rem;
}
.route-panel .route-note {
  font-size: 0.92rem;
  color: var(--muted-dark);
  margin-top: 1rem;
}
.route-panel-cta { margin-top: 1.2rem; }

/* ---------- steps ---------- */
.step-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.4rem;
  counter-reset: step;
}
.step { position: relative; padding-top: 1rem; }
.step-num {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  background: var(--indigo);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.step h3 { font-size: 0.95rem; letter-spacing: var(--track); margin-bottom: 0.5rem; }
.step p { color: var(--muted); font-size: 0.98rem; }

/* process page track */
.process-track {
  list-style: none;
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  position: relative;
  max-width: 46rem;
}
.process-track::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.5rem;
  bottom: 1.5rem;
  border-left: 2px dashed var(--border-light);
}
.process-step {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 1.4rem;
  position: relative;
}
.process-step h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}
.process-step p { color: var(--muted); }

.section-cta { margin-top: 2.4rem; }

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--white);
  margin-top: 0.9rem;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 3rem 1.1rem 1.3rem;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 1.08rem;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2.5px solid var(--indigo);
  border-bottom: 2.5px solid var(--indigo);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item summary:hover { color: var(--indigo); }
.faq-item p {
  padding: 0 1.3rem 1.2rem;
  color: var(--muted);
}
.faq-item[open] summary { border-bottom: 1px dashed var(--border-light); margin-bottom: 0.9rem; }

/* ---------- forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.2rem;
  margin-top: 2rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.band-dark .form-field label { color: var(--indigo-soft); }
.band-light .form-field label { color: var(--navy); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-narrow);
  font-size: 1.05rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border-light);
  background: var(--white);
  color: var(--navy);
  transition: border-color 140ms, box-shadow 140ms;
}
.band-dark .form-field input,
.band-dark .form-field select,
.band-dark .form-field textarea {
  background: var(--navy-800);
  border-color: var(--navy-700);
  color: var(--white);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(50, 49, 189, 0.22);
}
.band-dark .form-field input:focus,
.band-dark .form-field select:focus,
.band-dark .form-field textarea:focus {
  border-color: var(--indigo-soft);
  box-shadow: 0 0 0 3px rgba(165, 164, 242, 0.25);
}
.form-field textarea { resize: vertical; }

/* Date inputs need explicit taming: iOS Safari renders them with a native
   control whose intrinsic width ignores the container, and its shadow-DOM
   value/picker parts add margins that push the field past its box. Chrome
   and Android are unaffected by these rules but stay consistent. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* iOS collapses the height once appearance is removed */
  min-height: 3rem;
  /* keeps the text vertically centred in Safari */
  line-height: normal;
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  padding: 0;
  min-width: 0;
}
input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  overflow: hidden;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
  flex: none;
}
input[type="date"]::-webkit-inner-spin-button { display: none; }
input[type="date"]::-webkit-clear-button { display: none; }
.form-hint { font-size: 0.88rem; color: var(--muted); }
/* invalid pin-drop feedback: a red-tinted ghost pin that shakes and fades */
.qt-pin-invalid {
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #b0245a; /* alarm tint derived from indigo family, used only for errors */
  border: 3px solid var(--white);
  opacity: 0.95;
  animation: pin-shake 500ms ease-in-out, pin-fade 900ms ease-in 500ms forwards;
}
@keyframes pin-shake {
  0%, 100% { transform: rotate(-45deg) translateX(0); }
  20%, 60% { transform: rotate(-45deg) translateX(-5px); }
  40%, 80% { transform: rotate(-45deg) translateX(5px); }
}
@keyframes pin-fade { to { opacity: 0; } }
.band-dark .form-hint { color: var(--muted-dark); }
.form-actions { margin-top: 0.4rem; }
.form-status { min-height: 1.4em; font-weight: 600; font-family: var(--font-narrow); }
.form-status.is-error { color: #ffb3c0; }
.band-light .form-status.is-error { color: #a01840; }
.form-status.is-success { color: #b9f0c9; }
.band-light .form-status.is-success { color: #0d6b3a; }

/* ---------- contact ---------- */
.contact-list { list-style: none; display: grid; gap: 0.3rem; }
.contact-note { margin-top: 1.4rem; color: var(--muted); font-size: 0.95rem; }
.contact-split .card-grid { margin-top: 0; }

/* ---------- CTA band ---------- */
.cta-inner { max-width: 46rem; }
.cta-inner .btn { margin-right: 0.6rem; margin-top: 1rem; }

/* ---------- download card ---------- */
.download-card h2 { font-size: 1.05rem; }
.download-card h3 {
  font-family: var(--font-narrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--indigo);
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
}
.download-card .btn { margin-block: 0.6rem; }

/* ---------- quote tool ---------- */
.quote-tool-band { padding-top: 2.5rem; }
.quote-tool {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 1.4rem;
  /* columns stretch so the sticky estimate panel has room to follow the scroll */
}
.qt-map-wrap {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  isolation: isolate; /* keep Leaflet's z-indexes from escaping under the header */
  display: flex;
  flex-direction: column;
}
.qt-map-wrap .qt-map { flex: 1; min-height: 460px; }
.qt-search-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--wash);
}
.qt-search label {
  display: block;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}
.qt-search-input { display: flex; gap: 0.5rem; }
.qt-search-input input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-narrow);
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border-light);
}
.qt-search-input input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(50, 49, 189, 0.22);
}
.qt-search-input .btn-small { border-color: var(--indigo); color: var(--indigo); background: var(--white); border-width: 1.5px; border-style: solid; border-radius: var(--radius); }
.qt-search-input .btn-small:hover { background: var(--indigo); color: var(--white); }
.qt-map { height: 460px; background: var(--wash-2); }
.qt-map-hint {
  padding: 0.8rem 1.1rem;
  font-size: 0.9rem;
  color: var(--muted);
  border-top: 1px solid var(--border-light);
}

/* Panel stretches to match the map tile's height on desktop; flex layout
   pushes the fine print to the bottom so the space reads intentional. */
.qt-panel {
  background: var(--navy);
  color: var(--muted-dark);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
}
.qt-panel .qt-fineprint { margin-top: auto; padding-top: 1rem; }
.qt-continue {
  width: 100%;
  margin-top: 1rem;
  display: none;
}
.qt-continue.is-visible { display: inline-block; }
.qt-panel-title {
  color: var(--indigo-soft);
  font-size: 0.85rem;
  letter-spacing: var(--track-wide);
  padding-bottom: 0.9rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px dashed var(--navy-700);
}
.qt-field { border: none; padding: 0; margin-bottom: 1.1rem; }
.qt-field legend {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo-soft);
  margin-bottom: 0.5rem;
  padding: 0;
}
.seg-group { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.seg-group label { position: relative; }
.seg-group input {
  position: absolute;
  opacity: 0;
  inset: 0;
}
.seg-group span {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border-radius: 7px;
  border: 1.5px solid var(--navy-700);
  background: var(--navy-800);
  color: var(--muted-dark);
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background-color 140ms, color 140ms, border-color 140ms;
}
.seg-group input:checked + span {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--white);
}
.seg-group input:focus-visible + span {
  outline: 3px solid var(--indigo-soft);
  outline-offset: 2px;
}

/* multi-vehicle: one card per vehicle in the estimate panel (max 3) */
.qt-vehicle + .qt-vehicle {
  border-top: 1px dashed var(--navy-700);
  padding-top: 1rem;
}
.qt-vehicle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}
.qt-vehicle-title {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  margin: 0;
}
.qt-vehicle-remove,
.qf-vehicle-remove {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--indigo-soft);
  text-decoration: underline;
  cursor: pointer;
}
.qt-vehicle-remove:hover,
.qf-vehicle-remove:hover { color: var(--white); }
.qt-vehicle-actions {
  padding-top: 0.2rem;
  margin-bottom: 0.4rem;
}
.qt-vehicle-actions .btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.qt-vehicle-hint,
.qf-vehicle-hint {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted-dark);
}

.qt-readout {
  border: 1px dashed var(--navy-700);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-block: 1.2rem;
  background: var(--navy-800);
}
.qt-distance {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px dashed var(--navy-700);
}
.qt-distance-label {
  font-family: var(--font-narrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}
.qt-distance-value {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
}
.qt-distance-src { font-size: 0.72rem; font-weight: 400; color: var(--muted-dark); }
.qt-price-range {
  display: block;
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--white);
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.qt-price-note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--indigo-soft);
}
/* what the number covers, shown only once a second vehicle is added */
.qt-price-vehicles {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--white);
}
.qt-price-vehicles[hidden] { display: none; }
.qt-empty { font-size: 0.95rem; }
.qt-fineprint { font-size: 0.82rem; line-height: 1.5; }

/* Leaflet tweaks to sit with the brand */
.leaflet-container { font-family: var(--font-narrow); }
/* OSM's license requires the credit to remain — keep it, but quiet */
.leaflet-control-attribution {
  font-size: 9px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--muted) !important;
  opacity: 0.75;
}
.leaflet-control-attribution a { color: var(--muted) !important; }
/* candidate list when an address search is ambiguous */
.qt-candidates {
  list-style: none;
  margin-top: 0.45rem;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.qt-candidates li button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--wash-2);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-narrow);
  font-size: 0.9rem;
  color: var(--navy);
}
.qt-candidates li:last-child button { border-bottom: none; }
.qt-candidates li button:hover { background: var(--wash); color: var(--indigo); }
/* route/estimate summary shown at the top of the request form */
.qf-summary {
  display: none;
  grid-column: 1 / -1;
  background: var(--navy-800);
  border: 1px dashed var(--navy-700);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-family: var(--font-narrow);
  font-weight: 600;
  color: var(--white);
  font-size: 1rem;
}
.qf-summary.is-visible { display: block; }
.qf-summary span { color: var(--indigo-soft); }
/* multi-vehicle blocks in the request form (max 3) */
.qf-vehicles { display: grid; gap: 1rem; }
.qf-vehicle {
  /* fieldsets refuse to shrink below min-content without this */
  min-width: 0;
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--navy-800) 55%, transparent);
  padding: 1rem 1.1rem 1.1rem;
}
.qf-vehicle legend {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo-soft);
  padding: 0 0.45rem;
  margin-left: -0.45rem;
}
.qf-vehicle-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.2rem;
  margin-top: 0.9rem;
}
.qf-vehicle-legend {
  display: block;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo-soft);
  margin-bottom: 0.45rem;
}
.qf-vehicle-remove { margin-top: 0.9rem; }
.qf-vehicle-actions { margin-top: -0.2rem; }
.qf-vehicle-actions .btn:disabled { opacity: 0.45; cursor: default; }
.qt-pin {
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--indigo);
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(12, 11, 43, 0.45);
}
.qt-pin.qt-pin-to { background: var(--navy); }
.qt-pin span {
  transform: rotate(45deg);
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--white);
  font-weight: 700;
  font-size: 0.7rem;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--navy);
  color: var(--muted-dark);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 3px solid var(--indigo);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
  gap: 2.2rem;
  padding-bottom: 2.5rem;
}
.footer-brand img { width: 5rem; margin-bottom: 1rem; }
.footer-brand p { font-size: 0.95rem; max-width: 22em; }
.footer-col h3 {
  color: var(--indigo-soft);
  font-size: 0.72rem;
  letter-spacing: var(--track-wide);
  margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.45rem; }
.footer-col a { color: var(--muted-dark); text-decoration: none; }
.footer-col a:hover { color: var(--white); }
.footer-col address { margin-bottom: 1rem; font-size: 0.95rem; }
.footer-bottom {
  border-top: 1px solid var(--navy-700);
  padding-block: 1.4rem;
  font-size: 0.85rem;
}

/* ---------- photography ---------- */
.photo-band {
  position: relative;
  max-height: 34rem;
  overflow: hidden;
  background: var(--navy);
}
.photo-band img {
  width: 100%;
  height: 100%;
  max-height: 34rem;
  object-fit: cover;
}
.photo-band figcaption {
  position: absolute;
  left: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 3vw, 2rem);
}
.photo-band figcaption span {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--white);
  background: color-mix(in srgb, var(--navy) 78%, transparent);
  border: 1px solid var(--navy-700);
  backdrop-filter: blur(6px);
  border-radius: 6px;
  padding: 0.55rem 0.9rem;
}
.figure-photo {
  margin-top: clamp(2rem, 5vw, 3.2rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  background: var(--white);
}
.figure-photo img { width: 100%; height: auto; }
.figure-photo figcaption {
  padding: 0.9rem 1.2rem;
  font-size: 0.92rem;
  color: var(--muted);
  border-top: 1px solid var(--wash-2);
  font-family: var(--font-narrow);
}
.band-dark .figure-photo { border-color: var(--navy-700); background: var(--navy-800); }
.band-dark .figure-photo figcaption { color: var(--muted-dark); border-top-color: var(--navy-700); }

/* ---------- admin ---------- */
.page-admin { background: var(--wash); }
.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0; /* let the text shrink instead of pushing into the logo */
}
.admin-updated {
  font-family: var(--font-narrow);
  font-size: 0.82rem;
  color: var(--muted-dark);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* On phones the "last updated by…" line has nowhere to go, so drop it and
   keep just the brand and the Sign out button. It's still shown on desktop
   and the same information is in the change log. */
@media (max-width: 720px) {
  .page-admin .admin-updated { display: none; }
  .page-admin .header-inner { gap: 0.75rem; }
  .page-admin .brand-mark { width: 3.4rem; }
  .page-admin .brand-name { font-size: 1.05rem; }
  .page-admin .brand-name .wordmark { font-size: 1.35rem; }
}
.admin-main { padding-block: 2.5rem 4rem; }
.admin-main > .container > h1.admin-title { margin-bottom: 1.6rem; }
.admin-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.admin-sub { color: var(--muted); max-width: 46em; }
.admin-preview { margin-bottom: 2rem; }
.admin-preview-strip {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.4fr;
  gap: 1rem;
  align-items: end;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
}
.admin-preview-strip .form-field label { color: var(--indigo-soft); }
.admin-preview-strip select {
  background: var(--navy-800);
  border-color: var(--navy-700);
  color: var(--white);
}
.admin-preview-result { text-align: right; }
.admin-preview-label {
  display: block;
  font-family: var(--font-narrow);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--indigo-soft);
  margin-bottom: 0.2rem;
}
.admin-preview-price {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--white);
}
.admin-form { display: grid; gap: 1.6rem; margin-bottom: 1.6rem; }
.admin-section {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.6rem;
  box-shadow: var(--shadow-card);
}
.admin-form .admin-section { margin-bottom: 0; }
.admin-section h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
  color: var(--navy);
}
.admin-section-note {
  font-family: var(--font-narrow);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: 0.4rem;
}
.admin-fields { display: grid; gap: 1.1rem; }
.admin-fields.four { grid-template-columns: repeat(4, 1fr); }
.admin-fields.three { grid-template-columns: repeat(3, 1fr); }
.admin-fields.two { grid-template-columns: repeat(2, 1fr); }
.input-unit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--white);
  padding-inline: 0.8rem;
}
.input-unit span {
  font-family: var(--font-narrow);
  color: var(--muted);
  font-weight: 600;
}
.input-unit input {
  border: none !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
  flex: 1;
  min-width: 0;
}
.input-unit:focus-within {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(50, 49, 189, 0.22);
}
.admin-warnings[hidden] { display: none; } /* keep the hidden attribute winning over display:grid */
.admin-warnings {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  background: var(--wash-2);
  border: 1.5px solid var(--indigo);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-family: var(--font-narrow);
  color: var(--indigo-deep);
  font-weight: 500;
}
.admin-warnings li::before { content: "⚠ "; }
.admin-save {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.8rem;
  display: grid;
  grid-template-columns: minmax(0, 20rem) auto;
  gap: 1.1rem 1.4rem;
  align-items: end;
  box-shadow: var(--shadow-card);
}
.admin-save .form-status { grid-column: 1 / -1; }
.admin-log-wrap { overflow-x: auto; }
.admin-log {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-narrow);
  font-size: 0.95rem;
}
.admin-log th {
  text-align: left;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 2px solid var(--border-light);
  padding: 0.5rem 0.8rem;
}
.admin-log td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--wash-2);
}
.admin-log tr:nth-child(even) td { background: var(--wash); }
.admin-log-empty { color: var(--muted); padding-block: 0.8rem; }
.admin-pw-submit { justify-content: end; }
/* change log pager */
.admin-log-pager {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.admin-log-page {
  font-family: var(--font-narrow);
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.admin-log-pager .btn:disabled {
  opacity: 0.4;
  cursor: default;
}
/* inbox (customer submissions) */
.admin-inbox-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.admin-inbox-filters .btn.is-active {
  background: var(--indigo);
  color: var(--white);
  border-color: var(--indigo);
}
.admin-inbox-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  align-items: center;
}
.admin-inbox-bulk { display: flex; gap: 0.5rem; margin-bottom: 1.4rem; }
.inbox-badge {
  display: inline-block;
  background: var(--indigo);
  color: var(--white);
  font-family: var(--font-narrow);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Compact list: one row per submission, expands on click. */
.admin-inbox {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-inbox:empty { display: none; }
.inbox-item { border-bottom: 1px solid var(--wash-2); background: var(--white); }
.inbox-item:last-child { border-bottom: none; }
.inbox-item.is-open { background: var(--wash); }
.inbox-line {
  display: grid;
  grid-template-columns: 0.75rem 6.5rem minmax(6rem, 1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.75rem 1rem;
  font: inherit;
}
.inbox-line:hover { background: var(--wash-2); }
.inbox-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: transparent;
}
.is-unread .inbox-dot { background: var(--indigo); }
.is-unread .inbox-who { font-weight: 700; color: var(--navy); }
.inbox-tag {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo);
  white-space: nowrap;
}
.inbox-tag-contact { color: var(--muted); }
.inbox-tag-employment { color: var(--navy-700); }
.inbox-who {
  font-family: var(--font-narrow);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-sum {
  font-size: 0.88rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-when { font-family: var(--font-narrow); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.inbox-detail { padding: 0.2rem 1rem 1rem 2.5rem; }
.inbox-actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.inbox-delete { color: #a01840; border-color: #e8b7c4; }
.inbox-delete:hover { background: #a01840; border-color: #a01840; color: var(--white); }

@media (max-width: 760px) {
  /* Stack the row so nothing is squeezed on a phone */
  .inbox-line {
    grid-template-columns: 0.75rem 1fr auto;
    grid-template-areas:
      "dot tag when"
      "dot who who"
      "dot sum sum";
    gap: 0.25rem 0.7rem;
  }
  .inbox-dot { grid-area: dot; align-self: start; margin-top: 0.4rem; }
  .inbox-tag { grid-area: tag; }
  .inbox-when { grid-area: when; }
  .inbox-who { grid-area: who; white-space: normal; }
  .inbox-sum { grid-area: sum; white-space: normal; }
  .inbox-detail { padding-left: 1rem; }
}
.inbox-contact { font-family: var(--font-narrow); font-size: 0.9rem; margin-bottom: 0.6rem; }
.inbox-contact em { color: var(--muted); }
.inbox-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.6rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--wash-2);
  font-size: 0.9rem;
}
.inbox-row span {
  font-family: var(--font-narrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--muted);
  padding-top: 0.1rem;
}
.inbox-row p { color: var(--navy); word-break: break-word; }

/* photo manager */
.admin-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.admin-photo-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-photo-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--wash-2);
}
.admin-photo-body { padding: 1rem 1.1rem; }
.admin-photo-body h3 {
  font-family: var(--font-narrow);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.admin-photo-meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.8rem; font-family: var(--font-narrow); }
.admin-photo-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.admin-photo-actions input[type="file"] { display: none; }
/* framing editor */
.frame-editor { margin-top: 1rem; }
.frame-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1.5px solid var(--indigo);
  cursor: grab;
  touch-action: none;
  background: var(--wash-2);
}
.frame-stage:active { cursor: grabbing; }
.frame-stage img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.frame-zoom-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-block: 0.8rem 0.4rem;
}
.frame-zoom-row label {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.frame-zoom-row input[type="range"] {
  flex: 1;
  accent-color: var(--indigo);
}
@media (max-width: 720px) {
  .admin-photos { grid-template-columns: 1fr; }
}
.admin-login-card {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  width: min(24rem, 100% - 2rem);
  color: var(--muted-dark);
}
.admin-login-card img { margin-bottom: 1rem; }
.admin-login-card p { font-size: 0.95rem; margin-block: 0.6rem 1.4rem; }
.admin-login-card .form-field label { color: var(--indigo-soft); }
.admin-login-card .form-field input {
  width: 100%;
  background: var(--navy);
  border: 1.5px solid var(--navy-700);
  color: var(--white);
  font-family: var(--font-narrow);
  font-size: 1.05rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
}
.admin-login-card .form-actions { margin-top: 1rem; }
.admin-login-back { margin-top: 1.6rem; }
.admin-login-back a { color: var(--indigo-soft); }

@media (max-width: 900px) {
  .admin-preview-strip { grid-template-columns: 1fr 1fr; }
  .admin-preview-result { text-align: left; }
  .admin-fields.four, .admin-fields.three { grid-template-columns: 1fr 1fr; }
  .admin-save { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .admin-fields.four, .admin-fields.three { grid-template-columns: 1fr; }
}

/* ---------- employment application ---------- */
.apply-intro { margin-bottom: 1.8rem; }
.apply-intro p { color: var(--muted); max-width: 44em; margin-bottom: 1.2rem; }
.apply-position { max-width: 26rem; }
.apply-form[hidden], .driver-redirect[hidden], .apply-paper[hidden] { display: none; }

.apply-section {
  /* Browsers give <fieldset> min-inline-size:min-content, which makes it
     refuse to shrink and overflow small screens — reset it. */
  min-width: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 1.4rem 1.6rem 1.6rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-card);
}
/* Grid/flex children default to min-width:auto and won't shrink below their
   content — zero it so inputs can narrow on phones. */
.form-field,
.apply-city-row > div,
.apply-section .form-grid { min-width: 0; }
.form-field input,
.form-field select,
.form-field textarea,
.apply-city-row input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.apply-section legend {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-size: 0.9rem;
  color: var(--navy);
  padding: 0 0.5rem;
  margin-left: -0.5rem;
}
.apply-section .form-grid { margin-top: 1rem; }
.apply-city-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.apply-city-row label {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  display: block;
  margin-bottom: 0.35rem;
}

.apply-yesno-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 1.1rem;
}
.apply-yesno-label {
  display: block;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
/* light-band variant of the segmented control */
.seg-group-light span {
  background: var(--wash);
  border-color: var(--border-light);
  color: var(--muted);
}
.seg-group-light input:checked + span {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--white);
}

.apply-certify { margin-bottom: 0.4rem; }
.apply-check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--navy);
  cursor: pointer;
}
.apply-check input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--indigo); flex: none; }

.apply-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.1rem;
  margin-top: 0.4rem;
}
.apply-save-state {
  font-family: var(--font-narrow);
  font-size: 0.9rem;
  color: #0d6b3a;
  font-weight: 600;
}
.apply-save-state.is-error { color: #a01840; }
.apply-fineprint { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); }
.apply-resume-note {
  background: var(--wash-2);
  border: 1px solid var(--indigo);
  border-radius: var(--radius);
  padding: 0.8rem 1.1rem;
  font-family: var(--font-narrow);
  font-weight: 500;
  color: var(--indigo-deep);
  margin-bottom: 1.4rem;
}
.apply-paper { margin-top: 1.6rem; }
.apply-done { padding: 0.5rem 0; }
.apply-done h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track); font-size: 1.3rem; color: var(--navy); margin-bottom: 0.6rem; }
.apply-done p { color: var(--muted); margin-bottom: 1rem; }

/* driver redirect panel */
.driver-redirect { padding: 1.8rem; margin-bottom: 1.6rem; }
.driver-redirect h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 0.8rem;
}
.driver-redirect p { color: var(--muted); margin-bottom: 1rem; }
.driver-actions { margin: 1.2rem 0; }
.driver-paper { font-size: 0.95rem; }
/* Full-width, generous tap target on phones */
.driver-cta {
  display: inline-block;
  min-height: 48px;
  touch-action: manipulation;
}
@media (max-width: 620px) {
  .driver-cta { display: block; width: 100%; text-align: center; }
}

@media (max-width: 620px) {
  .apply-yesno-row { grid-template-columns: 1fr; }
  .apply-city-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- prose ---------- */
.prose p { margin-bottom: 1.2rem; max-width: 42em; }

/* ---------- reveals (JS adds .js-reveal on body when allowed) ---------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* corridor map draw-on (SVG uses pathLength=1) */
.hero-map .corridor-route {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-route 2.6s var(--ease-out) 300ms forwards;
}
.hero-map .corridor-city {
  opacity: 0;
  animation: city-pop 500ms var(--ease-out) forwards;
}
.hero-map .corridor-label {
  opacity: 0;
  animation: label-fade 600ms ease-out forwards;
}
/* the hauler dot sits at the SVG origin until its motion path starts —
   keep it invisible until then so no artifact flashes top-left on load */
.hero-map .corridor-truck {
  opacity: 0;
  animation: truck-in 400ms ease-out 3.3s forwards;
}
@keyframes truck-in { to { opacity: 1; } }
@keyframes draw-route { to { stroke-dashoffset: 0; } }
@keyframes city-pop {
  0% { opacity: 0; transform: scale(0.2); }
  70% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes label-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-map .corridor-route { stroke-dashoffset: 0; animation: none; }
  .hero-map .corridor-city, .hero-map .corridor-label { opacity: 1; animation: none; }
  .hero-map .corridor-truck { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  /* copy, then the animated map, then the ZIP strip */
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "map"
      "cta";
  }
  .hero-map { max-width: 26rem; margin: 1.5rem auto; }
  .split { grid-template-columns: 1fr; }
  .card-grid.three { grid-template-columns: 1fr 1fr; }
  .step-row { grid-template-columns: 1fr; }
  .quote-tool { grid-template-columns: 1fr; }
  .qt-panel { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .card-grid.three, .card-grid.two { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .qf-vehicle-opts { grid-template-columns: 1fr; }
  .qt-search-row { grid-template-columns: 1fr; }
  .qt-map { height: 380px; }
  .hero-quote-strip { flex-direction: column; align-items: stretch; }
  .hqs-arrow { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }

  /* mobile nav */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1.5px solid var(--navy-700);
    border-radius: var(--radius);
    color: var(--white);
    font-family: var(--font-narrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
  }
  .nav-toggle-bars {
    width: 1.1rem;
    height: 2px;
    background: var(--indigo-soft);
    position: relative;
    display: inline-block;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--indigo-soft);
  }
  .nav-toggle-bars::before { top: -5px; }
  .nav-toggle-bars::after { top: 5px; }
  .nav-menu {
    display: none;
    position: fixed;
    inset: 3.9rem 0 auto 0;
    background: var(--navy);
    border-bottom: 3px solid var(--indigo);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.8rem 1.5rem 1.5rem;
    box-shadow: var(--shadow-pop);
  }
  .nav-open .nav-menu { display: flex; }
  .nav-menu li { width: 100%; }
  .nav-menu a:not(.btn) {
    display: block;
    padding: 0.9rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--navy-700);
  }
  .nav-menu .nav-cta { margin-top: 1rem; display: inline-block; }
}