/* Vartanov Residences design system. Warm boutique: cream grounds, Lora headings, Nunito Sans text, 16px radii.
   Light only: the site keeps the same warm colours when a visitor's device is in dark mode (decided 12 October 2026).
   Rules from ownership: no monospace, no uppercase letter-spaced labels, no grey backgrounds, no stat strips. */

/* ---------- Tokens ---------- */
:root {
	--vr-ground: #F8F4EC;
	--vr-surface: #FFFDF8;
	--vr-surface-2: #F0E9DC;
	--vr-surface-3: #E6DCCB;
	--vr-line: #E4DACA;
	--vr-line-strong: #CDBFA8;
	--vr-ink: #22201A;
	--vr-ink-2: #4A4740;
	--vr-ink-3: #6E695E;
	--vr-primary: #3A6151;
	--vr-primary-hover: #2C4B3E;
	--vr-primary-ink: #FFFDF8;
	--vr-accent: #8A5A22;
	--vr-ground-rgb: 248 244 236; /* --vr-ground as channels, for see-through washes */
	--vr-ink-rgb: 34 32 26;       /* --vr-ink as channels, for shadows and veils */
	--vr-radius: 16px;
	--vr-wrap: 1200px;
	--vr-gutter: clamp(16px, 4vw, 64px);
	--vr-sec: clamp(56px, 8vw, 104px);
	--vr-serif: 'Lora', Georgia, 'Times New Roman', serif;
	--vr-sans: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;
	color-scheme: light;
}
/* Brook Manor (handoff ELEMENTOR-BUILD.md). surface-3 and line-strong are derived: Carriage House's, shifted as surface-2 and line shift. */
.vr-prop-brook-manor {
	--vr-ground: #F7F4ED;
	--vr-surface: #FFFDF9;
	--vr-surface-2: #EEE8DD;
	--vr-surface-3: #E4DBCC;
	--vr-line: #E2D9CB;
	--vr-line-strong: #CBBEA9;
	--vr-ink: #1F1E1B;
	--vr-ink-2: #474540;
	--vr-ink-3: #6C675E;
	--vr-primary: #2F3A45;        /* slate, the logo mark's line colour (developer, 13 October 2026; the handoff had blue #3D5E7E) */
	--vr-primary-hover: #222A32;
	--vr-primary-ink: #FFFDF9;
	--vr-accent: #746530;
	--vr-ground-rgb: 247 244 237;
	--vr-ink-rgb: 31 30 27;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
	margin: 0;
	background: var(--vr-ground);
	color: var(--vr-ink);
	font-family: var(--vr-sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vr-primary); text-underline-offset: 3px; }
a:hover { color: var(--vr-primary-hover); }
:focus-visible { outline: 3px solid var(--vr-accent); outline-offset: 2px; border-radius: 4px; }
.vr-cta :focus-visible { outline-color: var(--vr-primary-ink); }
.vr-parallax :focus-visible { outline-color: currentColor; }
h1, h2, h3 { font-family: var(--vr-serif); font-weight: 600; line-height: 1.12; margin: 0; color: var(--vr-ink); }
html body .site-main:has(.vr-sec, .vr-hero) { max-width: none; width: 100%; padding: 0; margin: 0; }
html body .site-main:has(.vr-sec, .vr-hero) .page-content { padding: 0; }
.vr-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.vr-wrap { max-width: var(--vr-wrap); margin: 0 auto; padding-inline: var(--vr-gutter); }
.vr-sec { padding-block: var(--vr-sec); }
.vr-sec--alt { background: var(--vr-surface); }
.vr-eyebrow { font-family: var(--vr-serif); font-style: italic; color: var(--vr-accent); font-size: 1.05rem; margin: 0 0 .5rem; }
.vr-head { max-width: 46rem; margin-bottom: 2rem; }
.vr-head h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.vr-head p { color: var(--vr-ink-2); font-size: 1.1rem; margin: .75rem 0 0; }
.vr-icon { flex-shrink: 0; }

/* ---------- Buttons, tags, cards ---------- */
.vr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; padding: .75rem 1.5rem; border-radius: 999px;
	font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
	text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.vr-btn--primary { background: var(--vr-primary); color: var(--vr-primary-ink); }
/* Apply Now: a soft band of light sweeps across the button every few seconds. Off for reduced motion. */
@keyframes vr-shimmer { 0%, 70% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(320%) skewX(-20deg); } }
.vr-btn--shimmer { position: relative; overflow: hidden; isolation: isolate; }
.vr-btn--shimmer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); animation: vr-shimmer 4.5s ease-in-out infinite; }
.vr-btn--primary:hover { background: var(--vr-primary-hover); color: var(--vr-primary-ink); }
.vr-btn--ghost { background: var(--vr-surface); color: var(--vr-ink); border-color: var(--vr-line-strong); }
.vr-btn--ghost:hover { border-color: var(--vr-ink); color: var(--vr-ink); }
.vr-btn--link { background: none; color: var(--vr-ink); padding-inline: .5rem; text-decoration: underline; }
.vr-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.vr-tag { display: inline-block; border: 1px solid var(--vr-line-strong); border-radius: 999px; padding: .2rem .7rem; font-size: .8125rem; color: var(--vr-ink-2); }
.vr-tag--hero { border-color: var(--vr-primary); color: var(--vr-primary); }
.vr-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.vr-card { background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: var(--vr-radius); overflow: hidden; }
.vr-sec--alt .vr-card { background: var(--vr-ground); }
.vr-badge { position: absolute; left: 12px; top: 12px; background: var(--vr-ink); color: var(--vr-surface); font-size: .8125rem; font-weight: 700; padding: .3rem .75rem; border-radius: 999px; }
.vr-badge--soft { left: auto; right: 12px; background: color-mix(in srgb, var(--vr-surface) 92%, transparent); color: var(--vr-ink); font-weight: 600; }

/* Hello Elementor's reset underlines links inside .page-content and paints hovered or focused buttons pink.
   These rules keep the theme's own look. */
