/* ══════════════════════════════════════════════════════════════════
   H2WOAH — HOMEPAGE DESIGN LAYER
   ══════════════════════════════════════════════════════════════════

   Loaded last, and only on the homepage. Everything lives in the
   `h2w-` namespace so the older homepage rules in the page's inline
   <style> blocks, site-style-system.css and mobile-fixes.css simply
   stop matching instead of having to be out-specified one by one.

   Direction: coastal sign-painter. Harbor navy as the dominant
   ground, sea-mist for the light bands, the H2WOAH cyan as the fill
   colour of the display type rather than as scattered decoration,
   and a desaturated verdigris for hairlines.

   Rounded sign-painted display type gives the large copy a warmer,
   more memorable voice, while Archivo stays on body copy for clarity.
   Cyan offset shadows and harbor-navy outlines make the headings feel
   tied to the H2WOAH wordmark instead of like generic landing-page type.

   Photo surfaces all share one frame: 14px radius, 2px navy outline.
   Buttons stay pills, which is how the rest of the site behaves.

   `!important` appears only where a global stylesheet already used it
   on the same property (headings, body colour, .nav background).
   ══════════════════════════════════════════════════════════════════ */

/* The Archivo request is a <link> in the document head, not an @import
   here — an @import inside a stylesheet serialises the fetch behind this
   file and delays first paint of the hero type. It asks for the wdth and
   wght axes as ranges, so font-stretch and font-weight below interpolate
   rather than snapping to a static cut. */

/* ───────────────────────────────────────────────
   1. TOKENS
   ─────────────────────────────────────────────── */

:root {
  --h2w-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --h2w-sans: "Archivo", "Montserrat", "Poppins", system-ui, sans-serif;

  /* The display extreme. Kept as tokens because the outline treatment
     below depends on the stroke staying proportional to the weight —
     lighten the face without narrowing the stroke and the counters
     fill in. */
  --h2w-display-wdth: normal;
  --h2w-display-stroke: 0.028em;

  /* Ground — cool, one temperature throughout. */
  --h2w-ink: #061620;
  --h2w-harbor: #0b2333;
  --h2w-harbor-2: #10314a;
  --h2w-harbor-3: #17415b;

  /* Light surfaces. Sea-mist is faintly desaturated so it reads as
     weathered coastal light rather than as cold blue-grey. */
  --h2w-mist: #f3f6f5;
  --h2w-mist-2: #e9efed;
  /* Not pure white. The photo frames are outlined now, and a navy ring on
     a clinical #fff floats; a hair of tint gives it a ground to sit on. */
  --h2w-paper: #fbfdfd;

  /* Text on light. */
  --h2w-slate: #3f5867;
  --h2w-slate-2: #5c7382;

  /* Hairlines. */
  --h2w-line: #d8e1df;
  --h2w-line-2: #e6ecea;
  --h2w-line-dark: rgba(255, 255, 255, 0.15);
  --h2w-line-dark-2: rgba(255, 255, 255, 0.085);

  /* Signal + accent. */
  --h2w-brand: #1fc8ff;
  --h2w-brand-lite: #8ce3ff;
  --h2w-brand-deep: #0a7096;
  --h2w-verdigris: #92bab4;
  --h2w-verdigris-deep: #43706a;

  /* Rhythm. */
  --h2w-gutter: clamp(20px, 5vw, 44px);
  --h2w-max: 1280px;
  --h2w-band: clamp(70px, 7.4vw, 116px);
  --h2w-band-tight: clamp(54px, 6vw, 88px);

  --h2w-r: 8px;
  --h2w-r-lg: 14px;

  /* One outline for every photo surface on the page. */
  --h2w-frame: 2px solid var(--h2w-harbor);

  --h2w-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Architectural dot texture for the dark bands. Cheap, static, and
     painted as a background rather than through a filter. */
  --h2w-dots: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
}

/* ───────────────────────────────────────────────
   2. PAGE BASE
   ─────────────────────────────────────────────── */

body.page-home {
  font-family: var(--h2w-sans);
  background: var(--h2w-paper) !important;
  color: var(--h2w-slate) !important;
}

/* Sticky-nav offset for the in-page anchors. */
html:has(body.page-home) {
  scroll-padding-top: 96px;
}

body.page-home .h2w-shell {
  width: 100%;
  max-width: var(--h2w-max);
  margin-inline: auto;
  padding-inline: var(--h2w-gutter);
}

body.page-home .h2w-band {
  position: relative;
  padding-block: var(--h2w-band);
}

body.page-home .h2w-band--tight {
  padding-block: var(--h2w-band-tight);
}

body.page-home .h2w-band--mist {
  background: var(--h2w-mist);
}

body.page-home .h2w-band--dark {
  background: var(--h2w-harbor);
  color: rgba(255, 255, 255, 0.86);
}

body.page-home .h2w-band--ink {
  background: var(--h2w-ink);
  color: rgba(255, 255, 255, 0.86);
}

/* ───────────────────────────────────────────────
   3. TYPE PRIMITIVES
   ─────────────────────────────────────────────── */

/* Eyebrow: a short rule, then a small tracked label. The rule is the
   one repeated motif that ties every section head together. */
body.page-home .h2w-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--h2w-sans);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--h2w-verdigris-deep);
}

body.page-home .h2w-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transform-origin: left center;
}

/* One numbered set. Each band carries an index, so the eight section
   labels read as a run rather than as eight unrelated headings. The
   counter lives in CSS so the markup holds no hard-coded numbers that
   could fall out of order the next time a section moves. */
body.page-home {
  counter-reset: h2w-sec;
}

body.page-home .h2w-band {
  counter-increment: h2w-sec;
}

/* order:-1 pulls the index ahead of the rule and the label without
   needing a wrapper element in the markup. Only bands get one — the hero
   eyebrow is a location, not a section title. */
body.page-home .h2w-band .h2w-eyebrow::after {
  content: counter(h2w-sec, decimal-leading-zero);
  order: -1;
  flex: 0 0 auto;
  font-family: var(--h2w-display);
  font-size: 0.86rem;
  font-weight: 900;
  font-stretch: 88%;
  letter-spacing: 0.02em;
  color: var(--h2w-brand-deep);
}

body.page-home .h2w-band--dark .h2w-eyebrow::after,
body.page-home .h2w-band--ink .h2w-eyebrow::after {
  color: var(--h2w-brand);
}

body.page-home .h2w-band--dark .h2w-eyebrow,
body.page-home .h2w-band--ink .h2w-eyebrow,
body.page-home .h2w-hero .h2w-eyebrow {
  color: var(--h2w-verdigris);
}

/* Display headings. Archivo pushed to width 68 / weight 900 and set in
   caps: no descenders to protect, so the leading can close right up, and
   the tracking goes slightly positive because condensed caps at this
   weight touch each other otherwise. Caps also read narrower per
   character than the old serif did, so the sizes below are all larger
   than the lowercase settings they replace. */
body.page-home .h2w-title {
  margin: 0;
  font-family: var(--h2w-display) !important;
  font-weight: 900 !important;
  font-stretch: var(--h2w-display-wdth);
  font-size: clamp(2.6rem, 5.5vw, 5.1rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.004em !important;
  text-transform: uppercase;
  color: var(--h2w-harbor);
  max-width: 20ch;
  text-wrap: balance;
}

body.page-home .h2w-band--dark .h2w-title,
body.page-home .h2w-band--ink .h2w-title {
  color: #ffffff;
}

/* The outline. paint-order draws the stroke first and the fill over it,
   so the stroke reads as an outer ring and the glyph keeps its full
   width — without it, a centred stroke eats into the counters and the
   caps go solid. Light bands get a pale cyan fill inside a navy ring;
   dark bands mirror it, white inside cyan.

   Wrapped in @supports because the fill colour alone is far too light to
   read on white. Where the stroke cannot be drawn the titles simply stay
   solid navy, which is where they started. */
@supports ((-webkit-text-stroke: 1px #000) and (paint-order: stroke)) {
  body.page-home .h2w-title,
  body.page-home .h2w-hero-title,
  body.page-home .h2w-close-title {
    paint-order: stroke fill;
  }

  body.page-home .h2w-title {
    color: var(--h2w-brand-lite);
    -webkit-text-stroke: var(--h2w-display-stroke) var(--h2w-harbor);
  }

  body.page-home .h2w-band--dark .h2w-title,
  body.page-home .h2w-band--ink .h2w-title {
    color: #ffffff;
    -webkit-text-stroke: var(--h2w-display-stroke) var(--h2w-brand);
  }
}

body.page-home .h2w-title--wide {
  max-width: 28ch;
}

body.page-home .h2w-lede {
  margin: 22px 0 0;
  /* Measure comes down as the size goes up, so the line count stays
     roughly where it was and the block does not stretch across the shell. */
  max-width: 49ch;
  font-family: var(--h2w-sans);
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.6;
  color: var(--h2w-slate);
}

body.page-home .h2w-band--dark .h2w-lede,
body.page-home .h2w-band--ink .h2w-lede {
  color: rgba(255, 255, 255, 0.8);
}

body.page-home .h2w-sec-head {
  margin-bottom: clamp(40px, 4.5vw, 68px);
}

/* Section heads sit left by default — centred heads are the single
   biggest reason a services page reads as a template. */
body.page-home .h2w-sec-head--split {
  display: grid;
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
}

@media (min-width: 900px) {
  body.page-home .h2w-sec-head--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  body.page-home .h2w-sec-head--split .h2w-lede {
    margin-top: 0;
    padding-bottom: 6px;
  }
}

/* ───────────────────────────────────────────────
   4. BUTTONS
   ─────────────────────────────────────────────── */

body.page-home .h2w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--h2w-display);
  font-stretch: 92%;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s var(--h2w-ease), background-color 0.22s ease,
    border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

body.page-home .h2w-btn:hover {
  transform: translateY(-2px);
}

body.page-home .h2w-btn:active {
  transform: translateY(0);
}

body.page-home .h2w-btn:focus-visible {
  outline: 3px solid var(--h2w-brand-lite);
  outline-offset: 3px;
}

body.page-home .h2w-btn .h2w-btn-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

/* Primary: brand cyan carrying dark ink. The cyan is bright enough
   that white text on it fails contrast, so the label is navy. */
body.page-home .h2w-btn--solid {
  background: var(--h2w-brand);
  color: #06202f;
  box-shadow: 0 12px 28px -18px rgba(31, 200, 255, 0.9);
}

body.page-home .h2w-btn--solid:hover {
  background: var(--h2w-brand-lite);
  color: #06202f;
  box-shadow: 0 18px 34px -18px rgba(31, 200, 255, 0.95);
}

/* Secondary on dark grounds. */
body.page-home .h2w-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

body.page-home .h2w-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.62);
  color: #ffffff;
}

/* Secondary on light grounds. */
body.page-home .h2w-btn--outline {
  background: transparent;
  border-color: var(--h2w-harbor);
  color: var(--h2w-harbor);
}

body.page-home .h2w-btn--outline:hover {
  background: var(--h2w-harbor);
  color: #ffffff;
}

body.page-home .h2w-btn--dark {
  background: var(--h2w-harbor);
  color: #ffffff;
  box-shadow: 0 14px 30px -20px rgba(11, 35, 51, 0.9);
}

body.page-home .h2w-btn--dark:hover {
  background: var(--h2w-harbor-3);
  color: #ffffff;
}

body.page-home .h2w-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* Quiet text link with a sliding underline. */
body.page-home .h2w-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--h2w-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--h2w-brand-deep);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(10, 112, 150, 0.32);
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.page-home .h2w-link:hover {
  color: var(--h2w-harbor);
  border-color: var(--h2w-harbor);
}

body.page-home .h2w-link svg {
  width: 15px;
  height: 15px;
  transition: transform 0.24s var(--h2w-ease);
}

body.page-home .h2w-link:hover svg {
  transform: translateX(4px);
}

body.page-home .h2w-band--dark .h2w-link,
body.page-home .h2w-band--ink .h2w-link {
  color: var(--h2w-brand-lite);
  border-color: rgba(140, 227, 255, 0.4);
}

body.page-home .h2w-band--dark .h2w-link:hover,
body.page-home .h2w-band--ink .h2w-link:hover {
  color: #ffffff;
  border-color: #ffffff;
}

/* ───────────────────────────────────────────────
   5. RETAINED CHROME — topbar, nav, footer, mobile bar
   ─────────────────────────────────────────────── */

body.page-home .topbar {
  background: var(--h2w-ink) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--h2w-sans);
}

body.page-home .nav {
  background: var(--h2w-harbor) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--h2w-sans);
}

/* The bar itself stays navy — the wordmark's W, A and H are white
   artwork, so a cream bar like the reference site's would erase half the
   logo. Its type, CTA, hairline and scrolled state all live in
   site-style-system.css §14 now, because every page shares this bar and
   the treatment should not stop at the homepage. */

body.page-home .footer {
  background: var(--h2w-ink) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--h2w-sans);
}

body.page-home .mobile-cta {
  background: var(--h2w-ink) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ───────────────────────────────────────────────
   6. HERO
   ─────────────────────────────────────────────── */

body.page-home .h2w-hero {
  position: relative;
  isolation: isolate;
  background: var(--h2w-harbor);
  overflow: hidden;
}

/* Atmosphere: two wide radials for depth, then a set of hairline
   columns fading out downward so the band feels drafted rather than
   filled. Both layers are non-interactive. */
body.page-home .h2w-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 6% -10%, rgba(31, 200, 255, 0.14), transparent 58%),
    radial-gradient(95% 80% at 102% 108%, rgba(146, 186, 180, 0.13), transparent 62%);
}

body.page-home .h2w-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0 1px,
    transparent 1px 116px
  );
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

body.page-home .h2w-hero-grid {
  position: relative;
  display: grid;
  gap: clamp(38px, 5vw, 60px);
  padding-inline: var(--h2w-gutter);
  padding-block: clamp(48px, 6vw, 92px) clamp(56px, 7vw, 104px);
}

/* Desktop: the copy column keeps the container's left edge while the
   before/after stage runs off the right edge of the viewport. */
@media (min-width: 1000px) {
  body.page-home .h2w-hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 5vw, 84px);
    align-items: center;
    padding-left: max(var(--h2w-gutter), calc((100vw - var(--h2w-max)) / 2));
    padding-right: 0;
  }
}

body.page-home .h2w-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}

body.page-home .h2w-hero-title {
  margin: 0;
  font-family: var(--h2w-display) !important;
  font-weight: 900 !important;
  font-stretch: var(--h2w-display-wdth);
  font-size: clamp(3rem, 7.1vw, 6.2rem) !important;
  line-height: 0.88 !important;
  letter-spacing: 0.004em !important;
  text-transform: uppercase;
  color: #ffffff;
  max-width: 15ch;
  text-wrap: balance;
}

/* Over video the navy ring does double duty: it is the brand outline and
   it is what stops a bright frame from swallowing the headline. */
@supports ((-webkit-text-stroke: 1px #000) and (paint-order: stroke)) {
  body.page-home .h2w-hero-title {
    -webkit-text-stroke: 0.05em var(--h2w-harbor);
  }
}

/* The brand's own word, given the weight it deserves. */
body.page-home .h2w-woah {
  display: block;
  margin-top: 0.02em;
  font-weight: 900;
  font-size: 1.3em;
  letter-spacing: -0.006em;
  color: var(--h2w-brand);
}

body.page-home .h2w-hero-lede {
  margin: 28px 0 0;
  max-width: 41ch;
  font-size: clamp(1.1rem, 1.5vw, 1.34rem);
  line-height: 1.54;
  color: rgba(255, 255, 255, 0.82);
}

body.page-home .h2w-hero .h2w-actions {
  margin-top: 32px;
}

/* Four short proof points on a hairline, two-up on phones. */
body.page-home .h2w-hero-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  margin: 34px 0 0;
  padding: 26px 0 0;
  list-style: none;
  border-top: 1px solid var(--h2w-line-dark);
}

@media (min-width: 620px) {
  body.page-home .h2w-hero-proof {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body.page-home .h2w-hero-proof li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.34;
  color: rgba(255, 255, 255, 0.82);
}

body.page-home .h2w-hero-proof svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--h2w-verdigris);
}

/* ── Hero stage: the live before/after ── */

body.page-home .h2w-hero-stage {
  position: relative;
  z-index: 1;
}

body.page-home .h2w-stage-frame {
  position: relative;
  border: var(--h2w-frame);
  border-radius: var(--h2w-r-lg);
  overflow: hidden;
  box-shadow: 0 44px 90px -46px rgba(3, 12, 19, 0.95);
}

@media (min-width: 1000px) {
  body.page-home .h2w-stage-frame {
    border-radius: var(--h2w-r-lg) 0 0 var(--h2w-r-lg);
  }
}

body.page-home .h2w-stage-frame .ba-slider {
  aspect-ratio: 4 / 3;
  border-radius: 0;
  background: var(--h2w-harbor-2);
}

@media (min-width: 1000px) {
  body.page-home .h2w-stage-frame .ba-slider {
    aspect-ratio: 41 / 32;
  }
}

/* A single hairline handle with a small plate, rather than the heavy
   white bar and 46px disc used elsewhere on the site. */
body.page-home .h2w-stage-frame .ba-handle,
body.page-home .h2w-proof .ba-handle {
  width: 2px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(6, 22, 32, 0.22), 0 0 22px rgba(6, 22, 32, 0.42);
}

body.page-home .h2w-stage-frame .ba-handle-circle,
body.page-home .h2w-proof .ba-handle-circle {
  width: 46px;
  height: 46px;
  gap: 5px;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(6, 22, 32, 0.34);
}

body.page-home .h2w-stage-frame .ba-handle-arrow.left,
body.page-home .h2w-proof .ba-handle-arrow.left {
  border-right-color: var(--h2w-brand-deep);
}

body.page-home .h2w-stage-frame .ba-handle-arrow.right,
body.page-home .h2w-proof .ba-handle-arrow.right {
  border-left-color: var(--h2w-brand-deep);
}

body.page-home .ba-slider:focus-visible {
  outline: 3px solid var(--h2w-brand-lite);
  outline-offset: 3px;
}

/* Before / after labels, restyled as flat tracked plates. */
body.page-home .h2w-stage-frame .ba-label,
body.page-home .h2w-proof .ba-label {
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 3px;
  font-family: var(--h2w-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  backdrop-filter: blur(2px);
}

body.page-home .h2w-stage-frame .ba-label.before,
body.page-home .h2w-proof .ba-label.before {
  left: 14px;
  background: rgba(6, 22, 32, 0.82);
  color: rgba(255, 255, 255, 0.94);
}

body.page-home .h2w-stage-frame .ba-label.after,
body.page-home .h2w-proof .ba-label.after {
  right: 14px;
  background: var(--h2w-brand-deep);
  color: #ffffff;
}

body.page-home .h2w-stage-frame .ba-drag-hint,
body.page-home .h2w-proof .ba-drag-hint {
  top: 14px;
  padding: 6px 15px;
  background: rgba(6, 22, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--h2w-sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.94);
}

/* ───────────────────────────────────────────────
   7. WORK STRIP (marquee)
   ─────────────────────────────────────────────── */

body.page-home .h2w-strip {
  position: relative;
  padding-block: clamp(30px, 3.4vw, 46px);
  background: var(--h2w-ink);
  overflow: hidden;
}

body.page-home .h2w-strip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin: 0 0 22px;
  padding-inline: var(--h2w-gutter);
}

/* This label is an <h2> for the section's accessible name, so it has to
   out-shout the global h2 rules in site-style-system.css. */
body.page-home .h2w-strip-label {
  margin: 0;
  font-family: var(--h2w-sans) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--h2w-verdigris);
}

body.page-home .h2w-strip-note {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.58);
}

body.page-home .h2w-rail {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Per-child margin rather than `gap`: the track is exactly doubled, so
   translating by -50% only lands on a seamless seam if every item
   carries its own trailing space. A `gap` leaves the loop half a gap
   short and the strip visibly jumps once per cycle. */
body.page-home .h2w-rail-track {
  display: flex;
  width: max-content;
  animation: h2wRail 96s linear infinite;
}

body.page-home .h2w-rail:hover .h2w-rail-track,
body.page-home .h2w-rail:focus-within .h2w-rail-track {
  animation-play-state: paused;
}

@keyframes h2wRail {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* PHOTO FRAMES
   Every photo surface on the page carries the same ring and the same
   radius, which is most of what makes a wall of unrelated snapshots read
   as one set. --h2w-frame is navy, for the light bands; the two dark-band
   surfaces swap in cyan so the ring stays visible against navy. */
body.page-home .h2w-rail-item {
  border: var(--h2w-frame);
  flex: 0 0 auto;
  width: clamp(198px, 17.6vw, 272px);
  margin: 0 16px 0 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--h2w-r);
  overflow: hidden;
  background: var(--h2w-harbor-2);
}

body.page-home .h2w-rail-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ───────────────────────────────────────────────
   8. SERVICES
   ─────────────────────────────────────────────── */

body.page-home .h2w-services {
  background: var(--h2w-paper);
}

body.page-home .h2w-svc-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Four columns: one square feature at 2×2, four square tiles, then
   two wide bands. Deliberately not seven equal cards in a row. */
@media (min-width: 900px) {
  body.page-home .h2w-svc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.page-home .h2w-svc:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }

  body.page-home .h2w-svc:nth-child(6),
  body.page-home .h2w-svc:nth-child(7) {
    grid-column: span 2;
    aspect-ratio: 21 / 8;
  }
}

