/*
Theme Name: GoForLaunch
Author: GoForLaunch
Description: Dark, cool, instrumented theme for property and room listings, built on the GoForLaunch design system (vacuum ink surfaces, signal accent, one ember CTA per screen, Space Grotesk / IBM Plex). Includes Properties, Rooms and Amenities content types, an About page template, an inquiry form that stores every message in the dashboard, and no booking, payment or tenant-portal code.
Version: 1.11.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gfl
Tags: custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Tokens — mirrored from the GoForLaunch design system
   ========================================================================== */

:root {
	/* Vacuum: base ramp. Every surface comes from here; never pure #000. */
	--ink-1000: #08101C; --ink-950: #0D1726; --ink-900: #122033; --ink-850: #182840; --ink-800: #1F314C; --ink-700: #273B59; --ink-600: #33496B;
	/* Hull: cool greys for text and strokes */
	--slate-600: #334559; --slate-500: #43566D; --slate-400: #64798F; --slate-300: #8DA0B4; --slate-200: #B6C4D3; --slate-100: #DCE5EE; --slate-050: #EEF3F9; --white: #F7FAFF;
	/* Signal: primary accent, cold light with no hue */
	--signal-200: #F2F5F8; --signal-300: #D8E0E8; --signal-400: #B4C2CE; --signal-500: #8C9CAA; --signal-600: #5F707F; --signal-700: #3C4A57; --signal-900: #1A2129;
	--silver: var(--signal-400); --silver-dim: var(--signal-500);
	/* Ember: the only warm color, one decisive action per screen */
	--ember-300: #FFD3A0; --ember-400: #FFB870; --ember-500: #F59545; --ember-600: #D97A28;
	/* Semantic */
	--verdant-400: #4FD69C; --flare-400: #FF6B6B;
	--success: var(--verdant-400); --danger: var(--flare-400); --warning: var(--ember-500); --info: var(--signal-400);
	/* Logo */
	--logo-light: var(--signal-200); --logo-accent: var(--ember-500);

	--bg-base: var(--ink-950);
	--bg-sunken: var(--ink-1000);
	--surface-card: var(--ink-900);
	--surface-card-hover: var(--ink-850);
	--surface-overlay: var(--ink-850);
	--surface-raised: var(--ink-800);
	--text-primary: var(--white);
	--text-secondary: var(--slate-200);
	--text-muted: var(--slate-300); /* slate-400 in the spec; one rung up for contrast */
	--text-accent: var(--signal-300);
	--border-hairline: rgba(141, 160, 180, 0.14);
	--border-subtle: rgba(141, 160, 180, 0.22);
	--border-strong: rgba(141, 160, 180, 0.38);
	--accent: var(--signal-400);
	--accent-quiet: rgba(180, 194, 206, 0.12);
	--cta: var(--ember-500);
	--cta-hover: var(--ember-400);
	--cta-press: var(--ember-600);
	--on-cta: var(--ink-1000);
	--focus-ring: rgba(180, 194, 206, 0.55);

	/* Atmosphere: the only gradients allowed */
	--wash-horizon: radial-gradient(120% 80% at 50% 0%, rgba(62, 108, 182, 0.3) 0%, rgba(13, 23, 38, 0) 62%);
	--wash-scrim: linear-gradient(180deg, rgba(8, 16, 28, 0) 0%, rgba(8, 16, 28, 0.86) 78%, #08101C 100%);
	--grid-telemetry: linear-gradient(rgba(150, 178, 220, 0.09) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(150, 178, 220, 0.09) 1px, transparent 1px) 0 0 / 24px 24px;
	--scrim-dialog: rgba(8, 16, 28, 0.72);

	--shadow-1: 0 1px 2px rgba(4, 9, 18, 0.6);
	--shadow-2: 0 4px 16px -4px rgba(4, 9, 18, 0.7);
	--shadow-3: 0 14px 40px -12px rgba(4, 9, 18, 0.8);
	--shadow-4: 0 32px 80px -24px rgba(4, 9, 18, 0.9);
	--inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.05);
	--glow-cta: 0 0 0 1px rgba(245, 149, 69, 0.4), 0 8px 28px -10px rgba(245, 149, 69, 0.55);
	--ring-focus: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--focus-ring);

	--font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	--font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Type scale */
	--fs-hero: clamp(44px, 6.2vw, 84px);
	--fs-display: clamp(34px, 4.4vw, 60px);
	--fs-h1: 40px;
	--fs-h2: 30px;
	--fs-h3: 23px;
	--fs-h4: 19px;
	--fs-lead: 19px;
	--fs-body: 16px;
	--fs-ui: 15px;        /* buttons, nav, small copy beside controls */
	--fs-sm: 14px;
	--fs-xs: 12.5px;
	--fs-micro: 11px;
	/* Mono figures: rates, counts, zip codes */
	--fs-figure-sm: 18px;
	--fs-figure: 22px;
	--fs-figure-lg: 32px;

	/* Spacing: 4px base */
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;

	--gutter: 24px;
	--wrap: 1200px;
	--measure: 66ch;
	--pad-section: clamp(64px, 9vw, 128px);
	--header-h: 66px;
	/* Every page's intro block (home hero, page header): space above and below it. */
	--page-top: clamp(48px, 6vw, 80px); --page-bottom: clamp(32px, 4vw, 56px);

	--r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-pill: 999px;
	--r-badge: var(--r-xs); --r-control: var(--r-sm); --r-media: var(--r-md); --r-card: var(--r-lg); --r-panel: var(--r-xl);

	--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--t-press: 90ms var(--ease); --t: 140ms var(--ease); --t-enter: 220ms var(--ease); --t-dialog: 360ms var(--ease);
}

