/* ==========================================================================
   AK Nova — booking-product design system
   1  Tokens
   2  Reset & base
   3  Typography & rich text
   4  Legacy content compatibility
   5  Layout primitives
   6  Buttons, chips, forms
   7  Header, nav, search
   8  Hero & home sections
   9  Cards & rails
   10 Filters & result bar
   11 Single tour (tabs, itinerary, rail)
   12 Blog, archives, comments
   13 Footer, mobile bar, utilities
   14 Responsive
   ========================================================================== */

/* 1 — Tokens ------------------------------------------------------------- */

:root {
	/* Ink */
	--ink:        #131922;
	--ink-2:      #3c4553;
	--ink-3:      #6b7484;
	--ink-4:      #98a0ad;

	/* Ground */
	--bg:         #f4f6f8;
	--surface:    #ffffff;
	--surface-2:  #f7f9fb;
	--surface-3:  #eef1f5;
	--line:       #e2e6ec;
	--line-2:     #d3d9e2;

	/*
	 * Colour hierarchy — three tiers, so the eye always lands in the same order:
	 *   ember  money and primary actions (price, CTA, enquire)
	 *   brand  navigation, links, structure, secondary actions
	 *   gold   endorsement (ratings, badges, footer accents)
	 * Plus two signal colours: green for savings and inclusions, grey for
	 * exclusions. Nothing else gets to shout.
	 *
	 * --ember is deliberately darker than a pure orange: at #d9571c white
	 * button text only reached 3.9:1, below the 4.5:1 AA threshold. #c74f15
	 * measures 4.6:1 while still reading as a vivid burnt orange.
	 */
	--brand:      #0c5a5b;
	--brand-600:  #094748;
	--brand-100:  #e2efee;
	--ember:      #c74f15;
	--ember-600:  #a63f0e;
	--ember-100:  #fcece3;
	--gold:       #f0a52c;
	--gold-ink:   #3b2a08;
	--ok:         #16794c;
	--save-bg:    #e2f1e8;
	--save-ink:   #0f5c3a;

	/* Type */
	--font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fs-xs:   0.75rem;   /* 12 */
	--fs-sm:   0.8125rem; /* 13 */
	--fs-base: 0.9375rem; /* 15 */
	--fs-md:   1rem;      /* 16 */
	--fs-lg:   1.125rem;  /* 18 */
	--fs-xl:   1.375rem;  /* 22 */
	--fs-2xl:  1.75rem;   /* 28 */
	--fs-3xl:  2.25rem;   /* 36 */
	--fs-4xl:  3rem;      /* 48 */

	/* Space */
	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
	--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 88px;

	/* Shape */
	--r-sm: 6px;  --r:  10px;  --r-lg: 14px;  --r-pill: 999px;
	--shadow-1: 0 1px 2px rgba(19, 25, 34, .05);
	--shadow-2: 0 2px 6px rgba(19, 25, 34, .06), 0 1px 2px rgba(19, 25, 34, .04);
	--shadow-3: 0 12px 32px rgba(19, 25, 34, .10), 0 2px 6px rgba(19, 25, 34, .05);

	--container: 1240px;
	--header-h: 68px;
	--ease: cubic-bezier(.4, 0, .2, 1);
}

/* 2 — Reset & base -------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-600); }

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

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

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	z-index: 999;
	width: auto; height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--ink);
	color: #fff;
	border-radius: var(--r-sm);
}

.icon { flex: none; display: inline-block; vertical-align: middle; }

/* Hidden scrollbars ---------------------------------------------------------
   The theme's own scroll containers each carry their own affordance — the rails
   have prev/next buttons, the sticky panels have a visible edge — so the OS bar
   only breaks the rhythm. Content stays scrollable by wheel, trackpad, touch
   and keyboard.

   Note: `scrollbar-width` must be `none`, not `thin`. Chrome 121+ implements the
   standard property and, once it is set, ignores ::-webkit-scrollbar sizing
   entirely — which is why a "thin" bar still rendered at full OS width. */
.rail__track,
.rail-enquiry,
.filters,
.tabs__list,
.nav,
.nav__list {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.rail__track::-webkit-scrollbar,
.rail-enquiry::-webkit-scrollbar,
.filters::-webkit-scrollbar,
.tabs__list::-webkit-scrollbar,
.nav::-webkit-scrollbar,
.nav__list::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* 3 — Typography & rich text ---------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-3);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.018em;
	color: var(--ink);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

.section__title {
	font-size: var(--fs-2xl);
	margin: 0;
}

.section__lede {
	color: var(--ink-3);
	font-size: var(--fs-md);
	max-width: 62ch;
	margin: var(--sp-2) 0 0;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--brand);
	margin: 0 0 var(--sp-2);
}

/* Rich text coming out of the editor / ACF fields. */
.rte { font-size: var(--fs-md); color: var(--ink-2); }
.rte > *:first-child { margin-top: 0; }
.rte > *:last-child { margin-bottom: 0; }
.rte h2 { font-size: var(--fs-xl); margin: var(--sp-6) 0 var(--sp-3); color: var(--ink); }
.rte h3 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-2); color: var(--ink); }
.rte h4 { font-size: var(--fs-md); margin: var(--sp-4) 0 var(--sp-2); color: var(--ink); }
.rte p { margin: 0 0 var(--sp-4); }
.rte ul, .rte ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
.rte li { margin-bottom: 6px; }
.rte ul { list-style: none; padding-left: 0; }
.rte ul li {
	position: relative;
	padding-left: 26px;
}
.rte ul li::before {
	content: "";
	position: absolute;
	left: 8px; top: .62em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--brand);
}
.rte ol { padding-left: 1.3em; }
.rte a { text-decoration: underline; text-underline-offset: 2px; }
.rte img { border-radius: var(--r); margin: var(--sp-4) 0; }
.rte blockquote {
	margin: var(--sp-5) 0;
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface-2);
	border-left: 3px solid var(--brand);
	border-radius: 0 var(--r) var(--r) 0;
	color: var(--ink);
	font-size: var(--fs-lg);
}
.rte table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--sp-4) 0;
	font-size: var(--fs-base);
}
.rte th, .rte td {
	border: 1px solid var(--line);
	padding: 10px 12px;
	text-align: left;
}
.rte th { background: var(--surface-2); font-weight: 700; }
.rte figure { margin: var(--sp-5) 0; }
.rte figcaption { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 6px; }

/* Tables and wide media inside prose scroll rather than blowing the layout. */
.rte .table-scroll, .rte .wp-block-table { overflow-x: auto; }

/* Read more / Read less ---------------------------------------------------- */

.readmore__rest {
	overflow: hidden;
	transition: none;
}
.readmore.is-collapsed .readmore__rest {
	display: none;
}

/* Soften the cut when collapsed. */
.readmore.is-collapsed .readmore__intro > *:last-child {
	margin-bottom: 0;
}

.readmore__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* Sits below the floated figure rather than beside it. */
	clear: both;
	margin-top: var(--sp-4);
	padding: 11px 22px;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--ember);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background .16s var(--ease);
}
.readmore__btn:hover { background: var(--ember-600); }
.readmore__btn .icon { transition: transform .2s var(--ease); }
.readmore:not(.is-collapsed) .readmore__btn .icon { transform: rotate(180deg); }

/* Featured image floated beside the opening copy, as the previous theme did.
   The wrapper clears so following sections never ride up alongside it. */
.entry__float {
	float: right;
	width: 46%;
	max-width: 520px;
	margin: 0 0 var(--sp-4) var(--sp-5);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--surface-3);
}
.entry__float img { width: 100%; height: auto; display: block; }
.entry__float figcaption {
	padding: 8px 12px;
	background: var(--surface-2);
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
.entry::after { content: ""; display: block; clear: both; }

/* 4 — Legacy content compatibility ---------------------------------------- */
/* Content authored under the old Bootstrap 3 theme still carries .row /
   .col-md-* / .nav-tabs markup. These rules keep it laid out sensibly without
   loading Bootstrap. Scoped to .rte so they never touch the theme's own grid. */

.rte .container,
.rte .container-fluid { width: 100%; max-width: none; padding: 0; margin: 0; }

.rte .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}

.rte [class*="col-xs-"],
.rte [class*="col-sm-"],
.rte [class*="col-md-"],
.rte [class*="col-lg-"] {
	padding: 0 10px;
	width: 100%;
	min-width: 0;
}

