/* ==========================================================================
   MR. RESTORATION INC. — SITE STYLESHEET
   Design direction: "Response" — light editorial, insurance-grade trust.
   Palette inherited from core.css (sampled from the client's logo).
   ========================================================================== */

body {
  background: #fff; color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 1.03rem; line-height: 1.68; overflow-x: hidden;
}
/* Display: Anton, a single-weight ultra-condensed poster face, uppercase.
   No negative tracking needed — it's already dense — and font-weight/
   font-stretch are harmless no-ops here (font-synthesis-weight:none above
   stops any fake-bold), kept only so the .disp-xl override still has
   somewhere to land if the display face is ever swapped back. */
h1, h2, h3, .disp {
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: -.005em; line-height: .98; text-wrap: balance;
}
h1, .disp-xl { font-weight: 900; letter-spacing: -.008em; }
/* Emphasis inside a headline. A grotesque doesn't want an italic here —
   the colour shift carries it, and it survives at any width. */
.it { color: var(--flag-red); }
strong, b { font-weight: 600; }

/* Every number on the site. See --font-mono in core.css. */
.num, .mono {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.eyebrow {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--flag-red);
  display: flex; align-items: center; gap: .65rem;
}
.eyebrow::before { content: ''; width: 26px; height: 1.5px; background: var(--flag-red); flex: none; }
.eyebrow.c { justify-content: center; }

/* ---------- Emergency ribbon ---------- */
.ribbon {
  background: var(--flag-red); color: #fff;
  font-size: .82rem; text-align: center; padding: .5rem 1rem;
  position: relative; z-index: 810;
}
.ribbon a { color: var(--fire-300); font-weight: 700; text-decoration: none; }
.ribbon a:hover { text-decoration: underline; }
@media (max-width: 640px) { .ribbon { font-size: .76rem; } }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 800; background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--ink-200);
}
.hdr-in {
  display: flex; align-items: center; gap: 1.25rem; padding: .8rem 0;
  width: min(1200px, 100% - var(--gutter)*2); margin-inline: auto;
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; flex: none; }
.brand img { width: 44px; height: auto; }
.brand b {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: .95rem;
  letter-spacing: -.01em; color: var(--navy-600); display: block; line-height: 1.15;
}
.brand > span > span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.nav { display: flex; gap: .1rem; margin-left: auto; align-items: center; }
.nav > a, .nav > .navdrop > button {
  padding: .55rem .8rem; border-radius: 8px; text-decoration: none;
  font-size: .88rem; font-weight: 500; color: var(--ink-700);
  transition: background .2s, color .2s; display: inline-flex; align-items: center; gap: .3rem;
}
.nav > a:hover, .nav > .navdrop > button:hover { background: var(--ink-100); color: var(--navy-600); }
.nav > a[aria-current="page"] { color: var(--flag-red); font-weight: 600; }

/* dropdown */
.navdrop { position: relative; }
.navdrop > button::after {
  content: ''; width: 6px; height: 6px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform .25s;
}
.navdrop[data-open="true"] > button::after { transform: rotate(-135deg) translateY(-2px); }
.drop-menu {
  position: absolute; top: calc(100% + .5rem); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 265px; background: #fff; border: 1px solid var(--ink-200);
  border-radius: 14px; box-shadow: var(--sh-3); padding: .5rem;
  opacity: 0; visibility: hidden; transition: opacity .22s, transform .22s, visibility .22s;
}
.navdrop[data-open="true"] .drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop-menu a {
  display: block; padding: .6rem .8rem; border-radius: 9px; text-decoration: none;
  color: var(--navy-600); font-size: .9rem; font-weight: 600; transition: background .18s;
}
.drop-menu a span { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-500); margin-top: .1rem; }
.drop-menu a:hover { background: var(--ink-100); }
.drop-div { display: block; height: 1px; margin: .4rem .5rem; background: var(--ink-200); }
.drop-partner { color: var(--flag-red) !important; }
.drop-partner:hover { background: rgba(179,25,66,.07) !important; }

/* ---------- 3D scroll scene (Friedman & Son: framing → finished) ----------
   Canvas is decorative only; a static image is the real content and sits
   underneath at all times, so a missing library, no WebGL, or reduced-motion
   all degrade to a plain photo with zero layout shift. */
.build3d-stage {
  position: relative; height: 62vh; min-height: 380px; max-height: 560px;
  border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
  box-shadow: var(--sh-3);
}
.build3d-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.build3d-fallback { position: absolute; inset: 0; z-index: 0; }
.build3d-fallback img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.build3d-stage.no-3d canvas { display: none; }
.build3d-caption {
  position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 2; color: #fff;
  font-family: var(--font-display); font-weight: 900; font-stretch: 100%;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); letter-spacing: -.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce) {
  .build3d-stage canvas { display: none !important; }
}

.hdr-cta {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  padding: .62rem 1.15rem; border-radius: 8px; text-decoration: none;
  font-weight: 700; font-size: .88rem; color: #fff; background: var(--flag-red);
  transition: transform .25s var(--ease-spring), background .25s;
}
.hdr-cta:hover { background: var(--fire-600); transform: translateY(-2px); }
.hdr-cta svg { width: 14px; height: 14px; }

/* mobile menu */
.burger { display: none; margin-left: auto; padding: .5rem; border-radius: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--navy-600); border-radius: 2px; }
.burger span + span { margin-top: 5px; }
@media (max-width: 1000px) {
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 84vw);
    background: #fff; flex-direction: column; align-items: stretch; gap: .2rem;
    padding: 5.5rem 1.25rem 2rem; box-shadow: var(--sh-3);
    transform: translateX(100%); transition: transform .38s var(--ease-out);
    overflow-y: auto; z-index: 820;
  }
  .nav.open { transform: none; }
  .nav > a, .nav > .navdrop > button { width: 100%; padding: .8rem .9rem; font-size: 1rem; }
  .navdrop > button { justify-content: space-between; }
  .drop-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; border-left: 2px solid var(--ink-200);
    border-radius: 0; margin: .2rem 0 .4rem .9rem; padding: .2rem 0 .2rem .5rem;
    min-width: 0; display: none;
  }
  .navdrop[data-open="true"] .drop-menu { display: block; }
  .burger { display: block; }
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(12,16,32,.4); z-index: 815;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .nav-scrim.on { opacity: 1; visibility: visible; }
}
@media (max-width: 600px) { .hdr-cta span.full { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1rem 1.85rem; border-radius: 8px; text-decoration: none;
  font-weight: 700; font-size: 1rem; text-align: center;
  transition: transform .28s var(--ease-spring), box-shadow .28s, background .25s, border-color .25s;
}
/* Press feedback: every button variant gets a tactile squash on click,
   layered on top of whatever MRFX.magnetic is doing via translate3d. */
.btn:active { transform: scale(.96) !important; transition-duration: .12s; }
/* Fill-wipe: a circle grows from the pointer's entry point on hover. Cheap
   (one pseudo-element, transform-only) and skipped entirely under
   prefers-reduced-motion via the global rule in core.css. */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: .1;
  transform: scale(0); transform-origin: var(--bx, 50%) var(--by, 50%);
  transition: transform .5s var(--ease-out);
}
.btn:hover::before { transform: scale(2.2); }
.btn-p { background: var(--flag-red); color: #fff; box-shadow: 0 8px 26px rgba(179,25,66,.28); }
.btn-p:hover { background: var(--fire-600); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(179,25,66,.36); }
/* Friedman & Son's own primary: same system, flag-blue instead of flag-red,
   so the two companies read as partners rather than duplicates. */
.btn-p2 { background: var(--flag-blue); color: #fff; box-shadow: 0 8px 26px rgba(11,49,98,.32); }
.btn-p2:hover { background: var(--water-600); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,49,98,.4); }
.btn-s { border: 1.5px solid var(--ink-200); color: var(--navy-600); background: #fff; }
.btn-s:hover { border-color: var(--navy-600); transform: translateY(-3px); }
.btn-w { background: #fff; color: var(--navy-600); }
.btn-w:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.btn-o { border: 1.5px solid rgba(255,255,255,.4); color: #fff; }
.btn-o:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-3px); }
.btn-sm { padding: .72rem 1.3rem; font-size: .9rem; }

/* ---------- Sections ---------- */
.sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.sec-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.sec-alt { background: var(--ink-50); }
/* Full-bleed color-block band, not a subtle-accent-on-white treatment —
   this is the USA red used boldly, not just as a text accent. */
.sec-navy { background: var(--ink-50); color: var(--ink-700); border-block: 1px solid var(--ink-200); }
.sec-navy h2, .sec-navy h3 { color: var(--navy-600); }
.sec-navy .eyebrow { color: var(--flag-red); }
.sec-navy .eyebrow::before { background: var(--flag-red); }
.sec-head { max-width: 60ch; margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); display: grid; gap: 1.05rem; }
.sec-head.c { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head h2 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); }
.sec-head p { color: var(--ink-500); font-size: 1.05rem; }
.sec-navy .sec-head p { color: var(--ink-500); }

