/* =====================================================================
   DirectionVR / DirectionRV — brand refresh
   Cream + forest-green design system. Loaded site-wide after the legacy
   theme (style.css), so plain-specificity rules here win; !important is
   used only where the theme itself uses it.

   Contents
     1. Design tokens
     2. Global brand surface + utilities
     3. Header
     4. Home — hero + search
     5. Home — stats band
     6. Home — most visited places
     7. Home — mobile app
     8. Home — features
     9. Home — testimonials
    10. Home — sign-up band
    11. Footer
    12. Responsive
    13. Reduced motion
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Design tokens                                                    */
/* ------------------------------------------------------------------ */
:root {
	/* Brand */
	--brand-cream: #F5EFE4;
	--brand-cream-soft: #FBF6EC;
	--brand-green: #13554c;
	--brand-green-dark: #0E4038;
	--brand-green-soft: rgba(19, 85, 76, 0.08);
	--brand-ink: #1B2F2A;
	--brand-muted: #6A7570;
	--brand-border: #E8E1D3;
	--brand-gold: #C8A661;

	/* Semantic aliases used by the new home-page components */
	--dv-surface: #ffffff;
	--dv-surface-muted: #FBF6EC;
	--dv-line: #EFE8DA;
	--dv-danger: #C05A5A;

	/* Radii */
	--dv-r-sm: 10px;
	--dv-r-md: 14px;
	--dv-r-lg: 20px;
	--dv-r-xl: 24px;
	--dv-r-pill: 999px;

	/* Spacing scale */
	--dv-s-1: 4px;
	--dv-s-2: 8px;
	--dv-s-3: 12px;
	--dv-s-4: 16px;
	--dv-s-5: 24px;
	--dv-s-6: 32px;
	--dv-s-7: 48px;
	--dv-s-8: 64px;
	--dv-s-9: 88px;

	/* Elevation — deliberately shallow */
	--dv-shadow-sm: 0 1px 2px rgba(19, 47, 42, 0.05);
	--dv-shadow-md: 0 6px 18px rgba(19, 47, 42, 0.07);
	--dv-shadow-lg: 0 18px 40px rgba(19, 47, 42, 0.09);

	/* Layout */
	--dv-container: 1600px;
	--dv-gutter: 32px;

	--dv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------ */
/* 2. Global brand surface + utilities                                 */
/* ------------------------------------------------------------------ */
body {
	background: var(--brand-cream);
	color: var(--brand-ink);
}

#wrapper {
	background: var(--brand-cream);
	overflow-x: hidden;
}

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

/* The legacy grid pins .container to a fixed width (1090px, then 1210px above
   1367px), which left the whole site boxed in the middle of large screens and
   — once the new sections started using .dv-container — misaligned with them.
   Make it fluid on the same scale so every row lines up.
   The dashboard is unaffected: it lays out inside .db-wrapper, not .container. */
.container {
	width: 100%;
	max-width: var(--dv-container);
	margin-inline: auto;
	padding-inline: var(--dv-gutter);
}

/* Long-form legal copy is a single full-width column, so the wider container
   would push it to ~150 characters a line. Cap it at a readable measure. */
.container.privacy-modern-content {
	max-width: 920px;
}

.dv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* One visible focus treatment for every new interactive element. */
.dv-hero a:focus-visible,
.dv-search input:focus-visible,
.dv-search select:focus-visible,
.dv-search button:focus-visible,
.dv-search a:focus-visible,
.dv-trending a:focus-visible,
.dv-link-btn:focus-visible,
.dv-place a:focus-visible,
.dv-fav:focus-visible,
.dv-app__badge:focus-visible,
.dv-signup input:focus-visible,
.dv-signup button:focus-visible,
.dv-footer a:focus-visible,
.dv-footer button:focus-visible {
	outline: 3px solid var(--brand-gold);
	outline-offset: 2px;
	border-radius: var(--dv-r-sm);
}

/* Shared section rhythm */
.dv-section {
	padding-block: var(--dv-s-8);
}

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

.dv-section__intro {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--dv-s-7);
}

.dv-section__title {
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--brand-ink);
	margin: 0;
}

.dv-section__lead {
	color: var(--brand-muted);
	font-size: 16px;
	line-height: 1.6;
	margin: var(--dv-s-2) 0 0;
}

.dv-eyebrow {
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--brand-green);
	margin: 0 0 var(--dv-s-2);
}

.dv-link-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--dv-s-2);
	padding: 10px 18px;
	border: 1px solid var(--brand-border);
	background: var(--dv-surface);
	color: var(--brand-green);
	border-radius: var(--dv-r-pill);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s var(--dv-ease), color 0.2s var(--dv-ease), border-color 0.2s var(--dv-ease);
}

.dv-link-btn svg {
	width: 16px;
	height: 16px;
}

