/* wordmark.css is enqueued separately in functions.php (versioned) so its
   cache busts with YREC_HUB_VERSION — an @import here would not be. */

/* YREC Hub — Theme Styles v3.0.0
 * Slate & Marigold — Navy / Marigold / Cream / Ink · Geist
 * Canonical token spec: Design_Reference/BUILD-GUIDE.md §2–§4.
 * Never hardcode hex values in components — only #fff is acceptable.
 * ------------------------------------------------ */

/* === Root tokens (mirror theme.json palette + semantic aliases) ===
 *
 * Tint patterns (BUILD-GUIDE §2):
 *   rgba(22,32,43,0.06)  → card border on cream                 → --yh-tint-card-border
 *   rgba(22,32,43,0.10)  → ghost button border / input border   → --yh-tint-input-border
 *   rgba(22,32,43,0.18)  → stronger input border (focused base) → --yh-tint-input-strong
 *   rgba(22,32,43,0.60)  → secondary text on cream              → --yh-tint-secondary
 *   rgba(22,32,43,0.70)  → secondary text on cream (stronger)   → --yh-tint-secondary-strong
 *   rgba(255,255,255,0.18) → divider on dark sections           → --yh-tint-divider-dark
 *   rgba(255,255,255,0.65–0.85) → secondary text on dark        → --yh-tint-secondary-dark
 *
 * Semantic aliases (BUILD-GUIDE §2): --error reuses orange, --success reuses
 * navy. Differentiate by CONTEXT (inline form vs CTA pill) — they never sit
 * side-by-side. Do not introduce a separate red.
 */
:root {
	/* Base palette — mirrors theme.json palette slugs as solid hex.
	 * Use these (or `var(--wp--preset--color--<slug>)`) for editor parity.
	 * If you need a translucent ink overlay, use `--yh-tint-*` (below).
	 */
	--yh-navy:         #1C3D5A;
	--yh-navy-deep:    #14304A;
	--yh-orange:       #FF8A3D;
	--yh-orange-hover: #E8762A;
	--yh-cream:        #F6F1E8;
	--yh-cream-alt:    #EFE8DB;
	--yh-ink:          #16202B;
	--yh-ink-muted:    #4A5561;  /* aligned with theme.json (was rgba) */
	--yh-ink-soft:     #7A828C;  /* aligned with theme.json (was rgba) */
	--yh-border:       #DDD6C8;  /* aligned with theme.json (was rgba) */
	--yh-border-dark:  #2C3A48;  /* matches theme.json slug `border-dark` */
	/* Legacy aliases retained for transitional compat — DEPRECATED.
	 * `--yh-border-strong` was the cool ink-tint border; if you need that
	 * effect now, use `--yh-tint-input-strong`. */
	--yh-border-strong: var(--yh-tint-input-strong);

	/* Tint stops — derive from base, never new hex */
	--yh-tint-card-border:     rgba(22, 32, 43, 0.06);
	--yh-tint-input-border:    rgba(22, 32, 43, 0.10);
	--yh-tint-input-strong:    rgba(22, 32, 43, 0.18);
	--yh-tint-secondary:       rgba(22, 32, 43, 0.60);
	--yh-tint-secondary-strong:rgba(22, 32, 43, 0.70);
	--yh-tint-divider-dark:    rgba(255, 255, 255, 0.18);
	--yh-tint-secondary-dark:  rgba(255, 255, 255, 0.75);

	/* Semantic aliases */
	--yh-error:       var(--yh-orange);
	--yh-error-bg:    rgba(255, 138, 61, 0.06);
	--yh-warn-bg:     rgba(255, 138, 61, 0.10);
	--yh-success:     var(--yh-navy);
	--yh-success-bg:  rgba(28, 61, 90, 0.06);
	--yh-info-bg:     rgba(28, 61, 90, 0.06);

	/* Lift shadow (BUILD-GUIDE §11 — the ONLY shadow allowed) */
	--yh-shadow-lift: 0 20px 40px -20px rgba(22, 32, 43, 0.25);
	--yh-shadow-card: 0 2px 6px rgba(22, 32, 43, 0.04);

	/* Radii */
	--yh-radius-card:    14px;
	--yh-radius-card-lg: 16px;
	--yh-radius-cta:     24px;
	--yh-radius-pill:    999px;

	/* Motion */
	--yh-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Base === */
html { scroll-behavior: smooth; }

*, *::before, *::after { box-sizing: border-box; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'ss01', 'cv11';
}

::selection {
	background: var(--yh-orange);
	color: #fff;
}

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

em {
	font-family: 'Inter Tight', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
	font-style: italic;
}


/* === Button system (BUILD-GUIDE §5 #button) ===
 * Three variants — primary (orange pill), ghost (cream/transparent + border),
 * light (white on dark). 14px×22px padding, 999px radius, Geist 500/15px.
 * Use these classes on plain <a> / <button> outside the WP Buttons block.
 */
.yh-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.yh-btn--primary {
	background: var(--yh-orange);
	color: #fff;
}
.yh-btn--primary:hover { background: var(--yh-orange-hover); }
.yh-btn--primary:focus-visible {
	outline: 2px solid var(--yh-navy);
	outline-offset: 2px;
}
.yh-btn--ghost {
	background: transparent;
	color: var(--yh-ink);
	border-color: var(--yh-tint-input-border);
}
.yh-btn--ghost:hover { border-color: var(--yh-border-strong); }
.yh-btn--light {
	background: #fff;
	color: var(--yh-ink);
	border-color: var(--yh-tint-input-border);
}
.yh-btn--on-dark {
	background: #fff;
	color: var(--yh-ink);
}
.yh-btn:disabled,
.yh-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}
.yh-btn--icon-only {
	padding: 12px;
	border-radius: 999px;
}


/* === Eyebrow on-orange modifier === */
.yh-eyebrow--orange { color: var(--yh-orange); }
.yh-eyebrow--orange::before { background: var(--yh-orange); opacity: 0.8; }


/* === Two-column info section (Contact + others) === */
.yh-twocol {
	padding: 96px 40px;
}
.yh-twocol__grid {
	display: grid;
	gap: 60px;
	grid-template-columns: 1fr 1fr;
	max-width: 1360px;
	margin: 0 auto;
}
.yh-twocol__col h2 {
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 500;
	letter-spacing: -0.025em;
	margin: 0 0 16px;
	color: var(--yh-ink);
}
.yh-twocol__col p,
.yh-twocol__copy p {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--yh-tint-secondary-strong);
	margin: 0 0 14px;
}
.yh-twocol__col ul {
	list-style: none;
	margin: 8px 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.yh-twocol__col ul li {
	font-size: 14.5px;
	color: var(--yh-ink);
	padding: 4px 0;
	border-bottom: 1px solid var(--yh-tint-card-border);
}
.yh-twocol__col ul li:last-child { border-bottom: none; }
.yh-twocol__highlight {
	margin: 12px 0 18px !important;
	font-size: 13.5px !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--yh-orange) !important;
	font-weight: 500;
}
.yh-twocol__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.yh-twocol__col > * { width: 100%; }
.yh-twocol__btn {
	width: auto !important;
	max-width: max-content;
	min-width: 0 !important;
	height: auto !important;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	background: var(--yh-orange);
	color: #fff !important;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
	border: none;
}
.yh-twocol__btn:hover { background: var(--yh-orange-hover); }
@media (max-width: 880px) {
	.yh-twocol { padding: 64px 24px; }
	.yh-twocol__grid { grid-template-columns: 1fr; gap: 40px; }
}


/* === Featured-stories callout (Community archive → Success Stories) === */
.yh-featured-stories-callout {
	background: var(--yh-cream-alt);
	border-radius: 24px;
	padding: 36px 48px;
	gap: 24px !important;
}
.yh-featured-stories-callout h2 {
	font-size: clamp(24px, 2.4vw, 32px);
	margin: 6px 0 0;
	max-width: 640px;
}
.yh-featured-stories-callout .yh-eyebrow { margin-bottom: 4px; }
@media (max-width: 720px) {
	.yh-featured-stories-callout { padding: 28px 24px; }
}


/* === Filter pills (BUILD-GUIDE #filter) ===
 * Anchor or button pills used above grids on Services / Community /
 * Resources / News archives.
 */
.yh-services-by-category__pills,
.yh-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 40px;
}
.yh-filter-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid var(--yh-tint-input-border);
	border-radius: 999px;
	font-size: 13.5px;
	color: var(--yh-ink);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.yh-filter-pill:hover { border-color: var(--yh-border-strong); }
.yh-filter-pill.is-active,
.yh-filter-pill[aria-current="true"] {
	background: var(--yh-navy);
	color: #fff;
	border-color: var(--yh-navy);
}


/* === Checkout Success page (post-Stripe welcome) ===
 * Rendered by yrec-membership at /yrec/checkout-success/ after a successful
 * Stripe redirect. Matches Design_Reference Option 1 — System Surfaces §05.
 */
.yh-checkout-success__hero {
	background: var(--yh-cream);
	padding: 100px 40px 120px;
	position: relative;
	overflow: hidden;
}
.yh-checkout-success__glow {
	position: absolute;
	top: -120px;
	left: -120px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 138, 61, 0.16), transparent 70%);
	pointer-events: none;
}
.yh-checkout-success__wrap {
	max-width: 880px;
	margin: 0 auto;
	position: relative;
}
.yh-checkout-success__tick {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--yh-orange);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32px;
}
.yh-checkout-success__title {
	font-family: var(--wp--preset--font-family--geist);
	font-size: clamp(48px, 6vw, 88px);
	font-weight: 500;
	letter-spacing: -0.032em;
	line-height: 0.98;
	margin: 14px 0 0;
	color: var(--yh-ink);
}
.yh-checkout-success__title em {
	font-style: italic;
	color: var(--yh-orange);
}
.yh-checkout-success__lede {
	font-size: 19px;
	color: var(--yh-tint-secondary-strong);
	max-width: 560px;
	line-height: 1.55;
	margin: 22px 0 0;
}
.yh-checkout-success__steps {
	list-style: none;
	counter-reset: yh-step;
	margin: 40px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.yh-checkout-success__steps li {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 18px;
	align-items: flex-start;
	padding: 22px 28px;
	background: #fff;
	border: 1px solid var(--yh-tint-card-border);
	border-radius: 14px;
}
.yh-checkout-success__step-num {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(28, 61, 90, 0.08);
	color: var(--yh-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 500;
}
.yh-checkout-success__steps li > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 4px;
}
.yh-checkout-success__steps li strong {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.yh-checkout-success__steps li span {
	font-size: 14.5px;
	color: var(--yh-tint-secondary-strong);
	line-height: 1.5;
}
.yh-checkout-success__steps li a { color: var(--yh-navy); text-decoration: none; font-weight: 500; }
.yh-checkout-success__steps li a:hover { color: var(--yh-orange); }
.yh-checkout-success__actions {
	margin-top: 32px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}


/* === Member status strip (Member Dashboard) ===
 * Compact 4-cell strip showing membership state at the top of the dashboard.
 * Same structural pattern as `.yh-location-strip`.
 */
.yh-status-strip {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.6fr auto;
	gap: 32px;
	align-items: end;
	padding: 28px 0;
	border-top: 1px solid var(--yh-tint-card-border);
	border-bottom: 1px solid var(--yh-tint-card-border);
}
.yh-status-strip__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.yh-status-strip__item .yh-eyebrow { margin: 0 0 4px; }
.yh-status-strip__value {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--yh-ink);
}
.yh-status-strip__item--cta {
	justify-content: flex-end;
	align-items: flex-end;
}
@media (max-width: 880px) {
	.yh-status-strip { grid-template-columns: 1fr 1fr; gap: 20px; }
	.yh-status-strip__item--cta { grid-column: 1 / -1; align-items: flex-start; }
}


/* === Member quick-links grid (Member Dashboard) === */
.yh-quick-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
	gap: 16px;
	margin-top: 24px;
}
.yh-quick-link {
	display: grid;
	grid-template-columns: 56px 1fr 24px;
	gap: 18px;
	align-items: center;
	padding: 22px 28px;
	background: #fff;
	border: 1px solid var(--yh-tint-card-border);
	border-radius: 16px;
	text-decoration: none;
	color: var(--yh-ink);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.yh-quick-link:hover {
	transform: translateY(-2px);
	box-shadow: var(--yh-shadow-lift);
	border-color: var(--yh-tint-input-border);
}
.yh-quick-link__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(28, 61, 90, 0.08);
	color: var(--yh-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.yh-quick-link__body { min-width: 0; }
.yh-quick-link__body h3 {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--yh-ink);
}
.yh-quick-link__body p {
	margin: 0;
	font-size: 13.5px;
	color: var(--yh-tint-secondary-strong);
	line-height: 1.5;
}
.yh-quick-link__chev {
	color: var(--yh-ink-soft);
	transition: transform .18s ease, color .18s ease;
}
.yh-quick-link:hover .yh-quick-link__chev {
	color: var(--yh-navy);
	transform: translateX(2px);
}
@media (max-width: 540px) {
	.yh-quick-links { grid-template-columns: 1fr; }
}


/* === Location strip (Warburton single — address/hours/contact row) ===
 * The hardcoded strip markup was replaced by the yrec/contact-details block
 * (source:"location", inline layout). These rules style that block as the
 * bordered strip it used to be. */
.yh-location-single .yh-contact-details--inline {
	padding: 32px 0;
	border-top: 1px solid var(--yh-tint-card-border);
	border-bottom: 1px solid var(--yh-tint-card-border);
}


/* === Location auto-render (CPT-driven single page for yrec_location) ===
 * Rendered by YREC_Location_Auto_Render when a location's post_content lacks
 * hand-authored yrec/* blocks. Photo hero + visit card + facilities + spaces + map. */
.yh-loc { display: block; }
.yh-loc__band { padding: 80px 0; }
.yh-loc__band--cream     { background: var(--yh-cream); }
.yh-loc__band--cream-alt { background: var(--yh-cream-alt); }
.yh-loc__band-inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Hero — photo variant mirrors .yh-page-hero--photo */
.yh-loc__hero {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--yh-navy-deep);
	color: #fff;
}
.yh-loc__hero--plain { min-height: 360px; background: var(--yh-navy-deep); }
.yh-loc__hero-photo {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.05);
}
.yh-loc__hero-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,48,74,0) 0%, rgba(20,48,74,.35) 45%, rgba(20,48,74,.85) 100%);
}
.yh-loc__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	padding: 80px 24px 56px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.yh-loc__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yh-orange);
}
.yh-loc__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: clamp(44px, 6.2vw, 84px);
	letter-spacing: -0.03em;
	line-height: 1;
	color: #fff;
	max-width: 18ch;
}
.yh-loc__lede {
	margin: 0;
	max-width: 58ch;
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255,255,255,.88);
}
.yh-loc__hero-meta {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.yh-loc__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.22);
	color: #fff;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	backdrop-filter: blur(4px);
}
.yh-loc__chip:hover { background: rgba(255,255,255,.16); }
.yh-loc__chip-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--yh-orange);
	box-shadow: 0 0 0 4px rgba(255,138,61,.22);
}
.yh-btn--ghost-on-photo {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,.45);
}
.yh-btn--ghost-on-photo:hover {
	background: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.7);
}

