/*
 * 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. Theirs carries a drawn
 * arrow at the right and pads asymmetrically (33px left, 59px right) to leave
 * it a lane. This one has no arrow, so it pads evenly and centres its label.
 *
 * The left gutter is one tracking unit wider than the right on purpose:
 * letter-spacing lands after the final glyph as well as between them, so a
 * centred tracked label sits half a tracking unit left of true centre unless
 * the padding gives it back. Padding rather than text-indent, because it
 * holds when the label wraps to a second line.
 */
.hc-btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: var(--hc-3);
	padding: 14px 34px 14px calc(34px + var(--hc-track-btn));
	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: center;
	transition: background .3s var(--hc-ease), color .3s var(--hc-ease), border-color .3s var(--hc-ease), transform .3s var(--hc-ease);
}
.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;
}

/* 11px of padding on a 12px label makes a 39px control. The floor is 44 —
   the padding stays as drawn and the box grows to meet it. */
.hc-btn--sm {
	padding: 11px 24px 11px calc(24px + var(--hc-track-wide));
	min-height: 44px; font-size: 0.75rem; letter-spacing: var(--hc-track-wide);
}

/* The full-width variant. The label centring is already in .hc-btn, so this
   only has to stretch the box and let a long label take a second line. */
.hc-btn--block { display: flex; width: 100%; white-space: normal; }

/* Stacked calls to action in a booking box or an ask box. */
.hc-booking .hc-btn--block + .hc-btn--block { margin-top: var(--hc-3); }

/* 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; } }
/*
 * ...but never inside the drawer. The drawer only exists below 1100px, so if
 * its list ever carries .hc-nav — a fallback, a plugin, a menu configured with
 * that class in the admin — the rule above erases the entire mobile menu. This
 * says the quiet part out loud instead of relying on nobody making that
 * mistake twice.
 */
.hc-drawer .hc-nav { display: block; }
@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); }
/*
 * Scoped to the menu lists. As `.hc-drawer a` this outranked `.hc-btn` on both
 * specificity and source order, so the two calls to action at the foot of the
 * drawer were served `display:block; padding:16px 0` — no horizontal padding
 * at all, which left the arrow sitting on the last letter of the label. It
 * also put 16px of dead space above and below the drawer's logo link.
 */
.hc-drawer ul 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); }
/*
 * The row is a flex line, not a block with something floated into its corner:
 * the toggle was absolutely positioned 8px from the top of a ~58px row, so it
 * sat high against a label that is vertically centred, and 36px is under the
 * 44px minimum for something you tap. As a flex item it centres itself at
 * whatever height the row turns out to be.
 */
.hc-drawer__row { display: flex; align-items: center; gap: var(--hc-3); }
.hc-drawer__row > a { flex: 1; min-width: 0; }
.hc-drawer__toggle {
	flex: none; display: grid; place-items: center;
	width: 44px; height: 44px; margin-right: -10px;
	background: none; border: 0; color: inherit; cursor: pointer;
	font-size: 1.25rem; line-height: 1;
}

/* The two calls to action under the menu. On the site's own spacing scale
   rather than the inline 32/12 they were carrying. */
.hc-drawer__cta { display: grid; gap: var(--hc-3); margin-top: var(--hc-6); }

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

/* --- home hero rotation ------------------------------------------
 * Five destinations crossfading behind the headline. The stack is a pile of
 * absolutely positioned figures rather than one <img> whose src is swapped,
 * because swapping a src shows a blank frame while the next file decodes.
 *
 * Only .is-current is painted; the rest sit at zero opacity, out of the
 * accessibility tree and unreachable by the caret.
 */
.hc-hero__slide {
	position: absolute; inset: 0; margin: 0;
	opacity: 0; visibility: hidden;
	transition: opacity 1.2s var(--hc-ease), visibility 0s linear 1.2s;
}
.hc-hero__slide.is-current { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
/* A slow push in, so a still photograph does not sit dead on the page. It runs
   on the showing slide only, and resets when the slide steps back. */
.hc-hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.005); }
.hc-hero__slide.is-current img { animation: hc-hero-drift 9s var(--hc-ease) forwards; }
@keyframes hc-hero-drift { from { transform: scale(1.005); } to { transform: scale(1.06); } }

