/* =============================================================================
   EDUTOURS — premium experience stylesheet
   Official brand system only. Light, bright, spacious: white surfaces, blue
   structure, gold reserved for calls to action.
   ========================================================================== */

.tour {
	/* Brand tokens, aliased locally so components read intent, not hex. */
	--t-primary:       var(--color-primary);
	--t-primary-dark:  var(--color-primary-dark);
	--t-primary-light: var(--color-primary-light);
	--t-secondary:     var(--color-secondary);
	--t-accent:        var(--color-accent);
	--t-accent-dark:   var(--color-accent-dark);

	--t-bg:      var(--color-background);
	--t-surface: var(--color-surface);
	--t-text:    var(--color-text-primary);
	--t-text-2:  var(--color-text-secondary);
	--t-border:  var(--color-border);

	--t-serif: "Bricolage Grotesque", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

	--t-shell:  min(1280px, 100% - clamp(2rem, 8vw, 8rem));
	--t-radius: 20px;                       /* brand: cards 20px */
	--t-radius-lg: 24px;

	--t-shadow-sm: 0 1px 2px rgba(31, 41, 55, .04), 0 2px 8px rgba(3, 95, 165, .05);
	--t-shadow:    0 2px 6px rgba(31, 41, 55, .04), 0 12px 28px rgba(3, 95, 165, .08);
	--t-shadow-lg: 0 4px 12px rgba(31, 41, 55, .05), 0 24px 56px rgba(3, 95, 165, .13);

	--t-ease: cubic-bezier(.2, .8, .2, 1);

	position: relative;
	background: var(--t-surface);
	color: var(--t-text-2);
	font-family: var(--et-font-body);
	overflow-x: clip;
}

.tour ::selection { background: var(--t-accent); color: var(--t-text); }

/* Resets wrapped in :where() so they carry ZERO specificity — written plainly,
   `.tour h2` (0-1-1) would outrank every component class below (0-1-0) and
   silently strip their margins. */
:where(.tour) h1,
:where(.tour) h2,
:where(.tour) h3,
:where(.tour) h4 {
	font-family: var(--t-serif);
	color: var(--t-text);
	letter-spacing: -.025em;
	line-height: 1.1;
	margin: 0;
	font-weight: 600;
}

:where(.tour) p { margin: 0; }

.tour__shell { width: var(--t-shell); margin-inline: auto; }

.tour__band { position: relative; padding-block: clamp(4.5rem, 10vw, 8rem); }
.tour__band--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.tour__band--alt  { background: var(--t-bg); }
.tour__band--tint { background: var(--t-primary-light); }

/* Section heading ---------------------------------------------------------- */
.tour__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--t-primary);
	margin-bottom: 1.25rem;
}
.tour__eyebrow::before {
	content: "";
	width: 2.25rem; height: 2px;
	border-radius: 2px;
	background: var(--t-accent);
}

.tour__h {
	font-size: clamp(2rem, 4.2vw, 3.375rem);
	max-width: 20ch;
	margin-bottom: 1.125rem;
	text-wrap: balance;
}

/* A full sentence used as a headline: smaller and wider than a short title. */
.tour__h--statement {
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	line-height: 1.2;
	max-width: 30ch;
}

.tour__sub {
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 1.7;
	max-width: 58ch;
	color: var(--t-text-2);
}

/* Ambient light — barely-there brand tints, never decoration for its own sake */
.tour__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
	opacity: .55;
	z-index: 0;
}
.tour__glow--gold  { background: radial-gradient(circle, rgba(242, 201, 76, .30), transparent 70%); }
.tour__glow--azure { background: radial-gradient(circle, rgba(2, 142, 199, .18), transparent 70%); }

.tour > * { position: relative; z-index: 1; }

/* =============================================================================
   HEADER
   A solid white bar on every page, including over the hero. The official
   wordmark is brand blue: floating it transparently over the blue hero left it
   at roughly 1.4:1 against the background — invisible. White also matches the
   brief's "bright, spacious, clean" interface.
   ========================================================================== */
.et-tour .et-header {
	position: sticky;
	top: 0;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow .35s ease;
}
.et-tour .et-header.is-stuck { box-shadow: 0 2px 12px rgba(31, 41, 55, .07); }

/* WooCommerce notices sit above the hero, so they must clear the fixed header. */
.tour__notices { padding-top: 1.5rem; padding-bottom: 1rem; background: var(--t-surface); }
.tour__notices .woocommerce-message,
.tour__notices .woocommerce-info,
.tour__notices .woocommerce-error {
	background: var(--t-primary-light);
	border-top-color: var(--t-primary);
	color: var(--t-text);
	border-radius: 14px;
}

/* =============================================================================
   HERO — photograph under a brand-blue scrim
   ========================================================================== */
