/* ============================================================
   SEVEN WONDERS CONSTRUCTION — site.css

   Visual language: "paper and steel". A light, editorial ground —
   white and near-white bands, ink type, ONE steel-blue accent, and
   hairline rules doing the structural work that drop shadows would
   do on a dark site.

   This is deliberately NOT the Home Built stylesheet re-tokenised.
   That site is dark-native: its hierarchy comes from scrims over
   media, glowing accent pills and white-on-black type weight. Every
   one of those reads as cheap on white — the scrim has nothing to
   do, the glow becomes clip-art, the type goes harsh. So the
   structure and the JS contract are inherited; the surface language
   is rebuilt:

     dark original            ->  here
     fully-rounded pills      ->  4px rectangles
     drop shadows / glow      ->  1px hairlines + whitespace
     scrimmed full-bleed media->  framed, untinted media
     transparent nav on video ->  solid white nav from scroll 0
     tight dark-mode leading  ->  opened-up editorial leading

   HARD RULE: no tint, scrim, wash, blur or gradient is ever laid
   over a photograph or a video anywhere in this file. Legibility is
   achieved by separating type from media, never by darkening it.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --paper:      #FFFFFF;
  --paper-2:    #F4F5F7;
  --paper-3:    #ECEFF3;

  --ink:        #0B0D10;
  --ink-2:      #4A5058;
  --ink-3:      #787E87;

  --line:       #E3E6EA;
  --line-2:     #CED4DB;

  --steel:      #2E5AAC;
  --steel-ink:  #24478A;
  --steel-tint: #EFF3FA;

  --page-max: 1240px;
  --gutter: 24px;
  --nav-h: 78px;
  --radius: 4px;

  --sec-pad: clamp(76px, 9vw, 132px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Anchor targets must clear the fixed bar, or every in-page link
   lands with its heading hidden underneath the nav. */
[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

.container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 13px 22px; font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }

/* ---------- Type ----------
   Display face is Inter Tight, set tight and dark; body is Inter,
   set open. On a light ground the danger is harshness, so leading
   is deliberately looser than the dark original ran. */
.display {
  margin: 0;
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.display--xl { font-size: clamp(38px, 6vw, 74px); }

/* Section eyebrow: an index number and a hairline. This pairing is
   the site's signature — it replaces the coloured chip the dark
   original used, which needs a dark field to read as anything. */
.label {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel);
}
.label::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--line);
  max-width: 190px;
}

.lede {
  margin: 22px 0 0;
  font-size: 18px; line-height: 1.72; color: var(--ink-2);
  max-width: 62ch;
}

.sec-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 860px; }

/* ---------- Buttons ----------
   Rectangles, 4px. Solid ink for primary (highest contrast object on
   a white page), hairline outline for secondary. No pills, no glow,
   no gradient — those all read as decoration here rather than as
   structure. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--solid:hover { background: var(--steel); border-color: var(--steel); }

.btn--steel { background: var(--steel); color: #fff; border-color: var(--steel); }
.btn--steel:hover { background: var(--steel-ink); border-color: var(--steel-ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* On a photograph or video we cannot darken the plate, so the
   button carries its own solid field instead. */