/* ---------- Trust strip ---------- */
/* Full-bleed flag-blue block, hairline dividers via the gap-as-border trick
   (container is the divider color, children carry the real background). */
.trust-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: rgba(255,255,255,.18);
}
.trust-strip div { background: var(--flag-blue); padding: 1.25rem 1.4rem; }
.trust-strip b { display: block; font-family: var(--font-display); font-weight: 800; letter-spacing: -.005em; text-transform: uppercase; font-size: 1.5rem; color: #fff; line-height: 1; }
.trust-strip span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); }

/* ---------- Hero ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -30%; right: -12%; width: min(760px, 72vw);
  aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(113,186,227,.2), rgba(113,186,227,0) 66%);
}
.hero-in {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 960px) { .hero-in { grid-template-columns: 1fr; } }
/* Hero headline. Line 1 is "Water. Fire. Mold." and a hard <br> puts
   "Handled." underneath it, so the type has to be sized to keep all three
   loss types on one line at every width. The measured line is ~7.1em wide,
   so each step below is capped to (container width / 7.1). */
.hero h1 { font-size: clamp(2.2rem, 12vw, 6rem); margin: 1.25rem 0 1.4rem; }
@media (min-width: 520px) { .hero h1 { font-size: clamp(3.9rem, 9vw, 5.4rem); } }
@media (min-width: 961px) { .hero h1 { font-size: clamp(3rem, 5.8vw, 5.4rem); } }

/* Hero headline colour. Each loss type carries its own ombre, the way the
   owner asked for it: water dark to light blue, fire red to orange, mold dark
   green down into a blackish blue, and "Handled." lands flat black.

   The gradient is declared against two selectors on purpose. text.js splits
   each word into a .kt-w mask holding a TRANSFORMED inner span, and a
   transformed descendant paints into its own stacking context, so a
   background-clip:text set only on the wrapper would never clip to it. The
   first selector paints the split markup, the second the unsplit fallback
   (reduced motion, or JavaScript off). --kt-grad is a custom property, so it
   inherits from the wrapper down to whichever element actually paints. */
