:root{
  --ink:#201b17; --paper:#f6f1ea; --card:#fffdf9; --line:#e2d8c9;
  --clay:#b8673f; --sea:#3f7d78; --bone:#e9e2d4; --moss:#3b5a3a;
  --accent:#9a5a33; --muted:#7a7066;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(28px,5vw,46px);margin:.2em 0 .3em}
h2{font-size:clamp(22px,3vw,30px);margin:0 0 .4em}

header.site,footer.site{background:var(--card);border-bottom:1px solid var(--line)}
footer.site{border-bottom:0;border-top:1px solid var(--line);margin-top:48px}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:66px}
.brand{font-weight:700;font-size:20px;color:var(--ink)}
.brand span{color:var(--clay)}
header nav a{margin-left:20px;color:var(--ink);font-size:15px}

.hero{background:linear-gradient(180deg,#fffdf9, var(--paper))}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding:56px 20px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--muted);margin:0}
.lede{font-size:18px;color:#4a4139;max-width:48ch}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:11px 18px;border-radius:8px;font-size:15px;margin-top:8px}
.btn:hover{text-decoration:none;filter:brightness(.95)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}

.tilegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(40,30,20,.12)}
.tilegrid span{display:block}
.t1{background:var(--clay)}.t2{background:var(--sea)}.t3{background:var(--moss)}
.t4{background:repeating-linear-gradient(45deg,var(--bone),var(--bone) 6px,#d8cdb9 6px,#d8cdb9 12px)}

.block{padding:48px 20px}
.section-lede{color:#4a4139;max-width:60ch}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card h3{margin:14px 14px 6px}
.card p{margin:0 14px 16px;font-size:14px;color:#52483f}
.swatch{height:96px}
.s-clay{background:var(--clay)}.s-sea{background:var(--sea)}
.s-bone{background:repeating-linear-gradient(45deg,var(--bone),var(--bone) 8px,#d8cdb9 8px,#d8cdb9 16px)}
.s-moss{background:var(--moss)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.steps,.notes{padding-left:20px;color:#4a4139}
.steps li,.notes li{margin:.4em 0}

.contactband{background:var(--ink);color:#f4ece0;margin-top:48px}
.contactband .wrap{padding:44px 20px}
.contactband h2{color:#fff}
.contactband a{color:#f0b58a}
.muted{color:var(--muted)}
.contactband .muted{color:#b6ab9c}

.footgrid{display:flex;justify-content:space-between;gap:24px;padding:28px 20px;flex-wrap:wrap}

@media (max-width:760px){
  .hero-grid,.split{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  header nav a:first-child{display:none}
}
@media (max-width:460px){ .cards{grid-template-columns:1fr} }