/* =====================================================================
   Nextdoor Logistics — design system
   Heavily inspired by maersk.com: light-weight headings, deep near-black
   text on white, one calm green accent, image-led cards, thin inline icons,
   square-ish controls and a lot of white space. No gradients.
   ===================================================================== */

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

:root {
  /* Maersk palette.
     Deep Blue is the "black": text, dark blocks. Maersk Blue is the accent and
     the primary button fill (always with deep-blue text on it, as they do). */
  /* Palette taken from bragusa.org: a deep forest green as the dark, a muted
     sage as the accent, over warm off-white rather than pure white. This
     replaced the Maersk blues; the Maersk influence now lives in the layout,
     the light headings and the control shapes, not the colour. */
  --ink: #062d28;            /* BRAG deep green: text, dark bands, primary fill */
  --paper: #ffffff;
  --tint: #eef2ef;           /* pale green wash: sections, footer */
  --tint-2: #d3ded6;         /* pale green border */
  --tile: #b9cbbf;           /* saturated light green behind illustrations */
  --grey: #dbd9d3;           /* warm neutral ground (BRAG stone) */

  --brand: #698071;          /* BRAG sage: accents, active states, icons */
  --brand-strong: #40584b;   /* deeper sage for link text (7.7:1 on white) */

  /* The one warm note in the system, and the only colour allowed to shout.
     Reserved for the primary call to action. Sage was tried here first and read
     flat and washed out against the deep green; this picks up the warm side of
     BRAG's palette (their stone and olive) and pushes it to full saturation.
     Deep green on it measures 7.9:1, so it stays legible while it grabs. */
  --accent: #e8b13a;
  --accent-hover: #f2c04f;
  --brand-deep: #062d28;     /* deep green */

  /* neutrals derived from ink over paper */
  --ink-90: rgba(6, 45, 40, 0.90);
  --ink-70: rgba(6, 45, 40, 0.68);
  --ink-55: rgba(6, 45, 40, 0.55);
  --ink-40: rgba(6, 45, 40, 0.38);
  --ink-15: rgba(6, 45, 40, 0.15);
  --ink-10: rgba(6, 45, 40, 0.10);
  --ink-06: rgba(6, 45, 40, 0.06);
  --ink-03: rgba(6, 45, 40, 0.035);

  --paper-70: rgba(255, 255, 255, 0.72);
  --paper-55: rgba(255, 255, 255, 0.58);
  --paper-15: rgba(255, 255, 255, 0.16);
  --paper-10: rgba(255, 255, 255, 0.10);

  --line: #dde4df;
  /* Measured off maersk.com: their controls sit at a 5px radius, not the
     near-square 2px this file previously assumed. 4px keeps the squared-off
     character while matching their softness. */
  --radius: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  /* Buttons are rounder than the other controls, matching the Maersk button
     the client supplied: a soft rounded rectangle, not a square or a pill. */
  --radius-btn: 8px;

  --shadow-sm: 0 1px 2px rgba(6, 45, 40, 0.06);
  --shadow-md: 0 8px 24px -12px rgba(6, 45, 40, 0.18);
  --shadow-lg: 0 18px 48px -18px rgba(6, 45, 40, 0.22);

  --container: 1200px;
  --gutter: 32px;      /* page side padding; full-bleed rows negate this */
  --header-h: 116px;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------------------------------------------- reset-ish */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Smooth scrolling for in-page jumps and any scripted scrollTo.
     Turned off automatically under prefers-reduced-motion (see the bottom of
     this file). */
  scroll-behavior: smooth;
  /* The header is sticky, so an anchor landing at y=0 would sit underneath it.
     Reserve the announcement bar plus the masthead, with a little breathing
     room, so jumped-to content starts clear of the chrome. */
  scroll-padding-top: calc(var(--announce-h, 0px) + 92px);
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.012em; line-height: 1.18; }
p { margin: 0; }

::selection { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------- layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 76px; }
.section--tight { padding-block: 52px; }
.section--tint { background: var(--tint); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.lead { font-size: 17px; color: var(--ink-70); line-height: 1.65; max-width: 62ch; }
.muted { color: var(--ink-55); }

/* Maersk type scale: large, light, generous. Never bold. */
.display {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.14;
}
.h-xl { font-size: clamp(26px, 3vw, 40px); font-weight: 400; letter-spacing: -0.014em; line-height: 1.2; }
.h-lg { font-size: clamp(19px, 2vw, 24px); font-weight: 400; line-height: 1.3; }

/* ----------------------------------------------------------- buttons
   Maersk's hierarchy, mapped to where each one belongs:
     .btn            deep-blue fill, white text  -> the main action on a light
                     surface (Track, Get a quote, Log package, Send message)
     .btn--accent    Maersk Blue fill, deep-blue text -> high-visibility CTA in
                     the header, and the Delivered status
     .btn--outline   hairline border, ink text   -> secondary on light
     .btn--light     white fill, ink text        -> primary on dark imagery
     .btn--onDark-outline  white hairline        -> secondary on dark
   Disabled is a flat grey, as Maersk shows Track before you type.
   No gradients, no lift, no shadow. */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: transparent;
  --btn-bg-h: #0d453d;      /* lifts slightly on hover, as Maersk's dark does */
  --btn-bd-h: transparent;
  --btn-fg-h: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Height is set rather than derived from padding so a button always matches
     the input sitting next to it, whatever the label does. */
  height: var(--btn-h, 46px);
  padding: 0 22px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--btn-bg-h); border-color: var(--btn-bd-h); color: var(--btn-fg-h); }
.btn:active { transform: translateY(0.5px); }

/* The primary call to action: warm amber carrying deep-green text. This is the
   Maersk pattern (bright fill, dark label) applied to our own accent, and it is
   deliberately the loudest thing on any page. Use it sparingly. */
.btn--accent, .btn--cta {
  --btn-bg: var(--accent); --btn-fg: var(--ink); --btn-bd: transparent;
  --btn-bg-h: var(--accent-hover); --btn-bd-h: transparent; --btn-fg-h: var(--ink);
  font-weight: 600;
}

/* disabled: flat grey, no pointer. Used for Track until a number is entered. */
.btn[disabled], .btn:disabled {
  background: #e6eae7 !important;
  color: var(--ink-40) !important;
  border-color: transparent !important;
  cursor: not-allowed;
}
.btn[disabled] .arrow { transform: none !important; }

/* Secondary on light (Maersk's "Contact us"). The border used to be --ink-40,
   which at 38% opacity read so much lighter than the filled button beside it
   that the pair looked mismatched in size. Both variants have always measured
   the same box; this just gives the outline equal presence. */
.btn--outline {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink-55);
  --btn-bg-h: var(--ink-06); --btn-bd-h: var(--ink); --btn-fg-h: var(--ink);
}
/* on dark imagery: solid white, and a white hairline variant */
.btn--light {
  --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff;
  --btn-bg-h: var(--tint); --btn-bd-h: var(--tint); --btn-fg-h: var(--ink);
}
.btn--onDark-outline {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.65);
  --btn-bg-h: #fff; --btn-bd-h: #fff; --btn-fg-h: var(--ink);
}

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent;
  --btn-bg-h: var(--tint); --btn-bd-h: transparent; --btn-fg-h: var(--brand-strong);
}

