/*
 * Camps library – the Camps Landing and Camp Page templates (inc/camps.php).
 * Figma "Verbier Camps Template": Camp Template 10:189, Summer Camp Template 10016:171.
 * Every rule sits under .campPage, so nothing here reaches the rest of the site.
 * Desktop first, like style.css: the 1560 frame is the base, then 1199 / 991 / 767.
 */

/* ── Page ──────────────────────────────────────────────────────────────────── */
.campPage {
	--camp-accent: var(--blue);
	--camp-accent-dark: var(--blue);
	--camp-tab: var(--mehroon);
	--camp-gap: clamp(80px, 12.8vw, 200px);
	--camp-title-size: clamp(44px, 6.15vw, 96px);
	color: var(--blue);
	padding-bottom: calc(var(--camp-gap) - 33px); /* the footer adds its own 33px */
}
.campPage.camp-colour-red {
	--camp-accent: var(--red);
	--camp-accent-dark: var(--mehroon);
}

.campPage .container {
	max-width: 1320px; /* 1296 inside – the frame's content width; inner pages get it from .body-container */
}
.campPage .campContent > .dynamicContent {
	margin: 0;
}
.campPage .campContent > .dynamicContent:first-child {
	margin-top: clamp(60px, 9.6vw, 150px);
}
.campPage .campContent > .dynamicContent + .dynamicContent {
	margin-top: var(--camp-gap);
}
.campPage .campContent > .dynamic-faq + .dynamic-buttons {
	margin-top: clamp(48px, 6.2vw, 96px);
}

/* Section titles – one line, or split with the second line set in. */
.campPage .campTitle {
	color: var(--camp-accent);
	font-size: var(--camp-title-size);
	line-height: 1.146;
	text-align: center;
	margin: 0 0 44px;
}
.campPage .campTitle--split {
	display: table;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	line-height: 1.01;
}
.campPage .campTitle-line {
	display: block;
	white-space: nowrap;
}
.campPage .campTitle-line--second {
	padding-left: 2.85em;
}
.campPage .campTitle--h2 {
	font-size: clamp(40px, 4.1vw, 64px);
	line-height: 1;
	text-align: left;
	margin-bottom: 69px;
}

/* Buttons: the theme's navy outline, plus the drawn solid and white variants. */
.campPage .button {
	text-decoration: none;
}
.campPage .button--solid {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}
.campPage .button--solid:hover {
	background: transparent;
	border-color: var(--blue);
	color: var(--blue);
}
.campPage .button--white {
	background: transparent;
	border-color: var(--white);
	color: var(--white);
}
.campPage .button--white:hover {
	background: var(--white);
	border-color: var(--white);
	color: var(--blue);
}

/* ── Banner (template part) ─────────────────────────────────────────────────── */
.campPage .campBanner {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: clamp(560px, 57.7vw, 900px);
	overflow: hidden;
	background: var(--blue);
	color: var(--white);
}
.campPage .campBanner-media,
.campPage .campBanner-media::after {
	position: absolute;
	inset: 0;
}
.campPage .campBanner-media::after {
	content: '';
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 24%),
		rgba(0, 0, 0, 0.28);
}
.campPage .campBanner-image,
.campPage .campBanner-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.campPage .campBanner-content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding-bottom: clamp(48px, 4.25vw, 66px);
}
.campPage .campBanner-title {
	color: var(--white);
	font-size: var(--camp-title-size);
	line-height: 1.146;
	margin: 0 0 19px;
}
.campPage .campBanner-subtitle {
	font-size: 24px;
	line-height: 27px;
	margin: 0 0 39px;
}
.campPage .campBanner-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

/* ── Welcome (welcome) ──────────────────────────────────────────────────────── */
.campPage .campWelcome {
	display: grid;
	grid-template-columns: minmax(0, 525px) minmax(0, 486px);
	justify-content: space-between;
	align-items: center;
	gap: 48px;
	padding: clamp(32px, 6.4vw, 100px);
	background: var(--gray);
}
.campPage .campWelcome--noimage {
	grid-template-columns: minmax(0, 760px);
}
.campPage .campWelcome-title {
	font-family: "lullabies-heavy", sans-serif;
	font-weight: 600;
	font-size: clamp(72px, 8.2vw, 128px);
	line-height: 0.75;
	color: var(--camp-accent);
	margin: 0 0 35px;
}
.campPage .campWelcome-subtitle {
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	margin: 0 0 43px;
}
.campPage .campWelcome-body {
	font-size: 24px;
	line-height: 27px;
	margin-bottom: 48px;
}
.campPage .campWelcome-body p:last-child {
	margin-bottom: 0;
}
.campPage .campWelcome-media {
	position: relative;
	aspect-ratio: 486 / 648;
}
.campPage .campWelcome-media img,
.campPage .campWelcome-play {
	display: block;
	width: 100%;
	height: 100%;
}
.campPage .campWelcome-media img {
	object-fit: cover;
}
.campPage .campPlay {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100px;
	height: 100px;
	margin: -50px 0 0 -50px;
	border-radius: 50%;
	background: var(--blue);
	transition: transform 300ms, background-color 300ms;
}
.campPage .campPlay::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -16px 0 0 -10px;
	border-style: solid;
	border-width: 16px 0 16px 27px;
	border-color: transparent transparent transparent var(--white);
}
.campPage .campWelcome-play:hover .campPlay {
	transform: scale(1.08);
	background: var(--cyan);
}

