/* ThoroughSpec Home Inspections: shared styles for every page of the static site.
   Built by Howard (HIH). The homepage is the master layout; inner pages reuse these classes.
   Rules: base element rules are wrapped in :where() so every component class wins (team-learnings
   2026-09-16); grids use minmax(0,1fr) and html/body use overflow-x:clip (2026-09-08, 2026-08-26).
   Contrast: gold is a BACKGROUND with navy text, never text on white. Sky blue #2E86C1 is for
   accents/icons only; text links on white use --link (darker) and on navy use --link-on-navy. */

:root{
  --navy:#0E2A40; --navy-deep:#0A1F30; --navy-2:#153A57;
  --gold:#C9A84C; --gold-hi:#D6B85E;
  --sky:#2E86C1; --link:#1B6698; --link-on-navy:#8CC8EE;
  --off:#F7F9FC; --white:#FFFFFF; --line:#DDE4ED;
  --ink:#16222E; --body:#2C3A4A; --muted:#4A5B6C;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --wrap:1180px; --gutter:20px; --radius:10px;
  --shadow:0 8px 24px rgba(14,42,64,.10);
  /* Motion: one easing curve and three durations for the whole site (see MOTION section) */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.25s; --t-med:.35s; --t-slow:.6s;
}

/* ── Base (zero-specificity so components always win) ───────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:where(body){margin:0;background:var(--white);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
:where(h1,h2,h3,h4){font-family:var(--serif);color:var(--navy);line-height:1.2;margin:0 0 .5em;font-weight:700}
:where(p){margin:0 0 1em}
:where(img){max-width:100%;height:auto;display:block}
:where(a){color:var(--link);text-underline-offset:2px}
:where(a:hover){text-decoration-thickness:2px}
:where(ul,ol){margin:0;padding:0}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:3px}
.on-navy :focus-visible,.hero :focus-visible,.site-foot :focus-visible,.final-cta :focus-visible{outline-color:var(--gold)}
.nowrap,a[href^="tel:"]:not(.btn){white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--gold);color:var(--navy);font-weight:700;padding:10px 16px;border-radius:6px;text-decoration:none}
.skip:focus{top:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);width:100%}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:8px;font:700 16px/1.2 var(--sans);text-decoration:none;text-align:center;border:2px solid transparent;cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 4px 14px rgba(201,168,76,.35)}
.btn-gold:hover{background:var(--gold-hi);transform:translateY(-1px);box-shadow:0 8px 20px rgba(201,168,76,.42)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);transform:translateY(-1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn>span{min-width:0}
.link-arrow{font-weight:600;text-decoration:none;color:var(--link)}
.link-arrow::after{content:" \2192"}
.link-arrow:hover{text-decoration:underline}

/* ── Top bar (tablet/desktop) ───────────────────────────────────────── */
.topbar{background:var(--navy-deep);color:rgba(255,255,255,.85);font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px}
.topbar a{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.topbar a:hover{text-decoration:underline}
.topbar .tb-phone{color:var(--gold)}

/* ── Header + nav (white bar; Albert's navy+gold 2026 logo, 2.17:1, sized by width so "HOME INSPECTIONS" stays legible) ── */
.site-head{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:50}
/* Logo is pixel-exact: the CSS width always equals the 1x file width of the <source> that media query picks
   (280 at >=1200, 217 below), height auto = exact file ratio; no transforms/filters/will-change on it (v2026b, 2026-09-30) */
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:153px;padding-top:12px;padding-bottom:12px}
.brand{display:block;flex:none;line-height:0}
.brand picture{display:block}
.brand img{width:217px;height:auto;max-width:none;image-rendering:auto}
@media (min-width:1200px){.brand img{width:280px}}

.site-nav ul{list-style:none}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-list>li{position:relative}
.nav-list a{display:block;padding:10px 12px;color:var(--navy);font-weight:600;font-size:15.5px;text-decoration:none;border-radius:6px;white-space:nowrap;transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.nav-list a:hover{color:var(--link)}
.nav-list a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--gold);border-radius:0}
.nav-list .nav-cta a{background:var(--gold);color:var(--navy);padding:10px 18px;border-radius:8px;margin:0 6px}
.nav-list .nav-cta a:hover{background:var(--gold-hi);color:var(--navy)}
.has-dd{display:flex;align-items:center}
.has-dd>a::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.dd{position:absolute;top:100%;left:0;min-width:270px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:0 0 8px 8px;box-shadow:var(--shadow);padding:6px 0;display:none}
.dd a{font-weight:500;padding:10px 18px;border-radius:0}
.has-dd:hover .dd,.has-dd:focus-within .dd{display:block}
.dd-toggle{display:none}
.nav-toggle{display:none;background:none;border:2px solid var(--line);border-radius:8px;width:48px;height:48px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 1080-1199: full nav + the 217px logo only fit if the nav gives a little */
@media (min-width:1080px) and (max-width:1199px){
  .head-in{gap:14px;min-height:124px}
  .nav-list a{padding:10px 8px;font-size:15px}
  .nav-list .nav-cta a{padding:10px 14px;margin:0 4px}
}

@media (min-width:1200px){
  /* the 280px logo leaves the nav 840px of the 1140px wrap: tighter link padding keeps "Contact" inside it even in
     fallback fonts (before Inter loads, or if Google Fonts fail); Inter needs ~806px at the old spacing */
  .nav-list>li>a{padding:10px 9px}
  .nav-list>.nav-cta>a{padding:10px 16px;margin:0 4px}
}

@media (max-width:1079px){
  .head-in{min-height:118px;padding-top:9px;padding-bottom:9px}
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 14px 24px rgba(14,42,64,.15);padding:8px var(--gutter) 18px}
  .site-nav.open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list>li{border-bottom:1px solid var(--line)}
  .nav-list a{padding:14px 6px;font-size:17px}
  .nav-list a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--gold);padding-left:14px}
  .has-dd{flex-wrap:wrap}
  .has-dd>a{flex:1}
  .has-dd>a::after{display:none}
  .dd-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:0;cursor:pointer;color:var(--navy)}
  .dd-toggle::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  .dd-toggle[aria-expanded="true"]::before{transform:translateY(2px) rotate(-135deg)}
  .dd{position:static;display:none;width:100%;min-width:0;border:0;border-left:3px solid var(--gold);border-radius:0;box-shadow:none;background:var(--off);margin:0 0 10px}
  .has-dd:hover .dd,.has-dd:focus-within .dd{display:none}
  .has-dd.open .dd{display:block}
  .dd a{padding:12px 16px;font-size:16px}
  .nav-list>li.nav-cta{border-bottom:0;padding-top:14px}
  .nav-list .nav-cta a{text-align:center;margin:0;padding:14px}
}

