:root {
  --paper:#F6F3EE; --surface:#FFFFFF; --ink:#1E1B18; --soft:#6B655D; --line:#D9D3C9; --field:#8A8378;
  --muted-bar:#B4AC9F; --copper:#9A5A2E; --copper-dark:#7E4923; --error:#A32D2D; --success:#2F6B4F;
  --head:"Instrument Serif",Georgia,serif; --body:"Inter",Arial,sans-serif;
  --radius:6px; --gutter:24px; --section:64px;
}
@media (min-width:1024px) { :root { --gutter:48px; --section:96px; } }

* { box-sizing:border-box; margin:0; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
body { background:var(--paper); color:var(--ink); font:400 16px/24px var(--body); }
img { display:block; width:100%; height:auto; }
figure { margin:0; }
figcaption, .note { font-size:14px; line-height:20px; color:var(--soft); margin-top:8px; }
ul, ol { list-style:none; padding:0; }
a { color:var(--copper); }
:focus-visible { outline:3px solid var(--copper-dark); outline-offset:2px; }

.wrap { width:100%; max-width:calc(1200px + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter); }
.skip { position:absolute; left:16px; top:-64px; z-index:20; background:var(--ink); color:#fff; padding:12px 16px; border-radius:var(--radius); }
.skip:focus { top:12px; }

h1, h2, h3 { font-family:var(--head); font-weight:400; letter-spacing:-.01em; }
h1 { font-size:56px; line-height:58px; }
h2 { font-size:36px; line-height:40px; }
h3 { font-size:24px; line-height:30px; }
@media (min-width:1024px) { h1 { font-size:88px; line-height:90px; } h2 { font-size:52px; line-height:56px; } }
.kicker, h2.kicker { font:500 14px/20px var(--body); letter-spacing:0; color:var(--copper); margin-bottom:16px; }
.lead { font-size:18px; line-height:28px; max-width:34em; margin-top:16px; }
.body { max-width:32em; margin-top:16px; }

/* Navigation */
.nav { position:sticky; top:0; z-index:10; background:var(--paper); border-bottom:1px solid var(--line); }
.nav-row { display:flex; align-items:center; justify-content:space-between; height:80px; }
.nav .logo { width:71px; height:64px; }

/* Hero */
.hero { display:grid; gap:32px; padding-top:32px; }
.hero-image { margin-top:24px; }
.hero-image img { aspect-ratio:1/1; object-fit:cover; }
@media (min-width:768px) { .hero-image img { aspect-ratio:16/9; } }
@media (min-width:1024px) {
  .hero { padding-top:48px; }
  .hero-copy { display:grid; grid-template-columns:7fr 5fr; column-gap:64px; }
  .hero-copy .kicker, .hero-copy h1 { grid-column:1; }
  .hero-copy .lead { grid-column:2; grid-row:2; align-self:end; margin-top:0; }
  .hero-image { grid-column:1 / -1; margin-top:48px; }
}

/* Form */
.form-panel { width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:var(--surface); color:var(--ink); overflow-y:auto; }
.form-panel::backdrop { background:rgba(30,27,24,.6); }
.form-inner { position:relative; padding:24px; }
html:has(dialog[open]) { overflow:hidden; }
.close { position:absolute; top:12px; right:12px; width:44px; height:44px; background:none; border:0; border-radius:var(--radius); font:400 32px/1 var(--body); color:var(--ink); cursor:pointer; }
.form-panel h2 { padding-right:48px; }
@media (min-width:768px) {
  .form-panel { width:560px; height:fit-content; min-height:560px; max-height:90dvh; margin:auto; }
  .form-panel:has(.thanks:not([hidden])) { min-height:0; }
  .form-inner { padding:40px; }
}
.form-intro { color:var(--soft); margin-top:8px; }
@media (max-width:767px) { .past-first .form-intro { display:none; } }
.privacy-note { display:flex; gap:8px; align-items:flex-start; margin-top:8px; color:var(--soft); font-size:14px; line-height:20px; }
.privacy-note svg { flex:none; margin-top:2px; }
.summary { margin-top:16px; padding:16px; background:var(--paper); }
.summary-title { font-weight:500; }
.summary dl { display:grid; grid-template-columns:auto auto auto; justify-content:space-between; gap:12px; margin:12px 0 0; }
.summary dt { font-size:14px; line-height:20px; color:var(--soft); }
.summary dd { margin:0; font:400 24px/30px var(--head); color:var(--copper); white-space:nowrap; }
#lead-form { margin-top:24px; }
.progress p { font-size:14px; line-height:20px; color:var(--soft); }
.progress-track { height:3px; margin-top:8px; background:var(--line); }
.progress-bar { height:100%; width:16.66%; background:var(--copper); transition:width .2s ease; }
.step { border:0; padding:0; margin:24px 0 0; min-width:0; animation:step-in .18s ease; }
@keyframes step-in { from { opacity:0; transform:translateY(6px); } }
.q { display:block; padding:0; margin-bottom:16px; font:400 32px/36px var(--head); letter-spacing:-.01em; }
input, select { width:100%; height:52px; padding:0 12px; font:400 16px/24px var(--body); color:var(--ink); background:var(--surface); border:1px solid var(--field); border-radius:var(--radius); }
input::placeholder { color:var(--soft); }
select { appearance:auto; }
[aria-invalid="true"] { border-color:var(--error); border-width:2px; }
.iti { display:block; width:100%; }
.opt { display:flex; align-items:center; min-height:52px; margin-top:8px; padding:0 16px; border:1px solid var(--field); border-radius:var(--radius); cursor:pointer; }
.opt input { position:absolute; width:1px; height:1px; opacity:0; }
.opt:hover { border-color:var(--copper); }
.opt:has(input:checked) { border:2px solid var(--copper); background:var(--paper); font-weight:500; }
.opt:has(input:focus-visible) { outline:3px solid var(--copper-dark); outline-offset:2px; }
.currency { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; font-size:14px; line-height:20px; color:var(--soft); }
.currency select { width:auto; height:44px; padding:0 8px; font-size:14px; }
.form-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; }
.form-actions .button { margin-left:auto; min-width:128px; }
.back { min-height:44px; padding:0 8px 0 0; background:none; border:0; font:500 16px/24px var(--body); color:var(--copper); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.error { color:var(--error); font-size:14px; line-height:20px; margin-top:4px; }
.trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; font:500 16px/24px var(--body); color:#fff; background:var(--copper); border:0; border-radius:var(--radius); text-decoration:none; cursor:pointer; }
.button:hover, .button:active { background:var(--copper-dark); }
.button:disabled { background:var(--field); cursor:wait; }
.status { color:var(--error); font-size:14px; line-height:20px; margin-top:16px; }
.consent { color:var(--soft); font-size:14px; line-height:20px; margin-top:16px; }
.consent a { margin-left:4px; }
.thanks { margin-top:24px; padding-top:16px; border-top:3px solid var(--success); }
.thanks:focus { outline:none; }
.thanks h3 { color:var(--success); }
.thanks p { margin-top:8px; }

/* Fixed bottom bar */
body { padding-bottom:80px; }
.reg-bar { position:fixed; left:0; right:0; bottom:0; z-index:10; padding:12px 0; background:var(--paper); border-top:1px solid var(--line); }
.reg-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.reg-row p { display:none; font:400 24px/30px var(--head); }
.reg-row .button { width:100%; }
@media (min-width:768px) { .reg-row p { display:block; } .reg-row .button { width:auto; } }

/* Market data */
.market { margin-top:var(--section); }
.market-head { display:grid; gap:16px; }
.market-head .body { margin-top:0; }
.stats { display:grid; grid-template-columns:1fr; gap:24px; margin:32px 0 0; padding-top:24px; border-top:1px solid var(--line); }
.stats dt { font:400 52px/56px var(--head); color:var(--copper); }
.stats dd { margin:4px 0 0; font-size:14px; line-height:20px; color:var(--soft); }
.charts { display:grid; gap:32px; margin-top:48px; }
.chart-title { margin:0; font:400 24px/30px var(--head); color:var(--ink); }
.chart-sub { font-size:14px; line-height:20px; color:var(--soft); }
.hbars { margin-top:16px; }
.hbar { display:grid; grid-template-columns:72px 1fr; align-items:center; gap:8px; min-height:44px; }
.hbar-label { font-size:14px; line-height:20px; }
.hbar-track { display:flex; align-items:center; gap:8px; min-width:0; }
.hbar-fill { display:block; height:24px; width:calc((100% - 56px) * var(--w) / 100); flex:none; background:var(--muted-bar); border-radius:0 4px 4px 0; }
.hbar-fill.on, .col-fill.on { background:var(--copper); }
.hbar-value, .col-value { font-size:14px; line-height:20px; font-weight:500; white-space:nowrap; }
.cols { display:grid; grid-template-columns:repeat(3,1fr); height:220px; margin-top:16px; border-bottom:1px solid var(--line); padding-bottom:28px; position:relative; }
.col { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; min-height:0; height:100%; }
.col-fill { display:block; width:24px; flex:none; height:calc((100% - 24px) * var(--h) / 100); background:var(--muted-bar); border-radius:4px 4px 0 0; }
.col-label { position:absolute; bottom:-28px; left:0; right:0; text-align:center; font-size:14px; line-height:20px; color:var(--soft); }
.chart .note { margin-top:12px; }
.chart-tip { position:fixed; z-index:20; max-width:260px; padding:8px 12px; background:var(--ink); color:#fff; font-size:14px; line-height:20px; border-radius:var(--radius); pointer-events:none; }
.market-foot { display:grid; gap:32px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.watch { margin-top:16px; }
.watch li { padding:8px 0; border-bottom:1px solid var(--line); }
.watch li:last-child { border-bottom:0; }
.data summary { font-weight:500; color:var(--copper); }
.data table { width:100%; border-collapse:collapse; font-size:14px; line-height:20px; }
.data th, .data td { padding:8px 8px 8px 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.data th { font-weight:500; }
.market > .note { margin-top:24px; max-width:60em; }
@media (min-width:768px) {
  .charts { grid-template-columns:1fr 1fr; }
  .stats { grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px) {
  .market-head { grid-template-columns:7fr 5fr; column-gap:64px; align-items:end; }
  .charts { grid-template-columns:repeat(3,1fr); gap:48px; }
  .market-foot { grid-template-columns:1fr 1fr; gap:64px; }
}

/* Building */
.building { margin-top:var(--section); }
.bleed img { aspect-ratio:4/3; object-fit:cover; }
@media (min-width:768px) { .bleed img { aspect-ratio:auto; } }
.building-grid { display:grid; gap:32px; margin-top:48px; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:0; }
.facts dt { font-family:var(--head); font-size:52px; line-height:56px; color:var(--copper); }
.facts dd { margin:0; font-size:14px; line-height:20px; color:var(--soft); }
.pair { display:grid; gap:24px; margin-top:48px; }
@media (min-width:768px) {
  .building-grid { grid-template-columns:5fr 6fr; gap:64px; }
  .pair { grid-template-columns:6fr 5fr; align-items:start; }
  .pair .offset { margin-top:64px; }
}

/* Location */
.location { display:grid; gap:32px; margin-top:var(--section); }
.times { margin-top:24px; border-top:1px solid var(--line); }
.times li { display:grid; grid-template-columns:48px 40px 1fr; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line); }
.times b { font:400 36px/40px var(--head); color:var(--copper); }
.times span { font-size:14px; color:var(--soft); }
.times em { font-style:normal; }
@media (min-width:1024px) { .location { grid-template-columns:7fr 5fr; gap:64px; align-items:start; } }

/* Amenities */
.amenities { margin-top:var(--section); }
.amen-grid { display:grid; gap:24px; margin-top:32px; }
@media (min-width:768px) {
  .amen-head { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
  .amen-head .body { margin-top:0; }
  .amen-grid { grid-template-columns:1fr 1fr; }
  .amen-main { grid-column:1 / -1; }
}

/* Payment */
.payment { display:grid; gap:32px; margin-top:var(--section); }
.split { font:400 112px/112px var(--head); letter-spacing:-.02em; white-space:nowrap; }
.split i { font-style:normal; color:var(--copper); padding:0 4px; }
.plan { border-top:1px solid var(--line); }
.plan li { display:grid; grid-template-columns:80px 1fr; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line); }
.plan b { font-weight:500; color:var(--copper); }
.plan .last b { font:400 36px/40px var(--head); }
@media (min-width:1024px) {
  .payment { grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
  .split { font-size:160px; line-height:160px; }
}

/* Questions */
.faq { display:grid; gap:32px; margin-top:var(--section); }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { min-height:56px; padding:16px 0; font-weight:500; cursor:pointer; }
details p { padding-bottom:16px; max-width:36em; color:var(--soft); }
@media (min-width:1024px) { .faq { grid-template-columns:5fr 7fr; gap:64px; } }

/* Close and footer */
.foot { margin-top:var(--section); border-top:1px solid var(--line); padding:32px 0 48px; font-size:14px; line-height:20px; color:var(--soft); }
.foot-grid { display:grid; gap:24px; }
.foot-brand { display:flex; gap:16px; align-items:flex-end; }
.foot-brand .logo { width:106px; height:80px; object-fit:contain; }
.foot-permit img { width:160px; height:160px; }
.foot-permit p { margin-top:4px; }
.foot-legal p + p { margin-top:8px; }
@media (min-width:768px) { .foot-grid { grid-template-columns:auto auto 1fr; gap:48px; align-items:end; } }
@media (min-width:768px) and (max-width:1023px) { .foot-legal { grid-column:1 / -1; } }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .step { animation:none; } .progress-bar { transition:none; } }