.btn--onmedia { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn--onmedia:hover { background: var(--steel); border-color: var(--steel); color: #fff; }

/* ---------- NAV ----------
   Transparent over the hero, solid white once the hero is behind you.
   The links are near-black because the top strip of the clip is open
   sky, measured 146-160 luma across the loop -> 7.4:1 at its darkest.
   No lift, wash or shadow is placed behind them to get there.

   The small brand mark is absent while you are on the hero — the large
   one is right there in the hero copy — and migrates up into the bar
   with .nav--solid, which site.js sets at the hero's measured bottom
   edge so the two marks never appear at once. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav--solid {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -20px rgba(11, 13, 16, .45);
}

.nav-inner {
  max-width: var(--page-max); margin: 0 auto; height: 100%;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 28px;
}
.nav-brand {
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.nav--solid .nav-brand { opacity: 1; visibility: visible; }
.nav-brand .brand-mark { width: 40px; height: auto; }
.nav-brand .brand-name { font-size: 15px; }
.nav-brand .brand-sub { font-size: 8.5px; letter-spacing: .26em; }

.nav-links { margin-left: auto; display: flex; align-items: center; gap: 30px; height: 100%; }
.nav-link {
  display: inline-flex; align-items: center; height: 100%;
  font-size: 14px; font-weight: 600; color: #fff;
  letter-spacing: .06em; text-transform: uppercase;
  text-shadow: var(--hero-ts);
  transition: color .18s ease;
}
.nav-link:hover { color: #fff; opacity: .72; }
/* Once past the hero the bar turns white, so the links turn ink and drop
   the shadow. */
.nav--solid .nav-link { color: var(--ink); text-shadow: none; }
.nav--solid .nav-link:hover { color: var(--steel); opacity: 1; }
.nav-phone { letter-spacing: .02em; }

/* Hidden while the bar is transparent over the hero — the hero already
   has its own "Get Your Estimate" button, so a second CTA in a see-through
   bar just adds clutter. It fades in only once the bar goes solid, as a
   clean rounded button (not a flush block). */
.nav-btn {
  display: none;
  align-items: center; justify-content: center;
  min-height: 44px; padding: 0 24px; border-radius: var(--radius);
  background: var(--steel); color: #fff;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .2s ease;
}
.nav--solid .nav-btn { display: inline-flex; }
.nav-btn:hover { background: var(--steel-ink); }

.menu-btn {
  display: none; margin-left: auto; margin-right: var(--gutter);
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.menu-btn .bar { display: block; width: 26px; height: 2px; background: #fff; }
.nav--solid .menu-btn .bar { background: var(--ink); }

.mobile-menu {
  display: none;
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: var(--paper);
  padding: 20px var(--gutter) 48px;
  flex-direction: column; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 17px 2px; font-size: 18px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu .mm-phone { color: var(--steel); font-weight: 600; }
.mobile-menu .mm-btn { margin-top: 26px; border-bottom: none; align-self: stretch; }

/* ---------- HERO ----------
   Full-bleed video, edge to edge, with the copy and the quote card
   sitting directly on the footage — the Addicted to Color pattern:
   transparent nav, the mark living large in the hero itself, copy
   pinned left, white quote card pinned right.

   Still NO tint. Legibility is earned the way that build earned it —
   by measuring the clip and matching the ink to it, not by washing
   the frame. Measured across the whole 12s loop at 1920x1080:

     headline box   luma 162  ->  near-black ink  7.7:1  PASS
     logo box       luma 150  ->  near-black ink  6.7:1  PASS
     nav links box  luma 182  ->  near-black ink  9.7:1  PASS
     sub paragraph  luma 149  ->  near-black ink  6.4:1  PASS

   Measured with tools/luma.js, which reads each element's real bounding
   box and replays the clip through the browser's own object-fit: cover
   mapping — not a guess at source-frame coordinates. An earlier cut had
   the column running bright at the top and dark at the bottom, which no
   single ink colour survives; the fix was upstream, re-cutting to the
   segment where the copy column is uniformly open sky (luma 141-156
   across the loop). Same move the reference build made, and the same
   reason its copy is black rather than white. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--ink);   /* only ever seen before the poster paints */
}
.hero-media { position: absolute; inset: 0; }
.hero-media img,
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hm-mob { display: none; }   /* desktop shows the landscape framing */
/* Poster sits underneath and never unmounts: if the video never reaches
   'playing' (iOS autoplay refusal, decode stall, missing file) the hero
   still looks finished. */
.hero-media video { opacity: 0; transition: opacity .8s ease; }
.hero-media video.ready { opacity: 1; }
/* Desktop landscape framing: bias the tower's crown toward the right so
   the small rooftop flag sits behind the opaque quote form. */
.hero-media img.hm-desk, .hero-media video.hm-desk { object-position: 100% 42%; }

/* ---------- HERO TOP LIFT ----------
   The one overlay on this site, and it is WHITE, not a tint: it
   brightens the top ~15% instead of muting it, and it is gone by the
   time it reaches any of the hero copy.

   Why it exists: the nav links are near-black, and the top strip is
   open sky (luma 189-220) everywhere EXCEPT where the right tower's
   edge crosses it, which is exactly where the phone number sits —
   measured luma 90, i.e. 2.9:1, a fail. Re-cutting upstream was tried
   first and does not fix it: the towers converge, so at every crop
   tested (2304/2560/2816/3072 wide) that corner stayed at 87-108.
   With the lift the phone measures ~7.6:1 and its darkest frame ~5:1.

   This is the same device, for the same reason, as the reference
   build's .hero-scrim, whose comment reads: "kept as a hairline lift
   at the very top, so the nav's dark links never collide with a
   passing dark roller."

   If you would rather ship with zero overlays, delete this block and
   drop .nav-phone from the desktop bar — the number still appears in
   the hero button, the mobile menu, the CTA, the sticky bar and the
   footer. */
.hero-lift {
  position: absolute; inset: 0;
  pointer-events: none;
  /* Nothing over the scene. The nav's white links carry the same contour
     shadow as the rest of the hero copy, so they read on the open sky
     without any brightening or darkening band behind them. Kept as an
     element only so the markup contract is stable. */
  background: none;
}

.hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: calc(var(--nav-h) - 14px) var(--gutter) clamp(52px, 6vw, 84px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(384px, 32vw, 452px);
  gap: clamp(30px, 4vw, 60px);
  align-items: start;   /* card pinned to the top, tucked under the nav */
}

/* The copy sits DIRECTLY on the footage — the whole scene stays visible.

   The clip is the twin glass towers against open sky. Measured with
   tools/luma.js, the copy zone swings luma 12-157 across the loop as the
   towers and sky move through it, so no flat ink survives on its own and
   no crop fixes it (proven: every object-position and every master crop
   was scanned). A panel or a scrim would fix it by covering the scene —
   which is exactly what took away the vibe.

   So legibility is carried by the TEXT, not by anything over the video:
   white type with a tight dark contour shadow that hugs each letter.
   The shadow darkens only the pixels touching the glyphs — the scene
   between the words is untouched and fully visible. This is a shadow on
   the text, not a tint or a blur on the footage. --hero-ts is that
   contour, reused by every element that sits on the video. */
:root {
  --hero-ts:
    0 0 2px rgba(8,11,18,.98),
    0 0 4px rgba(8,11,18,.85),
    0 1px 3px rgba(8,11,18,.85),
    0 3px 14px rgba(8,11,18,.5);
}
.hero-copy { max-width: 620px; color: #fff; }
.hero-brand.brand .brand-name { color: #fff; }
.hero-copy .hero-title,
.hero-copy .hero-sub,
.hero-brand .brand-name,
.hero-brand .brand-sub,
.rb-score, .rb-sub { text-shadow: var(--hero-ts); }
/* The mark is a stroke, so it takes a drop-shadow rather than a text one. */
.hero-brand .brand-mark { filter: drop-shadow(0 1px 3px rgba(8,11,18,.6)); }

/* The mark lives large in the hero; the bar only picks up a small one
   once the hero is behind you. */
.hero-brand.brand { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 24px; color: #fff; }
.hero-brand.brand .brand-mark { width: 72px; height: auto; color: #fff; }
.hero-brand .brand-name { font-size: 27px; }
.hero-brand.brand .brand-sub { font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.9); }

/* A solid block badge, as in the reference. On media a coloured chip
   reads where the hairline rule used elsewhere on the site would
   simply disappear. */
.hero-eyebrow {
  display: inline-block; margin: 0 0 20px;
  background: var(--steel); color: #fff;
  padding: 11px 18px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.hero-title {
  margin: 0;
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.032em;
  color: #fff;
}
/* No accent inside the headline: white carries the whole line at one
   weight against the dark tower. The accent lives in the badge and the
   primary button, which carry their own solid fields. */
.hero-sub {
  margin: 24px 0 0;
  font-size: 17.5px; line-height: 1.68; font-weight: 500;
  color: #fff;
  max-width: 52ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Deliberately unbranded. "5.0" and "36+" are the client's own figures
   from their own site; attaching Google's or Yelp's mark to a number we
   did not source from that platform would misattribute it. */
.rating-badge {
  display: flex; align-items: center; gap: 16px;
  margin-top: 28px; padding: 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.28);
}
.rb-score {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: #fff;
}
.rb-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.28); }
.rb-stars { display: flex; gap: 2px; color: #fff; filter: drop-shadow(0 1px 2px rgba(8,11,18,.7)); }
.rb-stars svg { width: 15px; height: 15px; }
.rb-sub { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(255,255,255,.82); }

/* ---------- TRUST STRIP ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.trust-inner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust-item {
  display: flex; align-items: center; gap: 12px;
  padding: 26px 22px 26px 0;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
}
.trust-item + .trust-item { border-left: 1px solid var(--line); padding-left: 26px; }
.trust-item svg { width: 20px; height: 20px; color: var(--steel); flex: none; }

/* ---------- Sections ---------- */
.section { padding: var(--sec-pad) 0; }
.section--tint { background: var(--paper-2); }
.section--ruled { border-top: 1px solid var(--line); }

/* ---------- SERVICE CARDS ----------
   Hairline-bounded, square-cornered, flat. No shadow: on white a
   shadow is the only thing separating a card from the page, and it
   immediately reads as a 2010s template. A border does it better. */
.card-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .22s ease, transform .22s ease;
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.03); }
.card-body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.card-num {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--steel);
}
.card h3 {
  margin: 0 0 12px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25;
}
.card p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.68; color: var(--ink-2); }
.card-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--steel);
}
.card-link svg { width: 15px; height: 15px; transition: transform .22s ease; }
.card:hover .card-link svg { transform: translateX(4px); }

.more-wrap { display: flex; justify-content: center; margin-top: 34px; }
.more-btn { min-height: 50px; padding: 0 26px; background: transparent; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 15px; font-weight: 600; }
.more-btn:hover { border-color: var(--ink); }

/* ---------- ABOUT ----------
   Two columns of type on paper, divided by a rule. The dark site put
   this over a full-bleed photograph with a directional scrim; that
   device is unavailable here by rule, and unnecessary — whitespace
   separates just as well on white. */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.about-mission {
  margin: 0 0 34px; padding-left: 22px;
  border-left: 2px solid var(--steel);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(19px, 2vw, 23px); line-height: 1.5; font-weight: 500;
  letter-spacing: -0.015em; color: var(--ink);
}
.about-body p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }

.stat-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin-top: 40px; padding-top: 34px;
  border-top: 1px solid var(--line);
}
.stat-v {
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(32px, 3.6vw, 44px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
}
.stat-l { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }

/* ---------- VALUES ---------- */
.value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.value {
  background: var(--paper); padding: clamp(30px, 3.4vw, 46px);
}
.value-ix { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--steel); }
.value h3 {
  margin: 0 0 12px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 20px; font-weight: 600; letter-spacing: -0.015em;
}
.value p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }

/* ---------- STAT BAND (Trusted Builders) ----------
   Ink band. The one dark surface on the page, used once, as a
   deliberate punctuation mark rather than as the site's ground. */
.band { background: var(--ink); color: #fff; padding: clamp(56px, 6.5vw, 86px) 0; }
.band .label { color: #7FA3E0; }
.band .label::after { background: rgba(255,255,255,.16); }
.band .display { color: #fff; }
.band .lede { color: rgba(255,255,255,.72); }
.band-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: clamp(38px, 4.5vw, 56px);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); overflow: hidden;
}
.band-stat { background: var(--ink); padding: 30px 26px; }
.band-stat .stat-v { color: #fff; }
.band-stat .stat-l { color: rgba(255,255,255,.6); }

/* ---------- ESTIMATES ---------- */
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.price {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px 32px; background: var(--paper);
  display: flex; flex-direction: column;
  transition: border-color .22s ease;
}
.price:hover { border-color: var(--steel); }
.price h3 {
  margin: 0 0 18px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2);
}
.price-v {
  margin: 0 0 4px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(25px, 2.5vw, 31px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--ink);
}
.price-note { margin: 14px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.price-cta { margin-top: clamp(34px, 4vw, 46px); display: flex; justify-content: center; }
.price-disclaimer { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }

/* ---------- PROCESS ---------- */
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.2vw, 46px); }
.step { padding-top: 26px; border-top: 2px solid var(--ink); }
.step:nth-child(2) { border-top-color: var(--steel); }
.step:nth-child(3) { border-top-color: var(--line-2); }
.step-n {
  margin: 0 0 14px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--steel);
}
.step h3 {
  margin: 0 0 12px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 23px; font-weight: 600; letter-spacing: -0.02em;
}
.step p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }

/* ---------- CAROUSEL (gallery + reviews) ----------
   Native scroll-snap row; arrows and dots appear only once site.js
   marks it .is-ready, so it still swipes with JS off. */
.carousel { position: relative; }
.car-track {
  display: flex; gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.car-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .car-track { scroll-behavior: auto; } }

.tile {
  flex: 0 0 calc((100% - 44px) / 3);
  margin: 0; scroll-snap-align: start;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper);
}
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile figcaption {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.tile-n { font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--steel); }
.tile-loc { font-family: Inter, sans-serif; font-size: 13.5px; font-weight: 400; color: var(--ink-3); }

.car-nav {
  position: absolute; top: 34%; z-index: 5;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.carousel.is-ready .car-nav { display: flex; }
.car-nav:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.car-nav:disabled { opacity: .28; cursor: default; }
.car-nav svg { width: 18px; height: 18px; }
.car-prev { left: -22px; }
.car-next { right: -22px; }

.car-dots { display: none; justify-content: center; gap: 4px; margin-top: 24px; }
.carousel.is-ready .car-dots { display: flex; }
.car-dot { position: relative; width: 34px; height: 40px; padding: 0; background: transparent; border: none; }
.car-dot::before {
  content: ''; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 2px; margin-top: -1px;
  background: var(--line-2); transition: background-color .2s ease;
}
.car-dot[aria-current="true"]::before { background: var(--ink); }

/* ---------- REVIEWS ---------- */
.review {
  flex: 0 0 calc((100% - 44px) / 3);
  margin: 0; scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 32px 30px 30px;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.rv-stars { display: flex; gap: 3px; margin-bottom: 18px; color: var(--steel); }
.rv-stars svg { width: 15px; height: 15px; }
.review blockquote {
  margin: 0 0 24px; font-size: 15.5px; line-height: 1.75; color: var(--ink-2); flex: 1;
}
.review figcaption { display: flex; flex-direction: column; gap: 3px; padding-top: 18px; border-top: 1px solid var(--line); }
.rv-name { font-family: "Inter Tight", Inter, sans-serif; font-size: 16px; font-weight: 600; color: var(--ink); }
.rv-meta { font-size: 13px; color: var(--ink-3); }

.reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: clamp(38px, 4.5vw, 58px); }
.reviews-score { display: flex; align-items: center; gap: 30px; }
.rs-item .stat-v { font-size: clamp(28px, 3vw, 38px); }

/* ---------- AREAS ---------- */
.areas-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.county-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.county-list li {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 8px 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px; font-weight: 500; color: var(--ink);
}
.county-list li svg { width: 14px; height: 14px; color: var(--steel); flex: none; }
.county-list li:nth-child(odd) { padding-right: 20px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 900px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; padding: 26px 44px 26px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: transparent; border: none; text-align: left;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(17px, 1.7vw, 19.5px); font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink); position: relative;
}
.faq-q:hover { color: var(--steel); }
.plus { position: absolute; right: 4px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; flex: none; }
.plus::before, .plus::after {
  content: ''; position: absolute; background: var(--steel);
  transition: transform .28s ease, opacity .28s ease;
}
.plus::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.plus::after { top: 0; bottom: 0; left: 7px; width: 1.5px; }
.faq-q[aria-expanded="true"] .plus::after { transform: rotate(90deg); opacity: 0; }

