/* ============================================================
   STEEL MASTER ROOFING
   Brand system matched to the existing print and web identity:
   lime green, black and white, Poppins, soft-cornered cards
   with a hard black keyline.
   ============================================================ */

:root{
  --green:#8BBF55;
  --green-mid:#7BAE47;
  --green-deep:#4A7024;
  --green-wash:#F1F7E8;
  --ink:#141715;
  --ink-2:#2A2F2B;
  --grey:#4A4E48;
  --line:#E3E6DF;
  --paper:#FFFFFF;
  --paper-2:#F6F8F3;

  --display:'Poppins',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;

  --r:14px;
  --gut:clamp(20px,4vw,64px);
  --maxw:1220px;
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.04}
h2{font-size:clamp(1.85rem,3.6vw,2.85rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.45rem)}
p{margin:0 0 1.05em}
strong{font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:74ch}

.eyebrow{display:block;font-size:.75rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-deep);margin-bottom:.85rem}
.eyebrow--light{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.lede{font-size:clamp(1.04rem,1.5vw,1.24rem);line-height:1.58;color:var(--grey)}
.label{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--grey)}

/* ---------- Buttons --------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-size:.86rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;padding:1rem 1.7rem;border:2px solid transparent;
  border-radius:var(--r);cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.btn:focus-visible{outline:3px solid var(--green-deep);outline-offset:3px}
.btn--primary{background:var(--green);color:var(--ink);border-color:var(--ink)}
.btn--primary:hover{background:var(--green-mid);transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn--ghost{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--onDark{border-color:#fff;color:#fff}
.btn--onDark:hover{background:#fff;color:var(--ink)}
/* When btn--onDark is placed on a light section, invert automatically */
.sec:not(.sec--dark) .btn--onDark,.sec--tint .btn--onDark,.band .btn--onDark,.phead:not([class*="--dark"]) .btn--onDark{border-color:var(--ink);color:var(--ink)}
.sec:not(.sec--dark) .btn--onDark:hover,.sec--tint .btn--onDark:hover,.band .btn--onDark:hover,.phead:not([class*="--dark"]) .btn--onDark:hover{background:var(--ink);color:#fff}

/* ---------- Header ---------------------------------------- */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:1.4rem;height:var(--nav-h);
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-right:auto}
.brand img{height:52px;width:52px;flex:0 0 52px}
.ftr .brand img{height:58px;width:58px;flex:0 0 58px}
.brand__txt{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.03em;
  text-transform:uppercase;line-height:1.08;color:var(--ink);white-space:nowrap}
.brand__txt span{display:block;font-size:.55rem;font-weight:500;letter-spacing:.17em;
  color:var(--grey);margin-top:.3rem}
.nav{display:flex;align-items:center;gap:.88rem;flex-wrap:nowrap;margin-left:.4rem}
.nav a{font-size:.75rem;font-weight:500;color:var(--ink);text-decoration:none;
  padding:.3rem 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--green)}
.hdr .btn{padding:.66rem .95rem;font-size:.71rem;white-space:nowrap}
.navtog{display:none;background:none;border:0;color:var(--ink);padding:.5rem;cursor:pointer}

/* ---------- Nav dropdowns (Roofing mega menu, Gallery, Pricing) ---------- */
.nav__item{position:relative}
.nav__trigger{display:inline-flex;align-items:center;gap:.3rem;font:inherit;font-size:.75rem;
  font-weight:500;color:var(--ink);background:none;border:0;cursor:pointer;
  padding:.3rem 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav__trigger:hover,.nav__trigger.is-current{border-bottom-color:var(--green)}
.nav__caret{flex:0 0 auto;transition:transform .15s ease}
.nav__item[data-open=true] .nav__caret{transform:rotate(180deg)}
.nav__dd{position:absolute;top:100%;left:0;margin-top:.6rem;background:#fff;
  border:1px solid var(--line);border-radius:.7rem;box-shadow:0 16px 36px rgba(20,23,21,.14);
  padding:.9rem;display:none;z-index:60}
.nav__dd a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.78rem;font-weight:500;color:var(--ink);
  text-decoration:none;padding:.5rem .6rem;border-radius:.4rem;white-space:nowrap}
.nav__dd a:hover{background:var(--green-wash);color:var(--green-deep)}
.nav__dd a i{font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey);background:var(--paper-2);
  border:1px solid var(--line);border-radius:1rem;padding:.15rem .5rem}
