/* HomeAnvil — marketing + legal pages. Tokens only (see /assets/tokens.css, docs/UI_SYSTEM.md).
   Layout modeled on the category-marketplace pattern (Angi): search hero, category rail,
   project grid, image-card rails, tinted band, light footer. Mobile-first; breakpoints 48rem, 64rem. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-body);color:var(--color-text);background:var(--color-surface);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--weight-display);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);text-wrap:balance}
p{margin:0}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico:has(use){stroke:none;fill:currentColor;--icon-main:var(--color-action);--icon-accent:var(--color-brand-text)}   /* two-tone Molten Amber service sprite */

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-h);padding:0 var(--space-6);border-radius:var(--radius-button);border:1px solid transparent;font:var(--weight-bold) var(--text-base)/1 var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);-webkit-tap-highlight-color:transparent}
.btn--primary{background:var(--color-action);border-color:var(--color-action-edge);color:var(--color-action-fg)}
.btn--primary:hover{background:var(--color-action-hover)}
.btn--secondary{background:var(--color-surface);border:1px solid var(--color-border-strong);color:var(--color-text)}
.btn--secondary:hover{border-color:var(--color-text)}
.btn--sm{min-height:var(--control-h-sm);padding:0 var(--space-4);font-size:var(--text-sm)}
.btn--block{width:100%}
.link{color:var(--color-brand-text);font-weight:var(--weight-medium);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{text-decoration-thickness:2px}

/* ---------- badges & cards ---------- */
.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-bold);line-height:1.2}
.badge--success{background:var(--color-success-soft);color:var(--color-success-text)}
.badge--warning{background:var(--color-warning-soft);color:var(--color-warning-text)}
.badge--danger{background:var(--color-danger-soft);color:var(--color-danger-text)}
.badge--info{background:var(--color-info-soft);color:var(--color-info-text)}
.badge--neutral{background:var(--color-surface-2);color:var(--color-text-muted)}
.card{display:block;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-5);text-decoration:none;color:inherit}
a.card{transition:border-color var(--dur-fast)}
a.card:hover{border-color:var(--color-border-strong)}

/* ---------- image placeholder (swap for <img> when photos are ready) ---------- */
.ph{display:grid;place-items:center;background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-medium);text-align:center;padding:var(--space-4);border:1px dashed var(--color-border-strong)}
.ph>span{max-width:22ch}

/* ---------- header ---------- */
.site-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);position:relative;z-index:var(--z-header)}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:4rem}
.site-header__logo img{height:36px;width:auto}
.site-header__actions{display:flex;align-items:center;gap:var(--space-3)}
.site-header__actions .text-nav{display:none;font-size:var(--text-sm);font-weight:var(--weight-bold);text-decoration:none}
.site-header__actions .text-nav:hover{text-decoration:underline;text-underline-offset:3px}
.contractor-pill{display:inline-flex;align-items:center;justify-content:center;min-height:2.25rem;padding:0 var(--space-4);border:1.5px solid var(--color-brand-text);border-radius:999px;background:var(--color-surface);color:var(--color-text);font-size:var(--text-xs);font-weight:var(--weight-bold);line-height:1;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.contractor-pill:hover{background:var(--color-brand-text);border-color:var(--color-brand-text);color:var(--color-surface)}
.header-quote{display:none}
.cat-nav{display:none}
.site-nav{display:none}
@media (min-width:48rem){
  .site-header__in{min-height:5rem}
  .site-header__logo img{height:44px}
  .site-header__actions{gap:var(--space-5)}
  .site-header__actions .text-nav{display:inline}
  .contractor-pill{min-height:var(--control-h-sm);font-size:var(--text-sm)}
  .header-quote{display:inline-flex}
  .cat-nav{display:flex;gap:var(--space-6);padding-bottom:var(--space-3);overflow-x:auto}
  .cat-nav a{font-size:var(--text-sm);font-weight:var(--weight-bold);text-decoration:none;white-space:nowrap;padding-block:var(--space-1)}
  .cat-nav a:hover{text-decoration:underline;text-underline-offset:3px}
}
/* page nav links need desktop width; tablets keep the logo + CTA only */
@media (min-width:64rem){
  .site-nav{display:flex;gap:var(--space-6);margin-left:auto;margin-right:var(--space-5)}
  .site-nav a{font-size:var(--text-sm);font-weight:var(--weight-bold);text-decoration:none;white-space:nowrap}
}

/* ---------- hero with search ---------- */
.hero{position:relative;min-height:22rem;display:grid;align-items:center}
.hero__media{position:absolute;inset:0;border:0;overflow:hidden;background:var(--color-ink)}
.hero__slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover}
.hero__slide:nth-child(2) img{object-position:center 42%}
.hero__slide:nth-child(3) img{object-position:center}
.hero .wrap{position:relative;padding-block:var(--space-10)}
.hero__panel{background:var(--color-hero-scrim);color:var(--color-text-inverse);border-radius:var(--radius-card);padding:var(--space-6) var(--space-5);max-width:50rem}
.hero h1{font-size:clamp(1.375rem,1rem + 1.8vw,2rem);max-width:none}
.hero__sub{margin-top:var(--space-2);color:var(--color-on-scrim-muted)}
.hero__trust{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);list-style:none;margin:var(--space-4) 0 0;padding:0;color:var(--color-text-inverse);font-size:var(--text-sm);font-weight:var(--weight-bold)}
.hero__trust li{display:flex;align-items:center;gap:var(--space-2)}
.hero__trust li::before{content:"✓";display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:var(--radius-full);background:var(--color-action);color:var(--color-action-fg);font-size:.8rem}
@media (min-width:48rem){.hero{min-height:26rem}.hero__panel{padding:var(--space-8)}.hero h1{font-size:var(--text-4xl)}}

