/* ===== Hero ===== */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-950); color: var(--white); }
.hero__slides { display: grid; min-height: clamp(640px, 100svh, 960px); }
.hero__slide {
  position: relative; z-index: 0; grid-area: 1 / 1;
  display: grid; align-items: end;
  padding-block: calc(var(--header-h) + var(--space-7)) clamp(8.5rem, 16vh, 11rem);
  opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease-in-out), visibility 0s linear 1s;
}
.hero__slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition-delay: 0s; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(10 13 18 / 0.88) 0%, rgb(10 13 18 / 0.6) 45%, rgb(10 13 18 / 0.15) 100%),
    linear-gradient(0deg, rgb(10 13 18 / 0.8) 0%, transparent 45%);
}
.hero__picture, .hero__picture img { width: 100%; height: 100%; }
.hero__picture img { object-fit: cover; }
.hero__content { display: grid; gap: 1.25rem; justify-items: start; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--red-100); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.hero__eyebrow::before { content: ""; flex: none; width: 2.5rem; height: 2px; background: var(--red-600); }
.hero__title { max-width: 15ch; color: var(--white); font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; }
.hero__text { max-width: 36rem; color: rgb(255 255 255 / 0.85); font-size: var(--fs-lead); }
.hero__content .btn { margin-top: var(--space-3); }
/* Slides 2+ animate their text in; slide 1 is never animated on first load (protects LCP). */
.hero.is-ready .hero__slide .hero__content > * { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.hero.is-ready .hero__slide:not(.is-active) .hero__content > * { opacity: 0; transform: translateY(18px); }
.hero.is-ready .hero__slide.is-active .hero__content > :nth-child(1) { transition-delay: 300ms; }
.hero.is-ready .hero__slide.is-active .hero__content > :nth-child(2) { transition-delay: 380ms; }
.hero.is-ready .hero__slide.is-active .hero__content > :nth-child(3) { transition-delay: 460ms; }
.hero.is-ready .hero__slide.is-active .hero__content > :nth-child(4) { transition-delay: 540ms; }

.hero__controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.hero__tabs { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); max-width: 58rem; }
.hero__tab { display: grid; align-content: start; gap: 0.375rem; padding: 0; border: 0; background: none; color: rgb(255 255 255 / 0.62); text-align: left; transition: color var(--dur-2); }
.hero__tab:hover, .hero__tab[aria-current="true"] { color: var(--white); }
.hero__tab-bar { position: relative; height: 2px; margin-bottom: var(--space-2); overflow: hidden; background: rgb(255 255 255 / 0.22); }
.hero__tab-bar::after { content: ""; position: absolute; inset: 0; background: var(--red-600); transform: scaleX(0); transform-origin: 0 50%; }
.hero__tab[aria-current="true"] .hero__tab-bar::after { transform: scaleX(1); }
.hero.is-ticking .hero__tab[aria-current="true"] .hero__tab-bar::after { animation: hero-progress var(--hero-interval, 7000ms) linear both; }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__tab-num { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; color: var(--red-100); }
.hero__tab-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }
.hero__nav { display: flex; gap: 0.625rem; }
.hero__nav .icon-btn { border-color: rgb(255 255 255 / 0.4); }
/* Freight lanes on the right of every slide (spec 2026-10-13 §3.1); the text column stays clear. */
.network--hero {
  position: absolute; z-index: 1; top: calc(50% + var(--header-h) / 2 - 3rem); right: max(var(--gutter), (100% - var(--container-header)) / 2);
  width: clamp(420px, 44vw, 700px); transform: translateY(-50%);
  --net-dots: 0.5;
}
.network--hero::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; background: radial-gradient(closest-side, rgb(10 13 18 / 0.55), transparent); }
@media (max-width: 1023px) { .network--hero { display: none; } }
@media (max-width: 1023px) {
  .hero__tabs { display: none; }
  .hero__controls { justify-content: flex-start; }
}

