/* ==========================================================================
   TEMPLE SHIPS by PACK N MAIL — stylesheet
   templeships.com

   Inherited verbatim from the Pack N Mail design system ("American Freight
   Editorial") so this site reads as the same brand, trimmed to the components
   these five pages actually use, then extended at the bottom with the
   shipping-specific pieces. Source of truth for the shared system:
   packnmailtemple.com/assets/css/styles.css

   PALETTE LAW — only three colors exist. Shades are opacity of these:
     Blue  #00007A   Red #FE010C   White #FFFFFF

   CONTRAST LAW — #FE010C on white is 4.02:1 (fails AA for text).
     Therefore RED NEVER CARRIES TEXT. Red is structure, energy, and
     decoration: bars, rules, shadows, dots, arrows, outlines, glyph accents.
     Blue (16.4:1 on white) and white carry every word on the site.
   ========================================================================== */

/* -- Fonts — self-hosted ---------------------------------------------------
   Same two families the Pack N Mail site uses, served from this origin
   instead of fonts.gstatic.com: no third-party request, no extra DNS/TLS
   handshake on the critical path, and nothing about the visitor leaves the
   site. Latin subset only. Inter Tight is the variable font, covering 400-800
   in one 44 KB file.
   To refresh: see README.md ("Fonts").
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivo-black-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- Reset / Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`: hidden would force overflow-y to compute to `auto`,
     turning <body> into a scroll container. Decorative layers (skewed wedges,
     ghost type, marquee) intentionally exceed the viewport and need trimming. */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent-strong); }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }

/* Focus — a red bracket that never blends into the blue */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -- Tokens ---------------------------------------------------------------- */
:root {
  /* The only three colors */
  --blue: #00007A;
  --red: #FE010C;
  --white: #FFFFFF;

  /* Type */
  --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Surfaces */
  --bg: #ffffff;
  --bg-soft: rgba(0, 0, 122, 0.035);
  --bg-mute: rgba(0, 0, 122, 0.07);
  --surface: #ffffff;
  --surface-2: rgba(0, 0, 122, 0.02);

  /* Ink — every shade is blue at opacity */
  --ink: #00007A;
  --ink-2: rgba(0, 0, 122, 0.88);
  --muted: rgba(0, 0, 122, 0.66);
  --muted-2: rgba(0, 0, 122, 0.5);
  --line: rgba(0, 0, 122, 0.14);
  --line-strong: rgba(0, 0, 122, 0.28);

  /* Accents — text-safe blue, structural red */
  --accent: #00007A;
  --accent-strong: #FE010C;
  --accent-soft: rgba(0, 0, 122, 0.08);
  --red-soft: rgba(254, 1, 12, 0.08);
  --red-line: rgba(254, 1, 12, 0.32);

  /* State — meaning lives in the text; color is redundant reinforcement */
  --success: #00007A;
  --warn: #FE010C;
  --danger: #FE010C;

  /* Brutalist hard shadows — offset, no blur */
  --shadow-1: 3px 3px 0 rgba(0, 0, 122, 0.1);
  --shadow-2: 6px 6px 0 rgba(0, 0, 122, 0.12);
  --shadow-3: 14px 14px 0 rgba(0, 0, 122, 0.14);
  --shadow-red: 8px 8px 0 var(--red);
  --shadow-blue: 8px 8px 0 var(--blue);
  --shadow-soft: 0 18px 50px rgba(0, 0, 122, 0.16);

  /* Geometry — squared off, industrial */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --container: 1240px;

  /* Textures */
  --grid-paper:
    linear-gradient(to right, rgba(0, 0, 122, 0.055) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(to bottom, rgba(0, 0, 122, 0.055) 1px, transparent 1px) 0 0 / 44px 44px;
  --barcode:
    repeating-linear-gradient(90deg,
      var(--blue) 0 2px, transparent 2px 5px,
      var(--blue) 5px 9px, transparent 9px 11px,
      var(--blue) 11px 12px, transparent 12px 17px,
      var(--blue) 17px 22px, transparent 22px 24px);
  --barcode-red:
    repeating-linear-gradient(90deg,
      var(--red) 0 2px, transparent 2px 5px,
      var(--red) 5px 9px, transparent 9px 11px,
      var(--red) 11px 12px, transparent 12px 17px,
      var(--red) 17px 22px, transparent 22px 24px);

  --gradient-hero: none;
  --gradient-card: linear-gradient(160deg, rgba(0, 0, 122, 0.1), rgba(0, 0, 122, 0.02));
  --gradient-cta: linear-gradient(135deg, #00007A 0%, rgba(0, 0, 122, 0.86) 100%);
  --gradient-dark:
    radial-gradient(900px 600px at 85% -20%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #00007A 0%, #00007A 100%);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-punch: cubic-bezier(.34, 1.56, .64, 1);
}

/* ==========================================================================
   DECORATIVE PRIMITIVES — the vocabulary of the rebrand
   ========================================================================== */

/* Barcode rule */
.barcode-rule {
  height: 26px;
  background-image: var(--barcode);
  opacity: .5;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.barcode-rule--red { background-image: var(--barcode-red); }

/* Ghost display type sitting behind a section */
.ghost-type {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(6rem, 17vw, 15rem);
  line-height: .8;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px rgba(0, 0, 122, 0.07);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.section--dark .ghost-type,
.cta-band .ghost-type { -webkit-text-stroke-color: rgba(255, 255, 255, 0.14); }

/* Dashed delivery route */
.route-line {
  stroke: var(--red);
  stroke-width: 3;
  stroke-dasharray: 10 12;
  stroke-linecap: round;
  fill: none;
  animation: routeMove 1.4s linear infinite;
}
@keyframes routeMove { to { stroke-dashoffset: -22; } }

/* Stamp perforation edge */
.perforated {
  --perf: 7px;
  mask-image:
    radial-gradient(circle var(--perf) at 50% 0, transparent 98%, #000 100%),
    linear-gradient(#000 0 0);
  -webkit-mask-image:
    radial-gradient(circle var(--perf) at 50% 0, transparent 98%, #000 100%),
    linear-gradient(#000 0 0);
}

/* Reading-progress bar */
.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--red);
  z-index: 300;
  pointer-events: none;
  will-change: transform;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5 {
  color: var(--ink);
  line-height: 1.02;
  margin: 0 0 .5em;
}
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.03em;
}
h1 { font-size: clamp(2.5rem, 4.9vw, 4.5rem); line-height: .92; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: .96; }
h3, h4, h5 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1em; color: var(--ink-2); }
.lede { font-size: clamp(1.08rem, 1.4vw, 1.28rem); color: var(--muted); max-width: 62ch; font-weight: 400; }
strong { font-weight: 700; }

/* Eyebrow — a red slash kicker, not a pill */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 8px;
  border-radius: 0;
  background: var(--red);
  box-shadow: none;
  flex-shrink: 0;
  transform: skewX(-18deg);
}
.section-head .eyebrow { justify-content: center; }
.section--dark .eyebrow,
.cta-band .eyebrow { color: #fff; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

.section {
  padding: clamp(72px, 10vw, 150px) 0;
  position: relative;
  overflow: hidden;
}
.section--tight { padding: clamp(48px, 6vw, 84px) 0; }

/* White section with grid paper + a red corner tick */
.section--soft {
  background-color: #fff;
  background-image: var(--grid-paper);
}
.section--soft::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--red);
  transform-origin: 0 50%;
}

/* Mute — inverted crosshatch band */
.section--mute {
  background-color: rgba(0, 0, 122, 0.045);
  background-image:
    repeating-linear-gradient(-45deg, rgba(0, 0, 122, .05) 0 1px, transparent 1px 14px);
}
.section--mute::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26px;
  background-image: var(--barcode);
  opacity: .18;
}

/* The blue slab */
.section--dark {
  background: var(--gradient-dark);
  color: rgba(255, 255, 255, .82);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: rgba(255, 255, 255, .78); }
.section--dark .lede { color: rgba(255, 255, 255, .8); }
.section--dark a { color: #fff; }
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--red);
}

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.section-head { max-width: 860px; margin: 0 auto clamp(48px, 6vw, 76px); text-align: center; }
.section-head h2 { margin-bottom: 18px; }
.section-head .lede { margin-left: auto; margin-right: auto; }
.section-head--left { margin-left: 0; text-align: left; }
.section-head--left .eyebrow { justify-content: flex-start; }

.grid { display: grid; gap: 24px; }
/* Every .grid--2 on the site holds 4 or 6 cards, so hold two real columns
   instead of letting auto-fit collapse them into a 3+1 orphan row. */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 780px) { .grid--2 { grid-template-columns: 1fr; } }

.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.row--end { justify-content: flex-end; }
.row--center { justify-content: center; }
.stack > * + * { margin-top: 1rem; }

/* ==========================================================================
   BUTTONS — squared, chunky, with a red hard shadow that snaps on hover
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 16px 26px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
  border: 2px solid transparent;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
}
.btn > * { position: relative; z-index: 2; }

/* Ripple (JS-injected span) */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  animation: ripple .55s var(--ease) forwards;
  pointer-events: none;
  z-index: 1;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* Primary — blue block, red shadow. White text stays 16.4:1 in every state. */
.btn--primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 4px 4px 0 var(--red);
}
.btn--primary:hover {
  color: #fff;
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--red);
}
.btn--primary:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--red); }

