/* ============================================================================
   Lavare Cleans — "The 805" homepage
   Page-specific styles. Tokens live in index.html's inline <style>; this file
   is composition. Do not restyle .sc-stage / .sc-copy / [data-sc-*] — those
   are the engine's mechanism (see scrollcraft.css).
   ========================================================================== */

/* ------------------------------------------------------------- site bar -- */
.site-bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-4) var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--sc-hairline);
}
.site-bar__mark { display: flex; align-items: center; gap: var(--sc-2); }
.site-bar__mark img { height: clamp(38px, 5vw, 50px); width: auto; }
.site-bar__mark span {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); display: none;
}
/* The wordmark repeats the logo; show it only when the bar has room to spare
   next to the phone number. */
@media (min-width: 1100px) { .site-bar__mark span { display: inline; } }
.site-bar__nav {
  margin-left: auto; margin-right: var(--sc-5);
  display: flex; align-items: center; gap: var(--sc-5);
}
.site-bar__nav a {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); font-weight: 500;
  letter-spacing: var(--sc-track-snug); text-decoration: none;
  color: var(--sc-ink-soft); white-space: nowrap;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.site-bar__nav a:hover,
.site-bar__nav a:focus-visible,
.site-bar__nav a[aria-current="page"] { color: var(--sc-ink); }
.site-bar__nav a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
/* Under ~400px the logo, this link and the quote button run out of bar and
   start touching. The footer carries the same link on every page, so drop
   it here rather than shrinking three things at once. */
/* Below 400px the About link folds into the panel to keep the bar clear. */
@media (max-width: 400px) { .site-bar__nav > a { display: none; } }

/* ------------------------------------------------------- menu panel -- */
.site-bar__menu {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: none; border: 0; cursor: pointer;
  /* 15x11px of icon is nowhere near a 44px tap target; pad it out and pull
     the padding back off the layout with a negative margin. */
  padding: 1.05rem 0.9rem; margin: -1.05rem -0.9rem;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); font-weight: 500;
  letter-spacing: var(--sc-track-snug); color: var(--sc-ink-soft);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.site-bar__menu:hover, .site-bar__menu[aria-expanded="true"] { color: var(--sc-ink); }
.site-bar__menu:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
/* Two rules that become a cross when the panel is open. */
.site-bar__menu-icon { position: relative; width: 15px; height: 11px; flex: none; }
.site-bar__menu-icon::before,
.site-bar__menu-icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; border-radius: 1px;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), top var(--sc-d-fast) var(--sc-ease-out);
}
.site-bar__menu-icon::before { top: 1px; }
.site-bar__menu-icon::after  { top: 8px; }
.site-bar__menu[aria-expanded="true"] .site-bar__menu-icon::before { top: 4.5px; transform: rotate(45deg); }
.site-bar__menu[aria-expanded="true"] .site-bar__menu-icon::after  { top: 4.5px; transform: rotate(-45deg); }
/* "Services" on a wide bar, "Menu" once the panel is the only route in. */
.site-bar__menu-label::after { content: "Services"; }
@media (max-width: 560px) { .site-bar__menu-label::after { content: "Menu"; } }
/* Below 420px the logo, label, icon and CTA stop fitting. The icon alone
   carries it; the button keeps its aria-label either way. */
@media (max-width: 420px) { .site-bar__menu-label { display: none; } }
/* At 320px (iPhone SE) the logo, menu and CTA total more than the bar, so the
   auto margins collapse and the icon ends up touching the wordmark. Give back
   ~38px by easing the logo and the button, so real gaps survive. */
@media (max-width: 400px) {
  .site-bar__mark img { height: 32px; }
  .site-bar__cta { padding-inline: 0.85rem; font-size: var(--sc-t-xs); }
}
/* Under 640px the bar is logo | menu | CTA with the menu adrift between the
   two. Tightening its right margin groups it with the quote button, which
   is where it belongs — both are actions — and clears the wordmark. */
@media (max-width: 640px) {
  .site-bar__nav { margin-right: var(--sc-3); }
  .site-bar__cta { padding-inline: 1.05rem; }
}

.site-menu {
  position: fixed; inset: auto 0 auto 0; z-index: calc(var(--sc-z-chrome) - 1);
  top: 0; padding: calc(var(--sc-9) + var(--sc-6)) var(--sc-gutter) var(--sc-8);
  background: color-mix(in oklab, var(--sc-canvas) 97%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--sc-e2);
  max-height: 100dvh; overflow-y: auto;
  animation: lv-menu-in var(--sc-d-mid, 260ms) var(--sc-ease-out) both;
}
@keyframes lv-menu-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .site-menu { animation: none; } }
.site-menu__grid {
  display: grid; gap: var(--sc-7) var(--sc-8);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  max-width: var(--sc-measure-wide, 76rem); margin-inline: auto;
}
.site-menu__col p.lv-tag { margin-bottom: var(--sc-4); }
.site-menu__col ul { list-style: none; margin: 0; padding: 0; }
.site-menu__col li + li { margin-top: var(--sc-3); }
.site-menu__col a {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug); text-decoration: none;
  color: var(--sc-ink-soft);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.site-menu__col a:hover,
.site-menu__col a:focus-visible,
.site-menu__col a[aria-current="page"] { color: var(--sc-ink); }
.site-menu__col a[aria-current="page"] { border-bottom: 2px solid var(--sc-accent); }
.site-menu__col a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.site-menu__meta {
  margin-top: var(--sc-7); padding-top: var(--sc-5);
  border-top: 1px solid var(--sc-hairline);
  max-width: var(--sc-measure-wide, 76rem); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-7);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.site-menu__meta a { color: var(--sc-ink); text-decoration: none; }
.site-menu__meta a:hover { color: var(--sc-accent-ink); }
.is-menu-open { overflow: hidden; }

.site-bar__cta {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  padding: 0.7rem 1.3rem; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-snug);
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e1);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.site-bar__cta:hover { transform: translateY(-1px); box-shadow: var(--sc-e2); }
.site-bar__cta:active { transform: translateY(0) scale(0.97); }
.site-bar__cta:focus-visible { outline: 2px solid var(--sc-accent-ink); outline-offset: 3px; }

