/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 */
/* Hallmark · genre: modern-minimal · macrostructure: Photographic hero + bento services (owner reference mockup, 2026-10-14)
 * enrichment: owner photography (EDSR-upscaled, truck logo corrected) + hand-built SVG route map · nav: N1b · footer: columns + statement
 * theme: custom · paper: oklch(97.5% 0.006 260) · accent: oklch(71% 0.175 51) FAAJ orange on navy oklch(24.5% 0.091 267)
 * type: Figtree (single family) · axes: light / geometric-sans / warm · flat colours only (owner rule, enforced in build.py)
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }  /* in-page links glide */
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-style: normal; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
address { font-style: normal; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
html { scrollbar-color: var(--color-muted) var(--color-paper-2); accent-color: var(--color-accent-text); }
input, textarea, select { caret-color: var(--color-accent-text); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon--lg { width: 2.25rem; height: 2.25rem; stroke-width: 1.5; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--space-md); top: var(--space-xs); z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-band-ink);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.wrap { max-width: calc(var(--page-max) - 2 * var(--page-gutter)); margin-inline: auto; }
.band { background: var(--color-band); color: var(--color-band-ink); }
.band a:not(.btn) { color: var(--color-band-ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-lg);
  border: var(--rule-field) solid transparent; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); line-height: 1.2;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn:active, .head__toggle:active { transform: translateY(1px); }
.btn { gap: var(--space-xs); }
.btn .icon { width: 1.25rem; height: 1.25rem; }
.btn--lg { min-height: 56px; padding-left: var(--space-xl); padding-right: var(--space-xl); }
.btn--navy { background: var(--color-ink); color: var(--color-band-ink); }
.btn--navy:hover { background: var(--color-band-2); }
.btn:disabled { cursor: progress; opacity: 0.65; }
.btn--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--accent:hover { background: var(--color-accent-hover); }
.btn--line { border-color: currentColor; color: inherit; background: transparent; }
.band .btn--line, .foot .btn--line, .hero .btn--line { color: var(--color-band-ink); }
.btn--line:hover { background: var(--color-band-2); }
.btn--plain { background: transparent; color: var(--color-ink); border-color: var(--color-muted); }
.btn--plain:hover { background: var(--color-paper-2); }

/* ---------- header + nav ---------- */
.head {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: box-shadow var(--dur-short) var(--ease-out);
}
.head.is-scrolled { box-shadow: 0 10px 24px -18px var(--color-shadow-card); }
.head__inner {
  max-width: var(--page-max); margin-inline: auto; padding: var(--space-xs) var(--page-gutter);
  display: flex; align-items: center; gap: var(--space-sm);
}
.head__brand { flex: none; margin-inline-end: auto; }
.head__brand img { height: 40px; width: auto; mix-blend-mode: multiply; }
.head__actions { display: flex; align-items: center; gap: var(--space-xs); }
.head__actions .btn { min-height: 40px; padding-inline: var(--space-sm); font-size: var(--text-sm); }
.head__wa { display: none; }
.head__toggle {
  min-height: 40px; padding: 0 var(--space-sm);
  border: var(--rule-field) solid var(--color-muted); border-radius: var(--radius);
  background: transparent; color: var(--color-ink); font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); line-height: 1.2; cursor: pointer;
}
.head__toggle[aria-expanded="true"] { background: var(--color-paper-2); }

/* shared pieces of both dropdowns */
.nav__caret {
  width: 0.45em; height: 0.45em; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-25%) rotate(45deg); transition: transform var(--dur-short) var(--ease-out);
}
.nav__trigger[aria-expanded="true"] .nav__caret { transform: translateY(15%) rotate(-135deg); }
.nav__group-head { color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-xs); }
.nav__route { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs); border-radius: var(--radius); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.nav__route .flag, .nav__route .icon { width: 1.25rem; height: 1.25rem; flex: none; }
.nav__route .icon { color: var(--color-accent-text); }
.nav__route:hover { background: var(--color-paper-2); color: var(--color-accent-text); }
.nav__svcs { display: grid; gap: var(--space-2xs); }
.nav__svc { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs); border-radius: var(--radius); color: var(--color-ink); text-decoration: none; }
.nav__svc-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-paper-2); color: var(--color-accent-text); }
.nav__svc-icon .icon { width: 1.125rem; height: 1.125rem; }
.nav__svc b { display: block; font-weight: 700; line-height: 1.25; }
.nav__svc small { display: block; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.35; }
.nav__svc:hover { background: var(--color-paper-2); }
.nav__svc:hover b { color: var(--color-accent-text); }
.nav__svc[aria-current="page"], .nav__route[aria-current="page"] { background: var(--color-paper-2); }
.nav__svc[aria-current="page"] b, .nav__route[aria-current="page"] { color: var(--color-accent-text); }
.nav__menu-foot { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.nav__all { font-weight: 700; font-size: var(--text-sm); }

/* phones and tablets: the nav is a panel under the bar; dropdowns become collapsible sections */
.nav { display: none; }
.head.is-open .nav {
  display: block; position: absolute; inset: 100% 0 auto; z-index: 1; max-height: calc(100dvh - 4rem); overflow-y: auto;
  padding: var(--space-md) var(--page-gutter) var(--space-xl);
  background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule);
}
.head.is-open::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100dvh; background: var(--color-scrim); }
.nav__quick { display: flex; gap: var(--space-xs); padding-bottom: var(--space-md); }
.nav__quick .btn { flex: 1; }
.nav__list > .nav__item:not(.nav__quick) { border-top: var(--rule-hair) solid var(--color-rule); }
.nav__link {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-sm) 0; border: 0; background: none; cursor: pointer;
  color: var(--color-ink); font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); line-height: 1.3; text-decoration: none; white-space: nowrap;
}
.nav__link[aria-current="page"] { color: var(--color-accent-text); }
.nav__menu { display: none; padding-bottom: var(--space-md); }
.nav__trigger[aria-expanded="true"] + .nav__menu { display: block; }
.nav__menu--routes .nav__group + .nav__group { margin-top: var(--space-sm); }

@media (min-width: 60rem) {
  .head__inner { gap: var(--space-lg); padding-block: var(--space-sm); }
  .head__brand { margin: 0; }
  .head__brand img { height: 48px; }
  .head__toggle { display: none; }
  .head__actions { gap: var(--space-md); }
  .head__actions .btn { min-height: 44px; padding-inline: var(--space-md); font-size: var(--text-sm); }
  .nav__item--wa { display: none; }
  .head.is-open::after { content: none; }
  .nav, .head.is-open .nav {
    display: flex; justify-content: center; flex: 1; position: static; padding: 0; border: 0;
    background: none; max-height: none; overflow: visible;
  }
  .nav__list { display: flex; align-items: center; gap: var(--space-md); }
  .nav__list > .nav__item:not(.nav__quick) { border: 0; }
  .nav__item { position: relative; }
  .nav__link { position: relative; width: auto; gap: var(--space-xs); padding: var(--space-xs) var(--space-2xs); font-size: var(--text-base); font-weight: 600; }
  .nav__link:hover { color: var(--color-accent-text); }
  /* animated underline: hover and current page */
  .nav__link::after {
    content: ""; position: absolute; left: var(--space-2xs); right: var(--space-2xs); bottom: 0; height: 2px;
    background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out);
  }
  .nav__trigger::after { right: calc(var(--space-2xs) + var(--space-xs) + 0.45em); }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__trigger[aria-expanded="true"]:not([aria-current])::after { transform: scaleX(0); }
  /* dropdown panels, centred under their trigger */
  .nav__menu, .nav__trigger[aria-expanded="true"] + .nav__menu {
    display: block; position: absolute; top: calc(100% + var(--space-lg)); left: 50%; z-index: var(--z-dropdown);
    padding: var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px -18px var(--color-shadow-card);
    opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
    transition: opacity calc(var(--dur-short) * 0.75) var(--ease-in), transform calc(var(--dur-short) * 0.75) var(--ease-in), visibility 0s linear calc(var(--dur-short) * 0.75);
  }
  .nav__menu--services { width: 42rem; }
  .nav__svcs, .nav__group ul { margin-inline: calc(var(--space-xs) * -1); }  /* item text lines up with the panel's headings */
  .nav__menu--services .nav__svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__trigger + .nav__menu--routes, .nav__trigger[aria-expanded="true"] + .nav__menu--routes { display: grid; grid-template-columns: repeat(2, max-content); column-gap: var(--space-xl); padding: var(--space-md) var(--space-lg); }
  .nav__menu--routes .nav__group + .nav__group { margin-top: 0; }
  .nav__menu--routes .nav__menu-foot { grid-column: 1 / -1; }
  .nav__trigger[aria-expanded="true"] + .nav__menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s;
  }
}
@media (min-width: 60rem) and (hover: hover) {
  .nav__item--menu:hover .nav__menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s;
  }
  /* bridge the gap between trigger and panel so hover survives the trip */
  .nav__item--menu::after { content: ""; position: absolute; inset: 100% 0 auto; height: var(--space-lg); }
}
@media (min-width: 64rem) { .head__wa { display: inline-flex; } }