@media (max-width: 640px) {
	:root { --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 21px; --fs-lead: 17px; }
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg-base); color: var(--text-secondary); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
/* clip, not hidden: the closed menu drawer sits off the right edge, and this stops it widening the page without breaking the sticky header. */
body { overflow-x: clip; }
body.gfl-nav-open { overflow: hidden; }
img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

a { color: var(--text-accent); text-decoration: none; border-bottom: 1px solid rgba(216, 224, 232, 0.3); transition: color var(--t), border-color var(--t); }
a:hover { color: var(--signal-200); border-bottom-color: var(--signal-300); }
:focus-visible { outline: none; box-shadow: var(--ring-focus); }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-primary); font-weight: 600; line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
.display { font-size: var(--fs-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; }
h1 a, h2 a, h3 a, h4 a { color: inherit; border-bottom: 0; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { color: var(--text-accent); }

p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: 0.4em; }
hr { border: 0; border-top: 1px solid var(--border-hairline); margin: 3rem 0; }
blockquote { margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--r-card); background: var(--surface-card); font-family: var(--font-display); font-size: var(--fs-lead); color: var(--text-primary); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--border-hairline); }
th { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }
::selection { background: var(--signal-700); color: var(--white); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gfl-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--signal-300); color: var(--ink-1000); padding: 0.75rem 1.25rem; font-weight: 600; border: 0; border-radius: var(--r-control); }
.gfl-skip:focus { left: 1rem; top: 1rem; }

.eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-accent); }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--pad-section); position: relative; }
.section--tint { background: var(--wash-horizon), var(--bg-base); }
.section--panel { background: var(--bg-sunken); border-block: 1px solid var(--border-hairline); }

.section-head { margin-bottom: clamp(32px, 4vw, 48px); max-width: 46rem; }
.section-head__kicker { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-accent); margin-bottom: 1rem; }
.section-head__kicker::before { content: ""; width: 24px; height: 1px; background: var(--signal-400); flex: none; }
.section-head h2, .section-head h1 { font-size: var(--fs-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; }
/* Below a page header the page title is the biggest line; section headings step down to h2. */
body:not(.home) .section-head h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.02em; }
.section-head p { color: var(--text-secondary); font-size: var(--fs-lead); line-height: 1.55; margin-bottom: 0; }
.lede { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-secondary); }

/* ==========================================================================
   4. Components: buttons, badges, tags, cards, controls
   ========================================================================== */

/* Buttons: 4px radius, never pill. Labels are verb + object. */
.btn { --btn-h: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 0 18px; border: 1px solid transparent; border-radius: var(--r-sm); font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t-press); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--ring-focus); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn svg { flex: none; }
.btn--sm { --btn-h: 34px; padding: 0 12px; font-size: var(--fs-sm); }
.btn--lg { --btn-h: 52px; padding: 0 24px; font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* Primary: solid ember, ink text. One per screen. */
.btn--primary { background: var(--cta); color: var(--on-cta); box-shadow: var(--inset-hairline); }
.btn--primary:hover { background: var(--cta-hover); color: var(--on-cta); box-shadow: var(--glow-cta); }
.btn--primary:active { background: var(--cta-press); box-shadow: none; }

/* Secondary: embossed navy */
.btn--secondary { background: linear-gradient(180deg, #39475A, #1F2A38); border-color: rgba(141, 160, 180, 0.26); color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow-1); }
.btn--secondary:hover { background: linear-gradient(180deg, #425165, #243142); border-color: var(--border-strong); color: var(--white); }
.btn--secondary:active { background: linear-gradient(180deg, #2E3A4A, #1F2A38); box-shadow: inset 0 1px 2px rgba(4, 9, 18, 0.5); }

.btn--outline { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }
.btn--outline:hover { background: var(--accent-quiet); border-color: var(--signal-400); color: var(--text-primary); }

.btn--ghost { background: transparent; color: var(--text-accent); }
.btn--ghost:hover { background: var(--accent-quiet); color: var(--signal-200); }

.btn--danger { background: transparent; border-color: rgba(255, 107, 107, 0.45); color: var(--flare-400); }
.btn--danger:hover { background: rgba(255, 107, 107, 0.1); border-color: var(--flare-400); color: var(--flare-400); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Badges: mono uppercase, 22px, 2px radius */
.badge, .status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--border-subtle); border-radius: var(--r-xs); background: rgba(8, 16, 28, 0.6); font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--text-muted); white-space: nowrap; }
.badge--accent { color: var(--text-accent); border-color: var(--border-strong); background: var(--accent-quiet); }
.badge--cta { color: var(--on-cta); border-color: transparent; background: var(--cta); }
.badge--success { color: var(--verdant-400); border-color: rgba(79, 214, 156, 0.35); background: rgba(79, 214, 156, 0.08); }
.badge--danger { color: var(--flare-400); border-color: rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.08); }

/* Status badge: a badge with a signal dot */
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--slate-400); flex: none; }
/* Availability: success green, warning orange (ember), danger red. */
.status--available { color: var(--success); border-color: rgba(79, 214, 156, 0.35); }
.status--available::before { background: var(--success); box-shadow: 0 0 0 3px rgba(79, 214, 156, 0.16); }
.status--soon { color: var(--warning); border-color: rgba(245, 149, 69, 0.4); }
.status--soon::before { background: var(--warning); box-shadow: 0 0 0 3px rgba(245, 149, 69, 0.16); }
.status--leased { color: var(--danger); border-color: rgba(255, 107, 107, 0.4); }
.status--leased::before { background: var(--danger); }
/* Larger outline pill for places off a photo: no fill, the colored outline and dot carry the status. */
.status--lg { height: 32px; padding: 0 14px; gap: 10px; font-size: var(--fs-sm); background: transparent; }
.status--lg::before { width: 8px; height: 8px; }

/* Tags: pill, 30px. Amenity and filter chips only. */
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tags li { margin: 0; }
.tag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-pill); background: var(--surface-card); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; line-height: 1; white-space: nowrap; }
.tag svg { color: var(--signal-400); flex: none; }

