/* ==========================================================================
   Pulse of Ceylon — homepage stylesheet
   BEM naming, :root design tokens, mobile-first breakpoints at 768 / 1024.
   ========================================================================== */

:root {
	/* Colors */
	--color-cream: #f4f0e9;
	--color-cream-soft: #ede7da;
	--color-sage: #6f8c41;
	--color-sage-light: #a3c476;
	--color-sage-dark: #556b2f;
	--color-sage-darker: #3f5322;
	--color-sage-deep: #37500c;
	--color-text: #575757;
	--color-heading: #6f8c41;
	--color-white: #ffffff;
	--color-black: #1c1c1c;
	--color-whatsapp: #25d366;
	--color-btn-hover: #5a6b37;

	/* Type */
	--font-display: "Cormorant Garamond", "Georgia", serif;
	--font-condensed: "Roboto Condensed", "Arial Narrow", sans-serif;
	--step-hero: clamp(2.75rem, 2rem + 3vw, 5.5rem);
	--step-page-hero: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
	--step-h2: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
	--step-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
	--step-body: 1.0625rem;

	/* Layout */
	--container-width: 1256px;
	--container-pad: 1.5rem;
	--radius-lg: 2.5rem;
	--radius-md: 1.5rem;
	--radius-sm: 0.75rem;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-display);
	font-size: var(--step-body);
	line-height: 1.65;
	color: var(--color-text);
	background: var(--color-cream);
	overflow-x: hidden;
}

body.has-nav-open {
	overflow: hidden;
}

img {
	max-width: 100%;
	display: block;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	background: none;
	border: 0;
}

