/* ============================================================================
   AELIA — design-system component layer (faithful port of the Claude Design
   hand-off `aelia.css`). Tokens alias the theme.json presets so the Site Editor
   palette/typography stay the single source of truth, and fonts are self-hosted
   (no Google Fonts @import — see theme.json @font-face + inc/performance.php).
   ========================================================================== */

/* Box-sizing reset scoped to the design layer. WordPress core does NOT apply a
   universal border-box reset, so the ported `.container` (which pairs a
   max-width with gutter padding) must use border-box or its padding inflates
   total width past the viewport — the source of the horizontal overflow. */
.aelia-page :where(*, *::before, *::after) {
	box-sizing: border-box;
}

/* Belt-and-braces: never allow the page to scroll horizontally from a stray
   full-bleed child. */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

:root {
	/* Colour — alias onto theme.json presets. */
	--aelia-limestone: var(--wp--preset--color--limestone, #f4efe6);
	--aelia-marble: var(--wp--preset--color--marble, #fbf9f5);
	--aelia-aegean: var(--wp--preset--color--aegean, #1f4e5f);
	--aelia-terracotta: var(--wp--preset--color--terracotta, #c2603c);
	--aelia-olive: var(--wp--preset--color--olive, #6e7651);
	--aelia-brass: var(--wp--preset--color--brass, #b08d4c);
	--aelia-ink: var(--wp--preset--color--ink, #2a2724);
	--aelia-ink-muted: var(--wp--preset--color--ink-muted, #6b635a);

	/* Derived / functional. */
	--aelia-aegean-deep: #163945;
	--aelia-terracotta-deep: #9e4a2c;
	--aelia-line: color-mix(in srgb, var(--aelia-brass) 38%, transparent);
	--aelia-line-ink: color-mix(in srgb, var(--aelia-ink) 14%, transparent);
	--aelia-line-strong: color-mix(
		in srgb,
		var(--aelia-brass) 65%,
		transparent
	);
	--aelia-marble-2: #f8f4ec;
	--aelia-aegean-tint: color-mix(
		in srgb,
		var(--aelia-aegean) 8%,
		var(--aelia-marble)
	);

	/* Type — alias display/text onto theme.json font families. */
	--font-display: var(
		--wp--preset--font-family--display,
		"Fraunces",
		georgia,
		serif
	);
	--font-text: var(
		--wp--preset--font-family--text,
		"Inter",
		system-ui,
		sans-serif
	);
	--fs-display: clamp(3.25rem, 2.2rem + 4.6vw, 5.75rem);
	--fs-h1: clamp(3rem, 2.3rem + 3.2vw, 4.5rem);
	--fs-h2: clamp(2rem, 1.55rem + 2vw, 2.75rem);
	--fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--fs-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--fs-eyebrow: 0.78rem;
	--lh-tight: 1.08;
	--lh-snug: 1.22;
	--lh-body: 1.7;
	--ls-tight: -0.02em;
	--ls-snug: -0.01em;
	--ls-eyebrow: 0.18em;

	/* Spacing — 4px base. */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-20: 80px;
	--sp-24: 96px;
	--sp-32: 128px;
	--sp-40: 160px;
	--section-y: clamp(56px, 4vw + 40px, 160px);
	--section-y-tight: clamp(48px, 3vw + 28px, 96px);

	/* Layout. */
	--container: 1280px;
	--container-wide: 1440px;
	--container-text: 720px;
	--gutter: clamp(20px, 5vw, 64px);

	/* Radius + motion. */
	--r-sm: 4px;
	--r-md: 12px;
	--r-full: 999px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 360ms;
	--dur-slow: 500ms;
}

/* ---------------------------------------------------------------------------
   Typography helpers
   ------------------------------------------------------------------------- */
.aelia-page .display,
.display {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	font-weight: 400;
}

.h1 {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	font-weight: 400;
}

.h2 {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	font-weight: 400;
}

.h3 {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	font-weight: 400;
}

.lede {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
	line-height: 1.55;
	color: var(--aelia-ink-muted);
	max-width: 46ch;
}

.measure {
	max-width: var(--container-text);
}

.muted {
	color: var(--aelia-ink-muted);
}

.eyebrow {
	font-family: var(--font-text);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--aelia-terracotta);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
}

.eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--aelia-brass);
}

.eyebrow.no-rule::before {
	display: none;
}

.eyebrow.olive {
	color: var(--aelia-olive);
}

.eyebrow.aegean {
	color: var(--aelia-aegean);
}

.eyebrow.brass {
	color: var(--aelia-brass);
}

.pullquote {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	line-height: 1.3;
	letter-spacing: var(--ls-snug);
	font-style: italic;
	color: var(--aelia-aegean);
	max-width: 22ch;
}

/* ---------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container-wide {
	max-width: var(--container-wide);
}

.section {
	padding-block: var(--section-y);
}

.section-tight {
	padding-block: var(--section-y-tight);
}

.stack > * + * {
	margin-top: var(--sp-5);
}

.stack-lg > * + * {
	margin-top: var(--sp-8);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	align-items: center;
}

.center {
	text-align: center;
}

.flow > * + * {
	margin-top: var(--sp-4);
}

/* ---------------------------------------------------------------------------
   Hairline + meander
   ------------------------------------------------------------------------- */
.hairline {
	border: 0;
	height: 1px;
	background: var(--aelia-line);
}

.hairline-ink {
	background: var(--aelia-line-ink);
}

.meander-rule {
	height: 16px;
	background-image: url("../images/meander.svg");
	background-repeat: repeat-x;
	background-position: center;
	background-size: auto 16px;
	opacity: 0.55;
}

.meander-rule.tall {
	height: 22px;
	background-size: auto 22px;
}

.meander-texture {
	background-image: url("../images/meander.svg");
	background-repeat: repeat;
	background-size: 64px auto;
	opacity: 0.04;
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	font-family: var(--font-text);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 14px 26px;
	border-radius: var(--r-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background var(--dur) var(--ease),
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
	text-align: center;
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary {
	background: var(--aelia-aegean);
	color: var(--aelia-marble);
}

.btn-primary:hover {
	background: var(--aelia-aegean-deep);
}

.btn-terracotta {
	background: var(--aelia-terracotta);
	color: var(--aelia-marble);
}

.btn-terracotta:hover {
	background: var(--aelia-terracotta-deep);
}

.btn-secondary {
	background: transparent;
	color: var(--aelia-ink);
	border-color: var(--aelia-line-strong);
}

.btn-secondary:hover {
	border-color: var(--aelia-ink);
	background: color-mix(in srgb, var(--aelia-brass) 8%, transparent);
}

.btn-ghost {
	background: transparent;
	color: var(--aelia-aegean);
	padding-inline: 4px;
}

.btn-ghost .arrow {
	transition: transform var(--dur) var(--ease);
}

.btn-ghost:hover .arrow {
	transform: translateX(4px);
}

.btn-on-dark.btn-secondary {
	color: var(--aelia-marble);
	border-color: color-mix(in srgb, var(--aelia-marble) 40%, transparent);
}

.btn-on-dark.btn-secondary:hover {
	border-color: var(--aelia-marble);
	background: color-mix(in srgb, var(--aelia-marble) 10%, transparent);
}

.btn-lg {
	padding: 17px 34px;
	font-size: 1rem;
}

.link {
	color: var(--aelia-aegean);
	border-bottom: 1px solid var(--aelia-line-strong);
	padding-bottom: 1px;
	transition:
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

.link:hover {
	border-color: var(--aelia-aegean);
}

/* ---------------------------------------------------------------------------
   Pills / badges
   ------------------------------------------------------------------------- */
.pill {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 6px 14px;
	border-radius: var(--r-full);
	border: 1px solid var(--aelia-line);
	color: var(--aelia-ink-muted);
	background: var(--aelia-marble);
}

.pill.solid {
	background: var(--aelia-aegean);
	color: var(--aelia-marble);
	border-color: transparent;
}

.pill.olive {
	background: color-mix(in srgb, var(--aelia-olive) 16%, var(--aelia-marble));
	color: var(--aelia-olive);
	border-color: transparent;
}

.pill.terracotta {
	background: color-mix(
		in srgb,
		var(--aelia-terracotta) 14%,
		var(--aelia-marble)
	);
	color: var(--aelia-terracotta-deep);
	border-color: transparent;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.72rem;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--aelia-brass);
}

/* ---------------------------------------------------------------------------
   Form fields
   ------------------------------------------------------------------------- */
.field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.field > label {
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.field .hint {
	font-size: var(--fs-small);
	color: var(--aelia-ink-muted);
}

.input,
.select,
.textarea {
	width: 100%;
	background: var(--aelia-marble);
	border: 1px solid var(--aelia-line-strong);
	border-radius: var(--r-sm);
	padding: 13px 15px;
	color: var(--aelia-ink);
	transition:
		border-color var(--dur) var(--ease),
		background var(--dur) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
	color: color-mix(in srgb, var(--aelia-ink-muted) 70%, transparent);
}

.input:hover,
.select:hover,
.textarea:hover {
	border-color: var(--aelia-brass);
}

.input:focus,
.select:focus,
.textarea:focus {
	outline: none;
	border-color: var(--aelia-aegean);
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--aelia-aegean) 14%, transparent);
}

.textarea {
	min-height: 130px;
	resize: vertical;
	line-height: 1.6;
}

.select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B635A' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	padding-right: 40px;
}

.choice {
	position: relative;
}

.choice input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}

.choice-label {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 14px 18px;
	border: 1px solid var(--aelia-line-strong);
	border-radius: var(--r-sm);
	background: var(--aelia-marble);
	cursor: pointer;
	transition:
		border-color var(--dur) var(--ease),
		background var(--dur) var(--ease);
}

.choice:hover .choice-label {
	border-color: var(--aelia-brass);
}

.choice input:checked + .choice-label {
	border-color: var(--aelia-aegean);
	background: var(--aelia-aegean-tint);
}

.choice input:focus-visible + .choice-label {
	outline: 2px solid var(--aelia-aegean);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.card {
	background: var(--aelia-marble);
	border: 1px solid var(--aelia-line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition:
		border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.card-link:hover {
	border-color: var(--aelia-line-strong);
	transform: translateY(-3px);
}

.card-body {
	padding: var(--sp-6);
}

.card-body.lg {
	padding: var(--sp-8);
}

/* ---------------------------------------------------------------------------
   Imagery — Mediterranean CSS compositions (photo placeholders).
   Replaced by real <img> in content; alt text lives in IMG comments.
   ------------------------------------------------------------------------- */
.ph {
	position: relative;
	overflow: hidden;
	background: var(--aelia-aegean);
	border-radius: var(--r-md);
	isolation: isolate;
}

.ph.flush {
	border-radius: 0;
}

/* A real photo fills the placeholder, sitting beneath the grain (::after, z3)
   and the light sweep / horizon (::before, z2) so the editorial treatment is
   preserved. When an <img> is present, drop the abstract gradient background
   and soften the light sweep (it was tuned for flat gradients). */
.ph > img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ph:has(> img) {
	background: var(--aelia-ink);
}

.ph:has(> img)::before {
	opacity: 0.6;
}

.ph[data-ratio="16/9"] {
	aspect-ratio: 16/9;
}

.ph[data-ratio="4/3"] {
	aspect-ratio: 4/3;
}

.ph[data-ratio="3/4"] {
	aspect-ratio: 3/4;
}

.ph[data-ratio="1/1"] {
	aspect-ratio: 1/1;
}

.ph[data-ratio="3/2"] {
	aspect-ratio: 3/2;
}

.ph[data-ratio="2/3"] {
	aspect-ratio: 2/3;
}

.ph[data-ratio="21/9"] {
	aspect-ratio: 21/9;
}

.ph[data-ratio="5/7"] {
	aspect-ratio: 5/7;
}

.ph::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	opacity: 0.1;
	mix-blend-mode: overlay;
	pointer-events: none;
}

.ph::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, #fff 12%, transparent),
		transparent 36%,
		color-mix(in srgb, var(--aelia-ink) 22%, transparent)
	);
}

.ph-aegean {
	background: radial-gradient(
			120% 80% at 80% 8%,
			color-mix(in srgb, #fff 30%, transparent),
			transparent 42%
		),
		linear-gradient(
			170deg,
			#2f6b7d 0%,
			var(--aelia-aegean) 46%,
			var(--aelia-aegean-deep) 100%
		);
}

.ph-sea {
	background: linear-gradient(
		180deg,
		#cfe0df 0%,
		#7fa9aa 34%,
		#2f6b7d 66%,
		var(--aelia-aegean-deep) 100%
	);
}

.ph-terracotta {
	background: radial-gradient(
			120% 90% at 20% 12%,
			color-mix(in srgb, #fff 26%, transparent),
			transparent 40%
		),
		linear-gradient(
			160deg,
			#d98b5f 0%,
			var(--aelia-terracotta) 50%,
			var(--aelia-terracotta-deep) 100%
		);
}

.ph-olive {
	background: linear-gradient(
		165deg,
		#97a074 0%,
		var(--aelia-olive) 52%,
		#565d3f 100%
	);
}

.ph-limestone {
	background: linear-gradient(165deg, #efe6d3 0%, #ddccae 60%, #c9b489 100%);
}

.ph-dusk {
	background: linear-gradient(
		180deg,
		#e6b88f 0%,
		#c2603c 38%,
		#6e4a5a 72%,
		#2c3a52 100%
	);
}

.ph-marble {
	background: linear-gradient(150deg, #fbf9f5 0%, #efe9dd 50%, #e3dccd 100%);
}

.ph-horizon::before {
	background: linear-gradient(
			180deg,
			color-mix(in srgb, #fff 14%, transparent),
			transparent 30%
		),
		linear-gradient(
			180deg,
			transparent 58%,
			color-mix(in srgb, #fff 16%, transparent) 58.4%,
			transparent 59.2%
		),
		linear-gradient(
			180deg,
			transparent 60%,
			color-mix(in srgb, var(--aelia-ink) 18%, transparent)
		);
}

.ph-caption {
	position: absolute;
	z-index: 4;
	left: var(--sp-5);
	bottom: var(--sp-5);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--aelia-marble);
}

.ph-caption::before {
	content: "";
	width: 18px;
	height: 1px;
	background: color-mix(in srgb, var(--aelia-marble) 70%, transparent);
}

.ph-tag {
	position: absolute;
	z-index: 4;
	left: var(--sp-5);
	top: var(--sp-5);
}

/* ---------------------------------------------------------------------------
   Site header / nav
   ------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--aelia-limestone) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--aelia-line);
}

@supports not (backdrop-filter: blur(8px)) {
	.site-header {
		background: var(--aelia-limestone);
	}
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	min-height: 76px;
}

.brand {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
}

.brand-mark {
	font-family: var(--font-display);
	font-size: 1.5rem;
	letter-spacing: 0.01em;
	color: var(--aelia-ink);
	line-height: 1;
}

.brand-sub {
	font-size: 0.62rem;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--aelia-brass);
	font-weight: 600;
}

.nav-links {
	display: none;
	align-items: center;
	gap: clamp(18px, 2vw, 34px);
}

.nav-links a {
	font-size: 0.95rem;
	color: var(--aelia-ink);
	position: relative;
	padding-block: 6px;
}

.nav-links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--aelia-terracotta);
	transition: width var(--dur) var(--ease);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
	width: 100%;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}

.lang {
	display: flex;
	align-items: center;
	border: 1px solid var(--aelia-line-strong);
	border-radius: var(--r-full);
	overflow: hidden;
}

.lang button,
.lang a {
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 500;
	padding: 6px 11px;
	color: var(--aelia-ink-muted);
	text-decoration: none;
	transition:
		background var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

.lang button + button,
.lang a + a {
	border-left: 1px solid var(--aelia-line);
}

.lang button[aria-pressed="true"],
.lang a[aria-current="true"],
.lang .is-current {
	background: var(--aelia-aegean);
	color: var(--aelia-marble);
}

.lang button:hover:not([aria-pressed="true"]),
.lang a:hover:not([aria-current="true"]) {
	color: var(--aelia-ink);
	background: color-mix(in srgb, var(--aelia-brass) 10%, transparent);
}

.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px;
}

.nav-toggle span {
	width: 22px;
	height: 1.5px;
	background: var(--aelia-ink);
	transition:
		transform var(--dur) var(--ease),
		opacity var(--dur) var(--ease);
}

.nav-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--aelia-limestone);
	padding: var(--gutter);
	display: none;
	flex-direction: column;
	gap: var(--sp-8);
	transform: translateY(-8px);
	opacity: 0;
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.nav-drawer.open {
	display: flex;
	opacity: 1;
	transform: none;
}

.nav-drawer a {
	font-family: var(--font-display);
	font-size: 1.75rem;
}

.nav-drawer .hairline {
	margin-block: var(--sp-2);
}

/* Below the nav breakpoint, the language pill and the "Plan your trip" button
   live in the mobile drawer, so they're hidden in the top bar (otherwise they
   overflow narrow viewports). The hamburger is shown instead. */
.site-header .nav-right > .lang,
.site-header .nav-right > .btn {
	display: none;
}

@media (width >= 960px) {
	.nav-links {
		display: flex;
	}

	.site-header .nav-right > .lang {
		display: flex;
	}

	.site-header .nav-right > .btn {
		display: inline-flex;
	}

	.nav-toggle {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
	background: var(--aelia-ink);
	color: color-mix(in srgb, var(--aelia-marble) 86%, transparent);
}

.site-footer a {
	color: color-mix(in srgb, var(--aelia-marble) 86%, transparent);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.site-footer a:hover {
	color: var(--aelia-marble);
}

.site-footer .eyebrow {
	color: var(--aelia-brass);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-12);
}

.footer-cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-8);
}

.footer-col h4 {
	font-family: var(--font-text);
	font-size: 0.72rem;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--aelia-brass);
	font-weight: 600;
	margin-bottom: var(--sp-4);
}

.footer-col li + li {
	margin-top: var(--sp-3);
}

/* Footer language switcher — marble-on-ink treatment. */
.site-footer .lang {
	margin-top: var(--sp-8);
	max-width: max-content;
	border-color: color-mix(in srgb, var(--aelia-marble) 24%, transparent);
}

.site-footer .lang a,
.site-footer .lang span {
	color: color-mix(in srgb, var(--aelia-marble) 72%, transparent);
}

.site-footer .lang a + a,
.site-footer .lang span + a,
.site-footer .lang a + span {
	border-left-color: color-mix(in srgb, var(--aelia-marble) 18%, transparent);
}

.site-footer .lang .is-current {
	background: color-mix(
		in srgb,
		var(--aelia-marble) 92%,
		var(--aelia-aegean)
	);
	color: var(--aelia-ink);
}

.footer-col a {
	font-size: 0.95rem;
}

.footer-meander {
	height: 18px;
	background-image: url("../images/meander.svg");
	background-repeat: repeat-x;
	background-size: auto 18px;
	background-position: center;
	opacity: 0.5;
	filter: brightness(1.4) sepia(0.3);
}

@media (width >= 760px) {
	.footer-grid {
		grid-template-columns: 1.4fr 2fr;
		gap: var(--sp-20);
	}

	.footer-cols {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   Motion — reveal on scroll
   ------------------------------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--dur-slow) var(--ease),
		transform var(--dur-slow) var(--ease);
}

.reveal.in {
	opacity: 1;
	transform: none;
}

.no-js .reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Surfaces
   ------------------------------------------------------------------------- */
.on-aegean {
	background: var(--aelia-aegean);
	color: var(--aelia-marble);
}

.on-aegean .eyebrow {
	color: color-mix(in srgb, var(--aelia-terracotta) 70%, #fff);
}

.on-aegean .muted {
	color: color-mix(in srgb, var(--aelia-marble) 72%, transparent);
}

.on-ink {
	background: var(--aelia-ink);
	color: var(--aelia-marble);
}

.on-marble {
	background: var(--aelia-marble);
}

.on-limestone {
	background: var(--aelia-limestone);
}

/* ---------------------------------------------------------------------------
   Home page sections (from Home.html page styles)
   ------------------------------------------------------------------------- */

/* The market-hero dynamic block wraps its output; `contents` keeps it from
   interrupting the full-bleed section flow. */
.aelia-market-hero {
	display: contents;
}

.hero {
	position: relative;
	overflow: hidden;
}

.hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-media .ph {
	height: 100%;
	border-radius: 0;
}

.hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--aelia-ink) 72%, transparent) 0%,
		color-mix(in srgb, var(--aelia-ink) 30%, transparent) 46%,
		transparent 78%
	);
}

.hero-inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(80px, 14vh, 200px);
}

.hero h1 {
	color: var(--aelia-marble);
	max-width: 16ch;
}

.hero .lede {
	color: color-mix(in srgb, var(--aelia-marble) 88%, transparent);
	max-width: 40ch;
}

.plan-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
	background: color-mix(in srgb, var(--aelia-marble) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--aelia-marble) 28%, transparent);
	border-radius: var(--r-full);
	padding: 8px 8px 8px 20px;
	max-width: max-content;
}

.plan-cta label {
	color: var(--aelia-marble);
	font-size: var(--fs-small);
	font-weight: 500;
}

/* Market interest chips in the hero (on the dark scrim). */
.hero-interests {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.hero-interests .pill {
	background: color-mix(in srgb, var(--aelia-marble) 12%, transparent);
	border-color: color-mix(in srgb, var(--aelia-marble) 32%, transparent);
	color: var(--aelia-marble);
}

.plan-cta .select {
	background-color: color-mix(in srgb, var(--aelia-ink) 30%, transparent);
	color: var(--aelia-marble);
	border-color: transparent;
	width: auto;
	padding: 10px 38px 10px 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FBF9F5' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.section-head {
	max-width: 60ch;
	margin-bottom: var(--sp-12);
}

.dest-band {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

.dest-feature {
	position: relative;
}

.dest-feature .ph {
	min-height: 420px;
}

.dest-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--sp-8);
}

.dest-overlay h3 {
	color: var(--aelia-marble);
	font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
}

.dest-overlay p {
	color: color-mix(in srgb, var(--aelia-marble) 85%, transparent);
	max-width: 36ch;
	margin-top: var(--sp-2);
}

.dest-pair {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

.dest-card {
	position: relative;
}

.dest-card .ph {
	min-height: 240px;
}

.styles-grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

.style-item {
	display: grid;
	gap: var(--sp-4);
}

.style-item h3 {
	font-size: var(--fs-h3);
	font-family: var(--font-display);
}

.journeys-row {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

.trade {
	display: grid;
	gap: var(--sp-12);
	grid-template-columns: 1fr;
	align-items: center;
}

.trade-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-8) var(--sp-6);
}

.stat .n {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	color: var(--aelia-marble);
	line-height: 1;
}

.stat .l {
	font-size: var(--fs-small);
	color: color-mix(in srgb, var(--aelia-marble) 72%, transparent);
	margin-top: var(--sp-2);
}

.trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6) var(--sp-12);
	align-items: center;
	justify-content: center;
}

.trust .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.trust .item .k {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--aelia-aegean);
}

.trust .item .v {
	font-size: 0.74rem;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--aelia-ink-muted);
	font-weight: 600;
}

@media (width >= 720px) {
	.dest-band {
		grid-template-columns: 1.3fr 1fr;
	}

	.dest-pair {
		grid-template-rows: 1fr 1fr;
	}

	.styles-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.journeys-row {
		grid-template-columns: repeat(3, 1fr);
	}

	.trade {
		grid-template-columns: 1.1fr 1fr;
	}
}