@import './pages.css';

/* ========================================================================== 
   A1 Movex Global — Logistics Homepage
   ========================================================================== */

:root {
  --color-navy-950: #06111f;
  --color-navy-900: #0b1f3a;
  --color-navy-800: #12294f;
  --color-navy-700: #1b3663;
  --color-ink: #16233a;
  --color-muted: #5b6b85;
  --color-line: #e4e8f0;
  --color-bg: #f6f8fb;
  --color-white: #ffffff;

  /* Logo-derived brand palette (navy + red), used across the whole page. */
  --color-primary: #17275c;
  --color-primary-dark: #0c1730;
  --color-hero-accent: #e2231a;
  /* Brightened tint of --color-primary — the Shipment Journey section
     (.shipment-journey) is explicitly specced to use brand BLUE (not the
     site's usual red accent) for its route/checkpoint/CTA highlights;
     --color-primary itself is too close to the section's own dark navy
     background to read as an accent there. */
  --color-journey-accent: #4d7ef7;

  --font-heading: "Manrope", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;

  --container-w: 1200px;
  --container-w-wide: 1360px;
  --radius: 14px;
  --shadow-sm: 0 6px 18px rgba(11, 31, 58, 0.08);
  --shadow-md: 0 16px 40px rgba(11, 31, 58, 0.14);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
/* Deliberately NOT `scroll-behavior: smooth` here: the site's scrubbed
   ScrollTriggers (about/services/how-it-works/parallax) read the browser's
   raw scroll position every tick, and native smooth-scrolling eases that
   position out from under them, reading as jitter. Nothing on this site
   relies on CSS-level smooth anchor scrolling — every programmatic scroll
   (back-to-top, testimonial nav, ScrollToPlugin in service-slides.js) passes
   `behavior: 'smooth'` explicitly to its own scrollTo/scrollIntoView call,
   which is unaffected by this property. */

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
h1 { font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
p { margin: 0 0 1em; color: var(--color-muted); }

nav, button, .btn, input, select, textarea { font-family: var(--font-body); }
nav, button, .btn { font-weight: 600; }

.section-label, .eyebrow, .service-category {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.container-wide {
  width: 100%;
  max-width: var(--container-w-wide);
  margin: 0 auto;
  padding: 0 24px;
}

.text-hero-accent { color: var(--color-hero-accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .8em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn--hero {
  background: var(--color-hero-accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(226, 35, 26, .35);
}
.btn--hero:hover { background: #c31d15; transform: translateY(-2px); }
.btn--ghost {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.btn--lg { padding: 1em 2em; font-size: 1rem; }
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* ---------- Preloader ---------- */
html.no-scroll,
html.no-scroll body {
  overflow: hidden;
  height: 100%;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  clip-path: inset(0% 0 0% 0);
}

/* Same glow-blob recipe as .cta-final (see below) — reused here so the
   preloader's atmosphere matches the site's own visual language instead
   of introducing a new one, with a slow drift so it reads as "alive"
   rather than a static wash of navy. */
.preloader__glow {
  position: absolute;
  top: 50%;
  width: 42vw;
  height: 42vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: preloaderGlowDrift 6s ease-in-out infinite;
}
.preloader__glow--left { left: -10vw; background: radial-gradient(circle, #1b3663 0%, rgba(27, 54, 99, 0) 70%); }
.preloader__glow--right { right: -10vw; background: radial-gradient(circle, var(--color-hero-accent) 0%, rgba(226, 35, 26, 0) 70%); animation-delay: -3s; }

.preloader__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.6vw, 36px);
  width: min(94vw, 560px);
  text-align: center;
}

/* Logo mark leads the sequence — the same white rounded tile used in the
   navbar/footer, so the preloader reads as "the brand" before the
   wordmark has even finished assembling. GSAP (preloader.js) animates it
   in on load; the CSS below just sets its pre-animation resting state so
   there's no flash of the fully-revealed mark before JS takes over. */
.preloader__mark-mask {
  overflow: hidden;
  border-radius: 18px;
}
.preloader__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.6vw, 16px) clamp(18px, 4vw, 26px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateY(20px) scale(.92);
}
.preloader__mark img { display: block; height: clamp(40px, 8.5vw, 62px); width: auto; }

.preloader__headline {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 .4em;
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 5.8vw, 2.9rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}
.preloader__mask { overflow: hidden; display: inline-block; line-height: 1.15; }
/* Only opacity is set here — the upward mask offset is applied via
   gsap.set(words, { yPercent: 100 }) in preloader.js instead of plain
   CSS, because GSAP can't reliably resolve a percentage-based transform
   back out of the browser's computed matrix on first tween (percentages
   are lost once resolved to px), which left words fading in place. */
.preloader__word { display: inline-block; opacity: 0; }
.preloader__word--accent { color: var(--color-hero-accent); }

/* A thin "shipment route" between two ports, standing in for a plain
   progress bar. The base track draws in left-to-right, then the red fill
   and tracking dot move across it in step with real load progress (see
   preloader.js), so the motion actually means something. */
.preloader__route {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 360px;
}
.preloader__route-node {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}
.preloader__route-node--end { background: var(--color-hero-accent); box-shadow: 0 0 12px 3px rgba(226, 35, 26, .5); }
.preloader__route-line {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 999px;
}
.preloader__route-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .14);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
}
.preloader__route-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(226, 35, 26, 0), var(--color-hero-accent));
  border-radius: inherit;
}
.preloader__route-marker {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .15), 0 0 18px 3px rgba(226, 35, 26, .65);
  transform: translate(-50%, -50%);
}

.preloader__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: 360px;
  opacity: 0;
}
.preloader__status {
  margin: 0;
  font-size: clamp(.75rem, 2vw, .95rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.preloader__pct {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: clamp(.9rem, 2.4vw, 1.15rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}
.preloader__pct-sign { color: rgba(255, 255, 255, .5); margin-left: 1px; }

@keyframes preloaderGlowDrift {
  0%, 100% { opacity: .26; transform: translateY(-50%) scale(1); }
  50% { opacity: .46; transform: translateY(-50%) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__glow { animation: none; opacity: .3; }
}

/* ---------- Navbar (floating pills) ---------- */
.hero__nav {
  position: fixed;
  top: 24px; left: 0; right: 0;
  z-index: 500;
  transition: transform .35s var(--ease, ease);
}
.hero__nav--hidden {
  transform: translateY(calc(-100% - 24px));
}
.hero__nav-inner {
  max-width: var(--container-w-wide);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hero__nav-logo,
.hero__nav-links,
.hero__nav-actions {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.hero__nav-logo {
  display: flex;
  align-items: center;
  padding: 6px 14px;
}
.hero__nav-logo img {
  height: 58px;
  width: auto;
  object-fit: contain;
}
.hero__nav-links {
  border-radius: 999px;
  padding: 4px 6px;
}
.hero__nav-links ul { display: flex; align-items: center; gap: 4px; }
.hero__nav-links a {
  display: inline-block;
  padding: 10px 16px;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  transition: background .2s var(--ease);
}
.hero__nav-links a:hover { background: var(--color-bg); }
.hero__nav-links a { color: var(--color-primary); }
.hero__nav-links a.is-current { color: var(--color-hero-accent); }

.hero__nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px;
}
.hero__pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.hero__pill-btn:hover { background: var(--color-bg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--color-primary-dark);
  padding-bottom: clamp(20px, 4vh, 40px);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 23, 48, .55) 0%, rgba(12, 23, 48, .35) 30%, rgba(12, 23, 48, .78) 78%, rgba(12, 23, 48, .96) 100%),
    linear-gradient(0deg, var(--color-primary-dark), transparent 55%);
}
.hero__content {
  position: relative;
  z-index: 2;
  padding-top: clamp(64px, 8vh, 96px);
}

.hero__top-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hero__mvp { display: flex; gap: 40px; }
.hero__mvp-word {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
}
.hero__tagline {
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
}

.hero__divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .22);
  margin: clamp(12px, 2.5vh, 20px) 0 clamp(20px, 4.5vh, 48px);
  overflow: hidden;
}
.hero__divider span {
  display: block;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .7);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__headline {
  max-width: 900px;
  margin: 16px 0 0;
}
.hero__headline-line {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.08;
  color: #fff;
  letter-spacing: -.01em;
}

/* ---------- Hero service card ---------- */
.hero__service-card {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  margin: clamp(16px, 4vh, 40px) auto 0;
  margin-right: max(24px, calc((100% - var(--container-w-wide)) / 2 + 24px));
  width: min(390px, calc(100% - 48px));
  background: #fff;
  border-radius: 18px;
  padding: clamp(18px, 3vh, 26px) 28px;
  box-shadow: var(--shadow-md);
}
.hero__service-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.hero__service-count { font-weight: 800; color: var(--color-primary); font-size: 1.1rem; }
.hero__service-total { color: var(--color-muted); font-weight: 600; font-size: .9rem; margin-left: 2px; }
.hero__service-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-hero-accent);
}