.thero {
	position: relative;
	min-height: min(92svh, 880px);
	display: flex;
	align-items: flex-end;
	padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	isolation: isolate;
	background: var(--t-primary-dark);
}

.thero__media { position: absolute; inset: -8% 0 0; z-index: -2; will-change: transform; }
.thero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Brand-blue scrim rather than black: keeps white type at ≥7:1 while the
   photograph stays legible underneath. */
.thero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(2, 74, 130, .70) 0%, rgba(2, 74, 130, .34) 34%, rgba(2, 74, 130, .88) 82%, var(--t-primary-dark) 100%),
		linear-gradient(100deg, rgba(2, 74, 130, .86) 0%, rgba(2, 74, 130, .12) 62%, transparent 100%);
}

.thero__grid {
	width: var(--t-shell);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: end;
}

.thero__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-accent);
	margin-bottom: 1.5rem;
}
.thero__meta span { color: rgba(255, 255, 255, .6); }

.thero__title {
	font-size: clamp(2.75rem, 6.5vw, 5rem);
	color: #fff;
	margin-bottom: 1.5rem;
	text-wrap: balance;
}
.thero__title em {
	display: block;
	font-style: normal;
	color: var(--t-accent);
}

.thero__lead {
	font-size: clamp(1rem, 1.4vw, 1.1875rem);
	line-height: 1.65;
	max-width: 46ch;
	color: rgba(255, 255, 255, .92);
	margin-bottom: 2.25rem;
}

.thero__pillars {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin-bottom: 2.5rem;
	list-style: none;
	padding: 0;
}
.thero__pillar {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-size: .875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .92);
	max-width: 11rem;
}
.thero__pillar svg { flex-shrink: 0; color: var(--t-accent); }

.thero__cta { display: flex; flex-wrap: wrap; gap: .875rem; }

/* =============================================================================
   BUTTONS — primary blue, gold reserved for the call to action
   ========================================================================== */
.tbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	padding: 1rem 1.9rem;
	border: 1.5px solid transparent;
	border-radius: 100px;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: background-color .3s var(--t-ease), color .3s var(--t-ease),
	            border-color .3s var(--t-ease), box-shadow .3s var(--t-ease),
	            transform .3s var(--t-ease);
}
.tbtn:hover { transform: translateY(-2px); }
.tbtn:active { transform: translateY(0); }

/* Call to action — gold, always with dark type. White on gold fails AA. */
.tbtn--gold {
	background: var(--t-accent);
	color: var(--t-text);
	box-shadow: 0 6px 18px -6px rgba(242, 201, 76, .65);
}
.tbtn--gold:hover {
	background: var(--t-accent-dark);
	color: var(--t-text);
	box-shadow: 0 12px 28px -8px rgba(242, 201, 76, .7);
}

/* Primary — blue, darkening on hover. */
.tbtn--primary { background: var(--t-primary); color: #fff; box-shadow: 0 6px 18px -8px rgba(3, 95, 165, .6); }
.tbtn--primary:hover { background: var(--t-primary-dark); color: #fff; }

/* On the hero, over the blue scrim. */
.tbtn--glass {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
	backdrop-filter: blur(12px);
}
.tbtn--glass:hover { background: rgba(255, 255, 255, .24); border-color: #fff; color: #fff; }

/* On light surfaces. */
.tbtn--outline {
	background: var(--t-surface);
	border-color: var(--t-border);
	color: var(--t-primary);
}
.tbtn--outline:hover { border-color: var(--t-primary); background: var(--t-primary-light); color: var(--t-primary-dark); }

.tbtn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .35) 50%, transparent 62%);
	transform: translateX(-120%);
	transition: transform .75s var(--t-ease);
}
.tbtn:hover::after { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
	.tour *, .tour *::before, .tour *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.tbtn:hover { transform: none; }
	.reveal { opacity: 1 !important; transform: none !important; }
	.thigh__strip { animation: none; }
	.thero__media { inset: 0; }
}

/* =============================================================================
   BOOKING CARD — white surface, soft shadow
   ========================================================================== */
.tbook {
	background: var(--t-surface);
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius-lg);
	padding: 1.875rem;
	box-shadow: var(--t-shadow-lg);
	color: var(--t-text-2);
}
.tbook__title { font-size: 1.375rem; margin-bottom: .35rem; }
.tbook__note { font-size: .8125rem; color: var(--t-text-2); margin-bottom: 1.5rem; line-height: 1.5; }

.tbook__price {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--t-border);
}
.tbook__amount {
	font-family: var(--t-serif);
	font-size: 2.5rem;
	color: var(--t-primary);
	line-height: 1;
}
.tbook__amount .woocommerce-Price-amount { color: inherit; }
.tbook__per { font-size: .8125rem; color: var(--t-text-2); }

