/* =========================================================
   ГАЛЕОН ГРУП — черновой макет главной страницы
   Design tokens + компоненты. Палитра: графит + платина/шампань
   по знаку G (слоновая кость #F3EBD4), не горчичное золото.
   Hero — один борт с предложенным брендингом. Лок-ап — предложение
   для согласования, не финальный брендбук.
   ========================================================= */

:root,
[data-theme='light'] {
  /* ---- Type scale (fluid clamp) ---- */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.375rem, 1.2rem + 3.6vw, 4rem);

  /* ---- 4px spacing system ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Surfaces ---- */
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-2: #eef1f4;
  --color-surface-offset: #e3e7ec;
  --color-surface-offset-2: #d8dee5;
  --color-divider: #dde1e6;
  --color-border: #ccd2da;

  /* ---- Text ---- */
  --color-text: #101826;
  --color-text-muted: #566072;
  --color-text-faint: #8b93a1;
  --color-text-inverse: #f6f7f9;

  /* ---- Ink / Графит (структурный тёмный цвет — шапка, футер, hero) ---- */
  --color-navy: #17181a;
  --color-navy-2: #1e1f21;
  --color-navy-3: #292a2c;
  --color-navy-border: #37383a;
  --color-navy-text: #f3ebd4;
  --color-navy-text-muted: #b4b0a4;

  /* ---- Accent: платина / холодная слоновая кость со знака G ---- */
  --color-accent: #d8d0b8;
  --color-accent-hover: #e8e0c8;
  --color-accent-active: #c4bca0;
  --color-accent-highlight: #f4f0e4;
  --color-accent-text-on: #141412;
  --color-champagne: #f3ebd4;
  --color-neon: #cfaf67;
  --color-neon-deep: #b9944e;
  --color-neon-soft: rgba(105,59,96,.18);

  /* ---- Status ---- */
  --color-success: #2f7a4d;
  --color-success-highlight: #d7ecdf;
  --color-error: #b3324a;
  --color-error-highlight: #f3d9df;
  --color-pending: #7a766c;
  --color-pending-highlight: #eeebe3;

  /* ---- Radius ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Shadows (тон подобран под холодную поверхность) ---- */
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 250 / 0.08);
  --shadow-md: 0 6px 16px oklch(0.2 0.02 250 / 0.10);
  --shadow-lg: 0 16px 36px oklch(0.2 0.02 250 / 0.16);

  /* ---- Content widths ---- */
  --content-narrow: 640px;
  --content-default: 980px;
  --content-wide: 1240px;
  --content-full: 100%;

  /* ---- Fonts ---- */
  --font-display: 'Oswald', 'Roboto Condensed', 'Segoe UI', sans-serif;
  --font-ui: 'Roboto Condensed', 'Oswald', sans-serif;
  --font-body: 'Inter', 'Golos Text', 'Segoe UI', sans-serif;
}

[data-theme='dark'] {
  --color-bg: #121213;
  --color-surface: #17181a;
  --color-surface-2: #1d1e20;
  --color-surface-offset: #232426;
  --color-surface-offset-2: #2b2c2e;
  --color-divider: #313234;
  --color-border: #38393b;

  --color-text: #eceae4;
  --color-text-muted: #a8a5a0;
  --color-text-faint: #79766f;
  --color-text-inverse: #17181a;

  --color-navy: #0e0e10;
  --color-navy-2: #17181a;
  --color-navy-3: #1e1f21;
  --color-navy-border: #2f3032;
  --color-navy-text: #f3ebd4;
  --color-navy-text-muted: #b4b0a4;

  --color-accent: #e8e0c8;
  --color-accent-hover: #f3ebd4;
  --color-accent-active: #d4ccb4;
  --color-accent-highlight: #2a2924;
  --color-accent-text-on: #141412;
  --color-champagne: #f3ebd4;
  --color-neon: #cfaf67;
  --color-neon-deep: #b9944e;
  --color-neon-soft: rgba(201,154,189,.18);

  --color-success: #5cb381;
  --color-success-highlight: #1c3126;
  --color-error: #e17690;
  --color-error-highlight: #38222a;
  --color-pending: #c4bca0;
  --color-pending-highlight: #2a2924;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
  --shadow-md: 0 6px 16px oklch(0 0 0 / 0.40);
  --shadow-lg: 0 16px 36px oklch(0 0 0 / 0.50);
}

/* =========================================================
   Базовые элементы типографики
   ========================================================= */

h1,
h2,
h3,
.font-display {
  font-family: var(--font-display);
}

h1,
.h1 {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
h2,
.h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

.mark {
  color: var(--color-neon);
}
h3,
.h3 {
  font-size: var(--text-lg);
  font-weight: 700;
}

p {
  color: var(--color-text-muted);
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   Layout helpers
   ========================================================= */

.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.wrap--narrow {
  max-width: var(--content-default);
}

.section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.section--tight {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neon);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  flex-shrink: 0;
}

.section-head h2 {
  margin-bottom: var(--space-3);
}

.section-head p {
  font-size: var(--text-base);
  max-width: 42rem;
}

/* =========================================================
   Черновая плашка (напоминание, что макет не финальный)
   ========================================================= */

.draft-banner {
  background: var(--color-navy);
  color: var(--color-navy-text-muted);
  border-bottom: 1px solid var(--color-navy-border);
}

.draft-banner .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding-block: 0.65rem;
  font-size: var(--text-xs);
  text-align: center;
}

.draft-banner strong {
  color: var(--color-accent);
  font-weight: 700;
}

/* =========================================================
   Header
   ========================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--color-navy) 96%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-navy-border);
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header--hidden {
  transform: translateY(-100%);
}

.header--scrolled {
  box-shadow: var(--shadow-md);
}

.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  min-height: 4rem;
}

.brand {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  color: var(--color-navy-text);
  min-width: 0;
}

.brand svg {
  width: 2rem;
  height: 2rem;
  color: var(--color-accent);
}

.brand-mark {
  height: 2.7rem;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-words {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 2.7rem;
  font-family: Anton, var(--font-display);
  font-weight: 400;
  font-size: 0.74rem;
  line-height: 0.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy-text);
}

.brand-lead {
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

.draft-banner a {
  color: var(--color-neon);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.nav {
  display: none;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

.nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy-text-muted);
  padding-block: var(--space-2);
  position: relative;
  white-space: nowrap;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--color-navy-text);
}

.nav a[aria-disabled='true'] {
  cursor: default;
}

.nav-soon {
  font-size: var(--text-xs);
  color: var(--color-navy-text-muted);
  opacity: 0.7;
  margin-left: var(--space-1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-phone {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--text-sm);
  color: var(--color-navy-text);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

.header-phone:hover,
.header-phone:focus-visible {
  color: var(--color-accent);
}

.header-phone span {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-navy-text-muted);
  white-space: nowrap;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  color: var(--color-navy-text-muted);
  border: 1px solid var(--color-navy-border);
}

.theme-toggle:hover {
  color: var(--color-navy-text);
  border-color: var(--color-accent);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-navy-text);
  flex-shrink: 0;
}

.btn.header-cta {
  display: none;
}

@media (min-width: 860px) {
  .nav {
    display: flex;
  }
  .menu-toggle {
    display: none;
  }
  .btn.header-cta {
    display: inline-flex;
  }
}

@media (min-width: 1200px) {
  .header-phone {
    display: flex;
  }
}

/* Mobile menu panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  top: 4rem;
  z-index: 55;
  background: var(--color-navy);
  padding: var(--space-6) var(--space-5);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-nav a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-navy-border);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy-text);
}

.mobile-nav .btn {
  margin-top: var(--space-6);
  width: 100%;
  justify-content: center;
}

.mobile-phone {
  margin-top: var(--space-8);
  color: var(--color-navy-text);
  font-size: var(--text-lg);
  font-weight: 700;
}

.mobile-phone span {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-navy-text-muted);
  margin-bottom: var(--space-1);
}

@media (min-width: 860px) {
  .mobile-nav {
    display: none;
  }
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.85rem;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  isolation: isolate;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease,
    background 180ms ease;
}

.btn-primary {
  background: linear-gradient(180deg, #cfaf67 0%, var(--color-neon-deep) 100%);
  color: #041018;
  box-shadow: 0 8px 22px rgba(56, 189, 248, 0.28);
  animation: cta-pulse 2.2s ease-in-out infinite;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, 0.5) 48%, transparent 64%);
  transform: translateX(-140%);
  animation: cta-shine 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.btn-primary > * {
  position: relative;
  z-index: 1;
}
.btn-primary:hover {
  transform: scale(1.07);
  background: linear-gradient(180deg, #e8d8b0 0%, #b9944e 100%);
  box-shadow: 0 12px 32px rgba(56, 189, 248, 0.45);
  animation: none;
}
.btn-primary:active {
  transform: scale(0.96);
  background: var(--color-neon-deep);
}

@keyframes cta-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8px 22px rgba(56, 189, 248, 0.28);
  }
  50% {
    transform: scale(1.055);
    box-shadow: 0 0 0 16px rgba(56, 189, 248, 0);
  }
}

@keyframes cta-shine {
  0%,
  50% {
    transform: translateX(-140%);
  }
  72%,
  100% {
    transform: translateX(140%);
  }
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-navy-border);
  color: var(--color-navy-text);
}
.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-navy-text);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-lg {
  min-height: 3.4rem;
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-primary::after,
  .hero-drive,
  .hero-photo,
  .adv-figure {
    animation: none;
  }
}

.btn-block {
  width: 100%;
}

/* =========================================================
   Hero (Блок 1)
   ========================================================= */

