/* ==========================================================================
   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;

	/* 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 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85em 2em;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1;
	white-space: nowrap;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

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

.c-btn--solid {
	background: var(--color-sage);
	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;
}

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

.c-section-head__ornament {
	display: block;
	margin: 0.6rem auto 1.25rem;
}

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

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

.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 {
	right: 0;
}

.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: 1025px) {
	.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: 44rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 6rem;
	overflow: hidden;
}

.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__play,
.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__play {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	animation-delay: 0.5s;
	transition: transform 0.3s ease, background 0.3s ease;
}

.c-hero__play:hover,
.c-hero__play:focus-visible {
	transform: scale(1.1);
	background: rgba(255, 255, 255, 0.15);
}

.c-hero__play-icon {
	fill: var(--color-white);
}

.c-hero__play-icon--play {
	display: none;
}

.c-hero__play.is-paused .c-hero__play-icon--pause {
	display: none;
}

.c-hero__play.is-paused .c-hero__play-icon--play {
	display: block;
}

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

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

.c-hero__lang {
	position: absolute;
	left: 2.5rem;
	bottom: 2.5rem;
	z-index: 3;
}

.c-hero__whatsapp {
	position: absolute;
	right: 2.5rem;
	bottom: 2.5rem;
	z-index: 3;
	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(260px, 480px) 1fr;
	align-items: start;
	gap: 3rem;
}

.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: 1.25rem;
}

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

.c-values__icon {
	width: 36px;
	height: 36px;
	transition: transform 0.3s ease;
}

.c-values__item:hover .c-values__icon {
	transform: scale(1.15) rotate(-4deg);
}

.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 {
	content: "";
	position: absolute;
	top: -5%;
	right: 5%;
	width: 55%;
	height: 115%;
	background-image: url("../images/activities-bg-pattern.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.16;
	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;
	margin-bottom: 0.75rem;
}

.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__controls .c-link {
	background: var(--color-white);
	color: var(--color-sage-dark);
	border: 0;
	border-radius: 999px;
	padding: 0.7em 1.6em;
}

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

.c-activities__item {
	flex: 0 0 287px;
	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(240px, 1fr) minmax(280px, 1.15fr) minmax(260px, 1fr);
	gap: 2.5rem;
	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 {
	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 {
	content: "";
	position: absolute;
	top: -5%;
	right: 0;
	width: 22%;
	height: 100%;
	background-image: url("../images/day-tours-bg-logo.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.35;
	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: 2.5rem;
}

.c-day-tours__controls {
	display: flex;
	gap: 1rem;
	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. */
	padding-top: 2.25rem;
	margin-top: -2.25rem;
}

.c-day-tours__item {
	position: relative;
	flex: 0 0 287px;
	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.25s ease;
}

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

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

.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: center;
	gap: 1rem;
}

.c-day-tours__caption-title {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.4;
	font-weight: 600;
}

/* ==========================================================================
   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 {
	position: absolute;
	top: 50%;
	right: clamp(1.5rem, 4vw, 3.5rem);
	transform: translateY(-50%);
	z-index: 2;
	width: clamp(260px, 30%, 380px);
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	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: clamp(1.5rem, 4vw, 3.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;
	grid-template-columns: minmax(280px, 1.15fr) minmax(240px, 520px);
	align-items: end;
	color: var(--color-white);
}

.c-newsletter__copy {
	padding: 2.25rem clamp(1.5rem, 4vw, 3rem);
}

.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__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: -4.5rem;
}

/* ==========================================================================
   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 {
	display: grid;
	grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(140px, 1fr));
	gap: 2.5rem;
	padding-bottom: 3rem;
}

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

.c-footer__logo-img {
	width: auto;
	height: 64px;
	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);
	padding-block: 1.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 {
	position: fixed;
	left: 2rem;
	bottom: 2rem;
	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 {
		left: 1.25rem;
		bottom: 1.25rem;
		width: 40px;
		height: 40px;
	}
}

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

.c-page-hero {
	position: relative;
	min-height: 30rem;
	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: absolute;
	left: 2.5rem;
	bottom: 2.5rem;
	z-index: 3;
}

/* 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: absolute;
	right: 2.5rem;
	bottom: 2.5rem;
	z-index: 3;
	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(260px, 480px) 1fr;
	align-items: center;
	gap: 3rem;
}

.c-about-intro__media {
	/* Plain rounded-rect crop (matches .c-package-intro__media below)
	   instead of relying on a pre-shaped transparent PNG — so any photo
	   uploaded later via the CMS (About page / Tailor Made intro image)
	   just works without needing special corner masking. */
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

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