@media (min-width: 768px) {
	.rte .col-md-1,  .rte .col-sm-1  { width: 8.333%; }
	.rte .col-md-2,  .rte .col-sm-2  { width: 16.666%; }
	.rte .col-md-3,  .rte .col-sm-3  { width: 25%; }
	.rte .col-md-4,  .rte .col-sm-4  { width: 33.333%; }
	.rte .col-md-5,  .rte .col-sm-5  { width: 41.666%; }
	.rte .col-md-6,  .rte .col-sm-6  { width: 50%; }
	.rte .col-md-7,  .rte .col-sm-7  { width: 58.333%; }
	.rte .col-md-8,  .rte .col-sm-8  { width: 66.666%; }
	.rte .col-md-9,  .rte .col-sm-9  { width: 75%; }
	.rte .col-md-10, .rte .col-sm-10 { width: 83.333%; }
	.rte .col-md-11, .rte .col-sm-11 { width: 91.666%; }
	.rte .col-md-12, .rte .col-sm-12 { width: 100%; }
}

/* About / company page content -----------------------------------------------
   The copy is authored with the previous theme's wrappers: .subtitle as an
   eyebrow, .text as prose, .lower-text as a bullet list, and .features as an
   image row that is empty on every current page. */

.rte .subtitle {
	display: inline-flex;
	align-items: center;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--brand);
}

.aboutdoc .rte > h2 {
	margin-top: 0;
	font-size: var(--fs-2xl);
	max-width: 24ch;
}

.rte .text { margin-bottom: var(--sp-4); }
.rte .text:last-child { margin-bottom: 0; }

/* Collapse the leftover .features row when it holds nothing but empty divs. */
.rte .features:not(:has(img, p, li, h1, h2, h3, h4, a, iframe)) { display: none; }

/* The bullets are wrapped in a list item that carries no text of its own. */
.rte .lower-text {
	clear: both;
	margin-top: var(--sp-5);
	padding: var(--sp-5);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r);
}
.rte .lower-text ul { padding-left: 0; margin: 0; }
.rte .lower-text li[style*="none"] { padding-left: 0; }
.rte .lower-text li[style*="none"]::before { display: none; }
.rte .lower-text ul ul { display: grid; gap: 10px; }
.rte .lower-text ul ul li {
	padding-left: 32px;
	margin: 0;
	font-weight: 600;
	color: var(--ink);
}
.rte .lower-text ul ul li::before {
	content: "";
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #e4f2ea;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316794c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

/* Contact page ---------------------------------------------------------------
   Font Awesome is not loaded by this theme, so the <i class="fa fa-phone">
   elements the contact copy is peppered with are empty and only add stray gaps. */
.rte i[class^="fa "],
.rte i[class*=" fa-"],
.rte i[class^="fa-"] { display: none; }

.contactcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.contactcards a {
	display: block;
	height: 100%;
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	color: var(--ink);
	box-shadow: var(--shadow-1);
	transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.contactcards a:hover {
	border-color: var(--brand);
	box-shadow: var(--shadow-3);
	transform: translateY(-2px);
	color: var(--ink);
}
.contactcards__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	margin-bottom: var(--sp-3);
	border-radius: 50%;
	background: var(--brand-100);
	color: var(--brand);
}
.contactcards__icon--wa { background: #e3f8ea; color: var(--ok); }
.contactcards__label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.contactcards__value {
	display: block;
	margin: 2px 0 4px;
	font-size: var(--fs-lg);
	font-weight: 800;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}
.contactcards__note { display: block; font-size: var(--fs-sm); color: var(--ink-3); }

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

.contact__details {
	position: sticky;
	top: calc(var(--header-h) + 16px);
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-1);
	font-size: var(--fs-sm);
}
.contact__details .add-box > h2:first-child,
.contact__details h2 {
	margin-top: 0;
	font-size: var(--fs-lg);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--line);
}
.contact__details p { margin-bottom: 10px; }
.contact__details strong { color: var(--ink); }
.contact__details a { overflow-wrap: anywhere; }

/* Responsive frame for an embedded map. */
.mapframe {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-2);
	background: var(--surface-3);
	aspect-ratio: 21 / 8;
}
.mapframe iframe,
.mapframe > * {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

@media (max-width: 860px) {
	.contact__details { position: static; }
	.mapframe { aspect-ratio: 4 / 3; }
}

/* Stat band */
.statband {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.statband li {
	padding: var(--sp-5) var(--sp-4);
	background: var(--surface);
	text-align: center;
}
.statband b {
	display: block;
	font-size: var(--fs-3xl);
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--brand);
	line-height: 1.1;
}
.statband span {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-sm);
	color: var(--ink-3);
}

.rte .text-center { text-align: center; }
.rte .text-right  { text-align: right; }
.rte .pull-right  { float: right; }
.rte .pull-left   { float: left; }
.rte .img-responsive { max-width: 100%; height: auto; }
.rte .clearfix::after { content: ""; display: table; clear: both; }

/* Legacy tab markup is upgraded by main.js; style it like the new tabs. */
.rte .nav-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0 0 var(--sp-4);
	padding: 4px;
	background: var(--surface-3);
	border-radius: var(--r);
}
.rte .nav-tabs li { margin: 0; padding: 0; }
.rte .nav-tabs li::before { display: none; }
.rte .nav-tabs li > a {
	display: block;
	padding: 8px 14px;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink-2);
	text-decoration: none;
}
.rte .nav-tabs li.active > a,
.rte .nav-tabs li > a[aria-selected="true"] {
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-1);
}
.rte .tab-pane { display: none; }
.rte .tab-pane.active { display: block; }

/* 5 — Layout primitives --------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site__main { flex: 1 0 auto; }

.section { padding: var(--sp-8) 0; }
.section--tight { padding: var(--sp-7) 0; }
.section--alt { background: var(--surface); }

.section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
	flex-wrap: wrap;
}

.grid { display: grid; gap: var(--sp-4); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Two-column shell: results/content + sticky rail. */
.shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--sp-6);
	align-items: start;
	padding: var(--sp-6) 0 var(--sp-8);
}

.shell--filters { grid-template-columns: 268px minmax(0, 1fr); }
.shell--wide { grid-template-columns: minmax(0, 1fr); }

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-2);
}

/* 6 — Buttons, chips, forms ----------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	background: var(--surface-3);
	color: var(--ink);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--primary { background: var(--ember); color: #fff; }
.btn--primary:hover { background: var(--ember-600); color: #fff; }

.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-600); color: #fff; }

.btn--ghost {
	background: var(--surface);
	border-color: var(--line-2);
	color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink-4); color: var(--ink); }

.btn--quiet { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface); color: var(--ink); }

.btn--sm { padding: 8px 14px; font-size: var(--fs-xs); }
.btn--lg { padding: 14px 24px; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }

.iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink-2);
	transition: border-color .16s var(--ease), color .16s var(--ease);
}
.iconbtn:hover { border-color: var(--ink-4); color: var(--ink); }
.iconbtn--menu { display: none; }

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: var(--r-sm);
	background: var(--surface-3);
	color: var(--ink-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	white-space: nowrap;
}
.chip .icon { color: var(--brand); }

.tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--r-pill);
	background: var(--brand-100);
	color: var(--brand);
	font-size: var(--fs-xs);
	font-weight: 700;
}

/* Rating */
.rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
.rating__stars {
	position: relative;
	width: 74px; height: 13px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='13' viewBox='0 0 74 13'%3E%3Cpath fill='%23d9dee6' d='M6.5 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6L1.3 4.8l3.6-.5zM21.3 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5zM36.1 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5zM50.9 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5zM65.7 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}
.rating__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='13' viewBox='0 0 74 13'%3E%3Cpath fill='%23f0a52c' d='M6.5 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6L1.3 4.8l3.6-.5zM21.3 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5zM36.1 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5zM50.9 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5zM65.7 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}
.rating__value { color: var(--ink); font-weight: 800; }

/* Price — the money is the star of a booking card, so it gets the action colour
   and the heaviest weight on the card. */
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price__was { color: var(--ink-4); font-size: var(--fs-xs); }
.price__now {
	color: var(--ember);
	font-size: var(--fs-lg);
	font-weight: 800;
	letter-spacing: -.02em;
}
.price__unit { color: var(--ink-3); font-size: var(--fs-xs); }

/* Savings pill: green reads as "you keep this", never competing with the CTA. */
.price__save {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--r-pill);
	background: var(--save-bg);
	color: var(--save-ink);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: .01em;
	white-space: nowrap;
}
.price__request { color: var(--ink-2); font-size: var(--fs-md); font-weight: 700; }

/* Priceless cards have nothing to show, so "On request" is the ask-us action. */
/* It stands in for a price and opens the form, so it takes the action colour. */
.price__request--action {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--ember);
	font-weight: 800;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 4px;
	cursor: pointer;
	transition: color .16s var(--ease);
}
.price__request--action:hover {
	color: var(--ember-600);
	text-decoration-style: solid;
}
.price--lg .price__now { font-size: var(--fs-2xl); color: var(--ember); }

