/* Fonts are loaded from a <link> in the head: an @import here could not
   start downloading until this file had been fetched and parsed, which put
   the webfonts a whole round trip behind. */

:root {
  --paper: #f5f3ee;
  --paper2: #edeae2;
  --ink: #0f141a;
  --ink2: #39424d;
  --steel: #5a6572; /* 5.3:1 on paper */
  --star: #f5a623; /* review stars */
  --black-btn: #000000;
  --blue: #1e7fd8; /* large text & decor */
  --blue-btn: #155fa8; /* button fill — 6.5:1 w/ white */
  --blue-ink: #155fa8; /* blue text; splits from the fill in dark mode */
  --blue-deep: #0f4a85;
  --orange: #e6531f; /* large display accents only */
  --orange-btn: #c8430f; /* 4.9:1 w/ white */
  --orange-text: #b53c0d; /* 5.2:1 on paper — small text */
  --orange-hot: #ff6a2c; /* 6.6:1 on dark */
  --line: rgba(15, 20, 26, 0.12);
  /* the dashed ledger and label rules: heavier than --line so a 1.4px dash
     reads, lighter than --btn-line, which is tuned for control outlines */
  --rule-dash: rgba(15, 20, 26, 0.3);
  --dark: #0d1218;
  --dark2: #131a22;
  --dark-line: rgba(255, 255, 255, 0.09);
  --dk-body: #9fb0c2; /* 8.5:1 on dark */
  --dk-note: #8b9aab; /* 6.1:1 on dark2 */
  --dk-label: #7d8ea0; /* 5.2:1 on dark2 */
  /* for type on a surface that is a literal white in BOTH themes — the county
     chips go white on hover whichever theme is on, so their label cannot read
     from --blue-deep, which now lifts in dark mode. No dark override on
     purpose: the surface does not change, so neither does this. 9.0:1. */
  --blue-on-white: #0f4a85;
  --focus: #155fa8;
  /* card/control surface on light bands, and the always-dark chip colour.
     both are remapped for dark mode below */
  --surface: #ffffff;
  --nav-scrim: rgba(245, 243, 238, 0.92);
  --wash: rgba(255, 255, 255, 0.7);
  --ink-solid: #0f141a;
  /* the air a call to action gets: --cta-top above a cluster that closes a
     block, --cta-gap between a closing note and the button under it. One pair
     for the whole page, so no two sections part with their buttons
     differently. Cards and dividers keep their own spacing — this is the gap
     around a CTA, not a general rhythm. */
  --cta-top: 40px;
  --cta-gap: 20px;
  /* section-header rhythm — one set of values for every section, both
     breakpoints. kicker -> h2 -> sub -> content. */
  --head-kicker-gap: 16px;
  --head-sub-gap: 18px;
  --head-content-gap: 54px;
  /* outline for controls with no fill. Must clear 3:1 against the page
     (WCAG 1.4.11) — --line is a divider hairline and is far too faint. */
  --btn-line: rgba(15, 20, 26, 0.5);
  /* native scrollbars and form controls follow the theme */
  color-scheme: light;
  /* corner radius scale — four steps, no one-offs.
     The page is squircled: every rule that sets --r-md, --r-lg or --r-full
     carries `corner-shape: squircle` beside it, and so does every rounded
     shape outside the scale — the 50% circles (avatars, step marks, the
     signature disc) and the two one-off radii (.ss-egg, .float-call). Match
     that whenever you add a rounded thing bigger than a hairline.
     Note what it does at --r-full: the radius clamps to half the shorter
     side, and a superellipse there stops making semicircular end caps, so
     buttons and chips take a squarer cap than a true pill — that is the
     intent, not a clamping artefact. At 50% it is the same story squared up:
     a circle becomes an actual squircle.
     What stays round: --r-xs and the 1-2px hairlines, where the curve is too
     small to tell apart either way. A browser without corner-shape ignores
     the declaration and keeps the ordinary corner, so nothing depends on
     any of it. */
  --r-xs: 6px; /* small details: tags, ribbons, focus rings, legend swatches */
  --r-md: 12px; /* inputs, chips, skip link, images inside cards */
  --r-lg: 20px; /* cards, panels, spec grids, maps — the workhorse */
  --r-full: 999px; /* pills: buttons, tabs, county chips, capacity bars */
  /* type scale — five steps, no one-offs, same idea as the radius scale.
     It covers 10-17px, which is where every label, caption, note and body
     string on the site lives; above that, headings size themselves with
     clamp() and are not on a ladder. Fine steps at the bottom because five
     distinct label roles live between 10 and 13px — a ratio scale would make
     them collide. */
  --t-xs: 10.5px; /* micro-label: captions, stamps, badges, cues */
  --t-sm: 11.5px; /* tight display labels: nav, kickers, stat captions */
  --t-md: 12.5px; /* the standard display label: chips, tabs, menu links */
  --t-lg: 14px; /* buttons, notes, card copy — the workhorse */
  --t-xl: 16px; /* reading text, and pinned here: under 16px iOS zooms a focused field */
  /* the micro-label's two trackings. A label attached to something (a caption,
     a badge) sits tighter than one standing on its own (a stamp, a divider). */
  --label-track: 0.14em;
  --label-track-wide: 0.2em;
  --disp: "Archivo", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  --navctl-h: 46px;
  /* the icon tile inside a nav pill. The pill's outer box is this plus its
     4px padding, and the menu button is sized off the same sum, so the three
     controls in the header row can never drift apart. */
  --navctl-ico: calc(var(--navctl-h) - 8px);
}
/* ---------- dark mode ----------
   JS resolves the Light/Dark/Auto preference and stamps data-theme on <html>,
   so the palette only has to answer to one attribute. Every band, card and
   control already reads these tokens, so remapping them flips the whole page. */
:root[data-theme="dark"] {
  --paper: #11161d; /* main page band */
  --paper2: #0c1116; /* alternate band */
  --surface: #182029; /* cards and controls */
  --nav-scrim: rgba(14, 19, 26, 0.92); /* header once scrolled */
  --wash: rgba(255, 255, 255, 0.07); /* hover wash on light-band lists */
  --ink: #e9eff5; /* headings and body */
  --ink2: #b4c0cd;
  --steel: #93a1af; /* 6.9:1 on --paper */
  --line: rgba(255, 255, 255, 0.13);
  --rule-dash: rgba(255, 255, 255, 0.28);
  --ink-solid: #28323e; /* dark chips stay dark, lifted to read on the page */
  /* the already-dark bands drop further so they still separate */
  --dark: #080c11;
  --dark2: #0d131a;
  --dark-line: rgba(255, 255, 255, 0.11);
  /* accents lift slightly: the light-mode pair is tuned for white, not slate */
  --blue: #4c9ae4;
  --blue-btn: #1a68b8; /* fill: 5.7:1 under white text */
  /* hover has to LIFT here, not sink. The light-mode value is darker than the
     fill, which is right against pale paper and wrong against a dark page: it
     took the button's edge from 3.2:1 at rest to 2.0:1 on hover, under the 3:1
     WCAG 1.4.11 needs for a control boundary. This one goes the other way —
     4.8:1 under white text, 3.8:1 against the page. */
  --blue-deep: #1f74c7;
  --blue-ink: #69aded; /* text: 6.9:1 on a card, 7.6:1 on the page */
  --orange-text: #ff7a45; /* 7.0:1 on --paper */
  --focus: #6bb0ee;
  color-scheme: dark;
  --btn-line: rgba(255, 255, 255, 0.7); /* white outline on dark: 9.2:1 */
}
:root[data-theme="dark"] img:not([src*=".svg"]) {
  /* the cut-out artwork is drawn for a light page; take the edge off the glare */
  filter: brightness(0.92) contrast(1.02);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  /* keep anchor targets and keyboard-focused elements clear of the fixed
     header (WCAG 2.4.11 Focus Not Obscured) */
  scroll-padding-top: 110px;
}
@media (max-width: 920px) {
  html {
    scroll-padding-top: 96px;
  }
}
[hidden] {
  display: none !important;
}
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--orange);
  color: #fff;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  color: inherit;
}

/* focus visibility (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.showcase :focus-visible,
.faq :focus-visible,
.gallery :focus-visible,
footer :focus-visible {
  outline-color: #ffb38a;
}
.area :focus-visible {
  outline-color: #fff;
}

/* visually hidden, available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* skip link (WCAG 2.4.1) */
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--ink-solid);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  corner-shape: squircle;
  font-family: var(--disp);
  font-weight: 700;
  font-size: var(--t-lg);
  transition: top 0.2s;
}
.skip:focus {
  top: 0;
}

/* ---------- micro-label ----------
   One component, sixteen places. Everything shared lives here; each rule below
   keeps only what is its own — colour, layout, padding. Add a selector here
   rather than restating the five declarations when the next one comes along. */
.svc-stamp,
.svc-shot figcaption,
.rcard .eta,
.junk-caption,
.junk-scroll,
.junk-skip,
.map-hint,
.map-legend span,
.ab-revs .pk,
.nb-div,
.nb-chip .meta,
.ab-revwho span,
.gal-badge,
.toss-cue,
.ss-egg,
.dp-today {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}
/* standing on its own rather than attached to something, so it takes the room */
.svc-stamp,
.svc-shot figcaption,
.rcard .eta,
.junk-caption,
.junk-skip,
.ab-revs .pk,
.nb-div,
.gal-badge,
.toss-cue {
  letter-spacing: var(--label-track-wide);
}
/* two keep their own tracking, both for a reason rather than by drift.
   The vertical scroll cue is set in writing-mode: vertical-rl, so its tracking
   opens the line down the page rather than across it. The credit pill's width
   is measured: the footer's legal line reserves 192px for it opened out, and
   widening the tracking would push the wordmark over the type it clears. */
.junk-scroll {
  letter-spacing: 0.3em;
}
.ss-egg {
  letter-spacing: 0.08em;
}

/* ---------- shared ---------- */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink2);
}
.kicker::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
}
.kicker.on-dark {
  color: var(--dk-body);
}
h1.sec,
h2.sec {
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 118;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: var(--head-kicker-gap) 0 var(--head-sub-gap);
}
h1.sec .accent,
h2.sec .accent {
  color: var(--blue-ink);
}
h1.sec .accent-o,
h2.sec .accent-o {
  color: var(--orange);
}

.orange {
  color: var(--orange);
}

.note-lh {
  line-height: 1.7;
}

/* section notes — the line of small print that travels with a section's call
   to action. One size, measure and rhythm everywhere; only the colour changes,
   because these sit on both the light and the dark bands. */
.sec-note {
  margin: var(--cta-gap) auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--t-lg);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--steel);
  /* centred lines under a lead line rag badly on their own; let the browser
     even them out where it can, and fall back to normal wrapping */
  text-wrap: balance;
}
.sec-note.on-dark {
  color: var(--dk-note);
}
/* a lead line inside a note: it carries the point, the rest is the detail.
   A block of its own rather than a <br>, so the two halves are separated by a
   stated gap instead of by whatever the line height happens to leave. */
.sec-lead {
  display: block;
  margin-bottom: 12px;
}
.sec-note b {
  font-weight: 600;
  color: var(--ink);
}
.sec-note.on-dark b {
  color: #fff;
}
/* a mark closing the lead line — the tick on the pricing guarantee. Inline
   after the bold run rather than flexed beside it, so it sits at the end of
   the lead wherever that lands instead of floating against the whole block. */
.sec-note-ic {
  width: 15px;
  height: 15px;
  margin-left: 6px;
  vertical-align: -0.2em;
  color: var(--orange-text);
}
.sec-note.on-dark .sec-note-ic {
  color: var(--orange-hot);
}
/* where the note leads its container, or the container is a flex column with
   a gap of its own, the spacing is already accounted for */
.sec-note:first-child,
.svc-foot .sec-note,
.area-foot .sec-note {
  margin-top: 0;
}

.sub {
  max-width: 560px;
  color: var(--ink2);
  font-size: var(--t-xl);
  line-height: 1.65;
}
.sub.on-dark {
  color: var(--dk-body);
}
section {
  position: relative;
}
.pad {
  /* one rhythm for every section: holds 110px on desktop and tapers on
     smaller screens, where a flat 110px eats most of the viewport */
  padding: clamp(56px, 10vw, 110px) 0;
}

.rm-margin-right {
  margin-right: 0px;
}

.rm-padding-right {
  padding-right: 0px;
}

/* reveal */
.rv {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.65, 0.25, 1),
    transform 0.8s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.rv.vis {
  opacity: 1;
  transform: none;
}
.rv.d1 {
  transition-delay: 0.08s;
}
.rv.d2 {
  transition-delay: 0.16s;
}
.rv.d3 {
  transition-delay: 0.24s;
}
.rv.d4 {
  transition-delay: 0.32s;
}

.uppercase {
  text-transform: uppercase;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 17px 30px;
  border-radius: var(--r-full);
  corner-shape: squircle;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.25s;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
/* the glow behind the filled pair is pulled back: it seats the button on the
   band rather than lighting it */
.btn-blue {
  background: var(--blue-btn);
  color: #fff;
  box-shadow: 0 8px 20px -12px rgba(21, 95, 168, 0.5);
}
.btn-blue:hover {
  transform: translateY(-3px);
  background: var(--blue-deep);
  box-shadow: 0 12px 26px -12px rgba(21, 95, 168, 0.55);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  /* 3.4:1 on light, 9.2:1 (white) on dark — WCAG 1.4.11 non-text contrast */
  border: 1.5px solid var(--btn-line);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
}
.btn-orange {
  background: var(--orange-btn);
  color: #fff;
  box-shadow: 0 8px 20px -12px rgba(200, 67, 15, 0.5);
}
.btn-orange:hover {
  transform: translateY(-3px);
  background: #a83408;
  box-shadow: 0 12px 26px -12px rgba(200, 67, 15, 0.55);
}
/* ---------- logo ---------- */
/* the wordmark is drawn dark-on-light; the footer variant is the light-on-dark
   cut, so each theme shows the one built for its background */
.nav-logo .logo-dark {
  display: none;
}
:root[data-theme="dark"] .nav-logo .logo-light {
  display: none;
}
:root[data-theme="dark"] .nav-logo .logo-dark {
  display: block;
}
.nav-logo img {
  display: block;
  /* sized by width, not height: as the header row tightens the wordmark
     scales down in proportion instead of being squashed by flex-shrink */
  width: clamp(96px, 26vw, 139px);
  height: auto;
}
@media (max-width: 480px) {
  /* the menu button is a fourth control in a row built for three, so the
     wordmark gives back the width it needs */
  .nav-logo img {
    width: clamp(84px, 22vw, 139px);
  }
}
.foot-logo img {
  display: block;
  height: 63px;
  width: auto;
}

/* ---------- nav ---------- */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition:
    background 0.35s,
    box-shadow 0.35s,
    padding 0.35s;
  padding: 30px 0;
}
.topnav.scrolled {
  background: var(--nav-scrim);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 18px 0;
}
@media (max-width: 920px) {
  .topnav {
    padding: 22px 0;
  }
  .topnav.scrolled {
    padding: 14px 0;
  }
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-in > .nav-logo {
  min-width: 0;
}
.nav-right {
  flex: none;
}
.nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}
.nav-links a {
  font-family: var(--disp);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink2);
  position: relative;
  padding: 7px 0;
  white-space: nowrap;
}
@media (max-width: 1240px) {
  .nav-links {
    gap: 20px;
  }
  .nav-links a {
    font-size: var(--t-sm);
    letter-spacing: 0.1em;
  }
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--orange-btn);
  transition: width 0.3s;
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- mobile menu ----------
   The phone's stand-in for .nav-links. A disclosure, not an overlay: the
   panel hangs off the header on the same surface/shadow language as the nav
   pills, so it reads as one more control in the row rather than a takeover.
   Hidden above 920px, where the real rail is back. */