input {
	font-family: inherit;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 500;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Scroll reveal — applied by main.js via IntersectionObserver. Uses
   `animation` (not `transition`) specifically so it never fights with an
   element's own hover `transition` (e.g. card lift-on-hover) — the two
   mechanisms are independent and always coexist safely.
   ========================================================================== */

.js-reveal {
	opacity: 0;
}

.js-reveal.is-visible {
	animation: pulseRevealUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pulseRevealUp {
	from {
		opacity: 0;
		transform: translateY(28px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal {
		opacity: 1;
		animation: none;
	}
}

/* ==========================================================================
   Shared layout / components
   ========================================================================== */

.c-main {
	overflow-x: hidden;
}

/* Substring (not suffix-anchored) match: the scroll-reveal script appends
   "js-reveal"/"is-visible" after an element's own class, which would break
   a `$=` (ends-with) match on the class attribute for any "__inner" element
   that's also a reveal target. */
[class*="__inner"] {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.c-btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Sized to the Figma buttons: ~160 × 38px pill. */
	min-width: 10rem;
	min-height: 2.4rem;
	padding: 0.55em 2.2em;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

/* B008 (per client UI): on hover every button becomes a flat, solid
   brand-green pill with white text. The green is a separate layer that
   fades in (a gradient background can't be animated into a solid colour,
   which made the change snap), so the transition is smooth on every
   button style. Text and border colours ease at the same pace. */
.c-btn {
	transition: color 0.45s ease, border-color 0.45s ease;
}

.c-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--color-btn-hover);
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.c-btn:hover,
.c-btn:focus-visible {
	color: var(--color-white);
	border-color: var(--color-btn-hover);
}

.c-btn:hover::before,
.c-btn:focus-visible::before {
	opacity: 1;
}

/* On green backgrounds a thin white ring keeps the hovered pill visible. */
.c-btn--light::after,
.c-btn--outline::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.c-btn--light:hover::after,
.c-btn--light:focus-visible::after,
.c-btn--outline:hover::after,
.c-btn--outline:focus-visible::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.c-btn,
	.c-btn::before,
	.c-btn::after {
		transition: none;
	}
}

/* UI gradient (dark olive → light sage); hover is the flat B008 green. */
.c-btn--solid {
	background: linear-gradient(90deg, var(--color-sage-dark) 0%, #8aa85a 50%, var(--color-sage-dark) 100%);
	background-size: 200% 100%;
	background-position: 0% 0;
	color: var(--color-white);
}

.c-btn--outline {
	background: transparent;
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.85);
}

.c-btn--light {
	background: var(--color-white);
	color: var(--color-sage-dark);
}

.c-btn--outline-dark {
	background: transparent;
	color: var(--color-heading);
	border: 1px solid var(--color-sage);
}

.c-link {
	font-size: 1.05rem;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.15em;
}

/**
 * Shared horizontal-scroll carousel track. Cards use a fixed flex-basis
 * (set per-list) so extra items genuinely overflow and the prev/next
 * buttons in main.js have something real to scroll — a plain CSS Grid
 * with `1fr` columns never overflows, which is why the arrows previously
 * did nothing.
 */
[data-carousel] {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

[data-carousel]::-webkit-scrollbar {
	display: none;
}

[data-carousel] > * {
	scroll-snap-align: start;
}

.c-arrow {
	display: inline-flex;
	width: 44px;
	height: 39px;
	/* Drop the browser's default button padding, which shrank the arrow
	   icon to ~28px (UI: ~39px) inside its 44px box. */
	padding: 0;
}

.c-arrow--light {
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-sage-dark);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.c-arrow--light:hover,
.c-arrow--light:focus-visible {
	transform: translateY(-2px);
}

.c-arrow img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.c-section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 3rem;
}

.c-section-head--left {
	text-align: left;
	margin-inline: 0;
}

.c-section-head__title {
	font-size: var(--step-h2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

/* Section subtitle line under each homepage heading (from the approved
   content doc), e.g. "From Coastlines to Highlands". */
.c-section-head__subtitle {
	margin: 0 0 1rem;
	color: var(--color-sage-dark);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	letter-spacing: 0.02em;
}

.c-section-head__subtitle--light {
	color: rgba(255, 255, 255, 0.9);
}

.c-about__subtitle {
	margin: 0 0 1.25rem;
}

/* Per the Home UI: the underline sits snug directly beneath each section
   title (centred under centred titles, left under left-aligned ones),
   with the subtitle and copy following below it. */
.c-section-head__ornament {
	display: block;
	margin: 0.35rem auto 1rem;
}

.c-about__content .c-about__ornament {
	margin: 0.35rem 0 1rem;
}

.c-section-head--left .c-section-head__ornament {
	margin-inline: 0;
}

.c-section-head__text {
	color: var(--color-text);
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.c-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: linear-gradient(to bottom, rgba(20, 24, 20, 0.65) 0%, rgba(20, 24, 20, 0.25) 60%, rgba(20, 24, 20, 0) 100%);
	padding-block: 1.4rem;
	transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.c-header.is-scrolled {
	background: var(--color-sage-dark);
	padding-block: 0.75rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.c-header__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
}

/* Large screens: let the header spread wider than the content container
   so it doesn't sit as a narrow strip with big empty margins either side. */
@media (min-width: 1500px) {
	.c-header__inner {
		max-width: min(1680px, 92vw);
	}

	.c-nav__list {
		gap: 1.5rem;
	}
}

.c-header__logo {
	/* .c-nav is a sibling (not ancestor) of the logo/toggle/social inside
	   .c-header__inner. At ≤1024px it becomes position: fixed with its own
	   z-index (the off-canvas panel), which — being positioned — paints
	   above these plain in-flow siblings regardless of DOM order. Without
	   a stacking context of their own here too, the panel buries them,
	   including the toggle button's close "X" state. */
	position: relative;
	z-index: 96;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.c-header__logo-img {
	width: auto;
	height: 52px;
	object-fit: contain;
}

.c-nav {
	flex: 1;
}

.c-nav__list {
	display: flex;
	align-items: center;
	/* Tightened from 1rem: fixing the dropdown chevrons (below) to actually
	   take up inline space, as they should, left the full 8-item row just
	   wide enough to wrap "Contact Us" onto its own line at the container's
	   max width. This reclaims that space. */
	gap: 0.75rem;
	flex-wrap: wrap;
	/* Centre the menu in the space between the logo and the contact block,
	   as in the UI design (it used to sit flush against the logo). */
	justify-content: center;
}

.c-nav__link {
	color: var(--color-white);
	font-size: 1rem;
	letter-spacing: 0.01em;
}

.c-nav__list > .c-nav__item > .c-nav__link {
	position: relative;
	display: inline-block;
}

.c-nav__list > .c-nav__item > .c-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 1.5px;
	background: currentColor;
	transition: right 0.3s ease;
}

.c-nav__list > .c-nav__item > .c-nav__link:hover::after,
.c-nav__list > .c-nav__item > .c-nav__link:focus-visible::after,
.c-nav__list > .c-nav__item.is-current > .c-nav__link::after {
	right: 0;
}

.c-nav__submenu .c-nav__item.is-current > .c-nav__link {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.c-nav__list > .c-nav__item--has-children > .c-nav__link {
	/* Same specificity as the ".c-nav__list > .c-nav__item > .c-nav__link"
	   rule above (3 classes each) so this wins on source order — otherwise
	   that rule's "display: inline-block" clobbers this "inline-flex" and
	   the chevron's `order` below has no flex container to reorder within,
	   leaving it stuck before the label instead of after it. */
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.c-nav__item--has-children > .c-nav__link::before {
	/* ::before, not ::after — the top-level link's own ::after is already
	   used for the hover-underline effect above, and that rule's higher
	   selector specificity was clobbering this chevron's height/position
	   when both landed on the same pseudo-element, squashing it into an
	   illegible sliver. Separate pseudo-elements avoid the collision. */
	content: "";
	order: 1;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
}

.c-nav__item--has-children {
	position: relative;
}

.c-nav__submenu {
	display: none;
	position: absolute;
	/* Flush against the link (no margin-top gap): a gap there would be dead
	   space that belongs to neither the link nor the menu, so moving the
	   mouse down into the dropdown would cross it and lose :hover, closing
	   the menu before a click could land. The breathing room above the
	   first item comes from padding-top instead, which stays inside the
	   hoverable box. */
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--color-sage-dark);
	border-radius: var(--radius-sm);
	padding: 0.75rem 0 0.5rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
	z-index: 10;
}

.c-nav__submenu .c-nav__item {
	display: block;
}

.c-nav__submenu .c-nav__link {
	display: block;
	padding: 0.5rem 1.25rem;
	white-space: nowrap;
}

.c-nav__submenu .c-nav__link:hover {
	background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 1200px) {
	.c-nav__item--has-children:hover > .c-nav__submenu,
	.c-nav__item--has-children:focus-within > .c-nav__submenu {
		display: block;
	}
}

.c-header__contact {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-white);
	font-size: 0.95rem;
	white-space: nowrap;
}

.c-header__contact a {
	color: inherit;
}

.c-header__social {
	/* See .c-header__logo above: needs its own stacking context so the
	   fixed off-canvas nav (a sibling, not an ancestor) doesn't paint
	   over it once the panel is open. */
	position: relative;
	z-index: 96;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

.c-header__social img {
	width: 26px;
	height: 25px;
}

.c-header__toggle {
	/* See .c-header__logo above: this is the button that most needs to
	   stay clickable above the open off-canvas panel (it's also the close
	   control, via its aria-expanded "X" state), so it needs the same
	   stacking-context fix. */
	position: relative;
	z-index: 96;
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
}

.c-header__toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-white);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.c-header__toggle[aria-expanded="true"] .c-header__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.c-header__toggle[aria-expanded="true"] .c-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.c-header__toggle[aria-expanded="true"] .c-header__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.c-hero {
	position: relative;
	min-height: max(44rem, 100vh);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 6rem;
	overflow: hidden;
	/* B064: at the hero's bottom edge, overflow:hidden clips the cream
	   divider on a fractional pixel and the anti-aliased row lets the
	   (composited, scaled) video bleed through as a dark hairline on
	   phones/tablets. Clipping 3px higher puts that edge inside the
	   divider's solid cream band (≥8px at any width), so whatever blends
	   there is cream-on-cream against the body background. */
	clip-path: inset(0 0 3px 0);
}

.c-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Slightly oversized so the scroll-parallax translateY (added in JS)
	   never reveals an edge — .c-hero has overflow:hidden as the safety net
	   either way. */
	transform: scale(1.08);
	will-change: transform;
}

.c-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(20, 24, 20, 0.55) 0%, rgba(20, 24, 20, 0) 22%, rgba(20, 24, 20, 0) 78%, rgba(20, 24, 20, 0.15) 100%);
	pointer-events: none;
}

.c-hero__content {
	position: relative;
	z-index: 2;
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.c-hero__title,
.c-hero__subtitle,
.c-hero__cta {
	opacity: 0;
	animation: pulseRevealUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.c-hero__title {
	font-size: var(--step-hero);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
	animation-delay: 0.15s;
}

.c-hero__subtitle {
	margin: -0.75rem 0 0;
	font-size: 1.35rem;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	animation-delay: 0.35s;
}

.c-hero__cta {
	margin-top: 0.5rem;
	animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
	.c-hero__title,
	.c-hero__subtitle,
	.c-hero__cta {
		opacity: 1;
		animation: none;
	}
}

.c-hero__lang {
	position: fixed;
	left: 2.5rem;
	bottom: 2.5rem;
	z-index: 95;
}

.c-hero__whatsapp {
	position: fixed;
	right: 2.5rem;
	bottom: 2.5rem;
	z-index: 95;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	transition: transform 0.25s ease;
}

.c-hero__whatsapp:hover,
.c-hero__whatsapp:focus-visible {
	transform: scale(1.08);
}

.c-hero__whatsapp::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 48px;
	height: 48px;
	margin-left: -24px;
	border-radius: 50%;
	background: var(--color-whatsapp);
	opacity: 0.55;
	z-index: -1;
	animation: pulseWhatsappPing 2.2s ease-out infinite;
}

@keyframes pulseWhatsappPing {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-hero__whatsapp::before {
		animation: none;
		display: none;
	}
}

.c-hero__whatsapp img {
	width: 48px;
	height: auto;
}

.c-hero__whatsapp-tip {
	background: var(--color-white);
	color: var(--color-black);
	font-size: 0.85rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.c-hero__divider {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: auto;
	z-index: 2;
}

/* ==========================================================================
   About + Values
   ========================================================================== */

.c-about {
	padding-block: 5rem 4rem;
	position: relative;
}

.c-about__inner {
	display: grid;
	grid-template-columns: minmax(300px, 620px) 1fr;
	align-items: start;
	gap: 2.5rem;
}

.c-about__media {
	/* Bleed the illustration to the viewport's left edge while the
	   right edge of the column stays put — matches the Figma design,
	   where this image is the one element on the page not confined
	   to the centered container. */
	margin-left: calc(-1 * (max(0px, (100vw - var(--container-width)) / 2) + var(--container-pad)));
	width: calc(100% + max(0px, (100vw - var(--container-width)) / 2) + var(--container-pad));
}

.c-about__media img {
	width: 100%;
	height: auto;
}

.c-about__title {
	font-size: var(--step-h2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-heading);
	margin-bottom: 0;
}

.c-about__text {
	max-width: 46em;
}

.c-about__content > .c-btn {
	margin-top: 1.5rem;
}

.c-values {
	margin-top: 3.5rem;
}

.c-values__title {
	font-size: var(--step-h3);
	color: var(--color-heading);
	margin-bottom: 1.5rem;
}

.c-values__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 2.5rem;
}

.c-values__item {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Normal (sage) and hover (dark olive) SVG icons are stacked; hover
   cross-fades to the dark one, per the supplied icon pairs. */
.c-values__icon {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	transition: transform 0.3s ease;
}

.c-values__icon-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
	transition: opacity 0.3s ease;
}

.c-values__icon-img--hover {
	opacity: 0;
}

.c-values__item:hover .c-values__icon-img:not(.c-values__icon-img--hover) {
	opacity: 0;
}

.c-values__item:hover .c-values__icon-img--hover {
	opacity: 1;
}

.c-values__label {
	color: var(--color-heading);
	font-size: 1.05rem;
	line-height: 1.3;
}

/* ==========================================================================
   Activities
   ========================================================================== */

.c-activities {
	padding-block: 3rem;
}

.c-activities__inner {
	position: relative;
	background: var(--color-sage);
	border-radius: var(--radius-lg);
	padding: 3rem clamp(1.5rem, 4vw, 4rem) 3.5rem;
	color: var(--color-white);
	overflow: hidden;
}

.c-activities__inner::before {
	/* Per the UI: the leaf mark sits large across the centre-right of the
	   panel, bleeding off its top and bottom edges. */
	content: "";
	position: absolute;
	top: -18%;
	right: -4%;
	width: 68%;
	height: 136%;
	background-image: url("../images/activities-bg-pattern.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.2;
	pointer-events: none;
}

.c-activities__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.c-activities__title {
	font-size: var(--step-h2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.c-activities__ornament {
	/* White artwork (heading-underline-white.svg, 257×25) — no filter needed;
	   same width as the green underline, height kept in proportion. */
	width: 231px;
	height: auto;
	margin: 0.35rem 0 1rem;
}

.c-activities__text {
	max-width: 38em;
	color: rgba(255, 255, 255, 0.9);
}

.c-activities__controls {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.c-activities__list {
	position: relative;
	z-index: 1;
}

.c-activities__item {
	/* Exactly four per view (three on tablet) so the last visible card is
	   never sliced by the carousel edge; the rest scroll in via arrows. */
	flex: 0 0 calc((100% - 4.5rem) / 4);
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	overflow: hidden;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.c-activities__item-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.c-activities__item img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	position: relative;
	z-index: 1;
	transition: transform 0.5s ease;
}

.c-activities__item:hover img {
	transform: scale(1.07);
}

.c-activities__caption {
	position: relative;
	z-index: 2;
	margin: -1.75rem 0 0;
	background: var(--color-white);
	color: var(--color-heading);
	text-align: center;
	text-transform: uppercase;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	padding: 1.75rem 1.1rem 1.5rem;
	border-radius: 1.75rem 1.75rem var(--radius-md) var(--radius-md);
	box-shadow: 0 12px 24px rgba(60, 60, 30, 0.08);
	flex: 0 0 auto;
	height: 132px;
	box-sizing: border-box;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* ==========================================================================
   Destinations
   ========================================================================== */

.c-destinations {
	padding-block: 5rem;
}

.c-destinations__grid {
	display: grid;
	grid-template-columns: minmax(280px, 1.45fr) minmax(240px, 1fr) minmax(240px, 1.05fr);
	gap: 2rem;
	align-items: stretch;
}

.c-destinations__feature {
	position: relative;
	width: 100%;
	aspect-ratio: 471 / 483;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.c-destinations__feature img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-md);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.c-destinations__feature img.is-switching {
	opacity: 0;
	transform: scale(0.98);
}

.c-destinations__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.c-destinations__heading {
	font-size: var(--step-h3);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-heading);
	margin-bottom: 1rem;
	transition: opacity 0.3s ease;
}

.c-destinations__text {
	transition: opacity 0.3s ease;
}

.c-destinations__heading.is-switching,
.c-destinations__text.is-switching {
	opacity: 0;
}

.c-destinations__copy .c-btn {
	align-self: flex-start;
	margin-top: 1.5rem;
}

.c-destinations__list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.85rem;
}

.c-destinations__thumb {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 5.3rem;
	border-radius: var(--radius-sm);
	overflow: hidden;
	padding: 0.85rem 1.4rem;
	background: none;
	border: 0;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.c-destinations__thumb:hover,
.c-destinations__thumb:focus-visible {
	transform: translateX(4px);
}

.c-destinations__thumb.is-active {
	box-shadow: 0 0 0 2px var(--color-sage);
}

.c-destinations__thumb-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0);
	transition: filter 0.3s ease;
}

.c-destinations__thumb.is-active .c-destinations__thumb-photo {
	filter: grayscale(1);
}

.c-destinations__thumb-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 20, 10, 0.75) 0%, rgba(15, 20, 10, 0.45) 45%, rgba(15, 20, 10, 0.05) 100%);
}

.c-destinations__thumb-label {
	position: relative;
	z-index: 1;
	display: block;
	color: var(--color-white);
	text-transform: uppercase;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
}

/* ==========================================================================
   Day Tours
   ========================================================================== */

.c-day-tours {
	position: relative;
	padding-block: 5rem;
	overflow: hidden;
}

.c-day-tours::before {
	/* Per the UI: large leaf mark anchored top-right, starting level with
	   the section title and running down behind the cards, cropped by the
	   right edge of the page. */
	content: "";
	position: absolute;
	top: 3rem;
	right: -3%;
	width: 30%;
	height: calc(100% - 3rem);
	background-image: url("../images/day-tours-bg-logo.png");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
	opacity: 0.5;
	pointer-events: none;
}

.c-day-tours__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 1.5rem;
}

.c-day-tours__head .c-section-head {
	margin-bottom: 0;
}

.c-day-tours__controls {
	display: flex;
	/* B017: the arrow PNGs already carry ~5–6px of transparent padding on
	   their inner sides, so any CSS gap here doubles up into a wide visual
	   gap. No gap leaves ~11px between the circles, as in the UI. */
	gap: 0;
	flex-shrink: 0;
}

.c-day-tours__list[data-carousel] {
	position: relative;
	z-index: 1;
	/* The location pin sits above each card's top edge and lifts further on
	   hover (see .c-day-tours__pin); this gives it room so the list's own
	   scroll-container overflow doesn't clip it off. Positive margin keeps
	   clear space between the intro paragraph and the pins (client QA). */
	padding-top: 2.25rem;
	margin-top: 1.25rem;
}

.c-day-tours__item {
	position: relative;
	flex: 0 0 calc((100% - 4.5rem) / 4);
	display: flex;
	flex-direction: column;
}

.c-day-tours__media {
	position: relative;
	aspect-ratio: 287 / 305;
	overflow: hidden;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	flex: none;
}

.c-day-tours__pin {
	position: absolute;
	top: -1.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 57px;
	height: 57px;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-day-tours__item:hover .c-day-tours__pin {
	transform: translateX(-50%) translateY(50px);
}

.c-day-tours__item img:not(.c-day-tours__pin) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transition: transform 0.5s ease;
}

.c-day-tours__item:hover img:not(.c-day-tours__pin) {
	transform: scale(1.05);
}

.c-day-tours__caption {
	position: relative;
	z-index: 2;
	margin: -2rem 0 0;
	background: var(--color-sage-dark);
	color: var(--color-white);
	text-align: center;
	padding: 1.75rem 1.1rem 1.75rem;
	border-radius: 1.75rem 1.75rem var(--radius-md) var(--radius-md);
	box-shadow: 0 12px 24px rgba(30, 40, 15, 0.18);
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Title takes the free space (centred in it) so every card's button lands
   on the same baseline, whether the title wraps to 2 or 3 lines. */
.c-day-tours__caption-title {
	flex: 1;
	display: flex;
	align-items: center;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.4;
	font-weight: 600;
}

.c-day-tours__caption .c-btn {
	min-width: 7.5rem;
	min-height: 2.1rem;
	padding: 0.45em 1.6em;
	font-size: 0.95rem;
}

/* ==========================================================================
   Packages
   ========================================================================== */

.c-packages {
	padding-block: 5rem;
}

.c-packages__list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.c-packages__item {
	position: relative;
	transition: transform 0.35s ease;
}

.c-packages__item:hover,
.c-packages__item:focus-within {
	transform: translateY(-6px);
}

.c-packages__photo-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1200 / 340;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.c-packages__photo {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.c-packages__item:hover .c-packages__photo,
.c-packages__item:focus-within .c-packages__photo {
	transform: scale(1.08);
}

.c-packages__card {
	/* Per the UI: a tall white panel inset ~15px from the photo's edges. */
	position: absolute;
	top: 15px;
	bottom: 15px;
	right: 15px;
	z-index: 2;
	width: clamp(300px, 31%, 380px);
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2vw, 1.6rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.14);
	transition: box-shadow 0.35s ease;
}

.c-packages__item--left .c-packages__card {
	right: auto;
	left: 15px;
}

.c-packages__card .c-btn {
	align-self: flex-start;
	margin-top: 0.5rem;
}

.c-packages__item:hover .c-packages__card,
.c-packages__item:focus-within .c-packages__card {
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.25);
}

.c-packages__card-title {
	font-size: var(--step-h3);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-heading);
}

.c-packages__card-text {
	color: var(--color-text);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.c-testimonials {
	position: relative;
	padding-block: 5rem;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.c-testimonials__inner {
	position: relative;
}

.c-testimonials__pin {
	position: absolute;
	z-index: 2;
	animation: pulsePinFloat 4s ease-in-out infinite;
}

@keyframes pulsePinFloat {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-testimonials__pin {
		animation: none;
	}
}

.c-testimonials__pin--1 {
	left: 27%;
	top: -1.5rem;
	animation-delay: 0s;
}

.c-testimonials__pin--2 {
	left: 22%;
	top: 2.5rem;
	animation-delay: 1.3s;
}

.c-testimonials__pin--3 {
	right: 12%;
	top: -0.5rem;
	animation-delay: 2.6s;
}

.c-testimonials__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
	position: relative;
	z-index: 1;
}

.c-testimonials__card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: 2rem 1.75rem 1.75rem;
	box-shadow: 0 20px 40px rgba(60, 60, 30, 0.08);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.c-testimonials__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 44px rgba(60, 60, 30, 0.14);
}

.c-testimonials__avatar {
	width: 65px;
	height: 65px;
	border-radius: 999px;
	object-fit: cover;
	margin-bottom: 1rem;
}

.c-testimonials__name {
	color: var(--color-sage-dark);
	font-weight: 600;
	margin-bottom: 0.15rem;
}

.c-testimonials__date {
	color: #9a9a9a;
	font-size: 0.85rem;
	margin-bottom: 1rem;
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.c-newsletter {
	padding-top: 3rem;
}

.c-newsletter__inner {
	position: relative;
	z-index: 3;
	max-width: calc(var(--container-width) - 6rem);
	background: linear-gradient(90deg, var(--color-sage-dark) 0%, var(--color-sage-deep) 100%);
	border: 1px solid var(--color-sage-light);
	border-radius: var(--radius-lg);
	display: grid;
	/* B021: per the UI the traveller photo fills the card's full height
	   and runs flush to its right edge (only the hat rises above it), so
	   the media column is wider and the shared __inner side padding —
	   which left a strip of green to the right of the photo — is off. */
	grid-template-columns: minmax(280px, 1fr) minmax(240px, 600px);
	padding-inline: 0;
	align-items: end;
	color: var(--color-white);
}

.c-newsletter__copy {
	padding: 4.25rem clamp(1.5rem, 5vw, 4.75rem);
}

.c-newsletter__title {
	font-size: clamp(1.25rem, 1rem + 1.3vw, 2.1rem);
	white-space: nowrap;
	margin-bottom: 0.6rem;
}

.c-newsletter__text {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 1.25rem;
}

.c-newsletter__form {
	display: flex;
	gap: 0.75rem;
	max-width: 30rem;
}

.c-newsletter__input {
	flex: 1;
	min-width: 0;
	padding: 0.85em 1.2em;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
}

.c-newsletter__success {
	max-width: 30rem;
	padding: 0.9rem 1.25rem;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	animation: pulseRevealUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.c-footer__credit {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.c-footer__credit:hover {
	color: var(--color-white);
}

.c-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.c-newsletter__media {
	position: relative;
	z-index: 2;
	/* Decorative cutout PNG has transparent padding above the artwork; its
	   hit-box would otherwise sit on top of the form (negative margin pulls
	   it up over the copy column) and swallow clicks meant for Subscribe. */
	pointer-events: none;
}

.c-newsletter__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	margin-top: -5.5rem;
	/* Round the photo's bottom-right corner to match the card's, without
	   clipping the hat that pops out above the card's top edge. */
	clip-path: inset(-10rem 0 0 0 round 0 0 var(--radius-lg) 0);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.c-footer {
	position: relative;
	z-index: 1;
	margin-top: -3rem;
	padding-top: 7rem;
	background: linear-gradient(90deg, var(--color-sage-dark) 0%, var(--color-sage-deep) 100%);
	color: var(--color-white);
}

.c-footer__inner {
	/* Brand block on the left; the three link columns sit together
	   against the right margin, per the UI. */
	display: grid;
	grid-template-columns: minmax(260px, 1fr) auto auto auto;
	gap: 2.5rem clamp(2.5rem, 6vw, 5.5rem);
	padding-bottom: 3rem;
}

.c-footer__logo {
	display: flex;
	align-items: center;
	margin-bottom: 2rem;
}

.c-footer__logo-img {
	width: auto;
	height: 130px;
	object-fit: contain;
}

.c-footer__heading {
	font-size: 1.15rem;
	margin-bottom: 0.75rem;
}

.c-footer__text {
	max-width: 26em;
	color: rgba(255, 255, 255, 0.85);
}

.c-footer__col-title {
	font-size: 1.15rem;
	margin-bottom: 1rem;
}

.c-footer__list li {
	margin-bottom: 0.6rem;
}

.c-footer__list a:hover {
	text-decoration: underline;
}

.c-footer__contact p {
	margin-bottom: 0.75rem;
}

.c-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	/* Extra bottom room so the fixed language / WhatsApp buttons never sit
	   on top of the copyright and legal links at the end of the page. */
	padding-block: 1.5rem 5.5rem;
}

.c-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.c-footer__copy {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.c-footer__legal {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9rem;
}

/* ==========================================================================
   Back to top
   ========================================================================== */

.c-back-to-top {
	/* Right-hand side, stacked above the fixed WhatsApp button — the
	   bottom-left corner is taken by the fixed language switcher. */
	position: fixed;
	right: 4rem;
	bottom: 9rem;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--color-sage-dark);
	color: var(--color-white);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.c-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.c-back-to-top:hover,
.c-back-to-top:focus-visible {
	background: var(--color-sage);
}

@media (max-width: 768px) {
	.c-back-to-top {
		right: 2.6rem;
		bottom: 7.5rem;
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   Page hero (interior pages, e.g. About Us)
   ========================================================================== */

.c-page-hero {
	position: relative;
	min-height: 36rem;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	padding: 8rem var(--container-pad) 5rem;
	overflow: hidden;
}

.c-page-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(15, 20, 14, 0.55) 0%, rgba(15, 20, 14, 0.18) 35%, rgba(15, 20, 14, 0.2) 65%, rgba(15, 20, 14, 0.55) 100%);
	pointer-events: none;
}

.c-page-hero__title {
	position: relative;
	z-index: 2;
	max-width: var(--container-width);
	width: 100%;
	margin-inline: auto;
	margin-bottom: 1.5rem;
	color: var(--color-white);
	font-family: var(--font-condensed);
	font-weight: 300;
	font-size: var(--step-page-hero);
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.c-page-hero--search {
	padding-bottom: 6.5rem;
}

.c-page-hero__search-wrap {
	position: relative;
	z-index: 2;
	max-width: var(--container-width);
	width: 100%;
	margin-inline: auto;
}

.c-page-hero--search .c-page-hero__title {
	max-width: none;
	width: auto;
	margin-inline: 0;
	margin-bottom: 0;
}

.c-page-hero__lang {
	position: fixed;
	left: 2.5rem;
	bottom: 2.5rem;
	z-index: 95;
}

/* The actual dropdown is a native <select class="gt_selector"> injected by
   the GTranslate plugin into .pulse-lang-widget (see functions.php /
   pulse_lang_switcher()); style it to look like the pill badge this used
   to be a fake button for. Shared by the homepage hero (.c-hero__lang)
   and every interior-page hero (.c-page-hero__lang). */
.c-hero__lang .pulse-lang-widget,
.c-page-hero__lang .pulse-lang-widget {
	display: flex;
}

.c-hero__lang select.gt_selector,
.c-page-hero__lang select.gt_selector {
	appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231c1c1c' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
	border: 0;
	padding: 0.5rem 2.1rem 0.5rem 0.9rem;
	border-radius: 999px;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: 0.9rem;
	cursor: pointer;
}

.c-page-hero__whatsapp {
	position: fixed;
	right: 2.5rem;
	bottom: 2.5rem;
	z-index: 95;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	transition: transform 0.25s ease;
}

.c-page-hero__whatsapp:hover,
.c-page-hero__whatsapp:focus-visible {
	transform: scale(1.08);
}

.c-page-hero__whatsapp::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 48px;
	height: 48px;
	margin-left: -24px;
	border-radius: 50%;
	background: var(--color-whatsapp);
	opacity: 0.55;
	z-index: -1;
	animation: pulseWhatsappPing 2.2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.c-page-hero__whatsapp::before {
		animation: none;
		display: none;
	}
}

.c-page-hero__whatsapp img {
	width: 48px;
	height: auto;
}

.c-page-hero__whatsapp-tip {
	background: var(--color-white);
	color: var(--color-black);
	font-size: 0.85rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.c-page-hero__divider {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: auto;
	z-index: 2;
}

/* ==========================================================================
   About page — intro
   ========================================================================== */

.c-about-intro {
	padding-block: 5rem;
}

.c-about-intro__inner {
	display: grid;
	grid-template-columns: minmax(280px, 627px) 1fr;
	align-items: center;
	gap: 2.5rem;
}

/* UI "stepped" photo: two overlapping rounded blocks (a raised tab on the
   top-right, a dropped tab on the bottom-left) cut with an SVG mask, over
   a sage-gradient frame of the same shape peeking out top/right/bottom.
   Masking (rather than a pre-shaped PNG) keeps any photo uploaded later
   via the CMS (About page / Tailor Made intro image) working as-is. The
   box keeps the mask's own aspect ratio so its corners never distort. */
.c-about-intro__media {
	position: relative;
	aspect-ratio: 627 / 447;
	margin: 21px 10px 11px 0;
}

.c-about-intro__media::before {
	content: "";
	position: absolute;
	inset: -21px -10px -11px 0;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20627%20447'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='0.35'%3E%3Cstop%20offset='0'%20stop-color='%23a3c476'%20stop-opacity='0.15'/%3E%3Cstop%20offset='0.45'%20stop-color='%23a3c476'%20stop-opacity='0.8'/%3E%3Cstop%20offset='1'%20stop-color='%236f8c41'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20fill='url(%23g)'%20d='M0%20121Q0%2081%2040%2081L222%2081Q262%2081%20262%2041L262%2040Q262%200%20302%200L587%200Q627%200%20627%2040L627%20325Q627%20365%20587%20365L425%20365Q385%20365%20385%20405L385%20407Q385%20447%20345%20447L40%20447Q0%20447%200%20407Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	pointer-events: none;
}

.c-about-intro__media img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20627%20447'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%20121Q0%2081%2040%2081L222%2081Q262%2081%20262%2041L262%2040Q262%200%20302%200L587%200Q627%200%20627%2040L627%20325Q627%20365%20587%20365L425%20365Q385%20365%20385%20405L385%20407Q385%20447%20345%20447L40%20447Q0%20447%200%20407Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20627%20447'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%20121Q0%2081%2040%2081L222%2081Q262%2081%20262%2041L262%2040Q262%200%20302%200L587%200Q627%200%20627%2040L627%20325Q627%20365%20587%20365L425%20365Q385%20365%20385%20405L385%20407Q385%20447%20345%20447L40%20447Q0%20447%200%20407Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.c-package-intro__media {
	/* UI: wide, tall photo with big rounded corners (592 × 423). */
	border-radius: 4.5rem;
	overflow: hidden;
	aspect-ratio: 592 / 423;
}

.c-package-intro__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.c-about-intro__title {
	font-size: var(--step-h2);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-heading);
	margin-bottom: 1.25rem;
}

.c-package-tagline {
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
	line-height: 1.35;
	color: var(--color-heading);
	margin-bottom: 1.25rem;
}

.c-about-intro__text {
	max-width: 46em;
}

/* ==========================================================================
   About page — Values / Vision / Mission
   ========================================================================== */

.c-about-values {
	max-width: var(--container-width);
	margin-inline: auto;
	padding: 0 var(--container-pad) 5rem;
}

.c-about-values__panel {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, var(--color-sage) 0%, var(--color-sage-dark) 100%);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 4vw, 3.5rem);
	color: var(--color-white);
}

/* Leaf-mark watermark shown twice across the panel (left and right
   halves), per the UI — supplied as a white vector. */
.c-about-values__panel::before,
.c-about-values__panel::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	background: url("../images/about-values-logo-bg.svg") no-repeat center / contain;
	opacity: 0.12;
	pointer-events: none;
}

.c-about-values__panel::before {
	left: 0;
}

.c-about-values__panel::after {
	right: 0;
}

.c-about-values__panel > * {
	position: relative;
}

.c-about-values__title {
	font-size: var(--step-h3);
	margin-bottom: 0.75rem;
}

.c-about-values__intro {
	max-width: 46em;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 2rem;
}

.c-about-values__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2rem 1.5rem;
}

