/* ==========================================================================
   Austin Flood & Leak Restoration — Austin, TX
   v4 "Local emergency crew" — deep working navy + sparing red-orange,
   warm off-white base. Dense, plain-spoken, real-photo led. Maturity 3-4.
   Saira Semi Condensed display · Public Sans body
   (critical-css.html holds the above-the-fold subset: tokens, header, hero, buttons)
   ========================================================================== */

:root {
  --navy:#0E2E4D; --navy-2:#15436E; --navy-3:#1F5689; --navy-deep:#0A2238;
  --ember:#E23A16; --ember-cta:#C42E10; --ember-dark:#A2280E; --ember-on-dark:#FF9576;
  --paper:#F6F2EB; --paper-2:#EFE8DC; --card:#FFFFFF; --white:#FFFFFF;
  --ink:#17202A; --ink-soft:#3D4A57; --muted:#57636F;
  --line:#E4DBCC; --line-strong:#D2C6B2;
  --on-dark:#EEF3F8; --on-dark-2:#C5D3E1; --on-dark-3:#9FB3C6; --water-on-dark:#A9C0D4;
  --success:#1F7A5A;

  --font-display:'Saira Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Saira Semi Condensed', system-ui, sans-serif;

  --r-xs:3px; --r:5px; --r-md:8px; --r-lg:12px;
  --shadow-sm:0 1px 2px rgba(14,46,77,.07), 0 3px 9px rgba(14,46,77,.07);
  --shadow-md:0 2px 6px rgba(14,46,77,.10), 0 12px 26px rgba(14,46,77,.11);
  --shadow-lg:0 6px 16px rgba(14,46,77,.13), 0 26px 52px rgba(14,46,77,.16);
  --t-fast:.15s ease; --t-base:.2s cubic-bezier(.4,0,.2,1); --t-slow:.34s cubic-bezier(.22,1,.36,1);
  --wrap:1190px; --pad:24px;
  /* subtle fractal grain — adds depth to the dark navy panels (anti-flat) */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

  /* back-compat aliases (legacy token names used by 404 / inner primitives) */
  --base:var(--paper); --base-2:var(--paper-2); --dark:var(--navy); --dark-2:var(--navy-deep);
  --signal:var(--ember-cta); --signal-dark:var(--ember-dark);
  --water:var(--navy-2); --water-dark:var(--navy); --water-soft:var(--navy-3); --water-wash:#E8EEF4;
  --clay:var(--ember-cta); --clay-dark:var(--ember-dark); --clay-soft:var(--ember);
  --ochre:var(--navy-2); --ochre-dark:var(--navy);
  --border:var(--line); --border-strong:var(--line-strong);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); font-size:1.02rem; line-height:1.62;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img, picture, video, svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
strong, b { font-weight:700; color:var(--ink); }
::selection { background:var(--navy); color:#fff; }
main { position:relative; z-index:2; }

h1, h2, h3, h4 { font-family:var(--font-display); color:var(--navy); line-height:1.06; letter-spacing:-.005em; }
h2 { font-weight:800; font-size:clamp(1.85rem,3.4vw,2.7rem); }
h3 { font-weight:700; font-size:clamp(1.18rem,1.7vw,1.4rem); }
p { color:var(--ink-soft); }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.section { padding:72px 0; position:relative; }
.section--alt { background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band-dark { background-color:var(--navy); background-image:var(--noise); position:relative; }
.band-dark::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--ember); }

