/* ============================================================
   BETH SANTILLO CLEANING — cinematic scroll estate walkthrough
   Palette: dawn gold → coastal white · sea-glass · hydrangea
   Type: Cormorant Garamond (display serif) · Archivo (technical sans)
   ============================================================ */

:root {
  --gold: #c9a35c;
  --gold-soft: #e9d9b8;
  --dawn: #f4e7cd;
  --coastal: #faf9f5;
  --ink: #1d2420;
  --ink-soft: #4a544e;
  --seaglass: #7ca493;
  --hydrangea: #8ba0cc;
  /* Beth's brand magenta, sampled from the logo artwork itself */
  --pink: #e9026e;
  /* --pink on white is 4.47:1 — a hair under AA for small text, so the CTA and any
     other white-on-pink element uses this deeper step (5.28:1) instead */
  --pink-deep: #d40062;
  --pink-tint: rgba(233, 2, 110, 0.12);
  /* Headline pinks. --pink-pale is the baby pink; it only works over the film and
     the dark editorial band, carried by a drop shadow (the hero photo averages
     rgb(180,164,153), where nothing clears 3:1 — not even the original white).
     On the cream panels the pale tone measures 1.8:1 and disappears, so those
     headlines use --pink-rose: same hue, deep enough to read at 3.3:1. */
  --pink-pale: #f6b8d4;
  /* same colour as channels, so body copy can keep its original alpha values */
  --pink-pale-rgb: 246, 184, 212;
  --pink-rose: #ce6a90;
  --dark: #131a17;
  --dark-2: #1a2320;
  --hairline: rgba(29, 36, 32, 0.14);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* DELIBERATELY `auto`, not `smooth`. On a scroll-scrub site the browser's smooth
   scrolling is a second animation layered under the film's own easing: measured, a
   single 40px arrow-key press was spread over 8 frames / 143ms, and the camera then
   eased toward that already-lagging position. The two compound and read as heavy
   lag on keyboard scrolling. Phones never showed it because touch scrolling ignores
   scroll-behavior entirely — which is exactly why desktop felt worse than mobile.
   Anchor links are animated in JS instead (see main.js), so they still glide. */
html { scroll-behavior: auto; background: var(--dark); /* overscroll bounce matches the dark footer */ }
body {
  /* Browser "scroll anchoring" nudges the scroll position when anything above the
     viewport changes size. This page is pinned/fixed layers by design, so any
     nudge reads as the film skipping. Off. */
  overflow-anchor: none;
  font-family: var(--sans);
  background: var(--coastal);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* ============ PRELOADER ============ */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.9s ease, visibility 0.9s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; color: var(--pink-pale); }
.loader-kicker {
  font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--pink-pale); font-weight: 300;
}
.loader-title {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(28px, 4vw, 44px); margin: 14px 0 26px;
}
.loader-list { list-style: none; min-height: 20px; }
.loader-list li {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(var(--pink-pale-rgb),0.55); display: none;
}
.loader-list li.on { display: block; animation: fadeUp 0.6s ease; }
.loader-bar {
  width: 180px; height: 1px; background: rgba(var(--pink-pale-rgb),0.18);
  margin: 26px auto 0; position: relative; overflow: hidden;
}
#loader-fill {
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: var(--pink-pale); transition: transform 0.4s ease;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ FILM CANVAS + OVERLAYS ============ */
#film {
  /* left/right:0 govern the width — 100vw can exceed the visual viewport and
     leave a sliver at the edge on mobile.
     HEIGHT IS THE LARGE VIEWPORT (lvh), NOT 100%. On phones the browser's address
     bar slides in and out while scrolling, which changes the visible height
     dozens of times per gesture. Sized to 100%, the canvas was resized (and its
     backing store thrown away and rebuilt) on every one of those changes — the
     "glitch at the end of the scroll" on mobile. lvh never changes with the bar,
     so the bar just slides over the bottom of a canvas that stays put. */
  position: fixed; top: 0; left: 0; right: 0; width: 100%;
  height: 100vh; height: 100lvh;
  z-index: 0; display: block; background: var(--dark);
}
/* Static overlays. Their content never changes, so the compositor rasterises
   each once and reuses it — unlike drawing them into the canvas every frame.
   `will-change: transform` promotes them to their own layer so they are not
   re-rasterised when the canvas beneath repaints.
   NOTE: no mix-blend-mode here. Blending against an every-frame canvas cost
   ~17ms per frame on a 1920×1080 display; a plain gradient is near-free and
   visually all but identical. */
