/* =============================================================
   Trelane — freight forwarder, one page.

   Read it in this order:
     1  tokens            colours, type scale, spacing
     2  base              reset, page, headings, links
     3  parts             buttons, reveals, helpers
     4  header            ticker + navigation
     5  hero              the dotted globe and the dive
     6  intro             the promise and the counters
     7  services          the pinned loading sequence + the rail
     8  milestones        the road and the three promises
     9  why               the dusk sky, the ship, five reasons
    10  testimonials
    11  partners
    12  insights
    13  faq
    14  cta
    15  footer
    16  breakpoints       991 / 767 / 479
    17  reduced motion

   Every size lives in the token block. To make the headings bigger,
   change --h2 once — no heading carries its own media query.
   ============================================================= */


/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */
:root {
  /* ink and paper */
  --ink: #111111;
  --paper: #ffffff;
  --surface: #f4f4f4;

  /* brand accent, three steps.
     Change one and you must change the three: the mid step is the
     only one that passes on white, the light step the only one that
     passes on the dark panels and on photographs. */
  --brand: #3a00cc;        /* 13.0:1 on white  */
  --brand-deep: #2a0099;   /* hover, 16.0:1 on white */
  --brand-lift: #8a6bff;   /* on #111, 6.4:1 */
  --signal: #ff8a00;       /* globe pins and arcs, decorative only */

  /* ink at rest */
  --ink-sub: rgb(17 17 17 / .88);
  --ink-soft: rgb(17 17 17 / .72);
  --ink-note: rgb(17 17 17 / .4);
  --ink-mute: rgb(17 17 17 / .16);
  --ink-faint: rgb(17 17 17 / .08);
  --line: rgb(17 17 17 / .1);
  --line-strong: rgb(17 17 17 / .2);

  /* paper on dark */
  --paper-sub: rgb(255 255 255 / .7);
  --paper-soft: rgb(255 255 255 / .6);
  --paper-note: rgb(255 255 255 / .38);
  --paper-line: rgb(255 255 255 / .14);

  /* type */
  --font-display: 'Trelane Display', 'Arial Black', system-ui, sans-serif;
  --font-text: 'Trelane Text', system-ui, -apple-system, sans-serif;
  --font-mono: 'Trelane Mono', ui-monospace, 'SFMono-Regular', monospace;

  --h-hero: 5.556vw;                 /* 80px at 1440, 111px at 2000 — fluid, no cap */
  --h-hero-lh: 1.05;
  --h1: min(5.556vw, 5rem);          /* 80px  */
  --h2: min(4.167vw, 3.75rem);       /* 60px  */
  --h3: 1.5rem;                      /* 24px  */
  --h4: 1.25rem;                     /* 20px  */
  --ghost: 24.4vw;                   /* the watermark word behind the truck */

  --lead: 1.4583rem;                 /* 23.3px */
  --text: 1rem;                      /* the source sits at 13.3px — see README */
  --small: 0.875rem;
  --label: 0.8125rem;

  /* rhythm */
  --gutter: 2rem;
  --section-y: 7.5rem;
  --radius: 99em;
  --shell: 90rem;

  /* motion — the source drives GSAP, these are the same curves */
  --ease-out3: cubic-bezier(.215, .61, .355, 1);     /* power3.out */
  --ease-in-out1: cubic-bezier(.45, 0, .55, 1);      /* power1.inOut */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);          /* expo.out */
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);       /* back.out(1.3) */
}

/* The sweep that wipes across a line of text. Registering it lets the
   gradient position animate — a plain custom property cannot. */
@property --sweep {
  syntax: '<number>';
  inherits: false;
  initial-value: 100;
}


/* -------------------------------------------------------------
   2. Base
   ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* clip, not hidden: hidden would make the root a scroll container
     and every sticky scene below would stop sticking. */
  overflow-x: clip;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.nav-open { overflow: hidden; }
body.nav-open .ticker { opacity: 0; pointer-events: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
img, canvas, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease-out3), opacity .25s var(--ease-out3);
}

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.hero :focus-visible,
.svc-panel :focus-visible,
.ins :focus-visible,
.cta :focus-visible { outline-color: var(--brand-lift); }

.skip-link {
  position: fixed;
  z-index: 100;
  top: .5rem;
  left: .5rem;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--label);
  text-transform: uppercase;
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform .25s var(--ease-out3);
}
.skip-link:focus { transform: none; }

::selection { background: var(--brand); color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* -------------------------------------------------------------
   3. Parts
   ------------------------------------------------------------- */

/* -- buttons ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--ease-out3), color .3s var(--ease-out3),
              border-color .3s var(--ease-out3), transform .3s var(--ease-out3);
}
.btn:hover { transform: translateY(-2px); }

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--brand); }

.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--brand); color: var(--paper); }

.btn-ghost { border-color: var(--paper-line); color: var(--paper); }
.btn-ghost:hover { background: rgb(255 255 255 / .12); }

.btn-outline { border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.btn-light-outline { border-color: var(--paper-line); color: var(--paper); }
.btn-light-outline:hover { background: var(--paper); color: var(--ink); }

.link-underline {
  font-family: var(--font-mono);
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid currentcolor;
  padding-bottom: .15em;
}
.link-underline:hover { color: var(--brand); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-note);
}

/* -- reveals -------------------------------------------------
   Everything hides behind .js: with no script the page is whole.
   ------------------------------------------------------------ */
.js [data-reveal='rise'] {
  opacity: 0;
  transform: translateY(2rem);
}
.js [data-reveal='rise'].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-out3), transform 1s var(--ease-out3);
  transition-delay: var(--delay, 0s);
}

/* A line of text lit from the left, the brand colour riding the edge.
   Same gradient the source animates through GSAP. */
.js [data-reveal='sweep'] .line,
.js [data-reveal='sweep'] p {
  --sweep: 30;
  color: transparent;
  background-image: linear-gradient(90deg,
      var(--sweep-final, currentcolor) 0%,
      var(--sweep-final, currentcolor) 30%,
      var(--sweep-brand, var(--brand)) 40%,
      transparent 50%,
      transparent 100%);
  background-size: 350% 100%;
  background-position-x: calc((100 - var(--sweep)) * 1%);
  background-clip: text;
  -webkit-background-clip: text;
}
.js [data-reveal='sweep'].is-in .line,
.js [data-reveal='sweep'].is-in p {
  --sweep: 100;
  transition: --sweep 1.2s var(--ease-in-out1);
  transition-delay: var(--delay, 0s);
}
/* The gradient needs an opaque colour to land on; the element keeps
   its own colour in this variable so both light and dark work. */
