/* ============================================================
   LCR V2 — Design System
   Refined editorial dark with emerald + gold + pine.
   Inspired by the v1 glass.css system; tuned for cinematic scale.
   ============================================================ */

:root {
  /* ---------- palette (inherited + tuned) ---------- */
  --pine:      #00301a;
  --pine2:     #00230f;
  --pine3:     #001709;
  --pine4:     #000d05;     /* deeper than v1, for hero scrim */
  --emerald:   #006838;
  --emerald-l: #2e8f5a;     /* a lighter emerald for hover/secondary */
  --gold:      #ffc60b;
  --gold-d:    #e0a800;
  --gold-l:    #ffd84a;
  --bronze:    #b4743a;
  --bone:      #f7f5f0;
  --ink:       #16130d;

  /* ---------- foreground ---------- */
  --fg:        #ffffff;
  --fg-soft:   rgba(247, 245, 240, .82);
  --fg-dim:    rgba(247, 245, 240, .62);
  --fg-faint:  rgba(247, 245, 240, .38);

  /* ---------- glass ---------- */
  --glass-fill:  linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  --glass-fill-2:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  --glass-edge:  rgba(255,255,255,.22);
  --glass-blur:  blur(28px) saturate(180%);
  --glass-lift:  inset 0 1px 0 rgba(255,255,255,.36), 0 38px 80px -38px rgba(0,10,4,.95);

  /* ---------- type ---------- */
  --disp:  "Fraunces", "Playfair Display", Georgia, serif;
  --sys:   "Alegreya Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- layout ---------- */
  --r:       22px;     /* islands, slightly chunkier than v1 */
  --r-ctl:   12px;
  --r-pill:  999px;
  --wrap:    1320px;
  --pad-x:   clamp(1.25rem, 5vw, 4rem);
  --gap-sec: clamp(5.5rem, 11vw, 9.5rem);   /* bigger vertical breathing */

  /* ---------- motion ---------- */
  --ease:    cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --dur:     .9s;
  --dur-2:   1.4s;
  --dur-3:   2.2s;
}

/* ============================================================
   BASE
   ============================================================ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: only dark;
  background: var(--pine3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--fg);
  font-family: var(--sys);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(1200px 800px at 12% -8%, rgba(0,104,56,.10), transparent 60%),
    radial-gradient(1100px 700px at 100% 8%, rgba(255,198,11,.04), transparent 60%),
    var(--pine3);
  overflow-x: hidden;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   TYPOGRAPHY — display
   Fraunces opsz 144 + variable weight + italic for accent.
   The italic-accent-line is the URBANNEST move.
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--disp);
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
  color: #fff;
}

h1 {
  font-size: clamp(3rem, 5.5vw + 1rem, 7.5rem);  /* cinematic */
  line-height: .98;
  letter-spacing: -.028em;
  font-variation-settings: "opsz" 144, "SOFT" 0;
}

h2 {
  font-size: clamp(2.25rem, 3.2vw + 1rem, 4.5rem);
  font-variation-settings: "opsz" 96, "SOFT" 0;
}

h3 {
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2.1rem);
  font-variation-settings: "opsz" 48;
  line-height: 1.1;
}

h4 {
  font-size: 1.18rem;
  font-variation-settings: "opsz" 24;
  line-height: 1.2;
}

p { margin: 0 0 1em; }

.italic-accent {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  font-variation-settings: "opsz" 144;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }

.lede {
  font-size: clamp(1.08rem, .9rem + .35vw, 1.3rem);
  color: var(--fg-soft);
  max-width: 56ch;
  line-height: 1.5;
}

.cap {
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--fg-dim);
  margin-top: .8rem;
  letter-spacing: .005em;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.tick {
  display: block;
  width: 44px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 1.3rem;
}

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  padding: .35rem .75rem;
  border: 1px solid rgba(255,198,11,.4);
  border-radius: var(--r-pill);
  background: rgba(255,198,11,.05);
}

.tlink {
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,198,11,.35);
  padding-bottom: 1px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.tlink:hover { border-color: var(--gold); color: var(--gold-l); }

.skip:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  background: var(--gold);
  color: var(--pine2);
  padding: .7rem 1rem;
  border-radius: var(--r-ctl);
  font-weight: 700;
}

::selection { background: var(--gold); color: var(--pine2); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-ctl);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec {
  padding-block: var(--gap-sec);
  position: relative;
}

.sec-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}

.ambient {
  position: relative;
  isolation: isolate;
  background: var(--pine3);
}
.ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(0,104,56,.10), transparent 70%),
    radial-gradient(900px 500px at 0% 100%, rgba(255,198,11,.04), transparent 70%);
}

/* ============================================================
   GLASS — the v1 workhorse, slightly tuned
   ============================================================ */
.island {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r);
  box-shadow: var(--glass-lift);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
}

.island-soft {
  background: var(--glass-fill-2);
}

.island-gold {
  border-top: 3px solid var(--gold);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--sys);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 1.15rem 1.9rem;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
  transition:
    transform .35s var(--ease),
    background-color .25s var(--ease),
    border-color .25s var(--ease),
    box-shadow .35s var(--ease);
}

.btn .arrow {
  display: inline-block;
  transition: transform .35s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-l), var(--gold) 55%);
  color: var(--pine2);
  box-shadow: 0 18px 44px -18px rgba(255,198,11,.6), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:hover {
  background: var(--gold-l);
  transform: translateY(-2px);
  box-shadow: 0 26px 56px -20px rgba(255,198,11,.75), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:active { transform: translateY(0) scale(.985); }

.btn-glass {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.42);
}
.btn-glass:hover {
  background: rgba(255,255,255,.18);
  border-color: #fff;
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.28);
  padding: 1.15rem 1.5rem;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(0,23,9,.78), rgba(0,23,9,.55));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,198,11,.16);
  box-shadow: 0 18px 50px -30px rgba(0,10,4,.9);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.hdr.is-condensed {
  background: rgba(0, 13, 5, .88);
  border-bottom-color: rgba(255,198,11,.28);
}
.hdr-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  height: 88px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
/* The mark is nearly square (174x170) — give it real presence,
   don't squash it into a wordmark-shaped box. Explicit width +
   flex-shrink:0: at tight widths the flexed header otherwise
   collapses an auto-width image to 0. */
.hdr-logo { flex-shrink: 0; display: block; line-height: 0; }
.hdr-logo img {
  width: 80px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,10,4,.55));
}
@media (max-width: 760px) {
  .hdr-logo img { width: 64px; height: 62px; }
}
/* Desktop: the in-nav Español link belongs to the mobile menu only —
   the ES pill covers language switching up here. */
@media (min-width: 761px) {
  .hdr-nav .hdr-mobile-lang { display: none; }
}
/* Tablet squeeze — INERT. Every declaration below is overridden by a
   later rule of equal-or-higher specificity (.hdr-nav L~440, .hdr-act /
   .hdr-act .hdr-tel / .hdr-act .btn L~470-500, .hdr-in L~2590), so this
   block has never taken effect. Kept as-is (pre-existing); the header now
   collapses to the burger below 1140px instead, which is what actually
   stops the row overflowing. Do not rely on this block. */
@media (min-width: 761px) and (max-width: 1120px) {
  .hdr-in { gap: 1rem; }
  .hdr-nav { gap: 1.1rem; }
  .hdr-nav a { font-size: .88rem; white-space: nowrap; }
  .hdr-tel { font-size: .88rem; }
  .hdr-act { gap: .7rem; }
  .hdr-act .btn { padding: .9rem 1.15rem; font-size: .9rem; }
}
.hdr-nav {
  margin-left: auto;
  display: flex;
  gap: 1.85rem;
  align-items: center;
}
.hdr-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .005em;
  color: rgba(255,255,255,.88);
  position: relative;
  padding: .4rem 0;
  transition: color .25s var(--ease);
}
.hdr-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.hdr-nav a:hover { color: var(--gold); }
.hdr-nav a:hover::after { transform: scaleX(1); }
.hdr-nav a[aria-current="page"] { color: var(--gold); }
.hdr-nav a[aria-current="page"]::after { transform: scaleX(1); }

.hdr-act {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
/* Header phone — boxed mono pill to the right of the CTA, so it reads
   as "the number", not another nav tab */
.hdr-act .hdr-tel {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  padding: .78rem 1.15rem;
  border: 1px solid rgba(255, 198, 11, .38);
  border-radius: var(--r-ctl);
  background: rgba(255, 198, 11, .06);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .35s var(--ease);
}
.hdr-act .hdr-tel:hover {
  border-color: var(--gold);
  background: rgba(255, 198, 11, .12);
  transform: translateY(-1px);
}
.hdr-act .hdr-es { display: none; }
.hdr-act .btn {
  white-space: nowrap;
  padding: .85rem 1.4rem;
  font-size: .92rem;
  letter-spacing: .04em;
  box-shadow: 0 8px 24px -10px rgba(255,198,11,.55);
}
.hdr-act .btn:hover {
  box-shadow: 0 12px 32px -8px rgba(255,198,11,.7);
  transform: translateY(-1px);
}

.mbar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: rgba(0,13,5,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,.08);
  height: 64px;
}
.mbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.mbar a + a {
  background: var(--gold);
  color: var(--pine2);
}