/* Form controls */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	background: var(--surface);
	font-size: var(--fs-base);
	transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-100);
}
textarea { min-height: 96px; resize: vertical; }

select {
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
}

::placeholder { color: var(--ink-4); }

/* Custom checkbox used in filters */
.check {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	cursor: pointer;
	font-size: var(--fs-sm);
	color: var(--ink-2);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px; height: 17px;
	border: 1.5px solid var(--line-2);
	border-radius: 4px;
	background: var(--surface);
	color: transparent;
	transition: background .14s var(--ease), border-color .14s var(--ease);
}
.check input:checked + .check__box {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px var(--brand-100); }
.check__label { flex: 1; }
/* An applied filter is state the user needs to see at a glance. */
.check input:checked ~ .check__label { color: var(--brand); font-weight: 700; }
.check__count { color: var(--ink-4); font-size: var(--fs-xs); }

/* Range */
input[type="range"] {
	width: 100%;
	appearance: none;
	background: transparent;
	height: 22px;
}
input[type="range"]::-webkit-slider-runnable-track {
	height: 4px; border-radius: 2px; background: var(--line-2);
}
input[type="range"]::-moz-range-track {
	height: 4px; border-radius: 2px; background: var(--line-2);
}
input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 18px; height: 18px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--brand);
	border: 3px solid #fff;
	box-shadow: var(--shadow-2);
}
input[type="range"]::-moz-range-thumb {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--brand);
	border: 3px solid #fff;
	box-shadow: var(--shadow-2);
}

/* 7 — Header, nav, search -------------------------------------------------- */

.topbar {
	background: var(--ink);
	color: #cfd5de;
	font-size: var(--fs-xs);
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 36px;
}
.topbar__note { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.topbar__note .icon { color: var(--gold); }
.topbar__links { display: flex; align-items: center; gap: var(--sp-4); }
.topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #cfd5de;
}
.topbar__link:hover { color: #fff; }
/* The phone number is the highest-intent link in the header. */
.topbar__link--strong { font-weight: 800; color: #fff; }
.topbar__link--strong .icon { color: var(--gold); }
.topbar__menu {
	display: flex;
	gap: var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.topbar__menu a { color: #cfd5de; }
.topbar__menu a:hover { color: #fff; }

.masthead {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
.masthead.is-stuck { box-shadow: var(--shadow-2); }

.masthead__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	min-height: var(--header-h);
}

.brand { flex: none; }
.brand img, .custom-logo { max-height: 46px; width: auto; }
.brand__text { display: block; line-height: 1.15; }
.brand__name {
	display: block;
	font-size: var(--fs-lg);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ink);
}
.brand__tag {
	display: block;
	font-size: var(--fs-xs);
	color: var(--ink-3);
	font-weight: 500;
}

.brand__logo { display: block; }
.brand__logo img { max-height: 46px; width: auto; object-fit: contain; }

/* The navigation sits on its own full-width row. A long menu therefore wraps
   harmlessly instead of colliding with the header CTA, and submenus are not
   clipped by an overflow container. */
/* The menu sits inline with the logo. nowrap keeps it on one line rather than
   dropping onto a second row and colliding with the header actions; the mid
   breakpoint below tightens spacing before the mobile drawer takes over. */
.nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	flex: 1 1 auto;
	min-width: 0;
}
.nav__list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav__list > li { flex: none; }

.nav__hint {
	flex: none;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--brand);
	white-space: nowrap;
}
.nav__list > li { position: relative; }
.nav__list > li > a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-2);
	white-space: nowrap;
}
.nav__list > li > a:hover { background: var(--surface-3); color: var(--ink); }
.nav__list > li.current-menu-item > a,
.nav__list > li.current_page_item > a,
.nav__list > li.current-menu-ancestor > a { color: var(--brand); background: var(--brand-100); }

/* Dropdowns */
.nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 6px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--shadow-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
	z-index: 5;
}
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.nav__list .sub-menu a {
	display: block;
	padding: 8px 10px;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	color: var(--ink-2);
}
.nav__list .sub-menu a:hover { background: var(--surface-3); color: var(--ink); }
.nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 5px; height: 5px;
	margin-left: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.nav__hint { margin: 8px 0 0; font-size: var(--fs-xs); }

.masthead__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-left: auto;
}

.searchdrop {
	border-top: 1px solid var(--line);
	background: var(--surface-2);
	padding: var(--sp-4) 0;
}

.searchform { display: flex; gap: var(--sp-2); }
.searchform__field { position: relative; flex: 1; }
.searchform__field .icon {
	position: absolute;
	left: 13px; top: 50%;
	transform: translateY(-50%);
	color: var(--ink-4);
	pointer-events: none;
}
.searchform input[type="search"] { padding-left: 40px; }

/* 8 — Hero & home sections ------------------------------------------------- */

.hero {
	position: relative;
	background: var(--ink);
	color: #fff;
	overflow: hidden;
}
.hero__media {
	position: absolute;
	inset: 0;
}
.hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .5;
}

/* Slider: slides stack and crossfade, so nothing reflows between them. With no
   JavaScript the first slide keeps its .is-active class and simply stays. */
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .8s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { opacity: .5; }

.hero__nav {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding-bottom: var(--sp-6);
}
.hero__caption {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold);
}
.hero__dots { display: flex; gap: 8px; }
.hero__dot {
	width: 30px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .32);
	cursor: pointer;
	transition: background .2s var(--ease), width .2s var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, .6); }
.hero__dot.is-active { width: 44px; background: var(--gold); }
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(19,25,34,.55) 0%, rgba(19,25,34,.82) 100%);
}
.hero__inner {
	position: relative;
	z-index: 1;
	padding: var(--sp-9) 0 var(--sp-8);
	max-width: 720px;
}
.hero__title {
	font-size: var(--fs-4xl);
	color: #fff;
	margin: 0 0 var(--sp-3);
	letter-spacing: -.03em;
}
.hero__lede {
	font-size: var(--fs-lg);
	color: rgba(255,255,255,.82);
	margin: 0 0 var(--sp-5);
	max-width: 56ch;
}
.hero .eyebrow { color: var(--gold); }

/* Single tour banner: shorter than the home hero, and carries the price + CTA. */
.hero--tour .hero__inner { padding: var(--sp-7) 0; max-width: 780px; }
.hero--tour .hero__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }

.hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-bottom: var(--sp-3);
}

.hero__terms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-5); }

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

/* Light-on-dark overrides for components reused inside a hero. */
.hero .crumbs, .hero .crumbs a { color: rgba(255, 255, 255, .72); }
.hero .crumbs a:hover { color: #fff; }
.hero .crumbs__sep { color: rgba(255, 255, 255, .45); }
.hero .crumbs [aria-current] { color: #fff; }

.hero .rating { color: rgba(255, 255, 255, .75); }
.hero .rating__value { color: #fff; }

.hero .chip {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
}
.hero .chip .icon { color: var(--gold); }

.tag--ondark {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
}
.tag--ondark:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.hero .price__now, .hero .price__request { color: #fff; }
.hero .price__unit { color: rgba(255, 255, 255, .7); }
.hero .price__was { color: rgba(255, 255, 255, .55); }

/* Featured image, shown above the tour content. */
.tourthumb {
	margin: 0 0 var(--sp-5);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--surface-3);
	box-shadow: var(--shadow-2);
}
.tourthumb img { width: 100%; height: auto; display: block; }
.tourthumb figcaption {
	padding: 10px 14px;
	background: var(--surface);
	border-top: 1px solid var(--line);
	font-size: var(--fs-sm);
	color: var(--ink-3);
}

.hero__stats {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	padding: 0 0 var(--sp-7);
	list-style: none;
	margin: 0;
}
/* The slider controls take over the bottom spacing when they are present. */
.hero__stats:has(+ .hero__nav) { padding-bottom: var(--sp-4); }
.hero__stats li { color: rgba(255,255,255,.7); font-size: var(--fs-sm); }
.hero__stats b {
	display: block;
	color: #fff;
	font-size: var(--fs-xl);
	font-weight: 800;
	letter-spacing: -.02em;
}

/* Quick search bar sitting across the hero seam */
.quickbar {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--sp-6) * -1);
}
/* Flex rather than a fixed column count, so the bar stays balanced whichever
   fields are present. */
.quickbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: end;
	padding: var(--sp-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-3);
}
.quickbar__field { flex: 1 1 200px; min-width: 0; }
.quickbar__inner > .btn { flex: 0 0 auto; }
/* The bar now holds a single search form, which should take the whole width. */
.quickbar__inner > .searchform { flex: 1 1 auto; min-width: 0; }
.quickbar__inner .searchform input[type="search"] { height: 48px; }
.quickbar__inner .searchform .btn { flex: 0 0 auto; padding-inline: var(--sp-5); }
.quickbar__field label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--ink-3);
	margin-bottom: 5px;
	letter-spacing: .02em;
}