/* ── Sections ────────────────────────────────────────────────────────── */
.sec{padding:80px 0}
.sec-off{background:var(--off)}
.sec-head{max-width:760px;margin:0 0 40px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:inline-block;font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--link);margin:0 0 14px}
.eyebrow::before{content:"";display:inline-block;width:28px;height:3px;background:var(--gold);vertical-align:middle;margin-right:10px;transform:translateY(-2px)}
.h2{font-size:clamp(28px,3.4vw,40px)}
.lead{font-size:19px;color:var(--body)}
.sec-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.sec-cta.center{justify-content:center}

/* ── Hero (navy; photo right) ────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1000px 520px at 85% 20%,rgba(46,134,193,.28),transparent 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 22px),
    linear-gradient(160deg,var(--navy-2) 0%,var(--navy) 55%,var(--navy-deep) 100%)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:center;padding-top:72px;padding-bottom:80px}
.hero h1{color:#fff;font-size:clamp(34px,4.6vw,54px);line-height:1.12;margin:0 0 20px}
.hero-sub{font-size:19px;line-height:1.6;color:rgba(255,255,255,.9);max-width:640px;margin:0 0 24px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(201,168,76,.55);font-size:14.5px;font-weight:600;color:#fff}
.chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 14px}
.hero-micro{font-size:15px;color:rgba(255,255,255,.8);margin:0}
.hero-photo{margin:0;justify-self:end;width:100%;max-width:400px;position:relative}
.hero-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;border:4px solid #fff;box-shadow:14px 14px 0 var(--gold),0 24px 50px rgba(0,0,0,.35)}
.hero-photo figcaption{position:absolute;left:18px;bottom:18px;right:18px;background:rgba(10,31,48,.9);border-left:4px solid var(--gold);border-radius:6px;padding:10px 14px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.85)}
.hero-photo figcaption strong{display:block;font:700 18px/1.2 var(--serif);color:#fff}

/* ── Trust strip + credentials ──────────────────────────────────────── */
.trust{background:var(--off);border-bottom:1px solid var(--line)}
.trust-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0}
.trust-list li{padding:26px 22px;border-right:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--muted)}
.trust-list li:last-child{border-right:0}
.trust-list strong{display:block;font:700 22px/1.2 var(--serif);color:var(--navy);margin-bottom:4px}
.trust-list a{color:inherit;text-decoration:none;display:block}
.trust-list a strong{color:var(--link)}
.trust-list a:hover strong{text-decoration:underline}
.trust-list .stars{display:block;font-size:17px;letter-spacing:3px}
.stars{color:#B8922E;letter-spacing:1px}
.creds{background:#fff;border-bottom:1px solid var(--line);padding:30px 0}
.creds .wrap{display:flex;align-items:center;gap:28px}
.creds-label{flex:none;max-width:210px;font:700 14px/1.4 var(--sans);color:var(--navy);margin:0}
.creds-label span{display:block;font-weight:500;color:var(--muted)}
.badges{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:center;flex:1;min-width:0}
.badges img{width:100%;max-width:104px;height:auto;margin:0 auto}

/* ── Intro ──────────────────────────────────────────────────────────── */
.intro{max-width:820px;margin:0 auto;text-align:center}
.intro p{font-size:19px}

/* ── "You always get Mark" split ─────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
:where(.split-text) p{font-size:18px}
.quote-card{position:relative;background:#fff;border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 32px 28px;margin:0}
.quote-card blockquote{margin:0 0 20px;font:italic 400 18px/1.65 var(--serif);color:var(--ink)}
.quote-card blockquote p{margin:0}
.quote-card blockquote p+p{margin-top:.75em}
.quote-card blockquote::before{content:"\201C";display:block;font:700 64px/0.6 var(--serif);color:var(--gold);margin:6px 0 8px}
.quote-by{display:flex;align-items:center;gap:14px;margin:0;font-weight:600;color:var(--navy);font-size:15.5px}
.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:3px solid var(--gold);flex:none}
.avatar-pic{display:block;flex:none;line-height:0}

/* ── Services ───────────────────────────────────────────────────────── */
.cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 26px;transition:box-shadow var(--t-med) var(--ease),transform var(--t-med) var(--ease),border-color var(--t-med) var(--ease)}
.card:hover{box-shadow:0 14px 32px rgba(14,42,64,.14);transform:translateY(-4px);border-color:#C5D2E0}
.card:focus-within{box-shadow:var(--shadow);border-color:var(--sky)}
.card-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:#EAF3FA;color:var(--sky);margin-bottom:18px}
.card-ico svg{width:28px;height:28px}
.card h3{font-size:21px;margin:0 0 8px}
.card h3 a{color:var(--navy);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card h3 a:focus-visible{outline:none}
.card p{margin:0 0 14px;font-size:16px;color:var(--body)}
.card-more{font-weight:600;font-size:15px;color:var(--link)}
.card-more::after{content:" \2192"}
.cards-5{grid-template-columns:repeat(6,minmax(0,1fr))}
.cards-5 .card{grid-column:span 2}
.cards-5 .card:nth-child(4){grid-column:2/span 2}

/* ── Steps ──────────────────────────────────────────────────────────── */
.steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.steps li{counter-increment:step;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative}
.steps li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold);font:700 20px/1 var(--serif);margin-bottom:16px}
.steps h3{font-size:19px;margin:0 0 6px}
.steps p{margin:0;font-size:15.5px}

/* ── Service areas ──────────────────────────────────────────────────── */
.areas{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:28px}
.area{position:relative;background:var(--navy);color:rgba(255,255,255,.85);border-radius:var(--radius);padding:28px 26px;border-bottom:4px solid var(--gold);transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.area:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(14,42,64,.28)}
.area h3{font-size:21px;margin:0 0 8px}
.area h3 a{color:#fff;text-decoration:none}
.area h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.area h3 a:focus-visible{outline:none}
.area:focus-within{outline:3px solid var(--gold);outline-offset:3px}
.area p{margin:0;font-size:16px}
.area-pin{display:inline-flex;color:var(--gold);margin-bottom:12px}
.area-pin svg{width:26px;height:26px}
.areas-more{margin:0;font-size:17px}

/* ── Reviews teaser ─────────────────────────────────────────────────── */
.reviews{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:48px;align-items:start}
.rating-box{background:var(--navy);color:#fff;border-radius:var(--radius);padding:34px 28px;text-align:center}
.rating-num{display:block;font:700 64px/1 var(--serif);color:#fff}
.rating-stars{display:block;font-size:26px;letter-spacing:4px;color:var(--gold);margin:8px 0 6px}
.rating-box p{margin:0;color:rgba(255,255,255,.85);font-size:15.5px}
.rating-box .rating-pre{margin:0 0 12px}
.reviews .lead{margin-bottom:18px}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq{max-width:860px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin:0 0 14px;overflow:hidden}
.faq details[open]{border-color:#C5D2E0;box-shadow:0 4px 14px rgba(14,42,64,.06)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font:700 18px/1.35 var(--serif);color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq-q{font:inherit;color:inherit;margin:0}
.faq summary::after{content:"+";flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--off);color:var(--navy);font:600 22px/1 var(--sans)}
.faq details[open] summary::after{content:"\2212";background:var(--gold)}
.faq summary:focus-visible{outline-offset:-3px}
.faq-a{padding:0 24px 22px}
.faq-a p{margin:0;font-size:16.5px}

/* ── Final CTA ──────────────────────────────────────────────────────── */
.final-cta{background:
    radial-gradient(700px 360px at 15% 0%,rgba(46,134,193,.22),transparent 60%),
    linear-gradient(160deg,var(--navy-2),var(--navy));color:#fff;text-align:center;padding:84px 0}
.final-cta h2{color:#fff;font-size:clamp(28px,3.6vw,42px);max-width:820px;margin:0 auto 16px}
.final-cta p{max-width:700px;margin:0 auto 30px;font-size:18px;color:rgba(255,255,255,.9)}
.final-ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 28px;margin-bottom:24px}
.big-phone{display:inline-flex;align-items:center;gap:10px;color:#fff;font:700 clamp(22px,2.6vw,28px)/1.2 var(--sans);text-decoration:none;padding:8px 4px;transition:color var(--t-fast) var(--ease)}
.big-phone span{color:rgba(255,255,255,.8);font-size:.62em;font-weight:600}
.big-phone:hover{color:var(--gold)}
.big-phone svg{width:26px;height:26px;color:var(--gold);flex:none}
.final-cta .fine{font-size:15px;color:rgba(255,255,255,.78);margin:0 auto}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-foot{background:var(--navy-deep);color:rgba(255,255,255,.82);font-size:15.5px;padding:64px 0 0}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.site-foot h2{font:700 15px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.site-foot .foot-name{font:700 22px/1.25 var(--serif);letter-spacing:0;text-transform:none;color:#fff;margin-bottom:6px}
/* Footer logo: white rounded panel so the navy lettering reads on navy (1.04:1 without it) */
.site-foot .foot-logo{display:inline-block;background:#fff;border-radius:10px;padding:12px 14px;margin:0 0 14px;line-height:0;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.foot-logo picture{display:block}
.foot-logo img{width:243px;height:auto;image-rendering:auto} /* = 1x file width of thoroughspec-logo-2026b-foot* */
.site-foot .foot-tagline{font:italic 400 16.5px/1.45 var(--serif);color:var(--gold);margin:0 0 14px}
.site-foot p{margin:0 0 12px}
.site-foot a{color:#fff;text-decoration:none}
.site-foot a:hover{color:var(--gold);text-decoration:underline}
.site-foot address{font-style:normal}
.foot-links{list-style:none}
.foot-links li{margin:0 0 9px}
.foot-bar{margin-top:48px;border-top:1px solid rgba(255,255,255,.14);padding:22px 0 26px;font-size:14px;color:rgba(255,255,255,.72)}
.foot-bar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.foot-bar a{color:rgba(255,255,255,.9)}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 18px}

/* ── Sticky mobile call bar ─────────────────────────────────────────── */
.mobile-bar{display:none}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1079px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .creds .wrap{flex-direction:column;align-items:stretch;text-align:center}
  .creds-label{max-width:none}
}
@media (max-width:900px){
  .sec{padding:64px 0}
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,250px);gap:36px;padding-top:48px;padding-bottom:60px}
  .hero-photo figcaption{left:10px;right:10px;bottom:10px;padding:8px 10px;font-size:13px}
  .trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-list li:nth-child(2){border-right:0}
  .trust-list li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .split{grid-template-columns:minmax(0,1fr);gap:36px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-5 .card,.cards-5 .card:nth-child(4){grid-column:auto}
  .areas{grid-template-columns:minmax(0,1fr)}
  .reviews{grid-template-columns:minmax(0,1fr);gap:28px}
  .badges{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  .topbar{display:none}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-photo{justify-self:center;max-width:320px}
  .foot-bar{padding-bottom:84px}
  .mobile-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;box-shadow:0 -6px 18px rgba(0,0,0,.2)}
  .mobile-bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;font:700 16px/1.2 var(--sans);text-decoration:none}
  .mobile-bar svg{width:18px;height:18px}
  .mb-call{background:var(--navy);color:#fff}
  .mb-book{background:var(--gold);color:var(--navy)}
  .mobile-bar a:focus-visible{outline:3px solid #fff;outline-offset:-5px}
}
@media (max-width:640px){
  :root{--gutter:18px}
  body{font-size:16.5px}
  .sec{padding:56px 0}
  .hero-sub,.lead,.intro p{font-size:17.5px}
  .hero-ctas .btn,.sec-cta .btn,.final-ctas .btn{width:100%}
  .hero-photo{max-width:280px}
  .hero-photo img{box-shadow:10px 10px 0 var(--gold),0 18px 36px rgba(0,0,0,.35)}
  .trust-list li{padding:20px 14px}
  .trust-list strong{font-size:19px}
  .cards,.cards-5,.steps{grid-template-columns:minmax(0,1fr)}
  .quote-card{padding:28px 22px 24px}
  .faq summary{padding:18px 18px;font-size:17px}
  .faq-a{padding:0 18px 20px}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .foot-bar .wrap{flex-direction:column}
}

/* ════════════════════════════════════════════════════════════════════════
   MOTION SYSTEM (Beth, wrap-up brief §3): one orchestrated feel, sitewide.
   - One easing curve (--ease) and three durations (--t-fast .25s colour changes,
     --t-med .35s hover lifts / underline, --t-slow .6s scroll reveals).
   - Scroll reveal: site.js adds .motion to <html> ONLY when IntersectionObserver exists and
     the visitor has not asked for reduced motion. It marks the content wrapper of each
     below-the-fold <main> section .reveal and adds .in when it scrolls into view. Nothing is
     hidden without JS, and anything already on screen at load (the hero) is never animated,
     so LCP is untouched. Grids inside a revealed section stagger in via a keyframe with
     fill-mode "backwards", so hover transforms still work once the entrance ends.
   - Hover: cards and city cards lift 4px; CTA buttons ease their colour; desktop nav links
     get a gold underline that slides in on hover and keyboard focus.
   - prefers-reduced-motion: no transforms, no animation, no transitions (block at the end).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:1080px){
  .nav-list>li:not(.nav-cta)>a{background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-origin:content-box;background-position:0 calc(100% + 5px);background-size:0 2px;transition:color var(--t-fast) var(--ease),background-size var(--t-med) var(--ease)}
  .nav-list>li:not(.nav-cta)>a:hover,.nav-list>li:not(.nav-cta)>a:focus-visible{background-size:100% 2px}
}
.motion .reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.motion .reveal.in{opacity:1;transform:none}
.motion .reveal.in :is(.cards,.areas,.steps,.angles,.topics,.quotes)>*{animation:rise var(--t-slow) var(--ease) backwards}
.motion .reveal.in :is(.cards,.areas,.steps,.angles,.topics,.quotes)>:nth-child(1){animation-delay:.12s}
.motion .reveal.in :is(.cards,.areas,.steps,.angles,.topics,.quotes)>:nth-child(2){animation-delay:.2s}
.motion .reveal.in :is(.cards,.areas,.steps,.angles,.topics,.quotes)>:nth-child(3){animation-delay:.28s}
.motion .reveal.in :is(.cards,.areas,.steps,.angles,.topics,.quotes)>:nth-child(4){animation-delay:.36s}
.motion .reveal.in :is(.cards,.areas,.steps,.angles,.topics,.quotes)>:nth-child(n+5){animation-delay:.44s}
@keyframes rise{from{opacity:0;transform:translate3d(0,16px,0)}}
@media print{.motion .reveal{opacity:1!important;transform:none!important}}

/* ════════════════════════════════════════════════════════════════════════
   INNER-PAGE COMPONENTS (About, Services, Schedule, city pages). Added 2026-09-24.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tagline / kicker / breadcrumbs (navy hero) ─────────────────────── */
.tagline,.kicker{font:italic 400 clamp(19px,2vw,23px)/1.4 var(--serif);color:var(--gold);margin:0 0 18px}
.hero h1+.tagline{margin-top:-6px}
.kicker{margin:0 0 12px}
.kicker-plain{font:700 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--link-on-navy)}
.crumbs{margin:0 0 18px;font-size:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0}
.crumbs li{color:rgba(255,255,255,.72)}
.crumbs li+li::before{content:"/";margin:0 10px;color:rgba(255,255,255,.4)}
.crumbs a{color:var(--link-on-navy);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:#fff;font-weight:600}
.hero-inner .hero-in{padding-top:40px;padding-bottom:68px}
.hero-inner h1{font-size:clamp(32px,4.2vw,50px)}
.hero-solo{grid-template-columns:minmax(0,1fr)}
.hero-solo .hero-text{max-width:860px}
.on-navy-link{color:var(--link-on-navy)}
.on-navy-link:hover{color:var(--gold)}
.btn-lg{min-height:56px;padding:14px 28px;font-size:18px}

/* ── Anchored sections clear the header with a little air ───────────── */
section[id]{scroll-margin-top:24px}

/* ── Trust callout (About: pricing philosophy; NOT a price table) ───── */
.sec-tight{padding-top:0}
.callout{max-width:940px;margin:0 auto;border-radius:14px;border-left:6px solid var(--gold);padding:40px 44px;color:#fff;box-shadow:0 18px 40px rgba(14,42,64,.22);
  background:radial-gradient(600px 300px at 100% 0%,rgba(46,134,193,.25),transparent 60%),linear-gradient(160deg,var(--navy-2),var(--navy))}
.callout-tag{font:italic 400 clamp(21px,2.4vw,26px)/1.35 var(--serif);color:var(--gold);margin:0 0 14px}
.callout-text{font-size:18.5px;line-height:1.7;color:rgba(255,255,255,.92);margin:0 0 24px}

/* ── Three angles (About background) ────────────────────────────────── */
.angles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.angle{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.angle p{margin:0;font-size:16.5px}
.angle strong{color:var(--navy)}
.center-prose{max-width:780px;margin:32px auto 0;text-align:center}
.center-prose p{margin:0;font-size:17.5px}

/* ── Info panel + Beth's inspection-description note ────────────────── */
.h3{font-size:clamp(22px,2.2vw,27px)}
.info-panel{background:var(--off);border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:var(--radius);padding:32px 30px}
.info-panel p{font-size:16.5px}
.info-note{background:#EAF3FA;border-left:4px solid var(--sky);border-radius:8px;padding:18px 22px;font-size:16.5px;color:var(--ink);margin:0 0 1em}
.info-panel .info-note{margin:0}

/* ── Checklists (gold check icons) ──────────────────────────────────── */
.checklist{list-style:none;display:grid;gap:12px;margin:0 0 20px;padding:0}
.checklist li{position:relative;padding-left:34px;font-size:16.5px;line-height:1.55}
.checklist li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2A40' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.checklist strong{color:var(--navy)}
.checklist-2{display:block;columns:2;column-gap:44px}
.checklist-2 li{break-inside:avoid;margin:0 0 14px}
.checklist-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.checklist-sm li{font-size:15.5px}
.checklist-lead,.list-lead{font-weight:700;color:var(--navy);font-size:18px;margin:0 0 14px}
.quals-head{display:flex;align-items:center;gap:28px;max-width:940px;margin:0 0 30px}
.quals-head .h2{margin-bottom:.35em}
.quals-head .lead{margin:0}
.quals-badge{width:120px;flex:none}
.quals-foot{margin:6px 0 10px;font-weight:600;color:var(--navy)}
.inline-links{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0}
.inline-links.center{justify-content:center;margin-top:28px}

/* ── Reviews strip (two quotes) ─────────────────────────────────────── */
.rating-line{font-weight:600;color:var(--navy);margin:0}
.rating-line .stars{font-size:20px;margin-right:6px}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.quotes-even{align-items:stretch}
.quotes-even>.quote-card{display:flex;flex-direction:column}
.quotes-even>.quote-card blockquote{flex:1}

/* ── Services page ──────────────────────────────────────────────────── */
.jump{background:#fff;border-bottom:1px solid var(--line);padding:18px 0}
.jump ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:1.5px solid var(--line);border-radius:999px;color:var(--navy);font-weight:600;font-size:15px;text-decoration:none;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.jump a:hover{border-color:var(--gold);background:#FBF7EA}
.svc>.wrap{max-width:980px}
.svc-main{max-width:none}
.svc .card-ico{margin-bottom:16px}
.svc-h3{font-size:24px;margin:34px 0 16px}
.glance{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:22px 0 0}
.glance-label{font-weight:700;color:var(--navy)}
.glance ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.glance li{padding:7px 14px;border-radius:999px;background:#EAF3FA;border:1px solid #CFE2F1;color:var(--navy);font-size:14.5px;font-weight:600}
.svc .sec-cta{margin-top:26px}

/* ── Schedule page ──────────────────────────────────────────────────── */
.hero-sched{grid-template-columns:minmax(0,1fr) minmax(0,380px);grid-template-areas:"text phone" "chips phone";row-gap:0}
.hero-sched .hero-text{grid-area:text;align-self:end}
.hero-sched .hero-sub{margin-bottom:24px}
.hero-sched .phone-block{grid-area:phone}
.hero-sched .hero-chips{grid-area:chips;align-self:start;margin:0}
.phone-block{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(201,168,76,.55);border-radius:14px;padding:30px 24px}
.phone-block .avatar{width:96px;height:96px}
.phone-block .btn{width:100%}
.phone-alt{margin:0;font-size:15.5px;color:rgba(255,255,255,.85)}
.phone-alt a{color:var(--link-on-navy);font-weight:600}
.phone-alt a:hover{color:var(--gold)}
.form-card{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 44px}
.form-card .lead{margin-bottom:22px}
.req-note{font-size:14px;color:var(--muted);margin:0 0 16px}
.req{color:#B42318}
.opt{font-weight:400;color:var(--muted);font-size:14px}
.f-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 20px}
.f-half{grid-column:span 3}
.f-wide{grid-column:1/-1}
.f-addr{grid-column:span 4}
.f-city{grid-column:span 2}
/* Property details row (/schedule/): 3-up like the Inspection type tiles, weighted so the longest
   foundation option ("Raised foundation / crawl space") is never cut off; 2-up + full-width select at <=900px. */
.f-property{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1.85fr);margin:0 0 20px}
.f-third{grid-column:auto}
.req-form select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230E2A40' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center}
.checks-time{margin-top:0}
.time-clear{display:inline-block;background:none;border:0;padding:6px 2px;margin:8px 0 0;color:var(--link);font:600 14.5px/1.3 var(--sans);text-decoration:underline;cursor:pointer}
.time-clear:hover{color:var(--navy)}
.field>label,.field>legend{display:block;font-weight:600;color:var(--navy);font-size:15.5px;margin:0 0 6px;padding:0}
.req-form input:not([type=checkbox],[type=radio]),.req-form textarea,.req-form select{display:block;width:100%;min-height:50px;padding:11px 14px;border:1.5px solid #B9C6D4;border-radius:8px;background:#fff;color:var(--ink);font:400 16px/1.4 var(--sans);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.req-form textarea{min-height:120px;resize:vertical}
.req-form input:focus,.req-form textarea:focus,.req-form select:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(46,134,193,.22);outline:none}
.req-form input:user-invalid,.req-form textarea:user-invalid,.req-form select:user-invalid,.req-form input[aria-invalid=true],.req-form select[aria-invalid=true]{border-color:#B42318}
.req-form ::placeholder{color:#6B7A8A}
.hint{font-size:14px;color:var(--muted);margin:6px 0 0}
.checks{border:0;margin:22px 0;padding:0;min-width:0}
.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.check{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;cursor:pointer;font-size:15.5px;line-height:1.4;color:var(--ink);transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.check:hover{border-color:#B9C6D4}
.check:has(input:checked){border-color:var(--gold);background:#FBF7EA}
.check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--navy)}
.checks.invalid .check{border-color:#E4A9A3}
.f-err{color:#B42318;font-size:14.5px;font-weight:600;margin:8px 0 0}
.f-date{max-width:320px;margin:0 0 20px}
.check.consent{border:0;padding:0;margin:20px 0 24px;font-size:14px;color:var(--muted)}
.check.consent:has(input:checked){background:none}
.form-status{margin:18px 0 0;padding:16px 18px;background:#FBF7EA;border-left:4px solid var(--gold);border-radius:8px;color:var(--ink);font-weight:600}
.form-status:focus{outline:none}
.form-micro{font-size:14.5px;color:var(--muted);margin:14px 0 0}
.info-table{max-width:780px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.info-table>div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);border-bottom:1px solid var(--line)}
.info-table>div:last-child{border-bottom:0}
.info-table dt{background:var(--off);padding:14px 20px;font-weight:600;color:var(--navy)}
.info-table dd{margin:0;padding:14px 20px}

/* ── City pages ─────────────────────────────────────────────────────── */
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.topic{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.topic h3{font-size:21px}
.topic p{font-size:16px}
.topic p:last-child,.topic .checklist:last-child{margin-bottom:0}
.split-badge{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.badge-panel{display:flex;align-items:center;justify-content:center;background:var(--off);border:1px solid var(--line);border-radius:var(--radius);padding:40px}
.badge-panel img{width:100%;max-width:190px}

/* ── Inner-page responsive ──────────────────────────────────────────── */
@media (max-width:1079px){
  .topics{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .angles,.quotes{grid-template-columns:minmax(0,1fr)}
  .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checks-time .check-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .f-property{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-property .f-third:last-child{grid-column:1/-1}
  .hero-sched{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .split-badge{grid-template-columns:minmax(0,1fr)}
  .badge-panel{padding:28px}
  .badge-panel img{max-width:150px}
}
@media (max-width:767px){
  .hero-sched{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "phone" "chips";gap:24px}
  .hero-sched .hero-sub{margin-bottom:0}
}
@media (max-width:640px){
  .callout{padding:30px 22px;border-left-width:5px}
  .callout .btn{width:100%}
  .phone-block{padding:24px 16px}
  .phone-block .btn{padding-left:14px;padding-right:14px;font-size:17px}
  .checklist-2{columns:1}
  .checklist-card{padding:22px 18px}
  .quals-head{flex-direction:column;align-items:flex-start;gap:16px}
  .quals-badge{width:96px}
  .form-card{padding:28px 18px}
  .f-grid{grid-template-columns:minmax(0,1fr)}
  .f-half,.f-addr,.f-city,.f-third,.f-property .f-third:last-child{grid-column:auto}
  .f-property{grid-template-columns:minmax(0,1fr)}
  .checks-time .check-grid{grid-template-columns:minmax(0,1fr)}
  .f-date{max-width:none}
  .req-form .btn{width:100%}
  .info-table>div{grid-template-columns:minmax(0,1fr)}
  .info-table dt{padding:10px 16px 4px;background:none}
  .info-table dd{padding:0 16px 12px}
  .jump ul{justify-content:flex-start}
  .info-panel{padding:24px 20px}
}
@media (max-width:420px){
  .check-grid{grid-template-columns:minmax(0,1fr)}
}

/* ── Reduced motion: no transforms, no animation, no transitions ────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .motion .reveal{opacity:1;transform:none}
  .btn:hover,.card:hover,.area:hover{transform:none}
}

/* ════════════════════════════════════════════════════════════════════════
   WAVE-2 COMPONENTS (Service Areas hub, Mission Viejo, Anaheim, Reviews, Sample
   Report, Contact, Privacy Policy, Terms). Added 2026-09-24. New classes only:
   nothing here restyles a class used by the approved/wave-1 pages.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Service Areas hub: county blocks, city cards, "we also serve" list ── */
.counties{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0;padding:0}
.county{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--radius);padding:26px 24px}
.county h3{font-size:21px;margin:0 0 8px}
.county p{margin:0;font-size:16px}
.county-home{background:var(--navy);border-color:var(--navy);border-top-color:var(--gold);color:rgba(255,255,255,.88)}
.county-home h3{color:#fff}
.city-cards .area h3{color:#fff}
.area-link{display:inline-block;margin-top:16px;color:var(--gold);font-weight:700;font-size:16px;text-decoration:none}
.area-link::after{content:" \2192"}
.area-link::before{content:"";position:absolute;inset:0;border-radius:inherit}
.area-link:hover{text-decoration:underline}
.area-link:focus-visible{outline:none}
.city-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;margin:0 auto;padding:0}
.city-list li{padding:8px 16px;border-radius:999px;background:var(--off);border:1px solid var(--line);color:var(--navy);font-weight:600;font-size:15px;line-height:1.3}
.cards-compact .card h3{margin-bottom:12px}

/* ── City pages (wave 2): 2-up topics with a full-width lead topic; stacked side column ── */
.topics.topics-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.topic-wide{grid-column:1/-1}
.topic .checklist-2{margin-bottom:18px}
.split.split-top{align-items:start}
.stack{display:grid;gap:24px;min-width:0}
.stack .info-panel .h3{margin-bottom:12px}
.stack .rating-line{margin:0}

/* ── Reviews page: rating hero, facts row, grouped testimonials ──────── */
.rating-hero{justify-self:end;width:100%;max-width:360px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(201,168,76,.55);border-radius:16px;padding:34px 24px 30px;box-shadow:0 24px 50px rgba(0,0,0,.25)}
.rating-hero-num{display:block;font:700 clamp(88px,10vw,128px)/1 var(--serif);color:#fff}
.rating-hero-stars{display:block;font-size:clamp(30px,3.2vw,38px);letter-spacing:6px;color:var(--gold);margin:10px 0 8px}
.rating-hero-src{display:block;font-size:17px;font-weight:600;color:rgba(255,255,255,.88)}
.rating-hero-pre{display:block;font-size:17px;font-weight:600;color:rgba(255,255,255,.88);margin:0 0 12px}
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:960px;margin:0 auto;padding:0}
.facts li{background:var(--off);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--radius);padding:22px 20px;text-align:center;color:var(--muted);font-size:15.5px;line-height:1.5}
.facts strong{display:block;font:700 21px/1.25 var(--serif);color:var(--navy);margin-bottom:4px}
.group-head{margin:0 0 22px}
.quotes-flow+.group-head{margin-top:28px}
.quotes.quotes-flow{display:block;columns:2;column-gap:28px}
.quotes-flow>.quote-card{break-inside:avoid;margin:0 0 28px}
.center-links{justify-content:center}
.final-cta .center-links{margin-top:6px}

/* ── Sample Report: inline PDF preview (tablet/desktop only) ─────────── */
.pdf-sec{padding:56px 0 64px}
.pdf-frame{height:min(80vh,880px);min-height:520px;background:#525659;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.pdf-frame object{display:block;width:100%;height:100%}
.pdf-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:24px;background:var(--off);text-align:center}
.pdf-note{margin:16px 0 0;text-align:center}

/* ── Contact: hero phone block, details + map, message form ──────────── */
.hero-contact{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:stretch}
.contact-grid .info-table{max-width:none;margin:0}
.map-card{min-height:360px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--off)}
.map-card iframe{display:block;width:100%;height:100%;min-height:360px;border:0}
.form-card-narrow{max-width:760px}
.f-submit{margin-top:24px}

/* ── Legal pages (Privacy Policy, Terms): simple, readable column ────── */
.hero-inner .hero-in.hero-legal{padding-bottom:44px}
.legal{max-width:760px;margin:0 auto}
.legal p,.legal li{font-size:17px}
.legal h2{font-size:clamp(22px,2.4vw,27px);margin:40px 0 12px;padding-top:24px;border-top:1px solid var(--line)}
.legal h3{font-size:19px;margin:24px 0 8px}
.legal ul{list-style:disc;padding-left:24px;margin:0 0 1em}
.legal li{margin:0 0 8px;padding-left:4px}
.legal li::marker{color:var(--gold)}
.legal a{overflow-wrap:anywhere}
.legal-contact{font-style:normal;background:var(--off);border-left:4px solid var(--gold);border-radius:8px;padding:18px 22px;margin:0 0 20px;line-height:1.75}
.legal-see{margin:0}
.final-cta-slim{padding:60px 0}
.final-cta-slim h2{margin-bottom:24px}
.final-cta-slim .final-ctas{margin-bottom:0}

/* ── Motion: the new grids stagger in exactly like the wave-1 grids ─── */
.motion .reveal.in :is(.counties,.facts)>*{animation:rise var(--t-slow) var(--ease) backwards}
.motion .reveal.in :is(.counties,.facts)>:nth-child(1){animation-delay:.12s}
.motion .reveal.in :is(.counties,.facts)>:nth-child(2){animation-delay:.2s}
.motion .reveal.in :is(.counties,.facts)>:nth-child(3){animation-delay:.28s}
.motion .reveal.in :is(.counties,.facts)>:nth-child(n+4){animation-delay:.36s}

/* ── Wave-2 responsive ─────────────────────────────────────────────── */
@media (max-width:1079px){
  .counties{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .topics.topics-2{grid-template-columns:minmax(0,1fr)}
  .quotes.quotes-flow{columns:1}
  .hero-contact{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .map-card,.map-card iframe{min-height:320px}
  .rating-hero{max-width:250px;padding:26px 16px 22px}
  .rating-hero-num{font-size:84px}
  .rating-hero-stars{font-size:26px;letter-spacing:4px}
  .rating-hero-src,.rating-hero-pre{font-size:15px}
}
@media (max-width:767px){
  .pdf-sec{display:none}
  .hero-contact{grid-template-columns:minmax(0,1fr);gap:28px}
  .rating-hero{justify-self:start;max-width:none}
  .facts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .counties{grid-template-columns:minmax(0,1fr)}
  .city-list{justify-content:flex-start}
  .legal p,.legal li{font-size:16.5px}
  .legal h2{margin-top:32px;padding-top:20px}
}

/* ════════════════════════════════════════════════════════════════════════
   HERO IMAGE LAYER (2026-09-25; LIGHTENED 2026-09-26 per Beth: "more of the golden sunset tones, make it vivid").
   Home + the 3 city pages; About since 2026-09-26 (Mark's own photo, right-anchored: see MARK'S PHOTOS at the end).
   Every other page keeps the navy hero.
   A real <picture>/<img> (the LCP element), not a CSS background. Markup, first child of .hero:
     <div class="hero-media" aria-hidden="true"><picture>…<img alt="" fetchpriority="high">…</picture></div>
   Per-page framing = the --hero-pos custom property on .hero-img-<page> (object-position; one value per breakpoint).
   Readability is LOCAL, not a global tint: a soft navy gradient on the left only (transparent from ~60% across),
   a text-shadow on every text element, and small elements (chips, outline button, crumbs) carry their own navy pill.
   Contrast was measured on the rendered pixels behind every hero text element (see BUILD_NOTES.md).
   ════════════════════════════════════════════════════════════════════════ */
.hero-has-img{background:var(--navy);--hero-shade:14,42,64}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--hero-pos,50% 50%)}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--hero-shade),.5) 0%,rgba(var(--hero-shade),.38) 30%,rgba(var(--hero-shade),.14) 48%,rgba(var(--hero-shade),0) 60%)}
.hero-has-img .hero-in{z-index:1}
/* Local scrim: a feathered navy panel directly behind the text block only (not a global tint) */
.hero-has-img .hero-text{position:relative;isolation:isolate}
.hero-has-img .hero-text::before{content:"";position:absolute;z-index:-1;inset:-64px -72px -64px -72px;pointer-events:none;
  background:rgba(var(--hero-shade),.5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 120px),transparent),linear-gradient(180deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 120px),transparent),linear-gradient(180deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);
  mask-composite:intersect}
/* Every text element carries its own shadow: a tight edge, the 12px halo, and a wide soft glow */
.hero-has-img h1,.hero-has-img .tagline,.hero-has-img .kicker,.hero-has-img .hero-sub,.hero-has-img .hero-micro,.hero-has-img .crumbs{
  text-shadow:0 1px 2px rgba(var(--hero-shade),.9),0 2px 12px rgba(var(--hero-shade),.7),0 0 28px rgba(var(--hero-shade),.45)}
.hero-has-img .btn{text-shadow:none}
/* Body-size text (tagline, subhead, micro) needs 4.5:1, so its halo is denser right at the letter edges */
.hero-has-img .tagline,.hero-has-img .kicker,.hero-has-img .hero-sub,.hero-has-img .hero-micro{
  text-shadow:0 0 2px rgba(var(--hero-shade),.95),0 0 5px rgba(var(--hero-shade),.85),0 2px 12px rgba(var(--hero-shade),.7),0 0 28px rgba(var(--hero-shade),.45)}
/* Small elements carry their own contrast */
.hero-has-img .chips li{background:rgba(var(--hero-shade),.8)}
.hero-has-img .btn-outline{background:rgba(var(--hero-shade),.62);border-color:rgba(255,255,255,.85)}
.hero-has-img .btn-outline:hover{background:rgba(var(--hero-shade),.8);border-color:#fff}
.hero-has-img .crumbs ol{display:inline-flex;padding:4px 12px;border-radius:999px;background:rgba(var(--hero-shade),.62)}
/* Tagline: --gold-hi (same palette) rather than brand gold, which is too dark for small text over a photo */
.hero-has-img .tagline,.hero-has-img .kicker{color:var(--gold-hi)}
/* The thin italic gold tagline is the hardest element to keep at 4.5:1 over a bright sky, so it carries its own
   navy pill (one per line when it wraps), like the chips. */
.hero-has-img .tagline span,.hero-has-img .kicker span{background:rgba(var(--hero-shade),.72);padding:1px 12px 3px;border-radius:8px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-has-img .tagline,.hero-has-img .kicker{line-height:1.6;margin-left:-12px}
.hero-has-img .hero-photo figcaption{text-shadow:none}

/* Homepage: no photo card (Beth, 2026-09-26). The hero is the house with the text over it. */
.hero-img-home .hero-in{grid-template-columns:minmax(0,1fr)}
.hero-img-home .hero-text{max-width:720px}
.hero-img-home .hero-sub{max-width:620px}

/* Framing per page. Desktop: house + (HB) ocean sunset / (MV) lake at the right edge beside Mark's card.
   768–900 and phones: Mark's card (or the narrow slice) would cover the ocean / lake, so the house wins. */
.hero-img-home{--hero-pos:58% 40%}
.hero-img-hb{--hero-pos:75% 50%}
.hero-img-mv{--hero-pos:45% 42%}
.hero-img-an{--hero-pos:35% 55%}

@media (max-width:900px){
  .hero-img-home{--hero-pos:62% 50%}
  .hero-img-home .hero-text{max-width:560px}
  .hero-img-hb{--hero-pos:32% 50%}
  .hero-img-mv{--hero-pos:42% 50%}
  .hero-img-an{--hero-pos:30% 50%}
  .hero-media::after{background:linear-gradient(90deg,rgba(var(--hero-shade),.62) 0%,rgba(var(--hero-shade),.5) 36%,rgba(var(--hero-shade),.24) 56%,rgba(var(--hero-shade),0) 72%)}
  /* Tablet: the text column sits over the house itself, so the text-block scrim is a touch heavier */
  .hero-has-img .hero-text::before{background:rgba(var(--hero-shade),.56)}
}
/* Phones: the hero stacks (text, then Mark's card on the city pages), so the text spans the full width.
   The image covers the top of the hero and fades into navy at the bottom; the shade is light and even. */
@media (max-width:767px){
  .hero-media{bottom:auto;height:min(100%,240vw)}
  .hero-media::after{background:linear-gradient(180deg,rgba(var(--hero-shade),.4) 0%,rgba(var(--hero-shade),.4) 50%,rgba(var(--hero-shade),.74) 82%,var(--navy) 100%)}
  .hero-has-img .hero-text::before{background:rgba(var(--hero-shade),.48);inset:-40px calc(-1 * var(--gutter)) -40px}
  /* MV is a bright white-stucco daylight scene: its phone scrim is heavier to hold 4.5:1 on the subhead */
  .hero-img-mv .hero-text::before{background:rgba(var(--hero-shade),.66)}
  .hero-img-home{--hero-pos:61% 50%}
  .hero-img-home .hero-text{max-width:none}
  .hero-img-hb{--hero-pos:33% 50%}
  .hero-img-mv{--hero-pos:40% 50%}
  .hero-img-an{--hero-pos:30% 50%}
}

/* ── About: "Who is Mark Kinder?" story + photo card (2026-09-26) ───────
   Story left, Mark's photo card right (the same .hero-photo card style). Phones: heading, photo, story. */
.who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);grid-template-areas:"head photo" "body photo";column-gap:64px;align-items:center;max-width:1040px;margin:0 auto}
.who-head{grid-area:head;align-self:end;margin-bottom:.5em}
.who-body{grid-area:body;align-self:start}
.who-body p{font-size:19px}
.who-photo{grid-area:photo;justify-self:end}
.who-photo img{border-color:var(--navy)}
@media (max-width:900px){
  .who{grid-template-columns:minmax(0,1fr) minmax(0,260px);column-gap:36px}
}
@media (max-width:767px){
  .who{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "photo" "body";row-gap:28px}
  .who-head{margin-bottom:0}
  .who-photo{justify-self:center;margin-bottom:12px}
  .who-body p{font-size:17.5px}
}

/* ── Lead forms (wired 2026-09-26): honeypot, error state ────────────── */
.hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.req-form{position:relative}
.form-status.form-err{background:#FDF1F0;border-left-color:#B42318}
.form-ok{margin-top:8px}
.req-form button[aria-busy=true]{cursor:progress;opacity:.8}

/* ════════════════════════════════════════════════════════════════════════
   MARK'S PHOTOS (2026-09-26, Beth): Mark's own on-the-job photos.
   About hero = Mark on a roof. He stands ~20% across the photo, so a full-bleed cover would put him behind
   the text: the image layer is anchored to the RIGHT half of the hero instead (text on the navy left, Mark on
   the right, a feathered join), and on phones it becomes a band at the bottom of the hero, under the buttons.
   The text keeps the same local treatment as the other image heroes (.hero-has-img: scrim, shadows, pills).
   ════════════════════════════════════════════════════════════════════════ */
.hero-img-about{--hero-pos:0% 50%;background:
    radial-gradient(1000px 520px at 85% 20%,rgba(46,134,193,.28),transparent 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 22px),
    linear-gradient(160deg,var(--navy-2) 0%,var(--navy) 55%,var(--navy-deep) 100%)}
.hero-img-about .hero-media{left:50%}
/* the mask sits on the whole layer (not just <picture>) so the ::after shade feathers in with the photo: no seam */
.hero-img-about .hero-media{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 160px);mask-image:linear-gradient(90deg,transparent 0,#000 160px)}
.hero-img-about .hero-media::after{background:linear-gradient(90deg,rgba(var(--hero-shade),.35) 0,rgba(var(--hero-shade),0) 240px)}
.hero-img-about .hero-text{max-width:min(600px,46vw)}
@media (max-width:900px){
  .hero-img-about .hero-media{left:50%}
  .hero-img-about .hero-media::after{background:linear-gradient(90deg,rgba(var(--hero-shade),.35) 0,rgba(var(--hero-shade),0) 200px)}
  .hero-img-about .hero-text{max-width:52vw}
}
@media (max-width:767px){
  .hero-img-about{--hero-pos:0% 60%}
  .hero-img-about .hero-media{left:0;top:auto;bottom:0;height:min(96vw,480px)}
  .hero-img-about .hero-media{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
  .hero-img-about .hero-media::after{background:none}
  .hero-img-about .hero-text{max-width:none}
  .hero-img-about .hero-in{padding-bottom:calc(min(96vw,480px) - 24px)}
}

/* ── Photo cards + media splits (About background, Services #general / #pre-listing) ── */
.photo-card{margin:0;min-width:0}
.photo-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line);box-shadow:0 14px 34px rgba(14,42,64,.14)}
.media-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:center}
.media-split-rev{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.svc-media{margin-top:4px}
.svc-media .glance{margin-bottom:0}
.svc-media p:last-child{margin-bottom:0}
.angles-media{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);max-width:1040px;margin:0 auto}
.angles-stack{grid-template-columns:minmax(0,1fr);gap:16px}
.angles-stack .angle{display:flex;align-items:center;gap:18px;padding:20px 22px}
.angles-stack .card-ico{margin:0;flex:none}
@media (max-width:900px){
  .media-split{gap:32px}
  .angles-stack .angle{padding:16px 18px;gap:14px}
}
@media (max-width:767px){
  .media-split,.media-split-rev,.angles-media{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* ── 404 page (added 2026-09-29). New classes only. ──────────────────── */
.hero-404 .eyebrow{color:var(--gold)}
.hero-404 .hero-ctas{margin-top:8px}
.sec-404 .sec-head{margin-bottom:20px}
.sec-404 .sec-cta{margin-top:0}