body.page-home .h2w-svc {
  position: relative;
  border: var(--h2w-frame);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  padding: 22px;
  border-radius: var(--h2w-r);
  overflow: hidden;
  background: var(--h2w-harbor);
  text-decoration: none;
  isolation: isolate;
}

body.page-home .h2w-svc-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.72s var(--h2w-ease);
}

body.page-home .h2w-svc-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(6, 22, 32, 0.92) 0%,
    rgba(6, 22, 32, 0.72) 34%,
    rgba(6, 22, 32, 0.3) 66%,
    rgba(6, 22, 32, 0.12) 100%
  );
  transition: opacity 0.4s ease;
}

body.page-home .h2w-svc:hover .h2w-svc-img,
body.page-home .h2w-svc:focus-visible .h2w-svc-img {
  transform: scale(1.05);
}

body.page-home .h2w-svc:focus-visible {
  outline: 3px solid var(--h2w-brand);
  outline-offset: 3px;
}

/* The folio number sits at the top of the card, where the scrim is at
   its lightest by design — so it carries its own plate instead. A bare
   translucent white would drop to about 1.2:1 over a bright photo. */
body.page-home .h2w-svc-num {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: 3px;
  background: rgba(6, 22, 32, 0.68);
  font-family: var(--h2w-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  font-stretch: var(--h2w-display-wdth);
  color: rgba(255, 255, 255, 0.94);
}

@supports (backdrop-filter: blur(3px)) {
  body.page-home .h2w-svc-num {
    background: rgba(6, 22, 32, 0.62);
    backdrop-filter: blur(4px) saturate(1.1);
  }
}

body.page-home .h2w-svc-name {
  margin: 0;
  font-family: var(--h2w-display) !important;
  font-weight: 900 !important;
  font-stretch: var(--h2w-display-wdth);
  font-size: clamp(1.46rem, 2.1vw, 2rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0.012em !important;
  text-transform: uppercase;
  color: #ffffff;
}

body.page-home .h2w-svc:nth-child(1) .h2w-svc-name {
  font-size: clamp(1.7rem, 2.9vw, 2.55rem) !important;
}

body.page-home .h2w-svc-desc {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

body.page-home .h2w-svc-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--h2w-brand-lite);
}

body.page-home .h2w-svc-go svg {
  width: 14px;
  height: 14px;
  transition: transform 0.26s var(--h2w-ease);
}

body.page-home .h2w-svc:hover .h2w-svc-go svg {
  transform: translateX(5px);
}

/* Commercial panel + "all services" row under the grid. */
body.page-home .h2w-svc-foot {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

@media (min-width: 900px) {
  body.page-home .h2w-svc-foot {
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

body.page-home .h2w-svc-panel {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--h2w-mist);
  border: var(--h2w-frame);
  border-radius: var(--h2w-r);
  text-decoration: none;
  transition: border-color 0.24s ease, transform 0.24s var(--h2w-ease);
}

body.page-home .h2w-svc-panel:hover {
  border-color: var(--h2w-verdigris);
  transform: translateY(-2px);
}

body.page-home .h2w-svc-panel-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--h2w-r);
  background: var(--h2w-paper);
  border: 1px solid var(--h2w-line);
  color: var(--h2w-brand-deep);
}

body.page-home .h2w-svc-panel-icon svg {
  width: 23px;
  height: 23px;
}

body.page-home .h2w-svc-panel h3 {
  margin: 0;
  font-family: var(--h2w-display) !important;
  font-weight: 900 !important;
  font-stretch: var(--h2w-display-wdth);
  font-size: 1.66rem !important;
  line-height: 1 !important;
  letter-spacing: 0.014em !important;
  text-transform: uppercase;
  color: var(--h2w-harbor);
}

body.page-home .h2w-svc-panel p {
  margin: 9px 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--h2w-slate);
}

/* The "everything we clean" tile, set as a quiet dark counterweight. */
body.page-home .h2w-svc-all {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--h2w-harbor);
  border: 2px solid var(--h2w-brand-deep);
  border-radius: var(--h2w-r);
  background-image: var(--h2w-dots);
  background-size: 20px 20px;
}

body.page-home .h2w-svc-all p {
  margin: 0;
  font-family: var(--h2w-display);
  font-size: clamp(1.48rem, 2.15vw, 1.96rem);
  font-weight: 900;
  font-stretch: var(--h2w-display-wdth);
  line-height: 1.04;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: #ffffff;
}

/* ───────────────────────────────────────────────
   10. PROOF (before / after)
   ─────────────────────────────────────────────── */

body.page-home .h2w-proof {
  background: var(--h2w-mist);
}

body.page-home .h2w-proof-lead {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin-bottom: 14px;
}

@media (min-width: 980px) {
  body.page-home .h2w-proof-lead {
    grid-template-columns: minmax(0, 1.52fr) minmax(0, 1fr);
    align-items: center;
  }

  /* The section heading comes first in the DOM so the h2 precedes the
     card's h3 in the accessibility outline; the card is placed back into
     the wide left column here. */
  body.page-home .h2w-proof-lead > .h2w-ba--lead {
    grid-column: 1;
    grid-row: 1;
  }

  body.page-home .h2w-proof-lead > .h2w-proof-copy {
    grid-column: 2;
    grid-row: 1;
  }
}

body.page-home .h2w-ba {
  position: relative;
  background: var(--h2w-paper);
  border: var(--h2w-frame);
  border-radius: var(--h2w-r-lg);
  overflow: hidden;
  transition: border-color 0.24s ease, box-shadow 0.3s ease;
}

body.page-home .h2w-ba:hover {
  border-color: var(--h2w-verdigris);
  box-shadow: 0 26px 50px -34px rgba(3, 12, 19, 0.42);
}

body.page-home .h2w-ba .ba-slider {
  aspect-ratio: 5 / 4;
  border-radius: 0;
  background: var(--h2w-mist-2);
}

body.page-home .h2w-proof-lead .h2w-ba .ba-slider {
  aspect-ratio: 3 / 2;
}

body.page-home .h2w-ba-cap {
  display: block;
  padding: 18px 20px 20px;
  text-decoration: none;
}

body.page-home .h2w-ba-cap h3 {
  margin: 0;
  font-family: var(--h2w-display) !important;
  font-weight: 900 !important;
  font-stretch: var(--h2w-display-wdth);
  font-size: 1.12rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
  color: var(--h2w-harbor);
}

body.page-home .h2w-ba-cap p {
  margin: 7px 0 0;
  font-size: 0.855rem;
  line-height: 1.56;
  color: var(--h2w-slate-2);
}

body.page-home .h2w-ba-cap:hover h3 {
  color: var(--h2w-brand-deep);
}

/* Copy block beside the lead comparison. */
body.page-home .h2w-proof-note h3 {
  margin: 0 0 14px;
  font-family: var(--h2w-display) !important;
  font-weight: 900 !important;
  font-stretch: var(--h2w-display-wdth);
  font-size: clamp(1.62rem, 2.4vw, 2.2rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0.012em !important;
  text-transform: uppercase;
  color: var(--h2w-harbor);
}

body.page-home .h2w-proof-note p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--h2w-slate);
}

body.page-home .h2w-proof-note .h2w-link {
  margin-top: 24px;
}

body.page-home .h2w-proof-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  body.page-home .h2w-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  body.page-home .h2w-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.page-home .h2w-proof-foot {
  margin-top: clamp(32px, 3.4vw, 46px);
}

/* ───────────────────────────────────────────────
   11. VOICES (Google reviews marquee)
   ─────────────────────────────────────────────── */

body.page-home .h2w-voices {
  position: relative;
  background: var(--h2w-harbor);
  overflow: hidden;
}

body.page-home .h2w-voices-head {
  display: grid;
  gap: clamp(22px, 3vw, 44px);
  padding-inline: var(--h2w-gutter);
  max-width: var(--h2w-max);
  margin-inline: auto;
  margin-bottom: clamp(36px, 4vw, 56px);
}

@media (min-width: 900px) {
  body.page-home .h2w-voices-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

/* Rating plate: the count is written by google-reviews.js. */
body.page-home .h2w-voices-plate {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 26px;
  border: 2px solid var(--h2w-brand-deep);
  border-radius: var(--h2w-r);
  background: rgba(255, 255, 255, 0.05);
}

body.page-home .h2w-voices-plate-score {
  font-family: var(--h2w-display);
  font-size: 2.95rem;
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.03em;
  font-stretch: var(--h2w-display-wdth);
  color: #ffffff;
}

body.page-home .h2w-voices-plate .stars {
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  color: var(--h2w-brand-lite);
}

body.page-home .h2w-voices-plate strong {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
}

body.page-home .h2w-voices-plate span.h2w-voices-plate-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.79rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
}

/* The track is a marquee because google-reviews.js clones cards to
   build the loop — a static grid would render duplicates. */
body.page-home .h2w-voices-rail {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

body.page-home .h2w-voices-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: h2wVoices 210s linear infinite;
}

body.page-home .h2w-voices-rail:hover .h2w-voices-track,
body.page-home .h2w-voices-rail:focus-within .h2w-voices-track {
  animation-play-state: paused;
}

@keyframes h2wVoices {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Review cards as quote blocks: a rule, the quote in the body sans, an
   attribution. No boxes-within-boxes. */
body.page-home .h2w-voices-track .review-card {
  flex: 0 0 clamp(276px, 25vw, 348px);
  display: flex;
  flex-direction: column;
  /* Trailing margin instead of a track `gap` — see the note on the
     work strip: google-reviews.js doubles the card list, and only a
     per-card margin makes the -50% loop land exactly. */
  margin: 0 16px 0 0;
  padding: 28px 28px 26px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--h2w-line-dark-2);
  border-radius: var(--h2w-r);
  box-shadow: none;
  opacity: 1;
  transform: none;
}

body.page-home .h2w-voices-track .review-card::before,
body.page-home .h2w-voices-track .review-card::after {
  content: none;
}

body.page-home .h2w-voices-track .review-stars {
  margin: 0 0 16px;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  color: var(--h2w-brand-lite);
}

/* Review text and the pull quote were the two places the old serif was
   doing reading duty rather than display duty. Condensed black caps
   would shout them, so they take the body sans. */
body.page-home .h2w-voices-track .review-text {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--h2w-sans);
  font-size: 1.03rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.003em;
  color: #ffffff;
}

body.page-home .h2w-voices-track .review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--h2w-line-dark-2);
}

body.page-home .h2w-voices-track .review-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--h2w-line-dark);
  font-family: var(--h2w-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
}

body.page-home .h2w-voices-track .review-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffffff;
}

body.page-home .h2w-voices-track .review-source {
  margin-top: 2px;
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.66);
}

body.page-home .h2w-voices-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(34px, 3.6vw, 50px);
}

/* ───────────────────────────────────────────────
   12. OWNER BAND
   ─────────────────────────────────────────────── */

body.page-home .h2w-owner {
  background: var(--h2w-mist);
}

body.page-home .h2w-owner-grid {
  display: grid;
  gap: clamp(34px, 4.4vw, 72px);
  align-items: start;
}

@media (min-width: 980px) {
  body.page-home .h2w-owner-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  }
}

body.page-home .h2w-owner-figure {
  position: relative;
  margin: 0;
}

body.page-home .h2w-owner-figure img,
body.page-home .h2w-owner-video {
  border: var(--h2w-frame);
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  border-radius: var(--h2w-r);
  background: var(--h2w-mist-2);
}

/* Small caption plate overlapping the photo's lower edge. */
body.page-home .h2w-owner-figure figcaption {
  position: relative;
  z-index: 2;
  width: calc(100% - 28px);
  margin: -34px 0 0 28px;
  padding: 16px 20px;
  background: var(--h2w-harbor);
  border-radius: var(--h2w-r);
  box-shadow: 0 24px 46px -30px rgba(3, 12, 19, 0.55);
}

body.page-home .h2w-owner-figure figcaption strong {
  display: block;
  font-family: var(--h2w-display);
  font-size: 1.16rem;
  font-weight: 900;
  font-stretch: var(--h2w-display-wdth);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
}

body.page-home .h2w-owner-figure figcaption span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--h2w-verdigris);
}

/* The four-step quote path, as a numbered editorial list. */
body.page-home .h2w-steps {
  margin: clamp(28px, 3vw, 42px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: h2wstep;
  border-top: 1px solid var(--h2w-line);
}

body.page-home .h2w-steps li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--h2w-line-2);
  counter-increment: h2wstep;
}

body.page-home .h2w-steps li::before {
  content: "0" counter(h2wstep);
  grid-row: span 2;
  font-family: var(--h2w-display);
  font-size: 1.42rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.005em;
  font-stretch: var(--h2w-display-wdth);
  color: var(--h2w-verdigris-deep);
}

body.page-home .h2w-steps h3 {
  margin: 0;
  font-family: var(--h2w-sans) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.006em !important;
  color: var(--h2w-harbor);
}

body.page-home .h2w-steps p {
  margin: 5px 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--h2w-slate);
}

/* ───────────────────────────────────────────────
   13. SERVICE AREA
   ─────────────────────────────────────────────── */

/* Ink rather than harbor. The owner split used to sit between the reviews
   band and this one; now that it has moved up to second on the page these
   two are adjacent, and two identical navies in a row read as one very
   long section. Stepping down to ink makes the run deliberate. */
body.page-home .h2w-area {
  background: var(--h2w-ink);
  background-image: var(--h2w-dots);
  background-size: 22px 22px;
}

/* The map column carries more visual weight than the copy, so the grid
   leans the other way and the copy gets a hard measure instead of
   stretching to whatever the town pills happen to need. */
body.page-home .h2w-area-grid {
  display: grid;
  gap: clamp(38px, 4.4vw, 68px);
  align-items: start;
}

@media (min-width: 980px) {
  body.page-home .h2w-area-grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    align-items: center;
  }
}

body.page-home .h2w-area-copy {
  max-width: 46ch;
}

body.page-home .h2w-area .h2w-title {
  max-width: 16ch;
}

body.page-home .h2w-area .h2w-lede {
  max-width: 44ch;
}

/* The count reads as one line of display type with a caption beside it,
   so the caption is vertically centred on the numeral rather than sat on
   its baseline, and the rule between them carries the eye across. */
body.page-home .h2w-area-count {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(26px, 3vw, 36px) 0 0;
  padding-bottom: clamp(24px, 2.8vw, 34px);
  border-bottom: 1px solid var(--h2w-line-dark-2);
}

body.page-home .h2w-area-count b {
  flex: 0 0 auto;
  font-family: var(--h2w-display);
  font-size: clamp(4.3rem, 8.4vw, 7rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.01em;
  font-stretch: var(--h2w-display-wdth);
  color: var(--h2w-brand-lite);
  font-variant-numeric: tabular-nums;
}

body.page-home .h2w-area-count span {
  max-width: 19ch;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.78);
}

/* Eighteen pills in one flat wrap gave no clue which towns are the daily
   run and which are the weekly trip. Two labelled stacks say it without
   a sentence. */
body.page-home .h2w-town-groups {
  display: grid;
  gap: clamp(22px, 2.6vw, 30px);
  margin: clamp(26px, 3vw, 34px) 0 0;
}

@media (min-width: 560px) {
  body.page-home .h2w-town-groups {
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2.4vw, 32px);
  }
}

body.page-home .h2w-town-label {
  margin: 0 0 11px;
  font-family: var(--h2w-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--h2w-verdigris);
}

body.page-home .h2w-towns {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-home .h2w-towns a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body.page-home .h2w-towns a:hover {
  background: var(--h2w-brand);
  border-color: var(--h2w-brand);
  color: #06202f;
  transform: translateY(-1px);
}

body.page-home .h2w-area-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(28px, 3.2vw, 38px) 0 0;
}

body.page-home .h2w-map-note {
  margin: 0;
  padding: 11px 16px;
  border-top: 1px solid var(--h2w-line-dark);
  background: rgba(6, 22, 32, 0.55);
  font-family: var(--h2w-sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.66);
}

body.page-home .h2w-map-frame {
  position: relative;
  border: 2px solid var(--h2w-brand-deep);
  border-radius: var(--h2w-r-lg);
  overflow: hidden;
  background: var(--h2w-harbor-2);
}

body.page-home #service-area-map {
  display: block !important;
  width: 100%;
  min-height: 440px;
  aspect-ratio: 5 / 4;
  background: var(--h2w-harbor-2);
}

@media (min-width: 980px) {
  body.page-home #service-area-map {
    aspect-ratio: 1 / 1;
    min-height: 520px;
  }
}

/* ───────────────────────────────────────────────
   14. FAQ
   ─────────────────────────────────────────────── */

body.page-home .h2w-faq {
  background: var(--h2w-mist);
}

body.page-home .h2w-faq-grid {
  display: grid;
  gap: clamp(30px, 4vw, 68px);
  align-items: start;
}

@media (min-width: 940px) {
  body.page-home .h2w-faq-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }

  body.page-home .h2w-faq-grid .h2w-sec-head {
    position: sticky;
    top: 108px;
    margin-bottom: 0;
  }
}

body.page-home .h2w-faq .faq-list {
  max-width: none;
  margin: 0;
  border-top: 1px solid var(--h2w-line);
}

body.page-home .h2w-faq .faq-item {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--h2w-line);
  border-radius: 0 !important;
  box-shadow: none;
  overflow: visible;
}

body.page-home .h2w-faq .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  background: transparent;
  border: 0;
  font-family: var(--h2w-sans);
  font-size: 1.005rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.006em;
  text-align: left;
  color: var(--h2w-harbor);
  cursor: pointer;
  transition: color 0.2s ease;
}

body.page-home .h2w-faq .faq-q:hover {
  color: var(--h2w-brand-deep);
}

body.page-home .h2w-faq .faq-q:focus-visible {
  outline: 3px solid var(--h2w-brand);
  outline-offset: 4px;
}

body.page-home .h2w-faq .faq-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--h2w-line);
  font-size: 1rem;
  font-weight: 500;
  color: var(--h2w-brand-deep);
  transition: transform 0.26s var(--h2w-ease), background-color 0.2s ease,
    border-color 0.2s ease, color 0.2s ease;
}

body.page-home .h2w-faq .faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--h2w-harbor);
  border-color: var(--h2w-harbor);
  color: #ffffff;
}

body.page-home .h2w-faq .faq-a {
  padding: 0 52px 26px 0;
  font-size: 0.945rem;
  line-height: 1.72;
  color: var(--h2w-slate);
}

body.page-home .h2w-faq .faq-a > div {
  max-width: 62ch;
}

body.page-home .h2w-faq-foot {
  margin-top: 30px;
}

/* ───────────────────────────────────────────────
   15. QUOTE FORM
   ─────────────────────────────────────────────── */

/* The card the form sits in is styled in §24, alongside the hero rail it
   now lives in. Jobber renders the form itself and ships its own
   stylesheet, so there is no loading state left to own here. */

/* ───────────────────────────────────────────────
   16. CLOSING CTA
   ─────────────────────────────────────────────── */

body.page-home .h2w-close {
  position: relative;
  isolation: isolate;
  background: var(--h2w-ink);
  overflow: hidden;
  text-align: center;
}

body.page-home .h2w-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(80% 120% at 50% 118%, rgba(31, 200, 255, 0.2), transparent 62%),
    var(--h2w-dots);
  background-size: auto, 24px 24px;
}

body.page-home .h2w-close .h2w-eyebrow {
  justify-content: center;
}