[data-reveal='sweep'] { --sweep-final: var(--ink); }
.on-dark [data-reveal='sweep'],
.svc-panel [data-reveal='sweep'],
.ins [data-reveal='sweep'],
.cta [data-reveal='sweep'] { --sweep-final: var(--paper); --sweep-brand: var(--brand-lift); }
[data-reveal='sweep'] .muted { --sweep-final: var(--ink-note); }
.svc-panel [data-reveal='sweep'] .muted,
.ins [data-reveal='sweep'] .muted,
.cta [data-reveal='sweep'] .muted { --sweep-final: var(--paper-note); }

.js [data-reveal='frame'] { clip-path: inset(20% round var(--frame-radius, 0px)); }
.js [data-reveal='frame'] img { transform: scale(1.4); opacity: 0; }
.js [data-reveal='frame'].is-in {
  clip-path: inset(0% round var(--frame-radius, 0px));
  transition: clip-path 2s var(--ease-expo);
}
.js [data-reveal='frame'].is-in img {
  transform: none;
  opacity: 1;
  transition: transform 2s var(--ease-expo), opacity 2s var(--ease-expo);
}

.line { display: block; }
.muted { color: var(--ink-note); }

figure { margin: 0; overflow: hidden; }
figure img { width: 100%; height: 100%; object-fit: cover; }


/* -------------------------------------------------------------
   4. Header
   ------------------------------------------------------------- */
.ticker {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 2rem;
  padding-right: var(--gutter);
  background: var(--ink);
  color: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow: hidden;
}
/* The rail has to clip on its own: the marquee runs wider than the bar
   and would otherwise slide out under the links on the right. */
.ticker-rail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: slide-left 44s linear infinite;
}
.ticker-list {
  display: flex;
  flex: none;
  gap: 3rem;
  padding-left: var(--gutter);
  white-space: nowrap;
}
.ticker-tag { color: var(--paper); }
.ticker-tools {
  display: flex;
  flex: none;
  gap: 1.5rem;
  /* opaque, and with a fade in front: the marquee slides underneath */
  padding-left: 3rem;
  background: linear-gradient(90deg, transparent, var(--ink) 2.5rem);
  color: var(--paper-note);
}
.ticker-tools a:hover { color: var(--paper); }

@keyframes slide-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.site-head {
  position: absolute;
  z-index: 20;
  top: 2rem;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gutter);
  padding: 2rem var(--gutter);
  color: var(--paper);
}

.brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex: none;
}
.brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: square;
}
.brand-word {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-nav { display: flex; justify-content: center; min-width: 0; }
.nav-toggle { display: none; }
.nav-list {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: .25rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: rgb(5 5 10 / .48);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-list li + li { border-left: 1px solid var(--paper-line); }
.nav-list a {
  display: block;
  padding: .6rem clamp(.7rem, 1vw, 1rem);
  border-radius: var(--radius);
  color: var(--paper-sub);
}
.nav-list a:hover { background: rgb(255 255 255 / .08); color: var(--paper); }

.site-head-cta { flex: none; }


/* -------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------- */
.hero {
  position: relative;
  background: #000;
  color: var(--paper);
}

.hero-sky {
  position: relative;
  min-height: 100svh;
  padding: 8.5rem var(--gutter) 4.5rem;
  display: flex;
  align-items: flex-end;
  /* deep space, a warm dust cloud behind the globe, and a star field.
     The stars are four grids of one-pixel dots at different steps: no image,
     no request, and they never repeat visibly. */
  background-color: #000;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / .85) .6px, transparent .8px),
    radial-gradient(circle, rgb(255 255 255 / .55) .6px, transparent .8px),
    radial-gradient(circle, rgb(255 255 255 / .38) .5px, transparent .7px),
    radial-gradient(circle, rgb(255 255 255 / .28) .5px, transparent .7px),
    radial-gradient(58% 44% at 70% 20%, rgb(120 60 20 / .32), transparent 70%),
    radial-gradient(46% 40% at 30% 62%, rgb(40 30 70 / .30), transparent 72%),
    radial-gradient(120% 90% at 78% 34%, #0b0e22 0%, #04050d 46%, #000 80%);
  background-size:
    137px 137px, 211px 211px, 83px 83px, 61px 61px,
    100% 100%, 100% 100%, 100% 100%;
  background-position:
    0 0, 47px 83px, 23px 31px, 71px 13px,
    0 0, 0 0, 0 0;
  overflow: hidden;
}

/* Keep the entire globe inside the hero. On wide screens it sits in a right
   gutter; on tall or narrow screens its diameter is capped by the viewport
   width so neither the atmosphere nor the country chips are clipped. */
.hero-stage {
  position: absolute;
  top: 50%;
  bottom: auto;
  right: clamp(3.5rem, 5vw, 7rem);
  left: auto;
  width: min(calc(100vw - var(--gutter) - var(--gutter)), 100svh, 68vw);
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
}
/* The atmosphere is painted inside the canvas. A blurred div on top of it
   was a 40px gaussian composited on every frame — and the same halo twice. */
.hero-globe {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(.92);
}
.js .hero-globe { transition: opacity 1s var(--ease-back), transform 1s var(--ease-back); }
.hero.is-ready .hero-globe { opacity: 1; transform: none; }

/* the country chips are placed by script, one per visible pin */
.hero-labels { position: absolute; inset: 0; }
.hero-labels li {
  position: absolute;
  padding: .3rem .55rem;
  background: rgb(10 10 14 / .82);
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-50% - 8px));
  filter: blur(4px);
}
.js .hero-labels li {
  transition: opacity .5s var(--ease-out3), transform .5s var(--ease-out3), filter .5s var(--ease-out3);
  transition-delay: calc(var(--i, 0) * 50ms);
}
.hero.is-ready .hero-labels li.is-on {
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
}

/* The text column starts a quarter of the way in, under the navigation,
   and is measured in percent so it holds that line at any width. */
.hero-text {
  position: relative;
  z-index: 2;
  margin-left: 26.5%;
  max-width: 42%;
}
.hero-label {
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: max(1.0417rem, 1.1vw);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero-title {
  font-size: var(--h-hero);
  line-height: var(--h-hero-lh);
  margin-bottom: 2rem;
}
.hero-desc {
  max-width: 24rem;
  margin-bottom: 2.75rem;
  color: var(--paper-sub);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -- entrance -------------------------------------------------
   The hero must not wait for a scroll to show itself. Lines climb
   out of their mask; everything else fades up.
   ------------------------------------------------------------- */
.mask {
  display: block;
  overflow: hidden;
  /* the descender of a J would be clipped without this pair */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.mask > span { display: block; }

.js .hero [data-enter] .mask > span { transform: translateY(105%); }
.js .hero.is-ready [data-enter] .mask > span {
  transform: none;
  transition: transform 1s var(--ease-out3);
  transition-delay: calc(var(--enter-delay, .25s) + (var(--n, 1) - 1) * .1s + var(--l, 0) * .09s);
}
.hero-title .mask:nth-child(2) { --l: 1; }
.hero-title .mask:nth-child(3) { --l: 2; }

.js [data-enter]:not(:has(.mask)) { opacity: 0; transform: translateY(1.75rem); }
.js .hero.is-ready [data-enter]:not(:has(.mask)) {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease-out3), transform .9s var(--ease-out3);
  transition-delay: calc(var(--enter-delay, .25s) + (var(--n, 1) - 1) * .12s);
}
[data-enter='1'] { --n: 1; }
[data-enter='2'] { --n: 2; }
[data-enter='3'] { --n: 3; }
[data-enter='4'] { --n: 4; }

/* the dive: night sky to daylight, the page opening underneath */
.hero-dive {
  height: 150vh;
  background: linear-gradient(180deg,
      #000 0%, #050a20 16%, #0a1c6b 38%, #1f56c8 58%, #7fb2ec 78%, #d8e6f7 90%, var(--paper) 100%);
}


/* -------------------------------------------------------------
   6. Intro
   ------------------------------------------------------------- */
.intro {
  padding: var(--section-y) var(--gutter);
  max-width: var(--shell);
  margin-inline: auto;
}
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
}
.intro-figure {
  width: 21.35rem;
  aspect-ratio: 700 / 444;
  margin-bottom: 5rem;
}
.intro-title {
  font-size: var(--h2);
  line-height: 1.05;
}
.intro-lead {
  font-size: var(--lead);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 2.5rem;
}
.intro-note {
  margin: 6rem 0 .5rem;
  font-weight: 500;
}
.stats { border-top: 1px solid var(--line); }
.stat {
  padding: 3rem 0;
  border-bottom: 1px solid var(--line);
}
.stat-value {
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat dd { margin: .75rem 0 0; font-size: var(--h3); font-weight: 500; }


/* -------------------------------------------------------------
   7. Services — the pinned loading sequence
   -------------------------------------------------------------
   The track is only tall when the script can drive it. Without
   JavaScript the stage is static and every scene reads in place.
   --p is written by main.js: 0 at the top of the track, 1 at the
   bottom. Each scene maps its own slice of it.
   ------------------------------------------------------------- */
.svc { background: var(--paper); }

.svc-track { position: relative; }
.js .svc-track { height: 460vh; }

.js .svc-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.svc-stage {
  --p: 0;
  --panel-head: 0;
  --panel-items: 0;
  --panel-action: 0;
  position: relative;
}

.svc-speed {
  position: absolute;
  z-index: 4;
  top: 4.5rem;
  left: var(--gutter);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
}
.js .svc-stage[data-act='drive'] .svc-speed,
.js .svc-stage[data-act='rail'] .svc-speed { opacity: 1; transition: opacity .4s var(--ease-out3); }

/* -- scene A: the yard ----------------------------------------
   Everything is placed in percentages of the stage, so the crane,
   the stack and the container the spreader picks up keep their
   relative positions at any window size.
   ------------------------------------------------------------- */
.svc-yard { position: absolute; inset: 0; }
.js .svc-stage[data-act='drive'] .svc-yard,
.js .svc-stage[data-act='rail'] .svc-yard {
  opacity: 0;
  transition: opacity .3s var(--ease-out3);
}

/* The frame of reference. Its ratio is the crane image's, so percentages
   inside it never depend on the shape of the window. The svh cap keeps the
   machine inside short viewports.
   The stack sticks out to 147.83% of this box, so the box carries a right
   margin of the overhang and the flex centring lands the whole yard, crane
   and stack together, in the middle of the stage. */
.svc-yard {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.svc-ground {
  --box: min(46%, 72svh);
  position: relative;
  width: var(--box);
  margin: 0 calc(var(--box) * 0.4783) 9svh 0;
  aspect-ratio: 1416 / 1111;
}

.svc-rig {
  position: absolute;
  inset: 0;
  transform: translateX(calc((var(--crane-in, 0) - 1) * 135%));
}
.svc-crane {
  position: absolute;
  inset: 0;
  width: 100%;
  /* mirrored: the render faces left, and the boom has to reach the stack */
  transform: scaleX(-1);
}

/* Measured on crane-clean.webp, not guessed. Mirrored, the spreader centre sits at
   88.04% of the box across and its underside at 34.75% down. The load hangs
   there, then travels 28.19 points right and 2.63 points down to rest on the
   stack — the stack's own top, since both are one container tall. */
.svc-box-lifted {
  position: absolute;
  z-index: 1;
  width: 19.413%;
  left: calc(78.3335% + var(--lift-x, 0) * 0.28188%);
  top: calc(34.75% + var(--lift-y, 0) * 1%);
  transform: rotate(calc(var(--lift-r, 0) * 1deg));
  transform-origin: 50% 0;
}

.svc-stack {
  position: absolute;
  left: 106.5217%;
  bottom: 0;
  width: 41.3043%;
  aspect-ratio: 41.3043 / 31.3094;
}
.svc-box {
  position: absolute;
  bottom: 0;
  width: 47%;
}
.svc-box-left { left: 0; }
.svc-box-right { right: 0; }

/* -- scene B: the loaded truck crosses ----------------------- */
.svc-drive {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}
.js .svc-stage[data-act='drive'] .svc-drive { opacity: 1; }
.svc-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  z-index: -1;
  font-family: var(--font-display);
  font-size: var(--ghost);
  font-weight: 700;
  line-height: .8;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-faint);
  transform: translate(calc(-50% - (50% - var(--drive, 0) * 100%)), -50%);
}
.svc-truck {
  position: relative;
  width: 70%;
  max-width: 62rem;
  margin-inline: auto;
  /* Cab on the right, so it drives left to right, forwards. The travel is
     half a screen plus half a truck on each side: it enters and leaves
     completely at any window width, phone included. */
  transform: translateX(calc((var(--drive, 0) * 2 - 1) * (50vw + 50%)));
}

/* -- scene C: the dark panel and the rail -------------------- */
.svc-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  padding: 5rem var(--gutter) 3rem;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  transform: translateY(calc((1 - var(--panel, 0)) * 100%));
  border-radius: calc((1 - var(--panel, 0)) * 5rem) calc((1 - var(--panel, 0)) * 5rem) 0 0;
}
.js .svc-panel { will-change: transform; }
.svc-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--panel, 0) * 100%);
  height: 2px;
  background: linear-gradient(90deg, var(--brand-lift), var(--signal));
  box-shadow: 0 0 1.5rem rgb(138 107 255 / .45);
}
.svc-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: end;
  max-width: var(--shell);
  margin-inline: auto;
  width: 100%;
}
.js .svc-head {
  opacity: var(--panel-head);
  transform: translateY(calc((1 - var(--panel-head)) * 2.5rem));
}
.js .svc-panel [data-reveal='sweep'] .line,
.js .svc-panel [data-reveal='sweep'] p {
  /* This reveal belongs to a scrubbed scene. Tying it to scroll avoids a
     time-based flash of invisible text when someone scrolls quickly. */
  --sweep: calc(30 + var(--panel-head) * 70);
  transition: none;
}
.svc-title { font-size: var(--h2); }
.svc-intro { color: var(--paper-sub); font-size: 1.125rem; font-weight: 500; }