.nav-menu {
  display: none;
  align-items: center;
  justify-content: center;
  /* the same box as a nav pill — tile plus its 4px padding — so the menu
     button, the call pill and the text pill are one size across the row */
  width: calc(var(--navctl-ico) + 8px);
  height: var(--navctl-h);
  flex: none;
  padding: 0;
  border: none;
  border-radius: var(--r-md);
  corner-shape: squircle;
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15, 20, 26, 0.06),
    0 6px 18px -6px rgba(15, 20, 26, 0.12);
  transition: color 0.25s;
}
.nav-menu:hover {
  color: var(--ink);
}
.nav-menu[aria-expanded="true"] {
  color: var(--ink);
}
/* three bars that fold into a cross. Drawn rather than swapped for an X icon,
   so the open and closed states are the same three elements moving */
.nm-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}
.nm-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.18s;
}
.nm-bars span:nth-child(1) {
  top: 0;
}
.nm-bars span:nth-child(2) {
  top: 5px;
}
.nm-bars span:nth-child(3) {
  top: 10px;
}
.nav-menu[aria-expanded="true"] .nm-bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-menu[aria-expanded="true"] .nm-bars span:nth-child(2) {
  opacity: 0;
}
.nav-menu[aria-expanded="true"] .nm-bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.nav-menu-panel {
  position: absolute;
  right: 28px;
  /* clears the bar itself plus the header's own padding, so the panel hangs
     under the row rather than touching it */
  top: calc(100% + 10px);
  z-index: 1;
  width: 232px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: var(--r-lg);
  corner-shape: squircle;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(15, 20, 26, 0.06),
    0 22px 44px -18px rgba(15, 20, 26, 0.34);
  transform-origin: top right;
  animation: navMenuIn 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes navMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}
.nav-menu-panel a {
  font-family: var(--disp);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink2);
  /* the row is the target: 40px tall, well over the 24px floor */
  padding: 12px 14px;
  border-radius: var(--r-xs);
  transition:
    background 0.2s,
    color 0.2s;
}
.nav-menu-panel a:hover {
  /* --wash is white at 0.7 and would be invisible on the white surface here;
     --paper2 steps off it in both themes */
  background: var(--paper2);
  color: var(--ink);
}
/* the agreement is a page, not a section of this one, so it sits under a rule */
.nav-menu-panel a:last-child {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--orange-text);
}
@media (max-width: 920px) {
  .nav-menu {
    display: inline-flex;
  }
}
/* tracks .topnav .wrap's own gutter, so the panel stays flush with the
   button that opened it */
@media (max-width: 480px) {
  .nav-menu-panel {
    right: 16px;
  }
}

/* language toggle */
.lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--navctl-h);
  box-sizing: border-box;
  background: var(--surface);
  border: none;
  border-radius: var(--r-md);
  corner-shape: squircle;
  /* the thumb is positioned off this, not off a repeat of the number: below
     920px the pill gives its padding to the buttons so the whole thing is
     tappable, and a thumb that kept its own 4px inset sat 2px right of the
     label it is meant to be under */
  --lang-pad: 4px;
  padding: var(--lang-pad);
  box-shadow:
    0 1px 2px rgba(15, 20, 26, 0.06),
    0 6px 18px -6px rgba(15, 20, 26, 0.12);
}
.lang .thumb {
  position: absolute;
  top: var(--lang-pad);
  left: var(--lang-pad);
  width: calc(50% - var(--lang-pad));
  height: calc(100% - var(--lang-pad) * 2);
  background: var(--ink-solid);
  border-radius: calc(var(--r-md) - 4px);
  corner-shape: squircle;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lang .thumb::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 7px;
  right: 7px;
  height: 3px;
  border-radius: 2px;
}
.lang.es .thumb {
  transform: translateX(100%);
}
.lang button {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: 0.09em;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink2);
  transition: color 0.3s;
  text-transform: uppercase;
}
.lang button[aria-pressed="true"] {
  color: #fff;
}
.lang button:not([aria-pressed="true"]):hover {
  color: var(--ink);
}

/* nav pills: icon tile + label that collapses to icon-only on scroll */
.nav-pill {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: none;
  height: var(--navctl-h);
  box-sizing: border-box;
  border-radius: var(--r-md);
  corner-shape: squircle;
  padding: 4px;
  box-shadow:
    0 1px 2px rgba(15, 20, 26, 0.06),
    0 6px 18px -6px rgba(15, 20, 26, 0.12);
  transition:
    transform 0.25s,
    box-shadow 0.3s;
}
.nav-pill:hover {
  transform: translateY(-2px);
}
.nav-pill.np-quote:hover {
  box-shadow:
    0 2px 4px rgba(15, 20, 26, 0.06),
    0 12px 26px -8px rgba(21, 95, 168, 0.45);
}
.nav-pill.np-call:hover {
  box-shadow:
    0 2px 4px rgba(15, 20, 26, 0.06),
    0 12px 26px -8px rgba(21, 95, 168, 0.45);
}
.np-ico {
  width: var(--navctl-ico);
  height: 100%;
  border-radius: calc(var(--r-md) - 4px);
  corner-shape: squircle;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: none;
  transition: background 0.25s;
}
.nav-pill:hover .np-ico {
  animation: npWobble 0.5s ease-in-out;
}
@keyframes npWobble {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-9deg);
  }
  60% {
    transform: rotate(7deg);
  }
}
.np-blue {
  background: var(--blue-btn);
}
.nav-pill:hover .np-blue {
  background: var(--blue-deep);
}
.np-black {
  background: var(--black-btn);
}
.np-ico svg {
  width: 18px;
  height: 18px;
}
.np-txt {
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  max-width: 220px;
  opacity: 1;
  padding: 0 16px 0 12px;
  transition:
    max-width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.3s,
    padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.topnav.scrolled .nav-pill:not(:hover):not(:focus-within) .np-txt {
  max-width: 0;
  opacity: 0;
  padding: 0;
}
@media (max-width: 920px) {
  .nav-links {
    display: none;
  }
}
@media (max-width: 920px) {
  .np-txt {
    display: none;
  }
}
@media (max-width: 640px) {
  :root {
    --navctl-ico: 38px;
  }
  .np-ico {
    height: 38px;
  }
}
/* The header row carries a fourth control below 920px, and the controls hold
   one size all the way down rather than each shrinking on its own schedule —
   a row of four different-sized buttons was the tell that the menu had been
   bolted on. What gives instead is the row's own slack: the wordmark, the
   gaps, and finally the text pill. */
@media (max-width: 560px) {
  :root {
    --navctl-h: 44px;
  }
  .nav-right {
    gap: 8px;
  }
  .lang button {
    width: 40px;
  }
}
/* the header takes the narrower gutter well before the page does: between 421
   and 480 the row was wider than the wrap it sits in */
@media (max-width: 480px) {
  .nav-in {
    gap: 10px;
  }
  .topnav .wrap {
    padding: 0 16px;
  }
}
/* under 390px a fourth control will not fit beside the wordmark at full size.
   Texting is the one that gives: the hero, the contact section and the footer
   all still offer it, and the menu now reaches every one of them.

   The agreement's header carries no menu button, so three controls fit there
   at every width down to 320px and the pill can stay. Written as hide-then-
   restore rather than as a single :has() hide, so that a browser without
   :has() drops only the restore: both pages keep the safe behaviour instead
   of index.html overflowing its own header. */
@media (max-width: 389px) {
  .nav-pill.np-quote {
    display: none;
  }
  .nav-right:not(:has(.nav-menu)) .nav-pill.np-quote {
    display: inline-flex;
  }
}
/* 320px-class phones: the last of the row's slack, taken from the wordmark
   and the gaps rather than from the controls */
@media (max-width: 340px) {
  .nav-logo img {
    width: clamp(78px, 22vw, 139px);
  }
  .nav-right {
    gap: 6px;
  }
}

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* top clears the fixed header; bottom matches the shared .pad rhythm */
  padding: 150px 0 clamp(56px, 10vw, 110px);
  position: relative;
  background:
    radial-gradient(
      1100px 500px at 88% 6%,
      rgba(30, 127, 216, 0.1),
      transparent 60%
    ),
    radial-gradient(
      900px 520px at 8% 100%,
      rgba(230, 83, 31, 0.08),
      transparent 60%
    ),
    var(--paper);
}
.hero-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(
    1000px 640px at 70% 40%,
    rgba(0, 0, 0, 0.5),
    transparent 75%
  );
  -webkit-mask-image: radial-gradient(
    1000px 640px at 70% 40%,
    rgba(0, 0, 0, 0.5),
    transparent 75%
  );
}
.hero-in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 30px;
  align-items: center;
  position: relative;
}
.hero h1 {
  font-family: var(--disp);
  font-weight: 900;
  font-variation-settings: "wdth" 120;
  text-transform: uppercase;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.hero h1 .row {
  display: block;
  overflow: hidden;
}
.hero h1 .row span {
  display: inline-block;
  transform: translateY(110%);
  animation: riseUp 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero h1 .row:nth-child(2) span {
  animation-delay: 0.12s;
}
.hero h1 .row:nth-child(3) span {
  animation-delay: 0.24s;
}
@keyframes riseUp {
  to {
    transform: none;
  }
}
.hero h1 .ez {
  color: var(--blue-ink);
  font-style: normal;
}
.hero h1 .dot-o {
  color: var(--orange);
  font-style: normal;
}
.hero-copy {
  margin: 26px 0 var(--cta-top);
  max-width: 470px;
  color: var(--ink2);
  font-size: var(--t-xl);
  line-height: 1.65;
  opacity: 0;
  animation: fadeIn 0.9s 0.5s forwards;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeIn 0.9s 0.65s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.hero-stats {
  display: flex;
  gap: 0;
  margin-top: 52px;
  border-top: 1px solid var(--line);
  opacity: 0;
  animation: fadeIn 0.9s 0.85s forwards;
}
.hstat {
  padding: 22px 34px 0 0;
  margin-right: 34px;
  border-right: 1px solid var(--line);
  padding-right: 34px;
}
.hstat:last-child {
  border-right: none;
}
.hstat b {
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 115;
  font-size: 30px;
  display: block;
  line-height: 1;
}
.hstat b em {
  font-style: normal;
  color: var(--orange-text);
}
.hstat span {
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  color: var(--steel);
  display: block;
  margin-top: 7px;
  font-weight: 600;
}
/* the aside under the third stat: a sentence, so it drops the label's caps
   and takes a little more air above it than the label does */
.hstat-note {
  text-transform: none;
  margin-top: 10px;
}

.hero-visual {
  position: relative;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-dump {
  position: relative;
  z-index: 2;
  width: min(620px, 100%);
  filter: drop-shadow(0 45px 40px rgba(15, 20, 26, 0.3));
  opacity: 0;
  transform: translateX(90px) rotate(3deg);
  animation: driveIn 1.2s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  will-change: transform;
}
@keyframes driveIn {
  to {
    opacity: 1;
    transform: none;
  }
}
/* The hero grid is 1.05fr / 0.95fr, but an fr column still floors at its
   min-content width, and Spanish row two is the single unbreakable word
   CONTENEDORES, — 1010px at 92px/wdth 120. It takes what it needs, and the
   dumpster gets whatever is left: 200px against 564px in English.

   Narrowing the variable width axis is the lever the small-screen rule
   already uses for this same headline, and it buys the room back without
   shrinking the type much. Paired with a slightly lower size ceiling and the
   dead space in the gutters, that brings the dumpster back to a size that
   holds up its half of the hero. */
@media (min-width: 921px) {
  html[lang="es"] .hero h1 {
    font-variation-settings: "wdth" 100;
    font-size: clamp(44px, 6.1vw, 88px);
  }
  html[lang="es"] .hero-visual {
    margin-left: -30px;
    margin-right: -28px;
  }
  html[lang="es"] .hero-dump {
    width: min(680px, 100%);
  }
}
.hero-dump img {
  width: 100%;
  /* the width/height attributes would otherwise apply as a used height */
  height: auto;
  animation: floaty 6s 1.6s ease-in-out infinite;
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-14px) rotate(-0.5deg);
  }
}
/* haul-away scroll animation: rig drives right as you scroll */
.hero-haul {
  position: absolute;
  bottom: 26px;
  left: 28px;
  right: 28px;
  opacity: 0;
  animation: fadeIn 1s 1.4s forwards;
  pointer-events: none;
}
.haul-road {
  position: relative;
  height: 46px;
  border-bottom: 2px dashed rgba(15, 20, 26, 0.22);
}
.haul-rig {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 150px;
  transition: transform 0.18s linear;
  will-change: transform;
}
.haul-rig svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.haul-rig .bob {
  animation: rigBob 1.1s ease-in-out infinite;
}
@keyframes rigBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.4px);
  }
}
.haul-rig .wheel {
  animation: wheelSpin 1.2s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes wheelSpin {
  to {
    transform: rotate(360deg);
  }
}
.haul-rig .puff {
  animation: puff 1.6s ease-out infinite;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.haul-rig .puff.p2 {
  animation-delay: 0.55s;
}
.haul-rig .puff.p3 {
  animation-delay: 1.1s;
}
@keyframes puff {
  0% {
    opacity: 0.5;
    transform: translate(0, 0) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(-14px, -7px) scale(1.5);
  }
}
@media (max-width: 920px) {
  /* touch: 44px is the comfortable minimum for a finger, and several of these
     controls were landing at 32-42px. Height only — the widths are already
     generous and the layouts are tight. */
  .junk-skip,
  .gal-chip,
  .sc-head-link,
  .skip {
    min-height: 44px;
  }
  /* the language buttons sit inside 4px of padding, so height:100% left them
     at 36; let them own the padding instead and the whole pill is tappable.
     The thumb reads --lang-pad, so it follows rather than needing its own
     copy of the number. */
  .lang {
    --lang-pad: 0px;
  }
  .lang button {
    height: var(--navctl-h);
  }
  /* the logo link was only as tall as the wordmark */
  .nav-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .junk-skip,
  .gal-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hero {
    padding-top: 120px;
  }
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
    /* the children already carry their own vertical rhythm */
    gap: 0;
  }
  .hero-in > * {
    min-width: 0;
  }
  /* dissolve the text column so the dumpster can be ordered between the
     buttons and the stats instead of being stuck after the whole block */
  .hero-col {
    display: contents;
  }
  .hero h1 {
    order: 1;
  }
  .hero-copy {
    order: 2;
  }
  .hero-ctas {
    order: 3;
  }
  .hero-visual {
    order: 4;
    height: auto;
    margin-top: 26px;
  }
  .hero-stats {
    order: 5;
  }
  .hero-dump {
    width: min(460px, 88%);
    margin: 0 auto;
  }
  .hero-stats {
    flex-wrap: wrap;
    gap: 0;
    margin-top: 32px;
  }
  .hstat {
    padding: 18px 22px 0 0;
    margin-right: 22px;
    padding-right: 22px;
  }
  .hero-haul {
    display: none;
  }
}
@media (max-width: 520px) {
  h2.sec {
    font-size: clamp(24px, 7.6vw, 34px);
    overflow-wrap: break-word;
  }
  .contact .mega {
    overflow-wrap: break-word;
  }
  .hero h1 {
    /* Archivo is variable: narrowing the width axis buys back the room the
       long Spanish headline needs without shrinking the type as much */
    font-variation-settings: "wdth" 100;
    font-size: clamp(27px, 8.2vw, 40px);
  }
  .hero-visual {
    margin-top: 40px;
  }
  .hero-dump {
    width: min(360px, 82%);
  }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 26px;
  }
  .hstat {
    padding: 16px 12px 0 0;
    margin-right: 12px;
    border-right: none;
  }
}

/* ---------- services ---------- */
.services {
  background: var(--paper);
}
.svc-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  /* no gap: the h2 already carries --head-sub-gap */
  gap: 0;
  margin-bottom: var(--head-content-gap);
  flex-wrap: wrap;
}
/* ---------- services : dispatch board ---------- */
.svc-board {
  display: grid;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  corner-shape: squircle;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 34px 70px -34px rgba(15, 20, 26, 0.28);
  position: relative;
  z-index: 2;
}

