@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&f[]=boska@500,600&display=swap");

:root {
  --font-body: "Satoshi", Arial, sans-serif;
  --font-display: "Boska", Georgia, serif;
  --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.04rem + 0.35vw, 1.375rem);
  --text-xl: clamp(1.75rem, 1.4rem + 1.1vw, 2.5rem);
  --text-hero: clamp(2.75rem, 1.4rem + 3.6vw, 5.125rem);
  --text-price: clamp(1.6rem, 1.13rem + 1.8vw, 3.25rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --color-bg: oklch(0.98 0.007 85);
  --color-surface: oklch(1 0 0);
  --color-surface-offset: oklch(0.955 0.009 85);
  --color-primary: oklch(0.37 0.075 252);
  --color-primary-hover: oklch(0.28 0.06 252);
  --color-primary-highlight: oklch(0.91 0.025 252);
  --color-text: oklch(0.24 0.025 252);
  --color-text-muted: oklch(0.46 0.025 252);
  --color-text-inverse: oklch(0.99 0.003 85);
  --color-rule: oklch(0.24 0.025 252 / 0.16);
  --color-rule-inverse: oklch(0.99 0.003 85 / 0.24);
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-full: 999px;
  --transition-interactive: 160ms ease;
  --content-wide: 1240px;
}

a { color: var(--color-primary); text-underline-offset: 0.2em; }
a:hover { color: var(--color-primary-hover); }
p + p { margin-top: var(--space-4); }
strong { font-weight: 700; }
.container { width: min(calc(100% - var(--space-16)), var(--content-wide)); margin-inline: auto; }
.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.muted { color: var(--color-text-muted); }
.source { font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.caption { font-size: var(--text-xs); color: var(--color-text-muted); }
.skip { position: absolute; top: -100px; left: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface); z-index: 100; }
.skip:focus { top: var(--space-4); }

.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-rule); }
.header-inner { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding-block: var(--space-4); }
.brand { display: flex; align-items: center; gap: var(--space-6); text-decoration: none; }
.brand img { width: 184px; height: 86px; object-fit: contain; background: var(--color-surface); }
.brokerage { padding-left: var(--space-6); border-left: 1px solid var(--color-rule); font-size: var(--text-xs); letter-spacing: 0.12em; line-height: 1.5; font-weight: 700; }
.brokerage span { display: block; font-weight: 500; letter-spacing: 0.07em; }
.header-meta { text-align: right; font-size: var(--text-xs); color: var(--color-text-muted); }
.header-meta b { display: block; color: var(--color-primary); font-weight: 700; margin-bottom: var(--space-1); }
.section-nav { position: sticky; top: 0; z-index: 20; background: var(--color-bg); border-bottom: 1px solid var(--color-rule); }
.nav-inner { display: flex; align-items: center; gap: var(--space-8); min-height: 58px; }
.nav-inner a { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); text-decoration: none; min-height: 48px; display: flex; align-items: center; }
.nav-inner a:hover { color: var(--color-primary); }
.nav-inner .nav-contact { margin-left: auto; color: var(--color-primary); }

