/*
Theme Name: Yacht Charter Agents
Theme URI: https://yachtcharteragents.com
Author: Yacht Charter Agents
Author URI: https://yachtcharteragents.com
Description: Custom theme for Yacht Charter Agents — a boutique charter brokerage. Built around a custom "yacht" post type (no WooCommerce, no cart/checkout language). Voice: Warm Expertise. Charter-only focus (BVI, USVI, Bahamas, Belize, Spanish Virgin Islands, Seychelles, Leeward Islands, Windward Islands/Grenadines, Greece, Croatia, South Pacific & Asia).
Version: 0.19.9-20261023-currency-aware-rates
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: yca
*/

/* ==========================================================================
   Design tokens — Warm Expertise
   Swap these for real brand values once locked. Palette is a neutral
   placeholder: deep navy (trust/expertise) + warm sand/gold (approachable).
   ========================================================================== */

:root {
	--yca-navy: #12283f;
	--yca-navy-light: #1d3a56;
	--yca-navy-rgb: 18, 40, 63; /* channel triplet for rgba() overlays — keeps navy single-sourced (V4) */
	--yca-placeholder-gradient: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2728%27%20viewBox%3D%270%200%2056%2028%27%3E%3Cpath%20d%3D%27M-4%2020%20Q10%208%2024%2020%20T52%2020%20T80%2020%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.055%27%20stroke-width%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M-4%208%20Q10%20-4%2024%208%20T52%208%20T80%208%27%20fill%3D%27none%27%20stroke%3D%27%23d9b26a%27%20stroke-opacity%3D%270.05%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E"), linear-gradient(135deg, var(--yca-navy) 0%, var(--yca-navy-light) 100%); /* branded card placeholder — subtle brand wave texture layered over navy so photo-less panels read as an intentional brand surface, never a blank/broken "dark block" (PD-286, 2026-08-01). Layers are images only (no repeat keyword) so this works for both `background:` and `background-image:` consumers; default repeat tiles the wave. "No blank cards" (2026-07-25); single-sourced (V4) */
	--yca-sand: #d9b26a;
	--yca-sand-dark: #b8904c;
	--yca-cream: #faf7f1;
	--yca-white: #ffffff;
	--yca-ink: #1c1c1c;
	--yca-ink-muted: #5a6470;
	--yca-border: #e3ddd0;
	--yca-success: #3a6b52;
	--yca-danger: #9a3b2f;
	--yca-scuba: #0b5566; /* semantic dive accent (CPO-approved, 2026-07-26) — scuba/diving UI ONLY (badges, icons, dive category chips). NOT a global/secondary brand accent. */
	--yca-scuba-rgb: 11, 85, 102; /* triplet for rgba() scuba badge overlays */
	--yca-scuba-tint: #eaf6f6; /* pale scuba wash for the on-detail dive badge */
	--yca-radius: 6px;
	--yca-radius-lg: 10px;
	--yca-shadow: 0 2px 10px rgba(var(--yca-navy-rgb), 0.08);
	--yca-shadow-hover: 0 6px 20px rgba(var(--yca-navy-rgb), 0.14);
	--yca-max-width: 1200px;
	--yca-header-h: 160px; /* fixed-header height (116px logo + 22px×2 padding) — the top offset applied to #main on non-hero pages (Premium Transparent Header, 2026-07-26). Overridden smaller on phones below. */
	--yca-hero-h: 540px; /* single hero-height design system (CPO, 2026-07-26, revised): sized to the taller reference pages (Experiences ~520 / Talk to a Broker), ~+4% for balance, so NO page is shorter than the reference. Titles are top-anchored (align-items:flex-start below) so every hero's title sits at the same distance under the transparent header regardless of intro length. Homepage .yca-hero is the deliberate larger exception. Responsive values below. */
	--yca-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--yca-font-display: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body.yca {
	margin: 0;
	font-family: var(--yca-font-body);
	color: var(--yca-ink);
	background: var(--yca-white);
	line-height: 1.55;
}

.yca-container {
	max-width: var(--yca-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

h1, h2, h3, h4, h5, h6, .yca-display {
	font-family: var(--yca-font-display);
	color: var(--yca-navy);
	line-height: 1.2;
	margin: 0 0 0.5em;
}
/* h4–h6 were previously unstyled (browser-default sans/black) but ARE used in
   guide/content body copy — give them the serif-navy heading system and a
   sensible descending scale so heading hierarchy is consistent everywhere
   (final typography pass, 2026-07-25). */
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; letter-spacing: 0.01em; }

a { color: var(--yca-navy); }
a:hover { color: var(--yca-sand-dark); }

/* PRD-001 Launch Readiness Review addition (2026-07-12): no custom :focus
   styling existed anywhere in this file, so focus visibility on custom
   controls (carousel arrows/dots, the nav toggle, the lightbox, the new
   keyboard-operable photo-gallery tiles below) depended entirely on
   inconsistent browser defaults. This is purely additive — no existing
   outline:none rule is being overridden, nothing else changes visually
   except that keyboard focus is now clearly visible everywhere. */
:focus-visible {
	outline: 2px solid var(--yca-navy);
	outline-offset: 2px;
}
.yca-photo-gallery__tile:focus-visible { outline-offset: -2px; }

/* Skip-to-content link + main landmark (BL-83, 2026-07-25). The link is the
   first focusable element in the body (header.php); it is visually hidden
   off-screen until it receives keyboard focus, then slides into the top-left
   corner. Activating it moves focus to <main id="main"> (tabindex="-1"), so
   keyboard/AT users bypass the header/nav. No visible outline is drawn around
   the whole main region on that programmatic focus. */
.yca-skip-link {
	position: absolute;
	left: 8px;
	top: -48px;
	z-index: 1000;
	background: var(--yca-navy);
	color: var(--yca-white);
	padding: 10px 18px;
	border-radius: 0 0 var(--yca-radius) var(--yca-radius);
	text-decoration: none;
	font-weight: 600;
	transition: top 0.15s ease;
}
.yca-skip-link:focus {
	top: 0;
	outline: 2px solid var(--yca-white);
	outline-offset: -2px;
}
main { display: block; }
#main:focus { outline: none; }

/* ==========================================================================
   Buttons / CTAs — enquiry language only, never cart/checkout
   ========================================================================== */

.yca-btn {
	display: inline-block;
	padding: 13px 28px;
	border-radius: var(--yca-radius);
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.15s ease;
	font-size: 0.95rem;
}
/* Disabled / processing state — was missing; consistent across all buttons and
   used by the enquiry-form duplicate-submit guard (final button audit,
   2026-07-25). */
.yca-btn:disabled, .yca-btn[disabled], .yca-btn.is-submitting {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.yca-btn--primary {
	background: var(--yca-navy);
	color: var(--yca-white);
}
.yca-btn--primary:hover { background: var(--yca-navy-light); color: var(--yca-white); }

.yca-btn--secondary {
	background: transparent;
	border-color: var(--yca-navy);
	color: var(--yca-navy);
}
.yca-btn--secondary:hover { background: var(--yca-navy); color: var(--yca-white); }

.yca-btn--sticky-mobile {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 40;
	border-radius: 0;
	display: none;
	text-align: center;
	padding: 16px;
}

@media (max-width: 720px) {
	.yca-btn--sticky-mobile { display: block; }
}

/* ==========================================================================
   Site header / nav
   ========================================================================== */

.yca-site-header {
	border-bottom: 1px solid var(--yca-border);
	background: var(--yca-cream); /* warm off-white solid state (CPO Premium Transparent Header, 2026-07-26) */
	position: fixed; /* was sticky — now overlays the hero so it can go transparent over it; #main is offset by --yca-header-h below. */
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* The header is fixed, so the page content needs a top offset equal to the
   header's height. Overlay (dark-hero) pages zero this out and let the hero sit
   behind the transparent header — see the Premium Transparent Header block at
   the end of this file. */
#main { padding-top: var(--yca-header-h); }
/* Keep the header's own inner content above its transparent-mode scrim ::before. */
.yca-site-header__inner { position: relative; z-index: 1; }

/* Header composition (redesigned 2026-07-26 for a premium, spacious feel).
   The inner is a touch wider than the 1200px content column so the nav has
   room to breathe; generous vertical padding gives the bar presence. */
.yca-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 22px 40px;
	max-width: 1320px;
	margin: 0 auto;
}

/* Logo lockup: emblem only. The emblem artwork already contains the full
   "YACHT CHARTER AGENTS" wordmark, so the separate text label was redundant and
   crowded the lockup — it is hidden and the emblem carries the brand (its alt is
   the site name, so the home link keeps an accessible name). */
.yca-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* Logo enlarged ~75% (CPO, 2026-07-26) so the brand mark reads with presence,
   not like a favicon. The header height grows to match (generous padding kept)
   so the emblem breathes rather than being crammed into the old bar height.
   Brand hierarchy: logo first, then nav, then CTA. */
.yca-logo__image { height: 116px; width: auto; display: block; }
/* Dual-emblem logo (Premium Transparent Header, 2026-07-26): the dark emblem is
   the default (solid header + every non-hero page); the white emblem is hidden
   until the header is transparent over a dark hero (rules at end of file). */
.yca-logo__image--light { display: none; }
.yca-logo__text { display: none; }

/* Primary nav: open, evenly-weighted spacing; refined letter-spacing and the
   brand navy for the resting state (sand-gold on hover). */
.yca-nav ul { list-style: none; display: flex; align-items: center; gap: 40px; margin: 0; padding: 0; }
.yca-nav a { text-decoration: none; color: var(--yca-navy); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em; white-space: nowrap; }
.yca-nav a:hover { color: var(--yca-sand-dark); }

/* Header CTA sized ~12% smaller than the body button so it reads as balanced
   with the nav, not dominant — still clearly the primary action. */
/* 0.18.10 (B4): `.yca-nav a` carries white-space: nowrap but this button is a
   child of .yca-header-actions, not .yca-nav — so it was the one header element
   permitted to wrap, and therefore the one that absorbed any shortfall. Measured
   slack on the desktop row at its tightest supported width (1301px, just above
   the drawer breakpoint) was ~30px of 1221px: any difference in font metrics or
   emblem rendering consumes it, which is why it wraps on the real site and not
   in a local fixture. nowrap alone would convert the wrap into an overflow, so
   the nav rhythm is tightened above the drawer breakpoint to create real slack. */
.yca-nav__desktop-cta { padding: 11px 24px; font-size: 0.85rem; white-space: nowrap; }
@media (min-width: 1301px) {
	.yca-nav ul { gap: 30px; }
	.yca-site-header__inner { gap: 32px; }
}

/* Tighten the header's generous desktop side padding on small screens so the
   collapsed bar (emblem + menu button) isn't over-inset on phones. */
@media (max-width: 600px) {
	.yca-site-header__inner { padding: 14px 20px; }
	/* Scale the enlarged logo down on phones so it stays prominent without
	   dominating a narrow bar. */
	.yca-logo__image { height: 84px; }
}

/* Mobile navigation (Launch Blocker LR-001, 2026-07-11) — see header.php's
   doc comment for the full checkbox-driven hamburger approach. Desktop
   (>720px, matching the theme's one existing header breakpoint): hamburger
   toggle and the in-menu CTA copy are hidden, nav renders exactly as
   before. */
.yca-nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.yca-nav-toggle { display: none; }
.yca-nav__mobile-cta { display: none; }

/* Header phone number (PD-240, 2026-07-23) — see header.php's doc comment
   for the full desktop/mobile split rationale. Desktop variant is grouped
   with the existing CTA button inside .yca-header-actions, so it needs no
   layout rule of its own beyond typography matching .yca-nav a. Mobile
   variant is hidden here by default (matching .yca-nav__mobile-cta's own
   pattern immediately above) and only shown inside the drawer at the
   existing 720px breakpoint. */
.yca-header-actions { display: flex; align-items: center; gap: 20px; }
.yca-header-phone { text-decoration: none; color: var(--yca-ink); font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
.yca-header-phone:hover { color: var(--yca-sand-dark); }
.yca-header-phone--mobile { display: none; }

/* "Call a Charter Broker" phone disclosure (PD-303). The number is NOT in the
   markup — a trigger reveals it on demand (admin-ajax). Desktop: the trigger
   sits in .yca-header-actions next to "Start Planning", and the revealed number
   is a small popover below it. Mobile: trigger + inline panel inside the drawer.
   Footer: the same reusable control. Accessible disclosure (never hover-only);
   with JS off the trigger is a link to the Contact page. */
.yca-callbroker { position: relative; display: inline-flex; flex-direction: column; }
.yca-callbroker__trigger {
	display: inline-flex; align-items: center; gap: 7px;
	background: none; border: none; cursor: pointer; font-family: inherit;
	text-decoration: none; color: var(--yca-ink); font-weight: 500;
	font-size: 0.9rem; white-space: nowrap; padding: 8px 4px;
}
.yca-callbroker__trigger:hover, .yca-callbroker__trigger:focus-visible { color: var(--yca-sand-dark); }
.yca-callbroker__trigger .yca-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.yca-callbroker__panel {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
	width: 268px; max-width: 78vw;
	background: var(--yca-white); border: 1px solid var(--yca-border);
	border-radius: 10px; padding: 16px 18px; text-align: left;
	box-shadow: 0 12px 30px rgba(10, 42, 67, 0.16);
}
.yca-callbroker__panel[hidden] { display: none; }
.yca-callbroker__num {
	display: inline-block; font-family: Georgia, 'Iowan Old Style', serif;
	font-size: 1.35rem; font-weight: 500; color: var(--yca-navy);
	text-decoration: none; letter-spacing: 0.01em;
}
.yca-callbroker__num:hover, .yca-callbroker__num:focus-visible { color: var(--yca-sand-dark); }
.yca-callbroker__msg { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--yca-ink-muted); }
/* Mobile variant hidden by default (mirrors .yca-nav__mobile-cta); shown in the
   drawer at the 1300px breakpoint below. Desktop variant rides in
   .yca-header-actions, which is itself hidden below 1300px. */
.yca-callbroker--mobile { display: none; }
.yca-callbroker--footer { display: inline-flex; }
.yca-callbroker--footer .yca-callbroker__trigger { padding-left: 0; color: inherit; }
.yca-callbroker--footer .yca-callbroker__panel { right: auto; left: 0; bottom: calc(100% + 8px); top: auto; }

@media (max-width: 1300px) {
	.yca-callbroker--mobile { display: block; margin: 8px 4px 4px; }
	.yca-callbroker--mobile .yca-callbroker__trigger { font-size: 1.05rem; padding: 12px 4px; }
	.yca-callbroker--mobile .yca-callbroker__panel {
		position: static; width: auto; max-width: none; box-shadow: none; margin-top: 8px;
	}
}

/* PD-240 fix (2026-07-23): a live-site check caught the desktop phone link
   pushing "Talk to a Broker" fully off-screen in the 720-1000px window —
   .yca-site-header__inner has no flex-wrap outside the 720px mobile
   breakpoint, so extra width here doesn't wrap gracefully, it overflows.
   The pre-existing header (nav links + button only, no phone) was already
   confirmed tight-but-safe (text wraps within a nav link, never an
   overflow) all the way down to 721px — so below 1150px the desktop phone
   link is hidden entirely, restoring that exact pre-existing safe layout;
   above 1150px there's confirmed real room for it. At 720px and below the
   mobile drawer version (above) takes over as already built — the phone
   number is never actually unavailable, just not in the persistent bar
   below desktop width. */
@media (max-width: 1150px) {
	.yca-header-phone--desktop { display: none; }
}

/* Header collapses to the hamburger drawer below 1150px. Raised from 720px on
   2026-07-26: PD-023 added "Charter Planning" as a 6th primary-nav item, and the
   longer label set no longer fits the single desktop row until true desktop
   width — below 1150px the horizontal nav overflowed/cramped against the logo
   and CTA. 1150px matches the header's other breakpoint (the desktop phone rule
   above). At/above 1150px there's confirmed room for the full 6-item row + CTA;
   below it, the clean full-width drawer takes over. Raised again to 1300px on
   2026-07-26 (header redesign): the objective is a spacious, premium bar, not
   the smallest width that technically fits — so the nav collapses to the drawer
   while there is still generous room, rather than compressing. */
@media (max-width: 1300px) {
	.yca-site-header__inner { flex-wrap: wrap; }

	.yca-nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		cursor: pointer;
		order: 2;
	}
	.yca-nav-toggle__bar {
		display: block;
		width: 24px;
		height: 2px;
		background: var(--yca-navy);
		border-radius: 2px;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}
	.yca-nav-toggle-input:checked ~ .yca-nav-toggle .yca-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.yca-nav-toggle-input:checked ~ .yca-nav-toggle .yca-nav-toggle__bar:nth-child(2) { opacity: 0; }
	.yca-nav-toggle-input:checked ~ .yca-nav-toggle .yca-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Collapsed by default — a full-width dropdown panel under the header
	   when open, not an overlay, so it never covers content it doesn't
	   need to. */
	.yca-nav {
		display: none;
		order: 3;
		width: 100%;
		background: var(--yca-white);
		border-top: 1px solid var(--yca-border);
		margin-top: 16px;
	}
	.yca-nav-toggle-input:checked ~ .yca-nav { display: block; }
	.yca-nav ul { flex-direction: column; gap: 0; }
	.yca-nav ul li { border-bottom: 1px solid var(--yca-border); }
	.yca-nav ul li:last-child { border-bottom: none; }
	.yca-nav a { display: block; padding: 14px 4px; font-size: 1.05rem; }

	.yca-nav__mobile-cta { display: block; text-align: center; margin: 16px 4px 4px; }
	.yca-nav__desktop-cta { display: none; }

	/* PD-240: swap which phone variant is visible — same pattern as the CTA
	   pair immediately above. Styled to match the existing drawer link
	   rows (.yca-nav a's own mobile padding/size/divider) so it reads as
	   the natural first item in the list, not a bolted-on extra. */
	.yca-header-actions { display: none; }
	.yca-header-phone--mobile {
		display: block;
		padding: 14px 4px;
		font-size: 1.05rem;
		font-weight: 600;
		border-bottom: 1px solid var(--yca-border);
	}
}

/* ==========================================================================
   Yacht archive — filter bar + grid
   ========================================================================== */

.yca-archive-hero {
	background: var(--yca-cream);
	padding: 48px 0 32px;
	text-align: center;
}

.yca-filter-bar {
	background: var(--yca-white);
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius-lg);
	padding: 20px;
	margin: -28px auto 32px;
	max-width: calc(var(--yca-max-width) - 48px);
	box-shadow: var(--yca-shadow);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	position: relative;
	z-index: 5;
}

.yca-filter-field label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--yca-ink-muted);
	margin-bottom: 4px;
}

.yca-filter-field select,
.yca-filter-field input {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius);
	/* PRD-001 Launch Readiness Review fix (2026-07-12): iOS Safari
	   auto-zooms the whole page on focus for any input under 16px — a
	   jarring mobile bug. 1rem = 16px, same fix applied to the enquiry
	   form below. */
	font-size: 1rem;
	background: var(--yca-white);
}

.yca-filter-actions {
	display: flex;
	align-items: flex-end;
}

.yca-results-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	color: var(--yca-ink-muted);
	font-size: 0.9rem;
}

/* Flexbox, not CSS Grid, on purpose (part 41): with a plain CSS Grid using
   auto-fill columns, an incomplete last row (e.g. 5 yachts wrapping to 3+2)
   leaves a dead empty column on the right -- the 2 cards stay flush-left
   with a visible gap where a 3rd card would've gone. That's what looked
   "off" and prompted this change. Flexbox with wrap + justify-content:center
   fixes it structurally, not by faking inventory: full rows fill edge-to-edge
   same as before, but a short last row (or a grid with very few results
   anywhere -- destination pages and the homepage's Featured Yachts section
   share this same .yca-yacht-grid class) centers itself instead of sitting
   in a lopsided gap. Card width is capped via max-width on .yca-yacht-card
   below so cards stay close to their original ~365px size in every row,
   full or partial -- no cards blow up to fill leftover space. */
.yca-yacht-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	margin-bottom: 48px;
}

.yca-yacht-card {
	flex: 1 1 300px;
	max-width: 360px;
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: block;
	background: var(--yca-white);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.yca-yacht-card:hover { box-shadow: var(--yca-shadow-hover); transform: translateY(-2px); }

.yca-yacht-card__photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--yca-placeholder-gradient); } /* branded placeholder, never a blank grey box — "no blank cards" product decision, 2026-07-25 */
.yca-yacht-card__photo img { width: 100%; height: 100%; object-fit: cover; }

.yca-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(var(--yca-navy-rgb), 0.85);
	color: var(--yca-white);
	font-size: 0.72rem;
	padding: 4px 10px;
	border-radius: 100px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Second badge on a card (currently just scuba) sits top-right so it
   doesn't stack directly on top of the charter-type badge at top-left. */
.yca-badge--scuba {
	left: auto;
	right: 12px;
	background: rgba(var(--yca-scuba-rgb), 0.9);
	text-transform: none;
	letter-spacing: normal;
}

/* Featured designation (PD-257) — curated, promoted yachts. */
.yca-badge--featured {
	top: 12px;
	left: 12px;
	background: linear-gradient(135deg, #b8860b, #d4af37);
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.03em;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.yca-yacht-card__body { padding: 16px 18px 18px; }
.yca-yacht-card__name { font-size: 1.15rem; margin-bottom: 4px; }
.yca-yacht-card__specs { color: var(--yca-ink-muted); font-size: 0.85rem; margin-bottom: 10px; }
.yca-yacht-card__destination { font-size: 0.85rem; color: var(--yca-navy); margin-bottom: 10px; }
.yca-yacht-card__rate { font-weight: 700; color: var(--yca-navy); }
.yca-yacht-card__rate-enticement { display: block; font-weight: 500; color: var(--yca-ink-muted); font-size: 0.78rem; margin-top: 2px; }
.yca-yacht-card__rate-caveat { display: block; font-weight: 400; color: var(--yca-ink-muted); font-size: 0.75rem; margin-top: 2px; }

.yca-empty-state {
	text-align: center;
	padding: 60px 20px;
	background: var(--yca-cream);
	border-radius: var(--yca-radius-lg);
}

/* ==========================================================================
   Yacht detail page
   ========================================================================== */

.yca-detail-gallery { margin-bottom: 24px; }
.yca-detail-gallery__main { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--yca-radius-lg); background: var(--yca-border); }
.yca-detail-gallery__thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.yca-detail-gallery__thumbs img { width: 90px; height: 60px; object-fit: cover; border-radius: 4px; cursor: pointer; flex-shrink: 0; opacity: 0.75; }
.yca-detail-gallery__thumbs img:hover, .yca-detail-gallery__thumbs img.is-active { opacity: 1; outline: 2px solid var(--yca-sand); }

.yca-detail-titleblock { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.yca-detail-titleblock__specs { color: var(--yca-ink-muted); }
.yca-detail-titleblock__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.yca-scuba-badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--yca-scuba-tint);
	color: var(--yca-scuba);
	font-weight: 600;
	font-size: 0.85rem;
}

.yca-detail-video { margin: 24px 0; }
.yca-detail-video iframe { width: 100%; aspect-ratio: 16/9; border-radius: var(--yca-radius-lg); }

/* PRD-001 Launch Readiness Review addition (2026-07-12): thumbnail-facade
   styling for template-parts/video.php's YouTube branch, deliberately
   matching .yca-video-carousel__play/__play-icon so the same click-to-play
   affordance looks identical whether it's on the homepage carousel or a
   single yacht's detail page. */
.yca-detail-video__facade { aspect-ratio: 16/9; border-radius: var(--yca-radius-lg); overflow: hidden; }
.yca-detail-video__play {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	background: none;
	text-decoration: none;
}
.yca-detail-video__play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yca-detail-video__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(var(--yca-navy-rgb), 0.75);
}
.yca-detail-video__play-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--yca-white);
}
.yca-detail-video__play:hover .yca-detail-video__play-icon { background: rgba(var(--yca-navy-rgb), 0.9); }
.yca-detail-video__facade iframe { width: 100%; height: 100%; aspect-ratio: 16/9; border: none; display: block; }

.yca-detail-video__fallback {
	display: inline-block;
	padding: 12px 24px;
	border-radius: var(--yca-radius);
	background: var(--yca-navy);
	color: var(--yca-white);
	text-decoration: none;
	font-weight: 600;
}
.yca-detail-video__fallback:hover { background: var(--yca-navy-light); color: var(--yca-white); }

.yca-detail-section { padding: 32px 0; border-top: 1px solid var(--yca-border); }
.yca-detail-section:first-of-type { border-top: none; }

.yca-specs-table { width: 100%; border-collapse: collapse; }
.yca-specs-table td { padding: 8px 0; border-bottom: 1px solid var(--yca-border); font-size: 0.95rem; }
.yca-specs-table td:first-child { color: var(--yca-ink-muted); width: 40%; }

.yca-rate-box { background: var(--yca-cream); border-radius: var(--yca-radius-lg); padding: 20px 24px; }
.yca-rate-box__figure { font-size: 1.5rem; font-weight: 700; color: var(--yca-navy); }
.yca-rate-box__enticement { font-size: 0.95rem; color: var(--yca-navy); margin-top: 4px; font-weight: 500; }
.yca-rate-box__caveat { color: var(--yca-ink-muted); font-size: 0.85rem; margin-top: 6px; }
.yca-rate-box__terms { margin-top: 12px; font-size: 0.9rem; }

.yca-rate-breakdown { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--yca-border); }
.yca-rate-breakdown__note { font-size: 0.82rem; color: var(--yca-ink-muted); margin: 0 0 10px; }
.yca-rate-breakdown__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.yca-rate-breakdown__table td { padding: 6px 0; border-bottom: 1px solid var(--yca-border); }
.yca-rate-breakdown__table td:last-child { text-align: right; font-weight: 600; color: var(--yca-navy); }

.yca-crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }
.yca-crew-card { text-align: center; }
.yca-crew-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: 8px; }
.yca-crew-card__name { font-weight: 600; font-size: 0.9rem; }
.yca-crew-card__title { color: var(--yca-ink-muted); font-size: 0.8rem; }
.yca-captain-bio { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.yca-captain-bio img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.yca-amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.yca-amenity-grid li { padding: 8px 0; font-size: 0.9rem; }
.yca-amenity-grid li::before { content: "✓ "; color: var(--yca-success); font-weight: 700; }

.yca-review-card { background: var(--yca-cream); border-radius: var(--yca-radius-lg); padding: 20px; margin-bottom: 16px; }
.yca-review-card__title { font-weight: 700; margin-bottom: 6px; }

.yca-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

/* ==========================================================================
   Enquiry form
   ========================================================================== */

.yca-enquiry-form { max-width: 560px; }
.yca-enquiry-form__row { margin-bottom: 16px; }
.yca-enquiry-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; }
.yca-enquiry-form input,
.yca-enquiry-form select,
.yca-enquiry-form textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius);
	/* PRD-001 Launch Readiness Review fix (2026-07-12): see the matching
	   comment on .yca-filter-field above — 16px avoids iOS Safari's
	   focus-triggered auto-zoom on the enquiry form, the highest-stakes
	   form on the site. */
	font-size: 1rem;
	font-family: inherit;
}
.yca-enquiry-form__sla { color: var(--yca-ink-muted); font-size: 0.85rem; margin-top: 10px; }
/* 0.18.6: privacy notice in the submit area. Deliberately matches __sla's treatment
   (muted, 0.85rem) so the completion area reads as one block rather than two competing
   notes; max-width keeps the line length readable beside a 300px CTA. */
