/*
Theme Name: Cascade Roof & Gutter
Description: Standalone theme for cascaderoofandgutter.com. Design system and page templates in one place; no parent theme.
Version: 2.0
Author: Cascade Roof & Gutter
*/

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.68 var(--serif);-webkit-font-smoothing:antialiased}
a{color:var(--forest-2)}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}
.wide{max-width:1000px;margin:0 auto;padding:0 24px}
.top{background:var(--forest);color:#eef2ee}
.mark{font:600 19px/1 var(--sans);letter-spacing:-.02em;color:#fff;text-decoration:none;white-space:nowrap}
.mark span{display:block;font:400 10.5px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#a9c4b3;margin-top:4px}
nav{display:flex;gap:20px;font:500 13.5px/1 var(--sans);margin-left:auto;flex-wrap:wrap}
nav a{color:#cfdcd4;text-decoration:none}
nav a:hover{color:#fff}
.tel{font:600 15px/1 var(--sans);color:#fff;text-decoration:none;background:rgba(255,255,255,.13);padding:9px 14px;border-radius:6px;white-space:nowrap}
.disc{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.disc b{color:var(--ink-2);font-weight:600}
.hero{position:relative;background:#243b31;overflow:hidden}
p{margin:0 0 18px}
.dd{position:relative}
.dd summary{list-style:none;cursor:pointer;color:#cfdcd4;font:500 13.5px/1 var(--sans);
 padding:0;display:inline-flex;align-items:center;gap:5px}
.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:"";width:0;height:0;border-left:4px solid transparent;
 border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.75}
.dd[open] summary,.dd summary:hover{color:#fff}
.ddm{position:absolute;top:calc(100% + 12px);left:-14px;z-index:60;background:#fff;
 border:1px solid var(--rule);border-radius:10px;padding:10px 0;min-width:210px;
 box-shadow:0 10px 30px rgba(0,0,0,.18);display:flex;flex-direction:column}
.ddm.wide{min-width:268px}
.ddm a{display:block;padding:8px 18px;font:500 14px/1.4 var(--sans);color:var(--ink);text-decoration:none}
.ddm a:hover{background:var(--paper-2);color:var(--forest-2)}
.ddh{display:block;padding:9px 18px 4px;font:600 10.5px/1 var(--sans);letter-spacing:.13em;
 text-transform:uppercase;color:var(--ink-3)}
.ddh:first-child{padding-top:2px}
.ddall{display:block;border-top:1px solid var(--rule);margin-top:8px;padding-top:6px}
.ddall a{font-weight:600;color:var(--forest-2)}
@media(max-width:730px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13.5px}
 th,td{padding:9px 8px}}
.ddm.cities{display:grid;grid-template-columns:1fr 1fr;min-width:330px;column-gap:2px}
.note{border-left:3px solid var(--amber);background:#fdf8ec;padding:15px 18px;margin:26px 0;font:400 15.5px/1.6 var(--sans)}
table{width:100%;border-collapse:collapse;margin:22px 0;font:400 14.5px/1.5 var(--sans)}
caption{text-align:left;font:600 12px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-bottom:9px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:nth-child(odd){background:var(--card)}
@media(max-width:730px){.cal{padding:18px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .grid{grid-template-columns:74px repeat(12,minmax(18px,1fr));min-width:328px}}
.b1s{font:400 14px/1.4 var(--sans);color:#a9c4b3}
.answer{background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--forest);border-radius:10px;padding:22px 24px;margin:0 0 30px}
.answer p{font:400 17px/1.65 var(--sans);color:var(--ink-2);margin:0 0 12px}
.answer p:last-child{margin:0}
.answer b{color:var(--ink)}
.push{border-left:3px solid var(--forest);background:#eef3ef;padding:16px 18px;margin:28px 0;font:400 15.5px/1.6 var(--sans)}
.push b{color:var(--forest)}
.incl{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:22px 24px;margin:28px 0}
.incl .hd{font:600 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.incl li{font:400 15.5px/1.7 var(--sans);color:var(--ink-2);margin-bottom:9px;list-style:none;padding-left:26px;position:relative}
.incl li:last-child{margin:0}
.incl li:before{content:"";position:absolute;left:0;top:8px;width:13px;height:8px;border-left:2.5px solid var(--forest-2);border-bottom:2.5px solid var(--forest-2);transform:rotate(-45deg)}
.incl li b{color:var(--ink)}
.incl ul{margin:0;padding:0}
.cal .lbl{font:600 11.5px/1.3 var(--sans);color:var(--ink-2);display:flex;align-items:center}
.cal .mo{text-align:center;color:var(--ink-3);padding-bottom:5px}
.cell.n1,i.n1{background:#dfe6d6}
.cell.n2,i.n2{background:#b9c99f}
.cell.n3,i.n3{background:#8fa86a}
.cell.n4,i.n4{background:#5f7c3f}
.cell.r1,i.r1{background:#d8e3ea}
.cell.r2,i.r2{background:#a8c3d6}
.cell.r3,i.r3{background:#7aa3c2}
.cell.r4,i.r4{background:#4a7fa8}
.calkey{font:400 12px/1.5 var(--sans);color:var(--ink-3);display:flex;gap:16px;flex-wrap:wrap}
.calkey span{display:inline-flex;align-items:center;gap:6px}
.calkey i{width:13px;height:13px;border-radius:3px}
.crumb{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.crumb .wrap{max-width:1080px;padding:10px 24px;font:400 12.5px/1.5 var(--sans);color:var(--ink-3)}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--forest-2)}
.crumb b{color:var(--ink-2);font-weight:600}
.locfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 8px;width:min(1000px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
.lf{background:var(--card);border:1px solid var(--rule);border-radius:11px;padding:17px 17px;display:flex;flex-direction:column}
.lf b{display:block;font:400 29px/1 var(--serif);color:var(--forest);letter-spacing:-.02em;margin-bottom:9px}
.lf p{font:400 14px/1.6 var(--sans);color:var(--ink-2);margin:0 0 8px}
.lf p b{font:600 14px/1.6 var(--sans);color:var(--ink);display:inline}
.lf cite{font:400 11px/1.5 var(--sans);font-style:normal;color:var(--ink-3);margin-top:auto}
.cell.s1,i.s1{background:#f2ecdc}
.cell.s2,i.s2{background:#e2d3ad}
.cell.s3,i.s3{background:#c9b276}
.cell.s4,i.s4{background:#a98c3f}
.hoods{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.hoods span{background:var(--card);border:1px solid var(--rule);border-radius:20px;
 padding:8px 15px;font:500 14px/1.3 var(--sans);color:var(--ink-2)}
@media(max-width:620px){.locfacts{grid-template-columns:1fr;gap:14px;width:auto;margin-left:0;transform:none}}
.chart{width:min(1000px,calc(100vw - 48px));margin:26px 50% 6px;transform:translateX(-50%);
 background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:22px 24px 18px}
.chart .ct{font:600 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.chart .cs{font:400 14.5px/1.6 var(--sans);color:var(--ink-2);margin:0 0 20px;max-width:70ch}
.bar{position:relative;background:#2c6b51;border-radius:4px 4px 0 0;min-height:2px;cursor:default}
.bar:hover{background:#1f4d3a}
.bar .tip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
 background:var(--ink);color:#fff;font:500 12px/1.35 var(--sans);padding:7px 10px;border-radius:6px;
 white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.bar:hover .tip{opacity:1}
.bar .dl{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
 font:600 12px/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.divider{position:absolute;top:-6px;bottom:0;width:0;border-left:2px dashed #b9b8ae}
.dlabel{font:600 11px/1.4 var(--sans);color:var(--ink-3);position:absolute;top:-22px;transform:translateX(-50%);white-space:nowrap}
.xax span{text-align:center}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0 6px;
 width:min(1000px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
.svc a{background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden;
 text-decoration:none;color:inherit;display:block;transition:transform .15s,box-shadow .15s}
.svc a:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.07)}
.svc .im{height:150px;background-size:cover;background-position:center}
.svc .tx{padding:20px 22px 24px}
.svc .k{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--moss-ink);margin-bottom:9px}
.svc h3{font:600 21px/1.3 var(--serif);margin:0 0 9px;color:var(--ink)}
.svc p{font:400 14.5px/1.6 var(--sans);color:var(--ink-2);margin:0 0 12px}
.svc .go{font:600 14px/1 var(--sans);color:var(--forest-2)}
.yr{width:min(1000px,calc(100vw - 48px));margin:26px 50% 8px;transform:translateX(-50%);
 background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.yr .row{display:grid;grid-template-columns:170px 1fr 210px;gap:0;border-top:1px solid var(--rule)}
.yr .row:first-child{border-top:0}
.yr .row>div{padding:16px 20px}
.yr .mo{font:600 14px/1.4 var(--sans);color:var(--ink);background:var(--paper-2)}
.yr .mo small{display:block;font:400 11.5px/1.5 var(--sans);color:var(--ink-3);margin-top:3px}
.yr .wh{font:400 14.5px/1.62 var(--sans);color:var(--ink-2)}
.yr .do{font:600 13.5px/1.5 var(--sans);color:var(--forest-2);border-left:1px solid var(--rule)}
.yr .do.q{color:var(--ink-3);font-weight:400}
.glist{margin:20px 0 6px;padding:0;list-style:none}
.glist li{border-top:1px solid var(--rule);padding:14px 0}
.glist a{font:600 16.5px/1.4 var(--serif);color:var(--ink);text-decoration:none}
.glist a:hover{color:var(--forest-2)}
.glist span{display:block;font:400 14px/1.6 var(--sans);color:var(--ink-2);margin-top:4px}

/* --- Quote CTA, added 24 Aug 2026 ---------------------------------------- */
/* Header: the quote button sits beside the tracked number. */
.top .hq{font:600 15px/1 var(--sans);color:var(--forest);text-decoration:none;background:#fff;
 padding:9px 14px;border-radius:6px;white-space:nowrap}
.top .hq:hover{background:var(--paper-2)}
/* Hero: secondary button beside the white call button. */
.b2{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);
 font:600 16px/1 var(--sans);padding:14px 22px;border-radius:7px;text-decoration:none;white-space:nowrap}
.b2:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* Inline CTA block: same pairing on the forest panel. */
.cta a.c2{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);margin-left:10px}
.cta a.c2:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media(max-width:520px){
  .cta a.c2{margin-left:0;margin-top:10px}
  .cta a{display:block;text-align:center}
  .b1,.b2{flex:1 1 auto;text-align:center}
}

/* --- Mobile layout fixes, 24 Aug 2026 (v2, specificity-raised) ------------
   style.css loads BEFORE assets/css/<slug>.css and every per-page sheet
   re-declares .hero .ph and .hero .cap, so at equal specificity the per-page
   rule won and v1 of this fix did nothing on a real page. The body prefix
   adds one element selector and lifts these above the per-page declarations.
   Same collision class as the 23 Aug calendar and chart bugs.
-------------------------------------------------------------------------- */
@media(max-width:820px){
  body .top .wrap{gap:8px 10px;padding:9px 15px}
  body .mark{flex:1 1 100%;font-size:17px;line-height:1.16}
  body .mark span{font-size:9.5px;letter-spacing:.11em;margin-top:1px}
  body .top .tel,body .top .hq{flex:1 1 auto;text-align:center;padding:9px 10px;font-size:14px}
  body .top nav{flex:1 1 100%;margin-left:0;gap:18px;font-size:14px;align-items:flex-start}
  body .top nav .dd{width:auto;min-width:0;flex:0 0 auto}
  body .top nav .dd .ddm{min-width:0;width:auto}
  body .top nav .dd[open]{flex:1 1 100%}
  body .crumb .wrap{padding:7px 15px;font-size:12px}
}
@media(max-width:700px){
  body .hero{min-height:300px}
  body .hero .ph{position:absolute;top:0;left:0;right:0;bottom:0;height:auto}
  body .hero .cap{position:relative;padding:64px 0 24px}
  body .hero h1{font-size:29px;margin-bottom:10px}
  body .hero .cap p{font-size:15.5px;line-height:1.5}
  body .hero .btns{gap:9px}
}
@media(max-width:430px){
  body .mark span{display:none}
  body .hero .cap{padding:54px 0 20px}
  body .hero h1{font-size:27px}
}
footer .flink{color:inherit;text-decoration:underline;text-underline-offset:2px;opacity:.85}
footer .flink:hover{opacity:1}

/* --- Nearby / by-city link blocks, 25 Aug 2026 -----------------------------
   Added with the internal-link pass: 34 of 45 pages had a single in-body
   inbound link and the 24 city service pages were terminal nodes.
   body-prefixed because style.css loads BEFORE assets/css/<slug>.css.
   .citygrid already exists in home.css with a different layout - hence .bycity.
-------------------------------------------------------------------------- */
body .nearby{margin:36px 0 0;padding-top:18px;border-top:1px solid var(--rule)}
body .nearby h3{font:600 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
 color:var(--ink-3);margin:0 0 8px}
body .nearby p{margin:0 0 12px;font:400 14px/1.6 var(--sans);color:var(--ink-2);max-width:64ch}
body .nearby ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
body .nearby.bycity ul{grid-template-columns:repeat(4,1fr)}
body .nearby li{margin:0}
body .nearby a{display:block;background:var(--card);border:1px solid var(--rule);border-radius:8px;
 padding:11px 13px;text-decoration:none;font:600 14px/1.35 var(--sans);color:var(--ink);
 transition:border-color .15s,background .15s}
body .nearby a:hover{border-color:var(--forest-2);background:var(--paper-2)}
@media(max-width:820px){body .nearby ul,body .nearby.bycity ul{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){body .nearby ul,body .nearby.bycity ul{grid-template-columns:1fr}}