/* Two-column band: visit card + intro */
.yh-loc__two-col {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(0, 1.8fr);
	gap: 64px;
	align-items: start;
}
.yh-loc__visit-card {
	background: #fff;
	border: 1px solid var(--yh-tint-card-border);
	border-radius: 18px;
	padding: 32px;
	position: sticky;
	top: 96px;
}
.yh-loc__visit-card .yh-eyebrow { margin-bottom: 18px; display: block; }
.yh-loc__deflist {
	margin: 0;
	display: grid;
	gap: 18px;
}
.yh-loc__deflist dt {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yh-ink-muted);
	margin-bottom: 4px;
}
.yh-loc__deflist dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--yh-ink);
}
.yh-loc__deflist dd a { color: var(--yh-navy); }

.yh-loc__intro { display: flex; flex-direction: column; gap: 40px; }
.yh-loc__narrative { font-size: 17px; line-height: 1.7; color: var(--yh-ink); }
.yh-loc__narrative p:first-child { margin-top: 0; }
.yh-loc__narrative p:last-child  { margin-bottom: 0; }

/* The facilities-list block sits inside .yh-loc__intro — re-anchor its heading */
.yh-loc__intro .yh-facilities-list { margin: 0; }
.yh-loc__intro .yh-facilities-list__heading {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 28px;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

/* Map */
.yh-loc__map-heading {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: clamp(28px, 3.5vw, 44px);
	letter-spacing: -0.02em;
	margin: 8px 0 32px;
	color: var(--yh-ink);
}
.yh-loc__map {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--yh-tint-card-border);
	background: var(--yh-cream-alt);
	aspect-ratio: 16 / 7;
}
.yh-loc__map iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 980px) {
	.yh-loc__two-col { grid-template-columns: 1fr; gap: 40px; }
	.yh-loc__visit-card { position: static; }
}
@media (max-width: 720px) {
	.yh-loc__band { padding: 56px 0; }
	.yh-loc__hero { min-height: 420px; }
	.yh-loc__hero-inner { padding: 56px 24px 40px; }
	.yh-loc__map { aspect-ratio: 4 / 5; }
}


/* === System surface: Mobile nav drawer (Option 1 System Surfaces §06) ===
 * Styles WP's core/navigation overlay (overlayMenu="mobile") to match the
 * prototype — full-screen cream overlay, big display-weight links, current
 * page italic-orange, arrow indicator per row.
 *
 * IMPORTANT: every selector below MUST be scoped to `.has-modal-open` so it
 * fires only when the drawer is actually open. WP renders the responsive
 * container/dialog elements at ALL viewport widths, so unscoped rules will
 * break the desktop horizontal nav (caught 2026-05-20 — nav was column-flexed
 * and 82px wide on desktop).
 */
.site-header .wp-block-navigation__responsive-container.has-modal-open {
	background: var(--yh-cream);
	padding: 24px 24px 28px;
}
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-inner {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: flex-start;
	align-items: stretch;
}
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-close {
	color: var(--yh-ink);
}
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container {
	gap: 0;
	flex-direction: column;
	align-items: stretch;
	padding-top: 20px;
}
.site-header .has-modal-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 28px !important;
	font-weight: 500;
	letter-spacing: -0.022em;
	padding: 12px 0;
	color: var(--yh-ink) !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid transparent;
}
.site-header .has-modal-open .current-menu-item .wp-block-navigation-item__content,
.site-header .has-modal-open .current_page_item .wp-block-navigation-item__content {
	color: var(--yh-orange) !important;
	font-style: italic;
}
/* Append an arrow indicator to every drawer item via ::after */
.site-header .has-modal-open .wp-block-navigation-item__content::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
	opacity: 0.7;
}

/* Desktop nav baseline — make sure the horizontal layout is locked in
 * regardless of WP's nested wrappers. ≥600px: row + sensible gap.
 */
@media (min-width: 601px) {
	.site-header .wp-block-navigation__container {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap;
		gap: 28px;
		align-items: center;
		padding: 0;
		margin: 0;
		list-style: none;
		width: auto;
	}
	.site-header .wp-block-navigation__responsive-container-inner {
		display: contents;
	}
	.site-header .wp-block-navigation-item {
		flex: 0 0 auto;
	}
	.site-header .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}


/* === Contact page intro cards =====================================
 *
 * The two intro columns ("Visit us" / "Reach us directly") render as
 * themed white cards on the cream page, matching the editorial card
 * treatment used on the location single (.yh-loc__visit-card).
 */
.yh-contact-cols {
	align-items: stretch;
}
.yh-contact-card {
	background: #fff;
	border: 1px solid var(--yh-border);
	border-radius: 18px;
	padding: clamp(28px, 3.5vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.yh-contact-card .yh-eyebrow {
	margin: 0 0 2px;
}
.yh-contact-card__title {
	margin: 0 0 6px;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.1;
	color: var(--yh-ink);
}
/* The "Visit us" card carries the contact-details block — give its rows room. */
.yh-contact-card--visit .yh-contact-details {
	margin-top: 4px;
}
.yh-contact-card--visit .yh-contact-details__list {
	gap: 1.1rem;
}
/* The "Reach us" card: copy + button pinned to the foot of the card. */
.yh-contact-card--reach p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--yh-ink-muted);
	margin: 0;
}
.yh-contact-card--reach .wp-block-buttons {
	margin-top: auto;
	padding-top: 8px;
}

@media (max-width: 781px) {
	/* Core stacks the columns here; keep cards full-width with even spacing. */
	.yh-contact-cols { gap: 18px; }
}

/* === Form field system (BUILD-GUIDE §8 + Block Library #form) ===
 *
 * Every input has six states: empty / focused / filled / error / success /
 * disabled. Field markup pattern:
 *
 *   <div class="yh-field" data-state="empty">
 *     <label class="yh-field__label" for="x">Label <span class="yh-field__req">*</span></label>
 *     <input id="x" class="yh-field__input" />
 *     <div class="yh-field__helper">Helper text persistent</div>
 *   </div>
 *
 * State is signalled via the data-state attribute on the wrapper OR via the
 * input's own :focus/:disabled pseudos. Use data-state when the state is
 * persistent across blur (filled-with-value / error-message-visible / etc).
 */
.yh-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 18px;
}
.yh-field__label,
.yh-contact__field > label,
.yh-booking__field > label {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--yh-ink);
	margin-bottom: 6px;
}
.yh-contact__field,
.yh-booking__field {
	margin-bottom: 18px;
}
.yh-contact__field > label > span[aria-hidden="true"],
.yh-booking__field > label > span[aria-hidden="true"] {
	color: var(--yh-orange);
	margin-left: 2px;
}
.yh-field__req {
	color: var(--yh-orange);
	margin-left: 2px;
}
.yh-field__input,
.yh-field input[type="text"],
.yh-field input[type="email"],
.yh-field input[type="tel"],
.yh-field input[type="url"],
.yh-field input[type="password"],
.yh-field input[type="date"],
.yh-field input[type="time"],
.yh-field input[type="number"],
.yh-field textarea,
.yh-field select,
.yh-contact__field input,
.yh-contact__field textarea,
.yh-booking__field input,
.yh-booking__field textarea,
.yh-booking__field select {
	width: 100%;
	background: #fff;
	border: 1px solid var(--yh-tint-input-strong);
	border-radius: 10px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 15.5px;
	color: var(--yh-ink);
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	outline: none;
}
.yh-field textarea {
	min-height: 120px;
	resize: vertical;
}
.yh-field__input:focus,
.yh-field input:focus,
.yh-field textarea:focus,
.yh-field select:focus,
.yh-contact__field input:focus,
.yh-contact__field textarea:focus,
.yh-booking__field input:focus,
.yh-booking__field textarea:focus,
.yh-booking__field select:focus {
	border-color: var(--yh-navy);
	border-width: 1.5px;
	padding: 10.5px 13.5px;
}
.yh-field__helper {
	font-size: 13px;
	color: var(--yh-tint-secondary);
	line-height: 1.4;
}
.yh-field__icon {
	flex-shrink: 0;
}

/* Error state */
.yh-field[data-state="error"] .yh-field__input,
.yh-field[data-state="error"] input,
.yh-field[data-state="error"] textarea,
.yh-field[data-state="error"] select {
	border-color: var(--yh-orange);
	border-width: 1.5px;
	padding: 10.5px 13.5px;
	background: var(--yh-error-bg);
}
.yh-field[data-state="error"] .yh-field__helper {
	color: var(--yh-orange);
	display: flex;
	align-items: center;
	gap: 6px;
}
.yh-field[data-state="error"] .yh-field__helper::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background: var(--yh-orange);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 8v4.5M12 16v.5'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 8v4.5M12 16v.5'/></svg>") center/contain no-repeat;
}

/* Success state */
.yh-field[data-state="success"] .yh-field__input,
.yh-field[data-state="success"] input,
.yh-field[data-state="success"] textarea,
.yh-field[data-state="success"] select {
	border-color: rgba(28, 61, 90, 0.22);
}
.yh-field[data-state="success"] .yh-field__helper {
	color: var(--yh-navy);
	display: flex;
	align-items: center;
	gap: 6px;
}
.yh-field[data-state="success"] .yh-field__helper::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background: var(--yh-navy);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>") center/contain no-repeat;
}

/* Disabled */
.yh-field input:disabled,
.yh-field textarea:disabled,
.yh-field select:disabled,
.yh-field[data-state="disabled"] input,
.yh-field[data-state="disabled"] textarea,
.yh-field[data-state="disabled"] select {
	border-color: var(--yh-tint-input-border);
	background: rgba(22, 32, 43, 0.03);
	color: rgba(22, 32, 43, 0.35);
	cursor: not-allowed;
}

/* Checkbox + radio — minimal, navy when checked */
.yh-field--check,
.yh-field--radio {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}
.yh-field--check input[type="checkbox"],
.yh-field--radio input[type="radio"] {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	accent-color: var(--yh-navy);
}

/* Inline alert (BUILD-GUIDE #alert) — page-level form responses */
.yh-alert {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 18px;
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: 14.5px;
	line-height: 1.5;
	margin-bottom: 18px;
}
.yh-alert--info    { background: var(--yh-info-bg);    border-color: rgba(28,61,90,0.15);  color: var(--yh-ink); }
.yh-alert--success { background: var(--yh-success-bg); border-color: rgba(28,61,90,0.20);  color: var(--yh-navy); }
.yh-alert--warning { background: var(--yh-warn-bg);    border-color: rgba(255,138,61,0.25); color: var(--yh-ink); }
.yh-alert--error   { background: var(--yh-error-bg);   border-color: rgba(255,138,61,0.30); color: var(--yh-ink); }
.yh-alert__icon { flex-shrink: 0; margin-top: 2px; }


/* === System surface: Form toasts (Option 1 System Surfaces §07) ===
 * Bottom-anchored stacked transient alerts. Auto-mounts when window.YH.toast()
 * is called. See assets/js/toasts.js for the API.
 *
 * Success: navy left-border. Error: orange. Info: navy (subtle).
 * Mobile: pins to bottom edge full-width minus 16px.
 */
.yh-toast-root {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: none;
	max-width: calc(100vw - 40px);
}
.yh-toast {
	position: relative;
	background: #fff;
	border: 1px solid var(--yh-tint-card-border);
	border-left: 4px solid var(--yh-navy);
	border-radius: 12px;
	padding: 16px 20px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	width: 100%;
	max-width: 480px;
	box-shadow: 0 20px 50px -20px rgba(22, 32, 43, 0.18);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .24s var(--yh-ease), transform .24s var(--yh-ease);
}
.yh-toast.is-mounted { opacity: 1; transform: translateY(0); }
.yh-toast.is-leaving { opacity: 0; transform: translateY(8px); }
.yh-toast--success {
	border-left-color: var(--yh-navy);
}
.yh-toast--success .yh-toast__icon { color: var(--yh-navy); }
.yh-toast--error {
	border-color: rgba(255, 138, 61, 0.3);
	border-left-color: var(--yh-orange);
}
.yh-toast--error .yh-toast__icon { color: var(--yh-orange); }
.yh-toast--info {
	border-left-color: var(--yh-navy);
}
.yh-toast--info .yh-toast__icon { color: var(--yh-navy); }
.yh-toast__icon {
	margin-top: 2px;
	flex-shrink: 0;
}
.yh-toast__body { flex: 1; min-width: 0; }
.yh-toast__title {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--yh-ink);
}
.yh-toast__text {
	font-size: 13.5px;
	color: var(--yh-tint-secondary-strong);
	margin-top: 3px;
	line-height: 1.5;
}
.yh-toast__close {
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--yh-ink-soft);
	padding: 0;
	flex-shrink: 0;
}
.yh-toast__close:hover { color: var(--yh-ink); }