/* ── Camp cards (camp_cards) – the home POI bracket behind a portrait ──────── */
.campPage .campCards {
	display: flex;
	justify-content: center;
	gap: 50px;
}
.campPage .campCard {
	position: relative;
	display: block;
	flex: 0 1 563px;
	padding: 0 0 23px;
	color: var(--white);
	text-decoration: none;
}
.campPage .campCard-frame {
	position: absolute;
	left: 0;
	top: 3.7%;
	bottom: 0;
	width: 41.9%;
	-webkit-mask-image: url("../images/image-bg.png");
	mask-image: url("../images/image-bg.png");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	background: var(--yellow);
}
.campPage .campCard.bg-cyan .campCard-frame { background: var(--cyan); }
.campPage .campCard.bg-blue .campCard-frame { background: var(--blue); }
.campPage .campCard.bg-red .campCard-frame { background: var(--red); }
.campPage .campCard.bg-maroon .campCard-frame { background: var(--mehroon); }
/* The photo is 486 of the card's 563 (Figma 14002:650), set on the photo itself: a
   percentage padding on the card resolves against the flex row, not the card, so the
   photo came out 385px wide with the text box (sized from the card) spilling past it. */
.campPage .campCard-media {
	position: relative;
	display: block;
	width: 86.3%;
	margin-left: auto;
	aspect-ratio: 486 / 648;
	overflow: hidden;
	background: var(--blue);
}
.campPage .campCard-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}
.campPage .campCard-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%);
}
.campPage .campCard-text {
	position: absolute;
	left: 13.7%;
	right: 0;
	bottom: 15.5%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 0 40px;
	text-align: center;
}
.campPage .campCard-title {
	font-family: "the-seasons", sans-serif;
	font-weight: 700;
	font-size: clamp(40px, 4.1vw, 64px);
	line-height: 1;
	max-width: 4.8em;
}
.campPage .campCard-body {
	font-size: 24px;
	line-height: 27px;
	max-width: 382px;
}
.campPage .campCard-link {
	font-weight: 700;
	font-size: 24px;
	line-height: 27px;
}
.campPage a.campCard:hover .campCard-media img {
	transform: scale(1.04);
}
.campPage a.campCard:hover .campCard-link {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ── Feature tabs (feature_tabs) – the CTA flipper ─────────────────────────── */
.campPage .dynamic-feature_tabs .campTitle {
	margin-bottom: 23px;
}
.campPage .campTabs {
	max-width: 1289px;
	margin: 0 auto;
}
.campPage .campTabs-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 clamp(8px, 1.4vw, 22px);
	margin-bottom: 29px;
}
.campPage .campTabs-tab {
	padding: 0 10px 1px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	font-family: "clother", sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 36px;
	color: var(--blue);
	opacity: 0.4;
	cursor: pointer;
	transition: opacity 300ms, border-color 300ms;
}
.campPage .campTabs-tab:hover,
.campPage .campTabs-tab:focus-visible {
	opacity: 0.8;
}
.campPage .campTabs-tab.is-active {
	opacity: 1;
	border-bottom-color: var(--red);
}
.campPage .campTabs-deck {
	position: relative;
	padding-top: 60px;
}
.campPage .campTabs-band {
	position: absolute;
	bottom: 40px;
	height: 120px;
	transition: background-color 700ms ease;
}
.campPage .campTabs-band--1 { top: 40px; left: 1.55%; right: 1.55%; }
.campPage .campTabs-band--2 { top: 20px; left: 3.41%; right: 3.1%; }
.campPage .campTabs-band--3 { top: 0; left: 4.97%; right: 4.65%; }
.campPage .campTabs-band.is-empty { display: none; }
.campPage .bg-cyan.campTabs-band, .campPage .bg-cyan.campTabs-panel { background: var(--cyan); }
.campPage .bg-blue.campTabs-band, .campPage .bg-blue.campTabs-panel { background: var(--blue); }
.campPage .bg-red.campTabs-band, .campPage .bg-red.campTabs-panel { background: var(--red); }
.campPage .bg-yellow.campTabs-band, .campPage .bg-yellow.campTabs-panel { background: var(--yellow); }
.campPage .bg-maroon.campTabs-band, .campPage .bg-maroon.campTabs-panel { background: var(--mehroon); }
.campPage .campTabs-panel {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 482px);
	align-items: start;
	gap: 48px;
	min-height: 534px;
	padding: 38px 40px 41px 64px;
	color: var(--white);
	--title_colour: var(--white);
	--link_colour: var(--white);
}
.campPage .campTabs-panel[hidden] {
	display: none;
}
.campPage .campTabs-panel.bg-yellow {
	color: var(--blue);
	--title_colour: var(--blue);
	--link_colour: var(--blue);
}
/* Switching (js/camps.js): the new panel fades in over the old one, which keeps its place
   out of flow until the fade ends; the deck's height eases between them. js/camps.js reads
   each block's timing from the animation-duration set here.
   Feature Tabs: the card fades in and settles, so its colour blends into the next rather
   than flashing the page behind. */