/* left rail : the job list */
.svc-list {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.svc-tab {
  display: flex;
  /* share out whatever height the sheet asks for rather than stacking at the
     top and leaving a gap under the last tab */
  flex: 1 0 auto;
  align-items: center;
  gap: 14px;
  padding: 19px 22px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.25s;
}
.svc-tab:last-child {
  border-bottom: none;
}
.svc-tab .t {
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink2);
  transition:
    color 0.25s,
    transform 0.3s;
}
.svc-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--blue-btn);
  transform: scaleY(0);
  transition: transform 0.3s;
}
.svc-tab:hover {
  background: rgba(15, 20, 26, 0.03);
}
.svc-tab:hover .t {
  transform: translateX(3px);
}
.svc-tab[aria-selected="true"] {
  background: rgba(30, 127, 216, 0.07);
}
.svc-tab[aria-selected="true"]::before {
  transform: scaleY(1);
}
.svc-tab[aria-selected="true"] .t {
  color: var(--ink);
}
.svc-tab .arr {
  margin-left: auto;
  display: flex;
  opacity: 0;
  transition: opacity 0.25s;
  color: var(--blue-ink);
}
.svc-tab .arr svg {
  width: 14px;
  height: 14px;
}
.svc-tab[aria-selected="true"] .arr {
  opacity: 1;
}

/* right pane : the job sheet */
.svc-detail {
  position: relative;
  /* vertical padding is tighter than horizontal: the sheet sets the board's
     height, so deep top/bottom padding pushes the rail past its last tab and
     leaves dead space under it */
  padding: clamp(22px, 2.7vw, 34px) clamp(26px, 3.6vw, 46px);
}
/* every panel sits in the same grid cell, so the pane is sized by the tallest
   one and the board keeps a single height as you click through the list */
.svc-panels {
  display: grid;
  align-items: center;
}
.svc-wm {
  position: absolute;
  right: 18px;
  top: 0;
  font-family: var(--disp);
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  font-size: clamp(120px, 17vw, 210px);
  line-height: 1;
  color: rgba(15, 20, 26, 0.05);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
.svc-panel {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
  gap: clamp(22px, 3.4vw, 42px);
  align-items: center;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.svc-panel.fade {
  opacity: 0;
  transform: translateY(8px);
}
/* the inactive sheets keep their space but leave the a11y tree and tab order.
   `hidden` would drop them from the layout and the board would resize */
.svc-panel.is-off {
  visibility: hidden;
  pointer-events: none;
}
.svc-chip {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  corner-shape: squircle;
  border: 1.5px solid rgba(230, 83, 31, 0.35);
  display: grid;
  place-items: center;
  color: var(--orange-text);
  margin-bottom: 20px;
}
.svc-chip svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
}
.svc-panel h3 {
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 112;
  font-size: clamp(24px, 3.4vw, 38px);
  text-transform: uppercase;
  line-height: 1.02;
}
.svc-desc {
  color: var(--ink2);
  font-size: var(--t-xl);
  line-height: 1.75;
  margin-top: 16px;
  max-width: 48ch;
}
.svc-stamp {
  display: inline-block;
  margin-top: 22px;
  color: var(--orange-text);
  border: 1.5px solid var(--orange-text);
  border-radius: var(--r-xs);
  padding: 8px 14px;
  transform: rotate(-2deg);
}
.svc-shot {
  margin: 0;
  border-radius: var(--r-md);
  corner-shape: squircle;
  overflow: hidden;
  border: 5px solid var(--surface);
  box-shadow: 0 26px 50px -24px rgba(15, 20, 26, 0.4);
  /* --surface, not --dark, and it has to match the border. The background
     paints across the whole border box, while overflow: hidden clips the
     caption to the padding box, and at the rounded corners those two curves
     are antialiased separately — they never land on the same subpixels, so a
     hairline of whatever is behind shows through as a grey arc under each
     bottom corner. The photo always fills its box (object-fit: cover on a
     fixed aspect-ratio), so this colour was only ever seen before the image
     loaded; matching the border makes the seam invisible instead. */
  background: var(--surface);
}
.svc-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}
.svc-shot figcaption {
  color: var(--steel);
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.svc-foot {
  margin-top: var(--cta-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cta-gap);
  flex-wrap: wrap;
}

/* the prev/next pager is only needed once the board stacks and the tab rail
   turns into a horizontal scroller with no visible affordance */
.svc-nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.svc-nav-btn {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-md);
  corner-shape: squircle;
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}
.svc-nav-btn svg {
  width: 18px;
  height: 18px;
}
.svc-nav-btn:hover {
  background: var(--orange-btn);
  border-color: var(--orange-btn);
  color: #fff;
}
.svc-nav-title {
  display: none;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  line-height: 1.25;
}
.svc-nav-count {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.25em;
  color: var(--steel);
  min-width: 68px;
  text-align: center;
  margin: 0;
}
.svc-nav-count b {
  color: var(--ink);
  font-weight: 600;
}

.svc-note {
  position: relative;
  z-index: 3;
}

@media (max-width: 860px) {
  .svc-nav {
    display: flex;
    margin-top: 18px;
    padding-top: 16px;
  }
  /* trim the stacked card so it and the pager fit in one viewport */
  .svc-detail {
    min-height: 0;
    padding: 22px;
  }
  .svc-panel {
    gap: 18px;
  }
  .svc-chip {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
  }
  .svc-chip svg {
    width: 21px;
    height: 21px;
  }
  .svc-panel h3 {
    font-size: 22px;
  }
  .svc-desc {
    font-size: var(--t-lg);
    line-height: 1.6;
    margin-top: 12px;
  }
  .svc-stamp {
    margin-top: 16px;
  }
  /* letterbox the photo instead of the tall 4:3.4 crop */
  .svc-shot img {
    aspect-ratio: 16 / 9;
  }
  /* no room for a rail of eight labels: drop it and let the pager below the
     sheet do the navigating. The tabs stay in the DOM — the pager reads its
     label off the active one, and they still own the panels' aria wiring. */
  .svc-list {
    display: none;
  }
  .svc-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .svc-panel {
    grid-template-columns: 1fr;
    /* the children carry their own margins once the wrapper dissolves */
    gap: 0;
  }
  /* dissolve the text block so the photo can be ordered between the
     description and the stamp — they are nested siblings otherwise */
  .svc-p-main {
    display: contents;
  }
  .svc-chip {
    order: 1;
  }
  .svc-panel h3 {
    order: 2;
  }
  .svc-desc {
    order: 3;
  }
  .svc-shot {
    order: 4;
    max-width: 420px;
    margin-top: 18px;
    /* centred like the stamp below it: capped well under the card's width, a
       left-ranged photo reads as a layout slip rather than a choice */
    justify-self: center;
  }
  .svc-stamp {
    order: 5;
    justify-self: center;
  }
  /* with the rail gone the pager is the only signpost, so it names the
     service rather than counting it off */
  .svc-nav-count {
    display: none;
  }
  .svc-nav-title {
    display: block;
    letter-spacing: 0.04em;
  }
  .svc-nav {
    gap: 10px;
  }
}
/* smallest phones: shave another ~40px so the card and pager still share
   a 640px viewport */
@media (max-width: 560px) {
  .svc-detail {
    padding: 18px;
  }
  .svc-panel {
    gap: 14px;
  }
  .svc-shot {
    max-width: 280px;
  }
  .svc-panel h3 {
    font-size: 20px;
  }
  .svc-nav {
    margin-top: 12px;
    padding-top: 12px;
  }
}
/* 320px-class phones: the description wraps hard at this width, so pull the
   photo and body copy in a little further */
@media (max-width: 380px) {
  .svc-shot {
    max-width: 156px;
  }
  .svc-chip {
    margin-bottom: 8px;
  }
  .svc-desc {
    font-size: var(--t-lg);
    line-height: 1.55;
  }
  .svc-nav-title {
    font-size: var(--t-sm);
    letter-spacing: 0.03em;
    line-height: 1.2;
  }
  .svc-nav {
    margin-top: 10px;
    padding-top: 10px;
  }
  .svc-detail {
    padding: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-panel,
  .svc-tab .t,
  .svc-tab::before {
    transition: none;
  }
}

/* ---------- showcase ---------- */
.showcase {
  background: var(--dark);
  color: #fff;
  overflow: hidden;
}
.showcase .blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--dark-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dark-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(
    1100px 700px at 50% 45%,
    rgba(0, 0, 0, 0.9),
    transparent 80%
  );
  -webkit-mask-image: radial-gradient(
    1100px 700px at 50% 45%,
    rgba(0, 0, 0, 0.9),
    transparent 80%
  );
}
.sc-head {
  text-align: center;
  position: relative;
  z-index: 2;
}
.sc-head .sub {
  margin: 0 auto;
}
/* jumps to the first FAQ answer, where the size drawing lives */
.sc-head-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 11px 22px 11px 18px;
  border-radius: var(--r-full);
  corner-shape: squircle;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  color: var(--dk-body);
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: 0.06em;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.sc-head-link svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--orange-hot);
}
.sc-head-link:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--orange-hot);
  color: #fff;
}
.sc-stage {
  position: relative;
  margin-top: 26px;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.sc-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  width: min(760px, 92vw);
  height: min(520px, 70vw);
  border-radius: 50%;
  corner-shape: squircle;
  background: radial-gradient(
    closest-side,
    rgba(159, 176, 194, 0.16),
    transparent 72%
  );
  pointer-events: none;
}
.sc-ghost {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--disp);
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  font-size: clamp(200px, 32vw, 430px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.1);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.5s;
}
.sc-dump {
  position: relative;
  z-index: 2;
  width: min(680px, 86vw);
  transition:
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.5s,
    width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  filter: drop-shadow(0 55px 45px rgba(0, 0, 0, 0.55));
}
.sc-dump.small {
  width: min(560px, 74vw);
}
.sc-dump img {
  width: 100%;
  height: auto;
  animation: floaty 7s ease-in-out infinite;
}
.sc-dump.out-l {
  opacity: 0;
  transform: translateX(-140px) rotate(-4deg);
}
.sc-dump.out-r {
  opacity: 0;
  transform: translateX(140px) rotate(4deg);
}
.sc-shadow {
  width: min(560px, 70vw);
  height: 32px;
  border-radius: 50%;
  corner-shape: squircle;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  transition: width 0.7s;
}

/* dimension line */
.dim {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  width: min(600px, 78vw);
  display: flex;
  align-items: center;
  gap: 14px;
}
.dim .lineH {
  flex: 1;
  height: 1.5px;
  background: var(--orange-hot);
  position: relative;
  transform: scaleX(0);
  transition: transform 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dim.vis .lineH {
  transform: scaleX(1);
}
.dim .lineH::before,
.dim .lineH::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 1.5px;
  height: 13px;
  background: var(--orange-hot);
}
.dim .lineH::before {
  left: 0;
}
.dim .lineH::after {
  right: 0;
}
.dim .dim-label {
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.2em;
  color: var(--orange-hot);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s 0.7s;
}
.dim.vis .dim-label {
  opacity: 1;
}
@media (max-width: 640px) {
  .dim {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .dim .lineH {
    flex: 1 1 100%;
  }
}

/* arrows + tabs */
.sc-arrow {
  position: absolute;
  top: 46%;
  z-index: 5;
  width: 58px;
  height: 58px;
  border-radius: var(--r-md);
  corner-shape: squircle;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.3s;
  backdrop-filter: blur(6px);
}
.sc-arrow:hover {
  background: var(--orange-btn);
  border-color: var(--orange-btn);
  transform: scale(1.08);
}
.sc-arrow.prev {
  left: max(12px, 6%);
}
.sc-arrow.next {
  right: max(12px, 6%);
}
.sc-arrow svg {
  width: 20px;
  height: 20px;
}
.sc-tabrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  position: relative;
  z-index: 4;
  margin-top: -10px;
}
.sc-tabs {
  display: flex;
  gap: 12px;
}
.sc-tab {
  font-family: var(--disp);
  font-weight: 850;
  font-size: var(--t-lg);
  letter-spacing: 0.1em;
  padding: 14px 30px;
  border-radius: var(--r-full);
  corner-shape: squircle;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #e8eef5;
  transition: all 0.3s;
}
.sc-tab[aria-pressed="true"] {
  background: var(--orange-btn);
  border-color: var(--orange-btn);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(200, 67, 15, 0.6);
}
.sc-tab:not([aria-pressed="true"]):hover {
  border-color: #fff;
  color: #fff;
}
@media (max-width: 920px) {
  .sc-stage {
    min-height: 400px;
  }
  .sc-arrow {
    display: none;
  }
}

@media (max-width: 520px) {

  .sc-stage {
  margin-top: -20px;
}

}