.nav__dd a:hover i{color:var(--green-deep);border-color:var(--green)}
.nav__dd--mega{display:none;grid-template-columns:1fr 1fr;gap:1.4rem;min-width:480px;padding:1.1rem}
.nav__col-h{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grey);margin:0 0 .3rem;padding:0 .6rem}
.nav__soon{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.78rem;font-weight:500;color:var(--grey);padding:.5rem .6rem;white-space:nowrap;opacity:.65}
.nav__soon i{font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-deep);background:var(--green-wash);
  border-radius:1rem;padding:.15rem .5rem}
.nav__item:hover>.nav__dd,.nav__item:focus-within>.nav__dd,.nav__item[data-open=true]>.nav__dd{display:flex;flex-direction:column}
.nav__item:hover>.nav__dd--mega,.nav__item:focus-within>.nav__dd--mega,.nav__item[data-open=true]>.nav__dd--mega{display:grid}

/* Desktop dropdown hover bridge.
   .nav__dd sits .6rem below the trigger. That gap is not hoverable, so moving the
   cursor down toward the menu breaks :hover on .nav__item and the menu closes before
   you get there. This fills the gap with an invisible strip that belongs to .nav__dd,
   so the hover chain never breaks. Visual spacing is unchanged.
   Desktop only: below 1340px the nav is a tap accordion and .nav__dd is static. */
@media (min-width:1341px){
  .nav__dd::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-.75rem;
    height:.75rem;
  }
  /* Widen the catch area slightly so a diagonal drag toward the menu still lands. */
  .nav__item::after{
    content:"";
    position:absolute;
    left:-.5rem;
    right:-.5rem;
    top:100%;
    height:.75rem;
    pointer-events:none;
  }
  .nav__item:hover::after{pointer-events:auto}
}

@media (max-width:1340px){
  .navtog{display:block}
  .nav{position:fixed;inset:var(--nav-h) 0 auto 0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:.4rem var(--gut) 1.4rem;border-bottom:1px solid var(--line);display:none;
    overflow-y:auto;max-height:calc(100vh - var(--nav-h))}
  .nav[data-open=true]{display:flex}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--line)}
  .nav__item{border-bottom:1px solid var(--line)}
  .nav__trigger{width:100%;justify-content:space-between;padding:.95rem 0;border-bottom:0}
  .nav__dd{position:static;margin-top:0;border:0;box-shadow:none;border-radius:0;
    padding:0 0 .5rem 1rem;display:none}
  .nav__dd--mega{min-width:0;grid-template-columns:1fr;gap:0;padding:0 0 .5rem 1rem}
  .nav__col-h{padding:.6rem 0 .2rem}
  .nav__item:hover>.nav__dd,.nav__item:focus-within>.nav__dd{display:none}
  .nav__item:hover>.nav__dd--mega,.nav__item:focus-within>.nav__dd--mega{display:none}
  .nav__item[data-open=true]>.nav__dd{display:flex}
  .nav__item[data-open=true]>.nav__dd--mega{display:flex}
  .nav__dd a,.nav__soon{padding:.7rem 0}
  .hdr__in .btn{display:none}
}

/* ---------- Hero ------------------------------------------ */
.hero{position:relative;background:var(--ink);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media .ph--video,.hero__media picture,.hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.hero__media picture{position:absolute;inset:0}
.hero__media picture img{width:100%;height:100%;object-fit:cover;object-position:center 55%;animation:kenburns 24s ease-in-out infinite alternate;transform-origin:center 55%}
@keyframes kenburns{0%{transform:scale(1.02) translate3d(0,0,0)}50%{transform:scale(1.08) translate3d(-1%,-.5%,0)}100%{transform:scale(1.02) translate3d(.5%,.5%,0)}}
@media (max-width:760px){.hero__media picture img{object-position:center 65%;animation:kenburns-mobile 30s ease-in-out infinite alternate}
@keyframes kenburns-mobile{0%{transform:scale(1.01)}100%{transform:scale(1.05)}}}
@media (prefers-reduced-motion:reduce){.hero__media picture img{animation:none;transform:scale(1.01)}}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,10,.5) 0%,rgba(10,12,10,.55) 45%,rgba(10,12,10,.86) 100%)}
.hero__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:clamp(4.5rem,14vh,9rem) var(--gut) clamp(3rem,7vh,5rem)}
.hero h1{color:#fff;max-width:16ch;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:var(--green);display:block}
.hero__sub{color:#fff;font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:600;
  margin:1.3rem 0 .55rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero__note{color:rgba(255,255,255,.9);max-width:54ch;margin:0 0 2rem;line-height:1.55}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem}

.proof{background:var(--ink);border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:2}
.proof__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(4,1fr)}
.proof__cell{padding:1.5rem 1rem 1.6rem;border-left:1px solid rgba(255,255,255,.12)}
.proof__cell:first-child{border-left:0;padding-left:0}
.proof__n{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2.3rem);
  color:var(--green);line-height:1;letter-spacing:-.03em;display:block}