/* ---------- hero ----------
   Phones/tablets: one flat navy tint over the photo. From 75rem: a split composition, a solid navy panel
   behind the text with a slanted edge and an orange rule (the logo's swoosh), the photo clearer on the right.
   Flat colours only. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--space-2xl) var(--page-gutter) var(--space-hero-end);
  background: var(--color-band); color: var(--color-band-ink);
  /* where the panel's slanted edge sits: just past the text column, measured from the content's left edge */
  --content-left: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
  --edge-top: calc(var(--content-left) + 43rem);
  --edge-bottom: calc(var(--edge-top) - 8rem);
}
.hero__img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 64% 45%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--color-hero-scrim); }
.hero__route, .hero__edge { display: none; }
.hero__inner { max-width: calc(var(--page-max) - 2 * var(--page-gutter)); margin-inline: auto; }
.hero__kicker {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-wrap: balance;
}
.hero__kicker::before { content: ""; flex: none; width: 2.5rem; height: 2px; background: var(--color-accent); transform-origin: left; }
.hero__title {
  margin-top: var(--space-md); font-family: var(--font-display); font-weight: 800; font-size: var(--text-display);
  line-height: 1.08; letter-spacing: -0.03em;
}
.hero__line { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__rise { display: inline-block; }
.hero__accent { position: relative; width: fit-content; color: var(--color-accent-hover); padding-bottom: 0.22em; }
.hero__swoosh { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 0.32em; overflow: visible; }
.hero__swoosh path { fill: none; stroke: var(--color-accent); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero__lede { margin-top: var(--space-lg); font-size: var(--text-md); line-height: 1.55; max-width: 44ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__desk { display: none; }
.hero__services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); margin-top: var(--space-2xl); max-width: 36rem; }
.hero__services li { display: flex; align-items: center; gap: var(--space-sm); }
.hero__ring {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: var(--rule-field) solid var(--color-accent); color: var(--color-accent-hover);
}
.hero__ring .icon { width: 1.375rem; height: 1.375rem; }
.hero__services b { display: block; font-weight: 700; line-height: 1.3; }
.hero__services b + span { display: block; font-size: var(--text-sm); }
.btn .icon[href], .btn > .icon:last-child { transition: transform var(--dur-short) var(--ease-out); }
.btn:hover > .icon:last-child { transform: translateX(3px); }
@media (min-width: 60rem) {
  .hero { padding: var(--space-3xl) var(--page-gutter) var(--space-hero-end); }
  .hero__kicker { letter-spacing: 0.16em; }
  .hero__desk { display: inline-flex; }
  .hero__mob { display: none; }
}
@media (min-width: 75rem) {
  .hero__title { font-size: 4.25rem; }
  .hero__img { object-position: 0% 50%; }
  .hero::before { background: var(--color-hero-scrim-light); }
  /* the solid panel behind the text, with a slanted right edge */
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-hero-panel);
    clip-path: polygon(0 0, var(--edge-top) 0, var(--edge-bottom) 100%, 0 100%);
  }
  .hero__edge {
    display: block; position: absolute; inset: 0; z-index: -1; background: var(--color-accent);
    clip-path: polygon(var(--edge-top) 0, calc(var(--edge-top) + 6px) 0, calc(var(--edge-bottom) + 6px) 100%, var(--edge-bottom) 100%);
  }
  .hero__route { display: block; position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
  .hero__route-line { fill: none; stroke: var(--color-band-ink); stroke-width: 2; stroke-dasharray: 0.012 0.012; opacity: 0.7; vector-effect: non-scaling-stroke; }
  .hero__dot-core { fill: var(--color-accent); stroke: var(--color-band-ink); stroke-width: 3; }
  .hero__dot-halo { fill: var(--color-accent); opacity: 0.25; }
}

/* entrance choreography: once, about 1.5 s, none at all for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hero__img { animation: hero-settle 14s var(--ease-out) both; }
  @keyframes hero-settle { from { transform: scale(1.08); } to { transform: none; } }
  .hero__kicker { animation: hero-fade 600ms var(--ease-out) 250ms both; }
  .hero__kicker::before { animation: hero-grow 700ms var(--ease-out) 250ms both; }
  .hero__rise { animation: hero-rise 900ms var(--ease-out) both; }
  .hero__line:nth-child(1) .hero__rise { animation-delay: 350ms; }
  .hero__line:nth-child(2) .hero__rise { animation-delay: 480ms; }
  .hero__swoosh path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hero-draw 800ms var(--ease-out) 950ms forwards; }
  .hero__lede { animation: hero-up 700ms var(--ease-out) 700ms both; }
  .hero__ctas { animation: hero-up 700ms var(--ease-out) 820ms both; }
  .hero__services li { animation: hero-up 600ms var(--ease-out) both; animation-delay: calc(950ms + var(--i, 0) * 90ms); }
  .hero__services li:nth-child(2) { --i: 1; } .hero__services li:nth-child(3) { --i: 2; } .hero__services li:nth-child(4) { --i: 3; }
  .quick__card { animation: hero-up 800ms var(--ease-out) 1100ms both; }
  @media (min-width: 75rem) {
    .hero::after { animation: hero-panel 1000ms var(--ease-out) both; }
    .hero__edge { animation: hero-edge 900ms var(--ease-out) 500ms both; }
    .hero__route-line { animation: hero-fade 900ms var(--ease-out) 1200ms both; }
    .hero__dot { opacity: 0; animation: hero-fade 300ms var(--ease-out) 1300ms both; }
  }
  @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes hero-grow { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes hero-rise { from { transform: translateY(105%); } to { transform: none; } }
  @keyframes hero-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes hero-draw { to { stroke-dashoffset: 0; } }
  @keyframes hero-panel { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, var(--edge-top) 0, var(--edge-bottom) 100%, 0 100%); } }
  @keyframes hero-edge { from { clip-path: polygon(var(--edge-top) 0, calc(var(--edge-top) + 6px) 0, calc(var(--edge-top) + 6px) 0, var(--edge-top) 0); } }
}

/* quick quote card, overlapping the hero: a booking bar (mode, from, to) that opens the full form pre-filled */
.quick { position: relative; z-index: var(--z-raised); padding: 0 var(--page-gutter); margin-top: calc(var(--space-2xl) * -1); }
.quick__card {
  max-width: calc(var(--page-max) - 2 * var(--page-gutter)); margin-inline: auto;
  display: grid; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg) var(--space-lg); background: var(--color-field);
}
.quick__head { display: grid; gap: var(--space-sm); }
.quick__kicker { color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.quick__title { margin-top: var(--space-xs); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.02em; }
.quick__promise { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; }
.quick__promise li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.quick__promise .icon { width: 1.125rem; height: 1.125rem; color: var(--color-accent-text); }
.quick__form { display: grid; gap: var(--space-md); }

/* mode: native radios dressed as pills */
.pick { min-width: 0; margin: 0; padding: 0; border: 0; }
.pick__legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
.pick__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pick__opt { position: relative; }
.pick__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick__opt span {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md) 0 var(--space-sm);
  border: var(--rule-field) solid var(--color-rule); border-radius: 999px; background: var(--color-paper);
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.pick__opt .icon { width: 1.125rem; height: 1.125rem; color: var(--color-accent-text); }
.pick__opt input:hover + span { border-color: var(--color-ink); }
.pick__opt input:checked + span { background: var(--color-band); border-color: var(--color-band); color: var(--color-band-ink); }
.pick__opt input:checked + span .icon { color: var(--color-accent); }
.pick__opt input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* route: From and To cells in one bar, a swap button between them, the quote button at the end */
.bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  border: var(--rule-field) solid var(--color-muted); border-radius: var(--radius); background: var(--color-field);
}
.bar__cell { display: grid; gap: 2px; min-width: 0; padding: var(--space-xs) var(--space-md); cursor: pointer; }
.bar__cell--from { grid-area: 1 / 1; }
.bar__cell--to { grid-area: 2 / 1; border-top: var(--rule-hair) solid var(--color-rule); }
.bar__label { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.bar__label .icon { width: 1rem; height: 1rem; color: var(--color-accent-text); }
.bar__cell select { width: 100%; min-height: 2rem; padding: 0; border: 0; background: transparent; color: var(--color-ink); font: inherit; font-size: var(--text-md); font-weight: 700; cursor: pointer; }
.bar__cell select:has(option[value=""]:checked) { color: var(--color-muted); font-weight: 600; }  /* the prompt, not a choice */
.bar__cell option { color: var(--color-ink); font-weight: 400; }
@media (max-width: 39.99rem) { .quick__card .quick__foot { display: none; } }  /* phones: the Where we ship band lists the same routes */
@supports selector(:has(*)) {
  .bar__cell select:focus-visible { outline: none; }
  .bar__cell:has(select:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: -3px; border-radius: var(--radius); }
}
.bar__swap {
  grid-area: 1 / 2 / 3 / 3; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule); border-radius: 50%; background: var(--color-paper); color: var(--color-ink); cursor: pointer;
}
.bar__swap[hidden] { display: none; }
.bar__swap:hover { border-color: var(--color-ink); }
.bar__swap .icon { width: 1.25rem; height: 1.25rem; transform: rotate(90deg); transition: transform var(--dur-short) var(--ease-out); }
.bar__swap.is-flipped .icon { transform: rotate(270deg); }
.bar__go { grid-area: 3 / 1 / 4 / 3; margin: var(--space-2xs); }

