/* ============================================================================
   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: center;
}

.brand-logo {
	display: block;
	height: 48px;
	width: auto;
}

.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;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--aelia-line-strong);
	border-radius: var(--r-full);
}

.lang button,
.lang a,
.lang .is-current {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--r-full);
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1;
	padding: 6px 12px;
	color: var(--aelia-ink-muted);
	text-decoration: none;
	transition:
		background var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

.lang .is-current {
	cursor: default;
}

.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) 12%, 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);
}

.footer-logo {
	display: block;
	width: 176px;
	height: auto;
	margin-bottom: var(--sp-5);
}

.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 .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;
}

.aelia-home-sections {
	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;
	}
}

/* ---------------------------------------------------------------------------
   Mobile touch targets — below the nav breakpoint, enlarge the language pills
   and menu toggle toward the ~44px comfortable tap size (WCAG 2.5.5 / iOS HIG)
   without altering the desktop lockup that matches the design mockup.
   ------------------------------------------------------------------------- */
@media (width < 960px) {
	.lang button,
	.lang a,
	.lang .is-current {
		padding: 9px 14px;
		font-size: 0.85rem;
	}

	.nav-toggle {
		padding: 12px;
	}

	/* Drawer nav links get generous vertical room for thumbs. */
	.nav-drawer a {
		padding-block: 6px;
	}
}