/* Cards: hairline, 12px, shadow-1. Highlight is a silver hairline on the top edge, never a colored left border. */
.card { position: relative; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-card); box-shadow: var(--shadow-1); transition: background-color var(--t), border-color var(--t), box-shadow var(--t); }
.card--interactive:hover { background: var(--surface-card-hover); border-color: var(--border-subtle); box-shadow: var(--shadow-3); }
.card--highlight::before, .form::before, .room-aside::before { content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--signal-400), transparent); }

/* Telemetry grid: placeholders and technical panels */
.telemetry { background: var(--grid-telemetry), var(--surface-card); }

/* ==========================================================================
   5. Site header
   ========================================================================== */

.site-header { position: sticky; top: 0; z-index: 60; background: rgba(13, 23, 38, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--t-enter); }
.site-header.is-stuck { border-bottom-color: var(--border-hairline); box-shadow: var(--inset-hairline); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }

/* Lockup: the uploaded logo (Customize → Site Identity → Logo), if any, left of the wordmark; gap = a quarter of the logo's height */
.brand { --mark: 34px; display: flex; align-items: center; gap: calc(var(--mark) * 0.25); text-decoration: none; border: 0; color: var(--text-primary); }
.brand:hover { color: var(--text-primary); }
.brand__mark { display: block; width: auto; height: var(--mark); max-width: calc(var(--mark) * 4); object-fit: contain; flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1; letter-spacing: -0.02em; color: var(--logo-light); white-space: nowrap; }
.brand__name b { font-weight: 700; color: var(--logo-accent); }
/* Small phones: the previous size, so the wordmark and Menu button still fit side by side. */
@media (max-width: 419px) { .brand { --mark: 30px; } .brand__name { font-size: 1.25rem; } }
.brand a { border: 0; }

.nav { display: flex; align-items: center; gap: 12px; }
.nav ul { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; position: relative; }
.nav a { color: var(--text-secondary); font-size: var(--fs-ui); font-weight: 500; text-decoration: none; border: 0; padding-block: 0.4rem; display: inline-block; white-space: nowrap; }
.nav a:hover { color: var(--text-primary); }
/* Every top-level menu link is an outline button, the same as "Contact us". */
.nav > ul > li > a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); line-height: 1.2; transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t-press); }
/* The page you are on keeps its button lit: menu items, and "Contact us" on the contact page. */
.nav > ul > li > a:hover, .nav > ul > .current-menu-item > a, .nav > ul > .current-menu-ancestor > a { color: var(--text-primary); border-color: var(--signal-400); background: var(--accent-quiet); }
.nav > ul > li > a:active { transform: translateY(1px); }
.nav .sub-menu { display: none; position: absolute; top: 100%; left: -1rem; min-width: 210px; background: var(--ink-850); border: 1px solid var(--border-subtle); border-radius: var(--r-media); box-shadow: var(--shadow-3); padding: 6px 0; flex-direction: column; gap: 0; }
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { display: flex; }
.nav .sub-menu a { padding: 0.55rem 1rem; display: block; width: 100%; }
.nav .sub-menu a:hover { background: var(--ink-800); }
/* .nav a outranks .btn, so restore the button's own layout: inline-flex keeps the label centered in its 42px box. */
.nav a.btn { display: inline-flex; padding: 0 18px; border: 1px solid var(--border-strong); font-size: var(--fs-ui); font-weight: 500; }
.nav a.btn--outline { color: var(--text-secondary); border-color: var(--border-strong); }
.nav a.btn--outline:hover, .nav a.btn--outline.is-current { color: var(--text-primary); border-color: var(--signal-400); background: var(--accent-quiet); }

.header-cta { display: none; }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r-control); color: var(--text-primary); min-height: 44px; padding: 0.5rem 0.9rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; align-items: center; gap: 0.5rem; transition: border-color var(--t), background-color var(--t); }
.nav-toggle:hover { border-color: var(--signal-400); background: var(--accent-quiet); }
/* The header's backdrop-filter makes it the containing block for the fixed menu drawer, which would clip it to the header bar. */
body.gfl-nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-base); }

@media (min-width: 900px) {
	.header-cta { display: inline-flex; }
}

@media (max-width: 899px) {
	.nav-toggle { display: inline-flex; }
	.nav { position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); background: var(--bg-sunken); border-left: 1px solid var(--border-hairline); box-shadow: var(--shadow-4); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 96px 24px 24px; transform: translateX(100%); transition: transform 360ms var(--ease); overflow-y: auto; }
	.nav.is-open { transform: translateX(0); }
	.nav ul { flex-direction: column; align-items: stretch; gap: 12px; }
	.nav a { padding: 1rem 0; display: block; font-size: var(--fs-body); }
	.nav > ul > li > a, .nav a.btn { display: flex; width: 100%; min-height: 48px; padding: 0 18px; font-size: var(--fs-body); }
	.nav .sub-menu { position: static; display: flex; border: 0; box-shadow: none; background: transparent; padding: 0 0 0.5rem 1rem; }
	.nav .header-cta { margin-top: 12px; }
}

/* ==========================================================================
   6. Hero and room manifest
   ========================================================================== */

