/* ============================================================
   Courtland Roofing — design system
   ============================================================ */
:root{
  /* brand */
  --navy-900:#0a1826; --navy-800:#10273c; --navy-700:#17364f; --navy-600:#204966;
  --steel:#496f95; --steel-light:#8fb0cd; --steel-pale:#eaf1f7;
  --accent:#e2703a; --accent-dark:#c25a28; --accent-pale:#fdf1ea;
  /* --accent on white is 3.18:1 and fails WCAG AA for text. The fill keeps
     the brand orange; lettering uses this, which is 5.11:1. */
  --accent-text:#b4501f;
  --amber:#f0a840;
  /* neutrals */
  --ink:#152130; --body:#41505f; --muted:#5f7284; --line:#e4eaf0;
  --bg:#ffffff; --bg-soft:#f6f9fc; --bg-tint:#eef4f9;
  /* system */
  --r-sm:10px; --r:14px; --r-lg:22px; --r-pill:999px;
  --sh-sm:0 2px 8px rgba(10,24,38,.06);
  --sh:0 10px 30px rgba(10,24,38,.09);
  --sh-lg:0 24px 60px rgba(10,24,38,.16);
  --maxw:1180px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--body);background:var(--bg);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font);color:var(--ink);margin:0 0 .5em;
  line-height:1.14;font-weight:800;letter-spacing:-.022em}
h1{font-size:clamp(2.3rem,5vw,3.75rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
h3{font-size:1.22rem;letter-spacing:-.015em}
p{margin:0 0 1.15rem}
a{color:var(--steel);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-text)}
img{max-width:100%;height:auto;display:block}
strong{color:var(--ink);font-weight:700}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}
.muted{color:var(--muted)}
.narrow{max-width:780px;margin-left:auto;margin-right:auto}

/* ---------- eyebrow / section heads ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;text-transform:uppercase;
  letter-spacing:.16em;font-size:.72rem;font-weight:800;color:var(--accent-text);margin-bottom:.9rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.eyebrow.center-eb{justify-content:center}
.sec-head{max-width:720px;margin:0 auto 3rem;text-align:center}
.sec-head p{color:var(--muted);font-size:1.06rem;margin:0}
.sec-head.left{margin-left:0;text-align:left}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:var(--r-pill);font-weight:700;font-size:.97rem;
  border:2px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s;
  text-align:center;line-height:1.2}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(226,112,58,.32)}
.btn-accent:hover{background:var(--accent-dark);color:#fff;box-shadow:0 10px 26px rgba(226,112,58,.4)}
.btn-navy{background:var(--navy-800);color:#fff}
.btn-navy:hover{background:var(--navy-900);color:#fff}
.btn-ghost{background:transparent;color:var(--navy-800);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy-800);color:var(--navy-800);background:#fff}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.btn-light:hover{background:#fff;color:var(--navy-800)}
.btn-lg{padding:1.05rem 2rem;font-size:1.04rem}
.btn.block{display:flex;width:100%;margin-bottom:.6rem}
/* Shown only where .phone-link is hidden, so a call is never more than
   one tap away on the screens most of this traffic arrives on. */
.call-sm{display:none;padding:.62rem .95rem}
.call-sm .ico{width:1.15em;height:1.15em}
.ico{width:1em;height:1em;flex:none;vertical-align:-.11em}
.site-footer a .ico{width:.95em;height:.95em;margin-right:.3rem}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.75rem 0}
.brand img{width:152px}
.main-nav>ul{list-style:none;display:flex;gap:.15rem;margin:0;padding:0}
/* The page you are on is a <span>, not an <a>, so that it is not a link to
   itself. It still has to look like the item it replaced: styled as a link
   only, it inherited nothing -- no padding, no weight, display:inline -- and
   came out thin, grey and sitting a few pixels off its neighbours. Both
   selectors carry the same box. */
.main-nav>ul>li>a,
.main-nav>ul>li>.active{display:block;padding:.6rem .85rem;border-radius:var(--r-sm);
  color:var(--navy-800);font-weight:700;font-size:.95rem}
.main-nav>ul>li>a:hover{background:var(--bg-tint);color:var(--navy-900)}
/* Two different states share this class. `.active` on a link means "the
   section you are inside", worth a tint. `[aria-current]` means "this exact
   page", which earns the stronger mark. */