.hero {
  background: var(--color-navy);
  color: var(--color-navy-text);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-navy-border);
}

.hero--video,
.hero--shot {
  min-height: min(46rem, 92vh);
  display: flex;
  align-items: center;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-drive {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 36%;
  will-change: transform;
  animation: truck-drive 14s ease-in-out infinite alternate;
}

.hero-video,
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
  display: block;
  animation: truck-ride 1.1s ease-in-out infinite;
}

@keyframes truck-drive {
  0% {
    transform: translate3d(0.4%, 0.2%, 0);
  }
  100% {
    transform: translate3d(-0.6%, -0.15%, 0);
  }
}

@keyframes truck-ride {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 2px, 0);
  }
}

.hero-media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 12, 14, 0.88) 0%, rgba(12, 12, 14, 0.62) 38%, rgba(12, 12, 14, 0.22) 68%, rgba(12, 12, 14, 0.08) 100%),
    linear-gradient(0deg, rgba(12, 12, 14, 0.5) 0%, rgba(12, 12, 14, 0) 42%);
}

[data-theme='light'] .hero-media-overlay {
  background:
    linear-gradient(90deg, rgba(10, 10, 12, 0.9) 0%, rgba(10, 10, 12, 0.66) 38%, rgba(10, 10, 12, 0.26) 68%, rgba(10, 10, 12, 0.1) 100%),
    linear-gradient(0deg, rgba(10, 10, 12, 0.52) 0%, rgba(10, 10, 12, 0) 42%);
}

.hero-grid {
  display: grid;
  gap: var(--space-10);
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
  align-items: center;
}

.hero-grid--overlay {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr;
}

.hero-media-note {
  margin-top: var(--space-4);
  max-width: 30rem;
}

.hero-copy h1 {
  color: #fff;
  margin-bottom: var(--space-5);
  max-width: 18ch;
}

.hero-copy .lede {
  font-size: var(--text-lg);
  color: var(--color-navy-text-muted);
  max-width: 34rem;
  margin-bottom: var(--space-8);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
}

.hero-phone-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid rgba(243, 235, 212, 0.28);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy-text);
  text-decoration: none;
}

.hero-phone-link:hover,
.hero-phone-link:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-navy-text-muted);
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-trust li::before {
  content: '';
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  flex-shrink: 0;
}

.hero-visual {
  border-radius: var(--radius-xl);
  border: 1px dashed var(--color-navy-border);
  background: var(--color-navy-2);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8);
}

.hero-visual svg {
  width: 3rem;
  height: 3rem;
  color: var(--color-navy-text-muted);
}

.hero-visual p {
  font-size: var(--text-xs);
  color: var(--color-navy-text-muted);
  max-width: 20rem;
}

@media (max-width: 899px) {
  .hero--shot {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
  }

  .hero--shot .hero-media {
    position: relative;
    inset: auto;
    order: 2;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .hero--shot .hero-grid--overlay {
    order: 1;
    padding-block: var(--space-10) var(--space-8);
  }

  .hero--shot .hero-drive {
    left: 0;
  }

  .hero-photo {
    object-position: center;
  }

  .hero-media-overlay {
    background: linear-gradient(180deg, rgba(12, 12, 14, 0.12) 0%, rgba(12, 12, 14, 0) 35%, rgba(12, 12, 14, 0.28) 100%);
  }
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
  }

  .hero-grid--overlay {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 34rem;
  }
}

/* =========================================================
   Segment / service cards (Блоки 2, 3)
   ========================================================= */

.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 620px) {
  .card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .card-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .card-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.seg-card,
.svc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.seg-card {
  align-items: flex-start;
}

.seg-card svg,
.svc-card svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-accent);
}

.seg-card span,
.svc-card h3 {
  font-size: var(--text-sm);
  font-weight: 600;
}

.svc-card p {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.svc-card .link {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.svc-card .link:hover {
  color: var(--color-accent-hover);
}

.svc-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.svc-card--wide .svc-copy {
  flex: 1;
  min-width: 220px;
}

/* =========================================================
   Pending / ожидает данных блок (для блоков 4, 6, 8)
   ========================================================= */

.pending-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}

.pending-block .pending-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-pending);
  background: var(--color-pending-highlight);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.pending-block h3 {
  font-size: var(--text-base);
}

.pending-block p {
  font-size: var(--text-sm);
}

.pending-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 700px) {
  .pending-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* =========================================================
   Trust facts (внутри Блока 4, когда данные появятся)
   ========================================================= */

.fact-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.fact-card svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-accent);
  flex-shrink: 0;
}

.fact-card h3 {
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.fact-card p {
  font-size: var(--text-xs);
}

/* =========================================================
   Наши преимущества (Блок 4) — золотые бейджи над фото
   ========================================================= */

.advantages {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
}

.advantages-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.advantages-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.advantages-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 13, 0.55) 0%, rgba(10, 11, 13, 0.42) 50%, rgba(10, 11, 13, 0.72) 100%);
}

.advantages-content {
  position: relative;
  z-index: 1;
}

.section-head--on-dark h2 {
  color: #fff;
}

.section-head-note {
  font-size: var(--text-sm);
  color: var(--color-navy-text-muted);
  max-width: 42rem;
}

.badge-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}

