/*
Theme Name: Valencia
Theme URI: https://valenciahotelcollection.com
Author: SDCO Partners
Author URI: https://stitchdesignco.com
Description: Custom hotel theme for the Valencia Collection multisite — parent collection site, development site, and Valencia hotel properties.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valencia
Update URI: false
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, block-patterns, wide-blocks, block-styles
*/

/* ─── Reset ──────────────────────────────────────────────────────────────
   Everything measures border-box: a width or height is the whole box, and
   padding and border fit inside it rather than adding on top.

   This replaces the narrow `button, input, select, textarea` reset that stood
   here until 2026-09-28, and it reverses the deferral recorded as H4 in
   docs/hotel-judgement-calls.md — H4's own prescription was "the `*`
   reset, as its own change with its own before/after sweep", which is what
   this is. Hunter's call: not shipping without it.

   Why it is worth a co-ordinated change rather than another local patch: the
   missing reset had been compensated for by hand at least seven times
   (BugHerd #101's hero inner container, the Court overlay, the reserve bar,
   the story collage, the timeline dot, the Development overlay panel, and the
   Gravity Forms overflow on every site). Each of those cost a rule; together
   they were the same bug seven times.

   Scope: this file is the parent theme, so the reset reaches the collection
   site, the three hotels, the five Courts (valencia-court is a child) and the
   Development site. valencia-restaurant is standalone and carries its own
   copy. inc/editor.php pipes both stylesheets into the block editor canvas,
   so the editor matches the front end without a separate rule.

   Writing content-box deliberately is still allowed and must be explicit —
   `.vr-reviews__panel` in the restaurant theme is the one place that does it,
   because its min-height is a content height the padding is meant to add to.
   Anything that needs the old behaviour says so in its own rule.

   Verified with wp-content/themes/valencia/bin/boxdiff.js: 247 captures over
   22 sites, 4 surfaces (hotel / court / restaurant / development) and three
   widths, every element's box compared before and after. See
   docs/border-box-reset-2026-09-28.md for what moved. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ─── Fonts ──────────────────────────────────────────────────────────────
   Mirrors theme.json fontFace entries; declared here as a fallback in case
   the global stylesheet hasn't regenerated. */
@font-face {
	font-family: 'Ortica Linear';
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/ortica-linear/OrticaLinear-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'Ortica Linear';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/ortica-linear/OrticaLinear-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Ortica Linear';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/ortica-linear/OrticaLinear-Bold.woff2') format('woff2');
}
/* Outfit — one variable file covers the whole weight axis (OFL,
   google/fonts), which the two static cuts did not.

   Development BugHerd #18 asked for Outfit Light on the stat figures. The
   CSS already said font-weight: 300, but only the 400 and 500 files were
   loaded, so the browser fell back to Regular and the computed style still
   reported 300 — the request looked satisfied and was not. Any weight
   between 100 and 900 is now a real cut.

   The same file already ships in valencia-restaurant; this is a copy of it,
   not a new download. The static faces stay declared after it so anything
   pinned to exactly 400 or 500 keeps its existing file. */
@font-face {
	font-family: 'Outfit';
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/outfit/outfit-latin-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/outfit/outfit-v15-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/outfit/outfit-v15-latin-500.woff2') format('woff2');
}

/* Per-property faces (hotel sites pick them via Settings → Valencia
   brand_font_display / brand_font_body; the presets read the
   --vhc-hotel-font-* slots those set). The George (2026-09-19): Mazius
   Display by Collletttivo, SIL OFL — Regular + Extra Italic (the sheet's
   two weights; the italic carries the comp's emphasised phrases), and
   Raleway (Google Fonts, SIL OFL) as one variable file. */
@font-face {
	font-family: 'Mazius Display';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/mazius-display/MaziusDisplay-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Mazius Display';
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url('assets/fonts/mazius-display/MaziusDisplay-Extraitalic.woff2') format('woff2');
}
@font-face {
	font-family: 'Raleway';
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	src: url('assets/fonts/raleway/Raleway-Variable.woff2') format('woff2');
}

/* ─── Theme custom properties ───────────────────────────────────────────
   Context-aware accents: dark sections flip these so buttons, eyebrows,
   and hairlines invert without extra selectors. */
/* BugHerd Riverwalk #75: every band's side gutter comes off this one
   value, so the page can breathe in at phone widths without touching 28
   separate rules. Scoped to the hotel sites — the Courts share this
   stylesheet and their mobile pass has already been signed off. */
:root {
	--vhc-band-gutter: 3rem;
}

/* The Court child theme sets is-brand-court AND inherits is-brand-hotel, so
   the Courts have to be excluded by name — their mobile pass is signed off
   and this would have quietly widened every band on five properties. */
@media (max-width: 781px) {
	body.is-brand-hotel:not(.is-brand-court) {
		--vhc-band-gutter: 5rem;
	}
}

/* Caravan #39. The collection's OWN display face, with no per-property
   override in front of it. `--wp--preset--font-family--display` is
   `var(--vhc-hotel-font-display, "Ortica Linear"), ...`, so on a property
   that sets its own display face the preset resolves to that face — which is
   right for the property's own type and wrong for the one line that speaks
   as the collection. "Proudly part of the Valencia Collection" was coming
   out in TAY Lennon on Caravan, Coconat on Cotton, and so on down the
   network. Same stack as the preset, minus the override. */
:root {
	--vhc-collection-font-display: "Ortica Linear", Georgia, 'Times New Roman', serif;
	--section-accent: var(--wp--preset--color--golden-hour);
	/* Rev2 rules lines solid midnight (pearl on dark), not translucent. */
	--section-hairline: var(--wp--preset--color--midnight);
	--valencia-header-bar-height: 48px;
	/* Total fixed-header height (bar + announcement); nav.js keeps it current. */
	--valencia-header-height: 48px;
}

.wp-block-group.is-style-section-midnight {
	--section-accent: var(--wp--preset--color--golden-hour-tint);
	--section-hairline: var(--wp--preset--color--pearl);
	/* A site that pins its kickers to ink (The George) still needs them
	   legible on midnight. */
	--vhc-hotel-kicker: var(--wp--preset--color--golden-hour-tint);
}

/* ─── Accessibility ──────────────────────────────────────────────────── */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.skip-link:focus {
	background: var(--wp--preset--color--midnight);
	clip-path: none;
	color: var(--wp--preset--color--pearl);
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 1rem;
	letter-spacing: 0.14em;
	padding: 0.75rem 1.25rem;
	text-transform: uppercase;
	top: 1rem;
	width: auto;
	z-index: 200;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--golden-hour);
	outline-offset: 2px;
}

/* Push page content below the fixed header. */
body {
	padding-top: var(--valencia-header-height);
}

/* Keep the viewport width stable when dialogs lock scrolling — without
   this the vanishing scrollbar shifts the centered header brand. */
html {
	scrollbar-gutter: stable;
}

img {
	height: auto;
	max-width: 100%;
}

/* ─── Content containment ───────────────────────────────────────────── */
/* Classic templates print the_content() without WP's root layout wrapper,
   so root-level blocks get no width constraint. This mirrors constrained
   layout: content width by default, wide and full opt-outs. */
.entry-content > *,
.vhc-band > * {
	margin-left: auto;
	margin-right: auto;
	max-width: min(var(--wp--style--global--content-size, 1024px), calc(100% - var(--vhc-band-gutter, 3rem)));
}

/* The collage intro rides along: it's authored as a plain columns block,
   but it's sized as a wide section so its edges land on the .alignwide
   sections it sits between. Sharing the selector keeps them identical by
   construction — see the note at .vhc-collage for why it's capped. */
.entry-content > .alignwide,
.vhc-band > .alignwide,
.entry-content > .vhc-collage {
	max-width: min(var(--wp--style--global--wide-size, 1380px), calc(100% - var(--vhc-band-gutter, 3rem)));
}

.entry-content > .alignfull,
.vhc-band > .alignfull {
	max-width: none;
}

/* Full-bleed background bands wrapping runs of sections. */
.vhc-band--white {
	background: var(--wp--preset--color--white);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Per-site tinted bands (hotel sites, Settings → Valencia brand_band /
   brand_band_light / brand_on_band): the light band is a white band in a
   property's pale tone; the brand band is the property's colour with its
   on-band ink (The George: light blue story / offers bands, blue rooms
   band with off-white type). Sites that set nothing fall back to white. */
.vhc-band--tint {
	background: var(--vhc-hotel-band-light, var(--wp--preset--color--white));
	padding-bottom: var(--wp--preset--spacing--60);
}

.vhc-band--brand {
	--vhc-hotel-kicker: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
	--section-hairline: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
	background: var(--vhc-hotel-band, var(--wp--preset--color--white));
	color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
	padding-bottom: var(--wp--preset--spacing--60);
}

.vhc-band--brand .vhc-rooms__title,
.vhc-band--brand .vhc-rooms__ctas .vhc-hbtn {
	color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
}

/* The underline CTA keeps the accent for its text on the brand band (the
   comp's red RESERVE on blue), where midnight would sink. */
.vhc-band--brand .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--section-accent);
}

/* Dot kickers read midnight everywhere (the rule below the band styles);
   on the brand band they take the on-band ink. */
.vhc-band--brand .is-style-eyebrow.vhc-eyebrow--dot {
	color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
}

/* ─── Type helpers & core-block styles ──────────────────────────────── */

/* Eyebrow: wide-tracked uppercase Outfit label above section headings. */
.is-style-eyebrow {
	/* Hotel sites may pin kickers to a colour / weight (The George: ink,
	   bold) via brand_kicker / brand_kicker_weight; the accent is the default. */
	color: var(--vhc-hotel-kicker, var(--section-accent));
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--vhc-hotel-kicker-weight, 400);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Sites whose display face carries its emphasis as an italic rather than a
   weight step (The George's Mazius Display Extra Italic): headline
   <strong> runs go italic. Body class from brand_emphasis = italic. */
body.has-emphasis-italic :is(h1, h2, h3, .vhc-intro-split__title, .vhc-staggered__title, .vhc-collage__title, .vhc-duo__title, .vhc-hero__center-title, .vhc-hero__statement) strong {
	font-style: italic;
}

/* Hairline separator (1px, tint). */
.wp-block-separator.is-style-hairline {
	background: none;
	border: 0;
	border-top: 1px solid var(--section-hairline);
	height: 0;
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Outline: golden-hour keyline, transparent fill (e.g. MANAGE RESERVATIONS). */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--section-accent);
	color: var(--section-accent);
	padding: 0.625rem 1.375rem;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--section-accent);
	color: var(--wp--preset--color--midnight);
}

/* Underlined: tracked text link with underline offset, no fill. */
.wp-block-button.is-style-underlined .wp-block-button__link {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: currentColor;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 0.5em;
}

.wp-block-button.is-style-underlined .wp-block-button__link:hover {
	color: var(--section-accent);
}

/* ─── Announcement banner ───────────────────────────────────────────────
   Renders inside the fixed header, below the bar's hairline (Rev2). */
/* display:flex would beat the [hidden] UA style — restore it, or the
   dismiss button sets the attribute to no visible effect. */
.announcement-banner[hidden] {
	display: none;
}

.announcement-banner {
	align-items: center;
	background: var(--wp--preset--color--pearl);
	border-bottom: 1px solid var(--section-hairline);
	border-top: 1px solid var(--section-hairline);
	color: var(--wp--preset--color--midnight);
	display: flex;
	font-size: 0.6875rem;
	font-weight: 500;
	gap: 1rem;
	justify-content: center;
	letter-spacing: 0.14em;
	padding: 0.875rem 3rem;
	position: relative;
	text-align: center;
	text-transform: uppercase;
}

/* Over a wordmark hero the banner is transparent pearl-on-image. */
body.has-immersive-hero .site-header:not(.is-past-hero) .announcement-banner {
	background: transparent;
	border-bottom-color: var(--wp--preset--color--pearl);
	border-top-color: var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--pearl);
}

/* With the banner visible its own borders rule the lines — the header's
   bottom shadow would double the banner's border-bottom. */
body.has-announcement-banner-visible .site-header,
body.has-announcement-banner-visible.has-immersive-hero .site-header:not(.is-past-hero) {
	box-shadow: none;
}

.announcement-banner__text {
	margin: 0;
}

.announcement-banner a {
	color: inherit;
}

.announcement-banner__dismiss {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
}

/* ─── Hotel template: patterns ──────────────────────────────────────── */
/* Centered hero headline with the property crest between the lines. */
.vhc-hero--center .wp-block-cover__inner-container {
	align-items: center;
	display: flex;
	justify-content: center;
}

.vhc-hero__center-title {
	align-items: center;
	color: var(--wp--preset--color--pearl);
	display: flex;
	flex-direction: column;
	font-size: clamp(1.75rem, 3.35vw, 3rem);
	font-weight: 400;
	gap: 0.75rem;
	letter-spacing: 0.13em;
	line-height: 1.2;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

.vhc-hero__crest {
	height: auto;
	width: 65px;
}

/* Interior hotel pages: smaller single-line centered hero title. */
.vhc-hero--center-sm .vhc-hero__center-title {
	font-size: clamp(1.5rem, 2.8vw, 2.5rem);
	/* BugHerd Riverwalk #58: the two lines were carrying both a 1.2 line
	   height and the stack's 0.75rem gap on top of it. */
	gap: 0.25rem;
	letter-spacing: 0.14em;
	line-height: 1.1;
}

/* BugHerd Riverwalk #91: the clamp bottoms out at 1.75rem, so every phone
   got 28px and the statement read small. 36px on the homepage hero; the
   interior rule above is more specific, so those keep their own size. */
@media (max-width: 781px) {
	.vhc-hero__center-title {
		font-size: 2.25rem;
	}

	/* Riverwalk #112: the cover's own mobile padding bottoms out at 16-18px,
	   and the title is a shrink-to-fit flex item, so a headline long enough
	   to fill the line runs to within 18px of the screen edge at 393 and
	   16px at 319 -- against a 40px gutter everywhere else on the page.
	   Measured: Meetings & Events 18/18, Offers 16/16, and both 16/16 at 319.

	   Padding on the title rather than the cover: the title is the only
	   thing that needs holding off the edge, and because it is shrink-to-fit
	   a short centred headline (Explore, Rooms) just grows its box by the
	   same amount on both sides and looks identical. 1.5rem puts the long
	   ones at 42px at 393 and 40px at 319 -- a shade wider than the body
	   measure. */
	.vhc-hero__center-title {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* Padding alone could not do it. These headlines are authored with their
	   own line breaks ("Meetings, weddings" / "& magical occasions") and the
	   interior size is a clamp whose FLOOR is 24px, so the clamp never comes
	   down on a phone. At 24px the longest line measures 357px natural and the
	   screen offers exactly 357px -- the type is sized to the millimetre of
	   the glass, which is why it touches it. Offers' longest is 377px and was
	   already wrapping before this pass.

	   So 4px comes off the interior hero on mobile. At 20px every hero line on
	   the site fits its authored break inside the new gutter: Meetings 298 of
	   321 available, Offers 314, Wellness 283, Rooms 231, Explore 178. With
	   the 24px kept, padding could only ever buy ~16px before those lines
	   broke in half, which would read worse than the tight margin does.

	   The HOME hero is untouched: it is the base selector at 2.25rem, set
	   deliberately by #91, and its lines already wrap by design (537px and
	   415px natural). Only .vhc-hero--center-sm, the interior pages, changes. */
	.vhc-hero--center-sm .vhc-hero__center-title {
		font-size: 1.25rem;
	}
}

/* Hotel boxed button (accent keyline; e.g. rooms Reserve). */
.vhc-btn-box {
	border: 1px solid var(--section-accent);
	color: var(--section-accent);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	padding: 0.5rem 1.375rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.vhc-btn-box:hover {
	background: var(--section-accent);
	color: var(--wp--preset--color--pearl);
}

/* Box button as a block style — patterns opting into the keyline box for
   core button blocks (hotel Meetings & Events CTAs). Wins over the hotel
   sites' outline→underline recast by not being outline at all. */
.wp-block-button.is-style-box .wp-block-button__link {
	background: none;
	border: 1px solid var(--section-accent);
	border-radius: 0;
	color: var(--section-accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	padding: 0.5rem 1.375rem;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.wp-block-button.is-style-box .wp-block-button__link:hover {
	background: var(--section-accent);
	color: var(--wp--preset--color--pearl);
}

/* Hotel underline button (the property sites' primary CTA style). */
.vhc-hbtn {
	border-bottom: 1px solid var(--section-accent);
	color: var(--section-accent);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	padding-bottom: 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.vhc-hbtn:hover {
	color: var(--wp--preset--color--midnight);
}

/* Hotel sites recast the outline button style as the underline CTA. */
body.is-brand-hotel .wp-block-button.is-style-outline .wp-block-button__link {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--section-accent);
	border-radius: 0;
	color: var(--wp--preset--color--midnight);
	padding: 0 0 0.75rem;
}

body.is-brand-hotel .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: none;
	color: var(--section-accent);
}

/* Inert pager arrows (rooms showcase, testimonial) — live sliders come
   with their CPT/content phases. */
.vhc-rooms__arrows {
	display: flex;
	gap: 0.75rem;
}

/* .vhc-rooms__photo-arrow (BugHerd #94, mobile-only) shares this look —
   a distinct class rather than reusing .vhc-rooms__arrow, since that one
   is also the room-type pager's and is delegated at the whole .vhc-rooms
   band; a click on this one would otherwise bubble up and double-fire. */
.vhc-rooms__arrow,
.vhc-rooms__photo-arrow {
	background: none;
	border: 1px solid var(--section-accent);
	border-radius: 50%;
	color: var(--section-accent);
	cursor: pointer;
	height: 30px;
	position: relative;
	width: 30px;
}

.vhc-rooms__arrow:disabled,
.vhc-rooms__photo-arrow:disabled {
	cursor: default;
}

/* Pager row: prev / serif counter / next. */
.vhc-rooms__pager {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.vhc-rooms__count {
	color: var(--section-accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	letter-spacing: 0.15em;
}

.vhc-rooms__arrow::before,
.vhc-rooms__photo-arrow::before {
	color: var(--section-accent);
	font-size: 0.9375rem;
	left: 50%;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -52%);
}

.vhc-rooms__arrow--prev::before,
.vhc-rooms__photo-arrow--prev::before {
	content: '\2190';
}

.vhc-rooms__arrow--next::before,
.vhc-rooms__photo-arrow--next::before {
	content: '\2192';
}

/* Photo pager row (BugHerd #94, mobile only): centred, below the photo. */
.vhc-rooms__photo-arrows {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.25rem;
}

/* Splide's own CSS makes .splide__list a flex row, and flex's default
   align-items: stretch makes every slide match the tallest one — found
   testing #94, where the tall photo's slide height was leaking into the
   wide and small ones after view.js's manual height sync measured the
   (stretched) slide instead of its image. flex-start lets each slide take
   its own content height, which is what that sync is measuring for. */
.vhc-rooms__media.is-enhanced .splide__list {
	align-items: flex-start;
}

/* Story collage. */
.vhc-story {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60);
}

/* "Our Story" took the ROOT GUTTER while every other section label on the page
   takes the wide box, so its text sat at a fixed 91px however large the screen
   got. The two agree while the wide box is still width-constrained — 91 against
   75 at 1280, 91 against 93 at 1464 — which is why this only shows up wide:
   past about 1428px the box stops growing and starts centring, and the root
   gutter keeps tracking the viewport edge. At 1920 that left "Our Story" 230px
   to the left of its own collage, which is contained to the same 1380 box.
   That part of the fix still holds: the max-width/margin-inline below.

   The padding-left this used to carry is gone — it mirrored
   `.vhc-rooms > .is-style-eyebrow`'s own 24px, which BugHerd Riverwalk #37
   gave that one because .vhc-rooms__layout sat 24px in from its slider's
   edge at the time. That stopped being true once #94's mobile-slider work
   fixed a double-gutter bug in .vhc-rooms__layout, which left both eyebrows
   24px past their own titles and photos — caught live, both removed
   together so they stay in agreement. */
.vhc-story > .is-style-eyebrow {
	margin-bottom: 1.5rem;
	margin-inline: auto;
	max-width: min(1380px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-story__collage {
	height: clamp(320px, 39vw, 560px);
	margin: 0 auto;
	max-width: min(1380px, calc(100% - var(--vhc-band-gutter, 3rem)));
	position: relative;
}

.vhc-story__frame {
	background: var(--wp--preset--color--white);
	box-shadow: 0 10px 30px rgba(19, 30, 41, 0.12);
	margin: 0;
	padding: 0.625rem;
	position: absolute;
}

.vhc-story__frame img {
	display: block;
	height: auto;
	width: 100%;
}

.vhc-story__frame--vintage {
	left: 13%;
	top: 11%;
	width: clamp(180px, 30.5vw, 441px);
}

.vhc-story__frame--illustration {
	left: 40%;
	top: 0;
	width: clamp(190px, 31.7vw, 457px);
	z-index: 2;
}

/* Cutout: the revised home (12072:2406) draws the orange sketch 245 wide
   at the vintage frame's bottom-left (x 115 / y 1527 of a 1237-topped,
   560-tall collage); the oranges branch before it sat at 152 / 9.7%.

   BugHerd Riverwalk #90: that 245 was measured off the orange sketch, which
   is wide and short. The client's streetlamp inherited the slot and is
   narrow and tall, so at the same width it stood 662 high inside a 560-tall
   band and the post ran straight through the "A keeper of Houston Street's
   history" heading. Scaled to a third, per Courtney. */
.vhc-story__cutout {
	height: auto;
	left: 6.2%;
	position: absolute;
	top: 52%;
	width: clamp(64px, 5.7vw, 82px);
	z-index: 3;
}

.vhc-story__crest {
	height: auto;
	position: absolute;
	right: 17%;
	top: var(--vhc-story-crest-top, 0);
	width: var(--vhc-story-crest-width, clamp(140px, 19.5vw, 281px));
	/* The script writes across the illustration frame, per comp. */
	z-index: 4;
}

/* BugHerd Riverwalk #144 / Santana Row #32 (Meg, 2026-09-29): the vintage
   photo is meant to sit in front of the illustration, not behind it —
   scoped to these two rather than the shared rule, since The George's
   arrangement (illustration on top) hasn't been flagged. Measured off
   each mockup: the postage-stamp crest sits ~34% of the illustration
   frame's own width (155px, fixed rather than viewport-scaled — a stamp
   reads as a fixed physical size regardless of screen width), at a
   different height per property since the two comps place it differently
   relative to the photos beneath it. */
body.is-hotel-riverwalk .vhc-story__frame--vintage,
body.is-hotel-santana-row .vhc-story__frame--vintage {
	z-index: 3;
}

body.is-hotel-riverwalk .vhc-story__crest {
	--vhc-story-crest-top: 55%;
	--vhc-story-crest-width: 155px;
}

body.is-hotel-santana-row .vhc-story__crest {
	--vhc-story-crest-top: 43%;
	--vhc-story-crest-width: 155px;
}

/* #144: the streetlamp overlapping the vintage photo "a bit more." */
body.is-hotel-riverwalk .vhc-story__cutout {
	left: 3%;
	top: 48%;
}

.vhc-story__row {
	margin: var(--wp--preset--spacing--50) auto 0;
	max-width: min(1200px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-story__head {
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.6;
	margin: 0;
	max-width: 260px;
	text-transform: uppercase;
}

.vhc-story__lead {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin: 0 0 1.5rem;
	max-width: 540px;
}

.vhc-story__copy {
	color: var(--wp--preset--color--midnight);
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0;
	max-width: 420px;
}

/* Rooms showcase. */
.vhc-rooms {
	padding-top: var(--wp--preset--spacing--60);
}

.vhc-rooms > .is-style-eyebrow {
	/* BugHerd Riverwalk #37 gave this a 24px padding-left because
	   .vhc-rooms__layout sat 24px in from the slider's edge back then (its
	   own max-width was subtracting the band gutter a second time against
	   an already-narrowed parent — fixed while building #94's mobile
	   slider). Layout sits flush with the slider now, so the padding that
	   used to match it was pointing the eyebrow 24px past its own title
	   and photos — Hunter caught this live. Removed; .vhc-story's eyebrow
	   below, which was deliberately calibrated to mirror this one, drops
	   the same 24px for the same reason. */
	margin-bottom: 2.5rem;
	max-width: min(1380px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-rooms__slider {
	margin: 0 auto;
	max-width: min(1380px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

/* No max-width/gutter of its own (found while building #94's mobile
   slider): .vhc-rooms__layout is one fade-slide inside .vhc-rooms__slider,
   which already centres and gutters the whole band — that slider's 100%
   IS the gutter-constrained width, so this element's own
   calc(100% - var(--vhc-band-gutter)) was subtracting the gutter a second
   time against an already-narrowed parent. Barely visible on desktop at
   3rem (~48px off a 1380px layout); at mobile's 5rem it took 393px down
   to 233 — the rooms slider had been running that narrow all along, the
   absolute-positioned collage just didn't make it look broken. */
.vhc-rooms__layout {
	display: grid;
	gap: 3.75rem;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.vhc-rooms__detail {
	align-self: start;
	padding-top: 8.5rem;
}

.vhc-rooms__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0 0 2.75rem;
	max-width: 380px;
}

.vhc-rooms__ctas {
	align-items: center;
	display: flex;
	gap: 1.75rem;
}

/* Align the underline CTA's baseline with the boxed button. */
.vhc-rooms__ctas .vhc-hbtn {
	padding-bottom: 0.375rem;
}

.vhc-rooms__media {
	/* Proportional canvas (comp: 900w x 713h) so the cluster's overlap
	   holds at every width. */
	aspect-ratio: 900 / 713;
	position: relative;
}

.vhc-rooms__media figure {
	margin: 0;
	position: absolute;
}

.vhc-rooms__media img {
	display: block;
	height: auto;
	width: 100%;
}

.vhc-rooms__tall {
	left: 0;
	top: 0;
	width: 46.7%;
}

.vhc-rooms__tall img {
	aspect-ratio: 420 / 630;
	object-fit: cover;
}

.vhc-rooms__wide {
	right: 0;
	top: 20.8%;
	width: 46.7%;
}

.vhc-rooms__wide img {
	aspect-ratio: 420 / 280;
	object-fit: cover;
}

/* Overlaps the tall image's bottom-right corner, per comp. */
.vhc-rooms__small {
	box-shadow: 0 10px 30px rgba(19, 30, 41, 0.18);
	left: 38.9%;
	top: 75.7%;
	width: 28.8%;
	z-index: 2;
}

.vhc-rooms__small img {
	aspect-ratio: 259 / 173;
	object-fit: cover;
}

/* Dining cards. */
.vhc-dine {
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50);
}

.vhc-dine > .is-style-eyebrow {
	margin-bottom: 2.5rem;
}

.vhc-dine__layout {
	display: grid;
	gap: 2rem 1.875rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Three outlets (Santana Row: Vbar, Oveja Negra, Cielo): the intro takes
   the first row across all three tracks, the cards the second. */
.vhc-dine__layout--three .vhc-dine__intro {
	grid-column: 1 / -1;
}

.vhc-dine__layout--three .vhc-dine__copy {
	max-width: 480px;
}

.vhc-dine__head {
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.6;
	margin: 0 0 1.5rem;
	text-transform: uppercase;
}

.vhc-dine__copy {
	color: var(--wp--preset--color--midnight);
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0 0 2.5rem;
	max-width: 300px;
}

.vhc-dine__cutout {
	height: auto;
	width: 93px;
}

.vhc-dine__card {
	margin: 0;
}

/* BugHerd #39 — the dining photographs top-align with the eyebrow rather than
   with the headline beside them. The eyebrow is a sibling above the grid, so
   the cards are lifted back over its line box and its bottom margin; the
   matching bottom margin hands that height back, keeping the band's own
   height and everything below it exactly where it was.

   Desktop only: below 782px the grid collapses to one column and the cards
   sit under the headline, where a lift would drag them over it.

   The three-outlet layout is left alone — it puts its intro across all three
   tracks with the cards already on a row of their own. */
@media (min-width: 782px) {
	.vhc-dine__layout:not(.vhc-dine__layout--three) .vhc-dine__card {
		/* The eyebrow's own line box (small, at the body's 1.4) plus the
		   2.5rem set on .vhc-dine > .is-style-eyebrow. */
		--vhc-dine-eyebrow-lift: calc(var(--wp--preset--font-size--small) * 1.4 + 2.5rem);

		margin-bottom: var(--vhc-dine-eyebrow-lift);
		margin-top: calc(-1 * var(--vhc-dine-eyebrow-lift));
	}
}

.vhc-dine__media {
	display: block;
	margin-bottom: 1.375rem;
}

.vhc-dine__media img {
	aspect-ratio: 420 / 515;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-dine__sub {
	color: #717b85;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: 0.02em;
	margin: 0 0 0.875rem;
	text-transform: capitalize;
}

.vhc-dine__desc {
	color: #606060;
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0;
	max-width: 420px;
}

/* Dining venues (hotel Dining page): alternating editorial features on a
   ~960px sub-grid — tall photo one side, detail column (offset small
   photo, serif name, copy, underline CTA) the other. Odd rows reverse
   inside a full-bleed white band with the small photo hanging below the
   text into the column gap. */
.vhc-dinev {
	--dinev-width: min(960px, 100% - 3rem);
	padding: 0;
}

/* Decorative cutout leads the section, aligned with the detail column. */
.vhc-dinev__cutout {
	display: block;
	height: auto;
	margin: 0 0 5.5rem calc((100% - var(--dinev-width)) / 2 + var(--dinev-width) * 0.624);
	mix-blend-mode: multiply;
	width: 105px;
}

.vhc-dinev__venue {
	align-items: start;
	column-gap: 10.4%;
	display: grid;
	grid-template-columns: 52% 1fr;
	margin: 0 auto;
	max-width: var(--dinev-width);
}

.vhc-dinev__main {
	margin: 0;
}

.vhc-dinev__main img {
	aspect-ratio: 499 / 645;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-dinev__detail {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	/* Small photo drops below the tall photo's top edge (per comp). */
	padding-top: 4.3125rem;
}

.vhc-dinev__alt {
	margin: 0 0 1.25rem;
	width: 180px;
}

.vhc-dinev__alt img {
	aspect-ratio: 180 / 233;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-dinev__name {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.225;
	margin: 0 0 1.25rem;
	max-width: 380px;
}

.vhc-dinev__copy {
	color: var(--wp--preset--color--midnight);
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0 0 1.75rem;
	max-width: 366px;
}

/* White band around reversed rows; footer sits flush below the last one. */
.vhc-dinev__band {
	background: var(--wp--preset--color--white);
	margin-top: 9.5rem;
	padding: 8.4375rem 0;
}

.vhc-dinev__venue--reversed {
	grid-template-columns: 1fr 44.2%;
}

.vhc-dinev__venue--reversed .vhc-dinev__main img {
	aspect-ratio: 424 / 485;
}

.vhc-dinev__venue--reversed .vhc-dinev__detail {
	padding-top: 0;
}

/* Reversed rows: the small photo hangs below the CTA, pushed toward the
   column gap. */
.vhc-dinev__venue--reversed .vhc-dinev__alt {
	margin: 4.25rem 0 0 45%;
	order: 10;
	width: 241px;
}

.vhc-dinev__venue--reversed .vhc-dinev__alt img {
	aspect-ratio: 241 / 311;
}

@media (max-width: 900px) {
	.vhc-dinev__cutout {
		margin: 0 auto 3rem;
	}

	.vhc-dinev__venue {
		grid-template-columns: 1fr;
		row-gap: 2.5rem;
	}

	.vhc-dinev__venue--reversed .vhc-dinev__main {
		order: -1;
	}

	.vhc-dinev__detail {
		padding-top: 0;
	}

	/* Riverwalk #111 + #110: the reversed row gives .vhc-dinev__alt
	   `order: 10` so the small photo hangs below the CTA, pushed toward the
	   column gap -- right for the desktop two-column row, wrong once the
	   row stacks, because order 10 keeps it last inside the detail column
	   and it lands under the body copy instead of under the large image.
	   This block already reset the margin for mobile and missed the order.
	   #111 is "image should fall below the larger image, not below the
	   text"; #110 is the 303px gap that the detour through the text left
	   between the two photographs (the un-reversed row measured 60px).
	   Resetting the order puts it first in the column, directly under the
	   large image, matching the un-reversed row exactly. */
	.vhc-dinev__venue--reversed .vhc-dinev__alt {
		margin: 2rem 0 0;
		order: 0;
	}

	.vhc-dinev__band {
		margin-top: 5rem;
		padding: 4rem 0;
	}
}

/* Local experiences. */
.vhc-localx {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60);
}

.vhc-localx > .is-style-eyebrow {
	margin-bottom: 2.5rem;
}

.vhc-localx__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vhc-localx__item {
	margin: 0;
}

.vhc-localx__media {
	margin: 0 0 1.75rem;
}

.vhc-localx__media img {
	display: block;
	height: auto;
	width: 100%;
}

.vhc-localx__item--landscape .vhc-localx__media img {
	aspect-ratio: 643 / 388;
	object-fit: cover;
}

.vhc-localx__item--portrait .vhc-localx__media img {
	aspect-ratio: 643 / 632;
	object-fit: cover;
}

/* Item title: the revised Riverwalk home (12072:2406, client feedback
   2026-09-19) sets it in Subhead 2 — serif 16, capitalised — over a
   mid-tint description; it was an Outfit caps label before. */
.vhc-localx__title {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	letter-spacing: 0.02em;
	margin: 0 0 0.5rem;
	text-transform: capitalize;
}

.vhc-localx__copy {
	color: #717b85; /* comp midnight mid-tint */
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0 0 1.75rem;
	max-width: 420px;
}

/* BugHerd Riverwalk #96: on mobile the two-up grid becomes a one-card
   peek slider with Splide's dot pagination (view.js) — the ticket's own
   "radio buttons" option, read against the pattern already built for
   #100/#106, since this pair of uneven crops is closer to a card pair
   than a photo collage. The single column is the pre-JS / JS-off
   fallback, which also happens to satisfy the ticket's other option
   ("one over one") on its own. */
@media (max-width: 781px) {
	.vhc-localx__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The band is align:wide, so the grid sits inset by the site gutter
	   before the track's own 24px peek padding even starts — same fix as
	   the offers grid's #100/#106 bled to the real screen edge. */
	.vhc-localx__grid.is-enhanced {
		margin-left: calc(-1 * var(--wp--style--root--padding-left));
		margin-right: calc(-1 * var(--wp--style--root--padding-right));
	}
}

.vhc-localx__grid.is-enhanced .splide__list {
	align-items: flex-start;
}

.vhc-localx__grid.is-enhanced .splide__pagination {
	display: flex;
	gap: 0.625rem;
	justify-content: center;
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
}

.vhc-localx__grid.is-enhanced .splide__pagination__page {
	background: none;
	border: 1px solid var(--section-accent);
	border-radius: 50%;
	cursor: pointer;
	height: 8px;
	padding: 0;
	width: 8px;
}

.vhc-localx__grid.is-enhanced .splide__pagination__page.is-active {
	background: var(--section-accent);
}

/* Wellness grid (hotel template): staggered rows pairing a small
   captioned photo with a tall one; the trailing small photo in a flipped
   row drops below its neighbor's top edge (comp's offset). */
.vhc-wellx {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--80);
}

.vhc-wellx > .is-style-eyebrow {
	margin-bottom: 3.5rem;
}

.vhc-wellx__row {
	align-items: start;
	display: grid;
	grid-template-columns: 35% 54.7%;
	justify-content: space-between;
}

.vhc-wellx__row--flip {
	grid-template-columns: 54.7% 35%;
}

.vhc-wellx__row + .vhc-wellx__row {
	margin-top: var(--wp--preset--spacing--80);
}

.vhc-wellx__item {
	margin: 0;
}

.vhc-wellx__item--push {
	margin-top: clamp(3rem, 12.5vw, 11.25rem);
}

.vhc-wellx__media {
	margin: 0 0 1.5rem;
}

.vhc-wellx__media img {
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-wellx__item--small .vhc-wellx__media img {
	aspect-ratio: 420 / 389;
}

.vhc-wellx__item--tall .vhc-wellx__media img {
	aspect-ratio: 656 / 748;
}

.vhc-wellx__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 0.875rem;
}

.vhc-wellx__copy {
	color: #717b85; /* comp's midnight mid-tint */
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0;
	max-width: 420px;
}

.vhc-wellx__links {
	list-style: none;
	margin: 1.5rem 0 0;
	max-width: 420px;
	padding: 0;
}

.vhc-wellx__links li {
	margin: 0 0 0.375rem;
	padding-left: 1.5625rem;
	position: relative;
}

.vhc-wellx__links li::before {
	background: var(--wp--preset--color--golden-hour);
	border-radius: 50%;
	content: '';
	height: 7px;
	left: 0;
	position: absolute;
	top: 0.45em;
	width: 7px;
}

.vhc-wellx__links a {
	color: #717b85;
	text-underline-offset: 0.2em;
	transition: color 0.25s ease;
}

.vhc-wellx__links a:hover {
	color: var(--section-accent);
}

.vhc-wellx__cta {
	margin-top: 2.5rem;
}

@media (max-width: 767px) {
	.vhc-wellx__row,
	.vhc-wellx__row--flip {
		grid-template-columns: 1fr;
		row-gap: 3rem;
	}

	.vhc-wellx__row + .vhc-wellx__row {
		margin-top: 3rem;
	}

	.vhc-wellx__item--push {
		margin-top: 0;
	}
}

/* Hotel offer cards: sans caps titles + tracked Book Now (comp). */
body.is-brand-hotel .vhc-offer-card__title {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: 0.14em;
	/* No property line on hotel cards — the title carries the air. */
	margin: 1.5rem 0 0.75rem;
	text-transform: uppercase;
}

/* Offer copy reads mid-tint on the revised home (12072:2406). */
body.is-brand-hotel .vhc-offer-card__excerpt {
	color: #717b85;
}

body.is-brand-hotel .vhc-offer-card__link {
	border-bottom-color: var(--section-accent);
	color: var(--section-accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	padding-bottom: 0.75rem;
	text-transform: uppercase;
}

body.is-brand-hotel .vhc-offer-card__link:hover {
	border-bottom-color: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--midnight);
}

/* Testimonial. */
.vhc-quote {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr minmax(0, 840px);
	padding: var(--wp--preset--spacing--60) 0;
}

.vhc-quote > .is-style-eyebrow {
	margin: 0;
}

.vhc-quote__text {
	border: 0;
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin: 0 0 2rem;
	padding: 0;
}

.vhc-quote__attr {
	color: #717b85;
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: 0.14em;
	margin: 0 0 2.25rem;
	text-transform: uppercase;
}

/* Rooms grid (hotel template): filter bar + card grid; accessible rooms
   group under their own kicker. */
.vhc-rooms-grid {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60);
}

.vhc-rooms-grid__bar {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 2.5rem;
}

.vhc-rooms-grid__bar .is-style-eyebrow {
	margin: 0;
}

.vhc-rooms-grid__filters {
	display: flex;
	gap: 2.5rem;
}

.vhc-rooms-grid__filter {
	position: relative;
}

.vhc-rooms-grid__filter > button {
	align-items: center;
	background: none;
	border: 0;
	color: var(--section-accent);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 0.5rem;
	letter-spacing: 0.14em;
	padding: 0;
	text-transform: uppercase;
}

/* BugHerd Riverwalk #54: a drawn chevron rather than a filled triangle —
   two sides of a small square, turned. */
.vhc-rooms-grid__chevron {
	border-bottom: 1.5px solid var(--section-accent);
	border-right: 1.5px solid var(--section-accent);
	display: inline-block;
	height: 7px;
	transform: translateY(-2px) rotate(45deg);
	width: 7px;
}

.vhc-rooms-grid__filter ul {
	background: var(--wp--preset--color--white);
	box-shadow: 0 12px 32px rgba(19, 30, 41, 0.18);
	list-style: none;
	margin: 0.5rem 0 0;
	min-width: 160px;
	padding: 0.375rem 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 30;
}

.vhc-rooms-grid__filter ul button {
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	display: block;
	font-size: var(--wp--preset--font-size--subhead);
	padding: 0.45rem 1.125rem;
	text-align: left;
	white-space: nowrap;
	width: 100%;
}

.vhc-rooms-grid__filter ul button:hover {
	background: rgba(19, 30, 41, 0.06);
}

.vhc-rooms-grid__subkicker {
	margin: var(--wp--preset--spacing--50) 0 2.5rem;
}

.vhc-rooms-grid__items {
	display: grid;
	gap: 3.5rem 1.875rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vhc-room-card {
	margin: 0;
}

.vhc-room-card__slider,
.vhc-room-card__media {
	margin: 0 0 1.5rem;
}

/* Landscape cards — outranks the cgrid slider's portrait ratio. */
.vhc-room-card .vhc-cgrid-card__slider img,
.vhc-room-card__slider img,
.vhc-room-card__media img {
	aspect-ratio: 420 / 280;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-room-card__name {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.35;
	margin: 0 0 0.875rem;
	text-transform: uppercase;
}

.vhc-room-card__desc {
	color: #717b85;
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0 0 1.5rem;
}

.vhc-room-card__desc p {
	margin: 0 0 0.75rem;
}

/* Privacy Policy: eyebrow + intro copy above the plain policy accordion. */
.vhc-privacy-intro {
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50);
}

/* FAQ accordion (hotel template): serif accent questions on the plain
   accordion chassis, with a heading/intro row above. */
.vhc-faq__intro {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	margin: 0 auto var(--wp--preset--spacing--50);
	max-width: min(1080px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-faq__head {
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.6;
	margin: 0;
	max-width: 280px;
	text-transform: uppercase;
}

.vhc-faq__copy {
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0;
	max-width: 522px;
}

.vhc-tiers--faq {
	padding-bottom: var(--wp--preset--spacing--80);
}

.vhc-tiers--faq .vhc-tier summary {
	color: var(--section-accent);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	padding: 1.125rem 0 1.375rem;
}

.vhc-tiers--faq .vhc-tier summary:hover {
	color: var(--wp--preset--color--midnight);
}

/* Press / Awards & Recognition (Figma node 2016:2767) — the FAQ chassis on
   the page's pearl ground (no white band), light serif intro, and the
   comp's roomy gap before the first year. */
.vhc-tiers--press .vhc-faq__intro {
	column-gap: 2rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 522px);
	margin-bottom: 8.5rem;
}

.vhc-tiers--press .vhc-faq__copy {
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

/* Year rows sit at H2 size on the comp's ~92px pitch (the FAQ chassis runs
   a size smaller and tighter). */
.vhc-tiers--press .vhc-tier summary {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	padding: 1.0625rem 0 1.625rem;
}

/* Open year gets a rule under its name; the citation rows hang below it. */
.vhc-tiers--press .vhc-tier[open] > summary {
	border-bottom: 1px solid var(--section-hairline);
}

/* Citation rows: property + city | citation | outbound arrow, separated by
   midnight-tint hairlines (the year rows keep the solid midnight rule). */
.vhc-tiers--press .vhc-tier > .vhc-award {
	align-items: start;
	border-bottom: 1px solid var(--wp--preset--color--midnight-tint);
	column-gap: 2rem;
	display: grid;
	grid-template-columns: minmax(0, calc(40.4% - 2rem)) minmax(0, 1fr) auto;
	margin: 0;
	max-width: none;
	padding: 1.4375rem 0;
}

.vhc-tiers--press .vhc-tier > .vhc-award:first-of-type {
	padding-top: 2.25rem;
}

.vhc-tiers--press .vhc-tier > .vhc-award:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 2.4375rem;
}

.vhc-award__name {
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.36;
	margin: 0;
	text-transform: uppercase;
}

.vhc-award__location {
	/* Comp's "midnight: mid tint" — not in the palette. */
	color: #717b85;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.27;
	margin: 0.25rem 0 0;
}

.vhc-award__citation {
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0;
}

.vhc-award__link {
	color: var(--wp--preset--color--midnight);
	display: inline-flex;
	justify-self: end;
	line-height: 0;
	margin-top: 0.4375rem;
	transition: color 0.25s ease;
}

a.vhc-award__link:hover {
	color: var(--wp--preset--color--golden-hour);
}

.vhc-award__arrow {
	display: block;
	height: 15px;
	width: 15px;
}

@media (max-width: 781px) {
	.vhc-tiers--press .vhc-faq__intro {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 4rem;
		row-gap: 1.5rem;
	}

	/* Property + arrow share the first row; the citation runs full width
	   beneath them. */
	.vhc-tiers--press .vhc-tier > .vhc-award {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.vhc-tiers--press .vhc-tier > .vhc-award .vhc-award__citation {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 0.75rem;
	}

	.vhc-tiers--press .vhc-tier > .vhc-award .vhc-award__link {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0.125rem;
	}
}

/* Generic "content pending" note — reused wherever an accordion/list row's
   real copy is a client/legal deliverable we don't have yet. */
.vhc-pending-copy {
	color: var(--wp--preset--color--slate);
	font-style: italic;
	margin: 0;
}

/* Intro split: optional small image under the copy. */
.vhc-intro-split__copy .vhc-intro-split__image {
	margin: 1.25rem 0 0;
}

.vhc-intro-split__copy .vhc-intro-split__image img {
	height: auto;
	width: min(225px, 100%);
}

/* Stamp variant: small hand-drawn accent; multiply drops its white paper
   into the page background. */
.vhc-intro-split__copy .vhc-intro-split__image--stamp img {
	mix-blend-mode: multiply;
	width: min(120px, 100%);
}

/* Wider hand-drawn illustration (Explore's hotel sketch). */
.vhc-intro-split__copy .vhc-intro-split__image--illustration img {
	mix-blend-mode: multiply;
	width: min(252px, 100%);
}

/* Instagram feed (hotel template): the hotels-slider mechanics with
   plain post tiles and a follow kicker. */
/* Progress bar runs in the brand accent on hotel sites. */
body.is-brand-hotel .vhc-slider__progress span {
	background: var(--section-accent);
}

.vhc-igfeed__kicker a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Handle glyph ships in the markup; only Court comps show it. */
.vhc-igfeed__glyph {
	display: none;
}

/* BugHerd Riverwalk #47: this used to be scoped through .vhc-slider__row,
   but Splide lifts the items out of that row into its own track, so the
   moment the slider enhanced, the rule stopped matching — the items fell
   back to inline/auto and sat at the photo's own 220px, which is why six
   crowded in instead of the comp's four and a tease. Scoped to the band
   instead, so it holds before and after enhancement. */
.vhc-igfeed .vhc-igfeed__item {
	display: block;
	width: min(316px, 78vw);
}

/* Splide's list is a flex row and its slides default to shrinking, so the
   slide stayed at the width it had when the slider mounted while the link
   inside it grew — the photos overlapped their neighbours. The slide has to
   carry the same width and refuse to shrink. */
.vhc-igfeed .splide__slide,
.vhc-gallery-slider .splide__slide {
	flex: 0 0 auto;
	width: min(316px, 78vw);
}

/* The gallery keeps its own .vhc-slide block inside the slide, pinned to
   316. Left alone it ignores the slide it sits in and the photos overlap
   again at narrower widths, so it follows its slide instead. */
.vhc-gallery-slider .splide__slide > .vhc-slide {
	width: 100%;
}

/* BugHerd Riverwalk #47: "four images and a tease" has to hold at any
   width, so the slide is sized from the room available rather than pinned.
   The flat 220px from BugHerd #121 gave four and a peek at the ~1100px
   window it was measured in, but six at 1464. 4.25 is four slides plus a
   quarter-slide tease; the four gaps come off the top. Capped at the
   comp's 316. Scoped to this band so #121's property slider keeps its own
   sizing. */
@media (min-width: 782px) {
	.vhc-igfeed .vhc-slider.is-enhanced .splide__slide,
	.vhc-gallery-slider .vhc-slider.is-enhanced .splide__slide {
		width: min(
			316px,
			max( 180px, calc( ( 100vw - var( --wp--style--root--padding-left ) - 4rem ) / 4.25 ) )
		);
	}
}

.vhc-igfeed__item img {
	aspect-ratio: 316 / 421;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* ─── Hotel-site branding (per-site variant) ────────────────────────── */
/* Two-line text lockup replacing the collection wordmark. */
.site-brand--lockup {
	color: var(--wp--preset--color--midnight);
	display: inline-flex;
	flex-direction: column;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
}

.site-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3125rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.site-brand__location {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.5rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	margin-top: 0.2rem;
	text-transform: uppercase;
}

/* A hotel with a drawn wordmark (The George, sheet slot "logo" 200×31)
   masks it in currentColor instead of the text lockup, so the over-hero /
   past-hero chrome swap recolours it like the lockup. */
.site-brand--logo {
	color: var(--wp--preset--color--midnight);
	display: block;
}

/* BugHerd Riverwalk #34: the wordmark reads small against the comp. Both
   axes scale together — the mask is `contain`, so growing the height alone
   would just letterbox the mark inside a taller box and change nothing.
   helpers.php sizes --brand-mark-w against a 22px cap, which is what the
   ratio below re-bases. */
.site-brand--logo::before {
	--brand-mark-h: 30px;
	background: currentColor;
	content: '';
	display: block;
	height: var(--brand-mark-h);
	-webkit-mask: var(--brand-mark) no-repeat center / contain;
	mask: var(--brand-mark) no-repeat center / contain;
	width: calc(var(--brand-mark-w, 148px) * var(--brand-mark-h) / 22px);
}

/* Hotel RESERVE tab runs in the brand accent — or the brand band where a
   site sets one (The George's comp: blue tab, off-white type). */
body.is-brand-hotel .site-header__reserve {
	background: var(--vhc-hotel-band, var(--wp--preset--color--golden-hour));
	color: var(--vhc-hotel-on-band, #fff);
}

body.is-brand-hotel .site-header__reserve:hover {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--pearl);
}

/* ─── Hotel footer ──────────────────────────────────────────────────── */
/* BugHerd Riverwalk #48: no rule where the footer meets the page. */
.hotel-footer {
	background: var(--wp--preset--color--pearl);
}

.hotel-footer__main {
	align-items: start;
	display: grid;
	gap: 4rem;
	grid-template-columns: 1fr auto 1fr;
	margin: 0 auto;
	max-width: 1180px;
	padding: var(--wp--preset--spacing--60) 1.5rem var(--wp--preset--spacing--50);
}

.hotel-footer__col--left {
	justify-self: center;
	text-align: center;
}

.hotel-footer__col--right {
	justify-self: center;
	text-align: center;
}

/* BugHerd Riverwalk #49 / #50: "Accessible Accommodations" ran 383px on one
   line, half as wide again as anything else in the column, which pushed the
   right column up against the brand lockup — 57px of air on that side
   against 125px on the other. Capping the line above that label and below
   the next longest ("Health & Safety", 220px) wraps only that one, and the
   column narrows to match the left. */
.hotel-footer__col--right .hotel-footer__nav li {
	margin-inline: auto;
	max-width: 16rem;
}

.hotel-footer__nav ul {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.hotel-footer__nav a {
	color: var(--wp--preset--color--midnight);
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	/* BugHerd Riverwalk #77: a step down from the page-title size, so the
	   two link columns sit back from the lockup between them. */
	font-size: calc(var(--wp--preset--font-size--page-title) - 2px);
	letter-spacing: 0.13em;
	line-height: 1.6;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.hotel-footer__nav a:hover {
	color: var(--wp--preset--color--golden-hour);
}

.hotel-footer__manage {
	border: 1px solid var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--midnight);
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	margin-bottom: 1.25rem;
	padding: 0.5rem 1.375rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.hotel-footer__manage:hover {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--pearl);
}

.hotel-footer__phone {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0 0 1rem;
}

.hotel-footer__phone a {
	color: var(--wp--preset--color--midnight);
	text-decoration: none;
}

.hotel-footer__social {
	display: flex;
	gap: 1rem;
	justify-content: center;
}

.hotel-footer__social a {
	color: var(--wp--preset--color--midnight);
}

.hotel-footer__social a:hover {
	color: var(--wp--preset--color--golden-hour);
}

.hotel-footer__center {
	text-align: center;
}

.hotel-footer__lockup {
	color: var(--wp--preset--color--midnight);
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	margin: 0 0 1.5rem;
}

.hotel-footer__lockup-loc {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.hotel-footer__lockup-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.625rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hotel-footer__illustration {
	height: auto;
	max-width: 280px;
}

/* Santana Row's drawing is a wide, low building (palms spread out beside
   it) rather than a tower like Riverwalk or a narrow face-on building like
   The George — the shared max-width caps it by its widest axis, so at the
   same width it renders noticeably shorter than the other two. Widened
   just for this property so it reads at a comparable height (~270px,
   matching Riverwalk's) instead of shrinking the shared rule the other
   two rely on. (488, not 400 — the file also gained left padding to
   recenter its visual weight, which widened the canvas the 270px target
   has to fit inside.)

   min(), not a bare 488px: this override outranks the global
   img { max-width: 100% }, so on a phone the drawing kept all 488px and
   dragged the layout viewport out to 512px — the whole site scrolled
   sideways, footer and all. min() keeps the desktop width wherever there
   is room and falls back to the container below that. */
body.is-hotel-santana-row .hotel-footer__illustration {
	max-width: min(488px, 100%);
}

/* Drawn footer mark (sheet slot "secondary logo", 200×95) masked in the
   footer's ink so it sits on a pearl or a band footer alike. */
.hotel-footer__mark {
	background: currentColor;
	display: block;
	height: var(--brand-mark-h, 96px); /* the SVG's native size (site-footer-hotel.php) */
	margin: 0 auto 1.5rem;
	-webkit-mask: var(--brand-mark) no-repeat center / contain;
	mask: var(--brand-mark) no-repeat center / contain;
	width: var(--brand-mark-w, 200px);
}

/* Footer on the brand band (brand_band set): every midnight rule above
   flips to the on-band ink; hovers dim instead of recolouring. Compound
   selector: the Rev2 .site-footer fill (#efede5, later in this file)
   otherwise outranks the band by source order. */
.site-footer.hotel-footer--band {
	background: var(--vhc-hotel-band);
	border-top: 0;
	color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
}

.hotel-footer--band .hotel-footer__nav a,
.hotel-footer--band .hotel-footer__manage,
.hotel-footer--band .hotel-footer__phone a,
.hotel-footer--band .hotel-footer__social a,
.hotel-footer--band .hotel-footer__lockup,
.hotel-footer--band .hotel-footer__legal-nav a,
.hotel-footer--band .hotel-footer__collection p,
.hotel-footer--band .hotel-footer__collection a,
.hotel-footer--band .site-footer__newsletter-field,
.hotel-footer--band .site-footer__newsletter-submit {
	color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
}

.hotel-footer--band .valencia-newsletter input[type='email'],
.hotel-footer--band .valencia-newsletter .gform_footer input[type='submit'],
.hotel-footer--band .valencia-newsletter .gform_footer button {
	border-bottom-color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl)) !important;
	color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl)) !important;
}

.hotel-footer--band .valencia-newsletter input[type='email']::placeholder {
	color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
	opacity: 0.6;
}

.hotel-footer--band .hotel-footer__manage,
.hotel-footer--band .site-footer__newsletter-field,
.hotel-footer--band .site-footer__newsletter-submit {
	border-color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
}

.hotel-footer--band .hotel-footer__meta,
.hotel-footer--band .hotel-footer__collection {
	border-top-color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
}

.hotel-footer--band .hotel-footer__nav a:hover,
.hotel-footer--band .hotel-footer__social a:hover,
.hotel-footer--band .hotel-footer__collection a:hover {
	color: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
	opacity: 0.7;
}

.hotel-footer--band .hotel-footer__manage:hover {
	background: var(--vhc-hotel-on-band, var(--wp--preset--color--pearl));
	color: var(--vhc-hotel-band);
}

/* BugHerd Riverwalk #51: the bottom two rows were capped at 1380px, so their
   rules stopped short of the page edges. The rows now run the full width and
   hold the same centred content box through the padding instead — the
   max() keeps 3rem of air once the viewport is narrower than the cap. The
   rules themselves go white, and the side margins double from 1.5 to 3rem. */
.hotel-footer__meta {
	align-items: end;
	border-top: 1px solid #fff;
	display: flex;
	justify-content: space-between;
	padding-block: 2.5rem;
	padding-inline: max(3rem, calc((100% - 1380px) / 2 + 3rem));
}

.hotel-footer__label {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.hotel-footer__legal {
	align-items: baseline;
	display: flex;
	gap: 1.5rem;
}

.hotel-footer__legal-nav ul {
	align-items: baseline;
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* BugHerd Riverwalk #52: the legal row sits back from the rest — the same
   mid-tint the collection band below it already uses. */
.hotel-footer__legal-nav a {
	color: #717b85;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-transform: uppercase;
}

.hotel-footer__colophon {
	color: #717b85; /* #52, with the legal links */
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.5;
	margin: 0;
	text-transform: uppercase;
}

.hotel-footer__collection {
	align-items: center;
	border-top: 1px solid #fff;
	display: flex;
	justify-content: space-between;
	padding-block: 2rem 2.5rem;
	padding-inline: max(3rem, calc((100% - 1380px) / 2 + 3rem));
}

.hotel-footer__collection p {
	color: #717b85; /* comp midnight mid-tint */
	/* #39 — the collection's face, not the property's. */
	font-family: var(--vhc-collection-font-display);
	font-size: var(--wp--preset--font-size--page-title);
	letter-spacing: 0.13em;
	margin: 0;
	text-transform: uppercase;
}

.hotel-footer__collection a {
	color: #717b85;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-transform: uppercase;
}

.hotel-footer__collection a:hover {
	color: var(--wp--preset--color--golden-hour);
}

/* Hotel footer on a phone — Hotels-Restaurants_Templates 6345:7025
   ("mobile v2"): the lockup + illustration first, then ONE centred nav
   (both menus, the display caps), the social row, a full-width Manage
   Reservations, the phone; then the newsletter, the legal links stacked,
   and the collection bar on two lines. The desktop grid (1fr auto 1fr
   with 3rem gaps) had no mobile rule at all, so at 390px the right column
   sat at x 542 and the page scrolled sideways (Hunter, 2026-09-21). The
   three columns become `display: contents` so their pieces can be
   ordered as one stack. */
@media (max-width: 781px) {
	.hotel-footer__main {
		gap: 0;
		grid-template-columns: minmax(0, 1fr);
		padding: 3.5rem 1.5rem 2.5rem;
	}

	.hotel-footer__col {
		display: contents;
	}

	.hotel-footer__center {
		order: 1;
		padding: 0 0 2rem;
	}

	.hotel-footer__col--left .hotel-footer__nav {
		order: 2;
	}

	.hotel-footer__col--right .hotel-footer__nav {
		order: 3;
	}

	.hotel-footer__social {
		margin: 1.75rem 0 2rem;
		order: 4;
	}

	.hotel-footer__manage {
		display: block;
		margin: 0 auto 1.5rem;
		max-width: 320px;
		order: 5;
		padding: 0.625rem 1rem;
		text-align: center;
	}

	.hotel-footer__phone {
		margin: 0;
		order: 6;
		text-align: center;
	}

	.hotel-footer__nav {
		text-align: center;
	}

	.hotel-footer__nav ul {
		margin: 0;
	}

	/* #51 doubled the side margins for desktop. On a phone that would eat
	   into the newsletter block, which an earlier pass sized to the comp's
	   320px on a 400 frame, so mobile keeps the original 1.5rem. */
	.hotel-footer__meta {
		align-items: stretch;
		flex-direction: column;
		gap: 2.5rem;
		padding-inline: 1.5rem;
	}

	/* The newsletter block is centred in the footer at the comp's 320px
	   (41px margins on the 400 frame — the Manage button's width) while
	   its label / field / SUBMIT stay left-aligned inside it; the
	   collection footer's .site-footer__col--newsletter does the same. */
	.hotel-footer__newsletter {
		margin: 0 auto;
		max-width: 320px;
		text-align: left;
		width: 100%;
	}

	/* Riverwalk #142: "increase space between lines so that spacing is
	   consistent." Stacked, these two gaps put the legal links and the
	   colophon 4px apart — the figure that spaces them as a ROW on desktop,
	   where 4px between items reads as tight tracking rather than as
	   crowded lines. At 10px uppercase the stack needs its own rhythm;
	   0.75rem gives the same optical breathing the links have between their
	   own two wrapped lines (22.4px) without opening the block up as far as
	   the 1rem the collection band below uses between components. */
	.hotel-footer__legal {
		align-items: center;
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
	}

	.hotel-footer__legal-nav ul {
		align-items: center;
		flex-direction: column;
		gap: 0.75rem;
	}

	.hotel-footer__collection {
		flex-direction: column;
		gap: 1rem;
		padding-inline: 1.5rem; /* with .hotel-footer__meta above — see #51 */
		text-align: center;
	}

	.hotel-footer__collection p {
		font-size: 1rem;
		line-height: 1.2;
		max-width: 20rem;
	}
}

/* ─── Reservation panel ──────────────────────────────────────────────
   Golden drawer sliding from the left under the RESERVE tab (Rev2
   booking widget). Interactions in assets/js/reserve.js. */
.reserve-scrim {
	background: rgba(19, 30, 41, 0.4);
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity 0.3s ease;
	z-index: 155; /* above the overlay nav (150): a panel opened from its RESERVE link stays in front */
}

.reserve-scrim.is-open {
	opacity: 1;
}

.reserve-panel {
	background: var(--wp--preset--color--golden-hour);
	bottom: 0;
	color: var(--wp--preset--color--pearl);
	display: flex;
	flex-direction: column;
	left: 0;
	position: fixed;
	top: 0;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	width: min(400px, 100vw);
	z-index: 160; /* above the overlay nav (150) */
}

.reserve-panel.is-open {
	transform: translateX(0);
}

.reserve-panel__top {
	border-bottom: 1px solid var(--wp--preset--color--pearl);
	flex-shrink: 0;
	padding: 0 2.5rem;
}

.reserve-panel__close {
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-size: 0.875rem;
	font-weight: 500;
	height: calc(var(--valencia-header-bar-height) + 51px);
	letter-spacing: 0.15em;
	padding: 0;
	text-transform: uppercase;
}

/* The form itself no longer scrolls — .reserve-panel__fields does, so
   Reserve Now + Manage Reservations + phone (.reserve-panel__sticky) can
   sit below it as plain flex siblings that are never part of the
   scrollable content, instead of relying on position:sticky to keep them
   in view on a short viewport. */
.reserve-panel__form {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0; /* let the flex item shrink below its content's natural height so .reserve-panel__fields can actually scroll inside it */
}

.reserve-panel__fields {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 2.5rem 2.5rem 1.5rem;
	position: relative;
}

.reserve-field {
	margin-bottom: 2.5rem;
	position: relative;
}

.reserve-field__label {
	display: block;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	margin-bottom: 0.875rem;
	text-transform: uppercase;
}

.reserve-field__control {
	align-items: center;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--pearl);
	cursor: pointer;
	display: flex;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	justify-content: space-between;
	letter-spacing: 0.03em;
	padding: 0 0.125rem 0.5rem;
	text-align: left;
	width: 100%;
}

.reserve-field__control--static {
	cursor: default;
}

.reserve-field__chevron {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid var(--wp--preset--color--pearl);
	height: 0;
	width: 0;
}

.reserve-field__plus {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1;
}

.reserve-field__input {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--pearl);
	border-radius: 0;
	color: var(--wp--preset--color--pearl);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	padding: 0 0.125rem 0.5rem;
	width: 100%;
}

.reserve-field__input::placeholder {
	color: var(--wp--preset--color--pearl);
	opacity: 1;
}

.reserve-field__input:focus {
	outline: none;
	border-bottom-color: #fff;
}

/* Pearl popover list shared by property + promo-type dropdowns. */
.reserve-dropdown {
	background: var(--wp--preset--color--pearl);
	box-shadow: 0 12px 32px rgba(19, 30, 41, 0.25);
	left: 0;
	list-style: none;
	margin: 0.25rem 0 0;
	max-height: 300px;
	overflow-y: auto;
	padding: 0.375rem 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 10;
}

.reserve-dropdown button {
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	padding: 0.5rem 1rem;
	text-align: left;
	width: 100%;
}

.reserve-dropdown button:hover,
.reserve-dropdown [aria-selected='true'] button {
	background: rgba(19, 30, 41, 0.06);
}

/* Calendar popover. */
.reserve-calendar {
	background: var(--wp--preset--color--pearl);
	box-shadow: 0 12px 32px rgba(19, 30, 41, 0.25);
	color: var(--wp--preset--color--midnight);
	left: 0;
	padding: 1rem 1.25rem 1.25rem;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 10;
}

.reserve-calendar__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.reserve-calendar__month {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	margin: 0;
}

.reserve-calendar__nav {
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	font-size: 1.125rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
}

.reserve-calendar__grid {
	display: grid;
	gap: 0.125rem;
	grid-template-columns: repeat(7, 1fr);
}

.reserve-calendar__dow {
	color: var(--wp--preset--color--midnight-tint);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	padding: 0.25rem 0;
	text-align: center;
	text-transform: uppercase;
}

.reserve-calendar__day {
	aspect-ratio: 1;
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	padding: 0;
}

.reserve-calendar__day:disabled {
	color: var(--wp--preset--color--midnight-tint);
	cursor: default;
	opacity: 0.5;
}

.reserve-calendar__day:not(:disabled):hover {
	background: rgba(19, 30, 41, 0.08);
}

.reserve-calendar__day.is-selected {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--pearl);
}

.reserve-calendar__day.is-between {
	background: rgba(19, 30, 41, 0.1);
}

/* Guest rows + steppers. */
.reserve-guests {
	padding: 1.25rem 0.125rem 0;
}

.reserve-guests__row {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.reserve-guests__who {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
}

.reserve-stepper {
	align-items: center;
	display: inline-flex;
	gap: 0.875rem;
}

.reserve-stepper__btn {
	align-items: center;
	background: none;
	border: 1px solid var(--wp--preset--color--pearl);
	border-radius: 50%;
	color: var(--wp--preset--color--pearl);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.8125rem;
	height: 22px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 22px;
}

.reserve-stepper__btn:hover {
	background: var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--golden-hour);
}

.reserve-stepper__btn--bare {
	border: 0;
	border-radius: 0;
	font-size: 1rem;
	height: auto;
	width: auto;
}

.reserve-stepper__btn--bare:hover {
	background: none;
	color: #fff;
}

.reserve-stepper__count {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	min-width: 1ch;
	text-align: center;
}

/* Submit + footer. */
.reserve-panel__submit {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--pearl);
	cursor: pointer;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	padding: 0 0 0.375rem;
	text-transform: uppercase;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.reserve-panel__submit:hover {
	border-bottom-color: #fff;
	color: #fff;
}

/* BugHerd #95 kept Manage Reservations + phone in view on a short
   viewport with position: sticky on .reserve-panel__foot alone — but
   Reserve Now (the actual primary action) was still a normal flex child
   inside the scrolling form above it, so it could still end up scrolled
   out of view or crowded against the sticky foot. Now .reserve-panel__form
   itself doesn't scroll — .reserve-panel__fields does — so Reserve Now
   and the foot can both just be plain flex children after it, always
   in view regardless of how tall the fields above get. */
/* No background of its own. It's a plain flex sibling after the scrolling
   .reserve-panel__fields, not an overlay, so there is nothing to hide behind
   an opaque fill — it can simply inherit .reserve-panel's. Painting it
   golden-hour here is what stranded an accent-coloured band around Reserve
   Now on every site that repaints the panel: the child theme overrode
   .reserve-panel (and the old .reserve-panel__foot), but not this wrapper,
   which didn't exist when that override was written. Any site whose panel
   is not golden-hour must not have to know this element exists. */
.reserve-panel__sticky {
	flex-shrink: 0;
	padding: 1.5rem 2.5rem 2.5rem;
	position: relative;
}

/* Cue that there's more to scroll to above — shown only when the fields
   actually overflow and aren't already scrolled to the bottom (reserve.js).
   A pseudo-element seated on the sticky foot itself rather than a node
   inside .reserve-panel__fields: that scrolling container is its own
   containing block, so an absolutely-positioned child of it — even with
   bottom: 0 — sits at the bottom of the SCROLLED CONTENT, not the visible
   edge, and scrolls away with everything else instead of staying put. The
   foot never scrolls, so anchoring the fade to its top edge (bottom: 100%)
   keeps it exactly at the seam regardless of scroll position. */
.reserve-panel__sticky::before {
	background: linear-gradient(to bottom, transparent, rgba(19, 30, 41, 0.18));
	bottom: 100%;
	content: '';
	height: 2rem;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	transition: opacity 0.2s ease;
}

.reserve-panel__sticky.has-more-below::before {
	opacity: 1;
}

.reserve-panel__foot {
	margin-top: 1.5rem;
}

.reserve-panel__manage {
	border: 1px solid var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--pearl);
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	margin-bottom: 1.25rem;
	padding: 0.875rem 1.75rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.reserve-panel__manage:hover {
	background: var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--golden-hour);
}

.reserve-panel__phone {
	color: var(--wp--preset--color--pearl);
	display: block;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-decoration: none;
}

body.has-reserve-open {
	overflow: hidden;
}

/* ─── Site header ───────────────────────────────────────────────────── */
.site-header {
	background: var(--wp--preset--color--pearl);
	/* Bottom rule shows at all times (banner-visible pages defer to the
	   banner's own borders; immersive heroes swap it to solid pearl). */
	box-shadow: 0 1px 0 var(--section-hairline);
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: box-shadow 0.25s ease;
	z-index: 100;
}

/* Wordmark-hero pages: hero runs edge-to-top under a transparent header;
   the pearl bar and centered brand arrive only past the hero. */
body.has-immersive-hero {
	padding-top: 0;
}

body.has-immersive-hero .site-header {
	background: transparent;
	transition: background-color 0.3s ease, box-shadow 0.25s ease;
}

/* Transparent state keeps a solid pearl hairline under the bar, per the comp. */
body.has-immersive-hero .site-header:not(.is-past-hero) {
	box-shadow: 0 1px 0 var(--wp--preset--color--pearl);
}

/* Statement heroes carry no wordmark, so the brand shows immediately —
   pearl over the image, midnight once the bar solidifies. */
body.has-immersive-hero .site-header:not(.is-past-hero) .site-brand {
	color: var(--wp--preset--color--pearl);
}

body.has-immersive-hero .site-header:not(.is-past-hero) .site-header__toggle {
	color: var(--wp--preset--color--pearl);
}

body.has-wordmark-hero .site-header__brand {
	opacity: 0;
	transform: translateY(0.375rem);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s 0.35s;
	visibility: hidden;
}

body.has-immersive-hero .site-header.is-past-hero {
	background: var(--wp--preset--color--pearl);
}

body.has-wordmark-hero .site-header.is-past-hero .site-header__brand {
	opacity: 1;
	transform: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
	visibility: visible;
}

.site-header__inner {
	align-items: stretch;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	height: var(--valencia-header-bar-height);
	padding: 0 1.5rem 0 0;
}

.site-brand,
.site-header__brand a {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	letter-spacing: 0.3em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-header__brand {
	align-self: center;
}

/* Inlined wordmark SVG takes currentColor from the link. */
.site-brand--wordmark {
	display: block;
	line-height: 0;
}

.site-brand--wordmark svg {
	display: block;
	height: auto;
	width: min(360px, 46vw);
}

.site-header__toggle {
	align-items: center;
	align-self: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	display: flex;
	justify-self: end;
	/* Comfortable hit area around the 22px icon (44px total target). */
	margin: -0.6875rem;
	padding: 0.6875rem;
}

.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
	background: currentColor;
	content: '';
	display: block;
	height: 1px;
	transition: background-color 0.3s ease, top 0.3s ease, transform 0.3s ease;
	width: 22px;
}

.site-header__toggle-icon {
	position: relative;
}

.site-header__toggle-icon::before {
	position: absolute;
	top: -6px;
}

.site-header__toggle-icon::after {
	position: absolute;
	top: 6px;
}

/* Overlay open: the same hamburger morphs into an X (middle bar fades,
   outer bars rotate onto the center). */
.overlay-nav.is-open .site-header__toggle-icon {
	background: transparent;
}

.overlay-nav.is-open .site-header__toggle-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.overlay-nav.is-open .site-header__toggle-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.site-header__toggle-icon,
	.site-header__toggle-icon::before,
	.site-header__toggle-icon::after {
		transition: none;
	}
}

/* RESERVE tab, flush to the viewport's top-left corner (Rev2). Pearl over
   heroes so it reads on imagery; inverts to midnight once the bar solidifies. */
.site-header__reserve {
	align-items: center;
	background: var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--midnight);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	justify-self: start;
	letter-spacing: 0.2em;
	padding: 0 2rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.site-header__reserve:hover {
	background: var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--midnight);
}

/* Solid bar (interior pages, or past the hero): pearl-on-pearl tab would
   vanish, so it inverts. */
.site-header.is-past-hero .site-header__reserve,
body:not(.has-immersive-hero) .site-header__reserve {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--pearl);
}

.site-header.is-past-hero .site-header__reserve:hover,
body:not(.has-immersive-hero) .site-header__reserve:hover {
	background: var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--midnight);
}

/* Mobile: no RESERVE tab in the bar (Hunter, 2026-09-15) — the fixed
   bottom .vhc-reserve-bar (below) takes over as the booking entry point,
   alongside the overlay menu's own RESERVE link. The brand + toggle are
   pinned to their columns so the 1fr / auto / 1fr grid keeps the
   wordmark dead-centre with column 1 now empty; without this the two
   remaining children would shift left into columns 1 and 2. */
@media (max-width: 781px) {
	.site-header__reserve {
		display: none;
	}

	.site-header__brand {
		grid-column: 2;
	}

	.site-header__toggle {
		grid-column: 3;
	}
}

/* ─── Mobile reserve bar ────────────────────────────────────────────── */
/* Figma Rev3 "iPhone 17 - 1" (32:1395): a 78px golden-hour bar across
   the bottom of the screen that is, in its entirety, one RESERVE NOW
   button — pearl label, Outfit 14px tracked 0.14em, centred. While the
   reserve panel is open (body.has-reserve-open) it inverts per Rev3
   "iPhone 17 - 3" (2017:3566): pearl bar, golden-hour CLOSE label, and
   tapping it closes the panel (reserve.js). Fixed to the bottom below
   782px only (template-parts/footer/reserve-bar.php renders it
   everywhere; this is what makes it exist).

   Stacking: ABOVE the reserve scrim/panel (110/120) so it can show
   CLOSE over the open panel, and above the overlay nav (150) too — the
   Rev3 nav comp has the golden-hour bar still sitting at the foot of
   the open menu. Both of those full-screen surfaces get bar-height
   bottom padding so their last row (the panel's phone number, the
   nav's secondary links) can scroll clear of it. The offer popup (140)
   ends up under the bar as well; it's a centred modal, so the bar only
   ever overlaps its scrim. The bar's bottom padding grows with the
   home-indicator inset; body gets matching padding-bottom so the
   footer's last line can scroll clear. */
.vhc-reserve-bar {
	display: none;
}

@media (max-width: 781px) {
	:root {
		--valencia-reserve-bar-height: 78px;
	}

	body {
		padding-bottom: calc(var(--valencia-reserve-bar-height) + env(safe-area-inset-bottom, 0px));
	}

	.reserve-panel,
	.overlay-nav {
		padding-bottom: calc(var(--valencia-reserve-bar-height) + env(safe-area-inset-bottom, 0px));
	}

	/* BugHerd Riverwalk #79: while the panel is open the bar below it reads
	   CLOSE, so the panel's own Close at the top said it twice. The bar is
	   the bigger target and the one under the thumb, so the top one goes —
	   and with its only child gone, the bar it sat in goes with it. */
	.reserve-panel__top {
		display: none;
	}

	.vhc-reserve-bar {
		bottom: 0;
		display: flex;
		left: 0;
		position: fixed;
		right: 0;
		z-index: 160;
	}

	.vhc-reserve-bar__button {
		align-items: center;
		background: var(--wp--preset--color--golden-hour);
		box-sizing: border-box;
		color: var(--wp--preset--color--pearl);
		display: flex;
		flex: 1 1 100%;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.875rem;
		font-weight: 400;
		justify-content: center;
		letter-spacing: 0.14em;
		line-height: 19px;
		/* BugHerd Riverwalk #78: body reserves bar height + the home-indicator
		   inset, so the bar has to be that tall too. It was only the bar
		   height with the inset as padding *inside* it, which left a gap the
		   size of the inset — 34px of dead page below the last content on
		   any iPhone with a home indicator, and none at all in a desktop
		   browser, where env() resolves to zero. */
		min-height: calc(var(--valencia-reserve-bar-height) + env(safe-area-inset-bottom, 0px));
		padding: 0 1rem env(safe-area-inset-bottom, 0px);
		text-decoration: none;
		text-transform: uppercase;
		transition: background-color 0.3s ease, color 0.3s ease;
	}

	.vhc-reserve-bar__button:focus-visible {
		outline-offset: -3px;
	}

	.vhc-reserve-bar__label--open {
		display: none;
	}

	/* Open state: inverted, and the label swaps to CLOSE. Timed to the
	   panel's own 0.3s slide so the two read as one move. */
	body.has-reserve-open .vhc-reserve-bar__button {
		background: var(--wp--preset--color--pearl);
		color: var(--wp--preset--color--golden-hour);
	}

	body.has-reserve-open .vhc-reserve-bar__label--closed {
		display: none;
	}

	body.has-reserve-open .vhc-reserve-bar__label--open {
		display: inline;
	}
}

/* ─── Overlay navigation ────────────────────────────────────────────── */
.overlay-nav {
	/* One column width for both menu rows, so the primary links start on
	   the same left edge as the secondary row beneath them. */
	--overlay-nav-column: 1180px;
	background: var(--wp--preset--color--pearl);
	display: flex;
	flex-direction: column;
	inset: 0;
	opacity: 0;
	overflow-y: auto;
	position: fixed;
	transition: opacity 0.3s ease;
	z-index: 150;
}

/* Fades in on open and back out before nav.js sets [hidden] (300ms timer
   matched to this transition), so closing never hard-cuts. */
.overlay-nav.is-open {
	opacity: 1;
}

.overlay-nav[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.overlay-nav {
		transition: none;
	}
}

/* Locking the page removes the scrollbar, which makes the window ~15px wider
   and re-lays-out everything anchored to it: the BOOK pill grows, the centred
   brand slides, and the toggle — now an X — moves with them. Measured on
   Caravan at 1425 vs 1440: book 158 -> 159 wide, brand 664 -> 671, toggle
   1275 -> 1289.

   nav.js measures the scrollbar before locking and publishes it as
   --vhc-scrollbar; everything that was sized by the window reserves that
   width back. The page content is inset by it, and the two fixed layers —
   the header and the overlay itself — pull their right edge in, because a
   fixed element is positioned against the window and a padded body cannot
   move it. Nothing shifts. --vhc-scrollbar is 0 when closed, and 0 on any
   platform with overlay scrollbars, where there was never a shift. */
body.has-overlay-nav-open {
	overflow: hidden;
	padding-right: var(--vhc-scrollbar, 0px);
}

body.has-overlay-nav-open .site-header,
body.has-overlay-nav-open .overlay-nav {
	right: var(--vhc-scrollbar, 0px);
}

.overlay-nav__bar {
	align-items: stretch;
	box-shadow: 0 1px 0 var(--section-hairline);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	height: var(--valencia-header-bar-height);
	padding: 0 1.5rem 0 0;
}

.overlay-nav__brand,
.overlay-nav__close {
	align-self: center;
}

/* Mirrors the header's solid-state tab so opening the menu doesn't
   visually swap the RESERVE control. */
.overlay-nav__reserve {
	align-items: center;
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--pearl);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	justify-self: start;
	letter-spacing: 0.14em;
	padding: 0 2rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.overlay-nav__reserve:hover {
	background: var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--midnight);
}

body.is-brand-hotel .overlay-nav__reserve {
	background: var(--wp--preset--color--golden-hour);
	color: #fff;
}

body.is-brand-hotel .overlay-nav__reserve:hover {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--pearl);
}

/* Sits where the header hamburger sits, so the open/close morph reads as
   one icon animating. */
.overlay-nav__close {
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	justify-self: end;
	margin: -0.6875rem;
	padding: 0.6875rem;
}

/* Balances the body's auto top margin, so the menu group centres in the
   space under the bar. On the last child rather than the secondary nav
   because that menu doesn't always render. */
.overlay-nav > :last-child {
	margin-bottom: auto;
}

.overlay-nav__body {
	align-items: center;
	display: grid;
	/* Was flex: 1 — stretched to fill all remaining height, pushing the
	   secondary nav row flush to the very bottom of the viewport instead
	   of following right after the content above it. The auto top margin
	   centres the body and secondary rows as one group instead, so they
	   stay adjacent and the menu reads centred in the viewport. */
	flex: 0 1 auto;
	gap: 4rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	max-width: var(--overlay-nav-column);
	margin: auto auto 0;
	padding: 3rem 1.5rem;
	width: 100%;
}

.overlay-nav__primary ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.overlay-nav__primary a {
	color: var(--wp--preset--color--midnight);
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 300;
	line-height: 1.15;
	text-decoration: none;
}

.overlay-nav__primary a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.overlay-nav__manage {
	border: 1px solid var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--golden-hour);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin-top: 2rem;
	padding: 0.8125rem 1.6875rem;
	text-decoration: none;
	text-transform: uppercase;
}

.overlay-nav__manage:hover {
	background: var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--pearl);
}

.overlay-nav__social {
	display: flex;
	gap: 1.375rem;
	margin-top: 1.75rem;
}

.overlay-nav__social a {
	color: var(--wp--preset--color--midnight);
}

.overlay-nav__social a:hover {
	color: var(--wp--preset--color--golden-hour);
}

/* Media stack: one slide per primary link; hover/focus crossfades. */
.overlay-nav__media {
	aspect-ratio: 4 / 3;
	max-height: min(480px, 60vh);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.overlay-nav__media-img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	transition: opacity 0.4s ease;
	width: 100%;
}

.overlay-nav__media-img.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.overlay-nav__media-img {
		transition: none;
	}
}

.overlay-nav__secondary ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3rem;
	justify-content: space-between;
	list-style: none;
	margin: 0 auto;
	max-width: var(--overlay-nav-column);
	padding: 1.5rem;
}

.overlay-nav__secondary a {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.overlay-nav__secondary a:hover {
	color: var(--wp--preset--color--golden-hour);
}

/* ─── Loading screen ────────────────────────────────────────────────────
   First session visit: the monogram's elements mask in sequentially —
   each path wipes across its own bounding box (clip-path on SVG children
   references the fill-box) — then the overlay fades away. Gated
   per-session by the inline script in template-parts/loading-screen.php. */
html.has-loading-screen {
	overflow: hidden;
}

.loading-screen {
	align-items: center;
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--pearl);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	transition: opacity 1.2s ease;
	z-index: 200;
}

.loading-screen[hidden] {
	display: none;
}

.loading-screen.is-done {
	opacity: 0;
	pointer-events: none;
}

.loading-mark {
	height: auto;
	width: clamp(120px, 16vw, 168px);
}

.loading-screen .lm-el {
	animation: valencia-draw-el 0.45s ease forwards;
	animation-delay: calc(300ms + var(--i) * 25ms);
	clip-path: var(--lm-from);
	opacity: 0;
}

/* Wipe directions, scattered per element in the SVG so the mark reads as
   drawn from varied strokes rather than one uniform sweep. */
.lm-el--d0 { --lm-from: inset(-5% 105% -5% -5%); }  /* left → right */
.lm-el--d1 { --lm-from: inset(105% -5% -5% -5%); }  /* bottom → top */
.lm-el--d2 { --lm-from: inset(-5% -5% -5% 105%); }  /* right → left */
.lm-el--d3 { --lm-from: inset(-5% -5% 105% -5%); }  /* top → bottom */

@keyframes valencia-draw-el {
	0% {
		clip-path: var(--lm-from);
		opacity: 1;
	}
	100% {
		clip-path: inset(-5% -5% -5% -5%);
		opacity: 1;
	}
}

/* ─── Offer pop-up ──────────────────────────────────────────────────────
   Rev2 comp: 618×295 pearl card centered on the viewport, image column
   left, content right, X close. popup.js reveals/fades it. */
.offer-popup {
	background: var(--wp--preset--color--pearl);
	box-shadow: 0 8px 32px rgba(19, 30, 41, 0.35);
	display: grid;
	grid-template-columns: 204px minmax(0, 1fr);
	left: 50%;
	max-width: min(618px, calc(100vw - 3rem));
	min-height: 295px;
	opacity: 0;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease;
	width: 100%;
	z-index: 140;
}

.offer-popup.is-open {
	opacity: 1;
}

.offer-popup[hidden] {
	display: none;
}

.offer-popup__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.offer-popup__content {
	align-self: center;
	padding: 3.25rem 3.5rem 3.25rem 3.5rem;
}

.offer-popup__title {
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.6;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.offer-popup__body {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.375;
}

.offer-popup__body p {
	margin: 0 0 0.75rem;
}

.offer-popup__link {
	border-bottom: 1px solid var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--golden-hour);
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 300;
	line-height: 1.5;
	margin-top: 0.75rem;
	text-decoration: none;
}

.offer-popup__link:hover {
	color: var(--wp--preset--color--midnight);
	border-bottom-color: var(--wp--preset--color--midnight);
}

.offer-popup__close {
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	font-size: 1.375rem;
	line-height: 1;
	padding: 0.5rem;
	position: absolute;
	right: 1rem;
	top: 0.875rem;
}

.offer-popup__close:hover {
	color: var(--wp--preset--color--golden-hour);
}

@media (prefers-reduced-motion: reduce) {
	.offer-popup {
		transition: none;
	}
}

@media (max-width: 640px) {
	.offer-popup {
		grid-template-columns: 1fr;
	}

	.offer-popup__media img {
		aspect-ratio: 2 / 1;
	}

	.offer-popup__content {
		padding: 2rem 2rem 2.25rem;
	}
}

/* ─── Site footer (Rev2) ────────────────────────────────────────────── */
.site-footer {
	background: #efede5;
	margin-top: var(--wp--preset--spacing--80);
}

/* Masthead: golden stacked wordmark left, monogram right, hairline below.
   The seal crest only appears on phones (Rev3 mobile comp), see the
   max-width: 600px footer block. */
.site-footer__seal {
	display: none;
}

.site-footer__masthead {
	align-items: flex-start;
	border-bottom: 1px solid var(--wp--preset--color--white);
	display: flex;
	justify-content: space-between;
	padding: 3.75rem var(--wp--style--root--padding-right) 3.75rem var(--wp--style--root--padding-left);
}

.site-footer__wordmark {
	color: var(--wp--preset--color--golden-hour);
}

.site-footer__wordmark svg {
	display: block;
	height: auto;
	width: clamp(260px, 34vw, 485px);
}

.site-footer__monogram {
	color: var(--wp--preset--color--golden-hour);
}

.site-footer__monogram svg {
	display: block;
	height: auto;
	width: clamp(72px, 8vw, 112px);
}

.site-footer__inner {
	display: grid;
	gap: 3rem 4rem;
	grid-template-columns: minmax(180px, 240px) minmax(280px, 1fr) auto;
	padding: 3.25rem var(--wp--style--root--padding-right) 4rem var(--wp--style--root--padding-left);
}

.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Secondary links (left column). */
.site-footer__secondary-nav li {
	margin-bottom: 0.25rem;
}

.site-footer__secondary-nav a {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--subhead);
	text-decoration: none;
}

.site-footer__social {
	display: flex;
	gap: 1.375rem;
	margin-top: 1.75rem;
}

.site-footer__social a {
	color: var(--wp--preset--color--midnight);
}

.site-footer__social a:hover {
	color: var(--wp--preset--color--golden-hour);
}

.site-footer__manage {
	border: 1px solid var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--golden-hour);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin-top: 2.25rem;
	padding: 0.8125rem 1.6875rem;
	text-decoration: none;
	text-transform: uppercase;
}

.site-footer__manage:hover {
	background: var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--pearl);
}

.site-footer__phone {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	margin: 1.25rem 0 0;
}

.site-footer__phone a {
	color: var(--wp--preset--color--golden-hour);
	text-decoration: none;
}

/* Newsletter (center column) — placeholder until Gravity Forms. */
.site-footer__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.site-footer__newsletter-placeholder {
	align-items: baseline;
	display: flex;
	gap: 1.25rem;
}

.site-footer__newsletter-field {
	border-bottom: 1px solid var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--midnight-tint);
	flex: 1;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	max-width: 260px;
	padding-bottom: 0.5rem;
}

.site-footer__newsletter-submit {
	border-bottom: 1px solid var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	padding-bottom: 0.5rem;
	text-transform: uppercase;
}

/* Primary destinations (right column) — right-aligned serif caps. */
.site-footer__col--nav {
	text-align: right;
}

.site-footer__primary-nav li {
	margin-bottom: 0.1875rem;
}

.site-footer__primary-nav a {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.site-footer__primary-nav a:hover,
.site-footer__secondary-nav a:hover,
.site-footer__legal-nav a:hover {
	color: var(--wp--preset--color--golden-hour);
}

/* Legal stack under the nav. */
.site-footer__legal {
	margin-top: 3.25rem;
}

.site-footer__colophon {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	margin: 0 0 0.375rem;
	text-transform: uppercase;
}

.site-footer__legal-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__legal-nav li {
	margin-bottom: 0.1875rem;
}

.site-footer__legal-nav a {
	color: var(--wp--preset--color--midnight);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}


/* Statement hero: centered serif statement as the page heading. */
.vhc-hero--statement .wp-block-cover__inner-container {
	justify-content: center;
}

.vhc-hero__statement {
	color: var(--wp--preset--color--pearl);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.25;
	margin: 0 auto;
	max-width: 680px;
	text-transform: none;
}

/* Display-title hero: mega serif title flush with the hero's bottom edge.
   The inner container stretches the full hero height (flex column, content
   justified to the end) so the absolutely positioned subnav can anchor to
   the hero's top — core makes the inner container the containing block. */
.wp-block-cover.vhc-hero--display {
	align-items: stretch;
	padding: 0;
}

/* Specificity beats the generic .vhc-hero inner-container centering.
   box-sizing: border-box (BugHerd #101) — without it this element's
   default content-box sizing adds both side paddings on top of its full
   viewport width instead of inside it, overflowing off both edges and
   dragging the title's visible left edge past the gutter entirely
   (worse on narrow mobile viewports, where the padding is a much bigger
   fraction of the total width). */
.wp-block-cover.vhc-hero--display .wp-block-cover__inner-container {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Title aligns with the wide content wrapper. */
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

.vhc-hero__display-title {
	color: var(--wp--preset--color--pearl);
	/* Larger than the shared "mega" token on purpose — that token is also
	   used by .vhc-hero__display on interior page-title heroes elsewhere,
	   which this ask doesn't touch. */
	font-size: clamp(3rem, 7vw, 6.5rem);
	font-weight: 300;
	letter-spacing: 0.08em;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

/* Land the baseline exactly on the hero's bottom edge: with line-height 1
   the font box scales ascent+descent (91+28) into 1em, leaving 0.235em of
   in-box descent below the baseline to swallow. Only the glyphs' ~1px
   baseline overshoot bleeds. Specificity beats WP's generated
   .is-layout-flow > :last-child margin reset (prints inline after this
   stylesheet). */
.wp-block-cover.vhc-hero--display .vhc-hero__display-title {
	margin-block-end: -0.15em;
}

/* Long-form split copy variant: body sans instead of Body 1 serif. */
.vhc-intro-split--sans .vhc-intro-split__copy p {
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: 0.02em;
	line-height: 1.375;
}

/* Collection grid. */
.vhc-cgrid {
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--60);
}

.vhc-cgrid__bar {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 2.5rem;
}

.vhc-cgrid__views {
	display: flex;
	gap: 2.5rem;
}

.vhc-cgrid__view {
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight-tint);
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	padding: 0;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.vhc-cgrid__view:hover {
	color: var(--wp--preset--color--midnight);
}

/* BugHerd #100. */
.vhc-cgrid__view.is-active {
	color: var(--wp--preset--color--golden-hour);
	text-decoration: underline;
	text-underline-offset: 0.5em;
}

/* Map view — the collection-wide Google Map (all properties, bounds fit
   to the roster) beside a numbered legend, same shape as the explore-map
   block's category/venue list so the site's two maps read as one system. */
.vhc-cgrid__mapwrap {
	display: flex;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.vhc-cgrid__maplist {
	flex: 0 0 300px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vhc-cgrid__mapitem {
	align-items: flex-start;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 0;
	text-align: left;
	width: 100%;
}

.vhc-cgrid__mapdot {
	align-items: center;
	background: var(--section-accent);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: none;
	font-size: 0.6875rem;
	font-weight: 600;
	height: 22px;
	justify-content: center;
	width: 22px;
}

.vhc-cgrid__mapname {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	margin: 0 0 0.2rem;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.vhc-cgrid__mapitem:hover .vhc-cgrid__mapname {
	color: var(--section-accent);
}

.vhc-cgrid__maplocation {
	color: var(--wp--preset--color--midnight-tint);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	margin: 0;
}

.vhc-cgrid__mapcanvas-wrap {
	flex: 1;
	margin: 0;
	min-width: 0;
}

.vhc-cgrid__mapcanvas {
	aspect-ratio: 960 / 666;
	background: var(--wp--preset--color--pearl);
	display: block;
	width: 100%;
}

.vhc-cgrid__mapnote {
	color: var(--wp--preset--color--midnight-tint);
	font-size: var(--wp--preset--font-size--small);
	margin: 1rem 0 0;
}

.vhc-cgrid__iw {
	font-family: var(--wp--preset--font-family--body);
	padding: 0.5rem 1.5rem 0.75rem 0.5rem;
	position: relative;
}

.vhc-cgrid__iw-name {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	margin: 0 0 0.25rem;
}

.vhc-cgrid__iw-location {
	color: var(--wp--preset--color--midnight-tint);
	font-size: 0.8125rem;
	margin: 0 0 0.5rem;
}

.vhc-cgrid__iw-link {
	color: var(--section-accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: underline;
	text-transform: uppercase;
}

.vhc-cgrid__iw-close {
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	font-size: 1.125rem;
	line-height: 1;
	padding: 0.25rem;
	position: absolute;
	right: 0;
	top: 0;
}

.vhc-cgrid .gm-style-iw button.gm-ui-hover-effect {
	display: none !important;
}

@media (max-width: 781px) {
	.vhc-cgrid__mapwrap {
		flex-direction: column;
	}

	.vhc-cgrid__maplist {
		flex: none;
	}
}

/* display:grid/flex would beat the [hidden] UA style at equal
   specificity (same trap as .announcement-banner above) — the toggle
   sets .hidden on these two, so an explicit [hidden] override is
   required or the "other" view never actually disappears. */
.vhc-cgrid__items[hidden],
.vhc-cgrid__mapwrap[hidden] {
	display: none;
}

.vhc-cgrid__items {
	display: grid;
	gap: 4.5rem 1.875rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Flow-layout sibling margins would stagger the grid rows. */
.vhc-cgrid__items > .vhc-cgrid-card {
	margin: 0;
}

.vhc-cgrid-card__slider img {
	aspect-ratio: 420 / 515;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Edge arrows on the card carousels — small translucent circles. */
.vhc-cgrid-card__slider .splide__arrow {
	align-items: center;
	background: rgba(246, 246, 240, 0.55);
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	display: flex;
	height: 31px;
	justify-content: center;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.25s ease, background-color 0.25s ease;
	width: 31px;
	z-index: 2;
}

.vhc-cgrid-card:hover .vhc-cgrid-card__slider .splide__arrow,
.vhc-cgrid-card__slider .splide__arrow:focus-visible {
	opacity: 1;
}

.vhc-cgrid-card__slider .splide__arrow:hover {
	background: rgba(246, 246, 240, 0.85);
}

.vhc-cgrid-card__slider .splide__arrow svg {
	fill: currentColor;
	height: 10px;
	width: 10px;
}

.vhc-cgrid-card__slider .splide__arrow--prev {
	left: 0.75rem;
}

.vhc-cgrid-card__slider .splide__arrow--prev svg {
	transform: scaleX(-1);
}

.vhc-cgrid-card__slider .splide__arrow--next {
	right: 0.75rem;
}

.vhc-cgrid-card__name {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 1.25rem 0 0.25rem;
}

.vhc-cgrid-card__name a {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.vhc-cgrid-card__name a:hover {
	color: var(--wp--preset--color--golden-hour);
}

.vhc-cgrid-card__name a::after {
	/* Pearl arrow over a disc in the section accent (was a baked golden
	   SVG; the disc follows the per-site accent since The George). */
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M11.3721 14.5714L15.2832 10.7851L11.3721 7.00002' stroke='%23F6F6F0' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cline x1='15' y1='10.78' x2='5' y2='10.78' stroke='%23F6F6F0'/%3E%3C/svg%3E") center / contain no-repeat,
		radial-gradient(circle closest-side, var(--section-accent) 97%, transparent 100%);
	content: '';
	opacity: 0.85;
	display: inline-block;
	height: 21px;
	margin-left: 0.75rem;
	vertical-align: middle;
	width: 21px;
}

.vhc-cgrid-card__location {
	color: var(--wp--preset--color--midnight-tint);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	margin: 0 0 0.75rem;
}

.vhc-cgrid-card__desc {
	color: #717b85;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.375;
	margin: 0;
}

@media (max-width: 900px) {
	.vhc-cgrid__items {
		grid-template-columns: 1fr;
	}

	.vhc-cgrid__bar {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}
}

/* Centered serif lead. */
.vhc-lead {
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40);
	text-align: center;
}

.vhc-lead__copy {
	font-weight: 300;
	line-height: 1.5;
	margin-left: auto;
	margin-right: auto;
	max-width: 640px;
}

/* Community impact cards. */
.vhc-impact {
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--60);
}

.vhc-impact__intro {
	padding-right: clamp(1rem, 5%, 4rem);
}

/* Eyebrow tops out level with the organization cards. */
.vhc-impact__intro .is-style-eyebrow {
	line-height: 1;
	margin: 0 0 2.25rem;
}

.vhc-impact__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	line-height: 1.3;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}

.vhc-impact__copy {
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.375;
}

.vhc-impact-card__media img {
	aspect-ratio: 300 / 415;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-impact-card__name {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 1.125rem 0 0;
}

.vhc-impact-card__name a {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.vhc-impact-card__name a:hover {
	color: var(--wp--preset--color--golden-hour);
}

/* BugHerd #98: "slide not stack" — WP core stacks wp-block-columns
   vertically below 782px by default. Converted to a horizontal
   scroll-snap row instead (the intro column becomes its own full-width
   "slide" too, ahead of the three cards, rather than sitting outside the
   scroll region — splitting one flat row of siblings into a
   scrolling-vs-static pair isn't possible with CSS alone here). No JS/
   Splide needed — scroll-snap is native and this is a simple swipe, not
   a slider with controls. !important overrides WP core's own mobile
   column-stacking rule (.wp-block-columns:not(.is-not-stacked-on-mobile)
   > .wp-block-column), which otherwise wins on source order alone. */
@media (max-width: 781px) {
	.vhc-impact {
		display: flex;
		/* !important: beats core's own .wp-block-columns:not(.is-not-stacked-
		   on-mobile) { flex-wrap: wrap !important; } at this same breakpoint. */
		flex-wrap: nowrap !important;
		gap: 1.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.vhc-impact > .wp-block-column {
		flex: 0 0 85% !important;
		scroll-snap-align: start;
	}
}

.vhc-impact-card__name a::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Ccircle opacity='0.75' cx='10.5' cy='10.5' r='10.5' fill='%23B78958'/%3E%3Cpath d='M11.3721 14.5714L15.2832 10.7851L11.3721 7.00002' stroke='%23F6F6F0' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cline x1='15' y1='10.78' x2='5' y2='10.78' stroke='%23F6F6F0'/%3E%3C/svg%3E") center / contain no-repeat;
	content: '';
	display: inline-block;
	height: 21px;
	margin-left: 0.75rem;
	vertical-align: middle;
	width: 21px;
}

/* ─── Patterns: heroes ──────────────────────────────────────────────── */
.vhc-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vhc-hero__title,
.vhc-hero__display {
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Hotel interior heroes: the property comps set the page title in the
   Headline All Caps style — 2.5rem Ortica regular, tighter tracking than
   the collection's mega display. !important beats the heading's baked
   has-mega-font-size preset class (core prints those with !important). */
body.is-brand-hotel .vhc-hero--interior .vhc-hero__display {
	font-size: clamp(1.5rem, 2.8vw, 2.5rem) !important;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.15;
}

/* Home hero: wordmark lockup anchored at the bottom of the image, spanning
   the full viewport width inside the page gutters. The cover block itself
   is the flex container, so alignment lives there. */
.wp-block-cover.vhc-hero--wordmark {
	align-items: flex-end;
	min-height: 100vh !important; /* beats the block's inline 92vh on pages seeded before this rule */
	min-height: 100svh !important;
	padding: 0;
}

/* Kill the gap under the lockup so it sits flush with the hero's bottom edge. */
.vhc-hero--wordmark .wp-block-cover__inner-container > :last-child {
	margin-bottom: 0;
}

.vhc-hero--wordmark .wp-block-cover__inner-container {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.vhc-hero__wordmark {
	margin: 0;
	width: 100%;
}

.vhc-hero__wordmark img {
	display: block;
	width: 100%;
}

/* Small tracked tagline right-aligned above the wordmark (Rev2). */
.vhc-hero__tagline {
	color: var(--wp--preset--color--pearl);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.7;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}

/* ─── Patterns: intro split (Rev2) ──────────────────────────────────── */
.vhc-intro-split {
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50);
}

/* BugHerd Riverwalk #36: on the homepage the statement sat much closer to
   the film above it than to "Our Story" below — doubling the top padding
   evens the two up. Scoped to the home page's own opening band so the
   interior pages keep their spacing. */
body.home .entry-content > .vhc-intro-split:first-of-type {
	padding-top: calc(var(--wp--preset--spacing--60) * 2);
}

/* Hanging indent: the first headline line sits flush, every following
   line (authored with shift+enter) steps in — the comp's stagger. */
.vhc-intro-split__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	padding-left: 2.95em;
	text-indent: -2.95em;
}

/* Copy column starts where the headline's second row ends (Rev2), and
   reads in Body 1 serif charcoal. */
.vhc-intro-split__copy {
	align-self: flex-start;
	max-width: 540px;
	padding-top: 5.5rem;
}

.vhc-intro-split__copy p {
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.vhc-intro-split__copy .wp-block-buttons {
	margin-top: 1.5rem;
}

/* BugHerd #99: the hanging-indent stagger is a homepage-specific comp
   detail (the "Destinations for every desire" headline). Interior pages
   use the --sans copy variant for this same component and shouldn't jog. */
.vhc-intro-split--sans .vhc-intro-split__title {
	padding-left: 0;
	text-indent: 0;
}

/* Riverwalk #95: the dining intro's headline sat 1.5rem (24px) off its body
   copy -- close, but still wider than the 20px the intro-split and the
   collage settled on in #108/#118. 1.25rem so every headline-to-body pair
   on mobile agrees. (#116 is the same fix for .vhc-feature__label, but that
   rule has to live at the END of this file -- see the note there.) */
@media (max-width: 781px) {
	.vhc-dine__head {
		margin-bottom: 1.25rem;
	}
}

/* BugHerd #84/#91: .vhc-intro-split__copy's 5.5rem padding-top aligns it
   with the *second* line of the homepage's two-line staggered headline in
   the desktop side-by-side layout — once WP core stacks the columns on
   mobile, that same offset becomes a literal, oversized gap directly
   under the now-stacked headline instead.

   Riverwalk #108/#109/#113/#128: 1.5rem did not go far enough. Stacked, the
   copy column already carries core's 20px block gap above it, so the padding
   was adding a second gap on top of the first — 44px between the headline and
   its first line, against 39px on the signed-off DESKTOP layout. Mobile was
   the wider of the two, which is backwards. At 0 the block gap stands alone
   and the pair reads at 20px, which is also what the collage headline now
   sits at (#118/#119) — #108 asked for the two to be consistent.

   The Courts do not render this component at all (checked: 0 occurrences on
   Texican against Riverwalk's 4), so this needs no is-brand-court guard; The
   George and Santana Row DO, and measured identically before the change. */
@media (max-width: 781px) {
	.vhc-intro-split__copy {
		padding-top: 0;
	}
}

/* BugHerd #119: fade the homepage's intro-split headlines in as they
   scroll into view — self view() timeline (no sticky pin involved, so no
   named/scoped timeline needed the way the scroll-hero's is). Falls back
   to fully visible with no animation where unsupported. Scoped to
   body.home: valencia_intro_split_generic() is the same shared component
   used on most hotel/property pages, and this ask was homepage-specific. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		body.home .vhc-intro-split__title,
		body.home .vhc-intro-split__copy {
			animation: vhc-intro-split-fade-in linear both;
			animation-range: entry 0% entry 60%;
			animation-timeline: view();
		}
	}
}

@keyframes vhc-intro-split-fade-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Hero subnav: sibling-page tabs pinned under the fixed header (Rev2
   Meetings/Weddings/Business Travel share this hero). Fixed so it stays
   put while scrolling; solid pearl rule over the hero (matching the
   announcement bar's treatment there), then pearl chrome with the
   standard hairline once past the hero (body.vhc-past-hero via nav.js). */
.vhc-hero__subnav {
	border-bottom: 1px solid var(--wp--preset--color--pearl);
	display: flex;
	gap: 3.75rem;
	justify-content: center;
	left: 0;
	margin: 0;
	padding: 1rem 1.5rem 0.9375rem;
	position: fixed;
	right: 0;
	top: var(--valencia-header-height);
	transition: background-color 0.3s ease, border-color 0.3s ease;
	z-index: 90;
}

body.vhc-past-hero .vhc-hero__subnav {
	background: var(--wp--preset--color--pearl);
	border-bottom-color: var(--section-hairline);
}

.vhc-hero__subnav a {
	color: var(--wp--preset--color--pearl);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.5;
	opacity: 0.75;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease, opacity 0.25s ease;
}

.vhc-hero__subnav a.is-current,
.vhc-hero__subnav a:hover {
	color: var(--wp--preset--color--pearl);
	opacity: 1;
}

body.vhc-past-hero .vhc-hero__subnav a {
	color: var(--wp--preset--color--midnight);
	opacity: 1;
}

body.vhc-past-hero .vhc-hero__subnav a.is-current,
body.vhc-past-hero .vhc-hero__subnav a:hover {
	color: var(--wp--preset--color--golden-hour);
}

/* Standalone subnav variant: same tabs on pearl for hero-less pages
   (Weddings, Business Travel) — sticks under the fixed header while the
   page scrolls, same hairline rule as the announcement bar. */
.vhc-subnav {
	background: var(--wp--preset--color--pearl);
	border-bottom: 1px solid var(--section-hairline);
	position: sticky;
	top: var(--valencia-header-height);
	z-index: 90;
}

.vhc-subnav__links {
	display: flex;
	gap: 3.75rem;
	justify-content: center;
	margin: 0;
	padding: 1rem 1.5rem 0.9375rem;
}

.vhc-subnav__links a {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.vhc-subnav__links a.is-current,
.vhc-subnav__links a:hover {
	color: var(--wp--preset--color--golden-hour);
}

/* BugHerd #103: at 60px the two gaps alone ate almost the whole 383px
   content width left after side padding, squeezing "business travel"
   (needs ~108.5px unwrapped) below its natural width and wrapping it to
   two lines while "meetings"/"weddings" stayed single-line. Both subnav
   variants share this exact layout shape, so both get the same fix. */
@media (max-width: 600px) {
	.vhc-hero__subnav,
	.vhc-subnav__links {
		gap: 1.25rem;
	}
}

/* ─── Patterns: RFP form (hotel Meetings & Events) ──────────────────── */
.vhc-rfp {
	margin-bottom: 3rem;
	margin-top: 2rem;
}

.vhc-rfp__intro {
	margin-bottom: 4.5rem;
}

.vhc-rfp__head {
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.58;
	max-width: 16rem;
	text-transform: uppercase;
}

.vhc-rfp__lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4375rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin: 0;
	max-width: 33rem;
}

.vhc-rfp__grid {
	display: grid;
	gap: 3.25rem 2.25rem;
	grid-template-columns: 1fr 1fr;
}

.vhc-rfp__field--wide {
	grid-column: 1 / -1;
}

.vhc-rfp__field span {
	color: var(--wp--preset--color--midnight-tint);
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	margin-bottom: 0.625rem;
}

.vhc-rfp__field input,
.vhc-rfp__field textarea {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--section-hairline);
	border-radius: 0;
	color: var(--wp--preset--color--midnight);
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	letter-spacing: 0.02em;
	padding: 0 0 0.625rem;
	width: 100%;
}

.vhc-rfp__field textarea {
	min-height: 2rem;
	resize: vertical;
}

.vhc-rfp__field input:focus,
.vhc-rfp__field textarea:focus {
	border-bottom-color: var(--section-accent);
	outline: none;
}

.vhc-rfp__field select {
	appearance: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8f94' stroke-width='1.3'/%3E%3C/svg%3E") right center no-repeat;
	border: 0;
	border-bottom: 1px solid var(--section-hairline);
	border-radius: 0;
	color: var(--wp--preset--color--midnight);
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	letter-spacing: 0.02em;
	padding: 0 1.25rem 0.625rem 0;
	width: 100%;
}

.vhc-rfp__field select:focus {
	border-bottom-color: var(--section-accent);
	outline: none;
}

.vhc-rfp__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem 1.5rem;
	padding-top: 0.375rem;
}

.vhc-rfp__choices label {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 0.5rem;
}

.vhc-rfp__choices input[type="checkbox"] {
	accent-color: var(--section-accent);
	margin: 0;
}

.vhc-rfp__choices span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.vhc-rfp__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 2.25rem;
}

.vhc-rfp__actions .vhc-btn-box {
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	line-height: 1.5;
}

.vhc-rfp__actions .vhc-btn-box:hover {
	background: var(--section-accent);
}

@media (max-width: 781px) {
	.vhc-rfp__grid {
		gap: 2.5rem;
		grid-template-columns: 1fr;
	}
}

/* ─── Patterns: generic intro ("a note from us") ────────────────────── */
/* No dedicated spacing existed — fine wherever the pattern happened to
   land mid-page (e.g. the homepage), but butted straight against a hero
   cover block with zero breathing room on interior pages (Careers, FAQs). */
.vhc-intro {
	padding: var(--wp--preset--spacing--50) 0;
}

/* ─── Terms & Conditions ────────────────────────────────────────────── */
.vhc-terms {
	margin-bottom: var(--wp--preset--spacing--70);
	margin-top: clamp(3rem, 6vw, 5.5rem);
}

.vhc-terms__list {
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	line-height: 1.5;
	margin: 0 0 2.25rem;
	padding-left: 1.125rem;
}

.vhc-terms__list li {
	margin-bottom: 0.9375rem;
}

.vhc-terms__questions {
	font-size: 0.8125rem;
	margin: 0 0 2.5rem;
}

.vhc-terms__questions a {
	color: inherit;
}

/* Legal prose (Privacy Policy / Accessibility): narrow measure, small
   serif section heads over terms-scale copy. */
.vhc-legal .vhc-legal__section,
.vhc-legal .vhc-legal__copy {
	margin-left: 0;
	max-width: 720px;
}

.vhc-legal__section {
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	margin: 2.75rem 0 0.875rem;
}

.vhc-legal__copy {
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	line-height: 1.6;
	margin: 0 0 0.875rem;
}

.vhc-legal__copy a {
	color: inherit;
}

/* ─── Contact page ──────────────────────────────────────────────────── */
.vhc-contact {
	margin-top: clamp(3rem, 6vw, 5.5rem);
}

/* Figma (node 2013:2322): the intro's two columns share the exact same
   grid as the form fields directly below (both column edges line up),
   and the copy reads in the same "Body 1" Ortica Light treatment its
   heading sibling gets. Neither was true before — .vhc-faq__intro's own
   independent max-width:1080px/margin:auto centering put it on a
   different axis than .vhc-rfp's alignwide (1380px) width, and nothing
   scoped .vhc-faq__copy's font here (only the Press page's own
   .vhc-tiers--press wrapper supplies that treatment) — so it fell back
   to the page's plain sans body font. */
.vhc-contact .vhc-faq__intro {
	gap: 2.25rem;
	grid-template-columns: 1fr 1fr;
	margin: 0 0 3rem;
	max-width: none;
}

.vhc-contact .vhc-faq__copy {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.vhc-contact .vhc-faq__copy p {
	margin: 0 0 1rem;
}

.vhc-contact__head {
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.58;
	text-transform: uppercase;
}

.vhc-contact__lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin: 0 0 2.5rem;
	max-width: 33rem;
}

.vhc-contact__address {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin: 0 0 1.75rem;
}

.vhc-contact__lines {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.7;
	margin: 0 0 2.25rem;
	text-transform: uppercase;
}

.vhc-contact__lines a {
	color: inherit;
}

.vhc-contact__links {
	display: flex;
	gap: 2.5rem;
}

/* ─── Gravity Forms: house dress ────────────────────────────────────── */
/* Stack forms (Contact, Event RFP): underlined fields on the RFP grid. */
.vhc-gform {
	margin-bottom: var(--wp--preset--spacing--70);
	margin-top: clamp(3rem, 6vw, 5rem);
}

.vhc-gform .gform_wrapper .gform_fields {
	grid-column-gap: 2.25rem;
	grid-row-gap: 3.25rem;
}

.vhc-gform .gform_wrapper .gfield_label {
	color: var(--wp--preset--color--midnight-tint);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	margin-bottom: 0.625rem;
	text-transform: capitalize;
}

/* BugHerd #114: floating labels (assets/js/gform-floating-labels.js
   toggles .is-focused/.is-filled — text/email/tel/select fields only,
   not checkbox/radio groups). At rest the label overlays the input's
   own line, matching the size/weight/case an ordinary typed answer
   would have, instead of the smaller field-label styling above; once
   floated it settles back into that same field-label look. Absolute
   positioning removes the label from flow, so .ginput_container
   naturally rises to fill the gap its margin-bottom used to hold open
   — no separate spacing adjustment needed. */
.vhc-gform .gform_wrapper .vhc-floating-label {
	position: relative;
}

/* BugHerd Riverwalk #61: the comp shows these labels in the muted display
   face at rest, not as body-weight placeholder text. That softens what
   BugHerd #114 set up — the label still rides up on focus, it just starts
   in the field-label voice rather than the typed-answer one. */
.vhc-gform .gform_wrapper .vhc-floating-label .gfield_label {
	color: var(--wp--preset--color--midnight-tint);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 400;
	left: 0;
	letter-spacing: 0.02em;
	margin: 0;
	pointer-events: none;
	position: absolute;
	text-transform: none;
	top: 0;
	transform-origin: left top;
	transition: transform 0.2s ease, color 0.2s ease;
	z-index: 1;
}

.vhc-gform .gform_wrapper .vhc-floating-label.is-focused .gfield_label,
.vhc-gform .gform_wrapper .vhc-floating-label.is-filled .gfield_label {
	color: var(--wp--preset--color--midnight-tint);
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0.03em;
	text-transform: capitalize;
	transform: translateY(-1.375rem) scale(0.8125);
}

/* The phone field's format-mask placeholder ("(999) 999-9999") would
   otherwise show through behind the floating label at rest — hidden
   until focus, where it's actually useful as a typing hint. */
.vhc-gform .gform_wrapper .vhc-floating-label:not(.is-focused) input::placeholder {
	opacity: 0;
}

/* BugHerd #113: an asterisk instead of the literal "(Required)" text.
   Gravity Forms nests a second .gfield_required-and-.gfield_required_text
   span carrying the actual text inside the outer .gfield_required span —
   the inner one is what's visually hidden (font-size only, not
   display/visibility, so it's still announced to screen readers), and
   the asterisk is added once via ::before on the outer, matched with
   :not() so it doesn't also match — and double up on — the inner span. */
.vhc-gform .gform_wrapper .gfield_required {
	color: var(--section-accent);
}

.vhc-gform .gform_wrapper .gfield_required_text {
	font-size: 0;
}

.vhc-gform .gform_wrapper .gfield_required:not(.gfield_required_text)::before {
	content: '*';
	font-size: 1rem;
}

.vhc-gform .gform_wrapper input[type='text'],
.vhc-gform .gform_wrapper input[type='email'],
.vhc-gform .gform_wrapper input[type='tel'],
/* number and date joined the Event RFP with #433/#490 and were not in this
   list, so they fell back to the browser's own boxed control — a white
   rectangle with a border and spinners, in a form where every other field
   is a bare underline. */
.vhc-gform .gform_wrapper input[type='number'],
.vhc-gform .gform_wrapper input[type='date'],
.vhc-gform .gform_wrapper select,
.vhc-gform .gform_wrapper textarea {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--section-hairline) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--midnight);
	/* BugHerd Riverwalk #61: the typed answer sits in the display face, with
	   the label above it. */
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	letter-spacing: 0.02em;
	min-height: 0;
	padding: 0 0 0.625rem !important;
	width: 100% !important;
}


/* The spinner is a second control the underline style has no room for, and
   it reads as a stray box against the hairline. Numbers are still typed and
   still validated as numbers. */
.vhc-gform .gform_wrapper input[type='number'] {
	appearance: textfield !important;
	-moz-appearance: textfield !important;
}

.vhc-gform .gform_wrapper input[type='number']::-webkit-outer-spin-button,
.vhc-gform .gform_wrapper input[type='number']::-webkit-inner-spin-button {
	appearance: none !important;
	-webkit-appearance: none !important;
	margin: 0 !important;
	display: none !important;
}

.vhc-gform .gform_wrapper select {
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8f94' stroke-width='1.3'/%3E%3C/svg%3E") !important;
	background-position: right center !important;
	background-repeat: no-repeat !important;
	padding-right: 1.25rem !important;
}

.vhc-gform .gform_wrapper .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0.375rem 0 0;
}

.vhc-gform .gform_wrapper .gchoice {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
}

.vhc-gform .gform_wrapper .gfield-choice-input {
	accent-color: var(--section-accent);
	margin: 0;
}

.vhc-gform .gform_wrapper .gchoice label {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	margin: 0;
	text-transform: uppercase;
}

/* BugHerd #117: reverted to the comp's bare underline (was a boxed
   field with a full keyline border — an earlier, client-approved
   deviation that a later ticket asked to revisit). border/padding now
   fall through to the shared input rule above; only the taller
   min-height and vertical resize are still needed here. */
.vhc-gform .gform_wrapper textarea {
	height: auto !important;
	min-height: 8.5rem;
	resize: vertical;
}

/* Gravity writes rows="10" on every textarea whatever its size, so the
   `small` class only lowers min-height and the row count still paints a box
   as tall as Message. Address is two or three lines, so height it outright.
   The extra class outranks the `height: auto` above wherever it sits. */
.vhc-gform .gform_wrapper textarea.small {
	min-height: 0 !important;
	height: 5.5rem !important;
}

.vhc-gform .gform_wrapper input:focus,
.vhc-gform .gform_wrapper input:focus-visible {
	border-bottom-color: var(--section-accent) !important;
	box-shadow: none !important;
	outline: none;
}

.vhc-gform .gform_wrapper textarea:focus,
.vhc-gform .gform_wrapper textarea:focus-visible {
	border-bottom-color: var(--section-accent) !important;
	box-shadow: none !important;
	outline: none;
}

.vhc-gform .gform_wrapper .gform_footer {
	display: flex;
	justify-content: flex-end;
	margin: 2.25rem 0 0;
	padding: 0;
}

.vhc-gform .gform_wrapper .gform_footer input[type='submit'],
.vhc-gform .gform_wrapper .gform_footer button {
	background: transparent !important;
	border: 1px solid var(--section-accent) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--section-accent) !important;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 500 !important;
	height: auto !important;
	letter-spacing: 0.14em !important;
	line-height: 1.5 !important;
	min-height: 0 !important;
	padding: 0.5rem 1.375rem !important;
	text-transform: uppercase !important;
	transition: background-color 0.25s ease, color 0.25s ease;
	width: auto !important;
}

.vhc-gform .gform_wrapper .gform_footer input[type='submit']:hover,
.vhc-gform .gform_wrapper .gform_footer button:hover {
	background: var(--section-accent) !important;
	color: var(--wp--preset--color--pearl) !important;
}

.vhc-gform .gform_wrapper .gform_validation_errors,
.vhc-gform .gform_wrapper .gfield_validation_message {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--section-accent);
	font-size: 0.8125rem;
	padding: 0.375rem 0 0;
}

.vhc-gform .gform_wrapper .gform_confirmation_message {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 300;
}

/* BugHerd #115: "Request Dates" field progressively enhanced into a
   range calendar (assets/js/gform-date-range.js) — the input itself
   keeps the theme's normal underlined-field styling from the rules
   above, this just positions the popover under it. .reserve-calendar*
   is reused as-is from the reserve panel's own date picker (already a
   self-contained pearl-background popover, not tied to that drawer's
   dark theme). */
/* Gravity Forms' Orbital theme resets div/button layout and styling
   inside .ginput_container with its own high-specificity rules (same
   reason the shared input/submit rules above need !important) — beats
   .reserve-calendar's own position/display/background without matching
   !important here too. */
.vhc-gform-daterange {
	position: relative !important;
}

.vhc-gform-daterange__calendar {
	background: var(--wp--preset--color--pearl) !important;
	box-shadow: 0 12px 32px rgba(19, 30, 41, 0.25) !important;
	color: var(--wp--preset--color--midnight) !important;
	display: block !important;
	left: 0 !important;
	margin-top: 0.5rem;
	padding: 1rem 1.25rem 1.25rem !important;
	position: absolute !important;
	right: 0 !important;
	top: 100% !important;
	z-index: 10 !important;
}

.vhc-gform-daterange__calendar[hidden] {
	display: none !important;
}

.vhc-gform-daterange__calendar .reserve-calendar__grid {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
}

.vhc-gform-daterange__calendar button {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--midnight) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	min-height: 0 !important;
	padding: 0 !important;
	text-transform: none !important;
}

.vhc-gform-daterange__calendar .reserve-calendar__day:disabled {
	color: var(--wp--preset--color--midnight-tint) !important;
}

.vhc-gform-daterange__calendar .reserve-calendar__day.is-selected {
	background: var(--wp--preset--color--midnight) !important;
	color: var(--wp--preset--color--pearl) !important;
}

.vhc-gform-daterange__calendar .reserve-calendar__day.is-between {
	background: rgba(19, 30, 41, 0.1) !important;
}

/* Footer newsletter: single underlined email + text submit. GF 3's
   Orbital theme styles via CSS variables and high-specificity rules, so
   the critical resets land with !important (Dewberry's mechanism). */
.valencia-newsletter {
	--gf-ctrl-btn-radius: 0;
	--gf-ctrl-btn-size: auto;
	--gf-form-gap-y: 0;
}

.valencia-newsletter .gform_wrapper {
	margin: 0;
}

.valencia-newsletter form {
	align-items: flex-end;
	display: flex;
	gap: 1.75rem;
}

.valencia-newsletter .gform_body {
	/* Fixed, modest basis rather than growing to fill the row — GF's own
	   Orbital theme (loaded after this file) otherwise wins the width. */
	flex: 0 1 220px !important;
	min-width: 0;
}

.valencia-newsletter .gform_body,
.valencia-newsletter .gform_fields,
.valencia-newsletter .gfield,
.valencia-newsletter .ginput_container {
	border: 0;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* !important: GF's Orbital theme (loaded after this stylesheet) otherwise
   wins on specificity and keeps the label visible despite hidden_label. */
.valencia-newsletter .gfield_label,
.valencia-newsletter .gfield_required,
.valencia-newsletter .gfield_description {
	display: none !important;
}

.valencia-newsletter input[type='email'] {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--midnight) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--midnight) !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0.03em;
	max-width: 100% !important;
	min-height: 0;
	padding: 0 0 0.375rem !important;
	width: 100% !important;
}

/* Caravan #38 was fixed in the Court theme, not here. The 0.03em above
   carries no !important, so Gravity Forms' Orbital theme beats it and the
   hotel field measures `normal` — as does its placeholder, so the two still
   agree and there is no mismatch to correct. The Courts needed the fix
   because their own rule is specific enough to win, which left a tracked
   field above an untracked placeholder. Adding !important here would track
   out every hotel and the collection, which is a design change nobody has
   asked for. */
.valencia-newsletter input[type='email']::placeholder {
	color: var(--wp--preset--color--midnight-tint);
	opacity: 1;
	text-transform: capitalize;
}

.valencia-newsletter input[type='email']:focus,
.valencia-newsletter input[type='email']:focus-visible {
	border-bottom-color: var(--section-accent) !important;
	box-shadow: none !important;
	outline: none;
}

.valencia-newsletter .gform_footer {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.valencia-newsletter .gform_footer input[type='submit'],
.valencia-newsletter .gform_footer button {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--midnight) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--midnight) !important;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.6875rem !important;
	font-weight: 400 !important;
	height: auto !important;
	letter-spacing: 0.14em !important;
	line-height: 1.5 !important;
	min-height: 0 !important;
	padding: 0 0 0.375rem !important;
	text-transform: uppercase !important;
	width: auto !important;
}

.valencia-newsletter .gform_footer input[type='submit']:hover,
.valencia-newsletter .gform_footer input[type='submit']:focus-visible,
.valencia-newsletter .gform_footer button:hover {
	background: transparent !important;
	border-bottom-color: var(--section-accent) !important;
	color: var(--section-accent) !important;
}

.valencia-newsletter .gfield_validation_message,
.valencia-newsletter .gform_validation_errors {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--section-accent) !important;
	font-size: 0.75rem;
	padding: 0.25rem 0 0 !important;
}

.valencia-newsletter .gform_confirmation_message {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
}

/* ─── Patterns: meeting venues slider (hotel Meetings) ──────────────── */
.vhc-venues {
	padding-bottom: var(--wp--preset--spacing--60);
}

.vhc-venues > .is-style-eyebrow {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	max-width: min(1380px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-venues__slider {
	margin: 0 auto;
	max-width: min(1380px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-venues__layout {
	display: flex;
	gap: clamp(2rem, 4.5vw, 4rem);
	padding-top: 0.375rem;
}

/* Comp: photo top-aligns with the kicker row, detail rides below it. */
.vhc-venues__detail {
	flex: 0 0 min(360px, 38%);
	padding-top: clamp(3rem, 6.5vw, 6.5rem);
}

.vhc-venues__media {
	flex: 1;
	margin: 0;
	min-width: 0;
}

.vhc-venues__media img {
	aspect-ratio: 780 / 520;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-venues__title {
	font-size: clamp(1.75rem, 2.7vw, 2.4375rem);
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 2.5rem;
}

.vhc-venues__spec {
	border-top: 1px solid var(--section-hairline);
	padding: 0.75rem 0 1.25rem;
}

.vhc-venues__spec-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0 0 0.3125rem;
	text-transform: uppercase;
}

.vhc-venues__spec-value {
	color: #717b85; /* comp midnight mid-tint */
	margin: 0;
}

.vhc-venues__chart {
	color: var(--section-accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin-left: 1.5rem;
	text-decoration: underline;
	text-transform: uppercase;
}

.vhc-venues__detail .vhc-btn-box {
	margin-top: 1rem;
}

@media (max-width: 781px) {
	.vhc-venues__layout {
		flex-direction: column-reverse;
	}

	.vhc-venues__detail {
		flex-basis: auto;
		padding-top: 0;
	}
}

/* ─── Patterns: group rates & planning band (hotel Meetings) ────────── */
.vhc-skyband {
	--section-hairline: var(--wp--preset--color--pearl);
	background: var(--vhc-sky, #7594b3);
	color: var(--wp--preset--color--pearl);
	/* BugHerd Riverwalk #62 / #63: three times the air above the headline,
	   and the same again beneath so the band sits evenly. */
	padding-bottom: calc(var(--wp--preset--spacing--70) * 3);
	padding-top: calc(var(--wp--preset--spacing--70) * 3);
}

/* #62: everything on the blue reads off-white — the headings were still
   coming through in midnight from the global heading colour. */
.vhc-skyband :is(h1, h2, h3, h4, p, li, a, span) {
	color: var(--wp--preset--color--pearl);
}

.vhc-skyband__row + .vhc-skyband__row {
	margin-top: var(--wp--preset--spacing--60);
}

.vhc-skyband__head {
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.58;
	max-width: 16rem;
	text-transform: uppercase;
}

.vhc-skyband__lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4375rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin: 0 0 2rem;
	max-width: 33rem;
}

.vhc-skyband__label {
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.15em;
	line-height: 1.5;
	margin: 0 0 2.5rem;
	max-width: 290px;
	text-transform: uppercase;
}

.vhc-skyband__copy {
	margin: 0;
	max-width: 360px;
}

/* Light keyline CTA on the sky ground. */
.vhc-btn-box--light {
	border-color: var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--pearl);
}

.vhc-btn-box--light:hover {
	background: var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--midnight);
}

.vhc-skyband__links {
	list-style: none;
	margin: 0;
	max-width: 559px;
	padding: 0;
}

.vhc-skyband__links li {
	border-bottom: 1px solid var(--wp--preset--color--pearl);
}

.vhc-skyband__links a {
	align-items: center;
	color: var(--wp--preset--color--pearl);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	justify-content: space-between;
	letter-spacing: 0.14em;
	padding: 0.5rem 0 0.4375rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 0.25s ease;
}

.vhc-skyband__links a:hover {
	opacity: 0.75;
}

/* ─── Patterns: gallery slider (hotel interior pages) ───────────────── */
.vhc-gallery-slider .vhc-slide {
	width: min(316px, 78vw);
}

/* ─── Patterns: page label (hero-less pages) ────────────────────────── */
.vhc-page-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.58;
	margin: clamp(3rem, 6vw, 5rem) auto clamp(2.5rem, 5vw, 4.25rem);
	text-align: center;
	text-transform: uppercase;
}

/* ─── Patterns: wide slider (Gallery) ───────────────────────────────── */
.vhc-wideslider {
	position: relative;
}

.vhc-wideslider .splide__slide img {
	aspect-ratio: 1320 / 739;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* BugHerd Riverwalk #70: the arrows were literal arrow characters set as
   CSS content. The comp (Figma 6699:4509) draws a 31px pearl disc at half
   opacity with a 1px midnight chevron, so both are drawn here — the disc
   as the button's own background, the chevron as two sides of a small
   square turned. The 48px button stays as the tap target; only the disc
   inside it is 31. */
.vhc-wideslider__arrow {
	align-items: center;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	height: 3rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	z-index: 2;
}

.vhc-wideslider__arrow::before {
	background: rgba(246, 246, 240, 0.5);
	border-radius: 50%;
	content: '';
	height: 31px;
	position: absolute;
	transition: background-color 0.25s ease;
	width: 31px;
}

.vhc-wideslider__arrow:hover::before {
	background: var(--wp--preset--color--pearl);
}

.vhc-wideslider__arrow::after {
	border-right: 1px solid var(--wp--preset--color--midnight);
	border-top: 1px solid var(--wp--preset--color--midnight);
	content: '';
	height: 8px;
	position: relative;
	width: 8px;
}

.vhc-wideslider__arrow--prev {
	left: 1.25rem;
}

.vhc-wideslider__arrow--prev::after {
	transform: translateX(1px) rotate(-135deg);
}

.vhc-wideslider__arrow--next {
	right: 1.25rem;
}

.vhc-wideslider__arrow--next::after {
	transform: translateX(-1px) rotate(45deg);
}

/* #70: the neighbouring photos showed as 12px slivers where the comp
   teases about 33px either side. Splide writes padding:0 inline on its own
   track, so no stylesheet rule can widen the gutter there — but it sizes
   the slides from the wrapper, so narrowing that does the same job. 1336
   in a 1464 window puts the active photo at 64 and leaves 34 of its
   neighbour showing past the 30px gap. */
@media (min-width: 782px) {
	.entry-content > .vhc-wideslider-wrap,
	.vhc-band > .vhc-wideslider-wrap {
		/* 8rem, not the page gutter: the side margin has to clear the
		   slider's own 30px gap before any of the neighbour shows, so the
		   usual 1.5rem a side leaves nothing. 64 a side puts 34 of the
		   next photo on screen at every desktop width, not just wide ones. */
		max-width: min(1336px, calc(100% - 8rem));
	}
}

.vhc-wideslider__progress {
	background: rgba(19, 30, 41, 0.2);
	height: 2px;
	margin: 3.5rem auto 0;
	overflow: hidden;
	width: min(316px, 60%);
}

.vhc-wideslider__progress span {
	background: var(--section-accent);
	display: block;
	height: 100%;
	transition: width 0.4s ease;
	width: 0;
}

/* ─── Patterns: program accordion (hotel Business Travel) ───────────── */
.vhc-program {
	padding-bottom: var(--wp--preset--spacing--70);
}

.vhc-program__list {
	margin: 0.5rem 0 1rem;
	max-width: 631px;
}

.vhc-program__cta {
	margin-top: 2.5rem;
}

/* ─── Patterns: photo pair (hotel Explore) ──────────────────────────── */
.entry-content > .vhc-photopair {
	max-width: min(1200px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-photopair {
	display: flex;
	gap: clamp(2rem, 8.6vw, 7.75rem);
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--60);
}

.vhc-photopair figure {
	margin: 0;
}

.vhc-photopair img {
	display: block;
	height: auto;
	width: 100%;
}

.vhc-photopair__main {
	flex: 0 0 54.7%;
}

.vhc-photopair__accent {
	flex: 0 0 35%;
	margin-top: clamp(4rem, 12.5vw, 11.25rem);
}

/* Mirrored / top-aligned variants (Gallery). Images keep the natural
   aspect of their exported crops. */
.vhc-photopair--reversed {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.vhc-photopair--flush .vhc-photopair__accent {
	margin-top: 0;
}

.vhc-photopair--centered {
	align-items: center;
}

.vhc-photopair--centered .vhc-photopair__accent {
	margin-top: 0;
}

/* ─── Explore map block (Dewberry map-poi mechanism) ────────────────── */
/* BugHerd Riverwalk #68: the map ran straight on from the photo pair above
   it with nothing between them — it has a bottom edge but never had a top
   one. */
.vhc-exmap {
	display: flex;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-bottom: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--70);
}

.vhc-exmap__cats {
	flex: 0 0 300px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vhc-exmap__cats > li {
	margin-bottom: 1.5rem;
}

.vhc-exmap__cat {
	align-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight-tint);
	cursor: pointer;
	display: flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 1rem;
	letter-spacing: 0.14em;
	line-height: 1.5;
	padding: 0;
	text-align: left;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.vhc-exmap__dot {
	border: 1px solid var(--wp--preset--color--midnight-tint);
	border-radius: 50%;
	display: inline-block;
	flex: none;
	height: 18px;
	transition: background-color 0.25s ease, border-color 0.25s ease;
	width: 18px;
}

.vhc-exmap__cats > li.is-active .vhc-exmap__cat,
.vhc-exmap__cat:hover {
	color: var(--section-accent);
}

.vhc-exmap__cats > li.is-active .vhc-exmap__dot,
.vhc-exmap__cat:hover .vhc-exmap__dot {
	background: var(--section-accent);
	border-color: var(--section-accent);
}

.vhc-exmap__venues {
	color: #717b85; /* comp midnight mid-tint */
	font-family: var(--wp--preset--font-family--display);
	margin: 1rem 0 0;
	padding-left: 3.375rem;
}

.vhc-exmap__venues li {
	margin-bottom: 0.375rem;
}

.vhc-exmap__venues button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-align: left;
	text-transform: capitalize;
	transition: color 0.25s ease;
	/* BugHerd #519/#520 — "formatting is off for 1 and 3", which were the two
	   venue names long enough to wrap. A button is inline-block, and a
	   wrapped inline-block hands the line box its LAST line's baseline, so
	   the list number dropped level with the second line:

	       San Jose Center For The
	   1.  Performing Arts

	   Aligning the box to the top of the line puts the number back beside
	   the first line. Only names that wrap were ever affected, which is why
	   item 2 looked fine and the other categories mostly did too. */
	vertical-align: top;
}

.vhc-exmap__venues button:hover {
	color: var(--section-accent);
	text-decoration: underline;
}

.vhc-exmap__canvas {
	flex: 1;
	margin: 0;
	min-width: 0;
	position: relative;
}

.vhc-exmap__canvas img,
.vhc-exmap__map {
	aspect-ratio: 960 / 666;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Info window: pearl card with serif name and accent links; the default
   Google close button is replaced by our own. */
.vhc-exmap__iw {
	font-family: var(--wp--preset--font-family--body);
	padding: 0.5rem 1.5rem 0.75rem 0.5rem;
	position: relative;
}

.vhc-exmap__iw-name {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	margin: 0 0 0.25rem;
}

.vhc-exmap__iw-address {
	color: var(--wp--preset--color--midnight-tint);
	font-size: 0.8125rem;
	margin: 0 0 0.5rem;
}

.vhc-exmap__iw-links {
	display: flex;
	gap: 1rem;
}

.vhc-exmap__iw-links a {
	color: var(--section-accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: underline;
	text-transform: uppercase;
}

.vhc-exmap__iw-close {
	background: none;
	border: 0;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	font-size: 1.125rem;
	line-height: 1;
	padding: 0.25rem;
	position: absolute;
	right: 0;
	top: 0;
}

.vhc-exmap .gm-style-iw button.gm-ui-hover-effect {
	display: none !important;
}

@media (max-width: 781px) {
	.vhc-exmap {
		flex-direction: column;
	}

	.vhc-exmap__cats {
		flex-basis: auto;
	}
}

/* ─── Patterns: explore cards (hotel Explore) ───────────────────────── */
/* BugHerd Riverwalk #69: twice the air above these headlines. */
.vhc-excards {
	padding-top: calc(var(--wp--preset--spacing--70) * 2);
}

.vhc-excard__title {
	font-size: clamp(1.5rem, 2.2vw, 1.9375rem);
	font-weight: 300;
	line-height: 1.25;
	margin: 0 0 1.5rem;
}

.vhc-excard__media {
	margin: 0 0 1.75rem;
}

.vhc-excard__media img {
	display: block;
	height: auto;
	width: 100%;
}

.vhc-excard__copy {
	color: #717b85; /* comp midnight mid-tint */
	margin: 0 0 1.75rem;
}

/* Duo fine print (experience offers: "cannot be combined…"). */
.vhc-duo__fine {
	color: var(--wp--preset--color--midnight-tint);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	margin: 1.375rem 0 0;
	text-transform: capitalize;
}

/* ─── Patterns: event cards (experience PDPs) ───────────────────────── */
.vhc-events {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60);
}

.vhc-events > .is-style-eyebrow {
	margin-bottom: 2rem;
}

.vhc-event__media {
	margin: 0 0 1.25rem;
}

.vhc-event__media img {
	aspect-ratio: 420 / 236;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-event__name {
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: 0.14em;
	margin: 0 0 0.25rem;
	text-transform: uppercase;
}

.vhc-event__date {
	color: var(--wp--preset--color--midnight-tint);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	margin: 0 0 1.75rem;
	text-transform: capitalize;
}


/* Text-only event card — a gig listing with no artwork. The legacy
   calendars carry no images, so every imported show is one of these, and a
   month of them has to read as a calendar rather than as a grid with its
   pictures missing. The rule is a keyline and air where the photograph
   would have been, so the date leads and the name carries the card. */
.vhc-event--text {
	border-top: 1px solid var(--wp--preset--color--midnight-tint);
	/* a column so the date can `order` above the name */
	display: flex;
	flex-direction: column;
	padding-top: 1.25rem;
}

.vhc-event--text .vhc-event__date {
	color: var(--wp--preset--color--midnight-tint);
	margin: 0 0 0.375rem;
	order: -1;
}

.vhc-event--text .vhc-event__name {
	font-size: var(--wp--preset--font-size--subhead);
	margin: 0 0 1.25rem;
}

/* ─── Experience PDP: related experiences band ──────────────────────── */
.vhc-related {
	display: grid;
	gap: 2rem clamp(1.5rem, 2.3vw, 2.0625rem);
	grid-template-columns: 1fr 1fr;
	margin: var(--wp--preset--spacing--70) auto;
	max-width: min(1380px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

/* Spans the pair so the label sits over the band rather than above one
   card, and reuses the grid's own width and gap. */
.vhc-related__heading {
	grid-column: 1 / -1;
	margin: 0;
}

.vhc-related__media {
	margin: 0 0 2rem;
}

.vhc-related__media img {
	display: block;
	height: auto;
	width: 100%;
}

.vhc-related__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	margin: 0 0 1.375rem;
	text-transform: capitalize;
}

.vhc-related__title a {
	color: var(--wp--preset--color--midnight);
	text-decoration: none;
}

.vhc-related__copy {
	color: #717b85; /* comp midnight mid-tint */
	margin: 0 0 1.75rem;
	max-width: 420px;
}

@media (max-width: 781px) {
	.vhc-related {
		grid-template-columns: 1fr;
	}
}

/* Collage intro CTA rides below the copy (Business Travel). */
.vhc-collage__lead .wp-block-buttons {
	margin-top: 2rem;
}
/* Width note: this was capped at a standalone 1200px (comp-derived), which
   read as more side margin than the sections around it; then bounded only
   by the root gutter, which let the section stretch while every element
   inside kept a fixed comp width — opening an unbounded hole between the
   copy and the right-hand image (735px at 1920, 1375px at 2560). It's now
   sized as a wide section, up with the .alignwide rule. */

.vhc-collage {
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50);
}

/* h1 on hero-less pages, styled at H2 scale. */
.vhc-collage__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0 0 5rem;
	max-width: 540px;
	text-transform: none;
}

.vhc-collage__title strong {
	font-weight: 400;
}

.vhc-collage__small {
	margin: 0 0 5rem;
}

.vhc-collage__small img {
	aspect-ratio: 420 / 391;
	display: block;
	height: auto;
	object-fit: cover;
	width: min(420px, 100%);
}

.vhc-collage__kicker {
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: 0.14em;
	line-height: 1.35;
	/* Comp: copy sits 16px below the kicker. */
	margin: 0 0 1rem;
	max-width: 500px;
	text-transform: uppercase;
}

.vhc-collage__copy {
	color: var(--wp--preset--color--charcoal);
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0;
	max-width: 480px;
}

/* Serif copy variant (Business Travel): Body 1 instead of body sans. */
.vhc-collage--serif .vhc-collage__copy {
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.vhc-collage__media {
	align-self: flex-start;
}

.vhc-collage__tall {
	margin: 0;
}

/* Fills its column: at the comp's own width that is the comp's 517px, and
   past it the image grows with the column instead of stranding itself
   against the right gutter. */
.vhc-collage__tall img {
	aspect-ratio: 517 / 668;
	display: block;
	height: auto;
	margin-left: auto;
	object-fit: cover;
	width: 100%;
}

/* Riverwalk #118/#119/#123: the collage headline and its small image each
   carry `margin: 0 0 5rem` — 80px, a figure taken from the desktop comp
   where the lead column is a tall narrow block of its own. Stacked at 393
   that 80px becomes a hole directly under the headline, and there was no
   mobile override at all.

   1.25rem lands the headline 20px above what follows, which is the same
   figure the intro-split's headline and body now read at (#108 asked for
   consistency between them). #123 is the same component on Weddings and
   comes with it, as she said it would.

   The Courts do not use this component — checked, 0 occurrences of
   .vhc-collage__lead on Texican — so no is-brand-court guard is needed. */
@media (max-width: 781px) {
	.vhc-collage__title,
	.vhc-collage__small {
		margin-bottom: 1.25rem;
	}
}

/* ─── Patterns: wide image ──────────────────────────────────────────── */
.vhc-wide-image {
	margin-bottom: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--40);
}

.vhc-wide-image img {
	aspect-ratio: 1316 / 737;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* ─── Patterns: experience grid (Rev2 Experiences) ──────────────────── */
.vhc-xgrid {
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--80);
}

.vhc-xgrid > .is-style-eyebrow {
	margin-bottom: 2.5rem;
}

.vhc-xgrid__items {
	display: grid;
	gap: 2rem 1.875rem;
	grid-template-columns: repeat(3, 1fr);
}

.vhc-xgrid__items > .vhc-xcard {
	margin: 0;
}

@media (max-width: 900px) {
	.vhc-xgrid__items {
		grid-template-columns: 1fr;
	}
}

.vhc-xcard__media img {
	aspect-ratio: 420 / 515;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-xcard__name {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 1.375rem 0 0.25rem;
	text-transform: uppercase;
}

.vhc-xcard__where {
	color: #717b85; /* comp's midnight mid-tint */
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	letter-spacing: 0.03em;
	line-height: 1.25;
	margin: 0 0 1rem;
}

.vhc-xcard__desc {
	color: #606060;
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0 0 1.25rem;
}

.vhc-xcard__link {
	border-bottom: 1px solid var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--golden-hour);
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 300;
	padding-bottom: 0.125rem;
	text-decoration: none;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.vhc-xcard__link:hover {
	border-bottom-color: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--midnight);
}

/* ─── Patterns: venue grid (Rev2 Weddings) ──────────────────────────── */
.vhc-venues-band {
	padding-top: var(--wp--preset--spacing--60);
}

.vhc-venues > .is-style-eyebrow {
	margin-bottom: 2.5rem;
}

.vhc-venues__items {
	display: grid;
	gap: 3.5rem 1.875rem;
	grid-template-columns: repeat(3, 1fr);
}

/* BugHerd #107: "stack one up, like the collections and dining pages" —
   mirrors .vhc-cgrid__items' existing mobile breakpoint exactly. */
@media (max-width: 900px) {
	.vhc-venues__items {
		grid-template-columns: 1fr;
	}
}

/* Flow-layout sibling margins would stagger the grid rows. */
.vhc-venues__items > .vhc-venue {
	margin: 0;
}

.vhc-venue .vhc-cgrid-card__slider {
	margin-bottom: 1.5rem;
}

.vhc-venue__details summary {
	align-items: center;
	color: var(--wp--preset--color--golden-hour);
	cursor: pointer;
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	justify-content: space-between;
	letter-spacing: 0.14em;
	line-height: 1.5;
	list-style: none;
	padding: 0.375rem 0 0;
	text-transform: uppercase;
}

.vhc-venue__details summary::-webkit-details-marker {
	display: none;
}

.vhc-venue__details summary::after {
	color: var(--wp--preset--color--golden-hour);
	content: '+';
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
}

.vhc-venue__details[open] summary::after {
	content: '\2212';
}

.vhc-venue__specs {
	margin: 1.25rem 0 0;
}

.vhc-venue__specs > div {
	/* Comp draws the spec dividers in the tint, not the midnight rule. */
	border-top: 1px solid var(--wp--preset--color--midnight-tint);
	padding: 0.75rem 0 0.875rem;
}

.vhc-venue__specs dt {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0 0 0.375rem;
	text-transform: uppercase;
}

.vhc-venue__specs dd {
	color: #717b85; /* comp's midnight mid-tint — between midnight and the tint token */
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0;
}

.vhc-venue__cta {
	border: 1px solid var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--golden-hour);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.5;
	margin-top: 1.5rem;
	padding: 0.4375rem 1.75rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.vhc-venue__cta:hover {
	background: var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--midnight);
}

/* ─── Patterns: feature band (Rev2 Meetings) ────────────────────────── */
.vhc-feature {
	padding-bottom: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--80);
}

.vhc-feature__cols {
	margin: 0 auto;
}

.vhc-feature__copy {
	text-align: center;
}

.vhc-feature__label {
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.15em;
	line-height: 1.5;
	margin: 0 auto 3.25rem;
	max-width: 300px;
	text-transform: uppercase;
}

.vhc-feature__text {
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0 auto 1.5rem;
	max-width: 380px;
}

.vhc-feature__media img {
	aspect-ratio: 424 / 485;
	display: block;
	height: auto;
	margin-left: auto;
	object-fit: cover;
	width: min(424px, 100%);
}

/* Feature scroller (BugHerd #64): sticky stage, crossfading panels. */
.vhc-feature-scroller {
	padding-bottom: 0;
	padding-top: 0;
	position: relative;
}

.vhc-feature-scroller__stage {
	align-items: center;
	display: flex;
	overflow: hidden;
	position: sticky;
	top: var(--valencia-header-height, 0px);
}

.vhc-feature-scroller__panel {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	/* Panels 2+ overlay panel 1's box exactly; panel 1 stays in normal
	   flow permanently so the sticky stage always has real height to
	   pin within, whether or not it's the currently-active one. */
	inset: 0 var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);
	opacity: 0;
	padding: var(--wp--preset--spacing--80) 0;
	position: absolute;
	transition: opacity 1.1s ease;
	visibility: hidden;
	width: calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
}

.vhc-feature-scroller__panel:first-child {
	position: relative;
	inset: auto;
	width: 100%;
}

.vhc-feature-scroller__panel.is-active {
	opacity: 1;
	visibility: visible;
}

.vhc-feature-scroller__panel .vhc-feature__copy,
.vhc-feature-scroller__panel .vhc-feature__media {
	flex: 1 1 320px;
}

/* One viewport of scroll per panel. The final trigger gets no shortened
   height: the last panel activates a half-viewport before its trigger's
   top clears the centre line, so trimming it leaves that panel active for
   only a sliver of the pinned phase before the stage releases. */
.vhc-feature-scroller__trigger {
	height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
	.vhc-feature-scroller__panel {
		transition: none;
	}
}

/* Mobile (BugHerd #106): no sticky pin, no crossfade — every panel stacks
   in normal document flow instead. .vhc-feature-scroller__panel's base
   rule (position: absolute, opacity: 0) and :first-child's own override
   both get beaten here on specificity ties by source order, so this one
   rule is enough to un-stack every panel, active or not; the trigger
   divs only exist to reserve extra scroll height for the sticky pin,
   so they're just removed rather than also neutralized. */
@media (max-width: 781px) {
	.vhc-feature-scroller__stage {
		flex-direction: column;
		position: static;
	}

	.vhc-feature-scroller__panel {
		gap: 1.5rem;
		inset: auto;
		opacity: 1;
		position: relative;
		transition: none;
		visibility: visible;
		width: 100%;
	}

	.vhc-feature-scroller__trigger {
		display: none;
	}
}

/* CTAs under the headline column (Rev2 Offers & Rewards intro). */
.vhc-intro-split .wp-block-column:first-child .wp-block-buttons {
	margin-top: 2.25rem;
}

/* ─── Patterns: full-bleed video band (Rev2 Offers & Rewards) ───────── */
.vhc-band-media {
	margin: 0;
}

.vhc-band-media video {
	aspect-ratio: 1440 / 820;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* ─── Patterns: rewards list (Rev2 Offers & Rewards) ────────────────── */
.vhc-rewards {
	padding: var(--wp--preset--spacing--60) 0;
}

/* Serif tracked label, cap-aligned with the first list row. */
.vhc-rewards__label {
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.15em;
	line-height: 1.5;
	margin: 0;
	max-width: 290px;
	text-transform: uppercase;
}

.vhc-rewards__list {
	list-style: none;
	margin: 0;
	max-width: 500px;
	padding: 0;
}

.vhc-rewards__list li {
	border-bottom: 1px solid var(--section-hairline);
	font-size: 0.8125rem;
	letter-spacing: 0.15em;
	line-height: 1.4;
	padding: 0.625rem 0;
	text-transform: uppercase;
}

.vhc-rewards__list li:first-child {
	padding-top: 0.125rem;
}

/* ─── Patterns: membership tier accordion (Rev2 Offers & Rewards) ───── */
.vhc-tiers {
	counter-reset: vhc-tier;
	padding-top: var(--wp--preset--spacing--60);
}

/* Rows and the eyebrow share the comp's narrower 902px wrapper. */
.vhc-tiers > :not(.alignfull) {
	max-width: min(902px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-tiers > .is-style-eyebrow {
	margin-bottom: 2.5rem;
}

.vhc-tier {
	border-bottom: 1px solid var(--section-hairline);
}

.vhc-tier summary {
	align-items: baseline;
	color: var(--wp--preset--color--golden-hour);
	cursor: pointer;
	display: grid;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	grid-template-columns: 2.75rem 1fr auto;
	letter-spacing: 0.02em;
	line-height: 1.2;
	list-style: none;
	/* BugHerd Riverwalk #65: the rows sat tight against their dividing
	   rule; roughly double the air on both sides of it. */
	padding: 2.75rem 0 3.25rem;
	transition: color 0.25s ease;
}

.vhc-tier summary:hover {
	color: var(--wp--preset--color--midnight);
}

.vhc-tier summary::-webkit-details-marker {
	display: none;
}

.vhc-tier summary::before {
	color: var(--wp--preset--color--midnight);
	content: counter( vhc-tier, decimal-leading-zero );
	counter-increment: vhc-tier;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: 0.14em;
}

/* Thin plus that becomes a minus when the row is open. */
.vhc-tier summary::after {
	align-self: center;
	color: var(--wp--preset--color--midnight);
	content: '+';
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.375rem;
	font-weight: 300;
	justify-self: end;
	line-height: 1;
}

.vhc-tier[open] summary::after {
	content: '\2212';
}

/* Open content indents to the tier-name column. */
.vhc-tier > :not(summary) {
	margin: 0 0 1rem 2.75rem;
	max-width: 677px;
}

/* Closing element (paragraph, list, buttons) keeps the same air above
   the divider as the gap between the row name and its copy (summary
   padding-bottom). */
/* BugHerd Riverwalk #67: when a tier is open, its last paragraph needs
   the same enlarged gap before the rule, or the open panel runs into the
   next row. Matches the summary's padding-bottom above. */
.vhc-tier > :not(summary):last-child {
	margin-bottom: 3.25rem;
}

.vhc-tier .vhc-tier__lead {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.vhc-tier > .wp-block-buttons {
	margin-bottom: 2.25rem;
	margin-top: 1.5rem;
}

.vhc-tiers__cta {
	margin-top: 3rem;
}

/* Plain accordion variant (Business Travel hotels): no row numbers, wider
   wrapper, content flush with the names. */
.vhc-tiers--plain > :not(.alignfull) {
	max-width: min(1080px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-tiers--plain .vhc-tier summary {
	grid-template-columns: 1fr auto;
}

.vhc-tiers--plain .vhc-tier summary::before {
	content: none;
}

.vhc-tiers--plain .vhc-tier > :not(summary) {
	margin-left: 0;
}

/* Golden dot ahead of an eyebrow (Rev2 section labels). The label itself
   reads midnight in every Rev2 comp; only the dot carries the accent. */
.is-style-eyebrow.vhc-eyebrow--dot {
	color: var(--wp--preset--color--midnight);
}

.vhc-eyebrow--dot::before {
	background: var(--wp--preset--color--golden-hour);
	border-radius: 50%;
	content: '';
	display: inline-block;
	height: 7px;
	margin-right: 1.25rem;
	vertical-align: 2px;
	width: 7px;
}

/* Staggered two-line headline (standalone, centered block). */
.vhc-staggered {
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40);
}

.vhc-staggered__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	padding-left: 2.95em;
	text-indent: -2.95em;
}

/* content-box against the global reset, deliberately. The padding here is not
   spacing — it is half of a hanging indent whose other half is the equal and
   opposite text-indent, which pulls the first line back out to the left edge.
   Under border-box that 2.95em (115px at x-large) comes off the line width
   instead of sitting outside it, so the headline silently loses a sixth of its
   measure and rewraps: Santana Row's home title went to three lines from two.
   The authored width is meant to be the width the text gets. */
.vhc-staggered__title,
.vhc-intro-split__title {
	box-sizing: content-box;
}

/* Mixed-weight accent inside light serif headlines. */
.vhc-staggered__title strong,
.vhc-intro-split__title strong {
	font-weight: 400;
}

/* Dot-eyebrow section label at the wide gutter. */
/* BugHerd Riverwalk #55: triple the air above the label — it was reading
   as part of the band it follows rather than opening the next one. */
.vhc-section-label {
	padding: calc(var(--wp--preset--spacing--40) * 3) 0 0;
	padding-left: var(--wp--style--root--padding-left);
}

/* Variant aligned to the content column (e.g. above the image duo). */
.vhc-section-label--content {
	padding-left: max(1.5rem, calc((100vw - 1024px) / 2));
}

/* An eyebrow introducing a wide block (the offers and rooms grids) lines up
   with that block's first column rather than the root gutter. The inner box
   mirrors the .alignwide containment rule so both edges track together at
   every viewport. */
.vhc-section-label:has(+ .alignwide) {
	padding-left: 0;
}

.vhc-section-label:has(+ .alignwide) > p {
	margin-inline: auto;
	max-width: min(var(--wp--style--global--wide-size, 1380px), calc(100% - var(--vhc-band-gutter, 3rem)));
}

/* Same idea, for an eyebrow introducing the restaurant slider's
   wide-aligned-intro variant (Santana Row's Food & Beverage, 2026-09-29):
   that block is align:"full" (its cards need to bleed to the edge and
   peek off it), not .alignwide, so it doesn't match the selector above
   even though its intro column now lines up with .alignwide content —
   see blocks/restaurant-slider/style.scss, .vhc-fnb--wide-intro. */
.vhc-section-label:has(+ .vhc-fnb--wide-intro) {
	padding-left: 0;
}

.vhc-section-label:has(+ .vhc-fnb--wide-intro) > p {
	margin-inline: auto;
	max-width: min(var(--wp--style--global--wide-size, 1380px), calc(100% - var(--vhc-band-gutter, 3rem)));
}

/* ─── Patterns: image duo (Rev2 recurring split) ────────────────────── */
.vhc-duo {
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--60);
}

.vhc-duo__main img {
	aspect-ratio: 499 / 645;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Detail column rides lower than the media, per comp. */
.vhc-duo__detail {
	align-self: flex-start;
	padding-left: clamp(1rem, 8%, 7rem);
	padding-top: clamp(2rem, 17%, 7rem);
}

.vhc-duo__accent {
	margin-bottom: 2.25rem;
}

.vhc-duo__accent img {
	aspect-ratio: 180 / 233;
	object-fit: cover;
}

.vhc-duo__title {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 1rem;
}

.vhc-duo__title strong {
	font-weight: 400;
}

.vhc-duo__copy {
	max-width: 380px;
}

.vhc-duo__copy + .wp-block-buttons {
	margin-top: 1.5rem;
}

/* Reversed variant swaps column order in markup; only the gutter flips. */
.vhc-duo--reversed .vhc-duo__detail {
	padding-left: 0;
	padding-right: clamp(1rem, 8%, 7rem);
}

/* BugHerd #90: the padding-top rides the detail column lower than the
   main image in the desktop side-by-side layout (per comp) — once WP
   core stacks the columns on mobile, the accent image sits directly
   under the main image already, so that same offset just becomes an
   oversized gap between them.

   Riverwalk #97 + #115: the padding-LEFT is the same mistake on the other
   axis, and #90 only caught the vertical one. `clamp(1rem, 8%, 7rem)` steps
   the detail column in from the main image where they sit side by side; once
   stacked, 8% of a 313px column is a 25px inset that pushes the accent
   image, the title, the body copy and the button all to x=65 while the large
   image above them starts at x=40. That is exactly what both tickets
   describe — "align photo and text to larger image", "align image and body
   copy with larger image" — on the home page and on Meetings & Events.

   Zero on both sides, so the --reversed variant (which moves the indent to
   padding-right) lands flush too. Everything in the component now shares the
   large image's left edge. */
@media (max-width: 781px) {
	.vhc-duo__detail,
	.vhc-duo--reversed .vhc-duo__detail {
		padding-left: 0;
		padding-right: 0;
		padding-top: 1.5rem;
	}
}

/* ─── Patterns: experiences hover section ───────────────────────────── */
.vhc-experiences {
	padding: var(--wp--preset--spacing--50) 0;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* ─── Patterns: property slider (Rev2 "Our Hotels") ─────────────────── */
/* The slider spans the full viewport; the wide-wrapper gutter lives as
   Splide track padding (set in carousel/view.js), so passing slides stay
   visible through the left gutter instead of clipping at the wrapper. */
.vhc-slider-section {
	overflow: hidden;
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60);
}

/* The eyebrow lines up with the first slide rather than the root gutter,
   so it carries the same wide-wrapper gutter carousel/view.js hands Splide
   as track padding. The centered variant (Court's IG strip) runs its slides
   flush to the edge, so its kicker stays on the root gutter. */
.vhc-slider-section > .is-style-eyebrow {
	margin-bottom: 2.25rem;
	padding-left: var(--wp--style--root--padding-left);
}

/* BugHerd Riverwalk #46: the Instagram band's kicker took the 1380 grid's
   edge while its own slider track is padded to the root gutter, leaving the
   two 22px apart. The track's padding is deliberate (#118, so passing
   slides stay visible through it), so the kicker comes across to meet it. */
.vhc-igfeed > .is-style-eyebrow,
.vhc-gallery-slider > .is-style-eyebrow {
	padding-left: var(--wp--style--root--padding-left);
}

/* The section label lines up with the page gutter, which is where this
   band's own cards start and where every other section header on the page
   sits (Immersive Experiences, Food & Beverage, Offers & Rewards).

   It used to be max(1.5rem, calc((100vw - 1380px) / 2)) — an offset that
   centres a 1380px column. The cards never used that, so the label drifted
   away from its own slider AND from the other headers, in both directions:

     viewport   label glyph   other headers   cards
     390px          51px          67px         40px
     1100px         51px          82px         55px
     1440px         57px          91px         64px
     1920px        297px          91px         64px

   At 1920 it was 206px right of the other headers and 233px right of the
   cards it labels. The root padding is clamp(2.5rem, 5vw, 4rem), so this
   now tracks all three at every width (Hunter, 2026-09-25). */
.vhc-slider-section:not(.vhc-slider--center):not(.vhc-igfeed):not(.vhc-gallery-slider) > .is-style-eyebrow {
	padding-left: var(--wp--style--root--padding-left);
}

/* No-JS fallback: plain scrollable row, inset to the same gutter — the same
   root padding, so the row and the label above it still agree when the
   carousel never enhances. */
.vhc-slider:not(.is-enhanced) {
	padding-left: var(--wp--style--root--padding-left);
}

.vhc-slider__row {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	overflow-x: auto;
}

.vhc-slider.is-enhanced .splide__slide {
	width: min(316px, 78vw);
}

.vhc-slide {
	padding: 0; /* guard: constrained-layout root padding would inset the card */
	width: min(316px, 78vw);
}

/* Desktop width of the property card. Only this band reads it: every other
   enhanced slider (--fade/--quotes/--wide/--card, .vhc-igfeed,
   .vhc-gallery-slider) is sized by a higher-specificity rule, so this is
   effectively the collection's "Our Hotels" row on /, /about/ and /careers/.

   BugHerd #121 first pulled this down to 220px, because at Meg's own narrow
   ~1100px test window the comp's 316px cards only fit about 3 and she asked
   for "4 full hotels + one tease".

   220px was too narrow for the two longest names. The card names are set at
   0.14em tracking and carry a 21px circle arrow with a 12px gap — 33px of
   inline content that has to sit on the name's last line:

     Hotel Valencia, River Walk    text 218px + arrow 33 = 251px needed
     Hotel Valencia, Santana Row   text 235px + arrow 33 = 268px needed

   So River Walk's name fitted on one line and the arrow alone wrapped
   beneath it, and Santana Row broke mid-name ("... SANTANA / ROW →").
   276px clears the longer of the two with 8px to spare, which costs exactly
   one card at every width (1100: 4+tease -> 3+tease, 1440: 5 -> 4, 1920:
   7 -> 6) — Hunter's call (2026-09-25), taken knowingly against #121. The
   two constraints cannot both hold: four-plus-a-tease at 1100px needs
   <=~240px, and the names need >=268px.

   Do not round this up for more slack. 288px looks free but kills the
   tease at 1280px exactly (4 cards, nothing peeking), so the row reads as
   a finished grid rather than something scrollable — which is the
   affordance #121 was actually about. 276 keeps a peek at every width from
   782 to 1920.

   Mobile is untouched: below 782px the cards stay 78vw-capped, where one
   card at a time means the names have the room already. */
@media (min-width: 782px) {
	.vhc-slider.is-enhanced .splide__slide,
	.vhc-slide {
		width: 276px;
	}
}

.vhc-slide__media img {
	aspect-ratio: 3 / 4;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-slide__name {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 1.125rem 0 0.25rem;
}

.vhc-slide__name a {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.vhc-slide__name a:hover {
	color: var(--wp--preset--color--golden-hour);
}

/* Circle arrow beside the name — supplied brand asset. */
.vhc-slide__name a::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Ccircle opacity='0.75' cx='10.5' cy='10.5' r='10.5' fill='%23B78958'/%3E%3Cpath d='M11.3721 14.5714L15.2832 10.7851L11.3721 7.00002' stroke='%23F6F6F0' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cline x1='15' y1='10.78' x2='5' y2='10.78' stroke='%23F6F6F0'/%3E%3C/svg%3E") center / contain no-repeat;
	content: '';
	display: inline-block;
	height: 21px;
	margin-left: 0.75rem;
	vertical-align: middle;
	width: 21px;
}

.vhc-slide__meta {
	color: var(--wp--preset--color--midnight-tint);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	margin: 0;
}

.vhc-slider__progress {
	background: var(--wp--preset--color--golden-hour-tint);
	height: 1px;
	margin: 5.5rem auto 0;
	overflow: hidden;
	position: relative;
	width: min(316px, 60vw);
}

.vhc-slider__progress span {
	background: var(--wp--preset--color--golden-hour);
	display: block;
	height: 100%;
	transition: transform 0.4s ease;
	width: 12%;
	will-change: transform;
}

/* Draggable pagination bars (Hunter, 2026-09-29): carousel/view.js wraps
   the bar (.vhc-slider__progress / .vhc-wideslider__progress, both only
   1-2px tall and overflow:hidden to clip the moving fill) in this
   unstyled shell before wiring up pointer events on the shell instead.
   The shell carries no overflow of its own, so the ::before below can
   extend 8px above and below the visible line for a comfortable
   click/drag target without clipping — and being position:absolute, it
   adds no height to the shell, so nothing below shifts down. */
.vhc-progress-hit {
	/* Without an explicit width the wrapper defaults to the full block
	   100% (now standing where the 316px-ish bar used to sit), making
	   the whole row draggable instead of just the bar. fit-content
	   would shrink-wrap a fixed- or vw-sized child fine, but
	   .vhc-wideslider__progress's width is min(316px, 60%) — a
	   percentage read against this wrapper's own (indeterminate,
	   fit-content) width is circular and resolves to 0 — so instead
	   each bar's width is mirrored onto its own wrapper explicitly
	   below, via :has(), which keeps both genuinely responsive.
	   margin-inline: auto re-centers the wrapper itself, since the
	   bar's own margin: auto has no spare width to center within once
	   its parent already matches its size. */
	cursor: grab;
	display: block;
	margin-inline: auto;
	position: relative;
}

.vhc-progress-hit:has(.vhc-slider__progress) {
	width: min(316px, 60vw);
}

.vhc-progress-hit:has(.vhc-wideslider__progress) {
	width: min(316px, 60%);
}

.vhc-progress-hit::before {
	bottom: -8px;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: -8px;
}

.vhc-progress-hit.is-scrubbing {
	cursor: grabbing;
}

/* ─── Patterns: cards ───────────────────────────────────────────────── */
.vhc-card-grid,
.vhc-offers {
	padding: var(--wp--preset--spacing--50) 0;
}

.vhc-card__media img,
.vhc-offer__media img {
	display: block;
	width: 100%;
}

.vhc-card__title,
.vhc-offer__title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	letter-spacing: 0.08em;
	margin-top: 1rem;
	text-transform: uppercase;
}

.vhc-card__meta {
	color: var(--wp--preset--color--midnight-tint);
	margin-top: 0.25rem;
}

.vhc-card__link a,
.vhc-offer__link a {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 0.5em;
}

.vhc-card__link a:hover,
.vhc-offer__link a:hover {
	color: var(--wp--preset--color--golden-hour);
}

/* ─── Patterns: editorial split / careers ───────────────────────────── */
.vhc-split,
.vhc-careers {
	margin-bottom: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}

.vhc-split .wp-block-media-text__content,
.vhc-careers .wp-block-media-text__content {
	align-self: center;
	padding: 8%;
}

/* Cap the media column: images placed at natural resolution would set the
   row height (portrait exports are ~1600px tall) and strand the text in
   empty cream. Fixed ratios keep splits at comp proportions. */
.vhc-split .wp-block-media-text__media,
.vhc-careers .wp-block-media-text__media,
.vhc-press__item .wp-block-media-text__media {
	overflow: hidden;
}

.vhc-split .wp-block-media-text__media img,
.vhc-careers .wp-block-media-text__media img,
.vhc-press__item .wp-block-media-text__media img {
	aspect-ratio: 4 / 5;
	height: 100%;
	max-height: min(640px, 80vh);
	object-fit: cover;
	width: 100%;
}

.vhc-careers .wp-block-media-text__media img {
	aspect-ratio: 4 / 3;
}

.vhc-press__item .wp-block-media-text__media img {
	aspect-ratio: 3 / 2;
}

/* ─── Patterns: image row ───────────────────────────────────────────── */
.vhc-image-row {
	margin-bottom: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}

/* Hand-authored gallery markup doesn't receive WP's generated per-instance
   layout CSS, so the flex fallback overflows the viewport. Grid takes over;
   the width override beats the gallery's calc() widths. */
.wp-block-gallery.vhc-image-row {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vhc-image-row figure.wp-block-image {
	margin: 0;
	width: 100% !important;
}

.vhc-image-row img {
	aspect-ratio: 3 / 4;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* ─── Patterns: loyalty band ────────────────────────────────────────── */
.vhc-loyalty em {
	font-style: italic;
}

/* ─── Patterns: careers openings ─────────────────────────────────────── */
.vhc-careers-openings {
	display: flex;
	gap: clamp(2rem, 6vw, 5rem);
	padding: var(--wp--preset--spacing--60) 0;
}

.vhc-careers-openings__label {
	color: var(--wp--preset--color--midnight-tint);
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: 0.03em;
	line-height: 1.5;
	margin: 0;
	max-width: 260px;
	text-transform: uppercase;
}

.vhc-careers-openings__list {
	flex: 1 1 auto;
	list-style: none;
	margin: 0;
	max-width: 620px;
	padding: 0;
}

.vhc-careers-openings__row {
	border-top: 1px solid var(--section-hairline);
}

.vhc-careers-openings__row:last-child {
	border-bottom: 1px solid var(--section-hairline);
}

.vhc-careers-openings__row a {
	align-items: center;
	color: var(--wp--preset--color--midnight);
	display: flex;
	gap: 1rem;
	padding: 1.125rem 0;
	text-decoration: none;
	transition: color 0.2s ease;
}

.vhc-careers-openings__row a:hover {
	color: var(--section-accent);
}

.vhc-careers-openings__name {
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body);
}

.vhc-careers-openings__location {
	color: var(--wp--preset--color--midnight-tint);
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.vhc-careers-openings__arrow {
	flex: 0 0 auto;
}

@media (max-width: 781px) {
	.vhc-careers-openings {
		flex-direction: column;
		gap: 1.5rem;
	}

	.vhc-careers-openings__label,
	.vhc-careers-openings__list {
		max-width: none;
	}

	.vhc-careers-openings__row a {
		flex-wrap: wrap;
	}
}

/* ─── Patterns: FAQ ─────────────────────────────────────────────────── */
.vhc-faq {
	padding: var(--wp--preset--spacing--50) 0;
}

.wp-block-details.is-style-faq {
	border-bottom: 1px solid var(--section-hairline);
	padding: 1.25rem 0;
}

.wp-block-details.is-style-faq summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	list-style: none;
	position: relative;
	padding-right: 2.5rem;
}

.wp-block-details.is-style-faq summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-faq summary::after {
	content: '+';
	color: var(--wp--preset--color--golden-hour);
	font-size: 1.5rem;
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	transition: transform 0.2s ease;
}

.wp-block-details.is-style-faq[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

/* ─── Patterns: contact form placeholder ────────────────────────────── */
/* BugHerd Riverwalk #72 / #60: the comps inset these two pages well
   inside the page's own gutter — roughly 12% a side against our 3%. Both
   carry alignwide's 1380; this brings the content in without touching the
   band's own background. */
.entry-content > .vhc-contact,
.entry-content > .vhc-rfp,
.vhc-band > .vhc-contact,
.vhc-band > .vhc-rfp {
	margin-inline: auto;
	max-width: min(1100px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-contact {
	padding: var(--wp--preset--spacing--50) 0;
}

.vhc-form-placeholder {
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px dashed var(--section-hairline);
	display: flex;
	justify-content: center;
	min-height: 320px;
	padding: 2rem;
}

/* ─── Patterns: press list ──────────────────────────────────────────── */
.vhc-press {
	padding: var(--wp--preset--spacing--50) 0;
}

.vhc-press__item {
	border-bottom: 1px solid var(--section-hairline);
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ─── Patterns: blog grid ───────────────────────────────────────────── */
.vhc-blog-grid {
	padding: var(--wp--preset--spacing--50) 0;
}

.vhc-blog-grid .wp-block-post-title a {
	text-decoration: none;
}

.vhc-blog-grid .wp-block-post-title a:hover {
	color: var(--wp--preset--color--golden-hour);
}

/* ─── Templates: blog index (Rev2 "Noteworthy"), single post, 404 ───── */
.vhc-blog__bar {
	align-items: center;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	margin: 0 auto;
	max-width: calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
	/* Figma (node 2016:2999) puts the featured pair a full ~150px below this
	   row, not the ~64px a single spacing-50 gave — spacing-120 matches it. */
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--120);
}

.vhc-blog__title {
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 400;
	grid-column: 2;
	letter-spacing: 0.13em;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

/* Category dropdown: mimics the booking bar's field style (reserve-panel
   .reserve-field__control/.reserve-dropdown) — underline trigger + chevron,
   floating shadowed popover, instead of its own bordered-pill one-off. */
.vhc-blog__filter {
	grid-column: 3;
	justify-self: end;
	position: relative;
}

.vhc-blog__filter summary {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--golden-hour);
	cursor: pointer;
	display: flex;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	gap: 0.75rem;
	letter-spacing: 0.03em;
	list-style: none;
	padding: 0 0.125rem 0.5rem;
	text-transform: uppercase;
}

.vhc-blog__filter summary::-webkit-details-marker {
	display: none;
}

.vhc-blog__filter summary::after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid var(--wp--preset--color--golden-hour);
	content: '';
	flex: none;
	height: 0;
	width: 0;
}

.vhc-blog__filter ul {
	background: var(--wp--preset--color--white);
	box-shadow: 0 12px 32px rgba(19, 30, 41, 0.16);
	list-style: none;
	margin: 0.375rem 0 0;
	min-width: 100%;
	padding: 0.375rem 0;
	position: absolute;
	right: 0;
	z-index: 20;
}

.vhc-blog__filter li a {
	color: var(--wp--preset--color--midnight);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	padding: 0.5rem 1.25rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* BugHerd #110: "stack it under Noteworthy on mobile" — the 3-col grid
   (1fr auto 1fr) crams the title and filter into the same row with almost
   no room between them once the page's own side padding eats into it.
   Drop to one column so the filter falls to its own centered row below. */
@media (max-width: 600px) {
	.vhc-blog__bar {
		gap: 0.75rem;
		grid-template-columns: 1fr;
	}

	.vhc-blog__title {
		grid-column: 1;
	}

	.vhc-blog__filter {
		grid-column: 1;
		justify-self: center;
	}
}

.vhc-blog__filter li a:hover,
.vhc-blog__filter li a.is-current {
	background: rgba(19, 30, 41, 0.06);
	color: var(--wp--preset--color--golden-hour);
}

/* Featured pair: small card left (offset column), tall card right. */
.vhc-blog__featured {
	display: grid;
	gap: 2rem clamp(2rem, 8vw, 7.75rem);
	grid-template-columns: 420fr 656fr;
	margin: 0 auto;
	max-width: min(1200px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vhc-bcard--featured-large .vhc-bcard__media img {
	aspect-ratio: 656 / 748;
}

.vhc-blog__rule {
	background: none;
	border: 0;
	border-top: 1px solid var(--section-hairline);
	margin: var(--wp--preset--spacing--60) auto var(--wp--preset--spacing--50);
	max-width: calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
}

.vhc-blog__grid {
	display: grid;
	gap: 3.5rem 1.875rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 auto;
	max-width: calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
}

.vhc-bcard__media {
	display: block;
}

/* Riverwalk #139: "image is stretched and looks incorrect". The image is
   fine -- .vhc-bcard--featured-large forces aspect-ratio 656/748 on this
   img, a portrait box, and with no object-fit the initial value `fill`
   applies, so a 1.49 landscape photograph is squeezed into a 0.88 portrait
   frame. Measured on Noteworthy: box 313x357, source 393x264. cover crops it
   instead, which is what every other framed photo on the site does. No-op
   for the cards that have no aspect-ratio, since their box already matches
   the file. */
.vhc-bcard__media img {
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-bcard__category {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 1.5rem 0 0.75rem;
	text-transform: uppercase;
}

.vhc-bcard__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	letter-spacing: 0.03em;
	line-height: 1.25;
	margin: 0 0 1rem;
	max-width: 420px;
}

.vhc-bcard__title a {
	color: var(--wp--preset--color--midnight);
	text-decoration: none;
	transition: color 0.25s ease;
}

.vhc-bcard__title a:hover {
	color: var(--wp--preset--color--golden-hour);
}

.vhc-bcard__excerpt {
	color: var(--wp--preset--color--charcoal);
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0 0 1.5rem;
	max-width: 430px;
}

.vhc-bcard--featured-large .vhc-bcard__excerpt {
	max-width: 654px;
}

.vhc-bcard__link {
	border-bottom: 1px solid var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--golden-hour);
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 300;
	padding-bottom: 0.125rem;
	text-decoration: none;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.vhc-bcard__link:hover {
	border-bottom-color: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--midnight);
}

.vhc-blog__more {
	padding: var(--wp--preset--spacing--60) 1.5rem;
	text-align: center;
}

.vhc-blog__more a {
	border: 1px solid var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--golden-hour);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.vhc-blog__more a:hover {
	background: var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--midnight);
}

.vhc-blog__empty {
	padding: var(--wp--preset--spacing--60) 1.5rem;
	text-align: center;
}

.vhc-post {
	margin: 0 auto;
	max-width: min(1080px, calc(100% - var(--vhc-band-gutter, 3rem)));
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50);
}

.vhc-post__head {
	/* Figma (node 2016:3229) puts the hero photo a full ~93px below the
	   date, not the ~64px a single spacing-50 gave — spacing-60 matches it. */
	margin: 0 auto var(--wp--preset--spacing--60);
	max-width: 640px;
	text-align: center;
}

/* Tracked serif crumb back to the index (H1 token styling). */
.vhc-post__back {
	color: var(--wp--preset--color--midnight);
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.6;
	margin-bottom: var(--wp--preset--spacing--40);
	max-width: 260px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.vhc-post__back:hover {
	color: var(--wp--preset--color--golden-hour);
}

.vhc-post__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.2;
	/* Figma puts the date ~37px below the headline, not the ~20px a flat
	   1.25rem gave — spacing-40 matches it. */
	margin: 0 0 var(--wp--preset--spacing--40);
	text-transform: none;
}

.vhc-post__date {
	color: var(--wp--preset--color--golden-hour);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0;
	text-transform: uppercase;
}

.vhc-post__media {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.vhc-post__media img {
	aspect-ratio: 1080 / 590;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vhc-post__body p {
	color: var(--wp--preset--color--midnight);
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0 0 1.25rem;
}

/* Legacy stories (imported from the old Vizergy blog) carry section
   headings, inline photos and the odd list — give them the card/title
   rhythm rather than browser defaults. */
.vhc-post__body h2,
.vhc-post__body h3,
.vhc-post__body h4,
.vhc-post__body h5,
.vhc-post__body h6 {
	color: var(--wp--preset--color--midnight);
	font-weight: 300;
	letter-spacing: 0.03em;
	line-height: 1.25;
	margin: var(--wp--preset--spacing--40) 0 1rem;
	text-transform: none;
}

.vhc-post__body h2 {
	font-size: var(--wp--preset--font-size--large);
}

.vhc-post__body h3 {
	font-size: var(--wp--preset--font-size--medium);
}

.vhc-post__body h4,
.vhc-post__body h5,
.vhc-post__body h6 {
	font-size: var(--wp--preset--font-size--page-title);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vhc-post__body > :first-child {
	margin-top: 0;
}

.vhc-post__body a {
	color: var(--wp--preset--color--golden-hour);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 0.25s ease;
}

.vhc-post__body a:hover {
	color: var(--wp--preset--color--midnight);
}

.vhc-post__body ul,
.vhc-post__body ol {
	color: var(--wp--preset--color--midnight);
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}

.vhc-post__body li {
	margin: 0 0 0.375rem;
}

.vhc-post__body blockquote {
	border-left: 1px solid var(--wp--preset--color--golden-hour);
	font-style: italic;
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
}

.vhc-post__body .wp-block-image {
	margin: var(--wp--preset--spacing--40) auto;
}

.vhc-post__body .wp-block-image img {
	display: block;
	height: auto;
	width: 100%;
}

.vhc-post__more {
	border-bottom: 1px solid var(--wp--preset--color--golden-hour);
	color: var(--wp--preset--color--golden-hour);
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--page-title);
	font-weight: 300;
	padding-bottom: 0.125rem;
	text-decoration: none;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.vhc-post__more:hover {
	border-bottom-color: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--midnight);
}

.vhc-404 {
	margin: 0 auto;
	max-width: 720px;
	padding: var(--wp--preset--spacing--120) 1.5rem;
	text-align: center;
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.overlay-nav__body {
		grid-template-columns: 1fr;
	}

	.overlay-nav__media {
		display: none;
	}

	/* BugHerd Riverwalk #80 / #82, to the Nav – Mobile comp: the flyout's
	   bar carries the close and nothing else. RESERVE is already the
	   full-width bar along the bottom, and the wordmark is redundant over
	   the menu. With both gone the close is the only child left, so it has
	   to be pinned to the third column or the grid would slide it left. */
	.overlay-nav__reserve,
	.overlay-nav__brand {
		display: none;
	}

	.overlay-nav__close {
		grid-column: 3;
		justify-self: end;
	}

	/* BugHerd #82: secondary links wrapped into a space-between flex row on
	   mobile (same treatment as desktop) instead of stacking one per line;
	   social icons also tightened up a little. Riverwalk #80 tightens the
	   stack to the comp, where the rows sit on their line height. */
	.overlay-nav__secondary ul {
		flex-direction: column;
		gap: 0;
	}

	.overlay-nav__social {
		gap: 1rem;
	}

	/* BugHerd Riverwalk #92: the icons carry width/height="15" as attributes,
	   which is legible on a desktop pointer and small on a phone. Sized in
	   CSS here so the attributes stay as the fallback. */
	.overlay-nav__social a svg {
		height: 20px;
		width: 20px;
	}

	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__col--nav {
		grid-column: 1 / -1;
		text-align: left;
	}
}

@media (max-width: 600px) {
	.site-brand,
	.site-header__brand a {
		font-size: 0.9375rem;
		letter-spacing: 0.22em;
	}

	/* ── Footer, phones: Rev3 "Component 14" (4037:15207) ──
	   One centred column: seal crest over a hairline, then the serif
	   primary nav, the sans secondary links, socials, the outlined
	   Manage Reservations + phone, a left-aligned newsletter row, and
	   the legal stack. The desktop DOM keeps the primary nav + legal
	   inside one right-hand column; display: contents on that column
	   lets its two children take their own places in this order. */
	.site-footer__masthead {
		align-items: center;
		flex-direction: column;
		padding: 2.625rem 1.5rem 2.5rem;
	}

	.site-footer__wordmark,
	.site-footer__monogram {
		display: none;
	}

	.site-footer__seal {
		color: var(--wp--preset--color--golden-hour);
		display: block;
	}

	.site-footer__seal svg {
		display: block;
		height: auto;
		width: 178px;
	}

	.site-footer__inner {
		display: flex;
		flex-direction: column;
		gap: 2.25rem;
		padding: 2.5rem 1.5rem 3rem;
		text-align: center;
	}

	/* display: contents removes the column's box but not its place in
	   the inheritance chain — the 781px rule above still sets text-align:
	   left on it, so the two children re-centre themselves. */
	.site-footer__col--nav {
		display: contents;
	}

	.site-footer__primary-nav,
	.site-footer__legal {
		text-align: center;
	}

	.site-footer__primary-nav {
		order: 1;
	}

	.site-footer__col--links {
		order: 2;
	}

	.site-footer__col--newsletter {
		order: 3;
	}

	.site-footer__legal {
		order: 4;
	}

	.site-footer__primary-nav li {
		margin-bottom: 0;
	}

	.site-footer__primary-nav a {
		font-size: 1rem;
		line-height: 1.5;
	}

	.site-footer__secondary-nav li {
		margin-bottom: 0;
	}

	.site-footer__secondary-nav a {
		font-size: 0.9375rem;
		letter-spacing: 0.03em;
		line-height: 1.6667;
	}

	.site-footer__social {
		justify-content: center;
		margin-top: 1.5rem;
	}

	.site-footer__manage {
		font-size: 0.6875rem;
		font-weight: 400;
		margin-top: 1.75rem;
		padding: 0.8125rem 1.5rem;
	}

	.site-footer__phone {
		font-size: 0.6875rem;
		letter-spacing: 0.14em;
		margin-top: 1rem;
	}

	/* Newsletter (comp nodes 4037:15200-15204): the block itself is
	   centred at the comp's width — 10% inset either side, ~320px on a
	   400px screen — but everything inside it stays left-aligned: label
	   flush left, the underlined field stretching from the left edge to
	   the SUBMIT pinned at the right. Same for the Gravity Forms markup,
	   whose form is the flex row and whose body carries a fixed 220px
	   basis on desktop that has to give way here. */
	.site-footer__col--newsletter {
		margin: 0 auto;
		max-width: 320px;
		text-align: left;
		width: 100%;
	}

	.valencia-newsletter {
		text-align: left;
	}

	.site-footer__label {
		font-size: 0.6875rem;
		font-weight: 400;
		margin-bottom: 0.75rem;
	}

	.site-footer__newsletter-placeholder,
	.valencia-newsletter form {
		gap: 1.5rem;
		justify-content: space-between;
	}

	.site-footer__newsletter-field {
		flex: 1 1 auto;
		font-size: 0.8125rem;
		max-width: none;
		padding-bottom: 0.375rem;
	}

	.valencia-newsletter .gform_body {
		flex: 1 1 auto !important;
	}

	.site-footer__newsletter-submit {
		font-size: 0.6875rem;
		font-weight: 400;
		padding-bottom: 0.375rem;
	}

	/* Legal: links first, colophon under them (DOM has the colophon
	   first for the desktop stack). */
	.site-footer__legal {
		display: flex;
		flex-direction: column;
		margin-top: 0.75rem;
	}

	.site-footer__legal-nav {
		order: 1;
	}

	.site-footer__colophon {
		margin: 0.1875rem 0 0;
		order: 2;
	}


	.site-footer__legal-nav li {
		margin-bottom: 0.1875rem;
	}
}

@media (max-width: 900px) {
	.vhc-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Riverwalk #137: "increase distance between sections." Stacked, the
	   two cards sat 32px apart — the base rule's row gap, written for a
	   two-column row where it is a gutter rather than a separator. 3.5rem
	   matches the rooms and offers grids on the same breakpoint. */
	.vhc-blog__featured {
		grid-template-columns: 1fr;
		row-gap: 3.5rem;
	}
}

@media (max-width: 600px) {
	.vhc-blog__grid {
		grid-template-columns: 1fr;
	}
}

/* ─── Scroll-scale hero ──────────────────────────────────────────────────
   The homepage opener: a scattered field of photos and a headline over
   the Pearl ground, all faded in on load; one photo (the "seed") is
   clipped to a small tile and scales up to a full-bleed hero as the
   visitor scrolls. Base rules below are the complete, correct layout
   with no motion at all — everything fully visible at rest — so a
   browser without support (or a reduced-motion visitor) gets the same
   collage, just static, and the section is normal-height so scrolling
   isn't stuck in a dead zone waiting for an animation that will never
   run. */
.vhc-scrollhero {
	background: var(--wp--preset--color--pearl);
	min-height: 100vh;
	position: relative;
}

.vhc-scrollhero__stage {
	min-height: 100vh;
	position: relative;
}

.vhc-scrollhero__scatter {
	inset: 0;
	position: absolute;
}

.vhc-scrollhero__piece {
	display: block;
	position: absolute;
}

.vhc-scrollhero__piece img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.vhc-scrollhero__copy {
	color: var(--wp--preset--color--midnight);
	left: 50%;
	max-width: 480px;
	position: absolute;
	text-align: center;
	top: 46%;
	transform: translate(-50%, -50%);
	width: calc(100% - var(--vhc-band-gutter, 3rem));
	/* Explicit, rather than relying on DOM order (copy happens to precede
	   the seed in markup) — stays above the growing photo throughout,
	   not just while the photo is still small enough not to reach it. */
	z-index: 3;
}

/* "Every / Place / is a / Story" — each line offset off-center by its
   own --line-offset (set per instance in PHP), matching the Figma
   lockup's stepped, not-quite-centered stagger. */
/* BugHerd #77: sized down from the original clamp(1.75rem, 4vw, 3.125rem). */
.vhc-scrollhero__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3.4vw, 2.75rem);
	letter-spacing: 0.22em;
	line-height: 1.4;
	margin: 0;
	text-transform: uppercase;
}

.vhc-scrollhero__line {
	display: block;
	transform: translateX(var(--line-offset, 0%));
}

/* The seed: a small, actually-sized tile at rest (not a full-viewport
   element hidden behind a mask) — this is the fallback state, not a
   "before JS runs" flash. Its box comes from --seed-scale/-bottom/
   -center (unitless numbers set in PHP): --seed-scale sets BOTH the
   width (as vw) and the height (as vh), so the tile is always exactly
   the visitor's own screen shape, never a hand-picked aspect ratio that
   only matched by coincidence. vw/vh throughout, never %, so this never
   depends on the stage actually measuring 100vw/100vh either.

   The image inside is a plain object-fit: cover at 100%/100% of THIS
   box — not oversized — so whatever crop is visible at rest is exactly
   the crop still visible once the tile has scaled up to fill the
   screen. The earlier build instead kept the seed at full viewport size
   and grew a clip-path window onto it, which meant scaling only changed
   how much of an already-fixed crop was revealed — subjects could end
   up sliced by wherever that window's edges happened to fall. Scaling
   the tile itself has no such surprise: the composition you see in the
   small tile *is* the composition you get full-bleed, just larger. */
.vhc-scrollhero__seed {
	bottom: calc(var(--seed-bottom) * 1vh);
	height: calc(var(--seed-scale) * 1vh);
	left: calc((100vw - var(--seed-scale) * 1vw) / 2 + var(--seed-center) * 1vw);
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: calc(var(--seed-scale) * 1vw);
}

/* .vhc-scrollhero__seed-stack (the media layers inside this box) is
   styled by the valencia/scrollhero-seed block's own style.scss — it
   owns everything inside the box; this file owns the box itself and
   the rest of the scroll-hero system around it. */

/* The wordmark lockup belongs to the seed's full-bleed end state (Figma's
   "Banner" frame, a *different* frame from the scatter/headline one) —
   pinned to the bottom of the photo once it fills the screen, not part
   of the small-tile collage. It has no fallback state: without the
   scroll-driven enhancement below the seed never actually reaches
   full-bleed at all, so there's no photo bottom for it to sit on —
   opacity stays 0 permanently outside the enhanced path (the static
   collage's own headline already carries the branding moment there). */
.vhc-scrollhero__lockup {
	bottom: clamp(1.5rem, 4vh, 3rem);
	left: 50%;
	opacity: 0;
	position: absolute;
	transform: translateX(-50%);
	width: min(93vw, 1339px);
}

.vhc-scrollhero__lockup-tagline {
	color: var(--wp--preset--color--pearl);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.7;
	margin: 0 0 1.25rem;
	text-align: right;
	text-transform: uppercase;
}

.vhc-scrollhero__lockup-wordmark {
	display: block;
	width: 100%;
}

/* Entrance: the scattered photos and headline fade + rise in once, on
   load, on the ordinary document timeline — never gated on scroll
   position, so they're already fully visible at rest by the time
   anyone scrolls. Scrolling's only job is the exit half below and the
   seed's scale-open; it never controls whether these are visible in
   the first place. */
@media (prefers-reduced-motion: no-preference) {
	/* On .vhc-scrollhero__piece img, not the piece span itself — the
	   span carries its OWN opacity animation (the scroll-driven exit,
	   below), and two animations on one element that both touch opacity
	   don't blend: per spec the later one in the list wins outright, so
	   the exit animation's own opacity:1 "before scrolling" state would
	   silently discard this fade's opacity entirely (only its transform
	   would ever have shown — exactly the "clunky" half-working entrance
	   a first pass shipped). Putting the fade on the img child instead
	   sidesteps that: opacity composes fine ACROSS a parent and a child,
	   just not twice on the same element. This is the same reason
	   .vhc-scrollhero__copy's exit and .vhc-scrollhero__line's entrance
	   already lived on two different elements and never had the bug. */
	.vhc-scrollhero__piece img,
	.vhc-scrollhero__line {
		/* A longer, gentler decelerate than a first pass tried — that one
		   used cubic-bezier(0.16,1,0.3,1), which peaks its speed almost
		   immediately and reads as a sequence of small pops rather than
		   a settle. This curve (a common "expo-out") accelerates more
		   gradually into the same long soft tail. */
		animation-name: vhc-scrollhero-reveal;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
		animation-fill-mode: both;
		animation-delay: var(--reveal-delay, 0s);
	}

	/* Photos fade in slower than the headline — asked for explicitly, and
	   it also widens the gap between the two reveal beats a bit further.
	   BugHerd #77: both bumped further still (was 1.8s / 1.1s) for a
	   moodier, slower initial load. */
	.vhc-scrollhero__piece img {
		animation-duration: 2.4s;
	}

	.vhc-scrollhero__line {
		animation-duration: 1.5s;
	}

	/* The seed photo is the last thing to arrive — it used to be the one
	   element already sitting there at full opacity while everything
	   else faded in around it, which read as a glitch rather than a
	   sequence. Its own keyframe (opacity only, no translateY) because
	   the seed figure is overflow: hidden, so a rising img would flash
	   a strip of pearl along the tile's top edge; and on the img, not
	   the figure, because the figure's transform is owned by the
	   scroll-driven grow animation (two animations on one element that
	   both touch transform don't blend — see the piece/img note above).
	   Delay lands after the last headline line so the tile starts fading
	   in once every other beat is already under way. BugHerd #77: delay
	   pushed out further still (was 0.8s) for more of a pause before it
	   arrives. */
	.vhc-scrollhero__seed-stack {
		animation: vhc-scrollhero-seed-reveal 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: 1.3s;
	}

	/* Set on the piece span, not the img — --reveal-delay inherits down
	   to the img just fine, and this is where --piece-range-start/-end
	   already live for the same instance. */
	/* Photos settle first, the headline after — a deliberate two-beat
	   sequence rather than nine elements arriving in one overlapping
	   cluster. */
	.vhc-scrollhero__piece:nth-child(1) { --reveal-delay: 0s; }
	.vhc-scrollhero__piece:nth-child(2) { --reveal-delay: 0.08s; }
	.vhc-scrollhero__piece:nth-child(3) { --reveal-delay: 0.16s; }
	.vhc-scrollhero__piece:nth-child(4) { --reveal-delay: 0.24s; }
	.vhc-scrollhero__piece:nth-child(5) { --reveal-delay: 0.32s; }

	.vhc-scrollhero__line:nth-child(1) { --reveal-delay: 0.4s; }
	.vhc-scrollhero__line:nth-child(2) { --reveal-delay: 0.48s; }
	.vhc-scrollhero__line:nth-child(3) { --reveal-delay: 0.56s; }
	.vhc-scrollhero__line:nth-child(4) { --reveal-delay: 0.64s; }
}

@keyframes vhc-scrollhero-reveal {
	from {
		opacity: 0;
		transform: translateX(var(--line-offset, 0%)) translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateX(var(--line-offset, 0%)) translateY(0);
	}
}

@keyframes vhc-scrollhero-seed-reveal {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* The loading screen (template-parts/loading-screen.php) covers the page
   for its own ~2.5-4s timed sequence on a visitor's first load each
   session — several times longer than the entrance above. Without this,
   the reveal runs its full course hidden behind that overlay, and the
   pieces/headline simply *appear* already-settled the instant the
   overlay clears, instead of visibly fading in — indistinguishable from
   "no animation at all" to the visitor who actually sees it. Paused
   here, resumed the moment the loading script removes the class (no
   further coordination needed — everything else about the entrance
   stays exactly as authored, just starting later on visits where the
   overlay actually shows). */
html.has-loading-screen .vhc-scrollhero__piece img,
html.has-loading-screen .vhc-scrollhero__seed-stack,
html.has-loading-screen .vhc-scrollhero__line {
	animation-play-state: paused;
}

/* Enhancement: pin the stage and scrub the seed's grow-and-recenter
   transform via a named view-timeline on the tall outer wrapper — the
   same animation-timeline: view() mechanism as the Court homepage
   collage windows, extended to a *named* timeline because the animated
   elements sit inside a position: sticky child, whose own view()
   timeline would never progress (a stuck element's box stops moving
   through the viewport). The named timeline is declared on the un-stuck
   outer wrapper instead, so its scroll progress is what drives the
   animation.

   The five scattered photos each scrub their own slice of that same
   timeline (--piece-range-start/-end, set per instance in PHP) through
   a plain fade-out — the fade-*in* is the load-time entrance above, not
   this timeline, so each piece's exit is layered on top of it as a
   second, independent animation. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.vhc-scrollhero {
			height: 300vh;
			view-timeline-axis: block;
			view-timeline-name: --vhc-scrollhero;
		}

		.vhc-scrollhero__stage {
			height: 100vh;
			overflow: clip;
			position: sticky;
			top: 0;
		}

		/* animation-range starts at 24%, not 0%, to clear the ~22-23% of
		   the named timeline that's unreachable at real scroll — see the
		   long comment on the per-piece ranges in
		   valencia_scroll_hero_content() for why a hero flush with the
		   document's top edge has this dead zone at all. Measured stable
		   across viewport heights 700-1200px. Without this floor the
		   exit animations below would already be partway faded at rest
		   instead of starting fully visible. */
		.vhc-scrollhero__seed {
			animation: vhc-scrollhero-seed-grow linear both;
			animation-range: 24% 68%;
			animation-timeline: --vhc-scrollhero;
		}

		/* The scroll-driven exit only — the load-time reveal lives on the
		   img child instead (see the comment above), so this is a plain
		   single animation with no comma-list to keep in sync. */
		.vhc-scrollhero__piece {
			animation: vhc-scrollhero-piece-out linear both;
			animation-range: var(--piece-range-start) var(--piece-range-end);
			animation-timeline: --vhc-scrollhero;
		}

		/* Fades out the instant the seed starts growing (same 24% start
		   the seed's own animation-range uses below), not after it
		   finishes — per Hunter's ask. This reopens a gap between the
		   headline's exit (~36%) and the wordmark lockup's entrance
		   (68%-80%) where neither is on screen over the scaling photo;
		   flagged rather than also moving the lockup, since that's a
		   separate call. */
		.vhc-scrollhero__copy {
			animation: vhc-scrollhero-fade linear both;
			animation-range: 24% 36%;
			animation-timeline: --vhc-scrollhero;
		}

		/* Same range the header (further down) fades in on — 68% is the
		   seed's own grow animation finishing, so the lockup arrives
		   pinned to the bottom of the photo right as it reaches
		   full-bleed. Unlike the header this runs on mobile too: the
		   seed scales to fill the screen there as well, just without
		   the scattered pieces. Reuses vhc-scrollhero-header-in (opacity
		   0→1, visibility flipped early rather than late — see that
		   keyframe's own comment) even though nothing here is
		   interactive; no reason to duplicate an identical keyframe. */
		.vhc-scrollhero__lockup {
			animation: vhc-scrollhero-header-in linear both;
			animation-range: 68% 80%;
			animation-timeline: --vhc-scrollhero;
		}
	}
}

/* Desktop: the header bar (announcement banner included — it lives
   inside .site-header) starts hidden and fades in over the photo on the
   same 68%-80% slice the wordmark lockup arrives on, i.e. once the seed
   has finished scaling to full-bleed. Re-instated 2026-09-15 per
   Hunter's ask (BugHerd #35 had reversed an earlier version of this on
   2026-09-08). timeline-scope on body hoists the hero's named timeline
   up to where the fixed header, a sibling subtree, can reference it.
   The header's reserved body padding-top is left alone: the hero's
   ground is the same pearl as the bar, so the strip it leaves at the
   top is invisible, and the sticky stage pins to the viewport's top
   edge regardless. Mobile keeps the bar visible throughout — the
   scattered collage isn't there, so there's no composition for the
   bar to intrude on. */
@media (prefers-reduced-motion: no-preference) and (min-width: 782px) {
	@supports (animation-timeline: view()) {
		body.has-scrollhero {
			timeline-scope: --vhc-scrollhero;
		}

		body.has-scrollhero .site-header {
			animation: vhc-scrollhero-header-in linear both;
			animation-range: 68% 80%;
			animation-timeline: --vhc-scrollhero;
		}
	}
}

/* The header brand holds off longer still: it stays hidden until the
   hero's own wordmark lockup (pinned to the bottom of the full-bleed
   photo) has scrolled up past the bar, so the two logos are never on
   screen together. nav.js watches .vhc-scrollhero__lockup with an
   IntersectionObserver and toggles .is-past-hero on the header once it
   clears — the same class + transition the wordmark-hero pages already
   use for their brand, kept as a time-based transition rather than a
   scroll-scrubbed one because the lockup leaves the screen over a
   handful of pixels of scroll, far too short a span to scrub a fade
   over. Desktop only, matching the bar above; without the observer
   nav.js adds the class outright, so nothing stays hidden for good. */
@media (min-width: 782px) {
	body.has-scrollhero .site-header:not(.is-past-hero) .site-header__brand {
		opacity: 0;
		transform: translateY(0.375rem);
		transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s 0.35s;
		visibility: hidden;
	}

	body.has-scrollhero .site-header.is-past-hero .site-header__brand {
		opacity: 1;
		transform: none;
		transition: opacity 0.35s ease, transform 0.35s ease;
		visibility: visible;
	}
}

/* visibility flips at 1%, not in the from/to pair with opacity — a
   discrete property animated across a full from→to range holds its
   start value for the entire range and only snaps to the end value at
   the very last instant, which would keep the header un-hittable (and
   invisible regardless of opacity) for practically this whole fade
   instead of just its first sliver. Flipping it almost immediately
   instead means the header is hit-testable/in the a11y tree for
   virtually the entire animation, while opacity still does the actual
   smooth fade from 0 to 1. */
@keyframes vhc-scrollhero-header-in {
	from {
		opacity: 0;
		visibility: hidden;
	}

	1% {
		visibility: visible;
	}

	to {
		opacity: 1;
	}
}

/* Grows the tile itself to full-bleed, rather than opening a mask onto a
   fixed-size image. transform-origin is the box's own center (the
   default), so scaling alone would grow it symmetrically around wherever
   it happens to sit — since the tile starts bottom-anchored and
   (usually) horizontally centered, not viewport-centered, a translate is
   layered into the same "to" state to walk its center over to the
   viewport's center exactly as it reaches full size. Both derive from
   the same --seed-scale/-bottom/-center the box itself uses, so a tile
   positioned anywhere still ends up exactly filling the screen:
     scale  = 100 / --seed-scale                     (grows it to 100vw/100vh)
     transX = --seed-center * -1vw                    (undoes any center offset)
     transY = (--seed-scale / 2 + --seed-bottom - 50) * 1vh
              (walks the tile's center from wherever the bottom-anchor put
              it to the viewport's vertical middle) */
@keyframes vhc-scrollhero-seed-grow {
	from {
		transform: translate(0, 0) scale(1);
	}

	to {
		transform:
			translate(
				calc(var(--seed-center) * -1vw),
				calc((var(--seed-scale) / 2 + var(--seed-bottom) - 50) * 1vh)
			)
			scale(calc(100 / var(--seed-scale)));
	}
}

/* The scroll-driven half of a piece's life: fully visible to gone, over
   whichever slice of the timeline this instance was given. */
@keyframes vhc-scrollhero-piece-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes vhc-scrollhero-fade {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		visibility: hidden;
	}
}

@media (max-width: 781px) {
	/* Phones get the scattered photos too (they used to be display: none
	   here — Hunter, 2026-09-15). The desktop positions are inline on
	   each piece, baked into the homepage's post content from the
	   1440×806 Figma frame, and at 390px wide those %-widths come out
	   at ~70px with three photos stacked into the top row — so each
	   piece is re-placed here for a portrait stage instead, keeping
	   the same corner-to-corner scatter: two up top, one mid-right,
	   two flanking the bottom-anchored seed tile. !important is the
	   only way past the inline styles without re-seeding every
	   environment's database; widths are sized so nothing crosses the
	   headline (centred at 46%) or the 46vw seed. Order matches the
	   scatter array in valencia_scroll_hero_content(). */
	.vhc-scrollhero__piece:nth-child(1) { top: 4% !important; left: 6% !important; width: 30% !important; }
	.vhc-scrollhero__piece:nth-child(2) { top: 3% !important; left: 56% !important; width: 32% !important; }
	.vhc-scrollhero__piece:nth-child(3) { top: 20% !important; left: 72% !important; width: 24% !important; }
	.vhc-scrollhero__piece:nth-child(4) { top: 58% !important; left: 73% !important; width: 26% !important; }
	.vhc-scrollhero__piece:nth-child(5) { top: 64% !important; left: 2% !important; width: 24% !important; }

	.vhc-scrollhero__copy {
		max-width: calc(100% - var(--vhc-band-gutter, 3rem));
	}

	/* A bigger scale, not a different shape — --seed-scale still drives
	   both axes identically, so the tile stays locked to the phone's own
	   screen shape instead of the fixed letterbox this used to hardcode
	   (which didn't track any screen's actual proportions). */
	.vhc-scrollhero__seed {
		--seed-scale: 46;
	}

	/* BugHerd #81: stacked logo only on mobile, no tagline above it. */
	.vhc-scrollhero__lockup-tagline {
		display: none;
	}
}

/* ─── Story timeline (About opener) ─────────────────────────────────────
   Rev3 About (Figma 2019-6096 → 4020-6625; inspiration michaelgatt.com/
   about): nine slides of copy + scattered vintage photos on a pinned
   midnight stage, scrubbed by scroll, with a three-chapter rail at the
   right edge. Markup from valencia_story_timeline_content().

   Same philosophy as the scroll-scale hero above: the base rules here are
   the complete static layout — nine ordinary stacked full-height slides,
   everything visible, no rail — so no-JS and reduced-motion visitors get
   the whole story as a plain page. assets/js/story-timeline.js adds
   .is-enhanced and then feeds each slide two numbers (--t: offset from
   centered in slides, --vis: 0..1 visibility) plus --stag (1 while
   arriving); everything under .is-enhanced below is pure CSS math on
   those, so the motion tunes here, not in the script. */
.vhc-timeline {
	/* Scroll distance per slide-to-slide transition (the enhanced wrapper's
	   height derives from it; the script derives the same per-slide step
	   from the wrapper's measured height, so this is the one knob). */
	--story-step: 130vh;
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--pearl);
	position: relative;
}

.vhc-timeline__stage {
	position: relative;
}

.vhc-timeline__slide {
	min-height: 100vh;
	overflow: hidden;
	position: relative;
}

.vhc-timeline__photos {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* Desktop positions come from the 1440×1024 Figma frame (--x/--y/--w);
   the --m* set is the hand-placed phone layout (no phone comp exists),
   both inline per photo so neither needs !important overrides. */
.vhc-timeline__photo {
	left: var(--x);
	margin: 0;
	position: absolute;
	top: var(--y);
	transform: rotate(var(--tilt, 0deg));
	width: var(--w);
}

/* Decorative line-art (Figma Rev3, #134 follow-up) — a rotated illustration
   blended into the scene, not a framed photo: no object-fit:cover crop (the
   whole drawing has to stay visible), mix-blend-multiply so it reads as ink
   on the navy ground rather than a pasted rectangle, and it never intercepts
   the pointer since it sits over live copy/links on some slides. */
.vhc-timeline__deco {
	left: var(--x);
	margin: 0;
	mix-blend-mode: multiply;
	pointer-events: none;
	position: absolute;
	top: var(--y);
	transform: rotate(var(--tilt, 0deg));
	width: var(--w);
}

.vhc-timeline__deco img {
	display: block;
	height: auto;
	width: 100%;
}

.vhc-timeline__photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Copy sits a touch below center (the frames all land it around 52%),
   over the photos — Figma deliberately lets it cross their edges. */
.vhc-timeline__copy {
	left: 50%;
	max-width: var(--copy-width, 600px);
	position: absolute;
	text-align: center;
	top: 52%;
	transform: translate(-50%, -50%);
	width: calc(100% - var(--vhc-band-gutter, 3rem));
	z-index: 2;
}

/* Figma "H2": Ortica Linear Light 39/47. Color set here, not just on the
   wrapper — the theme's paragraph rules are more specific than .vhc-timeline
   and would otherwise paint the copy midnight-on-midnight. */
.vhc-timeline__text,
.vhc-timeline__extra {
	color: var(--wp--preset--color--pearl);
}

.vhc-timeline__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 2.7vw, 2.4375rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0;
}

/* Figma "Body 1": Ortica Linear Light 23/30, for the two long slides. */
.vhc-timeline__slide--serif-sm .vhc-timeline__text {
	font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
	line-height: 1.3;
}

/* Figma "H1": Ortica Linear Regular 19/30, tracked and uppercase — the
   intro lockup, the two all-caps slides, and the "rest is history" line. */
.vhc-timeline__slide--caps .vhc-timeline__text,
.vhc-timeline__slide--intro .vhc-timeline__text,
.vhc-timeline__extra {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.58;
	text-transform: uppercase;
}

.vhc-timeline__extra {
	margin: 2.25rem auto 0;
	max-width: 600px;
}

/* The golden script line ("A coveted collection of soulful hotels") laid
   across the lower right of the intro lockup, per the frame. */
.vhc-timeline__script {
	left: 46.6%;
	position: absolute;
	top: 53%;
	transform: rotate(6.4deg);
	width: 19.5%;
	z-index: 3;
}

.vhc-timeline__script img {
	display: block;
	width: 100%;
}

/* Chapter rail: 220px hairline at the right edge, three 13px stops 60px
   apart, labels to the left of their stop, centered vertically in the
   viewport (the frames draw it higher, but Hunter wants it centered).
   Static layout has no notion of a "current" chapter, so it only shows
   once enhanced. */
.vhc-timeline__rail {
	display: none;
	height: 220px;
	position: absolute;
	right: clamp(1.5rem, 3.2vw, 46px);
	top: 50%;
	transform: translateY(-50%);
	width: 13px;
	z-index: 4;
}

.vhc-timeline__rail::before {
	background: rgba(246, 246, 240, 0.45);
	bottom: 0;
	content: '';
	left: 6px;
	position: absolute;
	top: 0;
	width: 1px;
}

.vhc-timeline__rail-item {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	color: var(--wp--preset--color--pearl);
	cursor: pointer;
	display: flex;
	gap: 1.3rem;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	white-space: nowrap;
}

.vhc-timeline__rail-item:nth-child(1) { top: 33.5px; }
.vhc-timeline__rail-item:nth-child(2) { top: 93.5px; }
.vhc-timeline__rail-item:nth-child(3) { top: 153.5px; }

.vhc-timeline__rail-item:focus-visible {
	outline: 1px solid var(--wp--preset--color--pearl);
	outline-offset: 4px;
}

.vhc-timeline__rail-dot {
	background: var(--wp--preset--color--midnight);
	border: 1px solid var(--wp--preset--color--pearl);
	border-radius: 50%;
	box-sizing: border-box;
	display: block;
	flex: none;
	height: 13px;
	transition: background-color 0.35s ease;
	width: 13px;
}

.vhc-timeline__rail-item.is-current .vhc-timeline__rail-dot {
	background: var(--wp--preset--color--pearl);
}

/* Labels: the current chapter at full strength, chapters already read at
   25%, chapters still ahead not shown at all — exactly the three states
   the frames step through. */
.vhc-timeline__rail-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	letter-spacing: 0.15em;
	line-height: 1;
	opacity: 0;
	text-transform: uppercase;
	transition: opacity 0.45s ease;
}

.vhc-timeline__rail-item.is-past .vhc-timeline__rail-label {
	opacity: 0.25;
}

.vhc-timeline__rail-item.is-current .vhc-timeline__rail-label {
	opacity: 1;
}

/* The statement slide's copy is the page h1 — reset whatever heading
   styling the global stylesheet brings so it sets exactly like the other
   serif slides. */
.vhc-timeline h1.vhc-timeline__text {
	font-size: clamp(1.75rem, 2.7vw, 2.4375rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0;
	text-transform: none;
}

/* ── Enhanced: pinned + scrubbed ── */
/* count-1 slide transitions plus --story-grow more steps for the last
   photo's scale-up, then the sticky stage's own 100vh. */
.vhc-timeline.is-enhanced {
	height: calc((var(--story-slides, 9) - 1 + var(--story-grow, 1)) * var(--story-step) + 100vh);
}

.vhc-timeline.is-enhanced .vhc-timeline__stage {
	height: 100vh;
	overflow: clip;
	position: sticky;
	top: 0;
}

.vhc-timeline.is-enhanced .vhc-timeline__rail {
	display: block;
}

/* Every slide stacks in the stage; each drifts up a little across its
   own window so leaving copy slides out over arriving copy rather than
   just dissolving in place. */
.vhc-timeline.is-enhanced .vhc-timeline__slide {
	inset: 0;
	min-height: 0;
	pointer-events: none;
	position: absolute;
	/* No drift on the slide itself (an earlier pass slid it 6vh across
	   its window) — the copy holds its spot and only comes into focus;
	   the photos carry their own --drift. */
}

/* The copy's own motion is GSAP's (blocks/story-timeline/view.js): each
   copy block fades in and out whole (opacity + a soft blur), scrubbed off
   the same --t. No per-word or per-letter spans any more (Hunter,
   2026-09-17) — nothing here but a hint for the compositor. */
.vhc-timeline__text,
.vhc-timeline__extra {
	will-change: opacity, filter;
}

/* The script line is an image, so it fades with the slide; the extra
   caps line is copy — GSAP fades its letters, no second opacity here. */
.vhc-timeline.is-enhanced .vhc-timeline__script img {
	opacity: var(--vis, 1);
}

/* Photos ride --t at their own --drift (set per photo in PHP) — a
   different distance for each so the scatter has depth as it moves, and
   Lenis's easing on the underlying scroll is what makes it feel like
   momentum rather than a linked slide. */
.vhc-timeline.is-enhanced .vhc-timeline__photo {
	/* --pvis, not --vis: the script holds the photos back until the copy
	   has fully sharpened, then fades them in (text first, per Hunter). */
	opacity: var(--pvis, var(--vis, 1));
	transform: translateY(calc(var(--t, 0) * var(--drift, -12vh))) rotate(var(--tilt, 0deg));
}

/* The hero end state: over the last --story-grow step the final slide's
   photo walks its center onto the stage's center (--grow-x/-y) while
   scaling to cover it (--grow-scale) — the same translate-then-scale
   the homepage seed uses, so the composition in the small tile is
   exactly the composition full-bleed. The script measures the three
   numbers; --grow (0→1) scrubs them. The slide itself is held at --t 0
   for the whole step so nothing else drifts, and a midnight dim eases
   in over the photo as it fills, matching the statement hero's overlay
   so the h1 stays legible. The photo outgrows its box, which is why the
   stage clips overflow. */
.vhc-timeline.is-enhanced .vhc-timeline__slide--final .vhc-timeline__photo {
	transform:
		translate(
			calc(var(--grow, 0) * var(--grow-x, 0px)),
			calc(var(--grow, 0) * var(--grow-y, 0px))
		)
		scale(calc(1 + var(--grow, 0) * (var(--grow-scale, 1) - 1)));
	transform-origin: center;
}

.vhc-timeline.is-enhanced .vhc-timeline__slide--final .vhc-timeline__photo::after {
	background: var(--wp--preset--color--midnight);
	content: '';
	inset: 0;
	opacity: calc(var(--grow, 0) * 0.3);
	position: absolute;
}

/* Entrance: the intro lockup simply fades in on load, then the script
   line arrives — the ordinary document timeline, never gated on scroll
   (the slide is already fully "visible" at rest). Opacity on the copy
   block and the script *wrapper*, never on the elements GSAP scrubs
   (two animations touching the same property on one element don't
   blend — see the scroll-hero note above). The old per-word rise stagger
   is gone: it read as the headline shifting around on load (Hunter,
   2026-09-17) — nothing moves now, it only resolves. Paused while the
   loading screen is up so it isn't spent behind the overlay, same as the
   homepage hero. */
@media (prefers-reduced-motion: no-preference) {
	.vhc-timeline__slide--intro .vhc-timeline__copy {
		animation: vhc-timeline-fade 2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
	}

	.vhc-timeline__script {
		animation: vhc-timeline-fade 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
	}

	html.has-loading-screen .vhc-timeline__slide--intro .vhc-timeline__copy,
	html.has-loading-screen .vhc-timeline__script {
		animation-play-state: paused;
	}
}

@keyframes vhc-timeline-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (max-width: 781px) {
	.vhc-timeline__photo {
		left: var(--mx, var(--x));
		top: var(--my, var(--y));
		width: var(--mw, var(--w));
	}

	.vhc-timeline__copy {
		top: 50%;
	}

	.vhc-timeline__text {
		font-size: 1.5rem;
	}

	.vhc-timeline__slide--serif-sm .vhc-timeline__text {
		font-size: 1.0625rem;
	}

	.vhc-timeline__slide--caps .vhc-timeline__text,
	.vhc-timeline__slide--intro .vhc-timeline__text,
	.vhc-timeline__extra {
		font-size: 0.9375rem;
	}

	.vhc-timeline__script {
		left: 24%;
		top: 54%;
		width: 54%;
	}

	.vhc-timeline__rail {
		right: 1rem;
	}

	.vhc-timeline__rail-label {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   Block-vocabulary dress — the pattern library composes every section
   from core blocks (inc/block-primitives.php), so figures replace bare
   <img>s, button blocks replace .vhc-hbtn / .vhc-btn-box anchors, pager
   buttons and progress bars are injected by carousel/view.js, and the
   comp geometry that used to ride inline styles lives here in numbered
   slot classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Buttons ─────────────────────────────────────────────────────────── */
/* Hotel underline CTA (the .vhc-hbtn dress) as a button block style. */
.wp-block-button.is-style-hbtn > .wp-block-button__link {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--section-accent);
	border-radius: 0;
	color: var(--section-accent);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	padding: 0 0 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.wp-block-button.is-style-hbtn > .wp-block-button__link:hover {
	color: var(--wp--preset--color--midnight);
}

/* Light keyline box on the sky ground. */
.wp-block-button.is-style-box-light > .wp-block-button__link {
	background: none;
	border: 1px solid var(--wp--preset--color--pearl);
	border-radius: 0;
	color: var(--wp--preset--color--pearl);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	padding: 0.5rem 1.375rem;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.wp-block-button.is-style-box-light > .wp-block-button__link:hover {
	background: var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--midnight);
}

/* Buttons rows nested in converted sections carry no inherited gap. */
:where(.vhc-rooms__ctas, .vhc-dinev__detail, .vhc-localx__item, .vhc-excard, .vhc-event, .vhc-venues__detail, .vhc-feature__copy) > .wp-block-buttons {
	margin: 0;
}

.vhc-rooms__ctas .wp-block-buttons {
	align-items: center;
	gap: 1.75rem;
}

.vhc-rooms__ctas .is-style-hbtn > .wp-block-button__link {
	padding-bottom: 0.375rem;
}

.wp-block-buttons.vhc-wellx__cta {
	margin-top: 2.5rem;
}

.wp-block-buttons.vhc-contact__links {
	display: flex;
	gap: 2.5rem;
}

.wp-block-buttons.vhc-venue__actions {
	margin-top: 1.5rem;
}

/* The comp's inquire keyline is a touch wider than the box style. */
.vhc-venue__actions .wp-block-button.is-style-box .wp-block-button__link {
	padding: 0.4375rem 1.75rem;
}

/* ─── Sliders ─────────────────────────────────────────────────────────── */
/* Fading / one-up / card sliders show one slide at a time; the generic
   enhanced-slide width above (.vhc-slider.is-enhanced .splide__slide)
   must not apply to them. */
.vhc-slider--fade.is-enhanced .splide__slide,
.vhc-slider--quotes.is-enhanced .splide__slide,
.vhc-slider--wide.is-enhanced .splide__slide,
.vhc-slider--card.is-enhanced .splide__slide {
	width: 100%;
}

.vhc-slider--fade .vhc-slider__row,
.vhc-slider--quotes .vhc-slider__row {
	flex-direction: column;
	gap: 3rem;
	overflow: visible;
}

.vhc-slider--fade .vhc-slider__row > *,
.vhc-slider--quotes .vhc-slider__row > *,
.vhc-slider--wide .vhc-slider__row > *,
.vhc-slider--card .vhc-slider__row > * {
	flex: 0 0 100%;
	margin: 0;
}

.vhc-slider--card:not(.is-enhanced),
.vhc-slider--fade:not(.is-enhanced),
.vhc-slider--quotes:not(.is-enhanced),
.vhc-slider--wide:not(.is-enhanced) {
	padding-left: 0;
}

.vhc-wideslider .vhc-slider__row > .wp-block-image img,
.vhc-cgrid-card__slider .vhc-slider__row > .wp-block-image img {
	width: 100%;
}

/* ─── Scroll-scale hero ────────────────────────────────────────────────── */
/* Slot geometry, lifted from the Figma frame (node 2032:8231): top %,
   left %, width %, aspect, and each piece's slice of the shared timeline
   (staggered 3% apart, floored at 24% — see the animation-range note on
   .vhc-scrollhero__seed). */
.vhc-scrollhero__piece { margin: 0; }
.vhc-scrollhero__piece--1 { aspect-ratio: 267 / 322; left: 14.79%; top: 5.46%; width: 18.54%; --piece-range-start: 24%; --piece-range-end: 50%; }
.vhc-scrollhero__piece--2 { aspect-ratio: 279 / 224; left: 50%; top: 12.03%; width: 19.38%; --piece-range-start: 27%; --piece-range-end: 53%; }
.vhc-scrollhero__piece--3 { aspect-ratio: 267 / 321; left: 75.83%; top: 0; width: 18.54%; --piece-range-start: 30%; --piece-range-end: 56%; }
.vhc-scrollhero__piece--4 { aspect-ratio: 267 / 320; left: 75.83%; top: 56.58%; width: 18.54%; --piece-range-start: 33%; --piece-range-end: 59%; }
.vhc-scrollhero__piece--5 { aspect-ratio: 279 / 224; left: 4.17%; top: 62.9%; width: 19.38%; --piece-range-start: 36%; --piece-range-end: 62%; }

/* The seed's mask rect (428×238 at 506,568 in the frame) ≈ 30% of the
   viewport on both axes, bottom-flush and centered. */
.vhc-scrollhero__seed {
	--seed-scale: 30;
	--seed-bottom: 0;
	--seed-center: 0;
}

/* Headline lines are paragraph blocks (one per line, under a
   screen-reader h1) so each keeps its own stepped offset. */
.vhc-scrollhero__line {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3.4vw, 2.75rem);
	letter-spacing: 0.22em;
	line-height: 1.4;
	margin: 0;
	text-transform: uppercase;
}

.vhc-scrollhero__line--1 { --line-offset: 4.8%; }
.vhc-scrollhero__line--2 { --line-offset: 30%; }
.vhc-scrollhero__line--3 { --line-offset: 10.7%; }
.vhc-scrollhero__line--4 { --line-offset: -8.2%; }

.vhc-scrollhero__lockup-wordmark {
	margin: 0;
}

.vhc-scrollhero__lockup-wordmark img {
	display: block;
	height: auto;
	width: 100%;
}

/* ─── Story timeline ───────────────────────────────────────────────────── */
/* Copy widths and photo geometry per slide (Figma 1440×1024 frame:
   --x/--y/--w, aspect, --drift, --tilt; the --m* set is the hand-placed
   phone layout). Slides are numbered in order, photos within a slide. */
.vhc-timeline__chapters { display: none; }

.vhc-timeline__slide--n1 { --copy-width: 200px; }
.vhc-timeline__slide--n2 { --copy-width: 480px; }
.vhc-timeline__slide--n3 { --copy-width: 510px; }
.vhc-timeline__slide--n4 { --copy-width: 600px; }
.vhc-timeline__slide--n5 { --copy-width: 330px; }
.vhc-timeline__slide--n6 { --copy-width: 600px; }
.vhc-timeline__slide--n7 { --copy-width: 640px; }
.vhc-timeline__slide--n8 { --copy-width: 270px; }
.vhc-timeline__slide--n9 { --copy-width: 610px; }

.vhc-timeline__slide--n2 .vhc-timeline__photo--1 { --x: 51.9%; --y: 56.3%; --w: 15.7%; aspect-ratio: 392 / 592; --drift: -14vh; --tilt: 0deg; --mx: 54%; --my: 58%; --mw: 34%; }
/* BugHerd #134 follow-up (Figma Rev3, node 2019:6271): story-bench.jpg — the
   old photo--1 — is the couple-on-a-bench photo with the long-flagged
   Pinterest-watermark chips baked into it (2026-09-25). The comp doesn't
   replace it with another photo at all; it drops a rotated tree illustration
   in behind the other two instead, which is a --deco (mix-blend, no card),
   not a --photo slot. Civvies/car renumber down to fill 1/2 — carrying their
   #211 mobile-overlap overrides below along with them (renamed, not just
   left pointing at the old numbers) so those fixes aren't silently lost. */
.vhc-timeline__slide--n3 .vhc-timeline__deco--1 { --x: 9.76%; --y: 27.78%; --w: 26.81%; aspect-ratio: 386 / 563; --tilt: 90deg; }
.vhc-timeline__slide--n3 .vhc-timeline__photo--1 { --x: 63.7%; --y: 33.3%; --w: 18.3%; aspect-ratio: 758 / 874; --drift: -18vh; --tilt: 0deg; --mx: 54%; --my: 20%; --mw: 34%; }
.vhc-timeline__slide--n3 .vhc-timeline__photo--2 { --x: 25.1%; --y: 66%; --w: 11.9%; aspect-ratio: 715 / 1000; --drift: -24vh; --tilt: 13.8deg; --mx: 12%; --my: 70%; --mw: 26%; }
.vhc-timeline__slide--n4 .vhc-timeline__photo--1 { --x: 21.5%; --y: 30.4%; --w: 14.7%; aspect-ratio: 762 / 1000; --drift: -12vh; --tilt: 0deg; --mx: 6%; --my: 16%; --mw: 30%; }
/* photo--2 was story-stack.jpg (stock-agency watermark, also flagged
   2026-09-25) — replaced with the comp's own clean stacked-photos graphic,
   at its own position/shape (a wider, lower box than the old one). */
.vhc-timeline__slide--n4 .vhc-timeline__photo--2 { --x: 49.58%; --y: 55.57%; --w: 40.69%; aspect-ratio: 586 / 391; --drift: -20vh; --tilt: 0deg; --mx: 54%; --my: 66%; --mw: 40%; }
.vhc-timeline__slide--n4 .vhc-timeline__deco--1 { --x: 10.42%; --y: 52.73%; --w: 39.375%; aspect-ratio: 567 / 389; --tilt: 0deg; }
.vhc-timeline__slide--n5 .vhc-timeline__photo--1 { --x: 56.7%; --y: 25.4%; --w: 15%; aspect-ratio: 667 / 1000; --drift: -16vh; --tilt: 0deg; --mx: 58%; --my: 12%; --mw: 30%; }
.vhc-timeline__slide--n5 .vhc-timeline__photo--2 { --x: 63.4%; --y: 43.8%; --w: 19.2%; aspect-ratio: 508 / 424; --drift: -8vh; --tilt: 0deg; --mx: 46%; --my: 70%; --mw: 42%; }
.vhc-timeline__slide--n6 .vhc-timeline__photo--1 { --x: 16.7%; --y: 50.6%; --w: 23.1%; aspect-ratio: 480 / 574; --drift: -14vh; --tilt: 0deg; --mx: 6%; --my: 64%; --mw: 38%; }
/* photo--1/2 were story-postcard.jpg / story-collage.jpg — generic stock,
   one of them another of the 2026-09-25 watermark flags. Figma Rev3 (node
   4020:6508) replaces this whole collage with real Cavalry/Caravan Court
   photography; kept these two slots' own position/width, updated to the
   new images' own (portrait) aspect ratio. photo--3 (story-corridor.jpg)
   already matched the comp closely enough to leave alone. */
.vhc-timeline__slide--n7 .vhc-timeline__photo--1 { --x: 66%; --y: 27.2%; --w: 19.2%; aspect-ratio: 2732 / 4096; --drift: -18vh; --tilt: 0deg; --mx: 46%; --my: 12%; --mw: 42%; }
.vhc-timeline__slide--n7 .vhc-timeline__photo--2 { --x: 14.3%; --y: 44.7%; --w: 20.2%; aspect-ratio: 2731 / 4096; --drift: -10vh; --tilt: 0deg; --mx: 4%; --my: 62%; --mw: 36%; }
.vhc-timeline__slide--n7 .vhc-timeline__photo--3 { --x: 62.5%; --y: 78.5%; --w: 17.9%; aspect-ratio: 800 / 1000; --drift: -26vh; --tilt: 0deg; --mx: 62%; --my: 74%; --mw: 30%; }
.vhc-timeline__slide--n9 .vhc-timeline__photo--1 { --x: 23.5%; --y: 56.6%; --w: 52.9%; aspect-ratio: 1920 / 1090; --drift: -10vh; --tilt: 0deg; --mx: 6%; --my: 60%; --mw: 80%; }

.vhc-timeline__script {
	margin: 0;
}

/* ─── Collection grid ─────────────────────────────────────────────────── */
.vhc-cgrid__maplist ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ─── Converted figures (were bare <img>s) ─────────────────────────────── */
.vhc-story__cutout,
.vhc-story__crest,
.vhc-dine__cutout,
.vhc-feature-scroller .vhc-feature__media {
	margin: 0;
}

.vhc-story__cutout img,
.vhc-story__crest img,
.vhc-dine__cutout img,
.vhc-dinev__cutout img {
	display: block;
	height: auto;
	width: 100%;
}

/* ─── Testimonial quote block ──────────────────────────────────────────── */
.vhc-quote__text p {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	margin: 0;
}

.vhc-quote__text cite {
	color: #717b85;
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--subhead);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.4;
	margin: 2rem 0 2.25rem;
	text-transform: uppercase;
}

/* ─── Planner band download links: the outbound icon ──────────────────── */
.vhc-skyband__links a::after {
	background: currentColor;
	content: '';
	flex: none;
	height: 14px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Cline x1='0.35' y1='14.65' x2='11.35' y2='3.65' stroke='%23000'/%3E%3Cpath d='M3.71 3.89h7.78l-.71 7.07' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Cline x1='0.35' y1='14.65' x2='11.35' y2='3.65' stroke='%23000'/%3E%3Cpath d='M3.71 3.89h7.78l-.71 7.07' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
	width: 14px;
}

/* ─── Venue grid specs (list block) ────────────────────────────────────── */
ul.vhc-venue__specs {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

ul.vhc-venue__specs li {
	border-top: 1px solid var(--wp--preset--color--midnight-tint);
	color: #717b85;
	letter-spacing: 0.02em;
	line-height: 1.375;
	margin: 0;
	padding: 0.75rem 0 0.875rem;
}

ul.vhc-venue__specs li strong {
	color: var(--wp--preset--color--midnight);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0 0 0.375rem;
	text-transform: uppercase;
}

/* ─── Careers openings rows (were one link each) ───────────────────────── */
.vhc-careers-openings__row {
	align-items: center;
	color: var(--wp--preset--color--midnight);
	display: flex;
	gap: 1rem;
	padding: 1.125rem 0;
	transition: color 0.2s ease;
}

.vhc-careers-openings__row:hover {
	color: var(--section-accent);
}

.vhc-careers-openings__row a {
	color: inherit;
	padding: 0;
	text-decoration: none;
}

.vhc-careers-openings__row::after {
	content: '\2192';
	flex: 0 0 auto;
}

.vhc-careers-openings__name,
.vhc-careers-openings__location {
	margin: 0;
}

/* ─── Press award rows: the outbound arrow ─────────────────────────────── */
.vhc-award__link {
	margin-bottom: 0;
	position: relative;
}

.vhc-award__link::after {
	background: currentColor;
	content: '';
	display: block;
	height: 15px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.6668 15' fill='none'%3E%3Cline x1='0.353553' y1='14.6464' x2='11.3536' y2='3.64645' stroke='%23000'/%3E%3Cpath d='M3.70669 3.88909H11.4849L10.7778 10.9602' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.6668 15' fill='none'%3E%3Cline x1='0.353553' y1='14.6464' x2='11.3536' y2='3.64645' stroke='%23000'/%3E%3Cpath d='M3.70669 3.88909H11.4849L10.7778 10.9602' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
	width: 15px;
}

.vhc-award__link a {
	color: inherit;
	inset: 0;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	white-space: nowrap;
}

/* Rows with nothing to link to keep the arrow's box (so every citation
   column ends on the same line) but don't draw it — the comp's arrow on
   every row read as clickable, and on the legacy site only three awards
   ever linked out. */
.vhc-award__link--static {
	visibility: hidden;
}

.vhc-award__link:has(a):hover {
	color: var(--wp--preset--color--golden-hour);
}

.vhc-venues__detail .wp-block-buttons {
	margin-top: 1rem;
}

.vhc-venues__chart,
.vhc-venues__spec-value a {
	color: var(--section-accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin-left: 1.5rem;
	text-decoration: underline;
	text-transform: uppercase;
}

/* ─── Flow-gap corrections ─────────────────────────────────────────────
   Every converted container is a flow-layout group, so the theme's
   blockGap (1.25rem) lands on children that used to sit in raw markup
   with no gap. Zero it where the old spacing came from the children's
   own rules, and restore the default margins the old markup relied on. */
.vhc-timeline__slide,
.vhc-timeline__photos,
.vhc-timeline__copy,
.vhc-scrollhero__scatter,
.vhc-scrollhero__copy,
.vhc-scrollhero__lockup,
.vhc-careers-openings__row,
.vhc-feature-scroller__trigger,
.vhc-wideslider__arrow,
.vhc-cgrid__views {
	margin: 0;
}

.vhc-rooms__detail > .vhc-rooms__ctas,
.vhc-rooms__layout > .vhc-rooms__media,
.vhc-venues__specs > .vhc-venues__spec,
.vhc-venue > .vhc-venue__details,
.vhc-venues__items > .vhc-venue,
.vhc-award > .vhc-award__property {
	margin-top: 0;
}

/* Review slider: the citation's bottom margin used to sit inside the
   slide; carry that distance on the arrows mount instead. */
.vhc-quote__text cite {
	margin-bottom: 0;
}

.vhc-quote__body > .vhc-rooms__arrows {
	margin-top: 2.25rem;
}

.vhc-cgrid__views > * {
	margin: 0;
}

/* The bar's eyebrow kept its default paragraph margins in the old markup. */
.vhc-cgrid__bar > .is-style-eyebrow {
	margin: 1em 0;
}

/* Core image blocks inside one-at-a-time sliders carry no bottom margin. */
:where(.vhc-slider--card, .vhc-slider--wide, .vhc-slider--fade, .vhc-slider--quotes) .wp-block-image {
	margin: 0;
}

/* Splide's own children (arrows container, track, pagination) and the
   injected pager controls are siblings inside flow groups — never gapped. */
.vhc-slider.is-enhanced > *,
.vhc-pager > *,
.cc-pager > * {
	margin: 0;
}

/* Feature panel CTA sits centered in its column, as the inline-block
   button did in the old markup. */
.vhc-feature__copy .wp-block-buttons {
	justify-content: center;
}

/* Sky band CTA: the old inline-block anchor sat one line-strut below the
   lead's margin; the buttons block collapses its margin with the lead's,
   so carry the whole distance here. */
.vhc-skyband__row .wp-block-column > .wp-block-buttons {
	margin-top: 3.25rem;
}

/* The converted CTAs inherited the body line-height as anchors. */
.wp-block-button.is-style-hbtn > .wp-block-button__link,
.wp-block-button.is-style-box-light > .wp-block-button__link {
	line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════════
   Valencia Development — the corporate site (ValenciaDevelopment_Design_Rev1,
   2026-09-19). site_variant = development: the collection theme's
   machinery in the espresso palette — merlot bands, terra-cotta type, a
   paper-grain ground — with the corporate sections from
   inc/development-patterns.php (.vd-*). Palette slots through Settings →
   Valencia: brand_accent (terra-cotta → golden-hour), brand_background
   (pearl-dark → pearl), brand_band (merlot) / brand_on_band (pearl-tint).
   The script word in headlines is Millionaire (Altiplano, licensed —
   client deliverable); Instrument Serif Italic stands in via
   --vhc-dev-font-script. ═════════════════════════════════════════════ */
@font-face {
	font-family: 'Instrument Serif';
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url('assets/fonts/instrument-serif/instrument-serif-400-italic.woff2') format('woff2');
}

body.is-brand-development {
	--vd-merlot: #221106;
	--vd-terra: #98320d;
	--vd-tint: #da8c70;
	--vd-orange: #c05131;
	--vd-ground: #efe8da;
	--vd-pearl: #efede5;
	--vd-pearl-tint: #f6f6f0;
	/* BugHerd #21: the height every track-record band is held to, the room
	   .vd-stats keeps below the last one so it can pin, and the distance the
	   following section is pulled up to cover it. One number, because if the
	   three ever disagree the stack shows a strip of the wrong colour. */
	--vd-stat-band: 520px;
	/* Same reasoning as --vd-stat-band, for the Hotel Development slides
	   (BugHerd #41) — the tallest natural height across the three, so the
	   pinned band under a shorter one never shows a strip of the last
	   colour. All three measure identically (902.9px at the row's 1320px
	   cap, image-aspect-ratio driven, so it holds from ~1368px up and only
	   shrinks below that) — 940 gives it the same kind of headroom
	   --vd-stat-band has over its own measured max. */
	--vd-feature-band: 940px;
	--vhc-dev-font-script: 'Instrument Serif', Georgia, serif;
	--section-accent: var(--vd-terra);
	--section-hairline: var(--vd-terra);
	background-blend-mode: multiply;
	background-image: url('assets/images/skeleton/vd-texture.jpg');
	background-position: center top;
	background-repeat: repeat;
	background-size: 1000px auto;
	color: var(--wp--preset--color--midnight);
}

.loading-screen--development {
	/* The collection's monogram on the Development palette's ground. */
	background: var(--vd-merlot, #221106);
	color: var(--vd-pearl-tint, #f6f6f0);
}

/* ─── Chrome: header bar, overlay, INQUIRE ──────────────────────────── */
body.is-brand-development .site-header {
	background: var(--vd-merlot);
	box-shadow: none;
}

body.is-brand-development.has-immersive-hero .site-header:not(.is-past-hero) {
	background: transparent;
	box-shadow: none;
}

body.is-brand-development.has-immersive-hero .site-header.is-past-hero {
	background: var(--vd-merlot);
}

body.is-brand-development .site-brand--logo,
body.is-brand-development .site-header__toggle,
body.is-brand-development.has-immersive-hero .site-header:not(.is-past-hero) .site-brand,
body.is-brand-development.has-immersive-hero .site-header:not(.is-past-hero) .site-header__toggle {
	color: var(--vd-pearl-tint);
}

/* BugHerd #9: the header carries the VALENCIA DEVELOPMENT wordmark, not the
   sun mark — the sun stays in the footer. Measured off Meg's comp: the
   wordmark is 565x28 in a 2130px-wide capture of her 1317px viewport, so
   349 x 17.3 CSS px.

   Setting --brand-mark-h rather than a bare `height` is the whole fix. The
   base rule derives the WIDTH from it (--brand-mark-w * --brand-mark-h / 22),
   so a hard height left the box 599px wide with a 399px mark floating in the
   middle of it — fine for the near-square sun this rule was written for,
   wrong for a 20:1 wordmark. 17.5px gives 349px, the comp's width. */
body.is-brand-development .site-brand--logo::before {
	/* 17.5px is the comp's size and derives 349px of width — but 349px is
	   derived, not declared, so it did not shrink with the viewport and
	   the wordmark was simply cut off below 390px: "VALENCIA DEVELOPMEN"
	   at 320, with the menu toggle pushed to 338-382 and off the screen
	   entirely. Nothing scrolled, because the header clips, so a
	   scrollWidth check reported the page as fine.

	   The clamp scales the mark only in the band where 349px does not
	   fit. 3.3vw reaches the 17.5px cap at a 530px viewport, so every
	   width the comp was drawn for is untouched; below that it tracks
	   down to 10.5px, which is 210px of wordmark at 320 and leaves the
	   toggle its corner.

	   This is the only property affected — the others carry a logo mark
	   rather than a 20:1 wordmark, and measure 197-274px at 320. */
	--brand-mark-h: clamp(10.5px, 3.3vw, 17.5px);
}

body.is-brand-development .site-header__reserve,
body.is-brand-development .site-header.is-past-hero .site-header__reserve,
body.is-brand-development:not(.has-immersive-hero) .site-header__reserve {
	background: transparent;
	color: var(--vd-terra);
	font-size: 0.8125rem;
	letter-spacing: 0.15em;
}

body.is-brand-development .site-header__reserve:hover {
	background: transparent;
	color: var(--vd-tint);
}

body.is-brand-development .overlay-nav {
	background: var(--vd-ground);
}

body.is-brand-development .overlay-nav__bar {
	background: var(--vd-merlot);
}

body.is-brand-development .overlay-nav__reserve {
	background: transparent;
	color: var(--vd-terra);
}

body.is-brand-development .overlay-nav__close,
body.is-brand-development .overlay-nav__brand {
	color: var(--vd-pearl-tint);
}

.site-brand--wordline {
	color: inherit;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-decoration: none;
	text-transform: uppercase;
}

body.is-brand-development .overlay-nav__primary a {
	color: var(--vd-terra);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.is-brand-development .overlay-nav__manage,
body.is-brand-development .overlay-nav__social {
	display: none;
}

body.is-brand-development .overlay-nav__secondary a {
	color: var(--vd-merlot);
}

/* ─── Type roles ────────────────────────────────────────────────────── */
/* H2: Ortica Light 35 caps, 0.04em, the <em> word in the script face at
   32 — the comp's every section headline. */
.vd-statement__head,
.vd-centered__head,
.vd-news__head,
.vd-duo__head,
.vd-links__head {
	color: var(--vd-terra);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.625rem, 2.4vw, 2.1875rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.3;
	margin: 0;
	text-transform: uppercase;
}

.vd-statement__head em,
.vd-centered__head em,
.vd-news__head em,
.vd-duo__head em,
.vd-script__line {
	font-family: var(--vhc-dev-font-script);
	font-size: 0.94em;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: capitalize;
}

/* The script line keeps the comp's own casing ("From award-winning New
   Hotels to Wholly Reimagined Properties"). */
.vd-script__line {
	text-transform: none;
}

/* Body 1: Ortica Light 20 / 27. */
.vd-statement__copy,
.vd-centered__copy,
.vd-stat__copy,
.vd-acc__copy {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.35;
}

/* Body 2 / Subhead 2: Ortica Regular 14 / 20. */
.vd-feature__copy,
.vd-duo__copy,
.vd-values__copy,
.vd-team__bio,
.vd-collage__sub,
.vd-strip__city,
.vd-news__feed .wp-block-latest-posts__post-excerpt {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	line-height: 1.43;
}

/* H1 kicker: Ortica Regular 19 caps 0.13em (eyebrows here carry no dot). */
/* Figma 12080:1834 sets every section kicker as Outfit Medium 12 / 18 at
   1.68px tracking. This rule used to override the face, the size and the
   tracking to Ortica Linear 19px, which is what shipped on every page.

   The base `.is-style-eyebrow` is already the body face at
   --wp--preset--font-size--small (0.75rem = 12px) with 0.14em tracking —
   0.14em of 12px IS 1.68px — so the fix is to stop overriding it and let the
   base through. Only the colour and the Medium weight are this brand's.

   Worth knowing: `.vd-team > .is-style-eyebrow` has carried exactly this
   treatment all along and never once applied, because this selector is
   (0,2,1) and that one is (0,2,0). The intent was in the stylesheet; the
   specificity buried it. */
body.is-brand-development .is-style-eyebrow {
	color: var(--vd-terra);
	font-weight: 500;
}

body.is-brand-development .is-style-eyebrow.vhc-eyebrow--dot {
	color: var(--vd-terra);
}

body.is-brand-development .vhc-eyebrow--dot::before {
	display: none;
}

/* Arrow link: Outfit Medium 12 caps 0.14em + the comp's arrow. */
.wp-block-button.is-style-arrow .wp-block-button__link {
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--vd-terra, var(--section-accent));
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	padding: 0;
	text-transform: uppercase;
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: ' \2192';
	display: inline-block;
	margin-left: 0.5rem;
	transition: transform 0.25s ease;
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* Arrow links stay terra on the merlot band too (Development BugHerd #5 —
   the comp's "Partner with us" is orange on the dark band). */
body.is-brand-development .vd-band--merlot .wp-block-button.is-style-arrow .wp-block-button__link {
	color: var(--vd-terra);
}

/* ─── Bands ─────────────────────────────────────────────────────────── */
.vd-band--merlot {
	--section-accent: var(--vd-pearl-tint);
	--section-hairline: rgba(246, 246, 240, 0.35);
	background: var(--vd-merlot);
	color: var(--vd-pearl-tint);
}

.vd-band--merlot .is-style-eyebrow,
.vd-band--merlot .vd-statement__head,
.vd-band--merlot .vd-statement__copy,
.vd-band--merlot .vd-feature__kicker,
.vd-band--merlot .vd-feature__copy,
.vd-band--merlot .vd-values__title,
.vd-band--merlot .vd-values__copy,
.vd-band--merlot .vd-acc__copy {
	color: var(--vd-pearl-tint);
}

/* Kickers and accordion titles are terra on merlot; the band's eyebrow
   ("Hospitality Management Services") is pearl per the comp (Development
   BugHerd #4). */
.vd-band--merlot .vd-feature__kicker,
.vd-band--merlot .vd-acc__title {
	color: var(--vd-terra);
}

body.is-brand-development .vd-band--merlot .is-style-eyebrow {
	color: var(--vd-pearl-tint);
}

/* BugHerd #29/#41/#46 (Meg): the botanical pattern — a citrus branch tiled
   across three merlot bands (the Collection intro, the Services "Hotel
   Development" split and the Culture values band). Source is Meg's own
   Figma vector (node 10060:11584), exported flat; it ships filled with
   #221106, the same hex as --vd-merlot, so on the band it would be
   invisible — recoloured to #1a0e06 in the file, matching the tone already
   measured off her comp screenshot (~6% darker than the ground). Scaled to
   roughly half its native export size so the fruit spacing reads close to
   that comp; a scale call, easy to revisit once she's seen it live.
   Excludes vd-statement--open (home) and Careers' vd-feature "perks" band,
   which share these components but were not asked for. */
.vd-band--merlot.vd-statement:not(.vd-statement--open),
.vd-feature--pattern,
.vd-values {
	background-image: url('assets/images/brands/development/pattern-botanical.svg');
	background-position: center;
	background-repeat: repeat;
	background-size: 960px auto;
}

/* ─── Hero ──────────────────────────────────────────────────────────── */
.vd-hero {
	margin: 0;
}

.vd-hero .wp-block-cover__inner-container {
	display: none;
}

/* ─── Statement ─────────────────────────────────────────────────────── */
.vd-statement {
	padding: var(--wp--preset--spacing--60) 0;
}

.vd-statement__row {
	gap: 3rem;
	margin: 0 auto;
	max-width: min(1320px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vd-statement__head {
	max-width: 598px;
}

.vd-statement__body {
	padding-top: 4rem;
}

.vd-statement__copy {
	margin: 0 0 1.5rem;
	max-width: 540px;
}

/* A statement the next merlot section continues (the home's collage). */
.vd-statement--open {
	padding-bottom: 0;
}

/* The Services statement reads in terra (Development BugHerd #3). */
.vd-statement--terra .vd-statement__copy {
	color: var(--vd-terra);
}

/* ─── Script line ───────────────────────────────────────────────────── */
.vd-script {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
}

.vd-script__line {
	color: var(--vd-terra);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	line-height: 1.3;
	margin: 0 auto;
	max-width: 740px;
}

/* ─── Collage row ───────────────────────────────────────────────────── */
.vd-collage {
	overflow: hidden;
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60);
}

.vd-collage__row {
	align-items: flex-start;
	display: flex;
	gap: 2.3vw;
	justify-content: center;
	margin: 0 auto;
}

.vd-collage__photo {
	flex: none;
	margin: 0;
}

.vd-collage__photo img {
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vd-collage__photo--edge {
	margin-top: 7.1vw;
	width: 10.9vw;
}

.vd-collage__photo--edge img {
	aspect-ratio: 157 / 280;
}

.vd-collage__photo--tall {
	margin-top: 1.9vw;
	width: 22.4vw;
}

.vd-collage__photo--tall img {
	aspect-ratio: 323 / 430;
}

.vd-collage__photo--centre {
	width: 26.7vw;
}

.vd-collage__photo--centre img {
	aspect-ratio: 385 / 484;
}

.vd-collage__photo--wide {
	margin-top: 7.1vw;
	width: 22.4vw;
}

.vd-collage__photo--wide img {
	aspect-ratio: 323 / 280;
}

.vd-collage__photo--edge-r {
	margin-top: 1.9vw;
	width: 8vw;
}

.vd-collage__photo--edge-r img {
	aspect-ratio: 116 / 430;
}

.vd-collage__caption {
	margin: 1.25rem auto 0;
	max-width: min(1320px, calc(100% - var(--vhc-band-gutter, 3rem)));
	padding-left: calc(50% - 13.35vw);
}

.vd-collage__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0;
	text-transform: uppercase;
}

.vd-collage__label a {
	color: inherit;
	text-decoration: none;
}

.vd-collage__label a::after {
	content: ' \2192';
	margin-left: 0.4rem;
}

.vd-collage__sub {
	color: var(--vd-terra);
	margin: 0.25rem 0 0;
}

.vd-band--merlot .vd-collage__sub {
	color: var(--vd-tint);
}

/* ─── Photo pair ────────────────────────────────────────────────────── */
.vd-pair {
	display: grid;
	gap: 0 7.8vw;
	grid-template-columns: 57.2vw 25vw;
	padding: 0 0 var(--wp--preset--spacing--60);
}

.vd-pair__a,
.vd-pair__b {
	margin: 0;
}

.vd-pair__a img {
	aspect-ratio: 823 / 800;
	display: block;
	object-fit: cover;
	width: 100%;
}

.vd-pair__b {
	align-self: center;
}

.vd-pair__b img {
	aspect-ratio: 361 / 466;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* ─── Feature split ─────────────────────────────────────────────────── */
.vd-feature {
	padding: var(--wp--preset--spacing--60) 0;
}

.vd-feature__row {
	align-items: center;
	gap: 0;
	margin: 0 auto;
	max-width: min(1320px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vd-feature__text {
	padding: 0 3rem;
}

.vd-feature__kicker {
	color: var(--vd-terra);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.6;
	margin: 0 auto 2.5rem;
	max-width: 202px;
	text-transform: uppercase;
}

.vd-feature__copy {
	color: var(--vd-merlot);
	font-size: var(--wp--preset--font-size--body);
	margin: 0 auto 2rem;
	max-width: 329px;
}

.vd-feature__fine {
	font-size: 0.6875rem;
	margin: -1rem auto 2rem;
	max-width: 329px;
	opacity: 0.8;
}

.vd-feature__media {
	margin: 0;
}

.vd-feature__media img {
	aspect-ratio: 557 / 600;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* ─── Track record ──────────────────────────────────────────────────── */
.vd-stat {
	padding: var(--wp--preset--spacing--50) 0;
}

.vd-stat--merlot {
	background: var(--vd-merlot);
	color: var(--vd-pearl);
}

.vd-stat--ground {
	background: var(--vd-ground);
	color: var(--vd-merlot);
}

.vd-stat--orange {
	background: var(--vd-orange);
	color: var(--vd-pearl);
}

.vd-stat > .is-style-eyebrow {
	color: var(--vd-pearl);
	margin: 0 auto 2rem;
	max-width: min(1320px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vd-stat__row {
	align-items: center;
	margin: 0 auto;
	max-width: min(1320px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vd-stat__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 5.2vw, 4.6875rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1;
	margin: 0;
}

.vd-stat__media {
	margin: 0;
}

.vd-stat__media img {
	aspect-ratio: 358 / 298;
	display: block;
	object-fit: cover;
	width: 100%;
}

.vd-stat__text {
	padding-left: 3rem;
}

.vd-stat__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.vd-stat__value {
	border-bottom: 1px solid currentColor;
	color: var(--vd-terra);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(2rem, 3.5vw, 3.125rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1;
	margin: 0 0 1.5rem;
	padding-bottom: 1.25rem;
}

.vd-stat--ground .vd-stat__value {
	border-bottom-color: var(--vd-merlot);
}

.vd-stat--orange .vd-stat__value {
	color: var(--vd-merlot);
	border-bottom-color: var(--vd-pearl);
}

.vd-stat__copy {
	color: inherit;
	margin: 0;
	max-width: 480px;
}

/* ─── Accordion (Services / Culture) ────────────────────────────────── */
.vd-acc {
	padding: var(--wp--preset--spacing--60) 0;
}

.vd-acc__inner {
	margin: 0 auto;
	max-width: 900px;
	padding: 0 1.5rem;
}

.vd-acc__inner > .is-style-eyebrow {
	margin-bottom: 1.5rem;
}

.vd-acc__row {
	border-top: 1px solid var(--section-hairline);
	margin: 0;
}

.vd-acc__rows .vd-acc__row:last-child {
	border-bottom: 1px solid var(--section-hairline);
}

.vd-acc__row summary {
	align-items: baseline;
	cursor: pointer;
	display: flex;
	gap: 1.5rem;
	list-style: none;
	padding: 1rem 0;
	position: relative;
}

.vd-acc__row summary::-webkit-details-marker {
	display: none;
}

.vd-acc__row summary::after {
	color: var(--vd-terra);
	content: '+';
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 300;
	margin-left: auto;
}

.vd-acc__row[open] summary::after {
	content: '\2013';
}

.vd-acc__num {
	color: inherit;
	flex: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	width: 2.5rem;
}

.vd-acc__title {
	color: var(--vd-terra);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 2.4vw, 2.1875rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.vd-acc__copy {
	margin: 0 0 1.5rem 4rem;
	max-width: 677px;
}

/* Breathing room under an open row's copy (Development BugHerd #6): core's
   flow layout zeroes the last paragraph's margin, so the copy sat on the
   hairline — the room is padding on the row itself. */
.vd-acc__row[open] {
	padding-bottom: 1.75rem;
}

/* The CTA sits at the foot of each open panel, indented with its copy. */
.vd-acc .wp-block-buttons {
	margin-top: 0.5rem;
	padding-left: 4rem;
}

/* ─── Team ──────────────────────────────────────────────────────────── */
.vd-team {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--70);
}

/* Face, size, weight and tracking dropped: they now say exactly what the
   brand rule above says, and two sources of truth for one value is how this
   drifted in the first place. */
.vd-team > .is-style-eyebrow {
	margin-bottom: 1.5rem;
}

.vd-team__row {
	border-top: 1px solid var(--vd-terra);
	margin: 0;
}

.vd-team__rows .vd-team__row:last-child {
	border-bottom: 1px solid var(--vd-terra);
}

.vd-team__row summary {
	align-items: baseline;
	cursor: pointer;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr auto 1.5rem;
	list-style: none;
	padding: 1rem 0;
}

.vd-team__row summary::-webkit-details-marker {
	display: none;
}

.vd-team__row summary::after {
	color: var(--vd-terra);
	content: '+';
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 300;
	text-align: right;
}

.vd-team__row[open] summary::after {
	content: '\2013';
}

.vd-team__name {
	color: var(--vd-terra);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 2.4vw, 2.1875rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.vd-team__row summary:hover .vd-team__name {
	color: var(--vd-tint);
}

.vd-team__title {
	color: var(--vd-tint);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-align: right;
	text-transform: uppercase;
}

.vd-team__bio {
	color: var(--vd-merlot);
	margin: 0 0 1.75rem;
	max-width: 714px;
}

/* Headshot (BugHerd #383/#384) — floats beside the bio text once a row
   opens; the collapsed name/title line is untouched. Portrait 2/3, matching
   the source photography (both the client's own site and the one real
   photo supplied directly landed on that ratio once cropped).
   valencia_blk_image() puts the className on the <figure>, not the <img> —
   float/margin/width live there, object-fit/aspect-ratio have to be on the
   <img> itself or they do nothing. */
.vd-team__photo {
	float: left;
	margin: 0 1.75rem 1rem 0;
	width: 130px;
}

.vd-team__photo img {
	aspect-ratio: 2 / 3;
	border-radius: 4px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 782px) {
	.vd-team__photo {
		float: none;
		margin-bottom: 1.25rem;
		width: 96px;
	}
}

/* ─── Link list (Careers) ───────────────────────────────────────────── */
.vd-links {
	padding: var(--wp--preset--spacing--60) 0;
}

.vd-links__row-wrap {
	gap: 4rem;
	margin: 0 auto;
	max-width: 1000px;
}

.vd-links__head {
	font-size: 1.25rem;
	letter-spacing: 0.15em;
	line-height: 1.5;
	max-width: 262px;
}

.vd-links__row {
	border-bottom: 1px solid var(--vd-terra);
	margin: 0;
	padding: 0.6rem 0;
}

.vd-links__row a {
	color: var(--vd-merlot);
	display: flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 400;
	justify-content: space-between;
	letter-spacing: 0.15em;
	text-decoration: none;
	text-transform: uppercase;
}

.vd-links__row a::after {
	color: var(--vd-terra);
	content: '\2197';
}

/* ─── Values (Culture) ──────────────────────────────────────────────── */
.vd-values {
	padding: var(--wp--preset--spacing--60) 0;
}

.vd-values > .is-style-eyebrow {
	margin: 0 auto 2.5rem;
	max-width: min(1320px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.vd-values__row {
	cursor: grab;
	display: flex;
	gap: 1.875rem;
	overflow-x: auto;
	padding: 0 max(1.5rem, calc((100% - 1320px) / 2)) 1rem;
	scroll-padding-inline: max(1.5rem, calc((100% - 1320px) / 2)); /* snap honours the inset */
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.vd-values__row::-webkit-scrollbar {
	display: none;
}

/* BugHerd #368 (values-scroll.js): dragging pauses scroll-snap so the row
   tracks the pointer exactly, and the cursor confirms the grab. */
.vd-values__row.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.vd-values__card {
	flex: none;
	scroll-snap-align: start;
	width: min(420px, 80vw);
}

.vd-values__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.9375rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0 0 1.5rem;
}

.vd-values__media {
	margin: 0 0 1.5rem;
}

.vd-values__media img {
	aspect-ratio: 420 / 464;
	display: block;
	object-fit: cover;
	width: 100%;
}

.vd-values__copy {
	margin: 0;
	max-width: 420px;
}

/* ─── Property strip (Careers) ──────────────────────────────────────── */
.vd-strip {
	padding: var(--wp--preset--spacing--60) 0;
}

.vd-strip__head {
	color: var(--vd-terra);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.625rem, 2.4vw, 2.1875rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	margin: 0 auto 2.5rem;
	max-width: min(1320px, calc(100% - var(--vhc-band-gutter, 3rem)));
	text-transform: uppercase;
}

.vd-strip__row {
	display: flex;
	gap: 1.875rem;
	overflow-x: auto;
	padding: 0 max(1.5rem, calc((100% - 1320px) / 2)) 1rem;
	scroll-padding-inline: max(1.5rem, calc((100% - 1320px) / 2)); /* snap honours the inset */
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.vd-strip__row::-webkit-scrollbar {
	display: none;
}

.vd-strip__card {
	flex: none;
	scroll-snap-align: start;
	width: min(316px, 70vw);
}

.vd-strip__media {
	margin: 0 0 1rem;
}

.vd-strip__media img {
	aspect-ratio: 316 / 421;
	display: block;
	object-fit: cover;
	width: 100%;
}

.vd-strip__name {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0;
	text-transform: uppercase;
}

.vd-strip__name a {
	color: var(--vd-terra);
	text-decoration: none;
}

.vd-strip__name a::after {
	content: ' \2192';
	margin-left: 0.4rem;
}

.vd-strip__city {
	color: var(--vd-tint);
	margin: 0.2rem 0 0;
}

/* ─── News (latest posts) ───────────────────────────────────────────── */
.vd-news {
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--70);
}

/* The sun mark above the head — the comp's 49×61, centred. */
.vd-news__mark {
	margin: 0 auto 1.5rem;
	width: 49px;
}

.vd-news__mark img {
	display: block;
	height: 61px;
	width: 49px;
}

.vd-news__head {
	margin: 0 auto 3rem;
}

.vd-news__feed {
	display: grid;
	gap: 3rem 1.875rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.vd-news__feed li {
	margin: 0;
}

/* The comp staggers the middle card up; the flanking cards drop instead
   so the headline keeps its clearance. */
.vd-news__feed li:nth-child(odd) {
	margin-top: 3.5rem;
}

.vd-news__feed .wp-block-latest-posts__featured-image {
	margin: 0 0 1.5rem;
}

.vd-news__feed .wp-block-latest-posts__featured-image img {
	aspect-ratio: 420 / 470;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vd-news__feed > li > a {
	color: var(--vd-terra);
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.9375rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0 0 1rem;
	text-decoration: none;
}

.vd-news__feed .wp-block-latest-posts__post-excerpt {
	color: var(--wp--preset--color--charcoal);
	margin: 0 0 1rem;
}

.vd-news__feed .wp-block-latest-posts__post-excerpt a {
	color: var(--vd-terra);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

/* ─── Duo (leadership / branding) ───────────────────────────────────── */
.vd-duo {
	padding: var(--wp--preset--spacing--60) 0;
}

.vd-duo__row {
	align-items: center;
	gap: 3rem;
	margin: 0 auto;
	max-width: min(1320px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

/* BugHerd #16/#17: the accent photograph has moved into the right-hand
   column, so this holds the main image alone and no longer needs to be a
   flex row. */
.vd-duo__media {
	padding-left: 3rem;
}

.vd-duo__main,
.vd-duo__accent {
	margin: 0;
}

.vd-duo__main {
	width: 34.7vw;
}

.vd-duo__main img {
	aspect-ratio: 499 / 645;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* BugHerd #17: sits at the head of the text column now, with the copy under
   it, rather than beside the main image. Measured against Meg's comp the
   photograph keeps the size and the drop it already had — 12.5vw wide,
   starting 9.3vw below the top of the main image — so only its place in the
   document changed. margin-bottom is the 44px the comp leaves before the
   copy, less that paragraph's half-leading. */
.vd-duo__accent {
	margin-bottom: 2.5rem;
	width: 12.5vw;
}

.vd-duo__accent img {
	aspect-ratio: 180 / 233;
	display: block;
	object-fit: cover;
	width: 100%;
}

.vd-duo__text .is-style-eyebrow {
	margin-bottom: 1.5rem;
}

.vd-duo__head {
	margin-bottom: 1.5rem;
	max-width: 397px;
}

.vd-duo__copy {
	color: var(--wp--preset--color--midnight);
	margin: 0 0 1.5rem;
	max-width: 366px;
}

/* ─── Centred copy / hairline ───────────────────────────────────────── */
.vd-centered {
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40);
}

.vd-centered__head {
	margin: 0 auto 1.5rem;
	max-width: 686px;
}

.vd-centered__copy {
	color: var(--vd-merlot);
	margin: 0 auto 1.5rem;
	max-width: 686px;
}

.vd-hairline {
	border-top-color: var(--vd-terra);
	margin: 0;
}

/* ─── Collection grid + cards in the Development palette ────────────── */
body.is-brand-development .vhc-cgrid-card__name a,
body.is-brand-development .vhc-cgrid-card__name {
	color: var(--vd-terra);
}

body.is-brand-development .vhc-cgrid-card__location {
	color: var(--vd-tint);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-transform: none;
}

body.is-brand-development .vhc-cgrid-card__desc {
	color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
}

body.is-brand-development .vhc-cgrid-card__name a::after {
	background: none;
	color: var(--vd-terra);
	content: ' \2192';
	height: auto;
	margin-left: 0.4rem;
	width: auto;
}

/* ─── Footer ────────────────────────────────────────────────────────── */
.dev-footer {
	background: var(--vd-merlot);
	color: var(--vd-pearl-tint);
	margin-top: var(--wp--preset--spacing--70);
	padding: 3.5rem 0 1.5rem;
}

.dev-footer__inner {
	margin: 0 auto;
	max-width: min(1320px, calc(100% - var(--vhc-band-gutter, 3rem)));
}

.dev-footer__masthead {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 2.5rem;
}

.dev-footer__wordmark {
	align-items: baseline;
	color: var(--vd-terra);
	display: flex;
	gap: 1.5vw;
}

.dev-footer__word {
	background: currentColor;
	display: block;
	height: clamp(24px, 3.3vw, 48px);
	-webkit-mask: var(--brand-mark) no-repeat left / contain;
	mask: var(--brand-mark) no-repeat left / contain;
}

.dev-footer__word--a {
	width: calc(clamp(24px, 3.3vw, 48px) * 7.95);
}

.dev-footer__word--b {
	width: calc(clamp(24px, 3.3vw, 48px) * 11.43);
}

.dev-footer__sun {
	background: var(--vd-terra);
	display: block;
	height: 61px;
	-webkit-mask: var(--brand-mark) no-repeat center / contain;
	mask: var(--brand-mark) no-repeat center / contain;
	width: 49px;
}

.dev-footer__row {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	padding-bottom: 3rem;
}

.dev-footer__nav ul {
	display: grid;
	gap: 0 3rem;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dev-footer__nav a {
	color: var(--vd-pearl-tint);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
}

.dev-footer__nav a:hover {
	color: var(--vd-tint);
}

.dev-footer__legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

.dev-footer__legal a {
	color: var(--vd-pearl-tint);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	line-height: 1.55;
	text-decoration: none;
	text-transform: uppercase;
}

.dev-footer__colophon {
	border-top: 1px solid rgba(246, 246, 240, 0.3);
	color: var(--vd-terra);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	margin: 0;
	padding-top: 1.5rem;
	text-align: center;
	text-transform: uppercase;
}

/* Blog index / single in the Development palette (the collection's
   templates: category pill, serif titles, Read More). */
body.is-brand-development .vhc-bcard__title a,
body.is-brand-development .vhc-bcard__link {
	color: var(--vd-terra);
}

body.is-brand-development .vhc-bcard__category {
	color: var(--wp--preset--color--midnight);
}

/* ─── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 782px) {
	.vd-statement__row,
	.vd-feature__row,
	.vd-stat__row,
	.vd-duo__row,
	.vd-links__row-wrap {
		flex-wrap: wrap;
	}

	.vd-statement__body {
		padding-top: 1rem;
	}

	/* BugHerd #63: the collage swipes on mobile instead of wrapping.

	   Replaced in place rather than overridden from the end of the file,
	   because the old behaviour and the new one cannot coexist: the width
	   below carried !important, so an override would have had to shout back,
	   and the two hidden photos had to come out of display:none.

	   Wrapping three of five photos into a 2-up grid was losing the other
	   two entirely — --edge and --edge-r are real pictures, 144x256 and
	   105x391 at desktop, not decorative slivers. A scroller shows all five.
	   Same mechanism as .vd-values__row, which already scroll-snaps here. */
	.vd-collage__row {
		flex-wrap: nowrap;
		gap: 1rem;
		justify-content: flex-start;
		overflow-x: auto;
		padding: 0 1.5rem;
		scroll-padding-inline: 1.5rem;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.vd-collage__row::-webkit-scrollbar {
		display: none;
	}

	/* The carousel (#14) is excluded: it sets its own width and snaps to
	   centre, and this rule's !important would beat it on any specificity. */
	.vd-collage__photo:not(.vd-collage__photo--slide) {
		margin-top: 0 !important;
		scroll-snap-align: start;
		width: 70% !important;
	}

	.vd-collage__caption {
		padding-left: 1.5rem;
	}

	.vd-pair {
		grid-template-columns: 1fr;
		padding: 0 1.5rem var(--wp--preset--spacing--50);
	}

	.vd-feature__text {
		padding: 0 0 2rem;
	}

	.vd-stat__text {
		padding-left: 0;
		padding-top: 1.5rem;
	}

	.vd-news__feed {
		grid-template-columns: 1fr;
	}

	.vd-news__feed li:nth-child(odd) {
		margin-top: 0;
	}

	.vd-duo__media {
		padding-left: 0;
	}

	.vd-duo__main {
		width: 62vw;
	}

	.vd-duo__accent {
		width: 24vw;
	}

	.vd-acc__copy,
	.vd-acc .wp-block-buttons {
		margin-left: 0;
		padding-left: 0;
	}

	.dev-footer__masthead,
	.dev-footer__row {
		align-items: flex-start;
		flex-direction: column;
		gap: 2rem;
	}

	/* The two-part wordmark stacks and scales to the screen; the nav
	   pairs fall into two columns. */
	.dev-footer__wordmark {
		flex-direction: column;
		gap: 0.5rem;
	}

	.dev-footer__word {
		height: 7vw;
	}

	.dev-footer__word--a {
		width: calc(7vw * 7.95);
	}

	.dev-footer__word--b {
		width: calc(7vw * 11.43);
	}

	.dev-footer__nav ul {
		gap: 0.25rem 2rem;
		grid-auto-flow: row;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: none;
	}

	.dev-footer__legal ul {
		text-align: left;
	}
}

/* Gravity Forms stacks its half-width fields below 640px, at which point
   the 2.25rem column gap is buying nothing — but the grid still reserves
   it eleven times over, which is 396px of gaps inside a 342px column. The
   tracks collapse to zero and the form overflows the page (BugHerd #103
   on Caravan Court; the same on every site's forms). */
@media (max-width: 639px) {
	.vhc-gform .gform_wrapper .gform_fields {
		grid-column-gap: 0;
	}
}

/* ─── Bands that never got a phone layout ──────────────────────────────
   Riverwalk mobile pass, 2026-09-23. These kept their desktop column counts
   all the way down: room cards sat three abreast at about 94px, the food &
   beverage heading had a column roughly one word wide, and the story
   collage — absolutely positioned inside a fixed height — clipped off both
   edges and pushed the document wider than the screen, which is what
   stretched the fixed reserve bar and made the page scroll sideways. */
@media (max-width: 781px) {
	/* Riverwalk #104: "increase padding slightly to distance the room types
	   from each other." 3rem was a mobile-only reduction; 3.5rem is the row
	   gap this same grid uses at desktop, so it is the component's own
	   figure rather than a new one. 48px -> 56px. */
	.vhc-rooms-grid__items {
		gap: 3.5rem;
		grid-template-columns: minmax(0, 1fr);
	}

	/* Four filters in a nowrap row ran past the edge by 320. */
	.vhc-rooms-grid__filters {
		flex-wrap: wrap;
		gap: 1rem 1.75rem;
	}

	/* The rooms slider: photo first, then the title and its CTAs. The
	   detail column's top padding held it level with the photo beside it.
	   BugHerd Riverwalk #76: that ordering was only ever a comment — the
	   markup puts the detail first and nothing reordered it, so the copy
	   came out above the photos. The comp also centres the whole stack. */
	.vhc-rooms__layout {
		gap: 1.75rem;
		grid-template-columns: minmax(0, 1fr);
	}

	.vhc-rooms__media {
		order: -1;
	}

	/* BugHerd #94: the tall/wide/small collage becomes a one-photo-at-a-time
	   slider (view.js, mobile only). Only the positioning that stacked the
	   three figures is undone here — each image's own aspect-ratio and
	   object-fit (above) still apply, since view.js's manual height sync
	   follows whichever photo is active rather than a fixed collage canvas. */
	.vhc-rooms__media.is-enhanced {
		aspect-ratio: auto;
	}

	.vhc-rooms__media.is-enhanced .vhc-rooms__tall,
	.vhc-rooms__media.is-enhanced .vhc-rooms__wide,
	.vhc-rooms__media.is-enhanced .vhc-rooms__small {
		box-shadow: none;
		left: auto;
		position: static;
		top: auto;
		width: 100%;
		z-index: auto;
	}

	/* Grid order, not DOM order, decides this row's position — it has to
	   sit at -1 alongside .vhc-rooms__media (also -1) or it falls in after
	   .vhc-rooms__detail's order:0, landing past the Reserve button instead
	   of under the photo. Same order value ties on DOM order, and the JS
	   inserts this row right after .vhc-rooms__media, so that's still
	   photo, then arrows, then detail. */
	.vhc-rooms__photo-arrows {
		order: -1;
	}

	.vhc-rooms__detail {
		padding-top: 0;
		text-align: center;
	}

	.vhc-rooms__pager,
	.vhc-rooms__ctas {
		justify-content: center;
	}

	.vhc-dine__layout {
		gap: 2.5rem;
		grid-template-columns: minmax(0, 1fr);
	}

	/* Riverwalk #93: "images and icons are not overlapping properly, increase
	   size of images and decrease illustration".

	   The previous rule here flattened the collage into a flex row so nothing
	   could land on the headline. It worked, but it cost the composition: two
	   photographs at 50% each came out 149px wide, and the drawn pieces, now
	   ordinary flex items, could not overlap anything -- the streetlamp took a
	   row of its own at 106x286, larger than either photograph. All three of
	   Courtney's complaints in one.

	   Rebuilt from the mobile comp (Figma 6345:6935, the 400px Mobile frame on
	   "Hotel Valencia Riverwalk - Rev 2"), which stacks the collage and keeps
	   the overlaps. Every figure below is that frame's own geometry as a
	   percentage of its 400px width, so the composition holds at any phone
	   size rather than at one:

	     vintage frame   x 58  w 285  ->  left 14.5%  width 71.25%
	     illustration    x 25  w 232  ->  left 6.25%  width 58%
	     crest (script)  x 208 w 170  ->  left 52%    width 42.5%
	     drawn cutout    x -4  w 143  ->  left 0      width 20%

	   The frames go from 149px to 251px and 205px, the streetlamp from 106px
	   to 70px, and the crest and cutout are absolute again so they cross the
	   frames the way the comp draws them. The cutout keeps a smaller share than
	   the comp's 35.75%: that slot was drawn for the wide orange sketch, and
	   #90 already had to cut the client's tall streetlamp to a third of it for
	   the same reason.

	   aspect-ratio rather than a height, so the box scales with the width and
	   the absolute percentages stay true. 400/520 is the comp's own extent,
	   from the top of the vintage frame to the bottom of the illustration. */
	.vhc-story__collage {
		aspect-ratio: 400 / 520;
		display: block;
		height: auto;
		max-width: calc(100% - 2.5rem);
		position: relative;
	}

	.vhc-story__frame {
		box-sizing: border-box;
		position: absolute;
		width: auto;
	}

	.vhc-story__frame--vintage {
		left: 14.5%;
		top: 0;
		width: 71.25%;
	}

	.vhc-story__frame--illustration {
		left: 6.25%;
		top: 46%;
		width: 58%;
	}

	.vhc-story__crest {
		left: 52%;
		right: auto;
		top: 47%;
		width: 42.5%;
	}

	.vhc-story__cutout {
		left: 0;
		top: 30%;
		width: 20%;
	}
}


/* ─── Room filters: keep the options on screen (Texican #51) ──────────── */
@media (max-width: 781px) {
	/* The options list is 160px wide and right-aligned to its filter. When a
	   filter sits near the left edge — "Room Type" is the first, at x=24 —
	   right-aligning a list wider than the filter walks it off the left of
	   the screen: measured -37 to 123 on Texican, -29 to 131 on Caravan.
	   Riverwalk escaped only because its filter bar wraps differently, so
	   this is luck rather than design.

	   Only the first filter flips to left-alignment. Flipping all of them
	   just trades the problem for the other edge — it pushed Riverwalk's
	   "Guests" list to 275-435 and gave the page a horizontal scrollbar. */
	.vhc-rooms-grid__filter:first-child ul {
		left: 0;
		right: auto;
	}
}


/* Riverwalk #98: the reviews block is a two-column grid, the "Reviews"
   eyebrow beside the quotation. It had no mobile override, so at 393 the
   grid still split -- 62px for the eyebrow and 218px for the quote, and the
   eyebrow ran 614px down the page at roughly a letter a line. Same defect as
   #107/#140, different component.

   The mobile comp (Figma 6345:6935) stacks them and sets both flush left at
   x=39, which is the rest of the ticket: "section header should appear above
   text, align body copy with dot" -- the dot is the eyebrow's marker, and
   once they share a column the body copy lines up under it. */
@media (max-width: 781px) {
	.vhc-quote {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.5rem;
	}
}

/* Riverwalk #103: the rooms filter bar is a `space-between` flex row holding
   an eyebrow label and the three filters. At 393 the label takes its share
   and leaves the filters 209px, so "Room Type" and "Guests" fit on one line
   and "Beds" drops to a second -- a ragged 2+1 that reads as a mistake.
   The three of them only need 289px together, which the page measure (313px)
   has room for.

   Stack the bar instead of squeezing it: label on its own line, filters on
   theirs at full width, and all three sit on one row. This also moves the
   row from x=144 to x=40, in line with everything else on the page. The
   Texican #51 dropdown fix still holds -- re-checked, every list opens
   inside the screen from the new positions. */
@media (max-width: 781px) {
	.vhc-rooms-grid__bar {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}

	.vhc-rooms-grid__filters {
		width: 100%;
	}
}

/* Riverwalk #133: "increase space between sections, they are all running
   together". The band separations on Explore measure 72-162px, so it is not
   the bands -- it is inside the last one. The explore cards are a columns
   block, and stacked they fall back on core's 20px block gap, so three
   full-width cards (photo, headline, copy, link) run one into the next with
   less air between them than there is between a headline and its own body
   copy. 3.5rem, the same separator the rooms grid, the offers grid and the
   featured posts all took in #104/#105/#137. */
@media (max-width: 781px) {
	.vhc-excards__cols {
		row-gap: 3.5rem;
	}
}

/* Riverwalk #132 (and the actionable half of #131): the explore map's
   category list is the "radio buttons". Each marker is an 18px circle and
   each row carries a 1.5rem bottom margin, so seven categories occupy 308px
   of a 852px screen before the map appears. 14px markers and 0.75rem between
   rows brings that to about 210px. Desktop keeps the signed-off 18px/24px.

   These two rules still apply to the row itself, which stays in the DOM as
   view.js's fallback — see is-select-mode below, Hunter's answer to #131's
   other half. */
@media (max-width: 781px) {
	.vhc-exmap__dot {
		height: 14px;
		width: 14px;
	}

	.vhc-exmap__cats > li {
		margin-bottom: 0.75rem;
	}
}

/* Riverwalk #131: "condense the filters to a dropdown on mobile" —
   Hunter's answer once the button row was already down to 210px. view.js
   adds a <select> before the list and marks it is-select-mode; every li
   collapses to nothing (button hidden, margin zeroed) except whichever one
   .click() just marked is-active, so its own .vhc-exmap__venues is what
   shows below the dropdown. No JS is duplicated — the select drives the
   same accordion/filter/marker logic the buttons always did. */
@media (max-width: 781px) {
	.vhc-exmap__cat-select {
		appearance: none;
		background: var(--wp--preset--color--pearl, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23131e29' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 1.25rem center;
		border: 1px solid var(--wp--preset--color--midnight-tint);
		color: var(--wp--preset--color--midnight-tint);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		letter-spacing: 0.14em;
		margin-bottom: 1.25rem;
		padding: 0.875rem 2.75rem 0.875rem 1.25rem;
		text-transform: uppercase;
		width: 100%;
	}

	/* Hunter, after seeing it live: "can we move the map closer to the
	   dropdown." The select is a flex sibling of .vhc-exmap__cats, not a
	   child of it (it can't be — .vhc-exmap__cats is a <ul>) — so
	   .vhc-exmap's own gap ran once before the (now near-empty) cats list
	   and once after it, adding up to a full gap on either side of
	   nothing. Zeroed here; the select's margin-bottom above stands in for
	   both, whether cats is empty (View All) or holding a venues list. */
	.vhc-exmap.is-select-mode {
		gap: 0;
	}

	.vhc-exmap__cats.is-select-mode {
		margin-top: 0;
	}

	.vhc-exmap__cats.is-select-mode > li {
		margin-bottom: 0;
	}

	.vhc-exmap__cats.is-select-mode > li:not(.is-active) {
		display: none;
	}

	.vhc-exmap__cats.is-select-mode .vhc-exmap__cat {
		display: none;
	}

	.vhc-exmap__cats.is-select-mode .vhc-exmap__venues {
		margin-top: 0.875rem;
	}
}

/* Riverwalk #125: the wide photograph above the rewards list carries a 56px
   bottom margin AND .vhc-rewards opens with 56px of its own padding, so the
   two stack into 112px between the picture and the first line of copy --
   twice the separation anything else on the page uses. Dropping the block's
   top padding on mobile leaves the image's own 56px doing the job once. */
@media (max-width: 781px) {
	.vhc-rewards {
		padding-top: 0;
	}
}

/* Riverwalk #121: "move copy up". .vhc-skyband__label carries a 2.5rem
   bottom margin -- 40px between the row's heading and its body copy, where
   every other headline-to-body pair on this breakpoint settled at 20px in
   #108/#118/#95/#116. Same value here.

   The other half of the ticket, "is something missing?", is answered on the
   ticket rather than in CSS: nothing is. The planner row renders both of its
   columns on mobile -- the label and copy, then all three links (checklist,
   sales tax exemption, hotel occupancy tax exemption). It read short because
   the 40px gap pushed the links below the fold on a 852px screen. */
@media (max-width: 781px) {
	.vhc-skyband__label {
		margin-bottom: 1.25rem;
	}
}

/* Riverwalk #99: the footer's social icons measured 15x15 against the
   overlay menu's 20x20. That difference is not a decision -- the icons carry
   width/height="15" as HTML attributes, and #92 sized the MENU copies up in
   CSS for mobile without touching the footer's. Same override, same value,
   so "match the icons in the menu" is literal. Mobile only, exactly as #92
   is: the attributes stay as the desktop size and the fallback. */
@media (max-width: 781px) {
	.hotel-footer__social a svg {
		height: 20px;
		width: 20px;
	}
}

/* Riverwalk #136: the category dropdown is absolutely positioned with
   `right: 0`, which anchors it to the right edge of its toggle. On desktop
   the toggle sits at the right of the blog bar and the list opens neatly
   underneath. On mobile the bar restacks to one column and the toggle is
   centred -- but the list is still hung off its right edge, and its natural
   width is 402px, wider than the 393px screen. Measured: the list opened at
   x = -155, so a third of it was off the left of the phone. "Getting cut
   off" is exactly right.

   Centre it under the toggle it belongs to, and cap it at the viewport less
   a gutter so a long category can never push it off either edge again. This
   is the same defect Texican #51 fixed on the rooms filter; that fix pinned
   one list to `left: 0`, which works when the toggle is at the left but not
   for a centred one. */
@media (max-width: 781px) {
	.vhc-blog__filter ul {
		left: 50%;
		max-width: calc(100vw - 3rem);
		right: auto;
		transform: translateX(-50%);
	}
}

/* Riverwalk #126: the Offers reward tiers pad their summary 44px above and
   52px below the label -- from #65, where Courtney asked for "roughly double
   the air" around the dividing rule on desktop. The FAQ accordion, which is
   the same chassis, carries 18px and 22px. She is asking the collapsed rows
   here to "reflect the styling on the other accordion sections", so this
   takes the FAQ's exact figures rather than a new guess.

   Mobile only, and on .vhc-tier summary alone: .vhc-tiers--faq's own rule is
   more specific, so the FAQ accordions keep their values and the desktop
   band keeps #65. Row height 131px -> 75px. */
@media (max-width: 781px) {
	.vhc-tier summary {
		padding-bottom: 1.375rem;
		padding-top: 1.125rem;
	}
}

/* Riverwalk #127: the Terms & Conditions link inside a reward tier rendered
   in midnight, the body colour, because .is-style-underlined has no colour
   of its own. Courtney asks for red; on Riverwalk that is --section-accent,
   #c05131, which is the same colour the tier's own summary already uses, so
   the link now matches the heading it sits under rather than the body text.

   Not inside a media query. A link colour is not a layout property, and a
   T&C link that is red on a phone and black on a desktop would be a new
   inconsistency rather than a fix. Scoped to .vhc-tier so other underlined
   buttons on the site are unaffected. */
.vhc-tier .wp-block-button.is-style-underlined a {
	color: var(--section-accent);
}

/* Riverwalk #122: the sky band pads itself with spacing--70 times THREE at
   both ends -- 162px top and 162px bottom. That figure came from #62/#63,
   where Courtney asked for "three times the air above the headline" on a
   1464px desktop, and it was never given a mobile value. On a 393px phone
   the band measured 1029px tall with 324px of it empty blue: a third of the
   component, and about a fifth of the screen before the headline appears.
   That is "shorten blue box, too much dead space".

   Half the desktop multiplier, so the band keeps the generous feel #62 asked
   for and loses ~160px of nothing. 81px each end, band 1029 -> 867. Desktop
   is untouched: the multiplier there is still 3. */
@media (max-width: 781px) {
	.vhc-skyband {
		padding-bottom: calc(var(--wp--preset--spacing--70) * 1.5);
		padding-top: calc(var(--wp--preset--spacing--70) * 1.5);
	}
}

/* Riverwalk #101: the footer link columns are one step below the page-title
   size (-2px, from #77, so the two columns sit back from the lockup between
   them), which lands at 17px on mobile. Courtney asks for two points off.
   A second step of the same size the rule already uses: -4px, so 15px.
   Mobile only -- #77 was a desktop call and still holds there. */
@media (max-width: 781px) {
	.hotel-footer__nav a {
		font-size: calc(var(--wp--preset--font-size--page-title) - 4px);
	}
}

/* Riverwalk #117: the feature band is a two-column row -- copy on the left,
   photograph on the right -- and WP core stacks columns in DOM order, so on
   mobile the label and body copy come first and the image follows. Courtney
   wants the image to lead, which is how every other stacked pair on the site
   reads (.vhc-duo, .vhc-dinev both put their large photograph first).

   order on the media column rather than reordering the blocks: the desktop
   layout is signed off and the source order is what puts the copy on the
   left there. */
@media (max-width: 781px) {
	.vhc-feature__media {
		order: -1;
	}
}

/* Riverwalk #107 + #140: .vhc-faq__intro is a two-column grid -- the
   uppercase heading in 5fr, the standfirst in 7fr -- and it had no mobile
   override, so at 393 it was still two columns: 117px and 164px wide, both
   264px tall, with the heading broken to one or two words a line. That is
   Courtney's "crashing text" on Rooms & Suites and "headline over body copy"
   on Policies & FAQs -- the same component, two pages, one fix.

   This rule already EXISTED, scoped to .vhc-tiers--press, which is why the
   Press page has never had the problem. Widening it to the component is a
   smaller change than writing a new one, and it uses the row gap that page
   was already signed off with. The Press rule stays: it is more specific and
   sets the same values, plus a margin the other two pages do not want.

   Left-alignment (#107 asks for it) needs nothing -- the grid is already
   `align=start`; the heading only looked otherwise because it was sharing a
   line with the copy. */
@media (max-width: 781px) {
	.vhc-faq__intro {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.5rem;
	}
}

/* Riverwalk #130 + #134: .vhc-photopair is a flex ROW -- a 54.7% main image
   beside a 35% accent, the accent pushed down by a clamp() of up to 11.25rem
   so the two stagger. At desktop that is 656px and 420px. It had no mobile
   override, so at 393 the same row survives as 171px and 110px, both 195px
   tall: two thumbnails side by side where the page wants photography. #134
   says "image is too small, move to one over one"; #130 says "stack images
   to match component style - one large and one small - left aligned".

   Column, and both asks fall out of it. The main image takes the full
   measure; the accent stays visibly the smaller of the two at 62% (close to
   the 64% ratio the two have at desktop) and is left-aligned rather than
   centred. The stagger margin goes: it exists to offset a neighbour that is
   no longer beside it, and at mobile it read as a gap.

   flex-direction here also overrides --reversed's row-reverse, deliberately.
   Reversed puts the accent LEFT of the main on Gallery; stacked, the large
   image should still lead, which is what "one large and one small" describes.
   align-items likewise overrides --centered, per #130's "left aligned". */
@media (max-width: 781px) {
	.vhc-photopair {
		align-items: flex-start;
		flex-direction: column;
		gap: 1.5rem;
	}

	.vhc-photopair__main {
		flex: 0 0 auto;
		width: 100%;
	}

	.vhc-photopair__accent {
		flex: 0 0 auto;
		margin-top: 0;
		width: 62%;
	}
}

/* Riverwalk #102, #114, #129: the intro-split illustration is written as a
   FIXED pixel width -- min(225px, 100%) on the base, min(252px, 100%) on the
   --illustration variant -- so it is exactly the same size on a 393px phone
   as on a 1464px desktop. Beside a 540px desktop column 225px reads as a
   small accent under the copy (42% of the column); in a 313px mobile column
   the identical 225px is 72% of the width and reads as a second photograph.
   That is all three tickets: "decrease size in mobile", and twice "decrease
   the illustration to match the other illustration sizes".

   max-width rather than width, and one figure for all of them. 140px is 45%
   of the mobile column, which is the proportion the base variant already has
   at desktop, so nothing changes its relationship to the layout Courtney
   signed off -- it just stops being measured in absolute pixels. Because it
   is a max-width it only ever shrinks: the --stamp variant is 120px and
   stays 120px, which is right, since the two stamp pages are the ones she
   did NOT flag. Afterwards all three flagged illustrations are the same
   width as each other, which is what "consistent" asks for. */
@media (max-width: 781px) {
	.vhc-intro-split__copy .vhc-intro-split__image img {
		max-width: 140px;
	}
}

/* Riverwalk #116: the meetings feature label sat 3.25rem (52px) off its body
   copy -- a figure sized for a centred 300px measure at desktop, which reads
   as a break in the page once the column stacks. 1.25rem, the same 20px the
   rest of this breakpoint's headline-to-body pairs use.

   This has to sit at the bottom of the file. .vhc-feature__label's base rule
   writes the margin SHORTHAND (`margin: 0 auto 3.25rem`) and lives further
   down than the rest of this batch's overrides; equal specificity, later
   wins, and a media query adds none. Placed with its siblings it lost
   silently and measured 52px with no inline style to explain it. */
@media (max-width: 781px) {
	.vhc-feature__label {
		margin-bottom: 1.25rem;
	}
}

/* ─── The George — BugHerd 2026-09-23 (Meg) ──────────────────────────────

   These are scoped to `body.is-hotel-the-george` rather than
   `.is-brand-hotel`, which also carries the five Courts and the development
   site, and would restyle Riverwalk and Santana Row — both signed off
   against comp 12072:2406. The class comes from brand_roster_key
   (valencia_body_classes()).

   At the end of the file on purpose: the base rules for all three of these
   live further up, equal specificity wins on order, and a media query adds
   none. See the Riverwalk #116 note above for what that costs to debug. */

/* #6: the dining card's "at The George" line takes Mazius Display's Extra
   Italic, which is the face's italic at 400 — the same file
   brand_emphasis=italic already puts behind headline <strong> runs. */
body.is-hotel-the-george .vhc-dine__sub {
	font-style: italic;
}

/* #12: offer-card titles read semibold. body.is-brand-hotel sets the family,
   size and tracking but no weight, so these inherit 400; The George's body
   face is Raleway, whose variable file covers 600. Riverwalk and Santana Row
   stay at 400 — that is the weight their comp pass signed off. */
body.is-hotel-the-george .vhc-offer-card__title {
	font-weight: 600;
}

/* #3: "add margin above the text portion of this component so it's not butt
   up against the images."

   The margin was not the problem — .vhc-story__row measures the same 64px
   here as on Riverwalk. The collage is a fixed-height box (clamp(320px,
   39vw, 560px)) holding absolutely-positioned frames whose heights come from
   their photographs' proportions, and BOTH of The George's story photographs
   are portrait (tg-story-vintage 933x1144 = 0.816, tg-story-illustration
   896x1100 = 0.815) where the composition wants a landscape beside a
   portrait, as Riverwalk has (rw-story-vintage 900x621 = 1.449). So the
   vintage frame stands ~56px past the bottom of its own container and eats
   the gap: measured at 1317, the painted collage ended 9px above the text
   against Riverwalk's 58px.

   4.3vw tracks the overhang, which is vw-driven like the frame and the
   container. Both stop growing at about 1446px, where the frame's width
   clamp caps at 441 and the collage's height clamp at 560 — past that the
   overhang is a constant ~62px, so the vw term is capped there too with a
   min(), or the gap would keep opening on wide screens while the overhang
   stood still.

   This retires when BugHerd #2 lands a landscape crop for that frame — at
   1.449 the frame no longer overhangs and the base 64px is correct again.
   Desktop only: below 640px the collage switches to an aspect-ratio box,
   which contains its frames already, so there is nothing to clear. */
@media (min-width: 640px) {
	body.is-hotel-the-george .vhc-story__row {
		margin-top: calc(var(--wp--preset--spacing--50) + min(4.3vw, 62px));
	}
}

/* The George #31: "I think this section is only meant to show a few in a row."

   .vhc-excards__cols is a core columns block, so it lays out however many
   columns the page happens to hold, in one non-wrapping row. Riverwalk's
   explore page has three and reads correctly; The George's things-to-do has
   SEVEN, which measured 164px wide each at 1317, and Santana Row's has NINE
   at 123px. So this is a shared defect rather than a per-property one —
   those two are simply the only properties carrying more experiences than
   Riverwalk, which is why it had not surfaced before.

   A three-track grid instead. Riverwalk comes out unchanged by construction:
   three tracks across the same 1269px container with the same 20px gap is
   (1269 - 40) / 3 = 410px, which is exactly what its three flex columns
   already measure. The George's seven become 3 + 3 + 1 and Santana Row's nine
   become three full rows, every card at Riverwalk's signed-off 410.

   Desktop only. Below 782px core gives each column a 100% basis and they
   already stack one per row, which is right; a grid here would fight it.

   The selector carries .wp-block-columns as well because core's layout rules
   (.is-layout-flex, and the generated .wp-container-core-columns-* that sets
   flex-wrap) are single-class and can be emitted inline in the head — that
   is, after this stylesheet. At equal specificity this would lose the race
   silently, with nothing in the element's own styles to explain it. */
@media (min-width: 782px) {
	.wp-block-columns.vhc-excards__cols {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ─── Santana Row — BugHerd 2026-09-20 (Lydia) ───────────────────────────

   #7: "seems like the styling might be off for this photography disclaimer".
   It was: .vhc-fine-print had NO rule anywhere in either stylesheet. The
   class is written by the seeds (Santana Row's rooms and offers pages carry
   four of them) but nothing ever styled it, so a legal disclaimer rendered
   at the body size, in the body colour — measured 16px, midnight, at the
   full 1024px measure, indistinguishable from the copy above it.

   Sized and toned like the other quiet metadata in this theme: the small
   preset and the comp's midnight mid-tint, the same pairing
   .vhc-offer-card__excerpt and .vhc-offer-card__link already use. The
   measure is narrowed too — fine print set to the full content width reads
   as body copy however small it is.

   Parent theme rather than scoped, because the class comes from the shared
   seeds and any property that grows a disclaimer should get the treatment.
   Only Santana Row has one today. */
.vhc-fine-print {
	color: #717b85;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.01em;
	line-height: 1.6;
	max-width: 62ch;
}

/* #23 (Meg): "add more space between top of images and body copy above".

   The dining grid's row-gap is 2rem, which is the right distance between one
   row of cards and the next — and it is the ONLY thing separating the intro
   from the cards on the three-outlet variant, where the intro spans the full
   width and the cards sit underneath it. Measured 32px between the bottom of
   the body copy and the top of the first photograph, which reads as one
   block rather than two.

   Doubled to the 50 step, the same distance .vhc-story__row puts between its
   collage and the text beneath it, so the page keeps one rhythm. Scoped to
   --three because on the two-outlet variant the intro sits BESIDE the cards
   and this gap never comes into play.

   Applied by count, not by property: inc/block-patterns.php adds --three to
   any hotel with more than two dining outlets, so a future property with
   three gets the same treatment. Santana Row is the only one today. */
.vhc-dine__layout--three {
	row-gap: var(--wp--preset--spacing--50);
}

/* #24 (Meg): "decrease width of text box headline" — the other half of that
   ticket, after the copy went from four sentences to one.

   Shortening it left "An iconic Santana Row setting." as a single line
   running the full 660px of its column, which is a long thin headline rather
   than a display one. A 20ch measure breaks it over two lines at the same
   size, so it reads as a statement and the column keeps its width for the
   body copy underneath.

   Scoped to the property: .vhc-intro-split__title is shared with Riverwalk
   and The George, whose titles are still full-length sentences that need the
   whole measure. is-hotel-santana-row comes from brand_roster_key — the same
   mechanism added for The George's #6 and #12. */
body.is-hotel-santana-row .vhc-intro-split__title {
	max-width: 20ch;
}

/* Santana Row — Courtney, BugHerd #38 (Wellness) and #40 (Meetings &
   Events): "Decrease in size" / "Decrease size of illustration."

   Both are the same element — the pillows and the vase illustrations sitting
   under the intro copy at the shared 225px. Scoped by the --sans variant
   rather than by page id, because those two pages are the only Santana
   intro-splits carrying an illustration (Explore uses the wider
   --illustration tier, Rooms & Suites has no image at all), and page ids
   would not survive a rebuild.

   170px is a visible step down without inventing a new tier between the
   225px default and the 120px stamp. If Courtney wants it smaller still,
   this is the one number to move. */
body.is-hotel-santana-row .vhc-intro-split--sans .vhc-intro-split__image img {
	width: min(170px, 100%);
}

/* Santana Row — BugHerd #251 (Emma): the Rooms & Suites intro "feels very
   blank" on desktop.

   The note above says Rooms & Suites carries no image; that stopped being
   true when the lamp (#27) was added, so it has been picking up the 170px
   above ever since. The left column holds only the headline, so the band's
   height is set by the lamp in the RIGHT column — 268px of drawing against
   a 718px-wide column with nothing under its heading, which is the dead
   space Emma pinned.

   Hunter, 2026-10-02: "make the illustration like 50% the size". 85px is
   half of 170, and pulls the band from 646px to roughly 510px.

   This CANNOT just change the 170 above: that rule also dresses Wellness
   and Meetings & Events, and Courtney asked for 170 on those two (#38,
   #40). Hence a Rooms-only variant, matched at the same specificity as the
   rule above and placed after it so it wins on order. */
body.is-hotel-santana-row .vhc-intro-split--sans .vhc-intro-split__image--small img {
	width: min(85px, 100%);
}

/* ─── Collection /about/ — BugHerd #136, #137, #138 ──────────────────────

   "The image is blocking the text making it hard to read", filed three times
   against the story timeline.

   It is not an occlusion bug: .vhc-timeline__copy already carries z-index 2
   and follows the photographs in the DOM, so the words render ON TOP. What
   the client is reporting is legibility — body copy sitting over busy
   photography.

   Measured at 1626, as a percentage of the stage, the copy column and the
   photographs that run underneath it:

     slide 3  copy 34.3–65.7%   photo 1 ends 40.0%   overlap 92x125px, 15% of the copy
     slide 4  copy 31.5–68.4%   photo 1 ends 36.2%   overlap 76x109px,  9%
     slide 5  copy 39.9–60.2%   photo 1 from 56.7%   overlap 56x115px, 11%
     slide 7  copy 30.3–69.7%   photo 1 from 66.0%   overlap 60x120px,  4%
                                photo 2 ends 34.5%   overlap  68x67px,  3%

   She offered "image selection or placement"; placement is the smaller and
   more controllable of the two, so each of these five slides its photograph
   just clear of the copy column and no further — 4 to 6% of the stage. The
   compositions keep their character; nothing is resized, re-tilted or
   reordered, and the drift and tilt values are untouched.

   Desktop only. The mobile positions (--mx / --my / --mw) stack the
   photographs above and below the copy rather than behind it, so they never
   had the problem.

   Slide 9 also measures an overlap — 27%, the largest on the page — and is
   deliberately left alone: that is the final slide, whose photograph scales
   to full bleed and becomes the page's hero. The text over it is the design.

   These override the comp positions further up the file rather than editing
   them, so the original Figma values stay readable in place and this is one
   block to revert if the designers would rather solve it with different
   photography. */
/* n3's old photo--1 (bench, this fix) is gone entirely (#134 follow-up,
   2026-09-29) — civvies inherits its own #211 overlap fix below, renamed
   to photo--1 along with it, rather than this one. */
.vhc-timeline__slide--n4 .vhc-timeline__photo--1 { --x: 16.3%; } /* was 21.5% */
.vhc-timeline__slide--n5 .vhc-timeline__photo--1 { --x: 60.6%; } /* was 56.7% */
.vhc-timeline__slide--n7 .vhc-timeline__photo--1 { --x: 70.1%; } /* was 66%   */
.vhc-timeline__slide--n7 .vhc-timeline__photo--2 { --x: 9.8%; }  /* was 14.3% */

/* Two more found while chasing BugHerd #211 (2026-09-28), "This image
   still blocking a bit of the text" — re-measured with each slide forced
   to --t: 0 (centered) via Lenis's own scrollTo, not eyeballed, since the
   screenshot alone doesn't say which of nine slides was active.

   Slide 3's photo--2 ("Back to Civvies Shop") is the one in her
   screenshot: photo--1 (bench) was fixed in the #136 pass above, but
   photo--2 was never touched and still ran 18x149px into the copy.

   Slide 2 (the founder portrait) wasn't the reported slide, but measured
   its own genuine, previously-unticketed overlap against its own copy —
   211x140px, the founder's portrait sitting 14% inside the "Our founder,
   Doyle Graham, Jr." text — so it's fixed here too rather than left for
   a second ticket. */
.vhc-timeline__slide--n2 .vhc-timeline__photo--1 { --x: 66.3%; } /* was 51.9% */
/* Renamed from photo--2 to photo--1 (2026-09-29) — civvies moved down a
   slot when bench was dropped; this fix belongs to the photo, not the
   number. */
.vhc-timeline__slide--n3 .vhc-timeline__photo--1 { --x: 65.2%; } /* was 63.7% */

/* ─── Scroll hero: the intro skipped (BugHerd #124) ──────────────────── */
/* Settings → Valencia → "skip the scroll intro" puts
   .has-scrollhero-static on the body, and the 300vh scroll sequence
   collapses to an ordinary full-bleed hero: loader → hero → brand video,
   which is the journey Emma asked for.

   Deliberately NOT inside the @supports (animation-timeline) /
   prefers-reduced-motion pair the enhancement lives in. This is the
   simpler layout, not an enhancement, so it has to hold in every browser
   and at every motion setting. Every selector here carries the body class
   as well, so it outranks the one-class rules inside those at-rules on
   specificity and does not depend on file order.

   What survives: the seed image's own 2.4s load-time reveal (it sits on
   the img, not the box, so killing the box's animation leaves it), the
   screen-reader h1, and nav.js's .is-past-hero brand handover. */
body.has-scrollhero-static .vhc-scrollhero {
	height: auto;
	view-timeline-name: none;
}

body.has-scrollhero-static .vhc-scrollhero__stage {
	height: 100vh;
	position: relative;
	top: auto;
}

/* The collage and the headline are what "disable it" means. They stay in
   the markup — the option is a render-time switch, not a content edit, so
   turning it back off must restore them with no re-seed. */
body.has-scrollhero-static .vhc-scrollhero__scatter,
body.has-scrollhero-static .vhc-scrollhero__copy {
	display: none;
}

/* Already scaled up: the box fills the stage outright rather than being
   transform-scaled to it, so the photo rasterises at its natural size
   instead of being blown up 3.3x from a 30vw tile. --seed-scale/-bottom/
   -center stop mattering here, which is why they are all overridden. */
body.has-scrollhero-static .vhc-scrollhero__seed {
	animation: none;
	bottom: auto;
	height: auto;
	inset: 0;
	width: auto;
}

/* Hunter, live: "let's make the hero immediately visible." The seed img's
   own 2.4s load-time reveal (animation-delay 1.3s — see its declaration
   above) was deliberately left running in static mode, on the reasoning
   that killing the box's grow animation leaves it as the one remaining
   entrance. Stacked after the loading screen's own several seconds, that
   reads as a second, separate wait rather than "immediately" — this is the
   one still-animated thing static mode was built to not have. Instant now;
   the loading screen itself (Emma's "loader → hero → brand video" journey,
   noted above) is untouched. */
body.has-scrollhero-static .vhc-scrollhero__seed-stack {
	animation: none;
	opacity: 1;
}

/* The lockup belongs to the full-bleed end state, and that state is now
   where the page starts — so it is simply visible. */
body.has-scrollhero-static .vhc-scrollhero__lockup {
	animation: none;
	opacity: 1;
	visibility: visible;
}

/* The header's fade-in was tied to the seed finishing its growth at 68%.
   With nothing to wait for, the bar is present from the first paint. It is
   transparent over the photo and gains its pearl ground past the hero
   because functions.php also puts .has-immersive-hero on these pages —
   that class already owns padding-top: 0 and the transparent bar for every
   other edge-to-top hero, so none of it is restated here. The brand inside
   the bar still waits for nav.js's .is-past-hero, which matters more in
   this mode, not less: the hero's own wordmark is on screen immediately, so
   the two logos would otherwise be visible together from the first paint. */
body.has-scrollhero-static .site-header {
	animation: none;
}

/* The brand handover, at every width rather than desktop only. In scroll
   mode the hero's wordmark lockup does not appear until the seed has
   finished growing at 68%, so on mobile — where the bar never hides — the
   two logos were only ever briefly adjacent, and the deferral above is
   gated to min-width: 782px. Static mode puts the lockup on screen at the
   first paint, so without this the header brand and the hero wordmark would
   sit on a 390px screen together, which is exactly what that deferral
   exists to prevent. nav.js already toggles .is-past-hero at every width
   (its comment notes nothing read it on mobile — now something does).
   Equal specificity to the desktop pair above, so this has to stay after
   it in the file. */
body.has-scrollhero-static .site-header:not(.is-past-hero) .site-header__brand {
	opacity: 0;
	transform: translateY(0.375rem);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s 0.35s;
	visibility: hidden;
}

body.has-scrollhero-static .site-header.is-past-hero .site-header__brand {
	opacity: 1;
	transform: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
	visibility: visible;
}

/* ─── Reserve panel: the submit is the primary action (BugHerd #145) ──── */
/* Emma's e-commerce team reported that the search sidebar "does not
   currently include a Book Now CTA". It did — the Reserve Now submit has
   always been there — but it was styled as a 10px underlined text link:
   background none, border 0, a 1px pearl underline, measuring 91x18 at her
   own 1370px window.

   Meanwhile .reserve-panel__manage, the SECONDARY action in the sticky foot
   ("Manage Reservations"), is a bordered 1px pearl button with 0.875rem
   padding. So the primary action looked weaker than the secondary one, which
   is a reliable way to make a CTA invisible — and it is why a team looking
   for a book button did not find one.

   Now the inverse of the foot's outline button: pearl filled, the same
   0.875rem/1.75rem padding so the two read as one family, and full width so
   it closes the form rather than trailing off it.

   The label is MIDNIGHT, not golden-hour. Gold ink on pearl measures 2.88:1,
   which fails WCAG AA for 10px text; midnight on pearl is 15.54:1. Filling
   the button with the panel's own gold and setting gold type on it would
   have looked tidy and been unreadable.

   The label stays "Reserve Now", not "Book Now" as the ticket words it: the
   tab is RESERVE, the panel is Reservations, and the foot says Manage
   Reservations. Flagged rather than silently renamed — it is one word if the
   client prefers their e-commerce vocabulary. */
.reserve-panel__submit {
	background: var(--wp--preset--color--pearl);
	border: 1px solid var(--wp--preset--color--pearl);
	color: var(--wp--preset--color--midnight);
	display: block;
	padding: 0.875rem 1.75rem;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	width: 100%;
}

.reserve-panel__submit:hover,
.reserve-panel__submit:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--midnight);
}

/* ─── Development: terra type on the light ground ─── BugHerd #55/#58/#59 ── */
/* Meg asked for #98320D — the brand's terra, already `--vd-terra` — in nine
   places on this board. Measured against each element's ACTUAL background the
   request splits in two, and only half of it is safe:

     on the light ground #EFE8DA   #98320D = 6.16:1   passes AA
     on the merlot band  #221106   #98320D = 2.43:1   fails AA, and fails
                                                      even the 3:1 large-text
                                                      floor

   These are the light-ground half. #13, #29's headline and #26's footer
   rollover are the merlot half and are deliberately NOT changed: each already
   carries the readable colour (pearl at 16.82:1, or the terra tint at
   6.92:1), so doing as asked would have made a headline and a footer link
   harder to read than they are now. Raised rather than shipped.

   Scoped to body.is-brand-development because .vhc-post__* and .vhc-contact__*
   are parent-theme classes the collection and the three hotels also render,
   and none of them share this palette. */
body.is-brand-development .vhc-post__back,
body.is-brand-development .vhc-post__title,
body.is-brand-development .vhc-contact__head,
body.is-brand-development .vhc-contact__lead {
	color: var(--vd-terra);
}

/* The back crumb's hover was ALREADY terra: it resolves
   --wp--preset--color--golden-hour, which this brand declares as #98320D. So
   turning the resting state terra for #55 would have left the link with no
   rollover at all. Hover goes darker instead — merlot on the light ground is
   13.9:1, and a rollover that darkens reads as one. */
body.is-brand-development .vhc-post__back:hover {
	color: var(--vd-merlot);
}

/* ─── Development spacing batch ─── BugHerd #12/#19/#25/#50/#51/#52 ─────── */
/* Every number below is a multiple of what was actually measured on staging,
   not an eyeballed nudge — "looks bigger" has been wrong on this project
   before, so the before-value is recorded next to each one. */

/* #19 — "Our track record" had 32px below it and 64px above (the band's
   padding-top). Matched to the 64px.

   Not gated to desktop like the three below it: it reuses the very token the
   band's padding is built from, so the two stay equal at every width and if
   that token is ever retuned. */
.vd-stat > .is-style-eyebrow {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Three of these six are gated to desktop, and the gate is load-bearing.
   Meg reviewed at 1317px, but a max-width written as `calc(100% - 9rem)`
   applies at every width: at 319px it would leave 175px of content. The
   theme already RAISES --vhc-band-gutter to 5rem below 782px for hotel-class
   bodies, and this site carries is-brand-hotel, so mobile has its own
   deliberate gutter that these must not stamp over. 782px is that same
   breakpoint. Her ten mobile tickets are a separate pass and can set narrow
   widths knowingly. */
@media (min-width: 782px) {

	/* #12 — the gap between the statement copy and the collage images is the
	   collage band's own padding-top (the statement above it is
	   .vd-statement--open, whose padding-bottom is 0, so nothing else
	   contributes). Measured 64px; tripled. */
	.vd-collage {
		padding-top: calc(var(--wp--preset--spacing--50) * 3);
	}

	/* #50 — the team list ran 24px from each edge. Tripled to 72px, so the
	   gutter total goes 3rem -> 9rem.

	   The selector has to be `.entry-content > .vd-team`, not `.vd-team`: the
	   width comes from the shared `.entry-content > .alignwide` rule at
	   (0,2,0), which a bare class would lose to wherever it sat in the file.
	   Equal specificity plus a later position is what makes this apply. */
	.entry-content > .vd-team {
		max-width: min(1380px, calc(100% - 9rem));
	}

	/* #25 — footer margins doubled, 24px a side to 48px. */
	.dev-footer__inner {
		max-width: min(1320px, calc(100% - 6rem));
	}
}

/* #51 — the bio paragraphs run on a 28px rhythm and then the LAST one sat
   flush against the next row's rule at 0px. Three times the paragraph rhythm
   gives the copy room to end before the line.

   Targets the last bio rather than adding padding to the row, because the
   row is a <details> and padding would also open a gap under every closed
   summary in the list. */
.vd-team__row > .vd-team__bio:last-child {
	margin-bottom: calc(28px * 3);
}

/* #52 — the team section met the footer across 54px (spacing-70). Doubled.
   .dev-footer is Development-only, so this is every page of this site and
   nothing beyond it. */
.dev-footer {
	margin-top: calc(var(--wp--preset--spacing--70) * 2);
}

/* #25, second half — the closing rule spans the page instead of stopping at
   the content, and reads terra.

   It moves off .dev-footer__colophon onto a full-width wrapper (the template
   now nests the colophon in .dev-footer__foot) rather than being faked with
   a 100vw pseudo-element: 100vw includes the scrollbar, which is how
   horizontal overflow gets introduced on this project.

   On the merlot footer #98320D measures 2.43:1. That is below AA for text,
   but this is a decorative divider rather than text or a control, so the
   text thresholds do not apply — flagged on the ticket rather than silently
   substituted. */
.dev-footer__foot {
	border-top: 1px solid var(--vd-terra);
}

.dev-footer__colophon {
	border-top: 0;
}

/* ─── Development crops ─── BugHerd #32 / #47 ───────────────────────────── */

/* #32 — the River Walk card cuts the group off at the calf.

   No new asset needed, unlike the other crops in this batch: card-portrait-2
   is 1200x1800 (0.667) inside a 403x494 frame (0.816), so `cover` is already
   discarding 110px vertically and object-position just chooses WHICH 110px.
   Bottom-aligning shows the group head to foot and still keeps the HOTEL
   VALENCIA sign in frame.

   The card's other slide is hotel-05, which is pre-cut to the frame's exact
   ratio — no overflow, so this is a no-op for it and the slider can be
   targeted as a whole (which also covers the clones Splide makes when it
   loops).

   Scoped to Development: card-portrait-2 is a shared collection asset and the
   collection's own /collection/ page must not move. nth-of-type(2) is
   positional — it follows valencia_collection_properties()' order, so if that
   registry is reordered this rule needs to move with it. */
body.is-brand-development .vhc-cgrid:not(.vhc-restaurant-grid) .vhc-cgrid-card:nth-of-type(2) .vhc-cgrid-card__slider img {
	object-position: 50% 100%;
}

/* #47, second half — "image should also top align with each other".

   They could not: the card titles are 37px on one line and 74px on two
   ("Sustainability & Stewardship" is the only two-liner in the row), so each
   image started wherever its own heading finished. Reserving two lines on
   every title puts them all on the same baseline.

   The px value is the fallback; `2lh` keeps it correct by construction if the
   type scale is ever retuned. */
.vd-values__title {
	min-height: 74px;
	min-height: 2lh;
}

/* #47, and the second cause of the same misalignment.

   Equalising the titles above got cards 2..5 level with each other but left
   card 1 twenty pixels HIGHER, which reads as one card out of line rather
   than as a stagger.

   The 20px is WordPress's, not ours. The markup is a flow-layout group, so
   core stamps `margin-block-start: var(--wp--style--block-gap)` on every
   child after the first; the theme then flips the row to `display: flex`,
   where that top margin becomes a vertical offset on every card except the
   first. Spacing between the cards is the flex `gap`, so the margin is pure
   residue.

   Core declares it inside :where(), which carries no specificity, so a plain
   class is enough to switch it off. */
.vd-values__card {
	margin-top: 0;
}

/* ─── Development mobile ─── BugHerd #61/#62/#64/#66/#67/#68/#69 ────────── */
/* Meg reviewed at 319x712. #63's scroller is up in the existing mobile block
   rather than here, because it had to replace rules that carried !important.
   #65 needed nothing — see the note at the end. */

/* #62 — no reserve button on this site at all.

   Not wrapped in the media query: she said "at all", and although the bar
   only ever shows below 782px this states the intent rather than relying on
   where it happens to appear. The header's INQUIRE tab is untouched — that
   one is in the comp and is this site's actual call to action; it is the
   floating booking bar, which belongs to a hotel rather than a development
   company, that goes. The reserve panel itself still has an opener. */
body.is-brand-development .vhc-reserve-bar {
	display: none;
}

@media (max-width: 782px) {

	/* #61 and #68 — body copy was running at the desktop 20px/27px on a
	   319px screen. One rule for both, on the shared body-copy group, so the
	   statement on the home page and the accordion copy on /services/ stay in
	   step instead of drifting to two different sizes. */
	.vd-statement__copy,
	.vd-centered__copy,
	.vd-stat__copy,
	.vd-acc__copy {
		font-size: 1.0625rem;
		line-height: 1.4;
	}

	/* #64 — the two paired photos were both full width and stacked flush.
	   Her screenshot keeps the desktop's stagger: the first wide and hanging
	   left, the second narrower and pushed right, with air between them.
	   Percentages are read off that screenshot — 74% and 53% of the page,
	   which inside this container's 1.5rem padding is 87% and 62%. */
	.vd-pair {
		row-gap: 1.5rem;
	}

	.vd-pair__a {
		margin-right: auto;
		width: 87%;
	}

	.vd-pair__b {
		margin-left: auto;
		width: 62%;
	}

	/* #66 — the hero was 179px on a 712px screen, a banner rather than a
	   hero. The cause is that the cover block writes `min-height:56vw`
	   INLINE, so the height tracks the viewport's WIDTH: 56vw is 738px on
	   Meg's 1317 desktop and collapses to 179px on a 319 phone. Nothing in a
	   stylesheet can outrank an inline style, which is why !important is
	   warranted here rather than lazy.

	   Switched to a share of the viewport's HEIGHT, which is what makes a
	   hero feel like one on a phone. svh follows, so browsers that support it
	   measure against the small viewport and the hero does not jump as the
	   address bar retracts. */
	.vd-hero {
		min-height: 60vh !important;
		min-height: 60svh !important;
	}

	/* #67 — the name and the job title shared a row, on different baselines
	   because their type sizes differ (22px against 12px). The title drops
	   under the name; the third column stays for the open/close marker. */
	.vd-team__row summary {
		align-items: start;
		gap: 0.25rem 1rem;
		grid-template-columns: 1fr 1.5rem;
	}

	.vd-team__row summary > .vd-team__name {
		grid-column: 1;
		grid-row: 1;
	}

	.vd-team__row summary > .vd-team__title {
		grid-column: 1;
		grid-row: 2;
		/* text-align: right belongs to the two-column layout, where the title
		   sat in its own right-hand column. Stacked under the name it has to
		   come back to the left or it reads as a stray caption. */
		text-align: left;
	}
}

/* #65 needed no change. "Image looking stretched" was real when she filed it
   on 2026-09-23 — .vhc-bcard--featured-large forces aspect-ratio 656/748 on
   a landscape photograph, and with no object-fit the initial value `fill`
   squeezes it. Riverwalk #139 added object-fit: cover to
   .vhc-bcard__media img on 2026-09-24, one day later, and that is shared
   parent-theme CSS, so this board inherited the fix. Verified rendered at
   319px, not just computed. */

/* ─── Development news + blog ─── BugHerd #24 / #53 ─────────────────────── */

/* #53 — the posts-page headline. It was rendering as the theme's default
   crumb: 19px Ortica Linear, uppercase, tracked, midnight. The comp sets it
   as a display headline in terra with the last word in the script face, so
   the uppercasing and the tracking both have to come off — they are what
   made it read as a label rather than a title.

   Scoped: .vhc-blog__title is shared, and the collection's Journal uses it
   with the tracked-caps treatment that is signed off there. */
body.is-brand-development .vhc-blog__title {
	color: var(--vd-terra);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	font-weight: 300;
	letter-spacing: 0.06em;
	line-height: 1.1;
}

/* The accent word, supplied by valencia_dev_blog_title_html(). The comp sets
   the words before it in tracked caps and this one in mixed-case script, so
   the uppercasing and the tracking are both undone here rather than removed
   from the heading — "IN THE News", not "In the News" or "IN THE NEWS". */
body.is-brand-development .vhc-blog__title em {
	font-family: var(--vhc-dev-font-script, var(--wp--preset--font-family--display));
	font-size: 1.12em;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* #53, second half — the category control is a boxed dropdown in the comp,
   not an underlined label. Same colour and type; the rule moves from the
   bottom edge to all four sides and the padding grows to suit. */
body.is-brand-development .vhc-blog__filter summary {
	border: 1px solid var(--vd-terra);
	border-radius: 0;
	padding: 0.625rem 0.875rem;
}

/* #24 — READ MORE under each home-page news teaser.

   Matches the CTA the comp uses on every teaser card: terra, tracked caps,
   with an arrow. The arrow is a pseudo-element so it is not read out as
   text, and it nudges right on hover the way the site's other arrow links
   do. */
.vd-news__more {
	align-items: center;
	color: var(--vd-terra);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	gap: 0.5rem;
	letter-spacing: 0.14em;
	margin-top: 1.25rem;
	text-decoration: none;
	text-transform: uppercase;
}

.vd-news__more::after {
	content: '→';
	transition: transform 0.25s ease;
}

.vd-news__more:hover::after {
	transform: translateX(0.25rem);
}

/* The teaser cards' Read More, brought into line with the one #24 adds to
   the home page. Not a ticket of its own: #24 introduced a tracked-caps CTA
   with an arrow on the home teasers, and leaving the blog cards on plain
   underlined text would have meant two different read-more treatments on one
   site, which is a worse result than either alone. The comp draws them the
   same. Scoped to Development — .vhc-bcard__link is shared with the
   collection's Journal, where the underlined style is signed off. */
body.is-brand-development .vhc-bcard__link {
	align-items: center;
	color: var(--vd-terra);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	gap: 0.5rem;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

body.is-brand-development .vhc-bcard__link::after {
	content: '→';
	transition: transform 0.25s ease;
}

body.is-brand-development .vhc-bcard__link:hover::after {
	transform: translateX(0.25rem);
}

/* ─── Development overlay navigation ─── BugHerd #28 ────────────────────── */
/* Figma 26:638. This is NOT the collection's overlay with the columns
   rearranged, which is how it was first read: there is no photograph in the
   overlay at all. It is a cream PANEL down the right-hand third, and the
   picture beside it is simply the page still showing through underneath.

   So the work is to stop the overlay being a full-bleed sheet: the backdrop
   goes transparent, the bar keeps its own merlot, and the body becomes the
   panel. */
body.is-brand-development .overlay-nav {
	background: transparent;
}

/* The bar carried no background of its own — it borrowed the sheet's pearl.
   With the sheet transparent it has to paint itself, and it matches the
   site header rather than the panel. */
body.is-brand-development .overlay-nav__bar {
	background: var(--vd-merlot);
	box-shadow: none;
}

/* The panel: right-hand third, full height under the bar, cream. The comp
   measures 338 of 1024, so a third; capped so it does not sprawl on a wide
   monitor. */
body.is-brand-development .overlay-nav__body {
	align-items: stretch;
	background: var(--vd-ground);
	/* The overlay's boxes are content-box, so the 3rem of padding below was
	   being ADDED to the width: 531px instead of 435 on desktop, and 438px
	   inside a 390px viewport on mobile — a horizontal overflow. Already a
	   known trap on this theme from the Court overlay work. */
	box-sizing: border-box;
	display: flex;
	flex: 1 0 auto;
	gap: 0;
	grid-template-columns: none;
	margin: 0 0 0 auto;
	padding: 4.5rem 3rem 3rem;
	width: min(33%, 460px);
}

body.is-brand-development .overlay-nav__menu {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* No photograph in this overlay — the one in the comp is the page behind. */
body.is-brand-development .overlay-nav__media {
	display: none;
}

/* The page you are on is underlined. `.is-current` and `aria-current` are
   both set by the template; the attribute drives the rule, since that is the
   one assistive tech reads. */
body.is-brand-development .overlay-nav__primary a[aria-current='page'] {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/* Manage Reservations is a hotel affordance. valencia_manage_reservations_url()
   returns the collection's booking engine for every site in the network, so
   this one was offering to change a reservation nobody made here. Same
   reasoning as the floating reserve bar in #62. */
body.is-brand-development .overlay-nav__manage {
	display: none;
}

/* The legal stack sits at the foot of the panel. */
.dev-overlay-legal {
	margin-top: auto;
	padding-top: 3rem;
}

.dev-overlay-legal__copy,
.dev-overlay-legal .menu a {
	color: var(--vd-terra);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 2;
	margin: 0;
	text-decoration: none;
	text-transform: uppercase;
}

.dev-overlay-legal .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dev-overlay-legal .menu a:hover {
	text-decoration: underline;
}

/* Below the panel's own width the split stops making sense — it becomes a
   full-width sheet, as the rest of the site's mobile chrome does. */
@media (max-width: 782px) {
	body.is-brand-development .overlay-nav {
		background: var(--vd-ground);
	}

	body.is-brand-development .overlay-nav__body {
		padding: 3rem 1.5rem 2rem;
		width: 100%;
	}
}

/* ─── Development collection filter ─── BugHerd #31 / #36 ───────────────── */
/* Figma 12080:1834. The eyebrow takes a row of its own; the Hotels /
   Restaurants pair and the grid/map toggle share the row beneath it. The
   shared bar is a single flex row, so this becomes a two-column grid here
   with the eyebrow spanning both. */
body.is-brand-development .vhc-cgrid__bar {
	align-items: end;
	column-gap: 1.5rem;
	display: grid;
	grid-template-columns: 1fr auto;
	row-gap: 0.375rem;
}

body.is-brand-development .vhc-cgrid__bar > .is-style-eyebrow {
	grid-column: 1 / -1;
	margin: 0;
}

.vhc-cgrid__filter {
	display: flex;
	gap: 2.25rem;
	grid-column: 1;
}

/* Ortica Linear Regular 14/19, tracking 0.28px — the frame's Subhead 2,
   mixed case, not the eyebrow's tracked caps. */
.vhc-cgrid__filter-btn {
	align-items: center;
	background: none;
	border: 0;
	color: var(--vd-tint);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	gap: 0.5rem;
	letter-spacing: 0.02em;
	line-height: 1.36;
	padding: 0;
}

/* The 9px ring the frame draws before each label. */
.vhc-cgrid__filter-btn::before {
	border: 1px solid currentColor;
	border-radius: 50%;
	content: '';
	height: 9px;
	width: 9px;
}

/* The frame draws both options in the tint with an empty ring, i.e. it shows
   no selected state at all — so this is an inference, flagged on the ticket:
   the ring fills and the label takes the full terra when chosen. It is what
   the marker is for, and it has the side effect of fixing the contrast on
   whichever option is active. The tint on this ground is 2.16:1, terra is
   6.16:1. */
.vhc-cgrid__filter-btn.is-active {
	color: var(--vd-terra);
}

.vhc-cgrid__filter-btn.is-active::before {
	background: currentColor;
}

.vhc-cgrid__filter-btn:hover {
	color: var(--vd-terra);
}

body.is-brand-development .vhc-cgrid__views {
	grid-column: 2;
}

@media (max-width: 782px) {
	body.is-brand-development .vhc-cgrid__bar {
		grid-template-columns: 1fr;
	}

	body.is-brand-development .vhc-cgrid__views {
		grid-column: 1;
		justify-self: start;
	}
}

/* BugHerd #16: the kicker sits above the band, ranged with the left edge of
   the main photograph — which the media column insets by 3rem. The comp
   leaves 49px between the cap line and the top of the photograph; 2.75rem
   plus the line box's descent is that. */
.vd-duo > .is-style-eyebrow {
	margin: 0 0 2.75rem;
	padding-left: 3rem;
}

/* BugHerd #16/#17: the two columns start at the top together now that the
   right one carries a photograph of its own; centring them left the copy
   floating against the middle of the main image. */
.vd-duo__row {
	align-items: flex-start;
}

/* BugHerd #17: the accent photograph keeps the 9.3vw drop it had when it sat
   beside the main image — the comp measures the same offset in its new place.
   It cannot be written on `.vd-duo__accent`, because as the text column's
   first child it now meets WordPress's global-styles reset
   `:root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }`,
   which is (0,2,0) and silently outranks a single class. */
.vd-duo .vd-duo__text > .vd-duo__accent {
	margin-top: 9.3vw;
}

/* BugHerd #20: "much smaller, so we can have a space between it and the text
   on the right". The image was 390px of a 390px column with 19px of air
   before the copy. Capping it inside its own column shrinks the picture and
   turns the remainder into that gap in one move — no column re-flow, so the
   numbers and the copy stay where they are. */
.vd-stat__media {
	max-width: 62%;
}

@media (max-width: 782px) {
	.vd-duo > .is-style-eyebrow {
		padding-left: 0;
	}

	.vd-duo__media {
		padding-left: 0;
	}

	/* Stacked, the main photograph has the column to itself, and the accent
	   no longer needs the drop that separated it from the main image. */
	.vd-duo__main {
		width: 100%;
	}

	.vd-duo .vd-duo__text > .vd-duo__accent {
		margin-top: 0;
	}

	/* Capped so the accent stays subordinate at tablet widths, where a flat
	   45% would come within 50px of the copy measure. */
	.vd-duo__accent {
		width: min(45%, 240px);
	}

	.vd-stat__media {
		max-width: none;
	}
}

/* ─── BugHerd #49 — the team list ──────────────────────────────────────
   Three separate asks on one ticket, all here rather than edited into the
   component rules above, so the file keeps reading in shipped order.

   The fourth ask — "wrong headline text style" — was the global eyebrow
   fault and went out in 0.75.0; "Our team" is Outfit Medium 12 already. */

/* The comp draws a rule UNDER each name and none above the first, so the
   list opens on the name rather than on a line. Every other rule stays:
   dropping the first border alone turns a set of top borders into exactly
   the set of separators the comp shows. */
.vd-team__rows .vd-team__row:first-child {
	border-top: 0;
}

/* "Double the space between Our Team and the first person listed." The
   eyebrow's 24px margin collapsed with the list's own 20px, so 24px was the
   whole gap; 48px doubles it. */
.vd-team > .is-style-eyebrow {
	margin-bottom: 3rem;
}

/* "Missing placeholder grey box where their headshots will eventually go
   upon hover." #D9D9D9 at 233x240, centred on the list and on the row being
   hovered — measured off the comp, where the list is 1505 wide, so the box
   is 15.5% of it.

   Absolutely positioned so it never enters the layout, and z-index because
   it is taller than its own row: without it the next row's border-top, being
   a later sibling, paints straight across the box. Pointer-events are off so
   the box cannot steal the hover that summons it and flicker. */
.vd-team__row summary {
	position: relative;
}

.vd-team__row summary::before {
	aspect-ratio: 233 / 240;
	background: #d9d9d9;
	content: '';
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.25s ease;
	width: clamp(160px, 15.5%, 240px);
	z-index: 2;
}

.vd-team__row summary:hover::before {
	opacity: 1;
}

@media (max-width: 782px) {
	/* No hover on a phone, and at this width the box would cover the name. */
	.vd-team__row summary::before {
		content: none;
	}
}

/* Found while rebuilding the strip for #48, not on a ticket: every card but
   the first sat 20px low. The row is a flex container but its children are
   still flow-layout blocks to WordPress, which gives each one
   `margin-block-start: 1.25rem` and then zeroes it on the first child alone.
   With five cards it was a slight stagger; with eight it is obvious.

   `:root :where(.is-layout-flow) > *` is only (0,1,0) — `:root` is a
   pseudo-class, not two — so a single class placed later would do. The
   descendant selector is here because the `> :first-child` half of the same
   pair IS (0,2,0), and it is better that both cards and every other child of
   a strip answer to one rule. */
.vd-strip__row > .vd-strip__card {
	margin-top: 0;
}

/* ─── BugHerd #48 — the property strip's scrub bar ─────────────────────
   The row already scrolled; the comp's control was what was missing. Built
   in script (assets/js/strip-scrub.js), which sets the thumb's width from
   the visible fraction of the row and its offset from scroll progress, so
   this only has to describe the two pieces.

   The comp draws the bar as a single 2px rule in terra at about 13% over the
   cream. That reads beautifully and says nothing about position, so the
   track takes that value and the thumb a darker one — the line still looks
   like the comp's line, and it now shows where you are in the row. */
.vd-strip__scrub {
	background: rgba(152, 50, 13, 0.13);
	height: 2px;
	margin: 3rem auto 0;
	position: relative;
	touch-action: none; /* let the pointer drag the thumb, not the page */
	width: min(480px, 60%);
}

.vd-strip__scrub-thumb {
	background: rgba(152, 50, 13, 0.45);
	inset-block: 0;
	left: 0;
	position: absolute;
	width: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.vd-strip__scrub-thumb {
		transition: left 0.12s linear;
	}
}

/* ─── BugHerd #21 — the track-record bands anchor and stack ────────────
   "Section should anchor and slide up over each other", with
   stateofaidesign.com as the reference. Sticky siblings do exactly that: each
   band pins under the header and the next one, painting later in document
   order, slides up and covers it. The stack is bounded by .vd-stats, so the
   last band releases at the end of the group and the page carries on.

   Two conditions have to hold or the effect breaks, and both already did:
   the bands are opaque (merlot, ground, orange), and nothing between them
   and the document root clips or transforms — a single `overflow: hidden`
   anywhere up the tree turns sticky back into static, silently.

   min-height is the real work. A pinned band shows below a shorter one that
   has slid over it, so unequal heights leave a strip of the previous colour
   hanging under the current band. Natural heights run 324-445 across every
   desktop width; 520 clears the tallest with room for the copy to grow.

   Phones are left alone: the reference behaviour is a desktop one, and
   stacking full-bleed colour blocks over each other on a small screen reads
   as a rendering fault rather than a transition. */
@media (min-width: 783px) {
	.vd-stats > .vd-stat {
		min-height: var(--vd-stat-band);
		position: sticky;
		top: var(--valencia-header-height, 48px);
	}

	/* The last band had nowhere to pin. A sticky element is held inside its
	   parent's padding box, and the last band already ended at that edge, so
	   it had zero travel and simply scrolled away while the next section
	   pushed up beneath it — the one transition in the sequence that did not
	   read as a stack.

	   One band's worth of room below it gives it that travel, and the
	   following section is pulled up by exactly the same amount, so it begins
	   where the last band's own box ends and rides over it. The page is no
	   taller than before: what the group gains, the next section's negative
	   margin gives back.

	   It has to be a spacer and not padding. A sticky box is held inside its
	   containing block's CONTENT box, which padding sits outside of, so
	   padding-bottom here made the group 520px taller and moved the last band
	   not at all. A pseudo-element is content, so it does extend the box — and
	   a child's own bottom margin would not, because the same margin is
	   subtracted from the constraint rectangle again. */
	.vd-stats::after {
		content: '';
		display: block;
		height: var(--vd-stat-band);
	}

	.vd-stats + * {
		margin-top: calc(var(--vd-stat-band) * -1);
		/* Sticky is positioned, so it paints above ordinary blocks however
		   late they come. The cover has to be positioned too, and after. */
		position: relative;
		z-index: 1;
	}

	/* …and opaque, or the band shows straight through it. A section that
	   already carries a band colour has its own; one that doesn't takes the
	   body's ground — the texture and the blend as well as the colour, so
	   that covering the band doesn't quietly drop the paper grain out of a
	   whole section. */
	.vd-stats + :not(.vd-band) {
		background-blend-mode: multiply;
		background-color: var(--vd-ground);
		background-image: url('assets/images/skeleton/vd-texture.jpg');
		background-position: center top;
		background-repeat: repeat;
		background-size: 1000px auto;
	}
}

/* ─── BugHerd #41 — the Hotel Development slides anchor and stack ──────
   Same mechanism as #21's .vd-stats above, for a different component: the
   feature-split band now takes N slides (valencia_dev_feature_stack_content)
   and each one pins under the header, painting later in document order so
   it slides up and covers the one before it. Every slide is forced merlot
   (opaque), so the stack needs no per-slide background fallback the way
   .vd-stats' merlot/ground/orange mix did. */
@media (min-width: 783px) {
	.vd-feature-slides > .vd-feature {
		min-height: var(--vd-feature-band);
		position: sticky;
		top: var(--valencia-header-height, 48px);
	}

	.vd-feature-slides::after {
		content: '';
		display: block;
		height: var(--vd-feature-band);
	}

	.vd-feature-slides + * {
		margin-top: calc(var(--vd-feature-band) * -1);
		position: relative;
		z-index: 1;
	}

	.vd-feature-slides + :not(.vd-band) {
		background-blend-mode: multiply;
		background-color: var(--vd-ground);
		background-image: url('assets/images/skeleton/vd-texture.jpg');
		background-position: center top;
		background-repeat: repeat;
		background-size: 1000px auto;
	}
}

/* ─── BugHerd #60 — the contact form's spacing ─────────────────────────
   Two of the ticket's three asks. The colour is still with Meg: #DA8C70 is
   2.16:1 on this ground and the grey it would replace is 2.86:1, so both
   fail AA and the answer is neither of them.

   "Triple the margins left and right of the entire page." The copy block
   above the form is already inset 170; the form was taking the default wide
   measure and running to 24px of the edge, which is the mismatch that reads
   as no margin at all. 9rem of gutter is what #50 gave the team list, so the
   two pages now agree — and, like #50, only above 783px: 9rem of a 390px
   screen is 144px of gutter and a 246px form. */
@media (min-width: 783px) {
	body.is-brand-development .entry-content > .vhc-gform {
		max-width: min(1380px, calc(100% - 9rem));
	}
}

/* "Bump the text closer to the rule below it." The gap is the label's margin
   plus the whole height of the field, since the rule is the input's own
   bottom border — those are the only two levers. Together they took the
   label 48px above the rule; 4 + 29 makes it 33.

   The field's height is left alone below 783px. Shrinking a text input to
   29px is comfortable with a mouse and mean with a thumb, and the review
   this came from was at 1317. */
body.is-brand-development .vhc-gform .gform_wrapper .gfield_label {
	margin-bottom: 0.25rem;
}

@media (min-width: 783px) {
	body.is-brand-development .vhc-gform .gform_wrapper input[type='text'],
	body.is-brand-development .vhc-gform .gform_wrapper input[type='email'],
	body.is-brand-development .vhc-gform .gform_wrapper input[type='tel'],
	body.is-brand-development .vhc-gform .gform_wrapper select {
		height: auto !important;
		line-height: 1.25 !important;
		padding: 0 0 0.5rem !important;
	}
}

/* ─── BugHerd #14 — the collection collage scrolls ─────────────────────
   Opt-in variant of the collage. The static five-photograph version is
   untouched, because /services/ uses it as a design gallery with one
   property captioned beneath.

   The photographs sit in a snapping scroller with half the row's width of
   padding each side, so the first and last can reach the middle — without
   that, the frame the caption follows is unreachable at both ends.
   assets/js/collage-scroll.js scales each one by its distance from that
   centre, with a transform rather than a width: changing widths mid-scroll
   changes scrollWidth, which moves the scroll position, which re-runs the
   sizing. The transition is short enough to feel like the photograph is
   tracking the scroll rather than lagging behind it. */
.vd-collage--carousel {
	overflow: hidden;
	padding-bottom: var(--wp--preset--spacing--60);
}

.vd-collage--carousel .vd-collage__row {
	align-items: center;
	gap: 2.3vw;
	justify-content: flex-start;
	overflow-x: auto;
	padding: 2vw max(50% - 13.35vw, 1.5rem);
	scroll-padding-inline: max(50% - 13.35vw, 1.5rem);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.vd-collage--carousel .vd-collage__row::-webkit-scrollbar {
	display: none;
}

/* The scrollbar is hidden, so a mouse needs the drag affordance spelled
   out (collage-scroll.js adds drag / click-to-centre / wheel). */
.vd-collage--carousel.is-live .vd-collage__row {
	cursor: grab;
}

.vd-collage--carousel.is-live .vd-collage__row:active {
	cursor: grabbing;
}

.vd-collage--carousel .vd-collage__photo--slide {
	flex: none;
	scroll-snap-align: center;
	transform-origin: center center;
	transition: transform 0.18s ease-out;
	width: min(26.7vw, 385px);
}

/* ─── The roster stage (home) ──────────────────────────────────────────
   Hunter, 2026-10-04: converted from the scroll-snap row to the standard
   .vhc-slider--stage centered loop for consistency with the collection's
   sliders. Each slide carries its own caption; the centre slide shows it
   and stands full size, the peeks step down. */
.vd-collage--stage {
	/* The injected pager and count read --section-accent (the hotel rooms
	   dress); give it the band's own accent. */
	--section-accent: var(--vd-terra);
	padding: 4rem 0 3rem;
}

.vd-band--merlot.vd-collage--stage {
	--section-accent: var(--vd-tint);
}

.vd-stage .splide__track {
	overflow: hidden;
}

/* The width must sit on the li itself: the parent carousel bundle's base
   rule (.vhc-slider.is-enhanced .splide__slide, min(316px, 78vw)) outranks
   anything on the inner group — same trio of selectors the Court rooms
   stage uses for exactly this reason. */
.vd-stage .splide__slide,
.vhc-slider.is-enhanced.vd-stage .splide__slide,
.vd-stage .vhc-slider__row > .vd-stage__slide {
	flex: none;
	width: min(26.7vw, 385px);
}

.vd-stage .vd-collage__photo--slide {
	margin: 0;
	transform: scale(0.82);
	transform-origin: center center;
	transition: transform 0.45s ease;
}

.vd-stage .vd-collage__photo--slide img {
	aspect-ratio: 385 / 484;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vd-stage .splide__slide.is-active .vd-collage__photo--slide {
	transform: scale(1);
}

.vd-stage .vd-collage__caption {
	margin-top: 1rem;
	max-width: none;
	opacity: 0;
	padding-left: 0;
	text-align: center;
	transition: opacity 0.3s ease;
}

.vd-stage .splide__slide.is-active .vd-collage__caption {
	opacity: 1;
}

.vd-stage__pager {
	display: flex;
	gap: 1.25rem;
	justify-content: center;
	margin-top: 1.5rem;
}

@media (max-width: 782px) {
	.vd-stage .splide__slide,
	.vhc-slider.is-enhanced.vd-stage .splide__slide,
	.vd-stage .vhc-slider__row > .vd-stage__slide {
		width: 70vw;
	}
}

.vd-collage--carousel .vd-collage__photo--slide img {
	aspect-ratio: 385 / 484;
}

/* The caption is centred under the frame rather than ranged under the middle
   photograph's left edge, because in this version the frame is the fixed
   thing and the photographs move through it. */
.vd-collage--carousel .vd-collage__caption {
	padding-left: 0;
	text-align: center;
}

@media (max-width: 782px) {
	/* One photograph at a time, and the frame is the screen. */
	.vd-collage--carousel .vd-collage__row {
		gap: 1rem;
		padding: 1rem max(50% - 35vw, 1rem);
		scroll-padding-inline: max(50% - 35vw, 1rem);
	}

	.vd-collage--carousel .vd-collage__photo--slide {
		width: 70vw;
	}
}

/* ─── The colour call — #13 / #26 / #29 / #60 ──────────────────────────
   Hunter, 2026-09-26: "Use the accent in the form that suits the ground:
   tint on merlot, terra on cream."

   The two are each other's inverse. Terra is the light-ground accent —
   6.16:1 on the cream, 2.43:1 on the merlot. The tint is the dark-ground one
   — 6.92:1 on the merlot, 2.16:1 on the cream. All four tickets asked for
   the wrong half of the pair for the ground they land on, in both
   directions, and so did two rules already in this file. */

/* Live failures, not on any ticket: both of these were terra on merlot at
   2.43:1 — "Hotel Development" and "Hospitality Management Services", two of
   the larger headings on /services/, effectively unreadable. They were
   already meant to be the accent; they just had the wrong half of it. */
.vd-band--merlot .vd-feature__kicker,
.vd-band--merlot .vd-acc__title {
	color: var(--vd-tint);
}

/* #29, the colour half — the /collection/ statement headline into the
   accent, at 6.92:1 rather than the 2.39:1 her comp draws it at.

   Scoped away from the home page's statement deliberately. The two look like
   the same component, but #29's comp puts this one in the accent and #10's
   comp keeps the home one in pearl, so they really do differ. `--open` is a
   spacing modifier that only the home band carries, which makes it the one
   structural thing telling them apart; if a third merlot statement ever
   appears this needs a real modifier instead of a spacing one. */
.vd-band--merlot:not(.vd-statement--open) .vd-statement__head {
	color: var(--vd-tint);
}

/* #60, the colour half — the form labels were a grey at 2.68:1, and the tint
   Meg asked for would have been 2.16:1. Terra is the cream ground's accent
   and reaches 6.16:1. */
body.is-brand-development .vhc-gform .gform_wrapper .gfield_label {
	color: var(--vd-terra);
}

/* Not on a ticket, and the same inversion already shipped: INQUIRE rests at
   terra, 6.16:1, and hovered to the tint at 2.16:1 — the rollover was less
   readable than the resting state on every page. Terra is already the rest
   state, so the hover cannot also be the accent; it darkens to the merlot
   instead, which is unambiguous against the cream and keeps the tab's
   borderless treatment. */
body.is-brand-development .site-header__reserve:hover {
	color: var(--vd-merlot);
}

/* Capacity chart (BugHerd #407/#431/#434). The chart is core blocks in the
   page so it stays editable and readable without JavaScript; capacity-modal.js
   moves it into a <dialog> and the venue links open that instead (Hunter:
   parked at the foot of the page "seems odd").

   Until that script runs — and if it never does — the section sits in the
   page as an ordinary band, so the anchors still work. The scroll margin is
   for that case: the header is sticky, and without it the jump hides the
   table's own heading underneath it. */
.vhc-capacity {
	scroll-margin-top: calc(var(--valencia-header-height, 48px) + 2.5rem);
}

/* Once the chart is inside the dialog it is no longer a page band, so it
   drops the band's own spacing. Scoped to the html flag the script sets, so
   nothing moves for a visitor whose JavaScript failed. */
.vhc-has-capacity-dialog .vhc-capacity {
	margin: 0;
	padding: 0;
}

.vhc-capacity-dialog {
	background: var(--wp--preset--color--pearl, #fcf9ea);
	border: 0;
	border-radius: 2px;
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.3);
	color: inherit;
	max-height: min(86vh, 48rem);
	max-width: min(64rem, calc(100vw - 2rem));
	padding: clamp(1.5rem, 4vw, 3rem);
	position: relative;
	width: 100%;
}

.vhc-capacity-dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.vhc-capacity-dialog__close {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
}

.vhc-capacity-dialog__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The capacity link was written as an inline run-on after the spec value,
   with a left margin to hold it off the text — .cc-venues__spec-value a at
   0.75rem on the Courts, .vhc-venues__spec-value a at 1.5rem on the hotels.
   On its own line that margin reads as a stray indent (Hunter, 2026-10-01).

   Scoped by href rather than by a class because that is the same hook
   capacity-modal.js uses, so the link has one contract rather than two. The
   attribute selector also outranks the inline rules above on specificity,
   so this holds wherever the child theme's sheet lands in the order. */
.cc-venues__spec-value a[href="#capacity"],
.vhc-venues__spec-value a[href="#capacity"] {
	display: block;
	margin-left: 0;
	margin-top: 0.5rem;
	width: -moz-fit-content;
	width: fit-content;
}

/* The core stripe grey is a cold #f0f0f0, which fights the pearl panel and
   every brand's warm ground. Tint from the text colour instead so each
   property's own palette carries it. */
.vhc-capacity-dialog .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: rgba(0, 0, 0, 0.045);
}

/* The chart was a page band, so its last child still carries the band's
   bottom margin — inside the dialog that reads as a dead strip. */
.vhc-capacity-dialog .vhc-capacity > :last-child,
.vhc-capacity-dialog .vhc-capacity figure:last-child {
	margin-bottom: 0;
}

/* The grid is wide; let it scroll on its own rather than widening the page. */
.vhc-capacity__table {
	overflow-x: auto;
}

.vhc-capacity__table table {
	min-width: 40rem;
}

/* River Walk's chart carries the client's own footnote about the AV
   set-up the numbers assume. It qualifies the grid, so it sits quieter
   than it. */
.vhc-capacity__note {
	font-size: 0.8125rem;
	margin-top: 1rem;
	opacity: 0.75;
}

/* ------------------------------------------------------------------
   The MeetingBroker / Galaxy RFP embed — BugHerd #563.

   The frame is cross-origin and the widget never posts its height, so
   there is no auto-resize to be had: the height is a fixed constant.
   Measured with bin/rfp-frame-height.js and worst-case.js against the
   live widget, at the frame widths our band gives it (viewport −48px):

                      resting   +conditionals   +validation
     frame 1380         3262         3427          3726
     frame 1000         3460         3625          3953   <- the spike
     frame  960         3176         3336          3628
     frame  900         3230         3390          3682
     frame  800         3287         3448          3740
     frame  768         3338         3498          3790   <- wide worst
     frame  720         4089         4407          4761   <- stacks here
     frame  382         4168         4486          4840
     frame  342         4288         4606          4960   <- tall worst
     frame  312         4288         4606          4960

   Three things a first guess got wrong, all of them only visible by
   measuring:

   1. The widget breaks at 768px of FRAME width, not viewport, and
      stacking adds ~750px. Our frame crosses 768 at a viewport near
      816 — nowhere near the theme's usual 48em — hence the 53em split.
   2. The wide layout is not monotonic: frame 1024 (3460) is taller than
      both 976 (3147) and 1380 (3262), so the ceiling cannot be read off
      the widest frame.
   3. Resting height is not the ceiling. The yes/no controls reveal
      extra fields (+318px), and a failed submit adds an inline message
      under every required field (+354px). Together that is up to 672px
      more than resting — which is why 112px of headroom was nowhere
      near enough.

   WHAT THESE VALUES COVER, deliberately: resting + every conditional
   expanded, but NOT a failed submit. Sizing for the full 4960 ceiling
   would leave 672px of dead white space below the form on every mobile
   visit for the sake of the people who mis-submit; sizing for resting
   alone would put a nested scrollbar in front of anyone who asks for
   guestrooms, which is most enquiries. This is the middle: no scrollbar
   on any normal path, and a short internal scroll only after a
   validation failure — where the messages are inline beside the fields
   that are already on screen.

   The frame is left scrollable on purpose, so that overflow degrades to
   a scroll rather than a clipped submit button. If the client reports a
   scrollbar, the ceiling values above are the ones to move to.
   ------------------------------------------------------------------ */
.vhc-rfp-embed {
	/* Stacked: 4606 measured (resting 4288 + conditionals) + buffer. */
	--vhc-rfp-frame-height: 4640px;
	width: 100%;
}

.vhc-rfp-embed__frame {
	border: 0;
	display: block;
	height: var(--vhc-rfp-frame-height);
	width: 100%;
	/* The widget lays its fields out in a CENTRED 570px column however
	   wide the frame is, so every pixel past about 960 is white space we
	   chose to hand it — measured at a 1380px frame, 810px of the card
	   was empty. Capping it also dodges a height spike: the widget is
	   3176px tall at a 960px frame and 3460px at 1000px.

	   The widget's own body paints opaque white (its #db-app wrapper
	   too), so this cannot be made to sit on the band's cream from here
	   — that is one of the --db_* tokens their TravelClick admin sets.
	   The background below only stops a flash of the band colour while
	   the frame loads. */
	background: #fff;
	margin-inline: auto;
	max-width: 960px;
}

/* Their chrome owns the only error reporting inside the frame, which on
   a form this tall can be far off screen. The escape hatch is quiet
   until it is needed. */
.vhc-rfp-embed__fallback {
	font-size: 0.8125rem;
	margin: 0.75rem 0 0;
	opacity: 0.7;
	text-align: center;
}

/* Wide: with the frame capped at 960px the range to cover is 768-960,
   whose tallest expanded state is 3498 at frame 768. Plus buffer. */
@media (min-width: 53em) {
	.vhc-rfp-embed {
		--vhc-rfp-frame-height: 3540px;
	}
}

/* Cookie notice ---------------------------------------------------------- */
.vhc-cookie-notice {
	position: fixed;
	z-index: 140;
	left: 1rem;
	right: 1rem;
	bottom: calc(var(--valencia-reserve-bar-height, 0px) + 1rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	max-width: 720px;
	margin-inline: auto;
	padding: 1rem 1.25rem;
	/* Per-brand: restaurant footer presets, then Court band, then the hotel
	   band slots, then the collection's midnight/pearl. --vhc-cookie-bg/-ink
	   remain as explicit per-site overrides. */
	background: var(--vhc-cookie-bg, var(--wp--preset--color--footer-bg, var(--court-band, var(--vhc-hotel-band, var(--wp--preset--color--midnight, #1c2420)))));
	color: var(--vhc-cookie-ink, var(--wp--preset--color--footer-ink, var(--vhc-hotel-on-band, var(--wp--preset--color--pearl, #f4efe6))));
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.vhc-cookie-notice[hidden] {
	display: none;
}
.vhc-cookie-notice p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	max-width: 46ch;
}
.vhc-cookie-notice a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.vhc-cookie-notice__accept {
	flex: none;
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
	padding: 0.55rem 1.4rem;
	font: inherit;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}
.vhc-cookie-notice__accept:hover,
.vhc-cookie-notice__accept:focus-visible {
	background: var(--vhc-cookie-ink, var(--wp--preset--color--footer-ink, var(--vhc-hotel-on-band, var(--wp--preset--color--pearl, #f4efe6))));
	color: var(--vhc-cookie-bg, var(--wp--preset--color--footer-bg, var(--court-band, var(--vhc-hotel-band, var(--wp--preset--color--midnight, #1c2420)))));
}
@media (max-width: 600px) {
	.vhc-cookie-notice {
		left: 0.75rem;
		right: 0.75rem;
		bottom: calc(var(--valencia-reserve-bar-height, 0px) + 0.75rem);
	}
}