/* Phone number, always visible. Sits beside the quote button on wide bars;
   on phones there is no room for logo + menu + number + button in one row,
   so it becomes a full-width call strip across the top of the bar instead of
   being hidden behind an icon. */
.site-bar__phone {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-right: var(--sc-5);
  font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-snug);
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink); text-decoration: none; white-space: nowrap;
}
.site-bar__phone svg { width: 15px; height: 15px; flex: none; fill: currentColor; }
.site-bar__phone:hover span { text-decoration: underline; text-underline-offset: 3px; }
.site-bar__phone:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 860px) { .site-bar__phone { margin-right: var(--sc-4); } }
@media (max-width: 600px) {
  .site-bar { flex-wrap: wrap; padding-top: 0; row-gap: var(--sc-3); }
  .site-bar__phone {
    order: -1; flex: 0 0 calc(100% + 2 * var(--sc-gutter));
    margin: 0 calc(-1 * var(--sc-gutter));
    justify-content: center; padding: 0.5rem var(--sc-gutter);
    background: var(--sc-ink); color: var(--sc-canvas);
    font-size: var(--sc-t-sm);
  }
  .site-bar__phone span::before { content: "Call "; font-weight: 500; }
  /* The strip adds ~2.2rem to the bar; keep the menu panel's first row clear. */
  .site-menu { padding-top: calc(var(--sc-9) + var(--sc-6) + 2.2rem); }
}


/* ------------------------------------------------- hero copy spacing -- */
/* The engine stacks the hero lede flush against the headline — zero gap.
   At 120px display type over a photograph the lede collides with the
   descenders and stops reading as a separate line. Scoped to the page's own
   hero-copy classes rather than restyling .sc-copy itself. */
.lv-hero-copy .sc-display + .sc-lede,
.lv-sun-copy .sc-display + .sc-lede,
.lv-copy-on-dark .sc-display + .sc-lede {
  margin-top: clamp(0.75rem, 1.1vw, 1.75rem);
}

/* The breadcrumb sat at 4rem under an 83px fixed bar, so its top third was
   hidden behind the header. Position it in one place instead of an inline
   style repeated on every page. */
.lv-crumbs--hero {
  position: absolute;
  top: clamp(6.25rem, 6vw + 3.5rem, 8rem);
  left: var(--sc-gutter);
  z-index: var(--sc-z-copy);
}
/* Clear the phone call strip that tops the bar on narrow screens. */
@media (max-width: 600px) { .lv-crumbs--hero { top: 8.5rem; } }

