/* ============================================================
   SUMMIT SHIPPING LINE - style.css v4.0
   Corporate liner-company design system.
   Palette drawn from the house flag: deep navy, signal red, white.
   ============================================================ */

:root {
  --navy-950: #0A152B;
  --navy-900: #0E1F3D;
  --navy-800: #14264B;
  --navy:     #16294F;
  --royal:    #1F3D8C;
  --red:      #C4001E;
  --red-dark: #9E0018;

  --body:  #46566E;
  --muted: #7A879B;
  --line:  #E3E7EC;
  --stone: #F5F6F4;
  --paper: #FFFFFF;

  --sea:      #D8E3EC;
  --land:     #F7F9FA;
  --landline: #C4D1DC;

  --font-display: 'Archivo', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --container: 1160px;
  --header-h: 72px;
}

/* ---------- Reset / base ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
abbr { text-decoration: none; }

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

.section { padding: 104px 0; }

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

/* Unified photo treatment - pull stock imagery toward the brand palette */
.hero__img, .about__media img, .services__panel img, .vessel__media img {
  filter: saturate(0.72) contrast(1.05);
}

/* ---------- Typography helpers ---------- */

.kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.kicker::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--red);
  margin-bottom: 12px;
}
.kicker--light { color: rgba(255, 255, 255, 0.75); }

.kicker__num { color: var(--red); margin-right: 10px; }
.kicker--light .kicker__num { color: #E4374F; }

.h2 {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 20px;
  max-width: 28ch;
}
.h2--light { color: #fff; }

.section__head {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 30px;
  margin-bottom: 56px;
}
.section__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  padding-bottom: 6px;
}

.network__affiliatesBtn { margin-top: 24px; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 26px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background 0.2s ease;
}
.button::after { content: "\2192"; }
.button:hover { background: var(--royal); }

.button--red { background: var(--red); }
.button--red:hover { background: var(--red-dark); }

.button--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
.button--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.button--small { padding: 11px 18px; font-size: 11px; }

/* ---------- Header ---------- */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(227, 231, 236, 0.6);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.header--scrolled {
  background: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(227, 231, 236, 0.85);
  box-shadow: 0 6px 24px rgba(14, 31, 61, 0.07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header { background: var(--paper); }
  .header--scrolled { background: var(--paper); }
}

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* The nav now has more links than the shared 1160px content column can
     fit alongside the logo - give the header row its own, wider max-width
     rather than shrinking/wrapping the nav. Body sections keep --container.
     Measured requirement: logo (227px, natural/unshrunk) + gap (24px) +
     nav (1115px, natural) = 1366px. 1320px was 46px short - always, on
     every screen, regardless of viewport width, because this max-width is
     a hard cap once the viewport is wide enough to show it in full - and
     that deficit is exactly what was forcing the logo to compress and its
     text to overflow into "Company". 1460px covers the real requirement
     with ~94px to spare for font-metric differences across browsers/OSes. */
  max-width: 1460px;
}

/* flex-shrink: 0 - without this, when the header row runs short on space
   (see .header__inner below), flexbox shrinks the logo instead of the nav,
   and since the brand name has white-space: nowrap it can't shrink with
   it - it just overflows the squeezed box and overlaps "Company". The
   brand should never compress; the nav is what has room to give (it
   already switches to the hamburger menu when space is tight). */
.header__logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header__logoMark { height: 42px; width: auto; }
.header__logoText { display: flex; flex-direction: column; line-height: 1.2; }
.header__logoName {
  font-family: var(--font-display);
  font-stretch: 118%;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
.header__logoSub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.header__nav { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.header__navLink {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body);
  padding: 8px 13px;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.header__navLink:hover { color: var(--navy); }
.header__navLink--active { color: var(--navy); }
.header__nav .button { margin-left: 12px; white-space: nowrap; }

/* Standalone pages (e.g. affiliates.html) don't have a hero to sit behind
   the fixed header, so they need explicit top clearance instead. */
.affiliatesPage__spacer { height: calc(var(--header-h) + 32px); }

.header__hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px 4px;
}
.header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
}

/* ---------- Mobile menu ---------- */

.menu { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.menu__overlay {
  position: absolute; inset: 0;
  background: rgba(10, 21, 43, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.menu__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 86vw);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 24px 28px 32px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.35, 1);
}
.menu.open { pointer-events: auto; }
.menu.open .menu__overlay { opacity: 1; }
.menu.open .menu__panel { transform: translateX(0); }

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.menu__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
}
.menu__close { font-size: 26px; line-height: 1; color: var(--navy); padding: 4px 8px; }

