/*
 * Temishel — the brand display face, self-hosted.
 * Hand-drawn, condensed, heavy, and UNICASE: it has no lowercase, so every
 * word it sets reads as capitals whatever the markup says. That is why it
 * carries headings only and never body copy.
 * One weight, no italic — see the token notes below.
 */
@font-face {
	font-family: "Temishel";
	src: url("../fonts/temishel.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*
 * Humble Cat Safaris Tanzania — Design System
 * ---------------------------------------------------------------
 * Visual language: governorscamp.com, reverse-engineered from their own
 * stylesheets rather than from screenshots. Chalk ground, slate body
 * copy, hairline rules, wide-tracked uppercase SERIF headings, a brush
 * handwriting counterpoint, and pill buttons with asymmetric padding.
 * Palette anchor: the brand's five colours — Tuscan Terra Cotta #A37E6F,
 * Chalk White #FAF9F6, Acacia Gold #D2A654, Tanzanian Slate #3F423C,
 * Desert Bone #E9E4DB.
 * ---------------------------------------------------------------
 */

/* ===========================================================
   1. TOKENS
   =========================================================== */

:root {
	/*
	 * --- Core: Tanzanian Slate -----------------------------
	 * The deep neutral that carries all running text. Warm-leaning
	 * green-grey, never pure black, so it sits quietly on chalk.
	 */
	--hc-slate: #3f423c;        /* Tanzanian Slate — body copy */
	--hc-ink: #2b2e29;          /* slate deepened — headings, logo artwork */
	--hc-ink-soft: #3f423c;

	/*
	 * --- Primary: Tuscan Terra Cotta -----------------------
	 * #A37E6F is the brand anchor, but at 3.3:1 on chalk it is a
	 * LARGE-TEXT / SURFACE colour only. Anything set small or long
	 * uses --hc-terra-text; dark grounds use --hc-terra-deep.
	 */
	--hc-terra: #a37e6f;        /* exact brand terra cotta */
	--hc-terra-text: #6e5147;   /* small text, prices, links — 6.5:1 on chalk */
	--hc-terra-deep: #5e463d;   /* dark sections, footer, drawer — 7.8:1 */
	--hc-terra-mid: #7e5f52;    /* gradient midpoints */
	--hc-terra-tint: #c3a69a;   /* input hover borders, quiet dividers on dark */

	/* --- Accent: Acacia Gold ------------------------------- */
	--hc-gold: #d2a654;         /* exact brand gold — CTA fills, marks */
	--hc-gold-light: #e3c68d;   /* accent on dark grounds, stat numbers */
	--hc-gold-deep: #8a6a2c;    /* links in prose, hover — 4.5:1 on chalk */

	/* --- Neutrals: chalk and bone -------------------------- */
	--hc-bone: #faf9f6;         /* Chalk White — page ground */
	--hc-sand: #e9e4db;         /* Desert Bone — alternating sections */
	--hc-dune: #dccdc5;         /* Desert Bone pulled toward terra — media wells */
	--hc-stone: #c8b7af;        /* form borders, dividers — terra-tinted hairline */
	--hc-muted: #6b6e66;        /* secondary body copy — 4.7:1 on chalk */

	/*
	 * Body copy is Tanzanian Slate, not black — 9.2:1 on chalk, which
	 * is a large part of why the page reads soft rather than stark.
	 */
	--hc-taupe: var(--hc-slate);

	/*
	 * --- Back-compat aliases -------------------------------
	 * The olive names are used across ~60 rules and in the
	 * .hc-section--olive class. They now resolve to terra cotta.
	 */
	--hc-olive: var(--hc-terra-text);
	--hc-olive-deep: var(--hc-terra-deep);
	--hc-olive-mid: var(--hc-terra-mid);
	--hc-olive-tint: var(--hc-terra-tint);

	/* --- Semantic ------------------------------------------ */
	--hc-bg: var(--hc-bone);
	--hc-surface: #ffffff;
	--hc-surface-alt: var(--hc-sand);
	--hc-text: var(--hc-taupe);
	--hc-heading: var(--hc-ink);
	--hc-text-muted: var(--hc-muted);
	--hc-line: var(--hc-stone);
	--hc-line-soft: rgba(27, 29, 25, 0.09);
	--hc-accent: var(--hc-gold);
	--hc-accent-hover: var(--hc-gold-deep);
	--hc-on-dark: var(--hc-bone);

	/*
	 * Focus ring. Acacia Gold is only 2.0:1 on chalk — too faint to be a
	 * visible indicator on light ground — so the ring runs gold-deep by
	 * default (4.5:1) and switches to full gold inside dark contexts.
	 */
	--hc-focus: var(--hc-gold-deep);

	/*
	 * --- Type ------------------------------------------------
	 * Mirrors the three-role system on governorscamp.com, using
	 * freely licensed equivalents of their Adobe Fonts faces:
	 *
	 *   Mrs Eaves XL Serif Narrow  ->  Temishel (self-hosted) (display)
	 *   Acumin Pro Condensed       ->  Archivo Narrow       (UI / micro)
	 *   P22 Underground            ->  Jost                 (body)
	 *   dearJoe_1                  ->  Caveat               (script)
	 */
	--hc-display: "Temishel", "Archivo Narrow", Impact, sans-serif;
	--hc-ui: "Archivo Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--hc-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--hc-script: "Caveat", "Brush Script MT", cursive;

	/* Back-compat aliases used in a few older rules. */
	--hc-sans: var(--hc-body);
	--hc-serif: var(--hc-body);   /* Cormorant is gone; nothing should ask for a serif */

	--hc-fs-eyebrow: 0.75rem;                          /* 12px — Governors runs 11–13px */
	--hc-fs-body: 1.0625rem;                           /* 17px */
	--hc-fs-lead: clamp(1.125rem, 1.6vw, 1.3125rem);
	--hc-fs-h4: clamp(1.1875rem, 1.6vw, 1.4375rem);
	--hc-fs-h3: clamp(1.375rem, 2.2vw, 1.6875rem);
	--hc-fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
	--hc-fs-h1: clamp(2rem, 4.2vw, 3rem);
	--hc-fs-display: clamp(2.5rem, 7vw, 6.25rem);      /* the 100px Governors moment */

	/* Governors tracks hard: .29em on buttons, .2–.25em on labels, .15em on nav. */
	--hc-track-btn: 0.26em;
	--hc-track-wide: 0.24em;
	--hc-track-mid: 0.15em;
	--hc-track-tight: 0.06em;
	--hc-track-display: 0.2em;

	/* --- Space (4px base) ---------------------------------- */
	--hc-1: 4px;   --hc-2: 8px;   --hc-3: 12px;  --hc-4: 16px;
	--hc-5: 24px;  --hc-6: 32px;  --hc-7: 48px;  --hc-8: 64px;
	--hc-9: 96px;  --hc-10: 128px;

	--hc-section: clamp(64px, 9vw, 128px);
	--hc-gutter: clamp(20px, 4vw, 48px);
	--hc-max: 1200px;   /* matches the Governors container */
	--hc-max-narrow: 760px;
	--hc-max-wide: 1560px;

	/* --- Shape --------------------------------------------- */
	--hc-radius: 5px;
	--hc-radius-pill: 999px;
	--hc-shadow-soft: 0 1px 2px rgba(27, 29, 25, .04), 0 12px 32px -12px rgba(27, 29, 25, .12);
	--hc-shadow-lift: 0 2px 4px rgba(27, 29, 25, .05), 0 24px 56px -20px rgba(27, 29, 25, .22);

	--hc-ease: cubic-bezier(.22, .61, .36, 1);
	--hc-header-h: 88px;
}

/* ===========================================================
   2. BASE
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--hc-bg);
	color: var(--hc-text);
	font-family: var(--hc-sans);
	font-size: var(--hc-fs-body);
	font-weight: 400;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color .25s var(--hc-ease); }
a:hover { color: var(--hc-accent); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; line-height: 1.2; }
p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.25em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--hc-line-soft); margin: var(--hc-7) 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--hc-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.hc-sr {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hc-skip {
	position: absolute; top: -100px; left: var(--hc-4); z-index: 999;
	background: var(--hc-olive-deep); color: var(--hc-on-dark);
	padding: var(--hc-3) var(--hc-5); border-radius: var(--hc-radius-pill);
}
.hc-skip:focus { top: var(--hc-4); }

/* ===========================================================
   3. LAYOUT
   =========================================================== */

.hc-wrap { width: 100%; max-width: var(--hc-max); margin-inline: auto; padding-inline: var(--hc-gutter); }
.hc-wrap--narrow { max-width: var(--hc-max-narrow); }
.hc-wrap--wide { max-width: var(--hc-max-wide); }

.hc-section { padding-block: var(--hc-section); }
.hc-section--tight { padding-block: clamp(48px, 6vw, 80px); }
.hc-section--flush-top { padding-top: 0; }

/*
 * An in-page jump lands behind the sticky bar without this: the safari hero's
 * own "See the itineraries" button put the section eyebrow underneath it, and
 * the skip link did the same to the first thing a keyboard user reaches. The
 * height comes measured from the header script, because --hc-header-h is a
 * design constant and the bar is whatever the logo and breakpoint make it.
 */
.hc-section[id],
.hc-hero[id],
#hc-main { scroll-margin-top: calc(var(--hc-header-real, 92px) + var(--hc-5)); }

.hc-section--sand { background: var(--hc-surface-alt); }
.hc-section--dune { background: var(--hc-dune); }

/*
 * Changing band is how a page says "new subject". Where two sections of the
 * same band meet the join disappears into a quarter-screen of identical field,
 * so a hairline marks the seam instead, and the doubled padding drops to the
 * tight step: sections that share a band are one subject in two movements and
 * belong closer together than the ones colour already separates.
 */
.hc-section--sand + .hc-section--sand,
.hc-section:not(.hc-section--sand, .hc-section--olive, .hc-section--terra, .hc-section--dune)
	+ .hc-section:not(.hc-section--sand, .hc-section--olive, .hc-section--terra, .hc-section--dune, .hc-section--flush-top) {
	border-top: 1px solid var(--hc-line-soft);
	padding-top: clamp(48px, 6vw, 80px);
}
.hc-section--sand:has(+ .hc-section--sand),
.hc-section:not(.hc-section--sand, .hc-section--olive, .hc-section--terra, .hc-section--dune):has(
	+ .hc-section:not(.hc-section--sand, .hc-section--olive, .hc-section--terra, .hc-section--dune, .hc-section--flush-top)) {
	padding-bottom: clamp(48px, 6vw, 80px);
}

/*
 * Flat Tuscan Terra Cotta band. Ink on #A37E6F is 3.8:1 — that is
 * AA for LARGE text only, so this band carries a display heading, a
 * short lead and a button. Never a paragraph of body copy: use
 * .hc-section--olive (terra-deep, 7.8:1) when there is real reading.
 */
.hc-section--terra {
	background: var(--hc-terra);
	color: var(--hc-ink);
	--hc-focus: var(--hc-ink);
	--hc-text: var(--hc-ink);
	--hc-heading: var(--hc-ink);
	--hc-text-muted: rgba(43, 46, 41, .78);
	--hc-line-soft: rgba(43, 46, 41, .18);
	--hc-line: rgba(43, 46, 41, .28);
}

.hc-section--olive {
	background: var(--hc-olive-deep);
	color: var(--hc-on-dark);
	--hc-focus: var(--hc-gold);
	--hc-text: var(--hc-on-dark);
	--hc-heading: var(--hc-on-dark);
	--hc-text-muted: rgba(250, 249, 246, .62);
	--hc-line-soft: rgba(250, 249, 246, .14);
	--hc-line: rgba(250, 249, 246, .22);
}

.hc-grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.hc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hc-grid--sidebar { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }

@media (max-width: 1024px) {
	.hc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hc-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
	.hc-grid--2, .hc-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.hc-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================
   4. TYPOGRAPHY PRIMITIVES
   =========================================================== */

/* The small gold tracked label that opens nearly every section. */
.hc-eyebrow {
	display: block;
	font-family: var(--hc-ui);
	font-size: var(--hc-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--hc-track-wide);
	text-transform: uppercase;
	color: var(--hc-accent);
	margin: 0 0 var(--hc-4);
}

/*
 * Section headings are SERIF, uppercase, widely tracked. This is the single
 * most characteristic thing about the Governors look and the easiest to get
 * wrong — those headings read as a light sans at a glance, but they are
 * Mrs Eaves set at .2em.
 */
.hc-title {
	color: var(--hc-heading);
	font-family: var(--hc-display);
	font-size: var(--hc-fs-h2);
	font-weight: 400;
	letter-spacing: var(--hc-track-display);
	text-transform: uppercase;
	line-height: 1.24;
}
.hc-title--lg { font-size: var(--hc-fs-h1); }
.hc-title--sm { font-size: var(--hc-fs-h3); letter-spacing: 0.12em; }

/* The oversized statement heading. */
.hc-display {
	color: var(--hc-heading);
	font-family: var(--hc-display);
	font-size: var(--hc-fs-display);
	font-weight: 400;
	letter-spacing: 0.11em;
	line-height: 1.02;
	text-transform: uppercase;
}

/* Handwritten counterpoint — "UNHURRIED / by design" */
.hc-display__script,
.hc-script {
	display: block;
	font-family: var(--hc-script);
	font-style: normal;
	font-weight: 500;
	font-size: 1.18em;      /* Caveat runs small; lift it against the caps above */
	text-transform: none;
	letter-spacing: 0;
	line-height: 0.96;
	color: var(--hc-gold-light);
}

.hc-lead {
	font-size: var(--hc-fs-lead);
	font-weight: 300;
	line-height: 1.65;
	color: var(--hc-text-muted);
}

.hc-section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 64px); }
.hc-section-head--center { margin-inline: auto; text-align: center; }
.hc-section-head p { margin-top: var(--hc-4); color: var(--hc-text-muted); }

/* Hairline with a centred label, Governors-style */
.hc-rule {
	display: flex; align-items: center; gap: var(--hc-5);
	margin-block: var(--hc-7);
}
.hc-rule::before, .hc-rule::after {
	content: ""; flex: 1; height: 1px; background: var(--hc-line-soft);
}
.hc-rule span {
	font-size: var(--hc-fs-eyebrow); letter-spacing: var(--hc-track-wide);
	text-transform: uppercase; color: var(--hc-text-muted);
	font-family: var(--hc-ui);
}

/* ===========================================================
   5. BUTTONS
   =========================================================== */

/*
 * Governors' button: 14px / 700 / .29em, 30px radius, and asymmetric padding
 * (33px left, 59px right) so the label sits left of an arrow. Reproduced here
 * with the arrow drawn as a pseudo-element that extends on hover.
 */
.hc-btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--hc-3);
	padding: 14px 52px 14px 30px;
	border: 1px solid currentColor;
	border-radius: var(--hc-radius-pill);
	background: transparent;
	color: var(--hc-ink);
	font-family: var(--hc-ui);
	font-size: 0.875rem;            /* 14px */
	font-weight: 600;
	letter-spacing: var(--hc-track-btn);
	text-transform: uppercase;
	line-height: 1.25;
	cursor: pointer;
	text-align: left;
	transition: background .3s var(--hc-ease), color .3s var(--hc-ease), border-color .3s var(--hc-ease), transform .3s var(--hc-ease);
}
.hc-btn::after {
	content: "";
	position: absolute; right: 24px; top: 50%;
	width: 16px; height: 1px;
	background: currentColor;
	transform: translateY(-50%);
	transition: width .3s var(--hc-ease), right .3s var(--hc-ease);
}
.hc-btn:hover::after { width: 22px; right: 20px; }
.hc-btn:hover { background: var(--hc-ink); color: var(--hc-bone); border-color: var(--hc-ink); transform: translateY(-1px); }

.hc-btn--gold { background: var(--hc-gold); border-color: var(--hc-gold); color: var(--hc-ink); }
.hc-btn--gold:hover { background: var(--hc-gold-deep); border-color: var(--hc-gold-deep); color: #fff; }

.hc-btn--olive { background: var(--hc-olive); border-color: var(--hc-olive); color: var(--hc-bone); }
.hc-btn--olive:hover { background: var(--hc-olive-deep); border-color: var(--hc-olive-deep); }

.hc-btn--light { border-color: rgba(250, 249, 246, .55); color: var(--hc-bone); }
.hc-btn--light:hover { background: var(--hc-bone); border-color: var(--hc-bone); color: var(--hc-ink); }

/*
 * On the terra cotta and terra-deep grounds the primary button runs a
 * WHITE fill with BLACK text — gold sits too close to terra cotta in
 * both hue and value to lift off it, and white is the cleanest, highest
 * contrast (21:1) mark on either brown.
 * Hover settles onto Desert Bone rather than inverting, so the button
 * does not lose its shape against the brown.
 */
.hc-section--terra .hc-btn--gold,
.hc-section--olive .hc-btn--gold,
.hc-footer .hc-btn--gold,
.hc-drawer .hc-btn--gold {
	background: #ffffff;
	border-color: #ffffff;
	color: #000000;
}
.hc-section--terra .hc-btn--gold:hover,
.hc-section--olive .hc-btn--gold:hover,
.hc-footer .hc-btn--gold:hover,
.hc-drawer .hc-btn--gold:hover {
	background: var(--hc-sand);
	border-color: var(--hc-sand);
	color: #000000;
}

.hc-btn--sm { padding: 11px 40px 11px 22px; font-size: 0.75rem; letter-spacing: var(--hc-track-wide); }
.hc-btn--sm::after { right: 18px; width: 12px; }
.hc-btn--sm:hover::after { width: 16px; right: 15px; }

/* Block buttons centre their label and pull the arrow in, so a two-line
   label still reads as centred. */
.hc-btn--block { display: flex; width: 100%; justify-content: center; text-align: center; padding-left: 26px; padding-right: 42px; }
.hc-btn--block::after { right: 18px; }
.hc-btn--block:hover::after { right: 14px; }

/* Text link with the small arrow, used all over the mega menu */
.hc-link {
	display: inline-flex; align-items: center; gap: var(--hc-2);
	font-family: var(--hc-ui);
	font-size: var(--hc-fs-eyebrow); font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	color: var(--hc-accent);
}
.hc-link::after {
	content: ""; width: 16px; height: 1px; background: currentColor;
	transition: width .3s var(--hc-ease);
}
.hc-link:hover::after { width: 26px; }

/* ===========================================================
   6. MEDIA + PLACEHOLDERS
   =========================================================== */

.hc-media { position: relative; overflow: hidden; background: var(--hc-dune); }
.hc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--hc-ease); }
.hc-media--4x3 { aspect-ratio: 4 / 3; }
.hc-media--3x2 { aspect-ratio: 3 / 2; }
.hc-media--16x9 { aspect-ratio: 16 / 9; }
.hc-media--1x1 { aspect-ratio: 1 / 1; }
.hc-media--portrait { aspect-ratio: 3 / 4; }

