/* ==========================================================================
   Better Route — Website Styles
   Brand: Smarter Routes. Brighter Tomorrows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cal Sans";
  src: url("../fonts/CalSans-Regular.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --teal-deep:  #0F6B6B;
  --green:      #3AB46E;
  --blue:       #3FA7D6;
  --teal-dark:  #073B42;
  --mint:       #E6F4EC;
  --white:      #FFFFFF;

  /* Extended neutrals derived from the brand */
  --ink:        #06282E;
  --ink-soft:   #0B3D45;
  --body:       #45595E;
  --muted:      #6B7F84;
  --line:       #DCE7E7;
  --line-soft:  #EDF3F3;
  --shell:      #F6FAF9;

  /* On-dark */
  --on-dark:        rgba(255, 255, 255, 0.82);
  --on-dark-muted:  rgba(255, 255, 255, 0.58);
  --on-dark-line:   rgba(255, 255, 255, 0.14);

  /* Type */
  --font-display: "Cal Sans", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;


  /* Type system: display 48–84, section 36–56, card 20–24,
     lead 18–20, body 16–17, small 14, label 13, caption 12 (px).
     Cal Sans: headings; Inter: body/UI. Use roles, never per-section sizes. */
  --type-display: clamp(3rem, 6vw, 5.25rem);
  --type-section: clamp(2.25rem, 4vw, 3.5rem);
  --type-card: clamp(1.25rem, 1.7vw, 1.5rem);
  --type-lead: clamp(1.125rem, 1.4vw, 1.25rem);
  --type-body: clamp(1rem, .96rem + .15vw, 1.0625rem);
  --type-small: .875rem;
  --type-label: .8125rem;
  --type-caption: .75rem;
  --type-metric: clamp(3.25rem, 6vw, 5rem);
  --leading-heading: 1.1;
  --leading-card: 1.25;
  --leading-body: 1.65;
  --leading-label: 1.4;
  --tracking-heading: -.02em;
  --tracking-body: 0;
  --tracking-label: .12em;

  /* Rhythm */
  --gutter: 24px;
  --maxw: 1240px;
  --section-y: clamp(72px, 9vw, 132px);
  --radius-s: 8px;
  --radius: 16px;
  --radius-l: 28px;
  --radius-btn: 4px;

  /* Elevation */
  --shadow-s: 0 1px 2px rgba(6, 40, 46, .06), 0 2px 8px rgba(6, 40, 46, .04);
  --shadow-m: 0 4px 12px rgba(6, 40, 46, .06), 0 16px 40px rgba(6, 40, 46, .07);
  --shadow-l: 0 8px 24px rgba(6, 40, 46, .08), 0 32px 72px rgba(6, 40, 46, .12);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --header-h: 84px;
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

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

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--teal-dark);
  color: #fff;
  border-radius: var(--radius-s);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }

.section--mint  { background: var(--mint); }
.section--shell { background: var(--shell); }
.section--dark  { background: var(--teal-dark); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }

/* Section heading block */
.sec-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { margin-top: 20px; font-size: var(--type-lead);  line-height: var(--leading-body);  letter-spacing: var(--tracking-body); }
.section--dark .sec-head p { color: var(--on-dark); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 18px;
 line-height: var(--leading-label); }
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--green);
  border-radius: 2px;
}
.eyebrow--plain::before { content: none; }
.about__label, .why__label {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
}
.sec-head--center .eyebrow { justify-content: center; }
.section--dark .eyebrow { color: var(--blue); }

h1 { font-size: var(--type-display); }
h2 { font-size: var(--type-section);  line-height: var(--leading-heading);  letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--type-card); letter-spacing: var(--tracking-heading);  line-height: var(--leading-card); }

