/* Seal Pro Masters — generated by build-sealpro-site.mjs. Do not edit by hand. */
:root{
  --asphalt:#121518;
  --asphalt-2:#1b2024;
  --graphite:#2a3138;
  --ink:#13171a;
  --ink-soft:#4b545c;
  --orange:#f16a0a;
  --orange-bright:#ff8420;
  /* text-on-light orange. #f16a0a is only 3.1:1 on white and fails AA for
     small text, so every eyebrow, kicker and step number uses this instead. */
  --orange-ink:#b04803;
  --hiviz:#f2e400;
  --hiviz-dim:#c9bd00;
  --concrete:#f4f2ee;
  --concrete-2:#e7e4dd;
  --paper:#fff;
  --line:#dcd8d0;
  --line-dark:rgba(255,255,255,.15);
  --shadow:0 2px 4px rgba(12,16,20,.06),0 12px 30px rgba(12,16,20,.10);
  --shadow-lg:0 4px 10px rgba(12,16,20,.09),0 26px 60px rgba(12,16,20,.17);
  --radius:12px;
  --radius-lg:20px;
  --wrap:1240px;
  --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
svg{display:block}
a{color:var(--orange-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{
  font-family:var(--display);font-weight:400;line-height:1.05;
  letter-spacing:.004em;margin:0;color:var(--ink);
  overflow-wrap:break-word;text-transform:uppercase;
}
h1{font-size:clamp(2.5rem,5.6vw,4.3rem)}
h2{font-size:clamp(1.9rem,3.5vw,2.9rem)}
h3{font-size:clamp(1.1rem,1.55vw,1.35rem)}
p{margin:0 0 1.1rem}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--hiviz);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--hiviz);color:var(--asphalt);padding:.7rem 1.1rem;font-weight:700;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- reveal on scroll -------------------------------------- */
/* Visible by DEFAULT. Only hidden once JS has confirmed it can run, so the
   page is never blank for a crawler or on a JS failure. */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
html.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- header ------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding:.55rem clamp(1rem,3vw,2.2rem);
  background:var(--asphalt);
  border-bottom:3px solid var(--orange);
}
/* The mark is square once the orange delivery plate is knocked out, so the
   brand is a LOCKUP: badge plus real text. A square logo wide enough to read
   would make this header ~190px tall. */
.brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-crest{width:52px;height:52px;flex:0 0 auto}
.brand-words{display:flex;flex-direction:column;line-height:1.08;min-width:0}
.brand-words strong{
  font-family:var(--display);font-weight:400;font-size:1.32rem;color:#fff;
  letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
}
.brand-words span{
  font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--hiviz);font-weight:600;white-space:nowrap;
}
.nav-links{display:flex;gap:1.25rem;margin-left:auto;align-items:center;flex-wrap:nowrap}
.nav-links a{
  color:#fff;font-weight:600;font-size:.95rem;white-space:nowrap;
  padding:.4rem 0;border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--hiviz);border-bottom-color:var(--hiviz);text-decoration:none}
.nav-actions{display:flex;align-items:center;gap:.85rem;flex:0 0 auto}
.phone-link{display:flex;flex-direction:column;line-height:1.15;color:#fff;text-align:right}
.phone-link:hover{text-decoration:none;color:var(--hiviz)}
.phone-label{font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--hiviz);font-weight:700}
.phone-link strong{font-size:1.08rem;font-weight:700;white-space:nowrap}
.menu-toggle{display:none}

/* ---------- buttons ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.5rem;border-radius:8px;border:2px solid transparent;
  font-family:var(--body);font-weight:700;font-size:1rem;line-height:1.1;
  letter-spacing:.01em;text-align:center;cursor:pointer;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn.primary{background:var(--orange);color:#180a01;box-shadow:0 6px 18px rgba(241,106,10,.3)}
.btn.primary:hover{background:var(--orange-bright);color:#180a01}
.btn.secondary{background:var(--asphalt);color:#fff}
.btn.secondary:hover{background:var(--graphite);color:#fff}
.btn.light{background:var(--concrete);color:var(--asphalt)}
.btn.light:hover{background:#fff;color:var(--asphalt)}
/* outline-light is ONLY ever placed on a dark ground (cta-band, .section.dark).
   Never reuse it on concrete — white-on-cream is the invisible-button bug. */