body.page-home .h2w-close-title {
  margin: 0 auto;
  max-width: 16ch;
  font-family: var(--h2w-display) !important;
  font-weight: 900 !important;
  font-stretch: var(--h2w-display-wdth);
  font-size: clamp(2.8rem, 6.6vw, 5.4rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.004em !important;
  text-transform: uppercase;
  color: #ffffff;
  text-wrap: balance;
}

@supports ((-webkit-text-stroke: 1px #000) and (paint-order: stroke)) {
  body.page-home .h2w-close-title {
    -webkit-text-stroke: var(--h2w-display-stroke) var(--h2w-brand);
  }

  /* WOAH flips the relationship so it reads as the accent inside an
     already-outlined headline rather than as more of the same. */
  body.page-home .h2w-hero-title .h2w-woah,
  body.page-home .h2w-close-title .h2w-woah {
    color: var(--h2w-brand);
    -webkit-text-stroke: 0.045em #ffffff;
  }
}

body.page-home .h2w-close-title .h2w-woah {
  display: inline;
  font-size: 1.06em;
}

body.page-home .h2w-close .h2w-lede {
  margin-inline: auto;
  text-align: center;
}

body.page-home .h2w-close .h2w-actions {
  justify-content: center;
}

body.page-home .h2w-close-fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

body.page-home .h2w-close-fine li {
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ───────────────────────────────────────────────
   17. MOTION
   ─────────────────────────────────────────────── */

/* Hero load choreography. CSS-only and `both`-filled, so the copy is
   never left invisible by a JS failure. */
@keyframes h2wRise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.page-home .h2w-hero-copy > *,
body.page-home .h2w-hero-stage {
  animation: h2wRise 0.8s var(--h2w-ease) both;
}

body.page-home .h2w-hero-copy > *:nth-child(1) {
  animation-delay: 0.04s;
}
body.page-home .h2w-hero-copy > *:nth-child(2) {
  animation-delay: 0.11s;
}
body.page-home .h2w-hero-copy > *:nth-child(3) {
  animation-delay: 0.18s;
}
body.page-home .h2w-hero-copy > *:nth-child(4) {
  animation-delay: 0.25s;
}
body.page-home .h2w-hero-copy > *:nth-child(5) {
  animation-delay: 0.32s;
}
body.page-home .h2w-hero-copy > *:nth-child(6) {
  animation-delay: 0.39s;
}
body.page-home .h2w-hero-stage {
  animation-duration: 0.95s;
  animation-delay: 0.16s;
}

/* Both of these used to be children of .h2w-hero-copy and rode its stagger.
   They are grid cells of their own now, so they name their own beat. */
body.page-home .h2w-hero-quote,
body.page-home .h2w-hero-proof {
  animation: h2wRise 0.9s var(--h2w-ease) both;
}

body.page-home .h2w-hero-quote {
  animation-delay: 0.24s;
}

body.page-home .h2w-hero-proof {
  animation-delay: 0.34s;
}

/* Scroll reveals. The class is only armed once home.js confirms it can
   observe, so no-JS visitors see everything. */
html.h2w-reveal body.page-home [data-h2w-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

html.h2w-reveal body.page-home [data-h2w-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--h2w-ease), transform 0.7s var(--h2w-ease);
}

/* "rise" is for the big single objects: the map, the rating plate, the FAQ
   stack. They travel further and scale up a hair so the arrival reads as
   the block settling into place rather than text sliding in. */
html.h2w-reveal body.page-home [data-h2w-reveal='rise'] {
  transform: translate3d(0, 40px, 0) scale(0.985);
}

html.h2w-reveal body.page-home [data-h2w-reveal='rise'].is-in {
  transform: none;
  transition: opacity 0.85s var(--h2w-ease), transform 0.9s var(--h2w-ease);
}

/* "wipe" is for the display headlines only. The type is masked to its own
   box and travels up into it, so the caps arrive from behind the baseline
   instead of fading in place — the one gesture loud enough to match an
   outlined face. Negative insets on the resting state keep the stroke and
   the descenders out of the clip once it has opened. */
html.h2w-reveal body.page-home [data-h2w-reveal='wipe'] {
  opacity: 1;
  clip-path: inset(-0.16em 0 100% 0);
  transform: translate3d(0, 0.16em, 0);
}

html.h2w-reveal body.page-home [data-h2w-reveal='wipe'].is-in {
  clip-path: inset(-0.16em 0 -0.3em 0);
  transform: none;
  transition:
    clip-path 0.95s var(--h2w-ease) 0.1s,
    transform 0.95s var(--h2w-ease) 0.1s;
}

/* The eyebrow rule is the motif every section head shares, so it draws
   itself rather than arriving finished. It only animates when something
   above it is a reveal hook, which means an eyebrow outside the system
   keeps its full-width rule and needs no exception. */
html.h2w-reveal body.page-home [data-h2w-reveal] .h2w-eyebrow::before,
html.h2w-reveal body.page-home .h2w-eyebrow[data-h2w-reveal]::before {
  transform: scaleX(0);
}

html.h2w-reveal body.page-home [data-h2w-reveal].is-in .h2w-eyebrow::before,
html.h2w-reveal body.page-home .h2w-eyebrow[data-h2w-reveal].is-in::before {
  transform: scaleX(1);
  transition: transform 0.8s var(--h2w-ease) 0.14s;
}

/* And the index fades up a beat behind the rule that carries it. */
html.h2w-reveal body.page-home [data-h2w-reveal] .h2w-eyebrow::after,
html.h2w-reveal body.page-home .h2w-eyebrow[data-h2w-reveal]::after {
  opacity: 0;
  transform: translate3d(0, 4px, 0);
}

html.h2w-reveal body.page-home [data-h2w-reveal].is-in .h2w-eyebrow::after,
html.h2w-reveal body.page-home .h2w-eyebrow[data-h2w-reveal].is-in::after {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s var(--h2w-ease) 0.26s,
    transform 0.6s var(--h2w-ease) 0.26s;
}

/* ───────────────────────────────────────────────
   17a. MORE OUTLINE
   ─────────────────────────────────────────────── */

/* The outline moves past the section headlines and onto the rest of the
   display type. Two treatments, chosen by ground rather than by element:

   On dark grounds the fill stays white and the ring is brand cyan, exactly
   as the dark section headlines already do.

   On light grounds the relationship is inverted. The fill stays deep navy
   and the ring is cyan, so the letters keep their full contrast against the
   paper and the outline is pure decoration. Filling small light-ground type
   with pale cyan the way the big headlines do would leave the outline
   carrying the legibility on its own, which is a fair bet at four rem and
   a bad one at one and a half.

   paint-order puts the stroke behind the fill, so nothing here thins a
   glyph or closes a counter. */
@supports ((-webkit-text-stroke: 1px #000) and (paint-order: stroke)) {
  body.page-home .h2w-svc-name,
  body.page-home .h2w-svc-all p,
  body.page-home .h2w-area-count b,
  body.page-home .h2w-voices-plate-score,
  body.page-home .h2w-proof-note h3,
  body.page-home .h2w-svc-panel h3,
  body.page-home .h2w-cred-text strong {
    paint-order: stroke fill;
  }

  /* Dark grounds. The credentials line keeps the white fill it already gets
     from the strip and only gains the ring, so it is grouped here even
     though the block it lives in has a light default. */
  body.page-home .h2w-svc-all p,
  body.page-home .h2w-voices-plate-score,
  body.page-home .h2w-strip .h2w-cred-text strong {
    color: #ffffff;
    -webkit-text-stroke: 0.05em var(--h2w-brand);
  }

  /* The town count is the loudest number on the page, so it takes the
     headline treatment outright. */
  body.page-home .h2w-area-count b {
    color: #ffffff;
    -webkit-text-stroke: 0.05em var(--h2w-brand);
  }

  /* Card names sit on photographs rather than on a flat colour, so the ring
     is ink. Cyan would compete with whatever is behind it. */
  body.page-home .h2w-svc-name {
    color: #ffffff;
    -webkit-text-stroke: 0.045em var(--h2w-ink);
  }

  /* Light grounds: navy fill kept, cyan ring added. */
  body.page-home .h2w-proof-note h3,
  body.page-home .h2w-svc-panel h3 {
    color: var(--h2w-harbor);
    -webkit-text-stroke: 0.055em var(--h2w-brand);
  }
}

/* ───────────────────────────────────────────────
   17b. TACTILE FRAMES
   ─────────────────────────────────────────────── */

/* Every framed surface answers the cursor the same way: a short lift, and
   the navy ring warming to brand cyan. One gesture in four places is what
   makes the frame read as a component rather than as four borders. The map
   is deliberately left out — it is a pan surface, and a lift on entry
   would fight the drag. */
body.page-home .h2w-ba,
body.page-home .h2w-rail-item,
body.page-home .h2w-svc,
body.page-home .h2w-owner-figure img,
body.page-home .h2w-owner-video {
  transition:
    transform 0.5s var(--h2w-ease),
    border-color 0.4s var(--h2w-ease),
    box-shadow 0.5s var(--h2w-ease);
}

body.page-home .h2w-ba:hover,
body.page-home .h2w-rail-item:hover,
body.page-home .h2w-svc:hover,
body.page-home .h2w-svc:focus-visible,
body.page-home .h2w-owner-figure:hover img,
body.page-home .h2w-owner-figure:hover .h2w-owner-video {
  transform: translate3d(0, -5px, 0);
  border-color: var(--h2w-brand);
  box-shadow: 0 28px 48px -30px rgba(3, 12, 19, 0.5);
}

/* Press. Small enough to feel like the button took the click rather than
   like the layout moved. */
body.page-home .h2w-btn:active {
  transform: translate3d(0, 0, 0) scale(0.978);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .h2w-hero-copy > *,
  body.page-home .h2w-hero-stage,
  body.page-home .h2w-hero-quote,
  body.page-home .h2w-hero-proof {
    animation: none !important;
  }

  body.page-home .h2w-rail-track,
  body.page-home .h2w-voices-track {
    animation: none !important;
    transform: none !important;
  }

  html.h2w-reveal body.page-home [data-h2w-reveal],
  html.h2w-reveal body.page-home [data-h2w-reveal='rise'],
  html.h2w-reveal body.page-home [data-h2w-reveal='wipe'] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  html.h2w-reveal body.page-home [data-h2w-reveal] .h2w-eyebrow::before,
  html.h2w-reveal body.page-home .h2w-eyebrow[data-h2w-reveal]::before,
  html.h2w-reveal body.page-home [data-h2w-reveal] .h2w-eyebrow::after,
  html.h2w-reveal body.page-home .h2w-eyebrow[data-h2w-reveal]::after {
    opacity: 1;
    transform: none;
  }

  body.page-home .h2w-btn:hover,
  body.page-home .h2w-btn:active,
  body.page-home .h2w-svc:hover .h2w-svc-img,
  body.page-home .h2w-svc-panel:hover,
  body.page-home .h2w-ba:hover,
  body.page-home .h2w-rail-item:hover,
  body.page-home .h2w-svc:hover,
  body.page-home .h2w-svc:focus-visible,
  body.page-home .h2w-owner-figure:hover img,
  body.page-home .h2w-owner-figure:hover .h2w-owner-video {
    transform: none;
  }
}

/* ───────────────────────────────────────────────
   18. PHONES
   ─────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  html:has(body.page-home) {
    scroll-padding-top: 74px;
  }

  body.page-home {
    font-size: 15px;
  }

  body.page-home .h2w-hero-grid {
    padding-block: 34px 44px;
  }

  /* Caps set wider per character than the lowercase settings they
     replaced, so the phone ceilings come down rather than up, and the
     titles that had no phone rule get one. */
  body.page-home .h2w-hero-title {
    font-size: clamp(2.2rem, 10.2vw, 3.1rem) !important;
    line-height: 0.92 !important;
    max-width: 14ch;
  }

  body.page-home .h2w-title {
    font-size: clamp(2.05rem, 9.2vw, 2.8rem) !important;
    line-height: 0.94 !important;
    max-width: 17ch;
  }

  body.page-home .h2w-close-title {
    font-size: clamp(2.15rem, 9.6vw, 2.9rem) !important;
    line-height: 0.94 !important;
    max-width: 14ch;
  }

  /* The stroke is set in em so it scales with the type on its own, but at
     phone sizes a ring this heavy starts closing the counters. */
  body.page-home .h2w-title,
  body.page-home .h2w-hero-title,
  body.page-home .h2w-close-title,
  body.page-home .h2w-svc-name,
  body.page-home .h2w-svc-all p,
  body.page-home .h2w-area-count b,
  body.page-home .h2w-proof-note h3,
  body.page-home .h2w-cred-text strong {
    -webkit-text-stroke-width: 0.045em;
  }

  body.page-home .h2w-hero-lede {
    margin-top: 18px;
    font-size: 0.97rem;
  }

  /* Full-width stacked CTAs — the primary action should never be a
     half-width target on a phone. */
  body.page-home .h2w-hero .h2w-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 380px;
    margin-top: 26px;
  }

  body.page-home .h2w-hero .h2w-btn,
  body.page-home .h2w-close .h2w-btn,
  body.page-home .h2w-voices-foot .h2w-btn {
    width: 100%;
  }

  body.page-home .h2w-close .h2w-actions,
  body.page-home .h2w-voices-foot {
    flex-direction: column;
    align-items: stretch;
    max-width: 380px;
    margin-inline: auto;
  }

  body.page-home .h2w-hero-proof {
    margin-top: 26px;
    padding-top: 22px;
    gap: 12px 16px;
  }

  body.page-home .h2w-hero-proof li {
    font-size: 0.79rem;
  }

  body.page-home .h2w-rail-item {
    width: clamp(140px, 42vw, 176px);
  }

  body.page-home .h2w-svc-grid {
    gap: 10px;
  }

  body.page-home .h2w-svc {
    padding: 18px;
  }

  body.page-home .h2w-svc-num {
    top: 16px;
    left: 18px;
  }

  /* The feature tile keeps its prominence; the rest pair up. */
  body.page-home .h2w-svc:nth-child(1) {
    grid-column: span 2;
    aspect-ratio: 5 / 4;
  }

  body.page-home .h2w-svc:nth-child(1) .h2w-svc-name {
    font-size: 1.5rem !important;
  }

  body.page-home .h2w-svc-desc,
  body.page-home .h2w-svc-go {
    display: none;
  }

  body.page-home .h2w-svc:nth-child(1) .h2w-svc-desc {
    display: block;
  }

  body.page-home .h2w-svc-panel {
    flex-direction: column;
    gap: 16px;
  }

  body.page-home .h2w-proof-lead .h2w-ba .ba-slider,
  body.page-home .h2w-ba .ba-slider {
    aspect-ratio: 4 / 3;
  }

  body.page-home .h2w-voices-track .review-card {
    flex: 0 0 min(83vw, 320px);
    padding: 24px 22px;
  }

  body.page-home .h2w-voices-track .review-text {
    font-size: 0.98rem;
  }

  body.page-home .h2w-owner-figure img,
  body.page-home .h2w-owner-video {
    aspect-ratio: 5 / 4;
  }

  body.page-home .h2w-faq .faq-a {
    padding-right: 8px;
  }

  body.page-home #service-area-map {
    min-height: 300px;
    aspect-ratio: 1 / 1;
  }

  /* Room for the sticky call/quote bar. */
  body.page-home {
    padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 480px) {
  body.page-home .h2w-svc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-home .h2w-svc:nth-child(1) {
    grid-column: auto;
  }

  body.page-home .h2w-svc {
    aspect-ratio: 5 / 4;
  }

  body.page-home .h2w-svc-desc {
    display: block;
  }
}

/* ══════════════════════════════════════════════════════════════════
   19. CREDIBILITY STRIP · QUOTE FLOW · JOURNAL INDEX · PULL QUOTE
   ══════════════════════════════════════════════════════════════════

   Four small components that carry copy the old page kept in hidden
   sections. Each one is a hairline structure rather than a card, so
   they read as part of the same editorial grid as the bands above.
   ══════════════════════════════════════════════════════════════════ */

/* ── Credibility strip ───────────────────────────────────────────── */

body.page-home .h2w-cred {
  background: var(--h2w-paper);
  border-bottom: 1px solid var(--h2w-line);
}

body.page-home .h2w-cred-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-home .h2w-cred-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 8px 18px 0;
  border-top: 1px solid var(--h2w-line-2);
}

body.page-home .h2w-cred-item svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--h2w-verdigris-deep);
}

body.page-home .h2w-cred-text {
  font-family: var(--h2w-sans);
  font-size: 0.815rem;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: 0.005em;
  color: var(--h2w-slate);
}

body.page-home .h2w-cred-text strong {
  display: block;
  font-family: var(--h2w-display);
  font-stretch: var(--h2w-display-wdth);
  text-transform: uppercase;
  font-size: 1.38rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.024em;
  color: var(--h2w-harbor);
  margin-bottom: 3px;
}

@media (min-width: 720px) {
  body.page-home .h2w-cred-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body.page-home .h2w-cred-item {
    border-top: 0;
    border-left: 1px solid var(--h2w-line-2);
    padding: 22px 14px;
  }

  body.page-home .h2w-cred-item:first-child {
    border-left: 0;
    padding-left: 0;
  }

  body.page-home .h2w-cred-item:last-child {
    padding-right: 0;
  }
}

/* ── Pull quote ──────────────────────────────────────────────────── */

body.page-home .h2w-pull {
  margin: clamp(32px, 3.6vw, 48px) 0 0;
  padding: 26px 0 0;
  border-top: 2px solid var(--h2w-verdigris);
}

/* The owner split is the second thing on the page now, so it closes with
   somewhere to go. */
body.page-home .h2w-owner-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(28px, 3.2vw, 38px) 0 0;
}

body.page-home .h2w-pull blockquote {
  margin: 0;
  font-family: var(--h2w-sans);
  font-size: clamp(1.28rem, 2.15vw, 1.62rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.014em;
  color: var(--h2w-harbor);
  max-width: 30ch;
}

body.page-home .h2w-pull blockquote span {
  color: var(--h2w-brand-deep);
}

body.page-home .h2w-pull figcaption {
  margin-top: 14px;
  font-family: var(--h2w-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--h2w-slate-2);
}

@media (max-width: 767.98px) {
  body.page-home .h2w-cred-text {
    font-size: 0.79rem;
  }
}

/* ══════════════════════════════════════════════════════════════════
   20. LEAF TEXT + LOOSE ENDS
   ══════════════════════════════════════════════════════════════════

   mobile-fixes.css sets `body span, body a, body li, body div
   { font-size: 15px }` under 768px. That rule matches the small
   spans nested inside sized parents here and would override the
   inherited size, so each one is pinned back to `inherit`. The rest
   of this block covers markup the sections above reference but did
   not style — the service index list and the owner video.
   ══════════════════════════════════════════════════════════════════ */

body.page-home .h2w-hero-proof li > span,
body.page-home .h2w-faq .faq-q > span,
body.page-home .h2w-voices-plate strong > span,
body.page-home .h2w-btn > span,
body.page-home .h2w-cred-text span,
body.page-home .h2w-area-count > b {
  font-size: inherit;
}

/* ── "Everything we clean" index inside the dark services tile ───── */

body.page-home .h2w-svc-all img {
  width: 56px;
  height: 56px;
  opacity: 0.92;
}

body.page-home .h2w-svc-all ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--h2w-line-dark);
}

body.page-home .h2w-svc-all li {
  border-bottom: 1px solid var(--h2w-line-dark-2);
}

body.page-home .h2w-svc-all a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-family: var(--h2w-sans);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.24s var(--h2w-ease);
}

body.page-home .h2w-svc-all a::after {
  content: "\2192";
  font-size: 0.9rem;
  color: var(--h2w-verdigris);
  transition: transform 0.28s var(--h2w-ease);
}

body.page-home .h2w-svc-all a:hover {
  color: var(--h2w-brand-lite);
}

body.page-home .h2w-svc-all a:hover::after {
  transform: translateX(4px);
}

body.page-home .h2w-svc-all a:focus-visible {
  outline: 3px solid var(--h2w-brand);
  outline-offset: 3px;
}

/* The FAQ question is a real <button>, so strip the UA chrome the
   base rules do not reach. */