.page-content a.vr-btn:not(.vr-btn--link) { text-decoration: none; }
.vr-btn--primary:hover, .vr-btn--primary:focus { background: var(--vr-primary-hover); color: var(--vr-primary-ink); }
.vr-btn--ghost:hover, .vr-btn--ghost:focus { background: var(--vr-surface); color: var(--vr-ink); }
.vr-menu-toggle:hover, .vr-menu-toggle:focus { background: var(--vr-surface); color: var(--vr-ink); }
.vr-filter__reset:hover, .vr-filter__reset:focus { background: transparent; color: var(--vr-primary); }
.vr-distances__toggle:hover, .vr-distances__toggle:focus { background: var(--vr-surface-2); color: var(--vr-primary); }
.vr-cta .vr-btn--primary:hover, .vr-cta .vr-btn--primary:focus { background: var(--vr-primary-ink); color: var(--vr-primary); }
.vr-cta .vr-btn--ghost:hover, .vr-cta .vr-btn--ghost:focus { background: transparent; color: var(--vr-primary-ink); }

/* ---------- Photo frames ---------- */
.vr-frame { position: relative; margin: 0; background: var(--vr-surface-3); overflow: hidden; border-radius: var(--vr-radius); }
.vr-frame img { width: 100%; height: 100%; object-fit: cover; }
.vr-frame.is-empty { background: linear-gradient(160deg, var(--vr-surface-2), var(--vr-surface-3)); min-height: 120px; }
.vr-frame.is-empty::after {
	content: attr(data-label); position: absolute; left: 12px; bottom: 12px; right: 12px; width: fit-content;
	font-family: var(--vr-serif); font-style: italic; font-size: .8125rem; color: var(--vr-ink-2);
	background: color-mix(in srgb, var(--vr-surface) 90%, transparent); padding: .25rem .7rem; border-radius: 999px;
}