/* Landing pages: hero copy beside an inline enquiry panel */
.hero--landing .hero__inner { padding-bottom: var(--sp-8); max-width: none; }

.landing__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: var(--sp-7);
	align-items: center;
	position: relative;
	z-index: 1;
}

.landing__usp {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	list-style: none;
	margin: var(--sp-5) 0 0;
	padding: 0;
}
.landing__usp li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
	backdrop-filter: blur(4px);
}
.landing__usp .icon { color: var(--gold); }

.landing__form { padding: var(--sp-6) 0; }

/* Blog / page side column */
.shell__side { position: sticky; top: calc(var(--header-h) + 16px); }

/* Trust strip */
.trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.trust li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
}
.trust .icon { color: var(--brand); margin-top: 2px; }
.trust b { display: block; font-size: var(--fs-base); }
.trust span { font-size: var(--fs-sm); color: var(--ink-3); }

/* Deals rail: a warm ground so the offers read as money, not just more catalogue. */
.section--offers {
	background: var(--ember-100);
	border-block: 1px solid #f6ddd0;
}

/* Campaign band */
.promo {
	position: relative;
	padding: var(--sp-7);
	border-radius: var(--r-lg);
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
	color: #fff;
	box-shadow: var(--shadow-3);
	overflow: hidden;
}

/* Photo sits behind the copy under a brand tint, the same treatment the hero
   gives its background image. */
.promo__bg { position: absolute; inset: 0; }
.promo__bg img { width: 100%; height: 100%; object-fit: cover; }
.promo__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(9, 71, 72, .95) 0%, rgba(9, 71, 72, .88) 42%, rgba(9, 71, 72, .55) 100%);
}

.promo__copy { position: relative; z-index: 1; max-width: 62ch; }

.promo .eyebrow { color: var(--gold); }

.promo__title {
	font-size: var(--fs-3xl);
	color: #fff;
	margin: 0 0 var(--sp-3);
	letter-spacing: -.02em;
}
.promo__text {
	font-size: var(--fs-lg);
	color: rgba(255, 255, 255, .82);
	margin: 0 0 var(--sp-5);
	max-width: 54ch;
}

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

/* Light-on-dark override, same treatment the hero gives reused components.
   The base ghost button is white on white ground, so the background has to be
   overridden too or the label disappears against it. */
.promo .btn--ghost {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}
.promo .btn--ghost:hover {
	background: rgba(255, 255, 255, .22);
	border-color: #fff;
	color: #fff;
}

.promo__note {
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, .65);
}

/* Offer strip: the quieter sibling of the campaign band, so a page carrying both
   does not read as the same block twice. Ember marks it as an action, per the
   colour hierarchy. */
.offerstrip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-5);
	padding: var(--sp-6);
	border-radius: var(--r);
	background: var(--ink);
	color: #fff;
	overflow: hidden;
	box-shadow: var(--shadow-2);
}

/* Ink warming to ember on the right: dark enough on the left to carry the copy,
   and a different register from the campaign band's teal. */
.offerstrip__bg { position: absolute; inset: 0; }
.offerstrip__bg img { width: 100%; height: 100%; object-fit: cover; }
.offerstrip__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(19, 25, 34, .94) 0%, rgba(19, 25, 34, .86) 45%, rgba(166, 63, 14, .52) 100%);
}

.offerstrip__copy {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.offerstrip__badge {
	display: inline-block;
	margin-bottom: var(--sp-2);
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: var(--gold);
	color: var(--gold-ink);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.offerstrip__title {
	margin: 0;
	font-size: var(--fs-xl);
	color: #fff;
}
.offerstrip__text {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, .85);
	font-size: var(--fs-base);
	max-width: 62ch;
}

.offerstrip__cta {
	position: relative;
	z-index: 1;
	flex: none;
}

/* Destination tiles */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--sp-3);
}

/* A step down from the page ground sets the band off without turning it into a
   dark block. The container keeps the site width so this heading lines up with
   every other section heading; only the mosaic below it is narrowed. */
.section--destinations { background: var(--surface-3); }

/* Package pages: a four-column mosaic of mixed tile sizes.
   Row 1   — one wide tile between two standard ones.
   Rows 2-3 — three double-height tiles with a stacked pair in the third column.
   Row 4   — four standard tiles.
   Tiles 2 to 8 are placed by hand; the first and the last four auto-flow into
   the cells that leaves, which is exactly the arrangement in the reference. */
.tiles--packages {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(4, minmax(0, 1fr));
	height: clamp(480px, 66vh, 720px);
}
.tiles--packages .tile { aspect-ratio: auto; }

.tiles--packages .tile:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
.tiles--packages .tile:nth-child(3) { grid-column: 4; grid-row: 1; }
.tiles--packages .tile:nth-child(4) { grid-column: 1; grid-row: 2 / span 2; }
.tiles--packages .tile:nth-child(5) { grid-column: 2; grid-row: 2 / span 2; }
.tiles--packages .tile:nth-child(6) { grid-column: 3; grid-row: 2; }
.tiles--packages .tile:nth-child(7) { grid-column: 3; grid-row: 3; }
.tiles--packages .tile:nth-child(8) { grid-column: 4; grid-row: 2 / span 2; }
.tiles--packages .tile__label {
	font-size: var(--fs-md);
	left: var(--sp-3);
	right: var(--sp-3);
	bottom: var(--sp-3);
}

/* Mosaic: three columns by three rows. The lead destination is placed in the
   middle column across the top two rows; the other seven auto-flow into the
   cells around it, in order, which lands them exactly as drawn. */
.tiles--feature {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* The top two rows carry the feature tile, so they take the larger share:
	   that lengthens the feature without moving a single cell. */
	grid-template-rows: 1.15fr 1.15fr 0.9fr;
	/* Sized against the viewport rather than the tiles' own ratio, so the whole
	   mosaic is on screen at once. The images crop to fit — object-fit does the
	   work — and the cell positions are untouched. */
	height: clamp(460px, 66vh, 680px);
}
/* The row track sets the height here, so the tiles must not impose their own. */
.tiles--feature .tile { aspect-ratio: auto; }
.tiles--feature .tile--feature {
	grid-column: 2;
	grid-row: 1 / span 2;
}
.tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--surface-3);
}
.tile img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s var(--ease);
}
.tile:hover img { transform: scale(1.05); }
.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(19,25,34,0) 34%, rgba(19,25,34,.55) 66%, rgba(19,25,34,.86) 100%);
}
.tile__label {
	position: absolute;
	left: var(--sp-4);
	right: var(--sp-4);
	bottom: var(--sp-4);
	z-index: 1;
	color: #fff;
	font-size: var(--fs-lg);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-shadow: 0 1px 12px rgba(19, 25, 34, .45);
}
.tile__meta {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}

/* The feature tile carries more image, so it can carry a bigger label. */
.tile--feature .tile__label {
	left: var(--sp-5);
	right: var(--sp-5);
	bottom: var(--sp-5);
	font-size: var(--fs-2xl);
}

/* 9 — Cards & rails -------------------------------------------------------- */

.card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	transition: box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.card:hover {
	box-shadow: var(--shadow-3);
	border-color: var(--brand);
	transform: translateY(-2px);
}

.card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--surface-3);
	overflow: hidden;
}
.card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .45s var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__media .ph { object-fit: contain; padding: 18%; opacity: .5; }

/* Gold, not ember: the badge is an endorsement, and must not compete with the
   price and CTA for the "act on this" colour. */
.card__badge {
	position: absolute;
	top: 10px; left: 10px;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: var(--gold);
	color: var(--gold-ink);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: .02em;
	box-shadow: var(--shadow-2);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: var(--sp-4);
	flex: 1;
}

.card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.card__eyebrow .icon { color: var(--ink-4); }

.card__title {
	margin: 0;
	font-size: var(--fs-md);
	line-height: 1.35;
	letter-spacing: -.01em;
}
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--brand); }

.card__excerpt {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--ink-3);
	line-height: 1.55;
}

.card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line);
}

.card__cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--brand);
	white-space: nowrap;
	transition: color .16s var(--ease);
}
.card:hover .card__cta, .card__cta:hover { color: var(--ember); }
.card:hover .card__cta .icon { transform: translateX(2px); }
.card__cta .icon { transition: transform .18s var(--ease); }

.card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.card--attraction .card__title { font-size: var(--fs-base); }
.card--compact { min-width: 0; }