.hero h1 .w > .kt-w > span,
.hero h1 .w {
  background-image: var(--kt-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero h1 .w-water   { --kt-grad: linear-gradient(100deg, #0b3162 0%, #3d8ccb 100%); }
.hero h1 .w-fire    { --kt-grad: linear-gradient(100deg, #b31942 0%, #f16a32 100%); }
.hero h1 .w-mold    { --kt-grad: linear-gradient(100deg, #2e7d4f 0%, #0a1330 100%); }
.hero h1 .w-handled { --kt-grad: linear-gradient(100deg, #000000 0%, #000000 100%); }
.hero .lede { font-size: clamp(1.03rem, 1.5vw, 1.18rem); color: var(--ink-700); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.trust-row {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.2rem;
  padding-top: 1.5rem; border-top: 1px solid var(--ink-200);
  font-size: .84rem; color: var(--ink-500);
}
.trust-row b { color: var(--navy-600); }
.trust-row > span { display: flex; align-items: center; gap: .5rem; }
.tick { width: 17px; height: 17px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; flex: none; }
.tick svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3.4; fill: none; }

/* hero photo stack */
.hstack { position: relative; perspective: 1400px; }
.hstack figure { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--sh-3); transform-style: preserve-3d; }
.hstack figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hero-video {
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 20px; box-shadow: var(--sh-3); background: var(--ink-100);
}
.hstack .tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; }
.hstack .float {
  position: absolute; background: #fff; border-radius: 15px; padding: .85rem 1.05rem;
  box-shadow: var(--sh-3); display: flex; align-items: center; gap: .7rem; z-index: 3;
}
.hstack .float b { font-size: 1.05rem; font-family: var(--font-display); font-weight: 800; font-stretch: 88%; letter-spacing: -.02em; color: var(--navy-600); display: block; line-height: 1; }
.hstack .float span { font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-500); }
.hstack .f1 { bottom: -1.1rem; left: -1.1rem; animation: bob 6s ease-in-out infinite; }
.hstack .f2 { top: -1.1rem; right: -.9rem; animation: bob 7.5s ease-in-out infinite reverse; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* On narrow screens the copy leads and the photo follows. Someone whose house
   is flooding should hit the headline and the phone number first, not a
   full-width photograph. */
@media (max-width: 960px) {
  .hstack { order: 1; margin-top: 2.25rem; }
  .hstack .f1 { left: .5rem; }
  .hstack .f2 { right: .5rem; }
}
.hstack .mini { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ink-100); flex: none; }
.hstack .mini svg { width: 17px; height: 17px; stroke: var(--flag-red); fill: none; stroke-width: 2; }

/* ---------- 3D house (interactive damage map, home hero) ----------
   Pure CSS 3D transforms, no canvas/WebGL — an architectural cutaway built
   from five absolutely-positioned faces sharing one origin. Relit for a
   light page (soft shadows instead of a dark-mode glow) and the four zones
   are colour-coded to the site's own four services below it. */
.h3d-stage {
  position: relative; height: clamp(360px, 48vw, 520px); perspective: 1200px;
  display: grid; place-items: center; touch-action: pan-y; cursor: grab;
  background: radial-gradient(ellipse at center, var(--ink-50), #fff 70%);
  border-radius: var(--radius-lg); border: 1px solid var(--ink-200);
}
.h3d-stage:active { cursor: grabbing; }
.h3d-house { position: relative; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(-56deg) rotateZ(-32deg); transition: transform .08s linear; }
.h3d-house > div { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.h3d-floor { width: 300px; height: 220px; margin: -110px 0 0 -150px;
  background: #fff;
  background-image: linear-gradient(var(--ink-200) 1px, transparent 1px), linear-gradient(90deg, var(--ink-200) 1px, transparent 1px);
  background-size: 30px 30px; border: 1px solid var(--ink-300); box-shadow: var(--sh-2);
}
.h3d-wall { background: linear-gradient(180deg, #fff, var(--ink-50)); border: 1px solid var(--ink-300); box-shadow: var(--sh-1); }
.h3d-w-n { width: 300px; height: 104px; margin: -52px 0 0 -150px; transform: translateY(-110px) rotateX(90deg); }
.h3d-w-s { width: 300px; height: 104px; margin: -52px 0 0 -150px; transform: translateY(110px) rotateX(90deg); }
.h3d-w-w { width: 220px; height: 104px; margin: -52px 0 0 -110px; transform: translateX(-150px) rotateY(90deg) rotateZ(90deg); }
.h3d-w-e { width: 220px; height: 104px; margin: -52px 0 0 -110px; transform: translateX(150px) rotateY(90deg) rotateZ(90deg); }
.h3d-zone { position: absolute; border-radius: 4px; cursor: pointer; transition: background .3s, box-shadow .3s, transform .3s; }
.h3d-zone.on { box-shadow: 0 0 0 2px currentColor, 0 0 22px currentColor; transform: translateZ(3px); }
.h3d-pin { position: absolute; width: 0; height: 0; }
.h3d-pin i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: h3d-ping 2.2s infinite; }
@keyframes h3d-ping { 70% { box-shadow: 0 0 0 16px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.h3d-col { position: absolute; width: 4px; margin-left: -2px; background: linear-gradient(0deg, currentColor, transparent);
  transform-origin: 50% 100%; opacity: 0; transition: opacity .4s, height .5s var(--ease-out); pointer-events: none; }
.h3d-zone.on .h3d-col { opacity: .75; }
.h3d-hint { position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); }
.h3d-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.h3d-btn { font-family: var(--font-mono); font-size: .74rem; padding: .5rem .9rem; border-radius: 8px;
  border: 1.5px solid var(--ink-200); color: var(--ink-500); background: #fff; transition: .2s; }
.h3d-btn:hover { border-color: var(--navy-600); color: var(--navy-600); }
.h3d-btn[aria-pressed="true"] { background: var(--c, var(--flag-red)); color: #fff; border-color: transparent; font-weight: 700; }
.h3d-readout { margin-top: 1.1rem; border: 1px solid var(--ink-200); border-radius: 12px; overflow: hidden; background: #fff; }
.h3d-readout-hd { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500); }
.h3d-readout-hd i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--flag-red)); }
.h3d-readout-bd { padding: 1.1rem; display: grid; gap: .8rem; }
.h3d-readout-bd h4 { font-size: 1.05rem; }
.h3d-readout-bd p { font-size: .9rem; color: var(--ink-500); }
.h3d-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .5rem; }
.h3d-kv div { border: 1px solid var(--ink-200); border-radius: 8px; padding: .6rem .65rem; }
.h3d-kv b { font-family: var(--font-mono); display: block; font-size: .95rem; color: var(--navy-600); }
.h3d-kv span { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
@media (max-width: 640px) { .h3d-stage { height: 320px; } }

/* ---------- Page hero (interior pages) ---------- */
.phero { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--ink-50); border-bottom: 1px solid var(--ink-200); }
.phero-in { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 900px) { .phero-in { grid-template-columns: 1fr; } }
.phero h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); margin: 1.1rem 0 1.2rem; }
.phero p { color: var(--ink-700); max-width: 54ch; font-size: 1.06rem; }
.phero figure { border-radius: 20px; overflow: hidden; box-shadow: var(--sh-3); }
.phero figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.crumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; color: var(--ink-500); margin-bottom: .3rem; }
.crumb a { color: var(--ink-500); text-decoration: none; }
.crumb a:hover { color: var(--flag-red); }
.crumb span[aria-current] { color: var(--navy-600); font-weight: 600; }

/* ---------- Before / after slider ---------- */
.ba { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--sh-3); user-select: none; touch-action: pan-y; cursor: ew-resize; }
.ba img { display: block; width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.ba .after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 0 26px rgba(0,0,0,.35); z-index: 3; }
.ba .knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: var(--sh-2); display: grid; place-items: center; }
.ba .knob svg { width: 22px; height: 22px; stroke: var(--navy-600); fill: none; stroke-width: 2.2; }
.ba .lbl { position: absolute; top: 1rem; padding: .35rem .8rem; border-radius: 100px; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; z-index: 4; backdrop-filter: blur(8px); }
.ba .lbl-b { left: 1rem; background: rgba(179,25,66,.9); color: #fff; }
.ba .lbl-a { right: 1rem; background: rgba(22,163,74,.9); color: #fff; }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 5; }
.ba input[type=range]:focus-visible ~ .handle { box-shadow: 0 0 0 3px var(--fire-400); }
@media (max-width: 640px) { .ba img { aspect-ratio: 3/2; } .ba .knob { width: 44px; height: 44px; } .ba .lbl { font-size: .6rem; padding: .28rem .6rem; } }

/* ---------- Cards / services ---------- */
.svcs { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.svc {
  background: #fff; border: 1px solid var(--ink-200); border-radius: 20px;
  padding: 2rem 1.7rem; position: relative; display: flex; flex-direction: column;
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s;
  transform-style: preserve-3d; text-decoration: none; color: inherit;
}
.svc:hover { box-shadow: var(--sh-3); border-color: transparent; }
.svc .tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; }
.svc-ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.15rem; background: var(--bg, linear-gradient(135deg, var(--water-600), var(--water-400))); }
.svc-ic svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.svc h3 { font-size: 1.4rem; margin-bottom: .55rem; }
.svc p { color: var(--ink-500); font-size: .94rem; }
.svc ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .38rem; }
.svc li { display: flex; gap: .5rem; font-size: .86rem; color: var(--ink-700); }
.svc li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--flag-red); margin-top: .58rem; flex: none; }
.svc .more { margin-top: auto; padding-top: 1.1rem; font-size: .88rem; font-weight: 700; color: var(--flag-red); display: inline-flex; align-items: center; gap: .4rem; transition: gap .25s; }
.svc:hover .more { gap: .7rem; }

/* ---------- Prose ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 2.4rem 0 .9rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.12rem; margin: 1.8rem 0 .5rem; color: var(--navy-600); letter-spacing: -.01em; }
.prose p { margin-bottom: 1.05rem; color: var(--ink-700); }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.3rem; display: grid; gap: .5rem; color: var(--ink-700); }
.prose li::marker { color: var(--acc-bullet); }
.prose a { color: var(--flag-red); }
.callout {
  border-left: 3px solid var(--flag-red); background: var(--ink-50);
  padding: 1.15rem 1.35rem; border-radius: 0 12px 12px 0; margin: 1.6rem 0;
}
.callout b { display: block; color: var(--navy-600); margin-bottom: .25rem; }
.callout p { margin: 0; font-size: .95rem; }

/* two-col layout for interior pages */
.split-page { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 940px) { .split-page { grid-template-columns: 1fr; } }
.aside { position: sticky; top: 92px; display: grid; gap: 1rem; }
.aside-card { border: 1px solid var(--ink-200); border-radius: 18px; padding: 1.4rem; background: #fff; }
.aside-card.hi { background: var(--ink-50); border-color: var(--flag-red); color: var(--ink-700); }
.aside-card.hi h3, .aside-card.hi b { color: var(--navy-600); }
.aside-card h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: .95rem; margin-bottom: .6rem; color: var(--navy-600); }
.aside-card p { font-size: .88rem; color: var(--ink-500); }
.aside-card.hi p { color: var(--ink-500); }
.aside-list { list-style: none; padding: 0; display: grid; gap: .1rem; }
.aside-list a { display: block; padding: .55rem .7rem; border-radius: 9px; text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--navy-600); transition: background .2s; }
.aside-list a:hover { background: var(--ink-100); }
.aside-list a[aria-current="page"] { background: var(--ink-100); color: var(--flag-red); }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); counter-reset: sc; }
.steps article { background: #fff; border: 1px solid var(--ink-200); border-radius: 18px; padding: 1.5rem; }
.steps article::before { counter-increment: sc; content: counter(sc, decimal-leading-zero); font-family: var(--font-mono); font-weight: 500; font-size: 1.7rem; letter-spacing: -.03em; color: var(--flag-red); line-height: 1; display: block; margin-bottom: .4rem; }
.steps h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.1rem; margin-bottom: .35rem; color: var(--navy-600); }
.steps p { font-size: .89rem; color: var(--ink-500); }

/* vertical process with sticky media */
.vproc { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2rem,5vw,4rem); align-items: start; }
@media (max-width: 900px) { .vproc { grid-template-columns: 1fr; } .vproc-media { display: none; } }
.vproc-media { position: sticky; top: 100px; border-radius: 20px; overflow: hidden; box-shadow: var(--sh-2); }
.vproc-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease-out); }
.vproc-media img.on { opacity: 1; position: relative; }
.vsteps { display: grid; gap: .4rem; }
.vstep { padding: 1.4rem 1.4rem 1.4rem 2.4rem; border-left: 2px solid var(--ink-200); position: relative; transition: border-color .4s; }
.vstep::before { content: ''; position: absolute; left: -7px; top: 1.8rem; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-200); transition: background .4s, transform .4s; }
.vstep.on { border-left-color: var(--flag-red); }
.vstep.on::before { background: var(--flag-red); transform: scale(1.35); }
.vstep h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.vstep p { color: var(--ink-500); font-size: .93rem; }
.vstep .n { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); margin-bottom: .35rem; }