.c-package-intro__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.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 {
	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-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;
	filter: brightness(0) invert(1);
}

.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-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.08);
}

.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 {
	max-width: 56rem;
}

.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));
	align-items: start;
	gap: 2rem;
}

.c-activities-list__card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.08);
	overflow: hidden;
	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 26px 40px rgba(30, 40, 15, 0.14);
}

.c-activities-list__media {
	position: relative;
	aspect-ratio: 16 / 9;
	display: block;
	flex: none;
	width: 100%;
	overflow: hidden;
}

.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: 1.25rem;
	left: 1.25rem;
	right: 1.25rem;
	background: var(--color-sage-dark);
	color: var(--color-white);
	font-size: 0.95rem;
	text-align: center;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

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

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

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

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

.c-activities-list__season span {
	color: var(--color-heading);
	font-weight: 600;
}

.c-activities-list__highlights-title {
	color: var(--color-heading);
	font-weight: 600;
	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);
}

.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 {
	max-width: 56rem;
}

.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: 2rem;
	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 {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	background: var(--color-white);
	border: 1px solid var(--color-cream-soft);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.c-packcat__media {
	position: relative;
	flex: none;
	width: 100%;
	aspect-ratio: 16 / 11;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	overflow: hidden;
}

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

.c-packcat__badge {
	position: relative;
	z-index: 2;
	margin-top: -1.1rem;
	background: var(--color-sage-dark);
	color: var(--color-white);
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	padding: 0.55rem 1.25rem;
	border-radius: 999px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	white-space: nowrap;
}

.c-packcat__body {
	width: 100%;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

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

.c-packcat__text {
	font-size: 0.95rem;
	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: var(--color-sage-dark);
	padding-block: 2rem;
}

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

.c-destcat-nav__link {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.c-destcat-nav__thumb {
	position: relative;
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.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: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	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: 0.95rem;
	line-height: 1.3;
}

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

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

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

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

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

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

.c-day-tour-single__inset {
	position: absolute;
	right: -2.5rem;
	bottom: -2.5rem;
	width: 55%;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 6px 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: 4rem 5rem;
}

.c-day-tour-terms__card {
	position: relative;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.08);
	padding: clamp(1.75rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem;
}

.c-day-tour-terms__people {
	position: absolute;
	right: clamp(1.5rem, 6vw, 4rem);
	bottom: 0;
	width: clamp(220px, 20vw, 320px);
	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;
}

.c-activities-list__highlights--exclude svg {
	color: #b5533c;
}

/* ==========================================================================
   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: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-package-list__card {
	flex: 1 1 calc(33.333% - 1.4rem);
	min-width: 280px;
	max-width: 24rem;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 30px rgba(30, 40, 15, 0.08);
	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 25px 40px rgba(30, 40, 15, 0.16);
}

.c-package-list__media {
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 4 / 3;
	margin: 1rem 1rem 0;
	border-radius: 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: 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.25rem;
	color: var(--color-text);
	font-size: 0.85rem;
}

.c-package-list__meta span {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	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: 0.9rem;
}

.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, var(--color-sage) 0%, var(--color-sage-dark) 100%);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--color-white);
	height: 80vh;
	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 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

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

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

.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.12);
	border-radius: var(--radius-md);
	padding: 1.25rem 1.5rem;
}

.c-package-details__day h4 {
	font-size: 1rem;
	padding-bottom: 0.5rem;
	margin-bottom: 0.6rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

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

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

@media (max-width: 1024px) {
	.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;
	}

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

	.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 {
		position: static;
		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__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__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;
	}
}