/* section header */
.kicker { font-family:var(--font-display); font-size:.88rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ember-cta); display:inline-flex; align-items:center; gap:10px; margin-bottom:13px; }
.kicker::before { content:""; width:22px; height:3px; background:var(--ember); display:inline-block; }
.section-head { max-width:58ch; margin-bottom:40px; }
.section-head p { font-size:1.08rem; line-height:1.55; color:var(--muted); margin-top:12px; max-width:56ch; }
.band-dark .kicker { color:var(--ember-on-dark); }
.band-dark .kicker::before { background:var(--ember-on-dark); }
.band-dark h2 { color:#fff; }
.band-dark p { color:var(--on-dark-2); }
.band-dark .section-head p { color:var(--on-dark-2); }

/* checks */
.checks { list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:22px; padding-left:0; }
.checks li { position:relative; padding-left:30px; font-size:1rem; color:var(--ink-soft); line-height:1.5; font-weight:500; }
.checks li svg { position:absolute; left:0; top:4px; color:var(--ember-cta); }
/* The marker is drawn by CSS, so a `.checks` list is never a bare indent when an author omits the
   inline <svg> (480 of 565 items across the geo pages did). An item that DOES carry its own svg
   suppresses the drawn one, so the two never stack. */
.checks li::before {
  content:""; position:absolute; left:0; top:5px; width:18px; height:18px; background-color:var(--ember-cta);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
}
.checks li:has(svg)::before { content:none; }
.band-dark .checks li { color:var(--on-dark); }
.band-dark .checks li svg { color:var(--ember-on-dark); }
.band-dark .checks li::before { background-color:var(--ember-on-dark); }

/* ════════ HEADER dropdowns + drawer ════════ */
.mainnav-group { position:relative; }
.mainnav-menu { position:absolute; top:calc(100% + 14px); left:0; min-width:268px; background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--t-base), transform var(--t-base), visibility var(--t-base); z-index:60; }
.mainnav-menu.open { opacity:1; visibility:visible; transform:translateY(0); }
.mainnav-menu--areas { left:auto; right:0; }
.mainnav-menu-inner--cols { display:grid; grid-template-columns:1fr 1fr; gap:2px; min-width:384px; }
.mainnav-menu-item { display:block; padding:10px 13px; border-radius:var(--r); font-size:.93rem; font-weight:500; color:var(--ink-soft); transition:color var(--t-fast), background var(--t-fast); }
.mainnav-menu-item:hover { color:var(--navy); background:var(--paper-2); }
.mainnav-menu-item:focus-visible { outline:2px solid var(--navy); outline-offset:-2px; }
.mainnav-menu-item--more { color:var(--ember-cta); font-weight:700; }

.drawer { position:fixed; inset:0; width:100%; background:var(--white); z-index:1000; transform:translateX(100%); transition:transform var(--t-slow); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); overflow-y:auto; }
.drawer.open { transform:translateX(0); }
body.menu-open { overflow:hidden; }
/* full-screen drawer on mobile: covers the viewport so no page bleeds beside it (a side-panel +
   fixed-scrim fails here — .drawer's transform / the header stacking context trap the scrim). */
body.menu-open { overflow:hidden; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px var(--pad); border-bottom:1px solid var(--line); background:var(--navy); }
.drawer-head .brandmark-name { font-size:1.04rem; color:#fff; font-family:var(--font-display); font-weight:800; text-transform:uppercase; }
.drawer-head .brandmark-geo { font-family:var(--font-display); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3); }
.drawer-close { width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:none; border:1px solid rgba(255,255,255,.3); border-radius:var(--r); color:#fff; cursor:pointer; }
.drawer-close:hover { border-color:var(--ember); color:var(--ember-on-dark); }
.drawer-close:focus-visible { outline:3px solid var(--ember); outline-offset:2px; }
.drawer-body { padding:14px var(--pad) 28px; display:flex; flex-direction:column; }
.drawer-section { font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ember-cta); margin:18px 0 4px; }
.drawer-link { padding:11px 0; font-weight:500; font-size:1rem; color:var(--ink); border-bottom:1px solid var(--line); transition:color var(--t-fast), padding-left var(--t-fast); }
.drawer-link:hover { color:var(--navy); padding-left:6px; }
.drawer-link:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.drawer-cta { margin-top:22px; }

/* ════════ SERVICES — real-photo cards ════════ */
.svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
/* The 6-card city / service-city "other services" grid left 2 orphans in a 4-column last row;
   3 columns fills two rows exactly. The 8-card home grid keeps 4. */
.svc-grid--3 { grid-template-columns:repeat(3,1fr); }
.svc-card { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); }
.svc-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--navy-3); }
.svc-card:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.svc-card-media { position:relative; display:block; aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; }
.svc-card-media img { width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); }
.svc-card:hover .svc-card-media img { transform:scale(1.05); }
.svc-card-media::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--ember); transform:scaleX(0); transform-origin:left; transition:transform var(--t-base); }
.svc-card:hover .svc-card-media::after { transform:scaleX(1); }
.svc-card-body { padding:15px 17px 17px; display:flex; flex-direction:column; gap:4px; flex:1; }
.svc-card-body b { font-family:var(--font-display); font-weight:700; font-size:1.16rem; color:var(--navy); line-height:1.08; }
.svc-card-body span { font-size:.9rem; color:var(--muted); line-height:1.45; }
.svc-card-more { margin-top:auto; padding-top:11px; font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ember-cta); display:inline-flex; align-items:center; gap:6px; transition:gap var(--t-base); }
.svc-card:hover .svc-card-more { gap:10px; }