.quick__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.quick__foot-title { font-size: var(--text-sm); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips a {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); padding-left: var(--space-2xs); padding-right: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; background: var(--color-paper);
  color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.chips a:hover { border-color: var(--color-ink); }
.flag { width: 1.5rem; height: 1.5rem; flex: none; }
.flag-red { fill: var(--flag-red); }
.flag-yellow { fill: var(--flag-yellow); }
.flag-green { fill: var(--flag-green); }
.flag-black { fill: var(--flag-black); }
.flag-white { fill: var(--flag-white); }
.quick__all { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.quick__all .icon { width: 1rem; height: 1rem; }
@media (min-width: 54rem) {  /* inline only when the longest place name fits beside the button */
  .bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
  .bar__cell--to { grid-area: 1 / 3; border-top: 0; }
  .bar__swap { grid-area: 1 / 2; margin: 0; }
  .bar__swap .icon { transform: none; }
  .bar__swap.is-flipped .icon { transform: rotate(180deg); }
  .bar__go { grid-area: 1 / 4; align-self: stretch; }
  .quick__all { margin-left: auto; }
}
@media (min-width: 60rem) {
  .quick { margin-top: calc((var(--space-3xl) + var(--space-md)) * -1); }
  .quick__card { gap: var(--space-xl); padding: var(--space-xl) var(--space-2xl) var(--space-lg); }
  .quick__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-2xl); }
  .quick__promise { flex-direction: column; padding-bottom: var(--space-3xs); }
}

/* ---------- sections ---------- */
.section { padding: var(--space-2xl) var(--page-gutter); }
.section--tight { padding: var(--space-xl) var(--page-gutter); }
.section--tint { background: var(--color-paper-2); }
.section:not(.section--tint) + .section:not(.section--tint) { padding-top: 0; }  /* two plain sections in a row: one gap, not two */
.section__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; }
.section__more { margin-top: var(--space-xl); font-weight: 600; }
.section__lede { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 50ch; }
@media (min-width: 60rem) {
  .section { padding: var(--space-3xl) var(--page-gutter); }
  .section--tight { padding: var(--space-2xl) var(--page-gutter); }
}

/* routes index */
.routes__cols { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.routes__head { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); line-height: 1.3; margin-bottom: var(--space-sm); }
.route-list { border-top: var(--rule-hair) solid var(--color-rule); }
.route-row { border-bottom: var(--rule-hair) solid var(--color-rule); }
.route-row__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md);
  padding-block: var(--space-md); color: var(--color-ink); text-decoration: none;
}
.route-row__link::after {
  content: ""; grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 1.25rem; height: 1.25rem;
  background: var(--color-accent-text);
  -webkit-mask: url("/assets/img/arrow.svg") center / contain no-repeat; mask: url("/assets/img/arrow.svg") center / contain no-repeat;
  transition: transform var(--dur-short) var(--ease-out);
}
.route-row__link:hover::after { transform: translateX(4px); }
.route-row__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.3; }
.route-row__cities { color: var(--color-ink-2); }
.route-row__modes { color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 60rem) {
  .routes__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}

/* what we ship: out of / into Kenya */
.cargo { display: grid; gap: var(--space-2xl); margin-top: var(--space-xl); }
.cargo__head { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); line-height: 1.3; margin-bottom: var(--space-sm); }
.cargo__list div { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.cargo__list dt { font-weight: 600; }
.cargo__list dd { color: var(--color-ink-2); }
@media (min-width: 60rem) { .cargo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3xl); } }

/* homepage section heads: small orange-ruled label, title, lede, link on the right */
.kicker {
  display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm);
  color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.kicker::before { content: ""; flex: none; width: 2rem; height: 2px; background: var(--color-accent); }
.kicker--light { color: var(--color-band-ink); }  /* small text on photos stays white; the rule stays orange */
.sec-head { display: grid; gap: var(--space-md); }
.sec-head__link { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 600; text-decoration: none; white-space: nowrap; align-self: end; }
.sec-head__link .icon { width: 1.125rem; height: 1.125rem; }
@media (min-width: 60rem) { .sec-head { grid-template-columns: minmax(0, 1fr) auto; } }

/* services: photo cards in a bento grid */
.svcs { padding-top: var(--space-3xl); }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-xl); }
.svc--big, .svc--ask { grid-column: 1 / -1; }
/* the card link; the Ask card's own .btn keeps its button styles */
.svc:not(.svc--ask) > a {
  display: grid; height: 100%; overflow: hidden; color: var(--color-ink); text-decoration: none;
  background: var(--color-field); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg);
}
.svc img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-xs); padding: var(--space-sm) var(--space-sm) var(--space-md); }
@media (min-width: 40rem) { .svc__body { column-gap: var(--space-sm); padding: var(--space-md) var(--space-lg) var(--space-lg); } }
.svc__body b { font-size: var(--text-md); line-height: 1.3; }
.svc__body > span { grid-column: 1; color: var(--color-ink-2); font-size: var(--text-sm); }
.svc__body .icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 1.25rem; height: 1.25rem; color: var(--color-accent-text); transition: transform var(--dur-short) var(--ease-out); }
.svc a:hover .icon, .svc a:focus-visible .icon { transform: translateX(4px); }
.svc--ask {
  display: grid; align-content: center; gap: var(--space-sm); padding: var(--space-xl) var(--space-lg);
  background: var(--color-band); color: var(--color-band-ink); border-radius: var(--radius-lg);
}
.svc--ask p:not(.svc-ask__title) { color: var(--color-band-muted); }
.svc-ask__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.02em; }
.svc--ask .btn { justify-self: start; margin-top: var(--space-xs); }
@media (max-width: 29.99rem) {  /* small phones: image-left rows, so names get a full line */
  .svc-grid { grid-template-columns: 1fr; }
  .svc:not(.svc--ask) > a { grid-template-columns: 7rem minmax(0, 1fr); align-items: center; }
  .svc img { height: 100%; aspect-ratio: 1; }
}
@media (min-width: 40rem) { .svc-grid { gap: var(--space-md); } }
@media (min-width: 60rem) {
  .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc--big { grid-column: span 2; grid-row: span 2; }
  .svc--ask { grid-column: span 2; }
  .svc--big img { aspect-ratio: auto; height: 100%; min-height: 0; }
  .svc--big a { grid-template-rows: minmax(0, 1fr) auto; }
  .svc--big .svc__body b { font-size: var(--text-lg); }
}