/* ---------- Chart ---------- */
.chart { background: #fff; border: 1px solid var(--ink-200); border-radius: 20px; padding: 1.7rem; box-shadow: var(--sh-1); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--ink-200); stroke-width: 1; }
.chart .axis { font-size: 9px; fill: var(--ink-400); font-family: 'Inter', sans-serif; }
.chart .curve { fill: none; stroke-width: 3; stroke-linecap: round; }
.chart .target { stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .pt { opacity: 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1rem; font-size: .78rem; color: var(--ink-500); }
.chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: .4rem; vertical-align: middle; }

/* ---------- Forms / AI ---------- */
.field { display: grid; gap: .4rem; }
.field label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem; border-radius: 11px;
  border: 1px solid var(--ink-200); background: #fff;
  transition: border-color .22s, box-shadow .22s;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--flag-red); box-shadow: 0 0 0 3px rgba(179,25,66,.1); outline: none; }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .45rem .9rem; border-radius: 100px; font-size: .82rem; font-weight: 600; border: 1px solid var(--ink-200); background: #fff; color: var(--ink-700); transition: .22s; }
.chip:hover { border-color: var(--flag-red); color: var(--flag-red); }
.chip[aria-pressed="true"] { background: var(--flag-red); color: #fff; border-color: var(--flag-red); }

.rep { background: #fff; border: 1px solid var(--ink-200); border-radius: 22px; overflow: hidden; box-shadow: var(--sh-2); }
.rep-hd { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--ink-200); background: var(--ink-50); }
.rep-hd img { width: 30px; }
.rep-hd b { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-600); }
.rep-hd .stamp { margin-left: auto; font-size: .7rem; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.rep-body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.rep-out { display: none; border-top: 1px solid var(--ink-200); }
.rep-out.on { display: block; animation: fu .5s var(--ease-out) both; }
@keyframes fu { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rep-sum { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding: clamp(1.4rem,3vw,2rem); align-items: center; background: var(--ink-50); }
@media (max-width: 540px) { .rep-sum { grid-template-columns: 1fr; } }
.sev { position: relative; width: 88px; height: 88px; flex: none; }
.sev svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sev .n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.55rem; color: var(--navy-600); }
.sev .n small { font-size: .42em; color: var(--ink-400); }
.rep-cat { font-family: var(--font-display); font-weight: 800; font-stretch: 88%; letter-spacing: -.025em; font-size: 1.5rem; color: var(--navy-600); }
.pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.pill { padding: .28rem .7rem; border-radius: 100px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pill-c { background: rgba(233,63,58,.11); color: #b3241e; }
.pill-w { background: rgba(246,168,60,.16); color: #8a5a06; }
.pill-i { background: rgba(30,99,176,.11); color: var(--water-700); }
.pill-o { background: rgba(22,163,74,.12); color: #15803d; }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rep-col { padding: clamp(1.3rem,2.6vw,1.9rem); border-right: 1px solid var(--ink-200); border-top: 1px solid var(--ink-200); }
.rep-col:last-child { border-right: 0; }
.rep-col h4 { font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--flag-red); margin-bottom: .85rem; }
.rep-col ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .55rem; font-size: .9rem; color: var(--ink-700); }
.rep-col p { font-size: .9rem; color: var(--ink-700); }
.ev { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.ev span { font-family: ui-monospace, Menlo, monospace; font-size: .7rem; padding: .2rem .5rem; border-radius: 5px; background: var(--ink-100); color: var(--ink-700); }
.bars { display: grid; gap: .45rem; margin-top: .8rem; }
.bar { display: grid; grid-template-columns: 80px 1fr 38px; gap: .55rem; align-items: center; font-size: .74rem; color: var(--ink-500); }
.bar .t { height: 5px; border-radius: 3px; background: var(--ink-100); overflow: hidden; }
.bar .f { height: 100%; background: linear-gradient(90deg, var(--water-500), var(--flag-red)); width: 0; transition: width .9s var(--ease-out); }

/* photo scanner */
.scan-wrap { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 860px) { .scan-wrap { grid-template-columns: 1fr; } }
.drop {
  position: relative; border-radius: 20px; min-height: 300px;
  border: 2px dashed var(--ink-300); background: var(--ink-50);
  display: grid; place-items: center; text-align: center; padding: 2rem;
  transition: border-color .3s, background .3s; cursor: pointer; overflow: hidden;
}
.drop:hover, .drop.over { border-color: var(--flag-red); background: rgba(179,25,66,.04); }
.drop canvas, .drop img.preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop canvas { z-index: 2; pointer-events: none; }
.drop .drop-msg { position: relative; z-index: 3; display: grid; gap: .55rem; justify-items: center; }
.drop.has .drop-msg { display: none; }
.drop-msg svg { width: 38px; height: 38px; stroke: var(--flag-red); fill: none; stroke-width: 1.6; }
.drop-msg b { color: var(--navy-600); font-size: 1.02rem; font-family: 'Inter', sans-serif; font-weight: 700; }
.drop-msg span { font-size: .84rem; color: var(--ink-500); }
.scan-samples { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .85rem; }
.scan-samples button { width: 62px; height: 44px; border-radius: 8px; overflow: hidden; padding: 0; border: 1px solid var(--ink-200); opacity: .8; transition: all .25s; }
.scan-samples button:hover { opacity: 1; border-color: var(--flag-red); transform: translateY(-2px); }
.scan-samples img { width: 100%; height: 100%; object-fit: cover; }
.scan-out { display: grid; gap: 1rem; }
.panel { border: 1px solid var(--ink-200); border-radius: 18px; padding: 1.4rem; background: #fff; }
.feat-grid { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
.feat { padding: .7rem .8rem; border-radius: 10px; background: var(--ink-50); border: 1px solid var(--ink-200); }
.feat b { display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 88%; letter-spacing: -.02em; font-size: 1.05rem; color: var(--navy-600); }
.feat span { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }

/* estimator */
.est { display: grid; gap: 1.6rem; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); }
@media (max-width: 900px) { .est { grid-template-columns: 1fr; } }
.rng { display: grid; gap: .45rem; margin-bottom: 1.3rem; }
.rng-top { display: flex; justify-content: space-between; align-items: baseline; }
.rng-top label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.rng-top b { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1rem; color: var(--flag-red); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 4px; background: var(--ink-200); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 21px; height: 21px; border-radius: 50%; background: var(--flag-red); border: 2px solid #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(179,25,66,.4); }
input[type=range]::-moz-range-thumb { width: 19px; height: 19px; border-radius: 50%; background: var(--flag-red); border: 2px solid #fff; cursor: pointer; }
.tot { text-align: center; padding: 1.7rem 1.2rem; border-radius: 20px; background: var(--navy-600); color: #fff; }
.tot .v { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.04em; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.tot .s { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fire-300); font-weight: 700; }
.lines { display: grid; margin-top: 1rem; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--ink-200); font-size: .89rem; }
.line:last-child { border-bottom: 0; }
.line span { color: var(--ink-700); }
.line small { display: block; color: var(--ink-400); font-size: .75rem; }
.line b { color: var(--navy-600); font-variant-numeric: tabular-nums; }
.disclaim { font-size: .78rem; color: var(--ink-500); line-height: 1.6; padding: .85rem 1rem; border-radius: 10px; background: var(--ink-50); border-left: 3px solid var(--flag-red); margin-top: 1rem; }

/* ---------- Photos ---------- */
.pgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.pc { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--sh-1); }
.pc img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.pc:hover img { transform: scale(1.06); }
.pc figcaption { position: absolute; inset: auto 0 0 0; padding: 1.4rem .9rem .8rem; background: linear-gradient(0deg, rgba(12,16,32,.9), transparent); color: #fff; font-size: .82rem; font-weight: 600; }
.pc .real { position: absolute; top: .6rem; left: .6rem; z-index: 2; padding: .2rem .5rem; border-radius: 5px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--ok); color: #fff; }
.imgnote { font-size: .68rem; line-height: 1.45; color: var(--ink-400); margin-top: .9rem; max-width: 62ch; opacity: .85; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .6rem; max-width: 840px; }
.faq details { border: 1px solid var(--ink-200); border-radius: 15px; background: #fff; transition: border-color .3s, box-shadow .3s; }
.faq details[open] { border-color: var(--navy-600); box-shadow: var(--sh-1); }
.faq summary { padding: 1.1rem 1.35rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.02rem; color: var(--navy-600); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--flag-red); flex: none; line-height: 1; transition: transform .35s var(--ease-spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .b { padding: 0 1.35rem 1.2rem; color: var(--ink-700); font-size: .95rem; }
.faq .b a { color: var(--flag-red); }

/* ---------- Contact ---------- */
.cgrid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: start; }
@media (max-width: 900px) { .cgrid { grid-template-columns: 1fr; } }
.irow { display: flex; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--ink-200); align-items: flex-start; }
.irow:last-child { border-bottom: 0; }
.irow .ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--ink-100); }
.irow .ic svg { width: 18px; height: 18px; stroke: var(--flag-red); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.irow b { display: block; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-400); margin-bottom: .12rem; }
.irow a, .irow p { color: var(--navy-600); text-decoration: none; font-weight: 600; font-size: 1.01rem; }
.irow a:hover { color: var(--flag-red); }
.cform { background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 22px; padding: clamp(1.5rem, 3.4vw, 2.4rem); }

/* ---------- CTA band ---------- */
.band { background: #fff; color: var(--ink-700); padding: clamp(3.5rem, 7vw, 5.5rem) 0; text-align: center; border-top: 1px solid var(--ink-200); }
.band h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--navy-600); margin-bottom: 1rem; }
.band p { color: var(--ink-500); max-width: 52ch; margin: 0 auto 1.8rem; }
.band .row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------- Footer ---------- */
.ftr { padding: 3.5rem 0 2.5rem; background: var(--navy-600); color: var(--ink-200); }
.ftr-in { display: grid; gap: 2rem; grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .ftr-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr-in { grid-template-columns: 1fr; } }
.ftr h4 { font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .8rem; }
.ftr a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .9rem; display: block; padding: .26rem 0; }
.ftr a:hover { color: var(--fire-300); }
.ftr .brand b { color: #fff; }
.ftr .brand > span > span { color: rgba(255,255,255,.55); }
.ftr-bot { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .79rem; color: rgba(255,255,255,.55); }

/* ==========================================================================
   TWO-COLUMN CONTENT BLOCK
   Used for text + chart pairings. Collapses on small screens — previously
   these were inline styles with no breakpoint, which squeezed the drying
   chart into a 167px column on a phone.
   ========================================================================== */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 2rem; } }

/* ==========================================================================
   MOBILE IMAGE TREATMENT
   Goal: the same considered proportions as desktop, at phone scale — rather
   than full-bleed photos stacked into an endless column.
   ========================================================================== */
@media (max-width: 720px) {

  /* --- Before / after: keep the cinematic band, just scaled.
         16/9 keeps almost the whole 21/9 frame visible so the comparison
         still means something, instead of cropping the room away. --- */
  .ba { border-radius: 16px; }
  .ba img { aspect-ratio: 16 / 9; }
  .ba .knob { width: 42px; height: 42px; }
  .ba .knob svg { width: 17px; height: 17px; }
  .ba .handle { width: 2px; }
  .ba .lbl { font-size: .58rem; padding: .26rem .6rem; top: .6rem; letter-spacing: .1em; }
  .ba .lbl-b { left: .6rem; }
  .ba .lbl-a { right: .6rem; }

  /* --- Photo grid: two-up gallery instead of four full-width slabs.
         Square cells read as a considered set rather than a photo dump. --- */
  .pgrid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .pc { aspect-ratio: 1 / 1; border-radius: 12px; }
  .pc figcaption { padding: .9rem .55rem .5rem; font-size: .62rem; line-height: 1.3; font-weight: 600; }
  .pc .real { font-size: .68rem; padding: .2rem .45rem; top: .4rem; left: .4rem; }

  /* --- Hero photo: shorter crop so the headline and CTA stay near the top --- */
  .hstack { max-width: 460px; margin-inline: auto; }
  .hstack figure { border-radius: 16px; }
  .hstack figure img { aspect-ratio: 3 / 2; }
  .hstack .float { padding: .6rem .75rem; border-radius: 12px; gap: .5rem; }
  .hstack .float b { font-size: 1.05rem; }
  .hstack .float span { font-size: .58rem; }
  .hstack .mini { width: 28px; height: 28px; border-radius: 8px; }
  .hstack .mini svg { width: 14px; height: 14px; }
  .hstack .f1 { bottom: -.7rem; left: -.2rem; }
  .hstack .f2 { top: -.7rem; right: -.2rem; }

  /* --- Interior page hero image --- */
  .phero figure { border-radius: 16px; max-width: 520px; margin-inline: auto; }
  .phero figure img { aspect-ratio: 3 / 2; }

  /* --- Trust strip: 2x2 rather than four stacked rows --- */
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-strip div { padding: 1rem; }
  .trust-strip b { font-size: 1.3rem; }
  .trust-strip span { font-size: .66rem; }

  /* --- Scanner drop zone: shorter, still comfortably tappable --- */
  .drop { min-height: 230px; padding: 1.5rem; border-radius: 16px; }
  .drop-msg svg { width: 32px; height: 32px; }
  .drop-msg b { font-size: .95rem; }
  .drop-msg span { font-size: .78rem; }

  /* --- Sticky media in the process section is hidden on mobile already;
         make sure the steps don't inherit desktop spacing --- */
  .vstep { padding: 1.1rem 0 1.1rem 1.6rem; }

  /* --- Chart breathes --- */
  .chart { padding: 1.1rem; border-radius: 16px; }
  .chart-legend { gap: .7rem; font-size: .72rem; }
}

/* Only genuinely small phones (SE-class, ~360px and below) fall back to one
   column. 390px covers iPhone 12–15 and most Android — those keep the two-up
   gallery, which is the whole point of the treatment above. */
@media (max-width: 360px) {
  .pgrid { grid-template-columns: 1fr; }
  .pc { aspect-ratio: 3 / 2; }
  .pc figcaption { font-size: .76rem; padding: 1.2rem .8rem .7rem; }
}

/* ---------- Misc ---------- */
.ai-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem;
  border-radius: 100px; font-size: .68rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  background: rgba(30,99,176,.09); color: var(--water-700); border: 1px solid rgba(30,99,176,.2);
}
.ai-badge svg { width: 13px; height: 13px; }

/* ==========================================================================
   ADDITIONS — intake confirmation, hero wipe, gallery teaser
   ========================================================================== */

/* ---------- Honeypot ----------
   Off-screen rather than display:none, which some bots skip. Never focusable,
   never announced. See the note in contact/index.html. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Lead form confirmation ----------
   Replaces the form on a successful submit. The reference number is set in
   the mono face like every other piece of data on the site. */
.lead-ok {
  background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.6rem); text-align: center; box-shadow: var(--sh-2);
}
.lead-ok.urgent { border-color: rgba(179, 25, 66, .34); }
.lead-ok-ic {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 1.1rem;
  display: grid; place-items: center; color: #fff; background: var(--ok);
}
.lead-ok.urgent .lead-ok-ic { background: var(--flag-red); }
.lead-ok-ic svg { width: 26px; height: 26px; }
.lead-ok h3 { font-size: 1.7rem; margin-bottom: .6rem; }
.lead-ok p { color: var(--ink-500); font-size: .95rem; max-width: 46ch; margin: 0 auto .9rem; }
.lead-ok p .num { color: var(--navy-600); font-weight: 600; }
.lead-ok-urgent {
  background: #fff5f6; border-left: 3px solid var(--flag-red); border-radius: 0 8px 8px 0;
  padding: .85rem 1.1rem; text-align: left; color: var(--ink-700) !important;
  font-size: .9rem !important; margin-bottom: 1.2rem !important;
}
.lead-ok .btn { margin-top: .3rem; }