.btn--sm { --btn-h: 40px; padding: 0 16px; font-size: 14.5px; }
.btn--lg { --btn-h: 54px; padding: 0 30px; font-size: 17px; }
.btn--block { width: 100%; }

.btn .arrow { transition: transform 0.18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--brand-strong);
  transition: color 0.18s, gap 0.18s;
}
.textlink:hover { color: var(--brand-deep); gap: 10px; text-decoration: underline; text-underline-offset: 3px; }

/* ========================================================== TOP CHROME */

/* announcement bar — sticks to the top alongside the nav */
.announce {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  letter-spacing: 0.01em;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 48px 9px 32px;
  position: relative;
  text-align: center;
}
.announce__inner strong { font-weight: 650; }
.announce a { border-bottom: 1px solid var(--paper-55); padding-bottom: 1px; }
.announce__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--paper-70);
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, color 0.2s;
}
.announce__close:hover { background: var(--paper-15); color: var(--paper); }
.announce[hidden] { display: none; }
/* The editor's live preview: the real bar, but parked in the page rather than
   stuck to the top, and always showing the full-width wording. */
.announce--preview { position: static; border-radius: var(--radius); }
.announce--preview .announce__inner { padding-inline: 18px; }
.announce--preview .announce__short { display: none; }
.announce--preview .announce__long { display: inline; }

/* icon button (staff login) sitting beside the Get Quote CTA.
   Both are pinned to --control-h so the square icon and the text button are
   exactly the same height and share a baseline, rather than each being sized
   by its own padding. */
.iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--control-h, 38px);
  height: var(--control-h, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-70);
  flex-shrink: 0;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.iconbtn:hover { color: var(--brand); border-color: var(--brand); background: var(--tint); }

/* main header */
.masthead {
  position: sticky;
  /* sits directly under the sticky announcement bar (0 when dismissed) */
  top: var(--announce-h, 0px);
  z-index: 50;
  /* solid white like JB Hunt; no blur (it also breaks sticky compositing) */
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s var(--ease);
}
.masthead.is-stuck { box-shadow: 0 1px 3px rgba(6, 45, 40, 0.10); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark { height: 30px; width: auto; }
.brand__type {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand__type b { font-weight: 700; }

/* primary nav */
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-70);
  padding: 9px 14px;
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
}
/* Every link carries the amber rule, wiped in from the left on hover and held
   open for the current page. The previous hover only nudged the text from
   ink-70 to a mid sage, a shift too small to read as a response at all. */
.nav a::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s var(--ease);
}
.nav a:hover { color: var(--ink); background: transparent; }
.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--ink); font-weight: 600; }
.nav a[aria-current='page']::after { transform: scaleX(1); }

.masthead__right {
  --control-h: 38px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* equal height, vertically centred against the icon button */
.masthead__right .btn {
  height: var(--control-h);
  padding-block: 0;
}
.contactinfo { text-align: right; line-height: 1.2; }
.contactinfo__label {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.contactinfo__num { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

/* hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.hamburger span {
  width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================== HERO
   Maersk pattern: full-bleed photo, dark scrim for legibility, text on the
   left, and a white utility card overlapping the bottom edge.
   Drop a photo in with:  <div class="hero__media"><img src="..." alt=""></div>
   Until then the scrim alone gives a clean dark block. */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6,45,40,0.92) 0%, rgba(6,45,40,0.72) 45%, rgba(6,45,40,0.30) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding-block: 92px 150px;   /* room for the overlapping card */
}
.hero .eyebrow { color: rgba(255,255,255,0.75); }
.hero h1 { color: #fff; margin-top: 16px; }
.hero__sub { color: rgba(255,255,255,0.85); font-size: 17px; margin-top: 18px; max-width: 52ch; }
.hero__cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* The ship sits centre-right in the frame, so the photo is oversized inside its
   box to push the vessel clear of the text column. The box itself stays flush
   to both edges: offsetting it instead left a bare band down the left with a
   hard vertical seam where the photo began.
   (A pale .hero--light variant used to live here, for a washed-out photograph
   that has since been replaced. The current cover is a deep teal ocean and
   takes the standard dark scrim above.) */
.hero .hero__media img { width: 124%; max-width: none; object-position: 60% center; }

/* Below 1080px .hero__inner drops its max-width and the copy runs the full
   width, so a left-to-right wash stops protecting the last line. Switch to a
   top-to-bottom wash and bring the whole vessel back into frame. */
@media (max-width: 1080px) {
  /* The hero is far taller than the photo's 16:9, so `cover` crops it hard
     sideways. 33% keeps the stern inside the frame with the bow running off to
     the right, rather than slicing the vessel at both ends. */
  .hero .hero__media img { width: 100%; object-position: 33% center; }
  .hero::before {
    background: linear-gradient(180deg,
      rgba(6,45,40,0.62) 0%,
      rgba(6,45,40,0.70) 55%,
      rgba(6,45,40,0.80) 100%);
  }
}

/* white utility card that overlaps the hero, like Maersk's tracking panel */
.herocard {
  position: relative;
  z-index: 3;
  margin-top: -104px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0 0 22px;
}
.herocard__tabs {
  display: flex; gap: 4px; padding: 0 8px;
  border-bottom: 1px solid var(--line);
}
.herocard__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 16px 14px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-70);
  border: 0; background: transparent; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.18s, border-color 0.18s;
}
.herocard__tab:hover { color: var(--ink); }
.herocard__tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--brand); }
.herocard__panel { padding: 22px 22px 0; }
.herocard__panel[hidden] { display: none; }
.herocard__row { display: flex; gap: 12px; align-items: flex-end; }
.herocard__row .field { flex: 1; margin: 0; }
/* The search field matches its button. The .btn--lg beside it stands 54px while
   the input's padding gave it 44, so the two sat on the same baseline with the
   button a clear 10px taller. */
.herocard__row .input,
.herocard__row .select { height: 54px; padding-block: 0; font-size: 15.5px; }
.herocard__note { font-size: 13px; color: var(--ink-55); margin-top: 12px; }

/* circular outline arrows (carousel controls) */
.roundbtn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ink-40); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.roundbtn:hover { border-color: var(--ink); background: var(--ink-06); }
.roundbtn[disabled] { opacity: 0.35; cursor: default; }

/* ====================================================== AUTH (standalone)
   The staff login renders without the site header or footer: just the form
   on a calm tinted field, with a way back to the site. */
.authpage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: var(--tint);
}
.authpage__inner { width: 100%; max-width: 400px; }
.authpage .panel { background: #fff; }
.authpage__brand {
  display: inline-flex; align-items: center; gap: 10px;
  justify-content: center; width: 100%; margin-bottom: 20px;
}
.authpage__back { text-align: center; margin-top: 18px; }

/* ============================================================== FORMS */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block; font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink-70); margin-bottom: 7px;
}
.field .hint { font-size: 12px; color: var(--ink-55); margin-top: 6px; }