body.page-home .h2w-faq .faq-q {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .h2w-svc-all a:hover::after {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   21. HEADER: CROPPING THE WORDMARK, CALMING THE ROW
   ══════════════════════════════════════════════════════════════════

   h2woah_wordmark.png is a 2000x657 canvas whose ink only occupies
   x 379..1624 and y 99..456. That is 1246x358 of actual logo inside
   15.1% top / 18.8% right / 30.4% bottom / 19.0% left of empty alpha,
   so the visible mark is 62.30% of the file's width and 54.49% of its
   height. Setting `height: 46px` on the <img> therefore rendered a
   wordmark about 25px tall, which is why it read as small and hidden.

   The fix is a pure-CSS crop: .brand-header becomes a fixed-size clip
   box and the <img> is blown up inside it and offset so only the ink
   shows. No new image file and no markup change.

     image height = ink height / 0.54490 = ink height * 1.83519
     image width  = image height * 2000/657
     left offset  = -0.18950 * image width
     top offset   = -0.15068 * image height

   Ink aspect is 1246/358 = 3.4804, so ink width = ink height * 3.4804.
   The values below are those formulas evaluated for 32 / 52 / 62px of
   real logo. The phone step is deliberately the smallest of the three:
   the header there is a sticky bar a visitor scrolls past, not a
   masthead, and mobile-fixes.css §"compact phone header" sizes the
   inner pages to the same 32px so every page's bar is one height. */

body.page-home .nav .brand-header {
  position: relative;
  display: block !important;
  flex: 0 0 auto;
  overflow: hidden;
  /* ink 32 x 111.4 */
  width: 111px !important;
  height: 32px !important;
  padding: 0 !important;
  line-height: 0;
}

body.page-home .nav .brand-header img.brand-logo {
  position: absolute;
  top: -8.9px !important;    /* -0.15068 * 58.7 */
  left: -33.9px !important;  /* -0.18950 * 178.8 */
  width: 178.8px !important; /* 32 * 1.83519 * 3.04414 */
  height: 58.7px !important; /* 32 * 1.83519 */
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  transform: none !important;
  object-fit: fill;
}

@media (min-width: 768px) {
  body.page-home .nav .brand-header {
    /* ink 52 x 181.0 */
    width: 181px !important;
    height: 52px !important;
  }

  body.page-home .nav .brand-header img.brand-logo {
    top: -14.4px !important;
    left: -55.1px !important;
    width: 290.5px !important;
    height: 95.4px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  body.page-home .nav .brand-header {
    margin-inline: auto !important;
  }
}

@media (min-width: 1024px) {
  body.page-home .nav .brand-header {
    /* ink 62 x 215.8 */
    width: 216px !important;
    height: 62px !important;
  }

  body.page-home .nav .brand-header img.brand-logo {
    top: -17.1px !important;
    left: -65.6px !important;
    width: 346.4px !important;
    height: 113.8px !important;
  }
}

/* ── One calm header row ─────────────────────────────────────────── */

/* Section 5 already paints the topbar and nav dark and sets their type,
   so this only takes height out of the utility strip and gives the nav
   row the vertical space the bigger wordmark needs. The phone pill in
   .topbar-links keeps its own larger size on purpose. */

body.page-home .topbar {
  padding: 5px 0;
}

body.page-home .topbar-inner {
  min-height: 30px;
}

body.page-home .topbar-rating {
  font-size: 0.815rem;
}

@media (min-width: 1024px) {
  body.page-home .nav {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}

/* The nav CTA gets a little more room at desktop widths on this page only,
   because the cropped wordmark next to it is taller here than the centred
   wordmark row the inner pages use. */
@media (min-width: 1024px) {
  body.page-home .nav .nav-cta .btn {
    padding: 11px 22px !important;
  }
}

/* The taller logo needs a taller anchor offset so in-page jumps do not
   land underneath the sticky header. */
html {
  scroll-padding-top: 124px;
}

@media (max-width: 767.98px) {
  html {
    scroll-padding-top: 88px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   22. HERO VIDEO STAGE
   ══════════════════════════════════════════════════════════════════

   The poster provides a deliberate graceful fallback if playback cannot
   begin, so the stage still looks intentional while preserving the same
   layout and controls. */

body.page-home .h2w-stage-frame--video {
  background: var(--h2w-harbor);
}

body.page-home .h2w-hero-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--h2w-harbor);
}

/* ── Play affordance ─────────────────────────────────────────────── */

body.page-home .h2w-play {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
  padding: 20px clamp(18px, 2.4vw, 26px);
  border: 0;
  background: linear-gradient(
    to top,
    rgba(6, 22, 32, 0.86) 0%,
    rgba(6, 22, 32, 0.72) 22%,
    rgba(6, 22, 32, 0.34) 52%,
    rgba(6, 22, 32, 0.05) 80%,
    rgba(6, 22, 32, 0) 100%
  );
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.3s var(--h2w-ease);
}

body.page-home .h2w-play-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--h2w-brand);
  color: #06202f;
  box-shadow: 0 8px 24px -8px rgba(6, 22, 32, 0.7);
  transition: transform 0.32s var(--h2w-ease);
}

body.page-home .h2w-play-icon svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}

body.page-home .h2w-play-text {
  display: block;
  padding-bottom: 4px;
}

body.page-home .h2w-play-text strong {
  display: block;
  font-family: var(--h2w-display);
  font-stretch: var(--h2w-display-wdth);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: #ffffff;
}

body.page-home .h2w-play-text > span {
  display: block;
  margin-top: 3px;
  font-family: var(--h2w-sans);
  font-size: 0.735rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

body.page-home .h2w-play:hover .h2w-play-icon {
  transform: scale(1.07);
}

body.page-home .h2w-play:focus-visible {
  outline: 3px solid var(--h2w-brand);
  outline-offset: -3px;
}

/* Once playback starts the overlay gets out of the way and the native
   controls take over. Muted autoplay does the same, but keeps its own
   small sound control instead. */
body.page-home [data-h2w-video="playing"] .h2w-play,
body.page-home [data-h2w-video="autoplay"] .h2w-play {
  opacity: 0;
  pointer-events: none;
}

/* ── Sound control for the silent autoplay ───────────────────────── */

body.page-home .h2w-sound {
  position: absolute;
  z-index: 4;
  left: clamp(14px, 1.8vw, 22px);
  bottom: clamp(14px, 1.8vw, 22px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 15px 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(6, 22, 32, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--h2w-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body.page-home .h2w-sound:hover {
  background: rgba(6, 22, 32, 0.88);
  border-color: var(--h2w-brand);
  transform: translateY(-1px);
}

body.page-home .h2w-sound:focus-visible {
  outline: 2px solid var(--h2w-brand);
  outline-offset: 3px;
}

body.page-home .h2w-sound[hidden] {
  display: none;
}

body.page-home .h2w-sound-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--h2w-brand);
}

body.page-home .h2w-sound-icon svg {
  width: 18px;
  height: 18px;
}

/* One icon at a time: crossed-out speaker while muted, waves once on. */
body.page-home .h2w-sound .icon-unmuted,
body.page-home .h2w-sound.is-on .icon-muted {
  display: none;
}

body.page-home .h2w-sound.is-on .icon-unmuted {
  display: block;
}

body.page-home .h2w-sound-text {
  font-size: inherit;
}

/* The native control bar occupies the same corner once it appears. */
body.page-home [data-h2w-video="playing"] .h2w-sound {
  bottom: auto;
  top: clamp(14px, 1.8vw, 22px);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .h2w-sound:hover {
    transform: none;
  }
}

/* ── Unsupported-codec state ─────────────────────────────────────── */

body.page-home .h2w-video-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  margin: 0;
  padding: 16px clamp(18px, 2.4vw, 26px);
  background: linear-gradient(to top, rgba(6, 22, 32, 0.9), rgba(6, 22, 32, 0));
  font-family: var(--h2w-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

body.page-home .h2w-video-note a {
  color: var(--h2w-brand-lite);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-home [data-h2w-video="unsupported"] .h2w-play {
  display: none;
}

body.page-home [data-h2w-video="unsupported"] .h2w-video-note {
  display: block;
}

/* The bottom of the wide band is masked away, so a note down there would
   dissolve with it. It sits at the top of the frame instead. */
@media (min-width: 1000px) {
  body.page-home .h2w-video-note {
    top: 0;
    bottom: auto;
    background: linear-gradient(to bottom, rgba(6, 22, 32, 0.9), rgba(6, 22, 32, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .h2w-play:hover .h2w-play-icon {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   23. RHYTHM AND SIZING PASS
   ══════════════════════════════════════════════════════════════════

   Thirteen bands read as padding rather than substance, so two came
   out of the markup and the rest tighten up. The band scale drops its
   ceiling, the shell narrows slightly, and every measure gets a real
   max-width so no line runs past comfortable reading length. */

body.page-home {
  --h2w-max: 1220px;
  --h2w-band: clamp(66px, 7vw, 112px);
  --h2w-band-tight: clamp(50px, 5.2vw, 78px);
}

body.page-home .h2w-hero-lede {
  max-width: 43ch;
  line-height: 1.62;
}

body.page-home .h2w-title {
  font-size: clamp(1.82rem, 3.3vw, 2.85rem) !important;
  line-height: 1.06 !important;
  max-width: 20ch;
}

body.page-home .h2w-close-title {
  font-size: clamp(2.1rem, 4.6vw, 3.55rem) !important;
}

body.page-home .h2w-lede {
  max-width: 48ch;
  line-height: 1.62;
}

/* Section heads sit closer to the content they introduce. */
body.page-home .h2w-sec-head {
  margin-bottom: clamp(28px, 3vw, 44px);
}

/* ── Merged rail + credibility band ──────────────────────────────── */

body.page-home .h2w-strip .h2w-cred {
  margin-top: clamp(26px, 3vw, 40px);
  padding: 0;
  background: transparent;
  border-top: 1px solid var(--h2w-line-dark-2);
  border-bottom: 0;
}

body.page-home .h2w-strip .h2w-cred-list {
  padding-top: clamp(18px, 2vw, 26px);
}

/* ── Owner portrait replaces the video that moved into the hero ─── */

body.page-home .h2w-owner-figure img {
  object-position: center 22%;
}

/* ── Proof grid: four cards, two up, so nothing sits alone ───────── */

@media (min-width: 640px) {
  body.page-home .h2w-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  body.page-home .h2w-proof-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── Leaf-text guards for the new nodes ─────────────────────────── */

@media (max-width: 767.98px) {
  body.page-home .h2w-play-text > span,
  body.page-home .h2w-video-note,
  body.page-home .h2w-video-note a,

  body.page-home .h2w-play-text > span {
    font-size: 0.7rem;
  }

  body.page-home .h2w-play-icon {
    width: 46px;
    height: 46px;
  }

  body.page-home .h2w-play-icon svg {
    width: 19px;
    height: 19px;
  }
}

/* ── Credibility list, now living on the dark rail ──────────────────
   This list used to sit in its own white band. Merging it into the
   .h2w-strip rail put it on --h2w-ink, so its ink colours have to flip.
   Scoped to .h2w-strip so the light-band version elsewhere is untouched.
   Measured on #061620: white 18.37:1, 0.72 white 9.79:1,
   verdigris #92bab4 8.66:1. The border is a hairline, not text. */

body.page-home .h2w-strip .h2w-cred-item {
  /* Phones divide with border-top, from 768px up with border-left.
     Both have to become the dark-chrome hairline. */
  border-top-color: var(--h2w-line-dark-2);
  border-left-color: var(--h2w-line-dark-2);
}

body.page-home .h2w-strip .h2w-cred-text {
  color: rgba(255, 255, 255, 0.72);
}

body.page-home .h2w-strip .h2w-cred-text strong {
  color: #ffffff;
}

body.page-home .h2w-strip .h2w-cred-item svg {
  color: var(--h2w-verdigris);
}

/* ── Before/after clip layer ─────────────────────────────────────────
   .ba-slider .ba-after is absolutely positioned with no width of its own,
   and the image inside it is absolutely positioned too, so it has no
   in-flow content to size against. Left to shrink-to-fit it collapses to
   zero and the before photo never paints, which reads as two copies of
   the after shot. The inline width and the slider script both set this,
   but declare it here so the layer is never zero-width. */

body.page-home .ba-slider .ba-after {
  width: 100%;
}

/* ───────────────────────────────────────────────
   24. THE FORM IN THE HERO, AND THE FLASH OFFER
   ─────────────────────────────────────────────── */

/* The quote form used to be its own full-width band near the bottom of the
   page, which made five fields read as a whole chapter of work. It sits in
   the hero now, so the video sells and the form is right there when it
   lands. There is no separate quote section any more.

   ── Copy left, video top right, form over the video's bottom corner ────
   NOTE: section 27 moved the video out of the right column and put the form
   there instead. What survives from this block is the column split, the
   copy column's row template, and the flexible track described below. The
   overlap it talks about is gone.

   The form is roughly seven hundred pixels tall, so anything it is stacked
   under or beside ends up much shorter than it. Rather than fight that, it
   overlaps: the video sits at the top of the right column and the form is
   pulled up over its bottom right corner, which takes a chunk of height out
   of the right column and welds the two into one object.

   The left column then spans both rows, and the before-and-after panel in it
   is on a flexible track, so whatever height the headline, the buttons and
   the credentials do not use gets spent on the photograph rather than
   collecting into a hole in the middle. */

@media (min-width: 1000px) {
  body.page-home .h2w-hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    column-gap: clamp(34px, 3.4vw, 54px);
    /* No row gap: the form's own negative margin sets the overlap. */
    row-gap: 0;
    align-items: start;
    padding-inline: max(var(--h2w-gutter), calc((100vw - var(--h2w-max)) / 2));
  }

  /* Full height of the hero. The fourth track is the drag panel, and it is
     the one that flexes: whatever height the label, the headline, the
     buttons and the credentials do not use, it takes. That is what keeps
     the two columns level with no slack pooling anywhere. */
  body.page-home .h2w-hero-copy {
    grid-column: 1;
    /* span 2, not 1 / -1: with no grid-template-rows on the hero grid the
       explicit row grid has a single line, so a negative row line would
       resolve back to it. */
    grid-row: 1 / span 2;
    /* stretch, not the grid's start: the flexible track only has anything
       to take if this column is as tall as the two rows it spans. */
    align-self: stretch;
    display: grid;
    grid-template-rows: auto auto auto minmax(clamp(190px, 20vw, 320px), 1fr) auto;
    row-gap: clamp(20px, 2vw, 28px);
    max-width: none;
    padding-bottom: clamp(8px, 1vw, 16px);
  }

  /* Row gap does this spacing now. */
  body.page-home .h2w-hero-copy .h2w-eyebrow {
    margin-bottom: 0;
  }

  body.page-home .h2w-hero-stage {
    grid-column: 2;
    grid-row: 1;
  }

  /* Up over the bottom right of the frame. Narrower than the column so the
     video is still visible to its left. */
  body.page-home .h2w-hero-quote {
    grid-column: 2;
    grid-row: 2;
    z-index: 4;
    width: min(100%, 28rem);
    margin-top: clamp(-172px, -10.5vw, -108px);
    margin-left: auto;
  }
}

body.page-home .h2w-hero-title {
  font-size: clamp(3.3rem, 7.6vw, 6.6rem) !important;
  max-width: 15ch;
}

/* One line, said loudly, instead of a paragraph nobody finishes. */
body.page-home .h2w-hero-lede {
  margin: 22px 0 0;
  max-width: 24ch;
  font-size: clamp(1.4rem, 2.5vw, 2.05rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.004em;
  color: rgba(255, 255, 255, 0.92);
}

@media (min-width: 1000px) {
  body.page-home .h2w-hero-lede {
    margin-top: 0;
  }
}

body.page-home .h2w-hero .h2w-actions--hero {
  margin-top: 26px;
}

/* The credentials become the floor of the hero, running the full width
   under both columns. The span guard is for the phone stylesheet's
   blanket type rule. */
body.page-home .h2w-hero-proof {
  margin-top: 0;
  padding-top: clamp(20px, 2vw, 28px);
}

/* ── The drag panel under the headline ──────────────────────────────────
   A real job, in the same frame as the video, close enough to the headline
   to be read as the proof of it. It replaces the rating plate that used to
   sit here: the number was already on the page three more times, and a
   photograph of the work does more in the same space. */
body.page-home .h2w-hero-ba {
  min-width: 0;
  /* Stacked under the buttons at this width. The hero grid's row gap takes
     over above 1000px. */
  margin-top: 24px;
}

/* Both photographs are 4:3 of a front elevation, so a crop biased slightly
   above centre keeps the siding and the door and loses lawn. */
body.page-home .h2w-hero-ba img {
  object-position: center 42%;
}

@media (min-width: 1000px) {
  /* Out of flow so the frame can be the height its grid track hands it
     rather than the height of a fixed ratio. Below this width the hero is
     one column with no flexible track, so the slider keeps its own ratio
     and sizes the frame in the normal way. */
  body.page-home .h2w-hero-ba {
    margin-top: 0;
  }

  body.page-home .h2w-hero-ba .ba-slider {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}

@media (min-width: 620px) {
  body.page-home .h2w-hero-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.page-home .h2w-hero-proof li { font-size: 0.96rem; }
body.page-home .h2w-hero-proof li span { font-size: inherit; }
body.page-home .h2w-hero-proof svg { width: 20px; height: 20px; }

/* ── The whole frame, uncropped ─────────────────────────────────────────
   The poster is 1920x1440 and the clip is 1280x720, so no single ratio
   fits both under object-fit: cover. It was cropping a quarter off the
   top and bottom of the poster, which is what Chrome and Firefox show
   because neither can decode the HEVC track.

   The box takes the poster's 4/3 and the fit becomes contain, so the
   poster fills it exactly and the clip letterboxes against the navy
   behind it. Nothing is ever cut off, and the frame is taller than the
   16/9 box it replaces. */
body.page-home .h2w-hero-video {
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

@media (min-width: 1000px) {
  /* Contained now, so the frame gets all four corners back. */
  body.page-home .h2w-stage-frame {
    border-radius: var(--h2w-r-lg);
  }
}

/* Between the phone stack and the two-column desktop the hero is one
   column, where a 4/3 frame at full width would tower over the copy. */
@media (min-width: 620px) and (max-width: 999.98px) {
  body.page-home .h2w-hero-stage {
    max-width: 40rem;
  }
}

/* ── The form card ─────────────────────────────────────────────────────
   Its own grid cell beside the video rather than stacked under it. */
body.page-home .h2w-hero-quote {
  position: relative;
  width: 100%;
  max-width: 33rem;
  margin-top: 0;
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--h2w-paper);
  border: var(--h2w-frame);
  border-radius: var(--h2w-r-lg);
  box-shadow: 0 36px 72px -32px rgba(3, 12, 19, 0.95);
}

body.page-home .h2w-hero-quote-title {
  margin: 0;
  font-family: var(--h2w-display);
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 900;
  font-stretch: var(--h2w-display-wdth);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--h2w-harbor);
}

body.page-home .h2w-hero-quote-note {
  margin: 9px 0 18px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--h2w-slate);
}

/* ── The embed ─────────────────────────────────────────────────────────
   The widget injects its own stylesheet into <head> after this file, so it
   wins at equal specificity. Every override below is three levels deep to
   beat it on specificity rather than on !important. Type, colour and edges
   only; the embed's layout is left alone because that is the part that
   cannot be checked from here. The same rules cover the modal, which every
   other call to action on the page opens. */
body.page-home .h2w-hero-quote .lb-inline-wrap {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--h2w-sans);
}

body.page-home .h2w-hero-quote .lb-inline-header h2,
body.page-home #lb-card .lb-title {
  font-family: var(--h2w-display);
  font-weight: 900;
  font-stretch: var(--h2w-display-wdth);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--h2w-harbor);
}

body.page-home .h2w-hero-quote .lb-field label,
body.page-home #lb-card .lb-field label {
  font-family: var(--h2w-sans);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--h2w-slate);
}

body.page-home .h2w-hero-quote .lb-field input,
body.page-home .h2w-hero-quote .lb-field select,
body.page-home .h2w-hero-quote .lb-field textarea,
body.page-home #lb-card .lb-field input,
body.page-home #lb-card .lb-field select,
body.page-home #lb-card .lb-field textarea {
  font-family: var(--h2w-sans);
  font-size: 15px;
  color: var(--h2w-harbor);
  border-color: var(--h2w-line);
  border-radius: 8px;
}

body.page-home .h2w-hero-quote .lb-field input:focus,
body.page-home .h2w-hero-quote .lb-field select:focus,
body.page-home .h2w-hero-quote .lb-field textarea:focus,
body.page-home #lb-card .lb-field input:focus,
body.page-home #lb-card .lb-field select:focus,
body.page-home #lb-card .lb-field textarea:focus {
  border-color: var(--h2w-brand-deep);
  box-shadow: 0 0 0 3px rgba(31, 200, 255, 0.24);
}

body.page-home .h2w-hero-quote .lb-submit-btn,
body.page-home #lb-card .lb-submit-btn {
  font-family: var(--h2w-display);
  font-size: 0.95rem;
  font-weight: 900;
  font-stretch: 92%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #06202f;
  background: var(--h2w-brand);
  border-radius: 999px;
}

body.page-home .h2w-hero-quote .lb-submit-btn:hover:not(:disabled),
body.page-home #lb-card .lb-submit-btn:hover:not(:disabled) {
  color: #06202f;
  background: var(--h2w-brand-lite);
}

/* ── The flash offer ───────────────────────────────────────────────────
   The offer is no longer written anywhere in the page copy. This card is
   the only place it appears, so it is allowed to be loud: caution tape
   along the top, a pulsing bloom behind the corner, a shine that crosses
   the face, and the number at four times body size.

   It is still deferred rather than shown on load, and home.js reveals it
   once on whichever comes first of a dwell timer, a third of a scroll, or
   the cursor heading for the tab bar. z-index sits above the sticky bar
   (998) and below the embed's own overlay (99999). */

body.page-home .h2w-flash {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9000;
  display: grid;
  gap: 0;
  width: min(23rem, calc(100vw - 40px));
  padding: 30px 26px 24px;
  background: linear-gradient(158deg, var(--h2w-harbor-2) 0%, var(--h2w-ink) 62%);
  border: 2px solid var(--h2w-brand);
  border-radius: var(--h2w-r-lg);
  box-shadow: 0 44px 84px -30px rgba(3, 12, 19, 0.94);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.94);
  transition: opacity 0.45s var(--h2w-ease), transform 0.6s cubic-bezier(0.16, 1.44, 0.36, 1);
}

body.page-home .h2w-flash[hidden] { display: none; }
body.page-home .h2w-flash.is-in { opacity: 1; transform: none; }

body.page-home .h2w-flash-tape,
body.page-home .h2w-flash-glow,
body.page-home .h2w-flash-shine {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Caution tape. The inner strip is translated by exactly one diagonal
   period (20px / cos 45deg) so the loop has no seam. */
body.page-home .h2w-flash-tape {
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  overflow: hidden;
}

body.page-home .h2w-flash-tape::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40px;
  right: -40px;
  background: repeating-linear-gradient(
    135deg,
    var(--h2w-brand) 0 10px,
    #06202f 10px 20px
  );
  animation: h2wFlashTape 1.4s linear infinite;
}

@keyframes h2wFlashTape {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(28.284px, 0, 0); }
}

body.page-home .h2w-flash-glow {
  top: -76px;
  right: -76px;
  width: 216px;
  height: 216px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 200, 255, 0.4), transparent 66%);
  animation: h2wFlashGlow 2.7s ease-in-out infinite;
}