.main-nav .active{color:var(--accent-text);background:var(--accent-pale)}
.main-nav .active[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
.dropdown-menu .active{display:block;padding:.62rem .8rem;border-radius:var(--r-sm);
  font-weight:700;font-size:.92rem}
/* The footer is dark, so the pale accent chip would glare. Same idea, quieter. */
.site-footer .active{color:#fff;font-weight:700}
.has-dropdown{position:relative}
/* Transparent bridge across the gap between the nav item and its menu. It sits
   on the list item rather than inside .dropdown-menu, because that scrolls
   (overflow:auto) and would clip a child pseudo-element. */
.has-dropdown::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px;
  display:none}
.has-dropdown:hover::after{display:block}
.caret{font-size:.62em;opacity:.7;margin-left:.15rem}
.dd-caret{display:none}   /* mobile-only toggle; see the 860px block */
.has-dropdown>a,.has-dropdown>.active{display:inline-flex;align-items:center}
.dropdown-menu{position:absolute;top:100%;left:0;min-width:250px;max-height:78vh;overflow:auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:.45rem;
  display:none;flex-direction:column;gap:1px;margin-top:6px}
.dd-head{display:block;padding:.55rem .8rem .3rem;font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.dd-head:not(:first-child){margin-top:.3rem;border-top:1px solid var(--line);padding-top:.6rem}
.dropdown-menu a{padding:.62rem .8rem;border-radius:var(--r-sm);color:var(--body);font-weight:600;font-size:.92rem}
.dropdown-menu a:hover{background:var(--bg-tint);color:var(--navy-900)}
.has-dropdown:hover .dropdown-menu,.has-dropdown:focus-within .dropdown-menu{display:flex}
.header-cta{display:flex;align-items:center;gap:1rem}
.phone-link{font-weight:800;color:var(--navy-900);font-size:1.06rem;white-space:nowrap}
.phone-link small{display:block;font-size:.66rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;line-height:1}
.nav-toggle{display:none}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem}
.hamburger span{width:24px;height:2.5px;background:var(--navy-800);border-radius:2px}

/* ---------- hero ---------- */
.hero{position:relative;background-size:cover;background-position:center;color:#fff;overflow:hidden}
/* The drifting layer. The photo is set inline on .hero, so this copies the
   whole background shorthand off its parent rather than naming a file the
   stylesheet does not know. Transform on a pseudo-element is composited and
   never touches layout, and because it only ever scales up past 1 the frame
   stays covered -- so this costs nothing and cannot expose an edge. It also
   leaves Largest Contentful Paint alone: .hero still paints its own
   background at the normal time, this just moves on top of it. */
.hero::before{content:"";position:absolute;inset:0;background:inherit;
  background-size:cover;background-position:inherit;transform-origin:52% 50%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(10,24,38,.94) 0%,rgba(16,39,60,.86) 45%,rgba(16,39,60,.55) 100%)}
.hero-inner{position:relative;z-index:2;padding:6rem 24px 7.5rem;max-width:760px}
.hero h1{color:#fff;margin-bottom:1.1rem}
.hero h1 .hl{color:var(--amber)}
.hero-sub{font-size:1.16rem;color:#d3e2ee;margin-bottom:2rem;max-width:600px}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2rem}
.hero-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.hero-chips span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  padding:.4rem .95rem;border-radius:var(--r-pill);font-size:.83rem;font-weight:600;color:#eaf3fa}
.section.dark .eyebrow,.numbers-band .eyebrow{color:var(--accent)}
.hero .eyebrow{color:var(--amber)}
.hero .eyebrow::before{background:var(--amber)}

/* stats strip overlapping hero */
.stats-strip{position:relative;z-index:5;margin-top:-3.6rem}
.stats-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.stat{padding:1.7rem 1.4rem;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat b{display:block;font-size:1.02rem;color:var(--ink);font-weight:800;margin-bottom:.15rem}
.stat span{font-size:.83rem;color:var(--muted);line-height:1.4;display:block}
.stat .ic{font-size:1.5rem;display:block;margin-bottom:.5rem}

/* ---------- sections ---------- */
.section{padding:5.5rem 0}
.section.tight{padding:4rem 0}
.section.soft{background:var(--bg-soft)}
.section.tint{background:var(--bg-tint)}
.section.dark{background:var(--navy-900);color:#c3d5e4}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark .sec-head p{color:#9fb8cc}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;box-shadow:var(--sh-sm)}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.svc-card figure{margin:0;height:180px;background-size:cover;background-position:center;position:relative}
.svc-card figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,24,38,0) 45%,rgba(10,24,38,.55) 100%)}
.svc-card .body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.svc-card h3{margin-bottom:.4rem;color:var(--ink)}
.svc-card p{font-size:.93rem;color:var(--muted);margin-bottom:1rem;flex:1}
.svc-card .go{font-weight:800;font-size:.88rem;color:var(--accent-text);display:inline-flex;gap:.35rem;padding:.15rem 0}
.svc-card:hover .go{gap:.6rem}

.svc-group{margin-bottom:3.5rem}
.svc-group:last-child{margin-bottom:0}
.svc-group-head{margin-bottom:1.5rem;padding-bottom:.9rem;border-bottom:2px solid var(--line)}
.svc-group-head h2{font-size:1.5rem;margin-bottom:.3rem}
.svc-group-head p{margin:0;color:var(--muted);font-size:.96rem;max-width:60ch}

/* "not sure what you need" router on the services hub */
.helper-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.helper-grid a{display:flex;flex-direction:column;gap:.25rem;padding:1.15rem 1.25rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.helper-grid a:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--steel-light)}
.helper-grid b{color:var(--ink);font-size:1rem;font-weight:800}
.helper-grid span{color:var(--muted);font-size:.87rem;line-height:1.5}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split-img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);
  min-height:420px;background-size:cover;background-position:center;position:relative}
.check-list{list-style:none;padding:0;margin:1.4rem 0 2rem}
.check-list li{position:relative;padding-left:2.3rem;margin-bottom:.95rem;color:var(--body)}
.check-list li::before{content:"✓";position:absolute;left:0;top:.1rem;width:1.55rem;height:1.55rem;
  border-radius:50%;background:var(--accent-pale);color:var(--accent-text);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem}

/* Same shape as .check-list for a list that is not a list of benefits. A green
   tick beside "Google receives your IP address" tells the reader the opposite
   of what the sentence says, so disclosures get a neutral marker. */