.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-15);
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  appearance: none;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink-10);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-40); }
.textarea { resize: vertical; min-height: 110px; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23151414' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* password field with show/hide toggle */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-55); border-radius: var(--radius);
}
.pw-toggle:hover { color: var(--ink); background: var(--tint); }

/* segmented control (Air / Sea) */
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--ink-06); padding: 4px; border-radius: var(--radius); }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment label {
  margin: 0; text-align: center; padding: 9px 8px; border-radius: 2px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink-55);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.segment input:checked + label { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }

/* quote result */
.quoteresult { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.quoteresult[hidden] { display: none; }
.quoteline { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 5px 0; color: var(--ink-70); }
.quoteline span:last-child { font-variant-numeric: tabular-nums; font-weight: 550; color: var(--ink); }
.quotetotal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line);
}
.quotetotal .l { font-size: 14px; font-weight: 600; }
.quotetotal .v { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.quotemeta { font-size: 12.5px; color: var(--ink-55); margin-top: 10px; }

/* estimate disclaimer */
.quote-disclaimer {
  font-size: 12px; line-height: 1.5; color: var(--ink-55);
  background: var(--tint); border: 1px solid var(--tint-2); border-radius: var(--radius);
  padding: 10px 12px; margin: 16px 0;
}

/* ============================================================ SECTIONS */
.sec-head { max-width: 760px; margin-bottom: 44px; }
.sec-head .h-xl { margin-top: 10px; }
.sec-head p { margin-top: 12px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }

/* feature / value grid */
.grid { display: grid; gap: 24px; }
/* Grid children default to min-width:auto, so they refuse to shrink below
   their content and push the page wider on narrow screens. */
.grid > *, .split > *, .steps > *, .statcards > *, .logform-grid > * { min-width: 0; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: border-color 0.18s var(--ease);
}
/* flat hover: no shadow, no lift */
.card:hover { border-color: var(--ink-40); }
a.card:hover h3 { color: var(--brand-strong); }
/* Maersk keeps icons inline and unboxed, in the brand colour */
.card__icon {
  width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--brand); margin-bottom: 16px;
}
.card h3 { font-size: 19px; margin-bottom: 8px; transition: color 0.18s; }
.card--link { display: flex; flex-direction: column; }
.card--link .textlink { margin-top: auto; padding-top: 16px; }
.card p { color: var(--ink-70); font-size: 15px; }

/* ---- service card: image, centred title, hairline rule, blue link ----
   One piece of markup drives two layouts. It is a <details> so phones get a
   native, accessible accordion; on wider screens the panel is forced open with
   display:contents, which lets the media be ordered above the summary and
   makes the whole thing read as a plain card. No JavaScript is involved, so
   there is no flash of the wrong state on load. */
.scards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.scard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.18s var(--ease);
}
.scard:hover { border-color: var(--ink-40); }

/* No fixed ratio anywhere an image lives: the box takes the artwork's own
   proportions, so the image always fills it edge to edge with nothing cropped
   and no empty band. The three service artworks share one ratio, so the cards
   still line up with each other. */
.scard__media { background: var(--tile); }
.scard__media img { width: 100%; height: auto; display: block; }

.scard__head {
  list-style: none;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 22px 22px 0;
}
.scard__head::-webkit-details-marker { display: none; }
.scard__head h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.012em; }

.scard__rule { display: block; height: 1px; background: var(--line); margin: 18px 22px 0; }

.scard__link {
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  padding: 14px 22px 20px;
  font-size: 14.5px; font-weight: 500; color: var(--brand-strong);
  transition: gap 0.18s var(--ease);
}
.scard:hover .scard__link { gap: 11px; text-decoration: underline; text-underline-offset: 3px; }

/* the plus is the phone affordance only */
.scard__plus { display: none; }

/* ---- tablet and up: always-open card, media above the title ---- */
@media (min-width: 621px) {
  .scard { display: flex; flex-direction: column; }
  /* keeps the panel rendered even when the <details> is closed, in both the
     old (display:none on children) and current (::details-content) engines */
  .scard::details-content { content-visibility: visible; display: contents; }
  .scard__panel { display: contents; }
  .scard__media { order: 1; }
  .scard__head { order: 2; cursor: default; }
  .scard__rule { order: 3; }
  .scard__link { order: 4; margin-top: auto; }   /* links line up across the row */
}

/* ---- phone: the same cards become an accordion ----
   Collapsed by default so the three services preview in one screen, and the
   image only loads its share of attention once a row is opened. */
@media (max-width: 620px) {
  .scards { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .scard {
    background: transparent; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; overflow: visible;
  }
  .scard:hover { border-color: var(--line); }
  .scard__head {
    justify-content: space-between; gap: 16px;
    padding: 4px 2px; min-height: 56px; cursor: pointer;
  }
  .scard__head h3 { font-size: 17px; font-weight: 600; }

  .scard__plus {
    display: block; position: relative; width: 16px; height: 16px; flex-shrink: 0;
    color: var(--ink-55); transition: transform 0.25s var(--ease), color 0.25s;
  }
  .scard__plus::before, .scard__plus::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    background: currentColor; transform: translate(-50%, -50%);
  }
  .scard__plus::before { width: 16px; height: 2px; }
  .scard__plus::after { width: 2px; height: 16px; }
  .scard[open] .scard__plus { transform: rotate(45deg); color: var(--brand); }

  .scard__panel { padding: 2px 0 18px; animation: scard-open 0.28s var(--ease); }
  .scard__media { border-radius: var(--radius-md); overflow: hidden; }
  .scard__rule { margin: 14px 0 0; }
  .scard__link { justify-content: flex-start; padding: 12px 0 0; }
}
@keyframes scard-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---- service band: alternating artwork and detail ----
   Each service carries a paragraph and its own call to action, which is more
   than a third-width column holds gracefully: the copy runs to different
   lengths and the rows fall out of step with one another. A full-width band
   per service lets every row set its own height and shows the artwork at
   roughly twice the size. Rows alternate so the eye zig-zags down the page
   rather than marching straight down one edge. */
.svcrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  padding-block: 64px;
  border-top: 1px solid var(--line);
}
.svcrow:first-of-type { border-top: 0; padding-top: 0; }
.svcrow:last-of-type { padding-bottom: 0; }
.svcrow > * { min-width: 0; }

.svcrow__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tile);
  align-self: center;
}
.svcrow__media img { width: 100%; height: auto; display: block; }
.svcrow:nth-of-type(even) .svcrow__media { order: 2; }

/* The body spreads over the full height of the row so the heading sits level
   with the top edge of the artwork and the button with its bottom edge. */