/* ════════ DUO ════════ */
.duo-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
/* An odd card count left the last card alone beside half a row of empty background.
   Let it take the full width instead of stranding it (Stage 10 visual audit 2026-07-26). */
.duo-grid > .duo-card:last-child:nth-child(odd) { grid-column:1 / -1; }
.duo-card { background:var(--card); border:1px solid var(--line); border-top:4px solid var(--navy); border-radius:var(--r-md); padding:30px 30px 32px; box-shadow:var(--shadow-sm); }
.duo-tag { font-family:var(--font-display); font-size:.8rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ember-cta); }
.duo-card h3 { font-size:clamp(1.4rem,2.1vw,1.8rem); margin:10px 0 11px; }
.duo-card p { font-size:1rem; line-height:1.58; color:var(--ink-soft); }

/* ════════ SPLIT (text + aside card) ════════ */
.split { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
.split > div > p { margin-top:15px; font-size:1.04rem; line-height:1.6; }
.info-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:28px; box-shadow:var(--shadow-md); }
.info-label { font-family:var(--font-display); font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ember-cta); display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.info-label::after { content:""; flex:1; height:1px; background:var(--line); }
.cause-list { list-style:none; }
.cause-list li { padding:15px 0; border-bottom:1px solid var(--line); }
.cause-list li:last-child { border-bottom:0; padding-bottom:0; }
.cause-list strong { display:block; font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--navy); margin-bottom:2px; }
.cause-list span { font-size:.92rem; color:var(--muted); line-height:1.5; }

/* ════════ INSURANCE scope card (inside navy band) ════════ */
.scope-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md); padding:28px 28px 26px; }
.scope-card .info-label { color:var(--ember-on-dark); }
.scope-card .info-label::after { background:rgba(255,255,255,.2); }
.scope-list { list-style:none; }
.scope-list li { display:flex; gap:12px; align-items:flex-start; padding:12px 0; color:var(--on-dark); font-size:.97rem; line-height:1.5; border-bottom:1px solid rgba(255,255,255,.12); }
.scope-list li:last-child { border-bottom:0; }
.scope-list li svg { flex-shrink:0; margin-top:3px; color:var(--ember-on-dark); }
/* ── Contact page: the two lines that ARE the page (not prose, not a form) ── */
.contact-lines { list-style:none; display:flex; flex-direction:column; gap:18px; margin-top:26px; }
.contact-lines li { display:flex; flex-direction:column; gap:5px; padding:22px 26px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--ember); border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
.contact-label { font-family:var(--font-display); font-size:.8rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ember-cta); }
.contact-value { font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.08; color:var(--navy); transition:color var(--t-fast); }
.contact-value--email { font-size:clamp(1rem,2.6vw,1.4rem); overflow-wrap:anywhere; }
.contact-value:hover { color:var(--ember-cta); }
.contact-value:focus-visible { outline:3px solid var(--navy); outline-offset:3px; }
.contact-note { font-size:.95rem; color:var(--muted); line-height:1.5; }
/* one-line explanation under a block — the trust pages carry these instead of prose paragraphs */
.note-line { margin-top:22px; font-size:1rem; color:var(--ink-soft); line-height:1.6; }
.split--stretch { align-items:stretch; }
.link-arrow { display:inline-flex; align-items:center; gap:9px; margin-top:24px; font-family:var(--font-display); font-weight:700; font-size:1.06rem; color:var(--ember-cta); border-bottom:2px solid transparent; padding-bottom:2px; transition:color var(--t-fast), border-color var(--t-fast), gap var(--t-base); }
.link-arrow:hover { color:var(--ember-dark); border-color:var(--ember); gap:13px; }
.band-dark .link-arrow { color:#fff; }
.band-dark .link-arrow:hover { color:var(--ember-on-dark); border-color:var(--ember-on-dark); }
.link-arrow:focus-visible { outline:3px solid var(--ember); outline-offset:3px; }

/* ════════ PROCESS steps — big numbers, ember underline ════════ */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.step { position:relative; }
.step-num { font-family:var(--font-display); font-weight:800; font-size:3.6rem; line-height:.82; color:var(--navy); display:inline-block; padding-bottom:9px; border-bottom:4px solid var(--ember); margin-bottom:15px; }
.step h3 { margin-bottom:7px; }
.step p { font-size:.95rem; line-height:1.5; color:var(--muted); }

/* ── Service-page "why us" feature row (icons, no circles) ── */
.feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 24px; }
.feature { display:flex; flex-direction:column; gap:9px; }
.feature-ic { width:36px; height:36px; color:var(--ember-cta); flex-shrink:0; }
.feature b { font-family:var(--font-display); font-weight:700; font-size:1.16rem; color:var(--navy); }
.feature span { font-size:.95rem; color:var(--muted); line-height:1.5; }
@media (max-width:860px){ .feature-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .feature-grid { grid-template-columns:1fr; } }
.feature-grid--2 { grid-template-columns:repeat(2,1fr); gap:22px 20px; }
@media (max-width:520px){ .feature-grid--2 { grid-template-columns:1fr; } }
/* mobile: hide the inner-page hero sub-paragraph — not critical, the why-us icons + CTA carry the weight; gets the visitor to the CTA and the trust photo faster */
/* Inner-hero sub stays HIDDEN on phones (user mandate, re-confirmed 2026-07-26 after I briefly
   un-hid it). A phone visitor arrives for the service, not to read: the sub eats most of the first
   screen and pushes the offer down, while on desktop the same paragraph fits comfortably beside the
   rest of the hero. The 35-48 word hook is still written — it earns its keep on desktop. */