.c-about-values__item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.c-about-values__icon {
	width: 42px;
	height: 42px;
	object-fit: contain;
	object-position: left bottom;
}

.c-about-values__item-title {
	font-size: 1.05rem;
	line-height: 1.3;
}

.c-about-values__item-text {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

.c-about-values__split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.c-about-values__card {
	background: var(--color-white);
	border: 1px solid var(--color-sage);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.c-about-values__card-title {
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-heading);
	margin-bottom: 0.75rem;
}

.c-about-values__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

/* ==========================================================================
   Activities page — intro
   ========================================================================== */

.c-activities-intro {
	padding-top: 4rem;
}

.c-activities-intro__inner {
	/* B041: same width as the card grids below so the heading and copy
	   start and end exactly where the cards do. */
	max-width: var(--container-width);
}

.c-activities-intro__title {
	font-size: var(--step-h3);
	color: var(--color-heading);
	margin-bottom: 0.75rem;
}

/* ==========================================================================
   Activities page — card list
   ========================================================================== */

.c-activities-list {
	padding-block: 3rem 5rem;
}

.c-activities-list__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Stretch so both cards in a row share one height and their bottom
	   edges line up (the UI's even grid), whatever each one's content. */
	align-items: stretch;
	gap: 3rem 1rem;
	padding-top: 1.25rem;
}

/* UI card: white, thin sage outline, photo inset 4px with its own rounded
   corners, and the title as a sage pill tab straddling the top edge. */
.c-activities-list__card {
	position: relative;
	background: var(--color-white);
	border: 1px solid var(--color-sage);
	border-radius: var(--radius-lg);
	padding: 4px;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.c-activities-list__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 36px rgba(30, 40, 15, 0.12);
}

.c-activities-list__media {
	position: relative;
	aspect-ratio: 580 / 190;
	display: block;
	flex: none;
	width: 100%;
	overflow: hidden;
	border-radius: calc(var(--radius-lg) - 4px);
}

.c-activities-list__cta {
	align-self: flex-start;
	margin-top: 1.25rem;
}

.c-activities-list__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.c-activities-list__card:hover .c-activities-list__photo {
	transform: scale(1.06);
}

.c-activities-list__badge {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -55%);
	min-width: 37%;
	max-width: calc(100% - 3rem);
	background: var(--color-sage);
	color: var(--color-white);
	font-size: 1.05rem;
	line-height: 1.3;
	text-align: center;
	padding: 0.45rem 1.75rem;
	border-radius: 999px;
}