/* Sparkle motes: separate layer so the photo canvas can sit still when idle.
   Same box and stacking as #film; DOM order places it above the film and
   below #grade / #vignette. */
#motes {
  position: fixed; top: 0; left: 0; right: 0; width: 100%;
  height: 100vh; height: 100lvh;
  z-index: 0; display: block; pointer-events: none;
}
/* Once the white editorial panel fully covers the film, hide the film layers.
   On phones the page "bounces" past its last pixel, and the gap below the footer
   showed whatever sits behind the page — a stray slice of the estate photo.
   Hidden, the bounce shows the plain dark page colour instead. */
html.film-off #film, html.film-off #motes,
html.film-off #grade, html.film-off #vignette { visibility: hidden; }
#grade {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,231,205,0.20), rgba(250,249,245,0) 40%);
  will-change: transform;
}
#vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(15,18,16,0.34) 100%);
  will-change: transform;
}

/* ============ HEADER ============ */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  mix-blend-mode: normal;
}
.brand {
  text-decoration: none; color: #fff; text-shadow: 0 1px 14px rgba(10,14,12,0.35);
  display: flex; align-items: center; gap: 14px;
}
.brand-name {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 21px; letter-spacing: 0.14em; text-transform: uppercase;
}
.brand-sub {
  display: block; font-size: 9px; letter-spacing: 0.4em;
  text-transform: uppercase; opacity: 0.75; margin-top: 3px; font-weight: 300;
}

/* ---- Logo variants (?logo=a..e) ------------------------------------------
   Every treatment ships in the markup and CSS reveals one, so the client can
   flip between them on the live URL without a redeploy. Strip to the winner
   once chosen. Default is `a`, set on <html> by the inline script in <head>. */
.brand-logo {
  display: none; height: 56px; width: auto;
  /* the magenta holds on both backgrounds; the shadow just seats it over the film */
  filter: drop-shadow(0 1px 10px rgba(10,14,12,0.32));
}
#site-header.over-light .brand-logo { filter: none; }
.brand-est {
  display: none; font-size: 9px; letter-spacing: 0.4em;
  text-transform: uppercase; opacity: 0.75; font-weight: 300;
}

/* a — full-colour wordmark (default) */
html[data-logo="a"] .brand-text { display: none; }
html[data-logo="a"] .brand-logo-colour { display: block; }

/* b — full-colour wordmark + Est. 1996 */
html[data-logo="b"] .brand-text { display: none; }
html[data-logo="b"] .brand-logo-colour { display: block; }
html[data-logo="b"] .brand-est { display: block; }

/* c — knockout mono: white over the film, ink over the editorial sections */
html[data-logo="c"] .brand-text { display: none; }
html[data-logo="c"] .brand-logo-white { display: block; }
html[data-logo="c"] #site-header.over-light .brand-logo-white,
html[data-logo="c"] .brand-logo-ink { display: none; }
html[data-logo="c"] #site-header.over-light .brand-logo-ink { display: block; }

/* d — the complete lockup, illustration and all. Runs taller than the other
   treatments on purpose: below ~80px the phone line and tagline stop reading. */
html[data-logo="d"] .brand-text { display: none; }
html[data-logo="d"] .brand-logo-full { display: block; height: 116px; }

/* e — the original text wordmark, kept as the baseline to compare against */
html[data-logo="e"] .brand-text { display: block; }
.num-nav { display: flex; align-items: center; gap: clamp(6px, 0.9vw, 12px); }
.num-nav a {
  color: #fff; text-decoration: none; font-size: 11px; font-weight: 300;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(10,14,12,0.4);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.num-nav i {
  font-style: normal; color: var(--pink-pale); margin-right: 7px; font-size: 10px;
}