/* ---------- Hero before/after ----------
   Reuses the .ba component wholesale — markup, drag handling and keyboard
   support all come from app.js — and only changes the crop so it sits in the
   hero's 4:3 slot instead of the 21:9 band used further down the page. */
.ba-hero { border-radius: 20px; }
.ba-hero img { aspect-ratio: 4 / 3; }
.ba-hero .knob { width: 44px; height: 44px; }
.ba-hero .lbl { font-size: .62rem; padding: .3rem .65rem; }
@media (max-width: 720px) { .ba-hero img { aspect-ratio: 3 / 2; } }

/* ---------- Gallery teaser (home page) ---------- */
.gt {
  display: grid; gap: .85rem;
  /* 3x2 — six cards divide evenly, so auto-fit's orphan row is avoided. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gt-card {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  border-radius: 14px; background: var(--navy-900); aspect-ratio: 4 / 3;
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.gt-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.gt-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Same wipe as the gallery index: hovering restores the room. */
.gt-card .aft { clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease-out); }
.gt-card:hover .aft, .gt-card:focus-visible .aft { clip-path: inset(0 0 0 0); }
.gt-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 8, 26, .96) 0%, rgba(4, 8, 26, .88) 28%, rgba(4, 8, 26, .28) 60%, transparent 84%);
}
.gt-cap { position: absolute; inset: auto 0 0 0; z-index: 2; padding: .85rem .9rem; }
.gt-cap b { display: block; color: #fff; font-size: .92rem; line-height: 1.2; font-weight: 700; }
.gt-cap span {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: .3rem; display: block;
}
.gt-card.water .gt-cap span { color: var(--water-300); }
.gt-card.fire  .gt-cap span { color: var(--fire-300); }
@media (max-width: 620px) {
  .gt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .gt-cap b { font-size: .8rem; }
}

/* The hero wipe carries its own labels in the top corners, so the floating
   trust badges sit along the bottom edge instead of colliding with them.
   `.hstack` is used only by the home hero. */
.hstack .f2 { top: auto; bottom: -1.1rem; animation-name: bob; }
@media (max-width: 560px) {
  /* Two badges on one line stop fitting once the hero narrows. */
  .hstack .f2 { display: none; }
}

/* The "Social" contact row carries two links; inline anchors ran the two
   handles together into one unreadable string. Every .irow link is a block. */
.irow > div > a { display: block; }

/* ==========================================================================
   KINETIC TYPE
   --------------------------------------------------------------------------
   Words rise out of a mask, staggered. Vertical only, never lateral.

   Why this needed its own orchestration: a section head used to carry
   [data-reveal], which faded and translated the WHOLE block at the same time
   as the words rose inside it. The two motions cancelled out and the result
   read as one plain fade, which is why the animation was invisible. text.js
   now strips [data-reveal] from any block containing a [data-kt] heading and
   drives the sequence itself: hairline, then label, then headline, then body.
   ========================================================================== */

/* The mask. padding/margin pair stops the mask slicing the descenders off
   every y, g and p. */
.kt-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.kt-w > span {
  display: inline-block;
  transform: translateY(115%);
  opacity: .001;
  transition: transform 1.02s var(--ease-out), opacity .5s linear;
  transition-delay: var(--d, 0ms);
  will-change: transform;
}
.kt.is-in .kt-w > span { transform: none; opacity: 1; }
.kt.is-in .kt-w > span { will-change: auto; }

/* Orchestrated section head. Each child waits its turn. */
[data-seq] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--sd, 0ms);
}
[data-seq].is-in > * { opacity: 1; transform: none; }
/* The heading itself is handled word by word, so it must not also slide. */
[data-seq] > [data-kt] { opacity: 1; transform: none; transition: none; }

