/* ==========================================================================
   OOMCO Marine Fuels — static site stylesheet
   Brand: Kingfisher Blue dominates; Wadi Green is a controlled accent.
   Type: Poppins (geometric stand-in for ITC Avant Garde Gothic).
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --kingfisher: #0588c3;
  --kingfisher-deep: #0470a3;
  --kingfisher-soft: #3ea3d3;
  --wadi: #99ca3b;
  --navy: #004264;
  --navy-deep: #002a41;
  --navy-soft: #0b5079;
  --offwhite: #f4f9fc;
  --blue-tint: #b9deee;
  --green-tint: #c5e090;
  --white: #ffffff;
  --ink: #12313f;
  --muted: #4b6675;
  --on-dark: #e6f1f8;
  --on-dark-muted: #a9c6d8;
  --line: rgba(18, 49, 63, 0.14);
  --line-strong: rgba(18, 49, 63, 0.28);
  --line-dark: rgba(255, 255, 255, 0.16);
  --line-dark-strong: rgba(255, 255, 255, 0.34);
  --focus: #0588c3;

  --font: "Poppins", "Segoe UI", system-ui, sans-serif;

  --header-h: 84px;
  --header-h-scrolled: 64px;
  --container: 1280px;
  --container-wide: 1560px;
  --gutter: 20px;
  --prose: 68ch;

  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(0, 42, 65, 0.06);
  --shadow: 0 6px 20px rgba(0, 42, 65, 0.1);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  --section-y: clamp(64px, 9vw, 150px);
  --section-y-tight: clamp(48px, 6vw, 100px);
}
@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 48px; }
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
::selection { background: var(--blue-tint); color: var(--navy); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--white); }
.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; }
/* skip link: off-canvas until focused (no inline handlers, so a strict script-src CSP can apply) */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 70; padding: 10px 14px; border-radius: var(--radius); background: var(--white); color: var(--navy); font-weight: 500; transform: translateY(-200%); }
.skip-link:focus { transform: none; outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }.prose-w { max-width: var(--prose); }
.grid { display: grid; gap: 48px; }
.grid-12 { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .grid-12.top { align-items: start; }
  .col-4 { grid-column: span 4; }  .col-8 { grid-column: span 8; }
}.cols-3 { display: grid; gap: 24px; }
.cols-4 { display: grid; gap: 20px; }
.cols-5 { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.row-between { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* surfaces */
.bg-white { background: var(--white); }
.bg-offwhite { background: var(--offwhite); }
.bg-navy { background: var(--navy); color: var(--white); }
.bg-navy-deep { background: var(--navy-deep); color: var(--white); }
.on-dark { color: var(--white); }
.on-dark .muted { color: var(--on-dark-muted); }
.muted { color: var(--muted); }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* ---------- type ---------- */
.eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--kingfisher-deep);
}
.on-dark .eyebrow { color: var(--blue-tint); }
.display { font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }
.h1 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); }
.h2 { font-size: clamp(1.65rem, 2.9vw, 2.5rem); }
.h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.lead { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; color: var(--muted); }
.on-dark .lead { color: var(--on-dark-muted); }
.stat-num { font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.small { font-size: 0.875rem; }
.xs { font-size: 0.75rem; }
.text-balance { text-wrap: balance; }
.max-ch-34 { max-width: 34ch; } .max-ch-48 { max-width: 48ch; } .max-ch-54 { max-width: 54ch; } .max-ch-64 { max-width: 64ch; }

/* ---------- route underline ---------- */
.route-link { position: relative; text-decoration: none; }
.route-link::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -3px; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease-out);
}
.route-link:hover::after, .route-link:focus-visible::after, .route-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- horizon line ---------- */
.horizon { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); }
.on-dark .horizon, .horizon.dark { background: linear-gradient(90deg, transparent, var(--line-dark-strong) 18%, var(--line-dark-strong) 82%, transparent); }

/* ---------- route line (section device) ---------- */
.route-line { position: relative; display: flex; align-items: center; height: 2px; width: 64px; margin-block: 20px; }
.route-line .bar { height: 100%; width: 100%; background: var(--kingfisher); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--dur-slow) var(--ease-out); }
.on-dark .route-line .bar, .route-line.dark .bar { background: var(--line-dark-strong); }
.route-line .dot { position: absolute; inset-inline-end: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--kingfisher); box-shadow: 0 0 0 3px var(--white); opacity: 0; transform: scale(0.4); transition: opacity 350ms var(--ease-out) 800ms, transform 350ms var(--ease-out) 800ms; }
.route-line .dot.green { background: var(--wadi); }
.on-dark .route-line .dot { box-shadow: 0 0 0 3px var(--navy-deep); }
.route-line.w-24 { width: 96px; } .route-line.w-20 { width: 80px; }
.in .route-line .bar, .route-line.in .bar { transform: scaleX(1); }
.in .route-line .dot, .route-line.in .dot { opacity: 1; transform: scale(1); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-group > * { opacity: 0; transform: translateY(18px); transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out); }
.reveal-group.in > * { opacity: 1; transform: none; }
.reveal-group.in > *:nth-child(2) { transition-delay: 70ms; }
.reveal-group.in > *:nth-child(3) { transition-delay: 140ms; }
.reveal-group.in > *:nth-child(4) { transition-delay: 210ms; }
.reveal-group.in > *:nth-child(5) { transition-delay: 280ms; }
.reveal-group.in > *:nth-child(6) { transition-delay: 350ms; }
.reveal-group.in > *:nth-child(n+7) { transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * { opacity: 1; transform: none; transition: none; }
  .route-line .bar { transform: scaleX(1); transition: none; }
  .route-line .dot { opacity: 1; transform: none; transition: none; }
}

/* ---------- section intro ---------- */
.intro { display: flex; flex-direction: column; }
.intro.center { align-items: center; text-align: center; }
.intro .eyebrow { margin-bottom: 16px; }

/* ---------- header ---------- */
.header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50; height: var(--header-h);
  color: var(--white); border-bottom: 1px solid transparent; background: transparent;
  transition: background-color 500ms var(--ease-out), height 500ms var(--ease-out), border-color 500ms var(--ease-out), transform 420ms var(--ease-out);
}
.header.tucked { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .header { transition: background-color 500ms, height 500ms, border-color 500ms; } }
.header::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 160px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 42, 65, 0.7), transparent); transition: opacity 500ms;
}
.header.scrolled, .header.menu-open { height: var(--header-h-scrolled); background: rgba(0, 66, 100, 0.85); border-color: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.header.scrolled::before { opacity: 0; }
.header .bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; flex-shrink: 0; border-radius: 3px; }
.logo img { height: 44px; width: auto; transition: height 500ms var(--ease-out); }
.header.scrolled .logo img { height: 36px; }
.nav { display: none; align-items: center; gap: 4px; }
.nav > ul { display: flex; align-items: center; gap: 4px; }
.nav > ul > li { position: relative; }
.nav a, .nav button.navbtn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding-inline: 12px;
  font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.9);
}
.nav a:hover, .nav button.navbtn:hover, .nav a[aria-current="page"], .nav li.active > .navbtn { color: var(--white); }
.nav .waypoint { position: absolute; bottom: 2px; inset-inline-start: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--wadi); transform: translateX(-50%); }
.nav .chev { width: 10px; height: 10px; transition: transform 300ms; }
.nav li.open .chev { transform: rotate(180deg); }
.dropdown {
  position: absolute; inset-inline-start: 0; top: 100%; min-width: 300px; padding-top: 8px;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.nav li.open > .dropdown, .nav li:hover > .dropdown, .nav li:focus-within > .dropdown { opacity: 1; transform: none; pointer-events: auto; }
.dropdown ul { background: rgba(0, 42, 65, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 8px; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dropdown a { display: block; height: auto; padding: 10px 12px; border-radius: var(--radius); }
.dropdown a:hover, .dropdown a[aria-current="page"] { background: rgba(255, 255, 255, 0.08); }
.dropdown a .t { display: block; font-size: 0.9rem; font-weight: 500; color: var(--white); }
.dropdown a .d { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.35; color: var(--on-dark-muted); font-weight: 400; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.quote-pill { display: none; height: 36px; align-items: center; padding-inline: 12px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-lg); font-size: 0.8rem; font-weight: 500; color: var(--white); }
.burger { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--white); }
.burger span { position: relative; display: block; width: 24px; height: 14px; }
.burger i { position: absolute; inset-inline: 0; height: 1.5px; background: currentColor; transition: transform 300ms, opacity 200ms, top 300ms, bottom 300ms; }
.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 50%; transform: translateY(-50%); } .burger i:nth-child(3) { bottom: 0; }
.menu-open .burger i:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-open .burger i:nth-child(2) { opacity: 0; }
.menu-open .burger i:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
@media (min-width: 640px) { .quote-pill { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav { display: flex; }
  .header-actions { display: none; }
}

/* mobile nav */
.mobile-nav {
  position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column; background: var(--navy-deep); color: var(--white);
  padding-top: var(--header-h-scrolled); opacity: 0; transition: opacity 300ms;
}
.mobile-nav.open { display: flex; }
.mobile-nav.visible { opacity: 1; }
.mobile-nav nav { flex: 1; overflow-y: auto; padding-block: 4px 16px; }
.mobile-nav nav > ul { margin: 0; padding: 0; list-style: none; }
/* top-level rows (plain links and accordion groups) slide in one after another; each is ruled off from the next */
.mobile-nav nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transform: translateX(-12px); transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
.mobile-nav.visible nav > ul > li { opacity: 1; transform: none; }
.mobile-nav nav > ul > li:nth-child(2) { transition-delay: 40ms; } .mobile-nav nav > ul > li:nth-child(3) { transition-delay: 80ms; }
.mobile-nav nav > ul > li:nth-child(4) { transition-delay: 120ms; } .mobile-nav nav > ul > li:nth-child(5) { transition-delay: 160ms; }
.mobile-nav nav > ul > li:nth-child(6) { transition-delay: 200ms; } .mobile-nav nav > ul > li:nth-child(n+7) { transition-delay: 240ms; }
.mobile-nav li a { display: flex; min-height: 52px; align-items: center; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.85); }
.mobile-nav li a[aria-current="page"] { color: var(--white); }
.mobile-nav li a .lead-line { flex: none; width: 20px; height: 1px; background: currentColor; opacity: 0.5; margin-inline-end: 12px; transition: width 200ms var(--ease-out); }
.mobile-nav li a[aria-current="page"] .lead-line { width: 32px; background: var(--wadi); opacity: 1; }
/* accordion groups: the heading is a full-width button — small uppercase label, chevron at the far right */
.mnav__head { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; border: 0; background: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.mnav__head .eyebrow { margin: 0; color: inherit; font-size: 0.66rem; }
.mnav__head .chev { flex: none; width: 14px; height: 14px; color: rgba(255, 255, 255, 0.55); transition: transform 260ms var(--ease-out); }
.mnav__head[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.mnav__group.active .mnav__head { color: rgba(255, 255, 255, 0.85); }
.mnav__group.active .mnav__head .chev { color: var(--wadi); }
/* the folded links: a grid whose single row animates between 1fr and 0fr; the inner list is indented behind a thin
   left rule, with no dividers between the links */
.mnav__sub { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 280ms var(--ease-out); }
.mnav__sub > ul { min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.mnav__sub li { margin-left: 4px; border-left: 1px solid rgba(255, 255, 255, 0.16); padding-left: 16px; }
.mnav__sub li:last-child { padding-bottom: 8px; }
.mnav__sub li a { min-height: 44px; font-size: 1.05rem; }
.mnav__sub li a .lead-line { width: 12px; }
.mnav__sub li a[aria-current="page"] .lead-line { width: 22px; }
.mnav__head[aria-expanded="false"] + .mnav__sub { grid-template-rows: 0fr; }
.mnav__head[aria-expanded="false"] + .mnav__sub > ul { visibility: hidden; transition: visibility 0s 280ms; }
.mobile-nav .foot { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 24px; }
.mobile-nav .foot .cta-momentum { width: 100%; }
.mobile-nav .foot a.email { display: inline-block; margin-top: 20px; font-size: 0.875rem; color: var(--on-dark-muted); }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }
body.no-scroll { overflow: hidden; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding-inline: 16px;
  border-radius: var(--radius-lg); font-size: 0.875rem; font-weight: 500; line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
  transition: background-color 200ms var(--ease-out), border-color 200ms, color 200ms, transform 200ms var(--ease-out), box-shadow 200ms; user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn.lg { height: 44px; padding-inline: 20px; font-size: 0.925rem; }
.btn.primary { background: var(--kingfisher-deep); color: var(--white); box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--navy-soft); box-shadow: var(--shadow); }
.on-dark .btn.primary, .btn.primary.dark { background: var(--white); color: var(--navy); }
.on-dark .btn.primary:hover, .btn.primary.dark:hover { background: var(--offwhite); }
.btn.secondary { border: 1px solid rgba(4, 112, 163, 0.4); color: var(--kingfisher-deep); }
.btn.secondary:hover { border-color: var(--kingfisher-deep); background: rgba(5, 136, 195, 0.05); }
.on-dark .btn.secondary, .btn.secondary.dark { border-color: rgba(255, 255, 255, 0.35); color: var(--white); }
.on-dark .btn.secondary:hover, .btn.secondary.dark:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.1); }
.btn .arrow { width: 16px; height: 16px; overflow: visible; flex-shrink: 0; }
.btn .arrow .shaft { transform-origin: left center; transition: transform 300ms var(--ease-out); }
.btn .arrow .head { transition: transform 300ms var(--ease-out); }
.btn:hover .arrow .shaft { transform: scaleX(1.35); }
.btn:hover .arrow .head { transform: translateX(6px); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.link-arrow { font-weight: 500; color: var(--kingfisher-deep); }
.on-dark .link-arrow { color: var(--blue-tint); }

/* momentum CTA — a pill with a Wadi Green tile. On hover the tile grows to fill the pill while the vessel
   sails from the leading edge to the trailing edge and a shine sweeps across (after Framer's Momentum CTA). */
.cta-momentum {
  --cta-tile: 34px; --cta-radius: 11px; --cta-pad: 3px; --cta-gap: 12px; --cta-move: 520ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative; display: inline-flex; align-items: center; padding: var(--cta-pad); border-radius: var(--cta-radius);
  font-weight: 600; font-size: 0.875rem; letter-spacing: 0.01em; line-height: 1; cursor: pointer; user-select: none; isolation: isolate; will-change: transform;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.cta-momentum.lg { --cta-tile: 38px; --cta-radius: 12px; --cta-gap: 14px; font-size: 0.925rem; }.cta-momentum.on-dark { background: var(--white); color: var(--navy); box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 3px 5px -2px rgba(0,0,0,.14), 0 12px 18px -8px rgba(0,0,0,.28); }
.cta-momentum.on-dark:hover, .cta-momentum.on-dark:focus-visible { background: var(--offwhite); box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 5px 7px -2px rgba(0,0,0,.16), 0 18px 24px -8px rgba(0,0,0,.34); }
.cta-momentum:hover { transform: translateY(-1px); }
.cta-momentum:active { transform: translateY(0) scale(0.985); transition-duration: 80ms; }
.cta-momentum__fill { position: absolute; z-index: 0; top: var(--cta-pad); bottom: var(--cta-pad); left: var(--cta-pad); width: var(--cta-tile); border-radius: calc(var(--cta-radius) - var(--cta-pad)); background: var(--wadi); overflow: hidden; transition: width var(--cta-move); }
.cta-momentum:hover .cta-momentum__fill, .cta-momentum:focus-visible .cta-momentum__fill { width: calc(100% - 2 * var(--cta-pad)); }
.cta-momentum__shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; }
.cta-momentum:hover .cta-momentum__shine, .cta-momentum:focus-visible .cta-momentum__shine { animation: cta-shine 900ms var(--ease-out) 140ms forwards; }
@keyframes cta-shine { to { transform: translateX(110%); } }
.cta-momentum__tile { position: absolute; z-index: 2; top: var(--cta-pad); left: var(--cta-pad); display: inline-flex; align-items: center; justify-content: center; width: var(--cta-tile); height: var(--cta-tile); color: var(--navy-deep); transition: left var(--cta-move); }
.cta-momentum:hover .cta-momentum__tile, .cta-momentum:focus-visible .cta-momentum__tile { left: calc(100% - var(--cta-pad) - var(--cta-tile)); }
.cta-momentum__icon { width: calc(var(--cta-tile) * .55); height: calc(var(--cta-tile) * .55); overflow: visible; }
.cta-momentum__ship { transform-box: fill-box; transform-origin: center; }
.cta-momentum:hover .cta-momentum__ship, .cta-momentum:focus-visible .cta-momentum__ship { animation: cta-sail 1.6s var(--ease-inout) infinite; }
@keyframes cta-sail { 0% { transform: translate(0,0) rotate(0); } 35% { transform: translate(1.2px,-.6px) rotate(-2deg); } 70% { transform: translate(1.6px,.3px) rotate(1.5deg); } 100% { transform: translate(0,0) rotate(0); } }
.cta-momentum__wake { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cta-momentum:hover .cta-momentum__wake, .cta-momentum:focus-visible .cta-momentum__wake { animation: cta-wake 1.6s var(--ease-out) infinite; }
@keyframes cta-wake { 0% { opacity: 0; transform: translateX(1.5px) scale(.6); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateX(-2.5px) scale(1); } }
.cta-momentum__swell { stroke-dasharray: 12 8; opacity: .85; }
.cta-momentum:hover .cta-momentum__swell, .cta-momentum:focus-visible .cta-momentum__swell { animation: cta-swell 1.2s linear infinite; }
@keyframes cta-swell { to { stroke-dashoffset: -20; } }
.cta-momentum__label { position: relative; z-index: 1; display: inline-flex; align-items: center; height: var(--cta-tile); padding-inline: calc(var(--cta-tile) + var(--cta-gap)) calc(var(--cta-gap) + 6px); white-space: nowrap; transition: padding var(--cta-move), color 260ms var(--ease-out); }
.cta-momentum:hover .cta-momentum__label, .cta-momentum:focus-visible .cta-momentum__label { padding-inline: calc(var(--cta-gap) + 6px) calc(var(--cta-tile) + var(--cta-gap)); color: var(--navy-deep); }
.cta-momentum.block { width: 100%; }
.cta-momentum.block .cta-momentum__label { flex: 1; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .cta-momentum__fill, .cta-momentum__tile, .cta-momentum__label { transition: none; }
  .cta-momentum:hover .cta-momentum__shine, .cta-momentum:hover .cta-momentum__ship, .cta-momentum:hover .cta-momentum__wake, .cta-momentum:hover .cta-momentum__swell { animation: none; }
}

/* ---------- hero (home) ---------- */
.hero { position: relative; display: flex; min-height: 100svh; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--navy-deep); color: var(--white); }
.hero .media, .media-fill { position: absolute; inset: 0; }
.media-fill img, .media-fill video, .hero .media img, .hero .media video { width: 100%; height: 100%; object-fit: cover; }
.hero .tint { position: absolute; inset: 0; background: rgba(0, 42, 65, 0.3); }
.hero .wash { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,42,65,.85), rgba(0,42,65,.45) 50%, rgba(0,42,65,.1)); }
.hero .base { position: absolute; inset-inline: 0; bottom: 0; height: 50%; background: linear-gradient(to top, rgba(0,42,65,.95), transparent); }
.hero .body { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) + 48px); padding-bottom: 64px; }
.hero .copy { max-width: 640px; }
.hero .tagline { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.35; }
.hero .follow { display: inline-flex; align-items: center; gap: 12px; margin-top: 56px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.hero .follow:hover { color: var(--white); }
.hero .follow i { display: block; width: 1px; height: 24px; background: rgba(255,255,255,.6); }
.hero .stats-wrap { position: relative; border-top: 1px solid rgba(255,255,255,.12); }
.hero-video-mobile { display: none; }
@media (max-width: 767px) { .hero-video-desktop { display: none; } .hero-video-mobile { display: block; } }

/* ---------- page hero ---------- */
.page-hero { position: relative; display: flex; min-height: 60vh; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--navy); color: var(--white); }
.page-hero.tall { min-height: 78vh; } .page-hero.short { min-height: 44vh; }
.page-hero .bg { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--navy-deep), var(--navy)); }
.page-hero .media-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--navy-deep), rgba(0,42,65,.55) 50%, rgba(0,42,65,.25)); }
.page-hero .media-fill::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(0,42,65,.6), transparent); }
.page-hero .body { position: relative; padding-top: calc(var(--header-h) + 56px); padding-bottom: 56px; }
@media (min-width: 768px) { .page-hero .body { padding-bottom: 80px; } }
.page-hero .copy { max-width: 760px; }
.page-hero .lead { margin-top: 20px; max-width: 60ch; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin-bottom: 32px; font-size: 0.75rem; color: var(--on-dark-muted); }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: ""; display: block; width: 12px; height: 1px; background: currentColor; opacity: .5; }
.crumbs [aria-current] { color: rgba(255,255,255,.9); }