.btn.outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.outline-light:hover{background:rgba(255,255,255,.13);color:#fff;border-color:#fff}
/* hi-viz outline, for the DARK grounds only — the mobile sticky bar and the
   cta-band. This is the "Text us" button wherever the ground is asphalt. */
.btn.ghost-hiviz{background:transparent;color:var(--hiviz);border-color:var(--hiviz)}
.btn.ghost-hiviz:hover{background:var(--hiviz);color:var(--asphalt)}
/* ...and its light-ground twin: the "Text us" button on paper and concrete.
   An outline rather than a third filled colour, so the orange "Call" button
   keeps being the loudest thing in the row. */
.btn.outline-dark{background:transparent;color:var(--asphalt);border-color:var(--asphalt)}
.btn.outline-dark:hover{background:var(--asphalt);color:#fff;border-color:var(--asphalt)}
.btn.small{padding:.58rem 1.05rem;font-size:.9rem;background:var(--hiviz);color:var(--asphalt)}
.btn.small:hover{background:#fff64d}
/* The header's "Text us". Outlined so it reads as secondary to the hi-viz
   "Get a quote" filled button beside it. It needs no breakpoint of its own:
   .nav-actions is already display:none below 1241px, and at 1241px — measured,
   not assumed — the row still has 111px of slack between the wordmark and the
   nav, so the fourth item fits on one line. Below that, the mobile menu and the
   sticky bar each carry their own text link, so nothing is lost. */
.btn.small.sms-small{background:transparent;color:var(--hiviz);border-color:var(--hiviz)}
.btn.small.sms-small:hover{background:var(--hiviz);color:var(--asphalt)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.5rem 0 0}
.hero-actions.center{justify-content:center;margin-top:2.2rem}

/* ---------- layout ------------------------------------------------- */
.section{padding:clamp(3.2rem,6.6vw,5.6rem) clamp(1rem,4vw,2.4rem);max-width:var(--wrap);margin:0 auto}
.section.soft{background:var(--concrete);max-width:none}
.section.soft>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.section.dark{background:var(--asphalt);color:#fff;max-width:none}
.section.dark>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark p{color:rgba(255,255,255,.84)}
.section-head{max-width:760px;margin:0 auto clamp(2rem,4vw,2.9rem);text-align:center}
.section-head p{color:var(--ink-soft);font-size:1.06rem;margin-bottom:0}
.section.dark .section-head p{color:rgba(255,255,255,.8)}
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-ink);margin-bottom:.8rem;
}
.section.dark .eyebrow,.cta-band .eyebrow{color:var(--hiviz)}
/* The rule is a road centreline rather than a solid bar — dashes, in the
   brand orange on light grounds and hi-viz on dark. */
.rule{
  display:block;width:78px;height:6px;border-radius:1px;margin-bottom:1.05rem;
  background:repeating-linear-gradient(90deg,var(--orange) 0 19px,transparent 19px 29px);
}
.rule.center{margin-left:auto;margin-right:auto}
.section.dark .rule{background:repeating-linear-gradient(90deg,var(--hiviz) 0 19px,transparent 19px 29px)}

/* A hazard-stripe divider. Decorative, aria-hidden. */
.stripe-band{
  height:15px;
  background:repeating-linear-gradient(115deg,var(--hiviz) 0 20px,var(--asphalt) 20px 40px);
}

/* ---------- crumbs ------------------------------------------------- */
.crumbs{margin-bottom:1.05rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0;font-size:.85rem;color:var(--ink-soft)}
.crumbs li+li::before{content:"/";margin-right:.45rem;color:#a6a29a}
.crumbs a{color:var(--ink-soft)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- hero --------------------------------------------------- */
.hero{
  display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,5vw,3.8rem);
  align-items:center;
  padding:clamp(2.6rem,5.5vw,4.6rem) clamp(1rem,4vw,2.4rem) clamp(2.6rem,5vw,3.8rem);
  max-width:var(--wrap);margin:0 auto;
}
.hero h1 em{font-style:normal;color:var(--orange-ink);display:block}
.hero-lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-soft);max-width:56ch;margin-top:1.2rem}
.hero-trust{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
  list-style:none;margin:2.2rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line);
}
.hero-trust li{display:flex;flex-direction:column;min-width:0}
.hero-trust strong{font-family:var(--display);font-size:1.3rem;color:var(--asphalt);line-height:1.1;overflow-wrap:break-word}
.hero-trust span{font-size:.81rem;color:var(--ink-soft);line-height:1.3}
.hero-visual{position:relative}