/* The four section links take the CTA's pink pill shape. They stay outlined
   rather than filled so the solid "Book With Us Now" is still unmistakably the
   primary action — five identical filled pills flatten the hierarchy (tried it,
   reverted). The dark scrim inside keeps the white label legible over a bright
   sky, which a translucent pink alone does not. */
/* The four section links: grey scrim fill with a pink outline. Sitting them beside
   the solid CTA gives the header a clear hierarchy — one action reads as THE action.
   Labels stay white: brand pink on the scrim measures ~1.7:1 over a bright sky. The
   numeral and the ring carry the pink instead. */
.num-nav a:not(.nav-book) {
  border: 1px solid var(--pink);
  border-radius: 999px;
  background: rgba(15, 18, 16, 0.32);
  color: #fff;
  padding: 11px 17px;
  line-height: 1;
  font-size: 10px; font-weight: 400; letter-spacing: 0.18em;
  white-space: nowrap;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.num-nav a:not(.nav-book):hover {
  background: var(--pink-deep); border-color: var(--pink-deep);
  transform: translateY(-2px);
}
.num-nav a:not(.nav-book) i { color: var(--pink); opacity: 0.95; margin-right: 6px; }
.num-nav a:not(.nav-book):hover i { color: #fff; }

/* over the editorial panels: pink type on a pink tint, no scrim needed */
#site-header.over-light .num-nav a:not(.nav-book) {
  background: var(--pink-tint);
  color: var(--pink-deep);
  border-color: var(--pink-deep);
  text-shadow: none;
}
#site-header.over-light .num-nav a:not(.nav-book) i { color: var(--pink-deep); }
#site-header.over-light .num-nav a:not(.nav-book):hover {
  background: var(--pink-deep); color: #fff;
}
#site-header.over-light .num-nav a:not(.nav-book):hover i { color: #fff; }
/* Persistent booking CTA — legible over both the film and the light sections */
.num-nav a.nav-book {
  border-bottom: none !important;
  background: var(--pink-deep);
  color: #fff !important;
  text-shadow: none !important;
  padding: 14px 24px;
  line-height: 1;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em;
  white-space: nowrap;
  box-shadow: 0 2px 18px rgba(10,14,12,0.28);
  /* deliberately NOT transitioning background/colour: they swap together when the
     header crosses onto the light sections, and easing them would show a brief
     unreadable cream-on-cream frame */
  transition: transform 0.25s, box-shadow 0.3s;
}
.num-nav a.nav-book:hover {
  background: var(--pink); transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(212,0,98,0.42);
}
/* The pink is the brand signal, so it stays pink over the editorial sections too —
   only the shadow changes, since a dark glow reads as dirt on the cream panel. */
#site-header.over-light .num-nav a.nav-book {
  background: var(--pink-deep); color: #fff !important;
  box-shadow: 0 2px 14px rgba(212,0,98,0.24);
}
#site-header.over-light .num-nav a.nav-book:hover { background: var(--pink); }
/* Over the editorial panels the header needs its own ground. Without this the
   page scrolls THROUGH it — "The craft, in full." ran straight across the nav
   pills. A flat colour is compositor-cheap; do NOT reach for backdrop-filter,
   which cost ~17ms/frame here before. */
#site-header.over-light {
  background: var(--coastal);
  border-bottom: 1px solid var(--hairline);
}
#site-header { transition: background-color 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent; }
#site-header.over-light .brand,
#site-header.over-light .num-nav a { color: var(--ink); text-shadow: none; }
#site-header.over-light .num-nav i { color: var(--pink-deep); }

/* Kept as a wrapper so the nav can grow without disturbing the brand side */
.header-right { display: flex; align-items: center; }