.hc-hero__slidenav {
	display: flex; align-items: center; justify-content: center;
	gap: var(--hc-4); flex-wrap: wrap; margin-top: var(--hc-6);
}
/* Scoped through .hc-hero deliberately: `.hc-hero p` sets a 56ch max-width, a
   top margin and a colour, and it outranks a lone class. Left alone, the caption
   claimed half the row as a flex item and shoved the dots to the far edge. */
.hc-hero .hc-hero__where {
	margin: 0; max-width: none; font-family: var(--hc-ui);
	font-size: 0.75rem; font-weight: 400;
	letter-spacing: var(--hc-track-mid); text-transform: uppercase;
	color: rgba(250, 249, 246, .72);
}
.hc-hero__dots { display: flex; align-items: center; gap: 8px; }
.hc-hero__dot {
	width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px;
	background: rgba(250, 249, 246, .38); cursor: pointer;
	transition: width .4s var(--hc-ease), background-color .4s var(--hc-ease);
}
.hc-hero__dot:hover { background: rgba(250, 249, 246, .7); }
.hc-hero__dot[aria-current="true"] { width: 26px; background: var(--hc-gold); }
.hc-hero__dot:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	/* No drift, no crossfade, and the script does not advance on its own —
	   the dots still change the picture when someone asks for it. */
	.hc-hero__slide { transition: none; }
	.hc-hero__slide.is-current img { animation: none; transform: none; }
}
.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; }
/* The contact page's channel cards. Their headline is a raw value — an email
   address, a phone number — rather than a sentence, so it can be a single word
   wider than its column. .hc-card clips what overflows, which turned that into
   a silently truncated address. The markup adds a <wbr> after the @; this is
   the net under anything longer still. */
.hc-card--channel .hc-card__title { overflow-wrap: break-word; }
.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);
	/* The bar owns the bottom edge of the screen, which on a gesture-driven
	   phone is where the home indicator lives. Pad past it. */
	padding: var(--hc-3) var(--hc-4) calc(var(--hc-3) + env(safe-area-inset-bottom));
	background: var(--hc-bone); border-top: 1px solid var(--hc-line);
	box-shadow: 0 -8px 24px rgba(27, 29, 25, .08);
}
/* The button stretches to fill the bar; the label centres itself in it. */
.hc-actionbar .hc-btn { flex: 1; }
@media (max-width: 1024px) {
	.hc-actionbar { display: flex; }
	body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* --- 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) + env(safe-area-inset-bottom));
		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;
}

/*
 * --- WhatsApp button ---------------------------------------
 * This began as a header action and carried two width rules that dropped its
 * label at 1080px and the whole button at 900px. The header action is gone —
 * WhatsApp is the floating button now — and the only thing still wearing this
 * class is the ask box on the itineraries page, where those rules stripped the
 * label to a nameless icon on a tablet and deleted the call to action outright
 * on a phone. It is a normal button at every width.
 */
.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); }

/* --- 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: minmax(0, 1fr) auto; gap: var(--hc-5) 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);
}
/*
 * The facts run left, the earned score sits right behind a hairline. The bar
 * used to be one seal and one score across eleven hundred pixels, which read as
 * a mistake rather than as restraint.
 *
 * Two by two, fixed. Four across does not fit: the labels measure 130-210px of
 * tracked-out 11px caps and the score wants its own 180, which leaves about 825
 * for the facts — 90 short. Left to wrap on their own they came out three and
 * one, with the fourth stranded beside a whole empty row.
 *
 * space-between rather than equal tracks, so the pairs reach the full width of
 * the card instead of huddling left with the slack pooled in the middle.
 */
