/* ==========================================================================
   Tsaggaris Bros — "Swiss Freight" design system
   The visual language of shipping documents and port signage:
   light base, charcoal ink, signal red held strictly for CTAs / active
   states / the diagonal stripe motif. Weight-led hierarchy, hairline
   document rules, everything anchored left.
   ========================================================================== */

/* ============ Fonts ============ */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow-fallback';
  src: local('Arial');
  size-adjust: 98%;
  ascent-override: 103%;
}

/* ============ Tokens — Swiss Freight ============ */
:root {
  /* primitives */
  --white: #ffffff;
  --grey-100: #f4f4f4;
  --grey-300: #d9d9db;
  --charcoal-900: #2e2e30;
  --charcoal-600: #55555a;
  --red-500: #e23a3f;
  --red-600: #c92f34;
  --green-100: #eef6ef;
  --green-600: #2f7d46;
  --green-800: #1d5232;
  --red-100: #fbeeee;
  --red-800: #96262a;
  --shadow: rgba(46, 46, 48, .35);

  /* semantic */
  --paper: var(--white);
  --surface: var(--grey-100);
  /* line: independent from --grey-300 (which stays reserved for on-dark text,
     e.g. stat labels/eyebrow at 9.61:1 vs --ink). --grey-300 on --paper is
     1.41:1 and --line borders the edge of interactive UI (form fields, the
     nav toggle, service cards, the dropdown) — WCAG 1.4.11 needs 3:1 for
     those. #8a8a8d on white = 3.44:1 (Task 12 QA fix). */
  --line: #8a8a8d;
  --ink: var(--charcoal-900);
  --ink-muted: var(--charcoal-600);
  --signal: var(--red-500);
  --signal-deep: var(--red-600);   /* CTA bg: white label = 5.0:1 AA */

  /* spacing (8px perceptual) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
  --section-gap: clamp(3rem, 8vw, 6rem);

  /* radius by role */
  --radius-input: 4px; --radius-button: 6px; --radius-card: 10px;

  /* type — Perfect Fourth via clamp, rem terms for zoom */
  --text-sm: .875rem;
  --text-base: clamp(1rem, .96rem + .2vw, 1.125rem);
  --text-md: clamp(1.17rem, 1.1rem + .35vw, 1.4rem);
  --text-lg: clamp(1.45rem, 1.3rem + .8vw, 1.9rem);
  --text-xl: clamp(1.9rem, 1.6rem + 1.5vw, 2.6rem);
  --text-2xl: clamp(2.4rem, 1.9rem + 2.8vw, 4rem);

  --wrap-max: 72rem;
  --ease-brand: cubic-bezier(.22, .9, .3, 1);
}

/* ============ Reset / base ============ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'Barlow', 'Barlow-fallback', system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip; /* belt: no horizontal scroll from full-bleed bands */
}

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

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1, h2 { letter-spacing: -0.02em; }
h1 { font-size: var(--text-2xl); line-height: 1.05; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

p, ul, ol { margin: 0 0 var(--space-4); }
p, li { max-width: 68ch; }
p { text-wrap: pretty; }

a { color: inherit; }
main a { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 2px; }
main a:hover { color: var(--signal-deep); }

/* stripe motif on content list markers */
main :is(ul, ol) li::marker { color: var(--signal-deep); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-8) 0; }

table { border-collapse: collapse; width: 100%; margin: 0 0 var(--space-6); }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
th {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
}

address { font-style: normal; }

::selection { background: var(--signal-deep); color: var(--white); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
/* red outline is invisible on dark bands — switch to white there */
.site-footer :focus-visible,
.stat-band :focus-visible,
.hero--compact :focus-visible,
#cookie-banner :focus-visible { outline-color: var(--white); }

/* ============ Utilities ============ */
.wrap { max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--space-4); }

/* Vertical rhythm (Task 15): every .section owns HALF of --section-gap on
   its own top and bottom, so two stacked sections always sum to exactly one
   full gap between their content — predictable regardless of background
   (no more charcoal/light special-casing). The hero is the one deliberate
   exception: its own padding (below) already gives generous breathing room,
   so the section right after it needs none of its own. */
.section { padding-block: calc(var(--section-gap) / 2); }
.hero + .section { padding-top: 0; }
/* Inner pages open with a compact hero banner; give the first content section
   real breathing room beneath it. The full-bleed home hero stays tight to its
   section band (rule above), so this only affects compact-hero pages. */