.hero__service-progress {
  height: 2px;
  background: var(--color-line);
  margin: 18px 0 20px;
}
.hero__service-progress span {
  display: block;
  height: 100%;
  width: 16.66%;
  background: var(--color-hero-accent);
  transition: width .4s var(--ease);
}

.hero__service-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hero__service-name {
  margin: 0;
  font-size: .98rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-hero-accent);
}
.hero__service-next {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.hero__service-next svg { width: 20px; height: 20px; }
.hero__service-next:hover { transform: scale(1.08); background: var(--color-hero-accent); }

/* ---------- About / Intro ---------- */
.about {
  position: relative;
  z-index: 10;
  overflow: hidden;
  background: var(--color-primary-dark);
  padding-top: 56px;
  /* Inset from the viewport edges so the hero video is visible on the
     sides (still looping underneath) while this panel slides up over
     it — reads as a floating sheet rather than a full-bleed section. */
  margin: 0 clamp(14px, 2.5vw, 40px);
  border-radius: 28px;
}
.about__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
}
.about__topbar-left,
.about__topbar-right {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .68);
}
.about__divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.about__divider span {
  display: block;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .55);
  transform: scaleX(0);
  transform-origin: left;
}

.about__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 96px 24px 84px;
}
.about__heading {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 28px;
}
.about__text {
  color: rgba(255, 255, 255, .9);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 540px;
  margin: 0 auto 40px;
}
.about__cta {
  display: inline-flex;
  align-items: center;
  padding: 1.05em 2.3em;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 4px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.about__cta:hover {
  transform: translateY(-3px);
  background: var(--color-hero-accent);
  color: #fff;
}

.about__bg-text {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Sized off the same vw multiplier as the text itself (with a little
     headroom for ascenders/descenders) so the giant letters never sit
     taller than their own box — previously a fixed height clamp capped
     well below the font-size clamp's max, clipping the top/bottom of
     the text at wider viewports. */
  height: clamp(6.5rem, 17.2vw, 14.5rem);
  display: flex;
  align-items: center;
}
.about__bg-text-track {
  display: inline-flex;
  width: max-content;
  /* Duplicated text (see markup) scrolls continuously so the full
     phrase is always readable over time instead of being centered and
     cropped at both edges. */
  animation: about-marquee 24s linear infinite;
}
.about__bg-text-track span {
  display: inline-block;
  flex: 0 0 auto;
  padding-right: clamp(2.5rem, 6vw, 5rem);
  font-size: clamp(5.5rem, 16vw, 13rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, .09);
}
@keyframes about-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .about__bg-text-track { animation: none; }
}