.tbook__row { margin-bottom: .875rem; }
.tbook__row label {
	display: block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t-text-2);
	margin-bottom: .4rem;
}
.tbook input, .tbook select, .tform textarea {
	width: 100%;
	padding: .8rem .95rem;
	background: var(--t-surface);
	border: 1px solid var(--t-border);
	border-radius: 12px;
	color: var(--t-text);
	font-family: inherit;
	font-size: .9375rem;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.tbook input::placeholder, .tform textarea::placeholder { color: var(--t-text-2); }
.tbook input:focus, .tbook select:focus, .tform textarea:focus {
	outline: none;
	border-color: var(--t-primary);
	box-shadow: 0 0 0 3px var(--t-primary-light);
}
.tbook .tbtn { width: 100%; margin-top: .5rem; }
.tbook__fine { margin-top: 1rem; font-size: .75rem; color: var(--t-text-2); text-align: center; line-height: 1.55; }

/* =============================================================================
   MARKER BAND
   ========================================================================== */
.tmarkers { background: var(--t-primary-light); }
.tmarkers__quote {
	font-family: var(--t-serif);
	font-size: clamp(1.25rem, 2.2vw, 1.875rem);
	color: var(--t-primary-dark);
	text-align: center;
	max-width: 34ch;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	line-height: 1.3;
	text-wrap: balance;
}
.tmarkers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: clamp(1.5rem, 3vw, 2rem);
}
.tmarker { text-align: center; padding-inline: 1rem; }
.tmarker__v {
	font-family: var(--t-serif);
	font-size: clamp(2.125rem, 4vw, 3rem);
	line-height: 1;
	color: var(--t-primary);
}
.tmarker__u {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-primary-dark);
	margin-top: .4rem;
}
.tmarker__l { font-size: .875rem; color: var(--t-text); margin-top: .5rem; line-height: 1.5; }

/* =============================================================================
   PILLARS
   ========================================================================== */
.tpillars { background: var(--t-bg); }
.tpillars__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.25rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.tpillar {
	position: relative;
	padding: 2rem 1.75rem;
	background: var(--t-surface);
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	box-shadow: var(--t-shadow-sm);
	transition: border-color .35s ease, transform .35s var(--t-ease), box-shadow .35s ease;
}
.tpillar:hover {
	border-color: var(--t-secondary);
	transform: translateY(-4px);
	box-shadow: var(--t-shadow);
}
.tpillar__icon {
	width: 52px; height: 52px;
	display: grid;
	place-items: center;
	margin-bottom: 1.25rem;
	border-radius: 16px;
	background: var(--t-primary-light);
	color: var(--t-primary);
}
.tpillar h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.tpillar p { font-size: .9375rem; line-height: 1.65; color: var(--t-text-2); }

/* =============================================================================
   ITINERARY
   ========================================================================== */
.titin__head {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.titin__track {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1.75rem;
	margin: 0 calc(50% - 50vw);
	padding-inline: max(calc(50vw - var(--t-shell) / 2), 1.5rem);
	scrollbar-width: thin;
	scrollbar-color: var(--t-border) transparent;
}
.titin__track::-webkit-scrollbar { height: 5px; }
.titin__track::-webkit-scrollbar-track { background: var(--t-bg); border-radius: 5px; }
.titin__track::-webkit-scrollbar-thumb { background: var(--t-border); border-radius: 5px; }

.tday {
	flex: 0 0 clamp(15rem, 24vw, 19rem);
	scroll-snap-align: start;
	background: var(--t-surface);
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--t-shadow-sm);
	transition: border-color .35s ease, transform .35s var(--t-ease), box-shadow .35s ease;
}
.tday:hover { border-color: var(--t-secondary); transform: translateY(-5px); box-shadow: var(--t-shadow); }

.tday__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--t-primary-light); }
.tday__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--t-ease); }
.tday:hover .tday__media img { transform: scale(1.05); }
.tday__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, rgba(2, 74, 130, .92) 100%);
}

.tday__num {
	position: absolute;
	top: 1rem; left: 1rem;
	z-index: 2;
	padding: .4rem .85rem;
	border-radius: 100px;
	background: var(--t-accent);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--t-text);
}
.tday__route {
	position: absolute;
	left: 1.25rem; right: 1.25rem; bottom: 1.1rem;
	z-index: 2;
	font-family: var(--t-serif);
	font-size: 1.0625rem;
	color: #fff;
	line-height: 1.25;
}

