/* ============================================================
   STEMP — design tokens
   Forest-green header, sage/mint body, blue accent actions.
   Same palette as the original build; layout, spacing, and
   type have been redrawn for clarity.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --forest-900: #0e1f14;
  --forest-700: #1c3b26;
  --forest-600: #2a4f34;
  --mint-50: #eef7ec;
  --mint-100: #dcefdb;
  --mint-200: #bfe0c1;
  --coast: #4a7a56;   /* map coastline — 4.99:1 on white, 3.48:1 on the mint fill */
  --ink: #1b2620;
  --ink-soft: #4f5f53;
  --blue: #1f78c9;
  --blue-deep: #145a99;
  --card-dark: #11221a;
  --white: #ffffff;
  --line: rgba(27, 38, 32, 0.14);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 12px 32px rgba(14, 31, 20, 0.14);

  --font-display: 'Anton', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--mint-50);
  background-image:
    linear-gradient(135deg, var(--mint-100) 0%, var(--mint-50) 45%, var(--mint-100) 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.55) 42%, rgba(255,255,255,0.55) 47%, transparent 51%),
    linear-gradient(115deg, transparent 60%, rgba(191,224,193,0.6) 64%, transparent 70%);
  background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--ink);
  line-height: 1.05;
}

p { line-height: 1.6; margin: 0; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------------- Header / Nav ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 14px 24px;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 64px),
    linear-gradient(100deg, var(--forest-900) 0%, var(--forest-700) 55%, var(--forest-600) 100%);
}
.site-header .header-row {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo-badge {
  width: 64px;
  height: 44px;
  border-radius: 999px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.logo-badge svg,
.logo-badge .logo-img { width: 34px; height: 34px; object-fit: contain; }

nav.main-nav {
  display: flex;
  align-items: center;
  background: var(--mint-100);
  border-radius: 999px;
  padding: 6px;
  gap: 2px;
  position: relative;
}
nav.main-nav > a {
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--forest-900);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
nav.main-nav > a:hover { background: rgba(255,255,255,0.6); }
nav.main-nav > a.active { color: #2f8f4e; }

.nav-dropdown { position: relative; }
.nav-dropdown > button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--forest-900);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.nav-dropdown > button:hover,
.nav-dropdown.open > button { background: rgba(255,255,255,0.6); }
.nav-dropdown svg.chev { width: 14px; height: 14px; transition: transform 0.18s ease; }
.nav-dropdown.open svg.chev { transform: rotate(180deg); }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav-dropdown.open .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-panel a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--forest-900);
}
.dropdown-panel a:hover { background: var(--mint-100); }
.dropdown-panel a.active { color: #2f8f4e; }

.nav-toggle {
  display: none;
  background: var(--mint-100);
  border: none;
  border-radius: 999px;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  nav.main-nav {
    position: fixed;
    top: 76px;
    right: 24px;
    left: 24px;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 10px;
    display: none;
  }
  nav.main-nav.open { display: flex; }
  nav.main-nav > a, .nav-dropdown > button { text-align: left; justify-content: space-between; width: 100%; }
  .dropdown-panel { position: static; box-shadow: none; transform: none; opacity: 1; visibility: visible; height: 0; overflow: hidden; padding: 0; }
  .nav-dropdown.open .dropdown-panel { height: auto; padding: 4px 0 4px 12px; }
  .nav-toggle { display: flex; }
}

/* ---------------- Quick contact + back to top ---------------- */
.quick-contact {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 90;
}
.quick-contact a {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(20, 90, 153, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.quick-contact a:hover { background: var(--blue-deep); transform: translateX(-2px); }
.quick-contact svg { width: 20px; height: 20px; }

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(20, 90, 153, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.15s ease;
  z-index: 90;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top svg { width: 18px; height: 18px; }

@media (max-width: 700px) {
  .quick-contact { right: 12px; }
  .back-to-top { right: 12px; bottom: 16px; }
}

/* ---------------- Page hero (photo pages) ---------------- */
.page-hero {
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 32px;
}
.page-hero .hero-panel {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  padding: 40px;
  box-shadow: var(--shadow);
}
.page-hero .hero-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,20,14,0.55) 0%, rgba(10,20,14,0.05) 55%);
  z-index: 1;
}
.page-hero h1 {
  position: relative;
  z-index: 2;
  color: var(--white);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-style: italic;
}
.page-hero .hero-sub {
  position: relative;
  z-index: 2;
  color: var(--white);
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: 10px;
}
.page-hero svg.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.page-hero img.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Hero variant: title at the top instead of the bottom */
.page-hero .hero-panel.hero-top { align-items: flex-start; }
.page-hero .hero-panel.hero-top::after {
  background: linear-gradient(180deg, rgba(10,20,14,0.55) 0%, rgba(10,20,14,0.05) 55%);
}

/* Flat graphics (like the depot map) shouldn't be cropped or dark-boxed */
.photo-panel.map-panel { background: var(--white); padding: 20px; }
.photo-panel.map-panel img { object-fit: contain; aspect-ratio: auto; }

/* Circular photo (Special Services visibility section) */
.photo-panel.round-photo {
  border-radius: 999px;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 1;
}
.photo-panel.round-photo img { aspect-ratio: 1; }

/* Dark panel with a photo behind it (Road Freight GDP distribution) */
.dark-panel.has-bg { position: relative; overflow: hidden; }
.dark-panel.has-bg .panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  z-index: 0;
}
.dark-panel.has-bg .panel-content { position: relative; z-index: 1; }