.dv-link-btn:hover {
	background: var(--brand-green);
	border-color: var(--brand-green);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* 3. Header                                                           */
/* ------------------------------------------------------------------ */
/* The theme clones #header and fixes it to the top past ~140px of scroll, so
   every rule here is written to hold for both the in-flow header and the
   #header.cloned copy that becomes the sticky bar. */

#header-container.modern-header {
	background: #FDFCF8;
	box-shadow: none;
	border-bottom: 1px solid rgba(232, 225, 211, 0.75);
}

#header-container.modern-header #header,
#header-container.modern-header #header.cloned {
	background: #FDFCF8;
	border-bottom: 0;
	box-shadow: none;
	padding: 11px 0;
}

/* Sticky copy: same bar, just lifted off the page. */
#header-container.modern-header #header.cloned {
	background: rgba(253, 252, 248, 0.92);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid rgba(232, 225, 211, 0.9);
	box-shadow: 0 6px 20px rgba(19, 47, 42, 0.06);
}

/* Three zones: brand | nav | actions */
#header-container.modern-header #header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dv-s-5);
	position: relative;
}

#header-container.modern-header .left-side {
	display: flex;
	align-items: center;
	gap: var(--dv-s-4);
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
}

#header-container.modern-header #navigation.dv-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	float: none;
	margin: 0;
	min-width: 0;
}

#header-container.modern-header .right-side {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
	width: auto;
}

/* The theme's mmenu clone is unused here (the custom overlay handles mobile);
   keep it from ever becoming a stray flex item in the header row. */
#header-container.modern-header .mmenu-init {
	display: none !important;
}

/* Brand */
#logo .brand-lockup,
.mobile-nav-logo.brand-lockup {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
}

#logo {
	margin-top: 0;
}

#logo img,
#header-container.modern-header #logo img,
#header-container.modern-header #header.cloned #logo img {
	max-height: none;
	max-width: none;
	margin-top: 0;
}

#logo .brand-lockup .brand-mark,
.mobile-nav-logo.brand-lockup .brand-mark {
	height: 46px;
	width: auto;
	max-height: none;
	display: block;
}

/* Nav.
   Every selector here is written with TWO ids (#header-container + #navigation)
   because the theme styles this menu at that weight —
   `#header-container.modern-header #navigation.style-1>ul>li>a` — and a
   single-id rule silently loses to it no matter how many classes it carries.
   The theme's version wraps the menu in a #f6f8fb pill and forces 14px/600
   #2f3b50 links. */
#header-container.modern-header #navigation.dv-nav > ul {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	box-shadow: none;
}

#header-container.modern-header #navigation.dv-nav > ul > li {
	margin: 0;
	padding: 0;
	border: 0;
}

#header-container.modern-header #navigation.dv-nav > ul > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* Extra bottom padding leaves room for the active bar. */
	padding: 9px 16px 11px;
	border-radius: 0;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: -0.1px;
	color: #4A5852;
	background: transparent;
	box-shadow: none;
	line-height: 1.2;
	transition: color 0.18s var(--dv-ease);
}

/* Active item: dark label with a green bar underneath. The bar is inset by the
   link's horizontal padding so it tracks the label width, not the hit area. */
#header-container.modern-header #navigation.dv-nav > ul > li > a.current {
	background: transparent !important;
	color: var(--brand-ink) !important;
	font-weight: 600;
	box-shadow: none !important;
}

/* Uses #navigation (not just .dv-nav) to match the two-ID specificity of the
   theme's `#header-container.modern-header #navigation.style-1 .current:after
   { opacity: 0 }`, which would otherwise hide this bar. opacity is restated
   for the same reason. The theme also puts a FontAwesome caret in this
   pseudo-element, so content is reset. */
#header-container.modern-header #navigation.dv-nav > ul > li > a.current::after {
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 3px;
	padding: 0;
	border-radius: 3px;
	background: var(--brand-green);
	opacity: 1;
}

/* Hover previews the same bar in a lighter tone rather than switching to a
   pill, so the nav only ever speaks one visual language. */
#header-container.modern-header #navigation.dv-nav > ul > li > a:hover:not(.current),
#header-container.modern-header #navigation.dv-nav > ul > li:hover > a:not(.current) {
	background: transparent !important;
	color: var(--brand-ink) !important;
	box-shadow: none !important;
}

#header-container.modern-header #navigation.dv-nav > ul > li > a:hover:not(.current)::after {
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 3px;
	padding: 0;
	border-radius: 3px;
	background: rgba(19, 85, 76, 0.3);
	opacity: 1;
}

/* Right-side actions */
#header-container.modern-header .header-widget.modern-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	/* Theme sets height:54px + top:-1px here, which padded the bar taller
	   than its tallest child and nudged it off-axis. */
	height: auto;
	top: auto;
	text-align: initial;
}