.proof__l{font-size:.67rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:.5rem;display:block;line-height:1.4}
@media (max-width:760px){
  .proof__in{grid-template-columns:1fr 1fr}
  .proof__cell{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .proof__cell:nth-child(2),.proof__cell:nth-child(4){border-left:1px solid rgba(255,255,255,.12);padding-left:1rem}
  .proof__cell:nth-child(-n+2){border-top:0}
}

/* ---------- Sections -------------------------------------- */
.sec{padding:clamp(3.4rem,7.5vw,6rem) 0}
.sec--dark{background:var(--ink);color:#fff}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .lede{color:rgba(255,255,255,.8)}
.sec--tint{background:var(--paper-2)}
.sec__head{max-width:70ch;margin-bottom:clamp(1.9rem,4vw,3rem)}
.sec__head h2{text-wrap:balance}
.sec__head p{margin-top:1rem}

/* ---------- SIGNATURE: green keyline card ------------------ */
.card{background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--r);
  padding:1.65rem 1.5rem 1.75rem;text-decoration:none;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 0 -2px var(--green)}
.card:focus-visible{outline:3px solid var(--green-deep);outline-offset:3px}
.card--green{background:var(--green)}
.card--dark{background:var(--ink)}
.card--dark h3{color:#fff}
.card--dark .label{color:var(--green)}
.card h3{margin:.7rem 0 .5rem}
.card p{font-size:.94rem;color:var(--ink-2);margin-bottom:1.1rem}
.card.card--dark p{color:rgba(255,255,255,.92)}
.card.card--green p{color:var(--ink)}
.card__go{margin-top:auto;font-size:.77rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--green-deep)}
.card--green .card__go{color:var(--ink)}
.card--dark .card__go{color:var(--green)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:1.1rem}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.4rem);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- Placeholders ---------------------------------- */
.ph{position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#EDEFEA,#DDE1D8);
  border:2px dashed var(--line);border-radius:var(--r);color:var(--grey);
  font-size:.72rem;font-weight:500;letter-spacing:.05em;text-align:center;padding:1.4rem;min-height:200px}