.hc-trustbar__facts {
	display: grid; grid-template-columns: repeat(2, minmax(0, auto));
	justify-content: space-between; gap: var(--hc-4) var(--hc-6);
}
.hc-trustbar__fact { display: flex; align-items: center; gap: var(--hc-3); }
.hc-trustbar__fact svg { color: var(--hc-olive); flex: none; }
.hc-trustbar__fact 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__fact 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);
	padding-left: var(--hc-6); border-left: 1px solid var(--hc-line-soft);
}
.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); }
	/* Stacked: the divider becomes a rule above the score instead of beside it. */
	.hc-trustbar__scores { padding-left: 0; padding-top: var(--hc-5); border-left: 0; border-top: 1px solid var(--hc-line-soft); }
}
@media (max-width: 620px) {
	/* One per row. Two columns of 155px turned every label into three or four
	   lines of tracked caps, which is slower to read than the stack it saved. */
	.hc-trustbar__facts { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
}

/* --- 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.
 */
/* Scoped to the header. Applied to every .hc-btn it also stopped the block
   buttons in the booking box, the ask box and the drawer from wrapping, so a
   long label ran out past the pill instead of taking a second line. */
.hc-header .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); }

/* 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: var(--hc-3); }

/* --- 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); }
/* This kicker was the script face at 2.75rem — the loudest thing in the panel
   and the only eyebrow on the site not set in the tracked UI caps. It now takes
   the standard eyebrow, so this rule carries nothing but the panel's spacing. */
.hc-acts__label { margin-bottom: 0; }
.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: 44px; height: 44px;
	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 horizontal lockup, the same file the header loads. The stacked one used to
 * sit here; it was nearly square and left this column reading as a tall block
 * above the blurb rather than a line of brand across the top of it.
 */
/* The link owns the box so the anchor is the size of the picture and not a
   sliver of inline text under it — otherwise the click target is wrong and the
   focus ring draws in the wrong place. */
.hc-footer__home {
	display: block;
	/* 172px suited the stacked lockup, which was nearly square. The horizontal
	   one is 3.3:1, so at that width the script line fell to about 10px. 280
	   lands the logo on roughly the same measure as the blurb beneath it and
	   stays inside the 316px column. */
	max-width: 280px;
	margin: 0 0 var(--hc-5);
}
.hc-footer__logo { display: block; width: 100%; height: auto; }
.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);
}
/* 16px, not 12: the chip icons below carry a hit area 7px wider than the mark
   on each side, and at a 12px gap two neighbouring targets would overlap. */
.hc-footer__emergency-row { display: flex; align-items: center; gap: var(--hc-4); 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;
}
/* A 30px circle is the right weight beside the emergency number and the wrong
   size to tap. The drawn mark stays 30px; the hit area is grown past it. */
.hc-footer__chip-icon {
	position: relative;
	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::after { content: ""; position: absolute; inset: -7px; }
.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); }
/* These are already .hc-btn--block; re-declaring the padding here only undid
   the symmetric gutters that centre the label. */

.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: 44px; height: 44px;
	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; }
/*
 * Both of these point at the same geometry, so everything they say has to be
 * inherited down into the <use> shadow tree — no descendant selectors will
 * reach the paths. --edge lays a thick gold stroke straddling every boundary;
 * --land covers all of it except the outer half and re-draws the region
 * divisions as hairlines. Same gold in both, so the coast has no seam.
 *
 * There is no longer a --water rule: the lakes are cut out of the shape, so
 * Victoria and Tanganyika are the section's own ground showing through.
 */
.hc-map__edge { fill: var(--hc-dune); stroke: var(--hc-gold); stroke-width: 3; stroke-linejoin: round; }
.hc-map__land { fill: var(--hc-dune); stroke: var(--hc-gold); stroke-width: .6; stroke-linejoin: round; }

.hc-map__pin circle { fill: var(--hc-olive); }
/*
 * 13px against a country 541 units wide. The old trace was 684 wide and wore
 * 15px; the pins of the northern circuit sit within 100km of each other and
 * their labels crowd if the type does not come down with the drawing.
 */
.hc-map__pin text {
	fill: var(--hc-text-muted); font-family: var(--hc-ui); font-size: 13px;
	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: 17px; }
.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: 12px;
	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); }
	/* The map goes full width here, so these are the same on-screen sizes the
	   700-unit viewBox gave at 19px and 23px — just restated for a 616 box. */
	.hc-map__pin text { font-size: 17px; }
	.hc-map__pin.is-here text { font-size: 21px; }
}