.svcrow__body { display: flex; flex-direction: column; justify-content: space-between; }
.svcrow__body .lead { margin-top: 14px; }
.svcrow__cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- carousel controls ----
   Shared by the service bands and the About principles: on narrow screens one
   card shows at a time and these arrows step through the set, wrapping at
   both ends. Hidden by CSS at widths where every card is already visible. */
.carousel-nav { display: none; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
.carousel-nav .roundbtn { width: 52px; height: 52px; }
.carousel-nav .roundbtn svg { width: 20px; height: 20px; }

/* variant with a progress line between the arrows */
.carousel-nav--bar { gap: 18px; }
.carousel-nav__bar {
  flex: 1; height: 4px; background: var(--ink-10);
  border-radius: 999px; overflow: hidden;
}
.carousel-nav__bar span {
  display: block; width: 100%; height: 100%; background: var(--ink);
  border-radius: 999px; transform-origin: left;
  transition: transform 0.28s var(--ease);
}

/* In carousel mode the track drops out of whatever grid it was in, so the one
   visible card takes the full width. Above the breakpoint this class does
   nothing and the original grid or stack applies. */
@media (max-width: 860px) {
  .carousel { display: block; }
  .carousel > * { width: 100%; }
}

/* ---- phone and small tablet: one service at a time, artwork first ---- */
@media (max-width: 860px) {
  /* the bar variant belongs to the steps row, which only becomes a scroller
     on phones — see the 620px block */
  .carousel-nav:not(.carousel-nav--bar) { display: flex; }
  .svcrow {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-block: 0;
    border-top: 0;
  }
  .svcrow:nth-of-type(even) .svcrow__media { order: 0; }
  .svcrow__body { display: block; }
  .svcrow__body .lead { margin-top: 10px; }
  .svcrow__cta { margin-top: 22px; }
  .svcrow__cta .btn { flex: 1 1 auto; }
}

/* stat strip */
.statstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.statstrip > div { background: var(--paper); padding: 28px 26px; }
.statstrip .n { font-size: 34px; font-weight: 400; letter-spacing: -0.02em; }
.statstrip .l { font-size: 14px; color: var(--ink-55); margin-top: 4px; }

/* process steps — icon led, joined by a connecting line */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; }
/* the icon sits in a soft tinted disc, which gives the row of steps a set of
   anchors for the connector to run between */
.step__icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--tint); color: var(--brand-strong);
  border: 1px solid var(--tint-2);
  display: grid; place-items: center; margin-bottom: 20px;
  position: relative; z-index: 1;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.step:hover .step__icon { background: var(--brand); border-color: var(--brand); color: var(--ink); }
/* hairline connector from each disc to the next, across the grid gap */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 30px;               /* centre of the 60px disc */
  left: 72px;
  right: -24px;
  height: 1px;
  background: var(--line);
}
.step h3 { font-size: 17px; font-weight: 500; margin-bottom: 7px; }
.step p { font-size: 14.5px; color: var(--ink-70); }

/* dark CTA band */
.band { background: var(--ink); color: var(--paper); border-radius: var(--radius-md); padding: 56px 48px; text-align: center; }
.band .h-xl { color: var(--paper); }
.band p { color: rgba(255,255,255,0.8); margin-top: 14px; max-width: 54ch; margin-inline: auto; }
.band .band__cta { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* split feature — bottom-aligned so the media block ends level with the text column */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
.split__media {
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--ink);
  position: relative; overflow: hidden;
}
/* THE RULE: a photo panel starts level with the heading beside it and ends
   level with the last thing in that column (usually the buttons). Nothing of
   the panel hangs past the text.

   To get that, the text column has to set the row height. The image is taken
   out of flow (absolute) so its natural height cannot stretch the row, then
   the panel fills the row exactly and the image covers the panel. Previously
   the image was in flow, so a tall artwork pushed the panel below the buttons.

   The artwork is centred, so `cover` trims its background margins rather than
   the illustration. --photo-top/--photo-bottom stay as the panel fill, sampled
   from the artwork's own edge rows, so any letterboxing is invisible. */
.split--photo { align-items: stretch; }
.split__media--photo {
  aspect-ratio: auto;
  background: var(--tile);
  position: relative;
  overflow: hidden;
  min-height: 180px;   /* floor, so a very short column cannot squash it to a line */
}
.split__media--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* resampled from the green artwork delivered 2026-07-22 */
.split__media--transit { --photo-top: #c7e0e1; --photo-bottom: #ccefe8; }
.split__media--ghchi { --photo-top: #c6e2d7; --photo-bottom: #c8dad8; }

/* Stacked: there is no text column beside it to take the height from, so the
   panel needs its own proportions or it would collapse to the min-height. */
@media (max-width: 1080px) {
  .split__media--photo { aspect-ratio: 4 / 3; min-height: 0; }
}

/* Spec list — hairline-separated rows with a small brand marker. Replaces the
   tick-icon checklist, which read as a feature grid rather than a statement. */
.speclist { margin-top: 28px; border-top: 1px solid var(--line); }
.speclist li {
  list-style: none;
  /* flex-start, not center: on a wrapped item the marker belongs beside the
     first line rather than floating in the middle of the block */
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.5; color: var(--ink-90);
}
.speclist li::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex-shrink: 0;
  margin-top: 0.55em;   /* optical centre of the first line */
}
ul { padding: 0; margin: 0; }

/* ============================================================= PAGE HERO */
.pagehero { background: var(--ink); color: #fff; }
.pagehero__inner { padding-block: 64px 58px; max-width: 780px; }
.pagehero .eyebrow { color: var(--paper-55); }
.pagehero h1 { color: #fff; margin-top: 14px; }
.pagehero p { color: rgba(255,255,255,0.82); font-size: 17px; margin-top: 16px; max-width: 62ch; }

/* ============================================================== PANEL */
.panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 30px;
}
.panel--pad-lg { padding: 40px; }

/* track result / timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 26px 34px; }
.timeline li::before {
  content: ''; position: absolute; left: 8px; top: 20px; bottom: -6px; width: 2px; background: var(--line);
}
.timeline li:last-child::before { display: none; }
.timeline .dot {
  position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink-40);
}
.timeline li.is-current .dot { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px var(--ink-10); }
.timeline .t-status { font-weight: 650; font-size: 16px; }
.timeline .t-note { color: var(--ink-70); font-size: 14px; margin-top: 2px; }
.timeline .t-time { color: var(--ink-55); font-size: 12.5px; margin-top: 3px; }

/* status pill (monochrome tiers — color-code once brand palette is set) */
.pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--ink-15); color: var(--ink-70);
  white-space: nowrap; background: #fff;
}
.pill .pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-40); }
/* Delivered is the milestone status: the solid dark blue, matching the primary
   button. It reads as the most finished state and stays clearly apart from the
   outlined "Out for Delivery" pill beside it. */