.faq-a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .3s ease, visibility 0s linear .3s; }
.faq-q[aria-expanded="true"] + .faq-a { visibility: visible; transition: max-height .3s ease, visibility 0s linear 0s; }
.faq-a p { margin: 0 0 26px; font-size: 16px; line-height: 1.75; color: var(--ink-2); max-width: 70ch; }

/* ---------- CTA ----------
   Same principle as the hero: the video is a clean untinted plate on
   one side, the copy sits on paper on the other. The dark original
   ran type straight over the footage behind a wash — not available
   here, and not missed. */
/* Full-bleed city aerial; the copy sits on it in white with the same
   contour shadow the hero uses. No tint over the footage. */
.cta {
  position: relative; overflow: hidden;
  background: var(--ink);   /* only seen before the poster paints */
  border-top: 1px solid var(--line);
}
.cta-media { position: absolute; inset: 0; }
.cta-media img, .cta-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 42%;
}
.cta-media video { opacity: 0; transition: opacity .6s ease; }
.cta-media video.ready { opacity: 1; }

.cta-inner {
  position: relative; z-index: 1;
  min-height: clamp(460px, 62vh, 620px);
  display: flex; align-items: center;
  padding: clamp(72px, 9vw, 128px) var(--gutter);
}
.cta-copy { max-width: 620px; color: #fff; }
.cta-copy .label { color: #fff; }
.cta-copy .label::after { background: rgba(255,255,255,.4); }
.cta-copy .display,
.cta-copy .lede { color: #fff; text-shadow: var(--hero-ts); }
.cta-copy .label { text-shadow: var(--hero-ts); }
.cta-copy .lede { color: rgba(255,255,255,.96); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- QUOTE FORM ---------- */
.quote-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: clamp(28px, 3.4vw, 40px);
}
.quote-title {
  margin: 0 0 8px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.022em;
}
.quote-sub { margin: 0 0 26px; font-size: 15px; color: var(--ink-2); }
.q-label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.q-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.q-field { margin-bottom: 16px; }
.q-input {
  width: 100%; min-height: 50px; padding: 12px 14px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font: inherit; font-size: 15.5px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.q-input::placeholder { color: var(--ink-3); }
.q-input:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px var(--steel-tint); }
textarea.q-input { min-height: 118px; resize: vertical; line-height: 1.6; }
.q-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23787E87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;
  padding-right: 40px;
}
.q-submit { width: 100%; margin-top: 6px; }
.q-note { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }
.q-note.is-error { color: #B3261E; }
.q-done { margin: 0; padding: 26px 0; font-size: 16px; line-height: 1.7; color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.q-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.q-consent input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--steel); flex: none; }

/* ---------- FOOTER ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.72); padding: clamp(56px, 6.5vw, 84px) 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 60px);
}
.footer-brand img, .footer-brand svg { height: 46px; width: auto; margin-bottom: 20px; }
.footer-brand p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.62); max-width: 40ch; }
.footer-reg { font-size: 12.5px !important; color: rgba(255,255,255,.44) !important; }
.footer h3 {
  margin: 0 0 18px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; font-size: 14.5px; line-height: 1.6; }
.footer a { color: rgba(255,255,255,.72); transition: color .18s ease; }
.footer a:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.footer-social a:hover { background: var(--steel); border-color: var(--steel); }
.footer-social svg { width: 17px; height: 17px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  padding: 24px 0 30px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px; color: rgba(255,255,255,.5);
}

/* ---------- MOBILE STICKY BAR ---------- */
.mobile-cta {
  position: fixed; left: 12px; right: 12px; z-index: 90;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: none; gap: 10px;
  transform: translateY(calc(100% + 24px));
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.mobile-cta.show { transform: translateY(0); }
.mobile-cta a {
  flex: 1; min-height: 54px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius); font-size: 15px; font-weight: 600;
}
.mobile-cta svg { width: 17px; height: 17px; }
.mc-call { background: var(--ink); color: #fff; }
.mc-quote { background: var(--steel); color: #fff; }

/* ---------- REVEAL ----------
   Visible by default; site.js adds .js-reveal to <html> only once it
   knows IntersectionObserver exists, so content can never be
   stranded hidden. */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); }
.js-reveal .reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  :root { --nav-h: 68px; }
  .nav-links { display: none; }
  .menu-btn { display: flex; }

  /* Portrait crops hard into the centre of a 16:9 frame, so the mobile
     copy zone is re-measured separately — see tools/luma.js 390 844. */
  .hero { min-height: 0; }
  .hero-media img, .hero-media video { object-position: 50% 50%; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: calc(var(--nav-h) - 4px) var(--gutter) clamp(34px, 7vw, 52px);
  }
  .hero-copy { max-width: none; padding-bottom: 40px; }
  .hero-brand .brand-mark { width: 46px; height: 46px; }
  .hero-brand .brand-name { font-size: 21px; }
  .hero-actions .btn { width: 100%; }
  /* The card stays a card and sits ON the footage, like everything else
     in the hero. It was previously bled full-width and opaque, which
     turned it into a band that hid the video below the copy. */
  .hero-quote {
    margin: 0;
    padding: 26px 20px 30px;
  }

  .about-grid, .areas-grid { grid-template-columns: 1fr; }

  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .review { flex: 0 0 calc((100% - 22px) / 2); }
  .trust-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(odd) { border-left: none; padding-left: 0; }
  .trust-item:nth-child(3), .trust-item:nth-child(4) { border-top: 1px solid var(--line); }
  .band-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .value-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .reviews-head { align-items: flex-start; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .card-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .tile, .review { flex: 0 0 86%; }
  .car-track { gap: 14px; }
  .car-nav { display: none !important; }
  .county-list { grid-template-columns: 1fr; }
  .county-list li:nth-child(odd) { padding-right: 8px; }
  .q-row { grid-template-columns: 1fr; gap: 0; }
  .mobile-cta { display: flex; }
  .stat-row { grid-template-columns: 1fr; gap: 22px; text-align: left; }
  .hero-badges { grid-template-columns: 1fr; gap: 13px; }
  .reviews-score { gap: 22px; }

  /* The sticky bar must not sit on top of the last section's content. */
  .cta { padding-bottom: 84px; }
}

@media (min-width: 681px) { .more-wrap { display: none; } }
@media (max-width: 680px) {
  .card-grid[data-collapsed="true"] .card:nth-child(n+4) { display: none; }
}

@media (max-width: 1340px) and (min-width: 681px) {
  .car-prev { left: 6px; }
  .car-next { right: 6px; }
}

/* ---------- BRAND LOCKUP ----------
   Built in markup rather than shipped as a raster so it inherits
   currentColor — the same lockup serves the white nav and the ink
   footer without a second asset. The mark is a heptagon: seven
   sides, seven wonders. */
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brand-mark { width: 46px; height: auto; flex: none; color: var(--steel); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: .01em;
  text-transform: uppercase; color: currentColor;
}
.brand-sub {
  margin-top: 4px;
  font-size: 9.5px; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-3);
}
.footer .brand { color: #fff; }
.footer .brand-sub { color: rgba(255,255,255,.5); }
.footer .brand-mark { color: #7FA3E0; width: 52px; height: auto; }
@media (max-width: 400px) {
  .brand-mark { width: 38px; height: auto; }
  .brand-name { font-size: 15px; }
  .brand-sub { font-size: 8.5px; letter-spacing: .22em; }
}

/* ---------- RESOURCE CARDS (Additional Info) ---------- */
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.res {
  display: flex; flex-direction: column;
  padding: 32px 30px 30px;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .22s ease, transform .22s ease;
}
.res:hover { border-color: var(--steel); transform: translateY(-3px); }
.res-ico { width: 22px; height: 22px; color: var(--steel); margin-bottom: 20px; }
.res h3 {
  margin: 0 0 12px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 20px; font-weight: 600; letter-spacing: -0.015em;
}
.res p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.68; color: var(--ink-2); flex: 1; }
.res .card-link { margin-top: 0; }
@media (max-width: 980px) { .res-grid { grid-template-columns: 1fr; } }

/* ---------- ESTIMATE SECTION LAYOUT ---------- */
.est-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 4.5vw, 64px); align-items: start;
}
.est-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1080px) {
  .est-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .est-prices { grid-template-columns: 1fr; } }