/* Full-bleed photo behind a section (Special Services customs brokerage) */
.customs-section { position: relative; overflow: hidden; }
.customs-section .section-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.customs-section > .container { position: relative; z-index: 1; }
.customs-copy {
  background: rgba(222, 240, 220, 0.94);
  backdrop-filter: blur(2px);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
}


.home-hero .logo-badge-lg {
  width: 150px;
  height: 100px;
  margin: 0 auto 44px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-hero .logo-badge-lg svg,
.home-hero .logo-badge-lg .logo-img { width: 78px; height: 78px; object-fit: contain; }
.acrostic-stage {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

/* Phase 1: big centered word popping in letter by letter */
.big-word {
  display: flex;
  justify-content: center;
  gap: 0.12em;
  transition: opacity 0.5s ease, max-height 0.5s ease, margin 0.5s ease, transform 0.5s ease;
  max-height: 200px;
  overflow: hidden;
}
.big-word .L {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  color: var(--forest-700);
  opacity: 0;
  display: inline-block;
  transform: translateY(30px) scale(0.4);
  animation: popLetter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.big-word .L:nth-child(1) { animation-delay: 0.05s; }
.big-word .L:nth-child(2) { animation-delay: 0.15s; }
.big-word .L:nth-child(3) { animation-delay: 0.25s; }
.big-word .L:nth-child(4) { animation-delay: 0.35s; }
.big-word .L:nth-child(5) { animation-delay: 0.45s; }

@keyframes popLetter {
  0% { opacity: 0; transform: translateY(30px) scale(0.4); }
  60% { opacity: 1; transform: translateY(-6px) scale(1.15); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Phase 2: big word collapses away */
.acrostic-stage.collapsed .big-word {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  transform: translateY(-16px) scale(0.9);
}

/* Phase 3: vertical lines cascade in */
.acrostic-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acrostic-lines .line {
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  opacity: 0;
  transform: translateX(-18px);
}
.acrostic-stage.collapsed .acrostic-lines .line {
  animation: lineIn 0.55s ease forwards;
}
.acrostic-stage.collapsed .acrostic-lines .line:nth-child(1) { animation-delay: 0.05s; }
.acrostic-stage.collapsed .acrostic-lines .line:nth-child(2) { animation-delay: 0.18s; }
.acrostic-stage.collapsed .acrostic-lines .line:nth-child(3) { animation-delay: 0.31s; }
.acrostic-stage.collapsed .acrostic-lines .line:nth-child(4) { animation-delay: 0.44s; }
.acrostic-stage.collapsed .acrostic-lines .line:nth-child(5) { animation-delay: 0.57s; }

@keyframes lineIn {
  0% { opacity: 0; transform: translateX(-18px); }
  100% { opacity: 1; transform: translateX(0); }
}

.acrostic-lines .line .lead {
  font-family: var(--font-display);
  color: var(--forest-700);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
}
.acrostic-lines .line .rest {
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .big-word { display: none; }
  .acrostic-lines .line { opacity: 1; transform: none; animation: none !important; }
}

/* ---------------- Section shell ---------------- */
.section { padding: 64px 0; }
.section-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 12px; }
.section-head .rule { width: 70px; height: 3px; background: var(--forest-600); margin: 14px auto 0; border-radius: 2px; }
.section-head p { color: var(--ink-soft); font-size: 1.02rem; }

/* ---------------- Checklists ---------------- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.check-list.two-col { grid-template-columns: 1fr 1fr; gap: 28px 48px; }
.check-item { display: flex; gap: 14px; align-items: flex-start; }
.check-item .hex {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--forest-700);
}
.check-item h3 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.check-item p { color: var(--ink-soft); font-size: 0.95rem; }

ul.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
ul.tick-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--ink); }
ul.tick-list li svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; color: var(--forest-700); }

ul.dot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.dot-list li { position: relative; padding-left: 20px; color: var(--ink); font-weight: 500; }
ul.dot-list li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--forest-700);
}

/* ---------------- Offering cards ---------------- */
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.offer-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.offer-card .art { height: 150px; overflow: hidden; background: var(--mint-100); }
.offer-card .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-card .art svg { width: 62px; height: 62px; margin: 44px auto; }
.offer-card .body { padding: 18px 18px 22px; }
.offer-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.offer-card h3 svg { width: 18px; height: 18px; color: var(--forest-700); flex-shrink: 0; }
@media (max-width: 980px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .offer-grid { grid-template-columns: 1fr; } .check-list.two-col { grid-template-columns: 1fr; } }

/* ---------------- Split layout (image + text) ---------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split.align-top { align-items: start; }
/* Swap column order without the direction:rtl hack (which broke text flow) */
.split.reverse > *:first-child { order: 2; }
.split.reverse > *:last-child { order: 1; }

.split .art-panel { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; display: flex; align-items: center; justify-content: center; }
.split .art-panel svg { width: 100%; height: auto; max-height: 320px; }

/* Photo panels — real photography, no inner padding */
.photo-panel {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.photo-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-panel.tall img { aspect-ratio: 4 / 3; }
.photo-panel.square img { aspect-ratio: 1 / 1; }

.photo-stack { display: grid; gap: 20px; }
.photo-stack .photo-panel img { aspect-ratio: 4 / 3; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  /* On mobile, always show the image after the text regardless of desktop order */
  .split.reverse > *:first-child,
  .split.reverse > *:last-child { order: 0; }
}

/* ---------------- Dark panel (GDP distribution card etc) ---------------- */
.dark-panel {
  background: var(--card-dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 44px;
  box-shadow: var(--shadow);
}
.dark-panel h2 { color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 22px; }
.dark-panel .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 22px; }
.dark-panel p { color: rgba(255,255,255,0.85); }
.dark-panel ul.dot-list li { color: rgba(255,255,255,0.92); }
.dark-panel ul.dot-list li::before { background: #6fd68a; }
@media (max-width: 780px) { .dark-panel .grid-2 { grid-template-columns: 1fr; } }

/* ---------------- Network / map cards ---------------- */
.network-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.network-row { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: stretch; }
.network-row .place {
  background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; font-size: 1.02rem; padding: 18px; text-transform: uppercase;
}
.network-row .details {
  background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 18px 22px;
}
.network-row .details ul.dot-list { font-size: 0.92rem; }
@media (max-width: 700px) { .network-row { grid-template-columns: 1fr; } }

/* ---------------- QA heading block ---------------- */
.qa-heading h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 18px; }
.qa-heading p { color: var(--ink-soft); max-width: 42ch; }

/* ---------------- Transport solutions: photo | panel | photo ---------------- */
.transport-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.transport-layout .photo-stack .photo-panel,
.transport-layout .photo-stack .photo-panel img { height: 100%; }
.transport-layout .photo-stack .photo-panel img { aspect-ratio: auto; min-height: 380px; }
@media (max-width: 980px) {
  .transport-layout { grid-template-columns: 1fr; }
  .transport-layout .photo-stack .photo-panel img { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ---------------- Service cards (transport solutions) ---------------- */
.transport-panel {
  background: var(--card-dark);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
  color: var(--white);
}
.transport-panel h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 20px; }
.transport-panel .pill-btn {
  display: block; width: 100%; text-align: center;
  padding: 13px; margin-bottom: 12px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 999px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--white);
}
.transport-panel ul.dot-list { margin-top: 20px; }
.transport-panel ul.dot-list li { color: rgba(255,255,255,0.88); }
.transport-panel ul.dot-list li::before { background: #6fd68a; }

/* ---------------- Forms ---------------- */
.form-shell { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px; max-width: 640px; margin: 0 auto; }
.form-row { margin-bottom: 20px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-row.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.field-hint { font-size: 0.88rem; color: var(--ink-soft); margin: -4px 0 16px; }

.pallet-row {
  display: flex; gap: 10px; align-items: center;
  background: var(--mint-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
}
.pallet-row .form-row.four { flex: 1; margin-bottom: 0; }
.pallet-row .field input { background: var(--white); }

/* Solid fill, not a border on a near-transparent background — a 1px line
   at 14% opacity (var(--line)) all but disappears against the mint-tinted
   row, and a small SVG glyph inside it reads as noise. A flat red circle
   with a bold × is unmistakable at a glance, at any size. */
.pallet-remove-btn {
  flex: 0 0 30px;
  box-sizing: border-box;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: none;
  background: #fdeceb;
  color: #c4451c;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.pallet-remove-btn:hover { background: #c4451c; color: var(--white); }

#add-pallet-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border: 1.5px dashed var(--coast);
  border-radius: 999px;
  background: transparent;
  color: var(--forest-700);
  font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
#add-pallet-btn:hover { background: var(--mint-100); border-color: var(--forest-600); border-style: solid; }

@media (max-width: 640px) {
  .form-row.four { grid-template-columns: 1fr 1fr; }
  .pallet-row { flex-direction: column; align-items: stretch; }
  .pallet-remove-btn { align-self: flex-end; }
}
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 7px; color: var(--ink); }
.field label .req { color: var(--blue); }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; font-family: var(--font-body); font-size: 0.95rem; background: var(--mint-50);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; background: var(--white); }
.field textarea { min-height: 120px; resize: vertical; }
.checkbox-row { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.checkbox-row label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.95rem; }
.checkbox-row input { width: 17px; height: 17px; }

.submit-btn {
  width: 100%;
  padding: 15px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.submit-btn:hover { background: var(--blue-deep); }
.submit-btn:disabled { opacity: 0.6; cursor: default; }

.form-status { margin-top: 18px; padding: 13px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: #e5f6e9; border: 1px solid #2f8f4e; color: #1f6636; }
.form-status.err { background: #fdeceb; border: 1px solid #c4451c; color: #9c3616; }

@media (max-width: 640px) { .form-row.two { grid-template-columns: 1fr; } .form-shell { padding: 26px; } }

/* ---------------- Contact info strip ---------------- */
.contact-strip { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin-bottom: 36px; }
.contact-strip .item { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.contact-strip svg { width: 20px; height: 20px; color: var(--forest-700); }
.map-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: none; width: 100%; height: 440px; }



footer.site-footer { background: var(--mint-100); border-top: 1px solid var(--line); margin-top: 60px; }

/* ---------------- 404 ---------------- */
.hold-notice { max-width: 560px; margin: 100px auto; text-align: center; padding: 44px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.hold-notice h1 { font-size: 2rem; margin-bottom: 14px; }
.hold-notice p { color: var(--ink-soft); margin-bottom: 24px; }
.hold-notice .btn { display: inline-block; padding: 13px 26px; background: var(--blue); color: var(--white); border-radius: 999px; font-weight: 700; }

/* ============================================================
   CONVERSION COMPONENTS
   Buttons, trust bar, CTAs, the quote page, and the
   redesigned homepage hero.
   ============================================================ */

/* ---------------- Buttons ---------------- */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.14s ease, background 0.16s ease, box-shadow 0.16s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(20, 90, 153, 0.32);
}
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 90, 153, 0.4); }
.btn-primary.full { width: 100%; }
.btn-secondary {
  background: transparent;
  color: var(--forest-900);
  border-color: var(--forest-700);
}
.btn-secondary:hover { background: var(--forest-700); color: var(--white); transform: translateY(-2px); }
.btn-primary svg, .btn-secondary svg { width: 18px; height: 18px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--blue-deep);
  margin-top: 22px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, gap 0.15s ease;
}
.text-link:hover { border-color: var(--blue-deep); gap: 11px; }
.text-link svg { width: 17px; height: 17px; }

/* Header CTA button */
nav.main-nav > a.nav-cta {
  background: var(--blue);
  color: var(--white);
  margin-left: 6px;
  box-shadow: 0 4px 12px rgba(20, 90, 153, 0.3);
}
nav.main-nav > a.nav-cta:hover { background: var(--blue-deep); }
nav.main-nav > a.nav-cta.active { color: var(--white); }

/* ---------------- Eyebrows ---------------- */
.eyebrow, .eyebrow-center {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: 12px;
}
.eyebrow-center { display: block; }

/* ---------------- Homepage hero ---------------- */
.home-hero { padding: 74px 0 56px; text-align: left; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-700);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--mint-200);
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-copy h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  margin-bottom: 22px;
}
.hero-lede {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-meta { display: flex; gap: 22px; flex-wrap: wrap; }
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.hero-meta svg { width: 15px; height: 15px; color: var(--forest-600); flex-shrink: 0; }

.hero-brand { display: flex; flex-direction: column; align-items: center; }
.hero-brand .logo-badge-lg { margin-bottom: 32px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-brand { order: -1; }
  .acrostic-stage { text-align: center; }
  .acrostic-lines .line { justify-content: center; }
}

/* ---------------- Trust bar ---------------- */
.trust-bar {
  background: var(--forest-900);
  padding: 26px 0;
}
.trust-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--white);
}
.trust-item svg { width: 26px; height: 26px; color: #7fd49a; flex-shrink: 0; }
.trust-item strong { display: block; font-size: 0.96rem; font-weight: 700; }
.trust-item span { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.65); }
@media (max-width: 900px) { .trust-bar .container { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (max-width: 520px) { .trust-bar .container { grid-template-columns: 1fr; } }

/* ---------------- Problem framing ---------------- */
.problem-section { background: rgba(255,255,255,0.45); }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 40px;
}
.problem-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--signal, #c4451c);
}
.problem-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: #c4451c;
  margin-bottom: 10px;
}
.problem-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; text-transform: none; margin-bottom: 9px; }
.problem-card p { color: var(--ink-soft); font-size: 0.95rem; }
.problem-answer {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--forest-700);
  padding: 24px 28px;
  background: var(--mint-100);
  border-radius: var(--radius);
  border-left: 4px solid var(--forest-600);
}
@media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; } }