.ph--4x3{aspect-ratio:4/3}
.ph--16x9{aspect-ratio:16/9}
.ph--video{min-height:100%;border:0;border-radius:0;align-items:flex-end;justify-content:flex-end;
  padding:0 var(--gut) clamp(1.2rem,3vw,2.2rem) 0;
  background:linear-gradient(150deg,#3A403B 0%,#232823 55%,#141715 100%)}
.ph--video span{display:block;text-align:left;max-width:34ch;font-size:.63rem;line-height:1.85;
  color:rgba(255,255,255,.78);border-left:3px solid rgba(139,191,85,.55);padding-left:.85rem}
@media (max-width:900px){.ph--video{display:none}}
.ph b{display:block;font-weight:600;color:var(--ink);margin-bottom:.3rem}
.ph--video b{color:rgba(255,255,255,.75)}

/* ---------- Price callout --------------------------------- */
.price{background:var(--green);border:2px solid var(--ink);border-radius:var(--r);
  padding:1.55rem 1.7rem;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;
  justify-content:space-between}
.price__n{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4.2vw,2.9rem);
  line-height:1;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.price__n small{font-size:.36em;font-weight:600;letter-spacing:0}
.price__t{font-size:.94rem;color:var(--ink-2);max-width:48ch;margin:0}
.price--plain{background:var(--green-wash);border-color:var(--ink)}

/* ---------- Map ------------------------------------------- */
.mapwrap{position:relative;border:2px solid var(--ink);border-radius:var(--r);background:var(--ink-2);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mapwrap .ph{border:0;background:none;color:rgba(255,255,255,.72);min-height:0}
.mapwrap .ph b{color:#fff}
.pin{position:absolute;width:10px;height:10px;background:var(--green);border-radius:50%;
  box-shadow:0 0 0 3px rgba(139,191,85,.3)}

/* Inline city map: fills .mapwrap, keeps the black border */
.mapwrap.mapwrap--live{display:block !important;padding:0 !important;height:auto}
#cityMap{width:100%;height:100%;min-height:360px;background:var(--ink-2);border-radius:calc(var(--r) - 2px)}
.smr-pin{background:transparent;border:0}
.smr-pin span{display:block;width:18px;height:18px;border-radius:50%;background:var(--green);
  border:3px solid #fff;box-shadow:0 0 0 2px rgba(20,23,21,.55),0 2px 6px rgba(0,0,0,.35)}
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.leaflet-popup-content{margin:12px 14px;font-family:var(--body);font-size:13px;line-height:1.5}
.leaflet-container{font-family:var(--body)}

/* ---------- Town index ------------------------------------ */
.towns{columns:4 168px;column-gap:2rem;margin:0;padding:0;list-style:none}
.towns li{break-inside:avoid;margin-bottom:.45rem}
.towns a{font-size:.9rem;text-decoration:none;color:var(--grey);
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.towns a:hover{color:var(--green-deep);border-bottom-color:var(--green)}
.sec--dark .towns a{color:rgba(255,255,255,.78)}
.sec--dark .towns a:hover{color:var(--green);border-bottom-color:var(--green)}

.quoteblk{background:var(--green);border:2px solid var(--ink);border-radius:var(--r);
  padding:clamp(1.7rem,4.5vw,3rem);color:var(--ink)}
.quoteblk .eyebrow{color:var(--ink-2)}
.quoteblk .lede{color:var(--ink-2)}
.quoteblk h2{color:var(--ink)}
/* ---------- Reviews / gallery / FAQ ----------------------- */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:1.15rem}
.rev{background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:1.45rem 1.4rem;margin:0}
.rev p{font-size:.94rem;margin-bottom:.95rem}
.rev cite{font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  font-style:normal;color:var(--grey)}
.stars{color:var(--green-deep);letter-spacing:.14em;font-size:.9rem;margin-bottom:.6rem}

.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem}
.gal figure{margin:0}
.gal figure a{display:block;text-decoration:none;color:inherit}
.gal figure a:hover img{transform:scale(1.02);box-shadow:0 6px 20px rgba(20,23,21,.16)}
.gal figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:10px;background:#0d0f0d;transition:transform .2s ease,box-shadow .2s ease}
.gal figcaption{font-size:.76rem;font-weight:500;color:var(--grey);margin-top:.4rem;line-height:1.35}
.gal figcaption a{color:var(--green-deep);text-decoration:none}
.gal figcaption a:hover{text-decoration:underline}
@media (max-width:520px){
  .gal{grid-template-columns:repeat(2,1fr);gap:.55rem}
  .gal figure img{aspect-ratio:1/1;border-radius:8px}
  .gal figcaption{font-size:.7rem;margin-top:.3rem}
}

.faq details{border:2px solid var(--ink);border-radius:var(--r);margin-bottom:.7rem;background:#fff}
.faq summary{cursor:pointer;padding:1.1rem 2.8rem 1.1rem 1.3rem;font-weight:600;
  font-size:1.01rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;top:.88rem;font-size:1.5rem;
  color:var(--green-deep);font-weight:400;line-height:1}
.faq details[open]{background:var(--green-wash)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px}
.faq .faq__a{padding:0 1.3rem 1.25rem;color:var(--grey)}

/* ---------- Breadcrumb / page head ------------------------- */
.crumb{font-size:.75rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--grey)}
.crumb a{text-decoration:none;color:var(--grey)}
.crumb a:hover{color:var(--green-deep)}
.crumb span{opacity:.5;margin:0 .45rem}
.phead{background:var(--ink);color:#fff;padding:clamp(2.4rem,5.5vw,4rem) 0 clamp(2.2rem,4.5vw,3.2rem)}
.phead h1{font-size:clamp(2rem,4.4vw,3.3rem);max-width:20ch;color:#fff}
.phead h1 em{font-style:normal;color:var(--green)}
.phead .lede{color:rgba(255,255,255,.82);margin-top:1.05rem;max-width:62ch}
.phead .crumb{color:rgba(255,255,255,.7);margin-bottom:1.35rem}
.phead .crumb a{color:rgba(255,255,255,.7)}
.phead .crumb a:hover{color:var(--green)}

/* ---------- Prose / spec ---------------------------------- */
.prose h2{margin:2.4rem 0 .9rem}
.prose h3{margin:1.85rem 0 .6rem}
.prose ul{padding-left:1.15rem;margin:0 0 1.2rem}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--green-deep);text-underline-offset:3px}
.prose > *:first-child{margin-top:0}

.spec{list-style:none;margin:0;padding:0;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden}
.spec li{display:flex;gap:1.4rem;justify-content:space-between;padding:.78rem 1.1rem;
  border-bottom:1px solid var(--line);font-size:.88rem;background:#fff}
.spec li:last-child{border-bottom:0}
.spec li:nth-child(even){background:var(--paper-2)}
.spec b{font-weight:600;color:var(--grey);letter-spacing:.06em;text-transform:uppercase;font-size:.71rem}
.spec span{text-align:right}

/* ---------- CTA band / footer ----------------------------- */
.band{background:var(--green)}
.band__in{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,5.5vw,3.8rem) var(--gut);
  display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between}
.band h2{max-width:20ch;color:var(--ink)}
.band p{color:var(--ink-2);margin:.7rem 0 0;max-width:46ch}

.ftr{background:var(--ink);color:rgba(255,255,255,.78);padding:clamp(2.6rem,5.5vw,3.8rem) 0 2rem;font-size:.9rem}
.ftr .brand__txt{color:#fff}
.ftr .brand__txt span{color:rgba(255,255,255,.6)}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.2rem}
@media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr__grid{grid-template-columns:1fr}}
.ftr h4{font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green);margin-bottom:.9rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.48rem}
.ftr a{text-decoration:none;color:rgba(255,255,255,.78)}
.ftr a:hover{color:var(--green)}
.ftr__base{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.74rem;
  letter-spacing:.05em;color:rgba(255,255,255,.6)}
.ftr__base a{color:rgba(255,255,255,.6)}

.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:var(--ink);
  padding:.85rem 1.2rem;z-index:200;font-weight:600;font-size:.8rem}
.skip:focus{left:0}
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ============================================================
   HOMEPAGE ADDITIONS
   ============================================================ */

/* ---- cost per year comparison ---- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:820px){.vs{grid-template-columns:1fr}}
/* Three-column variant (barndominium build tiers). Was an inline
   grid-template-columns:repeat(3,1fr), which beat the media query above and left
   three columns crammed into a phone width. Class-based so it can collapse. */
.vs--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1020px){.vs--3{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.vs--3{grid-template-columns:1fr}}

/* ---------- Proof bar: the two stats that link out ------------------
   Roofs installed -> project map. Google rating -> the live review page.
   Both need to read as clickable without breaking the grid rhythm. */
.proof__cell--link{text-decoration:none;color:inherit;display:block;
  transition:background .15s ease}
.proof__cell--link:hover,.proof__cell--link:focus-visible{background:rgba(255,255,255,.06)}
.proof__cell--link .proof__n{transition:color .15s ease}
.proof__cell--link:hover .proof__n,.proof__cell--link:focus-visible .proof__n{color:var(--green)}
.proof__go{display:block;font-size:.66rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green);margin-top:.3rem;opacity:0;
  transform:translateY(-2px);transition:opacity .15s ease,transform .15s ease}