/* spec panel */
.sc-specs {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--dark-line);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-lg);
  corner-shape: squircle;
  overflow: hidden;
  margin-top: 42px;
}
.spec {
  background: var(--dark2);
  padding: 26px 26px 24px;
  transition: background 0.3s;
}
.spec:hover {
  background: #182230;
}
.spec .lab {
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dk-label);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.spec .lab::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--orange-hot);
  border-radius: 1px;
  transform: rotate(45deg);
}
.spec .val {
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 112;
  font-size: 26px;
  margin-top: 12px;
  line-height: 1.1;
}
.spec .val-sub {
  font-family: var(--disp);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  font-size: var(--t-xl);
  line-height: 1.2;
  margin-top: 4px;
  color: var(--dk-body);
}
.spec .note {
  font-size: var(--t-md);
  color: var(--dk-note);
  margin-top: 7px;
  line-height: 1.5;
}
.spec .val .unit {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--dk-label);
  margin-left: 4px;
  letter-spacing: 0.08em;
}
.capbar {
  height: 7px;
  border-radius: var(--r-full);
  corner-shape: squircle;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 14px;
  overflow: hidden;
}
.capbar i {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  corner-shape: squircle;
  background: linear-gradient(90deg, var(--blue), var(--orange-hot));
  width: 0;
  transition: width 1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* size comparison — a link in the Size spec, drawing lives in a dialog */
/* ---------- dumpster FAQs (manifest layout) ---------- */
/* the same dark band the fleet section runs on */
.faq {
  background: var(--dark);
  color: #fff;
  /* NOT overflow:hidden — that would make this the scroll container for the
     sticky left column and knock it out of line with the list. `clip` clips
     the same way without becoming a scrollport. */
  overflow: clip;
  padding: clamp(18px, 4vw, 46px) 0 clamp(56px, 10vw, 110px);
}
/* a hairline that fades out at both ends */
.faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 56px));
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.14),
    transparent
  );
}
.vb-grid {
  display: grid;
  /* "FILL SMART" measures 423px at the shared h2.sec size, and the Spanish
     title runs longer still */
  grid-template-columns: 470px 1fr;
  gap: 70px;
  align-items: start;
  position: relative;
  z-index: 2;
  margin-top: clamp(28px, 5vw, 56px);
}
.vb-left {
  position: sticky;
  top: 104px;
}
.vb-left .sub {
  margin-top: 0;
}
.vb-list {
  position: relative;
  /* the accordion anchors the clicked question itself; browser scroll
     anchoring on top of that double-corrects and jitters */
  overflow-anchor: none;
}
.vb-item {
  position: relative;
  border-bottom: 1px solid var(--dark-line);
}
.vb-item:first-child {
  border-top: 1px solid var(--dark-line);
}
.vb-q {
  width: 100%;
  scroll-margin-top: 104px;
  display: flex;
  align-items: baseline;
  gap: 20px;
  text-align: left;
  padding: 26px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.vb-num {
  flex: none;
  width: 40px;
  font-family: var(--disp);
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  font-size: var(--t-lg);
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
  transition: -webkit-text-stroke-color 0.3s;
}
.vb-item.open .vb-num {
  -webkit-text-stroke: 1px var(--orange-hot);
}
.vb-qh {
  margin: 0;
  font: inherit;
}
.vb-qt {
  flex: 1;
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 112;
  font-size: clamp(17px, 2.4vw, 22px);
  line-height: 1.2;
  transition: color 0.3s;
}
.vb-item:hover .vb-qt {
  color: var(--orange-hot);
}
.vb-arrow {
  flex: none;
  align-self: center;
  color: var(--dk-label);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    color 0.3s;
}
.vb-arrow svg {
  display: block;
  width: 18px;
  height: 18px;
}
.vb-item.open .vb-arrow {
  transform: rotate(90deg);
  color: var(--orange-hot);
}
.vb-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* an answer being closed to make room for another collapses in one frame,
   so the page re-lays out instantly instead of sliding */
.vb-item.vb-instant .vb-a,
.vb-item.vb-instant .vb-a-in,
.vb-item.vb-instant .vb-arrow,
.vb-item.vb-instant .dimline .ln,
.vb-item.vb-instant .dimline span {
  transition: none;
}
.vb-item.open .vb-a {
  grid-template-rows: 1fr;
}
/* a collapsed answer is still in the layout, so hide it from the reading
   order and the tab order too — not just visually */
.vb-a-in {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s 0.45s;
}
.vb-item.open .vb-a-in {
  visibility: visible;
  transition: visibility 0s;
}
.vb-a-body {
  padding: 0 4px 30px 60px;
}
.vb-a-body p {
  max-width: 600px;
  color: var(--dk-body);
  font-size: var(--t-xl);
  line-height: 1.7;
}
.vb-a-body p + p {
  margin-top: 13px;
}
.vb-a-body b {
  color: #fff;
  font-weight: 600;
}
/* the fleet stage's measuring line, reused to open each answer */
.dimline {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dimline .ln {
  flex: 1;
  height: 1.5px;
  background: var(--orange-hot);
  position: relative;
}
.dimline .ln::before,
.dimline .ln::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 1.5px;
  height: 13px;
  background: var(--orange-hot);
}
.dimline .ln::before {
  left: 0;
}
.dimline .ln::after {
  right: 0;
}
.dimline span {
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-hot);
  white-space: nowrap;
}
.vb-a-body .dimline {
  margin-bottom: 16px;
  max-width: 420px;
}
.vb-a-body .dimline .ln {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vb-item.open .vb-a-body .dimline .ln {
  transform: scaleX(1);
}
.vb-a-body .dimline span {
  opacity: 0;
  transition: opacity 0.4s 0.5s;
}
.vb-item.open .vb-a-body .dimline span {
  opacity: 1;
}
@media (max-width: 920px) {
  .vb-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .vb-left {
    position: static;
  }
  .vb-a-body {
    padding-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vb-a,
  .vb-arrow,
  .vb-a-body .dimline .ln,
  .vb-a-body .dimline span {
    transition: none;
  }
}

/* the size comparison drawing, now living in the first FAQ answer */
.faq-fig {
  margin: 24px 0 0;
  padding: 0;
  max-width: 600px;
}
.faq-fig-cap {
  color: var(--dk-note);
  font-size: var(--t-md);
  line-height: 1.55;
  margin-top: 12px;
  letter-spacing: 0.03em;
}
.scale-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ss-ground {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.ss-eye {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  vector-effect: non-scaling-stroke;
}
.ss-person {
  fill: var(--dk-body);
}
.ss-box {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition:
    fill 0.4s,
    stroke 0.4s;
}
.ss-eye-lab,
.ss-box-lab {
  font-family: var(--disp);
  font-weight: 850;
  letter-spacing: 0.12em;
}
.ss-eye-lab {
  font-size: var(--t-lg);
  fill: var(--dk-label);
}
.ss-box-lab {
  font-size: 21px;
  text-anchor: middle;
  fill: var(--dk-body);
  transition: fill 0.4s;
}
/* the size the fleet tabs are showing is the one lit up */
.faq-fig[data-active="0"] .ss-row[data-i="0"] .ss-box,
.faq-fig[data-active="1"] .ss-row[data-i="1"] .ss-box {
  fill: rgba(255, 106, 44, 0.14);
  stroke: var(--orange-hot);
}
.faq-fig[data-active="0"] .ss-row[data-i="0"] .ss-box-lab,
.faq-fig[data-active="1"] .ss-row[data-i="1"] .ss-box-lab {
  fill: var(--orange-hot);
}
@media (prefers-reduced-motion: reduce) {
  .ss-box,
  .ss-box-lab {
    transition: none;
  }
}

.sc-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: var(--cta-top);
  position: relative;
  z-index: 3;
  flex-wrap: wrap;
}
.sc-note {
  position: relative;
  z-index: 3;
}
@media (max-width: 920px) {
  .sc-specs {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .sc-specs {
    grid-template-columns: 1fr;
  }
}

/* ---------- how it works : the delivery run ---------- */
.how {
  background: var(--paper2);
}
.run {
  margin-top: 54px;
  position: relative;
}
.runroad {
  position: relative;
  height: 130px;
  margin-bottom: 26px;
}
.runroad .rd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    rgba(15, 20, 26, 0.3) 0 34px,
    transparent 34px 64px
  );
}
.stopmark {
  position: absolute;
  bottom: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  corner-shape: squircle;
  background: var(--paper2);
  border: 3px solid var(--ink);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  transition:
    border-color 0.3s,
    background 0.3s;
}
.stopmark i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  corner-shape: squircle;
  background: var(--ink-solid);
  transform: scale(0);
  transition: background 0.3s;
}
.stopmark.hit {
  border-color: var(--orange-btn);
}
.stopmark.hit i {
  background: var(--orange-btn);
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.5, 1.8, 0.5, 1);
}
.runrig {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: min(190px, 24vw);
  will-change: transform;
  z-index: 3;
}
.runrig img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 14px rgba(15, 20, 26, 0.2));
}
.runrig .rb {
  animation: rigBob 1.1s ease-in-out infinite alternate;
}
@keyframes rigBob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2px);
  }
}
.rcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.rcard {
  background: var(--surface);
  border: none;
  border-top: 4px solid transparent;
  border-radius: var(--r-lg);
  corner-shape: squircle;
  padding: 30px 28px 28px;
  position: relative;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.9, 0.24, 1),
    box-shadow 0.45s,
    border-color 0.45s;
}
.rcard.on {
  transform: translateY(-10px);
  border-top-color: var(--orange);
  box-shadow: 0 30px 55px -25px rgba(15, 20, 26, 0.3);
}
.rcard .n {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  corner-shape: squircle;
  background: var(--ink-solid);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--disp);
  font-weight: 900;
  font-size: var(--t-xl);
  transition: background 0.4s;
}
.rcard.on .n {
  background: var(--orange-btn);
}
.rcard h3 {
  font-family: var(--disp);
  font-weight: 900;
  font-variation-settings: "wdth" 115;
  font-size: 21px;
  text-transform: uppercase;
  margin-top: 22px;
}
.rcard p {
  color: var(--ink2);
  font-size: var(--t-lg);
  line-height: 1.7;
  margin-top: 12px;
}
.rcard p b {
  color: var(--ink);
}
.rcard .eta {
  margin-top: 16px;
  display: inline-block;
  color: var(--steel);
  opacity: 0;
  transition: opacity 0.4s 0.15s;
}
.rcard.on .eta {
  opacity: 1;
  color: var(--orange-text);
}
@media (max-width: 860px) {
  /* the road only reads across three columns, so it goes with them */
  .rcards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .runroad {
    display: none;
  }
  .run {
    margin-top: 34px;
  }
  .rcard {
    padding: 24px 22px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .runrig .rb {
    animation: none;
  }
  .rcard,
  .stopmark,
  .stopmark i,
  .rcard .n,
  .rcard .eta {
    transition: none;
  }
}

/* ---------- bulk junk scroll showcase ---------- */
.junk {
  background: var(--paper);
  position: relative;
}
.junk-track {
  height: 430vh;
  position: relative;
}
.junk-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--paper2);
}
.junk-stage .kicker {
  display: inline-flex;
}
.junk-scale {
  position: relative;
  width: 800px;
  height: 500px;
  flex: none;
  transform-origin: center top;
}
.junk-world {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.junk-item {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  opacity: 0;
}
.junk-item img {
  display: block;
  width: 100%;
  height: auto;
}
.junk-dumpster {
  position: absolute;
  left: 80px;
  bottom: 5px;
  width: 640px;
  z-index: 5;
}
.junk-dumpster img {
  display: block;
  width: 100%;
  /* the svg carries width/height attrs, so scale off the aspect ratio */
  height: auto;
}
.junk-trailer {
  position: absolute;
  left: 60px;
  bottom: 6px;
  width: 700px;
  z-index: 1;
  will-change: transform;
  opacity: 0;
}
.junk-progress {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: min(300px, 40svh);
  background: rgba(15, 20, 26, 0.12);
  border-radius: var(--r-full);
  corner-shape: squircle;
  overflow: hidden;
}
.junk-progress i {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(var(--blue), var(--orange-hot));
  border-radius: var(--r-full);
  corner-shape: squircle;
}
.junk-caption {
  margin-top: 10px;
  color: var(--steel);
}
/* parked at the foot of the stage rather than in the flow: the stage centres
   its content in one viewport, so adding height here pushes the kicker up
   under the fixed header */
.junk-cue {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}
/* runs alongside the progress rail on the right edge. vertical-rl turns the
   flex main axis vertical too, so the chevron stacks below the words */
.junk-scroll {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--steel);
  pointer-events: none;
}
.junk-chev {
  width: 13px;
  height: 13px;
  animation: junkNudge 1.8s ease-in-out infinite;
}
@keyframes junkNudge {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
}
/* scrolling back up unloads the can, so the cue points the other way */
@keyframes junkNudgeUp {
  0%,
  100% {
    transform: translateY(2px) rotate(180deg);
  }
  50% {
    transform: translateY(-3px) rotate(180deg);
  }
}
.junk-scroll.is-up .junk-chev {
  animation-name: junkNudgeUp;
}
.junk-skip {
  color: var(--ink2);
  background: transparent;
  border: 1.5px solid var(--btn-line);
  border-radius: var(--r-full);
  corner-shape: squircle;
  padding: 9px 18px;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}
.junk-skip:hover {
  background: var(--ink-solid);
  border-color: var(--ink-solid);
  color: #fff;
}
/* short viewports: the stage centres a fixed-height illustration, so the
   stacked cue runs into the caption. lay it out on one line instead */
@media (max-height: 780px) {
  .junk-skip {
    padding: 7px 14px;
  }
}
@media (max-width: 920px) {
  .junk-progress {
    right: 10px;
  }
  /* the artwork is width-constrained here, so centring it in a 100svh stage
     leaves ~210px of dead space above the heading. anchor it near the top
     instead, clear of the 86px fixed header */
  .junk-stage {
    justify-content: flex-start;
    padding-top: 110px;
  }
  .junk-caption {
    margin-left: 25px;
    margin-right: 25px;
  }
  /* The vertical cue collides with the artwork and caption at this width, so
     it lies down and pairs with the skip button. Both come back into the flow
     under the caption rather than being pinned to the foot of the stage: the
     artwork scales to the width and rescale() collapses the height it reserves
     to match, so on a phone the content ends around half way up and anything
     pinned to the bottom left a hole between it and the caption. What sits
     below the controls now is trailing space at the foot of a sticky
     viewport, which reads as air rather than a gap in the middle. */
  .junk-scroll {
    position: static;
    transform: none;
    margin-top: clamp(26px, 5.5vh, 54px);
    justify-content: center;
    writing-mode: horizontal-tb;
    letter-spacing: 0.22em;
  }
  /* letter-spacing adds a trailing gap after the last glyph, which pulls the
     centred row visibly left; cancel it so the words read centred */
  .junk-scroll > span {
    margin-right: -0.22em;
  }
  .junk-cue {
    position: static;
    transform: none;
    margin-top: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .junk-track {
    height: auto;
  }
  .junk-stage {
    position: relative;
    height: auto;
    padding: 90px 0 60px;
  }
  /* nothing animates and nothing scrolls, so there is nothing to cue or skip */
  .junk-cue,
  .junk-scroll {
    display: none;
  }
  .junk-stage {
    position: relative;
  }
  .junk-chev {
    animation: none;
  }
}

/* ---------- pricing ---------- */
.pricing {
  background: var(--paper);
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* hand-drawn "need more than a dumpster?" pointer */
.price-nudge {
  position: absolute;
  bottom: 100%;
  left: -150px;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  padding-bottom: 22px;
  margin: 0;
  color: var(--orange-text);
  pointer-events: none;
}
.price-nudge-txt {
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: left;
  max-width: 13ch;
  transform: rotate(0deg);
  transform-origin: left bottom;
  margin-bottom: 5px;
  margin-right: 58px;
}
.price-nudge-arrow {
  width: 58px;
  height: 40px;
  flex: none;
  /* drawn sweeping down-right; mirrored so it curves back down-left
     from the text into the card */
  transform: rotate(26deg);
}
.price .btn {
  white-space: normal;
  text-align: center;
}
.price {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--r-lg) + 6px);
  corner-shape: squircle;
  padding: 38px 34px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.35s,
    box-shadow 0.35s;
}
.price:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -30px rgba(15, 20, 26, 0.32);
}
.price.feature {
  background: var(--ink-solid);
  color: #fff;
  border-color: var(--ink-solid);
}
.price .size-tag {
  font-family: var(--disp);
  font-weight: 900;
  font-variation-settings: "wdth" 120;
  font-size: var(--t-lg);
  letter-spacing: 0.16em;
  color: var(--orange-text);
}
.price.feature .size-tag {
  color: var(--orange-hot);
}
.price h3 {
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 112;
  font-size: 24px;
  text-transform: uppercase;
  margin: 10px 0 4px;
}
.price .amount {
  font-family: var(--disp);
  font-weight: 900;
  font-variation-settings: "wdth" 115;
  font-size: 56px;
  line-height: 1.2;
  margin: 18px 0 4px;
}
.price .amount sup {
  font-size: 22px;
  top: -22px;
  position: relative;
  font-weight: 800;
}
.price .per {
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 600;
}
.price.feature .per {
  color: var(--dk-body);
}
.price ul {
  list-style: none;
  margin: 26px 0 30px;
  flex: 1;
}
.price li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: var(--t-lg);
  line-height: 1.5;
  padding: 7px 0;
  color: var(--ink2);
}
.price.feature li {
  color: var(--dk-body);
}
.price li svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  stroke: var(--blue-btn);
}
.price.feature li svg {
  stroke: var(--orange-hot);
}
.price .btn {
  justify-content: center;
}
.ribbon {
  position: absolute;
  top: 22px;
  right: -9px;
  background: var(--orange-btn);
  color: #fff;
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  padding: 7px 14px;
  border-radius: var(--r-xs) 0 0 var(--r-xs);
}
.ribbon::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  border: 5px solid transparent;
  border-top-color: #7c2807;
  border-left-color: #7c2807;
}
/* the two lines that close the section: a guarantee, then an "anything
   else?" note */
.price-foot {
  margin: 44px auto 0;
  max-width: 640px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
@media (max-width: 920px) {
  .price-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
  }
  .price {
    min-width: 0;
  }
  /* stacked, there is no room above the card, so run it inside the card */
  .price-nudge {
    position: static;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 0;
    margin-bottom: 16px;
  }
  .price-nudge-txt {
    text-align: left;
    max-width: none;
    transform: none;
  }
  .price-nudge-arrow {
    transform: rotate(38deg);
    width: 40px;
    height: 28px;
  }
}
@media (max-width: 420px) {
  .btn {
    white-space: normal;
    text-align: center;
  }
}