.c-activities-list__body {
	padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.5rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.c-activities-list__tagline {
	color: var(--color-heading);
	font-size: 0.95rem;
	margin: 0 0 0.75rem;
}

.c-activities-list__text p {
	margin: 0;
}

.c-activities-list__divider {
	border: none;
	border-top: 1px solid var(--color-sage);
	margin: 1.25rem 0;
}

.c-activities-list__season {
	font-size: 0.95rem;
	color: var(--color-text);
	margin: 0 0 1rem;
}

.c-activities-list__season span {
	color: var(--color-heading);
	margin-right: 0.35rem;
}

.c-activities-list__highlights-title {
	color: var(--color-heading);
	margin: 0 0 0.75rem;
}

.c-activities-list__highlights {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.c-activities-list__highlights li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.95rem;
}

.c-activities-list__highlights svg {
	flex: none;
	margin-top: 0.2rem;
	color: var(--color-sage);
}

/* B041 (revised): the client asked for the text blocks to line up with the
   cards, not for justified text — body copy is plain left-aligned. */
.c-activities-list__text,
.c-activities-intro__inner p,
.c-destinations-intro__inner p,
.c-destcat__text,
.c-packcat__text,
.c-package-list__text,
.c-day-tour-single__text,
.c-about-intro__text,
.c-about-values__card-text,
.c-about-values__item-text,
.c-packages__card-text,
.c-testimonials__text {
	text-align: left;
}

/* ==========================================================================
   Day Tours list — UI card: photo with an outlined white panel overlapping
   its bottom edge (title, duration, pickup points, CTA)
   ========================================================================== */

.c-tour-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 1.25rem 1rem;
}

.c-tour-card {
	display: flex;
	flex-direction: column;
}

.c-tour-card__media {
	position: relative;
	aspect-ratio: 388 / 285;
	border-radius: var(--radius-lg) var(--radius-lg) 1.5rem 1.5rem;
	overflow: hidden;
	flex: none;
}

.c-tour-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.c-tour-card:hover .c-tour-card__photo {
	transform: scale(1.05);
}

.c-tour-card__body {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: -2.25rem 0.5rem 0;
	padding: 1.4rem 1.6rem 1.6rem;
	background: var(--color-white);
	border: 1px solid var(--color-sage);
	border-radius: var(--radius-md);
	transition: box-shadow 0.35s ease;
}