/* ============ HUD — TURNOVER METER ============ */
#hud {
  position: fixed; right: clamp(18px, 3vw, 48px); top: 50%;
  transform: translateY(-50%); z-index: 30; width: 200px;
  color: #fff; opacity: 0; transition: opacity 0.8s ease;
  text-shadow: 0 1px 10px rgba(10,14,12,0.45);
  pointer-events: none;
  padding: 26px 22px;
  background: radial-gradient(130% 105% at 60% 50%, rgba(19,26,23,0.34), rgba(19,26,23,0) 78%);
}
#hud.on { opacity: 1; }
#hud.off { opacity: 0; }
.hud-top { display: flex; justify-content: space-between; align-items: baseline; }
.hud-label {
  font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase; font-weight: 300;
}
.hud-pct {
  font-family: var(--serif); font-size: 30px; font-weight: 300; font-style: italic;
  color: var(--pink-pale);
}
.hud-meter {
  height: 1px; background: rgba(255,255,255,0.28);
  margin: 10px 0 20px; position: relative; overflow: hidden;
}
#hud-fill {
  position: absolute; inset: 0; background: var(--pink-pale);
  transform: scaleX(0); transform-origin: left;
}
.hud-rooms { list-style: none; }
.hud-rooms li {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 300; opacity: 0.45; transition: opacity 0.4s;
}
.hud-rooms li b { font-weight: 400; }
.hud-rooms li small { font-size: 9px; letter-spacing: 0.1em; color: var(--pink-pale); }
.hud-rooms li.current { opacity: 1; }
.hud-rooms li.done { opacity: 0.75; }
.hud-rooms li.done small::after { content: "✓"; color: var(--seaglass); font-size: 11px; }
.hud-note {
  margin-top: 16px; font-size: 9px; letter-spacing: 0.24em;
  text-transform: uppercase; font-weight: 300; opacity: 0.8;
  min-height: 24px; color: var(--pink-pale);
}

/* Mobile mini HUD */
#hud-mini {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  pointer-events: none;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(15,18,16,0.55), transparent);
  color: #fff; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.6s;
}
#hud-mini.on { opacity: 1; }
#hud-mini.off { opacity: 0; }
.hud-mini-bar { flex: 1; height: 1px; background: rgba(255,255,255,0.3); position: relative; }
#hud-mini-fill {
  position: absolute; inset: 0; background: var(--pink-pale);
  transform: scaleX(0); transform-origin: left;
}

/* ============ FILM TRACK / SCENES ============ */
#track { position: relative; z-index: 10; }
/* lvh, not vh: in browsers where vh tracks the sliding address bar, 300vh changed
   the page length by thousands of px every time the bar moved. At the bottom of the
   page that fed back on itself (bar shows → page shrinks → browser jumps → bar
   hides → page grows…) — the endless "skittering between sections" on phones.
   lvh never changes with the bar, so the page length is fixed. */
.scene { height: 300vh; height: 300lvh; position: relative; }
.scene .pin {
  position: sticky; top: 0; height: 100vh; height: 100lvh;
  display: flex; align-items: center;
  /* Top padding reserves the fixed header's band (22 + 116 logo + 22 = 160px) so
     the centred content can never ride up under it. Without this the awards row
     collides with the logo on short viewports — it did at 1280x720. */
  padding: 172px clamp(24px, 6vw, 90px) 0;
}
/* editorial scrim — keeps white type crisp over the brightest frames */
.scene .pin::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(19, 26, 23, 0.5) 0%,
    rgba(19, 26, 23, 0.22) 42%,
    rgba(19, 26, 23, 0) 68%);
}
.content { max-width: 620px; color: #fff; position: relative; z-index: 1; }

/* Reveal animation driven by JS adding .in */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.4s; }

.kicker {
  font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  font-weight: 300; color: var(--pink-pale);
  text-shadow: 0 1px 10px rgba(10,14,12,0.4);
}
.kicker.dark { color: var(--pink-deep); text-shadow: none; }
.kicker.light { color: var(--pink-pale); }
.kicker.center, .center { text-align: center; }

/* Hero awards + review rotator */
/* Sized to the same slot as the review rotator below it (560px), and set at the
   rotator's type scale, so the two read as one stack rather than a loud badge
   sitting on top of a quiet quote. */
/* Kept deliberately small: the 88px logo sits directly above this in the fixed
   header, and at full size the badges crowded it. */
.hero-laurels {
  display: flex; align-items: center; gap: 9px;
  margin-top: 26px; margin-bottom: 4px;
  max-width: 560px;
}
/* Same treatment as the four header pills: grey scrim, pink ring, pink mark,
   white label. The scrim is what lets any of it read over a bright sky. */