/* destinations band: route cards + a framed map with real coastlines */
.dest { padding: var(--space-3xl) var(--page-gutter); }
.dest__grid { display: grid; gap: var(--space-xl); }
.dest__intro { order: 0; }
.dest .map { order: 1; }
.dest__cards { order: 2; }
.dest__kicker { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dest__kicker::before { content: ""; flex: none; width: 2rem; height: 2px; background: var(--color-accent); }
.dest__badge {
  display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: var(--rule-field) solid var(--color-accent); color: var(--color-accent);
}
.dest__badge .icon { width: 1.25rem; height: 1.25rem; }
.dest__badge--blue { border: 0; background: var(--color-map-land); color: var(--color-band-ink); }
.dest__title { margin-top: var(--space-md); }
.dest__title span { color: var(--color-accent); }
.dest__lede { margin-top: var(--space-md); color: var(--color-band-muted); font-size: var(--text-md); max-width: 46ch; }
.dest__cards { display: grid; gap: var(--space-md); }
.dest__card { padding: var(--space-md) var(--space-lg); background: var(--color-band-2); border: var(--rule-hair) solid var(--color-band-rule); border-radius: var(--radius-lg); }
.dest__head { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); margin-bottom: var(--space-sm); }
.dest__list li + li { border-top: var(--rule-hair) solid var(--color-band-rule); }
.dest__list a { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-sm); padding-top: var(--space-sm); padding-bottom: var(--space-sm); color: var(--color-band-ink); text-decoration: none; }
.dest__list .icon { width: 1.25rem; height: 1.25rem; margin-top: var(--space-3xs); color: var(--color-accent); }
.dest__list b { display: block; font-weight: 700; }
.dest__list a:hover b { color: var(--color-accent); }
.dest__modes { color: var(--color-band-muted); font-size: var(--text-sm); }
@media (min-width: 40rem) { .dest__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .dest__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro map" "cards cards"; column-gap: var(--space-2xl); row-gap: var(--space-2xl); }
  .dest__intro { grid-area: intro; align-self: center; }
  .dest__cards { grid-area: cards; }
  .dest .map { grid-area: map; }
}

.map__frame {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--color-map-sea); color: var(--color-band-ink); border: var(--rule-hair) solid var(--color-band-rule);
}
.map__svg { display: block; width: 100%; }
.map__land { fill: var(--color-map-land); stroke: var(--color-map-coast); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map__regions text { fill: var(--color-map-label); font-family: var(--font-body); font-weight: 600; font-size: 20px; letter-spacing: 0.25em; }
@media (max-width: 39.99rem) { .map__regions { display: none; } }
.map__halo { fill: none; stroke: var(--color-accent); stroke-width: 12; stroke-linecap: round; opacity: 0.22; }
.map__route { fill: none; stroke: var(--color-accent); stroke-width: 3.5; stroke-linecap: round; }
.map__arrowhead { fill: var(--color-accent); }
.map__dot { fill: var(--color-band-ink); stroke: var(--color-accent); stroke-width: 3; }
.map__dot--sm { stroke-width: 0; fill: var(--color-band-ink); }
.map__ring { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0.5; }
.map__hub { fill: var(--color-accent); stroke: var(--color-band-ink); stroke-width: 2.5; }
.map__pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -150%);
  padding: var(--space-3xs) var(--space-xs); border: var(--rule-hair) solid var(--color-band-rule); border-radius: var(--radius);
  background: var(--color-band); color: var(--color-band-ink); font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none;
}
a.map__pin:hover, a.map__pin:focus-visible { border-color: var(--color-accent); }
.map__pin--hub { transform: translate(18%, 30%); background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.map__world {
  position: absolute; right: 2.5%; top: 72%; display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius);
  background: var(--color-band); color: var(--color-band-ink); font-size: 0.75rem; font-weight: 600; line-height: 1.3; text-decoration: none;
}
.map__world .icon { width: 1.125rem; height: 1.125rem; color: var(--color-accent); }
.map__world:hover { background: var(--color-band-2); }
@media (max-width: 39.99rem) {
  .map__pin, .map__world { min-height: 24px; display: inline-flex; align-items: center; }
  .hero__ctas .btn { flex: 1 1 100%; }
}
.map__note { display: flex; gap: var(--space-sm); align-items: flex-start; margin-top: var(--space-md); color: var(--color-band-muted); font-size: var(--text-sm); }
.map__note .icon { width: 1.25rem; height: 1.25rem; color: var(--color-accent); }
@media (min-width: 40rem) {
  .map__pin { font-size: var(--text-sm); padding: var(--space-2xs) var(--space-sm); }
  .map__world { padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); }
  .map__world .icon { width: 1.5rem; height: 1.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .map__route, .map__halo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 900ms var(--ease-out) forwards; animation-delay: calc(150ms + var(--i, 0) * 120ms); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* why FAAJ: photo band under the same flat tint as the hero */
.why {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--space-3xl) var(--page-gutter); background: var(--color-band); color: var(--color-band-ink);
}
.why__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 50%; }
.why::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-why-scrim); }
.why__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-band-muted); }
.why__list li { display: grid; gap: var(--space-3xs); align-content: start; }
.why__list .icon { color: var(--color-accent-hover); margin-bottom: var(--space-xs); }
.why__list b { font-weight: 600; }
.why__list span { font-size: var(--text-sm); }
.why__card { padding: var(--space-xl) var(--space-lg); background: var(--color-band); border: var(--rule-hair) solid var(--color-band-rule); border-radius: var(--radius-lg); }
.why__card-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.02em; }
.why__card p:not(.why__card-title) { margin-top: var(--space-sm); margin-bottom: var(--space-lg); color: var(--color-band-muted); }
@media (min-width: 60rem) {
  .why__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); row-gap: var(--space-2xl); }
  .why__list { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* thanks: what happens next */
.next { display: grid; gap: var(--space-2xl); }
.next__steps { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.next__steps li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-sm); }
.next__steps .icon { color: var(--color-accent-text); margin-top: var(--space-3xs); }
.next__steps b { display: block; font-size: var(--text-md); }
.next__steps span { color: var(--color-ink-2); }
.next__aside { align-self: start; padding: var(--space-xl) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius); }
.next__aside p { margin-block: var(--space-sm) var(--space-lg); color: var(--color-ink-2); }
.next__home { margin-bottom: 0; }
@media (min-width: 60rem) { .next { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); } }

/* ---------- inner pages ---------- */
.page-head, .route-head { padding: var(--space-2xl) var(--page-gutter) var(--space-xl); }
.page-head--solo { padding: var(--space-3xl) var(--page-gutter); min-height: 50dvh; }
.page-head__title, .route-head__title {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-s); line-height: 1.04; letter-spacing: -0.02em; max-width: 20ch;
}
.page-head__lede, .route-head__lede {
  margin-top: var(--space-md); color: var(--color-band-muted); font-size: var(--text-md); line-height: 1.5; max-width: 52ch;
}
@media (min-width: 60rem) { .page-head, .route-head { padding: var(--space-3xl) var(--page-gutter) var(--space-2xl); } }