/* ---------- CONTACT PAGE ---------- */
.page-head { padding: calc(var(--nav-h) + clamp(56px, 6vw, 88px)) 0 clamp(40px, 5vw, 60px); border-bottom: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
.contact-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.contact-list li { display: flex; gap: 15px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact-list svg { width: 19px; height: 19px; color: var(--steel); flex: none; margin-top: 3px; }
.contact-list dt { margin: 0 0 3px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.contact-list dd { margin: 0; font-size: 16px; color: var(--ink); line-height: 1.6; }
.contact-list a:hover { color: var(--steel); }
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Touch targets ----------
   The site this replaces was not mobile-optimised, so the inline
   links get real hit areas on touch widths rather than the 17–24px
   text-height boxes they would otherwise inherit. Desktop keeps the
   tighter typographic rhythm — a mouse does not need 44px. */
@media (max-width: 1080px) {
  .card-link, .res .card-link {
    min-height: 44px; align-items: center;
  }
  .footer li { margin-bottom: 2px; }
  .footer li a, .footer li > span {
    display: flex; align-items: center; min-height: 42px;
  }
  .mobile-menu a { min-height: 52px; display: flex; align-items: center; }
  .nav-brand { min-height: 44px; }
  .footer-social a { width: 44px; height: 44px; }
}

/* Baseline hit areas at pointer widths too — 17px of text height is a
   small target even for a mouse. Row spacing is moved from margin into
   the link box so the vertical rhythm is unchanged. */
.footer li { margin-bottom: 3px; }
.footer li a, .footer li > span { display: inline-flex; align-items: center; min-height: 30px; }
.card-link, .res .card-link { min-height: 30px; align-items: center; }

/* Must stay LAST: a media query adds no specificity, so the touch
   sizing has to follow the pointer baseline above or the smaller
   min-heights win on phones by source order. */
@media (max-width: 1080px) {
  .card-link, .res .card-link { min-height: 44px; }
  .footer li a, .footer li > span { min-height: 42px; }
  .footer li { margin-bottom: 2px; }
}

/* The eyebrow's tracking makes it wrap on narrow phones; tighten it and
   drop the leading rule below 420px so it stays a single line. */
@media (max-width: 560px) {
  .hero-eyebrow { font-size: 12px; letter-spacing: .1em; }
}
@media (max-width: 420px) {
  .hero-eyebrow::before { display: none; }
}


/* ---------- HERO QUOTE CARD ----------
   White card sitting directly on the footage. It needs the one shadow
   in this stylesheet: everywhere else a hairline separates surfaces on
   paper, but here the card floats on video and a border alone leaves it
   looking pasted on. */
.hero-quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(11, 13, 16, .55);
  padding: clamp(24px, 2.4vw, 32px);
}
.hero-quote .quote-title { font-size: clamp(21px, 2vw, 25px); }
.hero-quote .q-field { margin-bottom: 13px; }
.hero-quote .q-input { min-height: 46px; }
.hero-quote textarea.q-input { min-height: 84px; }
.hero-quote .quote-sub { margin-bottom: 20px; }

/* Optional-field hint inside a form label. */
.q-opt { color: var(--ink-3); font-weight: 500; }

/* The hero's own buttons sit on video, so the secondary one carries a
   solid white field rather than the hairline outline used on paper. */
.hero-actions .btn { min-height: 54px; }

/* Mobile hero: the client's sub-paragraph is long, and at body size it
   ran six lines and pushed the primary CTA to the very edge of the
   fold. Tightened so the buttons sit higher. Contrast is unaffected —
   re-measured at 390x844 with tools/luma.js. */
@media (max-width: 680px) {
  .hero-title { font-size: clamp(33px, 9vw, 40px); line-height: 1.06; }
  .hero-sub { font-size: 16px; line-height: 1.58; margin-top: 18px; }
  .hero-eyebrow { font-size: 11.5px; padding: 9px 14px; margin-bottom: 16px; }
  .hero-actions { margin-top: 24px; gap: 10px; }
  .rating-badge { margin-top: 20px; }
  .hero-brand { margin-bottom: 18px; }
}

/* ---------- MOBILE HERO FRAMING ----------
   Swap the landscape clip for the portrait crop of the same towers, and
   let the video + copy own the first screen so the buildings are the
   first thing seen. The quote form is pushed below the fold, on the
   footage still, but no longer competing with the towers for the opening
   frame. */
@media (max-width: 680px) {
  .hm-desk { display: none; }
  .hm-mob { display: block; }

  /* The video covers only the first screen, not the whole stacked hero.
     Stretched over the full height (copy + form) cover would zoom the
     portrait clip until the towers fell off the sides; bounded to one
     screen it barely zooms, so both towers stay in frame. */
  .hero { min-height: 100svh; background: var(--ink); }
  .hero-media { height: 100svh; bottom: auto; }
  .hero-media img.hm-mob, .hero-media video.hm-mob { object-position: 50% 50%; }

  .hero-inner {
    gap: 22px;
    /* Just clear the nav. The tower crown reads in the top of the frame
       and the copy sits over the darker facade below it — no dead space
       above the logo. */
    padding-top: calc(var(--nav-h) + 4svh);
    padding-bottom: clamp(40px, 8vw, 60px);
  }
  .hero-brand { margin-bottom: 14px; }
  .hero-media img.hm-mob, .hero-media video.hm-mob { object-position: 50% 42%; }

  /* Below the video the hero ground is dark, so the quote form reads as a
     white card on a dark band — the copy above it keeps its shadow. */
}

/* ---------- ABOUT (full-bleed image + floating card) ----------
   A finished modern home fills the section; the copy rides in a white
   card floating over it. Nothing tints the photo — legibility comes from
   the card, the same principle used for the hero quote panel. */
.about-feature {
  position: relative;
  padding: clamp(60px, 8vw, 110px) 0;
  background: var(--paper-2);
  overflow: hidden;
}
.about-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%;
}
.about-card {
  position: relative;
  max-width: 600px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -40px rgba(11, 13, 16, .5);
  padding: clamp(32px, 4vw, 52px);
}
.about-card-title { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 4px; }
.about-card .about-mission {
  margin: 26px 0 24px; padding-left: 20px;
  border-left: 2px solid var(--steel);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; font-weight: 500;
  letter-spacing: -0.012em; color: var(--ink);
}
.about-card .about-p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.72; color: var(--ink-2); }
.about-card .stat-row { margin-top: 30px; padding-top: 28px; }

