:root{
  --bg:#ece7de; --surface:#f6f3ed; --ink:#34383c; --muted:#6a6e72;
  --pine:#41464b; --on-pine:#efeae1; --brass:#7d6a51; --sand:#cdbea6; --on-accent:#2f3236; --line:#d9d2c5; --lit:#dccdb1;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#2b2e31; --surface:#34383c; --ink:#e8e4dc; --muted:#b0aca4;
    --pine:#232629; --on-pine:#e8e4dc; --brass:#c9b79a; --sand:#c9b79a; --on-accent:#2b2e31; --line:#454b50; --lit:#dccdb1;
  }
}
:root[data-theme="dark"]{
  --bg:#2b2e31; --surface:#34383c; --ink:#e8e4dc; --muted:#b0aca4;
  --pine:#232629; --on-pine:#e8e4dc; --brass:#c9b79a; --sand:#c9b79a; --on-accent:#2b2e31; --line:#454b50; --lit:#dccdb1;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600;line-height:1.15;margin:0;letter-spacing:-.01em}
a{color:inherit}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
header.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0}
.brand{display:inline-flex;align-items:center;gap:.8rem;font-family:Fraunces,Georgia,serif;font-weight:600;text-decoration:none;font-size:1.05rem}
.logo path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s ease-out .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
nav a{margin-left:1.4rem;text-decoration:none;color:var(--muted);font-weight:500}
nav a:hover{color:var(--ink)}
.hero{background:var(--pine);color:var(--on-pine)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center;padding-top:4rem;padding-bottom:4rem}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem)}
.hero p{max-width:34rem;margin:1.2rem 0 2rem;color:color-mix(in srgb,var(--on-pine) 82%,transparent)}
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:.4rem;font-weight:700;text-decoration:none;background:var(--sand);color:var(--on-accent)}
.btn:hover{filter:brightness(1.08)}
.hero svg{width:100%;height:auto;max-width:30rem;justify-self:end}
.keyturn{transform-origin:290px 210px;animation:turn 30s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.word{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:26px;fill:var(--on-pine);opacity:0;animation:reveal 30s ease infinite backwards;animation-delay:var(--d)}
@keyframes reveal{0%{opacity:0}3%{opacity:1}40%{opacity:1}48%{opacity:0}100%{opacity:0}}
.facade{fill:none;stroke:color-mix(in srgb,var(--on-pine) 45%,transparent);stroke-width:2}
.win{fill:color-mix(in srgb,var(--on-pine) 14%,transparent)}
.win.on{fill:var(--lit)}
section{padding:4.5rem 0}
section h2{font-size:clamp(1.6rem,3.5vw,2.3rem);margin-bottom:.8rem}
.lead{max-width:40rem;color:var(--muted);margin:0 0 2.5rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.svc{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:.25rem;padding:1.5rem}
.svc h3{font-size:1.3rem;margin-bottom:.6rem}
.svc p{margin:0 0 .8rem;color:var(--muted)}
.svc ul{margin:0;padding-left:1.1rem}
.svc li{margin:.25rem 0}
.why{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why dl{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0}
.facts dt{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.2rem;margin-bottom:.35rem}
.facts dd{margin:0;color:var(--muted)}
.why dt{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.2rem;margin-bottom:.35rem}
.why dd{margin:0;color:var(--muted)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:.25rem;padding:1.5rem}
.card p{margin:.3rem 0}
.todo{color:var(--brass);font-weight:700}
footer{padding:2rem 0 3rem;color:var(--muted);font-size:.95rem;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer a{margin-left:1.2rem}
@media (max-width:760px){
  .hero .wrap,.grid,.why dl,.facts,.contact{grid-template-columns:1fr!important}
  .hero svg{justify-self:start;max-width:100%}
  nav a{margin-left:1rem}
  section{padding:3rem 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.logo path{animation:none;stroke-dashoffset:0}.keyturn{animation:none;transform:rotate(30deg)}.word{animation:none;opacity:1}}
[hidden]{display:none!important}