/* ---------------- Closing CTA ---------------- */
.closing-cta {
  background: linear-gradient(115deg, var(--forest-900) 0%, var(--forest-700) 100%);
  padding: 68px 0;
  text-align: center;
  color: var(--white);
}
.closing-cta h2 {
  color: var(--white);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  margin-bottom: 16px;
}
.closing-cta p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: rgba(255,255,255,0.82);
  font-size: 1.04rem;
}
.cta-actions { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.closing-cta .btn-secondary { color: var(--white); border-color: rgba(255,255,255,0.55); }
.closing-cta .btn-secondary:hover { background: var(--white); color: var(--forest-900); }
.cta-reassure { font-size: 0.86rem; color: rgba(255,255,255,0.6); }

/* ---------------- Network rows (upgraded) ---------------- */
.network-row .place { flex-direction: column; gap: 5px; }
.place-name { font-weight: 700; font-size: 1.05rem; }
.place-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-deep);
  background: rgba(31,120,201,0.1);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ---------------- Transport pill buttons (with arrow) ---------------- */
.transport-panel .pill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, gap 0.15s ease;
}
.transport-panel .pill-btn:hover { background: rgba(255,255,255,0.12); gap: 13px; }
.transport-panel .pill-btn svg { width: 16px; height: 16px; }