/* The nav grew to 13 links (Home, Company, Services, Routes, Cooperation
   services, New services, Fleet rotation summary, Network, Affiliate
   offices, Fleet, Team, Culture, Contact) - on any viewport shorter than
   ~900px that no longer fits the drawer, and without scroll the bottom
   links (Team/Culture/Contact) were simply unreachable. Scope the scroll
   to just the link list (not the whole panel): min-height: 0 is the
   classic flexbox fix that lets a flex item shrink below its content size
   so overflow-y: auto actually activates instead of the item just
   stretching the panel taller than the viewport. This also keeps the
   brand/close row and the address footer pinned in view at all times,
   which position: sticky can't do reliably here since the panel itself
   is transformed (translateX) for the slide-in animation, and a
   transformed ancestor breaks sticky's viewport-relative positioning. */
.menu__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: 12px;
}
.menu__navLink {
  display: block;
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
/* Utility link (admin sign-in), not a content section - set apart with a
   muted color and smaller size so it doesn't read as a nav destination. */
.menu__navLink--admin {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}
.menu__foot {
  flex: 0 0 auto;
  padding-top: 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.menu__foot a { color: var(--royal); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  margin-top: var(--header-h);
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; background: #0a152b; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__video { pointer-events: none; object-fit: cover; object-position: center 42%; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 21, 43, 0.82) 0%, rgba(10, 21, 43, 0.55) 46%, rgba(10, 21, 43, 0.28) 100%);
}

.hero__inner { position: relative; width: 100%; padding-top: 140px; padding-bottom: 170px; }
.hero__content { max-width: 1100px; }

.hero__title {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-top: 26px;
}
.hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-top: 42px;
}
.hero__lead {
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 52ch;
  margin: 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__coords {
  position: absolute;
  top: 34px;
  right: max(24px, calc((100% - var(--container)) / 2));
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.hero__coords::before {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.hero__strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 21, 43, 0.35);
}
.hero__stripInner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero__stat {
  padding: 22px 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__stat:first-child { border-left: none; padding-left: 0; }
.hero__stat strong {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 26px;
  font-weight: 700;
}
.hero__stat span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ---------- Principles (Mission / Vision / Purpose) ---------- */

.principles { background: var(--paper); }
.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.principles__item { border-top: 2px solid var(--navy); padding-top: 26px; }
.principles__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--red);
  letter-spacing: 0.08em;
}
.principles__title {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 12px 0 12px;
}
.principles__item p { font-size: 15px; line-height: 1.7; }

/* ---------- About ---------- */

.about { background: var(--stone); }
.about__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: start;
}
.about__para { margin-top: 20px; font-size: 16px; line-height: 1.75; }
.about__content .h2 { margin-bottom: 6px; }

.about__metrics {
  display: flex;
  gap: 48px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.about__metric strong {
  display: block;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.about__metric span { font-size: 13px; color: var(--muted); }

.about__media img { width: 100%; height: 460px; object-fit: cover; }
.about__caption {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.92);
  padding: 22px 26px;
  font-size: 15px;
  line-height: 1.6;
}
.about__caption span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}

.about__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 56px;
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.about__point { display: flex; gap: 18px; align-items: flex-start; }
.about__point svg { width: 24px; height: 24px; flex: none; color: var(--red); margin-top: 2px; }
.about__point p { font-size: 15px; line-height: 1.65; }
.about__point strong { color: var(--navy); font-weight: 600; }

/* ---------- Stat band ---------- */

