/* ==========================================================================
   American Roofing Guide
   White ground, near-black ink, structural hairlines, ONE signal red reserved
   for links and data marks. Archivo throughout — wide-cut for display, mono
   only where digits line up.
   Deliberately NOT cream + serif + warm accent, and no kicker labels above
   headings.
   ========================================================================== */

@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-400.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/archivo-500.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-600.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-700.woff2) format("woff2")}
@font-face{font-family:"Archivo Wide";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-exp-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500.woff2) format("woff2")}

:root{
  --paper:#FFFFFF;
  --surface:#F4F5F6;
  --surface-2:#EAECEE;
  --ink:#15171B;
  --ink-2:#41464D;
  --ink-3:#6A7078;
  --rule:#DFE1E4;
  --rule-2:#C3C7CC;
  --signal:#C22E1C;
  --signal-deep:#9C2415;
  --ok:#1F6B45;

  --display:"Archivo Wide",Archivo,"Helvetica Neue",Arial,sans-serif;
  --sans:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --measure:66ch;
  --gutter:32px;
  --maxw:1180px;
  --ease:cubic-bezier(.2,.6,.25,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{font-family:var(--sans);font-size:17px;line-height:1.62;color:var(--ink-2);background:var(--paper);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
svg{max-width:100%}
/* an icon <svg> carrying only a viewBox has no intrinsic size and would
   otherwise stretch to the full container width */
svg:not([width]):not([height]){width:1.15em;height:1.15em;display:inline-block;vertical-align:-.15em;flex:0 0 auto}
::selection{background:#FBD9D2;color:var(--ink)}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.015em;line-height:1.1;text-wrap:balance;font-weight:700}
h1{font-family:var(--display);font-size:clamp(2.15rem,1.35rem + 3vw,3.6rem);letter-spacing:-.028em}
h2{font-family:var(--display);font-size:clamp(1.6rem,1.15rem + 1.7vw,2.35rem);letter-spacing:-.022em}
h3{font-size:clamp(1.1rem,1.02rem + .32vw,1.26rem);letter-spacing:-.008em}
h4{font-size:1rem}
p{margin-bottom:1.05rem;max-width:var(--measure)}
/* A bare email address or URL in prose is ONE unbreakable token: approved@
   americanroofingguide.com ran under the right gutter at 320px on /approved/.
   break-word (not anywhere) only breaks a word that cannot otherwise fit, so
   ordinary prose is untouched. Deliberately NOT applied to .data / tables —
   breaking inside a cost figure is worse than letting the table scroll. */
p,li,dd,blockquote,figcaption{overflow-wrap:break-word}
p:last-child{margin-bottom:0}
a{color:var(--signal);text-decoration:none;text-underline-offset:3px}
strong{font-weight:600;color:var(--ink)}
.lede{font-size:clamp(1.06rem,1rem + .38vw,1.22rem);line-height:1.55;color:var(--ink-2)}

/* small-caps label — a DATA KEY only, never a kicker over a heading */
.label{display:block;font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.label-muted{color:var(--ink-3)}
.eyebrow{display:none}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.band{padding:72px 0;border-top:1px solid var(--rule)}
.band-parchment,.band-deep{background:var(--surface)}
.band-ink{background:var(--ink);color:#C9CDD3;border-top-color:var(--ink)}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink a:not(.btn){color:#fff;text-decoration:underline}
.band-tight{padding:48px 0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:2000}
.skip:focus{left:12px;top:12px}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.roofline{height:1px;background:var(--rule)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;
  font-family:var(--sans);font-size:.94rem;font-weight:600;border:1px solid transparent;
  border-radius:2px;cursor:pointer;text-align:center;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn-primary{background:var(--signal);color:#fff;border-color:var(--signal)}
.btn-secondary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.band-ink .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.band-ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.btn-block{width:100%}
@media (hover:hover){
  .btn-primary:hover{background:var(--signal-deep);border-color:var(--signal-deep);color:#fff}
  .band-ink .btn-primary:hover{background:#E8EAEC;color:var(--ink);border-color:#E8EAEC}
  .btn-secondary:hover{background:#000;border-color:#000;color:#fff}
  .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .band-ink .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
  a:hover{text-decoration:underline}
  .btn:hover{text-decoration:none}
}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{color:var(--signal);flex-shrink:0}
.brand-name{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.05;
  color:var(--ink);letter-spacing:-.02em}
.brand-name span{display:block;font-family:var(--mono);font-size:.56rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.nav{display:flex;align-items:center;gap:28px;list-style:none}
.nav a{font-size:.925rem;font-weight:500;color:var(--ink-2);padding:5px 0;border-bottom:1.5px solid transparent}
@media (hover:hover){.nav a:hover{color:var(--ink);border-bottom-color:var(--ink);text-decoration:none}}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--signal)}
.masthead .btn{padding:9px 18px;font-size:.875rem}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--rule-2);
  border-radius:2px;cursor:pointer;position:relative;flex-shrink:0}
.burger span{position:absolute;left:50%;top:50%;width:19px;height:1.5px;background:var(--ink);
  transform:translate(-50%,-50%);transition:transform .26s var(--ease),opacity .16s var(--ease)}
.burger span:nth-child(1){transform:translate(-50%,calc(-50% - 6px))}
.burger span:nth-child(3){transform:translate(-50%,calc(-50% + 6px))}
.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

.drawer{position:fixed;inset:0;background:var(--paper);z-index:950;display:flex;flex-direction:column;
  visibility:hidden;opacity:0;transition:opacity .22s var(--ease),visibility .22s var(--ease);
  overflow-y:auto;overscroll-behavior:contain}
.drawer[data-open="true"]{visibility:visible;opacity:1}
.drawer-top{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:66px;padding:0 var(--gutter);background:var(--paper);border-bottom:1px solid var(--rule);flex-shrink:0}
.drawer-close{width:44px;height:44px;background:none;border:1px solid var(--rule-2);border-radius:2px;
  cursor:pointer;position:relative;flex-shrink:0}
.drawer-close::before,.drawer-close::after{content:"";position:absolute;left:50%;top:50%;
  width:18px;height:1.5px;background:var(--ink)}
.drawer-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.drawer-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.drawer-body{padding:20px var(--gutter) 48px}
.drawer-body a:not(.btn){display:block;font-family:var(--display);font-size:1.25rem;font-weight:700;
  color:var(--ink);padding:13px 0;border-bottom:1px solid var(--rule);letter-spacing:-.02em}
.drawer-body a.btn{color:#fff}
.drawer-body .btn{margin-top:22px;font-family:var(--sans);font-size:1rem}
.drawer-group{margin-top:24px}
.drawer-group>.label{margin-bottom:6px}
.drawer-group a:not(.btn){font-family:var(--sans);font-size:1rem;font-weight:500;padding:10px 0}

/* ---------- breadcrumb ---------- */
.crumbs{padding:16px 0;border-bottom:1px solid var(--rule)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:7px;list-style:none;font-size:.8rem;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
@media (hover:hover){.crumbs a:hover{color:var(--ink)}}
.crumbs li+li::before{content:"/";margin-right:7px;color:var(--rule-2)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ---------- hero ---------- */
.hero{background:var(--surface);padding:52px 0 56px;border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:52px;align-items:start}
.hero h1{margin-bottom:16px}
.hero .lede{margin-bottom:24px;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.stamp{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.65rem;
  font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.stamp svg{width:12px;height:12px;color:var(--ink-3)}

.spec{border:1px solid var(--ink);background:var(--paper)}
.spec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 18px;background:var(--ink)}
.spec-head .label{color:#fff}
.spec-head .spec-id{font-family:var(--mono);font-size:.65rem;color:rgba(255,255,255,.55);letter-spacing:.07em}
.spec-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:13px 18px;border-bottom:1px solid var(--rule)}
.spec-row:last-of-type{border-bottom:0}
.spec-k{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);flex-shrink:0}
.spec-v{font-family:var(--display);font-size:1.18rem;font-weight:700;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.02em}
.spec-v small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:400;color:var(--ink-3);
  letter-spacing:0;margin-top:2px}
.spec-foot{padding:11px 18px;border-top:1px solid var(--ink);background:var(--surface);
  font-size:.74rem;color:var(--ink-3);line-height:1.45}

/* ---------- rule-bound cards ---------- */
.rule-grid{display:grid;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.rule-grid>*{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:24px 22px;background:var(--paper)}
.g1{grid-template-columns:minmax(0,1fr)}
.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))}
.card-t{margin-bottom:7px}
.card-p{font-size:.92rem;color:var(--ink-3);margin-bottom:0}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  border-top:1px solid rgba(255,255,255,.15);border-left:1px solid rgba(255,255,255,.15)}
.stat{padding:22px 20px;border-right:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.stat-v{font-family:var(--display);font-size:clamp(1.45rem,1.2rem + .9vw,1.95rem);font-weight:700;
  color:#fff;line-height:1.05;font-variant-numeric:tabular-nums;margin-bottom:6px;letter-spacing:-.02em}
.stat-k{font-family:var(--mono);font-size:.65rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.4}

/* ---------- data table ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule)}
table.data{width:100%;border-collapse:collapse;background:var(--paper);font-variant-numeric:tabular-nums}
table.data caption{text-align:left;padding:0 0 12px;font-size:.86rem;color:var(--ink-3)}
table.data th{background:var(--ink);color:#fff;font-family:var(--mono);font-weight:500;font-size:.65rem;
  letter-spacing:.09em;text-transform:uppercase;text-align:left;padding:12px 16px;white-space:nowrap}
table.data td{padding:14px 16px;border-bottom:1px solid var(--rule);font-size:.92rem;vertical-align:top}
table.data tbody tr:last-child td{border-bottom:0}
table.data .m{font-weight:600;color:var(--ink)}
table.data .num{font-family:var(--mono);font-weight:500;color:var(--ink);white-space:nowrap}
@media (hover:hover){table.data tbody tr:hover{background:var(--surface)}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 0;
  cursor:pointer;list-style:none;font-size:1.04rem;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:12px;height:12px;margin-top:7px;
  background:linear-gradient(var(--ink-3),var(--ink-3)) center/100% 1.5px no-repeat,
             linear-gradient(var(--ink-3),var(--ink-3)) center/1.5px 100% no-repeat;
  transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;max-width:var(--measure)}
.faq .a p{font-size:.94rem;color:var(--ink-3)}
@media (hover:hover){.faq summary:hover{color:var(--signal)}}

/* ---------- lists ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none}
.chips a{display:inline-block;padding:6px 12px;border:1px solid var(--rule-2);border-radius:2px;
  font-size:.85rem;color:var(--ink-2);background:var(--paper)}
@media (hover:hover){.chips a:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}}
.zips{display:flex;flex-wrap:wrap;gap:5px;list-style:none;font-family:var(--mono);font-size:.76rem}
.zips li{padding:4px 8px;border:1px solid var(--rule);color:var(--ink-3);background:var(--paper)}
.linklist{list-style:none;border-top:1px solid var(--rule)}
.linklist li{border-bottom:1px solid var(--rule)}
.linklist a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 2px;color:var(--ink)}
.linklist .meta{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);flex-shrink:0;letter-spacing:.04em}
@media (hover:hover){.linklist a:hover{color:var(--signal)}.linklist a:hover .meta{color:var(--signal)}}

/* ---------- prose ---------- */
.prose{max-width:var(--measure)}
.prose h2{margin:40px 0 12px}
.prose h3{margin:28px 0 8px}
.prose>*:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.05rem 1.15rem;max-width:var(--measure)}
.prose li{margin-bottom:.4rem}
.note{padding:18px 20px;margin:24px 0;max-width:var(--measure);background:var(--surface);border:1px solid var(--rule)}
.note .label{margin-bottom:6px;font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.note p{font-size:.92rem;color:var(--ink-3)}
.footnote{font-size:.78rem;color:var(--ink-3);line-height:1.55;max-width:var(--measure)}
.band-ink .footnote{color:rgba(255,255,255,.55)}

/* ---------- figures & charts ---------- */
.fig{margin:30px 0;max-width:var(--measure)}
.fig img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.fig figcaption{margin-top:10px;font-size:.86rem;line-height:1.55;color:var(--ink-3);max-width:60ch}
.fig-wide{max-width:none}
.band-ink .fig figcaption{color:rgba(255,255,255,.65)}
.band-ink .fig img{border-color:rgba(255,255,255,.16)}
.hero-band{width:100%;margin:0;line-height:0;background:var(--ink)}
.hero-band img{width:100%;height:clamp(180px,22vw,300px);object-fit:cover;object-position:50% 62%;display:block;border:0}
@media (max-width:640px){.hero-band img{height:170px}}

.chart{margin:32px 0;max-width:none}
.chart-title{font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--ink);
  margin-bottom:14px;line-height:1.25;letter-spacing:-.015em}
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart-scroll svg{width:100%;height:auto;min-width:500px;display:block}
.chart-note{margin-top:12px;font-size:.85rem;line-height:1.55;color:var(--ink-3);max-width:60ch}
.band-ink .chart-title{color:#fff}
.band-ink .chart-note{color:rgba(255,255,255,.65)}

/* ---------- CTA & footer ---------- */
.cta-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:44px;align-items:center}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.foot{background:var(--ink);color:rgba(255,255,255,.62);padding:56px 0 0;font-size:.88rem}
.foot a:not(.btn){color:rgba(255,255,255,.7);text-decoration:none}
@media (hover:hover){.foot a:not(.btn):hover{color:#fff;text-decoration:underline}}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px}
.foot .brand-name{color:#fff}
.foot .brand-name span{color:rgba(255,255,255,.45)}
.foot .label{color:rgba(255,255,255,.5);margin-bottom:12px}
.foot ul{list-style:none}
.foot li{margin-bottom:8px}
.foot-note{max-width:38ch;margin-top:14px;color:rgba(255,255,255,.5);font-size:.84rem;line-height:1.6}
.foot-states{columns:4;column-gap:26px;list-style:none;margin-top:6px}
.foot-states li{break-inside:avoid;margin-bottom:6px;font-size:.84rem}
.foot-bottom{margin-top:44px;padding:20px 0;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.45)}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:18px;list-style:none}

/* ---------- long-form guide components ---------- */
.article{max-width:var(--measure);margin:0}
.article h2{margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--rule)}
.article h2:first-of-type{margin-top:0}
.article h3{margin:30px 0 8px}
.article p,.article li{font-size:1rem}
.article ul,.article ol{margin:0 0 1.05rem 1.2rem}
.article li{margin-bottom:.45rem}
.article img{margin:26px 0;border:1px solid var(--rule)}
.summary-box{border:1px solid var(--rule-2);background:var(--surface);padding:24px 26px;margin:0 0 34px}
.summary-box h3{margin:0 0 6px;font-size:1.04rem}
.summary-box p{font-size:.93rem;color:var(--ink-3)}
.big-number{font-family:var(--display);font-size:clamp(1.8rem,1.35rem + 1.9vw,2.6rem);font-weight:700;
  color:var(--ink);line-height:1.05;margin:10px 0 8px;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.callout{padding:18px 20px;margin:26px 0;background:var(--surface);border:1px solid var(--rule)}
.callout h3,.callout h4{font-size:1rem;margin-bottom:5px}
.callout p{font-size:.93rem;color:var(--ink-3)}
.factor-list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rule)}
.factor-list>li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--rule);margin:0}
.factor-n{font-family:var(--mono);font-size:.76rem;font-weight:500;color:var(--ink-3);padding-top:3px}
.factor-list h3,.factor-list h4{font-size:1.02rem;margin:0 0 4px}
.factor-list p{font-size:.93rem;color:var(--ink-3);margin:0}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);margin:26px 0}
.split>div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px 20px}
.split h3,.split h4{margin:0 0 7px;font-size:1.02rem}
.split p,.split li{font-size:.92rem;color:var(--ink-3)}
.split ul{margin:8px 0 0 1.1rem}
.toc{border:1px solid var(--rule-2);background:var(--surface);padding:20px 22px;margin:0 0 36px}
.toc ol{list-style:none;margin:0;counter-reset:t}
.toc li{counter-increment:t;margin-bottom:7px;font-size:.92rem;display:flex;gap:10px}
.toc li::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;color:var(--ink-3);padding-top:2px}
.toc a{color:var(--ink-2)}

/* hubs */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.hub-grid a{display:block;padding:20px 18px;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);color:var(--ink);background:var(--paper)}
.hub-grid .n{display:block;font-weight:600;font-size:1.02rem;margin-bottom:4px}
.hub-grid .c{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-3)}
/* 🚨 .c is the DATA label — "23 cities" — and mono at .7rem with letter-spacing
   is right for a figure. The guide cards on / and /guides/ put a full sentence
   in it, so their descriptions rendered as tracked-out 11px monospace prose.
   Sentences get .d; counts keep .c. */