.hero { position: relative; }
.hero__inner { display: flex; align-items: flex-start; padding-block: var(--page-top) var(--page-bottom); }
.hero__copy { max-width: 760px; }
.hero h1 { max-width: 11ch; margin-bottom: 24px; font-size: var(--fs-hero); letter-spacing: -0.035em; line-height: 1.02; }
/* Key photos of each property, beside the headline on wide screens and under it on narrow ones. */
.hero__inner--showcase { flex-direction: column; align-items: stretch; gap: 40px; }
@media (min-width: 1000px) {
	/* The photos center on the whole text block beside them. */
	.hero__inner--showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; gap: clamp(40px, 5vw, 72px); }
}
.showcase { display: grid; gap: 16px; }
.showcase__property { margin: 0; padding: 10px; background: rgba(13, 23, 38, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--border-hairline); border-radius: var(--r-panel); box-shadow: var(--shadow-3), var(--inset-hairline); }
/* One photo at a time: the slides stack and crossfade (main.js), dots jump between them. */
.showcase__photos { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-media); overflow: hidden; background: var(--grid-telemetry), var(--ink-850); }
/* .showcase prefix: .gallery__item, later in the file, would otherwise put the slides back in the flow. */
.showcase .showcase__slide { position: absolute; inset: 0; border: 0; border-radius: 0; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.showcase .showcase__slide.is-active { opacity: 1; pointer-events: auto; }
.showcase .showcase__slide img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.showcase__dots { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; z-index: 1; }
/* 24px tap target, 8px dot. */
.showcase__dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.showcase__dot::before { content: ""; width: 8px; height: 8px; border: 1px solid rgba(247, 250, 255, 0.8); border-radius: 50%; background: rgba(8, 16, 28, 0.45); transition: background-color var(--t); }
.showcase__dot.is-active::before, .showcase__dot:hover::before { background: var(--white); }
@media (prefers-reduced-motion: reduce) { .showcase .showcase__slide { transition: none; } }
/* With several properties each tile is shorter, so two still fit beside the headline. */
.showcase:has(.showcase__property + .showcase__property) .showcase__photos { aspect-ratio: 2 / 1; }
.showcase__caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 6px 4px; }
.showcase__name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: var(--text-primary); border: 0; }
.showcase__name:hover { color: var(--text-accent); }
.hero__sub { max-width: 32ch; margin: -8px 0 24px; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; color: var(--text-primary); text-wrap: balance; }
.hero__lede { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-secondary); }

/* One background for every page (header.php). It stays put; the content scrolls over it.
   The grid is the home page's only: subpages keep just the wash, so their text sits on a plain ground. */
.backdrop { position: fixed; inset: 0; z-index: -1; background: var(--wash-horizon), var(--grid-telemetry), var(--bg-base); pointer-events: none; }
body:not(.home) .backdrop { background: var(--wash-horizon), var(--bg-base); }

.sheet { position: relative; padding: clamp(24px, 4vw, 56px); background: rgba(13, 23, 38, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--border-hairline); border-radius: var(--r-panel); box-shadow: var(--shadow-3), var(--inset-hairline); }
.home .section { padding-block: clamp(12px, 2vw, 24px); }
/* A home section without a sheet: no background of its own, the backdrop shows through between the tiles. */
.section--open { background: transparent; }
.home .section:last-of-type { padding-bottom: clamp(64px, 9vw, 128px); }

/* ==========================================================================
   7. Room rows (home + archive)
   ========================================================================== */

.rooms { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.room-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
@media (min-width: 860px) {
	.room-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
	.room-row:nth-child(even) .room-row__media { order: 2; }
}

.room-row__media { position: relative; display: block; border: 1px solid var(--border-hairline); border-radius: var(--r-card); background-color: var(--surface-card); overflow: hidden; box-shadow: var(--shadow-1); transition: border-color var(--t), box-shadow var(--t); }
a.room-row__media:hover { border-color: var(--border-subtle); box-shadow: var(--shadow-3); }
.room-row__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* A key photo that opens in the lightbox: the frame is the media box's, not the gallery button's. */
.room-row__zoom { width: 100%; border: 0; border-radius: 0; }
.room-row__media .room-row__zoom img { aspect-ratio: 4 / 3; }
/* Name with its status on one line, the rent under them. */
.room-row__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; justify-self: stretch; }

/* Properties page: one block per house, its row then its room list. */
/* minmax(0, 1fr): an auto column would grow to the filmstrip's full row of photos and stretch everything
   in the block; capped, the filmstrip scrolls inside the page width instead. */
.property-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 32px); scroll-margin-top: calc(var(--header-h) + 24px); }
/* The house's name one step up the scale from a room's (h2 size), so each block reads house first. */
.room-row__head .property-row__name { font-size: var(--fs-h2); }
.room-list__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Each room is a card like the amenity tiles (.card, .card--interactive), so the row reads as clickable. */
.room-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; grid-template-areas: "status status thumb" "name name thumb" "rate cta thumb"; gap: 8px 16px; align-items: center; margin: 0; padding: 16px clamp(16px, 2vw, 24px); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-card); box-shadow: var(--shadow-1); transition: background-color var(--t), border-color var(--t), box-shadow var(--t); }
.room-item:hover { background: var(--surface-card-hover); border-color: var(--border-subtle); box-shadow: var(--shadow-3); }
/* The whole row opens the room: the name's link stretches over it, and the reserve button sits above. */
.room-item__name::after { content: ""; position: absolute; inset: 0; }
.room-item .btn { position: relative; z-index: 1; }
.room-item__name { grid-area: name; }
.room-item__status { grid-area: status; }
.room-item__rate { grid-area: rate; }
.room-item__cta { grid-area: cta; }
/* Key photo on the far right: beside the stacked details on phones, its own last column from 760px. */
.room-item__thumb { grid-area: thumb; align-self: center; display: block; border: 1px solid var(--border-hairline); border-radius: var(--r-media); overflow: hidden; background: var(--surface-card); }
.room-item__thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.room-item:hover .room-item__thumb { border-color: var(--border-subtle); }
/* Wide: status, name and rent in three equal columns, the same in every row and every house, then the
   button in a fixed column just wide enough for "Reserve room", right-aligned beside the photo so the two
   read as one group (fixed, not auto, so "Inquire" rows line up too). Status hugs the left edge; name
   and rent sit centered, which keeps the gaps between all four even. */
