/* ==========================================================================
   506 Junk — base.css  (design system v2)
   Garbage bins don't have to look like garbage.
   Order: 1 tokens · 2 reset · 3 type · 4 layout · 5 components · 6 header ·
          7 footer · 8 utilities · 9 motion
   Read CONVENTIONS.md before adding to this file. Page-specific CSS belongs in
   /assets/css/pages/<id>.css, never here.
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root {
  /* Brand palette (from /brand/logo.html) */
  --c-black: #0B0B0C;        /* Bin Black: the colour of every bin */
  --c-ink-900: #141416;
  --c-ink-800: #1C1C1F;
  --c-ink-700: #2A2A2E;
  --c-ink-600: #3A3A3F;
  --c-yellow: #FFC72C;       /* Hi-Vis Yellow: the rail, and whatever you notice first */
  --c-yellow-600: #F2B300;   /* hover on yellow */
  --c-yellow-100: #FFF4D1;   /* tint for highlights / warning alerts */
  --c-yellow-800: #9A6F00;   /* the under-edge of a yellow button on black or yellow */
  --c-white: #FFFFFF;

  /* Neutrals (warm, concrete-toned) */
  --c-paper: #F4F2EE;
  --c-concrete: #E6E3DC;
  --c-line: #D6D2C9;
  --c-line-strong: #B9B4AA;
  --c-muted: #5C5A55;        /* 6.9:1 on white, 6.2:1 on paper */
  --c-muted-dark: #A8A59E;   /* 8:1 on black */
  --c-body: #232220;

  /* Status (used only for alerts, validation and fill-lines; never decoration) */
  --c-red: #C2301F;          /* darkened from logo red #D93B2B for AA text */
  --c-red-100: #FBE9E6;
  --c-green: #17744A;
  --c-green-100: #E3F3EA;
  --c-blue: #1F4FA3;
  --c-blue-100: #E7EEFA;

  /* Semantic, context-aware tokens (re-mapped inside .theme-dark) */
  --bg: var(--c-white);
  --fg: var(--c-black);
  --text: var(--c-body);
  --muted: var(--c-muted);
  --surface: var(--c-white);
  --surface-2: var(--c-paper);
  --line: var(--c-line);
  --focus: var(--c-black);
  --link: var(--c-black);

  /* Type */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --stretch-display: 118%;   /* Archivo width axis: wide, like the wordmark */
  --stretch-ui: 108%;

  --fs-xs: 0.8125rem;                                  /* 13 */
  --fs-sm: 0.9375rem;                                  /* 15 */
  --fs-base: 1.0625rem;                                /* 17 body */
  --fs-md: 1.1875rem;                                  /* 19 lede */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);     /* 20→24  h4 */
  --fs-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.875rem);    /* 22→30  h3 */
  --fs-2xl: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);    /* 30→48  h2 */
  --fs-3xl: clamp(2.25rem, 1.4rem + 3.8vw, 4.25rem);   /* 36→68  h1 */
  --fs-4xl: clamp(2.6rem, 1.4rem + 5.4vw, 5.75rem);    /* 42→92  hero */

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.6;

  /* Spacing (4px base) */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-9: 6rem;     /* 96 */
  --sp-10: 8rem;    /* 128 */
  --section-y: clamp(3.5rem, 2.25rem + 4vw, 5.75rem);  /* 56 → 92 */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);  /* 16px on phones */

  /* Widths */
  --w-narrow: 46rem;   /* 736 — prose, forms */
  --w-content: 76rem;  /* 1216 — default container */
  --w-wide: 88rem;     /* 1408 */
  --measure: 64ch;

  /* Radii */
  --r-xs: 3px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 0;   /* owner rule: no pill shapes anywhere */

  /* Shadows */
  --sh-1: 0 1px 2px rgb(11 11 12 / .06), 0 1px 1px rgb(11 11 12 / .04);
  --sh-2: 0 6px 16px -6px rgb(11 11 12 / .14), 0 2px 4px rgb(11 11 12 / .05);
  --sh-3: 0 24px 48px -16px rgb(11 11 12 / .28), 0 4px 10px rgb(11 11 12 / .06);
  --sh-hard: 0 3px 0 var(--c-black);   /* the tactile under-edge every primary button has (light backgrounds) */
  --sh-hard-dark: 0 3px 0 var(--c-yellow-800); /* same edge on black / photo / yellow backgrounds */

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 140ms;
  --t: 240ms;

  /* Form controls: one height for every single-line field (input, tel, date, select) */
  --field-h: 3.25rem;  /* 52 */

  /* Header */
  --header-h: 72px;
  --z-header: 50;
  --z-actionbar: 45;
  --z-dialog: 100;

  color-scheme: light;
}

/* Dark context: any black section, card or band. Components read these tokens. */
.theme-dark,
.section--dark,
.cta-band,
.site-footer,
.utility-bar,
.mobile-nav {
  --bg: var(--c-black);
  --fg: var(--c-white);
  --text: #E9E7E2;
  --muted: var(--c-muted-dark);
  --surface: var(--c-ink-800);
  --surface-2: var(--c-ink-900);
  --line: #34343A;
  --focus: var(--c-yellow);
  --link: var(--c-white);
  color-scheme: dark;
}

/* 2. RESET ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, h4, h5, h6, li, dd, blockquote { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
[hidden] { display: none !important; }
:target { scroll-margin-top: calc(var(--header-h) + 16px); }
::selection { background: var(--c-yellow); color: var(--c-black); }

/* Focus: always visible for keyboard users, never for mouse clicks */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 3. TYPOGRAPHY ============================================================ */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display, .hero__title {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  color: var(--fg);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.display { font-size: var(--fs-4xl); font-weight: 900; text-transform: uppercase; line-height: .94; }
h1, .h1 { font-size: var(--fs-3xl); font-weight: 900; text-transform: uppercase; line-height: .98; }
/* Two voices. LOUD (wide caps) belongs to the page's h1 / hero title ONLY: one shout per page.
   CALM (mixed case, tighter) is every other heading, CTA bands included, so a long page reads as a
   hierarchy, not a wall of capitals. .loud exists for the styleguide and rare one-offs; .calm turns any heading down. */
h2, .h2 { font-size: var(--fs-2xl); font-weight: 780; font-stretch: 106%; letter-spacing: -0.025em; line-height: 1.04; }
.loud { text-transform: uppercase; font-weight: 900; font-stretch: var(--stretch-display); letter-spacing: -0.01em; }
.calm { text-transform: none; font-weight: 780; font-stretch: 106%; letter-spacing: -0.025em; }
/* Loud length rule: a loud title is <= 28 characters (about 4 short words). Longer titles, or any title
   with a place name ("Bin rentals in Grand Bay-Westfield"), add .is-long: it stays loud on desktop but
   narrows the width axis and steps down a size on phones so no word is split or orphaned. Every loud
   title also refuses to break inside a word and narrows itself below 420px. */
:is(h1, .h1, .display, .hero__title, .loud) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 419px) {
  :is(h1, .h1, .display, .hero__title, .loud) { font-stretch: 108%; }
  :is(h1, .h1, .display, .hero__title, .loud).is-long { font-size: 2rem; font-stretch: 100%; letter-spacing: -0.015em; line-height: 1.02; }
}
@media (min-width: 420px) and (max-width: 899px) {
  :is(h1, .h1, .display, .hero__title, .loud).is-long { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3rem); font-stretch: 108%; }
}
.cta-band h2 { font-size: var(--fs-3xl); font-weight: 900; font-stretch: 108%; letter-spacing: -0.03em; line-height: 1; } /* big, but calm: no caps */
h3, .h3 { font-size: var(--fs-xl); font-weight: 800; line-height: var(--lh-snug); font-stretch: 110%; }
h4, .h4 { font-size: var(--fs-lg); font-weight: 800; line-height: var(--lh-snug); font-stretch: 105%; letter-spacing: 0; }
h5, h6 { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 800; color: var(--fg); }

p { text-wrap: pretty; }
.lede { font-size: var(--fs-md); line-height: 1.55; color: var(--text); max-width: 60ch; }
.small, small { font-size: var(--fs-sm); }
.fine { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.muted { color: var(--muted); }
strong, b { font-weight: 700; color: var(--fg); }

a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color var(--t-fast); }
a:hover { text-decoration-color: currentColor; }

/* Eyebrow: small caps label with the yellow rail tab */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-stretch: 112%;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: ""; width: 1.25rem; height: .4rem; flex: none;
  background: var(--c-yellow); box-shadow: 0 2px 0 var(--c-black);
}
.theme-dark .eyebrow::before, .section--dark .eyebrow::before, .cta-band .eyebrow::before { box-shadow: none; }
.cta-band--yellow .eyebrow { color: var(--c-black); }
.cta-band--yellow .eyebrow::before { background: var(--c-black); }

/* Highlight: a slim yellow rail under the phrase (the bin lid's rail), not a heavy marker band, so a loud
   title never fights the header's yellow Book for attention. */
.mark, mark {
  color: inherit;
  background: var(--c-yellow);
  padding: 0 .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.section--dark .mark, .theme-dark .mark, .cta-band .mark, .hero--photo .mark { background: none; color: var(--c-yellow); padding: 0; }
/* On yellow, the highlight becomes a black under-rail so it still reads as emphasis */
.cta-band--yellow .mark { color: inherit; background: none; padding: 0; }

/* Prose: long-form copy (FAQ answers, privacy, policies) */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-xl); text-transform: none; font-weight: 800; margin-top: 2em; }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--muted); }