/*
 * Ships-with-no-photos fallback. A duotone savanna wash plus the
 * cheetah mark, so an empty theme still looks deliberate.
 */
.hc-placeholder {
	position: relative;
	background:
		radial-gradient(120% 90% at 78% 12%, rgba(210, 166, 84, .40) 0%, rgba(210, 166, 84, 0) 55%),
		radial-gradient(100% 80% at 12% 92%, rgba(94, 70, 61, .55) 0%, rgba(94, 70, 61, 0) 60%),
		linear-gradient(148deg, var(--hc-olive-mid) 0%, var(--hc-olive-deep) 58%, #33251f 100%);
}
.hc-placeholder::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--hc-mark, none) center / auto 58% no-repeat;
	opacity: .13;
	filter: brightness(0) invert(1);
}
.hc-placeholder--light {
	background:
		radial-gradient(110% 90% at 80% 10%, rgba(210, 166, 84, .30) 0%, rgba(210, 166, 84, 0) 58%),
		linear-gradient(150deg, var(--hc-sand) 0%, var(--hc-dune) 55%, var(--hc-stone) 100%);
}
.hc-placeholder--light::after { filter: none; opacity: .10; }

.hc-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(27, 29, 25, .58) 0%, rgba(27, 29, 25, .12) 38%, rgba(27, 29, 25, .78) 100%);
}
.hc-scrim--even { background: rgba(27, 29, 25, .48); }

/* ===========================================================
   7. TOP BAR + HEADER + MEGA MENU
   =========================================================== */


.hc-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--hc-bone);
	border-bottom: 1px solid var(--hc-line-soft);
	transition: box-shadow .3s var(--hc-ease);
}
.hc-header.is-stuck { box-shadow: 0 1px 24px rgba(27, 29, 25, .10); }

/*
 * Transparent-over-hero variant. The header stays sticky and in flow; the
 * hero is pulled up underneath it instead, so there is no jump when the
 * background fades in on scroll.
 */
.hc-header--overlay {
	background: transparent;
	border-bottom-color: rgba(250, 249, 246, .18);
	color: var(--hc-bone);
}
.hc-header--overlay.is-stuck {
	background: var(--hc-bone);
	color: var(--hc-ink);
	border-bottom-color: var(--hc-line-soft);
}
.hc-has-hero main > .hc-hero:first-child {
	margin-top: calc(-1 * var(--hc-header-h) - 1px);
	padding-top: var(--hc-header-h);
}

.hc-header__inner { display: flex; align-items: center; gap: var(--hc-6); min-height: var(--hc-header-h); }
.hc-header__brand { flex: 0 0 auto; display: block; }
.hc-header__brand img { height: 46px; width: auto; }
.hc-header__brand .hc-logo-light { display: none; }
.hc-header--overlay:not(.is-stuck) .hc-header__brand .hc-logo-light { display: block; }
.hc-header--overlay:not(.is-stuck) .hc-header__brand .hc-logo-dark { display: none; }

/*
 * The auto margin has to sit on the flex item, which is the <nav> element — on
 * the <ul> inside it it only right-aligns the list within a box already shrunk
 * to the list, which is to say it does nothing and the whole group packs left.
 * The <nav> keeps its width when the list inside is hidden for the burger, so
 * this one rule pushes menu, Inquire and burger right at every width. Only one
 * element may carry it: two auto margins split the free space and re-centre.
 */
.hc-header__inner > nav { margin-left: auto; }
.hc-header__actions { display: flex; align-items: center; gap: var(--hc-4); }

/* --- Primary nav ---------------------------------------- */
.hc-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.hc-nav > li { position: static; margin: 0; list-style: none; }
.hc-nav ul { list-style: none; margin: 0; padding: 0; }
.hc-nav > li > a {
	display: flex; align-items: center; gap: 6px;
	padding-block: var(--hc-5);
	font-size: 0.8125rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	position: relative;
	font-family: var(--hc-ui);
}
.hc-nav > li > a::after {
	content: ""; position: absolute; left: 0; bottom: 22px;
	width: 0; height: 1px; background: var(--hc-gold);
	transition: width .3s var(--hc-ease);
}
.hc-nav > li:hover > a::after { width: 100%; }
/*
 * Hover draws the rule in; the page you are actually on keeps a heavier one
 * that is already there. If both were a 1px line, "where am I" and "what is
 * under the cursor" would look identical.
 */
.hc-nav > li.current-menu-item > a::after,
.hc-nav > li.current-menu-parent > a::after,
.hc-nav > li.current-menu-ancestor > a::after,
.hc-nav > li.current_page_item > a::after,
.hc-nav > li.current_page_parent > a::after {
	width: 100%; height: 2px; transition: none;
}

.hc-nav__caret { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }

/*
 * The nav folds into the burger here. Inquire does not go with it — it is the
 * only call to action left in the header, so it stays beside the burger and
 * only drops on the narrowest phones, where the drawer carries it instead.
 */
@media (max-width: 1100px) { .hc-nav { display: none; } }
@media (max-width: 520px) { .hc-header__inquire { display: none; } }

/* --- Mega panel ------------------------------------------ */
.hc-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--hc-bone);
	color: var(--hc-ink);
	border-top: 1px solid var(--hc-line-soft);
	box-shadow: 0 24px 48px -24px rgba(27, 29, 25, .28);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .25s var(--hc-ease), transform .25s var(--hc-ease), visibility .25s;
}
.hc-nav > li:hover > .hc-mega,
.hc-nav > li:focus-within > .hc-mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* One column per second-level menu item, plus an optional promo panel. */
.hc-mega__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--hc-6) var(--hc-7);
	padding-block: var(--hc-7);
	align-items: start;
}
.hc-mega__col { min-width: 0; }
.hc-mega__col-head {
	display: block;
	font-size: var(--hc-fs-eyebrow); font-weight: 500;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase;
	color: var(--hc-accent); margin-bottom: var(--hc-4);
	padding-bottom: var(--hc-3); border-bottom: 1px solid var(--hc-line-soft);
	font-family: var(--hc-ui);
}
.hc-mega__col-head:hover { color: var(--hc-gold-deep); }
.hc-mega__list { list-style: none; margin: 0; padding: 0; }
.hc-mega__list li { margin-bottom: var(--hc-3); }
.hc-mega__list a { font-size: 0.9375rem; font-weight: 300; line-height: 1.45; display: block; }
.hc-mega__list a:hover { color: var(--hc-olive); transform: translateX(2px); }

.hc-mega__promo { background: var(--hc-sand); border-radius: var(--hc-radius); overflow: hidden; }
.hc-mega__promo .hc-media { aspect-ratio: 16 / 9; }
.hc-mega__promo-body { padding: var(--hc-5); }
.hc-mega__promo-body h4 { font-size: var(--hc-fs-h4); font-weight: 400; letter-spacing: var(--hc-track-tight); text-transform: uppercase; margin-bottom: var(--hc-2); font-family: var(--hc-display);}
.hc-mega__promo-body p { font-size: 0.875rem; color: var(--hc-text-muted); line-height: 1.6; }

/* --- Mobile drawer --------------------------------------- */
.hc-burger {
	display: none; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 1px solid currentColor;
	border-radius: var(--hc-radius-pill); background: transparent; cursor: pointer;
}
.hc-burger span { display: block; width: 16px; height: 1px; background: currentColor; position: relative; }
.hc-burger span::before, .hc-burger span::after {
	content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor;
	transition: transform .3s var(--hc-ease);
}
.hc-burger span::before { top: -5px; }
.hc-burger span::after { top: 5px; }
@media (max-width: 1100px) { .hc-burger { display: inline-flex; } }

.hc-drawer {
	position: fixed; inset: 0; z-index: 200;
	background: var(--hc-olive-deep); color: var(--hc-on-dark);
	--hc-focus: var(--hc-gold);
	overflow-y: auto; padding: var(--hc-6) 0 var(--hc-8);
	transform: translateX(100%); transition: transform .38s var(--hc-ease);
	visibility: hidden;
}
.hc-drawer.is-open { transform: translateX(0); visibility: visible; }
.hc-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--hc-6); }
.hc-drawer__close { width: 44px; height: 44px; border: 1px solid rgba(250, 249, 246,.4); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font-size: 20px; line-height: 1; }
.hc-drawer ul { list-style: none; margin: 0; padding: 0; }
.hc-drawer > .hc-wrap > ul > li { border-bottom: 1px solid rgba(250, 249, 246, .12); }
.hc-drawer a { display: block; padding: var(--hc-4) 0; letter-spacing: var(--hc-track-tight); }
.hc-drawer > .hc-wrap > ul > li > a { text-transform: uppercase; font-size: 0.9375rem; letter-spacing: var(--hc-track-mid); font-family: var(--hc-ui);}
/* The drawer has no hover to compete with, so the current page just goes gold. */
.hc-drawer > .hc-wrap > ul > li.current-menu-item > a,
.hc-drawer > .hc-wrap > ul > li.current-menu-parent > a,
.hc-drawer > .hc-wrap > ul > li.current-menu-ancestor > a,
.hc-drawer > .hc-wrap > ul > li.current_page_item > a,
.hc-drawer .sub-menu li.current-menu-item > a { color: var(--hc-gold); }
.hc-drawer .sub-menu { padding-left: var(--hc-4); padding-bottom: var(--hc-3); display: none; }
.hc-drawer li.is-open > .sub-menu { display: block; }
.hc-drawer .sub-menu a { font-size: 0.875rem; font-weight: 300; color: rgba(250, 249, 246, .74); padding-block: var(--hc-2); }
.hc-drawer__toggle { position: absolute; right: 0; top: 8px; width: 36px; height: 36px; background: none; border: 0; color: inherit; cursor: pointer; }
.hc-drawer__row { position: relative; }

body.hc-no-scroll { overflow: hidden; }

/* ===========================================================
   8. HERO
   =========================================================== */

.hc-hero { position: relative; display: flex; align-items: flex-end; min-height: min(88vh, 860px); color: var(--hc-bone); overflow: hidden; }
.hc-hero--short { min-height: min(56vh, 520px); }
.hc-hero__media { position: absolute; inset: 0; }
.hc-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hc-hero { --hc-heading: var(--hc-bone); }
.hc-hero__inner { position: relative; width: 100%; padding-block: clamp(56px, 9vw, 120px); }
.hc-hero__content { max-width: 780px; }
.hc-hero .hc-eyebrow { color: var(--hc-gold-light); }
.hc-hero p { color: rgba(250, 249, 246, .84); max-width: 56ch; margin-top: var(--hc-5); }
.hc-hero__cta { display: flex; flex-wrap: wrap; gap: var(--hc-4); margin-top: var(--hc-6); }

/*
 * Long product names — tour and day-trip titles — read badly as tracked
 * uppercase. They get sentence case at display weight instead.
 */
.hc-hero__title {
	font-family: var(--hc-display);
	font-size: clamp(1.875rem, 4.6vw, 3.25rem);
	font-weight: 400;
	letter-spacing: .01em;
	line-height: 1.12;
	color: var(--hc-bone);
}

/* Fact band directly beneath a tour hero. Solid, so it never sits
   half-transparent over the cream page below. */
.hc-factstrip {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: var(--hc-olive-deep);
}
.hc-factstrip__item { padding: var(--hc-5) var(--hc-5); border-right: 1px solid rgba(250, 249, 246, .12); }
.hc-factstrip__item:last-child { border-right: 0; }
.hc-factstrip__label { display: block; font-size: 0.6875rem; letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-gold-light); margin-bottom: 6px; font-family: var(--hc-ui);}
.hc-factstrip__value { font-size: 1.0625rem; font-weight: 300; letter-spacing: .02em; color: var(--hc-bone); }

/* Big centred statement block on cream */
.hc-statement { text-align: center; max-width: 900px; margin-inline: auto; }
.hc-statement .hc-display { color: var(--hc-ink); }
.hc-statement .hc-script { color: var(--hc-olive); }
.hc-statement p { margin-top: var(--hc-5); color: var(--hc-text-muted); font-size: var(--hc-fs-lead); font-weight: 300; }

/* ===========================================================
   9. CARDS
   =========================================================== */

.hc-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--hc-surface);
	border: 1px solid var(--hc-line-soft);
	border-radius: var(--hc-radius);
	overflow: hidden;
	transition: transform .4s var(--hc-ease), box-shadow .4s var(--hc-ease), border-color .4s var(--hc-ease);
}
.hc-card:hover { transform: translateY(-4px); box-shadow: var(--hc-shadow-lift); border-color: transparent; }
.hc-card:hover .hc-media img { transform: scale(1.06); }
.hc-card__body { padding: var(--hc-5); display: flex; flex-direction: column; flex: 1; }
.hc-card__title { font-size: var(--hc-fs-h4); font-weight: 400; letter-spacing: var(--hc-track-tight); line-height: 1.3; margin-bottom: var(--hc-3); font-family: var(--hc-display);}
.hc-card__title a::after { content: ""; position: absolute; inset: 0; }
.hc-card__excerpt { font-size: 0.9375rem; font-weight: 300; color: var(--hc-text-muted); line-height: 1.65; }
.hc-card__meta {
	display: flex; flex-wrap: wrap; gap: var(--hc-2) var(--hc-4);
	font-size: 0.75rem; letter-spacing: var(--hc-track-mid);
	text-transform: uppercase; color: var(--hc-text-muted);
	margin-bottom: var(--hc-3);
	font-family: var(--hc-ui);
}
.hc-card__foot {
	margin-top: auto; padding-top: var(--hc-4);
	border-top: 1px solid var(--hc-line-soft);
	display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hc-4);
}
.hc-card__price-label { display: block; font-size: 0.6875rem; letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-text-muted); font-family: var(--hc-ui);}
.hc-card__price { font-family: var(--hc-display); font-size: 1.5rem; font-weight: 400; letter-spacing: .01em; color: var(--hc-olive); }
.hc-card__price small { font-size: 0.75rem; letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-text-muted); display: block; font-family: var(--hc-ui);}

.hc-badge {
	position: absolute; top: var(--hc-4); left: var(--hc-4); z-index: 2;
	background: var(--hc-gold); color: var(--hc-ink);
	font-size: 0.6875rem; font-weight: 500;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase;
	padding: 7px 14px; border-radius: var(--hc-radius-pill);
	font-family: var(--hc-ui);
}
.hc-badge--olive { background: var(--hc-olive); }

/* Editorial "image with caption over" card, used for parks */
.hc-tile { position: relative; display: block; border-radius: var(--hc-radius); overflow: hidden; color: var(--hc-bone); }
.hc-tile .hc-media { aspect-ratio: 3 / 4; }
.hc-tile:hover .hc-media img { transform: scale(1.06); }
.hc-tile__body { position: absolute; inset: auto 0 0 0; padding: var(--hc-5); }
.hc-tile__title { font-size: var(--hc-fs-h3); font-weight: 400; letter-spacing: var(--hc-track-tight); text-transform: uppercase; font-family: var(--hc-display);}
.hc-tile__sub { font-size: 0.8125rem; letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-gold-light); margin-bottom: 6px; display: block; font-family: var(--hc-ui);}

/* Review card */
.hc-review { background: var(--hc-surface); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius); padding: var(--hc-6); display: flex; flex-direction: column; }
.hc-review__head { display: flex; align-items: center; gap: var(--hc-4); margin-bottom: var(--hc-4); }
.hc-review__avatar { width: 48px; height: 48px; border-radius: 999px; overflow: hidden; flex: 0 0 auto; background: var(--hc-dune); }
.hc-review__name { font-size: 0.9375rem; letter-spacing: var(--hc-track-tight); }
.hc-review__date { font-size: 0.75rem; color: var(--hc-text-muted); }
.hc-review__stars { color: var(--hc-gold); letter-spacing: .18em; font-size: 0.8125rem; margin-bottom: var(--hc-3); }
.hc-review__title { font-size: var(--hc-fs-h4); font-weight: 400; margin-bottom: var(--hc-3); letter-spacing: var(--hc-track-tight); font-family: var(--hc-display);}
.hc-review__text { font-size: 0.9375rem; font-weight: 300; color: var(--hc-text-muted); line-height: 1.7; }
.hc-review__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* Team card */
.hc-person { text-align: center; }
.hc-person .hc-media { aspect-ratio: 3 / 4; border-radius: var(--hc-radius); margin-bottom: var(--hc-4); }
.hc-person__name { font-size: var(--hc-fs-h4); font-weight: 400; letter-spacing: var(--hc-track-tight); font-family: var(--hc-display);}
.hc-person__role { font-size: 0.75rem; letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-accent); margin-top: 6px; font-family: var(--hc-ui);}
.hc-person__bio { font-size: 0.875rem; font-weight: 300; color: var(--hc-text-muted); margin-top: var(--hc-3); line-height: 1.65; }

/* ===========================================================
   10. ITINERARY / ACCORDION / TABS
   =========================================================== */