@media (min-width: 720px) {
  .badge-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.adv-figure {
  width: 9.25rem;
  height: 9.25rem;
  object-fit: contain;
  display: block;
  background: transparent;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
  animation: orb-float 4.6s ease-in-out infinite;
}

.badge-card:nth-child(2) .adv-figure { animation-delay: 0.4s; }
.badge-card:nth-child(3) .adv-figure { animation-delay: 0.8s; }
.badge-card:nth-child(4) .adv-figure { animation-delay: 1.2s; }
.badge-card:nth-child(5) .adv-figure { animation-delay: 1.6s; }

@keyframes orb-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.badge-card h3 {
  font-size: var(--text-sm);
  color: #fff;
  font-weight: 600;
  max-width: 11rem;
}

.badge-card p {
  font-size: var(--text-xs);
  color: var(--color-navy-text-muted);
  max-width: 12rem;
  line-height: 1.4;
}

.section-head--center {
  text-align: center;
  margin-inline: auto;
}

/* =========================================================
   Почему нам доверяют
   ========================================================= */

.trust {
  background: #0f1012;
  color: var(--color-navy-text);
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
}

.trust .section-head h2 {
  color: #fff;
}

.trust-grid {
  display: grid;
  gap: var(--space-5);
}

.trust-card {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: #eceae4;
  text-transform: none;
  letter-spacing: 0;
}

.trust-truck {
  border-radius: var(--radius-xl);
  overflow: visible;
  min-height: 14rem;
  background: radial-gradient(ellipse at 50% 58%, rgba(125, 211, 252, 0.16), transparent 64%);
}

.trust-truck img {
  width: 100%;
  height: 100%;
  min-height: 14rem;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45));
}

@media (min-width: 900px) {
  .trust-grid {
    grid-template-columns: minmax(11rem, 1fr) minmax(22rem, 1.4fr) minmax(11rem, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: var(--space-8);
  }

  .trust-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .trust-card:nth-child(2) { grid-column: 3; grid-row: 1; text-align: right; }
  .trust-truck {
    grid-column: 2;
    grid-row: 1 / span 3;
    min-height: 28rem;
  }
  .trust-truck img { min-height: 28rem; }
  .trust-card:nth-child(4) { grid-column: 1; grid-row: 2; }
  .trust-card:nth-child(5) { grid-column: 3; grid-row: 2; text-align: right; }
  .trust-card--wide { grid-column: 1; grid-row: 3; text-align: left; }
}

/* =========================================================
   Steps / дорога с этапами (Блок 5)
   ========================================================= */

.road-section {
  background:
    linear-gradient(180deg, #141518 0%, #0d0e10 100%);
  color: var(--color-navy-text);
}

.road-section .road-card {
  background: rgba(23, 24, 26, 0.88);
  border-color: rgba(243, 235, 212, 0.12);
}

.road-section .road-card h3 {
  color: #fff;
}

.road-section .road-card p {
  color: var(--color-navy-text-muted);
}

.road-section .road-badge {
  background: linear-gradient(180deg, #cfaf67 0%, var(--color-neon-deep) 100%);
  color: #041018;
  box-shadow: 0 0 0 6px #0d0e10, 0 0 18px rgba(56, 189, 248, 0.35);
}

.road {
  position: relative;
  display: grid;
  gap: var(--space-6);
  max-width: 46rem;
  margin-inline: auto;
}

.road-track {
  position: absolute;
  top: 1.375rem;
  bottom: 1.375rem;
  left: 1.375rem;
  width: 0;
  z-index: 3;
  pointer-events: none;
}

.road-line {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 5px;
  transform: translateX(-50%);
  border-radius: var(--radius-full);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--color-accent) 0 12px,
    transparent 12px 20px
  );
}

.road-marker {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: -1.125rem;
  margin-top: -1.125rem;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}

.road-marker svg {
  width: 1.15rem;
  height: 1.15rem;
}

.road-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  position: relative;
  z-index: 1;
}

.road-badge {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-text-on);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--color-bg);
}

.road-card {
  position: relative;
  z-index: 4;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-md);
}

.road-card h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.road-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (min-width: 820px) {
  .road {
    max-width: 52rem;
    padding-inline: var(--space-16);
  }

  .road-track {
    left: 50%;
    top: 0;
    bottom: 0;
  }

  .road-step {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .road-step--left .road-card {
    grid-column: 1;
    text-align: right;
  }

  .road-step--left .road-badge {
    grid-column: 2;
    justify-self: start;
    margin-left: calc(-1.375rem);
  }

  .road-step--right {
    grid-template-columns: 1fr 1fr;
  }

  .road-step--right .road-badge {
    grid-column: 1;
    justify-self: end;
    margin-right: calc(-1.375rem);
    order: -1;
  }

  .road-step--right .road-card {
    grid-column: 2;
  }
}

.steps-cta {
  margin-top: var(--space-10);
  text-align: center;
}

.road-section .btn-outline,
.form-section--live .btn-outline {
  border-color: rgba(243, 235, 212, 0.28);
  color: #f3ebd4;
}

/* =========================================================
   Request form (Блок 7)
   ========================================================= */

.form-section {
  background: var(--color-surface-offset);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.form-section--live {
  background: #0f1116;
  color: var(--color-navy-text);
  border-color: #1d2026;
}

.form-section--live h2 {
  color: #fff;
}

.form-section--live p {
  color: var(--color-navy-text-muted);
}

.form-live {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 900px) {
  .form-live {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: end;
    gap: var(--space-12);
  }
}

.form-person {
  text-align: left;
}

.form-person img {
  width: 100%;
  max-width: 28rem;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

.form-person-name {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

.form-person-role {
  font-size: var(--text-sm);
}

.form-person-phone {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-neon);
}

.form-section--live .form-card {
  background: #171a20;
  border-color: #2a3038;
}

.form-section--live label,
.form-section--live .consent label {
  color: var(--color-navy-text-muted);
}

.form-section--live input,
.form-section--live textarea,
.form-section--live select {
  background: #101318;
  border-color: #30363f;
  color: #f6f7f9;
}

.form-section--live input:focus,
.form-section--live textarea:focus,
.form-section--live select:focus {
  outline: none;
  border-color: var(--color-neon-deep);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
}

.form-grid {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }
}

.form-side-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.form-side-list li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-side-list svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  box-shadow: var(--shadow-md);
}

.field-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-4);
}

@media (min-width: 520px) {
  .field-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

.field textarea {
  min-height: 5rem;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.consent input {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin-top: 0.15rem;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.consent label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.consent a {
  color: var(--color-accent);
  text-decoration: underline;
}

.form-alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.form-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-4);
}

.calc-result {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-accent);
  background: color-mix(in oklab, var(--color-accent-highlight) 55%, var(--color-surface));
}

.calc-result-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.calc-result-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.calc-result-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* =========================================================
   FAQ (Блок 9)
   ========================================================= */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--content-default);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: 600;
  font-size: var(--text-sm);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--transition-interactive);
}

.faq-item[open] svg {
  transform: rotate(45deg);
  color: var(--color-accent);
}

.faq-item .faq-a {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* =========================================================
   Contacts (Блок 10)
   ========================================================= */

.contacts-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 860px) {
  .contacts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-item {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.contact-item svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent);
  flex-shrink: 0;
}

.contact-item h3 {
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.contact-item p {
  font-size: var(--text-sm);
}

.contacts-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.map-placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-6);
}

.map-placeholder svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text-faint);
}

.map-placeholder p {
  font-size: var(--text-xs);
}

/* =========================================================
   Footer (Блок 11)
   ========================================================= */

.footer {
  background: var(--color-navy);
  color: var(--color-navy-text-muted);
  border-top: 1px solid var(--color-navy-border);
}

.footer-grid {
  display: grid;
  gap: var(--space-10);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer-brand .brand {
  color: var(--color-navy-text);
  margin-bottom: var(--space-4);
}

.footer-brand p {
  font-size: var(--text-sm);
  color: var(--color-navy-text-muted);
  max-width: 26rem;
}

.footer-col h3 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy-text);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  font-size: var(--text-sm);
}

.footer-col a:hover {
  color: var(--color-navy-text);
}