.lead { font-size: var(--type-lead); line-height: var(--leading-body);  letter-spacing: var(--tracking-body); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--teal-deep);
  --btn-fg: #fff;
  --btn-bd: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--type-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
 line-height: var(--leading-body); }
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn--accent { --btn-bg: var(--green); --btn-bd: var(--green); }
.btn--accent:hover { --btn-bg: #33a462; --btn-bd: #33a462; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bd: var(--teal-deep); --btn-fg: var(--teal-deep); }

.btn--on-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34); }
.btn--on-dark:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.08); }

.btn--sm { padding: 11px 20px; font-size: var(--type-small);  line-height: var(--leading-body);  letter-spacing: var(--tracking-body); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--type-body);
  color: var(--teal-deep);
  border-bottom: 1.5px solid transparent;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
 line-height: var(--leading-body); }
.link-arrow svg { width: 16px; height: 16px; }
.link-arrow:hover { border-color: currentColor; gap: 12px; }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand { flex: none; display: block; }
.brand img { height: 38px; width: auto; transition: height .3s var(--ease); }
.brand__light { display: block; }
.brand__dark  { display: none; }

/* Scrolled state — solid white bar */
.header.is-stuck {
  height: 70px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 24px rgba(6, 40, 46, .07);
}
.header.is-stuck .brand img { height: 32px; }
.header.is-stuck .brand__light { display: none; }
.header.is-stuck .brand__dark  { display: block; }
.header.is-stuck .nav__link { color: var(--ink-soft); }
.header.is-stuck .nav__link:hover,
.header.is-stuck .nav__link.is-active { color: var(--teal-deep); }
.header.is-stuck .nav__toggle { color: var(--ink); }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link {
  position: relative;
  padding: 9px 14px;
  font-size: var(--type-small);
  font-weight: 500;
  color: rgba(255, 255, 255, .86);
  border-radius: 999px;
  transition: color .22s var(--ease);
 line-height: var(--leading-body);  letter-spacing: var(--tracking-body); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__link > span::after { content: "."; }
.nav__link:hover, .nav__link.is-active { color: #fff; }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.nav__cta { margin-left: 12px; }
.header:not(.is-stuck) .nav__cta { --btn-bg: var(--green); --btn-bd: var(--green); --btn-fg: #fff; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 10px;
}
.nav__toggle svg { width: 26px; height: 26px; }
.nav__toggle .icon-close { display: none; }
body.nav-open .nav__toggle .icon-open  { display: none; }
body.nav-open .nav__toggle .icon-close { display: block; }

/* --------------------------------------------------------------------------
   7. Hero — full bleed, headline lower left, copy lower right
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100vh, 940px);
  display: flex;
  align-items: stretch;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 72px;
  background: var(--teal-dark);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}

/* Photo slot — swap the background-image below for a licensed photograph */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: var(--teal-dark);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Cover-crops the footage at any aspect ratio. If the file is missing or
   autoplay is blocked, the poster shows; if that is missing too, the teal
   background above carries the section on its own. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Two scrims sit above the footage. The first is the brand wash across the
   frame; the second darkens the lower band, where the headline and copy sit.
   The supplied footage is bright, so without these the green highlights in
   the copy drop below a readable contrast ratio. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(4, 32, 37, .92) 0%, rgba(4, 32, 37, .55) 34%, rgba(4, 32, 37, 0) 62%),
    linear-gradient(100deg, rgba(7, 59, 66, .82) 0%, rgba(7, 59, 66, .52) 48%, rgba(7, 59, 66, .46) 100%);
}

.hero__texture {
  position: absolute;
  z-index: -2;
  right: -3%;
  top: 44%;
  transform: translateY(-50%);
  width: min(380px, 32vw);
  opacity: .06;
  pointer-events: none;
}

.hero__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}
.hero__glow--green { background: rgba(58, 180, 110, .13); width: 560px; height: 560px; right: 6%;   top: -16%; }
.hero__glow--blue  { background: rgba(63, 167, 214, .12); width: 620px; height: 620px; left: -16%; bottom: -36%; }

/* Layout: headline fills the upper band, proof and copy share the lower one */
.hero .container { display: flex; width: 100%; }
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  grid-template-rows: 1fr;
  gap: 40px clamp(32px, 5vw, 72px);
  width: 100%;
}