#header-container.modern-header .header-widget .sign-in.dv-lang,
#header-container.modern-header .header-widget.modern-actions .dv-lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The theme's .header-widget .sign-in nudges itself down 10px and adds a
	   25px right margin — both would break alignment with the login button. */
	position: static;
	top: auto;
	margin: 0;
	gap: 7px;
	padding: 9px 14px;
	border-radius: var(--dv-r-pill);
	border: 1px solid var(--brand-border);
	background: #fff;
	color: #4A5852;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	transition: border-color 0.18s var(--dv-ease), color 0.18s var(--dv-ease), background 0.18s var(--dv-ease);
}

#header-container.modern-header .header-widget .sign-in.dv-lang svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

#header-container.modern-header .header-widget .sign-in.dv-lang:hover {
	border-color: rgba(19, 85, 76, 0.45);
	color: var(--brand-green);
	background: rgba(19, 85, 76, 0.04);
	box-shadow: none;
}

#header-container.modern-header .header-widget.modern-actions .account-cta,
#header-container.modern-header .header-widget.modern-actions .header-user-btn,
#header-container.modern-header .header-widget a.button.border.account-cta {
	background: var(--brand-green);
	color: #fff;
	border: 1px solid var(--brand-green);
	border-radius: var(--dv-r-pill);
	padding: 10px 20px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	/* The theme forces min-width:130px on header buttons. Without this the
	   icon+label pack to flex-start and sit off-centre in that width —
	   the theme's text-align:center can't position flex items. */
	justify-content: center;
	gap: 8px;
	box-shadow: 0 1px 2px rgba(19, 85, 76, 0.18);
	transition: background 0.18s var(--dv-ease), box-shadow 0.18s var(--dv-ease);
}

#header-container.modern-header .header-widget.modern-actions .account-cta svg,
#header-container.modern-header .header-widget.modern-actions .header-user-btn svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

#header-container.modern-header .header-widget.modern-actions .account-cta:hover,
#header-container.modern-header .header-widget.modern-actions .header-user-btn:hover,
#header-container.modern-header .header-widget a.button.border.account-cta:hover {
	background: var(--brand-green-dark);
	border-color: var(--brand-green-dark);
	color: #fff;
	box-shadow: 0 4px 12px rgba(19, 85, 76, 0.22);
}

.header-user-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
}

/* Mobile overlay's language link — the theme only ever sized an <i> here. */
.mobile-nav-lang svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* Safety net: an inline icon must never be able to blow up, even if a
   sizing rule is missed or the stylesheet hasn't applied yet. */
.dv-header svg,
.dv-footer svg,
.mobile-nav-overlay svg,
.dv-hero svg,
.dv-stats svg,
.dv-places svg,
.dv-features svg,
.dv-signup svg {
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* 4. Home — hero + search                                             */
/* ------------------------------------------------------------------ */
.dv-hero {
	position: relative;
	isolation: isolate;
	background-color: var(--brand-cream);
	/* image-set lets modern browsers take the 154 KB WebP and leaves the
	   original PNG for anything that doesn't understand it. */
	background-image: url('/header/header_1.png');
	background-image: image-set(url('/header/header_1.webp') type('image/webp'),
		url('/header/header_1.png') type('image/png'));
	background-size: cover;
	background-position: 68% center;
	background-repeat: no-repeat;
	padding-block: clamp(48px, 7vw, 88px) clamp(96px, 10vw, 132px);
}

/* Legibility veil — strongest on the left where the copy sits. */
.dv-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg,
		rgba(251, 246, 236, 0.97) 0%,
		rgba(251, 246, 236, 0.92) 26%,
		rgba(251, 246, 236, 0.55) 50%,
		rgba(251, 246, 236, 0.12) 70%,
		rgba(251, 246, 236, 0) 85%);
}

.dv-hero__copy {
	max-width: 620px;
}

.dv-hero__title {
	font-size: clamp(34px, 4.6vw, 58px);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -1.4px;
	color: var(--brand-ink);
	margin: 0 0 var(--dv-s-4);
	text-shadow: none;
}

.dv-hero__subtitle {
	color: var(--brand-muted);
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.6;
	max-width: 480px;
	margin: 0;
}

/* Search bar */
.dv-search {
	margin-top: var(--dv-s-6);
	max-width: 880px;
}

.dv-search__fields {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr auto;
	align-items: center;
	gap: 0;
	background: var(--dv-surface);
	border: 1px solid var(--brand-border);
	border-radius: 16px;
	box-shadow: var(--dv-shadow-lg);
	padding: 6px;
}

.dv-search__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--dv-s-2);
	padding: 0 var(--dv-s-3);
	border-right: 1px solid var(--dv-line);
	min-width: 0;
}