.tday__body { padding: 1.375rem; display: flex; flex-direction: column; flex: 1; }
.tday__intro { font-size: .875rem; line-height: 1.6; color: var(--t-text); margin-bottom: 1rem; }
.tday__list { list-style: none; padding: 0; margin: 0 0 1rem; }
.tday__list li {
	position: relative;
	padding-left: 1.15rem;
	margin-bottom: .5rem;
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--t-text-2);
}
.tday__list li::before {
	content: "";
	position: absolute;
	left: 0; top: .5rem;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--t-secondary);
}
.tday__foot {
	margin-top: auto;
	padding-top: .875rem;
	border-top: 1px solid var(--t-border);
	font-size: .75rem;
	color: var(--t-text-2);
	display: grid;
	gap: .25rem;
}
.tday__foot strong { color: var(--t-text); font-weight: 600; }

/* =============================================================================
   HIGHLIGHTS — marquee on brand blue
   ========================================================================== */
.thigh {
	background: var(--t-primary);
	overflow: hidden;
	padding-block: clamp(2rem, 4vw, 2.75rem);
}
.thigh__strip { display: flex; gap: 3rem; width: max-content; animation: thigh-scroll 46s linear infinite; }
.thigh:hover .thigh__strip { animation-play-state: paused; }
@keyframes thigh-scroll { to { transform: translateX(-50%); } }

.thigh__item {
	display: inline-flex;
	align-items: center;
	gap: .875rem;
	font-family: var(--t-serif);
	font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
	color: #fff;
	white-space: nowrap;
}
.thigh__item::after {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--t-accent);
	margin-left: 3rem;
}

/* =============================================================================
   DESTINATIONS
   ========================================================================== */
.tdest__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1.25rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.tdest__card {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--t-radius);
	overflow: hidden;
	border: 1px solid var(--t-border);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	background: var(--t-primary-light);
	box-shadow: var(--t-shadow-sm);
	transition: transform .4s var(--t-ease), box-shadow .4s ease;
}
.tdest__card:hover { transform: translateY(-4px); box-shadow: var(--t-shadow); }
.tdest__card img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--t-ease);
}
/* Scrim in brand blue so captions clear AA over any photograph. */
.tdest__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(2, 74, 130, 0) 34%, rgba(2, 74, 130, .92) 100%);
}
.tdest__card:hover img { transform: scale(1.06); }
.tdest__body { padding: 1.5rem; width: 100%; }
.tdest__body h3 { font-size: 1.5rem; margin-bottom: .2rem; color: #fff; }
.tdest__body p { font-size: .875rem; color: rgba(255, 255, 255, .92); }
/* The departure window on the featured card. Gold and set in caps so it reads
   as a label rather than as a second sentence of body copy. */
.tdest__body .tdest__date {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .45rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t-accent);
	font-variant-numeric: tabular-nums;
}
.tdest__body .tdest__date .sh-i,
.tdest__body .tdest__date svg { flex: none; }

/* =============================================================================
   GALLERY SLIDER
   ========================================================================== */
.tgal { background: var(--t-bg); }

.tgal__head {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tgal__nav { display: flex; gap: .625rem; }
.tgal__btn {
	width: 48px; height: 48px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--t-border);
	background: var(--t-surface);
	color: var(--t-primary);
	cursor: pointer;
	box-shadow: var(--t-shadow-sm);
	transition: background-color .3s ease, border-color .3s ease,
	            transform .3s var(--t-ease), opacity .3s ease;
}
.tgal__btn:hover:not(:disabled) {
	background: var(--t-primary);
	border-color: var(--t-primary);
	color: #fff;
	transform: translateY(-2px);
}
.tgal__btn:disabled { opacity: .35; cursor: default; }

.tgal__track {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	margin: 0 calc(50% - 50vw);
	padding: 0 max(calc(50vw - var(--t-shell) / 2), 1.5rem) 1.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--t-border) transparent;
}
.tgal__track::-webkit-scrollbar { height: 5px; }
.tgal__track::-webkit-scrollbar-track { background: var(--t-surface); border-radius: 5px; }
.tgal__track::-webkit-scrollbar-thumb { background: var(--t-border); border-radius: 5px; }
.tgal__track:focus-visible { outline: 3px solid var(--t-primary); outline-offset: 6px; border-radius: 4px; }

.tgal__slide { flex: 0 0 auto; scroll-snap-align: center; }
.tgal__slide figure {
	position: relative;
	height: clamp(20rem, 46vw, 30rem);
	border-radius: var(--t-radius);
	overflow: hidden;
	border: 1px solid var(--t-border);
	background: var(--t-surface);
	box-shadow: var(--t-shadow-sm);
	margin: 0;
	transition: box-shadow .4s ease;
}
.tgal__slide figure:hover { box-shadow: var(--t-shadow); }
/* Each photograph keeps its own proportions — height fixed, width follows.
   Mixed formats are the point of a gallery, not a defect. */
.tgal__slide img {
	height: 100%;
	width: auto;
	max-width: min(78vw, 46rem);
	object-fit: cover;
	display: block;
	transition: transform 1.1s var(--t-ease);
}
.tgal__slide figure:hover img { transform: scale(1.03); }