@keyframes h2wFlashGlow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

body.page-home .h2w-flash-shine {
  top: -40%;
  bottom: -40%;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  animation: h2wFlashShine 3.6s var(--h2w-ease) 1s infinite;
}

@keyframes h2wFlashShine {
  0% { transform: skewX(-18deg) translate3d(0, 0, 0); }
  56%, 100% { transform: skewX(-18deg) translate3d(370%, 0, 0); }
}

body.page-home .h2w-flash-tag,
body.page-home .h2w-flash-num,
body.page-home .h2w-flash-head,
body.page-home .h2w-flash-body,
body.page-home .h2w-flash-btn,
body.page-home .h2w-flash-fine {
  position: relative;
  z-index: 1;
}

body.page-home .h2w-flash-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--h2w-sans);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--h2w-brand);
}

body.page-home .h2w-flash-tag-bolt {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  color: #06202f;
  background: var(--h2w-brand);
  border-radius: 50%;
}

body.page-home .h2w-flash-tag-bolt svg { width: 11px; height: 11px; }

body.page-home .h2w-flash-num {
  display: flex;
  align-items: baseline;
  margin: 8px 0 0;
  font-family: var(--h2w-display);
  font-size: clamp(3.4rem, 11vw, 4.5rem);
  font-weight: 900;
  font-stretch: var(--h2w-display-wdth);
  line-height: 0.8;
  letter-spacing: 0.006em;
  color: var(--h2w-brand);
}

body.page-home .h2w-flash-pct { font-size: 0.5em; }

body.page-home .h2w-flash-off {
  margin-left: 0.16em;
  font-size: 0.4em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
}

body.page-home .h2w-flash-head {
  margin: 10px 0 0;
  font-family: var(--h2w-sans);
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.28;
  color: #ffffff;
}

/* Two headline copies live in the markup. The wide one is the full
   sentence; the narrow one is the phone strip's single line, where the
   whole card is about 60px tall and there is room for terms and a
   deadline but not for a sentence. display: none keeps whichever is not
   in use out of the accessibility tree as well as off the screen, so
   neither is read twice. */
body.page-home .h2w-flash-head-narrow { display: none; }

body.page-home .h2w-flash-when {
  color: var(--h2w-brand);
  font-weight: 800;
}

body.page-home .h2w-flash-when::before {
  content: "·";
  margin: 0 0.34em 0 0;
  color: rgba(255, 255, 255, 0.45);
}

body.page-home .h2w-flash-body {
  margin: 8px 0 0;
  font-family: var(--h2w-sans);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* The claim button. A flat fill on a card this loud read as a label
   rather than as the thing to press, so it is lit like a physical
   button: a lift across the fill, a bright top edge, a shadow in the
   brand colour underneath it, and an arrow that leans into the press.
   The ring that leaves the edge is kept -- it is the only element on the
   card that repeats the caution tape's timing. */
body.page-home .h2w-flash-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 14px 27px;
  font-family: var(--h2w-display);
  font-size: 0.92rem;
  font-weight: 900;
  font-stretch: 92%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #04202e;
  background: linear-gradient(150deg, #b7f0ff 0%, var(--h2w-brand) 46%, #05a2dc 100%);
  border-radius: 999px;
  box-shadow: 0 16px 30px -14px rgba(31, 200, 255, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(4, 32, 46, 0.14);
  transition: transform 0.35s var(--h2w-ease), background 0.35s var(--h2w-ease),
    box-shadow 0.35s var(--h2w-ease);
}

body.page-home .h2w-flash-btn-arrow {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform 0.35s var(--h2w-ease);
}

/* A ring that leaves the button rather than a glow sitting on it. */
body.page-home .h2w-flash-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--h2w-brand);
  border-radius: 999px;
  animation: h2wFlashRing 2.1s var(--h2w-ease) infinite;
  pointer-events: none;
}

@keyframes h2wFlashRing {
  0% { opacity: 0.85; transform: scale(1); }
  72%, 100% { opacity: 0; transform: scale(1.3); }
}

body.page-home .h2w-flash-btn:hover,
body.page-home .h2w-flash-btn:focus-visible {
  background: linear-gradient(150deg, #ffffff 0%, var(--h2w-brand-lite) 44%, var(--h2w-brand) 100%);
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 22px 38px -14px rgba(31, 200, 255, 1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.page-home .h2w-flash-btn:hover .h2w-flash-btn-arrow,
body.page-home .h2w-flash-btn:focus-visible .h2w-flash-btn-arrow {
  transform: translate3d(3px, 0, 0);
}

body.page-home .h2w-flash-btn:active {
  transform: translate3d(0, 0, 0) scale(0.98);
  box-shadow: 0 8px 18px -10px rgba(31, 200, 255, 0.9),
    inset 0 2px 4px rgba(4, 32, 46, 0.2);
}

body.page-home .h2w-flash-fine {
  margin: 12px 0 0;
  font-family: var(--h2w-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

/* The way out of the offer. Fill, ring and glyph are all drawn by this
   rule rather than by an SVG inside the button, because the glyph kept
   vanishing on phones: the chip carried a backdrop-filter, and inside a
   parent that is both overflow:hidden and animating a transform, WebKit
   composites the blurred backdrop but drops the element's own children.
   What was left was a grey disc with nothing in it. There is no blur
   here now, and the X is two solid bars, which cannot be dropped the
   same way.

   The disc comes from a radial gradient instead of the box's own
   background and border, which lets the button be a 40px tap target
   while the thing you see stays a 30px chip. */
body.page-home .h2w-flash-close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 4;
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #ffffff;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.2) 0 14px,
    rgba(255, 255, 255, 0.6) 14px 15px,
    transparent 15px);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s var(--h2w-ease), background 0.3s var(--h2w-ease),
    transform 0.15s var(--h2w-ease);
}

/* 15px across each diagonal at 2.6px thick. Heavier than the hairline an
   icon font would give: on a dark fill at arm's length this has to read
   as a cross on the first glance, not as a smudge. */
body.page-home .h2w-flash-close::before,
body.page-home .h2w-flash-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2.6px;
  margin: -1.3px 0 0 -7.5px;
  background: currentColor;
  border-radius: 2px;
}

body.page-home .h2w-flash-close::before { transform: rotate(45deg); }
body.page-home .h2w-flash-close::after { transform: rotate(-45deg); }

body.page-home .h2w-flash-close:hover,
body.page-home .h2w-flash-close:focus-visible {
  color: #04202e;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.95) 0 15px,
    transparent 15px);
}

body.page-home .h2w-flash-close:active { transform: scale(0.92); }

/* The tag line runs under the chip on the narrowest cards. */
body.page-home .h2w-flash-tag { padding-right: 34px; }

/* Belt and braces alongside the class home.js toggles: if the embed's
   modal is open, the offer card is not. */
body.page-home:has(#lb-overlay.lb-open) .h2w-flash {
  opacity: 0;
  pointer-events: none;
}

/* Same for the mobile menu. The strip sits at z-index 9000 and the drawer
   at 999, so without this the offer floats over an open menu. */
body.page-home.nav-open .h2w-flash {
  opacity: 0;
  pointer-events: none;
}

/* ── Phones ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  body.page-home .h2w-hero-lede {
    max-width: none;
    font-size: 1.45rem;
  }

  body.page-home .h2w-hero-proof li { font-size: 0.86rem; }

  body.page-home .h2w-hero-quote {
    max-width: none;
  }

  /* The offer docks above the sticky bar as a strip. A floating card on a
     375px screen covers the thing it is trying to sell.

     The strip used to stack three rows of copy and ran a little over
     100px tall, which on a phone is a fifth of the viewport parked over
     the page for the length of the visit. Everything now sits on one
     line -- number, terms, button, dismiss -- which takes roughly 40%
     off the height, and the space that buys goes into the number: it
     spans the full height of the strip and is the first thing read.

     The dismiss chip is a grid item here rather than a corner overlay.
     Absolutely positioned in the corner of a strip this short it landed
     on top of the claim button, so it takes its own column at the end
     with a gap wide enough that a thumb aiming for Claim does not find
     it instead.

     The bar is 57px of buttons plus whatever the home indicator claims,
     so the clearance is measured rather than guessed: at 62px flat the
     strip sat on the bar on any iPhone with a safe-area inset. */
  body.page-home .h2w-flash {
    left: 8px;
    right: 8px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: auto;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "num copy cta close";
    align-items: center;
    column-gap: 9px;
    row-gap: 0;
    padding: 11px 10px 11px 13px;
    border-radius: var(--h2w-r);
  }

  /* Flashy on purpose: once the strip is in, the border breathes so it
     reads as an offer rather than as another band of page furniture.
     Paired with the tape, the bloom and the ring on the button, this is
     the loudest thing on a phone screen -- which is the point of it. */
  body.page-home .h2w-flash.is-in {
    animation: h2wFlashPop 0.62s cubic-bezier(0.16, 1.44, 0.36, 1),
      h2wFlashEdge 2.2s var(--h2w-ease) 0.62s infinite;
  }

  @keyframes h2wFlashPop {
    0% { transform: translate3d(0, 26px, 0) scale(0.96); }
    62% { transform: translate3d(0, -4px, 0) scale(1.015); }
    100% { transform: none; }
  }

  @keyframes h2wFlashEdge {
    0%, 100% {
      border-color: var(--h2w-brand);
      box-shadow: 0 26px 54px -22px rgba(3, 12, 19, 0.94);
    }
    50% {
      border-color: #ffffff;
      box-shadow: 0 26px 54px -22px rgba(3, 12, 19, 0.94),
        0 0 0 3px rgba(31, 200, 255, 0.34);
    }
  }

  /* The eyebrow, the long sentence and the end date are all folded into
     the one line the strip has room for. */
  body.page-home .h2w-flash-tag,
  body.page-home .h2w-flash-body,
  body.page-home .h2w-flash-fine { display: none; }

  body.page-home .h2w-flash-num {
    grid-area: num;
    margin: 0;
    font-size: 3.2rem;
    line-height: 0.76;
  }

  body.page-home .h2w-flash-off { font-size: 0.36em; }

  body.page-home .h2w-flash-head {
    grid-area: copy;
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.26;
    color: rgba(255, 255, 255, 0.86);
  }

  body.page-home .h2w-flash-head-wide { display: none; }
  body.page-home .h2w-flash-head-narrow { display: inline; }

  body.page-home .h2w-flash-btn {
    grid-area: cta;
    justify-self: end;
    gap: 6px;
    margin-top: 0;
    padding: 12px 14px;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
  }

  body.page-home .h2w-flash-btn-arrow { width: 12px; height: 12px; }

  body.page-home .h2w-flash-glow { top: -108px; right: -92px; }

  /* Out of the corner and into the row, at the far end of it. A black
     disc was the one thing on the strip people read as damage rather
     than as a control, so the chip stays a light ring on a dark strip
     with a solid white X inside it.

     30px is the drawn chip; the box around it is 36 x 44 and the
     negative margins pull the layout footprint back to the chip, so the
     extra tap area is taken out of the strip's own right padding and the
     space above and below the row rather than out of the gap in front of
     the claim button. */
  body.page-home .h2w-flash-close {
    position: relative;
    top: auto;
    right: auto;
    grid-area: close;
    width: 36px;
    height: 44px;
    margin: -7px -6px -7px 0;
    background: radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.22) 0 14px,
      rgba(255, 255, 255, 0.66) 14px 15px,
      transparent 15px);
  }
}

/* ── The narrowest phones ───────────────────────────────────────────────
   At 320px the four columns are fighting for about 280px. The number
   gives up a little size and the terms are allowed to wrap onto a third
   line, which still fits inside the height the button already sets. */