.c-tour-card:hover .c-tour-card__body {
	box-shadow: 0 18px 30px rgba(30, 40, 15, 0.12);
}

.c-tour-card__title {
	color: var(--color-heading);
	font-size: 1.1rem;
	line-height: 1.35;
	margin-bottom: 0.4rem;
}

.c-tour-card__meta {
	display: flex;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.35;
	color: var(--color-black);
}

.c-tour-card__label {
	flex: none;
	color: var(--color-heading);
}

.c-tour-card__cta {
	align-self: flex-start;
	/* Pushes to the card bottom so every button in a row lines up. */
	margin-top: auto;
	transform: translateY(0.9rem);
}

.c-tour-card__cta:hover,
.c-tour-card__cta:focus-visible {
	transform: translateY(calc(0.9rem - 3px));
}

.c-activities-list__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 3rem;
}

/* ==========================================================================
   Destinations landing page
   ========================================================================== */

.c-destinations-intro {
	padding-top: 4rem;
}

.c-destinations-intro__inner {
	/* B041: aligned to the card grid edges (see .c-activities-intro__inner). */
	max-width: var(--container-width);
}

.c-destinations-intro__title {
	font-size: var(--step-h3);
	color: var(--color-heading);
	margin-bottom: 0.75rem;
}

.c-destcat {
	padding-block: 3rem 5rem;
}

.c-destcat__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-destcat__item {
	flex: 1 1 calc(33.333% - 1.4rem);
	min-width: 280px;
	max-width: 24rem;
}

.c-destcat__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(160deg, var(--color-sage) 0%, var(--color-sage-dark) 100%);
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.12);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.c-destcat__link:hover,
.c-destcat__link:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 25px 40px rgba(30, 40, 15, 0.22);
}

.c-destcat__media {
	position: relative;
	flex: none;
	width: 100%;
	aspect-ratio: 16 / 11;
	overflow: hidden;
}

.c-destcat__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.c-destcat__count {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: rgba(20, 26, 12, 0.55);
	backdrop-filter: blur(2px);
	color: var(--color-white);
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
}

.c-destcat__body {
	padding: 1.75rem;
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.c-destcat__title {
	font-size: 1.2rem;
}

.c-destcat__text {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
	flex: 1;
}

.c-destcat__body .c-btn {
	align-self: flex-start;
	margin-top: 0.5rem;
}

.c-destcat__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 3rem;
}

/* ==========================================================================
   Packages landing page — category cards (white, overlapping badge)
   ========================================================================== */

.c-packcat {
	padding-block: 3rem 5rem;
}

.c-packcat__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem 1rem;
	padding-top: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-packcat__item {
	flex: 1 1 calc(33.333% - 1.4rem);
	min-width: 280px;
	max-width: 24rem;
}

.c-packcat__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.3s ease;
}

.c-packcat__link:hover {
	transform: translateY(-6px);
}

/* UI: count badge straddling the photo's top edge; photo with rounded
   top; outlined white panel overlapping the photo's bottom edge. */
.c-packcat__media {
	position: relative;
	flex: none;
	width: 100%;
	aspect-ratio: 388 / 250;
	border-radius: var(--radius-lg) var(--radius-lg) 1.5rem 1.5rem;
	overflow: hidden;
}

.c-packcat__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.c-packcat__link:hover .c-packcat__media img {
	transform: scale(1.05);
}

.c-packcat__badge {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -45%);
	background: linear-gradient(90deg, var(--color-sage-dark) 0%, #8aa85a 100%);
	color: var(--color-white);
	font-size: 1rem;
	padding: 0.35rem 1.6rem;
	border-radius: 999px;
	white-space: nowrap;
}

.c-packcat__body {
	position: relative;
	z-index: 1;
	flex: 1;
	margin: -2rem 0.5rem 0;
	padding: 1.5rem 1.6rem 1.25rem;
	background: var(--color-white);
	border: 1px solid var(--color-sage);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.c-packcat__title {
	color: var(--color-heading);
	font-size: 1.1rem;
}

.c-packcat__text {
	font-size: 1rem;
	color: var(--color-text);
	flex: 1;
}

.c-packcat__body .c-btn {
	align-self: flex-start;
	margin-top: 0.5rem;
}

/* ==========================================================================
   Destination category page — "other categories" nav strip
   ========================================================================== */

.c-destcat-nav {
	background: linear-gradient(90deg, #3f5a1c 0%, var(--color-sage) 60%, #8aa85a 100%);
	padding-block: 1.9rem;
}

.c-destcat-nav__list {
	max-width: 1040px;
	margin-inline: auto;
	padding-inline: var(--container-pad);
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem 0;
}

/* Thin vertical divider between items, as in the UI. */
.c-destcat-nav__item {
	padding-inline: 1.9rem;
}

.c-destcat-nav__item + .c-destcat-nav__item {
	border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.c-destcat-nav__link {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

.c-destcat-nav__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 206 / 100;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.c-destcat-nav__thumb img {
	transition: transform 0.4s ease;
}

.c-destcat-nav__link:hover .c-destcat-nav__thumb img {
	transform: scale(1.06);
}

.c-destcat-nav__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.c-destcat-nav__arrow {
	position: absolute;
	inset: auto 0.4rem 0.4rem auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-sm);
	background: rgba(163, 196, 118, 0.85);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.c-destcat-nav__link:hover .c-destcat-nav__arrow,
.c-destcat-nav__link:focus-visible .c-destcat-nav__arrow {
	background: var(--color-white);
	color: var(--color-sage-dark);
}

.c-destcat-nav__label {
	color: var(--color-white);
	font-size: 1rem;
	line-height: 1.3;
	padding-inline: 0.5rem;
}

/* ==========================================================================
   Day Tour — single page
   ========================================================================== */

.c-day-tour-single {
	padding-block: 4rem 2rem;
}

.c-day-tour-single__inner {
	display: grid;
	grid-template-columns: minmax(260px, 523px) 1fr;
	align-items: start;
	gap: 6rem;
}

.c-day-tour-single__gallery {
	position: relative;
}

.c-day-tour-single__main {
	border-radius: 5rem 5rem var(--radius-lg) var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 523 / 540;
}

.c-day-tour-single__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.c-day-tour-single__inset {
	position: absolute;
	right: -2.8rem;
	top: 12%;
	width: 45%;
	aspect-ratio: 233 / 428;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 2px solid var(--color-white);
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.2);
}

.c-day-tour-single__inset img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.c-day-tour-single__content {
	padding-top: 0.5rem;
}

.c-day-tour-single__text p {
	margin: 0 0 1rem;
}

/* ==========================================================================
   Day Tour — inclusions / exclusions
   ========================================================================== */

.c-day-tour-terms {
	padding-block: 7rem 5rem;
}

.c-day-tour-terms__card {
	position: relative;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 2.5rem);
	/* Two list columns on the left; the right third is left for the
	   travellers cut-out, which rises out of the top of the card. */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(240px, 0.95fr);
	gap: 2.5rem;
}

.c-day-tour-terms__people {
	position: absolute;
	right: clamp(1rem, 3vw, 3rem);
	bottom: 0;
	width: clamp(300px, 29vw, 420px);
	height: auto;
	z-index: 2;
	pointer-events: none;
}

.c-day-tour-terms__title {
	color: var(--color-heading);
	font-size: 1.2rem;
	margin-bottom: 1.25rem;
}



/* ==========================================================================
   Package category page — card list
   ========================================================================== */

.c-package-list {
	padding-block: 3rem 5rem;
}

.c-package-list--search {
	padding-bottom: 1rem;
}

.c-package-list__search-heading {
	font-size: var(--step-h3);
	color: var(--color-heading);
	text-align: center;
	margin-bottom: 2rem;
}

.c-package-list__search-empty {
	text-align: center;
	max-width: 32rem;
	margin-inline: auto;
}

.c-package-list__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-package-list__card {
	flex: 1 1 calc(33.333% - 0.7rem);
	min-width: 280px;
	max-width: 24.5rem;
	background: var(--color-white);
	border: 1px solid var(--color-sage);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.c-package-list__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 36px rgba(30, 40, 15, 0.12);
}

.c-package-list__media {
	position: relative;
	display: block;
	flex: none;
	/* UI: photo inset just 6px from the card edge (was 1rem). */
	aspect-ratio: 377 / 233;
	margin: 6px 6px 0;
	border-radius: calc(var(--radius-lg) - 6px) calc(var(--radius-lg) - 6px) var(--radius-md) var(--radius-md);
	overflow: hidden;
}

.c-package-list__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.c-package-list__body {
	padding: 1rem 1.6rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.c-package-list__title {
	color: var(--color-heading);
	font-size: 1.15rem;
	line-height: 1.3;
}

.c-package-list__meta {
	display: flex;
	gap: 1.75rem;
	color: var(--color-sage-dark);
	/* B057: Ponomar 400 / 16px / line-height 100% per the design spec. */
	font-family: "Ponomar", var(--font-display);
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
}

.c-package-list__meta span {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	text-align: center;
}

.c-package-list__meta svg {
	color: var(--color-sage);
}

.c-package-list__body .c-activities-list__divider {
	margin: 0.25rem 0 0.75rem;
}

.c-package-list__text {
	flex: 1;
	font-size: 1rem;
	margin: 0;
}

.c-package-list__text p {
	margin: 0;
}

.c-package-list__body .c-btn {
	align-self: flex-start;
	margin-top: 0.75rem;
}

/* ==========================================================================
   Package single page — hero search bar
   ========================================================================== */

.c-page-hero__search {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	max-width: 28rem;
	margin-top: 1.25rem;
	gap: 0.6rem;
}

.c-page-hero__search-input {
	flex: 1;
	min-width: 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: rgba(20, 26, 18, 0.35);
	backdrop-filter: blur(3px);
	border-radius: 999px;
	padding: 0.85em 1.2em;
	font-family: var(--font-display);
	font-size: 0.95rem;
	color: var(--color-white);
}

.c-page-hero__search-input::placeholder {
	color: rgba(255, 255, 255, 0.8);
}

.c-page-hero__search-btn {
	flex: none;
	width: 3.1rem;
	height: 3.1rem;
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-sage-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Package single page — details (Best Time/Highlights/Inclusions/Exclusions
   + Route/Itinerary)
   ========================================================================== */

.c-package-details {
	padding-block: 1rem 5rem;
}

.c-package-details__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

.c-package-details__panel {
	background: linear-gradient(160deg, #8aa85a 0%, var(--color-sage) 45%, var(--color-sage-dark) 100%);
	/* UI: thick white ring around each panel. */
	border: 5px solid var(--color-white);
	border-radius: 4.5rem;
	padding: clamp(2rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.5rem);
	color: var(--color-white);
	/* Taller panels per the UI (~850px) so more of each list shows. */
	height: min(53rem, 92vh);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.c-package-details__scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding-right: 0.75rem;
	padding-block: 0.5rem;
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 1.5rem, black calc(100% - 1.5rem), transparent);
	mask-image: linear-gradient(to bottom, transparent, black 1.5rem, black calc(100% - 1.5rem), transparent);
}

.c-package-details__best {
	font-size: 0.95rem;
	margin: 0 0 0.25rem;
}

.c-package-details__best span {
	font-weight: 600;
}

.c-package-details__best-note {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 1.5rem;
}

.c-package-details__heading {
	font-size: 1.1rem;
	margin: 1.75rem 0 1rem;
}

.c-package-details__scroll > .c-package-details__heading:first-child {
	margin-top: 0;
}

.c-package-details__list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.c-package-details__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.92rem;
}

.c-package-details__list svg {
	flex: none;
	margin-top: 0.2rem;
	color: var(--color-white);
}

.c-package-details__itinerary-head {
	/* UI: title + Days/Nights grouped together in a translucent bar. */
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-bottom: 1.75rem;
	padding: 1.1rem 2rem;
	background: rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-lg);
}

.c-package-details__itinerary-head .c-package-details__heading {
	margin: 0;
}

.c-package-details__stats {
	display: flex;
	gap: 2.5rem;
}

.c-package-details__stats span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8rem;
}

.c-package-details__route-label {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 0.35rem;
}

.c-package-details__route {
	font-size: 0.95rem;
	margin: 0 0 1.5rem;
}

.c-package-details__days {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding-right: 0.75rem;
	padding-block: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 1.5rem, black calc(100% - 1.5rem), transparent);
	mask-image: linear-gradient(to bottom, transparent, black 1.5rem, black calc(100% - 1.5rem), transparent);
}