/* Secondary — outlined, fills blue on hover */
.btn--secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--blue);
  box-shadow: 4px 4px 0 rgba(0, 0, 122, .16);
}
.btn--secondary:hover {
  background: var(--blue);
  color: #fff;
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 rgba(0, 0, 122, .22);
}
.btn--secondary:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(0, 0, 122, .18); }

/* Ghost — underline grows from the left */
.btn--ghost {
  color: var(--ink);
  border-color: transparent;
  padding-inline: 12px;
}
.btn--ghost::after {
  content: "";
  position: absolute;
  inset: auto 12px 8px 12px;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .28s var(--ease);
}
.btn--ghost:hover { color: var(--ink); background: rgba(0, 0, 122, .04); }
.btn--ghost:hover::after { transform: scaleX(1); }

/* Light — for use on blue slabs */
.btn--light {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
  box-shadow: 4px 4px 0 var(--red);
}
.btn--light:hover {
  background: #fff;
  color: var(--blue);
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--red);
}
.btn--light:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--red); }

/* Outline — on blue slabs */
.btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.btn--outline:hover {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--red);
}

.btn--sm { padding: 11px 16px; font-size: .8rem; }
.btn--lg { padding: 20px 34px; font-size: 1.05rem; }

.btn .arrow { transition: transform .22s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(5px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -4px 0;
  height: 4px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .95);
  border-bottom-color: var(--blue);
  box-shadow: 0 10px 30px rgba(0, 0, 122, .07);
}
.site-header.is-scrolled::after { transform: scaleX(1); }
.header-bar {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 82px;
  transition: height .25s var(--ease);
}
.site-header.is-scrolled .header-bar { height: 68px; }

/* Brand — the real logo, breathing */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink);
  flex-shrink: 0;
  transition: transform .25s var(--ease);
}
.brand:hover { transform: translateY(-1px); }
.brand-mark {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-logo {
  height: 46px;
  width: auto;
  display: block;
  transition: height .25s var(--ease);
}
.site-header.is-scrolled .brand-logo { height: 38px; }
/* The wordmark lives inside the logo art — hide the redundant text label */
.brand > span:not(.brand-mark) {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nav — animated red underline */
.primary-nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.nav-item { position: relative; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  inset: auto 13px 4px 13px;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .28s var(--ease);
}
.nav-link:hover::after,
.nav-item:focus-within > .nav-link::after,
.nav-link.is-current::after { transform: scaleX(1); }
.nav-link:hover, .nav-item:focus-within > .nav-link { background: none; color: var(--ink); }
.nav-link.is-current { font-weight: 800; }
.nav-link .chev { width: 11px; height: 11px; opacity: .55; transition: transform .25s var(--ease); }
.nav-item:hover .chev, .nav-item:focus-within .chev { transform: rotate(180deg); opacity: 1; }

.header-spacer { flex: 1; }
.header-cta { display: flex; gap: 10px; align-items: center; }
/* The rail can't hold brand + 7 nav items + status + 2 CTAs at any width
   without crowding. "Start Shipping" already leads every hero and sits in
   the drawer, so the header keeps a single, unambiguous primary action. */
.header-cta .btn--secondary { display: none; }

/* Status pill — the DOT carries state; the label is always high-contrast blue */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 122, .06);
  color: var(--ink);
  border: 2px solid var(--line);
  white-space: nowrap;
}
.status-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.status-pill[data-status="open"] { border-color: var(--blue); background: rgba(0, 0, 122, .07); }
.status-pill[data-status="open"] .dot { background: var(--blue); animation: pulse 2s ease-out infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 122, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(0, 0, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 122, 0); }
}
.status-pill[data-status="closed"] { border-color: var(--red-line); background: var(--red-soft); }
.status-pill[data-status="closed"] .dot { background: var(--red); }
.status-pill[data-status="soon"] { border-color: var(--red-line); background: var(--red-soft); }
.status-pill[data-status="soon"] .dot { background: var(--red); animation: pulse-red 1.4s ease-out infinite; }
@keyframes pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(254, 1, 12, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(254, 1, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(254, 1, 12, 0); }
}