@media (max-width:680px){ .inner-hero p { display:none; } }

/* ════════ WHY — crew photo + reasons ════════ */
.split--why { grid-template-columns:.92fr 1.08fr; align-items:stretch; }
.crew-figure { position:relative; margin:0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-md); min-height:340px; background:var(--paper-2); }
/* absolute-fill so the photo fully covers the (grid-stretched) plaque on desktop — a plain
   height:100% does not resolve against a grid-stretched parent, so the img fell back to its
   intrinsic 640/540 ratio and left a strip of the paper-2 backing showing below it */
.crew-figure img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.crew-figure figcaption { position:absolute; left:0; bottom:18px; background:var(--navy); color:#fff; font-family:var(--font-display); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; padding:9px 15px; border-left:4px solid var(--ember); }
.why-points { list-style:none; display:flex; flex-direction:column; margin-top:6px; }
.why-points li { display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 0; border-top:1px solid var(--line-strong); }
.why-points li:first-child { border-top:0; padding-top:0; }
.why-pt-n { font-family:var(--font-display); font-weight:800; font-size:1.55rem; color:var(--ember-cta); line-height:.9; }
.why-points b { font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--navy); display:block; margin-bottom:3px; }
.why-points p { font-size:.95rem; color:var(--muted); line-height:1.5; }

/* ════════ SERVICE AREAS ════════ */
.areas { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:10px; }
.area-link { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--navy); border-radius:var(--r); font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--navy); transition:border-color var(--t-fast), color var(--t-fast), transform var(--t-base), background var(--t-base); }
.area-link span { color:var(--line-strong); transition:color var(--t-fast), transform var(--t-base); }
.area-link:hover { border-left-color:var(--ember); color:var(--ember-cta); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.area-link:hover span { color:var(--ember-cta); transform:translateX(3px); }
.area-link:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }

/* ════════ FAQ ════════ */
.faq { display:flex; flex-direction:column; gap:12px; max-width:880px; }
.faq-item { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.faq-item summary { list-style:none; cursor:pointer; padding:20px 54px 20px 24px; position:relative; font-family:var(--font-display); font-weight:700; font-size:1.12rem; color:var(--navy); transition:color var(--t-fast); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:var(--ember-cta); }
.faq-item summary:focus-visible { outline:2px solid var(--navy); outline-offset:-2px; }
.faq-item summary::after { content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-family:var(--font-display); font-size:1.5rem; color:var(--ember-cta); line-height:1; }
.faq-item[open] summary::after { content:"\2212"; }
.faq-item[open] summary { color:var(--navy); }
.faq-item-body { padding:0 24px 22px; }
.faq-item-body p { color:var(--ink-soft); line-height:1.62; }

/* ════════ HOME work gallery (grid + lightbox) ════════ */
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.work-grid .work-gallery-item { flex:none; width:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-2); cursor:pointer; padding:0; box-shadow:var(--shadow-sm); }
.work-grid .work-gallery-item img { width:100%; height:228px; object-fit:cover; display:block; }
.work-grid .work-gallery-item:hover img { transform:scale(1.04); }
.work-grid .work-gallery-item:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.gallery-note { margin-top:18px; font-size:.95rem; color:var(--muted); }

