*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:12px;z-index:50;background:#fff;color:#000;padding:8px 14px;border-radius:6px}
.site-nav a,.btn,.kicker,.crumbs,.updated,.card .more,.related h2,.related a,.footer-nav a,.footer-brand,.brand-tag{font-family:var(--font-ui,var(--font-body))}

/* Header */
.site-header{background:var(--header-bg);color:var(--header-ink);border-bottom:1px solid var(--header-line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand:hover{color:inherit}
.brand svg{width:42px;height:42px;flex:none}
.brand-name{display:block;font-family:var(--font-head);font-weight:var(--brand-weight,800);font-size:1.3rem;line-height:1.15;letter-spacing:var(--brand-tracking,0)}
.brand-tag{display:block;font-size:.82rem;line-height:1.3;opacity:.78}
.site-nav ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.site-nav a{display:block;padding:8px 12px;border-radius:7px;color:inherit;font-weight:600;font-size:.95rem;line-height:1.3;text-decoration:none;white-space:nowrap}
.site-nav a:hover{background:var(--nav-hover);color:inherit}
.site-nav a[aria-current]{background:var(--nav-active);color:var(--nav-active-ink)}
.logo-bg{fill:var(--logo-bg)}
.logo-fg{fill:var(--logo-fg)}
.logo-line{fill:none;stroke:var(--logo-fg);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}

/* Page heading band */
.page-head{background:var(--head-bg);color:var(--head-ink);padding:44px 0 40px}
.page-head h1{font-family:var(--font-head);font-weight:var(--h1-weight,800);font-size:clamp(1.85rem,4.2vw,2.75rem);line-height:1.15;margin:.3em 0 .35em;max-width:22em;text-wrap:balance}
.page-head .lede{font-size:1.18rem;line-height:1.6;max-width:44em;margin:0;opacity:.94}
.page-head .lede a{color:inherit}
.crumbs{font-size:.9rem;margin:0;opacity:.85}
.crumbs a{color:inherit}
.updated{font-size:.86rem;margin:16px 0 0;opacity:.75}
.home-head{padding:64px 0 56px}
.home-head .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center}
.kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--kicker-bg);color:var(--kicker-ink)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-art{width:100%;max-width:440px;justify-self:end}
.btn{display:inline-block;padding:12px 22px;border-radius:9px;border:2px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700;line-height:1.3;text-decoration:none}
.btn:hover{filter:brightness(1.07);color:var(--accent-ink)}