.tgal__slide figcaption {
	position: absolute;
	inset: auto 0 0;
	padding: 3.5rem 1.25rem 1.1rem;
	background: linear-gradient(180deg, rgba(2, 74, 130, 0), rgba(2, 74, 130, .94));
	display: grid;
	gap: .15rem;
}
.tgal__place {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-accent);
}
.tgal__cap { font-family: var(--t-serif); font-size: 1.0625rem; color: #fff; line-height: 1.3; }

.tgal__count {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--t-text-2);
}

@media (max-width: 700px) {
	.tgal__nav { display: none; } /* Swiping is the natural gesture here. */
}

/* =============================================================================
   INCLUSIONS
   ========================================================================== */
.tincl__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.5rem, 3vw, 2rem);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.tincl__col {
	padding: 2rem;
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	background: var(--t-surface);
	box-shadow: var(--t-shadow-sm);
}
.tincl__col h3 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.tincl__col ul { list-style: none; padding: 0; margin: 0; }
.tincl__col li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: .8rem;
	font-size: .9375rem;
	line-height: 1.6;
}
.tincl__col li svg { position: absolute; left: 0; top: .2rem; }
.tincl--in li { color: var(--t-text); }
.tincl--in li svg { color: var(--t-primary); }
.tincl--out li { color: var(--t-text-2); }
.tincl--out li svg { color: var(--t-text-2); }

/* =============================================================================
   FAQ
   ========================================================================== */
.tfaq__list { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 52rem; }
.tfaq__item { border-bottom: 1px solid var(--t-border); }
.tfaq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--t-serif);
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	color: var(--t-text);
	transition: color .25s ease;
}
.tfaq__q:hover { color: var(--t-primary); }
.tfaq__sign {
	flex-shrink: 0;
	width: 32px; height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--t-border);
	background: var(--t-surface);
	color: var(--t-primary);
	transition: transform .4s var(--t-ease), background-color .3s ease, color .3s ease;
}
.tfaq__q[aria-expanded="true"] .tfaq__sign {
	transform: rotate(45deg);
	background: var(--t-primary);
	border-color: var(--t-primary);
	color: #fff;
}

.tfaq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--t-ease); }
.tfaq__a > div { overflow: hidden; }
.tfaq__item.is-open .tfaq__a { grid-template-rows: 1fr; }
.tfaq__a p { padding-bottom: 1.5rem; font-size: .9688rem; line-height: 1.75; max-width: 60ch; color: var(--t-text-2); }

/* =============================================================================
   ABOUT
   ========================================================================== */
.tabout__prose { max-width: 60ch; margin-top: clamp(2rem, 4vw, 3rem); }
.tabout__prose p { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.8; margin-bottom: 1.5rem; color: var(--t-text-2); }
.tabout__prose p:last-child { margin-bottom: 0; }
.tabout__prose a { color: var(--t-primary); }

.tabout__break { height: clamp(16rem, 34vw, 26rem); overflow: hidden; position: relative; }
.tabout__break img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================================
   CONTACT FORM
   ========================================================================== */
.tform__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
	gap: clamp(2rem, 6vw, 4.5rem);
	align-items: start;
}

.tform__details { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; }
.tform__details li {
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--t-border);
	font-size: .9688rem;
	color: var(--t-text);
}
/* The official rate card on the booking panel. Two rooms, two prices, set as a
   list rather than as one headline figure — the client publishes rates by room,
   and collapsing them to a per-person number would be the site editorialising
   its own price list. */
.tbook__rates {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	border-top: 1px solid var(--t-border);
}
.tbook__rates li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--t-border);
}
.tbook__rate-label {
	font-size: .9688rem;
	font-weight: 600;
	color: var(--t-text);
}
.tbook__rate-label em {
	display: block;
	font-style: normal;
	font-size: .8125rem;
	font-weight: 400;
	color: var(--t-text-2);
}
.tbook__rate-amount {
	font-family: var(--t-serif);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--t-text);
	white-space: nowrap;
	font-variant-numeric: tabular-nums lining-nums;
}
.tbook__rate-amount .amount { color: inherit; }

.tform__details li:last-child { border-bottom: 0; }
.tform__details svg { flex-shrink: 0; color: var(--t-primary); }
.tform__details a { color: var(--t-text); text-decoration: none; }
.tform__details a:hover { color: var(--t-primary); }

/* The postal address. <address> is the right element and it italicises by
   default, which reads as an aside rather than as the company's own address —
   so the slant comes off and the lines are stacked. align-items on the row
   above centres a one-line item; a three-line address wants its icon at the
   top of the block instead. */
.tform__details li:has(.tform__address) { align-items: flex-start; }
.tform__details li:has(.tform__address) svg { margin-top: .2rem; }