/* Headline sits low in the left column */
.hero__title {
  grid-column: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.hero h1 {
  color: #fff;
  font-size: var(--type-display);
  line-height: 1.04;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--green); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Supporting copy anchored bottom right, key phrases picked out in green */
.hero__copy {
  grid-column: 2;
  align-self: end;
  justify-self: end;
  max-width: 430px;
  font-size: var(--type-lead);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, .92);
}
.hero__copy mark {
  background: none;
  /* Lifted from the brand green, which sits too close in value to the water */
  color: #72E2A2;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   8a. Image frames shared by About and the feature blocks
   -------------------------------------------------------------------------- */
.media-slot {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: linear-gradient(150deg, var(--teal-deep), var(--teal-dark) 62%, #0a4f57);
  box-shadow: var(--shadow-l);
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
.media-slot--wide { aspect-ratio: 16 / 10; }
.media-slot__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   8. About — two column editorial layout
   Left column runs tall (label, headline, then an offset portrait image); the
   right column pins with position:sticky and holds in view while the left
   scrolls past it. That offset is the whole effect, so the left column must
   stay the taller of the two or the sticky column has no travel.
   -------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.72fr);
  column-gap: clamp(28px, 4.5vw, 76px);
  align-items: start;
}

/* Small muted label, sitting directly above the headline */
.about__label {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 18px;
  font-size: var(--type-label);
  color: var(--muted);
 line-height: var(--leading-label);   letter-spacing: var(--tracking-label);
}

/* Oversized headline, left column */
.about__headline {
  grid-column: 1;
  grid-row: 2;
}
.about__headline h2 {
  font-size: var(--type-section);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

/* Offset portrait image, left column, sitting well below the headline */
.about__figure {
  grid-column: 1;
  grid-row: 3;
  margin-top: clamp(140px, 33vw, 520px);
  max-width: 520px;
}
.about__figure .media-slot { aspect-ratio: 3 / 4; }

/* Right column pins once it reaches the top of the viewport */
.about__side {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: sticky;
  top: calc(var(--header-h) + 28px);
  align-self: start;
}
.about__side .media-slot {
  aspect-ratio: 16 / 11;
  border-radius: var(--radius);
  margin-bottom: 34px;
}

.about__lead {
  font-size: var(--type-lead);
  line-height: var(--leading-body);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--tracking-body);
  margin-bottom: 24px;
}
.about__side > p + p { margin-top: 18px; }

/* --------------------------------------------------------------------------
   9. Why Better Route — staggered editorial grid
   The introduction and stories share a 16-column canvas, inspired by
   CargoKite's problem section. The label stays above the heading.
   -------------------------------------------------------------------------- */
.why { padding-block: clamp(96px, 12vw, 190px) clamp(100px, 12vw, 190px); }

.why__grid {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  column-gap: 20px;
}

.why__intro {
  grid-area: 1 / 2 / 2 / 11;
  align-self: start;
  padding-bottom: 64px;
}

.why__label {
  margin-bottom: 24px;
  font-size: var(--type-label);
  font-weight: 500;
  color: var(--muted);
 line-height: var(--leading-label);  letter-spacing: var(--tracking-label); }

.why__title {
  max-width: 620px;
  font-size: var(--type-section);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

/* Share the introduction's row while reserving separate columns for cards. */
.why__main {
  grid-area: 1 / 1 / 2 / 17;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  column-gap: 20px;
  pointer-events: none;
}

.why__item {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  pointer-events: auto;
  transform: translateY(calc(var(--ty, 0) * 1%));
}

/* Deliberate vertical offsets preserve the reference's generous zig-zag. */
.why__item:nth-child(1) { grid-area: 1 / 13 / 2 / 17; }
.why__item:nth-child(2) { grid-area: 2 / 4 / 3 / 8; margin-top: 24px; }
.why__item:nth-child(3) { grid-area: 2 / 11 / 3 / 16; margin-top: clamp(120px, 13vw, 205px); }
.why__item:nth-child(4) { grid-area: 3 / 2 / 4 / 6; margin-top: clamp(-180px, -12vw, -100px); }

/* Frame: holds the aspect ratio, clips the pan, and opens from inset(20%) */
.why__img {
  position: relative;
  width: 100%;
  padding-top: var(--aspect, 100%);
  overflow: hidden;
  clip-path: inset(20% round var(--radius-l));
  transition: clip-path 1.4s var(--ease-expo);
}
.why__item.is-in .why__img { clip-path: inset(0% round var(--radius-l)); }

/* Taller than the frame so there is room to pan inside it */
.why__img-move {
  position: absolute;
  inset: 0 0 auto 0;
  height: 120%;
  transform: translateY(calc(var(--py, 0) * 1%));
  will-change: transform;
}
.why__img-move .media-slot {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  transform: scale(1.4);
  opacity: 0;
  transition: transform 1.4s var(--ease-expo), opacity 1.4s var(--ease-expo);
}
.why__item.is-in .why__img-move .media-slot { transform: none; opacity: 1; }

.why__item-title {
  margin-top: clamp(24px, 2.5vw, 36px);
  font-size: var(--type-card);
  line-height: var(--leading-card);
 letter-spacing: var(--tracking-heading); }
.why__item-txt {
  margin-top: 14px;
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

/* Word and character reveal — see splitText() in main.js. Each piece carries
   its own --d so the stagger is a plain CSS transition-delay. */
.js [data-split] .sp {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-split].is-in .sp,
.js .is-in [data-split] .sp { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   10. Services
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.service:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-m);
  border-color: transparent;
}

/* Larger, two-tone SVG illustrations keep each service easy to identify. */
#services .eyebrow::before { content: none; }
.service__icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 28px;
  border: 1px solid rgba(15, 107, 107, .12);
  border-radius: 24px;
  background: var(--mint);
  color: var(--teal-deep);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.service__icon svg { width: 64px; height: 64px; overflow: visible; }
.service-icon__accent { stroke: var(--green); }
.service:hover .service__icon { background: var(--teal-deep); color: #fff; }
.service:hover .service-icon__accent { stroke: #8ee3ad; }

/* Play on entry, then again while hovered. SVG parts move independently. */
.service__icon [class*="service-icon__"] {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
  animation-play-state: paused;
}
.service.is-visible .service__icon [class*="service-icon__"] { animation-play-state: running; }
.service:hover .service__icon [class*="service-icon__"] { animation-iteration-count: infinite; }
.service-icon__move { animation-name: service-drive; }
.service-icon__fly { animation-name: service-fly; }
.service-icon__lift { animation-name: service-lift; }
.service-icon__sail { animation-name: service-sail; }
.service-icon__wave { animation-name: service-drive; }
.service-icon__pulse { animation-name: service-pulse; }
.service-icon__route { animation-name: service-route; }
.service-icon__check { animation-name: service-check; }
@keyframes service-drive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes service-fly { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -3px); } }
@keyframes service-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes service-sail { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes service-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes service-route { to { stroke-dashoffset: -16; } }
@keyframes service-check {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1; }
  45%, 100% { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .service__icon [class*="service-icon__"] { animation: none !important; }
}

.service h3 { font-size: var(--type-card);  line-height: var(--leading-card);  letter-spacing: var(--tracking-heading); }
.service__sub {
  margin-top: 8px;
  font-size: var(--type-body);
  font-weight: 500;
  font-style: italic;
  color: var(--green);
 line-height: var(--leading-body); }
.service p.service__body {
  margin-top: 14px;
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.service__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 24px;
}
.service__tags li {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--shell);
  border: 1px solid var(--line-soft);
  font-size: var(--type-caption);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* How we work — a central vessel with paired, inward-facing text. */
.approach { background: var(--white); }
.approach__head { margin-bottom: clamp(40px, 5vw, 72px); }
.approach .eyebrow::before { content: none; }
.approach__head h2 { max-width: 780px; margin-inline: auto; }
.approach__statement {
  border-block: 1px solid var(--line);
  padding-block: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(48px, 6vw, 88px);
}
.approach__statement p {
  max-width: 850px;
  margin-inline: auto;
  text-align: center;
  font-size: var(--type-lead);
  line-height: var(--leading-body);
  color: var(--ink-soft);
 letter-spacing: var(--tracking-body); }
.approach__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, .9fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
  max-width: 1080px;
  margin-inline: auto;
}
.approach__vessel {
  --vessel-width: clamp(140px, 16vw, 200px);
  --vessel-size: calc(var(--vessel-width) * 6.826667);
  grid-area: 1 / 2 / 3 / 3;
  position: relative;
  align-self: center;
  justify-self: stretch;
  height: var(--vessel-size);
  margin: 100px 0;
  overflow: visible;
  pointer-events: none;
}
.approach__vessel-motion { position: relative; width: 100%; height: 100%; }
/* Keep the original large hull scale (300 source pixels across) while
   expanding its box to the full 2048px canvas. Soft shadows remain uncut. */
.approach__vessel img {
  position: absolute;
  width: var(--vessel-size);
  height: var(--vessel-size);
  max-width: none;
  object-fit: contain;
  left: 50%;
  top: 0;
  transform: translateX(-50%) rotate(180deg);
}
.approach__item {
  align-self: center;
  max-width: 300px;
  padding-block: 28px;
}
.approach__item--left { grid-column: 1; text-align: right; justify-self: end; }
.approach__item--right { grid-column: 3; text-align: left; }
.approach__item--first { grid-row: 1; }
.approach__item--second { grid-row: 2; }
.approach__item h3 {
  font-size: var(--type-card);
  line-height: var(--leading-card);
  letter-spacing: var(--tracking-heading);
  margin-bottom: 24px;
}
.approach__item p { font-size: var(--type-body); line-height: var(--leading-body); }
@media (max-width: 760px) {
  .approach__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .approach__vessel { grid-area: 1 / 1 / 2 / -1; --vessel-size: 820px; margin: 0; }
  .approach__layout > .approach__item { grid-area: auto; text-align: left; justify-self: stretch; max-width: none; padding: 0; }
  .approach__item h3 { margin-bottom: 16px;  line-height: var(--leading-card);  letter-spacing: var(--tracking-heading); }
}
@media (max-width: 480px) {
  .approach__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .approach__vessel { --vessel-size: 680px; }
  .approach__layout > .approach__item { text-align: center; }
}

/* --------------------------------------------------------------------------
   11. Statistics — centered, numbered
   -------------------------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
}
.metric { padding: 12px 24px; }
.metric + .metric { border-left: 1px solid var(--line); }

.metric__num {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--blue);
  margin-bottom: 18px;
 line-height: var(--leading-label); }
.metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-metric);
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--teal-deep), var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.metric h3 { margin: 18px 0 8px; font-size: var(--type-card);  line-height: var(--leading-card);  letter-spacing: var(--tracking-heading); }
.metric p { font-size: var(--type-body); color: var(--muted);  line-height: var(--leading-body); }

/* --------------------------------------------------------------------------
   12. Vision & mission
   -------------------------------------------------------------------------- */
.direction-section { background: var(--teal-dark); }
.direction {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(160px, auto) minmax(320px, auto) minmax(300px, auto);
  gap: 0;
}
.direction__intro-track { grid-area: 1 / 1 / 3 / 3; }
.direction__intro {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(32px, 4vw, 56px);
  background: var(--teal-deep);
  color: var(--white);
}
.direction__label {
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: 32px;
}
.direction__intro h2 {
  color: inherit;
  font-size: var(--type-section);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 12ch;
  text-wrap: balance;
}
.direction__arrow { width: 48px; height: 48px; margin-top: auto; padding-top: 32px; box-sizing: content-box; color: var(--mint); }
.direction__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(28px, 3vw, 42px);
  background: var(--mint);
  color: var(--ink);
}
.direction__card--vision { grid-area: 2 / 4 / 3 / 5; }
.direction__card--mission { grid-area: 3 / 3 / 4 / 5; background: var(--green); }
.direction__card--mission p,
.direction__card--mission .direction__mark { color: var(--ink); }
.direction__mark {
  align-self: flex-end;
  flex: none;
  width: 48px;
  height: 48px;
  margin-bottom: 48px;
  color: var(--teal-deep);
}
.direction__copy { margin-top: auto; }
.direction__card h3 {
  color: var(--ink);
  font-size: var(--type-card);
  line-height: var(--leading-card);
  letter-spacing: var(--tracking-heading);
}
.direction__card p {
  margin-top: 16px;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--body);
  max-width: 48ch;
}
.direction__word { display: inline-block; }
.direction__card { position: relative; transition: box-shadow .4s var(--ease); }
.direction__mark { transform-origin: 100% 0; transition: transform .5s var(--ease); }
.direction__card h3 { transition: transform .5s var(--ease); }
.direction__card p { transition: opacity .35s var(--ease), transform .5s var(--ease); }
.direction__card.is-interactive .direction__mark { transform: scale(2.1); }
.direction__card.is-interactive h3 { transform: translateY(var(--copy-offset, 0px)); }
.direction__card.is-interactive p { opacity: 0; transform: translateY(24px); }
.direction__card.is-interactive:is(:focus-visible, .is-open) { z-index: 2; box-shadow: 0 32px 64px rgba(6, 40, 46, .45); }
.direction__card.is-interactive:is(:focus-visible, .is-open) .direction__mark,
.direction__card.is-interactive:is(:focus-visible, .is-open) h3 { transform: none; }
.direction__card.is-interactive:is(:focus-visible, .is-open) p { opacity: 1; transform: none; transition-delay: .12s; }
@media (hover: hover) and (pointer: fine) {
  .direction__card.is-interactive:hover { z-index: 2; box-shadow: 0 32px 64px rgba(6, 40, 46, .45); }
  .direction__card.is-interactive:hover .direction__mark,
  .direction__card.is-interactive:hover h3 { transform: none; }
  .direction__card.is-interactive:hover p { opacity: 1; transform: none; transition-delay: .12s; }
}
@media (prefers-reduced-motion: reduce) {
  .direction__card.is-interactive,
  .direction__card.is-interactive .direction__mark,
  .direction__card.is-interactive h3,
  .direction__card.is-interactive p { transition: none; }
}
@media (min-width: 701px) and (max-width: 1080px) {
  .direction { grid-template-rows: repeat(2, minmax(300px, auto)); }
  .direction__card--vision { grid-area: 1 / 3 / 2 / 5; }
  .direction__card--mission { grid-area: 2 / 3 / 3 / 5; }
}
@media (max-width: 700px) {
  .direction { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .direction > * { grid-area: auto; }
  .direction__intro { min-height: 380px; }
  .direction__intro h2 { max-width: 16ch; }
  .direction__card { min-height: 300px; }
  .direction__mark { margin-bottom: 32px; }
}

/* --------------------------------------------------------------------------
   13. Network coverage
   -------------------------------------------------------------------------- */
.regions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.region {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.region:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: transparent; }

.region__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.region h3 { font-size: var(--type-card);  line-height: var(--leading-card);  letter-spacing: var(--tracking-heading); }
.region__count {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mint);
  font-size: var(--type-caption);
  font-weight: 600;
  color: var(--teal-deep);
}
.region p { font-size: var(--type-body); line-height: var(--leading-body); }