.hamburger {
  display: none;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--red);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.hamburger:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--red); }
.hamburger:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--red); }
.hamburger svg { width: 22px; height: 22px; }

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.mobile-drawer {
  position: fixed;
  inset: 0;
  background: #fff;
  background-image: var(--grid-paper);
  z-index: 200;
  transform: translateY(-100%);
  transition: transform .42s var(--ease);
  padding: 92px 0 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
}
.mobile-drawer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--red);
}
.mobile-drawer.is-open { transform: translateY(0); }
.mobile-drawer .drawer-close {
  position: absolute;
  top: 26px; right: 26px;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--red);
  z-index: 2;
}
.mobile-drawer .drawer-close svg { width: 22px; height: 22px; }
.mobile-drawer details { border-top: 2px solid var(--line); padding: 18px 0; }
.mobile-drawer details:last-of-type { border-bottom: 2px solid var(--line); }
.mobile-drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: 1.35rem;
  color: var(--ink);
}
.mobile-drawer summary::-webkit-details-marker { display: none; }
.mobile-drawer summary::after {
  content: "";
  width: 16px; height: 16px;
  flex-shrink: 0;
  background: var(--red);
  clip-path: polygon(44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%, 56% 100%, 44% 100%, 44% 56%, 0 56%, 0 44%, 44% 44%);
  transition: transform .3s var(--ease);
}
.mobile-drawer details[open] summary::after { transform: rotate(135deg); }
.mobile-drawer .drawer-sub { padding: 14px 0 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-drawer .drawer-sub a {
  padding: 11px 0 11px 18px;
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: 500;
  position: relative;
}
.mobile-drawer .drawer-sub a::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 8px; height: 2px;
  background: var(--red);
  transform: translateY(-50%);
  transition: width .2s var(--ease);
}
.mobile-drawer .drawer-sub a:hover::before { width: 14px; }
.mobile-drawer .drawer-link {
  display: block;
  padding: 20px 0;
  border-top: 2px solid var(--line);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.mobile-drawer .drawer-cta { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }

/* ==========================================================================
   HERO — the flagship composition
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(64px, 9vw, 118px) 0 clamp(56px, 8vw, 96px);
  background-color: #fff;
  background-image: var(--grid-paper);
  overflow: hidden;
  isolation: isolate;
}
/* Big red diagonal wedge anchoring the right edge */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -18% auto auto;
  width: 46vw;
  height: 130%;
  background: var(--red);
  opacity: .07;
  transform: skewX(-13deg);
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 8px;
  background: var(--blue);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.hero h1 { margin: 0 0 22px; }
/* Red slash under the last hero word, drawn on load */
.hero h1 .mark {
  position: relative;
  display: inline-block;
  color: var(--blue);
}
.hero h1 .mark::after {
  content: "";
  position: absolute;
  inset: auto 0 .06em 0;
  height: .13em;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: underlineIn .8s var(--ease) .5s forwards;
}
@keyframes underlineIn { to { transform: scaleX(1); } }

.hero .lede { font-size: clamp(1.08rem, 1.35vw, 1.24rem); margin-bottom: 32px; max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 500;
}
.hero-trust .ratings { display: inline-flex; gap: 2px; color: var(--red); letter-spacing: 2px; }

/* Hero visual — a blue slab with route art; cards break its bounds */
.hero-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  background: var(--gradient-dark);
  box-shadow: 16px 16px 0 var(--red);
  overflow: visible;
  isolation: isolate;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 40px);
  z-index: 0;
}
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}
.hero-art svg { width: 100%; height: 100%; display: block; }
.hero-visual .barcode-strip {
  position: absolute;
  inset: auto 22px 22px 22px;
  height: 34px;
  background-image: repeating-linear-gradient(90deg,
    #fff 0 2px, transparent 2px 5px,
    #fff 5px 9px, transparent 9px 11px,
    #fff 11px 12px, transparent 12px 17px,
    #fff 17px 22px, transparent 22px 24px);
  opacity: .5;
  z-index: 2;
}

.hero-card {
  position: absolute;
  z-index: 3;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  padding: 13px 16px;
  box-shadow: 6px 6px 0 rgba(0, 0, 122, .18);
  font-size: .88rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 260px;
}
.hero-card .icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-card .icon svg { width: 19px; height: 19px; }
.hero-card strong { display: block; font-weight: 800; letter-spacing: -.015em; }
.hero-card span { display: block; color: var(--muted); font-size: .8rem; margin-top: 1px; }
.hero-card.card-1 { top: 8%;    left: -12%;  animation: floatA 7s ease-in-out infinite; }
.hero-card.card-2 { bottom: 26%; right: -12%; animation: floatB 8s ease-in-out infinite; }
.hero-card.card-3 { bottom: -5%; left: 8%;    animation: floatA 6s ease-in-out infinite reverse; }
.hero-card.card-2 .icon { background: var(--red); }

@keyframes floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* Hero stat strip */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px;
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--line);
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-stat { background: #fff; padding: 22px 24px; }
.hero-stat .num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1;
  color: var(--blue);
  letter-spacing: -.03em;
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.hero-stat .num .suffix { color: var(--red); }
.hero-stat .label {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-top: 8px;
}

/* Carrier marquee — an infinite freight ticker on a blue rail */
.hero-marquee {
  margin-top: clamp(36px, 5vw, 56px);
  border: 0;
  border-top: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  padding: 0;
  display: block;
  overflow: hidden;
  background: var(--blue);
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Two identical groups, each carrying its own trailing gap, so the track is
   exactly 2x one group and -50% lands precisely on the seam. */
.marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  padding: 18px 0;
  animation: marquee 34s linear infinite;
  will-change: transform;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 52px);
  padding-right: clamp(28px, 4vw, 52px);
  flex-shrink: 0;
}
.hero-marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.hero-marquee span {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}
.hero-marquee .carrier {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.hero-marquee .sep-star {
  color: var(--red);
  font-size: 1.1rem;
  -webkit-text-stroke: 0;
}

/* Third-party review widget shell */
.hero-reviews, .reviews-carousel { position: relative; z-index: 1; }
.reviews-carousel {
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 10px 10px 0 rgba(0, 0, 122, .1);
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Red bar wipes down the left edge on hover */
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .32s var(--ease);
}
.card:hover {
  transform: translate(-4px, -6px);
  box-shadow: 10px 12px 0 rgba(0, 0, 122, .13);
  border-color: var(--blue);
}
.card:hover::before { transform: scaleY(1); }
.card .icon-tile {
  width: 54px; height: 54px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 0;
  box-shadow: 4px 4px 0 var(--red-soft);
  transition: transform .3s var(--ease-punch), box-shadow .3s var(--ease);
}
.card:hover .icon-tile { transform: rotate(-6deg) scale(1.06); box-shadow: 5px 5px 0 var(--red); }
.card .icon-tile svg { width: 25px; height: 25px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); margin-bottom: 18px; }