.hero--compact + .section { padding-top: var(--section-gap); }
/* section_band charcoal variant (Task 4): mirrors .hero--compact's ink/white
   scheme. Eyebrow overridden to --grey-300 — signal-deep on ink measures
   ~2.76:1 (fails AA); grey-300 on ink is verified 9.61:1 AAA (Task 3).
   Task 15: compact heading-only band gets a tighter, flat block padding so
   the white prose right after reads as its body, not a disconnected block. */
.section--charcoal { background: var(--ink); color: var(--white); padding-block: var(--space-8); }
.section--charcoal h2 { color: var(--white); }
.section--charcoal .eyebrow { color: var(--grey-300); }

/* Prose measure: content wrap.section blocks (about/services copy, FAQ,
   contact panel + form) keep the full wrap width so their LEFT edge stays
   aligned with the hero heading above, and cap the readable line length on
   each direct child — a left-aligned column at the page gutter, not a centred
   66ch island floating mid-viewport. service-cards grid excluded via :has(). */
.wrap.section:not(:has(.svc-grid)):not(:has(.photo-grid)):not(:has(.about-intro)) > * { max-width: 66ch; }

/* About intro: lead paragraph + office photo. Source order is text then photo,
   so mobile stacks the photo directly after the lead paragraph; at ≥768px the
   two sit side by side (text left, photo right). */
.about-intro { display: grid; gap: var(--space-6); }
.about-intro__text { max-width: 62ch; }
.about-intro__text .lead { margin-bottom: 0; }
.about-intro__media { margin: 0; }
.about-intro__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-card);
}
@media (min-width: 768px) {
  .about-intro {
    grid-template-columns: 1fr minmax(15rem, 20rem);
    gap: var(--space-12);
    align-items: start;
  }
  /* cap the portrait so it doesn't tower over the short lead; keep the signage
     (upper third of the frame) in view when cropped */
  .about-intro__media img { max-height: 24rem; object-fit: cover; object-position: center 22%; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2); left: var(--space-2);
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-button);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* uppercase micro-label — the waybill field-label voice */
.eyebrow {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--signal-deep);
  margin-bottom: var(--space-2);
}

.lead { font-size: var(--text-md); color: var(--ink); max-width: 60ch; }

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--ink);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s var(--ease-brand), color .15s var(--ease-brand), border-color .15s var(--ease-brand);
}
.btn:hover { background: var(--ink); color: var(--white); }

.btn--primary {
  background: var(--signal-deep);
  border-color: var(--signal-deep);
  color: var(--white);
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-6);
  font-weight: 600;
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--signal-deep), black 15%);
  border-color: color-mix(in srgb, var(--signal-deep), black 15%);
  color: var(--white);
}

/* ============ Stripe band — the signature motif ============ */
.stripe-band {
  height: 10px;
  background: repeating-linear-gradient(-60deg, var(--signal) 0 14px, transparent 14px 26px);
}
.stripe-band--charcoal {
  background: repeating-linear-gradient(-60deg, var(--signal) 0 14px, transparent 14px 26px) var(--ink);
}

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* Logged-in: Concrete's fixed toolbar (#ccm-toolbar, 48px, z-index 1000)
   overlays the viewport top — offset the sticky header so the site nav sits
   BELOW the CMS bar instead of underneath it. Our z-indexes (max 100) stay
   under all core edit UI (toolbar 1000, panels/menus/dialogs 1500+). */
html.ccm-toolbar-visible .site-header { top: 48px; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 4.5rem;
  padding-block: var(--space-3);
}

.site-logo { flex-shrink: 0; }
.site-logo img { width: 232px; height: auto; }
/* Desktop: render nearer the PNG's native 524px so the strapline
   ("CLEARING - FORWARDING AGENTS - TRANSPORT") is actually legible.
   53px tall — still inside the header's 72px min-height, no bar growth. */
@media (min-width: 1024px) {
  .site-logo img { width: 320px; }
}

.site-header__phone {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}
.site-header__phone:hover { color: var(--signal-deep); }
.site-header__phone__ico { display: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.site-header__wa { display: inline-flex; line-height: 0; border-radius: 50%; }
.site-header__wa svg { display: block; }
.site-header__wa:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: no-preference) {
  .site-header__wa { transition: transform .15s var(--ease-brand); }
}

/* --- Primary nav (desktop) --- */
.site-nav { margin-left: auto; }

/* child combinator only — parent styles must not leak into .dropdown-menu */
.site-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-2) 0;
}
.site-nav a:hover { color: var(--signal-deep); }