/* ---------------- Quote page ---------------- */
.quote-hero { padding-bottom: 30px; }
.quote-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 36px;
  align-items: start;
}
.quote-layout .form-shell { max-width: none; margin: 0; }

fieldset { border: none; padding: 0; margin: 0 0 28px; }
fieldset legend {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--forest-700);
  padding: 0 0 14px;
  margin-bottom: 4px;
  width: 100%;
  border-bottom: 1px solid var(--line);
}

.radio-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.radio-card { position: relative; cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card span {
  display: block;
  text-align: center;
  padding: 13px 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--mint-50);
  font-weight: 700;
  font-size: 0.9rem;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.radio-card small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--ink-soft); margin-top: 3px; }
.radio-card:hover span { border-color: var(--blue); }
.radio-card input:checked + span {
  border-color: var(--blue);
  background: rgba(31,120,201,0.09);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.radio-card input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 640px) { .radio-cards { grid-template-columns: 1fr 1fr; } }

.form-footnote { font-size: 0.83rem; color: var(--ink-soft); margin-top: 14px; text-align: center; }
.form-footnote a { color: var(--blue-deep); text-decoration: underline; font-weight: 600; }

.quote-aside { display: grid; gap: 18px; position: sticky; top: 100px; }
.aside-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.aside-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; text-transform: none; margin-bottom: 16px; }
.aside-card.highlight { background: var(--mint-100); border: 1px solid var(--mint-200); }
.aside-card.highlight p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 16px; }
.aside-card.quiet { background: transparent; box-shadow: none; border: 1px dashed var(--line); }

