*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
:root{
  --ink:#0D1117; --ink-2:#151B23; --paper:#fff; --soft:#F4F6F8;
  --blue:#084890; --blue-lift:#2F7FD4; --yellow:#F0D810;
  --t:#12161B; --t-70:rgba(18,22,27,.72); --t-50:rgba(18,22,27,.55);
  --w-75:rgba(255,255,255,.76); --w-55:rgba(255,255,255,.56);
  --line:#E2E7EB; --line-d:rgba(255,255,255,.14);
  --disp:'Archivo',system-ui,sans-serif; --body:'Figtree',system-ui,sans-serif;
}
body{background:var(--paper);color:var(--t);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--blue-lift);outline-offset:2px;border-radius:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4.5vw,52px)}
.narrow{max-width:70ch}
h1,h2,h3,h4,.disp{font-family:var(--disp);font-weight:700;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(38px,6.6vw,78px)}
h2{font-size:clamp(29px,4.3vw,50px)}
h3{font-size:clamp(19px,2.2vw,25px);letter-spacing:-.015em}
p{margin-bottom:16px}
.eyebrow{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:16px}
.eyebrow.on-dark{color:var(--yellow)}
.lede{font-size:clamp(17px,1.9vw,20px);color:var(--t-70);max-width:60ch}
.on-dark .lede,.dark .lede{color:var(--w-75)}
section{padding:clamp(56px,8vw,104px) 0}
.dark{background:var(--ink);color:#fff}
.dark h1,.dark h2,.dark h3{color:#fff}
.softbg{background:var(--soft)}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .bar{display:flex;align-items:center;gap:22px;padding:11px 0;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand img{height:42px;width:auto}
nav.main{display:flex;align-items:center;gap:clamp(10px,1.5vw,24px);font-size:14.5px;font-weight:500}
nav.main a{text-decoration:none;color:var(--t-70);white-space:nowrap}
nav.main a:hover,nav.main a[aria-current]{color:var(--blue)}
.hd-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:14.5px;letter-spacing:.01em;padding:11px 20px;border-radius:3px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-y{background:var(--yellow);color:#0D1117}
.btn-b{background:var(--blue);color:#fff}
.btn-o{border-color:var(--line);color:var(--t)}
/* Any dark ground gets the light variant. `.on-dark` is the real switch — the
   class list is a convenience, and the last time this was scoped by enumeration
   alone a new hero class (.phero) shipped a dark-on-dark button. Every dark
   container carries .on-dark as well, so adding one cannot miss again. */
.on-dark .btn-o,.dark .btn-o,.hero .btn-o,.phero .btn-o,footer .btn-o{
  border-color:var(--line-d);color:#fff;background:rgba(255,255,255,.08)}
.on-dark .btn-o:hover,.dark .btn-o:hover,.hero .btn-o:hover,.phero .btn-o:hover{
  background:rgba(255,255,255,.18)}
.btn-lg{font-size:16px;padding:15px 28px}
#burger{display:none;background:none;border:1px solid var(--line);border-radius:3px;padding:9px 11px}
#burger span{display:block;width:19px;height:2px;background:var(--t);margin:3.5px 0}
@media(max-width:1080px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px clamp(20px,4.5vw,52px) 22px;gap:0;font-size:16px}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;border-bottom:1px solid var(--line)}
  #burger{display:block}
  .hd-cta .btn-y{display:none}
}

/* hero */
.hero{position:relative;background:var(--ink);color:#fff;min-height:min(84vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:-14% 0;width:100%;height:128%;
  object-fit:cover;will-change:transform}
.hero video{opacity:0;transition:opacity .6s}
.hero.vid-on video{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,17,23,.62) 0%,rgba(13,17,23,.38) 42%,rgba(13,17,23,.92) 100%)}
.hero .inner{position:relative;z-index:2;width:100%;padding:clamp(80px,13vw,150px) 0 clamp(34px,5vw,56px)}
.hero h1{max-width:15ch;color:#fff}
.hero h1 .hl{color:var(--yellow)}
.hero .sub{margin-top:20px;font-size:clamp(16.5px,2vw,20px);color:var(--w-75);max-width:52ch}
.hero .acts{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hero .strip{margin-top:clamp(30px,4vw,46px);padding-top:20px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:10px 40px}
.hero .strip div{font-size:13.5px;color:var(--w-55)}
.hero .strip b{display:block;font-family:var(--disp);font-size:23px;font-weight:700;color:#fff;letter-spacing:-.02em}

/* award ribbons, drawn to match the gold-on-black plaques themselves */
.ribbons{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(6px,1.2vw,16px)}
.rib{color:var(--yellow);flex:0 0 auto}
.rib .t{font-family:var(--disp);font-weight:700;fill:currentColor;letter-spacing:-.01em}
.rib .l{font-family:var(--disp);font-weight:600;fill:currentColor;opacity:.62;letter-spacing:.09em}
@media(max-width:520px){.rib{width:52px;height:68px}}

/* cert marquee */
.certs{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden}
.certs .lbl{text-align:center;font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t-50);margin-bottom:20px}
.track{display:flex;gap:14px;width:max-content;animation:march 46s linear infinite}
.certs:hover .track{animation-play-state:paused}
@keyframes march{to{transform:translateX(-50%)}}
.chip{flex:0 0 auto;width:168px;height:78px;background:#fff;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:14px}
.chip img{max-height:100%;max-width:100%;object-fit:contain}
@media(prefers-reduced-motion:reduce){.track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* grids */
.grid{display:grid;gap:clamp(14px,2vw,22px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,68px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:5px;padding:26px 24px;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
a.card:hover{border-color:var(--blue);transform:translateY(-2px)}
.card h3{margin-bottom:8px}
.card p{font-size:15.5px;color:var(--t-70);margin-bottom:0}
.ba{margin:0}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba-half{position:relative}
.ba-tag{position:absolute;z-index:2;top:10px;left:10px;background:var(--ink);color:#fff;font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:3px}
.ba-tag.ba-after{background:var(--blue)}
.ba figcaption{margin-top:10px;font-size:13.5px;color:var(--t-50)}
@media(max-width:520px){.ba-pair{gap:6px}.ba-tag{font-size:10px;padding:4px 7px}}
.pcard{padding:0;overflow:hidden}
.pcard .pic{aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.pcard .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
a.pcard:hover .pic img{transform:scale(1.04)}
.pcard .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.card .go{margin-top:auto;padding-top:16px;font-family:var(--disp);font-size:13.5px;font-weight:700;color:var(--blue);letter-spacing:.02em}
.dark .card{background:var(--ink-2);border-color:var(--line-d)}
.dark .card p{color:var(--w-75)}
.dark .card .go{color:var(--yellow)}

.shot{border-radius:5px;overflow:hidden;background:var(--soft);aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.shot:hover img{transform:scale(1.035)}
figure.shot.cap{aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
figure.shot.cap img{aspect-ratio:4/3;height:auto;border-radius:5px;object-fit:cover}
figure.shot.cap figcaption{margin-top:10px;font-size:13.5px;color:var(--t-50);line-height:1.4}

ul.ticks{list-style:none;margin:0 0 18px}
ul.ticks li{position:relative;padding-left:28px;margin-bottom:11px;font-size:16px}
ul.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:13px;height:7px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
.dark ul.ticks li::before{border-color:var(--yellow)}

.quote{background:#fff;border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:0 5px 5px 0;padding:24px}
.quote p{font-size:16px;color:var(--t-70);margin-bottom:14px}
.quote .who{font-family:var(--disp);font-weight:700;font-size:14.5px}
.quote .who span{display:block;font-family:var(--body);font-weight:400;font-size:13px;color:var(--t-50)}

.note{border:1px solid var(--line);border-left:3px solid var(--blue);background:var(--soft);border-radius:0 5px 5px 0;padding:20px 22px;margin:26px 0}
.note p:last-child{margin-bottom:0}
.note .eyebrow{margin-bottom:8px}

/* forms */
.fld{width:100%;font-family:var(--body);font-size:16px;padding:13px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--t)}
.fld:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(8,72,144,.13)}
label.fl{display:block;font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t-50);margin-bottom:6px}
.field{margin-bottom:16px}
.steps-bar{display:flex;gap:6px;margin-bottom:26px}
.steps-bar div{flex:1;height:3px;background:var(--line);border-radius:2px}
.steps-bar div.on{background:var(--yellow)}
.opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.opt{border:1px solid var(--line);border-radius:4px;padding:14px;cursor:pointer;font-size:15px;background:#fff;text-align:left;font-family:var(--body)}
.opt:hover{border-color:var(--blue)}
.opt.sel{border-color:var(--blue);background:rgba(8,72,144,.05);box-shadow:inset 0 0 0 1px var(--blue)}

/* calculator */
.calcout{background:var(--ink);color:#fff;border-radius:5px;padding:28px;position:sticky;top:96px}
.calcout .big{font-family:var(--disp);font-size:clamp(32px,5vw,46px);font-weight:700;letter-spacing:-.03em;color:var(--yellow);font-variant-numeric:tabular-nums}
.calcout .rowline{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-d);font-size:14.5px;color:var(--w-75)}
.calcout .rowline b{color:#fff;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--yellow)}

/* footer */
footer{background:var(--ink);color:var(--w-75);padding:66px 0 30px;font-size:14.5px}
footer h4{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--w-55);margin-bottom:14px}
footer a{color:var(--w-75);text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:var(--yellow)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--w-55)}

/* concept banner */
.concept{background:var(--yellow);color:#0D1117;text-align:center;padding:9px 20px;font-size:13.5px;font-weight:600}
.concept a{color:#0D1117}

/* ---------- nav dropdowns ---------- */
nav.main{position:static}
/* The panel is positioned against the header container, not the trigger — a
   640px panel centred on a left-hand trigger hangs off the side of the page. */
header .bar{position:relative}
/* The trigger is only as tall as its text, and the panel opens 11px below the
   HEADER, so the pointer crosses ~42px belonging to neither and the menu shuts on
   the way down — Colton reported exactly this. Two halves close it: the trigger's
   hover box is extended downward (the negative margin cancels the layout effect,
   so nothing moves), and the panel carries a bridge upward. They overlap, so the
   fix does not depend on the header's exact height. */
.nd{position:static;padding-bottom:26px;margin-bottom:-26px}
.nd>a{display:inline-flex;align-items:center;gap:5px}
.nd>a::after{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55}
.dd{position:absolute;top:calc(100% + 11px);left:0;right:0;transform:translateY(8px);
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px;
  box-shadow:0 34px 80px -34px rgba(13,17,23,.36);opacity:0;visibility:hidden;
  transition:opacity .16s,transform .16s;z-index:70}
.nd:hover .dd,.nd:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px}
.dd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 20px}
.dd-grid.two{grid-template-columns:repeat(2,1fr)}
.dd a{display:flex;gap:11px;align-items:flex-start;padding:10px 11px;border-radius:4px;
  text-decoration:none;color:var(--t);font-size:14.5px;line-height:1.35}
.dd a:hover{background:var(--soft);color:var(--blue)}
.dd a .ico{color:var(--blue);flex:0 0 auto;margin-top:1px}
.dd a b{display:block;font-weight:600}
.dd a .dd-t{min-width:0}
.dd a .dd-b{display:block;font-size:12.5px;color:var(--t-50);margin-top:2px}
.dd-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13.5px}
.dd-foot a{padding:0;font-family:var(--disp);font-weight:700;color:var(--blue)}
@media(max-width:1080px){
  .dd{position:static;transform:none;opacity:1;visibility:visible;left:auto;right:auto;
    border:0;box-shadow:none;padding:0 0 10px 14px;background:transparent}
  .dd-grid,.dd-grid.two{grid-template-columns:1fr;gap:0}
  .dd a{padding:11px 0}
  .dd a .dd-b,.dd-foot{display:none}
  .nd>a::after{display:none}
}

/* ---------- scroll reveals ----------
   Only armed when JS is running: `.js` is set by an inline script in <head>, so
   a failed script leaves every section visible rather than blank. */
.js .rv{opacity:0;transform:translate3d(0,28px,0);
  transition:opacity .75s cubic-bezier(.16,.84,.44,1),transform .75s cubic-bezier(.16,.84,.44,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv-1{transition-delay:.08s}
.js .rv-2{transition-delay:.16s}
.js .rv-3{transition-delay:.24s}
.js .rv-4{transition-delay:.32s}
.js .rv-5{transition-delay:.40s}
.js .rv-6{transition-delay:.48s}
.js .rv-7{transition-delay:.56s}
.js .rv-w{transform:translate3d(0,44px,0) scale(.985)}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
}

/* ---------- story scroll ----------
   A sticky stage the width of the viewport; the page scrolls past it while the
   photograph and the caption change. Steps are Cascade's own job photographs in
   the order the work actually happens. */
.story{background:var(--ink);color:#fff;position:relative}
.story-track{position:relative}
.story-stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;
  display:flex;align-items:flex-end}
.story-figs{position:absolute;inset:0}
.story-fig{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;will-change:opacity}
.story-fig.on{opacity:1}
.story-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);
  transition:transform 1.6s cubic-bezier(.2,.7,.3,1)}
.story-fig.on img{transform:scale(1)}
.story-scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(13,17,23,.72) 0,rgba(13,17,23,.18) 26%,rgba(13,17,23,.55) 62%,rgba(13,17,23,.94) 100%)}
.story-in{position:relative;z-index:3;width:100%;padding-bottom:clamp(34px,7vh,76px);
  padding-top:clamp(80px,12vh,120px)}
.story-lead{max-width:34ch}
.story-lead h2{color:#fff;font-size:clamp(26px,4vw,48px)}
.story-steps{display:grid;margin-top:clamp(18px,3vh,32px)}
.story-step{grid-area:1/1;opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.story-step.on{opacity:1;transform:none}
.story-step .num{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow);display:block;margin-bottom:9px}
.story-step h3{color:#fff;margin-bottom:8px}
.story-step p{color:var(--w-75);max-width:46ch;font-size:clamp(15.5px,1.7vw,18px);margin:0}
.story-rail{display:flex;gap:8px;margin-top:clamp(20px,3vh,30px)}
.story-rail i{display:block;height:3px;flex:1;max-width:74px;background:rgba(255,255,255,.22);
  border-radius:3px;overflow:hidden}
.story-rail i b{display:block;height:100%;width:0;background:var(--yellow);
  transition:width .3s linear}
@media(max-width:760px){
  .story-lead{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .story-fig,.story-fig img,.story-step{transition:none}
}

/* ---------- count-up ---------- */
.strip b[data-count]{font-variant-numeric:tabular-nums}

/* ---------- coverage map ---------- */
.cov{display:grid;grid-template-columns:minmax(280px,1.35fr) 1fr;gap:clamp(22px,3vw,46px);align-items:start}
@media(max-width:900px){.cov{grid-template-columns:1fr}}
.cov-plot{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--soft)}
.cov-map{height:clamp(420px,58vh,640px);width:100%;background:var(--soft)}
.cov-map:focus{outline:none}
.leaflet-container{font-family:var(--body);background:var(--soft)}
.leaflet-control-attribution{font-size:10.5px}
.cov-dot{transition:none}
.cov-tip{font-family:var(--disp);font-weight:700;font-size:12.5px}
.cov-tools{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.cov-tools button{font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.03em;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--t-70);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.cov-tools button:hover{border-color:var(--blue)}
.cov-tools button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.cov-swatch{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;
  vertical-align:baseline}
.cov-count{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(34px,5vw,54px);line-height:1;margin-bottom:6px}
.cov-count span{color:var(--blue)}
.cov-towns{margin-top:20px;border-top:1px solid var(--line);max-height:360px;overflow:auto}
.cov-towns button{display:flex;width:100%;justify-content:space-between;gap:14px;padding:9px 2px;
  border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:15px;
  text-align:left;cursor:pointer;color:inherit}
.cov-towns button:hover{background:rgba(8,72,144,.06);color:var(--blue)}
.cov-towns button b{font-family:var(--disp);font-variant-numeric:tabular-nums;color:var(--t)}
.cov-note{font-size:13.5px;color:var(--t-50);margin-top:14px}
.cov-note b{color:var(--t);font-variant-numeric:tabular-nums}
.cov-hint{position:absolute;left:0;right:0;bottom:0;z-index:500;font-size:12.5px;color:#fff;
  background:rgba(13,17,23,.72);padding:7px 12px;text-align:center;pointer-events:none;
  opacity:0;transition:opacity .2s}
.cov-hint.on{opacity:1}

/* ---------- parallax ---------- */
.px{position:relative;overflow:hidden}
.px>.px-img{position:absolute;inset:-18% 0;width:100%;height:136%;object-fit:cover;
  will-change:transform}
.px>.px-scrim{position:absolute;inset:0}
.px>.px-in{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.px>.px-img{transform:none!important}}

/* ---------- full-bleed parallax band ---------- */
.band{position:relative;min-height:clamp(320px,42vw,520px);display:flex;align-items:center;
  overflow:hidden;background:var(--ink);color:#fff}
.band .px-scrim{background:linear-gradient(180deg,rgba(13,17,23,.58),rgba(13,17,23,.72))}
.band .px-in{width:100%;padding:clamp(46px,7vw,86px) 0}
.band h2{color:#fff;max-width:20ch}
.band .lede{color:var(--w-75);margin-top:14px}

/* a framed photograph that drifts inside its own box */
.pxbox{position:relative;overflow:hidden;border-radius:5px;
  aspect-ratio:4/3;background:var(--soft)}
.pxbox>.px-img{position:absolute;inset:-18% 0;width:100%;height:136%;object-fit:cover;
  will-change:transform}
@media(prefers-reduced-motion:reduce){.pxbox>.px-img{transform:none!important}}

/* ---------- service / type page hero ---------- */
.phero{position:relative;min-height:clamp(340px,44vw,520px);display:flex;align-items:flex-end;
  background:var(--ink);color:#fff;overflow:hidden}
.phero .px-scrim{background:linear-gradient(180deg,rgba(13,17,23,.42),rgba(13,17,23,.58) 42%,rgba(13,17,23,.86) 78%,rgba(13,17,23,.95))}
.phero .px-in{width:100%;padding:clamp(52px,8vw,96px) 0 clamp(28px,4vw,46px)}
.phero h1{color:#fff;max-width:17ch}
.phero .lede{color:var(--w-75);margin-top:14px}
.phero .breadcrumb,.phero .breadcrumb a{color:var(--w-55)}
.phero .eyebrow{color:var(--yellow)}

/* ---------- icon bits ---------- */
.ico{display:block}
.icard .ico{color:var(--blue);margin-bottom:14px}
.dark .icard .ico{color:var(--yellow)}
.iconrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(14px,2vw,22px);margin-top:26px}
.ibox{border:1px solid var(--line);border-radius:5px;padding:22px 20px;background:#fff}
.ibox .ico{color:var(--blue);margin-bottom:12px}
.ibox h4{font-family:var(--disp);font-size:16px;font-weight:700;margin-bottom:6px}
.ibox p{font-size:14.5px;color:var(--t-70);margin:0;line-height:1.5}

/* ---------- service-area map ---------- */
.mapwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:center}
@media(max-width:880px){.mapwrap{grid-template-columns:1fr}}
.mapwrap svg{width:100%;height:auto;max-height:600px}
.m-other path{fill:#E7ECEF;stroke:#fff;stroke-width:1}
.m-served path{fill:var(--blue);stroke:#fff;stroke-width:1.4;transition:fill .18s}
.m-served path:hover{fill:#0A5CB8}
.dot{fill:var(--yellow);stroke:var(--ink);stroke-width:1.2}
.lead{stroke:#9AA6B0;stroke-width:1.2}
.cty{font-family:var(--disp);font-weight:700;font-size:15px;fill:var(--t)}
.cty-sub{font-family:var(--body);font-weight:500;font-size:10.5px;fill:var(--t-50);letter-spacing:.1em}

/* ---------- long-form service copy ---------- */
.prose h3{margin:34px 0 12px}
.prose p{font-size:16.5px;color:var(--t-70)}
.prose p strong{color:var(--t)}
.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;font-family:var(--disp);font-weight:700;
  font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--blue);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 18px;margin:0;font-size:15.5px;color:var(--t-70);max-width:70ch}

.breadcrumb{font-size:13.5px;color:var(--t-50);margin-bottom:18px}
.breadcrumb a{color:var(--t-50)}

/* Touch targets. Most roofing traffic is a phone, so every tappable thing gets
   at least 44px of height on small screens. Padding, not min-height, so the
   text stays where the layout puts it. */
@media(max-width:900px){
  footer a{padding:11px 0}
  .breadcrumb a{display:inline-block;padding:9px 0}
  nav.main a{padding:14px 0}
  .card{padding:22px 20px}
  .hero .acts .btn,.btn-lg{padding:16px 26px}
  .quote .who{padding-top:2px}
}
@media(max-width:900px){
  a.city-link{display:block;padding:11px 0}
}
.pagehead{padding:clamp(42px,6vw,76px) 0 clamp(28px,4vw,46px);border-bottom:1px solid var(--line)}
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
th{text-align:left;font-family:var(--disp);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--t-50);padding:0 14px 10px 0;border-bottom:1px solid var(--line)}
td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}