.facts { display: grid; gap: 0 var(--space-xl); margin-top: var(--space-xl); }
.facts div { padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.facts dt { color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.facts dd { font-size: var(--text-md); margin-top: var(--space-2xs); }
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.more { display: grid; gap: var(--space-xl); }
.more__head { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
.more__list { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xs); }
.more__list a { font-weight: 600; white-space: nowrap; }
@media (min-width: 60rem) { .more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.services { display: grid; gap: 0 var(--space-3xl); }
.services li {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-md);
  padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule);
}
.services .icon { color: var(--color-ink); }
.services h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.3; }
.services p { margin-top: var(--space-2xs); color: var(--color-ink-2); max-width: 52ch; }
.services .services__fit { margin-top: var(--space-sm); color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); }
@media (min-width: 60rem) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- infographics ---------- */
/* shipping flow: vertical timeline on phones, five stops on one line from 60rem */
.flow { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.flow__step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-md); }
.flow__step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3rem; bottom: calc(var(--space-lg) * -1);
  border-left: 2px dashed var(--color-muted);
}
.flow__icon {
  grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--color-paper); border: var(--rule-field) solid var(--color-ink); color: var(--color-ink);
}
.flow__step:last-child .flow__icon { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.flow__step h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); line-height: 1.3; align-self: end; }
.flow__step p { color: var(--color-ink-2); max-width: 32ch; }
@media (min-width: 60rem) {
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg); }
  .flow__step { display: block; }
  .flow__step:not(:last-child)::before {
    left: 3.75rem; right: calc(var(--space-sm) * -1); top: calc(1.5rem - 1px); bottom: auto;
    border-left: 0; border-top: 2px dashed var(--color-muted);
  }
  .flow__icon { margin-bottom: var(--space-md); }
  .flow__step p { margin-top: var(--space-2xs); }
}

/* quote checklist */
.checklist { display: grid; gap: var(--space-md); margin-block: var(--space-lg); }
.checklist li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-sm); }
.checklist .icon { color: var(--color-accent-text); margin-top: var(--space-3xs); }
.checklist b { display: block; }
.checklist span { color: var(--color-ink-2); }

/* air or sea: three modes on one speed-to-cost axis */
.modes { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-xl); }
.modes__axis { display: contents; }
.modes__axis span { color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.modes__axis span:last-child { order: 2; }
.modes__list {
  order: 1; display: grid; gap: var(--space-xl);
}
.modes__item { position: relative; }
.modes__dot {
  position: absolute; left: calc(var(--space-lg) * -1 - 8px); top: var(--space-2xs);
  width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-paper);
}
.modes__item .icon { color: var(--color-ink); }
.modes__item h3 { margin-top: var(--space-xs); font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
.modes__item p { color: var(--color-ink-2); max-width: 36ch; }
@media (min-width: 60rem) {
  .modes { display: block; }
  .modes__axis { display: flex; justify-content: space-between; padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-ink); }
  .modes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: var(--space-xl); }
  .modes__dot { left: 0; top: calc(var(--space-xl) * -1 - 8px); }
}

/* full vs shared container */
.boxes { margin-top: var(--space-xl); }
.boxes__pair { display: grid; gap: var(--space-xl); }
.boxes__svg { width: 100%; }
.boxes__shell { fill: var(--color-field); stroke: var(--color-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.boxes__rib { fill: none; stroke: var(--color-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.boxes__mine rect { fill: var(--color-ink); stroke: var(--color-field); stroke-width: 2; vector-effect: non-scaling-stroke; }
.boxes__other rect { fill: var(--color-paper-2); stroke: var(--color-muted); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.boxes figcaption { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 46ch; }
.boxes figcaption b { display: block; color: var(--color-ink); }
.boxes__key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.boxes__swatch { display: inline-block; width: 0.875rem; height: 0.875rem; margin-right: calc(var(--space-xs) * -1); vertical-align: -0.1em; }
.boxes__swatch--mine { background: var(--color-ink); }
.boxes__swatch--other { background: var(--color-paper-2); border: var(--rule-field) dashed var(--color-muted); }
@media (min-width: 60rem) { .boxes__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }

/* route strip: origin, modes, destination */
.strip {
  display: grid; gap: var(--space-sm); margin-top: var(--space-xl); padding: var(--space-lg);
  background: var(--color-band-2); border-radius: var(--radius);
}
.strip__end { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--space-sm); }
.strip__end .icon { grid-row: span 2; color: var(--color-accent); }
.strip__end b { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
.strip__end span { color: var(--color-band-muted); font-size: var(--text-sm); }
.strip__mid { position: relative; }
.strip__line { display: none; }
.strip__modes { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.strip__modes li {
  display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm);
  border-radius: 999px; background: var(--color-band); font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
}
.strip__modes .icon { width: 1.125rem; height: 1.125rem; color: var(--color-accent); }
@media (min-width: 60rem) {
  .strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); }
  .strip__line { display: block; position: absolute; inset: 50% 0 auto; border-top: 2px dashed var(--color-accent); }
  .strip__modes { position: relative; justify-content: center; }
  .strip__end--to { grid-template-columns: minmax(0, 1fr) 1.5rem; text-align: right; }
  .strip__end--to .icon { grid-column: 2; grid-row: 1 / span 2; }
}

/* route page: background + quote checklist */
.about { display: grid; gap: var(--space-2xl); }
.about__text p { margin-top: var(--space-md); font-size: var(--text-md); line-height: 1.55; max-width: 60ch; }
.about__ask { align-self: start; padding: var(--space-xl) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius); }
.about__ask-head { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.1; letter-spacing: -0.02em; }
@media (min-width: 60rem) { .about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); } }

/* route tips + about values */
.about__tips-head { margin-top: var(--space-xl); font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
.tips { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.tips li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-sm); }
.tips .icon { width: 1.25rem; height: 1.25rem; margin-top: var(--space-3xs); color: var(--color-accent-text); }
.values { display: grid; gap: var(--space-xl) var(--space-lg); margin-top: var(--space-xl); }
.values li { display: grid; gap: var(--space-2xs); align-content: start; }
.values .icon { color: var(--color-accent-text); margin-bottom: var(--space-xs); }
.values b { font-size: var(--text-md); }
.values span { color: var(--color-ink-2); }
@media (min-width: 40rem) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .values { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* FAQ */
.faq { max-width: 52rem; margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); line-height: 1.35; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin: 0.45em 0.25rem 0 0;
  border: solid var(--color-accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: transform var(--dur-short) var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(40%) rotate(-135deg); }
.faq summary:hover { color: var(--color-accent-text); }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 65ch; }

/* ---------- contact + quote form ----------
   The form is a card in two numbered steps; step 1 reuses the home card's mode pills and route bar. */
.contact { display: grid; gap: var(--space-2xl); align-items: start; }
.quote {
  position: relative; display: grid; gap: var(--space-xl); padding: var(--space-xl) var(--space-lg);
  background: var(--color-field); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); clip-path: var(--tag-lg);
}
/* the clip removes the border at the cut corner; this 1px line puts it back */
.quote::after { content: ""; position: absolute; top: -1px; left: calc(100% - var(--cut-lg) + 1px); width: calc(var(--cut-lg) * 1.4142); height: var(--rule-hair); background: var(--color-rule); transform-origin: 0 0; transform: rotate(45deg); pointer-events: none; }
.quote__head { display: grid; gap: var(--space-sm); }
.quote__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.02em; }
.quote__step { display: grid; gap: var(--space-lg); min-width: 0; margin: 0; padding: var(--space-lg) 0 0; border: 0; border-top: var(--rule-hair) solid var(--color-rule); }
/* floated, the legend is a plain first row instead of a notch in the border */
.quote__legend { float: left; display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: 0; font-size: var(--text-md); font-weight: 700; }
.quote__num { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-band); color: var(--color-band-ink); font-size: var(--text-sm); font-weight: 800; }
.quote__row { display: grid; gap: var(--space-lg); }
.quote__tips { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper); }
.quote__tips summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.quote__tips .checklist { margin: 0; padding: var(--space-2xs) var(--space-md) var(--space-md); font-size: var(--text-sm); }
.field { display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; }  /* a taller neighbour (hint) must not push the input down */
.field > label { font-weight: 600; }
.field__opt { color: var(--color-muted); font-weight: 400; }
.field__hint { color: var(--color-muted); font-size: var(--text-sm); }
.field > input, .field > select, .field > textarea {
  width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md);
  border: var(--rule-field) solid var(--color-muted); border-radius: var(--radius);
  background: var(--color-field); color: var(--color-ink); font: inherit;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.field > input:hover, .field > textarea:hover, .field > :is(input, textarea):focus-visible { border-color: var(--color-ink); }