.hc-accordion { border-top: 1px solid var(--hc-line-soft); }
.hc-accordion__item { border-bottom: 1px solid var(--hc-line-soft); }
.hc-accordion__trigger {
	width: 100%; display: flex; align-items: center; gap: var(--hc-5);
	padding: var(--hc-5) 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.hc-accordion__day {
	flex: 0 0 auto; min-width: 74px;
	font-size: 0.6875rem; letter-spacing: var(--hc-track-wide); text-transform: uppercase;
	color: var(--hc-accent);
	font-family: var(--hc-ui);
}
.hc-accordion__label { flex: 1; font-size: var(--hc-fs-h4); font-weight: 400; letter-spacing: var(--hc-track-tight); line-height: 1.35; font-family: var(--hc-display);}
.hc-accordion__icon { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.hc-accordion__icon::before, .hc-accordion__icon::after {
	content: ""; position: absolute; left: 50%; top: 50%; background: var(--hc-ink);
	transform: translate(-50%, -50%); transition: transform .3s var(--hc-ease), opacity .3s var(--hc-ease);
}
.hc-accordion__icon::before { width: 14px; height: 1px; }
.hc-accordion__icon::after { width: 1px; height: 14px; }
.hc-accordion__item.is-open .hc-accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.hc-accordion__panel { display: none; padding: 0 0 var(--hc-6) 94px; }
.hc-accordion__item.is-open .hc-accordion__panel { display: block; }
.hc-accordion__panel p { color: var(--hc-text-muted); font-weight: 300; }
.hc-accordion__facts { display: flex; flex-wrap: wrap; gap: var(--hc-2) var(--hc-5); margin-top: var(--hc-4); font-size: 0.75rem; letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-text-muted); font-family: var(--hc-ui);}
.hc-accordion__facts strong { color: var(--hc-olive); font-weight: 500; }
@media (max-width: 700px) {
	.hc-accordion__trigger { flex-wrap: wrap; gap: var(--hc-2) var(--hc-4); }
	.hc-accordion__label { flex-basis: 100%; order: 3; font-family: var(--hc-display);}
	.hc-accordion__panel { padding-left: 0; }
}

.hc-tabs__nav { display: flex; flex-wrap: wrap; gap: var(--hc-2); border-bottom: 1px solid var(--hc-line-soft); margin-bottom: var(--hc-6); }
.hc-tabs__btn {
	padding: var(--hc-4) var(--hc-5); background: none; border: 0; cursor: pointer;
	font-size: var(--hc-fs-eyebrow); font-weight: 500;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	color: var(--hc-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
	font-family: var(--hc-ui);
}
.hc-tabs__btn.is-active { color: var(--hc-ink); border-bottom-color: var(--hc-gold); }
.hc-tabs__panel { display: none; }
.hc-tabs__panel.is-active { display: block; }

/* ===========================================================
   11. LISTS: INCLUDES / EXCLUDES / FACTS
   =========================================================== */

.hc-ticks { list-style: none; padding: 0; margin: 0; }
.hc-ticks li { position: relative; padding-left: 30px; margin-bottom: var(--hc-3); font-weight: 300; color: var(--hc-text-muted); }
.hc-ticks li::before {
	content: ""; position: absolute; left: 4px; top: .62em;
	width: 11px; height: 6px; border-left: 1.5px solid var(--hc-olive); border-bottom: 1.5px solid var(--hc-olive);
	transform: rotate(-45deg);
}
.hc-ticks--cross li::before {
	width: 11px; height: 11px; border: 0; top: .5em; transform: none;
	background:
		linear-gradient(45deg, transparent 44%, var(--hc-stone) 44%, var(--hc-stone) 56%, transparent 56%),
		linear-gradient(-45deg, transparent 44%, var(--hc-stone) 44%, var(--hc-stone) 56%, transparent 56%);
}

.hc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--hc-5); }
.hc-fact { border-top: 1px solid var(--hc-line-soft); padding-top: var(--hc-4); }
.hc-fact__label { font-size: 0.6875rem; letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-text-muted); display: block; margin-bottom: 6px; font-family: var(--hc-ui);}
.hc-fact__value { font-size: 1.0625rem; font-weight: 300; }

/* Price table */
.hc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hc-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.hc-table th, .hc-table td { padding: var(--hc-4) var(--hc-5); text-align: left; border-bottom: 1px solid var(--hc-line-soft); }
.hc-table th {
	font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--hc-track-wide);
	text-transform: uppercase; color: var(--hc-text-muted); border-bottom-color: var(--hc-line);
	font-family: var(--hc-ui);
}
.hc-table td { font-weight: 300; }
.hc-table td:last-child { font-size: 1.0625rem; color: var(--hc-olive); white-space: nowrap; }
.hc-table tbody tr:hover { background: var(--hc-sand); }

/* Impact counters */
.hc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--hc-6) var(--hc-5); }
.hc-stat { text-align: center; }
.hc-stat__num { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 400; letter-spacing: .01em; color: var(--hc-gold-light); line-height: 1; font-family: var(--hc-display);}
.hc-stat__label { font-size: 0.75rem; letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-text-muted); margin-top: var(--hc-3); line-height: 1.6; font-family: var(--hc-ui);}

/* Achievements / logo wall */
.hc-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--hc-5); }
.hc-award { border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius); padding: var(--hc-6) var(--hc-5); background: var(--hc-surface); }
.hc-award__year { font-size: 0.6875rem; letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-accent); font-family: var(--hc-ui);}
.hc-award h3 { font-size: var(--hc-fs-h4); font-weight: 400; letter-spacing: var(--hc-track-tight); margin: var(--hc-3) 0; font-family: var(--hc-display);}
.hc-award p { font-size: 0.875rem; font-weight: 300; color: var(--hc-text-muted); line-height: 1.65; }

.hc-logowall { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--hc-6); align-items: center; }
.hc-logowall span {
	display: grid; place-items: center; min-height: 56px; padding: var(--hc-3);
	font-size: 0.8125rem; letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	color: var(--hc-text-muted); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
	text-align: center; line-height: 1.4;
	font-family: var(--hc-ui);
}

/* --- TripAdvisor reviews ----------------------------------- */
/*
 * The card is the whole section until someone asks for the widget. It has to
 * stand on its own, because most visitors will never press the button.
 */
.hc-ta { display: grid; justify-items: center; }
/* An explicit display would otherwise beat the hidden attribute. */
.hc-ta__card[hidden] { display: none; }
/*
 * Badge beside body, not stacked above it. Stacked, the card was a tall white
 * column holding one number and two buttons — a lot of height for very little
 * said. Side by side it reads as a plaque: the score is the object, the
 * sentence explains it, and the section stops being mostly air.
 */
.hc-ta__card {
	display: grid; grid-template-columns: auto minmax(0, 1fr);
	align-items: center; gap: clamp(24px, 4vw, 56px);
	width: min(100%, 920px); padding: var(--hc-6) clamp(24px, 4vw, 48px);
	background: var(--hc-surface);
	border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
	box-shadow: var(--hc-shadow-soft);
}

.hc-ta__badge {
	display: grid; justify-items: center; gap: var(--hc-2);
	/* The rule is the badge's own right edge, so it disappears with the
	   two-column layout rather than needing its own media query. */
	padding-right: clamp(24px, 4vw, 56px);
	border-right: 1px solid var(--hc-line-soft);
}
.hc-ta__score {
	font-family: var(--hc-display); font-size: clamp(3rem, 7vw, 4.5rem);
	line-height: .9; color: var(--hc-heading); letter-spacing: var(--hc-track-tight);
}
.hc-ta__stars { display: flex; gap: 3px; }
.hc-ta__star { color: var(--hc-line); display: flex; }
.hc-ta__star.is-on { color: var(--hc-gold); }
.hc-ta__star.is-on .hc-icon { fill: currentColor; }
.hc-ta__count {
	font-family: var(--hc-ui); font-size: 0.6875rem;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase;
	color: var(--hc-text-muted); margin: 0; white-space: nowrap;
}

.hc-ta__body { display: grid; gap: var(--hc-5); }
.hc-ta__blurb {
	margin: 0; font-weight: 300; font-size: 0.9375rem; line-height: 1.7;
	color: var(--hc-text-muted);
}
.hc-ta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-3) var(--hc-5); }

/* Below the fold of a phone the plaque becomes a stack, and the rule that
   divided the columns becomes the one that divides the rows. */
@media (max-width: 620px) {
	.hc-ta__card { grid-template-columns: minmax(0, 1fr); gap: var(--hc-5); text-align: center; }
	.hc-ta__badge {
		padding-right: 0; padding-bottom: var(--hc-5);
		border-right: 0; border-bottom: 1px solid var(--hc-line-soft);
	}
	.hc-ta__actions { justify-content: center; }
}
/* Their markup, their styling — all this can do is give it room. */
.hc-ta__widget { width: min(100%, 700px); margin-top: var(--hc-5); }
.hc-ta__widget:empty { margin-top: 0; }

/* "We're the right match if" edge cards */
.hc-match { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--hc-4); }
.hc-match__item {
	position: relative; padding: var(--hc-6) var(--hc-5);
	background: var(--hc-surface); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
	font-weight: 300; line-height: 1.6;
}
.hc-match__item::before {
	content: ""; position: absolute; left: var(--hc-5); top: 0; width: 40px; height: 2px; background: var(--hc-gold);
}

/* ===========================================================
   12. EXPERT CALL BAND + CTA BANDS
   =========================================================== */


.hc-cta-band { position: relative; color: var(--hc-bone); text-align: center; overflow: hidden; }
.hc-cta-band__inner { position: relative; padding-block: clamp(72px, 10vw, 140px); }

/* Split "bespoke OR packages" block, straight from Governors */
.hc-split { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.hc-split__or {
	align-self: center; font-family: var(--hc-script);
	font-size: clamp(2rem, 4.4vw, 3.25rem); color: var(--hc-stone);
	position: relative; padding-inline: var(--hc-5);
}
.hc-split__or::before, .hc-split__or::after {
	content: ""; position: absolute; left: 50%; width: 1px; background: var(--hc-line-soft);
}
.hc-split__or::before { top: -100px; height: 88px; }
.hc-split__or::after { bottom: -100px; height: 88px; }
.hc-split__col { text-align: center; }
.hc-split__col > p { color: var(--hc-text-muted); margin-top: var(--hc-4); }
@media (max-width: 860px) {
	.hc-split { grid-template-columns: minmax(0, 1fr); }
	.hc-split__or::before, .hc-split__or::after { display: none; }
}

/* Stacked list-style package picker */
.hc-picker { display: flex; flex-direction: column; gap: var(--hc-3); }
.hc-picker__row {
	display: flex; align-items: center; gap: var(--hc-4);
	padding: var(--hc-4) var(--hc-5);
	background: var(--hc-surface); border: 1px solid var(--hc-line-soft);
	border-radius: var(--hc-radius); text-align: left;
	transition: border-color .3s var(--hc-ease), transform .3s var(--hc-ease);
}
.hc-picker__row:hover { border-color: var(--hc-gold); transform: translateX(3px); }
.hc-picker__row span:first-of-type { flex: 1; color: var(--hc-accent); letter-spacing: var(--hc-track-tight); }
.hc-picker__row span:last-of-type { font-size: 0.6875rem; letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-text-muted); font-family: var(--hc-ui);}

/* ===========================================================
   13. FORMS
   =========================================================== */

.hc-form { display: grid; gap: var(--hc-5); }
.hc-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hc-5); }
@media (max-width: 640px) { .hc-form__row { grid-template-columns: minmax(0, 1fr); } }

.hc-field { display: flex; flex-direction: column; gap: var(--hc-2); }
.hc-field > label {
	font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--hc-track-wide);
	text-transform: uppercase; color: var(--hc-text-muted);
	font-family: var(--hc-ui);
}
.hc-field .req { color: var(--hc-gold-deep); }

/* The quiet half of a label — an age band, a unit. Set back in normal case so
   it reads as an aside rather than a second label. */
.hc-hint {
	margin-left: 6px;
	text-transform: none; letter-spacing: 0;
	font-size: 0.6875rem; font-weight: 300;
	color: var(--hc-stone);
}

/* A named group of fields — "who is travelling", "when". The browser default
   fieldset border and padding are removed; the legend carries the grouping. */
.hc-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--hc-3); min-inline-size: 100%; }
.hc-fieldset > legend {
	padding: 0; float: left; width: 100%;
	font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--hc-track-wide);
	text-transform: uppercase; color: var(--hc-text-muted);
	font-family: var(--hc-ui);
}
/* float: left above takes the legend out of flow, so the note needs to clear it. */
.hc-fieldset__note {
	clear: both;
	margin: 0 0 var(--hc-2);
	font-size: 0.8125rem; font-weight: 300; line-height: 1.6;
	color: var(--hc-text-muted);
}

.hc-form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hc-4); }

/* On a phone a three-up row stacks like any other — a month name has no room
   at a third of 390px. The rule has to be restated here rather than left to
   the .hc-form__row collapse above: that rule is earlier in the file and no
   more specific, so the three-column declaration would otherwise win.
   Counts are the exception: "2 / 0 / 1" is read as a party, and three stacked
   number boxes look like three unrelated questions. */
@media (max-width: 640px) {
	.hc-form__row--3 { grid-template-columns: minmax(0, 1fr); }

	.hc-form__row--count { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hc-2); }
	.hc-form__row--count .hc-input { padding-left: 12px; padding-right: 12px; text-align: center; }
	.hc-form__row--count .hc-hint { display: block; margin-left: 0; }
}

/* Number spinners are noise next to a pill field, and the arrows sit badly
   against the rounded edge. The keyboard and inputmode still work. */
.hc-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.hc-input[type="number"]::-webkit-outer-spin-button,
.hc-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hc-input, .hc-select, .hc-textarea {
	width: 100%;
	padding: 15px 20px;
	background: transparent;
	border: 1px solid var(--hc-line);
	border-radius: var(--hc-radius-pill);
	font-size: 0.9375rem; font-weight: 300;
	transition: border-color .25s var(--hc-ease), background .25s var(--hc-ease);
}
.hc-textarea { border-radius: 18px; min-height: 140px; resize: vertical; }
.hc-input:hover, .hc-select:hover, .hc-textarea:hover { border-color: var(--hc-olive-tint); }
.hc-input:focus, .hc-select:focus, .hc-textarea:focus { border-color: var(--hc-gold); background: var(--hc-surface); outline: none; }
.hc-input::placeholder, .hc-textarea::placeholder { color: var(--hc-stone); }

.hc-select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--hc-muted) 50%), linear-gradient(135deg, var(--hc-muted) 50%, transparent 50%);
	background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 17px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 46px;
}

/* Chip-style radio / checkbox set — "I prefer WhatsApp / e-mail / phone" */
.hc-chips { display: flex; flex-wrap: wrap; gap: var(--hc-3); }
.hc-chip { position: relative; }
.hc-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hc-chip span {
	display: inline-flex; align-items: center; gap: var(--hc-2);
	padding: 11px 22px; border: 1px solid var(--hc-line); border-radius: var(--hc-radius-pill);
	font-size: 0.75rem; letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	color: var(--hc-text-muted); cursor: pointer;
	transition: all .25s var(--hc-ease);
	font-family: var(--hc-ui);
}
.hc-chip input:checked + span { border-color: var(--hc-olive); background: var(--hc-olive); color: var(--hc-bone); }
.hc-chip input:focus-visible + span { outline: 2px solid var(--hc-focus); outline-offset: 3px; }

.hc-consent { display: flex; gap: var(--hc-3); align-items: flex-start; font-size: 0.8125rem; font-weight: 300; color: var(--hc-text-muted); line-height: 1.6; }
.hc-consent input { margin-top: 4px; accent-color: var(--hc-olive); width: 16px; height: 16px; flex: 0 0 auto; }
.hc-consent a { text-decoration: underline; text-underline-offset: 2px; }

.hc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hc-notice { padding: var(--hc-4) var(--hc-5); border-radius: var(--hc-radius); font-size: 0.9375rem; font-weight: 300; border: 1px solid; }
.hc-notice--ok { background: rgba(110, 81, 71, .07); border-color: var(--hc-olive-tint); color: var(--hc-olive); }
.hc-notice--err { background: rgba(138, 106, 44, .09); border-color: var(--hc-gold-deep); color: var(--hc-gold-deep); }

/* Form on a dark ground */
.hc-section--olive .hc-input,
.hc-section--olive .hc-select,
.hc-section--olive .hc-textarea { border-color: rgba(250, 249, 246, .28); color: var(--hc-bone); }
.hc-section--olive .hc-input:focus,
.hc-section--olive .hc-textarea:focus { background: rgba(250, 249, 246, .06); border-color: var(--hc-gold); }
.hc-section--olive .hc-chip span { border-color: rgba(250, 249, 246, .28); color: rgba(250, 249, 246, .74); }
.hc-section--olive .hc-chip input:checked + span { background: var(--hc-gold); border-color: var(--hc-gold); color: var(--hc-ink); }

/* Booking box that rides alongside a tour.
   The offset tracks the measured bar but is capped at what the collapsed bar
   costs — by the time anything is sticky the utility row has already folded
   away, and an uncapped value would shunt the box 61px as it does. */
.hc-booking {
	position: sticky; top: calc(min(var(--hc-header-real, 92px), 96px) + var(--hc-5));
	background: var(--hc-surface); border: 1px solid var(--hc-line-soft);
	border-radius: var(--hc-radius); padding: var(--hc-6); box-shadow: var(--hc-shadow-soft);
}
.hc-booking__price { padding-bottom: var(--hc-5); margin-bottom: var(--hc-5); border-bottom: 1px solid var(--hc-line-soft); }
.hc-booking__price .hc-card__price { font-size: 2rem; }

/* Sticky mobile action bar */
.hc-actionbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	display: none; align-items: center; gap: var(--hc-4);
	padding: var(--hc-3) var(--hc-4);
	background: var(--hc-bone); border-top: 1px solid var(--hc-line);
	box-shadow: 0 -8px 24px rgba(27, 29, 25, .08);
}
.hc-actionbar .hc-btn { flex: 1; padding-inline: var(--hc-4); }
@media (max-width: 1024px) { .hc-actionbar { display: flex; } body { padding-bottom: 76px; } }