.hub-grid .d{display:block;font-size:.875rem;line-height:1.5;color:var(--ink-3);margin-top:2px}
@media (hover:hover){.hub-grid a:hover{background:var(--surface);text-decoration:none}
  .hub-grid a:hover .n{color:var(--signal)}}
.home-hero{background:var(--surface);padding:68px 0 56px;border-bottom:1px solid var(--rule)}
.home-hero h1{max-width:16ch;margin-bottom:20px}
.home-hero .lede{max-width:54ch;margin-bottom:28px}
.figure-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-2);margin-top:42px}
.figure-row>div{padding:22px 24px 0;border-right:1px solid var(--rule)}
.figure-row>div:last-child{border-right:0}
.figure-v{font-family:var(--display);font-size:clamp(1.6rem,1.25rem + 1.4vw,2.2rem);font-weight:700;
  color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums;margin-bottom:5px;letter-spacing:-.025em}
.figure-k{font-family:var(--mono);font-size:.65rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.45}

/* ---------- forms ---------- */
.article form,#estimateForm,#leadForm{max-width:600px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.form-row .form-group{margin-bottom:0}
.form-group,.field{margin-bottom:18px;display:flex;flex-direction:column;gap:6px;max-width:600px}
.form-group label,.field label{font-size:.88rem;font-weight:600;color:var(--ink)}
.form-group .required{color:var(--signal);font-weight:400}
.form-group input,.form-group select,.form-group textarea,.field input,.field select,.field textarea,
form input[type=text],form input[type=email],form input[type=tel],form input[type=search],form select,form textarea{
  width:100%;padding:12px 14px;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-2);border-radius:2px;appearance:none;-webkit-appearance:none}