.mini-laurel {
  border: 1px solid var(--pink); border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  letter-spacing: 0.06em; line-height: 1;
  color: #fff;
  background: rgba(15,18,16,0.32);
  box-shadow: 0 2px 16px rgba(10,14,12,0.26);
}
.mini-laurel i {
  font-style: normal; color: var(--pink); margin-right: 7px; font-size: 13px;
}
.mini-laurel-label {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: #fff; line-height: 1.5;
  margin-left: 5px; text-shadow: 0 1px 12px rgba(10,14,12,0.75);
}
.review-rotator {
  position: relative; margin: 20px 0 6px; min-height: 92px; max-width: 560px;
}
.rr-quote {
  position: absolute; inset: 0;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(18px, 2vw, 24px); line-height: 1.45;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 16px rgba(10,14,12,0.5);
  opacity: 0; transition: opacity 1.1s ease;
}
.rr-quote.on { opacity: 1; }
.rr-quote span {
  display: block; font-family: var(--sans); font-style: normal;
  font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase;
  margin-top: 9px; color: var(--pink-pale);
}

.pull-quote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(19px, 2.2vw, 26px); margin: 26px 0 8px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 16px rgba(10,14,12,0.45);
}
.pull-quote span {
  display: block; font-family: var(--sans); font-style: normal;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  margin-top: 10px; color: var(--pink-pale);
}

/* Every section's main headline is brand pink. These all run 38px+, so the
   4.24:1 of --pink on cream clears AA for large text; the shadows stay because
   the film headlines sit over photography. */
.display {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(58px, 9vw, 128px); line-height: 0.98;
  margin: 18px 0 22px; letter-spacing: 0.01em;
  color: #fff;
  /* two-layer shadow: the tight one gives the letterform an edge against light
     areas of the photo, the wide one seats it in the scene */
  text-shadow: 0 1px 3px rgba(10,14,12,0.55), 0 2px 28px rgba(10,14,12,0.8);
}
.display-2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 6.6vw, 92px); line-height: 1.0;
  margin: 20px 0 22px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(10,14,12,0.55), 0 2px 26px rgba(10,14,12,0.8);
}
/* Once the white editorial sections begin — "The word of the neighborhood."
   onward — the headings go ink. The numerals and section kickers keep the pink,
   so the accent still carries through without the headings shouting. */