/* --- floating WhatsApp ------------------------------------ */
/*
 * The markup for this has been in footer.php all along with no rules against
 * it, so it rendered as a bare inline icon. It is now the fixed bottom-right
 * button, and the header no longer carries a WhatsApp control.
 */
.hc-whatsapp {
	position: fixed; right: var(--hc-5); bottom: var(--hc-5); z-index: 95;
	display: grid; place-items: center; width: 56px; height: 56px;
	border-radius: 999px;
	background: var(--hc-olive); color: var(--hc-bone);
	box-shadow: 0 4px 10px rgba(27, 29, 25, .16), 0 14px 32px -12px rgba(27, 29, 25, .34);
	transition: transform .25s var(--hc-ease), background .25s var(--hc-ease);
}
.hc-whatsapp:hover { background: var(--hc-olive-deep); color: var(--hc-bone); transform: translateY(-2px); }
.hc-whatsapp:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: 3px; }

/*
 * Below 1024px the fixed action bar owns the bottom of the screen (76px, and
 * body carries matching padding). The button clears it rather than sitting on
 * top of the enquiry call to action.
 */
@media (max-width: 1024px) {
	.hc-whatsapp { bottom: calc(76px + var(--hc-3)); width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
	.hc-whatsapp:hover { transform: none; }
}

/* ===========================================================
   14. ARTICLE / PROSE
   =========================================================== */

.hc-prose { font-weight: 300; }
.hc-prose > * + * { margin-top: 1.4em; }
.hc-prose h2 { font-size: var(--hc-fs-h2); font-weight: 400; letter-spacing: var(--hc-track-display); text-transform: uppercase; margin-top: 2em; font-family: var(--hc-display);}
.hc-prose h3 { font-size: var(--hc-fs-h3); font-weight: 400; letter-spacing: var(--hc-track-tight); margin-top: 1.8em; font-family: var(--hc-display);}
.hc-prose h4 { font-size: var(--hc-fs-h4); font-weight: 500; letter-spacing: var(--hc-track-tight); }
.hc-prose a { color: var(--hc-olive); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hc-prose a:hover { color: var(--hc-gold-deep); }
.hc-prose blockquote {
	margin: 2em 0; padding-left: var(--hc-6); border-left: 2px solid var(--hc-gold);
	font-family: var(--hc-body); font-weight: 300; font-size: 1.3125rem; line-height: 1.6; color: var(--hc-olive);
}
.hc-prose figure { margin: 2em 0; }
.hc-prose figcaption { font-size: 0.8125rem; color: var(--hc-text-muted); margin-top: var(--hc-3); }
.hc-prose img { border-radius: var(--hc-radius); }
.hc-prose ul li::marker { color: var(--hc-gold); }

.hc-article-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-2) var(--hc-5);
	font-size: 0.75rem; letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	color: var(--hc-text-muted);
	font-family: var(--hc-ui);
}
.hc-author { display: flex; align-items: center; gap: var(--hc-4); padding: var(--hc-5); background: var(--hc-sand); border-radius: var(--hc-radius); }
.hc-author__avatar { width: 60px; height: 60px; border-radius: 999px; overflow: hidden; flex: 0 0 auto; background: var(--hc-dune); }

.hc-toc { background: var(--hc-sand); border-radius: var(--hc-radius); padding: var(--hc-5); }
.hc-toc ul { list-style: none; padding: 0; margin: 0; }
.hc-toc li { margin-bottom: var(--hc-2); }
.hc-toc a { font-size: 0.875rem; font-weight: 300; }

/* ===========================================================
   15. BREADCRUMBS / PAGINATION / FILTERS
   =========================================================== */

.hc-crumbs { font-size: 0.75rem; letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-text-muted); padding-block: var(--hc-4); font-family: var(--hc-ui);}
.hc-crumbs a { color: var(--hc-text-muted); }
.hc-crumbs a:hover { color: var(--hc-accent); }
.hc-crumbs span + span::before { content: "/"; margin: 0 10px; opacity: .5; }

.hc-pager { display: flex; justify-content: center; gap: var(--hc-2); margin-top: var(--hc-8); }
.hc-pager .page-numbers {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: var(--hc-3);
	border: 1px solid var(--hc-line-soft); border-radius: 999px;
	font-size: 0.8125rem; letter-spacing: .04em;
}
.hc-pager .page-numbers.current { background: var(--hc-olive); border-color: var(--hc-olive); color: var(--hc-bone); }
.hc-pager .page-numbers:hover:not(.current) { border-color: var(--hc-gold); color: var(--hc-gold-deep); }

.hc-filters { display: flex; flex-wrap: wrap; gap: var(--hc-3); align-items: center; padding-block: var(--hc-5); border-block: 1px solid var(--hc-line-soft); margin-bottom: var(--hc-7); }
.hc-filters__label { font-size: 0.6875rem; letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-text-muted); margin-right: var(--hc-2); font-family: var(--hc-ui);}
.hc-filters a {
	padding: 9px 20px; border: 1px solid var(--hc-line-soft); border-radius: 999px;
	font-size: 0.75rem; letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-text-muted);
	font-family: var(--hc-ui);
}
.hc-filters a:hover, .hc-filters a.is-active { background: var(--hc-olive); border-color: var(--hc-olive); color: var(--hc-bone); }

/* ===========================================================
   16. GALLERY
   =========================================================== */

.hc-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--hc-3); }
.hc-gallery a { display: block; overflow: hidden; border-radius: var(--hc-radius); }
.hc-gallery a:hover img { transform: scale(1.06); }
.hc-gallery .hc-media { aspect-ratio: 1 / 1; }

.hc-lightbox {
	position: fixed; inset: 0; z-index: 300; display: none;
	place-items: center; padding: var(--hc-6);
	background: rgba(27, 29, 25, .93);
}
.hc-lightbox.is-open { display: grid; }
.hc-lightbox img { max-width: min(1100px, 92vw); max-height: 88vh; width: auto; object-fit: contain; }
.hc-lightbox__close { position: absolute; top: var(--hc-5); right: var(--hc-5); width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(250, 249, 246,.4); background: none; color: var(--hc-bone); font-size: 22px; cursor: pointer; }

/* ===========================================================
   17. FOOTER — see section 26; the rules moved when the footer
   was rebuilt into four columns.
   =========================================================== */

/* ===========================================================
   18. REVEAL
   =========================================================== */

.hc-js .hc-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--hc-ease), transform .8s var(--hc-ease); }
/* Without the hc-js flag nothing is hidden in the first place: if the script
   fails to load, the page must still render, not fade to nothing. */
.hc-js .hc-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hc-js .hc-reveal { opacity: 1; transform: none; } }

/* ===========================================================
   19. WORDPRESS CORE CLASSES
   =========================================================== */

.alignleft { float: left; margin: 0 var(--hc-5) var(--hc-4) 0; }
.alignright { float: right; margin: 0 0 var(--hc-4) var(--hc-5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { width: min(1100px, 100%); margin-inline: auto; }
.alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }
.wp-caption-text, .gallery-caption { font-size: 0.8125rem; color: var(--hc-text-muted); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sticky .hc-card { border-color: var(--hc-gold); }

/* ===========================================================
   20. PRINT
   =========================================================== */

@media print {
	.hc-header, .hc-footer, .hc-actionbar, .hc-whatsapp, .hc-booking, .hc-drawer { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.hc-accordion__panel { display: block !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ===========================================================
   21. HOME PAGE — the Altezza-order sections
   Everything below is new structure layered on the existing
   Governors-derived tokens. No new colours, no new type roles.
   =========================================================== */

/* --- shared helpers -------------------------------------- */
.hc-center { margin-top: var(--hc-7); text-align: center; }


/* --- search overlay -------------------------------------- */
.hc-search {
	position: fixed; inset: 0; z-index: 200; display: none;
	align-items: center;
	background: rgba(94, 70, 61, .97);
	color: var(--hc-bone);
	--hc-heading: var(--hc-bone);
	--hc-focus: var(--hc-gold);
}
.hc-search.is-open { display: flex; }
.hc-search .hc-eyebrow { color: var(--hc-gold-light); }
.hc-search form { display: flex; flex-wrap: wrap; gap: var(--hc-4); align-items: center; margin-top: var(--hc-5); }
.hc-search__field {
	flex: 1 1 320px; min-width: 0;
	background: none; border: 0; border-bottom: 1px solid rgba(250, 249, 246, .4);
	color: var(--hc-bone);
	font-family: var(--hc-display); font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 400;
	padding: var(--hc-3) 0;
}
.hc-search__field::placeholder { color: rgba(250, 249, 246, .38); }
.hc-search__field:focus { outline: 0; border-bottom-color: var(--hc-gold); }
.hc-search__hint { margin-top: var(--hc-5); font-size: 0.8125rem; color: rgba(250, 249, 246, .58); font-weight: 300; }
.hc-search__close {
	position: absolute; top: var(--hc-5); right: var(--hc-gutter);
	background: none; border: 0; color: inherit; font-size: 2.5rem; line-height: 1; cursor: pointer;
}

/* --- header WhatsApp action ------------------------------- */
.hc-btn--wa { background: var(--hc-olive); border-color: var(--hc-olive); color: var(--hc-bone); }
.hc-btn--wa:hover { background: var(--hc-olive-deep); border-color: var(--hc-olive-deep); color: var(--hc-bone); }
@media (max-width: 1080px) { .hc-btn--wa span { display: none; } .hc-btn--wa { padding: 11px 34px 11px 16px; } }
@media (max-width: 900px) { .hc-btn--wa { display: none; } }

/* --- home hero: centred, unlike the left-aligned inner heroes */
.hc-hero--home { align-items: center; text-align: center; padding-bottom: clamp(48px, 7vw, 96px); }
.hc-hero__content--center { max-width: 860px; margin-inline: auto; }
.hc-hero__content--center p { margin-inline: auto; }
.hc-hero__content--center .hc-hero__cta { justify-content: center; }

/* --- trust strip, overlapping the hero -------------------- */
.hc-trustbar {
	position: relative; z-index: 5; margin-top: clamp(-64px, -5vw, -32px);
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--hc-6);
	align-items: center;
	background: var(--hc-surface);
	border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
	box-shadow: var(--hc-shadow-soft);
	padding: var(--hc-5) var(--hc-6);
}
.hc-trustbar__seal { display: flex; align-items: center; gap: var(--hc-3); padding-right: var(--hc-6); border-right: 1px solid var(--hc-line-soft); }
.hc-trustbar__seal svg { color: var(--hc-olive); flex: none; }
.hc-trustbar__seal span { display: grid; font-family: var(--hc-ui); font-size: 0.6875rem; letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-text-muted); line-height: 1.5; }
.hc-trustbar__seal strong { color: var(--hc-heading); font-weight: 600; letter-spacing: var(--hc-track-wide); }

.hc-trustbar__scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--hc-5); }
.hc-trustbar__score { display: flex; align-items: center; gap: var(--hc-3); }
a.hc-trustbar__score:hover .hc-trustbar__num { background: var(--hc-gold); border-color: var(--hc-gold); color: var(--hc-ink); }
.hc-trustbar__num {
	display: grid; place-items: center; flex: none; width: 44px; height: 44px;
	border: 1px solid var(--hc-line); border-radius: 999px;
	font-family: var(--hc-display); font-size: 1.0625rem; color: var(--hc-heading);
	transition: all .3s var(--hc-ease);
}
.hc-trustbar__body { display: grid; min-width: 0; font-family: var(--hc-ui); line-height: 1.45; }
.hc-trustbar__body strong { font-size: 0.8125rem; font-weight: 600; letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-heading); }
.hc-trustbar__body span { font-size: 0.6875rem; letter-spacing: .08em; color: var(--hc-text-muted); }

@media (max-width: 900px) {
	.hc-trustbar { grid-template-columns: minmax(0, 1fr); margin-top: var(--hc-6); }
	.hc-trustbar__seal { padding-right: 0; padding-bottom: var(--hc-4); border-right: 0; border-bottom: 1px solid var(--hc-line-soft); }
}

/* --- the two pillars -------------------------------------- */
.hc-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--hc-5); }
.hc-pillar {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--hc-radius);
	min-height: clamp(320px, 34vw, 440px);
	color: var(--hc-bone);
	isolation: isolate;
}
.hc-pillar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--hc-ease); }
.hc-pillar:hover .hc-pillar__img { transform: scale(1.06); }
.hc-pillar .hc-scrim { z-index: 1; }
.hc-pillar__body {
	position: relative; z-index: 2;
	display: grid; justify-items: start; gap: var(--hc-3);
	height: 100%; align-content: end;
	padding: clamp(24px, 4vw, 44px);
}
.hc-pillar__sub { font-family: var(--hc-ui); font-size: var(--hc-fs-eyebrow); font-weight: 600; letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-gold-light); }
.hc-pillar__title { font-family: var(--hc-display); font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 400; letter-spacing: var(--hc-track-display); text-transform: uppercase; line-height: 1.15; }
.hc-pillar .hc-btn { margin-top: var(--hc-3); pointer-events: none; }
.hc-pillar:hover .hc-btn { background: var(--hc-bone); border-color: var(--hc-bone); color: var(--hc-ink); }

/* --- why travel with us ----------------------------------- */
.hc-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--hc-4); }
.hc-reason {
	padding: var(--hc-6) var(--hc-5);
	background: rgba(250, 249, 246, .05);
	border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
}
.hc-reason__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(227, 198, 141, .4); color: var(--hc-gold-light); margin-bottom: var(--hc-4); }
.hc-reason h3 { font-family: var(--hc-display); font-size: var(--hc-fs-h4); font-weight: 400; letter-spacing: var(--hc-track-tight); margin: 0 0 var(--hc-3); }
.hc-reason p { margin: 0; font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: rgba(250, 249, 246, .72); }

.hc-twincta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hc-4); margin-top: var(--hc-7); }

/* --- filter pills ----------------------------------------- */
.hc-pills { display: flex; flex-wrap: wrap; gap: var(--hc-3); margin-bottom: var(--hc-6); }
.hc-pills--center, .hc-section-head--center + .hc-pills { justify-content: center; }
.hc-pill {
	padding: 10px 22px; border: 1px solid var(--hc-line); border-radius: var(--hc-radius-pill);
	background: none; cursor: pointer; color: var(--hc-text-muted);
	font-family: var(--hc-ui); font-size: 0.75rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	transition: all .25s var(--hc-ease);
}
.hc-pill:hover { border-color: var(--hc-olive); color: var(--hc-olive); }
.hc-pill.is-active { background: var(--hc-olive); border-color: var(--hc-olive); color: var(--hc-bone); }

/* --- horizontal rail -------------------------------------- */
.hc-rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
	gap: var(--hc-5);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	/* Bleed to the viewport edge on small screens, so a card is always
	   visibly cut off and the rail reads as scrollable. */
	margin-inline: calc(-1 * var(--hc-gutter)); padding-inline: var(--hc-gutter);
	padding-bottom: var(--hc-4);
	scrollbar-width: none;
}
.hc-rail::-webkit-scrollbar { display: none; }
.hc-rail__item { scroll-snap-align: start; min-width: 0; }
.hc-rail__item.is-hidden { display: none; }
.hc-rail--match { grid-auto-columns: minmax(280px, 1fr); }
.hc-rail--match .hc-match__item { height: 100%; }

/*
 * Chip rail. The base rail sizes columns for cards (min 300px) and bleeds to
 * the viewport edge; a strip of month pills wants neither. Snap is proximity
 * rather than mandatory so a half-visible month does not get yanked around
 * while the pointer is still moving.
 */
.hc-rail--chips {
	grid-auto-columns: max-content; gap: var(--hc-1);
	margin-inline: 0; padding-inline: 0; padding-bottom: 0;
	/* No snapping. Card rails snap because a half-card is ugly; a half-visible
	   month pill is fine, and centre-snapping a 120px chip fought every scroll
	   and dragged the strip back to zero. */
	scroll-snap-type: none;
}
/* .hc-rail__item is display:flex to match card heights; a chip is a button,
   so its text needs centring back. */
.hc-rail--chips .hc-rail__item {
	scroll-snap-align: none;
	align-items: center; justify-content: center;
}

.hc-rail__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--hc-4); margin-top: var(--hc-6); }
.hc-rail__btn {
	display: grid; place-items: center; width: 46px; height: 46px;
	border: 1px solid var(--hc-line); border-radius: 999px;
	background: none; cursor: pointer; color: var(--hc-heading); font-size: 1rem;
	transition: all .25s var(--hc-ease);
}
.hc-rail__btn:hover { background: var(--hc-olive); border-color: var(--hc-olive); color: var(--hc-bone); }
.hc-rail__btn[disabled] { opacity: .3; cursor: default; }
.hc-rail__btn[disabled]:hover { background: none; border-color: var(--hc-line); color: var(--hc-heading); }

@media (min-width: 1024px) {
	/* Three across on desktop, still snapping. */
	.hc-rail { grid-auto-columns: calc((100% - (var(--hc-5) * 2)) / 3); margin-inline: 0; padding-inline: 0; }
	.hc-rail--match { grid-auto-columns: calc((100% - (var(--hc-5) * 3)) / 4); }
	/* Chips size to their label at every width — three-across is for cards. */
	.hc-rail--chips { grid-auto-columns: max-content; }
}

/* --- achievements wall ------------------------------------ */
.hc-badgewall { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--hc-4); }
.hc-badge-tile {
	display: grid; justify-items: center; gap: var(--hc-2); text-align: center;
	padding: var(--hc-6) var(--hc-4);
	background: var(--hc-surface); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
	transition: box-shadow .3s var(--hc-ease), transform .3s var(--hc-ease);
}
.hc-badge-tile:hover { box-shadow: var(--hc-shadow-soft); transform: translateY(-2px); }
.hc-badge-tile img { max-height: 72px; width: auto; object-fit: contain; margin-bottom: var(--hc-2); }
.hc-badge-tile__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: var(--hc-sand); color: var(--hc-gold-deep); margin-bottom: var(--hc-2); }
.hc-badge-tile strong { font-family: var(--hc-display); font-size: 1.0625rem; font-weight: 400; letter-spacing: var(--hc-track-tight); color: var(--hc-heading); line-height: 1.3; }
.hc-badge-tile span { font-family: var(--hc-ui); font-size: 0.6875rem; letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-text-muted); }