.dv-search__field:last-of-type {
	border-right: 0;
}

.dv-search__icon {
	display: inline-flex;
	color: var(--brand-muted);
	flex: 0 0 auto;
}

.dv-search__icon svg {
	width: 19px;
	height: 19px;
}

.dv-search__field #autocomplete-container {
	flex: 1 1 auto;
	min-width: 0;
}

.dv-search .dv-search__input,
.dv-search input[type="text"],
.dv-search input[type="email"] {
	width: 100%;
	border: 0;
	background: transparent;
	box-shadow: none;
	padding: 10px 0;
	margin: 0;
	height: auto;
	/* Explicit line-height so the bar's height doesn't drift with the
	   browser's default `normal` metric for the chosen font. */
	line-height: 1.4;
	font-size: 15px;
	font-weight: 500;
	color: var(--brand-ink);
	min-width: 0;
}

.dv-search .dv-search__input:focus {
	outline: none;
	box-shadow: none;
}

.dv-search .dv-search__input::placeholder {
	color: #9AA39D;
	font-weight: 400;
}

.dv-search__geo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	color: var(--brand-muted);
	transition: color 0.2s var(--dv-ease), background 0.2s var(--dv-ease);
}

.dv-search__geo svg {
	width: 17px;
	height: 17px;
}

.dv-search__geo:hover {
	color: var(--brand-green);
	background: var(--brand-green-soft);
}

.dv-search__field--category {
	position: relative;
}

.dv-search .dv-search__select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	border: 0;
	background: transparent;
	box-shadow: none;
	padding: 10px 22px 10px 0;
	margin: 0;
	height: auto;
	line-height: 1.4;
	font-size: 15px;
	font-weight: 500;
	color: var(--brand-ink);
	cursor: pointer;
	min-width: 0;
	text-overflow: ellipsis;
}

.dv-search .dv-search__select:focus {
	outline: none;
}

.dv-search__caret {
	position: absolute;
	right: var(--dv-s-3);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--brand-muted);
	display: inline-flex;
}

.dv-search__caret svg {
	width: 16px;
	height: 16px;
}

.dv-search .dv-search__submit {
	background: var(--brand-green);
	color: #fff;
	border: 0;
	border-radius: 11px;
	/* 13 + 15 + 13 = 41px, matching the fields' 10 + 21 + 10 content box so
	   the button lines up with them instead of setting the bar's height. */
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s var(--dv-ease);
}

.dv-search .dv-search__submit:hover {
	background: var(--brand-green-dark);
}

.dv-search .dv-search__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Suggestion dropdown (shared markup with the old home page) */
.dv-search .search-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 50;
	background: #fff;
	border: 1px solid var(--brand-border);
	border-radius: var(--dv-r-md);
	margin-top: 10px;
	max-height: 320px;
	overflow-y: auto;
	box-shadow: var(--dv-shadow-md);
	text-align: left;
}

.dv-search .search-suggest-item {
	display: flex;
	flex-direction: column;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--brand-ink);
	border-bottom: 1px solid var(--dv-line);
}

.dv-search .search-suggest-item:last-child {
	border-bottom: 0;
}

.dv-search .search-suggest-item:hover {
	background: var(--dv-surface-muted);
}

.dv-search .search-suggest-item strong {
	font-size: 14px;
}

.dv-search .search-suggest-item span {
	font-size: 12px;
	color: var(--brand-muted);
}

/* Trending chips */
.dv-trending {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dv-s-2);
	margin-top: var(--dv-s-5);
	max-width: 880px;
}

.dv-trending__label {
	color: var(--brand-muted);
	font-weight: 600;
	font-size: 14px;
	margin-right: var(--dv-s-1);
}

.dv-trending__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dv-s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dv-trending__list a {
	display: inline-block;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--brand-border);
	color: var(--brand-ink);
	border-radius: var(--dv-r-pill);
	padding: 8px 15px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s var(--dv-ease), color 0.2s var(--dv-ease), border-color 0.2s var(--dv-ease);
}

.dv-trending__list a:hover {
	background: var(--brand-green);
	border-color: var(--brand-green);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* 5. Home — stats band                                                */
/* ------------------------------------------------------------------ */
.dv-stats {
	position: relative;
	z-index: 5;
	margin-top: clamp(-72px, -5vw, -48px);
}

.dv-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--dv-surface);
	border: 1px solid var(--brand-border);
	border-radius: var(--dv-r-xl);
	padding: var(--dv-s-5) var(--dv-s-4);
	box-shadow: var(--dv-shadow-lg);
	text-align: center;
}

.dv-stat {
	padding: var(--dv-s-3) var(--dv-s-4);
	border-right: 1px solid var(--dv-line);
}