.field > input { line-height: 1.2; }
.field > textarea { resize: vertical; min-height: 8rem; }
.field > :is(input, select, textarea):focus-visible { outline-offset: 1px; }
.field > :user-invalid { border-color: var(--color-error); }
.field--route.is-invalid .bar { border-color: var(--color-error); }
.quote__send { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.quote__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.quote__actions .btn { min-height: 52px; }
.quote__actions .btn--plain .icon { color: var(--color-whatsapp); }
.quote__or { color: var(--color-muted); font-size: var(--text-sm); }
.quote__status { color: var(--color-muted); font-size: var(--text-sm); min-height: 1.4em; }
@media (max-width: 39.99rem) { .quote__actions { flex-direction: column; align-items: stretch; } .quote__or { text-align: center; } }
@media (min-width: 40rem) {
  .quote { padding: var(--space-2xl) var(--space-xl); }
  .quote__row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); }
  .quote__actions .btn--accent { flex: 1 1 12rem; }  /* row layout only: in the phone column this basis became height */
}
@media (min-width: 60rem) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }

/* beside the form: a navy card with the other ways to reach us, kept in view while the form is filled */
.channels { display: grid; gap: var(--space-sm); padding: var(--space-xl) var(--space-lg); background: var(--color-band); color: var(--color-band-ink); border-radius: var(--radius-lg); clip-path: var(--tag-lg); }
@media (min-width: 60rem) { .channels { position: sticky; top: 6.5rem; } }
.channels__head { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.1; letter-spacing: -0.02em; }
.channels__text { color: var(--color-band-muted); }
.channels__list { margin-top: var(--space-xs); }
.channels__list div { display: grid; gap: var(--space-3xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-band-rule); }
.channels__list dt { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-band-muted); font-size: var(--text-sm); font-weight: 600; }
.channels__list dt .icon { width: 1.125rem; height: 1.125rem; color: var(--color-accent); }
.channels__list dd { font-weight: 600; overflow-wrap: anywhere; }
.channels__list a { color: var(--color-band-ink); }

/* ---------- light page head ---------- */
.page-head--light { background: var(--color-paper); color: var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); }
.page-head--light .page-head__lede { color: var(--color-ink-2); }

/* ---------- service pages ---------- */
.svc-hero { padding: var(--space-xl) var(--page-gutter) var(--space-2xl); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.svc-hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
.svc-hero__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-s); line-height: 1.06; letter-spacing: -0.02em; max-width: 16ch; }
.svc-hero__lede { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.55; max-width: 48ch; }
.svc-hero__media { position: relative; }
.svc-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
/* the orange block behind the photo gives each hero its own offset composition */
.svc-hero__media::before { content: ""; position: absolute; z-index: -1; width: 38%; height: 46%; background: var(--color-accent); border-radius: var(--radius-lg); }
.svc-hero__media { isolation: isolate; }
.svc-hero--right .svc-hero__media::before { right: calc(var(--space-md) * -1); bottom: calc(var(--space-md) * -1); }
.svc-hero--left .svc-hero__media::before { left: calc(var(--space-md) * -1); top: calc(var(--space-md) * -1); }
@media (max-width: 39.99rem) { .svc-hero__media::before { width: 30%; height: 34%; } .svc-hero--right .svc-hero__media::before { right: calc(var(--space-xs) * -1); bottom: calc(var(--space-xs) * -1); } .svc-hero--left .svc-hero__media::before { left: calc(var(--space-xs) * -1); } }
@media (min-width: 60rem) {
  .svc-hero { padding: var(--space-2xl) var(--page-gutter) var(--space-3xl); }
  .svc-hero--right .svc-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); }
  .svc-hero--left .svc-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); }
  .svc-hero--left .svc-hero__media { order: -1; }
}
.benefits { display: grid; gap: var(--space-xl) var(--space-lg); margin-top: var(--space-xl); }
.benefits li { display: grid; gap: var(--space-2xs); align-content: start; padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.benefits .icon { color: var(--color-accent-text); margin-bottom: var(--space-xs); }
.benefits b { font-size: var(--text-md); }
.benefits span { color: var(--color-ink-2); }
@media (min-width: 40rem) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } .flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* air freight: chargeable weight */
.calc { margin-top: var(--space-xl); }
.calc__row { display: grid; gap: var(--space-sm); align-items: stretch; }
.calc__op { align-self: center; }
.calc__tile { display: grid; align-content: start; gap: var(--space-2xs); padding: var(--space-lg); background: var(--color-field); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }
.calc__tile .icon { color: var(--color-accent-text); margin-bottom: var(--space-xs); }
.calc__tile b { font-size: var(--text-md); }
.calc__tile span { color: var(--color-ink-2); }
.calc__tile--result { background: var(--color-band); color: var(--color-band-ink); border-color: var(--color-band); }
.calc__tile--result .icon { color: var(--color-accent); }
.calc__tile--result span { color: var(--color-band-muted); }
.calc__op { justify-self: center; color: var(--color-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--text-sm); }
.calc__op .icon { transform: rotate(90deg); color: var(--color-accent-text); }
.calc__note { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 65ch; }
@media (min-width: 60rem) {
  .calc__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
  .calc__op .icon { transform: none; }
}

/* consolidation: several orders in, one shipment out */
.merge { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); align-items: center; }
.merge__in { display: grid; gap: var(--space-xs); }
.merge__in li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-field); border: var(--rule-field) dashed var(--color-muted); border-radius: var(--radius); font-weight: 600; }
.merge__in .icon { color: var(--color-accent-text); }
.merge__arrow { justify-self: center; color: var(--color-accent-text); }
.merge__arrow .icon { transform: rotate(90deg); }
.merge__tile { display: grid; gap: var(--space-2xs); padding: var(--space-lg); background: var(--color-field); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }
.merge__tile .icon { color: var(--color-accent-text); margin-bottom: var(--space-xs); }
.merge__tile span { color: var(--color-ink-2); font-size: var(--text-sm); }
.merge__tile--key { background: var(--color-band); color: var(--color-band-ink); border-color: var(--color-band); }
.merge__tile--key .icon { color: var(--color-accent); }
.merge__tile--key span { color: var(--color-band-muted); }
@media (min-width: 60rem) {
  .merge { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
  .merge__arrow .icon { transform: none; }
}

/* door to door: six-stop chain */
.chain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); margin-top: var(--space-xl); }
.chain li { position: relative; display: grid; justify-items: start; align-content: start; gap: var(--space-3xs); }
.chain__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-xs); border-radius: 50%; background: var(--color-field); border: var(--rule-field) solid var(--color-ink); color: var(--color-ink); }
.chain__icon--end { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.chain b { font-size: var(--text-md); }
.chain span:not(.chain__icon) { color: var(--color-ink-2); font-size: var(--text-sm); }
@media (min-width: 60rem) {
  .chain { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .chain li:not(:last-child)::after { content: ""; position: absolute; left: 3.5rem; right: calc(var(--space-sm) * -1); top: calc(1.5rem - 1px); border-top: 2px dashed var(--color-muted); }
}

/* import and export: two-way diagram */
.twoway { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); align-items: center; }
.twoway__side { padding: var(--space-lg); background: var(--color-field); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }
.twoway__head { font-weight: 700; margin-bottom: var(--space-sm); }
.twoway__side ul { display: grid; gap: var(--space-xs); }
.twoway__side a { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font-weight: 600; text-decoration: none; }
.twoway__side a:hover { color: var(--color-accent-text); }
.twoway__side .icon { color: var(--color-accent-text); width: 1.5rem; height: 1.5rem; }
.twoway__hub { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); color: var(--color-accent-text); }
.twoway__arrow .icon { transform: rotate(90deg); }
.twoway__kenya { display: grid; justify-items: center; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); background: var(--color-band); color: var(--color-band-ink); font-weight: 800; font-size: var(--text-md); }
.twoway__kenya .flag { width: 2.25rem; height: 2.25rem; }
.twoway__kenya small { color: var(--color-band-muted); font-weight: 500; font-size: var(--text-sm); }
@media (min-width: 60rem) {
  .twoway { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .twoway__arrow .icon { transform: none; }
}

/* drop-off checklist + supply chain */
.checklist--wide { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
@media (min-width: 40rem) { .checklist--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .checklist--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sc { margin-top: var(--space-xl); }
.sc__steps { display: grid; gap: var(--space-md); }
.sc__steps li { display: grid; gap: var(--space-2xs); padding: var(--space-lg); background: var(--color-field); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }
.sc__steps .icon { color: var(--color-accent-text); margin-bottom: var(--space-xs); }
.sc__steps span { color: var(--color-ink-2); font-size: var(--text-sm); }
.sc__bar { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); background: var(--color-band); color: var(--color-band-ink); font-weight: 600; }
.sc__bar .icon { color: var(--color-accent); }
@media (min-width: 60rem) { .sc__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* services overview: image-led rows */
.srows { display: grid; gap: var(--space-2xl); }
.srow { display: grid; gap: var(--space-lg); align-items: center; }
.srow__media { display: block; overflow: hidden; border-radius: var(--radius-lg); }
.srow__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.srow:hover .srow__media img { transform: scale(1.03); }
.srow__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.02em; }
.srow__title a { color: var(--color-ink); text-decoration: none; }
.srow__text > p { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 52ch; }
.srow__points { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.srow__points li { padding: var(--space-3xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; font-size: var(--text-sm); font-weight: 600; background: var(--color-field); }
.srow__link { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-lg); font-weight: 700; text-decoration: none; }
.srow__link .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-short) var(--ease-out); }
.srow__link:hover .icon { transform: translateX(4px); }
@media (min-width: 60rem) {
  .srows { gap: var(--space-3xl); }
  .srow { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); }
  .srow--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .srow--flip .srow__media { order: 2; }
}
.extras { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.extras li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-md); }
.extras .icon { color: var(--color-ink); }
.extras b { display: block; font-size: var(--text-md); }
.extras span { color: var(--color-ink-2); }
@media (min-width: 60rem) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); } }