@media (max-width: 680px) {
  /* Clean stack on a phone: the photo is a normal image up top (the whole
     house in frame), then a compact card overlapping it slightly. No thin
     cut band, no over-long card. */
  .about-feature { padding: 0 0 clamp(46px, 11vw, 64px); background: var(--paper-2); }
  .about-bg { position: relative; inset: auto; width: 100%; height: 232px; object-position: 50% 46%; }
  .about-card { margin-top: -46px; max-width: none; padding: 30px 24px; }
  .about-card-title { font-size: clamp(23px, 6.6vw, 30px); }
  .about-card .about-mission { font-size: 17px; }
}

/* ---------- CTA on mobile ----------
   Full-bleed and clearly visible: the aerial fills a tall block with the
   copy over it, matching the hero's treatment. */
@media (max-width: 680px) {
  .cta-inner {
    min-height: 86svh;
    padding: calc(var(--nav-h) + 44px) var(--gutter) clamp(52px, 13vw, 76px);
    align-items: flex-end;
  }
  .cta-media img, .cta-media video { object-position: 50% 40%; }
  .cta-copy { max-width: none; }
  /* The stretched hairline reads as clutter over the busy skyline — drop it
     on mobile and let the elements breathe. */
  .cta-copy .label::after { display: none; }
  .cta-copy .label { margin-bottom: 20px; }
  .cta-copy .display--xl { font-size: clamp(36px, 10.5vw, 46px); line-height: 1.05; }
  .cta-copy .lede { margin-top: 20px; font-size: 16.5px; line-height: 1.62; }
  .cta-actions { margin-top: 34px; gap: 12px; }
  .cta-actions .btn { width: 100%; min-height: 56px; }
}