@media (max-width: 600px) {
	.yh-toast-root {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
	}
	.yh-toast { max-width: none; }
}


/* === System surface: Member gate interstitial (Option 1 System Surfaces §03) ===
 * Cream centered card on a generous-padding section. Lock icon in a soft
 * orange disc, orange eyebrow, italic-friendly title, join + sign-in CTAs,
 * hairline footnote.
 */
.yh-gate-wrap {
	background: var(--yh-cream);
	padding: 80px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.yh-gate {
	max-width: 540px;
	width: 100%;
	background: #fff;
	border-radius: 20px;
	border: 1px solid var(--yh-tint-card-border);
	padding: 48px;
	text-align: center;
	box-shadow: 0 30px 60px -30px rgba(22, 32, 43, 0.15);
}
.yh-gate__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 138, 61, 0.12);
	color: var(--yh-orange);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}
.yh-gate .yh-eyebrow {
	justify-content: center;
	margin: 0 0 14px;
}
.yh-gate__title {
	font-family: var(--wp--preset--font-family--geist);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 500;
	letter-spacing: -0.022em;
	line-height: 1.1;
	margin: 0 0 16px;
	color: var(--yh-ink);
}
.yh-gate__dek {
	font-size: 16px;
	color: var(--yh-tint-secondary-strong);
	line-height: 1.55;
	margin: 0 0 28px;
}
.yh-gate__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 0;
}
.yh-gate__footnote {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--yh-tint-card-border);
	font-size: 13px;
	color: var(--yh-tint-secondary);
}
.yh-gate__footnote a { color: var(--yh-navy); }

@media (max-width: 600px) {
	.yh-gate { padding: 32px 24px; }
}


/* === System surface: 404 (BUILD-GUIDE — Option 1 System Surfaces §01) ===
 * Editorial 404 with italic orange centre zero in a 200px display digit.
 * Cream background, soft orange radial glow top-right, centered card stack.
 */
.yh-404 {
	background: var(--yh-cream);
	padding: 120px 40px;
	min-height: 600px;
	position: relative;
	overflow: hidden;
}
.yh-404::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -100px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 138, 61, 0.16), transparent 70%);
	pointer-events: none;
}
.yh-404__wrap { text-align: center; position: relative; }
.yh-404__digit {
	font-family: var(--wp--preset--font-family--geist);
	font-size: clamp(120px, 18vw, 200px);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--yh-ink);
	margin: 0 0 8px;
}
.yh-404__digit em {
	font-style: italic;
	color: var(--yh-orange);
}
.yh-404__title {
	font-size: clamp(36px, 4vw, 48px);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 8px 0 0;
}
.yh-404__dek {
	font-size: 18px;
	color: var(--yh-tint-secondary-strong);
	max-width: 520px;
	margin: 20px auto 32px;
	line-height: 1.55;
}
.yh-404__links {
	margin-top: 36px;
	gap: 8px !important;
}

/* Search pill (used on 404 + Search results) — rounded inline form */
.wp-block-search.yh-search-pill {
	max-width: 520px;
	margin: 0 auto;
}
.wp-block-search.yh-search-pill .wp-block-search__inside-wrapper {
	background: #fff;
	border-radius: 999px;
	padding: 6px;
	border: 1px solid var(--yh-tint-input-border);
	box-shadow: var(--yh-shadow-card);
}
.wp-block-search.yh-search-pill .wp-block-search__input {
	background: transparent;
	border: none;
	padding: 10px 14px;
	font-size: 15px;
	outline: none;
}
.wp-block-search.yh-search-pill .wp-block-search__button {
	background: var(--yh-orange);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.wp-block-search.yh-search-pill .wp-block-search__button:hover {
	background: var(--yh-orange-hover);
}

/* === System surface: Search results (Option 1 System Surfaces §02) === */
.yh-search {
	background: var(--yh-cream);
	padding: 80px 40px;
	min-height: 600px;
}
.yh-search__title {
	font-size: clamp(38px, 4.2vw, 56px);
	font-weight: 500;
	letter-spacing: -0.028em;
	line-height: 1.02;
	margin: 14px 0 24px;
}
.yh-search__results {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.yh-search__result {
	padding: 24px 0 !important;
	border-top: 1px solid var(--yh-tint-input-border);
}
.yh-search__result:first-child { border-top: 1px solid var(--yh-tint-input-border); }
.yh-search__result-title {
	font-size: 22px !important;
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 0 0 8px !important;
}
.yh-search__result-title a {
	color: var(--yh-ink);
	text-decoration: none;
}
.yh-search__result-title a:hover { color: var(--yh-navy); }
.yh-search__result-excerpt p {
	font-size: 14.5px;
	color: var(--yh-tint-secondary-strong);
	line-height: 1.55;
	margin: 0;
}
.yh-search__empty {
	padding: 60px 0;
	text-align: center;
	color: var(--yh-tint-secondary-strong);
}

/* Query pagination — neutral, no oversized buttons */
.yh-search .wp-block-query-pagination {
	margin-top: 40px;
	gap: 8px;
	justify-content: center;
}
.yh-search .wp-block-query-pagination-numbers .page-numbers {
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--yh-ink);
	text-decoration: none;
}
.yh-search .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--yh-navy);
	color: #fff;
}


/* === Fallback archive surface (index.html + taxonomy.html) ===
 * Term/category/tag/author/date archives have no branded page-hero, so the
 * wp:query-title needs an explicit size (it otherwise inherits the h1 `display`
 * preset → ~108px). Sits in the h2/h3 register, mirrors .yh-search__title. */
.yh-archive__title {
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 var(--wp--preset--spacing--40, 28px);
}
.yh-archive__intro {
	color: var(--yh-ink-muted);
	max-width: 60ch;
	margin: -8px 0 36px;
}
/* 1px card border applied here (not via the block's border.color attribute):
 * WP's has-border-color emits `color: var(--border)` too, which would poison the
 * card's text. Keep text ink so the post-excerpt stays readable on cream/white. */
.yh-archive__card {
	border: 1px solid var(--yh-border);
	color: var(--yh-ink);
}
.yh-archive__card .wp-block-post-excerpt {
	color: var(--yh-ink-muted);
}

/* Query-loop post cards (e.g. /news/ "Latest from the Hub") set their 1px
 * border via the block's border.color attribute. WP's has-border-color emits
 * `color: var(--border)` too, which poisons the card text to the cream border
 * tone — the post-excerpt becomes near-invisible on white. Restore ink text. */
.wp-block-post-template > li > .wp-block-group.has-border-color {
	color: var(--yh-ink);
}
.wp-block-post-template > li > .wp-block-group.has-border-color .wp-block-post-excerpt {
	color: var(--yh-ink-muted);
}


/* Ghost pill button style — used on 404 quick-links, anywhere we want a
 * neutral pill alternative to the orange CTA. */
.wp-block-button.is-style-ghost-pill .wp-block-button__link {
	background: #fff;
	color: var(--yh-ink);
	border: 1px solid var(--yh-tint-input-border);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13.5px;
	font-weight: 400;
}
.wp-block-button.is-style-ghost-pill .wp-block-button__link:hover {
	border-color: var(--yh-border-strong);
}


/* === Member-area chrome variation (BUILD-GUIDE §6) ===
 * On gated member surfaces, orange is suppressed except on primary actions.
 * Body class `yh-member-area` is added by yrec_hub_member_area_body_class()
 * for member-dashboard / resources / directory / book-a-space / my-account
 * + the yrec_resource CPT surfaces.
 *
 * Opt-out for any element that genuinely needs orange (a primary CTA pill):
 *   add class `yh-keep-accent` and it skips this desaturation.
 */
body.yh-member-area {
	/* Override the accent token so any consumer reading var(--yh-orange) on
	 * member chrome quietly resolves to navy. Decorative orange disappears;
	 * intentional CTA pills opt back in via .yh-keep-accent (see below).
	 */
	--yh-orange-decorative: var(--yh-navy);
}

/* Decorative orange usages on cream — eyebrows, accent text, hairlines —
 * resolve through the decorative alias on member surfaces only.
 *
 * The page-hero is excluded: it sits on its own dark (ink/navy) band and
 * already picks a background-aware accent (orange on ink/cream, cream on
 * navy). Desaturating it to navy here would put navy text on the navy
 * hero — unreadable. `.yh-page-hero *` keeps the hero's own rules in play.
 */
body.yh-member-area .yh-eyebrow:not(.yh-keep-accent):not(.yh-page-hero *),
body.yh-member-area .has-orange-color:not(.yh-keep-accent):not(.yh-page-hero *),
body.yh-member-area em:not(.yh-keep-accent):not(.yh-page-hero *) {
	color: var(--yh-navy);
}

/* Primary action override — explicit opt-in keeps orange where intended. */
body.yh-member-area .yh-keep-accent,
body.yh-member-area .yh-btn--primary,
body.yh-member-area .wp-block-button.is-style-primary .wp-block-button__link {
	color: #fff;
	background: var(--yh-orange);
}


/* === Icon system (BUILD-GUIDE §5) ===
 * Sprite is injected on wp_body_open via yrec_hub_inject_icon_sprite().
 * Render via PHP yrec_hub_icon('arrow-right') or inline:
 *   <svg class="yh-icon"><use href="#yh-icon-arrow-right"/></svg>
 * Stroke inherits currentColor; size via width/height attrs (default 24).
 */
.yh-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	stroke: currentColor;
	fill: none;
}
.yh-icon--sm { width: 18px; height: 18px; }
.yh-icon--lg { width: 32px; height: 32px; }


/* === Typographic utilities (BUILD-GUIDE §3) === */

/* Eyebrow — 12px UPPERCASE, 0.14em tracking, 24px leading hairline.
 * Used above section headers, in cards, and on dark/cream backgrounds.
 */
.yh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yh-tint-secondary-strong);
	margin: 0 0 18px;
}
.yh-eyebrow::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}
.yh-eyebrow.is-on-dark,
.has-dark-background .yh-eyebrow,
.has-ink-background-color .yh-eyebrow,
.has-navy-background-color .yh-eyebrow {
	color: var(--yh-tint-secondary-dark);
}
.yh-eyebrow.is-orange { color: var(--yh-orange); }

/* When an eyebrow is a direct child of a constrained-layout group (e.g. the
 * "More from the Hub" section label in single.html), the inline-flex box
 * shrinks to its text width and the layout's margin:auto centring resolves to
 * 0 — leaving it flush against the global-padding edge while its block-level
 * siblings (heading, grid) sit inset to the 1360px column. Promote it to a
 * block-level flex row so it shares the column edge with those siblings. */
.is-layout-constrained > .yh-eyebrow {
	display: flex;
}

/* Manifesto lede — 28–42px, weight 400, tracking -0.02em.
 * For leading paragraphs and pull quotes.
 */
.yh-lede {
	font-size: clamp(28px, 2.6vw, 42px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--yh-ink);
}

/* Meta — captions, footer links, byline (13–14px). */
.yh-meta {
	font-size: 13.5px;
	color: var(--yh-tint-secondary);
}

/* Breadcrumb — single "back" link on CPT/blog singles, styled as a pill.
   Wrapper is a constrained 880px group so the pill's left edge lines up with
   the headline below it. */
.yh-crumbs { margin: 0; }
.yh-crumbs p { margin: 0; }

.yh-crumbs a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px 8px 14px;
	border-radius: 999px;
	background: var(--yh-cream-alt);
	border: 1px solid var(--yh-border);
	color: var(--yh-navy);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background .2s var(--yh-ease),
	            color .2s var(--yh-ease),
	            border-color .2s var(--yh-ease),
	            transform .2s var(--yh-ease);
}

.yh-crumbs a:hover {
	background: var(--yh-orange);
	border-color: var(--yh-orange);
	color: #fff;
	transform: translateX(-2px);
}

.yh-crumbs a:focus-visible {
	outline: 2px solid var(--yh-navy);
	outline-offset: 2px;
}


/* === Scroll reveal animations (pure CSS) === */
/* Services block card grid. Was an inline repeat(3,1fr) in render.php, which no
   media query could override — so it overflowed at narrow widths. Now a class so
   it collapses responsively (see the 960px / 781px breakpoints below). */
.yh-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Scroll reveals — pure CSS, progressive enhancement.
 * FOUC-safe: content renders visible by default. Only when the browser
 * supports scroll-driven timelines (and motion is allowed) do elements
 * start hidden and animate in on entry. No support / reduced motion =>
 * static, fully-visible content with no JS dependency. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		@keyframes yh-reveal {
			from { opacity: 0; transform: translateY(16px); }
			to   { opacity: 1; transform: none; }
		}

		.yh-reveal,
		.yh-reveal-group > * {
			animation: yh-reveal linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 50%;
		}

		/* Stagger: offset each child's entry range instead of a time delay
		 * (delays are meaningless on a scroll-scrubbed timeline). */
		.yh-reveal-group > :nth-child(2)   { animation-range: entry 18% entry 58%; }
		.yh-reveal-group > :nth-child(3)   { animation-range: entry 26% entry 66%; }
		.yh-reveal-group > :nth-child(4)   { animation-range: entry 34% entry 74%; }
		.yh-reveal-group > :nth-child(n+5) { animation-range: entry 42% entry 82%; }
	}
}