/* ---------- area ---------- */
.area {
  /* --blue-btn holds white at 6.6:1 through the translucent map panel on top
     of it (WCAG 1.4.3) */
  background: var(--ink-solid);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.area::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      800px 400px at 90% 0%,
      rgba(255, 255, 255, 0.08),
      transparent 60%
    ),
    radial-gradient(
      700px 500px at 0% 100%,
      rgba(13, 18, 24, 0.3),
      transparent 60%
    );
}
.area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(
    1000px 640px at 50% 40%,
    rgba(0, 0, 0, 0.55),
    transparent 78%
  );
  -webkit-mask-image: radial-gradient(
    1000px 640px at 50% 40%,
    rgba(0, 0, 0, 0.55),
    transparent 78%
  );
}
.area .wrap {
  position: relative;
  z-index: 2;
}
.area .kicker {
  display: inline-flex;
}
.area .area-map {
  margin-left: auto;
  margin-right: auto;
}
.area .county-cloud {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.area .area-foot {
  justify-content: center;
  display: flex;
  flex-direction: column;
}
/* the map is the positioning context for the county popup */
.area .area-map {
  position: relative;
}
/* served counties are real controls now: pointer, focus ring, and a lift */
.area .cty.served {
  cursor: pointer;
  outline: none;
}
.area .cty.served:hover,
.area .cty.served:focus-visible,
.area .cty.served.on {
  /* .served is already --orange-hot, so the selected state has to come from
     the outline and brightness, not the fill */
  stroke-width: 2.6;
  filter: brightness(1.2);
  animation: none;
}
.area .cty.served:focus-visible {
  stroke-width: 3.2;
}
.map-hint {
  /* sits at the top of the map panel, above the SVG */
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.72);
}
.area-pop {
  /* desktop: floats over the map, pinned to the county by JS */
  position: absolute;
  z-index: 6;
  /* shrink-to-fit measures against the space left of the edge, so a county
     near the right rim produced a very narrow bubble. max-content sizes it
     from the text instead. */
  width: max-content;
  max-width: 290px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--ink-solid);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.65);
  text-align: left;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.area-pop[hidden] {
  display: none;
}
.area-pop-name {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-hot);
  margin-bottom: 3px;
}
.area-pop-towns {
  display: block;
  font-family: var(--body);
  font-size: var(--t-md);
  line-height: 1.5;
  color: #fff;
}
.area-pop-all {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--body);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 920px) {
  /* stacked: the popup stops floating and becomes a panel under the map, so
     a tap does not drop a tooltip on top of the county you just tapped.
     This has to sit after the base rule — same specificity, source order
     decides. */
  .area-pop {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    margin-top: 16px;
    text-align: center;
  }
}
.area .map-legend {
  justify-content: center;
}
.area .kicker {
  color: #fff;
}
.area .kicker::before {
  background: #fff;
}
.area h2.sec {
  color: #fff;
}
.area .sub {
  color: #fff;
}
.county-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  list-style: none;
  padding: 0;
  /* half the width keeps the cloud under the map rather than beside it */
  max-width: 50%;
}
.county {
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--r-full);
  corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: inline-flex;
  align-items: center;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.08);
}
.county:hover {
  background: #fff;
  color: var(--blue-on-white);
  transform: translateY(-2px);
}
.area-foot {
  margin-top: var(--cta-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cta-gap);
}
.area-map {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-md);
  corner-shape: squircle;
  padding: clamp(18px, 2vw, 30px);
  min-width: 0;
  max-width: 900px;
  margin-top: 38px;
}
.area-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.cty {
  fill: rgba(255, 255, 255, 0.1);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 0.6;
}
.cty.served {
  fill: var(--orange-hot);
  stroke: #fff;
  stroke-width: 1.2;
  animation: ctyGlow 3s ease-in-out infinite;
}
@keyframes ctyGlow {
  0%,
  100% {
    fill-opacity: 1;
  }
  50% {
    fill-opacity: 0.75;
  }
}
.cty-dot {
  fill: #fff;
}
/* ---- 50-mile radius around Greenville ---- */
.rad {
  /* the wash covers the whole map, so it must never eat a county click */
  pointer-events: none;
}
.rad-halo {
  /* a soft band hugging the outside of the ring: it gives the boundary weight
     the way a dimmed everything-outside would, without the hard rectangular
     seam a full-map wash leaves at the edge of the svg */
  fill: none;
  stroke: #06070a;
  stroke-width: 11;
  stroke-opacity: 0.22;
}
.rad-ring {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-dasharray: 7 5.5;
  stroke-linecap: round;
  stroke-opacity: 0.92;
}
.rad-arm {
  stroke: #fff;
  stroke-width: 1.1;
  stroke-dasharray: 3.5 4;
  stroke-opacity: 0.7;
}
.rad-hub {
  fill: #fff;
}
.rad-tick {
  fill: #fff;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-anchor: middle;
  /* map-label trick: draw the halo first so the type stays readable over the
     orange counties it crosses */
  paint-order: stroke;
  stroke: #06070a;
  stroke-width: 2.8;
  stroke-opacity: 0.8;
  stroke-linejoin: round;
}
.map-legend {
  display: flex;
  gap: 22px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* the section centres its text; left-align here so a label that wraps
     (the longer Spanish strings do) stays beside its swatch */
  text-align: left;
  color: #fff;
}
.map-legend i {
  width: 13px;
  height: 13px;
  border-radius: var(--r-xs);
  flex: none;
}
.map-legend .sw-served {
  background: var(--orange-hot);
  border: 1px solid #fff;
}
.map-legend .sw-rest {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.map-legend .sw-radius {
  background: none;
  border: 1.5px dashed rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  corner-shape: squircle;
}
@media (prefers-reduced-motion: reduce) {
  .cty.served {
    animation: none;
  }
}

/* the 50% cap would leave ~150px on a phone and stack the nine counties one
   per line; take the full width and scale the chips so they land on two rows.
   The floor is sized for a 360px phone — 320px-class screens take a third row
   rather than shrink the label below 9px. */
@media (max-width: 860px) {
  /* the svg scales with the panel, so by here the tick is under 6px on screen
     — drop it and let the legend and the note carry the radius */
  .rad-tick,
  .rad-arm {
    display: none;
  }
  .county-cloud {
    max-width: 100%;
    gap: clamp(4px, 1.2vw, 8px);
  }
  .county {
    font-size: clamp(9px, 2.45vw, 12.5px);
    padding: clamp(6px, 1.7vw, 9px) clamp(7px, 2.1vw, 14px);
    letter-spacing: 0.03em;
  }
}

/* ---------- about ---------- */
.about {
  background: var(--paper);
}
.about h2.sec {
  max-width: 900px;
}
.ab-quote {
  /* h2.sec already carries --head-sub-gap below it */
  margin-top: 24px;
  max-width: 660px;
  padding-left: 26px;
  border-left: 3px solid var(--orange);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.9;
  font-weight: 500;
  color: var(--ink2);
}
.ab-quote b {
  color: var(--ink);
  font-weight: 700;
}
.ab-sig {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  padding-left: 29px;
}
.ab-sigmark {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  corner-shape: squircle;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--disp);
  font-weight: 850;
  font-size: var(--t-xl);
  letter-spacing: 0.04em;
}
.ab-sigwho b {
  display: block;
  font-family: var(--disp);
  font-weight: 850;
  font-size: var(--t-xl);
  color: var(--ink);
}
.ab-sigwho > span {
  display: block;
  margin-top: 3px;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}
@media (max-width: 560px) {
  .ab-quote {
    padding-left: 18px;
  }
  .ab-sig {
    padding-left: 21px;
    gap: 14px;
  }
  .ab-sigmark {
    width: 46px;
    height: 46px;
    font-size: var(--t-lg);
  }
}

/* stat bar — dashed hairlines, an orange tick over each column */
/* the band belongs to Our Story, so it sits a within-section gap below the
   byline rather than floating between the two halves */
.ab-bar {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  border-top: 1.4px dashed var(--rule-dash);
  border-bottom: 1.4px dashed var(--rule-dash);
}
/* dividers on the left of every cell but the first, so each one runs the full
   band height between the two rules instead of stopping at its own content */
.ab-bar .cell {
  position: relative;
  padding: 26px 32px;
}
.ab-bar .cell + .cell {
  border-left: 1.4px dashed var(--rule-dash);
}
/* the outer edges stay flush with the column, or the ledger sits inboard of
   the heading above it */
.ab-bar .cell:first-child {
  padding-left: 0;
}
.ab-bar .cell:last-child {
  padding-right: 0;
}
.ab-bar .cell::before {
  content: "";
  position: absolute;
  top: -1.4px;
  left: 32px;
  width: 34px;
  height: 2px;
  background: var(--orange);
  transition: width 0.35s;
}
.ab-bar .cell:first-child::before {
  left: 0;
}
.ab-bar .cell:hover::before {
  width: 64px;
}
.ab-bar b {
  display: block;
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 115;
  /* under .ab-revs h3's clamp(20px, 2.3vw, 30px) at every width: these are a
     supporting figure for the label beneath them, not a heading */
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.ab-bar b em {
  font-style: normal;
  color: var(--orange-text);
}
.ab-bar b .star {
  display: inline;
  margin-left: 9px;
  font-size: 0.5em;
  vertical-align: 0.5em;
  letter-spacing: 2px;
  color: var(--star);
}
.ab-bar .cell > span {
  display: block;
  margin-top: 13px;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.75;
  color: var(--steel);
}
@media (max-width: 1040px) {
  .ab-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* two up: the divider falls between the columns, and each row's first cell
     goes flush left again */
  .ab-bar .cell:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }
  .ab-bar .cell:nth-child(2n) {
    padding-right: 0;
  }
  .ab-bar .cell:nth-child(2n + 1)::before {
    left: 0;
  }
  .ab-bar .cell:nth-child(n + 3) {
    border-top: 1.4px dashed var(--rule-dash);
  }
}
@media (max-width: 620px) {
  .ab-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .ab-bar .cell {
    padding: 26px 0;
    border-left: 0;
  }
  .ab-bar .cell + .cell {
    border-top: 1.4px dashed var(--rule-dash);
  }
  .ab-bar .cell::before {
    left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-bar .cell::before {
    transition: none;
  }
}


/* proof subsection — partners pinned around the county map, then the review
   wall, the community line and the calls to action. It sits inside About, so
   its heading holds the subsection scale rather than the section one. */
/* a between-section gap, so it has to clear twice the largest gap inside
   either half. The widest inner gap is the 48px above the closing line */
.ab-revs {
  margin-top: 96px;
}
/* heading left, lead bottom-aligned in a fixed right column */
.ab-revhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: end;
  gap: 40px;
}
.ab-revs .pk {
  display: block;
  margin-bottom: 14px;
  color: var(--orange-text);
}
/* the same display settings h2.sec uses, stepped down to about 76% of its
   size: a section heading, but plainly under "Born from the runaround" */
.ab-revs h3 {
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 118;
  text-transform: uppercase;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
/* the subsection's own sub line, on the same rhythm the section headers use
   between an h2 and its sub */
.ab-revsub {
  margin: 0;
  color: var(--ink2);
  font-size: var(--t-xl);
  line-height: 1.65;
}

/* names the half of the proof that follows: a mono label with a hairline
   running off to the right, quiet enough not to compete with the h3 above */
.nb-div {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  color: var(--steel);
}
.nb-div::after {
  content: "";
  flex: 1;
  border-top: 1.6px dashed var(--rule-dash);
}

/* ---------- the county map and its partner chips ---------- */
/* the chips are placed against the map by hand, so the zone holds a fixed
   height on desktop and the whole arrangement collapses to a stack below */
/* the zone IS the map plate: it takes the map's own box, so the cards hang
   off its corners at fixed offsets and keep their overlap whatever width the
   plate resolves to. ~59% of the content column, never under 620px. */
.nb-mapzone {
  position: relative;
  width: max(620px, 59%);
  margin: 18px auto 0;
}
.nb-mapzone .ncmap {
  display: block;
  width: 100%;
  height: auto;
}
.ncmap .g-ctx path {
  fill: rgba(15, 20, 26, 0.045);
  stroke: rgba(15, 20, 26, 0.18);
  stroke-width: 0.5;
}
.ncmap .g-served path {
  fill: var(--orange);
  stroke: var(--paper);
  stroke-width: 0.9;
}
.ncmap .g-labels text {
  font-family: var(--mono);
  font-size: 3.6px;
  letter-spacing: 0.24px;
  fill: #fff;
  font-weight: 600;
}
.ncmap .g-dots circle {
  fill: var(--ink);
  stroke: var(--surface);
  stroke-width: 0.7;
}
/* the map is drawn for the light page; on dark the context fill has to lift
   and the served counties take the brighter orange the dark bands use */
:root[data-theme="dark"] .ncmap .g-ctx path {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.26);
  stroke-width: 0.55;
}
:root[data-theme="dark"] .ncmap .g-served path {
  fill: var(--orange-hot);
  stroke: var(--paper);
}
:root[data-theme="dark"] .ncmap .g-labels text {
  fill: #1a0d06;
}
:root[data-theme="dark"] .ncmap .g-dots circle {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 0.6;
}
/* the tilt is a custom property rather than an inline transform, so hover can
   own the transform and straighten the card as it lifts */
.nb-chip {
  display: block;
  position: absolute;
  width: 295px;
  background: var(--surface);
  border: 1.4px dashed var(--btn-line);
  padding: 20px 22px;
  box-shadow: 0 10px 24px rgba(15, 20, 26, 0.07);
  transform: rotate(var(--rot, 0deg));
  transition:
    transform 0.35s,
    border-color 0.35s,
    box-shadow 0.35s;
}
.nb-chip:hover,
.nb-chip:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  border-color: var(--orange-text);
  border-style: dashed;
  box-shadow: 0 16px 32px rgba(15, 20, 26, 0.13);
}
.nb-chip:hover .n,
.nb-chip:focus-visible .n {
  color: var(--orange-btn);
}
.nb-chip .n {
  transition: color 0.35s;
}
.nb-chip .n {
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--orange-text);
}
.nb-chip h4 {
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 110;
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-top: 8px;
}
.nb-chip .meta {
  display: block;
  margin-top: 8px;
  color: var(--steel);
}
/* the dashed leader runs from a chip toward its county */
.nb-line {
  position: absolute;
  border-top: 1.4px dashed rgba(200, 67, 15, 0.55);
}

/* ---------- reviews ---------- */
/* three across under the map, so they read as a row of proof rather than the
   stacked wall they were when this sat beside a column of copy */
.ab-revlist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
  margin-top: 22px;
}
.ab-rev {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  corner-shape: squircle;
  padding: 20px 22px 17px;
  box-shadow: 0 10px 26px rgba(15, 20, 26, 0.07);
  transition:
    transform 0.35s,
    box-shadow 0.35s;
}
/* each card tacked up at its own angle */
.ab-rev.t1 {
  transform: rotate(-0.6deg);
}
.ab-rev.t2 {
  transform: rotate(0.5deg);
}
.ab-rev.t3 {
  transform: rotate(-0.4deg);
}
.ab-rev:hover {
  transform: rotate(0) translateY(-4px);
  box-shadow: 0 18px 36px rgba(15, 20, 26, 0.13);
  z-index: 4;
}
.ab-rev .tape {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 92px;
  height: 22px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(230, 83, 31, 0.18);
  border-left: 1px dashed rgba(200, 67, 15, 0.35);
  border-right: 1px dashed rgba(200, 67, 15, 0.35);
}
.ab-rev.t2 .tape {
  transform: translateX(-50%) rotate(2deg);
  background: rgba(30, 127, 216, 0.16);
  border-color: rgba(21, 95, 168, 0.3);
}
.ab-rev.t3 .tape {
  transform: translateX(-50%) rotate(-1.4deg);
  background: rgba(164, 55, 58, 0.16);
  border-color: rgba(164, 55, 58, 0.32);
}
.ab-rev blockquote {
  flex: 1;
  font-size: var(--t-lg);
  line-height: 1.7;
  font-weight: 500;
  color: var(--ink2);
}
/* pinned to the bottom, so the three footers line up however long the quote
   above them runs */
.ab-revfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ab-av {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  corner-shape: squircle;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--av, var(--steel));
  color: #fff;
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-md);
}
.ab-revwho b {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-md);
  line-height: 1.2;
}
.ab-revwho span {
  display: block;
  margin-top: 2px;
  color: var(--steel);
}
.ab-revstars {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
}
.ab-revstars svg {
  width: 14px;
  height: 14px;
  fill: var(--star);
}

/* ---------- community line and calls to action ---------- */
/* the closing line: body copy rather than a ruled band, so it reads as a
   sentence and not another divider */
.nb-foot {
  margin: 48px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: var(--t-xl);
  line-height: 1.65;
  color: var(--ink2);
}
.nb-foot a {
  color: var(--orange-text);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 1px;
  transition: color 0.25s;
}
.nb-foot a:hover {
  color: var(--orange-btn);
}
.nb-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: var(--cta-top);
  flex-wrap: wrap;
}
/* the section's closing call to action is a .btn.btn-ghost like every other
   outline CTA on the page. It adds the arrow's nudge, and fills black on
   hover rather than only brightening its edge — it closes the section, so it
   answers a pointer more firmly than a ghost mid-page does. */
