/* ============================================================
   RR Roofing & Restoration — site design system
   Brand: navy #000f25 · blue #1d4fbe · Oswald display / Inter body
   ============================================================ */
:root{
  --navy:#000f25;
  --navy-2:#0a1c38;
  --navy-3:#12264a;
  --blue:#1d4fbe;
  --blue-2:#3d69d1;
  --blue-wash:#eef2fb;
  --paper:#f6f7f9;
  --white:#ffffff;
  --ink:#101720;
  --mute:#49545f;
  --line:#e2e6ec;
  --line-dark:rgba(255,255,255,.14);
  --radius:10px;
  --shadow:0 18px 44px -22px rgba(0,15,37,.28);
  --ff-d:'Oswald','Arial Narrow',sans-serif;
  --ff-b:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--ff-b);color:var(--ink);background:var(--white);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:.6rem 1rem;z-index:200}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,28px)}
.section{padding:clamp(58px,8vw,104px) 0}
.section.tight{padding:clamp(40px,5vw,64px) 0}
.section--paper{background:var(--paper)}
.section--navy{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 70%,var(--navy-3) 130%);color:#fff}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy .h-ink{color:#fff}
.section--navy p{color:#b9c3d4}
.section + .section{border-top:1px solid var(--line)}
.section--navy + .section--navy,
.section--paper + .section{border-top-color:transparent}

h1,h2,h3,h4{font-family:var(--ff-d);text-transform:uppercase;color:var(--navy);margin:0 0 .55em;line-height:1.12;letter-spacing:.015em;font-weight:600}
h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:700}
h2{font-size:clamp(1.55rem,3vw,2.35rem)}
h3{font-size:1.08rem;letter-spacing:.05em}
p{margin:0 0 1em;color:var(--mute)}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--mute)}
.h-ink{color:var(--navy)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--ff-b);font-weight:700;font-size:.95rem;letter-spacing:.02em;padding:.85rem 1.5rem;border-radius:6px;border:2px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-align:center}
.btn:hover{background:var(--blue-2);border-color:var(--blue-2);text-decoration:none;color:#fff}
.btn--outline{background:transparent;color:var(--blue)}
.btn--outline:hover{background:var(--blue);color:#fff}
.btn--light{background:#fff;border-color:#fff;color:var(--navy)}
.btn--light:hover{background:var(--blue-wash);border-color:#fff;color:var(--navy)}
.btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn--big{padding:1.05rem 2rem;font-size:1.02rem}

/* ---------- header ---------- */
.topbar{background:var(--navy-2);color:#c6cfdd;font-size:.82rem}
.topbar .wrap{display:flex;gap:1.4rem;align-items:center;justify-content:flex-end;min-height:34px}
.topbar a{color:#fff;font-weight:600}
.topbar .dot::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue-2);margin-right:.45em;vertical-align:1px}
.site-header{position:sticky;top:0;z-index:100;background:var(--navy);box-shadow:0 6px 24px -12px rgba(0,15,37,.5)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:1rem}
/* flex:none so the logo never absorbs header overflow and squashes (global img max-width:100% would distort it against the fixed height) */
.brand{flex:none}
.brand img{height:46px;width:auto;max-width:none}
.nav{display:flex;align-items:center;gap:.25rem}
.nav > li{list-style:none;position:relative}
.nav a.top{display:block;color:#dbe3ef;font-weight:600;font-size:.92rem;padding:.65rem .78rem;border-radius:6px}
.nav a.top:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.nav li.active > a.top{color:#fff}
.nav li.active > a.top::after{content:"";display:block;height:2px;background:var(--blue-2);border-radius:2px;margin-top:2px}
.nav ul.drop{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:.45rem;display:none;flex-direction:column}
/* flush against the bar on purpose: any pixel gap here is a hover dead zone that slams the menu shut */
.nav li:hover > ul.drop,.nav li:focus-within > ul.drop,.nav li.open > ul.drop{display:flex}
/* Escape sets .closed so the panel hides even though the trigger still holds
   focus (focus-within would otherwise keep it open and Escape would do nothing) */
.nav li.closed > ul.drop{display:none}
.nav ul.drop a{display:block;color:var(--ink);font-size:.9rem;font-weight:500;padding:.55rem .75rem;border-radius:5px}
.nav ul.drop a:hover{background:var(--blue-wash);text-decoration:none;color:var(--navy)}
.nav .caret{font-size:.62rem;margin-left:.3em;opacity:.7}
.header-cta{display:flex;align-items:center;gap:.7rem}
.header-phone{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#fff;font-size:1rem}
.header-phone svg{width:17px;height:17px;fill:var(--blue-2)}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.3);border-radius:6px;color:#fff;font-size:1.35rem;line-height:1;padding:.42rem .68rem;cursor:pointer;min-width:44px;min-height:44px}

@media (max-width:1020px){
  .menu-btn{display:block}
  /* icon-only phone: keep a 44px tap target, not the bare 17px glyph */
  .header-phone{min-width:44px;min-height:44px;justify-content:center}
  .header-phone span.num{display:none}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--navy-2);flex-direction:column;align-items:stretch;padding:.6rem clamp(18px,4vw,28px) 1.2rem;gap:0;display:none;box-shadow:0 24px 40px -20px rgba(0,0,0,.5);max-height:calc(100vh - 74px);overflow:auto}
  .nav.open{display:flex}
  .nav > li + li{border-top:1px solid rgba(255,255,255,.07)}
  .nav a.top{padding:.85rem .2rem;font-size:1rem}
  .nav li.active > a.top::after{display:none}
  /* submenus sit inline in the mobile menu, so the desktop Escape-to-close
     state must not hide them here */
  .nav ul.drop,.nav li.closed > ul.drop{position:static;display:flex;box-shadow:none;border:none;background:rgba(0,0,0,.18);min-width:0;border-radius:6px;margin:.2rem 0 .6rem}
  .nav ul.drop a{color:#dbe3ef}
  .nav ul.drop a:hover{color:#fff;background:rgba(255,255,255,.08)}
  .topbar{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,11,32,.94) 0%,rgba(0,15,37,.82) 45%,rgba(0,15,37,.55) 100%)}
.hero-inner{position:relative;z-index:2;padding:clamp(72px,11vw,150px) 0 clamp(66px,9vw,120px);max-width:760px}
.hero h1{color:#fff;margin-bottom:.4em}
.hero p.sub{color:#c3cddd;font-size:clamp(1.03rem,1.7vw,1.22rem);max-width:56ch}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.hero-kicker{display:inline-flex;align-items:center;gap:.55rem;background:rgba(29,79,190,.22);border:1px solid rgba(122,158,230,.4);color:#cdd9f5;font-weight:600;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;padding:.42rem .9rem;border-radius:99px;margin-bottom:1.3rem}
.hero-strip{position:relative;z-index:2;border-top:1px solid var(--line-dark);background:rgba(0,10,26,.55);backdrop-filter:blur(4px)}
.hero-strip .wrap{display:flex;flex-wrap:wrap;gap:.4rem 2.4rem;padding-top:.95rem;padding-bottom:.95rem;font-size:.86rem;color:#c3cddd}
.hero-strip b{color:#fff;font-weight:600}
.hero-strip .item{display:flex;align-items:center;gap:.55rem}
.hero-strip svg{width:16px;height:16px;fill:none;stroke:var(--blue-2);stroke-width:2.4;flex:none}

/* interior page hero */
.pagehero{background:linear-gradient(155deg,var(--navy),var(--navy-3));color:#fff;padding:clamp(48px,7vw,84px) 0}
.pagehero h1{color:#fff;margin-bottom:.3em;max-width:22ch}
.pagehero p{color:#bcc7d8;max-width:64ch;margin:0}
.crumbs{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08);font-size:.8rem;color:#a3b1c9;padding:.6rem 0}
.crumbs a{display:inline-block;padding-block:.3rem;color:#aebdd8;text-decoration:underline;text-decoration-color:rgba(255,255,255,.38);text-underline-offset:3px}
.crumbs .sep{margin:0 .5em;opacity:.5}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.4rem;transition:border-color .15s,transform .15s,box-shadow .15s;display:flex;flex-direction:column;gap:.4rem}
a.card{color:inherit}
a.card:hover{text-decoration:none;border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.card h3{margin:0 0 .25em}
.card p{margin:0;font-size:.93rem}
.card .more{margin-top:auto;padding-top:.9rem;color:var(--blue);font-weight:600;font-size:.88rem}
.card .ico{width:44px;height:44px;border-radius:9px;background:var(--blue-wash);display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}
.card .ico svg{width:23px;height:23px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* service card with top rule */
.svc{border-top:3px solid var(--navy);border-radius:0 0 var(--radius) var(--radius)}

/* ---------- split / feature rows ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.split.rev{direction:rtl}
.split.rev > *{direction:ltr}
.split .panel{background:linear-gradient(150deg,var(--navy),var(--navy-3));border-radius:14px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#8fa3c4}
.split .panel .ph-label{font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;border:1px dashed rgba(255,255,255,.3);padding:.7rem 1.2rem;border-radius:8px;text-align:center;line-height:1.7}
.panel--media{aspect-ratio:auto}
.panel--media video,.panel--media img{width:100%;height:100%;object-fit:cover}
.checks{list-style:none;margin:1.1rem 0 1.4rem;padding:0;display:grid;gap:.55rem}
.checks li{display:flex;gap:.65rem;align-items:flex-start;font-size:.97rem;color:var(--mute)}
.checks li b{color:var(--ink);font-weight:600}
.checks svg{width:19px;height:19px;flex:none;margin-top:.18rem;stroke:var(--blue);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.section--navy .checks li{color:#c3cddd}
.section--navy .checks li b{color:#fff}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:12px;overflow:hidden}
.stats .stat{background:rgba(0,10,28,.72);padding:1.5rem 1.2rem;text-align:center}
.stat b{display:block;font-family:var(--ff-d);font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:700;color:#fff;line-height:1.05}
.stat span{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#93a5c4}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* trust badges strip */
.badges{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line-dark);color:#dbe4f2;font-size:.83rem;font-weight:600;padding:.5rem 1rem;border-radius:99px}
.badge svg{width:15px;height:15px;stroke:var(--blue-2);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.badges.on-light .badge{border-color:var(--line);color:var(--navy)}
.badges.on-light .badge svg{stroke:var(--blue)}
/* badges default to dark-bg styling; on any light (non-navy) section, follow the light treatment automatically */
.section:not(.section--navy) .badge{border-color:var(--line);color:var(--navy)}
.section:not(.section--navy) .badge svg{stroke:var(--blue)}
/* in a two-column text block the badges align to the copy, not centered */
.split .badges{justify-content:flex-start}
/* portrait / narrow: stack to one column so text and image each get full width
   instead of being crushed side by side. rev sections fall back to DOM order
   (image on top, copy below). */
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:clamp(26px,6vw,40px)}
  .split.rev{direction:ltr}
}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:1.4rem}
.steps.four{grid-template-columns:repeat(4,1fr)}
.steps.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.steps.four,.steps.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.steps.four,.steps.three{grid-template-columns:1fr}}
.step{counter-increment:step;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;position:relative}
.step::before{content:"0" counter(step);font-family:var(--ff-d);font-weight:700;font-size:1.9rem;color:var(--blue);opacity:.28;position:absolute;top:.7rem;right:1rem;line-height:1}
.step h3{font-size:1rem}
.step p{font-size:.92rem;margin:0}

/* ---------- swatches ---------- */
.swatch-row{display:flex;flex-wrap:wrap;gap:.7rem}
.swatch{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:99px;padding:.32rem .85rem .32rem .38rem;background:#fff;font-size:.85rem;font-weight:600;color:var(--ink);white-space:nowrap}
.swatch i{width:30px;height:30px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 -4px 8px rgba(0,0,0,.18)}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:1rem}
.chip{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.55rem;text-align:left;transition:transform .15s,box-shadow .15s,border-color .15s}
.chip:hover{transform:translateY(-2px);border-color:#c3cedd;box-shadow:var(--shadow)}
.chip-art{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:7px;display:block;margin-bottom:.6rem;box-shadow:inset 0 0 0 1px rgba(0,15,37,.25);background:#e8ecf2}
.chip figcaption{display:flex;align-items:center;gap:.5rem;padding:0 .25rem;min-width:0}
.chip-dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,15,37,.3),inset 0 -2px 4px rgba(0,0,0,.22)}
.chip .meta{min-width:0}
.chip span{display:block;font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.3}
.chip b{display:block;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.7rem;font-weight:600;color:var(--mute);letter-spacing:.03em;margin-top:.1rem}
.chip em{display:block;font-style:normal;font-size:.7rem;color:var(--mute);margin-top:.15rem;line-height:1.35}

/* colour table */
.ctable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.ctable{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.ctable th{font-family:var(--ff-b);text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;font-weight:700;color:var(--mute);text-align:left;padding:.8rem 1rem;border-bottom:2px solid var(--line);background:var(--paper)}
.ctable td{padding:.7rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink)}
.ctable tr:last-child td{border-bottom:none}
.dot-swatch{display:inline-flex;align-items:center;gap:.6rem;font-weight:600}
.dot-swatch i{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),inset 0 -3px 6px rgba(0,0,0,.18)}
.tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;background:var(--blue-wash);color:var(--blue);border-radius:99px;padding:.18rem .6rem}

/* ---------- vendor cards ---------- */
.vendor-logo-tile{font-family:var(--ff-d);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;color:var(--navy)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem;max-width:860px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.2rem;font-weight:600;color:var(--navy);position:relative;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--blue);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:1rem 1.2rem;font-size:.94rem;color:var(--mute)}
.faq .a p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.ctaband{background:linear-gradient(140deg,#001030,#123063);color:#fff;border-radius:16px;padding:clamp(30px,4.5vw,54px);display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(61,105,209,.35),transparent 70%)}
.ctaband h2{color:#fff;margin-bottom:.25em;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.ctaband p{color:#bcc7d8;margin:0;max-width:52ch}
.ctaband .actions{display:flex;gap:.8rem;flex-wrap:wrap;position:relative}

/* quote form */
.qform{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow)}
.qform .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:600px){.qform .row{grid-template-columns:1fr}}
.qform label{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);margin:0 0 .35rem}
.qform input,.qform select,.qform textarea{width:100%;padding:.72rem .85rem;border:1.5px solid var(--line);border-radius:7px;font-family:var(--ff-b);font-size:.95rem;color:var(--ink);background:#fff;margin-bottom:1rem}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,79,190,.14)}
.qform textarea{resize:vertical;min-height:96px}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- projects / map ---------- */
.map-shell{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--paper);min-height:420px}
#rrmap{width:100%;height:480px}
.map-fallback{padding:clamp(24px,4vw,48px)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.filters button{font-family:var(--ff-b);font-size:.83rem;font-weight:600;border:1.5px solid var(--line);background:#fff;color:var(--mute);border-radius:99px;padding:.45rem 1.05rem;cursor:pointer;transition:all .13s}
.filters button:hover{border-color:var(--blue);color:var(--blue)}
.filters button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.job-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.job-card .ph{height:170px;position:relative;display:flex;align-items:flex-end;padding:.9rem;overflow:hidden}
.job-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.job-card .ph .mat{position:relative;z-index:1;background:rgba(0,10,28,.78);color:#dfe7f5;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.32rem .7rem;border-radius:5px;backdrop-filter:blur(3px)}
.job-card .ph .soon{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;font-weight:600}
.job-card .body{padding:1.05rem 1.15rem 1.2rem}
.job-card h3{font-size:.98rem;margin:0 0 .3rem}
.job-card .meta{font-size:.85rem;color:var(--mute);margin:0}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;font-size:.83rem;color:var(--mute);margin-top:1rem}
.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:.4rem;vertical-align:-1px}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#a7b3c7;font-size:.9rem;margin-top:0}
.footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,48px);padding:clamp(44px,6vw,72px) 0 44px}
.site-footer h3{font-size:.82rem;letter-spacing:.14em;color:#fff;margin-bottom:1.1rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.site-footer a:not(.btn){color:#a7b3c7}
.site-footer a:hover{color:#fff}
.footer-brand img{height:44px;margin-bottom:1rem}
.footer-brand p{font-size:.87rem;color:#9aa7bd}
.footer-contact li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.55rem}
.footer-contact svg{width:16px;height:16px;stroke:var(--blue-2);fill:none;stroke-width:2;flex:none;margin-top:.25rem;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.3rem 0;font-size:.8rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#94a3ba}
@media (max-width:900px){.footer-main{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-main{grid-template-columns:1fr}}

/* mobile sticky call bar */
.callbar{position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;gap:1px;background:var(--line);box-shadow:0 -8px 24px rgba(0,15,37,.25)}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem;font-weight:700;font-size:.95rem;text-decoration:none}
.callbar .call{background:var(--blue);color:#fff}
.callbar .quote{background:var(--navy);color:#fff}
.callbar svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:720px){
  .callbar{display:flex}
  body{padding-bottom:54px}
  /* the sticky callbar already carries Free Inspection here; drop the header
     duplicate so the logo keeps its full width on narrow screens */
  .header-cta .btn{display:none}
}

/* misc */
.note{font-size:.85rem;color:var(--mute)}
.two-col-text{columns:2;column-gap:3rem}
@media (max-width:800px){.two-col-text{columns:1}}
ul.plain{list-style:none;padding:0;margin:0 0 1em}
ul.plain li{padding-left:1.5rem;position:relative;margin-bottom:.5rem;color:var(--mute)}
ul.plain li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;background:var(--blue);border-radius:2px}
.divider{height:1px;background:var(--line);border:0;margin:0}
.center{text-align:center}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2.5px solid var(--blue-2);outline-offset:2px;border-radius:4px}
.site-header :focus-visible,.topbar :focus-visible,.hero :focus-visible,.pagehero :focus-visible,.section--navy :focus-visible,.ctaband :focus-visible,.callbar :focus-visible,.site-footer :focus-visible,.split .panel :focus-visible{outline-color:rgba(255,255,255,.92)}
.faq details{transition:border-color .15s}
.faq details:hover{border-color:#c6cfdd}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.pill-nav{display:flex;flex-wrap:wrap;gap:.7rem}
.section[id]{scroll-margin-top:96px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.9rem}
.photo-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}

/* ---------- home page horizontal photo strip (teaser above reviews) ---------- */
.home-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,33%);gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:1rem;scrollbar-width:thin}
.home-gallery .hg-item{margin:0;scroll-snap-align:start;border-radius:12px;overflow:hidden;background:var(--navy);border:1px solid var(--line)}
.home-gallery .hg-item img{width:100%;aspect-ratio:16/10;object-fit:cover;cursor:zoom-in;transition:transform .3s ease}
.home-gallery .hg-item:hover img{transform:scale(1.04)}

/* ---------- lightbox (Recent Work photo viewer) ---------- */
.lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(6,12,24,.93);padding:4vh 2vw}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:8px;box-shadow:0 12px 60px rgba(0,0,0,.55)}
.lightbox button{position:absolute;background:rgba(255,255,255,.13);border:none;color:#fff;cursor:pointer;border-radius:50%;width:52px;height:52px;font-size:1.9rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lightbox button:hover{background:rgba(255,255,255,.26)}
.lb-close{top:3vh;right:3vw;width:44px;height:44px;font-size:1.6rem}
.lb-prev{left:2vw;top:50%;transform:translateY(-50%)}
.lb-next{right:2vw;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);color:#cdd6e6;font-size:.85rem;font-family:var(--ff-b);letter-spacing:.04em}
@media (max-width:600px){.lightbox button{width:44px;height:44px;font-size:1.5rem}.lb-prev{left:1vw}.lb-next{right:1vw}}

/* ---------- Google reviews (placeholder until live) ---------- */
.grev-badge{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--line);border-radius:99px;padding:.5rem 1.05rem;box-shadow:var(--shadow);margin-bottom:1.3rem;font-family:var(--ff-b);font-size:.9rem}
.grev-badge .stars{color:#f4b400;letter-spacing:1px}
.grev-badge b{color:var(--navy)}
.review-grid{display:grid;gap:1.1rem}
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.85rem;text-align:left}
.rc-stars{color:#f4b400;font-size:1.1rem;letter-spacing:1px}
.rc-placeholder{color:var(--mute);font-style:italic;margin:0;font-size:.92rem;line-height:1.5}
/* real (fetched) review text + author */
.rc-text{color:var(--ink);margin:0;font-size:.94rem;line-height:1.58}
.rc-name{font-size:.85rem;font-weight:600;color:var(--ink);line-height:1.3}
.rc-when{display:inline-block;font-weight:400;color:var(--mute);font-size:.78rem;margin-top:.1rem}
.rc-avatar--i{display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-family:var(--ff-d);font-weight:700;font-size:.95rem}
.rc-foot{display:flex;align-items:center;gap:.6rem;margin-top:auto}
.rc-avatar{width:34px;height:34px;border-radius:50%;background:#e3e8ef;flex:none}
.rc-name-skel{height:.7rem;width:96px;border-radius:4px;background:#e3e8ef}
.grev-note{font-size:.8rem;color:var(--mute);text-align:center;margin-top:1.2rem;font-style:italic}
/* desktop: 3 across with spacing, horizontal scroll to the rest (mobile stays stacked) */
@media (min-width:821px){
  .review-grid{grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 1.4rem) / 3);gap:1.4rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:1rem;scrollbar-width:thin}
  .review-card{scroll-snap-align:start}
}