/* stripe indicator: 3px signal rule beneath the active trail */
.site-nav a[aria-current="page"] {
  background: linear-gradient(var(--signal), var(--signal)) left bottom / 100% 3px no-repeat;
}

/* specificity trap: nav link rules outweigh .btn--primary — re-assert ink */
.site-nav a.btn--primary { color: var(--white); padding: var(--space-2) var(--space-4); }

.has-dropdown { position: relative; }

/* .dropdown-menu is ALSO a Bootstrap class used by Concrete's edit-mode block
   menus — every rule here MUST stay scoped under .site-nav or the CMS menus
   render with invisible items (bare selectors shipped that exact bug). */
.site-nav .dropdown-menu {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-4));
  min-width: 17rem;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--signal);
  box-shadow: 0 12px 24px -12px var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-1));
  transition: opacity .15s var(--ease-brand), transform .15s var(--ease-brand), visibility .15s;
}
.site-nav .has-dropdown:hover .dropdown-menu,
.site-nav .has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.site-nav .dropdown-menu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-base);
  font-weight: 400;
}
.site-nav .dropdown-menu a:hover { background: var(--surface); color: var(--signal-deep); }

/* --- Nav toggle (hamburger) --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  cursor: pointer;
}
.nav-toggle span:not(.visually-hidden) {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform .2s var(--ease-brand), opacity .2s var(--ease-brand);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile nav < 1024px --- */
@media (max-width: 1023.98px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 24px -16px var(--shadow);
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
  }
  .site-nav.is-open { display: block; }

  .site-nav > ul {
    display: block;
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  .site-nav a {
    display: block;
    padding: var(--space-3) 0;
  }
  .site-nav a[aria-current="page"] {
    background: linear-gradient(var(--signal), var(--signal)) left bottom / var(--space-8) 3px no-repeat;
  }

  /* dropdown always expanded in the drawer */
  .site-nav .dropdown-menu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    border-left: 3px solid var(--line);
    box-shadow: none;
    padding: 0 0 var(--space-2) var(--space-4);
    transition: none;
  }
  .site-nav .dropdown-menu a { padding: var(--space-2) 0; }
}

@media (max-width: 479.98px) {
  .site-header__inner { gap: var(--space-3); }
  .site-logo img { width: 168px; }
  .site-header__actions { gap: var(--space-3); }
  /* swap the long number for a compact call icon so it + WhatsApp always fit */
  .site-header__phone__num { display: none; }
  .site-header__phone__ico { display: block; }
}

/* ============ Hero ============ */
/* Task 15: content-driven height replaces the old min(85vh, 56rem) reservation
   that left a near-empty screen behind a few lines of copy. Generous but
   finite block padding gives the hero room to breathe while letting the next
   section peek into view without forcing a fixed viewport-relative height. */
.hero { padding-block: clamp(4rem, 12vh, 7.5rem); }

.hero--full {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-12);
  align-items: center;
}
.hero--full .hero__media img,
.hero--full > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}
/* Hero background video (Task 16): shares the still's box exactly (same
   wrapper, same sizing/clip) by sitting absolutely positioned on top of it;
   the still stays in normal flow so it keeps sizing the wrapper. Hidden
   (opacity 0) until theme JS starts playback — see the reduced-motion block
   below for the fade-in, and .hero__media needs position:relative
   unconditionally (not just under the @supports clip-path block) for that
   absolute positioning to resolve against it. */
.hero--full .hero__media { position: relative; }
.hero--full .hero__media .hero__bg--video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}
/* Hero media signature (Task 15): the one bold gesture of this pass — the
   generic rounded media box clips to a skewed parallelogram that echoes the
   client's logo mark, with an offset stripe-motif fragment (reusing the
   .stripe-band repeating-gradient technique) peeking out behind it. Guarded
   behind @supports so unsupported browsers keep the plain rounded image. */
