/* ==========================================================================
   BLUWAVE BIN CLEANING — styles.css
   One stylesheet, hand-written. No frameworks.

   Contents
   01. Design tokens (custom properties)
   02. Base / reset
   03. Typography roles
   04. Utilities (container, section labels, spec plates)
   05. Buttons + focus states
   06. Header / nav
   07. Hero + before/after slider
   08. Spec strip
   09. How it works
   10. Comparison table (spec sheet)
   11. Pricing
   12. Service area (route board)
   13. Gallery
   14. FAQ
   15. Footer
   16. Booking flow (book.html)
   16b. Mobile action bar
   17. Motion: page-load reveal + scroll reveals
   18. Responsive adjustments (mobile-first refinements live here)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. DESIGN TOKENS
   Heat (#FF4D1C) is reserved for the 200°F hot-water story ONLY.
   -------------------------------------------------------------------------- */
:root {
  --ink:    #0A2342;  /* dark navy blue — primary text, dark sections */
  --deep:   #114A9E;  /* royal marine blue — brand surfaces */
  --blue:   #146FD1;  /* interactive: links, buttons */
  --aqua:   #DFF1FA;  /* pale wash for alternating sections */
  --heat:   #FF4D1C;  /* 200°F hot water ONLY. Nowhere else. */
  --paper:  #FFFFFF;
  --paper-2:#EAF4FB;  /* light blue tint */

  /* derived */
  --line:        rgba(10, 35, 66, 0.16);   /* hairlines on light */
  --line-strong: rgba(10, 35, 66, 0.85);
  --line-dark:   rgba(255, 255, 255, 0.16); /* hairlines on ink */
  --ink-70:      rgba(10, 35, 66, 0.72);
  --paper-70:    rgba(255, 255, 255, 0.78);

  /* type */
  --font-display: "Archivo", "Archivo Black", sans-serif;
  --font-body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif; /* was IBM Plex Mono — Andrew prefers a normal face for numbers/labels */

  /* layout */
  --container: 1160px;
  --pad: clamp(20px, 5vw, 48px);
  --radius: 3px; /* near-square corners: machinery, not pill buttons */

  /* height of the sticky header — anchor scrolling offsets read this, so it
     has to stay in sync with .site-header__inner's min-height at every
     breakpoint (see §18) */
  --header-h: 78px;

  /* iPhone notch / home-indicator gutters. 0 everywhere else. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* --------------------------------------------------------------------------
   02. BASE / RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* iOS inflates text in landscape unless this is pinned */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* in-page anchors land below the sticky header, not under it */
[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* keep the hidden attribute authoritative even where we author display */
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.08; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--deep); }

/* long addresses and emails break instead of forcing a sideways scroll */
a, p, li, dd, td, th { overflow-wrap: break-word; }

/* the default grey flash on tap reads as a bug; tint it with the brand blue */
a, button, summary, label, [role="slider"] {
  -webkit-tap-highlight-color: rgba(20, 111, 209, 0.16);
}

table { border-collapse: collapse; width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   03. TYPOGRAPHY ROLES
   Display = Archivo expanded uppercase (equipment lettering).
   Stats/specs = Instrument Sans, semibold, letterspaced.
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

.h-xl { font-size: clamp(2.35rem, 6.4vw, 4.15rem); }
.h-lg { font-size: clamp(1.75rem, 4vw, 2.6rem); }
.h-md { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.lede {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: 1.55;
  max-width: 34em;
}

/* --------------------------------------------------------------------------
   04. UTILITIES
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  /* the safe-area terms only ever add width in landscape on notched phones */
  padding-left: calc(var(--pad) + var(--safe-l));
  padding-right: calc(var(--pad) + var(--safe-r));
}

.section { padding-block: clamp(64px, 9vw, 112px); }
.section--aqua  { background: var(--aqua); }
.section--tint  { background: var(--paper-2); }
.section--ink   { background: var(--ink); color: var(--paper); }
.section--deep  { background: var(--deep); color: var(--paper); }

/* blue links are invisible on blue grounds — switch to aqua on dark sections */
.section--ink a:not(.btn),
.section--deep a:not(.btn) { color: var(--aqua); }
.section--ink a:not(.btn):hover,
.section--deep a:not(.btn):hover { color: var(--paper); }

/* mono section index, e.g. "SEC.02 — HOW IT WORKS" with a rule line */
.sec-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.sec-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.section--ink .sec-label,
.section--deep .sec-label { color: var(--paper-70); }
.section--ink .sec-label::after,
.section--deep .sec-label::after { background: var(--line-dark); }

.sec-heading { max-width: 20em; }
.sec-intro { max-width: 36em; color: var(--ink-70); }
.section--ink .sec-intro,
.section--deep .sec-intro { color: var(--paper-70); }

/* small mono plate: bordered label like a stamped tag */
.plate {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
}

/* keep a phrase intact across a line break (plan cadences, place names) */
.nowrap { white-space: nowrap; }

/* stroke icon defaults — single style everywhere: 1.5px stroke, no fills */
.icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   05. BUTTONS + FOCUS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--deep); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.hero .btn--ghost,
.section--ink .btn--ghost,
.section--deep .btn--ghost {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.5);
}
.hero .btn--ghost:hover,
.section--ink .btn--ghost:hover,
.section--deep .btn--ghost:hover { background: var(--paper); color: var(--ink); }