.yca-enquiry-form__privacy { color: var(--yca-ink-muted); font-size: 0.85rem; margin-top: 10px; max-width: 56ch; }
.yca-enquiry-form__privacy a { color: inherit; text-decoration: underline; }
.yca-enquiry-form__success { background: #eef5f0; border: 1px solid var(--yca-success); border-radius: var(--yca-radius); padding: 16px; color: var(--yca-success); }
/* M7.2 Enquiry Product Specification v1.0 (2026-07-22, instruction 10):
   expanded success state — heading, reassurance copy, and a short list of
   next-step links, instead of one line. */
.yca-enquiry-form__success h3 { margin: 0 0 8px; }
.yca-enquiry-form__success p { margin: 0 0 10px; }
.yca-enquiry-form__success p:last-of-type { margin-bottom: 8px; }
.yca-enquiry-form__success-links { list-style: none; margin: 0; padding: 0; }
.yca-enquiry-form__success-links li { margin-bottom: 6px; }
.yca-enquiry-form__success-links a { color: var(--yca-navy); font-weight: 600; }
.yca-enquiry-form__error { background: #fbeeec; border: 1px solid var(--yca-danger); border-radius: var(--yca-radius); padding: 16px; color: var(--yca-danger); margin-bottom: 16px; }
/* Reassurance line beneath every enquiry form (CPO microcopy, 2026-07-25) —
   "No obligation. No pressure." Educate-first, reduces pre-submit hesitation. */
.yca-enquiry-form__reassurance { margin: 26px 0 0; font-size: 0.95rem; color: var(--yca-ink-muted); line-height: 1.6; }
/* Contact Form review (2026-07-25): make "No obligation. No pressure." a
   slightly more prominent navy lead line above the explanatory sentence —
   emphasis, not a heading. Applies to both the leisure and corporate forms. */
.yca-enquiry-form__reassurance strong { display: block; color: var(--yca-navy); font-size: 1.08rem; margin-bottom: 6px; letter-spacing: 0.01em; }

/* Contact Form review (2026-07-25): taller message box, a wider submit CTA
   that goes full-width on mobile, and a touch more breathing room between the
   CTA, the response-time line, and the reassurance copy. */
.yca-enquiry-form textarea { min-height: 150px; line-height: 1.5; resize: vertical; }
.yca-enquiry-form__submit { min-width: 300px; padding-left: 34px; padding-right: 34px; margin-top: 4px; }
.yca-enquiry-form__sla { margin-top: 12px; }
@media (max-width: 600px) {
	.yca-enquiry-form__submit { display: block; width: 100%; min-width: 0; }
}

/* 404 — deliberate navigation page, not a bare error screen (CPO microcopy, 2026-07-25). */
.yca-404__inner { max-width: 680px; margin: 0 auto; text-align: center; }
.yca-404__code { font-size: 3.5rem; font-weight: 700; color: var(--yca-sand-dark); letter-spacing: 0.12em; margin: 0 0 4px; }
.yca-404__heading { font-size: 1.9rem; margin: 0 0 16px; }
.yca-404__body { color: var(--yca-ink-muted); margin: 0 auto 12px; max-width: 560px; }
.yca-404__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 28px 0 8px; }
.yca-404__contact { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--yca-border); }
.yca-404__contact-lead { font-weight: 600; margin: 0 0 4px; }
.yca-404__contact p { color: var(--yca-ink-muted); margin: 0 0 16px; }

/* ==========================================================================
   Homepage
   ========================================================================== */

.yca-section { padding: 64px 0; }
.yca-section__heading { font-size: 1.8rem; margin: 0 0 28px; text-align: center; }
.yca-section__intro { max-width: 640px; margin: -12px auto 32px; text-align: center; color: var(--yca-ink-muted); font-size: 1.02rem; line-height: 1.6; }

/* 1. Hero — no photo/video asset yet, runs on the palette alone. */
.yca-hero {
	/* Solid navy floor UNDER everything (P0 hardening 2026-07-26): the hero's
	   dark look otherwise depends entirely on the inline gradient scrim + photo
	   set in front-page.php. If the photo 404s, an older/invalid background rule
	   is in play, or a cache/plugin strips the inline style, the hero would fall
	   through to WHITE — making the white headline/logo invisible and leaving
	   only the navy button (the reported "blank white area with a floating
	   button"). This solid background-color guarantees the hero is always navy
	   with readable white text, whatever happens to the image or inline style. */
	background-color: var(--yca-navy);
	background-image: linear-gradient(135deg, var(--yca-navy) 0%, var(--yca-navy-light) 100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--yca-white);
	padding: 90px 0;
	text-align: center;
}
.yca-hero__inner { max-width: 720px; margin: 0 auto; }
.yca-hero__logo { height: 270px; width: auto; margin: 0 auto 28px; display: block; }
.yca-hero__headline { font-size: 2.6rem; color: var(--yca-white); margin: 0 0 18px; line-height: 1.15; }
.yca-hero__subline { font-size: 1.15rem; opacity: 0.9; margin: 0 0 32px; }
.yca-hero__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.yca-btn--on-hero { border-color: var(--yca-white); color: var(--yca-white); }
.yca-btn--on-hero:hover { background: var(--yca-white); color: var(--yca-navy); }

/* 2. Trust bar */
.yca-trust-bar { background: var(--yca-sand); }
.yca-trust-bar__inner { padding: 14px 0; text-align: center; }
.yca-trust-bar__item { color: var(--yca-navy); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.yca-trust-bar__item:hover { color: var(--yca-navy); text-decoration: underline; }
.yca-trust-bar__item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* 2. Trust Section — CPO homepage content hierarchy, 2026-07-11.
   4 short trust labels, no icons/body copy specified — kept deliberately
   plain (bold label only) rather than inventing icon art or descriptive
   copy the CPO didn't provide. Same auto-fit grid approach as
   .yca-why-grid below so it reflows from 4 columns down to 1 without a
   breakpoint. */
.yca-trust-section { background: var(--yca-cream); padding: 32px 0; }
.yca-trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	text-align: center;
}
.yca-trust-grid__item {
	font-family: var(--yca-font-display);
	font-size: 1.05rem;
	color: var(--yca-navy);
	font-weight: 600;
	padding: 8px 12px;
}

/* "How Would You Like to Start?" journey-picker section — Homepage Product
   Specification v1.0 (2026-07-22), immediately below Hero. Deliberately a
   new, boxed grid (not a reuse of the plain-text .yca-why-grid below) so
   all 4 paths read as equal, selectable cards rather than another prose
   block — matches the spec's "equal visual emphasis" / "customer
   orientation, not promotional" design guidance. Same auto-fit reflow
   approach as the other homepage grids so it collapses to 1 column on
   narrow screens without a dedicated breakpoint. Column flex-layout keeps
   each card's button aligned to the same baseline regardless of how long
   that card's body copy runs. */
.yca-journey-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}
.yca-journey-grid__item {
	background: var(--yca-cream);
	border-radius: var(--yca-radius-lg);
	padding: 28px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.yca-journey-grid__item h3 { color: var(--yca-navy); font-size: 1.15rem; margin: 0 0 10px; }
.yca-journey-grid__item p { color: var(--yca-ink-muted); margin: 0 0 20px; flex-grow: 1; }

/* 3. How YCA Helps — Homepage Product Specification v1.0, section 3. A
   simple numbered 4-step grid, same auto-fit reflow approach as
   .yca-trust-grid so it collapses to 1 column on narrow screens without a
   dedicated breakpoint. */
.yca-how-it-works__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
}
.yca-how-it-works__step { text-align: center; }
.yca-how-it-works__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--yca-navy);
	color: var(--yca-white);
	font-family: var(--yca-font-display);
	font-weight: 700;
	margin-bottom: 14px;
}
.yca-how-it-works__step h3 { font-size: 1.1rem; margin: 0 0 8px; color: var(--yca-navy); }
.yca-how-it-works__step p { color: var(--yca-ink-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* 6. Why Charter With YCA (homepage 3-column version, Homepage Product
   Specification v1.0 section 6) reuses .yca-why-grid / .yca-why-grid__item,
   defined further down — no new grid rules needed. */
.yca-why { background: var(--yca-cream); }
.yca-why__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.yca-why__quote { font-family: var(--yca-font-display); font-size: 1.4rem; line-height: 1.5; color: var(--yca-navy); margin: 0 0 28px; }

/* 5. Meet Your Team */
.yca-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.yca-team-card { text-align: center; }
.yca-team-card__avatar {
	width: 84px;
	height: 84px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--yca-sand);
	color: var(--yca-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--yca-font-display);
	font-size: 1.4rem;
	font-weight: 700;
}
/* Real headshot variant — used when a team member has a real photo set in
   yca_get_team_members(); falls back to the initials treatment above for
   anyone who doesn't have one yet. */
.yca-team-card__avatar--photo {
	background: none;
	overflow: hidden;
}
.yca-team-card__avatar--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.yca-team-card__name { font-weight: 700; color: var(--yca-navy); }
.yca-team-card__title { font-size: 0.85rem; color: var(--yca-ink-muted); margin-bottom: 10px; }
/* Part 40: bio copy reads left-aligned (long centered paragraphs are hard to
   read) even though the rest of the card -- avatar, name, title -- stays
   centered above it. */
.yca-team-card__bio { font-size: 0.9rem; text-align: left; }

/* Part 40: "Read full bio" toggle for members with a bio_short + full bio
   (currently Hannes and Julia) -- same accessible <details>/<summary>
   pattern as the FAQ accordion, just sized down to fit inside a team card. */
.yca-team-card__bio-details { text-align: left; margin-top: 4px; }
.yca-team-card__bio-toggle {
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--yca-navy);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.yca-team-card__bio-toggle:hover { text-decoration: underline; }
.yca-team-card__bio-toggle::-webkit-details-marker { display: none; }
.yca-team-card__bio-toggle::after {
	content: '+';
	font-size: 1.1rem;
	line-height: 1;
	/* PRD-001 Launch Readiness Review fix (2026-07-12): --yca-sand on white
	   is ~2:1 contrast, below the 3:1 WCAG 1.4.11 minimum for a graphical
	   indicator that conveys expand/collapse state. --yca-sand-dark clears
	   it while staying on-brand (same token already used for link hover). */
	color: var(--yca-sand-dark);
}
.yca-team-card__bio-details[open] .yca-team-card__bio-toggle::after { content: '\2212'; }
.yca-team-card__bio-full { font-size: 0.9rem; margin-top: 10px; }

/* 6. Featured Destinations — text-only cards until photography is ready.
   auto-fit (not auto-fill, PD-220 2026-07-22): auto-fill was reserving
   empty implicit tracks for whatever card count *could* fit the container
   width, so with exactly 4 real cards the visible content sat left-of-
   centre with invisible empty columns filling the rest of the row.
   auto-fit collapses those empty tracks to zero width and lets the real
   cards expand to fill the row instead — this is the same reflow approach
   already used by .yca-journey-grid/.yca-how-it-works__grid/.yca-trust-grid,
   so it's a general rule, not a fix aimed at "4 cards" specifically: it
   centres and balances the row correctly whether the featured-destinations
   count is 3, 4, 6, or any other number in the future. */
.yca-destinations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.yca-destination-card {
	display: block;
	background: var(--yca-cream);
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius-lg);
	padding: 22px 16px;
	text-align: center;
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.yca-destination-card:hover { box-shadow: var(--yca-shadow); transform: translateY(-2px); }
.yca-destination-card__name { color: var(--yca-navy); font-weight: 600; }
.yca-destination-card--photo,
.yca-destination-card--branded {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-color: transparent;
	min-height: 140px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 16px;
}
/* Branded fallback tile for destinations awaiting real photography (CPO
   customer-confidence review, 2026-07-25): the same navy-gradient tile
   treatment as a photo card, minus the photo, so the destinations grid reads
   as one uniform, intentional set instead of a mix of photo tiles and blank
   cards. Real photography later simply upgrades a tile to --photo. */
.yca-destination-card--branded {
	background-image: var(--yca-placeholder-gradient);
}
.yca-destination-card--photo .yca-destination-card__name,
.yca-destination-card--branded .yca-destination-card__name { color: var(--yca-white); }

/* 6.5 Experiences callout — PD-220 (2026-07-22): removed three dead rules
   here (.yca-experiences-callout__inner, a heading override forcing
   text-align:left + margin-bottom:8px, and a p override capping width at
   520px with margin:0). None of them matched anything in the current
   markup's structure — __inner had no corresponding element in
   front-page.php at all — and they were fighting the shared
   .yca-section__heading/.yca-section__intro rules, which is exactly what
   produced both the "heading crowds the cards" (8px vs. the standard 28px
   bottom margin) and "heading reads misaligned" (forced left while its own
   intro paragraph directly below stayed centred) symptoms. Leftovers from
   an earlier two-column flex "callout" design that predated the current
   centred-stack markup and was never cleaned up when the markup changed.
   Replaced with a single, minimal rule below that keeps only what's
   actually needed on a dark background: text-align, max-width, and
   vertical spacing now come entirely from the shared
   .yca-section__heading/.yca-section__intro rules like every other
   section, but color still needs a section-level override here, because
   the sitewide `h1, h2, h3 { color: var(--yca-navy) }` rule and
   .yca-section__intro's own `color: var(--yca-ink-muted)` both match
   these elements directly (not merely by inheritance), so a directly
   inherited white from .yca-experiences-callout's background rule alone
   would never win against them — this is the one real per-section
   difference this callout needs, and nothing else. */
.yca-experiences-callout { background: var(--yca-navy); }
.yca-experiences-callout .yca-section__heading,
.yca-experiences-callout .yca-section__intro { color: var(--yca-white); }

/* 7. Featured Yachts */
/* Part 41: this used to have its own duplicate `.yca-yacht-grid` rule here
   (slightly different values -- 280px/24px/32px vs the shared definition's
   300px/28px/48px) which, being later in the cascade at equal specificity,
   silently overrode the shared grid/flex layout rule for every section
   using this class, not just Featured Yachts. Removed -- the single shared
   `.yca-yacht-grid` rule (near the top of the yacht-card styles, just above
   `.yca-yacht-card`) is now the only definition, so all 5 usages (archive,
   homepage Featured Yachts, Experiences page, destination pages) render
   identically and the last-row-gap fix actually takes effect everywhere. */
.yca-featured-yachts__cta { text-align: center; }

/* 8. Testimonial */
.yca-testimonial { background: var(--yca-cream); }
.yca-testimonial__inner { max-width: 680px; margin: 0 auto; text-align: center; }
.yca-testimonial__quote p { font-family: var(--yca-font-display); font-size: 1.3rem; font-style: italic; color: var(--yca-navy); margin: 0 0 14px; }
/* PD-020 (2026-07-12): the shared testimonials partial can render 1-3
   quotes instead of always exactly one, plus an optional source line. */
.yca-testimonial__quote + .yca-testimonial__quote { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(0,0,0,0.08); }
.yca-testimonial__source { display: block; font-size: 0.85rem; color: var(--yca-ink-muted); margin-top: 4px; }
.yca-testimonial__more { text-align: center; margin: 32px 0 0; } /* PD-234: "Read All Guest Reviews" link, reuses .yca-btn/.yca-btn--secondary unchanged */

/* PD-236 (2026-07-23): stacked byline meta block (name / destination /
   trust badge), replacing the old single-line <cite>. */
.yca-testimonial__meta { font-style: normal; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.yca-testimonial__name { font-style: normal; font-weight: 600; color: var(--yca-navy); }
.yca-testimonial__destination { font-size: 0.85rem; color: var(--yca-ink-muted); }
.yca-testimonial__trust { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--yca-ink-muted); margin-top: 2px; }
.yca-testimonial__stars { color: var(--yca-sand-dark); letter-spacing: 1px; font-size: 0.9rem; line-height: 1; } /* decorative trust badge only -- not an invented numeric rating, see PD-236 */

/* 8b. Testimonial carousel (PD-234, 2026-07-23) — homepage-only, progressive
   enhancement, same no-JS-safe contract as the photo/video carousels above
   (assets/js/testimonial-carousel.js adds "is-carousel"; without it every
   quote stays visible in the plain stacked list, unchanged from before this
   batch). Unlike the photo/video carousels' opacity/absolute-position
   crossfade (built for fixed-aspect-ratio tiles), inactive quotes are
   simply display:none — testimonial text is variable-height and doesn't
   crossfade cleanly the same way. */
.yca-testimonial-carousel { position: relative; padding: 0 44px; }
.yca-testimonial-carousel.is-carousel .yca-testimonial__quote { display: none; }
.yca-testimonial-carousel.is-carousel .yca-testimonial__quote.is-active { display: block; }
.yca-testimonial-carousel__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(var(--yca-navy-rgb), 0.65);
	color: var(--yca-white);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.yca-testimonial-carousel__arrow:hover { background: rgba(var(--yca-navy-rgb), 0.85); }
.yca-testimonial-carousel__arrow--prev { left: 0; }
.yca-testimonial-carousel__arrow--next { right: 0; }
.yca-testimonial-carousel.is-carousel .yca-testimonial-carousel__arrow { display: flex; }
.yca-testimonial-carousel__dots { display: none; justify-content: center; gap: 8px; margin-top: 20px; }
.yca-testimonial-carousel.is-carousel .yca-testimonial-carousel__dots { display: flex; }
.yca-testimonial-carousel__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	background: var(--yca-border);
	cursor: pointer;
	padding: 8px; /* tap-target sizing, same PRD-001 fix as the photo/video carousel dots */
	background-clip: content-box;
}
.yca-testimonial-carousel__dot.is-active { background: var(--yca-navy); }
@media (max-width: 600px) {
	.yca-testimonial-carousel { padding: 0 36px; }
	.yca-testimonial-carousel__arrow { width: 34px; height: 34px; }
}

/* 9. Final CTA / contact band */
.yca-final-cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.yca-final-cta__copy h2 { font-size: 1.6rem; }
@media (max-width: 800px) {
	.yca-final-cta__inner { grid-template-columns: 1fr; }
	.yca-hero__headline { font-size: 2rem; }
	.yca-hero__logo { height: 180px; }
}

/* ==========================================================================
   Experiences — Milestone 4
   page-experiences.php is now a thin discovery hub (shared hero.php +
   .yca-experience-grid + shared final-cta.php) rather than a page with its
   own bespoke hero/nav/section markup — the old .yca-experiences-hero,
   .yca-experiences-nav, .yca-experiences-section*, and
   .yca-experiences-banner-photo rules are gone (confirmed unused anywhere
   else in the theme before removal). .yca-experiences-cta stays: it's the
   class template-parts/final-cta.php itself reuses (see that file's doc
   comment), so every CTA banner sitewide depends on it, not just this page.
   ========================================================================== */

.yca-content-placeholder {
	background: var(--yca-cream);
	border: 1px dashed var(--yca-border);
	border-radius: var(--yca-radius-lg);
	padding: 18px 20px;
	margin-top: 24px;
	font-size: 0.9rem;
	color: var(--yca-ink-muted);
}

.yca-experience-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
/* Experiences hub only (CPO Review, 2026-07-25): the discovery hub can end on a
   lone card (e.g. a final "Wildlife & Nature"), which looked incomplete in the
   stretch grid. Flex + wrap + center keeps full rows tidy and centres any
   incomplete final row so the layout stays balanced until more cards ship.
   Scoped to .yca-experience-grid--hub (page-experiences.php) so the homepage
   teaser, Related Experiences, and destination experience rows are unchanged. */
.yca-experience-grid--hub { display: flex; flex-wrap: wrap; justify-content: center; }
.yca-experience-grid--hub .yca-experience-card { flex: 1 1 260px; max-width: 340px; }
.yca-experience-card {
	display: block;
	border-radius: var(--yca-radius-lg);
	overflow: hidden;
	background: var(--yca-white);
	box-shadow: var(--yca-shadow);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.yca-experience-card:hover { box-shadow: var(--yca-shadow-hover); transform: translateY(-2px); }
.yca-experience-card__photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--yca-placeholder-gradient); } /* branded placeholder, never a blank grey box — "no blank cards" product decision, 2026-07-25 */
.yca-experience-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.yca-experience-card__body { padding: 16px 18px 18px; }
.yca-experience-card__title { font-size: 1.1rem; margin-bottom: 6px; }
.yca-experience-card__excerpt { color: var(--yca-ink-muted); font-size: 0.88rem; line-height: 1.5; }

.yca-experiences-cta { background: var(--yca-navy); color: var(--yca-white); text-align: center; }
.yca-experiences-cta__inner { max-width: 640px; margin: 0 auto; }
.yca-experiences-cta h2 { color: var(--yca-white); font-size: 1.6rem; margin: 0 0 16px; }
.yca-experiences-cta__body { color: var(--yca-white); opacity: 0.9; font-size: 1rem; line-height: 1.6; margin: 0 0 24px; }
.yca-experiences-cta__body p { margin: 0 0 14px; }
.yca-experiences-cta__body p:last-child { margin-bottom: 0; }
.yca-experiences-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* 0.18.10 (B1): on the navy band the default .yca-btn--primary is navy-on-navy,
   so the PRIMARY action read as plain text while the white-outlined secondary
   dominated — hierarchy exactly inverted. Inverting the primary to a solid
   white fill restores it using the existing palette only: no new component, no
   new token. The :hover pair is required because this selector outranks the
   base `.yca-btn--primary:hover`, which would otherwise never apply here. */
.yca-experiences-cta .yca-btn--primary { background: var(--yca-white); border-color: var(--yca-white); color: var(--yca-navy); }
.yca-experiences-cta .yca-btn--primary:hover { background: var(--yca-cream); border-color: var(--yca-cream); color: var(--yca-navy); }
.yca-experiences-cta .yca-btn--secondary { border-color: var(--yca-white); color: var(--yca-white); }
.yca-experiences-cta .yca-btn--secondary:hover { background: var(--yca-white); color: var(--yca-navy); }

/* ==========================================================================
   Enquire page
   ========================================================================== */

.yca-enquire-hero,
.yca-page-hero { background: var(--yca-cream); padding: 64px 0; text-align: center; }
.yca-enquire-hero__inner,
.yca-page-hero__inner { max-width: 640px; margin: 0 auto; }
.yca-enquire-hero__inner h1,
.yca-page-hero__inner h1 { font-size: 2.2rem; margin: 0 0 16px; }
.yca-enquire-hero__inner p,
.yca-page-hero__inner p { font-size: 1.05rem; color: var(--yca-ink-muted); margin: 0; }
/* LP-001 Hero Architecture (2026-07-21): intro now runs through wpautop(),
   so a multi-paragraph intro produces multiple <p> tags — add a small gap
   between them. No effect on the single-paragraph case every existing
   caller uses today (only one <p>, so this selector never matches). */
.yca-page-hero__inner p + p { margin-top: 14px; }
/* M7.2 Enquiry Product Specification v1.0 (2026-07-22): the Enquire hero's
   own bespoke markup (not template-parts/hero.php) gained a 4-paragraph
   rewrite — same small-gap treatment as .yca-page-hero__inner above. */
.yca-enquire-hero__inner p + p { margin-top: 14px; }

/* LP-001 Hero Architecture (2026-07-21): optional CTA button row, same
   `.yca-btn` classes template-parts/final-cta.php already uses. Only
   present when a caller supplies real CTA args — no effect on any
   existing hero. */
.yca-page-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.yca-page-hero[style*="background-image"] .yca-page-hero__actions { justify-content: flex-start; }

/* Photo-backed hero variant (template-parts/hero.php's optional `image` arg,
   added Milestone 3) — same treatment taxonomy-destination.php's old
   bespoke `.yca-destination-hero` used, now available to any page that
   passes a real photo into the shared hero partial. Detected via the
   inline background-image style hero.php sets, same technique as before. */
.yca-page-hero[style*="background-image"] {
	/* Solid navy floor UNDER the photo (P0 hardening 2026-07-26): the base
	   .yca-page-hero background-color is cream, so if the photo 404s or a cache
	   strips the inline scrim+photo style, a photo hero would fall through to a
	   LIGHT background with white text (invisible) — the same white-out class as
	   the homepage hero. This guarantees navy-with-readable-white-text always. */
	background-color: var(--yca-navy);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: var(--yca-hero-h);
	display: flex;
	align-items: flex-start; /* top-anchor content so the title sits at a consistent distance below the transparent header on EVERY page, regardless of intro length (CPO hero standardisation, 2026-07-26). */
	padding: 72px 0;
	text-align: left;
}
.yca-page-hero[style*="background-image"] .yca-page-hero__inner { max-width: 720px; margin: 0; }
.yca-page-hero[style*="background-image"] h1 { font-size: 2.6rem; color: var(--yca-white); }
.yca-page-hero[style*="background-image"] p { color: var(--yca-white); opacity: 0.92; max-width: 560px; }

/* Enquire hero trust row (2026-07-26 CPO UX redesign) — inline icon + label
   reassurance chips sitting on the photo hero, below the supporting paragraph. */
.yca-hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 26px 0 0; padding: 0; }
.yca-hero-trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--yca-white); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; }
.yca-hero-trust svg { width: 20px; height: 20px; opacity: 0.92; flex-shrink: 0; }
/* Bring the enquiry form up closer to the hero (CPO UX review) — the form should
   read as the immediate next action, not sit below a large gap. */
.yca-section.yca-enquire { padding-top: 40px; }
/* Thailand hero focal override (2026-07-25, CPO-approved). The Thailand hero
   photo is cliff-dominant; at ultra-wide DESKTOP widths the global
   background-position:center crop letterboxes to a wall of rock, dropping the
   water and anchored boats. Nudging the focal point down keeps the limestone
   cliffs while holding a band of water + boats in view, so it still reads as a
   yacht anchorage. Verified against the master at 1440/1920/2560. Scoped to
   the Thailand destination archive only (body.term-thailand, emitted by
   WordPress core get_body_class() for tax term archives) and to >=1200px only,
   so tablet and mobile keep the unchanged global center crop. Pure CSS — no
   template or hero-component change. Remove this block if the Thailand hero is
   ever replaced with a wider-composed frame. */
@media (min-width: 1200px) {
	body.term-thailand .yca-page-hero[style*="background-image"] { background-position: center 78%; }
}
.yca-page-hero__back {
	display: inline-block;
	margin-bottom: 14px;
	color: var(--yca-navy);
	text-decoration: none;
	font-size: 0.9rem;
	opacity: 0.85;
}
.yca-page-hero__back:hover { opacity: 1; text-decoration: underline; }
.yca-page-hero[style*="background-image"] .yca-page-hero__back { color: var(--yca-white); }
@media (max-width: 600px) {
	.yca-page-hero[style*="background-image"] { min-height: var(--yca-hero-h); padding: 44px 0; }
	.yca-page-hero[style*="background-image"] h1 { font-size: 2rem; }
}

