/* Platinum — SRT-style layout with Platinum branding.
   Two page templates, selected by a class on <body>:
     .t-light  = Residential  — white / silver / blue, light hero, dark text
     .t-dark   = Commercial   — black / silver / blue, dark hero + sections
   The header (utility bar + brandbar + nav), the red 24/7 accents, the
   question band and the footer are shared and identical in both templates. */

:root{
  /* ---- OFFICIAL BRAND PALETTE (platinum_brand_guidelines.pdf) ---- */
  --deep-navy:#0C1320;    /* Deep Navy     */
  --steel:#3A4560;        /* Steel         */
  --blue:#1A7FE0;         /* Platinum Blue */
  --white:#FFFFFF;        /* White         */
  --slate:#8A9AB3;        /* Slate         */

  /* tints/shades derived from the five brand colors */
  --navy:#0C1320;
  --navy-2:#131b2b;
  --ink:#3A4560;
  --blue-dk:#1362b4;
  --blue-deep:#0f4d8f;
  --blue-lt:#7fb6ee;
  --silver:#8A9AB3;
  --silver-lt:#e6eaf1;

  /* off-palette — 24/7 emergency accent ONLY (not in the brand guide) */
  --red:#c62128;
  --red-dk:#a5171d;
  --gold:#e0a43b;

  /* ---- TYPOGRAPHY ----
     Oswald — condensed sans. All headlines, numbers, the footer phone number,
              and uppercase labels (24/7 badge, chips, nav pill, buttons).
     Inter   — body type. Subheads, review quotes, chips, contact card,
              footer site/rating, photo notes.
     Both load from Google Fonts, so there are no missing font files. */
  --font-display:'Oswald','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --maxw:1240px;

  /* ---- themeable surface tokens (defaults = light) ---- */
  --surface:#FFFFFF;
  --surface-2:#eef1f6;
  --surface-deep:#0C1320;
  --card:#FFFFFF;
  --line:#dde3ec;
  --text:#3A4560;
  --head:#0C1320;
  --ink-soft:#5d6a80;
  --kicker-c:#0f4d8f;
  --hero-bg:linear-gradient(120deg,#FFFFFF 0%,#eef1f6 46%,#dbe2ec 100%);
  --hero-head:#0C1320;
  --hero-text:#3A4560;
  --hero-crumb:#1362b4;
  --btn-light-bg:#e8f0fa;
  --btn-light-fg:#0f4d8f;
  --shadow:0 14px 40px rgba(12,19,32,.12);
  --shadow-sm:0 6px 20px rgba(12,19,32,.10);
}

/* ===== TEMPLATE 1 — Residential: light & airy (White / Slate / Platinum Blue) ===== */
body.t-light{
  --surface:#FFFFFF;
  --surface-2:#eef1f6;
  --surface-deep:#0C1320;
  --card:#FFFFFF;
  --line:#dde3ec;
  --text:#3A4560;
  --head:#0C1320;
  --ink-soft:#5d6a80;
  --kicker-c:#0f4d8f;
  --hero-bg:linear-gradient(120deg,#FFFFFF 0%,#eef1f6 46%,#dbe2ec 100%);
  --hero-head:#0C1320;
  --hero-text:#3A4560;
  --hero-crumb:#1362b4;
  --btn-light-bg:#e8f0fa;
  --btn-light-fg:#0f4d8f;
  --shadow:0 14px 40px rgba(12,19,32,.10);
  --shadow-sm:0 6px 20px rgba(12,19,32,.08);
}

/* ===== TEMPLATE 2 — Commercial: dark & serious (Deep Navy / Steel / Platinum Blue) ===== */
body.t-dark{
  --surface:#0C1320;
  --surface-2:#131b2b;
  --surface-deep:#070c15;
  --card:#1a2334;
  --line:#2a3446;
  --text:#b6c1d3;
  --head:#FFFFFF;
  --ink-soft:#8A9AB3;
  --kicker-c:#7fb6ee;
  --hero-bg:linear-gradient(118deg,#070c15 0%,#0C1320 52%,#1c2740 100%);
  --hero-head:#FFFFFF;
  --hero-text:#c2cbdb;
  --hero-crumb:#7fb6ee;
  --btn-light-bg:#222d42;
  --btn-light-fg:#dbe4f0;
  --shadow:0 18px 46px rgba(0,0,0,.55);
  --shadow-sm:0 8px 24px rgba(0,0,0,.45);
}

*{margin:0;padding:0;box-sizing:border-box}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
html{scroll-behavior:smooth}
/* NOTE: do not put overflow-x on html/body — it breaks position:sticky.
   The 100vw blue band is clipped by .topbar{overflow:hidden} instead. */
html,body{max-width:100%}
body{font-family:var(--font-body);color:var(--text);line-height:1.65;background:var(--surface)}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 26px}
/* Headlines = Oswald (condensed). Subheads = Inter. */
h1,h2{font-family:var(--font-display);color:var(--head);line-height:1.1;font-weight:500;letter-spacing:.005em}
h3,h4{font-family:var(--font-body);color:var(--head);line-height:1.3;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5vw,3.9rem)}
h2{font-size:clamp(1.9rem,3.9vw,2.95rem)}
h3{font-size:1.22rem}

/* Oswald also carries numbers, the footer phone, and uppercase labels. */
.num,.stats .s b,.crumb,.contact-pill,.btn,.icon-card b,.emergency .lbl,.emergency .num,
.foot-contact a[href^="tel:"]{font-family:var(--font-display)}
p{margin:0 0 1rem}
.kicker{display:inline-block;font-family:var(--font-display);font-size:.85rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--kicker-c);margin-bottom:14px}
.kicker.gold{color:var(--gold)}
.kicker.light{color:#9fc4ee}
.section{padding:96px 0;background:var(--surface)}
.section.soft{background:var(--surface-2)}
.section.deep{background:var(--surface-deep)}
.section.deep h2,.section.deep h3{color:#fff}
.center{text-align:center}
.lead{font-size:1.1rem;color:var(--ink-soft);max-width:820px}
.center .lead{margin-left:auto;margin-right:auto;margin-top:14px}
.muted{color:var(--ink-soft)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;font-weight:500;padding:14px 30px;border-radius:40px;transition:.2s;border:0;cursor:pointer;font-size:.95rem;letter-spacing:.09em;text-transform:uppercase}
.btn:hover{background:var(--blue-dk)}
.btn.red{background:var(--red)}
.btn.red:hover{background:var(--red-dk)}
.btn.light{background:var(--btn-light-bg);color:var(--btn-light-fg)}
.btn.light:hover{background:var(--blue);color:#fff}
.btn.outline{background:transparent;border:2px solid #fff;color:#fff}
.btn.outline:hover{background:#fff;color:var(--ink)}
.btn.ghost{background:#fff;color:var(--blue-deep)}
.btn.ghost:hover{background:var(--silver-lt)}

/* ===== Shared header — logo, red 24/7 label + phone, angled blue utility band
   Mirrors the reference site's header: everything on one row, with the utility
   links sitting in an angled blue band that bleeds off the right edge. ===== */
/* overflow:hidden clips the 100vw blue band below so it bleeds to the viewport
   edge without creating a horizontal scrollbar */
.topbar{background:#fff;position:sticky;top:0;z-index:60;border-bottom:1px solid #e4e8ee;overflow:hidden}
.topbar .container{display:flex;align-items:center;gap:30px;min-height:92px;position:relative}

.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo .lockup{height:56px;width:auto}

.emergency{display:flex;align-items:center;gap:11px;flex:none}
.emergency .lbl{font-family:var(--font-display);font-size:.74rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);text-align:right;line-height:1.3}
.emergency .num{font-family:var(--font-display);font-weight:600;font-size:1.6rem;letter-spacing:.01em;
  color:var(--deep-navy);white-space:nowrap}
.emergency .num a{color:var(--deep-navy)}
.emergency .num a:hover{color:var(--blue)}

/* angled blue band, bleeding to the right edge of the viewport */
.utilwrap{margin-left:auto;align-self:stretch;display:flex;align-items:center;gap:28px;
  padding-left:60px;position:relative;flex:none}
.utilwrap::before{content:"";position:absolute;top:0;bottom:0;left:0;width:100vw;
  background:linear-gradient(100deg,var(--blue-dk),var(--blue-deep));z-index:0}
.utilwrap > *{position:relative;z-index:1}
.utilwrap a{color:#dbe7f6;font-size:.92rem;font-weight:500;white-space:nowrap}
.utilwrap a:hover{color:#fff}
.utilwrap .contact-pill{background:#fff;color:var(--deep-navy);padding:11px 26px;border-radius:30px;
  font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.utilwrap .contact-pill:hover{background:var(--deep-navy);color:#fff}

nav.main{background:#fff;border-bottom:1px solid #e4e8ee}
nav.main .container{display:flex;gap:34px;align-items:center;min-height:52px;flex-wrap:wrap}
nav.main .nav-list{list-style:none;display:flex;gap:34px;align-items:center;flex-wrap:wrap;margin:0;width:100%}
nav.main li{position:relative}
nav.main a{display:block;color:#3c4557;font-weight:500;font-size:.95rem;padding:15px 0;border-bottom:2px solid transparent}
nav.main > .container > .nav-list > li > a:hover,nav.main a.active{color:var(--blue-deep);border-bottom-color:var(--blue)}

/* ---- dropdowns ----
   Matches the reference site's behaviour exactly: hoverIntent delay, then a
   200ms slide-down. There it's jQuery slideDown('fast'); here it's pure CSS,
   so there's no jQuery dependency and it still works on keyboard focus. */
nav.main .menu-item-has-children > a::after{content:"";display:inline-block;width:0;height:0;margin-left:8px;
  vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.55;transition:transform .2s ease}
nav.main .menu-item-has-children:hover > a::after{transform:rotate(-180deg)}

nav.main .sub-menu{
  list-style:none;position:absolute;top:100%;left:-20px;width:320px;
  background:#FDFDFD;box-shadow:0 1px 2px rgba(0,0,0,.10),0 20px 44px rgba(12,19,32,.16);
  border-top:3px solid var(--blue);border-radius:0 0 8px 8px;
  z-index:80;margin:0;
  /* the slide: collapsed to zero height, clipped, then expanded */
  max-height:0;overflow:hidden;opacity:0;visibility:hidden;
  transition:max-height .2s ease,opacity .14s ease,visibility 0s linear .2s;
}
nav.main li:hover > .sub-menu,
nav.main li:focus-within > .sub-menu{
  max-height:760px;opacity:1;visibility:visible;
  /* .12s delay stands in for hoverIntent — stops the menu firing on a pass-through */
  transition:max-height .2s ease .12s,opacity .14s ease .12s,visibility 0s linear .12s;
}
nav.main .sub-menu li{width:100%}
nav.main .sub-menu li a{padding:11px 24px;border:0;font-size:.93rem;color:#3A4560;white-space:normal;line-height:1.45}
nav.main .sub-menu li a:hover{background:#eef1f6;color:var(--blue-deep);padding-left:29px}
nav.main .sub-menu:first-child{padding-top:10px}

/* two-column mega panel — add the CSS class "mega" to the menu item in
   Appearance → Menus (matches the reference site's 640px wide dropdowns) */
nav.main li.mega > .sub-menu{width:640px;display:flex;flex-wrap:wrap;padding:10px 0}
nav.main li.mega > .sub-menu > li{width:50%}
nav.main li:hover > .sub-menu,nav.main li.mega:hover > .sub-menu{padding-top:10px;padding-bottom:10px}

/* third level opens to the side */
nav.main .sub-menu .sub-menu{top:0;left:100%;border-radius:8px}

.nav-toggle{display:none;background:none;border:0;font-size:1.7rem;color:var(--ink);cursor:pointer}

/* ===== Home hero — centered, photographic, cards overlapping the bottom ===== */
.hero{position:relative;color:#fff;overflow:hidden;text-align:center;
  background:linear-gradient(115deg,rgba(12,16,24,.86),rgba(20,28,45,.74)),url('https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1600&q=70') center/cover no-repeat,#0e1218}
.hero .container{padding:54px 26px 126px;position:relative;z-index:2}
.hero .kicker{color:#c3d3e8;margin-bottom:10px}
.hero h1{color:#fff;font-weight:400;max-width:1120px;margin:0 auto;font-size:clamp(1.9rem,3.4vw,3.05rem)}
.hero h1 b{font-weight:600}
.hero .hero-lede{color:#dbe2ef;font-size:1.02rem;max-width:880px;margin:12px auto 0}
.hero .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* ===== ABOVE-THE-FOLD LANDING BLOCK =====
   Everything an emergency visitor needs before scrolling: what we do, the
   services, the phone number in red, insurance accepted, certifications,
   insured. Short copy — this block is for deciding, not for reading. */
.hero.compact .container{padding:50px 26px 58px}
.hero.compact h1{font-size:clamp(2rem,4.3vw,3.3rem);max-width:900px}
.hero-lede{color:#dbe2ef;font-size:1.06rem;max-width:660px;margin-top:12px}

/* the red call bar — the single most important element above the fold */
.callbar{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px;
  background:linear-gradient(100deg,var(--red),var(--red-dk));border-radius:14px;padding:18px 28px;
  box-shadow:0 16px 38px rgba(198,33,40,.36)}
.callbar .lbl{display:block;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.17em;font-size:.74rem;font-weight:600;color:#ffd9db;margin-bottom:3px}
.callbar .tel{display:block;font-family:var(--font-display);font-weight:600;line-height:1;
  font-size:clamp(1.75rem,3.3vw,2.45rem);color:#fff;letter-spacing:.01em;white-space:nowrap}
.callbar .tel:hover{color:#fff;text-decoration:underline}
.callbar .spacer{flex:1 1 20px}
.callbar .btn{background:#fff;color:var(--red-dk)}
.callbar .btn:hover{background:var(--deep-navy);color:#fff}
.callbar .btn.hollow{background:transparent;border:2px solid rgba(255,255,255,.55);color:#fff}
.callbar .btn.hollow:hover{background:#fff;color:var(--red-dk);border-color:#fff}

/* what we do — service chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);border-radius:30px;padding:8px 17px;
  font-size:.87rem;font-weight:500;color:#e6ecf5;transition:.18s}
.chip:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}

/* peace of mind — insurance, certification, insured */
.assure{display:flex;gap:14px 28px;flex-wrap:wrap;margin-top:22px}
.assure .a{display:flex;align-items:center;gap:9px;font-size:.9rem;color:#c2cbdb}
.assure .a::before{content:"✓";width:20px;height:20px;border-radius:50%;background:var(--blue);
  color:#fff;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.assure .a b{color:#fff;font-weight:600}

body.t-light .chip{background:rgba(12,19,32,.04);border-color:var(--line);color:var(--text)}
body.t-light .assure .a{color:var(--ink-soft)}
body.t-light .assure .a b{color:var(--head)}

@media(max-width:760px){
  .hero.compact .container{padding:34px 26px 40px}
  .callbar{padding:16px 20px;gap:14px}
  .callbar .spacer{display:none}
  .assure{gap:10px 18px}
}

/* white icon cards overlapping the hero bottom — reference layout */
.icon-row{position:relative;z-index:3;margin-top:-88px}
.icon-row .container{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.icon-card{display:block;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(12,19,32,.16);
  padding:26px 14px 22px;text-align:center;transition:.2s;position:relative;overflow:hidden}
.icon-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(12,19,32,.22)}
.icon-card .circ{width:68px;height:68px;border-radius:50%;margin:0 auto 12px;
  background:linear-gradient(140deg,var(--blue),var(--blue-deep));display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:2rem}
.icon-card b{display:block;font-family:var(--font-display);font-size:.84rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--deep-navy);font-weight:600}
/* a quiet blue underline on hover — the blade motif lives in the heroes,
   where it has room to read as intentional */
.icon-card::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:3px;
  background:var(--blue);transform:translateX(-50%);transition:width .22s ease}
.icon-card:hover::after{width:64%}

/* trust strip — insurance, certification, insured */
.trustbar{background:var(--surface);padding:26px 0 4px}
.trustbar .container{display:flex;justify-content:center;gap:12px 40px;flex-wrap:wrap}
.trustbar .t{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--ink-soft)}
.trustbar .t b{color:var(--head);font-weight:600}
.trustbar .t::before{content:"✓";width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;
  font-size:.74rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}

/* Red 24/7 emergency strip — same in both templates */
.emerg-strip{background:linear-gradient(105deg,var(--blue-dk),var(--blue-deep));color:#fff}
.emerg-strip .container{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:48px;padding:44px 26px 48px}
.emerg-strip .kicker{color:#ffd15c}
.emerg-strip h2{color:#fff;font-weight:400;font-size:clamp(1.6rem,2.7vw,2.15rem);line-height:1.16}
.emerg-strip .strip-copy p{color:#d7e3f4;font-size:1rem}



/* Two-col intro */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.intro-grid p{color:var(--ink-soft)}

/* Big image service cards */
.svc-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.svc-card{position:relative;min-height:300px;border-radius:16px;overflow:hidden;display:flex;align-items:flex-end;box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#2e3a52,#46597d)}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.svc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,14,22,.92),rgba(10,14,22,.15));z-index:1}
.svc-card .inner{position:relative;z-index:2;padding:30px;color:#fff;width:100%}
.svc-card h3{color:#fff;font-weight:500;font-size:1.6rem;margin-bottom:8px}
.svc-card p{color:#d7deea;font-size:.92rem;margin-bottom:14px}
.svc-card .more{color:#fff;font-weight:600;font-size:.9rem;display:inline-flex;gap:6px}

/* Split image + list */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split .ph{border-radius:16px;overflow:hidden;min-height:360px;box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#2e3a52,#46597d)}
.split .ph img{width:100%;height:100%;object-fit:cover;min-height:360px}
ul.links{list-style:none;margin-top:10px}
ul.links li{border-bottom:1px solid var(--line)}
ul.links li a{display:block;padding:15px 0;color:var(--head);font-weight:600;font-size:1.02rem;transition:.15s}
ul.links li a:hover{color:var(--blue);padding-left:8px}
ul.links li a::before{content:"→ ";color:var(--blue)}

/* Serving community — skewed image block */
.serve{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center}
.loc-list{list-style:none}
.loc-list li{display:flex;align-items:center;gap:14px;padding:14px 0;font-size:1.15rem;color:var(--head);border-bottom:1px solid var(--line)}
.loc-list li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--blue);flex:none}
.skew-img{position:relative}
.skew-img .frame{transform:skewX(-8deg);overflow:hidden;border-radius:6px;box-shadow:var(--shadow);position:relative;z-index:2;background:linear-gradient(135deg,#2e3a52,#46597d)}
.skew-img .frame img{transform:skewX(8deg) scale(1.15);width:100%;height:360px;object-fit:cover}
.skew-img::after{content:"";position:absolute;right:-16px;bottom:-16px;left:36px;top:36px;background:var(--blue);transform:skewX(-8deg);z-index:1;border-radius:6px}

/* Overlapping Advantage card */
.advantage{position:relative;background:linear-gradient(rgba(10,14,22,.85),rgba(10,14,22,.85)),url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=70') center/cover fixed;padding:90px 0}
.adv-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:44px;max-width:620px;box-shadow:var(--shadow)}
.adv-card h2{color:var(--head);margin-bottom:10px}
ul.checks{list-style:none;margin-top:18px}
ul.checks li{padding:11px 0 11px 38px;position:relative;color:var(--text)}
ul.checks li::before{content:"✓";position:absolute;left:0;top:10px;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center}

/* Family / who we are */
.family{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.family .photo{border-radius:50%;overflow:hidden;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto;box-shadow:var(--shadow);background:linear-gradient(135deg,#2e3a52,#46597d)}
.family .photo img{width:100%;height:100%;object-fit:cover}

/* Team grid */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.member{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:28px;text-align:center;border-top:4px solid var(--blue)}
.member .av{width:88px;height:88px;border-radius:50%;margin:0 auto 16px;background:linear-gradient(135deg,var(--blue-deep),var(--navy-2));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Poppins';font-weight:600;font-size:1.7rem}
.member b{display:block;color:var(--head);font-size:1.08rem}
.member span{color:var(--blue);font-weight:600;font-size:.85rem}
.member p{margin-top:10px;font-size:.9rem;color:var(--ink-soft)}

/* Testimonials */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:30px}
.tcard .stars{color:var(--gold);letter-spacing:3px;margin-bottom:12px}
.tcard p{font-style:italic;color:var(--text);font-size:.96rem}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:16px}
.tcard .who .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.tcard .who b{display:block;color:var(--head);font-size:.92rem}
.tcard .who span{font-size:.78rem;color:var(--ink-soft)}

/* Stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stats .s b{display:block;font-family:'Poppins';font-weight:600;font-size:2.7rem;color:var(--blue)}
.stats .s span{color:var(--silver);font-size:.92rem}

/* Question / contact band — shared */
.qband{position:relative;background:linear-gradient(rgba(16,24,42,.92),rgba(12,20,38,.92)),url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=70') center/cover;color:#fff}
.qband .container{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:70px 26px;flex-wrap:wrap}
.qband .kicker{color:var(--gold)}
.qband h2{color:#fff;font-weight:300;max-width:640px}

/* ===== Inner page hero — themed ===== */
.page-hero{position:relative;background:var(--hero-bg);color:var(--hero-text);padding:74px 0;border-bottom:1px solid var(--line)}
.page-hero .crumb{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hero-crumb);font-weight:600;margin-bottom:12px;display:block}
.page-hero h1{color:var(--hero-head);font-weight:300}
.page-hero p{color:var(--hero-text);max-width:700px;margin-top:14px;font-size:1.08rem}
/* the dark template keeps a photographic hero behind the gradient */
body.t-dark .page-hero{background:linear-gradient(112deg,rgba(8,11,16,.95) 0%,rgba(19,26,37,.86) 55%,rgba(29,38,53,.74) 100%),url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1600&q=70') center/cover;border-bottom:0}
body.t-light .page-hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:38%;background:linear-gradient(120deg,rgba(30,136,229,.10),rgba(184,193,207,.22));transform:skewX(-12deg);transform-origin:top right}
body.t-light .page-hero .container{position:relative;z-index:2}

/* Generic feature cards */
.fgrid{display:grid;gap:24px}
.fgrid.c3{grid-template-columns:repeat(3,1fr)}
.fgrid.c2{grid-template-columns:repeat(2,1fr)}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:34px 32px;transition:.2s;border-top:4px solid transparent}
.fcard:hover{border-top-color:var(--blue);transform:translateY(-4px)}
.fcard .ic{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:16px}
.fcard h3{color:var(--head);margin-bottom:11px;line-height:1.35}
.fcard p{color:var(--ink-soft);font-size:.95rem;margin:0;line-height:1.68}
.fcard.lead-card{border-top-color:var(--blue)}

/* Forms */
form.contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.contact .full{grid-column:1/-1}
label{font-weight:600;font-size:.86rem;color:var(--head);display:block;margin-bottom:6px}
input,select,textarea{width:100%;padding:13px;border:1.5px solid var(--line);border-radius:8px;font:inherit;color:var(--text);background:var(--surface)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}

/* Footer — shared */
footer.site{background:var(--navy);color:#aeb8ca;padding:64px 0 0}
body.t-dark footer.site{background:#080b10;border-top:1px solid #1c2431}
footer.site .fgridw{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px}
footer.site h5{color:#fff;font-family:'Poppins';font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;margin-bottom:16px}
footer.site ul{list-style:none}
footer.site li{margin-bottom:9px}
footer.site a{color:#aeb8ca;font-size:.9rem}
footer.site a:hover{color:#fff}
.foot-logo{display:flex;align-items:center;margin-bottom:18px}
.foot-logo .lockup{height:52px;width:auto}
.foot-contact div{margin-bottom:7px;font-size:.9rem}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:46px;padding:20px 0;font-size:.8rem;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#8f9bb2}

/* ===================================================================
   BRAND MOTIF — the angular "blade" cut from the Platinum P
   This is what makes the layout ours rather than a replica. Same section
   order and rhythm as the reference, but every major band is cut on the
   logo's own diagonal and accented in Platinum Blue.
   =================================================================== */

/* diagonal blade sweeping the home hero */
.hero::before{content:"";position:absolute;top:0;right:-6%;width:46%;height:100%;
  background:linear-gradient(115deg,rgba(26,127,224,.18),rgba(138,154,179,.04));
  transform:skewX(-13deg);transform-origin:top right;z-index:1;pointer-events:none}
/* blue blade rule sits under the headline block, not across the icon cards */
.hero .kicker{position:relative}

/* inner page heroes cut on the diagonal */
.page-hero{clip-path:polygon(0 0,100% 0,100% calc(100% - 2.6vw),0 100%)}

/* the 24/7 strip becomes a hard-edged blade */
/* straight section break — the diagonal cut made the band read as a graphic
   flourish rather than an alert bar */
.emerg-strip{clip-path:none}

/* question band cut to match */
.qband{clip-path:polygon(0 2.4vw,100% 0,100% 100%,0 100%)}
.qband .container{padding:calc(70px + 2.4vw) 26px 70px}

/* every kicker carries a small blue blade tick */
.kicker::before{content:"";display:inline-block;width:22px;height:3px;background:var(--blue);
  transform:skewX(-30deg);margin-right:11px;vertical-align:middle;position:relative;top:-3px}
.center .kicker::before{margin-right:11px}

/* icon cards keep a clean rounded box — their hover underline is defined with
   the card styles above. The corner wedge read as a glitch at card scale, so
   the blade motif now lives only in the page heroes, where it has room. */
.icon-card{position:relative;overflow:hidden;border-radius:12px}

/* skewed frame accent follows the blade angle (was -8deg) */
.skew-img .frame,.skew-img::after{transform:skewX(-13deg)}
.skew-img .frame img{transform:skewX(13deg) scale(1.18)}

/* Responsive */
@media(max-width:1000px){
  .icon-row .container{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .team,.tgrid,.fgrid.c3{grid-template-columns:repeat(2,1fr)}
  .icon-row .container{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .topbar .container{flex-wrap:wrap;gap:16px;min-height:0;padding-top:14px;padding-bottom:14px}
  .utilwrap{padding-left:0;order:3;width:100%;justify-content:flex-end;padding-top:10px}
  .utilwrap::before{display:none}
  .utilwrap a{color:var(--ink-soft)}
  .utilwrap .contact-pill{background:var(--blue);color:#fff}
  .emerg-strip .container{grid-template-columns:1fr;gap:24px;padding:44px 26px}
}
@media(max-width:760px){
  .intro-grid,.svc-cards,.split,.serve,.family,.fgrid.c2{grid-template-columns:1fr}
  .icon-row .container{grid-template-columns:repeat(2,1fr)}
  .team,.tgrid,.fgrid.c3{grid-template-columns:1fr}
  form.contact{grid-template-columns:1fr}
  .emergency .lbl{display:none}
  nav.main .container{gap:16px}
  nav.main{display:none}
  nav.main.open{display:block}
  .nav-toggle{display:block}
  /* mobile: submenus stack open inline instead of floating */
  nav.main .nav-list{flex-direction:column;align-items:flex-start;gap:0}
  nav.main li{width:100%}
  nav.main > .container > .nav-list > li{border-bottom:1px solid var(--line)}
  nav.main a{padding:12px 0}
  nav.main .sub-menu,nav.main li.mega > .sub-menu{position:static;width:100%;max-height:none;opacity:1;
    visibility:visible;box-shadow:none;border:0;border-left:3px solid var(--blue);border-radius:0;
    background:transparent;transition:none;padding:0 0 10px}
  nav.main li.mega > .sub-menu > li{width:100%}
  nav.main .sub-menu li a{padding:9px 0 9px 18px}
  nav.main .sub-menu li a:hover{padding-left:22px;background:transparent}
  nav.main .menu-item-has-children > a::after{float:right;margin-top:9px}
  .hero .container{padding:70px 26px 120px}
  .advantage{background-attachment:scroll}
  body.t-light .page-hero::after{display:none}
}

/* ---- FAQ accordions (subpages) ---- */
.faqwrap{max-width:860px;margin:44px auto 0}
details.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;
  box-shadow:var(--shadow-sm);overflow:hidden}
details.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 24px;font-weight:600;
  color:var(--head);position:relative;font-size:1.03rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
details.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details.faq summary:hover{color:var(--blue)}
details.faq p{padding:0 24px 22px;margin:0;color:var(--ink-soft)}

/* ---- custom icon set (replaces emoji) ---- */
.ic-svg{width:26px;height:26px;display:block;flex:none}
.icon-card .circ .ic-svg{width:32px;height:32px}
.fcard .ic .ic-svg{width:27px;height:27px}
.ic-inline{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.15em;flex:none}
.emergency .num .ic-inline{width:.85em;height:.85em;color:var(--red)}
.btn .ic-inline{width:1.05em;height:1.05em}
.foot-contact .ic-inline{color:var(--blue);margin-right:4px}

/* ===================================================================
   MOBILE & TABLET
   The nav has six long labels, so it collapses to a menu well before
   phone width. On phones the phone number gets a permanent sticky bar —
   for an emergency restoration site that's the whole point of the page.
   =================================================================== */

/* --- collapse the nav early: six long labels wrap badly at tablet width --- */
@media(max-width:1080px){
  nav.main{display:none;border-bottom:0}
  nav.main.open{display:block;border-bottom:1px solid var(--line)}
  .nav-toggle{display:block;margin-left:auto;order:9}
  nav.main .container{display:block;padding-top:6px;padding-bottom:10px}
  nav.main .nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  nav.main li{width:100%}
  nav.main > .container > .nav-list > li{border-bottom:1px solid #e4e8ee}
  nav.main > .container > .nav-list > li > a{padding:14px 0;font-weight:600}
  nav.main .sub-menu,nav.main li.mega > .sub-menu{position:static;width:100%;max-height:none;
    opacity:1;visibility:visible;box-shadow:none;border:0;border-left:3px solid var(--blue);
    border-radius:0;background:transparent;transition:none;padding:2px 0 10px;display:block}
  nav.main li.mega > .sub-menu > li{width:100%}
  nav.main .sub-menu li a{padding:9px 0 9px 18px;font-size:.9rem}
  nav.main .sub-menu li a:hover{padding-left:22px;background:transparent}
  nav.main .menu-item-has-children > a::after{float:right;margin-top:10px}
}

/* --- header stacks: logo + burger, then the 24/7 line --- */
@media(max-width:900px){
  .topbar .container{flex-wrap:wrap;gap:10px 16px;min-height:0;padding-top:12px;padding-bottom:12px}
  .logo{order:1}
  .logo .lockup{height:44px}
  .nav-toggle{order:2;font-size:1.9rem;line-height:1;padding:0 4px}
  .emergency{order:3;width:100%;justify-content:flex-start;gap:10px;
    border-top:1px solid #eef1f6;padding-top:10px}
  .emergency .lbl{display:block;font-size:.6rem;letter-spacing:.1em;text-align:left;line-height:1.25}
  .emergency .num{font-size:1.45rem}
  .utilwrap{display:none}
}

/* --- sticky call bar: the single most important control on a phone --- */
.callbar-fixed{display:none}
@media(max-width:760px){
  .callbar-fixed{display:grid;grid-template-columns:1.45fr 1fr;position:fixed;left:0;right:0;bottom:0;
    z-index:90;box-shadow:0 -6px 22px rgba(12,19,32,.3)}
  .callbar-fixed a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;
    font-family:var(--font-display);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
    font-size:.9rem;color:#fff}
  .callbar-fixed .call{background:var(--red)}
  .callbar-fixed .call:active{background:var(--red-dk)}
  .callbar-fixed .quote{background:var(--deep-navy)}
  .callbar-fixed .ic-inline{width:1.1em;height:1.1em}
  body{padding-bottom:54px}
}

/* --- phone-size layout --- */
@media(max-width:760px){
  .hero .container{padding:36px 22px 96px}
  .hero h1{font-size:clamp(1.55rem,6.4vw,2.1rem)}
  .hero .hero-lede{font-size:.96rem}
  .icon-row{margin-top:-68px}
  .icon-row .container{grid-template-columns:repeat(2,1fr);gap:12px}
  .icon-card{padding:18px 8px 14px}
  .icon-card .circ{width:56px;height:56px;margin-bottom:9px}
  .icon-card .circ .ic-svg{width:27px;height:27px}
  .icon-card b{font-size:.76rem;letter-spacing:.08em}
  .trustbar .container{justify-content:flex-start;gap:9px 20px}
  .trustbar .t{font-size:.83rem}
  .section{padding:52px 0}
  .container{padding:0 22px}
  .page-hero{padding:44px 0}
  .page-hero .container{padding-left:22px;padding-right:22px}
  .btn{padding:13px 24px;font-size:.88rem}
  .qband .container{padding:44px 22px}
  footer.site{padding:44px 0 0}
  footer.site .fgridw{grid-template-columns:1fr;gap:30px}
  .legal{flex-direction:column;gap:8px}
  .faqwrap{margin-top:28px}
  details.faq summary{padding:16px 46px 16px 18px;font-size:.97rem}
  details.faq p{padding:0 18px 18px}
  .adv-card{padding:28px 22px}
  .skew-img::after{display:none}
}

@media(max-width:400px){
  .icon-row .container{grid-template-columns:repeat(2,1fr)}
  .emergency .num{font-size:1.3rem}
  .callbar-fixed a{font-size:.82rem;letter-spacing:.04em}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .icon-card:hover,.fcard:hover,.chip:hover{transform:none}
}

/* ===================================================================
   PHONE — centered, aligned, and given room to breathe
   Everything sits on one centered axis. Lists stay left-aligned inside
   a centered block, because centered body text with hanging bullets
   reads as broken rather than balanced.
   =================================================================== */
@media(max-width:760px){

  /* --- header: logo centered, burger parked at the edge --- */
  .topbar .container{position:relative;justify-content:center;text-align:center;
    gap:0;padding-top:16px;padding-bottom:14px}
  .logo{order:1;margin:0 auto}
  .nav-toggle{position:absolute;right:20px;top:50%;transform:translateY(-50%);margin:0;order:0}
  .emergency{order:3;width:100%;justify-content:center;text-align:center;gap:10px;
    margin-top:14px;padding-top:14px;border-top:1px solid #eef1f6}
  .emergency .lbl{text-align:right}

  /* --- one centered axis for every section --- */
  .section .container,
  .page-hero .container,
  .advantage .container,
  .emerg-strip .container,
  .qband .container{text-align:center}

  .section h2,.section h3,.section p,.page-hero h1,.page-hero p{text-wrap:balance}
  .lead,.muted,.intro-grid p,.hero-lede{margin-left:auto;margin-right:auto}
  .kicker{margin-bottom:12px}

  /* buttons centre and stack with real space around them */
  .section .container > div[style*="display:flex"],
  .page-hero .container > div[style*="display:flex"],
  .hero-cta{justify-content:center}
  .btn{margin-left:auto;margin-right:auto}

  /* --- lists: centered block, left-aligned items --- */
  ul.checks{max-width:360px;margin-left:auto;margin-right:auto;text-align:left}
  ul.checks li{display:flex;gap:12px;align-items:flex-start;padding:9px 0 9px 0}
  ul.checks li::before{position:static;flex:none;margin-top:3px}

  ul.links{max-width:400px;margin-left:auto;margin-right:auto;text-align:left}
  .loc-list{max-width:360px;margin-left:auto;margin-right:auto;text-align:left}

  /* --- stacked blocks get real separation --- */
  .split,.serve,.family,.intro-grid{gap:36px}
  .split .ph,.family .photo{margin-left:auto;margin-right:auto}
  .split .ph{min-height:230px}
  .split .ph img{min-height:230px}
  .family .photo{max-width:280px}
  .fgrid{gap:18px}
  .tgrid,.team{gap:18px}

  /* --- trust bar centered --- */
  .trustbar{padding:26px 0 6px}
  .trustbar .container{justify-content:center;gap:12px 26px}
  .trustbar .t{font-size:.85rem}

  /* --- the blue band reads as one centered column --- */
  .emerg-strip .container{padding:44px 22px 48px;gap:26px}
  .emerg-strip h2{font-size:1.55rem}
  .emerg-strip .strip-copy p{font-size:.96rem}
  .emerg-strip .btn{margin-top:4px}

  /* --- question band --- */
  .qband .container{flex-direction:column;text-align:center;gap:22px}
  .qband h2{font-size:1.5rem;margin-left:auto;margin-right:auto}

  /* --- advantage card --- */
  .adv-card{text-align:center}

  /* --- stats --- */
  .stats{grid-template-columns:repeat(2,1fr);gap:28px 18px}

  /* --- testimonials + team --- */
  .tcard,.member{text-align:center}
  .tcard .who{justify-content:center}

  /* --- FAQ stays left-aligned inside; heading centered --- */
  .faqwrap{text-align:left}

  /* --- forms stay left-aligned; that's what forms need --- */
  form.contact{text-align:left}
  form.contact .btn{width:100%}

  /* --- footer: one centered column --- */
  footer.site{text-align:center;padding-bottom:8px}
  footer.site .fgridw{gap:34px}
  .foot-logo{justify-content:center}
  footer.site p{margin-left:auto;margin-right:auto}
  .foot-contact div{justify-content:center;display:flex;flex-wrap:wrap;gap:4px}
  .vcard-btn{margin:2px auto 0}
  .legal{align-items:center;text-align:center;gap:10px}
}

/* ===================================================================
   MOBILE HEADER + BOTTOM BAR — rebuilt
   Header carries the logo and the menu, nothing else. The phone lives in
   the fixed bottom bar, which is where a thumb already is.
   =================================================================== */
@media(max-width:900px){
  /* header is logo + menu only */
  .topbar .container{position:relative;justify-content:flex-start;align-items:center;
    gap:0;padding-top:14px;padding-bottom:14px;min-height:0;text-align:left}
  .logo{order:1;margin:0}
  .logo .lockup{height:42px}
  .emergency{display:none}          /* phone moves to the bottom bar */
  .utilwrap{display:none}
  .nav-toggle{order:2;position:static;transform:none;margin-left:auto;
    font-size:1.75rem;line-height:1;padding:4px 2px;color:var(--deep-navy)}
}

@media(max-width:760px){
  /* bottom bar: 24/7 line, then Call Now hard right */
  .callbar-fixed{display:flex;align-items:stretch;position:fixed;left:0;right:0;bottom:0;
    z-index:90;background:var(--deep-navy);box-shadow:0 -4px 18px rgba(12,19,32,.34);
    grid-template-columns:none}
  .callbar-fixed .avail{flex:1 1 auto;display:flex;align-items:center;padding:9px 16px;
    font-family:var(--font-display);text-transform:uppercase;letter-spacing:.11em;
    font-size:.66rem;line-height:1.35;color:#dbe4f0;font-weight:500}
  .callbar-fixed .call{flex:0 0 auto;display:flex;align-items:center;gap:9px;
    background:var(--red);color:#fff;padding:0 26px;
    font-family:var(--font-display);font-weight:600;text-transform:uppercase;
    letter-spacing:.1em;font-size:.95rem}
  .callbar-fixed .call:active{background:var(--red-dk)}
  .callbar-fixed .ic-inline{width:1.05em;height:1.05em}
  body{padding-bottom:52px}
}

/* ===================================================================
   BREATHING ROOM — the eye needs somewhere to rest between
   headline, subhead and the next thing.
   =================================================================== */
.hero .kicker{margin-bottom:18px}
.hero h1{margin-bottom:0}
.hero .hero-lede{margin-top:22px}
.page-hero .crumb{margin-bottom:16px}
.page-hero p{margin-top:20px}
.center .lead{margin-top:18px}
.section .center{margin-bottom:6px}

@media(max-width:760px){
  .hero .container{padding:44px 22px 92px}
  .hero .kicker{margin-bottom:16px;font-size:.72rem;letter-spacing:.18em}
  .hero h1{font-size:clamp(1.6rem,6.6vw,2.15rem);line-height:1.18}
  .hero .hero-lede{margin-top:20px;font-size:.98rem;line-height:1.6}
  .page-hero{padding:38px 0 42px}
  .page-hero h1{font-size:clamp(1.65rem,7vw,2.2rem);line-height:1.2}
  .page-hero .crumb{margin-bottom:14px;font-size:.68rem}
  .page-hero p{margin-top:18px;font-size:.97rem}
  .center .lead{margin-top:16px}
  .trustbar{padding:22px 0 4px}
  .icon-row{margin-top:-56px}
}

/* ===================================================================
   MOBILE SUBMENUS — collapsed by default, tap the chevron to open.
   They were all expanding at once, which dumped 42 links in one wall.
   The toggle buttons are injected by JS, so this works identically on
   the static build and on WordPress (which emits the same classes).
   =================================================================== */
.sub-toggle{display:none}

@media(max-width:1080px){
  nav.main > .container > .nav-list > li{position:relative}

  .sub-toggle{display:block;position:absolute;right:0;top:0;width:56px;height:48px;
    background:none;border:0;cursor:pointer;padding:0;z-index:2}
  .sub-toggle::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;
    border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
    transform:translateY(-70%) rotate(45deg);transition:transform .22s ease}
  nav.main li.open > .sub-toggle::after{transform:translateY(-20%) rotate(-135deg);
    border-color:var(--blue)}

  /* the parent's own caret is redundant now the button has one */
  nav.main .menu-item-has-children > a::after{display:none}

  /* collapsed — and beating the desktop :hover rule on specificity, not order */
  nav.main .sub-menu,
  nav.main li.mega > .sub-menu,
  nav.main li:hover > .sub-menu,
  nav.main li.mega:hover > .sub-menu,
  nav.main li:focus-within > .sub-menu{
    max-height:0;overflow:hidden;opacity:1;visibility:visible;
    transition:max-height .25s ease;padding-top:0;padding-bottom:0}

  nav.main li.open > .sub-menu{max-height:1000px;padding-bottom:10px}
}

/* ---- Google review score block ---- */
.gscore{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px 34px;max-width:640px;margin:38px auto 0;box-shadow:var(--shadow-sm)}
.gscore .num{font-family:var(--font-display);font-size:3.2rem;font-weight:600;
  color:var(--head);line-height:1}
.gscore .stars{color:#f5b544;letter-spacing:3px;font-size:1.15rem}
.gscore .cnt{color:var(--ink-soft);font-size:.9rem;margin-top:3px}
@media(max-width:760px){
  .gscore{gap:16px;padding:22px;flex-direction:column;text-align:center}
}

/* review actions */
.gactions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media(max-width:760px){ .gactions{width:100%} .gactions .btn{flex:1 1 auto;justify-content:center} }

/* ===================================================================
   OPTICAL BALANCE — page heroes and the header
   The inner hero was packed into the left half with the right side empty,
   and the header had the phone crammed against the logo. Both now sit on a
   centered axis with room to breathe between each piece of information.
   =================================================================== */

/* --- header: let the 24/7 block find the middle --- */
@media(min-width:901px){
  .topbar .container{gap:0}
  .logo{margin-right:0}
  .emergency{margin:0 auto;padding:0 44px;gap:14px}
  .emergency .lbl{letter-spacing:.14em;line-height:1.35}
  .utilwrap{gap:30px;padding-left:66px}
}

/* --- inner page hero: centered, with real spacing between each element --- */
.page-hero .container{text-align:center}
.page-hero .crumb{margin-bottom:22px}
.page-hero h1{max-width:900px;margin-left:auto;margin-right:auto}
.page-hero p{max-width:700px;margin:24px auto 0}
.page-hero .container > div:last-child{justify-content:center;margin-top:34px !important}

/* the light template's angled panel is symmetrical now the text is centered */
body.t-light .page-hero::after{width:30%;opacity:.85}

@media(min-width:761px){
  .page-hero{padding:86px 0 90px}
}

/* ===================================================================
   MOBILE MENU — opens from anywhere on the page
   The header stays put while you scroll, and the open menu is a fixed,
   scrollable panel beneath it rather than a block in the document flow.
   =================================================================== */
@media(max-width:1080px){
  nav.main.open{
    position:fixed;left:0;right:0;top:var(--hdr,70px);z-index:70;
    background:#fff;border-top:1px solid var(--line);
    max-height:calc(100dvh - var(--hdr,70px) - 52px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 18px 40px rgba(12,19,32,.22)}
  body.menu-open{overflow:hidden}
  .menu-scrim{position:fixed;inset:0;top:var(--hdr,70px);background:rgba(12,19,32,.45);
    z-index:65;opacity:0;pointer-events:none;transition:opacity .2s ease}
  body.menu-open .menu-scrim{opacity:1;pointer-events:auto}
}

/* ===================================================================
   BOTTOM BAR — split down the middle, both halves centered and bold
   =================================================================== */
@media(max-width:760px){
  .callbar-fixed{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .callbar-fixed .avail{display:flex;align-items:center;justify-content:center;text-align:center;
    padding:10px 8px;font-family:var(--font-display);text-transform:uppercase;
    letter-spacing:.09em;font-size:.7rem;line-height:1.3;color:#fff;font-weight:600}
  .callbar-fixed .call{display:flex;align-items:center;justify-content:center;gap:9px;
    background:var(--red);color:#fff;padding:10px 8px;
    font-family:var(--font-display);font-weight:600;text-transform:uppercase;
    letter-spacing:.09em;font-size:.95rem}
}

/* ===================================================================
   MEGA SUBMENUS ON TOUCH
   Tapping leaves :hover stuck on touch devices, and
   `nav.main li.mega:hover > .sub-menu` (0,4,2) outranks
   `nav.main li.open > .sub-menu` (0,3,2) — so mega items stayed shut
   while ordinary ones opened. These selectors outrank the stuck hover.
   =================================================================== */
@media(max-width:1080px){
  nav.main li.open > .sub-menu,
  nav.main li.mega.open > .sub-menu,
  nav.main li.open:hover > .sub-menu,
  nav.main li.mega.open:hover > .sub-menu,
  nav.main li.open:focus-within > .sub-menu,
  nav.main li.mega.open:focus-within > .sub-menu{
    max-height:1200px;padding-top:2px;padding-bottom:10px}
}

/* Hover-to-open belongs to real pointers only. Touch devices use the
   chevron toggle, so hover should never drive the menu there. */
@media(hover:none){
  nav.main li:hover > .sub-menu,
  nav.main li.mega:hover > .sub-menu{max-height:0}
  nav.main li.open:hover > .sub-menu,
  nav.main li.mega.open:hover > .sub-menu{max-height:1200px}
}

/* ===================================================================
   MOBILE SUBMENUS — SINGLE SOURCE OF TRUTH
   Several earlier layers ended up fighting over max-height on these
   elements, and adding another max-height rule just added another
   combatant. Mobile now drives them with `display`, which none of the
   desktop rules touch, and pins max-height off so nothing earlier can
   collapse them. !important is deliberate here: it ends the conflict
   rather than extending it.

   Trade-off: no slide animation on mobile. Correct beats animated.
   =================================================================== */
@media(max-width:1080px){
  nav.main .sub-menu{
    display:none !important;
    max-height:none !important;
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    overflow:visible;
    box-shadow:none;
    border:0;
    border-left:3px solid var(--blue);
    border-radius:0;
    background:transparent;
    padding:4px 0 12px;
    transition:none;
  }
  nav.main li.open > .sub-menu{display:block !important}
  nav.main li.mega > .sub-menu > li{width:100%}
  nav.main .sub-menu li a{padding:10px 0 10px 18px;font-size:.92rem}
}

/* Forced break before "Water Restoration Experts" on the home hero.
   Dropped on phones, where the headline already wraps naturally and a
   forced break would strand a short line. */
.hero-brk{display:inline}
@media(max-width:760px){ .hero-brk{display:none} }

/* 24/7 band — one centered column across the full width.
   Was a two-column grid with explanatory copy on the right; the band reads
   harder as a single statement plus its CTA. */
.emerg-strip .container{display:block;text-align:center;padding:64px 26px}
.emerg-strip h2{margin-left:auto;margin-right:auto}
.emerg-strip .btn{margin-left:auto;margin-right:auto}
@media(max-width:760px){
  .emerg-strip .container{padding:46px 22px 50px}
}

/* ===================================================================
   EMERGENCY BAND — solid red, two lines, no motion
   A panicking visitor needs one instruction and one number. Anything else
   competes with them.
   =================================================================== */
.emerg-strip{background:var(--red);position:relative;overflow:visible}
.emerg-strip::before,.emerg-strip::after{content:none}
.emerg-strip .container{position:relative;z-index:2;display:block;text-align:center;
  padding:52px 26px 56px}
.emerg-strip h2{color:#fff;font-weight:500;line-height:1.08;margin-bottom:14px;
  font-size:clamp(1.9rem,4.2vw,3rem)}
.emerg-strip .bigtel{display:inline-flex;align-items:center;justify-content:center;gap:18px;
  color:#fff;font-family:var(--font-display);font-weight:700;letter-spacing:.01em;
  font-size:clamp(2.6rem,7.4vw,5.2rem);line-height:1;transition:.18s}
.emerg-strip .bigtel:hover{color:var(--deep-navy)}
.emerg-strip .bigtel .ic-tel{width:.68em;height:.68em;flex:none}

@media(max-width:760px){
  .emerg-strip .container{padding:36px 20px 40px}
  .emerg-strip h2{font-size:clamp(1.5rem,6vw,1.95rem);margin-bottom:10px}
  .emerg-strip .bigtel{gap:12px;font-size:clamp(2.1rem,10.5vw,3rem)}
}

/* ===================================================================
   ABOVE-THE-FOLD FINAL PASS
   Header: two competing auto-margins (the phone's and the utility band's)
   were splitting the free space unevenly — 102px after the logo, 204px
   before the band. Only the phone gets auto margins now, so the gaps match.

   Fold: tightened so the three facts under the phone number land at the
   bottom of a laptop screen and the button falls below it.
   =================================================================== */
@media(min-width:901px){
  .utilwrap{margin-left:0}
}

@media(min-width:761px){
  .hero .container{padding:30px 26px 102px}
  /* wide enough to keep the lede on one line, which buys back the
     space the extra padding costs */
  .hero .hero-lede{max-width:1020px;margin-top:18px}
  .icon-row{margin-top:-88px}
  .trustbar{padding:14px 0 2px}
}

/* ===================================================================
   THE FOLD — hero through red band fills exactly one screen
   The hero absorbs whatever space is left over, so the red band always
   ends flush with the bottom of the viewport and the content above it
   breathes instead of stacking tight.
   =================================================================== */
@media(min-width:761px){
  .fold{min-height:calc(100dvh - var(--chrome,150px));display:flex;flex-direction:column}
  .fold .hero{flex:1 1 auto;display:flex;align-items:center}
  .fold .hero > .container{width:100%;padding-top:26px;padding-bottom:100px}
  .fold .icon-row{flex:0 0 auto}
  .fold .trustbar{flex:0 0 auto;padding:12px 0 16px}
  .fold .emerg-strip{flex:0 0 auto;margin-top:auto}
  .fold .emerg-strip .container{padding:32px 26px 36px}
}

/* ---- red band: texture and depth, no motion ---- */
.emerg-strip{background:linear-gradient(135deg,#cf2a31 0%,var(--red) 42%,var(--red-dk) 100%);
  overflow:hidden}
/* fine diagonal pinstripe, echoing the blade in the logo */
.emerg-strip::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 2px,transparent 2px 24px)}
/* soft light sweep off the right edge */
.emerg-strip::after{content:"";position:absolute;right:-6%;top:-40%;width:46%;height:180%;
  pointer-events:none;z-index:1;transform:skewX(-13deg);
  background:linear-gradient(115deg,rgba(255,255,255,.13),rgba(255,255,255,0) 70%)}
/* hairline rule between the instruction and the number */
.emerg-strip h2::after{content:"";display:block;width:64px;height:3px;margin:16px auto 0;
  background:rgba(255,255,255,.55);border-radius:2px}

@media(max-width:760px){
  .emerg-strip h2::after{width:48px;margin-top:12px}
}

/* Short laptop screens: claw back enough for the band to still land at the
   fold. Taller screens keep the roomier spacing above. */
@media(min-width:761px) and (max-height:820px){
  .fold .hero > .container{padding-top:12px;padding-bottom:84px}
  .fold .icon-row{margin-top:-72px}          /* 12px clear of the subtitle */
  .fold .hero .hero-lede{margin-top:12px}
  .fold .trustbar{padding:8px 0 10px}
  .fold .emerg-strip .container{padding:20px 26px 24px}
  .fold .emerg-strip h2::after{margin-top:9px}
  .fold .emerg-strip h2{margin-bottom:8px}
}

/* Save-contact link under the big phone number (Tom, 2026-07-21) */
.emerg-strip .save-contact{display:inline-block;margin-top:18px;padding:11px 20px;border:1.5px solid rgba(255,255,255,.55);
  border-radius:999px;color:#fff;font-size:.95rem;font-weight:600;letter-spacing:.01em;text-decoration:none;transition:.18s}
.emerg-strip .save-contact:hover{background:#fff;color:var(--blue-deep);border-color:#fff}
@media(max-width:760px){.emerg-strip .save-contact{margin-top:14px;font-size:.92rem}}

/* ===== Nationwide positioning (2026-09-22) ===== */
.natl-band{background:linear-gradient(120deg,#0C1320,#131b2b 60%,#0f4d8f);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.natl-band .container{display:grid;grid-template-columns:1fr 1.6fr;align-items:center;gap:72px;padding:88px 26px}
.natl-band h2{color:#fff;font-weight:400;font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.12;margin:0 0 18px}
.natl-band p{color:#c7d0e0;font-size:1.12rem;max-width:680px}
.natl-band .natl-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.tbc{display:inline-block;font:600 .68rem/1.4 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:#7a4b00;background:#ffd15c;border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.chip.tbc-chip{border-style:dashed;opacity:.85}
.chip.tbc-chip em{font-style:normal;font-size:.7rem;color:#ffd15c;margin-left:4px}
.section.deep .chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;padding:9px 16px;border-radius:999px;font-size:.92rem}
.section.deep .fcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.section.deep .fcard h3,.section.deep .fcard p{color:#fff}
.section.deep .fcard p{color:#c7d0e0}
.muted-sm{display:block;font:500 .78rem/1.3 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-lt);margin-top:4px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 24px;box-shadow:var(--shadow-sm)}
.step b{display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.1rem;margin-bottom:14px}
.step h3{font-size:1.05rem;margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:.95rem}
.fgrid.intent .fcard{display:block}
.fgrid.intent .fcard .more{display:inline-block;margin-top:12px;color:var(--blue);font-weight:600}
@media(max-width:900px){.natl-band .container{grid-template-columns:1fr}.natl-band .natl-map{transform:none}.steps{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.steps{grid-template-columns:1fr}.fgrid.intent{grid-template-columns:1fr}}

/* ===== US map with market pins ===== */
.natl-map{width:100%}
.natl-band .natl-map{justify-self:end;width:100%;transform:translateX(24px)}
.natl-map.wide{max-width:1040px;margin:36px auto 0}
.usmap{width:100%;height:auto;display:block;overflow:visible}
.usmap .nation{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.42);stroke-width:1.2;stroke-linejoin:round}
.usmap .states{fill:none;stroke:rgba(255,255,255,.13);stroke-width:.8}
.usmap .pin .dot{fill:var(--blue);stroke:#fff;stroke-width:1.6}
.usmap .pin .ring{fill:none;stroke:#7fb6ee;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:pinpulse 2.8s ease-out infinite;animation-delay:var(--d,0s)}
.usmap .pin.hq .dot{fill:var(--gold);stroke:#fff;stroke-width:2}
.usmap .pin.hq .ring{stroke:var(--gold);stroke-width:2}
.usmap .pin.hq .ring.r2{animation-delay:calc(var(--d,0s) + 1.4s)}
.usmap .lbl{font:600 15px/1 var(--font-body);fill:#dbe4f2;letter-spacing:.01em;paint-order:stroke;stroke:rgba(12,19,32,.85);stroke-width:3px;stroke-linejoin:round}
.usmap .lbl.hq{font:700 18px/1 var(--font-body);fill:#ffd15c}
.usmap .pin{animation:pindrop .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0s) * .6);transform-box:fill-box;transform-origin:center}
@keyframes pinpulse{0%{transform:scale(.6);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
@keyframes pindrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.map-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;justify-content:center;margin-top:10px;font-size:.86rem;color:#c7d0e0}
.map-legend .k{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--blue);border:1.5px solid #fff;margin-right:7px;vertical-align:-1px}
.map-legend .k.hq{background:var(--gold)}
@media(prefers-reduced-motion:reduce){.usmap .pin,.usmap .pin .ring{animation:none}.usmap .pin .ring{opacity:.5}}
@media(max-width:760px){.usmap .lbl{font-size:19px}.usmap .lbl.hq{font-size:22px}.map-legend{font-size:.8rem}}

/* Center standalone feature-card icons on phones. */
@media(max-width:760px){.fcard .ic{margin-left:auto;margin-right:auto;}}

/* Site-wide heading capitalization, per client preference. */
body.t-dark :is(h1,h2,h3,h4,h5,h6),body.t-light :is(h1,h2,h3,h4,h5,h6){text-transform:capitalize;}