/* ---------- arc pattern ---------- */

/* ---------- stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: 1fr; }
.stat-strip > div { display: flex; flex-direction: column; justify-content: center; padding-block: 24px; border-top: 1px solid var(--line); }
.stat-strip > div:first-child { border-top: 0; }
.stat-strip .num { font-size: 2.25rem; }
.stat-strip .num .unit { font-size: 0.55em; font-weight: 500; color: var(--kingfisher-deep); }
.stat-strip .lbl { margin-top: 6px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.on-dark .stat-strip > div { border-color: rgba(255,255,255,.1); }
.on-dark .stat-strip .num .unit { color: var(--blue-tint); }
.on-dark .stat-strip .lbl { color: var(--on-dark-muted); }
@media (min-width: 640px) {
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .stat-strip > div { border-top: 0; border-inline-start: 1px solid var(--line); padding-inline: 32px; }
  .stat-strip > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .on-dark .stat-strip > div { border-color: rgba(255,255,255,.1); }
}
@media (min-width: 768px) { .stat-strip .num { font-size: 2.75rem; } }
/* ---------- trust strip ---------- */
/* ---------- network strip: port logos on one slow continuous track ----------
   The track holds four identical sequences and slides by one sequence per cycle, so the loop has no seam
   and always covers the viewport. Pure CSS; reduced motion turns it into a static centred grid. */