/* ════════ HOME crew video (self-hosted, vertical) ════════ */
.video-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; max-width:880px; margin:0 auto; }
.video-card { margin:0; }
.video-frame { position:relative; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-md); background:var(--navy); }
.video-el { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:var(--navy); border:1px solid var(--line); border-radius:var(--r-md); }
.video-el:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.video-overlay {
  position:absolute; top:0; left:0; right:0; bottom:42px; z-index:2; display:grid; place-items:center;
  border:0; margin:0; padding:0; cursor:pointer; -webkit-appearance:none; appearance:none;
  background:linear-gradient(180deg, rgba(10,34,56,.16), rgba(10,34,56,.42)); transition:background var(--t-base);
}
.video-overlay:focus-visible { outline:3px solid var(--ember); outline-offset:-3px; }
.video-play-btn {
  width:64px; height:64px; border-radius:50%; background:var(--ember-cta); display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(10,34,56,.45), inset 0 -3px 0 rgba(0,0,0,.22);
  transition:transform var(--t-base), background var(--t-base);
}
.video-overlay:hover .video-play-btn { transform:scale(1.08); background:var(--ember); }
.video-play-btn svg { width:26px; height:26px; fill:#fff; margin-left:3px; }
.video-frame.is-playing .video-overlay { background:transparent; }
.video-frame.is-playing .video-play-btn { opacity:0; transform:scale(.7); }
.video-cap { margin-top:11px; font-size:.92rem; color:var(--ink-soft); font-weight:500; display:flex; align-items:flex-start; gap:9px; line-height:1.4; }
.video-cap::before { content:""; width:15px; height:15px; flex-shrink:0; margin-top:3px; background:var(--ember-cta); border-radius:3px; clip-path:polygon(22% 14%, 22% 86%, 86% 50%); }
@media (max-width:760px) { .video-grid { grid-template-columns:repeat(2,1fr); } }
/* Phones: a classic swipeable slider — each card is 80% wide so the next one
   peeks at the right edge, signalling the row scrolls; scroll-snap for clean stops. */
@media (max-width:620px) {
  .video-grid {
    display:flex; grid-template-columns:none; max-width:none; align-items:flex-start;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:14px; padding:2px 0 14px; scrollbar-width:none; scroll-padding-left:0;
  }
  .video-grid::-webkit-scrollbar { display:none; }
  .video-card { flex:0 0 80%; scroll-snap-align:start; }
}

/* ════════ CLOSER (navy band) ════════ */
.closer { position:relative; background-color:var(--navy); background-image:var(--noise); overflow:hidden; padding:80px 0; z-index:2; }
.closer::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--ember); }
.closer .wrap { text-align:center; max-width:740px; }
.closer .kicker { color:var(--ember-on-dark); justify-content:center; }
.closer .kicker::before { background:var(--ember-on-dark); }
.closer h2 { color:#fff; font-size:clamp(2rem,3.8vw,3rem); }
.closer p { color:var(--on-dark-2); font-size:1.1rem; line-height:1.58; max-width:52ch; margin:14px auto 30px; }
.closer-actions { display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.closer-phone { display:flex; flex-direction:column; line-height:1.2; }
.closer-phone a { font-family:var(--font-display); font-weight:700; font-size:1.34rem; color:#fff; }
.closer-phone a:hover { color:var(--ember-on-dark); }
.closer-phone a:focus-visible { outline:3px solid var(--ember); outline-offset:3px; }
.closer-phone span { font-size:.95rem; color:var(--on-dark-2); }

/* ════════ FOOTER (navy) ════════ */
.pagefoot { background-color:var(--navy-deep); background-image:var(--noise); color:var(--on-dark-2); position:relative; z-index:2; padding-top:58px; }
.pagefoot-cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; }
.pagefoot-cols > * { min-width:0; }
.pagefoot-logo { display:flex; flex-direction:column; gap:3px; margin-bottom:15px; width:fit-content; }
.pagefoot-logo-name { font-family:var(--font-display); font-weight:800; font-size:1.18rem; text-transform:uppercase; color:#fff; }
.pagefoot-logo-geo { font-family:var(--font-display); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-3); }
.pagefoot-logo:hover .pagefoot-logo-name { color:var(--ember-on-dark); }
.pagefoot-logo:focus-visible { outline:3px solid var(--ember); outline-offset:3px; border-radius:var(--r); }
.pagefoot-tagline { font-size:.95rem; line-height:1.55; color:var(--on-dark-3); max-width:42ch; }
.pagefoot-contacts { display:flex; flex-direction:column; gap:9px; margin:18px 0 14px; }
.pagefoot-contact { display:inline-flex; align-items:flex-start; gap:9px; font-family:var(--font-display); font-weight:600; font-size:1.04rem; color:#fff; transition:color var(--t-fast); max-width:100%; overflow-wrap:anywhere; }
.pagefoot-contact svg { color:var(--ember-on-dark); flex-shrink:0; margin-top:3px; }
.pagefoot-contact:hover { color:var(--ember-on-dark); }
.pagefoot-contact:focus-visible { outline:2px solid var(--ember); outline-offset:3px; }
.pagefoot-area { font-size:.85rem; color:var(--on-dark-3); line-height:1.5; }
.pagefoot-col-title { font-family:var(--font-display); font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ember-on-dark); margin-bottom:15px; }
.pagefoot-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.pagefoot-links a { font-size:.94rem; color:var(--on-dark-2); transition:color var(--t-fast), padding-left var(--t-fast); }
.pagefoot-links a:hover { color:#fff; padding-left:4px; }
.pagefoot-links a:focus-visible { outline:2px solid var(--ember); outline-offset:2px; }
.pagefoot-cta { display:inline-block; margin-top:15px; font-family:var(--font-display); font-weight:700; font-size:1.16rem; color:#fff; border-bottom:2px solid var(--ember); padding-bottom:3px; transition:color var(--t-fast), border-color var(--t-fast); }
.pagefoot-cta:hover { color:var(--ember-on-dark); border-color:var(--ember-on-dark); }
.pagefoot-cta:focus-visible { outline:3px solid var(--ember); outline-offset:3px; }
.pagefoot-base { border-top:1px solid rgba(255,255,255,.13); }
.pagefoot-base-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 0; }
.pagefoot-copy { font-size:.84rem; color:var(--on-dark-3); margin:0; }
.pagefoot-legal { display:flex; gap:20px; align-items:center; }
.pagefoot-legal a { font-family:var(--font-body); font-size:.84rem; color:var(--on-dark-3); transition:color var(--t-fast); background:none; border:0; padding:0; cursor:pointer; }
.pagefoot-legal a:hover { color:#fff; }
.pagefoot-legal a:focus-visible { outline:2px solid var(--ember); outline-offset:2px; }

/* ════════ ANIMATIONS ════════ */
.fade-in { opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.fade-in.visible { opacity:1; transform:none; }

/* ════════ INNER-PAGE PRIMITIVES (baseline; content authored Stage 7) ════════ */
.inner-hero { background:var(--navy); color:var(--on-dark); padding:54px 0 48px; position:relative; z-index:2; border-bottom:4px solid var(--ember); }
.inner-hero h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,3rem); line-height:1.04; color:#fff; }
.inner-hero p { font-size:1.08rem; color:var(--on-dark-2); max-width:58ch; margin-top:14px; }
.content-layout { display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start; }
.prose > * + * { margin-top:17px; }
.prose p, .prose li { color:var(--ink-soft); line-height:1.7; }
.prose ul, .prose ol { padding-left:1.25em; display:flex; flex-direction:column; gap:9px; }
.prose ul.checks { padding-left:0; gap:13px; margin-top:4px; }
.prose ul.checks li { line-height:1.55; }
.prose--solo { max-width:74ch; margin:0 auto; }
.prose--solo .kicker { margin-top:0; }
.prose a { color:var(--ember-cta); border-bottom:1px solid var(--line-strong); transition:color var(--t-fast); }
.prose a:hover { color:var(--ember-dark); }
.sidebar { display:flex; flex-direction:column; gap:20px; position:sticky; top:96px; }
.sidebar-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:24px; box-shadow:var(--shadow-sm); }
/* ── Certification badges (real org logos on white plaques) ── */
.cert-bar { display:flex; flex-wrap:wrap; gap:24px 34px; align-items:center; }
.cert-bar--center { justify-content:center; }
.cert-badge { display:inline-flex; align-items:center; }
.cert-badge img { height:var(--cert-h,118px); width:auto; display:block; }
.cert-badge img[src*="cert-water"], .cert-badge img[src*="cert-mold"] { height:calc(var(--cert-h,118px) * .9); }
/* full-width certification strip (under a section, centered, with a label) */
.cert-strip { margin-top:42px; padding-top:32px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.cert-strip-label { font-family:var(--font-display); font-size:.82rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.split--why .feature-grid { margin-top:26px; }
.section--tight-bottom { padding-bottom:30px; }
/* footer trust badges (small, on white plaques for the navy footer) */
.pagefoot-certs { display:flex; gap:22px; align-items:center; margin-top:22px; }
.pagefoot-cert { display:inline-flex; align-items:center; }
.pagefoot-cert img { height:78px; width:auto; display:block; }
/* inline selling callout inside article prose (native, navy, one CTA) */
.prose-callout { margin:30px 0; padding:22px 26px; background-color:var(--navy); background-image:var(--noise); border-radius:var(--r-md); display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; box-shadow:var(--shadow-md); }
.prose-callout p { color:var(--on-dark) !important; margin:0 !important; flex:1 1 300px; font-size:1.05rem; line-height:1.5; }
.prose-callout p strong { color:#fff; }
.prose-callout .btn-call { flex-shrink:0; color:#fff; border-bottom:0; }
.prose-callout .btn-call:hover { color:#fff; }
/* HTML site map page */
.sitemap-group { margin-bottom:42px; }
.sitemap-group h2 { font-size:clamp(1.25rem,2vw,1.55rem); padding-bottom:10px; border-bottom:2px solid var(--line-strong); margin-bottom:18px; }
.sitemap-note { color:var(--muted); margin:-8px 0 18px; }
.sitemap-list { list-style:none; }
.sitemap-list li { padding:5px 0; }
.sitemap-list a { color:var(--ink-soft); transition:color var(--t-fast); }
.sitemap-list a:hover { color:var(--ember-cta); }
.sitemap-list--cols { column-count:3; column-gap:34px; }
.sitemap-list--cols li { break-inside:avoid; }
.sitemap-cities { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:26px 32px; }
.sitemap-city-head { display:inline-block; font-family:var(--font-display); font-weight:700; font-size:1.06rem; color:var(--navy); margin-bottom:7px; }
.sitemap-city-head:hover { color:var(--ember-cta); }
.sitemap-city .sitemap-list li { padding:3px 0; font-size:.93rem; }
@media (max-width:680px){ .sitemap-list--cols { column-count:2; } }
@media (max-width:430px){ .sitemap-list--cols { column-count:1; } }
.cert-note { font-size:.92rem; color:var(--muted); line-height:1.5; max-width:42ch; }
/* round "certified & licensed" stamps (transparent, no plaque) */
.cert-stamp { flex-shrink:0; }
.cert-stamp img { height:104px; width:auto; display:block; filter:drop-shadow(0 4px 10px rgba(14,46,77,.18)); }
@media (max-width:760px){ .cert-bar { --cert-h:90px; } }
/* Phones: two rows of two, near desktop size. One row of four only fits if the badges shrink to
   ~62px, at which point the seal lettering is unreadable. Columns are auto-sized (not 1fr) so the
   pair stays tight and centred instead of leaving the gutter down the middle that read as a bug. */
@media (max-width:620px){
  .cert-bar { display:grid; grid-template-columns:repeat(2,auto); justify-content:center; justify-items:center; align-items:center; gap:22px 26px; --cert-h:124px; }
  .cert-badge { flex-shrink:0; }
}
@media (max-width:400px){ .cert-bar { --cert-h:108px; gap:18px 20px; } .cert-stamp img { height:88px; } }
/* section heading with a round stamp pulled to the right */
.section-head--stamped { display:flex; align-items:center; justify-content:space-between; gap:30px; max-width:none; }
.section-head--stamped > div { max-width:60ch; }
@media (max-width:680px){ .section-head--stamped { display:block; } .section-head--stamped .cert-stamp { display:none; } }

.credentials { display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.credentials .cred { font-family:var(--font-display); font-size:.86rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); display:flex; align-items:center; gap:8px; }
.credentials .cred::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ember); }
.gallery-wrap { position:relative; }
.work-gallery { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
.work-gallery-item { flex:0 0 300px; scroll-snap-align:start; cursor:pointer; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); }
.work-gallery-item img { width:100%; height:210px; object-fit:cover; transition:transform var(--t-slow); }
.work-gallery-item:hover img { transform:scale(1.04); }
.gallery-arrow { position:absolute; top:38%; width:42px; height:42px; border-radius:50%; background:var(--white); border:1px solid var(--line-strong); color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-md); z-index:3; }
.gallery-arrow:hover { color:var(--ember-cta); border-color:var(--ember); }
.gallery-arrow:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.gallery-arrow:disabled { opacity:.35; cursor:default; }
.gallery-prev { left:-8px; } .gallery-next { right:-8px; }
.gallery-dots { display:flex; gap:7px; justify-content:center; margin-top:14px; }
.gallery-dot { width:8px; height:8px; border-radius:50%; background:var(--line-strong); border:0; cursor:pointer; padding:0; transition:background var(--t-fast), transform var(--t-fast); }
.gallery-dot.active { background:var(--ember-cta); transform:scale(1.3); }
.gallery-dot:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.lightbox-overlay { position:fixed; inset:0; background:rgba(10,34,56,.93); display:none; align-items:center; justify-content:center; z-index:2000; }
.lightbox-overlay.active { display:flex; }
.lightbox-overlay img { max-width:90vw; max-height:84vh; border-radius:var(--r); box-shadow:var(--shadow-lg); }
.lightbox-prev, .lightbox-next, .lightbox-close { position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; cursor:pointer; border-radius:var(--r); }
.lightbox-prev, .lightbox-next { top:50%; transform:translateY(-50%); width:50px; height:64px; font-size:2rem; }
.lightbox-prev { left:18px; } .lightbox-next { right:18px; }
.lightbox-close { top:18px; right:18px; width:46px; height:46px; font-size:1.6rem; }
.lightbox-prev:hover, .lightbox-next:hover, .lightbox-close:hover { background:rgba(255,255,255,.24); }
.lightbox-prev:focus-visible, .lightbox-next:focus-visible, .lightbox-close:focus-visible { outline:3px solid var(--ember); outline-offset:2px; }

/* ════════ RESPONSIVE ════════ */
@media (max-width:980px) {
  .split { grid-template-columns:1fr; gap:30px; }
  .split--why { grid-template-columns:1fr; }
  /* single-column: let the crew photo keep its natural ratio instead of a forced square crop
     (square clipped the lower frame — the drying equipment that proves the water-damage context) */
  .crew-figure { min-height:0; }
  .crew-figure img { position:static; height:auto; min-height:0; aspect-ratio:640 / 540; }
  /* a 3:2 source (the truck) keeps its own ratio rather than being cropped to the crew shape */
  .crew-figure--wide img { aspect-ratio:800 / 533; }
  .duo-grid { grid-template-columns:1fr; }
  .svc-grid { grid-template-columns:repeat(3,1fr); }
  .work-grid { grid-template-columns:repeat(3,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); gap:30px 24px; }
  .content-layout { grid-template-columns:1fr; }
  .sidebar { position:static; }
}
@media (max-width:760px) {
  .svc-grid { grid-template-columns:repeat(2,1fr); }
  .work-grid { grid-template-columns:repeat(2,1fr); }
  .pagefoot-cols { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:680px) {
  .section { padding:54px 0; }
  .steps { grid-template-columns:1fr; gap:26px; }
  .pagefoot-cols { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:440px) {
  .svc-grid { grid-template-columns:1fr; }
  .work-grid { grid-template-columns:1fr; }
}

/* ════════ INNER-HERO sub-elements (inner-page templates) ════════ */
.inner-hero-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px; }
/* `.avail-live` (the badge beside the call button) and `.hero-trust` (the checks under it) are
   shared with the home hero and live in critical-css.html — both render above the fold. */

/* ════════ SIDEBAR sub-elements (sidebar.html partial) ════════ */
.sidebar-card-label { font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ember-cta); margin-bottom:8px; }
.sidebar-card h3 { font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:var(--navy); margin-bottom:6px; }
.sidebar-card p { font-size:.92rem; color:var(--ink-soft); line-height:1.55; }
.sidebar-avail { margin-top:10px; font-size:.8rem; color:var(--muted); text-align:center; }
.sidebar-svc-list { list-style:none; display:flex; flex-direction:column; gap:0; margin-top:4px; }
.sidebar-svc-list li { border-bottom:1px solid var(--line); }
.sidebar-svc-list li:last-child { border-bottom:0; }
.sidebar-svc-list a { display:block; padding:10px 0; font-size:.93rem; color:var(--ink-soft); font-weight:500; transition:color var(--t-fast), padding-left var(--t-fast); }
.sidebar-svc-list a:hover { color:var(--navy); padding-left:5px; }
.sidebar-svc-list a:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
/* A links card holds ONLY links. `.sidebar-ins-note` ("We bill your insurance directly.") sat under
   the services list styled like the rows above it, so it read as a broken, unclickable list item —
   and it repeated a claim the same page already makes in the insurance band. Removed 2026-07-26. */

/* ════════ REDUCED MOTION ════════ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .fade-in { opacity:1; transform:none; }
}