/* === Site header — sticky, transparent over hero ===
   The frosted "glass" background lives on ::before, NOT on .site-header itself.
   A backdrop-filter (like transform) makes its element the containing block for
   position:fixed descendants — and the mobile mega-nav drawer/scrim are fixed
   children of .site-header. With the filter on the header, once `is-scrolled`
   was set the drawer rendered header-sized and off-screen (broken menu) and its
   off-canvas box leaked horizontal scroll on every page. A pseudo-element is
   not an ancestor of the drawer, so the drawer stays viewport-fixed. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: transparent;
	border-bottom: 1px solid transparent;
	pointer-events: none;
	transition: background-color .3s var(--yh-ease),
	            border-color .3s var(--yh-ease),
	            backdrop-filter .3s var(--yh-ease);
}

body.is-scrolled .site-header::before,
.site-header.scrolled::before {
	background: rgba(246, 241, 232, 0.88);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom-color: rgba(22, 32, 43, 0.08);
}

/* Nav — ink everywhere. On the home hero (mixed-brightness photo) we add a
   subtle white text-shadow so the ink links remain legible against darker
   patches of the image. */
.site-header .wp-block-navigation-item__content,
.site-header .yh-members-link {
	color: var(--yh-ink);
	transition: color .2s ease, opacity .2s ease;
}

body.home:not(.is-scrolled) .site-header .wp-block-navigation-item__content {
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.site-header .yh-members-link--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid currentColor;
	line-height: 0;
	text-decoration: none;
}

.site-header .yh-members-link__icon {
	width: 20px;
	height: 20px;
	display: block;
}

/* Logged-out variant — visible "Log in" label beside the icon. */
.site-header .yh-members-link--login {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid currentColor;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.site-header .yh-members-link--login .yh-members-link__icon {
	width: 18px;
	height: 18px;
}

.site-header .yh-members-link--login:hover {
	color: var(--yh-orange);
	border-color: var(--yh-orange);
	opacity: 1;
}

/* Account dropdown (logged-in). The toggle is a <button> styled as the icon
   pill; reset native button chrome so it matches the icon-link treatment. */
.site-header .yh-account {
	position: relative;
}

.site-header .yh-account__toggle {
	background: none;
	color: var(--yh-ink);
	cursor: pointer;
	padding: 0;
	font: inherit;
}

.site-header .yh-account__menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	padding: 8px;
	background: var(--yh-cream);
	border: 1px solid var(--yh-border);
	border-radius: 14px;
	box-shadow: 0 18px 40px -22px rgba(22, 32, 43, 0.45);
	z-index: 1100;
}

.site-header .yh-account__menu[hidden] {
	display: none;
}

.site-header .yh-account__item {
	display: block;
	padding: 9px 12px;
	border-radius: 9px;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--yh-ink);
	text-decoration: none;
	white-space: nowrap;
}

.site-header .yh-account__item:hover {
	background: var(--yh-cream-alt);
	color: var(--yh-orange);
}

.site-header .yh-account__item--logout {
	margin-top: 4px;
	border-top: 1px solid var(--yh-border);
	border-radius: 0 0 9px 9px;
	padding-top: 12px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.site-header .wp-block-navigation-item__content:hover,
.site-header .yh-members-link:hover {
	opacity: 0.65;
}

body.is-scrolled .site-header .wp-block-navigation-item__content,
body.is-scrolled .site-header .yh-members-link,
.site-header.scrolled .wp-block-navigation-item__content,
.site-header.scrolled .yh-members-link {
	color: var(--yh-ink);
}

/* Site title (YREC wordmark) */
.site-header .wp-block-site-title a,
.site-header .wp-block-site-title {
	color: #fff;
	transition: color .2s ease;
}

body.is-scrolled .site-header .wp-block-site-title a,
body.is-scrolled .site-header .wp-block-site-title {
	color: var(--yh-ink);
}

/* Wordmark partial is imported at the top of this file (CSS spec requires
   @import to precede other rules). The rule below provides the header-
   context override. */

/* Over a transparent header on a hero photo, the wordmark colours alone
   (navy or cream) can blend into mid-tones of the photo. We keep the V3
   default colours (navy + orange "e") on every page and add a soft drop
   shadow to the letters *only* when the header sits over a hero — this
   lifts the wordmark off the photo regardless of which photo loads.
   The shadow vanishes once the header opaques on scroll. */
body:has(.yh-hero):not(.is-scrolled) .site-header .yh-wordmark__letter {
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}


/* === Buttons — pill, Geist medium === */
.wp-block-button__link {
	transition: all .2s var(--yh-ease);
	letter-spacing: -0.01em;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	/* Don't let multi-word labels wrap. Core wp-block-library supplies this, but
	   the header CTAs must not depend on that stylesheet winning the load race —
	   without it "Book a Room" wraps to one word/char per line and the pill
	   collapses into a tall vertical bar. See .yh-nav-cta below. */
	white-space: nowrap;
}

/* Header "Book a Room" / "Book a Tour" pills — fully self-contained layout so
   they render correctly even if WordPress core's block-library CSS is delayed,
   deferred, or stripped by a cache/optimisation plugin (the account-link "Log In"
   block ships its own CSS and is immune; these core wp:buttons were not).
   Scoped to ≥1200px: below that the full nav row + search + Log In + both pills
   don't fit (they overflowed the 901–1149px band), and ≤900px they collapse into
   the burger drawer anyway. In the 901–1199px band the nav bar shows without the
   pills — "Book a Room" stays reachable via the Spaces dropdown + the drawer. */
/* Hide the pills below 1200px (the mega-nav part only hides them ≤900px; without
   this they'd reappear via core's default in the 901–1199px band and overflow). */
@media ( max-width: 1199px ) {
	.site-header .wp-block-buttons {
		display: none;
	}
}

@media ( min-width: 1200px ) {
	.site-header .wp-block-buttons {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
	}

	.site-header .yh-nav-cta {
		display: inline-flex;
	}
}

.site-header .yh-nav-cta .wp-block-button__link {
	white-space: nowrap;
	width: auto;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(255, 138, 61, 0.22);
}

/* Outline / ghost */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(22, 32, 43, 0.18);
	color: var(--yh-ink);
	box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--yh-ink);
	color: #fff;
	border-color: var(--yh-ink);
	box-shadow: 0 8px 24px rgba(22, 32, 43, 0.15);
}

/* Header secondary CTA ("Book a Tour"): ink outline pill. Force ink text/border
   so it reads on the cream scrolled header (orange-on-cream failed WCAG AA). The
   text-shadow keeps it legible over the transparent header on a hero photo, and
   clears once the header opaques on scroll. */
.site-header .yh-nav-cta--tour .wp-block-button__link {
	color: var(--yh-ink) !important;
	border-color: var(--yh-ink);
}

body:has(.yh-hero):not(.is-scrolled) .site-header .yh-nav-cta--tour .wp-block-button__link {
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.site-header .yh-nav-cta--tour .wp-block-button__link:hover {
	color: #fff !important;
	background: var(--yh-ink);
	border-color: var(--yh-ink);
	text-shadow: none;
}

/* Light (white on dark) */
.wp-block-button.is-style-light .wp-block-button__link,
.has-white-background-color.wp-block-button__link {
	background: #fff;
	color: var(--yh-navy);
}

/* Outline on dark sections */
.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--yh-navy);
	border-color: #fff;
}


/* === Eyebrow / section kicker with line === */
.yh-eyebrow,
.lassco-kicker-line {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--yh-orange);
	font-weight: 500;
	margin: 0 0 1.25rem;
}

.yh-eyebrow::before,
.lassco-kicker-line::before {
	content: '';
	width: 24px;
	height: 1px;
	background: currentColor;
	display: inline-block;
}

.yh-eyebrow--on-dark { color: rgba(255, 255, 255, 0.85); }
.yh-eyebrow--ink { color: var(--yh-ink); }
.yh-eyebrow--orange { color: var(--yh-orange); }


/* === Display headline (hero + section lead) === */
.yh-display {
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.035em;
	margin: 0;
}

.yh-display em {
	font-style: italic;
	color: var(--yh-orange);
}

.yh-display--navy em {
	color: var(--yh-navy);
}


/* === Cards === */
.yh-card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.yh-card-link > .yh-card {
	flex: 1;
}

.yh-card-link:focus-visible {
	outline: 3px solid var(--yh-orange);
	outline-offset: 3px;
	border-radius: var(--yh-radius-card);
}

.yh-card,
.wp-block-group.is-style-card {
	background: #fff;
	border: 1px solid rgba(22, 32, 43, 0.06);
	border-radius: var(--yh-radius-card);
	overflow: hidden;
	transition: transform .3s var(--yh-ease), box-shadow .3s var(--yh-ease);
	box-shadow: 0 2px 6px rgba(22, 32, 43, 0.04);
}

.yh-card:hover,
.wp-block-group.is-style-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -20px rgba(22, 32, 43, 0.25);
}

.yh-card__media {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	position: relative;
}

.yh-card__tag {
	position: absolute;
	top: 16px;
	left: 16px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	padding: 4px 10px;
	border-radius: var(--yh-radius-pill);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--yh-ink);
}

.yh-card__body {
	padding: 28px 28px 30px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.yh-card__body h3 {
	font-size: 26px;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--yh-ink);
	margin: 0;
}

.yh-card__body p {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(22, 32, 43, 0.68);
	margin: 12px 0 20px;
}

.yh-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
}

.yh-chip {
	font-size: 12px;
	padding: 5px 10px;
	border: 1px solid rgba(22, 32, 43, 0.14);
	border-radius: var(--yh-radius-pill);
	color: rgba(22, 32, 43, 0.72);
}


/* === Images === */
.wp-block-image img {
	border-radius: 14px;
}

.wp-block-image.alignfull img,
.wp-block-image.is-style-flat img {
	border-radius: 0;
}

.wp-block-image.is-style-rounded img {
	border-radius: 50%;
}


/* === Hero — full-bleed photo + overlay === */
/* === HERO — minimal clean rebuild === */
.yh-hero {
	position: relative;
	margin: -74px 0 0;
	padding: 160px 40px 48px;
	min-height: 100vh;
	background: #1c1c1c no-repeat center / cover;
	color: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.yh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(11,22,32,0.55) 0%, rgba(11,22,32,0.25) 40%, rgba(11,22,32,0.65) 100%),
		radial-gradient(120% 80% at 10% 100%, rgba(255,138,61,0.18), transparent 55%);
	z-index: 1;
	pointer-events: none;
}

.yh-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.yh-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 2.4s ease-in-out, transform 18s ease-out;
	will-change: opacity, transform;
}

.yh-hero__slide.is-active {
	opacity: 1;
	transform: scale(1.1) translate3d(-0.6%, -0.6%, 0);
}

.yh-hero__content {
	position: relative;
	z-index: 2;
	max-width: 1360px;
	width: 100%;
	margin: 0 auto;
}

.yh-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	margin: 0 0 24px;
}

.yh-hero__eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
	display: inline-block;
}

.yh-hero h1 {
	font-size: clamp(52px, 7.2vw, 108px);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.035em;
	margin: 0;
	color: #fff;
}

.yh-hero h1 em {
	font-style: italic;
	color: var(--yh-orange);
}

.yh-hero__lede {
	font-size: 20px;
	line-height: 1.5;
	max-width: 580px;
	margin: 28px 0 0;
	color: #fff;
	opacity: 0.88;
}

.yh-hero__buttons {
	display: flex;
	gap: 12px;
	margin-top: 40px;
	flex-wrap: wrap;
}

.yh-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: opacity .2s ease, transform .2s ease;
}

.yh-hero__btn--primary {
	background: var(--yh-orange);
	color: #fff;
}

.yh-hero__btn--light {
	background: #fff;
	color: var(--yh-ink);
}

.yh-hero__btn:hover { transform: translateY(-1px); opacity: 0.94; }

@media (max-width: 781px) {
	.yh-hero { padding: 120px 20px 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.yh-hero__slide { transition: opacity .3s; animation: none !important; transform: none !important; }
}


/* === Manifesto split (Who we are) === */
.yh-manifesto {
	background: var(--yh-cream);
	padding: 120px 40px;
}

.yh-manifesto__grid {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 80px;
}

.yh-manifesto__lead {
	font-size: clamp(28px, 2.6vw, 42px);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--yh-ink);
	font-weight: 400;
	margin: 0;
}

.yh-manifesto__lead em {
	color: var(--yh-navy);
}

.yh-manifesto__stats {
	display: flex;
	gap: 40px;
	margin-top: 48px;
	flex-wrap: wrap;
}

.yh-manifesto__stat {
	border-left: 1px solid rgba(22, 32, 43, 0.2);
	padding-left: 16px;
	max-width: 200px;
}

.yh-manifesto__stat-n {
	font-size: 14px;
	font-weight: 500;
	color: var(--yh-navy);
	letter-spacing: -0.005em;
}

.yh-manifesto__stat-l {
	font-size: 13px;
	color: rgba(22, 32, 43, 0.6);
	margin-top: 4px;
	line-height: 1.4;
}


/* === Spaces feature — navy band with photo collage === */
.yh-spaces {
	background: var(--yh-navy);
	color: #fff;
	padding: 120px 40px;
	position: relative;
	overflow: hidden;
}

.yh-spaces::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 138, 61, 0.18), transparent 60%);
	pointer-events: none;
}

.yh-spaces__grid {
	max-width: 1360px;
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: center;
}

.yh-spaces h2 {
	font-size: clamp(40px, 4.6vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.028em;
	font-weight: 500;
	margin: 20px 0 24px;
	color: #fff;
}

.yh-spaces__lede {
	font-size: 18px;
	line-height: 1.55;
	opacity: 0.8;
	max-width: 520px;
}

.yh-spaces__features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px 40px;
	margin-top: 48px;
	max-width: 520px;
}

.yh-spaces__feature-h {
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.01em;
}