.statband { background: var(--navy-900); color: #fff; padding: 84px 0; }
.statband__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.statband__item {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 28px;
}
.statband__num {
  display: block;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: clamp(2.4rem, 3.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.statband__item span {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8FA6CC;
}

/* ---------- Services (accordion) ---------- */

.services { background: var(--paper); }
.services__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}

.services__media {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  height: 520px;
}
.services__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.services__panel.active { opacity: 1; }
.services__panel img { width: 100%; height: 100%; object-fit: cover; }
.services__panel figcaption {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 20px;
}

.acc__item { border-bottom: 1px solid var(--line); }
.acc__item:first-child { border-top: 1px solid var(--line); }

.acc__head {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr 20px;
  align-items: center;
  text-align: left;
  padding: 24px 0;
}
.acc__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.acc__title {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color 0.2s ease;
}
.acc__head:hover .acc__title { color: var(--royal); }

.acc__toggle { position: relative; width: 14px; height: 14px; justify-self: end; }
.acc__toggle::before, .acc__toggle::after {
  content: "";
  position: absolute;
  background: var(--navy);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.acc__toggle::before { left: 0; right: 0; top: 6px; height: 2px; }
.acc__toggle::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.acc__item.active .acc__toggle::after { transform: scaleY(0); }

.acc__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.25, 0.8, 0.35, 1);
}
.acc__item.active .acc__body { max-height: 420px; }
.acc__body p { padding: 0 0 18px 44px; font-size: 15px; line-height: 1.7; }

.acc__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  padding: 0 0 28px 44px;
}
.acc__features li {
  position: relative;
  font-size: 14px;
  color: var(--navy);
  padding-left: 16px;
}
.acc__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  background: var(--red);
}

/* ---------- Routes (interactive dark operations chart) ---------- */

.routes { background: var(--navy-950); }
.routes__stage { position: relative; height: 760px; overflow: hidden; }

#routeMap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: #E9EEF6;
  z-index: 0;
}
#routeMap.leaflet-container {
  background: #E9EEF6;
  font-family: var(--font-body);
}