/* ===== Services: departure board with drawn equipment (spec 2026-10-13-fresh-logistics-ideas A + D) ===== */
.board { position: relative; isolation: isolate; overflow: hidden; padding: clamp(0.75rem, 2vw, 1.5rem) clamp(0.75rem, 2.5vw, 2rem); border-radius: var(--radius-xl); background: radial-gradient(120% 140% at 0% 0%, var(--ink-800) 0%, var(--ink-950) 60%); color: var(--white); box-shadow: var(--shadow-lg); }
.fleet-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.board__rows { list-style: none; }
.board__row {
  position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 10.5rem auto; align-items: center; gap: var(--space-3) var(--space-5);
  padding: var(--space-5) var(--space-4); border-radius: var(--radius); transition: background-color var(--dur-2);
}
.board__row + .board__row::before { content: ""; position: absolute; inset: 0 var(--space-4) auto; height: 1px; background: rgb(255 255 255 / 0.08); }
.board__row:hover { background: rgb(255 255 255 / 0.04); }
.board__row:has(.board__link:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.board__no { align-self: start; padding-top: 0.25rem; color: var(--red-500); font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; }
.board__main { display: grid; gap: var(--space-2); }
.board__link { color: inherit; text-decoration: none; }
.board__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole row is the link */
.flaps { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; }
.flaps__word { display: flex; gap: 2px; }
.flap {
  display: grid; place-items: center; width: 1.25rem; height: 1.875rem; border-radius: 3px; contain: strict; /* a letter change stays inside its tile */
  background: linear-gradient(var(--ink-700) 0 48%, var(--ink-950) 48% 52%, var(--ink-800) 52%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.04);
  color: var(--white); font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; line-height: 1; text-transform: uppercase;
}
.board__text { max-width: 40rem; color: rgb(255 255 255 / 0.72); font-size: var(--fs-small); }
.board__vehicle { display: block; width: 100%; height: auto; overflow: visible; color: var(--white); transition: transform 1400ms var(--ease-out), opacity 900ms var(--ease-out); }
.board__vehicle use { transition: transform var(--dur-3) var(--ease-out); }
.board__row:hover .board__vehicle use { transform: translateX(6px); }
.board__more { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--white); font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.board__more-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--red-600); transition: transform var(--dur-2) var(--ease-out); }
.board__more-icon .icon { width: 1rem; height: 1rem; }
.board__row:hover .board__more-icon { transform: translateX(4px); }
/* Drawings roll in once each row's letters have settled (board.js arms this; parked without it). */
@media (prefers-reduced-motion: no-preference) {
  .board--armed .board__row:not(.is-arrived) .board__vehicle { transform: translateX(-40%); opacity: 0; }
}
@media (max-width: 767px) {
  .board__row { grid-template-columns: 2.25rem minmax(0, 1fr) auto; grid-template-areas: "no main main" ". vehicle more"; padding-inline: var(--space-2); }
  .board__no { grid-area: no; font-size: 1.125rem; }
  .board__main { grid-area: main; }
  .board__vehicle { grid-area: vehicle; width: 8.5rem; }
  .board__more { grid-area: more; }
  .board__row + .board__row::before { inset-inline: var(--space-2); }
  .flaps { gap: 0.3125rem 0.5rem; }
  .flap { width: 0.9375rem; height: 1.375rem; font-size: 0.875rem; }
}

/* ===== Services, alternative layout: the original expanding photo panels (kept on request, owner 2026-10-13;
   data/home.json services.layout "panels", preview at /_home-panels/) ===== */
.svc-panels { list-style: none; display: flex; gap: var(--space-3); }
.svc-panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-width: 0; border-radius: var(--radius-lg); background: var(--ink-900); color: var(--white);
}
.svc-panel__media { position: absolute; inset: 0; z-index: -1; }
.svc-panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.svc-panel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 13 18 / 0.05) 25%, rgb(10 13 18 / 0.9) 100%); }
.svc-panel:hover .svc-panel__media img { transform: scale(1.05); }
.svc-panel__body { display: grid; gap: var(--space-3); padding: clamp(1.25rem, 2vw, 2rem); }
.svc-panel__num { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.08em; color: var(--red-100); }
.svc-panel__title { color: var(--white); font-size: var(--fs-h3); line-height: 1.1; }
.svc-panel__link { color: inherit; text-decoration: none; }
.svc-panel__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc-panel__text { max-width: 26rem; color: rgb(255 255 255 / 0.86); font-size: var(--fs-small); }
.svc-panel__more { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--white); font-size: var(--fs-small); font-weight: 600; }
.svc-panel__more .icon { width: 1rem; height: 1rem; color: var(--red-100); }
@media (min-width: 1024px) and (hover: hover) {
  .svc-panels { height: clamp(520px, 62vh, 620px); }
  .svc-panel { flex: 1 1 0; transition: flex-grow 700ms var(--ease-out); }
  .svc-panels:not(:hover):not(:focus-within) .svc-panel:first-child,
  .svc-panel:hover,
  .svc-panel:focus-within { flex-grow: 2.6; }
  .svc-panel__text, .svc-panel__more { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 600ms var(--ease-out), opacity 400ms var(--ease-out); }
  .svc-panels:not(:hover):not(:focus-within) .svc-panel:first-child :is(.svc-panel__text, .svc-panel__more),
  .svc-panel:hover :is(.svc-panel__text, .svc-panel__more),
  .svc-panel:focus-within :is(.svc-panel__text, .svc-panel__more) { max-height: 8rem; opacity: 1; transition-delay: 200ms; }
}
@media (max-width: 1023px) {
  .svc-panels {
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-2);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .svc-panels::-webkit-scrollbar { display: none; }
  .svc-panel { flex: 0 0 min(80vw, 360px); height: 440px; scroll-snap-align: start; }
}