.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.step-list li { display: flex; gap: 13px; align-items: flex-start; }
.step-list li > span {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--forest-700);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
}
.step-list strong { display: block; font-size: 0.94rem; margin-bottom: 2px; }
.step-list p { font-size: 0.86rem; color: var(--ink-soft); }

.mini-trust { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.87rem; font-weight: 600; color: var(--ink-soft); }
.mini-trust:last-child { margin-bottom: 0; }
.mini-trust svg { width: 18px; height: 18px; color: var(--forest-600); flex-shrink: 0; }

@media (max-width: 900px) {
  .quote-layout { grid-template-columns: 1fr; }
  .quote-aside { position: static; }
}

/* ---------------- Contact routes ---------------- */
.contact-routes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.route-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease;
  display: block;
}
.route-card:hover { transform: translateY(-3px); border-color: var(--blue); }
.route-card.urgent { background: var(--mint-100); }
.route-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--mint-100);
  color: var(--forest-700);
  margin-bottom: 16px;
}
.route-card.urgent .route-icon { background: var(--white); }
.route-icon svg { width: 21px; height: 21px; }
.route-card strong { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.route-card p { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 16px; }
.route-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--blue-deep);
}
.route-go svg { width: 15px; height: 15px; }
@media (max-width: 800px) { .contact-routes { grid-template-columns: 1fr; } }