.plain-list{list-style:none;padding:0;margin:1.4rem 0 2rem}
.plain-list li{position:relative;padding-left:2.3rem;margin-bottom:.95rem;color:var(--body)}
.plain-list li::before{content:"";position:absolute;left:.55rem;top:.62rem;
  width:.45rem;height:.45rem;border-radius:50%;background:var(--steel-light)}

/* ---------- contact page ---------- */
.cmethods{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cmethod{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem;
  box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.cmethod:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--steel-light)}
.cmethod .cm-ic{display:flex;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;
  border-radius:50%;background:var(--accent-pale);color:var(--accent-text);
  font-size:1.25rem;margin-bottom:1rem}
.cmethod .cm-kind{font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.15em;color:var(--muted)}
.cmethod strong{font-size:1.28rem;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.cmethod small{color:var(--muted);font-size:.86rem;line-height:1.5;margin-top:.35rem;
  overflow-wrap:anywhere}

/* Numbered because the order is the point -- it answers "what am I signing up
   for if I call". The counter is drawn rather than using the list marker so it
   can sit in the same accent disc as the icons above it. */
.steps{list-style:none;counter-reset:step;padding:0;margin:1.6rem 0 0}
.steps li{counter-increment:step;position:relative;padding-left:3.6rem;margin-bottom:1.7rem}
.steps li:last-child{margin-bottom:0}
.steps li::before{content:counter(step);position:absolute;left:0;top:-.1rem;
  width:2.4rem;height:2.4rem;border-radius:50%;background:var(--navy-800);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem}
.steps b{display:block;color:var(--ink);font-size:1.04rem;margin-bottom:.2rem}
.steps span{color:var(--body);font-size:.96rem;line-height:1.7}

.detail-list{list-style:none;padding:0;margin:0}
.detail-list li{display:grid;grid-template-columns:5.2rem 1fr;gap:.8rem;
  padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.detail-list li:last-child{border-bottom:none;padding-bottom:0}
.detail-list span{font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);padding-top:.22rem}
.detail-list b{color:var(--ink);font-weight:700;line-height:1.55}
.small-note{font-size:.84rem;line-height:1.6;margin:1.1rem 0 0}
.check-list.tight-list{margin:0}
.check-list.tight-list li{font-size:.93rem;margin-bottom:.7rem}
.check-list.tight-list li:last-child{margin-bottom:0}

@media(max-width:860px){
  .cmethods{grid-template-columns:1fr}
}

/* ---------- reviews ---------- */
.reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem;margin:0;
  box-shadow:var(--sh-sm);position:relative}
.review .stars{color:#a86500;letter-spacing:.14em;margin-bottom:.9rem;font-size:1.02rem}
.review blockquote{margin:0 0 1.2rem;font-size:1rem;color:var(--body);line-height:1.75}
.review figcaption{display:flex;align-items:center;gap:.75rem;font-weight:800;color:var(--ink);font-size:.95rem}
/* Reviews run from fourteen words to two hundred. In a two-column grid the
   long one stretches its row and leaves the cell beside it mostly empty, so
   the grid clamps too. Full text stays in the markup. */
.reviews-grid .review blockquote{overflow:hidden;display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:11;line-clamp:11}
.reviews-grid .review figcaption{margin-top:auto}
.reviews-grid .review{display:flex;flex-direction:column}
.review .who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.review .who small{font-weight:600;font-size:.78rem;color:var(--muted);letter-spacing:.01em}

/* ---------- reviews rail ----------
   A continuous marquee of every review. The track holds the set twice and
   slides exactly one set per pass, so the loop has no seam. See reviews_rail()
   in build.py for why the offset is a margin and not a flex gap. */
.rail-head{max-width:var(--maxw);margin:0 auto 1.4rem;padding:0 24px;display:flex;justify-content:flex-end}
.rail-toggle{display:inline-flex;align-items:center;gap:.5rem;background:#fff;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.5rem 1.05rem;
  font-family:var(--font);font-size:.83rem;font-weight:700;color:var(--body)}
.rail-toggle:hover{border-color:var(--steel-light);color:var(--navy-900)}
/* Two bars for pause; the same box becomes a triangle for play. Borders rather
   than a clip-path, which renders reliably at this size where a nine-point
   polygon does not. */
.rail-toggle .rt-ico{width:.62rem;height:.7rem;flex:none;
  border-left:.21rem solid currentColor;border-right:.21rem solid currentColor}
.rail-toggle[aria-pressed="true"] .rt-ico{width:0;height:0;border:none;
  border-left:.62rem solid currentColor;
  border-top:.35rem solid transparent;border-bottom:.35rem solid transparent}

.rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5.5rem,#000 calc(100% - 5.5rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5.5rem,#000 calc(100% - 5.5rem),transparent)}
.rail-track{display:flex;width:max-content}
.rail-dup{display:flex;flex:none}
.rail .review{width:400px;flex:none;margin-right:1.6rem;height:22.5rem;
  display:flex;flex-direction:column}
/* Fixed-height cards keep the row from stepping up and down as it moves, so
   the long reviews are clamped. The full text stays in the markup either way,
   which is what a crawler and a screen reader read. */
.rail .review blockquote{flex:1;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:9;line-clamp:9;font-size:.96rem}
.rail .review figcaption{border-top:1px solid var(--line);padding-top:1rem;margin-top:auto}

@media(prefers-reduced-motion:no-preference){
  .rail-track{animation:rail-slide 165s linear infinite}
  /* Three ways to stop it: the pointer, the keyboard, and the button. */
  .rail:hover .rail-track,
  .rail:focus-within .rail-track,
  .rail:active .rail-track,
  .rail.is-held .rail-track{animation-play-state:paused}
}
@keyframes rail-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* With motion turned down the rail does not move on its own, so it has to be
   pushable by hand instead -- otherwise everything past the third card is
   unreachable. The duplicate set is redundant then, and goes. */
@media(prefers-reduced-motion:reduce){
  .rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}
  .rail .review{scroll-snap-align:center}
  .rail-dup{display:none}
  .rail-head{display:none}
}