/* ============================================================
   HERO — cinematic
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pine2);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 38%;
  transform: scale(1.06);
  filter: saturate(1.08) brightness(1.1) contrast(1.02);
  transition: transform 12s linear;
  will-change: transform;
}
.hero.is-loaded .hero-bg img { transform: scale(1.0); }

/* Scrim only where text sits: heavy on the left copy column,
   a lighter veil on the right so the ledger stays legible,
   and a bottom fade into the next section. The center of the
   photo is left bright. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(0,13,5,.9) 0%, rgba(0,13,5,.55) 40%, rgba(0,13,5,.1) 72%, rgba(0,13,5,0) 88%),
    linear-gradient(276deg, rgba(0,13,5,.72) 0%, rgba(0,13,5,.28) 16%, rgba(0,13,5,0) 34%),
    linear-gradient(180deg, rgba(0,13,5,.35) 0%, rgba(0,13,5,0) 22%, rgba(0,13,5,0) 58%, rgba(0,23,9,.92) 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 30% 60%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 60%, #000 30%, transparent 80%);
  opacity: .6;
}

.hero-in {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  /* Bottom padding scales with viewport height so the content sits in the
     lower third instead of pooling at the very bottom on tall windows. */
  padding: clamp(7rem, 14vw, 11rem) var(--pad-x) clamp(6rem, 18vh, 14rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-content: end;
}

@media (min-width: 980px) {
  .hero-in { grid-template-columns: 1.55fr .8fr; align-items: end; }
}

.hero-headline {
  max-width: 22ch;
}
.hero h1 .accent {
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
}
.hero-sub {
  margin-top: 1.4rem;
  color: rgba(255,255,255,.92);
  max-width: 50ch;
  font-size: clamp(1.05rem, .9rem + .35vw, 1.25rem);
  line-height: 1.5;
}
.hero-cta-row {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

/* Ledger — records of a real business, not the big-number template.
   Mono label over a serif value, gold rule, dashed dividers. */
.hero-ledger {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: .3rem 0 .3rem 1.5rem;
  border-left: 2px solid var(--gold);
}
.hero-ledger .row {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(247, 245, 240, .2);
}
.hero-ledger .row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.hero-ledger .k {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, .78);
  text-shadow: 0 1px 3px rgba(0, 13, 5, .65);
}
.hero-ledger .v {
  font-family: var(--disp);
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.15rem);
  line-height: 1.05;
  color: #fff;
  letter-spacing: -.02em;
  text-shadow: 0 1px 8px rgba(0, 13, 5, .55);
}
.hero-ledger .v em {
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
  font-size: .6em;
  letter-spacing: 0;
}

/* Legacy stat rail — still used by the services subpages + /es/ */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 1.6rem;
  align-self: end;
  padding: 1.6rem 1.6rem 1.4rem;
  border-left: 2px solid var(--gold);
}
.hero-stats .stat {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.hero-stats .stat .n {
  font-family: var(--disp);
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -.02em;
}
.hero-stats .stat .n .unit {
  color: var(--gold);
  font-size: .82em;
  font-weight: 500;
  margin-left: 1px;
}
.hero-stats .stat .l {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.hero-scroll {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero-scroll .line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll .line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(-100%);
  animation: scroll-pulse 2.2s var(--ease) infinite;
}
@keyframes scroll-pulse {
  0% { transform: translateY(-100%); }
  60% { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ============================================================
   ROOF LOOKUP (satellite)
   ============================================================ */
.lookup {
  position: relative;
  padding-block: clamp(5rem, 10vw, 8rem);
  background:
    radial-gradient(800px 600px at 50% 0%, rgba(0,104,56,.10), transparent 60%),
    var(--pine3);
}
.lookup h2 { max-width: 22ch; }
.lookup h2 .accent { color: var(--gold); font-weight: 500; }
.lookup .lede { margin-top: 1.1rem; max-width: 56ch; }

.lookup-card {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,13,5,.55);
  box-shadow: var(--glass-lift);
}
@media (min-width: 880px) {
  .lookup-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.lookup-form {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.lookup-step { display: none; }
.lookup-step.is-active { display: block; }
.lookup-step h3 {
  font-size: 1.4rem;
  font-variation-settings: "opsz" 48;
  margin-bottom: .4rem;
  color: #fff;
}
.lookup-step p.hint {
  margin: 0 0 1.3rem;
  color: var(--fg-soft);
  font-size: .96rem;
}
.lookup-step label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  margin-bottom: .4rem;
}
.lookup-step .field { margin-top: 1.2rem; }
.lookup-step input[type="text"],
.lookup-step input[type="tel"],
.lookup-step input[type="email"] {
  width: 100%;
  padding: 1rem 1.1rem;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(0, 20, 8, .55);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.lookup-step input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(0, 20, 8, .75);
}
.lookup-step input::placeholder { color: rgba(255,255,255,.55); }

/* ---- address autocomplete dropdown (Nominatim, viewbox DC-metro bias) ---- */
.lookup-step .addr-field { position: relative; }
.lookup-step .addr-dd {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: .35rem;
  list-style: none;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(255,198,11,.25);
  background: linear-gradient(180deg, var(--pine2) 0%, var(--pine3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 40px -16px rgba(0,0,0,.65);
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lookup-step .addr-dd[hidden] { display: none; }
.lookup-step .addr-dd-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .7rem .85rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--fg);
  transition: background-color .12s var(--ease), color .12s var(--ease);
  user-select: none;
}
.lookup-step .addr-dd-item + .addr-dd-item { margin-top: 2px; }
.lookup-step .addr-dd-item:hover,
.lookup-step .addr-dd-item.is-active {
  background: rgba(255,198,11,.10);
  color: var(--gold-l);
}
.lookup-step .addr-dd-item.is-active { outline: 1px solid rgba(255,198,11,.45); outline-offset: -1px; }
.lookup-step .addr-dd-line1 {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: inherit;
}
.lookup-step .addr-dd-line2 {
  font-size: .82rem;
  color: var(--fg-dim);
  font-family: var(--mono);
  letter-spacing: 0.01em;
}
.lookup-step .addr-dd-item:hover .addr-dd-line2,
.lookup-step .addr-dd-item.is-active .addr-dd-line2 { color: var(--fg-soft); }
.lookup-step .addr-dd-status {
  padding: .85rem 1rem;
  color: var(--fg-dim);
  font-size: .9rem;
  font-style: italic;
  list-style: none;
  margin: 0;
}
@media (max-width: 480px) {
  .lookup-step .addr-dd { max-height: 60vh; }
}

.lookup-step .actions {
  margin-top: 1.6rem;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}

.lookup-progress {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.4rem;
}
.lookup-progress .pip {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.lookup-progress .pip.is-on { background: rgba(255,198,11,.3); }
.lookup-progress .pip.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(1);
  animation: pip-fill .55s var(--ease) both;
}
@keyframes pip-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.lookup-map {
  position: relative;
  min-height: 340px;
  background:
    linear-gradient(180deg, rgba(0,13,5,.0) 0%, rgba(0,13,5,.3) 100%),
    url('/assets/v2/lcr-aerial-job.jpg') center/cover no-repeat;
}
/* Live satellite up: retire the static aerial so panel resizes can never
   reveal a second, different picture behind the map. */
.lookup-map.map-live { background: #00230f; }
@media (min-width: 880px) { .lookup-map { min-height: 100%; min-height: 480px; } }
.lookup-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 28%, rgba(0,13,5,.4) 60%, rgba(0,13,5,.7) 100%);
}
.lookup-map .roof-pin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.lookup-map .roof-pin::before {
  content: "";
  width: 64px;
  height: 64px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  position: absolute;
  animation: pin-pulse 2.2s var(--ease) infinite;
}
.lookup-map .roof-pin::after {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255,198,11,.25);
}
@keyframes pin-pulse {
  0% { transform: scale(.4); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.lookup-map .ribbon {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(0,13,5,.65);
  border: 1px solid rgba(255,198,11,.35);
  padding: .4rem .7rem;
  border-radius: var(--r-pill);
}
.lookup-map .meter {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 2;
  background: rgba(0,13,5,.78);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-ctl);
  padding: .9rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .92rem;
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lookup-map .meter .bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 4px;
  overflow: hidden;
}
.lookup-map .meter .bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--emerald-l));
  transition: width .8s var(--ease);
}

/* ============================================================
   SERVICES — bento grid (v1 already uses data-bento=on)
   ============================================================ */
.services {
  padding-block: var(--gap-sec);
  position: relative;
}
.services h2 { max-width: 18ch; }
.services .lede { margin-top: 1.1rem; max-width: 50ch; }

.bento {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(220px, auto); } }

.bento .cell {
  position: relative;
  border-radius: var(--r);
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  padding: 1.5rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .5s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
  min-height: 200px;
}
.bento .cell:hover {
  transform: translateY(-4px);
  border-color: rgba(255,198,11,.55);
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
}
.bento .cell .icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,198,11,.12);
  border: 1px solid rgba(255,198,11,.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  margin-bottom: .4rem;
}
.bento .cell h3 {
  font-size: 1.4rem;
  font-variation-settings: "opsz" 48;
  color: #fff;
}
.bento .cell p {
  margin: 0;
  color: var(--fg-soft);
  font-size: .96rem;
  line-height: 1.45;
}
.bento .cell .more {
  margin-top: auto;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-top: 1rem;
}
.bento .cell .more .arrow { transition: transform .35s var(--ease); }
.bento .cell:hover .more .arrow { transform: translateX(4px); }

.bento .cell.feature {
  grid-column: span 1;
}
@media (min-width: 1080px) {
  .bento .cell.feature { grid-column: span 2; grid-row: span 2; min-height: 440px; }
  .bento .cell.feature h3 { font-size: 2rem; font-variation-settings: "opsz" 96; }
  .bento .cell.feature p  { font-size: 1.05rem; }
}