@media (min-width: 760px) {
	.room-item { grid-template-columns: repeat(3, minmax(0, 1fr)) 140px 128px; grid-template-areas: "status name rate cta thumb"; gap: 8px 24px; }
	.room-item__name, .room-item__rate { justify-self: center; text-align: center; }
	.room-item__cta { justify-self: end; }
}
.room-item[hidden] { display: none; }
.room-item__name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: var(--text-primary); border: 0; }
.room-item:hover .room-item__name { color: var(--text-accent); }
.room-item:has(.room-item__name:focus-visible) { box-shadow: var(--ring-focus); }
.room-item__name:focus-visible { box-shadow: none; }
.room-item .rate { font-size: var(--fs-figure-sm); }
.room-list__empty { margin: 16px 0 0; color: var(--text-muted); }

/* Sort and filter bar above the room lists (shown by main.js). */
.room-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(32px, 4vw, 48px); padding: 16px 20px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-card); }
.room-filters[hidden] { display: none; }
.room-filters__group, .room-filters__sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.room-filters__label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.room-filters__chip { min-height: 34px; padding: 0 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-pill); background: transparent; color: var(--text-secondary); font-family: var(--font-body); font-size: var(--fs-sm); cursor: pointer; transition: border-color var(--t), background-color var(--t), color var(--t); }
.room-filters__chip:hover { border-color: var(--signal-400); color: var(--text-primary); }
.room-filters__chip[aria-pressed="true"] { border-color: var(--signal-400); background: var(--accent-quiet); color: var(--text-primary); }
.room-filters__sort select { min-height: 34px; background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--r-control); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-sm); padding: 0 32px 0 10px; }

.room-row__head { display: grid; justify-items: start; gap: 8px; border-bottom: 1px solid var(--border-hairline); padding-bottom: 16px; margin-bottom: 20px; }
.room-row__head h3 { margin: 0; }

.rate { font-family: var(--font-mono); font-size: var(--fs-figure); font-weight: 500; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); letter-spacing: 0.02em; }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 24px; margin: 24px 0 0; }
.specs div { border-top: 1px solid var(--border-hairline); padding-top: 10px; }
.specs dt { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.specs dd { margin: 0; color: var(--text-primary); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }

.room-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.room-row__link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-ui); font-weight: 600; color: var(--text-accent); border-bottom: 1px solid var(--border-strong); padding-bottom: 4px; }
.room-row__link::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.room-row__link:hover { color: var(--signal-200); border-bottom-color: var(--signal-300); }

.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r-control); color: var(--text-primary); cursor: pointer; transition: border-color var(--t), background-color var(--t), transform var(--t-press); }
.icon-btn:hover { border-color: var(--signal-400); background: var(--accent-quiet); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn[hidden] { display: none; }

/* ==========================================================================
   8. Benefits
   ========================================================================== */

.anchor-alias { position: absolute; top: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.feature { padding: clamp(24px, 3vw, 32px); }
.feature__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--accent-quiet); color: var(--signal-400); margin-bottom: 20px; }
/* An uploaded logo fills a larger, frameless square instead of the icon chip. */
.feature__icon--logo { width: 56px; height: 56px; border: 0; background: transparent; }
.amenity-logo { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.tag .amenity-logo { flex: none; }
.feature h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.feature p { margin: 0; font-size: var(--fs-ui); color: var(--text-secondary); }
/* Home amenities: compact tiles, icon beside the name. Rows size to their
   tiles, so an opened tile grows alone instead of stretching the whole grid. */
.feature-grid--amenities { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); grid-auto-rows: auto; align-items: start; gap: 12px; }
.feature-grid--amenities .feature { padding: 0; }
.feature-grid--amenities .feature__head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.feature-grid--amenities .feature__icon { margin: 0; flex: none; }
.feature-grid--amenities .feature h3 { margin: 0; font-size: var(--fs-h4); line-height: 1.3; }
.feature-grid--amenities .feature p { padding: 0 16px 16px; max-width: none; }
.feature-grid--amenities summary { cursor: pointer; list-style: none; position: relative; padding-right: 40px; }
.feature-grid--amenities summary::-webkit-details-marker { display: none; }
.feature-grid--amenities summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--signal-400); border-bottom: 2px solid var(--signal-400); transform: rotate(45deg); transition: transform var(--t-enter); }
.feature-grid--amenities details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.feature-grid--amenities summary:focus-visible { border-radius: var(--r-card); }

/* A property's facts under its page title: set off by the firmer 2px rule. */
.specs--page { margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--border-subtle); }
.specs--page dd { font-size: var(--fs-figure-sm); white-space: normal; }
.specs--page { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ==========================================================================
   9. Proximity
   ========================================================================== */

.location { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
/* Side by side, the map takes the left column; stacked, the text still comes first. */
@media (min-width: 900px) { .location { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } .location > .map-frame { order: -1; } }

.drive-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-hairline); }
.drive-list li { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--border-hairline); margin: 0; }
.drive-list__place { display: flex; align-items: center; gap: 12px; color: var(--text-primary); }
.drive-list__place svg { color: var(--signal-400); flex: none; }
.drive-list__time { font-family: var(--font-mono); color: var(--text-accent); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-sm); font-weight: 500; }