/* Everything from Stats onward needs to out-rank the pinned hero.
   ScrollTrigger wraps .hero in an auto-generated ".pin-spacer" div —
   that spacer, not .hero itself, is the element actually competing
   with .stats/.services/etc. for stacking once the hero/about pin-
   slide scrolls hero far enough to visually overlap them. Explicit
   z-index values (rather than relying on position:relative + DOM
   order, which left them tied) resolve this unambiguously. */
.pin-spacer {
  position: relative;
  z-index: 1;
}
main > section:not(.hero):not(.about),
.site-footer {
  position: relative;
  z-index: 5;
}

/* ---------- Services: Editorial Mosaic ---------- */
.services {
  background: var(--color-bg);
  padding: 110px 0 120px;
  overflow-x: hidden;
}
.services__topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.services__eyebrow {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-primary);
}
.services__topbar-right {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(12, 23, 48, .48);
}

.services__head { max-width: 1100px; margin-bottom: 44px; }
.services__heading {
  margin: 0 0 20px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 4.4vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--color-primary-dark);
  text-wrap: balance;
}
.services__heading-line { display: block; }
.services__intro {
  margin: 0;
  max-width: 620px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(12, 23, 48, .65);
}

/* ---- Category navigation: pill/card selector ---- */
.services__tabs-wrap { margin-bottom: 44px; }
.services__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 18px;
}
.services__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: none;
  border-radius: 13px;
  background: none;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.services__tab-count {
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(12, 23, 48, .07);
  font-size: .68rem;
  font-weight: 700;
  color: var(--color-muted);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.services__tab:hover,
.services__tab:focus-visible { color: var(--color-primary-dark); background: rgba(12, 23, 48, .06); }
.services__tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
/* Active state is carried by the filled pill background AND the white
   text/badge contrast — never colour alone, so it still reads for anyone
   relying on a colour-blind-safe cue. */
.services__tab.is-active {
  color: #fff;
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}
.services__tab.is-active .services__tab-count { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); }

/* ---- Mosaic panels ---- */
.services__panels { position: relative; }
.services__mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(230px, 1fr));
  gap: 20px;
}
.services__mosaic.is-hidden { display: none; }

.services__compact-grid {
  display: grid;
  gap: 20px;
  grid-column: 2;
  grid-row: 1 / span 2;
}
.services__compact-grid--quad { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.services__compact-grid--stack { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); }

/* ---- Cards: image-led editorial style ---- */
.services__card {
  position: relative;
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 230px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-primary-dark);
  color: #fff;
  text-decoration: none;
}
.services__card--compact { grid-column: auto; grid-row: auto; }

.services__card:hover,
.services__card:focus-within {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.services__card:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.services__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.services__card:hover .services__card-image,
.services__card:focus-within .services__card-image { transform: scale(1.055); }

/* Base gradient: a light wash even at the very top (bright photos — sky,
   glass, daylight — were reading almost fully exposed there, noticeably
   more vivid than the rest of the mosaic), building to medium by
   mid-frame and strong behind the text. */
.services__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 17, 31, .4) 0%,
    rgba(6, 17, 31, .48) 38%,
    rgba(6, 17, 31, .7) 64%,
    rgba(6, 17, 31, .95) 100%);
}
/* A second layer that only fades in on hover/focus, deepening the same
   gradient slightly — avoids needing opacity > 1 on a single layer. */
.services__card-overlay-hover {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 17, 31, 0) 45%, rgba(6, 17, 31, .28) 100%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.services__card:hover .services__card-overlay-hover,
.services__card:focus-within .services__card-overlay-hover { opacity: 1; }

/* Oversized decorative number: thin weight + low opacity reads as a
   watermark rather than real content, so it never competes with the
   title/description sitting in the overlay's dark zone below it. */
.services__card-bignum {
  position: absolute;
  top: -.06em;
  left: -.03em;
  z-index: 1;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  opacity: .28;
  pointer-events: none;
  user-select: none;
  transition: opacity .3s var(--ease);
}
.services__card--featured .services__card-bignum { font-size: clamp(5.5rem, 8vw, 9.5rem); }
.services__card--compact .services__card-bignum { font-size: clamp(3rem, 5.5vw, 5rem); }
.services__card:hover .services__card-bignum,
.services__card:focus-within .services__card-bignum { opacity: .45; }

.services__card-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(226, 35, 26, .16);
  backdrop-filter: blur(6px);
  color: var(--color-hero-accent);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.services__card-arrow svg { width: 16px; height: 16px; }