.tform__address {
	display: flex;
	flex-direction: column;
	font-style: normal;
	line-height: 1.55;
}

/* "Call or text" — the channel note the client supplied with the number. */
.tform__note {
	font-style: normal;
	font-size: .8125rem;
	color: var(--t-text-2);
	margin-left: .5rem;
}

.tform__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.tform textarea { line-height: 1.55; resize: vertical; }

.tform__flash {
	padding: .9rem 1.1rem;
	margin-bottom: 1.25rem;
	border-radius: 14px;
	font-size: .9063rem;
	line-height: 1.55;
	border: 1px solid;
}
.tform__flash--ok  { background: #EFFCF3; border-color: var(--color-success); color: #14532D; }
.tform__flash--bad { background: #FEF2F2; border-color: var(--color-error);   color: #7F1D1D; }

@media (max-width: 900px) {
	.tform__grid { grid-template-columns: 1fr; }
	.thero__grid { grid-template-columns: 1fr; }
	.thero { min-height: auto; }
	.tbook { order: 2; }
}

/* =============================================================================
   CLOSING CTA
   ========================================================================== */
.tcta { position: relative; overflow: hidden; isolation: isolate; background: var(--t-primary-dark); }
.tcta__media { position: absolute; inset: 0; z-index: -2; }
.tcta__media img { width: 100%; height: 100%; object-fit: cover; }
.tcta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(2, 74, 130, .93), rgba(3, 95, 165, .88));
}
.tcta__inner { text-align: center; max-width: 46rem; margin-inline: auto; }
.tcta__inner h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); color: #fff; margin-bottom: 1.25rem; text-wrap: balance; }
.tcta__inner p { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 2.25rem; color: rgba(255, 255, 255, .93); }
.tcta__inner .tour__eyebrow { color: var(--t-accent); }
.tcta__inner .tour__eyebrow::before { background: var(--t-accent); }
.tcta__actions { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; }

/* =============================================================================
   HOME — TRAVEL STYLES ("Let's go together")
   ========================================================================== */
.thstyles__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.thstyles__collage {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: clamp(.65rem, 1.4vw, 1.1rem);
}
.thstyles__frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--t-radius);
	background: var(--t-primary-light);
	box-shadow: var(--t-shadow);
}
.thstyles__frame img { width: 100%; height: 100%; object-fit: cover; }
.thstyles__frame--a { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
.thstyles__frame--b { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
/* The tall frame spans both rows and takes its height from the two squares
   beside it. Its photograph is taken out of flow so the portrait original
   cannot push the grid rows taller than the squares and overhang them. */
.thstyles__frame--c { grid-column: 2; grid-row: 1 / span 2; }
.thstyles__frame--c img { position: absolute; inset: 0; }

.thstyles__list {
	list-style: none;
	padding: 0;
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	display: grid;
	gap: .875rem;
}
.thstyle {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	background: var(--t-surface);
	box-shadow: var(--t-shadow-sm);
	transition: transform .35s var(--t-ease), border-color .35s ease, box-shadow .35s ease;
}
.thstyle:hover {
	transform: translateY(-3px);
	border-color: var(--t-secondary);
	box-shadow: var(--t-shadow);
}
.thstyle__icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--t-primary-light);
	color: var(--t-primary);
}
.thstyle__text { display: grid; gap: .2rem; }
.thstyle__text strong {
	font-family: var(--t-serif);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--t-text);
}
.thstyle__text span { font-size: .9375rem; line-height: 1.6; color: var(--t-text-2); }

.thstyles__cta { margin-top: clamp(1.5rem, 3vw, 2rem); }

@media (max-width: 900px) {
	.thstyles__grid { grid-template-columns: 1fr; }
	.thstyles__collage { order: 2; }
}

/* =============================================================================
   HOME — DESTINATIONS: one slider per country
   ========================================================================== */
.thdest__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* The three cards stretch to a common height so the dots and arrows line up
   across the row however long a "why visit" runs. */
.thcountry { display: flex; flex-direction: column; }
.thcountry .tslider { display: flex; flex-direction: column; flex: 1; }
.thcountry .tslider__track { flex: 1 1 auto; }

.thcountry__name {
	font-family: var(--et-font-body);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--t-primary);
	text-align: center;
	margin-bottom: .9rem;
}

.thcountry__slide {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--t-surface);
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	overflow: hidden;
	box-shadow: var(--t-shadow-sm);
}
.thcountry__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--t-primary-light); }
.thcountry__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--t-ease); }
.thcountry__slide:hover .thcountry__media img { transform: scale(1.05); }

.thcountry__body { padding: 1.25rem 1.35rem 1.5rem; }
.thcountry__body h4 { font-size: 1.375rem; margin-bottom: .5rem; }
.thcountry__body p { font-size: .9375rem; line-height: 1.65; color: var(--t-text-2); }
.thcountry__body strong { color: var(--t-text); font-weight: 600; }