.num, .tabular { font-variant-numeric: tabular-nums; }
code, kbd { font-family: var(--font-mono); font-size: .875em; background: var(--surface-2); padding: .1em .35em; border-radius: var(--r-xs); }

/* 4. LAYOUT ================================================================ */
.container { width: 100%; max-width: calc(var(--w-content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--w-narrow) + 2 * var(--gutter)); }
.container--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); background: var(--bg); color: var(--text); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top { padding-top: 0; }
.section--paper { --bg: var(--c-paper); --surface-2: var(--c-concrete); }
.section--concrete { --bg: var(--c-concrete); }
.section--dark { background: var(--bg); }
.section--line { border-top: 1px solid var(--line); }

/* Section header: eyebrow + h2 + lede, left aligned by default */
.section-head { max-width: 48rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head > h2 + p, .section-head > .h2 + p { margin-top: var(--sp-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5); }
.section-head--split > div { max-width: 48rem; }
/* Head beside content (FAQ, alerts): no bottom margin, head sticks while the list scrolls */
.split > .section-head { margin-bottom: 0; }

/* Stack: vertical rhythm. Set --stack on the element to change the gap. */
.stack { display: flex; flex-direction: column; gap: var(--stack, var(--sp-4)); }
.stack--sm { --stack: var(--sp-2); }
.stack--lg { --stack: var(--sp-6); }
.stack--xl { --stack: var(--sp-8); }

/* Cluster: horizontal, wraps (buttons, badges, chips) */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--sp-3)); }
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }

/* Button group: the ONLY way to put buttons side by side. Wraps on tablets; below 480px every button
   becomes full width and stacks, primary first, so a phone never shows a ragged row of mixed widths.
   A trailing .link-arrow centres under the stack. .btn-group--center centres the row on wide screens. */
.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.btn-group--center { justify-content: center; }
@media (max-width: 479px) {
  .btn-group, .hero__actions, .cta-band__actions, .footer-top__actions { flex-direction: column; align-items: stretch; }
  .btn-group > .btn, .hero__actions > .btn, .cta-band__actions > .btn, .footer-top__actions > .btn { width: 100%; }
  .btn-group > .link-arrow { align-self: center; min-height: 2.75rem; }
}

/* Grid: auto-fit cards. Set --min on the element for a different card width. */
.grid { display: grid; gap: var(--grid-gap, clamp(1rem, .6rem + 1.5vw, 1.75rem)); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 17rem), 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 479px) { .grid--4 { grid-template-columns: 1fr; } }

/* Split: text + media side by side, stacked on mobile */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 1.15fr .85fr; }
  .split--wide-media { grid-template-columns: .85fr 1.15fr; }
  .split--reverse > :first-child { order: 2; }
  .split--top { align-items: start; }
}

.center { text-align: center; }
.measure { max-width: var(--measure); }

/* Media frame: every <img> in content sits in one of these so it can't shift layout */
.media { position: relative; overflow: hidden; border-radius: var(--r); background: var(--c-concrete); aspect-ratio: var(--ratio, 4 / 3); }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }
.media--wide { --ratio: 16 / 9; }
.media--square { --ratio: 1; }
.media--tall { --ratio: 4 / 5; }
/* The 33° "nose" from the logo plate: chamfered bottom-left corner. Decorative
   only; never put it on focusable elements (it clips the focus ring). */
/* .nose: the chamfered corner belonged to the retired plate logo; kept as a no-op class so old markup still renders, with plain rounded corners */
.nose { clip-path: none; border-radius: var(--r-md); overflow: hidden; }
.media__caption { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); }

/* 5. COMPONENTS ============================================================ */

/* ---- 5.1 Icons (inline SVG sprite lives in header.html) ---- */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.icon--fill { fill: currentColor; stroke: none; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.75rem; height: 1.75rem; }
.icon--xl { width: 2.5rem; height: 2.5rem; }
/* Icon tile: square black tile with a yellow icon (service icons, features) */
.icon-tile { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--r-sm); background: var(--c-black); color: var(--c-yellow); flex: none; }
.icon-tile .icon { width: 1.6rem; height: 1.6rem; }
.icon-tile--yellow { background: var(--c-yellow); color: var(--c-black); }
.icon-tile--sm { width: 2.5rem; height: 2.5rem; }
.icon-tile--sm .icon { width: 1.25rem; height: 1.25rem; }

/* ---- 5.2 Buttons ---- */
.btn {
  --btn-bg: var(--c-black); --btn-fg: var(--c-white); --btn-bd: var(--btn-bg); --btn-sh: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .7rem 1.35rem;
  font-family: var(--font-display); font-stretch: var(--stretch-ui);
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1;
  text-decoration: none; text-align: center; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 2px solid var(--btn-bd); border-radius: var(--r-sm);
  box-shadow: var(--btn-sh);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Primary: yellow. One per view is the rule; it is the thing you should do next. */
.btn--primary { --btn-bg: var(--c-yellow); --btn-fg: var(--c-black); --btn-bd: var(--c-black); --btn-sh: var(--sh-hard); }
.btn--primary:hover { --btn-bg: var(--c-yellow-600); --btn-sh: 0 4px 0 var(--c-black); }
.btn--primary:active { --btn-sh: 0 1px 0 var(--c-black); transform: translateY(2px); }
/* Every primary button keeps its 3px under-edge, everywhere. On dark it turns amber so it stays visible. */
:is(.theme-dark, .section--dark, .cta-band, .site-footer, .mobile-nav, .hero--photo, .card--dark) .btn--primary { --btn-bd: var(--c-yellow); --btn-sh: var(--sh-hard-dark); }
:is(.theme-dark, .section--dark, .cta-band, .site-footer, .mobile-nav, .hero--photo, .card--dark) .btn--primary:hover { --btn-bg: var(--c-yellow-600); --btn-bd: var(--c-yellow-600); --btn-sh: 0 4px 0 var(--c-yellow-800); }
:is(.theme-dark, .section--dark, .cta-band, .site-footer, .mobile-nav, .hero--photo, .card--dark) .btn--primary:active { --btn-sh: 0 1px 0 var(--c-yellow-800); }

/* Secondary: solid black (inverts to white on dark) */
.btn--secondary { --btn-bg: var(--c-black); --btn-fg: var(--c-white); }
.btn--secondary:hover { --btn-bg: var(--c-ink-700); --btn-bd: var(--c-ink-700); }
.theme-dark .btn--secondary, .section--dark .btn--secondary, .cta-band .btn--secondary, .site-footer .btn--secondary, .mobile-nav .btn--secondary { --btn-bg: var(--c-white); --btn-fg: var(--c-black); --btn-bd: var(--c-white); }
.theme-dark .btn--secondary:hover, .section--dark .btn--secondary:hover, .cta-band .btn--secondary:hover { --btn-bg: var(--c-concrete); --btn-bd: var(--c-concrete); }

/* Ghost: outline only */
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: currentColor; }
.btn--ghost:hover { --btn-bg: color-mix(in srgb, var(--fg) 8%, transparent); }

/* Phone: shows the number; tel: link. Ink chip (black on light, white on dark) + tabular digits.
   The chip is never yellow: yellow belongs to the one primary button in view. */
.btn--phone { --btn-bg: var(--surface); --btn-fg: var(--fg); --btn-bd: var(--fg); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; padding-left: .45rem; }
.btn.btn--phone { padding-block: .3rem; }
.btn--phone .btn__chip { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-xs); background: var(--fg); color: var(--bg); }
.btn--phone .btn__chip .icon { width: 1.05rem; height: 1.05rem; }
.btn--phone:hover { --btn-bg: var(--surface-2); }

/* Text link with arrow */
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .03em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.link-arrow .icon { transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-yellow); }

/* Sizes */
.btn--sm { min-height: 2.5rem; padding: .45rem .95rem; font-size: var(--fs-xs); }
.btn--lg { min-height: 3.5rem; padding: .9rem 1.75rem; font-size: 1rem; }
.btn--xl { min-height: 4rem; padding: 1rem 2.1rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: 3rem; min-height: 3rem; }

/* ---- 5.3 Badges & chips ---- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .6rem; border-radius: var(--r-xs);
  font-family: var(--font-display); font-stretch: 110%;
  font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
  background: var(--c-concrete); color: var(--c-black);
  white-space: nowrap;
}
.badge .icon { width: 1em; height: 1em; }
.badge--yellow { background: var(--c-yellow); color: var(--c-black); }
.badge--black { background: var(--c-black); color: var(--c-white); }
.badge--outline { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px currentColor; }
.badge--success { background: var(--c-green-100); color: var(--c-green); }
.badge--danger { background: var(--c-red-100); color: var(--c-red); }
.section--dark .badge:not([class*="badge--"]), .theme-dark .badge:not([class*="badge--"]) { background: var(--c-ink-700); color: var(--c-white); }

/* Chip: a small square-cornered tag, e.g. towns, materials (no pills) */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: var(--r-xs); border: 1px solid var(--c-line-strong); background: var(--surface); color: var(--fg); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
a.chip:hover { border-color: var(--fg); }

