/* ==========================================================================
   Northwest Wattage — shared stylesheet
   Light theme · brand red #EE2D24 · Jost + Inter · 8pt scale
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root{
  /* neutrals */
  --bg:#FFFFFF;
  --surface:#F6F7F8;
  --surface-2:#EDEEF0;
  --border:#E2E4E7;
  --text:#231F20;
  --text-dim:#5C6066;
  --ink-invert:#FFFFFF;

  /* brand red — IDENTITY ONLY, and that now means literally the logo mark + favicon +
     theme-color (all of which hard-code #EE2D24 inline). It fails AA at 4.17:1, and any UI
     chrome tinted with it sits next to --action-red buttons and reads as a colour mistake
     rather than a system. Do NOT reintroduce it into CSS. */
  --brand-red:#EE2D24;
  /* action red — must-pass-AA surfaces: buttons, links, focus (5.75:1 both ways) */
  --action-red:#C81E14;
  --action-red-hover:#A81810;

  --dark:#231F20;
  --dark-2:#2E2A2B;

  --font-head:'Jost',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  --fs-h1:clamp(2.25rem,1.5rem + 3.2vw,4rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.9vw,2.75rem);
  --fs-h3:clamp(1.25rem,1.1rem + 0.7vw,1.5rem);
  --fs-body:clamp(1rem,0.97rem + 0.15vw,1.0625rem);
  --fs-sm:0.875rem;
  --fs-xs:0.75rem;

  --sp-1:4px;  --sp-2:8px;  --sp-3:16px; --sp-4:24px; --sp-5:32px;
  --sp-6:48px; --sp-7:64px; --sp-8:96px; --sp-9:128px;

  --container:1180px;
  --gutter:24px;
  --radius:10px;
  --radius-lg:16px;

  --shadow-sm:0 1px 2px rgba(35,31,32,.06), 0 1px 3px rgba(35,31,32,.05);
  --shadow-md:0 4px 12px rgba(35,31,32,.07), 0 2px 4px rgba(35,31,32,.05);
  --shadow-lg:0 12px 32px rgba(35,31,32,.10);

  --t-fast:150ms; --t:220ms; --ease:cubic-bezier(.4,0,.2,1);
  --header-h:72px;
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;            /* anchor jumps ONLY — no JS smooth-scroll lib */
  scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                 /* never allow horizontal scroll */
}
img,svg,video{display:block;max-width:100%;}
img{height:auto;}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.02em;
  margin:0 0 var(--sp-3);
  text-wrap:balance;                 /* kills heading widows where supported */
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);letter-spacing:-0.01em;}
p{margin:0 0 var(--sp-3);}
/* UA default is `blockquote{margin:1em 40px}` — that silently steals 80px of width
   from any blockquote used as a layout box. */
blockquote,figure{margin:0;}
a{color:var(--action-red);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--action-red-hover);}
ul,ol{margin:0 0 var(--sp-3);padding-left:1.25em;}
button{font:inherit;}

:focus-visible{
  outline:2px solid var(--action-red);
  outline-offset:2px;
  border-radius:4px;
}
/* outline-offset puts the ring on the SECTION background, not the button — on the
   dark bands --action-red only manages 2.84:1, failing WCAG 1.4.11 (needs 3:1).
   White is 16.30:1 there. */
.section--dark :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.call-bar :focus-visible{
  outline-color:#fff;
}

/* --------------------------------------------------------------- layout */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(64px,8vw,112px);}
.section--surface{background:var(--surface);}
.section--dark{background:var(--dark);color:var(--ink-invert);}
.section--dark h2,.section--dark h3{color:var(--ink-invert);}
.section--tight{padding-block:clamp(48px,5vw,72px);}

.section-head{max-width:62ch;margin-bottom:var(--sp-6);}
.section-head--center{margin-inline:auto;text-align:center;}

.eyebrow{
  font-family:var(--font-head);
  font-weight:500;
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text-dim);
  margin:0 0 var(--sp-2);
}
/* .cta-band is a dark band that is NOT .section--dark, so it must be named in every
   dark-context rule or the light-theme dims leak onto near-black (--text-dim on
   --dark is 2.58:1 — a real AA failure). Keep these selector lists in sync. */
