/* ==========================================================================
   The Smoke Alarm Doctor — shared design system
   Navy/red identity, evolved. Loaded by every page in the site.
   ========================================================================== */

/* Size-matched fallbacks so text doesn't jump when web fonts arrive (CLS) */
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:106%;ascent-override:91%;descent-override:22.7%;line-gap-override:0%}
@font-face{font-family:'Sora Fallback';src:local('Arial');size-adjust:108%}
:root{
  /* color */
  --navy-950:#05101f;
  --navy-800:#0b1d35;
  --navy-700:#132848;
  --red-500:#e8342a;--red-text:#ff6b61;
  --red-700:#c0281f;
  --red-btn:#dc3027; /* white text passes WCAG AA (4.67:1) */
  --red-glow:rgba(232,52,42,.35);
  --gold-500:#c8973a;
  --status-ok:#00e060;
  --status-fault:#f5c842;
  --white:#ffffff;
  --paper:#f0f4f8;
  --muted:rgba(255,255,255,.82);
  --muted-dim:rgba(255,255,255,.65);
  --muted-dark:rgba(255,255,255,.82);
  --hairline:rgba(255,255,255,.08);
  --hairline-strong:rgba(255,255,255,.14);

  /* type */
  --font-display:'Sora','Sora Fallback',sans-serif;
  --font-body:'Inter','Inter Fallback',sans-serif;
  --font-mono:'IBM Plex Mono','Courier New',ui-monospace,monospace;

  /* shape / motion */
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --ease:cubic-bezier(.22,.9,.32,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--navy-950);color:var(--white);font-family:var(--font-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--navy-950)}
::-webkit-scrollbar-thumb{background:var(--red-500);border-radius:2px}

/* Visible keyboard focus everywhere — mouse users never see it */
:focus{outline:none}
:focus-visible{outline:2px solid var(--status-ok);outline-offset:3px;border-radius:4px}

.mono{font-family:var(--font-mono)}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 5%;height:72px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(5,16,31,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--hairline);
  transition:background .3s,box-shadow .3s;
}
nav.scrolled{background:rgba(5,16,31,0.97);box-shadow:0 2px 30px rgba(0,0,0,0.4)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo-img{height:44px;width:auto;object-fit:contain}
.nav-logo-text{line-height:1.2}
.nav-logo-text strong{display:block;font-family:var(--font-display);font-weight:700;font-size:13.5px;letter-spacing:.02em;color:#fff}
.nav-logo-text span{font-size:11px;color:var(--muted);font-weight:400}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{text-decoration:none;color:var(--muted);font-size:13.5px;font-weight:500;transition:color .2s;letter-spacing:.01em}
.nav-links a:hover{color:#fff}
.nav-cta{
  background:var(--red-btn);color:#fff;padding:10px 22px;border-radius:8px;
  font-size:13.5px;font-weight:600;text-decoration:none;
  box-shadow:0 4px 20px var(--red-glow);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(232,52,42,0.5)}
.nav-quote-btn{
  background:rgba(255,255,255,.07);color:#fff;padding:9px 18px;border-radius:8px;
  font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid var(--hairline-strong);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.nav-quote-btn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.nav-phone{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;text-decoration:none;transition:color .2s}
.nav-phone:hover{color:#fff}
.nav-phone svg{width:13px;height:13px;stroke:var(--red-500);fill:none;stroke-width:2.5}

/* ── READOUT CHIP (unifies availability / hero badge / about badges / trust pills) ── */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:50px;padding:6px 14px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--hairline-strong);background:rgba(255,255,255,.05);color:var(--muted);
}
.chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.chip--ok{background:rgba(0,224,96,.1);border-color:rgba(0,224,96,.25);color:var(--status-ok)}
.chip--ok .chip-dot{background:var(--status-ok);animation:pulse-dot 1.8s ease-in-out infinite}
.chip--alert{background:rgba(232,52,42,.12);border-color:rgba(232,52,42,.3);color:var(--red-text)}
.chip--alert .chip-dot{background:var(--red-500);box-shadow:0 0 0 3px rgba(232,52,42,.25);animation:pulse-dot 2s ease-in-out infinite}
.chip--neutral .chip-dot{background:var(--muted)}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(232,52,42,.25)}50%{box-shadow:0 0 0 6px rgba(232,52,42,.08)}}
.chip--ok.chip-plain{box-shadow:none}

/* Plain-language trust line (not a pill) used in hero + footer */
.trust-line{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.trust-line svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2}
.trust-line .stars{color:var(--status-fault);letter-spacing:1px;font-size:11px}

/* ── CORNER-BRACKET PANEL (used sparingly: hero frame + quote summary) ── */
.bracket-panel{position:relative}
.bracket-panel::before,.bracket-panel::after,
.bracket-panel .bk-tl,.bracket-panel .bk-br{
  content:'';position:absolute;width:18px;height:18px;pointer-events:none;
}
.bracket-panel::before{top:-1px;left:-1px;border-top:2px solid var(--red-500);border-left:2px solid var(--red-500);border-radius:6px 0 0 0}
.bracket-panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--red-500);border-right:2px solid var(--red-500);border-radius:0 0 6px 0}

/* ── BUTTONS ── */
.btn-primary{
  background:var(--red-btn);color:#fff;padding:15px 30px;border-radius:10px;text-decoration:none;
  font-weight:700;font-size:15px;font-family:var(--font-display);
  box-shadow:0 8px 32px var(--red-glow);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(232,52,42,.5)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-secondary{
  background:rgba(255,255,255,.07);color:#fff;padding:15px 28px;border-radius:10px;
  text-decoration:none;font-weight:600;font-size:15px;border:1px solid var(--hairline-strong);
  transition:background .25s var(--ease),border-color .25s var(--ease);display:inline-flex;align-items:center;gap:8px;
}
.btn-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
/* Gold app button (homepage hero, 2026-11-05) */
.btn-app{background:#f5c518;color:#1a1205;padding:15px 28px;border-radius:10px;text-decoration:none;font-weight:700;font-size:15px;font-family:var(--font-display);border:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 28px rgba(245,197,24,.35);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn-app:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(245,197,24,.5)}

/* ── SECTION LAYOUT ── */
.section{padding:96px 5%}
.section-inner{max-width:1100px;margin:0 auto}
.section-tag{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red-text);margin-bottom:14px;display:block}
.section-title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.12;letter-spacing:-.025em;margin-bottom:16px}
.section-sub{font-size:1.05rem;color:var(--muted);line-height:1.7;max-width:560px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

/* ── TRUST BAR ── */
.trust-bar{background:rgba(255,255,255,.03);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:28px 5%}
.trust-bar-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;flex-wrap:wrap;gap:24px}
.trust-stat{text-align:center}
.trust-stat-num{font-family:var(--font-display);font-weight:800;font-size:2rem;color:#fff;line-height:1;margin-bottom:4px}
.trust-stat-num span{color:var(--red-500)}
.trust-stat-label{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.03em}
.trust-divider{width:1px;height:40px;background:var(--hairline)}

/* ── SERVICES ── */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.service-card{background:rgba(255,255,255,.035);border:1px solid var(--hairline-strong);border-radius:var(--radius);padding:32px 28px;position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red-500),transparent);opacity:0;transition:opacity .3s}
.service-card:hover{transform:translateY(-6px);border-color:rgba(232,52,42,.25);background:rgba(255,255,255,.055)}
.service-card:hover::before{opacity:1}
.service-icon{width:52px;height:52px;border-radius:14px;background:rgba(232,52,42,.1);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background .3s,transform .3s}
.service-icon svg{width:24px;height:24px;stroke:var(--red-500);fill:none;stroke-width:1.75}
.service-card:hover .service-icon{background:rgba(232,52,42,.2);transform:scale(1.05)}
.service-card h3{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:10px;color:#fff}
.service-card p{font-size:13.5px;color:var(--muted);line-height:1.65}
.service-price{margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:12.5px;color:var(--red-text);font-weight:500}

/* ── HOW IT WORKS ── */
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.how-step{text-align:center;padding:0 16px}
.step-num{width:60px;height:60px;border-radius:50%;background:var(--navy-700);border:1.5px solid var(--hairline-strong);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:var(--font-mono);font-weight:600;font-size:1.2rem;color:var(--red-500);position:relative}
.step-num::after{content:'';position:absolute;left:100%;top:50%;width:100%;height:1px;background:linear-gradient(90deg,var(--hairline-strong),transparent)}
.how-step:last-child .step-num::after{display:none}
.how-step h3{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:10px}
.how-step p{font-size:13.5px;color:var(--muted);line-height:1.65}

/* ── HERO ── */
#hero{
  min-height:100vh;
  display:flex;align-items:center;
  padding:130px 5% 80px;position:relative;overflow:hidden;
  background-image:url('/assets/img/hero-home-mobile.webp');
  background-size:cover;background-position:center;
}
@media(min-width:769px){
  #hero{background-image:url('/assets/img/hero-home.webp')}
}
#hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(5,16,31,.94) 0%,rgba(5,16,31,.82) 38%,rgba(5,16,31,.45) 68%,rgba(5,16,31,.15) 100%);
}
#hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:140px;z-index:0;
  background:linear-gradient(to bottom,rgba(5,16,31,0),var(--navy-950));
}
.hero-left{position:relative;z-index:2;max-width:600px}
h1.hero-title{font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,4.5vw,4rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:22px}
h1.hero-title em{font-style:normal;color:var(--red-500)}
.hero-sub{font-size:clamp(1rem,1.5vw,1.15rem);color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(5,16,31,.9);line-height:1.7;max-width:480px;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px}
.hero-badge{margin-bottom:24px}