/* ---------- the sealcoat sweep ------------------------------------ */
/* The hero seals itself: a faded-grey asphalt wash sits over the photo and
   slides off on load behind a skewed leading edge, so what is revealed is the
   fresh black surface underneath.
   Gated behind html.js and display:none by default — without JS the photo is
   simply a photo, never a permanently greyed-out one. */
.seal-stage{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);border:5px solid var(--paper);background:var(--asphalt);
}
/* height:auto is REQUIRED — the width/height attrs on the img would otherwise
   win over aspect-ratio and render the photo at full intrinsic height. */
.seal-photo{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.seal-wipe{display:none}
html.js .seal-wipe{
  display:block;position:absolute;top:-8%;bottom:-8%;left:-16%;right:-16%;
  transform:skewX(-9deg);transform-origin:top left;
  background:
    linear-gradient(180deg,rgba(214,210,202,.97),rgba(178,174,166,.97)),
    repeating-linear-gradient(58deg,rgba(255,255,255,.10) 0 3px,transparent 3px 7px);
  animation:seal-sweep 2.5s cubic-bezier(.45,.02,.2,1) .45s forwards;
}
.seal-edge{
  position:absolute;top:0;bottom:0;right:0;width:11px;
  background:linear-gradient(90deg,rgba(18,21,24,.55),var(--asphalt) 45%,#3c444b);
  box-shadow:-6px 0 16px rgba(12,16,20,.5);
}
@keyframes seal-sweep{to{transform:skewX(-9deg) translateX(-124%)}}
@media (prefers-reduced-motion:reduce){
  html.js .seal-wipe{display:none}
}
.hero-badge{
  display:block;position:absolute;left:clamp(-.5rem,1vw,1rem);bottom:-1.4rem;
  max-width:min(24rem,88%);background:var(--asphalt);color:#fff;
  padding:1rem 1.2rem;border-radius:var(--radius);box-shadow:var(--shadow-lg);
  font-size:.87rem;line-height:1.45;border-left:5px solid var(--hiviz);
}
.hero-badge strong{
  display:block;font-family:var(--display);font-size:1.1rem;
  color:var(--hiviz);letter-spacing:.03em;margin-bottom:.2rem;text-transform:uppercase;
}

/* ---------- marquee strip ----------------------------------------- */
.marquee-strip{background:var(--asphalt);color:#fff;overflow:hidden;padding:.8rem 0;border-block:3px solid var(--orange)}
.marquee-inner{
  display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:0 1rem;max-width:var(--wrap);margin:0 auto;font-weight:600;font-size:.88rem;
}
.marquee-inner i{color:var(--hiviz);font-style:normal}

/* ---------- page hero --------------------------------------------- */
.page-hero{padding:clamp(2.3rem,4.8vw,3.8rem) clamp(1rem,4vw,2.4rem) clamp(1.6rem,3vw,2.5rem);max-width:var(--wrap);margin:0 auto}
.page-hero h1{max-width:24ch}
.page-hero .hero-lead{margin-top:1.05rem}
.page-hero.split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
.page-hero.split h1{max-width:20ch}
.page-hero-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:5px solid var(--paper);background:var(--asphalt)}
.page-hero-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* A .page-hero already carries generous bottom padding, so the first .section
   after it would otherwise stack two paddings and leave a dead band. */
.page-hero+.section{padding-top:clamp(1.4rem,2.6vw,2.3rem)}
.center-hero{text-align:center;padding-block:clamp(3.4rem,7vw,5.6rem)}
.center-hero .hero-lead{margin-inline:auto}
.article-hero{max-width:820px}
.article-hero h1{max-width:none}
.hq-note{margin-top:1.3rem;padding:.85rem 1.1rem;background:var(--concrete);border-left:4px solid var(--orange);border-radius:0 8px 8px 0;font-size:.93rem;color:var(--ink)}
.legal-date{font-size:.85rem;color:var(--ink-soft);margin-top:.6rem}

/* ---------- svg panels -------------------------------------------- */
/* Only two photographs exist for this client, so most visuals are drawn.
   The panel fills its container and keeps its own aspect via the svg. */
.svg-panel{background:var(--asphalt);line-height:0}
.svg-panel svg{width:100%;height:auto;display:block}

/* ---------- why pitch --------------------------------------------- */
.why-pitch{padding-bottom:clamp(2.4rem,5vw,3.6rem)}
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,3.6rem);align-items:center}
.why-copy p{color:var(--ink-soft);font-size:1.04rem}
.why-copy em{font-style:italic;color:var(--ink);font-weight:600}
.why-visual figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--concrete)}
.why-visual img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.why-visual figcaption{padding:.8rem 1rem;font-size:.85rem;color:var(--ink-soft);line-height:1.45}