.services__card:hover .services__card-arrow,
.services__card:focus-within .services__card-arrow {
  transform: translate(4px, -4px);
  background: var(--color-hero-accent);
  color: #fff;
}

.services__card-content {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding: 22px 24px 24px;
}
.services__card-meta {
  display: block;
  margin-bottom: 8px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .78);
}
.services__card-title {
  margin: 0;
  font-weight: 700;
  color: #fff;
  transition: transform .25s var(--ease);
}
.services__card:hover .services__card-title,
.services__card:focus-within .services__card-title { transform: translateY(-7px); }

.services__card--featured .services__card-title {
  font-size: clamp(1.9rem, 2.8vw, 3.2rem);
  line-height: 1.08;
  max-width: 14ch;
}
.services__card--compact .services__card-title {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.services__card-desc {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  max-width: 34ch;
}
.services__card--featured .services__card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Compact description: visible by default (touch/no-hover devices keep
   it that way — see the hover-capable override below), so it's never
   hidden from screen readers or touch users, only visually collapsed
   for a mouse user until they hover or focus the card. */
.services__card--compact .services__card-desc {
  font-size: .86rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .services__card--compact .services__card-desc {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .28s var(--ease), opacity .22s var(--ease), margin-top .28s var(--ease);
  }
  .services__card--compact:hover .services__card-desc,
  .services__card--compact:focus-within .services__card-desc {
    max-height: 4.6em;
    margin-top: 10px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services__card-image,
  .services__card-title,
  .services__card-arrow,
  .services__card-bignum,
  .services__card-overlay-hover {
    transition: none;
  }
  .services__card--compact .services__card-desc { transition: none; }
  .services__card:hover .services__card-image,
  .services__card:focus-within .services__card-image { transform: none; }
  .services__card:hover .services__card-title,
  .services__card:focus-within .services__card-title { transform: none; }
  .services__card:hover .services__card-arrow,
  .services__card:focus-within .services__card-arrow { transform: none; }
}

/* ---------- Advantages / Why Choose Us ---------- */
.advantages { background: #fff; padding: 110px 0; }
.advantages__inner {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}
.advantages__heading {
  position: sticky;
  top: 110px;
  flex: 0 0 clamp(240px, 36%, 420px);
  max-width: clamp(240px, 36%, 420px);
}
.advantages__heading h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--color-primary-dark);
}

.advantages__list {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.advantages__card {
  background: #f3f3f4;
  border-radius: 20px;
  padding: clamp(24px, 3.5vw, 40px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  opacity: 0;
}
.advantages__card-title {
  flex: 0 0 clamp(160px, 34%, 300px);
  max-width: clamp(160px, 34%, 300px);
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-primary-dark);
}
.advantages__card-desc {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--color-muted);
}

/* ---------- Shipment Journey (sticky cinematic scroll-story) ----------
   Structure: .shipment-journey__scroller holds the sticky .stage as its
   first child, followed by 4 empty, aria-hidden .trigger sentinels in
   plain block flow. Because they're siblings sharing ONE parent (not
   separate grid rows), the scroller's own height is naturally the sum of
   the stage's reserved slot + all 4 triggers — giving the sticky stage a
   containing block tall enough to stay pinned for the full step list, on
   every breakpoint, with no JS height math involved. The triggers carry
   no content of their own; they only exist to give IntersectionObserver
   (see how-it-works.js) a scroll-linked target per step. */
.shipment-journey { position: relative; background: var(--color-primary-dark); }

.shipment-journey__scroller { position: relative; }

.shipment-journey__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* All 4 triggers are the same height, including the last: the sticky
   stage's containing block is .shipment-journey__scroller's own height
   (== the stage's reserved slot + the sum of all 4 triggers), so a
   shorter last trigger would make the stage start un-sticking — sliding
   its HUD content up off-screen, top-row first — WHILE step 4 is still
   the active/current one, not after the user is done reading it. */
.shipment-journey__trigger { height: 90vh; }

/* ----- Visual layer: full-bleed crossfading image stack ----- */
.shipment-journey__visual { position: absolute; inset: 0; z-index: 0; background: var(--color-navy-950); }
.shipment-journey__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.shipment-journey__image.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.shipment-journey__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(0deg, rgba(6, 12, 24, .88) 0%, rgba(6, 12, 24, .35) 45%, rgba(6, 12, 24, .55) 100%),
    linear-gradient(180deg, rgba(6, 12, 24, .55) 0%, rgba(6, 12, 24, 0) 22%);
}

/* ----- HUD overlay: eyebrow/counter pinned to top, everything else
   stacked toward the bottom of the viewport ----- */
.shipment-journey__hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 152px clamp(24px, 5vw, 64px) clamp(36px, 5vw, 56px);
}

