:root { --ink:#15252b; --muted:#5f6d70; --paper:#f5f1e9; --white:#fffdf8; --line:#dcd8ce; --copper:#b96843; --copper-dark:#8c472d; --sage:#5d766d; --shadow:0 18px 55px rgba(21,37,43,.11); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.65 ui-sans-serif, system-ui, sans-serif; }
a { color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid #d88b64; outline-offset:3px; }
.wrap { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.skip { position:absolute; left:-999px; top:auto; }
.skip:focus { left:20px; top:20px; z-index:20; background:var(--ink); color:#fff; padding:10px 14px; }
.topline { background:var(--ink); color:#e9eee8; font-size:.82rem; }
.topline .wrap { display:flex; justify-content:space-between; gap:20px; padding:8px 0; }
.topline a { color:#fff; text-decoration:none; }
.masthead { background:var(--white); border-bottom:1px solid var(--line); }
.masthead .wrap { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-family:ui-sans-serif,system-ui,sans-serif; font-weight:800; letter-spacing:-.04em; font-size:1.34rem; }
.brand-mark { width:35px; height:35px; border-radius:11px 11px 11px 3px; display:grid; place-items:center; background:var(--copper); color:#fff; font-size:1rem; }
nav { display:flex; align-items:center; gap:24px; font-size:.94rem; }
nav a { text-decoration:none; color:#33454a; }
nav a:hover { color:var(--copper-dark); }
.nav-cta, .button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; background:var(--copper); color:#fff; padding:12px 19px; font-weight:700; text-decoration:none; cursor:pointer; transition:transform .2s ease, background .2s ease; }
.nav-cta:hover, .button:hover { transform:translateY(-2px); background:var(--copper-dark); }
.nav-toggle { display:none; border:1px solid var(--line); background:transparent; border-radius:8px; padding:8px 10px; font-size:1.2rem; }
.hero { padding:84px 0 74px; position:relative; overflow:hidden; background:linear-gradient(118deg,#f5f1e9 0%,#f7f5ef 56%,#e9eee8 100%); }
.hero:after { content:''; position:absolute; width:420px; height:420px; right:-160px; top:-180px; border:1px solid rgba(185,104,67,.18); border-radius:50%; box-shadow:0 0 0 45px rgba(185,104,67,.04),0 0 0 90px rgba(185,104,67,.03); }
.hero-grid { display:grid; grid-template-columns:1.03fr .97fr; gap:60px; align-items:center; position:relative; z-index:1; }
.eyebrow { color:var(--copper-dark); font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3 { font-family:Georgia, 'Times New Roman', serif; line-height:1.12; letter-spacing:-.045em; margin:0 0 18px; }
h1 { max-width:760px; font-size:clamp(2.6rem,5.2vw,5.35rem); }
h2 { font-size:clamp(2rem,3.3vw,3.25rem); }
h3 { font-size:1.2rem; letter-spacing:-.025em; }
p { margin:0 0 18px; }
.lead { max-width:610px; color:#44565a; font-size:1.15rem; }
.hero-actions { display:flex; align-items:center; gap:17px; margin-top:29px; flex-wrap:wrap; }
.text-link { color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-color:#d0a28e; text-underline-offset:4px; }
.roof-sketch { min-height:430px; position:relative; display:grid; place-items:center; }
.roof-card { width:min(100%,520px); padding:26px; border:1px solid rgba(21,37,43,.1); background:rgba(255,253,248,.72); box-shadow:var(--shadow); transform:rotate(2deg); }
.roof-art { height:310px; position:relative; overflow:hidden; background:#d7e1dd; }
.roof-art:before { content:''; position:absolute; left:6%; right:7%; bottom:0; height:68%; background:linear-gradient(135deg,#b76542 0 49%,#8b452e 50% 100%); clip-path:polygon(0 100%,50% 0,100% 100%); }
.roof-art:after { content:''; position:absolute; left:17%; right:17%; bottom:18%; height:27%; border:10px solid #f1e9dd; border-bottom:0; background:#9bb1aa; box-shadow:inset 0 0 0 2px rgba(21,37,43,.2); }
.roof-caption { display:flex; justify-content:space-between; gap:20px; padding-top:17px; font-size:.9rem; }
.roof-caption strong { font-family:Manrope,sans-serif; }
.roof-caption span { color:var(--muted); text-align:right; }
.stripe { background:var(--ink); color:#fff; }
.stripe .wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:24px 0; }
.stripe strong { display:block; color:#f2c3a9; font:800 1.5rem Manrope,sans-serif; }
.stripe span { color:#ccd7d2; font-size:.91rem; }
.section { padding:90px 0; }
.section-head { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:38px; }
.section-head p { max-width:480px; color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:var(--white); border:1px solid var(--line); padding:28px; min-height:220px; }
.card:hover { box-shadow:var(--shadow); }
.card-index { color:var(--copper); font:700 .8rem ui-sans-serif,system-ui,sans-serif; }
.card p { color:var(--muted); }
.card a { font-weight:700; text-decoration:none; }
.card a:after { content:'  ↗'; color:var(--copper); }
.split { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }
.soft { background:#e7ece7; }
.paper-panel { background:var(--white); border:1px solid var(--line); padding:35px; }
.steps { display:grid; gap:0; }
.step { display:grid; grid-template-columns:56px 1fr; gap:19px; padding:0 0 28px; position:relative; }
.step:not(:last-child):after { content:''; width:1px; background:#cbd7d0; position:absolute; left:27px; top:56px; bottom:0; }
.step-num { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-family:Georgia,serif; position:relative; z-index:1; }
.step p { color:var(--muted); }
.notice { border-left:4px solid var(--copper); background:#f3e5db; padding:17px 20px; color:#4f403a; }
.form-shell { background:var(--ink); color:#fff; padding:38px; box-shadow:var(--shadow); }
.form-shell h2 { color:#fff; font-size:2rem; }
.form-shell p { color:#cbd7d2; }
.lead-form { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field { display:grid; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { color:#ecf1ec; font-size:.88rem; font-weight:700; }
.field input,.field select,.field textarea { width:100%; border:1px solid #607077; background:#24373d; color:#fff; border-radius:4px; padding:12px 13px; font:inherit; }
.field textarea { min-height:112px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder { color:#9daeb0; }
.check { display:flex; align-items:flex-start; gap:10px; font-size:.82rem; color:#cbd7d2; }
.check input { margin-top:5px; accent-color:var(--copper); }
.check a { color:#fff; }
.form-actions { display:flex; align-items:center; gap:17px; margin-top:4px; }
.form-status { min-height:28px; color:#f2c3a9; font-size:.88rem; }
.honeypot { position:absolute; left:-10000px; width:1px; height:1px; opacity:0; }
.breadcrumb { padding:24px 0 0; font-size:.84rem; color:var(--muted); }
.breadcrumb a { text-decoration:none; }
.page-hero { padding:60px 0 50px; background:#e7ece7; }
.page-hero p { max-width:680px; color:var(--muted); font-size:1.1rem; }
.content-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:55px; }
.prose { max-width:760px; }
.prose h2 { font-size:2rem; margin-top:40px; }
.prose h3 { margin-top:28px; }
.prose ul { padding-left:22px; }
.prose li { margin:7px 0; }
.aside { align-self:start; position:sticky; top:20px; }
.aside .card { min-height:0; margin-bottom:16px; }
.faq { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); padding:19px 0; }
summary { cursor:pointer; font-weight:700; }
details p { color:var(--muted); margin:12px 0 0; }
.footer { background:#101d22; color:#d4dfda; padding:57px 0 25px; }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:50px; }
.footer h3 { color:#fff; font-size:1rem; letter-spacing:0; }
.footer a { color:#d4dfda; text-decoration:none; display:block; margin:6px 0; }
.footer a:hover { color:#f2c3a9; }
.footer small { display:block; border-top:1px solid #34464a; margin-top:40px; padding-top:19px; color:#9aacae; }
.legal { padding:74px 0; }
.legal h1 { font-size:3rem; }
.legal h2 { font-size:1.7rem; margin-top:35px; }
.legal p,.legal li { color:#4d5d61; }
@media (max-width:900px) { nav { gap:14px; } .hero-grid,.split,.content-grid { grid-template-columns:1fr; gap:35px; } .roof-sketch { min-height:330px; } .aside { position:static; } }
@media (max-width:700px) { .wrap { width:min(100% - 28px,1180px); } .topline .wrap { display:block; text-align:center; } .topline .wrap span { display:none; } .masthead .wrap { min-height:70px; } .nav-toggle { display:block; } nav { display:none; position:absolute; top:70px; left:0; right:0; z-index:5; padding:15px 20px 20px; background:var(--white); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; } nav.open { display:flex; } nav a { padding:6px 0; } .nav-cta { text-align:center; } .hero { padding:58px 0; } h1 { font-size:clamp(2.35rem,12vw,4rem); } .section { padding:65px 0; } .section-head { display:block; } .cards,.stripe .wrap { grid-template-columns:1fr; } .stripe .wrap { gap:14px; } .roof-card { transform:none; } .roof-art { height:250px; } .form-shell { padding:24px 19px; } .lead-form { grid-template-columns:1fr; } .field.full { grid-column:auto; } .form-actions { display:block; } .form-actions .button { width:100%; } .footer-grid { grid-template-columns:1fr; gap:25px; } }