/**
 * Front-page "luxe" layer. Scoped to body.scx-luxe.
 * Palette: deep Aegean navy / warm sand / one gold. Display: Cormorant Garamond
 * (+ true italics for accent words). Body: Inter. Signature: the route band —
 * the cruise itinerary drawn as a LIVING chart: a dashed gold course line that
 * draws itself, waypoint pings, a drag cursor, and a course-progress ruler.
 *
 * Motion language ("the living chart"): one orchestrated hero entrance, long
 * expo-out reveals with staggered children, curtain reveals on photography,
 * sheen sweeps on gold. All animation is transform/opacity (+ small clip-path
 * reveals). Everything respects prefers-reduced-motion and renders fully
 * visible without JS.
 */

:root {
	/* Additions on top of design.css tokens */
	--scx-gold-hi: #E9D3A0;
	--scx-foil: linear-gradient(105deg, #A9853D 0%, #E9D3A0 38%, #C6A45C 58%, #A9853D 100%);
	--scx-foil-light: linear-gradient(105deg, #C6A45C 0%, #F0DFB2 40%, #D9BC7E 60%, #C6A45C 100%);
	--scx-out: cubic-bezier(0.16, 1, 0.3, 1);
	--scx-hairline: rgba(11, 31, 58, 0.1);
	--scx-shadow-card: 0 1px 2px rgba(11, 31, 58, 0.05), 0 10px 30px -10px rgba(11, 31, 58, 0.12);
	--scx-shadow-lift: 0 2px 4px rgba(11, 31, 58, 0.06), 0 28px 60px -16px rgba(11, 31, 58, 0.25);
	--scx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/cormorant-garamond-italic-var.woff2') format('woff2');
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

body.scx-luxe {
	margin: 0;
	background: var(--scx-warm-white, #FBF9F4);
	color: var(--scx-ink, #182230);
	font-family: var(--scx-sans, 'Inter', sans-serif);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
.scx-luxe .lx-shell { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.scx-luxe a { color: inherit; }
.scx-luxe :focus-visible { outline: 2px solid var(--scx-gold, #C6A45C); outline-offset: 3px; }
.scx-luxe img { max-width: 100%; display: block; }
.scx-luxe figure { margin: 0; }
.scx-luxe ::selection { background: var(--scx-gold, #C6A45C); color: var(--scx-navy-deep, #071528); }
@media (prefers-reduced-motion: no-preference) {
	html:has(body.scx-luxe) { scroll-behavior: smooth; }
}

/* Cross-page cross-fade (progressive; Chromium only for now) */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}

.lx-skip {
	position: absolute; left: -999px; top: 0; z-index: 1200;
	background: var(--scx-navy-deep, #071528); color: #fff; padding: 0.6rem 1rem;
}
.lx-skip:focus { left: 0; }

/* ---------- Type ---------- */
.lx-display {
	font-family: var(--scx-serif, 'Cormorant Garamond', serif);
	font-weight: 570;
	font-size: clamp(2.3rem, 5vw, 4.1rem);
	line-height: 1.04;
	letter-spacing: -0.008em;
	margin: 0 0 1.2rem;
	color: var(--scx-navy, #0B1F3A);
	text-wrap: balance;
}
.lx-display em, .scx-luxe h1 em {
	font-style: italic;
	font-weight: 500;
	color: var(--scx-gold-deep, #A9853D);
}
/* Gold-foil accent words (guarded: transparent text needs bg-clip support) */
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.lx-display em, .scx-luxe h1 em {
		background-image: var(--scx-foil);
		background-size: 200% 100%;
		background-position: 30% 50%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
	.lx-display-light em, .scx-luxe .lx-hero-copy h1 em {
		background-image: var(--scx-foil-light);
	}
}
.lx-display-light, .lx-display-light em { color: var(--scx-warm-white, #FBF9F4); }
.lx-display-light em { color: var(--scx-gold, #C6A45C); }
.lx-eyebrow {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--scx-muted, #5C6B7A);
	margin: 0 0 1.1rem;
}
.lx-eyebrow::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 44px; height: 1px;
	background: var(--scx-gold, #C6A45C);
	margin-left: 0.8rem;
	transform-origin: left center;
}
.lx-eyebrow-gold { color: var(--scx-gold, #C6A45C); }

/* ---------- Buttons ---------- */
.lx-btn {
	position: relative;
	display: inline-block;
	overflow: hidden;
	isolation: isolate;
	border-radius: 999px;
	padding: 1rem 2.05rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: background-color 260ms var(--scx-ease, ease), color 260ms var(--scx-ease, ease),
		border-color 260ms var(--scx-ease, ease), transform 300ms var(--scx-out),
		box-shadow 300ms var(--scx-out);
}
.lx-btn::before {
	/* sheen sweep */
	content: '';
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 42%;
	background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
	transform: translateX(-260%) skewX(-18deg);
	pointer-events: none;
	z-index: 1;
}
/* Magnetic drift: luxe.js feeds --mx/--my from the pointer (fine pointers only);
   without JS the vars stay 0 and this is a plain -2px lift. */
.lx-btn:hover { transform: translate3d(var(--mx, 0px), calc(-2px + var(--my, 0px)), 0); }
.lx-btn:active { transform: translate3d(var(--mx, 0px), calc(1px + var(--my, 0px)), 0) scale(0.98); transition-duration: 90ms; }
.lx-btn:hover::before, .lx-btn:focus-visible::before { animation: lx-sheen 0.9s var(--scx-ease, ease) forwards; }
@keyframes lx-sheen { to { transform: translateX(560%) skewX(-18deg); } }
.lx-btn-gold {
	background: linear-gradient(160deg, #D2B26B 0%, #C6A45C 55%, #BA954C 100%) !important;
	color: var(--scx-navy-deep, #071528) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(11, 31, 58, 0.15);
}
.lx-btn-gold:hover {
	background: linear-gradient(160deg, #BA954C 0%, #A9853D 60%, #9C7A36 100%) !important;
	color: #fff !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 14px 30px -8px rgba(169, 133, 61, 0.55);
}
.lx-btn-ghost { border-color: rgba(255,255,255,0.55); color: #fff !important; }
.lx-btn-ghost:hover {
	border-color: var(--scx-gold, #C6A45C);
	color: var(--scx-gold-hi, #E9D3A0) !important;
	background: rgba(198, 164, 92, 0.12);
	box-shadow: 0 10px 26px -10px rgba(7, 21, 40, 0.5);
}
.lx-btn-navy { background: var(--scx-navy, #0B1F3A); color: #fff !important; }
.lx-btn-navy:hover { background: var(--scx-navy-deep, #071528); box-shadow: 0 14px 30px -10px rgba(7, 21, 40, 0.45); }

/* ---------- Header ----------
   Two states, both airy: fully transparent over the hero photograph, then a
   LIGHT frosted-glass plate once scrolled (never a dark slab). Menu items are
   pills — controls are round; content stays framed. */
.lx-header {
	position: fixed; inset: 0 0 auto 0; z-index: 900;
	padding: 1.1rem 0;
	/* No resting transform: a non-none transform would make the header the
	   containing block for the fixed mobile nav panel and clip it. */
	transition: background-color 300ms var(--scx-ease, ease), padding 300ms var(--scx-ease, ease),
		box-shadow 300ms var(--scx-ease, ease), transform 380ms var(--scx-out);
}
.lx-header::after {
	/* gold hairline that appears once the glass header is active */
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(198, 164, 92, 0.5) 28%, rgba(198, 164, 92, 0.5) 72%, transparent);
	opacity: 0;
	transition: opacity 300ms var(--scx-ease, ease);
}
body.lx-scrolled .lx-header {
	background: rgba(251, 249, 244, 0.82);
	backdrop-filter: blur(16px) saturate(1.5);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	padding: 0.65rem 0;
	box-shadow: 0 12px 40px -18px rgba(11, 31, 58, 0.28);
}
body.lx-scrolled .lx-header::after { opacity: 1; }
/* Reading down: tuck the header away; any upward intent brings it back */
body.lx-headhide .lx-header { transform: translateY(-102%); }
.lx-header:focus-within { transform: none !important; }
.lx-header-in { display: flex; align-items: center; gap: 2rem; }
.lx-brand {
	font-family: var(--scx-serif, serif);
	font-size: 1.28rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #fff !important;
	text-decoration: none;
	white-space: nowrap;
	text-shadow: 0 1px 14px rgba(7, 21, 40, 0.45);
	transition: color 300ms var(--scx-ease, ease), text-shadow 300ms var(--scx-ease, ease);
}
.lx-brand em { font-style: italic; color: var(--scx-gold, #C6A45C); transition: color 300ms var(--scx-ease, ease); }
.lx-brand:hover em { color: var(--scx-gold-hi, #E9D3A0); }
body.lx-scrolled .lx-brand { color: var(--scx-navy, #0B1F3A) !important; text-shadow: none; }
body.lx-scrolled .lx-brand em { color: var(--scx-gold-deep, #A9853D); }
body.lx-scrolled .lx-brand:hover em { color: var(--scx-gold, #C6A45C); }
.lx-nav { margin-left: auto; display: flex; align-items: center; gap: 0.3rem; }
.lx-nav a {
	position: relative;
	color: rgba(255,255,255,0.92) !important;
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: color 240ms var(--scx-ease, ease), background-color 240ms var(--scx-ease, ease),
		border-color 240ms var(--scx-ease, ease), text-shadow 240ms var(--scx-ease, ease);
}
/* Top-level items are pills: transparent at rest, glass fill on hover/focus */
.lx-nav > a, .lx-navgroup > a, .lx-navlabel {
	padding: 0.48rem 1rem;
	border-radius: 999px;
	border: 1px solid transparent;
	text-shadow: 0 1px 10px rgba(7, 21, 40, 0.4);
}
.lx-nav > a:hover, .lx-nav > a:focus-visible,
.lx-navgroup > a:hover, .lx-navgroup > a:focus-visible,
.lx-navgroup:hover > .lx-navlabel, .lx-navlabel:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(233, 211, 160, 0.5);
	color: #fff !important;
}
/* Quietly mark the page you're on */
.lx-nav > a[aria-current='page'], .lx-navgroup > a[aria-current='page'] {
	background: rgba(255, 255, 255, 0.11);
	border-color: rgba(198, 164, 92, 0.55);
}
/* Scrolled (light glass): ink pills, gold rings */
body.lx-scrolled .lx-nav a { color: var(--scx-navy, #0B1F3A) !important; text-shadow: none; }
body.lx-scrolled .lx-nav > a:hover, body.lx-scrolled .lx-nav > a:focus-visible,
body.lx-scrolled .lx-navgroup > a:hover, body.lx-scrolled .lx-navgroup > a:focus-visible,
body.lx-scrolled .lx-navgroup:hover > .lx-navlabel, body.lx-scrolled .lx-navlabel:focus-visible {
	background: rgba(11, 31, 58, 0.06);
	border-color: rgba(169, 133, 61, 0.5);
	color: var(--scx-navy, #0B1F3A) !important;
}
body.lx-scrolled .lx-nav > a[aria-current='page'], body.lx-scrolled .lx-navgroup > a[aria-current='page'] {
	background: rgba(11, 31, 58, 0.05);
	border-color: rgba(169, 133, 61, 0.5);
}
/* Header CTA: one discreet sheen sweep shortly after load, then on hover */
.lx-header-cta::before { animation: lx-sheen 1.3s var(--scx-ease, ease) 2.3s 1 both; }
@media (max-width: 900px) {
	.lx-nav { display: none; }
	.lx-header-cta { margin-left: auto; padding: 0.7rem 1.2rem; }
	.lx-header-in { gap: 1rem; }
}
@media (max-width: 480px) {
	.lx-brand { font-size: 1.02rem; }
	.lx-header-cta { padding: 0.62rem 0.95rem; font-size: 0.74rem; }
}

/* ---------- Hero ---------- */
.lx-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	color: #fff;
	/* keep copy clear of the fixed header on short viewports */
	padding-top: 6.5rem;
	box-sizing: border-box;
}
.lx-hero-media, .lx-hero-media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.lx-hero-media { z-index: 0; }
.lx-hero-media img { animation: lx-drift 30s var(--scx-ease, ease-out) both; transform-origin: 60% 40%; }
@keyframes lx-drift { from { transform: scale(1.09); } to { transform: scale(1); } }
.lx-hero::before {
	/* filmic grain over the photograph */
	content: '';
	position: absolute; inset: 0; z-index: 1;
	background: var(--scx-grain);
	pointer-events: none;
}
.lx-hero::after {
	content: '';
	position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(120% 60% at 78% 88%, rgba(198, 164, 92, 0.14) 0%, rgba(198, 164, 92, 0) 60%),
		linear-gradient(to top, rgba(7,21,40,0.9) 0%, rgba(7,21,40,0.36) 38%, rgba(7,21,40,0.16) 60%, rgba(7,21,40,0.44) 100%);
}
.lx-hero-copy { position: relative; z-index: 2; padding-bottom: 3rem; max-width: 1200px; width: 100%; }
.lx-hero-copy .lx-eyebrow { color: rgba(255,255,255,0.85); }
.scx-luxe h1 {
	font-family: var(--scx-serif, serif);
	font-weight: 560;
	font-size: clamp(2.6rem, 6.4vw, 5.3rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0 0 1.3rem;
	max-width: 24ch;
	color: #fff;
	text-wrap: balance;
}
.lx-h1-lines { max-width: none; }
.lx-line { display: block; overflow: hidden; padding: 0.08em 0 0.16em; margin: -0.08em 0 -0.16em; }
.lx-line-in { display: block; }
.lx-hero-sub { max-width: 48ch; font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.65; margin: 0 0 1.9rem; color: rgba(255,255,255,0.92); }
.lx-hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.lx-trust {
	position: relative; z-index: 2;
	list-style: none;
	display: flex; flex-wrap: wrap;
	gap: 0.35rem 1.6rem;
	margin: 2.2rem auto 0;
	padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem) 1.3rem;
	max-width: 1200px;
	width: 100%;
	box-sizing: border-box;
	border-top: 1px solid rgba(255,255,255,0.22);
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
}
.lx-trust li::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--scx-gold, #C6A45C); margin-right: 0.65rem; vertical-align: 2px; }

/* Chart coordinates — Santorini, set like a margin note on a chart */
.lx-coords {
	position: absolute; z-index: 2;
	right: clamp(1.4rem, 3vw, 2.4rem);
	top: 24%;
	margin: 0;
	writing-mode: vertical-rl;
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.lx-coords::after {
	content: '';
	display: block;
	width: 1px; height: 54px;
	margin: 0.9rem auto 0;
	background: linear-gradient(to bottom, rgba(198, 164, 92, 0.7), transparent);
}
/* Scroll cue — a sounding line with a travelling weight */
.lx-scrollcue {
	position: absolute; z-index: 2;
	right: clamp(1.6rem, 3.2vw, 2.6rem);
	bottom: 7rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	opacity: 1;
	transition: opacity 500ms var(--scx-ease, ease);
}
body.lx-scrolled .lx-scrollcue { opacity: 0; }
.lx-scrollcue-label {
	writing-mode: vertical-rl;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.lx-scrollcue-line {
	position: relative;
	width: 1px; height: 72px;
	background: rgba(255, 255, 255, 0.25);
	overflow: hidden;
}
.lx-scrollcue-line::after {
	content: '';
	position: absolute; left: 0; top: 0;
	width: 1px; height: 46%;
	background: var(--scx-gold, #C6A45C);
	transform: translateY(-110%);
	animation: lx-cue 2.7s cubic-bezier(0.6, 0.05, 0.3, 0.95) 1.8s infinite;
}
@keyframes lx-cue {
	0% { transform: translateY(-110%); }
	60%, 100% { transform: translateY(240%); }
}
@media (max-width: 1000px) { .lx-scrollcue, .lx-coords { display: none; } }

/* Hero entrance — one orchestrated sequence (CSS only; no JS dependency) */
@media (prefers-reduced-motion: no-preference) {
	.lx-hero-copy .lx-eyebrow { opacity: 0; animation: lx-fade-up 0.9s var(--scx-out) 0.12s forwards; }
	.lx-line-in { transform: translateY(116%); animation: lx-line-up 1.05s var(--scx-out) forwards; }
	.lx-line:nth-child(1) .lx-line-in { animation-delay: 0.26s; }
	.lx-line:nth-child(2) .lx-line-in { animation-delay: 0.38s; }
	.lx-line:nth-child(3) .lx-line-in { animation-delay: 0.5s; }
	.lx-hero-copy h1:not(.lx-h1-lines) { opacity: 0; animation: lx-fade-up 1s var(--scx-out) 0.28s forwards; }
	.lx-hero-sub { opacity: 0; animation: lx-fade-up 0.95s var(--scx-out) 0.55s forwards; }
	.lx-hero .lx-hero-actions { opacity: 0; animation: lx-fade-up 0.95s var(--scx-out) 0.72s forwards; }
	.lx-hero .lx-trust { opacity: 0; animation: lx-fade 0.9s var(--scx-ease, ease) 0.95s forwards; }
	.lx-hero .lx-trust li { opacity: 0; animation: lx-fade-up 0.85s var(--scx-out) forwards; }
	.lx-hero .lx-trust li:nth-child(1) { animation-delay: 1.02s; }
	.lx-hero .lx-trust li:nth-child(2) { animation-delay: 1.12s; }
	.lx-hero .lx-trust li:nth-child(3) { animation-delay: 1.22s; }
	.lx-hero .lx-trust li:nth-child(4) { animation-delay: 1.32s; }
	.lx-coords { opacity: 0; animation: lx-fade 1.2s var(--scx-ease, ease) 1.3s forwards; }
	.lx-scrollcue { animation: lx-fade 1.2s var(--scx-ease, ease) 1.5s backwards; }
	/* the hero accent word: slow foil shimmer */
	.lx-hero-copy h1 em { animation: lx-foil 7s ease-in-out 1.6s infinite alternate; }
}
@keyframes lx-fade-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lx-line-up { to { transform: translateY(0); } }
@keyframes lx-foil { from { background-position: 10% 50%; } to { background-position: 90% 50%; } }

/* Scroll-driven parallax (progressive; Chromium). The img keeps its ken-burns
   drift; the container drifts down more slowly than the scroll. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.lx-hero-media {
			inset: -14% 0 0 0; height: auto;
			animation: lx-par linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}
		.lx-parallax {
			animation: lx-par-sm linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}
@keyframes lx-par { from { transform: translateY(0); } to { transform: translateY(11%); } }
@keyframes lx-par-sm { from { transform: translateY(3.5%); } to { transform: translateY(-3.5%); } }

/* ---------- Bands ---------- */
.lx-band { padding: clamp(4.5rem, 10vw, 8.5rem) 0; }
/* --lx-band-bg lets decorations (manifest numerals) mask lines with the
   exact band color no matter which band hosts them. */
.lx-band-sand { --lx-band-bg: var(--scx-sand, #F6F1E7); background: var(--lx-band-bg); }
.lx-band-white { --lx-band-bg: var(--scx-warm-white, #FBF9F4); background: var(--lx-band-bg); }
.lx-band-navy { --lx-band-bg: var(--scx-navy, #0B1F3A); background: var(--lx-band-bg); color: rgba(255,255,255,0.88); }
.lx-band-deep { --lx-band-bg: var(--scx-navy-deep, #071528); background: var(--lx-band-bg); color: rgba(255,255,255,0.88); }
/* Grain utility for dark bands — texture kills the flat-screen look */
.lx-grain { position: relative; }
.lx-grain::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--scx-grain);
	pointer-events: none;
	z-index: 0;
}
.lx-grain > * { position: relative; z-index: 1; }

/* ---------- Intro ---------- */
.lx-intro { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lx-intro-lede .lx-display { font-size: clamp(2.4rem, 5.2vw, 4.4rem); margin: 0; }
.lx-intro-body p:first-child { margin-top: 0.4rem; }
.lx-fine { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--scx-muted, #5C6B7A); border-top: 1px solid rgba(11,31,58,0.15); padding-top: 1.1rem; margin-top: 1.6rem; }
@media (max-width: 860px) { .lx-intro { grid-template-columns: 1fr; } }

/* ---------- Route (signature: the living chart) ---------- */
.lx-route-band { padding-bottom: clamp(4.5rem, 9vw, 8rem); }
.lx-route-note { max-width: 52ch; margin: 0 0 3rem; color: rgba(255,255,255,0.72); }
.lx-route {
	--lx-gap: clamp(1.2rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	display: flex;
	gap: var(--lx-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 2.2rem clamp(1.25rem, calc((100vw - 1200px) / 2 + 2.5rem), 50vw) 1rem;
	scroll-padding-left: clamp(1.25rem, calc((100vw - 1200px) / 2 + 2.5rem), 50vw);
	position: relative;
	scrollbar-width: none;
	cursor: grab;
}
.lx-route::-webkit-scrollbar { display: none; }
.lx-route.lx-grabbing { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.lx-stop {
	flex: 0 0 clamp(240px, 26vw, 320px);
	scroll-snap-align: start;
	position: relative;
	padding-top: 2rem;
}
.lx-stop::before {
	/* waypoint on the course line */
	content: '';
	position: absolute; top: 0; left: 2px;
	width: 13px; height: 13px;
	border-radius: 50%;
	background: var(--scx-navy, #0B1F3A);
	border: 2px solid var(--scx-gold, #C6A45C);
	box-sizing: border-box;
	z-index: 1;
}
.lx-stop::after {
	/* dashed course segment sailing to the next waypoint */
	content: '';
	position: absolute; top: 5.5px; left: 22px;
	width: calc(100% + var(--lx-gap, 1.6rem) - 27px);
	height: 2px;
	background-image: repeating-linear-gradient(90deg, rgba(198, 164, 92, 0.6) 0 9px, transparent 9px 17px);
	transform-origin: left center;
}
.lx-stop:last-child::after { width: calc(100% - 27px); opacity: 0.45; }
.lx-stop figure { overflow: hidden; }
.lx-stop img { height: 190px; width: 100%; object-fit: cover; }
.lx-stop:hover img, .lx-stop:focus-within img { transform: scale(1.06); }
.lx-stop-k { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--scx-gold, #C6A45C); margin: 1.1rem 0 0.2rem; }
.lx-stop-k::before {
	/* waypoint index — the stops are a real sequence, so number them
	   (empty alt keeps it out of the accessible name) */
	content: 'Wpt ' counter(lx-stop, decimal-leading-zero) ' \00B7  ' / '';
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.18em;
}
.lx-route { counter-reset: lx-stop; }
.lx-stop { counter-increment: lx-stop; }
.lx-stop h3 { font-family: var(--scx-serif, serif); font-size: 1.5rem; font-weight: 600; margin: 0 0 0.4rem; color: #fff; }
.lx-stop h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(198,164,92,0.6); transition: color 240ms var(--scx-ease, ease), border-color 240ms var(--scx-ease, ease); }
.lx-stop h3 a:hover { color: var(--scx-gold-hi, #E9D3A0); border-bottom-color: var(--scx-gold-hi, #E9D3A0); }
.lx-stop p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.72); }

/* Course progress — a chart ruler under the route */
.lx-route-scale {
	position: relative;
	height: 2px;
	margin-top: 2.4rem;
	background: rgba(255, 255, 255, 0.14);
}
.lx-route-scale i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--scx-gold-deep, #A9853D), var(--scx-gold, #C6A45C));
	transform: scaleX(0.02);
	transform-origin: left center;
	transition: transform 200ms linear;
}
.lx-route-scale::before, .lx-route-scale::after {
	content: '';
	position: absolute; top: -4px;
	width: 1px; height: 10px;
	background: rgba(198, 164, 92, 0.7);
}
.lx-route-scale::before { left: 0; }
.lx-route-scale::after { right: 0; }
.lx-route-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 0.7rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/* The drag pill that sails with the pointer over the chart (desktop) */
.lx-drag-pill {
	position: fixed; top: 0; left: 0; z-index: 60;
	pointer-events: none;
	will-change: transform;
}
.lx-drag-pill span {
	display: grid;
	place-items: center;
	width: 72px; height: 72px;
	border-radius: 50%;
	border: 1px solid rgba(198, 164, 92, 0.85);
	background: rgba(7, 21, 40, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	text-indent: 0.26em;
	transform: scale(0.3);
	opacity: 0;
	transition: transform 340ms var(--scx-out), opacity 260ms var(--scx-ease, ease);
}
.lx-drag-pill.lx-pill-on span { transform: scale(1); opacity: 1; }
.lx-drag-pill.lx-pill-grab span { transform: scale(0.82); background: rgba(7, 21, 40, 0.75); }
.lx-route-band.lx-cursor-off .lx-route { cursor: none; }
@media (hover: none), (pointer: coarse) { .lx-drag-pill { display: none; } }

/* ---------- Tours ---------- */
.lx-tours {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.2rem, 2.5vw, 2rem);
	margin-top: 2.6rem;
}
.lx-tour {
	position: relative;
	text-decoration: none;
	background: #fff;
	border: 1px solid rgba(11,31,58,0.08);
	box-shadow: var(--scx-shadow-card);
	transition: box-shadow 450ms var(--scx-out), transform 450ms var(--scx-out), border-color 450ms var(--scx-ease, ease);
	display: flex;
	flex-direction: column;
}
.lx-tour::after {
	/* inner gold frame, revealed on hover — the framed-photo motif */
	content: '';
	position: absolute; inset: 9px;
	border: 1px solid rgba(198, 164, 92, 0);
	pointer-events: none;
	transition: border-color 450ms var(--scx-ease, ease);
}
.lx-tour:hover, .lx-tour:focus-visible { transform: translateY(-6px); box-shadow: var(--scx-shadow-lift); border-color: rgba(198, 164, 92, 0.35); }
.lx-tour:hover::after, .lx-tour:focus-visible::after { border-color: rgba(198, 164, 92, 0.5); }
.lx-tour figure { overflow: hidden; }
.lx-tour img { aspect-ratio: 3 / 2.15; height: auto; width: 100%; object-fit: cover; }
.lx-tour:hover img { transform: scale(1.06); filter: saturate(1.08) contrast(1.02); }
.lx-tour-body { padding: 1.75rem 1.85rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.lx-tour h3 { font-family: var(--scx-serif, serif); font-size: 1.55rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--scx-navy, #0B1F3A); }
.lx-tour p { margin: 0 0 1rem; font-size: 0.95rem; color: var(--scx-muted, #5C6B7A); }
.lx-tour-price {
	/* price whispers: serif figures at reading size, not a price tag */
	position: relative;
	margin-top: auto !important;
	font-family: var(--scx-serif, serif);
	font-size: 1.42rem;
	font-weight: 500;
	color: rgba(24, 34, 48, 0.92) !important;
	border-top: 1px solid rgba(11,31,58,0.1);
	padding-top: 1rem;
}
.lx-tour-price span { font-family: var(--scx-sans, sans-serif); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--scx-muted, #5C6B7A); }
.lx-tour-go {
	position: absolute;
	right: 0; bottom: 0.45em;
	font-family: var(--scx-sans, sans-serif);
	font-size: 0.68rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: var(--scx-gold-deep, #A9853D) !important;
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 380ms var(--scx-ease, ease), transform 420ms var(--scx-out);
}
.lx-tour:hover .lx-tour-go, .lx-tour:focus-visible .lx-tour-go { opacity: 1; transform: translateX(0); }
.lx-tours-more { margin-top: 2.4rem; max-width: 68ch; color: var(--scx-muted, #5C6B7A); }
.lx-tours-more a { color: var(--scx-navy, #0B1F3A); text-decoration: underline; text-decoration-color: var(--scx-gold, #C6A45C); text-underline-offset: 3px; transition: color 200ms var(--scx-ease, ease); }
.lx-tours-more a:hover { color: var(--scx-gold-deep, #A9853D); }
@media (max-width: 900px) { .lx-tours { grid-template-columns: 1fr; } .lx-tour img { aspect-ratio: 3 / 1.7; } }

/* ---------- Included ---------- */
.lx-included { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lx-included-head p { max-width: 34ch; }
.lx-included-head .lx-btn { margin-top: 1rem; }
@media (min-width: 861px) {
	/* The heading keeps you company while the manifest scrolls — editorial calm */
	.lx-included-head { position: sticky; top: 7rem; }
}
.lx-included-list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.9rem 2.4rem;
	counter-reset: lx-inc;
}
.lx-included-list li { position: relative; padding-top: 1rem; counter-increment: lx-inc; }
.lx-included-list li::after {
	/* manifest numeral, sitting on the gold rule like a chart annotation
	   (empty alt keeps it decorative) */
	content: 'No. ' counter(lx-inc, decimal-leading-zero) / '';
	position: absolute; top: -0.5em; right: 0;
	padding-left: 0.7rem;
	background: var(--lx-band-bg, var(--scx-sand, #F6F1E7));
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--scx-gold-deep, #A9853D);
}
/* Contact details are cards, not a manifest — no numerals there */
.lx-clist li::after { content: none; }
.lx-included-list li::before {
	/* gold rule that draws itself on reveal */
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, var(--scx-gold, #C6A45C) 0%, rgba(198, 164, 92, 0.25) 100%);
	transform-origin: left center;
}
.lx-included-list strong { display: block; font-family: var(--scx-serif, serif); font-size: 1.22rem; font-weight: 600; color: var(--scx-navy, #0B1F3A); margin-bottom: 0.2rem; }
.lx-included-list span { font-size: 0.92rem; color: var(--scx-muted, #5C6B7A); }
@media (max-width: 860px) {
	.lx-included { grid-template-columns: 1fr; }
	.lx-included-list { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.lx-faq { max-width: 820px; counter-reset: lx-faq; }
.lx-faq-item { border-bottom: 1px solid rgba(11,31,58,0.14); counter-increment: lx-faq; transition: border-color 300ms var(--scx-ease, ease); }
.lx-faq-item[open] { border-bottom-color: rgba(198, 164, 92, 0.55); }
.lx-faq-item summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: 1.15rem 2.4rem 1.15rem 0;
	font-family: var(--scx-serif, serif);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--scx-navy, #0B1F3A);
	transition: color 240ms var(--scx-ease, ease);
}
.lx-faq-item summary::before {
	/* question index — quiet gold ledger numeral (decorative) */
	content: counter(lx-faq, decimal-leading-zero) / '';
	margin-right: 1rem;
	font-family: var(--scx-sans, sans-serif);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--scx-gold-deep, #A9853D);
	vertical-align: 0.45em;
}
/* Smooth open/close where the platform can animate to auto height */
@supports (interpolate-size: allow-keywords) {
	body.scx-luxe { interpolate-size: allow-keywords; }
	.lx-faq-item::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 420ms var(--scx-out), content-visibility 420ms allow-discrete;
	}
	.lx-faq-item[open]::details-content { block-size: auto; }
}
.lx-faq-item summary:hover { color: var(--scx-gold-deep, #A9853D); }
.lx-faq-item summary::-webkit-details-marker { display: none; }
.lx-faq-item summary::after {
	content: '+';
	position: absolute; right: 0.2rem; top: 50%;
	transform: translateY(-50%);
	font-size: 1.6rem;
	color: var(--scx-gold, #C6A45C);
	transition: transform 320ms var(--scx-out);
}
.lx-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lx-faq-item p { margin: 0 0 1.2rem; max-width: 64ch; color: var(--scx-ink, #182230); }
@media (prefers-reduced-motion: no-preference) {
	.lx-faq-item[open] > *:not(summary) { animation: lx-fade-up-sm 400ms var(--scx-out); }
}
@keyframes lx-fade-up-sm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lx-faq-more { margin-top: 2rem; color: var(--scx-muted, #5C6B7A); }
.lx-faq-more a { color: var(--scx-navy, #0B1F3A); text-decoration: underline; text-decoration-color: var(--scx-gold, #C6A45C); text-underline-offset: 3px; }

/* ---------- Final CTA ---------- */
.lx-final-in { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.lx-final .lx-hero-actions { margin-top: 2rem; }
.lx-final-photo { border: 1px solid rgba(198,164,92,0.35); padding: 10px; background: rgba(198, 164, 92, 0.04); }
.lx-final-photo img { width: 100%; aspect-ratio: 675 / 440; object-fit: cover; }
@media (max-width: 860px) { .lx-final-in { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.lx-footer {
	position: relative;
	overflow: hidden;
	background: var(--scx-navy-deep, #071528);
	color: rgba(255,255,255,0.8);
	padding: 4rem 0 0;
	font-size: 0.95rem;
}
.lx-footer::before {
	/* ghost watermark — the island's name, set like an engraving */
	content: 'Santorini' / '';
	position: absolute;
	right: -0.04em; top: -0.14em;
	font-family: var(--scx-serif, serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(6rem, 16vw, 14rem);
	line-height: 1;
	letter-spacing: 0.01em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(198, 164, 92, 0.14);
	pointer-events: none;
	user-select: none;
}
.lx-footer::after {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(198, 164, 92, 0.45) 30%, rgba(198, 164, 92, 0.45) 70%, transparent);
}
.lx-footer a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color 200ms var(--scx-ease, ease); }
.lx-footer a:hover { color: var(--scx-gold, #C6A45C); }
.lx-footer-in { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; }
.lx-brand-foot { font-size: 1.4rem; margin: 0 0 1rem; color: #fff; }
.lx-footer nav { display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; align-items: flex-start; }
.lx-footer nav a { position: relative; }
.lx-footer nav a::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
	background: var(--scx-gold, #C6A45C);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms var(--scx-out);
}
.lx-footer nav a:hover::after, .lx-footer nav a:focus-visible::after { transform: scaleX(1); }
.lx-legal { position: relative; text-align: center; padding: 2.5rem 1rem 1.6rem; margin: 3rem 0 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; color: rgba(255,255,255,0.5); }

/* ---------- Bespoke pages (about / services / contact) ---------- */
.lx-about-photo { border: 1px solid rgba(198,164,92,0.35); padding: 10px; }
.lx-about-photo img { width: 100%; display: block; }
.lx-values { max-width: 1000px; }
.lx-contact-cards span a { color: var(--scx-navy, #0B1F3A); text-decoration: underline; text-decoration-color: var(--scx-gold, #C6A45C); text-underline-offset: 3px; }

/* Contact page: details column + framed form card */
.lx-cgrid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(320px, 6fr);
	gap: clamp(2.4rem, 5vw, 5rem);
	align-items: start;
	margin-top: 2.6rem;
}
.lx-clist { grid-template-columns: 1fr !important; max-width: 44ch; gap: 1.5rem; }
.lx-clist strong { font-size: 1.35rem; }
.lx-clist span { font-size: 0.98rem; line-height: 1.65; }
.lx-contact-note { color: var(--scx-muted, #5C6B7A); max-width: 52ch; margin: 0; }
/* The global gold-button treatment for booking links reads as a highlighter
   inside running text — keep the list's booking link a quiet text link. */
.lx-contact-cards span a[href*='greecesailing.travelotopos.com'] {
	background: transparent !important;
	border: 0 !important;
	color: var(--scx-navy, #0B1F3A) !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline;
	text-decoration-color: var(--scx-gold, #C6A45C);
	text-underline-offset: 3px;
	padding: 0 !important;
}
.lx-contact-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }
.lx-form-card {
	position: relative;
	background: #fff;
	border: 1px solid rgba(11, 31, 58, 0.1);
	box-shadow: 0 1px 3px rgba(11, 31, 58, 0.06), 0 24px 60px -18px rgba(11, 31, 58, 0.28);
	padding: clamp(1.6rem, 3vw, 2.4rem);
}
.lx-form-card::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--scx-gold-deep, #A9853D), var(--scx-gold-hi, #E9D3A0) 50%, var(--scx-gold-deep, #A9853D));
}
.lx-form-card .lx-fform { background: transparent; padding: 0; }
.lx-form-kicker { margin-bottom: 0.4rem; }
.lx-map-band .lx-map {
	margin-top: 2.6rem;
	box-shadow: 0 1px 3px rgba(11, 31, 58, 0.05), 0 24px 60px -24px rgba(11, 31, 58, 0.3);
}
@media (max-width: 900px) { .lx-cgrid { grid-template-columns: 1fr; } }
.lx-menu {
	list-style: none;
	margin: 0; padding: 0;
	columns: 2;
	gap: 2.2rem;
}
.lx-menu li {
	font-family: var(--scx-serif, serif);
	font-size: 1.25rem;
	color: #fff;
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(198,164,92,0.3);
	break-inside: avoid;
}
.lx-map { max-width: 860px; margin: 2rem auto 0; border: 1px solid rgba(198,164,92,0.35); padding: 10px; background: #fff; }
.lx-map img { width: 100%; display: block; aspect-ratio: 960 / 1230; object-fit: cover; }
.lx-fform .wpcf7 input[type='text'], .lx-fform .wpcf7 input[type='email'], .lx-fform .wpcf7 input[type='tel'], .lx-fform .wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(11,31,58,0.25);
	padding: 0.8rem 0.9rem;
	margin: 0.3rem 0 1rem;
	font-family: var(--scx-sans, sans-serif);
	background: #fff;
}
@media (max-width: 700px) { .lx-menu { columns: 1; } }

/* ---------- Generic pages / blog ---------- */
.lx-pageband { padding: clamp(7.5rem, 16vh, 10rem) 0 clamp(2.5rem, 5vw, 4rem); }
@media (prefers-reduced-motion: no-preference) {
	.lx-pageband .lx-shell > * { opacity: 0; animation: lx-fade-up 0.9s var(--scx-out) forwards; }
	.lx-pageband .lx-shell > :nth-child(1) { animation-delay: 0.12s; }
	.lx-pageband .lx-shell > :nth-child(2) { animation-delay: 0.24s; }
	.lx-pageband .lx-shell > :nth-child(3) { animation-delay: 0.36s; }
	.lx-pageband .lx-shell > :nth-child(n+4) { animation-delay: 0.46s; }
}
.lx-pagebody-plain {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.lx-pagebody-plain > * { max-width: 76ch; }
.lx-pagebody-plain h2, .lx-pagebody-plain h3 {
	font-family: var(--scx-serif, serif);
	color: var(--scx-navy, #0B1F3A);
}
.lx-pagebody-plain a { color: var(--scx-navy, #0B1F3A); text-decoration: underline; text-decoration-color: var(--scx-gold, #C6A45C); text-underline-offset: 3px; }
.lx-pagebody-el { background: var(--scx-warm-white, #FBF9F4); }
.lx-postband .lx-shell { display: flex; justify-content: center; }
.lx-postbody { max-width: 76ch; }
.lx-postbody h2 { font-family: var(--scx-serif, serif); font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--scx-navy, #0B1F3A); margin: 2.2em 0 0.5em; }
.lx-postgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.4rem; }
.lx-postgrid .lx-tour img { height: 200px; }
.lx-pagination { margin-top: 2.5rem; text-align: center; }
.lx-pagination .page-numbers { display: inline-block; padding: 0.5rem 0.95rem; margin: 0 0.15rem; border: 1px solid rgba(11,31,58,0.15); border-radius: 999px; color: var(--scx-navy, #0B1F3A); text-decoration: none; transition: background-color 200ms var(--scx-ease, ease), color 200ms var(--scx-ease, ease); }
.lx-pagination .page-numbers:hover { border-color: var(--scx-gold, #C6A45C); }
.lx-pagination .page-numbers.current { background: var(--scx-navy, #0B1F3A); color: #fff; }
.lx-pagecta { border-top: 1px solid rgba(11,31,58,0.06); }
@media (max-width: 960px) { .lx-postgrid { grid-template-columns: 1fr; } }

/* ---------- FAQ page ---------- */
.lx-faq-hero { padding-top: clamp(7.5rem, 16vh, 10rem); }
.lx-faq-hero .lx-route-note { margin-bottom: 0; }
.lx-goldlink { color: var(--scx-gold, #C6A45C); }
.lx-intro-body .lx-hero-actions { margin-top: 1.6rem; }
.lx-intro-body a { color: var(--scx-navy, #0B1F3A); text-decoration: underline; text-decoration-color: var(--scx-gold, #C6A45C); text-underline-offset: 3px; }

/* ---------- Tour pages ---------- */
.lx-thero { min-height: 78svh; }
.lx-thero h1 { font-size: clamp(2.2rem, 4.8vw, 4.1rem); max-width: 20ch; }

/* ---------- Inner-page hero (about / services / contact / faq / blog / generic) ---------- */
.lx-ihero { min-height: clamp(430px, 62svh, 680px); }
.lx-ihero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); max-width: 22ch; }
.lx-ihero .lx-hero-copy { padding-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.lx-ihero .lx-hero-note {
	max-width: 56ch;
	margin: 0.2rem 0 0;
	font-size: clamp(0.98rem, 1.3vw, 1.1rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
}
.lx-ihero .lx-hero-note a { color: var(--scx-gold, #C6A45C); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
	.lx-hero-copy .lx-hero-note { opacity: 0; animation: lx-fade-up 0.95s var(--scx-out) 0.5s forwards; }
}

.lx-tgrid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.lx-tcontent { max-width: 72ch; }
.lx-tcontent h2 {
	font-family: var(--scx-serif, serif);
	font-weight: 600;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	line-height: 1.12;
	color: var(--scx-navy, #0B1F3A);
	margin: 2.4em 0 0.6em;
}
.lx-tcontent > h2:first-child, .lx-tcontent > p:first-child + h2 { margin-top: 1.2em; }
.lx-tcontent p, .lx-tcontent li { line-height: 1.75; color: var(--scx-ink, #182230); }
.lx-tcontent ul { padding-left: 1.2rem; }
.lx-tcontent li { margin-bottom: 0.5rem; }
.lx-tcontent a { color: var(--scx-navy, #0B1F3A); text-decoration: underline; text-decoration-color: var(--scx-gold, #C6A45C); text-underline-offset: 3px; }
.lx-tcontent a:hover { color: var(--scx-gold-deep, #A9853D); }
/* facts strip + FAQ inherit design.css styles; refine inside luxe */
.lx-tcontent .scx-facts { margin-top: 0.4rem; }
.lx-tcontent .scx-faq > h2 { margin-top: 1.4em; }
.lx-tcontent .scx-cta-close .button {
	display: inline-block;
	border-radius: 999px;
	background: var(--scx-gold, #C6A45C) !important;
	color: var(--scx-navy-deep, #071528) !important;
	padding: 0.95rem 1.9rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.lx-tside { position: sticky; top: 92px; }
.lx-tcard {
	position: relative;
	background: #fff;
	border: 1px solid rgba(11,31,58,0.1);
	box-shadow: 0 1px 3px rgba(11, 31, 58, 0.06), 0 24px 60px -18px rgba(11, 31, 58, 0.28);
	padding: 2rem 1.8rem 1.6rem;
}
.lx-tcard::before {
	/* gold leader tape across the top of the booking card */
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--scx-gold-deep, #A9853D), var(--scx-gold-hi, #E9D3A0) 50%, var(--scx-gold-deep, #A9853D));
}
.lx-tcard-price {
	font-family: var(--scx-serif, serif);
	font-size: 1.85rem;
	font-weight: 500;
	color: var(--scx-navy, #0B1F3A);
	margin: 0 0 1.2rem;
	line-height: 1;
}
.lx-tcard-price span {
	font-family: var(--scx-sans, sans-serif);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--scx-muted, #5C6B7A);
}
.lx-tcard-facts { margin: 0 0 1.4rem; }
.lx-tcard-facts div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-top: 1px solid rgba(11,31,58,0.09);
	font-size: 0.9rem;
}
.lx-tcard-facts dt { color: var(--scx-muted, #5C6B7A); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.12em; font-weight: 600; padding-top: 0.2rem; }
.lx-tcard-facts dd { margin: 0; text-align: right; color: var(--scx-ink, #182230); }
.lx-tcard-cta { display: block !important; text-align: center; width: 100%; box-sizing: border-box; }
.lx-tcard-alt { text-align: center; margin: 0.9rem 0 0; font-size: 0.92rem; color: var(--scx-muted, #5C6B7A); }
.lx-tcard-alt a { color: var(--scx-navy, #0B1F3A); text-decoration: underline; text-decoration-color: var(--scx-gold, #C6A45C); text-underline-offset: 3px; }
.lx-tcard-note { margin: 1rem 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--scx-muted, #5C6B7A); }

.lx-gband { padding: clamp(3rem, 6vw, 5rem) 0; }
.lx-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.lx-gallery figure { overflow: hidden; }
.lx-gallery img { width: 100%; height: 260px; object-fit: cover; }
.lx-gallery figure:hover img { transform: scale(1.06); filter: saturate(1.08); }

.lx-fgrid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lx-fnote { color: rgba(255,255,255,0.72); max-width: 40ch; }
.lx-fnote a, .lx-route-note a {
	color: var(--scx-gold, #C6A45C);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lx-fform { background: var(--scx-warm-white, #FBF9F4); padding: clamp(1.4rem, 3vw, 2.4rem); }
.lx-fform .mf-input, .lx-fform input, .lx-fform textarea, .lx-fform select {
	font-family: var(--scx-sans, sans-serif) !important;
	border-radius: 0 !important;
	transition: border-color 200ms var(--scx-ease, ease), box-shadow 200ms var(--scx-ease, ease);
}
.lx-fform input:focus, .lx-fform textarea:focus, .lx-fform select:focus {
	outline: none;
	border-color: var(--scx-gold, #C6A45C) !important;
	box-shadow: 0 0 0 3px rgba(198, 164, 92, 0.2) !important;
}
.lx-fform, .lx-fform p, .lx-fform label,
.lx-fform .wpcf7-list-item-label, .lx-fform .wpcf7-acceptance {
	color: var(--scx-ink, #182230) !important;
}
.lx-fform button, .lx-fform [type='submit'] {
	background: var(--scx-navy, #0B1F3A) !important;
	color: #fff !important;
	border-radius: 999px !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	transition: background-color 220ms var(--scx-ease, ease), box-shadow 260ms var(--scx-out);
}
.lx-fform button:hover, .lx-fform [type='submit']:hover {
	background: var(--scx-navy-deep, #071528) !important;
	box-shadow: 0 12px 26px -10px rgba(7, 21, 40, 0.5);
}

.lx-tours-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 960px) {
	.lx-tgrid { grid-template-columns: 1fr; }
	.lx-tside { position: static; }
	.lx-fgrid { grid-template-columns: 1fr; }
	.lx-gallery { grid-template-columns: 1fr; }
	.lx-gallery img { height: 220px; }
	.lx-tours-2 { grid-template-columns: 1fr; }
}

/* ---------- Reveal system ----------
   Hidden states live ONLY on .lx-anim:not(.lx-in): once .lx-in lands, styles
   return to the element's natural values (the transition animates the way
   there), and the script drops both classes shortly after — so reveals never
   fight hover transforms. */
.lx-anim {
	transition: opacity 700ms var(--scx-ease, ease), transform 900ms var(--scx-out);
}
.lx-anim:not(.lx-in) { opacity: 0; transform: translateY(28px); }
/* Eyebrow rules draw themselves as their block reveals */
.lx-eyebrow.lx-anim::after { transition: transform 900ms var(--scx-out) 250ms; }
.lx-eyebrow.lx-anim:not(.lx-in)::after { transform: scaleX(0); }

/* Stagger: the container carries .lx-reveal.lx-stagger; children cascade. */
.lx-stagger > :nth-child(1) { --lxi: 0; }
.lx-stagger > :nth-child(2) { --lxi: 1; }
.lx-stagger > :nth-child(3) { --lxi: 2; }
.lx-stagger > :nth-child(4) { --lxi: 3; }
.lx-stagger > :nth-child(5) { --lxi: 4; }
.lx-stagger > :nth-child(6) { --lxi: 5; }
.lx-stagger > :nth-child(7) { --lxi: 6; }
.lx-stagger > :nth-child(n+8) { --lxi: 7; }
.lx-stagger.lx-anim { opacity: 1; transform: none; }
.lx-stagger.lx-anim > * {
	transition: opacity 700ms var(--scx-ease, ease), transform 900ms var(--scx-out);
	transition-delay: calc(var(--lxi, 0) * 95ms);
}
.lx-stagger.lx-anim:not(.lx-in) > * { opacity: 0; transform: translateY(30px); }
/* Photography: curtain reveal left→right, image settling from a slight zoom */
.lx-stagger.lx-anim > * figure, .lx-stagger.lx-anim > figure {
	transition: clip-path 1000ms var(--scx-out);
	transition-delay: calc(var(--lxi, 0) * 95ms);
}
.lx-stagger.lx-anim:not(.lx-in) > * figure, .lx-stagger.lx-anim:not(.lx-in) > figure { clip-path: inset(0 100% 0 0); }
.lx-stagger.lx-anim:not(.lx-in) > * figure img, .lx-stagger.lx-anim:not(.lx-in) > figure img { transform: scale(1.14); }
/* One transition rule for all hover-zoom imagery: slow, luxurious */
.lx-stop img, .lx-tour img, .lx-gallery img {
	transition: transform 1000ms var(--scx-out), filter 600ms var(--scx-ease, ease);
}
/* The course line draws waypoint-to-waypoint as the route reveals */
.lx-stagger.lx-anim > .lx-stop::after {
	transition: transform 1100ms var(--scx-out);
	transition-delay: calc(var(--lxi, 0) * 180ms + 150ms);
}
.lx-stagger.lx-anim:not(.lx-in) > .lx-stop::after { transform: scaleX(0); }
/* Waypoints ping like a sounding as the line reaches them */
.lx-stagger.lx-anim.lx-in > .lx-stop::before {
	animation: lx-ping 1.3s var(--scx-out) both;
	animation-delay: calc(var(--lxi, 0) * 180ms + 150ms);
}
@keyframes lx-ping {
	0% { box-shadow: 0 0 0 0 rgba(198, 164, 92, 0.5); background-color: var(--scx-gold, #C6A45C); }
	100% { box-shadow: 0 0 0 18px rgba(198, 164, 92, 0); background-color: var(--scx-navy, #0B1F3A); }
}
/* Included-list rules draw with the cascade */
.lx-stagger.lx-anim > li::before {
	transition: transform 1000ms var(--scx-out);
	transition-delay: calc(var(--lxi, 0) * 95ms + 200ms);
}
.lx-stagger.lx-anim:not(.lx-in) > li::before { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
	.lx-anim:not(.lx-in), .lx-stagger.lx-anim:not(.lx-in) > *, .lx-stagger.lx-anim:not(.lx-in) > * figure, .lx-stagger.lx-anim:not(.lx-in) > figure { opacity: 1; transform: none; transition: none; clip-path: none; }
	.lx-stagger.lx-anim:not(.lx-in) > * figure img, .lx-stagger.lx-anim:not(.lx-in) > figure img { transform: none; }
	.lx-stagger.lx-anim:not(.lx-in) > .lx-stop::after, .lx-stagger.lx-anim:not(.lx-in) > li::before { transform: none; }
	.lx-hero-media img { animation: none; }
	.lx-scrollcue { display: none; }
	.lx-drag-pill { display: none; }
	.scx-luxe *, .scx-luxe *::before, .scx-luxe *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
	}
}

/* Slider Revolution's font-measurement element adds phantom height below
   the footer on pages with no slider. */
body.scx-luxe sr7-fonttest-wrap,
body.scx-luxe .sr7-fonttest-wrap { display: none !important; }

/* The theme's mobile book bar stays; give it room over the footer only. */
@media (max-width: 767px) {
	body.scx-luxe { padding-bottom: 64px; }
}

/* --- SEO-expansion additions (2026-08): comparison tables + in-content CTA --- */
.lx-compare { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
.lx-compare table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; }
.lx-compare th, .lx-compare td { text-align: left; padding: 0.65em 0.9em; border-bottom: 1px solid rgba(11, 31, 58, 0.14); vertical-align: top; }
.lx-compare thead th { font-family: var(--scx-serif, serif); font-size: 1.05rem; color: var(--scx-navy, #0B1F3A); border-bottom: 2px solid var(--scx-gold, #C6A45C); }
.lx-compare tbody td:first-child { font-weight: 600; color: var(--scx-navy, #0B1F3A); }
.lx-pagebody-plain .scx-faq, .lx-postbody .scx-faq { margin-top: 2.2em; }
.scx-cta-close { margin: 2.2em 0 0.6em; }

/* Content images inside new pages/posts */
.lx-cimg { margin: 1.8em 0; }
.lx-cimg img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* --- Full navigation (2026-08): desktop dropdowns + mobile panel ---
   2026-08 revision: dropdowns are rounded light-glass panels (modern, airy)
   in BOTH header states; the Discover button is a pill like its siblings. */
.lx-navgroup { position: relative; display: flex; align-items: center; }
.lx-navlabel {
	background: none; cursor: pointer;
	padding: 0.48rem 1rem;
	border: 1px solid transparent; border-radius: 999px;
	font-family: var(--scx-sans, sans-serif); font-size: 0.82rem; font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 10px rgba(7, 21, 40, 0.4);
	transition: color 240ms var(--scx-ease, ease), background-color 240ms var(--scx-ease, ease),
		border-color 240ms var(--scx-ease, ease), text-shadow 240ms var(--scx-ease, ease);
}
.lx-navlabel:hover, .lx-navgroup:hover > .lx-navlabel, .lx-navlabel:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(233, 211, 160, 0.5);
	color: #fff;
}
body.lx-scrolled .lx-navlabel { color: var(--scx-navy, #0B1F3A); text-shadow: none; }
body.lx-scrolled .lx-navlabel:hover, body.lx-scrolled .lx-navgroup:hover > .lx-navlabel,
body.lx-scrolled .lx-navlabel:focus-visible {
	background: rgba(11, 31, 58, 0.06);
	border-color: rgba(169, 133, 61, 0.5);
	color: var(--scx-navy, #0B1F3A);
}
.lx-drop {
	position: absolute; top: 100%; left: 50%;
	padding-top: 0.95rem; z-index: 70;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(10px);
	transition: opacity 240ms var(--scx-ease, ease), transform 320ms var(--scx-out), visibility 0s linear 260ms;
}
.lx-navgroup:hover .lx-drop, .lx-navgroup:focus-within .lx-drop {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}
.lx-drop-in {
	background: rgba(251, 249, 244, 0.92);
	backdrop-filter: blur(18px) saturate(1.5);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	border: 1px solid rgba(198, 164, 92, 0.38);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 30px 70px -18px rgba(7, 21, 40, 0.45);
	padding: 0.6rem 0.55rem; min-width: 262px;
}
.lx-drop-in a {
	display: block; padding: 0.5rem 1.05rem; white-space: nowrap;
	border-radius: 999px;
	font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--scx-navy, #0B1F3A) !important; border-bottom: 0 !important;
	transition: color 180ms var(--scx-ease, ease), background-color 180ms var(--scx-ease, ease), padding-left 240ms var(--scx-out);
}
.lx-drop-in a:hover, .lx-drop-in a:focus-visible { color: var(--scx-gold-deep, #A9853D) !important; background: rgba(198, 164, 92, 0.13); padding-left: 1.3rem; }
.lx-drop-in a.lx-drop-all { margin-top: 0.35rem; border-top: 1px solid rgba(11, 31, 58, 0.1) !important; border-radius: 0 0 14px 14px; color: var(--scx-gold-deep, #A9853D) !important; }
.lx-menu-toggle { display: none; }

@media (max-width: 900px) {
	.lx-menu-toggle {
		display: inline-flex; align-items: center; margin-left: auto;
		background: none; cursor: pointer; padding: 0.55rem 0.9rem;
		border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 999px;
		font-family: var(--scx-sans, sans-serif); font-size: 0.74rem; font-weight: 600;
		letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
		position: relative; z-index: 80;
		transition: border-color 200ms var(--scx-ease, ease), color 200ms var(--scx-ease, ease);
	}
	.lx-menu-toggle:hover { border-color: var(--scx-gold, #C6A45C); color: var(--scx-gold, #C6A45C); }
	body.lx-scrolled .lx-menu-toggle { border-color: rgba(11, 31, 58, 0.5); color: var(--scx-navy, #0B1F3A); }
	.lx-header-cta { margin-left: 0; }
	.lx-nav {
		position: fixed; inset: 0; z-index: 65; display: none;
		flex-direction: column; gap: 0.15rem; overflow-y: auto;
		background: var(--scx-navy-deep, #071528);
		padding: 5.6rem 1.6rem 7rem; margin: 0;
	}
	body.lx-nav-open .lx-nav { display: flex; }
	body.lx-nav-open { overflow: hidden; }
	body.lx-nav-open .lx-header { background: var(--scx-navy-deep, #071528); }
	/* The open panel is dark — pin its palette regardless of scroll state */
	body.lx-nav-open .lx-brand { color: #fff !important; text-shadow: none; }
	body.lx-nav-open .lx-brand em { color: var(--scx-gold, #C6A45C); }
	body.lx-nav-open .lx-menu-toggle { border-color: rgba(255, 255, 255, 0.65); color: #fff; }
	.lx-nav > a, .lx-navgroup > a, .lx-navlabel { border: 0; border-radius: 0; background: none; text-shadow: none; }
	.lx-nav > a {
		color: #fff !important; font-size: 1.02rem; letter-spacing: 0.1em;
		padding: 0.6rem 0; border-bottom: 0 !important;
	}
	body.lx-nav-open .lx-nav > a { color: #fff !important; background: none; }
	.lx-nav > a::after, .lx-navgroup > a::after { display: none; }
	.lx-navgroup > a {
		color: var(--scx-gold, #C6A45C) !important; font-size: 1.02rem; letter-spacing: 0.1em;
		padding: 0.6rem 0; border-bottom: 0 !important;
	}
	body.lx-nav-open .lx-navgroup > a { color: var(--scx-gold, #C6A45C) !important; background: none; }
	.lx-navgroup { display: block; position: static; }
	.lx-navgroup > a { display: block; }
	.lx-navlabel { display: block; color: var(--scx-gold, #C6A45C); font-size: 1.02rem; letter-spacing: 0.1em; padding: 0.6rem 0; cursor: default; }
	body.lx-nav-open .lx-navlabel, body.lx-scrolled .lx-navlabel { color: var(--scx-gold, #C6A45C); background: none; }
	.lx-drop { display: block; position: static; transform: none; padding-top: 0; opacity: 1; visibility: visible; }
	.lx-drop-in { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 0.4rem; min-width: 0; }
	.lx-drop-in a { color: rgba(255, 255, 255, 0.88) !important; border-radius: 0; background: none; padding: 0.42rem 0 0.42rem 1.1rem; font-size: 0.9rem; text-transform: none; letter-spacing: 0.03em; white-space: normal; }
	.lx-drop-in a:hover, .lx-drop-in a:focus-visible { color: var(--scx-gold, #C6A45C) !important; background: none; padding-left: 1.1rem; }
	.lx-drop-in a.lx-drop-all { border-top: 0 !important; color: var(--scx-gold, #C6A45C) !important; }
	/* Beat the desktop scrolled-ink rule (same specificity, later in file) */
	body.lx-nav-open .lx-nav .lx-drop-in a { color: rgba(255, 255, 255, 0.88) !important; }
	body.lx-nav-open .lx-nav .lx-drop-in a:hover, body.lx-nav-open .lx-nav .lx-drop-in a:focus-visible,
	body.lx-nav-open .lx-nav .lx-drop-in a.lx-drop-all { color: var(--scx-gold, #C6A45C) !important; }
}

/* Footer columns */
.lx-foot-h { margin: 0 0 0.7rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--scx-gold, #C6A45C); }
.lx-footer-in > div:first-child { max-width: 300px; }
@media (max-width: 700px) { .lx-footer-in { gap: 1.8rem; } .lx-footer-in > nav { min-width: 44%; } }

/* Small phones: the sticky bookbar owns the booking CTA; keep the header to brand + menu */
@media (max-width: 540px) {
	.lx-header-cta { display: none; }
	.lx-menu-toggle { margin-left: auto; }
}

/* Hour-by-hour itinerary timeline (semi-private tour pages) */
.lx-itin { margin: 2.4em 0 1.5em; }
.lx-itin-row { position: relative; border-left: 2px solid rgba(198, 164, 92, 0.45); padding: 0 0 1.35rem 1.25rem; margin: 0; }
.lx-itin-row:last-child { padding-bottom: 0.2rem; }
.lx-itin-row::before { content: ''; position: absolute; left: -6px; top: 0.4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--scx-gold, #C6A45C); }
.lx-itin-time { margin: 0 0 0.1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--scx-gold-deep, #A9853D); }
.lx-itin-row h3 { margin: 0 0 0.35rem; font-family: var(--scx-serif, serif); font-size: 1.3rem; color: var(--scx-navy, #0B1F3A); }
.lx-itin-row p:last-child { margin: 0; }

/* ==================================================================
   CINEMATIC LAYER (2026-08). All scrub effects are progressive:
   they live behind @supports (animation-timeline: view()) and
   prefers-reduced-motion: no-preference; every other browser gets the
   IntersectionObserver reveal base and a page that reads identically.
   ================================================================== */

/* Course-progress ruler: a gold hairline at the very top edge that fills
   as you sail down the page. Pure CSS scroll timeline; invisible (scaleX 0)
   where unsupported. */
.lx-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1000;
	pointer-events: none;
	background: linear-gradient(90deg, var(--scx-gold-deep, #A9853D), var(--scx-gold, #C6A45C) 60%, var(--scx-gold-hi, #E9D3A0));
	transform: scaleX(0);
	transform-origin: left center;
}
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.lx-progress {
			animation: lx-progressbar linear both;
			animation-timeline: scroll(root);
		}
	}
}
@keyframes lx-progressbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hero copy sails away as the hero exits — depth between copy and photograph */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.lx-hero-copy {
			animation: lx-hero-exit linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 80%;
		}
	}
}
@keyframes lx-hero-exit { to { opacity: 0; transform: translateY(-44px); } }

/* Photographic interlude — the caldera at golden hour, full bleed.
   The image drifts against the scroll (background layer only). */
.lx-break {
	position: relative;
	overflow: clip;
	min-height: clamp(320px, 64svh, 680px);
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 1.15rem;
	text-align: center;
	background: var(--scx-navy-deep, #071528);
}
.lx-break-media { position: absolute; inset: -14% 0; }
.lx-break-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}
.lx-break::after {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(90% 60% at 50% 55%, rgba(198, 164, 92, 0.1) 0%, rgba(198, 164, 92, 0) 65%),
		linear-gradient(to bottom, rgba(7, 21, 40, 0.5) 0%, rgba(7, 21, 40, 0.08) 30%, rgba(7, 21, 40, 0.1) 68%, rgba(7, 21, 40, 0.55) 100%);
	pointer-events: none;
}
.lx-break > .lx-break-coords { z-index: 1; }
.lx-break-coords {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 16px rgba(7, 21, 40, 0.6);
}
.lx-break-coords::before, .lx-break-coords::after {
	content: '';
	width: clamp(34px, 6vw, 76px); height: 1px;
	background: linear-gradient(90deg, transparent, rgba(198, 164, 92, 0.85));
}
.lx-break-coords::after { background: linear-gradient(90deg, rgba(198, 164, 92, 0.85), transparent); }
.lx-break-line {
	position: relative;
	margin: 0;
	font-family: var(--scx-serif, serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	line-height: 1.2;
	color: var(--scx-warm-white, #FBF9F4);
	text-shadow: 0 2px 24px rgba(7, 21, 40, 0.65);
	text-wrap: balance;
}
.lx-break-line em { font-style: inherit; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.lx-break-media {
			animation: lx-break-drift linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}
@keyframes lx-break-drift { from { transform: translateY(-4.5%); } to { transform: translateY(4.5%); } }
@media (prefers-reduced-motion: reduce) { .lx-break-media { inset: 0; } }

/* Final CTA: the accent line gets the hero's slow foil shimmer */
@media (prefers-reduced-motion: no-preference) {
	.lx-final .lx-display em { animation: lx-foil 8s ease-in-out infinite alternate; }
}

/* ============================================================
   2026-08 "expensive" pass — tour-page pacing + Woo utility skin
   ============================================================ */

/* ---------- Tour description pacing ---------- */

/* The opening paragraph reads as a lede: larger, navy, with a drop cap */
.lx-tcontent > h2:first-of-type + p {
	font-size: 1.14rem;
	line-height: 1.85;
	color: var(--scx-navy, #0B1F3A);
}
.lx-tcontent > h2:first-of-type + p::first-letter {
	font-family: var(--scx-serif, serif);
	font-size: 3.1em;
	line-height: 0.8;
	float: left;
	padding: 0.09em 0.14em 0 0;
	font-weight: 600;
	color: var(--scx-navy, #0B1F3A);
}

/* Wide framed photograph between chapters — the framed-photo motif */
.lx-tbreak {
	margin: 3rem 0 1.2rem;
	padding: 10px 10px 0;
	background: #fff;
	border: 1px solid rgba(11, 31, 58, 0.1);
	box-shadow: var(--scx-shadow-card, 0 1px 3px rgba(11,31,58,0.08));
}
.lx-tbreak img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.lx-tbreak figcaption {
	padding: 0.85rem 0.4rem 0.95rem;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--scx-muted, #5C6B7A);
}
.lx-tbreak figcaption::before {
	content: '';
	display: inline-block;
	width: 1.6rem;
	height: 1px;
	background: var(--scx-gold, #C6A45C);
	margin: 0 0.6rem 0.2em 0;
	vertical-align: middle;
}

/* What's Included re-set as a numbered manifest (homepage language) */
.lx-tcontent .lx-tinc {
	list-style: none;
	margin: 1.2rem 0 0.6rem;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 2.2rem;
	counter-reset: lx-tinc;
}
.lx-tcontent .lx-tinc li {
	position: relative;
	margin: 0;
	padding-top: 0.95rem;
	counter-increment: lx-tinc;
	font-size: 0.94rem;
	line-height: 1.65;
}
.lx-tcontent .lx-tinc li::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--scx-gold, #C6A45C) 0%, rgba(198, 164, 92, 0.25) 100%);
}
.lx-tcontent .lx-tinc li::after {
	content: 'No. ' counter(lx-tinc, decimal-leading-zero) / '';
	position: absolute;
	top: -0.5em; right: 0;
	padding-left: 0.7rem;
	background: var(--lx-band-bg, var(--scx-warm-white, #FBF9F4));
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--scx-gold-deep, #A9853D);
}
@media (max-width: 700px) {
	.lx-tcontent .lx-tinc { grid-template-columns: 1fr; }
}

/* ---------- WooCommerce utility pages (woo-luxe.php) ---------- */

.lx-whero { min-height: clamp(340px, 46svh, 500px); }

.lx-woo { font-size: 0.98rem; }
.lx-woo a:not(.lx-btn):not(.lx-tour):not(.wp-block-button__link):not(.wc-block-components-button) {
	color: var(--scx-navy, #0B1F3A);
	text-decoration: underline;
	text-decoration-color: var(--scx-gold, #C6A45C);
	text-underline-offset: 3px;
}
.lx-woo a:not(.lx-btn):not(.lx-tour):hover { color: var(--scx-gold-deep, #A9853D); }

/* Headings inside Woo blocks pick up the display serif */
.lx-woo h1, .lx-woo h2, .lx-woo h3,
.lx-woo .wp-block-heading,
.lx-woo .wc-block-cart__empty-cart__title {
	font-family: var(--scx-serif, serif);
	font-weight: 600;
	color: var(--scx-navy, #0B1F3A);
}

/* Empty-cart state: no cartoon icon; type carries it */
.lx-woo .with-empty-cart-icon::before { content: none !important; display: none !important; }
.lx-woo .wc-block-cart__empty-cart__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

/* Demo star ratings say nothing true yet — keep them off the utility pages */
.lx-woo .wc-block-grid__product-rating,
.lx-woo .star-rating { display: none !important; }

/* "New in store" product grid: framed-card language, quiet prices */
.lx-woo .wc-block-grid__products { gap: 1.6rem; }
.lx-woo .wc-block-grid__product {
	background: #fff;
	border: 1px solid rgba(11, 31, 58, 0.08);
	box-shadow: var(--scx-shadow-card, 0 1px 3px rgba(11,31,58,0.08));
	padding-bottom: 1.2rem;
}
.lx-woo .wc-block-grid__product-link { text-decoration: none !important; }
.lx-woo .wc-block-grid__product-title {
	font-family: var(--scx-serif, serif);
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--scx-navy, #0B1F3A) !important;
	padding: 0 0.9rem;
}
.lx-woo .wc-block-grid__product-price {
	font-family: var(--scx-serif, serif);
	font-size: 1.05rem;
	color: rgba(24, 34, 48, 0.85) !important;
}

/* Buttons: one pill language, gold for the primary act */
.lx-woo .button,
.lx-woo button[type='submit'],
.lx-woo .woocommerce-Button,
.lx-woo .wp-block-button__link,
.lx-woo .wc-block-components-button:not(.is-link) {
	border-radius: 999px !important;
	background: var(--scx-navy, #0B1F3A) !important;
	color: #fff !important;
	border: none !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem !important;
	font-weight: 600;
	padding: 0.85rem 1.7rem !important;
	transition: background-color 220ms var(--scx-ease, ease), box-shadow 260ms var(--scx-out, ease);
}
.lx-woo .button:hover,
.lx-woo button[type='submit']:hover,
.lx-woo .wp-block-button__link:hover,
.lx-woo .wc-block-components-button:not(.is-link):hover {
	background: var(--scx-navy-deep, #071528) !important;
	box-shadow: 0 12px 26px -10px rgba(7, 21, 40, 0.5);
	color: #fff !important;
}
.lx-woo .wc-block-cart__empty-cart__button,
.lx-woo .wc-block-components-checkout-place-order-button,
.lx-woo .checkout-button {
	background: var(--scx-gold, #C6A45C) !important;
	color: var(--scx-navy-deep, #071528) !important;
}
.lx-woo .wc-block-cart__empty-cart__button:hover,
.lx-woo .wc-block-components-checkout-place-order-button:hover,
.lx-woo .checkout-button:hover {
	background: var(--scx-gold-deep, #A9853D) !important;
	color: var(--scx-navy-deep, #071528) !important;
}

/* Forms (login, addresses, coupons): gold focus ring, no rounded fields */
.lx-woo .input-text,
.lx-woo input[type='text'],
.lx-woo input[type='email'],
.lx-woo input[type='tel'],
.lx-woo input[type='password'],
.lx-woo textarea,
.lx-woo select {
	border: 1px solid rgba(11, 31, 58, 0.22);
	border-radius: 0;
	background: #fff;
	padding: 0.65rem 0.8rem;
	font-family: var(--scx-sans, sans-serif);
	transition: border-color 200ms var(--scx-ease, ease), box-shadow 200ms var(--scx-ease, ease);
}
.lx-woo .input-text:focus,
.lx-woo input:focus,
.lx-woo textarea:focus,
.lx-woo select:focus {
	outline: none;
	border-color: var(--scx-gold, #C6A45C);
	box-shadow: 0 0 0 3px rgba(198, 164, 92, 0.2);
}
.lx-woo { accent-color: var(--scx-gold-deep, #A9853D); }

/* Notices: sand plate with a gold rule, never traffic-light blue */
.lx-woo .woocommerce-info,
.lx-woo .woocommerce-message,
.lx-woo .woocommerce-error,
.lx-woo .wc-block-components-notice-banner {
	background: var(--scx-sand, #F6F1E7) !important;
	border: none !important;
	border-left: 3px solid var(--scx-gold, #C6A45C) !important;
	color: var(--scx-ink, #182230) !important;
	border-radius: 0 !important;
}
.lx-woo .woocommerce-info::before,
.lx-woo .woocommerce-message::before { color: var(--scx-gold-deep, #A9853D); }

/* Tables (classic cart/account/wishlist): hairlines and micro-labels */
.lx-woo table,
.lx-woo table.shop_table {
	border: none;
	border-collapse: collapse;
	width: 100%;
}
.lx-woo table th {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scx-muted, #5C6B7A);
	border-bottom: 1px solid rgba(11, 31, 58, 0.16);
	padding: 0.7rem 0.6rem;
	text-align: left;
}
.lx-woo table td {
	border: none;
	border-bottom: 1px solid rgba(11, 31, 58, 0.08);
	padding: 0.8rem 0.6rem;
	color: var(--scx-ink, #182230);
}

/* My-account navigation as quiet pills */
.lx-woo .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.lx-woo .woocommerce-MyAccount-navigation li { margin: 0 0 0.35rem; }
.lx-woo .woocommerce-MyAccount-navigation a {
	display: inline-block;
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	text-decoration: none !important;
	color: var(--scx-ink, #182230);
	transition: background-color 220ms var(--scx-ease, ease), color 220ms var(--scx-ease, ease);
}
.lx-woo .woocommerce-MyAccount-navigation a:hover,
.lx-woo .woocommerce-MyAccount-navigation .is-active a {
	background: rgba(11, 31, 58, 0.06);
	color: var(--scx-navy, #0B1F3A);
}

/* Center the Woo block product grid inside the shell; gold separator dots */
.lx-woo .wc-block-grid__products { justify-content: center; margin: 0 auto; }
.lx-woo .wc-block-grid { text-align: center; }
.lx-woo hr.wp-block-separator {
	border: none;
	width: 2.4rem;
	height: 1px;
	background: var(--scx-gold, #C6A45C);
	margin: 1.4rem auto 2rem;
	opacity: 1;
}
.lx-woo hr.wp-block-separator.is-style-dots::before { content: none; }

/* Mobile menu vs. scrolled header: the frosted-glass backdrop-filter (and the
   hide-on-scroll transform) make the fixed header the containing block for
   the fixed nav panel, so once scrolled the "full-screen" menu clips to the
   header bar. The open panel paints the header solid navy anyway — drop the
   effects while it is open so the panel spans the true viewport. */
@media (max-width: 900px) {
	body.lx-nav-open .lx-header {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		transform: none !important;
	}
}