/* Main content */
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-top:44px;padding-bottom:64px}
.home-main{padding-top:44px;padding-bottom:56px}
.prose{min-width:0;max-width:720px}
.prose-wide{max-width:none}
.prose-wide>p,.prose-wide>h2,.prose-wide>h3,.prose-wide>ul,.prose-wide>ol,.prose-wide>.callout{max-width:760px}
.prose>:first-child{margin-top:0}
.prose h2{font-family:var(--font-head);font-weight:var(--h2-weight,700);color:var(--heading);font-size:1.6rem;line-height:1.25;margin:2.1em 0 .55em}
.prose h3{font-family:var(--font-head);font-weight:var(--h2-weight,700);color:var(--heading);font-size:1.22rem;line-height:1.3;margin:1.7em 0 .45em}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.35em}
.prose li{margin:0 0 .55em}
.prose li::marker{color:var(--accent-dark,var(--accent))}
.prose strong{color:var(--heading)}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--line-strong);font-style:italic;color:var(--muted)}
.callout{margin:1.8em 0;padding:18px 22px;background:var(--callout-bg);border-left:5px solid var(--accent);border-radius:0 10px 10px 0}
.callout p{margin:0 0 .7em}
.callout>:last-child{margin-bottom:0}
.fig{margin:2em 0}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--card-bg)}
.fig figcaption{margin-top:.65em;font-size:.92rem;line-height:1.5;color:var(--muted)}
.prose-wide>.fig{max-width:760px}
.table-wrap{margin:1.6em 0;overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--card-bg)}
.prose table{width:100%;min-width:560px;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.prose th,.prose td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose th{background:var(--table-head);color:var(--heading);font-weight:700}
.prose tr:last-child td{border-bottom:0}

/* Sidebar */
.sidebar{min-width:0}
.sidebar-inner{position:sticky;top:24px;display:flex;flex-direction:column;gap:22px}
.cta-box{background:var(--cta-bg);color:var(--cta-ink);border-radius:14px;padding:24px}
.cta-box h2{font-family:var(--font-head);font-size:1.3rem;line-height:1.25;margin:0 0 .5em}
.cta-box p{margin:0 0 1.1em;font-size:.98rem;line-height:1.6;opacity:.95}
.related{background:var(--card-bg);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.related h2{margin:0 0 .3em;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.related ul{list-style:none;margin:0;padding:0}
.related li+li{border-top:1px solid var(--line)}
.related a{display:block;padding:11px 0;font-weight:600;line-height:1.4;text-decoration:none}
.related a:hover{text-decoration:underline}

/* Guide cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:2.2em 0 2.4em;scroll-margin-top:24px}
.card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:12px;padding:22px 22px 20px;color:inherit;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.card:hover{color:inherit;transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,25,35,.1)}
.card h3{font-family:var(--font-head);font-weight:var(--h2-weight,700);color:var(--heading);font-size:1.15rem;line-height:1.3;margin:0 0 .5em}
.card p{color:var(--muted);font-size:.97rem;line-height:1.55;margin:0 0 1em}
.card .more{margin-top:auto;font-weight:700;color:var(--link)}

/* Call-to-action band */
.cta-band{background:var(--band-bg);color:var(--band-ink);padding:52px 0}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.cta-band h2{font-family:var(--font-head);font-weight:var(--h2-weight,700);font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2;margin:0 0 .35em}
.cta-band p{margin:0;max-width:42em}
.cta-band .btn{background:var(--band-btn-bg);border-color:var(--band-btn-bg);color:var(--band-btn-ink)}

/* Footer */
.site-footer{background:var(--footer-bg);color:var(--footer-ink);padding:40px 0 36px;font-size:.93rem;line-height:1.6}
.site-footer a{color:inherit}
.footer-brand{font-family:var(--font-head);font-weight:700;font-size:1.1rem;margin:0 0 12px}
.footer-nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0 0 20px;padding:0}
.footer-nav a{text-decoration:none}
.footer-nav a:hover{text-decoration:underline}
.disclosure{max-width:62em;margin:0 0 10px;opacity:.85}
.credit{margin:0;opacity:.85}

@media (max-width:960px){
  .content-grid{grid-template-columns:1fr;gap:40px}
  .sidebar-inner{position:static}
  .home-head .wrap{grid-template-columns:1fr}
  .hero-art{justify-self:start;max-width:340px}
}
@media (max-width:640px){
  body{font-size:1rem}
  .wrap{padding:0 16px}
  .header-inner{padding-top:12px;padding-bottom:10px}
  .site-nav{flex-basis:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .site-nav ul{flex-wrap:nowrap}
  .page-head{padding:32px 0 30px}
  .home-head{padding:40px 0 36px}
  .hero-art{max-width:260px}
  .cards{grid-template-columns:1fr}
  .prose h2{font-size:1.4rem}
  .cta-band{padding:40px 0}
}

/* Colorado Roofing Guide - Colorado flag blue, red and gold */
:root{
  --font-head:'Barlow','Segoe UI',system-ui,sans-serif;
  --font-body:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  --font-ui:'Barlow','Segoe UI',system-ui,sans-serif;
  --bg:#f6f8fc;--ink:#1a2233;--muted:#4f5b70;--heading:#0b2f6b;--line:#dbe2ee;--line-strong:#b8c4d8;
  --link:#0b4bb3;--link-hover:#08367f;
  --header-bg:#ffffff;--header-ink:#0b2f6b;--header-line:#dbe2ee;--nav-hover:#eaf0fb;--nav-active:#0b3d91;--nav-active-ink:#ffffff;
  --logo-bg:#0b3d91;--logo-fg:#ffd100;
  --head-bg:#0b3d91;--head-ink:#ffffff;--kicker-bg:#ffd100;--kicker-ink:#1a1a1a;
  --accent:#bf0a30;--accent-ink:#ffffff;--accent-dark:#9c0826;
  --callout-bg:#fff8d6;--table-head:#e8eef9;--card-bg:#ffffff;
  --cta-bg:#0b3d91;--cta-ink:#ffffff;
  --band-bg:#bf0a30;--band-ink:#ffffff;--band-btn-bg:#ffd100;--band-btn-ink:#1a1a1a;
  --footer-bg:#071f4d;--footer-ink:#c9d6ec;
  --h1-weight:800;--h2-weight:700;--brand-weight:800;
}
.site-header{border-bottom:4px solid #ffd100}
.page-head{background-image:linear-gradient(180deg,#0b3d91 0%,#0b3d91 82%,#08306f 100%)}
.callout{border-left-color:#ffd100}
.art-e .state{fill:#e9f0fb;stroke:#ffffff;stroke-width:4}
.art-e .plains{fill:#f4e9c4}
.art-e .mtn{fill:#5d7fb8}
.art-e .snow{fill:#ffffff}
.art-e .dot{fill:#bf0a30;stroke:#ffffff;stroke-width:3}
.art-e .lbl{fill:#ffffff;font:700 15px 'Barlow',sans-serif}
.art-e .sun{fill:#ffd100}