.section--dark .eyebrow,
.cta-band .eyebrow{color:#B9BBBE;}
.lede{font-size:1.0625rem;color:var(--text-dim);max-width:66ch;}
.section--dark .lede,
.cta-band .lede{color:#C9CBCE;}
.prose{max-width:70ch;}
.prose p{color:var(--text-dim);}

/* accent rule — action red, so it matches the buttons/links it sits beside */
.rule-accent{
  width:44px;height:3px;background:var(--action-red);
  border:0;margin:0 0 var(--sp-4);
}
.section-head--center .rule-accent{margin-inline:auto;}

.skip-link{
  position:absolute;left:var(--sp-3);top:-100px;z-index:2000;
  background:var(--action-red);color:#fff;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius);text-decoration:none;
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:var(--sp-3);color:#fff;}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;padding:0 var(--sp-4);
  font-family:var(--font-head);font-weight:500;font-size:0.95rem;
  letter-spacing:.01em;
  border-radius:var(--radius);border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t) var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--action-red);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--action-red-hover);color:#fff;box-shadow:var(--shadow-md);}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--text);}
.btn-secondary:hover{background:var(--text);color:var(--bg);}
.btn-ghost-invert{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn-ghost-invert:hover{background:#fff;color:var(--text);border-color:#fff;}
.btn-lg{min-height:54px;padding:0 var(--sp-5);font-size:1rem;}
.btn-block{width:100%;}
/* functional icon only (phone glyph inside a Call button) — never decorative */
.btn svg{width:17px;height:17px;flex:none;fill:currentColor;}

/* --------------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.site-header.is-stuck{box-shadow:var(--shadow-sm);border-bottom-color:var(--border);}
.header-inner{
  display:flex;align-items:center;gap:var(--sp-4);
  min-height:var(--header-h);
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--text);flex:none;
}
.brand-mark{width:26px;height:26px;flex:none;}
.brand-name{
  font-family:var(--font-head);font-weight:500;
  font-size:0.9rem;text-transform:uppercase;letter-spacing:.14em;
  line-height:1;white-space:nowrap;
}
.header-spacer{flex:1;}

.nav-list{
  display:flex;align-items:center;gap:var(--sp-4);
  list-style:none;margin:0;padding:0;
}
.nav-link{
  font-family:var(--font-head);font-weight:500;font-size:0.95rem;
  color:var(--text);text-decoration:none;padding:var(--sp-2) 0;
  position:relative;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--action-red);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav-link:hover{color:var(--text);}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1);}

.header-actions{display:flex;align-items:center;gap:var(--sp-3);flex:none;}
.header-phone{
  font-family:var(--font-head);font-weight:500;font-size:0.95rem;
  color:var(--text);text-decoration:none;white-space:nowrap;
}
.header-phone:hover{color:var(--action-red);}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  background:transparent;border:1px solid var(--border);border-radius:var(--radius);
  cursor:pointer;
}
.nav-toggle-bars{position:relative;width:18px;height:12px;display:block;}
.nav-toggle-bars span{
  position:absolute;left:0;width:100%;height:2px;background:var(--text);
  border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t-fast) var(--ease);
}
.nav-toggle-bars span:nth-child(1){top:0;}
.nav-toggle-bars span:nth-child(2){top:5px;}
.nav-toggle-bars span:nth-child(3){top:10px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* --------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;background:var(--dark);}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 60%;}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(23,20,21,.90) 0%,rgba(23,20,21,.80) 42%,rgba(23,20,21,.42) 72%,rgba(23,20,21,.30) 100%);
}

/* LIGHT hero variant — light scrim, dark copy, photo readable on the right */
.hero--light{background:var(--bg);}
.hero--light .hero-overlay{
  background:linear-gradient(100deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.94) 34%,
    rgba(255,255,255,.72) 58%,
    rgba(255,255,255,.34) 82%,
    rgba(255,255,255,.18) 100%);
}
.hero--light .hero-copy,
.hero--light .hero-copy h1{color:var(--text);}
.hero--light .hero-sub{color:var(--text-dim);}
.hero--light .hero-eyebrow{color:var(--text-dim);}
.hero--light .rating-badge{
  background:rgba(255,255,255,.86);
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
}
.hero--light .rating-badge .rating-text{color:var(--text);}
/* the ghost button must flip to dark-on-light in the light hero */
.hero--light .btn-ghost-invert{
  background:rgba(255,255,255,.72);
  color:var(--text);
  border-color:var(--text);
}
.hero--light .btn-ghost-invert:hover{background:var(--text);color:#fff;border-color:var(--text);}
.hero--light .quote-card{border:1px solid var(--border);}
.hero .container{position:relative;z-index:2;}
.hero-grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-6);
  padding-block:clamp(56px,7vw,104px);
  align-items:center;
}
.hero-copy{color:#fff;max-width:60ch;}
.hero-copy h1{color:#fff;}
.hero-sub{color:#DDDEE0;font-size:1.0625rem;max-width:52ch;margin-bottom:var(--sp-5);}
.hero-eyebrow{color:#C9CBCE;}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-5);}

/* Google rating badge — social proof in the hero */
.rating-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:8px 16px;
  backdrop-filter:blur(6px);
}
.rating-badge .stars{display:inline-flex;gap:2px;}
.rating-badge .stars svg{width:14px;height:14px;fill:#FFC107;}
.rating-badge .rating-text{
  font-family:var(--font-head);font-weight:500;font-size:var(--fs-sm);
  color:#fff;letter-spacing:.01em;
}
.rating-badge--light{background:var(--surface-2);border-color:var(--border);}
.rating-badge--light .rating-text{color:var(--text);}

/* --------------------------------------------------------------- hero form */
.quote-card{
  background:var(--bg);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:var(--sp-5);
}
.quote-card h2{font-size:1.375rem;margin-bottom:var(--sp-1);}
.quote-card .quote-note{font-size:var(--fs-sm);color:var(--text-dim);margin-bottom:var(--sp-4);}

.field{margin-bottom:var(--sp-3);}
.field label{
  display:block;font-family:var(--font-head);font-weight:500;
  font-size:var(--fs-sm);margin-bottom:6px;color:var(--text);
}
.field .req{color:var(--action-red);}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;
  font-family:var(--font-body);font-size:1rem;color:var(--text);
  background:var(--bg);
  border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field textarea{min-height:104px;resize:vertical;}
.field input:hover,.field textarea:hover,.field select:hover{border-color:#C9CCD1;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--action-red);
  box-shadow:0 0 0 3px rgba(200,30,20,.14);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--action-red);}
/* Error + status stay RENDERED (never display:none) so they exist in the
   accessibility tree — a live region that is display:none at write time is not
   announced at all. Empty = zero height, so it costs nothing visually. */
.field-error{
  color:var(--action-red);font-size:var(--fs-sm);margin:0;
}
.field-error.is-visible{margin-top:5px;}
.form-status{
  margin:0;border-radius:var(--radius);font-size:var(--fs-sm);
}
.form-status.is-visible{margin-top:var(--sp-3);padding:var(--sp-3);}
.form-status.is-success{background:#E7F5EC;color:#14532D;border:1px solid #B7E0C6;}
.form-status.is-error{background:#FDECEA;color:#7F1D1D;border:1px solid #F4C7C3;}
.form-fineprint{font-size:var(--fs-xs);color:var(--text-dim);margin:var(--sp-3) 0 0;}

/* --------------------------------------------------------------- trust bar */
.trust-bar{background:var(--surface);border-block:1px solid var(--border);}
.trust-list{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--sp-2) var(--sp-5);
  list-style:none;margin:0;padding:var(--sp-4) 0;
}
.trust-list li{
  font-family:var(--font-head);font-weight:500;font-size:var(--fs-sm);
  color:var(--text);display:flex;align-items:center;gap:var(--sp-2);
}
.trust-list li:not(:last-child)::after{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--action-red);margin-left:var(--sp-3);
}
@media (max-width:640px){
  .trust-list li:not(:last-child)::after{display:none;}
  .trust-list{gap:var(--sp-2) var(--sp-4);}
}

/* --------------------------------------------------------------- cards */
.grid{display:grid;gap:var(--sp-4);}
/* min() guard: without it a track wider than the container overflows on small
   phones. 300px min => 3 columns at 1180 (4 would need 1272), 2 at tablet, 1 on phones. */
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}

.card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
  display:flex;flex-direction:column;
}
.card h3{margin-bottom:var(--sp-2);}
.card p{color:var(--text-dim);margin-bottom:var(--sp-3);}
.card p:last-child{margin-bottom:0;}

/* whole-card link */
.card-link{position:relative;text-decoration:none;color:inherit;}
.card-link:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.card-link:focus-within{box-shadow:var(--shadow-md);}
.card-cta{
  margin-top:auto;font-family:var(--font-head);font-weight:500;
  font-size:var(--fs-sm);color:var(--action-red);
  display:inline-flex;align-items:center;gap:6px;
}
.card-cta svg{width:13px;height:13px;fill:currentColor;transition:transform var(--t) var(--ease);}
.card-link:hover .card-cta svg,
.media-card:hover .card-cta svg{transform:translateX(3px);}

/* media card (image on top) */
.media-card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.media-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.media-card-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);}
.media-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease);}
.media-card:hover .media-card-thumb img{transform:scale(1.04);}
.media-card-body{padding:var(--sp-4);display:flex;flex-direction:column;flex:1;}

