/* =============================================================================
   Cancun VIP — main stylesheet
   Sections: tokens / fonts / base / buttons / header / hero / section heads /
   home sections / destination cards / single destination / page sections /
   reviews carousel / contact + forms / footer / utilities / responsive
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
	--cvr-cream: #faf6ee;
	--cvr-cream-deep: #f3ecdd;
	--cvr-white: #ffffff;
	--cvr-navy: #16324f;
	--cvr-navy-deep: #0d2338;
	--cvr-ink: #1d2733;
	--cvr-ink-soft: rgba(29, 39, 51, 0.72);
	--cvr-slate: #4a6478;
	--cvr-orange: #e8763a;
	--cvr-orange-deep: #d96526;
	--cvr-line: rgba(22, 50, 79, 0.14);
	/* Warm hairline + pale beige from the Figma homepage spec. */
	--cvr-line-warm: rgba(188, 174, 149, 0.15);
	--cvr-cream-pale: #fdfaf3;
	--cvr-shadow: 0 4px 14px 5px rgba(188, 174, 149, 0.15);
	--cvr-radius: 14px;
	--cvr-radius-lg: 22px;
	--cvr-font-display: "dm-serif-display", Georgia, "Times New Roman", serif;
	--cvr-font-body: "inter-18pt", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cvr-max: 1180px;
	--cvr-gutter: clamp(20px, 4vw, 40px);
	--cvr-section-pad: clamp(56px, 8vw, 100px);
}

/* ------------------------------------------------------------------- fonts */
/* Inter 18pt (400/500/700) and DM Serif Display (400) are served by the Adobe Fonts kit enqueued in inc/enqueue.php. */

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

html { overflow-x: hidden; } /* pre-Safari 16 fallback; the clip line below wins where supported */
html, body { overflow-x: clip; }

body {
	margin: 0;
	background: var(--cvr-cream);
	color: var(--cvr-ink);
	font-family: var(--cvr-font-body);
	font-size: 17px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
	font-family: var(--cvr-font-display);
	font-weight: 400;
	color: var(--cvr-navy);
	line-height: 1.15;
	margin: 0 0 0.4em;
}

p { margin: 0 0 1em; }
a { color: var(--cvr-navy); }

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

.cvr-skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 999;
	width: auto; height: auto; margin: 0; padding: 10px 16px;
	clip: auto; white-space: normal;
	background: var(--cvr-navy); color: #fff; border-radius: 6px;
}

.cvr-icon {
	width: 1em; height: 1em;
	display: inline-block;
	vertical-align: -0.12em;
	fill: none;
}

/* ----------------------------------------------------------------- buttons */
.cvr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: 500 14px/1.4 var(--cvr-font-body);
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.cvr-btn--solid {
	background: var(--cvr-orange);
	color: #fff;
	padding: 17px 32px;
	border: 0;
	border-radius: 8px;
}
.cvr-btn--solid:hover { background: var(--cvr-orange-deep); transform: translateY(-1px); }

.cvr-btn--link {
	color: var(--cvr-navy);
	padding: 10px 2px;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}
.cvr-btn--link:hover { color: var(--cvr-orange); }
.cvr-btn--link-light { color: #fff; }
.cvr-btn--link-light:hover { color: var(--cvr-orange); }

/* ------------------------------------------------------------------ header */
/* Interior pages: sticky bar with a slight frosted-glass translucency.
   The frost lives on a ::before pseudo — backdrop-filter on the header itself
   would make it the containing block for the fixed-position mobile drawer
   nested inside it, collapsing the drawer to the header's height. */
.cvr-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--cvr-line);
}
.cvr-header::before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	background: rgba(250, 246, 238, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
body.admin-bar .cvr-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .cvr-header { top: 46px; }
}

/* On the front page the header floats transparently over the hero photo,
   then takes on the interior frosted look once the visitor scrolls. */
.home .cvr-header {
	position: fixed;
	left: 0;
	right: 0;
	border-bottom-color: transparent;
	transition: border-color 0.25s ease;
}
.home .cvr-header::before {
	opacity: 0;
	transition: opacity 0.25s ease;
}
.home .cvr-header.is-scrolled { border-bottom-color: var(--cvr-line); }
.home .cvr-header.is-scrolled::before { opacity: 1; }
.home .cvr-nav__list a,
.home .cvr-header__logo-text { transition: color 0.25s ease; }
.home .cvr-header:not(.is-scrolled) .cvr-nav__list a,
.home .cvr-header:not(.is-scrolled) .cvr-nav__list > li > .cvr-nav__sub-toggle { color: #fff; }
.home .cvr-header:not(.is-scrolled) .cvr-nav__list a:hover,
.home .cvr-header:not(.is-scrolled) .cvr-nav__list .current-menu-item a,
.home .cvr-header:not(.is-scrolled) .cvr-nav__list .current_page_item a { color: var(--cvr-orange); }
/* Dropdown panels are white cards even over the hero photo. */
.home .cvr-header:not(.is-scrolled) .cvr-nav__list .sub-menu a { color: var(--cvr-ink); }
.home .cvr-header:not(.is-scrolled) .cvr-nav__list .sub-menu a:hover { color: var(--cvr-orange); }
.home .cvr-header:not(.is-scrolled) .cvr-header__logo-text { color: #fff; }
.home .cvr-header:not(.is-scrolled) .cvr-header__toggle-bar { background: #fff; }

/* True-center logo: equal 1fr sides regardless of item count per side. */
.cvr-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	max-width: 1840px;
	margin: 0 auto;
	padding: 0 var(--cvr-gutter);
	min-height: 116px;
}

.cvr-header__side {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 34px);
	min-width: 0;
}
.cvr-header__side--left { justify-content: flex-end; }
.cvr-header__side--right { justify-content: flex-start; }
.cvr-header__side--right .cvr-header__cta { margin-left: auto; }

.cvr-nav__list {
	display: flex;
	gap: clamp(14px, 2vw, 28px);
	list-style: none;
	margin: 0; padding: 0;
}

.cvr-nav__list a {
	font: 500 15px/1.4 var(--cvr-font-body);
	color: var(--cvr-ink);
	text-decoration: none;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
}
.cvr-nav__list a:hover,
.cvr-nav__list .current-menu-item a,
.cvr-nav__list .current_page_item a {
	color: var(--cvr-orange);
	border-bottom-color: var(--cvr-orange);
}

/* Dropdowns. Hover (and :focus-within, for tab users) opens the panel with no
   script; the caret button toggles .is-open for touch and click. The panel is
   pushed clear of the link, so a transparent ::before bridges the gap — the
   pointer would otherwise leave the <li> on the way down and close it. */
.cvr-nav__list li { position: relative; }

.cvr-nav__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 2px 6px 7px;
	background: none;
	border: 0;
	line-height: 0;
	color: var(--cvr-ink);
	cursor: pointer;
}
.cvr-nav__caret {
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}
.cvr-nav__list .menu-item-has-children:hover > a,
.cvr-nav__list .menu-item-has-children:hover > .cvr-nav__sub-toggle,
.cvr-nav__list .menu-item-has-children.is-open > .cvr-nav__sub-toggle { color: var(--cvr-orange); }
.cvr-nav__list .menu-item-has-children:hover > .cvr-nav__sub-toggle .cvr-nav__caret,
.cvr-nav__list .menu-item-has-children:focus-within > .cvr-nav__sub-toggle .cvr-nav__caret,
.cvr-nav__list .menu-item-has-children.is-open > .cvr-nav__sub-toggle .cvr-nav__caret {
	transform: translateY(1px) rotate(-135deg);
}

.cvr-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 80;
	min-width: 224px;
	margin: 14px 0 0;
	padding: 8px 0;
	list-style: none;
	background: var(--cvr-white);
	border-radius: 12px;
	box-shadow: 0 20px 44px -18px rgba(22, 50, 79, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.cvr-nav__list .sub-menu::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: -14px;
	height: 14px;
}
.cvr-nav__list li:hover > .sub-menu,
.cvr-nav__list li:focus-within > .sub-menu,
.cvr-nav__list li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.cvr-nav__list .sub-menu a {
	display: block;
	padding: 10px 20px;
	border-bottom: 0;
	white-space: nowrap;
	color: var(--cvr-ink);
}
.cvr-nav__list .sub-menu a:hover,
.cvr-nav__list .sub-menu .current-menu-item a,
.cvr-nav__list .sub-menu .current_page_item a {
	color: var(--cvr-orange);
	background: rgba(22, 50, 79, 0.05);
}

/* White "tab" behind the logo — hangs ~19px below the bar, over the hero.
   z-index above the mobile drawer (60) so the tab stays visible when it's open. */
.cvr-header__logo {
	position: relative;
	z-index: 70;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 144px;
	margin: 0 clamp(16px, 2vw, 34px) -19px;
	padding: 8px 12px 14px;
	background: var(--cvr-white);
	border-radius: 0 0 12px 12px;
	box-shadow: 0 10px 22px -12px rgba(22, 50, 79, 0.28);
}
.cvr-header__logo img { display: block; width: 112px; height: auto; }
.cvr-header__logo-text {
	font-family: var(--cvr-font-display);
	font-size: 24px;
	color: var(--cvr-navy);
	text-decoration: none;
}