/* ---- 5.4 Cards ---- */
.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
}
.card > h3, .card > .h3, .card > h4 { margin-bottom: var(--sp-1); }
.card__foot { margin-top: auto; padding-top: var(--sp-3); }
/* Rail: the yellow top bar of the bin lid */
.card--rail { border-top: 0; padding-top: calc(clamp(1.25rem, 1rem + 1vw, 2rem) + 6px); overflow: hidden; }
.card--rail::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--c-yellow); }
.card--dark { --surface: var(--c-black); --fg: var(--c-white); --text: #E9E7E2; --muted: var(--c-muted-dark); --line: var(--c-black); --focus: var(--c-yellow); }
.card--paper { --surface: var(--c-paper); border-color: transparent; }
.card--flat { border-color: transparent; background: transparent; padding: 0; }
.card--raised { box-shadow: var(--sh-2); border-color: transparent; }
/* Whole-card link: put .card__link on the heading's <a>; the card becomes clickable */
.card--link { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--fg); }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card__link:focus-visible { outline: none; }
.card--link:has(.card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.card__media { margin: calc(-1 * clamp(1.25rem, 1rem + 1vw, 2rem)); margin-bottom: var(--sp-2); border-radius: var(--r) var(--r) 0 0; }

/* Service card: icon, name, what it is, who it is for, arrow. No prices: pricing is explained on /pricing, quoted on /book. */
.service-card { gap: var(--sp-3); }
.service-card__best { font-size: var(--fs-sm); color: var(--muted); }

/* Definition rows: label/value list (bin specs, what's included totals) */
.spec-list { display: grid; grid-template-columns: auto 1fr; gap: 0; font-size: var(--fs-sm); }
.spec-list dt, .spec-list dd { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.spec-list dt { color: var(--muted); font-weight: 500; padding-right: var(--sp-5); }
.spec-list dd { text-align: right; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---- 5.5 Spec list (above) · plan table · option cards · compare slider: see 5.17-5.19 ---- */

/* ---- 5.6 Lists ---- */
.check-list, .x-list, .icon-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.check-list > li, .x-list > li { position: relative; padding-left: 2rem; }
.check-list > li::before, .x-list > li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.35rem; height: 1.35rem; border-radius: var(--r-xs);
  background: var(--c-yellow) no-repeat center / 70%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}
.x-list > li::before {
  background-color: var(--c-concrete);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2301F' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
.section--dark .x-list > li::before, .theme-dark .x-list > li::before { background-color: var(--c-ink-700); }
.icon-list > li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4); align-items: start; }
.icon-list > li > .icon, .icon-list > li > .icon-tile { margin-top: .1em; }
.icon-list > li > .icon { color: var(--fg); width: 1.5rem; height: 1.5rem; }
.icon-list strong { display: block; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; }
.icon-list--lg { gap: var(--sp-5); }
/* Guarantee list: the canonical six from facts.guarantees, 3-up on desktop */
.guarantee-list { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--sp-5) var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
:is(.section--dark, .theme-dark) .guarantee-list > li > .icon { color: var(--c-yellow); }
.check-list--2col { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); column-gap: var(--sp-6); }