@media(max-width:560px){
  .rail .review{width:82vw;padding:1.5rem;height:24rem}
}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--navy-700);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex:none}

/* ---------- faq ---------- */
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:.7rem;
  padding:.15rem 1.35rem;transition:box-shadow .18s}
.faq[open]{box-shadow:var(--sh-sm);border-color:var(--steel-light)}
.faq summary{cursor:pointer;font-weight:800;color:var(--ink);padding:1.05rem 2rem 1.05rem 0;
  list-style:none;position:relative;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  color:var(--accent);font-weight:800;font-size:1.3rem}
.faq[open] summary::after{content:"–"}
.faq p{color:var(--muted);padding-bottom:1rem;margin:0;font-size:.96rem}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(115deg,var(--navy-900),var(--navy-600) 70%,var(--steel));
  color:#fff;padding:4.5rem 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
  border-radius:50%;background:rgba(255,255,255,.05)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;position:relative;z-index:2}
.cta-band h2{color:#fff;margin-bottom:.4rem}
.cta-band p{color:#c9dceb;margin:0}
.cta-actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- page hero (inner) ---------- */
.page-hero{position:relative;background-size:cover;background-position:center;color:#fff;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,24,38,.95),rgba(16,39,60,.78))}
.page-hero .container{position:relative;z-index:2;padding-top:3.6rem;padding-bottom:3.6rem}
.page-hero h1{color:#fff;margin-bottom:.9rem;max-width:16ch}
.page-hero .lede{color:#d3e2ee;max-width:640px;font-size:1.08rem;margin-bottom:1.5rem}
.crumbs{font-size:.83rem;color:#9dbad2;margin-bottom:1.1rem;font-weight:600}
.crumbs a{color:#9dbad2;display:inline-block;padding:.22rem 0}
.crumbs a:hover{color:#fff}
.crumbs span{color:#fff}

/* ---------- service page: section nav + blocks ---------- */

.prose{max-width:820px;margin:0 auto}
.qblock{scroll-margin-top:110px;padding:2.4rem 0;border-bottom:1px solid var(--line)}
.qblock:last-of-type{border-bottom:none}
.qblock>h2{font-size:1.58rem;margin:0 0 1rem}

/* plain supporting list — no icons, just quiet bullets */
.plain{list-style:none;padding:0;margin:1.3rem 0 0}
.plain li{position:relative;padding-left:1.25rem;margin-bottom:.6rem;color:var(--body)}
.plain li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--steel-light)}

/* the direct answer paragraph — leads each block, quotable by search engines */
.answer{font-size:1.06rem;color:var(--ink);line-height:1.72;margin-bottom:1.3rem}
.qblock 
/* content bits inside blocks */
.lede-p{font-size:1.08rem;color:var(--ink)}
.callout{display:flex;gap:1rem;background:var(--accent-pale);border:1px solid #f6d9c6;
  border-radius:var(--r);padding:1.3rem 1.5rem;margin:1.5rem 0}
.callout .c-ic{font-size:1.5rem;line-height:1.2}
.callout p{margin:0;font-size:.95rem}
.callout strong{display:block;margin-bottom:.2rem}
.note-box{background:var(--navy-900);color:#c9dceb;border-radius:var(--r);padding:1.4rem 1.6rem;margin:1.5rem 0}
.note-box strong{color:#fff}
.note-box p{margin:0;font-size:.95rem}

/* process timeline */
.timeline{list-style:none;counter-reset:tl;padding:0;margin:1.5rem 0 0}
.timeline li{counter-increment:tl;position:relative;padding-left:3.6rem;padding-bottom:1.8rem}
.timeline li::before{content:counter(tl);position:absolute;left:0;top:0;width:2.3rem;height:2.3rem;
  border-radius:50%;background:#fff;border:2px solid var(--accent);color:var(--accent-text);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;z-index:2}
.timeline li::after{content:"";position:absolute;left:1.13rem;top:2.3rem;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child{padding-bottom:0}
.timeline li:last-child::after{display:none}
.timeline b{display:block;color:var(--ink);font-size:1rem;margin-bottom:.15rem}
.timeline span{font-size:.94rem;color:var(--muted)}

/* reasons to choose, under the Who section */
.reasons-lead{margin:1.3rem 0 .9rem;font-weight:700;color:var(--ink)}
.reasons{list-style:none;padding:0;margin:0}
.reasons li{position:relative;padding-left:1.9rem;margin-bottom:.85rem}
.reasons li::before{content:"";position:absolute;left:0;top:.42em;width:1.15rem;height:.6rem;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);border-radius:1px}
.reasons b{display:block;color:var(--ink);font-size:.99rem;font-weight:700;line-height:1.4}
.reasons span{display:block;font-size:.93rem;color:var(--muted);line-height:1.6}

/* trust row */
.trust-row{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-top:1.4rem;
  padding:1.2rem 1.4rem;background:var(--bg-soft);border-radius:var(--r)}
.trust-row img{border-radius:8px;border:1px solid var(--line)}
.trust-row .tr-text{font-size:.9rem;color:var(--muted);max-width:420px}

/* city pills, restored: bare inline links ran together with no separation */
.city-links{display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.city-links a{display:inline-block;max-width:100%;padding:.3rem .78rem;
  border-radius:var(--r-pill);font-size:.84rem;font-weight:600;
  border:1px solid var(--line);background:var(--bg-soft);color:var(--body);
  transition:background .14s,border-color .14s,color .14s}
.city-links a:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.city-links a.soft{background:#fff;color:var(--muted);font-weight:500}
.city-links a.soft:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}

/* county blocks: collapsed by default, but every link stays in the HTML */
.areas{margin:1.8rem 0 0;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:#fff}
.area-blk{border-top:1px solid var(--line)}
.area-blk:first-child{border-top:none}
.area-blk summary{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;cursor:pointer;list-style:none;padding:.95rem 1.2rem;
  transition:background .14s}
.area-blk summary::-webkit-details-marker{display:none}
.area-blk summary:hover{background:var(--bg-tint)}
.ab-name{display:flex;align-items:center;gap:.6rem;font-weight:700;
  font-size:.99rem;color:var(--ink)}
.ab-name::before{content:"";width:8px;height:8px;flex:none;margin-top:-2px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);transition:transform .18s}
.area-blk[open] .ab-name::before{transform:rotate(45deg)}
.area-blk[open] summary{background:var(--bg-soft)}
.ab-num{font-size:.76rem;font-weight:700;color:var(--steel);white-space:nowrap;
  background:var(--steel-pale);padding:.14rem .62rem;border-radius:var(--r-pill)}
.ab-body{padding:.3rem 1.2rem 1.2rem}
.ab-more{display:inline-block;margin-top:.9rem;padding:.3rem 0;font-size:.84rem;
  font-weight:700;color:var(--accent-text)}

/* ---------- Where: coverage map ---------- */
/* Two layers on purpose: the panel answers "roughly where?" at a glance, the
   directory answers "is my town on the list?". Mixing them made 89 identical
   pills with no hierarchy. */
.coverage{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);margin:1.8rem 0 0}

.map-panel{padding:1.5rem 1.4rem;background:
  radial-gradient(circle at 50% 38%, #fff 0%, var(--bg-soft) 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem}
.ut-map{width:100%;max-width:210px;height:auto;display:block}
.ut-map .ut{fill:#e8edf2;stroke:#d3dce5;stroke-width:2;stroke-linejoin:round}
.ut-map .area{fill:url(#areaFill);stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.ut-map .pin circle{fill:var(--navy-900);r:3;stroke:#fff;stroke-width:1.4}
.ut-map .pin text{font-size:11.5px;font-weight:700;fill:var(--navy-900);
  font-family:var(--font);text-anchor:end;paint-order:stroke;
  stroke:#fff;stroke-width:3.2px;stroke-linejoin:round}
.ut-map .ut-label{font-size:13px;font-weight:800;fill:#c3cedb;letter-spacing:.26em;
  font-family:var(--font)}
.map-key{margin:0;font-size:.76rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em;text-align:center}
.map-key .swatch{display:inline-block;width:12px;height:12px;border-radius:4px;
  background:rgba(226,112,58,.24);border:1.5px solid var(--accent);
  margin-right:.4rem;vertical-align:-.1em}




/* city page specifics */
.local-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1.6rem 0}
.lf{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem}
.lf b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.25rem}
.lf span{font-size:.95rem;color:var(--ink);font-weight:600}
.nearby{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}

/* County cards on the service-areas hub. These classes existed in the markup
   with no rules behind them, which is why the hub rendered as flat text. */
.county-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.county-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.9rem 2rem;display:flex;flex-direction:column;min-width:0;
  transition:border-color .18s,box-shadow .18s}
.county-card:hover{border-color:var(--steel-light);box-shadow:var(--sh)}
.county-card header{margin-bottom:.5rem}
.county-card h3{font-size:1.42rem;margin:0}
.county-card h3 a{color:var(--ink)}
.county-card h3 a:hover{color:var(--accent-text)}
.county-card .blurb{font-size:.94rem;margin:0 0 1.1rem;color:var(--body)}
.cc-meta{display:flex;gap:0;margin:0 0 1.2rem;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--bg-soft)}
.cc-meta>div{flex:1;padding:.7rem .85rem;border-left:1px solid var(--line)}
.cc-meta>div:first-child{border-left:none}
.cc-meta b{display:block;font-size:1.05rem;font-weight:800;color:var(--ink);line-height:1.2}
.cc-meta span{display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;margin-top:.15rem}
.cc-btn{align-self:flex-start;margin-top:auto;padding-top:.7rem;padding-bottom:.7rem}
.county-card .city-links{margin-bottom:1.4rem}

/* Collapsed detail blocks. Content stays in the HTML and stays crawlable,
   it just is not all competing for the reader's attention at once. */
.drop{border:1px solid var(--line);border-radius:var(--r);margin-top:.8rem;background:#fff}
.drop>summary{cursor:pointer;padding:.85rem 1.15rem;font-weight:700;font-size:.94rem;
  color:var(--navy-800);list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1rem}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::after{content:"+";font-size:1.15rem;font-weight:700;color:var(--accent);flex:none}
.drop[open]>summary::after{content:"−"}
.drop>summary:hover{color:var(--accent)}
.drop>*:not(summary){padding:0 1.15rem}
.drop>*:last-child{padding-bottom:1.15rem}
.drop p{font-size:.93rem;margin-top:.2rem}

.hoods-foot{font-size:.94rem;margin-top:1rem}

/* "Signs your roof is done" list under the timing question */
.signs{list-style:none;padding:0;margin:1rem 0 0}
.signs li{position:relative;padding-left:1.9rem;margin-bottom:.75rem;font-size:.94rem;
  line-height:1.6}
.signs li:last-child{margin-bottom:0}
.signs li::before{content:"";position:absolute;left:.15rem;top:.55em;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--accent)}

/* Areas we work in. Neighborhoods and landmarks used to be two separate lists
   that named the same places twice; this is one list where each entry carries
   the reason a roof there behaves the way it does. */
.areas{margin:1.3rem 0 0;border-top:1px solid var(--line)}
.areas dt{font-weight:800;color:var(--ink);font-size:.98rem;padding-top:1rem}
.areas dd{margin:.2rem 0 0;padding-bottom:1rem;border-bottom:1px solid var(--line);
  font-size:.93rem;line-height:1.6}

/* H3 inside a section, so Where We Work can hold three blocks without three H2s */
.sub-head{margin:2.2rem 0 .6rem;font-size:1.12rem}

/* City pages run a single column: no sidebar competing with the content, and
   a measure narrow enough to read comfortably at full container width. */
.city-body{max-width:880px;margin:0 auto}

/* Local problem tiles, two up. Kept plain on purpose: the type carries it, so
   there is no badge or stripe competing with the heading. */
.needs{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.7rem 0 0}
.need{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.75rem 1.8rem;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.need:hover{border-color:var(--steel-light);box-shadow:var(--sh);transform:translateY(-2px)}
.need h3{font-size:1.08rem;margin:0 0 .6rem;line-height:1.35}
.need p{margin:0 0 1.15rem;font-size:.93rem;color:var(--body)}
.need .go{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding:.15rem 0;
  font-size:.86rem;font-weight:700;color:var(--accent-text)}
.need .go i{font-style:normal;transition:transform .18s}
.need:hover .go i{transform:translateX(3px)}
.need .go:hover{color:var(--accent-dark)}

/* Roof-age and elevation numbers, sitting under the conditions paragraph they
   describe. They are facts about the city, not about the timing decision. */
.roofstat{display:flex;flex-wrap:wrap;gap:0;margin:1.5rem 0 0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.roofstat>div{flex:1 1 150px;padding:1.1rem 1.3rem;border-left:1px solid var(--line)}
.roofstat>div:first-child{border-left:none}
.roofstat b{display:block;font-size:1.5rem;font-weight:800;color:var(--ink);
  line-height:1.1;letter-spacing:-.02em}
.roofstat span{display:block;margin-top:.2rem;font-size:.8rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;font-weight:700}

/* the CTA the sidebar used to carry, now inline at the conversion point */
.inline-cta{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  flex-wrap:wrap;background:var(--navy-900);border-radius:var(--r-lg);
  padding:1.7rem 1.9rem;margin:1.8rem 0 0}
.inline-cta h3{color:#fff;margin:0 0 .3rem;font-size:1.18rem}
.inline-cta p{color:#c9dceb;margin:0;font-size:.94rem}
.ic-actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* neighborhood chips are not links: these are areas, not pages */
.hoods span{display:inline-block;padding:.3rem .78rem;border-radius:var(--r-pill);
  font-size:.84rem;font-weight:600;border:1px solid var(--line);
  background:var(--bg-soft);color:var(--body)}
.hoods{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}

/* provenance line under the data strip */
.src{font-size:.82rem;color:var(--muted);margin:.7rem 0 0;line-height:1.55}

/* ---------- article + sidebar layout ----------
   Used by the city, county, insurance and contact pages. The mobile
   overrides for these live in the max-width block at the end of the file;
   these are the base rules they override. */
.content-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:3.2rem;
  align-items:start}
.content-wrap > article{min-width:0}
.side{display:flex;flex-direction:column;gap:1.2rem;position:sticky;top:1.5rem}
.side-card{background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.5rem 1.6rem}
.side-card h3{font-size:1.02rem;margin:0 0 .9rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--line);color:var(--ink)}
.side-card.dark{background:var(--navy-900);border-color:var(--navy-900);color:#c9dceb}
.side-card.dark h3{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.side-card.dark p{font-size:.93rem;color:#c9dceb}
.side-card p a{display:inline-block;padding:.3rem 0}
/* .btn-ghost is navy text on a transparent background, which is correct on a
   white page and unreadable here -- #10273c on #0a1826 is a contrast ratio of
   about 1.3:1. On a dark card it takes the light treatment instead. */
.side-card.dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.08)}
.side-card.dark .btn-ghost:hover{background:#fff;color:var(--navy-800);border-color:#fff}

/* one link per line, so 18 services read as a list rather than a paragraph */
.side-links{display:flex;flex-direction:column}
.side-links a{display:block;padding:.5rem 0;font-size:.92rem;font-weight:600;
  color:var(--body);border-top:1px solid var(--line)}
.side-links a:first-child{border-top:none;padding-top:0}
.side-links a:hover{color:var(--accent-text)}

.facts{list-style:none;padding:0;margin:0}
.facts li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;
  font-size:.92rem;line-height:1.5}
.facts li:last-child{margin-bottom:0}
.facts li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--accent);font-weight:800;font-size:.85rem}

/* ---------- contact ---------- */
.contact-line{font-size:1.05rem;margin-bottom:.35rem;font-weight:600;color:var(--ink)}
.contact-line a{display:inline-block;padding:.32rem 0}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-900);color:#9fb8cc;padding:4rem 0 1.5rem;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:2.5rem}
.site-footer h3,.site-footer h4{color:#fff;font-size:.98rem;margin-bottom:1rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.15rem}
.site-footer li a{display:inline-block;padding:.32rem 0}
.site-footer a{color:#9fb8cc}
.site-footer a:hover{color:#fff}
.footer-logo{background:#fff;padding:.7rem .9rem;border-radius:var(--r);margin-bottom:1.1rem;width:170px}
.footer-badges{font-size:.8rem;color:#7893ab;margin-top:.9rem;line-height:1.6}
.footer-bottom a{display:inline-block;padding:.3rem 0}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding-top:1.3rem;font-size:.82rem;color:#7893ab}

/* ============================================================
   Numbers band (home page)
   ============================================================ */
.numbers-band{background:var(--navy-900)}
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.num{text-align:center;padding:2.2rem 1.2rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.num b{display:block;font-size:clamp(2.6rem,6vw,3.9rem);font-weight:800;color:#fff;
  line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
/* The "+" is set apart so it reads as a qualifier on the figure rather than
   as another digit, and so it can lag the number in on the way up. */
.num b i{font-style:normal;color:var(--amber);font-size:.62em;vertical-align:.28em;margin-left:.06em}
/* Direct child only. The counting figure is also a <span>, nested inside the
   <b>, and a descendant selector here turned the number itself into a small
   grey uppercase label and pushed the "+" onto its own line. */
.num>span{display:block;margin-top:.7rem;font-size:.9rem;font-weight:600;color:#9fb8cc;
  text-transform:uppercase;letter-spacing:.1em}
.num b span{font:inherit;color:inherit;letter-spacing:inherit}
.numbers-note{margin:2.4rem auto 0;max-width:640px;text-align:center;font-size:.95rem;
  color:#9fb8cc;border-top:1px solid rgba(255,255,255,.1);padding-top:1.6rem}

@media(max-width:860px){
  .numbers{grid-template-columns:1fr;gap:.8rem}
  .num{padding:1.5rem 1rem;display:flex;align-items:baseline;justify-content:center;gap:.9rem}
  .num b{font-size:2.4rem}
  .num>span{margin-top:0}
}

/* ============================================================
   Motion
   ------------------------------------------------------------
   Two rules govern everything below, and both exist to keep this
   from costing anything.

   1. Nothing is hidden waiting for a script. There is no JavaScript
      on this site. Entrance animations are keyframes that run on
      load; scroll reveals use animation-timeline, which is CSS-only,
      and are wrapped in @supports so a browser without it simply
      shows the content. A reveal that fails to fire is invisible,
      never blank.

   2. The hero h1 rises but never fades. An element at opacity 0 has
      not painted, so fading the largest text in the viewport moves
      Largest Contentful Paint by the length of the fade. Transform
      does not: the element paints immediately, just offset. So the
      headline moves and everything around it fades.
   ============================================================ */
@keyframes rise-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rise-only{from{transform:translateY(16px)}to{transform:none}}
@keyframes lift-in{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
/* Same movement as lift-in, expressed with the independent translate/scale
   properties rather than transform. This matters: a filled scroll-driven
   animation holds its final value forever, and an animation beats a normal
   declaration, so a reveal that ended on transform:none would silently kill
   the :hover lift on every card it touched. translate and scale compose with
   transform instead of replacing it, so both survive. */
@keyframes reveal-in{from{opacity:0;translate:0 22px;scale:.985}to{opacity:1;translate:none;scale:none}}

@media(prefers-reduced-motion:no-preference){
  .hero h1{animation:rise-only .5s cubic-bezier(.22,.61,.36,1) both}
  .hero .eyebrow{animation:rise-fade .5s cubic-bezier(.22,.61,.36,1) both}
  .hero-sub{animation:rise-fade .5s cubic-bezier(.22,.61,.36,1) .1s both}
  .hero-actions{animation:rise-fade .5s cubic-bezier(.22,.61,.36,1) .18s both}
  .hero-chips{animation:rise-fade .5s cubic-bezier(.22,.61,.36,1) .26s both}
  .stats-card{animation:lift-in .6s cubic-bezier(.22,.61,.36,1) .34s both}

  /* The chips and the accent buttons get a little life on hover, which is
     the one place motion is unambiguously an answer to something the
     reader did. */
  .hero-chips span{transition:background .2s,border-color .2s,transform .2s}
  .hero-chips span:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45);
    transform:translateY(-2px)}
  .stat{transition:background .2s}
  .stat:hover{background:var(--bg-soft)}
  .num{transition:transform .25s,background .25s,border-color .25s}
  .num:hover{transform:translateY(-4px);background:rgba(255,255,255,.075);
    border-color:rgba(240,168,64,.4)}
}

/* Scroll reveal. Base state is fully visible, so this is additive only:
   browsers without animation-timeline get a static page, not an empty one. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .reveal,.numbers-band .sec-head,
    .section .svc-grid>.svc-card,.section .split>*,.reviews-grid>.review{
      animation:reveal-in .7s cubic-bezier(.22,.61,.36,1) both;
      animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
  }
  /* The hero photo drifts. Starting at 1.06 leaves room for the pan without
     ever exposing an edge, and the pass is long enough that it reads as depth
     rather than as something sliding. */
  .hero::before{animation:hero-drift 15s ease-in-out infinite alternate}
}
@keyframes hero-drift{
  from{transform:scale(1.05) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(-1.4%,-1%,0)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .helper-grid{grid-template-columns:repeat(2,1fr)}
  .content-wrap{grid-template-columns:1fr;gap:2.5rem}
  .side{position:static;flex-direction:row;flex-wrap:wrap}
  .side-card{flex:1;min-width:260px}
  .split{grid-template-columns:1fr;gap:2.5rem}
  .split-img{min-height:300px}
  .stats-card{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .local-facts{grid-template-columns:1fr 1fr}
  .needs{grid-template-columns:1fr}
  .county-grid{grid-template-columns:1fr}
  .roofstat>div{border-left:none;border-top:1px solid var(--line)}
  .roofstat>div:first-child{border-top:none}
  .inline-cta{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .svc-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .hamburger{display:flex}
  .header-cta .phone-link{display:none}
  .call-sm{display:inline-flex}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-top:1px solid var(--line);box-shadow:var(--sh-lg);padding:.6rem;max-height:75vh;overflow:auto}
  .nav-toggle:checked~.main-nav{display:block}
  .main-nav>ul{flex-direction:column;gap:0}
  .main-nav>ul>li>a{padding:.85rem;border-bottom:1px solid var(--line);border-radius:0}
  .dropdown-menu{position:static;display:none;box-shadow:none;border:none;
    padding:.2rem 0 .6rem 1rem;min-width:0;margin-top:0;max-height:none;overflow:visible}
  .dd-toggle:checked~.dropdown-menu{display:flex}
  .has-dropdown{display:flex;flex-wrap:wrap;align-items:stretch;
    border-bottom:1px solid var(--line)}
  .has-dropdown>a,.has-dropdown>.active{flex:1;border-bottom:none}
  .has-dropdown>a .caret,.has-dropdown>.active .caret{display:none}
  .dd-caret{display:flex;align-items:center;justify-content:center;width:56px;
    cursor:pointer;color:var(--navy-800);border-left:1px solid var(--line);font-size:.8rem}
  .dd-caret span{opacity:.85;transition:transform .18s}
  .dd-toggle:checked~.dd-caret span{transform:rotate(180deg)}
  .dd-toggle:checked~.dd-caret{background:var(--bg-tint)}
  .dd-toggle:focus-visible~.dd-caret{outline:2px solid var(--accent);outline-offset:-2px}
  .has-dropdown>.dropdown-menu{flex:1 0 100%}
  .has-dropdown::after{display:none}
  /* Hover must not open these on a touch screen -- a tap registers as a hover
     and the menu would spring open under the finger that meant to navigate. */
  .has-dropdown:hover .dropdown-menu,.has-dropdown:focus-within .dropdown-menu{display:none}
  .dd-toggle:checked~.dropdown-menu{display:flex}
  /* position:relative anchors the absolutely-positioned mobile menu. Wrapping
     was incidental, and once a call button joined the row it pushed both CTAs
     onto a second line -- a 122px sticky header, a seventh of the screen,
     permanently. One row is 61px. */
  .header-inner{position:relative;flex-wrap:nowrap}
  .brand{flex:0 1 auto;min-width:0}
  .header-cta{flex:none}
  .reviews-grid{grid-template-columns:1fr}
  .hero-inner{padding:4rem 24px 6rem}
  .section{padding:3.5rem 0}
}
@media(max-width:560px){
  body{font-size:16px}
  /* 12px floor: at .72rem these labels rendered at 11.5px, and .66rem in the
     menu at 10.6px, which is squinting territory on a handset. */
  .eyebrow{font-size:.75rem}
  .cmethod .cm-kind,.detail-list span,.cc-meta span{font-size:.75rem}
  .dd-head{font-size:.72rem}
  .county-card{padding:1.5rem 1.25rem}
  .brand img{width:108px}
  .header-cta .btn{padding:.6rem .85rem;font-size:.85rem}
  .header-cta{gap:.45rem}
  .header-inner{gap:.5rem}
  .hamburger{padding:.5rem .25rem}
  .container{padding:0 18px}
  .page-hero .container{padding-top:2.4rem;padding-bottom:2.4rem}
  .cc-body{padding-left:.9rem}
  .svc-grid,.svc-grid-3,.stats-card,.footer-grid,.helper-grid{grid-template-columns:1fr}
  .directory{columns:1}
  .stat{border-right:none;border-bottom:1px solid var(--line);padding:1.35rem 1.2rem}
  .stat:last-child{border-bottom:none}
  .stats-strip{margin-top:1.5rem}
  .cta-inner{flex-direction:column;text-align:center}
}