/* 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); }

/* ===========================================================
   36. OPTICAL CENTRING FOR TRACKED LABELS

   This site sets nearly every label in wide-tracked uppercase —
   .15em on nav, .24em on eyebrows and pills, .26em on buttons.
   letter-spacing puts its space after the LAST glyph as well as
   between them, so the box a centred label is centred inside is
   one tracking unit wider than the glyphs it holds, and the
   glyphs land half a unit left of the middle. On a 22px pill at
   .24em that is a visible 3px, and it is why a wall of pills
   reads as leaning left.

   The correction is the tracking added back onto the LEFT
   padding: it moves the content box right by exactly that half
   and, unlike text-indent, it holds when the label wraps. Each
   rule restates its own base padding so the compensation is
   legible next to the value it corrects.
   =========================================================== */

/* --- pills and chips -------------------------------------- */
.hc-pill { padding-left: calc(22px + var(--hc-track-mid)); }
.hc-chip span { padding-left: calc(22px + var(--hc-track-mid)); }
.hc-chipbar .hc-chip span { padding-left: calc(16px + var(--hc-track-mid)); }
.hc-filters a { padding-left: calc(20px + var(--hc-track-mid)); }
.hc-circuit__parks li { padding-left: calc(15px + var(--hc-track-mid)); }
.hc-seasons__months li { padding-left: calc(14px + var(--hc-track-wide)); }
.hc-footer__chip { padding-left: calc(14px + .08em); }
.hc-badge { padding-left: calc(14px + var(--hc-track-wide)); }
.hc-itin__days { padding-left: calc(14px + var(--hc-track-wide)); }
.hc-itincard__days, .hc-itincard__badge { padding-left: calc(13px + var(--hc-track-wide)); }
.hc-pager .page-numbers { padding-left: calc(var(--hc-3) + .04em); }

@media (min-width: 1081px) {
	.hc-toursplit .hc-chipbar .hc-chip span { padding-left: calc(11px + .06em); }
}

/* --- tab and toggle rows ---------------------------------- */
.hc-tabs__btn { padding-left: calc(var(--hc-5) + var(--hc-track-mid)); }
.hc-months .hc-tabs__btn { padding-left: calc(4px + var(--hc-track-mid)); }
.hc-seasons__btn { padding-left: calc(26px + var(--hc-track-mid)); }
.hc-climate__toggle { padding-left: calc(32px + var(--hc-track-mid)); }
.hc-acts__cta { padding-left: calc(26px + var(--hc-track-btn)); }

/* The month strip only centres its labels while it is a strip. Past 900px it
   becomes a stacked column reading down the left edge, where a flush left is
   the alignment and the correction would break it. */
@media (max-width: 899px) {
	.hc-bymonth__btn { padding-left: calc(18px + var(--hc-track-mid)); }
}

/* --- centred label text ----------------------------------- */
.hc-rule span { padding-left: var(--hc-track-wide); }
.hc-stat__label { padding-left: var(--hc-track-mid); }
.hc-person__role { padding-left: var(--hc-track-wide); }
.hc-badge-tile span { padding-left: var(--hc-track-wide); }
.hc-creds__item span { padding-left: var(--hc-track-wide); }
.hc-acts__place { padding-left: var(--hc-track-wide); }
.hc-acts__name { padding-left: var(--hc-track-tight); }
.hc-logowall span { padding-left: calc(var(--hc-3) + var(--hc-track-mid)); }
.hc-connect__way { padding-left: calc(var(--hc-3) + var(--hc-track-mid)); }
.hc-destmenu__name { padding-left: calc(var(--hc-3) + var(--hc-track-mid)); }

/* --- centred section heads -------------------------------- */
.hc-section-head--center .hc-eyebrow,
.hc-statement .hc-eyebrow,
.hc-hero__content--center .hc-eyebrow,
.hc-seasons__panel .hc-eyebrow { padding-left: var(--hc-track-wide); }