/* ---------- Header ---------- */
.vr-topbar { position: sticky; top: 0; z-index: 50; background: var(--vr-surface); border-bottom: 1px solid var(--vr-line); }
.admin-bar .vr-topbar { top: 32px; }
.vr-topbar__in { position: relative; display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.vr-brand { flex: none; display: flex; align-items: center; gap: .7rem; line-height: 1.05; text-decoration: none; color: var(--vr-ink); margin: 0; }
.vr-brand__text { display: flex; flex-direction: column; }
.vr-brand__mark { width: 44px; height: 44px; flex: none; }
.vr-brand__name { font-family: var(--vr-serif); font-weight: 600; font-size: 1.5rem; }
.vr-brand__place { font-family: var(--vr-serif); font-style: italic; font-size: .875rem; color: var(--vr-accent); }
.vr-brand img { max-height: 56px; width: auto; }
.vr-nav { margin-inline: auto; }
.vr-nav ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.vr-nav a { color: var(--vr-ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.vr-nav a:hover { color: var(--vr-primary); }
.vr-topbar__cta { display: flex; align-items: center; gap: 1.25rem; }
.vr-topbar__tel { color: var(--vr-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.vr-menu-toggle { display: inline-flex; flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--vr-line-strong); background: var(--vr-surface); align-items: center; justify-content: center; color: var(--vr-ink); cursor: pointer; }
/* The menu behind the menu button (left of the logo), on every screen size: a panel under the button on desktop, full width on tablets and phones. */
.vr-menu { display: none; }
.vr-menu.is-open { display: block; position: absolute; left: var(--vr-gutter); top: 100%; width: min(22rem, 100%); background: var(--vr-surface); border: 1px solid var(--vr-line); border-top: 0; padding: .5rem 1.5rem 1.25rem; max-height: calc(100vh - 160px); overflow-y: auto; box-shadow: 0 16px 32px rgb(var(--vr-ink-rgb) / .12); }
.vr-menu ul { list-style: none; margin: 0; padding: 0; }
.vr-menu a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--vr-line); color: var(--vr-ink); text-decoration: none; font-weight: 600; font-size: 1.1rem; }
.vr-menu a:hover { color: var(--vr-primary); }
.vr-brand__name, .vr-topbar__cta a { white-space: nowrap; }
/* Narrow desktops: keep the header on one line. The phone number is also in the hero, so it can step aside here. */
/* With the logo mark, the full row (menu button, logo, five links, phone, Apply Now) is wider than the 1200px content
   column, so the header row may run to 1320px. Below that the menu tightens, and under 1320px the phone number
   (also in the hero, phone bar and footer) steps aside. */
.vr-topbar .vr-wrap { max-width: 1320px; }
@media (max-width: 1400px) { .vr-nav ul { gap: 1.25rem; } .vr-topbar__in { gap: 1rem; } }
@media (max-width: 1320px) { .vr-topbar .vr-topbar__tel { display: none; } }

/* ---------- Hero ---------- */
.vr-hero { position: relative; min-height: clamp(480px, 72vh, 680px); display: flex; align-items: flex-end; overflow: hidden; background: var(--vr-surface-3); }
.vr-hero__media { position: absolute; inset: 0; border-radius: 0; }
.vr-hero__media.is-empty::after { top: 16px; bottom: auto; left: auto; right: 16px; }
.vr-hero__veil {
	position: absolute; inset: 0;
	/* The photo (or the 3D slider) fills the whole hero. A see-through cream wash sits only behind the text, strongest
	   at the left edge, still strong where the text ends (~56%) and gone by 64%, so the words stay readable and the rest of the photo is fully clear. */
	background: linear-gradient(90deg, rgb(var(--vr-ground-rgb) / .86) 0%, rgb(var(--vr-ground-rgb) / .84) 32%, rgb(var(--vr-ground-rgb) / .76) 44%, rgb(var(--vr-ground-rgb) / .68) 50%, rgb(var(--vr-ground-rgb) / .4) 57%, rgb(var(--vr-ground-rgb) / .05) 61%, rgb(var(--vr-ground-rgb) / 0) 64%);
}
.vr-hero__media .vr-photo { object-position: 70% 50%; }
/* The 3D depth slider as the hero's background layer. Its stage fills the hero instead of its own 16:9 / 4:5 box. */
.vr-hero .vr-hero__slider .dslider, .vr-hero .vr-hero__slider .dslider .dslider__stage { height: 100%; aspect-ratio: auto; }
/* No on-photo controls (developer's decision, 12 October 2026): the slider just plays. Hidden rather than removed,
   because depth-slider.js expects the Pause button to exist. Display none also takes them out of the tab order. */
.vr-hero .vr-hero__slider .dslider .dslider__nav { display: none; }
/* No pointer look-around either (developer's decision): the photo ignores the mouse, so only the slow camera push moves it. */
.vr-hero .vr-hero__slider .dslider .dslider__stage { pointer-events: none; }
.vr-hero .vr-hero__slider .dslider .dslider__fallback { object-position: 70% 50%; }
.vr-hero__copy { position: relative; width: 100%; padding-block: 3rem 4rem; }
.vr-hero__copy > * { max-width: 40rem; }
.vr-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.04; margin: .5rem 0 1rem; }
.vr-hero__lede { font-size: 1.15rem; font-weight: 500; color: var(--vr-ink-2); margin: 0 0 1.5rem; max-width: 34rem; }
.vr-hero .vr-eyebrow { font-weight: 500; }
/* Desktop: the hero fills the first screen below the top bar (and WordPress's admin bar when logged in), so the next
   section starts at the fold instead of peeking in under the hero (Leo, 24 October 2026). */
@media (min-width: 1025px) {
	.vr-hero {
		min-height: max(520px, calc(100vh - var(--vr-topbar-h, 77px) - var(--wp-admin--admin-bar--height, 0px)));
		min-height: max(520px, calc(100svh - var(--vr-topbar-h, 77px) - var(--wp-admin--admin-bar--height, 0px)));
		align-items: center;
	}
}


/* ---------- Parallax distance band ---------- */
.vr-parallax { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; color: #FFFDF8; background: #2A261F; }
.vr-parallax__media { position: absolute; left: 0; right: 0; top: -15%; height: 130%; margin: 0; will-change: transform; }
.vr-parallax__media img { width: 100%; height: 100%; object-fit: cover; }
/* A text section on a parallax photo (The Community): the text keeps its normal colours on a solid card,
   and the photo shows around it. Text is never set directly on the photo. */
.vr-sec--photo { min-height: 0; display: block; color: var(--vr-ink); }
.vr-sec--photo .vr-wrap { position: relative; }
.vr-photo-card { background: var(--vr-surface); border-radius: var(--vr-radius); padding: clamp(1.5rem, 4vw, 3.5rem); box-shadow: 0 12px 40px rgb(var(--vr-ink-rgb) / .18); }
.vr-sec.vr-sec--photo h2 { color: var(--vr-ink); }
.vr-sec.vr-sec--photo .vr-eyebrow { color: var(--vr-accent); }
.vr-parallax__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--vr-ink-rgb) / .66), rgb(var(--vr-ink-rgb) / .4) 45%, rgb(var(--vr-ink-rgb) / .15)); }
.vr-parallax__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: center; padding-block: 4rem; width: 100%; }
.vr-parallax h2 { color: #FFFDF8; font-size: clamp(2rem, 3.6vw, 3rem); }
.vr-parallax .vr-eyebrow { color: #F1D9B5; }
.vr-parallax__sub { color: #F3EDE2; margin: .75rem 0 0; }
.vr-parallax__card { background: var(--vr-surface); color: var(--vr-ink); border-radius: var(--vr-radius); padding: .5rem 1.75rem; box-shadow: 0 12px 40px rgb(var(--vr-ink-rgb) / .18); }
.vr-dist { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--vr-line); }
.vr-dist__label { display: flex; flex-direction: column; }
.vr-dist__place { font-weight: 700; }
.vr-dist__note { font-size: .875rem; color: var(--vr-ink-3); }
.vr-dist__value { font-family: var(--vr-serif); white-space: nowrap; }
.vr-parallax__more { display: block; padding: 1rem 0 .75rem; font-weight: 700; }

/* ---------- "Worth knowing" band ---------- */
.vr-welcome { background: var(--vr-surface-2); }
.vr-welcome__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 48px; align-items: center; padding-block: 3rem; }
.vr-welcome__line { font-family: var(--vr-serif); font-style: italic; font-size: 1.5rem; line-height: 1.3; margin: 0; }
/* One fact per line, in bold, across the full width (Leo, 22 October 2026). */
.vr-welcome ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; list-style: none; margin: 0; padding: 0; }
.vr-welcome li, .vr-list li { position: relative; padding-left: 1.25rem; color: var(--vr-ink-2); }
.vr-welcome li::before, .vr-list li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--vr-accent); }
.vr-welcome li { font-weight: 700; color: var(--vr-ink); }

/* ---------- Prose, facts, lists ---------- */
.vr-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.vr-prose p { margin: 0 0 1.1rem; color: var(--vr-ink-2); font-size: 1.05rem; }
.vr-prose strong { color: var(--vr-ink); }
.vr-facts { margin: 0; border-top: 1px solid var(--vr-line); }
.vr-facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--vr-line); }
.vr-facts dt { color: var(--vr-ink-3); font-size: .9rem; }
.vr-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.vr-amen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.vr-amen h3 { font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--vr-ink-3); margin-bottom: .75rem; }
.vr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
.vr-list li { padding-block: .6rem; border-bottom: 1px solid var(--vr-line); color: var(--vr-ink); }
.vr-list li::before { top: 1.25em; }
.vr-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vr-line); }
.vr-rows li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--vr-line); }
.vr-rows span:last-child { color: var(--vr-ink-3); font-size: .9rem; text-align: right; }
.vr-hood { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }

/* ---------- Floor plans ---------- */
.vr-filter { display: none; }
.vr-js .vr-filter { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 16px 20px; margin-bottom: 24px; }
.vr-filter label { display: flex; flex-direction: column; gap: 6px; font-size: .875rem; color: var(--vr-ink-2); flex: 1 1 160px; }
.vr-filter select { font: inherit; font-size: 1rem; color: var(--vr-ink); padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--vr-line-strong); background: var(--vr-surface); min-height: 44px; }
.vr-filter .vr-check { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; color: var(--vr-ink); font-size: .95rem; min-height: 44px; }
.vr-check input { width: 18px; height: 18px; accent-color: var(--vr-primary); }
.vr-filter__count { font-size: .875rem; color: var(--vr-ink-3); padding: .6rem 0; }
.vr-filter__reset { background: none; border: 0; font: inherit; font-size: .875rem; color: var(--vr-primary); text-decoration: underline; cursor: pointer; min-height: 44px; }
.vr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vr-plan { display: flex; flex-direction: column; }
.vr-plan[hidden] { display: none; }
.vr-plan__media { position: relative; }
.vr-plan__media .vr-frame { border-radius: 0; aspect-ratio: 16 / 10; }
.vr-plan__body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.vr-plan__top { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.vr-plan h3 { font-size: 1.3rem; }
.vr-plan__sf { font-size: .95rem; color: var(--vr-ink-2); white-space: nowrap; }
.vr-plan__desc { margin: 0; font-size: .95rem; color: var(--vr-ink-2); line-height: 1.5; }
.vr-plan__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8125rem; color: var(--vr-ink-3); }
.vr-plan__foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--vr-line); display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.vr-plan__price { font-size: .875rem; color: var(--vr-ink-3); }
.vr-plan__links { display: flex; gap: 1rem; font-size: .875rem; font-weight: 700; }
.vr-plans__note { max-width: 40rem; font-size: .9rem; color: var(--vr-ink-3); margin: 1.5rem 0 0; }
.vr-plans__empty { display: none; margin: 1rem 0 0; color: var(--vr-ink-2); }
.vr-plans__empty.is-shown { display: block; }

