/* DIY My Roof — homeowner microsite. Powered by RoofMetric.
   Modern, minimal design system: lots of whitespace, one accent,
   no decorative icons, refined typography. */

:root{
  --ink:#0a0e17;
  --body:#454c5a;
  --muted:#8a909c;
  --line:#ececf0;
  --line-soft:#f1f2f5;
  --bg:#ffffff;
  --bg-soft:#f7f8fa;
  --accent:#2563eb;
  --accent-ink:#1d4ed8;
  --accent-soft:#eff4ff;
  --radius:16px;
  --maxw:1120px;
  /* back-compat aliases for legacy inline styles on inner pages */
  --slate:#454c5a;
  --green:#16a34a;
  --amber:#2563eb;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--body);line-height:1.65;background:var(--bg);-webkit-font-smoothing:antialiased;font-size:17px;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-ink);}
img{max-width:100%;}
h1,h2,h3,h4{color:var(--ink);}

/* hide the old decorative icons globally — modern, icon-free look */
.brand .mark{display:none;}
.card .ic{display:none;}

/* ---------- Nav ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 28px;max-width:var(--maxw);margin:0 auto;}
.brand{display:flex;align-items:center;gap:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--ink);}
.brand b{color:var(--accent);font-weight:600;}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{font-size:15px;color:var(--body);font-weight:450;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{background:var(--ink) !important;color:#fff !important;padding:10px 18px;border-radius:10px;font-weight:550;font-size:14px;white-space:nowrap;}
.nav-cta:hover{background:#1c2433 !important;}
@media(max-width:780px){.nav-links a:not(.nav-cta){display:none;}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:inherit;font-weight:550;border-radius:11px;padding:14px 24px;font-size:16px;line-height:1;transition:background .15s ease,transform .08s ease,box-shadow .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-green,.btn-blue,.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.25),0 8px 24px -8px rgba(37,99,235,.5);}
.btn-green:hover,.btn-blue:hover,.btn-primary:hover{background:var(--accent-ink);color:#fff;}
.btn-ghost,.btn-ghost-dark{background:#fff;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{border-color:#d7d9e0;color:var(--ink);}
.btn-lg{padding:16px 28px;font-size:16px;}

/* ---------- Hero ---------- */
.hero{max-width:var(--maxw);margin:0 auto;padding:84px 28px 72px;display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:56px;line-height:1.04;letter-spacing:-.035em;margin:14px 0 20px;font-weight:600;}
.hero h1 .hl{color:var(--accent);}
.hero p.sub{font-size:19px;color:var(--body);margin:0 0 28px;max-width:540px;line-height:1.6;}
.hero .trust{margin-top:22px;font-size:14px;color:var(--muted);display:flex;gap:22px;flex-wrap:wrap;}
.hero .trust span{position:relative;}
.hero .trust span+span::before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;border-radius:50%;background:#cfd3db;transform:translateY(-50%);}
.hero .trust b{color:var(--ink);font-weight:600;}
.hero-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;padding:32px;}
.hero-card h3{font-family:'Space Grotesk',sans-serif;margin:0 0 18px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.addr-row{display:flex;gap:10px;}
.addr-row input{flex:1;padding:15px 16px;border:1px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink);}
.addr-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
@media(max-width:880px){.hero{grid-template-columns:1fr;gap:40px;padding-top:52px;}.hero h1{font-size:40px;}}