.footer-legal {
  font-size: var(--text-sm);
  color: var(--color-navy-text-muted);
  max-width: 18rem;
}

.footer-bottom {
  border-top: 1px solid var(--color-navy-border);
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--text-xs);
}

.footer-bottom .pending-tag-inline {
  color: var(--color-pending);
}

/* =========================================================
   Sticky mobile CTA
   ========================================================= */

.sticky-cta {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
}

@media (max-width: 859px) {
  body {
    padding-bottom: 5.5rem;
  }

  .form-card {
    margin-bottom: 4.5rem;
  }
}

@media (min-width: 860px) {
  .sticky-cta {
    display: none;
  }
}

/* =========================================================
   Мини-попап заявки (имя + телефон)
   ========================================================= */

.lead-dialog:not([open]) {
  display: none;
}

.lead-dialog[open] {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 26rem;
  width: calc(100% - 2rem);
  margin: auto;
}

.lead-dialog::backdrop {
  background: rgba(14, 14, 16, 0.64);
}

.lead-dialog-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: var(--shadow-lg);
}

.lead-dialog-card h2 {
  margin-bottom: var(--space-3);
}

.lead-dialog-lede {
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.lead-dialog-lede a {
  color: var(--color-accent);
  font-weight: 600;
}

.lead-dialog-lede a:hover {
  color: var(--color-accent-hover);
}

.lead-dialog-form .field {
  margin-bottom: var(--space-4);
}

.lead-dialog-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
}