/* ---------- 3D tours ---------- */
.vr-tours { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-auto-rows: minmax(260px, 1fr); gap: 24px; }
.vr-tours--single { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
.vr-tour { position: relative; border-radius: var(--vr-radius); overflow: hidden; background: var(--vr-ink); min-height: 260px; }
.vr-tour--featured { grid-row: span 2; min-height: 560px; }
.vr-tours--single .vr-tour--featured { grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
.vr-tour__open { position: absolute; inset: 0; display: block; color: #FFFDF8; text-decoration: none; }
.page-content a.vr-tour__open { text-decoration: none; }
.vr-tour__open:hover, .vr-tour__open:focus { color: #FFFDF8; }
.vr-tour__open:focus-visible { outline: 3px solid #FFFDF8; outline-offset: -6px; }
.vr-tour__open .vr-frame { position: absolute; inset: 0; border-radius: 0; height: 100%; min-height: 0; }
.vr-tour .vr-frame.is-empty::after { display: none; }
/* Slow, continuous zoom in and out on each tour photo, starting when the card scrolls into view (site.js marks it
   .is-in). 10 s a cycle, eased at both ends; the cards are offset so they don't pulse together. Off for reduced motion. */
@keyframes vr-breathe { from { transform: scale(1); } to { transform: scale(1.08); } }
.vr-tour .vr-frame img { transform-origin: 50% 45%; will-change: transform; }
.vr-tour.is-in .vr-frame img { animation: vr-breathe 5s ease-in-out infinite alternate; }
.vr-tour.is-in:nth-child(2) .vr-frame img { animation-delay: -1.7s; }
.vr-tour.is-in:nth-child(3) .vr-frame img { animation-delay: -3.3s; }
.vr-tour__open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--vr-ink-rgb) / .86) 0%, rgb(var(--vr-ink-rgb) / .28) 55%, rgb(var(--vr-ink-rgb) / .05) 100%); }
.vr-tour__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.vr-tour__text { display: flex; flex-direction: column; gap: 4px; }
.vr-tour__where { font-family: var(--vr-serif); font-style: italic; font-size: .875rem; color: #F1D9B5; }
.vr-tour__title { color: #FFFDF8; font-size: 1.5rem; line-height: 1.15; }
.vr-tour__desc { font-size: .95rem; color: #F3EDE2; }
.vr-tour:not(.vr-tour--featured) .vr-tour__desc { display: none; }
.vr-tour--featured .vr-tour__info { padding: 32px; }
.vr-tour--featured .vr-tour__title { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.vr-tour__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--vr-primary); color: var(--vr-primary-ink); font-weight: 800; }
.vr-tour__open:hover .vr-tour__cta { background: var(--vr-primary-hover); }
.vr-tour:not(.vr-tour--featured) .vr-tour__cta { width: 52px; height: 52px; min-height: 0; padding: 0; justify-content: center; background: #FFFDF8; color: var(--vr-ink); }
.vr-tour:not(.vr-tour--featured) .vr-tour__cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vr-tours__foot { font-size: .875rem; color: var(--vr-ink-3); margin: 1.25rem 0 0; }

/* ---------- 3D tour player (full-screen dialog) ---------- */
.vr-tour-dialog { width: calc(100vw - 80px); height: calc(100vh - 64px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--vr-radius); background: #171511; color: #FFFDF8; overflow: hidden; }
.vr-tour-dialog[open] { display: flex; flex-direction: column; }
.vr-tour-dialog::backdrop { background: rgba(23, 21, 17, .78); }
html:has(.vr-tour-dialog[open]) { overflow: hidden; }
.vr-tour__info .vr-tour__text { min-width: 0; }
.vr-tour-dialog :focus-visible { outline-color: #FFFDF8; }
.vr-tour-dialog__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 12px 16px 12px 24px; border-bottom: 1px solid #3A342B; }
.vr-tour-dialog__name { display: flex; flex-direction: column; line-height: 1.25; }
.vr-tour-dialog__title { font-family: var(--vr-serif); font-weight: 600; font-size: 1.3rem; }
.vr-tour-dialog__where { font-size: .875rem; color: #D3CBBC; }
.vr-tour-dialog__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.vr-tour-dialog__tabs button { font: inherit; font-size: .9rem; font-weight: 700; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #57503F; background: transparent; color: #FFFDF8; cursor: pointer; }
.vr-tour-dialog__tabs button:hover, .vr-tour-dialog__tabs button:focus { background: #2A261F; color: #FFFDF8; }
.vr-tour-dialog__tabs button[aria-pressed="true"] { background: #FFFDF8; color: #22201A; border-color: #FFFDF8; }
.vr-tour-dialog__actions { display: flex; align-items: center; gap: 10px; }
.vr-tour-dialog__actions .vr-btn--primary { background: #8DC1A9; color: #12201A; }
.vr-tour-dialog__actions .vr-btn--primary:hover, .vr-tour-dialog__actions .vr-btn--primary:focus { background: #A9D3BF; color: #12201A; }
.vr-tour-dialog__close { width: 46px; height: 46px; border-radius: 999px; border: 1px solid #57503F; background: transparent; color: #FFFDF8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vr-tour-dialog__close:hover, .vr-tour-dialog__close:focus { background: #2A261F; color: #FFFDF8; }
.vr-tour-dialog__stage { position: relative; flex: 1; background: #2A261F; }
.vr-tour-dialog__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Gallery ---------- */
.vr-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vr-gallery .vr-frame { aspect-ratio: 1 / 1; }
.vr-gallery .vr-frame.is-wide { grid-column: span 2; aspect-ratio: auto; }
/* Each photo opens the viewer: a subtle lift on hover, a clear focus ring for the keyboard. */
.vr-gallery__open { display: block; height: 100%; cursor: zoom-in; border-radius: inherit; }
.vr-gallery__open img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.vr-gallery__open:hover img, .vr-gallery__open:focus-visible img { transform: scale(1.03); }
.vr-gallery__open:focus-visible { outline: 3px solid var(--vr-primary); outline-offset: -3px; }

/* ---------- Gallery photo viewer (lightbox, native <dialog>) ---------- */
.vr-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #FFFDF8; overflow: hidden; }
.vr-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.vr-lightbox::backdrop { background: rgba(17, 16, 13, .92); }
html:has(.vr-lightbox[open]) { overflow: hidden; }
.vr-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: calc(100vw - 160px); }
.vr-lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.vr-lightbox__caption { display: flex; gap: 16px; justify-content: space-between; width: 100%; font-size: .95rem; color: #E7E0D3; }
.vr-lightbox__count { flex: none; font-variant-numeric: tabular-nums; color: #B9B1A3; }
.vr-lightbox__btn { position: absolute; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255, 253, 248, .35); background: rgba(17, 16, 13, .55); color: #FFFDF8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vr-lightbox__btn:hover, .vr-lightbox__btn:focus { background: rgba(255, 253, 248, .16); color: #FFFDF8; }
.vr-lightbox__btn:focus-visible { outline: 3px solid #FFFDF8; outline-offset: 2px; }
.vr-lightbox__btn svg { width: 24px; height: 24px; }
.vr-lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.vr-lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }
.vr-lightbox__close { right: 24px; top: 24px; }
@media (max-width: 700px) {
	.vr-lightbox__figure { max-width: 100vw; padding: 0 12px; }
	.vr-lightbox__img { max-height: calc(100vh - 200px); }
	.vr-lightbox__prev, .vr-lightbox__next { top: auto; bottom: 24px; transform: none; }
	.vr-lightbox__prev { left: calc(50% - 64px); }
	.vr-lightbox__next { right: calc(50% - 64px); }
	.vr-lightbox__close { right: 12px; top: 12px; }
}

/* ---------- Our Communities ---------- */
.vr-sister { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.vr-sister .vr-frame { border-radius: 0; min-height: 280px; height: 100%; }
.vr-sister__body { padding: 2rem 2.5rem; display: flex; flex-direction: column; gap: .75rem; }
.vr-sister__body h3 { font-size: 1.5rem; }
.vr-sister__body p { margin: 0; color: var(--vr-ink-2); }
.vr-sister__addr { color: var(--vr-ink-3) !important; }
.vr-apart { margin: 24px 0; border: 1px solid var(--vr-primary); border-radius: var(--vr-radius); padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; background: var(--vr-surface); }
.vr-apart b { font-family: var(--vr-serif); font-size: 1.3rem; }
.vr-apart span { color: var(--vr-ink-2); font-size: .9rem; }
.vr-table-wrap { overflow-x: auto; border: 1px solid var(--vr-line); border-radius: var(--vr-radius); background: var(--vr-surface); }
.vr-distances { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .95rem; }
.vr-distances th, .vr-distances td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--vr-line); vertical-align: top; font-weight: 400; }
.vr-distances tbody th { font-weight: 600; }
.vr-distances thead th { font-size: .8125rem; color: var(--vr-ink-3); }
.vr-distances .is-here { background: var(--vr-surface-2); }
.vr-distances small { display: block; color: var(--vr-ink-3); font-size: .8rem; font-weight: 400; }
.vr-distances__toggle { display: none; }
.vr-footnote { font-size: .85rem; color: var(--vr-ink-3); margin: 1rem 0 0; max-width: 40rem; }

/* ---------- Apply, rent ---------- */
.vr-options, .vr-rent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; }
.vr-rent-grid--one { grid-template-columns: minmax(0, 36rem); margin-bottom: 0; }
.vr-options--one { grid-template-columns: minmax(0, 36rem); }
.vr-option { padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .6rem; }
.vr-option__n { font-size: .8125rem; color: var(--vr-accent); }
.vr-option h3 { font-size: 1.4rem; }
.vr-option p { margin: 0; color: var(--vr-ink-2); }
.vr-option .vr-btn { margin-top: auto; align-self: stretch; }
.vr-steps-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.vr-steps { list-style: none; margin: 0; padding: 0; counter-reset: vr-step; }
.vr-steps li { counter-increment: vr-step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: 1rem 0; border-bottom: 1px solid var(--vr-line); }
.vr-steps li::before { content: counter(vr-step, decimal-leading-zero); grid-row: span 2; color: var(--vr-accent); font-family: var(--vr-serif); font-size: .95rem; padding-top: .15rem; }
.vr-steps b { display: block; }
.vr-steps span { color: var(--vr-ink-2); font-size: .95rem; }
.vr-fees { padding: 1.25rem 1.5rem; }
.vr-fees h3 { font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--vr-ink-2); margin-bottom: .5rem; }
.vr-fees .vr-facts dd { font-size: .95rem; }
.vr-payee { font-family: var(--vr-serif); font-size: 1.2rem; color: var(--vr-ink); }
.vr-address { font-style: normal; background: var(--vr-surface-2); border-radius: 12px; padding: 1rem 1.25rem; line-height: 1.5; }
.vr-rent-note { font-size: .875rem; color: var(--vr-ink-3); margin: 1rem 0 0; }

/* ---------- FAQ ---------- */
.vr-faq { max-width: 52rem; border-top: 1px solid var(--vr-line); }
.vr-faq details { border-bottom: 1px solid var(--vr-line); }
.vr-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-weight: 700; font-size: 1.05rem; min-height: 44px; }
.vr-faq summary::-webkit-details-marker { display: none; }
.vr-faq summary::after { content: "+"; font-family: var(--vr-serif); font-size: 1.5rem; line-height: 1; color: var(--vr-accent); flex-shrink: 0; }
.vr-faq details[open] summary::after { content: "–"; }
.vr-faq__a { padding: 0 0 1.25rem; color: var(--vr-ink-2); }
.vr-faq__a p { margin: 0; }

/* ---------- Contact and forms ---------- */
.vr-contact .vr-facts dd { text-align: left; }
.vr-contact__note { color: var(--vr-ink-2); margin: 1rem 0 0; }
.vr-form { padding: 1.5rem; }
.vr-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vr-form__intro { color: var(--vr-ink-2); margin: 0 0 1rem; }
.vr-field { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--vr-ink-2); }
.vr-field--full { grid-column: 1 / -1; }
.vr-field input, .vr-field select, .vr-field textarea {
	font: inherit; font-size: 1rem; color: var(--vr-ink); padding: .65rem .8rem; border: 1px solid var(--vr-line-strong);
	border-radius: 10px; background: var(--vr-surface); min-height: 44px; box-sizing: border-box; width: 100%;
}
.vr-field.vr-check { flex-direction: row; align-items: flex-start; gap: .6rem; color: var(--vr-ink); }
.vr-field.vr-check input { width: 20px; min-height: 20px; margin-top: .2rem; flex-shrink: 0; }
.vr-req { color: var(--vr-accent); }
.vr-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vr-form legend { font-family: var(--vr-serif); font-weight: 600; font-size: 1.3rem; margin-bottom: .75rem; padding: 0; }
.vr-form__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 1.5rem; }
.vr-form__notice { margin: 1rem 0 0; font-size: .85rem; color: var(--vr-ink-3); font-style: italic; }

/* ---------- Elementor Pro forms (inc/sections/forms.php, vr_pro_form) ---------- */
/* Compact, in the site's own look: a card like the preview forms, rounded inputs, labels small, and the submit
   and step buttons as the site's pill button in the property's primary colour (green / slate). Styled here, not in
   each form's Elementor Style tab, so every form on both sites matches and later forms pick it up. */
.vr-pro-form { background: var(--vr-surface); border: 1px solid var(--vr-line); border-radius: var(--vr-radius); padding: 1.25rem 1.25rem .5rem; }
.vr-waitlist .vr-pro-form { margin-top: 12px; }
.vr-pro-form .e-con, .vr-pro-form .elementor-widget-form { padding: 0; margin: 0; }
.vr-pro-form .elementor-form .elementor-field-group { margin-bottom: 12px; }
.vr-pro-form .elementor-form .elementor-field-label { font-size: .85rem; font-weight: 600; color: var(--vr-ink-2); margin-bottom: 4px; padding: 0; }
.vr-pro-form .elementor-form .elementor-mark-required .elementor-field-label::after { color: var(--vr-accent); }
.vr-pro-form .elementor-form .elementor-field-textual,
.vr-pro-form .elementor-form .elementor-select-wrapper select {
	font: inherit; font-size: .95rem; color: var(--vr-ink); background: var(--vr-surface); border: 1px solid var(--vr-line-strong);
	border-radius: 10px; min-height: 42px; padding: .5rem .75rem; box-shadow: none; line-height: 1.4;
}
.vr-pro-form .elementor-form textarea.elementor-field-textual { min-height: 88px; }
.vr-pro-form .elementor-form .elementor-field-textual:focus,
.vr-pro-form .elementor-form .elementor-select-wrapper select:focus { outline: 2px solid var(--vr-primary); outline-offset: 1px; border-color: var(--vr-primary); }
.vr-pro-form .elementor-form .elementor-select-wrapper .select-caret-down-wrapper { inset-inline-end: 12px; color: var(--vr-ink-3); }
.vr-pro-form .elementor-form .elementor-field-type-acceptance label { font-size: .9rem; color: var(--vr-ink); }
.vr-pro-form .elementor-form .elementor-field-type-html { font-size: .9rem; color: var(--vr-ink-2); }
.vr-pro-form .elementor-form .elementor-field-type-html p { margin: 0 0 .6rem; }
.vr-pro-form .elementor-form .elementor-button {
	min-height: 46px; padding: .7rem 1.5rem; border-radius: 999px; font: inherit; font-weight: 700; font-size: 1rem;
	background: var(--vr-primary); color: var(--vr-primary-ink); border: 1px solid transparent; transition: background .2s ease;
}
.vr-pro-form .elementor-form .elementor-button:hover, .vr-pro-form .elementor-form .elementor-button:focus { background: var(--vr-primary-hover); color: var(--vr-primary-ink); }
.vr-pro-form .elementor-form .elementor-button:focus-visible { outline: 3px solid var(--vr-primary); outline-offset: 2px; }
/* Multi-step application: "Back" as the outline pill, the progress bar in the primary colour. */
.vr-pro-form .elementor-form .e-form__buttons__wrapper__button-previous { background: transparent; color: var(--vr-ink); border-color: var(--vr-line-strong); }
.vr-pro-form .elementor-form .e-form__buttons__wrapper__button-previous:hover, .vr-pro-form .elementor-form .e-form__buttons__wrapper__button-previous:focus { background: var(--vr-surface-2); color: var(--vr-ink); }
.vr-pro-form .e-form__indicators { margin-bottom: 1rem; }
.vr-pro-form .e-form__indicators__indicator__progress { background: var(--vr-surface-2); border-radius: 999px; }
.vr-pro-form .e-form__indicators__indicator__progress__meter { background: var(--vr-primary); color: var(--vr-primary-ink); border-radius: 999px; }
/* Step indicator (Steps Settings → Number & Text): numbered circles joined by a line. Scoped through
   .elementor-form so these beat Elementor's own indicator rules, which are as specific and load later. The current step is filled
   in the primary colour, completed steps are outlined in it with a tick colour, later steps are muted. On phones
   only the current step's label shows, so five long labels never crowd the row. */
.vr-pro-form .elementor-form .e-form__indicators { display: flex; align-items: flex-start; gap: 0; margin: 0 0 1.25rem; padding: 0; }
.vr-pro-form .elementor-form .e-form__indicators__indicator { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; padding: 0; }
.vr-pro-form .elementor-form .e-form__indicators__indicator__number {
	width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
	font-size: .85rem; font-weight: 700; border: 2px solid var(--vr-line-strong); background: var(--vr-surface); color: var(--vr-ink-3); margin: 0;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.vr-pro-form .elementor-form .e-form__indicators__indicator__label { font-size: .75rem; font-weight: 600; line-height: 1.25; color: var(--vr-ink-3); max-width: 9rem; padding: 0; margin: 0; }
.vr-pro-form .elementor-form .e-form__indicators__indicator__separator { flex: 1 1 24px; height: 2px; margin: 15px 6px 0; background: var(--vr-line); border-radius: 2px; }
.vr-pro-form .elementor-form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number { background: var(--vr-primary); border-color: var(--vr-primary); color: var(--vr-primary-ink); }
.vr-pro-form .elementor-form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__label { color: var(--vr-ink); }
.vr-pro-form .elementor-form .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number { border-color: var(--vr-primary); color: var(--vr-primary); background: var(--vr-surface); }
.vr-pro-form .elementor-form .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__label { color: var(--vr-ink-2); }
.vr-pro-form .elementor-form .e-form__indicators__indicator--state-completed + .e-form__indicators__indicator__separator { background: var(--vr-primary); }
@media (max-width: 700px) {
	.vr-pro-form .elementor-form .e-form__indicators__indicator__label { display: none; }
	.vr-pro-form .elementor-form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__label { display: block; position: absolute; left: 0; right: 0; margin-top: 40px; font-size: .85rem; }
	.vr-pro-form .elementor-form .e-form__indicators { position: relative; padding-bottom: 1.6rem; }
	.vr-pro-form .elementor-form .e-form__indicators__indicator__number { width: 28px; height: 28px; }
	.vr-pro-form .elementor-form .e-form__indicators__indicator__separator { margin-top: 13px; }
}
.vr-pro-form .elementor-message { font-size: .95rem; }
.vr-pro-form .elementor-message.elementor-message-success { color: var(--vr-primary); }
.vr-pro-form .vr-field-invalid .elementor-field:not(.elementor-acceptance-field) { border-color: #A3402F; }
.vr-field-error { display: block; width: 100%; margin-top: .3rem; font-size: .85rem; font-weight: 600; color: #A3402F; }
.vr-notice { width: min(28rem, calc(100vw - 32px)); padding: 2rem 1.75rem 1.5rem; border: 0; border-radius: var(--vr-radius); background: var(--vr-surface); color: var(--vr-ink); box-shadow: 0 24px 70px rgb(var(--vr-ink-rgb) / .35); text-align: center; }
.vr-notice::backdrop { background: rgb(var(--vr-ink-rgb) / .55); }
.vr-notice h2 { font-size: 1.6rem; margin: 0 0 .6rem; }
.vr-notice p { margin: 0 0 1.4rem; color: var(--vr-ink-2); }
.vr-notice .vr-btn { min-width: 9rem; }
.vr-stepper { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.vr-stepper li { font-size: .85rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--vr-line-strong); color: var(--vr-ink-2); }
.vr-stepper li.is-current { background: var(--vr-ink); color: var(--vr-surface); border-color: var(--vr-ink); }
.vr-js .vr-form--steps fieldset:not(.is-current) { display: none; }
.vr-disclosure { background: var(--vr-surface-2); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: .9rem; }
.vr-disclosure h4 { margin: 0 0 .35rem; font-size: .95rem; }
.vr-disclosure p { margin: 0; }
.vr-waitlist { margin-top: 16px; }
.vr-waitlist summary { cursor: pointer; font-weight: 700; color: var(--vr-primary); padding: .75rem 0; min-height: 44px; }

/* ---------- Closing band ---------- */
.vr-cta { background: var(--vr-primary); color: var(--vr-primary-ink); }
.vr-cta__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-block: 3.5rem; }
.vr-cta h2 { color: var(--vr-primary-ink); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.vr-cta .vr-eyebrow { color: var(--vr-primary-ink); opacity: .85; }
.vr-cta .vr-btn--primary { background: var(--vr-primary-ink); color: var(--vr-primary); }
.vr-cta .vr-btn--ghost { background: transparent; color: var(--vr-primary-ink); border-color: color-mix(in srgb, var(--vr-primary-ink) 60%, transparent); }

/* ---------- Footer and phone bar ---------- */
.vr-footer { background: var(--vr-surface-2); padding-block: 3.5rem 2rem; font-size: .95rem; }
.vr-footer__cols { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.vr-footer h2 { font-family: var(--vr-sans); font-size: .95rem; font-weight: 700; margin-bottom: .75rem; }
.vr-footer ul { list-style: none; margin: 0; padding: 0; }
.vr-footer li { padding: 0; }
.vr-footer li a, .vr-footer__legal a, .vr-plan__links a, .vr-topbar__tel { display: inline-flex; align-items: center; min-height: 44px; }
.vr-footer a { color: var(--vr-ink); text-decoration: none; }
.vr-footer a:hover { color: var(--vr-primary); text-decoration: underline; }
.vr-footer address { font-style: normal; line-height: 1.7; color: var(--vr-ink-2); margin-top: 1rem; }
.vr-eho { margin: 1rem 0 0; font-weight: 700; }
.vr-footer__legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--vr-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--vr-ink-3); }
.vr-footer__legal p { margin: 0; max-width: 40rem; }
.vr-footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.vr-mobilebar { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.vr-nav, .vr-topbar__cta { display: none; }
	.vr-topbar__in { min-height: 64px; gap: .75rem; }
	.vr-brand__name { font-size: 1.25rem; }
	.vr-brand__mark { width: 38px; height: 38px; }
	.vr-menu.is-open { left: 0; right: 0; width: auto; border-width: 0 0 1px; padding: .5rem var(--vr-gutter) 1.25rem; }
	.vr-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--vr-surface); border-top: 1px solid var(--vr-line); }
	body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
	.vr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.vr-parallax__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.vr-parallax__media { top: 0; height: 100%; }
	.vr-tours { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
	.vr-tour, .vr-tour--featured { grid-row: auto; min-height: 0; aspect-ratio: 4 / 3; }
	.vr-tour--featured .vr-tour__info { padding: 22px; }
	.vr-parallax__veil { background: rgb(var(--vr-ink-rgb) / .62); }
	.vr-welcome__in, .vr-split, .vr-amen, .vr-hood, .vr-sister, .vr-options, .vr-rent-grid, .vr-steps-grid, .vr-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.vr-welcome ul { grid-template-columns: minmax(0, 1fr); }
	.vr-sister__body { padding: 1.5rem; }
}
@media (max-width: 782px) {
	.admin-bar .vr-topbar { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .vr-topbar { top: 0; }
}
/* Phones and tablets: below 1024px the text would run over the photo, so the photo sits on top, fully clear,
   and the text follows on cream (no veil over the photo). */
@media (max-width: 1024px) {
	.vr-hero { flex-direction: column; align-items: stretch; min-height: 0; background: var(--vr-ground); }
	.vr-hero__media { position: relative; inset: auto; height: min(56vw, 440px); }
	.vr-hero__veil { display: none; }
	.vr-hero__copy { padding-block: 1.75rem 2.5rem; }
}
@media (max-width: 700px) {
	.vr-hero .vr-actions { flex-direction: column; align-items: stretch; }
	.vr-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vr-tour-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
	.vr-tour-dialog__bar { padding: 10px 12px 10px 16px; }
	.vr-tour-dialog__tabs { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; }
	.vr-gallery .vr-frame.is-wide { aspect-ratio: 2 / 1; }
	.vr-js .vr-distances.is-collapsed tr.is-extra { display: none; }
	.vr-js .vr-distances__toggle { display: block; width: 100%; margin-top: -1px; padding: .9rem; border: 1px solid var(--vr-line); border-radius: 0 0 var(--vr-radius) var(--vr-radius); background: var(--vr-surface-2); font: inherit; font-weight: 700; color: var(--vr-primary); cursor: pointer; min-height: 44px; }
	.vr-distances { min-width: 0; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
	body { font-size: 16px; }
	.vr-plans { grid-template-columns: minmax(0, 1fr); }
	.vr-list, .vr-form__grid { grid-template-columns: minmax(0, 1fr); }
	.vr-facts div { grid-template-columns: 7rem minmax(0, 1fr); }
	.vr-filter label { flex-basis: 100%; }
	.vr-parallax__card { padding: .25rem 1.25rem; }
}

/* ---------- Inner pages (SEO pages) ---------- */
/* Title band: the page's H1 beside one photo, on the cream ground. */
.vr-pagehead { background: var(--vr-ground); border-bottom: 1px solid var(--vr-line); }
.vr-pagehead__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.vr-pagehead__in.is-text-only { grid-template-columns: minmax(0, 1fr); }
.vr-pagehead .vr-eyebrow a { color: inherit; text-decoration: none; }
.vr-pagehead .vr-eyebrow a:hover { text-decoration: underline; }
.vr-pagehead h1 { font-size: clamp(2.1rem, 4.2vw, 3.25rem); line-height: 1.06; margin: .25rem 0 1rem; }
.vr-pagehead__lede { font-size: 1.15rem; font-weight: 500; color: var(--vr-ink-2); margin: 0 0 1.5rem; max-width: 34rem; }
.vr-pagehead__media { aspect-ratio: 4 / 3; box-shadow: 0 12px 40px rgb(var(--vr-ink-rgb) / .12); }
/* Page copy, written in Elementor's Text Editor widget (class vr-seo-copy): the site's prose style on a readable measure. */
/* Newer Elementor outputs the text straight inside the widget element (no .elementor-widget-container), so the
   widget itself is padded to the site's content column (as .vr-wrap: gutter plus any space beyond 1200px), which
   Elementor's own max-width rules can't override; both markups work. */
.elementor-widget.vr-seo-copy { width: 100%; box-sizing: border-box; padding: clamp(2.5rem, 5vw, 4rem) calc(var(--vr-gutter) + max(0px, (100% - var(--vr-wrap)) / 2)) 0; }
.vr-seo-copy > :not(.elementor-widget-container), .vr-seo-copy > .elementor-widget-container > * { max-width: 46rem; }
.vr-seo-copy h2 { font-family: var(--vr-serif); font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.15; color: var(--vr-ink); margin: 0 0 1rem; }
.vr-seo-copy p { color: var(--vr-ink-2); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.1rem; }
/* "Browse by size" under the floor plans. */
.vr-plans__sizes { margin: 1.5rem 0 0; font-weight: 600; color: var(--vr-ink-2); }
.vr-plans__sizes a { color: var(--vr-primary); }
@media (max-width: 900px) {
	.vr-pagehead__in { grid-template-columns: minmax(0, 1fr); }
	.vr-pagehead__media { order: -1; aspect-ratio: 16 / 10; }
	.vr-pagehead .vr-actions { flex-direction: column; align-items: stretch; }
}

/* ---------- Motion ---------- */
/* Scroll reveal for floor plan and 3D tour cards (site.js adds .vr-reveal, then .is-in). */
.vr-reveal { opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.vr-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.vr-parallax__media, .vr-tour .vr-frame img { transform: none !important; }
	.vr-btn--shimmer::after { display: none; }
	* { transition: none !important; animation: none !important; }
}