.bento .cell.featured-roof {
  background:
    linear-gradient(180deg, rgba(0,13,5,.55) 0%, rgba(0,13,5,.78) 55%, rgba(0,13,5,.95) 100%),
    url('/assets/v2/lcr-chimney-work-drone.jpg') center/cover no-repeat;
  border-color: rgba(255,198,11,.35);
}
.bento .cell.featured-roof h3 { color: #fff; }
.bento .cell.featured-roof p   { color: rgba(255,255,255,.92); }
.bento .cell.featured-roof .more { color: var(--gold); }
.bento .cell.featured-roof .icon {
  background: rgba(255,198,11,.18);
  border-color: rgba(255,198,11,.55);
}

/* ============================================================
   PROCESS — 3 steps
   ============================================================ */
.process {
  padding-block: var(--gap-sec);
  position: relative;
  background:
    radial-gradient(800px 500px at 90% 100%, rgba(0,104,56,.08), transparent 70%),
    var(--pine3);
}
.process h2 { max-width: 18ch; }
.process .lede { margin-top: 1.1rem; max-width: 50ch; }

.steps {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative;
  padding: 2rem 1.6rem 1.8rem;
  border-radius: var(--r);
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
}
.step .num {
  font-family: var(--disp);
  font-weight: 500;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  color: var(--gold);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  line-height: 1;
  margin-bottom: 1rem;
  display: block;
}
.step h3 { font-size: 1.4rem; font-variation-settings: "opsz" 48; }
.step p { color: var(--fg-soft); margin: .6rem 0 0; line-height: 1.5; }

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
.ba {
  padding-block: var(--gap-sec);
  position: relative;
}
.ba h2 { max-width: 18ch; }
.ba h2 .accent { color: var(--gold); font-weight: 500; }
.ba .lede { margin-top: 1.1rem; max-width: 50ch; }

/* Single-image hero card with overlay (area pages + storm-insurance).
   Used when the .ba section is a single photo + gradient overlay, NOT a
   before/after comparison. The 2-pane side-by-side pattern is .ba-compare. */
.ba-frame {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.7);
}
.ba-frame > img {
  display: block;
  width: 100%;
  height: auto;
}
.ba-frame .ba-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,13,5,.05) 0%, rgba(0,13,5,.75) 100%);
  display: flex;
  align-items: flex-end;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.ba-compare {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.ba-pane {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.7);
  cursor: pointer;
  outline: none;
  isolation: isolate;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ba-pane img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}
.ba-pane.is-dimmed img {
  opacity: 0.45;
  filter: saturate(0.7);
  transform: scale(0.99);
}
.ba-pane.is-active img {
  opacity: 1;
  filter: none;
  transform: scale(1);
}
.ba-pane.is-active {
  border-color: rgba(255,198,11,.55);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,198,11,.25);
}
.ba-pane:hover { transform: translateY(-2px); }
.ba-pane:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.ba-pane-label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(0,13,5,.82);
  color: var(--gold);
  padding: .45rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,198,11,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
.ba-toolbar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}
.ba-pill {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: .65rem 1.4rem;
  border-radius: var(--r-pill);
  background: rgba(0,13,5,.55);
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.ba-pill:hover {
  color: #fff;
  border-color: rgba(255,255,255,.4);
  background: rgba(0,13,5,.78);
}
.ba-pill.is-on {
  background: var(--gold);
  color: var(--pine2);
  border-color: var(--gold);
  box-shadow: 0 8px 24px -10px rgba(255,198,11,.55);
}
.ba-pill.is-on:hover { background: var(--gold-l); border-color: var(--gold-l); }
.ba-pill:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ============================================================
   TRUST STAT BAND — the cross-DMV table-stakes move
   ============================================================ */
.trust {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,23,9,.0), rgba(0,23,9,.7) 30%, rgba(0,23,9,.7) 70%, rgba(0,23,9,0)),
    var(--pine);
  border-top: 1px solid rgba(255,198,11,.18);
  border-bottom: 1px solid rgba(255,198,11,.18);
}
.trust::before, .trust::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,198,11,.5), transparent);
}
.trust::before { top: 0; }
.trust::after  { bottom: 0; }
.trust-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1.5rem;
}
@media (min-width: 880px) { .trust-stats { grid-template-columns: repeat(4, 1fr); } }
.trust-stat { text-align: left; }
.trust-stat .n {
  font-family: var(--disp);
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.6rem, 1.5rem + 3.5vw, 4.6rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -.025em;
  display: block;
  margin-bottom: .5rem;
}
.trust-stat .n .unit {
  font-size: .5em;
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-left: .05em;
}
.trust-stat .l {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-soft);
  display: block;
}
.trust-stat .sub {
  display: block;
  color: var(--fg-dim);
  font-size: .85rem;
  margin-top: .35rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sys);
}

/* Reviews grid (replaces the stat band) */
.testi-grid {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 820px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi {
  margin: 0;
  padding: 1.6rem 1.6rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-ctl);
  background: linear-gradient(160deg, rgba(0,45,26,.42), rgba(0,23,9,.5));
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.testi .stars {
  color: var(--gold);
  font-size: .95rem;
  letter-spacing: .12em;
}
.testi p {
  margin: 0;
  font-family: var(--disp);
  font-weight: 400;
  font-variation-settings: "opsz" 40;
  font-size: 1.12rem;
  line-height: 1.42;
  color: var(--fg);
  text-wrap: pretty;
}
.testi cite {
  margin-top: auto;
  font-style: normal;
  font-weight: 700;
  font-size: .92rem;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.testi cite span {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ============================================================
   AREAS
   ============================================================ */
.areas {
  padding-block: var(--gap-sec);
  position: relative;
}
.areas h2 { max-width: 22ch; }
.areas .lede { margin-top: 1.1rem; max-width: 56ch; }

.areas-wrap {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 880px) { .areas-wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

.areas-map {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #000;
  border: 1px solid rgba(255,255,255,.10);
}
.areas-map img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(.95);
}
.areas-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,13,5,.5));
}

.cities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .25rem 1.2rem;
}
.cities li a, .cities li span {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 0;
  color: var(--fg-soft);
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.cities li a::before,
.cities li .city-plain::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}
.cities li a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ============================================================
   CTA / CLOSE
   ============================================================ */
.close {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 10vw, 8rem);
  background: var(--pine);
  overflow: hidden;
}
.close .ground-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.close .ground-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .35;
  filter: saturate(.8) contrast(.95);
}
.close .ground-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,23,9,.6), rgba(0,23,9,.95));
}
.close h2 { max-width: 16ch; }
.close h2 .accent { color: var(--gold); font-style: italic; font-weight: 500; }
.close .lede { margin-top: 1.1rem; max-width: 50ch; }
.close-tel {
  margin-top: 1.6rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.close-tel a {
  font-family: var(--disp);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  font-size: clamp(2.2rem, 1.2rem + 2.4vw, 3.6rem);
  color: var(--gold);
  text-decoration: none;
  font-style: italic;
  letter-spacing: -.015em;
  transition: color .25s var(--ease);
}
.close-tel a:hover { color: var(--gold-l); }
.close-tel span {
  color: var(--fg-soft);
  font-size: .95rem;
  font-family: var(--mono);
  letter-spacing: .04em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: var(--pine4);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: clamp(3rem, 6vw, 5rem) 0 0;
}
.foot-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 720px) { .foot-wrap { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot img { width: 120px; height: auto; margin-bottom: 1rem; }
.foot p { color: var(--fg-soft); max-width: 32ch; font-size: .95rem; }
.foot h3 {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  margin: 0 0 1.2rem;
}
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .6rem; }
.foot li a {
  color: var(--fg-soft);
  text-decoration: none;
  font-size: .96rem;
  transition: color .25s var(--ease);
}
.foot li a:hover { color: var(--gold); }
.foot .tel { font-weight: 700; color: #fff !important; }
.foot .addr {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--fg-dim) !important;
  line-height: 1.6;
  margin-top: .6rem;
}
.foot .addr-group {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.foot .addr-label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .55rem;
  display: inline-block;
}
.foot .addr-group .addr:first-of-type { margin-top: 0; }

.foot-base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: 1.5rem !important;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--fg-dim);
  font-size: .85rem;
}
.foot-base a { color: var(--fg-soft); text-decoration: none; }
.foot-base a:hover { color: var(--gold); }

/* ============================================================
   REVEAL ANIMATION — staggered, long, eased
   ============================================================ */
/* No-JS fallback: if JS is disabled or fails to run, .rise elements
   must still be visible. We use a body-level class set by the inline
   gate at the top of the page; if it never gets added, .rise stays
   visible by default and the JS only adds the hidden state when it
   knows the observer is going to fire.

   See v2.js for the progressive-enhancement gate. */