/* ---- 5.7 Steps ---- */
.steps { list-style: none; padding: 0; display: grid; gap: var(--sp-5); counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.step { position: relative; counter-increment: step; padding-top: 4.25rem; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 1.125rem;
  background: var(--c-black); color: var(--c-yellow); border-radius: var(--r-sm);
}
.step::after { content: ""; position: absolute; top: 1.6rem; left: 4rem; right: calc(-1 * var(--sp-5) + .75rem); height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.step:last-child::after { display: none; }
.step h3, .step .h4 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.step p { color: var(--text); font-size: var(--fs-base); }
.section--dark .step::before, .theme-dark .step::before { background: var(--c-yellow); color: var(--c-black); }
@media (max-width: 719px) {
  .steps { gap: 0; }
  .step { padding: 0 0 var(--sp-6) 4.5rem; min-height: 3.25rem; }
  .step::after { top: 3.75rem; bottom: .5rem; left: 1.6rem; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px); }
  .step:last-child { padding-bottom: 0; }
}

/* ---- 5.8 Pill tabs (JS: [data-tabs] in site.js) ---- */
.tabs__list { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; border-radius: var(--r-pill); background: var(--c-concrete); max-width: 100%; }
.section--paper .tabs__list { background: var(--c-concrete); }
.section--dark .tabs__list, .theme-dark .tabs__list { background: var(--c-ink-700); }
.tabs__tab {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem; padding: .5rem 1.15rem; border-radius: var(--r-pill);
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .02em;
  color: var(--fg); white-space: nowrap; text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.tabs__tab:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="true"] { background: var(--c-black); color: var(--c-white); box-shadow: var(--sh-1); }
.section--dark .tabs__tab[aria-selected="true"], .theme-dark .tabs__tab[aria-selected="true"] { background: var(--c-yellow); color: var(--c-black); }
.tabs__tab:focus-visible { outline-offset: 1px; border-radius: var(--r-pill); }
.tabs__panel { padding-top: var(--sp-6); }
/* Card tabs: the pill row sits on top of one card, so every view gets the same frame and the row never floats
   in empty space. Panel content usually goes in .tabs__split (copy left, a short .check-list or .spec-list right). */
.tabs--card .tabs__panel { margin-top: var(--sp-4); padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg, var(--r)); box-shadow: var(--sh-1); }
.tabs--card .tabs__list { background: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-line); }
.section--paper .tabs--card .tabs__list { background: var(--c-white); }
.tabs__split { display: grid; gap: var(--sp-6) clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (min-width: 900px) { .tabs__split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.tabs__split p { max-width: 52ch; }
.tabs__panel:focus-visible { outline-offset: 8px; }
@media (max-width: 599px) {
  .tabs__list--scroll { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: var(--r); }
  .tabs__list--scroll::-webkit-scrollbar { display: none; }
  .tabs__list--fill { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; border-radius: var(--r); }
  .tabs__list--fill .tabs__tab { justify-content: center; border-radius: calc(var(--r) - 3px); padding-inline: .5rem; }
}

/* ---- 5.9 Accordion (<details>; smooth open/close in site.js) ---- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: var(--fs-md); line-height: 1.3; color: var(--fg);
}
.accordion__summary::-webkit-details-marker { display: none; }
/* Toggle: a solid black chip with a yellow plus (closed) that flips to yellow with a black minus (open).
   Same language as the black/yellow buttons; 2.5rem so it reads as a control, not a decoration. */
.accordion__summary::after {
  content: ""; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm);
  background: var(--c-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC72C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / 1.1rem;
  transition: background-color var(--t-fast), transform var(--t) var(--ease);
}
.accordion__item[open] > .accordion__summary::after {
  background-color: var(--c-yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 2px var(--c-black);
}
.accordion__summary:hover::after { background-color: var(--c-ink-700); }
.accordion__item[open] > .accordion__summary:hover::after { background-color: var(--c-yellow-600); }
.accordion__summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-yellow); text-underline-offset: .25em; }
.accordion__summary:focus-visible { outline-offset: 4px; }
.accordion__body { padding: 0 3.5rem var(--sp-5) 0; color: var(--text); overflow: hidden; }
.accordion__body > * + * { margin-top: .8em; }
@media (max-width: 479px) { .accordion__body { padding-right: 0; } .accordion__summary { font-size: var(--fs-base); } }
/* On black: white chip + black plus closed, yellow open */
:is(.section--dark, .theme-dark) .accordion__summary::after { background-color: var(--c-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
:is(.section--dark, .theme-dark) .accordion__summary:hover::after { background-color: var(--c-concrete); }
:is(.section--dark, .theme-dark) .accordion__item[open] > .accordion__summary::after { background-color: var(--c-yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); box-shadow: none; }

/* ---- 5.10 Forms ---- */
.form { display: grid; gap: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); align-items: start; }

/* A field has four fixed slots: label · hint · control · error. Inside a .form-row
   the slots are shared across the row (subgrid), so labels, controls and errors
   line up whether or not a neighbour has a hint or an error. */
.field { display: grid; grid-template-rows: auto auto auto auto; align-content: start; min-width: 0; }
.field__label { grid-row: 1; }
.field__hint { grid-row: 2; margin-top: .2rem; }
.field > .input, .field > .select, .field > .textarea, .field > .input-group, .field > .upload, .field > .choice-cards { grid-row: 3; margin-top: .5rem; }
.field__error { grid-row: 4; margin-top: .45rem; }
@supports (grid-template-rows: subgrid) {
  /* Row gap lives on the fields (padding) so an empty hint/error track costs 0px */
  .form-row { row-gap: 0; margin-bottom: calc(-1 * var(--sp-5)); }
  .form-row > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding-bottom: var(--sp-5); }
}
.field__label, .fieldset__legend { font-weight: 650; font-size: var(--fs-sm); line-height: 1.35; color: var(--fg); }
.field__label .req { color: var(--c-red); margin-left: .15rem; text-decoration: none; }
.field__label .opt { font-weight: 500; color: var(--muted); margin-left: .35rem; }
.field__hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.field__error { display: none; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; color: var(--c-red); }
.field--invalid .field__error, .field__error.is-visible { display: flex; }

.input, .select, .textarea {
  width: 100%; padding: 0 1rem;
  font-size: 1rem; line-height: 1.4; color: var(--c-black);
  background: var(--c-white);
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none; -webkit-appearance: none;
}
/* Every single-line control is exactly --field-h tall: text, tel, email, date, time, number, select */
.input, .select { height: var(--field-h); min-height: var(--field-h); }
.input::placeholder, .textarea::placeholder { color: #6B6860; } /* 5.4:1 on white */
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-black); box-shadow: 0 0 0 3px var(--c-yellow); }
.field--invalid .input, .field--invalid .select, .field--invalid .textarea, .input[aria-invalid="true"] { border-color: var(--c-red); background-color: #FFFBFA; }
.field--invalid .input:focus, .field--invalid .select:focus { box-shadow: 0 0 0 3px var(--c-red-100); }
.textarea { min-height: 8rem; padding: .8rem 1rem; resize: vertical; display: block; }
.select {
  padding-right: 2.75rem; cursor: pointer;
  background: var(--c-white) no-repeat right 1rem center / 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Date: styled like the select. Our calendar icon sits where the chevron does; the browser's own picker
   indicator is stretched invisibly over the whole field, so a tap anywhere opens the calendar. While empty,
   site.js adds .is-empty and a quiet "Choose a date" placeholder (.date-ph, same grid cell) replaces the raw
   "yyyy-mm-dd" mask; keyboard users still type into the segments once the field has focus. */
input[type="date"].input, input[type="time"].input { display: flex; align-items: center; position: relative; }
input[type="date"].input {
  padding-right: 2.75rem; cursor: pointer;
  background: var(--c-white) no-repeat right 1rem center / 1.15rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
input[type="date"].input::-webkit-date-and-time-value { text-align: left; }
input[type="date"].input::-webkit-datetime-edit { padding: 0; }
input[type="date"].input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
input[type="date"].input.is-empty:not(:focus) { color: transparent; }
input[type="date"].input.is-empty:not(:focus)::-webkit-datetime-edit { color: transparent; }
.field > input[type="date"].input { grid-column: 1; }
.date-ph { position: relative; z-index: 1; grid-row: 3; grid-column: 1; align-self: start; display: flex; align-items: center; height: var(--field-h); margin-top: .5rem; padding-left: calc(1rem + 1.5px); font-size: 1rem; color: #8A877F; pointer-events: none; }
.input:not(.is-empty) + .date-ph, .input:focus + .date-ph { display: none; }
.input-group { position: relative; }
.input-group > .icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.input-group > .input { padding-left: 2.85rem; }

/* Checkbox & radio (native, large, brand-coloured) */
.check { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; font-size: var(--fs-base); line-height: 1.45; }
.check input { flex: none; width: 1.375rem; height: 1.375rem; margin-top: .05rem; accent-color: var(--c-black); cursor: pointer; }
.check input:focus-visible { outline: 2px solid var(--c-black); outline-offset: 2px; }
.check small { display: block; color: var(--muted); font-size: var(--fs-xs); }

.fieldset { border: 0; padding: 0; min-width: 0; display: grid; gap: var(--sp-3); }
.fieldset__legend { padding: 0; margin-bottom: var(--sp-3); }

/* Radio / checkbox cards: big tap targets for choosing a bin size, service, window */
.choice-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 12rem), 100%), 1fr)); }
.choice-card { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: var(--sp-4) var(--sp-5); padding-right: 3rem; min-height: 4.5rem; background: var(--c-white); color: var(--c-body); border: 1.5px solid var(--c-line-strong); border-radius: var(--r); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast); }
.choice-card:hover { border-color: var(--c-black); }
.choice-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice-card__title { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: var(--fs-base); color: var(--c-black); line-height: 1.25; }
.choice-card__meta { font-size: var(--fs-xs); color: var(--c-muted); }
.choice-card__price { font-family: var(--font-display); font-stretch: 112%; font-weight: 900; font-size: var(--fs-md); color: var(--c-black); margin-top: auto; padding-top: .25rem; font-variant-numeric: tabular-nums; }
.choice-card::after { content: ""; position: absolute; top: var(--sp-4); right: var(--sp-4); width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid var(--c-line-strong); background: var(--c-white) no-repeat center / 70%; transition: all var(--t-fast); }
.choice-card:has(input[type="checkbox"])::after { border-radius: var(--r-xs); }
.choice-card:has(input:checked) { border-color: var(--c-black); box-shadow: inset 0 0 0 1px var(--c-black), inset 0 5px 0 var(--c-yellow); background: #FFFDF5; }
.choice-card:has(input:checked)::after { border-color: var(--c-black); background-color: var(--c-black); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC72C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E"); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--c-black); outline-offset: 2px; }
.choice-card:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.choice-card .badge { position: absolute; top: -.7rem; left: var(--sp-4); }
@media (max-width: 479px) { .choice-card { padding: var(--sp-4); padding-right: 2.6rem; } .choice-card::after { top: var(--sp-4); right: var(--sp-3); } }

/* .choice-cards--rows: for a set of 4+ options (bin sizes). Below 768px each card is one full-width row
   (name + meta left, price right) so nothing wraps unevenly or sits orphaned; from 768px all cards share one row. */
.choice-cards--rows { gap: var(--sp-3); }
@media (min-width: 768px) {
  .choice-cards--rows { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .choice-cards--rows .choice-card__title { white-space: nowrap; }
}
@media (max-width: 767px) {
  .choice-cards--rows { grid-template-columns: 1fr; gap: var(--sp-4); }
  .choice-cards--rows .choice-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title price" "meta price"; align-items: center; column-gap: var(--sp-4); row-gap: .1rem; min-height: 4.25rem; padding: var(--sp-3) 3.4rem var(--sp-3) var(--sp-4); }
  .choice-cards--rows .choice-card__title { grid-area: title; }
  .choice-cards--rows .choice-card__meta { grid-area: meta; }
  .choice-cards--rows .choice-card__price { grid-area: price; margin: 0; padding: 0; }
  .choice-cards--rows .choice-card::after { top: 50%; right: var(--sp-4); transform: translateY(-50%); }
  .choice-cards--rows .choice-card .badge { top: -.65rem; }
}

/* File upload: <label class="upload"> wrapping a hidden input[type=file][data-upload] */
.upload { position: relative; display: grid; justify-items: center; gap: .5rem; padding: var(--sp-6) var(--sp-5); text-align: center; border: 2px dashed var(--c-line-strong); border-radius: var(--r); background: var(--c-paper); cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.upload:hover, .upload.is-dragover { border-color: var(--c-black); background: var(--c-yellow-100); }
.upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload:has(input:focus-visible) { outline: 2px solid var(--c-black); outline-offset: 2px; }
.upload__title { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; color: var(--c-black); }
.upload__hint { font-size: var(--fs-xs); color: var(--c-muted); }
.upload__files { list-style: none; padding: 0; display: grid; gap: .35rem; font-size: var(--fs-sm); margin-top: var(--sp-2); }
.upload__files:empty { display: none; }
.upload__files li { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow-wrap: anywhere; }

/* ---- 5.11 Alerts ---- */
.alert { --a-bg: var(--c-paper); --a-bd: var(--c-black); --a-ic: var(--c-black); display: grid; grid-template-columns: auto 1fr; gap: .25rem .85rem; padding: var(--sp-4) var(--sp-5); background: var(--a-bg); color: var(--c-body); border-left: 5px solid var(--a-bd); border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.5; }
.alert > .icon { grid-row: span 2; color: var(--a-ic); width: 1.35rem; height: 1.35rem; margin-top: .05rem; }
.alert__title { font-weight: 700; color: var(--c-black); font-size: var(--fs-base); }
.alert > :not(.icon):not(.alert__title) { grid-column: 2; }
.alert--info { --a-bg: var(--c-blue-100); --a-bd: var(--c-blue); --a-ic: var(--c-blue); }
.alert--success { --a-bg: var(--c-green-100); --a-bd: var(--c-green); --a-ic: var(--c-green); }
.alert--warning { --a-bg: var(--c-yellow-100); --a-bd: var(--c-yellow); --a-ic: #7A5A00; }
.alert--danger { --a-bg: var(--c-red-100); --a-bd: var(--c-red); --a-ic: var(--c-red); }

/* ---- 5.12 Quote / testimonial ---- */
.quote { position: relative; display: grid; gap: var(--sp-5); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.quote::before { content: ""; width: 2.5rem; height: 2rem; background: var(--c-yellow); clip-path: polygon(0 0, 42% 0, 42% 55%, 18% 100%, 0 100%, 0 0, 58% 0, 100% 0, 100% 55%, 76% 100%, 58% 100%, 58% 0); }
.quote blockquote { font-family: var(--font-display); font-stretch: 106%; font-size: var(--fs-lg); font-weight: 700; line-height: 1.35; color: var(--fg); }
.quote figcaption { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.quote figcaption strong { display: block; color: var(--fg); }
.quote__avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-black); color: var(--c-yellow); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-stretch: 120%; flex: none; }
.stars { display: inline-flex; gap: 2px; color: var(--c-yellow); }
.stars .icon { width: 1.1rem; height: 1.1rem; fill: currentColor; stroke: var(--c-black); stroke-width: 1.2; }

/* ---- 5.13 Stats ---- */
.stats { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.stat { display: grid; gap: .35rem; padding-left: var(--sp-4); border-left: 4px solid var(--c-yellow); }
.stat__value { font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: var(--fs-2xl); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat__value small { font-size: .45em; font-weight: 800; letter-spacing: .02em; margin-left: .15em; }
.stat__label { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; max-width: 22ch; }

/* ---- 5.14 CTA band ---- */
.cta-band { position: relative; overflow: hidden; background: var(--c-black); color: var(--text); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--c-yellow); }
.cta-band__inner { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { color: var(--c-white); }
.cta-band p { color: #D9D7D2; max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cta-band--yellow { --bg: var(--c-yellow); --fg: var(--c-black); --text: var(--c-black); --muted: #3F3E3A; --focus: var(--c-black); --line: rgb(11 11 12 / .2); background: var(--c-yellow); }
.cta-band--yellow::before { background: var(--c-black); }
.cta-band--yellow h2 { color: var(--c-black); }
.cta-band--yellow p { color: #2B2A28; }
.cta-band--yellow .btn--primary, .cta-band--yellow .btn--primary:hover { --btn-bg: var(--c-black); --btn-fg: var(--c-yellow); --btn-bd: var(--c-black); --btn-sh: var(--sh-hard-dark); }
.cta-band--yellow .btn--primary:hover { --btn-bg: var(--c-ink-800); --btn-bd: var(--c-ink-800); --btn-sh: 0 4px 0 var(--c-yellow-800); }
.cta-band--yellow .btn--secondary { --btn-bg: var(--c-white); --btn-fg: var(--c-black); --btn-bd: var(--c-black); }

/* ---- 5.15 Heroes ---- */
.hero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem); background: var(--bg); }
.hero__title { font-size: var(--fs-4xl); font-weight: 900; text-transform: uppercase; line-height: .94; }
.hero__lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; max-width: 38ch; margin-top: var(--sp-5); color: var(--text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-6); padding: 0; list-style: none; font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.hero__proof li { display: inline-flex; align-items: center; gap: .45rem; }
.hero__proof .icon { color: var(--fg); width: 1.1rem; height: 1.1rem; }

/* Split hero: copy left, photo right (stacks on mobile) */
.hero--split .hero__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
@media (min-width: 960px) { .hero--split .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero--split .hero__title { font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4.75rem); }
.hero--split .hero__media { position: relative; }
.hero--split .hero__media .media { --ratio: 5 / 4; }
.hero__tag { position: absolute; left: var(--sp-4); bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-black); color: var(--c-white); border-radius: var(--r-sm); box-shadow: var(--sh-3); font-size: var(--fs-sm); max-width: calc(100% - 2rem); }
.hero__tag strong { color: var(--c-yellow); font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: var(--fs-lg); }

/* Photo hero: full-bleed image with a black gradient for AA contrast */
.hero--photo { --bg: var(--c-black); --fg: var(--c-white); --text: #EDEBE6; --muted: var(--c-muted-dark); --focus: var(--c-yellow); color-scheme: dark; overflow: hidden; isolation: isolate; min-height: min(78vh, 46rem); display: flex; align-items: flex-end; }
/* Over a photo the loud face is sized and weighted down a step so it reads strong, not shouty. */
.hero--photo .hero__title { font-weight: 850; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
@media (min-width: 900px) { .hero--photo .hero__title { font-size: clamp(2.6rem, 1.5rem + 4.2vw, 4.75rem); font-stretch: 112%; line-height: .96; } }
.hero--photo .hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero--photo .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(11 11 12 / .92) 0%, rgb(11 11 12 / .75) 45%, rgb(11 11 12 / .25) 100%), linear-gradient(0deg, rgb(11 11 12 / .7), transparent 50%); }
/* Phones: the copy sits at the bottom, so only the bottom needs to go dark. The top ~40% stays photo. */
@media (max-width: 719px) { .hero--photo::before { background: linear-gradient(0deg, rgb(11 11 12 / .94) 0%, rgb(11 11 12 / .86) 38%, rgb(11 11 12 / .45) 66%, rgb(11 11 12 / .12) 100%); } .hero--photo { min-height: min(88svh, 44rem); } }
.hero--photo .hero__proof { color: var(--c-white); }
.hero--photo .hero__proof .icon { color: var(--c-yellow); }
.hero--photo .eyebrow::before { box-shadow: none; }

/* Page hero: compact header for inner pages on a paper background (no breadcrumbs: owner, 2026-10-09).
   Add a .hero__aside (usually a .fact-card) beside the copy so the right half of a desktop hero
   carries the page's three key facts instead of empty paper. Without one the copy simply runs full width. */
.hero--page { --bg: var(--c-paper); padding-block: clamp(2rem, 1.25rem + 3vw, 4rem); border-bottom: 1px solid var(--c-line); }
.hero--page .hero__title { font-size: var(--fs-3xl); }
.hero--page .hero__lede { max-width: 56ch; }
.hero--page .hero__grid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 960px) { .hero--page .hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 1fr); gap: var(--sp-5) clamp(2.5rem, 1rem + 4vw, 5rem); } }

/* Fact card: three facts in a black card with the yellow rail. Used as .hero__aside, or anywhere a page
   needs "the numbers that matter" in one glance. Rows: <li><span>label</span><strong>value</strong></li>. */
.fact-card { position: relative; overflow: hidden; padding: var(--sp-5) var(--sp-5) var(--sp-4); background: var(--c-black); color: #D9D7D2; border-radius: var(--r); box-shadow: var(--sh-3); }
.fact-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--c-yellow); }
.fact-card__title { font-family: var(--font-display); font-stretch: 112%; font-weight: 850; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted-dark); margin-top: var(--sp-1); }
.fact-card ul { list-style: none; padding: 0; margin-top: var(--sp-3); }
.fact-card li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid #2E2E33; font-size: var(--fs-sm); }
.fact-card li:last-child { border-bottom: 0; }
.fact-card li > span { color: #EDEBE6; font-weight: 600; }
.fact-card li > span small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--c-muted-dark); }
.fact-card li > strong { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: var(--fs-xl); line-height: 1; color: var(--c-white); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fact-card li > strong small { font-size: .5em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted-dark); margin-right: .3em; vertical-align: .25em; }
.fact-card a { color: var(--c-white); }
.fact-card .link-arrow { color: var(--c-yellow); margin-top: var(--sp-3); }
.fact-card :focus-visible { outline-color: var(--c-yellow); }