.c-package-details__scroll::-webkit-scrollbar,
.c-package-details__days::-webkit-scrollbar {
	width: 6px;
}

.c-package-details__scroll::-webkit-scrollbar-track,
.c-package-details__days::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 999px;
}

.c-package-details__scroll::-webkit-scrollbar-thumb,
.c-package-details__days::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.5);
	border-radius: 999px;
}

.c-package-details__day {
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.75rem;
}

.c-package-details__day h4 {
	display: inline-block;
	min-width: 55%;
	font-size: 1rem;
	padding-bottom: 0.45rem;
	margin-bottom: 0.85rem;
	border-bottom: 2px solid rgba(255, 255, 255, 0.9);
}

.c-package-details__day p {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

/* ==========================================================================
   Responsive — tablet ≤1024px
   ========================================================================== */

/* Header switches to the hamburger/off-canvas layout on tablets too
   (portrait and landscape) — the full nav row doesn't fit below ~1200px. */
@media (max-width: 1199px) {
	.c-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(320px, 82vw);
		height: 100vh;
		background: var(--color-sage-dark);
		padding: 6rem 2rem 2rem;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
		z-index: 90;
	}

	.c-nav.is-open {
		transform: translateX(0);
	}

	.c-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.1rem;
		justify-content: flex-start;
	}

	.c-nav__submenu {
		/* The desktop rule positions this absolutely for the hover flyout;
		   left un-overridden here it stayed absolute in the off-canvas
		   panel too, so every open submenu overlapped the next item (and
		   each other) instead of pushing the list down. Static lets it
		   sit inline like a normal nested list. */
		display: block;
		position: static;
		min-width: 0;
		padding-left: 1rem;
		margin-top: 0.75rem;
		box-shadow: none;
	}

	.c-nav__submenu .c-nav__link {
		font-size: 0.95rem;
		opacity: 0.85;
		/* The desktop dropdown rule sets nowrap so a floating flyout can
		   size itself to its longest item; in the narrow off-canvas panel
		   that just pushes long category names off the edge of the screen
		   instead of wrapping them. */
		white-space: normal;
	}

	.c-header__contact {
		display: none;
	}

	/* With .c-nav taken out of flow (off-canvas panel above), the header's
	   remaining flex children — logo, social icons, toggle — would otherwise
	   just pack together at the left edge in DOM order, leaving the toggle
	   stranded mid-header instead of anchored anywhere. Group logo+toggle on
	   the left and push social to the far right so both ends are pinned. */
	.c-header__toggle {
		display: flex;
		order: 1;
		margin-left: 1rem;
	}

	.c-header__social {
		order: 2;
		margin-left: auto;
	}
}

@media (max-width: 1024px) {
	.c-about__inner {
		grid-template-columns: 1fr;
	}

	.c-values__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c-destinations__grid {
		grid-template-columns: 1fr;
	}

	.c-packages__photo-wrap {
		aspect-ratio: 16 / 10;
	}

	.c-packages__card,
	.c-packages__item--left .c-packages__card {
		/* Relative (not static) so it stacks above the photo it overlaps —
		   static let the photo paint over the card's title. */
		position: relative;
		inset: auto;
		transform: none;
		width: auto;
		margin: -3rem 1.25rem 0;
	}

	.c-testimonials__list {
		grid-template-columns: 1fr;
		max-width: 30rem;
		margin-inline: auto;
	}

	.c-testimonials__pin {
		display: none;
	}

	.c-newsletter__inner {
		grid-template-columns: 1fr;
	}

	.c-newsletter__media {
		max-height: 260px;
	}

	.c-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c-about-intro__inner {
		grid-template-columns: 1fr;
	}

	.c-about-intro__media {
		max-width: 360px;
		margin-inline: auto;
	}

	.c-package-intro__media {
		max-width: 420px;
		margin-inline: auto;
	}

	.c-about-values__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.c-about-values__split {
		grid-template-columns: 1fr;
	}

	.c-activities-list__grid {
		grid-template-columns: 1fr;
	}

	.c-destcat-nav__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c-day-tour-single__inner {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.c-day-tour-single__main {
		max-width: 26rem;
		margin-inline: auto;
	}

	.c-day-tour-terms__card {
		grid-template-columns: 1fr;
	}

	.c-day-tour-terms__people {
		display: none;
	}

	.c-package-details__grid {
		grid-template-columns: 1fr;
	}

	.c-package-details__panel {
		height: auto;
		max-height: none;
		overflow: visible;
	}

	.c-package-details__scroll,
	.c-package-details__days {
		flex: none;
		overflow-y: visible;
		max-height: none;
		padding-right: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ==========================================================================
   Responsive — mobile ≤768px
   ========================================================================== */

@media (max-width: 768px) {
	.c-hero {
		min-height: 34rem;
		padding-top: 5rem;
	}

	.c-hero__lang {
		left: 1.25rem;
		bottom: 1.25rem;
	}

	.c-hero__whatsapp {
		right: 1.25rem;
		bottom: 1.25rem;
	}

	.c-page-hero {
		min-height: 22rem;
		padding: 5rem 1.25rem 3.5rem;
	}

	.c-page-hero__lang {
		left: 1.25rem;
		bottom: 1.25rem;
	}

	.c-page-hero__whatsapp {
		right: 1.25rem;
		bottom: 1.25rem;
	}

	.c-about-values__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c-destcat__item {
		flex: 1 1 100%;
		max-width: 28rem;
	}

	.c-packcat__item {
		flex: 1 1 100%;
		max-width: 28rem;
	}

	.c-package-list__card {
		flex: 1 1 100%;
		max-width: 28rem;
	}

	.c-day-tour-single__inset {
		right: -0.75rem;
		bottom: -1.5rem;
		width: 50%;
	}

	.c-destcat-nav__list {
		grid-template-columns: 1fr;
	}

	.c-activities__head,
	.c-day-tours__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.c-activities__item,
	.c-day-tours__item {
		flex-basis: 240px;
	}

	.c-values__list {
		grid-template-columns: 1fr;
	}

	.c-newsletter__form {
		flex-direction: column;
	}

	.c-footer__inner {
		grid-template-columns: 1fr;
	}

	.c-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Tailor Made page — "How It Works" steps panel
   ========================================================================== */

.c-tailor-steps {
	padding-block: 5rem;
}

.c-tailor-steps__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.c-tailor-steps__panel {
	background: linear-gradient(120deg, var(--color-sage) 0%, var(--color-sage-dark) 100%);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 4vw, 3.5rem);
	color: var(--color-white);
}

.c-tailor-steps__title {
	font-size: var(--step-h2);
	text-align: center;
	margin-bottom: 2.75rem;
}

.c-tailor-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2.5rem 2rem;
}

.c-tailor-steps__item {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: transform 0.3s ease;
}

.c-tailor-steps__item:hover {
	transform: translateY(-4px);
}

.c-tailor-steps__number {
	font-family: var(--font-display);
	font-size: 2.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.32);
	line-height: 1;
}

.c-tailor-steps__item-title {
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.c-tailor-steps__item-text {
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Inquiry / contact forms — shared field, pill, and success styling
   (used by the Tailor Made custom inquiry form and the Contact Us form)
   ========================================================================== */

[hidden] {
	display: none !important;
}

.c-inquiry {
	padding-block: 5rem;
}

.c-inquiry__inner {
	max-width: 920px;
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.c-inquiry__form {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.c-inquiry__fieldset {
	background: var(--color-white);
	border: 0;
	border-radius: var(--radius-md);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: 0 12px 30px rgba(30, 40, 15, 0.07);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.c-inquiry__legend {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	font-family: var(--font-display);
	font-size: var(--step-h3);
	color: var(--color-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0;
	margin-bottom: 0.25rem;
}

.c-inquiry__legend-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-sage);
	color: var(--color-white);
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	flex-shrink: 0;
}

.c-inquiry__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem 1.5rem;
}

.c-inquiry__grid--four {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.c-inquiry__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.c-inquiry__field--full {
	grid-column: 1 / -1;
}

.c-inquiry__field label,
.c-inquiry__pill-label-static {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.c-inquiry__field label em,
.c-inquiry__pill-label-static em {
	text-transform: none;
	font-weight: 400;
	font-style: normal;
	color: var(--color-text);
	letter-spacing: 0;
	font-size: 0.8rem;
}

.c-inquiry__input {
	width: 100%;
	border: 1.5px solid rgba(111, 140, 65, 0.25);
	border-radius: var(--radius-sm);
	background: var(--color-cream);
	padding: 0.85rem 1.1rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--color-black);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.c-inquiry__input::placeholder {
	color: rgba(87, 87, 87, 0.5);
}

.c-inquiry__input:focus {
	outline: none;
	border-color: var(--color-sage);
	background: var(--color-white);
	box-shadow: 0 0 0 3px rgba(111, 140, 65, 0.15);
}

.c-inquiry__input:user-invalid {
	border-color: #c0503e;
}

.c-inquiry__date-range {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* CF7 wraps each input in a span, so the span (not the input) is the flex
   item — it has to be the one allowed to shrink, or the date inputs keep
   their intrinsic width and spill over the neighbouring field. */
.c-inquiry__date-range .wpcf7-form-control-wrap {
	min-width: 0;
	flex: 1;
}

.c-inquiry__date-range .c-inquiry__input {
	min-width: 0;
	width: 100%;
	flex: 1;
}

.c-inquiry__date-sep {
	flex: none;
	font-size: 0.9rem;
	color: var(--color-text);
}

.c-inquiry__textarea {
	resize: vertical;
	min-height: 7rem;
}

.c-inquiry__select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236f8c41' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	padding-right: 2.5rem;
}

.c-inquiry__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.c-inquiry__pill-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.c-inquiry__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	border: 1.5px solid rgba(111, 140, 65, 0.3);
	background: var(--color-cream);
	color: var(--color-text);
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	user-select: none;
}

.c-inquiry__pill:hover {
	border-color: var(--color-sage);
	transform: translateY(-1px);
}

.c-inquiry__pill-input:checked + .c-inquiry__pill {
	background: var(--color-sage);
	border-color: var(--color-sage);
	color: var(--color-white);
}

.c-inquiry__pill-input:focus-visible + .c-inquiry__pill {
	outline: 2px solid var(--color-sage-dark);
	outline-offset: 2px;
}

.c-inquiry__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	max-width: 60em;
}

.c-inquiry__checkbox {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.2rem;
	accent-color: var(--color-sage);
	flex-shrink: 0;
	cursor: pointer;
}

.c-inquiry__consent label {
	font-size: 0.9rem;
	color: var(--color-text);
	cursor: pointer;
}

.c-inquiry__submit-row {
	display: flex;
	justify-content: center;
}

.c-inquiry__submit {
	min-width: 220px;
	cursor: pointer;
	border: 0;
}

.c-inquiry__success {
	margin-top: 3rem;
	text-align: center;
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
	box-shadow: 0 12px 30px rgba(30, 40, 15, 0.08);
	animation: pulseRevealUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.c-inquiry__success svg {
	color: var(--color-sage);
	margin-bottom: 1rem;
}

.c-inquiry__success h3 {
	font-size: var(--step-h3);
	color: var(--color-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 0.75rem;
}

.c-inquiry__success p {
	max-width: 40em;
	margin-inline: auto;
	color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
	.c-inquiry__success {
		animation: none;
	}
}

/* ==========================================================================
   Contact Us page
   ========================================================================== */


.c-contact-cards {
	/* This section now sits directly under the hero (the intro block that
	   used to separate them was removed as redundant messaging), so it
	   needs its own top breathing room instead of relying on that block's
	   bottom padding. */
	padding-block: 5rem;
}

.c-contact-cards__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.c-contact-cards__intro {
	max-width: 50rem;
	margin: 0 auto 3.5rem;
	text-align: center;
}

.c-contact-cards__title {
	font-size: var(--step-h2);
	color: var(--color-heading);
	margin-bottom: 0.5rem;
}

.c-contact-cards__lead {
	font-size: 1.2rem;
	color: var(--color-sage-dark);
	margin-bottom: 1rem;
}

.c-contact-cards__intro .c-contact-cards__text {
	margin-bottom: 0;
}

.c-contact-cards__heading {
	font-size: var(--step-h3);
	color: var(--color-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: center;
	margin-bottom: 0.5rem;
}

.c-contact-cards__text {
	max-width: 46em;
	margin: 0 auto 2rem;
	text-align: center;
	color: var(--color-text);
}

.c-contact-cards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-bottom: 3.5rem;
}

.c-contact-cards__item {
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: 2.25rem 1.5rem;
	text-align: center;
	box-shadow: 0 12px 30px rgba(30, 40, 15, 0.06);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.c-contact-cards__item:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.14);
}

.c-contact-cards__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(111, 140, 65, 0.12);
	color: var(--color-sage);
	margin-bottom: 0.5rem;
}

.c-contact-cards__item h4 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-heading);
}

.c-contact-cards__item a,
.c-contact-cards__item span:last-child {
	color: var(--color-text);
	font-size: 0.95rem;
}

.c-contact-cards__item a:hover {
	color: var(--color-sage);
}

.c-contact-cards__social {
	text-align: center;
}

.c-contact-cards__social-list {
	justify-content: center;
	margin-top: 1rem;
}

.c-contact-cards__social-list li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-sage);
	transition: transform 0.25s ease, background 0.25s ease;
}