@media (max-width: 359.98px) {
  body.page-home .h2w-flash {
    column-gap: 7px;
    padding: 10px 8px 10px 10px;
  }

  body.page-home .h2w-flash-num { font-size: 2.7rem; }
  body.page-home .h2w-flash-head { font-size: 0.65rem; }

  body.page-home .h2w-flash-btn {
    padding: 11px 12px;
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .h2w-flash {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.page-home .h2w-flash.is-in { animation: none; }
  body.page-home .h2w-flash-tape::before,
  body.page-home .h2w-flash-glow,
  body.page-home .h2w-flash-shine,
  body.page-home .h2w-flash-btn::after {
    animation: none;
  }
  body.page-home .h2w-flash-shine { opacity: 0; }
  body.page-home .h2w-flash-btn:hover,
  body.page-home .h2w-flash-btn:focus-visible { transform: none; }
  body.page-home .h2w-flash-btn-arrow,
  body.page-home .h2w-flash-btn:hover .h2w-flash-btn-arrow,
  body.page-home .h2w-flash-btn:focus-visible .h2w-flash-btn-arrow {
    transform: none;
    transition: none;
  }
  body.page-home .h2w-flash-btn:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   25. THE PHONE PASS
   ══════════════════════════════════════════════════════════════════

   Everything above this line was drawn for a wide screen and then
   trimmed down for a narrow one. This block does the opposite: it
   decides what a phone needs and takes the rest away. Three ideas
   drive it.

   1. The video and the form come first. On a phone the hero is a
      scroll, not a composition, so the two things that actually
      convert -- the owner's face and the five fields -- sit above
      everything that only describes them. .h2w-hero-copy becomes
      display: contents so its children are grid items of the hero
      itself and can be ordered against the video and the form.

   2. One call to action per band. The sticky bar at the bottom of the
      viewport already carries Free Quote, Call and Text at every
      scroll position, so a stacked pair of full-width buttons inside
      a band is two buttons competing with three that never leave.
      Each band keeps the one action the bar does not offer.

   3. Less repeated copy. Six before/after sliders, two "nothing
      stock" lines and the same rating in four places is a desktop
      luxury; on a phone it is scroll depth between a visitor and the
      form. Nothing removed here is unique to this page -- every
      slider lives in /gallery and every quote in /reviews.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ── Band rhythm ───────────────────────────────────────────────────
     66px of air above and below nine bands is close to two screens of
     nothing. Tighter, and the tight variant tighter again, so the page
     still breathes at the seams without pausing at every one. */
  body.page-home {
    --h2w-band: 46px;
    --h2w-band-tight: 34px;
  }

  /* ── Hero: headline, video, form, credentials ──────────────────────
     display: contents dissolves the copy column so the eyebrow, the
     headline and the say-it line become siblings of the video frame
     and the form card, and order can interleave them. Row gap goes to
     zero because each item sets the space it wants underneath itself;
     one gap value cannot serve both a label and a video frame. */
  body.page-home .h2w-hero-grid {
    row-gap: 0;
    padding-block: 20px 30px;
  }

  body.page-home .h2w-hero-copy {
    display: contents;
  }

  body.page-home .h2w-hero-copy > .h2w-eyebrow {
    order: 1;
    margin: 0 0 12px;
  }

  body.page-home .h2w-hero-title {
    order: 2;
    margin: 0;
  }

  body.page-home .h2w-hero-say {
    order: 3;
  }

  body.page-home .h2w-hero-stage {
    order: 4;
    margin-top: 20px;
  }

  body.page-home .h2w-hero-quote {
    order: 5;
    margin-top: 16px;
  }

  body.page-home .h2w-hero-proof {
    order: 6;
    margin-top: 22px;
  }

  /* The entrance stagger followed DOM order, which is no longer the
     order things appear in. Re-timed to run down the screen. */
  body.page-home .h2w-hero-stage { animation-delay: 0.24s; }
  body.page-home .h2w-hero-quote { animation-delay: 0.32s; }
  body.page-home .h2w-hero-proof { animation-delay: 0.4s; }

  /* The hero's own drag panel goes. It was proof of the headline on a
     wide screen where it sat beside the copy for free; on a phone it is
     280px of the same argument the proof band makes five more times,
     and it sits exactly where the video should be. */
  body.page-home .h2w-hero-ba {
    display: none;
  }

  body.page-home .h2w-hero-lede {
    margin: 14px 0 0;
    font-size: 1.28rem;
    line-height: 1.24;
    color: rgba(255, 255, 255, 0.94);
  }

  /* ── The form card ─────────────────────────────────────────────────
     A cyan cap across the top so the eye reads video-then-form as one
     move rather than two unrelated boxes. */
  body.page-home .h2w-hero-quote {
    border-top: 3px solid var(--h2w-brand);
    box-shadow: 0 24px 48px -24px rgba(3, 12, 19, 0.9);
    /* Every Free Quote link on the page points at this card. When the
       embed's modal is unavailable the link falls back to a plain anchor
       jump, and without this the card lands under the sticky header. */
    scroll-margin-top: 64px;
  }

  body.page-home .h2w-hero-quote-note {
    margin: 7px 0 14px;
    font-size: 0.85rem;
  }

  /* ── Credentials as one line of small print ────────────────────────
     A two-column grid of three items leaves an orphan. Inline and
     wrapping, they read as a single caption under the form. */
  body.page-home .h2w-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    padding-top: 18px;
  }

  body.page-home .h2w-hero-proof li {
    font-size: 0.76rem;
    align-items: center;
    gap: 7px;
  }

  body.page-home .h2w-hero-proof svg {
    width: 15px;
    height: 15px;
    margin-top: 0;
  }

  /* ── Copy that only earns its width on a desktop ───────────────────
     Tails of sentences that add rhythm on a 1400px line and add a wrapped
     line on a 375px one. The sentence still reads without them. */
  body.page-home .h2w-wide-only {
    display: none;
  }

  /* The caption under the video repeats the play button sitting on top of
     it, which already says Meet Jackson, owner, 13 seconds. */
  body.page-home .h2w-video-note {
    display: none;
  }

  /* ── Owner band ────────────────────────────────────────────────────
     The pull quote goes: the reviews band two sections down is forty
     of them, and one CTA is enough when Call is permanently docked. */
  body.page-home .h2w-owner .h2w-pull {
    display: none;
  }

  body.page-home .h2w-owner-cta .h2w-btn--outline {
    display: none;
  }

  /* Three numbered headings are the argument. The paragraph under each one
     restates it in three more lines, which is most of a screen for no new
     information. Without the paragraph the row is one line, so the numeral
     stops spanning two of them and the rows close up. */
  body.page-home .h2w-steps li p {
    display: none;
  }

  body.page-home .h2w-steps li {
    padding: 15px 0;
    align-items: baseline;
  }

  body.page-home .h2w-steps li::before {
    grid-row: span 1;
  }

  /* ── Services: a mosaic, not a column ──────────────────────────────
     Seven cards one-up is 2000px of scroll. Two-up with the first as a
     wide feature is the same seven services in a third of the height,
     and the pairing is what makes it look composed. */
  body.page-home .h2w-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-home .h2w-svc:nth-child(1) {
    grid-column: span 2;
    aspect-ratio: 5 / 4;
  }

  body.page-home .h2w-svc:nth-child(n + 2) {
    aspect-ratio: 1 / 1;
    padding: 15px;
  }

  /* The tiles are about 165px across, and the full display size wraps
     "Driveway & Walkway" into the photograph. */
  body.page-home .h2w-svc:nth-child(n + 2) .h2w-svc-name {
    font-size: 1.06rem !important;
    line-height: 1.02 !important;
  }

  body.page-home .h2w-svc:nth-child(n + 2) .h2w-svc-desc {
    display: none;
  }

  body.page-home .h2w-svc:nth-child(n + 2) .h2w-svc-num {
    top: 13px;
    left: 15px;
  }

  /* ── Proof: three sliders, not five ────────────────────────────────
     Each one is a 4:3 photograph plus a caption, so the last two cost
     700px to repeat an argument already made twice. The gallery link at
     the foot of the band is where the rest of them live. */
  body.page-home .h2w-proof-grid .h2w-ba:nth-child(n + 3) {
    display: none;
  }

  /* The lede above it already says same house, same angle, one wash
     apart, which is the same promise in fewer words. */
  body.page-home .h2w-proof-copy .h2w-proof-note {
    display: none;
  }

  /* Two links at the foot of this band go to the gallery. The button
     above them is the third. */
  body.page-home .h2w-proof-copy .h2w-btn {
    display: none;
  }

  /* ── Reviews ───────────────────────────────────────────────────────
     The plate above the rail already names the rating and the count, so
     one way through to the reviews is enough. */
  body.page-home .h2w-voices-foot .h2w-btn--dark {
    display: none;
  }

  /* A four hundred character review in a swipe rail makes the card taller
     than the phone. Five lines is enough to tell it is a real person
     describing a real job, and /reviews has all forty in full. */
  body.page-home .h2w-voices .review-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Service area ──────────────────────────────────────────────────
     The count line and eighteen town pills say where we work. The
     paragraph between them says it again in prose, and the quote button
     is the form the visitor already scrolled past at the top. */
  body.page-home .h2w-area .h2w-lede {
    display: none;
  }

  body.page-home .h2w-area-cta .h2w-btn--solid {
    display: none;
  }

  /* ── FAQ: five, as the line above it promises ──────────────────────
     There are six in the markup and the lede says five. On a phone the
     sixth is a seasonal timing question that the closing band answers
     anyway, and More FAQs sits directly above the list. */
  body.page-home .h2w-faq .faq-item:nth-of-type(n + 6) {
    display: none;
  }

  /* ── Closing band ──────────────────────────────────────────────────
     One button, and it is the one the sticky bar does not repeat as a
     word: the form. Call and Text are 60px below it already. */
  body.page-home .h2w-close .h2w-actions .h2w-btn--ghost {
    display: none;
  }

  body.page-home .h2w-close-fine {
    gap: 6px 14px;
    font-size: 0.68rem;
  }

  /* ══ A shorter road to the form ═══════════════════════════════════════
     Everything below this point is a whole module removed rather than a
     line trimmed. A desktop visitor can take in a wide band at a glance
     and skip it; a phone visitor has to scroll through every one of them,
     and each module between the hero and the form is another chance to
     leave. What survives is the argument in its shortest honest form:
     who we are, what we clean, proof it worked, what neighbours said,
     where we work, the objections, the ask.

     ── The camera roll rail ────────────────────────────────────────────
     Three separate photo modules make the same case on this page: this
     rail, the service tiles, and the drag-to-compare sliders. The
     sliders win it -- a before beside an after is the argument, and it
     is the one thing here a visitor plays with. So the rail goes, and
     with it thirty-two lazy images that a phone would otherwise pull
     over cell data on the way down the page.

     The section it lives in keeps its credibility row, which is the
     rating, the review count and the territory. Its dark padding has to
     go with the rail or the light row ends up framed in a band of ink
     that has nothing left in it. */
  body.page-home .h2w-strip {
    padding-block: 0;
  }

  body.page-home .h2w-strip-head,
  body.page-home .h2w-rail {
    display: none;
  }

  /* ── The row under the service tiles ────────────────────────────────
     A commercial panel and a three-link "your woah starts here" box. The
     panel sells storefronts and dumpster pads to someone who arrived on
     a phone looking at their own house, and the box is a second, smaller
     services menu directly beneath the seven tiles that are the services
     menu. Both are a tap away from the footer and from Commercial in the
     menu, so neither has to sit in the middle of the page. */
  body.page-home .h2w-svc-foot {
    display: none;
  }

  /* ── The town pills ────────────────────────────────────────────────
     Eighteen of them in two labelled groups is a wall of links in the
     middle of a band whose job is one sentence: we come to your town.
     The counter above says eighteen, the map below has a dot for each
     one, and See all 18 pages is still under it. Every link is still in
     the page for a crawler and in the footer for a visitor who wants the
     list. */
  body.page-home .h2w-town-groups {
    display: none;
  }
}

/* Below 480px the services grid used to drop to a single column, which
   is the 2000px scroll the mosaic above exists to avoid. */
@media (max-width: 480px) {
  body.page-home .h2w-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.page-home .h2w-svc:nth-child(1) {
    grid-column: span 2;
  }

  body.page-home .h2w-svc:nth-child(n + 2) .h2w-svc-desc {
    display: none;
  }
}

/* ── The video, edge to edge, on phones only ──────────────────────────
   Full bleed past the gutter with square sides. The clip is 16:9 inside
   a 4:3 frame, so the navy above and below it is a letterbox rather than
   a mistake, and the widest possible frame is what makes it read that
   way. A brand hairline top and bottom keeps the frame from dissolving
   into the hero behind it.

   Under 620px only: above that the stage is already capped at 40rem, and
   a 4:3 frame the full width of a 768px tablet is 575px tall, which puts
   the form back under the fold that this whole pass exists to clear. */
@media (max-width: 619.98px) {
  body.page-home .h2w-hero-stage .h2w-stage-frame--video {
    margin-inline: calc(var(--h2w-gutter) * -1);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top-color: rgba(31, 200, 255, 0.5);
    border-bottom-color: rgba(31, 200, 255, 0.5);
    box-shadow: 0 26px 50px -26px rgba(3, 12, 19, 0.9);
  }
}

/* Between the phone and the desktop split, the video column is capped at
   40rem, so the form is capped with it rather than running wider than the
   thing it is attached to. */
@media (min-width: 620px) and (max-width: 767.98px) {
  body.page-home .h2w-hero-quote {
    max-width: 40rem;
  }
}

/* ── The credibility strip, where it is two-up ────────────────────────
   Scoped under 720px because that is where the five items sit in two
   columns and leave an orphan. Two of the five -- fully insured, owner
   on site -- are the same two the hero already puts under the form, so
   what is left is the two numbers and the territory, and the territory
   takes the full width rather than sitting alone in a half. */
@media (max-width: 719.98px) {
  body.page-home .h2w-strip .h2w-cred-item:nth-child(3),
  body.page-home .h2w-strip .h2w-cred-item:nth-child(4) {
    display: none;
  }

  body.page-home .h2w-strip .h2w-cred-item:last-child {
    grid-column: span 2;
  }
}

/* ══════════════════════════════════════════════════════════════════
   26. THE PHONE HERO, SAID ONCE

   Section 25 put the video and the form at the top of the phone hero
   and dropped the duplicate buttons. What was left above them still
   said the same thing three ways: the headline, a restatement of what
   washing removes, and a row of icon-and-caption badges under the
   form — badges whose claims come round again in the credibility strip
   directly under the hero.

   So the phone hero is now the eyebrow, the headline, the video and
   the form, and the repeated lines are dropped from the phone view
   only. The desktop hero, where the badges sit on one hairline beside
   the video and cost nothing, is untouched.

   What replaces the lost copy is a photograph: a just-washed
   ranch with a standing-seam roof behind the headline, fading into the
   harbor navy before the video starts. It is one of our own jobs, not
   a stock library house, which is the same promise the before-and-after
   sliders make further down the page.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  /* The atmosphere radials become the photo band: pinned to the top of
     the hero rather than stretched over all of it, so the crop stays a
     house instead of a zoomed corner of siding, and so it ends where
     the video frame begins. The gradient is the first background layer,
     so it sits over the photo and carries the white headline; it holds
     near 0.58 across the roofline, then ramps from 76% down so the lawn
     dissolves rather than stopping, and it is solid harbor navy by 94%
     — the last band of the photo is gone before the edge, so the seam
     into the section behind it cannot be found.

     Served through the Image CDN: 860 wide covers a 430px logical phone
     at 2x, while the tall 860x1100 delivery turns the supplied landscape
     photo into a phone-friendly portrait crop centered on the house.
     It is preloaded in the document head at the same URL because a CSS
     background is not discoverable until the stylesheet has parsed. */
  body.page-home .h2w-hero::before {
    inset: 0 0 auto;
    height: clamp(460px, 128vw, 620px);
    background-image:
      linear-gradient(
        180deg,
        rgba(4, 18, 30, 0.5) 0%,
        rgba(4, 18, 30, 0.5) 34%,
        rgba(6, 24, 38, 0.62) 58%,
        rgba(8, 29, 44, 0.84) 78%,
        rgba(11, 35, 51, 0.97) 91%,
        var(--h2w-harbor) 97%,
        var(--h2w-harbor) 100%
      ),
      url("/.netlify/images?url=%2Fassets%2Fimages%2Fhome-hero-mobile-house-enhanced.jpeg&w=860&h=1100&fit=cover&position=center&q=78");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }

  /* The hairline columns were drafting texture for a flat navy band.
     Over a photograph they are noise. */
  body.page-home .h2w-hero::after {
    display: none;
  }

  /* Type over a photograph rather than over flat navy. The headline
     already carries a navy ring, so it only needs a soft drop to stop a
     bright patch of sky reading through the counters. The eyebrow is
     11px of sage at 0.2em: against navy that was 7.6:1, against the
     scrimmed sky it would be 3.7:1, so on phones it goes near-white and
     takes a shadow of its own. */
  body.page-home .h2w-hero-title {
    text-shadow: 0 2px 20px rgba(3, 14, 24, 0.55);
  }

  body.page-home .h2w-hero .h2w-eyebrow {
    color: #dcece9;
    text-shadow: 0 1px 12px rgba(3, 14, 24, 0.72);
  }

  /* The headline already carries the message, so the smaller tagline is
     hidden here and the photo can speak without another line over it. */
  body.page-home .h2w-hero-lede {
    display: none;
  }

  /* Fully insured / Jackson on every job / 48 hour redo promise, at
     0.76rem beside 15px icons, directly under the form. The owner band
     and the reviews make all three points in type worth reading. */
  body.page-home .h2w-hero-proof {
    display: none;
  }

  /* And the five-item strip under the camera roll repeats the rating
     that the white bar at the very top of the page opens with. */
  body.page-home .h2w-strip .h2w-cred {
    display: none;
  }

  /* The sticky bar is 47px now rather than 52, so an in-page jump lands
     11px under it instead of 30. */
  html:has(body.page-home) {
    scroll-padding-top: 58px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   26. THE HERO PHOTOGRAPH ON A WIDE SCREEN
   ══════════════════════════════════════════════════════════════════
   Section 25 put a photograph behind the headline, but it put it inside
   a max-width: 767.98px query, so it was only ever a phone treatment.
   On a desktop the same hero opened on flat navy: the headline, the
   video card and the form all sat on the atmosphere radials and nothing
   in the top half of the page was a house. The photograph is the first
   thing that says what the company does, and it was missing from the
   view most visitors arrive on.

   So the band comes to wide screens too. The frame is a ranch with a
   standing-seam roof that runs nearly the full width of the shot, which
   is why it works here and the old portrait crop did not — its natural
   ratio is 2.11:1, so at a height of 47.3vw it lands full-bleed with no
   crop at all, edge to edge, at every width in this range.

   Type sits over its left half and the video card covers its right, so
   the run of the roofline reads behind the headline and the house is
   never fighting the card for the same pixels. The scrim holds light
   across the roof, then ramps from 76% down so the lawn dissolves into
   the harbor navy and is gone by 96% — the band ends before the edge
   does, so there is no seam where the photograph stops and the rest of
   the hero starts. ══════════════════════════════════════════════════ */

@media (min-width: 768px) {
  /* Named because section 27 needs the same number: the form is offset to
     half of it, so if the band height ever changes the offset follows. */
  body.page-home .h2w-hero {
    --h2w-hero-photo: clamp(430px, 47.3vw, 900px);
  }

  body.page-home .h2w-hero::before {
    inset: 0 0 auto;
    height: var(--h2w-hero-photo);
    background-image:
      linear-gradient(
        180deg,
        rgba(4, 18, 30, 0.4) 0%,
        rgba(4, 18, 30, 0.4) 28%,
        rgba(5, 21, 34, 0.54) 55%,
        rgba(8, 29, 44, 0.82) 76%,
        rgba(11, 35, 51, 0.97) 90%,
        var(--h2w-harbor) 96%,
        var(--h2w-harbor) 100%
      ),
      url("/.netlify/images?url=%2Fassets%2Fimages%2Fhome-hero-ranch-wide.jpeg&w=1920&h=908&fit=cover&position=top&q=62");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }

  /* The hairline columns were texture for flat navy. Over a photograph
     they are noise, which is the same call section 25 made on phones. */
  body.page-home .h2w-hero::after {
    display: none;
  }

  /* Same reckoning as section 25, run again for the desktop crop. The
     headline and the lede sit over the scrimmed roof and clear AA with
     room to spare (9.3:1 and 15.5:1 at 1440), so they only want a soft
     drop to keep a bright shingle out of the counters. The eyebrow is
     the one line that does not survive the move: 11px of sage at 0.2em
     measured 2.9:1 against the sky in this crop where flat navy gave it
     7.6:1. Near-white takes it to 4.9:1 over the same pixels. */
  body.page-home .h2w-hero-title {
    text-shadow: 0 2px 20px rgba(3, 14, 24, 0.5);
  }

  body.page-home .h2w-hero .h2w-eyebrow {
    color: #dcece9;
    text-shadow: 0 1px 12px rgba(3, 14, 24, 0.7);
  }
}

/* ══════════════════════════════════════════════════════════════════
   27. THE WIDE HERO, REARRANGED AROUND THE PHOTOGRAPH
   ══════════════════════════════════════════════════════════════════

   Section 26 put a photograph of a washed ranch across the top of the
   hero, and the arrangement it inherited was drawn for flat navy. Two
   things were wrong once there was a house behind it.

   The video sat in the top right corner, which is exactly where the
   roofline is. The one thing the photograph is there to show was under
   the one card that could not be seen through. So the video comes out
   of the columns entirely and becomes a band across the bottom of the
   hero, the full width of the grid, and its lower edge is masked away
   so the picture dissolves into the navy instead of stopping at a
   bordered rectangle a few pixels above the next section.

   That leaves the right side of the photograph empty, and the form is
   what fills it. It starts at half the height of the photo band and
   runs down across the bottom edge, so it is standing on the lawn
   rather than floating on navy underneath it, and the top half of the
   picture -- sky, roof, the headline -- is clear.

   The before-and-after panel stays where it was, in the copy column
   under the buttons, on the flexible track. That track is the whole
   trick: the form beside it is around seven hundred pixels tall and
   nothing else in the column comes close, so the slack has to go
   somewhere. On the flexible track it goes into the photograph, and
   the column fills to the form's depth instead of leaving a hole
   between the buttons and the credentials line.
   ═══════════════════════════════════════════ */

@media (min-width: 1000px) {
  body.page-home .h2w-hero-grid {
    /* Row 1 is the copy and the form, row 2 is the video band, and the
       row gap is doing real spacing again now that nothing overlaps. */
    row-gap: clamp(30px, 3vw, 46px);
    align-items: start;
  }

  body.page-home .h2w-hero-copy {
    grid-column: 1;
    /* One row now: the video is no longer beside this column, so there
       is nothing to span. */
    grid-row: 1;
    /* Stretch so the flexible track has height to hand out. */
    align-self: stretch;
    padding-bottom: 0;
  }

  /* Half way down the photograph, running to its bottom edge and past
     it. The offset is the band's own height, halved, less the grid's
     top padding, because the band is measured from the top of the hero
     and this margin from the top of the grid's content box.

     Full column width, not the 33rem it used to be capped at. That cap
     existed to keep the video visible to the left of the form while the
     two overlapped, and the video is not there any more. */
  body.page-home .h2w-hero-quote {
    grid-column: 2;
    grid-row: 1;
    margin-top: calc(var(--h2w-hero-photo) / 2 - clamp(48px, 6vw, 92px));
    width: 100%;
    max-width: none;
  }

  /* ── The video band ───────────────────────────────────────────────
     Across both columns, the full width of the grid so its edges line
     up with the copy on the left and the form on the right, and 2:1
     rather than the poster's own 4:3: a frame nine hundred pixels tall
     at this width would be a second hero. Two to one is wide enough to
     read as a band and still deep enough to hold Jackson and the
     truck, and the crop is biased low because the top third of that
     photograph is sky and chain-link fence.

     No border, no radius, no shadow. All three would draw the hard
     edge the mask exists to remove. */
  body.page-home .h2w-hero-stage {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }

  body.page-home .h2w-hero-stage .h2w-stage-frame--video {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.page-home .h2w-hero-video {
    aspect-ratio: 2 / 1;
    height: auto;
    object-fit: cover;
    object-position: center 78%;
    /* The last two fifths of the height falls away to nothing, which is
       the hero's navy, which is the same colour the frame is painted.
       The picture ends without an edge. The last stop is very nearly
       transparent well before the bottom, because a gradient that is
       still eight percent visible at the final pixel snaps, and a snap
       is the line this is here to avoid. */
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 60%,
      rgba(0, 0, 0, 0.55) 82%,
      rgba(0, 0, 0, 0.06) 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 60%,
      rgba(0, 0, 0, 0.55) 82%,
      rgba(0, 0, 0, 0.06) 95%,
      transparent 100%
    );
  }

  /* Lifted clear of the faded band so the label is not dissolving along
     with the picture behind it. Percentage padding resolves against the
     frame's width and the frame is twice as wide as it is tall, so
     twenty-one percent of the width is forty-two percent of the height,
     which lands the text just above where the mask starts to bite. */
  body.page-home .h2w-hero-stage .h2w-play {
    padding-bottom: 21%;
    background: linear-gradient(
      to top,
      rgba(6, 22, 32, 0) 0%,
      rgba(6, 22, 32, 0.34) 26%,
      rgba(6, 22, 32, 0.58) 40%,
      rgba(6, 22, 32, 0.3) 62%,
      rgba(6, 22, 32, 0.04) 84%,
      rgba(6, 22, 32, 0) 100%
    );
  }

  body.page-home .h2w-hero-stage .h2w-sound {
    bottom: 21%;
  }
}

/* ══════════════════════════════════════════════════════════════════
   28. ROUNDED BRAND DISPLAY TYPE
   ══════════════════════════════════════════════════════════════════ */

body.page-home {
  font-synthesis: none;
}

body.page-home .h2w-title,
body.page-home .h2w-hero-title,
body.page-home .h2w-close-title {
  font-family: var(--h2w-display) !important;
  font-weight: 400 !important;
  font-stretch: normal;
  line-height: 0.96 !important;
  letter-spacing: -0.018em !important;
  text-transform: none;
}

body.page-home .h2w-title {
  color: var(--h2w-harbor) !important;
  -webkit-text-stroke: 0.018em var(--h2w-harbor) !important;
  text-shadow: 0.055em 0.06em 0 var(--h2w-brand-lite);
}

body.page-home .h2w-band--dark .h2w-title,
body.page-home .h2w-band--ink .h2w-title {
  color: #ffffff !important;
  -webkit-text-stroke: 0.014em #ffffff !important;
  text-shadow:
    0.06em 0.065em 0 var(--h2w-brand-deep),
    0 0.16em 0.34em rgba(0, 0, 0, 0.28);
}

body.page-home .h2w-hero-title,
body.page-home .h2w-close-title {
  color: #ffffff;
  -webkit-text-stroke: 0.018em var(--h2w-harbor) !important;
  text-shadow:
    0.055em 0.065em 0 var(--h2w-brand-deep),
    0 0.16em 0.38em rgba(6, 22, 32, 0.42);
}

body.page-home .h2w-hero-title {
  max-width: 17ch;
  font-size: clamp(2.4rem, 4.7vw, 4.35rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0.003em !important;
}

body.page-home .h2w-hero-title .h2w-woah,
body.page-home .h2w-close-title .h2w-woah {
  color: var(--h2w-brand) !important;
  -webkit-text-stroke: 0.025em #ffffff !important;
  text-shadow:
    0.055em 0.065em 0 var(--h2w-harbor),
    0 0.14em 0.3em rgba(6, 22, 32, 0.4);
}

body.page-home .h2w-hero-title .h2w-woah {
  transform: rotate(-1.2deg);
  transform-origin: left center;
}

body.page-home .h2w-hero-location {
  display: block;
  margin-top: 0.24em;
  color: var(--h2w-brand);
  font-size: 0.56em;
  line-height: 1.1;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.02em #ffffff;
  text-shadow:
    0.055em 0.065em 0 var(--h2w-harbor),
    0 0.14em 0.3em rgba(6, 22, 32, 0.4);
}

body.page-home .h2w-close-title .h2w-woah {
  display: inline-block;
  transform: rotate(-1.5deg) translateY(0.015em);
}

body.page-home .h2w-eyebrow {
  color: var(--h2w-brand-deep);
  font-weight: 700;
}

body.page-home .h2w-band--dark .h2w-eyebrow,
body.page-home .h2w-band--ink .h2w-eyebrow,
body.page-home .h2w-hero .h2w-eyebrow {
  color: var(--h2w-brand-lite);
}

@media (max-width: 767.98px) {
  body.page-home .h2w-hero-title {
    max-width: 15ch;
    font-size: clamp(1.95rem, 8.5vw, 2.65rem) !important;
    line-height: 1.05 !important;
  }

  body.page-home .h2w-hero-location {
    margin-top: 0.22em;
    font-size: 0.54em;
  }
}

/* ══════════════════════════════════════════════════════════════════
   29. SERVICE-LED HEADING HIERARCHY
   ══════════════════════════════════════════════════════════════════ */

body.page-home .h2w-hero-copy {
  max-width: 36rem;
}

body.page-home .h2w-hero .h2w-eyebrow {
  max-width: 46rem;
  margin-bottom: 20px;
  font-size: clamp(0.68rem, 0.9vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--h2w-brand-lite);
  text-shadow: 0 2px 14px rgba(3, 14, 24, 0.72);
}

body.page-home .h2w-hero-title {
  max-width: 13.5ch;
  font-size: clamp(3rem, 5vw, 4.65rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.025em !important;
}

body.page-home .h2w-hero-primary {
  display: block;
}

body.page-home .h2w-hero-location {
  display: block;
  max-width: 31rem;
  margin-top: 0.72em;
  font-family: var(--h2w-sans);
  font-size: 0.25em;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--h2w-brand-lite);
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 14px rgba(3, 14, 24, 0.72);
}

body.page-home .h2w-title {
  position: relative;
  max-width: 18ch;
  padding-bottom: 18px;
  font-size: clamp(2.35rem, 4.1vw, 3.75rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.02em !important;
}

body.page-home .h2w-title::after {
  content: "";
  display: block;
  width: clamp(54px, 7vw, 88px);
  height: 7px;
  margin-top: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--h2w-brand), var(--h2w-brand-lite));
  box-shadow: 5px 5px 0 rgba(10, 112, 150, 0.2);
}

body.page-home .h2w-close-title {
  max-width: 13ch;
  font-size: clamp(2.8rem, 5.7vw, 5rem) !important;
  line-height: 0.92 !important;
}

body.page-home .h2w-hero-quote-title {
  font-family: var(--h2w-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em;
  color: var(--h2w-harbor) !important;
}

body.page-home .h2w-strip-label {
  font-size: clamp(0.78rem, 1.2vw, 0.92rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: var(--h2w-brand-deep) !important;
}

@media (min-width: 1000px) {
  body.page-home .h2w-hero-copy {
    width: min(100%, 36rem);
  }
}

@media (max-width: 767.98px) {
  body.page-home .h2w-hero .h2w-eyebrow {
    margin-bottom: 14px;
    font-size: 0.62rem;
    line-height: 1.45;
    letter-spacing: 0.12em;
  }

  body.page-home .h2w-hero-title {
    max-width: 13ch;
    font-size: clamp(2.25rem, 10.3vw, 3.2rem) !important;
    line-height: 0.92 !important;
  }

  body.page-home .h2w-hero-location {
    max-width: 24rem;
    margin-top: 0.7em;
    font-size: 0.68rem;
    line-height: 1.35;
    letter-spacing: 0.1em;
  }

  body.page-home .h2w-title {
    max-width: 17ch;
    padding-bottom: 14px;
    font-size: clamp(2.1rem, 9vw, 2.85rem) !important;
  }

  body.page-home .h2w-title::after {
    height: 6px;
    margin-top: 13px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   30. LOWER HERO PROOF + COMPACT QUOTE CARD
   ══════════════════════════════════════════════════════════════════ */

body.page-home .h2w-hero-ba {
  position: relative;
  width: min(100%, 58rem);
  margin: clamp(46px, 6vw, 86px) auto 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

body.page-home .h2w-hero-ba::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  height: 18%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--h2w-harbor) 0%,
    rgba(11, 35, 51, 0.82) 24%,
    rgba(11, 35, 51, 0.28) 68%,
    transparent 100%
  );
}

body.page-home .h2w-hero-ba .ba-slider {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

body.page-home .h2w-hero-ba img {
  object-position: center 48%;
}

body.page-home .h2w-hero-ba .ba-label {
  top: auto;
  bottom: 18px;
  z-index: 7;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-size: 0.74rem;
  font-weight: 800;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(3, 14, 24, 0.95);
}

body.page-home .h2w-hero-ba .ba-label.before {
  left: 20px;
}

body.page-home .h2w-hero-ba .ba-label.after {
  right: 20px;
}

body.page-home .h2w-hero-ba .ba-handle,
body.page-home .h2w-hero-ba .ba-drag-hint {
  z-index: 7;
}

@media (min-width: 768px) and (max-width: 999.98px) {
  body.page-home .h2w-hero-ba {
    width: min(100%, 48rem);
    margin-top: 56px;
  }
}

@media (min-width: 1000px) {
  body.page-home .h2w-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 26rem);
    grid-template-rows: auto auto auto;
    column-gap: clamp(34px, 3.5vw, 56px);
    row-gap: clamp(34px, 3.6vw, 54px);
  }

  body.page-home .h2w-hero-copy {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: clamp(20px, 2vw, 28px);
    padding-bottom: 0;
  }

  body.page-home .h2w-hero-quote {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    width: 100%;
    max-width: 26rem;
    margin-top: 0;
    padding: clamp(17px, 1.5vw, 22px);
  }

  body.page-home .h2w-hero-quote > div[id^="cfd0933a-"] {
    zoom: 0.84;
  }

  body.page-home .h2w-hero-quote > p:last-child {
    margin-top: 14px !important;
    padding-top: 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  body.page-home .h2w-hero-ba {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  body.page-home .h2w-hero-stage {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 767.98px) {
  body.page-home .h2w-hero-ba {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   31. SINGLE HERO CTA
   ══════════════════════════════════════════════════════════════════ */

body.page-home .h2w-hero .h2w-actions--hero {
  display: flex;
  margin-top: 28px;
}

body.page-home .h2w-hero-cta {
  position: relative;
  min-width: min(100%, 19rem);
  min-height: 64px;
  padding-inline: 36px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  font-size: 1.02rem;
  letter-spacing: 0.065em;
  box-shadow:
    0 8px 0 var(--h2w-brand-deep),
    0 22px 42px -18px rgba(31, 200, 255, 0.82);
}

body.page-home .h2w-hero-cta:hover {
  transform: translateY(-3px);
  border-color: #ffffff;
  box-shadow:
    0 10px 0 var(--h2w-brand-deep),
    0 28px 48px -18px rgba(31, 200, 255, 0.95);
}

body.page-home .h2w-hero-cta:active {
  transform: translateY(4px);
  box-shadow:
    0 3px 0 var(--h2w-brand-deep),
    0 14px 28px -18px rgba(31, 200, 255, 0.78);
}

body.page-home .h2w-hero-cta .h2w-btn-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.22s var(--h2w-ease);
}

body.page-home .h2w-hero-cta:hover .h2w-btn-icon {
  transform: translateX(4px);
}

@media (max-width: 767.98px) {
  body.page-home .h2w-hero .h2w-actions--hero {
    width: 100%;
    max-width: 22rem;
    margin: 22px auto 0;
  }

  body.page-home .h2w-hero-cta {
    width: 100%;
    min-width: 0;
    min-height: 60px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   32. MOBILE HERO FIT
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  body.page-home .h2w-hero {
    overflow-x: clip;
  }

  body.page-home .h2w-hero::before {
    height: clamp(300px, 84vw, 430px);
    background-position: center top, center top;
    background-size: 100% 100%, 100% auto;
  }

  body.page-home .h2w-hero-grid {
    width: 100%;
    min-width: 0;
    padding-inline: clamp(16px, 5vw, 24px);
  }

  body.page-home .h2w-hero-grid > *,
  body.page-home .h2w-hero-copy > *,
  body.page-home .h2w-hero-say,
  body.page-home .h2w-hero-stage,
  body.page-home .h2w-hero-quote {
    min-width: 0;
    max-width: 100%;
  }

  body.page-home .h2w-hero .h2w-eyebrow,
  body.page-home .h2w-hero-title,
  body.page-home .h2w-hero-location,
  body.page-home .h2w-hero-quote-title,
  body.page-home .h2w-hero-quote-note,
  body.page-home .h2w-hero-quote > p {
    overflow-wrap: anywhere;
  }

  body.page-home .h2w-hero-title {
    width: 100%;
    max-width: 12.5ch;
    font-size: clamp(1.9rem, 9vw, 2.65rem) !important;
    line-height: 0.98 !important;
  }

  body.page-home .h2w-hero-location {
    width: 100%;
    max-width: 100%;
  }

  body.page-home .h2w-hero .h2w-actions--hero,
  body.page-home .h2w-hero-cta {
    max-width: 100%;
  }

  body.page-home .h2w-hero-cta {
    padding-inline: clamp(20px, 7vw, 28px);
    white-space: normal;
  }

  body.page-home .h2w-hero-video {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
  }

  body.page-home .h2w-hero-quote {
    overflow: hidden;
  }

  body.page-home .h2w-hero-quote .lb-inline-wrap,
  body.page-home .h2w-hero-quote form,
  body.page-home .h2w-hero-quote .lb-field,
  body.page-home .h2w-hero-quote input,
  body.page-home .h2w-hero-quote select,
  body.page-home .h2w-hero-quote textarea,
  body.page-home .h2w-hero-quote button {
    min-width: 0;
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════
   33. MOBILE HERO MEDIA + QUOTE FIT
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  body.page-home .h2w-hero-grid {
    gap: clamp(26px, 7vw, 36px);
    padding-top: clamp(34px, 9vw, 48px);
    padding-bottom: clamp(42px, 11vw, 60px);
  }

  body.page-home .h2w-hero-copy {
    text-align: center;
  }

  body.page-home .h2w-hero-title {
    margin-inline: auto;
  }

  body.page-home .h2w-hero .h2w-actions--hero {
    width: min(100%, 20rem);
    margin-top: 20px;
  }

  body.page-home .h2w-hero-cta {
    min-height: 56px;
    padding: 14px 22px;
    font-size: 0.92rem;
    letter-spacing: 0.045em;
    box-shadow:
      0 6px 0 var(--h2w-brand-deep),
      0 18px 34px -18px rgba(31, 200, 255, 0.78);
  }

  body.page-home .h2w-hero-stage {
    width: min(100%, 360px);
    max-width: 360px;
    margin-inline: auto;
  }

  body.page-home .h2w-hero-stage .h2w-stage-frame--video {
    border: 1px solid rgba(31, 200, 255, 0.42);
    border-radius: 18px;
    box-shadow: 0 30px 64px -34px rgba(3, 12, 19, 0.98);
  }

  body.page-home .h2w-hero-video {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
  }

  body.page-home .h2w-play {
    padding: 22px clamp(20px, 6vw, 28px);
  }

  body.page-home .h2w-play-icon {
    width: 50px;
    height: 50px;
  }

  body.page-home .h2w-play-text strong {
    font-size: 1.08rem;
  }

  body.page-home .h2w-hero-quote {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   34. MOBILE HERO: PHOTO → COMPARISON → VIDEO
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  body.page-home .h2w-hero {
    --h2w-mobile-photo-height: clamp(640px, 94vh, 900px);
    --h2w-mobile-photo-height: clamp(640px, 94svh, 900px);
  }

  body.page-home .h2w-hero::before {
    height: var(--h2w-mobile-photo-height);
    background-image:
      linear-gradient(
        180deg,
        rgba(4, 18, 30, 0.38) 0%,
        rgba(4, 18, 30, 0.42) 42%,
        rgba(6, 24, 38, 0.56) 66%,
        rgba(8, 29, 44, 0.84) 82%,
        rgba(11, 35, 51, 0.97) 94%,
        var(--h2w-harbor) 100%
      ),
      url("/.netlify/images?url=%2Fassets%2Fimages%2Fhome-hero-mobile-house-enhanced.jpeg&w=860&h=1100&fit=cover&position=center&q=78");
    background-position: center top;
    background-size: cover;
  }

  body.page-home .h2w-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "photo"
      "comparison"
      "video";
    gap: 0;
    padding: 0 0 clamp(48px, 12vw, 64px);
  }

  body.page-home .h2w-hero-copy {
    grid-area: photo;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: var(--h2w-mobile-photo-height);
    padding: clamp(58px, 13svh, 112px) clamp(18px, 5vw, 24px) clamp(92px, 16svh, 150px);
  }

  body.page-home .h2w-hero-ba {
    grid-area: comparison;
    display: block !important;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.page-home .h2w-hero-ba::before {
    height: 24%;
    background: linear-gradient(
      180deg,
      var(--h2w-harbor) 0%,
      rgba(11, 35, 51, 0.88) 22%,
      rgba(11, 35, 51, 0.38) 58%,
      transparent 100%
    );
  }

  body.page-home .h2w-hero-stage {
    grid-area: video;
    width: min(calc(100% - 32px), 360px);
    max-width: 360px;
    margin: clamp(28px, 8vw, 40px) auto 0;
  }

  body.page-home .h2w-hero-stage .h2w-stage-frame--video {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.page-home .h2w-hero-video {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    background: transparent;
  }

  body.page-home .h2w-hero-quote {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   35. MOBILE HERO COMPOSITION
   Keeps the enlarged house photograph as the focal point while fitting
   the headline and quote action into its darker lower third. The photo
   finishes early enough for the comparison slider to preview above the
   fixed mobile contact bar on common phone heights. ═════════════════ */

@media (max-width: 767.98px) {
  body.page-home .h2w-hero {
    --h2w-mobile-photo-height: clamp(500px, calc(100vh - 168px), 760px);
    --h2w-mobile-photo-height: clamp(500px, calc(100svh - 168px), 760px);
  }

  body.page-home .h2w-hero::before {
    background-image:
      linear-gradient(
        180deg,
        rgba(4, 18, 30, 0.14) 0%,
        rgba(4, 18, 30, 0.22) 24%,
        rgba(5, 21, 34, 0.46) 44%,
        rgba(6, 24, 38, 0.76) 62%,
        rgba(8, 29, 44, 0.95) 80%,
        var(--h2w-harbor) 100%
      ),
      radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.14), transparent 46%),
      url("/.netlify/images?url=%2Fassets%2Fimages%2Fhome-hero-mobile-house-enhanced.jpeg&w=860&h=1100&fit=cover&position=center&q=78");
    background-position: center, center, center 42%;
  }

  body.page-home .h2w-hero-copy {
    position: relative;
    display: grid;
    grid-template-rows: 35% auto auto 1fr;
    align-content: stretch;
    padding: 0 clamp(14px, 4vw, 20px) clamp(34px, 6svh, 54px);
  }

  body.page-home .h2w-hero .h2w-eyebrow {
    position: absolute;
    top: clamp(22px, 4svh, 36px);
    left: clamp(14px, 4vw, 20px);
    right: clamp(14px, 4vw, 20px);
    display: block;
    width: auto;
    margin: 0 auto;
    font-size: clamp(0.56rem, 2.5vw, 0.68rem);
    line-height: 1.4;
    letter-spacing: 0.13em;
    text-align: center;
    text-wrap: balance;
  }

  body.page-home .h2w-hero .h2w-eyebrow::before {
    display: none;
  }

  body.page-home .h2w-hero-title {
    grid-row: 2;
    align-self: start;
    width: 100%;
    max-width: 22rem;
    margin: 0 auto;
    font-size: clamp(2rem, 9.5vw, 3rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.025em !important;
    text-align: center;
    text-wrap: balance;
  }

  body.page-home .h2w-hero-primary {
    display: block;
    font-size: calc(1em + 15px);
    line-height: 0.98;
  }

  body.page-home .h2w-hero-location {
    display: block;
    width: 100%;
    max-width: none;
    margin-top: 1.15em;
    font-family: var(--h2w-sans);
    font-size: clamp(0.62rem, 2.8vw, 0.78rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--h2w-brand-lite);
    -webkit-text-stroke: 0;
    text-shadow: 0 2px 14px rgba(3, 14, 24, 0.72);
  }

  body.page-home .h2w-hero .h2w-actions--hero {
    max-width: 20.5rem;
    margin-top: clamp(28px, 5.8svh, 46px);
  }

  body.page-home .h2w-hero-say {
    grid-row: 3;
  }

  body.page-home .h2w-hero-cta {
    min-height: 58px;
    padding: 14px 24px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    background: linear-gradient(135deg, #75e5ff 0%, var(--h2w-brand) 52%, #15b8ed 100%);
    font-size: 0.96rem;
    letter-spacing: 0.055em;
    box-shadow:
      0 5px 0 #08779f,
      0 18px 38px -18px rgba(31, 200, 255, 0.92),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  body.page-home .h2w-hero-cta:active {
    transform: translateY(3px);
    box-shadow:
      0 2px 0 #08779f,
      0 12px 26px -18px rgba(31, 200, 255, 0.82),
      inset 0 1px 0 rgba(255, 255, 255, 0.62);
  }

  body.page-home .h2w-hero-ba::before {
    height: 18%;
    background: linear-gradient(
      180deg,
      var(--h2w-harbor) 0%,
      rgba(11, 35, 51, 0.72) 30%,
      transparent 100%
    );
  }

  body.page-home .h2w-hero-ba {
    z-index: 2;
    margin-top: -30px;
    box-shadow: 0 -18px 34px -28px rgba(3, 14, 24, 0.9);
  }
}

/* ══════════════════════════════════════════════════════════════════
   36. MOBILE DISPLAY HIERARCHY
   Keeps the phone-specific hero lettering intact and gives the rest
   of the page the same confident scale and brand contrast.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  body.page-home span,
  body.page-home div {
    font-size: inherit;
  }

  body.page-home .h2w-title,
  body.page-home .h2w-close-title {
    max-width: 22ch;
    font-family: 'Lilita One', var(--h2w-sans) !important;
    font-size: clamp(1.9rem, 8.2vw, 2.38rem) !important;
    font-weight: 400 !important;
    font-stretch: normal;
    line-height: 1.03 !important;
    letter-spacing: 0.005em !important;
    text-transform: none;
    color: var(--h2w-brand-deep) !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 3px 0 rgba(140, 227, 255, 0.48);
  }

  body.page-home .h2w-band--dark .h2w-title,
  body.page-home .h2w-band--ink .h2w-title,
  body.page-home .h2w-close-title {
    color: var(--h2w-brand-lite) !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 3px 0 rgba(10, 112, 150, 0.72);
  }

  body.page-home .h2w-title::after {
    width: 46px;
    height: 5px;
    margin-top: 11px;
    box-shadow: 4px 4px 0 rgba(10, 112, 150, 0.14);
  }

  body.page-home .h2w-eyebrow {
    width: fit-content;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 11px;
    border: 1px solid rgba(31, 200, 255, 0.28);
    border-radius: 999px;
    background: rgba(140, 227, 255, 0.16);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--h2w-brand-deep);
  }

  body.page-home .h2w-band--dark .h2w-eyebrow,
  body.page-home .h2w-band--ink .h2w-eyebrow {
    border-color: rgba(140, 227, 255, 0.25);
    background: rgba(31, 200, 255, 0.11);
    color: var(--h2w-brand-lite);
  }

  body.page-home .h2w-lede,
  body.page-home .h2w-steps p,
  body.page-home .h2w-proof-note p,
  body.page-home .h2w-faq .faq-a,
  body.page-home .h2w-strip-note {
    color: #416f80;
  }

  body.page-home .h2w-band--dark .h2w-lede,
  body.page-home .h2w-band--ink .h2w-lede,
  body.page-home .h2w-close .h2w-lede,
  body.page-home .h2w-strip-note {
    color: rgba(205, 241, 250, 0.8);
  }

  body.page-home .h2w-steps h3,
  body.page-home .h2w-proof-note h3,
  body.page-home .h2w-faq .faq-q,
  body.page-home .review-name {
    color: var(--h2w-brand-deep) !important;
  }

  body.page-home .h2w-svc-name {
    font-size: clamp(1.32rem, 5.8vw, 1.68rem) !important;
    line-height: 0.98 !important;
  }

  body.page-home .h2w-svc:nth-child(1) .h2w-svc-name {
    font-size: clamp(1.8rem, 7.6vw, 2.2rem) !important;
  }

  body.page-home .h2w-proof-card h3,
  body.page-home .h2w-svc-all h3,
  body.page-home .h2w-journal-card h3 {
    font-family: var(--h2w-display) !important;
    font-size: clamp(1.28rem, 5.6vw, 1.55rem) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    color: var(--h2w-harbor) !important;
  }

}

/* Keep the services introduction compact and gentle on phones. */
@media (max-width: 767.98px) {
  body.page-home .h2w-services .h2w-sec-head--split {
    gap: 6px;
    margin-bottom: 22px;
  }

  body.page-home .h2w-services .h2w-title {
    max-width: 24ch;
    padding-bottom: 0;
    font-family: 'Lilita One', var(--h2w-sans) !important;
    font-size: clamp(1.85rem, 8vw, 2.3rem) !important;
    font-weight: 400 !important;
    line-height: 1.04 !important;
    letter-spacing: 0.005em !important;
    color: var(--h2w-brand-deep) !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 3px 0 rgba(140, 227, 255, 0.48);
  }

  body.page-home .h2w-services .h2w-title::after {
    width: 42px;
    height: 3px;
    margin-top: 9px;
    background: var(--h2w-brand);
  }

  body.page-home .h2w-services .h2w-lede {
    margin-top: 4px;
    max-width: 36ch;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.42;
    color: var(--h2w-slate-2);
  }
}

/* Mobile-only water world: replace the flat light bands with a playful,
   illustrated wash while keeping every card and heading easy to read. */
@media (max-width: 767.98px) {
  body.page-home .h2w-owner,
  body.page-home .h2w-services,
  body.page-home .h2w-proof,
  body.page-home .h2w-faq {
    isolation: isolate;
    overflow: hidden;
    background-color: #effbff;
    background-image:
      radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.94) 0 7px, rgba(89, 206, 241, 0.26) 8px 10px, transparent 11px),
      radial-gradient(circle at 88% 23%, rgba(255, 255, 255, 0.88) 0 12px, rgba(89, 206, 241, 0.22) 13px 16px, transparent 17px),
      radial-gradient(ellipse at 14% 104%, rgba(75, 201, 239, 0.2) 0 32%, transparent 32.5%),
      radial-gradient(ellipse at 80% -5%, rgba(140, 227, 255, 0.28) 0 29%, transparent 29.5%),
      linear-gradient(180deg, #f8fdff 0%, #e9f9ff 48%, #f8fdff 100%);
  }

  body.page-home .h2w-owner::before,
  body.page-home .h2w-services::before,
  body.page-home .h2w-proof::before,
  body.page-home .h2w-faq::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.78;
    background:
      radial-gradient(70px 22px at 9% 33%, transparent 65%, rgba(31, 200, 255, 0.22) 67% 74%, transparent 76%),
      radial-gradient(92px 28px at 91% 69%, transparent 66%, rgba(10, 112, 150, 0.16) 68% 74%, transparent 76%),
      radial-gradient(circle at 7% 76%, rgba(255, 255, 255, 0.88) 0 4px, rgba(31, 200, 255, 0.28) 5px 7px, transparent 8px),
      radial-gradient(circle at 92% 43%, rgba(255, 255, 255, 0.9) 0 5px, rgba(31, 200, 255, 0.25) 6px 8px, transparent 9px);
  }

  body.page-home .h2w-owner::after,
  body.page-home .h2w-services::after,
  body.page-home .h2w-proof::after,
  body.page-home .h2w-faq::after {
    content: "";
    position: absolute;
    right: -46px;
    bottom: 18px;
    z-index: -1;
    width: 142px;
    height: 58px;
    border: 8px solid rgba(31, 200, 255, 0.14);
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    transform: rotate(-8deg);
    pointer-events: none;
  }

  body.page-home .h2w-services,
  body.page-home .h2w-faq {
    background-image:
      radial-gradient(circle at 89% 12%, rgba(255, 255, 255, 0.94) 0 7px, rgba(89, 206, 241, 0.26) 8px 10px, transparent 11px),
      radial-gradient(circle at 10% 27%, rgba(255, 255, 255, 0.88) 0 12px, rgba(89, 206, 241, 0.22) 13px 16px, transparent 17px),
      radial-gradient(ellipse at 86% 104%, rgba(75, 201, 239, 0.2) 0 32%, transparent 32.5%),
      radial-gradient(ellipse at 16% -5%, rgba(140, 227, 255, 0.28) 0 29%, transparent 29.5%),
      linear-gradient(180deg, #f8fdff 0%, #e9f9ff 48%, #f8fdff 100%);
  }

  body.page-home .h2w-owner > .h2w-shell,
  body.page-home .h2w-services > .h2w-shell,
  body.page-home .h2w-proof > .h2w-shell,
  body.page-home .h2w-faq > .h2w-shell {
    position: relative;
    z-index: 1;
  }

  body.page-home .h2w-steps li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body.page-home .h2w-steps li::before {
    content: none;
    display: none;
  }
}

/* Mobile homepage cleanup: keep the useful owner-list numbering, remove
   the decorative numbered section pills, and shorten the pauses between
   major sections. */
@media (max-width: 767.98px) {
  body.page-home {
    --h2w-band: 32px;
    --h2w-band-tight: 26px;
  }

  body.page-home .h2w-band .h2w-eyebrow {
    display: none;
  }

  body.page-home .h2w-sec-head {
    margin-bottom: 20px;
  }

  body.page-home .h2w-steps li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 4px 12px;
  }

  body.page-home .h2w-steps li::before {
    content: "0" counter(h2wstep);
    display: block;
    font-size: 1.22rem;
  }
}

/* Homepage header: oversized mascot at the top, compact wordmark on scroll. */
body.page-home .mobile-free-quote {
  display: none;
}

body.page-home .nav {
  isolation: isolate;
  overflow: visible;
  border-bottom: 0 !important;
}

body.page-home .nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 112px;
  background: #071c2c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 35px rgba(0, 12, 25, 0.22);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease;
  pointer-events: none;
}

body.page-home .nav.is-compact::before {
  transform: scaleY(0.64);
  box-shadow: 0 8px 22px rgba(0, 12, 25, 0.24);
}

body.page-home .header-logo-stack {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

body.page-home .header-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform-origin: center;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  pointer-events: none;
}

@media (min-width: 1024px) {
  body.page-home .nav {
    min-height: 72px;
    flex-wrap: nowrap !important;
    gap: clamp(12px, 1.6vw, 26px) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  body.page-home .nav .brand-header {
    position: relative;
    z-index: 2;
    width: 188px !important;
    height: 54px !important;
    flex: 0 0 188px !important;
  }

  body.page-home .header-logo--mascot {
    width: 176px !important;
    opacity: 1;
    transform: translate(-50%, -17%) scale(1);
  }

  body.page-home .header-logo--text {
    width: 182px !important;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78);
  }

  body.page-home .nav.is-compact .header-logo--mascot {
    opacity: 0;
    transform: translate(-50%, -54%) scale(0.68);
  }

  body.page-home .nav.is-compact .header-logo--text {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  body.page-home .nav .nav-inner {
    min-width: 0;
    flex-wrap: nowrap !important;
    gap: clamp(10px, 1.5vw, 24px) !important;
  }

  body.page-home .nav .nav-menu {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: clamp(0px, 0.45vw, 8px) !important;
  }

  body.page-home .nav .nav-menu > li > a {
    padding-right: clamp(6px, 0.65vw, 10px) !important;
    padding-left: clamp(6px, 0.65vw, 10px) !important;
    white-space: nowrap;
  }

  body.page-home .nav .nav-cta .btn {
    min-width: 124px;
    border-radius: 999px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

@media (min-width: 1024px) and (max-width: 1160px) {
  body.page-home .nav {
    gap: 10px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  body.page-home .nav .brand-header {
    width: 156px !important;
    flex-basis: 156px !important;
  }

  body.page-home .header-logo--mascot {
    width: 150px !important;
  }

  body.page-home .header-logo--text {
    width: 152px !important;
  }

  body.page-home .nav .nav-menu > li > a {
    padding-right: 5px !important;
    padding-left: 5px !important;
    font-size: 0.75rem !important;
  }

  body.page-home .nav .nav-cta .btn {
    min-width: 108px;
    padding-right: 13px !important;
    padding-left: 13px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  body.page-home .header-logo--mascot {
    display: none;
  }

  body.page-home .header-logo--text {
    position: static;
    width: 178px !important;
    opacity: 1;
    transform: none !important;
  }

  body.page-home .header-logo-stack {
    width: 178px;
    height: 68px;
  }

  body.page-home .nav::before {
    height: 100%;
    transform: none;
  }
}

@media (max-width: 767.98px) {
  body.page-home .nav {
    min-height: 56px !important;
    flex-wrap: nowrap !important;
  }

  body.page-home .nav::before {
    height: 88px;
  }

  body.page-home .nav.is-compact::before {
    transform: scaleY(0.64);
  }

  body.page-home .nav .brand-header {
    position: relative;
    z-index: 2;
    width: clamp(96px, 30vw, 126px) !important;
    height: 48px !important;
    flex: 1 1 auto !important;
    min-width: 82px;
  }

  body.page-home .header-logo--mascot {
    width: 82px !important;
    opacity: 1;
    transform: translate(-50%, -34%) scale(1) !important;
  }

  body.page-home .header-logo--text {
    width: clamp(104px, 30vw, 132px) !important;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78) !important;
  }

  body.page-home .nav.is-compact .header-logo--mascot {
    opacity: 0;
    transform: translate(-50%, -52%) scale(0.65) !important;
  }

  body.page-home .nav.is-compact .header-logo--text {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.page-home .mobile-free-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: linear-gradient(135deg, #168cff, #00b8ed);
    box-shadow: 0 8px 18px rgba(0, 134, 229, 0.26);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }

  body.page-home .nav-toggle {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .nav::before,
  body.page-home .header-logo {
    transition: none !important;
  }
}

/* Header refinement: the mascot is a poster overlay, not a cropped nav logo. */
body.page-home .nav::before,
body.page-home .nav.is-compact::before {
  height: 100% !important;
  transform: none !important;
  box-shadow: 0 8px 22px rgba(0, 12, 25, 0.24) !important;
}

body.page-home .nav .brand-header img.brand-logo.header-logo--text {
  width: min(182px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

body.page-home .header-mascot-sticker {
  position: absolute;
  z-index: 120;
  top: 76px;
  left: 50%;
  display: block;
  width: clamp(175px, 16vw, 225px);
  filter: drop-shadow(0 18px 22px rgba(0, 9, 22, 0.35));
  opacity: 1;
  transform: translateX(-50%) rotate(-2deg) scale(1);
  transform-origin: 45% 25%;
  transition: opacity 180ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-home .header-mascot-sticker img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

body.page-home .nav.is-compact + .header-mascot-sticker {
  opacity: 0;
  transform: translate(-50%, -18px) rotate(-2deg) scale(0.82);
  pointer-events: none;
}

@media (min-width: 1024px) {
  body.page-home .nav .brand-header img.brand-logo.header-logo--text {
    left: 0 !important;
    width: 182px !important;
    transform: translate(0, -50%) scale(0.86) !important;
    transform-origin: left center;
  }

  body.page-home .nav.is-compact .brand-header img.brand-logo.header-logo--text {
    opacity: 1;
    transform: translate(0, -50%) scale(1) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1160px) {
  body.page-home .nav .brand-header img.brand-logo.header-logo--text {
    width: 152px !important;
  }

  body.page-home .header-mascot-sticker {
    width: 165px;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  body.page-home .nav .brand-header img.brand-logo.header-logo--text {
    position: static !important;
    width: 178px !important;
    opacity: 0;
    transform: none !important;
  }

  body.page-home .nav.is-compact .brand-header img.brand-logo.header-logo--text {
    opacity: 1;
  }

  body.page-home .header-mascot-sticker {
    top: 74px;
    width: 160px;
  }
}

@media (max-width: 767.98px) {
  body.page-home .nav .brand-header img.brand-logo.header-logo--text {
    width: min(132px, 100%) !important;
    height: auto !important;
  }

  body.page-home .header-mascot-sticker {
    top: 70px;
    width: clamp(112px, 34vw, 145px);
    filter: drop-shadow(0 12px 16px rgba(0, 9, 22, 0.32));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .header-mascot-sticker {
    transition: none !important;
  }
}

/* Final header sizing and placement adjustments from visual review. */
@media (min-width: 768px) {
  body.page-home .nav {
    min-height: 62px !important;
    height: 62px !important;
    padding: 6px max(18px, calc((100vw - 1240px) / 2)) !important;
    gap: clamp(10px, 1.4vw, 22px) !important;
    flex-wrap: nowrap !important;
  }

  body.page-home .nav .brand-header {
    position: relative !important;
    z-index: 2;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: min(15vw, 180px) !important;
    min-width: 128px !important;
    height: 50px !important;
    flex: 0 0 min(15vw, 180px) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.page-home .header-logo-stack {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 50px !important;
  }

  body.page-home .nav .brand-header img.brand-logo.header-logo--text {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 180px !important;
    max-height: 46px !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 0;
    object-fit: contain !important;
    object-position: left center !important;
    transform: translateY(-50%) scale(0.9) !important;
    transform-origin: left center !important;
  }

  body.page-home .nav.is-compact .brand-header img.brand-logo.header-logo--text {
    opacity: 1;
    transform: translateY(-50%) scale(1) !important;
  }

  body.page-home .nav .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    gap: clamp(8px, 1.2vw, 20px) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.page-home .nav .nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    gap: clamp(0px, 0.35vw, 6px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-home .nav .nav-menu > li > a {
    padding: 7px clamp(4px, 0.55vw, 9px) !important;
    font-size: clamp(0.68rem, 0.72vw, 0.82rem) !important;
    white-space: nowrap !important;
  }

  body.page-home .nav .nav-cta {
    flex: 0 0 auto !important;
  }

  body.page-home .nav .nav-cta .btn {
    min-width: 108px !important;
    min-height: 38px !important;
    padding: 8px 15px !important;
    font-size: 0.76rem !important;
  }

  body.page-home .header-mascot-sticker {
    top: 72px;
    left: max(18px, calc((100vw - 1240px) / 2));
    width: clamp(155px, 13vw, 185px);
    transform: rotate(-2deg) scale(1);
  }

  body.page-home .nav.is-compact + .header-mascot-sticker {
    transform: translateY(-14px) rotate(-2deg) scale(0.82);
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  body.page-home .nav {
    padding-right: 14px !important;
    padding-left: 14px !important;
    gap: 8px !important;
  }

  body.page-home .nav .brand-header {
    width: 15vw !important;
    min-width: 112px !important;
    flex-basis: 15vw !important;
  }

  body.page-home .nav .brand-header img.brand-logo.header-logo--text {
    max-width: 145px !important;
  }

  body.page-home .nav .nav-inner {
    gap: 6px !important;
  }

  body.page-home .nav .nav-menu > li > a {
    padding-right: 4px !important;
    padding-left: 4px !important;
    font-size: 0.66rem !important;
  }

  body.page-home .nav .nav-cta .btn {
    min-width: 96px !important;
    padding-right: 11px !important;
    padding-left: 11px !important;
    font-size: 0.68rem !important;
  }

  body.page-home .header-mascot-sticker {
    left: 14px;
    width: 150px;
  }
}

@media (max-width: 767.98px) {
  body.page-home .header-mascot-sticker {
    left: 10px;
    transform: rotate(-2deg) scale(1);
  }

  body.page-home .nav.is-compact + .header-mascot-sticker {
    transform: translateY(-12px) rotate(-2deg) scale(0.82);
  }

  body.page-home .nav .brand-header img.brand-logo.header-logo--text {
    object-position: left center !important;
  }
}

/* Wide-screen balance: larger left sticker and centered navigation labels. */
@media (min-width: 768px) {
  body.page-home .header-mascot-sticker {
    top: 48px;
    left: clamp(100px, 9vw, 158px);
    width: clamp(250px, 18vw, 290px);
  }

  body.page-home .nav.is-compact + .header-mascot-sticker {
    transform: translateY(-16px) rotate(-2deg) scale(0.84);
  }

  body.page-home .nav .nav-inner {
    justify-content: center !important;
    gap: clamp(14px, 1.6vw, 26px) !important;
  }

  body.page-home .nav .nav-menu {
    justify-content: center !important;
    gap: clamp(5px, 0.7vw, 13px) !important;
  }

  body.page-home .nav .nav-menu > li > a {
    padding: 8px clamp(6px, 0.7vw, 12px) !important;
    font-size: clamp(0.78rem, 0.82vw, 0.94rem) !important;
    font-weight: 700 !important;
  }

  body.page-home .nav .nav-cta .btn {
    min-width: 118px !important;
    min-height: 40px !important;
    padding: 9px 18px !important;
    font-size: 0.82rem !important;
  }
}

@media (min-width: 1024px) {
  body.page-home .header-mascot-sticker {
    left: clamp(24px, 4vw, 64px);
  }

  body.page-home .nav .nav-inner {
    gap: clamp(8px, 1vw, 16px) !important;
  }

  body.page-home .nav .nav-menu {
    gap: 0 !important;
  }

  body.page-home .nav .nav-menu > li > a {
    padding: 8px clamp(3px, 0.35vw, 6px) !important;
    font-size: clamp(0.95rem, 0.95vw, 1.08rem) !important;
  }

  body.page-home .nav .nav-cta .btn {
    min-width: 128px !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 0.96rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  body.page-home .header-mascot-sticker {
    top: 50px;
    left: 28px;
    width: 210px;
  }

  body.page-home .nav .nav-inner {
    gap: 8px !important;
  }

  body.page-home .nav .nav-menu {
    gap: 1px !important;
  }

  body.page-home .nav .nav-menu > li > a {
    padding-right: 4px !important;
    padding-left: 4px !important;
    font-size: 0.72rem !important;
  }

  body.page-home .nav .nav-cta .btn {
    min-width: 100px !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
    font-size: 0.72rem !important;
  }
}

@media (max-width: 767.98px) {
  body.page-home .header-mascot-sticker {
    top: 54px;
    left: 18px;
    width: clamp(152px, 45vw, 182px);
  }
}

/* Reference desktop composition: wide slider, portrait form, centered row. */
@media (min-width: 1200px) {
  body.page-home .h2w-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(26rem, 28rem) !important;
    column-gap: clamp(32px, 2.8vw, 46px) !important;
    row-gap: clamp(30px, 2.8vw, 42px) !important;
    padding-left: max(var(--h2w-gutter), calc((100vw - 1460px) / 2)) !important;
    padding-right: max(var(--h2w-gutter), calc((100vw - 1460px) / 2)) !important;
  }

  body.page-home .h2w-hero-quote {
    width: 100% !important;
    max-width: 28rem !important;
    align-self: start !important;
    margin-top: clamp(44px, 4vw, 72px) !important;
    padding: clamp(19px, 1.6vw, 24px) !important;
  }

  body.page-home .h2w-hero-ba {
    align-self: center !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: clamp(44px, 4vw, 72px) !important;
    aspect-ratio: 4 / 3 !important;
  }

  body.page-home .h2w-hero-ba .ba-slider {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.page-home .h2w-hero-ba img {
    object-position: center 44% !important;
  }

  body.page-home .h2w-hero-stage {
    margin-top: 4px;
  }
}

/* Centered hero statement with clear space around the left mascot. */
@media (min-width: 1000px) {
  body.page-home .h2w-hero-copy {
    width: 100% !important;
    max-width: none !important;
    min-height: clamp(450px, 38vw, 590px);
    align-self: center !important;
    place-content: center;
    justify-items: center;
    padding: clamp(54px, 5vw, 84px) clamp(230px, 18vw, 310px) clamp(40px, 4vw, 68px) !important;
    text-align: center;
  }

  body.page-home .h2w-hero .h2w-eyebrow {
    max-width: 58rem;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(0.78rem, 0.95vw, 0.94rem);
    letter-spacing: 0.18em;
    text-align: center;
  }

  body.page-home .h2w-hero-title {
    width: 100%;
    max-width: 15ch;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(4rem, 6vw, 6rem) !important;
    line-height: 0.9 !important;
    text-align: center;
    text-wrap: balance;
  }

  body.page-home .h2w-hero-location {
    max-width: 44rem;
    margin-right: auto;
    margin-left: auto;
    font-size: 0.24em;
    text-align: center;
    text-wrap: balance;
  }

  body.page-home .h2w-hero .h2w-actions--hero {
    justify-content: center;
    width: auto;
    margin-top: clamp(28px, 2.8vw, 42px);
  }

  body.page-home .h2w-hero-cta {
    min-width: clamp(320px, 25vw, 410px);
    min-height: 68px;
    padding: 16px 34px;
    font-size: 1.03rem;
    letter-spacing: 0.065em;
  }
}

@media (min-width: 1000px) and (max-width: 1199.98px) {
  body.page-home .h2w-hero-copy {
    padding-right: 180px !important;
    padding-left: 180px !important;
  }
}

@media (min-width: 1200px) {
  body.page-home .h2w-hero-copy {
    min-height: clamp(420px, 32vw, 510px);
  }

  body.page-home .h2w-hero-quote,
  body.page-home .h2w-hero-ba {
    margin-top: 0 !important;
  }
}

@media (max-width: 767.98px) {
  body.page-home .nav .brand-header {
    width: clamp(92px, 30vw, 112px) !important;
    min-width: 92px !important;
    height: 34px !important;
    flex: 0 0 clamp(92px, 30vw, 112px) !important;
    overflow: visible !important;
  }

  body.page-home .header-logo-stack {
    width: 100% !important;
    height: 34px !important;
  }

  body.page-home .nav .brand-header img.brand-logo.header-logo--text {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 112px !important;
    height: auto !important;
    opacity: 0 !important;
    transform: translateY(-50%) scale(0.88) !important;
    transform-origin: left center !important;
  }

  body.page-home .nav.is-compact .brand-header img.brand-logo.header-logo--text {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
  }

  body.page-home .header-mascot-sticker {
    top: 54px;
    left: 18px;
    width: clamp(138px, 42vw, 172px);
    filter: drop-shadow(0 12px 16px rgba(0, 9, 22, 0.32));
    transform: rotate(-2deg) scale(1);
    transform-origin: 35% 20%;
  }

  body.page-home .nav.is-compact + .header-mascot-sticker {
    opacity: 0;
    transform: translateY(-14px) rotate(-2deg) scale(0.78);
    pointer-events: none;
  }

  body.page-home .h2w-hero-copy > .h2w-eyebrow {
    display: none !important;
  }
}

/* Mobile homepage header: mascot first, compact wordmark after scrolling. */
@media (max-width: 767.98px) {
  body.page-home .nav .brand-header {
    width: clamp(96px, 29vw, 116px) !important;
    min-width: 96px !important;
    height: 36px !important;
    flex-basis: clamp(96px, 29vw, 116px) !important;
  }

  body.page-home .nav .header-logo-stack {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 36px !important;
  }

  body.page-home .nav .brand-header img.brand-logo.header-logo--text {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 116px !important;
    opacity: 0 !important;
    transform: translateY(-50%) scale(0.9) !important;
    transform-origin: left center !important;
    transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  body.page-home .nav.is-compact .brand-header img.brand-logo.header-logo--text {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
  }

  body.page-home .header-mascot-sticker {
    top: 40px !important;
    left: -2px !important;
    z-index: 1001 !important;
    width: clamp(126px, 38vw, 156px) !important;
    opacity: 1 !important;
    transform: rotate(-2deg) scale(1) !important;
    transform-origin: 35% 20% !important;
    transition: opacity 180ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  body.page-home .nav.is-compact + .header-mascot-sticker {
    opacity: 0 !important;
    transform: translateY(-14px) rotate(-2deg) scale(0.8) !important;
    pointer-events: none !important;
  }

  body.page-home.nav-open .header-mascot-sticker {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.page-home .h2w-hero-copy > .h2w-eyebrow {
    display: none !important;
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  body.page-home .nav .brand-header img.brand-logo.header-logo--text,
  body.page-home .header-mascot-sticker {
    transition: none !important;
  }
}