/* Rail: horizontal scroller with snap */
.rail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
	flex-wrap: wrap;
}
.rail__tools { display: flex; align-items: center; gap: var(--sp-4); }
.rail__nav { display: flex; gap: 6px; }
.rail__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink-2);
	transition: border-color .16s var(--ease), color .16s var(--ease), opacity .16s var(--ease);
}
.rail__btn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.rail__btn:disabled { opacity: .35; cursor: default; }

.rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(262px, 1fr);
	gap: var(--sp-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--sp-2);
	margin-inline: calc(var(--sp-4) * -1);
	padding-inline: var(--sp-4);
}
.rail__track > * { scroll-snap-align: start; }

.link-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--fs-sm);
	font-weight: 700;
}

/* 10 — Filters & result bar ------------------------------------------------ */

.pagehead {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding: var(--sp-5) 0;
}
.pagehead__title { margin: var(--sp-2) 0 0; font-size: var(--fs-3xl); }
.pagehead__lede { margin: var(--sp-2) 0 0; color: var(--ink-3); max-width: 68ch; }

.crumbs { font-size: var(--fs-xs); color: var(--ink-3); }
.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.crumbs li { display: inline-flex; align-items: center; gap: 5px; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--brand); }
.crumbs__sep { color: var(--ink-4); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.filters {
	position: sticky;
	top: calc(var(--header-h) + 16px);
	padding: var(--sp-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	max-height: calc(100vh - var(--header-h) - 32px);
	overflow-y: auto;
}
.filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-3);
}
.filters__title {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: var(--fs-md);
}
.filters__close { display: none; border: 0; background: none; color: var(--ink-3); }

.filters__group { border-top: 1px solid var(--line); padding: var(--sp-3) 0; }
.filters__group:first-of-type { border-top: 0; padding-top: 0; }
.filters__group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink);
	padding: 4px 0;
}
.filters__group > summary::-webkit-details-marker { display: none; }
.filters__group > summary .icon { color: var(--ink-4); transition: transform .18s var(--ease); }
.filters__group[open] > summary .icon { transform: rotate(180deg); }

.filters__list { list-style: none; margin: 6px 0 0; padding: 0; }
.filters__range { padding-top: var(--sp-3); }
.filters__range-out { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.filters__range-out b { color: var(--ink); }

.filters__actions {
	display: grid;
	gap: 8px;
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}

.resultbar {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
	padding: 0 0 var(--sp-4);
}
.resultbar__count { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.resultbar__count b { color: var(--ink); font-size: var(--fs-md); }
.resultbar__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	font-size: var(--fs-sm);
	color: var(--ink-3);
}
.resultbar__sort select { width: auto; padding: 8px 32px 8px 11px; font-size: var(--fs-sm); }
.resultbar__filter-toggle { display: none; }

.empty {
	padding: var(--sp-8) var(--sp-5);
	text-align: center;
	background: var(--surface);
	border: 1px dashed var(--line-2);
	border-radius: var(--r);
}
.empty h2 { font-size: var(--fs-xl); }
.empty p { color: var(--ink-3); max-width: 46ch; margin-inline: auto; }

/* Pagination */
.pager { margin-top: var(--sp-6); }
.pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pager a, .pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px; height: 38px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager .current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager .dots { border-color: transparent; background: none; }

/* 11 — Single tour --------------------------------------------------------- */

.tourhead {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding: var(--sp-5) 0 0;
}
.tourhead__title { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-3xl); max-width: 22ch; }
.tourhead__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	flex-wrap: wrap;
	padding-bottom: var(--sp-4);
}
.tourhead__terms { display: flex; gap: 6px; flex-wrap: wrap; }

.gallery-hero {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 6px;
	border-radius: var(--r-lg);
	overflow: hidden;
	margin-bottom: calc(var(--sp-5) * -1);
	position: relative;
	z-index: 1;
}
.gallery-hero img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }
.gallery-hero__side { display: grid; gap: 6px; }
.gallery-hero__side img { aspect-ratio: 16/9; }

/* Facts strip */
.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	margin-bottom: var(--sp-5);
}
.facts__item { background: var(--surface); padding: var(--sp-4); }
.facts__label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.facts__label .icon { color: var(--brand); }
.facts__value { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }

/* Tabs */
/* Thank-you page ----------------------------------------------------------- */

.thanks__card {
	max-width: 680px;
	margin-inline: auto;
	padding: var(--sp-7);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-2);
	text-align: center;
}
.thanks__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px; height: 66px;
	margin-bottom: var(--sp-4);
	border-radius: 50%;
	background: var(--save-bg);
	color: var(--save-ink);
}
.thanks__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.thanks__lede {
	margin: 0 auto var(--sp-6);
	max-width: 46ch;
	font-size: var(--fs-lg);
	color: var(--ink-2);
}

/* Numbered, because the point is the order things happen in. */
.thanks__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-4);
	counter-reset: step;
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: 0;
	text-align: left;
}
.thanks__steps li {
	counter-increment: step;
	padding: var(--sp-4);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r);
}
.thanks__steps li::before {
	content: counter(step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 800;
}
.thanks__steps b { display: block; font-size: var(--fs-base); }
.thanks__steps span { font-size: var(--fs-sm); color: var(--ink-3); }

.thanks__hurry { margin: 0 0 var(--sp-3); font-weight: 700; }
.thanks__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
}
.thanks__content { margin-top: var(--sp-6); text-align: left; }
.thanks__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--sp-6);
	font-weight: 700;
	color: var(--brand);
}

.tabs { margin-bottom: var(--sp-5); }
.tabs__list {
	position: sticky;
	top: var(--header-h);
	/* Above the panel content it pins over, below the masthead it tucks under. */
	z-index: 40;
	display: flex;
	gap: 4px;
	overflow-x: auto;
	list-style: none;
	margin: 0 0 var(--sp-5);
	padding: 5px;
	background: var(--surface-3);
	border-radius: var(--r);
	box-shadow: 0 6px 14px -10px rgba(19, 25, 34, .5);
}
.tabs__btn {
	padding: 9px 16px;
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink-2);
	white-space: nowrap;
	transition: background .16s var(--ease), color .16s var(--ease);
}
.tabs__btn:hover { color: var(--ink); }
/* The selected tab is the one piece of state on the page, so it says so in
   brand colour rather than relying on a near-invisible shade change. */
.tabs__btn[aria-selected="true"] {
	background: var(--surface);
	color: var(--brand);
	box-shadow: var(--shadow-1), inset 0 0 0 1px var(--brand-100);
}
.tabs__panel[hidden] { display: none; }

.block {
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	margin-bottom: var(--sp-4);
}
.block__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-xl);
}

/* Accordion (itinerary days, FAQs) */
.acc { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.acc + .acc { margin-top: 8px; }
.acc > summary {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4);
	cursor: pointer;
	list-style: none;
	background: var(--surface);
	font-weight: 700;
	font-size: var(--fs-base);
	transition: background .16s var(--ease);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: var(--surface-2); }
.acc[open] > summary { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.acc__no {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px; height: 30px;
	padding: 0 8px;
	border-radius: var(--r-sm);
	background: var(--brand-100);
	color: var(--brand);
	font-size: var(--fs-xs);
	font-weight: 800;
}
.acc__label { flex: 1; }
.acc__icon { flex: none; color: var(--ink-4); transition: transform .2s var(--ease); }
.acc[open] > summary .acc__icon { transform: rotate(180deg); }
.acc__body { padding: var(--sp-4); }
.acc__body > *:first-child { margin-top: 0; }
.acc__body > *:last-child { margin-bottom: 0; }

/* FAQ list ------------------------------------------------------------------
   Built from the Bootstrap collapse markup in the faq/faqs fields; see
   inc/legacy-content.php. Long answers must wrap rather than push the panel. */
.faqs { display: grid; gap: 8px; }
.faqs .acc { margin: 0; }
.faqs .acc > summary {
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-4);
	line-height: 1.45;
}
.faqs .acc__label {
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: var(--fs-base);
}
.faqs .acc__no { margin-top: -1px; }
.faqs .acc__icon { margin-top: 4px; }
.faqs .acc__body {
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--ink-2);
	font-size: var(--fs-base);
}
/* Legacy wrappers inside answers must not reintroduce a grid. */
.faqs .acc__body .row { display: block; margin: 0; }
.faqs .acc__body [class*="col-md-"] { width: 100%; padding: 0; }

/* Inclusion / exclusion lists parsed out of the `include` field.
   The source markup uses <ol>, but these are checklists, not sequences. */
.incl-list ol,
.incl-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}
.incl-list li {
	position: relative;
	margin: 0;
	padding: 8px 0 8px 32px;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
}
.incl-list li:last-child { border-bottom: 0; }
.incl-list ul li::before { display: none; }
.incl-list li::before {
	content: "";
	position: absolute;
	left: 0; top: 10px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}