/* Enquire page — wide main form column + supporting sticky sidebar (2026-08-03 layout fix, E1) */
.yca-enquire__inner { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.yca-enquire__main { min-width: 0; }
/* On THIS page the form fills its wide column, rather than the global 560px embed cap. */
.yca-enquire__main .yca-enquiry-form { max-width: none; }

/* Supporting sidebar: two cards that stay beside the tall form as the visitor scrolls. */
.yca-enquire__aside { position: sticky; top: calc(var(--yca-header-h, 160px) + 24px); display: flex; flex-direction: column; gap: 20px; }
.yca-enquire__contact,
.yca-enquire__nextcard { background: var(--yca-cream); border: 1px solid var(--yca-border); border-radius: var(--yca-radius-lg); padding: 24px 26px; }
.yca-enquire__contact h3,
.yca-enquire__nextcard h3 { margin: 0 0 12px; font-family: var(--yca-font-display); font-size: 1.15rem; color: var(--yca-navy); }
.yca-enquire__contact p { margin: 0 0 12px; }
.yca-enquire__contact a { color: var(--yca-navy); font-weight: 600; }

/* Compact "What happens next?" summary (approved step titles, reused). */
.yca-enquire__nextlist { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: yca-next; }
.yca-enquire__nextlist li { position: relative; padding-left: 36px; margin-bottom: 12px; color: var(--yca-ink); font-size: 0.95rem; line-height: 1.4; }
.yca-enquire__nextlist li:last-child { margin-bottom: 0; }
.yca-enquire__nextlist li::before { counter-increment: yca-next; content: counter(yca-next); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--yca-navy); color: var(--yca-white); font-family: var(--yca-font-display); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.yca-enquire__nexthint { margin: 0; font-size: 0.9rem; color: var(--yca-ink-muted); }
.yca-enquire__nexthint strong { color: var(--yca-navy); }

/* Enquiry completion area — CTA + response line read as one intentional block (E1). */
.yca-enquiry-form__actions { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--yca-border); }
.yca-enquire__main .yca-enquiry-form__reassurance { margin-top: 16px; }

/* How We Can Help / Before We Recommend — coherent two-column block, consistent rhythm. */
.yca-enquire-guide__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; max-width: 980px; margin: 0 auto; }
.yca-enquire-guide__col.yca-guide-content { max-width: none; margin: 0; }
.yca-enquire-guide__col .yca-section__heading--left { margin-top: 0; }

@media (max-width: 900px) {
	.yca-enquire__inner { grid-template-columns: 1fr; gap: 36px; }
	.yca-enquire__aside { position: static; }
}
@media (max-width: 760px) {
	.yca-enquire-guide__inner { grid-template-columns: 1fr; gap: 8px; }
}

/* ==========================================================================
   FAQ page (page-faq.php)
   ========================================================================== */

.yca-faq { max-width: 760px; margin: 0 auto; }

/* Milestone 1.5 (template-parts/faq-block.php): the embedded/scoped FAQ
   variant used mid-page (destinations, experiences, planning guides)
   reuses all of the rules above unchanged -- `.yca-faq--embedded` exists
   as a hook for any future page-specific tweaks, none needed yet. */

/* Part 42: jump-nav + category headings, added when the FAQ grew from a
   flat 18-question list to 10 categories / 47 questions -- without these,
   the page is a very long blind scroll. */
.yca-faq__toc {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
}
.yca-faq__toc-link {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--yca-border);
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--yca-navy);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.yca-faq__toc-link:hover {
	background-color: var(--yca-cream);
	border-color: var(--yca-sand);
}
.yca-faq__category {
	font-size: 1.3rem;
	color: var(--yca-navy);
	margin: 44px 0 4px;
	scroll-margin-top: 24px;
}
.yca-faq__category:first-of-type { margin-top: 0; }

.yca-faq__item {
	border-bottom: 1px solid var(--yca-border);
	padding: 18px 0;
}
.yca-faq__item:first-child { border-top: 1px solid var(--yca-border); }
.yca-faq__question {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--yca-navy);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.yca-faq__question::-webkit-details-marker { display: none; }
.yca-faq__question::after {
	content: '+';
	flex-shrink: 0;
	font-size: 1.3rem;
	line-height: 1;
	/* PRD-001 Launch Readiness Review fix (2026-07-12): see the matching
	   comment on .yca-team-card__bio-toggle::after above — same 3:1
	   contrast fix for the FAQ accordion's expand/collapse indicator. */
	color: var(--yca-sand-dark);
}
.yca-faq__item[open] .yca-faq__question::after { content: '\2212'; }
.yca-faq__answer { margin-top: 12px; color: var(--yca-ink-muted); }
.yca-faq__answer p { margin: 0; }
/* Multi-paragraph FAQ answers need separation. `margin: 0` above is KEPT so a
   single-paragraph answer is presented exactly as before; `p + p` matches only
   a paragraph immediately preceded by another, so it cannot affect a lone one.
   One rule covers both FAQ surfaces: template-parts/faq-block.php and
   page-faq.php emit the same .yca-faq__answer wrapper, and
   .yca-faq--embedded reuses these rules unchanged. */
.yca-faq__answer p + p { margin-top: 0.75em; }

/* ==========================================================================
   Why Charter With Us page (page-why-charter-with-us.php)
   ========================================================================== */

.yca-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
}
.yca-why-grid__item h3 {
	color: var(--yca-navy);
	font-size: 1.05rem;
	margin: 0 0 8px;
}
.yca-why-grid__item p { color: var(--yca-ink-muted); margin: 0; }
.yca-why-grid__item a { color: var(--yca-navy); text-decoration: underline; }

/* ==========================================================================
   Destination archive (taxonomy-destination.php) — Milestone 3
   Section-registry-driven page (inc/destination-section-registry.php). The
   hero now uses the shared template-parts/hero.php photo variant (the
   .yca-page-hero[style*="background-image"] rules above) instead of the old
   bespoke .yca-destination-hero markup, so those rules are gone — nothing
   else referenced that class. Everything below has to work for content that
   doesn't exist yet on most destinations, in whatever order the registry
   puts it in, so styling stays deliberately generic rather than bespoke per
   section.
   ========================================================================== */

.yca-dest-section { padding: 56px 0; }
.yca-dest-section h2 { font-size: 1.6rem; margin: 0 0 20px; }
.yca-dest-section__body { max-width: 760px; line-height: 1.7; }
.yca-dest-section__body p { margin: 0 0 18px; }
.yca-dest-section__body ul, .yca-dest-section__body ol { margin: 0 0 18px; padding-left: 22px; }
.yca-dest-section__body li { margin-bottom: 6px; }
.yca-dest-section__body a { color: var(--yca-navy); text-decoration: underline; }

/* PRD LP-001 Sections 3 & 4 (2026-07-21): At a Glance structured comparison
   table — simple responsive 2-column table, same border/padding language as
   .yca-guide-content table above rather than a new visual style. */
.yca-dest-at-a-glance { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 0.95rem; }
.yca-dest-at-a-glance th, .yca-dest-at-a-glance td { padding: 10px 12px; border: 1px solid var(--yca-border); text-align: left; }
.yca-dest-at-a-glance th { width: 40%; background: var(--yca-cream); font-weight: 600; }
@media (max-width: 600px) {
	.yca-dest-at-a-glance, .yca-dest-at-a-glance tbody, .yca-dest-at-a-glance tr, .yca-dest-at-a-glance th, .yca-dest-at-a-glance td { display: block; width: 100%; }
	.yca-dest-at-a-glance tr { margin-bottom: 10px; border: 1px solid var(--yca-border); }
	.yca-dest-at-a-glance th, .yca-dest-at-a-glance td { border: none; border-bottom: 1px solid var(--yca-border); }
	.yca-dest-at-a-glance tr td:last-child { border-bottom: none; }
}

/* LP-002 (2026-07-21, Bahamas content pack): optional trailing paragraph
   below the At a Glance table — same prose/wpautop treatment as
   .yca-experiences-cta__body above, just left-aligned and ink-colored since
   this sits in a light-background dest section rather than the navy CTA. */
.yca-dest-at-a-glance__intro { max-width: 760px; margin: 16px 0 0; font-size: 1rem; line-height: 1.6; color: var(--yca-ink); }
.yca-dest-at-a-glance__intro p { margin: 0 0 14px; }
.yca-dest-at-a-glance__intro p:last-child { margin-bottom: 0; }

/* LP-003 (2026-07-21, Croatia content pack): optional lead paragraph above
   the At a Glance table — symmetric counterpart to .yca-dest-at-a-glance__intro
   above, same treatment. */
.yca-dest-at-a-glance__lead { max-width: 760px; margin: 0 0 16px; font-size: 1rem; line-height: 1.6; color: var(--yca-ink); }
.yca-dest-at-a-glance__lead p { margin: 0 0 14px; }
.yca-dest-at-a-glance__lead p:last-child { margin-bottom: 0; }

.yca-dest-experience-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.yca-dest-experience-chips li a,
.yca-dest-experience-chips li span {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 100px;
	background: var(--yca-cream);
	color: var(--yca-navy);
	text-decoration: none;
	font-size: 0.9rem;
	border: 1px solid var(--yca-border);
}
.yca-dest-experience-chips li a:hover { background: var(--yca-navy); color: var(--yca-white); border-color: var(--yca-navy); }
/* li span (no href — e.g. the Yacht Types tags on an Experience page's Best
   Yachts section) is a non-interactive label, so it skips the hover state. */

/* ==========================================================================
   Homepage photo gallery ("Real Trips, Real Charters")
   ========================================================================== */

/* PD-220 (2026-07-22): .yca-photo-gallery__intro removed — it duplicated
   .yca-section__intro's 640px max-width and near-identical bottom margin
   but was missing "auto" on the horizontal margin, so this intro sat
   flush-left while its heading above stayed centred. Markup now uses the
   shared .yca-section__intro class directly instead of a second
   near-copy of the same rule that could drift again later. */

.yca-photo-gallery__carousel { position: relative; }

.yca-photo-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.yca-photo-gallery__tile {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--yca-radius);
	cursor: pointer;
	background: var(--yca-cream);
}
.yca-photo-gallery__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}
.yca-photo-gallery__tile:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
	.yca-photo-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.yca-photo-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Carousel mode (part 39): assets/js/photo-carousel.js adds "is-carousel" to
   .yca-photo-gallery__carousel once it initializes. Without JS (or if it
   fails to load), none of the rules below apply and the markup falls back
   to the plain static grid above -- every photo visible at once, exactly
   the pre-part-39 behavior. Deliberate no-JS fallback, same discipline as
   every other optional-enhancement script in this theme. */
.yca-photo-gallery__carousel.is-carousel .yca-photo-gallery__grid {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--yca-radius);
	overflow: hidden;
}
.yca-photo-gallery__carousel.is-carousel .yca-photo-gallery__tile {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
	border-radius: 0;
}
.yca-photo-gallery__carousel.is-carousel .yca-photo-gallery__tile.is-active {
	opacity: 1;
	pointer-events: auto;
}
.yca-photo-gallery__carousel.is-carousel .yca-photo-gallery__tile:hover img { transform: none; }

.yca-photo-gallery__arrow,
.yca-video-carousel__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(var(--yca-navy-rgb), 0.65);
	color: var(--yca-white);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.yca-photo-gallery__arrow:hover,
.yca-video-carousel__arrow:hover { background: rgba(var(--yca-navy-rgb), 0.85); }
.yca-photo-gallery__arrow--prev,
.yca-video-carousel__arrow--prev { left: 16px; }
.yca-photo-gallery__arrow--next,
.yca-video-carousel__arrow--next { right: 16px; }
.yca-photo-gallery__carousel.is-carousel .yca-photo-gallery__arrow { display: flex; }

.yca-photo-gallery__caption-bar,
.yca-video-carousel__caption-bar {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.yca-photo-gallery__carousel.is-carousel .yca-photo-gallery__caption-bar { display: flex; }
.yca-photo-gallery__caption-text,
.yca-video-carousel__caption-text { color: var(--yca-ink-muted); font-size: 0.95rem; }
.yca-video-carousel__caption-meta { display: block; font-size: 0.82rem; opacity: 0.8; margin-top: 2px; }
.yca-photo-gallery__dots,
.yca-video-carousel__dots { display: flex; gap: 8px; }
.yca-photo-gallery__dot,
.yca-video-carousel__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	background: var(--yca-border);
	cursor: pointer;
	/* PRD-001 Launch Readiness Review fix (2026-07-12): padding grows the
	   actual tap target to ~25px (background-clip keeps the visible dot at
	   9px via background-clip: content-box) without changing how it looks —
	   these were the only way to jump to a specific carousel slide on
	   touch, and 9px alone is well under any usable tap-target size. */
	padding: 8px;
	background-clip: content-box;
}
.yca-photo-gallery__dot.is-active,
.yca-video-carousel__dot.is-active { background: var(--yca-navy); }

@media (max-width: 600px) {
	.yca-photo-gallery__carousel.is-carousel .yca-photo-gallery__grid { aspect-ratio: 4 / 3; }
	/* PRD-001 Launch Readiness Review fix (2026-07-12): mobile previously
	   shrank these arrows to 34px, the opposite of what touch input needs —
	   keep them at the same 40px minimum as desktop instead of shrinking
	   further right where fingers need more room, not less. */
}

/* ==========================================================================
   Homepage video carousel ("Watch the Fleet") — part 39
   ========================================================================== */

/* PD-220 (2026-07-22): .yca-video-carousel__intro removed for the same
   reason as .yca-photo-gallery__intro above — it duplicated
   .yca-section__intro minus the "auto" that centres it. Markup now uses
   the shared class directly. */

.yca-video-carousel__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 900px;
	margin: 0 auto;
	border-radius: var(--yca-radius);
	overflow: hidden;
	background: var(--yca-navy);
}
.yca-video-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}
.yca-video-carousel__slide.is-active { opacity: 1; pointer-events: auto; }

.yca-video-carousel__play {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	background: none;
	text-decoration: none;
}
.yca-video-carousel__play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yca-video-carousel__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(var(--yca-navy-rgb), 0.75);
}
.yca-video-carousel__play-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--yca-white);
}
.yca-video-carousel__play:hover .yca-video-carousel__play-icon { background: rgba(var(--yca-navy-rgb), 0.9); }

.yca-video-carousel__slide iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.yca-video-carousel__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--yca-white);
	background: var(--yca-navy-light);
	text-decoration: none;
	font-weight: 600;
}
.yca-video-carousel__fallback:hover { text-decoration: underline; }

.yca-video-carousel__arrow--prev { left: -50px; }
.yca-video-carousel__arrow--next { right: -50px; }
@media (max-width: 960px) {
	.yca-video-carousel__arrow--prev { left: 8px; }
	.yca-video-carousel__arrow--next { right: 8px; }
}

/* No-JS fallback for the video carousel: same pattern as the photo carousel
   above. Without video-carousel.js, .yca-video-carousel__carousel never
   gains "is-carousel", so the arrow/dot/caption-bar controls (which do
   nothing without the JS that drives them) stay hidden -- the first video's
   real play link is still fully usable, just not the rotation controls. */
.yca-video-carousel__carousel { position: relative; }
.yca-video-carousel__carousel .yca-video-carousel__arrow,
.yca-video-carousel__carousel .yca-video-carousel__caption-bar {
	display: none;
}
.yca-video-carousel__carousel.is-carousel .yca-video-carousel__arrow { display: flex; }
.yca-video-carousel__carousel.is-carousel .yca-video-carousel__caption-bar { display: flex; }

/* Lightbox */
.yca-lightbox {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(var(--yca-navy-rgb), 0.92);
	z-index: 9999;
	padding: 24px;
}
.yca-lightbox.is-open { display: flex; }
body.yca-lightbox-open { overflow: hidden; }

.yca-lightbox__figure { margin: 0; max-width: min(90vw, 1100px); text-align: center; }
.yca-lightbox__image { max-width: 100%; max-height: 80vh; border-radius: var(--yca-radius); display: block; margin: 0 auto; }
.yca-lightbox__caption { color: var(--yca-white); margin-top: 14px; font-size: 0.95rem; }

.yca-lightbox__close,
.yca-lightbox__prev,
.yca-lightbox__next {
	position: absolute;
	background: transparent;
	border: none;
	color: var(--yca-white);
	cursor: pointer;
	line-height: 1;
}
/* PRD-001 Launch Readiness Review fix (2026-07-12): close had no padding,
   so its tap target was only the ~30px glyph itself — smallest control on
   the primary full-screen mobile photo viewer. 12px matches prev/next. */
.yca-lightbox__close { top: 20px; right: 24px; font-size: 2rem; padding: 12px; }
.yca-lightbox__prev,
.yca-lightbox__next { top: 50%; transform: translateY(-50%); font-size: 2rem; padding: 12px; }
.yca-lightbox__prev { left: 12px; }
.yca-lightbox__next { right: 12px; }
.yca-lightbox__close:hover,
.yca-lightbox__prev:hover,
.yca-lightbox__next:hover { opacity: 0.75; }

/* ==========================================================================
   Captain's Insight (template-parts/captains-insight.php, Milestone 1.5)
   Shared block used across destination pages, experience pages, planning
   guides, and journal posts once each has a real quote to show.
   ========================================================================== */

.yca-captains-insight { background: var(--yca-cream); }
.yca-captains-insight__inner { max-width: 720px; margin: 0 auto; }
.yca-captains-insight__card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.yca-captains-insight__avatar { flex-shrink: 0; }
.yca-captains-insight__avatar .yca-team-card__avatar { margin: 0; }
.yca-captains-insight__quote {
	font-family: var(--yca-font-display);
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--yca-navy);
	margin: 0 0 10px;
}
.yca-captains-insight__attribution { color: var(--yca-ink-muted); font-size: 0.9rem; }
@media (max-width: 560px) {
	.yca-captains-insight__card { flex-direction: column; align-items: center; text-align: center; }
}

/* ==========================================================================
   YCA Pro Tip (template-parts/pro-tip.php — EP-013e, 2026-07-22)
   Shared, reusable callout for practical, experience-based broker advice.
   Distinct sand-bordered card treatment so it reads as "practical advice
   from the broker," not another prose section — deliberately different
   from Captain's Insight's quote-and-avatar treatment above.
   ========================================================================== */

.yca-pro-tip-section__inner { max-width: 720px; margin: 0 auto; }
.yca-pro-tip {
	background: var(--yca-white);
	border: 1px solid var(--yca-sand);
	border-left: 4px solid var(--yca-sand-dark);
	border-radius: var(--yca-radius-lg);
	padding: 24px 28px;
	box-shadow: var(--yca-shadow);
}
.yca-pro-tip + .yca-pro-tip { margin-top: 20px; }
.yca-pro-tip__label {
	font-family: var(--yca-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yca-sand-dark);
	margin: 0 0 6px;
}
.yca-pro-tip__heading {
	font-family: var(--yca-font-display);
	font-size: 1.15rem;
	color: var(--yca-navy);
	margin: 0 0 10px;
}
.yca-pro-tip__body { color: var(--yca-ink); }
.yca-pro-tip__body p:last-child { margin-bottom: 0; }
.yca-pro-tip__body a { color: var(--yca-navy); text-decoration: underline; }
.yca-pro-tip__body a:hover { color: var(--yca-sand-dark); }

/* ==========================================================================
   Charter Planning Centre (archive-planning_guide.php, single-planning_guide.php,
   template-parts/guide-card.php — Milestone 2)
   ========================================================================== */

/* Card grid/card visually mirrors .yca-yacht-grid/.yca-yacht-card (same
   flexbox-not-grid reasoning as the part-41 fix above: a short last row
   centers itself instead of leaving a lopsided gap) rather than duplicating
   those rules under a new name with the same values. */
.yca-guide-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	margin-bottom: 48px;
}
.yca-guide-card {
	flex: 1 1 300px;
	max-width: 360px;
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: block;
	background: var(--yca-white);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.yca-guide-card:hover { box-shadow: var(--yca-shadow-hover); transform: translateY(-2px); }
.yca-guide-card:hover .yca-guide-card__more { gap: 10px; }
/* Knowledge-hub card (CPO product note, 2026-07-27): the media is a short 16:9
   accent band, not a dominating 4:3 block, so the card reads title-first.
   Most guides carry no featured thumbnail, so this band is usually the branded
   placeholder gradient — kept slim so it accents rather than dominates. */
.yca-guide-card__photo { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--yca-placeholder-gradient); } /* branded placeholder, never a blank grey box — "no blank cards" product decision, 2026-07-25 */
.yca-guide-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.yca-guide-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.yca-guide-card__eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--yca-sand-dark); }
.yca-guide-card__title { font-size: 1.22rem; font-weight: 600; line-height: 1.3; color: var(--yca-navy); margin: 0; }
.yca-guide-card__excerpt { color: var(--yca-ink-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.yca-guide-card__more { margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--yca-sand-dark); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.15s ease; }

/* Guide body content — the extensible block-editor canvas described in
   inc/cpt-planning-guide.php's file doc comment. Baseline typography plus
   explicit support for the core WordPress blocks a guide is actually
   expected to use over time (Table for comparisons, File for downloadable
   PDFs, Embed/YouTube for video, Quote, List, Columns) so an editor can
   drop any of those into a guide from wp-admin and it looks right
   immediately — no template or CSS change needed when that day comes.
   This theme doesn't enqueue the core wp-block-library stylesheet, so
   without these rules those blocks would render semantically correct but
   visually bare. */
.yca-guide-content { max-width: 760px; margin: 0 auto; line-height: 1.7; }
.yca-guide-content p { margin: 0 0 18px; }
.yca-guide-content h2, .yca-guide-content h3 { margin: 32px 0 14px; }
.yca-guide-content ul, .yca-guide-content ol,
.yca-guide-content .wp-block-list { margin: 0 0 18px; padding-left: 22px; }
.yca-guide-content li { margin-bottom: 6px; }
.yca-guide-content a { color: var(--yca-navy); text-decoration: underline; }

.yca-guide-content table,
.yca-guide-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 0.95rem;
}
.yca-guide-content table th, .yca-guide-content table td,
.yca-guide-content .wp-block-table table th, .yca-guide-content .wp-block-table table td {
	padding: 10px 12px;
	border: 1px solid var(--yca-border);
	text-align: left;
}
.yca-guide-content table th, .yca-guide-content .wp-block-table table th {
	background: var(--yca-cream);
	font-weight: 600;
}

.yca-guide-content .wp-block-embed { margin: 0 0 24px; }
.yca-guide-content .wp-block-embed iframe,
.yca-guide-content .wp-block-embed__wrapper iframe {
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: var(--yca-radius-lg);
}

.yca-guide-content .wp-block-file {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--yca-cream);
	border-radius: var(--yca-radius);
}
.yca-guide-content .wp-block-file a:first-child {
	font-weight: 600;
	text-decoration: none;
	color: var(--yca-navy);
}
.yca-guide-content .wp-block-file__button {
	display: inline-block;
	margin-left: auto;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--yca-navy);
	color: var(--yca-white) !important;
	font-size: 0.82rem;
	text-decoration: none !important;
}
.yca-guide-content .wp-block-file__button:hover { background: var(--yca-navy-light); }

.yca-guide-content blockquote,
.yca-guide-content .wp-block-quote {
	margin: 0 0 24px;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--yca-sand);
	font-style: italic;
	color: var(--yca-ink-muted);
}

.yca-guide-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 24px; }
.yca-guide-content .wp-block-column { flex: 1 1 220px; }

.yca-guide-content img, .yca-guide-content .wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--yca-radius-lg);
	margin: 0 0 8px;
}
.yca-guide-content figcaption { color: var(--yca-ink-muted); font-size: 0.82rem; margin: 0 0 24px; }

/* ==========================================================================
   Breadcrumbs (template-parts/breadcrumb.php) — Charter Planning Centre
   two-tier architecture, 2026-07-23. Consumes the same
   yca_seo_breadcrumb_items() array already feeding the invisible JSON-LD
   BreadcrumbList (inc/seo.php), so the two never drift apart.
   ========================================================================== */
.yca-breadcrumb { margin: 0 0 18px; }
.yca-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; font-size: 0.85rem; color: var(--yca-ink-muted); }
.yca-breadcrumb li { display: flex; align-items: center; }
.yca-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--yca-border); margin: 0 8px; }
.yca-breadcrumb a { color: var(--yca-ink-muted); text-decoration: none; }
.yca-breadcrumb a:hover { color: var(--yca-navy); text-decoration: underline; }
.yca-breadcrumb [aria-current="page"] { color: var(--yca-navy); font-weight: 600; }

/* ==========================================================================
   Charter Planning Centre — Planning Journey (Tier 1) navigation.
   Two-tier architecture, 2026-07-23 (see
   claude/pd231-planning-centre-architecture-proposal.md). Desktop sidebar +
   mobile <details> disclosure render the exact same list markup
   (template-parts/planning-journey-sidebar.php) so only one is ever visible
   at a given breakpoint. "Coming Soon" steps use a muted pill matching
   .yca-badge's pill/uppercase visual language, but as a static (not
   absolute-positioned card-overlay) element, since it sits inline in a list
   here rather than pinned to a photo corner.
   ========================================================================== */

.yca-guide-journey-layout { display: block; }
.yca-guide-journey-layout__main { min-width: 0; }

@media (min-width: 960px) {
	.yca-guide-journey-layout {
		display: grid;
		grid-template-columns: 1fr 280px;
		gap: 48px;
		align-items: start;
	}
}

.yca-guide-journey-sidebar {
	display: none; /* mobile: the <details> disclosure below covers this instead */
	position: sticky;
	top: 24px;
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius-lg);
	padding: 18px;
	background: var(--yca-cream);
}
@media (min-width: 960px) {
	.yca-guide-journey-sidebar { display: block; }
}
.yca-guide-journey-sidebar__home {
	display: inline-block;
	margin-bottom: 14px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--yca-navy);
	text-decoration: none;
}
.yca-guide-journey-sidebar__home:hover { text-decoration: underline; }
.yca-guide-journey-sidebar__list { list-style: none; margin: 0; padding: 0; }
.yca-guide-journey-sidebar__item {
	padding: 8px 0;
	border-top: 1px solid var(--yca-border);
	font-size: 0.9rem;
	line-height: 1.4;
}
.yca-guide-journey-sidebar__item:first-child { border-top: none; }
.yca-guide-journey-sidebar__item a { display: block; color: var(--yca-ink); text-decoration: none; }
.yca-guide-journey-sidebar__item a:hover { text-decoration: underline; }
.yca-guide-journey-sidebar__num { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--yca-ink-muted); }
.yca-guide-journey-sidebar__label { display: block; }
.yca-guide-journey-sidebar__item.is-current { font-weight: 700; }
.yca-guide-journey-sidebar__item.is-current .yca-guide-journey-sidebar__num { color: var(--yca-sand-dark); }
.yca-guide-journey-sidebar__item.is-coming-soon { color: var(--yca-ink-muted); }
.yca-guide-journey-sidebar__badge {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--yca-border);
	color: var(--yca-ink-muted);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.yca-guide-journey-mobile-nav {
	display: block;
	margin-bottom: 24px;
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius-lg);
	padding: 14px 18px;
	background: var(--yca-cream);
}
@media (min-width: 960px) {
	.yca-guide-journey-mobile-nav { display: none; } /* desktop: persistent sidebar covers this instead */
}
.yca-guide-journey-mobile-nav summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--yca-navy);
	font-family: var(--yca-font-display);
}
.yca-guide-journey-mobile-nav .yca-guide-journey-sidebar__home { display: block; margin-top: 12px; }
.yca-guide-journey-mobile-nav .yca-guide-journey-sidebar__list { margin-top: 6px; }