/* ---------- Sections ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:80px 28px;}
.section.tight{max-width:760px;}
.eyebrow{color:var(--accent);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13px;margin-bottom:12px;text-align:center;}
.section h2{font-family:'Space Grotesk',sans-serif;font-size:34px;letter-spacing:-.025em;margin:0 0 12px;text-align:center;font-weight:600;color:var(--ink);}
.section .lead-c{text-align:center;color:var(--body);max-width:600px;margin:0 auto 44px;font-size:18px;}
.soft{background:var(--bg-soft);}

.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:820px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:border-color .15s ease,box-shadow .2s ease,transform .15s ease;}
.card:hover{border-color:#e0e2e8;box-shadow:0 18px 40px -24px rgba(10,14,23,.25);transform:translateY(-3px);}
.card h3{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 10px;font-weight:600;letter-spacing:-.01em;}
.card p{margin:0;color:var(--body);font-size:15.5px;}
.card a.more{display:inline-block;margin-top:16px;font-weight:550;font-size:14.5px;color:var(--accent);}

/* ---------- Article ---------- */
.article{max-width:720px;margin:0 auto;padding:64px 28px;}
.article h1{font-family:'Space Grotesk',sans-serif;font-size:44px;line-height:1.1;letter-spacing:-.03em;margin:0 0 16px;font-weight:600;}
.article .meta{display:flex;gap:10px;font-size:14px;color:var(--muted);margin-bottom:36px;}
.article .meta span+span::before{content:"·";margin-right:10px;color:#cfd3db;}
.article > p:first-of-type,.article .standfirst{font-size:20px;color:var(--ink);line-height:1.55;}
.article h2{font-family:'Space Grotesk',sans-serif;font-size:28px;margin:52px 0 14px;letter-spacing:-.02em;font-weight:600;}
.article h3{font-family:'Space Grotesk',sans-serif;font-size:20px;margin:32px 0 8px;font-weight:600;}
.article p,.article li{font-size:17px;color:var(--body);}
.article ul,.article ol{padding-left:22px;}
.article li{margin-bottom:9px;}
.callout{background:var(--accent-soft);border:1px solid #dbe6ff;padding:20px 24px;margin:28px 0;border-radius:14px;}
.callout strong{color:var(--accent-ink);}
.note{background:var(--bg-soft);border:1px solid var(--line);padding:18px 22px;margin:24px 0;border-radius:14px;font-size:16px;}
table.cost{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px;}
table.cost th,table.cost td{border-bottom:1px solid var(--line);padding:13px 14px;text-align:left;}
table.cost th{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--ink);background:var(--bg-soft);}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:#fff;border-radius:24px;padding:60px 32px;text-align:center;margin:64px auto;max-width:880px;}
.cta-band h2{font-family:'Space Grotesk',sans-serif;font-size:30px;margin:0 0 12px;color:#fff;letter-spacing:-.025em;font-weight:600;}
.cta-band p{font-size:18px;color:#aeb4c0;margin:0 auto 26px;max-width:520px;}
.cta-band .btn-green,.cta-band .btn-blue{background:var(--accent);}
.cta-band small{display:block;margin-top:16px;color:#7e8593;font-size:13px;}

/* ---------- Calculator ---------- */
.calc{max-width:660px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;}
.calc label{display:block;font-weight:550;font-size:14px;margin:20px 0 8px;color:var(--ink);}
.calc input,.calc select{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:11px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink);}
.calc input:focus,.calc select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.calc .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.calc .row2{grid-template-columns:1fr;}}
.calc-result{margin-top:28px;padding:26px;border-radius:16px;background:var(--bg-soft);border:1px solid var(--line);display:none;}
.calc-result.show{display:block;}
.calc-result .big{font-family:'Space Grotesk',sans-serif;font-size:38px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:4px 0;}
.calc-result .muted{color:var(--muted);font-size:13px;}

/* ---------- FAQ ---------- */
.faq{max-width:740px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);padding:6px 4px;background:transparent;}
.faq summary{cursor:pointer;font-weight:600;font-family:'Space Grotesk',sans-serif;font-size:17px;padding:20px 0;list-style:none;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';float:right;color:var(--muted);font-size:22px;line-height:1;font-weight:400;}
.faq details[open] summary::after{content:'–';}
.faq details p{margin:0 0 20px;color:var(--body);font-size:16px;}

/* ---------- Footer ---------- */
.footer{background:var(--bg-soft);border-top:1px solid var(--line);color:var(--body);padding:60px 28px 40px;margin-top:80px;}
.footer-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;}
.footer h4{color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px;font-weight:600;}
.footer a{color:var(--body);display:block;font-size:14.5px;margin-bottom:10px;}
.footer a:hover{color:var(--ink);}
.footer .brand{color:var(--ink);margin-bottom:14px;}
.footer .legal{max-width:var(--maxw);margin:40px auto 0;border-top:1px solid var(--line);padding-top:24px;font-size:13.5px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media(max-width:820px){.footer-in{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-in{grid-template-columns:1fr;}}

.section h1{font-family:'Space Grotesk',sans-serif;font-size:34px;letter-spacing:-.025em;margin:0 0 12px;text-align:center;font-weight:600;color:var(--ink);}