.hc-section-head--center .hc-title { padding-left: var(--hc-track-display); }
.hc-statement .hc-display { padding-left: .11em; }

/*
 * The script face is not tracked and sits inside these same centred blocks.
 * Without this it inherits the correction from nothing — but the eyebrow and
 * title above it have moved, so it is stated here that it deliberately has not.
 */
.hc-statement .hc-script, .hc-display__script { padding-left: 0; }

/* ==========================================================================
   37. ACCOMMODATION — a region filter beside a wall of photographs
   ========================================================================== */

/*
 * The one archive on the site laid out as a sidebar plus a grid. Everywhere
 * else the filter is a row of pills above the cards, which works while the
 * options are few and short. Destinations are neither: there are eight of
 * them and "Ngorongoro Conservation Area" does not fit in a pill. A column
 * of checkboxes also lets someone tick two, which pills cannot.
 */
.hc-lodges { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hc-6); }

@media (min-width: 900px) {
	.hc-lodges {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: clamp(32px, 4vw, 72px);
		align-items: start;
	}
	/* Follows the reader down a long grid, clearing the sticky header. */
	.hc-lodges__filter { position: sticky; top: calc(var(--hc-header-h, 96px) + 24px); }
}

.hc-lodges__filter-head {
	font-family: var(--hc-ui); font-size: 0.6875rem; text-transform: uppercase;
	letter-spacing: var(--hc-track-wide); color: var(--hc-text-muted);
	padding-bottom: var(--hc-3); margin-bottom: var(--hc-3);
	border-bottom: 1px solid var(--hc-line);
}

.hc-lodges__opts { display: flex; flex-direction: column; gap: 2px; }

.hc-lodges__opt {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 0; cursor: pointer;
	font-size: 0.875rem; font-weight: 300; color: var(--hc-text);
	transition: color .2s var(--hc-ease);
}
.hc-lodges__opt:hover { color: var(--hc-terra-text); }
.hc-lodges__opt input {
	accent-color: var(--hc-olive);
	width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer;
}
.hc-lodges__opt input:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: 2px; }

/* Two up, because these are photographs and a third column starves them. */
.hc-lodges__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hc-4); }
@media (min-width: 620px) { .hc-lodges__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* .hc-filterable stretches a .hc-card to fill its cell; the tile needs the
   same, or the flex wrapper leaves it at its intrinsic width. */
.hc-filterable > .hc-lodgetile { width: 100%; }

.hc-lodges__none { padding: var(--hc-6) 0; color: var(--hc-text-muted); font-weight: 300; }

/* ---------- the tile itself ---------- */

.hc-lodgetile {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--hc-radius);
	aspect-ratio: 4 / 3;
	background: var(--hc-olive-deep);
	isolation: isolate;
}

.hc-lodgetile__img { position: absolute; inset: 0; display: block; }
.hc-lodgetile__img img,
.hc-lodgetile__img .hc-placeholder {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .7s var(--hc-ease);
}
.hc-lodgetile:hover .hc-lodgetile__img img { transform: scale(1.045); }

/*
 * Dark at both ends and clear through the middle: the region label needs a
 * ground at the top, the name and the pill need one at the bottom, and the
 * photograph should be left alone in between.
 */
.hc-lodgetile__veil {
	position: absolute; inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(43, 46, 41, .52) 0%,
		rgba(43, 46, 41, .10) 30%,
		rgba(43, 46, 41, .18) 52%,
		rgba(43, 46, 41, .82) 100%
	);
}

.hc-lodgetile__region {
	position: absolute; top: var(--hc-4); left: var(--hc-4); right: var(--hc-4);
	font-family: var(--hc-ui); font-size: 0.6875rem; text-transform: uppercase;
	letter-spacing: var(--hc-track-wide); color: rgba(250, 249, 246, .86);
}

.hc-lodgetile__body {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: var(--hc-4);
	display: flex; flex-direction: column; gap: var(--hc-3);
}

/* The card title's treatment, on a dark ground. The reference sets these in
   a light italic serif; this theme retired its serif, so the display face
   carries it instead and the name still reads as a name, not as a label. */