.map-frame { display: flex; border: 1px solid var(--border-hairline); border-radius: var(--r-card); background: var(--grid-telemetry), var(--surface-card); min-height: 320px; overflow: hidden; box-shadow: var(--shadow-1); }
.map-frame iframe { flex: 1; width: 100%; min-height: 380px; border: 0; filter: grayscale(0.6) invert(0.9) hue-rotate(185deg) brightness(0.9) contrast(0.95); }

/* Pin map: one ember pin per zip code. Only the tiles are darkened, so pins and popups keep their color.
   isolation keeps Leaflet's z-indexed panes under the sticky header. */
.map { flex: 1; width: 100%; min-height: 380px; position: relative; z-index: 0; isolation: isolate; background: transparent; font-family: var(--font-body); }
.map .leaflet-tile-pane { filter: grayscale(0.6) invert(0.9) hue-rotate(185deg) brightness(0.9) contrast(0.95); }
.map a { border: 0; }
.map__noscript { margin: auto; padding: 24px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); }
.map-pin span { position: relative; display: block; width: 22px; height: 22px; margin: 1px 3px; background: var(--cta); border: 2px solid var(--ink-1000); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: var(--shadow-2); }
.map-pin span::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--ink-1000); }
.map .leaflet-popup-content-wrapper, .map .leaflet-popup-tip { background: var(--surface-overlay); color: var(--text-primary); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-3); }
.map .leaflet-popup-content-wrapper { border-radius: var(--r-media); }
.map .leaflet-popup-content { margin: 12px 16px; display: grid; gap: 6px; font-size: var(--fs-sm); }
.map .leaflet-popup-content a { color: var(--text-accent); font-weight: 600; }
.map .leaflet-popup-content a:hover { color: var(--signal-200); }
.map-popup__zip { margin: 0; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--text-muted); }
.map a.leaflet-popup-close-button { color: var(--text-muted); }
.map .leaflet-bar a { background: var(--surface-card); color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); }
.map .leaflet-bar a:hover { background: var(--surface-card-hover); }
.map.leaflet-container .leaflet-control-attribution { background: rgba(8, 16, 28, 0.75); color: var(--text-muted); }
.map.leaflet-container .leaflet-control-attribution a { color: var(--text-secondary); }

/* ==========================================================================
   10. FAQ — the FAQ page's questions: Details blocks in a Group with the
   class "faq"
   ========================================================================== */

.faq { border-top: 1px solid var(--border-hairline); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--border-hairline); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.35; transition: color var(--t); }
.faq summary:hover { color: var(--signal-200); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 9px; height: 9px; border-right: 2px solid var(--signal-400); border-bottom: 2px solid var(--signal-400); transform: rotate(45deg); transition: transform var(--t-enter); }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }

/* ==========================================================================
   11. Inquiry form
   ========================================================================== */

.inquiry { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) { .inquiry { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); } }
.inquiry__aside p { color: var(--text-secondary); }
.inquiry__apply { margin-top: 28px; }
.entry-content--aside { padding-bottom: 16px; }

/* Summary rail: the room being asked about */
.summary-rail { margin-top: 28px; }
.summary { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px; align-items: center; }
.summary[hidden] { display: none; }
.summary__media { align-self: stretch; overflow: hidden; border-radius: var(--r-md); background: var(--grid-telemetry), var(--ink-850); }
.summary__media img { width: 100%; height: 100%; min-height: 96px; object-fit: cover; }
.summary .eyebrow { margin: 0 0 4px; }
.summary h3 { font-size: var(--fs-h4); margin: 0 0 8px; }
.summary__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.summary__meta .rate { font-size: var(--fs-figure-sm); }
.summary .specs { margin-top: 12px; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.summary .specs dd { font-size: var(--fs-sm); }

.contact-list { list-style: none; margin: 28px 0 0; padding: 0; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border-hairline); margin: 0; }
.contact-list svg { color: var(--signal-400); flex: none; margin-top: 3px; }

.form { position: relative; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-card); box-shadow: var(--shadow-2); padding: clamp(24px, 3.5vw, 40px); }
.form__grid { display: grid; gap: 18px; }
@media (min-width: 620px) { .form__grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.field label { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-accent); margin-bottom: 8px; }
.field .req { color: var(--ember-400); }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--r-control); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); padding: 10px 12px; transition: border-color var(--t), box-shadow var(--t); }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-400); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate-300); }
.field textarea { min-height: 140px; resize: vertical; }
/* The browser's own date picker, in the dark scheme to match. */
.field input[type="date"] { color-scheme: dark; }
.field__hint { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--signal-400); box-shadow: 0 0 0 3px rgba(180, 194, 206, 0.2); outline: none; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--signal-400) 50%), linear-gradient(135deg, var(--signal-400) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field--hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Checkbox, radio, switch: 18px, silver when on */
input[type="checkbox"], input[type="radio"] { appearance: none; width: 18px; height: 18px; margin: 0; flex: none; vertical-align: middle; background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--r-xs); display: inline-grid; place-content: center; cursor: pointer; transition: background-color var(--t), border-color var(--t); }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; background: var(--ink-1000); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform var(--t-press); }
input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-1000); transform: scale(0); transition: transform var(--t-press); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--signal-400); border-color: var(--signal-400); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: 0.4; cursor: not-allowed; }
input[type="checkbox"].switch { width: 32px; height: 18px; border-radius: var(--r-pill); place-content: center start; padding: 2px; }
input[type="checkbox"].switch::before { width: 12px; height: 12px; border-radius: 50%; clip-path: none; background: var(--slate-300); transform: none; transition: transform var(--t), background-color var(--t); }
input[type="checkbox"].switch:checked::before { background: var(--ink-1000); transform: translateX(14px); }

.form__consent { font-size: var(--fs-xs); color: var(--text-muted); margin: 20px 0 0; max-width: none; }
.form__submit { margin-top: 24px; }