.form-group select,form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A7078' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.form-group textarea,form textarea{min-height:110px;resize:vertical;line-height:1.6}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:var(--signal)}
/* the previous stylesheet hid these until validation failed; without that rule
   every field shouted its error on page load */
.error-message{display:none;font-size:.82rem;color:var(--signal-deep)}
.form-group.has-error .error-message,.error-message.show{display:block}
.form-group.has-error input,.form-group.has-error select,.form-group.has-error textarea{border-color:var(--signal-deep)}
.form-submit-btn,form button[type=submit]{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;width:100%;padding:15px 26px;margin-top:4px;font-family:var(--sans);font-size:1rem;font-weight:600;
  color:#fff;background:var(--signal);border:1px solid var(--signal);border-radius:2px;cursor:pointer}
.form-submit-btn:disabled{opacity:.55;cursor:not-allowed}
@media (hover:hover){.form-submit-btn:hover,form button[type=submit]:hover{background:var(--signal-deep);border-color:var(--signal-deep)}}
.field .hint{font-size:.8rem;color:var(--ink-3)}
.field-error{color:var(--signal-deep);font-size:.82rem}

/* ---------- legacy component fallback ----------
   The hand-written guides carry ~30 bespoke class names from the previous
   design. These keep an unmapped class rendering as a styled block rather than
   raw stacked text. */
.article [class$="-grid"],.article [class*="-grid "]{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}
.article [class$="-card"],.article [class$="-box"],.article [class$="-area"],
.article [class$="-option"],.article [class$="-indicator"]{
  border:1px solid var(--rule);background:var(--surface);padding:18px 20px}
.article [class$="-card"] h3,.article [class$="-card"] h4,
.article [class$="-area"] h3,.article [class$="-area"] h4{margin:0 0 7px;font-size:1rem}
.article [class$="-card"] p,.article [class$="-box"] p,.article [class$="-area"] p{
  font-size:.92rem;color:var(--ink-3);margin-bottom:.55rem}
.article [class$="-card"] p:last-child,.article [class$="-area"] p:last-child{margin-bottom:0}
.article [class$="-icon"]{color:var(--ink-3);flex:0 0 auto;margin-bottom:6px}
.article [class$="-icon"] svg{width:20px;height:20px}
.article [class$="-area"]{display:flex;gap:14px;align-items:flex-start}
.article [class$="-area"] [class$="-icon"]{margin-bottom:0;padding-top:2px}
.article [class$="-content"]{min-width:0}
.article [class$="-meta"]{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 13px}
.article [class$="-meta-item"]{font-family:var(--mono);font-size:.76rem;color:var(--ink-3);
  border:1px solid var(--rule);padding:5px 9px;background:var(--paper)}
.article [class$="-meta-item"] strong{color:var(--ink);font-family:var(--sans);font-weight:600}
.article .section-label{display:none}
.article [class$="-value"],.article .benefit-value,.article .storm-stat-value{
  display:block;font-family:var(--display);font-size:1.6rem;font-weight:700;color:var(--ink);
  line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.article [class$="-label"],.article .benefit-label{display:block;font-family:var(--mono);
  font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.article .storm-stat{border:1px solid var(--rule);background:var(--surface);padding:16px 18px}
.article .pros-cons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.article .pros-cons-col,.article .pros,.article .cons{border:1px solid var(--rule);padding:16px 18px;background:var(--paper)}
.article .pros h4,.article .cons h4,.article .pros-cons-col h4{margin:0 0 7px;font-size:.96rem}
.article .pros ul,.article .cons ul,.article .pros-cons-col ul{margin:0 0 0 1.1rem;font-size:.92rem}
.article .step-list{list-style:none;margin:22px 0 0;padding:0;counter-reset:s;border-top:1px solid var(--rule)}
.article .step,.article .step-item{counter-increment:s;display:grid;grid-template-columns:32px 1fr;
  gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--rule);margin:0}
.article .step::before,.article .step-item::before{content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:.76rem;color:var(--ink-3);padding-top:3px}
.article .step-content h3,.article .step-content h4{margin:0 0 4px;font-size:1rem}
.article .vs-badge,.article .metal-type,.article .warranty-tier{display:inline-block;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--rule-2);padding:4px 8px;margin-bottom:7px}
.article .guide-card-link{font-weight:600}
.article .faq-item{border-bottom:1px solid var(--rule);padding:16px 0}
.article .faq-question{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  font-size:1.02rem;font-weight:600;color:var(--ink);cursor:default}
.article .faq-question svg,.article .faq-icon{display:none}
.article .faq-answer,.article .faq-answer-inner{display:block!important;max-height:none!important;
  overflow:visible!important;margin-top:9px}
.article .faq-answer p{font-size:.93rem;color:var(--ink-3)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .spec{max-width:520px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-states{columns:3}
}
@media (max-width:1024px){
  .nav,.masthead .btn{display:none}
  .burger{display:block}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-in{grid-template-columns:1fr;gap:24px}
}
@media (max-width:820px){
  body{font-size:16.5px}
  .band{padding:56px 0}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-states{columns:2}
  .split,.figure-row{grid-template-columns:minmax(0,1fr)}
  .figure-row>div{border-right:0;border-bottom:1px solid var(--rule);padding-bottom:20px}
  .figure-row>div:last-child{border-bottom:0}
  .article{max-width:none}
}
@media (max-width:640px){
  :root{--gutter:22px}
  .band{padding:46px 0}
  .hero{padding:34px 0 40px}
  .home-hero{padding:44px 0 40px}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:minmax(0,1fr)}
  .rule-grid>*{padding:20px 18px}
  .spec{max-width:none}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .hero-actions .btn{flex:1 1 100%}
  .form-row{grid-template-columns:minmax(0,1fr);gap:0}
  .article .pros-cons{grid-template-columns:minmax(0,1fr)}

  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data thead,table.data thead tr,table.data thead th{position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .table-scroll{border:0;overflow-x:visible}
  table.data tr{border:1px solid var(--rule-2);margin-bottom:10px;padding:14px 16px;background:var(--paper)}
  table.data td{padding:6px 0;border-bottom:1px solid var(--rule)}
  table.data tr td:last-child{border-bottom:0}
  table.data td::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:.62rem;
    font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
  table.data td.m{font-size:1.02rem;padding-top:0;border-bottom:1px solid var(--rule-2);
    padding-bottom:9px;margin-bottom:4px}
  table.data td.m::before{display:none}
}
@media (max-width:400px){
  :root{--gutter:18px}
  .spec-row{flex-direction:column;align-items:flex-start;gap:3px}
  .spec-v{text-align:left}
}

@media print{
  .masthead,.drawer,.foot,.cta,.hero-actions,.burger,.hero-band{display:none!important}
  body{font-size:11pt;color:#000}
  .band{padding:16pt 0;border-top:1px solid #999}
  a{color:#000;text-decoration:underline}
}

/* ==========================================================================
   Interactive tool pages (/free-estimate/, /calculator/)
   These carry bespoke markup and their own stylesheet, which the reskin
   replaced. The JS is untouched and still toggles `.calc-step.active`, so
   without `.calc-step{display:none}` every step of the calculator rendered at
   once. Styling the real class names keeps that logic working as-is.
   ========================================================================== */

/* ---- estimate form: privacy line + trust signals ---- */
.form-privacy{display:flex;gap:9px;align-items:flex-start;margin-top:14px;
  font-size:.82rem;color:var(--ink-3);max-width:600px}
.form-privacy svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--ink-3)}
.trust-signals{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--rule);max-width:600px}
.trust-item{display:flex;align-items:center;gap:8px;font-size:.87rem;font-weight:500;color:var(--ink-2)}
.trust-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--ok)}