.rise { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.rise.in { opacity: 1; transform: translateY(0); }
.rise[data-d="1"] { transition-delay: .08s; }
.rise[data-d="2"] { transition-delay: .16s; }
.rise[data-d="3"] { transition-delay: .24s; }
.rise[data-d="4"] { transition-delay: .32s; }
.rise[data-d="5"] { transition-delay: .40s; }

.wipe { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.wipe.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .rise, .wipe { opacity: 1; transform: none; transition: none; }
  .hero-bg img { transition: none; }
  .hero-scroll .line::after { animation: none; }
  .lookup-map .roof-pin::before { animation: none; }
}

/* Plain no-JS fallback: when the document has no `.anim` class on the
   <html> element, the .rise gate never fires, so the elements stay
   visible. This catches the case where JS is blocked entirely. */
html:not(.anim) .rise,
html:not(.anim) .wipe {
  opacity: 1;
  transform: none;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: 64px; /* clear sticky mbar */ }
  .hdr-nav { display: none; }
  .hdr-tel { display: none; }
  .hdr-es { display: none; }
  .hdr-burger { display: flex; }
  .hdr-in { gap: 0.5rem; }
  .mbar { display: flex; }
  .hero-in { padding-top: 8.75rem; padding-bottom: 5rem; } /* clears utility bar + header so the eyebrow pill never clips */
  .hero-stats { border-left: none; border-top: 2px solid var(--gold); padding-top: 1.2rem; }
  .lookup-card { grid-template-columns: 1fr; }
  .lookup-map { min-height: 280px; aspect-ratio: 4/3; }
  .ba-compare { grid-template-columns: 1fr; gap: 0.75rem; }
  .ba-pane-label { font-size: .65rem; padding: .35rem .6rem; }
  .ba-pill { font-size: .7rem; padding: .55rem 1.1rem; }
  .foot-base { font-size: .8rem; }
  .cities { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PAGE HERO (sub-pages)
   Lighter than the home .hero — no stats, no scroll cue.
   Used by /about, /contact, /reviews, /our-work, /financing.
   Documented per the brief's "add to v2.css and document here" rule.
   ============================================================ */
.page-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(7rem, 14vw, 11rem) clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
  background: var(--pine3);
}
.page-hero .page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-hero .page-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
  filter: saturate(.85) contrast(.95);
  animation: pageHeroIn 14s var(--ease) both;
}
@keyframes pageHeroIn {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0); }
}
.page-hero .page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,13,5,.7) 0%, rgba(0,13,5,.55) 50%, rgba(0,13,5,.92) 100%),
    linear-gradient(90deg, rgba(0,13,5,.55), transparent 60%);
}
.page-hero .page-hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(900px 600px at 30% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(900px 600px at 30% 30%, #000 30%, transparent 80%);
}
.page-hero h1 {
  max-width: 18ch;
  text-wrap: balance;
}
.page-hero h1 .accent {
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
}
.page-hero .lede {
  margin-top: 1.3rem;
  max-width: 58ch;
  color: var(--fg-soft);
  font-size: clamp(1.1rem, .95rem + .4vw, 1.35rem);
  line-height: 1.5;
}
.page-hero .eyebrow {
  margin-bottom: 1.4rem;
  display: inline-block;
}
.page-hero .page-hero-ctas {
  margin-top: 2rem;
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .page-hero { padding-block: 6.5rem 4rem; }
  .page-hero-bg img { opacity: .45; }
}

/* ============================================================
   FORMS
   Top-level .form / .field / .checkbox / .form-success
   (The .lookup-step form is stepper-scoped and remains unchanged.)
   Used by /contact/ and any future standalone form pages.
   ============================================================ */
.form { display: block; }
.form .field { margin-top: 1.1rem; }
.form .field:first-child { margin-top: 0; }
.form .field label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  margin-bottom: .4rem;
}
.form .field .hint {
  font-size: .82rem;
  color: var(--fg-dim);
  font-weight: 400;
  margin: .3rem 0 0;
}
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form select,
.form textarea {
  width: 100%;
  padding: 1rem 1.1rem;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(0, 20, 8, .55);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.form select option { background: var(--pine2); color: #fff; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(0, 20, 8, .78);
}
.form input::placeholder,
.form textarea::placeholder { color: rgba(255,255,255,.55); }
.form textarea { min-height: 6.5rem; resize: vertical; font-family: inherit; }
.form .checkbox {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-top: 1rem;
  font-size: .92rem;
  color: var(--fg-soft);
  cursor: pointer;
}
.form .checkbox input { margin-top: .25rem; accent-color: var(--gold); }
.form .actions {
  margin-top: 1.6rem;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  align-items: center;
}
.form .legal {
  margin: 1rem 0 0;
  font-size: .78rem;
  color: var(--fg-dim);
  line-height: 1.5;
}
.form-success {
  display: none;
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-radius: var(--r);
  background: rgba(255,198,11,.06);
  border: 1px solid rgba(255,198,11,.35);
}
.form-success.is-shown { display: block; }
.form-success h3 {
  color: var(--gold);
  font-style: italic;
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  margin: 0 0 .8rem;
}
.form-success p { color: var(--fg-soft); max-width: 38ch; margin: 0 auto 1.2rem; }
.form-success a.tlink { display: inline-block; }

/* ============================================================
   WORK GRID
   /our-work/ project cards. Image-on-top, info below.
   Responsive: 1-col mobile, 2-col tablet, 3-col desktop.
   ============================================================ */
.work-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-card {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--ease), border-color .35s var(--ease);
}
.work-card:hover { transform: translateY(-4px); border-color: rgba(255,198,11,.35); }
.work-card .work-card-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--pine3);
  background-image: linear-gradient(135deg, var(--pine3) 0%, var(--pine2) 100%);
}
.work-card .work-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.95) contrast(.95);
  transition: transform .8s var(--ease);
}
.work-card:hover .work-card-img img { transform: scale(1.04); }
.work-card .work-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,13,5,.55));
  pointer-events: none;
}
.work-card .work-card-body {
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}
.work-card .work-card-meta {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.work-card .work-card-meta .dot { color: rgba(255,255,255,.4); margin: 0 .4em; }
.work-card h3 {
  font-size: 1.4rem;
  font-variation-settings: "opsz" 48;
  line-height: 1.15;
  color: #fff;
}
.work-card p {
  color: var(--fg-soft);
  font-size: .98rem;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   REVIEW CARDS
   Used on /reviews/. Glass island with a quote, attribution row.
   ============================================================ */
.review-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 880px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r);
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.review-card .stars {
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: .15em;
  line-height: 1;
}
.review-card blockquote {
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(1.15rem, .95rem + .5vw, 1.4rem);
  font-weight: 500;
  font-variation-settings: "opsz" 48;
  line-height: 1.35;
  color: #fff;
  font-style: italic;
}
.review-card blockquote::before {
  content: "\201C";
  display: block;
  font-size: 2.4em;
  line-height: .5;
  color: var(--gold);
  margin-bottom: .35em;
  font-style: italic;
}
.review-card .review-meta {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.review-card .review-meta .name {
  font-weight: 700;
  color: #fff;
  font-size: .98rem;
}
.review-card .review-meta .via {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ============================================================
   TEAM CARDS
   Used on /about/. Three-up: photo, name, role, bio.
   ============================================================ */
.team-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 880px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.team-card .team-role {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.team-card h3 {
  font-size: 1.5rem;
  font-variation-settings: "opsz" 48;
  line-height: 1.1;
  color: #fff;
}
.team-card p {
  color: var(--fg-soft);
  font-size: .98rem;
  line-height: 1.55;
  margin: 0;
}

/* Team card with photo: used on /about/ when portraits aren't available.
   Image-on-top, info below. Same visual language as .work-card but with
   the team-card padding. */
.team-card.team-card-photo {
  padding: 0;
  overflow: hidden;
}
.team-card.team-card-photo .team-card-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--pine3);
}
.team-card.team-card-photo .team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) contrast(.95);
}
.team-card.team-card-photo .team-card-body {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1;
}
.team-card.team-card-photo h3 {
  margin: 0;
}

/* ============================================================
   PROMISE / VALUES LIST
   Used on /about/. Three-to-four-column icon-light grid.
   ============================================================ */
.promise-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 880px) { .promise-grid { grid-template-columns: repeat(3, 1fr); } }
.promise-item {
  padding: 1.6rem 1.4rem;
  background: var(--glass-fill-2);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r);
}
.promise-item h4 {
  font-size: 1.2rem;
  font-variation-settings: "opsz" 48;
  color: #fff;
  margin: 0 0 .4rem;
}
.promise-item p {
  color: var(--fg-soft);
  font-size: .95rem;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   OFFICES
   Two-column offices block on /contact/.
   ============================================================ */
.offices-grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px) { .offices-grid { grid-template-columns: repeat(2, 1fr); } }
.office-card {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r);
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
}
.office-card h3 {
  font-size: 1.5rem;
  font-variation-settings: "opsz" 48;
  color: #fff;
  margin: 0 0 .6rem;
}
.office-card .addr {
  font-family: var(--mono);
  font-size: .92rem;
  color: var(--fg-soft);
  line-height: 1.6;
  margin: 0 0 1rem;
  letter-spacing: .005em;
}
.office-card .tel {
  font-family: var(--disp);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.5rem, 1rem + 1.2vw, 1.9rem);
  color: var(--gold);
  text-decoration: none;
  font-style: italic;
  letter-spacing: -.015em;
  display: inline-block;
}
.office-card .tel:hover { color: var(--gold-l); }
.office-card .note {
  display: block;
  margin-top: .8rem;
  font-size: .92rem;
  color: var(--fg-soft);
}

/* ============================================================
   TWO-COLUMN CONTENT (intro + media on /contact/)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.split .split-img {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #000;
  border: 1px solid var(--glass-edge);
}
.split .split-img img { width: 100%; height: 100%; object-fit: cover; }
.split .split-copy h2 { margin-bottom: 1rem; }
.split .split-copy p { color: var(--fg-soft); font-size: 1.05rem; line-height: 1.6; }

/* ============================================================
   FINANCING — stat-card style for the 0%/$79 offer row
   ============================================================ */