.btn--sm { padding: 12px 20px; font-size: 0.95rem; }
.btn--block { width: 100%; }

/* visible keyboard focus, everywhere */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible,
.section--ink :focus-visible,
.section--deep :focus-visible,
.site-header :focus-visible {
  outline-color: var(--aqua);
}

/* --------------------------------------------------------------------------
   06. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  line-height: 1;
}
.brand:hover { color: var(--aqua); }
.brand__mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* the badge's navy ring disappears on the navy header — this soft edge
     keeps the full circle visible */
  box-shadow: 0 0 0 2px rgba(223, 241, 250, 0.4);
  background: #fff;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  margin-left: auto;
}
.site-nav a {
  color: var(--paper-70);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.site-nav a:hover { color: var(--paper); }
.site-nav .btn { margin-left: 8px; }

/* phone row: only earns its place in the mobile drawer */
.nav-call { display: none; }

/* slim header variant (book.html): two links, always inline, never a dropdown */
.site-nav--inline {
  display: flex !important;
  position: static !important;
  flex-direction: row !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  gap: 20px !important;
}
.site-nav--inline a { border: none !important; padding: 0 !important; font-size: 0.95rem !important; }

/* 46px square — comfortably over the 44px minimum touch target */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--paper);
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }
/* the button holds both glyphs; aria-expanded picks which one shows */
.nav-toggle .icon--close,
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }
.nav-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
}

/* --------------------------------------------------------------------------
   07. HERO + BEFORE/AFTER SLIDER
   -------------------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(56px, 8vw, 96px) clamp(48px, 6vw, 72px);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--aqua);
}
.hero__title { color: var(--paper); margin-bottom: 22px; }
.hero__title .heat { color: var(--heat); } /* the ONLY heat use in the hero text */
.hero__sub {
  color: var(--paper-70);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  max-width: 30em;
  margin-bottom: 30px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__cta-note {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--paper-70);
  margin-top: 6px;
}

/* hero rig photo */
.hero-rig {
  position: relative;
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-rig img { width: 100%; height: auto; display: block; }

/* --- before/after slider ------------------------------------------------- */
.ba {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--deep);
  touch-action: pan-y; /* keep vertical page scroll working on touch */
  user-select: none;
  -webkit-user-select: none;
  cursor: col-resize;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 44px; /* generous touch target */
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
}
.ba__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--paper);
}
.ba__grip {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(10, 35, 66, 0.45);
}
.ba__handle:focus-visible { outline: none; }
.ba__handle:focus-visible .ba__grip {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

/* mono BEFORE / AFTER label plates */
.ba__plate {
  position: absolute;
  top: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 5px 10px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--line-dark);
  pointer-events: none;
}
.ba__plate--before { left: 12px; }
.ba__plate--after  { right: 12px; }

.ba-caption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--paper-70);
}

/* --------------------------------------------------------------------------
   08. SPEC STRIP — data plate under the hero
   -------------------------------------------------------------------------- */
.spec-strip {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.spec-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.spec-cell {
  padding: 26px 20px 24px;
  border-left: 1px solid var(--line-dark);
  text-align: center;
}
.spec-cell:first-child { border-left: none; }
.spec-cell__value {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  margin-bottom: 8px;
}
.spec-cell__value--heat { color: var(--heat); } /* 200°F cell only */
.spec-cell__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
}