.shipment-journey__top-row {
  position: absolute;
  top: 136px;
  left: clamp(24px, 5vw, 64px);
  right: clamp(24px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shipment-journey__eyebrow {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, .6);
}
.shipment-journey__counter {
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.shipment-journey__counter-current { color: #fff; }
.shipment-journey__counter-sep { color: rgba(255, 255, 255, .3); margin: 0 .15em; }
.shipment-journey__counter-total { color: rgba(255, 255, 255, .4); }

/* Intro line: visible only until the first step becomes active (JS adds
   .is-started to the section on the very first IntersectionObserver
   firing — see how-it-works.js), so it occupies the natural scroll gap
   before step one's trigger reaches viewport-center rather than costing
   any extra pinned duration of its own. */
.shipment-journey__intro {
  margin: 0;
  max-width: 620px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 300;
  line-height: 1.35;
  color: rgba(255, 255, 255, .85);
  opacity: 1;
  transition: opacity .4s ease;
}
.shipment-journey.is-started .shipment-journey__intro { opacity: 0; position: absolute; pointer-events: none; }

/* ----- Step text: all 4 absolutely stacked, only .is-active legible.
   Full crossfade (not a "muted but present" state) since only one step
   is ever meant to be read at a time inside this fixed HUD. ----- */
/* Hidden until .is-started (added by JS on the first IntersectionObserver
   firing — see how-it-works.js): step 0 carries a static .is-active for
   the no-JS fallback (so its text is real, present, readable without
   JS), but visually that would otherwise show step 0's heading directly
   on top of the intro line before the user has scrolled at all. */
/* list-style: none is needed here (unlike <ul>, the site's global reset
   only strips it from <ul>) — without it every <li> shows a default "1."
   marker rendered at the browser's default position, which lands right
   next to the label since these li's are position: absolute. */
/* min-height: 0 by default — its children are position: absolute, so it
   only ever reserves space because of this explicit min-height. Before
   .is-started, reserving that space here would push the intro line
   (also flex-end anchored, above this in the flex flow) up to make room
   for a block the user can't even see yet, crowding it against the
   top-row on short viewports. It only needs the real min-height once
   .is-started actually shows a step here (and the intro is gone). */
.shipment-journey__steps { list-style: none; position: relative; min-height: 0; opacity: 0; transition: opacity .4s ease; }
.shipment-journey.is-started .shipment-journey__steps { opacity: 1; min-height: clamp(200px, 24vw, 300px); }
.shipment-journey__step { position: absolute; inset: 0 auto auto 0; width: 100%; max-width: 640px; pointer-events: none; }
.shipment-journey__step.is-active { pointer-events: auto; }

.shipment-journey__label,
.shipment-journey__heading,
.shipment-journey__desc {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
}
.shipment-journey__step.is-active .shipment-journey__label { opacity: 1; transform: translateY(0); transition: opacity .5s ease .05s, transform .55s cubic-bezier(.22, 1, .36, 1) .05s; }
.shipment-journey__step.is-active .shipment-journey__heading { opacity: 1; transform: translateY(0); transition: opacity .5s ease .11s, transform .55s cubic-bezier(.22, 1, .36, 1) .11s; }
.shipment-journey__step.is-active .shipment-journey__desc { opacity: 1; transform: translateY(0); transition: opacity .5s ease .17s, transform .55s cubic-bezier(.22, 1, .36, 1) .17s; }

.shipment-journey__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .8);
}
.shipment-journey__label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-journey-accent);
  box-shadow: 0 0 10px 1px rgba(77, 126, 247, .6);
}

.shipment-journey__heading {
  margin: 0 0 18px;
  max-width: 12ch;
  font-size: clamp(2.2rem, 5.2vw, 5.2rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.01em;
  color: #fff;
}

.shipment-journey__desc {
  margin: 0;
  max-width: 540px;
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
}

/* ----- Bottom row: route/checkpoints + CTA ----- */
.shipment-journey__bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(36px, 5vw, 56px);
  flex-wrap: wrap;
}

/* padding-top reserves the room the marker needs above the track (it's
   centered on the track via a negative margin, so it pokes up past
   whatever the track's own "top" offset is) — this is what actually
   creates the gap above the whole route indicator, keeping the marker
   clear of the step description sitting right above it. */
.shipment-journey__route { position: relative; width: min(360px, 100%); padding-top: 30px; }
.shipment-journey__route-track {
  position: absolute;
  top: 35px;
  left: 5px;
  right: 5px;
  height: 2px;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
}
.shipment-journey__route-fill {
  position: absolute;
  top: 35px;
  left: 5px;
  right: 5px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-journey-accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.shipment-journey__marker {
  position: absolute;
  top: 35px;
  left: 5px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  margin-left: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-dark);
  border: 1.5px solid var(--color-journey-accent);
  color: var(--color-journey-accent);
  box-shadow: 0 0 0 4px rgba(77, 126, 247, .16);
  transform: translateX(calc(var(--progress, 0) * (min(360px, 100vw - 48px) - 10px)));
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.shipment-journey__marker svg { width: 13px; height: 13px; }

.shipment-journey__checkpoints { list-style: none; position: relative; display: flex; justify-content: space-between; }
.shipment-journey__checkpoint { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Homepage checkpoints only (data-autoplay) wrap their dot+label in a
   real button so they're clickable/keyboard-operable; service pages keep
   the plain non-interactive li>span markup untouched. */
.shipment-journey__checkpoint-btn {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.shipment-journey__checkpoint-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.shipment-journey__checkpoint-btn:hover .shipment-journey__checkpoint-dot { border-color: rgba(255, 255, 255, .6); }
.shipment-journey__checkpoint-btn:hover .shipment-journey__checkpoint-label { color: rgba(255, 255, 255, .75); }
.shipment-journey__checkpoint-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  border: 2px solid rgba(255, 255, 255, .3);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.shipment-journey__checkpoint-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .4);
  transition: color .3s ease;
}
.shipment-journey__checkpoint.is-complete .shipment-journey__checkpoint-dot { background: var(--color-journey-accent); border-color: var(--color-journey-accent); }
.shipment-journey__checkpoint.is-active .shipment-journey__checkpoint-dot { border-color: var(--color-journey-accent); transform: scale(1.3); }
.shipment-journey__checkpoint.is-active .shipment-journey__checkpoint-label,
.shipment-journey__checkpoint.is-complete .shipment-journey__checkpoint-label { color: #fff; }

.shipment-journey__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 1em 1.8em;
  background: var(--color-journey-accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  opacity: .7;
  transform: translateY(0);
  transition: opacity .4s ease, transform .4s ease, background-color .25s ease, box-shadow .4s ease;
}
.shipment-journey__cta svg { width: 16px; height: 16px; transition: transform .25s ease; }
.shipment-journey__cta:hover { background: #3a6bf0; }
.shipment-journey__cta:hover svg { transform: translateX(3px); }
.shipment-journey__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Final-step emphasis: the CTA stays in the DOM and focusable throughout
   (hiding it via opacity 0 + still-tabbable would be an invisible-focus
   trap), it just becomes fully opaque and gently pulses once Delivery —
   the last checkpoint — is reached, rather than appearing from nothing. */
.shipment-journey__stage.is-final-step .shipment-journey__cta {
  opacity: 1;
  animation: shipmentCtaPulse 2.2s ease-in-out infinite;
}
@keyframes shipmentCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 126, 247, .45); }
  50% { box-shadow: 0 0 0 10px rgba(77, 126, 247, 0); }
}

