/* ===== ADR v2 — homepage only =====
   Extracted from the inlined <style> of the ADR v2 comp, 2026-07-29.
   Pure refactor: no declaration was added, removed or re-valued.
   Loaded AFTER site.css so equal-specificity overrides (.hero h1) win by source order. */

/* .serve-cell base styling, moved here from site.css: the markup exists only on index.html.
   The base stylesheet's @media(960)/(520) .serve-grid rules are deliberately NOT carried over --
   the homepage replaced them with the single @media(860) rule below, and re-adding them would
   put a 2-up grid back in play between 861 and 960px. */
.serve-cell{padding:34px 28px;border-right:1px solid var(--rule);}
.serve-cell:last-child{border-right:none;}
.serve-cell h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center;gap:10px;}
.serve-cell h3::before{content:"";width:8px;height:8px;background:var(--navy);flex:none;}
.serve-cell p{font-size:.88rem;margin-top:10px;}

/* Was margin:18px 0 6px, which left the H1 colliding with the display line below it
   (18px above vs 6px below). Still grouped with the display, just no longer touching. */
.hero h1{color:rgba(255,255,255,.85);font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;margin:22px 0 14px;}

/* ---------- Hero: centred variant with video background ---------- */
/* The still holds first, then the video cross-fades in (JS adds .is-live after the hold).
   Starting at opacity 0 is what stops the "still for a split second" flash. */
.hero-vwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.2s ease;}
.hero-vwrap.is-live{opacity:1;}
.hero-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.hero-vwrap{display:none;}}
/* Video hero scrim, lightened 2026-07-29 so the footage reads (was ~66% navy at centre,
   now ~38%). Text legibility is carried by the tightened radial + the display text-shadow. */
.hero--video .hero-bg::after{background:radial-gradient(ellipse 74% 64% at 50% 46%,rgba(24,38,67,.12) 0%,rgba(24,38,67,.55) 100%),linear-gradient(180deg,rgba(24,38,67,.58) 0%,rgba(24,38,67,.30) 42%,rgba(24,38,67,.38) 72%,rgba(24,38,67,.72) 100%);}
.hero--video .container{grid-template-columns:1fr;max-width:940px;text-align:center;justify-items:center;padding-top:clamp(88px,11vh,132px);padding-bottom:clamp(96px,12vh,140px);}
.hero--video .hero-story{display:flex;flex-direction:column;align-items:center;width:100%;}
.hero--video .hero-eyebrow{justify-content:center;}
.hero--video .hero-eyebrow::after{content:"";width:26px;height:2px;background:currentColor;opacity:.85;}
/* Shadows carry legibility now that the scrim is lighter. Two-stop: a tight one for edge
   definition against busy footage, a wide one to seat the text on the video. */
.hero--video .hero-display{text-shadow:0 1px 3px rgba(6,12,26,.55),0 2px 34px rgba(6,12,26,.62);}
.hero--video h1,
.hero--video .hero-eyebrow{text-shadow:0 1px 2px rgba(6,12,26,.5),0 2px 20px rgba(6,12,26,.55);}
.hero--video .hero-sub,
.hero--video .hero-checks,
.hero--video .hero-proof{text-shadow:0 1px 2px rgba(6,12,26,.5),0 1px 16px rgba(6,12,26,.5);}
.hero--video .hero-sub{margin-left:auto;margin-right:auto;max-width:620px;}
.hero--video .hero-checks{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:13px 38px;margin-top:32px;text-align:left;}
.hero--video .hero-ctas{justify-content:center;}
.hero--video .hero-proof{justify-content:center;}
@media(max-width:700px){.hero--video .hero-checks{grid-template-columns:auto;gap:11px;}}
.qband-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:60px;align-items:center;}
.qband-copy h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;text-transform:uppercase;letter-spacing:.015em;margin-top:14px;}
.qband-copy p{margin-top:16px;font-size:1.02rem;max-width:520px;}
.qband-points{margin-top:26px;display:grid;gap:12px;}
.qband-points li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--ink);font-size:.98rem;}
.qband-points .chk{flex:none;width:20px;height:20px;background:var(--navy);display:grid;place-items:center;margin-top:2px;}
.qband-points .chk svg{width:11px;height:11px;fill:#fff;}
.qband-call{margin-top:30px;padding-top:22px;border-top:1px solid var(--rule);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.qband-call span{font-size:.92rem;color:var(--ink-body);}
.qband-call a{font-family:var(--f-display);font-weight:800;font-size:1.35rem;color:var(--navy);letter-spacing:.01em;}
.quote-band .quote-card{justify-self:end;}
@media(max-width:960px){.qband-grid{grid-template-columns:1fr;gap:40px;}.quote-band .quote-card{justify-self:center;max-width:520px;}.qband-copy p{max-width:none;}}
/* ---------- Photo break ---------- */
/* The back half of the page is process steps, why-tiles, testimonials and FAQ, all text.
   The portfolio grid was the only heavy visual break; this is the second one. */
/* Split rather than full-bleed on purpose: the only authentic crew photo in the library is
   1:1, and a square source in a 3:1 band crops the subject's head off. A two-up band gives
   the image a near-square cell, so it reads as intended and still breaks up the text. */
.photo-break{background:var(--navy);display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;}
.pb-media{position:relative;min-height:clamp(300px,30vw,420px);overflow:hidden;}
.pb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.pb-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(38px,5vw,64px) clamp(28px,4vw,58px);}
.pb-eyebrow{font-family:var(--f-display);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gray);}
.pb-line{margin-top:14px;font-family:var(--f-display);font-weight:800;color:#fff;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.12;text-transform:uppercase;letter-spacing:.01em;}
.pb-sub{margin-top:16px;font-size:1rem;color:rgba(255,255,255,.82);max-width:420px;}
@media(max-width:860px){.photo-break{grid-template-columns:1fr;}.pb-media{min-height:280px;}}

/* 3-up, not 4-up: the fourth tile was "Homeowners", which is circular as one of four
   homeowner categories. Goes to a single column at 860px rather than 2-up, so three cells
   can never orphan the last one on its own half-width row. */
.serve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule);}
@media(max-width:860px){.serve-grid{grid-template-columns:1fr;}.serve-cell{border-right:none;border-bottom:1px solid var(--rule);}.serve-cell:last-child{border-bottom:none;}}