/* House 24 — site styles (plain CSS, no build step).
   Rename the file (site.vN.css) when you change it: /assets/* is cached for a year. */

/* ---------- Fonts: self-hosted variable WOFF2, Latin subset ---------- */
@font-face {
	font-family: "Inter";
	src: url("/assets/fonts/inter-latin-v20.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	src: url("/assets/fonts/fraunces-latin-v38.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback so the swap to Inter doesn't shift the layout (CLS). */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	size-adjust: 107.4%;
	ascent-override: 90.2%;
	descent-override: 22.48%;
	line-gap-override: 0%;
}

@view-transition { navigation: auto; }

/* ---------- Tokens ---------- */
:root {
	color-scheme: light dark;
	--bg: light-dark(#f6f3ee, #0f1312);
	--surface: light-dark(#fffdf9, #171c1a);
	--surface-2: light-dark(#efe9df, #1f2624);
	--text: light-dark(#1b2120, #ece8e1);
	--muted: light-dark(#5b6461, #a5ada9);
	--line: light-dark(#e2dbcf, #2a3330);
	--brand: light-dark(#1d3b33, #9fd1c0);
	--brand-ink: light-dark(#f6f3ee, #0f1f1a);
	--accent: light-dark(#a8691a, #e6ad55);
	--focus: #2f7dd1;
	--radius: 18px;
	--radius-lg: 28px;
	--shadow: 0 1px 2px rgb(0 0 0 / .05), 0 12px 32px rgb(0 0 0 / .08);
	--wrap: min(1240px, 100% - 40px);
	--font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--header-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); accent-color: var(--brand); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); font-variation-settings: "opsz" 144; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); font-variation-settings: "opsz" 96; }
h3 { font-size: 1.3rem; font-variation-settings: "opsz" 36; }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { width: var(--wrap); margin-inline: auto; }
.muted { color: var(--muted); }
.eyebrow { font: 600 .78rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 58ch; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 200; background: var(--surface); padding: 10px 16px; border-radius: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
	background: var(--brand); color: var(--brand-ink); font: 600 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
	transition: transform .2s ease, filter .2s ease;
	&:hover { filter: brightness(1.08); transform: translateY(-1px); }
	&.ghost { background: transparent; color: inherit; border-color: currentColor; }
	&.light { background: #fff; color: #14201c; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 100; height: var(--header-h);
	background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--line); view-transition-name: site-header;
	.wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.25rem/1 var(--font-display); letter-spacing: -.01em;
	img { width: 34px; height: 34px; } }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0;
	a { display: block; padding: 9px 14px; border-radius: 999px; text-decoration: none; font-size: .95rem; font-weight: 500; opacity: .82; }
	a:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
	a[aria-current="page"] { opacity: 1; background: var(--brand); color: var(--brand-ink); }
}
.header-cta { padding: 11px 18px; font-size: .92rem; }
.menu-button { display: none; background: none; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: 9px 16px; font: 600 .92rem var(--font-body); cursor: pointer; }

/* Mobile menu: native Popover API — no JavaScript needed to open, close, or dismiss it. */
.mobile-menu {
	margin: 0; inset: var(--header-h) 0 auto 0; width: 100%; max-width: none; border: 0; border-bottom: 1px solid var(--line);
	background: var(--bg); color: var(--text); padding: 12px 20px 24px; box-shadow: var(--shadow);
	ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
	a { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; font-size: 1.1rem; }
	a[aria-current="page"] { background: var(--surface-2); font-weight: 600; }
}

/* Home: header floats over the hero video, then turns solid once the hero scrolls away
   (site.js toggles .scrolled with an IntersectionObserver, which works in every browser). */
.home .site-header { position: fixed; inset: 0 0 auto 0; color: #fff; border-bottom-color: transparent;
	background: linear-gradient(rgb(0 0 0 / .45), transparent); backdrop-filter: none;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.home .site-header.scrolled { color: var(--text); background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom-color: var(--line); backdrop-filter: saturate(1.4) blur(14px); }

/* ---------- Hero (video) ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2;
	img, video { width: 100%; height: 100%; object-fit: cover; }
	video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
	video.playing { opacity: 1; }
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgb(5 12 10 / .78), rgb(5 12 10 / .15) 55%, rgb(5 12 10 / .35)); }
.hero-content { padding-block: 120px 72px; }
.hero h1 { max-width: 14ch; }
.hero .lead { color: rgb(255 255 255 / .86); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 32px; padding: 0; list-style: none; font-weight: 500;
	li { display: flex; align-items: center; gap: 8px; }
	svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
}
.video-toggle { position: absolute; right: 20px; bottom: 20px; background: rgb(0 0 0 / .45); color: #fff; border: 1px solid rgb(255 255 255 / .4);
	border-radius: 999px; padding: 8px 14px; font: 600 .85rem var(--font-body); cursor: pointer; backdrop-filter: blur(6px); }
.video-toggle[hidden] { display: none; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section.alt { background: var(--surface-2); }
.section-head { max-width: 64ch; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }
.page-hero { padding-block: clamp(56px, 8vw, 104px) 24px; }

.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.split.reverse > :first-child { order: 2; }
.rounded { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.rounded img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.price-card { margin-top: 28px; display: grid; grid-template-columns: repeat(3, auto); gap: 6px 32px; padding: 22px 26px; border-radius: var(--radius);
	background: var(--surface); border: 1px solid var(--line); width: fit-content;
	dt { color: var(--muted); font-size: .85rem; } dd { margin: 0; font: 600 1.35rem/1.2 var(--font-display); }
	div { display: grid; gap: 4px; }
}

/* Stats band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.stat { background: var(--surface); padding: 28px; display: grid; gap: 4px;
	b { font: 600 clamp(1.8rem, 3vw, 2.6rem)/1 var(--font-display); } span { color: var(--muted); } }

/* Bento grid of highlights (container queries adapt each card to its own size). */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 240px; gap: 16px; }
.tile { position: relative; border-radius: var(--radius); overflow: hidden; container-type: inline-size; color: #fff; background: var(--surface-2);
	img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
	&:hover img { transform: scale(1.04); }
	&::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .62), transparent 55%); }
	.tile-text { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 20px 22px; }
	h3 { margin: 0 0 4px; } p { margin: 0; opacity: .88; font-size: .95rem; }
}
.tile.wide { grid-column: span 4; grid-row: span 2; }
.tile.tall { grid-column: span 2; grid-row: span 2; }
.tile.half { grid-column: span 3; }
@container (max-width: 360px) { .tile .tile-text p { display: none; } }

/* Horizontal scroll-snap carousel */
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 520px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: 14px; scrollbar-width: thin; overscroll-behavior-x: contain;
	figure { margin: 0; scroll-snap-align: start; }
	img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
	figcaption { color: var(--muted); font-size: .92rem; padding-top: 10px; }
}

/* Agent + testimonial */
.agent { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.avatar { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 600 1.5rem var(--font-display); }
blockquote { margin: 0; font: 400 clamp(1.3rem, 2.4vw, 1.8rem)/1.4 var(--font-display); font-style: italic; text-wrap: balance; }
blockquote footer { font: 500 1rem var(--font-body); font-style: normal; color: var(--muted); margin-top: 14px; }

.cta-band { border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 72px); background: var(--brand); color: var(--brand-ink); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
	h2 { margin: 0; } .btn { background: var(--brand-ink); color: var(--brand); } }

/* ---------- Gallery + lightbox ---------- */
.gallery { columns: 3 320px; column-gap: 16px; }
.gallery figure { margin: 0 0 16px; break-inside: avoid; }
.gallery button { all: unset; display: block; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; width: 100%; }
.gallery button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.gallery img { width: 100%; transition: transform .4s ease; }
.gallery figure:nth-child(3n + 1) img { aspect-ratio: 4 / 5; object-fit: cover; }
.gallery button:hover img { transform: scale(1.03); }
.gallery figcaption { color: var(--muted); font-size: .92rem; padding: 8px 2px 0; }
dialog.lightbox { width: min(1600px, 96vw); max-width: none; max-height: 96vh; border: 0; padding: 0; background: transparent; color: #fff; overflow: visible; }
dialog.lightbox::backdrop { background: rgb(6 9 8 / .92); }
.lightbox img { width: 100%; max-height: 84vh; object-fit: contain; border-radius: 10px; }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px;
	button { background: rgb(255 255 255 / .14); color: #fff; border: 0; border-radius: 999px; padding: 9px 16px; font: 500 .95rem var(--font-body); cursor: pointer; }
	button:hover { background: rgb(255 255 255 / .24); } }

/* ---------- Floor plan ---------- */
.plan-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
	.room { fill: var(--surface-2); stroke: var(--text); stroke-width: 3; cursor: pointer; transition: fill .15s ease; }
	.room:is(:hover, :focus) { fill: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); outline: none; }
	.room[aria-pressed="true"] { fill: color-mix(in srgb, var(--accent) 40%, var(--surface-2)); }
	text { fill: var(--text); font: 600 15px var(--font-body); pointer-events: none; }
	.dim { fill: var(--muted); font-weight: 400; font-size: 12px; }
}
.room-panel { position: sticky; top: calc(var(--header-h) + 20px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
	img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
	.room-body { padding: 22px 24px; }
	dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 14px 0 0; }
	dt { color: var(--muted); } dd { margin: 0; font-weight: 600; }
}

/* ---------- Neighbourhood ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 16px; font: 500 .92rem var(--font-body); cursor: pointer;
	&[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } }
.area-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
.map { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.map .pin { transition: opacity .25s ease; } .map .pin.dim { opacity: .12; }
.amenities { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.amenities li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.amenities li[hidden] { display: none; }
.amenities small { display: block; color: var(--muted); }
.amenities .dist { font-weight: 700; white-space: nowrap; }
.wide-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-lg); }

/* ---------- Inspections ---------- */
.table-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
.badge { display: inline-block; font-size: .8rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); }
.badge.open { background: color-mix(in srgb, #3c9a5f 22%, transparent); color: light-dark(#21683b, #86dca4); }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; }
.faq details p { color: var(--muted); }
.form { display: grid; gap: 16px; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.form :is(input, select, textarea) { font: 400 1rem var(--font-body); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.form :is(input, select, textarea):user-invalid { border-color: #c8553d; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-status { min-height: 1.5em; font-weight: 600; }
/* :has() — highlight the form while any field is focused */
.form:has(:focus-visible) { border-color: var(--brand); }

/* ---------- Credits ---------- */
.credits { display: grid; gap: 12px; padding: 0; list-style: none; }
.credits li { padding: 16px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.credits small { display: block; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 56px 40px; color: var(--muted); font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-bottom: 36px;
	h3 { font: 600 .82rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
	ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
	a { text-decoration: none; } a:hover { color: var(--text); text-decoration: underline; } }
.footer-note { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem; }

.not-found { min-height: 70vh; display: grid; place-items: center; text-align: center; }

/* ---------- Scroll-reveal (scroll-driven, no JavaScript) ---------- */
@supports (animation-timeline: view()) {
	.reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
	@keyframes reveal { from { opacity: 0; transform: translateY(32px); } }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.nav-links, .header-cta { display: none; }
	.menu-button { display: block; }
	.split, .plan-layout, .area-layout { grid-template-columns: 1fr; }
	.split.reverse > :first-child { order: 0; }
	.stats { grid-template-columns: repeat(2, 1fr); }
	.bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
	.tile.wide, .tile.tall, .tile.half { grid-column: span 2; grid-row: span 1; }
	.tile.wide { grid-row: span 2; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.room-panel { position: static; }
	.price-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.form .row { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.hero-content { padding-block: 110px 56px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	@view-transition { navigation: none; }
}