.dv-stat:last-child {
	border-right: 0;
}

.dv-stat__icon {
	display: inline-flex;
	color: var(--brand-green);
	margin-bottom: var(--dv-s-2);
}

.dv-stat__icon svg {
	width: 26px;
	height: 26px;
}

.dv-stat__number {
	color: var(--brand-ink);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: var(--dv-s-1);
	/* Reserve the digits' width so the count-up can't reflow the row. */
	font-variant-numeric: tabular-nums;
}

.dv-stat__label {
	color: var(--brand-muted);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
}

/* ------------------------------------------------------------------ */
/* 6. Home — most visited places                                       */
/* ------------------------------------------------------------------ */
.dv-places__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dv-s-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dv-place {
	display: flex;
}

.dv-place__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--dv-surface);
	border: 1px solid var(--brand-border);
	border-radius: var(--dv-r-lg);
	overflow: hidden;
	box-shadow: var(--dv-shadow-sm);
	transition: transform 0.25s var(--dv-ease), box-shadow 0.25s var(--dv-ease);
}

.dv-place__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--dv-shadow-md);
}

.dv-place__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--dv-surface-muted);
}

.dv-place__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dv-place__img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #EFE7D8 0%, #E4EDE7 100%);
	color: rgba(19, 85, 76, 0.35);
}

.dv-place__img--empty svg {
	width: 46px;
	height: 46px;
}

/* Readability scrim behind the name/address */
.dv-place__media::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 68%;
	background: linear-gradient(to top,
		rgba(20, 36, 32, 0.86) 0%,
		rgba(20, 36, 32, 0.45) 45%,
		rgba(20, 36, 32, 0) 100%);
	pointer-events: none;
}

.dv-place__rank,
.dv-place__distance {
	position: absolute;
	top: 12px;
	z-index: 2;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.dv-place__rank {
	left: 12px;
	background: rgba(20, 36, 32, 0.82);
	color: #fff;
	padding: 7px 10px;
	border-radius: var(--dv-r-sm);
}

.dv-place__distance {
	right: 12px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--brand-ink);
	padding: 7px 11px;
	border-radius: var(--dv-r-pill);
}

.dv-place__caption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: var(--dv-s-4);
}

.dv-place__name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 2px;
	color: #fff;
}

.dv-place__link {
	color: #fff;
	text-decoration: none;
}

/* Whole card is clickable, but only the title is in the tab order. */
.dv-place__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

.dv-place__link:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dv-place__address {
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.86);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dv-place__footer {
	display: flex;
	align-items: center;
	gap: var(--dv-s-2);
	padding: var(--dv-s-3) var(--dv-s-4);
	border-top: 1px solid var(--dv-line);
	background: var(--dv-surface);
}

.dv-stars {
	display: inline-flex;
	gap: 2px;
	flex: 0 0 auto;
}

.dv-star {
	width: 15px;
	height: 15px;
	fill: #DFD8C8;
}

.dv-star.is-on {
	fill: var(--brand-gold);
}

.dv-place__reviews {
	color: var(--brand-muted);
	font-size: 13px;
	font-weight: 500;
	flex: 1 1 auto;
	min-width: 0;
}

.dv-place__fav-form {
	margin: 0;
	position: relative;
	z-index: 4;
	flex: 0 0 auto;
}

.dv-fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--brand-border);
	background: #fff;
	color: var(--brand-muted);
	cursor: pointer;
	transition: color 0.2s var(--dv-ease), border-color 0.2s var(--dv-ease), background 0.2s var(--dv-ease);
}

.dv-fav svg {
	width: 17px;
	height: 17px;
}

.dv-fav:hover {
	color: var(--dv-danger);
	border-color: #E9C9C9;
	background: #FDF6F6;
}

.dv-fav.is-active {
	color: var(--dv-danger);
	border-color: #E9C9C9;
	background: #FDF6F6;
}

.dv-fav.is-active svg {
	fill: currentColor;
}

/* ------------------------------------------------------------------ */
/* 7. Home — mobile app                                                */
/* ------------------------------------------------------------------ */
.dv-app__panel {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: var(--dv-s-7);
	background: var(--dv-surface-muted);
	border: 1px solid var(--brand-border);
	border-radius: var(--dv-r-xl);
	padding: clamp(28px, 4vw, 52px);
}

.dv-app__visual svg {
	width: 100%;
	height: auto;
	max-width: 340px;
	display: block;
	margin-inline: auto;
}

.dv-app__text .dv-section__title {
	margin-bottom: var(--dv-s-2);
}

.dv-app__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dv-s-3);
	margin-top: var(--dv-s-5);
}

.dv-app__badge {
	display: inline-flex;
	border-radius: var(--dv-r-sm);
	transition: transform 0.2s var(--dv-ease), opacity 0.2s var(--dv-ease);
}