.campPage .campTabs-panel.is-entering {
	animation: campTabsIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.campPage .campTabs-panel.is-leaving,
.campPage .campPricing-panel.is-leaving {
	z-index: 0;
	pointer-events: none;
}
/* Pricing: a plain cross-fade with no movement – the two panels share their layout and
   icons, and a sliding panel over a still one doubled them up (Feedbucket #1036750).
   600ms ease-in-out so the switch eases in rather than snapping. */
.campPage .campPricing-panel.is-entering {
	animation: campFadeIn 600ms ease-in-out both;
}
.campPage .campPricing-panel.is-leaving {
	animation: campFadeOut 600ms ease-in-out both;
}
@keyframes campTabsIn {
	from { opacity: 0; transform: translateY(-20px); }
	to { opacity: 1; transform: none; }
}
@keyframes campFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes campFadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
.campPage .campTabs-title {
	font-size: 48px;
	line-height: 1;
	max-width: 520px;
	margin: 26px 0 32px;
}
.campPage .campTabs-body {
	font-size: 24px;
	line-height: 27px;
}
.campPage .campTabs-body ul {
	margin: 0;
	padding-left: 36px;
}
.campPage .campTabs-body li {
	margin-bottom: 27px;
}
.campPage .campTabs-body li:last-child,
.campPage .campTabs-body p:last-child {
	margin-bottom: 0;
}
.campPage .campTabs-body li::marker {
	font-size: 0.7em;
}
.campPage .campTabs-media {
	aspect-ratio: 482 / 455;
}
.campPage .campTabs-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Quote (quote) – the standard quote on an optional band ─────────────────── */
.campPage .campQuote--bg-yellow,
.campPage .campQuote--bg-gray {
	padding: clamp(56px, 5.5vw, 86px) 0 clamp(56px, 5.1vw, 80px);
}
.campPage .campQuote--bg-yellow { background: var(--yellow); }
.campPage .campQuote--bg-gray { background: var(--gray); }
.campPage .campQuote .quoteContainer {
	background: transparent;
	padding: 0 12px 72px; /* room for the dots, which hang below the slideshow box (next) */
}
.campPage .campQuote .quotesTitle {
	display: none; /* the drawing has no heading over the quote */
}
.campPage .campQuote blockquote.quote-text {
	padding: 0;
	margin: 0;
}
/* Cycle2 sizes the box from a hidden in-flow copy of the tallest quote and stacks the real
   ones absolutely at its top, so a short quote left a hole above the dots. Each quote is
   centred in that box instead (Cycle2 writes top: 0 inline, hence the !important), and the
   dots sit outside the box so its height is the tallest quote alone. The paragraph's
   trailing margin goes: it collapses in the in-flow copy but not in the absolute slides,
   which made them 25px taller than the box they centre in. */
.campPage .campQuote .cycle-slideshow > .singleQuote:not(.cycle-sentinel) {
	top: 50% !important;
	transform: translateY(-50%);
}
.campPage .campQuote .quote-text > p:last-child {
	margin-bottom: 0;
}
.campPage .campQuote .quote-cite {
	margin-top: 46px;
}
.campPage .campQuote .cycle-pager {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 44px;
}
.campPage .campQuote--bg-yellow blockquote,
.campPage .campQuote--bg-yellow blockquote::before {
	color: var(--blue);
}
.campPage .campQuote--bg-yellow .cycle-pager span {
	background: rgba(43, 42, 109, 0.35);
	color: transparent;
}
.campPage .campQuote--bg-yellow .cycle-pager span.cycle-pager-active {
	background: var(--blue);
}

/* ── Call out (callout) – get_the_callout() in two placements ──────────────── */
.campPage .campCallout {
	display: flex;
	align-items: center;
	background: var(--blue);
	--title_colour: var(--white);
}
.campPage .campCallout.hasbg .coimg::after {
	background: rgba(0, 0, 0, 0.12);
}
.campPage .campCallout .calloutContent,
.campPage .campCallout.hasbg .calloutContent,
.campPage .campCallout.hastext .calloutContent {
	position: relative;
	z-index: 1;
	padding-top: 0;
	padding-bottom: 0;
}
.campPage .campCallout .calloutTitle {
	margin: 0;
}
.campPage .campCallout .calloutTitle h3 {
	color: var(--white);
	font-size: clamp(40px, 4.1vw, 64px);
	line-height: 1;
	margin: 0 0 66px;
}
.campPage .campCallout .calloutTitle h3:empty {
	display: none;
}
.campPage .campCallout .calloutText {
	max-width: 640px;
	margin: -34px auto 48px;
}
.campPage .campCallout .button {
	background: var(--white);
	border-color: var(--white);
	color: var(--blue);
}
.campPage .campCallout .button:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}
.campPage .campCallout .callout_pager {
	display: none;
}
/* Heights from the drawn ratios by vw, not aspect-ratio: with a min-height, aspect-ratio
   widens the box past the screen instead of growing it taller. */