.network-strip { --logo-gap: clamp(56px, 7vw, 120px); --logo-scale: 1; padding-block: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); background: var(--white); }
.network-strip .head { align-items: center; text-align: center; margin-inline: auto; max-width: 62ch; }
.network-strip .head .eyebrow { margin-bottom: 12px; }
.network-strip .head .h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; }
.network-strip .head .body { margin-top: 12px; font-size: 0.95rem; line-height: 1.6; color: var(--muted); }
.network-strip .marquee { position: relative; margin-top: clamp(32px, 4vw, 52px); padding-block: 20px 34px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.network-strip .track { display: flex; width: max-content; will-change: transform; animation: network-loop 36s linear infinite; }
.network-strip .marquee:hover .track { animation-play-state: paused; }
.network-strip .seq { display: flex; flex: none; align-items: center; gap: var(--logo-gap); margin: 0; padding: 0 var(--logo-gap) 0 0; list-style: none; }
.network-strip .seq li { flex: none; display: flex; align-items: center; height: 88px; }
.network-strip .seq img { display: block; width: auto; height: calc(var(--h) * var(--logo-scale)); max-width: none; opacity: .92; transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.network-strip .seq img:hover { opacity: 1; transform: scale(1.03); }
@keyframes network-loop { to { transform: translateX(-25%); } }
/* one thin route beneath the logos, four waypoints: decorative only */
.network-strip .lane { position: absolute; left: 12%; right: 12%; bottom: 14px; height: 1px; background: var(--kingfisher); opacity: .28; }
.network-strip .lane i { position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--kingfisher); transform: translate(-50%, -50%); }
.network-strip .lane i:nth-child(1) { left: 0; } .network-strip .lane i:nth-child(2) { left: 33.33%; } .network-strip .lane i:nth-child(3) { left: 66.66%; } .network-strip .lane i:nth-child(4) { left: 100%; }
.network-strip .creds { display: grid; gap: 14px 28px; margin-top: clamp(28px, 3.5vw, 44px); padding: 0; list-style: none; }
.network-strip .creds li { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.network-strip .creds svg { width: 22px; height: 22px; flex: none; color: var(--kingfisher-deep); opacity: .8; }
@media (min-width: 640px) { .network-strip .creds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .network-strip .creds { grid-template-columns: repeat(4, 1fr); justify-items: center; } }
@media (max-width: 767px) {
  .network-strip { --logo-scale: .78; }
  .network-strip .seq li { height: 70px; }
  .network-strip .track { animation-duration: 28s; }
}
@media (prefers-reduced-motion: reduce) {
  .network-strip .marquee { -webkit-mask-image: none; mask-image: none; }
  .network-strip .track { width: auto; animation: none; will-change: auto; justify-content: center; }
  .network-strip .seq { flex-wrap: wrap; justify-content: center; gap: 28px var(--logo-gap); padding: 0 var(--gutter); }
  .network-strip .seq[aria-hidden="true"] { display: none; }
  .network-strip .seq img { opacity: 1; transition: none; }
  .network-strip .seq img:hover { transform: none; }
}

/* ---------- icons ---------- */
.icon { width: 32px; height: 32px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon .acc { stroke: var(--icon-accent, currentColor); }
/* ---------- benefit grid: six waypoints on one route ----------
   Below 1024px the six reasons stack as one vertical route (ring on the left, copy to the right).
   From 1024px they sit in the 3 x 2 grid and the route runs clockwise: top row, a bend on the right, bottom row. */
.benefits { position: relative; }
.benefits ul { position: relative; display: grid; gap: 32px; }
.benefits li:nth-child(4) { order: 6; }
.benefits li:nth-child(5) { order: 5; }
.benefits li:nth-child(6) { order: 4; }
.benefit { --icon-accent: currentColor; position: relative; height: 100%; padding-inline-start: 64px; }
.benefit:hover { --icon-accent: var(--wadi); }
.benefit .head { position: absolute; inset-inline-start: 0; top: 0; display: flex; }
.benefit .ring { position: relative; z-index: 1; display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--kingfisher-deep); box-shadow: inset 0 0 0 0 var(--kingfisher); transition: opacity 320ms, border-color 320ms, box-shadow 320ms; }
.benefit h3 { padding-top: 9px; }
.benefit p { margin-top: 8px; max-width: 34ch; font-size: 0.95rem; line-height: 1.6; color: var(--muted); }
.benefits.js .ring { opacity: .7; }
.benefits.js h3 { transform: translateY(4px); transition: transform 360ms var(--ease-out); }
.benefits.js p { opacity: .7; transform: translateY(6px); transition: opacity 380ms var(--ease-out) 40ms, transform 380ms var(--ease-out) 40ms; }
.benefits li.active .ring, .benefits li.done .ring { opacity: 1; border-color: var(--kingfisher); box-shadow: inset 0 0 0 1px var(--kingfisher); }
.benefits li.active .ring { animation: ring-pop 350ms var(--ease-out); }
.benefits li.active .benefit { --icon-accent: var(--wadi); }
.benefits li.active h3, .benefits li.done h3, .benefits li.active p, .benefits li.done p { opacity: 1; transform: none; }
@keyframes ring-pop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
.on-dark .benefit .ring { border-color: rgba(255,255,255,.2); background: var(--navy-deep); color: var(--white); }
.on-dark .benefit p { color: var(--on-dark-muted); }
@media (min-width: 1024px) {
  .benefits ul { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; padding-inline-end: 96px; } /* room for the route's bend */
  .benefits li:nth-child(4), .benefits li:nth-child(5), .benefits li:nth-child(6) { order: 0; }
  .benefit { padding-inline-start: 0; }
  .benefit .head { position: static; }
  .benefit h3 { margin-top: 20px; padding-top: 0; }
}

/* ---------- cards ---------- */
.card { --icon-accent: currentColor; display: flex; height: 100%; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); color: var(--ink); transition: border-color 250ms; }
.card:hover { --icon-accent: var(--wadi); border-color: var(--line-strong); }
.card .top { display: flex; align-items: center; justify-content: space-between; }
.card .icon { color: var(--kingfisher-deep); transition: transform 300ms var(--ease-out); }
.card:hover .icon { transform: translateX(3px); }
.card .idx { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; color: var(--kingfisher-deep); }
.card h3 { margin-top: 20px; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.card p { margin-top: 8px; font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
.on-dark .card { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--white); }
.on-dark .card:hover { border-color: rgba(255,255,255,.25); }
.on-dark .card .icon { color: var(--white); }
.on-dark .card .idx { color: var(--blue-tint); }
.on-dark .card p { color: var(--on-dark-muted); }

/* product tile */
.tile { --icon-accent: currentColor; display: flex; height: 100%; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); color: var(--ink); transition: border-color 250ms; }
.tile:hover { --icon-accent: var(--wadi); border-color: rgba(5,136,195,.5); }
.tile .body { display: flex; flex: 1; flex-direction: column; margin-top: 28px; }
.tile h3 { font-size: 1.125rem; font-weight: 600; }
.tile p { margin-top: 6px; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.tile .more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; font-size: 0.875rem; font-weight: 500; color: var(--kingfisher-deep); transition: color 240ms var(--ease-out); }
.tile .more .arrow { width: 16px; height: 16px; overflow: visible; flex-shrink: 0; transition: transform 240ms var(--ease-out); }

/* product icon: the open "C" container with its green signal arc; sits on a white knockout so the supply line
   docks against it instead of crossing it */
.pico { position: relative; display: inline-flex; width: calc(var(--lane-ico, 52px) + 8px); height: var(--lane-ico, 52px); margin-inline-start: -4px; padding-inline: 4px; background: var(--white); color: var(--kingfisher); transition: opacity 340ms var(--ease-out); }
.pico svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pico .sig { stroke: var(--wadi); }
.pico .acc { stroke: var(--icon-accent, currentColor); transition: stroke 380ms var(--ease-out), fill 380ms var(--ease-out); }
.pico .solid { fill: var(--icon-accent, currentColor); }

/* ---------- products lane: five product modules along one supply line ----------
   The line is one SVG stroke behind the cards, level with the icons. Cards have no fill, so the lane shows
   through them and disappears only behind each icon's knockout. It draws once, left to right, when the
   section reaches the viewport; each card wakes as the line passes its icon. */
.lane-section { --lane-pad: 28px; --lane-ico: 52px; --lane-bleed: min(40px, calc(var(--gutter) - 8px)); }
.lane { position: relative; }
.lane-route { position: absolute; z-index: 0; top: calc(var(--lane-pad) + var(--lane-ico) / 2 - 1px); left: calc(-1 * var(--lane-bleed)); width: calc(100% + 2 * var(--lane-bleed)); max-width: none; height: 4px; overflow: visible; pointer-events: none; }
.lane-route line { fill: none; stroke: var(--kingfisher); stroke-width: 1.5; stroke-opacity: .55; stroke-linecap: round; }
.lane-section.js:not(.in) .lane-route { opacity: 0; }
.lane-cards { position: relative; z-index: 1; }
.lane-cards > li { display: flex; }
.lane-cards > li > .tile { flex: 1 1 auto; width: 100%; }
.lane .tile { position: relative; padding: var(--lane-pad); background: transparent; transition: border-color 240ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.lane .tile::after { content: ""; position: absolute; top: -1px; left: var(--lane-pad); width: 38%; height: 2px; border-radius: 1px; background: var(--kingfisher); transform: scaleX(0); transform-origin: 0 50%; transition: transform 260ms var(--ease-out); }
.lane .tile:hover, .lane .tile:focus-visible { border-color: var(--kingfisher); transform: translateY(-3px); box-shadow: 0 8px 18px -10px rgba(0, 42, 65, .16); }
.lane .tile:hover::after, .lane .tile:focus-visible::after { transform: scaleX(1); }
.lane .tile:hover .more, .lane .tile:focus-visible .more { color: var(--navy); }
.lane .tile:hover .more .arrow, .lane .tile:focus-visible .more .arrow { transform: translateX(5px); }
.lane .tile:focus-visible { outline-offset: 4px; }

/* entry: heading, then the CTA, then the line, then the cards as the line reaches them */
.lane-section.js .lane-intro { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.lane-section.js .lane-cta { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease-out) 300ms, transform 400ms var(--ease-out) 300ms, background-color 200ms var(--ease-out), border-color 200ms, color 200ms, box-shadow 200ms; }
.lane-section.js.in .lane-intro, .lane-section.js.in .lane-cta { opacity: 1; transform: none; }
.lane-section.js.in .lane-cta:hover { transform: translateY(-1px); }
.lane-section .lane-intro .route-line .bar { transition-delay: 160ms; }
.lane-section.js .lane-cards > li { opacity: .75; transform: translateY(4px); transition: opacity 340ms var(--ease-out), transform 340ms var(--ease-out); }
.lane-section.js .lane-cards > li .pico { opacity: .55; }
.lane-section.js .lane-cards > li h3 { color: var(--muted); transition: color 340ms var(--ease-out); }
.lane-section.js .lane-cards > li.on { opacity: 1; transform: none; }
.lane-section.js .lane-cards > li.on .pico { opacity: 1; }
.lane-section.js .lane-cards > li.on h3 { color: var(--ink); }
.lane-section.js .lane-cards > li.on .tile { border-color: rgba(18, 49, 63, .22); }
.lane-section.js .lane-cards > li.on .tile:hover, .lane-section.js .lane-cards > li.on .tile:focus-visible { border-color: var(--kingfisher); }
.lane-cards > li.flash .tile { --icon-accent: var(--wadi); }

/* CTA: thin blue border on white; light blue fill on hover */
.lane-cta.btn.secondary { background: var(--white); border-color: rgba(5, 136, 195, .45); color: var(--kingfisher-deep); }
.lane-cta.btn.secondary:hover, .lane-cta.btn.secondary:focus-visible { background: rgba(5, 136, 195, .07); border-color: var(--kingfisher); }
.btn:focus-visible .arrow .shaft { transform: scaleX(1.35); }
.btn:focus-visible .arrow .head { transform: translateX(6px); }

/* below the five-column breakpoint the row becomes a swipe carousel: one card and a preview of the next.
   The lane stays as a quiet static line the cards slide over; the entry choreography is desktop only. */
@media (max-width: 1023px) {
  .lane-section { --lane-bleed: var(--gutter); }
  .lane .lane-cards { display: flex; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lane .lane-cards::-webkit-scrollbar { display: none; }
  .lane .lane-cards > li { flex: 0 0 clamp(240px, 78%, 300px); scroll-snap-align: start; }
  .lane-route { top: calc(6px + var(--lane-pad) + var(--lane-ico) / 2 - 1px); }
  .lane-route line { stroke-opacity: .4; }
  .lane-section.js .lane-cards > li, .lane-section.js .lane-cards > li .pico { opacity: 1; transform: none; transition: none; }
  .lane-section.js .lane-cards > li h3 { color: var(--ink); }
  .lane-section.js .lane-cards > li .tile { border-color: var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .lane-section.js .lane-intro, .lane-section.js .lane-cta, .lane-section.js .lane-cards > li, .lane-section.js .lane-cards > li .pico { opacity: 1; transform: none; transition: none; }
  .lane-section.js .lane-cards > li h3 { color: var(--ink); transition: none; }
  .lane-section.js:not(.in) .lane-route { opacity: 1; }
  .lane-route line { stroke-dashoffset: 0 !important; }
  .lane .tile, .lane .tile::after, .lane .tile .more, .lane .tile .more .arrow, .pico, .pico .acc { transition: none; }
  .lane .tile:hover, .lane .tile:focus-visible { transform: none; }
}

/* news card */
.news { display: block; }
.news .pic { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--navy); }
.news .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.news:hover .pic img { transform: scale(1.03); }
.news .meta { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 0.75rem; color: var(--muted); }
.news .meta time { color: var(--kingfisher-deep); }
.news .meta i { display: block; width: 16px; height: 1px; background: currentColor; opacity: .4; }
.news h3 { margin-top: 8px; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.news .src { display: inline-block; margin-top: 12px; font-size: 0.875rem; font-weight: 500; color: var(--kingfisher-deep); }

/* ---------- product list (products page) ---------- */
/* ---------- products: select a product, then see how it is delivered ----------
   Flat product tabs (icon + name) over one editorial detail block; the tabs appear left to right when the block
   reveals. The section ends in a short route line that leads into the supply modes. */
.pselect { scroll-margin-top: 120px; }
.ptabs { gap: clamp(22px, 3.4vw, 48px); }
.ptabs [role="tab"] { display: inline-flex; align-items: center; gap: 10px; padding-top: 4px; }
.ptabs .pico { --lane-ico: 30px; margin-inline-start: 0; }
.pselect.reveal .ptabs [role="tab"] { opacity: 0; transform: translateX(-8px); }
.pselect.reveal.in .ptabs [role="tab"] { opacity: .55; transform: none; transition: opacity 360ms var(--ease-out) calc(var(--i) * 70ms), transform 360ms var(--ease-out) calc(var(--i) * 70ms); }
/* after the staggered entrance, inactive products keep breathing very faintly (.55 to .72), each on its own clock, so the
   row reads as "several products, one selected". The selected tab, hovered and focused tabs are still. */
@keyframes ptab-breathe { 0%, 100% { opacity: .55; } 50% { opacity: .72; } }
.pselect.reveal.in .ptabs [role="tab"]:not([aria-selected="true"]) { animation: ptab-breathe calc(5.4s + var(--i) * .4s) ease-in-out calc(900ms + var(--i) * 1300ms) infinite; }
.pselect.reveal.in .ptabs [role="tab"]:hover, .pselect.reveal.in .ptabs [role="tab"]:focus-visible { opacity: .9; animation: none; }
.ptabs [role="tab"]:hover .pico path, .ptabs [role="tab"]:focus-visible .pico path { stroke-width: 1.85; }
.pselect.reveal.in .ptabs [role="tab"][aria-selected="true"] { opacity: 1; animation: none; }
.pselect.reveal .ptabs [role="tab"]::after { transition-delay: 420ms; }
.pdetail { position: relative; padding-top: clamp(28px, 4vw, 52px); min-height: 200px; }
.ppanel { --icon-accent: var(--wadi); display: grid; gap: 20px 40px; align-items: start; }
.ppanel .pico-lg .pico { --lane-ico: 84px; margin: 0; }
.ppanel h3 { font-size: clamp(1.8rem, 3.2vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.ppanel .psub { margin-top: 10px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 500; color: var(--navy); }
.ppanel .pspec { margin-top: 6px; font-size: 1rem; color: var(--muted); }
.ppanel .pvia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.925rem; font-weight: 500; color: var(--ink); max-width: 44ch; }
.ppanel .pvia .lbl { font-size: 0.68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 768px) { .ppanel { grid-template-columns: auto 1fr; } .pdetail { min-height: 240px; } }
.section-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: clamp(36px, 5vw, 64px); }
.section-link .line { display: block; width: 1px; height: clamp(40px, 6vw, 72px); background: var(--kingfisher); transform-origin: 50% 0; }
.section-link .dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--wadi); }
.section-link .lbl { font-size: 0.72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pb-0 { padding-bottom: 0; }

/* supply modes: a small bunkering simulator. Flat mode tabs choose a scenario; the illustration's interactive
   object (barge, road tanker) can be dragged along its path or moved by the panel's button; ex-pipe and lubricants
   play on the button. State is data-mode / data-state (idle | active | complete) on .supply; main.js drives it. */
.sim-hint { font-size: .95rem; color: var(--muted); }
.supply-stage { display: grid; gap: clamp(20px, 3vw, 36px); padding-top: clamp(24px, 3vw, 40px); }
.sim-stage { position: relative; }
.sim-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; min-height: 1.4em; }
.sim-status .k { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--kingfisher-deep); }
.sim-status .msg { font-size: .875rem; color: var(--muted); transition: color 200ms; }
.supply[data-state="complete"] .sim-status .msg { color: var(--navy); font-weight: 500; }
.supply-art { width: 100%; height: auto; display: block; overflow: visible; }
.supply-art .ln, .supply-art .shape { fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.supply-art .shape { fill: var(--white); }
.supply-art .water { stroke: var(--kingfisher); }
.supply-art .wave { stroke: var(--kingfisher); opacity: .6; }
.supply-art .lbl { fill: var(--muted); font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.supply-art .cue { fill: var(--kingfisher-deep); font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: 0; transition: opacity 240ms var(--ease-out); }
.supply-art .route { fill: none; stroke: var(--kingfisher); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 700ms var(--ease-inout), opacity 200ms linear; }
.supply-art .flow { fill: none; stroke: #e4f3fb; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: .05 .45; stroke-dashoffset: .5; opacity: 0; transition: opacity 400ms linear; }
@keyframes sim-flow { from { stroke-dashoffset: .5; } to { stroke-dashoffset: 0; } }
/* the tracer runs once (two dash cycles) from source toward the vessel, then settles as a faint static trace */
@keyframes sim-flow-once { 0% { stroke-dashoffset: .5; opacity: .9; } 85% { opacity: .9; } 100% { stroke-dashoffset: -.5; opacity: .4; } }
.supply-art .done-dot { fill: var(--wadi); stroke: var(--white); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out); }
.supply-art .g-pack { opacity: 0; transition: opacity 200ms; }
.supply-art .g-pack .shape { stroke: var(--kingfisher-deep); fill: var(--white); }
.supply-art g { transition: opacity 280ms var(--ease-out); }
/* focus: the active mode's objects strong, related infrastructure normal, the rest subdued */
.supply[data-mode="barge"] :is(.g-terminal, .g-truck, .g-lube) :is(.att, .lbl, .ln),
.supply[data-mode="road-tanker"] :is(.g-terminal, .g-barge, .g-lube) :is(.att, .lbl, .ln),
.supply[data-mode="ex-pipe"] :is(.g-truck, .g-barge, .g-lube) :is(.att, .lbl, .ln),
.supply[data-mode="lubricants"] :is(.g-terminal, .g-truck, .g-barge) :is(.att, .lbl, .ln) { opacity: .22; }
.supply-art .lbl, .supply-art .ln { transition: opacity 280ms var(--ease-out); }
.supply[data-mode="barge"] .g-barge .shape, .supply[data-mode="road-tanker"] .g-truck .mover .shape { stroke: var(--kingfisher-deep); stroke-width: 2; }
.supply[data-mode="ex-pipe"] .lit .shape, .supply[data-mode="lubricants"] .lit .shape { stroke: var(--kingfisher-deep); }
/* ---- interaction system ----
   main.js marks the current mode's actionable object .is-interactive (clickable) and .is-primary (gets the attention
   cue) and sets data-cue on .supply: "first" for the single stronger nudge after a mode change or the section's
   reveal, "idle" for the quiet periodic cue, "" once the visitor has interacted or the operation is complete.
   Position (JS, attribute transform on .mover) and attention (CSS transform on the nested .att) never share an element. */
.supply-art { --nudge: 1px; --cue-t: 4.2s; }
/* supply tabs: a rare 0.4 px nudge (0.8 px on the selected one) on separate 5.6-6.5 s clocks; a tab the visitor has
   used (.is-visited), or is hovering, stays still, so the untried modes keep quietly inviting */
@keyframes tab-nudge { 0%, 88%, 100% { transform: translate3d(0, 0, 0); } 91% { transform: translate3d(var(--tn), 0, 0); } 94% { transform: translate3d(calc(var(--tn) * -1), 0, 0); } 97% { transform: translate3d(calc(var(--tn) * .5), 0, 0); } }
.supply.in .stabs [role="tab"]:not(.is-visited) { --tn: .4px; animation: tab-nudge calc(5.6s + var(--i) * .3s) ease-in-out calc(var(--i) * -1.7s) infinite; }
.supply.in .stabs [role="tab"][aria-selected="true"]:not(.is-visited) { --tn: .8px; }
.supply.in .stabs [role="tab"]:hover, .supply.in .stabs [role="tab"]:focus-visible, .supply.in .stabs [role="tab"].is-visited { animation: none; }
.supply-art .hit { fill: transparent; stroke: none; pointer-events: all; }
.supply-art .sim-obj .mover, .supply-art .sim-tap { pointer-events: all; cursor: pointer; }
.supply-art .sim-obj .mover.is-interactive { touch-action: none; }
@media (hover: hover) and (pointer: fine) { .supply-art .sim-obj .mover.is-interactive { cursor: grab; } }
.supply.dragging .sim-obj .mover.is-interactive { cursor: grabbing; }
.supply[data-state="complete"] .is-interactive { cursor: default; }
.supply-art .att { transition: transform 220ms var(--ease-out); }
.supply-art .is-interactive .shape { transition: stroke-width 160ms var(--ease-out); }
/* the primary object's outline is a touch stronger in its own mode; hover / press / focus strengthen it further and stop the cue */
.supply-art .is-primary .shape { stroke: var(--kingfisher-deep); stroke-width: 2; }
.supply-art .is-interactive:hover .shape, .supply-art .is-interactive:active .shape, .supply.is-focus .is-primary .shape { stroke-width: 2.5; }
.supply-art .is-interactive:active { opacity: .85; }
.supply-art .sim-obj .mover:hover .att, .supply-art .sim-tap:hover .att { opacity: .6; }
@media (hover: hover) and (pointer: fine) { .supply-art .sim-obj .mover.is-primary:hover .att, .supply-art .sim-tap.is-primary:hover .att { transform: translateY(-1.5px); } }
.supply-art .is-interactive:hover .att, .supply.is-focus .is-primary .att, .supply.dragging .att { animation: none !important; }
/* attention cues: still for most of the cycle, then a 1 px mechanical nudge (0.6 px on phones); the first cue after a
   mode change is one slightly larger movement. Lubricant drums lift instead of sliding. Transform and opacity only. */
@keyframes supply-attention-nudge { 0%, 82%, 100% { transform: translate3d(0, 0, 0); } 85% { transform: translate3d(var(--nudge), 0, 0); } 88% { transform: translate3d(calc(var(--nudge) * -1), 0, 0); } 91% { transform: translate3d(calc(var(--nudge) * .7), 0, 0); } 94% { transform: translate3d(calc(var(--nudge) * -.4), 0, 0); } }
@keyframes supply-attention-lift { 0%, 84%, 100% { transform: translate3d(0, 0, 0); } 89% { transform: translate3d(0, calc(var(--nudge) * -1), 0); } 93% { transform: translate3d(0, calc(var(--nudge) * .3), 0); } }
@keyframes supply-attention-first { 0%, 100% { transform: translate3d(0, 0, 0); } 18% { transform: translate3d(calc(var(--nudge) * 2), 0, 0); } 42% { transform: translate3d(calc(var(--nudge) * -1.6), 0, 0); } 64% { transform: translate3d(calc(var(--nudge) * .9), 0, 0); } 82% { transform: translate3d(calc(var(--nudge) * -.4), 0, 0); } }
@keyframes supply-attention-first-lift { 0%, 100% { transform: translate3d(0, 0, 0); } 30% { transform: translate3d(0, calc(var(--nudge) * -2), 0); } 65% { transform: translate3d(0, calc(var(--nudge) * .5), 0); } }
@keyframes supply-cue-label { 0%, 82%, 100% { opacity: .55; } 88% { opacity: .95; } }
.supply[data-cue="first"] .is-primary .att { animation: supply-attention-first 440ms ease-in-out 1; }
.supply[data-cue="first"] .is-primary.lift .att { animation-name: supply-attention-first-lift; }
.supply[data-cue="idle"] .is-primary .att { animation: supply-attention-nudge var(--cue-t) ease-in-out infinite; }
.supply[data-cue="idle"] .is-primary.lift .att { animation-name: supply-attention-lift; }
/* the click affordance: while a mode is idle its actionable object wears a breathing dashed selection ring and a small
   blue "Tap to ..." tag (green pin), both clickable. Hover settles the ring solid. Hidden once the operation runs. */
.supply-art .aff { opacity: 0; transition: opacity 260ms var(--ease-out); pointer-events: none; }
.supply[data-state="idle"] .aff { opacity: 1; }
.supply-art .aff-ring { display: none; }
.supply-art .is-primary .aff-ring { display: block; }
.supply-art .aff-ring { fill: rgba(5, 136, 195, .06); stroke: var(--kingfisher); stroke-width: 1.4; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; animation: aff-breathe 2.4s ease-in-out infinite; }
@keyframes aff-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.supply-art .aff-tag { pointer-events: all; cursor: pointer; }
.supply-art .aff-tag rect { fill: var(--kingfisher); }
.supply-art .is-primary .aff-tag rect { fill: var(--kingfisher-deep); }
.supply-art .aff-tag .pin { fill: var(--wadi); }
.supply-art .aff-tag text { fill: var(--white); font-family: var(--font); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.supply-art .is-interactive:hover .aff-ring, .supply.is-focus .is-primary .aff-ring { stroke-dasharray: none; animation: none; opacity: 1; fill: rgba(5, 136, 195, .1); }
.supply-art .sim-obj .mover:hover .aff-tag rect, .supply-art .sim-tap:hover .aff-tag rect { fill: var(--navy); }
@media (max-width: 767px) { .supply-art .aff-tag { display: none; } .supply-art .aff-ring { stroke-width: 1.2; } }
/* cue labels ("Drag", "Try", "Follow" + a green waypoint): quiet in the idle state of their own mode, brightening in
   step with the object's cue (same clock); the drag labels only with a fine pointer */
.supply-art circle.cue { fill: var(--wadi); }
.supply[data-state="idle"][data-mode="ex-pipe"] .cue-ex-pipe, .supply[data-state="idle"][data-mode="lubricants"] .cue-lubricants { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .supply[data-state="idle"][data-mode="barge"] .cue-barge, .supply[data-state="idle"][data-mode="road-tanker"] .cue-road-tanker { opacity: .55; } }
.supply[data-cue="idle"][data-state="idle"][data-mode="barge"] .cue-barge, .supply[data-cue="idle"][data-state="idle"][data-mode="road-tanker"] .cue-road-tanker,
.supply[data-cue="idle"][data-state="idle"][data-mode="lubricants"] .cue-lubricants, .supply[data-cue="idle"][data-state="idle"][data-mode="ex-pipe"] .cue-ex-pipe { animation: supply-cue-label var(--cue-t) ease-in-out infinite; }
.supply[data-cue="first"][data-mode="ex-pipe"] .cue-ex-pipe, .supply[data-cue="first"][data-mode="lubricants"] .cue-lubricants, .supply-art .is-interactive:hover .cue, .g-lube:hover .cue-lubricants, .g-terminal:hover .cue-ex-pipe { opacity: .95; animation: none; }
@media (hover: hover) and (pointer: fine) { .supply[data-cue="first"][data-mode="barge"] .cue-barge, .supply[data-cue="first"][data-mode="road-tanker"] .cue-road-tanker { opacity: .95; animation: none; } }
.supply[data-cue="first"] .sim-status .msg { color: var(--navy); }
/* the active mode's route, flow and completion dot */
/* fixed infrastructure routes (pipeline, lubricant handling path) are always faintly present in their own mode and
   brighten when the operation runs; the barge and tanker routes only exist once the vehicle has arrived */
.supply[data-mode="ex-pipe"] .r-ex-pipe, .supply[data-mode="lubricants"] .r-lubricants { opacity: .3; stroke-dashoffset: 0; }
.supply[data-state="complete"][data-mode="barge"] .r-barge, .supply[data-state="complete"][data-mode="road-tanker"] .r-road-tanker,
.supply[data-mode="ex-pipe"]:not([data-state="idle"]) .r-ex-pipe, .supply[data-mode="lubricants"]:not([data-state="idle"]) .r-lubricants { opacity: 1; }
.supply[data-state="complete"][data-mode="barge"] .r-barge, .supply[data-state="complete"][data-mode="road-tanker"] .r-road-tanker { stroke-dashoffset: 0; }
/* product transfer: once the connection exists the tracer runs source -> vessel for ~1.6 s, then rests; ex-pipe traces while
   the operation runs; lubricants are packaged goods, so no flow, the pack's journey is the demonstration */
.supply[data-state="complete"][data-mode="barge"] .f-barge, .supply[data-state="complete"][data-mode="road-tanker"] .f-road-tanker { opacity: .4; animation: sim-flow-once 1.6s linear 600ms 1 both; }
.supply[data-state="active"][data-mode="ex-pipe"] .f-ex-pipe { opacity: .9; animation: sim-flow-once 1.8s linear 1 both; }
.supply[data-state="complete"][data-mode="ex-pipe"] .f-ex-pipe { opacity: .4; }
.supply[data-state="complete"][data-mode="barge"] .d-barge, .supply[data-state="complete"][data-mode="road-tanker"] .d-road-tanker { transition-delay: 1500ms; }
.supply[data-state="complete"][data-mode="barge"] .d-barge, .supply[data-state="complete"][data-mode="road-tanker"] .d-road-tanker,
.supply[data-state="complete"][data-mode="ex-pipe"] .d-ex-pipe, .supply[data-state="complete"][data-mode="lubricants"] .d-lubricants { opacity: 1; transform: scale(1); }
.supply.reveal .supply-art { opacity: 0; transition: opacity 600ms var(--ease-out); }
.supply.reveal.in .supply-art { opacity: 1; }
/* panel */
.supply-detail { position: relative; min-height: 84px; }
.spanel .desc { margin-top: 10px; }
.sim-done { display: none; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 1rem; line-height: 1.5; color: var(--navy); }
.sim-done i { flex: none; margin-top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--wadi); box-shadow: 0 0 0 3px rgba(153, 202, 59, .2); }
.sim-done span { color: var(--muted); }
.sim-try { margin-top: 16px; font-size: .9rem; color: var(--muted); }
.sim-try .lbl { display: block; margin-bottom: 2px; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--kingfisher-deep); }
.sim-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sim-actions .btn { min-height: 44px; border-radius: var(--radius); }
.sim-reset { display: none; }
.supply[data-state="complete"] .sim-done { display: flex; }
.supply[data-state="complete"] .sim-try, .supply[data-state="complete"] .sim-go, .supply[data-state="active"] .sim-go { display: none; }
.supply[data-state="complete"] .sim-reset { display: inline-flex; }
@media (min-width: 1024px) { .supply-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; } }
@media (max-width: 767px) { .supply-art { --nudge: .6px; } .supply-art .hit { transform-box: fill-box; transform-origin: center; transform: scale(1.7, 2.2); } .supply-art .lbl { display: none; } .supply-art .ln, .supply-art .shape { stroke-width: 1.4; } .sim-actions .btn { flex: 1 1 auto; } }

/* ---------- spec list ---------- */
/* ---------- terminal specifications: four metrics at a glance, then two capability columns ---------- */
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.metrics li { position: relative; padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.metrics li::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 2px; background: var(--kingfisher); transform-origin: 0 50%; }
.metrics .val { display: block; font-size: clamp(1.9rem, 3vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--navy); }
.metrics .val small { font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--kingfisher-deep); }
.metrics .lbl { display: block; margin-top: 10px; font-size: 0.72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.metrics li:last-child .val { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.15; }
.metrics li:last-child .lbl { color: var(--kingfisher-deep); }
.metrics.reveal li { opacity: 0; transform: translateY(10px); }
.metrics.reveal li::before { transform: scaleX(0); }
.metrics.reveal.in li { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out) calc(var(--i) * 110ms + 120ms), transform 500ms var(--ease-out) calc(var(--i) * 110ms + 120ms); }
.metrics.reveal.in li::before { transform: none; transition: transform 500ms var(--ease-out) calc(var(--i) * 110ms + 320ms); }
.caps { display: grid; gap: 32px 48px; margin-top: clamp(28px, 4vw, 44px); }
.caps .eyebrow { margin-bottom: 14px; }
.caps-list { margin: 0; padding: 0; list-style: none; }
.caps-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.95rem; color: var(--ink); }
.caps-list li strong { font-weight: 500; }
.caps-list li span { font-size: 0.8rem; color: var(--muted); }
.caps-list.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.caps-list.two li + li { margin-top: 0; }
.caps.reveal > div { opacity: 0; transform: translateY(8px); }
.caps.reveal.in > div { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out) calc(var(--i) * 120ms + 560ms), transform 500ms var(--ease-out) calc(var(--i) * 120ms + 560ms); }
@media (min-width: 640px) { .caps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; } }
@media (max-width: 479px) { .metrics { grid-template-columns: 1fr; } }
/* capacity -> infrastructure -> delivery: a thin route line leaves the specifications and arrives in the systems */
.spec-tail { display: flex; justify-content: center; padding-top: clamp(32px, 5vw, 56px); }
.spec-tail .line, .sys-lead .line { display: block; width: 1px; height: clamp(36px, 5vw, 56px); background: var(--kingfisher); }
.sys-lead { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 0; margin-bottom: calc(-1 * clamp(24px, 4vw, 48px)); }
.sys-lead .dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--wadi); }