/* ------------------------------------------------------------------ hero -- */
.lv-hero { position: absolute; inset: 0; }
.lv-hero__plane { position: absolute; inset: 0; overflow: clip; }
.lv-hero__back {
  background:
    radial-gradient(120% 90% at 18% 8%, color-mix(in oklab, var(--sc-accent) 22%, var(--sc-canvas)) 0%, transparent 55%),
    linear-gradient(180deg, #EFE6CE 0%, #F7F3EC 55%, #F7F3EC 100%);
}
.lv-hero__mid { z-index: 1; }
/* The "after" photo is a tall interior shot; centering it crops out most of
   the palm/coastline view above the desk. Anchor to the top so scrolling to
   the clean state shows more of the view, not more of the record player. */
/* Both hero layers must share one object-position: they are a matched pair,
   and any difference misaligns the two frames either side of the wipe. */
.lv-hero__mid .lv-wipe__after,
.lv-hero__mid .lv-wipe__before { object-position: 42% center; }
.lv-hero__front {
  z-index: 3; pointer-events: none;
  background:
    linear-gradient(100deg, color-mix(in oklab, var(--sc-ink) 88%, transparent) 0%, transparent 30%),
    linear-gradient(0deg, color-mix(in oklab, var(--sc-ink) 60%, transparent) 0%, transparent 22%);
  mix-blend-mode: normal;
  opacity: 0.9;
}
@media (max-width: 860px) {
  .lv-hero__front { background: linear-gradient(0deg, color-mix(in oklab, var(--sc-ink) 55%, transparent) 0%, transparent 26%); }
}

/* --------------------------------------------------- the signature move --
   Two real photographs stacked; the top layer clears as the reader scrolls.
   Driven entirely by --sc-p, which the engine publishes on the act element —
   no bespoke JS needed. */
.lv-wipe { position: absolute; inset: 0; }
.lv-wipe__after,
.lv-wipe__before,
.lv-wipe__haze { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv-wipe__after { z-index: 1; }
.lv-wipe__before {
  z-index: 2;
  clip-path: inset(0 0 0 calc(var(--lv-wipe-p) * 100%));
  filter: saturate(0.55) brightness(0.82) contrast(0.94) sepia(0.12);
}
/* How fast the wipe travels relative to the act's own progress. 1 = the
   wipe finishes exactly as the act ends; higher finishes earlier. A `flow`
   act's progress only reaches 1 as the section leaves the viewport, so a
   plain 1x wipe there reads as sluggish and never quite lands on screen. */
.lv-wipe { --lv-wipe-rate: 1; --lv-wipe-p: min(1, var(--sc-p, 0) * var(--lv-wipe-rate)); }
.lv-wipe--quick { --lv-wipe-rate: 1.4; }
.lv-wipe--iris .lv-wipe__haze {
  z-index: 2; object-fit: cover; background: var(--sc-haze, #F3ECD8);
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(circle at var(--lv-iris-x, 50%) var(--lv-iris-y, 46%),
    transparent calc(var(--sc-p, 0) * 68vmax),
    black calc(var(--sc-p, 0) * 68vmax + 70px));
  mask-image: radial-gradient(circle at var(--lv-iris-x, 50%) var(--lv-iris-y, 46%),
    transparent calc(var(--sc-p, 0) * 68vmax),
    black calc(var(--sc-p, 0) * 68vmax + 70px));
  opacity: 0.7;
}
/* A visible divider at the clip boundary — without it the wipe reads as a
   vague crossfade instead of a clear before/after. Sweep variant only. */
.lv-wipe__seam {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  left: calc(var(--lv-wipe-p) * 100%);
  width: 3px;
  background: color-mix(in oklab, var(--sc-accent) 30%, #fff);
  box-shadow: 0 0 0 1px color-mix(in oklab, #000 25%, transparent),
              0 0 18px 2px color-mix(in oklab, var(--sc-accent) 45%, transparent),
              0 0 24px 2px color-mix(in oklab, #000 22%, transparent);
}
.lv-wipe__seam::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  width: 34px; height: 34px; border-radius: 999px;
  background: #fff;
  box-shadow: var(--sc-e2);
}
.lv-wipe__seam::after {
  content: "\2194"; /* left-right arrow, reads as "drag" even though it's scroll-driven */
  position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  font-size: 15px; color: var(--sc-ink);
  font-family: var(--sc-font-text);
}
@media (max-width: 860px) {
  .lv-wipe__seam::before, .lv-wipe__seam::after { display: none; }
}

/* -------------------------------------------------------- location tag --- */
.lv-tag {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.lv-tag--on-photo { color: color-mix(in oklab, var(--sc-ink) 82%, transparent); }
/* On service pages the eyebrow line carries the page's keyword, so it is the
   H1 for search engines while the big display line stays the visual headline.
   Keep it looking exactly like the paragraph eyebrow it replaced. */
h1.lv-tag { font-weight: inherit; margin-block: 1em; line-height: inherit; }
.sc-stack > h1.lv-tag:first-child { margin-top: 0; }
.sc-stack > h1.lv-tag + .sc-display { margin-top: var(--sc-7); }

/* ----------------------------------------------------------- hero copy --- */
.lv-hero-copy h1, .lv-hero-copy .sc-display { color: var(--sc-ink); }
.lv-hero-copy .sc-lede { color: color-mix(in oklab, var(--sc-ink) 78%, transparent); }

/* --------------------------------------------------------- trust strip --- */
.lv-trust {
  display: grid; gap: var(--sc-6);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.lv-trust__item { padding-top: var(--sc-4); border-top: 2px solid var(--sc-accent); }
.lv-trust__item h3 {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500;
  margin: 0 0 var(--sc-2);
}
.lv-trust__item p { margin: 0; color: var(--sc-ink-soft); }

/* -------------------------------------------------------------- services -- */
.lv-services { display: flex; flex-direction: column; }
.lv-service {
  display: grid; grid-template-columns: minmax(0, 8rem) 1fr; gap: var(--sc-6);
  padding-block: var(--sc-7);
  border-top: 1px solid var(--sc-hairline);
  align-items: baseline;
}
.lv-service:last-child { border-bottom: 1px solid var(--sc-hairline); }
.lv-service__num {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm);
  color: var(--sc-accent-ink);
}
/* Teal measures 2.15:1 on this cream canvas — fine as a fill or a rule,
   never as text. The numerals deepen to accent-ink (14.8:1) instead, and
   the accent itself goes on the underline below. */
.lv-service h3 {
  font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-2xl);
  letter-spacing: var(--sc-track-snug); margin: 0 0 var(--sc-3);
}
.lv-service p { max-width: 52ch; }
.lv-learn-more {
  display: inline-block; margin-top: var(--sc-3);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-accent-ink); background: none;
  border-bottom: 2px solid color-mix(in oklab, var(--sc-accent) 75%, transparent);
  padding-bottom: 2px;
  text-decoration: none;
}
.lv-learn-more:hover { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
@media (max-width: 640px) {
  .lv-service { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- split feature --- */
.lv-split {
  display: grid; gap: var(--sc-9);
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  align-items: center;
}
.lv-split__figure {
  position: relative; border-radius: var(--sc-r-lg); overflow: clip;
  aspect-ratio: 3/4; box-shadow: var(--sc-e2);
}
/* A bare <img> in this figure must be taken out of flow and sized, or it
   keeps its height="" attribute as a literal pixel height while max-width
   squeezes the width — a 160x1800 sliver. Cover both cases: wrapped in a
   wipe, and standing alone. */
.lv-split__figure > img,
.lv-split__figure .lv-wipe img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Photo-beside-text figures read better landscape than portrait. */
.lv-split__figure--wide { aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .lv-split { grid-template-columns: 1fr; gap: var(--sc-6); }
  .lv-split__figure { order: -1; }
}

/* --------------------------------------------------------------- rail ---- */
.rail { display: flex; align-items: stretch; gap: var(--sc-6); padding-inline: var(--sc-gutter); height: 100%; }
.rail__lead {
  flex: 0 0 clamp(16rem, 30vw, 24rem);
  display: flex; flex-direction: column; justify-content: center;
}
.lv-card {
  flex: 0 0 clamp(16rem, 30vw, 22rem);
  position: relative; border-radius: var(--sc-r-lg); overflow: clip;
  box-shadow: var(--sc-e2);
  display: flex; align-items: flex-end;
}
.lv-card__media { position: absolute; inset: 0; }
.lv-card__media img,
.lv-card__media .lv-wipe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv-card__scrim {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(0deg, color-mix(in oklab, #000 62%, transparent) 0%, transparent 46%);
}
.lv-card__label {
  position: relative; z-index: 5; padding: var(--sc-5);
  color: #fff; font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug);
}
.lv-card--wide { flex-basis: clamp(20rem, 38vw, 30rem); }

/* On a phone the rail's `align-items: stretch` plus a 16rem flex-basis floor
   turns each card into a 256x812 sliver — a portrait photo cropped to a
   vertical strip. Give cards their own aspect ratio and centre them instead,
   so the picture is still a picture. */
@media (max-width: 700px) {
  .rail { align-items: center; gap: var(--sc-5); }
  .rail__lead { flex-basis: 78vw; }
  .lv-card { flex-basis: 72vw; aspect-ratio: 3 / 4; }
  .lv-card--wide { flex-basis: 84vw; aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------- peak --- */
.lv-sun-copy { color: #333333; }
.lv-sun-copy .sc-body,
.lv-sun-copy .sc-lede { color: color-mix(in oklab, #333333 88%, transparent); }
.lv-sun-copy .lv-tag { color: color-mix(in oklab, #333333 78%, transparent); }
.lv-sun-copy h1, .lv-sun-copy h2, .lv-sun-copy .sc-display { color: #333333; }

/* --------------------------------------------------------------- close --- */
.lv-close-figure { position: relative; border-radius: var(--sc-r-lg); overflow: clip; aspect-ratio: 16/10; }
.lv-close-figure img { width: 100%; height: 100%; object-fit: cover; }
.lv-close-figure figcaption {
  position: absolute; left: var(--sc-5); bottom: var(--sc-5); z-index: 2;
  color: #fff; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
}
.lv-close-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, color-mix(in oklab, #000 55%, transparent) 0%, transparent 40%);
}

.lv-close-cta {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  padding: 1.05rem 2.1rem; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-base);
  text-decoration: none; box-shadow: var(--sc-e2);
  transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.lv-close-cta:hover { transform: translateY(-2px); }
.lv-close-cta:active { transform: scale(0.97); }
.lv-close-cta:focus-visible { outline: 2px solid var(--sc-accent-ink); outline-offset: 3px; }

/* --------------------------------------------------------------- areas --- */
/* Footer service areas, split by service. Both city sets need to be reachable
   from every page — otherwise the holiday cluster is an island only its own
   pages link into. */
.lv-foot-areas {
  display: grid; gap: var(--sc-6) var(--sc-8);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.lv-foot-areas .lv-tag { margin-bottom: var(--sc-3); }

.lv-areas { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); }
.lv-areas a {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl);
  letter-spacing: var(--sc-track-snug); text-decoration: none;
  color: var(--sc-ink-soft);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.lv-areas a:hover, .lv-areas a:focus-visible { color: var(--sc-ink); }

/* ---------------------------------------------------------------- form --- */
.lv-form { display: grid; gap: var(--sc-5); grid-template-columns: 1fr 1fr; }
.lv-form__full { grid-column: 1 / -1; }
.lv-field { display: flex; flex-direction: column; gap: var(--sc-2); }
.lv-field label {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}
.lv-field input, .lv-field select, .lv-field textarea {
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md);
  background: var(--sc-surface); color: var(--sc-ink);
  padding: 0.85rem 1rem; font-size: var(--sc-t-base);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.lv-field input:focus, .lv-field select:focus, .lv-field textarea:focus {
  outline: none; border-color: var(--sc-accent);
}
.lv-field textarea { resize: vertical; min-height: 6rem; }

.lv-checks { border: 0; padding: 0; margin: 0; }
.lv-checks legend {
  padding: 0; margin-bottom: var(--sc-2);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}
.lv-checks legend span { text-transform: none; letter-spacing: var(--sc-track-normal); }
.lv-checks {
  display: grid; gap: var(--sc-3);
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
}
.lv-checks label {
  display: flex; align-items: center; gap: var(--sc-3);
  padding: 0.7rem 1rem; border-radius: var(--sc-r-md);
  border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface);
  font-size: var(--sc-t-sm); cursor: pointer;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.lv-checks label:has(input:checked) { border-color: var(--sc-accent); }
.lv-checks input[type="checkbox"] {
  width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--sc-accent); flex: none;
}
.lv-submit {
  justify-self: start; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sc-3);
  padding: 1rem 2.2rem; border-radius: var(--sc-r-pill);
  background: var(--sc-ink); color: var(--sc-canvas);
  font-weight: 600; font-size: var(--sc-t-base);
  transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.lv-submit:hover { transform: translateY(-2px); }
.lv-submit:active { transform: scale(0.97); }
.lv-submit:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (max-width: 640px) { .lv-form { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- service page -- */
.lv-crumbs {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sc-2);
}
.lv-crumbs:hover { color: var(--sc-ink); }
.lv-crumbs--on-photo {
  color: #fff; padding: 0.5rem 0.9rem; border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, #000 32%, transparent);
  backdrop-filter: blur(6px);
}
.lv-crumbs--on-photo:hover { color: #fff; background: color-mix(in oklab, #000 46%, transparent); }

.lv-svc-hero {
  margin-top: var(--sc-6);
  display: grid; gap: var(--sc-8);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
}
.lv-svc-hero__figure {
  position: relative; border-radius: var(--sc-r-lg); overflow: clip;
  aspect-ratio: 4/5; box-shadow: var(--sc-e2);
}
.lv-svc-hero__figure img,
.lv-svc-hero__figure .lv-wipe img { width: 100%; height: 100%; object-fit: cover; }
.lv-svc-hero__figure--type {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--sc-ink); color: var(--sc-canvas); padding: var(--sc-8);
}
.lv-svc-hero__figure--type span {
  font-family: var(--sc-font-display); font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1; letter-spacing: var(--sc-track-tight);
}
@media (max-width: 860px) {
  .lv-svc-hero { grid-template-columns: 1fr; }
  .lv-svc-hero__figure { order: -1; aspect-ratio: 4/3; }
}

.lv-included {
  display: grid; gap: var(--sc-4);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  padding: 0; margin: 0; list-style: none;
}
.lv-included li {
  padding-top: var(--sc-3); border-top: 1px solid var(--sc-hairline-strong);
  color: var(--sc-ink);
}

.lv-gallery { display: grid; gap: var(--sc-5); grid-template-columns: repeat(3, 1fr); }
.lv-gallery img {
  width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e1);
}
@media (max-width: 640px) { .lv-gallery { grid-template-columns: 1fr 1fr; } }

.lv-related {
  display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6);
}
.lv-related a {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  text-decoration: none; color: var(--sc-ink-soft);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.lv-related a:hover, .lv-related a:focus-visible { color: var(--sc-ink); }

/* --------------------------------------------------------------- footer -- */
.lv-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-6);
  padding-block: var(--sc-7);
  border-top: 1px solid var(--sc-hairline);
}
.lv-foot__mark { display: flex; align-items: center; gap: var(--sc-3); }
.lv-foot__mark img { height: 28px; width: auto; }
.lv-foot small { color: var(--sc-ink-soft); }

/* ---------------------------------------------------- reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .lv-wipe__before { clip-path: inset(0 0 0 50%); }
  .lv-wipe--iris .lv-wipe__haze { opacity: 0.35; }
}

/* ==========================================================================
   SERVICE PAGES
   Shared components for the five Learn More pages. Typographic and
   hairline-led rather than card-grid-led, so a long list of add-ons still
   reads as one collection instead of a wall of boxes.
   ========================================================================== */

/* --------------------------------------------------- full-bleed page hero -- */
.lv-phero { position: absolute; inset: 0; }
.lv-phero__media { position: absolute; inset: 0; }
.lv-phero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------- what's included -- */
.lv-offers { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.lv-offer {
  padding: var(--sc-5) var(--sc-5) var(--sc-6) 0;
  border-top: 1px solid var(--sc-hairline-strong);
  display: flex; flex-direction: column; gap: var(--sc-2);
}
.lv-offer h3 {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); margin: 0;
}
.lv-offer p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 34ch; }
.lv-offer__tag {
  align-self: flex-start; margin-top: var(--sc-1);
  font-family: var(--sc-font-mono); font-size: 0.68rem;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-accent-ink);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 55%, transparent);
  border-radius: var(--sc-r-pill); padding: 0.2rem 0.6rem;
}

/* -------------------------------------------------------------- process -- */
.lv-process { display: grid; gap: var(--sc-7); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.lv-step { border-top: 2px solid var(--sc-ink); padding-top: var(--sc-4); }
.lv-step__num {
  display: block; font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: var(--sc-track-tight);
  color: color-mix(in oklab, var(--sc-ink) 30%, transparent); margin-bottom: var(--sc-3);
}
.lv-step h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); margin: 0 0 var(--sc-2); }
.lv-step p { margin: 0; color: var(--sc-ink-soft); max-width: 32ch; }

/* ------------------------------------------------------------ callout ---- */
.lv-note {
  border-left: 2px solid var(--sc-accent);
  padding: var(--sc-2) 0 var(--sc-2) var(--sc-5);
  max-width: 44rem;
}
.lv-note p:first-child {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl);
  line-height: 1.15; letter-spacing: var(--sc-track-snug); margin: 0 0 var(--sc-3);
}
.lv-note p { margin: 0; color: var(--sc-ink-soft); }

/* ------------------------------------------- draggable before/after ------ */
.lv-compare {
  position: relative; border-radius: var(--sc-r-lg); overflow: clip;
  aspect-ratio: 3/2; box-shadow: var(--sc-e2); --lv-c: 50;
  touch-action: pan-y;
}
.lv-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv-compare__after { z-index: 1; }
.lv-compare__before { z-index: 2; clip-path: inset(0 0 0 calc(var(--lv-c) * 1%)); }
.lv-compare__handle {
  position: absolute; top: 0; bottom: 0; z-index: 3; width: 3px;
  left: calc(var(--lv-c) * 1%);
  background: color-mix(in oklab, var(--sc-accent) 30%, #fff);
  box-shadow: 0 0 0 1px color-mix(in oklab, #000 25%, transparent),
              0 0 18px 2px color-mix(in oklab, var(--sc-accent) 45%, transparent),
              0 0 24px 2px color-mix(in oklab, #000 22%, transparent);
  pointer-events: none;
}
.lv-compare__handle::before {
  content: "\2194"; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 40px; height: 40px; border-radius: 999px;
  background: #fff; color: var(--sc-ink);
  display: grid; place-items: center; font-size: 16px;
  font-family: var(--sc-font-text); box-shadow: var(--sc-e2);
}
/* A real range input carries the interaction: pointer drag, touch, and
   arrow keys all work, and it is announced to screen readers. */
.lv-compare__range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: ew-resize; appearance: none; background: none;
}
.lv-compare__range:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; opacity: 0.001; }
.lv-compare__label {
  position: absolute; z-index: 3; bottom: var(--sc-4);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: #fff;
  background: color-mix(in oklab, #000 38%, transparent);
  padding: 0.35rem 0.7rem; border-radius: var(--sc-r-pill); pointer-events: none;
}
.lv-compare__label--before { right: var(--sc-4); }
.lv-compare__label--after  { left: var(--sc-4); }

/* ------------------------------------------------------------------ faq -- */
.lv-faq { max-width: 48rem; }
.lv-faq details { border-top: 1px solid var(--sc-hairline-strong); padding: var(--sc-4) 0; }
.lv-faq details:last-of-type { border-bottom: 1px solid var(--sc-hairline-strong); }
.lv-faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-4);
}
.lv-faq summary::-webkit-details-marker { display: none; }
.lv-faq summary::after { content: "+"; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); }
.lv-faq details[open] summary::after { content: "\2013"; }
.lv-faq details p { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); max-width: 60ch; }

/* --------------------------------------------------------- closing cta --- */
.lv-cta-band { text-align: left; }
.lv-cta-band h2 { max-width: 20ch; }
.lv-cta-band p { margin-top: var(--sc-4); }

/* ------------------------------------------- holiday pages: light skin --- */
/* The holiday pages used to run on a near-black canvas. Most of their traffic
   is phones arriving from mailers and yard signs, and light grey text on
   black read poorly, so they now sit on white with near-black type. The
   night photography still carries the season; the page itself stays easy to
   read. Red is the action colour (buttons only), gold is for stars. */
.lv-eve {
  --sc-canvas: #FFFFFF;
  --sc-surface: #FFFFFF;
  --sc-ink: #15191D;
  --sc-ink-soft: #4A525A;
  --sc-accent: #B42318;
  --sc-accent-ink: #FFFFFF;
  --lv-band: #F7F3EC;
  --lv-gold: #D99A1E;
  color: var(--sc-ink);
  background: var(--sc-canvas);
}
.lv-eve .lv-step__num { color: var(--sc-accent); }
.lv-eve .lv-offer__tag { color: var(--sc-accent); }
.lv-eve .site-bar { background: color-mix(in oklab, #FFFFFF 94%, transparent); }
.lv-eve .sc-grain { display: none; }
.lv-eve .lv-rating__stars svg { fill: var(--lv-gold); }
.lv-eve .site-menu__meta a:hover { color: var(--sc-accent); }
.lv-eve .site-bar__cta:focus-visible,
.lv-eve .lv-close-cta:focus-visible { outline-color: var(--sc-ink); }
.lv-eve .lv-trust__item { border-top-color: var(--sc-ink); }
.lv-eve .lv-note { border-left-color: var(--sc-accent); }
.lv-eve .lv-field input,
.lv-eve .lv-field textarea { border-color: color-mix(in oklab, var(--sc-ink) 30%, transparent); }
.lv-eve .lv-field input:focus,
.lv-eve .lv-field textarea:focus { border-color: var(--sc-ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-ink) 12%, transparent); }
.lv-eve .lv-form__status[data-kind="ok"] { background: #EEF7EF; border-color: #2E7D32; color: var(--sc-ink); }

/* ------------------------------------------------ holiday landing page --- */
/* Normal-scrolling hero (no pin): a visitor from a QR code should see the
   offer, the phone number and the quote button without scrolling through a
   pinned photo first. */
.lv-hhero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: min(92svh, 820px);
  display: flex; align-items: flex-end;
  padding: calc(var(--sc-9) + var(--sc-6)) 0 clamp(2.5rem, 8vh, 5rem);
  color: #fff;
}
.lv-hhero__media { position: absolute; inset: 0; z-index: -2; }
.lv-hhero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.lv-hhero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgb(8 10 14 / 0.86) 0%, rgb(8 10 14 / 0.55) 42%, rgb(8 10 14 / 0.08) 75%),
    linear-gradient(90deg, rgb(8 10 14 / 0.45) 0%, transparent 60%);
}
/* Pointer-following glow (data-sc-spotlight). The engine's default tints
   with the accent, which is button red here; on a night photo the light
   should read as warm string-light gold. It sits above the scrim but under
   the copy so the type stays crisp. Mouse only: the engine never fires it
   on touch, and it is off under reduced motion. */
.lv-hhero[data-sc-spotlight]::after {
  z-index: -1;
  background: radial-gradient(
    30rem 30rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    rgb(255 200 115 / 0.5), rgb(255 170 80 / 0.18) 38%, transparent 70%);
  mix-blend-mode: screen;
}
.lv-hhero .sc-wrap { width: 100%; }
.lv-hhero__copy { max-width: 44rem; }
.lv-hhero .lv-tag { color: rgb(255 255 255 / 0.82); }
.lv-hhero h1 {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-3xl); line-height: 1.02; letter-spacing: var(--sc-track-tight);
  margin: var(--sc-3) 0 0; color: #fff; text-wrap: balance;
}
.lv-hhero p.lv-hhero__lede {
  margin: var(--sc-4) 0 0; max-width: 36rem;
  font-size: var(--sc-t-lg); line-height: 1.45; color: rgb(255 255 255 / 0.92);
}
.lv-actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }
.lv-btn-ghost {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  padding: 1rem 1.8rem; border-radius: var(--sc-r-pill);
  border: 1.5px solid currentColor; color: inherit;
  font-weight: 600; font-size: var(--sc-t-base); text-decoration: none; white-space: nowrap;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.lv-btn-ghost svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.lv-btn-ghost:hover { background: rgb(255 255 255 / 0.12); transform: translateY(-2px); }
.lv-btn-ghost:active { transform: scale(0.97); }
.lv-btn-ghost:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.lv-quote .lv-btn-ghost:hover,
.lv-final .lv-btn-ghost:hover { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }

.lv-chips {
  list-style: none; margin: var(--sc-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5);
  font-size: var(--sc-t-sm); color: rgb(255 255 255 / 0.9);
}
.lv-chips li { display: inline-flex; align-items: center; gap: 0.45rem; }
.lv-chips li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lv-gold, #D99A1E); flex: none;
}
.lv-chips .lv-chips__stars::before { display: none; }
.lv-chips__stars b { color: var(--lv-gold, #D99A1E); letter-spacing: 1px; font-weight: 400; }

@media (max-width: 700px) {
  .lv-hhero { min-height: 0; padding-top: calc(var(--sc-9) + var(--sc-9)); }
  .lv-hhero h1 { font-size: var(--sc-t-2xl); }
  .lv-hhero p.lv-hhero__lede { font-size: var(--sc-t-base); }
  .lv-actions > * { flex: 1 1 100%; justify-content: center; }
}

/* Quote block: offer + next steps on the left, the form on the right. */
.lv-quote { background: var(--lv-band); scroll-margin-top: 4.5rem; }
.lv-quote__grid {
  display: grid; gap: var(--sc-8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start;
}
@media (max-width: 900px) {
  .lv-quote__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  /* On one column the form comes straight after the heading; the steps and
     call option follow it rather than pushing it a screen further down. */
  .lv-quote__info { display: contents; }
  .lv-quote__head { order: 1; }
  .lv-quote-card { order: 2; }
  .lv-quote__more { order: 3; }
  .lv-quote__more .lv-next { margin-top: 0; }
}
@media (max-width: 600px) { .lv-quote { scroll-margin-top: 6.5rem; } }
.lv-quote h2 {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-2xl); line-height: 1.05; letter-spacing: var(--sc-track-tight);
  margin: var(--sc-3) 0 0; text-wrap: balance;
}
.lv-quote__intro { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); max-width: 34rem; }
.lv-next { list-style: none; margin: var(--sc-6) 0 0; padding: 0; counter-reset: next; display: grid; gap: var(--sc-4); }
.lv-next li { counter-increment: next; display: grid; grid-template-columns: 2rem 1fr; gap: var(--sc-3); align-items: start; }
.lv-next li::before {
  content: counter(next); display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--sc-ink); color: #fff; font-weight: 600; font-size: var(--sc-t-sm);
}
.lv-next b { display: block; font-weight: 600; }
.lv-next span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.lv-quote__call {
  margin-top: var(--sc-7); padding-top: var(--sc-5);
  border-top: 1px solid var(--sc-hairline-strong);
}
.lv-quote__call p { margin: 0 0 var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.lv-quote__call .lv-btn-ghost { color: var(--sc-ink); }
.lv-urgent {
  margin: var(--sc-6) 0 0; padding: var(--sc-4) var(--sc-5);
  border-radius: var(--sc-r-md); background: #fff;
  border-left: 3px solid var(--sc-accent);
  font-size: var(--sc-t-sm); color: var(--sc-ink);
}

.lv-quote-card {
  background: #fff; border-radius: var(--sc-r-lg);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 1px 2px rgb(20 20 20 / 0.06), 0 12px 32px -12px rgb(20 20 20 / 0.18);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 8%, transparent);
}
.lv-quote-card__head { margin: 0 0 var(--sc-5); font-weight: 600; font-size: var(--sc-t-lg); }
.lv-quote-card .lv-form { gap: var(--sc-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lv-quote-card .lv-field input,
.lv-quote-card .lv-field textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.lv-quote-card .lv-field label {
  text-transform: none; letter-spacing: 0; font-size: var(--sc-t-sm);
  font-weight: 600; color: var(--sc-ink);
}
.lv-quote-card .lv-field label small { font-weight: 400; color: var(--sc-ink-soft); }
.lv-quote-card .lv-field input { font-size: 16px; }
.lv-quote-card .lv-field textarea { font-size: 16px; min-height: 4.5rem; }
.lv-quote-card .lv-submit {
  justify-self: stretch; justify-content: center;
  background: var(--sc-accent); color: #fff;
  padding: 1.1rem 2rem; font-size: var(--sc-t-lg);
}
.lv-quote-card .lv-submit:focus-visible { outline-color: var(--sc-ink); }
.lv-quote-card .lv-submit:disabled { opacity: 0.7; cursor: progress; }
.lv-form__fine { margin: 0; text-align: center; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (max-width: 640px) {
  .lv-quote-card .lv-form > .lv-field:not(.lv-field--half) { grid-column: 1 / -1; }
}

/* Photo strip of display styles. */
.lv-looks { display: grid; gap: var(--sc-4); grid-template-columns: repeat(3, 1fr); }
.lv-looks figure { margin: 0; }
.lv-looks img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--sc-r-md); display: block; }
.lv-looks figcaption { margin-top: var(--sc-2); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.lv-looks figcaption b { color: var(--sc-ink); font-weight: 600; }
@media (max-width: 760px) {
  .lv-looks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sc-2); }
  .lv-looks figure { scroll-snap-align: start; }
}

.lv-band { background: var(--lv-band); }
.lv-eve .lv-process { grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr)); }
.lv-h2 {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-2xl); line-height: 1.05; letter-spacing: var(--sc-track-tight);
  margin: 0; text-wrap: balance;
}
.lv-final { text-align: center; }
.lv-final .lv-h2 { max-width: 22ch; margin-inline: auto; }
.lv-final p { color: var(--sc-ink-soft); max-width: 36rem; margin: var(--sc-4) auto 0; }
.lv-final .lv-actions { justify-content: center; }
.lv-final .lv-btn-ghost { color: var(--sc-ink); }
.lv-final .lv-rating { margin-top: var(--sc-6); }

/* Sticky call / quote bar on phones. Hidden while the form is on screen so
   it never covers the submit button. */
.lv-mbar { display: none; }
@media (max-width: 700px) {
  .lv-mbar {
    position: fixed; inset: auto 0 0 0; z-index: var(--sc-z-chrome);
    display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--sc-2);
    padding: 0.6rem var(--sc-gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: color-mix(in oklab, #fff 96%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--sc-hairline-strong);
    transition: transform 220ms var(--sc-ease-out), opacity 220ms var(--sc-ease-out);
  }
  .lv-mbar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .lv-mbar a {
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    min-height: 48px; border-radius: var(--sc-r-pill);
    font-weight: 600; font-size: var(--sc-t-base); text-decoration: none;
  }
  .lv-mbar svg { width: 16px; height: 16px; fill: currentColor; }
  .lv-mbar__call { border: 1.5px solid var(--sc-ink); color: var(--sc-ink); }
  .lv-mbar__quote { background: var(--sc-accent); color: #fff; }
  body:has(.lv-mbar) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .lv-mbar { transition: none; } }

/* Hero type on phones. --sc-t-4xl floors at 3.4rem, which is a *desktop*
   floor: on a narrow screen a long hero headline either wraps to five or six
   lines or pushes a long word past the edge. Step it down a rung, as
   taste.md prescribes, rather than letting the headline overflow. */
@media (max-width: 700px) {
  .sc-copy .sc-display--xl { font-size: var(--sc-t-2xl); }
  .sc-copy .sc-lede { font-size: var(--sc-t-base); }
}

/* ------------------------------------------------------------- contact --- */
.lv-contact {
  display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-7);
  padding-bottom: var(--sc-7);
  border-bottom: 1px solid var(--sc-hairline);
  margin-bottom: var(--sc-6);
}
.lv-contact a {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug);
  text-decoration: none; color: var(--sc-ink);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.lv-contact a:hover, .lv-contact a:focus-visible { color: var(--sc-accent-ink); }
/* Hours are not a link, but sit in the same row as the phone and email and
   must read as the same class of information. */
.lv-contact__hours {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
}
.lv-contact span {
  display: block;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); margin-bottom: var(--sc-2);
}
.lv-eve .lv-contact a { color: var(--sc-ink); }
.lv-eve .lv-contact a:hover { color: var(--sc-accent); }

/* -------------------------------------------------------------- rating --- */
.lv-rating {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  padding: 0.55rem 1rem;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, var(--sc-surface) 60%, transparent);
}
.lv-rating__stars { display: inline-flex; gap: 2px; }
.lv-rating__stars svg { width: 15px; height: 15px; fill: var(--sc-accent); display: block; }
.lv-rating__text {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); white-space: nowrap;
}
.lv-rating__text b { color: var(--sc-ink); font-weight: 600; }
.lv-eve .lv-rating { border-color: color-mix(in oklab, var(--sc-ink) 26%, transparent); }
@media (max-width: 480px) {
  .lv-rating { padding: 0.5rem 0.8rem; gap: var(--sc-2); }
  .lv-rating__text { white-space: normal; }
}

