:root{
  --slate:#1f2b33; --slate-d:#151e24; --slate-l:#2c3a44;
  --stone:#eef0ee; --paper:#fbfcfb; --line:#d8ddda;
  --ink:#1b2328; --ink-2:#55615f;
  --patina:#3d7569; --patina-d:#2f5d53; --patina-l:#e3eeeb;
  --brass:#a88a52;
  --display:"Marcellus",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);font-size:17.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--patina-d);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;margin:0 0 .55em;letter-spacing:.005em}
h1{font-size:clamp(2.4rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem)}
h3{font-size:1.4rem}
p{margin:0 0 1.05em}

/* header */
header.top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--slate)}
.brand .name{font-family:var(--display);font-size:1.45rem;letter-spacing:.02em}
nav.main{display:flex;gap:26px;font-size:.95rem}
nav.main a{color:var(--ink);text-decoration:none}
nav.main a:hover{color:var(--patina-d)}
.tel{font-weight:600;color:var(--slate);text-decoration:none;white-space:nowrap;border:1px solid var(--slate);padding:9px 16px;border-radius:2px}
.tel:hover{background:var(--slate);color:#fff}

/* buttons */
.btn{display:inline-block;background:var(--patina);color:#fff;text-decoration:none;font:inherit;font-weight:600;padding:13px 24px;border:0;border-radius:2px;cursor:pointer;letter-spacing:.01em}
.btn:hover{background:var(--patina-d)}
.btn.line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn.line:hover{background:rgba(255,255,255,.08)}

/* hero: slate shingle courses */
.hero,.page-hero{position:relative;color:#fff;background-color:var(--slate);
  background-image:linear-gradient(100deg,rgba(21,30,36,.94) 0%,rgba(21,30,36,.78) 45%,rgba(21,30,36,.35) 100%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2276%22%20viewBox%3D%220%200%2096%2076%22%3E%20%3Crect%20width%3D%2296%22%20height%3D%2276%22%20fill%3D%22%231f2b33%22/%3E%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2247%22%20height%3D%2236%22%20fill%3D%22%2324323b%22/%3E%3Crect%20x%3D%2248%22%20y%3D%220%22%20width%3D%2247%22%20height%3D%2236%22%20fill%3D%22%231e2a32%22/%3E%20%3Crect%20x%3D%220%22%20y%3D%2238%22%20width%3D%2223%22%20height%3D%2236%22%20fill%3D%22%23212e37%22/%3E%3Crect%20x%3D%2224%22%20y%3D%2238%22%20width%3D%2247%22%20height%3D%2236%22%20fill%3D%22%2325333c%22/%3E%3Crect%20x%3D%2272%22%20y%3D%2238%22%20width%3D%2224%22%20height%3D%2236%22%20fill%3D%22%23212e37%22/%3E%20%3Crect%20x%3D%220%22%20y%3D%2234%22%20width%3D%2296%22%20height%3D%224%22%20fill%3D%22%23141c21%22%20opacity%3D%22.85%22/%3E%3Crect%20x%3D%220%22%20y%3D%2272%22%20width%3D%2296%22%20height%3D%224%22%20fill%3D%22%23141c21%22%20opacity%3D%22.85%22/%3E%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2296%22%20height%3D%221%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.05%22/%3E%3Crect%20x%3D%220%22%20y%3D%2238%22%20width%3D%2296%22%20height%3D%221%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.05%22/%3E%20%3C/svg%3E");
  background-size:auto,96px 76px}
.hero::before,.page-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brass)}
.hero{padding:80px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.2fr .9fr;gap:64px;align-items:center}
.hero .intro{font-size:1rem;color:#c9d3d0;margin-bottom:18px;letter-spacing:.02em}
.hero h1{max-width:12em}
.hero .lead,.page-hero .lead{font-size:1.18rem;color:#dbe2e0;max-width:35em}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* form */
.form-card{background:var(--paper);color:var(--ink);padding:30px 30px 26px;border-top:3px solid var(--brass);position:relative;box-shadow:0 30px 60px -20px rgba(10,16,20,.55)}
.form-card h2{font-size:1.6rem;margin-bottom:.3em}
.form-card p{color:var(--ink-2);font-size:.95rem}
label{display:block;font-weight:600;font-size:.86rem;margin:12px 0 5px;color:var(--ink)}
.opt{font-weight:400;color:var(--ink-2)}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:2px;font:inherit;font-size:1rem;background:#fff;color:var(--ink)}
textarea{min-height:74px;resize:vertical}
.form-card .btn{width:100%;margin-top:18px;padding:15px}
.note{font-size:.82rem;color:var(--ink-2);text-align:center;margin-top:10px}
.trap{position:absolute;left:-9999px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* sections */
section{padding:92px 0}
.stone{background:var(--stone)}
.head{max-width:44em;margin-bottom:46px}
.head p{color:var(--ink-2);font-size:1.08rem}

/* signature roofs: editorial rows, not cards */
.roofs{border-top:1px solid var(--line)}
.roof{display:grid;grid-template-columns:1fr 1.25fr auto;gap:40px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.roof h3{margin:0;font-size:1.75rem;color:var(--slate)}
.roof .rating{display:block;font-family:var(--body);font-size:.9rem;color:var(--patina-d);margin-top:6px}
.roof p{margin:0;color:var(--ink-2)}
.roof .more{color:var(--patina-d);font-weight:600;white-space:nowrap}
a.roof:hover h3{color:var(--patina-d)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.points{list-style:none;padding:0;margin:0}
.points li{padding:18px 0;border-bottom:1px solid var(--line)}
.points li:first-child{padding-top:0}
.points strong{display:block;font-size:1.05rem;margin-bottom:2px}
.points span{color:var(--ink-2)}

table.compare{width:100%;border-collapse:collapse;margin:0 0 1.2em;background:var(--paper);font-size:.97rem}
table.compare th,table.compare td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.compare th{font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--slate);border-bottom:2px solid var(--slate)}
table.compare td:first-child{font-weight:600}

/* communities */
.featured{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:34px}
.featured a{display:block;background:var(--slate);color:#fff;text-decoration:none;padding:34px;border-left:3px solid var(--brass)}
.featured h3{font-size:2rem;margin-bottom:.3em}
.featured p{color:#cdd6d3;margin:0}
.featured a:hover{background:var(--slate-l)}
.towns{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;padding:0;margin:0;font-size:1.05rem}
.towns a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.towns a:hover{color:var(--patina-d);border-color:var(--patina)}

.quiet{background:var(--patina-l)}
.quiet .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.quiet h2{font-size:1.6rem;margin:0 0 .3em}
.quiet p{margin:0;color:var(--ink-2);max-width:40em}
section.quiet{padding:48px 0}

details{border-bottom:1px solid var(--line);padding:18px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:1.4rem;line-height:1;color:var(--patina-d)}
details[open] summary::after{content:"\2013"}
details p{margin:12px 0 0;color:var(--ink-2);max-width:46em}

.cta{background:var(--slate-d);color:#fff;text-align:center}
.cta p{color:#c9d3d0}
.cta .btn{margin-top:10px}

/* inner pages */
.page-hero{padding:56px 0 64px}
.crumbs{font-size:.9rem;color:#aebcb8;margin-bottom:18px}
.crumbs a{color:#dbe2e0}
.crumbs span{margin:0 8px;color:var(--brass)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:64px;padding-top:64px;padding-bottom:84px;align-items:start}
.content{max-width:44em}
.content h2{margin-top:1.4em}
.content h2:first-child{margin-top:0}
.content h3{margin-top:1.3em;font-size:1.3rem}
.content ul,.content ol{padding-left:1.2em;margin:0 0 1.1em}
.content li{margin-bottom:.55em}
.callout{border-left:3px solid var(--brass);background:var(--stone);padding:18px 22px;margin:1.5em 0}
.callout p:last-child{margin:0}
.side{position:sticky;top:96px}
.side .form-card{box-shadow:0 18px 40px -18px rgba(21,30,36,.35);border:1px solid var(--line);border-top:3px solid var(--brass)}
.related .links{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;border-top:1px solid var(--line)}
.related .links a{display:block;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.related .links h3{font-size:1.3rem;color:var(--slate);margin:0 0 4px}
.related .links p{margin:0;color:var(--ink-2);font-size:.95rem}
.related .links a:hover h3{color:var(--patina-d)}

footer{background:var(--slate-d);color:#a9b6b3;padding:56px 0 26px;font-size:.93rem}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
footer .fname{font-family:var(--display);font-size:1.4rem;color:#fff;display:block;margin-bottom:10px}
footer strong{display:block;color:#fff;font-weight:600;margin-bottom:10px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:7px}
footer a{color:#e4ebe9;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .legal{border-top:1px solid #2a3740;margin-top:36px;padding-top:18px;font-size:.85rem}

@media (max-width:980px){
  nav.main{display:none}
  .hero .wrap,.split,.layout,.featured{grid-template-columns:1fr}
  .hero .wrap{gap:44px}
  .side{position:static}
  .roof{grid-template-columns:1fr;gap:10px}
  .related .links{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .wrap{padding:0 18px}
  .row,footer .cols{grid-template-columns:1fr}
  .brand .name{font-size:1.2rem}
  .tel{padding:8px 11px;font-size:.92rem}
  .hero{padding:56px 0 64px}
  section{padding:64px 0}
  .form-card{padding:24px 20px}
}