/* prefers-reduced-motion: no pin, no crossfade, no marker travel — a
   plain stacked list, each step showing its own image via the
   --step-image custom property set inline on the <li> (see markup),
   fully readable and fully in normal flow. */
@media (prefers-reduced-motion: reduce) {
  .shipment-journey__stage { position: static; height: auto; }
  .shipment-journey__trigger { display: none; }
  .shipment-journey__visual,
  .shipment-journey__top-row,
  .shipment-journey__intro,
  .shipment-journey__route { display: none; }
  .shipment-journey__hud { position: static; padding: 0; }
  /* .is-started never gets added under reduced motion (the JS bails out
     before running the observer), so the opacity: 0 default above must
     be overridden here or every step's text would stay invisible. */
  .shipment-journey__steps { min-height: 0; opacity: 1; }
  .shipment-journey__step {
    position: relative;
    inset: auto;
    max-width: none;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px clamp(24px, 6vw, 64px);
    background-image: linear-gradient(0deg, rgba(6, 12, 24, .88), rgba(6, 12, 24, .5)), var(--step-image);
    background-size: cover;
    background-position: center;
  }
  .shipment-journey__step + .shipment-journey__step { margin-top: 2px; }
  .shipment-journey__label,
  .shipment-journey__heading,
  .shipment-journey__desc { opacity: 1; transform: none; transition: none; }
  .shipment-journey__bottom-row { position: relative; margin-top: 32px; justify-content: flex-start; }
  .shipment-journey__cta { opacity: 1; animation: none; }
}

/* ---------- Global Footprint (world map + stats) ---------- */
.footprint { position: relative; background: var(--color-primary-dark); padding: 130px 0; overflow: hidden; }

.footprint__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}
.footprint__heading {
  margin: 0;
  max-width: 640px;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}
.footprint__intro {
  flex: 0 0 auto;
  max-width: 320px;
  margin: 0;
  text-align: right;
  font-size: .92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .5);
}

.footprint__panel {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.footprint__map {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--color-navy-950);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 28px;
  padding: clamp(32px, 4vw, 56px);
  overflow: hidden;
}
/* Pins are positioned in % against this wrapper, not .footprint__map itself,
   so their coordinates line up 1:1 with the SVG viewBox instead of being
   thrown off by the card's own padding. */
.footprint__map-inner { position: relative; width: 100%; }
/* aspect-ratio matches world.svg's own viewBox (2000x857) so the browser
   reserves the map's final height before the SVG finishes loading, instead
   of the layout jumping (and every ScrollTrigger below it landing wrong)
   once it pops in at full size. */
.footprint__map-img { width: 100%; height: auto; aspect-ratio: 2000 / 857; display: block; opacity: .92; }

.footprint__pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
}
.footprint__pin-dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--color-hero-accent);
}
.footprint__pin-dot::before {
  content: '';
  position: absolute;
  inset: -26px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 35, 26, .55) 0%, rgba(226, 35, 26, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .footprint__pin-dot::before { animation: footprint-pulse 2.4s ease-in-out infinite; }
}
@keyframes footprint-pulse {
  0%, 100% { opacity: .55; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}

.footprint__pin-tag {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  white-space: nowrap;
  background: rgba(11, 31, 58, .92);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 600;
  color: #fff;
}
.footprint__pin-tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .25);
}
.footprint__pin-tag em { font-style: normal; font-weight: 800; color: var(--color-hero-accent); }

/* Flips the tag to hang below its dot instead of above, for hubs sitting
   close enough to a neighbor that both tags would otherwise overlap. */
.footprint__pin--below .footprint__pin-tag { bottom: auto; top: calc(100% + 16px); }
.footprint__pin--below .footprint__pin-tag::after { top: auto; bottom: 100%; }