.campPage .campCallout--tall-bottom {
	align-items: flex-end;
	height: 66.7vw; /* 1559 x 1040 */
}
/* Doubled class so this outranks the .hasbg reset above, which zeroed the padding and
   left the button flush with the photo's bottom edge. */
.campPage .campCallout.campCallout--tall-bottom .calloutContent {
	padding-bottom: clamp(32px, 5.3vw, 83px);
}
.campPage .campCallout--banner-right,
.campPage .campCallout--banner-centre {
	height: max(420px, 42.95vw); /* 1560 x 670 */
}
.campPage .campCallout--banner-right .calloutContent .col {
	flex: 0 0 50%;
	max-width: 50%;
	margin-left: 50%;
}

/* ── Feature slideshow (facilities) – the home "Skills & Academics" block ──── */
.campPage .dynamic-facilities {
	background: transparent;
	padding: 0;
}
.campPage .dynamic-facilities .section_title h2 {
	color: var(--camp-accent);
}
/* The drawing (14002:639) leaves 105px between the intro text and the title's line box;
   the inherited block leaves none. Below 992px the theme's own rule gives the title a
   50px top margin, so the gap is desktop-only: 86px + the title's 19px half-leading. */
@media (min-width: 992px) {
	.campPage .dynamic-facilities .section_details {
		margin-bottom: 86px;
	}
}
.campPage .dynamic-facilities .facilities-slideshow {
	aspect-ratio: 1028 / 687;
}
.campPage .dynamic-facilities .facility-slide,
.campPage .dynamic-facilities .facility-image {
	width: 100%;
	height: 100%;
}
.campPage .dynamic-facilities .faci_carousel_section_main img {
	max-height: none;
}
/* The inherited arrow box is ~90% of the column wide with the arrow at its far end, which puts
   it past the screen edge; here it sits right after the link text, as drawn. */