.c-contact-cards__social-list li a:hover {
	background: var(--color-sage-dark);
	transform: translateY(-3px);
}

.c-contact-form {
	padding-block: 0 5rem;
}

.c-contact-form__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 2.5rem;
	align-items: start;
}

.c-contact-form__panel {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 4vw, 3rem);
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.08);
}

.c-contact-form__title {
	font-size: var(--step-h2);
	color: var(--color-heading);
	margin-bottom: 0.5rem;
}

.c-contact-form__text {
	color: var(--color-text);
	margin-bottom: 2rem;
}

.c-contact-form__form {
	margin-top: 0;
	gap: 1.5rem;
}

.c-contact-form__cta {
	position: sticky;
	top: 2rem;
	background: linear-gradient(120deg, var(--color-sage) 0%, var(--color-sage-dark) 100%);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 4vw, 2.75rem);
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-self: start;
	justify-content: center;
}

.c-contact-form__cta h3 {
	font-size: var(--step-h3);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.c-contact-form__cta p {
	color: rgba(255, 255, 255, 0.88);
}

.c-contact-form__cta .c-btn {
	align-self: flex-start;
	margin-top: 0.5rem;
}

@media (max-width: 1024px) {
	.c-inquiry__inner {
		max-width: 100%;
	}

	.c-contact-form__inner {
		grid-template-columns: 1fr;
	}

	.c-contact-form__cta {
		position: static;
	}
}

@media (max-width: 768px) {
	.c-inquiry__grid,
	.c-inquiry__grid--four {
		grid-template-columns: 1fr;
	}

	.c-tailor-steps__list {
		grid-template-columns: 1fr;
	}

	.c-contact-cards__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Responsive — QA fixes (tablet ≤1024px / mobile ≤768px)
   ========================================================================== */

@media (max-width: 1024px) {
	/* Carousels: three whole cards per view on tablet (none sliced). */
	.c-activities__item,
	.c-day-tours__item {
		flex-basis: calc((100% - 3rem) / 3);
	}

	.c-tour-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c-destcat-nav__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c-destcat-nav__item:nth-child(odd) {
		border-left: 0;
	}

	.c-day-tour-single__inner {
		gap: 3.5rem;
	}

	.c-day-tour-terms {
		padding-top: 3rem;
	}

	.c-day-tour-terms__card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* B072: on tablet/mobile only the bottom (itinerary) card scrolls
	   internally; the top card just shows everything at full height. */
	.c-package-details__panel--itinerary {
		height: min(40rem, 85vh);
		overflow: hidden;
	}

	.c-package-details__panel--itinerary .c-package-details__days {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		padding-right: 0.5rem;
	}

	/* B071: the traveller cut-out no longer rides up over the form. */
	.c-newsletter__media {
		max-height: none;
	}

	.c-newsletter__media img {
		/* Anchored bottom-right like desktop (B021), so the photo runs
		   into the card's corner instead of floating mid-card. */
		margin: 0 0 0 auto;
		width: min(100%, 520px);
	}

	.c-newsletter__copy {
		padding-bottom: 1.5rem;
	}
}

@media (max-width: 768px) {
	/* B067: identical side gutters on every section. */
	:root {
		--container-pad: 1.25rem;
	}

	.c-newsletter__inner {
		width: auto;
		margin-inline: var(--container-pad);
	}

	.c-newsletter__copy {
		padding: 2.25rem 1.5rem 1.25rem;
	}

	.c-newsletter__title {
		white-space: normal;
	}

	.c-activities__item,
	.c-day-tours__item {
		flex-basis: 100%;
	}

	/* B065: About illustration centred instead of bleeding off the left. */
	.c-about__media {
		margin: 0 auto;
		width: 100%;
		max-width: 26rem;
	}

	.c-about {
		padding-block: 3rem 2.5rem;
	}

	/* B066: Day Tours leaf watermark centred behind the section. */
	.c-day-tours::before {
		top: 1.5rem;
		right: auto;
		left: 50%;
		width: 80%;
		height: 60%;
		transform: translateX(-50%);
		background-position: center top;
		opacity: 0.3;
	}

	/* B069: shorter banners on phones so less of the photo is cropped
	   away at the sides (a tall, narrow box crops the most). */
	.c-page-hero {
		min-height: 19rem;
		padding-bottom: 3rem;
		/* Heroes whose subject sits off-centre set --hero-pos-mobile inline. */
		background-position: var(--hero-pos-mobile, center);
	}

	/* B064: the jagged bottom edge art is only 50px tall at 1440px wide,
	   so on phones it shrinks to a sliver and the photo showed through
	   as a thin line beneath it; keep it a readable height and overlap. */
	.c-hero__divider,
	.c-page-hero__divider {
		bottom: -2px;
		height: 36px;
		object-fit: cover;
		object-position: center top;
	}

	.c-tour-cards {
		grid-template-columns: 1fr;
	}

	.c-activities-list__grid {
		gap: 2.75rem;
	}

	.c-activities-list__badge {
		min-width: 60%;
		font-size: 0.95rem;
		padding-inline: 1.1rem;
	}

	.c-activities-list__media {
		aspect-ratio: 16 / 9;
	}

	.c-destcat-nav__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c-destcat-nav__item {
		padding-inline: 0.75rem;
	}

	/* B070: trim oversized vertical padding between blocks on phones. */
	.c-day-tour-single {
		padding-block: 2.5rem 1rem;
	}

	.c-day-tour-terms {
		padding-block: 1.5rem 3rem;
	}

	.c-day-tour-terms__card {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.c-activities-list,
	.c-package-list,
	.c-packcat,
	.c-destcat {
		padding-block: 2rem 3rem;
	}

	.c-activities-intro,
	.c-destinations-intro {
		padding-top: 2.5rem;
	}

	.c-destinations,
	.c-day-tours,
	.c-packages,
	.c-testimonials {
		padding-block: 3rem;
	}

	.c-package-details__panel {
		border-radius: var(--radius-lg);
	}

	.c-package-details__itinerary-head {
		padding: 1rem 1.25rem;
	}

	.c-hero__whatsapp-tip,
	.c-page-hero__whatsapp-tip {
		font-size: 0.78rem;
		padding: 0.3rem 0.75rem;
	}

	.c-hero__lang select.gt_selector,
	.c-page-hero__lang select.gt_selector {
		font-size: 0.8rem;
		padding: 0.4rem 1.9rem 0.4rem 0.75rem;
	}

	/* B068: legal links wrap under the copyright, clear of fixed buttons. */
	.c-footer__bottom {
		padding-bottom: 6.5rem;
	}

	.c-footer__logo-img {
		height: 100px;
	}

	.c-inquiry__date-range {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Contact Form 7 — adapts CF7's generated markup to the existing form
   design (Tailor Made inquiry, Contact Us, newsletter).
   ========================================================================== */

.wpcf7 .hidden-fields-container {
	display: none;
}

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

/* Pill groups: CF7 renders <span.wpcf7-list-item><label><input><span label> */
.c-inquiry__pills.wpcf7-form-control {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.c-inquiry__pills .wpcf7-list-item {
	margin: 0;
}

.c-inquiry__pills .wpcf7-list-item label {
	display: inline-flex;
	cursor: pointer;
}

.c-inquiry__pills .wpcf7-list-item input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.c-inquiry__pills .wpcf7-list-item-label {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	border: 1.5px solid rgba(111, 140, 65, 0.3);
	background: var(--color-cream);
	color: var(--color-text);
	font-size: 0.85rem;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	user-select: none;
}

.c-inquiry__pills .wpcf7-list-item-label:hover {
	border-color: var(--color-sage);
	transform: translateY(-1px);
}

.c-inquiry__pills input:checked + .wpcf7-list-item-label {
	background: var(--color-sage);
	border-color: var(--color-sage);
	color: var(--color-white);
}

.c-inquiry__pills input:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--color-sage-dark);
	outline-offset: 2px;
}

/* Consent checkbox */
.c-inquiry__consent .wpcf7-list-item {
	margin: 0;
}

.c-inquiry__consent .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
	font-size: 0.9rem;
	color: var(--color-text);
}

.c-inquiry__consent input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.2rem;
	accent-color: var(--color-sage);
	flex-shrink: 0;
}

/* Submit button disabled until consent is ticked (CF7 behaviour). */
.wpcf7-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.c-inquiry__submit-row {
	align-items: center;
	gap: 0.75rem;
}

/* Field errors */
.wpcf7-not-valid.c-inquiry__input,
.wpcf7-not-valid.c-newsletter__input {
	border-color: #c0503e;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	color: #b23c2a;
	font-size: 0.82rem;
}

/* Form-level message (errors / spam etc.; success uses the theme panel) */
.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 0.85rem 1.1rem;
	border: 1px solid #c0503e;
	border-radius: var(--radius-sm);
	background: #fbeeeb;
	color: #8f3020;
	font-size: 0.9rem;
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

/* Newsletter: input + button in a row, message underneath */
.c-newsletter__form {
	flex-wrap: wrap;
	align-items: flex-start;
}

.c-newsletter__form .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 0;
}

.c-newsletter__form .c-newsletter__input {
	width: 100%;
}

.c-newsletter__form .wpcf7-response-output {
	flex-basis: 100%;
}

.c-newsletter__form .wpcf7-not-valid-tip {
	color: #ffd9cf;
}

.c-newsletter__form .wpcf7-spinner {
	display: none;
}

@media (max-width: 768px) {
	.c-newsletter__form .wpcf7-form-control-wrap {
		flex: none;
		width: 100%;
	}
}

/* CF7 wraps each pill / the consent text in a <label>, which would
   otherwise inherit the uppercase field-label style above. */
.c-inquiry__field .c-inquiry__pills label,
.c-inquiry__consent .wpcf7-list-item label {
	text-transform: none;
	font-weight: 400;
	letter-spacing: 0;
	color: inherit;
	font-size: inherit;
}

.c-inquiry__consent .wpcf7-list-item label {
	font-size: 0.9rem;
	color: var(--color-text);
}

/* ==========================================================================
   B059 (client QA, round 2) — Package single, desktop & laptop only:
   the Tour Highlights panel shows everything (no inner scroll), and the
   Tour Itinerary panel is locked to the same height, scrolling inside only
   when its days don't fit. Tablet/mobile keep their existing stacked rules.
   ========================================================================== */

@media (min-width: 1025px) {
	.c-package-details__grid {
		align-items: stretch;
	}

	.c-package-details__panel {
		height: auto;
		min-height: 30rem;
	}

	.c-package-details__scroll {
		flex: none;
		overflow: visible;
		padding-right: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* contain:size stops the itinerary's own content from growing the row,
	   so the grid row takes the Highlights panel's height and this panel
	   stretches to match it; the day list then scrolls within. */
	.c-package-details__panel--itinerary {
		contain: size;
	}

	.c-package-details__panel--itinerary .c-package-details__days {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
	}
}

/* ==========================================================================
   FAQ page — questions managed in wp-admin → FAQs
   ========================================================================== */

.c-faq {
	padding-block: 2.5rem 5rem;
}

.c-faq__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.c-faq__item {
	background: var(--color-white);
	border: 1px solid rgba(111, 140, 65, 0.25);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.c-faq__item[open] {
	border-color: var(--color-sage);
	box-shadow: 0 12px 28px rgba(40, 55, 20, 0.1);
}

.c-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 1.75rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--color-heading);
}

.c-faq__question::-webkit-details-marker {
	display: none;
}

.c-faq__toggle {
	position: relative;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-sage);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.c-faq__toggle::before,
.c-faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.85rem;
	height: 2px;
	background: var(--color-white);
	transform: translate(-50%, -50%);
}