.svc-rail {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2));
}
.svc-rail::-webkit-scrollbar { display: none; }
.svc-item {
  --i: 0;
  --item-in: clamp(0, calc(var(--panel-items) * 8 - var(--i)), 1);
  flex: none;
  width: min(23rem, 74vw);
  padding: 0 2.5rem;
  scroll-snap-align: start;
  border-left: 1px solid var(--paper-line);
}
.svc-item:nth-child(2) { --i: 1; }
.svc-item:nth-child(3) { --i: 2; }
.svc-item:nth-child(4) { --i: 3; }
.svc-item:nth-child(5) { --i: 4; }
.svc-item:nth-child(6) { --i: 5; }
.js .svc-item {
  opacity: var(--item-in);
  transform: translateY(calc((1 - var(--item-in)) * 3.5rem));
}
.svc-item:first-child { border-left: 0; padding-left: 0; }
.svc-item-ic {
  display: block;
  width: 3.3rem;
  height: 3.3rem;
  margin-bottom: clamp(2.5rem, 5vh, 4.5rem);
}
.js .svc-item-ic {
  transform: scale(calc(.72 + var(--item-in) * .28)) rotate(calc((1 - var(--item-in)) * -12deg));
  transform-origin: 0 100%;
}
.svc-item-ic svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.25;
  stroke-linecap: square;
}
.svc-item h3 { font-size: var(--h3); margin-bottom: 1rem; }
.svc-item p { color: var(--paper-sub); font-size: var(--text); }

.svc-action { display: flex; justify-content: center; }
.js .svc-action {
  opacity: var(--panel-action);
  transform: translateY(calc((1 - var(--panel-action)) * 1.5rem));
}

@media (min-width: 1700px) {
  .svc-rail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: hidden;
  }
  .svc-item { width: auto; padding-inline: clamp(1.4rem, 1.7vw, 2.2rem); }
  .svc-item:first-child { padding-left: 0; }
  .svc-item:last-child { padding-right: 0; }
}


/* -------------------------------------------------------------
   8. Milestones
   ------------------------------------------------------------- */
.mile { background: var(--paper); }
.mile-track { position: relative; }
.js .mile-track { height: 300vh; }
.js .mile-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.mile-stage {
  --p: 0;
  --mile-exit: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
  padding: 6rem var(--gutter);
}
.mile-stage::after {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  /* The road does not stop on a hard edge: it dissolves into the white water
     that receives the bow in the following section. */
  background: linear-gradient(180deg,
      transparent 38%,
      rgb(255 255 255 / .18) 56%,
      rgb(255 255 255 / .78) 82%,
      var(--paper) 100%);
  opacity: var(--mile-exit);
}

.mile-road {
  position: absolute;
  top: 0;
  left: 50%;
  width: 14rem;
  height: 100%;
  background: #0c0c0c;
  transform: translateX(-50%) scaleY(var(--road, 1));
  transform-origin: top;
}
.mile-road-lane {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, var(--paper-note) 0 2.5rem, transparent 2.5rem 6rem);
  background-size: 2px 6rem;
  background-position: 50% 0;
  background-repeat: repeat-y;
  opacity: .5;
}
.mile-truck {
  position: absolute;
  left: 50%;
  top: calc(var(--truck, 0) * 1%);
  width: 7.5rem;
  opacity: calc(1 - var(--mile-exit));
  transform: translate(-50%, -50%);
}

.mile-title {
  grid-column: 1;
  font-size: var(--h2);
  align-self: center;
}
.mile-list {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.mile-title,
.mile-list { opacity: calc(1 - var(--mile-exit)); }
.mile-item { max-width: 24rem; }
.mile-ic { display: block; width: 3.3rem; height: 3.3rem; margin-bottom: 1.25rem; }
.mile-ic svg {
  width: 100%; height: 100%;
  fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: square;
}
.mile-item h3 { font-size: var(--h4); margin-bottom: .75rem; }
.mile-item p { color: var(--ink-soft); }


/* -------------------------------------------------------------
   9. Why us
   ------------------------------------------------------------- */
.why {
  position: relative;
  --p: 0;
  padding: var(--section-y) var(--gutter) 55vh;
  background: linear-gradient(180deg,
      var(--paper) 0%,
      #f2f8fb 22%,
      #dcecf4 50%,
      #c9e2ee 70%,
      #e7f3f8 84%,
      var(--paper) 100%);
  overflow: hidden;
}
.why::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24vh;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--paper) 92%);
}
.why-sky { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
/* A white atmospheric veil bridges the road and the sea scene. The ship
   passes underneath it, so its square stern emerges progressively instead
   of appearing as a hard cut at the section boundary. */
.why-sky::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(14rem, 35vh, 30rem);
  pointer-events: none;
  background: linear-gradient(180deg,
      var(--paper) 0%,
      rgb(255 255 255 / .94) 18%,
      rgb(255 255 255 / .58) 52%,
      transparent 100%);
}
.why-cloud {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 72%);
  filter: blur(8px);
}
.why-cloud-1 { top: 12%; left: -14%; width: 62vw; height: 42vw; }
.why-cloud-2 { top: 44%; right: -18%; width: 58vw; height: 40vw; }
.why-cloud-3 { bottom: -8%; left: 18%; width: 74vw; height: 34vw; }
.why-ship {
  --ship-width: 8.5rem;
  --ship-half: 21.52rem;
  position: absolute;
  left: 50%;
  /* At p=0 the top of the ship sits exactly on the section boundary.
     Previously its centre sat at 2%, so half the hull was clipped and looked
     glued underneath the departing truck. */
  top: calc(var(--ship-half) + var(--p) * 100%);
  width: var(--ship-width);
  /* The scene scrolls downwards, so the bow must point downwards too. */
  transform: translate(-50%, -50%) rotate(180deg);
  filter: drop-shadow(0 3rem 4rem rgb(16 69 94 / .24));
}