.yca-guide-journey-progress {
	margin: 0 0 6px;
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--yca-sand-dark);
}

.yca-guide-journey-prevnext {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin-top: 12px;
	padding-top: 24px;
	border-top: 1px solid var(--yca-border);
}
.yca-guide-journey-prevnext__link {
	flex: 1 1 220px;
	display: block;
	padding: 14px 18px;
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius-lg);
	color: var(--yca-ink);
	text-decoration: none;
	font-size: 0.95rem;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.yca-guide-journey-prevnext__link:hover { box-shadow: var(--yca-shadow); border-color: var(--yca-sand); }
.yca-guide-journey-prevnext__link--next { text-align: right; }
.yca-guide-journey-prevnext__eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--yca-ink-muted);
	margin-bottom: 4px;
}

.yca-guide-journey-back { margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--yca-border); }
.yca-guide-journey-back a { color: var(--yca-navy); font-weight: 600; text-decoration: none; }
.yca-guide-journey-back a:hover { text-decoration: underline; }

/* Archive "Start Here: The Planning Journey" timeline (archive-planning_guide.php) */
.yca-guide-journey-timeline {
	list-style: none;
	margin: 0 0 48px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.yca-guide-journey-timeline__item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius-lg);
	background: var(--yca-white);
}
.yca-guide-journey-timeline__num {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--yca-navy);
	color: var(--yca-white);
	font-weight: 700;
	font-size: 0.85rem;
}
.yca-guide-journey-timeline__item.is-coming-soon .yca-guide-journey-timeline__num { background: var(--yca-border); color: var(--yca-ink-muted); }
.yca-guide-journey-timeline__label { text-decoration: none; font-weight: 600; color: var(--yca-ink-muted); }
a.yca-guide-journey-timeline__label { color: var(--yca-navy); }
a.yca-guide-journey-timeline__label:hover { text-decoration: underline; }
.yca-guide-journey-timeline__item.is-coming-soon .yca-guide-journey-timeline__label { font-weight: 400; }

/* Charter Planning Centre — visual-flow polish (CPO QA, 2026-07-25). Two proper
   .yca-section blocks replace the old bare-container stack. The Journey sits on
   a subtle cream band so it reads as the page's primary feature and the white
   step cards gain contrast; the Browse section groups heading + filter + grid.
   Journey and Browse paddings are tightened so the page flows as one experience
   rather than separate floating sections. */
.yca-planning-journey { background: var(--yca-cream); padding-bottom: 48px; }
.yca-guide-browse { padding-top: 48px; }
.yca-guide-journey-timeline { margin: 0; } /* section padding now owns the rhythm */
/* Group the filter tightly with its grid: neutralise the base .yca-filter-bar's
   hero-tuck negative margin / max-width in this context so it sits directly
   under the Browse heading and above the grid as one unit. */
.yca-guide-browse .yca-filter-bar { margin: 0 auto 20px; max-width: none; }
/* Step cards a touch more prominent — more vertical padding and a soft lift so
   they read as the primary feature, popping against the cream band. */
.yca-planning-journey .yca-guide-journey-timeline__item { padding: 18px 20px; box-shadow: var(--yca-shadow); }

/* ==========================================================================
   Captain's Journal — Milestone 5. Card/grid rules mirror .yca-guide-card /
   .yca-guide-grid exactly (own class names, same reasoning as
   .yca-experience-card getting its own rules in Milestone 4: each content
   type keeps independently stylable classes even where the current visual
   treatment is identical). The article body itself reuses .yca-guide-content
   directly (see inc/journal-section-registry.php) rather than duplicating
   all of the block-styling rules above for an identical need.
   ========================================================================== */
.yca-journal-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	margin-bottom: 48px;
}
.yca-journal-card {
	flex: 1 1 300px;
	max-width: 360px;
	border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: block;
	background: var(--yca-white);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.yca-journal-card:hover { box-shadow: var(--yca-shadow-hover); transform: translateY(-2px); }
.yca-journal-card__photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--yca-placeholder-gradient); } /* branded placeholder, never a blank grey box — "no blank cards" product decision, 2026-07-25 */
.yca-journal-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.yca-journal-card__body { padding: 16px 18px 18px; }
.yca-journal-card__title { font-size: 1.1rem; margin-bottom: 6px; }
.yca-journal-card__excerpt { color: var(--yca-ink-muted); font-size: 0.88rem; line-height: 1.5; }

/* Author byline — reuses .yca-team-card as-is (see
   inc/journal-section-registry.php's yca_render_journal_author()), just
   capped to a single narrow centered card instead of the multi-column grid
   .yca-team-grid gives it on the homepage. */
.yca-journal-author__card { max-width: 320px; margin: 0 auto; }

/* ==========================================================================
   Footer
   ========================================================================== */

.yca-site-footer { background: var(--yca-navy); color: var(--yca-white); padding: 48px 0 24px; margin-top: 48px; }
/* 0.18.10 (B3): that margin-top is page background — white — so on every page
   that closes with the navy CTA band it renders as a 48px white stripe between
   two navy blocks. Measured at exactly 48px; CC observed ~44px. It is the
   footer's own margin, NOT a stray <p>. Removing the margin outright would
   change spacing on every other page, so it is zeroed only in the case that is
   wrong, identified structurally rather than with a negative margin. The band
   already carries 64px of .yca-section padding, so the two still breathe. */
#main:has(> .yca-experiences-cta:last-child) + .yca-site-footer { margin-top: 0; }
.yca-site-footer a { color: var(--yca-white); opacity: 0.85; }
.yca-site-footer a:hover { opacity: 1; }
.yca-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-bottom: 24px; }
.yca-footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; font-size: 0.8rem; opacity: 0.7; }

.yca-social-links { display: flex; gap: 14px; margin-top: 10px; }
.yca-social-links__icon { color: var(--yca-navy); opacity: 0.8; display: inline-flex; }
.yca-social-links__icon:hover { opacity: 1; }
.yca-site-footer .yca-social-links__icon { color: var(--yca-white); }

/* ==========================================================================
   Reduced motion (Snag A1 — WCAG 2.3.3 Animation from Interactions;
   Brand Manual v0.1 §11 "subtle motion" honoured for users who opt out)
   For visitors who set prefers-reduced-motion: reduce at the OS level, we
   collapse all decorative transitions/transforms and the card hover-lift so
   nothing slides, fades or moves. Carousels already stop auto-rotating in JS
   (startTimer guard); this covers the CSS-driven motion. Functional focus
   outlines and layout are untouched.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	/* Neutralise the hover-lift used on cards/journal tiles so nothing shifts. */
	.yca-journal-card:hover,
	.yca-experience-card:hover,
	.yca-destination-card:hover,
	.yca-team-card:hover,
	.yca-guide-card:hover,
	.yca-yacht-card:hover {
		transform: none !important;
	}
}

/* ==========================================================================
   Outline icon system (Snag I5 / BL-55; Brand Manual §8)
   One family, one style. Icons inherit text colour via currentColor and size
   to the font by default. Section rules below set the accent colour + scale
   for each placement. See inc/icons.php.
   ========================================================================== */
.yca-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: 0 0 auto; }
.yca-icon--lg { width: 1.6em; height: 1.6em; }

/* Trust bar — outline icon above each statement, in the sand/gold accent. */
.yca-trust-grid__item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.yca-trust-grid__item .yca-icon { width: 30px; height: 30px; color: var(--yca-sand-dark); }

/* Why-Choose cards — accent icon above each pillar heading. */
.yca-why-grid__icon { width: 32px; height: 32px; color: var(--yca-sand-dark); margin-bottom: 10px; }

/* ==========================================================================
   Search results (Snag X1) — simple, readable results list + retry box.
   ========================================================================== */
.yca-search-header { margin-bottom: 24px; }
.yca-search-count { color: var(--yca-ink-muted); font-size: 0.9rem; margin: 4px 0 0; }
.yca-search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.yca-search-result { padding-bottom: 20px; border-bottom: 1px solid var(--yca-border); }
.yca-search-result__link { text-decoration: none; }
.yca-search-result__title { font-family: var(--yca-font-display); font-size: 1.25rem; color: var(--yca-navy); margin: 0 0 6px; }
.yca-search-result__link:hover .yca-search-result__title { color: var(--yca-sand-dark); }
.yca-search-result__excerpt { color: var(--yca-ink-muted); margin: 0; line-height: 1.55; }
.yca-search-retry { max-width: 420px; margin: 20px auto 0; }

/* ==========================================================================
   "What Happens Next?" enquiry-process component (template-parts/what-happens-next.php)
   Uses the outline icon system; consistent with the homepage 4-step rhythm.
   ========================================================================== */
.yca-whn__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
}
.yca-whn__step { text-align: center; }
.yca-whn__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--yca-cream);
	border: 1px solid var(--yca-border);
	color: var(--yca-sand-dark);
	margin-bottom: 14px;
}
.yca-whn__icon .yca-icon { width: 26px; height: 26px; }
.yca-whn__num {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--yca-navy);
	color: var(--yca-white);
	font-family: var(--yca-font-display);
	font-size: 0.78rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.yca-whn__title { font-size: 1.05rem; margin: 0 0 8px; color: var(--yca-navy); }
.yca-whn__body { color: var(--yca-ink-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.yca-whn__note {
	text-align: center;
	color: var(--yca-ink-muted);
	font-size: 0.92rem;
	max-width: 640px;
	margin: 28px auto 0;
}

/* ==========================================================================
   Professional Credentials component (T1 / PD-010)
   Verified-only; the PHP renders nothing when empty, so these styles only
   ever apply when there is real content to show.
   ========================================================================== */
.yca-credentials { text-align: center; }
.yca-credentials__heading { font-family: var(--yca-font-display); color: var(--yca-navy); font-size: 1.2rem; margin: 0 0 16px; }
.yca-credentials__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
.yca-credentials__item { display: inline-flex; align-items: center; gap: 8px; }
.yca-credentials__icon .yca-icon { width: 20px; height: 20px; color: var(--yca-sand-dark); }
.yca-credentials__name { font-weight: 600; color: var(--yca-navy); text-decoration: none; }
a.yca-credentials__name:hover { color: var(--yca-sand-dark); text-decoration: underline; }
.yca-credentials__detail { color: var(--yca-ink-muted); font-size: 0.85rem; margin-left: 6px; }

/* Footer variant — sits on the navy footer, above the copyright bar. */
.yca-credentials--footer { padding: 8px 0 20px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.15); }
.yca-credentials--footer .yca-credentials__heading { color: var(--yca-white); font-size: 1rem; opacity: 0.95; }
.yca-credentials--footer .yca-credentials__name { color: var(--yca-white); }
.yca-credentials--footer a.yca-credentials__name:hover { color: var(--yca-sand-dark); }
.yca-credentials--footer .yca-credentials__detail { color: rgba(255,255,255,0.7); }

/* Breadcrumb wrapper (D11a) — gives the trail a little breathing room when it
   sits directly below a full-width hero on destination/experience singles. */
.yca-breadcrumb-wrap { margin-top: 20px; }

/* ==========================================================================
   Broker Credentials section (template-parts/broker-credentials.php)
   Educational "why professional guidance adds value" block. Reuses design
   tokens; optional lifestyle image sits beside the intro on wider screens.
   ========================================================================== */
.yca-section__heading--left { text-align: left; }
.yca-broker-credentials__lead { display: grid; gap: 28px; align-items: start; }
.yca-broker-credentials__lead.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 780px) { .yca-broker-credentials__lead.has-image { grid-template-columns: 1fr; } }
.yca-broker-credentials__media { margin: 0; }
.yca-broker-credentials__media img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: var(--yca-radius-lg); display: block; }
.yca-broker-credentials__intro p { margin: 0 0 12px; color: var(--yca-ink-muted); }
.yca-broker-credentials__body { max-width: 760px; margin: 28px 0 0; }
.yca-broker-credentials__body h3 { font-family: var(--yca-font-display); color: var(--yca-navy); font-size: 1.3rem; margin: 26px 0 10px; }
.yca-broker-credentials__body p { color: var(--yca-ink-muted); margin: 0 0 12px; }
.yca-broker-credentials__pull { font-family: var(--yca-font-display); font-size: 1.2rem; line-height: 1.5; color: var(--yca-navy) !important; border-left: 3px solid var(--yca-sand-dark); padding-left: 18px; margin: 18px 0 !important; }
.yca-broker-credentials__list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.yca-broker-credentials__list li { position: relative; padding-left: 28px; color: var(--yca-ink-muted); }
.yca-broker-credentials__list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border: 2px solid var(--yca-sand-dark); border-radius: 50%; }
.yca-broker-credentials__cta { max-width: 760px; margin: 28px 0 0; padding: 24px; background: var(--yca-cream); border: 1px solid var(--yca-border); border-radius: var(--yca-radius-lg); }
.yca-broker-credentials__cta p { margin: 0 0 16px; color: var(--yca-navy); }

/* Why-Use-a-Broker internal-link surfaces (CPO IA decision, 2026-07-25) */
.yca-broker-teaser__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.yca-broker-teaser__inner p { color: var(--yca-ink-muted); margin: 0 0 18px; }
.yca-detail-broker-note { margin: 12px 0 0; font-size: 0.9rem; color: var(--yca-ink-muted); }
.yca-detail-broker-note a { color: var(--yca-navy); }
.yca-broker-why__links { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--yca-border); color: var(--yca-ink-muted); }

/* About + Why-Use-a-Broker flagship page niceties (CPP 001/002) */
.yca-about-body__lead, .yca-broker-why__lead { font-size: 1.15rem; color: var(--yca-navy) !important; line-height: 1.6; }
.yca-about-links { color: var(--yca-ink-muted); font-size: 0.95rem; }
.yca-about-links a { color: var(--yca-navy); }

/* Planning-guide callout + checklist (CPO packs 011-015) */
.yca-guide-notice { background: var(--yca-cream); border: 1px solid var(--yca-border); border-left: 4px solid var(--yca-sand-dark); border-radius: var(--yca-radius); padding: 16px 20px; margin: 24px 0; color: var(--yca-navy); font-size: 0.95rem; }
.yca-guide-content h4 { font-family: var(--yca-font-display); color: var(--yca-navy); font-size: 1.1rem; margin: 18px 0 8px; }
.yca-guide-checklist { list-style: none; padding: 0; }
.yca-guide-checklist li { position: relative; padding-left: 30px; margin-bottom: 8px; }
.yca-guide-checklist li::before { content: "\2713"; position: absolute; left: 4px; color: var(--yca-sand-dark); font-weight: 700; }

/* Enquire page trust list (PD-021) */
.yca-enquire__trust { list-style: none; padding: 0; margin: 14px 0; }
.yca-enquire__trust li { color: var(--yca-ink-muted); font-size: 0.92rem; margin-bottom: 6px; }
.yca-enquire-explore .yca-btn { margin: 0 6px 8px; }

/* T1 credential detail fields + standard intro/statement */
.yca-credentials__intro { max-width: 680px; margin: 0 auto 18px; color: var(--yca-ink-muted); text-align: center; }
.yca-credentials__statement { max-width: 680px; margin: 18px auto 0; color: var(--yca-ink-muted); font-size: 0.82rem; text-align: center; }
.yca-credentials__status { color: var(--yca-sand-dark); font-size: 0.8rem; font-weight: 600; margin-left: 6px; }
.yca-credentials__issuer { display: block; color: var(--yca-ink-muted); font-size: 0.85rem; }

/* ==========================================================================
   Yacht Search page redesign (CPO, 2026-07-26)
   ========================================================================== */
.yca-search-section { padding: 0; }
/* The card reuses .yca-filter-bar's white/border/radius/shadow but overrides its
   grid layout (it is now a block wrapping its own sub-grids) and floats up over
   the hero for a premium "booking card" feel. */
.yca-search-card.yca-filter-bar {
	display: block;
	max-width: none;
	margin: -70px 0 0;
	padding: 28px;
	box-shadow: var(--yca-shadow-hover);
}
.yca-search-card__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.yca-filter-field__hint { text-transform: none; letter-spacing: 0; color: var(--yca-ink-muted); font-weight: 400; }
.yca-more-filters { margin-top: 16px; border-top: 1px solid var(--yca-border); padding-top: 14px; }
.yca-more-filters > summary { cursor: pointer; font-weight: 600; color: var(--yca-sand-dark); font-size: 0.9rem; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.yca-more-filters > summary::-webkit-details-marker { display: none; }
.yca-more-filters > summary::before { content: '\002B'; font-weight: 700; }
.yca-more-filters[open] > summary::before { content: '\2212'; }
.yca-more-filters .yca-search-card__grid { margin-top: 14px; }
.yca-search-card__actions { margin-top: 20px; }
.yca-search-card__actions .yca-btn { min-width: 220px; }
/* Expectation-management note under the search card (CPO brief, 2026-07-26). */
.yca-search-note {
	max-width: 760px;
	margin: 18px auto 0;
	text-align: center;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--yca-ink-muted);
}
@media (max-width: 900px) {
	.yca-search-card__grid { grid-template-columns: repeat(2, 1fr); }
	.yca-search-card.yca-filter-bar { margin-top: -44px; padding: 22px; }
}
@media (max-width: 520px) {
	.yca-search-card__grid { grid-template-columns: 1fr; }
	.yca-search-card__actions .yca-btn { width: 100%; }
}

/* Curated-collection confidence block (replaces the old apology empty state). */
.yca-curated { text-align: center; max-width: 680px; margin: 0 auto; padding: 40px 20px 8px; }
.yca-curated h2 { font-size: 1.8rem; margin: 0 0 14px; }
.yca-curated p { color: var(--yca-ink-muted); font-size: 1.05rem; line-height: 1.65; margin: 0 auto 22px; }

/* Yacht type cards — branded navy tiles linking into the filtered search. */
.yca-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.yca-type-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 128px; padding: 20px; border-radius: var(--yca-radius-lg); background: var(--yca-placeholder-gradient); color: var(--yca-white); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.yca-type-card:hover { transform: translateY(-3px); box-shadow: var(--yca-shadow-hover); }
.yca-type-card__name { font-family: var(--yca-font-display); font-size: 1.18rem; line-height: 1.2; }
.yca-type-card__cta { font-size: 0.85rem; color: var(--yca-sand); letter-spacing: 0.03em; margin-top: 12px; }
.yca-type-card__text { font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.82); margin-top: 8px; }
.yca-type-card--lead { box-shadow: inset 0 0 0 2px var(--yca-sand); }
@media (min-width: 901px) { .yca-type-card--lead { grid-column: span 2; } }
@media (max-width: 900px) { .yca-type-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .yca-type-grid { grid-template-columns: 1fr; } }

/* Decision-journey step eyebrows (Yacht Charters landing, C14). */
.yca-step__eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--yca-sand); margin: 0 0 6px; }

/* Meal plans within a crewed charter (F5) — presented as meal plans, not
   separate charter service models. */
.yca-mealplans { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--yca-hairline, rgba(10,42,67,0.12)); }
.yca-mealplans__title { font-family: var(--yca-font-display); font-size: 1.35rem; margin: 0 0 8px; }
.yca-mealplans__intro { color: var(--yca-ink-muted); font-size: 1rem; line-height: 1.6; margin: 0 0 20px; max-width: 760px; }
.yca-mealplans__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.yca-mealplan { padding: 22px; border-radius: var(--yca-radius-lg); background: var(--yca-sand-tint, #f6f1e7); }
.yca-mealplan__name { font-family: var(--yca-font-display); font-size: 1.1rem; margin: 0 0 8px; color: var(--yca-navy, #0a2a43); }
.yca-mealplan__text { font-size: 0.95rem; line-height: 1.6; color: var(--yca-ink-muted); margin: 0; }
@media (max-width: 700px) { .yca-mealplans__grid { grid-template-columns: 1fr; } }

/* Alternating section band for visual rhythm on long marketing pages. */
.yca-section--alt { background: var(--yca-cream); }

/* Featured Experiences: force a balanced 3-column grid on the homepage callout
   so the six-experience launch set reads as an intentional 3×2 (CPO, 2026-07-26)
   rather than the base auto-fill grid's uneven 4+2. Scoped to the callout so
   other .yca-experience-grid uses are unaffected. */
.yca-experiences-callout .yca-experience-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .yca-experiences-callout .yca-experience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .yca-experiences-callout .yca-experience-grid { grid-template-columns: 1fr; } }

/* Photo-hero CTA contrast fix (2026-07-26): on a dark photo hero the shared
   hero's secondary button was navy-outline-on-navy and nearly invisible. Give
   it the on-hero white treatment (matches the homepage hero's secondary CTA). */
/* 0.18.10 (B1): the --secondary override below has existed since the photo hero
   shipped; its --primary partner was never written, so the same inverted
   hierarchy appears over every destination hero photo. Completing the pair. */
.yca-page-hero[style*="background-image"] .yca-btn--primary { background: var(--yca-white); border-color: var(--yca-white); color: var(--yca-navy); }
.yca-page-hero[style*="background-image"] .yca-btn--primary:hover { background: var(--yca-cream); border-color: var(--yca-cream); color: var(--yca-navy); }
.yca-page-hero[style*="background-image"] .yca-btn--secondary { background: transparent; border-color: var(--yca-white); color: var(--yca-white); }
.yca-page-hero[style*="background-image"] .yca-btn--secondary:hover { background: var(--yca-white); color: var(--yca-navy); }

/* ==========================================================================
   Premium Transparent Header (CPO Design Direction, 2026-07-26)
   --------------------------------------------------------------------------
   On pages whose FIRST content block is a dark hero (the homepage .yca-hero, or
   a photo .yca-page-hero), the fixed header overlays the hero fully transparent
   with a white emblem + white nav on load, then transitions to a solid warm
   off-white bar with the dark emblem once the visitor scrolls past the hero
   (the `.is-solid` class is added by assets/js/header-transparent.js).

   The at-top transparent state is pure CSS (`body:has(main ><hero>:first-child)`)
   so there is no load flash and no JS dependency for the first paint; a
   <noscript> block in header.php forces the header solid when JS is off. Pages
   with no dark hero at the top keep the default solid header (above) and the
   `#main` top offset, so nothing about them changes.
   ========================================================================== */

/* Smaller fixed-header height on phones (84px logo + 14px×2 padding); and the
   responsive hero-height steps for the single hero design system (CPO,
   2026-07-26) — desktop 480 / tablet 440 / phone 380, each ~+14–18% over the
   previous fixed sizes so every landing page's hero feels equally immersive. */
@media (max-width: 1024px) {
	:root { --yca-hero-h: 500px; }
}
@media (max-width: 600px) {
	:root { --yca-header-h: 112px; --yca-hero-h: 420px; }
}

/* Overlay pages: the hero sits behind the transparent header, so remove the
   #main offset and give the hero enough top room to clear the header. */
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) #main { padding-top: 0; }
body:has(main >.yca-hero:first-child) .yca-hero { padding-top: calc(var(--yca-header-h) + 24px); }
body:has(main >.yca-page-hero[style*="background-image"]:first-child) .yca-page-hero[style*="background-image"] { padding-top: calc(var(--yca-header-h) + 16px); }

/* Transparent appearance while over the hero (before scroll / not .is-solid). */
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}
/* Soft top-down scrim so the white emblem/nav stay legible over bright hero
   areas (sky, pale water). Sits behind the header's inner content (z-index:1). */
.yca-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid)::before { opacity: 1; }

/* Transparent state — white emblem, white nav/CTA, white hamburger bars. */
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-logo__image--dark { display: none; }
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-logo__image--light { display: block; }
/* 0.18.10 (B2): .yca-callbroker__trigger added. The desktop control lives in
   .yca-header-actions, NOT in .yca-nav, so the `.yca-nav a` scope never reached
   it and "Call a Broker" stayed navy-on-photo while every neighbouring link
   turned white. (.yca-header-phone is the PD-240 link PD-303 retired; kept so
   this rule is not silently narrowed.) The footer control is unaffected — this
   whole block is scoped to .yca-site-header. */
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-nav a,
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-callbroker__trigger,
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-header-phone { color: var(--yca-white); }
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-nav a:hover,
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-callbroker__trigger:hover,
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-callbroker__trigger:focus-visible { color: var(--yca-white); opacity: 0.78; }
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-nav-toggle__bar { background: var(--yca-white); }
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-btn--secondary { border-color: var(--yca-white); color: var(--yca-white); }
:is(
	body:has(main >.yca-hero:first-child),
	body:has(main >.yca-page-hero[style*="background-image"]:first-child)
) .yca-site-header:not(.is-solid) .yca-btn--secondary:hover { background: var(--yca-white); color: var(--yca-navy); }

/* Solid state (scrolled): subtle shadow to lift the bar off the page, on top of
   the existing hairline border. */
.yca-site-header.is-solid { box-shadow: 0 1px 14px rgba(var(--yca-navy-rgb), 0.10); }

/* Drawer open (hamburger, ≤1300px): force the header solid so the emblem, the
   toggle and the full-width drawer panel are always legible — even over a hero.
   Uses :has() on the existing pure-CSS toggle checkbox, so this holds with or
   without JS. */