/* --- video facade ----------------------------------------- */
.hc-video {
	position: relative; display: block; width: 100%; padding: 0;
	aspect-ratio: 16 / 9; overflow: hidden;
	border: 0; border-radius: var(--hc-radius); background: var(--hc-dune);
	cursor: pointer;
}
.hc-video__poster { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--hc-ease); }
.hc-video:hover .hc-video__poster { transform: scale(1.04); }
.hc-video__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 29, 25, .1), rgba(27, 29, 25, .45)); }
.hc-video__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: grid; place-items: center;
	width: clamp(64px, 7vw, 88px); aspect-ratio: 1;
	border-radius: 999px; background: rgba(250, 249, 246, .92);
	transition: background .3s var(--hc-ease), transform .3s var(--hc-ease);
}
.hc-video__play::before {
	content: ""; margin-left: 4px;
	border-style: solid; border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--hc-ink);
}
.hc-video:hover .hc-video__play { background: var(--hc-gold); transform: translate(-50%, -50%) scale(1.06); }
.hc-video:hover .hc-video__play::before { border-left-color: #fff; }
.hc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hc-video--feature { max-width: 1000px; margin-inline: auto; }

/* --- Instagram strip -------------------------------------- */
.hc-gram { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--hc-2); }
.hc-gram__tile { position: relative; display: block; overflow: hidden; border-radius: var(--hc-radius); aspect-ratio: 1; }
.hc-gram__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--hc-ease); }
.hc-gram__tile:hover img { transform: scale(1.07); }

/* --- pre-footer connect band ------------------------------ */
.hc-connect { background: var(--hc-dune); padding-block: clamp(40px, 6vw, 72px); }
.hc-connect__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--hc-7); align-items: center; }
.hc-connect__intro h2 { margin: 0; }
.hc-connect__intro p { margin: var(--hc-2) 0 0; font-size: 0.9375rem; font-weight: 300; color: var(--hc-text-muted); max-width: 46ch; }

.hc-connect__ways { display: grid; grid-auto-flow: column; gap: var(--hc-3); }
.hc-connect__way {
	display: grid; justify-items: center; gap: var(--hc-2);
	min-width: 92px; padding: var(--hc-4) var(--hc-3);
	background: var(--hc-surface); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase; text-align: center;
	color: var(--hc-heading);
	transition: all .25s var(--hc-ease);
}
.hc-connect__way svg { color: var(--hc-olive); }
.hc-connect__way:hover { background: var(--hc-olive); border-color: var(--hc-olive); color: var(--hc-bone); }
.hc-connect__way:hover svg { color: var(--hc-gold-light); }

@media (max-width: 980px) {
	.hc-connect__inner { grid-template-columns: minmax(0, 1fr); }
	.hc-connect__ways { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
}

/* --- footer strip ----------------------------------------- */
.hc-footer__strip {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--hc-5);
	padding-block: var(--hc-6);
	border-top: 1px solid rgba(250, 249, 246, .12);
}
.hc-footer__strip-set { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-2); }
.hc-footer__strip-label { font-family: var(--hc-ui); font-size: 0.625rem; letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: rgba(250, 249, 246, .5); margin-right: var(--hc-2); }
.hc-footer__chip {
	padding: 6px 14px; border: 1px solid rgba(250, 249, 246, .18); border-radius: var(--hc-radius);
	font-family: var(--hc-ui); font-size: 0.6875rem; letter-spacing: .08em;
	color: rgba(250, 249, 246, .74);
}

/* ===========================================================
   22. FIXES FOUND IN RENDER
   =========================================================== */

/*
 * Adding the WhatsApp action to the header left the nav short of room:
 * "Day Trips" and "About Us" broke over two lines and the CTA over three.
 * Labels never wrap; the row tightens instead, and the WhatsApp label drops
 * to an icon before anything else is allowed to break.
 */
.hc-btn, .hc-nav > li > a { white-space: nowrap; }
.hc-header__inner { gap: var(--hc-5); }
.hc-nav { gap: clamp(14px, 1.7vw, 28px); }
.hc-header__actions { gap: var(--hc-3); }
@media (max-width: 1280px) { .hc-btn--wa span { display: none; } .hc-btn--wa { padding: 11px 34px 11px 16px; } }

/* Cards in a rail must match heights, or the row reads as broken. */
.hc-rail__item { display: flex; }
.hc-rail__item > * { width: 100%; }
.hc-rail__item .hc-card { height: 100%; }

/*
 * The expert band paints itself dark but never re-pointed --hc-heading, so
 * its h2 rendered near-black on olive. Same for the enquiry band's labels.
 */

/* Eight achievements land as 5 + 3; four columns give two clean rows. */
@media (min-width: 1024px) { .hc-badgewall { grid-template-columns: repeat(4, 1fr); } }

/*
 * Park tiles and pillar cards set their titles straight onto the photograph.
 * The shared scrim was tuned against the dark branded placeholder; real
 * safari photography is far brighter — bleached grass, white cloud, pale
 * animals — so these two get a heavier foot of their own.
 */
.hc-tile .hc-scrim,
.hc-pillar .hc-scrim {
	background: linear-gradient(
		180deg,
		rgba(27, 29, 25, .34) 0%,
		rgba(27, 29, 25, .10) 30%,
		rgba(27, 29, 25, .64) 74%,
		rgba(27, 29, 25, .90) 100%
	);
}
.hc-tile__title, .hc-pillar__title { text-shadow: 0 1px 18px rgba(27, 29, 25, .5); }
.hc-tile__sub, .hc-pillar__sub { text-shadow: 0 1px 12px rgba(27, 29, 25, .6); }

/* ===========================================================
   23. SAFARI HUB
   =========================================================== */

/* --- filter rail beside the results ------------------------ */
/*
 * The filters live in a column of their own so they stay put while you scroll
 * the trips. A bar above the grid pushes the first row of cards below the fold
 * and scrolls away the moment you start reading.
 */
.hc-toursplit {
	display: grid; grid-template-columns: 288px minmax(0, 1fr);
	gap: clamp(28px, 2.6vw, 44px); align-items: start;
}
.hc-toursplit--nofilter { grid-template-columns: minmax(0, 1fr); }
.hc-toursplit__main { min-width: 0; }

/* Cards get narrower in the remaining column, so let them decide the count,
   and close the gutters a little to win the width back. */
.hc-toursplit__main .hc-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--hc-5);
}

@media (max-width: 1080px) {
	/* Below this the rail would squeeze the cards to nothing — go back to a
	   band across the top, which is what the chips were built for anyway. */
	.hc-toursplit { grid-template-columns: minmax(0, 1fr); }
}

/* --- chip filter bar --------------------------------------- */
/*
 * Rows of toggles rather than sliders. A slider hides its own state — you
 * cannot see at a glance what is on — and it cannot express "Serengeti or
 * Zanzibar". Each chip is a real checkbox, so it is keyboard-operable and the
 * browser's own form reset clears the lot.
 */
.hc-chipbar {
	display: grid; gap: var(--hc-5);
	padding: var(--hc-6); margin-bottom: var(--hc-5);
	background: var(--hc-surface);
	border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
}
.hc-chipbar__row {
	display: grid; grid-template-columns: 172px minmax(0, 1fr);
	gap: var(--hc-3) var(--hc-5); align-items: start;
}
.hc-chipbar__label {
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase;
	color: var(--hc-text-muted); padding-top: 9px;
}
/* The pills themselves are the .hc-chip component the enquiry form already
   uses — same markup, same checked state, just tighter and carrying a count. */
.hc-chipbar .hc-chips { gap: var(--hc-2); min-width: 0; }
.hc-chipbar .hc-chip span { padding: 9px 16px; background: var(--hc-bone); }
.hc-chipbar .hc-chip:hover input:not(:checked) + span {
	border-color: var(--hc-olive); color: var(--hc-heading);
}
.hc-chip__n {
	margin-left: 1px; font-size: 0.625rem; font-weight: 700;
	font-variant-numeric: tabular-nums; opacity: .62;
}
/* Still clickable — it just says plainly that it would empty the grid. */
.hc-chipbar .hc-chip.is-empty { opacity: .38; }
.hc-chipbar .hc-chip { transition: opacity .22s var(--hc-ease); }

.hc-chipbar__reset {
	justify-self: start; background: none; border: 0; padding: 0 0 6px; cursor: pointer;
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	color: var(--hc-text-muted); border-bottom: 1px solid var(--hc-line);
	opacity: 0; pointer-events: none;
	transition: color .25s var(--hc-ease), border-color .25s var(--hc-ease), opacity .25s var(--hc-ease);
}
.hc-chipbar.is-filtered .hc-chipbar__reset { opacity: 1; pointer-events: auto; }
.hc-chipbar__reset:hover { color: var(--hc-olive); border-color: var(--hc-olive); }
.hc-chipbar__count {
	font-family: var(--hc-ui); font-size: 0.75rem; letter-spacing: var(--hc-track-mid);
	text-transform: uppercase; color: var(--hc-text-muted); margin: 0 0 var(--hc-6);
}

@media (max-width: 820px) {
	.hc-chipbar { padding: var(--hc-5); gap: var(--hc-4); }
	.hc-chipbar__row { grid-template-columns: minmax(0, 1fr); }
	.hc-chipbar__label { padding-top: 0; }
}

/* --- the same chips, stacked into the left rail ------------- */
@media (min-width: 1081px) {
	/*
	 * 172px clears the sticky header, which is the utility row plus the nav.
	 * The rail can outgrow the viewport once every row is expanded, so it
	 * scrolls inside itself rather than hiding its own last chips.
	 */
	.hc-toursplit .hc-chipbar {
		position: sticky; top: 164px;
		max-height: calc(100vh - 184px); overflow-y: auto;
		padding: var(--hc-5); margin-bottom: 0; gap: 0;
	}
	/* In a 288px column the heading cannot sit beside its chips. */
	.hc-toursplit .hc-chipbar__row { grid-template-columns: minmax(0, 1fr); gap: var(--hc-3); }
	.hc-toursplit .hc-chipbar__label { padding-top: 0; }
	/* Tighter pills, so the shorter pairs sit two to a line and the whole rail
	   still fits a laptop screen without scrolling inside itself. */
	.hc-toursplit .hc-chipbar .hc-chips { gap: 5px; }
	.hc-toursplit .hc-chipbar .hc-chip span {
		padding: 6px 11px; letter-spacing: .06em;
	}
	.hc-toursplit .hc-chipbar__row + .hc-chipbar__row {
		margin-top: var(--hc-3); padding-top: var(--hc-3);
		border-top: 1px solid var(--hc-line-soft);
	}
	.hc-toursplit .hc-chipbar__reset { margin-top: var(--hc-3); }
	/* The count belongs over the results now, not under the filters. */
	.hc-toursplit .hc-chipbar__count { margin-bottom: var(--hc-4); }

	/* Same treatment for the itineraries page, where the column is the facet
	   panels plus the ask box rather than a single form. */
	.hc-toursplit .hc-rail-col {
		position: sticky; top: 164px;
		max-height: calc(100vh - 184px); overflow-y: auto;
	}
}

/* ===========================================================
   35. THE ITINERARIES PAGE
   =========================================================== */

.hc-itinintro { max-width: 74ch; margin-bottom: var(--hc-7); }

/* --- the left column: facets, then the ask box ------------- */
.hc-rail-col { display: grid; gap: var(--hc-5); align-content: start; min-width: 0; }

.hc-facets {
	background: var(--hc-surface);
	border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
	overflow: hidden;
}

/* <details> rather than a scripted accordion — it opens and closes with no
   JavaScript at all, and the browser handles the keyboard for us. */
.hc-facet + .hc-facet { border-top: 1px solid var(--hc-line-soft); }
.hc-facet__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--hc-4) var(--hc-5); cursor: pointer; list-style: none;
	font-family: var(--hc-ui); font-size: 0.75rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase;
	color: var(--hc-heading);
}
.hc-facet__head::-webkit-details-marker { display: none; }
.hc-facet__head::after {
	content: ""; width: 7px; height: 7px; margin-right: 3px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px); opacity: .5;
	transition: transform .25s var(--hc-ease);
}
.hc-facet[open] > .hc-facet__head::after { transform: rotate(-135deg) translateY(-2px); }
.hc-facet__head:hover { color: var(--hc-olive); }
.hc-facet__body { padding: 0 var(--hc-5) var(--hc-4); display: grid; gap: 2px; }

.hc-facet__opt {
	display: flex; align-items: center; gap: 10px; cursor: pointer;
	padding: 6px 0; font-size: 0.875rem; color: var(--hc-text);
	transition: color .2s var(--hc-ease), opacity .2s var(--hc-ease);
}
.hc-facet__opt input {
	flex: none; width: 15px; height: 15px; margin: 0; cursor: pointer;
	accent-color: var(--hc-olive);
}
.hc-facet__opt span { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.hc-facet__opt:hover { color: var(--hc-heading); }
.hc-facet__opt:has(input:checked) { color: var(--hc-olive-deep); font-weight: 500; }
/* Still clickable — it just says plainly that it would empty the grid. */
.hc-facet__opt.is-empty { opacity: .4; }
.hc-facet__opt .hc-chip__n { font-size: 0.6875rem; }

.hc-facets__reset {
	display: block; width: 100%; text-align: left;
	padding: var(--hc-4) var(--hc-5); cursor: pointer;
	background: none; border: 0; border-top: 1px solid var(--hc-line-soft);
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	color: var(--hc-text-muted);
	opacity: 0; height: 0; padding-block: 0; border-top-width: 0; pointer-events: none;
	transition: color .25s var(--hc-ease), opacity .25s var(--hc-ease);
}
.hc-facets.is-filtered .hc-facets__reset {
	opacity: 1; height: auto; padding-block: var(--hc-4);
	border-top-width: 1px; pointer-events: auto;
}
.hc-facets__reset:hover { color: var(--hc-olive); }

.hc-askbox {
	padding: var(--hc-5); text-align: center;
	background: var(--hc-sand); border-radius: var(--hc-radius);
}
.hc-askbox__title {
	font-family: var(--hc-display); font-size: 1.0625rem;
	letter-spacing: var(--hc-track-tight); color: var(--hc-heading);
}
.hc-askbox p { font-size: 0.8125rem; margin: var(--hc-2) 0 var(--hc-4); }
.hc-askbox__btn + .hc-askbox__btn { margin-top: 10px; }

/* --- the photo cards --------------------------------------- */
.hc-itingrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--hc-5); }

.hc-itincard {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 4 / 3; border-radius: var(--hc-radius);
	background: var(--hc-dune); color: var(--hc-bone); width: 100%;
	transition: transform .4s var(--hc-ease), box-shadow .4s var(--hc-ease);
}
.hc-itincard:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(20, 24, 16, .2); }
.hc-itincard__img {
	position: absolute; inset: 0; display: block;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .8s var(--hc-ease);
}
.hc-itincard:hover .hc-itincard__img { transform: scale(1.05); }
.hc-itincard__veil {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(18, 22, 14, .88) 0%, rgba(18, 22, 14, .42) 46%, rgba(18, 22, 14, .04) 100%);
}

.hc-itincard__days, .hc-itincard__badge {
	position: absolute; top: var(--hc-4); z-index: 2;
	padding: 6px 13px; border-radius: 999px;
	font-family: var(--hc-ui); font-size: 0.625rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase;
}
.hc-itincard__days { right: var(--hc-4); background: rgba(18, 22, 14, .72); color: var(--hc-bone); }
.hc-itincard__badge { left: var(--hc-4); background: var(--hc-gold); color: var(--hc-ink); }

.hc-itincard__body {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: grid; gap: 7px; padding: var(--hc-5);
}
.hc-itincard__title {
	font-family: var(--hc-display); font-size: 1.0625rem; line-height: 1.25;
	letter-spacing: var(--hc-track-tight); text-transform: uppercase;
	text-shadow: 0 1px 14px rgba(18, 18, 15, .55);
}
.hc-itincard__line {
	display: flex; align-items: center; gap: 7px;
	font-family: var(--hc-ui); font-size: 0.75rem; color: rgba(247, 244, 237, .88);
	text-shadow: 0 1px 10px rgba(18, 18, 15, .6);
}
.hc-itincard__line .hc-icon { flex: none; opacity: .8; }

@media (max-width: 620px) {
	.hc-itingrid { grid-template-columns: minmax(0, 1fr); }
	.hc-itincard { aspect-ratio: 3 / 2; }
}

/* Results must line up: a wrapped title should not shorten its neighbour. */
.hc-filterable { display: flex; }
.hc-filterable > .hc-card { width: 100%; height: 100%; }
.hc-filterable.is-hidden { display: none; }

.hc-empty { text-align: center; padding: var(--hc-8) 0; color: var(--hc-text-muted); font-weight: 300; }
.hc-empty .hc-link { margin-left: var(--hc-2); }

/* --- numbered process steps ------------------------------- */
.hc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--hc-6) var(--hc-7); }
.hc-step { position: relative; padding-top: var(--hc-5); border-top: 1px solid var(--hc-line); }
.hc-step__n {
	display: block; margin-bottom: var(--hc-3);
	font-family: var(--hc-display); font-size: 1.75rem; line-height: 1;
	color: var(--hc-gold-deep); font-variant-numeric: tabular-nums;
}
.hc-step h3 {
	margin: 0 0 var(--hc-3); font-family: var(--hc-display);
	font-size: var(--hc-fs-h4); font-weight: 400; letter-spacing: var(--hc-track-tight);
	color: var(--hc-heading);
}
.hc-step p { margin: 0; font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: var(--hc-text-muted); }