.fin-stat-row {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (min-width: 880px) { .fin-stat-row { grid-template-columns: repeat(4, 1fr); } }
.fin-stat {
  text-align: left;
  padding: 1.6rem 1.4rem;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r);
  position: relative;
  overflow: hidden;
}
.fin-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}
.fin-stat .n {
  font-family: var(--disp);
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -.025em;
  display: block;
  margin-bottom: .6rem;
}
.fin-stat .n .unit {
  font-size: .55em;
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
  margin-left: .05em;
}
.fin-stat .l {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-soft);
  display: block;
}

/* ============================================
   v2.2 additions — photo cards, mobile polish
   ============================================ */

/* Card with photo bg + dark scrim — replaces icon-only bento cells */
.card-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--pine3);
  text-decoration: none;
  color: inherit;
  transition: transform .5s var(--ease);
}
.card-photo > img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.08) brightness(1.08);
  transition: transform 1.2s var(--ease);
  z-index: 0;
}
.card-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,13,5,0) 0%, rgba(0,13,5,.42) 52%, rgba(0,13,5,.92) 100%);
  z-index: 1;
}
.card-photo > .body {
  position: relative; z-index: 2;
  padding: 1.6rem 1.6rem 1.7rem;
}
.card-photo > .body h3 {
  font-size: clamp(1.4rem, 1.2vw + 1rem, 1.95rem);
  color: #fff;
  margin: 0 0 .45rem;
  line-height: 1.1;
}
.card-photo > .body p {
  color: rgba(255,255,255,.88);
  font-size: .95rem;
  line-height: 1.45;
  margin: 0 0 1rem;
  max-width: 38ch;
}
.card-photo > .body .more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.card-photo:hover { transform: translateY(-3px); }
.card-photo:hover > img.bg { transform: scale(1.04); }

/* Featured (larger) card-photo */
.card-photo.featured {
  min-height: 460px;
  grid-row: span 2;
}
@media (max-width: 720px) {
  .card-photo.featured { min-height: 360px; grid-row: auto; }
}

/* Photo grid wrapper */
.grid-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 720px) { .grid-photos.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .grid-photos.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 980px) { .grid-photos.cols-3 { grid-template-columns: 2fr 1fr 1fr; } }
@media (min-width: 980px) { .grid-photos.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.grid-photos > * { min-width: 0; }

/* 2-column split with copy + photo */
.split-photo {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--pine2);
}
.split-photo > .copy {
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.split-photo > .copy h3 {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.2rem);
  color: #fff;
  margin: 0 0 .8rem;
}
.split-photo > .copy p { color: rgba(255,255,255,.88); max-width: 48ch; }
.split-photo > .copy .more { margin-top: 1.2rem; }
.split-photo > .pic {
  position: relative; min-height: 320px;
  background-size: cover; background-position: center;
}
@media (min-width: 880px) {
  .split-photo { grid-template-columns: 1fr 1fr; }
  .split-photo.flip > .copy { order: 2; }
}

/* Slim section variant */
.tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* ============================================
   MOBILE POLISH — real responsive pass
   ============================================ */