.card-cta {
  font-weight: 800;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.card-cta span { color: var(--red); transition: transform .22s var(--ease); display: inline-block; }
.card-cta:hover { gap: 8px; color: var(--ink); }
.card-cta:hover span { transform: translateX(6px); }

.card--featured {
  background: var(--gradient-dark);
  border-color: var(--blue);
  color: rgba(255, 255, 255, .82);
  box-shadow: 8px 8px 0 var(--red);
}
.card--featured:hover { box-shadow: 14px 16px 0 var(--red); border-color: var(--blue); }
.card--featured h3 { color: #fff; }
.card--featured p { color: rgba(255, 255, 255, .78); }
.card--featured .icon-tile { background: #fff; color: var(--blue); box-shadow: 4px 4px 0 rgba(255, 255, 255, .25); }
.card--featured:hover .icon-tile { box-shadow: 5px 5px 0 var(--red); }
.card--featured .card-cta { color: #fff; }
.card--featured .card-cta span { color: #fff; }
.card--featured::before { background: var(--red); }

/* Persona cards — stamp-like, numbered */
.persona-card {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease;
  min-height: 240px;
  overflow: hidden;
  isolation: isolate;
}
.persona-card::after {
  content: "";
  position: absolute;
  inset: auto -30px -30px auto;
  width: 96px; height: 96px;
  background: var(--red);
  opacity: .07;
  transform: rotate(45deg);
  transition: transform .4s var(--ease), opacity .3s ease;
}
.persona-card:hover {
  transform: translate(-4px, -6px);
  box-shadow: 10px 12px 0 rgba(0, 0, 122, .13);
  border-color: var(--blue);
}
.persona-card:hover::after { transform: rotate(45deg) scale(1.35); opacity: .12; }
/* Cards flipped to the blue slab via inline style: translucent red over blue
   reads purple, so tint with white (a legal lighter blue) instead. */
.persona-card[style*="gradient-dark"]::after,
.card[style*="gradient-dark"]::after { background: #fff; opacity: .1; }
.persona-card .tag {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  background: var(--blue);
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  align-self: flex-start;
  margin-bottom: 16px;
}
.persona-card h3 { font-size: 1.22rem; }
.persona-card p { color: var(--muted); margin: 0; flex: 1; }
.persona-card .card-cta { margin-top: 20px; }

/* ==========================================================================
   FEATURE / BULLET LISTS
   ========================================================================== */
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.feature-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: var(--ink-2);
  padding: 18px 0;
  border-bottom: 2px solid var(--line);
  transition: padding-left .25s var(--ease);
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list li:hover { padding-left: 8px; }
.feature-list .check {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: background .25s ease, transform .25s var(--ease-punch);
}
.feature-list li:hover .check { background: var(--red); transform: rotate(-8deg); }
.feature-list .check svg { width: 15px; height: 15px; }
.feature-list li strong { display: block; color: var(--ink); margin-bottom: 3px; font-weight: 800; letter-spacing: -.015em; }
.feature-list li span { color: var(--muted); font-size: .94rem; }

.bullet-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.bullet-list li { padding-left: 28px; position: relative; color: var(--ink-2); }
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 8px;
  border-radius: 0;
  background: var(--red);
  box-shadow: none;
  transform: skewX(-18deg);
}
.section--dark .bullet-list li { color: rgba(255, 255, 255, .82); }

/* ==========================================================================
   PROBLEM / SOLUTION SPLIT
   ========================================================================== */
.split { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); }
.split-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.split-card h3 { font-size: 1.3rem; margin-bottom: 22px; }
.split-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.split-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-2);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.split-card ul li:last-child { border-bottom: 0; }

.split-card.problem {
  background: #fff;
  border-color: var(--red-line);
  box-shadow: 8px 8px 0 var(--red-soft);
}
.split-card.problem::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--red);
}
.split-card.problem li::before {
  content: "";
  width: 14px; height: 3px;
  background: var(--red);
  flex-shrink: 0;
  margin-top: 11px;
}
.split-card.solution {
  background: var(--gradient-dark);
  border-color: var(--blue);
  box-shadow: 8px 8px 0 rgba(0, 0, 122, .18);
}
.split-card.solution h3 { color: #fff; }
.split-card.solution ul li { color: rgba(255, 255, 255, .86); border-bottom-color: rgba(255, 255, 255, .14); }
.split-card.solution li::before {
  content: "✓";
  color: #fff;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 3px;
}

/* ==========================================================================
   STEPS — big ghosted numerals
   ========================================================================== */
.steps { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .25s ease;
}
.step:hover { transform: translate(-3px, -5px); box-shadow: 8px 10px 0 rgba(0, 0, 122, .12); border-color: var(--blue); }
.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 18px;
  box-shadow: 4px 4px 0 var(--red);
}
.step h4 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; }
.faq-item {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s var(--ease);
}
.faq-item:hover, .faq-item[open] { border-color: var(--blue); box-shadow: 6px 6px 0 rgba(0, 0, 122, .1); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
  letter-spacing: -.015em;
  transition: background .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(0, 0, 122, .04); }
.faq-item summary::after {
  content: "";
  width: 16px; height: 16px;
  flex-shrink: 0;
  background: var(--red);
  clip-path: polygon(44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%, 56% 100%, 44% 100%, 44% 56%, 0 56%, 0 44%, 44% 44%);
  border: 0;
  transform: none;
  transition: transform .3s var(--ease);
  margin-left: 0;
}
.faq-item[open] summary { background: rgba(0, 0, 122, .04); }
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item .faq-body {
  padding: 0 26px 26px;
  color: var(--muted);
  animation: faqIn .3s var(--ease);
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   CTA BAND — full blue slab with ghost type + route art
   ========================================================================== */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--gradient-dark);
  color: rgba(255, 255, 255, .82);
  padding: clamp(48px, 7vw, 88px);
  overflow: hidden;
  isolation: isolate;
  border: 2px solid var(--blue);
  box-shadow: 16px 16px 0 var(--red);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 46px);
  z-index: -1;
}
/* Solid, never translucent: red at partial opacity over blue blends to
   purple — a fourth hue. Keep red crisp and geometric on blue surfaces. */