/* ---------------- Footer (rebuilt) ---------------- */
footer.site-footer { padding: 56px 0 28px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.footer-brand .logo-badge { margin-bottom: 16px; box-shadow: none; border: 1px solid var(--line); }
.footer-tagline { font-size: 0.9rem; color: var(--ink-soft); max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--forest-700);
  margin-bottom: 14px;
}
.footer-col a { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 9px; transition: color 0.14s ease; }
.footer-col a:hover { color: var(--blue-deep); }
.footer-col .row { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; font-size: 0.9rem; color: var(--ink-soft); }
.footer-col .row a { margin-bottom: 0; }
.footer-col .row svg { width: 16px; height: 16px; color: var(--forest-600); flex-shrink: 0; margin-top: 2px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.footer-creds { font-weight: 600; }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; align-items: center; }
}

/* ---------------- Air freight: passive vs active comparison ---------------- */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 40px;
}
.compare-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 30px;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--forest-600);
  display: flex;
  flex-direction: column;
}
.compare-card:last-child { border-top-color: var(--blue); }
.compare-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-700);
  background: var(--mint-100);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.compare-tag.alt { color: var(--blue-deep); background: rgba(31,120,201,0.1); }
.compare-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: none;
  margin-bottom: 10px;
}
.compare-lede { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 20px; }
.compare-card .tick-list { margin-bottom: 22px; }
.compare-card .tick-list li { font-weight: 500; font-size: 0.94rem; }
.compare-caveat {
  margin-top: auto;
  background: var(--mint-50);
  border-left: 3px solid #c4451c;
  padding: 14px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.compare-caveat strong { color: var(--ink); }
@media (max-width: 860px) { .compare-grid { grid-template-columns: 1fr; } }

/* ---------------- Mode selection cards ---------------- */
.problem-card.mode-card { border-top-color: var(--forest-600); }
.mode-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--mint-100);
  color: var(--forest-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.mode-icon svg { width: 22px; height: 22px; }
.mode-footnote {
  max-width: 660px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.65;
}
.mode-footnote a { color: var(--blue-deep); font-weight: 600; border-bottom: 1px solid currentColor; }

/* ---------------- Air freight: apron callout ---------------- */
.apron-callout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 36px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  margin-bottom: 40px;
}
.apron-callout .photo-panel { box-shadow: none; }
.apron-callout .photo-panel img { aspect-ratio: 4 / 3; }
.apron-copy h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: none;
  margin-bottom: 12px;
  color: #9c3616;
}
.apron-copy p { color: var(--ink-soft); margin-bottom: 12px; }
.apron-copy p:last-child { margin-bottom: 0; }
.apron-copy strong { color: var(--ink); }
@media (max-width: 800px) {
  .apron-callout { grid-template-columns: 1fr; padding: 20px; }
}