/* ── QUOTE BUILDER ── */
#quote{background:linear-gradient(135deg,var(--navy-800) 0%,#0d1f38 100%);padding:96px 5%}
.quote-wrap{max-width:1100px;margin:0 auto}
@keyframes shimmer{0%{background-position:200%}100%{background-position:-200%}}
.quote-layout{display:grid;grid-template-columns:1fr 380px;gap:32px;margin-top:52px;align-items:start}
.quote-layout>div{min-width:0}

/* Segmented tab control — one solid bar, not floating pills */
.q-tabs{display:flex;gap:4px;margin-bottom:22px;padding:4px;background:rgba(255,255,255,.03);border:1px solid var(--hairline-strong);border-radius:12px}
.q-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;border-radius:9px;padding:11px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);white-space:nowrap}
.q-tab svg{width:14px;height:14px;flex-shrink:0}
.q-tab.active{background:var(--red-btn);color:#fff;box-shadow:0 4px 18px var(--red-glow)}
.q-tab-panel{display:none}.q-tab-panel.active{display:block}

.q-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;grid-auto-rows:1fr;margin-bottom:8px}
.q-card{background:rgba(255,255,255,.04);border:1.5px solid var(--hairline-strong);border-radius:14px;padding:20px;cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);position:relative;display:flex;flex-direction:column}
.q-card:hover{border-color:rgba(232,52,42,.3);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.q-card.sel{border-color:var(--red-500);background:rgba(232,52,42,.07)}
.q-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.q-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s var(--ease)}
.q-icon svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.75}
.q-card.sel .q-icon{background:rgba(232,52,42,.18)}
.q-card.sel .q-icon svg{stroke:var(--red-500)}
.q-name{font-size:13px;font-weight:600;color:#fff;line-height:1.35;flex:1;padding-top:2px}
.q-desc{font-size:11.5px;color:var(--muted);line-height:1.55;margin-bottom:16px;flex:1}
.q-card-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hairline);padding-top:14px;margin-top:auto}
.q-price{font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--red-500)}
.q-price span{font-size:10px;font-weight:400;color:var(--muted);font-family:var(--font-body)}
.qty-ctrl{display:flex;align-items:center;gap:8px}
.qty-btn{width:26px;height:26px;border-radius:7px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.06);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;line-height:1;padding:0}
.qty-btn:hover{background:rgba(232,52,42,.2);border-color:rgba(232,52,42,.4)}
.qty-num{font-family:var(--font-mono);font-size:13px;font-weight:600;color:#fff;min-width:18px;text-align:center}
.q-hint{font-size:11.5px;color:var(--muted);margin-top:10px}

.q-brand-strip{
  display:flex;align-items:center;gap:16px;margin-top:24px;padding:20px 22px;
  background:rgba(255,255,255,.03);border:1px solid var(--hairline);border-radius:var(--radius-sm);
}
.q-brand-strip img{height:40px;width:40px;object-fit:contain;flex-shrink:0}
.q-brand-strip-title{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:#fff;margin-bottom:3px}
.q-brand-strip-sub{font-size:12px;color:var(--muted);line-height:1.5}

.q-summary{background:rgba(255,255,255,.04);border:1px solid var(--hairline-strong);border-radius:18px;padding:28px;position:sticky;top:88px}
.q-summary::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red-500),var(--gold-500),var(--red-500));background-size:200%;animation:shimmer 3s linear infinite;border-radius:18px 18px 0 0}
.q-summary-title{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:#fff;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.q-summary-title svg{width:17px;height:17px;stroke:var(--red-500);fill:none;stroke-width:2}
.q-line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--hairline);font-size:12.5px}
.q-line-lbl{color:rgba(255,255,255,.75)}
.q-line-val{font-family:var(--font-mono);color:#fff;font-weight:500}
.q-items{min-height:40px}
.q-empty{font-size:12.5px;color:rgba(255,255,255,.75);line-height:1.55;padding:10px 0}
.q-total-row{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--hairline-strong);margin-top:12px;padding-top:16px}
.q-total-lbl{font-size:12px;color:rgba(255,255,255,.75)}
.q-total-note{font-size:10.5px;color:rgba(255,255,255,.75);margin-top:2px}
.q-total-num{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--red-500)}
.q-book-btn{
  width:100%;background:var(--red-btn);color:#fff;border:none;border-radius:10px;
  padding:15px;font-size:14.5px;font-weight:700;font-family:var(--font-display);
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;margin-top:20px;text-decoration:none;
  box-shadow:0 6px 24px var(--red-glow);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.q-book-btn:hover{transform:translateY(-1px);box-shadow:0 10px 32px rgba(232,52,42,.5)}
.q-book-btn:active{transform:translateY(0) scale(.98)}
.q-book-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5}
.q-jobber-note{text-align:center;margin-top:10px;font-size:10.5px;color:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;gap:4px}
.q-included{margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline)}
.q-included-title{font-size:11px;font-weight:600;color:rgba(255,255,255,.75);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.q-inc{font-size:11.5px;color:rgba(255,255,255,.75);display:flex;align-items:flex-start;gap:7px;margin-bottom:8px;line-height:1.4}
.q-inc::before{content:'✓';color:var(--status-ok);font-weight:700;flex-shrink:0;margin-top:1px}

/* Upsell modal */
.modal-backdrop{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.open{display:flex}
.modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px)}
.modal-box{
  position:relative;z-index:1;background:linear-gradient(145deg,#0d1f38,#05101f);
  border:1px solid var(--hairline-strong);border-radius:22px;width:100%;max-width:520px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;max-height:88vh;overflow-y:auto;
  transform:translateY(30px);opacity:0;transition:transform .4s var(--ease-spring),opacity .3s ease;
}
.modal-box.open{transform:translateY(0);opacity:1}
.modal-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red-500),var(--gold-500),var(--red-500));background-size:200%;animation:shimmer 3s linear infinite}
.modal-close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.07);border:1px solid var(--hairline-strong);border-radius:8px;width:32px;height:32px;color:var(--muted);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.upsell-card{margin:0 32px 12px;border:1.5px solid var(--hairline-strong);border-radius:14px;padding:18px;cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.upsell-card:last-of-type{margin-bottom:24px}
.upsell-check{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--hairline-strong);display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:11px;color:#fff}
.upsell-icon{width:44px;height:44px;border-radius:12px;background:rgba(232,52,42,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.upsell-icon svg{width:20px;height:20px;stroke:var(--red-500);fill:none;stroke-width:1.75}
.upsell-tag{font-size:10px;padding:3px 9px;border-radius:50px;font-weight:600}
.upsell-tag--ok{background:rgba(0,224,96,.1);color:var(--status-ok)}
.upsell-tag--red{background:rgba(232,52,42,.1);color:var(--red-500)}
.upsell-tag--gold{background:rgba(200,151,58,.1);color:var(--gold-500)}
.upsell-total-bar{background:rgba(255,255,255,.03);border-top:1px solid var(--hairline);padding:20px 32px}
.upsell-skip{display:block;width:100%;margin-top:10px;background:none;border:none;color:rgba(255,255,255,.75);font-size:12px;cursor:pointer;font-family:var(--font-body);padding:4px}

/* ── REVIEWS ── */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.review-card{background:rgba(255,255,255,.04);border:1px solid var(--hairline-strong);border-radius:var(--radius);padding:28px;transition:transform .35s var(--ease),border-color .35s var(--ease)}
.review-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)}
.review-stars{color:var(--status-fault);font-size:13px;letter-spacing:2px;margin-bottom:14px}
.review-text{font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.7;font-style:italic;margin-bottom:18px}
.review-author{display:flex;align-items:center;gap:10px}
.review-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--red-500),var(--navy-700));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;flex-shrink:0}
.review-name{font-size:13px;font-weight:600;color:#fff}
.review-source{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-top:2px}
.g-logo{font-size:10px;font-weight:700;background:linear-gradient(135deg,#4285f4,#ea4335,#fbbc05,#34a853);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-image-card{background:rgba(255,255,255,.04);border:1px solid var(--hairline-strong);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.about-image-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red-500),var(--gold-500),var(--red-500));background-size:200%;animation:shimmer 3s linear infinite;z-index:1}
.about-photo{width:100%;aspect-ratio:1/1.1;object-fit:cover;object-position:center top;display:block}
.about-overlay{padding:0 28px 24px;margin-top:-96px;position:relative;z-index:0}
/* name + role sit on the bottom of the photo; the chips start cleanly below it */
.about-name-block{height:96px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:14px;margin:0 -28px 16px;padding-left:28px;padding-right:28px;background:linear-gradient(to top,rgba(5,16,31,.92) 0%,rgba(5,16,31,.55) 55%,transparent 100%)}
.about-name{font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:#fff;text-shadow:0 2px 10px rgba(5,16,31,.6)}
.about-role{font-size:11px;color:#8fd0ff;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:2px;text-shadow:0 1px 6px rgba(5,16,31,.8)}
.about-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.about-quote-box{background:rgba(232,52,42,.08);border-left:3px solid var(--red-500);border-radius:0 10px 10px 0;padding:14px 16px}
.about-quote-box p{font-size:12.5px;color:rgba(255,255,255,.85);font-style:italic;line-height:1.6;margin-bottom:5px}
.about-quote-box cite{font-size:11px;color:var(--muted);font-style:normal;font-weight:600}
.about-right h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1.15;letter-spacing:-.025em;margin-bottom:20px}
.about-right p{font-size:14.5px;color:var(--muted);line-height:1.8;margin-bottom:16px}
.about-checklist{margin-top:24px}
.about-check{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.about-check:last-child{border-bottom:none}
.check-icon{width:22px;height:22px;border-radius:50%;background:rgba(232,52,42,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.check-icon svg{width:12px;height:12px;stroke:var(--red-500);stroke-width:2.5;fill:none}
.about-check p{font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.6}
.about-check strong{color:#fff}

/* ── BLOG PREVIEW (homepage cards) ── */
#blog{background:rgba(255,255,255,.015)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.blog-card{background:rgba(255,255,255,.035);border:1px solid var(--hairline-strong);border-radius:var(--radius);overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease);cursor:pointer;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.blog-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.18)}
.blog-thumb{height:170px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--navy-700);background-size:contain;background-repeat:no-repeat;background-position:center}
.blog-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.blog-thumb svg{width:48px;height:48px;stroke:rgba(255,255,255,.35);fill:none;stroke-width:1.5}
.blog-thumb-1{background:linear-gradient(135deg,#1a0808,#3d1a1a)}
.blog-thumb-2{background:linear-gradient(135deg,#08121a,#1a2d3d)}
.blog-thumb-3{background:linear-gradient(135deg,#1a1208,#3d2e1a)}
.blog-cat{position:absolute;top:12px;left:12px;background:var(--red-btn);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:50px}
.blog-body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.blog-date{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);margin-bottom:10px;letter-spacing:.03em}
.blog-title{font-family:var(--font-display);font-weight:700;font-size:1rem;color:#fff;line-height:1.4;margin-bottom:10px}
.blog-excerpt{font-size:13px;color:var(--muted);line-height:1.65;flex:1}
.blog-read{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--red-text);margin-top:16px;text-decoration:none}
.blog-read svg{width:14px;height:14px;transition:transform .2s;flex-shrink:0}
.blog-card:hover .blog-read svg{transform:translateX(4px)}

/* ── COVERAGE (CSS backdrop; no photo) ── */
#coverage{
  position:relative;padding:110px 5%;overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 70% 20%,rgba(232,52,42,.14),transparent 60%),radial-gradient(ellipse 70% 70% at 15% 90%,rgba(40,90,160,.22),transparent 65%),var(--navy-800);
}
#coverage::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(5,16,31,.55) 0%,rgba(5,16,31,.7) 55%,rgba(5,16,31,.92) 100%);
}
#coverage .section-inner{position:relative;z-index:1}
.coverage-wrap{margin-top:40px}
.coverage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.coverage-city{
  background:rgba(5,16,31,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);border-radius:50px;
  padding:13px 18px;font-size:13px;color:#fff;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:background .25s var(--ease),border-color .25s var(--ease);cursor:default;
}
.coverage-city:hover{background:rgba(232,52,42,.3);border-color:rgba(232,52,42,.45)}
.city-dot{width:6px;height:6px;border-radius:50%;background:var(--red-500);flex-shrink:0}

/* ── FAQ ACCORDION (service pages + blog posts) ── */
.faq-list{margin-top:32px;display:flex;flex-direction:column;gap:12px}
.faq-item{background:rgba(255,255,255,.035);border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-display);font-weight:600;font-size:14.5px;color:#fff}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:20px;color:var(--red-500);flex-shrink:0;transition:transform .25s var(--ease);font-weight:400}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 22px 20px;font-size:13.5px;color:var(--muted);line-height:1.7}

/* ── CTA ── */
#cta{background:linear-gradient(135deg,#1a0808 0%,var(--navy-950) 60%);padding:110px 5%;text-align:center;position:relative;overflow:hidden}
#cta::before{content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(232,52,42,.12) 0%,transparent 70%);border-radius:50%}
#cta .section-inner{position:relative;z-index:1}
#cta h2{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:18px}
#cta h2 em{font-style:normal;color:var(--red-500)}
#cta p{font-size:1.1rem;color:var(--muted);margin-bottom:40px;max-width:500px;margin-left:auto;margin-right:auto}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.cta-email-row{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:10px}
.cta-email-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:15px;color:#fff;text-decoration:none;background:rgba(255,255,255,.08);border:1.5px solid var(--hairline-strong);border-radius:50px;padding:9px 20px;transition:background .25s var(--ease),border-color .25s var(--ease)}
.cta-email-pill:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.cta-guarantee{margin-top:20px;font-size:12.5px;color:var(--muted-dark);display:flex;align-items:center;justify-content:center;gap:6px}

/* ── FOOTER ── */
footer{background:rgba(0,0,0,.3);border-top:1px solid var(--hairline);padding:40px 5% 28px}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;padding-bottom:24px;border-bottom:1px solid var(--hairline)}
.footer-tagline{font-size:12px;color:var(--muted-dark);max-width:260px;line-height:1.6;margin-top:12px}
.footer-col-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:12px}
.footer-col{display:flex;flex-direction:column;gap:2px}
.footer-col a{font-size:12.5px;color:var(--muted);text-decoration:none;padding:5px 0}
.footer-col a:hover{color:#fff}
.footer-phone{font-family:var(--font-display);font-weight:700;font-size:1rem;color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.footer-phone:hover{color:var(--red-500)}
.footer-phone svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.footer-addr{font-size:12.5px;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:7px}
.footer-addr svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.footer-bottom{max-width:1100px;margin:20px auto 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:12px;color:var(--muted-dark)}
.footer-links{display:flex;gap:20px}
.footer-links a{font-size:12px;color:var(--muted-dark);text-decoration:none}
.footer-links a:hover{color:var(--muted)}

/* ── TEXT US CHAT BUTTON (service landing pages) ── */
.chat-fab{
  position:fixed;right:24px;bottom:24px;z-index:8500;
  display:flex;align-items:center;gap:9px;
  background:var(--red-btn);color:#fff;
  padding:14px 22px;border-radius:50px;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  text-decoration:none;box-shadow:0 8px 26px var(--red-glow);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.chat-fab:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(232,52,42,.5)}
.chat-fab svg{flex-shrink:0}
@media(max-width:768px){
  .chat-fab{bottom:82px;right:14px;padding:12px 16px;font-size:13px}
}

/* ── MOBILE STICKY CONTACT BAR ── */
.mobile-contact-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:8000;background:rgba(5,16,31,0.97);border-top:1px solid var(--hairline-strong);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -4px 24px rgba(0,0,0,.4)}
.mobile-contact-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border-radius:12px;font-family:var(--font-display);font-weight:700;font-size:14px;text-decoration:none;transition:opacity .15s}
.mobile-contact-bar a:active{opacity:.75}
.mobile-contact-bar .bar-call{background:var(--red-btn);color:#fff;box-shadow:0 4px 18px var(--red-glow)}
.mobile-contact-bar .bar-email{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid var(--hairline-strong)}
.mobile-contact-bar svg{flex-shrink:0}

/* ── LEGAL PAGES ── */
.legal-wrap{max-width:760px;margin:0 auto;padding:150px 5% 100px}
.legal-wrap h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:8px;letter-spacing:-.02em}
.legal-updated{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-bottom:48px}
.legal-wrap h2{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin:40px 0 14px;letter-spacing:-.01em}
.legal-wrap p{font-size:14.5px;color:var(--muted);line-height:1.8;margin-bottom:14px}
.legal-wrap ul{margin:0 0 14px 20px;color:var(--muted);font-size:14.5px;line-height:1.8}
.legal-wrap a{color:var(--red-text);text-decoration:underline}
.legal-wrap a:hover{text-decoration:underline}

/* ── BLOG INDEX + ARTICLE ── */
.blog-hero{padding:150px 5% 40px}
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:32px}
.post-card{background:rgba(255,255,255,.035);border:1px solid var(--hairline-strong);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s var(--ease),border-color .35s var(--ease);display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.18)}
.post-featured{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:260px}
.post-featured .blog-thumb{height:260px}
.post-featured .blog-body{height:auto}
article.post{max-width:720px;margin:0 auto;padding:150px 5% 100px}
article.post .post-meta{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-bottom:18px;display:flex;gap:14px;flex-wrap:wrap}
article.post h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:24px}
article.post h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin:40px 0 16px;letter-spacing:-.01em}
article.post h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin:28px 0 12px}
article.post p{font-size:15.5px;color:rgba(255,255,255,.85);line-height:1.85;margin-bottom:18px}
article.post ul,article.post ol{margin:0 0 18px 22px;color:rgba(255,255,255,.85);font-size:15.5px;line-height:1.85}
article.post li{margin-bottom:6px}
article.post table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
article.post th,article.post td{border:1px solid var(--hairline-strong);padding:10px 14px;text-align:left}
article.post th{background:rgba(255,255,255,.05);font-family:var(--font-display);font-weight:600}
.post-callout{background:rgba(232,52,42,.08);border-left:3px solid var(--red-500);border-radius:0 10px 10px 0;padding:18px 20px;margin:24px 0}
.post-callout p{color:rgba(255,255,255,.85);margin-bottom:0}
.post-cta{background:var(--navy-700);border:1px solid var(--hairline-strong);border-radius:var(--radius);padding:32px;text-align:center;margin:40px 0}
.post-cta h2,.post-cta h3{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin-bottom:10px}
.post-cta p{color:var(--muted);margin-bottom:20px}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .how-steps{grid-template-columns:1fr 1fr}
  .reviews-grid{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
  .post-grid{grid-template-columns:1fr}
  .post-featured{grid-template-columns:1fr}
  .coverage-grid{grid-template-columns:repeat(3,1fr)}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-image-card{max-width:420px;margin:0 auto}
  .quote-layout{grid-template-columns:1fr}
  .q-summary{position:static}
}

@media(max-width:768px){
  .nav-links a:not(.nav-cta):not(.nav-phone){display:none}
  .nav-links{gap:14px}
  nav{padding:0 4%}
  #hero{padding:96px 5% 60px;text-align:center;justify-content:center}
  #hero::before{background:linear-gradient(180deg,rgba(5,16,31,.62) 0%,rgba(5,16,31,.85) 55%,rgba(5,16,31,.96) 100%)}
  .hero-left{max-width:520px}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-trust{justify-content:center}
  .trust-bar-inner{justify-content:center;gap:28px}
  .trust-divider{display:none}
  .section{padding:64px 5%}
  #quote{padding:64px 5%}
  .services-grid{grid-template-columns:1fr}
  .how-steps{grid-template-columns:1fr;gap:24px}
  .step-num::after{display:none}
  .reviews-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .coverage-grid{grid-template-columns:repeat(2,1fr)}
  .q-grid{grid-template-columns:1fr}
  .qty-btn{width:40px;height:40px;font-size:16px}
  .qty-ctrl{gap:10px}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .cta-actions{flex-direction:column;align-items:center}
  .cta-actions .btn-primary,.cta-actions .btn-secondary,.cta-actions .btn-app{width:100%;max-width:320px;justify-content:center}
  .mobile-contact-bar{display:flex}
  footer{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .cta-email-row{flex-direction:column;gap:6px}
  .cta-email-row a{width:100%;max-width:320px;justify-content:center}
  .legal-wrap,article.post{padding-top:120px}
}

@media(max-width:480px){
  .nav-phone{display:none}
  nav{height:60px}
  #hero{padding:84px 5% 40px}
  h1.hero-title{font-size:2.1rem}
  .btn-primary,.btn-secondary,.btn-app{width:100%;justify-content:center;font-size:14px;padding:14px 20px}
  .hero-actions{flex-direction:column}
  .trust-bar-inner{flex-direction:column;gap:20px;align-items:center}
  .service-card{padding:24px 20px}
  .coverage-grid{grid-template-columns:1fr 1fr}
  .coverage-wrap{padding:24px 20px}
  .q-summary{padding:18px}
  .section{padding:52px 5%}
  #quote{padding:52px 5%}
  .q-tabs{gap:4px}
  .q-tab{font-size:11px;padding:8px 6px;white-space:normal;text-align:center;line-height:1.25}
}

/* ── ACCESSIBILITY: REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .chip-dot{animation:none!important}
}

/* ── COOKIE NOTICE ────────────────────────────────────────────────────────
   Non-blocking bottom notice. Does not gate the site or cover the primary
   CTA. Default posture is implied consent (standard practice in Canada for
   analytics under PIPEDA); declining issues a Google Consent Mode v2 denial
   so the choice is actually honoured rather than cosmetic. */
.cookie-notice{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:900;
  max-width:560px;margin-left:auto;
  background:var(--navy-800);border:1px solid var(--hairline-strong);
  border-radius:var(--radius);padding:18px 20px;
  box-shadow:0 18px 44px rgba(0,0,0,.44);
  display:none;gap:14px;align-items:flex-start;
  transform:translateY(12px);opacity:0;
  transition:transform .38s var(--ease),opacity .38s var(--ease);
}
.cookie-notice.is-visible{display:flex;transform:translateY(0);opacity:1}
.cookie-notice p{
  margin:0 0 12px;font-size:13px;line-height:1.65;color:rgba(255,255,255,.85);
}
.cookie-notice a{color:var(--red-text);text-decoration:underline}
.cookie-notice a:hover{text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-btn{
  font-family:var(--font-display);font-size:12.5px;font-weight:600;
  padding:9px 18px;border-radius:50px;cursor:pointer;border:1px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.cookie-btn--accept{background:var(--red-btn);color:#fff}
.cookie-btn--accept:hover{background:var(--red-700)}
.cookie-btn--decline{background:transparent;color:rgba(255,255,255,.85);border-color:var(--hairline-strong)}
.cookie-btn--decline:hover{border-color:rgba(255,255,255,.28);color:#fff}
@media(max-width:768px){
  /* sit above the sticky mobile contact bar so it never covers the CTA */
  .cookie-notice{bottom:74px;left:12px;right:12px;padding:16px}
}

/* ── LOADING / PENDING STATES ─────────────────────────────────────────────
   Booking links hand off to Jobber in a new tab, which has a visible delay.
   Without feedback users re-click and submit duplicate requests. */
.is-loading{position:relative;pointer-events:none;opacity:.82}
.is-loading .btn-label{visibility:hidden}
.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;
  width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,.32);border-top-color:#fff;
  border-radius:50%;animation:tsad-spin .62s linear infinite;
}
@keyframes tsad-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .is-loading::after{animation-duration:1.6s}
  .cookie-notice{transition:none}
}

/* ============================================================
   HOMEPAGE REBUILD 2026-09-29 — hero mark, cities ticker,
   "six ways" list, grouped quote list, service-area map
   ============================================================ */

/* --- Hero mark (doctor + sonar pulse) ---
   Desktop/tablet: the doctor sits in-flow on the LEFT with the headline beside it, so the extra
   width on big screens goes to the house photo on the right. The dark overlay holds until the
   text column ends (--hero-text-end), then eases off so the lit windows show through. */
#hero.hero-home{--hero-text-end:calc(5% + min(30vw,440px) + clamp(36px,5vw,96px) + 600px)}
@media (min-width:769px){
  #hero.hero-home{gap:clamp(36px,5vw,96px)}
  #hero.hero-home::before{background:linear-gradient(90deg,rgba(5,16,31,.9) 0,rgba(5,16,31,.86) var(--hero-text-end),rgba(5,16,31,.38) calc(var(--hero-text-end) + 220px),rgba(5,16,31,.2) 100%)}
}
.hero-mark{position:relative;flex:0 0 min(30vw,440px);width:min(30vw,440px);z-index:1;pointer-events:none;will-change:transform;transition:transform .35s var(--ease)}
.hero-mark img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 40px rgba(5,16,31,.6));animation:hero-breathe 5.5s var(--ease) infinite}
/* Sonar is centred ON the alarm's black centre dot, measured in doctor-mark.webp at 73.37% x 18.77% of the image.
   It rides the img's breathe scale (about the img centre) so it stays locked on the alarm. */
.sonar{position:absolute;left:73.37%;top:18.77%;width:18%;aspect-ratio:1;pointer-events:none;transform:translate(-50%,-50%) scale(1);animation:sonar-follow 5.5s var(--ease) infinite}
@keyframes sonar-follow{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-46.1%,-56.59%) scale(1.03)}}
.sonar span{position:absolute;inset:0;border-radius:999px;border:2px solid var(--red-500);opacity:0;animation:sonar 2.8s cubic-bezier(.16,1,.3,1) infinite}
.sonar span:nth-child(2){animation-delay:.9s}
.sonar span:nth-child(3){animation-delay:1.8s}
@keyframes sonar{0%{transform:scale(.45);opacity:.85}100%{transform:scale(2.15);opacity:0}}
@keyframes hero-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@media (min-width:769px) and (max-width:1000px){
  #hero.hero-home{--hero-text-end:calc(5% + min(26vw,260px) + clamp(36px,5vw,96px) + 600px)}
  .hero-mark{flex-basis:min(26vw,260px);width:min(26vw,260px)}
}
/* phone: the hero stacks and centres, so the mark sits above the badges instead of over them */
@media (max-width:768px){
  #hero.hero-home{flex-direction:column}
  .hero-mark{flex:none;width:120px;margin:0 auto 16px;z-index:2}
  .hero-mark img{filter:drop-shadow(0 12px 22px rgba(5,16,31,.6))}
}