@supports (clip-path: polygon(0 0)) {
  .hero--full .hero__media {
    padding: 0 var(--space-4) var(--space-4) 0;
  }
  .hero--full .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-60deg, var(--signal) 0 14px, transparent 14px 26px);
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  }
  .hero--full .hero__media img,
  .hero--full .hero__media .hero__bg--video {
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
    border-radius: 0;
  }
}
.hero__content > .eyebrow { margin-bottom: var(--space-3); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.hero--compact {
  position: relative;
  display: block;
  min-height: 0;
  background: var(--ink);
  color: var(--white);
  padding-block: var(--space-12);
}
.hero--compact h1 {
  color: var(--white);
  font-size: var(--text-xl);
  margin: 0;
}
.hero--compact .lead { color: var(--grey-300); margin-top: var(--space-3); }

/* Compact hero breadcrumb (Task 15) — grey-300 on ink is the same verified
   9.61:1 pair used for the eyebrow/stat labels (Task 3/4). */
.hero-breadcrumb { margin-bottom: var(--space-4); }
.hero-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}
.hero-breadcrumb li { display: flex; align-items: center; gap: var(--space-1); }
.hero-breadcrumb a {
  color: var(--grey-300);
  text-decoration: underline;
  text-decoration-color: var(--grey-300);
  text-underline-offset: 2px;
}
.hero-breadcrumb a:hover { color: var(--white); text-decoration-color: var(--white); }
.hero-breadcrumb [aria-current] { color: var(--grey-300); font-weight: 600; }
.hero-breadcrumb__sep { color: var(--grey-300); }

/* Compact hero bottom edge (Task 15): a thin stripe strip, same motif as the
   section_band dividers, pinned to the true bottom edge of the padded band. */
.hero--compact .stripe-band {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
}

@media (max-width: 767.98px) {
  .hero--full {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .hero--full .hero__media img,
  .hero--full > img { max-height: 40vh; }
  .hero--full .hero__media .hero__bg--video { max-height: 40vh; }
}

/* Background video base state (Task 16): hidden until JS marks it playing.
   Reduced motion: JS never loads/plays it, so .is-playing is never added and
   the still stays the only thing visible — see the reduced-motion:no-preference
   block below for the fade-in transition + target opacity. */
.hero__bg--video { opacity: 0; }

/* ============ Service cards ============ */
/* Task 15: the region reads as a distinct "services" surface — full-bleed
   grey via a padding-box-ignoring pseudo-element (the same break-out trick
   as .hero__media's stripe, just horizontal) — scoped with :has() so the
   plain prose wrap.section elsewhere on the page stay white. */
.section:has(.svc-grid) { position: relative; }
.section:has(.svc-grid)::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--surface);
  z-index: -1;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-card {
  position: relative;
  display: block;
  background: var(--paper);
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  padding-top: calc(var(--space-6) + var(--space-2));
  padding-bottom: calc(var(--space-6) + var(--space-6));
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform .18s var(--ease-brand);
}
/* stripe sweep: the hazard stripe slides in along the top edge on hover */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: repeating-linear-gradient(-60deg, var(--signal) 0 14px, transparent 14px 26px);
  transform: translateX(-101%);
  transition: transform .35s var(--ease-brand);
}
.svc-card:hover, .svc-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px var(--shadow);
}
.svc-card:hover::before, .svc-card:focus-visible::before { transform: none; }

.svc-card h3, .svc-card h2 {
  position: relative;
  display: inline-block;
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}
/* title underline sweep — transform-only (scaleX), never a width/background-size animation */
.svc-card h3::after, .svc-card h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--signal-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s var(--ease-brand);
}
.svc-card:hover h3::after, .svc-card:focus-visible h3::after,
.svc-card:hover h2::after, .svc-card:focus-visible h2::after { transform: scaleX(1); }

.svc-card p { color: var(--ink-muted); margin-bottom: 0; font-size: var(--text-base); }

.svc-card__arrow {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-4);
  font-weight: 800;
  color: var(--signal-deep);
  transition: transform .18s var(--ease-brand);
}
.svc-card:hover .svc-card__arrow, .svc-card:focus-visible .svc-card__arrow { transform: translateX(4px); }

/* ============ Photo grid ============ */
/* File-set-driven gallery (About page "Freight in motion"). 4-up on desktop,
   2-up on narrower viewports — a single column reads too thin for a photo
   gallery even on small phones. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: 0;
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}
@media (max-width: 767.98px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Stat band ============ */
.stat-band {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--space-12);
}
.stat-band .wrap,
.stat-band__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-12);
}
.stat { flex: 1 1 10rem; }
.stat__value {
  display: block;
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--grey-300);
}

/* ============ FAQ (details/summary) ============ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-weight: 600;
  font-size: var(--text-md);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-weight: 800;
  font-size: var(--text-md);
  color: var(--signal-deep);
  transition: transform .2s var(--ease-brand);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { padding: 0 0 var(--space-4); color: var(--ink-muted); }

/* ============ Business contact panel ============ */
.biz-contact {
  background: var(--surface);
  border-left: 4px solid var(--signal);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-6);
}
.biz-contact h2, .biz-contact h3 { font-size: var(--text-md); }
.biz-contact a { color: var(--ink); text-decoration-color: var(--signal); }
.biz-contact p:last-child { margin-bottom: 0; }