/* Rating badge as a link through to the Google profile */
a.lv-rating { text-decoration: none; transition: border-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out); }
a.lv-rating:hover { border-color: var(--sc-accent); transform: translateY(-1px); }
a.lv-rating:active { transform: translateY(0) scale(0.99); }

/* --------------------------------------------------------------- social -- */
.lv-social { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); margin-bottom: var(--sc-6); }
.lv-social a {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.lv-social a:hover, .lv-social a:focus-visible { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.lv-eve .lv-social a:hover { color: var(--sc-ink); }

/* ------------------------------------------- copy over a dark/busy photo --
   The gutter hero is a mid-dark, high-detail photograph. Dark type on it
   fails contrast no matter how the scrim is tuned, so that hero flips to
   light type over a genuinely dark scrim instead. */
.lv-copy-on-dark { color: #fff; }
.lv-copy-on-dark h1,
.lv-copy-on-dark h2,
.lv-copy-on-dark .sc-display { color: #fff; }
.lv-copy-on-dark .sc-body,
.lv-copy-on-dark .sc-lede { color: color-mix(in oklab, #fff 90%, transparent); }
.lv-copy-on-dark .lv-tag { color: color-mix(in oklab, #fff 76%, transparent); }

.sc-scrim--deep {
  background: linear-gradient(to top,
    color-mix(in oklab, #06100F 90%, transparent) 0%,
    color-mix(in oklab, #06100F 70%, transparent) 24%,
    color-mix(in oklab, #06100F 30%, transparent) 50%,
    transparent 76%);
}

/* ---------------------------------------------------------- form status -- */
.lv-form__status {
  margin: 0; padding: var(--sc-4) var(--sc-5);
  border-radius: var(--sc-r-md);
  border: 1px solid var(--sc-hairline-strong);
  background: var(--sc-surface);
  color: var(--sc-ink); max-width: 44rem;
}
.lv-form__status[data-kind="ok"] {
  border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 12%, var(--sc-surface));
}
.lv-form__status[data-kind="error"] { border-color: #B4472F; }

/* A class that sets `display` outruns the browser's default
   [hidden] { display: none }, so toggling el.hidden silently does nothing on
   .lv-field / .lv-submit. Make the attribute authoritative. */
[hidden] { display: none !important; }

/* A heading that exists for the document outline and screen readers but not
   for sighted layout — used where the design intentionally shows no title
   but the H-level sequence would otherwise skip. */
.sc-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ----------------------------------------------- city page: hardness -- */
.lv-stats {
  display: grid; gap: var(--sc-5);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  max-width: 44rem; margin-top: var(--sc-7);
}
.lv-stat { padding-top: var(--sc-4); border-top: 2px solid var(--sc-accent); }
.lv-stat--muted { border-top-color: var(--sc-hairline-strong); }
.lv-stat__num {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-3xl); line-height: 1;
  letter-spacing: var(--sc-track-snug); margin: 0 0 var(--sc-2);
}
.lv-stat__label { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.lv-source { margin-top: var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.lv-source a { color: inherit; }

/* --------------------------------------------------- city page: price -- */
.lv-price {
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
  padding: var(--sc-6);
  max-width: 44rem;
}
.lv-price__range {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-3xl); line-height: 1;
  letter-spacing: var(--sc-track-snug);
  margin: var(--sc-2) 0 var(--sc-4);
}
.lv-price__note { margin: 0; color: var(--sc-ink-soft); max-width: 54ch; }
.lv-price__note + .lv-price__note { margin-top: var(--sc-3); }

/* ------------------------------------------------ homepage: story line --
   One quiet line above the quote form pointing at the about page. Kept
   below the section headings in size on purpose — it is a doorway, not a
   pitch, and it must not compete with the form it sits above. */
.lv-story {
  max-width: 44rem;
  padding-top: var(--sc-6);
  border-top: 1px solid var(--sc-hairline);
}
.lv-story p {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xl); line-height: 1.28;
  letter-spacing: var(--sc-track-snug);
  margin: 0; text-wrap: balance;
}

/* Sunlit water is bright all the way to the top of the frame, so the
   bottom-weighted --deep scrim leaves white type at about 1.4:1 up where the
   headline sits. This one never reaches full transparency: it keeps a 36%
   dim over the whole frame, which measures 3.7:1 at worst across the clip
   while the blue still reads as blue. */
.sc-scrim--water {
  background: linear-gradient(to top,
    color-mix(in oklab, #06100F 92%, transparent) 0%,
    color-mix(in oklab, #06100F 80%, transparent) 24%,
    color-mix(in oklab, #06100F 60%, transparent) 50%,
    color-mix(in oklab, #06100F 42%, transparent) 78%,
    color-mix(in oklab, #06100F 36%, transparent) 100%);
}

/* Anchor a hero photo near its top edge. The about hero is a near-square
   frame whose middle band is dark treeline — centred, that band lands
   straight behind the headline and dark type on it measures under 3:1.
   Pulling the crop up puts sky and haze there instead.

   Each hero sets its own --lv-sky, because where the bright band falls
   differs per photo — measured per page, not guessed. */
.lv-wipe--sky .lv-wipe__after { object-position: center var(--lv-sky, 10%); }

/* ------------------------------------------------- about: home water -- */
.lv-spots {
  display: grid; gap: var(--sc-7);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  max-width: 52rem;
}
.lv-spot ul { list-style: none; margin: var(--sc-3) 0 0; padding: 0; }
.lv-spot li {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  padding-block: var(--sc-2);
  border-bottom: 1px solid var(--sc-hairline);
}
.lv-spot li:last-child { border-bottom: 0; }

/* ---------------------------------------------- about: background video --
   Decorative footage behind copy. The <video> is sized like a cover image;
   the file itself is only fetched once the section is close (see video.js),
   so the poster carries the page weight until then. */
.lv-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  background: #06100F;
}
@media (prefers-reduced-motion: reduce) { .lv-video { display: none; } }
.lv-video-still {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}