.yh-spaces__feature-p {
	font-size: 14px;
	opacity: 0.65;
	margin-top: 4px;
	line-height: 1.4;
}

.yh-spaces__collage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.yh-spaces__collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
}

.yh-spaces__collage > :first-child {
	aspect-ratio: 3 / 4;
	grid-row: span 2;
}


/* === Membership CTA — ink rounded card === */
.yh-cta-band {
	background: var(--yh-cream);
	padding: 0 40px 120px;
}

.yh-cta-band__card {
	max-width: 1360px;
	margin: 0 auto;
	background: var(--yh-ink);
	color: #fff;
	border-radius: var(--yh-radius-card-lg);
	padding: 80px 64px;
	position: relative;
	overflow: hidden;
}

.yh-cta-band__card::before {
	content: '';
	position: absolute;
	bottom: -80px;
	right: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: var(--yh-orange);
	opacity: 0.85;
}

.yh-cta-band__card::after {
	content: '';
	position: absolute;
	bottom: 40px;
	right: 80px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.yh-cta-band__grid {
	position: relative;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 60px;
	align-items: end;
}

.yh-cta-band h2 {
	font-size: clamp(40px, 4.8vw, 76px);
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 500;
	margin: 24px 0 0;
	max-width: 840px;
	color: #fff;
}

.yh-cta-band__lede {
	font-size: 18px;
	line-height: 1.5;
	opacity: 0.75;
	max-width: 560px;
	margin-top: 28px;
}

.yh-cta-band__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	position: relative;
	z-index: 2;
}


/* === Testimonials === */
.yh-testimonials {
	background: var(--yh-cream);
	padding: 140px 40px;
}

.yh-testimonials__grid {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 80px;
	margin-top: 40px;
	align-items: center;
}

.yh-testimonials blockquote {
	font-size: clamp(28px, 3.2vw, 48px);
	line-height: 1.2;
	letter-spacing: -0.022em;
	color: var(--yh-ink);
	font-weight: 400;
	margin: 0;
}

.yh-testimonials__byline {
	margin-top: 40px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.yh-testimonials__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}


/* === News & events grid === */
.yh-news {
	background: var(--yh-cream);
	padding: 0 40px 140px;
}

.yh-news__grid {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.yh-news__item {
	text-decoration: none;
	color: inherit;
	display: block;
}

.yh-news__media {
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 18px;
}

.yh-news__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--yh-ease);
	border-radius: 0;
}

.yh-news__item:hover .yh-news__media img {
	transform: scale(1.04);
}

.yh-news__kicker {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yh-orange);
	margin-bottom: 8px;
}

.yh-news__title {
	font-size: 20px;
	line-height: 1.25;
	color: var(--yh-ink);
	letter-spacing: -0.015em;
	font-weight: 500;
}


/* === Section heading helpers === */
.yh-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 56px;
	flex-wrap: wrap;
	gap: 24px;
}

.yh-section-link {
	color: var(--yh-navy);
	font-size: 15px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.yh-section-link:hover {
	color: var(--yh-orange);
}


/* === Footer === */
.site-footer {
	background: var(--yh-ink);
	color: #fff;
	/* Inner groups now control their own padding (footer.html). */
	padding: 0;
}

.site-footer a:not(.wp-block-button__link) {
	color: #fff;
	opacity: 0.85;
	text-decoration: none;
	transition: opacity .2s ease;
}

.site-footer a:not(.wp-block-button__link):hover {
	opacity: 1;
	color: var(--yh-orange);
}

.yh-footer__grid {
	max-width: 1360px;
	margin: 0 auto;
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.3fr;
	gap: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Newsletter hidden (Settings → YREC Email → Newsletter visibility): drop the
   now-empty newsletter column so the remaining footer columns reflow evenly. */
.yh-newsletter-hidden .yh-footer__grid {
	grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
}
.yh-newsletter-hidden .yh-footer__col--newsletter {
	display: none;
}
/* Inner column groups — strip default wp-block-group flow */
.yh-footer__brand,
.yh-footer__col {
	display: block;
	/* Allow grid tracks to shrink below their min-content so the footer
	   wordmark's nowrap subtitle can't force a >viewport track on phones. */
	min-width: 0;
}

.yh-footer__col-h {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.55;
	margin: 0 0 16px;
}

/* The yrec/contact-details block colours itself for light surfaces
 * (__value = --yh-ink, links = --yh-navy). On the dark footer that renders
 * dark-on-dark — the address was invisible. Re-tone for the footer here. */
.site-footer .yh-contact-details__label {
	color: rgba(255, 255, 255, 0.55);
}
.site-footer .yh-contact-details__value {
	color: rgba(255, 255, 255, 0.85);
}
.site-footer .yh-contact-details__value a {
	color: #fff;
}
.site-footer .yh-contact-details__value a:hover,
.site-footer .yh-contact-details__value a:focus-visible {
	color: var(--yh-orange);
}

.yh-footer__col-list,
.yh-footer__col .wp-block-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14.5px;
}

.yh-footer__newsletter {
	display: flex;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--yh-radius-pill);
	padding: 5px;
}

.yh-footer__newsletter input {
	flex: 1;
	background: transparent;
	border: none;
	color: #fff;
	padding: 10px 16px;
	font-size: 14px;
	outline: none;
	font-family: inherit;
}

.yh-footer__newsletter input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.yh-footer__newsletter button {
	background: var(--yh-orange);
	border: none;
	color: #fff;
	padding: 10px 18px;
	border-radius: var(--yh-radius-pill);
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	transition: background-color .2s ease;
}

.yh-footer__newsletter button:hover {
	background: var(--yh-orange-hover);
}

.yh-footer__newsletter-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--yh-orange);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 500;
}
.yh-footer__newsletter-link:hover { text-decoration: underline; }

.yh-footer__legal {
	max-width: 1360px;
	margin: 0 auto;
	font-size: 13px;
	opacity: 0.5;
	gap: 16px;
}
/* Legal paragraph gets a normal flow inside the wp-block-group flex row */
.yh-footer__legal p { margin: 0; }

.yh-footer__legal-links {
	display: flex;
	gap: 24px;
}


/* === Smooth Scroll Anchor Offset === */
[id] { scroll-margin-top: 5rem; }


/* === Accessibility === */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--yh-orange);
	outline-offset: 3px;
	border-radius: 4px;
}


/* === Details / Accordion (FAQ) === */
.wp-block-details {
	border: 1px solid var(--yh-border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	transition: border-color .2s ease;
	background: #fff;
}

.wp-block-details:hover { border-color: rgba(22, 32, 43, 0.24); }

.wp-block-details summary {
	font-weight: 500;
	font-size: 17px;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	letter-spacing: -0.01em;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
	content: '+';
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--yh-ink-muted);
	transition: transform .2s ease;
	margin-left: 16px;
}

.wp-block-details[open] summary::after { content: '\2212'; }


/* === Responsive === */
@media (max-width: 1024px) {
	.yh-hero__inner { padding: 140px 24px 60px; }
	.yh-manifesto,
	.yh-spaces,
	.yh-testimonials,
	.yh-news { padding-left: 24px; padding-right: 24px; }
	.yh-manifesto__grid,
	.yh-spaces__grid,
	.yh-testimonials__grid { grid-template-columns: 1fr; gap: 40px; }
	.yh-news__grid { grid-template-columns: repeat(2, 1fr); }
	.yh-services__grid { grid-template-columns: repeat(2, 1fr); }
	.yh-footer__grid,
	.yh-newsletter-hidden .yh-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
	.yh-cta-band__grid { grid-template-columns: 1fr; gap: 32px; }
	.yh-cta-band__card { padding: 56px 32px; }
	.site-footer { padding: 80px 24px 32px; }
}

@media (max-width: 781px) {
	.yh-hero h1 { font-size: clamp(40px, 11vw, 64px); }
	.yh-stat__n { font-size: 32px; }
	.yh-manifesto, .yh-spaces, .yh-testimonials, .yh-news { padding-top: 72px; padding-bottom: 72px; }
	.yh-news__grid { grid-template-columns: 1fr; }
	.yh-services__grid { grid-template-columns: 1fr; }
	.yh-spaces__features { grid-template-columns: 1fr; gap: 20px; }
	.yh-footer__grid,
	.yh-newsletter-hidden .yh-footer__grid { grid-template-columns: 1fr; padding-bottom: 48px; }
	.yh-footer__legal { flex-direction: column; }
	.yh-cta-band__card { padding: 48px 24px; }
	.wp-block-columns { flex-wrap: wrap; }
	.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}

/* Narrow phones: the footer wordmark's nowrap subtitle ("YARRA RANGES
   ENTERPRISE CENTRES LTD") keeps its full pre-transform layout width, which at
   --wm-width:240px is ~350px — wider than the content area below ~480px, so it
   forced a horizontal scrollbar on every page. Shrink the footer wordmark so it
   fits the narrowest phone. */
@media (max-width: 480px) {
	.yh-footer__brand .yh-wordmark--md { --wm-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* =========================================================
 * Legacy lassco-* utility overrides — re-tokenized for
 * Slate & Marigold. Kept because existing page content in
 * wp_posts still references these class names. New content
 * should use yh-* utilities above.
 * ========================================================= */

.lassco-page, .home {
	background: var(--yh-cream);
	color: var(--yh-ink);
}

.lassco-title {
	font-size: clamp(2rem, 4.2vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -0.028em;
	font-weight: 500;
	margin: 0 0 1rem;
}

.lassco-card {
	background: #fff;
	border: 1px solid var(--yh-border);
	border-radius: var(--yh-radius-card);
	padding: 1.25rem;
}

.lassco-card img { border-radius: 12px; margin-bottom: 0.8rem; }

.lassco-meta {
	font-size: 0.8rem;
	opacity: 0.75;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--yh-orange);
}

.lassco-step,
.lassco-compare,
.lassco-action-card,
.lassco-feature-item,
.lassco-person-card,
.lassco-contact-stack,
.lassco-form-split > .wp-block-column,
.lassco-contact-panel > .wp-block-column {
	background: #fff;
	border: 1px solid var(--yh-border);
	border-radius: var(--yh-radius-card);
	padding: 1.25rem;
}

.lassco-step__num {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yh-orange);
}

.lassco-quote {
	font-size: clamp(1.4rem, 2.6vw, 2.2rem);
	line-height: 1.2;
	letter-spacing: -0.022em;
	margin: 0;
	font-weight: 400;
}

.lassco-logo-chip,
.lassco-chip-row > * {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.8rem;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--yh-radius-pill);
	border: 1px solid var(--yh-border);
	background: #fff;
	color: var(--yh-ink);
}

.lassco-logo-strip {
	background: var(--yh-cream-alt);
	border-top: 1px solid var(--yh-border);
	border-bottom: 1px solid var(--yh-border);
}

.lassco-services,
.lassco-final-cta,
.lassco-cta,
.lassco-quote-band {
	background: var(--yh-ink);
	color: #fff;
}

.lassco-services .lassco-title,
.lassco-final-cta .lassco-title,
.lassco-services p,
.lassco-final-cta p,
.lassco-cta h2,
.lassco-cta p,
.lassco-quote-band p,
.lassco-service-card h3,
.lassco-service-card p {
	color: #fff !important;
}

.lassco-service-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--yh-radius-card);
	padding: 1.5rem 1.25rem;
	width: 100%;
}

.lassco-feature-grid,
.lassco-action-grid,
.lassco-resource-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.lassco-faq { background: var(--yh-cream); }

@media (max-width: 781px) {
	.lassco-feature-grid,
	.lassco-action-grid,
	.lassco-resource-list {
		grid-template-columns: 1fr;
	}
}


/* =========================================================================
   About-page blocks — Slate & Marigold
   yh-page-hero, yh-story-split, yh-mv, yh-values, yh-cta-ink
   ========================================================================= */


/* === Page hero (centered) ===
 * Depth is layered via pseudo-elements so no per-page markup change is
 * needed: ::before = soft orange bloom + ambient vignette, ::after = a
 * faint dot-grid texture so the dark band reads as atmosphere, not a
 * flat slab. */
.yh-page-hero--centered {
	position: relative;
	overflow: hidden;
	padding: clamp(108px, 13vw, 168px) 40px clamp(80px, 9vw, 116px);
	text-align: center;
	isolation: isolate;
}

.yh-page-hero--centered::before,
.yh-page-hero--centered::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}

/* Bloom (top-right warm glow) + ambient vignette (focuses the centre). */
.yh-page-hero--centered::before {
	background:
		radial-gradient(90% 70% at 84% -10%, rgba(255, 138, 61, 0.20), transparent 55%),
		radial-gradient(70% 60% at 12% 8%, rgba(28, 61, 90, 0.55), transparent 60%),
		radial-gradient(120% 120% at 50% 120%, rgba(0, 0, 0, 0.45), transparent 60%);
}

/* Fine dot-grid texture, very low opacity, masked to fade out at edges. */
.yh-page-hero--centered::after {
	background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
	background-size: 26px 26px;
	background-position: center;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 78%);
	mask-image: radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 78%);
}

.yh-page-hero--centered .yh-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 920px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Centred eyebrow gets twin lead-rules so it reads as a deliberate
 * kicker rather than floating text. */
.yh-page-hero--centered .yh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 12.5px;
	letter-spacing: 0.18em;
}

.yh-page-hero--centered .yh-eyebrow::before,
.yh-page-hero--centered .yh-eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.yh-page-hero--centered h1 {
	font-size: clamp(44px, 5.6vw, 88px);
	line-height: 1.02;
	letter-spacing: -0.032em;
	font-weight: 500;
	margin: 22px 0 0;
	max-width: 14ch;
}

.yh-page-hero--centered .yh-page-hero__lede {
	font-size: 19px;
	line-height: 1.55;
	margin: 26px auto 0;
	max-width: 600px;
	opacity: 0.82;
}