/* --------------------------------------------------------------------------
   09. HOW IT WORKS — genuine 4-step sequence
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: clamp(32px, 4vw, 48px);
  background: var(--paper);
}
.step {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 28px);
  border-left: 1px solid var(--line);
}
.step:first-child { border-left: none; }
.step__num {
  background: var(--aqua);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--deep);
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 9px;
  margin-bottom: 18px;
}
.step__num--heat { color: var(--heat); border-color: var(--heat); } /* the 200° step */
.step__title {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 1.02rem;
  margin-bottom: 10px;
}
.step__body { font-size: 0.97rem; color: var(--ink-70); margin: 0; }

/* --------------------------------------------------------------------------
   10. COMPARISON TABLE — spec sheet, not a pricing gimmick
   -------------------------------------------------------------------------- */
.compare-wrap {
  margin-top: clamp(32px, 4vw, 48px);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.compare { min-width: 620px; }
.compare caption { position: absolute; left: -9999px; }
.compare th,
.compare td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare tr:last-child th,
.compare tr:last-child td { border-bottom: none; }

.compare thead th {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
  border-bottom: 1px solid var(--line-strong);
  padding-top: 18px;
  padding-bottom: 14px;
}
.compare tbody th {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  width: 26%;
}
.compare td { font-size: 0.97rem; }
.compare td.us {
  background: var(--aqua);
  font-weight: 600;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  width: 40%;
}
.compare td.them { color: var(--ink-70); }
.compare .val-heat { /* 200°F value: heat on an ink plate for AA contrast */
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--heat);
  background: var(--ink);
  padding: 3px 9px;
  border-radius: var(--radius);
  letter-spacing: 0.04em;
}
.compare .val-mono {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   11. PRICING
   -------------------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
  align-items: stretch;
  max-width: 960px;
  margin-inline: auto;
}

/* address autocomplete suggestions (OpenStreetMap / Google fallback list) */
.addr-suggest {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 30;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(10, 35, 66, 0.14);
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
}
.addr-suggest__item {
  padding: 10px 12px;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  line-height: 1.35;
}
.addr-suggest__item:last-child { border-bottom: none; }
.addr-suggest__item:hover { background: var(--aqua); }

/* Centered pricing block with light-blue bands on the left and right */
#pricing {
  background: linear-gradient(90deg,
    var(--aqua) 0 calc(50% - 520px),
    #fff calc(50% - 520px) calc(50% + 520px),
    var(--aqua) calc(50% + 520px) 100%);
}
#pricing .sec-heading,
#pricing .sec-intro { margin-inline: auto; text-align: center; }
#pricing .pricing-note { justify-content: center; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 22px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.price-card:hover {
  transform: translateY(-3px);
  border-color: var(--deep);
  box-shadow: 0 8px 24px rgba(10, 35, 66, 0.09);
}
.price-card--popular { border: 2px solid var(--deep); }
.price-card__flag {
  position: absolute;
  top: -11px;
  left: 18px;
  background: var(--deep);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius);
}
.price-card__name {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.price-card__cadence {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: 18px;
}
.price-card__price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 2.15rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.price-card__per {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-70);
  margin: 6px 0 18px;
}
.price-card__blurb {
  font-size: 0.92rem;
  color: var(--ink-70);
  margin-bottom: 20px;
  flex: 1;
}
.pricing-note {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-70);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* the copy has to live in one element: bare text next to a <strong> would
   split into separate flex items and column out on narrow screens. It stays
   auto-width so the icon travels with it rather than pinning to the edge. */
.pricing-note__text { min-width: 0; text-align: center; }
.pricing-note .icon { margin-top: 1px; }

/* --------------------------------------------------------------------------
   12. SERVICE AREA + REVIEWS
   -------------------------------------------------------------------------- */
.area { }
.area__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.area-list {
  list-style: none;
  margin: 28px 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
  max-width: 26em;
}
.area-list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line-dark);
}
.area-list .idx {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--aqua);
}
.area-list .name {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 0.01em;
}

.reviews {
  display: grid;
  gap: 14px;
}
.reviews__head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 2px;
}
.review {
  margin: 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 20px 22px 16px;
}
.review blockquote {
  margin: 0 0 12px;
  font-size: 1.02rem;
  line-height: 1.55;
}
.review blockquote::before { content: "\201C"; }
.review blockquote::after { content: "\201D"; }
.review figcaption {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aqua);
}
.reviews__note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--paper-70);
  margin: 4px 0 0;
}