.campPage .dynamic-facilities .section_title h2 a::after {
	width: clamp(120px, 17vw, 244px);
	max-width: none;
	margin-left: 30px;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* ── Form (form) – WPForms in the drawn style ───────────────────────────────── */
.campPage .campForm .wpforms-container {
	--wpforms-field-border-radius: 0;
	--wpforms-field-border-color: var(--blue);
	--wpforms-field-border-color-spare: var(--blue);
	--wpforms-field-text-color: var(--blue);
	--wpforms-label-color: var(--blue);
	--wpforms-label-sublabel-color: var(--blue);
	--wpforms-field-size-input-height: 72px;
	--wpforms-field-size-font-size: 22px;
	--wpforms-field-size-line-height: 27px;
	--wpforms-field-size-padding-h: 20px;
	--wpforms-field-size-checkbox-size: 20px;
	--wpforms-field-size-sublabel-spacing: 8px;
	--wpforms-label-size-font-size: 24px;
	--wpforms-label-size-line-height: 27px;
	--wpforms-label-size-sublabel-font-size: 14px;
	--wpforms-label-size-sublabel-line-height: 14px;
	margin: 0;
	font-family: "clother", sans-serif;
	color: var(--blue);
}
.campPage .campForm .wpforms-container .wpforms-field {
	padding: 0 0 32px;
}
.campPage .campForm .wpforms-container .wpforms-field-label,
.campPage .campForm .wpforms-container legend.wpforms-field-label {
	font-family: "clother", sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 27px;
	color: var(--blue);
	margin: 0 0 2px;
	padding: 0;
}
.campPage .campForm .wpforms-container .wpforms-required-label {
	color: var(--red);
	font-weight: 300;
}
.campPage .campForm .wpforms-container .wpforms-field-sublabel {
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--blue);
	margin-top: 8px;
}
.campPage .campForm .wpforms-container input[type=text],
.campPage .campForm .wpforms-container input[type=email],
.campPage .campForm .wpforms-container input[type=tel],
.campPage .campForm .wpforms-container input[type=number],
.campPage .campForm .wpforms-container input[type=url],
.campPage .campForm .wpforms-container textarea {
	height: 72px;
	max-width: 100%;
	border: 1px solid var(--blue);
	border-radius: 0;
	background: var(--white);
	color: var(--blue);
	font-family: "clother", sans-serif;
	font-weight: 300;
	font-size: 22px;
	box-shadow: none;
}
.campPage .campForm .wpforms-container textarea {
	height: 213px;
	padding-top: 18px;
}
.campPage .campForm .wpforms-container select,
.campPage .campForm .wpforms-container .choices__inner {
	min-height: 42px;
	height: 42px;
	border: 1px solid var(--blue);
	border-radius: 0;
	background: var(--white);
	color: var(--blue);
	padding: 0 40px 0 16px;
	display: flex;
	align-items: center;
	font-family: "clother", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	box-shadow: none;
}
.campPage .campForm .wpforms-container .choices__list--single {
	padding: 0;
}
.campPage .campForm .wpforms-container .choices__list--dropdown .choices__item {
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 300;
	color: var(--blue);
}
.campPage .campForm .wpforms-container .choices[data-type*=select-one]::after {
	border-color: var(--blue) transparent transparent;
	right: 18px;
}
.campPage .campForm .wpforms-container input[type=checkbox],
.campPage .campForm .wpforms-container input[type=radio] {
	accent-color: var(--blue);
}
.campPage .campForm .wpforms-container .wpforms-field-checkbox li label,
.campPage .campForm .wpforms-container .wpforms-field-gdpr-checkbox li label,
.campPage .campForm .wpforms-container .wpforms-field-radio li label {
	font-size: 24px;
	line-height: 27px;
	font-weight: 300;
	color: var(--blue);
}
.campPage .campForm .wpforms-container .wpforms-submit-container {
	padding-top: 8px;
}
.campPage .campForm .wpforms-container button.wpforms-submit,
.campPage .campForm .wpforms-container .wpforms-submit {
	min-width: 247px;
	height: 83px;
	padding: 0 65px;
	border: 1px solid var(--blue);
	border-radius: 0;
	background: transparent;
	color: var(--blue);
	font-family: "clother", sans-serif;
	font-weight: 300;
	font-size: 22px;
	line-height: 1;
	box-shadow: none;
	transition: 300ms;
}
.campPage .campForm .wpforms-container button.wpforms-submit:hover,
.campPage .campForm .wpforms-container .wpforms-submit:hover {
	background: var(--blue);
	color: var(--white);
}

/* ── FAQ (faq) – the standard accordion in the drawn style ─────────────────── */
.campPage .dynamic-faq .sectionTitle {
	color: var(--camp-accent);
	font-size: clamp(40px, 4.1vw, 64px);
	line-height: 1;
	text-align: left;
	margin: 0 0 56px;
}
.campPage .faq-question {
	font-family: "clother", sans-serif;
	font-weight: 300;
	font-size: 22px;
	line-height: 1;
	text-transform: none;
	padding: 30px 72px 30px 24px;
	border-width: 0.5px;
}
.campPage .faq-answer {
	display: none;
	background: var(--blue);
	color: var(--white);
	--title_colour: var(--white);
	--body_colour: var(--white);
	--link_colour: var(--white);
	--link_colour_hover: var(--yellow);
}
/* The FAQ page's answer padding (style.css, .bodyContent .faq-answer .col-md). */
.campPage .faq-answer .col-md {
	padding: 44px 72px 50px 72px;
	font-size: 22px;
	line-height: 27px;
}
.campPage .faq-answer p:last-child {
	margin-bottom: 0;
}