.why-inner {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin-inline: auto;
}
.why-head { max-width: 34rem; margin-bottom: 8rem; }
.why-head .eyebrow { margin-bottom: 1.5rem; }
.why-title { font-size: var(--h2); }
.why-list { display: flex; flex-direction: column; gap: 88vh; }
.why-item { max-width: 22rem; }
/* alternate sides, as the source does, so the ship threads between */
.why-item:nth-child(odd) { margin-right: auto; text-align: left; }
.why-item:nth-child(even) { margin-left: auto; text-align: right; }
.why-item:last-child { margin-inline: auto; text-align: center; }
.why-item h3 { font-size: var(--h4); margin-bottom: .75rem; }
.why-item p { color: var(--ink-soft); font-weight: 500; }


/* -------------------------------------------------------------
   10. Testimonials
   ------------------------------------------------------------- */
.testi {
  padding: var(--section-y) var(--gutter);
  max-width: var(--shell);
  margin-inline: auto;
}
.testi-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: end;
  margin-bottom: 12rem;
}
.testi-title { font-size: var(--h2); }
.testi-lead { color: var(--ink-soft); max-width: 26rem; }

.testi-item {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 4rem;
  padding: 9rem 0;
  border-top: 1px solid var(--line);
}
.testi-quote { max-width: 34rem; }
.testi-item:last-child { border-bottom: 1px solid var(--line); }
.testi-who img {
  width: 9.85rem;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: 1.25rem;
}
.testi-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--label);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.testi-role { font-size: var(--small); color: var(--ink-soft); font-weight: 500; }
.testi-quote { margin: 0; }
.testi-quote p { font-size: var(--lead); line-height: 1.2; font-weight: 500; }


/* -------------------------------------------------------------
   11. Partners
   ------------------------------------------------------------- */
.partners {
  padding: 0 var(--gutter) var(--section-y);
  max-width: var(--shell);
  margin-inline: auto;
}
.partners-group + .partners-group { margin-top: clamp(2rem, 4vw, 4rem); }
.partners-label {
  display: flex;
  align-items: baseline;
  gap: 3rem;
  padding: 1.5rem 0;
  font-size: var(--small);
  font-weight: 500;
}
.partners-kind {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.partners-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-note);
}
.partners-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  counter-reset: carrier;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.partners-grid--air { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.partners-grid li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 11.5rem;
  padding: clamp(1rem, 2vw, 2rem);
  overflow: hidden;
  isolation: isolate;
  counter-increment: carrier;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  text-align: center;
  transition: background-color .45s var(--ease-expo), color .35s var(--ease-out3);
}
.partners-grid li::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -30% -80% 35%;
  height: 150%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(138 107 255 / .2), transparent 68%);
  opacity: 0;
  transform: scale(.65);
  transition: opacity .5s var(--ease-out3), transform .7s var(--ease-expo);
}
.partners-group--sea .partners-grid li::before {
  background: radial-gradient(circle, rgb(255 138 0 / .17), transparent 68%);
}
.partners-grid li::after {
  content: counter(carrier, decimal-leading-zero);
  position: absolute;
  top: .75rem;
  right: .85rem;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .08em;
  color: var(--ink-note);
  transition: color .3s var(--ease-out3);
}
.partner-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}
.partner-mark {
  width: clamp(2.8rem, 3.5vw, 4rem);
  height: auto;
  flex: none;
  overflow: visible;
  color: var(--ink-soft);
  transition: color .35s var(--ease-out3), transform .6s var(--ease-expo);
}
.partner-name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(.78rem, 1vw, 1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.partner-name--wide { letter-spacing: .12em; }
.partner-name--soft { font-weight: 500; letter-spacing: .07em; }
.partner-name--mono {
  font-family: var(--font-mono);
  font-size: clamp(.7rem, .9vw, .875rem);
  letter-spacing: .08em;
}
.partners-grid li:hover { background: var(--ink); color: var(--paper); }
.partners-grid li:hover::before { opacity: 1; transform: scale(1); }
.partners-grid li:hover::after { color: var(--paper-note); }
.partners-grid li:hover .partner-mark { color: var(--brand-lift); transform: translateY(-.3rem) scale(1.06); }
.partners-group--sea .partners-grid li:hover .partner-mark { color: var(--signal); }


/* -------------------------------------------------------------
   12. Insights
   ------------------------------------------------------------- */
.ins {
  padding: 5rem var(--gutter);
  background: #0a0a0c;
  color: var(--paper);
}
.ins-head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 4rem;
  max-width: var(--shell);
  margin: 0 auto 2.5rem;
}
.ins-title { font-size: var(--h1); }
.ins-aside { color: var(--paper-sub); display: flex; flex-direction: column; gap: 1.5rem; }

/* The stack: every thumbnail in the same box, the live one on top. */
.ins-stack {
  position: relative;
  aspect-ratio: 732 / 490;
  max-width: 15.25rem;
  overflow: hidden;
}
.ins-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s var(--ease-out3);
}
.ins-stack img[data-thumb='1'] { opacity: 1; }
.ins:has(.ins-item:nth-child(1) a:hover) .ins-stack img[data-thumb='1'],
.ins:has(.ins-item:nth-child(2) a:hover) .ins-stack img[data-thumb='2'],
.ins:has(.ins-item:nth-child(3) a:hover) .ins-stack img[data-thumb='3'],
.ins:has(.ins-item:nth-child(4) a:hover) .ins-stack img[data-thumb='4'],
.ins:has(.ins-item:nth-child(5) a:hover) .ins-stack img[data-thumb='5'],
.ins:has(.ins-item:nth-child(6) a:hover) .ins-stack img[data-thumb='6'],
.ins:has(.ins-item:nth-child(1) a:focus-visible) .ins-stack img[data-thumb='1'],
.ins:has(.ins-item:nth-child(2) a:focus-visible) .ins-stack img[data-thumb='2'],
.ins:has(.ins-item:nth-child(3) a:focus-visible) .ins-stack img[data-thumb='3'],
.ins:has(.ins-item:nth-child(4) a:focus-visible) .ins-stack img[data-thumb='4'],
.ins:has(.ins-item:nth-child(5) a:focus-visible) .ins-stack img[data-thumb='5'],
.ins:has(.ins-item:nth-child(6) a:focus-visible) .ins-stack img[data-thumb='6'] { opacity: 1; }
/* the default only wins when nothing else is live */
.ins:has(.ins-item a:hover) .ins-stack img[data-thumb='1'],
.ins:has(.ins-item a:focus-visible) .ins-stack img[data-thumb='1'] { opacity: 0; }
.ins:has(.ins-item:nth-child(1) a:hover) .ins-stack img[data-thumb='1'],
.ins:has(.ins-item:nth-child(1) a:focus-visible) .ins-stack img[data-thumb='1'] { opacity: 1; }