/* ---- calculator: steps ---- */
.calc-wrapper{max-width:720px}
.calc-step{display:none}
.calc-step.active{display:block}
.progress-bar{display:flex;gap:6px;margin-bottom:34px;max-width:720px}
.progress-step{flex:1;height:3px;background:var(--rule);border-radius:2px}
.progress-step.active{background:var(--signal)}
.step-header{margin-bottom:24px}
.step-number{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.step-header h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);margin-bottom:8px}
.step-header p{font-size:.95rem;color:var(--ink-3);margin:0}

/* ---- calculator: option cards ---- */
.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:12px;margin-bottom:26px}
.option-card{border:1px solid var(--rule-2);background:var(--paper);padding:18px 20px;
  cursor:pointer;border-radius:2px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.option-card h4{margin:0 0 5px;font-size:1rem;color:var(--ink)}
.option-card p{margin:0;font-size:.88rem;color:var(--ink-3)}
/* emoji glyphs in product UI read as decoration, not information */
.option-card-icon{display:none}
.option-card.selected{border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
@media (hover:hover){.option-card:hover{border-color:var(--ink-3)}}

.material-card{border:1px solid var(--rule-2);background:var(--paper);padding:18px 20px;
  cursor:pointer;border-radius:2px}
.material-card.selected{border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
.price-indicator{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3);margin-top:6px}

/* ---- calculator: size + detail inputs ---- */
.size-input-wrap{margin:22px 0 26px;max-width:340px}
.size-input-label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.size-input{width:100%;padding:12px 14px;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-2);border-radius:2px}
.size-input:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:var(--signal)}
.detail-group{margin-bottom:26px}
.detail-group>.label,.detail-group h4{margin-bottom:10px}
.detail-options{display:flex;flex-wrap:wrap;gap:8px}
.detail-option{border:1px solid var(--rule-2);background:var(--paper);padding:9px 15px;
  font-size:.9rem;color:var(--ink-2);cursor:pointer;border-radius:2px}