.cta-band::after {
  content: "";
  position: absolute;
  inset: auto -70px -70px auto;
  width: 260px; height: 260px;
  background: var(--red);
  transform: rotate(45deg);
  z-index: -1;
}
.cta-band h2 { color: #fff; margin-bottom: 16px; max-width: 20ch; }
.cta-band p { color: rgba(255, 255, 255, .82); max-width: 54ch; margin-bottom: 30px; font-size: 1.05rem; }
.cta-band .row { gap: 14px; }

/* ==========================================================================
   CONTACT INFO
   ========================================================================== */
.info-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.info-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--red);
}
.info-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.info-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: 0; }
.info-row .ico {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .22s ease, transform .22s var(--ease-punch);
}
.info-row:hover .ico { background: var(--red); transform: rotate(-8deg); }
.info-row .ico svg { width: 19px; height: 19px; }
.info-row strong { display: block; font-weight: 800; letter-spacing: -.015em; }
.info-row span { display: block; color: var(--muted); font-size: .92rem; }
.info-row a { color: var(--ink-2); font-weight: 600; }
.info-row a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 2px; }

.hours-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours-table td { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-weight: 500; }
.hours-table td:last-child { text-align: right; color: var(--muted); }
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table tr.today td { color: var(--ink); font-weight: 800; }
.hours-table tr.today td:first-child { position: relative; padding-left: 20px; }
.hours-table tr.today td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 4px;
  background: var(--red);
  transform: translateY(-50%) skewX(-18deg);
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 22px 0 0;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--red); font-weight: 800; }

/* ==========================================================================
   SUBHERO — every interior page gets the editorial treatment
   ========================================================================== */
.subhero {
  position: relative;
  padding: clamp(44px, 6vw, 76px) 0 clamp(52px, 7vw, 88px);
  background-color: #fff;
  background-image: var(--grid-paper);
  border-bottom: 8px solid var(--blue);
  overflow: hidden;
  isolation: isolate;
}
.subhero::before {
  content: "";
  position: absolute;
  inset: -20% -14% auto auto;
  width: 40vw; height: 150%;
  background: var(--red);
  opacity: .06;
  transform: skewX(-13deg);
  z-index: -1;
}
.subhero::after {
  content: "";
  position: absolute;
  inset: auto 0 24px auto;
  width: 34%;
  height: 30px;
  background-image: var(--barcode);
  opacity: .12;
  z-index: -1;
}
.subhero h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); margin-bottom: 0; }
.subhero .lede { margin: 22px 0 30px; }
.subhero-meta {
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.subhero-meta .pip { width: 8px; height: 8px; border-radius: 0; background: var(--red); transform: skewX(-18deg); }

/* ==========================================================================
   COMPARE TABLE
   ========================================================================== */
.compare {
  background: var(--surface);
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 10px 10px 0 rgba(0, 0, 122, .1);
}
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td {
  padding: 17px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: .94rem;
}
.compare-table thead th {
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.compare-table tbody tr { transition: background .2s ease; }
.compare-table tbody tr:hover { background: rgba(0, 0, 122, .04); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table .cname { font-weight: 800; color: var(--ink); letter-spacing: -.015em; }

/* ==========================================================================
   FOOTER — its own designed section
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--blue);
  color: rgba(255, 255, 255, .74);
  padding: 0 0 32px;
  overflow: hidden;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 10px;
  background: var(--red);
  z-index: 2;
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 46px);
  z-index: -1;
  pointer-events: none;
}
.site-footer > .container { padding-top: clamp(64px, 8vw, 104px); }
.site-footer h4 {
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, .16);
  position: relative;
}
.site-footer h4::after {
  content: "";
  position: absolute;
  inset: auto auto -2px 0;
  width: 32px; height: 2px;
  background: var(--red);
}
.site-footer a {
  color: rgba(255, 255, 255, .74);
  display: block;
  padding: 7px 0;
  font-size: .93rem;
  font-weight: 500;
  position: relative;
  width: fit-content;
  transition: color .2s ease, transform .2s var(--ease);
}
.site-footer a::before {
  content: "";
  position: absolute;
  inset: 50% 100% auto auto;
  width: 0; height: 2px;
  background: var(--red);
  transform: translateY(-50%);
  transition: width .2s var(--ease);
}
.site-footer a:hover { color: #fff; transform: translateX(12px); }
.site-footer a:hover::before { width: 8px; margin-right: 4px; }

.footer-grid {
  display: grid;
  gap: 44px;
  grid-template-columns: 1.5fr repeat(4, 1fr);
}
.footer-brand .brand { color: #fff; margin-bottom: 20px; }
.footer-brand .brand:hover { transform: none; }
.footer-brand .brand-logo { height: 58px; }
.footer-brand p { color: rgba(255, 255, 255, .68); max-width: 34ch; font-size: .94rem; margin: 0 0 20px; }
.footer-brand .brand::before,
.footer-brand a.brand::before { display: none; }
.footer-brand a.brand:hover { transform: none; }

.footer-info { display: grid; gap: 7px; font-size: .93rem; color: rgba(255, 255, 255, .68); }
.footer-info strong { color: #fff; font-weight: 700; }
/* Live "today" line — JS fills the inner span each minute */
.footer-today { color: #fff; font-weight: 700; }
.footer-today [data-hours-today] { color: rgba(255, 255, 255, .68); font-weight: 500; }

/* Footer hours — inverted, with today's row called out in red */
.footer-hours {
  margin-top: 22px;
  font-size: .88rem;
  max-width: 320px;
}
.footer-hours caption {
  text-align: left;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: 10px;
}
.footer-hours td {
  color: rgba(255, 255, 255, .68);
  border-bottom-color: rgba(255, 255, 255, .12);
  padding: 9px 0;
}
.footer-hours td:last-child { color: rgba(255, 255, 255, .6); }
.footer-hours tr.today td { color: #fff; font-weight: 800; }
.footer-hours tr.today td:first-child::before { background: var(--red); }

.site-footer .social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 0; }
.site-footer .social-row a.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .18);
  padding: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease), box-shadow .2s var(--ease);
}
.site-footer .social-row a.social-link::before { display: none; }
.site-footer .social-row a.social-link:hover {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--red);
}
.site-footer .social-row a.social-link svg { width: 19px; height: 19px; }