/* The rule that draws under a section head. */
.kt-rule {
  display: block; height: 2px; width: 54px; background: var(--flag-red);
  margin: 0 0 1.15rem; transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out);
}
[data-seq].is-in .kt-rule, .kt-rule.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .kt-w > span { transform: none !important; opacity: 1 !important; }
  [data-seq] > * { opacity: 1 !important; transform: none !important; }
  .kt-rule { transform: none !important; }
}

/* ==========================================================================
   HERO LIVE CLOCK
   The 24/7 promise only convinces if the page knows what time it is.
   ========================================================================== */
.hero-live {
  margin-top: 1.6rem; padding: .85rem 1.15rem;
  border: 1px solid var(--ink-200); border-left: 3px solid var(--ok);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fff; box-shadow: var(--sh-1);
  font-size: .88rem; color: var(--ink-700);
  display: flex; align-items: center; gap: .75rem; max-width: 48ch;
}
.hero-live .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none;
  animation: livepulse 2.6s ease-out infinite;
}
.hero-live b { color: var(--navy-600); font-weight: 700; font-family: var(--font-mono); font-size: .85rem; }
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce) { .hero-live .dot { animation: none; } }

/* ==========================================================================
   REPORT -> LEAD
   The capture step at the foot of a generated damage report.
   ========================================================================== */
.rep-send { background: var(--navy-600); color: rgba(255,255,255,.76); }
.rep-send-hd { margin-bottom: 1.15rem; }
.rep-send-hd b {
  display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
  letter-spacing: -.02em; font-size: 1.35rem; color: #fff; margin-bottom: .45rem;
}
.rep-send-hd span { font-size: .89rem; color: rgba(255,255,255,.66); max-width: 62ch; display: block; }
.rep-send-hd strong { color: var(--fire-300); font-weight: 700; }

.rep-fields { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: .6rem; }
.rep-fields input {
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: #fff; padding: .82rem 1rem; border-radius: 10px; font-size: .92rem; min-width: 0;
}
.rep-fields input::placeholder { color: rgba(255,255,255,.45); }
.rep-fields input:focus { border-color: var(--fire-400); outline: none; background: rgba(255,255,255,.1); }
.rep-fields .btn { white-space: nowrap; }
.rep-note { margin-top: .85rem; font-size: .82rem; color: rgba(255,255,255,.55); }
.rep-note a { color: var(--fire-300); font-weight: 700; }