/* ---------------- UK distribution network map ---------------- */
.map-panel {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub-map { width: 100%; height: auto; max-width: 420px; }

.hub-map .landmass {
  /* Real UK county geography (simplemaps.com), all 232 paths merged into one
     silhouette via fill-rule:nonzero. The coastline is what makes the shape
     readable — a pale fill alone measured ~1.2:1 against white, effectively
     invisible. Fill gives it weight; the stroke gives it definition. */
  fill: var(--mint-200);
  stroke: var(--coast);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke; /* coastline stays crisp at any size */
}

.hub-map .spoke {
  stroke: var(--blue);
  stroke-width: 4;
  opacity: 0.75;
  stroke-linecap: round;
  marker-end: url(#arrow);
}
.hub-map .arrowhead { fill: var(--blue); }

.hub-map .depot circle {
  fill: var(--white);
  stroke: var(--forest-700);
  stroke-width: 3;
}
.hub-map .depot text {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 5;          /* halo keeps labels readable over the landmass */
  stroke-linejoin: round;
}

.hub-map .hub-halo { fill: var(--blue); opacity: 0.18; }
.hub-map .hub-dot  { fill: var(--blue); }
.hub-map .hub-tag,
.hub-map .hub-label {
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 5;
  stroke-linejoin: round;
  font-family: var(--font-body);
}
.hub-map .hub-tag {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  fill: var(--blue-deep);
}
.hub-map .hub-label {
  font-size: 22px;
  font-weight: 700;
  fill: var(--ink);
}

@media (max-width: 640px) { .map-panel { padding: 10px; } }

/* ---------------------------------------------------------------
   Spam honeypot field.
   Positioned off-screen rather than display:none — a lot of bots
   specifically skip display:none fields, but happily fill this one.
   Real users never see it or tab into it. Do not "tidy this up".
   --------------------------------------------------------------- */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------
   Legal pages (Privacy Policy, Terms of Website Use).
   Long-form text needs a narrower measure and more breathing room
   than the marketing pages — this is a reading layout, not a sales one.
   --------------------------------------------------------------- */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
}
.legal-page .legal-meta {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 28px;
}
.legal-page h2 {
  font-size: 1.3rem;
  margin-top: 36px;
  margin-bottom: 12px;
}
.legal-page h3 {
  font-size: 1.05rem;
  margin-top: 22px;
  margin-bottom: 8px;
}
.legal-page p {
  margin-bottom: 14px;
  line-height: 1.7;
}
.legal-page ul {
  margin: 0 0 14px;
  padding-left: 22px;
  line-height: 1.7;
}
.legal-page li { margin-bottom: 6px; }
/* In-text links need to be visibly links — the site's default nav-style
   link (no underline, inherits text colour) works for navigation but
   fails WCAG 1.4.1 for links buried inside paragraphs of prose. */
.legal-page a {
  color: var(--blue-deep, #12508f);
  text-decoration: underline;
  font-weight: 600;
}
.legal-page .legal-callout {
  background: var(--mint-100);
  border-left: 3px solid var(--coast, #4a7a56);
  padding: 14px 18px;
  border-radius: 6px;
  margin: 18px 0;
}

/* ---------------------------------------------------------------
   Footer: company registration / trading disclosure block.
   Required under the Companies (Trading Disclosures) Regulations 2015
   for a UK limited company operating a website — see server-side note
   in site-src/partials.js next to where this is used.
   --------------------------------------------------------------- */
.footer-legal {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin-top: 10px;
}
.footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-links a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Click-to-load map consent gate (contact page).
   The embedded Google Maps iframe is third-party content that can set
   cookies before the visitor does anything — loading it only on request,
   rather than automatically with the page, is the more defensible PECR
   position and avoids sending data to Google for visitors who never
   wanted the map in the first place.
   --------------------------------------------------------------- */
.map-consent {
  background: var(--mint-100);
  border-radius: var(--radius, 10px);
  padding: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 320px;
  justify-content: center;
}
.map-consent p {
  max-width: 440px;
  color: var(--ink);
}
.map-consent small {
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------
   Staff dashboard. Internal tool, not a marketing page — plainer,
   denser, no hero imagery. Reuses the site's existing tokens
   (colours, radius, shadow) so it doesn't look like a different product.
   --------------------------------------------------------------- */
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.dash-table-wrap {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.dash-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--mint-100);
  color: var(--forest-900);
  font-weight: 700;
  white-space: nowrap;
}
.dash-table td {
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  vertical-align: top;
}
.dash-muted { color: var(--ink-soft); font-size: 0.85rem; }
.dash-status-select {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--white);
}