/* --------------------------------------------------------------------------
   13. GALLERY
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
}
.gallery-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-item .ba__plate { top: 10px; }

/* the rig: featured up top, deliberately modest size */
.rig-feature {
  position: relative;
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 640px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.rig-feature img { width: 100%; height: auto; }

/* two before/after sliders side by side */
.gallery-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 28px);
  margin-top: clamp(24px, 3.5vw, 40px);
}
.gallery-sliders .ba { aspect-ratio: 1 / 1; background: var(--paper); border-color: var(--line); }
.ba-caption--light { color: var(--ink-70); }
@media (max-width: 720px) {
  .gallery-sliders { grid-template-columns: 1fr; }
}
.gallery-note {
  margin-top: 18px;
  font-size: 0.95rem;
  color: var(--ink-70);
  max-width: 44em;
}

/* --------------------------------------------------------------------------
   14. FAQ — native details/summary, styled
   -------------------------------------------------------------------------- */
.faq-list {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
  max-width: 820px;
}
.faq {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 4px;
  font-weight: 600;
  font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq__idx {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--deep);
  min-width: 2.4em;
}
.faq summary .icon {
  margin-left: auto;
  transition: transform 0.2s ease;
}
.faq[open] summary .icon { transform: rotate(45deg); }
.faq__body {
  padding: 0 4px 22px calc(2.4em + 22px);
  color: var(--ink-70);
  max-width: 40em;
}

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(48px, 7vw, 80px) 32px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}
.site-footer h3 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-bottom: 16px;
}
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--aqua); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; font-size: 0.98rem; }
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-logo { width: 150px; height: auto; }
.footer-brandline {
  color: var(--paper-70);
  font-size: 0.98rem;
  max-width: 26em;
  margin-top: 14px;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--paper-70);
}

/* --------------------------------------------------------------------------
   16. BOOKING FLOW (book.html)
   -------------------------------------------------------------------------- */
.book-main {
  background: var(--paper-2);
  min-height: 70vh;
  padding-block: clamp(40px, 6vw, 72px);
}
.book-shell {
  max-width: 720px;
  margin-inline: auto;
  padding-left: calc(var(--pad) + var(--safe-l));
  padding-right: calc(var(--pad) + var(--safe-r));
  /* book.js scrolls this into view on every step change; without the margin
     the step heading lands under the sticky header */
  scroll-margin-top: calc(var(--header-h) + 14px);
}
.book-progress {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.book-progress__bar {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.book-progress__fill {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--blue);
  transition: width 0.25s ease;
}
.book-title { margin-bottom: 6px; }
.book-sub { color: var(--ink-70); margin-bottom: 30px; }

.book-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
}

.book-step[hidden] { display: none; }
.book-step > legend {
  padding: 0;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.15rem;
  margin-bottom: 20px;
}
fieldset.book-step { border: none; margin: 0; padding: 0; }

/* choice cards (plan picker, bin count) */
.choice-list { display: grid; gap: 12px; }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  background: var(--paper);
}
.choice:hover { border-color: var(--deep); }
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice__radio {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.choice input:checked ~ .choice__radio { border-color: var(--blue); }
.choice input:checked ~ .choice__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--blue);
}
.choice input:focus-visible ~ .choice__radio {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.choice:has(input:checked) {
  border-color: var(--blue);
  background: var(--aqua);
}
.choice__body { flex: 1; min-width: 0; }
.choice__label { font-weight: 600; }
.choice__meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.choice__price {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.15rem;
  white-space: nowrap;
}
.choice__flag {
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--deep);
  color: var(--paper);
  padding: 3px 8px;
  border-radius: var(--radius);
  margin-left: 10px;
}

/* text inputs */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 7px;
}
.field .hint {
  font-weight: 400;
  color: var(--ink-70);
  font-size: 0.86rem;
  margin-left: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 0;
  border-color: var(--blue);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* promo code: input takes the slack, Apply keeps its full label */
.promo-row { display: flex; gap: 10px; }
.promo-row input { min-width: 0; flex: 1; }
.promo-row .btn { flex: 0 0 auto; color: var(--ink); }
.promo-agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
  font-size: 0.93rem;
  font-weight: 400;
}
.promo-agree input {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--blue);
}
.field-error {
  color: #B3261E;
  font-size: 0.86rem;
  margin-top: 6px;
  display: none;
}
.field.invalid input { border-color: #B3261E; }
.field.invalid .field-error { display: block; }

/* running total ribbon */
.book-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 18px;
}
.book-total__label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.book-total__value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.5rem;
}
.book-total__value small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-70);
}