.rep-sent { display: grid; gap: .7rem; justify-items: start; }
.rep-sent b { font-size: 1.08rem; color: #fff; font-weight: 700; }
.rep-sent .num { color: var(--fire-300); font-family: var(--font-mono); }
.rep-sent span { font-size: .9rem; color: rgba(255,255,255,.66); max-width: 58ch; }

@media (max-width: 780px) {
  .rep-fields { grid-template-columns: 1fr; }
  .rep-fields .btn { width: 100%; }
}

/* The hero wipe carries labels in its top corners, so the floating trust
   badges sit along the bottom edge instead of colliding with them. */
.hstack .f2 { top: auto; bottom: -1.1rem; }
@media (max-width: 560px) { .hstack .f2 { display: none; } }

/* The hero trust row carries four items now that 24/7 is confirmed. Four will
   not sit on one line beside the hero image, and free-flowing wrap left it
   3 + 1, which reads as an accident. A two-column grid makes it deliberate. */
@media (min-width: 781px) {
  .trust-row { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 2.2rem; row-gap: .7rem; }
}
.trust-row b { font-family: var(--font-mono); font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   REAL JOB PHOTOS, REVIEWS, MAP
   Added when Mr. Restoration's own photography and Yelp standing were carried
   across from the old mrrestorationusa.com site.
   ========================================================================== */

/* The real photos are portrait phone shots. The default .pc card is 4:3, which
   would centre-crop the equipment straight out of frame, so this grid runs
   3:4 and packs tighter. */
.pgrid-real { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: .85rem; justify-content: start; }
.pgrid-real .pc { aspect-ratio: 3 / 4; }
.pgrid-real .pc figcaption { font-size: .74rem; padding: 1.6rem .7rem .65rem; line-height: 1.35; }
@media (max-width: 640px) {
  .pgrid-real { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .pgrid-real .pc { aspect-ratio: 3 / 4; }
  .pgrid-real .pc figcaption { font-size: .62rem; }
}

/* ==========================================================================
   REVIEWS
   --------------------------------------------------------------------------
   Three quotes sitting in a row read as decoration. One quote at a time, set
   large, with the score beside it rather than above it, reads as testimony.
   The score card is the anchor and the carousel is the voice.
   ========================================================================== */
.revbox { background: #fff; border: 1px solid var(--ink-200); box-shadow: var(--sh-2); }
.revbox-in { display: grid; }
@media (min-width: 860px) { .revbox-in { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); } }

/* --- the score, as a solid block of proof --- */
.rev-score-card {
  background: var(--navy-600); color: #fff; text-decoration: none;
  padding: clamp(1.6rem, 3vw, 2.2rem); display: grid; align-content: center;
  gap: .3rem; text-align: center; transition: background .3s;
}
.rev-score-card:hover { background: var(--navy-700); }
.rsc-num { font-family: var(--font-display); font-size: clamp(3.2rem, 7vw, 4.4rem); line-height: .9; }
.rsc-stars { color: var(--fire-300); letter-spacing: .18em; font-size: 1rem; }
.rsc-count { font-size: .88rem; color: rgba(255,255,255,.75); margin-top: .35rem; }
.rsc-count b { color: #fff; font-weight: 700; }
.rsc-go {
  margin-top: .9rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fire-300);
}

/* --- the quote --- */
.revstage { padding: clamp(1.6rem, 3.5vw, 2.6rem); display: grid; align-content: space-between; gap: 1.4rem; min-height: 260px; }
.revquote { position: relative; transition: opacity .22s ease, transform .22s ease; }
.revquote.is-out { opacity: 0; transform: translateY(6px); }
.revmark { width: 30px; height: 22px; fill: var(--ink-200); margin-bottom: .9rem; }
.revquote blockquote { margin: 0; }
.revquote p {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.5; color: var(--navy-600);
  font-weight: 500; margin: 0 0 1.1rem; max-width: 46ch;
}
.revquote footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.revstars { color: #d32323; letter-spacing: .12em; font-size: .88rem; }
.revquote cite { font-style: normal; font-size: .88rem; color: var(--ink-500); }
.revquote cite b { color: var(--navy-600); font-weight: 700; }

/* --- controls --- */
.revnav { display: flex; align-items: center; gap: .8rem; }
.revarrow {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--ink-200); background: #fff; cursor: pointer;
  transition: border-color .25s, background .25s;
}
.revarrow:hover { border-color: var(--flag-red); background: var(--ink-50); }
.revarrow svg { width: 17px; height: 17px; fill: none; stroke: var(--navy-600); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.revdots { display: flex; gap: .45rem; flex-wrap: wrap; flex: 1; }
.revdot {
  width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer;
  background: var(--ink-300); border-radius: 50%; transition: background .25s, transform .25s;
}
.revdot.on { background: var(--flag-red); transform: scale(1.35); }
.revdot:hover { background: var(--ink-400); }

@media (max-width: 720px) {
  .revarrow { width: 44px; height: 44px; }
  .revdot { width: 10px; height: 10px; }
  .revstage { min-height: 0; }
}

/* ---------- Map ---------- */
.mapwrap {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--sh-2); border: 1px solid var(--ink-200); background: var(--ink-100);
}
.mapwrap iframe { display: block; width: 100%; height: clamp(300px, 42vw, 440px); border: 0; }

/* ==========================================================================
   SEQUENCES ON A LIGHT GROUND
   --------------------------------------------------------------------------
   gallery.css was written for the dark gallery page: it hardcodes white text
   and white-alpha borders throughout. The whole site now runs light, so every
   one of those is restated here against the light palette. Scoped under .seq
   so the gallery page keeps its own treatment if it is ever reinstated.
   ========================================================================== */

.seq-tabs {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--ink-200); padding-bottom: .6rem;
}
.seq-tab {
  appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: .88rem; font-weight: 600; color: var(--ink-500);
  padding: .55rem 1rem; border-radius: 9px; transition: color .25s, background .25s, border-color .25s;
}
.seq-tab:hover { color: var(--navy-600); background: var(--ink-100); }
.seq-tab[aria-selected="true"] { color: #fff; background: var(--navy-600); border-color: var(--navy-600); }

.seq .case { padding: 0; border-top: 0; }
.seq .case::before { display: none; }
.seq .case-hd { max-width: none; }
.seq .case-tag { color: var(--navy-600); background: var(--ink-100); border-color: var(--ink-200); }
.seq .case-kick { color: var(--flag-red); }
.seq .case-facts { border-color: var(--ink-200); }
.seq .case-facts > div { border-color: var(--ink-200); }
.seq .case-facts dt { color: var(--ink-400); }
.seq .case-facts dd { color: var(--navy-600); }
.seq .stage-media { border: 1px solid var(--ink-200); box-shadow: var(--sh-2); }
.seq .stage-meta b { color: #fff; }
.seq .gsteps { border-color: var(--ink-200); }
.seq .gstep { border-color: var(--ink-200); }
.seq .gstep-btn { color: var(--ink-500); }
.seq .gstep-btn:hover { color: var(--navy-600); }
.seq .gstep[aria-current="step"] .gstep-btn { color: var(--navy-600); }
.seq .gstep-n { color: var(--ink-400); }
.seq .gstep-body p { color: var(--ink-700); }
.seq .gstep-body a { color: var(--flag-red); }
.seq .gstep-body ul li { color: var(--ink-700); }

/* ==========================================================================
   CREDENTIALS STRIP, SUB-SERVICE LINKS, FORM HINT
   Added in the Sep 2026 conversion pass. The strip under the hero used to
   repeat the four service cards below it; it now carries the five things a
   homeowner comparing three contractors is actually scanning for.
   ========================================================================== */
.cred-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* The strip sits on flag blue, so the headline stays white. The Yelp score is
   the only thing here that earns a colour of its own. */
.cred-strip > div:last-child b { color: var(--fire-300); }

/* Sub-services named on the parent card, so a search for "sewage backup"
   has somewhere to land instead of dying inside the water damage page. */
/* Sub-services sit BELOW the card grid, never inside a card: a card is an <a>
   and nesting a link inside one makes the parser close the card early. */
.svc-also { font-size: .92rem; color: var(--ink-500); margin-top: 1.4rem; max-width: 70ch; }
.svc-also a { color: var(--navy-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-300); }
.svc-also a:hover { color: var(--flag-red); text-decoration-color: var(--flag-red); }

/* The callback promise sits under the phone field, where it is read as part
   of the field rather than as small print. */
.field .hint { display: block; margin-top: .35rem; font-size: .78rem; color: var(--ink-400); }

/* Service-area links under the map. Plain text rather than buttons: this is a
   crawl path and a reassurance, not a call to action competing with the phone. */
.arealinks { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: 1.4rem; font-size: .86rem; }
.arealinks a { color: var(--ink-500); text-decoration: none; border-bottom: 1px solid var(--ink-200); padding-bottom: 1px; }
.arealinks a:hover { color: var(--flag-red); border-bottom-color: var(--flag-red); }

/* On a phone the two floating hero badges land on top of the image caption,
   and the credentials strip directly below already says the same two things. */
@media (max-width: 720px) { .hstack .float { display: none; } }

/* ==========================================================================
   AREAS WE SERVE
   One page covering two counties, rather than a page per city. The lists are
   set as plain wrapped text, not as links or buttons: nothing here is a
   destination, it is a reassurance that you are inside the coverage.
   ========================================================================== */
.areagrid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .areagrid { grid-template-columns: repeat(3, 1fr); } }
.areagroup h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); color: var(--navy-600); margin-bottom: .5rem; }
.areagroup > p { font-size: .9rem; color: var(--ink-500); margin-bottom: 1.1rem; }
.citylist {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--ink-200);
}
.citylist li {
  padding: .5rem 0; border-bottom: 1px solid var(--ink-100);
  font-size: .94rem; color: var(--ink-700);
}

/* ==========================================================================
   PHONE PASS
   --------------------------------------------------------------------------
   Measured on real viewports at 320, 375 and 414. The page never scrolled
   sideways, but a handful of things were set at desktop-decoration sizes and
   carried straight down to the phone: an 8px badge, 9.9px photo captions, and
   the two most important controls on the page (the menu button and the call
   button) sitting under the 44px minimum a thumb needs.

   Nothing here changes the desktop layout.
   ========================================================================== */