/* Large touch screens (tablets in landscape) can't hover, so they get a static five-column grid
   with every description visible instead of the expanding panels. */
@media (min-width: 1024px) and (hover: none) {
  .svc-panels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .svc-panel { min-height: 500px; }
}

/* ===== About ===== */
.about__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.about__media { position: relative; aspect-ratio: 1 / 1.02; }
.about__img { position: absolute; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__img--back { inset: 0 30% 22% 0; }
.about__img--front { inset: 38% 0 0 26%; border: 6px solid var(--white); }
/* Container doors over the front photo (spec 2026-10-13-fresh-logistics-ideas B; owner: the front one): only
   with JS and motion welcome; doors.js opens them once the photo is well in view, then they hide. The photo
   itself never moves. */
.doors { display: none; position: absolute; inset: calc(38% + 6px) 6px 6px calc(26% + 6px); overflow: hidden; border-radius: calc(var(--radius-lg) - 6px); perspective: 1400px; pointer-events: none; }
.door {
  position: absolute; top: 0; bottom: 0; width: 50%; backface-visibility: hidden;
  background: var(--container-ribs), var(--blue-700);
}
.door--l { left: 0; transform-origin: left center; box-shadow: inset -2px 0 0 rgb(0 0 0 / 0.35); }
.door--r { right: 0; transform-origin: right center; }
/* Lock rods */
.door::before, .door::after { content: ""; position: absolute; top: 7%; bottom: 7%; width: 5px; border-radius: 3px; background: linear-gradient(var(--gray-200), var(--gray-500)); }
.door::before { left: 26%; }
.door::after { left: 64%; }
.door__handle { position: absolute; top: 52%; width: 1.375rem; height: 0.375rem; border-radius: 3px; background: var(--gray-200); }
.door--l .door__handle { left: calc(26% + 2px); }
.door--r .door__handle { left: calc(64% - 1.125rem); }
@media (prefers-reduced-motion: no-preference) {
  .js .doors { display: block; }
  .doors.is-open .door--l { animation: door-open-l 1800ms var(--ease-in-out) 300ms forwards; }
  .doors.is-open .door--r { animation: door-open-r 1800ms var(--ease-in-out) 300ms forwards; }
}
@keyframes door-open-l { to { transform: rotateY(-100deg); visibility: hidden; } }
@keyframes door-open-r { to { transform: rotateY(100deg); visibility: hidden; } }
.about__badge {
  position: absolute; top: 3%; right: 4%; z-index: 2;
  display: grid; place-items: center; width: clamp(124px, 13vw, 168px); aspect-ratio: 1;
  border-radius: 50%; background: var(--red-600); color: var(--white);
  box-shadow: 0 14px 30px -10px rgb(221 51 29 / 0.6);
}
.about__badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Spins once (under 5 s, WCAG 2.2.2) when the image block scrolls into view. */
.about__media.is-visible .about__badge-ring { animation: badge-spin 4.5s var(--ease-out) 1 both; }
.about__badge-ring text { fill: var(--white); font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.about__badge-core { display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--ink-950); }
.about__badge-core .icon { width: 42%; height: 42%; transform: rotate(-45deg); }
@keyframes badge-spin { to { transform: rotate(360deg); } }
.about__content { display: grid; gap: var(--space-5); justify-items: start; }
@media (max-width: 1023px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .about__media { width: 100%; max-width: 560px; margin-inline: auto; }
}

/* ===== Help ===== */
.help__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.help__content { display: grid; gap: var(--space-5); justify-items: start; }
.help__phone { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--ink-950); text-decoration: none; }
.help__phone-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--red-50); color: var(--red-600); transition: background-color var(--dur-2), color var(--dur-2); }
.help__phone:hover .help__phone-icon { background: var(--red-600); color: var(--white); }
.help__phone-label { display: block; color: var(--color-text-muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.help__phone-number { display: block; font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); font-weight: 700; line-height: 1.1; }
.help__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); width: 100%; }
.help__card { padding: 1.25rem var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--white); font-size: var(--fs-small); }
.help__card-title { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--ink-950); }
.help__card a { color: var(--color-text); text-decoration: none; }
.help__card a:hover { color: var(--red-600); text-decoration: underline; }
.help__visual { display: grid; gap: var(--space-4); }
.help__img { overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 7; }
.help__img img { width: 100%; height: 100%; object-fit: cover; }
.help__map { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--ink-950); color: var(--white); box-shadow: var(--shadow-md); }
.help__map-frame { position: relative; }
.help__map-caption { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--white); font-size: var(--fs-small); font-weight: 600; }
.help__map-caption .icon { width: 1.125rem; height: 1.125rem; color: var(--red-600); }
@media (max-width: 1023px) { .help__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .help__cards { grid-template-columns: minmax(0, 1fr); } }