/* Footer newsletter / visit CTA */
.footer-cta {
  margin-top: clamp(48px, 6vw, 72px);
  padding: 32px;
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, .04);
  position: relative;
  overflow: hidden;
}
.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--red);
}
.footer-cta h3 {
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -.025em;
  margin: 0 0 6px;
}
.footer-cta p { color: rgba(255, 255, 255, .7); margin: 0; font-size: .95rem; }
.footer-cta .row { flex-shrink: 0; }
.footer-cta a { display: inline-flex; padding: 16px 26px; }
.footer-cta a:hover { transform: translate(-3px, -3px); }
.footer-cta a::before { display: none; }

/* `.site-footer a` (0,1,1) outranks `.btn--light` (0,1,0) and would paint the
   label white on a white button. Restate button colors at higher specificity. */
.site-footer .btn--light { color: var(--blue); }
.site-footer .btn--light:hover { color: var(--blue); }
.site-footer .btn--outline { color: #fff; }
.site-footer .btn--outline:hover { color: var(--blue); }

/* Giant footer wordmark */
.footer-wordmark {
  margin-top: clamp(48px, 6vw, 72px);
  font-family: var(--font-display);
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: .8;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .16);
  text-align: center;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

.footer-bottom {
  border-top: 2px solid rgba(255, 255, 255, .14);
  margin-top: 40px;
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .58);
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* The generic `.site-footer a` is a block-level column link with a slide-right
   hover — wrong inside this inline bar. Reset it to a red-underlined inline link. */
.footer-bottom a {
  display: inline;
  width: auto;
  padding: 0;
  font-size: inherit;
  font-weight: 800;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}
.footer-bottom a::before { display: none; }
.footer-bottom a:hover {
  transform: none;
  color: #fff;
  text-decoration-color: #fff;
}

/* ==========================================================================
   IMAGE PRESENTATION — framed, offset, layered
   ========================================================================== */
.img-frame {
  position: relative;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 14px 14px 0 var(--red);
  background: var(--bg-soft);
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.img-frame--tilt { transform: rotate(-1.6deg); transition: transform .4s var(--ease); }
.img-frame--tilt:hover { transform: rotate(0deg) scale(1.01); }
.img-stack { position: relative; }
.img-stack .img-frame + .img-frame {
  position: absolute;
  inset: auto -8% -14% auto;
  width: 52%;
  box-shadow: 10px 10px 0 var(--blue);
  border-color: var(--blue);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.muted { color: var(--muted); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 28px !important; }
.mt-4 { margin-top: 28px !important; }
.tight { letter-spacing: -.025em; }
.kbd {
  display: inline-block;
  padding: 3px 9px;
  font-size: .82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #fff;
  border: 2px solid var(--line);
  border-bottom-width: 3px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 600;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--blue);
  color: #fff;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
}
.badge--warn { background: #fff; color: var(--ink); border: 2px solid var(--red); padding: 4px 9px; }
.badge--success { background: var(--blue); color: #fff; }

.notice {
  background: #fff;
  border: 2px solid var(--line);
  border-left: 6px solid var(--red);
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  color: var(--muted);
}

.metric {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .25s ease;
}
.metric:hover { transform: translate(-3px, -5px); box-shadow: 8px 10px 0 rgba(0, 0, 122, .12); border-color: var(--blue); }
.metric .num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 2.9rem);
  letter-spacing: -.035em;
  color: var(--ink);
  line-height: 1;
}
.metric .label {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 10px;
}

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
/* Scoped to .js (set by an inline head script): if scripting is unavailable or
   main.js fails, every section stays visible instead of the page rendering blank. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.js [data-reveal-delay="100"] { transition-delay: .1s; }
.js [data-reveal-delay="200"] { transition-delay: .2s; }
.js [data-reveal-delay="300"] { transition-delay: .3s; }
.js [data-reveal-delay="400"] { transition-delay: .4s; }

/* ==========================================================================
   RESPONSIVE — recompose, never just stack
   ========================================================================== */
/* The header carries brand + 4 nav items + status + 2 CTAs. Shed the
   lowest-value pieces first, in order, so the primary CTA is never clipped. */
@media (max-width: 1180px) {
  .nav-link { padding: 10px 9px; font-size: .85rem; }
  .primary-nav { gap: 0; margin-left: 0; }
  .nav-link::after { inset: auto 9px 4px 9px; }
  .header-bar { gap: 14px; }
}
@media (max-width: 1060px) {
  .header-cta .status-pill { display: none; } /* hours also live in the footer */
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .footer-grid > div:last-child { grid-column: 2 / -1; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Type leads on narrow screens — the headline is the hook, not the artwork. */
  .hero-visual { order: 0; max-width: 520px; margin: 8px auto 0; width: 100%; box-shadow: 10px 10px 0 var(--red); }
  .hero-card { max-width: 220px; font-size: .82rem; }
  .hero-card.card-1 { left: -4%; }
  .hero-card.card-2 { right: -4%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .split { grid-template-columns: 1fr; }
  /* Interior pages set 2-col via inline styles — collapse them here.
     minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), and the auto floor
     won't shrink below the content's min-content width — which let wide children
     (e.g. the hours table) push the column past the container on narrow screens. */
  .grid[style*="1fr 1fr"],
  .grid[style*="1.1fr .9fr"],
  .grid[style*="1fr 1.2fr"] { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
}
/* Below this the nav can't breathe — hand small tablets and phones the
   drawer, which is a better target size than a cramped rail anyway. */
@media (max-width: 900px) {
  .primary-nav, .header-cta .status-pill, .header-cta .btn--secondary { display: none; }
  .hamburger { display: inline-flex; }
  .mobile-drawer { display: block; }
  .header-cta .btn--primary { padding: 11px 16px; font-size: .8rem; }
  .header-bar { height: 72px; }
  .site-header.is-scrolled .header-bar { height: 64px; }
}
@media (max-width: 640px) {
  .container, .container-narrow { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .header-bar { gap: 12px; }
  .brand-logo { height: 38px; }
  .site-header.is-scrolled .brand-logo { height: 34px; }
  .section { padding: 72px 0; }
  .hero { padding-top: 48px; }
  /* Three cards on a ~335px canvas bury the artwork. The whole visual is
     aria-hidden decoration, so keep one card for life and drop the rest. */
  .hero-card.card-1, .hero-card.card-3 { display: none; }
  .hero-card.card-2 {
    right: -10px; bottom: 14%;
    max-width: 200px;
    animation: none;
  }
  .card, .persona-card, .split-card, .step, .info-card { padding: 24px; }
  .cta-band { box-shadow: 8px 8px 0 var(--red); }
  .hero-visual { box-shadow: 8px 8px 0 var(--red); }
  .footer-cta a { width: 100%; }
  .footer-cta .row { width: 100%; }
  /* Ragged button widths read as sloppy at this size — go full-bleed. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .cta-band .row { flex-direction: column; align-items: stretch; }
  .cta-band .row .btn { width: 100%; }
  /* Keep tables readable */
  .compare { overflow-x: auto; }
  .compare-table { min-width: 560px; }
}
@media (max-width: 420px) {
  .hero-card { max-width: 180px; padding: 10px 12px; }
  .hero-card .icon { width: 30px; height: 30px; }
  .hero-card .icon svg { width: 15px; height: 15px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero h1 .mark::after { transform: scaleX(1); }
  .marquee-track { animation: none; }
  .scroll-progress { display: none; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .site-header, .site-footer, .hero-visual, .cta-band, .mobile-drawer,
  .scroll-progress, .hero-marquee, .ghost-type, .footer-wordmark { display: none !important; }
  body { color: #000; background: #fff; }
  * { box-shadow: none !important; }
}

/* ==========================================================================
   TEMPLE SHIPS — components specific to the shipping site
   Everything above this line is the Pack N Mail design system, trimmed to
   the parts this five-page site uses. Everything below extends it using the
   same three colors, the same hard-offset shadows, and the same type scale.
   ========================================================================== */

/* -- Skip link ------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -200px;
  z-index: 400;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 20px;
  box-shadow: 4px 4px 0 var(--red);
  transition: top .18s var(--ease);
}
.skip-link:focus-visible { top: 12px; color: #fff; }

/* -- Brand lockup: TEMPLE SHIPS over "by Pack N Mail" ----------------------
   The parent site hides the brand text because its logo already reads
   "Pack N Mail". Here the site is named Temple Ships, so the wordmark has to
   be visible beside the logo — this undoes the visually-hidden treatment. */
.brand > span:not(.brand-mark) {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  border: 0;
}
.brand-words { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-by {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer .brand-name { color: #fff; }
.site-footer .brand-by { color: rgba(255, 255, 255, .66); }
.brand > span:not(.brand-mark) { font-family: inherit; font-size: inherit; letter-spacing: normal; white-space: nowrap; }

/* This rail carries 4 nav items, not 7, so the phone CTA can stay on wide
   screens. Shed it, then the status pill, before anything can overflow the
   1240px container: brand + nav + pill + both CTAs does not fit. */
.header-cta .btn--secondary { display: inline-flex; }
@media (max-width: 1559px) { .header-cta .status-pill { display: none; } }
@media (max-width: 1459px) { .header-cta .btn--secondary { display: none; } }

/* The hero trust line is a sentence, not a row of chips. */
.hero-trust { display: block; line-height: 1.7; }
.hero-trust a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* -- Inline links in prose -------------------------------------------------
   Body copy and link copy are both --ink, so a link inside a paragraph would
   be distinguished by nothing at all. Underline every in-text link (WCAG 1.4.1
   Use of Color), while leaving buttons, card CTAs and chrome links alone. */
main p a, main li a, main dd a, main .faq-body a, main .answer a,
.footer-bottom a {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}
main p a.btn, main li a.btn, main p a.card-cta, main li a.card-cta,
main .place-list a, main p a.social-link {
  text-decoration: none;
}
main p a:hover, main li a:hover, main dd a:hover,
main .faq-body a:hover, main .answer a:hover {
  text-decoration-thickness: 3px;
}
.section--dark p a, .section--dark li a, .cta-band p a { text-decoration-color: #fff; }

/* -- Sticky action bar (mobile) -------------------------------------------- */
.action-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 180;
  display: none;
  border-top: 3px solid var(--red);
  background: #fff;
  box-shadow: 0 -8px 24px rgba(0, 0, 122, .14);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 60px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: -.01em;
  text-align: center;
}
.action-bar__btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.action-bar__btn--call { background: #fff; color: var(--ink); border-right: 2px solid var(--line); }
.action-bar__btn--map { background: var(--blue); color: #fff; }
.action-bar__btn--map:hover, .action-bar__btn--map:focus-visible { color: #fff; }
.action-bar__btn:active { transform: translateY(1px); }

/* -- Drawer: hidden means hidden, at every width --------------------------- */
.mobile-drawer[hidden] { display: none; }
.drawer-note {
  margin: 26px 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.6;
}

/* -- Footer headings (h2 for document outline, styled as the old h4) ------- */
.footer-head {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 22px;
  position: relative;
  padding-bottom: 12px;
}
.footer-head::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 34px;
  height: 3px;
  background: var(--red);
}

/* -- Answer block — the answer-first paragraph under a question heading ---- */
.answer {
  position: relative;
  background: var(--bg-soft);
  border-left: 5px solid var(--red);
  padding: 22px 26px;
  margin: 0 0 26px;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 68ch;
}
.answer strong { color: var(--ink); font-weight: 800; }
.answer :last-child { margin-bottom: 0; }
.section--dark .answer {
  background: rgba(255, 255, 255, .08);
  border-left-color: var(--red);
  color: rgba(255, 255, 255, .88);
}
.section--dark .answer strong { color: #fff; }

/* -- Carrier tiles — wordmarks set in the site's own type, never carrier
      logos, so nothing implies an official carrier affiliation ------------- */
.carrier-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.carrier-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s ease;
}
.carrier-tile:hover {
  transform: translate(-4px, -6px);
  box-shadow: 10px 12px 0 rgba(0, 0, 122, .13);
  border-color: var(--blue);
}
.carrier-tile__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 96px;
  padding: 11px 16px;
  margin-bottom: 18px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.16rem;
  letter-spacing: .02em;
  box-shadow: 4px 4px 0 var(--red);
}
.carrier-tile:hover .carrier-tile__mark { box-shadow: 6px 6px 0 var(--red); }
.carrier-tile__best {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.carrier-tile h3 { font-size: 1.12rem; margin: 0 0 12px; letter-spacing: -.02em; }
.carrier-tile p { color: var(--muted); margin: 0 0 18px; font-size: .95rem; }
.carrier-tile .card-cta { margin-top: auto; }

/* -- Fact rail — the plain, machine-readable summary of the business ------- */
.fact-rail {
  display: grid;
  gap: 0;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.fact-rail__row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.fact-rail__row:last-child { border-bottom: 0; }
.fact-rail__row dt {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.fact-rail__row dd { margin: 0; font-weight: 600; color: var(--ink); }
.fact-rail__row dd a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* -- Map ------------------------------------------------------------------- */
.map-frame {
  position: relative;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: 10px 10px 0 var(--red);
  overflow: hidden;
  background: var(--bg-mute);
  aspect-ratio: 4 / 3;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Facade: the real Google embed only loads when the visitor asks for it, so
   the page makes no third-party request (and sets no third-party cookie)
   unless they opt in. */
.map-facade {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 30px;
  text-align: center;
  background-color: var(--bg-mute);
  background-image: var(--grid-paper);
  color: var(--ink);
  transition: background-color .2s ease;
}
.map-facade:hover { background-color: rgba(0, 0, 122, .1); }
.map-facade__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--blue);
  color: #fff;
  box-shadow: 5px 5px 0 var(--red);
}
.map-facade__pin svg { width: 26px; height: 26px; }
.map-facade__text { display: grid; gap: 5px; }
.map-facade__text strong { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: -.01em; }
.map-facade__text span { color: var(--muted); font-size: .92rem; }
.map-facade__action {
  margin-top: 8px;
  font-weight: 800;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
@media (max-width: 640px) { .map-frame { aspect-ratio: 3 / 2; box-shadow: 8px 8px 0 var(--red); } }

/* -- Nearby communities ---------------------------------------------------- */
.place-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.place-list li {
  border: 2px solid var(--line);
  padding: 9px 15px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-2);
  background: #fff;
}
.place-list li.is-home { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 3px 3px 0 var(--red); }

/* -- Checklist ------------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: ck; }
.checklist li {
  position: relative;
  padding-left: 42px;
  color: var(--ink-2);
  line-height: 1.55;
}
.checklist li::before {
  counter-increment: ck;
  content: counter(ck);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
}
.checklist li strong { display: block; color: var(--ink); font-weight: 800; letter-spacing: -.015em; }
.section--dark .checklist li { color: rgba(255, 255, 255, .84); }
.section--dark .checklist li strong { color: #fff; }
.section--dark .checklist li::before { background: #fff; color: var(--blue); }

/* -- Scoped table wrapper for long comparison tables ----------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.table-note { font-size: .88rem; color: var(--muted); margin: 14px 0 0; }

/* -- Not-found page -------------------------------------------------------- */
.nf { text-align: center; padding: clamp(70px, 12vw, 150px) 0; }
.nf h1 { margin-bottom: 18px; }
.nf .row { justify-content: center; }
.nf-links { margin-top: 42px; }

/* -- Responsive adjustments for the above ---------------------------------- */
@media (max-width: 900px) {
  .action-bar { display: flex; }
  /* Reserve room so the bar never covers the last line of the footer. */
  body { padding-bottom: 62px; }
  .fact-rail__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 20px; }
  /* Both actions live in the sticky bar from here down, so the header rail
     is just the brand and the menu — which is the only way the full
     "Temple Ships by Pack N Mail" lockup fits on a phone. */
  .header-cta .btn--primary { display: none; }
}
@media (max-width: 640px) {
  .carrier-tile { padding: 24px; }
  .answer { padding: 18px 20px; font-size: 1rem; }
  .action-bar__btn { font-size: .84rem; gap: 7px; }
  .brand { gap: 10px; }
  .brand-name { font-size: 1rem; }
  .brand-by { font-size: .58rem; letter-spacing: .14em; }
}
@media (max-width: 380px) {
  .brand-logo { height: 32px; }
  .brand-name { font-size: .92rem; }
  .action-bar__btn { font-size: .78rem; }
}

@media print {
  .action-bar, .skip-link { display: none !important; }
}

/* -- Footer: areas band ----------------------------------------------------
   A full-width row rather than a fifth column: twelve town links do not fit
   a narrow footer column, and every city page deserves a sitewide link. */
.footer-areas {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 34px;
  border-top: 2px solid rgba(255, 255, 255, .16);
}
.footer-areas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px 26px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.footer-areas a { display: block; }

/* -- Areas hub: town cards ------------------------------------------------- */
.area-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s ease;
}
.area-card:hover {
  transform: translate(-4px, -6px);
  box-shadow: 10px 12px 0 rgba(0, 0, 122, .13);
  border-color: var(--blue);
}
.area-card--home { background: var(--gradient-dark); border-color: var(--blue); }
.area-card--home h3, .area-card--home p { color: #fff; }
.area-card--home p { color: rgba(255, 255, 255, .8); }
.area-card--home .area-card__tag { background: #fff; color: var(--blue); }
.area-card--home .card-cta, .area-card--home .card-cta span { color: #fff; }
.area-card__tag {
  align-self: flex-start;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 11px;
  margin-bottom: 16px;
}
.area-card h3 { font-size: 1.16rem; margin: 0 0 9px; letter-spacing: -.02em; }
.area-card p { color: var(--muted); font-size: .93rem; margin: 0 0 18px; flex: 1; }
.area-card .card-cta { margin-top: auto; }

/* -- City page: the route strip -------------------------------------------- */
.route-strip {
  display: grid;
  gap: 0;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 8px 8px 0 rgba(0, 0, 122, .1);
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
}
.route-strip > div {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
}
.route-strip > div:last-child { border-right: 0; }
.route-strip dt {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.route-strip dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.04rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}
.route-strip dd small { display: block; font-family: var(--font-body); font-size: .82rem; font-weight: 500; color: var(--muted); margin-top: 5px; letter-spacing: 0; }

@media (max-width: 760px) {
  .route-strip { grid-template-columns: 1fr; }
  .route-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .route-strip > div:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  .area-card { padding: 22px; }
  .footer-areas ul { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* -- Holiday closure table ------------------------------------------------- */
.holiday-table { border: 2px solid var(--line); border-radius: var(--radius); }
.holiday-table td { padding: 13px 18px; }
.holiday-table td:first-child { font-weight: 700; color: var(--ink); }
.holiday-table tr:nth-child(odd) td { background: var(--bg-soft); }
.footer-holidays { margin: 12px 0 0; font-size: .86rem; color: rgba(255, 255, 255, .62); }
.footer-holidays a { display: inline; color: #fff; }
.footer-holidays a::before { display: none; }
.footer-holidays a:hover { transform: none; }