.dv-app__badge img {
	height: 44px;
	width: auto;
	display: block;
}

.dv-app__badge:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* 8. Home — features                                                  */
/* ------------------------------------------------------------------ */
.dv-features {
	background: var(--dv-surface);
	border-block: 1px solid var(--brand-border);
}

.dv-features__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--dv-s-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dv-feature {
	text-align: left;
}

.dv-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--dv-r-md);
	background: var(--brand-green-soft);
	color: var(--brand-green);
	margin-bottom: var(--dv-s-3);
}

.dv-feature__icon svg {
	width: 22px;
	height: 22px;
}

.dv-feature__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--brand-ink);
	margin: 0 0 var(--dv-s-2);
}

.dv-feature__text {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--brand-muted);
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* 9. Home — testimonials                                              */
/* ------------------------------------------------------------------ */
.dv-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dv-s-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dv-testimonial figure {
	height: 100%;
	margin: 0;
	background: var(--dv-surface);
	border: 1px solid var(--brand-border);
	border-radius: var(--dv-r-lg);
	padding: var(--dv-s-5);
	box-shadow: var(--dv-shadow-sm);
}

.dv-testimonial__quote {
	margin: 0 0 var(--dv-s-4);
	font-size: 15px;
	line-height: 1.65;
	color: var(--brand-ink);
	border: 0;
	padding: 0;
	quotes: '“' '”';
}

.dv-testimonial__quote::before {
	content: open-quote;
}

.dv-testimonial__quote::after {
	content: close-quote;
}

.dv-testimonial__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dv-testimonial__name {
	font-weight: 700;
	font-size: 14px;
	color: var(--brand-ink);
}

.dv-testimonial__role {
	font-size: 13px;
	color: var(--brand-muted);
}

/* ------------------------------------------------------------------ */
/* 10. Home — sign-up band                                             */
/* ------------------------------------------------------------------ */
.dv-signup {
	padding-bottom: var(--dv-s-9);
}

.dv-signup__panel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, auto);
	align-items: center;
	gap: var(--dv-s-5);
	background: var(--brand-green);
	border-radius: var(--dv-r-xl);
	padding: clamp(24px, 3.5vw, 40px);
}

.dv-signup__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	flex: 0 0 auto;
}

.dv-signup__icon svg {
	width: 24px;
	height: 24px;
}

.dv-signup__title {
	font-size: clamp(19px, 1.9vw, 24px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 var(--dv-s-1);
	line-height: 1.3;
}

.dv-signup__lead {
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.dv-signup__form {
	display: flex;
	align-items: stretch;
	gap: 0;
	background: #fff;
	border-radius: var(--dv-r-md);
	padding: 5px;
	min-width: 340px;
}

.dv-signup .dv-signup__input {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	box-shadow: none;
	margin: 0;
	padding: 12px 14px;
	height: auto;
	font-size: 15px;
	color: var(--brand-ink);
	min-width: 0;
}

.dv-signup .dv-signup__input:focus {
	outline: none;
	box-shadow: none;
}

.dv-signup .dv-signup__submit {
	flex: 0 0 auto;
	background: var(--brand-ink);
	color: #fff;
	border: 0;
	border-radius: var(--dv-r-sm);
	padding: 12px 22px;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s var(--dv-ease);
}

.dv-signup .dv-signup__submit:hover {
	background: #0b1f1a;
}

/* ------------------------------------------------------------------ */
/* 11. Footer                                                          */
/* ------------------------------------------------------------------ */
#footer.dv-footer {
	background: var(--brand-green-dark);
	border-top: 0;
	color: rgba(255, 255, 255, 0.78);
	padding: var(--dv-s-8) 0 0;
	font-size: 15px;
}

.dv-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr) auto;
	gap: var(--dv-s-6);
	padding-bottom: var(--dv-s-7);
}

.dv-footer__brand {
	max-width: 300px;
}

#footer.dv-footer .footer-logo,
#footer.dv-footer img.footer-logo {
	height: 46px;
	width: auto;
	max-height: none;
	margin-bottom: var(--dv-s-3);
	display: block;
}

.dv-footer__desc {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 0 var(--dv-s-4);
}

.dv-footer__social {
	display: flex;
	gap: var(--dv-s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dv-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff;
	transition: background 0.2s var(--dv-ease), border-color 0.2s var(--dv-ease);
}

.dv-footer__social a:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.4);
}

.dv-footer__social svg {
	width: 17px;
	height: 17px;
}

#footer.dv-footer .dv-footer__title {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.9px;
	margin: 0 0 var(--dv-s-4);
}

.dv-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#footer.dv-footer .dv-footer__links a {
	color: rgba(255, 255, 255, 0.78);
	font-size: 14.5px;
	text-decoration: none;
	transition: color 0.2s var(--dv-ease);
}