@media (max-width: 720px) {

  /* --- Controls. 44px is the smallest reliable thumb target. --- */
  .burger {
    min-width: 44px; min-height: 44px;
    display: grid; place-content: center;
  }
  .hdr-cta { min-height: 44px; padding-block: .55rem; }
  .callbar a { min-height: 52px; display: grid; place-content: center; }

  /* The ribbon phone number is the first thing a panicking visitor reaches
     for, so give it a real target instead of a line of inline text. */
  .ribbon a {
    display: inline-block; padding: .25rem .3rem;
    text-decoration: underline; text-underline-offset: 2px;
  }

  /* --- Type that was too small to read on a phone --- */
  .pgrid-real .pc figcaption { font-size: .76rem; line-height: 1.35; padding: 1.5rem .65rem .6rem; }
  .pgrid-real .pc .real { font-size: .7rem; padding: .24rem .5rem; }
  .brand > span > span { font-size: .55rem; letter-spacing: .1em; }
  .stage-count { font-size: .7rem; }
  .ba .lbl { font-size: .68rem; }

  /* Body copy holds at 16px so the browser never zooms a form field. */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* Below 380px the brand subtitle competes with the phone button for room and
   loses; the wordmark alone still identifies the company. */
@media (max-width: 380px) {
  .brand > span > span { display: none; }
}

/* Last two from the phone measurement pass: the "Actual job" badge also
   appears on /about/ outside .pgrid-real, and the sequence tabs landed one
   pixel under the 44px thumb minimum. */
@media (max-width: 720px) {
  .pc .real { font-size: .7rem; padding: .24rem .5rem; }
  .pc figcaption { font-size: .76rem; line-height: 1.35; padding: 1.5rem .65rem .6rem; }
  .seq-tab { min-height: 44px; padding-block: .7rem; }
}

/* The drying chart's axis labels are sized in SVG user units, so they shrink
   with the viewBox. At 375px they measured 9px; 13 user units brings them
   back to a readable size on a phone without touching the desktop chart. */
@media (max-width: 720px) {
  .chart .axis { font-size: 13px; }
  .chart svg text[text-anchor="end"] { font-size: 13px; }
}

/* ==========================================================================
   BULLETS
   --------------------------------------------------------------------------
   The lists were the quietest thing on the page: grey text and a small grey
   dot. Every bullet written as "Label: detail" now carries its label in the
   page's accent colour at full weight, so the eye can skim the labels alone
   and skip the detail. The accent follows the subject the way the hero
   headline does: red for fire, blue for water, green for mold, and the brand
   red everywhere else.
   ========================================================================== */
:root { --acc-bullet: var(--flag-red); }
body.acc-water { --acc-bullet: var(--flag-blue); }
body.acc-fire  { --acc-bullet: var(--fire-700); }
body.acc-mold  { --acc-bullet: #15803d; }

/* The label. Sized up a touch as well as coloured, because colour alone is
   not a distinction for a colour-blind reader. */
li > strong:first-child,
.prose li strong:first-child {
  color: var(--acc-bullet);
  font-weight: 800;
  letter-spacing: -.005em;
}

/* The marker takes the same accent and gains a little weight. */
.svc li::before,
.trade li::before { background: var(--acc-bullet); width: 6px; height: 6px; }
.prose li::marker, .gstep-body li::marker { color: var(--acc-bullet); }
.gstep-body li::before { background: var(--acc-bullet); }

/* Detail text sits one step darker than it did, so the whole list reads as
   content rather than as a caption. */
.svc li, .prose ul li { color: var(--ink-700); }

/* Ordered "how it goes" lists use the same treatment for their lead-ins. */
.prose ol li strong:first-child { color: var(--acc-bullet); font-weight: 800; }

/* ==========================================================================
   FULL-BLEED HERO
   --------------------------------------------------------------------------
   The sinking house is the back layer of the whole first screen. The house
   sits right of centre in the frame and the copy sits left, over open water,
   so the two never overlap. A scrim runs left-to-right underneath the type,
   heavy where the words are and clear where the house is.

   The layer also drifts downward on scroll (see the parallax block in
   index.html), which reads as the house continuing to sink as you read.
   ========================================================================== */
.hero-full {
  position: relative;
  min-height: min(82vh, 720px);
  display: grid; align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero-full::before { display: none; }   /* the old radial wash fights the video */

.hero-bg { position: absolute; inset: -8% 0 -14% 0; z-index: 0; pointer-events: none; }
.hero-bg .hero-video {
  width: 100%; height: 100%; object-fit: cover; object-position: 36% 42%;
  display: block; border-radius: 0; box-shadow: none;
  will-change: transform;
}
/* Two scrims: one horizontal so the left side carries type, one from the top
   so the sticky header always has something to sit on. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(250,250,246,.97) 0%, rgba(250,250,246,.9) 26%, rgba(250,250,246,.6) 44%, rgba(250,250,246,.12) 64%, rgba(250,250,246,0) 80%),
    linear-gradient(180deg, rgba(250,250,246,.8) 0%, rgba(250,250,246,0) 20%);
}
.hero-full .hero-in { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr); }
.hero-full .hero-in > div { max-width: 40rem; }
.hero-note { margin-top: 1.6rem; }

/* Below the two-column breakpoint the house has nowhere to hide behind the
   type, so the scrim goes vertical and the frame crops to the house. */
@media (max-width: 860px) {
  .hero-full { min-height: 0; }
  .hero-bg { inset: 0; }
  .hero-bg .hero-video { object-position: 48% 45%; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(247,249,252,.97) 0%, rgba(247,249,252,.93) 48%, rgba(247,249,252,.72) 72%, rgba(247,249,252,.5) 100%);
  }
}

/* ==========================================================================
   JOB PHOTO LIGHTBOX
   The thumbnails are buttons, so they need the anchor styling stripped back
   off them and the hover cue moved onto the card.
   ========================================================================== */
.pc-open {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; overflow: hidden;
}
.pc-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc:hover .pc-open img { transform: scale(1.06); }
.pc-open::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.16), transparent 55%);
  opacity: 0; transition: opacity .3s;
}
.pc:hover .pc-open::after, .pc-open:focus-visible::after { opacity: 1; }
.pc-open:focus-visible { outline: 3px solid var(--flag-red); outline-offset: -3px; }

.lbox {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(6, 10, 22, .93);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(.4rem, 2vw, 1.5rem); padding: clamp(1rem, 4vw, 3rem);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lbox-fig { margin: 0; display: grid; justify-items: center; gap: .9rem; min-width: 0; }
.lbox-fig img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  display: block; box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.lbox-fig figcaption {
  color: rgba(255,255,255,.82); font-size: .92rem; text-align: center; max-width: 52ch;
}
.lbox-fig figcaption b {
  display: inline-block; margin-left: .5rem; font-family: var(--font-mono);
  font-size: .78rem; color: rgba(255,255,255,.5); font-weight: 400;
}
.lbox-arrow, .lbox-close {
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .25s, border-color .25s;
}
.lbox-arrow { width: 52px; height: 52px; flex: none; }
.lbox-arrow svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lbox-arrow:hover, .lbox-close:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.lbox-close {
  position: absolute; top: clamp(.7rem, 2vw, 1.4rem); right: clamp(.7rem, 2vw, 1.4rem);
  width: 46px; height: 46px; font-size: 1.7rem; line-height: 1;
}
.lbox-arrow:focus-visible, .lbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* On a phone the arrows sit under the photo rather than squeezing it. */
@media (max-width: 640px) {
  .lbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 3.4rem .7rem 1.2rem; }
  .lbox-fig { grid-row: 1; }
  .lbox-fig img { max-height: 66vh; }
  .lbox-arrow { width: 56px; height: 56px; }
  .lbox-arrow.prev { grid-row: 2; justify-self: start; }
  .lbox-arrow.next { grid-row: 2; grid-column: 1; justify-self: end; }
}