/* Villa 12000 - gallery villa showcase */
:root{
  --ink:#16181c;
  --ink-soft:#4b5158;
  --line:#e2ddd4;
  --paper:#f7f5f1;
  --paper-2:#fffefb;
  --brass:#a9843f;
  --brass-soft:#c9a96a;
  --night:#14161a;
  --night-2:#1e2228;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--brass);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sans{font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif}

/* nav */
.nav{
  position:sticky;top:0;z-index:20;
  background:rgba(247,245,241,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600}
.brand span{color:var(--brass)}
.nav nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.nav nav a{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--brass);text-decoration:none}

/* hero */
.hero{
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(201,169,106,.18), transparent 60%),
    linear-gradient(180deg,var(--night) 0%, var(--night-2) 100%);
  color:#efe9de;
  padding:96px 0 84px;
  border-bottom:1px solid #000;
}
.eyebrow{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-soft);margin:0 0 20px;
}
.hero h1{
  font-size:clamp(38px,6.2vw,68px);line-height:1.04;margin:0 0 22px;font-weight:400;letter-spacing:-.01em;
}
.hero h1 em{font-style:normal;color:var(--brass-soft)}
.hero p{max-width:640px;font-size:19px;color:#c7c1b7;margin:0 0 34px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:13px 26px;border:1px solid var(--brass);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-soft);
}
.btn:hover{background:var(--brass);color:#14161a;text-decoration:none}
.btn.solid{background:var(--brass);color:#14161a;border-color:var(--brass)}
.btn.solid:hover{background:transparent;color:var(--brass-soft)}

/* key numbers strip */
.strip{background:var(--paper-2);border-bottom:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.stat{padding:26px 10px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:30px;font-weight:400;line-height:1.1;color:var(--ink)}
.stat span{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}

/* sections */
section{padding:78px 0}
section.alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin:0 0 14px;
}
h2{font-size:clamp(28px,4vw,40px);font-weight:400;line-height:1.15;margin:0 0 18px}
h3{font-size:21px;font-weight:400;margin:0 0 8px}
.lede{font-size:19px;color:var(--ink-soft);max-width:680px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.card{
  background:var(--paper-2);border:1px solid var(--line);padding:28px 26px;
}
section.alt .card{background:var(--paper)}
.card .num{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.2em;color:var(--brass);
}
.card p{margin:8px 0 0;font-size:16px;color:var(--ink-soft)}
ul.ticks{list-style:none;margin:22px 0 0;padding:0}
ul.ticks li{padding:11px 0 11px 30px;border-bottom:1px solid var(--line);position:relative;font-size:16.5px}
ul.ticks li:before{content:"";position:absolute;left:4px;top:20px;width:12px;height:1px;background:var(--brass)}

/* spec table */
table.spec{width:100%;border-collapse:collapse;margin-top:34px;font-size:16px}
table.spec th,table.spec td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.spec th{
  width:34%;font-weight:400;color:var(--ink-soft);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
table.spec tr:first-child th,table.spec tr:first-child td{border-top:1px solid var(--line)}

/* gallery wall */
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:40px}
.frame{
  aspect-ratio:3/4;border:7px solid #ece6db;outline:1px solid var(--line);
  background:linear-gradient(140deg,#2b2f36,#4a5058);
}
.frame.b{aspect-ratio:4/5;background:linear-gradient(140deg,#5c4b39,#8a7355)}
.frame.c{aspect-ratio:1/1;background:linear-gradient(140deg,#39424a,#6d7a83)}
.frame.d{aspect-ratio:2/3;background:linear-gradient(140deg,#7a5d4a,#b39274)}
.frame.e{aspect-ratio:1/1;background:linear-gradient(140deg,#2f3a33,#5e7060)}
.frame.f{aspect-ratio:3/4;background:linear-gradient(140deg,#4a3a4d,#7e6a82)}

/* plans */
.plan{
  background:var(--paper-2);border:1px solid var(--line);padding:22px;margin-top:28px;overflow:auto;
}
.plan h3{margin:0 0 4px}
.plan .note{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 18px;
}
svg .rm{fill:#f3efe7;stroke:#2a2d33;stroke-width:2}
svg .rm.key{fill:#efe4cf}
svg .rm.open{fill:#e9e4d9;stroke-dasharray:6 5}
svg .shell{fill:none;stroke:#2a2d33;stroke-width:5}
svg .lbl{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;fill:#22252a;text-anchor:middle}
svg .sub{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:10.5px;fill:#6a7079;text-anchor:middle;letter-spacing:.08em}

/* energy diagram */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.node{border:1px solid var(--line);background:var(--paper-2);padding:24px 20px;position:relative}
section.alt .node{background:var(--paper)}
.node b{display:block;font-size:18px;font-weight:400;margin-bottom:6px}
.node span{font-size:15px;color:var(--ink-soft)}
.node .tag{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);display:block;margin-bottom:10px;
}

/* callout */
.callout{
  background:var(--night);color:#e8e2d7;padding:54px 48px;margin-top:20px;
  border-left:4px solid var(--brass);
}
.callout h2{color:#fff;margin-bottom:12px}
.callout p{color:#bcb6ac;max-width:660px;margin:0}

footer{background:var(--night);color:#8d8880;padding:54px 0 40px;font-size:15px}
footer .wrap{display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
footer a{color:#c9a96a}
footer .brand{color:#e8e2d7}

@media (max-width:900px){
  .two{grid-template-columns:1fr;gap:34px}
  .cards{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
  .strip .wrap{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(3n){border-right:0}
  .stat{border-bottom:1px solid var(--line)}
  .wall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
  body{font-size:16px}
  .hero{padding:62px 0 54px}
  section{padding:56px 0}
  .cards{grid-template-columns:1fr}
  .strip .wrap{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3n){border-right:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
  .callout{padding:36px 26px}
  .nav .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:12px}
  .nav nav{margin-left:0;width:100%;gap:16px}
}