.lead-dialog-close:hover,
.lead-dialog-close:focus-visible {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.lead-dialog-more {
  display: inline-flex;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}

.lead-dialog-more:hover {
  color: var(--color-accent-hover);
}

/* =========================================================
   Misc
   ========================================================= */

.visually-hidden-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Промежуточный макет для показа Анне: без «кухни» и лишнего хрома */
.is-review .theme-toggle {
  display: none;
}

.is-review .visually-hidden-note {
  display: none;
}

.is-review .header {
  top: 0;
}

/* Hero: offer above a full-width, unobscured truck. */
.hero--fleet {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  background: #17181a;
}
.hero--fleet .hero-grid--overlay {
  order: 0;
  width: 100%;
  padding-block: clamp(2.5rem, 5vw, 5rem) 1.5rem;
}
.hero--fleet .hero-copy {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.25rem 4rem;
  max-width: none;
  align-items: start;
}
.hero--fleet .hero-copy h1 {
  grid-row: 1 / 4;
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.5rem, 4.2vw, 4.5rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.hero--fleet .hero-copy .lede {
  margin: 0;
  max-width: 38ch;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: #c6c8cc;
}
.hero--fleet .hero-cta-row { margin: 0; gap: 0.75rem 1rem; }
.hero--fleet .hero-trust { color: #c6c8cc; margin: 0; }
.hero--fleet .hero-media {
  position: relative;
  inset: auto;
  order: 1;
  width: min(100%, 1440px);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.hero--fleet .hero-drive {
  position: absolute;
  inset: 0;
  animation: none;
  will-change: auto;
}
.hero--fleet .hero-photo {
  object-fit: contain;
  object-position: center;
  animation: none;
}
.hero--fleet .hero-media-overlay {
  background: linear-gradient(180deg, #17181a 0%, transparent 12%, transparent 90%, #17181a 100%);
}
.hero--fleet .hero-phone-link {
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.hero--fleet .hero-phone-link:hover,
.hero--fleet .hero-phone-link:focus-visible {
  background: #d8d0b8;
  border-color: #d8d0b8;
  color: #17181a;
}
.hero--fleet .hero-phone-link:active { background: #c4bca0; color: #17181a; }
@media (max-width: 899px) {
  .hero--fleet .hero-copy { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero--fleet .hero-copy h1 { grid-row: auto; max-width: 23ch; }
  .hero--fleet .hero-grid--overlay { padding-block: 2.5rem 1rem; }
  .hero--fleet .hero-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 479px) {
  .hero--fleet .hero-copy h1 { font-size: 2.35rem; }
  .hero--fleet .hero-cta-row { align-items: stretch; }
  .hero--fleet .hero-cta-row .btn { width: 100%; }
  .hero--fleet .hero-phone-link { padding-inline: 1rem; }
}/* Approved cargo concept, October 2026 */
.header { background:#fafaf7; border-color:#e2e3df; backdrop-filter:none; }
.brand-lockup { width:150px; height:auto; filter:brightness(0); }
.header .nav a,.header-phone,.header-phone span,.menu-toggle { color:#17181a; }
.btn.btn-primary { background:#cfaf67; color:#17181a; border:1px solid transparent; border-radius:8px; box-shadow:none; min-height:54px; padding:14px 24px; gap:20px; }
.btn.btn-primary::after { display:none; }
.btn.btn-primary:hover { background:#e3c78b; color:#17181a; box-shadow:none; transform:translateY(-1px); }
.btn.btn-primary:active { background:#b9944e; transform:none; }
.btn.header-cta { min-height:44px; padding:10px 18px; }
.cargo-hero { position:relative; isolation:isolate; overflow:hidden; background:#fafaf7; color:#17181a; min-height:690px; }
.cargo-hero-image { position:absolute; inset:0 0 0 35%; z-index:-2; }
.cargo-hero-image img { width:100%; height:100%; object-fit:cover; object-position:65% center; }
.cargo-hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#fafaf7 0%,#fafaf7 25%,rgba(250,250,247,.96) 35%,rgba(250,250,247,.65) 45%,transparent 61%); }
.cargo-hero-content { padding-block:64px 48px; }
.cargo-hero .eyebrow { color:#616b74; letter-spacing:.16em; font-size:12px; margin-bottom:22px; }
.cargo-hero h1 { font-size:clamp(42px,4.8vw,72px); line-height:1.09; letter-spacing:-.035em; max-width:690px; color:#17181a; margin-bottom:24px; text-wrap:initial; }
.cargo-lede { max-width:440px; font-size:19px; line-height:1.55; color:#434a50; margin-bottom:26px; }
.cargo-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; max-width:600px; }
.cargo-actions a { color:#17181a; font-size:15px; font-weight:600; border-bottom:2px solid #cfaf67; padding-block:6px; }
.cargo-details { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:510px; margin-top:44px; }
.cargo-details span { display:block; font-family:Oswald,sans-serif; color:#cfaf67; font-size:22px; border-bottom:2px solid #cfaf67; padding-bottom:8px; margin-bottom:10px; }
.cargo-details h2 { font-family:Inter,sans-serif; font-size:14px; color:#17181a; margin-bottom:5px; }
.cargo-details p { color:#525a60; font-size:12px; line-height:1.5; }
.cargo-road { background:#17181a; padding-block:80px; overflow:hidden; }
.cargo-road .section-head h2 { color:#f4f0e6; font-size:clamp(36px,4vw,58px); }
.cargo-road .road { max-width:1000px; min-height:740px; padding:35px 0; gap:12px; }
.cargo-road .road-track { left:50%; width:140px; top:0; bottom:0; transform:translateX(-50%); z-index:0; background:linear-gradient(90deg,#35373a,#45474b 48%,#35373a); border-inline:4px solid #d8d0b8; box-shadow:0 0 0 8px #25272a; }
.cargo-road .road-track::before,.cargo-road .road-track::after { content:''; position:absolute; top:0; bottom:0; width:2px; background:#eee; }
.cargo-road .road-track::before { left:9px; }.cargo-road .road-track::after { right:9px; }
.cargo-road .road-line { width:4px; background:repeating-linear-gradient(to bottom,#f5f3ed 0 24px,transparent 24px 48px); border-radius:0; }
.cargo-road .road-marker { width:40px; height:90px; border:0; background:none; border-radius:0; box-shadow:0 6px 10px #0006; margin-left:-46px; margin-top:-45px; }
.cargo-road .road-marker svg { width:40px; height:90px; }
.cargo-road .road-step { display:grid; grid-template-columns:1fr 1fr; gap:220px; align-content:center; min-height:165px; }
.cargo-road .road-card { background:none; border:0; box-shadow:none; padding:0; text-align:left; grid-row:2; }
.cargo-road .road-badge { background:none; box-shadow:none; color:#cfaf67; font-size:48px; width:auto; height:auto; border-radius:0; justify-content:start; margin:0; grid-row:1; }
.cargo-road .road-step--left .road-card,.cargo-road .road-step--left .road-badge { grid-column:1; text-align:right; justify-self:end; margin:0; }
.cargo-road .road-step--right .road-card,.cargo-road .road-step--right .road-badge { grid-column:2; justify-self:start; margin:0; }
.cargo-road .road-card h3 { color:#d8d0b8; font-size:27px; margin-bottom:10px; }
.cargo-road .road-card p { color:#e0e1e3; font-size:15px; max-width:280px; }
@media (max-width:1150px) { .header-phone {display:none;} .cargo-hero h1 {font-size:58px;} }
@media (max-width:819px) {
.brand-lockup {width:122px;} .cargo-hero {min-height:0;display:flex;flex-direction:column;} .cargo-hero-image {position:relative;inset:auto;order:2;height:370px;} .cargo-hero::after {display:none;} .cargo-hero-content {padding-block:35px;} .cargo-hero h1 {font-size:clamp(38px,7vw,58px);} .cargo-details {margin-top:28px;} .cargo-lede {font-size:17px;} .cargo-actions {gap:15px;} .cargo-road {padding-block:48px;} .cargo-road .road {min-height:680px;gap:18px;padding:20px 0 20px 110px;} .cargo-road .road-track {left:40px;width:70px;} .cargo-road .road-step {grid-template-columns:1fr;gap:5px;min-height:145px;} .cargo-road .road-step .road-card,.cargo-road .road-step .road-badge {grid-column:1;justify-self:start;text-align:left;} .cargo-road .road-badge {font-size:36px;} .cargo-road .road-card h3 {font-size:24px;} .cargo-road .road-marker {margin-left:-25px;width:24px;height:54px;margin-top:-27px;} .cargo-road .road-marker svg {width:24px;height:54px;}
}
@media (max-width:479px) { .cargo-hero-image {height:300px;} .cargo-details {gap:12px;} .cargo-actions .btn {width:100%;justify-content:space-between;} .cargo-road .road-card p {font-size:14px;} }
.btn.btn-primary { animation:none; }
.cargo-details > div::before { content:''; display:block; height:82px; margin-bottom:10px; border-radius:4px; background-image:url('./assets/brand/hero-gold-nopeople.png'); background-size:410%; background-position:88% 47%; }
.cargo-details > div:nth-child(2)::before {background-size:570%;background-position:84% 61%;}
.cargo-details > div:nth-child(3)::before {background-size:160%;background-position:82% 45%;}
@media(max-width:479px){.cargo-details > div::before{height:65px;}}
.cargo-road .section-head p { color:#d5d7da; }
@media(min-width:820px){.cargo-road .road-track{width:240px;background:none;border:0;box-shadow:none;}.cargo-road .road-track::before,.cargo-road .road-track::after{display:none;}.cargo-road .road-art{width:100%;height:100%;}.cargo-road .road-marker{margin-left:-38px;}}
@media(max-width:819px){.road-art{display:none;}.cargo-road .road-track{background:repeating-linear-gradient(to bottom,transparent 0 24px,transparent 24px 48px),linear-gradient(90deg,#35373a,#45474b 48%,#35373a);}.cargo-road .road-track::after{width:3px;right:50%;background:repeating-linear-gradient(to bottom,#f5f3ed 0 24px,transparent 24px 48px);}}
.cargo-road .road-step { column-gap:220px; row-gap:4px; }
@media(max-width:819px){.cargo-road .road-step{column-gap:0;row-gap:4px;}}
/* Detailed road composition matching the approved visual */
.road-detail { background:#17181a; color:#f4f3ed; overflow:hidden; }
.road-detail-layout { position:relative; min-height:820px; isolation:isolate; }
.road-detail-heading { position:absolute; z-index:2; left:0; top:64px; width:32%; }
.road-detail-heading h2 { font-size:clamp(36px,4vw,56px); line-height:1.08; color:#f4f3ed; margin-bottom:16px; }
.road-detail-heading p { max-width:27ch; font-size:15px; line-height:1.6; color:#d9dbdc; }
.road-detail-scenery { position:absolute; top:0; bottom:0; left:27%; width:48%; z-index:-1; }
.road-detail-scenery img { width:100%; height:100%; object-fit:fill; }
.road-detail-steps { list-style:none; margin:0; padding:0; }
.road-detail-step { position:absolute; display:flex; align-items:start; width:36%; gap:24px; }
.road-detail-step--1 { left:3%; top:37%; }.road-detail-step--2 { right:0; top:46%; }
.road-detail-step--3 { left:3%; top:68%; }.road-detail-step--4 { right:0; top:76%; }
.road-detail-copy { width:190px; flex-shrink:0; }
.road-detail-number { font-family:Oswald,sans-serif; font-size:52px; line-height:1; color:#cfaf67; display:block; margin-bottom:10px; }
.road-detail-copy h3 { font-size:24px; color:#f2eedf; margin-bottom:8px; }
.road-detail-copy p { font-size:14px; color:#d9dbdc; line-height:1.55; max-width:23ch; }
.road-detail-icon { display:flex; align-items:center; justify-content:center; width:62px; height:62px; border:1px solid #d8d0b8; border-radius:50%; color:#e8e0c8; flex-shrink:0; position:relative; margin-top:0; background:#17181acc; }
.road-detail-icon svg { width:28px;height:28px; }
.road-detail-connector { height:1px; width:100px; position:absolute; background:#d8d0b8; top:31px; left:276px; }
.road-detail-connector::after { content:''; position:absolute; right:-4px; top:-4px; width:9px; height:9px; background:#cfaf67; border:1px solid #f3e5c3; border-radius:50%; }
.road-detail-step:nth-child(even) { flex-direction:row-reverse; justify-content:flex-start; }
.road-detail-step:nth-child(even) .road-detail-connector { left:auto; right:276px; width:80px; }
.road-detail-step:nth-child(even) .road-detail-connector::after {right:auto;left:-4px;}
@media(min-width:1300px){.road-detail-layout{min-height:880px;}.road-detail-copy{width:210px;}.road-detail-connector{left:296px;}.road-detail-step:nth-child(even) .road-detail-connector{right:296px;}}
@media(max-width:1050px) and (min-width:700px){.road-detail-layout{min-height:730px;}.road-detail-heading{left:2%;top:45px;}.road-detail-heading h2{font-size:36px;}.road-detail-heading p{font-size:13px;}.road-detail-copy{width:150px;}.road-detail-step{gap:16px;width:37%;}.road-detail-number{font-size:42px;}.road-detail-copy h3{font-size:20px;}.road-detail-copy p{font-size:12px;}.road-detail-icon{width:48px;height:48px;}.road-detail-connector{left:214px;top:24px;width:60px;}.road-detail-step:nth-child(even) .road-detail-connector{right:214px;width:45px;}}
@media(max-width:699px){.road-detail-layout{min-height:1050px;}.road-detail-heading{position:relative;left:auto;top:auto;width:100%;padding-top:40px;}.road-detail-heading h2{font-size:36px;}.road-detail-heading p{font-size:14px;max-width:33ch;}.road-detail-scenery{left:-26%;width:100%;top:215px;bottom:0;mask-image:linear-gradient(90deg,transparent 0%,black 25%,black 68%,transparent 90%);}.road-detail-step,.road-detail-step:nth-child(even){left:43%;right:auto;width:57%;flex-direction:column;gap:10px;}.road-detail-step--1{top:26%;}.road-detail-step--2{top:44%;}.road-detail-step--3{top:62%;}.road-detail-step--4{top:80%;}.road-detail-copy{width:auto;}.road-detail-number{font-size:38px;}.road-detail-copy h3{font-size:22px;}.road-detail-copy p{font-size:13px;}.road-detail-icon{position:absolute;left:-55px;top:4px;width:42px;height:42px;}.road-detail-icon svg{width:22px;height:22px;}.road-detail-connector,.road-detail-step:nth-child(even) .road-detail-connector{left:-78px;right:auto;width:24px;top:25px;}.road-detail-connector::after{right:auto;left:-4px;}}
.road-detail-connector {width:220px;}
.road-detail-step:nth-child(even) .road-detail-connector {width:285px;}
.road-detail-scenery {mask-image:linear-gradient(90deg,transparent,black 14%,black 86%,transparent);}
@media(min-width:1300px){.road-detail-connector{width:205px;}.road-detail-step:nth-child(even) .road-detail-connector{width:250px;}}
@media(max-width:1050px) and (min-width:700px){.road-detail-connector{width:100px;}.road-detail-step:nth-child(even) .road-detail-connector{width:140px;}}
@media(max-width:699px){.road-detail-connector,.road-detail-step:nth-child(even) .road-detail-connector{width:24px;}}
/* Full-length transparent Anna portrait */
.form-section--live {background:#0f1116;}
.form-person {background:transparent;}
.form-person img {width:100%;max-width:28rem;max-height:760px;height:auto;object-fit:contain;background:transparent;object-position:center bottom;}
.form-section--live .field label {color:#e2ded2;}
@media(max-width:899px){.form-person img{max-width:24rem;max-height:660px;}}
/* Larger Anna portrait within the form column */
@media(min-width:900px){
  .form-person img {width:100%;max-width:none;max-height:none;}
  .form-live {grid-template-columns:1fr 1fr;gap:32px;}
}

/* Client situations: industry stories */
.eyebrow::before{display:none;content:none;}
.industry-jobs{background:#f5f6f7;padding:88px 0;}
.jobs-heading{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:end;margin-bottom:36px;}
.jobs-heading h2{font-size:clamp(32px,3.3vw,48px);line-height:1.18;margin:0;}
.jobs-heading>p{color:#58616d;line-height:1.65;max-width:360px;margin:0 0 4px;}
.jobs-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;}
.job-story{grid-column:span 2;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e0e4e8;}
.job-story:nth-child(n+4){grid-column:span 3;}
.job-visual{height:250px;position:relative;background-image:url('./assets/brand/industry-gold-nopeople.png');background-size:500% auto;background-position:0% 55%;background-repeat:no-repeat;}
.job-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.36),transparent 55%,rgba(0,0,0,.12));}
.job-story--2 .job-visual{background-position:25% 52%;}
.job-story--3 .job-visual{background-position:50% 60%;}
.job-story--4 .job-visual{background-position:75% 65%;}
.job-story--5 .job-visual{background-position:100% 60%;}
.job-sector{position:absolute;left:20px;top:20px;z-index:1;color:#fff;font-size:13px;font-weight:600;letter-spacing:.035em;}
.job-index{position:absolute;right:20px;top:12px;z-index:1;color:#cfaf67;font:500 32px 'Oswald',sans-serif;}
.job-copy{padding:26px;}
.job-copy h3{font:500 clamp(25px,2.15vw,31px)/1.22 'Oswald',sans-serif;color:#171c26;margin:0 0 16px;}
.job-task{font-size:15px;line-height:1.6;color:#53606e;min-height:72px;margin:0 0 22px;}
.job-plan{border-top:1px solid #e1e6eb;padding-top:18px;}
.job-plan>span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#cfaf67;}
.job-plan p{font-size:14px;line-height:1.55;color:#252e39;margin:8px 0 0;}
.jobs-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px;}
.jobs-footer p{color:#53606e;margin:0;}
@media(max-width:899px){.jobs-heading{grid-template-columns:1fr;gap:20px;}.jobs-heading>p{max-width:580px;}.jobs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}.job-story,.job-story:nth-child(n+4){grid-column:span 1;}.job-story:last-child{grid-column:span 2;}.job-story:last-child .job-visual{background-size:500% auto;background-position:100% 55%;}.industry-jobs{padding:64px 0;}}
@media(max-width:599px){.jobs-grid{grid-template-columns:1fr;}.job-story:last-child{grid-column:span 1;}.jobs-heading h2{font-size:33px;}.job-visual{height:245px;}.job-copy{padding:24px;}.job-task{min-height:0;}.jobs-footer{align-items:stretch;flex-direction:column;}.jobs-footer .btn{width:100%;}.industry-jobs{padding:48px 0;}}

/* Service stories: task, action, result */
.services-jobs{background:#eef1f4;padding:88px 0;}
.services-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.service-story{border-radius:12px;overflow:hidden;background:#fff;border:1px solid #dde3e9;}
.service-visual{position:relative;height:290px;background-image:url('./assets/brand/services-stories-atlas.png');background-size:400% auto;background-position:0% 57%;background-repeat:no-repeat;}
.service-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.46),transparent 55%);}
.service-story--2 .service-visual{background-position:33.333% 50%;}
.service-story--3 .service-visual{background-position:66.666% 53%;}
.service-story--4 .service-visual{background-position:100% 55%;}
.service-tag{position:absolute;z-index:1;top:24px;left:28px;color:white;font-weight:600;font-size:15px;}
.service-number{position:absolute;z-index:1;top:14px;right:28px;color:#cfaf67;font:500 38px 'Oswald',sans-serif;}
.service-copy{padding:32px;}
.service-copy h3{font:500 clamp(28px,2.6vw,36px)/1.2 'Oswald',sans-serif;color:#171c26;margin:0 0 18px;}
.service-when{color:#56616d;font-size:16px;line-height:1.6;min-height:77px;margin:0 0 24px;}
.service-action{border-top:1px solid #e0e6eb;padding-top:20px;}
.service-action>span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#cfaf67;font-weight:600;}
.service-action p{color:#252e39;font-size:15px;line-height:1.65;margin:10px 0 22px;min-height:100px;}
.service-outcome{padding:14px 16px;border-left:3px solid #cfaf67;background:#f5efdf;color:#675125;font-size:14px;line-height:1.5;margin:0 0 24px;}
.service-link{display:flex;width:100%;justify-content:space-between;align-items:center;background:transparent;border:0;border-top:1px solid #e0e6eb;padding:18px 0 0;color:#171c26;text-align:left;font-family:'Roboto Condensed',sans-serif;font-size:18px;font-weight:600;cursor:pointer;}
.service-link span{color:#cfaf67;font-size:25px;}.service-link:hover{color:#cfaf67;}.service-link:focus-visible{outline:2px solid #cfaf67;outline-offset:5px;}
@media(max-width:899px){.services-jobs{padding:64px 0;}.service-copy{padding:24px;}.service-visual{height:240px;}.service-action p{min-height:150px;}}
@media(max-width:599px){.services-jobs{padding:48px 0;}.services-stories{grid-template-columns:1fr;gap:24px;}.service-visual{height:245px;}.service-when,.service-action p{min-height:0;}.service-copy h3{font-size:29px;}.service-tag{left:20px;font-size:14px;}.service-number{right:20px;}}
.service-story--2 .service-visual{background-position:33.333% 25%;}.service-story--3 .service-visual{background-position:66.666% 30%;}.service-story--4 .service-visual{background-position:100% 40%;}

/* People and operations, with Galeon packing tape */
.assurance{background:#14171b;padding:88px 0;color:#fff;scroll-margin-top:90px;}
.assurance-heading{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:end;margin-bottom:40px;}
.assurance-heading h2{color:#fff;font-size:clamp(36px,3.7vw,54px);line-height:1.15;margin:0;}
.assurance-heading>p{color:#b6bfc8;line-height:1.65;margin:0 0 4px;max-width:400px;}
.assurance-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px;}
.assurance-card{grid-column:span 2;position:relative;background:#20252b;border-radius:10px;overflow:hidden;box-shadow:0 14px 30px #0002;}
.assurance-card:nth-child(n+4){grid-column:span 3;}
.assurance-scene{height:300px;position:relative;background-image:url('./assets/brand/advantages-team-atlas.png');background-size:500% auto;background-position:0% 45%;background-repeat:no-repeat;}
.assurance-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0006,transparent 45%,#0002);}
.assurance-card--driver .assurance-scene{background-position:25% 25%;}
.assurance-card--docs .assurance-scene{background-position:50% 25%;}
.assurance-card--tracking .assurance-scene{background-position:75% 45%;}
.assurance-card--insurance .assurance-scene{background-position:100% 27%;}
.assurance-label{position:absolute;z-index:1;left:20px;top:20px;right:16px;color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 8px #0008;}
.brand-tape{position:relative;z-index:2;display:flex;width:110%;margin:-19px 0 -1px -5%;height:43px;align-items:center;gap:24px;padding:0 15px;background:#cfaf67;color:#111820;transform:rotate(-3deg);box-shadow:0 5px 9px #0004;white-space:nowrap;overflow:hidden;}
.assurance-card:nth-child(even) .brand-tape{transform:rotate(3deg);}
.brand-tape span{display:flex;align-items:center;gap:9px;font:700 13px 'Roboto Condensed',sans-serif;letter-spacing:.07em;flex-shrink:0;}
.brand-tape img{width:24px;height:24px;object-fit:contain;filter:brightness(0);}
.assurance-copy{padding:30px 26px 32px;}
.assurance-copy h3{font:500 clamp(27px,2.5vw,34px)/1.2 'Oswald',sans-serif;color:#fff;margin:0 0 16px;}
.assurance-copy p{color:#c7cdd3;font-size:15px;line-height:1.65;margin:0;}
.assurance-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:32px;}
.assurance-footer p{color:#c7cdd3;margin:0;}
@media(max-width:899px){.assurance{padding:64px 0;}.assurance-heading{grid-template-columns:1fr;gap:20px;}.assurance-heading>p{max-width:600px;}.assurance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}.assurance-card,.assurance-card:nth-child(n+4){grid-column:span 1;}.assurance-card:last-child{grid-column:span 2;}.assurance-scene{height:280px;}}
@media(max-width:599px){.assurance{padding:48px 0;}.assurance-grid{grid-template-columns:1fr;gap:28px;}.assurance-card:last-child{grid-column:span 1;}.assurance-heading h2{font-size:36px;}.assurance-scene{height:300px;}.assurance-copy{padding:30px 24px;}.assurance-footer{flex-direction:column;align-items:stretch;}.assurance-footer .btn{width:100%;}}
.assurance-scene{height:420px;}.assurance-card:nth-child(4){grid-column:2 / span 2;}.assurance-card:nth-child(5){grid-column:4 / span 2;}@media(max-width:899px){.assurance-card:nth-child(4),.assurance-card:nth-child(5){grid-column:span 1;}.assurance-scene{height:390px;}}@media(max-width:599px){.assurance-scene{height:380px;}}

/* Fleet editorial: inspection, papers, service, people and monitoring */
.fleet-story{background:#f4f5f4;padding:88px 0;scroll-margin-top:90px;}
.fleet-heading{margin-bottom:40px;max-width:850px;}.fleet-heading h2{font-size:clamp(36px,3.8vw,54px);line-height:1.15;color:#171c26;margin:0 0 20px;}.fleet-heading>p:last-child{color:#58616d;line-height:1.6;}
.fleet-editorial{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.fleet-editorial article{overflow:hidden;border-radius:12px;background:#fff;border:1px solid #dde3e6;}
.fleet-main{grid-row:span 2;}.fleet-photo{height:310px;position:relative;background-image:url('./assets/brand/fleet-people-atlas.png');background-repeat:no-repeat;background-size:400% auto;background-position:0% 35%;}
.fleet-main .fleet-photo{height:650px;}.fleet-photo--papers{height:230px;background-position:33.333% 50%;}.fleet-photo--service{height:280px;background-position:66.666% 20%;}.fleet-photo--team{height:360px;background-position:100% 25%;}
.fleet-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0006,transparent 45%);}
.fleet-stamp{position:absolute;z-index:1;left:24px;top:22px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.025em;}
.fleet-copy{padding:28px 30px;}.fleet-copy h3{font:500 clamp(28px,2.5vw,36px)/1.2 'Oswald',sans-serif;color:#171c26;margin:0 0 16px;}.fleet-copy p{color:#53606e;font-size:15px;line-height:1.7;margin:0;}.fleet-caption{display:block;margin-top:18px;color:#74808c;font-size:11px;line-height:1.5;}
.fleet-main .fleet-copy{padding:36px;}.fleet-main .fleet-copy h3{font-size:40px;}
.fleet-monitor{background:#19212a!important;color:white;}.monitor-head{height:70px;position:relative;}.monitor-demo{position:absolute;right:24px;top:23px;font-size:11px;color:#aab8c5;}.fleet-map{position:relative;overflow:hidden;background:#19212a;}.fleet-map svg{width:100%;height:290px;display:block;}.map-point{position:absolute;color:#e2e9ef;font-size:11px;background:#19212acc;padding:5px 8px;border-radius:4px;}.map-point--start{left:9%;top:72%;}.map-point--end{right:8%;top:21%;}.fleet-monitor .fleet-copy h3{color:#fff;}.fleet-monitor .fleet-copy p{color:#bac7d3;}.fleet-monitor .fleet-caption{color:#8fa5b7;}
@media(max-width:899px){.fleet-story{padding:64px 0;}.fleet-main .fleet-photo{height:520px;}.fleet-copy{padding:24px;}.fleet-main .fleet-copy{padding:24px;}.fleet-main .fleet-copy h3{font-size:34px;}.monitor-demo{display:none;}}
@media(max-width:599px){.fleet-story{padding:48px 0;}.fleet-editorial{grid-template-columns:1fr;gap:24px;}.fleet-main{grid-row:auto;}.fleet-main .fleet-photo{height:490px;}.fleet-photo--papers{height:250px;}.fleet-photo--service,.fleet-photo--team{height:360px;}.fleet-heading h2{font-size:36px;}}
.fleet-photo--inspection{background-size:346.5% auto;}.fleet-photo--papers{background-size:474.3% auto;background-position:36.57% 50%;}.fleet-photo--service{background-size:474.3% auto;background-position:63.3% 20%;}.fleet-photo--team{background-size:346.5% auto;background-position:100% 25%;}

/* Approved lockup: original G + Oswald. Orange action palette. */
.brand-v01{display:flex;align-items:center;gap:12px;color:#111;width:178px;flex-shrink:0;}
.brand-v01-mark{display:block;width:70px;height:70px;flex-shrink:0;background:currentColor;mask:url('./assets/brand/logo-icon-tight.png') center/contain no-repeat;-webkit-mask:url('./assets/brand/logo-icon-tight.png') center/contain no-repeat;}
.brand-v01-words{display:grid;grid-template-rows:repeat(3,1fr);height:70px;align-items:center;}
.brand-v01-words>span{font:600 20px/1 'Oswald',sans-serif;letter-spacing:.01em;}
.brand-v01-words>span:first-child{font-weight:700;}
.footer .brand-v01{color:#cfaf67;width:220px;gap:16px;}.footer .brand-v01-mark{width:88px;height:88px;}.footer .brand-v01-words{height:88px;}.footer .brand-v01-words>span{font-size:25px;}
.btn.btn-primary{background:#cfaf67;color:#17181a;}.btn.btn-primary:hover{background:#e3c78b;color:#17181a;}.btn.btn-primary:active{background:#b9944e;}
.industry-jobs .mark,.services-jobs .mark,.fleet-story .mark{color:#cfaf67;}
@media(max-width:699px){.header .brand-v01{width:150px;gap:10px;}.header .brand-v01-mark{width:60px;height:60px;}.header .brand-v01-words{height:60px;}.header .brand-v01-words>span{font-size:17px;}}
/* Active navigation: orange type and a quiet route line. */
.header .nav a{position:relative;transition:color .18s ease;}
.header .nav a::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;background:#cfaf67;transform:scaleX(0);transform-origin:left;transition:transform .18s ease;}
.header .nav a:hover,.header .nav a:focus-visible,.header .nav a[aria-current='location']{color:#cfaf67;}
.header .nav a:hover::after,.header .nav a:focus-visible::after,.header .nav a[aria-current='location']::after{transform:scaleX(1);}
.header .nav a:focus-visible{outline:2px solid #cfaf67;outline-offset:10px;border-radius:2px;}
.mobile-nav a[data-mobile-link]:hover,.mobile-nav a[data-mobile-link]:focus-visible,.mobile-nav a[aria-current='location']{color:#e3c78b;background:rgba(207,175,103,.10);box-shadow:inset 3px 0 #cfaf67;padding-left:16px;}
@media(prefers-reduced-motion:reduce){.header .nav a,.header .nav a::after{transition:none;}}

/* Plum palette: readable accents on light and graphite surfaces. */
.btn.btn-primary,.btn.btn-primary:hover,.btn.btn-primary:active{color:#fff;}
.road-detail .mark,.road-detail .eyebrow,.road-detail-number,.cargo-road .road-badge,
.assurance .mark,.assurance .eyebrow,.form-section--live .mark,.form-section--live .eyebrow{color:#cfaf67;}
.road-detail-connector::after{background:#cfaf67;}
.job-index,.service-number{color:#f3e5c3;text-shadow:0 1px 6px #0008;}
.brand-tape{background:#cfaf67;color:#fff;}
.brand-tape img{filter:brightness(0) invert(1);}
.mobile-nav a[data-mobile-link]:hover,.mobile-nav a[data-mobile-link]:focus-visible,.mobile-nav a[aria-current='location']{color:#cfaf67;box-shadow:inset 3px 0 #cfaf67;}
/* Black and gold: metal highlights, object-led photography. */
.header{background:#171819;border-color:#33312b;}
.header .nav a,.header-phone,.header-phone span,.menu-toggle{color:#eee9dd;}
.header .brand-v01,.footer .brand-v01{color:#cfaf67;}
.brand-v01-mark{position:relative;background:linear-gradient(135deg,#8d6b30 0%,#caa55c 22%,#f6e6b2 38%,#c4a05b 48%,#e2c47c 70%,#947039 100%);filter:drop-shadow(0 0 5px #cfaf6730);}
.brand-v01-mark:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#fff4d880 42%,transparent 55%);background-size:240% 100%;background-position:100% 0;transition:background-position .8s ease;}
.brand:hover .brand-v01-mark:after,.brand:focus-visible .brand-v01-mark:after{background-position:0 0;}
.btn.btn-primary,.btn.btn-primary:hover,.btn.btn-primary:active{color:#171819;}
.header .nav a:hover,.header .nav a:focus-visible,.header .nav a[aria-current='location']{color:#e3c78b;}
.cargo-hero{background:#111214;color:#f3ebd4;}
.cargo-hero::after{background:linear-gradient(90deg,#111214 0%,#111214 25%,#111214ed 35%,#11121480 50%,transparent 70%);}
.cargo-hero h1{color:#f5f0e5;}.cargo-hero .eyebrow,.cargo-details span{color:#cfaf67;}
.cargo-lede,.cargo-details p{color:#c3bdaf;}.cargo-actions a,.cargo-details h2{color:#eee9dd;}
.industry-jobs .mark,.services-jobs .mark,.fleet-story .mark,.job-plan>span,.service-action>span,.service-link span,.service-link:hover{color:#84652e;}
.industry-jobs .eyebrow,.services-jobs .eyebrow,.fleet-story .eyebrow{color:#84652e;}
.brand-tape{background:#cfaf67;color:#171819;}.brand-tape img{filter:brightness(0);}
.service-outcome{color:#675125;background:#f5efdf;}
.assurance-scene,.fleet-photo,.service-visual,.request-fleet{background-image:url('./assets/brand/logistics-gold-nopeople-atlas.png');background-size:400% 200%;background-repeat:no-repeat;aspect-ratio:1;height:auto!important;}
.assurance-card--truck .assurance-scene,.service-story--1 .service-visual{background-position:0% 0%;}
.assurance-card--driver .assurance-scene{background-position:33.333% 0%;}
.assurance-card--docs .assurance-scene,.fleet-photo--papers{background-position:66.666% 0%;}
.assurance-card--tracking .assurance-scene,.service-story--2 .service-visual{background-position:100% 0%;}
.assurance-card--insurance .assurance-scene,.service-story--3 .service-visual{background-position:0% 100%;}
.fleet-photo--inspection,.fleet-photo--team,.request-fleet{background-position:33.333% 100%;}
.fleet-photo--service{background-position:66.666% 100%;}
.service-story--4 .service-visual{background-position:100% 100%;}
.fleet-main{grid-row:auto;}.fleet-main .fleet-copy h3{font-size:34px;}
.route-request{align-self:center;border:1px solid #35312a;border-radius:14px;overflow:hidden;padding:0 30px 34px;background:#141618;}
.request-fleet{margin:0 -30px 30px;}.route-request h3{font:500 clamp(32px,3vw,44px)/1.2 Oswald,sans-serif;margin:0 0 26px;color:#f5f0e5;}
.request-route{display:flex;align-items:center;gap:18px;color:#cfaf67;margin-bottom:26px;font:500 20px Oswald,sans-serif;}
.request-route i{height:1px;flex:1;background:#cfaf67;position:relative;}.request-route i:after{content:'→';position:absolute;right:0;top:-16px;}
.route-request .form-person-role{margin-bottom:18px;}
@media(max-width:699px){.cargo-hero::after{background:linear-gradient(180deg,#111214 0%,#111214f5 70%,#11121480 100%);}.route-request{padding:0 24px 28px;}.request-fleet{margin-inline:-24px;}}
@media(prefers-reduced-motion:reduce){.brand-v01-mark:after{transition:none;}}

.cargo-details>div::before{background-size:220%;background-position:85% 55%;}.cargo-details>div:nth-child(2)::before{background-size:380%;background-position:80% 55%;}.cargo-details>div:nth-child(3)::before{background-image:url('./assets/brand/logistics-gold-nopeople-atlas.png');background-size:400% 200%;background-position:0 0;height:auto;aspect-ratio:1;}.cargo-details>div::before{height:auto;aspect-ratio:1;}