.cvr-header__cta { flex: 0 0 auto; }

.cvr-header__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	/* Above the drawer, so the X stays visible/clickable even where the
	   admin-bar offset makes the drawer overlap the header. */
	position: relative;
	z-index: 70;
}
.cvr-header__toggle-bar {
	width: 24px; height: 2px;
	background: var(--cvr-navy);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Open state: bars fold into an X so closing is obvious. nth-of-type starts
   at 2 — the toggle's first <span> is the screen-reader label. */
.cvr-header__toggle[aria-expanded="true"] .cvr-header__toggle-bar:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
.cvr-header__toggle[aria-expanded="true"] .cvr-header__toggle-bar:nth-of-type(3) { opacity: 0; }
.cvr-header__toggle[aria-expanded="true"] .cvr-header__toggle-bar:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }

.cvr-mobile-nav[hidden] { display: none; }

.cvr-mobile-nav {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	top: 72px;
	z-index: 60;
	background: var(--cvr-navy);
	padding: 32px var(--cvr-gutter);
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow-y: auto;
}
/* Logged-in: start the drawer below the admin bar + header, not over them. */
body.admin-bar .cvr-mobile-nav { top: 104px; }
@media (max-width: 782px) {
	body.admin-bar .cvr-mobile-nav { top: 118px; }
}
.cvr-mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.cvr-mobile-nav__list a {
	display: block;
	padding: 14px 0;
	font: 500 20px/1.3 var(--cvr-font-body);
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* Drawer submenus are an accordion — no room for flyouts on a phone. */
.cvr-mobile-nav__list li { position: relative; }
.cvr-mobile-nav__list .menu-item-has-children > a { padding-right: 56px; }
.cvr-mobile-nav__list .cvr-nav__sub-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 54px;
	padding: 0;
	color: #fff;
}
.cvr-mobile-nav__list .cvr-nav__caret { width: 9px; height: 9px; }
.cvr-mobile-nav__list li.is-open > .cvr-nav__sub-toggle .cvr-nav__caret {
	transform: translateY(3px) rotate(-135deg);
}
.cvr-mobile-nav__list .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0 0 6px 18px;
}
.cvr-mobile-nav__list li.is-open > .sub-menu { display: block; }
.cvr-mobile-nav__list .sub-menu a {
	padding: 11px 0;
	font-size: 17px;
	color: rgba(255, 255, 255, 0.85);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
.cvr-mobile-nav__list .sub-menu li:last-child > a { border-bottom: 0; }
/* Scroll lock on <html>, not <body>: overflow:hidden on body makes it a scroll
   container, which un-sticks the sticky header (hiding the close toggle). */
html.cvr-nav-open { overflow: hidden; }

/* -------------------------------------------------------------------- hero */
.cvr-hero {
	position: relative;
	background: var(--cvr-navy) center / cover no-repeat;
	color: #fff;
}

/* Front page: hero starts under the floating header. */
.home .cvr-hero { padding-top: 116px; }

.cvr-hero__scrim {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(90deg, #0f4267 0%, rgba(15, 66, 103, 0) 100%);
}

.cvr-hero__inner {
	position: relative;
	max-width: var(--cvr-max);
	margin: 0 auto;
	padding: clamp(48px, 7vw, 110px) var(--cvr-gutter) clamp(56px, 8vw, 120px);
}

.cvr-hero--tall .cvr-hero__inner { padding-top: clamp(72px, 10vw, 150px); padding-bottom: clamp(72px, 10vw, 150px); }

.cvr-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font: 700 14px/1.4 var(--cvr-font-body);
	letter-spacing: 0.04em;
}
.cvr-hero__eyebrow::before {
	content: "";
	width: 36px; height: 1px;
	background: currentColor;
	opacity: 0.8;
}

.cvr-hero__title {
	color: #fff;
	font-family: var(--cvr-font-body);
	font-weight: 700;
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	max-width: 13em;
	margin: 0 0 20px;
}
.cvr-hero__title em {
	font-family: var(--cvr-font-display);
	font-style: normal;
	font-weight: 400;
	background: linear-gradient(180deg, #ede0c8 0%, var(--cvr-orange) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	/* Each wrapped fragment gets its own background box. Without this, Safari
	   (through 13) paints a wrapped inline's second line as a continuation of
	   the first and the first letters on that line come out blank. Visually
	   neutral elsewhere: the gradient is vertical, so per-line and whole-box
	   positioning look the same. */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: transparent;
}

.cvr-hero__text {
	max-width: 34em;
	font-size: 16px;
	line-height: 1.8;
	opacity: 0.95;
	margin: 0 0 30px;
}

.cvr-hero__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.cvr-breadcrumb-bar {
	background: var(--cvr-cream);
	border-bottom: 1px solid var(--cvr-line);
}
.cvr-breadcrumb {
	max-width: var(--cvr-max);
	margin: 0 auto;
	padding: 10px var(--cvr-gutter);
	font-size: 13px;
	color: var(--cvr-ink-soft);
}
.cvr-breadcrumb a { color: var(--cvr-orange); text-decoration: none; }
.cvr-breadcrumb a:hover { text-decoration: underline; }
.cvr-breadcrumb__sep { opacity: 0.6; padding: 0 2px; }

/* ----------------------------------------------------------- section heads */
.cvr-eyebrow {
	font: 700 14px/1.5 var(--cvr-font-body);
	color: var(--cvr-orange);
	letter-spacing: 0.02em;
	margin: 0 0 6px;
}

.cvr-section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.cvr-section-head--left { margin-left: 0; text-align: left; }
.cvr-section-head--center { text-align: center; }

.cvr-section-head__title {
	font-size: clamp(28px, 3vw, 38px);
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.cvr-section-head__title em { font-style: normal; color: var(--cvr-orange); }
.cvr-section-head__sub { color: var(--cvr-ink-soft); font-size: 16px; margin: 0; }

.cvr-section-head--light .cvr-section-head__title { color: #fff; }
.cvr-section-head--light .cvr-section-head__sub { color: rgba(255, 255, 255, 0.78); }

/* ----------------------------------------------------------- generic layout */
.cvr-section { padding: var(--cvr-section-pad) var(--cvr-gutter); }
.cvr-section__inner { max-width: var(--cvr-max); margin: 0 auto; }

/* ------------------------------------------------------------ home welcome */
.cvr-welcome {
	background:
		radial-gradient(#FEFCF7, rgba(250, 246, 238, 0.9)),
		var(--cvr-welcome-bg, url("../img/welcome-bg.jpg")) center / cover no-repeat,
		var(--cvr-cream);
	padding: var(--cvr-section-pad) var(--cvr-gutter);
	text-align: center;
}
.cvr-welcome__inner { max-width: 720px; margin: 0 auto; }
.cvr-welcome__title { font-size: clamp(28px, 3vw, 38px); }
.cvr-welcome__text { color: var(--cvr-ink-soft); }
.cvr-welcome__attribution { margin-top: 26px; font-family: var(--cvr-font-display); font-weight: 400; font-size: 22px; color: #1e6091; }
.cvr-welcome__attribution-sub { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0.13em; color: var(--cvr-ink-soft); }

/* -------------------------------------------------------------- offer strip */
.cvr-stats {
	background: var(--cvr-white);
	padding: var(--cvr-section-pad) var(--cvr-gutter);
}
.cvr-stats__grid {
	max-width: var(--cvr-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 4vw, 56px);
	text-align: center;
}
.cvr-stats__item {
	position: relative;
	padding: 0 clamp(4px, 2vw, 24px);
}
.cvr-stats__item + .cvr-stats__item::before {
	content: "";
	position: absolute;
	left: calc(-1 * clamp(12px, 2vw, 28px));
	top: 10%;
	height: 80%;
	width: 1px;
	background: var(--cvr-line);
}
.cvr-stats__icon {
	display: inline-flex;
	width: 110px; height: 96px;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	color: var(--cvr-orange);
	background: url('data:image/svg+xml,%3Csvg%20width%3D%22110%22%20height%3D%2296%22%20viewBox%3D%220%200%20110%2096%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M110%2054.5C110%2082.6665%2078.6665%2095.5%2050.5%2095.5C22.3335%2095.5%200%2073.6665%200%2045.5C0%2017.3335%2030.8335%200%2059%200C87.1665%200%20110%2026.3335%20110%2054.5Z%22%20fill%3D%22%23FDFAF3%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat;
}
.cvr-stats__icon .cvr-icon { width: 60px; height: 60px; }
.cvr-stats__headline {
	font: 400 clamp(28px, 3.4vw, 44px)/1.2 var(--cvr-font-display);
	color: var(--cvr-orange);
	margin: 0;
}
.cvr-stats__title {
	font: 700 16px/1.4 var(--cvr-font-body);
	color: var(--cvr-navy);
	margin: 2px 0 10px;
}
.cvr-stats__text { font-size: 14px; color: var(--cvr-ink-soft); max-width: 300px; margin: 0 auto; }

/* -------------------------------------------------------------- CTA banner */
.cvr-cta-banner { padding: clamp(32px, 5vw, 64px) var(--cvr-gutter); }

.cvr-cta-banner__inner {
	position: relative;
	overflow: hidden;
	max-width: 1448px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 4vw, 56px);
	padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 72px);
	background:
		linear-gradient(90deg, rgba(16, 42, 66, 0.97) 0%, rgba(16, 42, 66, 0.88) 50%, rgba(20, 48, 76, 0.68) 100%),
		var(--cvr-cta-bg, url("../img/cta-water.jpg")) right center / cover no-repeat,
		var(--cvr-navy);
	border-radius: var(--cvr-radius-lg);
	color: #fff;
}

.cvr-cta-banner__art {
	position: absolute;
	left: clamp(-30px, 1vw, 40px);
	bottom: -34px;
	color: rgba(255, 255, 255, 0.25);
	pointer-events: none;
}
.cvr-cta-banner__icon { width: clamp(140px, 16vw, 230px); height: auto; aspect-ratio: 1; }

.cvr-cta-banner__copy { text-align: center; max-width: 460px; }
.cvr-cta-banner__title {
	color: #fff;
	font-size: clamp(26px, 2.8vw, 36px);
	margin: 0 0 10px;
}
.cvr-cta-banner__title em {
	font-style: normal;
	background: linear-gradient(180deg, #ede0c8 0%, var(--cvr-orange) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	/* Each wrapped fragment gets its own background box. Without this, Safari
	   (through 13) paints a wrapped inline's second line as a continuation of
	   the first and the first letters on that line come out blank. Visually
	   neutral elsewhere: the gradient is vertical, so per-line and whole-box
	   positioning look the same. */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: transparent;
}
.cvr-cta-banner__text { color: #fff; font-size: 17px; margin: 0; }

.cvr-cta-banner__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ------------------------------------------------------- destinations grid */
.cvr-dest-section { padding: var(--cvr-section-pad) var(--cvr-gutter); }
.cvr-dest-section__inner { max-width: var(--cvr-max); margin: 0 auto; }

.cvr-dest-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(20px, 2.6vw, 32px);
}
.cvr-dest-section__note {
	max-width: 680px;
	margin: clamp(24px, 3vw, 36px) auto 0;
	text-align: center;
	font-size: 13.5px;
	color: var(--cvr-ink-soft);
}

/* Wide promo card under a resort grid (Palace Elite collection). */
.cvr-promo {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: stretch;
	margin-top: clamp(24px, 3vw, 40px);
	background: var(--cvr-white);
	border: 1px solid var(--cvr-line);
	border-radius: var(--cvr-radius-lg);
	box-shadow: var(--cvr-shadow);
	overflow: hidden;
}
.cvr-promo--plain { grid-template-columns: 1fr; }
.cvr-promo__media { position: relative; min-height: 220px; background: var(--cvr-cream-deep); }
.cvr-promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvr-promo__body {
	padding: clamp(26px, 3.4vw, 44px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.cvr-promo__body .cvr-eyebrow { margin-bottom: 6px; }
.cvr-promo__title { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 10px; }
.cvr-promo__text { color: var(--cvr-ink-soft); font-size: 15px; margin: 0 0 22px; }

@media (max-width: 720px) {
	.cvr-promo { grid-template-columns: 1fr; }
	.cvr-promo__media { min-height: 180px; }
}

.cvr-dest-card {
	border-radius: var(--cvr-radius);
	overflow: hidden;
	box-shadow: var(--cvr-shadow);
	background: var(--cvr-navy);
}
.cvr-dest-card__link { position: relative; display: block; aspect-ratio: 4 / 5; }
.cvr-dest-card__img {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.cvr-dest-card:hover .cvr-dest-card__img { transform: scale(1.045); }
.cvr-dest-card__img--empty { background: linear-gradient(160deg, #24486d, var(--cvr-navy)); }
.cvr-dest-card--soon .cvr-dest-card__link { cursor: default; }
.cvr-dest-card--soon:hover .cvr-dest-card__img { transform: none; }
.cvr-dest-card__soon {
	align-self: flex-start;
	margin-top: 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--cvr-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cvr-dest-card__overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px 28px;
	background: linear-gradient(180deg, rgba(13, 35, 56, 0) 45%, rgba(13, 35, 56, 0.85) 100%);
}
.cvr-dest-card__name {
	font-family: var(--cvr-font-display);
	font-size: 24px;
	color: #fff;
	line-height: 1.2;
}
.cvr-dest-card__loc { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-top: 4px; }

/* --------------------------------------------------------------- tip strip */
.cvr-tip {
	background: #FFF;
	/* Hairline top and bottom only — the band is full-bleed, so the design has
	   no left/right edge to stroke. */
	border-top: 1px solid var(--cvr-line-warm);
	border-bottom: 1px solid var(--cvr-line-warm);
	padding: clamp(40px, 6vw, 72px) var(--cvr-gutter);
}
.cvr-tip__inner {
	max-width: var(--cvr-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr 1.4fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}
/* The beige shape behind the umbrella is an organic blob, not a circle — it
   ships in the sprite as icon-tip-umbrella-bg and cancunvip_icon() emits it
   automatically, same as the dining/family/pool icons. */
.cvr-tip__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Matches the blob's 171x134 viewBox. */
	width: clamp(116px, 11.2vw, 142px);
	aspect-ratio: 171 / 134;
	/* Glyph sits at ~0.53 of the blob width, matching the Figma proportion. */
	font-size: clamp(61px, 5.9vw, 75px);
	color: var(--cvr-orange);
}
.cvr-tip__icon .cvr-icon-bg {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
}
.cvr-tip__icon .cvr-icon--badge { position: relative; z-index: 1; }
.cvr-tip__title { font-size: clamp(24px, 2.4vw, 32px); margin: 0; }
.cvr-tip__lead { font-weight: 700; color: var(--cvr-slate); margin: 0 0 8px; }
.cvr-tip__text { color: var(--cvr-slate); font-size: 15px; margin: 0; }

/* ------------------------------------------------------------------- story */
/* Background, top layer first: a beige wash that falls off to nothing across the
   left third, so the water reads at full strength on the left and the copy still
   sits on flat colour. There is deliberately no separate uniform wash over the
   photo — any flat overlay mutes the blue everywhere (50% turned #27b6bc into
   #92d8d8). The wash is solid by 40%, just inside the copy column's 42.7% start,
   so no line of text begins over open water. */
.cvr-story {
	--cvr-story-wash: linear-gradient(
		to right,
		rgba(253, 250, 243, 0) 0%,
		rgba(253, 250, 243, 0) 14%,
		var(--cvr-cream-pale) 40%
	);
	background:
		var(--cvr-story-wash),
		/* Sized/positioned to sit inside the photo's water band (rows 42%–88%)
		   rather than `cover`, which always drags the sand at the top or bottom
		   of the shot into frame. Both values are relative, so the same rows stay
		   in view at any section height. Anchored left: on very wide screens the
		   photo keeps its left edge and the flat beige takes over on the right. */
		var(--cvr-story-bg, url("../img/story-bg.jpg")) left 78% / auto 216% no-repeat,
		var(--cvr-cream-pale);
	padding: var(--cvr-section-pad) var(--cvr-gutter);
}
.cvr-story__inner {
	max-width: var(--cvr-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(280px, 420px) 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.cvr-story__image img {
	border-radius: var(--cvr-radius);
	box-shadow: var(--cvr-shadow);
	width: 100%;
	object-fit: cover;
}
.cvr-story__body .cvr-section-head { margin-bottom: 20px; }
/* Prose only — the section head's own paragraphs keep their component colours
   (this rule used to out-specify .cvr-eyebrow and grey out "Our story"). */
.cvr-story__body p:not(.cvr-eyebrow):not(.cvr-section-head__sub) {
	color: var(--cvr-ink-soft);
	font-size: 15.5px;
}

/* -------------------------------------------------------- reviews carousel */
.cvr-reviews {
	position: relative;
	background:
		linear-gradient(180deg, rgba(13, 35, 56, 0.9), rgba(13, 35, 56, 0.8)),
		var(--cvr-reviews-bg, url("../img/reviews-bg.jpg")) center / cover no-repeat,
		var(--cvr-navy);
	color: #fff;
	padding: var(--cvr-section-pad) var(--cvr-gutter);
}
.cvr-reviews__inner { max-width: var(--cvr-max); margin: 0 auto; }

.cvr-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.cvr-carousel__track::-webkit-scrollbar { display: none; }

.cvr-carousel__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 4vw, 56px);
	padding: 8px 4px;
}

.cvr-review { margin: 0; }
.cvr-review__quote {
	font-family: var(--cvr-font-display);
	font-size: 19px;
	line-height: 1.55;
	margin: 0 0 18px;
}
.cvr-review__meta { font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.cvr-review__name { display: block; font-style: normal; }
.cvr-review__loc { display: block; margin-top: 2px; }

.cvr-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 3vw, 32px);
	margin-top: 36px;
}
.cvr-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	flex: 0 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}
.cvr-carousel__arrow:hover {
	border-color: var(--cvr-orange);
	color: var(--cvr-orange);
}
.cvr-carousel__arrow .cvr-icon { font-size: 18px; }
.cvr-carousel__arrow--prev .cvr-icon { transform: scaleX(-1); }
.cvr-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}
.cvr-carousel__dot {
	width: 26px; height: 7px;
	border: 0;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: background-color 0.18s ease;
}
.cvr-carousel__dot.is-active { background: var(--cvr-orange); }

/* --------------------------------------------------------- contact + forms */
.cvr-contact {
	background:
		linear-gradient(180deg, var(--cvr-cream) 0%, rgba(250, 246, 238, 0) 60%),
		var(--cvr-contact-bg, url("../img/contact-bg.jpg")) center bottom / cover no-repeat,
		var(--cvr-cream);
	padding: var(--cvr-section-pad) var(--cvr-gutter) clamp(80px, 10vw, 150px);
}
.cvr-contact__inner { max-width: 640px; margin: 0 auto; }
.cvr-contact__note {
	text-align: center;
	font-size: 12.5px;
	color: var(--cvr-ink-soft);
	margin-top: 14px;
}

/* Gravity Forms (default CSS disabled) + fallback panel share input styles.
   Scoped to .cvr-form so the inline contact section and the quote popup are
   styled by the same rules. */
.cvr-form input[type="text"],
.cvr-form input[type="email"],
.cvr-form input[type="tel"],
.cvr-form input[type="number"],
.cvr-form input[type="date"],
.cvr-form select,
.cvr-form textarea {
	width: 100%;
	padding: 14px 16px;
	font: 400 15px/1.5 var(--cvr-font-body);
	color: var(--cvr-ink);
	background: #fff;
	border: 1px solid var(--cvr-line);
	border-radius: 8px;
}
.cvr-form input:focus,
.cvr-form select:focus,
.cvr-form textarea:focus {
	outline: 2px solid var(--cvr-orange);
	outline-offset: 1px;
	border-color: transparent;
}
.cvr-form .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	list-style: none;
	margin: 0; padding: 0;
}
.cvr-form .gfield { grid-column: span 2; }
.cvr-form .gfield--width-half,
.cvr-form .gfield.gf_left_half,
.cvr-form .gfield.gf_right_half { grid-column: span 1; }
.cvr-form .gfield_label { display: none; }
.cvr-form .gfield_required { color: var(--cvr-orange); }
.cvr-form .gform_footer { margin-top: 16px; text-align: center; }
.cvr-form .gform_footer .cvr-btn { width: 100%; }
.cvr-form .gfield_validation_message,
.cvr-form .validation_message {
	color: #b3401a;
	font: 400 13px/1.5 var(--cvr-font-body);
	margin-top: 5px;
}
.cvr-form .gfield_error input,
.cvr-form .gfield_error select,
.cvr-form .gfield_error textarea { border-color: #b3401a; }
.cvr-form .gform_validation_errors {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: rgba(179, 64, 26, 0.08);
	border-left: 3px solid #b3401a;
	border-radius: 6px;
}
.cvr-form .gform_validation_errors .gform_submission_error {
	font: 500 14px/1.5 var(--cvr-font-body);
	color: #b3401a;
	margin: 0;
}
.cvr-form .gform_validation_errors .gform-icon { display: none; }
.cvr-form .gform_confirmation_message {
	background: var(--cvr-navy);
	color: #fff;
	padding: 28px 32px;
	border-radius: var(--cvr-radius);
	text-align: center;
}
/* Fields whose placeholder can't carry the whole question keep their label. */
.cvr-form .gfield--show-label .gfield_label {
	display: block;
	font: 500 13px/1.4 var(--cvr-font-body);
	color: var(--cvr-ink-soft);
	margin-bottom: 6px;
}
/* Field hints (GF's number-range note, etc.) stay quiet. */
.cvr-form .gfield_description,
.cvr-form .instruction {
	font: 400 12.5px/1.5 var(--cvr-font-body);
	color: var(--cvr-ink-soft);
	margin: 5px 0 0;
	padding: 0;
}

.cvr-form-fallback {
	background: #fff;
	border-radius: var(--cvr-radius);
	box-shadow: var(--cvr-shadow);
	padding: 32px;
	text-align: center;
}
.cvr-form-fallback__contacts { list-style: none; margin: 0; padding: 0; font-weight: 700; }

/* ------------------------------------------------------------------ footer */
.cvr-footer {
	background: #FFF;
	border-top: 1px solid var(--cvr-line);
	padding: clamp(48px, 6vw, 72px) var(--cvr-gutter) 24px;
}
.cvr-footer__top {
	max-width: var(--cvr-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: clamp(28px, 4vw, 48px);
}
.cvr-footer__brand img { width: 150px; height: auto; }
.cvr-footer__brand-name { font-family: var(--cvr-font-display); font-size: 22px; color: var(--cvr-navy); }

.cvr-footer__title {
	font: 700 15px/1.4 var(--cvr-font-body);
	color: var(--cvr-orange);
	margin: 0 0 16px;
}
.cvr-footer__links { list-style: none; margin: 0; padding: 0; }
.cvr-footer__links li { margin-bottom: 10px; }
.cvr-footer__links a {
	color: var(--cvr-ink-soft);
	text-decoration: none;
	font-size: 14.5px;
}
.cvr-footer__links a:hover { color: var(--cvr-orange); }
.cvr-footer__soon-item { color: var(--cvr-ink-soft); font-size: 14.5px; }
.cvr-soon-badge {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--cvr-orange);
	vertical-align: super;
}

.cvr-footer__bottom {
	max-width: var(--cvr-max);
	margin: 48px auto 0;
	padding-top: 20px;
	border-top: 1px solid #4A90B81F;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--cvr-ink-soft);
}
.cvr-footer__bottom p { margin: 0; }
.cvr-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cvr-ink-soft);
	text-decoration: none;
}
.cvr-footer__credit img { width: 158px; height: auto; display: block; }

/* -------------------------------------------------------------- icon cards */
.cvr-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.4vw, 28px);
}

.cvr-icon-card--boxed {
	background: #fff;
	border: 1px solid var(--cvr-line);
	border-radius: var(--cvr-radius);
	padding: 26px 28px;
	box-shadow: var(--cvr-shadow);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 14px;
}
.cvr-icon-card--boxed .cvr-icon-card__icon { font-size: 32px; margin-bottom: 0; }
.cvr-icon-card--boxed .cvr-icon-card__title { margin: 0; }
.cvr-icon-card--boxed .cvr-icon-card__text { flex-basis: 100%; margin-top: 10px; }
.cvr-icon-card__icon {
	display: inline-flex;
	color: var(--cvr-orange);
	font-size: 26px;
	margin-bottom: 10px;
}
.cvr-icon-card__title {
	font: 700 16px/1.4 var(--cvr-font-body);
	color: var(--cvr-orange);
	margin: 0 0 8px;
}
.cvr-icon-card__subtitle { display: block; font-weight: 400; color: var(--cvr-ink-soft); font-size: 13px; }
.cvr-icon-card__text { font-size: 14.5px; color: var(--cvr-ink-soft); margin: 0; }

/* Feature trio on single destination — centered, airy variant */
.cvr-icon-card--plain { text-align: center; padding: 12px; }
.cvr-icon-card--plain .cvr-icon-card__icon {
	position: relative;
	width: 72px; height: 72px;
	align-items: center; justify-content: center;
	border: 1px solid rgba(232, 118, 58, 0.4);
	border-radius: 50%;
	font-size: 30px;
	margin-bottom: 14px;
}
.cvr-icon-card--plain .cvr-icon-card__icon--layered {
	width: 104px; height: 96px;
	border: none;
	border-radius: 0;
}
.cvr-icon-card--plain .cvr-icon-bg,
.cvr-icon-card--plain .cvr-icon--badge {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
}
.cvr-icon-card--plain .cvr-icon--badge { z-index: 1; }
.cvr-icon-card--plain .cvr-icon-card__title {
	font-family: var(--cvr-font-display);
	font-weight: 400;
	font-size: 26px;
}

/* -------------------------------------------------------------- step cards */
.cvr-section--steps-bg {
	background:
		radial-gradient(140% 160% at 50% 42%, #FEFCF7 0%, rgba(254, 252, 247, 0.55) 45%, rgba(254, 252, 247, 0.12) 100%),
		var(--cvr-steps-bg, none) center / cover no-repeat,
		var(--cvr-cream);
}
.cvr-step-card {
	position: relative;
	z-index: 0;
	background: #fff;
	border: 1px solid var(--cvr-line);
	border-radius: var(--cvr-radius);
	box-shadow: var(--cvr-shadow);
	padding: 40px 28px 26px;
	margin-top: 26px;
}
.cvr-step-card__watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 58%;
	max-height: 72%;
	z-index: -1;
	pointer-events: none;
}
.cvr-step-card__num {
	position: absolute;
	top: -34px;
	left: 28px;
	width: 67px; height: 67px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cvr-orange);
	color: #fff;
	font: 400 32px/1 var(--cvr-font-display);
	border-radius: 50%;
	box-shadow: 0 6px 14px rgba(232, 118, 58, 0.4);
}
.cvr-step-card__title { font: 700 16px/1.4 var(--cvr-font-body); color: var(--cvr-orange); margin: 0 0 8px; }
.cvr-step-card__text { font-size: 14.5px; color: var(--cvr-ink-soft); margin: 0; }

/* -------------------------------------------------------------- checklists */
.cvr-checklist { list-style: none; margin: 0; padding: 0; }
.cvr-checklist__item {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 9px 0;
}
.cvr-checklist__mark { color: var(--cvr-orange); flex: 0 0 auto; font-size: 15px; }

.cvr-checklist--cols-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(32px, 6vw, 80px);
}
.cvr-checklist--lined .cvr-checklist__item { border-bottom: 1px solid var(--cvr-line); }
.cvr-checklist--navy .cvr-checklist__item { color: #fff; font-size: 14.5px; padding: 6px 0; }

/* -------------------------------------------------- single destination bits */
.cvr-dwelcome {
	padding: var(--cvr-section-pad) var(--cvr-gutter);
	/* Palm texture, knocked back to ~10% and pre-composited over the cream base
	   in the asset itself (no alpha needed). Over it, the Figma radial: opaque
	   #fefcf7 at the centre fading to transparent at the ellipse edge, so the
	   palms only read around the outside and never behind the copy. */
	/* 100% 100%, not `cover`: the design fits the whole grove — frond tips down to
	   the sand — to the section, which is why the palms read as slender and
	   numerous. `cover` instead crops a quarter off the top and magnifies what's
	   left into fat vertical smears. */
	--cvr-palms-size: 100% 100%;
	background:
		radial-gradient(ellipse 100% 100% at 50% 50%, #fefcf7 0%, rgba(254, 252, 247, 0) 100%),
		url("../img/palms-bg.png") center bottom / var(--cvr-palms-size) no-repeat,
		var(--cvr-cream);
}
.cvr-dwelcome__inner {
	max-width: var(--cvr-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr minmax(300px, 480px);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
/* Eyebrow + title are centred on a narrower measure than the body copy, matching
   the mockup; auto margins centre them inside the left column. */
.cvr-dwelcome__body .cvr-section-head { margin-bottom: 18px; max-width: 520px; }
/* Prose only — the section head keeps its component colours (this rule used to
   out-specify .cvr-eyebrow and grey out the "Welcome to …" line). */
.cvr-dwelcome__body p:not(.cvr-eyebrow):not(.cvr-section-head__sub) {
	color: var(--cvr-ink-soft);
	font-size: 15.5px;
}
.cvr-dwelcome__image img {
	width: 100%;
	border-radius: var(--cvr-radius);
	box-shadow: var(--cvr-shadow);
	object-fit: cover;
}
.cvr-dwelcome__actions { margin-top: 22px; }

.cvr-features {
	padding: clamp(40px, 6vw, 72px) var(--cvr-gutter);
	background: var(--cvr-white);
}
.cvr-features__grid {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 40px);
}

.cvr-amenities { padding: clamp(32px, 5vw, 64px) var(--cvr-gutter); }
.cvr-amenities__inner {
	position: relative;
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(280px, 1fr) 1.4fr;
	gap: clamp(28px, 4vw, 64px);
	background:
		radial-gradient(120% 160% at 90% -20%, rgba(43, 84, 122, 0.55) 0%, rgba(22, 50, 79, 0) 55%),
		var(--cvr-navy);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: var(--cvr-radius-lg);
	color: #fff;
	padding: clamp(32px, 5vw, 64px);
	overflow: hidden;
}
/* Optional background photo (Figma): dark navy tint over the photo so the
   left copy and right checklist stay readable. */
.cvr-amenities__inner--photo::before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(15, 66, 103, 0.7);
}
.cvr-amenities__inner > div {
	position: relative;
	z-index: 1;
}
.cvr-amenities__intro { color: rgba(255, 255, 255, 0.82); font-size: 15px; }
.cvr-amenities__list {
	columns: 2;
	column-gap: clamp(24px, 3vw, 48px);
}
.cvr-amenities__list .cvr-checklist__item { break-inside: avoid; }

.cvr-dining {
	position: relative;
	padding: var(--cvr-section-pad) var(--cvr-gutter);
	background: var(--cvr-cream) center / cover no-repeat;
	border-bottom: 1px solid #bcae95;
}
/* Per the Figma: solid cream behind the section head (top ~27%), easing to a
   light wash below so the photo reads at roughly 60% opacity under the cards. */
.cvr-dining::before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(180deg, var(--cvr-cream) 0%, var(--cvr-cream) 27%, rgba(250, 246, 238, 0.75) 55%, rgba(250, 246, 238, 0.4) 100%);
}
.cvr-dining__inner { position: relative; max-width: var(--cvr-max); margin: 0 auto; }
.cvr-dining__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.4vw, 28px);
}
.cvr-resto-card {
	background: var(--cvr-white);
	border: 1px solid rgba(188, 174, 149, 0.15);
	border-radius: var(--cvr-radius);
	box-shadow: var(--cvr-shadow);
	padding: 22px 24px;
}
.cvr-resto-card__name { font: 700 15px/1.4 var(--cvr-font-body); color: var(--cvr-orange); margin: 0 0 6px; }
.cvr-resto-card__text { font-size: 14px; color: var(--cvr-ink-soft); margin: 0; }

.cvr-gallery { padding: var(--cvr-section-pad) var(--cvr-gutter); background: var(--cvr-white); }
.cvr-gallery__inner { max-width: var(--cvr-max); margin: 0 auto; }
.cvr-gallery__grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 2vw, 24px);
}
.cvr-gallery__item { border-radius: var(--cvr-radius); overflow: hidden; }
.cvr-gallery__link { display: block; cursor: zoom-in; }
.cvr-gallery__img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* --------------------------------------------------------------- lightbox */
.cvr-lightbox {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 5vw, 64px);
	background: rgba(13, 35, 56, 0.93);
}
.cvr-lightbox[hidden] { display: none; }
body.cvr-lightbox-open { overflow: hidden; }
.cvr-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.cvr-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - clamp(80px, 14vw, 160px));
	border-radius: var(--cvr-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.cvr-lightbox__counter {
	font: 500 13px/1.4 var(--cvr-font-body);
	color: rgba(255, 255, 255, 0.75);
	letter-spacing: 0.04em;
}
.cvr-lightbox__close,
.cvr-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font: 400 26px/1 var(--cvr-font-body);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.cvr-lightbox__close:hover,
.cvr-lightbox__nav:hover { background: var(--cvr-orange); }
.cvr-lightbox__close { top: 18px; right: 18px; }
.cvr-lightbox__nav--prev { left: 14px; top: 50%; transform: translateY(-50%); }
.cvr-lightbox__nav--next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------- quote form popup */
.cvr-modal {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 300;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(16px, 5vh, 64px) var(--cvr-gutter);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.cvr-modal[hidden] { display: none; }
html.cvr-modal-open { overflow: hidden; }

.cvr-modal__backdrop {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(13, 35, 56, 0.62);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.cvr-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: auto;
	background: var(--cvr-cream);
	border-radius: var(--cvr-radius-lg);
	box-shadow: 0 30px 70px rgba(13, 35, 56, 0.35);
	animation: cvr-modal-in 0.22s ease-out;
}
@keyframes cvr-modal-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cvr-modal__dialog { animation: none; }
}
.cvr-modal__body { padding: clamp(28px, 5vw, 44px); }
.cvr-modal__body .cvr-eyebrow { margin-bottom: 6px; }
.cvr-modal__title { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 10px; }
.cvr-modal__text { color: var(--cvr-ink-soft); font-size: 15px; margin: 0 0 22px; }
.cvr-modal__note {
	text-align: center;
	font-size: 12.5px;
	color: var(--cvr-ink-soft);
	margin: 14px 0 0;
}
.cvr-modal__close {
	position: absolute;
	top: 12px; right: 12px;
	width: 38px; height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	color: var(--cvr-navy);
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--cvr-line);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.cvr-modal__close:hover { background: var(--cvr-orange); color: #fff; border-color: transparent; }

.cvr-map { padding: 0 var(--cvr-gutter) var(--cvr-section-pad); background: var(--cvr-white); }
.cvr-map__inner { max-width: var(--cvr-max); margin: 0 auto; }
.cvr-map__frame {
	width: 100%;
	aspect-ratio: 16 / 6;
	border: 0;
	border-radius: var(--cvr-radius);
	background: var(--cvr-cream-deep);
}

/* --------------------------------------------------------------- accordion */
.cvr-accordion { max-width: 760px; margin: 0 auto; }
.cvr-accordion__item {
	background: #fff;
	border: 1px solid var(--cvr-line);
	border-radius: var(--cvr-radius);
	box-shadow: var(--cvr-shadow);
	margin-bottom: 14px;
}
.cvr-accordion__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 20px 24px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: 700 16px/1.45 var(--cvr-font-body);
	color: var(--cvr-navy);
}
.cvr-accordion__q::after {
	content: "+";
	font-size: 22px;
	color: var(--cvr-orange);
	flex: 0 0 auto;
}
.cvr-accordion__q[aria-expanded="true"]::after { content: "–"; }
.cvr-accordion__a { padding: 0 24px 20px; color: var(--cvr-ink-soft); font-size: 15px; }
.cvr-accordion__actions { margin: 4px 0 0; }

/* --------------------------------------------------------- generic page/404 */
.cvr-prose {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--cvr-section-pad) var(--cvr-gutter);
}
.cvr-prose img { border-radius: var(--cvr-radius); }

