/* =========================================================================
   Flex Logistics — Design System
   Adapted from the Tranzport reference (structure, rhythm, notches, grid
   hover, footer line animation, scroll text reveal) with Flex Logistics
   brand red (#911F12) replacing the reference's green, and Manrope
   (the reference's own typeface — see README for reasoning) throughout.
   No build step: plain CSS, custom properties, no preprocessor.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Brand ---- */
  --color-brand: #911F12;
  --color-brand-dark: #6B160D;
  --color-brand-bright: #FF4A32;   /* micro-flash accent only (text reveal) */
  --color-brand-muted: #C9938C;    /* soft accent on dark surfaces */
  --color-brand-tint: #F5E6E3;     /* faint wash, placeholder callouts */

  /* ---- Neutrals ---- */
  --color-ink: #14100F;            /* darkest "statement" surfaces */
  --color-charcoal: #1C1B1A;       /* headings on light surfaces */
  --color-slate: #4A4744;          /* body copy */
  --color-gray: #766F68;           /* muted / tertiary text */
  --color-warm-50: #FAF8F6;
  --color-warm-100: #F2EEEA;
  --color-warm-200: #E6E0D9;
  --color-white: #FFFFFF;

  /* ---- Type ---- */
  --font-base: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ---- Layout ---- */
  --container-w: 78rem;
  --pad-global: clamp(1.25rem, 4vw, 3.875rem);
  --pad-section: clamp(4rem, 8vw, 8.75rem);
  --pad-section-sm: clamp(3rem, 6vw, 5.5rem);
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 6.25rem;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --dur-fast: .3s;
  --dur-med: .6s;
}

/* ---------------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-base);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-slate);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6{ margin: 0; color: var(--color-charcoal); font-weight: 500; }
p{ margin: 0; }

/* Desktop max sizes trimmed from the original scale (h1 4.25rem->3.75rem,
   h2 3.5rem->3rem, h3 2.75rem->2.375rem) so headings read as confident but
   not oversized on wide viewports; mobile minimums are unchanged. */
h1{ font-size: clamp(2.5rem, 1.95rem + 2.4vw, 3.75rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
h2{ font-size: clamp(1.875rem, 1.5rem + 1.7vw, 3rem); font-weight: 600; line-height: 1.15; }
h3{ font-size: clamp(1.5rem, 1.32rem + .8vw, 2.375rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.18; }
h4{ font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.75rem); font-weight: 500; line-height: 1.25; }
h5{ font-size: clamp(1.25rem, 1.15rem + .35vw, 1.5rem); font-weight: 500; line-height: 1.3; }
h6{ font-size: 1rem; font-weight: 700; line-height: 1.35; }

/* Scroll-target sections sit under the fixed header — keep anchored jumps
   (service anchors, #track-shipment) from landing underneath the bar. */
[id]{ scroll-margin-top: clamp(5.5rem, 9vw, 7rem); }

.eyebrow{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-brand);
}
.eyebrow::before{
  content: ''; width: 1.25rem; height: 1px; background: currentColor; flex: none;
}
.eyebrow.is-on-dark{ color: var(--color-brand-muted); }

.text-lede{ font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--color-slate); line-height: 1.55; }

.is-on-dark{ color: var(--color-white); }
.is-on-dark h1, .is-on-dark h2, .is-on-dark h3, .is-on-dark h4{ color: var(--color-white); }
.is-on-dark .text-lede{ color: #C9C5C1; }

/* ---------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------- */
.container{ width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--pad-global); }
.section{ position: relative; padding-block: var(--pad-section); }
.section--sm{ position: relative; padding-block: var(--pad-section-sm); }
.section--ink{ background: var(--color-ink); }
.section--light{ background: var(--color-warm-50); }
.section--white{ background: var(--color-white); }

.grid{ display: grid; gap: 1.5rem; }
.grid > *{ min-width: 0; } /* grid items default to min-width:auto, which lets a wide descendant (e.g. a <select>) force the whole column past its track and overflow the viewport on narrow screens */
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.stack{ display: flex; flex-direction: column; }
.cluster{ display: flex; align-items: center; }

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

.dev-note{
  border: 1px dashed var(--color-brand);
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
  border-radius: .75rem;
  padding: .875rem 1.125rem;
  font-size: .875rem;
  line-height: 1.5;
}
.dev-note strong{ color: var(--color-brand); }

.form-alert{
  border: 1px solid var(--color-error, #B3261E);
  background: #FDEDEC;
  color: #8C2F27;
  border-radius: .75rem;
  padding: .875rem 1.125rem;
  font-size: .875rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.75rem;
  border-radius: var(--radius-pill);
  font-size: .9375rem; font-weight: 700;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
  overflow: hidden;
  isolation: isolate;
}
.btn:active{ transform: scale(.97); }

.btn-primary{ background: var(--color-brand); color: var(--color-white); border: var(--color-brand); }
.btn-primary::before{
  content: ''; position: absolute; inset: 0; z-index: -1; left: -100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.28) 70%, transparent 100%);
  transition: left var(--dur-med) var(--ease-standard);
}
.btn-primary::after{
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, var(--color-brand) 60%, var(--color-brand-dark) 100%);
  opacity: 0; transition: opacity var(--dur-med) ease;
}
.btn-primary:hover::before{ left: 100%; }
.btn-primary:hover::after{ opacity: 1; }