.footprint__stats {
  flex: 0 0 clamp(220px, 22%, 280px);
  background: var(--color-navy-950);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 28px;
  overflow: hidden;
}

.stats__grid { display: grid; grid-template-columns: 1fr; height: 100%; }
.stats__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.stats__item:last-child { border-bottom: none; }
.stats__value {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stats__label {
  display: block;
  margin-top: 6px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 860px) {
  .footprint { padding: 90px 0; }
  .footprint__top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footprint__intro { text-align: left; max-width: none; }
  .footprint__panel { flex-direction: column; }
  .footprint__stats { flex: none; }
  .footprint__pin-tag { font-size: .66rem; }
  .testimonials { padding: 90px 0 50px; }
  .testimonials__top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .testimonials__nav { align-self: flex-end; }
}


/* ---------- Testimonials ---------- */
.testimonials { background: #fff; padding: 120px 0 60px; overflow: hidden; }

.testimonials__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}
.testimonials__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 7px 18px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.testimonials__title {
  margin: 0;
  max-width: 720px;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-navy-900);
}
.testimonials__nav { display: flex; flex: 0 0 auto; gap: 12px; }
.testimonials__nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.testimonials__nav-btn svg { width: 20px; height: 20px; }
.testimonials__nav-btn:hover:not(:disabled) { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.testimonials__nav-btn:disabled { opacity: .35; cursor: default; }

.testimonials__track-wrap {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonials__track-wrap::-webkit-scrollbar { display: none; }

.testimonials__track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 4px max(24px, calc((100vw - 1360px) / 2 + 24px)) 40px max(24px, calc((100vw - 1360px) / 2 + 24px));
}

.testimonials__card {
  flex: 0 0 clamp(300px, 42vw, 560px);
  scroll-snap-align: start;
  border: 1px solid var(--color-line);
  border-radius: 24px;
  padding: clamp(28px, 3vw, 40px);
  background: #fff;
}
.testimonials__stars { margin-bottom: 22px; color: #f5a524; font-size: 1.05rem; letter-spacing: 3px; }
.testimonials__quote {
  margin: 0 0 28px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-ink);
}
.testimonials__author strong { display: block; font-size: .95rem; color: var(--color-navy-900); }
.testimonials__author span { font-size: .85rem; color: var(--color-muted); }

/* ---------- Final CTA ---------- */
.cta-final {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-dark);
  padding: 140px 0;
  text-align: center;
}
.cta-final__glow {
  position: absolute;
  top: 50%;
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  pointer-events: none;
}
.cta-final__glow--left { left: -14vw; transform: translateY(-50%); background: radial-gradient(circle, #1b3663 0%, rgba(27, 54, 99, 0) 70%); }
.cta-final__glow--right { right: -14vw; transform: translateY(-50%); background: radial-gradient(circle, var(--color-hero-accent) 0%, rgba(226, 35, 26, 0) 70%); }

.cta-final__bg-text {
  position: absolute;
  top: 50%;
  right: -2vw;
  transform: translateY(-50%);
  font-size: clamp(10rem, 26vw, 26rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .05);
  pointer-events: none;
  white-space: nowrap;
}

.cta-final__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

.cta-final__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 9px 20px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.cta-final__pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-hero-accent); }

.cta-final__heading {
  margin: 0 0 22px;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}
.cta-final__desc {
  max-width: 520px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .55);
}