/* --- Cities ticker --- */
.ticker{overflow:hidden;background:var(--navy-950);border-bottom:1px solid var(--hairline);padding:15px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 48s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;padding-right:2.25rem;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap}
.ticker-dot{color:var(--red-500);font-size:.55em;margin-left:2.25rem}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Six ways a house gets quiet: red-accent card grid (2026-10-08) --- */
.ways-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ways-head .section-sub{margin-bottom:0}
.ways-head .section-title em{font-style:normal;color:var(--red-500)}
.ways-cta{white-space:nowrap}
.ways{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ways li{display:flex}
.way{position:relative;display:flex;flex-direction:column;width:100%;padding:30px 26px 26px;border:1px solid rgba(232,52,42,.24);border-radius:18px;background:linear-gradient(160deg,rgba(232,52,42,.14) 0%,rgba(232,52,42,.03) 42%,rgba(255,255,255,.02) 100%);text-decoration:none;color:inherit;overflow:hidden;transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.way::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red-500),rgba(232,52,42,.15))}
.way:hover{transform:translateY(-5px);border-color:rgba(232,52,42,.6);box-shadow:0 20px 50px rgba(232,52,42,.22),0 0 0 1px rgba(232,52,42,.25)}
.way-n{position:absolute;top:14px;right:20px;font-family:var(--font-display);font-weight:800;font-size:3.6rem;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(232,52,42,.7);transition:color .45s var(--ease),-webkit-text-stroke-color .45s var(--ease)}
.way:hover .way-n{color:var(--red-500);-webkit-text-stroke-color:var(--red-500)}
.way-body{display:flex;flex-direction:column;flex:1}
.way-title{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.25rem,1.9vw,1.5rem);letter-spacing:.01em;text-transform:uppercase;color:#fff;margin:34px 0 0;padding-right:70px}
.way-title::after{content:'';display:block;width:38px;height:3px;border-radius:2px;background:var(--red-500);margin:14px 0 16px;transition:width .45s var(--ease)}
.way:hover .way-title::after{width:72px}
.way-text{display:block;color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.65;flex:1}
.way-price{align-self:flex-start;margin-top:22px;font-family:var(--font-mono);font-weight:600;font-size:13.5px;color:#fff;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;background:var(--red-btn);padding:9px 16px;border-radius:999px;box-shadow:0 6px 22px var(--red-glow)}
.way-arrow{color:#fff;transition:transform .5s var(--ease-spring)}
.way:hover .way-arrow{transform:translateX(5px)}
@media (max-width:1000px){.ways{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .ways{grid-template-columns:1fr;margin-top:28px;gap:14px}
  .way{padding:24px 20px 22px}
  .way-n{font-size:3rem}
  .way-title{margin-top:26px}
}


/* --- Quote builder: grouped list --- */
#quote.quote-v2{background:linear-gradient(160deg,#0f2c52 0%,#0b1f3a 55%,#0a1830 100%)}
/* Each alarm type is a <details> dropdown: closed it shows the type, what it is for, options + lowest price,
   and a red "N added" badge (set by main.js) so a closed group never hides what is in the quote. */
.ql-group{margin-bottom:12px;border:1px solid var(--hairline-strong);border-radius:16px;background:rgba(255,255,255,.025);overflow:hidden;transition:border-color .3s var(--ease),background .3s var(--ease);interpolate-size:allow-keywords}
.ql-group[open]{background:rgba(255,255,255,.035)}
.ql-group.has-sel{border-color:rgba(232,52,42,.45)}
.ql-group-head{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:18px 18px 18px 20px;cursor:pointer;list-style:none;user-select:none;transition:background .25s var(--ease)}
.ql-group-head::-webkit-details-marker{display:none}
.ql-group-head:hover{background:rgba(255,255,255,.04)}
.ql-group-head:focus-visible{outline:2px solid var(--red-500);outline-offset:-2px;border-radius:16px}
.ql-group-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.ql-group-title{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:#fff;text-transform:uppercase;letter-spacing:.09em}
.ql-group-note{font-size:12.5px;color:var(--muted);line-height:1.45}
.ql-group-meta{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ql-group-from{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.85);white-space:nowrap}
.ql-group-count{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--red-500);color:#fff;white-space:nowrap}
.ql-group-count[hidden]{display:none}
.ql-group-chev{width:30px;height:30px;padding:6px;border-radius:50%;border:1px solid var(--hairline-strong);fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease),background .25s var(--ease)}
.ql-group[open] .ql-group-chev{transform:rotate(180deg);background:rgba(255,255,255,.06)}
.ql-group-body{border-top:1px solid var(--hairline-strong);padding-bottom:14px}
.ql-group-body > .ql-row:last-child{border-bottom:0}
.ql-group::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.ql-group[open]::details-content{block-size:auto}
.ql-row.q-card{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;padding:16px 14px 16px 16px;border:0;border-bottom:1px solid var(--hairline);border-radius:0;background:transparent;cursor:default;position:relative;transition:background .4s var(--ease)}
.ql-row.q-card:hover{transform:none;background:rgba(255,255,255,.035);border-color:var(--hairline)}
.ql-row.q-card.sel{background:rgba(232,52,42,.09);border-color:var(--hairline)}
.ql-row.q-card.sel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red-500);border-radius:0 2px 2px 0}
.ql-name{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:#fff;display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.3}
.ql-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--hairline-strong);color:rgba(255,255,255,.85)}
.ql-tag--hw{border-color:rgba(200,151,58,.55);color:var(--gold-500)}
.ql-tag--bat{border-color:rgba(0,224,96,.4);color:var(--status-ok)}
.ql-detail{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.ql-price{font-family:var(--font-mono);font-weight:600;font-size:16px;color:#fff;white-space:nowrap;text-align:right;min-width:88px}
.ql-price small{display:block;font-size:10.5px;color:var(--muted);font-weight:500;letter-spacing:.02em}
.ql-row .qty-btn{width:34px;height:34px;border-radius:50%;font-size:17px}
.ql-row .qty-num{font-size:15px;min-width:22px}
.ql .q-hint{margin:12px 6px 0}
.ql-group-body .q-hint{margin:12px 18px 0 20px}
.ql-summary-kicker{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red-500)}
.ql-summary .q-total-num{font-size:clamp(2.5rem,4vw,3.3rem);line-height:1;color:#fff;margin:8px 0 6px;letter-spacing:-.02em}
.ql-total-note{font-size:11.5px;color:rgba(255,255,255,.75);line-height:1.5;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--hairline-strong)}
.ql-summary .q-line{font-size:13px;padding:9px 0}
.ql-summary .q-items{margin-bottom:18px}
@media (max-width:600px){
  .ql-row.q-card{grid-template-columns:1fr auto;gap:10px 14px;padding:14px 8px 14px 12px}
  .ql-price{grid-column:1;text-align:left;min-width:0;font-size:15px}
  .ql-row .qty-ctrl{grid-column:2;grid-row:1/3;justify-self:end}
  .ql-group-head{grid-template-columns:1fr auto;gap:8px 12px;padding:16px 14px 16px 16px}
  .ql-group-meta{grid-column:1;grid-row:2;justify-content:flex-start}
  .ql-group-chev{grid-column:2;grid-row:1/3}
}

/* --- Service-area map --- */
.area-map{margin-top:44px}
.map-stage{perspective:1400px;overflow:hidden;border-radius:24px;border:1px solid rgba(215,227,239,.22);background:#071526;padding:28px 16px 52px;position:relative}
.map-board{transform:rotateX(12deg) rotateZ(-1.6deg) scale(.86);transform-origin:50% 50%;filter:drop-shadow(0 22px 16px rgba(0,0,0,.4))}
.map-board svg{display:block;width:100%;height:auto;overflow:visible}
.map-wave{fill:none;stroke:rgba(215,227,239,.18);stroke-width:1.2;pointer-events:none}
.map-side{fill:#050e1c;stroke:none;pointer-events:none}
.map-block{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .2s cubic-bezier(.16,1,.3,1);outline:none}
.map-block.is-selected{transform:translateY(-14px)}
.map-block.is-selected .map-side{fill:var(--red-700)}
.map-fraser,.map-inlet{fill:none;stroke:#dce7f1;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.map-fraser-north{stroke-width:2.3;stroke:rgba(215,227,239,.62)}
.map-plate{pointer-events:none}
.map-plate rect{fill:#071526;stroke:rgba(215,227,239,.7);stroke-width:1.25}
.map-plate-city,.map-plate-price{font-family:var(--font-display);font-weight:700}
.map-plate-city{fill:#f4f7fb;font-size:32px;letter-spacing:.03em;text-transform:uppercase}
.map-plate-meta{fill:#d7e3ef;font-family:var(--font-body);font-size:20px}
.map-plate-price{fill:#ff7a72;font-size:26px}
.map-runner{pointer-events:none}
.map-van-shadow{fill:#071526;opacity:.35}
.map-van-body{fill:#f4f7fb;stroke:#0c2340;stroke-width:1;stroke-linejoin:round}
.map-van-glass,.map-van-stripe{fill:#0c2340}
.map-van-red,.map-van-signal{fill:var(--red-500)}
.map-van-alarm{fill:#f4f7fb;stroke:#0c2340;stroke-width:.6}
.map-van-wheel{fill:#071526}
.map-van-hub{fill:#d7e3ef}
.map-van-lamp{fill:#ff7a72}
.map-context{fill:url(#land-context);stroke:rgba(215,227,239,.16);stroke-width:1;pointer-events:none}
.map-city{fill:url(#land-face);stroke:rgba(215,227,239,.45);stroke-width:1.15}
.map-block.is-hot .map-city{fill:url(#land-hot)}
.map-block.is-selected .map-city{fill:url(#land-signal);stroke:#ff7a72}
.map-water,.map-base-label{fill:rgba(215,227,239,.55);font-family:var(--font-body);font-size:13px;letter-spacing:.18em;text-transform:uppercase;pointer-events:none}
.map-compass{pointer-events:none}
.map-compass-face{fill:rgba(7,21,38,.88);stroke:rgba(215,227,239,.65);stroke-width:1.4}
.map-compass-ring{fill:none;stroke:rgba(215,227,239,.35);stroke-width:1}
.map-compass-tick,.map-compass-tick-major{stroke:#d7e3ef;stroke-linecap:round}
.map-compass-tick{stroke-width:1;opacity:.55}
.map-compass-tick-major{stroke-width:1.6}
.map-compass-north{fill:var(--red-500)}
.map-compass-south,.map-compass-side{fill:#d7e3ef}
.map-compass-cap{fill:#f4f7fb;stroke:#0c2340;stroke-width:1}
.map-compass-n,.map-compass-dir{font-family:var(--font-display);font-weight:700}
.map-compass-n{fill:var(--red-500);font-size:16px}
.map-compass-dir{fill:#d7e3ef;font-size:11px}
.map-label{fill:#f4f7fb;stroke:#071526;stroke-width:5px;paint-order:stroke fill;font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
.map-route{fill:none;stroke:#ff7a72;stroke-width:1.6;stroke-dasharray:5 7;stroke-linecap:round;pointer-events:none;animation:map-dash 1.1s linear infinite}
.map-pulse{pointer-events:none}
.map-pulse circle{fill:none;stroke:#ff7a72;transform-box:fill-box;transform-origin:center;animation:sonar 2.4s cubic-bezier(.16,1,.3,1) infinite}
.map-pulse circle:nth-child(2){animation-delay:.8s}
.map-pulse circle:nth-child(3){animation-delay:1.6s}
.map-base{fill:var(--red-500);stroke:#f4f7fb;stroke-width:1.5;pointer-events:none}
@keyframes map-dash{to{stroke-dashoffset:-24}}
.map-cities{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
.map-chip{font-family:var(--font-display);font-weight:600;font-size:13px;color:rgba(255,255,255,.8);text-decoration:none;padding:9px 14px;border-radius:999px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease-spring)}
.map-chip:hover{color:#fff;border-color:rgba(232,52,42,.5);background:rgba(232,52,42,.08);transform:translateY(-1px)}
.map-chip[aria-current="true"]{color:#fff;border-color:var(--red-500);background:rgba(232,52,42,.14);box-shadow:inset 0 -2px 0 var(--red-500)}
.map-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;margin-top:28px;text-align:center}
.map-cta-text{margin:0;font-size:1.05rem;color:var(--muted)}
.map-cta-text a{color:#fff;text-decoration:none;border-bottom:1px solid var(--red-500)}
@media (max-width:768px){
  .area-map{margin-top:28px}
  .map-stage{padding:10px 4px 18px;border-radius:16px}
  .map-board{transform:rotateX(8deg) rotateZ(-1deg) scale(.98)}
  .map-chip{font-size:12px;padding:8px 11px}
  .map-cta .btn-primary{width:100%;justify-content:center}
}

/* ── NAV FIT 2026-09-29: keep the desktop nav on one line between tablet and laptop widths ── */
@media (min-width:769px) and (max-width:1280px){
  .nav-links{gap:20px}
  .nav-links a[href^="mailto:"]{display:none}
}
@media (min-width:769px) and (max-width:1100px){
  .nav-links a:not(.nav-cta):not(.nav-phone):not(.nav-quote-btn){display:none}
}

/* ── Whole-home pricing (quote builder) ── */
.q-packs{margin-bottom:16px;padding:18px 18px 16px 20px;border:1px solid rgba(232,52,42,.35);border-radius:16px;background:linear-gradient(135deg,rgba(232,52,42,.08),rgba(255,255,255,.02))}
.q-packs-title{display:block;font-family:var(--font-display);font-weight:700;font-size:14.5px;color:#fff;text-transform:uppercase;letter-spacing:.09em;margin-bottom:4px}
.q-packs-sub{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.q-packs-sub strong{color:#fff;font-weight:600}
.q-packs-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.q-pack{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:14px 16px;border-radius:12px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);color:#fff;cursor:pointer;font:inherit;transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.q-pack:hover{border-color:var(--red-500);background:rgba(232,52,42,.07);transform:translateY(-1px)}
.q-pack:focus-visible{outline:2px solid var(--red-500);outline-offset:2px}
.q-pack-name{font-family:var(--font-display);font-weight:700;font-size:13.5px}
.q-pack-detail{font-size:12px;color:var(--muted);line-height:1.4}
.q-pack-price{font-family:var(--font-mono);font-weight:600;font-size:15px;color:#fff;margin-top:6px}
.q-pack-price small{font-size:10.5px;font-weight:400;color:var(--muted);margin-left:4px}
.q-pack-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.q-pack-brand{font-family:var(--font-display);font-weight:700;font-size:12px;color:#fff;text-transform:uppercase;letter-spacing:.08em}
.q-pack-note{margin:0;font-size:11.5px;color:var(--muted);line-height:1.45}
.q-pack-col .q-pack{flex:1}
.q-pack.active{border-color:var(--red-500);background:rgba(232,52,42,.1)}
.q-packs-inc{display:block;margin-top:12px;font-size:11.5px;color:var(--muted);line-height:1.5}
.q-disc{margin:10px 0 4px;padding:9px 12px;border:1px dashed rgba(255,196,0,.45);border-radius:10px;font-size:12px;line-height:1.45;color:#f5d36a}
.q-line--save .q-line-lbl{color:rgba(255,255,255,.8)}
.q-line--save{gap:12px}
.q-line--save .q-line-val{color:#5fd38d;white-space:nowrap}
.q-nudge{font-size:12px;color:rgba(255,255,255,.85);line-height:1.5;padding:10px 12px;margin-top:10px;border:1px dashed rgba(232,52,42,.45);border-radius:10px}
@media (max-width:480px){
  .q-packs{padding:16px 14px}
  .q-packs-row{grid-template-columns:1fr}
}

/* ==========================================================================
   2026-10-08: glowing booking buttons, gold hero trust line, quote button
   ========================================================================== */
/* Booking buttons (nav "Book Now" + any primary button that opens Jobber) breathe a red glow,
   and turn "available" green once pressed. */
@keyframes book-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(232,52,42,.55),0 8px 28px rgba(232,52,42,.45)}
  50%{box-shadow:0 0 0 8px rgba(232,52,42,0),0 10px 44px rgba(232,52,42,.75)}
}
.nav-cta,a.btn-primary[href*="getjobber.com"]{animation:book-glow 2.2s ease-in-out infinite;transition:transform .25s var(--ease),background .2s,color .2s}
.nav-cta:active,a.btn-primary[href*="getjobber.com"]:active,
.nav-cta.is-pressed,a.btn-primary[href*="getjobber.com"].is-pressed{
  background:var(--status-ok);color:var(--navy-950);animation:none;
  box-shadow:0 0 0 4px rgba(0,224,96,.18),0 8px 32px rgba(0,224,96,.45);
}
.nav-cta.is-pressed svg,a.btn-primary[href*="getjobber.com"].is-pressed svg,
a.btn-primary[href*="getjobber.com"]:active svg{stroke:var(--navy-950)}
.is-pressed.is-loading::after{border-color:rgba(5,16,31,.3);border-top-color:var(--navy-950)}

/* Hero trust line in gold, matching the stars */
.hero-trust .trust-line{color:var(--status-fault)}

/* Red highlight for a word or number inside a heading */
.t-red{color:var(--red-500)}

/* "Build Your Quote" nav button: red outline + icon so it reads as the second action */
.nav-quote-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(232,52,42,.12);color:#fff;border:1.5px solid var(--red-500);
  box-shadow:0 0 18px rgba(232,52,42,.25);
}
.nav-quote-btn::before{
  content:'';width:14px;height:14px;flex-shrink:0;background:var(--red-500);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='11' x2='8' y2='11'/%3E%3Cline x1='12' y1='11' x2='12' y2='11'/%3E%3Cline x1='16' y1='11' x2='16' y2='11'/%3E%3Cline x1='8' y1='15' x2='8' y2='15'/%3E%3Cline x1='12' y1='15' x2='12' y2='15'/%3E%3Cline x1='16' y1='15' x2='16' y2='18'/%3E%3Cline x1='8' y1='18' x2='12' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='11' x2='8' y2='11'/%3E%3Cline x1='12' y1='11' x2='12' y2='11'/%3E%3Cline x1='16' y1='11' x2='16' y2='11'/%3E%3Cline x1='8' y1='15' x2='8' y2='15'/%3E%3Cline x1='12' y1='15' x2='12' y2='15'/%3E%3Cline x1='16' y1='15' x2='16' y2='18'/%3E%3Cline x1='8' y1='18' x2='12' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background .25s var(--ease);
}
.nav-links a.nav-quote-btn{color:#fff}
.nav-quote-btn:hover{background:var(--red-btn);border-color:var(--red-btn);box-shadow:0 6px 24px var(--red-glow)}
.nav-quote-btn:hover::before{background:#fff}

/* Upsell modal: keep the price clear of the round checkbox in the corner */
.upsell-card{padding-right:46px}

/* "See the prices" button: solid green with a pulsing ring (prices are the #1 thing visitors want) */
@keyframes price-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,224,96,.6),0 8px 28px rgba(0,224,96,.35)}
  70%{box-shadow:0 0 0 14px rgba(0,224,96,0),0 8px 36px rgba(0,224,96,.55)}
  100%{box-shadow:0 0 0 0 rgba(0,224,96,0),0 8px 28px rgba(0,224,96,.35)}
}
@keyframes price-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
a.ways-cta{background:var(--status-ok);color:var(--navy-950);border-color:var(--status-ok);font-weight:800;animation:price-pulse 1.8s ease-out infinite}
a.ways-cta .arrow{display:inline-block;animation:price-arrow 1.8s ease-in-out infinite}
a.ways-cta:hover{background:#3dff8a;border-color:#3dff8a;color:var(--navy-950);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){a.ways-cta,a.ways-cta .arrow{animation:none}}
/* Nav "Book Now": white text (the generic .nav-links a muted colour was winning) */
.nav-links a.nav-cta,.nav-links a.nav-cta:hover{color:#fff}
.nav-links a.nav-cta.is-pressed,.nav-links a.nav-cta:active{color:var(--navy-950)}

/* ==========================================================================
   BLOG v2 (2026-10-20): reading progress, auto table of contents, section
   numbers, scroll reveals, step timelines, sign cards, price cards with a
   brand toggle, alarm-age checker, author card. Most of it is switched on by
   main.js for any article.post, so every post gets it without new markup.
   ========================================================================== */
main:has(article.post){overflow-x:clip}
.read-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--red-700),var(--red-500) 60%,var(--red-text));box-shadow:0 0 14px var(--red-glow);z-index:8500;pointer-events:none}
article.post{position:relative;counter-reset:sec}
article.post::before{content:'';position:absolute;z-index:-1;top:40px;left:50%;width:min(1000px,140vw);height:620px;transform:translateX(-50%);background:radial-gradient(closest-side at 30% 40%,rgba(232,52,42,.16),transparent 70%),radial-gradient(closest-side at 75% 55%,rgba(19,40,72,.9),transparent 75%);filter:blur(10px);pointer-events:none;animation:post-glow 16s ease-in-out infinite alternate}
@keyframes post-glow{0%{transform:translateX(-52%) scale(1)}100%{transform:translateX(-47%) scale(1.08)}}
@keyframes post-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
article.post>.section-tag,article.post>h1,article.post>.post-meta{animation:post-rise .9s var(--ease) both}
article.post>h1{animation-delay:.08s}
article.post>.post-meta{animation-delay:.16s}
article.post .post-meta span{display:inline-flex;align-items:center;gap:8px}
article.post .post-meta span+span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--red-500);margin-right:6px}
article.post a:not([class]){color:var(--red-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,107,97,.45);transition:text-decoration-color .2s,color .2s}
article.post a:not([class]):hover{color:#fff;text-decoration-color:var(--red-500)}
article.post ul li::marker{color:var(--red-500)}
article.post ol li::marker{color:var(--red-text);font-family:var(--font-mono);font-weight:600}
article.post strong{color:#fff}

/* hero image */
.post-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hairline-strong);margin:0 0 30px;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);animation:post-rise 1s var(--ease) .22s both;isolation:isolate}
.post-hero img{width:100%;height:auto;max-height:620px;object-fit:cover;display:block;animation:hero-settle 2.4s var(--ease) both}
.post-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-120%);animation:hero-shine 1.6s var(--ease) .9s forwards;pointer-events:none}
.post-hero figcaption{position:absolute;left:14px;bottom:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:rgba(5,16,31,.78);backdrop-filter:blur(8px);border:1px solid var(--hairline-strong);padding:6px 10px;border-radius:999px;color:var(--muted)}
@keyframes hero-settle{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes hero-shine{to{transform:translateX(120%)}}

/* quick answer */
.post-answer{position:relative;border-radius:var(--radius);padding:22px 24px 20px;margin:0 0 28px;background:linear-gradient(var(--navy-800),var(--navy-800)) padding-box,linear-gradient(135deg,var(--red-500),rgba(255,255,255,.12) 45%,var(--red-700)) border-box;border:1px solid transparent}
.post-answer-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red-text);margin-bottom:8px}
.post-answer-label::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--red-500);animation:pulse-dot 2s infinite}
article.post .post-answer p{margin-bottom:0;font-size:16px;color:#fff}

/* table of contents */
.post-toc{background:rgba(255,255,255,.03);border:1px solid var(--hairline-strong);border-radius:var(--radius);margin:8px 0 34px;overflow:hidden}
.post-toc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--red-500);border-bottom:2px solid var(--red-500);transform:rotate(45deg);transition:transform .25s var(--ease)}
.post-toc[open] summary::after{transform:rotate(225deg)}
article.post .post-toc ol{list-style:none;margin:0;padding:0 12px 14px;counter-reset:toc}
article.post .post-toc li{counter-increment:toc;margin:0}
.post-toc a,.toc-rail a{display:flex;gap:12px;padding:8px 10px;border-radius:8px;color:rgba(255,255,255,.78);text-decoration:none;font-size:14px;line-height:1.45;transition:background .2s,color .2s}
.post-toc a::before,.toc-rail a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-mono);font-size:11px;color:var(--red-text);padding-top:2px;flex-shrink:0}
.post-toc a:hover,.toc-rail a:hover{background:rgba(255,255,255,.05);color:#fff}
.toc-rail{position:fixed;top:130px;left:max(16px,calc(50% - 360px - 270px));width:230px;max-height:calc(100vh - 170px);overflow:auto;opacity:0;transform:translateX(-12px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);z-index:50}
.toc-rail.show{opacity:1;transform:none;pointer-events:auto}
.toc-rail-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dim);margin:0 0 8px 10px}
.toc-rail ol{list-style:none;margin:0;padding:0;counter-reset:toc;border-left:1px solid var(--hairline-strong)}
.toc-rail li{counter-increment:toc;margin:0}
.toc-rail a{font-size:13px;padding:7px 10px;border-radius:0 8px 8px 0;margin-left:-1px;border-left:2px solid transparent}
.toc-rail a.active{color:#fff;border-left-color:var(--red-500);background:rgba(232,52,42,.08)}
@media (max-width:1299px){.toc-rail{display:none}}

/* numbered section headings */
article.post h2[data-sec]{counter-increment:sec;scroll-margin-top:100px;display:flex;flex-direction:column;gap:6px}
article.post h2[data-sec]::before{content:counter(sec,decimal-leading-zero);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--red-text);display:flex;align-items:center;gap:10px}
article.post h2[data-sec]::after{content:'';display:block;height:2px;width:48px;background:linear-gradient(90deg,var(--red-500),transparent);margin-top:4px;transform-origin:0 50%;transform:scaleX(0);transition:transform .9s var(--ease) .2s}
article.post h2[data-sec].visible::after,article.post h2[data-sec].no-reveal::after{transform:scaleX(1)}
article.post h2[id]{scroll-margin-top:100px}

/* reveal for post blocks (main.js adds .post-reveal below the fold) */
.post-reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.post-reveal.visible{opacity:1;transform:none}

/* callouts */
.post-callout{position:relative;background:linear-gradient(135deg,rgba(232,52,42,.12),rgba(232,52,42,.03));border:1px solid rgba(232,52,42,.22);border-left:3px solid var(--red-500);padding:20px 22px 20px 58px}
.post-callout::before{content:'!';position:absolute;left:18px;top:19px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--red-500);color:#fff;font-family:var(--font-display);font-weight:800;font-size:14px;box-shadow:0 0 0 5px rgba(232,52,42,.15)}

/* tables */
.table-wrap{overflow-x:auto;margin:24px 0;border-radius:var(--radius-sm);border:1px solid var(--hairline-strong);-webkit-overflow-scrolling:touch}
article.post .table-wrap table{margin:0;min-width:520px}
article.post .table-wrap th,article.post .table-wrap td{border:0;border-bottom:1px solid var(--hairline)}
article.post .table-wrap tr:last-child td{border-bottom:0}
article.post .table-wrap tr:nth-child(even) td{background:rgba(255,255,255,.02)}
article.post .table-wrap tr:hover td{background:rgba(232,52,42,.06)}
article.post .table-wrap th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* step timeline: <ol class="steps"> */
article.post ol.steps{list-style:none;margin:28px 0;padding:0;counter-reset:step;position:relative}
article.post ol.steps::before{content:'';position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--red-500),rgba(232,52,42,.1));transform-origin:50% 0;transform:scaleY(0);transition:transform 1.6s var(--ease)}
article.post ol.steps.visible::before,article.post ol.steps.no-reveal::before{transform:scaleY(1)}
article.post ol.steps>li{counter-increment:step;position:relative;padding:4px 0 22px 60px;margin:0}
article.post ol.steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--navy-800);border:2px solid var(--red-500);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;box-shadow:0 0 0 6px var(--navy-950)}
article.post ol.steps>li .step-time{display:inline-block;margin-left:8px;font-family:var(--font-mono);font-size:11px;color:var(--muted-dim);letter-spacing:.04em}
article.post ol.steps.post-reveal>li{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
article.post ol.steps.visible>li{opacity:1;transform:none}
article.post ol.steps.visible>li:nth-child(2){transition-delay:.12s}
article.post ol.steps.visible>li:nth-child(3){transition-delay:.24s}
article.post ol.steps.visible>li:nth-child(4){transition-delay:.36s}
article.post ol.steps.visible>li:nth-child(5){transition-delay:.48s}
article.post ol.steps.visible>li:nth-child(6){transition-delay:.6s}

/* sign cards: <div class="sign-grid"><div class="sign-card">… */
.sign-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0 28px}
.sign-card{position:relative;background:rgba(255,255,255,.035);border:1px solid var(--hairline-strong);border-radius:var(--radius);padding:20px 20px 18px;transition:transform .35s var(--ease),border-color .35s,background .35s;overflow:hidden}
.sign-card:hover{transform:translateY(-4px);border-color:rgba(232,52,42,.4);background:rgba(232,52,42,.05)}
.sign-card .sign-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(232,52,42,.12);color:var(--red-text);margin-bottom:12px}
.sign-card .sign-ico svg{width:20px;height:20px}
.sign-card h3{font-family:var(--font-display);font-size:1rem!important;margin:0 0 6px!important}
article.post .sign-card p{font-size:14px;line-height:1.65;margin:0;color:var(--muted)}
.sign-grid.post-reveal .sign-card{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .35s,background .35s}
.sign-grid.visible .sign-card{opacity:1;transform:none}
.sign-grid.visible .sign-card:nth-child(2){transition-delay:.08s}
.sign-grid.visible .sign-card:nth-child(3){transition-delay:.16s}
.sign-grid.visible .sign-card:nth-child(4){transition-delay:.24s}
.sign-grid.visible .sign-card:nth-child(5){transition-delay:.32s}
.sign-grid.visible .sign-card:nth-child(6){transition-delay:.4s}

/* price cards with brand toggle */
.brand-toggle{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--hairline-strong);margin:8px 0 18px;position:relative}
.brand-toggle button{position:relative;z-index:1;border:0;background:none;color:var(--muted);font:600 13px var(--font-display);padding:9px 18px;border-radius:999px;cursor:pointer;transition:color .25s}
.brand-toggle button[aria-pressed="true"]{color:#fff}
.brand-toggle .bt-pill{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;border-radius:999px;background:var(--red-btn);box-shadow:0 6px 20px rgba(232,52,42,.35);transition:transform .4s var(--ease-spring),width .4s var(--ease)}
.price-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 20px}
.price-card{position:relative;background:rgba(255,255,255,.035);border:1px solid var(--hairline-strong);border-radius:var(--radius);padding:20px;transition:transform .35s var(--ease),border-color .35s}
.price-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22)}
.price-card.featured{border-color:rgba(232,52,42,.5);background:linear-gradient(160deg,rgba(232,52,42,.14),rgba(255,255,255,.02))}
.price-card .pc-badge{position:absolute;top:14px;right:14px;font:600 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--red-btn);color:#fff;padding:4px 8px;border-radius:999px}
.price-card .pc-home{font:600 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red-text)}
.price-card .pc-what{font-size:14px;color:var(--muted);margin:4px 0 14px;min-height:2.6em}
.price-card .pc-price{font:800 2rem/1 var(--font-display);letter-spacing:-.02em;color:#fff;display:block}
.price-card .pc-price small{font:500 12px var(--font-body);color:var(--muted-dim);letter-spacing:0;margin-left:4px}
.price-card [data-brand]{display:none}
.price-cards[data-show="kidde"] [data-brand="kidde"],.price-cards[data-show="brk"] [data-brand="brk"]{display:block;animation:price-swap .45s var(--ease)}
@keyframes price-swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.price-note{font-size:13px!important;color:var(--muted-dim)!important}

/* alarm age checker */
.age-check{position:relative;margin:30px 0;padding:26px;border-radius:var(--radius-lg);background:radial-gradient(120% 140% at 0% 0%,rgba(232,52,42,.16),transparent 55%),var(--navy-800);border:1px solid var(--hairline-strong);overflow:hidden}
.age-check h3{font-family:var(--font-display);font-size:1.2rem!important;margin:0 0 6px!important}
article.post .age-check p{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.age-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.age-row label{font-size:14px;color:var(--muted)}
.age-row input{width:150px;padding:12px 14px;border-radius:10px;border:1px solid var(--hairline-strong);background:rgba(5,16,31,.7);color:#fff;font:600 18px var(--font-mono);letter-spacing:.02em}
.age-row input:focus{outline:2px solid var(--red-500);outline-offset:2px}
.age-meter{height:10px;border-radius:999px;background:rgba(255,255,255,.08);margin:20px 0 12px;overflow:hidden}
.age-meter span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--status-ok),var(--status-fault) 70%,var(--red-500));transition:width 1s var(--ease)}
.age-result{min-height:1.6em;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:#fff}
article.post .age-result.ok{color:var(--status-ok)}article.post .age-result.soon{color:var(--status-fault)}article.post .age-result.due{color:var(--red-text)}
.age-result a{margin-left:6px}

/* CTA */
.post-cta{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(var(--navy-700),var(--navy-800)) padding-box,linear-gradient(var(--cta-a,120deg),rgba(232,52,42,.7),rgba(255,255,255,.08) 40%,rgba(232,52,42,.5)) border-box;border:1px solid transparent}
.post-cta::before{content:'';position:absolute;z-index:-1;width:340px;height:340px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(closest-side,rgba(232,52,42,.32),transparent);animation:cta-float 9s ease-in-out infinite alternate}
@keyframes cta-float{to{transform:translate(-60px,50px)}}

/* author card */
.post-author{display:flex;gap:18px;align-items:center;margin:40px 0;padding:20px;border-radius:var(--radius);background:rgba(255,255,255,.035);border:1px solid var(--hairline-strong)}
.post-author img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid var(--red-500);flex-shrink:0;box-shadow:0 0 0 5px rgba(232,52,42,.12)}
.post-author .pa-name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff}
.post-author .pa-role{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red-text);margin:2px 0 6px}
article.post .post-author p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}

/* FAQ inside posts */
article.post .faq-item{margin-bottom:10px;transition:border-color .25s,background .25s}
article.post .faq-item[open]{border-color:rgba(232,52,42,.35);background:rgba(232,52,42,.04)}
article.post .faq-item[open] .faq-a{animation:faq-open .4s var(--ease)}
@keyframes faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
article.post .faq-item .faq-a{font-size:14.5px}

/* related cards and back to top */
article.post .post-card .blog-body{padding:20px}
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid var(--hairline-strong);background:rgba(11,29,53,.92);backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),border-color .2s;z-index:7900}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--red-500)}
.to-top svg{width:18px;height:18px}
.post-share{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 32px;font-family:var(--font-mono);font-size:12px;color:var(--muted-dim)}
.post-share button,.post-share a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.04);color:var(--muted);border-radius:999px;padding:7px 13px;font:600 12px var(--font-display);cursor:pointer;text-decoration:none;transition:border-color .2s,color .2s}
.post-share button:hover,.post-share a:hover{border-color:var(--red-500);color:#fff}

@media (max-width:768px){
  .sign-grid{grid-template-columns:1fr}
  .price-cards{gap:10px}
  .price-card{padding:16px}
  .price-card .pc-what{min-height:0;margin-bottom:10px;font-size:13px}
  .price-card .pc-price{font-size:1.55rem}
  .price-card .pc-price small{display:block;margin:4px 0 0}
  .price-card .pc-badge{position:static;display:inline-block;margin-bottom:8px}
  .to-top{bottom:86px;right:14px}
  .post-author{flex-direction:column;align-items:flex-start}
  .age-check{padding:20px}
  .post-callout{padding-left:52px}
}
@media (prefers-reduced-motion: reduce){
  article.post::before,.post-cta::before{animation:none}
  .post-hero::after{display:none}
  .post-reveal,.sign-grid.post-reveal .sign-card,article.post ol.steps.post-reveal>li{opacity:1;transform:none}
  article.post ol.steps::before,article.post h2[data-sec]::after{transform:none}
}

/* Blog v2 widgets: alarm counter (placement guide) and chirp decoder (Kidde guide) */
.tool-box{position:relative;margin:30px 0;padding:26px;border-radius:var(--radius-lg);background:radial-gradient(120% 140% at 100% 0%,rgba(232,52,42,.14),transparent 55%),var(--navy-800);border:1px solid var(--hairline-strong)}
.tool-box h3{font-family:var(--font-display);font-size:1.2rem!important;margin:0 0 6px!important}
article.post .tool-box p{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.tool-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.stepper{display:flex;align-items:center;border:1px solid var(--hairline-strong);border-radius:10px;overflow:hidden;background:rgba(5,16,31,.7)}
.stepper button{width:40px;height:44px;border:0;background:none;color:#fff;font-size:20px;cursor:pointer;transition:background .2s}
.stepper button:hover{background:rgba(232,52,42,.15)}
.stepper output{flex:1;text-align:center;font:700 18px var(--font-mono);color:#fff}
.tool-check{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:6px;cursor:pointer}
.tool-check input{width:18px;height:18px;accent-color:var(--red-500)}
.count-out{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.count-tile{flex:1;min-width:130px;padding:16px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--hairline-strong)}
.count-tile b{display:block;font:800 2.2rem/1 var(--font-display);color:#fff;transition:transform .3s var(--ease-spring)}
.count-tile b.bump{transform:scale(1.18)}
.count-tile span{font-size:12.5px;color:var(--muted)}
.count-note{font-size:13px!important;margin:12px 0 0!important}
.chirp-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.chirp-pick button{border:1px solid var(--hairline-strong);background:rgba(255,255,255,.04);color:#fff;border-radius:999px;padding:9px 16px;font:600 13px var(--font-display);cursor:pointer;transition:border-color .2s,background .2s}
.chirp-pick button[aria-pressed="true"]{border-color:var(--red-500);background:rgba(232,52,42,.16)}
.chirp-stage{display:flex;gap:20px;align-items:center}
.chirp-alarm{position:relative;width:86px;height:86px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#d9dde3 60%,#aab1bb);box-shadow:inset 0 -6px 12px rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.4)}
.chirp-alarm::before{content:'';position:absolute;inset:30px;border-radius:50%;border:2px dashed rgba(5,16,31,.25)}
.chirp-led{position:absolute;top:16px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#4a4f57}
.chirp-alarm.flash .chirp-led{background:#ffb020;box-shadow:0 0 14px 4px rgba(255,176,32,.8)}
.chirp-alarm.flash-red .chirp-led{background:#ff3b30;box-shadow:0 0 14px 4px rgba(255,59,48,.8)}
.chirp-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--red-500);opacity:0;pointer-events:none}
.chirp-alarm.flash .chirp-ring,.chirp-alarm.flash-red .chirp-ring{animation:sonar .9s ease-out}
.chirp-meaning{font-family:var(--font-display);font-weight:600;color:#fff;font-size:1.05rem;min-height:3em}
.chirp-meaning small{display:block;font:500 13px var(--font-body);color:var(--muted);margin-top:4px}
.chirp-play{margin-top:12px;border:0;background:var(--red-btn);color:#fff;border-radius:999px;padding:9px 16px;font:600 13px var(--font-display);cursor:pointer}
@media (max-width:640px){.tool-row{grid-template-columns:1fr 1fr}.chirp-stage{flex-direction:column;align-items:flex-start}}

/* App call-out inside guides (2026-11-06) */
.app-callout{margin:28px 0;padding:22px 22px 20px;border-radius:var(--radius);background:linear-gradient(150deg,rgba(245,197,24,.12),rgba(245,197,24,.03));border:1px solid rgba(245,197,24,.45);border-left:5px solid #f5c518}
.app-callout .ac-tag{display:block;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#f5c518;margin-bottom:6px}
.app-callout h2,.app-callout h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.25;margin:0 0 8px}
.app-callout p{color:var(--muted);margin:0 0 16px}
.app-callout .ac-row{display:flex;gap:14px 18px;flex-wrap:wrap;align-items:center}
.app-callout .ac-link{color:#f5c518;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.post-meta a{color:inherit}
.app-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 28px}
@media (max-width:600px){.app-shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}