#footer.dv-footer .dv-footer__links a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dv-footer__apps {
	display: flex;
	flex-direction: column;
	gap: var(--dv-s-2);
}

.dv-footer__apps img {
	height: 40px;
	width: auto;
	display: block;
}

.dv-footer__apps a {
	display: inline-flex;
	transition: opacity 0.2s var(--dv-ease);
}

.dv-footer__apps a:hover {
	opacity: 0.85;
}

.dv-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding: var(--dv-s-5) 0;
	text-align: center;
}

#footer.dv-footer .dv-footer__copyright {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13.5px;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* 12. Responsive                                                      */
/* ------------------------------------------------------------------ */

/* Hamburger is desktop-hidden; the nav collapses into it below 1150px. */
#header-container.modern-header .mobile-nav-toggle {
	display: none;
}

@media (max-width: 1150px) {
	#header-container.modern-header #navigation,
	#header-container.modern-header .dv-nav {
		display: none !important;
	}
	#header-container.modern-header .right-side {
		display: none !important;
	}
	/* Logo and hamburger become the two ends of the row — no absolute
	   positioning, so the bar keeps its height on every width. */
	#header-container.modern-header .left-side {
		width: 100%;
		flex: 1 1 auto;
		justify-content: space-between;
	}
	#header-container.modern-header .mobile-nav-toggle {
		display: inline-flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 42px;
		height: 42px;
		background: #fff;
		border: 1px solid var(--brand-border);
		border-radius: var(--dv-r-md);
		padding: 0;
		cursor: pointer;
		flex: 0 0 auto;
		transition: border-color 0.18s var(--dv-ease), background 0.18s var(--dv-ease);
	}
	#header-container.modern-header .mobile-nav-toggle:hover {
		border-color: rgba(19, 85, 76, 0.45);
		background: rgba(19, 85, 76, 0.04);
	}
	#header-container.modern-header .mobile-nav-toggle span {
		display: block;
		width: 18px;
		height: 2px;
		background: var(--brand-ink);
		border-radius: 2px;
	}
	#header-container.modern-header #logo {
		width: auto;
		margin: 0;
	}
}

@media (max-width: 1024px) {
	.dv-features__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--dv-s-5);
	}
	.dv-footer__grid {
		grid-template-columns: 1fr 1fr 1fr;
		row-gap: var(--dv-s-7);
	}
	.dv-footer__brand {
		grid-column: 1 / -1;
		max-width: none;
	}
	.dv-app__panel {
		grid-template-columns: 1fr;
		gap: var(--dv-s-5);
	}
	.dv-app__visual {
		order: 2;
	}
	.dv-app__visual svg {
		max-width: 280px;
	}
}

@media (max-width: 900px) {
	.dv-search__fields {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--dv-s-1);
	}
	.dv-search__field:nth-of-type(2) {
		border-right: 0;
	}
	.dv-search__field:nth-of-type(1),
	.dv-search__field:nth-of-type(2) {
		border-bottom: 1px solid var(--dv-line);
	}
	/* Category sits alone on its row — let it use the full width. */
	.dv-search__field:nth-of-type(3) {
		grid-column: 1 / -1;
		border-bottom: 1px solid var(--dv-line);
	}
	.dv-search .dv-search__submit {
		grid-column: 1 / -1;
		width: 100%;
		margin-top: var(--dv-s-2);
	}
	.dv-places__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.dv-places__grid > .dv-place:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: calc(50% - var(--dv-s-3));
	}
	.dv-testimonials__grid {
		grid-template-columns: 1fr;
	}
	.dv-signup__panel {
		grid-template-columns: auto 1fr;
	}
	.dv-signup__form {
		grid-column: 1 / -1;
		min-width: 0;
	}
}