/* Display type on phones (< 480px): every loud title is sized so a short line ("Tear it out.") holds on
   one line and the highlighted phrase ("We'll take it.") holds on the next. Each hero type has its own cap
   because their content widths and line lengths differ. Lines stay balanced (text-wrap: balance). */
@media (max-width: 479px) {
  :is(h1, .h1, .display, .hero__title, .loud) { font-stretch: 104%; letter-spacing: -0.02em; text-wrap: balance; }
  .display, .hero__title { font-size: clamp(1.95rem, .55rem + 7.1vw, 2.5rem); line-height: .98; }
  .hero--split .hero__title { font-size: clamp(2.1rem, .5rem + 8.6vw, 2.75rem); }
  .hero__proof { flex-direction: column; gap: var(--sp-2); }
  .hero--photo .hero__title { font-size: clamp(1.9rem, .5rem + 7.6vw, 2.45rem); }
  h1, .h1, .hero--page .hero__title { font-size: clamp(1.9rem, .6rem + 6.8vw, 2.4rem); line-height: 1; }
  :is(h1, .h1, .display, .hero__title, .loud).is-long { font-size: clamp(1.7rem, .6rem + 5.6vw, 2rem); font-stretch: 100%; letter-spacing: -0.015em; line-height: 1.04; }
}

.breadcrumbs { margin-bottom: var(--sp-5); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--c-line-strong); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--fg); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--fg); }

/* ---- 5.16 Misc ---- */
.divider { height: 1px; background: var(--line); border: 0; margin-block: var(--sp-6); }
.rail-top { position: relative; }
.rail-top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--c-yellow); }
.hazard { height: 10px; background: repeating-linear-gradient(-45deg, var(--c-yellow) 0 14px, var(--c-black) 14px 28px); }
.note { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); }
.note .icon { margin-top: .15em; color: var(--fg); }
.kbd-phone { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 6. HEADER ================================================================ */
.skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 200; padding: .75rem 1.1rem; background: var(--c-yellow); color: var(--c-black); font-weight: 800; border: 2px solid var(--c-black); border-radius: var(--r-sm); text-decoration: none; }
.skip-link:focus { top: var(--sp-3); }

.utility-bar { background: var(--c-black); color: #E4E2DD; font-size: .875rem; line-height: 1.3; }
.utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 2.5rem; }
.utility-bar__info { display: flex; align-items: center; gap: var(--sp-6); min-width: 0; }
.utility-bar__item { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; color: inherit; text-decoration: none; }
.utility-bar__item .icon { color: var(--c-yellow); width: 1rem; height: 1rem; }
a.utility-bar__item:hover { color: var(--c-white); text-decoration: underline; }
.utility-bar__nav { display: flex; align-items: center; gap: var(--sp-1); }
.utility-bar__nav ul { display: flex; gap: var(--sp-1); list-style: none; padding: 0; }
.utility-bar__nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 .6rem; color: #D9D7D2; font-weight: 600; text-decoration: none; }
.utility-bar__nav a:hover, .utility-bar__nav a[aria-current="page"] { color: var(--c-white); text-decoration: underline; text-decoration-color: var(--c-yellow); text-decoration-thickness: 2px; text-underline-offset: .35em; }
@media (max-width: 1079px) {
  .utility-bar__nav ul { display: none; }
}
@media (max-width: 767px) {
  .utility-bar__areas .u-long { display: none; }
}
@media (min-width: 768px) { .utility-bar__areas .u-short { display: none; } }

.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--c-white); border-bottom: 1px solid var(--c-line); transition: box-shadow var(--t) var(--ease); }
.site-header.is-scrolled { box-shadow: 0 8px 24px -12px rgb(11 11 12 / .25); }
.site-header__inner { display: flex; align-items: center; gap: var(--sp-5); height: var(--header-h); }
.site-header__logo { display: inline-flex; flex: none; padding: .35rem 0; border-radius: var(--r-xs); }
.site-header__logo img { height: 33px; width: auto; }
.primary-nav { margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; padding: 0; }
.primary-nav__link {
  position: relative; display: inline-flex; align-items: center; height: var(--header-h); padding: 0 .7rem;
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 750; font-size: .9375rem; letter-spacing: .005em;
  color: var(--c-black); text-decoration: none; white-space: nowrap;
}
.primary-nav__link::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 0; height: 5px; background: var(--c-yellow); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.primary-nav__link:hover::after { transform: scaleX(1); height: 2px; background: var(--c-black); }
.primary-nav__link[aria-current="page"]::after { transform: scaleX(1); height: 5px; background: var(--c-yellow); }
.primary-nav__link[aria-current="page"] { font-weight: 850; }
.primary-nav__link:focus-visible { outline-offset: -8px; }
/* Current page: the yellow rail stays on (see ::after above) and the label goes heavier. */