/* ---------- terminal explorer: six systems over the schematic ----------
   The schematic sits straight on the navy (its background is transparent). A dimmed base carries the whole
   drawing; six clipped copies bring the selected system to full strength; one tracer segment per step runs a
   light along the fuel path. Two modes: "explore" (any system, overview button) and "follow" (the six steps in
   order with previous / next). State is data-mode / data-active on the stage; main.js keeps buttons, cards and
   segments in step. Motion: reveal, a one-time pulse on the first hotspot, a gentle focus scale, the tracer. */
.tex { position: relative; overflow: hidden; }
.tex__head { display: grid; gap: 28px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
/* segmented mode switch */
.tex__modes { display: inline-flex; padding: 4px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .04); }
.tex__mode { height: 38px; padding-inline: 18px; border-radius: 6px; font-size: .875rem; font-weight: 500; color: var(--on-dark-muted); transition: background-color 200ms var(--ease-out), color 200ms; }
.tex__mode:hover { color: var(--white); }
.tex__mode[aria-pressed="true"] { background: var(--white); color: var(--navy); }
.tex__main { display: grid; gap: clamp(28px, 4vw, 48px); }
/* stage */
.tex__stage { position: relative; }
.tex__schem { position: relative; transform-origin: var(--fx, 50%) var(--fy, 50%); transition: transform 900ms var(--ease-out); }
.tex__stage[data-active]:not([data-active=""]) .tex__schem { transform: scale(1.05); }
.schem img { display: block; width: 100%; height: auto; }
.schem-base { opacity: .92; transition: opacity 500ms var(--ease-out); }
.tex__stage[data-active]:not([data-active=""]) .schem-base { opacity: .42; }
.schem-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 480ms var(--ease-out), filter 480ms var(--ease-out); pointer-events: none; }
.schem-layer.is-active { opacity: 1; filter: drop-shadow(0 0 14px rgba(5, 136, 195, .45)); }
.schem-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.schem-flow path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 400ms var(--ease-out); }
.flow-seg { stroke: #e6f4fc; stroke-width: 3px; }
.flow-seg.is-done { opacity: .22; }
.flow-seg.is-active { opacity: 1; stroke-dasharray: .22 1.2; stroke-dashoffset: 1.42; animation: schem-flow 2.6s linear infinite; }
.tex__stage[data-mode="explore"] .flow-seg.is-active { stroke-dasharray: none; animation: none; opacity: .55; }
@keyframes schem-flow { from { stroke-dashoffset: 1.42; } to { stroke-dashoffset: 0; } }
.tex__stage.reveal .tex__schem, .tex__stage.reveal .tex__hotspots { opacity: 0; transition: opacity 700ms var(--ease-out); }
.tex__stage.reveal.in .tex__schem { opacity: 1; }
.tex__stage.reveal.in .tex__hotspots { opacity: 1; transition-delay: 500ms; }
.tex__stage .figcap { margin-top: 14px; text-align: end; }
/* hotspots */
.tex__hotspots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.tex__hotspots li { position: static; }
.tex__hot { position: absolute; left: var(--x); top: var(--y); transform: translate(-15px, -50%); display: flex; align-items: center; gap: 8px; padding: 0; cursor: pointer; color: var(--white); }
/* an invisible hit area brings the 28-30 px marker up to a ~44 px touch target without enlarging it */
.tex__hot::before { content: ""; position: absolute; inset: -8px; }
.tex__hot .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(0, 42, 65, .78); font-size: .68rem; font-weight: 600; letter-spacing: .06em; transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.tex__hot .lbl { padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(0, 42, 65, .7); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); opacity: .85; transition: opacity 200ms, color 200ms; }
.tex__hot:hover .n, .tex__hot:focus-visible .n { border-color: var(--white); transform: scale(1.1); }
.tex__hot:hover .lbl { opacity: 1; }
.tex__hot[aria-pressed="true"] .n { background: var(--white); border-color: var(--white); color: var(--navy); box-shadow: 0 0 0 4px rgba(153, 202, 59, .35); transform: scale(1.12); }
.tex__hot[aria-pressed="true"] .lbl { opacity: 1; color: var(--white); }
.tex__hot:focus-visible { outline: none; }
.tex__hot:focus-visible .n { outline: 2px solid var(--white); outline-offset: 3px; }
/* idle hotspots breathe a soft ring in their own border colour, staggered so they never blink in step */
@keyframes tex-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
.tex__stage.in .tex__hot:not([aria-pressed="true"]) .n { animation: tex-pulse 2.8s ease-out infinite; animation-delay: calc(var(--i, 0) * .4s + 1.2s); }
.tex__hot:hover .n, .tex__hot:focus-visible .n { animation: none; }
.tex__overview { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); background: rgba(0, 42, 65, .6); }
.tex__overview:hover { border-color: rgba(255, 255, 255, .6); color: var(--white); }
.tex__overview::before { content: ""; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; }
/* panel */
.tex__panel { position: relative; }
.tex__card .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tex__card .eyebrow .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); font-size: .68rem; letter-spacing: .06em; color: var(--white); }
.tex__card .h3 { max-width: 20ch; }
.tex__card > p:not(.eyebrow) { margin-top: 14px; max-width: 40ch; font-size: 1rem; line-height: 1.6; color: var(--on-dark-muted); }
.tex__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.tex__facts li { padding: 6px 11px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500; color: var(--white); }
.tex__nav[hidden], .tex__overview[hidden], .tex__card[hidden] { display: none; }
.tex__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.tex__nav .btn { border-radius: var(--radius); }
.tex__nav .btn:disabled { opacity: .35; pointer-events: none; }
.tex__count { margin-inline-start: auto; font-size: .72rem; font-weight: 600; letter-spacing: .16em; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
/* step navigation */
.tex__steps { margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line-dark); }
.tex__steps ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.tex__steps ol::-webkit-scrollbar { display: none; }
.tex__steps li { flex: 1 0 auto; }
.tex__steps button { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 10px 14px; border-top: 2px solid transparent; margin-top: -1px; font-size: .8rem; font-weight: 500; color: var(--on-dark-muted); white-space: nowrap; transition: color 200ms, border-color 300ms var(--ease-out); }
.tex__steps button .n { font-size: .66rem; font-weight: 600; letter-spacing: .12em; color: var(--kingfisher-soft); }
.tex__steps button:hover { color: var(--white); }
.tex__steps button[aria-current="step"] { color: var(--white); border-top-color: var(--wadi); }
.tex__steps button[aria-current="step"] .n { color: var(--white); }
.tex__steps button.is-done { color: var(--on-dark); }
@media (min-width: 768px) {
  .tex__head { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 1024px) {
  .tex__main { grid-template-columns: minmax(0, 66fr) minmax(320px, 34fr); align-items: center; column-gap: clamp(40px, 5vw, 72px); }
  .tex__stage { margin-inline-start: calc(-1 * var(--gutter) / 2); }
}
@media (max-width: 767px) {
  .tex__hot .lbl { display: none; }
  .tex__hot { transform: translate(-14px, -50%); }
  .tex__hot .n { width: 28px; height: 28px; }
  .tex__stage[data-active]:not([data-active=""]) .tex__schem { transform: scale(1.03); }
  .tex__steps button { padding-inline: 8px; }
  .tex__steps button .lbl { display: none; }
  .tex__steps button[aria-current="step"] .lbl { display: inline; }
  .tex__nav .btn { flex: 1 1 auto; }
  .tex__count { flex-basis: 100%; margin-inline-start: 0; text-align: end; }
}
.dash-list { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.dash-list li { display: flex; align-items: center; gap: 8px; }
.dash-list li::before { content: ""; display: block; width: 12px; height: 1px; background: var(--kingfisher); }.facilities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
.facilities li { padding-block: 20px; border-top: 1px solid var(--line); font-weight: 500; }
@media (min-width: 768px) { .facilities { grid-template-columns: repeat(5, 1fr); } }
.values { display: grid; gap: 28px 40px; }
.values li { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.values .n { grid-row: 1 / 3; align-self: start; font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: var(--kingfisher-deep); padding-top: 6px; }
.values li:nth-child(3n+2) .n { color: var(--wadi); }
.values .name { font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.values .tag { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values { grid-template-columns: repeat(3, 1fr); } }

/* ---------- process route: one line, drawn once, with a vessel on its leading edge ---------- */
.process { position: relative; }
.process .h { display: none; position: relative; }
.process .v { position: relative; padding-top: 28px; }
.process .route, .process .vessel, .benefits .route, .benefits .vessel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.process .route, .benefits .route { z-index: 0; }
.process .vessel, .benefits .vessel { z-index: 2; opacity: 0; }
.process .route path, .benefits .route path { fill: none; stroke: var(--kingfisher); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.process .ship, .benefits .ship { fill: var(--kingfisher-deep); stroke: var(--white); stroke-width: 1.2; stroke-linejoin: round; paint-order: stroke; }
.process .h ol { display: grid; grid-template-columns: repeat(4, 1fr); }
.process .h li { position: relative; display: flex; flex-direction: column; align-items: center; padding-inline: 16px; text-align: center; }
.process .node { position: relative; z-index: 1; display: block; width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--white); box-shadow: 0 0 0 0 rgba(5, 136, 195, 0); transition: transform 320ms var(--ease-out), opacity 320ms, border-color 320ms, background-color 320ms, box-shadow 320ms; }
.process.js li:not(.active):not(.done) .node { opacity: .55; }
.process li.active .node { opacity: 1; transform: scale(1.1); border-color: var(--kingfisher); box-shadow: 0 0 0 4px rgba(5, 136, 195, 0.16); animation: node-pulse 220ms var(--ease-out); }
.process li.done .node { opacity: 1; transform: none; border-color: var(--kingfisher); background: var(--kingfisher); box-shadow: 0 0 0 0 rgba(5, 136, 195, 0); }
.process li:nth-child(3).active .node { border-color: var(--wadi); box-shadow: 0 0 0 4px rgba(153, 202, 59, 0.22); }
.process li:nth-child(3).done .node { border-color: var(--wadi); background: var(--wadi); }
.process li:nth-child(4).done .node { background: var(--white); box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 9px var(--kingfisher); }
@keyframes node-pulse { 0% { transform: scale(1); } 55% { transform: scale(1.16); } 100% { transform: scale(1.1); } }
.process .n { margin-top: 24px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; color: var(--kingfisher-deep); }
.process h3 { margin-top: 4px; font-size: 1.125rem; font-weight: 600; color: var(--muted); transition: color 380ms; }
.process p { margin-top: 8px; max-width: 28ch; font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
.process.js .n, .process.js h3 { opacity: .45; transform: translateY(8px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out), color 380ms; }
.process.js p { opacity: .35; transform: translateY(8px); transition: opacity 420ms var(--ease-out) 60ms, transform 420ms var(--ease-out) 60ms; }
.process li.active .n, .process li.done .n, .process li.active h3, .process li.done h3, .process li.active p, .process li.done p { opacity: 1; transform: none; }
.process li.active h3, .process li.done h3 { color: var(--ink); }
.process .v ol { display: flex; flex-direction: column; gap: 32px; }
.process .v li { position: relative; padding-inline-start: 40px; }
.process .v .node { position: absolute; inset-inline-start: 0; top: 4px; }
.process .v .n { margin-top: 0; }
@media (min-width: 768px) { .process .h { display: block; } .process .v { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .process .vessel, .benefits .vessel { display: none; }
  .benefits.js .ring, .benefits.js h3, .benefits.js p { opacity: 1 !important; transform: none !important; transition: none; animation: none; }
  .process .node, .process.js .n, .process.js h3, .process.js p { opacity: 1 !important; transform: none !important; transition: none; animation: none; }
}

/* ---------- media framing ---------- */
.frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.1); background: var(--navy-deep); }
.frame.video { aspect-ratio: 16 / 9; }
.frame video, .frame img { width: 100%; height: 100%; object-fit: cover; }
.frame .fade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,42,65,.45), transparent 50%); pointer-events: none; }
.figcap { margin-top: 12px; font-size: 0.75rem; color: var(--muted); }
.on-dark .figcap { color: var(--on-dark-muted); }/* ---------- terminal feature (home) ----------
   Asymmetric editorial split: the aerial runs from the viewport edge to roughly two thirds of the width; the
   content sits in a narrow ruled column beside it. Metrics read as a technical ledger, systems as compact tags. */
.tfeat { position: relative; overflow: hidden; background: var(--white); }
/* atmosphere: the photograph's cool sky tones continue under the content, left to right, all the way to the
   viewport edge, thinning to near-white well before the copy. Full-bleed on the section, behind the container.
   Colours come from the aerial's right edge (sky #3b4e82 read through the page's off-white). */
.tfeat::before, .tfeat::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tfeat::before { z-index: 0; background: linear-gradient(90deg,
  rgba(47, 69, 112, .22) 0%, rgba(47, 69, 112, .22) 42%, rgba(108, 128, 160, .20) 55%, rgba(188, 199, 214, .40) 62%,
  rgba(233, 238, 244, .85) 68%, var(--white) 75%, var(--white) 100%); }
/* on top: a faint glow at the image/content seam, and a white ease-in/out at the section's top and bottom so
   the wash dissolves into the white neighbouring sections with no edge */
.tfeat::after { z-index: 0; background:
  linear-gradient(to bottom, var(--white) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 74%, var(--white) 100%),
  radial-gradient(ellipse at 62% 48%, rgba(100, 150, 190, .10), transparent 55%); }
.tfeat > .container-wide { position: relative; z-index: 1; padding-block: var(--section-y); }
/* the products lane that follows draws a horizon hairline at its top; with the atmosphere dissolving into white
   above it, that line would read as an edge, so it is dropped when the lane directly follows this section */
.tfeat + .lane-section > .horizon { display: none; }
.tfeat-grid { display: grid; gap: 40px; }
.tfeat-media { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.tfeat-media::before { content: ""; position: absolute; top: 18px; left: 18px; right: -18px; bottom: -18px; border: 1px solid rgba(18, 49, 63, .10); pointer-events: none; }
/* on the stacked layout the image dissolves downward into the copy: a soft bottom edge and a cool wash beneath it */
.tfeat-media::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: clamp(120px, 28vw, 220px); pointer-events: none; z-index: -1;
  background: linear-gradient(to bottom, rgba(108, 128, 160, .20), rgba(188, 199, 214, .10) 55%, rgba(188, 199, 214, 0)); }
.tfeat-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy-deep);
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, rgba(0, 0, 0, .55) 97%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 90%, rgba(0, 0, 0, .55) 97%, transparent 100%); }
.tfeat-img img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0) scale(1.08); will-change: transform; }
.tfeat-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 42, 65, .5), rgba(0, 42, 65, 0) 38%); pointer-events: none; }
.tfeat-cap { position: absolute; left: var(--gutter); bottom: 18px; display: flex; align-items: center; gap: 12px; color: var(--white); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.tfeat-cap .k { font-weight: 600; }
.tfeat-cap .v { display: flex; align-items: center; gap: 12px; opacity: .78; }
.tfeat-cap .v::before { content: ""; width: 22px; height: 1px; background: rgba(255, 255, 255, .6); }
.tfeat-body { position: relative; max-width: 60ch; }
.tfeat-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tfeat-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--kingfisher); }
.tfeat-h { font-size: clamp(1.85rem, 2.3vw, 2.7rem); color: var(--navy); }
.tfeat-lead { max-width: 40ch; }
.tfeat-facts { margin-top: 36px; }
.tfeat-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.tfeat-metrics li { position: relative; padding: 22px 16px 20px 0; }
.tfeat-metrics li::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 2px; background: var(--kingfisher); }
.tfeat-metrics li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.tfeat-metrics li + li::before { left: 22px; }
.tfeat-metrics .num { display: flex; align-items: baseline; gap: 7px; font-size: clamp(1.7rem, 2.1vw, 2.15rem); color: var(--navy); }
.tfeat-metrics .num .x { font-size: 0.58em; font-weight: 400; color: var(--kingfisher-deep); }
.tfeat-metrics .lbl { display: block; margin-top: 8px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tfeat-systems { margin-top: 26px; }
.tfeat-systems .k { display: block; margin-bottom: 10px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tfeat-systems ul { display: flex; flex-wrap: wrap; gap: 8px; }
.tfeat-systems li { padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--offwhite); font-size: 0.8rem; line-height: 1.3; color: var(--ink); }
.tfeat-cta { margin-top: 34px; }
.tfeat-cta .btn { border-radius: var(--radius); }
@media (max-width: 479px) {
  .tfeat-metrics { grid-template-columns: 1fr; }
  .tfeat-metrics li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .tfeat-metrics li + li::before { left: 0; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .tfeat-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 64px); align-items: start; max-width: none; }
  .tfeat-facts { padding-top: 4px; }
  .tfeat-facts { margin-top: 0; }
  .tfeat-metrics { margin-top: 0; }
}
@media (max-width: 1023px) {
  /* stacked: the atmosphere runs top to bottom instead, faint above the image, gone by the copy */
  .tfeat::before { background: linear-gradient(to bottom, rgba(47, 69, 112, 0) 0%, rgba(47, 69, 112, .10) 10%, rgba(47, 69, 112, .10) 22%, rgba(108, 128, 160, .06) 40%, rgba(255, 255, 255, 0) 60%); }
  .tfeat::after { background: none; }
}
@media (min-width: 1024px) {
  .tfeat-grid { grid-template-columns: minmax(0, 66fr) minmax(360px, 34fr); gap: clamp(40px, 5vw, 84px); align-items: center; }
  .tfeat-media { margin-inline: 0; margin-inline-start: calc(-1 * var(--gutter) - max(0px, (100vw - var(--container-wide)) / 2)); }
  .tfeat-media::before { top: 22px; left: auto; width: 56%; right: -22px; bottom: -22px;
    -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 100%); mask-image: linear-gradient(to right, #000 50%, transparent 100%); }
  .tfeat-media::after { display: none; }
  .tfeat-img { aspect-ratio: auto; height: clamp(440px, 44vw, 660px);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 86%, rgba(0, 0, 0, .9) 93%, rgba(0, 0, 0, .45) 98%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 86%, rgba(0, 0, 0, .9) 93%, rgba(0, 0, 0, .45) 98%, transparent 100%); }
  .tfeat-body { max-width: none; padding-inline-start: clamp(28px, 3vw, 48px); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* narrower content column: the atmosphere thins out a little earlier */
  .tfeat::before { background: linear-gradient(90deg,
    rgba(47, 69, 112, .22) 0%, rgba(47, 69, 112, .22) 38%, rgba(108, 128, 160, .20) 50%, rgba(188, 199, 214, .40) 57%,
    rgba(233, 238, 244, .85) 63%, var(--white) 70%, var(--white) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .tfeat-img img { transform: none; will-change: auto; }
}

/* ---------- vision / mission (About page) ----------
   Two connected strategic statements. Vision on navy with the copy toward the left; Mission on a pale cool
   blue-grey with the copy toward the right. One 1px spine runs down the left of both, with a small point where
   Vision begins and a green waypoint at the transition. Each section ghosts its own word into the corner opposite
   the copy. Motion is the reveal system: eyebrow, then statement, the spine extending, the ghost fading in. */
.vm { --vm-pad: clamp(80px, 9vw, 140px); position: relative; overflow: hidden; }
.vm--mission { background: #f2f6f8; color: var(--ink); }
.vm__wrap { position: relative; z-index: 1; padding-block: var(--vm-pad); }
.vm__copy { position: relative; }
.vm .eyebrow .n { margin-inline-end: 10px; }
.vm .eyebrow .n::after { content: "\2014"; margin-inline-start: 10px; }
.vm .eyebrow { margin-bottom: 22px; }
.vm__stmt { max-width: 21ch; font-size: clamp(2rem, 3.2vw, 3.6rem); line-height: 1.04; letter-spacing: -.022em; }
.vm--vision .vm__stmt { color: var(--white); }
.vm--mission .vm__stmt { color: var(--navy); }
/* the spine */
.vm__line { position: absolute; top: 0; bottom: 0; left: var(--gutter); width: 1px; color: var(--white); }
.vm--mission .vm__line { color: var(--navy); }
.vm__line .bar { position: absolute; inset: 0; width: 1px; background: currentColor; opacity: .26; transform-origin: 50% 0; transform: scaleY(0); transition: transform 900ms var(--ease-out) 150ms; }
/* the only marker on the spine: a green dot where the voyage starts (the port of origin); the line begins there */
.vm__line .dot { position: absolute; left: -4px; top: calc(var(--vm-pad) + 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--wadi); box-shadow: 0 0 0 4px rgba(153, 202, 59, .16); opacity: 0; transition: opacity 400ms var(--ease-out) 700ms; }
.vm--vision .vm__line .bar { top: calc(var(--vm-pad) + 8px); }
/* the vessel: the top-down container-ship photo, bow down, sailing the spine from the origin dot through Mission (main.js moves it).
   A soft wake trails from the stern in the spine's own colour; the hull sways a hair so the water reads as moving. */
.vm__ship { --beam: 24px; position: absolute; left: 0; top: 0; width: var(--beam); margin-left: calc(var(--beam) / -2); transform: translateY(-50%); opacity: 0; pointer-events: none; }
.vm__ship img { display: block; width: 100%; height: auto; max-width: none; position: relative; z-index: 1; filter: drop-shadow(0 4px 6px rgba(0, 20, 35, .35)); animation: vm-sway 5s ease-in-out infinite; transform-origin: 50% 60%; }
.vm__ship .wake { position: absolute; left: 50%; bottom: calc(100% - 14px); width: calc(var(--beam) * 2.6); height: calc(var(--beam) * 5.5); transform: translateX(-50%); opacity: .22; pointer-events: none;
  background: linear-gradient(to top, currentColor, transparent 78%); clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0); animation: vm-wake 2.4s ease-in-out infinite; }
.vm__ship .wake::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  background: repeating-linear-gradient(to top, transparent 0 6px, currentColor 6px 12px); opacity: .55; -webkit-mask-image: linear-gradient(to top, #000, transparent 85%); mask-image: linear-gradient(to top, #000, transparent 85%); animation: vm-wash 900ms linear infinite; }
@keyframes vm-sway { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } }
@keyframes vm-wake { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .2; } 50% { transform: translateX(-50%) scaleX(1.14); opacity: .27; } }
@keyframes vm-wash { to { transform: translateY(-12px); } }
.vm__line.reveal { opacity: 1; transform: none; }
.vm__line.reveal.in .bar { transform: scaleY(1); }
.vm__line.reveal.in .dot { opacity: 1; }
/* the ghosted word */
.vm__ghost { position: absolute; bottom: -.14em; z-index: 0; font-size: clamp(6rem, 20vw, 22rem); font-weight: 700; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; pointer-events: none; user-select: none; }
.vm--vision .vm__ghost { right: -.04em; color: var(--white); --ghost: .05; }
.vm--mission .vm__ghost { left: -.04em; color: var(--navy); --ghost: .045; }
.vm__ghost { opacity: var(--ghost); }
@media (min-width: 768px) {
  .vm--vision .vm__copy { margin-inline-start: 10%; }
  .vm--mission .vm__copy { margin-inline-start: 30%; }
}
@media (min-width: 1024px) {
  .vm--vision .vm__copy { margin-inline-start: 14%; }
  .vm--mission .vm__copy { margin-inline-start: 46%; }
}
/* mobile: a slim ship lane on the left (the spine centred in it, the vessel a little smaller, the wake softer) and
   the copy shifted right of it by real layout space. The vessel sails Vision only; the spine carries on faintly
   into Mission and a small green waypoint marks the hand-off. main.js shortens the voyage to match. */
@media (max-width: 767px) {
  .vm { --lane: 56px; }
  .vm__line { left: calc(var(--gutter) + var(--lane) / 2); }
  .vm__copy { margin-inline-start: calc(var(--lane) + 12px); }
  .vm__stmt { max-width: none; }
  .vm__ship { --beam: 18px; }
  .vm__ship .wake { opacity: .14; filter: blur(1px); }
  .vm__ship .wake::before { opacity: .4; }
  .vm--mission .vm__line .bar { opacity: .16; }
  .vm--mission .vm__line::after { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--wadi); box-shadow: 0 0 0 3px rgba(153, 202, 59, .16); }
  .vm--mission .vm__ship { display: none; }
  .vm__ghost { font-size: clamp(5rem, 30vw, 9rem); }
  .vm--mission .vm__ghost { left: auto; right: -.04em; }
}
@media (max-width: 360px) {
  .vm { --lane: 44px; }
  .vm__copy { margin-inline-start: calc(var(--lane) + 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .vm__line .bar, .vm__line .dot { transition: none; }
  .vm__line .bar { transform: scaleY(1); }
  .vm__line .dot { opacity: 1; }
  .vm__ship { display: none; }
  .vm__ship img, .vm__ship .wake, .vm__ship .wake::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  /* the lane still reads complete: the vessel sits still a third of the way down Vision, no wake motion */
  .vm--vision .vm__ship { display: block; top: 58%; opacity: .9; }
  .vm__ship .wake { animation: none; opacity: .1; }
}

/* ---------- Oman Vision 2040 (About page) ----------
   National-impact statement between Mission and Core values. Very pale blue-grey ground, an oversized "2040"
   engraved into the background (decorative, cropped by the section), copy left, a four-point port line right,
   three ruled themes below. Motion is the site's reveal system only; the number fades in a little slower. */
.v2040 { background: #edf2f5; color: var(--ink); }
.v2040__num { position: absolute; right: -0.04em; bottom: -0.14em; z-index: 0; display: flex; gap: 0; font-size: clamp(12rem, 27vw, 34rem); font-weight: 400; line-height: .8; letter-spacing: -.05em; color: var(--navy); opacity: 0; user-select: none; pointer-events: none; }
.v2040__num.reveal { transform: translateY(24px); transition: opacity 1400ms var(--ease-out) 150ms, transform 1400ms var(--ease-out) 150ms; }
.v2040__num.reveal.in { opacity: .055; transform: none; }
.v2040__grid { position: relative; z-index: 1; display: grid; gap: 40px 48px; }
.v2040__copy { max-width: 60ch; }
.v2040__copy .eyebrow { margin-bottom: 18px; }
.v2040__h { color: var(--navy); }
.v2040__lead { max-width: 52ch; margin-top: 4px; }
.v2040__ctx { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* the port line: a hairline with four points in coastal order; Duqm is the one green accent */
.v2040__ports { position: relative; margin-top: 28px; height: 44px; }
.v2040__ports::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--line-strong); }
.v2040__ports ul { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.v2040__ports li { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.v2040__ports li i { display: block; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--kingfisher-deep); box-shadow: 0 0 0 3px #edf2f5; }
.v2040__ports li.hub i { width: 9px; height: 9px; margin-top: 4px; background: var(--wadi); }
.v2040__ports li span { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.v2040__ports li.hub span { color: var(--navy); }
.v2040__themes { display: grid; gap: 28px 40px; margin: 8px 0 0; padding: 0; list-style: none; }
.v2040__themes li { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.v2040__themes .eyebrow { margin-bottom: 10px; }
.v2040__themes p:not(.eyebrow) { max-width: 34ch; font-size: .95rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 767px) {
  .v2040__num { right: -0.02em; bottom: -0.1em; flex-direction: column; font-size: clamp(9rem, 44vw, 14rem); line-height: .82; }
  .v2040__ports { margin-top: 22px; }
}
@media (min-width: 640px) { .v2040__themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .v2040__grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); column-gap: clamp(48px, 6vw, 96px); row-gap: clamp(56px, 6vw, 88px); align-items: end; }
  .v2040__copy { max-width: none; }
  .v2040__aside { padding-bottom: 6px; }
  .v2040__themes { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .v2040__num.reveal, .v2040__num.reveal.in { opacity: .055; transform: none; transition: none; }
}

/* ---------- port map + port switcher ----------
   Left: the artwork map with the drawn sea route and blinking markers. Right: a flat editorial switcher
   (Duqm | Sohar | Muscat | Salalah) over one detail panel. Selecting a port, by tab or by map node, drives the
   node emphasis, the label weight, the highlighted stretch of route and the panel together. */
.portmap { display: grid; gap: 32px; }
.portmap .node-hit { cursor: pointer; outline: none; }
.portmap .node-hit:focus-visible { stroke: var(--wadi); stroke-width: 2; }
.portmap figure { position: relative; }
.portmap figure::before { content: ""; position: absolute; inset: -6% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 58% 52% at 48% 50%, rgba(5,136,195,.14), rgba(5,136,195,.05) 48%, transparent 72%); }
.portmap svg { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; height: auto; max-height: min(78vh, 780px); margin-inline: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 90%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 20%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 90%, transparent); mask-composite: intersect; }
.portmap .basemap { opacity: 0; filter: saturate(.45) contrast(.92) brightness(.82); transition: opacity 1100ms var(--ease-out); }
.portmap.in .basemap { opacity: .72; }
.portmap .tint { opacity: .34; }
/* route: drawn once; the stretch nearest the selected port glides into place */
.portmap .route, .portmap .route-glow { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.portmap .route { stroke: var(--kingfisher); stroke-width: 3; opacity: .7; }
.portmap .route-glow { stroke: var(--kingfisher); stroke-width: 14; opacity: .1; }
.portmap.in .route, .portmap.in .route-glow { animation: draw 1600ms var(--ease-out) forwards 500ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.portmap .route-active { fill: none; stroke: #bfe6fb; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 170 1000; stroke-dashoffset: -490; opacity: 0;
  transition: stroke-dasharray 600ms var(--ease-inout), stroke-dashoffset 600ms var(--ease-inout), opacity 500ms var(--ease-out); }
.portmap.in .route-active { opacity: .9; transition-delay: 0ms; }
.portmap.in .route-active.pulse-once { animation: seg-pulse 900ms var(--ease-out) 1; }
@keyframes seg-pulse { 0% { stroke-width: 4; opacity: .9; } 35% { stroke-width: 7; opacity: 1; } 100% { stroke-width: 4; opacity: .9; } }
/* markers: soft blink when idle, steady and bright when selected */
.portmap .port-node .ring { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: stroke 300ms, stroke-opacity 300ms; }
.portmap .port-node .pdot { fill: var(--kingfisher); transform-box: fill-box; transform-origin: center; transition: fill 300ms; }
.portmap .port-node .halo { fill: var(--wadi); opacity: .1; transform-box: fill-box; transform-origin: center; }
/* ambient cue: every marker breathes, each on its own clock (--bd / --bdl set per port), so they never pulse in step.
   Normal ports: the ring swells and brightens a little and the core barely dims; the dot never disappears.
   Duqm: a slow green beacon — the core swells slightly while the halo drifts outward and fades, then rests. */
@keyframes port-breathe-ring { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .65; transform: scale(1.12); } }
@keyframes port-breathe-core { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes port-breathe-ring-active { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes port-beacon-core { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.06); } }
@keyframes port-beacon-halo { 0% { opacity: .3; transform: scale(1); } 60% { opacity: 0; transform: scale(1.42); } 100% { opacity: 0; transform: scale(1.42); } }
.portmap.in .port-node .ring { animation: port-breathe-ring var(--bd, 4.6s) ease-in-out var(--bdl, 0s) infinite; }
.portmap.in .port-node .pdot { animation: port-breathe-core var(--bd, 4.6s) ease-in-out var(--bdl, 0s) infinite; }
@keyframes blink { 0%, 100% { opacity: .4; } 50% { opacity: .9; } }
.portmap .port-node.is-active .pdot { animation: none; opacity: 1; }
.portmap.in .port-node.is-active .ring { animation: port-breathe-ring-active var(--bd, 4.6s) ease-in-out var(--bdl, 0s) infinite; }
.portmap .port-node.is-active .ring { stroke: var(--white); stroke-width: 2.5; }
.portmap .port-node.is-active .pdot { fill: var(--white); }
/* Duqm keeps its green treatment in every state and its own beacon instead of the ring breath */
.portmap .port-node--primary .ring { stroke: rgba(153, 202, 59, .7); }
.portmap .port-node--primary .pdot { fill: var(--wadi); }
.portmap .port-node--primary.is-active .ring { stroke: var(--wadi); }
.portmap .port-node--primary.is-active .pdot { fill: var(--wadi); }
.portmap .port-node--primary .halo { opacity: .18; }
.portmap.in .port-node--primary .ring { animation: none; opacity: .85; }
.portmap.in .port-node--primary .pdot { animation: port-beacon-core var(--bd, 5s) ease-in-out infinite; opacity: 1; }
.portmap.in .port-node--primary .halo { animation: port-beacon-halo var(--bd, 5s) ease-out infinite; }
.portmap .port-node--primary.is-active .halo { opacity: .3; }
.portmap.in .port-node.is-active.bump .ring { animation: node-bump 500ms var(--ease-out) 1, port-breathe-ring-active var(--bd, 4.6s) ease-in-out 500ms infinite; }
.portmap.in .port-node--primary.is-active.bump .ring { animation: node-bump 500ms var(--ease-out) 1; }
@keyframes node-bump { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* hover (fine pointers) and keyboard focus: the breath pauses, the ring and label strengthen, the core grows a touch */
@media (hover: hover) and (pointer: fine) {
  .portmap .port-node:hover .ring, .portmap .port-node:hover .pdot, .portmap .port-node:hover .halo { animation-play-state: paused; }
  .portmap .port-node:hover .ring { stroke: var(--white); stroke-width: 2.5; opacity: 1; }
  .portmap .port-node--primary:hover .ring { stroke: var(--wadi); }
  .portmap .port-node:hover .pdot { opacity: 1; transform: scale(1.15); }
  .portmap .port-node:hover .port-label { fill: rgba(255, 255, 255, .92); }
}
.portmap .port-node:focus-within .ring { stroke: var(--white); opacity: 1; }
.portmap .port-node--primary:focus-within .ring { stroke: var(--wadi); }
.portmap .port-node:focus-within .port-label { fill: rgba(255, 255, 255, .92); }
.portmap .pnode { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.portmap.in .pnode { animation: node-in 500ms var(--ease-out) forwards; }
.portmap.in .pnode:nth-of-type(1) { animation-delay: 1500ms; } .portmap.in .pnode:nth-of-type(2) { animation-delay: 700ms; } .portmap.in .pnode:nth-of-type(3) { animation-delay: 1000ms; } .portmap.in .pnode:nth-of-type(4) { animation-delay: 1900ms; }
@keyframes node-in { to { opacity: 1; transform: scale(1); } }
/* labels: drawn by the SVG, active one at full strength */
.portmap .port-label { font-family: var(--font); fill: rgba(255,255,255,.52); paint-order: stroke; stroke: rgba(0,42,65,.7); stroke-width: 4px; stroke-linejoin: round; transition: fill 300ms var(--ease-out); pointer-events: none; }
.portmap .port-node.is-active .port-label { fill: var(--white); font-weight: 600; }
/* the switcher */
.port-ui { display: flex; flex-direction: column; }
/* ---------- flat route tabs (shared: port map, contact locations, products, supply modes, terminal systems) ----------
   Text only. The selected tab carries a Kingfisher underline and a Wadi waypoint; the strip scrolls sideways on
   narrow screens. Panels swap with a short fade (main.js: .out then hidden, then .in). */
.rtabs { display: flex; gap: clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--line); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs [role="tab"] { position: relative; flex: none; padding: 6px 0 16px; font-family: var(--font); font-size: 0.8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); opacity: .55; background: none; border: 0; cursor: pointer; scroll-snap-align: start; transition: opacity 240ms var(--ease-out); }
.rtabs [role="tab"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--kingfisher); transform: scaleX(0); transform-origin: 0 50%; transition: transform 320ms var(--ease-out); }
.rtabs [role="tab"]::before { content: ""; position: absolute; right: -4px; bottom: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--wadi); opacity: 0; transform: scale(.4); transition: opacity 240ms var(--ease-out) 240ms, transform 240ms var(--ease-out) 240ms; }
.rtabs [role="tab"]:hover { opacity: .85; }
.rtabs [role="tab"]:hover::after { transform: scaleX(.35); }
.rtabs [role="tab"][aria-selected="true"] { opacity: 1; }
.rtabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.rtabs [role="tab"][aria-selected="true"]::before { opacity: 1; transform: scale(1); }
.rtabs [role="tab"]:focus-visible { outline: 2px solid var(--kingfisher); outline-offset: 4px; border-radius: 2px; }
.on-dark .rtabs { border-bottom-color: var(--line-dark); }
.on-dark .rtabs [role="tab"] { color: var(--white); opacity: .5; }
.rpanel[hidden] { display: none !important; }
.rpanel { opacity: 0; transform: translateY(8px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
.rpanel.in { opacity: 1; transform: none; }
.rpanel.out { opacity: 0; transform: translateY(-6px); transition-duration: 160ms; }
@media (max-width: 767px) { .rtabs { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }
/* the detail panel: one editorial block, not a card */
.port-detail { position: relative; padding-top: clamp(24px, 3vw, 36px); }
.port-panel { opacity: 0; transform: translateY(6px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.port-panel.in { opacity: 1; transform: none; }
.port-panel.out { opacity: 0; transform: translateY(-4px); transition-duration: 180ms; }
.port-meta { margin-top: 24px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.port-panel .h3 { margin-top: 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.port-panel .cap { margin-top: 14px; max-width: 44ch; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; color: var(--on-dark-muted); }
.port-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 16px clamp(24px, 3vw, 44px); margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line-dark); list-style: none; }
.port-stats .v { display: block; font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--white); }
.port-stats .v small { font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--blue-tint); }
.port-stats .l { display: block; margin-top: 8px; font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.port-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 500; color: var(--blue-tint); }
.port-cta .arrow { width: 16px; height: 16px; overflow: visible; transition: transform 240ms var(--ease-out); }
.port-cta:hover { color: var(--white); } .port-cta:hover .arrow { transform: translateX(5px); }
@media (min-width: 1024px) { .portmap { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: center; } }
@media (max-width: 1023px) { .portmap svg { max-height: min(64vh, 560px); } .port-stats { gap: 14px 24px; } .port-panel .cap { margin-top: 10px; } }
@media (max-width: 767px) { .portmap .route-glow { opacity: .08; } }
/* the invisible hit circle grows as the map scales down, so every marker keeps a ~44 px touch target */
@media (max-width: 1279px) { .portmap .node-hit { r: 90px; } }
@media (max-width: 767px) { .portmap .node-hit { r: 96px; } }
@media (max-width: 479px) { .portmap .node-hit { r: 120px; } }
@media (prefers-reduced-motion: reduce) {
  .portmap .basemap { opacity: 1; transition: none; }
  .portmap .route, .portmap .route-glow { stroke-dashoffset: 0; animation: none; }
  .portmap .route-active { transition: none; opacity: .9; }
  .portmap.in .route-active.pulse-once { animation: none; }
  .portmap .pnode { opacity: 1; transform: none; animation: none; }
  .portmap.in .port-node .ring, .portmap.in .port-node .pdot, .portmap.in .port-node .halo, .portmap.in .port-node.is-active .ring, .portmap.in .port-node--primary .pdot, .portmap.in .port-node--primary .halo { animation: none; }
  .portmap.in .port-node .ring { opacity: .6; } .portmap.in .port-node .pdot { opacity: 1; } .portmap.in .port-node.is-active .ring { opacity: 1; }
  .portmap.in .port-node.is-active.bump .ring { animation: none; }
  .portmap .port-node--primary .halo { opacity: .22; }
  .port-panel, .portmap .port-label { transition: none; }
}

/* ---------- global port network (home, TFG OOMCO section) ----------
   A recolored world map with one quiet breathing marker per port and Duqm as the green hub. No routes. Marker
   positions are percentages of the image box (tools/world_ports.py) so they stay on the geography at any size;
   each marker has its own duration and delay so the network never blinks in step. Motion is transform/opacity only. */
.tfg-grid { display: grid; gap: 48px; }
.tfg-copy { max-width: 60ch; }
.gpm { position: relative; margin: 0; }
.gpm.reveal { transform: translateY(10px); transition-duration: 800ms; }
.gpm__stage { position: relative; padding: clamp(4px, 1vw, 14px); }
/* the geography is a Natural Earth re-projection (tools/derive_world_map.py): meridians bow toward the far west and
   east and the world's outline is a soft ellipse. No panel, no outline: the land is blended into the section's navy
   with a wide, gentle elliptical fade and a faint wash behind it, so the edges dissolve rather than stop. */
.gpm__map { position: relative; }
.gpm__map::before { content: ""; position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 54% at 52% 46%, rgba(185, 222, 238, .07), rgba(185, 222, 238, .035) 55%, rgba(185, 222, 238, 0) 100%); }
.gpm__base { position: relative; z-index: 1; width: 100%; height: auto; display: block; opacity: .78;
  -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 50%, #000 52%, rgba(0, 0, 0, .8) 74%, rgba(0, 0, 0, .45) 90%, rgba(0, 0, 0, .2) 100%);
  mask-image: radial-gradient(ellipse 58% 60% at 50% 50%, #000 52%, rgba(0, 0, 0, .8) 74%, rgba(0, 0, 0, .45) 90%, rgba(0, 0, 0, .2) 100%); }
.gpm__ports { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 2; }
.gpm__port { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
/* every marker is a button with a 32px hit area on all devices; the visible dot stays small */
.gpm__btn { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gpm__btn:focus { outline: none; }
.gpm__btn:focus-visible { outline: 2px solid var(--wadi); outline-offset: -4px; }
.gpm__dot { position: absolute; left: 16px; top: 16px; width: 0; height: 0; display: block; transition: transform 260ms var(--ease-out); }
.gpm__core, .gpm__halo, .gpm__flare { position: absolute; left: 0; top: 0; display: block; border-radius: 50%; background: var(--blue-tint); }
.gpm__core { width: 6px; height: 6px; margin: -3px; box-shadow: 0 0 0 1.5px rgba(0, 42, 65, .55); opacity: .72; transition: opacity 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.gpm__halo { width: 14px; height: 14px; margin: -7px; opacity: .14; transition: opacity 200ms var(--ease-out); }
/* the flare: a bright ring that is invisible until its turn, then bursts on and drifts out over ~1.2 s */
.gpm__flare { width: 10px; height: 10px; margin: -5px; opacity: 0; background: #fff; pointer-events: none; }
.gpm.in .gpm__core { animation: gpm-breathe var(--d) ease-in-out calc(var(--o) + .9s) infinite, gpm-flare-core var(--fd) ease-out calc(var(--fo) + 1.2s) infinite; }
.gpm.in .gpm__halo { animation: gpm-breathe-halo var(--d) ease-in-out calc(var(--o) + .9s) infinite; }
.gpm.in .gpm__flare { animation: gpm-flare var(--fd) ease-out calc(var(--fo) + 1.2s) infinite; }
@keyframes gpm-breathe { 0%, 100% { opacity: .68; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes gpm-breathe-halo { 0%, 100% { opacity: .12; transform: scale(1); } 50% { opacity: .22; transform: scale(1.15); } }
@keyframes gpm-flare { 0%, 2% { opacity: 0; transform: scale(.4); } 3% { opacity: .95; transform: scale(.6); } 12% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes gpm-flare-core { 0%, 2% { box-shadow: 0 0 0 1.5px rgba(0, 42, 65, .55), 0 0 0 0 rgba(255, 255, 255, 0); } 3% { box-shadow: 0 0 0 1.5px rgba(0, 42, 65, .55), 0 0 10px 3px rgba(255, 255, 255, .95); } 11%, 100% { box-shadow: 0 0 0 1.5px rgba(0, 42, 65, .55), 0 0 0 0 rgba(255, 255, 255, 0); } }
.gpm__port--hub .gpm__flare { background: var(--wadi); }
/* the hub: a slightly larger green core that breathes once, one soft halo that drifts out and fades, then a pause */
.gpm__port--hub .gpm__core { width: 8px; height: 8px; margin: -4px; background: var(--wadi); opacity: 1; box-shadow: 0 0 0 1.5px rgba(0, 42, 65, .7), 0 0 0 3px rgba(153, 202, 59, .28); }
.gpm__port--hub .gpm__halo { width: 22px; height: 22px; margin: -11px; background: var(--wadi); opacity: 0; }
.gpm.in .gpm__port--hub .gpm__core { animation: gpm-hub-core 5.2s ease-in-out 1.2s infinite; }
.gpm.in .gpm__port--hub .gpm__halo { animation: gpm-hub-halo 5.2s ease-out 1.2s infinite; }
@keyframes gpm-hub-core { 0%, 100% { transform: scale(1); } 22% { transform: scale(1.08); } 48% { transform: scale(1); } }
@keyframes gpm-hub-halo { 0% { opacity: .35; transform: scale(1); } 52% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; transform: scale(1.6); } }
/* labels: shown on hover (pointer devices) and on click / tap (everywhere, .is-open set by main.js); the hub keeps
   its name from tablet up. A label near the left or right edge of the map is nudged inward via --tx (main.js). */
.gpm__tip { position: absolute; left: 0; bottom: 11px; transform: translate(calc(-50% + var(--tx, 0px)), 2px); white-space: nowrap; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-sm); background: rgba(0, 42, 65, .92); color: var(--on-dark); font-size: .64rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.gpm__port--hub .gpm__tip { left: 12px; bottom: auto; top: -8px; transform: none; padding: 0; border: 0; background: none; color: var(--green-tint); font-weight: 600; }
@media (min-width: 768px) { .gpm__port--hub .gpm__tip { opacity: 1; } }
.gpm__port.is-open { z-index: 3; }
.gpm__port.is-open .gpm__dot { transform: scale(1.35); }
.gpm__port.is-open .gpm__core { opacity: 1; box-shadow: 0 0 0 1.5px rgba(0, 42, 65, .55), 0 0 12px 3px rgba(185, 222, 238, .75); }
.gpm__port.is-open .gpm__halo { opacity: .34; }
.gpm__port.is-open .gpm__tip { opacity: 1; transform: translate(calc(-50% + var(--tx, 0px)), -2px); }
.gpm__port--hub.is-open .gpm__tip { opacity: 1; transform: none; }
.gpm__port--hub.is-open .gpm__core { box-shadow: 0 0 0 1.5px rgba(0, 42, 65, .7), 0 0 0 3px rgba(153, 202, 59, .28), 0 0 12px 3px rgba(153, 202, 59, .7); }
@media (hover: hover) and (pointer: fine) {
  .gpm__port:hover { z-index: 2; }
  .gpm__port:hover .gpm__dot { transform: scale(1.35); }
  .gpm__port:hover .gpm__core { opacity: 1; }
  .gpm__port:hover .gpm__halo { opacity: .3; }
  .gpm__port:hover .gpm__tip { opacity: 1; transform: translate(calc(-50% + var(--tx, 0px)), -2px); }
  .gpm__port--hub:hover .gpm__tip { opacity: 1; transform: none; }
}
.gpm__cap { margin-top: 12px; padding-inline: 4px; color: rgba(255, 255, 255, .5); }
@media (min-width: 768px) and (max-width: 1023px) {
  .tfg-grid { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 40px; align-items: center; }
}
@media (min-width: 1024px) {
  .tfg-grid { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
  .tfg-copy { max-width: none; }
  .tfg-copy .h2 { font-size: clamp(1.65rem, 2.6vw, 2.5rem); }
}
@media (min-width: 1280px) {
  .tfg-grid { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); }
}
@media (max-width: 767px) {
  .gpm__stage { padding: 0; }
  .gpm__core { width: 5px; height: 5px; margin: -2.5px; }
  .gpm__halo { width: 11px; height: 11px; margin: -5.5px; }
  .gpm__port--hub .gpm__core { width: 7px; height: 7px; margin: -3.5px; }
  .gpm__port--hub .gpm__halo { width: 18px; height: 18px; margin: -9px; }
}
@media (prefers-reduced-motion: reduce) {
  .gpm.in .gpm__core, .gpm.in .gpm__halo, .gpm.in .gpm__flare, .gpm.in .gpm__port--hub .gpm__core, .gpm.in .gpm__port--hub .gpm__halo { animation: none; }
  .gpm__core { opacity: .9; }
  .gpm__port--hub .gpm__halo { opacity: .2; }
  .gpm__dot, .gpm__tip { transition: none; }
}

/* ---------- maritime route map ----------
   One still image and one SVG overlay on the same pixel grid (viewBox = image size), so lanes, markers and
   vessels land on the artwork at every size. The image never moves; only the overlay animates. Colours: lanes in
   Kingfisher Blue, Duqm in Wadi Green, Fujairah's accent in red, nothing else. Shared by the Why Duqm route
   advantage (one-shot reveal) and the global network (artwork routes, vessels only). */
.maritime-map { position: relative; width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; background: var(--navy-deep); }
.maritime-map__base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; }
.maritime-map__overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; font-family: var(--font); }/* travelling light: a short brighter segment that runs Duqm -> destination, one per lane, at lane-length pace */
.mm-route__flow { stroke: #cfeafc; stroke-width: 2.2px; stroke-dasharray: .06 1.6; stroke-dashoffset: 1.66; opacity: 0; }
@keyframes mm-flow { from { stroke-dashoffset: 1.66; } to { stroke-dashoffset: 0; } }@keyframes mm-pulse { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(2.9); opacity: 0; } }@keyframes mm-arrive { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }/* vessels: one tiny glyph per lane in use; main.js places and rotates them along the lane */
.mm-vessel { opacity: 0; }
.mm-vessel .ship path { fill: #eef7fd; }
/* global network: the routes, dots and Duqm marker are in the artwork; the overlay carries only invisible motion
   paths and the vessels main.js sails along them (both directions, slow, deterministic). */
.mm-motion-path { fill: none; stroke: none; pointer-events: none; }
/* the vessel photo (colours untouched) with the same wake as the About-page spine ship: a soft white cone breathing
   behind the stern and a dashed wash streaming aft; the mask fades both toward the tail. */
.mm-vessel .ship .photo image { filter: drop-shadow(0 1.5px 2px rgba(0, 12, 24, .45)); transform-box: fill-box; transform-origin: 50% 50%; animation: vm-sway 5s ease-in-out infinite; }
.mm-vessel .ship .wake { transform-box: fill-box; transform-origin: 100% 50%; animation: mm-wake 2.4s ease-in-out infinite; }
.mm-vessel .ship .cone { fill: #fff; opacity: .2; }
.mm-vessel .ship .wash { stroke: #fff; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 3 6; opacity: .34; animation: mm-wash 900ms linear infinite; }
@keyframes mm-wake { 0%, 100% { transform: scale(1, 1); opacity: .9; } 50% { transform: scale(1.08, 1.16); opacity: 1; } }
@keyframes mm-wash { to { stroke-dashoffset: -9; } }
@media (prefers-reduced-motion: reduce) { .maritime-map--global-network .mm-vessels { display: none; } .mm-vessel .ship .photo image, .mm-vessel .ship .wake, .mm-vessel .ship .wash { animation: none; } }
/* Why Duqm map (duqm-fujairah): everything is timed from the moment .is-live lands. 0.5-1.8s the main lane draws
   west to east; 1.8s Duqm pulses (main.js adds .duqm-on for the ring and labels); 2.2-3.5s the deviation draws
   north;.network-frame { position: relative; border: 0; border-radius: 0; background: transparent; }
/* global-network blend (tfg-oomco and Why Duqm): the artwork's sea is a shade lighter than the navy behind it, so
   the map's edges dissolve through a mask, a vignette deepens the sea toward the rim, and one soft kingfisher wash
   sits behind Duqm so the eye lands on the hub. The wash sits under the vessels, above the artwork. */
.maritime-map--global-network { background: transparent; }
.maritime-map--global-network .maritime-map__base { opacity: .9; }
.maritime-map--global-network::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 26% 34% at 51.4% 46.4%, rgba(5, 136, 195, .14), rgba(5, 136, 195, 0) 100%),
              radial-gradient(ellipse 72% 76% at 50% 50%, rgba(0, 42, 65, 0) 50%, rgba(0, 42, 65, .62) 100%); }
.maritime-map--global-network .maritime-map__overlay { z-index: 2; }
.network-frame .maritime-map--global-network { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.network-frame .figcap { position: absolute; left: 20px; bottom: 14px; margin: 0; color: rgba(255,255,255,.55); }
@media (max-width: 767px) { .network-frame .figcap { position: static; padding: 10px 12px 0; } }
@media (prefers-reduced-motion: reduce) {  .mm-route__flow, .mm-vessel, .mm-pulse, .mm-arrive { display: none; }}

/* ---------- home: "Stay on route." over the terminal-approach video ----------
   One full-bleed cinematic section: the video, a navy wash for legibility, a short message lower-left and the
   link to Why Duqm. No map, no figures, no scroll control. */
.tease { position: relative; display: flex; align-items: flex-end; min-height: 72vh; overflow: hidden; background: var(--navy-deep); color: var(--white); }
.tease .tint { position: absolute; inset: 0; background: rgba(0,42,65,.26); }
.tease .wash { position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,42,65,.88), rgba(0,42,65,.52) 42%, rgba(0,42,65,.06) 76%),
    linear-gradient(to top, rgba(0,42,65,.92), rgba(0,42,65,.25) 42%, transparent 68%); }
.tease .body { position: relative; padding-block: clamp(96px, 14vh, 170px) clamp(64px, 10vh, 120px); }
.tease .copy { max-width: 600px; }
.tease .eyebrow { margin-bottom: 14px; }
.tease .lead { margin-top: 20px; max-width: 46ch; color: var(--on-dark); }
.tease .sub { margin-top: 10px; font-size: 0.9rem; line-height: 1.5; color: var(--on-dark-muted); }
.tease .cta { margin-top: 28px; }
@media (min-width: 1024px) { .tease { min-height: 80vh; } }

/* ---------- Why Duqm: route advantage ----------
   The shared maritime map as the page's hero visual. Copy upper-left, the map filling the container beneath it;
   a radial mask dissolves the map's edges into the navy behind it while the centre stays sharp. The stage crops a
   little empty sea top and bottom so the section stays near one viewport tall on desktop. */
.route-adv { position: relative; overflow: hidden; padding-block: var(--section-y-tight) clamp(32px, 5vh, 64px); background: var(--navy-deep); color: var(--white); }
.route-adv__intro { position: relative; z-index: 2; max-width: 640px; }
.route-adv__intro .lead { color: var(--on-dark-muted); }
.route-adv__fig { position: relative; margin: 24px auto 0; width: 100%; max-width: 1500px; }
/* the stage dissolves on all four edges: a vertical and a horizontal fade intersected, so top and bottom blend
   into the navy exactly like the sides */
.route-adv__stage { position: relative; aspect-ratio: 1672 / 780; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
.route-adv__stage .maritime-map { position: absolute; left: 0; top: -11.25%; width: 100%; background: transparent; }
.route-adv__cap { margin: 8px 0 0; text-align: end; color: rgba(255,255,255,.5); }
@media (max-width: 767px) {
  .route-adv__stage { aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent), linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent), linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); mask-composite: intersect; }
  .route-adv__stage .maritime-map { left: 52%; top: 48%; width: 225%; transform: translate(-51.4%, -46.4%); }
  .route-adv__cap { text-align: start; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .route-adv__stage { aspect-ratio: 16 / 10; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
  .route-adv__stage .maritime-map { left: 54%; top: 50%; width: 165%; transform: translate(-51.4%, -46.4%); }
}
@media (min-width: 1024px) {
  .route-adv__fig { margin-top: clamp(-120px, -10vh, -48px); }
  .route-adv__intro .h2 { max-width: 14ch; }
}

/* ---------- Why Duqm: cost of diversion ----------
   One vertical calculation on the left, the per-tonne result beneath it, the saving on the right. Lines reveal
   100 ms apart once the block is on screen (the operators a beat after their line); the total is set heavier. */
.cost { display: grid; gap: 40px; align-items: start; }
.cost__calc.reveal { opacity: 1; transform: none; }
.calc { margin: 0; padding: 0; list-style: none; }
.calc li { display: grid; grid-template-columns: 2.25rem 1fr; grid-template-areas: "op val" "op lbl"; column-gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.calc .op { grid-area: op; align-self: center; font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--kingfisher-deep); }
.calc .val { grid-area: val; font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.calc .val small { font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.calc .lbl { grid-area: lbl; margin-top: 6px; font-size: 0.875rem; color: var(--muted); }
.calc .lbl small { display: block; font-size: 0.75rem; opacity: .8; }
.calc .total { border-bottom: 2px solid var(--ink); }
.calc .total .val { font-size: clamp(2rem, 3.4vw, 3rem); color: var(--kingfisher-deep); }
.cost .per { padding-top: 28px; }
.cost .per .big { margin-top: 10px; font-size: clamp(2.4rem, 4.2vw, 3.4rem); }
.cost .per .big .unit, .cost__save .big .unit { font-size: .42em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.cost .note { margin-top: 10px; max-width: 52ch; font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
.cost__save { padding: 28px 28px 26px 30px; border-inline-start: 3px solid var(--wadi); background: var(--offwhite); }
.cost__save .save-lbl { margin-top: 14px; font-size: 1rem; font-weight: 500; }
.cost__save .big { margin-top: 4px; font-size: clamp(2.75rem, 5vw, 4rem); color: var(--kingfisher-deep); }
.cost__save .route-line { margin-block: 18px 16px; }
.cost__save .xs { margin-top: 8px; color: var(--muted); }
.cost__calc.reveal .calc li, .cost__calc.reveal .per { opacity: 0; transform: translateY(10px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
.cost__calc.reveal .calc .op { opacity: 0; transition: opacity 320ms var(--ease-out); }
.cost__calc.reveal.in .calc li, .cost__calc.reveal.in .per { opacity: 1; transform: none; transition-delay: calc(var(--i) * 100ms); }
.cost__calc.reveal.in .calc .op { opacity: 1; transition-delay: calc(var(--i) * 100ms + 140ms); }
.cost__calc.reveal.in .per { transition-delay: calc(var(--i) * 100ms + 220ms); }
@media (min-width: 1024px) { .cost { grid-template-columns: 7fr 5fr; gap: 64px; } .cost__save { margin-top: 56px; } }
@media (prefers-reduced-motion: reduce) {
  .cost__calc.reveal .calc li, .cost__calc.reveal .per, .cost__calc.reveal .calc .op { opacity: 1; transform: none; transition: none; }
}

/* ---------- people ---------- */
.person { display: flex; height: 100%; flex-direction: column; }
.person .pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy); }
.person .pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 700ms var(--ease-out); }
.person:hover .pic img { transform: scale(1.03); }
.person .pic::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(to right, var(--kingfisher), var(--wadi)); }
.person h3 { margin-top: 20px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.person .role { font-size: 0.875rem; color: var(--kingfisher-deep); }

/* ---------- quote CTA ---------- */
.quote-cta { position: relative; overflow: hidden; background: var(--navy-deep); color: var(--white); }
.quote-cta .body { position: relative; }
.quote-cta.with-media .body { padding-block: clamp(140px, 22vw, 300px); }
.quote-cta .media-fill { opacity: .9; }
.quote-cta .media-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,42,65,.4), rgba(0,42,65,.6) 50%, var(--navy-deep)); }
.quote-cta .copy { max-width: 40ch; }
/* copy-end: the subject of the media sits left of centre, so the copy takes the right side of the banner */
@media (min-width: 768px) { .quote-cta.copy-end .copy { margin-inline-start: auto; } .quote-cta.copy-end .media-fill::after { background: linear-gradient(to bottom, rgba(0,42,65,.4), rgba(0,42,65,.6) 50%, var(--navy-deep)), linear-gradient(to left, rgba(0,42,65,.45), transparent 55%); } }
.quote-cta .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.quote-cta .actions .email { display: inline-flex; height: 44px; align-items: center; padding-inline: 8px; font-weight: 500; color: rgba(255,255,255,.9); }

/* ---------- social links ---------- */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.social a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; padding-inline: 0; border: 1px solid var(--line); border-radius: 999px; color: var(--kingfisher-deep); font-size: 0.875rem; font-weight: 500; transition: border-color 220ms var(--ease-out), background-color 220ms var(--ease-out), color 220ms var(--ease-out), transform 220ms var(--ease-out); }
.social.labelled a { padding-inline: 14px 16px; }
.social a:hover, .social a:focus-visible { border-color: var(--kingfisher); background: rgba(5, 136, 195, .06); transform: translateY(-1px); }
.social .sicon { width: 17px; height: 17px; flex: none; }
.on-dark .social a { border-color: var(--line-dark); color: rgba(255,255,255,.85); }
.on-dark .social a:hover, .on-dark .social a:focus-visible { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); color: var(--white); }

/* ---------- footer ---------- */
/* The footer fills one full screen on every page: brand, navigation and social sit centred in the upper space,
   the legal line and the oversized wordmark anchor to the bottom edge. */
.footer { position: relative; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; background: linear-gradient(to bottom, var(--navy), var(--navy-deep)); color: var(--white); text-align: center; }
.footer > .container { display: flex; flex: 1; flex-direction: column; }
/* top padding always clears the fixed header, so the logo never sits beneath it when the footer fills the screen */
.footer .brand { display: flex; flex-direction: column; align-items: center; margin-top: auto; padding-top: calc(var(--header-h) + 32px); }
.footer .brand img { height: 52px; width: auto; }
.footer .brand p { margin-top: 24px; max-width: 38ch; font-size: 0.95rem; line-height: 1.6; color: var(--on-dark-muted); }
.footer .brand .actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
.footer .brand .email { display: inline-flex; align-items: center; gap: 8px; padding-block: 4px; font-size: 0.95rem; font-weight: 500; }
.footer .brand .email svg { width: 16px; height: 16px; color: var(--blue-tint); }
.footer .brand .route-line { margin-top: 48px; width: 96px; height: 1.5px; }
.footer nav { margin: 40px auto 0; max-width: 768px; }
.footer nav ul.cols { display: grid; gap: 36px; }
.footer nav h3 { margin-bottom: 16px; }
.footer nav li li { margin-top: 4px; }
.footer nav li li a { display: inline-block; padding-block: 4px; font-size: 0.95rem; color: rgba(255,255,255,.8); transition: color 300ms; }
.footer nav li li a:hover { color: var(--white); }
.footer .follow { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 44px; }
.footer .follow .social { justify-content: center; }
.footer .legal { margin-top: auto; padding-top: 48px; }
.footer .legal .inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0 8px; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--on-dark-muted); }
.footer .legal a { color: rgba(255,255,255,.8); }
.footer .legal a:hover { color: var(--white); }
.footer .wm-wrap { position: relative; margin-top: 16px; }
.wordmark-glow { position: absolute; inset: -40% 0 -20% 0; pointer-events: none; background: radial-gradient(60% 70% at 50% 60%, rgba(5,136,195,.16), transparent 70%); }
/* The oversized wordmark is a watermark, not a headline: about a third of full white, fading out through the
   bottom so it dissolves into the footer's navy. Hover lifts it just enough to read as a link. */
.wordmark-oversized {
  position: relative; display: block; width: 100%; color: var(--white); opacity: .32; text-decoration: none; outline-offset: -3px;
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, rgba(0,0,0,.55) 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 25%, rgba(0,0,0,.55) 65%, transparent 100%);
  transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.wordmark-oversized:hover, .wordmark-oversized:focus-visible { color: var(--blue-tint); opacity: .55; }
.wordmark-oversized svg { width: 100%; height: auto; }
@media (min-width: 640px) {
  .footer .brand .actions { flex-direction: row; gap: 24px; }
  .footer nav ul.cols { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (min-width: 768px) { .footer .brand { padding-top: calc(var(--header-h) + 40px); } .footer nav { margin-top: 48px; } .footer .legal { padding-top: 64px; } }
@media (min-width: 1024px) { .footer .brand { padding-top: calc(var(--header-h) + 48px); } }
/* short laptop screens: tighter rhythm so the whole footer still fits one viewport */
/* The footer is at least one viewport tall and grows when its content needs more; the wordmark is never shrunk.
   On short windows the fixed header slides away while the footer holds the top of the screen (see main.js). */
@media (min-width: 768px) { .footer .brand, .footer nav, .footer .follow, .footer .legal, .footer .wm-wrap { flex-shrink: 0; } }
@media (min-width: 768px) and (max-height: 700px) {
  .footer .brand { padding-top: calc(var(--header-h-scrolled) + 20px); }
  .footer .brand img { height: 44px; }
  .footer nav li li a { padding-block: 0; font-size: 0.9rem; }
  .footer nav h3 { margin-bottom: 10px; }
  .footer .brand .route-line { margin-top: 16px; }
  .footer .follow { margin-top: 14px; gap: 10px; }
  .footer .follow .social a { min-width: 36px; height: 36px; }
}
@media (min-width: 768px) and (max-height: 840px) {
  .footer .brand { padding-top: calc(var(--header-h-scrolled) + 28px); }
  .footer .brand p { margin-top: 12px; }
  .footer .brand .actions { margin-top: 18px; }
  .footer .brand .route-line { margin-top: 20px; }
  .footer nav { margin-top: 20px; }
  .footer nav li li a { padding-block: 1px; }
  .footer .follow { margin-top: 18px; }
  .footer .legal { padding-top: 20px; }
  .footer .legal .inner { padding: 12px 0 2px; }
  .footer .wm-wrap { margin-top: 2px; }
}

/* ---------- forms ---------- */
/* ---------- contact: a bunker enquiry interface with location support ----------
   Grid areas rank the content: enquiry (email, quote CTA, telephone) first, one map with a
   Muscat / Duqm switcher beside it, then the addresses and the social links in a quieter register. On narrow
   screens the areas stack in that same order with the map after the enquiry. */
.contact { display: grid; gap: clamp(36px, 5vw, 56px); grid-template-areas: "enquiry" "map" "places" "follow"; }
.contact-enquiry { grid-area: enquiry; }
.contact-map { grid-area: map; }
.contact-places { grid-area: places; }
.contact-follow { grid-area: follow; }
.contact .lead { margin-top: 18px; max-width: 46ch; }
.enquiry { margin-top: clamp(24px, 3vw, 32px); padding: clamp(22px, 2.6vw, 30px) 0; border-block: 1px solid var(--line); }
.enquiry .lbl, .contact .phone .lbl { display: block; margin-bottom: 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.enquiry-mail { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.01em; color: var(--navy); text-decoration: none; }
.enquiry-mail .icon { width: 30px; height: 30px; flex: none; color: var(--kingfisher-deep); transition: transform 300ms var(--ease-out); }
.enquiry-mail span { position: relative; }
.enquiry-mail span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--kingfisher); transform: scaleX(0); transform-origin: 0 50%; transition: transform 320ms var(--ease-out); }
.enquiry-mail:hover span::after, .enquiry-mail:focus-visible span::after { transform: scaleX(1); }
.enquiry-mail:hover .icon { transform: translateX(3px); }
.enquiry .btn-row { margin-top: 20px; }
.contact .phone { display: flex; align-items: flex-start; gap: 14px; margin-top: 24px; line-height: 1.5; }
.contact .phone .icon { flex: none; margin-top: 2px; width: 22px; height: 22px; color: var(--kingfisher-deep); }
.contact .phone a { font-weight: 500; }
.contact .phone .note { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
.tick-list li { position: relative; padding-inline-start: 22px; font-size: 0.925rem; line-height: 1.6; color: var(--muted); }
.tick-list li + li { margin-top: 6px; }
.tick-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 12px; height: 1px; background: var(--kingfisher); }
.place-list { display: grid; gap: 24px 40px; margin: 16px 0 0; padding: 0; list-style: none; }
.place-list h3 { font-size: 0.72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--kingfisher-deep); }
.place-list p { margin-top: 6px; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.place-list a { display: inline-block; margin-top: 8px; font-size: 0.875rem; }
.contact-follow .social { margin-top: 12px; }
.contact-follow .social a { min-width: 36px; height: 36px; }
.loc-tabs [role="tab"] { padding-top: 0; }
.map-frame { position: relative; margin-top: 18px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--offwhite); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 1; transition: opacity 260ms var(--ease-out); }
.map-skeleton { position: absolute; inset: 0; background: linear-gradient(135deg, var(--offwhite), #e7f2f8 60%, var(--offwhite)); opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease-out); }
.map-skeleton .shimmer { position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--kingfisher), transparent); opacity: .6; transform: scaleX(0); transform-origin: 0 50%; }
.map-frame.loading iframe { opacity: 0; }
.map-frame.loading .map-skeleton { opacity: 1; }
@keyframes map-shimmer { 0% { transform: scaleX(0); transform-origin: 0 50%; } 50% { transform: scaleX(1); transform-origin: 0 50%; } 51% { transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }
.map-frame.loading .shimmer { animation: map-shimmer 1.4s var(--ease-inout) infinite; }
.loc-detail { position: relative; padding-top: 18px; min-height: 96px; }
.loc-panel .h3 { margin-top: 8px; font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.loc-panel .where { margin-top: 4px; font-size: 0.925rem; color: var(--muted); }
.loc-panel a { display: inline-block; margin-top: 10px; font-size: 0.925rem; }
@media (min-width: 1024px) {
  .contact { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); grid-template-areas: "enquiry map" "places map" "follow map"; align-items: start; column-gap: clamp(48px, 6vw, 96px); row-gap: clamp(32px, 4vw, 48px); }
  .contact-map { position: sticky; top: calc(var(--header-h-scrolled) + 24px); }
  .place-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1023px) { .map-frame { aspect-ratio: 16 / 10; } }
@media (max-width: 767px) { .map-frame { aspect-ratio: 4 / 3; } } .mt-4 { margin-top: 16px; } .mt-8 { margin-top: 32px; } .mt-10 { margin-top: 40px; }.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-10 { margin-bottom: 40px; } .mb-12 { margin-bottom: 48px; } .mb-14 { margin-bottom: 56px; } .mb-16 { margin-bottom: 64px; }.py-hero { padding-block: clamp(120px, 16vw, 220px); }
.statement { font-size: clamp(1.75rem, 3.6vw, 3.25rem); max-width: 24ch; }.notfound { position: relative; display: flex; min-height: 80vh; align-items: center; overflow: hidden; background: var(--navy-deep); color: var(--white); }
.notfound .body { position: relative; padding-block: calc(var(--header-h) + 40px); }
/* homepage route rail: fixed, minimal, and themed to the section behind it. main.js reads the section's
   data-nav-theme (dark / light; falling back to the on-dark class) and sets .is-light on the rail, so labels and
   marker strokes switch between light-on-navy and navy-on-light. The active marker is Wadi green in both. */
.route-progress { --rp-label: rgba(255, 255, 255, .62); --rp-label-on: var(--white); --rp-stroke: rgba(255, 255, 255, .7); --rp-hover: var(--white);
  position: fixed; inset-inline-end: 24px; top: 50%; z-index: 30; display: none; flex-direction: column; gap: 14px; transform: translateY(-50%); opacity: 0; transition: opacity 400ms; }
.route-progress.visible { opacity: 1; }
.route-progress.is-light { --rp-label: rgba(0, 66, 100, .72); --rp-label-on: var(--navy); --rp-stroke: rgba(0, 66, 100, .6); --rp-hover: var(--navy); }
.route-progress a { display: flex; align-items: center; gap: 10px; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-label); transition: color 280ms var(--ease-out); }
.route-progress a i { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--rp-stroke); transition: border-color 280ms var(--ease-out), background-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out); }
.route-progress a:hover, .route-progress a:focus-visible { color: var(--rp-hover); }
.route-progress a:hover i { border-color: var(--rp-hover); }
.route-progress a.on { color: var(--rp-label-on); font-weight: 600; }
.route-progress a.on i { background: var(--wadi); border-color: var(--wadi); box-shadow: 0 0 0 3px rgba(153, 202, 59, .18); }
.route-progress a:focus-visible { outline: 2px solid var(--rp-hover); outline-offset: 3px; }
@media (min-width: 1280px) { .route-progress { display: flex; } }
@media (prefers-reduced-motion: reduce) { .route-progress, .route-progress a, .route-progress a i { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .rtabs [role="tab"], .rtabs [role="tab"]::after, .rtabs [role="tab"]::before, .rpanel, .enquiry-mail span::after, .enquiry-mail .icon, .map-frame iframe, .map-skeleton { transition: none; }
  .rpanel, .rpanel.in { opacity: 1; transform: none; }
  .rpanel.out { opacity: 0; }
  .map-frame.loading .shimmer { animation: none; transform: scaleX(1); }
  .pselect.reveal .ptabs [role="tab"], .pselect.reveal.in .ptabs [role="tab"] { opacity: .55; transform: none; transition: none; animation: none; }
  .pselect.reveal .ptabs [role="tab"][aria-selected="true"], .pselect.reveal.in .ptabs [role="tab"][aria-selected="true"] { opacity: 1; }
  .supply-art g, .supply-art .route, .supply-art .done-dot, .supply-art .cue, .supply.reveal .supply-art { transition: none; }
  .supply.reveal .supply-art { opacity: 1; }
  .supply-art .flow { animation: none !important; }
  .supply-art .att, .supply-art .cue, .supply-art .aff-ring, .supply-art .aff { animation: none !important; transition: none; }
  .supply-art .aff-ring { opacity: .9; }
  .supply-art .is-primary:hover .att { transform: none; }
  .supply[data-state="idle"][data-mode="ex-pipe"] .cue-ex-pipe, .supply[data-state="idle"][data-mode="lubricants"] .cue-lubricants { opacity: .9; }
  .metrics.reveal li, .metrics.reveal.in li, .caps.reveal > div, .caps.reveal.in > div { opacity: 1; transform: none; transition: none; }
  .metrics.reveal li::before, .metrics.reveal.in li::before { transform: none; transition: none; }
  .schem-base, .schem-layer, .schem-flow path, .tex__schem, .tex__stage.reveal .tex__schem, .tex__stage.reveal .tex__hotspots { transition: none; }
  .tex__stage.reveal .tex__schem, .tex__stage.reveal .tex__hotspots { opacity: 1; }
  .tex__stage[data-active]:not([data-active=""]) .tex__schem { transform: none; }
  .flow-seg.is-active { animation: none; stroke-dasharray: none; }
  .tex__hot .n { animation: none !important; }
}

/* ==========================================================================
   Why Duqm (merged Why Duqm + Port of Duqm): one story from the Earth-zoom hero to the CTA.
   ========================================================================== */
/* 01 hero: full-bleed Earth zoom, copy held back so the video breathes, three quiet facts and a cue at the foot */
.why-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 86vh; overflow: hidden; background: var(--navy-deep); color: var(--white); }
.why-hero .media-fill video { object-position: 50% 50%; }
.why-hero .media-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--navy-deep) 0%, rgba(0, 42, 65, .6) 40%, rgba(0, 42, 65, .12) 100%); }
.why-hero__body { position: relative; padding-top: calc(var(--header-h) + 48px); padding-bottom: 36px; }
.why-hero__copy { margin-top: clamp(40px, 8vh, 96px); max-width: 780px; }
.why-hero__copy .eyebrow { color: var(--blue-tint); }
.why-hero__h1 { margin-top: 16px; font-size: clamp(3rem, 7vw, 6.4rem); line-height: .95; letter-spacing: -.03em; }
.why-hero__lead { margin-top: 18px; font-size: clamp(1.35rem, 2.4vw, 2.2rem); line-height: 1.1; color: var(--blue-tint); }
.why-hero .route-line { margin-block: 22px 18px; }
.why-hero .lead { max-width: 52ch; color: var(--on-dark-muted); }
/* the copy waits about a second so the zoom is under way before the words arrive */
.why-hero__copy.reveal-group.in > :nth-child(1) { transition-delay: 1100ms; }
.why-hero__copy.reveal-group.in > :nth-child(2) { transition-delay: 1250ms; }
.why-hero__copy.reveal-group.in > :nth-child(3) { transition-delay: 1400ms; }
.why-hero__copy.reveal-group.in > :nth-child(4) { transition-delay: 1550ms; }
.why-hero__copy.reveal-group.in > :nth-child(5) { transition-delay: 1700ms; }
.why-hero__foot.reveal { transition-delay: 1900ms; }
.why-hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 32px; margin-top: clamp(40px, 7vh, 80px); padding-top: 22px; border-top: 1px solid var(--line-dark); }
.why-hero__facts { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 0; padding: 0; list-style: none; }
.why-hero__facts li { display: flex; flex-direction: column; gap: 4px; padding-inline: 28px; border-left: 1px solid var(--line-dark); }
.why-hero__facts li:first-child { padding-left: 0; border-left: 0; }
.why-hero__facts .v { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--white); }
.why-hero__facts .k { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); }
.why-hero__cue { display: inline-flex; align-items: center; gap: 12px; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); transition: color 200ms; }
.why-hero__cue i { width: 1px; height: 36px; background: currentColor; opacity: .6; }
.why-hero__cue:hover, .why-hero__cue:focus-visible { color: var(--white); }
/* 02 the comparison map: reuses the route-adv stage; a two-state control shifts lane and marker emphasis */
.why-map .route-adv__intro { max-width: 720px; }.why-map__panel { position: relative; z-index: 2; max-width: 560px; margin-top: 4px; }
.why-map__panel--pair { max-width: 1040px; display: grid; gap: 28px 48px; }
@media (min-width: 768px) { .why-map__panel--pair { grid-template-columns: 1fr 1fr; } .why-map__panel--pair .why-map__copy { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); } }
.why-map__copy[hidden] { display: none; }
.why-map__copy .h3 { margin-top: 10px; color: var(--white); }
.why-map__copy p:not(.eyebrow) { margin-top: 10px; max-width: 52ch; color: var(--on-dark-muted); }/* 03 the port: one large photograph, an oversized fact ledger overlapping its foot */
.why-port__head { max-width: 40ch; }
.why-port__h { margin-top: 16px; font-size: clamp(2.6rem, 5vw, 5.4rem); line-height: .98; letter-spacing: -.03em; color: var(--navy); }
/* the aerial photo is a crisp framed block (soft corner radius, low shadow, straight sides). Two directional white
   gradients marry it to the page: a light veil along the top edge where it meets the heading, and a deeper one along the
   foot where the fact ledger overlaps, so the photo settles into the white rather than stopping on a hard line.
   A faint cool tone over the whole frame pulls the dusk pinks toward the site palette. */