.c-faq__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 0.3s ease;
}

.c-faq__item[open] .c-faq__toggle {
	background: var(--color-btn-hover);
}

.c-faq__item[open] .c-faq__toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.c-faq__answer {
	padding: 0 1.75rem 1.5rem;
	color: var(--color-text);
	font-size: var(--step-body);
	line-height: 1.7;
}

.c-faq__answer p + p {
	margin-top: 0.75rem;
}

.c-faq .c-destcat__actions {
	margin-top: 3rem;
}

/* ==========================================================================
   Privacy Policy / plain text pages — written in the WordPress editor
   ========================================================================== */

.c-legal {
	padding-block: 4rem 5rem;
}

.c-legal__content {
	color: var(--color-text);
	font-size: var(--step-body);
	line-height: 1.75;
}

.c-legal__content > * + * {
	margin-top: 1rem;
}

.c-legal__content h2,
.c-legal__content h3 {
	margin-top: 2.25rem;
	font-family: var(--font-display);
	color: var(--color-heading);
	line-height: 1.25;
}

.c-legal__content h2 {
	font-size: var(--step-h3);
}

.c-legal__content ul,
.c-legal__content ol {
	padding-left: 1.4rem;
}

.c-legal__content ul {
	list-style: disc;
}

.c-legal__content ol {
	list-style: decimal;
}

.c-legal__content li + li {
	margin-top: 0.4rem;
}

.c-legal__content a {
	color: var(--color-sage-dark);
	text-decoration: underline;
}

.c-legal__updated {
	margin-top: 2.5rem;
	font-size: 0.9rem;
	color: var(--color-sage);
}

@media (max-width: 768px) {
	.c-faq__question {
		font-size: 1.1rem;
		padding: 1.1rem 1.25rem;
	}

	.c-faq__answer {
		padding: 0 1.25rem 1.25rem;
	}
}

/* ==========================================================================
   B067 (tablet): equal side gutters below desktop width. The Activities
   and newsletter panels are "__inner" boxes with their own background, so
   the shared container padding lands *inside* the coloured panel and the
   panel itself ran edge-to-edge once the viewport was narrower than the
   container (tablets, small laptops). Inset them by the same gutter every
   other section's content uses.
   ========================================================================== */

@media (max-width: 1319px) {
	.c-activities__inner,
	.c-newsletter__inner {
		/* calc width + auto margins (not fixed margins) so the newsletter
		   card, which also has a smaller max-width, stays centred. */
		width: calc(100% - 2 * var(--container-pad));
		margin-inline: auto;
	}
}

@media (max-width: 1024px) {
	/* About illustration on tablet/phone: its forest has a hard vertical
	   edge on the left that's meant to run off the screen (as on desktop),
	   so pin it flush to the viewport's left edge rather than centring it
	   (client feedback, overrides the earlier B065 centring). */
	.c-about__media {
		margin: 0 auto 0 calc(-1 * var(--container-pad));
		width: calc(100% + var(--container-pad));
		max-width: 40rem;
	}
}

@media (max-width: 1024px) {
	/* Values panel watermark on tablet/phone: the desktop pair of leaf
	   marks either sat squarely behind the text (tablet) or shrank to two
	   small shapes floating mid-panel (phone, where the panel is very
	   tall). Show a single mark tucked into the bottom-right corner,
	   clear of most of the copy. */
	.c-about-values__panel::before {
		display: none;
	}

	.c-about-values__panel::after {
		top: auto;
		right: -8%;
		bottom: -4%;
		width: min(95%, 480px);
		aspect-ratio: 1;
		background-position: right bottom;
		opacity: 0.2;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	/* B069: tablets crop the banner sides too — keep the off-centre
	   subject (set per hero via --hero-pos-mobile) in frame here as well. */
	.c-page-hero {
		background-position: var(--hero-pos-mobile, center);
	}
}

/* Tablet/mobile: language picker moved into the hamburger panel by
   initLangPlacement() (main.js) rather than floating over the page. */
.c-hero__lang.is-in-nav,
.c-page-hero__lang.is-in-nav {
	position: static;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 1199px) {
	/* Fallback if JS hasn't moved it yet: never float it over content. */
	.c-hero__lang:not(.is-in-nav),
	.c-page-hero__lang:not(.is-in-nav) {
		display: none;
	}
}

@media (max-width: 600px) {
	/* About values: one column on phones — two columns left ~140px-wide
	   text runs with a break every couple of words. */
	.c-about-values__list {
		grid-template-columns: 1fr;
	}
}