.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/* Header phone: an unboxed two-line link, so Book a Bin is the only button-shaped (and only yellow) thing in the bar. */
.header-phone { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .9rem 0 .25rem; margin-right: var(--sp-2); border-radius: var(--r-sm); color: var(--c-black); text-decoration: none; transition: background-color var(--t-fast); }
.header-phone:hover { background: var(--c-paper); }
.header-phone__icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); transition: box-shadow var(--t-fast); }
.header-phone:hover .header-phone__icon { box-shadow: inset 0 0 0 1.5px var(--c-black); }
.header-phone__icon .icon { width: 1.05rem; height: 1.05rem; }
.header-phone__text { display: grid; line-height: 1.1; }
.header-phone__text small { font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--c-muted); }
.header-phone__num { font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850; font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The header's Book a Bin is a fixed landmark: it stays yellow at all times (it never changes colour on scroll). */
.site-header__book { transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t-fast) var(--ease); }
/* Menu button: quiet icon + label, no heavy box. 44px tap target. */
.menu-toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .7rem; border: 0; border-radius: var(--r-sm); font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-black); background: transparent; cursor: pointer; transition: background-color var(--t-fast); }
.menu-toggle:hover { background: var(--c-paper); }
.menu-toggle .icon { width: 1.4rem; height: 1.4rem; }
/* Compact header controls: the ring hugs the control (offset 0) so it never clips at the screen edge. */
.menu-toggle:focus-visible, .mobile-nav__close:focus-visible { outline-offset: 0; }

@media (min-width: 1080px) {
  .menu-toggle { display: none; }
}
@media (max-width: 1079px) {
  :root { --header-h: 60px; }
  .primary-nav { display: none; }
  .site-header__actions { margin-left: auto; }
  .site-header__logo img { height: 30px; }
}
/* Desktop fit: logo, six nav items, the phone and Book a Bin share the 1216px content grid (same edges as
   every section and the footer). Narrower desktops trim in steps instead of overflowing:
   < 1360 the phone loses its ring icon · < 1240 nav type steps down · < 1180 the phone becomes a ring icon only. */
@media (min-width: 1080px) {
  .primary-nav__link { padding: 0 .6rem; }
  .primary-nav__link::after { left: .6rem; right: .6rem; }
  .site-header__inner { gap: var(--sp-5); }
}
@media (min-width: 1080px) and (max-width: 1359px) {
  .header-phone { margin-right: 0; padding-inline: .5rem; }
  .header-phone__icon { display: none; }
}
@media (min-width: 1080px) and (max-width: 1239px) {
  .site-header__logo img { height: 29px; }
  .site-header__inner { gap: var(--sp-4); }
  .primary-nav__link { padding: 0 .45rem; font-size: .875rem; }
  .primary-nav__link::after { left: .45rem; right: .45rem; }
}
@media (min-width: 1080px) and (max-width: 1359px) {
  .header-phone { padding: 0; }
  .header-phone__icon { display: inline-grid; }
  .header-phone__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 719px) {
  :root { --header-h: 56px; }
  /* Phones: the header holds three things only: logo · Book · Menu. Call and Text live in the bottom
     action bar (one home each, see footer.html), so nothing is offered twice. */
  .site-header__phone, .site-header__book { display: none; }
  .site-header__inner { gap: var(--sp-4); }
  .site-header__actions { gap: var(--sp-2); }
  .site-header__logo img { height: 26px; }
  .menu-toggle { padding-inline: .55rem; margin-right: -.55rem; }
}
/* Phones get their own Book: a compact yellow pill beside Menu (>= 360px). Its href mirrors
   .site-header__book (site.js), so a page that retargets the header CTA retargets this too. With it, the
   header's Book is genuinely constant at every width. */
.site-header__book-mini { display: none; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 .95rem; border-radius: var(--r-sm); background: var(--c-yellow); color: var(--c-black); box-shadow: inset 0 -3px 0 rgb(11 11 12 / .9); text-decoration: none; font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850; font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transition: background-color var(--t-fast); }
.site-header__book-mini:hover { background: var(--c-yellow-600); }
.site-header__book-mini:focus-visible { outline-offset: 0; }
@media (max-width: 719px) { .site-header__book-mini { display: inline-flex; } }
/* Under 400px: Menu becomes a 44px icon button (its label stays for screen readers). */
@media (max-width: 399px) {
  .site-header__book-mini { padding-inline: .8rem; font-size: .75rem; letter-spacing: .05em; }
  .menu-toggle { width: 2.75rem; padding: 0; margin-right: -.25rem; justify-content: center; }
  .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
  .site-header__book-mini { padding-inline: .7rem; }
  .menu-toggle { width: 2.75rem; padding: 0; margin-right: -.25rem; justify-content: center; }
  .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 339px) { .site-header__logo img { height: 22px; } }

/* Live status in the sticky header: the phone's small label reads "Open now · till 6 pm" during phone hours
   (site.js, Atlantic time), so hours stay visible after the utility bar scrolls away. */
.header-phone__plain { display: none; }
@media (max-width: 1279px) { .header-phone__live { display: none; } .header-phone__plain { display: inline; } }
@media (min-width: 1280px) { .header-phone.is-open small { color: var(--fg); font-weight: 700; } }
.header-phone.is-open .header-phone__live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; background: var(--c-yellow); box-shadow: 0 0 0 2px var(--c-black); vertical-align: .05em; }