/* --- month-by-month --------------------------------------- */
.hc-months__nav {
	display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--hc-1);
	border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-pill);
	padding: var(--hc-1); background: var(--hc-surface);
	margin-bottom: var(--hc-7);
}
.hc-months .hc-tabs__btn {
	padding: 12px 4px; border: 0; background: none; cursor: pointer; border-radius: var(--hc-radius-pill);
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-text-muted);
	transition: background .25s var(--hc-ease), color .25s var(--hc-ease);
}
.hc-months .hc-tabs__btn:hover { color: var(--hc-olive); }
.hc-months .hc-tabs__btn.is-active { background: var(--hc-olive); color: var(--hc-bone); }
.hc-months .hc-tabs__panel { display: none; }
.hc-months .hc-tabs__panel.is-active { display: block; }
.hc-months__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.hc-months__grid p { font-size: var(--hc-fs-lead); font-weight: 300; line-height: 1.75; margin-top: var(--hc-4); }
.hc-months__facts { display: grid; gap: var(--hc-4); }
@media (max-width: 860px) {
	.hc-months__grid { grid-template-columns: minmax(0, 1fr); }
	.hc-months__nav { grid-template-columns: repeat(6, 1fr); border-radius: var(--hc-radius); }
	.hc-months .hc-tabs__btn { border-radius: var(--hc-radius); }
}

/* --- lead magnet ------------------------------------------ */
.hc-magnet {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(32px, 5vw, 72px); align-items: center;
	padding: clamp(32px, 5vw, 64px);
	background: var(--hc-dune); border-radius: var(--hc-radius);
}
.hc-magnet__body p { color: var(--hc-text-muted); font-weight: 300; margin-top: var(--hc-4); max-width: 54ch; }
.hc-magnet__form { display: grid; gap: var(--hc-4); margin-top: var(--hc-6); max-width: 460px; }
.hc-magnet__form .hc-btn { justify-self: start; }
.hc-magnet__peek {
	list-style: none; margin: 0; padding: var(--hc-6);
	background: var(--hc-surface); border-radius: var(--hc-radius);
	box-shadow: var(--hc-shadow-soft);
	display: grid; gap: var(--hc-3);
	font-size: 0.875rem; font-weight: 300; line-height: 1.5; color: var(--hc-text);
}
.hc-magnet__peek li { position: relative; padding-left: var(--hc-5); }
.hc-magnet__peek li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 8px; height: 8px; border-radius: 999px; border: 1px solid var(--hc-gold);
}
.hc-magnet__more {
	font-family: var(--hc-ui); font-size: 0.6875rem; letter-spacing: var(--hc-track-wide);
	text-transform: uppercase; color: var(--hc-text-muted);
}
.hc-magnet__more::before { display: none; }
@media (max-width: 900px) { .hc-magnet { grid-template-columns: minmax(0, 1fr); } .hc-magnet__peek { order: -1; } }

/* ===========================================================
   24. ACTIVITIES — card rail coupled to a reading panel
   =========================================================== */

.hc-acts {
	position: relative;
	padding-block: clamp(56px, 8vw, 112px);
	background: var(--hc-bg);
	overflow: hidden;
}
.hc-acts__inner {
	display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: end;
}

/* --- the rail ------------------------------------------- */
.hc-acts__rail {
	display: flex; align-items: flex-end; gap: var(--hc-4);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x proximity; scroll-behavior: smooth;
	/* Bleed left so the rail reads as continuing past the container edge. */
	margin-left: calc(-1 * var(--hc-gutter)); padding-left: var(--hc-gutter);
	padding-block: var(--hc-5);
	scrollbar-width: none;
}
.hc-acts__rail::-webkit-scrollbar { display: none; }

.hc-acts__card {
	position: relative; flex: 0 0 auto;
	width: clamp(150px, 17vw, 210px); height: clamp(280px, 33vw, 400px);
	padding: 0; border: 0; border-radius: var(--hc-radius);
	background: var(--hc-dune); overflow: hidden; cursor: pointer;
	scroll-snap-align: center;
	transition: width .55s var(--hc-ease), height .55s var(--hc-ease), box-shadow .55s var(--hc-ease);
}
.hc-acts__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Inactive cards step back: drained of colour and dimmed, never hidden. */
.hc-acts__veil {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(27, 29, 25,.10) 0%, rgba(27, 29, 25,.30) 45%, rgba(27, 29, 25,.85) 100%);
	transition: background .55s var(--hc-ease);
}
.hc-acts__card:not(.is-active) .hc-acts__img { filter: grayscale(.85) brightness(.62); transition: filter .55s var(--hc-ease); }
.hc-acts__card:not(.is-active):hover .hc-acts__img { filter: grayscale(.35) brightness(.78); }

.hc-acts__card.is-active {
	width: clamp(210px, 25vw, 320px); height: clamp(380px, 46vw, 560px);
	box-shadow: var(--hc-shadow-lift);
	z-index: 2;
}

.hc-acts__card-body {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: grid; gap: var(--hc-2); justify-items: center; text-align: center;
	padding: var(--hc-5) var(--hc-4);
	color: var(--hc-bone);
}
.hc-acts__place {
	font-family: var(--hc-ui); font-size: 0.625rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase;
	color: rgba(250, 249, 246, .82);
}
.hc-acts__name {
	font-family: var(--hc-display); font-size: 1.0625rem; font-weight: 400;
	line-height: 1.25; letter-spacing: var(--hc-track-tight);
	text-shadow: 0 1px 16px rgba(27, 29, 25, .55);
}
.hc-acts__card.is-active .hc-acts__name { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }

/* The button only exists on the card in front. */
.hc-acts__cta {
	position: absolute; left: 50%; bottom: var(--hc-6); z-index: 3;
	transform: translate(-50%, 10px);
	padding: 11px 26px; border: 1px solid rgba(250, 249, 246, .7); border-radius: var(--hc-radius-pill);
	font-family: var(--hc-ui); font-size: 0.625rem; font-weight: 600;
	letter-spacing: var(--hc-track-btn); text-transform: uppercase;
	color: var(--hc-bone); white-space: nowrap;
	opacity: 0; pointer-events: none;
	transition: opacity .4s var(--hc-ease) .15s, transform .4s var(--hc-ease) .15s;
}
.hc-acts__card.is-active .hc-acts__cta { opacity: 1; transform: translate(-50%, 0); }
.hc-acts__card.is-active .hc-acts__card-body { padding-bottom: calc(var(--hc-6) + 52px); }

.hc-acts__card:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: 3px; }

/* --- the panel ------------------------------------------- */
.hc-acts__panel { padding-bottom: clamp(24px, 4vw, 56px); }
.hc-acts__label { display: block; font-size: clamp(2rem, 3.4vw, 2.75rem); color: var(--hc-stone); line-height: 1; }
.hc-acts__title {
	margin: var(--hc-5) 0 var(--hc-4);
	font-family: var(--hc-display); font-weight: 400;
	font-size: clamp(1.5rem, 2.7vw, 2.125rem); line-height: 1.15;
	letter-spacing: var(--hc-track-tight);
	color: var(--hc-gold-deep);
	text-wrap: balance;
}
.hc-acts__panel > p { max-width: 46ch; font-weight: 300; color: var(--hc-text); }
.hc-acts__panel .hc-eyebrow { display: block; margin-bottom: var(--hc-4); }
.hc-acts__link { margin-top: var(--hc-5); }

.hc-acts__nav { display: flex; align-items: center; gap: var(--hc-4); margin-top: clamp(32px, 5vw, 64px); }
/* The way through to the full library, under the arrows. */
.hc-acts__all { margin-top: var(--hc-5); }
/* Trip names run longer than "Game viewing", so the cards need the room. */
/* The section head above already carries the top space. */
.hc-acts--trips { padding-top: clamp(16px, 2vw, 32px); }
/* The trips rail gets more of the row than the shared default, and wider cards
   inside it: at the old widths a 400px-tall card was only 236 across, so every
   photograph was cropped to a slim vertical strip. Scoped to --trips so the
   activities scroller on the tour pages keeps its original proportions. */
.hc-acts--trips .hc-acts__inner { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.hc-acts--trips .hc-acts__card { width: clamp(200px, 24vw, 300px); }
.hc-acts--trips .hc-acts__card.is-active { width: clamp(300px, 34vw, 430px); }
.hc-acts--trips .hc-acts__name { font-size: clamp(0.8125rem, 1.1vw, 0.9375rem); }
.hc-acts--trips .hc-acts__card.is-active .hc-acts__name { font-size: clamp(0.9375rem, 1.3vw, 1.125rem); }
.hc-acts--trips .hc-acts__title { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.hc-acts__arrow {
	display: grid; place-items: center; width: 52px; height: 52px;
	border: 1px solid var(--hc-line); border-radius: 999px;
	background: none; cursor: pointer; color: var(--hc-heading); font-size: 1.0625rem;
	transition: all .25s var(--hc-ease);
}
.hc-acts__arrow:hover { background: var(--hc-olive); border-color: var(--hc-olive); color: var(--hc-bone); }
.hc-acts__counter {
	font-family: var(--hc-ui); font-size: 0.6875rem; letter-spacing: var(--hc-track-wide);
	text-transform: uppercase; color: var(--hc-text-muted); font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
	.hc-acts__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.hc-acts__panel { order: -1; padding-bottom: 0; }
	.hc-acts__rail { margin-inline: calc(-1 * var(--hc-gutter)); padding-inline: var(--hc-gutter); }
	.hc-acts__nav { margin-top: var(--hc-6); }
}

@media (prefers-reduced-motion: reduce) {
	.hc-acts__card, .hc-acts__cta, .hc-acts__img, .hc-acts__veil { transition: none; }
	.hc-acts__rail { scroll-behavior: auto; }
}

/* ===========================================================
   25. TWO-ROW HEADER
   Replaces the separate dark top bar: a utility row and a nav
   row, both floating over the hero with a hairline between.
   =========================================================== */

/* The hero is pulled up by the full header height, so this token has to
   match what the header actually measures — both rows, plus the rule. */
:root { --hc-header-h: 148px; }

.hc-header { background: var(--hc-bone); }

/* --- utility row ----------------------------------------- */
.hc-header__utility { border-bottom: 1px solid var(--hc-line-soft); }
.hc-header__utility-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--hc-5); min-height: 60px;
}
.hc-header__set { display: flex; align-items: center; gap: var(--hc-5); min-width: 0; }
.hc-header__set--end { gap: var(--hc-4); }

.hc-header__contact,
.hc-header__badge {
	display: inline-flex; align-items: center; gap: var(--hc-2);
	font-size: 0.8125rem; letter-spacing: .02em; white-space: nowrap;
}
.hc-header__contact svg, .hc-header__badge svg { opacity: .7; flex: none; }
.hc-header__badge strong { font-weight: 600; }
.hc-header__badge span { opacity: .78; }
.hc-header__contact:hover, .hc-header__badge:hover { color: var(--hc-accent); }

.hc-header__lang select { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.hc-header__lang option { color: var(--hc-ink); }

/* Inline search: a real field on desktop, an icon button below that. */
.hc-header__search {
	display: flex; align-items: center; gap: var(--hc-2);
	padding: 7px 14px; border-radius: var(--hc-radius-pill);
	border: 1px solid transparent;
	transition: border-color .25s var(--hc-ease), background .25s var(--hc-ease);
}
.hc-header__search svg { opacity: .7; flex: none; }
.hc-header__search input {
	width: 130px; min-width: 0;
	background: none; border: 0; color: inherit;
	font-family: var(--hc-body); font-size: 0.8125rem;
}
.hc-header__search input::placeholder { color: currentColor; opacity: .55; }
.hc-header__search input:focus { outline: none; }
.hc-header__search:focus-within { border-color: currentColor; background: rgba(255, 255, 255, .08); }
.hc-header__search:focus-within input { width: 190px; }

.hc-header__search-btn {
	display: none; place-items: center; width: 38px; height: 38px;
	background: none; border: 0; cursor: pointer; color: inherit; border-radius: 999px;
}
.hc-header__search-btn:hover { color: var(--hc-accent); }

/* --- nav row --------------------------------------------- */
.hc-header__inner { min-height: 88px; }

/*
 * A logo, seven labels and the Inquire button do not fit the 1200 body grid —
 * even before Inquire moved into this row it cleared the container by about two
 * pixels. The header band alone runs wider so the row stays on one line and the
 * button lands hard right, under the rating. Below the burger breakpoint there
 * is nothing to fit and both rows drop back onto the body grid.
 */
@media (min-width: 1101px) {
	.hc-header__inner,
	.hc-header__utility-inner { max-width: 1440px; }
	.hc-nav { gap: clamp(14px, 1.5vw, 22px); }
}
.hc-header__brand img { height: 54px; }

/* --- floating over a hero -------------------------------- */
.hc-header--overlay,
.hc-header--overlay .hc-header__utility { background: transparent; }
.hc-header--overlay { color: var(--hc-bone); border-bottom: 0; }
.hc-header--overlay .hc-header__utility { border-bottom-color: rgba(250, 249, 246, .28); }

.hc-header--overlay.is-stuck,
.hc-header--overlay.is-stuck .hc-header__utility { background: var(--hc-bone); }
.hc-header--overlay.is-stuck { color: var(--hc-ink); }
.hc-header--overlay.is-stuck .hc-header__utility { border-bottom-color: var(--hc-line-soft); }

/*
 * Once scrolled, the utility row is dead weight — it costs 60px of every
 * screen for information nobody re-reads. It folds away and the nav row
 * stays, so the sticky header is a single compact bar.
 */
.hc-header__utility {
	max-height: 90px; opacity: 1;
	transition: max-height .35s var(--hc-ease), opacity .3s var(--hc-ease) .05s;
}
.hc-header.is-stuck .hc-header__utility {
	max-height: 0; opacity: 0; overflow: hidden; border-bottom-width: 0;
	transition: max-height .35s var(--hc-ease), opacity .2s var(--hc-ease);
}
.hc-header.is-stuck .hc-header__inner { min-height: 74px; }
.hc-header__brand img { transition: height .35s var(--hc-ease); }
.hc-header.is-stuck .hc-header__brand img { height: 44px; }

@media (prefers-reduced-motion: reduce) {
	.hc-header__utility, .hc-header__brand img { transition: none; }
}

/* --- narrow screens --------------------------------------
   The nav collapses to a burger at 1100px, so these steps are
   pinned to that number rather than a second, nearby one. */

/* Long contact strings go first — the icons still link. */
@media (max-width: 1240px) {
	.hc-header__contact span { display: none; }
	.hc-header__contact { padding: 4px; }
}

/* Tablet: nav is a burger, but Inquire is the primary call to action and stays
   in the nav row beside it. The search field becomes an icon, which frees
   enough of this row that the rating keeps its source name down to 860px. */
@media (max-width: 1100px) {
	.hc-header__search { display: none; }
	.hc-header__search-btn { display: grid; }
	.hc-header__brand img, .hc-header.is-stuck .hc-header__brand img { height: 46px; }
}

/* "5.0" alone says nothing — the star and the source go together or not at all. */
@media (max-width: 860px) { .hc-header__badge span { display: none; } }

/* Phone: the drawer carries all of it, so the row is dead weight. */
@media (max-width: 780px) {
	:root { --hc-header-h: 84px; }
	.hc-header__utility { display: none; }
	.hc-header__inner { min-height: 84px; }
	.hc-header__brand img, .hc-header.is-stuck .hc-header__brand img { height: 40px; }
}

/* ===========================================================
   25b. SAVANNA BAND
   The drawn horizon that hands the page over to the footer.
   Four depth layers stepping down the terra cotta ramp; the
   nearest one is painted the footer's own colour, so the two
   meet without a seam and the band reads as the footer's own
   top edge rather than a picture stuck above it.
   =========================================================== */

.hc-savanna {
	/* Whatever the tear leaves uncovered has to keep reading as the section
	   above it, and the band only ever follows the dune pre-footer. */
	background: var(--hc-dune);
	line-height: 0;

	/*
	 * The sky, and the depth ramp far to near. t0 is the footer's own colour,
	 * which is what makes the ground and the footer read as one surface; the
	 * tones above it are atmosphere rather than palette, so they are literals.
	 */
	--hc-sv-sky: #d3bbaf;
	--hc-sv-t3: #b3927f;
	--hc-sv-t2: #8f6c5c;
	--hc-sv-t1: #6d5044;
	--hc-sv-t0: var(--hc-olive-deep);
}

/*
 * The torn top edge. Anchored to its own top and cropped at the bottom, so
 * the ragged line always lands exactly where the band starts however wide the
 * viewport is, and the stroke keeps its real proportions instead of being
 * stretched. Above the tear the element is transparent and the light section
 * shows through; below it the fill is the sky the scene starts on.
 */
.hc-savanna__edge {
	display: block; width: 100%;
	height: clamp(30px, 4vw, 64px);
	fill: var(--hc-sv-sky);
	margin-bottom: -1px;      /* no hairline where the two SVGs meet */
}

.hc-savanna__svg {
	display: block; width: 100%;
	height: clamp(160px, 18vw, 300px);
	background: linear-gradient(180deg,
		var(--hc-sv-sky) 0%,
		#cdb3a6 46%,
		#c5a698 100%);
}

/* The sun is the one warm note; it sits behind the kopje and never
   competes with the gold the buttons below are using. */
.hc-savanna__sun { fill: #eccfa6; opacity: .7; }

/* Narrow screens crop to the middle of the scene — the kopje and its
   acacia — so a shorter band still has the subject in it. */
@media (max-width: 640px) {
	.hc-savanna__svg { height: 132px; }
}

@media print {
	.hc-savanna { display: none; }
}

/* ===========================================================
   26. FOOTER
   Four columns, a copyright band carrying the rating, a legal
   row, then accreditations on a light ground.
   =========================================================== */

.hc-footer {
	background: var(--hc-olive-deep);
	--hc-focus: var(--hc-gold);
	color: rgba(250, 249, 246, .74);
	padding-top: clamp(56px, 8vw, 96px);
	--hc-line-soft: rgba(250, 249, 246, .14);
}
.hc-footer a { color: inherit; }
.hc-footer a:hover { color: var(--hc-gold-light); }

/*
 * A footer is a directory, not reading matter, so it does not owe anything to
 * the 1200px measure the body keeps for prose. Every row inside the footer —
 * columns, traveller origins, the copyright band, the legal row — runs on the
 * wide measure together, so the whole block still reads as one grid.
 */
.hc-footer .hc-wrap { max-width: var(--hc-max-wide, 1560px); }

/* --- columns ---------------------------------------------- */
.hc-footer__cols {
	display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.3fr;
	gap: clamp(32px, 5vw, 64px);
	padding-bottom: clamp(40px, 6vw, 72px);
}
.hc-footer__head {
	position: relative;
	margin: 0 0 var(--hc-6);
	padding-bottom: var(--hc-3);
	font-family: var(--hc-display); font-size: 1.25rem; font-weight: 400;
	letter-spacing: var(--hc-track-tight);
	color: var(--hc-bone);
}
/* The short gold rule under each heading — the one detail that makes a
   footer read as designed rather than assembled. */
.hc-footer__head::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 44px; height: 2px; background: var(--hc-gold);
}

.hc-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hc-3); }
.hc-footer__col li { margin: 0; }
.hc-footer__col a { font-size: 0.9375rem; font-weight: 300; }