.ab-gbtn .arr {
  transition: transform 0.25s;
}
.ab-gbtn:hover {
  background: var(--black-btn);
  border-color: var(--black-btn);
  color: #fff;
}
/* black on a near-black page needs the edge back, or the fill disappears */
:root[data-theme="dark"] .ab-gbtn:hover {
  border-color: var(--btn-line);
}
.ab-gbtn:hover .arr {
  transform: translateX(4px);
}

/* below this width the hand-placed chips have nowhere to sit, so the zone
   becomes an ordinary stack: map first, then the partners in 01-04 order */
@media (max-width: 1120px) {
  /* the plate gives up its fixed box: the map runs first at full width and
     the cards stack under it */
  .nb-mapzone {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .nb-mapzone .ncmap {
    width: min(640px, 100%);
    margin: 0 auto;
    order: -1;
  }
  .nb-chip {
    position: static;
    width: auto;
    --rot: 0deg;
  }
  /* the chips are authored 01, 03, 02, 04 to sit around the map */
  .nb-mapzone .nb-chip:nth-of-type(1) {
    order: 1;
  }
  .nb-mapzone .nb-chip:nth-of-type(2) {
    order: 3;
  }
  .nb-mapzone .nb-chip:nth-of-type(3) {
    order: 2;
  }
  .nb-mapzone .nb-chip:nth-of-type(4) {
    order: 4;
  }
  .nb-line {
    display: none;
  }
  .ab-revlist {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .ab-revhead {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--head-sub-gap);
  }
  .ab-revsub {
    max-width: 560px;
  }
}
@media (max-width: 700px) {
  .ab-revlist {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  /* still twice the 44px closing-line gap below */
  .ab-revs {
    margin-top: 88px;
  }
  .nb-foot {
    margin-top: 44px;
  }
}
@media (max-width: 560px) {
  .ab-rev {
    padding: 20px 18px 16px;
  }
  .nb-ctas {
    gap: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-gbtn,
  .ab-gbtn .arr,
  .ab-rev,
  .nb-chip,
  .nb-chip .n {
    transition: none;
  }
}

/* ---------- gallery : the EZ reel ---------- */
.gallery {
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
.gal-head {
  text-align: center;
  margin-bottom: var(--head-content-gap);
}
.gal-head .kicker {
  justify-content: center;
  display: inline-flex;
}
.gal-head .sub {
  margin: 0 auto;
  /* wide enough that the blurb balances onto two lines in both languages
     (the Spanish string is ~15% longer and needs the extra room) */
  max-width: 760px;
  text-wrap: balance;
}

/* filter chips */
.gal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin: 0;
}
.gal-chip {
  font-family: var(--disp);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--r-full);
  corner-shape: squircle;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  transition:
    background 0.22s,
    border-color 0.22s,
    color 0.22s,
    transform 0.22s;
}
.gal-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}
.gal-chip[aria-pressed="true"] {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}
.gal-chip .n {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-xs);
  color: var(--orange-text);
}
.gal-chip[aria-pressed="true"] .n {
  color: var(--orange-hot);
}

/* deck */
.gal-stage {
  position: relative;
  height: clamp(392px, 50vw, 574px);
  perspective: 1400px;
  touch-action: pan-y;
}
.gcard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(300px, 45vw, 520px);
  aspect-ratio: 4 / 3.4;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--r-lg);
  corner-shape: squircle;
  overflow: hidden;
  background: var(--dark2);
  transform: translate(-50%, -50%);
  transition:
    transform 0.55s cubic-bezier(0.22, 0.9, 0.24, 1),
    opacity 0.55s,
    filter 0.55s;
  box-shadow: 0 30px 60px -22px rgba(15, 20, 26, 0.45);
  will-change: transform;
}
.gcard img,
.gcard video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gcard figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 16px 12px;
  background: linear-gradient(transparent, rgba(13, 18, 24, 0.88));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s;
}
.gcard figcaption b {
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.gcard figcaption span {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--orange-hot);
  letter-spacing: 0.2em;
}
.gcard.is-center figcaption {
  opacity: 1;
}
.gcard:not(.is-center) {
  cursor: pointer;
}
.gcard:not(.is-center):hover {
  filter: brightness(1.02) saturate(1.05);
}
.gal-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: rgba(13, 18, 24, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: var(--r-full);
  corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.gal-badge svg {
  width: 10px;
  height: 10px;
}
.gal-badge.video {
  background: rgba(200, 67, 15, 0.88);
  border-color: rgba(255, 255, 255, 0.25);
}
.gal-empty {
  text-align: center;
  color: var(--steel);
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0.15em;
  padding: 40px 0;
}

/* controls */
.gal-ctrls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.gal-dots {
  display: flex;
  /* no gap: each button is a 24px target, so centres stay 24px apart and
     meet WCAG 2.5.8 without spreading the dots out visually */
  gap: 0;
}
.gal-dot {
  width: 24px;
  height: 24px;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.gal-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  corner-shape: squircle;
  background: var(--line);
  transition:
    width 0.3s,
    background 0.3s;
}
.gal-dot[aria-current="true"]::before {
  width: 18px;
  background: var(--orange);
}
.gal-arrow {
  width: 50px;
  height: 50px;
  border-radius: var(--r-md);
  corner-shape: squircle;
  cursor: pointer;
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition:
    background 0.3s,
    transform 0.3s;
}
.gal-arrow:hover {
  background: var(--orange-btn);
  border-color: var(--orange-btn);
  color: #fff;
  transform: scale(1.08);
}
.gal-arrow svg {
  width: 19px;
  height: 19px;
}

/* zoom trigger — built by JS, so it only exists where the viewer works */
.gal-zoom {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--r-full);
  corner-shape: squircle;
  background: rgba(13, 18, 24, 0.62);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.3s,
    transform 0.3s,
    background 0.22s;
}
.gal-zoom svg {
  width: 18px;
  height: 18px;
}
/* only the front card is actually reachable, so only it shows the affordance */
.gcard.is-center .gal-zoom {
  opacity: 1;
  transform: none;
}
.gcard:not(.is-center) .gal-zoom {
  pointer-events: none;
}
.gal-zoom:hover,
.gal-zoom:focus-visible {
  background: var(--orange-btn);
}

/* ---------- gallery : full-size viewer ---------- */
.gal-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
}
.gal-lb[hidden] {
  display: none;
}
.gal-lb-scrim {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(8, 12, 17, 0.9);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: lbIn 0.25s ease both;
}
/* the photo sits in a matted frame with its placard */
.gal-lb-fig {
  position: relative;
  margin: 0;
  /* the source photos are 880px wide — going past that only blurs them.
     +18 covers the mat and its hairline, so the photo itself still lands on
     exactly its native width */
  max-width: min(898px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: var(--r-lg);
  corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--dark2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 50px 110px -34px rgba(0, 0, 0, 0.9);
  animation: lbUp 0.3s cubic-bezier(0.22, 0.9, 0.24, 1) both;
}
.gal-lb-fig img {
  display: block;
  /* leave room for the mat and the placard under the photo */
  max-height: calc(100vh - clamp(130px, 16vw, 210px));
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  /* 8px inside a 20px frame — concentric with the mat */
  border-radius: var(--r-md);
  corner-shape: squircle;
  background: var(--dark);
}
.gal-lb-fig figcaption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  padding: 15px 12px 7px;
  color: #fff;
  text-align: center;
}
.gal-lb-fig figcaption b {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(15px, 1.35vw, 19px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.gal-lb-fig figcaption span {
  font-family: var(--mono);
  font-size: clamp(11px, 0.95vw, 13.5px);
  letter-spacing: 0.2em;
  color: var(--orange-hot);
}
/* hairline between the title and the counter */
.gal-lb-fig figcaption span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-right: 14px;
  vertical-align: -0.1em;
  background: rgba(255, 255, 255, 0.24);
}
.gal-lb-btn {
  position: absolute;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-full);
  corner-shape: squircle;
  background: rgba(19, 26, 34, 0.72);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.22s,
    border-color 0.22s,
    transform 0.22s;
}
.gal-lb-btn svg {
  width: 20px;
  height: 20px;
}
.gal-lb-btn:hover {
  background: var(--orange-btn);
  border-color: var(--orange-btn);
  transform: scale(1.06);
}
.gal-lb-btn.is-close {
  top: clamp(12px, 2.5vw, 26px);
  right: clamp(12px, 2.5vw, 26px);
}
.gal-lb-btn.is-prev {
  left: clamp(10px, 2.5vw, 26px);
  top: 50%;
  transform: translateY(-50%);
}
.gal-lb-btn.is-next {
  right: clamp(10px, 2.5vw, 26px);
  top: 50%;
  transform: translateY(-50%);
}
.gal-lb-btn.is-prev:hover,
.gal-lb-btn.is-next:hover {
  transform: translateY(-50%) scale(1.06);
}
.gal-lb-btn.is-prev[disabled],
.gal-lb-btn.is-next[disabled] {
  display: none;
}
/* the page behind the viewer must not scroll away under it */
body.lb-open {
  overflow: hidden;
}
@keyframes lbIn {
  from {
    opacity: 0;
  }
}
@keyframes lbUp {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}
@media (max-width: 640px) {
  .gal-lb-btn {
    width: 42px;
    height: 42px;
  }
  .gal-lb-btn.is-prev,
  .gal-lb-btn.is-next {
    top: auto;
    bottom: clamp(12px, 4vw, 24px);
    transform: none;
  }
  .gal-lb-btn.is-prev:hover,
  .gal-lb-btn.is-next:hover {
    transform: scale(1.06);
  }
  .gal-lb-fig img {
    /* the mat, the placard, and the nav buttons parked along the bottom */
    max-height: calc(100vh - 240px);
  }
}
@media (max-width: 640px) {
  .gal-stage {
    height: 88vw;
  }
  .gcard {
    width: 82vw;
    aspect-ratio: 4 / 3.6;
  }
  .gal-ctrls {
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gcard,
  .gal-chip,
  .gal-arrow,
  .gal-zoom,
  .gal-lb-btn,
  .gal-dot,
  .gal-dot::before {
    transition: none;
  }
  .gal-lb-scrim,
  .gal-lb-fig {
    animation: none;
  }
}

/* ---------- contact : hero-matched ---------- */
.contact {
  background: var(--paper);
}
.contact .mega {
  font-family: var(--disp);
  font-weight: 900;
  font-variation-settings: "wdth" 120;
  text-transform: uppercase;
  font-size: clamp(44px, 6vw, 86px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 16px 0 0;
  color: var(--ink);
}
.contact .mega .accent {
  color: var(--blue-ink);
}
.contact .mega .dot-o {
  color: var(--orange);
  font-style: normal;
}
.contact .sub {
  margin: 26px 0 var(--cta-top);
  max-width: 470px;
}
.ct-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ct-meta {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 52px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.ct-meta > * {
  padding: 22px 34px 0 0;
  margin-right: 34px;
  border-right: 1px solid var(--line);
  padding-right: 34px;
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 600;
}
.ct-meta > *:last-child {
  border-right: none;
}
.ct-meta a {
  transition: color 0.25s;
  /* links sit beside plain text of the same colour — WCAG 1.4.1 */
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ct-meta a:hover {
  color: var(--ink);
}
@keyframes ringPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 67, 15, 0.4);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(200, 67, 15, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 67, 15, 0);
  }
}
@media (max-width: 640px) {
  .ct-meta > * {
    padding: 18px 20px 0 0;
    margin-right: 20px;
    padding-right: 20px;
  }
}


/* ---------- contact : mini loader ---------- */
.scene {
  position: relative;
  /* tall enough to hold the whole throw: the arc lifts up to 150px above the
     line from the toss button to the bin, and .scene clips. Everything here
     is anchored to the bottom, so the extra height is headroom for the
     flight. */
  height: 315px;
  margin-top: 34px;
  overflow: hidden;
}
.scene .ground {
  position: absolute;
  left: -60px;
  right: -60px;
  bottom: 30px;
  height: 2.5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(15, 20, 26, 0.28) 0 38px,
    transparent 38px 72px
  );
}
.scene .ground.moving {
  animation: roadmove 1.05s linear infinite;
}
@keyframes roadmove {
  to {
    transform: translateX(-72px);
  }
}
.scene .ground2 {
  position: absolute;
  left: -60px;
  right: -60px;
  bottom: 22px;
  height: 1px;
  background: var(--line);
}
.rigwrap {
  position: absolute;
  bottom: 32px;
  left: 0;
  width: min(250px, 36vw);
  will-change: transform;
}
.rigwrap .rigbob {
  animation: rigbob 1.15s ease-in-out infinite alternate;
}
@keyframes rigbob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2px);
  }
}
.rigwrap img.rig {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 14px 18px rgba(15, 20, 26, 0.18));
}
.rigwrap.squash .rigbob {
  animation: rigsquash 0.28s ease-out;
}
@keyframes rigsquash {
  0% {
    transform: scaleY(1);
  }
  35% {
    transform: scaleY(0.955) translateY(3px);
  }
  100% {
    transform: scaleY(1);
  }
}
/* an item already landed in the can */
.scene .mini {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.scene .mini img {
  display: block;
  width: 100%;
  height: auto;
}
/* an item mid-flight. named fly-junk, not junk: .junk is the bulk-junk
   section, which paints a paper background these would otherwise inherit */
.scene .fly-junk {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
  will-change: transform;
  background: none;
}
.scene .fly-junk img {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 8px 10px rgba(15, 20, 26, 0.25));
}
.scene .puffx {
  position: absolute;
  z-index: 7;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  corner-shape: squircle;
  background: rgba(90, 101, 114, 0.4);
  filter: blur(3px);
  pointer-events: none;
  animation: puffx 0.5s ease-out forwards;
}
@keyframes puffx {
  from {
    opacity: 0.9;
    transform: scale(0.5);
  }
  to {
    opacity: 0;
    transform: scale(2.3) translateY(-12px);
  }
}
.scene .plusone {
  position: absolute;
  z-index: 8;
  font-family: var(--disp);
  font-weight: 900;
  font-size: var(--t-xl);
  color: var(--orange-text);
  pointer-events: none;
  animation: plusone 0.8s ease-out forwards;
}
@keyframes plusone {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-38px);
  }
}

/* controls, parked on the curb */
.scene .hud {
  position: absolute;
  right: 0;
  bottom: 52px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  text-align: right;
}
/* "click me" nudge sitting to the left of the button, in the same mono/arrow
   language as the scroll cue on the junk section */
.toss-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.toss-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--orange-text);
  white-space: nowrap;
  pointer-events: none;
  overflow: hidden;
  max-height: 60px;
  transition:
    opacity 0.4s,
    max-height 0.4s,
    margin-bottom 0.4s;
}
.toss-cue-arrow {
  width: 13px;
  height: 13px;
  flex: none;
  animation: tossCueNudge 1.5s ease-in-out infinite;
}
@keyframes tossCueNudge {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
}
/* retires with the ring once they have had a go */
.toss-cue.is-done {
  /* fade AND collapse: opacity alone would leave the cue's box in place */
  opacity: 0;
  max-height: 0;
  margin-bottom: -6px; /* swallow .toss-row's gap too */
}
.toss {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--disp);
  font-weight: 900;
  font-size: var(--t-md);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--r-md);
  corner-shape: squircle;
  border: none;
  background: var(--orange-btn);
  color: #fff;
  cursor: pointer;
  transition:
    transform 0.12s,
    background 0.2s;
}
.toss svg {
  width: 15px;
  height: 15px;
}
.toss:hover {
  background: #a83408;
  transform: translateY(-2px);
}
.toss:active {
  transform: translateY(2px) scale(0.97);
}
.toss[disabled] {
  opacity: 0.55;
  cursor: default;
  transform: none;
}
.scene .hudrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.scene .meter {
  width: 150px;
}
.scene .meter .bar {
  display: block;
  height: 6px;
  border-radius: var(--r-full);
  corner-shape: squircle;
  background: rgba(15, 20, 26, 0.12);
  overflow: hidden;
}
.scene .meter .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--orange-btn), var(--orange-hot));
  border-radius: var(--r-full);
  corner-shape: squircle;
  transition: width 0.35s cubic-bezier(0.22, 0.9, 0.24, 1);
}
.scene .countlbl {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  color: var(--steel);
  white-space: nowrap;
}
.scene .countlbl b {
  color: var(--ink);
}
.scene .quip {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--steel);
  min-height: 14px;
}
.scene .banner {
  position: absolute;
  left: 44%;
  top: 16%;
  transform: translate(-50%, -50%) rotate(-3deg) scale(0);
  z-index: 12;
  font-family: var(--disp);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 118;
  font-size: clamp(20px, 2.8vw, 32px);
  color: var(--orange);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}
