/* Snowshed Metal Roofing — architectural, spec-sheet, charcoal and barn red.
   Deliberately unlike the rest of the portfolio: condensed uppercase display type,
   serif body, hairline rules, and tables styled like specification sheets. */
:root{
  --char:#2E3134;
  --char-2:#23262A;
  --steel:#8A9BA8;
  --steel-dk:#5B6B77;
  --steel-lt:#EDF1F4;
  --red:#B33A3A;
  --red-dk:#8E2C2C;
  --red-bg:#FBEFEF;
  --snow:#FAFBFC;
  --ink:#2E3134;
  --muted:#6C7780;
  --line:#DCE2E7;
  --amber:#96661A;
  --amber-bg:#FCF4E6;
  --green:#2F6B3A;
  --radius:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--snow);color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;font-size:17.5px;line-height:1.72;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-dk);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Oswald",Impact,sans-serif;color:var(--char);
  text-transform:uppercase;letter-spacing:.012em;margin:0 0 .5em;
  line-height:1.12;font-weight:600}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.5rem,3.1vw,2.2rem);margin-top:0}
h3{font-size:1.1rem;font-weight:600;letter-spacing:.02em}
h1 em,h2 em{font-style:normal;color:var(--red)}
p{margin:0 0 1.05rem}
strong{font-weight:600;color:var(--char)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---- header ---- */
header{position:sticky;top:0;z-index:60;background:rgba(250,251,252,.97);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.stripe{height:3px;background:linear-gradient(90deg,var(--char) 0 58%,var(--red) 58% 100%)}
.nav{display:flex;align-items:center;gap:1rem;padding:.65rem 0}
.logo{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.logo .mark{width:34px;height:34px;flex:0 0 34px}
.logo .lt{font-family:"Oswald",sans-serif;font-weight:700;font-size:1.3rem;
  color:var(--char);line-height:1;letter-spacing:.03em;text-transform:uppercase}
.logo .lt small{display:block;font-family:"Oswald",sans-serif;font-size:.6rem;
  font-weight:500;letter-spacing:.24em;color:var(--red);margin-top:4px}
.nav ul{list-style:none;display:flex;gap:.05rem;margin:0 0 0 auto;padding:0;flex-wrap:wrap}
.nav ul a{font-family:"Oswald",sans-serif;font-size:.83rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--char);
  padding:.45rem .6rem;display:block}
.nav ul a:hover{color:var(--red);text-decoration:none;background:var(--steel-lt)}
.call-btn{font-family:"Oswald",sans-serif;font-weight:600;font-size:.84rem;
  letter-spacing:.06em;text-transform:uppercase;background:var(--red);
  color:#fff!important;padding:.6rem 1rem;border-radius:var(--radius);white-space:nowrap}
.call-btn:hover{background:var(--red-dk);text-decoration:none}
.navtoggle{display:none}
.burger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:.4rem;margin-left:auto}
.burger span{width:22px;height:2px;background:var(--char)}

/* ---- hero: cinematic, dark, with a roofline silhouette ---- */
.hero{position:relative;background:var(--char);color:#D3DAE0;
  padding:4rem 0 5.4rem;overflow:hidden}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
  background:var(--snow);
  clip-path:polygon(0 100%,0 62%,14% 20%,28% 62%,42% 12%,58% 62%,72% 26%,86% 62%,100% 34%,100% 100%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;margin-bottom:.55rem}
.hero h1 em{color:var(--steel)}
.hero .lede{font-size:1.17rem;color:#BAC5CE;max-width:62ch;margin-bottom:1.5rem}
.hero .kicker{font-family:"Oswald",sans-serif;font-size:.74rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel);
  display:block;margin-bottom:.9rem}
.hero a:not(.btn):not(.call-btn){color:var(--steel)}
.hero.split .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2.6rem;align-items:center}
.crumb{font-family:"Oswald",sans-serif;font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:#8896A2;margin-bottom:.9rem;font-weight:400}
.crumb a{color:#8896A2}
.crumb a:hover{color:var(--steel)}
.hero .srcnote{color:#92A1AC;border-top-color:rgba(255,255,255,.2)}
.hero .srcnote b{color:#BAC5CE}

/* ---- buttons ---- */
.cta-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}
.btn{font-family:"Oswald",sans-serif;display:inline-block;background:var(--red);
  color:#fff!important;font-weight:600;font-size:.92rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.82rem 1.5rem;border-radius:var(--radius);
  border:1.5px solid var(--red);cursor:pointer;text-align:center}
.btn:hover{background:var(--red-dk);border-color:var(--red-dk);text-decoration:none}
.btn.ghost{background:transparent;color:var(--char)!important;border-color:var(--steel-dk)}
.btn.ghost:hover{background:var(--steel-lt);border-color:var(--char)}
.hero .btn.ghost,.dark .btn.ghost{color:#fff!important;border-color:rgba(255,255,255,.45)}
.hero .btn.ghost:hover,.dark .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ---- sections ---- */
section{padding:3.2rem 0}
section.tight{padding:1.9rem 0}
.tag{font-family:"Oswald",sans-serif;display:inline-block;font-size:.7rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);
  border-left:3px solid var(--red);padding:.1rem 0 .1rem .6rem;margin-bottom:.9rem}
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark{background:var(--char);color:#BAC5CE}
.dark h2,.dark h3{color:#fff}
.dark p{color:#B2BEC7}
.dark .tag{color:var(--steel);border-left-color:var(--steel)}
.dark a:not(.btn):not(.call-btn){color:var(--steel)}
/* panel-texture divider — the ribs of a metal roof */
.ribs{height:22px;background:repeating-linear-gradient(90deg,
  var(--steel-lt) 0 10px, #fff 10px 11px, var(--steel-lt) 11px 26px, var(--steel-dk) 26px 27px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- problem/solution rows ---- */
.ps{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:center;margin:2.2rem 0}
.ps img{border-radius:var(--radius);border:1px solid var(--line)}
.ps.flip .ps-media{order:2}
.ps-label{font-family:"Oswald",sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;display:inline-block;
  padding:.25rem .6rem;border-radius:var(--radius);margin-bottom:.7rem}
.ps-label.problem{background:var(--red-bg);color:var(--red-dk)}
.ps-label.solution{background:#E9F1EA;color:var(--green)}

/* ---- cards ---- */
.grid{display:grid;gap:1.1rem;margin-top:1.5rem}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--steel-dk);
  border-radius:0 0 var(--radius) var(--radius);padding:1.35rem 1.4rem}
.card h3{margin-bottom:.45rem}
.card h3 a{color:var(--char)}
.card p{font-size:.955rem;margin-bottom:0}
.card.tip{background:var(--amber-bg);border-color:#EADDC2;border-top-color:var(--amber)}
.card.tip h3{color:var(--amber);font-size:.95rem}
.callout{background:var(--steel-lt);border-left:4px solid var(--steel-dk);
  padding:1.05rem 1.25rem;margin:1.5rem 0}
.callout.warn{background:var(--red-bg);border-left-color:var(--red)}
.callout.warn strong{color:var(--red-dk)}
.pull{font-family:"Oswald",sans-serif;font-size:1.22rem;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--char);
  border-left:4px solid var(--red);padding-left:1.1rem;margin:1.8rem 0;line-height:1.45}

/* ---- the 50-year timeline ---- */
.xsection{background:#fff;border:1px solid var(--line);padding:1.3rem;margin:1.8rem 0}
.xsection img{width:100%}
.xsection-key{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:.55rem 1.4rem}
.xsection-key li{font-size:.885rem;padding-bottom:.5rem;border-bottom:1px dotted var(--line)}
.xsection-key li:last-child{border-bottom:none}
.xsection-key b{font-family:"Oswald",sans-serif;color:var(--red-dk);margin-right:.35rem}
.xsection-key span{color:var(--muted)}

/* ---- lists ---- */
ul.checks{list-style:none;padding:0;margin:1.2rem 0}
ul.checks li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;font-size:.985rem}
ul.checks li:before{content:"";position:absolute;left:0;top:.68em;width:10px;height:2px;
  background:var(--red)}
.dark ul.checks li{color:#B2BEC7}
.dark ul.checks li:before{background:var(--steel)}
ul.towns{list-style:none;padding:0;margin:1rem 0;display:flex;flex-wrap:wrap;gap:.4rem}
ul.towns li a{font-family:"Oswald",sans-serif;display:block;font-size:.82rem;
  font-weight:500;letter-spacing:.04em;text-transform:uppercase;background:#fff;
  border:1px solid var(--line);padding:.42rem .8rem;color:var(--char)}
ul.towns li a:hover{border-color:var(--red);color:var(--red);
  background:var(--red-bg);text-decoration:none}
.steps{list-style:none;counter-reset:s;padding:0;margin:1.6rem 0}
.steps li{counter-increment:s;position:relative;padding-left:3.1rem;margin-bottom:1.5rem}
.steps li:before{content:counter(s);position:absolute;left:0;top:-3px;
  font-family:"Oswald",sans-serif;width:2.15rem;height:2.15rem;
  background:var(--char);color:#fff;font-weight:600;font-size:1rem;
  display:flex;align-items:center;justify-content:center}
.steps li h3{margin-bottom:.3rem}
.dark .steps li:before{background:var(--steel);color:var(--char)}

/* ---- stats ---- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.8rem 0}
.stat{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);
  padding:1rem 1.1rem}
.stat b{font-family:"Oswald",sans-serif;display:block;font-size:1.42rem;font-weight:700;
  color:var(--char);line-height:1.15;margin-bottom:.25rem}
.stat span{font-family:"Oswald",sans-serif;font-size:.72rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.11em;font-weight:400}

/* ---- details / FAQ ---- */
details{border-bottom:1px solid var(--line);padding:.95rem 0}
details summary{font-family:"Oswald",sans-serif;font-weight:500;font-size:1.02rem;
  letter-spacing:.02em;cursor:pointer;list-style:none;position:relative;
  padding-right:2rem;color:var(--char);text-transform:none}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+";position:absolute;right:.2rem;top:-.2rem;
  font-size:1.4rem;color:var(--red);font-weight:400}
details[open] summary:after{content:"\2013"}
details p{margin:.75rem 0 .1rem;font-size:.975rem}

/* ---- spec-sheet tables ---- */
.table-scroll{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px;background:#fff}
th,td{padding:.7rem .95rem;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-family:"Oswald",sans-serif;font-weight:500;color:#fff;background:var(--char);
  font-size:.74rem;letter-spacing:.11em;text-transform:uppercase}
tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:#FBFCFD}

/* ---- imagery ---- */
.feature-photo{margin:2rem 0}
.feature-photo img{border-radius:var(--radius);border:1px solid var(--line);width:100%}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.8rem 0}
.photo-pair img{border-radius:var(--radius);border:1px solid var(--line)}
figure.shot-fig{margin:1.8rem 0}
figure.shot-fig figcaption{font-size:.83rem;color:var(--muted);margin-top:.5rem}
.hero figure.shot-fig figcaption{color:#92A1AC}

/* ---- source citations ---- */
.srcnote{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);
  padding-top:.7rem;margin-top:1.4rem}
.srcnote b{font-family:"Oswald",sans-serif;color:var(--char);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;display:block;margin-bottom:.3rem;font-weight:500}

/* ---- tool widgets ---- */
.qc{background:#fff;border:1px solid var(--line);border-top:3px solid var(--char);
  padding:1.5rem;margin:1.6rem 0}
.qc h3{margin-bottom:.85rem}
.qc .opt{font-family:"Oswald",sans-serif;display:block;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--line);padding:.8rem 1rem;margin-bottom:.5rem;
  cursor:pointer;font-size:.93rem;font-weight:400;color:var(--char)}
.qc .opt:hover{border-color:var(--red);background:var(--red-bg)}
.qc-result{background:var(--steel-lt);border:1px solid #D3DDE4;
  padding:1.35rem 1.5rem;margin-top:1.2rem}
.qc-result.stop{background:var(--amber-bg);border-color:#EADDC2}
.qc-result h4{font-family:"Oswald",sans-serif;font-size:1.14rem;margin:0 0 .55rem;
  color:var(--char);font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.qc-result .card{background:#fff}
.urgency{font-family:"Oswald",sans-serif;display:inline-block;font-size:.72rem;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:.26rem .6rem;
  margin-bottom:.7rem}
.urgency.low{background:#E9F1EA;color:var(--green)}
.urgency.soon{background:var(--amber-bg);color:var(--amber)}
.urgency.now{background:var(--red-bg);color:var(--red-dk)}
.est{font-family:"Oswald",sans-serif;font-size:2rem;font-weight:700;
  color:var(--char);margin:.3rem 0 .2rem;letter-spacing:.01em}
.tiles{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 1.1rem}
.tile{font-family:"Oswald",sans-serif;background:#fff;border:1.5px solid var(--line);
  padding:.55rem .85rem;cursor:pointer;font-size:.86rem;font-weight:400;
  color:var(--char);text-align:left;letter-spacing:.02em}
.tile small{display:block;font-family:"Source Serif 4",serif;font-size:.74rem;
  color:var(--muted);letter-spacing:0}
.tile:hover{border-color:var(--red)}
.tile.on{border-color:var(--char);background:var(--char);color:#fff}
.tile.on small{color:#AEBAC3}
/* the 50-year bar chart in the lifetime tool */
.chart{margin:1.4rem 0}
.chart-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.chart-row b{font-family:"Oswald",sans-serif;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;width:78px;flex:0 0 78px;color:var(--muted);font-weight:400}
.chart-bar{flex:1;height:26px;background:var(--steel-lt);position:relative}
.chart-bar i{display:block;height:100%}
.chart-bar i.asphalt{background:var(--red)}
.chart-bar i.metal{background:var(--char)}
.chart-row span{font-family:"Oswald",sans-serif;font-size:.83rem;width:86px;
  flex:0 0 86px;text-align:right;color:var(--char);font-weight:500}

/* ---- forms ---- */
form{margin:0}
form label{font-family:"Oswald",sans-serif;display:block;font-size:.76rem;
  font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.3rem;color:#fff}
section:not(.dark) form label{color:var(--char)}
input,select,textarea{width:100%;padding:.68rem .8rem;border-radius:var(--radius);
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  font-family:"Source Serif 4",serif;font-size:.95rem;margin-bottom:.9rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(179,58,58,.14)}
form .btn{width:100%;font-size:1rem;padding:.9rem 1.4rem}
.form-trust{margin-top:1.3rem}
.assurances{list-style:none;padding:0;margin:0}
.assurances li{position:relative;padding-left:1.5rem;margin-bottom:.46rem;
  font-size:.91rem;color:#B2BEC7}
.assurances li:before{content:"";position:absolute;left:0;top:.68em;width:10px;height:2px;
  background:var(--steel)}
section:not(.dark) .assurances li{color:var(--ink)}
section:not(.dark) .assurances li:before{background:var(--red)}
.sla{font-size:.86rem;color:#B2BEC7;margin-top:.9rem}
section:not(.dark) .sla{color:var(--muted)}
.form-consent{font-size:.78rem;color:#8896A2;margin-top:.8rem;line-height:1.5}
section:not(.dark) .form-consent{color:var(--muted)}

/* ---- proof ---- */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.4rem}
.proof-card{background:#fff;border:1px solid var(--line);padding:1.2rem 1.3rem}
.proof-stars{color:var(--amber);font-size:.92rem;letter-spacing:.11em;margin-bottom:.45rem}
.proof-card .quote{font-size:.94rem;margin-bottom:.6rem}
.proof-card .where{font-family:"Oswald",sans-serif;font-size:.77rem;
  color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* ---- footer ---- */
footer{background:var(--char-2);color:#98A5AE;padding:3rem 0 1.6rem;font-size:.91rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.2rem}
footer h3{font-family:"Oswald",sans-serif;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;margin-bottom:.85rem;font-weight:500}
footer p{font-size:.88rem;color:#7D8B95;line-height:1.62}
footer a{color:#98A5AE;display:block;padding:.16rem 0;font-size:.88rem}
footer a:hover{color:var(--steel)}
.fine{border-top:1px solid rgba(255,255,255,.1);padding-top:1.3rem;font-size:.79rem;
  color:#66737D;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.sticky-cta{display:none}

/* ---- responsive ---- */
@media(max-width:900px){
  .hero.split .wrap{grid-template-columns:1fr}
  .grid.c3,.proof-grid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .ps{grid-template-columns:1fr}
  .ps.flip .ps-media{order:0}
}
@media(max-width:720px){
  .burger{display:flex}
  .nav ul{display:none;width:100%;order:3;flex-direction:column;gap:0;
    border-top:1px solid var(--line);padding-top:.5rem;margin-top:.5rem}
  .navtoggle:checked ~ ul{display:flex}
  .nav ul a{padding:.6rem .4rem}
  .grid.c2,.grid.c3,.proof-grid,.photo-pair{grid-template-columns:1fr}
  .xsection-key{grid-template-columns:1fr}
  .hero{padding:2.8rem 0 4rem}
  .hero:after{height:44px}
  section{padding:2.4rem 0}
  .chart-row b{width:58px;flex:0 0 58px;font-size:.7rem}
  .chart-row span{width:74px;flex:0 0 74px;font-size:.78rem}
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--red);padding:.7rem 1rem;text-align:center}
  .sticky-cta a{font-family:"Oswald",sans-serif;color:#fff;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;font-size:.92rem;display:block}
  footer{padding-bottom:4.6rem}
}
@media(max-width:520px){
  .stat-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}