/* ============ Forms (Bootstrap-5-era express-form markup) ============ */
.form-control, .form-select {
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: var(--space-3);
  font: inherit;
  width: 100%;
  color: var(--ink);
  background: var(--paper);
}
.form-control:focus, .form-select:focus {
  outline: 2px solid var(--signal);
  outline-offset: 0;
  border-color: var(--ink-muted);
}
textarea.form-control { min-height: 8rem; resize: vertical; }

/* Native express-form wraps fields in a bordered <fieldset> with a "Details"
   legend — redundant chrome next to the page h1 and the contact panel. Strip
   the border; keep the legend for screen readers only. */
.ccm-block-express-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ccm-block-express-form legend {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mb-3 { margin-bottom: var(--space-4); }
.form-label { display: inline-block; font-weight: 600; margin-bottom: var(--space-1); }

.alert-success, .alert-danger {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-input);
  margin-bottom: var(--space-6);
  font-weight: 600;
}
.alert-success {
  background: var(--green-100);
  border-left: 4px solid var(--green-600);
  color: var(--green-800);
}
.alert-danger {
  background: var(--red-100);
  border-left: 4px solid var(--signal-deep);
  color: var(--red-800);
}

/* form re-render anchors under the sticky header — pull it back into view */
#main, .express-form { scroll-margin-top: 96px; }

/* ============ Cookie banner ============ */
#cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--white);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--space-4);
  z-index: 60;
}
/* non-negotiable: display:flex above defeats the hidden attribute */
#cookie-banner[hidden] { display: none; }

#cookie-banner p { margin: 0; font-size: var(--text-sm); max-width: 68ch; }
#cookie-banner a { color: var(--white); }
#cookie-ok {
  flex-shrink: 0;
  background: var(--white);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-button);
  padding: var(--space-2) var(--space-6);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
#cookie-ok:hover { background: var(--grey-300); }

/* ============ Footer ============ */
.site-footer {
  background: var(--ink);
  color: var(--grey-300);
  margin-top: var(--section-gap);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-8);
  padding-block: var(--space-16) var(--space-12);
}
@media (max-width: 1023.98px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    padding-block: var(--space-12) var(--space-8);
  }
}
.site-footer__links a[target="_blank"]::after {
  content: " ↗";
  color: var(--grey-300);
  text-decoration: none;
}

/* the logo is dark-on-transparent — set it on a white label card */
.site-footer__grid img {
  background: var(--white);
  padding: var(--space-3);
  border-radius: var(--radius-input);
  width: auto;
  max-width: 100%;
}

.site-footer a { color: var(--white); text-decoration: underline; }
.site-footer a:hover { text-decoration-color: var(--signal); }

.site-footer__h {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.site-footer__el {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--grey-300);
}

.site-footer__links {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.site-footer__links li { margin-bottom: var(--space-2); }

.site-footer__reg { font-size: var(--text-sm); color: var(--grey-300); }

.site-footer__social { margin-top: var(--space-4); display: flex; gap: var(--space-4); }
.site-footer__social a {
  display: inline-flex;
  color: var(--white);
  text-decoration: none;
}
.site-footer__social a:hover { color: var(--signal); }

.site-footer__legal {
  border-top: 1px solid var(--ink-muted);
  padding-block: var(--space-4);
}
.site-footer__legal p { margin: 0; font-size: var(--text-sm); }

/* ============ Motion ============ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: rise .5s var(--ease-brand) forwards;
  }
  .reveal:nth-child(2) { animation-delay: .1s; }
  .reveal:nth-child(3) { animation-delay: .2s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  /* Task 16: hero bg video fades in to full opacity (replacing the still,
     which is undimmed in this theme's card-style media box — unlike a
     full-bleed dimmed background) once actually playing. Reduced motion:
     JS never loads/plays it, so is-playing is never added. */
  .hero__bg--video { transition: opacity .6s ease; }
  .hero__bg--video.is-playing { opacity: 1; }
  /* Task 17b: photo grid tile lift on hover — transform-only transition. */
  .photo-grid img { transition: transform .18s var(--ease-brand); }
  .photo-grid img:hover, .photo-grid img:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px var(--shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}