/* ---------- service bands ----------------------------------------- */
.service-band{padding-bottom:clamp(2rem,4vw,2.9rem)}
.band-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.1rem;flex-wrap:wrap}
.band-head>div{max-width:62ch}
.band-head p{color:var(--ink-soft);margin-bottom:0;margin-top:.7rem}
.band-count{font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.12em;font-weight:600;white-space:nowrap}
.band-count b{font-family:var(--display);font-size:2.1rem;color:var(--orange-ink);display:block;letter-spacing:0}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:1.15rem}
.service-card{
  display:flex;flex-direction:column;gap:.15rem;
  padding:1.6rem 1.5rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink);border-top:4px solid var(--asphalt);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-top-color:var(--orange);text-decoration:none}
.service-visual{display:block;width:46px;height:46px;color:var(--orange-ink);margin-bottom:.85rem}
.service-visual svg{width:100%;height:100%}
.service-eyebrow{font-size:.69rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.service-card h3{margin:.35rem 0 .5rem}
.service-card p{font-size:.94rem;color:var(--ink-soft);margin-bottom:.9rem;flex:1}
.more{font-size:.85rem;font-weight:700;color:var(--orange-ink)}
.service-card:hover .more{color:var(--asphalt)}

/* ---------- detail + process grids -------------------------------- */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.25rem}
.detail-card{background:var(--concrete);border-radius:var(--radius);padding:1.65rem 1.5rem;border-top:4px solid var(--orange)}
.detail-num{font-family:var(--display);font-size:1.6rem;color:var(--orange-ink);display:block;line-height:1}
.detail-card h3{margin:.5rem 0 .6rem}
.detail-card p{color:var(--ink-soft);font-size:.95rem;margin-bottom:0}
/* .process-grid lives inside .section.soft on the homepage and inside a plain
   .section on About, so the card colours are set explicitly rather than
   inherited — a .process-grid inside a .dark section is what produced the
   white-on-white bug on the New Summit Roofing build. */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1.2rem;margin-top:2rem}