.proof__cell--link:hover .proof__go,.proof__cell--link:focus-visible .proof__go{opacity:1;transform:none}
.proof__cell--link:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
/* Touch devices never hover, so keep the cue visible there. */
@media (hover:none){.proof__go{opacity:1;transform:none}}

/* Hero eyebrow links */
.eyebrow--light a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.eyebrow--light a:hover{color:var(--green);border-bottom-color:var(--green)}

/* ---------- Gallery color filter ---------------------------------
   Buttons carry the real paint chip so the swatch is the label. */
.cfilt__bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .7rem}
.cfilt{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-size:.78rem;
  font-weight:500;color:var(--ink);background:var(--paper);cursor:pointer;
  border:1.5px solid var(--line);border-radius:2rem;padding:.42rem .85rem .42rem .5rem;
  transition:border-color .15s ease,background .15s ease}
.cfilt:hover{border-color:var(--ink)}
.cfilt.is-on{border-color:var(--ink);background:var(--ink);color:#fff}
.cfilt i{font-style:normal;font-size:.68rem;font-weight:700;color:var(--grey);
  background:var(--paper-2);border-radius:1rem;padding:.1rem .42rem;margin-left:.15rem}
.cfilt.is-on i{color:var(--ink);background:rgba(255,255,255,.85)}
.cfilt__sw{width:17px;height:17px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(20,23,21,.25);box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.cfilt.is-on .cfilt__sw{border-color:rgba(255,255,255,.5)}
.cfilt__sw--all{background:conic-gradient(#A66B36,#486F81,#31493A,#8F182B,#3E382D,#302D2F,#A66B36)}
.cfilt__sw--unk{background:repeating-linear-gradient(45deg,#DFE3DB 0 4px,#F6F8F3 4px 8px)}
.cfilt__note{font-size:.78rem;color:var(--grey);margin:0 0 1.5rem}
.gal [hidden]{display:none !important}
@media (max-width:560px){
  .cfilt{font-size:.72rem;padding:.36rem .7rem .36rem .42rem}
  .cfilt__sw{width:14px;height:14px}
}

/* ---------- Panel price table ------------------------------------
   Real numbers per panel. Card-stacks on phones so nothing squeezes. */
.ptab{width:100%;border-collapse:collapse;margin:1.4rem 0 .6rem;font-size:.9rem}
.ptab th{text-align:left;font-size:.66rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grey);padding:0 .8rem .55rem 0;
  border-bottom:2px solid var(--ink)}
.ptab td{padding:.85rem .8rem .85rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.ptab tr:last-child td{border-bottom:0}
.ptab .ptab__name{font-weight:600;color:var(--ink)}
.ptab .ptab__name a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--green)}
.ptab .ptab__name a:hover{color:var(--green-deep)}
.ptab .ptab__price{font-weight:700;color:var(--ink);white-space:nowrap}
.ptab .ptab__price small{display:block;font-size:.66rem;font-weight:500;color:var(--grey);
  letter-spacing:.02em;text-transform:none}
.ptab__note{font-size:.8rem;color:var(--grey);margin:.2rem 0 0}
@media (max-width:700px){
  .ptab,.ptab tbody,.ptab tr,.ptab td{display:block;width:100%}
  .ptab thead{display:none}
  .ptab tr{border:2px solid var(--ink);border-radius:var(--r);padding:1rem;margin-bottom:.9rem}
  .ptab td{border-bottom:0;padding:.2rem 0}
  .ptab .ptab__price{font-size:1.35rem;margin:.3rem 0 .5rem}
  .ptab .ptab__price small{display:inline;margin-left:.35rem}
}
.vs__col{border:2px solid var(--ink);border-radius:var(--r);padding:1.6rem 1.5rem 1.7rem;
  background:var(--paper-2);display:flex;flex-direction:column}
.vs__col--win{background:var(--green)}
.vs__col--win .label{color:var(--ink-2)}
.vs__n{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5.5vw,3.6rem);
  line-height:1;letter-spacing:-.035em;margin-top:.55rem}
.vs__u{font-size:.86rem;font-weight:600;color:var(--grey);margin-bottom:1.2rem;display:block}
.vs__col--win .vs__u{color:var(--ink-2)}
.vs__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(20,23,21,.14)}
.vs__list li{padding:.7rem 0 .7rem 1.5rem;border-bottom:1px solid rgba(20,23,21,.14);
  font-size:.93rem;position:relative;line-height:1.5}
.vs__list li:last-child{border-bottom:0}
.vs__list li::before{content:"";position:absolute;left:0;top:1.2rem;width:8px;height:8px;
  border-radius:50%;background:var(--ink);opacity:.35}
.vs__col--win .vs__list li::before{background:var(--ink);opacity:.6}

/* ---- how it works ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1.15rem;counter-reset:s}
.steps li{background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--r);
  padding:1.5rem 1.4rem 1.6rem;display:flex;flex-direction:column}
.steps__n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--green);border:2px solid var(--ink);font-weight:700;
  font-size:1rem;margin-bottom:.9rem;flex:0 0 auto}
.steps h3{margin:0 0 .5rem}
.steps p{font-size:.93rem;color:var(--grey);margin-bottom:.7rem}
.steps p:last-child{margin-bottom:0}
.steps__note{font-size:.72rem!important;font-weight:600;letter-spacing:.04em;
  color:#9C4221!important;background:#FCE9E2;border-radius:6px;padding:.5rem .65rem;margin-top:auto!important}

/* ---- spec list on dark ---- */
.spec--dark{border-color:rgba(255,255,255,.28)}
.spec--dark li{background:rgba(255,255,255,.05);border-bottom-color:rgba(255,255,255,.14);color:#fff}
.spec--dark li:nth-child(even){background:rgba(255,255,255,.09)}
.spec--dark b{color:rgba(255,255,255,.85)}

/* ---- color swatch grid ---- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:1rem}
.sw{display:flex;flex-direction:column;gap:.4rem}
.sw__chip{aspect-ratio:4/3;border:2px solid var(--ink);border-radius:10px;
  background:repeating-linear-gradient(45deg,#E8EBE4 0 8px,#DEE2D8 8px 16px);
  display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#8A9184}
.sw__n{font-size:.83rem;font-weight:600;line-height:1.3}
.sw__m{font-size:.68rem;color:var(--grey);font-variant-numeric:tabular-nums}
.brand img{height:52px;width:52px;flex:0 0 52px}

/* ---- financing strip ---- */
.finband{background:var(--ink);border-top:1px solid rgba(255,255,255,.08);padding:clamp(2.2rem,5vw,3.4rem) 0;position:relative}
.finband::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--green)}
.finband__in{display:flex;align-items:center;justify-content:space-between;gap:1.8rem;flex-wrap:wrap}
.finband__cta{display:flex;gap:.85rem;flex-wrap:wrap}
@media (max-width:760px){.finband__in{flex-direction:column;align-items:flex-start}.finband__cta{width:100%}.finband__cta .btn{flex:1;text-align:center}}

/* ---- project map (Leaflet) ---- */
.pmap{height:640px;max-height:78vh;border-radius:var(--r);border:2px solid var(--ink);
  overflow:hidden;box-shadow:0 8px 32px rgba(20,23,21,.08)}
.pmap__filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.2rem}
.pmap__chip{background:#fff;border:1.5px solid var(--line);border-radius:99px;
  padding:.5rem 1.05rem;font-family:var(--body);font-size:.83rem;font-weight:600;
  color:var(--ink-2);cursor:pointer;transition:all .18s ease}