/* Mobile menu: full-screen <dialog> */
.mobile-nav {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; height: 100dvh;
  margin: 0; padding: 0; border: 0; background: var(--c-black); color: var(--text);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-nav::backdrop { background: rgb(11 11 12 / .6); }
.mobile-nav[open] { display: flex; flex-direction: column; animation: nav-in var(--t) var(--ease); }
@keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobile-nav__top { position: sticky; top: 0; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: var(--header-h); padding-inline: var(--gutter); background: var(--c-black); border-bottom: 1px solid #26262A; }
.mobile-nav__top img { height: 26px; width: auto; }
.mobile-nav__close .icon { width: 1.4rem; height: 1.4rem; }
.mobile-nav__close { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .55rem; border: 0; background: transparent; cursor: pointer; border-radius: var(--r-sm); color: var(--c-white); font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.mobile-nav__close:hover { background: var(--c-ink-800); }
.mobile-nav__body { flex: 1; display: grid; align-content: start; gap: var(--sp-6); padding: var(--sp-5) var(--gutter) var(--sp-7); width: 100%; max-width: 40rem; margin-inline: auto; }
.mobile-nav__label { font-family: var(--font-display); font-stretch: 112%; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted-dark); margin-bottom: var(--sp-3); }
.mobile-nav__services { display: grid; gap: var(--sp-2); list-style: none; padding: 0; }
.mobile-nav__service { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-4); min-height: 4.5rem; padding: var(--sp-3) var(--sp-4); background: var(--c-ink-800); border: 1px solid #2C2C31; border-radius: var(--r); color: var(--c-white); text-decoration: none; }
.mobile-nav__service:hover, .mobile-nav__service[aria-current="page"] { border-color: var(--c-yellow); }
.mobile-nav__service strong { display: block; color: var(--c-white); font-family: var(--font-display); font-stretch: 112%; font-weight: 850; font-size: 1.125rem; line-height: 1.2; }
.mobile-nav__service span { display: block; font-size: var(--fs-xs); color: var(--c-muted-dark); margin-top: .15rem; }
.mobile-nav__service .icon-tile { background: var(--c-yellow); color: var(--c-black); width: 2.75rem; height: 2.75rem; }
.mobile-nav__service > .icon { color: var(--c-muted-dark); }
.mobile-nav__links { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.mobile-nav__links a { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; border-bottom: 1px solid #26262A; color: var(--c-white); font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: 1.0625rem; text-decoration: none; }
.mobile-nav__links a[aria-current="page"] { color: var(--c-yellow); }
.mobile-nav__links a:hover { color: var(--c-yellow); }
@media (max-width: 359px) { .mobile-nav__links { grid-template-columns: 1fr; } }
.mobile-nav__cta { display: grid; gap: var(--sp-3); }
.mobile-nav__meta { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid #26262A; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-muted-dark); }
.mobile-nav__meta p { display: flex; align-items: flex-start; gap: 12px; }
.mobile-nav__meta .icon { flex: none; color: var(--c-yellow); width: 1.125rem; height: 1.125rem; margin-top: .1em; }
html.nav-open { overflow: hidden; }

/* Phone action bar (footer.html): the ONE home for Call and Text on phones (< 720px).
   Chrome rule: Book lives in the sticky header (yellow pill), Call + Text live here. Neither is offered twice.
   With JS the bar starts hidden and slides up once the first screen has scrolled away, then slides away again
   over heroes, CTA bands, the footer, any in-page tel:/sms: button and [data-hide-actionbar] blocks.
   Hide it on a page with <body class="no-actionbar">. */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-actionbar); display: grid; grid-template-columns: 1.25fr 1fr; gap: 1px; background: #26262A; border-top: 1px solid #26262A; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -12px rgb(11 11 12 / .4); transform: translateY(0); transition: transform var(--t) var(--ease), visibility 0s linear 0s; }
.js .action-bar:not(.is-shown), .action-bar.is-hidden { transform: translateY(calc(100% + 12px)); visibility: hidden; transition: transform var(--t) var(--ease), visibility 0s linear var(--t); }
.action-bar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; white-space: nowrap; background: var(--c-black); color: var(--c-white); text-decoration: none; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: .875rem; letter-spacing: .01em; padding-inline: .75rem; transition: background-color var(--t-fast); }
.action-bar a:active { background: var(--c-ink-800); }
.action-bar a .icon { width: 1.15rem; height: 1.15rem; color: var(--c-yellow); flex: none; }
.action-bar__num { font-variant-numeric: tabular-nums; }
.action-bar a:focus-visible { outline-offset: -4px; }
@media (min-width: 720px) { .action-bar { display: none; } }
/* Without JS the bar never hides, so reserve room for it. */
@media (max-width: 719px) { html:not(.js) body:not(.no-actionbar) { padding-bottom: calc(3.25rem + env(safe-area-inset-bottom)); } }
@media (max-width: 374px) { .action-bar__num { display: none; } }
.no-actionbar .action-bar { display: none; }
html.nav-open .action-bar { visibility: hidden; }

/* 7. FOOTER ================================================================ */
/* The footer sits one tonal step above Bin Black (--c-ink-900), so a black CTA band or dark section above it
   ends cleanly instead of running into one long black slab. */
.site-footer { background: var(--c-ink-900); color: #D9D7D2; font-size: var(--fs-sm); position: relative; }
.site-footer::before { content: ""; display: block; height: 8px; background: var(--c-yellow); }
.site-footer a:not(.btn) { color: #E9E7E2; text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--c-white); text-decoration: underline; text-decoration-color: var(--c-yellow); text-decoration-thickness: 2px; }
/* Footer sign-off row: logo · promise · (Get a quote + How pricing works).
   One footer on every page (owner, 2026-10-09): the yellow rail and this row always show,
   even when the page ends with a .cta-band. */
.footer-top { display: grid; gap: var(--sp-4) var(--sp-7); padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); border-bottom: 1px solid #26262A; align-items: center; }
@media (min-width: 900px) { .footer-top { grid-template-columns: auto minmax(0, 1fr) auto; } }
.footer-top__logo { display: inline-flex; justify-self: start; }
.footer-top__logo img { height: 40px; width: auto; }
.footer-top__promise { font-size: var(--fs-sm); line-height: 1.5; color: var(--c-muted-dark); max-width: 54ch; }
.footer-top__promise strong { display: block; margin-bottom: .15rem; font-family: var(--font-display); font-stretch: 112%; font-weight: 850; font-size: var(--fs-md); color: var(--c-white); }
.footer-top__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.site-footer .footer-top__actions .link-arrow { color: var(--c-white); }
.footer-grid { display: grid; gap: var(--sp-7) var(--sp-6); padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr 1.35fr 1.25fr; } }
@media (max-width: 719px) { .footer-grid { gap: var(--sp-6) var(--sp-5); } .footer-col--contact, .footer-col--areas { grid-column: 1 / -1; } }
.footer-col h2 { font-family: var(--font-display); font-stretch: 112%; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted-dark); margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .15rem; }
/* One link style in every footer column: same weight, same colour, same 36px row.    never changes the row's height or weight. */
.footer-col li a { display: inline-flex; align-items: baseline; gap: .5rem; min-height: 2.25rem; padding-block: .45rem; line-height: 1.3; font-weight: 500; color: #ECEAE5; }
/* Service areas: hub link + towns; on phones the towns fold away and the hubs become three tappable rows */
.footer-col ul.footer-areas { display: grid; gap: var(--sp-4); }
.footer-areas a.footer-areas__hub { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; color: var(--c-white); min-height: 2rem; display: inline-flex; align-items: center; gap: .3rem; }
.footer-areas__hub .icon { width: 1rem; height: 1rem; color: var(--c-yellow); transition: transform .15s ease; }
.footer-areas__hub:hover .icon { transform: translateX(2px); }
.footer-areas p { color: var(--c-muted-dark); font-size: var(--fs-xs); line-height: 1.55; }
@media (max-width: 719px) {
  .footer-col--areas h2 { margin-bottom: var(--sp-2); }
  .footer-col ul.footer-areas { gap: 0; border-top: 1px solid #26262A; }
  .footer-areas li { border-bottom: 1px solid #26262A; }
  .footer-areas a.footer-areas__hub { display: flex; justify-content: space-between; min-height: 3.25rem; }
  .footer-areas p { display: none; }
}
.footer-contact { display: grid; gap: var(--sp-3); }
.footer-contact__phone { font-family: var(--font-display); font-stretch: 118%; font-weight: 900; font-size: 1.5rem; color: var(--c-yellow) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; min-height: 2.75rem; display: inline-flex; align-items: center; }
.footer-contact__row { display: flex; align-items: center; gap: .6rem; }
.footer-contact__row .icon { color: var(--c-yellow); width: 1.05rem; height: 1.05rem; }
.footer-hours { display: grid; grid-template-columns: auto 1fr; gap: .3rem var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-xs); }
.footer-hours dt { color: #D9D7D2; font-weight: 600; }
.footer-hours dd { color: var(--c-white); font-variant-numeric: tabular-nums; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-5); border-top: 1px solid #26262A; font-size: var(--fs-xs); color: var(--c-muted-dark); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); list-style: none; padding: 0; }
.footer-bottom a { color: #D9D7D2; }
/* Social: always labelled (icon + word), never a bare icon */
.social { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; }
.footer-bottom .social { gap: var(--sp-2); }
.site-footer .social a { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: 0 .85rem; border: 1px solid #34343A; border-radius: var(--r-sm); color: var(--c-white); font-weight: 600; font-size: var(--fs-xs); }
.site-footer .social a:hover { border-color: var(--c-yellow); text-decoration: none; }
.site-footer .social a[aria-disabled="true"] { color: var(--c-muted-dark); cursor: default; }
.site-footer .social a[aria-disabled="true"]:hover { border-color: #34343A; }
.social .icon { width: 1.05rem; height: 1.05rem; color: var(--c-yellow); }
/* Phones: footer bottom stacks, socials become a 3-up grid */
@media (max-width: 719px) {
  .footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .footer-bottom .social { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer .social a { padding: 0 .4rem; width: 100%; }
}

/* 8. UTILITIES ============================================================= */
.visually-hidden, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); } .mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0 !important; } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.text-fg { color: var(--fg); } .text-yellow { color: var(--c-yellow); }
.bg-yellow { background: var(--c-yellow); color: var(--c-black); }
.w-full { width: 100%; }
@media (max-width: 719px) { .hide-mobile { display: none !important; } }
@media (min-width: 720px) { .show-mobile { display: none !important; } }

/* 9. MOTION ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .btn:active, .card--link:hover { transform: none; }
}
@media print {
  .utility-bar, .site-header, .action-bar, .mobile-nav, .site-footer .social { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* 10. SMALL-SCREEN REFINEMENTS ============================================= */
.utility-bar__nav a { white-space: nowrap; }
@media (max-width: 1279px) { .utility-bar__hours { display: none; } }
@media (min-width: 1280px) { .utility-bar__status { display: none; } }
.utility-bar__status.is-open .icon { color: var(--c-yellow); }
@media (max-width: 559px) { .utility-bar__more { display: none; } }
@media (max-width: 719px) {
  .utility-bar__inner { gap: var(--sp-3); }
  .utility-bar__info { width: 100%; justify-content: space-between; gap: var(--sp-3); }
  .utility-bar__item { min-height: 2.25rem; }
}
@media (max-width: 399px) { .utility-bar { font-size: .8125rem; } .utility-bar__info { gap: var(--sp-2); } .utility-bar__item { gap: .35rem; } }
@media (max-width: 374px) { .utility-bar__info .icon { display: none; } }
/* Footer bottom on desktop: one row on the 1216px grid (below 1280px it wraps as whole groups, never orphans). */
@media (min-width: 1280px) {
  .footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-6); }
  .site-footer .social a { padding: 0 .7rem; }
  .footer-bottom > p { white-space: nowrap; }
}


/* 11. NEW-MODEL COMPONENTS (v2) =========================================== */

/* ---- 5.17 Before / after compare slider (JS: [data-compare] in site.js) ----
   <div class="compare" data-compare style="--ratio:4/3">
     <img src="after.jpg" alt="…after…" width="1600" height="1200">
     <div class="compare__before"><img src="before.jpg" alt="…before…" width="1600" height="1200"></div>
     <span class="compare__tag compare__tag--before">Before</span><span class="compare__tag compare__tag--after">After</span>
     <span class="compare__handle" aria-hidden="true"></span>
     <input class="compare__range" type="range" min="0" max="100" value="50" aria-label="Drag to compare before and after">
   </div>
   The range input is the real control (keyboard, touch, mouse); site.js mirrors its value to --pos. */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.compare { --pos: 50%; position: relative; aspect-ratio: var(--ratio, 4 / 3); overflow: hidden; border-radius: var(--r-lg); background: var(--c-black); isolation: isolate; user-select: none; -webkit-user-select: none; }
.compare > img, .compare__before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__handle { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: var(--c-yellow); box-shadow: 0 0 0 1px rgb(11 11 12 / .35); pointer-events: none; }
.compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; background: var(--c-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC72C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / 62%; border: 3px solid var(--c-yellow); box-shadow: var(--sh-2); }
.compare__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; }
.compare__range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 100vh; background: transparent; border: 0; }
.compare__range::-moz-range-track { height: 100%; background: transparent; }
.compare__range::-moz-range-thumb { width: 1px; height: 100%; background: transparent; border: 0; }
.compare:focus-within .compare__handle::after { outline: 3px solid var(--focus); outline-offset: 3px; }
.compare__tag { position: absolute; z-index: 2; top: var(--sp-3); padding: .3rem .7rem; border-radius: var(--r-pill); background: var(--c-black); color: var(--c-white); font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.compare__tag--before { left: var(--sp-3); }
.compare__tag--after { right: var(--sp-3); background: var(--c-yellow); color: var(--c-black); }
@keyframes compare-hint { 0%, 100% { --pos: 50%; } 35% { --pos: 32%; } 70% { --pos: 68%; } }
@media (prefers-reduced-motion: no-preference) { .compare.is-hinting { animation: compare-hint 1.4s var(--ease) 1; } }
.compare + figcaption, .compare__caption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }

/* ---- 5.18 Option / config cards: "pick a size", "pick an enclosure style" ----
   Display card:   <article class="option-card"> › .option-card__media (img) · .option-card__body (h3.option-card__title,
                   p, dl.option-card__specs, ul.check-list) · .option-card__foot (a.link-arrow)
   Selectable:     <label class="option-card option-card--select"> › input.option-card__input[type=radio|checkbox] + the same parts.
   Featured:       add .is-featured and <span class="option-card__tag">Most common</span> inside the media. */
.option-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 17rem), 100%), 1fr)); align-items: stretch; }
.option-card { position: relative; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 2px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease); }
.option-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--c-paper); overflow: hidden; }
.option-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.option-card__tag { position: absolute; top: var(--sp-3); left: var(--sp-3); padding: .3rem .65rem; border-radius: var(--r-pill); background: var(--c-yellow); color: var(--c-black); font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
.option-card__body { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; padding: var(--sp-5); }
.option-card__title { font-family: var(--font-display); font-stretch: 110%; font-weight: 850; font-size: var(--fs-lg); line-height: 1.15; color: var(--fg); }
.option-card__title small { display: block; margin-top: .2rem; font-family: var(--font-text); font-stretch: 100%; font-weight: 500; font-size: var(--fs-sm); color: var(--muted); }
.option-card__specs { display: grid; grid-template-columns: auto 1fr; font-size: var(--fs-sm); }
.option-card__specs dt, .option-card__specs dd { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.option-card__specs dt { color: var(--muted); padding-right: var(--sp-4); }
.option-card__specs dd { text-align: right; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.option-card__foot { margin-top: auto; padding: 0 var(--sp-5) var(--sp-5); }
.option-card.is-featured { border-color: var(--c-black); box-shadow: var(--sh-hard); }
.option-card--select { cursor: pointer; }
.option-card--select:hover { border-color: var(--c-black); }
.option-card__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.option-card--select::after { content: ""; position: absolute; z-index: 2; top: var(--sp-3); right: var(--sp-3); width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--c-line-strong); background: var(--c-white) no-repeat center / 70%; transition: all var(--t-fast); }
.option-card--select:has(input:checked) { border-color: var(--c-black); box-shadow: var(--sh-hard); }
.option-card--select:has(input:checked)::after { border-color: var(--c-black); background-color: var(--c-black); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC72C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E"); }
.option-card--select:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.option-card--select:has(input:checked) .option-card__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: var(--c-yellow); }
@media (min-width: 720px) { a.option-card:hover, .option-card--link:hover { transform: translateY(-3px); border-color: var(--c-black); } }
/* Compact (horizontal) variant on phones for lists of 3+ choices */
@media (max-width: 559px) {
  .option-grid--rows .option-card { flex-direction: row; }
  .option-grid--rows .option-card__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 9rem; }
  .option-grid--rows .option-card__body { padding: var(--sp-4); }
}

/* ---- 5.19 Plan table: compare plans WITHOUT prices ----
   <div class="table-wrap"><table class="plan-table">
     <caption>…how pricing works, one sentence…</caption>
     <thead><tr><th scope="col">Plan</th><th scope="col">Pickups</th><th scope="col">Best for</th><th scope="col"><span class="visually-hidden">Next step</span></th></tr></thead>
     <tbody><tr class="is-featured"><th scope="row">Every 2 weeks <span class="badge badge--yellow">Most common</span></th>
       <td data-label="Pickups">26 a year</td><td data-label="Best for">9 to 14 units</td><td class="plan-table__cta"><a class="link-arrow" href="/book">Get a quote …</a></td></tr></tbody>
   </table></div>
   Every td carries data-label: on phones each row turns into a labelled card. Yes/no cells: <svg class="icon plan-table__yes">. */
.plan-table { width: 100%; font-size: var(--fs-sm); }
.plan-table caption { caption-side: bottom; text-align: left; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); color: var(--muted); border-top: 1px solid var(--line); }
.plan-table th, .plan-table td { padding: var(--sp-4) var(--sp-5); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.plan-table thead th { background: var(--c-black); color: var(--c-white); font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border-bottom: 0; box-shadow: inset 0 6px 0 var(--c-yellow); padding-top: calc(var(--sp-4) + 6px); }
.plan-table tbody tr:last-child > * { border-bottom: 0; }
.plan-table tbody th { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: var(--fs-base); color: var(--fg); }
.plan-table tbody th small { display: block; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-xs); color: var(--muted); font-stretch: 100%; }
.plan-table tbody th .badge { margin-left: .5rem; vertical-align: .1em; }
.plan-table__cta { text-align: right !important; white-space: nowrap; }
.plan-table__yes { color: var(--c-green); width: 1.25rem; height: 1.25rem; stroke-width: 3; }
.plan-table tbody tr:hover > * { background: color-mix(in srgb, var(--c-yellow) 10%, transparent); }
.plan-table tr.is-featured > * { background: var(--c-yellow-100); }
.plan-table tr.is-featured > th:first-child { box-shadow: inset 5px 0 0 var(--c-yellow); }
@media (max-width: 719px) {
  .table-wrap:has(.plan-table) { border: 0; background: transparent; overflow: visible; }
  .plan-table { display: flex; flex-direction: column; }
  .plan-table tbody { display: block; order: 1; }
  .plan-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .plan-table tbody tr { display: grid; gap: .1rem; margin-bottom: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
  .plan-table th, .plan-table td { display: block; padding: 0; border: 0; background: none !important; box-shadow: none !important; }
  .plan-table tbody th { padding-bottom: var(--sp-2); font-size: var(--fs-md); }
  .plan-table td[data-label] { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: .45rem; border-top: 1px solid var(--line); }
  .plan-table td[data-label]::before { content: attr(data-label); flex: none; color: var(--muted); font-weight: 500; }
  .plan-table td[data-label] > * { text-align: right; }
  .plan-table .plan-table__cta { padding-top: var(--sp-3); text-align: left !important; border-top: 1px solid var(--line); }
  .plan-table tr.is-featured { border-color: var(--c-black); box-shadow: inset 0 5px 0 var(--c-yellow); padding-top: calc(var(--sp-4) + 5px); background: var(--c-yellow-100); }
  .plan-table caption { display: block; order: 2; padding: var(--sp-2) 0 0; border: 0; }
}

/* Footer brand line: bin line only on bin service + enclosures pages (OWNER-FEEDBACK.md, 2026-10-24) */
.footer-top__promise--bins { display: none; }
.page-bin-line .footer-top__promise--bins { display: block; }
.page-bin-line .footer-top__promise--all { display: none; }

/* Owner rules, 2026-10-24 (OWNER-FEEDBACK.md): no eyebrows, nothing underlined, no pills. */
.eyebrow { display: none !important; }
*:not(del):not(s), *:not(del):not(s):hover, *:not(del):not(s):focus-visible { text-decoration-line: none !important; }
/* Links inside running text stay findable without an underline: heavier weight, ink colour, yellow block on hover */
:where(p, li, td, th, dd, small, .fine, .muted, .lede) a:not([class]) { font-weight: 700; color: var(--fg); }
:where(p, li, td, th, dd, small, .fine, .muted, .lede) a:not([class]):hover { background: var(--c-yellow); color: var(--c-black); }
/* No eyebrow look either: small tracked capitals used as titles become plain bold sentence-case titles.
   (Table headers, image tags and buttons keep their capitals.) */
:is(.fact-card__title, .pricing-result__label, .pricing-promise__title, .faq-suggest__head, .faq-toc__title, .faq-subhead, .faq-option__label, .privacy-toc__title, .footer-col h2, .home-label) {
  text-transform: none !important; letter-spacing: -0.005em !important; font-size: var(--fs-md) !important; line-height: 1.25;
}
:is(.faq-search__label, .contact-method__label, .pricing-fit__label, .faq-suggest__where, .faq-more) { text-transform: none !important; letter-spacing: normal !important; font-size: var(--fs-sm) !important; }
/* "Most asked" tags sat above the question like an eyebrow */
.faq-item__badge { display: none !important; }
.faq-next__go small { text-transform: none !important; letter-spacing: normal !important; font-size: var(--fs-xs) !important; }
/* Footer: the brand line sits on one line (owner, 2026-10-24) */
@media (min-width: 900px) { .footer-top__promise strong { white-space: nowrap; } }