.pill[data-status='Delivered'] {
  background: var(--ink);
  color: #fff; border-color: transparent; font-weight: 600;
}
.pill[data-status='Delivered'] .pdot { background: #fff; }
.pill[data-status='Out for Delivery'] { border-color: var(--ink); color: var(--ink); }
.pill[data-status='Out for Delivery'] .pdot { background: var(--ink); }
/* On Hold is the one exception state: a subtle red so it reads as "needs
   attention" without shouting next to the calm blue palette. */
.pill[data-status='On Hold'] {
  background: #fdf3f2; color: #9a2f26; border-color: #eecac5;
}
.pill[data-status='On Hold'] .pdot { background: #c0392b; }

/* ============================================================== FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 4px; display: flex; justify-content: space-between;
  align-items: center; gap: 24px; font-size: 18px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex-shrink: 0; transition: transform 0.25s var(--ease); color: var(--ink-55); }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .faq__a { padding: 0 4px 24px; color: var(--ink-70); max-width: 74ch; }

/* ============================================================== PROSE */
.prose { max-width: 74ch; }
.prose h2 { font-size: 20px; margin-top: 36px; margin-bottom: 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-70); margin-bottom: 12px; }
.prose ul { padding-left: 20px; margin-bottom: 14px; }
.prose li { list-style: disc; color: var(--ink-70); margin-bottom: 6px; }
.prose a { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; }
.prose .updated {
  font-size: 13px; color: var(--ink-55); border-bottom: 1px solid var(--line);
  padding-bottom: 16px; margin-bottom: 28px;
}

/* ============================================================== ALERT */
.alert { border-radius: var(--radius); padding: 13px 15px; font-size: 14px; border: 1px solid var(--ink-40); background: var(--ink-06); }
.alert--error { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.alert[hidden] { display: none; }

/* ============================================================== FOOTER
   Light-blue JB Hunt-style footer: bold black headers, blue links. */
.footer { background: var(--tint); color: var(--ink); padding-block: 56px 26px; margin-top: 0; }
.footer__top { display: grid; grid-template-columns: repeat(4, 1fr) 1.15fr; gap: 32px; padding-bottom: 34px; border-bottom: 1px solid var(--tint-2); }
.footer h4 { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 15px; font-weight: 600; }
/* columns are <details> so they can collapse on mobile; on desktop the summary
   is just a heading and the chevron is hidden */
.footer__col > summary {
  font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 15px;
  list-style: none; cursor: default;
}
.footer__col > summary::-webkit-details-marker { display: none; }
.footer__col .chev { display: none; }
.announce__short { display: none; }
.footer__links { display: grid; gap: 11px; }
.footer__links a { color: var(--brand-strong); font-size: 14.5px; transition: color 0.15s; }
.footer__links a:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; }
.footer .brand__type { color: var(--ink); }
.footer__blurb { color: var(--ink-70); font-size: 14px; margin-top: 14px; max-width: 30ch; }
.footer__address { font-style: normal; font-size: 14px; line-height: 1.5; color: var(--ink-70); }
.footer__social { display: flex; gap: 14px; margin-bottom: 20px; }
.footer__social a { color: var(--ink); display: grid; place-items: center; transition: color 0.15s, transform 0.15s; }
.footer__social a:hover { color: var(--brand); }
.footer__tag { font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--brand-deep); letter-spacing: -0.02em; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; font-size: 13px; color: var(--ink-55); flex-wrap: wrap; }
.footer__bottom .legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__bottom a { color: var(--brand-strong); }
.footer__bottom a:hover { color: var(--brand-strong); text-decoration: underline; }

/* ============================================================ UTILITIES */
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.center { text-align: center; }
.stack-sm > * + * { margin-top: 10px; }
.hide-mobile { }
[hidden] { display: none !important; }

.spinner {
  width: 16px; height: 16px; border: 2px solid var(--paper-55); border-top-color: var(--paper);
  border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block;
}
.spinner--ink { border-color: var(--ink-15); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================ DASHBOARD */
.appbar {
  position: sticky; top: 0; z-index: 40; background: var(--ink); color: var(--paper);
  border-bottom: 1px solid var(--paper-15);
}
.appbar__inner { display: flex; align-items: center; gap: 20px; height: 62px; }
.appbar .brand__type { color: var(--paper); font-size: 18px; }
.appbar__tag { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-55); border: 1px solid var(--paper-15); border-radius: var(--radius); padding: 4px 9px; }
.appbar__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.appbar__user { text-align: right; line-height: 1.2; }
.appbar__user b { font-size: 14px; }
.appbar__user span { font-size: 11px; color: var(--paper-55); text-transform: capitalize; }

/* wider working area so the whole table shows at a glance */
.appbar .container, .dash > .container { max-width: 1440px; }
.dash { padding-block: 28px 60px; }
.dash__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
/* the heading takes the slack so the action buttons stay grouped on the right */
.dash__head h1 { margin-right: auto; }

/* Compact mode: one button strips the filters, the toolbar and any open editor,
   leaving the highlights and the package table. Height is animated rather than
   display:none so it collapses smoothly instead of snapping. */
.dash-collapsible {
  overflow: hidden;
  max-height: 400px;
  transition: max-height 0.3s var(--ease), opacity 0.2s var(--ease),
              padding 0.3s var(--ease), margin 0.3s var(--ease);
}
/* Padding and border have to go too: max-height alone bottoms out at
   padding + border, which left the filter bar as a 20px sliver. */
.dash.is-compact .dash-collapsible {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-block: 0;
  border-block-width: 0;
  pointer-events: none;
}

.select--sm { padding: 7px 28px 7px 10px; font-size: 13px; background-position: right 10px center; }

/* toolbar: search + actions */
.dash-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
/* The search field matches the height of the buttons beside it. .btn--sm sets
   its own --btn-h, so read the same value here rather than repeating a number. */
.dash-toolbar .search {
  flex: 1;
  min-width: 240px;
  height: 40px;
  padding-block: 0;
}

/* collapsible "log a package"
   Spacing lives INSIDE the animated area. A margin on .is-open was applied
   instantly and made the table jump before the animation ran. */
.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.collapse.is-open { grid-template-rows: 1fr; }
.collapse__wrap { overflow: hidden; min-height: 0; }
.collapse__inner {
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; background: var(--tint);
  margin-bottom: 16px;
}
.logform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.logform-grid .field { margin: 0; }
.logform-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }

.data-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--paper); }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-55); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--tint); white-space: nowrap; }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--ink-06); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background 0.15s; }
table.data tbody tr:hover { background: var(--tint); }
table.data .col-narrow { white-space: nowrap; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--brand-strong); }
.row-flash { animation: flash 1.5s var(--ease); }
@keyframes flash { 0% { background: #cfe8f5; } 100% { background: transparent; } }

.dash-empty { text-align: center; padding: 56px 24px; color: var(--ink-55); }

.statcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.statcards .panel { padding: 18px 20px; }
.statcards .n { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }
.statcards .l { font-size: 12.5px; color: var(--ink-55); margin-top: 2px; }

/* activity button + count */
/* The count rides inside the button rather than as a badge pinned outside it.
   Hung off the corner it was clipped by the toolbar's overflow, which the
   collapse animation needs, so there is nowhere outside the button to put it. */
.act-btn .count {
  background: var(--ink); color: #fff; font-size: 11px;
  min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center;
  padding: 0 5px; font-weight: 700; margin-inline-start: -2px;
}
.act-btn .count[hidden] { display: none; }

/* activity drawer — subtle, slides in when pulled */
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(400px, 92vw); background: #fff;
  border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 0.3s var(--ease);
  z-index: 70; display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); box-shadow: -24px 0 60px -24px rgba(6, 45, 40, 0.28); }