.thdest__foot {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
	text-align: center;
}
.thdest__foot p { font-size: 1.0625rem; color: var(--t-text); }

/* =============================================================================
   GENERIC SLIDER — native scroll-snap; arrows and dots are added by motion.js
   ========================================================================== */
.tslider { position: relative; }

.tslider__track {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0 0 .5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.tslider__track::-webkit-scrollbar { display: none; }
.tslider__track:focus-visible { outline: 3px solid var(--t-primary); outline-offset: 4px; border-radius: var(--t-radius); }

.tslider__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }

/* align-items matters once a pause button shares the row: without it the 8px
   dots hang from the top of a 26px-tall row. */
.tslider__dots { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .9rem; }
.tslider__dot {
	width: 8px; height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--t-border);
	cursor: pointer;
	transition: background-color .3s ease, transform .3s var(--t-ease);
}
.tslider__dot:hover { background: var(--t-secondary); }
.tslider__dot.is-active { background: var(--t-primary); transform: scale(1.4); }

.tslider__nav { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
.tslider__nav .tgal__btn { width: 40px; height: 40px; }

/* Auto-advance pause control, built by motion.js next to the dots. A carousel
   that moves on its own has to be stoppable — hovering it is not a mechanism
   a keyboard or a touch screen can use. */
.tslider__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	margin-left: .5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--t-text-2);
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease;
}
.tslider__play:hover { background: var(--t-primary-light); color: var(--t-primary); }

/* =============================================================================
   HOME — CITY SLIDER
   Real photographs of the places they name, one city per slide.
   Capped at the shell rather than run full-bleed: the weakest masters are only
   ~800px wide and soften visibly past that.
   ========================================================================== */
/* Narrower than the rest of the page on purpose. Three of the seven masters are
   736–800px wide; across the full 1280 shell they are stretched past 1.7× and
   the zellij on Bab Mansour goes to mush. 66rem holds the worst case to 1.43×,
   and that one is a smooth white façade rather than tilework. Widen this the
   day the client supplies bigger originals, not before. */
.thcity .tour__shell { max-width: 66rem; }

.thcity__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
	gap: clamp(.75rem, 4vw, 3rem);
	align-items: end;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
/* The section is narrower than the shell the 20ch default was tuned for, and
   at 20ch this headline breaks over three lines — a whole line of white space
   above the photograph for nothing. */
.thcity__head .tour__h { max-width: 24ch; margin-bottom: 0; }

.thcity__slider { position: relative; }
.thcity__track { gap: 1.25rem; padding-bottom: 0; }
.thcity__slide { min-width: 0; }

/* 3:2 rather than 16:9: it buys a fifth more picture at the same width, which
   costs nothing in sharpness (cover scaling here is driven by the width) and
   nothing in page height that the tightened heading has not already given
   back. It also wastes less of the 4:3 and 3:2 originals. */
.thcity__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--t-radius-lg);
	background: var(--t-primary-dark);
	box-shadow: var(--t-shadow);
}
.thcity__figure img { width: 100%; height: 100%; object-fit: cover; }

/* The same brand-blue scrim as the hero. The photographs are supplied, not
   commissioned: the caption has to stay legible over whatever the frame
   happens to contain. */
/* The scrim rides on the caption, not on the frame: sized to the block it has
   to make readable, it leaves the photograph alone above it. Measured on the
   Tangier frame, the brightest thing under the sentence still clears 6:1. */
.thcity__cap {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding: clamp(3rem, 7vw, 5rem) clamp(1.1rem, 3vw, 2.25rem) clamp(1.1rem, 3vw, 2.25rem);
	background: linear-gradient(180deg,
		rgba(2, 74, 130, 0) 0%,
		rgba(2, 74, 130, .84) 34%,
		rgba(2, 74, 130, .94) 100%);
}

/* Gold is the rule, not the type. Over a photograph the accent runs at ~3:1 —
   fine for a 2px bar, well short of what a 12px label needs. */
.thcity__count {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2em;
	color: #fff;
	margin-bottom: .5rem;
}
.thcity__count::before {
	content: "";
	width: 1.75rem; height: 2px;
	border-radius: 2px;
	background: var(--t-accent);
}
.thcity__place {
	font-size: clamp(1.5rem, 3.4vw, 2.75rem);
	line-height: 1.1;
	color: #fff;
	margin-bottom: .45rem;
}
.thcity__text {
	font-size: clamp(.875rem, 1.1vw, 1.0625rem);
	line-height: 1.6;
	max-width: 54ch;
	color: rgba(255, 255, 255, .93);
}

