/* BTN Logistiek: navy and the green of its own logo; a service index and a quote panel. */
:root {
  --bg: #f3f6f8;
  --ink: #0b1d2e;
  --muted: #415565;
  --line: #d3dde4;
  --accent: #157a40;
  --accent-strong: #0f6033;
  --masthead-bg: #0b1d2e;
  --masthead-ink: #eef3f6;
  --footer-bg: #06111c;
}

.masthead .section-nav a,
.masthead .endorsement {
  color: #eef3f6;
}

.brand-logo {
  width: 7.5rem;
  height: auto;
}

.hero {
  background: #0b1d2e;
  color: #eef3f6;
  padding-top: 3.5rem;
}

.hero .eyebrow {
  color: #6fd29a;
}

.hero h1 {
  margin-top: 1rem;
  max-width: 48rem;
  font-size: clamp(2.3rem, 6.5vw, 4.2rem);
}

.hero .lead {
  margin-top: 1.25rem;
  color: #c3d1db;
}

.hero .actions {
  margin-top: 2rem;
}

.button-outline {
  border-color: #6fd29a;
  color: #ffffff;
}

.button-outline:hover {
  background: rgba(111, 210, 154, 0.12);
}

.hero-band {
  margin-top: 3rem;
  aspect-ratio: 16 / 9;
  border-top: 6px solid #1f9d55;
}

@media (min-width: 48rem) {
  .hero-band {
    aspect-ratio: 3 / 1;
  }
}

.band {
  background: #ffffff;
}

.services {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 64rem) {
  .services {
    grid-template-columns: 4fr 8fr;
    gap: 4rem;
  }
}

.services-intro p {
  color: var(--muted);
}

.service-index {
  display: grid;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

@media (min-width: 40rem) {
  .service-index {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }
}

.service-index li {
  margin: 0;
  padding: 1.25rem 0 1.25rem 1rem;
  border-bottom: 1px solid var(--line);
  border-left: 4px solid #1f9d55;
  scroll-margin-top: 1rem;
}

.service-index h3 {
  font-size: 1.15rem;
}

.service-index p {
  margin-top: 0.35rem;
  color: var(--muted);
}

.band-green {
  background: #e8f4ed;
}

.quote {
  display: grid;
  gap: 2rem;
}

@media (min-width: 64rem) {
  .quote {
    grid-template-columns: 5fr 6fr;
    gap: 4rem;
  }
}

.quote .lead {
  margin-top: 1rem;
}

.quote-card {
  padding: 1.75rem;
  background: #ffffff;
  border-top: 6px solid var(--accent);
  box-shadow: 0 10px 30px rgba(11, 29, 46, 0.08);
}

.quote-card .button {
  margin-top: 0.5rem;
}

.band-navy {
  background: #0b1d2e;
  color: #eef3f6;
}

.contact-columns {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 48rem) {
  .contact-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

.band-navy .contact-columns dt {
  color: #9fb3c2;
}

.band-navy a {
  color: #ffffff;
  font-weight: 600;
  text-decoration-color: #6fd29a;
}