.detail-option.selected{border-color:var(--ink);background:var(--ink);color:#fff}
@media (hover:hover){.detail-option:hover{border-color:var(--ink-3)}
  .detail-option.selected:hover{border-color:var(--ink)}}
.checkbox-option{display:flex;align-items:flex-start;gap:10px;padding:12px 0;
  border-bottom:1px solid var(--rule);cursor:pointer;font-size:.94rem}
.checkbox-option .check{width:18px;height:18px;flex:0 0 auto;border:1px solid var(--rule-2);
  border-radius:2px;margin-top:2px;background:var(--paper)}
.checkbox-option.selected .check{background:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}

/* ---- calculator: navigation ---- */
.step-nav{display:flex;gap:10px;align-items:center;margin-top:28px}
.back-btn{background:none;border:0;padding:12px 4px;font-family:var(--sans);font-size:.92rem;
  font-weight:500;color:var(--ink-3);cursor:pointer}
@media (hover:hover){.back-btn:hover{color:var(--ink)}}
.next-btn{margin-left:auto}
.btn-lg{padding:15px 30px;font-size:1rem}

/* ---- calculator: results ---- */
.results-card{border:1px solid var(--ink);background:var(--paper);margin-top:8px}
.results-header{padding:16px 22px;background:var(--ink);color:#fff;display:flex;
  flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.results-header h2,.results-header h3{color:#fff;font-size:1.05rem;margin:0}
.region-badge,.badge,.unlock-badge{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border:1px solid rgba(255,255,255,.35);color:#fff}
.results-range{padding:30px 22px;text-align:center;border-bottom:1px solid var(--rule)}
.range-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.range-value{font-family:var(--display);font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem);font-weight:700;
  color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.range-avg{margin-top:8px;font-size:.9rem;color:var(--ink-3)}
.results-blurred{filter:blur(9px);user-select:none;pointer-events:none}
.results-breakdown{padding:6px 22px 18px}
.breakdown-item{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--rule);font-size:.92rem}
.breakdown-item:last-child{border-bottom:0}
.breakdown-item .value{font-family:var(--mono);font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.results-note{padding:14px 22px;border-top:1px solid var(--rule);background:var(--surface);
  font-size:.8rem;color:var(--ink-3)}
.lead-form{margin-top:26px}
.lead-form h3{margin-bottom:6px}

/* ---- calculator: how it works ---- */
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-top:26px}
.how-card{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px 20px}
.how-card h3,.how-card h4{font-size:1rem;margin:0 0 6px}
.how-card p{font-size:.9rem;color:var(--ink-3);margin:0}
.how-card-num{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--ink-3);margin-bottom:8px}

@media (max-width:640px){
  .option-grid{grid-template-columns:minmax(0,1fr)}
  .step-nav{flex-wrap:wrap}
  .next-btn{width:100%;margin-left:0}
}