/* --- brand column ----------------------------------------- */
/*
 * The stacked lockup, not the horizontal one the header wears: this column is
 * tall and narrow, and the leopard needs the height to read. Capped in ems so
 * it tracks the footer's own type rather than drifting against it.
 */
.hc-footer__logo {
	display: block; width: 100%; max-width: 172px; height: auto;
	margin: 0 0 var(--hc-5);
}
.hc-footer__blurb {
	margin: 0 0 var(--hc-5);
	font-size: 0.875rem; font-weight: 300; line-height: 1.8;
	color: rgba(250, 249, 246, .72);
	max-width: 34ch;
}

/* --- emergency line --------------------------------------- */
.hc-footer__emergency {
	margin-top: var(--hc-7); padding-top: var(--hc-5);
	border-top: 1px solid var(--hc-line-soft);
}
.hc-footer__emergency-label {
	display: block; margin-bottom: var(--hc-3);
	font-family: var(--hc-ui); font-size: 0.625rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase;
	color: var(--hc-gold-light);
}
.hc-footer__emergency-row { display: flex; align-items: center; gap: var(--hc-3); flex-wrap: wrap; }
.hc-footer__emergency-row > a:first-child {
	font-family: var(--hc-display); font-size: 1.125rem; color: var(--hc-bone);
	font-variant-numeric: tabular-nums;
}
.hc-footer__chip-icon {
	display: grid; place-items: center; width: 30px; height: 30px;
	border: 1px solid var(--hc-line-soft); border-radius: 999px;
	transition: all .25s var(--hc-ease);
}
.hc-footer__chip-icon:hover { background: var(--hc-olive); border-color: var(--hc-olive-tint); color: var(--hc-bone); }
.hc-footer__emergency-note { margin: var(--hc-3) 0 0; font-size: 0.75rem; font-weight: 300; opacity: .6; }

/* --- contacts column -------------------------------------- */
.hc-footer__contacts { display: grid; gap: var(--hc-3); margin: 0 0 var(--hc-5); }
.hc-footer__cta { display: grid; gap: var(--hc-3); margin-bottom: var(--hc-5); }
.hc-footer__cta .hc-btn { justify-content: center; padding-left: 26px; padding-right: 42px; }

.hc-footer__social {
	display: flex; flex-wrap: wrap; gap: var(--hc-2);
	padding: var(--hc-3); margin-bottom: var(--hc-5);
	background: rgba(250, 249, 246, .06); border-radius: var(--hc-radius);
	width: fit-content;
}
.hc-footer__social a {
	display: grid; place-items: center; width: 38px; height: 38px;
	border-radius: var(--hc-radius); transition: all .25s var(--hc-ease);
}
.hc-footer__social a:hover { background: var(--hc-gold); color: var(--hc-ink); }

.hc-footer__address, .hc-footer__hours { margin: 0 0 var(--hc-2); font-size: 0.8125rem; font-weight: 300; opacity: .72; }

/* --- copyright band --------------------------------------- */
/* Traveller origins: a footnote, not a section. Sits above the copyright band,
   wraps to as many lines as it needs, and never competes with the nav columns. */
.hc-footer__origins {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
	gap: var(--hc-2) var(--hc-4); padding-block: var(--hc-5) 0;
	border-top: 1px solid var(--hc-line-soft);
	margin-top: var(--hc-6);
}
/* Chalk white rather than the footer's muted cream: the line is small enough
   that the usual .74 body opacity pushed it under 4.5:1 on the olive ground. */
.hc-footer__origins-label {
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 400;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	color: var(--hc-bone);
}
.hc-footer__origins-list {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: var(--hc-2) var(--hc-4); list-style: none; margin: 0; padding: 0;
	font-size: 0.75rem; font-weight: 300;
	color: var(--hc-bone);
}
.hc-footer__origins-list li { display: inline-flex; align-items: center; gap: 6px; }
/* Emoji renders as colour glyphs; sized against the label, not the body text. */
.hc-footer__flag { font-size: 0.9375rem; line-height: 1; }

.hc-footer__band { background: rgba(0, 0, 0, .22); }
.hc-footer__by { opacity: .72; }
.hc-footer__by a { border-bottom: 1px solid rgba(250, 249, 246, .35); }
.hc-footer__by a:hover { color: var(--hc-gold-light); border-bottom-color: currentColor; }
/* Copyright left, byline right. Two children and space-between is the whole
   layout — it collapses to a left-aligned stack on narrow screens below. */
.hc-footer__band-inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--hc-4); padding-block: var(--hc-5);
	font-size: 0.8125rem; font-weight: 300;
}

/* --- legal row -------------------------------------------- */
.hc-footer__legal-row {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--hc-4); padding-block: var(--hc-5);
}
ul.hc-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-3); list-style: none; margin: 0; padding: 0; }
ul.hc-footer__legal li { display: flex; align-items: center; gap: var(--hc-3); font-size: 0.8125rem; font-weight: 300; }
/* Bullet separators between items, but never a trailing one. */
ul.hc-footer__legal li + li::before { content: "·"; opacity: .45; }
.hc-footer__lang select { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; font-size: 0.8125rem; }
.hc-footer__lang option { color: var(--hc-ink); }

/* --- accreditation strip ---------------------------------- */
.hc-creds { background: var(--hc-bone); border-top: 1px solid var(--hc-line-soft); }
.hc-creds__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: clamp(28px, 5vw, 64px);
	padding-block: clamp(32px, 4vw, 48px);
}
.hc-creds__item { display: grid; place-items: center; }
.hc-creds__item img {
	max-height: 62px; width: auto; object-fit: contain;
	opacity: .75; filter: grayscale(1);
	transition: opacity .3s var(--hc-ease), filter .3s var(--hc-ease);
}
.hc-creds__item:hover img { opacity: 1; filter: none; }
.hc-creds__item span {
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase;
	color: var(--hc-text-muted); text-align: center; max-width: 15ch; line-height: 1.5;
}

@media (max-width: 1024px) {
	.hc-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.hc-footer__cols { grid-template-columns: minmax(0, 1fr); }
	.hc-footer__band-inner, .hc-footer__legal-row { justify-content: flex-start; }
}

/* ===========================================================
   27. SAFARI HUB — orientation sections
   =========================================================== */

/* --- about ------------------------------------------------ */
/* A full-bleed photograph behind a section, with a brand-tinted scrim over it.
   The image sits on a negative z-index so it paints above the section's own
   background colour but below the content; `isolation` keeps that stacking
   contained, so the image can never slide behind the header or the footer.
   The scrim is #5e463d — terra-deep, the same ground the footer uses — at an
   opacity that holds chalk text above 7:1 on any photograph in the set. */
.hc-section--photo { position: relative; isolation: isolate; overflow: hidden; }
.hc-section--photo .hc-section__bg {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
}
/* Scrim opacity is set from the photograph rather than guessed. The band this
   section actually crops to averages 73/255 luma and its bright bulk tops out
   around 119, so a little over half-strength still holds chalk text near 6:1 —
   which leaves the photograph legible instead of tinted flat brown. Push much
   below this and the 0.03% of blown-out pixels start to matter. */
.hc-section--photo .hc-scrim {
	z-index: -1;
	background: linear-gradient(180deg, rgba(94, 70, 61, .55) 0%, rgba(94, 70, 61, .64) 100%);
}
/* On a flat olive ground the muted standfirst measures 4.3:1, and over a
   photograph it falls further, so on a photo section it goes to full chalk. */
.hc-section--photo .hc-section-head p { color: var(--hc-bone); }

/* A titled paragraph under a hairline — the About page's principles, guide
   points and vehicle features. Distinct from .hc-fact, which is the label/value
   pair on the park pages and would drag this along if it were ever restyled. */
.hc-point { border-top: 1px solid var(--hc-line); padding-top: var(--hc-5); }
.hc-point h3 {
	font-family: var(--hc-display); font-size: var(--hc-fs-h4); font-weight: 400;
	letter-spacing: var(--hc-track-tight); margin: 0 0 var(--hc-3); line-height: 1.2;
}
.hc-point p { margin: 0; color: var(--hc-text-muted); font-weight: 300; line-height: 1.7; }

.hc-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* Picture first, text second — the mirror of the default order. */
.hc-about--flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.hc-about__text .hc-title, .hc-highlights__head .hc-title { text-wrap: balance; }
.hc-about__text p { margin-top: var(--hc-4); max-width: 58ch; }
.hc-about__cta { margin-top: var(--hc-6); }
.hc-about__media { border-radius: var(--hc-radius); overflow: hidden; aspect-ratio: 4 / 3; }
.hc-about__media img, .hc-about__media .hc-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- highlights ------------------------------------------- */
.hc-highlights { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hc-highlights__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--hc-4); }
.hc-highlight {
	padding: var(--hc-6) var(--hc-5);
	background: var(--hc-surface); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
	transition: box-shadow .3s var(--hc-ease), transform .3s var(--hc-ease);
}
.hc-highlight:hover { box-shadow: var(--hc-shadow-soft); transform: translateY(-2px); }
.hc-highlight__icon {
	display: grid; place-items: center; width: 44px; height: 44px;
	border-radius: 999px; background: var(--hc-sand); color: var(--hc-gold-deep);
	margin-bottom: var(--hc-4);
}
.hc-highlight h3 {
	margin: 0 0 var(--hc-3); font-family: var(--hc-display); font-size: var(--hc-fs-h4);
	font-weight: 400; letter-spacing: var(--hc-track-tight); color: var(--hc-heading);
}
.hc-highlight p { margin: 0; font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: var(--hc-text-muted); }

/* --- circuits --------------------------------------------- */
.hc-circuit {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 64px); align-items: center;
	padding-block: clamp(32px, 5vw, 56px);
	border-top: 1px solid var(--hc-line-soft);
}
.hc-circuit:first-of-type { border-top: 0; }
/* Alternate the image side so the eye zig-zags down the page. */
.hc-circuit--flip .hc-circuit__media { order: 2; }
.hc-circuit__media { border-radius: var(--hc-radius); overflow: hidden; aspect-ratio: 4 / 3; }
.hc-circuit__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-circuit__body p { margin-top: var(--hc-4); max-width: 54ch; }

.hc-circuit__parks {
	display: flex; flex-wrap: wrap; gap: var(--hc-2);
	list-style: none; margin: var(--hc-5) 0 0; padding: 0;
}
.hc-circuit__parks li {
	padding: 7px 15px; border: 1px solid var(--hc-line); border-radius: var(--hc-radius-pill);
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-text-muted);
}
.hc-circuit__facts { display: grid; gap: var(--hc-4); margin-top: var(--hc-6); }

/* --- pick by month ---------------------------------------- */
/*
 * The month picker was a 190px sticky sidebar of twelve stacked buttons. It
 * is now one full-width sliding strip above the results, so the trips get the
 * whole measure and the months read as a single horizontal scale.
 */
.hc-bymonth { display: grid; gap: clamp(28px, 4vw, 40px); align-items: start; }

.hc-bymonth__slider {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--hc-3); align-items: center;
}
/* The arrows are a convenience — the strip is swipeable and keyboard
   reachable without them, so they go once there is room for all twelve. */
@media (max-width: 560px) {
	.hc-bymonth__slider .hc-rail__btn { width: 44px; height: 44px; }
}
/* The chips measure 41px on a phone — close enough to look right, small enough
   to miss. A finger gets the extra 3px; a cursor does not need them. */
@media (pointer: coarse) {
	.hc-bymonth__btn { padding-block: 12px; }
}

.hc-bymonth__nav {
	padding: var(--hc-2); background: var(--hc-surface);
	border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius-pill);
}
.hc-bymonth__btn {
	padding: 10px 18px; border: 0; background: none; cursor: pointer;
	border-radius: var(--hc-radius-pill); white-space: nowrap; text-align: center;
	font-family: var(--hc-ui); font-size: 0.75rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase; color: var(--hc-text-muted);
	transition: background .2s var(--hc-ease), color .2s var(--hc-ease);
}
.hc-bymonth__btn:hover { color: var(--hc-olive); background: var(--hc-sand); }
.hc-bymonth__btn.is-active { background: var(--hc-olive); color: var(--hc-bone); }
.hc-bymonth__count {
	font-family: var(--hc-ui); font-size: 0.75rem; letter-spacing: var(--hc-track-mid);
	text-transform: uppercase; color: var(--hc-text-muted); margin: 0 0 var(--hc-5);
}
.hc-monthly { display: flex; }
.hc-monthly > .hc-card { width: 100%; height: 100%; }
.hc-monthly.is-hidden { display: none; }

/*
 * Desktop puts the months back down the left, where they were before the
 * sliding strip: twelve labels read faster stacked than scrolled, and a
 * sticky column keeps the picker in reach while the trips scroll past it.
 * Below 900px there is no room for a sidebar, so the strip stays.
 */
@media (min-width: 900px) {
	.hc-bymonth {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: clamp(32px, 4vw, 56px);
	}
	.hc-bymonth__slider {
		grid-template-columns: minmax(0, 1fr);
		position: sticky; top: calc(min(var(--hc-header-real, 92px), 96px) + var(--hc-5));
	}
	/* Nothing left to scroll, so the arrows go. */
	.hc-bymonth__slider .hc-rail__btn { display: none; }
	.hc-bymonth__nav {
		grid-auto-flow: row; grid-auto-columns: auto; gap: 2px;
		overflow: visible; border-radius: var(--hc-radius);
	}
	.hc-bymonth__nav .hc-bymonth__btn {
		justify-content: flex-start; text-align: left;
	}
}

@media (max-width: 900px) {
	.hc-about, .hc-highlights, .hc-circuit { grid-template-columns: minmax(0, 1fr); }
	.hc-circuit--flip .hc-circuit__media { order: 0; }
	.hc-about__media { order: -1; }
}


/* ===========================================================
   28. TYPE SCALE FOR TEMISHEL
   The old scale was tuned for Cormorant Garamond — a light serif
   with a famously low x-height, which needed size and .2em of
   tracking to carry. Temishel is the opposite: condensed, heavy
   and unicase. At the same values it shouts. These override the
   tokens rather than editing 29 individual rules.
   =========================================================== */

:root {
	/* Roughly 12% down across the board — Temishel's cap height fills
	   far more of the em box than Cormorant's. */
	--hc-fs-h4: clamp(1.0625rem, 1.4vw, 1.25rem);
	--hc-fs-h3: clamp(1.1875rem, 1.9vw, 1.4375rem);
	--hc-fs-h2: clamp(1.5rem, 2.7vw, 2.125rem);
	--hc-fs-h1: clamp(1.75rem, 3.6vw, 2.5rem);
	--hc-fs-display: clamp(2.125rem, 5.8vw, 5rem);

	/* A condensed face needs less help separating letters, and heavy
	   strokes at .2em start to read as disconnected. */
	--hc-track-display: 0.08em;
}

/* Caps-only means no descenders, so the old leading leaves a gap. */
.hc-display, .hc-title, .hc-hero__title { line-height: 1.08; }
.hc-card__title, .hc-accordion__label, .hc-review__title,
.hc-person__name, .hc-award h3, .hc-reason h3, .hc-highlight h3 { line-height: 1.2; }

/* Uppercase transforms are now redundant — the font has no lowercase — but
   they stay for the fallback stack. Tracking is what needs pulling back. */
.hc-title, .hc-prose h2, .hc-pillar__title { letter-spacing: var(--hc-track-display); }
.hc-title--sm { letter-spacing: 0.05em; }

/* Prices and stat numbers are numerals, which are proportionally wide here. */
.hc-card__price, .hc-stat__num, .hc-booking__price { letter-spacing: 0; }

/* ===========================================================
   29. BEST TIME TO GO — season tabs + climate chart
   =========================================================== */

.hc-seasons__nav {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hc-2);
	margin-bottom: var(--hc-7);
}
.hc-seasons__btn {
	display: inline-flex; align-items: center; gap: var(--hc-3);
	padding: 14px 26px; border: 0; border-radius: var(--hc-radius);
	background: none; cursor: pointer; color: var(--hc-heading);
	font-family: var(--hc-ui); font-size: 0.8125rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	transition: background .25s var(--hc-ease), color .25s var(--hc-ease);
}
.hc-seasons__btn svg { color: var(--hc-gold-deep); flex: none; transition: color .25s var(--hc-ease); }
.hc-seasons__btn:hover { background: var(--hc-sand); }
.hc-seasons__btn.is-active { background: var(--hc-gold); color: var(--hc-ink); }
.hc-seasons__btn.is-active svg { color: #fff; }

.hc-seasons .hc-tabs__panel { display: none; }
.hc-seasons .hc-tabs__panel.is-active { display: block; }
.hc-seasons__panel { max-width: 68ch; margin-inline: auto; text-align: center; }
.hc-seasons__panel p { font-size: var(--hc-fs-lead); font-weight: 300; line-height: 1.75; }

.hc-seasons__months {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hc-2);
	list-style: none; margin: 0 0 var(--hc-5); padding: 0;
}
.hc-seasons__months li {
	padding: 6px 14px; border: 1px solid var(--hc-gold); border-radius: var(--hc-radius-pill);
	font-family: var(--hc-ui); font-size: 0.625rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-gold-deep);
}