.incl-list--yes li::before {
	background-color: #e4f2ea;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316794c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.incl-list--no li::before {
	background-color: var(--surface-3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a0ad' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

/* Inclusions / exclusions */
.incl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.incl__col h3 { font-size: var(--fs-md); display: flex; align-items: center; gap: 7px; }
.incl__col ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.incl__col li { display: flex; gap: 9px; padding: 6px 0; color: var(--ink-2); }
.incl__col li .icon { flex: none; margin-top: 3px; }
.incl--yes h3 .icon, .incl--yes li .icon { color: var(--ok); }
.incl--no h3 .icon, .incl--no li .icon { color: var(--ink-4); }

/* Sticky enquiry rail.
   The wrapper must stretch to the full grid row, otherwise it collapses to the
   panel's own height and the sticky element has no distance to travel — the
   form would unstick partway down a long page. */
.shell__aside {
	align-self: stretch;
	min-width: 0;
}
.rail-enquiry {
	position: sticky;
	top: calc(var(--header-h) + 16px);
	/* Long forms scroll internally rather than overflowing past the viewport. */
	max-height: calc(100vh - var(--header-h) - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.panel--enquiry { padding: var(--sp-5); }
.panel__price {
	padding-bottom: var(--sp-4);
	margin-bottom: var(--sp-4);
	border-bottom: 1px solid var(--line);
}
.panel__price-label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 2px;
}
.panel__head { margin-bottom: var(--sp-4); }
.panel__title { margin: 0 0 4px; font-size: var(--fs-lg); }
.panel__sub { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.panel__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--sp-3); }
.panel__trust {
	list-style: none;
	margin: var(--sp-4) 0 0;
	padding: var(--sp-4) 0 0;
	border-top: 1px solid var(--line);
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
.panel__trust li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.panel__trust .icon { color: var(--brand); margin-top: 1px; }
.form-fallback {
	padding: var(--sp-3);
	background: var(--surface-2);
	border: 1px dashed var(--line-2);
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	color: var(--ink-3);
	margin-bottom: var(--sp-3);
}

/* Contact Form 7 -----------------------------------------------------------
   The Get Quote form lays its fields out with Bootstrap-style col-md-* wrappers.
   Bootstrap is gone, so .cf7 provides that grid itself. */

.cf7 .wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -6px;
}

.cf7 [class*="col-md-"],
.cf7 [class*="col-sm-"] {
	width: 100%;
	padding: 0 6px;
	min-width: 0;
}

.cf7 .col-md-12 { width: 100%; }

@media (min-width: 480px) {
	.cf7 .col-md-6 { width: 50%; }
	.cf7 .col-md-4 { width: 33.333%; }
	.cf7 .col-md-3 { width: 25%; }
}

.cf7 .wpcf7-form p { margin: 0 0 10px; }
.cf7 label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--ink-2);
	margin-bottom: 4px;
	letter-spacing: .01em;
}
.cf7 label:empty { display: none; }

.cf7 .wpcf7-form-control-wrap { display: block; }

.cf7 input[type="text"],
.cf7 input[type="email"],
.cf7 input[type="tel"],
.cf7 input[type="date"],
.cf7 input[type="number"],
.cf7 textarea,
.cf7 select {
	padding: 10px 12px;
	font-size: var(--fs-sm);
}
/* CF7 renders [textarea] with rows="10", which is far too tall for a compact
   enquiry form. Cap it here; the drag handle still lets people expand it. */
.cf7 textarea {
	height: 92px;
	min-height: 92px;
	resize: vertical;
}

/* Quiz (maths captcha) sits on one line. */
.cf7 .wpcf7-quiz-label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--ink-2);
	margin-bottom: 4px;
}

/* The notice paragraph carries Tailwind-style class names from the form
   template; style them directly so the box renders without Tailwind. */
.cf7 .bg-yellow-100 {
	margin: 2px 0 10px;
	padding: 10px 12px;
	background: #fdf6e3;
	border-left: 3px solid var(--gold);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	color: #7a5a12;
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.cf7 .text-center { text-align: center; }
.cf7 .text-center p { margin-bottom: 0; }

.cf7 input[type="submit"] {
	width: 100%;
	padding: 13px 18px;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--ember);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 800;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .16s var(--ease);
}
.cf7 input[type="submit"]:hover { background: var(--ember-600); }

.cf7 .wpcf7-spinner { margin: 8px auto 0; display: block; }

.wpcf7-not-valid-tip { font-size: var(--fs-xs); color: #b32d2e; margin-top: 3px; }
.wpcf7 form .wpcf7-response-output {
	margin: 10px 6px 0;
	padding: 9px 12px;
	border-radius: var(--r-sm);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

/* Modal ------------------------------------------------------------------- */

.modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-4);
}
.modal[hidden] { display: none; }

.modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(19, 25, 34, .6);
	backdrop-filter: blur(2px);
	animation: ak-fade .18s var(--ease);
}

.modal__dialog {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: var(--sp-6);
	background: var(--surface);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-3);
	animation: ak-rise .2s var(--ease);
}

/* Two panels: the case for sending the form, then the form. The dialog itself
   does not scroll — only the form column does, so the reasons stay in view. */
.modal__dialog--split {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	width: min(920px, 100%);
	padding: 0;
	overflow: hidden;
}

.modal__aside {
	display: flex;
	flex-direction: column;
	padding: var(--sp-6);
	background: var(--ink);
	color: rgba(255, 255, 255, .78);
}

.modal__main {
	padding: var(--sp-6);
	overflow-y: auto;
	overscroll-behavior: contain;
	max-height: calc(100vh - 32px);
}

.modal__close {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink-3);
}
.modal__close:hover { color: var(--ink); border-color: var(--ink-4); }

.modal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	margin-bottom: var(--sp-4);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--gold);
}
.modal__title { margin: 0 0 8px; font-size: var(--fs-xl); color: #fff; }
.modal__sub { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); }

.modal__points {
	list-style: none;
	margin: var(--sp-5) 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: var(--fs-sm);
}
.modal__points li { display: flex; align-items: flex-start; gap: 9px; }
.modal__points .icon { color: var(--gold); margin-top: 2px; flex: none; }

.modal__contact {
	margin-top: auto;
	padding-top: var(--sp-5);
}
.modal__contact-label {
	margin: 0 0 8px;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}
.modal__contact-links { display: grid; gap: 6px; }
.modal__contact-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 700;
}
.modal__contact-links a:hover { color: var(--gold); }
.modal__contact-links .icon { color: var(--gold); }

@keyframes ak-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ak-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Full-width enquiry band (used where there is no sidebar rail) */
.enquiry-band {
	background: var(--ink);
	color: rgba(255, 255, 255, .78);
	padding: var(--sp-8) 0;
}
.enquiry-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: var(--sp-7);
	align-items: center;
}
.enquiry-band .eyebrow { color: var(--gold); }
.enquiry-band__title {
	color: #fff;
	font-size: var(--fs-2xl);
	margin: 0 0 var(--sp-3);
	max-width: 20ch;
}
.enquiry-band__lede { margin: 0 0 var(--sp-4); max-width: 52ch; }
.enquiry-band__points {
	list-style: none;
	margin: 0 0 var(--sp-5);
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: var(--fs-sm);
}
.enquiry-band__points li { display: flex; align-items: flex-start; gap: 9px; }
.enquiry-band__points .icon { color: var(--gold); margin-top: 2px; flex: none; }
.enquiry-band__contact { display: flex; flex-wrap: wrap; gap: 8px; }
.enquiry-band__contact .btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}
.enquiry-band__contact .btn--ghost:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}
.enquiry-band__form { padding: var(--sp-5); }

/* Form-less variant: the campaign band's treatment — a photo under a brand
   tint, copy held to the left — carrying a closing call to action instead of a
   form. */
.enquiry-band--cta {
	position: relative;
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
	padding: var(--sp-8) 0;
	overflow: hidden;
}
.enquiry-band__bg { position: absolute; inset: 0; }
.enquiry-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.enquiry-band__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(9, 71, 72, .95) 0%, rgba(9, 71, 72, .90) 48%, rgba(9, 71, 72, .5) 100%);
}

.enquiry-band--cta .enquiry-band__inner {
	position: relative;
	z-index: 1;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
.enquiry-band--cta .enquiry-band__copy { max-width: 62ch; }
.enquiry-band--cta .enquiry-band__title {
	font-size: var(--fs-3xl);
	max-width: 20ch;
}
.enquiry-band--cta .enquiry-band__lede { max-width: 56ch; }

/* Chips, so the three points read as one group rather than loose text. */
.enquiry-band--cta .enquiry-band__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-5);
}
.enquiry-band--cta .enquiry-band__points li {
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-weight: 600;
}
.enquiry-band--cta .enquiry-band__points .icon { margin-top: 0; }