.region__places {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.region__places li {
  font-size: var(--type-caption);
  color: var(--muted);
}
.region__places li:not(:last-child)::after {
  content: "·";
  margin-left: 6px;
  color: var(--line);
}

/* --------------------------------------------------------------------------
   14. Closing CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  padding-block: clamp(80px, 9vw, 124px);
  background:
    linear-gradient(rgba(4, 43, 49, .84), rgba(4, 43, 49, .88)),
    url('../img/cta-background.jpg') center 58% / cover no-repeat;
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cta__texture {
  position: absolute;
  z-index: -1;
  left: -4%; top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: min(460px, 42vw);
  opacity: .08;
}
.cta__glow {
  position: absolute;
  z-index: -1;
  right: -8%; top: -30%;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: rgba(58, 180, 110, .26);
  filter: blur(120px);
}
.cta__inner { max-width: 760px; margin-inline: auto; }
.cta h2 { color: #fff; }
.cta p { margin-top: 20px; font-size: var(--type-lead); color: rgba(255, 255, 255, .78);  line-height: var(--leading-body);  letter-spacing: var(--tracking-body); }
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   14b. Alternating feature blocks
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.feature + .feature { margin-top: clamp(56px, 7vw, 104px); }
.feature--reverse .feature__media { order: -1; }

.feature__body h3 {
  font-size: var(--type-card);
  margin-bottom: 18px;
 line-height: var(--leading-card);  letter-spacing: var(--tracking-heading); }
.feature__body > p + p { margin-top: 16px; }

.feature__list { margin-top: 24px; }
.feature__list li {
  position: relative;
  padding-left: 30px;
  font-size: var(--type-body);
 line-height: var(--leading-body); }
.feature__list li + li { margin-top: 12px; }
.feature__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mint);
  border: 1.5px solid var(--green);
}
.feature__list li::after {
  content: "";
  position: absolute;
  left: 5px; top: 11px;
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--teal-deep);
  border-bottom: 1.5px solid var(--teal-deep);
  transform: rotate(-45deg);
}

/* Scale comparison — one consolidated movement vs many fragmented ones */
.scale {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.scale__single svg { width: 64px; height: 64px; color: var(--teal-deep); }
.scale__many {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 260px;
}
.scale__many svg { width: 100%; height: auto; color: var(--line); }
.scale__label {
  grid-column: 1 / -1;
  font-size: var(--type-small);
  color: var(--muted);
 line-height: var(--leading-body);  letter-spacing: var(--tracking-body); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--on-dark-muted);
  padding-top: clamp(64px, 7vw, 96px);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: 56px;
}
.footer__brand img { height: 40px; width: auto; margin-bottom: 22px; }
.footer__tagline {
  font-family: var(--font-display);
  font-size: var(--type-card);
  line-height: var(--leading-card);
  color: #fff;
  letter-spacing: var(--tracking-heading);
  margin-bottom: 16px;
}
.footer__brand p { font-size: var(--type-small); line-height: var(--leading-body); max-width: 34ch;  letter-spacing: var(--tracking-body); }

.footer h4 {
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 20px;
 line-height: var(--leading-label); }
.footer__links li + li { margin-top: 11px; }
.footer__links a {
  font-size: var(--type-small);
  color: var(--on-dark-muted);
  transition: color .22s var(--ease), padding-left .22s var(--ease);
 line-height: var(--leading-body);  letter-spacing: var(--tracking-body); }
.footer__links a:hover { color: #fff; padding-left: 5px; }

.footer__contact li {
  display: flex;
  gap: 12px;
  font-size: var(--type-small);
  line-height: var(--leading-body);
 letter-spacing: var(--tracking-body); }
.footer__contact li + li { margin-top: 15px; }
.footer__contact a { transition: color .22s var(--ease); }
.footer__contact a:hover { color: #fff; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 26px;
  border-top: 1px solid var(--on-dark-line);
  font-size: var(--type-small);
 line-height: var(--leading-body);  letter-spacing: var(--tracking-body); }
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer__bar a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   16. Scroll reveal
   -------------------------------------------------------------------------- */
/* Hidden only when JS can bring it back — see the inline script in <head> */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .values   { grid-template-columns: repeat(2, 1fr); }
  .services { grid-template-columns: repeat(2, 1fr); }
  .regions  { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Hero collapses to a single column: headline, copy, then proof */
@media (max-width: 980px) {
  .hero {
    min-height: 0;
    padding-bottom: 80px;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 32px;
  }
  .hero__title, .hero__copy {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    justify-self: start;
  }
  .hero__copy { max-width: 620px; }
}

/* Below this the columns have too little room to stagger, so the layout
   stacks and the right column stops pinning. */
@media (max-width: 1080px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .about__side {
    grid-column: 1;
    grid-row: 4;
    position: static;
    margin-top: 48px;
    max-width: 680px;
  }
  .about__figure { margin-top: clamp(48px, 7vw, 96px); }

  /* Keep DOM reading order across two columns; disable desktop offsets. */
  .why__grid { display: block; }
  .why__intro { padding-bottom: 0; }
  .why__label { margin-bottom: 20px;  line-height: var(--leading-label);  letter-spacing: var(--tracking-label); }
  .why__title { max-width: 620px;  line-height: var(--leading-heading);  letter-spacing: var(--tracking-heading); }
  .why__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 56px);
    margin-top: clamp(48px, 6vw, 80px);
  }
  .why__main > .why__item {
    grid-area: auto;
    margin: 0;
    transform: none;
  }
  .why__img-move { height: 100%; transform: none; }
}

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__media { order: 0; }
  .metrics { grid-template-columns: 1fr; gap: 0; }
  .metric { padding: 30px 0; }
  .metric + .metric { border-left: 0; border-top: 1px solid var(--line); }
}