.yh-page-hero--ink {
	background: var(--yh-ink);
	color: #fff;
}
.yh-page-hero--ink h1,
.yh-page-hero--ink p { color: #fff; }
.yh-page-hero--ink .yh-eyebrow { color: var(--yh-orange); }

.yh-page-hero--navy {
	background: var(--yh-navy);
	color: #fff;
}
.yh-page-hero--navy h1,
.yh-page-hero--navy p { color: #fff; }
.yh-page-hero--navy .yh-eyebrow { color: var(--yh-orange); }

/* Cream centred hero: warm-toned bloom, ink dot-grid (no white-on-dark). */
.yh-page-hero--cream {
	background: var(--yh-cream);
	color: var(--yh-ink);
}
.yh-page-hero--cream::before {
	background:
		radial-gradient(90% 70% at 84% -10%, rgba(255, 138, 61, 0.16), transparent 55%),
		radial-gradient(120% 120% at 50% 125%, rgba(22, 32, 43, 0.06), transparent 60%);
}
.yh-page-hero--cream::after {
	background-image: radial-gradient(rgba(22, 32, 43, 0.05) 1px, transparent 1.4px);
}
.yh-page-hero--cream .yh-eyebrow { color: var(--yh-orange); }


/* === Page hero (full-bleed photo) === */
.yh-page-hero--photo {
	position: relative;
	min-height: 78vh;
	margin-top: -74px;
	color: #fff;
	overflow: hidden;
	display: flex;
}

.yh-page-hero__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 65%;
	background-repeat: no-repeat;
}

.yh-page-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22, 32, 43, 0.55) 0%, rgba(22, 32, 43, 0.4) 50%, rgba(22, 32, 43, 0.85) 100%);
}

.yh-page-hero__bloom {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 80% at 90% 0%, rgba(255, 138, 61, 0.22), transparent 50%);
	pointer-events: none;
}

.yh-page-hero--photo .yh-page-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1360px;
	margin: 0 auto;
	padding: 180px 40px 70px;
	width: 100%;
	min-height: 78vh;
	display: grid;
	align-content: space-between;
	gap: 40px;
}

.yh-page-hero--photo .yh-page-hero__content {
	max-width: 980px;
}

.yh-page-hero--photo .yh-eyebrow {
	color: rgba(255, 255, 255, 0.85);
}

.yh-page-hero__heading {
	font-size: clamp(52px, 7.2vw, 108px);
	line-height: 0.98;
	letter-spacing: -0.035em;
	font-weight: 500;
	margin: 28px 0 0;
	color: #fff;
}

.yh-page-hero__heading em,
.wp-block-yrec-page-hero h1 em {
	font-style: italic;
	color: var(--yh-orange);
}

/* On the navy variant of page-hero, italic accents read better in cream */
.yh-page-hero--navy .yh-page-hero__heading em,
.wp-block-yrec-page-hero.has-navy-background-color h1 em {
	color: var(--yh-cream);
}

.yh-page-hero--photo .yh-page-hero__lede {
	font-size: 20px;
	line-height: 1.5;
	max-width: 600px;
	margin-top: 28px;
	opacity: 0.88;
	font-weight: 400;
	color: #fff;
}

.yh-page-hero__crumbs {
	display: flex;
	gap: 48px;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	flex-wrap: wrap;
}

.yh-page-hero__crumb {
	color: #fff;
	font-size: 14.5px;
	text-decoration: none;
	opacity: 0.8;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: opacity .2s var(--yh-ease);
}

.yh-page-hero__crumb:hover { opacity: 1; }

.yh-page-hero__crumb-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yh-orange);
}


/* === Page hero (split) — title/lede + 2-image collage ===
 * Inherits the cream/ink/navy band tokens via .yh-page-hero--{background}. */
.yh-page-hero--split {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.yh-page-hero__split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
	max-width: 1360px;
	margin: 0 auto;
	padding: clamp(120px, 13vw, 168px) 40px clamp(72px, 9vw, 108px);
}

.yh-page-hero--split .yh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 12.5px;
	letter-spacing: 0.18em;
}

.yh-page-hero--split h1 {
	font-size: clamp(40px, 5vw, 76px);
	line-height: 1.03;
	letter-spacing: -0.03em;
	font-weight: 500;
	margin: 22px 0 0;
	max-width: 16ch;
}

.yh-page-hero--split .yh-page-hero__lede {
	font-size: 19px;
	line-height: 1.55;
	margin: 26px 0 0;
	max-width: 46ch;
	opacity: 0.82;
}

.yh-page-hero__collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.yh-page-hero__collage-img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}

/* Offset the first tile so the pair reads as a deliberate collage. */
.yh-page-hero__collage > :first-child {
	margin-top: 36px;
}

@media (max-width: 900px) {
	.yh-page-hero__split {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-top: clamp(96px, 18vw, 120px);
	}
	.yh-page-hero__collage > :first-child { margin-top: 0; }
}


/* === Canonical compact hero — ONE layout for every non-home hero ===
 * Every section/archive/single/taxonomy hero (page-hero photo, cpt-hero,
 * taxonomy-hero) renders identically: a ~44vh band, background photo + scrim,
 * with the eyebrow / H1 / lede CENTERED. Same sizes everywhere. The only
 * exceptions are the Home slideshow and the Warburton split collage.
 *
 * These selectors intentionally cover all three block wrappers, which all carry
 * `.yh-page-hero--compact` plus either `--photo` (image) or `--centered --ink`
 * (gradient fallback when no image is set yet). */

/* Height — identical for photo and gradient fallback. */
.yh-page-hero--compact:not(.yh-page-hero--split) {
	min-height: clamp(320px, 44vh, 460px);
	padding: 0 40px;
	display: flex;
}

/* Centered content column — same for photo + gradient, overriding the old
 * left-aligned photo layout and the centered gradient padding block. */
.yh-page-hero--compact:not(.yh-page-hero--split) .yh-page-hero__inner {
	position: relative;
	z-index: 2;
	min-height: clamp(320px, 44vh, 460px);
	max-width: 900px;
	margin: 0 auto;
	width: 100%;
	padding: 118px 0 46px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0;
}
.yh-page-hero--compact:not(.yh-page-hero--split) .yh-page-hero__content {
	max-width: 900px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Uniform type — eyebrow, heading, lede identical across every hero. */
.yh-page-hero--compact:not(.yh-page-hero--split) .yh-eyebrow {
	font-size: 12.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--yh-orange);
	margin: 0;
}
.yh-page-hero--compact:not(.yh-page-hero--split) h1,
.yh-page-hero--compact:not(.yh-page-hero--split) .yh-page-hero__heading {
	font-size: clamp(36px, 4.4vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.03em;
	font-weight: 500;
	margin: 18px 0 0;
	max-width: 20ch;
}
.yh-page-hero--compact:not(.yh-page-hero--split) .yh-page-hero__lede {
	font-size: 18px;
	line-height: 1.55;
	max-width: 60ch;
	margin: 18px auto 0;
	opacity: 0.9;
	text-align: center;
}

/* No decorative lead-rule dashes on the eyebrow in any compact hero. */
.yh-page-hero--compact .yh-eyebrow::before,
.yh-page-hero--compact .yh-eyebrow::after {
	content: none;
}

/* Photo variant: image + scrim fill the band; text sits above. The gradient
 * fallback (--centered --ink) already paints its own dark background. */
.yh-page-hero--compact.yh-page-hero--photo { color: #fff; }
.yh-page-hero--compact.yh-page-hero--photo .yh-eyebrow,
.yh-page-hero--compact.yh-page-hero--centered.yh-page-hero--ink .yh-eyebrow {
	color: var(--yh-orange);
}
.yh-page-hero--compact.yh-page-hero--photo h1,
.yh-page-hero--compact.yh-page-hero--photo .yh-page-hero__lede { color: #fff; }

/* Compact split (Warburton only) keeps its two-column collage rhythm. */
.yh-page-hero--compact .yh-page-hero__split {
	padding: clamp(104px, 11vw, 132px) 40px clamp(52px, 6vw, 72px);
	gap: 40px;
}
.yh-page-hero--compact .yh-page-hero__collage { gap: 12px; }
.yh-page-hero--compact .yh-page-hero__collage-img { aspect-ratio: 4 / 3; }
.yh-page-hero--compact .yh-page-hero__collage > :first-child { margin-top: 24px; }

@media (max-width: 600px) {
	.yh-page-hero--compact:not(.yh-page-hero--split),
	.yh-page-hero--compact:not(.yh-page-hero--split) .yh-page-hero__inner {
		min-height: clamp(280px, 52vw, 360px);
	}
	.yh-page-hero--compact:not(.yh-page-hero--split) .yh-page-hero__inner {
		padding-top: 100px;
		padding-bottom: 36px;
	}
}


/* === Story split — image + body variant === */
.yh-story-split--img-left,
.yh-story-split--img-right {
	padding: 120px 40px;
}

.yh-story-split--img-left .yh-story-split__grid,
.yh-story-split--img-right .yh-story-split__grid {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.yh-story-split--img-right .yh-story-split__grid {
	grid-template-areas: "body media";
}
.yh-story-split--img-right .yh-story-split__media { grid-area: media; }
.yh-story-split--img-right .yh-story-split__body  { grid-area: body; }

.yh-story-split__media {
	margin: 0;
}

.yh-story-split__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* No image set: drop the empty media column and let the body span full width. */
.yh-story-split--img-left .yh-story-split__grid:not(:has(.yh-story-split__media img)),
.yh-story-split--img-right .yh-story-split__grid:not(:has(.yh-story-split__media img)) {
	grid-template-columns: 1fr;
	grid-template-areas: "body";
	max-width: 760px;
}
.yh-story-split__grid:not(:has(.yh-story-split__media img)) .yh-story-split__media {
	display: none;
}

.yh-story-split__body h2 {
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.06;
	letter-spacing: -0.025em;
	font-weight: 500;
	margin: 0 0 8px;
	color: var(--yh-ink);
}

.yh-story-split__rule {
	border: 0;
	border-top: 2px solid var(--yh-orange);
	width: 48px;
	margin: 0 0 24px;
}

.yh-story-split__body .yh-story-split__copy {
	font-size: 17px;
	line-height: 1.65;
	color: var(--yh-ink-muted);
}

.yh-story-split__body .yh-story-split__copy p { margin: 0 0 1em; }
.yh-story-split__body .yh-story-split__copy p:last-child { margin-bottom: 0; }
.yh-story-split__body .yh-story-split__copy a {
	color: var(--yh-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 900px) {
	.yh-story-split--img-left .yh-story-split__grid,
	.yh-story-split--img-right .yh-story-split__grid {
		grid-template-columns: 1fr;
		grid-template-areas: "media" "body";
		gap: 40px;
	}
	.yh-story-split--img-left,
	.yh-story-split--img-right { padding: 80px 24px; }
}


/* === Story split — timeline + manifesto variant === */
.yh-story-split--timeline {
	background: var(--yh-cream);
	padding: 120px 40px;
}

.yh-story-split--timeline .yh-story-split__grid {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
}

.yh-story-split__h {
	font-size: clamp(36px, 3.6vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	font-weight: 500;
	margin: 20px 0 32px;
	color: var(--yh-ink);
}

.yh-story-split__stamps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.yh-story-split__stamp {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 20px;
	align-items: flex-start;
}

.yh-story-split__year {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid rgba(22, 32, 43, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--yh-navy);
	background: #fff;
}

.yh-story-split__label {
	font-size: 15.5px;
	line-height: 1.5;
	color: rgba(22, 32, 43, 0.78);
	padding-top: 24px;
}

.yh-story-split__lede {
	font-size: clamp(26px, 2.4vw, 38px);
	line-height: 1.28;
	letter-spacing: -0.018em;
	color: var(--yh-ink);
	font-weight: 400;
	margin: 0;
}

.yh-story-split__lede em {
	font-style: italic;
	color: var(--yh-navy);
}

.yh-story-split--timeline .yh-story-split__copy {
	font-size: 17px;
	line-height: 1.65;
	color: rgba(22, 32, 43, 0.72);
	margin: 32px 0 0;
	max-width: 620px;
}

.yh-story-split--timeline .yh-story-split__copy p + p { margin-top: 1em; }

.yh-story-split__quote {
	margin: 48px 0 0;
	border-left: 2px solid var(--yh-orange);
	padding-left: 28px;
}

.yh-story-split__quote blockquote {
	font-size: 22px;
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: var(--yh-ink);
	font-weight: 400;
	margin: 0;
}

.yh-story-split__quote figcaption {
	margin-top: 16px;
	font-size: 13.5px;
	color: rgba(22, 32, 43, 0.6);
}


/* === Mission & Vision — navy band with portraits === */
.yh-mv--navy {
	background: var(--yh-navy);
	color: #fff;
	padding: 120px 40px;
	position: relative;
	overflow: hidden;
}

.yh-mv__bloom {
	position: absolute;
	top: -140px;
	left: -120px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 138, 61, 0.18), transparent 60%);
	pointer-events: none;
}

.yh-mv__ring {
	position: absolute;
	bottom: -180px;
	right: -180px;
	width: 540px;
	height: 540px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.yh-mv--navy .yh-mv__inner {
	max-width: 1360px;
	margin: 0 auto;
	position: relative;
}

.yh-mv--navy .yh-mv__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	margin-top: 32px;
	align-items: flex-start;
}

.yh-mv--navy.yh-mv--no-portraits .yh-mv__grid {
	grid-template-columns: minmax(0, 760px);
	justify-content: center;
	text-align: left;
}
.yh-mv--navy.yh-mv--no-portraits .yh-mv__copy { max-width: 760px; }

.yh-mv__h {
	font-size: clamp(40px, 4.6vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.028em;
	font-weight: 500;
	margin: 0 0 32px;
	color: #fff;
}

.yh-mv__pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	max-width: 560px;
}

.yh-mv__pillar-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yh-orange);
	margin-bottom: 16px;
	font-weight: 500;
}

.yh-mv__pillar-body {
	font-size: 18.5px;
	line-height: 1.55;
	opacity: 0.9;
	margin: 0;
	font-weight: 400;
	color: #fff;
}

.yh-mv__portraits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.yh-mv__portrait { margin: 0; }

.yh-mv__portrait-figure {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	aspect-ratio: 3 / 4;
}

.yh-mv__portrait-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yh-mv__portrait-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12));
}