/* Arrows sit on the vertical centre of the picture, not of the slider — the
   dots row below would drag them off-centre. A percentage margin resolves
   against the width, so half of the 3:2 box is 33.333% of the track. */
.thcity__nav {
	position: absolute;
	top: 0;
	inset-inline: clamp(.5rem, 1.5vw, 1rem);
	margin-top: calc(33.333% - 24px);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}
.thcity__nav .tgal__btn { pointer-events: auto; }

/* Small screens: the caption drops out of the picture and sits under it as a
   card. Overlaid on a 4:3 frame this narrow it either covers the photograph or
   loses the sentence — and the sentence is the reason the section exists. */
@media (max-width: 900px) {
	.thcity__head { grid-template-columns: 1fr; align-items: start; }

	/* The slide is a stretched flex item; make the card fill it, or a slide
	   whose sentence wraps to fewer lines ends up shorter than the track. */
	.thcity__slide { display: grid; }

	.thcity__figure {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		background: var(--t-surface);
		border: 1px solid var(--t-border);
		box-shadow: var(--t-shadow-sm);
	}
	.thcity__figure img { aspect-ratio: 4 / 3; height: auto; }

	.thcity__cap { position: static; padding: 1.1rem 1.25rem 1.4rem; background: none; }
	.thcity__count { color: var(--t-primary); }
	.thcity__place { color: var(--t-text); }
	.thcity__text { color: var(--t-text-2); }

	/* Half of a 4:3 frame is 37.5% of the width, and the buttons are 40px. */
	.thcity__nav { margin-top: calc(37.5% - 20px); }
	.thcity__nav .tgal__btn { width: 40px; height: 40px; }
}

/* =============================================================================
   HOME — REVIEWS
   Every quote is a real customer's, unedited. See inc/reviews-data.php.
   ========================================================================== */
.trev { background: var(--t-primary-light); }

.trev__head {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.trev__agg { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.trev__score { font-family: var(--t-serif); font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--t-text); }
.trev__stars { display: inline-flex; gap: .1rem; color: var(--t-accent); }
.trev__stars svg { display: block; }
.trev__aggtext { font-size: .9375rem; line-height: 1.5; color: var(--t-text-2); }
.trev__aggtext small { font-size: .8125rem; opacity: .85; }
.trev__link { margin-top: 1.25rem; }

.trev__track {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	margin: 0 calc(50% - 50vw);
	padding: 0 max(calc(50vw - var(--t-shell) / 2), 1.5rem) 1.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--t-border) transparent;
}
.trev__track::-webkit-scrollbar { height: 5px; }
.trev__track::-webkit-scrollbar-track { background: var(--t-surface); border-radius: 5px; }
.trev__track::-webkit-scrollbar-thumb { background: var(--t-border); border-radius: 5px; }
.trev__track:focus-visible { outline: 3px solid var(--t-primary); outline-offset: 6px; border-radius: 4px; }

.trev__slide { flex: 0 0 min(26rem, 84vw); min-width: 0; scroll-snap-align: center; }

.trev__card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.6rem 1.5rem;
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	background: var(--t-surface);
	box-shadow: var(--t-shadow-sm);
}
.trev__mark { position: absolute; top: 1.15rem; right: 1.35rem; color: var(--t-primary-light); }
.trev__card .trev__stars { margin-bottom: .9rem; }

.trev__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--t-text);
}
.trev__text p { margin: 0 0 .8rem; }
.trev__text p:last-child { margin-bottom: 0; }

/* Applied by motion.js, never in the markup: with JavaScript off the whole
   review has to be readable. */
.trev__text.is-clamped {
	max-height: 13.5em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 68%, transparent);
	        mask-image: linear-gradient(180deg, #000 68%, transparent);
}
/* What the "Read more" button toggles. */
.trev__text.is-clamped.is-open {
	max-height: none;
	-webkit-mask-image: none;
	        mask-image: none;
}

.trev__more {
	align-self: flex-start;
	margin-top: .6rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	color: var(--t-primary);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.trev__more:hover { color: var(--t-primary-dark); }

.trev__by { margin-top: auto; padding-top: 1.25rem; display: grid; gap: .15rem; }
.trev__by strong { font-family: var(--t-serif); font-weight: 600; font-size: 1rem; color: var(--t-text); }
.trev__by span {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--t-text-2);
}

/* =============================================================================
   SCROLL REVEAL — CSS-only fallback, GSAP takes over when it loads
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); }
.js-gsap .reveal { opacity: 0; }
html:not(.js-gsap) .reveal { animation: reveal-in .8s var(--t-ease, ease) both; }
@keyframes reveal-in { to { opacity: 1; transform: none; } }

/* =============================================================================
   FOOTER — deep brand blue grounds the bright page
   ========================================================================== */
body.et-tour .et-footer,
.et-footer {
	background: var(--color-primary-dark);
	border-top: 0;
}