.hero__actions{margin-top:var(--space-6)}
.hero__actions .btn{width:100%}
@media (min-width:48rem){.hero__actions .btn{width:auto;padding-inline:var(--space-8)}}

/* ---------- carousel edge fades (classes set by the page script) ---------- */
.can-right{-webkit-mask-image:var(--mask-fade-r);mask-image:var(--mask-fade-r)}
.can-left{-webkit-mask-image:var(--mask-fade-l);mask-image:var(--mask-fade-l)}
.can-left.can-right{-webkit-mask-image:var(--mask-fade-both);mask-image:var(--mask-fade-both)}

/* ---------- category rail ---------- */
.cats{padding-block:var(--space-6) var(--space-2)}
.cats ul{display:flex;gap:var(--space-2);list-style:none;margin:0 var(--gutter);padding:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.cats ul::-webkit-scrollbar{display:none}
.cats li{flex:none;scroll-snap-align:start}
.cats a{display:grid;justify-items:center;gap:var(--space-2);width:7.5rem;padding:var(--space-3) var(--space-1);border-radius:var(--radius-control);text-decoration:none;font-size:var(--text-sm);font-weight:var(--weight-medium);text-align:center;transition:background-color var(--dur-fast)}
.cats a:hover{background:var(--color-brand-soft)}
.service-icon{width:64px;height:64px;object-fit:contain;flex:none}
.service-icon--sm{width:44px;height:44px}
@media (min-width:64rem){.cats ul{justify-content:center;max-width:var(--content-max);margin-inline:auto}}

/* ---------- sections ---------- */
.section{padding-block:var(--space-8)}
.section--tint{background:var(--color-bg);padding-block:var(--space-12)}
.section-title{font-size:var(--text-xl);margin-bottom:var(--space-5)}
.section-title--lg{font-size:var(--text-3xl);margin-bottom:var(--space-2)}
.section-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8)}
.section-top p{color:var(--color-text-muted);max-width:var(--prose-max)}

/* ---------- project tiles (icon + title + meta) ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);list-style:none;margin:0;padding:0}
@media (min-width:48rem){.tiles{gap:var(--space-3)}}
@media (min-width:64rem){.tiles{grid-template-columns:repeat(4,1fr)}}
.tiles>li{display:flex}
/* phones: 2 columns, icon stacked above the label */
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);width:100%;padding:var(--space-3);border-radius:var(--radius-control)}
.project-icon{width:44px;height:44px;object-fit:contain;flex:none}
@media (min-width:48rem){
  .tile{flex-direction:row;align-items:center;gap:var(--space-4);min-height:6.5rem;padding:var(--space-4) var(--space-5)}
  .project-icon{width:64px;height:64px}
}
.tile b{display:block;font-size:var(--text-sm);font-weight:var(--weight-bold)}
.tile small{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}