.ins-list {
  max-width: var(--shell);
  margin-inline: auto;
  border-top: 1px solid var(--paper-line);
}
.ins-item { border-bottom: 1px solid var(--paper-line); }
.ins-item a {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 9rem;
  gap: 2rem;
  align-items: baseline;
  padding: 1.25rem 0;
}
.ins-item a:hover { color: var(--brand-lift); }
.ins-date, .ins-tag {
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper-note);
}
.ins-tag { text-align: right; }
.ins-name { font-weight: 500; }


/* -------------------------------------------------------------
   13. F.A.Q
   ------------------------------------------------------------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 4rem;
  padding: var(--section-y) var(--gutter);
  max-width: var(--shell);
  margin-inline: auto;
  counter-reset: faq;
}
.faq-title { font-size: var(--h1); margin-bottom: 1rem; }
.brand-letter { color: var(--brand); }
.faq-head p { color: var(--ink-soft); }

.faq-item {
  counter-increment: faq;
  border-bottom: 1px solid var(--line);
}
.faq-list > .faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink-soft);
  transition: color .3s var(--ease-out3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover,
.faq-item[open] summary { color: var(--ink); }
.faq-num::before {
  content: counter(faq, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--label);
  color: var(--ink-note);
}
.faq-q { font-weight: 500; }
.faq-dot {
  justify-self: end;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--ink-mute);
  transition: background-color .3s var(--ease-out3), transform .3s var(--ease-out3);
}
.faq-item[open] .faq-dot { background: var(--brand); transform: scale(1.6); }
.faq-a {
  padding: 0 2rem 1.75rem 5.5rem;
  color: var(--ink-soft);
  max-width: 46rem;
}
.faq-aside { color: var(--ink-soft); display: flex; flex-direction: column; gap: 1.25rem; }


/* -------------------------------------------------------------
   14. Closing call to action
   ------------------------------------------------------------- */
.cta {
  position: relative;
  padding: 8rem var(--gutter);
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  overflow: hidden;
}
.cta-rings {
  position: absolute;
  inset: -60% -10%;
  background:
    repeating-radial-gradient(circle at 50% 120%,
      transparent 0 7.5rem, rgb(255 255 255 / .05) 7.5rem 7.55rem);
}
.cta-title, .cta-lead, .cta p { position: relative; }
.cta-title { font-size: var(--h2); margin-bottom: 1.5rem; }
.cta-lead {
  max-width: 26rem;
  margin: 0 auto 2.5rem;
  color: var(--paper-sub);
}


/* -------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------- */
.foot {
  padding: clamp(4rem, 7vw, 7rem) var(--gutter) 0;
  background: #f7f7f5;
  overflow: hidden;
}
.foot > * { max-width: var(--shell); margin-inline: auto; }

.foot-top {
  display: grid;
  grid-template-columns: 2fr 7fr 3fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
  padding-bottom: clamp(4rem, 7vw, 7rem);
  border-bottom: 1px solid var(--line-strong);
}
.foot-status { padding-top: .55rem; }
.foot-kicker,
.foot-coord {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.foot-kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .85rem;
  color: var(--ink-sub);
}
.foot-kicker span {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 .3rem rgb(255 138 0 / .13);
}
.foot-coord { color: var(--ink-note); }
.foot-claim {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 5.8vw, 5.9rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.foot-claim span { display: block; }
.foot-claim span:nth-child(2) { margin-left: 7%; }
.foot-claim-accent { color: var(--brand); }
.foot-dispatch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem 1rem;
  min-height: 10rem;
  padding: 1.35rem;
  background: var(--ink);
  color: var(--paper);
  transition: background-color .3s var(--ease-out3), transform .3s var(--ease-out3);
}
.foot-dispatch:hover { background: var(--brand-deep); transform: translateY(-3px); }
.foot-dispatch-label {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.foot-dispatch-arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--paper-line);
  border-radius: 50%;
}
.foot-dispatch-arrow::before {
  content: "";
  width: .62rem;
  height: .62rem;
  border-top: 1px solid currentcolor;
  border-right: 1px solid currentcolor;
  transform: translate(1px, -1px);
}
.foot-dispatch-arrow::after {
  content: "";
  position: absolute;
  width: .82rem;
  height: 1px;
  background: currentcolor;
  transform: rotate(-45deg);
}
.foot-dispatch small {
  grid-column: 1 / -1;
  align-self: end;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper-soft);
}

.foot-cols {
  display: grid;
  grid-template-columns: minmax(7rem, .75fr) minmax(0, 2fr) minmax(15rem, 1fr);
  gap: 0;
  padding: 3rem 0;
  border-bottom: 1px solid var(--line);
}
.foot-col {
  min-width: 0;
  padding-right: clamp(1.5rem, 3vw, 3.5rem);
}
.foot-col + .foot-col {
  padding-left: clamp(1.5rem, 3vw, 3.5rem);
  border-left: 1px solid var(--line);
}
.foot-label {
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-note);
}
.foot-label-gap { margin-top: 2rem; }
.foot-social {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.foot-social svg {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: currentcolor; stroke-width: 1.75; stroke-linecap: round;
}
.foot-social:hover { background: var(--ink); color: var(--paper); }
.foot-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  font-weight: 500;
}
.foot-links a:hover { color: var(--brand); }
.foot-note { font-size: var(--small); font-weight: 500; color: var(--ink-soft); }
.foot-pay {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}
.foot-pay li {
  padding: .3rem .55rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-note);
}

/* two tabs, two marquees, no script */
.foot-tabs {
  padding: 2.5rem 0 3rem;
  border-bottom: 1px solid var(--line-strong);
}
.foot-tabs-head {
  display: inline-flex;
  padding: .25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.foot-tabs-head label {
  padding: .5rem 1.1rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-note);
  cursor: pointer;
  transition: background-color .3s var(--ease-out3), color .3s var(--ease-out3);
}
#foot-tab-industries:checked ~ label[for='foot-tab-industries'],
#foot-tab-services:checked ~ label[for='foot-tab-services'] {
  background: var(--ink);
  color: var(--paper);
}
.foot-tabs-head input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }

.foot-marquee {
  display: none;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.foot-tabs:has(#foot-tab-industries:checked) .foot-marquee[data-tab='industries'],
.foot-tabs:has(#foot-tab-services:checked) .foot-marquee[data-tab='services'] { display: block; }
.foot-marquee-track {
  display: flex;
  width: max-content;
  animation: slide-left 52s linear infinite;
}
.foot-marquee p {
  margin: 0;
  padding-right: 1rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.25vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-note);
}

.foot-contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 4rem);
  margin-top: 3rem;
  background: #ecece8;
}
.foot-contact-lead { grid-column: 1 / 7; }
.foot-contact-title {
  max-width: 36rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 4.5rem);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.foot-figure {
  grid-column: 1 / 5;
  grid-row: 2;
  min-height: 15rem;
  margin: 0;
  overflow: hidden;
}
.foot-figure img { width: 100%; height: 100%; object-fit: cover; }
.foot-contact-office { grid-column: 5 / 9; grid-row: 2; }
.foot-contact-direct { grid-column: 9 / 13; grid-row: 2; }
.foot-address { font-weight: 500; }
.foot-address a:hover { color: var(--brand); }
.foot-map {
  grid-column: 7 / 13;
  grid-row: 1;
  align-self: center;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid var(--line-strong);
}
.foot-map-canvas { width: 100%; height: auto; }
.foot-map-caption {
  margin: .75rem 0 0;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-align: right;
  color: var(--ink-note);
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 2rem 0;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-note);
}
.foot-legal p { margin: 0; }
.foot-legal-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot-legal-links a:hover { color: var(--ink); }
.foot-legal-note { margin-left: auto; }

/* -------------------------------------------------------------
   16. Breakpoints
   ------------------------------------------------------------- */
@media (max-width: 1200px) {
  .nav-list a { padding-inline: .65rem; }
  .foot-contact { gap: 1.75rem; }
  .foot-map { padding-left: 1.75rem; }
}

@media (max-width: 991px) {
  :root {
    --h-hero: 7.2vw;
    --h1: 6.05vw;
    --h2: 6.05vw;
    --lead: 1.3rem;
    --section-y: 5rem;
    --gutter: 1.5rem;
  }

  /* Compact command bar; the links open as a full navigation manifest. */
  .site-head { display: flex; flex-wrap: nowrap; align-items: center; }
  .site-nav { display: block; flex: none; margin-left: auto; }
  .brand { flex: 1; min-width: 0; }
  .brand-word { font-size: 1.25rem; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    padding: .55rem .9rem;
    background: rgb(5 5 10 / .58);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(12px);
  }
  .nav-toggle-dots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    transition: transform .45s var(--ease-expo);
  }
  .nav-toggle-dots i {
    width: 4px;
    height: 4px;
    background: currentcolor;
    transition: border-radius .3s var(--ease-out3), transform .3s var(--ease-out3);
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle-dots { transform: rotate(45deg); }
  .nav-toggle[aria-expanded='true'] .nav-toggle-dots i { border-radius: 50%; }
  .nav-list {
    position: fixed;
    z-index: 1;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 0;
    width: 100%;
    padding: clamp(7rem, 18vh, 10rem) var(--gutter) 4rem;
    border: 0;
    border-radius: 0;
    background-color: #05050a;
    background-image:
      radial-gradient(circle, rgb(255 255 255 / .55) .6px, transparent .8px),
      radial-gradient(circle, rgb(255 255 255 / .25) .5px, transparent .7px),
      radial-gradient(55% 70% at 85% 15%, rgb(80 35 22 / .28), transparent 72%),
      radial-gradient(55% 65% at 10% 90%, rgb(35 28 90 / .25), transparent 75%);
    background-size: 83px 83px, 61px 61px, 100% 100%, 100% 100%;
    font-family: var(--font-display);
    counter-reset: nav-item;
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    transition: clip-path .7s var(--ease-expo), opacity .35s var(--ease-out3), visibility 0s .7s;
  }
  .nav-list::before,
  .nav-list::after {
    position: absolute;
    right: var(--gutter);
    left: var(--gutter);
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--paper-note);
  }
  .nav-list::before { content: "Navigation / APAC desk"; top: 7rem; }
  .nav-list::after { content: "MEL — AKL — HKG — SHA"; bottom: 2rem; text-align: right; }
  .nav-list li {
    counter-increment: nav-item;
    border-top: 1px solid var(--paper-line);
    opacity: 0;
    transform: translateY(1.25rem);
  }
  .nav-list li + li { border-left: 0; }
  .nav-list li:last-child { border-bottom: 1px solid var(--paper-line); }
  .nav-list a {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: clamp(.8rem, 2vh, 1.3rem) 0;
    border-radius: 0;
    font-size: clamp(2.25rem, 7vw, 4.5rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.02em;
    color: var(--paper);
  }
  .nav-list a::before {
    content: "0" counter(nav-item);
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 400;
    letter-spacing: .08em;
    color: var(--paper-note);
  }
  .nav-list a::after {
    content: "→";
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 400;
    color: var(--paper-note);
  }
  .nav-list a:hover { padding-left: .75rem; background: transparent; color: var(--brand-lift); }
  .nav-toggle[aria-expanded='true'] + .nav-list {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0);
    pointer-events: auto;
    transition-delay: 0s;
  }
  .nav-toggle[aria-expanded='true'] + .nav-list li {
    opacity: 1;
    transform: none;
    transition: opacity .6s var(--ease-expo), transform .6s var(--ease-expo);
  }
  .nav-toggle[aria-expanded='true'] + .nav-list li:nth-child(1) { transition-delay: .10s; }
  .nav-toggle[aria-expanded='true'] + .nav-list li:nth-child(2) { transition-delay: .14s; }
  .nav-toggle[aria-expanded='true'] + .nav-list li:nth-child(3) { transition-delay: .18s; }
  .nav-toggle[aria-expanded='true'] + .nav-list li:nth-child(4) { transition-delay: .22s; }
  .nav-toggle[aria-expanded='true'] + .nav-list li:nth-child(5) { transition-delay: .26s; }
  .nav-toggle[aria-expanded='true'] + .nav-list li:nth-child(6) { transition-delay: .30s; }
  .site-head > .brand,
  .site-head .nav-toggle,
  .site-head-cta { position: relative; z-index: 2; }
  .site-head-cta { margin-left: .75rem; }

  .hero-stage {
    top: 12%;
    bottom: auto;
    right: auto;
    left: 50%;
    height: auto;
    width: min(86vw, 78svh);
    transform: translateX(-50%);
  }
  .hero-sky { align-items: flex-end; padding-top: 12rem; }
  .hero-text { margin-left: 0; max-width: none; }

  .intro-grid,
  .svc-head,
  .testi-head,
  .ins-head { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .intro-figure { margin-bottom: 3rem; }
  .intro-note { margin-top: 3rem; }

  .mile-stage { grid-template-columns: minmax(0, 1fr); }
  .mile-title, .mile-list { grid-column: 1; }
  .mile-list { gap: 2rem; }
  .mile-road { left: auto; right: -4rem; transform: scaleY(var(--road, 1)); }

  .why-list { gap: 6rem; }
  .why { padding-bottom: 6rem; }
  .testi-item { padding: 3rem 0; }
  .testi-head { margin-bottom: 4rem; }
  .why-item,
  .why-item:nth-child(even),
  .why-item:last-child { margin: 0; text-align: left; max-width: none; }
  .why-ship { --ship-width: 8rem; --ship-half: 20.26rem; left: 78%; }

  .testi-item { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partners-grid li { min-height: 8rem; }

  .ins-item a { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .ins-tag { text-align: left; }

  .faq { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .faq-item summary { grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; }
  .faq-a { padding-left: 3rem; }

  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(14rem, .65fr); }
  .foot-status { grid-column: 1; grid-row: 1; }
  .foot-claim { grid-column: 1 / -1; grid-row: 2; }
  .foot-dispatch { grid-column: 2; grid-row: 1; min-height: 8rem; }
  .foot-cols { grid-template-columns: minmax(6rem, .55fr) minmax(0, 1.6fr) minmax(13rem, 1fr); }
  .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-legal-note { margin-left: 0; }
}

@media (max-width: 991px) and (max-height: 600px) and (min-width: 560px) {
  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    padding-top: 5.5rem;
    padding-bottom: 2.75rem;
  }
  .nav-list::before { top: 7rem; }
  .nav-list::after { bottom: 1.1rem; }
  .nav-list li:nth-child(even) { border-left: 1px solid var(--paper-line); padding-left: 1.5rem; }
  .nav-list li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--paper-line); }
  .nav-list a { grid-template-columns: 2.25rem minmax(0, 1fr) auto; padding-block: .65rem; font-size: 2rem; }
}