.book-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
}
.book-nav .btn--ghost { color: var(--ink); }

/* confirm step summary */
.summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 22px;
}
.summary dl { margin: 0; }
.summary .row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.summary .row:last-child { border-bottom: none; }
.summary dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-70);
  padding-top: 3px;
}
.summary dd { margin: 0; font-weight: 600; text-align: right; }

.book-finenote {
  font-size: 0.9rem;
  color: var(--ink-70);
  margin-top: 16px;
}

/* Service-area result. The out-of-area state is deliberately large and
   high-contrast — it's the one message on this page a customer must not
   scroll past, so it reads as a panel, not a footnote. */
.zip-note {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 2px solid;
  font-size: 1rem;
  line-height: 1.5;
  animation: zipNoteIn 0.25s ease-out;
}
@keyframes zipNoteIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.zip-note p { margin: 8px 0 0; }
.zip-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
}

/* In area — quiet confirmation, one line. */
.zip-note--in {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: #bfe3c9;
  background: #eaf7ee;
  color: #14532d;
}
.zip-note--in .zip-note__icon { background: #1a8a43; }

/* Out of area — big, warm, and never a dead end. */
.zip-note--out {
  border-color: var(--heat, #FF4D1C);
  background: #FFF4F0;
  color: #7a2410;
  font-size: 1.05rem;
}
.zip-note--out .zip-note__head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem;
  line-height: 1.3;
}
.zip-note--out .zip-note__icon { background: var(--heat, #FF4D1C); }
.zip-note--out .zip-note__cta { font-weight: 600; }
.zip-note--out a {
  color: #b3300f;
  font-weight: 700;
  text-decoration: underline;
}

/* success panel */
.book-success { text-align: center; padding-block: 20px; }
.book-success .icon { width: 44px; height: 44px; margin: 0 auto 18px; color: var(--deep); }

/* --------------------------------------------------------------------------
   16b. MOBILE ACTION BAR (index.html)
   On a phone the header CTA scrolls away and never comes back. This is the
   one control that stays reachable with a thumb. Hidden entirely ≥721px, and
   JS keeps it out of the way at the top of the page and over the footer.
   -------------------------------------------------------------------------- */
.mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  gap: 10px;
  padding: 10px calc(var(--pad) + var(--safe-l))
           calc(10px + var(--safe-b))
           calc(var(--pad) + var(--safe-r));
  background: rgba(10, 35, 66, 0.94);
  border-top: 1px solid var(--line-dark);
  box-shadow: 0 -6px 22px rgba(10, 35, 66, 0.22);
  transform: translateY(115%);
  transition: transform 0.28s cubic-bezier(0.22, 0.6, 0.25, 1);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .mobile-cta {
    background: rgba(10, 35, 66, 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta .btn {
  min-height: 50px;
  padding-inline: 16px;
  flex: 1;
}
.mobile-cta .btn--primary { flex: 1.4; }
.mobile-cta__text {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
}
.mobile-cta__text:hover { background: var(--paper); color: var(--ink); }

/* --------------------------------------------------------------------------
   17. MOTION
   One orchestrated hero reveal on load; scroll reveals fade + 12px rise, once.
   -------------------------------------------------------------------------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.js .hero [data-hero] {
  animation: rise-in 0.65s cubic-bezier(0.22, 0.6, 0.25, 1) both;
}
.js .hero [data-hero="1"] { animation-delay: 0.05s; }
.js .hero [data-hero="2"] { animation-delay: 0.15s; }
.js .hero [data-hero="3"] { animation-delay: 0.25s; }
.js .hero [data-hero="4"] { animation-delay: 0.35s; }
.js .hero [data-hero="5"] { animation-delay: 0.5s; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.6, 0.25, 1);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero [data-hero] { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .price-card, .faq summary .icon, .ba__handle { transition: none !important; }
  .mobile-cta, .site-nav { transition: none !important; }
}

/* Touch targets. Keyed to the input device rather than the viewport, so a
   tablet gets finger-sized rows at any width. Links sitting inside a
   sentence are left alone — WCAG exempts them, and padding them out would
   wreck the line spacing of the paragraph around them. */
@media (pointer: coarse) {
  /* inline-flex keeps each underline hugging its text while the box grows */
  .site-footer li a,
  .site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-contact li { min-height: 44px; }
  .site-footer li { margin-bottom: 2px; }

  /* header links at bare text height — this is the inline row on book.html
     and the full horizontal nav on a tablet above the drawer breakpoint */
  .site-nav a { padding-block: 11px; }
  .site-nav--inline a { padding: 11px 2px !important; }

  .faq summary { padding-block: 22px; }
  .addr-suggest__item { padding: 13px 12px; }
}

/* Hover styling on a touchscreen sticks after a tap — the button stays lit
   until you tap elsewhere. Give hover effects to pointers that can hover. */
@media (hover: none) {
  .price-card:hover { transform: none; border-color: var(--line); box-shadow: none; }
  .btn--ghost:hover { background: transparent; color: inherit; }
  .btn--primary:hover { background: var(--blue); }
  .hero .btn--ghost:hover,
  .section--ink .btn--ghost:hover,
  .section--deep .btn--ghost:hover { background: transparent; color: var(--paper); }
  .choice:hover { border-color: var(--line); }
  .choice:has(input:checked):hover { border-color: var(--blue); }
  .addr-suggest__item:hover { background: var(--paper); }
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid .price-card--popular { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(3) { border-left: none; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .area__grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --header-h: 64px; }

  /* --- nav drawer ------------------------------------------------------- */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line-dark);
    flex-direction: column;
    align-items: stretch;
    padding: 8px calc(var(--pad) + var(--safe-l))
             calc(20px + var(--safe-b))
             calc(var(--pad) + var(--safe-r));
    gap: 0;
    /* a short phone in landscape must still be able to reach every link */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 30px rgba(10, 35, 66, 0.4);
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 52px; /* generous row targets — no fat-finger mistakes */
    padding: 12px 2px;
    border-bottom: 1px solid var(--line-dark);
    font-size: 1.05rem;
    color: var(--paper);
  }
  .site-nav .btn {
    margin: 16px 0 0;
    border-bottom: none;
    justify-content: center;
    min-height: 52px;
    font-size: 1rem;
  }
  .nav-toggle { display: inline-flex; }
  .site-nav .nav-call { display: flex; color: var(--aqua); font-weight: 600; }

  /* while the drawer is open the page behind it must not scroll */
  body.nav-open { overflow: hidden; }

  /* book.html's two-link header stays inline, just tighter */
  .site-nav--inline { max-height: none !important; overflow: visible !important; box-shadow: none !important; }
  .site-nav--inline a { min-height: 0 !important; display: inline !important; }

  .spec-strip__grid { grid-template-columns: 1fr 1fr; }
  .spec-cell { padding: 20px 12px 18px; }
  .spec-cell:nth-child(3) { border-left: none; }
  .spec-cell:nth-child(n+3) { border-top: 1px solid var(--line-dark); }

  /* --- comparison table → stacked cards ---------------------------------
     A 3-column spec sheet in a 375px sideways-scrolling box hides the whole
     "Typical service" column. Same table, same markup, restacked: one card
     per spec, with each cell labelled from its data-label. */
  .compare-wrap {
    overflow: visible;
    border: none;
    background: none;
    border-radius: 0;
  }
  .compare { min-width: 0; }
  .compare thead { position: absolute; left: -9999px; } /* labels move into the cells */
  .compare tbody { display: block; }
  .compare tbody tr {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 12px;
  }
  .compare tbody tr:last-child { margin-bottom: 0; }
  .compare tbody th,
  .compare tbody td {
    display: block;
    width: auto;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  .compare tbody th {
    background: var(--ink);
    color: var(--paper);
    border-bottom: none;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
  }
  /* the desktop column widths outrank the shorthand above — restate them
     against the same class specificity so the cards go edge to edge */
  .compare tbody td.us,
  .compare tbody td.them {
    width: auto;
    border-left: none;
    border-right: none;
  }
  .compare tbody tr td:last-child { border-bottom: none; }
  .compare tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-70);
    margin-bottom: 5px;
  }
  .compare tbody td.us::before { color: var(--deep); }
  .compare tbody td.them { background: var(--paper); }

  /* --- footer ------------------------------------------------------------ */
  .site-footer { padding-bottom: calc(24px + var(--safe-b)); }
  .site-footer__legal { gap: 8px; }


  /* the mobile bar owns the bottom of the screen — keep it off the legal line */
  .mobile-cta { display: flex; }
  /* clearance for the bar mid-transition — it's already sliding away by the
     time the footer is on screen, so this only has to cover the overlap */
  body.has-mobile-cta .site-footer { padding-bottom: calc(56px + var(--safe-b)); }
}

@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-left: none; }
  .step:nth-child(n+2) { border-top: 1px solid var(--line); }
  .pricing-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .faq__body { padding-left: 4px; }
  .book-nav { flex-direction: column-reverse; }
  .book-nav .btn { width: 100%; }
  .hero__cta .btn { width: 100%; }

  /* --- hero: tighter, so the CTA is reachable without a long scroll ------ */
  .hero { padding-block: 36px 40px; }
  .hero__grid { gap: 30px; }
  .hero__eyebrow { margin-bottom: 14px; font-size: 0.72rem; letter-spacing: 0.12em; align-items: flex-start; }
  /* the rule sits on the first line when the place list wraps to two */
  .hero__eyebrow::before { width: 20px; margin-top: 0.62em; }
  .hero__title { margin-bottom: 16px; }
  .hero__sub { margin-bottom: 22px; }
  .hero__cta { gap: 10px; }
  .btn { min-height: 50px; padding: 14px 22px; }

  /* --- pricing ----------------------------------------------------------- */
  .price-card { padding: 22px 18px 18px; }
  .price-card__price { font-size: 2.4rem; }
  .pricing-note { font-size: 0.76rem; }

  /* --- gallery: 4:3 reads better than a square in one column ------------- */
  .gallery-sliders .ba { aspect-ratio: 4 / 3; }

  /* --- footer: two link columns instead of one long ladder --------------- */
  .site-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .site-footer .footer-links { columns: 2; column-gap: 20px; }
  /* the 44px link rows above already space these — no extra margin needed */
  .site-footer .footer-links li { break-inside: avoid; margin-bottom: 0; }
  .footer-logo { width: 118px; }
  .site-footer__legal { flex-direction: column; }

  /* --- booking form ------------------------------------------------------ */
  .book-panel { padding: 20px 16px; }
  .book-title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .book-sub { margin-bottom: 22px; }
  /* 16px is the exact threshold below which iOS Safari zooms the viewport
     on focus — never go under it here */
  .field input,
  .field select,
  .field textarea { font-size: 16px; min-height: 50px; padding: 13px 14px; }
  .field { margin-bottom: 16px; }
  .field-row .field { margin-bottom: 16px; }
  /* label hints read as a second line of the label, not a run-on */
  .field .hint { display: block; margin-left: 0; margin-top: 3px; }

  /* Plan cards, restacked. In one flex row the cadence line gets squeezed
     into a 130px column and wraps mid-phrase, while the radio and price
     float in the vertical middle of a card that's now three lines tall.
     Grid instead: name and price share the top line, the cadence runs the
     full width beneath them. display:contents lifts the label and meta out
     of their wrapper so they can take grid cells of their own. */
  .choice {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 4px;
    padding: 15px 14px;
    min-height: 62px;
  }
  .choice__body { display: contents; }
  .choice__body br { display: none; } /* the grid handles the line break now */
  .choice__radio { grid-area: 1 / 1; margin-top: 3px; }
  .choice__label { grid-area: 1 / 2; display: block; }
  .choice__price { grid-area: 1 / 3; margin-left: 0; font-size: 1.05rem; text-align: right; }
  .choice__meta  { grid-area: 2 / 2 / 3 / -1; font-size: 0.7rem; letter-spacing: 0.04em; }
  .choice__flag { margin: 6px 0 0; }
  .promo-row .btn { min-height: 50px; }
  .summary .row { padding: 12px 14px; }
  .summary dt { font-size: 0.68rem; }
  .book-total__value { font-size: 1.35rem; }
}

@media (max-width: 460px) {
  .brand { font-size: 0.84rem; gap: 10px; }
  .brand__mark { width: 40px; height: 40px; }
  .site-header__inner { gap: 12px; }
  .site-nav--inline { gap: 14px !important; }
  .site-nav--inline a { font-size: 0.88rem !important; }

  .spec-cell__label { letter-spacing: 0.1em; font-size: 0.68rem; }
  .mobile-cta { gap: 8px; }
  .mobile-cta .btn { padding-inline: 10px; font-size: 0.95rem; }
}