/* --------------------------------------------------------------- reviews */
.review-card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-5);display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
}
.review-stars{display:inline-flex;gap:2px;margin-bottom:var(--sp-3);}
.review-stars svg{width:15px;height:15px;fill:#FFC107;}
.review-quote{
  font-size:1rem;color:var(--text);margin-bottom:var(--sp-4);flex:1;
}
.review-meta{
  display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--border);padding-top:var(--sp-3);
}
.review-name{font-family:var(--font-head);font-weight:600;font-size:var(--fs-sm);}
.review-source{font-size:var(--fs-xs);color:var(--text-dim);}

/* --------------------------------------------------------------- split */
.split{
  display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:center;
}
.split-media img{border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-md);}

/* --------------------------------------------------------------- stats */
.stat-value{
  font-family:var(--font-head);font-weight:600;
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem);
  line-height:1;color:var(--text);letter-spacing:-0.03em;
}
.section--dark .stat-value{color:#fff;}
.stat-label{font-size:var(--fs-sm);color:var(--text-dim);margin-top:var(--sp-2);}
.section--dark .stat-label{color:#B9BBBE;}

/* --------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  background:none;border:0;cursor:pointer;text-align:left;
  padding:var(--sp-4) 0;
  font-family:var(--font-head);font-weight:500;font-size:1.0625rem;color:var(--text);
}
.faq-q:hover{color:var(--action-red);}
.faq-icon{position:relative;width:14px;height:14px;flex:none;}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;background:var(--action-red);border-radius:2px;
  transition:transform var(--t) var(--ease);
}
.faq-icon::before{top:6px;left:0;width:14px;height:2px;}
.faq-icon::after{left:6px;top:0;width:2px;height:14px;}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:scaleY(0);}
/* visibility:hidden is what actually removes a collapsed panel from the tab order
   and the a11y tree — height:0 + overflow:hidden only clips pixels, leaving any
   link inside focusable and every answer exposed to screen readers.
   The delayed visibility transition preserves the slide-up animation. */
.faq-a{
  overflow:hidden;height:0;visibility:hidden;
  transition:height var(--t) var(--ease), visibility 0s linear var(--t);
}
.faq-a.is-open{
  visibility:visible;
  transition:height var(--t) var(--ease), visibility 0s;
}
.faq-a-inner{padding:0 0 var(--sp-4);color:var(--text-dim);max-width:74ch;}

/* --------------------------------------------------------------- CTA band */
.cta-band{background:var(--dark);color:#fff;}
.cta-band h2,.cta-band h3{color:var(--ink-invert);}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5);}

/* --------------------------------------------------------------- footer */
.site-footer{background:var(--dark);color:#B9BBBE;padding-block:var(--sp-7) var(--sp-5);}
.site-footer a{color:#DDDEE0;text-decoration:none;}
.site-footer a:hover{color:#fff;text-decoration:underline;}
.footer-grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-6);
  padding-bottom:var(--sp-6);border-bottom:1px solid rgba(255,255,255,.12);
}
/* grid/flex items default to min-width:auto, so one long unbreakable string (the
   email) can force its track wider than the container. These two lines are the
   general defence, not just a fix for that address. */
.footer-grid > *{min-width:0;}
.footer-col a,.footer-brand a{overflow-wrap:anywhere;}
.footer-brand .brand{color:#fff;margin-bottom:var(--sp-3);}
.footer-brand .brand-name{color:#fff;}
.footer-tagline{font-size:var(--fs-sm);color:#B9BBBE;max-width:34ch;}
.footer-col h3{
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:var(--sp-3);
}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:var(--sp-2);font-size:var(--fs-sm);}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);
  justify-content:space-between;align-items:center;
  padding-top:var(--sp-4);font-size:var(--fs-xs);
}
.footer-legal{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.footer-licenses{font-size:var(--fs-xs);color:#8E9093;margin-top:var(--sp-3);}

/* --------------------------------------------------------------- sticky mobile call bar */
.call-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--action-red);
  box-shadow:0 -2px 12px rgba(35,31,32,.18);
  padding-bottom:env(safe-area-inset-bottom);
}
.call-bar a{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:56px;color:#fff;text-decoration:none;
  font-family:var(--font-head);font-weight:500;font-size:1rem;letter-spacing:.01em;
}
.call-bar a:hover{color:#fff;text-decoration:none;}
.call-bar svg{width:17px;height:17px;fill:currentColor;}

/* --------------------------------------------------------------- breadcrumb */
.breadcrumb{padding-top:var(--sp-4);}
.breadcrumb ol{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  list-style:none;margin:0;padding:0;font-size:var(--fs-xs);color:var(--text-dim);
}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:var(--sp-2);color:var(--border);}
.breadcrumb a{color:var(--text-dim);text-decoration:none;}
.breadcrumb a:hover{color:var(--action-red);}

/* --------------------------------------------------------------- page hero (inner) */
.page-hero{background:var(--surface);border-bottom:1px solid var(--border);}
.page-hero .container{padding-block:clamp(40px,5vw,72px);}
.page-hero h1{margin-bottom:var(--sp-3);}

/* --------------------------------------------------------------- reveal
   Gated behind .js (set by an inline script in <head>). Without JS the content
   is simply visible — never let a script failure hide the whole page. */
.js .reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity 600ms var(--ease),transform 600ms var(--ease);
}
.js .reveal.is-visible{opacity:1;transform:none;}
.reveal.d1{transition-delay:70ms;}
.reveal.d2{transition-delay:140ms;}
.reveal.d3{transition-delay:210ms;}
.reveal.d4{transition-delay:280ms;}
.reveal.d5{transition-delay:350ms;}

/* --------------------------------------------------------------- utilities */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}