.btn-primary.is-white{ background: var(--color-white); color: var(--color-ink); }
.btn-primary.is-white::after{ background: linear-gradient(90deg, #fff 60%, var(--color-warm-200) 100%); }

.btn-secondary{
  color: var(--color-white);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(1rem);
}
.btn-secondary:hover{ border-color: var(--color-brand-muted); color: var(--color-brand-muted); }

.btn-secondary.is-on-light{
  color: var(--color-charcoal);
  background: rgba(20,16,15,.03);
  border-color: rgba(20,16,15,.14);
}
.btn-secondary.is-on-light:hover{ border-color: var(--color-brand); color: var(--color-brand); }

.btn-text{
  padding: 0 0 .1875rem; border-radius: 0;
  text-transform: uppercase; letter-spacing: .04em; font-size: .8125rem;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast);
}
.btn-text:hover{ color: var(--color-brand); }
.btn-text.is-no-caps{ text-transform: none; letter-spacing: 0; font-size: .9375rem; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.field{ display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.field label{ font-size: .8125rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--color-gray); }
.field input, .field select, .field textarea{
  width: 100%;
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-warm-200);
  border-radius: var(--radius-md);
  padding: .9rem 1.1rem;
  font-size: 1rem;
  color: var(--color-charcoal);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea{ min-height: 8rem; resize: vertical; border-radius: 1rem; }
/* Native selects draw their own chevron flush against the browser's default
   inset, ignoring the padding above — appearance:none plus a drawn chevron
   (same stroke-icon style used everywhere else on the site) gives it real,
   consistent clearance from the edge instead. */
.field select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23766F68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: .875rem;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px var(--color-brand-tint);
}
.field.is-pill input{ border-radius: var(--radius-pill); }
.field input.input-validation-error, .field select.input-validation-error, .field textarea.input-validation-error{
  border-color: var(--color-error, #B3261E);
}
.field-error{ font-size: .8125rem; color: var(--color-error, #B3261E); }
.field-error:empty{ display: none; }

/* ---------------------------------------------------------------------
   Notch / section-seam divider
   A reusable "pill bump" shape: a thin bar spanning the section width
   with a smooth raised tab in the center, filled with currentColor so
   it reads as an extension of whichever section it's attached to.
   Static by default; classified per-use below.
   --------------------------------------------------------------------- */
.notch{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: min(32.875rem, 88vw);
  --notch-h: calc(min(32.875rem, 88vw) * 29 / 527);
  aspect-ratio: 527 / 29;
  color: var(--color-warm-50);
  z-index: 3;
  pointer-events: none;
}
.notch svg{ width: 100%; height: 100%; display: block; fill: currentColor; }
.notch--top{ top: -1px; border-top: 1px solid transparent; }
.notch--top.is-flipped{ transform: translateX(-50%) rotate(180deg); }
.notch--bottom{ bottom: -1px; transform: translateX(-50%) rotate(180deg); }
.notch--bottom.is-flipped{ transform: translateX(-50%); }
.notch.on-ink{ color: var(--color-ink); }
.notch.on-white{ color: var(--color-white); }
.notch.on-light{ color: var(--color-warm-50); }

@media (max-width: 767px){
  .notch{ width: 13rem; --notch-h: calc(13rem * 29 / 527); }
}

/* ---------------------------------------------------------------------
   Hover grid effect
   A restrained architectural grid, hidden by default, revealed inside
   a soft cursor-follow spotlight on hover (desktop). On touch devices
   (no hover) it fades to a faint always-on state instead of chasing a
   cursor that doesn't exist.
   --------------------------------------------------------------------- */
.hover-grid{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hover-grid_field{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s ease;
  background-image:
    linear-gradient(rgba(145,31,18,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145,31,18,.55) 1px, transparent 1px);
  background-size: 2.75rem 2.75rem;
  -webkit-mask-image: radial-gradient(circle 16rem at var(--mx,50%) var(--my,50%), #000 0%, #000 35%, transparent 75%);
          mask-image: radial-gradient(circle 16rem at var(--mx,50%) var(--my,50%), #000 0%, #000 35%, transparent 75%);
}
.hover-grid:hover .hover-grid_field,
.hover-grid.is-touch .hover-grid_field{ opacity: 1; }
.hover-grid.is-touch .hover-grid_field{
  opacity: .5;
  -webkit-mask-image: none; mask-image: none;
  background-image:
    linear-gradient(rgba(145,31,18,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145,31,18,.18) 1px, transparent 1px);
}
.hover-grid_content{ position: relative; z-index: 2; }

/* dark-surface variant of the grid (lower-key lines against ink) */
.hover-grid--ink .hover-grid_field{
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
}
.hover-grid--ink.is-touch .hover-grid_field{
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
}

/* ---------------------------------------------------------------------
   Scroll text reveal (per-character, scroll-scrubbed, brand-flash)
   Applied to headings marked [data-reveal]. JS splits text into
   per-character spans with a --i custom property; opacity is written
   per-frame from scroll progress (see js/main.js). When a character
   crosses the reveal threshold a short brand-color "flash" animation
   fires once via the .is-lit class.
   --------------------------------------------------------------------- */
/* Words are wrapped in their own inline-block unit with real space
   text nodes between them (see js/main.js), so the line can only wrap
   between words — never mid-word between two of the per-character
   spans (an earlier version split every letter into its own span with
   no word grouping, which combined with an unrelated stray non-
   breaking-space bug on the actual spaces, made the browser wrap
   headings apart in the middle of words). */
[data-reveal] .rword{ display: inline-block; }
[data-reveal] .rchar{
  display: inline-block;
  opacity: .12;
  color: inherit;
  will-change: opacity;
}
[data-reveal] .rchar.is-lit{ animation: char-flash .6s var(--ease-standard) forwards; }
@keyframes char-flash{
  0%{ color: currentColor; }
  35%{ color: var(--color-brand-bright); }
  100%{ color: currentColor; }
}
@media (prefers-reduced-motion: reduce){
  [data-reveal] .rchar{ opacity: 1 !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   Generic fade-up reveal (paragraphs, cards, non-heading content)
   --------------------------------------------------------------------- */
[data-fade]{
  opacity: 0; transform: translateY(1.25rem);
  transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard);
}
[data-fade].is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-fade]{ opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------
   Header / navigation
   Fixed, always-visible header (no hide-on-scroll — client explicitly
   rejected a scroll-triggered swap; the header simply stays put). A
   full-width inline menu bar is shown from 992px up; below that it
   collapses to a single labeled "Menu" control that opens the full-width
   flyout panel.
   --------------------------------------------------------------------- */
.header{
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
}
.header::before{
  /* Sits on .header (full viewport width) rather than .header_bar (which is
     capped at --container-w) so the bar reaches both edges of the page
     instead of visibly cutting off beside the inner container. Fully
     opaque (not a fade-to-transparent scrim) so the header reads as a
     solid bar at every scroll position, with a soft shadow along the
     bottom edge for separation from whatever scrolls beneath it. */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--color-white);
  box-shadow: 0 .5rem 1.5rem rgba(20,16,15,.12);
  pointer-events: none;
}

.header_bar{
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .875rem var(--pad-global);
  max-width: var(--container-w); margin-inline: auto;
}

.brand{ display: inline-flex; align-items: center; gap: .625rem; flex: none; }
/* The logo asset itself is the "on dark" wordmark (white text, brand-red
   chevrons kept in color) so it reads directly against the header's dark
   scrim — no light chip/container needed behind it. */
.brand_logo{
  height: clamp(1.75rem, 1.45rem + 1.1vw, 2.5rem); width: auto; display: block;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.brand:hover .brand_logo{ transform: translateY(-1px); }

.primary-nav{ display: none; align-items: center; gap: clamp(1.125rem, 1.8vw, 1.75rem); flex: 1; justify-content: center; }
.primary-nav a{
  /* Default: light header bar (top of page, over the dark hero) → dark text. */
  color: var(--color-charcoal); font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
  padding: .5rem .125rem; position: relative; white-space: nowrap;
  transition: color var(--dur-fast);
}
.primary-nav a::after{
  content: ''; position: absolute; left: .125rem; right: .125rem; bottom: 0; height: 2px;
  background: var(--color-brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.primary-nav a:hover, .primary-nav a:focus-visible{ color: var(--color-brand); }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after{ transform: scaleX(1); }

.header_actions{ display: none; align-items: center; gap: .625rem; flex: none; }
.btn-sm{ padding: .625rem 1.25rem; font-size: .8125rem; }
.btn-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%;
  color: var(--color-charcoal); background: rgba(20,16,15,.04); border: 1px solid rgba(20,16,15,.18);
  backdrop-filter: blur(1rem);
  transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
}
.btn-icon:hover{ border-color: var(--color-brand); color: var(--color-brand); }
.btn-icon svg{ width: 1.125rem; height: 1.125rem; flex: none; }

.menu-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  position: relative; z-index: 1; flex: none;
}
/* Plain three-bar hamburger, morphing into an X when the panel is open —
   swapped in for the previous text-label + chevron control, which read
   as an odd, unfamiliar affordance for "open the menu" on mobile. No
   button chrome (background/border) — just the bars, in brand red. */
.menu-btn_icon{ position: relative; width: 1.125rem; height: .8125rem; flex: none; }
.menu-btn_bar{
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px;
  background: var(--color-brand);
  transition: top var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.menu-btn_bar:nth-child(1){ top: 0; }
.menu-btn_bar:nth-child(2){ top: 50%; transform: translateY(-50%); }
.menu-btn_bar:nth-child(3){ top: 100%; transform: translateY(-100%); }
.menu-btn.is-open .menu-btn_bar:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-btn.is-open .menu-btn_bar:nth-child(2){ opacity: 0; }
.menu-btn.is-open .menu-btn_bar:nth-child(3){ top: 50%; transform: translateY(-50%) rotate(-45deg); }

@media (min-width: 992px){
  .primary-nav{ display: flex; }
  .header_actions{ display: flex; }
  .menu-btn{ display: none; }
}

.nav-overlay{
  position: fixed; inset: 0; z-index: 998;
  background: rgba(20,16,15,.6);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) ease;
}
.nav-overlay.is-open{ opacity: 1; visibility: visible; }

.nav-panel{
  position: fixed; inset: 0 0 auto 0; z-index: 999;
  max-height: 100svh; overflow-y: auto;
  padding: 7.5rem var(--pad-global) 3rem;
  background-image: linear-gradient(rgba(20,16,15,.94), rgba(20,16,15,.98));
  backdrop-filter: blur(2.5rem);
  border-bottom: 1px solid rgba(255,255,255,.1);
  transform: translateY(-100%);
  transition: transform var(--dur-med) var(--ease-standard);
}
.nav-panel.is-open{ transform: translateY(0); }

.nav-panel_grid{
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem;
  max-width: var(--container-w); margin-inline: auto;
}
.nav-col_label{ color: var(--color-gray); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.25rem; display: block; }
.nav-col a{
  display: flex; align-items: center; gap: .5rem;
  padding: .625rem 0; color: var(--color-white); font-size: 1.0625rem; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color var(--dur-fast), padding-left var(--dur-fast), opacity var(--dur-fast);
}
.nav-col a:hover{ color: var(--color-brand-muted); padding-left: .375rem; }
.nav-col .btn{ width: 100%; margin-bottom: .875rem; }
.nav-col_socials{ display: flex; gap: .75rem; margin-top: 1.5rem; }
.nav-col_socials a{
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: inline-flex; align-items: center; justify-content: center;
  border-bottom: none; padding: 0;
}
.nav-col_socials svg{ width: 1rem; height: 1rem; }
.nav-legal{ display: flex; gap: 1.25rem; margin-top: 1.5rem; font-size: .8125rem; color: var(--color-gray); flex-wrap: wrap; }
.nav-legal a{ border-bottom: none; }
.nav-legal a:hover{ color: var(--color-brand-muted); }

@media (max-width: 991px) and (min-width: 768px){
  .nav-panel_grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px){
  .nav-panel_grid{ grid-template-columns: 1fr; gap: 2.25rem; }
  .nav-panel{ padding-top: 6.5rem; }
}

/* Scroll-lock while the mega-menu is open — mobile/tablet only (same 991px
   ceiling as .menu-btn's own display:none breakpoint above). On desktop,
   toggling overflow:hidden removes/restores the scrollbar and reflows the
   hero grid underneath, causing a visible layout jump; the hamburger button
   is hidden there anyway in favor of the inline .primary-nav, so this only
   ever needs to apply below that breakpoint. */
@media (max-width: 991px){
  body.nav-is-open{ overflow: hidden; }
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 86vh;
  display: flex; align-items: flex-start;
  background: var(--color-ink);
  overflow: hidden;
  /* Content is now top-anchored (flex-start) rather than pinned to the
     bottom of a tall hero, so it sits close under the fixed header —
     this padding is the header's own clearance, not decorative
     breathing room, so it needs to reliably clear the header's height
     (~4.2rem on desktop, less on mobile) at every breakpoint. */
  padding-top: clamp(4.5rem, 4rem + 2vw, 5.5rem);
}
.hero_media{ position: absolute; inset: 0; z-index: 0; }
.hero_media img{ width: 100%; height: 100%; object-fit: cover; }
.hero_media::after{
  content: ''; position: absolute; inset: 0;
  /* Dark at both ends: the top band gives the heading/tracking panel
     (now top-anchored) legible contrast, and the bottom band fades the
     photo to solid black again so the hero resolves cleanly into
     whatever section follows it, rather than cutting off mid-photo. */
  background: linear-gradient(180deg, rgba(20,16,15,1) 0%, rgba(20,16,15,.96) 5%, rgba(20,16,15,.65) 35%, rgba(20,16,15,.55) 60%, rgba(20,16,15,.92) 88%, rgba(20,16,15,1) 100%);
}
.hero_content{ position: relative; z-index: 2; width: 100%; }
.hero_actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.hero_lede{ max-width: 34rem; margin-top: 1.25rem; }

/* Simple inner-page intro banners (About/Services/Projects/etc.) are much
   shorter than the homepage hero — center the content instead of pinning
   it to the bottom (which, at a short height, read as content stranded at
   the very bottom edge with a large empty gap above it), and give it its
   own top/bottom breathing room since it doesn't sit inside .hero_grid. */
.hero--plain{ min-height: 42vh; align-items: center; }
.hero--plain .hero_content{ padding-block: clamp(2rem, 5vw, 3.5rem); }

/* ---------------------------------------------------------------------
   Homepage hero: two-column layout — heading/copy on the left, the
   shipment-tracking panel prominent on the right (feature parity with a
   DHL-style "track above the fold", in Flex Logistics' own idiom).
   --------------------------------------------------------------------- */
.hero_grid{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-top: clamp(1.25rem, 2.5vw, 2.25rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
/* The tracking column is a plain wrapper (panel + caption below it) so it
   can't take align-self itself — .hero_grid centers its two direct grid
   items by default, which left a tall gap under the shorter tracking
   column whenever the copy column ran taller. Pinning this wrapper to
   the top of its row removes that trailing whitespace. */
.hero_track-wrap{ align-self: start; }
.hero_highlights{ display: flex; flex-direction: column; gap: .625rem; margin-top: 1.75rem; }
.hero_highlights li{
  display: flex; align-items: center; gap: .625rem;
  color: #E8E5E2; font-size: .9375rem; font-weight: 500;
}
.hero_highlights svg{ width: 1.125rem; height: 1.125rem; color: var(--color-brand); flex: none; }

.track-panel--hero{
  position: relative;
  overflow: hidden;
  /* 80% opaque rather than solid, so a hint of the hero photo shows
     through the card instead of a flat opaque white block. */
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(.5rem);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 2rem 4rem -1.5rem rgba(20,16,15,.5);
}
/* Desktop only — the panel's real content (heading/copy/form) is short, so
   without a floor it reads as a small card lost next to the full-height
   hero photo. Taller + vertically centered fills that out instead of
   leaving it top-packed with dead space below. Left alone on mobile, where
   the columns stack and a forced height would just add empty scroll. */
@media (min-width: 992px){
  .track-panel--hero{ min-height: 40rem; display: flex; flex-direction: column; justify-content: start; }
}
.track-panel--hero .track-form{ margin-top: 1.5rem; }
.track-panel--hero .track-form input{ min-width: 0; }
/* Client Code + Type of Shipment sit side by side as their own full-width
   row; the CV/BL field and the Track button each get their own full-width
   row below — a clean top-to-bottom stack rather than cramming all three
   inputs plus the button onto one line. */
.track-form_row{ display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; width: 100%; }
/* Scoped under .track-panel--hero (3 class selectors) rather than just
   .track-form > .field (2) — .track-form .field's own flex:1 1 16rem rule
   further down this file has equal specificity to an unscoped 2-class
   selector, so it would win the cascade by source order alone otherwise. */
.track-panel--hero .track-form > .field{ flex: 1 1 100%; }
.track-panel--hero .track-form > .btn{ width: 100%; }
@media (max-width: 480px){
  .track-form_row{ grid-template-columns: 1fr; }
}
.track-panel_note{ margin-top: .875rem; font-size: .8125rem; color: var(--color-gray); }
.track-panel_note--error{ color: #8C2F27; font-weight: 600; }
.hero_track-caption{ margin-top: 1rem; font-size: .875rem; color: #ADA8A3; }

/* A plain rounded, elevated "popup" card — no notch, just a pronounced
   material-style shadow to lift it off the page. Used on the contact
   form, which previously carried a seam-edge notch like the hero panel. */
.track-panel--elevated{
  border-color: transparent;
  box-shadow: 0 1rem 1.5rem rgba(20,16,15,.14), 0 3rem 5rem -1rem rgba(20,16,15,.35);
}

@media (max-width: 991px){
  .hero_grid{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Industries served (homepage)
   --------------------------------------------------------------------- */
.industry-grid{
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 48rem){ .industry-grid{ grid-template-columns: repeat(5, 1fr); } }

.industry-tile{
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  min-height: 8.5rem; padding: 1.25rem 1.375rem;
  background: var(--color-white); border: 1px solid var(--color-warm-200); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.industry-tile::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--color-brand); border-radius: 0 0 var(--radius-md) var(--radius-md);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) ease;
}
.industry-tile:hover{ border-color: var(--color-brand); transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(20,16,15,.4); }
.industry-tile:hover::after{ transform: scaleX(1); }
.industry-tile_num{ font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--color-brand); }
.industry-tile_name{ font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--color-charcoal); }
.industry-tile_sub{ margin-top: auto; font-size: .875rem; line-height: 1.4; color: var(--color-gray); }

.industry-tile--feature{
  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between;
  min-height: 0; padding: 1.75rem 2rem; background: var(--color-ink); border-color: transparent;
}
.industry-tile--feature .industry-tile_num{ color: var(--color-brand-muted); }
.industry-tile--feature .industry-tile_name{ font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); color: var(--color-white); }
.industry-tile--feature::after{ display: none; }
.industry-tile--feature:hover{ border-color: transparent; box-shadow: 0 14px 28px -18px rgba(20,16,15,.6); }

.profile-copy_tagline{ font-style: normal; font-weight: 600; color: var(--color-charcoal); white-space: nowrap; }

.stat-callout{ display: flex; align-items: baseline; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }
.stat-callout_num{ font-size: clamp(2.75rem, 6vw, 4.25rem); font-weight: 800; color: var(--color-brand); line-height: 1; letter-spacing: -.02em; }
.stat-callout_label{ font-size: 1rem; color: var(--color-slate); max-width: 16rem; }

/* ---------------------------------------------------------------------
   Core-values editorial list (homepage) — an outlined running numeral
   plus a title/description pair per row, rather than an icon-card grid,
   so it reads as its own typographic moment instead of a generic
   features-grid template.
   --------------------------------------------------------------------- */
.value-list-head{ max-width: 34rem; }
.value-list-head .text-lede{ margin-top: 1rem; }
/* Keep the heading itself on one line at readable widths — its own
   max-width:none plus nowrap lets it overflow the (deliberately narrow,
   for the paragraph below it) 34rem wrapper without affecting layout;
   body{overflow-x:hidden} is the backstop if a very old/narrow viewport
   ever pushed it past the page edge. Left wrapping on for small screens. */
@media (min-width: 700px){
  .value-list-head h2{ max-width: none; white-space: nowrap; }
}
.value-list{ margin-top: 3rem; border-top: 1px solid var(--color-warm-200); }
.value-row{
  display: grid; grid-template-columns: 3.5rem 14rem 1fr;
  align-items: baseline; column-gap: 1.75rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--color-warm-200);
  transition: background-color var(--dur-fast);
}
.value-row:hover{ background: var(--color-warm-50); }
.value-row_num{
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
}
.value-row_title{ font-size: 1.0625rem; }
.value-row_desc{ color: var(--color-gray); max-width: 34rem; }

@media (max-width: 700px){
  .value-row{ grid-template-columns: 2.5rem 1fr; row-gap: .375rem; }
  .value-row_desc{ grid-column: 2; }
}

/* ---------------------------------------------------------------------
   Service / solution cards
   --------------------------------------------------------------------- */
.solution-row{
  display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem;
  /* Big bottom breathing room per row, matching the Flex Enterprise
     capability scroller's `.cap-item { padding-block: clamp(5rem,
     42vh, 20rem) }` rhythm — gives the sticky image time to sit with
     each service as the row list scrolls past it. Pushed even taller
     than that reference figure: at the original sizing, adjacent rows
     crossed the scroll-spy's center band close enough together that
     pacing still felt rushed. */
  padding-top: 2.25rem;
  padding-bottom: clamp(7rem, 58vh, 26rem);
  border-top: 1px solid var(--color-warm-200);
}
.solution-row:last-child{ border-bottom: 1px solid var(--color-warm-200); }
.solution-row_index{ font-size: 1.125rem; font-weight: 700; color: var(--color-brand); }
.solution-row_body p{ margin-top: .625rem; max-width: 38rem; }
.solution-row_body a{ margin-top: 1rem; }
/* Per-row image, hidden on desktop (the shared sticky panel beside the
   list covers this there) — shown only once the layout below drops the
   sticky-scroll column, so each row gets its own image instead of one
   big shared image dominating the screen with barely any of the text
   list visible around it. */
.solution-row_media{ display: none; }

.solutions-layout{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.solution-sticky{ position: sticky; top: 7rem; aspect-ratio: 4/5; }
.solution-sticky_frame{
  position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-warm-100);
}
.solution-sticky_image{
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-standard);
}
.solution-sticky_image.is-active{ opacity: 1; }
.solution-sticky_image img{ width: 100%; height: 100%; object-fit: cover; }
/* Slides continuously with scroll progress through the row list beside
   it (see initStickyNotch in main.js) — same brand-carved-bite motif
   used on the Flex Enterprise sibling site, positioned on the seam-
   facing left edge of the sticky panel rather than the outer edge. */
.solution-sticky_notch{
  position: absolute; top: 0; left: -1px; z-index: 3;
  height: 12rem; width: auto;
  pointer-events: none;
}
.solution-sticky_notch.on-light{ color: var(--color-warm-50); }
.solution-sticky_notch.on-white{ color: var(--color-white); }
@media (max-width: 991px){
  .solutions-layout{ grid-template-columns: 1fr; }
  /* Below the two-column breakpoint, drop the sticky-scroll swap
     entirely rather than just un-sticking it — a single big shared
     image sitting either pinned or static above/below a long row list
     read as "all I can see is a big image" while scrolling on mobile.
     Each row gets its own plain image instead (image, then its title/
     description beneath it), matching the simple image-then-text card
     pattern already used for Projects. */
  .solution-sticky{ display: none; }
  .solution-row{ grid-template-columns: 1fr; padding-bottom: 2.25rem; }
  .solution-row_media{
    display: block; grid-column: 1 / -1;
    border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/10;
  }
  .solution-row_media img{ width: 100%; height: 100%; object-fit: cover; }
}

.card{
  background: var(--color-white);
  border: 1px solid var(--color-warm-200);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.card--glow{ --gx: 50%; --gy: 50%; }
.card--glow::before{
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(16rem circle at var(--gx) var(--gy), rgba(145,31,18,.16), transparent 60%);
  transition: opacity var(--dur-fast) ease;
}
.card--glow:hover::before{ opacity: 1; }
.card--glow > *{ position: relative; z-index: 1; }
.card--glow.on-ink{ background: #201B18; border-color: rgba(255,255,255,.1); }
.card--glow.on-ink h4, .card--glow.on-ink p{ color: var(--color-white); }
.card--glow.on-ink p{ color: #C9C5C1; }
.card--glow.on-ink::before{ background: radial-gradient(16rem circle at var(--gx) var(--gy), rgba(201,147,140,.22), transparent 60%); }

.card_icon{ width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; color: var(--color-brand); }

/* ---------------------------------------------------------------------
   CTA banner
   --------------------------------------------------------------------- */
.cta-banner{ text-align: center; }
.cta-banner_actions{ display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.cta-banner .text-lede{ max-width: 34rem; margin-inline: auto; margin-top: 1rem; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer{
  position: relative;
  background: var(--color-ink);
  color: var(--color-white);
  padding-top: clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}
.footer_lines{ position: absolute; inset: 0; z-index: 0; opacity: .9; pointer-events: none; }
/* Two stacked SVGs rather than two <g> groups in one SVG — document
   order alone should put the truck group above the static-line group,
   but layering them as separate positioned siblings guarantees it via
   real CSS stacking instead of relying on SVG paint-order semantics
   interacting correctly with each truck's offset-path/filter. */
.footer_lines svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.footer_lines svg.footer_trucks-layer{ z-index: 1; }
/* Route grid, read top-down: static dashed lanes plus a small truck-
   silhouette icon traveling each one. Movement is driven by a native
   SVG <animateMotion> child on each truck <g> (see markup) rather than
   the CSS `offset-path`/`offset-distance` version tried earlier — that
   version computed correctly (right position, right anchor, right
   fill) in every inspector check, but rendered as fully invisible on
   several pages for reasons that didn't reproduce consistently, which
   pointed at a compositing/rasterization quirk rather than anything
   wrong with the values themselves. SMIL motion animation is a much
   older, more uniformly implemented part of the SVG spec and sidesteps
   that whole class of problem. Previously (before that) the "vehicle"
   was a stroke-dasharray segment animated with stroke-dashoffset — the
   dashoffset keyframe target (-700) wasn't an exact multiple of the
   dasharray repeat length (660), so the pattern didn't line back up
   with itself at the end of every loop and visibly stuttered. */
.line-static{ stroke: #ffffff; stroke-opacity: .14; stroke-width: 1.5; fill: none; }
.footer-truck path, .footer-truck rect, .footer-truck circle{ fill: currentColor; }
.footer-truck--a{ color: var(--color-brand); filter: drop-shadow(0 0 4px rgba(145,31,18,.75)); }
.footer-truck--b{ color: var(--color-brand); filter: drop-shadow(0 0 4px rgba(145,31,18,.75)); }
.footer-truck--c{ color: var(--color-brand); filter: drop-shadow(0 0 4px rgba(145,31,18,.75)); }
.footer-truck--d{ color: var(--color-brand); filter: drop-shadow(0 0 4px rgba(145,31,18,.75)); }
@media (prefers-reduced-motion: reduce){ .footer-truck{ opacity: 0; } }

.footer_inner{ position: relative; z-index: 1; }
.footer_top{
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer_brand-logo{ height: clamp(1.875rem, 1.6rem + 1vw, 2.375rem); width: auto; display: block; }
.footer_tagline{ margin-top: 1rem; color: #ADA8A3; font-size: .9375rem; max-width: 20rem; }
.footer_contact{ margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.footer_contact a{ color: var(--color-white); font-size: .9375rem; transition: color var(--dur-fast); }
.footer_contact a:hover{ color: var(--color-brand-muted); }

.footer_col-label{ color: #ADA8A3; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.25rem; display: block; }
.footer_col a{ display: block; padding: .5rem 0; color: #E8E5E2; font-size: .9375rem; transition: color var(--dur-fast); }
.footer_col a:hover{ color: var(--color-brand-muted); }

.footer_bottom{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding-block: 2rem;
  font-size: .8125rem; color: #8B857F;
}
.footer_bottom a{ color: #8B857F; }
.footer_bottom a:hover{ color: var(--color-brand-muted); }
.footer_socials{ display: flex; gap: .75rem; }
.footer_socials a{
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  display: inline-flex; align-items: center; justify-content: center;
}
.footer_socials svg{ width: 1rem; height: 1rem; }

@media (max-width: 991px){
  .footer_top{ grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
}
@media (max-width: 767px){
  .footer_top{ grid-template-columns: 1fr; }
  /* The route-line/truck animation is a decorative desktop flourish —
     dropped on mobile rather than shrunk, since the lines and trucks
     read as illegible clutter behind the stacked footer columns at
     narrow widths. */
  .footer_lines{ display: none; }
}

/* ---------------------------------------------------------------------
   Accordion (FAQ)
   --------------------------------------------------------------------- */
.accordion-item{ border-top: 1px solid var(--color-warm-200); }
.accordion-item:last-child{ border-bottom: 1px solid var(--color-warm-200); }
.accordion-trigger{
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.5rem 0; text-align: left; font-size: 1.125rem; font-weight: 600; color: var(--color-charcoal);
}
.accordion-trigger_icon{ position: relative; width: 1.25rem; height: 1.25rem; flex: none; }
.accordion-trigger_icon::before, .accordion-trigger_icon::after{
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--color-brand);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.accordion-trigger_icon::before{ width: 100%; height: 2px; transform: translate(-50%,-50%); }
.accordion-trigger_icon::after{ width: 2px; height: 100%; transform: translate(-50%,-50%); }
.accordion-item.is-open .accordion-trigger_icon::after{ transform: translate(-50%,-50%) scaleY(0); }
.accordion-panel{
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-standard);
}
.accordion-item.is-open .accordion-panel{ grid-template-rows: 1fr; }
.accordion-panel_inner{ overflow: hidden; }
.accordion-panel p{ padding-bottom: 1.5rem; max-width: 42rem; color: var(--color-gray); }

/* ---------------------------------------------------------------------
   Filter pills + search (Insights page)
   --------------------------------------------------------------------- */
.filter-bar{ display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.filter-pills{ display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-pill{
  padding: .625rem 1.25rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-warm-200); font-size: .875rem; font-weight: 700;
  color: var(--color-slate); transition: all var(--dur-fast);
}
.filter-pill.is-active, .filter-pill:hover{ background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); }
.filter-search{ position: relative; }
.filter-search input{
  padding: .75rem 1.25rem .75rem 2.75rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-warm-200); font-size: .9375rem; min-width: 16rem;
}
.filter-search svg{ position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: var(--color-gray); }

.news-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.news-card{ display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); border: 1px solid var(--color-warm-200); }
.news-card_media{ position: relative; aspect-ratio: 4/3; overflow: hidden; }
.news-card_media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-standard); }
.news-card:hover .news-card_media img{ transform: scale(1.05); }
.news-card_tag{
  position: absolute; top: 1rem; left: 1rem; padding: .375rem .875rem; border-radius: var(--radius-pill);
  background: rgba(20,16,15,.75); color: var(--color-white); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  backdrop-filter: blur(.5rem);
}
.news-card_body{ padding: 1.5rem; }
.news-card_body h4{ margin-bottom: .5rem; }
.news-card_date{ color: var(--color-gray); font-size: .875rem; margin-top: .75rem; display: block; }
.news-card.is-wide{ grid-column: span 2; }
@media (max-width: 767px){
  .news-grid{ grid-template-columns: 1fr; }
  .news-card.is-wide{ grid-column: span 1; }
}

/* ---------------------------------------------------------------------
   About page blocks
   --------------------------------------------------------------------- */
.split-block{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split-block_media{ border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.split-block_media img{ width: 100%; height: 100%; object-fit: cover; }
/* Left/right alternation is authored via source order (media first vs.
   text first) — no CSS `order` override, since `order` takes priority
   over DOM order and was silently cancelling the alternation out. */
.value-item{ padding: 1.25rem 0; border-top: 1px solid var(--color-warm-200); }
.value-item:last-child{ border-bottom: 1px solid var(--color-warm-200); }
.value-item strong{ color: var(--color-brand); }

.logo-panel{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.logo-panel_item{
  display: flex; align-items: center; justify-content: center; padding: 1.75rem 1rem;
  border-radius: var(--radius-md); border: 1px solid var(--color-warm-200);
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-align: center;
  color: var(--color-gray);
}

@media (max-width: 767px){
  .split-block{ grid-template-columns: 1fr; }
  .split-block_media{ order: -1; }
  .logo-panel{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   Service Areas — agent/partner network by region. Illustrated with a
   custom-traced world map (accurate equirectangular geography, not
   hand-drawn) rather than the flat PDF screenshot, shown as a soft
   background element masked with a radial gradient so it "emerges" from
   the dark section instead of sitting in a hard-edged box, with brand-
   red pins marking the six regions named in the company profile. A
   plain region list underneath repeats the same six labels as an
   accessible text equivalent to the image.
   --------------------------------------------------------------------- */
.region-section{ position: relative; overflow: hidden; min-height: 34rem; display: flex; align-items: center; }
.region-section_map{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; aspect-ratio: 1400 / 640;
  opacity: .22;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 48%, #000 45%, transparent 92%);
          mask-image: radial-gradient(ellipse 62% 78% at 50% 48%, #000 45%, transparent 92%);
  pointer-events: none;
}
.region-section_map img{ width: 100%; height: 100%; display: block; }
.region-pin{
  position: absolute; width: 1.125rem; height: 1.125rem; margin: -1.125rem 0 0 -.5625rem;
  background: var(--color-brand-bright); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 .3rem .85rem rgba(255,74,50,.55), 0 .125rem .25rem rgba(0,0,0,.4);
}
.region-pin::after{
  content: ''; position: absolute; top: 50%; left: 50%; width: .4375rem; height: .4375rem;
  background: #fff; border-radius: 50%; transform: translate(-50%,-50%) rotate(45deg);
}
.region-section .container{ position: relative; z-index: 2; }

/* A plain labeled legend, not a row of buttons — each label carries a
   small dot in the same red as the map pins, so the connection between
   "this word" and "that pin" is obvious without needing to hover or
   inspect the map itself. */
.region-list{
  display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: .75rem;
  margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  list-style: none;
}
.region-list li{
  position: relative; padding-left: 1.125rem;
  color: #E8E5E2; font-size: .9375rem; font-weight: 600;
}
.region-list li::before{
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-brand);
}

/* ---------------------------------------------------------------------
   Shipping process flow (How It Works) — a route line with icon nodes,
   echoing the brand's dashed-route motif (footer animation, notches)
   instead of a plain numbered list.
   --------------------------------------------------------------------- */
.flow-diagram{ position: relative; margin-top: 4rem; }
/* Decorative serpentine route behind the grid — a winding path rather
   than a flat line, echoing the brand's route/notch motifs, so the
   sequence reads as a journey rather than a plain linear list. */
.flow-diagram_route{
  display: none;
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
.flow-diagram_route path{ stroke: var(--color-warm-200); stroke-width: 3; stroke-dasharray: 2 14; stroke-linecap: round; }

.flow-diagram_list{ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; }
.flow-step{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.flow-step_icon{
  position: relative; z-index: 1;
  width: 4.5rem; height: 4.5rem; border-radius: 50%; flex: none;
  background: var(--color-white); border: 2px solid var(--color-brand);
  color: var(--color-brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--color-white);
}
.flow-step_icon svg{ width: 2rem; height: 2rem; }
.flow-step_num{
  position: absolute; top: -.375rem; right: -.375rem;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--color-brand); color: var(--color-white);
  font-size: .6875rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.flow-step h6{ margin-bottom: .25rem; }
.flow-step p{ font-size: .8125rem; color: var(--color-gray); line-height: 1.45; }

/* Desktop: a serpentine (boustrophedon) layout — 1-2-3 left to right on
   the top row, then 4-5-6 continuing right to left on the row below —
   so the sequence visibly winds instead of running in one flat line. */
@media (min-width: 992px){
  .flow-diagram_route{ display: block; }
  .flow-diagram_list{ grid-template-rows: repeat(2, 1fr); row-gap: 4.5rem; }
  .flow-step:nth-child(1){ grid-column: 1; grid-row: 1; }
  .flow-step:nth-child(2){ grid-column: 2; grid-row: 1; }
  .flow-step:nth-child(3){ grid-column: 3; grid-row: 1; }
  .flow-step:nth-child(4){ grid-column: 3; grid-row: 2; }
  .flow-step:nth-child(5){ grid-column: 2; grid-row: 2; }
  .flow-step:nth-child(6){ grid-column: 1; grid-row: 2; }
}
@media (max-width: 559px){
  .flow-diagram_list{ grid-template-columns: 1fr; }
  .flow-step{ flex-direction: row; text-align: left; align-items: flex-start; }
  .flow-step_icon{ width: 3.5rem; height: 3.5rem; }
  .flow-step_icon svg{ width: 1.625rem; height: 1.625rem; }
}

/* ---------------------------------------------------------------------
   Team — alternating profile rows (About page)
   --------------------------------------------------------------------- */
.team-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  overflow: hidden; position: relative;
}
.team-row + .team-row{ margin-top: 1.5rem; }
/* Left/right alternation is authored directly in the markup (each row's
   media/info divs are simply written in the desired left-to-right source
   order) — no CSS `order` override here, since `order` takes priority over
   source order and was silently cancelling the alternation out. */
.team-row_media{ aspect-ratio: 1/1; max-width: 22rem; margin-inline: auto; width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: rgba(20,16,15,.08); }
.team-row_media img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter .5s var(--ease-standard);
}
.team-row:hover .team-row_media img{ filter: grayscale(0); }
@media (prefers-reduced-motion: reduce){
  .team-row_media img{ transition: none; }
}
.team-row_avatar{
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: clamp(2.5rem, 3vw, 3.5rem);
}
.team-row_name{ margin-top: .25rem; }
.team-row_role{ font-weight: 700; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; margin-top: .375rem; display: inline-block; }
.team-row_bio{ margin-top: 1rem; max-width: 30rem; }

.team-row--brand{ background: var(--color-brand); }
.team-row--brand .team-row_name, .team-row--brand h3{ color: var(--color-white); }
.team-row--brand .team-row_role{ color: var(--color-white); opacity: .85; }
.team-row--brand .team-row_bio{ color: var(--color-brand-tint); }
.team-row--brand .team-row_avatar{ background: rgba(255,255,255,.16); color: var(--color-white); }

.team-row--gray{ background: var(--color-warm-100); }
.team-row--gray .team-row_role{ color: var(--color-brand); }
.team-row--gray .team-row_avatar{ background: var(--color-warm-200); color: var(--color-charcoal); }

.team-row--cream{ background: var(--color-warm-50); border: 1px solid var(--color-warm-200); }
.team-row--cream .team-row_role{ color: var(--color-brand); }
.team-row--cream .team-row_avatar{ background: var(--color-brand-tint); color: var(--color-brand); }

.team-row--ink{ background: var(--color-ink); }
.team-row--ink .team-row_name, .team-row--ink h3{ color: var(--color-white); }
.team-row--ink .team-row_role{ color: var(--color-brand-muted); }
.team-row--ink .team-row_bio{ color: #C9C5C1; }
.team-row--ink .team-row_avatar{ background: rgba(201,147,140,.18); color: var(--color-brand-muted); }

@media (max-width: 767px){
  .team-row, .team-row.is-reverse{ grid-template-columns: 1fr; }
  /* Photo always leads on mobile, regardless of desktop left/right order,
     for a consistent scan pattern down a single column. */
  .team-row_media{ order: -1; max-width: 14rem; }
}


.team-avatar{
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--color-brand-tint); color: var(--color-brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.125rem; margin-bottom: 1.25rem;
}
.card--glow.on-ink .team-avatar{ background: rgba(201,147,140,.16); color: var(--color-brand-muted); }

/* ---------------------------------------------------------------------
   Tracking demo page
   --------------------------------------------------------------------- */
.track-panel{
  position: relative;
  background: var(--color-white); border: 1px solid var(--color-warm-200);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(20,16,15,.25);
}
.track-form{ display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-start; }
/* The tracking number field reuses the same bordered/padded .field
   input treatment as the contact form (see "Forms" above) rather than
   a bare, unstyled native input — it was inheriting no visual styling
   at all beyond the browser default. */
.track-form .field{ flex: 1 1 16rem; }
.timeline{
  margin-top: 2.5rem; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(.75rem);
  transition: opacity .45s var(--ease-standard), transform .45s var(--ease-standard);
}
/* The [hidden] attribute alone doesn't work here — author CSS (display: flex,
   above) beats the browser's default [hidden]{display:none} rule regardless of
   selector specificity, since author styles always win over user-agent styles. */
.timeline[hidden]{ display: none; }
.timeline.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .timeline{ transition: none; }
}
.timeline-step{ display: grid; grid-template-columns: 2rem 1fr; gap: 1.25rem; }
.timeline-step_rail{ display: flex; flex-direction: column; align-items: center; }
.timeline-step_dot{ width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-warm-200); border: 2px solid var(--color-white); box-shadow: 0 0 0 2px var(--color-warm-200); }
.timeline-step_line{ flex: 1; width: 2px; background: var(--color-warm-200); }
.timeline-step.is-done .timeline-step_dot{ background: var(--color-brand); box-shadow: 0 0 0 2px var(--color-brand); }
.timeline-step.is-done .timeline-step_line{ background: var(--color-brand); }
.timeline-step.is-current .timeline-step_dot{ background: var(--color-brand-bright); box-shadow: 0 0 0 4px var(--color-brand-tint); }
.timeline-step_body{ padding-bottom: 2rem; }
.timeline-step_body h6{ margin-bottom: .25rem; }
.timeline-step_body span{ color: var(--color-gray); font-size: .875rem; }

/* Billing Status — a tag below the timeline, not a stage within it (see
   Pages/Index.cshtml's comment on why). Shared with the admin Tracking
   Status page (wwwroot/css/admin.css imports this file) so both use the
   exact same .badge-billing classes/colors. */
.track-billing-tag{ display: flex; align-items: center; gap: .625rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-warm-200); }
/* Same fix as .timeline[hidden] above — display:flex in author CSS beats the
   browser's default [hidden]{display:none} rule regardless of specificity,
   so without this the tag stays visible before any search ever runs. */
.track-billing-tag[hidden]{ display: none; }
.track-billing-tag_label{ font-size: .8125rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--color-gray); }
/* Deliberately a different shape from .badge-status (admin.css) — a compact
   tag (small radius, not a full pill) with a leading price-tag icon instead
   of a plain dot, so billing reads as its own kind of indicator (a financial
   status) rather than "just another workflow-stage pill," even sitting right
   next to one in the same table row. */
.badge-billing{ display: inline-flex; align-items: center; gap: .375rem; padding: .3rem .65rem .3rem .5rem; border-radius: .375rem; font-size: .78125rem; font-weight: 700; white-space: nowrap; }
.badge-billing svg{ width: .8125rem; height: .8125rem; flex: none; }
.badge-billing--billed{ background: #E4F3EA; color: #227A4E; }
/* Was amber — freed up for .badge-status--dispatch (admin.css); a true red
   reads unambiguously as "needs action" against Billed's green. */
.badge-billing--unbilled{ background: #FDEDEC; color: #B3261E; }
/* A distinct, more muted/brownish orange from .badge-status--loading's vivid
   orange (admin.css), so the two "orange" badges never read as the same
   color when both appear in a row. Only shown for a legacy row that hasn't
   been re-uploaded since Billing Status was simplified to Billed/Unbilled —
   see PmftcReferenceValues.BillingStatuses. */
.badge-billing--fordispatch{ background: #FEF3C7; color: #92400E; }
.badge-billing--other{ background: #EAECEF; color: #4A4744; }

/* ---------------------------------------------------------------------
   Responsive: layout-level adjustments
   --------------------------------------------------------------------- */
@media (max-width: 991px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .menu-btn{ width: 2.5rem; height: 2.5rem; }
}

/* ---------------------------------------------------------------------
   Sign in
   --------------------------------------------------------------------- */
.signin-hero{ min-height: 100vh; align-items: center; }
.signin-wrap{ display: flex; justify-content: center; }
.signin-card{ width: 100%; max-width: 26rem; }
.signin-form{ display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.signin-row{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.signin-remember{ display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--color-slate); }
.signin-remember input{ width: 1rem; height: 1rem; accent-color: var(--color-brand); }
.signin-footnote{ margin-top: 1.5rem; text-align: center; font-size: .9375rem; color: var(--color-gray); }

/* ---------------------------------------------------------------------
   404
   --------------------------------------------------------------------- */
.error-page{ min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--color-ink); }
.error-page_code{ font-size: clamp(5rem, 20vw, 11rem); font-weight: 800; color: var(--color-brand); letter-spacing: -.03em; line-height: 1; }