body:has(#yca-nav-toggle-input:checked) .yca-site-header { background: var(--yca-cream); border-bottom-color: var(--yca-border); }
body:has(#yca-nav-toggle-input:checked) .yca-site-header::before { opacity: 0; }
body:has(#yca-nav-toggle-input:checked) .yca-logo__image--dark { display: block; }
body:has(#yca-nav-toggle-input:checked) .yca-logo__image--light { display: none; }
body:has(#yca-nav-toggle-input:checked) .yca-nav-toggle__bar { background: var(--yca-navy); }
/* Reset the transparent-mode white text back to dark so the drawer's links, CTA
   and phone are legible on the white drawer panel (the #id in the :has() above
   gives these the specificity to win over the hero-overlay rules). */
body:has(#yca-nav-toggle-input:checked) .yca-nav a { color: var(--yca-navy); }
body:has(#yca-nav-toggle-input:checked) .yca-nav a:hover { color: var(--yca-sand-dark); opacity: 1; }
body:has(#yca-nav-toggle-input:checked) .yca-header-phone { color: var(--yca-ink); }
body:has(#yca-nav-toggle-input:checked) .yca-callbroker__trigger { color: var(--yca-ink); }
body:has(#yca-nav-toggle-input:checked) .yca-callbroker--footer .yca-callbroker__trigger { color: inherit; }
body:has(#yca-nav-toggle-input:checked) .yca-btn--secondary { border-color: var(--yca-navy); color: var(--yca-navy); }

/* Fixed header + open drawer safety: never let a tall open menu exceed the
   viewport with no way to reach the lower items (only relevant in drawer mode). */
@media (max-width: 1300px) {
	.yca-site-header { max-height: 100vh; overflow-y: auto; }
}

/* Honour reduced-motion: keep the transition instant rather than animated. */
@media (prefers-reduced-motion: reduce) {
	.yca-site-header, .yca-site-header::before { transition: none; }
}

/* ==========================================================================
   Featured Charter Types (homepage) — CPO "Elevate Bareboat Charters" +
   "Positioning of Crewed & Bareboat Charters" (2026-07-26).
   Crewed-flagship visual hierarchy: crewed = full-width featured card with the
   most prominence; bareboat = confident card with a navy accent (core product,
   never secondary/apologetic); skippered = plainer supporting card. Mobile-first:
   all three stack in source order (crewed, bareboat, skippered); at >=900px the
   crewed card spans the full row and bareboat/skippered share the row beneath.
   ========================================================================== */
.yca-charter-types__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.yca-charter-type-card {
	background: var(--yca-white);
	border: 1px solid rgba(var(--yca-navy-rgb), 0.10);
	border-radius: var(--yca-radius-lg);
	box-shadow: var(--yca-shadow);
	padding: 28px;
}
.yca-charter-type-card h3 { margin-top: 0; margin-bottom: 12px; color: var(--yca-navy); }
.yca-charter-type-card p { margin: 0 0 12px; }
.yca-charter-type-card p:last-child { margin-bottom: 0; }
.yca-charter-type-card__best-for { color: var(--yca-navy-light); }
/* Primary = luxury crewed (flagship, most prominence). */
.yca-charter-type-card--primary {
	background: var(--yca-cream);
	border-top: 4px solid var(--yca-sand-dark);
	padding: 32px;
}
.yca-charter-type-card--primary h3 { font-size: 1.5rem; }
/* Secondary = bareboat (core, confident — stronger accent than skippered). */
.yca-charter-type-card--secondary { border-top: 3px solid var(--yca-navy); }
/* Supporting = skippered (a supporting option; plainest treatment). */
.yca-charter-type-card--supporting { border-top: 1px solid rgba(var(--yca-navy-rgb), 0.10); }
.yca-charter-types__cta {
	margin-top: 28px;
	padding: 28px;
	text-align: center;
	background: var(--yca-cream);
	border-radius: var(--yca-radius-lg);
}
.yca-charter-types__cta h3 { margin-top: 0; margin-bottom: 10px; color: var(--yca-navy); }
.yca-charter-types__cta p { max-width: 680px; margin: 0 auto 20px; }
@media (min-width: 900px) {
	.yca-charter-types__grid { grid-template-columns: 1fr 1fr; }
	.yca-charter-type-card--primary { grid-column: 1 / -1; }
}

/* ==========================================================================
   Guide comparison table (CPO, 2026-07-26) — used by the "All-Inclusive vs.
   Plus-Expenses" pricing-models Planning Guide. Horizontally scrollable on
   narrow screens so the 3-column table never overflows the content column.
   ========================================================================== */
.yca-comparison-table-wrap { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; }
.yca-comparison-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; min-width: 520px; }
.yca-comparison-table__caption { caption-side: top; text-align: left; font-size: 0.85rem; color: var(--yca-ink-muted); margin-bottom: 10px; font-style: italic; }
.yca-comparison-table th, .yca-comparison-table td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--yca-border); vertical-align: top; }
.yca-comparison-table thead th { background: var(--yca-navy); color: var(--yca-white); font-family: var(--yca-font-display); font-weight: 600; }
.yca-comparison-table tbody th[scope="row"] { background: var(--yca-cream); color: var(--yca-navy); font-weight: 600; width: 26%; }
.yca-comparison-table tbody tr:last-child th, .yca-comparison-table tbody tr:last-child td { border-bottom: none; }

/* ==========================================================================
   Planning-guide long-form components (CTO Implementation Spec, 2026-07-26) —
   Table of Contents, reading time, and reusable callouts (Broker Insight /
   Good to Know / Things That Vary). Reusable by any guide; introduced for the
   Travel Logistics flagship. Sticky in-page nav is a deliberate Phase 2 item.
   ========================================================================== */
.yca-guide-content .yca-guide-section { scroll-margin-top: calc(var(--yca-header-h) + 16px); }
.yca-guide-reading-time { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--yca-ink-muted); margin: 0 0 14px; }
.yca-guide-toc { background: var(--yca-cream); border: 1px solid var(--yca-border); border-radius: var(--yca-radius-lg); padding: 18px 22px; margin: 0 0 30px; }
.yca-guide-toc__title { font-family: var(--yca-font-display); color: var(--yca-navy); font-size: 0.85rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.yca-guide-toc ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.yca-guide-toc li { margin: 0 0 7px; break-inside: avoid; }
.yca-guide-toc a { color: var(--yca-navy); text-decoration: none; }
.yca-guide-toc a:hover { color: var(--yca-sand-dark); text-decoration: underline; }
@media (max-width: 560px) { .yca-guide-toc ul { columns: 1; } }

.yca-callout { border-radius: var(--yca-radius-lg); padding: 18px 22px; margin: 24px 0; border-left: 4px solid var(--yca-border); }
.yca-callout__label { display: block; font-family: var(--yca-font-display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 7px; }
.yca-callout p:last-child { margin-bottom: 0; }
.yca-callout--broker-insight { background: var(--yca-navy); color: var(--yca-white); border-left-color: var(--yca-sand); }
.yca-callout--broker-insight .yca-callout__label { color: var(--yca-sand); }
.yca-callout--broker-insight a { color: var(--yca-white); }
.yca-callout--good-to-know { background: var(--yca-cream); border-left-color: var(--yca-sand-dark); }
.yca-callout--good-to-know .yca-callout__label { color: var(--yca-sand-dark); }
.yca-callout--things-that-vary { background: var(--yca-cream); border-left-color: var(--yca-navy-light); }
.yca-callout--things-that-vary .yca-callout__label { color: var(--yca-navy); }

/* ==========================================================================
   Charter-type badge distinction (CPO "Integrate Bareboat", 2026-07-26).
   Every yacht card + detail page shows its charter type immediately, in the
   crewed-first product hierarchy: Crewed = navy (flagship), Bareboat = sand-gold
   (core, clearly distinct), Skippered/Captain-Only = navy-light (supporting).
   Solid backgrounds keep white text legible over card photography.
   ========================================================================== */
.yca-badge--crewed { background: var(--yca-navy); }
.yca-badge--bareboat { background: var(--yca-sand-dark); }
.yca-badge--captain-only { background: var(--yca-navy-light); }

/* ── Phase 2 M2.1 (2026-07-29): CYA catalogue presentation ── */
/* Editorial suitability line on yacht cards — the broker-knowledge differentiator. */
.yca-yacht-card__suitability {
	margin: 6px 0 2px;
	font-size: 0.9rem;
	line-height: 1.4;
	color: #3a4a57;
	font-style: italic;
}
/* Mandatory CYA image attribution / link-back beneath the yacht gallery. */
.yca-photo-credit {
	margin: 10px 0 0;
	font-size: 0.8rem;
	color: #6b7b88;
}
.yca-photo-credit a {
	color: #0a2a43;
	text-decoration: underline;
}

/* ── Phase 2 M2.2 (2026-07-29): full-bleed editorial yacht hero ── */
.yca-yacht-hero{position:relative;min-height:74vh;max-height:820px;display:flex;align-items:flex-end;
	color:#fff;overflow:hidden;background:#0a2a43}
.yca-yacht-hero--plain{min-height:44vh}
.yca-yacht-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.yca-yacht-hero__scrim{position:absolute;inset:0;z-index:1;
	background:linear-gradient(180deg,rgba(8,24,36,.12) 0%,rgba(8,24,36,.12) 42%,rgba(8,24,36,.74) 100%)}
.yca-yacht-hero__inner{position:relative;z-index:2;width:100%;padding-top:56px;padding-bottom:52px}
.yca-yacht-hero__eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:600;
	color:#e6d3a6;margin:0 0 14px}
.yca-yacht-hero__name{font-family:Georgia,'Iowan Old Style','Times New Roman',serif;font-weight:500;
	font-size:clamp(38px,6.4vw,76px);line-height:1.08;margin:0 0 14px;color:#fff}
.yca-yacht-hero__tagline{font-family:Georgia,'Iowan Old Style',serif;font-style:italic;
	font-size:clamp(18px,2.2vw,25px);line-height:1.5;color:#f1ece2;max-width:640px;margin:0 0 30px}
.yca-yacht-hero__facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(255,255,255,.24);padding-top:22px}
.yca-yacht-hero__fact{padding-right:38px;margin-right:38px;border-right:1px solid rgba(255,255,255,.18)}
.yca-yacht-hero__fact:last-child{border-right:0;margin-right:0;padding-right:0}
.yca-yacht-hero__fact .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#cdbd9a;margin-bottom:5px}
.yca-yacht-hero__fact .v{font-family:Georgia,'Iowan Old Style',serif;font-size:22px;line-height:1.1}
.yca-yacht-hero__fact .v small{font-size:13px;font-family:inherit;letter-spacing:.04em;color:#dfe7ec}
@media(max-width:640px){
	.yca-yacht-hero{min-height:66vh}
	.yca-yacht-hero__inner{padding-bottom:38px}
	.yca-yacht-hero__fact{padding-right:20px;margin-right:20px;margin-bottom:10px}
	.yca-yacht-hero__fact .v{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.yca-yacht-hero__img{transition:none}}

/* ── Yacht gallery (0.16.0): interactive hero stage + thumbs + lightbox ── */
.yca-yg{margin:0 0 40px}
/* Main stage */
/* 0.18.10 (C2): with aspect-ratio 16/10 and max-height 580px the browser
   resolves the clamp by SHRINKING THE WIDTH (1152 -> 928px at 1400px viewport,
   a measured 224px short of the thumbnail row below it). An explicit width
   makes the inline axis definite, so only the height clamps; the stage image is
   already position:absolute + object-fit:cover, so it crops rather than
   distorts. Below the clamp (every mobile width) nothing changes. */
.yca-yg__stage{position:relative;overflow:hidden;border-radius:4px;background:#0a2a43;aspect-ratio:16/10;max-height:580px;width:100%}
.yca-yg__stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yca-yg__arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
	border:0;background:rgba(8,24,36,.55);color:#fff;font-size:28px;line-height:1;cursor:pointer;
	display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s;opacity:.9;z-index:2}
.yca-yg__arrow:hover{background:rgba(8,24,36,.82);opacity:1}
.yca-yg__arrow--prev{left:14px}
.yca-yg__arrow--next{right:14px}
.yca-yg__counter{position:absolute;top:14px;left:14px;z-index:2;background:rgba(8,24,36,.62);color:#fff;
	font-size:12.5px;letter-spacing:.06em;padding:5px 11px;border-radius:20px}
.yca-yg__stage-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 18px 14px;color:#fff;
	font-size:13px;text-align:left;background:linear-gradient(180deg,transparent,rgba(8,24,36,.72))}
.yca-yg__viewall{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
	background:rgba(255,255,255,.94);border:0;color:#0a2a43;border-radius:2px;
	padding:10px 18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:.2s}
.yca-yg__viewall:hover{background:#fff}
.yca-yg__viewall-ico{width:14px;height:14px;border:2px solid currentColor;border-radius:2px;display:inline-block}
/* Thumbnails: four visible on desktop, horizontal scroll for the rest */
.yca-yg__thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.yca-yg__thumb{flex:0 0 calc((100% - 30px)/4);aspect-ratio:16/10;padding:0;border:0;border-radius:3px;overflow:hidden;
	cursor:pointer;background:#0a2a43;position:relative;opacity:.62;transition:opacity .2s}
.yca-yg__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.yca-yg__thumb:hover{opacity:.85}
.yca-yg__thumb.is-active{opacity:1;box-shadow:inset 0 0 0 3px #b0894b}
/* Single-photo galleries: framed image, no arrows/thumbs/counter */
.yca-yg--single .yca-yg__stage{aspect-ratio:16/9}
.yca-yg__actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-top:14px}
.yca-yg__credit{margin:0;font-size:12.5px;color:#7b858d}
.yca-yg__credit a{color:#0a2a43}
/* visible focus states (a11y) */
.yca-yg__arrow:focus-visible,.yca-yg__thumb:focus-visible,.yca-yg__viewall:focus-visible,.yca-yg-lb button:focus-visible{
	outline:2px solid #b0894b;outline-offset:3px}
/* lightbox */
.yca-yg-lb{position:fixed;inset:0;z-index:1000;background:rgba(6,18,26,.96);display:flex;
	flex-direction:column;align-items:center;justify-content:center}
.yca-yg-lb[hidden]{display:none}
.yca-yg-lb__stage{position:relative;width:min(1100px,92vw);height:74vh;margin:0;display:flex;
	align-items:center;justify-content:center}
.yca-yg-lb__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:2px}
.yca-yg-lb__cap{position:absolute;left:0;right:0;bottom:-2px;transform:translateY(100%);
	color:#dfe6ea;font-size:14px;text-align:center;padding-top:12px}
.yca-yg-lb__meta{margin-top:56px;text-align:center;color:#8ea1ac;font-size:12px;letter-spacing:.14em}
.yca-yg-lb__credit{display:block;margin-top:6px;color:#9fb0bb}
.yca-yg-lb__close{position:absolute;top:20px;right:24px;background:transparent;border:0;color:#fff;
	font-size:32px;line-height:1;cursor:pointer;opacity:.85}
.yca-yg-lb__close:hover{opacity:1}
.yca-yg-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;
	background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:30px;cursor:pointer;opacity:.85}
.yca-yg-lb__nav:hover{opacity:1;background:rgba(255,255,255,.1)}
.yca-yg-lb__prev{left:3vw}.yca-yg-lb__next{right:3vw}
@media(max-width:720px){
	.yca-yg__stage{aspect-ratio:4/3}
	.yca-yg__thumb{flex:0 0 30%}
	.yca-yg__arrow{width:40px;height:40px;font-size:24px}
	.yca-yg__viewall{padding:8px 12px;font-size:11px}
	.yca-yg-lb__stage{height:62vh;width:94vw}
	.yca-yg-lb__nav{width:44px;height:44px;font-size:24px}
}
@media(prefers-reduced-motion:reduce){
	.yca-yg__arrow,.yca-yg__thumb,.yca-yg__viewall,.yca-yg-lb__nav{transition:none}
	.yca-yg__stage-img{transition:none}
}

/* ── Yacht video gallery (0.16.0): main player + selectable thumbnails ── */
.yca-vg{margin:0 0 40px}
.yca-vg__stage{position:relative;border-radius:4px;overflow:hidden;background:#061118;aspect-ratio:16/9}
.yca-vg__players,.yca-vg__player{position:absolute;inset:0;width:100%;height:100%}
.yca-vg__player[hidden]{display:none}
.yca-vg__player iframe{width:100%;height:100%;border:0;display:block}
.yca-vg__play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#061118}
.yca-vg__play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .2s}
.yca-vg__play:hover img{opacity:1}
.yca-vg__play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;
	background:rgba(10,42,67,.82);display:flex;align-items:center;justify-content:center;transition:background .2s}
.yca-vg__play-icon::after{content:"";border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;margin-left:5px}
.yca-vg__play:hover .yca-vg__play-icon{background:rgba(176,137,75,.95)}
.yca-vg__fallback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;text-decoration:underline}
.yca-vg__arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;z-index:3;
	background:rgba(8,24,36,.6);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.9;transition:background .2s,opacity .2s}
.yca-vg__arrow:hover{background:rgba(8,24,36,.85);opacity:1}
.yca-vg__arrow--prev{left:14px}
.yca-vg__arrow--next{right:14px}
.yca-vg__bar{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px}
.yca-vg__title{margin:0;font-size:15px;font-weight:600;color:#0a2a43}
.yca-vg__counter{font-size:12.5px;color:#7b858d;letter-spacing:.04em;white-space:nowrap}
.yca-vg__thumbs{display:flex;gap:10px;margin-top:10px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.yca-vg__thumb{flex:0 0 calc((100% - 30px)/4);aspect-ratio:16/9;position:relative;padding:0;border:0;border-radius:3px;overflow:hidden;cursor:pointer;background:#0a2a43;opacity:.72;transition:opacity .2s}
.yca-vg__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.yca-vg__thumb:hover{opacity:.9}
.yca-vg__thumb.is-active{opacity:1;box-shadow:inset 0 0 0 3px #b0894b}
.yca-vg__thumb-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;
	border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent rgba(255,255,255,.92);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.yca-vg__thumb-title{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 5px;color:#fff;font-size:10.5px;line-height:1.25;
	text-align:left;background:linear-gradient(180deg,transparent,rgba(6,17,26,.8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yca-vg__viewall{margin-top:12px;background:transparent;border:1px solid #0a2a43;color:#0a2a43;border-radius:2px;
	padding:9px 18px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:.2s}
.yca-vg__viewall:hover{background:#0a2a43;color:#fff}
/* Collapsible: hide the 5th+ thumbnail until expanded */
.yca-vg__thumbs--collapsible .yca-vg__thumb--extra{display:none}
.yca-vg__thumbs--collapsible.is-expanded{flex-wrap:wrap;overflow-x:visible}
.yca-vg__thumbs--collapsible.is-expanded .yca-vg__thumb{flex:0 0 calc((100% - 30px)/4)}
.yca-vg__thumbs--collapsible.is-expanded .yca-vg__thumb--extra{display:block}
.yca-vg__play:focus-visible,.yca-vg__arrow:focus-visible,.yca-vg__thumb:focus-visible,.yca-vg__viewall:focus-visible{outline:2px solid #b0894b;outline-offset:3px}
@media(max-width:720px){
	.yca-vg__thumb{flex:0 0 40%}
	.yca-vg__thumbs--collapsible.is-expanded .yca-vg__thumb{flex:0 0 46%}
	.yca-vg__arrow{width:40px;height:40px;font-size:22px}
	.yca-vg__play-icon{width:58px;height:58px}
}
@media(prefers-reduced-motion:reduce){
	.yca-vg__play img,.yca-vg__play-icon,.yca-vg__arrow,.yca-vg__thumb,.yca-vg__viewall{transition:none}
}

/* ── Phase 2 M2.4 (2026-07-29): crew presentation + broker insight ── */
.yca-crew__eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin:0 0 8px}
.yca-crew__title{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;color:#0a2a43;font-size:clamp(24px,3.2vw,34px);margin:0 0 26px}
.yca-crew__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.yca-crew__card{background:#fff;border:1px solid #e3ddd2;border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.yca-crew__card--feature{grid-column:span 3;flex-direction:row}
.yca-crew__photo{position:relative;background:#0a2a43;aspect-ratio:4/3;overflow:hidden;flex:0 0 auto}
.yca-crew__card--feature .yca-crew__photo{width:230px;aspect-ratio:auto}
.yca-crew__photo img{width:100%;height:100%;object-fit:cover;display:block}
.yca-crew__monogram{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	font-family:Georgia,serif;font-size:44px;color:#cdbd9a;background:linear-gradient(150deg,#0a2a43,#133a58)}
.yca-crew__body{padding:20px 22px}
.yca-crew__card--feature .yca-crew__body{display:flex;flex-direction:column;justify-content:center}
.yca-crew__role{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8f6d38;margin-bottom:6px}
.yca-crew__name{font-family:Georgia,'Iowan Old Style',serif;font-size:22px;color:#0a2a43;line-height:1.15}
.yca-crew__meta{margin-top:8px;font-size:14px;color:#4b575f}
/* Broker insight — clearly editorial, valuable, honest (only rendered when authored) */
.yca-broker-insight{margin:30px 0 0;padding:26px 30px;background:#f7f3ec;border:1px solid #e7ddc9;
	border-left:3px solid #b0894b;border-radius:3px}
.yca-broker-insight__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin-bottom:10px}
.yca-broker-insight__body{font-family:Georgia,'Iowan Old Style',serif;font-size:1.14rem;line-height:1.66;color:#22333f}
.yca-broker-insight__body p{margin:0 0 12px}.yca-broker-insight__body p:last-child{margin-bottom:0}
@media(max-width:800px){
	.yca-crew__grid{grid-template-columns:1fr 1fr}
	.yca-crew__card--feature{grid-column:1/-1;flex-direction:column}
	.yca-crew__card--feature .yca-crew__photo{width:100%;aspect-ratio:16/9}
}
@media(max-width:520px){.yca-crew__grid{grid-template-columns:1fr}}

/* ── Phase 2 M2.4 refinement + M2.5 (2026-07-29): crew caveat, overview, excels ── */
.yca-crew__caveat{margin:16px 0 0;font-size:13px;color:#7b858d;font-style:italic}
/* Editorial overview */
.yca-overview__eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin:0 0 12px}
.yca-overview__body{font-size:1.16rem;line-height:1.75;color:#33424c;max-width:760px}
.yca-overview__body p{margin:0 0 18px}
/* Where this yacht excels — triptych */
.yca-excels__eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin:0 0 8px}
.yca-excels__title{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;color:#0a2a43;font-size:clamp(24px,3.2vw,36px);margin:0 0 30px}
.yca-excels__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.yca-excels__grid[data-count="1"]{grid-template-columns:1fr;max-width:620px}
.yca-excels__grid[data-count="2"]{grid-template-columns:repeat(2,1fr)}
.yca-excels__num{font-family:Georgia,serif;font-size:15px;color:#b0894b;letter-spacing:.08em;margin-bottom:12px}
.yca-excels__h{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;font-size:21px;color:#0a2a43;margin:0 0 10px;line-height:1.2}
.yca-excels__p{margin:0;color:#48555e;font-size:15.5px;line-height:1.6}
@media(max-width:800px){.yca-excels__grid,.yca-excels__grid[data-count="2"]{grid-template-columns:1fr;gap:26px}}

/* ── Phase 2 M2.6 (2026-07-29): aboard — specs, amenities, water toys ── */
.yca-aboard__eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin:0 0 8px}
.yca-aboard__title{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;color:#0a2a43;font-size:clamp(22px,2.8vw,30px);margin:0 0 22px}
.yca-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:0}
.yca-spec-grid__row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #ece6da}
.yca-spec-grid__row dt{color:#6d7a83;font-size:14.5px;margin:0}
.yca-spec-grid__row dd{margin:0;color:#22333f;font-weight:600;font-size:14.5px;text-align:right}
.yca-feature-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.yca-feature-chips li{background:#fff;border:1px solid #e3ddd2;border-radius:999px;padding:8px 16px;font-size:14px;color:#33424c}
.yca-aboard__note{margin:18px 0 0;font-size:13px;color:#7b858d;font-style:italic}
.yca-editor-flag{margin:14px 0 0;padding:10px 14px;background:#fff4dd;border:1px solid #ecdfb4;border-radius:4px;font-size:13px;color:#8a6d1f}
@media(max-width:640px){.yca-spec-grid{grid-template-columns:1fr;gap:0}}

/* ── Phase 2 M2.7 (2026-07-29): cruising-ground connection ── */
.yca-grounds__eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin:0 0 8px}
.yca-grounds__title{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;color:#0a2a43;font-size:clamp(22px,2.8vw,30px);margin:0 0 22px}
.yca-grounds__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.yca-grounds__card{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:#fff;border:1px solid #e3ddd2;border-radius:3px;padding:22px 24px;transition:border-color .2s,transform .2s}
.yca-grounds__card:hover{border-color:#b0894b;transform:translateY(-2px)}
.yca-grounds__name{font-family:Georgia,'Iowan Old Style',serif;font-size:20px;color:#0a2a43}
.yca-grounds__desc{font-size:14px;color:#4b575f;line-height:1.55}
.yca-grounds__more{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8f6d38;font-weight:600;margin-top:auto}

/* ── Phase 2 M2.8 (2026-07-29): enquiry experience ── */
.yca-enquire__eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin:0 0 8px}
.yca-enquire__title{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;color:#0a2a43;font-size:clamp(24px,3.2vw,34px);margin:0 0 14px}
.yca-enquire__intro{max-width:680px;color:#3a4a57;font-size:1.05rem;line-height:1.7;margin:0 0 26px}
.yca-enquiry-form__prefill{background:#f7f3ec;border:1px solid #e7ddc9;border-radius:3px;padding:10px 14px;font-size:14px;color:#33424c}
.yca-enquiry-form__prefill a{color:#8f6d38}
.yca-enquiry-form__sla{font-size:13px;color:#6f7a82;margin:10px 0 0}

/* ── Phase 2 assembly v0.6.8 (2026-07-29): sticky anchor nav + scroll offset + PD-028 hint ── */
/* Sticks just BELOW the theme's fixed header (position:fixed, height var --yca-header-h),
   so it's never hidden behind it. The var is already responsive (160px desktop / 112px phone). */
.yca-anchor-nav{position:sticky;top:var(--yca-header-h,160px);z-index:20;background:rgba(250,248,244,.94);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #e3ddd2}
.yca-anchor-nav ul{list-style:none;margin:0 auto;padding:0 20px;display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.yca-anchor-nav a{display:block;white-space:nowrap;padding:15px 14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#51606a;text-decoration:none;border-bottom:2px solid transparent}
.yca-anchor-nav a:hover{color:#8f6d38}
.yca-anchor-nav a.is-active{color:#0a2a43;border-bottom-color:#b0894b}
.yca-anchor-nav a:focus-visible{outline:2px solid #b0894b;outline-offset:-2px}
/* Anchor targets clear BOTH the fixed header and the sticky nav (~50px) when
   jumped-to or keyboard-focused, so a section title is never hidden underneath. */
.yca-anchor,#yca-enquire{scroll-margin-top:calc(var(--yca-header-h,160px) + 58px)}
/* PD-028 planning-variable note + enquiry hint */
.yca-detail-note{margin:16px 0 0;font-size:14px;color:#4b575f;line-height:1.6;background:#f7f3ec;border-left:3px solid #b0894b;padding:12px 16px;border-radius:3px}
.yca-enquiry-form__hint{margin:6px 0 0;font-size:13px;color:#6f7a82;line-height:1.55}
@media(max-width:640px){.yca-anchor-nav a{padding:13px 11px}}

/* ============================================================
   Yacht Discovery — homepage collections (PD-259/260/261)
   ============================================================ */
.yca-discovery { background: var(--yca-bg, #f7f8f9); }
.yca-collection { padding: 30px 0 10px; }
.yca-collection__head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:16px; }
.yca-collection__eyebrow { color: var(--yca-gold, #b8860b); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin:0 0 4px; }
.yca-collection__title { font-family: Georgia,"Times New Roman",serif; font-weight:600; font-size:1.55rem; margin:0; color: var(--yca-navy, #12293d); }
.yca-collection__all { color: var(--yca-navy, #12293d); font-size:.85rem; text-decoration:none; white-space:nowrap; border-bottom:1px solid var(--yca-gold, #b8860b); }
/* Row: fixed-width cards, horizontal scroll when many, LEFT-aligned whitespace
   when few — cards never stretch to fill (PD-261 sparse rule). */
.yca-collection__row { display:flex; gap:18px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.yca-collection__row > .yca-yacht-card { flex:0 0 clamp(240px, 24%, 300px); scroll-snap-align:start; }
.yca-collection__row.is-sparse { overflow-x:visible; } /* 2–3 cards: no scroll, keep whitespace */

/* Restrained card badges: YCA Recommended + at most one Pick. */
.yca-yacht-card__badges { position:absolute; top:10px; left:10px; z-index:2; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.yca-yacht-card__badges .yca-badge { position:static; top:auto; left:auto; right:auto; }
.yca-badge--rec { background:linear-gradient(135deg,#b8860b,#d4af37); color:#fff; font-weight:600; letter-spacing:.03em; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.yca-badge--pick { background:rgba(18,41,61,.86); color:#fff; }

/* Accessibility: visible keyboard focus on the whole card (no hover reliance). */
.yca-yacht-card:focus-visible { outline:3px solid var(--yca-gold, #b8860b); outline-offset:3px; }

@media (max-width:600px){
  .yca-collection__title { font-size:1.3rem; }
  .yca-collection__row > .yca-yacht-card { flex:0 0 82%; }
  .yca-collection__row.is-sparse { overflow-x:auto; }
}

/* =====================================================================
   PD-262 — Homepage Crewed-first journey (Release 0.10.0)
   Built on the existing design tokens (--yca-navy / --yca-sand / --yca-cream
   / --yca-border / --yca-radius / --yca-font-display). No new colour system,
   no external fonts.
   ===================================================================== */

.yca-hero__eyebrow{
	font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
	font-weight:600; color:var(--yca-sand); margin:0 0 .75rem;
}

/* Charter hierarchy — Full/Half Board within the primary Crewed card */
.yca-charter-type-card__tag{
	display:inline-block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
	font-weight:600; color:var(--yca-navy); background:var(--yca-sand);
	padding:.3rem .7rem; border-radius:var(--yca-radius); margin:0 0 .75rem;
}
.yca-board{ display:flex; flex-wrap:wrap; gap:1rem; margin:1.25rem 0; }
.yca-board__card{
	flex:1 1 220px; background:var(--yca-cream); border:1px solid var(--yca-border);
	border-radius:var(--yca-radius); padding:1.1rem 1.2rem;
}
.yca-board__card--principal{ border-color:var(--yca-sand); background:rgba(217,178,106,.10); }
.yca-board__card h4{ font-family:var(--yca-font-display); font-size:1.05rem; margin:0 0 .4rem; color:var(--yca-navy); }
.yca-board__tag{
	display:inline-block; font-family:var(--yca-font-body); font-size:.6rem; letter-spacing:.12em;
	text-transform:uppercase; font-weight:600; color:var(--yca-navy); background:var(--yca-sand);
	padding:.15rem .5rem; border-radius:4px; vertical-align:middle; margin-left:.4rem;
}
.yca-board__card p{ font-size:.9rem; margin:0; color:var(--yca-ink-muted); }
.yca-charter-type-card__note{
	font-size:.82rem; color:var(--yca-ink-muted); font-style:italic;
	border-top:1px solid var(--yca-border); padding-top:.8rem; margin-top:.4rem;
}

/* Find Matching Yachts */
.yca-finder{ background:var(--yca-navy); }
.yca-finder .yca-section__heading,
.yca-finder .yca-section__intro{ color:var(--yca-white); }
.yca-finder__form{
	display:flex; flex-wrap:wrap; gap:1rem; align-items:end;
	background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
	border-radius:var(--yca-radius-lg); padding:1.1rem; margin-top:1.5rem;
}
.yca-finder__field{ display:flex; flex-direction:column; gap:.4rem; flex:1 1 200px; }
.yca-finder__field label{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--yca-sand); }
.yca-finder__field select,
.yca-finder__field input{
	font:inherit; padding:.7rem .8rem; border-radius:var(--yca-radius);
	border:1px solid var(--yca-border); background:var(--yca-white); color:var(--yca-ink); min-height:44px;
}
.yca-finder__form .yca-btn{ flex:0 0 auto; min-height:44px; }
.yca-finder__hint{ font-size:.82rem; color:rgba(255,255,255,.7); margin:1rem 0 0; }

/* Yacht-type hierarchy — Sailing Catamarans lead */
.yca-yacht-types__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:1.5rem; }
.yca-yacht-type-card{
	position:relative; display:flex; align-items:flex-end; min-height:200px;
	padding:1.4rem; border-radius:var(--yca-radius-lg); overflow:hidden;
	color:var(--yca-white); background:var(--yca-placeholder-gradient);
	text-decoration:none; box-shadow:var(--yca-shadow); transition:transform .3s ease, box-shadow .3s ease;
}
.yca-yacht-type-card::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(var(--yca-navy-rgb),.05) 40%, rgba(var(--yca-navy-rgb),.72) 100%);
}
.yca-yacht-type-card:hover{ transform:translateY(-4px); box-shadow:var(--yca-shadow-hover); }
.yca-yacht-type-card--feature{ grid-column:span 2; min-height:260px; }
.yca-yacht-type-card__flag{
	position:absolute; top:1rem; left:1rem; z-index:2; font-size:.62rem; letter-spacing:.14em;
	text-transform:uppercase; font-weight:600; color:var(--yca-navy); background:var(--yca-sand);
	padding:.3rem .7rem; border-radius:var(--yca-radius);
}
.yca-yacht-type-card__body{ position:relative; z-index:1; }
.yca-yacht-type-card__name{ display:block; font-family:var(--yca-font-display); font-size:1.5rem; margin-bottom:.2rem; }
.yca-yacht-type-card--feature .yca-yacht-type-card__name{ font-size:2rem; }
.yca-yacht-type-card__blurb{ display:block; font-size:.85rem; color:rgba(255,255,255,.85); }

/* Compact YCA badge (collection heading stays "YCA Recommended") */
.yca-badge--rec{ display:inline-flex; align-items:center; gap:.35rem; }
.yca-badge__tick{
	display:inline-flex; align-items:center; justify-content:center; width:1.05em; height:1.05em;
	border-radius:50%; background:var(--yca-sand); color:var(--yca-navy); font-size:.72em; font-weight:700; line-height:1;
}

/* Accessibility — focus + reduced motion */
.yca-yacht-type-card:focus-visible,
.yca-finder__field select:focus-visible,
.yca-finder__field input:focus-visible{ outline:3px solid var(--yca-sand); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
	.yca-yacht-type-card{ transition:none; }
	.yca-yacht-type-card:hover{ transform:none; }
}

/* Responsive */
@media (max-width:900px){
	.yca-yacht-types__grid{ grid-template-columns:1fr 1fr; }
	.yca-yacht-type-card--feature{ grid-column:span 2; }
}
@media (max-width:600px){
	.yca-yacht-types__grid{ grid-template-columns:1fr; }
	.yca-yacht-type-card--feature{ grid-column:span 1; }
	.yca-finder__form{ flex-direction:column; align-items:stretch; }
	.yca-finder__form .yca-btn{ width:100%; }
}

/* PD-262 revisions (CPO review 2026-07-31) */
.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}
.yca-charter-type-card__link{margin-top:.9rem;margin-bottom:0}
.yca-charter-type-card__link a{font-weight:600;font-size:.85rem;color:var(--yca-navy);border-bottom:2px solid var(--yca-sand);padding-bottom:2px}
.yca-charter-type-card__link a:hover{color:var(--yca-sand-dark)}
.yca-collection__intro{color:var(--yca-ink-muted);font-size:.95rem;max-width:640px;margin-top:.4rem}
.yca-badge--rec[title]{cursor:help}

/* ── Elevated crew module (PD-289) — the signature yacht-page section ─────── */
.yca-crewx__eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin:0 0 8px}
.yca-crewx__title{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;color:#0a2a43;font-size:clamp(26px,3.4vw,38px);margin:0 0 10px}
.yca-crewx__lead{max-width:680px;color:#4b575f;font-size:1.04rem;line-height:1.6;margin:0 0 30px}
.yca-crewx__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.yca-crewx__card{background:#fff;border:1px solid #e3ddd2;border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.yca-crewx__card--lead{grid-column:1/-1;flex-direction:row}
.yca-crewx__photo{position:relative;background:var(--yca-placeholder-gradient);aspect-ratio:3/4;overflow:hidden;flex:0 0 auto}
.yca-crewx__card--lead .yca-crewx__photo{width:300px;aspect-ratio:auto}
.yca-crewx__photo img{width:100%;height:100%;object-fit:cover;display:block}
.yca-crewx__monogram{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);width:88px;height:88px;border-radius:50%;border:2px solid rgba(217,178,106,.55);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(255,255,255,.04)}
.yca-crewx__monogram-i{font-family:Georgia,serif;font-size:38px;color:rgba(255,255,255,.82);line-height:1}
.yca-crewx__meta{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:12px 26px}
.yca-crewx__meta>div{min-width:90px}
.yca-crewx__meta dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9aa2a9;font-weight:700;margin:0 0 2px}
.yca-crewx__meta dd{margin:0;font-size:14px;color:#33424c}
.yca-crewx__flag{position:absolute;left:14px;top:14px;background:#d9b26a;color:#12283f;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.yca-crewx__body{padding:22px 24px;display:flex;flex-direction:column}
.yca-crewx__card--lead .yca-crewx__body{justify-content:center}
.yca-crewx__role{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8f6d38;margin:0 0 6px;font-weight:700}
.yca-crewx__name{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;font-size:clamp(20px,2.4vw,26px);color:#0a2a43;line-height:1.12;margin:0}
.yca-crewx__tags-label{margin:14px 0 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9aa2a9;font-weight:700}
.yca-crewx__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.yca-crewx__photo-role{position:absolute;left:0;right:0;bottom:0;text-align:center;padding:8px 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:600}
.yca-crewx__tags li{border:1px solid #d9b26a;color:#8f6d38;background:#faf7f1;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:600;letter-spacing:.02em}
.yca-crewx__facts{margin:12px 0 0;font-size:14px;color:#4b575f;line-height:1.5}
.yca-crewx__dot{margin:0 8px;color:#c4b48f}
.yca-crewx__license{margin:8px 0 0;font-size:12.5px;color:#7b858d}
.yca-crewx__bio{position:relative;margin:14px 0 0;font-family:Georgia,'Iowan Old Style',serif;font-size:1rem;line-height:1.62;color:#33424c}
.yca-crewx__bio p{margin:0}
.yca-crewx__bio--clamped{max-height:108px;overflow:hidden}
.yca-crewx__bio--clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.yca-crewx__bio.is-open{max-height:none}
.yca-crewx__bio.is-open::after{display:none}
.yca-crewx__more{margin:8px 0 0;align-self:flex-start;background:none;border:0;padding:0;color:#8f6d38;font-weight:700;font-size:13px;letter-spacing:.02em;cursor:pointer}
.yca-crewx__more:hover{text-decoration:underline}
.yca-crewx__caveat{margin:18px 0 0;font-size:13px;color:#7b858d;font-style:italic}
.yca-crewx__insight{margin:28px 0 0;padding:28px 32px;background:#12283f;border-radius:10px}
.yca-crewx__insight-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#d9b26a;font-weight:700;margin-bottom:10px}
.yca-crewx__insight-body{font-family:Georgia,'Iowan Old Style',serif;font-size:1.14rem;line-height:1.66;color:rgba(255,255,255,.92)}
.yca-crewx__insight-body p{margin:0 0 12px}
.yca-crewx__insight-body p:last-child{margin-bottom:0}
.yca-crewx__insight-by{margin:14px 0 0;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.6);font-style:italic}
@media(max-width:900px){
	.yca-crewx__grid{grid-template-columns:1fr 1fr}
	.yca-crewx__card--lead{flex-direction:column}
	.yca-crewx__card--lead .yca-crewx__photo{width:100%;aspect-ratio:16/9}
}
@media(max-width:560px){.yca-crewx__grid{grid-template-columns:1fr}}

/* Water toys grouped by experience (PD-289) */
.yca-aboard__sub{margin:-10px 0 18px;color:#4b575f;font-size:.98rem;max-width:640px}
.yca-watergroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px 28px}
.yca-watergroup__label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid #eadfc7}

/* ── Charter rates module (PD-290) ───────────────────────────────────────── */
.yca-rates__eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin:0 0 8px}
.yca-rates__title{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;color:#0a2a43;font-size:clamp(24px,3.2vw,34px);margin:0 0 12px}
.yca-rates__lead{max-width:680px;color:#4b575f;font-size:1.04rem;line-height:1.6;margin:0 0 24px}
.yca-rates__table{width:100%;max-width:640px;border-collapse:collapse;margin:0 0 12px}
.yca-rates__table th,.yca-rates__table td{text-align:left;padding:14px 16px;border-bottom:1px solid #e7ddc9}
.yca-rates__table thead th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9aa2a9;font-weight:700;border-bottom:2px solid #eadfc7}
.yca-rates__table .yca-rates__num{text-align:right;font-variant-numeric:tabular-nums}
.yca-rates__season{display:block;font-family:Georgia,serif;font-size:1.06rem;color:#0a2a43}
.yca-rates__period{display:block;font-size:12.5px;color:#7b858d;margin-top:2px}
.yca-rates__table td.yca-rates__num{font-size:1.12rem;color:#0a2a43;font-weight:600}
.yca-rates__onrequest{color:#8f6d38;font-weight:600;font-size:1rem}
.yca-rates__gatenote{max-width:640px;font-size:13px;color:#7b858d;font-style:italic;margin:0 0 8px}
.yca-rates__subh{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;color:#0a2a43;font-size:1.2rem;margin:26px 0 8px}
.yca-rates__scalenote,.yca-rates__scale p{max-width:640px;color:#4b575f;font-size:.96rem;line-height:1.55;margin:0 0 12px}
.yca-rates__scaletable{border-collapse:collapse;min-width:280px}
.yca-rates__scaletable td{padding:8px 18px 8px 0;border-bottom:1px solid #eee4d3;font-size:14px;color:#33424c}
.yca-rates__incl{margin-top:26px;background:#f7f3ec;border:1px solid #e7ddc9;border-radius:8px;padding:22px 26px;max-width:760px}
.yca-rates__incl-body{color:#33424c;font-size:1rem;line-height:1.6}
.yca-rates__incl-link{margin:12px 0 0}
.yca-rates__incl-link a{color:#8f6d38;font-weight:700;font-size:14px}
.yca-rates__cta{margin:26px 0 0}

/* ── Layout & cabins module (PD-290) ─────────────────────────────────────── */
.yca-layout__eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f6d38;font-weight:700;margin:0 0 8px}
.yca-layout__title{font-family:Georgia,'Iowan Old Style',serif;font-weight:500;color:#0a2a43;font-size:clamp(24px,3.2vw,34px);margin:0 0 22px}
.yca-layout__cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.yca-layout__cols--single{grid-template-columns:1fr;max-width:620px}
.yca-rates__apa{margin-top:14px;padding:14px 18px;background:#fff;border:1px solid #e7ddc9;border-left:3px solid #d9b26a;border-radius:6px}
.yca-rates__apa p{margin:0;font-size:.96rem;color:#33424c;line-height:1.55}
.yca-rates__apa a{color:#8f6d38;font-weight:700}
.yca-layout__summary{list-style:none;margin:0 0 22px;padding:0;display:flex;gap:30px}
.yca-layout__summary li{font-size:14px;color:#4b575f}
.yca-layout__n{display:block;font-family:Georgia,serif;font-size:34px;color:#0a2a43;line-height:1.1}
.yca-layout__cfglabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9aa2a9;font-weight:700;margin:0 0 10px}
.yca-layout__cfg{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.yca-layout__cfg li{font-size:1rem;color:#33424c;padding-left:2px}
.yca-layout__cfg-n{display:inline-block;min-width:34px;font-family:Georgia,serif;color:#8f6d38;font-size:1.05rem}
.yca-layout__note{font-size:13px;color:#7b858d;font-style:italic;margin:6px 0 0;max-width:420px}
.yca-layout__plan{margin:0}
.yca-layout__planbtn{display:block;width:100%;padding:0;border:1px solid #e3ddd2;border-radius:8px;overflow:hidden;background:var(--yca-placeholder-gradient);cursor:zoom-in;position:relative}
.yca-layout__planbtn img{display:block;width:100%;height:auto}
.yca-layout__zoom{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:rgba(18,40,63,.82);color:#fff;font-size:20px;line-height:34px;text-align:center}
.yca-layout__cap{font-size:12.5px;color:#7b858d;margin-top:8px;text-align:center}
@media(max-width:760px){.yca-layout__cols{grid-template-columns:1fr;gap:24px}.yca-layout__summary{gap:22px}}

/* Interactive deck-plan viewer overlay */
.yca-planview{position:fixed;inset:0;z-index:1000;background:rgba(10,26,43,.94);display:none}
.yca-planview.is-open{display:block}
.yca-planview__bar{position:absolute;top:0;right:0;display:flex;gap:8px;padding:14px;z-index:2}
.yca-planview__bar button{width:44px;height:44px;border-radius:8px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer}
.yca-planview__bar button:hover{background:rgba(255,255,255,.18)}
.yca-planview__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:grab}
.yca-planview__stage:active{cursor:grabbing}
.yca-planview__stage img{max-width:92%;max-height:88%;transform-origin:center;will-change:transform;user-select:none;-webkit-user-drag:none}

/* ── Yacht-card decision signals (PD-294): scuba + walkthrough video ──────── */
.yca-yacht-card__signals{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;gap:6px}
.yca-yacht-card__signal{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(18,40,63,.82);color:#fff;backdrop-filter:blur(2px)}
.yca-yacht-card__signal .yca-icon{width:17px;height:17px}
.yca-yacht-card__signal--video{background:rgba(217,178,106,.95);color:#12283f}

/* ── Rates on request — deliberate gated/absent state (PD-294) ────────────── */
.yca-rates__onrequest-card{max-width:640px;background:#f7f3ec;border:1px solid #e7ddc9;border-left:3px solid #d9b26a;border-radius:8px;padding:20px 24px;margin:4px 0 6px}
.yca-rates__onrequest-title{font-family:Georgia,'Iowan Old Style',serif;font-size:1.2rem;color:#0a2a43;margin:0 0 6px}
.yca-rates__onrequest-body{margin:0;color:#4b575f;font-size:1rem;line-height:1.6}

/* ── Charter-model chip on cards + meal-plan line (PD-296) ─────────────────── */
.yca-yacht-card__type{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#0a2a43;background:#f0e9db;border:1px solid #e2d6bd;border-radius:4px;padding:2px 8px;margin-bottom:8px}
.yca-rates__mealplan{margin:0 0 12px;color:#3b464e;font-size:1rem}
.yca-rates__mealplan-k{display:inline-block;min-width:96px;color:#7b6634;font-weight:600;letter-spacing:.02em}
.yca-rates__mealplan-v{color:#12283f;font-weight:600}

/* ── Yacht-level crew narrative (CYA crewGeneral) (PD-297) ─────────────────── */
.yca-crewx__story{max-width:760px;margin:0 0 26px;color:#3b464e;font-size:1.06rem;line-height:1.75}
.yca-crewx__story p{margin:0 0 14px}
.yca-crewx__story p:last-child{margin-bottom:0}

/* ── Additional feed videos strip (PD-299 M3) ─────────────────────────────── */
.yca-detail-video__more{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.yca-detail-video__more .yca-detail-video__facade{width:calc(33.333% - 8px);min-width:150px;max-width:240px;margin:0}
@media (max-width:640px){.yca-detail-video__more .yca-detail-video__facade{width:calc(50% - 6px)}}

/* ── Enquiry form: optional details block (PD-299 Batch 4) ─────────────────── */
/* Optional details — integrated as a clear subsection with a divider, not a dropped-in card (E1, 2026-08-03). */
.yca-enquiry-form__optional { border: 0; border-top: 1px solid var(--yca-border); border-radius: 0; padding: 26px 0 0; margin: 28px 0 24px; background: none; }
.yca-enquiry-form__optional legend { float: left; width: 100%; padding: 0; margin: 0 0 18px; font-family: var(--yca-font-display); font-weight: 600; font-size: 1.15rem; color: var(--yca-navy); }
.yca-enquiry-form__optional legend span { display: block; margin-top: 4px; font-family: var(--yca-font-body); font-weight: 400; color: var(--yca-ink-muted); font-size: 0.88rem; }
.yca-enquiry-form__grouplabel { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; }
/* Even, responsive checkbox grid with proper touch targets. */
.yca-enquiry-form__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.yca-enquiry-form__check { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 14px; border: 1px solid var(--yca-border); border-radius: var(--yca-radius); background: var(--yca-white); font-weight: 400; font-size: 0.95rem; line-height: 1.3; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.yca-enquiry-form__check:hover { border-color: var(--yca-sand-dark); }
.yca-enquiry-form__check:focus-within { border-color: var(--yca-navy); box-shadow: 0 0 0 3px rgba(var(--yca-navy-rgb), 0.12); }
.yca-enquiry-form__check input { width: auto; margin: 0; flex: 0 0 auto; }
.yca-enquiry-form__check:has(input:checked) { border-color: var(--yca-sand-dark); background: var(--yca-cream); }

/* ── Rates broker-confirmation caveat (Batch 5) ───────────────────────────── */
.yca-rates__confirm{margin:16px 0 2px;font-size:.9rem;color:#6b7580;line-height:1.6}


/* ==========================================================================
   Destinations landing — planning-led journey (page-destinations.php, C3/C5)
   ========================================================================== */
.yca-dest-orient__grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 900px; margin: 0 auto; }
.yca-dest-orient__item { padding: 20px 22px; background: var(--yca-white); border: 1px solid var(--yca-border); border-radius: var(--yca-radius-lg); }
.yca-dest-orient__term { margin: 0 0 6px; font-family: Georgia, "Iowan Old Style", serif; font-size: 1.1rem; line-height: 1.3; color: var(--yca-navy); }
.yca-dest-orient__desc { margin: 0; color: var(--yca-ink-muted); font-size: 0.95rem; line-height: 1.6; }
.yca-dest-orient__note { max-width: 760px; margin: 28px auto 0; text-align: center; color: var(--yca-ink); font-size: 1rem; line-height: 1.65; }
.yca-dest-tier + .yca-dest-tier { margin-top: 44px; }
.yca-dest-tier__heading { margin: 0 0 6px; font-family: Georgia, "Iowan Old Style", serif; font-size: 1.3rem; color: var(--yca-navy); text-align: center; }
.yca-dest-tier__intro { max-width: 620px; margin: 0 auto 24px; text-align: center; color: var(--yca-ink-muted); font-size: 0.97rem; line-height: 1.6; }
.yca-dest-expertise__body { max-width: 680px; margin: 0 auto; text-align: center; color: var(--yca-ink); font-size: 1.05rem; line-height: 1.7; }
.yca-dest-actions { text-align: center; margin-top: 8px; }
@media (min-width: 720px) {
	.yca-dest-orient__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ==========================================================================
   Experiences landing — planning-led journey (page-experiences.php, C4/C5)
   ========================================================================== */
.yca-exp-factors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.yca-exp-factor { background: var(--yca-cream); border: 1px solid var(--yca-border); border-radius: var(--yca-radius-lg); padding: 20px 22px; }
.yca-exp-factor__title { font-family: var(--yca-font-display); font-size: 1.15rem; margin: 0 0 6px; }
.yca-exp-factor__text { margin: 0; color: var(--yca-ink-muted); font-size: 0.96rem; line-height: 1.6; }
.yca-exp-group { margin-bottom: 48px; }
.yca-exp-group:last-child { margin-bottom: 0; }
.yca-exp-group__heading { font-size: 1.5rem; text-align: left; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid var(--yca-sand-dark); }
.yca-exp-group__line { margin: 0 0 22px; color: var(--yca-ink-muted); font-size: 0.98rem; line-height: 1.6; max-width: 680px; }
.yca-exp-clarifier__inner { text-align: center; }
.yca-exp-clarifier__text { max-width: 640px; margin: -12px auto 0; color: var(--yca-ink-muted); font-size: 1.02rem; line-height: 1.6; }
.yca-exp-crew { background: var(--yca-navy); }
.yca-exp-crew__inner { text-align: center; }
.yca-exp-crew .yca-section__heading { color: var(--yca-white); }
.yca-exp-crew__text { max-width: 720px; margin: -12px auto 0; color: var(--yca-cream); font-size: 1.04rem; line-height: 1.7; }
@media (min-width: 720px) {
	.yca-exp-factors { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.yca-exp-group__heading { font-size: 1.7rem; }
}

/* ==========================================================================
   Yacht archive — planning journey layer (archive-yacht.php, C9)
   ========================================================================== */
.yca-choose__grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
.yca-choose__item { background: var(--yca-white); border: 1px solid var(--yca-border); border-radius: var(--yca-radius-lg); padding: 22px 22px 4px; box-shadow: var(--yca-shadow); }
.yca-choose__title { font-family: var(--yca-font-display); font-size: 1.15rem; color: var(--yca-navy); margin: 0 0 8px; }
.yca-choose__item p { color: var(--yca-ink-muted); margin: 0 0 16px; }
.yca-choose__item strong { color: var(--yca-ink); }
.yca-broker-value { list-style: none; margin: 26px 0 24px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; text-align: left; }
.yca-broker-value__item { padding-top: 16px; border-top: 2px solid var(--yca-sand-dark); }
.yca-broker-value__title { display: block; font-family: var(--yca-font-display); font-size: 1.05rem; color: var(--yca-navy); margin-bottom: 6px; }
.yca-broker-value__text { display: block; color: var(--yca-ink-muted); font-size: 0.95rem; }
.yca-pathways__links { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 28px 0 8px; }
.yca-pathway-card { display: flex; flex-direction: column; background: var(--yca-white); border: 1px solid var(--yca-border); border-radius: var(--yca-radius-lg); padding: 24px; text-decoration: none; box-shadow: var(--yca-shadow); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.yca-pathway-card:hover, .yca-pathway-card:focus-visible { box-shadow: var(--yca-shadow-hover); transform: translateY(-2px); }
.yca-pathway-card__title { font-family: var(--yca-font-display); font-size: 1.2rem; color: var(--yca-navy); margin-bottom: 8px; }
.yca-pathway-card__text { color: var(--yca-ink-muted); font-size: 0.95rem; flex: 1 1 auto; margin-bottom: 14px; }
.yca-pathway-card__more { font-weight: 600; color: var(--yca-sand-dark); font-size: 0.9rem; }
.yca-pathways .yca-guide-grid { margin-top: 32px; }
@media (min-width: 720px) {
	.yca-choose__grid { grid-template-columns: repeat(3, 1fr); }
	.yca-broker-value { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.yca-pathways__links { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Homepage: "Real Trips, Real Charters" editorial mosaic (front-page.php, D1/D3/D4)
   ========================================================================== */
.yca-photo-mosaic__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; grid-auto-flow: dense; gap: 8px; }
.yca-photo-mosaic__tile { position: relative; margin: 0; overflow: hidden; border-radius: var(--yca-radius); background: var(--yca-placeholder-gradient); background-size: cover; cursor: zoom-in; grid-column: span 1; grid-row: span 1; }
.yca-photo-mosaic__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.yca-photo-mosaic__tile:hover img, .yca-photo-mosaic__tile:focus-visible img { transform: scale(1.04); }
.yca-photo-mosaic__tile:focus-visible { outline: 3px solid var(--yca-sand-dark); outline-offset: 2px; }
.yca-photo-mosaic__tile--lg { grid-column: span 2; grid-row: span 2; }
.yca-photo-mosaic__tile--wide { grid-column: span 2; }
.yca-photo-mosaic__tile--tall { grid-row: span 2; }
.yca-photo-mosaic__tile--extra { display: none; }
.yca-photo-mosaic__grid.is-expanded .yca-photo-mosaic__tile--extra { display: block; }
.yca-photo-mosaic__more { display: block; margin: 20px auto 0; padding: 12px 28px; font: inherit; font-weight: 600; color: var(--yca-navy); background: var(--yca-white); border: 1px solid var(--yca-border); border-radius: 999px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.yca-photo-mosaic__more:hover { background: var(--yca-cream); border-color: var(--yca-sand-dark); }
.yca-photo-mosaic__more:focus-visible { outline: 3px solid var(--yca-sand-dark); outline-offset: 2px; }

/* Homepage: "Watch the Fleet" cinematic video module (front-page.php, D2/D3/D4) */
.yca-fleet__layout { display: grid; gap: 22px; }
.yca-fleet__featured { margin: 0; }
.yca-fleet-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--yca-radius-lg); background: var(--yca-navy); box-shadow: var(--yca-shadow); }
.yca-fleet-video__play { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; cursor: pointer; }
.yca-fleet-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.yca-fleet-video__frame { width: 100%; height: 100%; border: none; display: block; }
.yca-fleet-video__play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(var(--yca-navy-rgb), 0.75); pointer-events: none; transition: background 0.2s ease; }
.yca-fleet-video__play-icon::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--yca-white); }
.yca-fleet-video--support .yca-fleet-video__play-icon { width: 48px; height: 48px; }
.yca-fleet-video--support .yca-fleet-video__play-icon::after { border-width: 9px 0 9px 15px; }
.yca-fleet-video__play:hover .yca-fleet-video__play-icon, .yca-fleet-video__play:focus-visible .yca-fleet-video__play-icon { background: rgba(var(--yca-navy-rgb), 0.95); }
.yca-fleet-video__play:focus-visible { outline: 3px solid var(--yca-sand); outline-offset: 3px; }
.yca-fleet-video__meta { padding-top: 12px; }
.yca-fleet-video__title { font-family: var(--yca-font-display); color: var(--yca-navy); margin: 0; font-size: 1.05rem; line-height: 1.3; }
.yca-fleet__featured .yca-fleet-video__title { font-size: 1.35rem; }
.yca-fleet-video__sub { margin: 4px 0 0; color: var(--yca-ink-muted); font-size: 0.9rem; }
.yca-fleet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.yca-fleet__list-item { margin: 0; }
.yca-fleet-video__fallback { display: inline-block; padding: 12px 20px; color: var(--yca-navy); font-weight: 600; text-decoration: underline; }
@media (min-width: 768px) {
	.yca-photo-mosaic__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
	.yca-photo-mosaic__tile--extra { display: block; }
	.yca-photo-mosaic__more { display: none; }
	.yca-fleet__layout { grid-template-columns: 2fr 1fr; gap: 26px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
	.yca-photo-mosaic__tile img { transition: none; }
	.yca-photo-mosaic__tile:hover img, .yca-photo-mosaic__tile:focus-visible img { transform: none; }
}

/* B11/B12 — crew bio: rendered HTML (not esc_html) needs paragraph spacing. */
.yca-crewx__bio p + p { margin-top: 0.7em; }
.yca-crewx__bio strong, .yca-crewx__bio b { font-weight: 600; }
.yca-crewx__bio ul, .yca-crewx__bio ol { margin: 0.5em 0 0; padding-left: 20px; }

/* Rates — charter-basis label, conditions, turnaround (B2/B5/B9). */
.yca-rates__basis { margin: 0 0 18px; font-size: 0.95rem; }
.yca-rates__basis-k { display: inline-block; font-weight: 600; color: var(--yca-navy); margin-right: 6px; }
.yca-rates__basis-v { color: var(--yca-ink); }
.yca-rates__conditions { margin: 22px 0 0; }
.yca-rates__conditions ul { margin: 8px 0 0; padding-left: 20px; }
.yca-rates__conditions li { margin: 0 0 6px; color: var(--yca-ink-muted); line-height: 1.55; }
.yca-rates__turnaround { margin: 18px 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--yca-ink-muted); }

/* ==========================================================================
   Destinations landing — geographic regions + featured BVI lead (0.14.1)
   ========================================================================== */
.yca-dest-region { margin-bottom: 48px; }
.yca-dest-region:last-child { margin-bottom: 0; }
.yca-dest-region__heading { font-size: 1.5rem; text-align: left; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--yca-sand-dark); }
.yca-dest-featured { display: block; position: relative; min-height: 300px; margin-bottom: 14px; border-radius: var(--yca-radius-lg); overflow: hidden; background-color: var(--yca-navy); background-size: cover; background-position: center; background-repeat: no-repeat; text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.yca-dest-featured:hover, .yca-dest-featured:focus-visible { box-shadow: var(--yca-shadow); transform: translateY(-2px); }
.yca-dest-featured__inner { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; }
.yca-dest-featured__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 600; color: var(--yca-cream); }
.yca-dest-featured__name { font-family: var(--yca-font-display); font-size: 1.7rem; line-height: 1.2; margin: 0; color: var(--yca-white); }
.yca-dest-featured__cue { margin: 0; max-width: 54ch; color: var(--yca-cream); font-size: 0.98rem; line-height: 1.6; }
.yca-dest-featured__more { font-weight: 600; font-size: 0.95rem; color: var(--yca-white); }
@media (min-width: 720px) {
	.yca-dest-region__heading { font-size: 1.7rem; }
	.yca-dest-featured { min-height: 380px; }
	.yca-dest-featured__inner { padding: 32px 30px; max-width: 640px; }
	.yca-dest-featured__name { font-size: 2.1rem; }
}

/* Experiences landing — compact six-variable planning block (0.14.1). */
.yca-exp-factors--compact { gap: 12px; }
.yca-exp-factors--compact .yca-exp-factor { padding: 14px 16px; }
.yca-exp-factors--compact .yca-exp-factor__title { font-size: 1.02rem; margin: 0 0 4px; }
.yca-exp-factors--compact .yca-exp-factor__text { font-size: 0.9rem; line-height: 1.5; }
@media (min-width: 720px) {
	.yca-exp-factors--compact { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ==========================================================================
   Sitewide capitalization standard (0.14.3) — by component type.
   CPO decision: labels use Title Case as authored ("Start Planning", "Call a
   Broker", "Talk to a Broker"). Do NOT mechanically uppercase button CTAs. The
   previous blanket text-transform:uppercase (0.14.1) is removed; each label's
   own casing stands, and ordinary links/body text are untouched.
   ========================================================================== */

/* 0.14.1 mosaic fix: the mosaic reuses .yca-photo-gallery__tile for the lightbox
   hook, which carries aspect-ratio:1/1 (from the old carousel). That forced each
   tile square and fought the mosaic's grid-row sizing, breaking the layout. Let
   the grid cell control height instead. */
.yca-photo-mosaic__tile { aspect-ratio: auto; height: 100%; }

/* Enquiry message-field intro copy (E-form copy fix, 2026-08-03). */
.yca-enquiry-form__hint { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.55; color: var(--yca-ink-muted); }
.yca-enquiry-form__hint + .yca-enquiry-form__hint { margin-top: -4px; }

/* PD-305 — full seasonal × guest-count rate matrix (yacht-rates.php). */
.yca-rates__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 6px; }
.yca-rates__table--pax { min-width: 520px; }
.yca-rates__table--pax th[scope="col"] { white-space: nowrap; }
.yca-rates__holiday { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--yca-sand-dark); color: #fff; font-size: 0.68rem; letter-spacing: 0.03em; vertical-align: middle; }
.yca-rates__row--holiday { background: rgba(217, 178, 106, 0.08); }
.yca-rates__na { color: var(--yca-ink-muted); }
.yca-rates__detail-row td { padding-top: 4px; padding-bottom: 12px; font-size: 0.85rem; line-height: 1.5; color: var(--yca-ink-muted); border-top: 0; }
.yca-rates__perweek { margin: 4px 0 0; font-size: 0.85rem; color: var(--yca-ink-muted); }

/* =====================================================================
   Why Charter With Us — redesign (D10/D11/D12, 2026-08-04)
   Alternating image+copy, stronger hierarchy, featured testimonial carousel.
   ===================================================================== */

/* Alternating image + copy split sections. Shorter reading widths, real
   photography, deliberate background changes between education/proof. */
.yca-split { padding: 56px 0; }
.yca-split--tint { background: #f7f9fa; }
.yca-split--navy { background: var(--yca-navy, #0a2a43); color: #fff; }
.yca-split--navy .yca-split__kicker { color: var(--yca-sand, #b0894b); }
.yca-split--navy p { color: rgba(255,255,255,0.86); }
.yca-split__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.yca-split--flip .yca-split__media { order: 2; }
.yca-split__media { border-radius: var(--yca-radius-lg, 8px); overflow: hidden; aspect-ratio: 4/3; background: var(--yca-placeholder-gradient, linear-gradient(160deg,#0a2a43,#123f5f)); box-shadow: 0 18px 44px rgba(10,42,67,0.16); }
.yca-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yca-split__body { max-width: 30rem; }
.yca-split__kicker { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--yca-sand, #b0894b); margin: 0 0 10px; }
.yca-split__title { font-family: var(--yca-font-display, Georgia, serif); font-size: 1.9rem; line-height: 1.15; margin: 0 0 16px; }
.yca-split__body p { font-size: 1.05rem; line-height: 1.66; margin: 0 0 14px; }
.yca-split__body p:last-child { margin-bottom: 0; }
@media (max-width: 820px) {
	.yca-split__inner { grid-template-columns: 1fr; gap: 26px; }
	.yca-split--flip .yca-split__media { order: 0; }
	.yca-split__body { max-width: none; }
	.yca-split__title { font-size: 1.6rem; }
}

/* How YCA Helps You Choose — 3–4 stronger modules (replaces the six tiny
   equal-weight columns). Numbered, generous, benefit-led. Not a wall of cards. */
.yca-help { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1040px; margin: 0 auto; }
.yca-help__item { position: relative; padding: 28px 28px 28px 30px; border-radius: var(--yca-radius-lg, 8px); background: #fff; border: 1px solid rgba(10,42,67,0.10); }
.yca-help__num { font-family: var(--yca-font-display, Georgia, serif); font-size: 1.1rem; color: var(--yca-sand, #b0894b); font-weight: 700; letter-spacing: 0.04em; }
.yca-help__title { font-family: var(--yca-font-display, Georgia, serif); font-size: 1.3rem; margin: 6px 0 10px; color: var(--yca-navy, #0a2a43); }
.yca-help__text { font-size: 1rem; line-height: 1.62; color: var(--yca-ink-muted, #5c6a73); margin: 0; }
@media (max-width: 720px) { .yca-help { grid-template-columns: 1fr; } }

/* What Clients Can Expect — structured promise (not generic paragraphs). */
.yca-expect { max-width: 760px; margin: 0 auto; display: grid; gap: 2px; }
.yca-expect__row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 4px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.yca-expect__row:last-child { border-bottom: 0; }
.yca-expect__mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--yca-sand, #b0894b); position: relative; margin-top: 2px; }
.yca-expect__mark::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid var(--yca-sand, #b0894b); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.yca-expect__text { font-size: 1.1rem; line-height: 1.5; }

/* ── Featured testimonial carousel (D11) ── */
.yca-ftst { padding: 60px 0; background: #f7f9fa; }
.yca-ftst__heading { text-align: center; }
.yca-ftst__intro { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.yca-ftst__stage { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; align-items: stretch; margin-top: 26px; }
.yca-ftst__featured { margin: 0; background: #fff; border-radius: var(--yca-radius-lg, 8px); padding: 40px 40px 34px; box-shadow: 0 18px 44px rgba(10,42,67,0.12); border-top: 4px solid var(--yca-sand, #b0894b); min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.yca-ftst__quote { font-family: var(--yca-font-display, Georgia, serif); font-size: 1.45rem; line-height: 1.5; color: var(--yca-navy, #0a2a43); margin: 0 0 22px; }
.yca-ftst__quote::before { content: "\201C"; color: var(--yca-sand, #b0894b); font-size: 2.4rem; line-height: 0; vertical-align: -0.35em; margin-right: 4px; }
.yca-ftst__cite { display: flex; flex-direction: column; gap: 3px; }
.yca-ftst__name { font-weight: 700; color: var(--yca-navy, #0a2a43); letter-spacing: 0.01em; }
.yca-ftst__meta { font-size: 0.9rem; color: var(--yca-ink-muted, #5c6a73); }
.yca-ftst__previews { display: flex; flex-direction: column; gap: 22px; }
.yca-ftst__preview { flex: 1; text-align: left; background: #fff; border: 1px solid rgba(10,42,67,0.10); border-radius: var(--yca-radius-lg, 8px); padding: 22px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s; display: flex; flex-direction: column; gap: 10px; min-height: 130px; }
.yca-ftst__preview:hover { transform: translateY(-2px); box-shadow: var(--yca-shadow-hover, 0 12px 28px rgba(10,42,67,0.14)); border-color: var(--yca-sand, #b0894b); }
.yca-ftst__preview-quote { font-size: 0.98rem; line-height: 1.5; color: var(--yca-ink, #1e2a32); }
.yca-ftst__preview-name { font-size: 0.85rem; font-weight: 700; color: var(--yca-sand, #b0894b); letter-spacing: 0.02em; }
.yca-ftst__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.yca-ftst__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(10,42,67,0.25); background: #fff; color: var(--yca-navy, #0a2a43); font-size: 24px; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s; }
.yca-ftst__arrow:hover { background: var(--yca-navy, #0a2a43); color: #fff; }
.yca-ftst__dots { display: flex; gap: 9px; align-items: center; }
.yca-ftst__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(10,42,67,0.22); cursor: pointer; transition: background 0.15s, transform 0.15s; }
.yca-ftst__dot.is-active { background: var(--yca-sand, #b0894b); transform: scale(1.3); }
.yca-ftst__arrow:focus-visible, .yca-ftst__dot:focus-visible, .yca-ftst__preview:focus-visible { outline: 2px solid var(--yca-sand, #b0894b); outline-offset: 3px; }
/* No-JS fallback: show featured + two previews (already in DOM); rest are data only. */
@media (max-width: 820px) {
	.yca-ftst__stage { grid-template-columns: 1fr; }
	.yca-ftst__featured { min-height: 240px; padding: 30px 24px; }
	.yca-ftst__quote { font-size: 1.2rem; }
	/* Mobile: one featured card, previews become a horizontal peek (next partially visible). */
	.yca-ftst__previews { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 4px; }
	.yca-ftst__preview { flex: 0 0 82%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
	.yca-ftst__preview, .yca-ftst__arrow, .yca-ftst__dot { transition: none; }
}

/* =========================================================================
 * HOMEPAGE REBUILD (H2/C17/C18/D14/D15) — 2026-09-04
 * First-time-charterer sequence. One shared card system (.yca-hcard) with three
 * compositions; merged cinematic opening; dominant fully-crewed band; one
 * curated collection with filter tabs. Mobile: Destinations/Yacht-Types rails
 * become horizontal carousels. Tokens reused from :root above.
 * ========================================================================= */

/* --- Band 1: cinematic opening (hero + flagship video, one dark canvas) --- */
.yca-home-opening { background: var(--yca-navy); color: var(--yca-white); }
.yca-home-opening__hero {
	background-size: cover; background-position: center;
	padding: 96px 0 40px; text-align: center;
}
.yca-home-opening__hero-inner { max-width: 760px; }
.yca-home-opening__logo { height: 88px; width: auto; margin: 0 auto 18px; display: block; }
.yca-home-opening__eyebrow {
	color: var(--yca-sand); text-transform: uppercase; letter-spacing: 0.16em;
	font-size: 0.72rem; margin: 0 0 12px;
}
.yca-home-opening__headline { color: var(--yca-white); font-size: 2.35rem; line-height: 1.12; margin: 0 0 14px; }
.yca-home-opening__subline { color: #cdd9e3; font-size: 1.02rem; line-height: 1.55; margin: 0 auto 22px; max-width: 620px; }
.yca-home-opening__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Flagship video — reserved aspect box (no CLS), poster background, controls. */
.yca-flagship { margin: 0; padding: 0 0 44px; }
.yca-flagship__frame {
	position: relative; max-width: 960px; margin: 0 auto;
	aspect-ratio: 16 / 9; border-radius: var(--yca-radius-lg); overflow: hidden;
	background-color: var(--yca-navy-light); background-size: cover; background-position: center;
	box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.yca-flagship__video, .yca-flagship__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.yca-flagship__video { object-fit: cover; }
.yca-flagship__play {
	position: absolute; inset: 0; margin: auto; width: 78px; height: 78px;
	border: 0; border-radius: 50%; background: rgba(var(--yca-navy-rgb), 0.55);
	color: var(--yca-white); cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
}
.yca-flagship__play:hover, .yca-flagship__play:focus-visible { background: var(--yca-sand-dark); color: var(--yca-navy); }
.yca-flagship__play:focus-visible { outline: 3px solid var(--yca-white); outline-offset: 3px; }
.yca-flagship__play-icon { font-size: 1.7rem; margin-left: 4px; }
.yca-flagship__caption { color: #cdd9e3; font-size: 0.9rem; text-align: center; margin-top: 12px; }
.yca-flagship__yacht { color: var(--yca-sand); margin-left: 10px; white-space: nowrap; }

/* --- Shared card DNA (.yca-hcard) — one ratio, one height, CTA bottom-aligned --- */
.yca-hcard {
	display: flex; flex-direction: column; text-decoration: none;
	background: var(--yca-white); border: 1px solid var(--yca-border);
	border-radius: var(--yca-radius-lg); overflow: hidden; color: var(--yca-ink);
	box-shadow: var(--yca-shadow); transition: box-shadow 0.15s ease, transform 0.15s ease;
	min-height: 100%;
}
.yca-hcard:hover, .yca-hcard:focus-visible { box-shadow: var(--yca-shadow-hover); transform: translateY(-2px); }
.yca-hcard__media {
	display: block; aspect-ratio: 16 / 9; width: 100%;
	background: var(--yca-placeholder-gradient); background-size: cover; background-position: center;
}
.yca-hcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.yca-hcard__title { font-family: var(--yca-font-display); color: var(--yca-navy); font-size: 1.14rem; }
.yca-hcard__blurb { color: var(--yca-ink-muted); font-size: 0.92rem; line-height: 1.5; }
.yca-hcard__cta { margin-top: auto; padding-top: 10px; color: var(--yca-sand-dark); font-weight: 600; font-size: 0.9rem; }
.yca-hcard__cta--on-dark { color: var(--yca-sand); }
.yca-hcards { display: grid; gap: 22px; }
.yca-hcards--three { grid-template-columns: repeat(3, 1fr); }

/* --- Band 2: fully-crewed dominant --- */
.yca-crewed-lead__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: stretch; }
.yca-crewed-lead__media { border-radius: var(--yca-radius-lg); min-height: 340px; background-size: cover; background-position: center; }
.yca-crewed-lead__eyebrow { color: var(--yca-sand-dark); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; margin: 0 0 8px; }
.yca-crewed-lead__title { font-size: 2rem; margin: 0 0 12px; text-align: left; }
.yca-crewed-lead__lead { color: var(--yca-ink); font-size: 1.02rem; line-height: 1.6; margin: 0 0 18px; }
.yca-crewed-lead__board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.yca-crewed-lead__board-card { border: 1px solid var(--yca-border); border-radius: var(--yca-radius); padding: 14px 16px; background: var(--yca-cream); }
.yca-crewed-lead__board-card--flagship { border-color: var(--yca-sand); background: #fbf4e6; }
.yca-crewed-lead__board-card h3 { font-size: 1.05rem; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yca-crewed-lead__board-card p { font-size: 0.88rem; line-height: 1.5; color: var(--yca-ink-muted); margin: 0; }
.yca-crewed-lead__flag { background: var(--yca-sand); color: var(--yca-navy); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 10px; }
.yca-crewed-lead__note { font-size: 0.82rem; color: var(--yca-ink-muted); line-height: 1.5; margin: 0 0 16px; }
.yca-crewed-lead__other { margin-top: 18px; border-top: 1px solid var(--yca-border); padding-top: 12px; }
.yca-crewed-lead__other > summary { cursor: pointer; color: var(--yca-ink-muted); font-size: 0.9rem; font-weight: 600; list-style: none; }
.yca-crewed-lead__other > summary::-webkit-details-marker { display: none; }
.yca-crewed-lead__other > summary::before { content: "\203A"; color: var(--yca-sand-dark); font-weight: 700; margin-right: 8px; display: inline-block; transition: transform 0.15s ease; }
.yca-crewed-lead__other[open] > summary::before { transform: rotate(90deg); }
.yca-crewed-lead__other > summary:focus-visible { outline: 2px solid var(--yca-navy); outline-offset: 2px; }
.yca-crewed-lead__other-body { font-size: 0.9rem; color: var(--yca-ink-muted); line-height: 1.55; padding-top: 10px; }
.yca-crewed-lead__other-body ul { margin: 8px 0 0; padding-left: 18px; }
.yca-crewed-lead__other-body li { margin-bottom: 6px; }
.yca-crewed-lead__other-body a { font-weight: 600; }

/* --- Band 4: destinations (feature + side rail) --- */
.yca-hdest__layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; }
.yca-hdest__feature {
	position: relative; display: flex; align-items: flex-end; min-height: 340px;
	border-radius: var(--yca-radius-lg); overflow: hidden; text-decoration: none;
	background: var(--yca-placeholder-gradient); background-size: cover; background-position: center;
	color: var(--yca-white); box-shadow: var(--yca-shadow);
}
.yca-hdest__feature:hover { box-shadow: var(--yca-shadow-hover); }
.yca-hdest__feature-body { padding: 24px; display: block; }
.yca-hdest__feature-eyebrow { display: block; color: var(--yca-sand); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; margin-bottom: 6px; }
.yca-hdest__feature-title { display: block; font-family: var(--yca-font-display); font-size: 1.7rem; margin-bottom: 8px; }
.yca-hdest__feature-blurb { display: block; color: #e6edf3; font-size: 0.94rem; line-height: 1.5; max-width: 460px; margin-bottom: 10px; }
.yca-hdest__side { display: flex; flex-direction: column; gap: 14px; }
/* B34 (2026-09-27): the destination band's side cards overflowed the section and
   overlapped the next band on desktop. Cause: .yca-hcard carries min-height:100%
   (written for equal-height cards in the .yca-hcards--three GRID). As a flex item
   in this column, each card demanded the FULL column height, so two stacked cards
   needed ~2x the row height and escaped the section. Reproduced at 1440/1054px
   (+389px overflow) and confirmed absent on mobile, matching the QA report.
   Fix: drop the inherited 100% floor here only, then let the cards share the
   column on desktop so the rail still matches the feature's height. Verified clean
   at 320-1600px: no overflow, no overlap, no clipped text. .yca-hcards--three is
   untouched, so the equal-height grid behaviour it was written for is preserved. */
.yca-hdest__side .yca-hcard { min-height: 0; }
@media (min-width: 1025px) { .yca-hdest__side .yca-hcard { flex: 1 1 0; } }
.yca-hcard--wide { flex-direction: row; align-items: stretch; }
.yca-hcard--wide .yca-hcard__media { width: 38%; aspect-ratio: auto; min-height: 92px; flex: 0 0 38%; }
.yca-hcard--wide .yca-hcard__body { justify-content: center; }
.yca-hdest__more { margin: 4px 0 0; font-size: 0.9rem; }
.yca-hdest__more a { font-weight: 600; }

/* --- Band 5: yacht-types rail (carousel) + shared carousel chrome --- */
.yca-carousel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.yca-carousel__head .yca-section__heading, .yca-carousel__head .yca-section__intro { text-align: left; margin-bottom: 6px; }
.yca-carousel__nav { display: flex; gap: 8px; flex: 0 0 auto; }
.yca-carousel__btn {
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--yca-border);
	background: var(--yca-white); color: var(--yca-navy); cursor: pointer; font-size: 1rem;
}
.yca-carousel__btn:hover { background: var(--yca-navy); color: var(--yca-white); }
.yca-carousel__btn:focus-visible { outline: 2px solid var(--yca-navy); outline-offset: 2px; }
.yca-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 18px; }
.yca-htypes__rail { grid-auto-columns: minmax(240px, 1fr); }
.yca-carousel:focus-visible { outline: 2px solid var(--yca-navy); outline-offset: 4px; }

/* --- Band 6: practical planning tiles --- */
.yca-hplan__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.yca-hplan__tile {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	border: 1px solid var(--yca-border); border-radius: var(--yca-radius); padding: 18px 16px;
	background: var(--yca-white); color: var(--yca-navy); font-weight: 600; font-size: 0.95rem;
	text-decoration: none; box-shadow: var(--yca-shadow);
}
.yca-hplan__tile:hover { box-shadow: var(--yca-shadow-hover); color: var(--yca-sand-dark); }

/* --- Band 8: one curated collection + filter tabs --- */
.yca-hcollection__tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.yca-hcollection__tab {
	border: 1px solid var(--yca-border); background: var(--yca-white); color: var(--yca-ink-muted);
	border-radius: 18px; padding: 7px 16px; font-size: 0.86rem; cursor: pointer;
}
.yca-hcollection__tab.is-active { background: var(--yca-navy); color: var(--yca-white); border-color: var(--yca-navy); }
.yca-hcollection__tab:focus-visible { outline: 2px solid var(--yca-navy); outline-offset: 2px; }
.yca-hcollection__item[hidden] { display: none; }
.yca-hcollection__empty { text-align: center; color: var(--yca-ink-muted); margin-top: 8px; }
.yca-hcollection__cta, .yca-why__link { text-align: center; margin-top: 26px; }

@media (max-width: 900px) {
	.yca-crewed-lead__inner { grid-template-columns: 1fr; }
	.yca-crewed-lead__media { min-height: 220px; }
	.yca-crewed-lead__title { text-align: left; }
	.yca-hdest__layout { grid-template-columns: 1fr; }
	.yca-hcards--three { grid-template-columns: repeat(2, 1fr); }
	.yca-hplan__grid { grid-template-columns: repeat(2, 1fr); }
	.yca-home-opening__headline { font-size: 1.9rem; }
}

@media (max-width: 560px) {
	.yca-home-opening__hero { padding: 72px 0 28px; }
	.yca-home-opening__headline { font-size: 1.55rem; }
	.yca-hcards--three { grid-template-columns: 1fr; }
	.yca-crewed-lead__board { grid-template-columns: 1fr; }
	.yca-hplan__grid { grid-template-columns: 1fr 1fr; }
	.yca-carousel__head { flex-direction: column; align-items: flex-start; }
	/* Destinations side + Yacht-Types become horizontal carousels (shorter page). */
	.yca-hdest__side { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
	.yca-hdest__side .yca-hcard { scroll-snap-align: start; }
	.yca-carousel { grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
	.yca-carousel .yca-carousel__item { scroll-snap-align: start; }
}

/* Reduced motion: no smooth-scroll jumps, no hover lift. */
@media (prefers-reduced-motion: reduce) {
	.yca-hcard, .yca-flagship__play { transition: none; }
	.yca-hcard:hover, .yca-hcard:focus-visible { transform: none; }
}

/* =========================================================================
 * B27 rate conditions body + B28 Sample Menu (brochure parity) — 2026-09-04
 * ========================================================================= */
.yca-rates__conditions-body { font-size: 0.9rem; line-height: 1.55; color: var(--yca-ink); margin: 0 0 10px; }
.yca-rates__conditions-body p { margin: 0 0 8px; }

.yca-menu__eyebrow { color: var(--yca-sand-dark); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; margin: 0 0 6px; }
.yca-menu__title { font-size: 1.6rem; margin: 0 0 8px; }
.yca-menu__note { color: var(--yca-ink-muted); font-size: 0.9rem; line-height: 1.55; max-width: 70ch; margin: 0 0 18px; }
.yca-menu__intro, .yca-menu__general { font-size: 0.95rem; line-height: 1.6; color: var(--yca-ink); margin: 0 0 18px; max-width: 75ch; }
.yca-menu__courses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 32px; }
.yca-menu__course-title { font-family: var(--yca-font-display); color: var(--yca-navy); font-size: 1.1rem; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--yca-border); }
.yca-menu__dishes { list-style: none; margin: 0; padding: 0; }
.yca-menu__dish { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--yca-cream); }
.yca-menu__dish:last-child { border-bottom: 0; }
.yca-menu__dish-media { flex: 0 0 64px; }
.yca-menu__dish-media img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--yca-radius); display: block; }
.yca-menu__dish-body { display: flex; flex-direction: column; gap: 2px; }
.yca-menu__dish-name { font-weight: 600; color: var(--yca-navy); font-size: 0.95rem; }
.yca-menu__dish-desc { color: var(--yca-ink-muted); font-size: 0.88rem; line-height: 1.45; }
.yca-menu__image { margin: 18px 0 0; }
.yca-menu__image img { width: 100%; max-width: 560px; height: auto; border-radius: var(--yca-radius-lg); border: 1px solid var(--yca-border); display: block; }
.yca-menu__image figcaption { color: var(--yca-ink-muted); font-size: 0.82rem; margin-top: 6px; }
@media (max-width: 640px) {
	.yca-menu__courses { grid-template-columns: 1fr; gap: 18px; }
	.yca-menu__title { font-size: 1.35rem; }
}

/* ==========================================================================
   B33 (0.18.3) — grouped menu photography
   Append to the END of style.css. New class only; nothing existing is overridden.
   Single-image dishes keep the existing .yca-menu__dish-media rules untouched.
   ========================================================================== */

.yca-menu__dish .yca-menu__dish-media--multi,
.yca-menu__dish-media--multi {
	display: grid;
	grid-template-columns: 1fr;      /* mobile-first: stacked */
	gap: 0.75rem;
	width: 100%;
	max-width: 100%;
}

@media (min-width: 600px) {
	.yca-menu__dish .yca-menu__dish-media--multi,
	.yca-menu__dish-media--multi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.yca-menu__dish .yca-menu__dish-media--multi img,
.yca-menu__dish-media--multi img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: inherit;
}


/* =========================================================================
 * 0.19.0 — launch visual sweep (CPO-approved brief Revision 2, 2026-10-02)
 *
 * APPEND-ONLY by design. Nothing above this line was edited. Where a rule
 * here overrides an existing declaration it does so at EQUAL specificity by
 * later source order, and the overridden line is named in the comment. That
 * keeps the 0.19.0 stylesheet delta a single reviewable addition.
 *
 * Contents: S1 S5 S6 S7 S8 S10 S11 S13 · Compare-table containment ·
 *           NEW-1 NEW-2 · V1 V2 V3 V4 · I3 card media modes
 * ========================================================================= */

/* --- S1 — carousel overflow (P1, adjudicated pre-existing) ---------------
 * `.yca-carousel` is grid-auto-flow:column with a 240px minimum track, so a
 * rail wider than its container pushes the DOCUMENT. `overflow-x` was only
 * ever applied inside @media (max-width: 560px), so every width from 561px up
 * leaked — worst at 768px (+536px). Containing it on the base rule retires the
 * leak at every width; the 560px block keeps its own snap/padding additions.
 * The vertical padding reserves room for the cards' -2px hover lift and their
 * shadow, which an overflow container would otherwise clip. */
.yca-carousel { overflow-x: auto; padding: 4px 0 10px; -webkit-overflow-scrolling: touch; }

/* --- S5 — photo-hero text back on the page grid (overrides :1204) --------
 * The inner element carries BOTH `yca-container` and `yca-page-hero__inner`.
 * The old override's `margin: 0` cancelled the container's `margin: 0 auto`,
 * so a 720px box sat flush left against a full-bleed hero and its text began
 * at its own 24px padding while everything else on the page sat on the 1200px
 * grid. Fix: the container is a container again (full width, capped, centred);
 * the 720px cap moves to the TEXT. `width: 100%` is required because the hero
 * is a flex container — without it a short title would shrink-to-fit and the
 * auto margins would centre that narrow box, which is not the intent.
 * Left alignment is deliberate and is preserved (`text-align: left` above). */
.yca-page-hero[style*="background-image"] .yca-page-hero__inner {
	max-width: var(--yca-max-width);
	width: 100%;
	margin: 0 auto;
}
.yca-page-hero[style*="background-image"] h1 { max-width: 720px; }
/* `p` keeps its own narrower 560px measure from :1206 — not widened here. */

/* --- S6 — inline links inside dark photo heroes (missing rule) -----------
 * :1206 turns hero paragraphs white but no `a` rule was ever written, so an
 * inline link inherited the global navy: dark navy text on a dark photo. Same
 * shape as the 0.18.10 B1 defect — one half of a pair present, the other not.
 * Buttons and the back-link already have their own treatments and are excluded
 * rather than overridden. */
.yca-page-hero[style*="background-image"] a:not(.yca-btn):not(.yca-page-hero__back) {
	color: var(--yca-white);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.yca-page-hero[style*="background-image"] a:not(.yca-btn):not(.yca-page-hero__back):hover,
.yca-page-hero[style*="background-image"] a:not(.yca-btn):not(.yca-page-hero__back):focus-visible {
	color: var(--yca-sand);
}

/* --- S7 — archive Step 4 heading overlapped by the search panel ----------
 * `.yca-search-card.yca-filter-bar` carried `margin: -70px 0 0` (-44px below
 * 901px) to float the card up over a hero. C14 then moved the card to sit
 * IMMEDIATELY before the results, where its own "Step 4 / Find Matching
 * Yachts" heading is the preceding sibling — so the negative pull now lifts
 * the panel over its own heading instead. The precondition for the mechanism
 * is gone, so the mechanism goes; the ≤900px padding change is untouched.
 * (`.yca-search-card.yca-filter-bar` has one consumer: archive-yacht.php.) */
.yca-search-card.yca-filter-bar { margin-top: 0; }

/* --- S8 — sticky mobile CTA covering the footer's last row ---------------
 * `.yca-btn--sticky-mobile` is position:fixed;bottom:0, shown at ≤720px on
 * single-yacht.php, and NOTHING in the stylesheet reserved space for it — so
 * it permanently overlaid the footer's bottom row. 16px padding + ~24px line
 * + 2px borders ≈ 60px; the footer's own 24px becomes 92px, which clears the
 * bar with slack rather than exactly.
 * Two rules, not one comma list: `:has()` uses a non-forgiving selector list,
 * so pairing it with the body class would invalidate BOTH where `:has()` is
 * unsupported. The body-class rule is the floor, the `:has()` rule is the
 * generalisation for any future page that renders the bar. */
@media (max-width: 720px) {
	body.single-yacht .yca-site-footer { padding-bottom: 92px; }
}
@media (max-width: 720px) {
	body:has(.yca-btn--sticky-mobile) .yca-site-footer { padding-bottom: 92px; }
}

/* --- S10 — orphan rows ---------------------------------------------------
 * Two grids, two different causes, two different fixes.
 *
 * (a) `.yca-type-grid` renders FIVE yacht types into four columns, leaving one
 *     card alone and left-aligned on its own row. Five does not factor into
 *     four at any breakpoint, and the grid is shared with Step 3 (three cards,
 *     the lead spanning two = four slots exactly). So instead of changing the
 *     column count, this switches the one grid to a centred wrapping flex row:
 *     the bases below reproduce repeat(4,1fr) / repeat(2,1fr) / 1fr with the
 *     identical 16px gap, every full row is unchanged (justify-content has no
 *     effect on a full row), and whatever remains on the final row is centred.
 *     That holds for ANY number of types the taxonomy returns, which a fixed
 *     column count does not. `--lead`'s two-column span becomes the equivalent
 *     flex basis (2 tracks + 1 gap). */
.yca-type-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.yca-type-grid > * { flex: 0 1 calc(25% - 12px); }
@media (max-width: 900px) { .yca-type-grid > * { flex-basis: calc(50% - 8px); } }
@media (max-width: 480px) { .yca-type-grid > * { flex-basis: 100%; } }
@media (min-width: 901px) { .yca-type-card--lead { flex-basis: calc(50% - 8px); } }
@media (max-width: 900px) { .yca-type-card--lead { flex-basis: 100%; } }
/* (b) `.yca-choose__grid` renders FOUR cards into three columns — 3 + 1. Four
 *     DOES factor, so this one needs no layout-model change: two columns give
 *     a balanced 2x2 and more measure for cards that carry prose. */
@media (min-width: 720px) {
	.yca-choose__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- S11 — unstyled browser bullet lists --------------------------------
 * Four bare `<ul>` elements are direct children of a `.yca-container` inside a
 * `.yca-section` ("Who This Service Is For", "What YCA Can Help Coordinate",
 * and the two "Explore More" link lists). They were the only lists on the site
 * rendering with raw browser discs and default margins. The selector is
 * structural, so this is a pure stylesheet fix with no template change: body
 * copy inside `.yca-guide-content` nests deeper and is unaffected. */
.yca-section > .yca-container > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px 32px;
	max-width: 860px;
}
.yca-section > .yca-container > ul > li {
	position: relative;
	padding-left: 22px;
	color: var(--yca-ink-muted);
	line-height: 1.55;
}
.yca-section > .yca-container > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.56em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--yca-sand-dark);
}
.yca-section > .yca-container > ul > li > a {
	font-weight: 600;
	color: var(--yca-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--yca-sand);
	padding-bottom: 1px;
}
.yca-section > .yca-container > ul > li > a:hover { border-bottom-color: var(--yca-navy); }
@media (min-width: 720px) {
	.yca-section > .yca-container > ul { grid-template-columns: repeat(2, 1fr); }
}

/* --- S13 — mobile primary/secondary button width parity -----------------
 * Below 561px a primary and a secondary button in the same action row sat at
 * two different widths, because both are inline-block and sized by their own
 * label. Full-width stacked buttons make them equal by construction, which is
 * what `.yca-search-card__actions .yca-btn` (:2421) and `.yca-finder__form
 * .yca-btn` (:3119) already do for their own rows. */
@media (max-width: 560px) {
	.yca-page-hero__actions,
	.yca-home-opening__ctas,
	.yca-experiences-cta__actions,
	.yca-404__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.yca-page-hero__actions .yca-btn,
	.yca-home-opening__ctas .yca-btn,
	.yca-experiences-cta__actions .yca-btn,
	.yca-404__actions .yca-btn {
		display: block;
		width: 100%;
	}
}

/* --- Compare Yacht Types — editorial table containment ------------------
 * `.yca-comparison-table-wrap` (:2675) and `.yca-rates__tablewrap` already
 * provide containment, but an editorial table inside `.yca-guide-content`
 * (:1853-1866) is styled and given NO wrapper, so it pushes the document
 * instead of scrolling itself — the only one of 76 URLs with horizontal
 * scroll at 390px. The block editor emits `<figure class="wp-block-table">`
 * around its tables, and the existing paired selectors at :1853 show both
 * forms occur here, so the figure becomes the scroll container. The cell
 * compression below is the independent half: it narrows the table's intrinsic
 * width so a classic, UNWRAPPED table has a chance of fitting rather than
 * relying on a wrapper that may not exist in the content.
 * NOTE FOR QA: whether the Compare Yacht Types table is a block table is a
 * RUNTIME fact I cannot read from source. CC confirms at 390px. */
.yca-guide-content .wp-block-table,
.yca-guide-content figure.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.yca-guide-content table,
.yca-guide-content .wp-block-table table { max-width: 100%; }
@media (max-width: 560px) {
	.yca-guide-content table th, .yca-guide-content table td,
	.yca-guide-content .wp-block-table table th, .yca-guide-content .wp-block-table table td {
		padding: 8px 9px;
		font-size: 0.88rem;
		overflow-wrap: break-word;
	}
}

/* --- V4 / NEW-2 — the cream search band (CPO ruling §8.1) ---------------
 * The locked homepage order puts Find Matching Yachts directly under the navy
 * opening canvas, so two navy bands touched — the stacked-navy effect CC
 * flagged on Experiences. Ruled: lift the search band to CREAM rather than
 * extending the dark canvas through it.
 * This also resolves NEW-2 on its own: "Search Yachts" is `.yca-btn--primary`,
 * i.e. navy-on-navy against the old panel. On a white panel inside a cream
 * band it is the highest-contrast element in the section, which is what a
 * primary action should be. No new button variant needed.
 * Overrides :3052-3068 and the shared focus ring at :3103. */
.yca-finder { background: var(--yca-cream); }
.yca-finder .yca-section__heading { color: var(--yca-navy); }
.yca-finder .yca-section__intro { color: var(--yca-ink-muted); }
.yca-finder__form {
	background: var(--yca-white);
	border: 1px solid var(--yca-border);
	box-shadow: var(--yca-shadow);
}
.yca-finder__field label { color: var(--yca-sand-dark); }
.yca-finder__field select,
.yca-finder__field input { background: var(--yca-white); }
.yca-finder__hint { color: var(--yca-ink-muted); }
/* The sand focus ring was legible on navy and is not on cream. Scoped to the
 * finder only — `.yca-yacht-type-card:focus-visible` shares :3103 and still
 * sits on a dark card, so its sand ring is left exactly as it is. */
.yca-finder__field select:focus-visible,
.yca-finder__field input:focus-visible {
	outline: 3px solid var(--yca-navy);
	outline-offset: 2px;
}

/* --- NEW-1 — the 150px gaps between mobile search fields ---------------
 * `.yca-finder__field` is `flex: 1 1 200px`. At ≤600px the form becomes
 * `flex-direction: column` (:3118) — and flex-basis applies to the MAIN axis,
 * which is now VERTICAL. So each field was given a 200px base HEIGHT with
 * flex-grow:1 on top: CC's ~150px gaps are the fields themselves, not margins.
 * In column mode the fields should be content-height. The row-mode basis is
 * deliberately untouched. */
@media (max-width: 600px) {
	.yca-finder__field { flex: 0 0 auto; }
}

/* --- V3 — section weight scale ------------------------------------------
 * Every band carried the same `padding: 64px 0` (:740), so importance was
 * carried by content alone and nine identical rhythms read as a flat list.
 * Three weights, applied ONLY where this release's brief touches: the
 * dominant crewed band gets `--feature`, the practical planning bridge gets
 * `--tight`, everything else keeps the default. This is also half of what
 * separates the two adjacent card grids (brief §8.2) — the other half is the
 * background rhythm below. */
.yca-section--tight { padding-top: 40px; padding-bottom: 40px; }
.yca-section--feature { padding-top: 88px; padding-bottom: 88px; }
@media (max-width: 560px) {
	.yca-section--feature { padding-top: 64px; padding-bottom: 64px; }
	.yca-section--tight { padding-top: 32px; padding-bottom: 32px; }
}

/* --- V4 — background rhythm --------------------------------------------
 * With the cream search band in place, `.yca-testimonial` (cream, :1011)
 * became the next band and two creams touched. Scoped to the one adjacency,
 * by sibling selector rather than by editing the shared testimonials partial
 * — `.yca-finder` exists on exactly one page, so this cannot affect the
 * testimonial band anywhere else. The homepage then alternates
 * navy → cream → white → cream → white → cream → white → cream → white →
 * cream → navy with no two adjacent bands sharing a surface. */
.yca-finder + .yca-testimonial { background: var(--yca-white); }

/* --- V1 / V2 — flagship video frame ------------------------------------
 * V1: 960px was narrower than the 1152px content column it sat inside, so the
 * emotional lead of the page was the smallest element in it. `width` +
 * `max-width` together put the frame ON the container grid at every width
 * (1152px from 1248px up, container-aligned below) instead of jumping to
 * edge-to-edge in the middle of the range. The 40px/35%-opacity shadow is
 * replaced by a restrained one; it read as a floating widget, not a film.
 * V2: edge-to-edge on phones, still 16:9. Deliberately NOT `calc(50% - 50vw)`
 * — `100vw` includes the scrollbar and would reintroduce the exact
 * document-overflow class this release gates against. The figure already sits
 * OUTSIDE `.yca-container` in BAND 1, so no markup change is required.
 * 4:5 mobile is NO-GO for 0.19.0 as ruled; aspect ratio is unchanged.
 * Overrides :3576-3581. */
.yca-flagship__frame {
	width: calc(100% - 48px);
	max-width: calc(var(--yca-max-width) - 48px);
	box-shadow: 0 6px 24px rgba(var(--yca-navy-rgb), 0.22);
}
@media (max-width: 560px) {
	.yca-flagship__frame {
		width: 100%;
		max-width: none;
		border-radius: 0;
		box-shadow: none;
	}
}

/* --- I3 — card media: photograph, or a deliberate icon -----------------
 * `.yca-hcard__media` (:3605) had exactly one appearance: the navy wave
 * placeholder. PD-286 approved that wave as a brand surface, but it cannot
 * also be the FALLBACK, because looking like a placeholder is the defect
 * (CPO ruling 2026-10-02). Two explicit modes replace one implicit one.
 * `--photo` only re-states the base behaviour it is named for, so a card that
 * gains an image URL needs no new rule. `--icon` is a designed state: a flat
 * navy surface with one sand outline icon from the existing yca_icon() family.
 * Neither mode declares `width` or `aspect-ratio`, so `.yca-hcard--wide`'s
 * 38%/auto override (:3668) keeps working untouched. */
.yca-hcard__media--photo { background-size: cover; background-position: center; }
.yca-hcard__media--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--yca-navy);
	color: var(--yca-sand);
}
.yca-hcard__media--icon .yca-icon { width: 46px; height: 46px; opacity: 0.9; }
@media (max-width: 560px) {
	.yca-hcard__media--icon .yca-icon { width: 38px; height: 38px; }
}

/* --- V4 — the rhythm must survive the OPTIONAL guest-proof band ----------
 * `template-parts/testimonials.php` returns before emitting anything when no
 * verified quotes exist, so position 3 of the locked order is optional. The
 * rhythm has two FIXED cream pins — the search band at position 2 and
 * `.yca-why` at position 10 (:855) — and parity between two fixed pins is
 * determined, so dropping one band in between necessarily flips it: without
 * the proof band, search and the crewed band both land on cream and touch.
 * No adjacency rule can fix that; it only moves the clash down the page. So
 * the rule is conditional on the band actually being there.
 * When it is absent the SEARCH band takes white (and its panel cream): it has
 * the fewest downstream dependencies, and against the navy opening white is
 * still a deliberate step down from the canvas rather than an accident.
 * Without `:has()` support this rule does not apply at all and the designed
 * case stands — the correct degradation. */
body:not(:has(.yca-testimonial)) .yca-finder { background: var(--yca-white); }
body:not(:has(.yca-testimonial)) .yca-finder__form {
	background: var(--yca-cream);
	border-color: var(--yca-border);
}


/* =========================================================================
 * 0.19.1 — Compare Yacht Types, against the REAL markup (CPO ruling 2026-10-07)
 *
 * 0.19.0 contained the BLOCK-EDITOR form of an editorial table and said so
 * explicitly: "whether the Compare Yacht Types table is a block table is a
 * RUNTIME fact I cannot read from source. CC confirms at 390px."
 *
 * CC confirmed it, and the answer was no. The real table is seeded as raw HTML
 * into post_content by inc/planning-guide-content-batch-016-023-2026-07-25.php:
 *
 *     <table class="yca-guide-table">
 *     <thead><tr><th>Feature</th><th>Motor Yacht</th><th>Sailing Yacht</th>
 *                <th>Catamaran</th><th>Expedition Yacht</th></tr></thead>
 *
 * Five columns, no <figure> wrapper, and `.yca-guide-table` carried NO rule of
 * its own anywhere in this stylesheet. So the 0.19.0 wrapper rule could never
 * match it: there is no wrapper to make scrollable. Measured by CC at 390px —
 * viewport 390, document ~464.
 *
 * THE FIX: the table contains ITSELF. A bare table cannot be given a wrapper
 * from CSS and the markup is editorial content we are not authorised to touch,
 * so the table becomes its own scroll container. `width: max-content` is the
 * load-bearing half — without it `display: block` makes the table fill its
 * parent and squeeze the cells instead of scrolling. Table-internal children
 * (thead/tbody/tr) are wrapped in an anonymous table box by the browser, so
 * column alignment and collapsed borders survive; this is asserted by
 * measurement at ten widths, not assumed.
 *
 * SCOPED TO TABLES ONLY. Ordinary guide content — paragraphs, lists, headings,
 * images — is untouched and does not scroll. The rule is deliberately on
 * `table` rather than on `.yca-guide-table`, so the next editorial table added
 * without that class cannot reopen the defect; the geometry gate now carries
 * the real markup and would catch it either way.
 *
 * ALREADY-WRAPPED TABLES ARE EXCLUDED, or they would nest two scroll areas:
 *   - `figure.wp-block-table`        the block editor's own wrapper (0.19.0)
 *   - `figure.yca-comparison-table-wrap` :2675, used by the All-Inclusive vs
 *     Plus-Expenses guide, which is ALSO inside .yca-guide-content and whose
 *     `.yca-comparison-table` has `min-width: 520px` — exactly the case that
 *     would have broken had this rule been written unscoped.
 * ========================================================================= */
.yca-guide-content table {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* A table that already has a scrolling wrapper stays a real table inside it. */
.yca-guide-content .wp-block-table > table,
.yca-guide-content figure.wp-block-table > table,
.yca-guide-content .yca-comparison-table-wrap > table,
.yca-guide-content figure.yca-comparison-table-wrap > table {
	display: table;
	width: 100%;
	max-width: none;
	overflow-x: visible;
}


/* =========================================================================
 * 0.19.2 — guide-card media: a photograph, or a deliberate icon. Never a wave.
 *
 * `.yca-guide-card__photo` (:1827) paints `--yca-placeholder-gradient` as its
 * background, which is correct when a photograph sits on top of it and wrong
 * when nothing does. 22 planning guides carried no thumbnail, so the Planning
 * Centre rendered 22 identical navy wave panels — about 9,000px of repeated
 * placeholder on mobile — and every "Keep Planning" set did the same.
 *
 * The partial now falls back to the guide's own approved hero image before it
 * falls back to anything else, so this icon state is a genuine last resort
 * rather than the normal case. Same treatment and same reasoning as the 0.19.0
 * I3 card media: a flat brand surface with one outline icon reads as DESIGNED;
 * a texture with nothing on it reads as UNFINISHED.
 *
 * The modifier is only added when an icon actually resolved, so a card can
 * never render an empty flat panel — the hole closed in 0.19.0's I3 branch.
 * ========================================================================= */
.yca-guide-card__photo--icon {
	background: var(--yca-navy);
	display: flex;
	align-items: center;
	justify-content: center;
}
.yca-guide-card__photo--icon .yca-icon {
	width: 44px;
	height: 44px;
	color: var(--yca-sand);
	opacity: 0.9;
}
@media (max-width: 560px) {
	.yca-guide-card__photo--icon .yca-icon { width: 36px; height: 36px; }
}


/* --- 0.19.3 — the Jon Sanders clipping, presented as an archival figure ---
 * The asset is now cropped to the photograph plus its printed caption (995x507,
 * ~1.96:1 where the surrounding box was 1.33:1), so it must not be cover-cropped
 * again by a box of a different shape — that is what hid the caption. The figure
 * sizes to the image, and the caption is real text rather than pixels, which is
 * the only form a screen reader or a search engine can read. */
.yca-split__figure { margin: 0; }
.yca-split__figure img { width: 100%; height: auto; display: block; border-radius: var(--yca-radius); }
.yca-split__caption {
	margin-top: 10px;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--yca-ink-muted);
}
.yca-split__source { display: block; margin-top: 2px; font-style: italic; opacity: 0.85; }


/* --- 0.19.3 (CPO correction) — the clipping gets its OWN box ---------------
 * `.yca-split__media` is a 4:3 `overflow: hidden` cover-crop frame on a navy
 * placeholder gradient with a drop shadow. That is right for the eleven other
 * split sections and WRONG for an archival figure with a mandatory caption: the
 * caption is real text, it is the only readable form of the clipping's printed
 * caption (measured at ~6.5px desktop / ~4px mobile as pixels — CC runtime
 * measurement), and a frame that clips it defeats the whole point.
 *
 * So the modifier releases the frame rather than editing the shared rule:
 * no forced ratio, no clipping, no gradient behind a photograph that fills its
 * own box, no card shadow around a newspaper cutting. The figure then sizes to
 * the image plus its caption, which lands at approximately 16:10 overall —
 * the ratio the CPO asked for — while cropping nothing. A hard
 * `aspect-ratio: 16/10` could only have been honoured by cover-cropping the
 * clipping (losing printed content) or letterboxing it. */
.yca-split__media--figure {
	aspect-ratio: auto;
	overflow: visible;
	background: none;
	box-shadow: none;
	border-radius: 0;
	align-self: center;
}
.yca-split__media--figure img {
	/* the shared rule is `height: 100%; object-fit: cover` — a crop */
	height: auto;
	object-fit: fill;
	box-shadow: 0 10px 28px rgba(10, 42, 67, 0.14);
}


/* --- 0.19.4 — the Fully Crewed band cropped the hull out at tablet width -----
 * CC measured it at 768: the band stacks to 720x220 and `background-position:
 * 50% 50%` on a 1080x1080 source at `cover` shows only the vertical middle —
 * sail and sea, with the catamaran's hull gone entirely.
 *
 * The existing rule is `min-height: 220px` for EVERYTHING at or below 900px,
 * and 220px is right at phone width: at 342px wide the box shows 64% of the
 * image's height, so the yacht reads. At 720px wide it shows only 31%. The
 * problem is not the breakpoint, it is that one height serves two very
 * different box shapes.
 *
 * So this is scoped to the stacked-but-WIDE band only, reusing the theme's own
 * 560px boundary rather than inventing a breakpoint. Phone width is deliberately
 * untouched — CC confirmed 390 already reads correctly, and the quickest way to
 * break something that works is to "fix" it alongside something that does not.
 *
 * Both values were chosen by rendering the real asset at 561, 768 and 900 and
 * looking at the result, not by arithmetic: at 50% 62% the hull was still cut
 * at the bottom edge.
 *
 * Appended, equal specificity, later source order — no !important, and 0.19.3
 * remains an exact prefix of this file. */
@media (max-width: 900px) and (min-width: 561px) {
	.yca-crewed-lead__media { min-height: 300px; background-position: 50% 75%; }
}