.process-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.4rem;border-top:4px solid var(--hiviz)}
.process-card span{font-family:var(--display);font-size:1.5rem;color:var(--orange-ink);display:block;line-height:1}
.process-card h3{margin:.45rem 0 .55rem;color:var(--ink)}
.process-card p{font-size:.93rem;color:var(--ink-soft);margin-bottom:0}

/* ---------- chips -------------------------------------------------- */
.chip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.05rem}
.chip-card{
  display:flex;flex-direction:column;gap:.3rem;padding:1.35rem 1.4rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
  transition:.18s ease;
}
.chip-card:hover{border-color:var(--orange);box-shadow:var(--shadow);text-decoration:none;transform:translateY(-3px)}
.chip-icon{display:block;width:34px;height:34px;color:var(--orange-ink);margin-bottom:.4rem}
.chip-icon svg{width:100%;height:100%}
.chip-card strong{font-size:1.01rem}
.chip-card span:last-child{font-size:.87rem;color:var(--ink-soft);line-height:1.45}

/* ---------- pills -------------------------------------------------- */
/* currentColor so one rule works on the dark sections AND the concrete 404
   section without a second variant. */
.pill-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.pill{
  display:inline-block;padding:.58rem 1.12rem;border-radius:999px;
  border:1.5px solid currentColor;color:inherit;font-weight:600;font-size:.92rem;
  background:transparent;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.pill:hover{background:var(--hiviz);border-color:var(--hiviz);color:var(--asphalt);text-decoration:none}
.pill-more{background:var(--orange);border-color:var(--orange);color:#180a01}
.pill-more:hover{background:var(--orange-bright);border-color:var(--orange-bright);color:#180a01}

/* ---------- credentials + facts ----------------------------------- */
.cred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1.05rem}
.cred-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.45rem 1.35rem}
.cred-card span{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.cred-card strong{display:block;font-family:var(--display);font-size:1.5rem;color:var(--asphalt);line-height:1.15;margin:.4rem 0 .5rem;overflow-wrap:break-word;text-transform:uppercase}
.cred-card p{font-size:.91rem;color:var(--ink-soft);margin-bottom:0}
.fact-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.fact-card{display:flex;flex-direction:column;gap:.35rem;background:var(--concrete);border-radius:var(--radius);padding:1.5rem 1.4rem;border-left:4px solid var(--orange)}
.fact-icon{display:block;width:34px;height:34px;color:var(--orange-ink)}
.fact-icon svg{width:100%;height:100%}
.fact-card strong{font-family:var(--display);font-size:1.25rem;color:var(--asphalt);text-transform:uppercase;line-height:1.15}
.fact-card span:last-child{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

/* ---------- guarantee band ---------------------------------------- */
.guarantee-band{background:var(--concrete);max-width:none}
.guarantee-inner{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.5rem);
  align-items:center;max-width:var(--wrap);margin:0 auto;
  background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--orange);
  border-radius:var(--radius-lg);padding:clamp(1.6rem,3.4vw,2.5rem);box-shadow:var(--shadow);
}
.guarantee-mark{width:clamp(56px,8vw,82px);color:var(--orange-ink);flex:0 0 auto}
.guarantee-mark svg{width:100%;height:100%}
.guarantee-inner h2{margin-bottom:.7rem}
.guarantee-inner p{color:var(--ink-soft);margin-bottom:0;max-width:70ch}

/* ---------- areas -------------------------------------------------- */
.area-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1.15rem}
.area-tile{
  display:flex;flex-direction:column;padding:1.55rem 1.45rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
  border-top:4px solid var(--asphalt);transition:.18s ease;
}
.area-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);text-decoration:none;border-top-color:var(--orange)}
.area-kind{font-size:.69rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.area-tile h3{margin:.4rem 0 .55rem}
.area-tile p{font-size:.93rem;color:var(--ink-soft);flex:1;margin-bottom:.9rem}
.region-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.15rem}
.region-card{
  display:flex;flex-direction:column;padding:1.75rem 1.55rem;color:#fff;
  background:var(--asphalt);border-radius:var(--radius);border-bottom:5px solid var(--orange);transition:.18s ease;
}
.region-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);text-decoration:none;border-bottom-color:var(--hiviz)}
.region-card h3{color:#fff;margin:.4rem 0 .6rem}
.region-card p{color:rgba(255,255,255,.82);font-size:.94rem;flex:1;margin-bottom:.9rem}
.region-count{font-size:.69rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hiviz)}
.region-card .more{color:var(--hiviz)}
.area-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:.65rem}
.area-link{
  display:flex;flex-direction:column;gap:.1rem;padding:.82rem 1.05rem;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;color:var(--ink);
}
.area-link:hover{border-color:var(--orange);background:#fff;text-decoration:none;box-shadow:var(--shadow)}
.area-link strong{font-size:.99rem}
.area-link span{font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.area-body{max-width:70ch;margin:0 auto}
.area-body p{color:var(--ink-soft);font-size:1.05rem}
.edge-callout{text-align:center}

/* ---------- reviews ------------------------------------------------ */
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.15rem;align-items:start}
.review-card{background:rgba(255,255,255,.06);border:1px solid var(--line-dark);border-radius:var(--radius);padding:1.65rem 1.55rem;border-top:4px solid var(--hiviz)}
.review-card blockquote{margin:0 0 1.05rem;font-size:1.01rem;line-height:1.6;color:#fff}
.review-card.light{background:var(--concrete);border-color:var(--line);border-top-color:var(--orange)}
.review-card.light blockquote{color:var(--ink)}
.review-tag{display:inline-block;font-size:.69rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--hiviz);margin-bottom:.85rem}
.review-card.light .review-tag{color:var(--orange-ink)}
.review-card footer{display:flex;flex-direction:column;gap:.1rem;border-top:1px solid var(--line-dark);padding-top:.85rem}
.review-card.light footer{border-top-color:var(--line)}
.review-card footer strong{font-size:.97rem;color:#fff}
.review-card.light footer strong{color:var(--ink)}
.review-card footer span{font-size:.83rem;color:rgba(255,255,255,.66)}
.review-card.light footer span{color:var(--ink-soft)}
.review-note{max-width:70ch;margin:2.5rem auto 0;padding:1.4rem 1.55rem;background:var(--concrete);border-left:4px solid var(--orange);border-radius:0 var(--radius) var(--radius) 0}
.review-note p{margin:0;color:var(--ink-soft);font-size:.97rem}

/* ---------- prose / articles -------------------------------------- */
.prose{max-width:72ch;margin:0 auto}
.prose h2{margin:2.3rem 0 .9rem}
.prose h2:first-of-type{margin-top:0}
.prose p{color:var(--ink-soft);font-size:1.05rem}
.prose a{text-decoration:underline}
.article-figure{margin:0 auto clamp(1.8rem,4vw,2.6rem);max-width:900px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--asphalt)}
.article-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.article-body{margin-bottom:1rem}
.article-close{padding:1.2rem 1.4rem;background:var(--concrete);border-left:4px solid var(--orange);border-radius:0 var(--radius) var(--radius) 0;color:var(--ink)!important;font-weight:500}
.legal-prose h2{font-size:clamp(1.3rem,2vw,1.7rem)}
.legal-prose p{font-size:1rem}

/* ---------- guides ------------------------------------------------- */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.35rem}
.guide-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);transition:.18s ease}
.guide-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);text-decoration:none;border-color:var(--orange)}
.guide-visual{background:var(--asphalt);line-height:0}
.guide-img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.guide-copy{padding:1.45rem 1.4rem;display:flex;flex-direction:column;flex:1}
.guide-copy h2{font-size:clamp(1.15rem,1.65vw,1.4rem);margin:.2rem 0 .6rem}
.guide-copy p{font-size:.93rem;color:var(--ink-soft);flex:1;margin-bottom:.9rem}