.yh-mv__portrait-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 20px 18px;
	background: linear-gradient(180deg, transparent, rgba(22, 32, 43, 0.85));
	color: #fff;
}

.yh-mv__portrait-name {
	display: block;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.005em;
}

.yh-mv__portrait-role {
	display: block;
	font-size: 12.5px;
	opacity: 0.75;
	margin-top: 2px;
}


/* === Values grid (numbered + iconified) === */
.yh-values {
	background: var(--yh-cream);
	padding: 120px 40px;
}

.yh-values__head {
	max-width: 1360px;
	margin: 0 auto 56px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.yh-values__heading {
	font-size: clamp(38px, 4.2vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--yh-ink);
	font-weight: 500;
	max-width: 720px;
}

.yh-values__grid {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.yh-values--icons .yh-values__grid {
	grid-template-columns: repeat(4, 1fr);
}

.yh-values__item {
	background: #fff;
	border-radius: 16px;
	border: 1px solid rgba(22, 32, 43, 0.06);
	padding: 40px 40px 44px;
	transition: transform .3s var(--yh-ease), box-shadow .3s var(--yh-ease);
	box-shadow: 0 2px 6px rgba(22, 32, 43, 0.04);
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 28px;
}

.yh-values--icons .yh-values__item {
	grid-template-columns: 1fr;
	padding: 32px;
	gap: 16px;
}

.yh-values__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -20px rgba(22, 32, 43, 0.25);
}

.yh-values__num {
	font-size: 32px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--yh-orange);
	line-height: 1;
}

.yh-values__icon {
	color: var(--yh-orange);
}

.yh-values__icon svg { width: 28px; height: 28px; }

.yh-values__title {
	font-size: 26px;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--yh-ink);
	margin: 0;
}

.yh-values__copy {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(22, 32, 43, 0.7);
	margin: 12px 0 0;
}