/* ── Buttons (buttons) ──────────────────────────────────────────────────────── */
.campPage .campButtons {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/* ── Activities grid (activities) – the seven-tile mosaic ──────────────────── */
.campPage .campMosaic-wrap {
	display: grid;
	gap: 18px;
}
.campPage .campMosaic--seven {
	display: flex;
	gap: 18px;
	aspect-ratio: 1562 / 765;
}
.campPage .campMosaic-col,
.campPage .campMosaic-row {
	display: flex;
	gap: 18px;
	min-width: 0;
	min-height: 0;
}
.campPage .campMosaic-col { flex-direction: column; }
.campPage .campMosaic-col--1,
.campPage .campMosaic-col--2 { flex: 435 1 0; }
.campPage .campMosaic-col--3 { flex: 656 1 0; }
.campPage .campMosaic-tile--1 { flex: 407 1 0; }
.campPage .campMosaic-tile--2 { flex: 339 1 0; }
.campPage .campMosaic-tile--3 { flex: 244 1 0; }
.campPage .campMosaic-tile--4 { flex: 504 1 0; }
.campPage .campMosaic-row { flex: 471 1 0; }
.campPage .campMosaic-tile--5 { flex: 397 1 0; }
.campPage .campMosaic-tile--6 { flex: 241 1 0; }
.campPage .campMosaic-tile--7 { flex: 276 1 0; }
.campPage .campMosaic--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.campPage .campMosaic--grid .campMosaic-tile {
	aspect-ratio: 4 / 3;
}
.campPage .campMosaic-tile {
	position: relative;
	container-type: inline-size;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--blue);
}
.campPage .campMosaic-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.campPage .campMosaic-tile::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(43, 42, 109, 0) 40%, rgba(43, 42, 109, 0.85) 100%);
}
.campPage .campMosaic-label {
	position: absolute;
	left: 32px;
	right: 8px;
	bottom: 30px;
	z-index: 1;
	margin: 0;
	color: var(--white);
	font-size: min(clamp(26px, 3vw, 48px), 15cqi); /* a long name in a narrow tile shrinks to fit */
	line-height: 1;
}

/* ── Timeline (timeline) – a sideways strip, scrolled or dragged ───────────── */
.campPage .dynamic-timeline .campTitle {
	margin-bottom: 36px;
}
.campPage .campTimeline {
	--tl-step: 224px;
	--tl-circle: 157px;
	--tl-stem: 107px;
	--tl-dot: 24px;
	--tl-line: calc(var(--tl-circle) + var(--tl-stem) + 3px);
	--tl-height: calc(var(--tl-line) + var(--tl-dot) / 2 + var(--tl-stem) + var(--tl-circle));
	--tl-font: 24px;
}
.campPage .campTimeline-track {
	overflow-x: auto;
	overflow-y: hidden;
	padding: 68px 0 90px;
	scrollbar-width: none;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	outline-offset: -4px;
}
.campPage .campTimeline-track::-webkit-scrollbar {
	display: none;
}
.campPage .campTimeline-track.is-dragging {
	cursor: grabbing;
	user-select: none;
}
.campPage .campTimeline.is-static .campTimeline-track {
	cursor: default;
}
.campPage .campTimeline-list {
	position: relative;
	display: flex;
	width: max-content;
	height: var(--tl-height);
	margin: 0;
	padding: 0 max(24px, calc((100vw - 1296px) / 2 - 33px));
	list-style: none;
	/* The line the steps hang from, drawn on the list (its padding at either end) and on
	   every step (below). iOS Safari sizes the list to the screen, not its max-content
	   width, so a line on the list alone stopped at the first screen of steps. */
	background: linear-gradient(var(--blue), var(--blue)) 0 calc(var(--tl-line) - 1px) / 100% 2px no-repeat;
}
.campPage .campTimeline-step {
	position: relative;
	flex: 0 0 var(--tl-step);
	background: linear-gradient(var(--blue), var(--blue)) 0 calc(var(--tl-line) - 1px) / 100% 2px no-repeat;
}
.campPage .campTimeline-step::before {
	content: '';
	position: absolute;
	left: 50%;
	width: 2px;
	height: var(--tl-stem);
	margin-left: -1px;
	background: var(--blue);
}
.campPage .campTimeline-step.is-above::before {
	top: var(--tl-circle);
}
.campPage .campTimeline-step.is-below::before {
	top: calc(var(--tl-line) + var(--tl-dot) / 2);
}
.campPage .campTimeline-step::after {
	content: '';
	position: absolute;
	left: 50%;
	top: calc(var(--tl-line) - var(--tl-dot) / 2);
	width: var(--tl-dot);
	height: var(--tl-dot);
	margin-left: calc(var(--tl-dot) / -2);
	border-radius: 50%;
	background: var(--blue);
}
.campPage .campTimeline-time {
	position: absolute;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tl-circle);
	height: var(--tl-circle);
	margin-left: calc(var(--tl-circle) / -2);
	border: 1px solid var(--blue);
	border-radius: 50%;
	background: var(--white);
	color: var(--camp-accent);
	font-weight: 700;
	font-size: var(--tl-font);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}