@media (max-width: 760px) {
  /* Hero: smaller h1, tighter padding, single-column stats.
     Bottom padding must clear the 64px sticky mbar + a small gap,
     otherwise the bottom row of stats sits under the action bar. */
  .hero-in {
    /* top must clear the fixed utility bar + 72px header (~116px total),
       or the eyebrow pill renders half-hidden behind them */
    padding: 8.5rem var(--pad-x) 5.5rem;
    gap: 1.6rem;
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.024em;
  }
  .hero .lede, .hero p.hero-sub { font-size: 1rem; }
  .hero-cta-row { gap: .7rem; }
  .hero-cta-row .btn { padding: 1rem 1.4rem; font-size: .95rem; flex: 1; min-width: 0; }
  .hero-ledger {
    border-left: none;
    border-top: 2px solid var(--gold);
    padding: 1.2rem 0 0;
    gap: .9rem;
  }
  .hero-ledger .row { padding-bottom: .9rem; }
  .hero-ledger .v { font-size: 1.5rem; }
  .hero-stats {
    grid-template-columns: 1fr 1fr;
    border-left: none;
    border-top: 2px solid var(--gold);
    padding: 1.2rem 0 0;
    gap: .9rem 1.2rem;
  }
  .hero-stats .stat .n { font-size: 1.6rem; line-height: 1.05; }
  .hero-stats .stat .l { font-size: .82rem; line-height: 1.25; }

  /* Page hero (subpages) */
  .page-hero-bg img { object-position: 60% 35%; }
  .page-hero .wrap { padding-top: 6rem; padding-bottom: 3rem; }
  .page-hero h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  .page-hero .lede { font-size: 1rem; }

  /* Trust stat band: 2x2 on mobile */
  .trust-stats { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.5rem; }
  .trust-stat .n { font-size: 2.2rem; }

  /* Close CTA */
  .close h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .close-tel a { font-size: 1.8rem; }
  .close-tel { flex-direction: column; align-items: flex-start; gap: .5rem; }

  /* Footer: tighter, no wrap */
  .foot-wrap { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .foot-base { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .foot img { width: 96px; }

  /* Section padding tighter on mobile */
  .sec { padding-block: clamp(3.5rem, 8vw, 5rem); }
  .services, .process, .ba, .areas, .lookup, .trust { padding-block: clamp(3.5rem, 8vw, 5.5rem); }
  .lookup .lede { font-size: 1rem; }
  .ba-compare { grid-template-columns: 1fr; gap: 0.75rem; }
  .ba-pane { aspect-ratio: 4/3; }
  .ba-pill { font-size: .7rem; padding: .55rem 1.1rem; }

  /* Bento: force 1 col, taller cards, no icon-only */
  .bento { grid-template-columns: 1fr; gap: 1rem; }
  .bento .cell { min-height: auto; padding: 1.4rem 1.3rem; }
  .bento .cell.featured { min-height: auto; grid-row: auto; }
  .bento .cell .icon { display: none; }
  .bento .cell h3 { font-size: 1.25rem; }

  /* Card photo grid: 1 col on mobile */
  .grid-photos { grid-template-columns: 1fr; gap: 1rem; }
  .card-photo { min-height: 280px; }

  /* mbar (mobile bottom action bar) */
  .mbar { display: flex; }

  /* Steps stack */
  .steps { grid-template-columns: 1fr; }
  .step { padding: 1.6rem; }

  /* Areas map aspect */
  .areas-map { aspect-ratio: 4/3; }

  /* Cities list 2-col still on mobile */
  .cities { grid-template-columns: 1fr 1fr; gap: .2rem .8rem; }

  /* Hero scroll indicator hidden on mobile (no scroll on mobile hero anyway) */
  .hero-scroll { display: none; }

  /* Burger + collapsed-nav panel rules moved to the shared
     `max-width: 1139px` block below — the header needs the same
     collapse on tablet, not just on phones. */
}

@media (max-width: 480px) {
  /* Even tighter for tiny phones */
  .hero h1 { font-size: 2.1rem; }
  .page-hero h1 { font-size: 2rem; }
  .foot-wrap { grid-template-columns: 1fr; }
  .cities { grid-template-columns: 1fr; }
  .trust-stats { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ============================================
   HAMBURGER BUTTON — mobile nav
   ============================================ */
.hdr-burger {
  display: flex;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.3);
  background: transparent;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  color: #fff;
  transition: border-color .25s var(--ease);
}
/* The full 7-item nav + logo + CTA + phone pill only fit together at
   >= ~1113px. Below that the row overflowed and clipped the phone pill
   and CTA off the right edge (invisible, because body has
   overflow-x: hidden). Collapse the nav to the burger below 1140px so
   the phone number and Free Inspection CTA always stay on screen. */
@media (min-width: 1140px) {
  .hdr-burger { display: none; }
}
/* .hdr sets backdrop-filter, which makes it the containing block for its
   position:fixed descendants. That collapsed the open menu panel below to
   the height of the header bar itself, so only the first 1-2 links were
   reachable. Dropping the blur while the menu is open restores the
   viewport as the panel's containing block. The blur is not visible then
   anyway — the near-opaque panel covers everything under the bar. */
.hdr:has(.hdr-nav.is-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* the bar loses its blur here, so give it the panel's own surface —
     otherwise the photo behind it shows through unblurred */
  background: rgba(0, 13, 5, .97);
}

/* Collapsed header: nav behind the burger. Applies on phones AND tablets.
   .hdr-act (Free Inspection + phone pill) deliberately stays visible here —
   it is only hidden at <= 760px, where the sticky .mbar carries both. */
@media (max-width: 1139px) {
  .hdr-nav { display: none; }
  .hdr-nav.is-open {
    display: flex;
    position: fixed;
    /* 80px .hdr-in + its 1px bottom border. The old 88px was written for
       the 88px header and left a strip of the page showing through
       between the bar and this panel. */
    inset: 81px 0 0 0;
    flex-direction: column;
    background: rgba(0, 13, 5, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.5rem var(--pad-x) 2rem;
    gap: 0;
    border-top: 1px solid rgba(255, 198, 11, .2);
    z-index: 49;
    overflow-y: auto;
  }
  .hdr-nav.is-open a {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 1.1rem;
  }
  .hdr-nav .hdr-mobile-lang {
    display: block;
    margin-top: 1.5rem;
    padding: 1rem 0 0;
    border-bottom: none;
    color: var(--gold);
    font-family: var(--mono);
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
}
.hdr-burger:hover { border-color: var(--gold); }
.hdr-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: transform .3s var(--ease);
}
.hdr-burger span::before,
.hdr-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.hdr-burger span::before { top: -6px; }
.hdr-burger span::after { top: 6px; }
.hdr-burger.is-open span { background: transparent; }
.hdr-burger.is-open span::before { top: 0; transform: rotate(45deg); }
.hdr-burger.is-open span::after { top: 0; transform: rotate(-45deg); }

/* ============================================
   HEADER v3 — two-row: utility bar (info) + main bar (wordmark + nav)
   ============================================ */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(0,23,9,.78), rgba(0,23,9,.55));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,198,11,.16);
  box-shadow: 0 18px 50px -30px rgba(0,10,4,.9);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.hdr.is-condensed {
  background: rgba(0, 13, 5, .94);
  border-bottom-color: rgba(255,198,11,.32);
}

/* === Utility bar === */
.hdr-utility {
  background: linear-gradient(90deg, rgba(0,13,5,.45), rgba(0,40,18,.55), rgba(0,13,5,.45));
  border-bottom: 1px solid rgba(255,198,11,.10);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
}
.hdr-utility-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .55rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.hdr-utility-l {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.hdr-utility-l span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.hdr-utility-l .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  box-shadow: 0 0 8px rgba(255,198,11,.6);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(1.15); }
}
.hdr-utility-r {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.hdr-utility-r a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.hdr-utility-r a:hover { color: var(--gold); }
.hdr-utility-r .hdr-utility-tel {
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  font-family: var(--mono);
}

/* Wordmark logo: full LCR EXTERIORS mark (default desktop view) */
/* (logo rules live in the canonical .hdr-logo block above; the
   mark-full / mark-mobile classes have been removed from the HTML —
   the single lcr-logo.png img is sized there.) */
.hdr-utility-r .hdr-utility-sep {
  color: rgba(255,198,11,.35);
  font-size: .65rem;
}
@media (max-width: 760px) {
  .hdr-utility-l .area-tag,
  .hdr-utility-r .hdr-utility-sep,
  .hdr-utility-r .hdr-utility-es { display: none; }
  .hdr-utility-in { padding: .65rem var(--pad-x); font-size: .82rem; }
  .hdr-utility-tel { font-size: .92rem; font-weight: 700; }
  .hdr-utility-l { color: rgba(255,255,255,.92); }
  .hdr-utility-r .hdr-utility-tel { color: #fff; }
  /* On mobile, the Free Inspection button in the header is redundant
     (sticky mbar at bottom has the same CTA). Hide it on mobile
     so the wordmark + burger have room to breathe. */
  .hdr-act { display: none; }
  .hdr-in { height: 72px; gap: 1rem; }
  /* Burger needs margin-left: auto to push to the right edge */
  .hdr-burger { margin-left: auto; border-color: rgba(255,255,255,.5); }
}

/* === Main bar === */
.hdr-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  height: 80px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.legal-hero h1 {
  font-size: clamp(2.4rem, 3vw + 1rem, 4rem);
  font-variation-settings: 'opsz' 96;
  margin: 1rem 0 0;
}
.legal-hero .lede { margin-top: 1.3rem; }
.legal-hero .cap { margin-top: 1.2rem; }

.legal-body {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}
.legal-wrap {
  max-width: 70ch;
  margin-inline: auto;
}
.legal-body h2 {
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2.1rem);
  font-variation-settings: 'opsz' 48;
  margin: 2.4rem 0 0;
  scroll-margin-top: 6rem;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p {
  color: var(--fg-soft);
  margin: .9rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
}
.legal-body p + h2 { margin-top: 2.6rem; }

@media (max-width: 760px) {
  .legal-hero { padding-top: 7rem; padding-bottom: 1.8rem; }
  .legal-hero h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .legal-body p { font-size: 1rem; line-height: 1.65; }
  .legal-body h2 { margin-top: 2rem; }
  .legal-body p + h2 { margin-top: 2.2rem; }
}

/* ============================================================
   v2.3 LAUNCH POLISH (2026-07-27)
   Documented per the brief's "add to v2.css and document here" rule.
   (logo treatment intentionally untouched — owned elsewhere)
   - .note readable aside (replaces long mono .cap paragraphs)
   - form validation + honest send-failure states
   - mbar safe-area (notched iPhones), mobile nav clearance
   - input focus rings, pressed states, reduced-motion completeness
   ============================================================ */

/* Readable aside with links (body face, not mono) */
.note {
  font-family: var(--sys);
  font-size: .98rem;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 60ch;
}
.note .tlink { color: var(--gold); text-underline-offset: 3px; }

/* Honest failure message under forms */
.lookup-fallback {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(255,198,11,.45);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  background: rgba(255,198,11,.08);
  color: #fff;
  font-size: .95rem;
  line-height: 1.55;
}
.lookup-fallback a { color: var(--gold); font-weight: 700; white-space: nowrap; }

/* Inline validation state */
.form .field.is-invalid input,
.form .field.is-invalid select {
  border-color: rgba(255, 122, 92, .8);
  box-shadow: 0 0 0 3px rgba(255, 122, 92, .15);
}

/* Keyboard focus on inputs (overrides earlier outline:none on :focus) */
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible,
.lookup-card input:focus-visible,
.lookup-card select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Pressed states (only .btn-primary had one) */
.btn-ghost:active,
.btn-glass:active { transform: translateY(1px) scale(.995); }
.card-photo:active { transform: translateY(-1px) scale(.998); }

/* Mobile money-bar: clear the iPhone home indicator */
.mbar {
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 760px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* open mobile nav: last links must clear the mbar */
  .hdr-nav.is-open { padding-bottom: calc(64px + 2rem + env(safe-area-inset-bottom, 0px)); }
  /* utility bar: never let the phone number wrap mid-digit */
  .hdr-utility-tel { white-space: nowrap; }
  .hdr-utility-l span { white-space: nowrap; }
}

/* Burger: 44px minimum tap target */
.hdr-burger { width: 44px; height: 44px; }

/* Stat figures: lining tabular digits */
.hero-stats .stat .n,
.hero-ledger .v,
.trust-stat .n { font-variant-numeric: lining-nums tabular-nums; }

/* Hero stat labels sit over photography — match the ledger's shadow */
.hero-stats .stat .l { text-shadow: 0 1px 3px rgba(0, 13, 5, .65); }

/* Consent line inside the lookup card */
.lookup-card .legal {
  margin-top: .9rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 52ch;
}

/* Reduced motion: complete the pass (page-hero zoom, pulsing dot,
   pip fill, smooth scroll) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page-hero .page-hero-bg img { animation: none; }
  .hdr-utility-l .dot { animation: none; }
  .lookup-progress .pip::after { animation: none; }
  .card-photo,
  .card-photo > img.bg { transition: none; }
}

/* Credential chip strip (replaces the orphan SEO paragraphs on service pages) */
.cred-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .7rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cred-strip li {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-soft);
  border: 1px solid rgba(255,198,11,.26);
  border-radius: var(--r-pill);
  padding: .55rem 1rem;
  background: rgba(255,198,11,.05);
  white-space: nowrap;
}
.cred-strip li::before { content: "\2713\00a0\00a0"; color: var(--gold); }
@media (max-width: 480px) {
  .cred-strip li { white-space: normal; }
}

/* Subpage heroes whose photo is already dark (golden hour / dusk):
   ease the scrim and lift the image so the photo actually reads. */
.hero--photo-dark .hero-bg img {
  filter: saturate(1.12) brightness(1.22) contrast(1.04);
}
.hero--photo-dark .hero-bg::after {
  background:
    linear-gradient(96deg, rgba(0,13,5,.82) 0%, rgba(0,13,5,.42) 38%, rgba(0,13,5,.05) 70%, rgba(0,13,5,0) 88%),
    linear-gradient(180deg, rgba(0,13,5,.25) 0%, rgba(0,13,5,0) 24%, rgba(0,13,5,0) 60%, rgba(0,23,9,.85) 100%);
}

/* Live satellite view inside the lookup panel (Leaflet + Esri World Imagery).
   Sits under the pin/ribbon/meter overlays; fades in once real tiles load.
   The static aerial background remains as the graceful fallback. */
#lookup-live-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .7s var(--ease);
  background: transparent;
}
#lookup-live-map.is-live { opacity: 1; }
#lookup-live-map .leaflet-container {
  width: 100%; height: 100%;
  background: var(--pine3);
  font-family: var(--sys);
}
#lookup-live-map .leaflet-control-attribution {
  background: rgba(0,13,5,.6);
  color: rgba(255,255,255,.55);
  font-size: .62rem;
}
#lookup-live-map .leaflet-control-attribution a { color: rgba(255,255,255,.7); }


/* ---------- before/after drag slider (v23) ---------- */
.ba-slider {
  position: relative;
  margin-top: 2.5rem;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  aspect-ratio: 3 / 2;
  max-height: 72vh;
  --pos: 50%;
}
.ba-slider .ba-under,
.ba-slider .ba-over img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ba-slider .ba-over {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-slider .ba-bar {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(255, 198, 11, .55);
  pointer-events: none;
}
.ba-slider .ba-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold); color: #12160f;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}
.ba-slider .ba-tag {
  position: absolute; top: 1rem; z-index: 2;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .65rem; border-radius: var(--r-pill);
  background: rgba(0, 13, 5, .72); color: #f7f5f0;
  border: 1px solid rgba(255, 255, 255, .22);
  pointer-events: none;
}
.ba-slider .ba-tag-before { left: 1rem; }
.ba-slider .ba-tag-after { right: 1rem; }
.ba-slider .ba-range {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  touch-action: none;
}
.ba-slider:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 640px) { .ba-slider { aspect-ratio: 4 / 3; } }