.notice { border: 1px solid rgba(79, 214, 156, 0.35); border-radius: var(--r-media); background: rgba(79, 214, 156, 0.08); padding: 14px 18px; margin-bottom: 24px; color: var(--text-primary); font-size: var(--fs-ui); }
.notice p { margin: 0; max-width: none; }
.notice--error { border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.1); }

/* ==========================================================================
   12. Single room
   ========================================================================== */


.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.gallery__item { display: block; position: relative; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-media); padding: 0; cursor: zoom-in; overflow: hidden; transition: border-color var(--t); }
.gallery__item:hover { border-color: var(--border-subtle); }
.gallery__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity var(--t); }
.gallery__item:hover img { opacity: 0.86; }
.gallery__item--lead { grid-column: 1 / -1; border-radius: var(--r-panel); }
.gallery__item--lead img { aspect-ratio: 16 / 9; }
/* Room page: photos in one row that scrolls sideways and snaps; the next photo peeks in at the edge. */
.scroll-gallery { margin-top: clamp(32px, 4vw, 48px); }
.scroll-gallery__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--r-panel); }
.scroll-gallery__track::-webkit-scrollbar { display: none; }
.scroll-gallery__track:focus-visible { box-shadow: var(--ring-focus); }
.scroll-gallery__item { flex: 0 0 min(88%, 900px); scroll-snap-align: start; border-radius: var(--r-panel); }
.scroll-gallery__item img { aspect-ratio: 3 / 2; }
.scroll-gallery--single .scroll-gallery__item { flex-basis: 100%; }
.scroll-gallery__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.scroll-gallery__toggle { margin-right: auto; }
.scroll-gallery__icon-play, .scroll-gallery.is-paused .scroll-gallery__icon-pause { display: none; }
.scroll-gallery.is-paused .scroll-gallery__icon-play { display: contents; }
.scroll-gallery__icon-pause { display: contents; }
@media (prefers-reduced-motion: reduce) { .scroll-gallery__track { scroll-behavior: auto; } }
/* Common spaces: one row under the property's photos and specs, scrolling sideways when it overflows. */
.filmstrip { margin-top: clamp(24px, 3vw, 32px); }
.property-block > .filmstrip { margin-top: 0; } /* The block's gap already spaces it. */
.filmstrip__title { margin-bottom: 12px; }
.filmstrip__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: thin; }
.filmstrip__item { flex: 0 0 clamp(160px, 22vw, 240px); margin: 0; scroll-snap-align: start; }
.filmstrip__item .gallery__item { width: 100%; }
.filmstrip__item .gallery__item img { aspect-ratio: 4 / 3; }
.filmstrip__label { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-secondary); }

.room-body { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; padding-block: clamp(48px, 6vw, 80px); }
@media (min-width: 900px) { .room-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); } }

.room-content h2 { font-size: var(--fs-h3); margin-top: 40px; }
.room-content h2:first-child { margin-top: 0; }
.room-content ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; }
.room-content ul li { padding-left: 22px; position: relative; }
.room-content ul li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 1px; background: var(--signal-400); }
.room-content ul.tags { display: flex; }
.room-content ul.tags li { padding-left: 0; }
.room-content ul.tags li::before { content: none; }
.room-content .specs { margin-top: 16px; }

/* Room page. Wide: breadcrumb, title, the room's house and the description left, the At a glance
   card right, level with the breadcrumb; the photos across both columns below; then Property details
   and amenities across the full width. Phones: title, house, description, card, photos, specs.
   The hero has no bottom padding so the specs follow the photos closely. */
.page-hero--split.page-hero--room { padding-bottom: 0; }
@media (min-width: 900px) {
	.page-hero--split.page-hero--room .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 0.75fr); grid-template-areas: "main side" "after after"; grid-template-rows: auto auto; }
	.room-body--room { grid-template-columns: minmax(0, 1fr); }
}
.page-hero--room .page-hero__side .room-aside { margin-top: 0; }
.room-house { font-size: var(--fs-lead); color: var(--text-secondary); margin: 0; }
.page-hero--room .page-hero__head > div { flex: 1 1 100%; min-width: 0; } /* The description fills the column. */
.room-intro { margin-top: 24px; }
.room-body--room { padding-top: clamp(32px, 4vw, 48px); }
.room-body--room .specs { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.room-aside { position: relative; margin-top: clamp(24px, 3vw, 32px); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-card); box-shadow: var(--shadow-2); padding: clamp(20px, 3vw, 32px); }
.room-aside__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.room-aside h2 { font-size: var(--fs-h4); margin: 0; }
.room-aside .specs { grid-template-columns: 1fr 1fr; margin-top: 20px; }
.room-aside .btn { margin-top: 24px; }
.room-aside .room-aside__apply { margin-top: 12px; }
.room-aside__note { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.room-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border-hairline); padding-block: 28px var(--pad-section); margin-top: 16px; font-size: var(--fs-ui); }

/* Lightbox: the dialog pattern, scrim + 6px blur */
.lightbox { position: fixed; inset: 0; z-index: 200; background: var(--scrim-dialog); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); }
.lightbox.is-open { display: flex; animation: gfl-dialog 360ms var(--ease); }
@keyframes gfl-dialog { from { opacity: 0; } }
.lightbox img { max-width: min(1200px, 100%); max-height: 86vh; object-fit: contain; border: 1px solid var(--border-hairline); border-radius: var(--r-card); box-shadow: var(--shadow-4); }
.lightbox__close, .lightbox__nav { position: absolute; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--r-control); color: var(--text-primary); width: 44px; height: 44px; cursor: pointer; display: grid; place-items: center; transition: border-color var(--t), background-color var(--t); }
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--signal-400); background: var(--surface-overlay); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__caption { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--text-secondary); }