.why-port__fig { position: relative; margin: clamp(20px, 3vw, 36px) calc(-1 * var(--gutter)) 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: 0 28px 56px -44px rgba(0, 42, 65, .38); }
.why-port__fig img { display: block; width: 100%; height: clamp(340px, 54vw, 760px); object-fit: cover; object-position: 50% 58%; }
.why-port__fig::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 14%, transparent 26%),
    linear-gradient(to top, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42) 16%, rgba(255, 255, 255, .1) 34%, transparent 48%),
    rgba(244, 249, 252, .07); }
.why-port__facts { position: relative; z-index: 1; display: grid; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--kingfisher); background: var(--white); }
.why-port__fact { position: relative; padding: 26px 20px 26px 0; border-bottom: 1px solid var(--line); outline: none; }
.why-port__fact::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 2px; background: var(--kingfisher); transition: width 380ms var(--ease-out); }
.why-port__fact:hover::before, .why-port__fact:focus-visible::before { width: 64px; }
.why-port__fact .v { display: block; font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--navy); }
.why-port__fact .k { display: block; margin-top: 10px; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--kingfisher-deep); }
.why-port__fact .d { display: block; margin-top: 8px; font-size: .9rem; color: var(--muted); transition: color 250ms; }
.why-port__fact:hover .d, .why-port__fact:focus-visible .d { color: var(--ink); }
.why-port__lines { margin-top: 24px; }
/* 04 the fixed diversion model: narrative left, the days and the cost as the two big figures, per tonne beneath */
.why-cost { background: #f2f6f8; }
.why-cost__head { max-width: 62ch; }
.why-cost__head .lead { margin-top: 4px; }
.why-cost__grid { display: grid; gap: 32px; margin-top: clamp(32px, 4vw, 56px); }
.why-cost__narr p { max-width: 48ch; }
.why-cost__narr .muted { margin-top: 12px; font-size: .95rem; }
.why-cost__toggle { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 0; border-bottom: 1px solid currentColor; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--kingfisher-deep); cursor: pointer; }
.why-cost__toggle .t.alt { display: none; }
.why-cost__toggle[aria-expanded="true"] .t { display: none; }
.why-cost__toggle[aria-expanded="true"] .t.alt { display: inline; }
.why-cost__toggle i { position: relative; width: 12px; height: 12px; }
.why-cost__toggle i::before, .why-cost__toggle i::after { content: ""; position: absolute; background: currentColor; }
.why-cost__toggle i::before { left: 0; top: 5px; width: 12px; height: 2px; }
.why-cost__toggle i::after { left: 5px; top: 0; width: 2px; height: 12px; transition: transform 250ms var(--ease-out); }
.why-cost__toggle[aria-expanded="true"] i::after { transform: scaleY(0); }
.why-cost__assume { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.why-cost__assume[hidden] { display: none; }
.why-cost__assume li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.why-cost__assume .v { font-weight: 600; color: var(--navy); white-space: nowrap; }
.why-cost__assume .k small { display: block; font-size: .75rem; color: var(--muted); }
.why-cost__days, .why-cost__usd, .why-cost__mt { padding-top: 18px; border-top: 2px solid var(--navy); }
.why-cost__days .v { display: block; font-size: clamp(5rem, 11vw, 9rem); line-height: .9; letter-spacing: -.04em; color: var(--navy); }
.why-cost__days .k, .why-cost__usd .k { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--kingfisher-deep); }
.why-cost__days .k { margin-top: 10px; }
.why-cost__days .d, .why-cost__usd .d { display: block; margin-top: 8px; max-width: 28ch; font-size: .85rem; color: var(--muted); }
.why-cost__usd .v { display: block; margin-top: 10px; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1; color: var(--navy); }
.why-cost__usd .v em { font-style: normal; color: var(--kingfisher-deep); }
.why-cost__mt .v { display: block; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; color: var(--navy); }
.why-cost__mt .v small { font-size: .42em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.why-cost__mt .k { display: block; margin-top: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.why-cost__note { max-width: 72ch; margin-top: clamp(32px, 4vw, 48px); padding-top: 18px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.why-cost__note .xs { margin-top: 6px; }
/* 05 four reasons: a 2 x 2 editorial grid, oversized ghost numbers, rules that extend on hover */
.why-reasons__grid { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.why-reasons__grid li { position: relative; padding: 36px 28px 40px 0; border-bottom: 1px solid var(--line); outline: none; transition: background-color 300ms var(--ease-out); }
.why-reasons__grid .n { position: absolute; right: 16px; top: 14px; font-size: clamp(4rem, 8vw, 7rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--navy); opacity: .06; transition: opacity 300ms, color 300ms; }
.why-reasons__grid h3 { position: relative; max-width: 14ch; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--navy); }
.why-reasons__grid h3::after { content: ""; display: block; width: 32px; height: 2px; margin-top: 18px; background: var(--kingfisher); transition: width 400ms var(--ease-out); }
.why-reasons__grid p { position: relative; margin-top: 16px; max-width: 42ch; color: var(--muted); transition: color 300ms; }
.why-reasons__grid li:hover, .why-reasons__grid li:focus-visible { background: #f5f9fb; }
.why-reasons__grid li:hover .n, .why-reasons__grid li:focus-visible .n { opacity: .12; color: var(--kingfisher-deep); }
.why-reasons__grid li:hover h3::after, .why-reasons__grid li:focus-visible h3::after { width: 72px; }
.why-reasons__grid li:hover p, .why-reasons__grid li:focus-visible p { color: var(--ink); }
/* 07 marine facilities: a typographic field, one green waypoint on hover */
.why-services__head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 56px); }
.why-services__head .lead { margin-top: 4px; color: var(--on-dark-muted); }
.why-services__field { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.why-services__field li { position: relative; padding: 22px 0; border-bottom: 1px solid var(--line-dark); font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .72); transition: color 250ms, padding-left 350ms var(--ease-out); }
.why-services__field li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--wadi); opacity: 0; transform: scale(.5); transition: opacity 250ms, transform 300ms var(--ease-out); }
.why-services__field li:hover, .why-services__field li:focus-within { padding-left: 24px; color: var(--white); }
.why-services__field li:hover::before, .why-services__field li:focus-within::before { opacity: 1; transform: scale(1); }
/* 08 the terminal connection: one photograph, copy on a navy wash */
.why-terminal { position: relative; overflow: hidden; background: var(--navy-deep); color: var(--white); }
.why-terminal .media-fill img { width: 100%; height: 100%; object-fit: cover; }
.why-terminal .media-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 42, 65, .92), rgba(0, 42, 65, .7) 45%, rgba(0, 42, 65, .25)); }
.why-terminal__body { position: relative; max-width: 580px; padding-block: clamp(96px, 14vw, 200px); }
.why-terminal__sub { margin-top: 14px; font-size: 1.05rem; color: var(--on-dark-muted); }
.why-terminal .h2 { margin-top: 8px; }
.why-terminal .lead { margin-top: 18px; color: var(--on-dark-muted); }
@media (min-width: 640px) {
  .why-services__field { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
}
@media (min-width: 768px) {
  .why-reasons__grid { grid-template-columns: repeat(2, 1fr); }
  .why-reasons__grid li:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--line); }
  .why-reasons__grid li:nth-child(even) { padding-left: 40px; }
  .why-port__facts { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .why-port__fact + .why-port__fact { padding-left: 28px; border-left: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .why-hero { min-height: 90vh; }
  .why-port__facts { width: 84%; margin-inline-start: auto; margin-top: -96px; padding: 0 0 0 40px; box-shadow: -24px -8px 40px -30px rgba(0, 42, 65, .35); }
  .why-cost__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); grid-template-areas: "narr days usd" "narr mt mt"; column-gap: 48px; align-items: start; }
  .why-cost__narr { grid-area: narr; }
  .why-cost__days { grid-area: days; }
  .why-cost__usd { grid-area: usd; }
  .why-cost__mt { grid-area: mt; }
  .why-services__field { column-gap: 64px; }
}
@media (max-width: 767px) {
  .why-hero { min-height: 78vh; }
  .why-hero__facts li { padding-inline: 16px; }  .why-port__fig { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; box-shadow: none; }
  .why-port__facts { padding-top: 6px; }
  .why-cost__toggle { min-height: 44px; }
  .why-services__field li { font-size: 1.15rem; padding: 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .why-hero__copy.reveal-group.in > *, .why-hero__foot.reveal { transition-delay: 0s; }
  .maritime-map--duqm-compare .mm-route__base, .maritime-map--duqm-compare .mm-route__glow, .maritime-map--duqm-compare .mm-ring, .maritime-map--duqm-compare .mm-halo, .maritime-map--duqm-compare .mm-label,
  .why-port__fact::before, .why-reasons__grid li, .why-reasons__grid .n, .why-reasons__grid h3::after, .why-services__field li, .why-services__field li::before, .why-cost__toggle i::after { transition: none; }
}