.hc-lodgetile__name {
	font-family: var(--hc-display); font-weight: 400;
	font-size: clamp(1.125rem, 2.1vw, 1.5rem); line-height: 1.25;
	letter-spacing: var(--hc-track-tight);
	color: var(--hc-bone);
}

.hc-lodgetile__btn {
	display: block; text-align: center;
	padding: 11px 18px;
	border: 1px solid rgba(250, 249, 246, .48);
	border-radius: var(--hc-radius-pill);
	font-family: var(--hc-ui); font-size: 0.6875rem; text-transform: uppercase;
	letter-spacing: var(--hc-track-btn); color: var(--hc-bone);
	transition: background .25s var(--hc-ease), border-color .25s var(--hc-ease), color .25s var(--hc-ease);
}
.hc-lodgetile:hover .hc-lodgetile__btn,
.hc-lodgetile:focus-visible .hc-lodgetile__btn {
	background: var(--hc-gold); border-color: var(--hc-gold); color: var(--hc-ink);
}

@media (prefers-reduced-motion: reduce) {
	.hc-lodgetile__img img { transition: none; }
	.hc-lodgetile:hover .hc-lodgetile__img img { transform: none; }
}

/* ---------- the archive intro ---------- */

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

/*
 * Once the intro moved out, this hero carries an eyebrow and one word: 67px
 * of content inside 455px, or 85% empty, on a screen 812px tall. A full-height
 * photograph earns its keep when it frames a sentence; holding a single word
 * it is just distance between the reader and the camps.
 */
@media (max-width: 899px) {
	.hc-hero.hc-hero--brief { min-height: 340px; }
}

/* The trigger only exists below 900px; the sidebar needs no opening. */
.hc-lodges__toggle { display: none; }

/*
 * Below 900px the filter is a bar that stays under the header, and the
 * destinations drop out of it over the grid.
 *
 * Eight stacked checkboxes cost 392px inline, which put the first lodge 1.27
 * screens down: a control standing in front of all the content. Collapsing it
 * costs 74px, and making it stick means the reader who is forty tiles deep can
 * narrow the list without scrolling back up.
 */