/* ---------- promo band ---------- */
.promo{display:grid;gap:var(--space-5);background:var(--color-brand-soft);border-radius:var(--radius-card);padding:var(--space-6) var(--space-5)}
.promo h2{font-size:var(--text-xl)}
.promo p{margin-top:var(--space-1);color:var(--color-text-muted)}
.field-box{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h);padding:0 var(--space-4);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-control)}
.field-box:focus-within{box-shadow:var(--ring)}
.field-box .ico{width:20px;height:20px;color:var(--color-text-muted)}
.field-box input,.field-box select{flex:1;min-width:0;height:calc(var(--control-h) - 2px);border:0;background:none;font-size:var(--input-size);outline:none}
@media (min-width:64rem){
  .promo{grid-template-columns:1fr auto;align-items:center;padding:var(--space-8)}
  }

/* ---------- image-card rail ---------- */
/* Carousel: clipped to the page gutters (nothing touches the screen edge); snaps one card per swipe */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% - var(--space-10));gap:var(--space-3);list-style:none;
  margin:0;padding:0 1px var(--space-2);scroll-padding-inline:1px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail>li{scroll-snap-align:start;scroll-snap-stop:always;min-width:0}
@media (min-width:48rem){.rail{grid-auto-columns:calc((100% - var(--space-4)) / 2);gap:var(--space-4)}}
@media (min-width:64rem){.rail{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);gap:var(--space-6);padding:0;overflow:visible}}
.pcard{display:flex;flex-direction:column;height:100%;padding:0;overflow:hidden;border-radius:var(--radius-control)}
.pcard__head{padding:var(--space-4)}
.pcard__head b{display:block;font-weight:var(--weight-bold)}
.pcard__head small{display:block;margin-top:var(--space-1);font-size:var(--text-xs);color:var(--color-text-muted)}
.pcard picture{display:block;aspect-ratio:4/3;overflow:hidden;border-top:1px solid var(--color-border)}
.pcard picture img{width:100%;height:100%;object-fit:cover}

/* ---------- steps (tinted band) ---------- */
.steps{display:grid;gap:var(--space-8);list-style:none;margin:0;padding:0}
@media (min-width:48rem){.steps{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}}
.steps picture{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-control)}
.steps picture img{width:100%;height:100%;object-fit:cover}
.steps h3{font-size:var(--text-lg);margin-top:var(--space-4)}
.steps p{margin-top:var(--space-2);color:var(--color-text-muted)}

/* ---------- accordions (service areas, faq, mobile footer) ---------- */
.acc{border-bottom:1px solid var(--color-border-strong)}
.acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:var(--tap-min);padding-block:var(--space-3);font-weight:var(--weight-display);font-size:var(--text-xl);letter-spacing:var(--tracking-display)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--dur-fast)}
.acc[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.acc__body{padding-bottom:var(--space-6)}
.towns{display:grid;gap:var(--space-5)}
@media (min-width:48rem){.towns{grid-template-columns:repeat(3,1fr)}}
.towns h3{font-size:var(--text-base);margin-bottom:var(--space-2)}
.towns p{color:var(--color-text-muted);font-size:var(--text-sm)}
.faq .acc{border-bottom-color:var(--color-border)}
.faq .acc>summary{font-size:var(--text-lg)}
.faq .acc__body{color:var(--color-text-muted);max-width:var(--prose-max)}

/* ---------- footer (light) ---------- */
.site-footer{background:var(--color-bg);border-top:1px solid var(--color-border);padding-block:var(--space-10) var(--space-16);font-size:var(--text-sm)}
.footer-grid{display:grid;gap:var(--space-6)}
.footer-cta h2{font-size:var(--text-lg)}
.footer-cta p{margin:var(--space-2) 0 var(--space-4);color:var(--color-text-muted)}
.footer-col{border-bottom:1px solid var(--color-border)}
.footer-col>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:var(--tap-min);font-weight:var(--weight-bold)}
.footer-col>summary::-webkit-details-marker{display:none}
.footer-col>summary::after{content:"+";font-size:var(--text-lg);font-weight:var(--weight-regular)}
.footer-col[open]>summary::after{content:"−"}
.footer-col nav{display:grid;padding-bottom:var(--space-3)}
.footer-col a{text-decoration:none;padding-block:var(--space-2)}
.footer-col a:hover{text-decoration:underline;text-underline-offset:3px}
@media (min-width:64rem){
  .footer-grid{grid-template-columns:1.3fr repeat(3,1fr);gap:var(--space-10)}
  .footer-col{border:0}
  .footer-col>summary{pointer-events:none;min-height:0;margin-bottom:var(--space-2)}
  .footer-col>summary::after{display:none}
  .footer-col a{padding-block:var(--space-1)}
}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-10);color:var(--color-text-muted)}
.footer-legal img{height:28px;width:auto}
.footer-legal nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.footer-legal a{text-decoration:none}
.footer-legal a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-note{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--text-xs);max-width:var(--prose-max)}