/* -------------------------------------------------------------- excursions */
.cvr-favorites { padding: var(--cvr-section-pad) var(--cvr-gutter); }
.cvr-favorites__inner { max-width: var(--cvr-max); margin: 0 auto; display: grid; gap: clamp(20px, 3vw, 32px); }
.cvr-fav-card {
	position: relative;
	border-radius: var(--cvr-radius-lg);
	overflow: hidden;
	min-height: 320px;
	display: flex;
	align-items: center;
	background: var(--cvr-navy);
}
.cvr-fav-card__img {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.cvr-fav-card__body {
	position: relative;
	max-width: 634px; /* 522px text column + padding, per mockup */
	padding: clamp(28px, 4vw, 56px);
	color: #fff;
}
/* Odd cards read on the left, even cards on the right (mockup alternation).
   nth-of-type, not nth-child: the section head <div> precedes the <article>s. */
.cvr-fav-card:nth-of-type(even) { justify-content: flex-end; }
.cvr-fav-card::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.72) 40%, rgba(0, 0, 0, 0.35) 72%, rgba(0, 0, 0, 0) 100%);
}
.cvr-fav-card:nth-of-type(even)::after {
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.72) 40%, rgba(0, 0, 0, 0.35) 72%, rgba(0, 0, 0, 0) 100%);
}
.cvr-fav-card__body { z-index: 1; }
.cvr-fav-card__name {
	font-family: var(--cvr-font-display);
	font-size: clamp(30px, 3.2vw, 38px);
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0 0 14px;
}
.cvr-fav-card__text {
	font-size: 17px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

/* ------------------------------------------------------------- coming soon */
.cvr-coming-soon {
	text-align: center;
	padding: var(--cvr-section-pad) var(--cvr-gutter);
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
	.cvr-nav, .cvr-header__cta { display: none; }
	.cvr-header__toggle { display: flex; margin-left: auto; }
	.cvr-header__inner { min-height: 72px; }
	.cvr-header__logo {
		width: auto;
		margin-bottom: -12px;
		padding: 6px 10px 10px;
	}
	.cvr-header__logo img { width: 84px; }
	.home .cvr-hero { padding-top: 72px; }
}

@media (min-width: 1101px) {
	.cvr-mobile-nav { display: none !important; }
}

@media (max-width: 900px) {
	.cvr-carousel__slide { grid-template-columns: 1fr; }
	.cvr-stats__grid { grid-template-columns: 1fr; gap: 36px; }
	.cvr-stats__item + .cvr-stats__item::before { display: none; }
	.cvr-card-grid { grid-template-columns: 1fr 1fr; }
	.cvr-features__grid { grid-template-columns: 1fr; }
	.cvr-dining__grid { grid-template-columns: 1fr; }
	.cvr-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.cvr-story__inner,
	.cvr-dwelcome__inner,
	.cvr-amenities__inner { grid-template-columns: 1fr; }
	/* Stacked layout: the copy now spans the full width, so the beige wash has to
	   run top-to-bottom instead of left-to-right or the text would sit on open
	   water. Solid by 28% — the copy starts no higher than ~32% at any width. */
	.cvr-story { --cvr-story-wash: linear-gradient(to bottom, rgba(253, 250, 243, 0) 0%, var(--cvr-cream-pale) 28%); }
	/* Stacked, the section is far taller than wide (0.34 aspect at 400px), so
	   fitting the grove to it would squash the palms ~4x. Cover instead trims the
	   sides and keeps their proportions and full height. */
	.cvr-dwelcome { --cvr-palms-size: cover; }
	.cvr-tip__inner { grid-template-columns: 1fr; text-align: center; }
	.cvr-tip__icon { margin: 0 auto; }
	.cvr-footer__top { grid-template-columns: 1fr 1fr; }
	.cvr-amenities__list { columns: 1; }
	/* Text spans the full card here, so the directional scrim gives way to an
	   even wash that keeps every line readable. */
	.cvr-fav-card::after,
	.cvr-fav-card:nth-of-type(even)::after {
		background: rgba(0, 0, 0, 0.68);
	}
}

@media (max-width: 640px) {
	.cvr-card-grid { grid-template-columns: 1fr; }
	.cvr-checklist--cols-2 { grid-template-columns: 1fr; }
	.cvr-footer__top { grid-template-columns: 1fr; }
	.cvr-cta-banner__actions { flex-direction: column; }
	.cvr-hero__actions { gap: 14px; }
	.cvr-contact .gfield--width-half,
	.cvr-contact .gfield.gf_left_half,
	.cvr-contact .gfield.gf_right_half { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* =============================================================================
   Legacy browser fallbacks — Safari 12.1 through 14 (and equally old Chrome /
   Firefox). Every block is gated by @supports on a feature those browsers
   lack, so a browser that understands the modern syntax above never applies
   any of it. The clamp() steps are GENERATED piecewise from the clamp()
   values above (see app/backups/safari12-2026-09-03 for the pre-fallback
   stylesheet and generator) — regenerate rather than hand-edit them.
   ========================================================================== */

/* 1. clamp() (Safari 13.1+): fluid sizes as static / vw / static steps. */
@supports not (padding: clamp(1px, 2px, 3px)) {
	:root { --cvr-gutter: 20px; --cvr-section-pad: 56px; }
	@media (min-width: 500px) { :root { --cvr-gutter: 4vw; } }
	@media (min-width: 700px) { :root { --cvr-section-pad: 8vw; } }
	@media (min-width: 1000px) { :root { --cvr-gutter: 40px; } }
	@media (min-width: 1250px) { :root { --cvr-section-pad: 100px; } }
	.cvr-header__side { gap: 16px; }
	@media (min-width: 800px) { .cvr-header__side { gap: 2vw; } }
	@media (min-width: 1700px) { .cvr-header__side { gap: 34px; } }
	.cvr-nav__list { gap: 14px; }
	@media (min-width: 700px) { .cvr-nav__list { gap: 2vw; } }
	@media (min-width: 1400px) { .cvr-nav__list { gap: 28px; } }
	.cvr-header__logo { margin-top: 0; margin-right: 16px; margin-left: 16px; }
	@media (min-width: 800px) { .cvr-header__logo { margin-right: 2vw; margin-left: 2vw; } }
	@media (min-width: 1101px) { .cvr-header__logo { margin-bottom: -19px; } }
	@media (min-width: 1700px) { .cvr-header__logo { margin-right: 34px; margin-left: 34px; } }
	.cvr-hero__inner { padding-top: 48px; padding-right: var(--cvr-gutter); padding-bottom: 56px; padding-left: var(--cvr-gutter); }
	@media (min-width: 686px) { .cvr-hero__inner { padding-top: 7vw; } }
	@media (min-width: 700px) { .cvr-hero__inner { padding-bottom: 8vw; } }
	@media (min-width: 1500px) { .cvr-hero__inner { padding-bottom: 120px; } }
	@media (min-width: 1572px) { .cvr-hero__inner { padding-top: 110px; } }
	.cvr-hero--tall .cvr-hero__inner { padding-top: 72px; padding-bottom: 72px; }
	@media (min-width: 720px) { .cvr-hero--tall .cvr-hero__inner { padding-top: 10vw; padding-bottom: 10vw; } }
	@media (min-width: 1500px) { .cvr-hero--tall .cvr-hero__inner { padding-top: 150px; padding-bottom: 150px; } }
	.cvr-hero__title { font-size: 34px; }
	@media (min-width: 810px) { .cvr-hero__title { font-size: 4.2vw; } }
	@media (min-width: 1334px) { .cvr-hero__title { font-size: 56px; } }
	.cvr-section-head__title { font-size: 28px; }
	@media (min-width: 934px) { .cvr-section-head__title { font-size: 3vw; } }
	@media (min-width: 1267px) { .cvr-section-head__title { font-size: 38px; } }
	.cvr-welcome__title { font-size: 28px; }
	@media (min-width: 934px) { .cvr-welcome__title { font-size: 3vw; } }
	@media (min-width: 1267px) { .cvr-welcome__title { font-size: 38px; } }
	@media (min-width: 901px) { .cvr-stats__grid { gap: 4vw; } }
	@media (min-width: 1400px) { .cvr-stats__grid { gap: 56px; } }
	.cvr-stats__item { padding-top: 0; padding-right: 4px; padding-bottom: 0; padding-left: 4px; }
	@media (min-width: 200px) { .cvr-stats__item { padding-right: 2vw; padding-left: 2vw; } }
	@media (min-width: 1200px) { .cvr-stats__item { padding-right: 24px; padding-left: 24px; } }
	.cvr-stats__item + .cvr-stats__item::before { left: calc(-1 * 12px); }
	@media (min-width: 600px) { .cvr-stats__item + .cvr-stats__item::before { left: calc(-1 * 2vw); } }
	@media (min-width: 1400px) { .cvr-stats__item + .cvr-stats__item::before { left: calc(-1 * 28px); } }
	.cvr-stats__headline { font-weight: 400; font-size: 28px; line-height: 1.2; font-family: var(--cvr-font-display); }
	@media (min-width: 824px) { .cvr-stats__headline { font-size: 3.4vw; } }
	@media (min-width: 1295px) { .cvr-stats__headline { font-size: 44px; } }
	.cvr-cta-banner { padding-top: 32px; padding-right: var(--cvr-gutter); padding-bottom: 32px; padding-left: var(--cvr-gutter); }
	@media (min-width: 640px) { .cvr-cta-banner { padding-top: 5vw; padding-bottom: 5vw; } }
	@media (min-width: 1280px) { .cvr-cta-banner { padding-top: 64px; padding-bottom: 64px; } }
	.cvr-cta-banner__inner { gap: 24px; padding-top: 36px; padding-right: 28px; padding-bottom: 36px; padding-left: 28px; }
	@media (min-width: 560px) { .cvr-cta-banner__inner { padding-right: 5vw; padding-left: 5vw; } }
	@media (min-width: 600px) { .cvr-cta-banner__inner { gap: 4vw; } }
	@media (min-width: 720px) { .cvr-cta-banner__inner { padding-top: 5vw; padding-bottom: 5vw; } }
	@media (min-width: 1280px) { .cvr-cta-banner__inner { padding-top: 64px; padding-bottom: 64px; } }
	@media (min-width: 1400px) { .cvr-cta-banner__inner { gap: 56px; } }
	@media (min-width: 1440px) { .cvr-cta-banner__inner { padding-right: 72px; padding-left: 72px; } }
	.cvr-cta-banner__art { left: 1vw; }
	@media (min-width: 4000px) { .cvr-cta-banner__art { left: 40px; } }
	.cvr-cta-banner__icon { width: 140px; }
	@media (min-width: 875px) { .cvr-cta-banner__icon { width: 16vw; } }
	@media (min-width: 1438px) { .cvr-cta-banner__icon { width: 230px; } }
	.cvr-cta-banner__title { font-size: 26px; }
	@media (min-width: 929px) { .cvr-cta-banner__title { font-size: 2.8vw; } }
	@media (min-width: 1286px) { .cvr-cta-banner__title { font-size: 36px; } }
	.cvr-dest-grid { gap: 20px; }
	@media (min-width: 770px) { .cvr-dest-grid { gap: 2.6vw; } }
	@media (min-width: 1231px) { .cvr-dest-grid { gap: 32px; } }
	.cvr-dest-section__note { margin-top: 24px; margin-right: auto; margin-bottom: 0; margin-left: auto; }
	@media (min-width: 800px) { .cvr-dest-section__note { margin-top: 3vw; } }
	@media (min-width: 1200px) { .cvr-dest-section__note { margin-top: 36px; } }
	.cvr-promo { margin-top: 24px; }
	@media (min-width: 800px) { .cvr-promo { margin-top: 3vw; } }
	@media (min-width: 1334px) { .cvr-promo { margin-top: 40px; } }
	.cvr-promo__body { padding-top: 26px; padding-right: 26px; padding-bottom: 26px; padding-left: 26px; }
	@media (min-width: 765px) { .cvr-promo__body { padding-top: 3.4vw; padding-right: 3.4vw; padding-bottom: 3.4vw; padding-left: 3.4vw; } }
	@media (min-width: 1295px) { .cvr-promo__body { padding-top: 44px; padding-right: 44px; padding-bottom: 44px; padding-left: 44px; } }
	.cvr-promo__title { font-size: 24px; }
	@media (min-width: 924px) { .cvr-promo__title { font-size: 2.6vw; } }
	@media (min-width: 1231px) { .cvr-promo__title { font-size: 32px; } }
	.cvr-tip { padding-top: 40px; padding-right: var(--cvr-gutter); padding-bottom: 40px; padding-left: var(--cvr-gutter); }
	@media (min-width: 667px) { .cvr-tip { padding-top: 6vw; padding-bottom: 6vw; } }
	@media (min-width: 1200px) { .cvr-tip { padding-top: 72px; padding-bottom: 72px; } }
	.cvr-tip__inner { gap: 24px; }
	@media (min-width: 600px) { .cvr-tip__inner { gap: 4vw; } }
	@media (min-width: 1600px) { .cvr-tip__inner { gap: 64px; } }
	.cvr-tip__icon { width: 116px; font-size: 61px; }
	@media (min-width: 1034px) { .cvr-tip__icon { font-size: 5.9vw; } }
	@media (min-width: 1036px) { .cvr-tip__icon { width: 11.2vw; } }
	@media (min-width: 1268px) { .cvr-tip__icon { width: 142px; } }
	@media (min-width: 1272px) { .cvr-tip__icon { font-size: 75px; } }
	.cvr-tip__title { font-size: 24px; }
	@media (min-width: 1000px) { .cvr-tip__title { font-size: 2.4vw; } }
	@media (min-width: 1334px) { .cvr-tip__title { font-size: 32px; } }
	.cvr-story__inner { gap: 32px; }
	@media (min-width: 640px) { .cvr-story__inner { gap: 5vw; } }
	@media (min-width: 1600px) { .cvr-story__inner { gap: 80px; } }
	.cvr-carousel__slide { gap: 24px; }
	@media (min-width: 600px) { .cvr-carousel__slide { gap: 4vw; } }
	@media (min-width: 1400px) { .cvr-carousel__slide { gap: 56px; } }
	.cvr-carousel__nav { gap: 18px; }
	@media (min-width: 600px) { .cvr-carousel__nav { gap: 3vw; } }
	@media (min-width: 1067px) { .cvr-carousel__nav { gap: 32px; } }
	.cvr-contact { padding-top: var(--cvr-section-pad); padding-right: var(--cvr-gutter); padding-bottom: 80px; padding-left: var(--cvr-gutter); }
	@media (min-width: 800px) { .cvr-contact { padding-bottom: 10vw; } }
	@media (min-width: 1500px) { .cvr-contact { padding-bottom: 150px; } }
	.cvr-footer { padding-top: 48px; padding-right: var(--cvr-gutter); padding-bottom: 24px; padding-left: var(--cvr-gutter); }
	@media (min-width: 800px) { .cvr-footer { padding-top: 6vw; } }
	@media (min-width: 1200px) { .cvr-footer { padding-top: 72px; } }
	.cvr-footer__top { gap: 28px; }
	@media (min-width: 700px) { .cvr-footer__top { gap: 4vw; } }
	@media (min-width: 1200px) { .cvr-footer__top { gap: 48px; } }
	.cvr-card-grid { gap: 16px; }
	@media (min-width: 667px) { .cvr-card-grid { gap: 2.4vw; } }
	@media (min-width: 1167px) { .cvr-card-grid { gap: 28px; } }
	.cvr-checklist--cols-2 { column-gap: 32px; }
	@media (min-width: 534px) { .cvr-checklist--cols-2 { column-gap: 6vw; } }
	@media (min-width: 1334px) { .cvr-checklist--cols-2 { column-gap: 80px; } }
	.cvr-dwelcome__inner { gap: 32px; }
	@media (min-width: 640px) { .cvr-dwelcome__inner { gap: 5vw; } }
	@media (min-width: 1440px) { .cvr-dwelcome__inner { gap: 72px; } }
	.cvr-features { padding-top: 40px; padding-right: var(--cvr-gutter); padding-bottom: 40px; padding-left: var(--cvr-gutter); }
	@media (min-width: 667px) { .cvr-features { padding-top: 6vw; padding-bottom: 6vw; } }
	@media (min-width: 1200px) { .cvr-features { padding-top: 72px; padding-bottom: 72px; } }
	.cvr-features__grid { gap: 20px; }
	@media (min-width: 667px) { .cvr-features__grid { gap: 3vw; } }
	@media (min-width: 1334px) { .cvr-features__grid { gap: 40px; } }
	.cvr-amenities { padding-top: 32px; padding-right: var(--cvr-gutter); padding-bottom: 32px; padding-left: var(--cvr-gutter); }
	@media (min-width: 640px) { .cvr-amenities { padding-top: 5vw; padding-bottom: 5vw; } }
	@media (min-width: 1280px) { .cvr-amenities { padding-top: 64px; padding-bottom: 64px; } }
	.cvr-amenities__inner { gap: 28px; padding-top: 32px; padding-right: 32px; padding-bottom: 32px; padding-left: 32px; }
	@media (min-width: 640px) { .cvr-amenities__inner { padding-top: 5vw; padding-right: 5vw; padding-bottom: 5vw; padding-left: 5vw; } }
	@media (min-width: 700px) { .cvr-amenities__inner { gap: 4vw; } }
	@media (min-width: 1280px) { .cvr-amenities__inner { padding-top: 64px; padding-right: 64px; padding-bottom: 64px; padding-left: 64px; } }
	@media (min-width: 1600px) { .cvr-amenities__inner { gap: 64px; } }
	.cvr-amenities__list { column-gap: 24px; }
	@media (min-width: 800px) { .cvr-amenities__list { column-gap: 3vw; } }
	@media (min-width: 1600px) { .cvr-amenities__list { column-gap: 48px; } }
	.cvr-dining__grid { gap: 16px; }
	@media (min-width: 667px) { .cvr-dining__grid { gap: 2.4vw; } }
	@media (min-width: 1167px) { .cvr-dining__grid { gap: 28px; } }
	.cvr-gallery__grid { gap: 14px; }
	@media (min-width: 700px) { .cvr-gallery__grid { gap: 2vw; } }
	@media (min-width: 1200px) { .cvr-gallery__grid { gap: 24px; } }
	.cvr-lightbox { padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; }
	@media (min-width: 320px) { .cvr-lightbox { padding-top: 5vw; padding-right: 5vw; padding-bottom: 5vw; padding-left: 5vw; } }
	@media (min-width: 1280px) { .cvr-lightbox { padding-top: 64px; padding-right: 64px; padding-bottom: 64px; padding-left: 64px; } }
	.cvr-lightbox__img { max-height: calc(100vh - 80px); }
	@media (min-width: 572px) { .cvr-lightbox__img { max-height: calc(100vh - 14vw); } }
	@media (min-width: 1143px) { .cvr-lightbox__img { max-height: calc(100vh - 160px); } }
	.cvr-modal { padding-top: 16px; padding-right: var(--cvr-gutter); padding-bottom: 16px; padding-left: var(--cvr-gutter); }
	@media (min-height: 320px) { .cvr-modal { padding-top: 5vh; padding-bottom: 5vh; } }
	@media (min-height: 1280px) { .cvr-modal { padding-top: 64px; padding-bottom: 64px; } }
	.cvr-modal__body { padding-top: 28px; padding-right: 28px; padding-bottom: 28px; padding-left: 28px; }
	@media (min-width: 560px) { .cvr-modal__body { padding-top: 5vw; padding-right: 5vw; padding-bottom: 5vw; padding-left: 5vw; } }
	@media (min-width: 880px) { .cvr-modal__body { padding-top: 44px; padding-right: 44px; padding-bottom: 44px; padding-left: 44px; } }
	.cvr-modal__title { font-size: 26px; }
	@media (min-width: 765px) { .cvr-modal__title { font-size: 3.4vw; } }
	@media (min-width: 1000px) { .cvr-modal__title { font-size: 34px; } }
	.cvr-favorites__inner { gap: 20px; }
	@media (min-width: 667px) { .cvr-favorites__inner { gap: 3vw; } }
	@media (min-width: 1067px) { .cvr-favorites__inner { gap: 32px; } }
	.cvr-fav-card__body { padding-top: 28px; padding-right: 28px; padding-bottom: 28px; padding-left: 28px; }
	@media (min-width: 700px) { .cvr-fav-card__body { padding-top: 4vw; padding-right: 4vw; padding-bottom: 4vw; padding-left: 4vw; } }
	@media (min-width: 1400px) { .cvr-fav-card__body { padding-top: 56px; padding-right: 56px; padding-bottom: 56px; padding-left: 56px; } }
	.cvr-fav-card__name { font-size: 30px; }
	@media (min-width: 938px) { .cvr-fav-card__name { font-size: 3.2vw; } }
	@media (min-width: 1188px) { .cvr-fav-card__name { font-size: 38px; } }
}

/* 2. Flex gap (Safari 14.1+): margins stand in for gap. `inset` is the probe
   because Safari shipped it in the same release as flex gap. */
@supports not (inset: 0) {
	.cvr-btn > * + * { margin-left: 8px; }
	.cvr-mobile-nav > .cvr-btn { margin-top: 24px; }
	.cvr-hero__eyebrow::before { margin-right: 14px; }
	/* Wrapping rows: children carry the gap, the container's negative margin
	   cancels it on the leading edges. */
	.cvr-hero__actions { margin-top: -26px; margin-left: -26px; }
	.cvr-hero__actions > * { margin-top: 26px; margin-left: 26px; }
	.cvr-cta-banner__actions > * { margin-top: 22px; margin-left: 22px; }
	.cvr-carousel__dots > * + * { margin-left: 8px; }
	.cvr-footer__bottom { padding-top: 4px; }
	.cvr-footer__bottom > p, .cvr-footer__bottom > a { margin-top: 16px; }
	.cvr-footer__credit img { margin-left: 8px; }
	.cvr-icon-card--boxed .cvr-icon-card__icon { margin-right: 14px; }
	.cvr-checklist__mark { margin-right: 12px; }
	.cvr-lightbox__figure > * + * { margin-top: 12px; }
	.cvr-accordion__q::after { margin-left: 16px; }
	/* The CTA banner keeps its background box: children take half the gap on
	   every side and the banner padding gives that half back. */
	.cvr-nav__list > li + li { margin-left: 14px; }
	@media (min-width: 700px) { .cvr-nav__list > li + li { margin-left: 2vw; } }
	@media (min-width: 1400px) { .cvr-nav__list > li + li { margin-left: 28px; } }
	.cvr-carousel__nav > * + * { margin-left: 18px; }
	@media (min-width: 600px) { .cvr-carousel__nav > * + * { margin-left: 3vw; } }
	@media (min-width: 1067px) { .cvr-carousel__nav > * + * { margin-left: 32px; } }
	.cvr-cta-banner__inner { padding-top: calc(36px - 24px / 2); padding-right: calc(28px - 24px / 2); padding-bottom: calc(36px - 24px / 2); padding-left: calc(28px - 24px / 2); }
	@media (min-width: 560px) { .cvr-cta-banner__inner { padding-right: calc(5vw - 24px / 2); padding-left: calc(5vw - 24px / 2); } }
	@media (min-width: 600px) { .cvr-cta-banner__inner { padding-top: calc(36px - 4vw / 2); padding-right: calc(5vw - 4vw / 2); padding-bottom: calc(36px - 4vw / 2); padding-left: calc(5vw - 4vw / 2); } }
	@media (min-width: 720px) { .cvr-cta-banner__inner { padding-top: calc(5vw - 4vw / 2); padding-bottom: calc(5vw - 4vw / 2); } }
	@media (min-width: 1280px) { .cvr-cta-banner__inner { padding-top: calc(64px - 4vw / 2); padding-bottom: calc(64px - 4vw / 2); } }
	@media (min-width: 1400px) { .cvr-cta-banner__inner { padding-top: calc(64px - 56px / 2); padding-right: calc(5vw - 56px / 2); padding-bottom: calc(64px - 56px / 2); padding-left: calc(5vw - 56px / 2); } }
	@media (min-width: 1440px) { .cvr-cta-banner__inner { padding-right: calc(72px - 56px / 2); padding-left: calc(72px - 56px / 2); } }
	.cvr-cta-banner__copy { margin-top: calc(24px / 2); margin-right: calc(24px / 2); margin-bottom: calc(24px / 2); margin-left: calc(24px / 2); }
	@media (min-width: 600px) { .cvr-cta-banner__copy { margin-top: calc(4vw / 2); margin-right: calc(4vw / 2); margin-bottom: calc(4vw / 2); margin-left: calc(4vw / 2); } }
	@media (min-width: 1400px) { .cvr-cta-banner__copy { margin-top: calc(56px / 2); margin-right: calc(56px / 2); margin-bottom: calc(56px / 2); margin-left: calc(56px / 2); } }
	.cvr-cta-banner__actions { margin-top: calc(24px / 2 - 22px); margin-right: calc(24px / 2); margin-bottom: calc(24px / 2); margin-left: calc(24px / 2 - 22px); }
	@media (min-width: 600px) { .cvr-cta-banner__actions { margin-top: calc(4vw / 2 - 22px); margin-right: calc(4vw / 2); margin-bottom: calc(4vw / 2); margin-left: calc(4vw / 2 - 22px); } }
	@media (min-width: 1400px) { .cvr-cta-banner__actions { margin-top: calc(56px / 2 - 22px); margin-right: calc(56px / 2); margin-bottom: calc(56px / 2); margin-left: calc(56px / 2 - 22px); } }
	@media (max-width: 640px) {
		.cvr-hero__actions { margin-top: -14px; margin-left: -14px; }
		.cvr-hero__actions > * { margin-top: 14px; margin-left: 14px; }
	}
}

/* 3. aspect-ratio (Safari 15+): padding ratio boxes and explicit heights. */
@supports not (aspect-ratio: 1) {
	.cvr-dest-card__link { padding-top: 125%; }
	.cvr-gallery__link { position: relative; padding-top: 75%; }
	.cvr-gallery__img { position: absolute; top: 0; left: 0; }
	/* The extra 8.8px is the baseline gap the inline iframe leaves in modern
	   browsers (17px/1.75 line box), so the section height matches. */
	.cvr-map__ratio { position: relative; padding-top: 37.5%; padding-bottom: 8.8px; }
	.cvr-map__frame { position: absolute; top: 0; left: 0; height: calc(100% - 8.8px); }
	.cvr-cta-banner__icon { height: 140px; }
	@media (min-width: 875px) { .cvr-cta-banner__icon { height: 16vw; } }
	@media (min-width: 1438px) { .cvr-cta-banner__icon { height: 230px; } }
	.cvr-tip__icon { height: calc(116px * 0.7836); }
	@media (min-width: 1036px) { .cvr-tip__icon { height: calc(11.2vw * 0.7836); } }
	@media (min-width: 1268px) { .cvr-tip__icon { height: calc(142px * 0.7836); } }
}