@media (max-width: 899px) {
	/*
	 * Block, not grid. A sticky grid item is bounded by its own row, which is
	 * exactly the height of the filter, so it would have nothing to travel
	 * through. As a block child it takes the whole column as its containing
	 * block and follows the reader down all 49 tiles.
	 */
	.hc-lodges { display: block; }
	.hc-lodges__main { margin-top: var(--hc-5); }

	.hc-lodges__filter {
		position: sticky;
		/* Measured by the header script; the header itself is sticky above. */
		top: var(--hc-header-real, 92px);
		/* Under the header's 100, above the tiles. */
		z-index: 20;
		background: var(--hc-bg);
		/* Full-bleed, so nothing shows through beside the bar as it travels. */
		margin-inline: calc(var(--hc-gutter, 24px) * -1);
		padding-inline: var(--hc-gutter, 24px);
		border-bottom: 1px solid var(--hc-line);
	}

	.hc-lodges__toggle {
		display: flex;
		align-items: center;
		gap: var(--hc-3);
		width: 100%;
		min-height: 52px;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
		text-align: left;
		font-family: var(--hc-ui);
		font-size: 0.6875rem;
		text-transform: uppercase;
		letter-spacing: var(--hc-track-wide);
		color: var(--hc-text);
	}
	.hc-lodges__toggle:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: 3px; }
	.hc-lodges__toggle-text { flex: 1 1 auto; }

	/* How many destinations are on, without opening the panel to find out. */
	.hc-lodges__badge {
		flex: 0 0 auto;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: var(--hc-radius-pill);
		background: var(--hc-olive);
		color: var(--hc-bone);
		font-size: 0.6875rem;
		line-height: 20px;
		text-align: center;
		letter-spacing: 0;
	}

	/* The theme's own disclosure mark: a plus whose upright fades on open. */
	.hc-lodges__icon { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
	.hc-lodges__icon::before,
	.hc-lodges__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-lodges__icon::before { width: 12px; height: 1px; }
	.hc-lodges__icon::after { width: 1px; height: 12px; }
	.hc-lodges__filter.is-open .hc-lodges__icon::after {
		transform: translate(-50%, -50%) rotate(90deg); opacity: 0;
	}

	.hc-lodges__panel {
		position: absolute;
		left: 0; right: 0; top: 100%;
		display: none;
		max-height: min(58vh, 420px);
		overflow-y: auto;
		padding: var(--hc-3) var(--hc-gutter, 24px) var(--hc-4);
		background: var(--hc-bg);
		border-bottom: 1px solid var(--hc-line);
		/* Offset and blur, because this sheet genuinely sits above the grid. */
		box-shadow: 0 18px 34px -16px rgba(27, 29, 25, .32);
	}
	.hc-lodges__filter.is-open .hc-lodges__panel { display: block; }

	/* The button already says Destination. */
	.hc-lodges__panel .hc-lodges__filter-head { display: none; }

	.hc-lodges__opt { min-height: 44px; padding: 0; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
	.hc-lodges__icon::before,
	.hc-lodges__icon::after { transition: none; }
}

/* ---------- the single lodge ---------- */

/*
 * The facts a lodge knows, one pill each.
 *
 * The shared .hc-factstrip is a full-width dark band divided equally between
 * however many facts it is handed. That suits a tour, which usually has five.
 * A lodge usually has two, and two 552px cells holding 95px of text is mostly
 * empty band. A pill sizes to its answer instead, so two facts take the room
 * two facts need.
 *
 * The label sits outside and above the pill rather than inside it because it
 * is the quiet half: you scan the answers, not the questions.
 *
 * Pill-SHAPED, not a button. These are spans — "Tented lodge" and "25" have
 * nowhere to lead, and anything wearing the theme's button shape that does
 * nothing on click is a promise the page cannot keep. Hence no <button>, no
 * <a>, and no hover state.
 *
 * .hc-factstrip is untouched; single-hc_tour.php and single-hc_daytrip.php
 * still use it as drawn.
 */
.hc-lodgefacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hc-5) var(--hc-3);
	padding-block: var(--hc-5);
}
.hc-lodgefacts__item {
	display: flex; flex-direction: column; align-items: flex-start;
	/* 1rem between the label and its pill. At 8px the label read as part of
	   the pill's own top edge; at 16px it reads as a caption above it. */
	gap: var(--hc-4);
	max-width: 100%;
}
.hc-lodgefacts__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);
	line-height: 1;
	/* The pill's left edge is a curve, so its ink starts a shade right of the
	   box. Two pixels of indent puts the label optically over it. */
	padding-left: 2px;
}
.hc-lodgefacts__value {
	display: inline-flex; align-items: center;
	min-height: 42px;
	padding: 8px 22px;
	border: 1px solid var(--hc-terra-deep);
	border-radius: var(--hc-radius-pill);
	background: var(--hc-terra-deep);
	color: var(--hc-bone);
	font-size: 1.0625rem; font-weight: 300;
	letter-spacing: .02em; line-height: 1.25;
	/* No nowrap. "Best for" can arrive as a phrase, and a pill that wraps to
	   two lines is better than one that runs off a 390px screen. */
}

/* 704px of body copy runs to roughly 83 characters. */
.hc-measure { max-width: 62ch; }

/*
 * No padding override here on purpose. Two unbanded sections in a row already
 * get the theme's hairline and its tighter top step, which is the house way of
 * saying "same subject, second movement". That is exactly the relationship
 * between a lodge's description and its photographs.
 */
.hc-lodge-shots .hc-title { margin-bottom: var(--hc-5); }

/*
 * A two-up step for the related lodges between phone and desktop.
 *
 * .hc-grid--3 drops straight from three columns to one at 860px, which suits
 * the wide feature rows it was written for. Three lodge cards stacked at 707px
 * wide run to 2429px, so a tail of suggestions ends up 2.4 screens tall on a
 * tablet. Two across halves it. The third card sits alone on the second row,
 * which is what three of anything does in a two-column grid.
 */
@media (min-width: 560px) and (max-width: 860px) {
	.hc-lodge-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}