/* ---------- text-only team cards (v23) ---------- */
.team-card > .team-role { margin-bottom: .55rem; padding-top: .2rem; border-top: 2px solid var(--gold); }
.team-card > h3 { margin: 0 0 .7rem; }

/* hero stat shadow — readable over bright photos (v24) */
.hero-stats .stat .n, .hero-stats .stat .l { text-shadow: 0 1px 12px rgba(0,13,5,.85); }


/* ---------- free-inspection drawer (v30) ----------
   Pins to the right edge; the page stays scrollable behind it. */
.fi-ovl { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.fi-ovl[hidden] { display: none; }
.fi-back {
  position: absolute; inset: 0;
  background: rgba(0, 10, 4, .38);
  opacity: 0; transition: opacity .22s ease;
  pointer-events: auto;
}
.fi-ovl.is-open .fi-back { opacity: 1; }
.fi-card {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  overflow-y: auto;
  background: rgba(0, 20, 8, .94);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid rgba(255, 255, 255, .14);
  padding: clamp(1.6rem, 4vh, 2.4rem) 2rem 2rem;
  box-shadow: -30px 0 70px -30px rgba(0, 0, 0, .65);
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  pointer-events: auto;
}
.fi-ovl.is-open .fi-card { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fi-back, .fi-card { transition: none; }
}
.fi-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.fi-card h3 {
  color: #fff; font-size: 1.75rem; font-weight: 600;
  line-height: 1.12; margin: 0; text-wrap: balance;
}
.fi-sub { margin: .45rem 0 0; font-size: .92rem; color: rgba(247, 245, 240, .62); }
.fi-x {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28); background: transparent;
  color: rgba(255, 255, 255, .85); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.fi-x:hover, .fi-x:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.fi-form { display: flex; flex-direction: column; gap: 1rem; }
.fi-fld label {
  display: block; font-size: .84rem; font-weight: 600;
  color: rgba(247, 245, 240, .78); margin-bottom: .35rem;
}
.fi-fld input, .fi-fld select {
  width: 100%; font: inherit; font-size: 1rem; color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-ctl); padding: .85rem .95rem;
  transition: border-color .2s ease, background .2s ease;
}
.fi-fld input:hover, .fi-fld select:hover { border-color: rgba(255, 255, 255, .38); }
.fi-fld input:focus, .fi-fld select:focus {
  outline: none; border-color: var(--gold);
  background: rgba(255, 255, 255, .10);
}
.fi-fld select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%23ffc60b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  padding-right: 2.4rem;
}
.fi-fld.is-bad input, .fi-fld.is-bad select { border-color: #e0603a; }
.fi-send { margin-top: .35rem; width: 100%; font-size: 1rem; padding: 1rem 1.2rem; }
.fi-assure { margin: .7rem 0 0; font-size: .8rem; line-height: 1.5; color: rgba(247, 245, 240, .5); }
.fi-alt {
  margin: 1.1rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .92rem; color: rgba(247, 245, 240, .72);
}
.fi-alt a { color: var(--gold); font-weight: 600; text-decoration: none; }
.fi-alt a:hover { text-decoration: underline; }
.fi-fallback { margin: .7rem 0 0; font-size: .88rem; color: #ffd9a0; }
.fi-fallback a { color: var(--gold); }
.fi-done h3 { color: var(--gold); font-style: italic; }
.fi-done p { color: rgba(247, 245, 240, .78); font-size: .95rem; }
.fi-done a { color: var(--gold); }


/* ---------- hero form card (v32) ----------
   Static rectangular card in the hero right column. */
.fs-slot { position: relative; }
.fs-card {
  width: 100%; max-width: 400px; margin-left: auto;
  background: rgba(0, 20, 8, .74);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--r);
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 70px -30px rgba(0, 0, 0, .6);
}
@media (max-width: 1099px) {
  .fs-card { margin: 0 auto; }
}
.fs-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; }
.fs-card h3 { color: #fff; font-size: 1.4rem; font-weight: 600; line-height: 1.1; margin: 0; }
.fs-form { display: flex; flex-direction: column; gap: .8rem; }
.fs-fld label { display: block; font-size: .82rem; font-weight: 600; color: rgba(247, 245, 240, .78); margin-bottom: .3rem; }
.fs-fld input, .fs-fld select {
  width: 100%; font: inherit; font-size: .98rem; color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-ctl); padding: .72rem .85rem;
  transition: border-color .2s ease, background .2s ease;
}
.fs-fld input:hover, .fs-fld select:hover { border-color: rgba(255, 255, 255, .38); }
.fs-fld input:focus, .fs-fld select:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .10); }
.fs-fld select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%23ffc60b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.3rem;
}
.fs-fld.is-bad input, .fs-fld.is-bad select { border-color: #e0603a; }
.fs-send { width: 100%; margin-top: .2rem; }
.fs-assure { margin: .55rem 0 0; font-size: .76rem; line-height: 1.5; color: rgba(247, 245, 240, .5); }
.fs-fallback { margin: .6rem 0 0; font-size: .85rem; color: #ffd9a0; }
.fs-fallback a { color: var(--gold); }
.fs-done h3 { color: var(--gold); font-style: italic; }
.fs-done p { color: rgba(247, 245, 240, .78); font-size: .92rem; }
.fs-done a { color: var(--gold); }


/* ---------- trust ledger band under the hero (v32) ---------- */
.ledger-band {
  padding: clamp(1.4rem, 3.5vw, 2.4rem) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.hero-ledger.is-band {
  flex-direction: row;
  flex-wrap: wrap;
  align-self: auto;
  border-left: 0;
  padding: 0;
  gap: 1rem 0;
}
.hero-ledger.is-band .row {
  flex: 1 1 210px;
  border-bottom: 0;
  padding: .25rem 1rem .25rem 1.5rem;
  border-left: 1px dashed rgba(247, 245, 240, .2);
}
.hero-ledger.is-band .row:first-child { border-left: 2px solid var(--gold); }


/* ============================================================
   BLOG  (added 2026-07-28)

   Two page types:
     - the article, at the ORIGINAL WordPress URL /<slug>/ (root
       level, not under /blog/), so rankings and backlinks survive
     - the listing, at /blog/

   Templates:  migration/blog-data/template-post.html
               migration/blog-data/template-index.html

   Everything below reuses the existing tokens (--gold, --disp,
   --mono, --r, --ease...) and the existing chrome (.hdr, .foot,
   .mbar, .page-hero, .island, .btn, .close, .work-grid,
   .work-card). The only genuinely new work is (a) what long-form
   prose needs, including the raw Gutenberg markup the posts ship
   with — details/summary, wp-block-table, wp-block-embed — and
   (b) a listing rhythm that is deliberately NOT a flat 3-column
   card wall (brief anti-slop rule 4).

   Nothing outside this section is modified.
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.4rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.crumbs a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.crumbs a:hover { border-bottom-color: var(--gold); }
.crumbs .sep { color: rgba(247, 245, 240, .3); }
.crumbs [aria-current="page"] {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- article hero ----------
   .page-hero does the photo, scrim and grid; this only retunes the
   type, because an article title is a sentence, not a 7.5rem slogan.
   Same move as .legal-hero. */
.post-hero { padding-block: clamp(7rem, 13vw, 10rem) clamp(2.5rem, 5vw, 4rem); }
.post-hero h1 {
  max-width: 22ch;
  font-size: clamp(2.2rem, 2.6vw + 1rem, 3.9rem);
  font-variation-settings: "opsz" 96, "SOFT" 0;
  line-height: 1.04;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 1.4rem 0 0;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.post-meta time { color: var(--fg-soft); }
.post-meta .sep { color: var(--gold); }

/* ---------- article body ----------
   Measure is the point: ~72ch of Alegreya Sans at 1.08rem is the
   65-75ch reading target from the brief. */
.post-wrap { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); }
.post-body {
  max-width: 72ch;
  margin-inline: auto;
  color: var(--fg-soft);
  font-size: 1.08rem;
  line-height: 1.75;
}
.post-body > *:first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.15rem; }
.post-body strong { color: #fff; font-weight: 700; }
.post-body em { font-style: italic; }
.post-body .has-text-align-center { text-align: center; }

/* h2 carries the gold rule (same device as .tick), h3 is plain white,
   h4 is a mono label — three levels you can tell apart at a glance.
   .post-body h1 is here because one legacy post ships an <h1> inside
   its body; rendering it at h2 scale keeps one visual top heading. */
.post-body h1,
.post-body h2 {
  font-size: clamp(1.6rem, 1.1vw + 1.15rem, 2.15rem);
  font-variation-settings: "opsz" 48;
  line-height: 1.15;
  color: #fff;
  margin: 2.8rem 0 .9rem;
  scroll-margin-top: 6rem;
}
.post-body h1::before,
.post-body h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 1rem;
  background: var(--gold);
  border-radius: 2px;
}
.post-body h3 {
  font-size: 1.32rem;
  font-variation-settings: "opsz" 24;
  line-height: 1.25;
  color: #fff;
  margin: 2rem 0 .7rem;
  scroll-margin-top: 6rem;
}
.post-body h4 {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 1.8rem 0 .6rem;
}

.post-body ul,
.post-body ol {
  margin: 1.2rem 0 1.6rem;
  padding-left: 1.35rem;
  display: grid;
  gap: .55rem;
}
.post-body li { line-height: 1.65; }
.post-body li::marker { color: var(--gold); font-weight: 700; }
.post-body li > ul,
.post-body li > ol { margin: .55rem 0 0; }

.post-body a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 198, 11, .35);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.post-body a:hover { color: var(--gold-l); border-bottom-color: var(--gold); }

.post-body blockquote {
  margin: 1.8rem 0;
  padding: .3rem 0 .3rem 1.5rem;
  border-left: 2px solid var(--gold);
  font-family: var(--disp);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 48;
  font-size: clamp(1.15rem, .95rem + .5vw, 1.35rem);
  line-height: 1.4;
  color: #fff;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body blockquote cite {
  display: block;
  margin-top: .8rem;
  font-family: var(--mono);
  font-size: .78rem;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.post-body figure { margin: 2rem 0; }
.post-body img { width: 100%; height: auto; border-radius: var(--r-ctl); }
/* Body face, not mono: some of these captions are full sentences, and
   mono at caption size is unreadable at that length. Same call the v2.3
   polish pass made when it introduced .note. */
.post-body figcaption,
.post-body .wp-element-caption {
  margin-top: .8rem;
  font-family: var(--sys);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--fg-dim);
  text-align: center;
}
.post-body hr {
  margin: 2.4rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Gutenberg video embeds ship a fixed width/height on the iframe */
.post-body .wp-block-embed { margin: 2rem 0; }
.post-body .wp-block-embed__wrapper { margin: 0; }
.post-body iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-ctl);
  background: var(--pine2);
}