.drawer__head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.drawer__head h3 { font-size: 17px; }
.drawer__head .sub { font-size: 12px; color: var(--ink-55); margin-top: 2px; }
.drawer__close { background: transparent; border: 0; cursor: pointer; color: var(--ink-55); width: 32px; height: 32px; border-radius: var(--radius); display: grid; place-items: center; }
.drawer__close:hover { background: var(--tint); color: var(--ink); }
.drawer__body { overflow-y: auto; flex: 1; }
.drawer__scrim { position: fixed; inset: 0; background: rgba(6, 45, 40, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 65; }
.drawer__scrim.is-open { opacity: 1; pointer-events: auto; }
.act { padding: 13px 20px; border-bottom: 1px solid var(--ink-06); font-size: 13.5px; line-height: 1.45; }
.act:hover { background: var(--tint); }
.act .who { font-weight: 600; }
.act .what { color: var(--ink-70); }
.act .when { color: var(--ink-55); font-size: 12px; margin-top: 3px; display: flex; align-items: center; gap: 7px; }
/* --brand-strong is the token meant for text on white; --brand was failing AA here too */
.act .tag { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-strong); border: 1px solid var(--tint-2); border-radius: 999px; padding: 1px 7px; }
.act-empty { padding: 40px 20px; text-align: center; color: var(--ink-55); font-size: 13.5px; }

/* ---- dashboard: tablet and below ----
   The table becomes stacked cards so every field stays visible. Nothing is
   hidden and nothing needs sideways scrolling. */
@media (max-width: 1024px) {
  /* Title on its own line, then the two actions side by side sharing the width.
     Left as a flex row they wrapped raggedly: "Hide controls" stayed up beside
     the title and "View public site" dropped to a half-width line of its own. */
  .dash__head { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; }
  .dash__head h1 { grid-column: 1 / -1; margin-right: 0; }
  .dash__head .btn { width: 100%; }
  .appbar__tag { display: none; }
  .dash-filters { gap: 8px 12px; }
  .dash-toolbar .search { min-width: 100%; order: -1; }

  .table-scroll { overflow: visible; }
  table.data { display: block; min-width: 0; }
  table.data thead { display: none; }
  table.data tbody { display: block; }
  table.data tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
    align-items: start;
  }
  table.data tr:last-child { border-bottom: 0; }
  table.data td { display: block; padding: 0; border: 0; }

  /* row 1 pairs the tracking code with its status */
  td[data-label='Tracking'] { grid-column: 1; grid-row: 1; align-self: center; }
  td[data-label='Status']   { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
  td[data-label='Client']   { grid-column: 1 / -1; }
  td[data-label='Destination'] { grid-column: 1; }
  td[data-label='Weight']      { grid-column: 2; justify-self: end; text-align: right; }
  td[data-label='Updated']     { grid-column: 1 / -1; }
  td[data-label='Actions']     { grid-column: 1 / -1; margin-top: 4px; }

  /* small caps label above the value, so a card reads on its own */
  td[data-label='Destination']::before,
  td[data-label='Weight']::before,
  td[data-label='Updated']::before {
    content: attr(data-label);
    display: block;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-55); margin-bottom: 2px;
  }
  td[data-label='Weight']:empty { display: none; }
  .rowactions { display: flex; gap: 8px; }
  .rowactions .select { flex: 1; max-width: 260px; }
  .rowactions .rowbtn { flex: 0 0 auto; padding: 7px 16px; }
}

/* ---- dashboard: phone ---- */
@media (max-width: 720px) {
  .statcards { grid-template-columns: repeat(2, 1fr); }
  .appbar__inner { height: auto; padding-block: 10px; gap: 10px; }
  .appbar__right { gap: 10px; }
  .dash-toolbar .btn { flex: 1 1 auto; }
  .logform-actions .btn { flex: 1 1 auto; }
}

/* ---- dashboard: keep the phone view dense and to the point ---- */
@media (max-width: 620px) {
  .dash { padding-block: 16px 36px; }
  .dash__head { margin-bottom: 14px; gap: 10px; }
  .dash__head p { display: none; }   /* explanatory copy, not needed on a phone */
  .dash__head .btn { padding: 8px 12px; font-size: 13px; }
  .statcards { gap: 10px; margin-bottom: 14px; }
  .statcards .panel { padding: 13px 14px; }
  .statcards .n { font-size: 22px; }
  .statcards .l { font-size: 11.5px; }
  .dash-toolbar { gap: 8px; }
  .collapse__inner { padding: 16px; }
}

