:root{
  --sand:#c4a574;
  --stone:#8b7355;
  --ink:#1c1712;
  --paper:#f3ece2;
  --mist:#d9cfc2;
  --deep:#2a221a;
  --accent:#9a6b3f;
  --line:rgba(28,23,18,.12);
  --font-display:"Noto Serif SC",serif;
  --font-body:"DM Sans","Noto Serif SC",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--font-body);
  background:var(--paper);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1100px,92vw);margin:0 auto}
.wrap.narrow{width:min(560px,92vw)}

.nav{
  position:fixed;inset:0 0 auto;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 4vw;
  background:linear-gradient(to bottom,rgba(28,23,18,.55),transparent);
  color:#f7f1e8;
}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:.08em}
.nav nav{display:flex;gap:22px;font-size:.95rem;opacity:.92}

.hero{
  position:relative;min-height:100vh;min-height:100dvh;
  display:grid;align-items:end;
  color:#f8f2ea;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(120deg,rgba(28,23,18,.72),rgba(28,23,18,.28) 48%,rgba(28,23,18,.55)),
    radial-gradient(circle at 20% 20%,rgba(196,165,116,.35),transparent 40%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"),
    linear-gradient(160deg,#5d4a35,#2f261d 55%,#1b1612);
  background-size:auto,auto,180px 180px,auto;
  transform:scale(1.04);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.5%,1%,0)}}
.hero-copy{
  position:relative;z-index:1;
  padding:0 4vw 12vh;
  max-width:820px;
  animation:rise .9s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.brand{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,8vw,5.2rem);
  font-weight:700;letter-spacing:.12em;
  margin:0 0 .35rem;line-height:1.05;
}
.hero h1{
  margin:0 0 .8rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.25rem,3.2vw,2rem);
}
.lead{margin:0 0 1.6rem;color:rgba(247,241,232,.82);font-size:1.05rem}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 1.2rem;border-radius:999px;
  background:var(--sand);color:var(--ink);font-weight:700;border:0;cursor:pointer;
}
.btn.ghost{background:transparent;color:#f7f1e8;border:1px solid rgba(247,241,232,.45)}

.section{padding:88px 0}
.section h2{
  margin:0 0 .6rem;
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,2.6rem);
}
.sub{margin:0 0 2rem;color:#5c5349;max-width:36rem}
.craft{background:linear-gradient(180deg,#efe6da,#f3ece2)}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tri article{
  padding:1.4rem 1.3rem 1.5rem;
  border-top:2px solid var(--stone);
  background:rgba(255,255,255,.35);
}
.tri h3{margin:0 0 .5rem;font-family:var(--font-display);font-size:1.25rem}
.tri p{margin:0;color:#5a5147}

.project{background:var(--deep);color:#f4ebe1}
.project .sub{color:rgba(244,235,225,.7)}
.build{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.build-visual{
  min-height:340px;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 70% 20%,rgba(196,165,116,.18),transparent 35%),
    linear-gradient(180deg,#32281f,#211a14);
  border:1px solid rgba(244,235,225,.08);
  overflow:hidden;
  padding:12px;
}
.house-shot{margin:0;width:100%;position:relative}
.house-shot img{
  display:block;width:100%;height:auto;border-radius:4px;
  animation:fadein .8s ease both;
}
@keyframes fadein{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
.house-shot figcaption{
  position:absolute;left:12px;right:12px;bottom:12px;
  display:flex;gap:10px;flex-wrap:wrap;
  pointer-events:none;
}
.house-shot figcaption span{
  padding:.35rem .7rem;border-radius:999px;
  background:rgba(28,23,18,.72);color:#f4ebe1;
  font-size:.82rem;letter-spacing:.04em;
  backdrop-filter:blur(6px);
}

.build-meta dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.build-meta dt{font-size:.8rem;opacity:.65}
.build-meta dd{margin:.15rem 0 0;font-family:var(--font-display);font-size:1.35rem}
.note{margin:1.4rem 0 0;color:rgba(244,235,225,.62);font-size:.92rem}

.steps{background:#efe7db}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.timeline li{
  display:grid;grid-template-columns:160px 1fr;gap:16px;
  padding:1rem 0;border-bottom:1px solid var(--line);
}
.timeline strong{font-family:var(--font-display);font-size:1.15rem}
.timeline span{color:#5c5349}

.contact{background:#f7f1e8}
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-size:.92rem;color:#5c5349}
.form input,.form textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line);
  background:#fff;color:var(--ink);font:inherit;border-radius:10px;
}
.form-tip{margin:.2rem 0 0;color:var(--accent);font-weight:600}
.foot{
  padding:28px 0 36px;background:#1c1712;color:rgba(244,235,225,.75);font-size:.92rem;
}
.foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot strong{color:#f4ebe1;font-family:var(--font-display)}

@media (max-width:860px){
  .tri,.build{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr}
  .nav nav{gap:14px;font-size:.85rem}
  .brand{letter-spacing:.08em}
}