/* ---------- sticky mobile CTA ---------- */
.mobile-cta{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-sticky);background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:var(--shadow-md);padding:var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform var(--dur-base) var(--ease-out)}
.mobile-cta.show{transform:none}
@media (min-width:48rem){.mobile-cta{display:none}}

/* ---------- service picker modal ---------- */
.qm-overlay{position:fixed;inset:0;z-index:var(--z-overlay);display:grid;place-items:center;overflow-y:auto;overscroll-behavior:contain;
  padding:max(var(--space-4),env(safe-area-inset-top,0px)) var(--gutter) max(var(--space-4),env(safe-area-inset-bottom,0px));background:var(--color-scrim)}
body.qm-locked{overflow:hidden}
.qm-dialog{position:relative;width:100%;max-width:30rem;max-height:calc(100dvh - 2 * var(--space-4));overflow-y:auto;overscroll-behavior:contain;
  background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:var(--space-5)}
@media (min-width:48rem){.qm-dialog{max-width:34rem;padding:var(--space-8)}}
.qm-close{position:absolute;top:var(--space-2);right:var(--space-2);width:var(--tap-min);height:var(--tap-min);display:grid;place-items:center;border:0;background:none;font-size:var(--text-2xl);line-height:1;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-full)}
.qm-close:hover{background:var(--color-surface-2);color:var(--color-text)}
.qm-title{font-size:var(--text-xl);margin:0 var(--space-10) var(--space-4) 0}
/* options: 2-column grid, icon above label, so all projects fit without scrolling on small phones */
.qm-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
@media (min-width:48rem){.qm-options{gap:var(--space-3)}}
.qm-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);min-height:6.5rem;padding:var(--space-3) var(--space-2);
  border:1px solid var(--color-border);border-radius:var(--radius-control);text-align:center;text-decoration:none;font-weight:var(--weight-bold);font-size:var(--text-sm);line-height:var(--leading-snug);
  transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.qm-opt:hover,.qm-opt:focus-visible{border-color:var(--color-focus);background:var(--color-brand-soft)}
@media (min-width:48rem){.qm-opt{min-height:8rem;font-size:var(--text-base)}.qm-opt .service-icon--sm{width:56px;height:56px}}
.qm-opt .ico{width:28px;height:28px;color:var(--color-action);stroke-width:1.7}

/* ---------- legal ---------- */
.legal{max-width:var(--prose-max);margin-inline:auto;padding:var(--space-12) var(--gutter) var(--space-16)}
.legal h1{font-size:var(--text-3xl);margin-bottom:var(--space-2)}
.legal .updated{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-8)}
.legal h2{font-size:var(--text-xl);margin:var(--space-10) 0 var(--space-3)}
.legal p,.legal li{line-height:1.65}
.legal p+p{margin-top:var(--space-3)}
.legal ul{padding-left:var(--space-5);margin:var(--space-2) 0}
.legal a{color:var(--color-brand-text);text-decoration:underline;text-underline-offset:3px}
.legal .callout{background:var(--color-warning-soft);color:var(--color-warning-text);border-radius:var(--radius-control);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6)}
.partners-list{columns:1;column-gap:var(--space-8);padding:0;list-style:none;margin:var(--space-5) 0}
@media (min-width:48rem){.partners-list{columns:2}}
.partners-list li{padding-block:var(--space-1);border-bottom:1px solid var(--color-border);break-inside:avoid;font-size:var(--text-sm)}