@media (max-width: 520px) {
  .statcards { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* keep the signed-in name visible; the role line is what gets dropped */
  .appbar__user { display: block; max-width: 96px; }
  .appbar__user b { font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .appbar__user br, .appbar__user span { display: none; }
  .appbar .brand__type { font-size: 16px; }
  .appbar .brand__mark { height: 24px; }
  .appbar .btn--sm { padding: 7px 11px; font-size: 12.5px; }
  .dash-filters { padding: 10px; gap: 8px; }
  /* fixed label column so "Sort by" and "Sort by date" start their controls
     at the same x, instead of each row being pushed by its label width */
  .dash-filters .filter-group {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 8px;
  }
  /* The base .dash-filters .input rule is declared later in this file with the
     same specificity, so it would otherwise win and hold the date box at its
     desktop 140px. The extra class here settles the cascade. */
  .dash-filters .filter-group .select,
  .dash-filters .filter-group .input { width: 100%; flex: none; }
  .dash-filters .filter-reset { margin-left: 0; width: 100%; }
}

/* ================================================= CONTACT PAGE LAYOUT
   Both columns stretch so the form's bottom edge lines up exactly with the
   bottom of the business-hours card. */
.split--stretch { align-items: stretch; }
.split--stretch > div { display: flex; flex-direction: column; }
/* pinned to the bottom of its column */
.fill-bottom { margin-top: auto; }
.panel-fill { height: 100%; display: flex; flex-direction: column; }
.panel-fill form { display: flex; flex-direction: column; flex: 1; }
.panel-fill .form-end { margin-top: auto; }
/* The message field takes the slack the send button used to sit above: the form
   column is already stretched to match the contact details beside it, so a
   fixed-height textarea left ~150px of dead air in the middle. Growing into it
   balances the panel without changing the row height. */
.panel-fill form .field:has(.textarea) { flex: 1; display: flex; flex-direction: column; }
.panel-fill form .textarea { flex: 1; min-height: 130px; }

/* ------------------------------------------------- dashboard filter bar */
.dash-filters {
  display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--tint); margin-bottom: 12px;
}
.filter-group { display: flex; align-items: center; gap: 6px; }
.filter-group > label { font-size: 11.5px; font-weight: 500; color: var(--ink-55); white-space: nowrap; }
.dash-filters .select { padding: 6px 24px 6px 9px; font-size: 12.5px; background-color: #fff; background-position: right 8px center; }
.dash-filters .input { padding: 6px 9px; font-size: 12.5px; background-color: #fff; width: 140px; }
.filter-reset { margin-left: auto; padding: 6px 10px; font-size: 12.5px; }

/* delivered packages are locked for everyone except the master admin */
.locknote {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-55); white-space: nowrap;
}

.rowactions { display: flex; gap: 7px; align-items: center; }

/* row action button */
/* Ink, not --brand: the row action sat at 2.5:1 on white, well under the 4.5:1
   AA floor for text this size, and it reads as a button rather than a link. */
.rowbtn {
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
.rowbtn:hover { background: var(--tint); border-color: var(--ink); }

/* wider fields inside the log form */
.logform-grid .field--wide { grid-column: 1 / -1; }
.logform-grid .textarea { min-height: 76px; }
.editing-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--brand); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px;
}

/* ============================================================ RESPONSIVE */
@media (max-width: 1080px) {
  /* Same reasoning as the phone hero: once the copy runs full width it sits
     above the vessel rather than beside it, so the block needs room underneath
     for the ship to be seen rather than sat on. */
  .hero__inner { padding-block: 56px 220px; max-width: none; }
  .herocard { margin-top: -84px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .statstrip { grid-template-columns: repeat(2, 1fr); }
  /* the connector only makes sense when all four steps sit on one row */
  .step:not(:last-child)::after { display: none; }
}

/* ---- small laptop / landscape tablet (861-1100px) ----
   The full desktop header — brand, five nav links, phone block, CTA and the
   staff-login icon — needs about 1000px and only has 960 at 1024px wide, so it
   was spilling past the viewport. The phone block gives way first: it is the
   least load-bearing of the five, and the number is still in the footer and
   the mobile menu. */
@media (min-width: 861px) and (max-width: 1100px) {
  .contactinfo { display: none; }
  .masthead__inner { gap: 18px; }
  .nav a { padding-inline: 11px; }
}

/* ---- tablet ---- */
@media (max-width: 980px) {
  .footer__top { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

@media (max-width: 860px) {
  :root { --gutter: 22px; }
  .section { padding-block: 68px; }
  .nav, .contactinfo { display: none; }
  .hamburger { display: flex; }
  .masthead__inner { height: 66px; }

  /* mobile menu */
  .mobilemenu {
    position: fixed; inset: 0 0 0 auto; width: min(330px, 86vw); background: #fff;
    transform: translateX(100%); transition: transform 0.24s var(--ease); z-index: 60;
    display: flex; flex-direction: column; overflow-y: auto;
  }
  .mobilemenu.is-open { transform: translateX(0); box-shadow: -20px 0 50px -25px rgba(6, 45, 40, 0.35); }
  .mobilemenu__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 16px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: #fff; z-index: 1;
  }
  .menuclose {
    width: 36px; height: 36px; border: 0; background: transparent; border-radius: var(--radius);
    display: grid; place-items: center; color: var(--ink-70); cursor: pointer;
  }
  .menuclose:hover { background: var(--tint); color: var(--ink); }

  .mobilemenu__nav { display: flex; flex-direction: column; }
  .mobilemenu__nav a {
    padding: 16px; font-size: 17px; font-weight: 500; color: var(--ink);
    border-bottom: 1px solid var(--ink-06);
  }
  .mobilemenu__nav a:active { background: var(--tint); }
  .mobilemenu__nav a[aria-current='page'] { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }

  .mobilemenu__foot { margin-top: auto; padding: 16px; display: grid; gap: 14px; border-top: 1px solid var(--line); }
  .mobilemenu__sub { display: flex; gap: 18px; font-size: 14px; }
  .mobilemenu__sub a { color: var(--brand); font-weight: 600; }
  .mobilemenu__tel { display: grid; gap: 1px; }
  .mobilemenu__tel span { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55); font-weight: 650; }
  .mobilemenu__tel strong { font-size: 15.5px; }

  .scrim { position: fixed; inset: 0; background: rgba(6,45,40,0.45); opacity: 0; pointer-events: none; transition: opacity 0.24s; z-index: 55; }
  .scrim.is-open { opacity: 1; pointer-events: auto; }
}
@media (min-width: 861px) { .mobilemenu, .scrim { display: none; } }

/* ---- phone type scale ----
   Measured off maersk.com at 375px: base body 16/24, small 14/20, lead 18/26,
   H1 38/300, H2 26/300, card headings 20/400, controls 16px. The scale here
   matches that, allowing a little for Inter running wider than Maersk Text.
   The previous scale topped out at 15.5px body and a 28px H1, which was
   noticeably tighter than the site it is modelled on. */
@media (max-width: 620px) {
  body { font-size: 16px; line-height: 1.5; }
  .display { font-size: 36px; font-weight: 300; line-height: 1.06; letter-spacing: -0.022em; }
  .h-xl { font-size: 26px; font-weight: 300; line-height: 1.23; letter-spacing: -0.016em; }
  .h-lg { font-size: 20px; line-height: 1.25; }
  .lead, .hero__sub, .pagehero p { font-size: 17px; line-height: 1.52; }
  .eyebrow { font-size: 12px; letter-spacing: 0.09em; }
  .muted, .herocard__note { font-size: 14px; }

  /* no fade-in on phones: content is there the moment you scroll to it */
  .reveal { opacity: 1; transform: none; transition: none; }

  .grid-3, .grid-4, .grid-2, .field-row { grid-template-columns: 1fr; }

  /* ---- How it works: a swipeable row of cards ----
     Stacked vertically the four steps ran off the screen and read as an
     endless list. Side by side they stay in one view and the shape of the row
     tells you there is more to the right. site.js nudges this once when it
     first scrolls into view, so the gesture is discoverable without a label. */
  .steps {
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step {
    scroll-snap-align: start;
    background: var(--tint);
    border: 1px solid var(--tint-2);
    border-radius: var(--radius-lg);
    padding: 22px 20px 24px;
  }
  /* the disc needs to lift off the tinted card it now sits on */
  .step .step__icon { background: var(--paper); border-color: var(--paper); margin-bottom: 16px; }
  .carousel-nav--bar { display: flex; }
  .statstrip { grid-template-columns: 1fr 1fr; }   /* 2x2 reads better than a tall stack */
  .statstrip > div { padding: 18px 16px; }

  .section { padding-block: 44px; }
  .section--tight { padding-block: 30px; }
  .sec-head { margin-bottom: 24px; }
  .pagehero__inner { padding-block: 34px 30px; }
  .band { padding: 30px 20px; }
  .panel, .panel--pad-lg { padding: 20px; }
  .card { padding: 20px; }
  .grid { gap: 14px; }

  /* The ship sits mid-frame and the photo is never cropped vertically here, so
     it lands wherever the middle of the hero is. Deep bottom padding moves the
     copy above it and leaves the vessel and open water clear below the
     buttons, instead of the buttons sitting on top of the subject. */
  .hero__inner { padding-block: 28px 300px; max-width: none; }
  .hero h1 { margin-top: 12px; }
  .hero__sub { margin-top: 14px; }
  .hero__cta { margin-top: 20px; gap: 10px; }
  .hero__cta .btn, .band__cta .btn { flex: 1 1 auto; }

  /* the card sits below the hero instead of overlapping it, so nothing is
     covered and both hero buttons stay reachable */
  .herocard { margin-top: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
  /* These tabs used to scroll sideways to fit. On a phone that meant the row
     swallowed any vertical drag that started on it and slid the tabs instead
     of scrolling the page. They now share the width evenly and never scroll,
     so the row is inert to touch except on the tabs themselves. */
  .herocard__tabs { overflow: visible; padding: 0 2px; gap: 0; }
  /* Icon over label rather than beside it. Side by side, the three labels plus
     their icons need more width than a 320px screen has, and dropping the
     icons to make room lost the thing that makes the row scannable. Stacked,
     the widest tab only needs the width of its label. */
  .herocard__tab {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 12px 4px 10px; font-size: 13.5px; white-space: nowrap;
  }
  .herocard__tab svg { width: 20px; height: 20px; flex-shrink: 0; }
  .herocard__panel { padding: 18px 18px 0; }
  .herocard__row { flex-direction: column; align-items: stretch; gap: 10px; }
  .herocard__row .btn { width: 100%; }
  .band { padding: 34px 22px; }

  /* Controls at Maersk's mobile sizing: 16px label, 48-52px tall. Nothing
     interactive drops below the 44px tap-target floor. */
  .btn { padding: 14px 22px; min-height: 48px; font-size: 16px; }
  .btn--sm { padding: 12px 16px; min-height: 44px; font-size: 15px; }
  .btn--lg { padding: 16px 26px; min-height: 52px; font-size: 16px; }
  .nav a, .mobilemenu__nav a { min-height: 48px; }
  .rowbtn { min-height: 44px; padding-inline: 18px; }
  .menuclose, .announce__close, .drawer__close { min-width: 44px; min-height: 44px; }

  /* 16px on fields is deliberate: iOS Safari zooms the viewport on focus for
     anything smaller, which throws the whole page off centre. */
  .field { margin-bottom: 14px; }
  /* Stacked, the two-up rows were laying a grid gap on top of each field's own
     margin, so gaps inside a row came out double the gaps between rows and the
     form read as unevenly grouped. Dropping the grid here leaves one rhythm. */
  .field-row { display: block; }
  .field-row > .field { margin-bottom: 14px; }
  .field label { margin-bottom: 6px; font-size: 14px; }
  .input, .select, .textarea { padding: 13px 14px; font-size: 16px; min-height: 48px; }
  .textarea { min-height: 104px; }
  .segment label { padding: 12px 8px; font-size: 15px; }
  .seg-qual { display: none; }        /* "Air Freight" reads fine without ", fast" */
  .field .hint { font-size: 13px; }

  /* Link rows carry their own height so every one clears the 44px tap floor —
     footer columns and card links were landing at 21px and 36px. */
  .footer__links { gap: 2px; }
  .footer__links a,
  .footer__bottom .legal a,
  .mobilemenu__sub a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__social a { width: 44px; height: 44px; }
  .footer__social { gap: 6px; margin-left: -10px; }
  .footer__bottom .legal { gap: 20px; }
  .scard__link { min-height: 48px; padding-block: 14px 4px; }
  .mobilemenu__tel { min-height: 44px; }
  .masthead .brand { min-height: 44px; }

  .speclist li { font-size: 16px; padding: 16px 2px; }
  .faq summary { font-size: 18px; padding: 20px 2px; }
  .timeline li { padding-left: 32px; }
  .card h3, .step h3, .scard__head h3 { font-size: 20px; }
  .card p, .step p { font-size: 16px; }
  .scard__link, .textlink { font-size: 16px; }
  .statstrip .n { font-size: 24px; }
  .statstrip .l { font-size: 13px; }

  /* footer becomes an accordion so it stays short */
  .footer { padding-block: 34px 22px; }
  .footer__top { grid-template-columns: 1fr; gap: 0; padding-bottom: 20px; }
  .footer__col { border-bottom: 1px solid var(--tint-2); }
  .footer__col > summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 2px; margin: 0; cursor: pointer; font-size: 16px; min-height: 52px;
  }
  .footer__links a { font-size: 16px; }
  .footer__blurb, .footer__address { font-size: 15px; }
  .footer__bottom { font-size: 14px; }
  .footer__col .chev {
    display: block; width: 9px; height: 9px; flex-shrink: 0;
    border-right: 2px solid var(--ink-55); border-bottom: 2px solid var(--ink-55);
    /* the translate carries the optical offset that margin-top used to, so the
       toggle animates on the compositor instead of reflowing the row */
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s var(--ease);
  }
  .footer__col[open] .chev { transform: translateY(2px) rotate(-135deg); }
  .footer__col > .footer__links { padding: 2px 2px 16px; gap: 13px; }
  .footer__connect { padding-top: 18px; }
  .footer__connect h4 { margin-bottom: 12px; }
}

/* ---- small phones ---- */
@media (max-width: 520px) {
  :root { --gutter: 18px; }
  /* staff login is still reachable from the mobile menu */
  .masthead .iconbtn { display: none; }
  /* At 375px the wordmark, the CTA and the hamburger together ran 47px wider
     than the row, pushing every page into a horizontal scroll. These sizes are
     the largest that fit with room to spare, and the hamburger keeps its full
     44px tap target. */
  .masthead .btn--cta { padding: 10px 12px; font-size: 14px; min-height: 44px; }
  .masthead__inner { height: 62px; gap: 10px; }   /* Maersk's mobile header height */
  .masthead__right { gap: 8px; }
  .brand { gap: 8px; }
  .brand__type { font-size: 16.5px; }
  .brand__mark { height: 26px; }
  .hamburger { width: 44px; height: 44px; }

  /* one compact line instead of three */
  .announce { font-size: 13px; }
  .announce__long { display: none; }
  .announce__short { display: inline; }
  .announce__inner { padding: 7px 36px 7px 0; gap: 6px; text-align: left; justify-content: flex-start; }
  .announce__close { right: 6px; width: 24px; height: 24px; }

  .display { font-size: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
}

/* ---- narrowest phones (320-360px) ----
   Below ~370px the wordmark, the CTA and the hamburger cannot share the row
   without overflowing. The CTA is the one to drop: the mobile menu already
   carries "Get Quote" as a full-width button, so the action stays one tap
   away, while the brand name stays visible. */
@media (max-width: 370px) {
  :root { --gutter: 16px; }
  .masthead .btn--cta { display: none; }
  .display { font-size: 30px; }
}

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