@media (max-width: 767px) {
  :root {
    --h-hero: 12.2vw;
    --h1: 8.15vw;
    --h2: 9.16vw;
    --h3: 1.5rem;
    --lead: 1.2rem;
    --text: .9375rem;
  }

  .ticker-tools { display: none; }
  .partners-label { gap: 1.25rem; }
  .partners-count { display: none; }
  .svc-item { padding: 0 1.5rem; width: min(20rem, 82vw); }
  .svc-panel { gap: 2rem; padding-top: 3rem; }
  .svc-crane { width: 64%; }
  .svc-stack { width: 30%; }
  .svc-truck { width: 92%; }
  .partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-marquee p { font-size: 1.5rem; }
  .foot { padding-top: 4rem; }
  .foot-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-bottom: 4rem; }
  .foot-status,
  .foot-claim,
  .foot-dispatch { grid-column: 1; grid-row: auto; }
  .foot-claim { font-size: clamp(3.25rem, 15vw, 5.25rem); }
  .foot-claim span:nth-child(2) { margin-left: 0; }
  .foot-dispatch { min-height: 7.5rem; }
  .foot-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "company company" "social payments";
    padding: 0;
  }
  .foot-col { padding: 2rem 0; }
  .foot-col + .foot-col { padding-left: 0; border-left: 0; }
  .foot-col-wide { grid-area: company; border-bottom: 1px solid var(--line); }
  .foot-col-social { grid-area: social; padding-right: 1.5rem; }
  .foot-col-payments { grid-area: payments; padding-left: 1.5rem !important; border-left: 1px solid var(--line) !important; }
  .foot-links { gap: .85rem 1.25rem; }
  .foot-tabs { padding-block: 2rem; }
  .foot-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    padding: 1.5rem;
    margin-top: 2rem;
  }
  .foot-contact-lead { grid-column: 1 / -1; grid-row: 1; }
  .foot-map { grid-column: 1 / -1; grid-row: 2; padding: 0 0 1.5rem; border: 0; border-bottom: 1px solid var(--line-strong); }
  .foot-figure { grid-column: 1 / -1; grid-row: 3; width: 100%; min-height: 13rem; }
  .foot-contact-office { grid-column: 1; grid-row: 4; }
  .foot-contact-direct { grid-column: 2; grid-row: 4; }
  .foot-contact .foot-label-gap { margin-top: 1.25rem; }
  .foot-legal { gap: 1rem; }
  .foot-legal-links { gap: .85rem 1.2rem; }
  /* Keep the ship in the mobile story. The preview commonly opens below
     768 px; hiding it here made the whole sea leg look missing. Reserve a
     narrow lane on the right so it can travel without covering the copy. */
  .why-ship {
    --ship-width: 5.5rem;
    --ship-half: 13.93rem;
    display: block;
    left: 88%;
    opacity: .62;
  }
  .why-item,
  .why-item:nth-child(even),
  .why-item:last-child { max-width: calc(100% - 8rem); }
  /* one chip in two: at this width they land on top of each other */
  .hero-labels li:nth-child(2n) { display: none; }
  .hero-labels li { font-size: .5625rem; padding: .2rem .4rem; }
}

@media (max-width: 479px) {
  :root { --gutter: 1.25rem; }
  .why-ship { --ship-width: 4.25rem; --ship-half: 10.76rem; left: 92%; opacity: .52; }
  .why-item,
  .why-item:nth-child(even),
  .why-item:last-child { max-width: calc(100% - 5rem); }
  .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-col-payments { padding-left: 1rem !important; }
  .foot-pay { gap: .35rem; }
  .foot-pay li { padding-inline: .4rem; }
  .site-head-cta { display: none; }
  .nav-list a { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .testi-who img { width: 7rem; }
}


/* -------------------------------------------------------------
   17. Reduced motion — final states at once, delays included.
   A delay is movement spread over time.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal='rise'],
  .js [data-enter] { opacity: 1; transform: none; }
  .js .hero [data-enter] .mask > span { transform: none; }
  .js [data-reveal='sweep'] .line,
  .js [data-reveal='sweep'] p { --sweep: 100; }
  .js [data-reveal='frame'] { clip-path: none; }
  .js [data-reveal='frame'] img { transform: none; opacity: 1; }
  .hero-labels li { opacity: 1; filter: none; transform: translate(-50%, -50%); }
}