/* ---------- guides (ADR 0078 section 7): answer box, contents, tables, quote bands ---------- */
.guide{max-width:64rem;margin-inline:auto;padding:var(--space-6) var(--gutter) var(--space-16)}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}
.crumbs li+li::before{content:"›";margin-right:var(--space-2)}
.crumbs a{color:var(--color-brand-text)}
.guide__head{max-width:var(--prose-max)}
.guide__head h1{font-size:var(--text-3xl);line-height:var(--leading-tight)}
.guide-meta{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-3)}
.guide-meta a{color:var(--color-brand-text);text-decoration:underline;text-underline-offset:3px}
.guide-answer{display:grid;gap:var(--space-3);margin-top:var(--space-5);padding:var(--space-5);background:var(--color-surface);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.guide-answer__line b{display:block;font-size:var(--text-2xl);font-weight:var(--weight-display);line-height:var(--leading-tight);color:var(--color-brand-text)}
.guide-answer__line span{color:var(--color-text-muted)}
.guide-answer .guide-meta{margin-top:0}
.guide-answer .btn{width:100%}
.guide-cta{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.guide-cta .btn{width:100%}
.guide__grid{display:grid;gap:var(--space-6);margin-top:var(--space-8)}
.guide-toc .acc{border-top:var(--border-w) solid var(--color-border-strong)}
.guide-toc ol{list-style:none;padding:0 0 var(--space-3)}
.guide-toc a{display:flex;align-items:center;min-height:var(--tap-min);color:var(--color-brand-text)}
.guide-prose{min-width:0}
.guide-prose h2{font-size:var(--text-xl);line-height:var(--leading-snug);margin:var(--space-10) 0 var(--space-3);scroll-margin-top:var(--space-6)}
.guide-prose>h2:first-child{margin-top:0}
.guide-prose p,.guide-prose li{line-height:var(--leading-body)}
.guide-prose p+p{margin-top:var(--space-3)}
.guide-prose ul,.guide-prose ol{padding-left:var(--space-5);margin:var(--space-3) 0}
.guide-prose li+li{margin-top:var(--space-2)}
.guide-prose a:not(.btn){color:var(--color-brand-text);text-decoration:underline;text-underline-offset:3px}
.back-link{display:inline-flex;align-items:center;min-height:var(--tap-min)}
.table-scroll{overflow-x:auto;margin:var(--space-5) 0;border:var(--border-w) solid var(--color-border);border-radius:var(--radius-card)}
.table-scroll table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table-scroll th,.table-scroll td{min-width:8rem;padding:var(--space-3) var(--space-4);text-align:left;vertical-align:top;border-bottom:var(--border-w) solid var(--color-border)}
.table-scroll thead th{background:var(--color-surface-2);font-weight:var(--weight-bold)}
.table-scroll tbody tr:last-child td{border-bottom:0}
.table-scroll tbody tr:nth-child(even) td{background:var(--color-surface-2)}
.guide-band{margin:var(--space-10) 0}
.guide-band .guide-band__title{margin-top:0;font-size:var(--text-xl);font-weight:var(--weight-display);color:var(--color-text)}
.guide-band .btn{width:100%}
.guide-related{margin-top:var(--space-12)}
.guide-related ul{list-style:none;padding:0;display:grid;gap:var(--space-3)}
.guide-prose .guide-related a{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-4) var(--space-5);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-card);text-decoration:none}
.guide-related b{display:block;color:var(--color-text)}
.guide-related small,.guide-list small{display:block;margin-top:var(--space-1);color:var(--color-text-muted);font-size:var(--text-sm)}
.guide-list small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.guide-related img,.guide-list img{flex:none;width:6rem;height:4rem;object-fit:cover;border-radius:var(--radius-sm)}
.guide-hero{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-card);margin-top:var(--space-5)}
.guide-related a>span{display:block;min-width:0}
.guide-group{margin-top:var(--space-10)}
.guide-group h2{font-size:var(--text-2xl)}
.guide-group h3{font-size:var(--text-lg);margin:var(--space-6) 0 var(--space-3);color:var(--color-text-muted)}
.guide-list{list-style:none;padding:0;display:grid;gap:var(--space-3)}
.guide-list a{display:flex;gap:var(--space-4);align-items:center;height:100%;padding:var(--space-4) var(--space-5);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-card);text-decoration:none}
.guide-list b{display:block;color:var(--color-text)}
.guide-list a>span{display:block;min-width:0}
@media (min-width:48rem){.guide-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The guide hubs, /guides/ and /guides/<trade>/: a hero band with the quote button, topic chips, featured cards, the lists. */
.hub-hero{position:relative;overflow:hidden;background:var(--color-ink)}
.hub-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-hero__in{position:relative;max-width:76rem;margin-inline:auto;padding:var(--space-8) var(--gutter)}
.hub-hero .hero__panel{max-width:46rem}
.hub-hero:not(.has-photo) .hero__panel{background:none;padding-inline:0}
.hub-hero h1{font-size:clamp(1.75rem,1.25rem + 2vw,2.5rem);line-height:var(--leading-tight);color:var(--color-text-inverse)}
.hub-hero .hero__sub{margin-top:var(--space-3);line-height:var(--leading-body)}
.hub-hero .crumbs ol{color:var(--color-on-scrim-muted)}
.hub-hero .crumbs a{color:var(--color-text-inverse)}
.hub-chips{margin-inline:calc(var(--gutter) * -1);overflow-x:auto;scrollbar-width:none}
.hub-chips ul{list-style:none;display:flex;gap:var(--space-2);padding:0 var(--gutter);width:max-content}
.hub-chips a{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-4);border:var(--border-w) solid var(--color-border-strong);border-radius:var(--radius-full);color:var(--color-text);font-weight:var(--weight-bold);font-size:var(--text-sm);text-decoration:none;white-space:nowrap}
.hub-chips a:hover{border-color:var(--color-brand-text);color:var(--color-brand-text)}
.hub-chips span{color:var(--color-text-muted);font-weight:var(--weight-regular)}
.hub-featured{margin-top:var(--space-8)}
.guides-hub .hub-featured{margin-top:var(--space-6)}
.hub-featured h2,.guides-all h2{font-size:var(--text-2xl);margin-bottom:var(--space-4)}
.guide-features,.hub-tiles{list-style:none;padding:0;display:grid;gap:var(--space-4)}
.guide-feature,.hub-tile{display:flex;flex-direction:column;height:100%;overflow:hidden;border:var(--border-w) solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);text-decoration:none;transition:box-shadow var(--dur-base) var(--ease-out)}
.guide-feature:hover,.hub-tile:hover{box-shadow:var(--shadow-md)}
.guide-feature img,.hub-tile img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.guide-feature>span,.hub-tile>span{display:block;padding:var(--space-4) var(--space-5) var(--space-5)}
.guide-feature b,.hub-tile b{display:block;color:var(--color-text);line-height:var(--leading-snug)}
.hub-tile b{font-size:var(--text-xl)}
.guide-feature strong{display:block;margin-top:var(--space-2);color:var(--color-brand-text);font-size:var(--text-lg);font-weight:var(--weight-display)}
.guide-feature small,.hub-tile small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-sm)}
.hub-tile small{-webkit-line-clamp:3;line-clamp:3}
.guide-group{scroll-margin-top:var(--space-6)}
.guide-date{display:block;margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-xs)}
.guides-hub .guide-band{margin-top:var(--space-12)}
.guides-hub>p:last-child{margin-top:var(--space-6)}
.guides-hub>p:last-child a,.all-group h3 a,.link-cols a{color:var(--color-brand-text)}
.guides-all{margin-top:var(--space-12);padding-top:var(--space-8);border-top:var(--border-w) solid var(--color-border)}
.all-group+.all-group{margin-top:var(--space-8)}
.all-group h3{font-size:var(--text-xl)}
.all-group h4{margin:var(--space-5) 0 var(--space-2);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}
.link-cols{list-style:none;padding:0;columns:1;column-gap:var(--space-8);font-size:var(--text-sm)}
.link-cols li{break-inside:avoid;padding-block:var(--space-1)}
.link-cols a{display:inline-block;padding-block:var(--space-1);text-decoration:none}
.link-cols a:hover{text-decoration:underline}
/* "How we got these numbers" or "Where this information comes from": the sources in small, muted type, as a reference, not as reading (every page with one). */
.guide-prose :is(#how-we-got-these-numbers,#where-this-information-comes-from){font-size:var(--text-lg)}
.guide-prose :is(#how-we-got-these-numbers,#where-this-information-comes-from) ~ :is(p,ul,ol,details){font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-body)}
.guide-prose :is(#how-we-got-these-numbers,#where-this-information-comes-from) ~ ul li+li{margin-top:var(--space-1)}
.guide-prose :is(#how-we-got-these-numbers,#where-this-information-comes-from) ~ :is(p,ul,ol) a{color:var(--color-text-muted)}
.guide-prose .source-quotes{margin-top:var(--space-3)}
.guide-prose .source-quotes summary{font-size:var(--text-sm)}
/* Links to the state pages, on the hub and at the foot of each state page: chips at body size, no list indent. */
.state-links,.guide-prose .state-links{list-style:none;padding:0;margin:var(--space-3) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.guide-prose .state-links li{margin:0}
.state-links a,.guide-prose .state-links a{display:flex;align-items:center;min-height:var(--tap-min);padding:0 var(--space-4);border:var(--border-w) solid var(--color-border-strong);border-radius:var(--radius-full);color:var(--color-text);font-size:var(--text-base);font-weight:var(--weight-bold);text-decoration:none}
.state-links a:hover,.guide-prose .state-links a:hover{border-color:var(--color-brand-text);color:var(--color-brand-text)}
/* A state page's disaster chart: one hue, largest first, the value at each bar's end (packages/site/funnel/states.mjs). */
.state-chart{margin:var(--space-5) 0;padding:var(--space-4) var(--space-5);background:var(--color-surface);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-card)}
.state-chart figcaption{font-weight:var(--weight-bold);margin-bottom:var(--space-3)}
.guide-prose .bars{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2)}
.guide-prose .bars li{display:grid;grid-template-columns:minmax(7rem,38%) minmax(0,1fr) 2.5rem;align-items:center;gap:var(--space-3);margin:0;font-size:var(--text-sm)}
.bars__track{display:block;overflow:hidden}
.bars__track rect{fill:var(--color-action)}
.bars__value{font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;text-align:right}
.guide-prose .state-chart__note{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-xs)}
.hub-tools{list-style:none;padding:0;display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.hub-tool{display:flex;align-items:center;gap:var(--space-4);height:100%;padding:var(--space-4) var(--space-5);background:var(--color-brand-soft);border-radius:var(--radius-card);text-decoration:none;color:var(--color-text)}
.hub-tool b{display:block;font-size:var(--text-lg)}
.hub-tool small{display:block;margin-top:var(--space-1);color:var(--color-text-muted);font-size:var(--text-sm)}
.hub-tool__go{margin-left:auto;font-size:var(--text-2xl);color:var(--color-brand-text)}
/* "How we got these numbers" or "Where this information comes from": the sources in small, muted type, as a reference, not as reading (every page with one). */
.guide-prose :is(#how-we-got-these-numbers,#where-this-information-comes-from){font-size:var(--text-lg)}
.guide-prose :is(#how-we-got-these-numbers,#where-this-information-comes-from) ~ :is(p,ul,ol,details){font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-body)}
.guide-prose :is(#how-we-got-these-numbers,#where-this-information-comes-from) ~ ul li+li{margin-top:var(--space-1)}
.guide-prose :is(#how-we-got-these-numbers,#where-this-information-comes-from) ~ :is(p,ul,ol) a{color:var(--color-text-muted)}
/* The roof cost calculator: buttons in groups, and the estimate beside them on a desktop. */
.guide-lede{margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-lg);line-height:var(--leading-body)}
.calc{display:grid;gap:var(--space-5);margin-bottom:var(--space-10)}
.calc--wait{visibility:hidden}  /* until the script reveals it the calculator keeps its room, so the table below does not jump (CLS, ADR 0052); [hidden] cannot do this, it is display:none!important above */
.calc-form{display:grid;gap:var(--space-6)}
.calc-q__label{font-weight:var(--weight-bold);margin-bottom:var(--space-3)}
.calc-q__label small{display:block;font-weight:var(--weight-regular);color:var(--color-text-muted);font-size:var(--text-sm)}
.calc-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.calc-opt{display:flex;flex-direction:column;justify-content:center;min-height:var(--tap-min);padding:var(--space-2) var(--space-3);border:var(--border-w) solid var(--color-border-strong);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text);font:inherit;text-align:left;cursor:pointer}
.calc-opt b{font-size:var(--text-sm)}
.calc-opt small{color:var(--color-text-muted);font-size:var(--text-xs)}
.calc-opt:hover:not(:disabled){border-color:var(--color-text)}
.calc-opt[aria-pressed="true"]{border-color:var(--color-brand-text);border-width:2px;background:var(--color-brand-soft)}
.calc-opt:disabled{opacity:.45;cursor:not-allowed}
.calc-opt:focus-visible{outline:none;box-shadow:var(--ring)}
.calc-step{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.calc-step__btn{width:var(--tap-min);align-items:center;font-size:var(--text-xl);font-weight:var(--weight-bold)}
.calc-step__value{min-width:8rem;text-align:center;font-weight:var(--weight-bold);font-size:var(--text-lg)}
.calc-result{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-5);background:var(--color-surface);border:var(--border-w) solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.calc-result__label{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}
.guide-prose .calc-result__range{margin:0;font-size:var(--text-3xl);font-weight:var(--weight-display);line-height:var(--leading-tight);color:var(--color-brand-text)}
.guide-prose .calc-result__detail,.guide-prose .calc-result__note{margin:0}
.calc-result__note{font-size:var(--text-sm);color:var(--color-text-muted)}
.calc-result .btn{margin-top:var(--space-2)}
/* Phones: the estimate rides at the foot of the screen while the buttons scroll past, and settles below them. */
.calc-result{position:sticky;bottom:0;z-index:var(--z-sticky);gap:var(--space-1);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-md)}
.guide-prose .calc-result__range{font-size:var(--text-2xl)}
.calc-result__note{display:none}
@media (min-width:48rem){
  .guide-features,.hub-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
  .calc-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .calc-result{position:static;gap:var(--space-2);padding:var(--space-5);box-shadow:var(--shadow-sm)}
  .guide-prose .calc-result__range{font-size:var(--text-3xl)}
  .calc-result__note{display:block}
  .link-cols{columns:2}
  .hub-hero__in{padding-block:var(--space-12)}
  .hub-chips{margin-inline:0;overflow:visible}
  .hub-chips ul{flex-wrap:wrap;padding:0;width:auto}
}
@media (min-width:64rem){
  main.guide.guide--tool{grid-template-columns:minmax(0,56rem)}
  .calc{grid-template-columns:minmax(0,1fr) 18rem;align-items:start}
  .calc-result{position:sticky;top:var(--space-6);bottom:auto}
  .guide-features{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hub-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .link-cols{columns:3}
}
@media (min-width:48rem){
  /* Tablets: one centered reading column, so a line stays within about 75 characters. */
  .guide__head,.guide__grid{max-width:var(--prose-max);margin-inline:auto}
  .guide-answer .btn,.guide-band .btn,.guide-cta .btn{width:auto;justify-self:start}
  .guide-answer__line b{display:inline;margin-right:var(--space-2)}
}
@media (min-width:64rem){
  /* Desktop: a wider reading column and the contents rail beside it from the top, centered as one block. */
  .guide:not(.guides-index){max-width:76rem;display:grid;grid-template-columns:minmax(0,48rem) 17rem;column-gap:var(--space-12);justify-content:center;align-items:start}
  .guides-index{max-width:76rem}
  .guide__head{grid-column:1;max-width:none;margin-inline:0}
  .guide__grid{display:contents}
  .guide__body{grid-column:1;grid-row:2;margin-top:var(--space-8)}
  .guide-prose{font-size:var(--text-lg)}
  .guide-toc{grid-column:2;grid-row:1 / span 2;position:sticky;top:var(--space-6);border-left:var(--border-w) solid var(--color-border);padding-left:var(--space-5)}
  .guide-toc .acc{border:0}
  .guide-toc .acc>summary{pointer-events:none;min-height:auto;padding-block:0;font-size:var(--text-base)}
  .guide-toc .acc>summary::after{display:none}
  .guide-toc .acc::details-content{content-visibility:visible}
  .guide-toc ol{padding:var(--space-2) 0 0}
  .guide-toc a{min-height:auto;padding-block:var(--space-1)}
}

/* ---------- simple footer (legal + contractor pages) ---------- */
.site-footer .wrap>a img{height:32px;width:auto}
.site-footer .wrap>nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-block:var(--space-4)}
.site-footer .wrap>nav a{text-decoration:none}
.site-footer .wrap>nav a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer .wrap>p{color:var(--color-text-muted);max-width:var(--prose-max)}
.site-footer .wrap>p+p{margin-top:var(--space-2)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}