.hero { padding-block: var(--space-12) var(--space-10); }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.edition { color: var(--color-text-muted); font-size: var(--text-xs); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: var(--space-12); align-items: center; }
.hero h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-hero); letter-spacing: -0.045em; line-height: 1.02; color: var(--color-primary); }
.hero-location { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-base); }
.mobile-evaluation { display: none; }
.hero-intro { margin-top: var(--space-6); max-width: 46ch; }
.property-figure { margin: 0; }
.property-figure img { width: 100%; height: 390px; object-fit: cover; object-position: center 45%; background: var(--color-surface-offset); }
.property-figure figcaption { margin-top: var(--space-2); }
.valuation { margin-top: var(--space-10); padding: var(--space-8) var(--space-10); background: var(--color-primary); color: var(--color-text-inverse); display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-10); align-items: center; }
.valuation > div { min-width: 0; }
.valuation .eyebrow { color: var(--color-text-inverse); opacity: 0.86; }
.value-price { font-size: var(--text-price); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; margin-top: var(--space-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.valuation-note { font-size: var(--text-xs); margin-top: var(--space-3); color: var(--color-text-inverse); opacity: 0.86; max-width: 68ch; }
.launch-price { padding-left: var(--space-8); border-left: 1px solid var(--color-rule-inverse); }
.launch-price strong { display: block; font-size: var(--text-xl); margin-block: var(--space-2); line-height: 1.15; font-variant-numeric: tabular-nums; }
.launch-price p { font-size: var(--text-sm); }
.hero-disclaimer { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); max-width: none; }

.section { padding-block: var(--space-16); border-top: 1px solid var(--color-rule); }
.section-title { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: var(--space-12); margin-bottom: var(--space-10); align-items: start; }
.section-title h2 { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); font-weight: 600; margin-top: var(--space-3); letter-spacing: -0.02em; }
.section-title > p { max-width: 64ch; padding-top: var(--space-4); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.fact { padding: var(--space-6); border-right: 1px solid var(--color-rule); }
.fact:first-child { padding-left: 0; }
.fact:last-child { border: 0; }
.fact dt { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.fact dd { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); }
.fact small { display: block; font-size: var(--text-xs); font-weight: 400; margin-top: var(--space-1); }
.property-notes { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-12); margin-top: var(--space-8); }
.property-notes h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.property-notes p { max-width: 67ch; }
.historical { background: var(--color-surface-offset); padding: var(--space-6); }
.historical strong { display: block; color: var(--color-primary); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.historical p { font-size: var(--text-sm); }

.comp-overview { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-12); padding: var(--space-8); background: var(--color-surface-offset); margin-bottom: var(--space-10); }
.comp-overview h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--color-primary); margin-bottom: var(--space-4); }
.comp-overview p { font-size: var(--text-sm); }
.comparison-chart { --plot-width: 100%; position: relative; padding-block: var(--space-2); }
.chart-band { position: absolute; top: var(--space-2); bottom: var(--space-8); left: 65%; width: 17%; background: var(--color-primary-highlight); }
.chart-row { position: relative; padding-bottom: var(--space-4); min-height: 54px; }
.chart-row .chart-label { font-size: var(--text-xs); display: flex; gap: var(--space-2); justify-content: space-between; margin-bottom: var(--space-2); }
.chart-track { position: relative; height: 4px; background: var(--color-rule); }
.chart-dot { position: absolute; left: var(--point); top: -4px; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--color-primary); transform: translateX(-50%); }
.chart-axis { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-muted); }
.chart-key { display: flex; align-items: center; font-size: var(--text-xs); margin-top: var(--space-4); gap: var(--space-2); }
.key-swatch { width: 20px; height: 14px; background: var(--color-primary-highlight); border: 1px solid var(--color-rule); flex-shrink: 0; }
.comp-table th { text-align: left; padding: var(--space-4); border-bottom: 1px solid var(--color-primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.comp-table th:first-child, .comp-table td:first-child { padding-left: 0; }
.comp-table td { padding: var(--space-6) var(--space-4); border-bottom: 1px solid var(--color-rule); vertical-align: top; font-size: var(--text-sm); }
.comp-table td:nth-child(1) { width: 22%; }
.comp-table td:nth-child(2) { width: 17%; }
.comp-table td:nth-child(3) { width: 23%; }
.comp-table td:nth-child(4) { width: 38%; }
.comp-address { display: block; color: var(--color-primary); font-weight: 700; margin-bottom: var(--space-2); }
.comp-tag { font-size: var(--text-xs); color: var(--color-text-muted); }
.sale-price { display: block; color: var(--color-primary); font-weight: 700; font-size: var(--text-lg); font-variant-numeric: tabular-nums; line-height: 1.3; }
.comp-table small { display: block; font-size: var(--text-xs); margin-top: var(--space-2); color: var(--color-text-muted); }
.cell-source { display: block; margin-top: var(--space-2); }
.table-note { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.competition { margin-top: var(--space-10); display: grid; grid-template-columns: 0.65fr 1.35fr; gap: var(--space-12); padding-block: var(--space-8); border-bottom: 1px solid var(--color-rule); }
.competition h3 { font-size: var(--text-lg); margin-top: var(--space-2); }
.competition p { font-size: var(--text-sm); }

.pricing-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-12); }
.price-options { border-top: 1px solid var(--color-rule); }
.price-option { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--space-6); padding-block: var(--space-6); border-bottom: 1px solid var(--color-rule); }
.price-option h3 { font-size: var(--text-lg); color: var(--color-primary); }
.price-option small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.price-option p { font-size: var(--text-sm); }
.recommendation { background: var(--color-primary); color: var(--color-text-inverse); padding: var(--space-8); align-self: start; }
.recommendation h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; margin-block: var(--space-4); }
.recommendation p { font-size: var(--text-sm); }
.recommendation .caption { color: var(--color-text-inverse); opacity: 0.86; border-top: 1px solid var(--color-rule-inverse); padding-top: var(--space-5); margin-top: var(--space-6); }

.timing-section { background: var(--color-surface-offset); }
.timing-section .section-title { margin-bottom: var(--space-8); }
.calendar-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-1); margin-bottom: var(--space-10); background: var(--color-bg); }
.calendar-period { padding: var(--space-6); background: var(--color-surface); }
.calendar-period.primary { background: var(--color-primary); color: var(--color-text-inverse); }
.calendar-period h3 { font-size: var(--text-lg); margin-block: var(--space-2); }
.calendar-period p { font-size: var(--text-sm); }
.timeline { margin-left: var(--space-2); padding-left: var(--space-8); border-left: 1px solid var(--color-rule); }
.timeline li { position: relative; display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--space-10); padding-block: 0 var(--space-8); }
.timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--space-8) - 5px); top: 7px; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-primary); }
.timeline time { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.timeline h3 { font-size: var(--text-lg); }
.timeline p { font-size: var(--text-sm); }
.timeline li:last-child { padding-bottom: 0; }
.timing-footnote { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-text-muted); }