/* ==========================================================================
   13. Pages, archive, 404
   ========================================================================== */

/* The one subpage header (template-parts/page-hero.php). Every page but the
   home page opens with it, so its title and fonts are set here and nowhere else. */
.page-hero { padding-top: var(--page-top); padding-bottom: var(--page-bottom); }
.crumbs { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px; }
.crumbs a { color: var(--text-secondary); border: 0; }
.crumbs a:hover { color: var(--text-primary); }
.page-hero .section-head__kicker { font-size: var(--fs-sm); }
/* Split header (About page): header and "after" left, "side" right, the side's top level with the breadcrumb.
   Phones: header, side, details. The column widths match the home page's inquiry section.
   Only the split header is a grid: elsewhere the wrappers stay plain blocks so margins collapse as before. */
.page-hero--split { padding-bottom: var(--pad-section); }
.page-hero--split .page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "after"; column-gap: clamp(32px, 5vw, 64px); }
.page-hero--split .page-hero__main { grid-area: main; }
.page-hero--split .page-hero__side { grid-area: side; margin-top: 16px; }
.page-hero--split .page-hero__after { grid-area: after; }
@media (min-width: 900px) {
	.page-hero--split .page-hero__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); grid-template-areas: "main side" "after side"; grid-template-rows: auto 1fr; }
	.page-hero--split .page-hero__side { margin-top: 0; }
}
.page-hero__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 24px; }
.page-hero__aside { text-align: right; }
.page-hero h1 { font-size: var(--fs-display); letter-spacing: -0.03em; max-width: 20ch; }
.entry-content { padding-bottom: clamp(48px, 7vw, 96px); }
/* About: a split header with the map as its side. Phones put the text before the map; wide, the map fills the column's height. */
.about-hero .page-hero__grid { grid-template-areas: "main" "after" "side"; }
/* Contact: one column, the form right under the title and the details under it. */
.contact-hero .page-hero__after { max-width: 760px; margin-top: 32px; }
.contact-hero .inquiry__aside { margin-top: 40px; }
.about-hero .page-hero__after > .entry-content { padding-bottom: 0; }
.about-hero .page-hero__after > :first-child { margin-top: 24px; }
.about-hero .page-hero__side { display: flex; margin-top: 40px; }
.about-hero .page-hero__side > .map-frame { flex: 1; }
@media (min-width: 900px) {
	.about-hero .page-hero__grid { grid-template-areas: "main side" "after side"; }
	.about-hero .page-hero__side { margin-top: 0; }
}
/* FAQ page: the questions under the page header, then the Get started button. */
.faq-page .entry-content { padding-bottom: 0; }
.faq-page .entry-content > .faq { max-width: 860px; }
.faq-page .entry-content > :first-child { margin-top: 0; }
.faq-page .btn-row { margin-top: 40px; }
.entry-content > * { max-width: var(--measure); }
.entry-content > .alignwide, .entry-content > .alignfull, .entry-content > figure, .entry-content > .wp-block-image, .entry-content > .wp-block-gallery, .entry-content > table { max-width: 100%; }
.entry-content img { border: 1px solid var(--border-hairline); border-radius: var(--r-media); }
.entry-content figcaption, .wp-caption-text { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); margin-top: 8px; }
.aligncenter { margin-inline: auto; }
.alignright { float: right; margin: 0 0 24px 24px; }
.alignleft { float: left; margin: 0 24px 24px 0; }
.section--flush { padding-top: 0; }
.page-hero.not-found { padding-bottom: clamp(80px, 12vw, 144px); }
.post-summary { border-bottom: 1px solid var(--border-hairline); padding-bottom: 28px; margin-bottom: 28px; }
.post-summary__title { font-size: var(--fs-h3); margin-bottom: 6px; }
.post-summary__date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   14. Footer
   ========================================================================== */

.site-footer { border-top: 1px solid var(--border-hairline); background: var(--bg-sunken); padding-block: clamp(32px, 4vw, 48px); font-size: var(--fs-ui); }
/* Wordmark with the copyright under it on the left; the legal text as one block
   anchored right, justified, so every line starts on the same left edge. The
   housing icon hangs in the gutter to the left of that edge. */
.footer-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 24px clamp(32px, 6vw, 80px); }
.footer-id { display: grid; gap: 12px; justify-items: start; }
.footer-brand { --mark: 26px; }
.footer-brand .brand__name { font-size: 1.25rem; }
.footer-brand:hover { color: var(--text-primary); }
.footer-copy { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
.footer-links { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--text-primary); }
.footer-legal { justify-self: end; width: min(100%, 68ch); display: grid; gap: 12px; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.6; }
.footer-legal p { margin: 0; max-width: none; text-align: justify; hyphens: auto; }
.footer-legal a { color: var(--text-secondary); }
.footer-legal a:hover { color: var(--text-primary); }
.eho { position: relative; }
.eho svg { position: absolute; left: -34px; top: 0; color: var(--text-secondary); }
@media (max-width: 720px) {
	.footer-bar { grid-template-columns: minmax(0, 1fr); }
	.footer-legal { justify-self: stretch; width: auto; }
	.eho { padding-left: 34px; }
	.eho svg { left: 0; }
	.footer-legal__disclaimer { padding-left: 34px; }
}

/* ==========================================================================
   15. Motion — short, mechanical, never overshooting
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(8px); }
.reveal.is-in, .no-js .reveal { opacity: 1; transform: none; transition: opacity var(--t-enter), transform var(--t-enter); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.reveal { opacity: 1; transform: none; }
}

@media print {
	.site-header, .site-footer, .form, .lightbox { display: none !important; }
	body { background: #fff; color: #111; }
}