/* 12 — Blog, archives, comments -------------------------------------------- */

.entry {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--sp-6);
}
.entry__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--ink-3);
	padding-bottom: var(--sp-4);
	margin-bottom: var(--sp-5);
	border-bottom: 1px solid var(--line);
}
.entry__media { margin: 0 0 var(--sp-5); border-radius: var(--r); overflow: hidden; }
.entry__foot {
	margin-top: var(--sp-6);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
}

.widget {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--sp-4);
	margin-bottom: var(--sp-4);
}
.widget__title { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.widget ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.widget li { padding: 6px 0; border-top: 1px solid var(--line); }
.widget li:first-child { border-top: 0; }
.widget a { color: var(--ink-2); }
.widget a:hover { color: var(--brand); }

/* Sidebar widgets get a solid header bar. Negative margins pull it out to the
   card edges without having to strip the padding every other widget relies on. */
.shell__side .widget > .wp-block-group > h2,
.shell__side .widget > .wp-block-group > h3 {
	margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4);
	padding: 13px var(--sp-4);
	background: var(--brand);
	border-radius: var(--r) var(--r) 0 0;
	color: #fff;
	font-size: var(--fs-lg);
	font-weight: 800;
	letter-spacing: -.01em;
}

/* Recent posts: thumbnail floated so the excerpt wraps back under it. */
.shell__side .wp-block-latest-posts__list { font-size: inherit; }
.shell__side .wp-block-latest-posts__list li {
	padding: var(--sp-4) 0;
	border-top: 1px solid var(--line);
}
.shell__side .wp-block-latest-posts__list li:first-child { padding-top: 0; border-top: 0; }
.shell__side .wp-block-latest-posts__list li:last-child { padding-bottom: 0; }
.shell__side .wp-block-latest-posts__list li::after { content: ""; display: table; clear: both; }

.shell__side .wp-block-latest-posts__featured-image {
	float: left;
	margin: 3px var(--sp-3) 6px 0;
}
.shell__side .wp-block-latest-posts__featured-image img {
	width: 92px;
	height: 70px;
	object-fit: cover;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}

.shell__side .wp-block-latest-posts__post-title {
	display: block;
	margin-bottom: 5px;
	color: var(--brand);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.35;
}
.shell__side .wp-block-latest-posts__post-title:hover { color: var(--ember); }

.shell__side .wp-block-latest-posts__post-excerpt {
	margin: 0;
	color: var(--ink-2);
	font-size: var(--fs-sm);
	line-height: 1.55;
}
.shell__side .readmore {
	color: var(--ember);
	font-weight: 700;
	white-space: nowrap;
}
.shell__side .readmore:hover { color: var(--ember-600); text-decoration: underline; }

.shell__side .wp-block-latest-posts__post-author {
	clear: both;
	margin-top: 7px;
	color: var(--ink-3);
	font-size: var(--fs-xs);
	text-transform: capitalize;
}

.comments { margin-top: var(--sp-6); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li { margin-bottom: var(--sp-4); }
.comment-body {
	padding: var(--sp-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	font-size: var(--fs-sm);
}
.comment-list .children { list-style: none; margin: var(--sp-3) 0 0 var(--sp-5); padding: 0; }
.comment-meta { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 8px; }
.comment-reply-link { font-weight: 700; font-size: var(--fs-xs); }
.comment-form { display: grid; gap: var(--sp-3); }

/* 13 — Footer, mobile bar, utilities --------------------------------------- */

.sitefoot {
	background: var(--ink);
	color: #aeb6c2;
	font-size: var(--fs-sm);
	margin-top: var(--sp-8);
}

/* A page closing on a full-bleed band already has its separation: the footer's
   own top margin then reads as an empty strip between two coloured blocks. */
.site__main:has(> .enquiry-band:last-child) + .sitefoot {
	margin-top: 0;
}
.sitefoot a { color: #cfd5de; }
.sitefoot a:hover { color: #fff; }

/* Four columns: two offices, legal links, sitemap. */
.sitefoot__grid {
	display: grid;
	grid-template-columns: 1.3fr 1.3fr 1fr 1.2fr;
	gap: var(--sp-6);
	padding: var(--sp-8) 0 var(--sp-6);
}

.sitefoot__heading {
	position: relative;
	margin: 0 0 var(--sp-4);
	padding-bottom: 10px;
	font-size: var(--fs-md);
	color: #fff;
	letter-spacing: -.01em;
}
.sitefoot__heading::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 34px; height: 2px;
	background: var(--gold);
	border-radius: 2px;
}

.sitefoot__name { font-size: var(--fs-lg); font-weight: 800; color: #fff; margin: 0 0 4px; }
.sitefoot__tag { margin: 0 0 var(--sp-4); color: #8d96a4; }

.sitefoot__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sitefoot__contact li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.sitefoot__contact .icon { color: var(--gold); margin-top: 3px; flex: none; }
.sitefoot__contact a { word-break: break-word; }

.sitefoot__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--sp-6);
	padding-bottom: var(--sp-5);
}

.sitefoot__credit { margin: 0; }
.sitefoot__credit a { font-weight: 700; }
.sitefoot__col .widget {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}
.sitefoot__col .widget__title { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .07em; }
.sitefoot__col .widget li { border-color: rgba(255,255,255,.08); }
.sitefoot__col .widget a { color: #aeb6c2; }
.sitefoot__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.sitefoot__note {
	padding: var(--sp-4) 0;
	border-top: 1px solid rgba(255,255,255,.09);
	font-size: var(--fs-xs);
	color: #8d96a4;
	line-height: 1.6;
}

.sitefoot__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
	padding: var(--sp-4) 0 var(--sp-6);
	border-top: 1px solid rgba(255,255,255,.09);
	font-size: var(--fs-xs);
	color: #8d96a4;
}
.sitefoot__copy { margin: 0; }
.sitefoot__legal { display: flex; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }

/* Floating call / enquiry / WhatsApp bar. Centred above the fold on phones and
   tablets; pinned bottom-right on desktop, where there is room to spell the
   number out beside the icon. */
.floatbar {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 70;
	display: none;
	align-items: center;
	gap: var(--sp-3);
	max-width: calc(100% - 24px);
}

.floatbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	flex: none;
	border-radius: var(--r-lg);
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-3);
	transition: transform .16s var(--ease), color .16s var(--ease);
}
.floatbar__icon:hover { transform: translateY(-2px); color: var(--brand); }
.floatbar__icon--wa { background: #25d366; color: #fff; }
.floatbar__icon--wa:hover { color: #fff; }

.floatbar__cta {
	padding: 16px 40px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--ember);
	color: #fff;
	font-size: var(--fs-md);
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: var(--shadow-3);
	transition: background .16s var(--ease), transform .16s var(--ease);
}
.floatbar__cta:hover { background: var(--ember-600); transform: translateY(-2px); }

/* Clipped rather than removed, so it stays the phone link's accessible name
   while only the icon is visible. */
.floatbar__num {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 861px) {
	.floatbar {
		display: flex;
		left: auto;
		right: 18px;
		bottom: 18px;
		transform: none;
		gap: var(--sp-2);
	}

	/* Smaller than the touch-sized mobile bar: a pointer does not need 52px, and
	   a lighter bar sits over the page without shouting. */
	.floatbar__icon { width: 42px; height: 42px; }
	.floatbar__icon .icon { width: 17px; height: 17px; }

	/* Phone becomes a labelled pill: white ground, ember glyph, number spelled
	   out — the shape the CTA beside it already uses. */
	.floatbar__icon--tel {
		width: auto;
		padding: 0 16px;
		gap: 8px;
		border: 1px solid var(--ember-100);
		border-radius: var(--r-pill);
		font-size: var(--fs-sm);
		font-weight: 700;
		color: var(--ink);
	}
	.floatbar__icon--tel .icon { color: var(--ember); }
	.floatbar__icon--tel:hover { border-color: var(--ember); color: var(--ink); }

	.floatbar__num {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.floatbar__icon--wa { border-radius: var(--r-pill); }

	.floatbar__cta {
		padding: 12px 22px;
		font-size: var(--fs-sm);
	}

	/* Lift the back-to-top button clear of the bar it now shares a corner with. */
	.totop { bottom: 74px; }
}

.totop {
	position: fixed;
	right: 18px; bottom: 18px;
	z-index: 65;
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink-2);
	box-shadow: var(--shadow-2);
}
.totop .icon { transform: rotate(-90deg); }
.totop:hover { color: var(--ink); }

.nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(19,25,34,.45);
	opacity: 0;
	transition: opacity .2s var(--ease);
}
.nav-scrim.is-on { opacity: 1; }

body.is-locked { overflow: hidden; }

/* WordPress admin bar ------------------------------------------------------
   For logged-in users the bar is fixed 32px tall over the top of the viewport.
   Nothing here was offsetting for it, so every sticky element — the header, the
   tour tabs, the enquiry rail — pinned 32px too high and slid underneath it.
   Below 783px WordPress switches the bar to position:absolute and it scrolls
   away with the page, so no offset applies there. */
@media screen and (min-width: 783px) {
	body.admin-bar .masthead { top: 32px; }
	body.admin-bar .tabs__list { top: calc(var(--header-h) + 32px); }
	body.admin-bar .shell__side,
	body.admin-bar .rail-enquiry,
	body.admin-bar .filters,
	body.admin-bar .contact__details { top: calc(var(--header-h) + 48px); }
}

/* 14 — Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
	.shell { grid-template-columns: minmax(0, 1fr); }
	/* Single column: nothing to stick to, so let the panel flow normally. */
	.rail-enquiry, .shell__side {
		position: static;
		max-height: none;
		overflow: visible;
	}
	.landing__split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
	.hero--landing .hero__inner { padding-bottom: 0; }
	.shell--filters { grid-template-columns: minmax(0, 1fr); }

	.filters {
		position: fixed;
		top: 0; bottom: 0; left: 0;
		z-index: 80;
		width: min(340px, 88vw);
		max-height: none;
		border-radius: 0;
		border-width: 0 1px 0 0;
		transform: translateX(-102%);
		transition: transform .24s var(--ease);
	}
	.filters.is-open { transform: none; }
	.filters__close { display: inline-flex; }
	.resultbar__filter-toggle { display: inline-flex; }

	.quickbar__inner > .btn { flex: 1 1 100%; }
}