/* ---------- faq ---------------------------------------------------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.65rem}
.faq-item{background:var(--concrete);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq-item summary{
  padding:1.05rem 1.35rem;cursor:pointer;font-weight:700;font-size:1.02rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--orange-ink);line-height:1;flex:0 0 auto}
.faq-item[open] summary::after{content:"\2212"}
.faq-item[open] summary{border-bottom:1px solid var(--line)}
.faq-body{padding:1.05rem 1.35rem 1.15rem}
.faq-body p{margin:0;color:var(--ink-soft);font-size:1rem}

/* ---------- contact ------------------------------------------------ */
/* Every text colour here is explicit. Inheriting into .contact-hero is what
   produced the invisible estimate-card text on the Rooter and J&A builds. */
.contact-hero .hero-lead{color:var(--ink-soft)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,4vw,2.6rem);align-items:start}
.contact-card{background:var(--asphalt);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.1rem);color:#fff}
.contact-card h2{color:#fff;font-size:clamp(1.45rem,2.2vw,1.95rem);margin-bottom:1.35rem}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.25rem}
.contact-list li{display:flex;flex-direction:column;gap:.15rem}
.contact-k{font-size:.69rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hiviz)}
.contact-v{font-size:1.04rem;color:#fff;font-weight:600;line-height:1.45}
a.contact-v:hover{color:var(--hiviz);text-decoration:none}
.contact-v.big{font-family:var(--display);font-size:clamp(1.55rem,3vw,2.05rem);font-weight:400;letter-spacing:.02em}
.contact-note{font-size:.83rem;color:rgba(255,255,255,.7);font-weight:400}
.contact-guarantee{margin-top:1.6rem;padding-top:1.35rem;border-top:1px solid var(--line-dark);display:flex;flex-direction:column;gap:.25rem}
.contact-guarantee strong{color:var(--hiviz);font-size:1.01rem}
.contact-guarantee span{font-size:.87rem;color:rgba(255,255,255,.78)}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow)}
.form-card h2{font-size:clamp(1.45rem,2.2vw,1.95rem);margin-bottom:.7rem}
.form-card>p{color:var(--ink-soft);font-size:.97rem}
.form-legal{font-size:.83rem;color:var(--ink-soft);margin:1rem 0 0}
/* min-height, NOT height:100% — height:100% collapses a GHL embed to zero
   inside a grid cell (the D3 Drain / Smooth Moves bug). */