/* map: hovering a route card lights its line */
.map__route, .map__halo { transition: opacity var(--dur-short) var(--ease-out); }
.map__frame[data-active] .map__route, .map__frame[data-active] .map__halo { opacity: 0.25; }
.map__frame[data-active="dubai"] [data-route="dubai"], .map__frame[data-active="china"] [data-route="china"],
.map__frame[data-active="istanbul"] [data-route="istanbul"], .map__frame[data-active="world"] [data-route="world"] { opacity: 1; }
.map__frame[data-active] .map__halo[data-route] { opacity: 0.1; }
.map__frame[data-active="dubai"] .map__halo[data-route="dubai"], .map__frame[data-active="china"] .map__halo[data-route="china"],
.map__frame[data-active="istanbul"] .map__halo[data-route="istanbul"], .map__frame[data-active="world"] .map__halo[data-route="world"] { opacity: 0.4; }

/* ---------- motion layer (skipped entirely for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(10px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(var(--d, 0) * 40ms); }
  .reveal.is-in { opacity: 1; transform: none; }
  .svc img { transition: transform var(--dur-long) var(--ease-out); }
  .svc a:hover img { transform: scale(1.04); }
}
/* FAQ: smooth open where the browser supports animating to auto height */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height var(--dur-long) var(--ease-out), content-visibility var(--dur-long) allow-discrete; }
.faq details[open]::details-content { height: auto; }

/* ---------- quote form states ---------- */
.field__error { display: none; color: var(--color-error); font-size: var(--text-sm); font-weight: 600; }
.field.is-invalid .field__error:not([hidden]) { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--color-error); }
.quote__alert { display: none; padding: var(--space-md) var(--space-lg); border: var(--rule-field) solid var(--color-error); border-radius: var(--radius); background: var(--color-field); color: var(--color-ink); }
.quote__alert.is-shown { display: block; }
.quote__alert b { color: var(--color-error); }
.btn.is-loading::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--color-accent-ink); border-right-color: transparent; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- whole-site review fixes ---------- */
.nowrap, a[href^="tel:"] { white-space: nowrap; }
html.menu-open { overflow: hidden; }
/* destinations page: the map is the centrepiece, full width */
.dest--page .dest__intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* the page head says it; the h2 stays for screen readers */
@media (min-width: 60rem) { .dest--page .dest__grid { grid-template-columns: 1fr; grid-template-areas: "map" "cards"; } }
/* route pages: their own map with the route lit */
.route-map .map { margin-top: var(--space-xl); max-width: 56rem; }
.route-map .map__note { color: var(--color-ink-2); }
/* about: photo under the same flat tint as the photo bands */
.page-head--photo { position: relative; isolation: isolate; overflow: hidden; }
.page-head__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 45%; }
.page-head--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-hero-scrim); }
.page-head--photo .page-head__lede { color: var(--color-band-ink); }
/* services: strip of the seven service photos */
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-xl); }
.thumbs li:nth-child(n+5) { display: none; }
.thumbs a { display: grid; gap: var(--space-2xs); color: var(--color-band-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: var(--rule-hair) solid var(--color-band-rule); }
.thumbs a:hover span { color: var(--color-accent); }
.thumbs span { overflow-wrap: anywhere; hyphens: auto; line-height: 1.3; }
@media (min-width: 60rem) { .thumbs { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-sm); } .thumbs li:nth-child(n+5) { display: block; } }

/* ---------- about ---------- */
.story { display: grid; gap: var(--space-2xl); align-items: center; }
.story__text p { margin-top: var(--space-md); font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); max-width: 54ch; }
.story__media { position: relative; padding-bottom: var(--space-2xl); }
.story__img { border-radius: var(--radius-lg); object-fit: cover; }
.story__img--main { width: 88%; aspect-ratio: 4 / 3; }
.story__img--inset { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1; border: 6px solid var(--color-paper); }
@media (min-width: 60rem) { .story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); } }
.glance { display: grid; gap: var(--space-lg); }
.glance li { display: grid; align-content: start; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-md); }
.glance .icon { grid-row: span 2; color: var(--color-accent-text); }
.glance b { font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; }
.glance span { font-weight: 700; }
@media (min-width: 40rem) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.about-map__grid { display: grid; gap: var(--space-xl); align-items: center; }
.about-map .map__note { color: var(--color-ink-2); }
@media (min-width: 60rem) { .about-map__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); } }
.thumbs--light a { color: var(--color-ink); }
.thumbs--light img { border-color: var(--color-rule); }
.thumbs--light a:hover span { color: var(--color-accent-text); }
.thumbs--light { margin-top: var(--space-xl); }
@media (max-width: 59.99rem) { .thumbs--light { grid-template-columns: repeat(2, minmax(0, 1fr)); } .thumbs--light li:nth-child(n+5) { display: block; } }

/* ---------- floating WhatsApp button ---------- */
.wa-fab {
  position: fixed; right: max(var(--space-md), env(safe-area-inset-right)); bottom: max(var(--space-md), env(safe-area-inset-bottom)); z-index: var(--z-fab);
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--color-whatsapp); color: var(--color-field); text-decoration: none;
  box-shadow: 0 10px 24px -10px var(--color-shadow-card);
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), visibility var(--dur-short);
}
.wa-fab.is-tucked { opacity: 0; visibility: hidden; transform: translateY(1rem); }  /* while the page head, with its own WhatsApp button, is on screen */
.wa-fab:hover { background: var(--color-whatsapp-hover); transform: translateY(-2px); }
.wa-fab:active { transform: translateY(0); }
.wa-fab:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.wa-fab__icon { width: 1.875rem; height: 1.875rem; stroke-width: 1.6; }
.wa-fab__label {
  position: absolute; right: calc(100% + var(--space-sm)); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius);
  background: var(--color-ink); color: var(--color-band-ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .wa-fab:hover .wa-fab__label { opacity: 1; transform: none; } }