@media (max-width: 1180px) {
	/* Tighten the menu before it runs out of room beside the header actions. */
	.masthead__inner { gap: var(--sp-3); }
	.nav__list > li > a { padding: 9px 9px; font-size: var(--fs-xs); }
	.masthead__cta { padding: 8px 12px; }
}

@media (max-width: 1024px) {
	.sitefoot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
	.enquiry-band__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
	.enquiry-band__title { max-width: none; }

	/* Narrow screens: the copy runs the full width, so the tint has to cover the
	   whole photo rather than fading out to the right. */
	.promo { padding: var(--sp-6); }
	.promo__copy { max-width: none; }
	.promo__bg::after {
		background: linear-gradient(180deg, rgba(9, 71, 72, .90) 0%, rgba(9, 71, 72, .95) 100%);
	}

	/* The three-column mosaic holds down to the phone breakpoint; only the
	   feature's label needs easing back. */
	.tile--feature .tile__label { font-size: var(--fs-xl); }

	/* The strip stacks, and the button goes full width so it stays an easy tap.
	   Stacked copy runs the full width, so the tint covers the whole photo. */
	.offerstrip { padding: var(--sp-5); }
	.offerstrip__cta { width: 100%; }
	.offerstrip__bg::after {
		background: linear-gradient(180deg, rgba(19, 25, 34, .88) 0%, rgba(19, 25, 34, .94) 100%);
	}
}

/* Below this the split modal stacks: the aside becomes a compact header and the
   whole dialog scrolls as one, so the form is never squeezed into a sliver. */
@media (max-width: 820px) {
	.modal__dialog--split {
		grid-template-columns: minmax(0, 1fr);
		width: min(560px, 100%);
		overflow-y: auto;
		max-height: calc(100vh - 32px);
	}
	.modal__main { overflow: visible; max-height: none; }
	.modal__aside { padding-bottom: var(--sp-5); }
	.modal__icon { width: 38px; height: 38px; margin-bottom: var(--sp-3); }
	.modal__points,
	.modal__contact { display: none; }
}

@media (max-width: 860px) {
	:root { --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; }

	/* Phones and tablets: an even two-up grid. The feature drops its placement
	   and becomes an ordinary cell, and heights go back to the tiles' own ratio
	   — a fixed viewport height would squash eight stacked rows. */
	.tiles--feature {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		height: auto;
	}
	.tiles--feature .tile,
	.tiles--feature .tile--feature { aspect-ratio: 4 / 3; }
	.tiles--feature .tile--feature {
		grid-column: auto;
		grid-row: auto;
	}
	.tile--feature .tile__label { font-size: var(--fs-lg); }

	/* Packages follow the same two-up treatment: the mosaic's hand-placed spans
	   have to be released or they would punch holes through a two-column grid. */
	.tiles--packages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		height: auto;
	}
	/* :nth-child(n) matches every tile at the same specificity as the hand-placed
	   :nth-child(2)…(8) rules above, so this actually releases them. A plain
	   `.tiles--packages .tile` loses to them and leaves holes in the grid. */
	.tiles--packages .tile:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}

	.topbar__note { display: none; }
	.iconbtn--menu { display: inline-flex; }
	.masthead__cta span { display: none; }
	.masthead__cta { padding: 9px 11px; }
	.nav__hint { display: none; }

	.nav {
		display: block;
		position: fixed;
		top: 0; right: 0; bottom: 0;
		z-index: 60;
		width: min(320px, 86vw);
		padding: var(--sp-6) var(--sp-4);
		background: var(--surface);
		border-left: 1px solid var(--line);
		overflow-y: auto;
		transform: translateX(102%);
		transition: transform .24s var(--ease);
	}
	.nav.is-open { transform: none; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.nav__list > li > a { padding: 11px 12px; font-size: var(--fs-md); }
	.nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--line);
		border-radius: 0;
		margin: 2px 0 6px 12px;
		padding: 0 0 0 6px;
	}
	.nav__list .menu-item-has-children > a::after { float: right; margin-top: 8px; }

	.gallery-hero { grid-template-columns: 1fr; }
	.gallery-hero__side { grid-auto-flow: column; }

	/* Stack the floated figure above the copy on narrow screens. */
	.entry__float {
		float: none;
		width: 100%;
		max-width: none;
		margin: 0 0 var(--sp-4);
	}

	/* The masthead stays sticky at top:0 on phones too, so the tabs have to pin
	   below it — at top:0 they stuck behind the header and read as not sticking
	   at all. */
	.tabs__list { top: var(--header-h); }
	.hero__inner { padding: var(--sp-7) 0 var(--sp-6); }

	/* Floating enquiry bar appears here and below, with clearance for it. */
	.floatbar { display: flex; }
	body { padding-bottom: 88px; }
	.totop { bottom: 84px; }
}

/* Below this width the floating bar spans the screen edge to edge. */
@media (max-width: 720px) {
	/* The chips wrap on their own; the buttons need telling to fill the width. */
	.enquiry-band--cta .enquiry-band__contact { width: 100%; }
	.enquiry-band--cta .enquiry-band__contact .btn { flex: 1 1 100%; }
}

@media (max-width: 620px) {
	.floatbar {
		left: 0; right: 0; bottom: 0;
		transform: none;
		max-width: none;
		gap: 1px;
		background: var(--line);
		border-top: 1px solid var(--line);
		box-shadow: 0 -2px 12px rgba(19, 25, 34, .1);
	}
	.floatbar__icon {
		width: auto;
		height: 54px;
		flex: 0 0 68px;
		border-radius: 0;
		box-shadow: none;
	}
	.floatbar__icon:hover, .floatbar__cta:hover { transform: none; }
	.floatbar__cta {
		flex: 1;
		height: 54px;
		padding: 0 12px;
		border-radius: 0;
		box-shadow: none;
		font-size: var(--fs-sm);
	}
	.totop { bottom: 68px; }
	body { padding-bottom: 54px; }

	.sitefoot__grid { grid-template-columns: 1fr; }
	.modal__dialog { padding: var(--sp-5) var(--sp-4); }
	.modal__dialog--split { padding: 0; }
	.modal__aside, .modal__main { padding: var(--sp-4); }
}

@media (max-width: 560px) {
	.container { padding-inline: var(--sp-3); }
	.section { padding: var(--sp-6) 0; }
	.entry { padding: var(--sp-4); }
	.block { padding: var(--sp-4); }
	.panel--enquiry { padding: var(--sp-4); }
	.hero__stats { gap: var(--sp-4); }
	.rail__track { grid-auto-columns: minmax(232px, 1fr); }
	.grid--3, .grid--4 { grid-template-columns: 1fr; }
	.quickbar__field { flex: 1 1 100%; }
	.resultbar__sort { margin-left: 0; width: 100%; }
	.resultbar__sort select { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	.card:hover { transform: none; }
	.btn:hover { transform: none; }
}

@media print {
	.topbar, .masthead, .sitefoot, .floatbar, .modal, .totop, .rail-enquiry, .filters { display: none !important; }
	body { background: #fff; }
	.entry, .block, .card { border: 0; box-shadow: none; }
}