.scene .banner.show {
  animation: bannerpop 2.1s cubic-bezier(0.22, 0.9, 0.24, 1) forwards;
}
@keyframes bannerpop {
  0% {
    transform: translate(-50%, -50%) rotate(-3deg) scale(0);
  }
  12% {
    transform: translate(-50%, -50%) rotate(-3deg) scale(1.06);
  }
  20%,
  80% {
    transform: translate(-50%, -50%) rotate(-3deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(-3deg) scale(1);
    opacity: 0;
  }
}
/* 800, not 640: the rig and the right-aligned hud first touch around 780px,
   so stack them before that */
@media (max-width: 800px) {
  .scene {
    height: 405px;
  }
  .rigwrap {
    /* capped: at the top of this breakpoint 52vw is 333px, which lifts the
       bin high enough to squeeze the flight arc */
    width: 52vw;
    max-width: 260px;
  }
  .rigwrap img.rig {
    filter: none;
  }
  .scene .hud {
    /* stacked, the hud is top-anchored, so unlike desktop the launch point
       does not follow the scene height — it has to come down itself to leave
       the arc somewhere to go */
    bottom: auto;
    top: 30px;
    right: 0;
  }
  .scene .meter {
    width: 110px;
  }
  .toss-row {
    gap: 8px;
  }
  .toss-cue.is-done {
    margin-bottom: -8px;
  }
  .toss-cue {
    letter-spacing: 0.14em;
  }
  .scene .quip {
    max-width: 22ch;
  }
  /* the stamp drops into the band between the controls and the bin. Stacked,
     the hud is top-anchored (top 30 + about 135 of content) and the rig is
     bottom-anchored (bottom 32 + a height that runs 96px at 320 to 150px at
     the cap), so the gap never starts above 165 or ends below 223 — 190
     clears both at every width in this range. Centred here rather than at
     44%, which was aimed at the desktop gap between hud and rig. */
  .scene .banner {
    top: 190px;
    left: 50%;
    /* the stamp is one nowrap line, so it has to scale with the screen rather
       than sit on the desktop floor of 20px — at 320 that line was 300px wide
       in a 264px column and clipped at both ends */
    font-size: clamp(15px, 5vw, 22px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene .ground.moving,
  .rigwrap .rigbob,
  .rigwrap.squash .rigbob,
  .toss-cue-arrow {
    animation: none !important;
  }
  .toss-cue {
    transition: none;
  }

  .scene .banner.show {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-3deg) scale(1);
  }
}

/* ---------- footer ---------- */
footer {
  background: var(--dark);
  color: var(--dk-note);
  border-top: 4px solid;
  border-image: linear-gradient(90deg, var(--blue), var(--orange-hot)) 1;
  font-family: var(--mono);
}
.foot-top {
  display: grid;
  /* Contact carries the hours table, so the middle two columns lean that way
     — otherwise "Mon – Fri" and its time wrap onto separate lines */
  grid-template-columns: 1.3fr 0.85fr 1fr 1.6fr;
  gap: clamp(28px, 4vw, 56px);
  padding: 64px 0 48px;
}
.foot-brand {
  min-width: 0;
}
.foot-logo {
  display: inline-block;
}
.foot-blurb {
  font-size: var(--t-md);
  line-height: 1.8;
  margin-top: 18px;
  max-width: 280px;
  color: var(--dk-note);
}
/* builder credit, parked in the bottom-right corner as an easter egg: at
   rest it is only the mark, faint enough to read as page furniture, and
   hovering it opens the wordmark out to the left and rebuilds the stack.
   Hidden below 920px, where the call button owns this corner */
.ss-egg {
  position: fixed;
  right: 18px;
  /* the same 26px the legal line leaves under its own text, so that at the
     foot of the scroll the credit and the legal type sit off the bottom of
     the page by the same amount. Height is stated rather than left to the
     font, so that stays true whatever the mono falls back to */
  bottom: 21.8px;
  /* under the nav (100) and the lightbox (300), over the page */
  z-index: 80;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  corner-shape: squircle;
  background: var(--dark);
  color: #a9b7c6;
  white-space: nowrap;
  /* out of sight until the hero is behind you: the scroll handler adds
     .is-on once the hero's bottom edge clears the top of the viewport */
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(15, 20, 26, 0.22);
  transition:
    opacity 0.35s,
    color 0.3s;
}
/* once the scroll gate lets it in, the pill is fully opaque in both themes:
   it is a signature, and a signature you have to hunt for is just an
   unreadable one. Hover still lights the word orange and rebuilds the mark,
   so the easter egg is in the motion rather than in the fade */
@media (min-width: 921px) {
  .ss-egg.is-on {
    opacity: 1;
    pointer-events: auto;
  }
}
.ss-egg.is-on:hover,
.ss-egg.is-on:focus-visible {
  color: var(--orange-hot);
}
/* the mark's own margins were for sitting in a line of text; in the pill the
   flexbox centres it and the word owns the gap */
.ss-egg .stackmark {
  margin: 0;
}
/* clipped rather than removed, so the link keeps its accessible name while
   the wordmark is folded away. border-box means the padding folds with it */
.ss-egg-word {
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ss-egg:hover .ss-egg-word,
.ss-egg:focus-visible .ss-egg-word {
  max-width: 190px;
  padding-left: 6px;
}
/* on a phone the corner belongs to the call button, and there is no hover to
   open the wordmark with — so the signature stops being an easter egg and
   just signs the page: it drops into the flow under the legal line, ranged
   left on the wrap's own 28px gutter, with the wordmark already out. No
   pill either — the background matched the footer anyway, and without it the
   mark sits flush on the same left edge as the type above it */
@media (max-width: 920px) {
  .ss-egg {
    position: static;
    height: auto;
    padding: 0;
    margin: 0 0 30px 28px;
    background: none;
    box-shadow: none;
    /* in the flow it is read, not found, so it skips the scroll gate */
    opacity: 1;
    pointer-events: auto;
    color: var(--dk-note);
  }
  .ss-egg-word {
    max-width: none;
    padding-left: 6px;
  }
}
/* three stacked bars with the top one lit — the StoryStack mark */
.stackmark {
  display: inline-block;
  position: relative;
  width: 11px;
  height: 11px;
  margin: 0 5px -1px 0;
}
.stackmark span {
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 1px;
  background: #7d8b9c;
}
.stackmark span:nth-child(1) {
  top: 1px;
  width: 70%;
  background: var(--orange-hot);
}
.stackmark span:nth-child(2) {
  top: 5px;
  width: 100%;
}
.stackmark span:nth-child(3) {
  top: 9px;
  width: 55%;
}
/* hovering the credit builds the mark the way a burger goes together: the
   bottom bar lands first and the orange one drops on last. Each piece is
   tossed in on an arc rather than dropped straight down - it rises to an
   apex, tips level, then falls into the stack and squashes out as it
   lands. Top and bottom come in from the left, the middle one from the
   right, so the three arcs alternate instead of tracing the same path
   three times. It runs on focus-within too, or the animation would be
   mouse-only */
@keyframes stack-drop {
  /* every step lists translate/rotate/scaleX in the same order, or the
     browser has nothing to interpolate between */
  0% {
    transform: translate(-11px, -6px) rotate(-14deg) scaleX(1);
    opacity: 0;
    /* decelerating on the way up to the apex */
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  28% {
    transform: translate(-6px, -8px) rotate(-9deg) scaleX(1);
    opacity: 1;
    /* then gravity takes it down the far side of the arc */
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.5);
  }
  62% {
    transform: translate(0, 0) rotate(0deg) scaleX(1);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  75% {
    transform: translate(0, 0) rotate(0deg) scaleX(1.14);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scaleX(1);
    opacity: 1;
  }
}
/* the same arc mirrored, for the piece that comes in from the other side */
@keyframes stack-drop-right {
  0% {
    transform: translate(11px, -6px) rotate(14deg) scaleX(1);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  28% {
    transform: translate(6px, -8px) rotate(9deg) scaleX(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.5);
  }
  62% {
    transform: translate(0, 0) rotate(0deg) scaleX(1);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  75% {
    transform: translate(0, 0) rotate(0deg) scaleX(1.14);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scaleX(1);
    opacity: 1;
  }
}
.stackmark span {
  /* the bars are flush left, so the squash spreads to the right rather than
     pulling the stack off its edge */
  transform-origin: left center;
}
.ss-egg:hover .stackmark span,
.ss-egg:focus-visible .stackmark span {
  /* backwards, so a bar waiting out its delay stays up and invisible rather
     than sitting in place and then jumping back up to fall again */
  animation: stack-drop 0.56s backwards;
}
/* bottom bar first, orange one last: the stack builds upward */
.ss-egg:hover .stackmark span:nth-child(3),
.ss-egg:focus-visible .stackmark span:nth-child(3) {
  animation-delay: 0s;
}
/* the middle bar is the only one that flies in from the right */
.ss-egg:hover .stackmark span:nth-child(2),
.ss-egg:focus-visible .stackmark span:nth-child(2) {
  animation-name: stack-drop-right;
  animation-delay: 0.16s;
}
.ss-egg:hover .stackmark span:nth-child(1),
.ss-egg:focus-visible .stackmark span:nth-child(1) {
  animation-delay: 0.32s;
}
.foot-col h3 {
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 115;
  font-size: var(--t-md);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.foot-col h3::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--orange-hot);
}
.foot-col ul {
  list-style: none;
}
/* the second heading in a column, whichever it is, gets the gap */
.foot-2nd-h {
  margin-top: 26px;
}
/* day and time are a pair; the day should never break across lines */
.foot-hours li > span {
  white-space: nowrap;
}
/* the block is sized by its widest row rather than the column, so it does not
   run wider than the contact links above it */
.foot-hours {
  width: max-content;
  max-width: 100%;
}
/* hours are reference text, not targets, so they take the smaller type and
   none of the hit-area padding the anchors need */
.foot-hours li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: var(--t-md);
  color: var(--dk-note);
}
/* the links above are set in by their hover chevron, which holds its space
   while hidden. The same glyph at the same size and gap sits in front of each
   row, so the two lists share a left edge. */
.foot-hours li::before {
  content: ">";
  display: inline-block;
  font-size: var(--t-md);
  font-weight: 600;
  visibility: hidden;
}
.foot-hours b {
  margin-left: auto;
  padding-left: 16px;
  font-weight: 600;
  color: var(--dk-body);
  white-space: nowrap;
}
.foot-col li {
  /* padding sits on the anchor so the target is the full row: a ~31px tall
     hit area */
  padding: 0;
}
.foot-col a {
  padding: 7px 0;
  font-size: var(--t-md);
  color: var(--dk-body);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    color 0.25s,
    transform 0.25s;
}
.foot-col a::before {
  content: ">";
  color: var(--orange-hot);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.25s;
  display: inline-block;
}
.foot-col a:hover {
  color: #fff;
  transform: translateX(4px);
}
.foot-col a:hover::before {
  opacity: 1;
  transform: none;
}
.foot-areas {
  list-style: none;
  padding: 0;
}
.foot-areas li {
  padding: 5px 0;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--dk-body);
}
.foot-area-note {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--orange-hot);
}
.foot-areas b {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
/* Light / Dark / Auto segmented control. The footer is dark in both themes,
   so this palette does not switch. */
.theme-toggle {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 2px;
  /* corners follow .lang: the inner radius is the outer minus the 4px
     padding */
  padding: 4px;
  margin: 0 0 22px auto;
  border: 1px solid var(--orange-hot);
  border-radius: calc(var(--r-xs) + 4px);
}
.theme-opt {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  /* keeps the 24x24 minimum target (WCAG 2.5.8) at this smaller size */
  min-height: 24px;
  padding: 5px 12px;
  border-radius: var(--r-xs);
  font-family: var(--body);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1;
  color: var(--orange-hot); /* 6.6:1 on the footer */
  transition:
    background 0.2s,
    color 0.2s;
}
.theme-opt:hover {
  background: rgba(255, 106, 44, 0.14);
}
.theme-opt[aria-checked="true"] {
  /* the button fill, not the display orange: white text needs the deeper
     tone to clear AA (4.9:1) */
  background: var(--orange-btn);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .theme-opt,
  .ss-egg,
  .ss-egg-word {
    transition: none;
  }
  .ss-egg:hover .stackmark span,
  .ss-egg:focus-visible .stackmark span {
    animation: none;
  }
}

.foot-legal {
  font-size: var(--t-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 22px 0 26px;
  border-top: 1px solid var(--dark-line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--dk-note);
}
/* the credit pill holds the window's bottom-right corner at every scroll
   position, and at the foot of the page that corner is this line's own
   right-hand end — so the legal type has to stop before it. Opened out, the
   pill reaches 192px in from the window's edge; the wrap gives the line a
   gutter of its own, so only the difference needs reserving, plus 12px of
   air. Reserving the opened width rather than the 33px resting one means
   the wordmark unfolds into empty page instead of over the type. Only where
   the pill is shown — below 920px the call button owns the corner */
@media (min-width: 921px) and (max-width: 1240px) {
  .foot-legal {
    /* the wrap is against its own 28px gutter here, so the line carries the
       whole reserve itself */
    padding-right: 176px;
  }
}
@media (min-width: 1241px) and (max-width: 1592px) {
  .foot-legal {
    /* past 1240px the centred wrap starts opening a margin of its own, and
       the line only has to make up the difference — none of it by 1592px */
    padding-right: calc(796px - 50vw);
  }
}
@media (max-width: 920px) {
  .foot-top {
    grid-template-columns: 1fr 1fr;
  }
  /* space-between has nothing to spread once these stack, and centred small
     caps read as a stray caption under left-ranged columns — so on a phone
     the legal line stacks and ranges left off the wrap's gutter, the same
     edge the signature below it starts from */
  .foot-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
  }
}
@media (max-width: 520px) {
  .foot-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 48px 0 36px;
  }
}

/* floating call (mobile) */
.float-call {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  corner-shape: squircle;
  border: 4px solid white;
  background: var(--blue-btn);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 7px 8px -4px rgba(200, 67, 15, 0.6);
  animation: ringPulse 2.5s infinite;
}
.float-call svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 920px) {
  .float-call {
    display: flex;
  }
}

/* ---------- reduced motion (WCAG 2.3.3 / 2.2.2) ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero h1 .row span {
    transform: none;
    animation: none;
  }
  .hero-copy,
  .hero-ctas,
  .hero-stats,
  .hero-dump {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-dump img,
  .sc-dump img {
    animation: none !important;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
  .dim .lineH {
    transform: scaleX(1);
  }
  .dim .dim-label {
    opacity: 1;
  }
  .capbar i {
    transition: none;
  }
  .haul-rig .wheel,
  .haul-rig .bob,
  .haul-rig .puff {
    animation: none !important;
  }
  .haul-rig .puff {
    opacity: 0;
  }
}

/* ==========================================================================
   rental agreement form (rental-agreement.html)

   Paper intake form, rebuilt as a web form. The layout tracks the printed
   sheet section for section so a customer holding the paper version can
   follow along: customer info, rental details, payment terms, terms and
   conditions, then the agreement and signature.
   ========================================================================== */
.ra-page {
  /* how far the contract lists' markers sit inboard of the text edge. Both
     lists add it, so they indent together — see the read-only contract copy
     block below. */
  --ra-list-indent: 1.2em;
  /* top clears the fixed header — same offset .hero uses */
  padding: 150px 0 clamp(56px, 10vw, 110px);
  /* `pretty` costs a little layout time but keeps the last line of a paragraph
     from ending on a single orphaned word, which this form's long terms copy
     was doing repeatedly. Inherited, so every field label and note gets it.
     Browsers without it just fall back to normal greedy wrapping. */
  text-wrap: pretty;
}
/* the display heading is short and set huge — it wants even lines, not an
   orphan-avoiding rag */
.ra-page h1.sec {
  text-wrap: balance;
}
.ra-head {
  max-width: 720px;
}
/* the paper route, offered under the intro: a line of copy with the download
   inline at the end of it, so it reads as an aside rather than competing with
   the form's own call to action further down */
.ra-paper {
  margin: 18px 0 0;
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--steel);
}
.ra-paper-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* the row is the target: 24px clears WCAG 2.5.8 at this size */
  min-height: 24px;
  margin-left: 4px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.ra-paper-btn:hover {
  color: var(--ink);
}
.ra-paper-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.ra-head .sub {
  margin-top: 0;
}
/* capped short of --wrap so the text inputs stay scannable, but wide enough
   that the numbered terms copy runs out its lines instead of wrapping early */