/* === Testimonial cards (grid of quote cards) === */
.yh-tcards {
	padding: 120px 40px;
}
.yh-tcards--cream { background: var(--yh-cream); color: var(--yh-ink); }
.yh-tcards--white { background: #fff; color: var(--yh-ink); }

.yh-tcards__heading {
	max-width: 1360px;
	margin: 0 auto 56px;
	font-size: clamp(36px, 4.4vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	font-weight: 500;
	color: var(--yh-ink);
	text-align: center;
}
.yh-tcards__heading em { color: var(--yh-orange); font-style: italic; }

.yh-tcards__grid {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.yh-tcards__card {
	background: #fff;
	border: 1px solid var(--yh-border);
	border-radius: 18px;
	padding: 32px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.yh-tcards--white .yh-tcards__card { background: var(--yh-cream); border-color: var(--yh-border); }

/* Rotator (auto-fading) tcards: standard theme panel, just centred. */
.yh-tcards .yh-rotator--bare .yh-tcards__card,
.yh-tcards > .yh-tcards__card {
	padding: 40px 48px;
	gap: 24px;
	align-items: center;
	text-align: center;
}
.yh-tcards .yh-rotator--bare .yh-tcards__quote {
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.45;
}

/* Slower, graceful cross-fade for the bare rotator. */
.yh-rotator--bare .yh-rotator__slide {
	transition: opacity 900ms ease-in-out;
}

.yh-tcards__quote {
	font-size: 19px;
	line-height: 1.5;
	color: var(--yh-ink);
	margin: 0;
	font-weight: 400;
	letter-spacing: -0.005em;
}
.yh-tcards__quote p { margin: 0 0 12px; }
.yh-tcards__quote p:last-child { margin-bottom: 0; }

.yh-tcards__by {
	font-size: 14px;
	line-height: 1.4;
	color: var(--yh-ink-muted);
	font-weight: 500;
	letter-spacing: 0.01em;
	margin: 0;
}

@media (max-width: 1024px) {
	.yh-tcards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.yh-tcards { padding: 80px 24px; }
	.yh-tcards__grid { grid-template-columns: 1fr; }
	.yh-tcards__heading { margin-bottom: 40px; }
}


/* === FAQ accordion === */
.yh-faq {
	background: var(--yh-cream);
	padding: 120px 40px;
}

.yh-faq__heading {
	max-width: 880px;
	margin: 0 auto 48px;
	font-size: clamp(36px, 4.4vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	font-weight: 500;
	color: var(--yh-ink);
}
.yh-faq__heading em { color: var(--yh-orange); font-style: italic; }

.yh-faq__section {
	max-width: 880px;
	margin: 0 auto;
}
.yh-faq__section + .yh-faq__section { margin-top: 64px; }

.yh-faq__section-heading {
	margin: 0 0 16px;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--yh-ink);
}

.yh-faq__list {
	max-width: 880px;
	margin: 0 auto;
	border-top: 1px solid var(--yh-border);
}
.yh-faq__section .yh-faq__list { max-width: none; }

.yh-faq__item {
	border-bottom: 1px solid var(--yh-border);
}

.yh-faq__item > summary {
	list-style: none;
	cursor: pointer;
	padding: 24px 48px 24px 0;
	font-size: 19px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--yh-ink);
	letter-spacing: -0.005em;
	position: relative;
	transition: color .2s var(--yh-ease);
}
.yh-faq__item > summary::-webkit-details-marker { display: none; }
.yh-faq__item > summary::marker { content: ''; }

.yh-faq__item > summary::after {
	content: '';
	position: absolute;
	right: 8px;
	top: 50%;
	width: 14px;
	height: 14px;
	border-right: 2px solid var(--yh-ink);
	border-bottom: 2px solid var(--yh-ink);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .25s var(--yh-ease);
}
.yh-faq__item[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}
.yh-faq__item > summary:hover { color: var(--yh-orange); }

.yh-faq__answer {
	padding: 0 48px 28px 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--yh-ink-muted);
}
.yh-faq__answer p { margin: 0 0 12px; }
.yh-faq__answer p:last-child { margin-bottom: 0; }
.yh-faq__answer a { color: var(--yh-orange); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
	.yh-faq { padding: 80px 24px; }
	.yh-faq__heading { margin-bottom: 32px; }
	.yh-faq__section + .yh-faq__section { margin-top: 48px; }
	.yh-faq__item > summary { font-size: 17px; padding: 20px 40px 20px 0; }
	.yh-faq__answer { font-size: 16px; padding-right: 0; }
}


/* === CTA Ink — flat (default) === */
.yh-cta-ink {
	background: var(--yh-ink);
	color: #fff;
	padding: 80px 40px;
}

.yh-cta-ink--flat .yh-cta-ink__inner {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 60px;
	align-items: end;
}

.yh-cta-ink h2 {
	font-size: clamp(40px, 4.8vw, 76px);
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 500;
	margin: 24px 0 0;
	max-width: 840px;
	color: #fff;
}

.yh-cta-ink__copy p {
	font-size: 18px;
	line-height: 1.5;
	opacity: 0.75;
	max-width: 560px;
	margin-top: 28px;
	color: #fff;
}

.yh-cta-ink__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	position: relative;
	z-index: 2;
}

.yh-cta-ink__btn {
	border-radius: 999px;
	padding: 14px 22px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: opacity .2s var(--yh-ease), transform .2s var(--yh-ease);
}

.yh-cta-ink__btn--primary {
	background: var(--yh-orange);
	color: #fff;
}
.yh-cta-ink__btn--primary:hover { background: var(--yh-orange-hover); }

.yh-cta-ink__btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.yh-cta-ink__btn--ghost:hover { background: rgba(255, 255, 255, 0.06); }


/* === CTA Ink — rounded panel inside cream wrapper === */
.yh-cta-ink--rounded-panel {
	background: var(--yh-cream);
	color: var(--yh-ink);
	padding: 0 40px 120px;
}

.yh-cta-ink--rounded-panel .yh-cta-ink__panel {
	max-width: 1360px;
	margin: 0 auto;
	background: var(--yh-ink);
	color: #fff;
	border-radius: 24px;
	padding: 80px 64px;
	position: relative;
	overflow: hidden;
}

.yh-cta-ink__bloom {
	position: absolute;
	bottom: -80px;
	right: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: var(--yh-orange);
	opacity: 0.85;
	pointer-events: none;
}

.yh-cta-ink__ring {
	position: absolute;
	bottom: 40px;
	right: 80px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	pointer-events: none;
}

.yh-cta-ink--rounded-panel .yh-cta-ink__inner {
	position: relative;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 60px;
	align-items: end;
}


/* === Responsive: ≤1024px collapse two-cols → single === */
@media (max-width: 1024px) {
	.yh-story-split--timeline .yh-story-split__grid,
	.yh-mv--navy .yh-mv__grid,
	.yh-cta-ink--flat .yh-cta-ink__inner,
	.yh-cta-ink--rounded-panel .yh-cta-ink__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.yh-values--icons .yh-values__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781px) {
	.yh-page-hero--centered { padding: 100px 24px 70px; }
	.yh-page-hero--photo .yh-page-hero__inner { padding: 140px 24px 56px; }
	.yh-page-hero__crumbs { gap: 24px; }

	.yh-story-split--timeline,
	.yh-values,
	.yh-mv--navy {
		padding: 80px 24px;
	}

	.yh-cta-ink--rounded-panel { padding: 0 16px 80px; }
	.yh-cta-ink--rounded-panel .yh-cta-ink__panel { padding: 56px 28px; }
	.yh-cta-ink--flat { padding: 64px 24px; }

	.yh-values__grid,
	.yh-values--icons .yh-values__grid {
		grid-template-columns: 1fr;
	}

	.yh-values__item {
		grid-template-columns: 64px 1fr;
		padding: 28px;
		gap: 20px;
	}

	.yh-mv__portraits {
		gap: 10px;
	}

	.yh-story-split__stamp {
		grid-template-columns: 64px 1fr;
		gap: 16px;
	}

	.yh-story-split__year { width: 56px; height: 56px; font-size: 14px; }
	.yh-story-split__label { padding-top: 18px; }
}

/* === Header narrow-viewport fixes (avoid CTA wrap < 600px) === */
@media (max-width: 600px) {
	.site-header .alignwide {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.site-header .yh-members-link--icon { padding: 6px; }

	/* Collapse the "Log in" link to an icon-only pill to save room. */
	.site-header .yh-members-link--login { padding: 6px; gap: 0; }
	.site-header .yh-members-link--login .yh-members-link__label { display: none; }

	.site-header .wp-block-button__link {
		font-size: 13px;
		padding-top: 9px !important;
		padding-bottom: 9px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	/* Tighten the right-hand block-gap when the nav collapses to the overlay button */
	.site-header .wp-block-group {
		--wp--style--block-gap: 12px;
	}
}

/* Mobile-only nav links surface inside the overlay; hide at desktop widths
   where the dedicated members icon + Book a tour button already cover them. */
.site-header .wp-block-navigation:not(.is-menu-open) .yh-nav-link--mobile-only,
.site-header .wp-block-navigation__container > .yh-nav-link--mobile-only {
	display: none;
}
.site-header .wp-block-navigation__responsive-container.has-modal-open .yh-nav-link--mobile-only {
	display: block;
}

/* === Single Tenant / Story template === */

/* Hero band — reuses .yh-page-hero--photo but a tenant header doesn't need the
   full 78vh viewport hero height; keep it a tidy banner. */
.yh-tenant-hero-band.yh-page-hero--photo,
.yh-tenant-hero-band .yh-page-hero__inner {
	min-height: 0;
}

.yh-tenant-hero-band .yh-page-hero__inner {
	padding-top: 150px;
	padding-bottom: 56px;
	align-content: end;
}

.yh-tenant-hero-band__back {
	display: inline-block;
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.yh-tenant-hero-band__back:hover {
	color: #fff;
}

.yh-tenant-hero-band .yh-page-hero__heading {
	font-size: clamp(40px, 5vw, 72px);
	margin-top: 0;
}


/* === CPT single hero band (yrec/cpt-hero) ===
 * Compact banner over a CPT single. Photo variant = light text on the image;
 * gradient fallback = ink band (also light text). Reuses .yh-page-hero--compact
 * for height. */
.yh-cpt-hero .yh-page-hero__content {
	position: relative;
	z-index: 2;
}

/* Back-link sits centered above the eyebrow (canonical centered hero). */
.yh-cpt-hero__nav { margin-bottom: 12px; }

.yh-cpt-hero__back {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}
.yh-cpt-hero__back:hover { color: #fff; }

/* Featured portrait now lives in the body's left column at its natural size —
   no upscaling, no full-width stretch (which pixelated the small headshots). */
.yh-tenant-single__portrait {
	margin-top: 0;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
	max-width: 340px;
}

.yh-tenant-single__portrait img {
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.yh-tenant-single__body .yh-tenant-single__columns {
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 3rem);
}

/* Story runs full width below the portrait + About header row, but its line
   length is capped so long prose stays readable. */
.yh-tenant-single__body .wp-block-post-content {
	max-width: 760px;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.yh-tenant-single__body .wp-block-post-content p {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--yh-ink, #16202b);
}

.yh-tenant-single__body .wp-block-post-content p:first-child {
	margin-top: 0;
}

@media (max-width: 781px) {
	.yh-tenant-single__body .yh-tenant-single__columns {
		flex-direction: column;
	}

	.yh-tenant-single__body .yh-tenant-single__columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
}

/* === Partner single === */
.yh-partner-single__logo {
	margin-top: 0;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
	max-width: 340px;
}

.yh-partner-single__logo img {
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.yh-partner-single__body .yh-partner-single__columns {
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.yh-partner-single__body .wp-block-post-content {
	max-width: 760px;
}

.yh-partner-single__body .wp-block-post-content p {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--yh-ink, #16202b);
}

.yh-partner-single__body .wp-block-post-content p:first-child {
	margin-top: 0;
}

/* No logo uploaded yet — the left column collapses to nothing, so let the
   detail column take the full width rather than leaving a dead gutter. */
.yh-partner-single__columns > .wp-block-column:first-child:not(:has(img)) {
	display: none;
}

@media (max-width: 781px) {
	.yh-partner-single__body .yh-partner-single__columns {
		flex-direction: column;
	}

	.yh-partner-single__body .yh-partner-single__columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
}

/* === Board / Team grid (shortcode [yrec_team_grid]) === */
.yh-team-grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.yh-team-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.yh-team-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.yh-team-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.yh-team-card {
	display: flex;
	flex-direction: column;
	background: var(--yh-white, #fff);
	border: 1px solid var(--yh-border, #ddd6c8);
	border-radius: var(--yh-radius-card, 18px);
	overflow: hidden;
	transition: transform 0.18s var(--yh-ease, ease), box-shadow 0.18s var(--yh-ease, ease);
}

.yh-team-card:hover,
.yh-team-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(28, 61, 90, 0.1);
}

.yh-team-card__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.yh-team-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--yh-cream-alt, #efe8db);
}

.yh-team-card__media .yh-team-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.yh-team-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1.1rem 1.25rem 1.25rem;
}

.yh-team-card__name {
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--yh-navy, #1c3d5a);
	transition: color 0.18s var(--yh-ease, ease);
}

.yh-team-card__link:hover .yh-team-card__name,
.yh-team-card__link:focus-visible .yh-team-card__name {
	color: var(--yh-orange, #ff8a3d);
}

.yh-team-card__role {
	font-size: 0.9rem;
	color: var(--yh-ink-muted, #4a5561);
}

.yh-team-card__linkedin {
	margin: 0 1.25rem 1.1rem;
	font-size: 0.85rem;
	color: var(--yh-ink-muted, #4a5561);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.yh-team-card__linkedin:hover,
.yh-team-card__linkedin:focus-visible {
	color: var(--yh-orange, #ff8a3d);
}

/* === Single Team Member template === */
.yh-team-single__columns {
	align-items: flex-start;
	gap: clamp(1.75rem, 5vw, 3.5rem);
}

.yh-team-single__media {
	margin: 0;
}

.yh-team-single__media img {
	width: 100%;
	height: auto;
	border-radius: 18px;
	display: block;
}

.yh-team-single__role {
	margin: 0.5rem 0 0;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: var(--yh-ink-muted, #4a5561);
}

.yh-team-single__body .wp-block-post-content p {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--yh-ink, #16202b);
}

/* First bio paragraph often opens with a pull-style quote — lift it. */
.yh-team-single__body .wp-block-post-content p:first-child {
	margin-top: 0;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--yh-navy, #1c3d5a);
}

@media (max-width: 781px) {
	.yh-team-single__columns {
		flex-direction: column;
	}

	.yh-team-single__columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}

	.yh-team-single__media {
		max-width: 380px;
	}
}

/* === Single Space template === */
.yh-space-single__lede {
	color: var(--yh-ink-muted, #4a5561);
	max-width: 60ch;
}

.yh-space-single__body .yh-space-single__columns {
	align-items: flex-start;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.yh-space-single__body .wp-block-post-content p {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--yh-ink, #16202b);
}

@media (max-width: 781px) {
	.yh-space-single__body .yh-space-single__columns {
		flex-direction: column;
	}

	.yh-space-single__body .yh-space-single__columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
}

/* === Single Service template === */
.yh-service-single__lede {
	color: var(--yh-ink-muted, #4a5561);
	max-width: 60ch;
}

.yh-service-single__body .yh-service-single__columns {
	align-items: flex-start;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.yh-service-single__body .wp-block-post-content > * + * {
	margin-top: 1.1rem;
}

.yh-service-single__body .wp-block-post-content p {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--yh-ink, #16202b);
}

.yh-service-single__body .wp-block-post-content h2,
.yh-service-single__body .wp-block-post-content h3 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}

/* On narrow viewports columns stack — detail panel drops below content, keep it readable */
@media (max-width: 781px) {
	.yh-service-single__body .yh-service-single__columns {
		flex-direction: column;
	}

	.yh-service-single__body .yh-service-single__columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
}


/* =========================================================================
   Member dashboard header (yrec/dashboard-header)
   Full-bleed ink hero: personalised greeting + live membership status strip.
   Mirrors the .yh-page-hero--ink rhythm but adds a status row. Orange accents
   are restored here (the body.yh-member-area rule desaturates them by default,
   but navy is illegible on ink) — this section is appended after that rule so
   source order wins on equal specificity.
   ========================================================================= */
.yh-dash-hero {
	position: relative;
	overflow: hidden;
	background: var(--yh-ink);
	color: #fff;
	padding: 140px 40px 60px;
}
.yh-dash-hero__bloom {
	position: absolute;
	top: -160px;
	right: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 138, 61, 0.22), rgba(255, 138, 61, 0) 70%);
	pointer-events: none;
}
/* Optional background photo — sits behind the ink scrim + status content. */
.yh-dash-hero__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 0;
}
.yh-dash-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(22, 32, 43, 0.72) 0%, rgba(22, 32, 43, 0.6) 45%, rgba(22, 32, 43, 0.9) 100%);
}
.yh-dash-hero--photo { background: var(--yh-ink); }
.yh-dash-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1360px;
	margin: 0 auto;
}
.yh-dash-hero__intro { max-width: 760px; }
body.yh-member-area .yh-dash-hero .yh-eyebrow,
.yh-dash-hero .yh-eyebrow { color: var(--yh-orange); }
.yh-dash-hero__heading {
	font-size: clamp(40px, 5vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.032em;
	font-weight: 500;
	margin: 0;
	color: #fff;
}
body.yh-member-area .yh-dash-hero .yh-dash-hero__heading em,
.yh-dash-hero__heading em {
	font-style: italic;
	color: var(--yh-orange);
}
.yh-dash-hero__lede {
	font-size: 19px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
	max-width: 600px;
	margin: 22px 0 0;
}

/* Status row */
.yh-dash-hero__status {
	margin-top: 48px;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.yh-dash-status {
	display: flex;
	align-items: center;
	gap: 48px;
	flex-wrap: wrap;
}
.yh-dash-status__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.yh-dash-status__item .yh-eyebrow {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
}
.yh-dash-status__value {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: #fff;
}
.yh-dash-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--yh-orange);
	flex: none;
}
.yh-dash-dot--active   { background: #5fb97d; box-shadow: 0 0 0 4px rgba(95, 185, 125, 0.18); }
.yh-dash-dot--past_due { background: var(--yh-orange); box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.18); }
.yh-dash-dot--expired  { background: #e06b5e; box-shadow: 0 0 0 4px rgba(224, 107, 94, 0.18); }
.yh-dash-dot--preview  { background: var(--yh-orange); box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.18); }

/* Manage button — ghost on dark */
.yh-dash-status__cta { margin-left: auto; }
.yh-btn--ghost-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
}
.yh-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }
.yh-btn--ghost-light:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 880px) {
	.yh-dash-hero { padding: 120px 24px 48px; }
	.yh-dash-status { gap: 28px 36px; }
	.yh-dash-status__cta { margin-left: 0; flex-basis: 100%; }
	.yh-btn--ghost-light { width: fit-content; }
}
@media (max-width: 600px) {
	.yh-dash-hero { padding: 104px 22px 44px; }
}

/* === Header search trigger + overlay (yrec/search-trigger) === */
.yh-search-trigger-wrap {
	display: inline-flex;
	align-items: center;
}

.site-header .yh-search-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: var(--yh-radius-pill);
	border: 1px solid currentColor;
	background: transparent;
	color: var(--yh-ink);
	line-height: 0;
	cursor: pointer;
	transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.site-header .yh-search-trigger:hover,
.site-header .yh-search-trigger[aria-expanded="true"] {
	color: var(--yh-white, #fff);
	background: var(--yh-orange);
	border-color: var(--yh-orange);
}

.site-header .yh-search-trigger svg { width: 20px; height: 20px; display: block; }

/* Overlay — fixed, full-width, slides down from the top. */
.yh-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	background: rgba(20, 30, 42, 0.55);
	opacity: 0;
	transition: opacity .2s ease;
}

/* The [hidden] attribute must win over display:flex, otherwise the invisible
   (opacity:0) overlay stays in the layout and intercepts clicks on the header. */
.yh-search-overlay[hidden] { display: none; }

.yh-search-overlay[data-open="true"] { opacity: 1; }

.yh-search-overlay__panel {
	width: 100%;
	max-width: 760px;
	margin: 0 24px;
	margin-top: clamp(72px, 12vh, 140px);
	background: var(--yh-white, #fff);
	border-radius: var(--yh-radius-card-lg, 16px);
	box-shadow: 0 24px 60px rgba(20, 30, 42, 0.28);
	overflow: hidden;
	transform: translateY(-14px);
	transition: transform .22s ease;
}

.yh-search-overlay[data-open="true"] .yh-search-overlay__panel { transform: translateY(0); }

.yh-search-overlay__form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--yh-border, #DDD6C8);
}

.yh-search-overlay__icon { color: var(--yh-ink-soft); line-height: 0; }
.yh-search-overlay__icon svg { display: block; }

.yh-search-overlay__input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 20px;
	color: var(--yh-ink);
}

.yh-search-overlay__input::placeholder { color: var(--yh-ink-soft); }

.yh-search-overlay__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--yh-radius-pill);
	background: transparent;
	color: var(--yh-ink-muted);
	cursor: pointer;
	line-height: 0;
}

.yh-search-overlay__close:hover { color: var(--yh-orange); }

.yh-search-overlay__results-wrap { padding: 12px 0 16px; max-height: 60vh; overflow-y: auto; }

.yh-search-overlay__hint,
.yh-search-overlay__empty {
	margin: 0;
	padding: 14px 22px;
	color: var(--yh-ink-soft);
	font-size: 15px;
}

.yh-search-overlay__results { list-style: none; margin: 0; padding: 0; }

.yh-search-overlay__result-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	text-decoration: none;
	color: var(--yh-ink);
	transition: background .15s ease;
}

.yh-search-overlay__result-link:hover,
.yh-search-overlay__result-link:focus { background: var(--yh-cream, #F6F1E8); }

.yh-search-overlay__badge {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--yh-orange);
	background: rgba(255, 138, 61, 0.12);
	padding: 3px 9px;
	border-radius: var(--yh-radius-pill);
}

.yh-search-overlay__result-title {
	font-size: 16px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yh-search-overlay__all {
	display: inline-block;
	margin: 8px 22px 4px;
	font-weight: 600;
	font-size: 15px;
	color: var(--yh-orange);
	text-decoration: none;
}

/* [hidden] must win over the display above, or the link stays visible. */
.yh-search-overlay__all[hidden] { display: none; }

.yh-search-overlay__all:hover { color: var(--yh-orange-hover); text-decoration: underline; }

@media (max-width: 600px) {
	.yh-search-overlay__panel { margin: 56px 14px 0; }
	.yh-search-overlay__input { font-size: 18px; }
}

/* ============================================================
   Floating "Contact us" button (Home page) — see
   yrec_hub_contact_fab() in functions.php. Icon-only FAB,
   fixed bottom-right, with a label that reveals on hover/focus.
   ============================================================ */
.yh-contact-fab {
	position: fixed;
	right: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 56px;
	min-width: 56px;
	padding: 0;
	border-radius: 999px;
	background: var(--yh-orange);
	color: var(--yh-white);
	box-shadow: 0 8px 24px rgba(28, 61, 90, 0.28);
	text-decoration: none;
	overflow: hidden;
	transition: background .18s ease, box-shadow .18s ease, transform .18s ease, padding .22s ease;
}
.yh-contact-fab .yh-icon {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	padding: 16px;
	box-sizing: border-box;
}
/* Label is collapsed by default (icon-only); expands on hover/focus. */
.yh-contact-fab__tip {
	max-width: 0;
	white-space: nowrap;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	opacity: 0;
	transition: max-width .22s ease, opacity .18s ease, padding .22s ease;
}
.yh-contact-fab:hover,
.yh-contact-fab:focus-visible {
	background: var(--yh-orange-hover);
	box-shadow: 0 12px 30px rgba(28, 61, 90, 0.34);
	transform: translateY(-2px);
	outline: none;
}
.yh-contact-fab:hover .yh-contact-fab__tip,
.yh-contact-fab:focus-visible .yh-contact-fab__tip {
	max-width: 12rem;
	opacity: 1;
	padding-right: 22px;
}
/* Keyboard focus ring for accessibility. */
.yh-contact-fab:focus-visible {
	box-shadow: 0 12px 30px rgba(28, 61, 90, 0.34), 0 0 0 3px var(--yh-white), 0 0 0 5px var(--yh-orange);
}
/* Tucked away while the footer is in view (set by the FAB script) so it never
   overlaps the footer's social icons / links. */
.yh-contact-fab.is-hidden {
	opacity: 0;
	transform: translateY(12px) scale(0.9);
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.yh-contact-fab,
	.yh-contact-fab__tip { transition: none; }
	.yh-contact-fab:hover,
	.yh-contact-fab:focus-visible { transform: none; }
}