.display-3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(38px, 5.4vw, 74px); line-height: 1.04; margin: 16px 0 30px;
  color: var(--ink);
}
/* this one sits on the dark editorial band, so it takes the pale tone */
.display-3.light { color: #fff; }

.lede {
  font-size: 14px; font-weight: 300; letter-spacing: 0.06em; line-height: 1.8;
  color: rgba(255,255,255,0.9); text-shadow: 0 1px 12px rgba(10,14,12,0.5);
}
.fact {
  font-size: 15px; font-weight: 300; letter-spacing: 0.04em; line-height: 1.85;
  color: rgba(255,255,255,0.94); max-width: 480px;
  text-shadow: 0 1px 12px rgba(10,14,12,0.5);
}
/* Matched to the "Book With Us Now" CTA — same fill, same pill, same shadow — so
   the chips under each scene read as part of one pink system. Solid --pink-deep
   with white type measures 5.28:1, a big gain on the old translucent dark box. */
.spec-chip {
  display: inline-block; margin-top: 24px;
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; font-weight: 400;
  /* Deep pink with white type, matching the header pills and the CTA — one pink
     system across the whole site. 5.28:1. */
  color: #fff; padding: 11px 22px;
  border: 1px solid var(--pink-deep);
  border-radius: 999px;
  background: var(--pink-deep);
  text-shadow: none;
  box-shadow: 0 2px 16px rgba(212,0,98,0.3);
}
.urgency {
  margin-top: 26px; font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; font-weight: 400; color: var(--pink-pale);
  text-shadow: 0 1px 10px rgba(10,14,12,0.5);
}
/* "Reserve Your Clean" in the terrace scene — same pink pill as the header CTA
   and the spec chips, so every call to action reads as one system. Was a cream
   box, which is the last of the cream on the film sections. */
.btn-reserve {
  display: inline-block; margin-top: 18px; text-decoration: none;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 400;
  color: #fff; background: var(--pink-deep); padding: 16px 34px;
  border-radius: 999px;
  box-shadow: 0 2px 18px rgba(212,0,98,0.32);
  transition: background 0.3s, transform 0.3s;
}
.btn-reserve:hover { background: var(--pink); transform: translateY(-2px); }

/* Hero trust row */
.trust-row {
  margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 22px;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 300; color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 10px rgba(10,14,12,0.5);
}
.trust-badge {
  padding: 9px 16px; border: 1px solid rgba(var(--pink-pale-rgb),0.6);
  color: var(--pink-pale); font-weight: 400;
  background: rgba(15,18,16,0.34);
}
.trust-badge b { font-weight: 500; margin-left: 6px; }
.trust-item { position: relative; }

.scroll-cue {
  margin-top: 44px; font-size: 10px; letter-spacing: 0.34em;
  text-transform: uppercase; font-weight: 300; color: rgba(255,255,255,0.85);
  display: flex; align-items: center; gap: 14px;
}
.scroll-cue span {
  display: block; width: 1px; height: 44px;
  background: linear-gradient(180deg, transparent, #fff);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ============ EDITORIAL ============ */
#editorial { position: relative; z-index: 20; }
.ed-section {
  background: var(--coastal); padding: clamp(90px, 12vw, 160px) clamp(24px, 7vw, 110px);
  border-top: 1px solid var(--hairline);
}
.ed-section.alt { background: #f3f1ea; }
.ed-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 6vw, 90px);
  max-width: 1240px; margin: 0 auto; align-items: start;
}
.ed-body {
  font-size: 15px; font-weight: 300; line-height: 2.0; letter-spacing: 0.03em;
  color: var(--ink-soft); margin-bottom: 22px; max-width: 520px;
}
.ed-body em { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.ed-quote {
  margin-top: 26px; font-family: var(--serif); font-style: italic;
  font-weight: 300; font-size: clamp(18px, 1.8vw, 23px); color: var(--ink-soft);
}
.ed-quote span {
  display: block; font-family: var(--sans); font-style: normal;
  font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase;
  margin-top: 8px; color: var(--pink-deep);
}

/* Services */
.services-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 6vw, 90px);
  max-width: 1080px; margin: 30px auto 0;
}
.service {
  border-top: 1px solid var(--hairline); padding: 26px 0 30px;
  display: grid; grid-template-columns: 44px 1fr; gap: 4px 18px;
}
.service-num {
  grid-row: 1 / 3;
  font-size: 11px; letter-spacing: 0.2em; color: var(--pink-deep);
  font-weight: 400; padding-top: 6px;
}
.service h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2vw, 26px); color: var(--ink);
}
.service p {
  font-size: 12.5px; font-weight: 300; line-height: 1.85; color: var(--ink-soft);
  letter-spacing: 0.03em;
}

/* Reputation */
.laurel-row {
  display: flex; justify-content: center; gap: clamp(28px, 5vw, 70px);
  margin: 46px 0 54px;
}
.laurel {
  width: 158px; height: 158px; border-radius: 50%;
  border: 1px solid var(--pink-deep);
  box-shadow: 0 0 0 5px var(--coastal), 0 0 0 6px var(--hairline);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center;
}
.laurel-mark { color: var(--pink-deep); font-size: 13px; }
.laurel-year {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 38px; line-height: 1; color: var(--ink);
}
.laurel-title {
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); line-height: 1.7;
}
.laurel-src {
  font-size: 8px; letter-spacing: 0.34em; text-transform: uppercase;
  font-weight: 300; color: var(--seaglass); margin-top: 2px;
}
.quote-grid {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 5vw, 70px);
  max-width: 1080px; margin: 0 auto; align-items: start;
}
.review-quote blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(21px, 2.4vw, 30px); line-height: 1.55; color: var(--ink);
}
.review-quote figcaption {
  margin-top: 18px; font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; font-weight: 400; color: var(--hydrangea);
}
.review-quote figcaption::before {
  content: "— "; color: var(--pink-deep);
}
.rep-strip {
  margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--hairline);
  text-align: center; font-size: 10.5px; letter-spacing: 0.26em;
  text-transform: uppercase; font-weight: 300; color: var(--ink-soft);
  max-width: 1080px; margin-left: auto; margin-right: auto; line-height: 2.2;
}