.ra-form {
  max-width: 980px;
  margin-top: var(--head-content-gap);
}
.ra-sec {
  /* fieldsets default to min-inline-size:min-content — without this a long
     address or a wide grid child pushes the card past its column */
  min-inline-size: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  corner-shape: squircle;
  padding: clamp(22px, 3.4vw, 34px);
  margin-bottom: 20px;
}
.ra-sec > legend {
  /* A bare legend renders on the fieldset's border, outside the padding box,
     so the card's top padding lands above it instead of below. Floating it
     drops it into normal flow inside the padding; the sibling below then has
     to clear it, or the grid wraps into the gap alongside. */
  float: left;
  width: 100%;
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 22px;
  padding: 0;
}
.ra-sec > legend + * {
  clear: both;
}
.ra-sec > legend .ra-step {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--orange-text);
  display: block;
  margin-bottom: 7px;
}

/* ---------- fields ---------- */
.ra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.ra-field.wide {
  grid-column: 1 / -1;
}
.ra-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.ra-field label {
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--ink);
}
.ra-field input,
.ra-field select,
.ra-field textarea {
  font-family: var(--body);
  /* --t-xl has to stay at 16px for this rule's sake: under 16px, iOS zooms
     the whole page when a field takes focus. The scale is free to move
     anywhere else; this is the one step pinned by a browser rather than by
     taste. */
  font-size: var(--t-xl);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  corner-shape: squircle;
  padding: 13px 15px;
  width: 100%;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.ra-field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
}
.ra-field input:hover,
.ra-field select:hover,
.ra-field textarea:hover {
  border-color: var(--btn-line);
}
.ra-field input:focus,
.ra-field select:focus,
.ra-field textarea:focus {
  background: var(--surface);
  border-color: var(--focus);
}
/* the lead line under a legend, where a section needs a word of setup before
   its fields. Same gap the legend leaves, so every section starts on the
   same rhythm whether or not it has one. */
.ra-lead {
  font-size: var(--t-lg);
  line-height: 1.65;
  color: var(--orange-text);
  margin: -6px 0 22px;
}
/* notes about how EZ Waste handles a field, rather than instructions to the
   person filling it in. --orange-text is the accent tuned for small type:
   5.2:1 on paper, 7.0:1 in dark mode */
.ra-hint {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--orange-text);
}
/* a hint that closes the whole section rather than one field: it spans the
   grid and steps back to the note colour, since it is reassurance rather than
   an instruction about the field above it */
.ra-hint-foot {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: var(--steel);
}

/* The line that says which language the agreement is actually in. It closes
   the rental terms rather than the form, so it ranges left with them and takes
   a hairline above: a footnote to the eight terms, not a ninth one. */
.ra-govern {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--steel);
}

/* invalid only after the browser has something to judge, so the form does not
   turn red before it has been filled in */
.ra-form.was-submitted .ra-field input:invalid,
.ra-form.was-submitted .ra-field select:invalid,
.ra-form.was-submitted .ra-field textarea:invalid {
  border-color: var(--orange-btn);
}

/* ---------- date picker ----------
   The native <input type="date"> popup is browser chrome and cannot be
   restyled, so the indicator that opens it is hidden and the calendar below
   is drawn by the page. The input itself stays a real date field, so its
   value, min/max and validation are unchanged. */
.ra-date {
  position: relative;
}
.ra-date input[type="date"] {
  /* iOS keeps its own inner layout for date fields unless appearance is
     cleared: it sizes the control to its value rather than the box, so the
     field renders shorter than its siblings and the text sits off-centre */
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  padding-right: 46px;
}
.ra-date input[type="date"]::-webkit-calendar-picker-indicator,
.ra-date input[type="date"]::-webkit-inner-spin-button,
.ra-date input[type="date"]::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
.ra-date-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--steel);
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s;
}
.ra-date-btn svg {
  width: 19px;
  height: 19px;
}
.ra-date-btn:hover {
  color: var(--orange-text);
  background: var(--paper2);
}
/* the page ring is 3px with a 3px offset, which the panel edge clips on the
   outer columns; inside the calendar it tucks in */
.dp :focus-visible {
  outline-width: 2px;
  outline-offset: 1px;
}
.dp {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: 292px;
  max-width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  corner-shape: squircle;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(15, 20, 26, 0.18);
}
.dp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.dp-title {
  flex: 1;
  text-align: center;
  font-family: var(--disp);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.dp-nav {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: none;
  color: var(--ink2);
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.dp-nav svg {
  width: 16px;
  height: 16px;
}
.dp-nav:hover:not(:disabled) {
  color: var(--orange-text);
  border-color: var(--orange-text);
}
.dp-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.dp-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.dp-week span {
  text-align: center;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--steel);
}
.dp-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.dp-day {
  aspect-ratio: 1;
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  font-family: var(--body);
  font-size: var(--t-lg);
  color: var(--ink);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
/* muted by colour, not opacity: these days are clickable, and 50% opacity put
   them at 2.14:1 where 4.5:1 is required (WCAG 1.4.3) */
.dp-day.out {
  color: var(--steel);
}
.dp-day:hover:not(:disabled) {
  background: var(--paper2);
}
/* today is marked by a ring so it still reads once another day is selected */
.dp-day.today {
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-weight: 700;
}
.dp-day.on,
.dp-day.on:hover {
  background: var(--orange-btn);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}
.dp-day:disabled {
  color: var(--steel);
  opacity: 0.3;
  cursor: default;
}
.dp-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.dp-today {
  border: 0;
  background: none;
  min-height: 24px;
  padding: 5px 12px;
  border-radius: var(--r-xs);
  color: var(--orange-text);
  cursor: pointer;
}
.dp-today:hover {
  background: var(--paper2);
}
/* the panel would otherwise run off the right edge of a narrow column */
@media (max-width: 520px) {
  .dp {
    left: auto;
    right: 0;
  }
}

/* validation messages, written by the form's own script. Notes share this
   accent, so an error is set apart by weight and the badge rather than by
   colour alone. */
.ra-err {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  font-size: var(--t-md);
  line-height: 1.45;
  font-weight: 650;
  color: var(--orange-text);
}
.ra-err::before {
  content: "!";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: var(--r-full);
  corner-shape: squircle;
  background: var(--orange-text);
  color: var(--paper);
  font-size: var(--t-xs);
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}

/* the native select arrow is drawn by the OS and cannot be restyled, so it is
   switched off and the chevron below is drawn to match the date picker's */
.ra-select {
  position: relative;
}
.ra-field .ra-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
}
.ra-select::after {
  content: "";
  position: absolute;
  right: 19px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.ra-select:hover::after {
  border-color: var(--orange-text);
}

/* the form is mostly required, but marking the exceptions stopped working
   once only two fields were optional, so the majority carries the mark */
.ra-req {
  margin-left: 3px;
  color: var(--orange-text);
  font-weight: 700;
}
.ra-key {
  margin-bottom: 18px;
  font-size: var(--t-md);
  color: var(--steel);
}
/* an acknowledgement that closes a section has nothing after it to clear */
.ra-sec > .ra-agree:last-child {
  margin-bottom: 0;
  margin-top: 22px;
}

/* ---------- read-only contract copy ---------- */
.ra-terms {
  font-size: var(--t-xl);
  line-height: 1.75;
  color: var(--ink2);
}
.ra-terms > li + li {
  margin-top: 15px;
}
.ra-terms li::marker {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--orange-text);
}
/* Both contract lists are padded in two parts, and only the second is an
   indent. The global reset strips list padding, and `list-style-position:
   outside` then renders the marker beyond the list's own left edge — which put
   the markers in the card's padding, left of the section heading. So the first
   term is the marker's own width, clawing it back to the text edge: 1.65em for
   the ol, because "8." is wider than a bullet, and 1.15em for the ul. At those
   values both markers sit flush with the lead line above them.
   --ra-list-indent is the indent proper, added to each, which is why the two
   lists carry the same indent from different starting numbers and their
   markers still line up with each other down the page. */
ol.ra-terms {
  padding-left: calc(1.65em + var(--ra-list-indent));
}
.ra-note-list {
  padding-left: calc(1.15em + var(--ra-list-indent));
}
.ra-note-list li + li {
  margin-top: 10px;
}

/* ---------- agreement + signature ---------- */
.ra-agree {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  corner-shape: squircle;
  padding: 18px;
  margin-bottom: 20px;
}
.ra-agree input[type="checkbox"] {
  /* 24px is the WCAG 2.5.8 minimum target, the same floor .theme-opt holds */
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
  accent-color: var(--blue-btn);
  cursor: pointer;
}
.ra-agree label {
  font-size: var(--t-xl);
  line-height: 1.65;
  color: var(--ink);
  cursor: pointer;
}
/* the typed name stands in for the handwritten line on the paper form */
.ra-sign input {
  font-family: var(--disp);
  font-size: 20px;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* ---------- submit + status ---------- */
.ra-submit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.ra-submit .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
/* the status reads to the left of the button it reports on, without moving
   in the markup, where it has to follow that control */
.ra-status {
  order: -1;
  font-size: var(--t-xl);
  line-height: 1.6;
  font-weight: 500;
  margin: 0;
}
.ra-status:empty {
  display: none;
}
.ra-status.err {
  color: var(--orange-text);
}
.ra-status.ok {
  color: var(--blue-ink);
}
/* the success panel replaces the form outright — leaving a filled-in form on
   screen invites a second identical submission */
.ra-done {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  corner-shape: squircle;
  padding: clamp(30px, 5vw, 50px);
  text-align: center;
}
.ra-done h2 {
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 115;
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.02;
  margin: 0 0 14px;
  color: var(--ink);
}
.ra-done p {
  font-size: var(--t-xl);
  line-height: 1.7;
  color: var(--ink2);
  max-width: 46ch;
  margin: 0 auto 26px;
}
.ra-done .btn {
  margin: 0 4px 8px;
  /* three buttons now, and the download's label is the longest on the site in
     both languages — let it wrap rather than push the panel wider than the
     phone it is on */
  white-space: normal;
  text-align: center;
}
/* two paragraphs close the panel, so only the last one clears the buttons */
.ra-done p {
  margin-bottom: 14px;
}
.ra-done p:last-of-type {
  margin-bottom: 26px;
}

@media (max-width: 640px) {
  .ra-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ra-sec {
    padding: 22px 18px;
  }
}
/* the acknowledgement is required but sits outside .ra-field, so it needs its
   own invalid state or it is the one control that never turns red */
.ra-form.was-submitted .ra-agree:has(input:invalid) {
  border-color: var(--orange-btn);
}

/* ---------- "your dumpster is on the way" arrival strip ----------
   Same rig, same road, same classes as the hero haul in index.html, so it
   inherits rigBob / wheelSpin / puff for free. The difference is the journey:
   the hero rig is scroll-driven and leaves, this one drives in once on load
   and parks — the wheels and exhaust stop when it does. */
.ra-arrive {
  max-width: 780px;
  margin-top: 30px;
  overflow: hidden; /* the rig starts off-canvas to the left */
}
.ra-arrive .haul-road {
  height: 58px;
  max-width: 780px;
}
.ra-arrive .haul-rig {
  width: 190px;
  left: 0;
  /* .haul-rig sits at bottom:-2px so the hero's wheels overhang the road.
     Here the strip clips its overflow to hide the off-canvas start, and that
     same clip would shave the tyres — so sit the rig on the line instead. */
  bottom: 0;
  animation: raRollIn 2.4s cubic-bezier(0.16, 0.62, 0.24, 1) both;
}
@keyframes raRollIn {
  from {
    transform: translateX(-118%);
  }
  to {
    transform: translateX(0);
  }
}
/* wheels and exhaust run for the length of the drive, then stop. Non-integer
   iteration counts land them mid-cycle, which reads as coasting to a halt. */
.ra-arrive .haul-rig .wheel {
  animation-iteration-count: 2;
}
.ra-arrive .haul-rig .puff {
  animation-iteration-count: 1.5;
}
/* the road dashes slide under the rig so it reads as ground moving, not a
   truck sliding across a static line */
.ra-arrive .haul-road::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  /* --btn-line is tuned for a 3:1 control outline and reads too hot for road
     markings; at .45 it lands on the hero road's weight in both themes */
  opacity: 0.45;
  background: repeating-linear-gradient(
    to right,
    var(--btn-line) 0 14px,
    transparent 14px 26px
  );
  animation: raRoad 2.4s linear both;
}
@keyframes raRoad {
  from {
    background-position-x: -260px;
  }
  to {
    background-position-x: 0;
  }
}
.ra-arrive .haul-road {
  border-bottom: 0; /* the ::before dashes stand in for the static rule */
}

/* ---------- leave confirmation ----------
   Standing in for confirm(), which arrives in the browser's colours with the
   origin printed above it — on a page asking someone to sign something, that
   reads as a warning from somewhere else. Same shape as the rest of the
   site's panels: surface, large radius, squircle. */
.ra-leave {
  margin: auto;
  max-width: min(430px, calc(100vw - 40px));
  padding: clamp(26px, 5vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  corner-shape: squircle;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 34px 70px -34px rgba(15, 20, 26, 0.28);
}
.ra-leave::backdrop {
  background: rgba(13, 18, 24, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.ra-leave h2 {
  margin: 0 0 10px;
  font-family: var(--disp);
  font-weight: 850;
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  font-size: clamp(21px, 3.2vw, 27px);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.ra-leave p {
  margin: 0 0 22px;
  font-size: var(--t-xl);
  line-height: 1.6;
  color: var(--ink2);
}
.ra-leave-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* the two answers share the row evenly rather than the primary running wide */
.ra-leave-acts .btn {
  flex: 1 1 auto;
  justify-content: center;
  white-space: normal;
  text-align: center;
}

/* ---------- close ---------- */
/* matches .ra-form, so Close lands on the form's right edge rather than
   stopping short of it */
.ra-top {
  max-width: 980px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.ra-close {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  margin-top: 6px;
  padding: 10px 18px;
  border: 1.5px solid var(--btn-line);
  border-radius: var(--r-full);
  corner-shape: squircle;
  background: none;
  color: var(--ink);
  font-family: var(--disp);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.ra-close:hover {
  background: var(--wash);
  border-color: var(--ink);
}
.ra-close svg {
  width: 14px;
  height: 14px;
  flex: none;
}

@media (max-width: 640px) {
  .ra-top {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 14px;
  }
  .ra-close {
    margin-top: 0;
    /* stacked, it sits above the heading rather than beside it, and column
       -reverse would range it left with the type. Sent to the right edge it
       still reads as the corner control it is on desktop, and it leaves the
       heading the whole left edge to start from. */
    align-self: flex-end;
  }
  .ra-arrive .haul-rig {
    width: 148px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* the rig is already parked; skip the drive entirely rather than replay it
     at speed, and hold the road still */
  .ra-arrive .haul-rig,
  .ra-arrive .haul-road::before {
    animation: none;
  }
  .ra-arrive .haul-rig .wheel,
  .ra-arrive .haul-rig .puff {
    animation: none;
  }
  .ra-arrive .haul-rig .puff {
    opacity: 0;
  }
}

@media (max-width: 920px) {
  .ra-page {
    padding-top: 120px; /* the header shrinks here, same as .hero */
  }
}