/* Route polylines (Leaflet SVG renderer) */
.route-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: opacity 0.45s ease;
}
.route-line--out { stroke: #3E6DA6; }
.route-line--in { stroke: #E4374F; }
.route-dim { opacity: 0.1; }

/* Moving light pulses along the active route (vessels under way) */
.route-flow {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 0.1 28;
  animation: routeFlow 26s linear infinite;
  transition: opacity 0.4s ease;
}
.route-flow--out { stroke: #16294F; }
.route-flow--in { stroke: #C4001E; }
.route-flow.route-dim { opacity: 0; }
.route-flow--hidden { opacity: 0; }
@keyframes routeFlow {
  to { stroke-dashoffset: -562; }
}
@media (prefers-reduced-motion: reduce) {
  .route-flow { animation: none; opacity: 0; }
}

/* Port pins (Leaflet divIcons) */
.port-pin { background: none; border: none; }
.port-pin__dot {
  position: absolute;
  left: -4px; top: -4px;
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: var(--navy-950);
  border: 1.4px solid #fff;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.port-pin__label {
  position: absolute;
  left: 12px; top: -8px;
  line-height: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--navy-950);
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.85);
}
.port-pin--left .port-pin__label { left: auto; right: 12px; text-align: right; }
/* Ports that sit close to a neighbour at this zoom render their label BELOW
   the dot instead of level with it, so the two labels stack instead of
   overlapping. Only the LABEL moves -- the dot always stays on its true
   coordinate, otherwise the pin drifts off the route line it belongs to. */
.port-pin--below .port-pin__label { left: 9px; top: 12px; }
.port-pin__label--hidden { opacity: 0; }
.port-pin { opacity: 0.4; transition: opacity 0.45s ease; }
.port-pin--on { opacity: 1; }
.port-pin--on .port-pin__dot { background: var(--navy-950); border-color: #E4374F; }
.port-pin--hub .port-pin__dot { left: -5px; top: -5px; width: 10px; height: 10px; }
.port-pin--hub.port-pin--on .port-pin__dot { background: #E4374F; border-color: var(--navy-950); }

/* Leaflet chrome, restyled for the dark chart */
#routeMap .leaflet-control-zoom { border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; }
#routeMap .leaflet-control-zoom a {
  background: rgba(14, 31, 61, 0.92);
  color: #C6D1E3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  width: 32px; height: 32px; line-height: 32px;
  font-size: 15px;
}
#routeMap .leaflet-control-zoom a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
#routeMap .leaflet-control-attribution {
  background: rgba(10, 21, 43, 0.75);
  color: #51648A;
  font-size: 10px;
  padding: 2px 8px;
}
#routeMap .leaflet-control-attribution a { color: #6C7F9E; }
/* Tint the neutral light basemap gently toward the brand navy */
#routeMap .leaflet-tile-pane { filter: sepia(0.15) hue-rotate(182deg) saturate(1.15) brightness(1.02); }

.routes__sidebar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: max(24px, calc((100% - var(--container)) / 2));
  width: 340px;
  background: rgba(14, 31, 61, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 32px;
  transition: width 0.35s ease, padding 0.35s ease, background 0.35s ease;
}

/* Minimize toggle -- lets the visitor collapse the panel to see the map
   underneath without losing their place (route stays selected). */
.routes__sidebarToggle {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.routes__sidebarToggle:hover { background: rgba(255, 255, 255, 0.18); }
.routes__sidebarToggle__icon {
  position: relative;
  width: 10px;
  height: 10px;
}
.routes__sidebarToggle__icon::before,
.routes__sidebarToggle__icon::after {
  content: "";
  position: absolute;
  background: #fff;
}
/* Minus sign (expanded state: click to minimize) */
.routes__sidebarToggle__icon::before { top: 50%; left: 0; width: 100%; height: 1.6px; margin-top: -0.8px; }
.routes__sidebarToggle__icon::after { display: none; }
/* Plus sign (collapsed state: click to expand) */
.routes__sidebar--collapsed .routes__sidebarToggle__icon::after {
  display: block; left: 50%; top: 0; width: 1.6px; height: 100%; margin-left: -0.8px;
}

.routes__sidebarBody {
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}
.routes__sidebar--collapsed {
  width: 152px;
  padding: 14px;
  background: rgba(14, 31, 61, 0.7);
}
.routes__sidebar--collapsed .routes__sidebarBody {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.routes__sidebar--collapsed::after {
  content: "Show routes";
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #C7D3EA;
  margin-top: 6px;
}
.routes__title {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
  margin-top: 16px;
}
.routes__sub { font-size: 13px; color: #8FA6CC; margin-top: 8px; }

.routes__tabs { margin-top: 22px; display: flex; flex-direction: column; }
.route__btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
  padding: 11px 14px;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.route__btn:hover { background: rgba(255, 255, 255, 0.05); }
.route__btn.active { background: rgba(255, 255, 255, 0.08); border-left-color: #E4374F; }
.route__btnAbbr {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}
.route__btnName { font-size: 12.5px; color: #8FA6CC; }

.routes__link {
  display: inline-block;
  margin-top: 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: #9FB8E8;
}
.routes__link:hover { text-decoration: underline; }

/* Console bar: live rotation of the selected service */
.routes__console {
  position: absolute;
  left: calc(max(24px, (100% - var(--container)) / 2) + 340px + 24px);
  right: max(24px, calc((100% - var(--container)) / 2));
  bottom: 24px;
  max-height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(14, 31, 61, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 16px 20px;
  overflow-y: auto;
}
.routes__consoleRow { display: flex; align-items: center; gap: 16px; }
.routes__consoleRow--top { align-items: flex-start; }
.routes__consoleRow--bottom { justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; }
.routes__consoleAbbr {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  flex-shrink: 0;
  padding: 2px 16px 0 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.routes__consoleRotation {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  color: #B9C9E4;
}
.routes__consoleRotation .sep { color: #5B77A3; padding: 0 3px; }
.routes__consoleLegend { display: inline-flex; gap: 16px; }
.routes__legendKey {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8FA6CC;
}
.routes__legendKey::before { content: ""; width: 18px; height: 3px; }
.routes__legendKey--out::before { background: #8FB0DE; }
.routes__legendKey--in::before { background: #E4374F; }

.routes__downloadBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  padding: 9px 14px;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.routes__downloadBtn:hover { background: var(--red-dark); }
.routes__downloadBtn::after { content: "\2193"; }
.routes__downloadBtn--soon {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #8FA6CC;
  cursor: default;
  pointer-events: none;
}
.routes__downloadBtn--soon::after { content: ""; }


/* ---------- Cooperation rotations ---------- */

.coop { background: var(--stone); }
.coop__blocks { display: flex; flex-direction: column; gap: 48px; }
.coop__block { border-top: 1px solid var(--line); padding-top: 32px; }
.coop__name {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 18px;
}
.coop__name abbr {
  color: var(--red);
  margin-right: 14px;
  letter-spacing: 0.05em;
}

.rotation { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.rotation__port {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid #D9DEE5;
  padding: 8px 12px;
  white-space: nowrap;
}
.rotation__port:not(:first-child)::before {
  content: "\2192";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  color: #9AA6B5;
  font-size: 13px;
}
.rotation__port--return { border-style: dashed; color: var(--muted); }

.coop__regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.coop__regions dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.coop__regions dd { font-size: 14px; color: var(--navy); }

/* Dark rotation chips (new services cards) */
.rotation--dark .rotation__port {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.rotation--dark .rotation__port:not(:first-child)::before { color: rgba(255, 255, 255, 0.4); }
.rotation--dark .rotation__port--return { color: rgba(255, 255, 255, 0.55); }

/* Staggered port reveal, used by the coop tab switcher and new-services cards */
.rotation--timeline .rotation__port {
  opacity: 0;
  transform: translateY(6px);
  animation: portReveal 0.45s ease forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes portReveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rotation--timeline .rotation__port { animation: none; opacity: 1; transform: none; }
}

/* ---------- Cooperation services - interactive tab switcher ---------- */

.coopSwitch { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }

.coopSwitch__tabs { display: flex; flex-direction: column; gap: 2px; }
.coopTab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid var(--line);
  cursor: pointer;
  padding: 18px 22px;
  font-family: inherit;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.coopTab:hover { background: rgba(22, 41, 79, 0.04); }
.coopTab.active { border-left: 2px solid var(--red); background: var(--paper); }
.coopTab__abbr {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red);
}
.coopTab__name {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
}
.coopTab__meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.coopTab__meta strong { color: var(--navy); font-weight: 600; }

.coopSwitch__panels { position: relative; }
.coopPanel { display: none; }
.coopPanel.active { display: block; animation: coopPanelIn 0.4s ease; }
@keyframes coopPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .coopPanel.active { animation: none; }
}

/* ---------- New services ---------- */

.newsvc { background: var(--navy-800); color: #fff; }
.newsvc__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.newsvc__text { margin-top: 22px; font-size: 16px; line-height: 1.75; color: #B9C6DC; }

.newsvc__cards { display: flex; flex-direction: column; gap: 18px; }
.newsvc__card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  padding: 26px 30px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.newsvc__card.active { border-color: rgba(228, 55, 79, 0.55); background: rgba(255, 255, 255, 0.06); }
.newsvc__cardHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 18px;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.newsvc__cardHead h3 {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.newsvc__cardStats { display: flex; gap: 20px; font-family: var(--font-mono); font-size: 11.5px; color: #8FA6CC; }
.newsvc__cardStats strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
  margin-right: 4px;
}
.newsvc__cardToggle { position: relative; width: 14px; height: 14px; flex-shrink: 0; align-self: center; }
.newsvc__cardToggle::before, .newsvc__cardToggle::after {
  content: "";
  position: absolute;
  background: #fff;
  transition: transform 0.25s ease;
}
.newsvc__cardToggle::before { left: 0; right: 0; top: 6px; height: 2px; }
.newsvc__cardToggle::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.newsvc__card.active .newsvc__cardToggle::after { transform: scaleY(0); }

.newsvc__cardBody { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.newsvc__card.active .newsvc__cardBody { max-height: 560px; }

.newsvc__cardFacts { display: flex; gap: 32px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.newsvc__cardFacts dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8FA6CC;
  margin-bottom: 6px;
}
.newsvc__cardFacts dd { font-family: var(--font-display); font-stretch: 122%; font-size: 14px; font-weight: 600; color: #fff; }

/* ---------- Rotation flow (pill nodes + curved elbow connectors, replaces the chip list once JS renders it) ---------- */

.rotationFlow { display: none; position: relative; margin: 8px 0 18px; }
.rotationWrap.has-ribbon .rotation {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}
.rotationWrap.has-ribbon .rotationFlow { display: block; }
.rotationFlow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flowConnector {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 1 6;
  stroke-linecap: round;
}

/* The single ship that sails the whole rotation, start to end, then loops */
.flowShip { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }

.flowNode {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-stretch: 122%;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--navy) 0%, #3E5FA0 100%);
  box-shadow: 0 8px 18px rgba(10, 21, 43, 0.22);
}
.flowNode__step {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}
.flowNode--return {
  background: rgba(22, 41, 79, 0.08);
  border: 1.5px dashed rgba(22, 41, 79, 0.35);
  color: var(--muted);
  box-shadow: none;
}
.flowNode--return .flowNode__step { background: rgba(22, 41, 79, 0.1); color: var(--muted); }

/* Hover / focus tooltip - call position, fleet on this service, other
   services sharing this port. Sourced live from the page's own fleet
   numbers (see getServiceMeta / buildServiceDirectory in script.js). */
.flowNode { cursor: default; }
.flowNode:hover, .flowNode:focus-visible { z-index: 5; }
.flowNode:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 2px; }
.flowNode__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translate(-50%, 4px);
  min-width: 190px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--navy);
  box-shadow: 0 12px 28px rgba(10, 21, 43, 0.32);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
}
.flowNode__tip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  background: var(--navy);
  transform: rotate(45deg) translateY(-6px);
}
.flowNode__tipName {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.flowNode__tipRow { color: rgba(255, 255, 255, 0.72); }
.flowNode:hover .flowNode__tip,
.flowNode:focus-visible .flowNode__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Dark card variant (new-services cards on navy background) */
.rotationFlow--dark .flowNode { background: linear-gradient(135deg, #C4001E 0%, #7A1030 100%); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); }
.rotationFlow--dark .flowNode--return {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.65);
}
.rotationFlow--dark .flowNode--return .flowNode__step { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); }

/* ---------- Fleet rotation summary ---------- */

.summary { background: var(--paper); }
.summary__table { border-top: 1px solid var(--line); }
.summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.summary__name {
  display: block;
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}
.summary__ports { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; }
.summary__cellFigs { display: flex; gap: 36px; flex: none; }
.summary__cellFigs span {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
}

.summary__totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 64px;
}
.summary__total { border-top: 2px solid var(--navy); padding-top: 18px; }
.summary__total strong {
  display: block;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.summary__total span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Network ---------- */

.network { background: var(--stone); }
.network__markets {
  display: grid;
  /* tighter column gap so all six groups (HQ + five regions) fit one desktop
     row without orphaning the last one or wrapping the longest heading; the
     row gap stays wide for the narrower viewports that do wrap */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-gap: 28px;
  row-gap: 40px;
}
.network__market h3 {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.network__market li { font-size: 14px; padding: 4px 0; }

.network__partners { margin-top: 88px; padding-top: 48px; border-top: 1px solid var(--line); }
.network__partnersLabel {
  font-size: 14px;
  color: var(--body);
  max-width: 62ch;
  margin-bottom: 32px;
}
/* Auto-scrolling partner-logo marquee */
.partnersMarquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.partnersMarquee__track {
  display: flex;
  width: max-content;
  animation: partnersMarquee 32s linear infinite;
}
.partnersMarquee:hover .partnersMarquee__track { animation-play-state: paused; }

.partnersMarquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: 0 40px;
  border-right: 1px solid var(--line);
}
.partner img {
  height: 34px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
.partner__fallback {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5A6A80;
  white-space: nowrap;
}

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

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

/* ---------- Affiliate offices ---------- */

.affiliates { background: var(--paper); }
.affiliates__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.affiliates__download { align-self: flex-start; }

/* Region tab switcher - offices are grouped by region so the page never
   dumps all 18 offices at once; one region (≤5 offices) is visible at a time. */
.affSwitch__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.affTab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 22px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-align: left;
}
.affTab:hover { background: rgba(22, 41, 79, 0.04); }
.affTab.active { border-bottom-color: var(--red); }
.affTab__name {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
}
.affTab__count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.affTab.active .affTab__count { color: var(--red); }

.affSwitch__panels { position: relative; }
.affPanel { display: none; }
.affPanel.active { display: block; animation: affPanelIn 0.4s ease; }
@keyframes affPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .affPanel.active { animation: none; }
}

/* Cards: fixed-height header block + flexible contact area keeps every
   card's location tag and contact name aligned to the same baseline,
   regardless of how long an individual company name or role runs. */
.affiliates__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.affiliate {
  background: var(--paper);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.affiliate__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 62px;
  justify-content: flex-start;
}
.affiliate__head h4 {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
  line-height: 1.35;
}
.affiliate__loc {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  cursor: pointer;
}
.affiliate__loc:hover,
.affiliate__loc:focus-visible {
  text-decoration: underline;
}
.affiliate__contact {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.affiliate__contacts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.affiliate__contacts .affiliate__contact {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.affiliate__contactName { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.5; }
.affiliate__contactRole {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 3px;
}
.affiliate__contactLine { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.6; word-break: break-word; }
.affiliate__contact a { color: var(--muted); }
.affiliate__contact a:hover { color: var(--red); }

/* ---------- Team (placeholder) ---------- */

.team { background: var(--stone); }
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.team__card { text-align: center; }
.team__photo {
  aspect-ratio: 1 / 1;
  background: var(--line);
  border: 1px dashed #C7CEDA;
  margin-bottom: 16px;
}
.team__name {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.team__role { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ---------- Fleet ---------- */

.fleet { background: var(--paper); }
.fleet__group + .fleet__group { margin-top: 72px; }
.fleet__groupTitle {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.fleet__groupTitle span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
}

.fleet__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.fleet__grid--3 { grid-template-columns: repeat(3, 1fr); }
.fleet__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }

.vessel { border: 1px solid var(--line); background: var(--paper); }
.vessel__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.vessel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.vessel:hover .vessel__media img { transform: scale(1.04); }

/* Two-photo crossfade: a second angle of the same ship reveals on hover. */
.vessel__media .vessel__photo--alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.vessel:hover .vessel__media .vessel__photo--alt { opacity: 1; }

/* If a representative photo fails to load, show a flat placeholder instead
   of a broken image icon. */
.vessel__media--fallback { background: var(--stone); position: relative; }
.vessel__media--fallback img { display: none; }
.vessel__media--fallback::after {
  content: "Photo pending";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.fleet__historyNote {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.vessel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
}
.vessel__head h4 {
  font-family: var(--font-display);
  font-stretch: 122%;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.vessel__flag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 2px 7px;
}

.vessel__specs { padding: 0 18px 16px; }
.vessel__specs div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.vessel__specs div:first-child { border-top: none; }
.vessel__specs dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.vessel__specs dd { font-size: 13px; font-weight: 600; color: var(--navy); }

/* ---------- Culture ---------- */

.culture { background: var(--navy-900); color: #fff; }
.culture__slider { display: grid; position: relative; min-height: 340px; }
.culture__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.culture__slide.active { opacity: 1; pointer-events: auto; }
.culture__content { max-width: 580px; }
.culture__content p:last-child {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.75;
  color: #B9C6DC;
}
.culture__letter {
  font-family: var(--font-display);
  font-size: clamp(120px, 20vw, 260px);
  font-weight: 700;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
  user-select: none;
}

.culture__pagination {
  grid-area: 1 / 1;
  align-self: end;
  display: flex;
  gap: 10px;
  padding-top: 40px;
  position: relative;
  z-index: 2;
}
.culture__paginationDot {
  width: 32px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.25s ease;
}
.culture__paginationDot.active { background: var(--red); }

/* ---------- Contact ---------- */

.contact { background: var(--paper); }
.contact__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

.contact__intro { max-width: 460px; }
.contact__lead { margin-top: 20px; margin-bottom: 32px; font-size: 16px; line-height: 1.75; }

.contact__details {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px 20px;
  background: var(--stone);
  border: 1px solid var(--line);
  padding: 40px;
}
.contact__detail dd { white-space: nowrap; }
@media (max-width: 480px) {
  .contact__detail dd { white-space: normal; }
}
.contact__detail dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.contact__detail dd { font-size: 15px; color: var(--navy); line-height: 1.6; }
.contact__detail a { color: var(--royal); }
.contact__detail a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */

.footer { background: var(--navy-950); color: #C6D1E3; padding: 40px 0 24px; }
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 40px;
}
.footer__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  max-width: none;
}
.footer__col {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.footer__logo {
  height: 44px;
  width: auto;
  background: #fff;
  padding: 5px;
  border-radius: 2px;
  flex-shrink: 0;
}
.footer__tagline {
  margin-top: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #8FA0BE;
  max-width: 32ch;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7E90B2;
  margin: 0;
}
.footer__col a {
  display: inline-block;
  font-size: 13.5px;
  padding: 0;
  color: #C6D1E3;
  transition: color 0.15s ease;
}
.footer__col a:hover { color: #fff; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  color: #7E90B2;
}
.footer__legal { display: flex; gap: 26px; flex-wrap: wrap; }
.footer__legal a:hover { color: #fff; }
/* Privacy/Terms/Cookie pages don't exist yet - shown as inert labels
   (not dead "#" links) with a "Coming soon" tooltip until real pages ship. */
.footer__legalSoon { opacity: 0.55; cursor: default; }
.footer__legalLink { color: inherit; text-decoration: none; }
.footer__legalLink:hover { color: #fff; }

/* ---------- Scroll to top ---------- */

.scrollTop {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 80;
  width: 44px;
  height: 44px;
  background: var(--paper);
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 17px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.scrollTop.visible { opacity: 1; pointer-events: auto; }
.scrollTop:hover { background: var(--navy); color: #fff; }

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .fleet__grid { grid-template-columns: repeat(2, 1fr); }
  .fleet__grid--3 { grid-template-columns: repeat(2, 1fr); }
  .affiliates__grid { grid-template-columns: repeat(2, 1fr); }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
}

/* The nav has grown to 10 links (Company, Services, Routes, Cooperation,
   New services, Network, Affiliates, Fleet, Team, Culture) plus the
   Contact button. Measured: logo (182px) + nav (1115px) + 24px gap = 1321px
   against a header row that only has 1320px to give them - a zero-margin
   fit that overflows and clips the Contact button off-screen on real
   hardware (Windows font-metric differences, scrollbar width, non-100%
   zoom all tip it over; this is exactly what happened on a real machine
   even at a 1920px-wide display, since none of those factors show up in a
   clean headless render). Switch to the hamburger with real margin to
   spare - just for the nav, without dragging every other section into its
   mobile layout early too. Placed here (after the base header rules,
   before the 960px block) so it wins the cascade at equal specificity. */
@media (max-width: 1620px) {
  .header__nav { display: none; }
  .header__hamburger { display: flex; }
}

@media (max-width: 960px) {
  .section { padding: 72px 0; }

  .section__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }

  .hero__inner { padding-top: 90px; padding-bottom: 220px; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 30px; }
  .hero__coords { display: none; }
  .hero__stripInner { grid-template-columns: repeat(2, 1fr); }
  .hero__stat { border-left: none; padding-left: 0; padding-right: 20px; }

  .principles__grid { grid-template-columns: 1fr; gap: 36px; }

  .about__grid { grid-template-columns: 1fr; gap: 48px; }
  .about__media img { height: 380px; }
  .about__points { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; }

  .statband { padding: 60px 0; }
  .statband__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }

  .services__grid { grid-template-columns: 1fr; gap: 40px; }
  .services__media { position: relative; top: 0; height: 320px; order: -1; }

  /* Routes: stack sidebar below the map */
  .routes { padding-bottom: 40px; }
  .routes__stage {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  #routeMap { position: relative; inset: auto; height: 440px; order: 1; }
  .routes__console {
    position: static;
    order: 2;
    margin: 0 24px;
    max-height: none;
    overflow-y: visible;
  }
  .routes__sidebar {
    position: static;
    transform: none;
    width: auto;
    order: 3;
    margin: 20px 24px 0;
  }

  .coop__regions { grid-template-columns: 1fr; gap: 16px; }

  .coopSwitch { grid-template-columns: 1fr; gap: 8px; }
  .coopSwitch__tabs { flex-direction: row; overflow-x: auto; gap: 0; -webkit-overflow-scrolling: touch; }
  .coopTab { flex: 0 0 auto; border-left: none; border-bottom: 2px solid var(--line); white-space: nowrap; }
  .coopTab.active { border-bottom-color: var(--red); }

  .newsvc__grid { grid-template-columns: 1fr; gap: 44px; }

  .summary__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .summary__cellFigs { gap: 24px; }
  .summary__totals { grid-template-columns: repeat(2, 1fr); margin-top: 48px; }

  .culture__slide { grid-template-columns: 1fr; gap: 24px; }
  .culture__letter { display: none; }
  .culture__slider { min-height: 300px; }

  .contact__grid { grid-template-columns: 1fr; gap: 48px; }
  .contact__details { padding: 28px 24px; }

  .footer__grid { gap: 56px; }
}

@media (max-width: 560px) {
  .hero { min-height: 640px; }
  .hero__stripInner { grid-template-columns: 1fr 1fr; }
  .hero__stat { padding: 14px 12px 14px 0; }
  .hero__stat strong { font-size: 20px; }

  .about__metrics { flex-wrap: wrap; gap: 24px; }

  .acc__head { grid-template-columns: 32px 1fr 20px; }
  .acc__body p, .acc__features { padding-left: 32px; }
  .acc__features { grid-template-columns: 1fr; }

  .contact__details { grid-template-columns: 1fr; }

  .fleet__grid, .fleet__grid--3, .fleet__grid--2 { grid-template-columns: 1fr; }
  .partner { height: 60px; padding: 0 24px; }
  .partner img { height: 26px; max-width: 100px; }
  .affiliates__grid { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: repeat(2, 1fr); }

  .footer__grid { flex-direction: column; gap: 36px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Hidden sections: Team and Culture */
.section.team,
.section.culture {
  display: none !important;
}