.campPage .campTimeline-step.is-above .campTimeline-time {
	top: 0;
}
.campPage .campTimeline-step.is-below .campTimeline-time {
	bottom: 0;
}
.campPage .campTimeline-text {
	position: absolute;
	left: 50%;
	width: 196px;
	transform: translateX(-50%);
	font-size: var(--tl-font);
	line-height: 1.125;
	font-weight: 300;
	text-align: center;
}
.campPage .campTimeline-step.is-above .campTimeline-text {
	top: calc(var(--tl-line) + 65px);
}
.campPage .campTimeline-step.is-below .campTimeline-text {
	bottom: calc(var(--tl-height) - var(--tl-line) + 56px);
}
.campPage .campTimeline-hint {
	margin: -24px 0 0;
	text-align: right;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
}
.campPage .campTimeline.is-static .campTimeline-hint {
	visibility: hidden;
}

/* ── Pricing tabs (pricing) ─────────────────────────────────────────────────── */
.campPage .dynamic-pricing .campTitle {
	margin-bottom: 87px;
}
.campPage .campPricing {
	max-width: 1165px;
	margin: 0 auto;
}
.campPage .campPricing-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 68px;
	margin-bottom: 85px;
}
.campPage .campPricing-tab {
	padding: 0;
	border: 0;
	background: none;
	font-family: "the-seasons", sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 3.1vw, 48px);
	line-height: 1.2;
	color: var(--camp-tab);
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 300ms;
}
.campPage .campPricing-tab:hover,
.campPage .campPricing-tab:focus-visible {
	opacity: 0.8;
}
.campPage .campPricing-tab.is-active {
	opacity: 1;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.campPage .campPricing-panel[hidden] {
	display: none;
}
.campPage .campPricing-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: start;
	column-gap: 81px;
	padding: 0 20px;
	margin-bottom: 110px;
}
.campPage .campPricing-title {
	color: var(--blue);
	font-size: clamp(40px, 4.1vw, 64px);
	line-height: 1;
	margin: 4px 0 12px;
}
.campPage .campPricing-ages,
.campPage .campPricing-note {
	font-size: 24px;
	line-height: 27px;
	margin: 0;
}
.campPage .campPricing-note {
	margin-top: 14px;
}
.campPage .campPricing-price {
	min-width: 269px;
	margin: 0;
	padding: 18px 30px 17px;
	background: var(--camp-accent-dark);
	color: var(--white);
	font-family: "the-seasons", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 48px;
	text-align: center;
	white-space: nowrap;
}
.campPage .campPricing-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 58px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.campPage .campPricing-feature {
	text-align: center;
}
.campPage .campPricing-icon {
	display: block;
	height: 100px;
	margin-bottom: 35px;
	background: var(--camp-accent);
	-webkit-mask: var(--camp-icon) center / contain no-repeat;
	mask: var(--camp-icon) center / contain no-repeat;
}
.campPage .campPricing-label {
	display: block;
	font-weight: 700;
	font-size: 24px;
	line-height: 24px;
}