.pmap__chip:hover{border-color:var(--green);color:var(--green-deep)}
.pmap__chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.pmap__note{margin-top:1rem;font-size:.82rem;color:var(--grey);text-align:center}
.pmap__marker{background:transparent!important;border:none!important}
.pmap__marker svg{width:30px;height:40px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
/* Popup styling */
.leaflet-popup-content-wrapper{border-radius:12px;padding:0;overflow:hidden;
  box-shadow:0 12px 40px rgba(20,23,21,.22)}
.leaflet-popup-content{margin:0;width:280px!important}
.pmap__pop{display:flex;flex-direction:column}
.pmap__pop-img{width:100%;height:150px;object-fit:cover;display:block;background:#F6F8F3}
.pmap__pop-body{padding:.9rem 1rem 1rem}
.pmap__pop-city{font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-deep);margin-bottom:.35rem}
.pmap__pop-prod{font-family:var(--display);font-size:1.05rem;font-weight:700;
  line-height:1.25;margin-bottom:.35rem}
.pmap__pop-prod a{color:var(--ink);text-decoration:none}
.pmap__pop-prod a:hover{color:var(--green-deep)}
.pmap__pop-meta{font-size:.78rem;color:var(--grey);margin-bottom:.55rem}
.pmap__pop-cap{font-size:.86rem;line-height:1.5;color:var(--ink-2);
  margin:0 0 .85rem}
.pmap__pop-btn{display:inline-block;background:var(--green);color:var(--ink)!important;
  font-weight:600;font-size:.82rem;text-decoration:none;padding:.6rem 1.05rem;
  border-radius:8px;text-align:center;width:100%;box-sizing:border-box;
  transition:background .18s ease}
.pmap__pop-btn:hover{background:var(--green-mid)}
/* Cluster styling to match brand */
.marker-cluster-small{background:rgba(139,191,85,.4)}
.marker-cluster-small div{background:rgba(139,191,85,.85);color:#fff;font-weight:700}
.marker-cluster-medium{background:rgba(92,138,46,.4)}
.marker-cluster-medium div{background:rgba(92,138,46,.9);color:#fff;font-weight:700}
.marker-cluster-large{background:rgba(20,23,21,.4)}
.marker-cluster-large div{background:rgba(20,23,21,.92);color:#fff;font-weight:700}

/* ---- Roofle RoofQuote PRO embed --------------------- */
#roof-quote-pro-embedded,#loan-calculator-embedded,.roofle-embed{min-height:640px;width:100%;display:block;margin-top:1.6rem;border-radius:var(--r);overflow:hidden}
@media (max-width:760px){#roof-quote-pro-embedded,#loan-calculator-embedded,.roofle-embed{min-height:560px}}

/* ---- Units explainer (native details, zero JS) ----- */
.units{margin:1.2rem 0 0;font-size:.9rem;color:var(--ink-2);max-width:62ch}
.units summary{cursor:pointer;font-weight:600;color:var(--green-deep);list-style:none;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem 0}
.units summary::-webkit-details-marker{display:none}
.units summary::after{content:"\203A";transform:rotate(90deg);transition:transform .18s ease;font-weight:400;font-size:1rem;line-height:1}
.units[open] summary::after{transform:rotate(-90deg)}
.units summary:hover{color:var(--ink)}
.units__body{margin-top:.5rem;padding:.85rem 1rem;background:var(--paper-2);border-left:3px solid var(--green);border-radius:8px;line-height:1.55}
.units__body b{color:var(--ink)}

/* ---- Gallery scroll carousel (before/after, projects) ---- */
.gallery-scroll{display:flex;gap:1.1rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:var(--gut);padding:.3rem .1rem 1.4rem;margin:0 calc(-1 * var(--gut));padding-inline:var(--gut);
  scrollbar-width:thin;scrollbar-color:var(--green) var(--paper-2)}
.gallery-scroll::-webkit-scrollbar{height:8px}
.gallery-scroll::-webkit-scrollbar-track{background:var(--paper-2);border-radius:4px}
.gallery-scroll::-webkit-scrollbar-thumb{background:var(--green);border-radius:4px}
/* ---- Recent installs tile grid (homepage) ---- */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.4rem}
.tile{display:block;text-decoration:none;color:inherit;background:var(--paper-2);border-radius:var(--r);overflow:hidden;box-shadow:0 3px 14px rgba(20,23,21,.08);transition:transform .18s ease,box-shadow .18s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(20,23,21,.14)}
.tile__img{aspect-ratio:4/3;overflow:hidden;background:#0d0f0d}
.tile__img img{width:100%;height:100%;object-fit:cover;display:block}
.tile__body{padding:.7rem .85rem .85rem}
.tile__body b{display:block;font-size:.95rem;color:var(--ink);margin-bottom:.15rem;line-height:1.2}
.tile__body span{display:block;font-size:.78rem;color:var(--grey);line-height:1.3}
@media (max-width:900px){.tile-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}}
@media (max-width:480px){.tile__body b{font-size:.88rem}.tile__body span{font-size:.72rem}}

.gcard{flex:0 0 68%;max-width:520px;scroll-snap-align:start;margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-2);box-shadow:0 4px 22px rgba(20,23,21,.08)}
.gcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media (max-width:520px){.gcard{flex:0 0 72%}.gcard img{aspect-ratio:4/3;max-height:52vh}}
.gcard figcaption{padding:.85rem 1.05rem 1rem;font-size:.92rem;color:var(--ink-2);line-height:1.4}
.gcard figcaption b{display:block;color:var(--ink);font-size:1rem;margin-bottom:.15rem}
.gcard figcaption span{color:var(--grey);font-size:.86rem}
@media (min-width:760px){.gcard{flex:0 0 46%}}
@media (min-width:1100px){.gcard{flex:0 0 32%}}

/* ---- Video card (about us shop, team) ---- */
.vcard{border-radius:var(--r);overflow:hidden;background:var(--ink);position:relative;aspect-ratio:16/9}
.vcard video{width:100%;height:100%;display:block;object-fit:cover}
.vcard--team{aspect-ratio:9/16;max-width:340px}

/* ---- About us team grid ---- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1.6rem}
.team-grid--single{max-width:520px;margin-left:auto;margin-right:auto;grid-template-columns:1fr}
.team-card{background:var(--paper-2);border-radius:var(--r);overflow:hidden}
.team-card .vcard{aspect-ratio:9/16;border-radius:0}
.team-card__body{padding:1rem 1.1rem 1.2rem}
.team-card__body h4{margin:0 0 .3rem;font-size:1.08rem}
.team-card__body p{margin:0;font-size:.9rem;color:var(--grey)}


/* ---- Page figures for products and towns ---- */
.p-fig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 4px 22px rgba(20,23,21,.08);background:var(--paper-2)}
.p-fig img,.p-fig video{width:100%;height:auto;display:block}
.p-fig--4x3 img{aspect-ratio:4/3;object-fit:cover}
.p-fig--video video{aspect-ratio:16/9;object-fit:cover;background:var(--ink)}
.p-fig figcaption{padding:.85rem 1.05rem 1rem;font-size:.9rem;color:var(--grey);line-height:1.5;background:var(--paper-2)}