/* ==========================================================================
   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: .6rem; letter-spacing: .16em; 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(--flag-red); color: rgba(255,255,255,.9); }
.sec-navy h2, .sec-navy h3 { color: #fff; }
.sec-navy .eyebrow { color: #fff; }
.sec-navy .eyebrow::before { background: #fff; }
.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: rgba(255,255,255,.68); }

/* ---------- 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 .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(--flag-red); }
.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(--navy-600); border-color: var(--navy-600); color: rgba(255,255,255,.8); }
.aside-card.hi h3, .aside-card.hi b { color: #fff; }
.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: rgba(255,255,255,.72); }
.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(--ink-200); 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; }
.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: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--ok); color: #fff; }
.imgnote { font-size: .78rem; color: var(--ink-400); margin-top: 1.1rem; max-width: 70ch; }

/* ---------- 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: var(--flag-blue); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; }
.band h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); color: #fff; margin-bottom: 1rem; }
.band p { color: rgba(255,255,255,.72); 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: .5rem; padding: .16rem .4rem; 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; }