/* --------------------------------------------------------------- breakpoints */
@media (min-width:768px){
  .split{grid-template-columns:1fr 1fr;gap:var(--sp-7);}
  /* 2 columns here, not 4 — at 768 four tracks are ~140px each and the 26-char
     email has no break opportunity, so min-content blows the grid past the
     container (body{overflow-x:hidden} then silently CLIPS the footer). */
  .footer-grid{grid-template-columns:1.4fr 1fr;}
}
@media (min-width:1024px){
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr;}
}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:var(--sp-7);}
  /* At this width the quote form sits in the next column, already on screen — so the
     hero's secondary "Get a free estimate" anchor scrolls the h1 off-screen to reveal
     something the visitor can already see. Drop it and the desktop hero becomes ONE
     ask (Call) with the form beside it as the passive alternative.
     Scoped to .hero so the .cta-band ghost buttons are untouched. Below 1024 the form
     stacks underneath, so the anchor is a real jump and stays. */
  .hero .hero-actions .btn-ghost-invert{display:none;}
}

/* mobile nav */
@media (max-width:900px){
  .nav-toggle{display:inline-flex;}
  .header-phone{display:none;}
  .site-nav{
    position:fixed;inset:var(--header-h) 0 0 0;
    background:var(--bg);
    padding:var(--sp-5) var(--gutter) var(--sp-8);
    transform:translateX(100%);
    transition:transform var(--t) var(--ease);
    overflow-y:auto;
    visibility:hidden;
  }
  .site-nav.is-open{transform:translateX(0);visibility:visible;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;}
  .nav-list li{border-bottom:1px solid var(--border);}
  .nav-link{
    display:block;padding:var(--sp-4) 0;
    font-size:1.125rem;
  }
  .nav-link::after{display:none;}
  .nav-link[aria-current="page"]{color:var(--action-red);}
  .nav-cta{margin-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);}
  .header-actions .btn{display:none;}
}
@media (min-width:901px){
  .nav-cta{display:none;}
}
@media (max-width:767px){
  .call-bar{display:block;}
  body{padding-bottom:56px;}   /* never let the call bar cover content */
  .quote-card{padding:var(--sp-4);}

  /* touch targets: footer + brand links are text-height on desktop — give them
     a real 44px box on touch screens */
  .footer-col li{margin-bottom:0;}
  .footer-col li a{display:flex;align-items:center;min-height:44px;}
  .footer-legal a{display:inline-flex;align-items:center;min-height:44px;}
  .brand{min-height:44px;}
}

/* --------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    /* delay too — .faq-a defers visibility by var(--t) to let the slide-up finish;
       without this the panel stays focusable for 220ms after closing even with
       motion switched off. */
    transition-delay:0s!important;
    animation-delay:0s!important;
    scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none;}
  .media-card:hover .media-card-thumb img{transform:none;}
  .card-link:hover,.media-card:hover{transform:none;}
}

/* --------------------------------------------------------------- print */
@media print{
  .site-header,.call-bar,.cta-band,.site-footer{display:none;}
  body{color:#000;}
}