/* Gutenberg tables: never let one push the page sideways.
   The frame lives on the <table>, not the <figure>, so a
   <figcaption> reads as a caption below the box rather than as a
   cramped last row inside it.
   Both selectors are deliberate: the extractor strips wp-block-*
   class names, so the :has() rule is what actually fires on the
   shipped pages and the class rule is the belt-and-braces. */
.post-body .wp-block-table,
.post-body figure:has(table) {
  margin: 2rem 0;
  overflow-x: auto;
}
.post-body table {
  width: 100%;
  min-width: 32rem;
  font-size: .97rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-ctl);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.post-body th,
.post-body td {
  padding: .85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
/* these posts use a bold first ROW instead of a <thead> */
.post-body thead th,
.post-body table tr:first-child td {
  background: rgba(255, 198, 11, .08);
  color: #fff;
}
.post-body tbody tr:last-child td { border-bottom: 0; }
.post-body th.has-text-align-center,
.post-body td.has-text-align-center { text-align: center; }

/* Gutenberg FAQ accordions (details/summary) */
.post-body details {
  margin: .6rem 0;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-ctl);
  background: var(--glass-fill-2);
  overflow: hidden;
}
.post-body summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  list-style: none;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  transition: color .25s var(--ease);
}
.post-body summary::-webkit-details-marker { display: none; }
.post-body summary:hover { color: var(--gold); }
.post-body summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: .38rem;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.post-body details[open] summary::after { transform: rotate(-135deg); }
.post-body details > *:not(summary) { padding-inline: 1.2rem; }
.post-body details > *:last-child { padding-bottom: .4rem; }

/* ---------- end-of-article conversion block ----------
   The article's one job is still making the phone ring. Gold rule on
   top (.island-gold's device), CTA + the number spelled out. */
.post-cta {
  max-width: 72ch;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--glass-edge);
  border-top: 3px solid var(--gold);
  border-radius: var(--r);
  background: var(--glass-fill-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.post-cta h2 {
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
  font-variation-settings: "opsz" 48;
  margin: .7rem 0 .8rem;
}
.post-cta h2 .accent { color: var(--gold); font-style: italic; font-weight: 500; }
.post-cta p { max-width: 52ch; margin: 0 0 1.5rem; color: var(--fg-soft); }
.post-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
.post-cta-tel {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 198, 11, .35);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.post-cta-tel:hover { color: var(--gold-l); border-bottom-color: var(--gold); }

/* ---------- prev / next ---------- */
.post-pn {
  max-width: 72ch;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 760px) { .post-pn { grid-template-columns: 1fr 1fr; } }
.pn {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-ctl);
  background: var(--glass-fill-2);
  text-decoration: none;
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.pn:hover { border-color: rgba(255, 198, 11, .55); transform: translateY(-2px); }
.pn .pn-k {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.pn .pn-t {
  font-family: var(--disp);
  font-weight: 600;
  font-variation-settings: "opsz" 24;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #fff;
}
.pn-next { align-items: flex-end; text-align: right; }
/* newest post has no "previous", so Next lands in the left column */
.post-pn .pn-next:first-child { align-items: flex-start; text-align: left; }
.pn-all {
  grid-column: 1 / -1;
  align-items: center;
  text-align: center;
}

/* ============================================================
   /blog/ LISTING
   Rhythm on purpose: one lead article (split, photo-led), two
   secondary cards (reusing .work-grid/.work-card), a gold band,
   then the rest as a scannable two-column index — NOT 40 identical
   rounded cards stacked in a wall.
   ============================================================ */
.blog-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 940px) {
  .blog-lead { grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
}
.blog-lead-pic {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--pine2);
}
.blog-lead-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.blog-lead-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 13, 5, .5));
  pointer-events: none;
}
.blog-lead:hover .blog-lead-pic img { transform: scale(1.04); }
.blog-lead h2 {
  margin: .8rem 0 0;
  font-size: clamp(1.9rem, 1.8vw + 1.1rem, 3rem);
  font-variation-settings: "opsz" 96;
  line-height: 1.06;
}
.blog-lead h2 a {
  color: #fff;
  text-decoration: none;
  transition: color .25s var(--ease);
}
.blog-lead h2 a:hover { color: var(--gold); }
.blog-lead p { max-width: 54ch; margin: 1rem 0 0; color: var(--fg-soft); }

.blog-meta {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.blog-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.3rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.blog-more .arrow { transition: transform .35s var(--ease); }
.blog-more:hover .arrow,
.blog-lead:hover .blog-more .arrow { transform: translateX(4px); }

/* two secondary articles — the site's existing project-card rhythm */
.blog-duo { grid-template-columns: 1fr; }
@media (min-width: 820px) { .blog-duo { grid-template-columns: 1fr 1fr; } }
.blog-duo .work-card { text-decoration: none; color: inherit; }
.blog-duo .work-card h3 { transition: color .25s var(--ease); }
.blog-duo .work-card:hover h3 { color: var(--gold); }

/* the remaining articles — an index, not a card wall */
.blog-index {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, .10);
}
@media (min-width: 1000px) {
  .blog-index {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
}
.blog-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1rem 1.2rem;
  align-items: center;
  padding: 1.15rem .2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: inherit;
  text-decoration: none;
  transition: background-color .3s var(--ease), padding-left .3s var(--ease);
}
.blog-row:hover { background: rgba(255, 198, 11, .05); padding-left: .8rem; }
.blog-row-thumb {
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--pine2);
}
.blog-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-row-k {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.blog-row h3 {
  margin: .3rem 0 .25rem;
  font-size: 1.08rem;
  font-variation-settings: "opsz" 24;
  line-height: 1.25;
  color: #fff;
  transition: color .25s var(--ease);
}
.blog-row:hover h3 { color: var(--gold); }
.blog-row p {
  margin: 0;
  color: var(--fg-dim);
  font-size: .9rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* mid-page break so the listing is never one uninterrupted run */
.blog-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 820px) { .blog-band { grid-template-columns: 1fr auto; gap: 2.5rem; } }
.blog-band h2 {
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2.1rem);
  font-variation-settings: "opsz" 48;
  margin: 0 0 .6rem;
}
.blog-band h2 .accent { color: var(--gold); font-style: italic; font-weight: 500; }
.blog-band p { max-width: 52ch; margin: 0; color: var(--fg-soft); }
.blog-band-act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; }

/* ---------- blog mobile ---------- */
@media (max-width: 760px) {
  .crumbs [aria-current="page"] { max-width: 18ch; }
  .post-hero { padding-block: 7.5rem 2rem; }
  .post-hero h1 { font-size: clamp(1.9rem, 7.5vw, 2.5rem); }
  .post-body { font-size: 1.02rem; line-height: 1.7; }
  .post-body h1,
  .post-body h2 { font-size: 1.45rem; margin-top: 2.2rem; }
  .post-body h3 { font-size: 1.16rem; margin-top: 1.7rem; }
  .post-body table { min-width: 26rem; }
  .post-pn { grid-template-columns: 1fr; }
  .pn-next { align-items: flex-start; text-align: left; }
  .blog-lead h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .blog-row { grid-template-columns: 56px 1fr; gap: .9rem; }
  .blog-row-thumb { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-lead-pic img,
  .blog-row,
  .blog-more .arrow,
  .pn { transition: none; }
  .blog-lead:hover .blog-lead-pic img,
  .pn:hover { transform: none; }
  .blog-row:hover { padding-left: .2rem; }
}

/* fixes 2026-07-28: nav squeeze band + 3-button mbar (Text us) */
@media (min-width:1140px) and (max-width:1240px){
  .hdr-nav{gap:14px}
  .hdr-nav a{font-size:13px;white-space:nowrap}
}
.mbar{gap:0}
.mbar a{flex:1 1 0;text-align:center}
.mbar .mbar-sms{background:#12291b;color:var(--gold,#ffc60b);border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12)}
.lf-photo-row{margin-top:10px}
.lf-photo-row label{display:block;font-size:12.5px;margin-bottom:6px;opacity:.85}
.lf-photo-row input[type=file]{width:100%;font-size:12.5px;color:inherit}