/* --- the trigger ------------------------------------------ */
.hc-climate__toggle {
	display: inline-flex; align-items: center; gap: var(--hc-3);
	padding: 15px 32px; border: 1px solid var(--hc-gold); border-radius: var(--hc-radius-pill);
	background: none; cursor: pointer; color: var(--hc-heading);
	font-family: var(--hc-ui); font-size: 0.8125rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	transition: background .25s var(--hc-ease), color .25s var(--hc-ease), border-color .25s var(--hc-ease);
}
.hc-climate__toggle svg { color: var(--hc-gold-deep); transition: color .25s var(--hc-ease); }
.hc-climate__toggle:hover { background: var(--hc-gold); border-color: var(--hc-gold); color: var(--hc-ink); }
.hc-climate__toggle:hover svg { color: #fff; }

/* --- the dialog ------------------------------------------- */
.hc-modal {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	opacity: 0; transition: opacity .25s var(--hc-ease);
}
.hc-modal.is-open { opacity: 1; }
/* The trip the enquiry is already attached to. */
.hc-modal__trip {
	display: flex; align-items: center; gap: 8px; margin-top: var(--hc-3);
	font-family: var(--hc-ui); font-size: 0.8125rem; color: var(--hc-olive-deep);
}
.hc-modal__trip[hidden] { display: none; }
.hc-modal__trip .hc-icon { flex: none; color: var(--hc-gold-deep); }

.hc-modal[hidden] { display: none; }
.hc-modal__veil { position: absolute; inset: 0; background: rgba(31, 24, 21, .72); cursor: pointer; }
.hc-modal__panel {
	position: relative;
	display: flex; flex-direction: column;
	width: min(1180px, 100%); max-height: min(88vh, 900px);
	background: var(--hc-surface); border-radius: var(--hc-radius);
	box-shadow: 0 30px 90px rgba(31, 24, 21, .35);
	transform: translateY(14px) scale(.985);
	transition: transform .3s var(--hc-ease);
}
.hc-modal.is-open .hc-modal__panel { transform: none; }
.hc-modal__head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hc-5);
	padding: var(--hc-6) var(--hc-6) var(--hc-4);
	border-bottom: 1px solid var(--hc-line-soft);
}
.hc-modal__head .hc-title { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.hc-modal__close {
	flex: none; width: 44px; height: 44px; border: 1px solid var(--hc-line-soft);
	border-radius: 999px; background: none; cursor: pointer;
	font-size: 1.5rem; line-height: 1; color: var(--hc-heading);
	transition: background .2s var(--hc-ease), color .2s var(--hc-ease);
}
.hc-modal__close:hover { background: var(--hc-gold); border-color: var(--hc-gold); color: var(--hc-ink); }
.hc-modal__body { padding: var(--hc-6); overflow: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
	.hc-modal, .hc-modal__panel { transition: none; }
	.hc-modal__panel { transform: none; }
}

/* --- the table -------------------------------------------- */
.hc-climate__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hc-climate__table th, .hc-climate__table td {
	padding: var(--hc-3) var(--hc-4);
	border: 1px solid var(--hc-line-soft);
	text-align: left; vertical-align: top;
}
.hc-climate__table thead th {
	background: var(--hc-gold); color: var(--hc-ink);
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.hc-climate__table tbody th {
	background: var(--hc-dune); color: var(--hc-heading);
	font-family: var(--hc-ui); font-size: 0.75rem; font-weight: 600;
	letter-spacing: .04em; white-space: nowrap;
}
.hc-climate__table tbody tr:nth-child(even) td { background: rgba(233, 228, 219, .45); }
.hc-climate__c, .hc-climate__f, .hc-climate__mm { display: block; line-height: 1.45; white-space: nowrap; }
.hc-climate__c { font-size: 0.8125rem; color: var(--hc-heading); font-weight: 500; }
.hc-climate__f { font-size: 0.75rem; color: var(--hc-text-muted); }
.hc-climate__mm { font-size: 0.75rem; color: var(--hc-text-muted); }
/* A month with no rain at all is the single most useful cell in the table. */
.hc-climate__table td.is-dry .hc-climate__mm { color: var(--hc-gold-deep); font-weight: 600; }

.hc-climate__note {
	margin-top: var(--hc-5); font-size: 0.8125rem; font-weight: 300;
	color: var(--hc-text-muted); max-width: 80ch;
}

/* --- month detail inside the picker ----------------------- */
.hc-bymonth__detail {
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	gap: clamp(24px, 4vw, 48px);
	padding: var(--hc-6); margin-bottom: var(--hc-6);
	background: var(--hc-surface); border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
}
/* display:grid outranks the browser's own [hidden] { display: none }, so all
   twelve months rendered at once and the picker looked like it did nothing. */
.hc-bymonth__detail[hidden] { display: none; }
.hc-bymonth__detail p { margin-top: var(--hc-3); font-weight: 300; }
.hc-bymonth__facts { display: grid; gap: var(--hc-4); align-content: start; }

@media (max-width: 900px) {
	.hc-seasons__btn { padding: 12px 18px; font-size: 0.75rem; }
	.hc-bymonth__detail { grid-template-columns: minmax(0, 1fr); }
	/* On a phone the chart is the whole screen — anything less and the
	   table is a letterbox you cannot read. */
	.hc-modal { padding: 0; }
	.hc-modal__panel { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
	.hc-modal__head, .hc-modal__body { padding: var(--hc-5); }
	.hc-climate__table th, .hc-climate__table td { padding: var(--hc-2) var(--hc-3); }
}

/* ===========================================================
   30. EXPERIENCES — ways to travel
   =========================================================== */

.hc-exps {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 44px);
}
.hc-exp {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--hc-surface); border: 1px solid var(--hc-line-soft);
	border-radius: var(--hc-radius);
	transition: box-shadow .3s var(--hc-ease), transform .3s var(--hc-ease);
}
.hc-exp:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(31, 24, 21, .12); }

.hc-exp__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hc-dune); }
.hc-exp__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--hc-ease); }
.hc-exp:hover .hc-exp__media img { transform: scale(1.05); }

.hc-exp__body { display: flex; flex-direction: column; flex: 1; padding: var(--hc-6); }
.hc-exp__title {
	display: flex; align-items: center; gap: var(--hc-3);
	margin: 0 0 var(--hc-3); font-family: var(--hc-display);
	font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.2;
}
.hc-exp__title svg { color: var(--hc-gold-deep); flex: none; }
.hc-exp__title a { color: inherit; text-decoration: none; }
.hc-exp__title a:hover { color: var(--hc-gold-deep); }
.hc-exp__body > p { font-weight: 300; font-size: 0.9375rem; line-height: 1.75; }

/* "Ideal for" is the line people actually scan, so it gets its own rule. */
.hc-exp__ideal {
	margin-top: auto; padding-top: var(--hc-5);
	border-top: 1px solid var(--hc-line-soft);
	font-family: var(--hc-ui); font-size: 0.75rem; font-weight: 400;
	color: var(--hc-text-muted); line-height: 1.6;
}
.hc-exp__ideal span {
	display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.625rem;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-gold-deep);
}

.hc-exp__more {
	display: inline-flex; align-items: center; gap: var(--hc-2);
	margin-top: var(--hc-5); color: var(--hc-heading);
	font-family: var(--hc-ui); font-size: 0.75rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
}
.hc-exp__more svg { transition: transform .3s var(--hc-ease); }
.hc-exp:hover .hc-exp__more { color: var(--hc-gold-deep); }
.hc-exp:hover .hc-exp__more svg { transform: translateX(4px); }

/*
 * The destination cards reuse .hc-exp__more but are .hc-dest, so the
 * hover pair above never fired for them — the link sat there inert.
 * Hovering the link itself (and focusing it) is covered too, so the
 * affordance does not depend on hovering the whole card.
 */
.hc-dest:hover .hc-exp__more,
.hc-exp__more:hover,
.hc-exp__more:focus-visible { color: var(--hc-gold-deep); }
.hc-dest:hover .hc-exp__more svg,
.hc-exp__more:hover svg,
.hc-exp__more:focus-visible svg { transform: translateX(4px); }

@media (max-width: 900px) {
	.hc-exps { grid-template-columns: minmax(0, 1fr); }
	.hc-exp__body { padding: var(--hc-5); }
}

/* ===========================================================
   31. DESTINATIONS — the northern circuit, park by park
   =========================================================== */

.hc-dests { display: grid; gap: clamp(40px, 6vw, 80px); }
.hc-dest {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px); align-items: center;
}
/* Alternate the side the photograph sits on, so seven rows read as a
   sequence rather than as a stack of identical cards. */
.hc-dest:nth-child(even) .hc-dest__media { order: 2; }

.hc-dest__media {
	position: relative; aspect-ratio: 4 / 3; overflow: hidden;
	border-radius: var(--hc-radius); background: var(--hc-dune);
}
.hc-dest__media img,
.hc-dest__media .hc-placeholder {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
}

.hc-dest__title {
	margin: 0; font-family: var(--hc-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400;
	letter-spacing: var(--hc-track-tight); line-height: 1.15; color: var(--hc-heading);
}
.hc-dest__meta {
	margin: var(--hc-3) 0 var(--hc-4);
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-gold-deep);
}
.hc-dest__body > p { font-weight: 300; line-height: 1.8; }

.hc-dest__facts { list-style: none; margin: var(--hc-5) 0 0; padding: 0; display: grid; gap: var(--hc-2); }
.hc-dest__facts li {
	display: flex; align-items: flex-start; gap: var(--hc-3);
	font-size: 0.875rem; font-weight: 300; color: var(--hc-text-muted);
}
.hc-dest__facts svg { color: var(--hc-gold); flex: none; margin-top: 4px; }

.hc-dest__best {
	margin-top: var(--hc-5); padding-top: var(--hc-4);
	border-top: 1px solid var(--hc-line-soft);
	font-size: 0.875rem; font-weight: 300; color: var(--hc-text-muted);
}
.hc-dest__best span {
	display: block; margin-bottom: 4px;
	font-family: var(--hc-ui); font-size: 0.625rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-heading);
}

@media (max-width: 900px) {
	.hc-dest { grid-template-columns: minmax(0, 1fr); }
	.hc-dest:nth-child(even) .hc-dest__media { order: 0; }
}

/* ===========================================================
   32. THE ENQUIRY DIALOG
   =========================================================== */

/* A form needs a readable measure, not the full width a data table wants. */
.hc-modal--form .hc-modal__panel { width: min(760px, 100%); }
.hc-modal--form .hc-enquiry { margin: 0; }
.hc-modal--form .hc-modal__body { padding-top: var(--hc-5); }

/* The closing band on the home page, where the form used to sit. */
.hc-cta-panel {
	padding: var(--hc-7); border: 1px solid rgba(250, 249, 246, .22);
	border-radius: var(--hc-radius); background: rgba(250, 249, 246, .04);
}
.hc-cta-panel p {
	margin: 0 0 var(--hc-6); font-weight: 300;
	color: rgba(250, 249, 246, .74);
}

/* ===========================================================
   33. DESTINATIONS DROP-DOWN — a row of pictures, not a list
   =========================================================== */

.hc-mega--dest { background: var(--hc-sand); }
.hc-destmenu {
	/* Eight columns on a desktop wrap, folding to fewer as the window narrows.
	   auto-fit needs the minimum small enough that 8 * min + 7 * gap clears the
	   wrap's inner width, or the last card drops to a second row on its own. */
	display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
	gap: var(--hc-3); padding: var(--hc-6) 0;
}
.hc-destmenu__card {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 3 / 4; border-radius: var(--hc-radius);
	background: var(--hc-dune); color: var(--hc-bone);
	transition: transform .35s var(--hc-ease), box-shadow .35s var(--hc-ease);
}
.hc-destmenu__card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(31, 24, 21, .22); }
/* The destination you are already reading about. */
.hc-destmenu__card.is-here { box-shadow: 0 0 0 2px var(--hc-gold); }
.hc-destmenu__card.is-here .hc-destmenu__name { color: var(--hc-gold); }

.hc-destmenu__img {
	position: absolute; inset: 0; display: block;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .7s var(--hc-ease);
}
.hc-destmenu__card:hover .hc-destmenu__img { transform: scale(1.06); }

.hc-destmenu__veil {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(31, 24, 21, .78) 0%, rgba(31, 24, 21, .12) 52%, rgba(31, 24, 21, 0) 100%);
}
.hc-destmenu__name {
	position: absolute; left: 0; right: 0; bottom: var(--hc-4);
	padding: 0 var(--hc-3); text-align: center;
	font-family: var(--hc-ui); font-size: 0.75rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

@media (max-width: 1100px) {
	.hc-destmenu { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
	.hc-destmenu__name { font-size: 0.6875rem; letter-spacing: .08em; }
}

/* ===========================================================
   34. DESTINATION PAGES — map, attractions, itineraries
   =========================================================== */

/* --- the map block ---------------------------------------- */
.hc-mapblock {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hc-map { position: relative; }
.hc-map__svg { display: block; width: 100%; height: auto; max-height: 620px; }
.hc-map__land { fill: var(--hc-dune); stroke: var(--hc-gold); stroke-width: 1.5; }
.hc-map__water { fill: var(--hc-sand); stroke: var(--hc-gold); stroke-width: 1; }

.hc-map__pin circle { fill: var(--hc-olive); }
.hc-map__pin text {
	fill: var(--hc-text-muted); font-family: var(--hc-ui); font-size: 15px;
	font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.hc-map__pin.is-here circle { fill: var(--hc-gold); }
.hc-map__pin.is-here text { fill: var(--hc-heading); font-size: 19px; }
.hc-map__halo { fill: none; stroke: var(--hc-gold); stroke-width: 2; opacity: .5; }

.hc-map__town path { fill: none; stroke: var(--hc-heading); stroke-width: 2; }
.hc-map__town text {
	fill: var(--hc-heading); font-family: var(--hc-ui); font-size: 14px;
	font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

.hc-mapblock__body .hc-ticks { margin-top: var(--hc-5); }
.hc-mapblock__best {
	margin-top: var(--hc-6); padding-top: var(--hc-5);
	border-top: 1px solid var(--hc-line-soft);
	font-weight: 300; color: var(--hc-text-muted);
}
.hc-mapblock__best span {
	display: block; margin-bottom: 6px;
	font-family: var(--hc-ui); font-size: 0.625rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase; color: var(--hc-gold-deep);
}

/* --- attractions ------------------------------------------ */
.hc-attractions {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--hc-6) var(--hc-7);
}
.hc-attraction { padding-top: var(--hc-5); border-top: 1px solid var(--hc-line); }
.hc-attraction__n {
	display: block; margin-bottom: var(--hc-3);
	font-family: var(--hc-display); font-size: 1.75rem; line-height: 1;
	color: var(--hc-gold-deep); font-variant-numeric: tabular-nums;
}
.hc-attraction h3 {
	margin: 0 0 var(--hc-3); font-family: var(--hc-display);
	font-size: var(--hc-fs-h4); font-weight: 400;
	letter-spacing: var(--hc-track-tight); color: var(--hc-heading);
}
.hc-attraction p { margin: 0; font-size: 0.9375rem; font-weight: 300; line-height: 1.75; color: var(--hc-text-muted); }

/* --- suggested itineraries -------------------------------- */
.hc-itins {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 3vw, 36px);
}
.hc-itin {
	display: flex; flex-direction: column;
	padding: var(--hc-6); background: var(--hc-surface);
	border: 1px solid var(--hc-line-soft); border-radius: var(--hc-radius);
	transition: box-shadow .3s var(--hc-ease), transform .3s var(--hc-ease);
}
.hc-itin:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(31, 24, 21, .12); }
.hc-itin__days {
	align-self: flex-start; padding: 5px 14px; margin-bottom: var(--hc-4);
	border-radius: var(--hc-radius-pill); background: var(--hc-gold); color: var(--hc-ink);
	font-family: var(--hc-ui); font-size: 0.625rem; font-weight: 600;
	letter-spacing: var(--hc-track-wide); text-transform: uppercase;
}
.hc-itin__title {
	margin: 0 0 var(--hc-3); font-family: var(--hc-display);
	font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 400;
	letter-spacing: var(--hc-track-tight); color: var(--hc-heading);
}
.hc-itin__route {
	display: flex; align-items: flex-start; gap: var(--hc-2);
	margin-bottom: var(--hc-4);
	font-family: var(--hc-ui); font-size: 0.6875rem; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase; color: var(--hc-gold-deep);
}
.hc-itin__route svg { flex: none; margin-top: 1px; }
.hc-itin > p { font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: var(--hc-text-muted); }
.hc-itin__cta {
	display: inline-flex; align-items: center; gap: var(--hc-2);
	margin-top: auto; padding: var(--hc-5) 0 0; border: 0;
	background: none; cursor: pointer; text-align: left; color: var(--hc-heading);
	font-family: var(--hc-ui); font-size: 0.75rem; font-weight: 600;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
}
.hc-itin__cta svg { transition: transform .3s var(--hc-ease); }
.hc-itin:hover .hc-itin__cta { color: var(--hc-gold-deep); }
.hc-itin:hover .hc-itin__cta svg { transform: translateX(4px); }

.hc-itins__note {
	max-width: 68ch; margin-inline: auto; margin-top: var(--hc-6);
	font-size: 0.8125rem; font-weight: 300; color: var(--hc-text-muted);
}

@media (max-width: 900px) {
	.hc-mapblock { grid-template-columns: minmax(0, 1fr); }
	.hc-map__pin text { font-size: 19px; }
	.hc-map__pin.is-here text { font-size: 23px; }
}

/* A trip whose price the owner has not set yet. */
.hc-card__price--ask { font-size: 1rem; letter-spacing: 0; color: var(--hc-text-muted); }