.market-perspective { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: var(--space-12); }
.market-perspective h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--color-primary); margin-block: var(--space-3) var(--space-4); }
.perspective-text { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.market-perspective .caption { margin-top: var(--space-6); max-width: 76ch; }
.evidence { background: var(--color-surface-offset); padding: var(--space-6) var(--space-8); margin-top: var(--space-12); }
details > summary { cursor: pointer; min-height: 48px; display: list-item; align-content: center; font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); }
.evidence-body { padding-top: var(--space-6); }
.evidence-body p, .evidence-body li { font-size: var(--text-sm); max-width: 88ch; }
.evidence-body ul { padding-left: var(--space-5); margin-block: var(--space-6); }
.evidence-body li + li { margin-top: var(--space-3); }
.evidence-links { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.evidence-link { padding-top: var(--space-4); border-top: 1px solid var(--color-rule); }
.evidence-link > div { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; }
.evidence-link a { font-size: var(--text-sm); font-weight: 500; }
.source-url { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; user-select: text; }
.copy-source { flex-shrink: 0; min-height: 44px; padding-inline: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-rule); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.copy-source:hover { background: var(--color-primary-highlight); }
#copy-status { min-height: 24px; font-size: var(--text-xs); margin-top: var(--space-3); color: var(--color-primary); }

.team-section { border-top: 1px solid var(--color-rule); padding-top: var(--space-16); }
.team-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-12); align-items: center; }
.team-layout h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--color-primary); margin-block: var(--space-3) var(--space-6); }
.team-layout > figure img { width: 100%; aspect-ratio: 1.5; object-fit: cover; background: var(--color-surface-offset); }
.team-contact { display: flex; gap: var(--space-5); align-items: center; }
.team-contact img { width: 76px; height: 100px; object-fit: cover; object-position: 50% 28%; background: var(--color-surface-offset); }
.team-contact h3 { font-size: var(--text-lg); }
.team-contact p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-5); text-decoration: none; font-size: var(--text-sm); font-weight: 700; background: var(--color-primary); color: var(--color-text-inverse); }
.button:hover { background: var(--color-primary-hover); color: var(--color-text-inverse); }
.button.secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-rule); }
.button.secondary:hover { background: var(--color-primary-highlight); }
.contact-email { font-size: var(--text-sm); display: inline-block; margin-top: var(--space-4); overflow-wrap: anywhere; }
.team-qualifier { font-size: var(--text-xs); margin-top: var(--space-4); color: var(--color-text-muted); max-width: 50ch; }
.team-layout figcaption { margin-top: var(--space-2); }
.site-footer { margin-top: var(--space-12); padding-block: var(--space-6); border-top: 1px solid var(--color-rule); display: flex; justify-content: space-between; gap: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); }
.site-footer p { max-width: 85ch; }
.site-footer a { white-space: nowrap; }
.img-fallback { background: var(--color-surface-offset); padding: var(--space-8); min-height: 180px; color: var(--color-text-muted); font-size: var(--text-sm); display: flex; align-items: center; justify-content: center; }

@media (min-width: 1500px) {
  .property-figure img { height: 430px; }
}

@media (max-width: 1000px) {
  .container { width: min(calc(100% - var(--space-10)), var(--content-wide)); }
  .hero-grid { gap: var(--space-8); }
  .hero h1 { font-size: clamp(2.75rem, 6vw, 4rem); }
  .property-figure img { height: 335px; }
  .valuation { gap: var(--space-6); padding: var(--space-8); }
  .section-title, .competition, .market-perspective { grid-template-columns: 1fr 1.6fr; gap: var(--space-8); }
  .pricing-layout, .team-layout { gap: var(--space-8); }
  .comp-overview { grid-template-columns: 1fr 1.3fr; gap: var(--space-8); }
}