.form-embed{margin-top:1.15rem}
.form-embed iframe{width:100%;min-height:760px;border:none;border-radius:10px;display:block;background:var(--paper)}

/* ---------- cta band ---------------------------------------------- */
.cta-band{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:clamp(1.4rem,3vw,2.5rem);background:var(--asphalt);color:#fff;
  padding:clamp(2.3rem,4.8vw,3.4rem) clamp(1.2rem,4vw,3rem);
  border-top:4px solid var(--orange);
}
.cta-copy{max-width:56ch;min-width:0}
.cta-band h2{color:#fff;margin:.2rem 0 .7rem}
.cta-band p{color:rgba(255,255,255,.85);margin-bottom:0}
.cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;min-width:0}

/* ---------- footer ------------------------------------------------- */
.footer{background:#0b0d0f;color:rgba(255,255,255,.76);padding:clamp(2.5rem,5vw,3.8rem) clamp(1rem,4vw,2.4rem) 1.8rem}
.footer-lead{max-width:var(--wrap);margin:0 auto 2.1rem;display:grid;gap:1rem}
.footer-brand .brand-crest{width:64px;height:64px}
.footer-brand .brand-words strong{font-size:1.5rem}
.footer-lead p{margin:0;font-size:.95rem;max-width:66ch}
.footer-meta{font-size:.85rem!important;color:rgba(255,255,255,.58)}
.footer-grid{
  max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.55rem 1.2rem;
  padding-top:1.75rem;border-top:1px solid var(--line-dark);
}
.footer-grid a{color:rgba(255,255,255,.8);font-size:.92rem}
.footer-grid a:hover{color:var(--hiviz);text-decoration:none}
.footer-legal{max-width:var(--wrap);margin:1.75rem auto 0;padding-top:1.35rem;border-top:1px solid var(--line-dark);font-size:.81rem;color:rgba(255,255,255,.5)}

/* ---------- mobile sticky ---------------------------------------- */
.mobile-sticky{display:none}

/* ---------- responsive ------------------------------------------- */
/* 1240px is measured, not guessed: the 52px crest + the wordmark lockup + six
   nav items + the phone block + the quote button stop fitting one row just
   below this. The lockup is wider than a bare logo, so this breakpoint is
   higher than the 1200px used on builds with a plain wordmark image. */
@media (max-width:1240px){
  .nav-links,.nav-actions{display:none}
  .menu-toggle{
    display:flex;align-items:center;justify-content:center;margin-left:auto;
    width:46px;height:46px;background:transparent;border:1.5px solid rgba(255,255,255,.45);
    border-radius:10px;cursor:pointer;
  }
  .menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
    display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative;
  }
  .menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0}
  .menu-toggle span::before{top:-6px}
  .menu-toggle span::after{top:6px}
  .mobile-menu{
    display:none;flex-direction:column;background:var(--asphalt);
    padding:.4rem clamp(1rem,4vw,2.2rem) 1.2rem;border-bottom:3px solid var(--orange);
    position:sticky;top:calc(100% - 1px);z-index:99;
  }
  .mobile-menu.is-open{display:flex}
  .mobile-menu a{color:#fff;font-weight:600;padding:.78rem 0;border-bottom:1px solid var(--line-dark)}
  .mobile-menu a:last-child{border-bottom:none;color:var(--hiviz)}
  .mobile-menu a:nth-last-child(2){color:var(--hiviz)}
}
@media (min-width:1241px){.mobile-menu{display:none}}
@media (max-width:980px){
  .hero,.why-grid,.page-hero.split,.contact-grid,.guarantee-inner{grid-template-columns:1fr}
  .hero{padding-top:1.9rem}
  .hero-visual{order:-1}
  .hero-badge{position:static;margin-top:1.1rem;max-width:none}
  .guarantee-inner{text-align:left}
  .guarantee-mark{width:62px}
  .contact-card{order:2}
}
@media (max-width:760px){
  body{font-size:16px;padding-bottom:78px}
  .brand-crest{width:44px;height:44px}
  .brand-words strong{font-size:1.15rem}
  .brand-words span{font-size:.56rem;letter-spacing:.1em}
  .hero-trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.05rem}
  .band-head{align-items:flex-start}
  .cta-band{flex-direction:column;align-items:flex-start}
  /* Buttons must stay inside the viewport when the parent stacks — a column
     flex with wrap pushed a stacked button off-screen on the Rusty Tools
     build, so stretch them instead. */
  .cta-actions,.hero-actions{width:100%;flex-wrap:wrap}
  .cta-actions .btn,.hero-actions .btn{flex:1 1 auto}
  .mobile-sticky{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;gap:.45rem;
    padding:.55rem .6rem;background:rgba(11,13,15,.97);
    box-shadow:0 -6px 20px rgba(0,0,0,.32);
  }
  /* width:100% on a fixed bar plus horizontal padding overflows the viewport —
     the Jason's Wrecker bug. left/right:0 with box-sizing handles it. */
  .mobile-sticky .btn{flex:1 1 0;min-width:0;padding:.82rem .5rem;font-size:.92rem}
  .form-embed iframe{min-height:880px}
}
@media (max-width:420px){
  h1{font-size:clamp(2rem,8.6vw,2.6rem)}
  .hero-trust{grid-template-columns:1fr 1fr}
  .mobile-sticky .btn{font-size:.84rem;padding:.8rem .35rem}
}
@media print{
  .site-header,.mobile-menu,.mobile-sticky,.cta-band,.stripe-band{display:none}
  body{font-size:12pt}
}