/* Mobile navigation */
@media (max-width: 860px) {
  :root { --header-h: 72px; }

  .nav__toggle { display: flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 28px var(--gutter) 40px;
    background: var(--teal-dark);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  body.nav-open { overflow: hidden; }

  .nav__link {
    padding: 16px 4px;
    font-size: var(--type-small);
    font-family: var(--font-display);
    color: rgba(255, 255, 255, .9);
    border-bottom: 1px solid var(--on-dark-line);
    border-radius: 0;
   line-height: var(--leading-body);  letter-spacing: var(--tracking-body); }
  .nav__link::after { display: none; }
  .nav__cta { margin: 26px 0 0; justify-content: center; padding-block: 16px; }
  .header.is-stuck .nav__link { color: rgba(255, 255, 255, .9);   font-size: var(--type-card);
}

  /* Keep the burger legible once the dark panel is open */
  .header.is-stuck .nav__toggle { color: var(--ink); }
  body.nav-open .header.is-stuck { background: #fff; }
}

@media (max-width: 720px) {
  .services { grid-template-columns: 1fr; }
  .regions  { grid-template-columns: repeat(2, 1fr); }
  .about__label { margin-bottom: 14px;  line-height: var(--leading-label);  letter-spacing: var(--tracking-label); }
  .about__side { margin-top: 40px; }
  .about__figure { max-width: 100%; margin-top: clamp(40px, 9vw, 72px); }

  .why__main { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .scale { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .values  { grid-template-columns: 1fr; }
  .regions { grid-template-columns: 1fr; }
  .hero__actions .btn,
  .cta__actions .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; align-items: flex-start;  line-height: var(--leading-body);  letter-spacing: var(--tracking-body); }
  .metric { flex-direction: column; gap: 6px; }
}

/* --------------------------------------------------------------------------
   18. Motion & print preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }

  /* Why Better Route: show everything in place, no drift, no pan, no split */
  .js [data-split] .sp { opacity: 1; transform: none; }
  .why__item { transform: none !important; }
  .why__img { clip-path: inset(0% round var(--radius-l)); }
  .why__img-move { height: 100%; transform: none !important; }
  .why__img-move .media-slot { opacity: 1; transform: none; }
}

@media print {
  .header, .nav__toggle, .cta__actions { display: none; }
  body { color: #000; }
  .section--dark, .hero, .cta, .footer { background: #fff !important; color: #000 !important; }
}