@media (max-width: 720px) {
  .container { width: calc(100% - var(--space-10)); }
  .header-inner { min-height: 88px; gap: var(--space-4); }
  .brand { gap: var(--space-3); }
  .brand img { width: 142px; height: 67px; }
  .brokerage { padding-left: var(--space-3); }
  .header-meta { display: none; }
  .nav-inner { gap: var(--space-5); min-height: 52px; justify-content: space-between; }
  .nav-inner a { font-size: var(--text-xs); min-height: 48px; }
  .nav-inner .nav-contact { margin-left: 0; }
  .hero { padding-top: var(--space-8); }
  .hero-top { margin-bottom: var(--space-5); }
  .edition { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero h1 { font-size: var(--text-hero); max-width: 11ch; }
  .hero-intro { margin-top: var(--space-4); }
  .hero-location { margin-top: var(--space-3); }
  .mobile-evaluation { display: grid; gap: var(--space-1); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-rule); color: var(--color-primary); }
  .mobile-evaluation span { font-size: var(--text-xs); }
  .mobile-evaluation strong { font-size: clamp(1.3rem, 6.4vw, 1.75rem); line-height: 1.3; letter-spacing: -0.025em; white-space: nowrap; }
  .property-figure img { height: auto; aspect-ratio: 1.4; }
  .valuation { grid-template-columns: 1fr; margin-top: var(--space-6); padding: var(--space-6); gap: var(--space-6); }
  .value-price { font-size: clamp(1.35rem, 6.6vw, 2.5rem); white-space: nowrap; letter-spacing: -0.025em; }
  .launch-price { border-left: 0; border-top: 1px solid var(--color-rule-inverse); padding-left: 0; padding-top: var(--space-5); display: block; }
  .launch-price .eyebrow { line-height: 1.6; }
  .launch-price strong { text-align: left; font-size: var(--text-xl); }
  .launch-price p { margin-top: var(--space-2); }
  .section { padding-block: var(--space-10); }
  .section-title, .property-notes, .comp-overview, .competition, .pricing-layout, .market-perspective, .team-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .section-title { margin-bottom: var(--space-6); }
  .section-title > p { padding-top: 0; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact { padding: var(--space-5) var(--space-4); }
  .fact:first-child { padding-left: var(--space-4); }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--color-rule); }
  .comp-overview { padding: var(--space-6); margin-bottom: var(--space-6); }
  .comp-table thead { display: none; }
  .comp-table, .comp-table tbody, .comp-table tr { display: block; }
  .comp-table tr { padding-block: var(--space-6); border-bottom: 1px solid var(--color-rule); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .comp-table td { padding: 0; border: 0; display: block; font-size: var(--text-sm); }
  .comp-table td:nth-child(1), .comp-table td:nth-child(2), .comp-table td:nth-child(3), .comp-table td:nth-child(4) { width: auto; }
  .comp-table td:nth-child(2) { text-align: right; }
  .comp-table td:nth-child(3), .comp-table td:nth-child(4) { grid-column: 1 / -1; }
  .comp-table td:nth-child(3) { background: var(--color-surface-offset); padding: var(--space-4); }
  .comp-table small { display: inline; margin-left: var(--space-1); }
  .comp-table td:nth-child(2) small { display: block; margin-left: 0; }
  .comp-table td:nth-child(2) .cell-source { display: block; }
  .comp-table td:nth-child(3) small { display: block; margin-left: 0; margin-top: var(--space-1); }
  .cell-source { display: inline; }
  .competition { margin-top: var(--space-6); }
  .price-option { grid-template-columns: 1fr; gap: var(--space-3); }
  .price-option > div { display: flex; gap: var(--space-4); justify-content: space-between; align-items: center; }
  .price-option small { margin-top: 0; }
  .recommendation { padding: var(--space-6); }
  .calendar-strip { grid-template-columns: 1fr; }
  .calendar-period { padding: var(--space-5) var(--space-6); }
  .timeline { padding-left: var(--space-6); }
  .timeline li { grid-template-columns: 1fr; gap: var(--space-3); padding-bottom: var(--space-8); }
  .timeline li::before { left: calc(-1 * var(--space-6) - 5px); }
  .market-perspective { gap: var(--space-4); }
  .perspective-text { font-size: var(--text-xl); }
  .evidence { padding: var(--space-4) var(--space-5); margin-top: var(--space-8); }
  .evidence-link > div { align-items: flex-start; }
  .team-section { padding-top: var(--space-10); }
  .team-layout { gap: var(--space-8); }
  .site-footer { flex-direction: column; margin-top: var(--space-8); gap: var(--space-4); }
}

@media print {
  :root { --text-base: 10pt; --text-sm: 9pt; --text-xs: 8pt; --text-xl: 22pt; }
  .container { width: 100%; }
  .section-nav, .contact-actions, .copy-source, .site-footer > a { display: none; }
  .site-header { border-bottom: 1px solid var(--color-rule); }
  .hero, .section { padding-block: var(--space-6); }
  .valuation { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .hero h1 { font-size: 36pt; }
  .property-figure img { height: 230px; }
  .comp-overview { display: none; }
  .section-title { gap: var(--space-6); margin-bottom: var(--space-6); }
  .comp-table tr, .price-option, .timeline li, .team-layout { break-inside: avoid; }
  .evidence { padding: 0; }
  .evidence-body { display: block; }
  a { color: inherit; }
}