/* ── ≤ 1199px ───────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
	.campPage .campTabs-panel {
		gap: 32px;
		padding: 32px 32px 36px 40px;
		min-height: 0;
	}
	.campPage .campTabs-title {
		font-size: 40px;
		margin-top: 8px;
	}
	.campPage .campTabs-body {
		font-size: 22px;
	}
	.campPage .campPricing-head {
		column-gap: 40px;
	}
}

/* ── ≤ 991px: columns stack ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
	.campPage .container {
		padding-left: 25px;
		padding-right: 25px;
	}
	.campPage .campWelcome {
		grid-template-columns: minmax(0, 1fr);
	}
	.campPage .campWelcome-media {
		max-width: 486px;
		width: 100%;
		margin: 0 auto;
	}
	.campPage .campCards {
		gap: 32px;
	}
	.campPage .campCard-text {
		gap: 20px;
		padding: 0 24px;
	}
	.campPage .campCard-body {
		font-size: 20px;
		line-height: 24px;
	}
	.campPage .campTabs-nav {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		margin-left: -12px;
		margin-right: -12px;
		padding: 0 12px;
	}
	.campPage .campTabs-nav::-webkit-scrollbar {
		display: none;
	}
	.campPage .campTabs-tab {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.campPage .campTabs-panel {
		grid-template-columns: minmax(0, 1fr);
	}
	.campPage .campTabs-media {
		max-width: 482px;
	}
	.campPage .campCallout--banner-right .calloutContent .col {
		flex: 0 0 100%;
		max-width: 100%;
		margin-left: 0;
	}
	.campPage .campCallout--banner-right .coimg::after {
		background: rgba(0, 0, 0, 0.3);
	}
	.campPage .campMosaic--seven {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		aspect-ratio: auto;
		gap: 12px;
	}
	.campPage .campMosaic--seven .campMosaic-col,
	.campPage .campMosaic--seven .campMosaic-row {
		display: contents;
	}
	.campPage .campMosaic--seven .campMosaic-tile {
		aspect-ratio: 4 / 5;
	}
	.campPage .campMosaic--seven .campMosaic-tile--7 {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
	.campPage .campMosaic--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.campPage .campMosaic-wrap {
		gap: 12px;
		padding: 0 12px;
	}
	.campPage .campMosaic-label {
		left: 20px;
		bottom: 18px;
	}
	.campPage .campPricing-head {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		row-gap: 20px;
		text-align: center;
		margin-bottom: 64px;
	}
	.campPage .campPricing-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
	}
}

/* ── ≤ 767px: phones ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
	.campPage {
		--camp-title-size: 38px;
	}
	.campPage .campTitle-line--second {
		padding-left: 1.2em;
	}
	.campPage .campTitle-line {
		white-space: normal;
	}
	.campPage .campBanner {
		height: auto;
		min-height: 600px;
		padding-top: 236px; /* clear the stacked phone logo (to 206px) */
	}
	.campPage .campBanner-subtitle {
		font-size: 20px;
		line-height: 24px;
	}
	.campPage .campBanner-buttons .button {
		min-width: 0;
		width: 100%;
	}
	.campPage .campBanner-video {
		display: none;
	}
	.campPage .campWelcome-body,
	.campPage .campTabs-body,
	.campPage .campCard-body {
		font-size: 20px;
		line-height: 24px;
	}
	.campPage .campCards {
		flex-direction: column;
		align-items: center;
	}
	.campPage .campCard {
		width: 100%;
		flex-basis: auto;
	}
	.campPage .campTabs-panel {
		padding: 24px 20px 28px;
	}
	.campPage .campTabs-title {
		font-size: 32px;
	}
	.campPage .campTabs-body ul {
		padding-left: 22px;
	}
	.campPage .campTabs-body li {
		margin-bottom: 16px;
	}
	.campPage .campCallout--tall-bottom {
		height: 66.7vw; /* keep the photo whole – its words are part of the image */
		min-height: 260px;
	}
	.campPage .campCallout--banner-right,
	.campPage .campCallout--banner-centre {
		height: auto;
		min-height: 420px;
		padding: 64px 0;
	}
	.campPage .campTimeline {
		--tl-step: 172px;
		--tl-circle: 118px;
		--tl-stem: 64px;
		--tl-dot: 18px;
		--tl-font: 18px;
	}
	.campPage .campTimeline-text {
		width: 150px;
	}
	.campPage .campTimeline-track {
		padding: 40px 0 64px;
	}
	.campPage .campTimeline-hint {
		font-size: 20px;
	}
	.campPage .campPricing-nav {
		gap: 0 32px;
		margin-bottom: 48px;
	}
	.campPage .campPricing-price {
		min-width: 0;
		font-size: 36px;
		line-height: 36px;
	}
	.campPage .campPricing-features {
		gap: 32px 16px;
	}
	.campPage .campPricing-icon {
		height: 72px;
		margin-bottom: 20px;
	}
	.campPage .campPricing-label {
		font-size: 18px;
		line-height: 20px;
	}
	.campPage .faq-question {
		font-size: 18px;
		line-height: 1.2;
		padding: 22px 60px 22px 18px;
	}
	.campPage .faq-question:after {
		top: 24px;
	}
	.campPage .faq-answer .col-md {
		font-size: 18px;
		line-height: 24px;
	}
	.campPage .campButtons .button {
		min-width: 0;
		flex: 1 1 100%;
	}
	.campPage .campForm .wpforms-container .wpforms-field-label,
	.campPage .campForm .wpforms-container legend.wpforms-field-label {
		font-size: 20px;
		line-height: 24px;
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.campPage .campTabs-panel.is-entering,
	.campPage .campPricing-panel.is-entering,
	.campPage .campTabs-panel.is-leaving,
	.campPage .campPricing-panel.is-leaving {
		animation: none;
	}
	.campPage .campTabs-band {
		transition: none;
	}
	.campPage .campCard-media img,
	.campPage .campPlay {
		transition: none;
	}
}