/* ===== Process: one drawn port-to-door scene (spec 2026-10-13-fresh-logistics-ideas C; journey.js) =====
   The background is one static SVG; each moving part (.j-part) is its own layer that journey.js slides with
   transforms from its place in the composed still, so scrolling never repaints the drawing. */
.journey { padding: clamp(0.75rem, 2.5vw, 2rem); border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--white) 0%, var(--color-bg-alt) 100%); box-shadow: var(--shadow-md); }
.journey__stage { position: relative; overflow: hidden; width: 100%; margin-inline: auto; aspect-ratio: 1108 / 266; }
.journey__world { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.journey__bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.j-part { position: absolute; display: block; height: auto; overflow: visible; transform-origin: 0 0; }
.process.is-live .j-part, .process.is-live .journey__world { will-change: transform; }
.j-cable { width: 2px; margin-left: -1px; background: var(--ink-700); transform: scaleY(0.2656); }
.j-door { box-sizing: border-box; border: 2px solid var(--ink-700); background: repeating-linear-gradient(180deg, var(--gray-200) 0 calc(20% - 1px), var(--gray-500) calc(20% - 1px) 20%); }
.j-done { opacity: 0; transform-origin: 50% 50%; }
@media (max-width: 699px) {
  /* Phones: a 560-unit window onto the drawing; journey.js pans it with the container. */
  .journey__stage { aspect-ratio: 560 / 266; }
  .journey__world { width: calc(1108 / 560 * 100%); transform: translateX(-24.7292%); }
}
.j-line { fill: none; stroke: var(--ink-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.j-sea { fill: color-mix(in srgb, var(--blue-600) 14%, transparent); stroke: none; }
.j-wave { stroke: var(--blue-600); }
.j-road { stroke: var(--gray-300); stroke-dasharray: 16 14; }
.j-hull { fill: var(--ink-800); }
.j-boot { stroke: var(--red-600); stroke-width: 4; }
.j-white { fill: var(--white); }
.j-grey { fill: var(--gray-300); }
.j-blue { fill: var(--blue-700); }
.j-ink { fill: var(--ink-800); }
.j-red { fill: var(--red-600); }
.j-crane { stroke: var(--blue-700); stroke-width: 5; }
.j-crane-brace { stroke: var(--blue-700); }
.j-roof { stroke: var(--red-600); stroke-width: 4; }
.j-check { fill: var(--red-600); }
.j-check-mark { fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.j-cab { fill: var(--blue-900); }
.j-glass { fill: color-mix(in srgb, var(--blue-600) 22%, var(--white)); stroke: none; }
.j-spokes { stroke-width: 1.5; }
.j-ribs { stroke: rgb(0 0 0 / 0.25); stroke-width: 1.5; }

.process__steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.process__step { display: grid; align-content: start; gap: var(--space-2); padding-top: var(--space-4); border-top: 3px solid var(--red-600); transition: border-color var(--dur-2); }
/* While the scene follows the reader, only the current step is lit (rule and title; body text keeps full contrast). */
.process.is-live .process__step:not(.is-active) { border-color: var(--gray-200); }
.process.is-live .process__step:not(.is-active) .process__title { color: var(--gray-600); }
.process__title { font-size: var(--fs-h3); }
.process__text { max-width: 26rem; color: var(--color-text-muted); }
@media (max-width: 767px) {
  .process__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

/* Pinned (journey.js, motion welcome): the section holds on screen for 150vh of scrolling while the story plays. */
.process.is-pinned { padding-block: 0; }
.process.is-pinned .process__scroll { height: calc(100svh - var(--header-h) + 150vh); }
.process.is-pinned .process__pin {
  position: sticky; top: var(--header-h); display: grid; align-content: center;
  min-height: calc(100svh - var(--header-h)); padding-block: var(--space-6);
}
.process.is-pinned .section-head { margin-bottom: var(--space-5); }
.process.is-pinned .journey__stage { width: min(100%, calc(34svh * 1108 / 266)); }
.process.is-pinned .process__steps { margin-top: var(--space-5); }
@media (max-width: 699px) {
  .process.is-pinned .journey__stage { width: min(100%, calc(30svh * 560 / 266)); }
}
@media (max-width: 767px) {
  /* While pinned on a phone only the current step shows on screen (screen readers still get all three). */
  .process.is-pinned .process__step:not(.is-active) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}