@media (max-width: 768px) {
	:root {
		--dv-gutter: 18px;
	}
	.dv-section {
		padding-block: var(--dv-s-7);
	}
	.dv-hero {
		background-position: 74% center;
		padding-block: var(--dv-s-6) var(--dv-s-9);
	}
	/* Photo can't carry the copy at this width — lift the veil to full cover. */
	.dv-hero::before {
		background: linear-gradient(180deg,
			rgba(251, 246, 236, 0.95) 0%,
			rgba(251, 246, 236, 0.88) 55%,
			rgba(251, 246, 236, 0.82) 100%);
	}
	.dv-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		padding: var(--dv-s-4) var(--dv-s-2);
	}
	.dv-stat {
		padding: var(--dv-s-3) var(--dv-s-2);
	}
	.dv-stat:nth-child(2) {
		border-right: 0;
	}
	.dv-stat:nth-child(1),
	.dv-stat:nth-child(2) {
		border-bottom: 1px solid var(--dv-line);
		padding-bottom: var(--dv-s-4);
	}
	.dv-stat:nth-child(3),
	.dv-stat:nth-child(4) {
		padding-top: var(--dv-s-4);
	}
	.dv-section__head {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--dv-s-3);
	}
	#logo .brand-lockup .brand-mark {
		height: 36px;
	}
	.dv-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.dv-search__fields {
		grid-template-columns: 1fr;
	}
	.dv-search__field {
		border-right: 0 !important;
		border-bottom: 1px solid var(--dv-line);
	}
	.dv-search__field:last-of-type {
		border-bottom: 0;
	}
	.dv-places__grid {
		grid-template-columns: 1fr;
	}
	.dv-places__grid > .dv-place:last-child:nth-child(odd) {
		max-width: none;
	}
	.dv-features__grid {
		grid-template-columns: 1fr;
		gap: var(--dv-s-5);
	}
	.dv-signup__panel {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.dv-signup__form {
		flex-direction: column;
		background: transparent;
		padding: 0;
		gap: var(--dv-s-2);
	}
	.dv-signup .dv-signup__input {
		background: #fff;
		border-radius: var(--dv-r-sm);
		padding: 14px;
	}
	.dv-signup .dv-signup__submit {
		width: 100%;
		padding: 14px 22px;
	}
	.dv-footer__grid {
		grid-template-columns: 1fr;
		row-gap: var(--dv-s-6);
	}
}

@media (max-width: 380px) {
	.dv-stats__grid {
		grid-template-columns: 1fr;
	}
	.dv-stat {
		border-right: 0;
		border-bottom: 1px solid var(--dv-line);
		padding-bottom: var(--dv-s-4);
	}
	.dv-stat:last-child {
		border-bottom: 0;
	}
	.dv-stat:nth-child(1),
	.dv-stat:nth-child(2) {
		padding-bottom: var(--dv-s-4);
	}
	.dv-stat:nth-child(3),
	.dv-stat:nth-child(4) {
		padding-top: var(--dv-s-4);
	}
}

/* ------------------------------------------------------------------ */
/* 14. Listing page — align with the warm brand                        */
/* ------------------------------------------------------------------ */
/* The listing page ships its own design system in style.css
   (.listing-modern-page, ~230 rules). Its colours were retuned in place from
   cool blue-grey to this palette; what stays here is the structural
   toning-down — flat cream page, no floating decoration, and the same radius
   and elevation language as the rest of the site. */

.listing-modern-page {
	--listing-accent: var(--brand-green);
	--listing-ink: var(--brand-ink);
	--listing-muted: var(--brand-muted);
	--listing-border: var(--brand-border);
	--listing-shadow: var(--dv-shadow-md);
	--listing-shadow-soft: var(--dv-shadow-sm);
	/* Was a cream base under two large radial glows (one of them blue). */
	background: var(--brand-cream);
}

/* Two 240px circles floated behind the title on an infinite alternate
   animation — the "floating objects" look this redesign is avoiding. */
.listing-modern-page #titlebar.listing-modern-titlebar:before,
.listing-modern-page #titlebar.listing-modern-titlebar:after {
	display: none;
}

/* Cards: one radius + elevation language across the site. */
.listing-modern-page #titlebar.listing-modern-titlebar,
.listing-modern-page .listing-section,
.listing-modern-page .listing-cover,
.listing-modern-page .add-review-box.listing-modern-addreview,
.listing-modern-page .listing-modern-sidebar .boxed-widget {
	border-radius: var(--dv-r-lg);
	box-shadow: var(--dv-shadow-sm);
	border-color: var(--brand-border);
}

.listing-modern-page #titlebar.listing-modern-titlebar,
.listing-modern-page .listing-section {
	background: var(--dv-surface);
}

/* Accent hairline on each card — drop the leftover blue stop. */
.listing-modern-page .listing-section:before,
.listing-modern-page .add-review-box.listing-modern-addreview:before,
.listing-modern-page .listing-modern-sidebar .listing-share.listing-modern-share:before {
	background: linear-gradient(90deg,
		rgba(19, 85, 76, 0.30) 0%,
		rgba(200, 166, 97, 0.22) 60%,
		rgba(19, 85, 76, 0) 100%);
}

/* An infinitely pulsing pagination button is noise, not feedback. */
.listing-modern-page .listing-modern-pagination .pagination ul li a.current-page {
	animation: none;
	background: var(--brand-green);
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* 13. Reduced motion                                                  */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.dv-place__card,
	.dv-app__badge,
	.dv-link-btn,
	.dv-fav,
	.dv-trending__list a,
	.dv-search__submit {
		transition: none !important;
	}
	.dv-place__card:hover,
	.dv-app__badge:hover {
		transform: none;
	}
}