.cta-final__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .cta-final { padding: 100px 0; }
  .cta-final__actions { flex-direction: column; width: 100%; }
  .cta-final__actions .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-navy-950); padding: 80px 0 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__logo { height: 60px; width: auto; object-fit: contain; border-radius: 8px; background: #fff; padding: 6px 10px; }

.footer__brand p { color: rgba(255,255,255,.55); margin-top: 16px; font-size: .92rem; }
.footer__col h4 { color: #fff; font-size: .95rem; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .06em; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a, .footer__contact li {
  color: rgba(255,255,255,.6);
  font-size: .92rem;
}
.footer__col a:hover { color: var(--color-hero-accent); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  color: rgba(255,255,255,.45);
  font-size: .85rem;
}
.footer__socials { display: flex; gap: 12px; }
.footer__socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  color: #fff;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.footer__socials a:hover { background: var(--color-hero-accent); border-color: var(--color-hero-accent); }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-hero-accent);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 400;
  box-shadow: var(--shadow-md);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- Reveal base state (GSAP overrides via inline transforms) ----------
   will-change itself is applied/removed by app.js only while each
   reveal's tween is actually running (onStart/onComplete/onReverseComplete),
   not left on permanently — every .reveal element on the page holding its
   own compositing layer for the entire session is wasted GPU memory once
   the one-time entrance animation has long finished. */

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Short viewports (small laptop windows, browser chrome eating into
   the window, etc.): while the hero is pinned during the About
   handoff, it can't be scrolled to reveal anything below the fold, so
   its content MUST fit within the viewport height, not just 100vh in
   theory. The clamp() values on hero spacing already shrink with vh,
   but this is an extra safety net for genuinely short windows. */
@media (max-height: 640px) {
  .hero__content { padding-top: 76px; }
  .hero__mvp-word { font-size: 1.2rem; }
  .hero__tagline { font-size: .85rem; }
  .hero__divider { margin: 10px 0 16px; }
  .hero__headline-line { font-size: clamp(1.6rem, 4vw, 2.4rem); }
  .hero__service-card { margin-top: 12px; padding: 16px 22px; }
}

/* Same short-viewport problem as the hero above: the Shipment Journey
   stage is pinned at 100vh too, so on a short browser window (laptop
   chrome eating into the window, zoomed-out desktop, etc.) its fixed px
   offsets (top-row clearance under the floating navbar, hud padding)
   eat into a much smaller box than the 900px+ this was designed against,
   crowding the intro/step text up against the top-row instead of
   resting comfortably below it. */
@media (max-height: 700px) {
  .shipment-journey__top-row { top: 104px; }
  .shipment-journey__hud { padding-top: 116px; }
  .shipment-journey__intro { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
  .shipment-journey__heading { font-size: clamp(1.9rem, 4vw, 3.4rem); margin-bottom: 12px; }
  .shipment-journey.is-started .shipment-journey__steps { min-height: clamp(150px, 20vw, 220px); }
  .shipment-journey__bottom-row { margin-top: 16px; }
}

@media (max-width: 1024px) {
  /* Tablet: keep the 2-column mosaic (still forms a balanced featured +
     compact composition down to ~768px), just tighten gaps/min-heights
     and scale the featured title down a step for the narrower column. */
  .services__mosaic {
    grid-template-columns: 1fr .95fr;
    grid-template-rows: repeat(2, minmax(200px, 1fr));
    gap: 16px;
  }
  .services__compact-grid { gap: 16px; }
  .services__card--featured .services__card-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
  .why-us__inner { grid-template-columns: 1fr; }
  .why-us__media img { height: 320px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .process__steps { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .process__line { display: none; }
}

/* Shipment Journey uses its own 1024px breakpoint (not the site's usual
   860px) since the cinematic stage needs the room down to tablet width
   before the typography/route indicator need to compact further. The
   sticky mechanism itself (scroller > stage + trigger siblings) doesn't
   change per breakpoint — it's plain block flow already, not a grid
   that would need a separate stacking fallback. */
@media (max-width: 1024px) {
  .shipment-journey__top-row { top: 96px; }
  .shipment-journey__hud { padding-top: 112px; }
  .shipment-journey__heading { max-width: 14ch; }
  .shipment-journey__desc { max-width: 460px; font-size: 1.05rem; }
  .shipment-journey__bottom-row { gap: 24px; }
}

@media (max-width: 640px) {
  .shipment-journey__hud { padding-left: 20px; padding-right: 20px; padding-top: 100px; }
  .shipment-journey__top-row { left: 20px; right: 20px; top: 88px; }
  .shipment-journey__eyebrow { font-size: .7rem; }
  .shipment-journey__intro { font-size: 1.2rem; }
  .shipment-journey__heading { max-width: none; font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .shipment-journey__desc { font-size: 1rem; max-width: none; }
  .shipment-journey__bottom-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .shipment-journey__route { width: 100%; max-width: 260px; }
  .shipment-journey__checkpoint-label { display: none; }
  .shipment-journey__cta { padding: .9em 1.5em; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .shipment-journey__step { padding: 48px 20px; min-height: 60vh; }
}

@media (max-width: 860px) {
  .services { padding: 72px 0 80px; }
  .services__topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .advantages__inner { flex-direction: column; gap: 32px; }
  .advantages__heading { position: static; top: auto; flex: none; max-width: none; }
  .advantages__card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .advantages__card-title, .advantages__card-desc { flex: none; max-width: none; }
  .about__topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .about__content { padding: 72px 24px 60px; }
  .hero__nav-links { display: none; }
  .hero__nav-inner { justify-content: space-between; }
  .hero__top-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .hero__service-card { margin-right: auto; margin-left: auto; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stats__item { border-bottom: none; }
  .stats__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: 24px; }
  .stats__item:nth-child(n+3) { padding-top: 0; }
}

@media (max-width: 560px) {
  .hero__nav { top: 14px; }
  .hero__nav-logo img { height: 34px; }
  .hero__mvp { gap: 20px; }
  .hero__mvp-word { font-size: 1.1rem; }
  .hero__content { padding-top: 108px; }
  /* Mobile: drop the asymmetric mosaic entirely — featured card first at
     full width, every compact card stacked below it in the same single
     column (never the 2-col/quad desktop composition). */
  .services__mosaic {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .services__card--featured,
  .services__card--compact {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .services__compact-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-column: auto;
    grid-row: auto;
  }
  .services__card--featured .services__card-bignum { font-size: clamp(3.5rem, 20vw, 5.5rem); }
  .services__card--compact .services__card-bignum { font-size: clamp(2.4rem, 14vw, 3.5rem); }
  /* Horizontally scrollable category chips instead of wrapping, and a
     single service card per row — never all 11 at once, still only the
     active category's cards (is-hidden keeps the rest out of flow). */
  .services__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .services__tabs::-webkit-scrollbar { display: none; }
  .services__tab { flex: 0 0 auto; white-space: nowrap; }
  .footer__grid { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footprint__map { padding: 20px 14px; overflow: visible; }
  .footprint__map-img { border-radius: 20px; }
  .footprint__pin-tag {
    gap: 4px;
    padding: 5px 8px;
    font-size: .56rem;
    white-space: normal;
    max-width: 30vw;
    text-align: center;
    line-height: 1.3;
  }
  .footprint__pin-dot { width: 8px; height: 8px; }
}