.wa-fab:focus-visible .wa-fab__label { opacity: 1; transform: none; }
html.menu-open .wa-fab { display: none; }
@media print { .wa-fab { display: none; } html { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }  /* keep the navy bands, or their white text prints pale grey on white */

/* ---------- footer ---------- */
.foot { background: var(--color-band); color: var(--color-band-ink); }
.foot__inner { max-width: var(--page-max); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-lg); }
.foot__line { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-s); line-height: 1.04; letter-spacing: -0.02em; max-width: 18ch; overflow-wrap: anywhere; text-wrap: balance; }
.foot__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
@media (min-width: 60rem) { .foot__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2xl); } .foot__top .foot__ctas { margin-top: 0; } }
.foot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.foot__top + .foot__grid { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-band-rule); }
.foot__brand { grid-column: 1 / -1; display: grid; gap: var(--space-xs); justify-items: start; }
.foot__brand img { width: 80px; height: 80px; }
.foot__brand p { color: var(--color-band-muted); max-width: 32ch; }
.foot__tag { font-weight: 600; color: var(--color-band-ink); }
.foot__brand .foot__tag { color: var(--color-band-ink); }
.foot__social { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.foot__social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: var(--rule-hair) solid var(--color-band-rule); color: var(--color-band-ink);
}
.foot__social a:hover { background: var(--color-band-2); }
.foot__social .icon { width: 1.25rem; height: 1.25rem; }
.foot__head { color: var(--color-band-ink); font-weight: 600; margin-bottom: var(--space-sm); }
.foot__col li + li { margin-top: var(--space-xs); }
.foot__col a { display: inline-block; padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); color: var(--color-band-muted); text-decoration: none; }
.foot__col a:hover { color: var(--color-band-ink); text-decoration: underline; }
.foot__col address { display: grid; gap: var(--space-xs); }
.foot__col address a, .foot__col address span { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-band-muted); }
.foot__col address .icon { width: 1.125rem; height: 1.125rem; color: var(--color-accent); }
.foot__legal { margin-top: var(--space-xl); padding-top: var(--space-md); padding-right: 4rem; border-top: var(--rule-hair) solid var(--color-band-rule); color: var(--color-band-muted); font-size: var(--text-sm); }  /* right padding: clear of the floating WhatsApp button */
@media (max-width: 25.99rem) { .foot__grid { grid-template-columns: 1fr; } }
/* phones: the essentials only; the services list repeats the menu and the paragraph repeats the tagline */
@media (max-width: 39.99rem) {
  .foot__col--services, .foot__about, .foot__col .foot__wa { display: none; }  /* WhatsApp is already the button above and the floating one */
  .foot__ctas .btn { flex: 1 1 10rem; }
  .foot__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .foot__top + .foot__grid { margin-top: var(--space-xl); padding-top: var(--space-lg); }
  .foot__brand { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-md); }
  .foot__brand img { width: 56px; height: 56px; }
  .foot__social { grid-column: 1 / -1; margin-top: 0; }
  .foot__col--quick ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
  .foot__col--quick li + li { margin-top: 0; }
}
@media (min-width: 60rem) {
  .foot__inner { padding-top: var(--space-3xl); }
  .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}
@media (min-width: 75rem) {
  .foot__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2.5fr) minmax(0, 3.5fr); }  /* services needs room for "Supply chain support" on one line */
  .foot__brand { grid-column: auto; }
}

/* ---------- shapes ----------
   One language taken from the hero's slanted orange edge. Navy bands meet the page on seams that rise to the
   right; tint sections are panels that run off one side and end in a cut corner, alternating sides; cards
   and photos carry one cut corner like a cargo tag. Flat colours, clip-path only. A clipped edge can't carry
   a border, so clipped cards draw their hairline with --outline-rule on the parent instead. */

/* bands that open a page: slanted bottom, an orange segment riding the right end of the seam */
.hero, .page-head, .route-head, .svc-hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.page-head, .route-head { position: relative; }
/* the seam's room sits on the inner box, so each band keeps its plain padding token */
.hero__inner, .page-head > .wrap, .route-head > .wrap, .svc-hero > .wrap { padding-bottom: var(--slant); }
.page-head--light { border-bottom: 0; }
.svc-hero { background: var(--color-paper-2); border-bottom: 0; }
.page-head.band::after, .route-head.band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--slant) + var(--stripe)); background: var(--color-accent); pointer-events: none;
  clip-path: polygon(68% calc(var(--slant) * 0.32), 100% 0, 100% calc(var(--stripe) + 2px), 68% calc(var(--slant) * 0.32 + var(--stripe) + 2px));  /* 2px past the seam, so the band's own edge trims it */
}

/* navy bands mid-page: a parallelogram, an orange segment riding the left end of the top seam */
.dest, .why { position: relative; padding-block: calc(var(--space-3xl) + var(--slant)); clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.foot { position: relative; padding-top: var(--slant); clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
.dest::after, .why::after, .foot::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--slant) + var(--stripe)); background: var(--color-accent); pointer-events: none;
  clip-path: polygon(0 calc(var(--slant) - 2px), 32% calc(var(--slant) * 0.68 - 2px), 32% calc(var(--slant) * 0.68 + var(--stripe)), 0 calc(var(--slant) + var(--stripe)));
}

.why::after { clip-path: polygon(68% calc(var(--slant) * 0.32 - 2px), 100% -2px, 100% var(--stripe), 68% calc(var(--slant) * 0.32 + var(--stripe))); }  /* right end, so the home seams don't repeat */

/* tint sections: a panel that runs off one side of the screen and stops short of the other in a cut corner */
.section--tint {
  position: relative; isolation: isolate; background: none;
  --panel-gap: max(calc(var(--page-gutter) / 2), calc((100% - var(--page-max)) / 2));
}
.section--tint::before { content: ""; position: absolute; z-index: -1; inset: 0 var(--panel-gap) 0 0; background: var(--color-paper-2); clip-path: var(--tag-lg); }
.section--tint:nth-child(even of .section--tint)::before { inset: 0 0 0 var(--panel-gap); clip-path: polygon(var(--cut-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-lg)); }
@media (max-width: 39.99rem) { .section--tint { --panel-gap: 0px; } }
/* a panel's flat edge never meets a slanted seam directly: paper between them */
:is(.dest, .why, .page-head, .route-head, .svc-hero) + .section--tint { margin-top: var(--space-xl); }
.section--tint:has(+ :is(.dest, .why)), main > .section--tint:last-child { margin-bottom: var(--space-xl); }

/* cargo-tag corners on cards, frames and photos */
.svc--ask, .why__card, .dest__card, .map__frame, .next__aside, .about__ask, .story__img { clip-path: var(--tag); }
.srow__media, .story__img--main, .svc-hero__media img { clip-path: var(--tag-lg); }  /* big photos need the big cut, or it reads as a chip */
.svc-hero--right .svc-hero__media::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%); }
.svc-hero--left .svc-hero__media::before { clip-path: polygon(var(--cut-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-lg)); }
.why__card, .dest__card, .map__frame { border: 0; }
.quick__card { clip-path: var(--tag-lg); border: 0; box-shadow: none; }
.quick { filter: drop-shadow(0 16px 20px var(--color-shadow-card)); }  /* one shadow: a hairline chain over the whole card made scrolling janky */
.svc:not(.svc--ask) > a { clip-path: var(--tag); }
.svc:not(.svc--ask) > a:focus-visible { outline-offset: -3px; }  /* inside the clip, or the cut corner hides the ring */
/* the clip removes the border at the cut corner; this 1px line puts it back (a filter outline here cost scrolling) */
.svc:not(.svc--ask) { position: relative; }
.svc:not(.svc--ask)::after { content: ""; position: absolute; top: 0; left: calc(100% - var(--cut)); width: calc(var(--cut) * 1.4142); height: var(--rule-hair); background: var(--color-rule); transform-origin: 0 0; transform: rotate(45deg); pointer-events: none; }
.svc:not(.svc--ask) > a:hover { border-color: var(--color-ink); }
.svc:not(.svc--ask):hover::after { background: var(--color-ink); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* phone and tablet only: the vertical rules of the route strip and the air-or-sea axis */
@media (max-width: 59.99rem) {
  .strip__mid { margin-left: calc(0.75rem - 1px); padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); border-left: 2px dashed var(--color-accent); }
  .modes__list { margin-left: var(--space-2xs); padding: var(--space-md) 0 var(--space-md) var(--space-lg); border-left: 2px solid var(--color-ink); }
}