.commit-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
  max-width: 1240px; margin: 44px auto 0;
}
.commit { background: #f3f1ea; padding: 34px 24px 40px; }
.commit-num {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 26px; color: var(--pink-deep);
}
.commit h3 {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  font-weight: 500; margin: 14px 0 12px;
}
.commit p { font-size: 12.5px; font-weight: 300; line-height: 1.85; color: var(--ink-soft); }

.regions-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px);
  max-width: 1240px; margin: 40px auto 0;
}
.regions-grid.regions-three { grid-template-columns: repeat(3, 1fr); }
.regions-note {
  max-width: 1240px; margin: 46px auto 0; padding-top: 26px;
  border-top: 1px solid var(--hairline);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 300; color: var(--ink-soft);
}
.region { border-top: 1px solid var(--ink); padding-top: 26px; }
.region-num {
  font-size: 11px; letter-spacing: 0.3em; color: var(--pink-deep); font-weight: 400;
}
.region h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 38px);
  margin: 10px 0 14px;
}
.region-towns {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 300; color: var(--hydrangea); margin-bottom: 14px; line-height: 2;
}
.region-copy { font-size: 13.5px; font-weight: 300; line-height: 1.9; color: var(--ink-soft); }

/* Reserve / dark closing */
.dark-section { background: var(--dark); border-top: none; }
.reserve-line {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--pink-pale); font-weight: 300; margin-bottom: 40px;
}
.reserve-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.btn-primary, .btn-ghost {
  text-decoration: none; font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; font-weight: 400; padding: 17px 36px;
  transition: all 0.3s;
}
.btn-primary { background: var(--pink-pale); color: var(--ink); }
.btn-primary:hover { background: #fff; }
.btn-ghost {
  color: var(--pink-pale); border: 1px solid rgba(var(--pink-pale-rgb),0.4); text-transform: none;
  letter-spacing: 0.12em;
}
.btn-ghost:hover { border-color: var(--pink-pale); color: var(--pink-pale); }
.social-block { margin-top: 64px; }
.social-title {
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(var(--pink-pale-rgb),0.6); font-weight: 300; margin-bottom: 18px;
}
.social-row, .review-chips {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.social-btn {
  text-decoration: none; color: var(--pink-pale);
  border: 1px solid rgba(var(--pink-pale-rgb),0.3);
  padding: 13px 24px; font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 300;
  transition: border-color 0.3s, color 0.3s;
}
.social-btn:hover { border-color: var(--pink-pale); color: var(--pink-pale); }
.review-funnel { margin-top: 46px; }
.review-chip {
  text-decoration: none; color: var(--ink);
  background: var(--pink-pale); padding: 13px 24px;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 400; transition: background 0.3s;
}
.review-chip:hover { background: #fff; }
.review-chip.soon {
  background: transparent; color: rgba(var(--pink-pale-rgb),0.45);
  border: 1px dashed rgba(var(--pink-pale-rgb),0.25); cursor: default;
}
.review-chip.soon em {
  font-style: normal; display: block; font-size: 8px;
  letter-spacing: 0.3em; margin-top: 4px; color: var(--seaglass);
}
.dark-section footer {
  margin-top: 80px; padding-top: 30px;
  border-top: 1px solid rgba(var(--pink-pale-rgb),0.14); text-align: center;
}
.dark-section footer p {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(var(--pink-pale-rgb),0.5); font-weight: 300; line-height: 2.2;
}
.dark-section footer .footnote { opacity: 0.55; text-transform: none; letter-spacing: 0.08em; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .commit-grid { grid-template-columns: repeat(2, 1fr); }
  .commit:last-child { grid-column: 1 / -1; }
  .regions-grid.regions-three { grid-template-columns: 1fr 1fr; }
  .regions-grid.regions-three .region:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  #hud { display: none; }
  /* keep the wordmark on one line and clear of the hero copy */
  #site-header { padding: 16px 18px; align-items: flex-start; }
  .brand-name { font-size: 15px; letter-spacing: 0.1em; white-space: nowrap; }
  /* the mobile header is shorter (68px logo), so it needs less reserved band */
  .scene .pin { padding-top: 122px; }
  /* The portrait framing puts the white van directly behind the headline, where
     pale pink has almost no contrast. The desktop scrim is a left-to-right wedge,
     which does nothing for a full-width phone column — swap in a vertical one. */
  .scene .pin::before {
    background: linear-gradient(180deg,
      rgba(19, 26, 23, 0.30) 0%,
      rgba(19, 26, 23, 0.52) 38%,
      rgba(19, 26, 23, 0.46) 72%,
      rgba(19, 26, 23, 0.18) 100%);
  }
  /* the stacked script needs to stay above ~36px to read; below that it muds out */
  .brand-logo { height: 40px; }
  /* must match the [data-logo] specificity or the desktop 88px would win here */
  html[data-logo="d"] .brand-logo-full { height: 68px; }
  .brand-est { display: none !important; }
  /* pills don't fit a phone header alongside the CTA — drop back to plain links */
  .num-nav a:not(.nav-book) {
    border: none; background: none; padding: 0 0 3px; font-size: 10px;
  }
  .brand-sub { font-size: 7.5px; letter-spacing: 0.24em; white-space: nowrap; }
  .num-nav a { font-size: 9.5px; letter-spacing: 0.14em; }
  .hero-content { padding-top: 46px; }
  .review-rotator { min-height: 132px; }
  .quote-grid { grid-template-columns: 1fr; }
  .laurel { width: 132px; height: 132px; }
  .laurel-year { font-size: 32px; }
  .trust-row { gap: 10px 18px; }
  .services-grid { grid-template-columns: 1fr; }
  .review-rotator { min-height: 118px; }
  .hero-laurels { flex-wrap: wrap; }
  #hud-mini { display: flex; }
  .num-nav a i { display: none; }
  .num-nav { gap: 10px; align-items: center; }
  /* keep only the wordmark link + the booking CTA on small screens */
  .num-nav a:nth-child(1), .num-nav a:nth-child(2),
  .num-nav a:nth-child(3), .num-nav a:nth-child(4) { display: none; }
  .num-nav a.nav-book { padding: 15px 18px; font-size: 10px; letter-spacing: 0.14em; }
  .ed-grid, .regions-grid, .regions-grid.regions-three { grid-template-columns: 1fr; }
  .regions-grid.regions-three .region:last-child { grid-column: auto; }
  /* single column so cards can't spill past the viewport edge */
  .commit-grid { grid-template-columns: 1fr; }
  .commit:last-child { grid-column: auto; }
  /* comfortable thumb targets */
  .review-chip, .social-btn { padding: 15px 24px; }
  .scene { height: 260vh; height: 260lvh; }
  .br-d { display: none; }
}
/* Short phones (SE, older 667px screens): the hero stack ran 45px past the fold
   and cut off "Begin the walkthrough". Tighten the rhythm rather than drop
   anything — measured at 375x667, this recovers ~80px. */
@media (max-width: 900px) and (max-height: 740px) {
  .scene .pin { padding-top: 84px; }
  .hero-laurels { margin-top: 12px; }
  .review-rotator { margin: 10px 0 4px; min-height: 104px; }
  .display { margin: 8px 0 14px; }
  .trust-row { margin-top: 16px; gap: 8px 18px; }
  .scroll-cue { margin-top: 20px; }
}

/* ============ REDUCED MOTION ============ */
/* The contact email (BethSantilloCleaning@gmail.com) is 279px wide at desktop
   padding — fine on a 375px phone, ~7px too wide on a 320px one. Trim the side
   padding on phones, and let it wrap rather than overflow as a last resort. */
@media (max-width: 480px) {
  .btn-primary, .btn-ghost { padding: 17px 22px; }
  .btn-ghost { max-width: 100%; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue span { animation: none; }
}