/**
 * Haven Theme — Custom Styles
 * Everyday Luxury Vacation Rentals · Homepage Refresh v3
 *
 * Design principle: White and warm light-gray backgrounds throughout.
 * Color moments come from photography, never solid dark fills.
 * All section headings are centred: italic gold subheading → bold uppercase
 * navy title → short gold divider line. Mirrors Luxury Simplified Retreats.
 *
 * Table of Contents
 * ──────────────────────────────────────────────────────────────────
 *  0.  Brand Token Extensions
 *  1.  Global Button Overrides  (kill the terracotta, add EL Teal)
 *  2.  Homepage Shell
 *  3.  Section Base Spacing
 *  4.  Section Heading System  (.haven-section-heading)
 *  5.  Gold Divider  (.haven-divider)
 *  6.  Text Links  (.haven-hp-text-link)
 *  7.  Hero — Video  (Section 1)
 *  8.  Brand Statement  (Section 2)
 *  9.  Destinations Grid — 8 interactive tiles  (Section 3)
 * 10.  Featured Properties  (Section 4)
 * 11.  Property Showcase  (Section 5)
 * 12.  Guest Testimonials  (Section 6)
 * 13.  Concierge CTA — Full-Bleed Image  (Section 7)
 * 14.  Responsive — Tablet  (≤ 1024 px)
 * 15.  Responsive — Mobile  (≤ 640 px)
 * 16.  Accessibility — Reduced Motion
 * ──────────────────────────────────────────────────────────────────
 *
 * @package Haven_Theme
 * @since   3.0.0
 */


/* ==========================================================================
   0.  Brand Token Extensions
   ========================================================================== */

:root {
	/*
	 * EL palette tokens.
	 *
	 * The legacy "EL Teal" (#3D8FA6) was painted on every primary button
	 * by --haven-btn-primary-bg below, and the navy (#111C26) was painted
	 * on every outline-luxury button border. Both pre-date the warm-earth
	 * brand direction and were the source of the rogue blue Samuel
	 * reported on hero pills, header CTAs, "View All Destinations",
	 * "Browse Homes", etc. (2026-05-02).
	 *
	 * A few older surfaces still reference the historical teal token names.
	 * Repoint those token names to the newer sage family so the old hooks
	 * stop reintroducing blue anywhere on the site.
	 */
	--haven-color-el-teal:        #6B8C7A;
	--haven-color-el-teal-dark:   #4E6B5A;
	--haven-color-el-teal-light:  #9DB2A4;

	/* Brand-gold (sand-dune) anchors all button color tokens. */
	--haven-color-el-gold:        var(--wp--preset--color--gold, #B89A62);
	--haven-color-el-gold-dark:   var(--wp--preset--color--gold-dark, #8F7648);
	--haven-color-el-terracotta:  var(--wp--preset--color--terracotta, #D94F3D);

	/*
	 * Semantic button aliases — repointed to brand gold (2026-05-02).
	 * Previously: primary-bg → teal, outline → navy. Both produced the
	 * "blue accent line" effect Samuel saw across the site.
	 */
	--haven-btn-primary-bg:       var(--haven-color-el-gold);
	--haven-btn-primary-hover:    var(--haven-color-el-gold-dark);
	--haven-btn-outline-color:    var(--haven-color-el-gold);

	/*
	 * Legacy shared-component aliases.
	 *
	 * Core theme bundles and utility styles still reach for the old generic
	 * "primary / secondary / info" tokens. When those resolve to the starter
	 * palette, links, pills, spinners, and utility buttons drift back toward
	 * blue or purple. Pin them to EL's warm palette here so every layer stays
	 * consistent even before page-specific CSS takes over.
	 */
	--haven-primary:              var(--haven-color-el-gold);
	--haven-primary-rgb:          184, 154, 98;
	--haven-primary-50:           #FBF7EF;
	--haven-primary-100:          #F5ECDA;
	--haven-primary-200:          #E8D9C4;
	--haven-primary-300:          #DBC299;
	--haven-primary-400:          #C9AB73;
	--haven-primary-500:          var(--haven-color-el-gold);
	--haven-primary-600:          var(--haven-color-el-gold-dark);
	--haven-primary-700:          #8F7648;
	--haven-primary-800:          #6F5D3A;
	--haven-primary-900:          #56482D;
	--haven-primary-dark:         var(--haven-color-el-gold-dark);
	--haven-secondary:            var(--haven-color-el-terracotta);
	--haven-info:                 var(--haven-color-el-gold);
	--haven-info-rgb:             var(--haven-color-accent-rgb, 184, 154, 98);
	--haven-info-light:           #FBF7EF;
	--haven-info-dark:            var(--haven-color-el-gold-dark);
	--haven-shadow-focus:         0 0 0 3px rgba(184, 154, 98, 0.3);
	--haven-color-primary:        var(--haven-color-el-gold);
	--haven-color-primary-dark:   var(--haven-color-el-gold-dark);
	--haven-color-info:           var(--haven-color-el-gold);
	--color-primary:              var(--haven-color-el-gold);
	--color-primary-dark:         var(--haven-color-el-gold-dark);
	--color-focus:                var(--haven-color-el-gold);
	--el-sky:                     #6B8C7A;

	/* Section background tokens */
	--haven-bg-white:   #FFFFFF;
	--haven-bg-soft:    #F4F5F3; /* warm light gray — maps to "cream" preset */
}


/* ==========================================================================
   1.  Global Button Overrides — Replace Terracotta with EL Teal
   ========================================================================== */

/* ── Primary luxury button → EL Teal ──────────────────────────────────── */
.wp-block-button.is-style-luxury .wp-block-button__link,
.wp-block-button__link.is-style-luxury {
	background-color: var(--haven-btn-primary-bg) !important;
	border-color:     var(--haven-btn-primary-bg) !important;
	color:            #ffffff !important;
}

.wp-block-button.is-style-luxury .wp-block-button__link:hover,
.wp-block-button.is-style-luxury .wp-block-button__link:focus,
.wp-block-button__link.is-style-luxury:hover,
.wp-block-button__link.is-style-luxury:focus {
	background-color: var(--haven-btn-primary-hover) !important;
	border-color:     var(--haven-btn-primary-hover) !important;
}

/* ── Outline luxury button — navy on light bg by default ───────────────── */
.wp-block-button.is-style-outline-luxury .wp-block-button__link,
.wp-block-button__link.is-style-outline-luxury {
	background-color: transparent !important;
	border:           2px solid var(--haven-btn-outline-color) !important;
	color:            var(--haven-btn-outline-color) !important;
}

.wp-block-button.is-style-outline-luxury .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline-luxury:hover {
	background-color: var(--haven-btn-outline-color) !important;
	color:            #ffffff !important;
}

/* ── Streamline plugin search / submit buttons → EL Teal ───────────────── */
.streamline-search-btn,
.streamline-search-submit,
.sl-search-btn,
.sl-btn-primary,
.sl-form .sl-submit,
[class*="hsc-"] button[type="submit"],
.hsc-hero-search-button,
.hsc-search-form button[type="submit"],
.hsc-search-form input[type="submit"],
[class*="streamline-"] button[type="submit"],
[class*="streamline-"] input[type="submit"],
[class*="streamline-"] .btn-primary,
[class*="streamline-"] .search-btn,
[class*="streamline-"] .search-button {
	background-color: var(--haven-btn-primary-bg) !important;
	border-color:     var(--haven-btn-primary-bg) !important;
	color:            #ffffff !important;
}

[class*="hsc-"] button[type="submit"]:hover,
.hsc-hero-search-button:hover,
.hsc-search-form button[type="submit"]:hover,
.hsc-search-form input[type="submit"]:hover,
[class*="streamline-"] button[type="submit"]:hover,
[class*="streamline-"] input[type="submit"]:hover,
[class*="streamline-"] .btn-primary:hover,
.streamline-search-btn:hover,
.streamline-search-submit:hover {
	background-color: var(--haven-btn-primary-hover) !important;
	border-color:     var(--haven-btn-primary-hover) !important;
}

/* ── CTA section — outline becomes white ghost on image bg ─────────────── */
.haven-hp-cta .wp-block-button.is-style-outline-luxury .wp-block-button__link,
.haven-hp-cta .wp-block-button__link.is-style-outline-luxury {
	color:        rgba(255, 255, 255, 0.88) !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
}

.haven-hp-cta .wp-block-button.is-style-outline-luxury .wp-block-button__link:hover,
.haven-hp-cta .wp-block-button__link.is-style-outline-luxury:hover {
	background-color: rgba(255, 255, 255, 0.14) !important;
	border-color:     rgba(255, 255, 255, 0.85) !important;
	color:            #ffffff !important;
}


/* ==========================================================================
   2.  Homepage Shell
   ========================================================================== */

.haven-homepage-shell {
	overflow-x: hidden;
}


/* ==========================================================================
   3.  Section Base Spacing
   ========================================================================== */

.haven-hp-section {
	padding-top:    clamp(4rem, 8vw, 6.5rem);
	padding-bottom: clamp(4rem, 8vw, 6.5rem);
}


/* ==========================================================================
   4.  Section Heading System
   ========================================================================== */

/*
 * Pattern (used on sections 3–6):
 *   <div class="haven-section-heading">
 *     <p class="haven-section-heading__sub">  ← italic gold
 *     <h2 class="haven-section-heading__title"> ← uppercase navy
 *     <div class="haven-divider">              ← short gold rule
 *   </div>
 */

.haven-section-heading {
	text-align:    center;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Italic gold subheading */
.haven-section-heading__sub {
	font-family:  "Playfair Display", Georgia, serif !important;
	font-style:   italic !important;
	font-weight:  400 !important;
	font-size:    clamp(1.12rem, 1.25vw, 1.32rem) !important;
	color:        var(--wp--preset--color--gold, #B89A62) !important;
	margin:       0 0 0.5rem;
	line-height:  1.4;
}

/* Uppercase navy main heading */
.haven-section-heading__title {
	font-family:    "Playfair Display", Georgia, serif !important;
	font-weight:    400 !important;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color:          var(--wp--preset--color--navy, #111C26) !important;
	font-size:      clamp(2.35rem, 3.8vw, 3.4rem) !important;
	line-height:    1.1;
	margin:         0 0 0.25rem;
}


/* ==========================================================================
   5.  Gold Divider
   ========================================================================== */

.haven-divider {
	width:      48px;
	height:     1px;
	background: var(--wp--preset--color--gold, #B89A62);
	margin:     1rem auto 0;
	border:     none;
	display:    block;
}

/* Light variant — for the CTA section over a dark image */
.haven-divider--light {
	background:    rgba(255, 255, 255, 0.55);
	margin-bottom: 1.5rem;
}


/* ==========================================================================
   6.  Text Links
   ========================================================================== */

.haven-hp-text-link {
	font-family:     Lato, sans-serif;
	font-size:       0.8125rem;
	letter-spacing:  0.1em;
	text-transform:  uppercase;
	color:           var(--haven-color-el-teal);
	text-decoration: none;
	border-bottom:   1px solid currentColor;
	padding-bottom:  2px;
	transition:      color 0.2s ease;
}

.haven-hp-text-link:hover {
	color: var(--haven-color-el-teal-dark);
}


/* ==========================================================================
   7.  Hero — Video  (Section 1)
   ========================================================================== */

/* ── Outer wrapper — full-viewport ────────────────────────────────────── */
/*
 * The outer haven-homepage-shell uses layout:default (flow), so children
 * aren't constrained. Belt-and-suspenders: we also force 100vw.
 *
 * Height cascade: 100vh → 100dvh (Chrome 108+/Safari 15.4+, mobile chrome
 * collapse aware) → 100svh (Firefox 101+, most conservative mobile value).
 */
.haven-hp-hero {
	position:     relative;
	display:      block;
	width:        100vw;
	max-width:    none !important;
	margin-left:  0 !important;
	margin-right: 0 !important;
	height:       100vh;
	height:       100dvh;
	height:       100svh;
	min-height:   620px;
	overflow:     hidden;
	background:   #111C26; /* visible while video loads */
}

/* ── Background layer ──────────────────────────────────────────────────── */
.haven-hp-hero__bg {
	position: absolute;
	top:      0;
	left:     0;
	width:    100%;
	height:   100%;
	z-index:  0;
}

/* ── HTML5 video — covers entire hero ─────────────────────────────────── */
.haven-hp-hero__video {
	position:        absolute;
	top:             0;
	left:            0;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center center;
}

/* ── Video failure fallback ────────────────────────────────────────────── */
/* JS adds .is-video-fallback when the video errors, stalls, or is blocked. */
/* We hide the dead video element and show the poster image as a bg instead. */
.haven-hp-hero.is-video-fallback .haven-hp-hero__video {
	display: none;
}

.haven-hp-hero.is-video-fallback .haven-hp-hero__bg {
	background-image:    url('/wp-content/uploads/2026/03/homepage-hero-1.jpg');
	background-size:     cover;
	background-position: center center;
}

/* ── Gradient overlay — keeps text legible over any video frame ────────── */
.haven-hp-hero__overlay {
	position: absolute;
	top:      0;
	left:     0;
	width:    100%;
	height:   100%;
	background: linear-gradient(
		to bottom,
		rgba(17, 28, 38, 0.12) 0%,
		rgba(17, 28, 38, 0.48) 40%,
		rgba(17, 28, 38, 0.82) 100%
	);
	z-index: 1;
}

/* ── Content block ─────────────────────────────────────────────────────── */
.haven-hp-hero__content {
	position:        relative;
	z-index:         2;
	width:           100%;
	height:          100%;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         2rem 1.5rem 8rem;
	text-align:      center;
	animation:       havenHeroFade 1.2s ease-out 0.3s both;
}

@keyframes havenHeroFade {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0);    }
}

.haven-hp-hero__eyebrow {
	font-family:    Lato, sans-serif;
	font-size:      0.625rem;
	font-weight:    400;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color:          #B89A62;
	margin-bottom:  1.25rem;
	line-height:    1;
}

.haven-hp-hero__headline {
	font-family: "Playfair Display", Georgia, serif;
	font-size:   clamp(2.75rem, 6vw, 5.5rem);
	font-weight: 400;
	line-height: 1.1;
	color:       #ffffff;
	margin:      0 0 1.25rem;
	max-width:   18ch;
}

.haven-hp-hero__headline em {
	font-style: italic;
	color:      #D7C39B;
}

.haven-hp-hero__tagline {
	font-family:    Lato, sans-serif;
	font-size:      clamp(0.9375rem, 1.5vw, 1.0625rem);
	font-weight:    300;
	letter-spacing: 0.04em;
	color:          rgba(255, 255, 255, 0.82);
	margin-bottom:  2.5rem;
	max-width:      44ch;
}

/* ── Search bar wrapper ────────────────────────────────────────────────── */
.haven-hp-hero__search {
	width:     100%;
	max-width: 960px;
}

/* ── Single-row search form (override Streamline's grid layout) ─────────
 *
 * Streamline injects an inline <style> using:
 *   display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr))
 * We defeat it with !important flex rules.
 */
.haven-hp-hero__search .hsc-hero-search-wrap {
	width: 100%;
}

.haven-hp-hero__search .hsc-hero-search-form {
	display:                flex !important;
	flex-direction:         row !important;
	flex-wrap:              nowrap !important;
	align-items:            stretch !important;
	background:             rgba(255, 255, 255, 0.14) !important;
	backdrop-filter:        blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border:                 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius:          2px !important;
	overflow:               hidden !important;
	gap:                    0 !important;
	padding:                0 !important;
	/* Kill Streamline's injected grid */
	grid-template-columns:  unset !important;
}

.haven-hp-hero__search .hsc-hero-search-field {
	flex:             1 1 0 !important;
	min-width:        0 !important;
	display:          flex !important;
	flex-direction:   column !important;
	justify-content:  center !important;
	padding:          0.6rem 0.9rem !important;
	border-right:     1px solid rgba(255, 255, 255, 0.16) !important;
	border-bottom:    none !important;
	background:       transparent !important;
}

.haven-hp-hero__search .hsc-hero-search-field label {
	font-family:    Lato, sans-serif !important;
	font-size:      0.5rem !important;
	font-weight:    400 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color:          rgba(255, 255, 255, 0.58) !important;
	display:        block !important;
	margin-bottom:  0.18rem !important;
	line-height:    1 !important;
	white-space:    nowrap !important;
}

.haven-hp-hero__search .hsc-hero-search-field input,
.haven-hp-hero__search .hsc-hero-search-field select {
	background:         transparent !important;
	border:             none !important;
	outline:            none !important;
	box-shadow:         none !important;
	color:              #ffffff !important;
	font-family:        Lato, sans-serif !important;
	font-size:          0.8125rem !important;
	font-weight:        400 !important;
	padding:            0 !important;
	width:              100% !important;
	appearance:         none !important;
	-webkit-appearance: none !important;
	line-height:        1.3 !important;
}

.haven-hp-hero__search .hsc-hero-search-field select option {
	color:      #111C26 !important;
	background: #ffffff !important;
}

.haven-hp-hero__search .hsc-hero-search-field input::placeholder {
	color: rgba(255, 255, 255, 0.46) !important;
}

/* Submit button — EL Teal fill, right rounded corners only */
.haven-hp-hero__search .hsc-hero-search-submit {
	flex:         0 0 auto !important;
	display:      flex !important;
	align-items:  center !important;
	padding:      0 !important;
	border-right: none !important;
}

.haven-hp-hero__search .hsc-hero-search-button {
	background-color: var(--haven-color-el-teal) !important;
	border:           none !important;
	border-radius:    0 2px 2px 0 !important;
	color:            #ffffff !important;
	font-family:      Lato, sans-serif !important;
	font-size:        0.6875rem !important;
	font-weight:      400 !important;
	letter-spacing:   0.14em !important;
	text-transform:   uppercase !important;
	padding:          0 1.75rem !important;
	height:           100% !important;
	min-height:       60px !important;
	cursor:           pointer !important;
	white-space:      nowrap !important;
	transition:       background-color 0.2s ease !important;
}

.haven-hp-hero__search .hsc-hero-search-button:hover {
	background-color: var(--haven-color-el-teal-dark) !important;
}

/* ── Scroll indicator ──────────────────────────────────────────────────── */
.haven-hp-hero__scroll {
	position:        absolute;
	bottom:          1.75rem;
	left:            50%;
	transform:       translateX(-50%);
	z-index:         2;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             0.3rem;
}

.haven-hp-hero__scroll-mouse {
	width:           22px;
	height:          34px;
	border:          1px solid rgba(255, 255, 255, 0.4);
	border-radius:   12px;
	display:         flex;
	align-items:     flex-start;
	justify-content: center;
	padding-top:     5px;
}

.haven-hp-hero__scroll-dot {
	display:       block;
	width:         4px;
	height:        6px;
	background:    rgba(255, 255, 255, 0.65);
	border-radius: 2px;
	animation:     havenScrollDot 2s ease-in-out 1.5s infinite;
}

@keyframes havenScrollDot {
	0%   { transform: translateY(0);   opacity: 1;   }
	50%  { transform: translateY(9px); opacity: 0.3; }
	100% { transform: translateY(0);   opacity: 1;   }
}


/* ==========================================================================
   8.  Brand Statement — Section 2
   ========================================================================== */

.haven-hp-brand-statement__inner {
	text-align: center;
}

/* Small uppercase kicker above the italic headline */
.haven-hp-brand-statement__kicker {
	font-family:    Lato, sans-serif !important;
	font-size:      0.625rem !important;
	font-weight:    400 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color:          var(--wp--preset--color--gold, #B89A62) !important;
	margin-bottom:  0.75rem;
	line-height:    1.6;
}

/* Large italic Playfair headline */
.haven-hp-brand-statement__headline {
	font-family:   "Playfair Display", Georgia, serif !important;
	font-style:    italic !important;
	font-size:     clamp(2rem, 4.5vw, 3.375rem) !important;
	font-weight:   400 !important;
	line-height:   1.15 !important;
	color:         var(--wp--preset--color--navy, #111C26) !important;
	margin-bottom: 0;
}

.haven-hp-brand-statement__body {
	max-width:    60ch;
	margin-left:  auto;
	margin-right: auto;
	margin-top:   1.5rem;
}

.haven-hp-brand-statement .haven-divider {
	margin-top:    1.25rem;
	margin-bottom: 0;
}


/* ==========================================================================
   9.  Destinations Grid — 8 interactive tiles  (Section 3)
   ========================================================================== */

/*
 * Architecture:
 *   .haven-dest-grid-wrap      — viewport-width breakout (escapes Gutenberg)
 *     .haven-dest-grid         — CSS grid 4 × 2
 *       <a.haven-dest-tile>    — each clickable tile
 *         .haven-dest-tile__img   — image bg, scales on hover
 *         .haven-dest-tile__overlay  — darkens on hover
 *         .haven-dest-line--*  — 4 animated border lines
 *         .haven-dest-tile__content — keywords + name + CTA
 */

/* Spacing adjustments for the containing section */
.haven-hp-destinations {
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

/* ── Viewport-width breakout ───────────────────────────────────────────── */
.haven-dest-grid-wrap {
	width:         100vw;
	max-width:     none !important;
	margin-left:   calc(50% - 50vw) !important;
	margin-right:  calc(50% - 50vw) !important;
	padding-left:  0;
	padding-right: 0;
}

/* ── CSS grid — 4 columns with generous gap ────────────────────────────── */
.haven-dest-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   18px;
	padding:               0 18px;
}

/* ── Individual tile ──────────────────────────────────────────────────── */
.haven-dest-tile {
	position:        relative;
	display:         block;
	overflow:        hidden;
	min-height:      490px;
	text-decoration: none;
	cursor:          pointer;
	border-radius:   0;
	outline:         none;
}

/* ── Image layer — contains an <img> that scales on hover ────────────── */
.haven-dest-tile__img {
	position: absolute;
	top:      0;
	left:     0;
	width:    100%;
	height:   100%;
	overflow: hidden;
	z-index:  0;
}

/* The actual <img> fills the container and scales on hover */
.haven-dest-tile__img img {
	position:        absolute;
	top:             0;
	left:            0;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center center;
	display:         block;
	transition:      transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.haven-dest-tile:hover .haven-dest-tile__img img {
	transform: scale(1.055);
}

/* ── Darkening overlay ───────────────────────────────────────────────── */
/*    At rest: gentle shadow (0.32) — brightens the feel
 *    On hover: deeper (0.62) — focuses attention on keywords            */
.haven-dest-tile__overlay {
	position:   absolute;
	top:        0;
	left:       0;
	width:      100%;
	height:     100%;
	background: rgba(17, 28, 38, 0.32);
	transition: background 0.5s ease;
	z-index:    1;
}

.haven-dest-tile:hover .haven-dest-tile__overlay {
	background: rgba(17, 28, 38, 0.62);
}

/* ── Animated border frame lines ─────────────────────────────────────── */
/*    Each line uses scaleX/scaleY(0) at rest → scaleX/scaleY(1) on hover.
 *    transform-origin:center ensures they grow symmetrically from the
 *    mid-point of each edge outward, meeting at all four corners.        */

.haven-dest-line {
	position:         absolute;
	background:       rgba(255, 255, 255, 0.78);
	z-index:          3;
	transition:       transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Top line — horizontal bar, inset 18 px from left/right edges */
.haven-dest-line--top {
	top:              18px;
	left:             18px;
	width:            calc(100% - 36px);
	height:           1.5px;
	transform:        scaleX(0);
	transform-origin: center center;
}

/* Bottom line */
.haven-dest-line--bottom {
	bottom:           18px;
	left:             18px;
	width:            calc(100% - 36px);
	height:           1.5px;
	transform:        scaleX(0);
	transform-origin: center center;
}

/* Left line — vertical bar, inset 18 px from top/bottom edges */
.haven-dest-line--left {
	left:             18px;
	top:              18px;
	width:            1.5px;
	height:           calc(100% - 36px);
	transform:        scaleY(0);
	transform-origin: center center;
}

/* Right line */
.haven-dest-line--right {
	right:            18px;
	top:              18px;
	width:            1.5px;
	height:           calc(100% - 36px);
	transform:        scaleY(0);
	transform-origin: center center;
}

/* Reveal all 4 lines on hover — they meet at the corners */
.haven-dest-tile:hover .haven-dest-line--top,
.haven-dest-tile:hover .haven-dest-line--bottom {
	transform: scaleX(1);
}

.haven-dest-tile:hover .haven-dest-line--left,
.haven-dest-tile:hover .haven-dest-line--right {
	transform: scaleY(1);
}

/* ── Text content — pinned to bottom of tile ─────────────────────────── */
.haven-dest-tile__content {
	position:       absolute;
	bottom:         0;
	left:           0;
	right:          0;
	z-index:        2;
	padding:        0 1.75rem 2rem;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
}

/* ── Hidden keywords — reveal upward from bottom on hover ──────────────── */
/*    max-height transition from 0 → 2.5rem, combined with translateY      */
.haven-dest-keywords {
	font-family:    Lato, sans-serif;
	font-size:      0.5625rem;
	font-weight:    400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color:          rgba(255, 255, 255, 0.80);
	max-height:     0;
	overflow:       hidden;
	opacity:        0;
	transform:      translateY(8px);
	margin:         0;
	transition:
		max-height 0.5s ease,
		opacity    0.4s ease 0.05s,
		transform  0.4s ease 0.05s,
		margin     0.4s ease;
}

.haven-dest-tile:hover .haven-dest-keywords {
	max-height:    2.5rem;
	opacity:       1;
	transform:     translateY(0);
	margin-bottom: 0.65rem;
}

/* ── Destination name — nudges up when keywords reveal ───────────────── */
.haven-dest-tile__name {
	font-family:    "Playfair Display", Georgia, serif;
	font-size:      clamp(1.0625rem, 1.4vw, 1.3125rem);
	font-weight:    400;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color:          #ffffff;
	margin:         0 0 0.85rem;
	line-height:    1.2;
	transition:     transform 0.4s ease;
}

/* ── Ghost CTA button ─────────────────────────────────────────────────── */
.haven-dest-tile__cta {
	display:        inline-block;
	font-family:    Lato, sans-serif;
	font-size:      0.5625rem;
	font-weight:    400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color:          #ffffff;
	border:         1px solid rgba(255, 255, 255, 0.68);
	padding:        0.5em 1.6em;
	transition:     background-color 0.3s ease, border-color 0.3s ease;
}

.haven-dest-tile:hover .haven-dest-tile__cta {
	background-color: rgba(255, 255, 255, 0.18);
	border-color:     rgba(255, 255, 255, 0.95);
}

/* --------------------------------------------------------------------------
   Destination refinements (homepage-only override layer)
   - force destination images visible with native lazy-loading
   - place keyword reveal below title and above CTA
   - increase typography for a clearer premium read
   -------------------------------------------------------------------------- */
body.home .haven-dest-tile__img img[loading="lazy"] {
	opacity: 1 !important;
}

body.home .haven-hp-destinations .haven-section-heading__sub {
	font-size: clamp(1.12rem, 1.25vw, 1.32rem) !important;
	letter-spacing: 0.04em;
}

body.home .haven-hp-destinations .haven-section-heading__title {
	font-size: clamp(2.35rem, 3.8vw, 3.4rem) !important;
	letter-spacing: 0.11em !important;
}

body.home .haven-dest-tile__name {
	order:       1;
	font-size:   clamp(1.32rem, 1.95vw, 1.82rem);
	margin:      0 0 0.72rem;
	line-height: 1.15;
}

body.home .haven-dest-keywords {
	order:          2;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	gap:            0.3rem;
	max-height:     0;
	opacity:        0;
	transform:      translateY(10px);
	margin:         0;
	font-size:      0.76rem;
	line-height:    1.3;
	letter-spacing: 0.19em;
}

body.home .haven-dest-keyword {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.52rem;
	line-height: 1.25;
	padding: 0.08rem 0;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

body.home .haven-dest-keyword::before,
body.home .haven-dest-keyword::after {
	content: "";
	width: 0.44rem;
	height: 0.44rem;
	border: 1px solid rgba(224, 196, 136, 0.86);
	background: rgba(224, 196, 136, 0.22);
	transform: rotate(45deg);
	box-shadow: 0 0 0 2px rgba(224, 196, 136, 0.14);
}

body.home .haven-dest-tile__cta {
	order:          3;
	font-size:      0.74rem;
	letter-spacing: 0.16em;
	padding:        0.58em 1.7em;
}

body.home .haven-dest-tile:hover .haven-dest-keywords,
body.home .haven-dest-tile:focus-visible .haven-dest-keywords {
	max-height:    5.8rem;
	opacity:       1;
	transform:     translateY(0);
	margin-bottom: 0.85rem;
}

body.home .haven-dest-tile:hover .haven-dest-tile__name,
body.home .haven-dest-tile:focus-visible .haven-dest-tile__name {
	transform: translateY(-0.58rem);
}

/* ── "View all destinations" footer link ─────────────────────────────── */
.haven-hp-destinations__footer {
	text-align:  center;
	padding-top: 2.5rem;
}


/* ==========================================================================
   10.  Featured Properties — Section 4
   ========================================================================== */

.haven-hp-featured__footer {
	text-align: center;
}


/* ==========================================================================
   11.  Owner Portfolio / Property Management
   ========================================================================== */

.haven-hp-owner-band {
	position:       relative;
	width:          100vw;
	max-width:      none !important;
	margin-left:    calc(50% - 50vw) !important;
	margin-right:   calc(50% - 50vw) !important;
	min-height:     620px;
	overflow:       hidden;
	isolation:      isolate;
}

.haven-hp-owner-band__bg,
.haven-hp-owner-band__tone {
	position: absolute;
	inset:    0;
}

.haven-hp-owner-band__bg {
	background-image:    url('/wp-content/uploads/2026/03/laguna-villa-scaled.jpg');
	background-size:     cover;
	background-position: center center;
	transform:           scale(1.02);
}

.haven-hp-owner-band__tone {
	background:
		linear-gradient(
			90deg,
			rgba(12, 20, 30, 0.76) 0%,
			rgba(12, 20, 30, 0.46) 42%,
			rgba(255, 255, 255, 0.06) 62%,
			rgba(255, 255, 255, 0.14) 100%
		);
}

.haven-hp-owner-band__inner {
	position:       relative;
	z-index:        2;
	min-height:     620px;
	max-width:      1360px;
	margin:         0 auto;
	padding:        clamp(2.8rem, 5vw, 4.4rem) clamp(1.2rem, 4vw, 3rem);
	display:        flex;
	justify-content: flex-start;
	align-items:    center;
}

.haven-hp-owner-band__panel {
	width:           min(100%, 612px);
	min-height:      396px;
	box-sizing:      border-box;
	padding:         clamp(2rem, 3vw, 2.8rem);
	background:      rgba(12, 20, 30, 0.66);
	border:          1px solid rgba(255, 255, 255, 0.24);
	box-shadow:      0 24px 50px rgba(0, 0, 0, 0.26);
	backdrop-filter: blur(2px);
	color:           rgba(247, 248, 250, 0.94);
}

.haven-hp-owner-band__eyebrow {
	margin:      0 0 0.55rem;
	font-family: "Playfair Display", Georgia, serif;
	font-style:  italic;
	font-size:   clamp(1.1rem, 1.2vw, 1.3rem);
	line-height: 1.35;
	color:       rgba(231, 214, 175, 0.98);
}

.haven-hp-owner-band__title {
	margin:         0;
	font-family:    "Playfair Display", Georgia, serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size:      clamp(1.9rem, 2.6vw, 2.45rem);
	line-height:    1.04;
	color:          #ffffff;
	white-space:    nowrap;
}

.haven-divider--owner {
	margin:     1rem 0 1.2rem;
	background: rgba(225, 198, 136, 0.92);
}

.haven-hp-owner-band__copy {
	margin:      0 0 0.9rem;
	font-size:   1.08rem;
	line-height: 1.72;
	color:       rgba(240, 242, 246, 0.92);
}

.haven-hp-owner-band__cta {
	display:         inline-block;
	margin-top:      0.75rem;
	padding:         0.82em 1.8em;
	border:          1px solid rgba(255, 255, 255, 0.82);
	color:           #ffffff;
	text-decoration: none;
	text-transform:  uppercase;
	letter-spacing:  0.14em;
	font-size:       0.75rem;
	font-family:     Lato, sans-serif;
	transition:      background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.haven-hp-owner-band__cta:hover,
.haven-hp-owner-band__cta:focus {
	background-color: rgba(255, 255, 255, 0.14);
	border-color:     rgba(255, 255, 255, 0.98);
	color:            #ffffff;
	transform:        translateY(-1px);
}


/* ==========================================================================
   12.  Property Showcase — Section 5
   ========================================================================== */

.haven-hp-showcase__wrap {
	/* Streamline carousel inherits container padding — intentionally minimal */
}


/* ==========================================================================
   12.  Guest Testimonials — Section 6
   ========================================================================== */

.haven-hp-testimonials__wrap {
	/* intentionally minimal */
}


/* ==========================================================================
   13.  Concierge CTA — Full-Bleed Image — Section 7
   ========================================================================== */

.haven-hp-cta__inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
}

.haven-hp-cta__inner .haven-divider--light {
	margin-top:    1rem;
	margin-bottom: 1.5rem;
}

.haven-hp-cta .wp-block-buttons {
	justify-content: center;
	flex-wrap:       wrap;
	gap:             1rem;
}


/* ==========================================================================
   14.  Responsive — Tablet  (max-width: 1024 px)
   ========================================================================== */

@media (max-width: 1024px) {

	.haven-hp-hero__headline {
		font-size: clamp(2.25rem, 5vw, 3.75rem);
	}

	/* Search bar: allow slight wrapping on narrow tablets */
	.haven-hp-hero__search .hsc-hero-search-form {
		flex-wrap: wrap !important;
	}

	.haven-hp-hero__search .hsc-hero-search-field {
		flex-basis: calc(50% - 1px) !important;
	}

	/* Destinations — 2 × 4 on tablet */
	.haven-dest-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.haven-dest-tile {
		min-height: 380px;
	}

	.haven-hp-owner-band {
		min-height: 560px;
	}

	.haven-hp-owner-band__inner {
		min-height: 560px;
		padding: 2.4rem 1.4rem;
	}

	.haven-hp-owner-band__panel {
		width: min(100%, 612px);
	}

}

@media (max-width: 820px) {

	body.home .haven-dest-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.85rem;
		padding-inline: clamp(0.75rem, 3vw, 1rem);
	}

	body.home .haven-dest-grid .haven-dest-card,
	body.home .haven-dest-grid .haven-dest-tile {
		min-height: clamp(18rem, 62vw, 24rem);
	}

}


/* ==========================================================================
   15.  Responsive — Mobile  (max-width: 640 px)
   ========================================================================== */

@media (max-width: 640px) {

	.haven-hp-hero {
		min-height: 580px;
	}

	.haven-hp-hero__content {
		padding-bottom: 5.5rem;
		padding-left:   1.25rem;
		padding-right:  1.25rem;
	}

	.haven-hp-hero__headline {
		font-size: clamp(2.25rem, 8vw, 3rem);
	}

	.haven-hp-hero__tagline {
		font-size: 0.9375rem;
	}

	/* Search bar — stacked on small screens */
	.haven-hp-hero__search {
		max-width: 100%;
	}

	.haven-hp-hero__search .hsc-hero-search-form {
		flex-direction: column !important;
		flex-wrap:      wrap !important;
	}

	.haven-hp-hero__search .hsc-hero-search-field {
		flex-basis:   100% !important;
		border-right: none !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
	}

	.haven-hp-hero__search .hsc-hero-search-button {
		border-radius: 0 0 2px 2px !important;
		width:         100% !important;
		min-height:    52px !important;
	}

	.haven-hp-section {
		padding-top:    3rem;
		padding-bottom: 3rem;
	}

	/* Destinations — single column on small mobile */
	.haven-dest-grid {
		grid-template-columns: 1fr;
		gap:                   12px;
		padding:               0 12px;
	}

	.haven-dest-tile {
		min-height: 300px;
	}

	.haven-hp-owner-band {
		min-height: 520px;
	}

	.haven-hp-owner-band__tone {
		background:
			linear-gradient(
				180deg,
				rgba(12, 20, 30, 0.38) 0%,
				rgba(12, 20, 30, 0.78) 100%
			);
	}

	.haven-hp-owner-band__inner {
		min-height: 520px;
		padding: 1.25rem 0.85rem;
		justify-content: center;
		align-items: flex-end;
	}

	.haven-hp-owner-band__panel {
		width: 100%;
		min-height: auto;
		padding: 1.4rem 1.2rem;
	}

	.haven-hp-owner-band__title {
		font-size: clamp(1.65rem, 8vw, 2.05rem);
		letter-spacing: 0.045em;
		white-space: normal;
	}

	.haven-hp-owner-band__copy {
		font-size: 0.96rem;
		line-height: 1.62;
	}

	/* CTA buttons — stack on mobile */
	.haven-hp-cta .wp-block-buttons {
		flex-direction: column !important;
		align-items:    center;
	}

}


/* ==========================================================================
   16.  Accessibility — Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.haven-hp-hero__content {
		animation: none;
	}

	.haven-hp-hero__scroll-dot {
		animation: none;
	}

	.haven-dest-tile__img {
		transition: none;
	}

	.haven-dest-tile__overlay {
		transition: none;
	}

	.haven-dest-line {
		transition: none;
	}

	.haven-dest-keywords {
		transition: none;
	}

}


/* ==========================================================================
   ELV BRAND IMPLEMENTATION — Header, Destination Mega, Footer
   Per: EverydayLuxury-Brand-Guide.docx + HEADER and Footer Implementation.docx
   ========================================================================== */

/* ── Brand Color Tokens: Override plugin defaults with Gilded Hours palette ── */
:root {
	/* Gilded Hours — authoritative brand palette */
	--elv-warm-earth:       #1E1A14;
	--elv-sand-dune:        #C4A078;
	--elv-sand-dune-dark:   #A8855A;
	--elv-terracotta:       #B05B4A;
	--elv-warm-linen:       #FAF7F1;
	--elv-coastal-sage:     #6B8C7A;

	/* Replace teal plugin defaults */
	--hsc-primary:          #C4A078;
	--hsc-primary-hover:    #A8855A;
	--hsc-secondary:        #6B8C7A;
	--hsc-secondary-hover:  #4E6B5A;
	--hsc-el-gold:          #C4A078;
	--hsc-el-teal:          #6B8C7A;

	/* Font tokens */
	--elv-font-display:     'Cormorant Garamond', 'Garamond', Georgia, serif;
	--elv-font-ui:          'Avenir Next', 'Avenir', Arial, sans-serif;
}

/* Override booking plugin buttons */
.hsc-btn--primary,
.hsc-hero-search-button,
.hsc-booking-submit,
.hsc-inquiry-submit {
	background-color: #C4A078 !important;
	border-color:     #C4A078 !important;
	color:            #1E1A14 !important;
	font-family:      var(--elv-font-ui) !important;
	letter-spacing:   0.12em !important;
}

.hsc-btn--primary:hover,
.hsc-hero-search-button:hover {
	background-color: #A8855A !important;
	border-color:     #A8855A !important;
}

/* ==========================================================================
   BLOCK ANIMATION SAFETY — Prevent permanent invisible content
   ========================================================================== */

/*
 * CSS animation fallback: if IntersectionObserver never fires (JS error,
 * race condition, slow connection) these rules ensure animated blocks
 * fade in automatically after a 2-second delay, so content is never
 * permanently invisible.
 */
@keyframes haven-anim-safety-reveal {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

[data-haven-animate]:not(.is-visible) {
	animation: haven-anim-safety-reveal 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s both;
}

/* ==========================================================================
   HEADER — Transparent over hero → Champagne glass on scroll
   ========================================================================== */

.haven-header--luxury-centered.haven-header--bg-frosted-glass,
.haven-header--luxury-centered.haven-header--bg-transparent {
	--haven-header-surface-fill: transparent;
	--haven-header-surface-effective-fill: transparent;
	background-color: transparent !important;
	border-bottom-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition:
		background-color 0.28s ease,
		border-color 0.28s ease,
		box-shadow 0.28s ease,
		backdrop-filter 0.28s ease !important;
}

body.home .haven-header--luxury-centered {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9999 !important;
}

body.home .haven-header--luxury-centered.haven-header--bg-frosted-glass:not(.is-scrolled),
body.home .haven-header--luxury-centered.haven-header--bg-transparent:not(.is-scrolled) {
	--haven-header-surface-fill: transparent;
	--haven-header-surface-effective-fill: transparent;
	background-color: transparent !important;
	border-bottom-color: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.haven-header--luxury-centered.haven-header--bg-frosted-glass.is-scrolled,
.haven-header--luxury-centered.haven-header--bg-transparent.is-scrolled {
	--haven-header-surface-fill: rgba(246, 241, 232, 0.94);
	--haven-header-surface-effective-fill: rgba(246, 241, 232, 0.94);
	background: var(--haven-header-surface-effective-fill) !important;
	background-color: rgba(246, 241, 232, 0.94) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border-bottom: 1px solid rgba(174, 148, 113, 0.22) !important;
	box-shadow: 0 8px 28px rgba(30, 26, 20, 0.09) !important;
}

.haven-header--luxury-mega-active.haven-header--bg-frosted-glass,
.haven-header--luxury-mega-active.haven-header--bg-transparent {
	--haven-header-surface-fill: rgba(244, 238, 229, 0.98);
	--haven-header-surface-effective-fill: rgba(244, 238, 229, 0.98);
	background: var(--haven-header-surface-effective-fill) !important;
	background-color: rgba(244, 238, 229, 0.98) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-bottom-color: rgba(174, 148, 113, 0.24) !important;
	box-shadow: 0 10px 32px rgba(30, 26, 20, 0.11) !important;
}

.haven-header--luxury-centered.haven-header--bg-frosted-glass.is-scrolled .haven-header__center-band::after,
.haven-header--luxury-centered.haven-header--bg-transparent.is-scrolled .haven-header__center-band::after {
	background: var(--haven-header-surface-effective-fill) !important;
}

.haven-header--luxury-mega-active.haven-header--bg-frosted-glass .haven-header__center-band::after,
.haven-header--luxury-mega-active.haven-header--bg-transparent .haven-header__center-band::after {
	background: var(--haven-header-surface-effective-fill) !important;
}

.haven-header--luxury-centered {
	--elv-header-menu-font-size: 11px;
	--elv-header-secondary-menu-font-size: 11px;
	--elv-header-menu-letter-spacing: 0.14em;
	--elv-header-secondary-menu-letter-spacing: 0.14em;
	--elv-header-cta-padding-x: 20px;
}

/* Nav font: Avenir Next · 11px · 500 · UPPERCASE · 0.14em tracking */
.haven-header__nav .haven-nav__link,
.haven-header__nav .haven-nav__link span,
.haven-header__nav .haven-menu > li > .haven-nav__item-shell > a,
.haven-header__nav .haven-menu > li > .haven-nav__item-shell > a span {
	font-family:     var(--elv-font-ui) !important;
	font-size:       var(--elv-header-menu-font-size, 11px) !important;
	font-weight:     500 !important;
	letter-spacing:  var(--elv-header-menu-letter-spacing, 0.14em) !important;
	text-transform:  uppercase !important;
	color:           #1E1A14 !important;
	text-decoration: none !important;
	padding-bottom:  4px !important;
	border-bottom:   2px solid transparent !important;
	transition:      border-color 0.2s ease, color 0.2s ease !important;
}

.haven-header__nav--secondary .haven-nav__link,
.haven-header__nav--secondary .haven-nav__link span,
.haven-header__nav--secondary .haven-menu > li > .haven-nav__item-shell > a,
.haven-header__nav--secondary .haven-menu > li > .haven-nav__item-shell > a span {
	font-size:      var(--elv-header-secondary-menu-font-size, var(--elv-header-menu-font-size, 11px)) !important;
	letter-spacing: var(--elv-header-secondary-menu-letter-spacing, var(--elv-header-menu-letter-spacing, 0.14em)) !important;
}

/* Hover and active nav states: Sand Dune underline */
.haven-header__nav .haven-nav__link:hover,
.haven-header__nav .haven-nav__link:focus,
.haven-header__nav .haven-nav__link[aria-expanded="true"],
.haven-header__nav .haven-nav__item--mega:hover > .haven-nav__item-shell > a,
.haven-header__nav .haven-nav__item.is-active > .haven-nav__item-shell > a {
	color:             #C4A078 !important;
	border-bottom-color: #C4A078 !important;
}

/* White nav items: transparent header over dark hero */
.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-header__nav .haven-nav__link,
.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-header__nav .haven-menu > li > .haven-nav__item-shell > a {
	color: rgba(255, 255, 255, 0.90) !important;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}

.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-header__nav .haven-nav__link:hover {
	color:             #C4A078 !important;
	border-bottom-color: #C4A078 !important;
}

/* CTA Button: Sand Dune outlined → solid on hover */
.haven-header__cta {
	font-family:    var(--elv-font-ui) !important;
	font-size:      12px !important;
	font-weight:    500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color:          #C4A078 !important;
	border:         1px solid #C4A078 !important;
	background:     transparent !important;
	border-radius:  3px !important;
	padding:        8px var(--elv-header-cta-padding-x, 20px) !important;
	transition:     background 0.2s ease, color 0.2s ease !important;
}

.haven-header__cta:hover,
.haven-header__cta:focus {
	background: #C4A078 !important;
	color:      #1E1A14 !important;
}

/* CTA in transparent header: white outline */
.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-header__cta {
	color:        rgba(255,255,255,0.9) !important;
	border-color: rgba(255,255,255,0.68) !important;
	background: rgba(255,255,255,0.02) !important;
}

.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-header__cta:hover {
	background: rgba(255,255,255,0.15) !important;
	color:      #fff !important;
}

/* Mobile hamburger: transparent → white bars over dark hero */
.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-menu-toggle-icon .bar {
	background-color: #fff !important;
}

/* ==========================================================================
   DESTINATION MEGA MENU — Scrollable cards
   Same elegance as Vacation Rental mega menu
   ========================================================================== */

/* ── DESTINATION MEGA MENU LAYOUT FIXES ──────────────────────────────────── */

/* 1. Same panel grid as Vacation Rentals — do NOT widen the cards column */
.haven-mega-menu--destination.haven-mega-menu .haven-mega-menu__inner {
	grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr); /* matches VR */
}

/* 2. Reduce the "Destinations" panel title so it stays within its column */
.haven-mega-menu--destination .haven-mega-menu__title {
	font-size: clamp(1.1rem, 1.6vw, 1.4rem) !important; /* was clamp(1.7rem, 2.8vw, 2.45rem) */
	line-height: 1.15;
}

/* 3. Destination links list: make scrollable (same height as cards column) */
.haven-mega-menu--destination .haven-mega-menu__links--scrollable {
	max-height: calc(10.75rem * 2 + 1rem * 1 + 0.5rem); /* matches 2 rows of cards */
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	padding-right: 4px;

	/* Custom scrollbar */
	scrollbar-width: thin;
	scrollbar-color: rgba(196, 160, 120, 0.45) transparent;
}

.haven-mega-menu--destination .haven-mega-menu__links--scrollable::-webkit-scrollbar {
	width: 3px;
}

.haven-mega-menu--destination .haven-mega-menu__links--scrollable::-webkit-scrollbar-track {
	background: transparent;
}

.haven-mega-menu--destination .haven-mega-menu__links--scrollable::-webkit-scrollbar-thumb {
	background: rgba(196, 160, 120, 0.50);
	border-radius: 99px;
}

/* 4. Cards scrollable column — same max-height as 2 rows + gap, matching VR card size */
.haven-mega-menu__cards--scrollable {
	max-height: calc(10.75rem * 2 + 1rem); /* exactly 2 rows of VR-sized cards + 1 gap */
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px;
	scroll-behavior: smooth;

	scrollbar-width: thin;
	scrollbar-color: rgba(196, 160, 120, 0.5) transparent;
}

.haven-mega-menu__cards--scrollable::-webkit-scrollbar {
	width: 3px;
}

.haven-mega-menu__cards--scrollable::-webkit-scrollbar-track {
	background: transparent;
}

.haven-mega-menu__cards--scrollable::-webkit-scrollbar-thumb {
	background: rgba(196, 160, 120, 0.55);
	border-radius: 99px;
}

/* 5. Card size: same as Vacation Rentals (10.75rem min-height, defined in core CSS)
   Do NOT override min-height — the core already sets it to 10.75rem for all .haven-mega-card */

/* 6. Ensure destination feature column does not overflow its grid cell */
.haven-mega-menu--destination .haven-mega-menu__feature-column {
	min-width: 0;
	overflow: hidden;
}

/* 7. Fade-out gradient at bottom of scrollable cards */
.haven-mega-menu__feature-column.has-scrollable-cards {
	position: relative;
}

.haven-mega-menu__cards-scroll-fade {
	position:       relative;
	height:         2rem;
	margin-top:     -2rem;
	pointer-events: none;
	background:     linear-gradient(to bottom, transparent 0%, rgba(var(--haven-color-bg-rgb, 250, 247, 241), 0.90) 100%);
	border-radius:  0 0 8px 8px;
}

/* 8. Removed: Scroll hint label — not needed */
.haven-mega-menu__cards-scroll-hint,
.haven-mega-menu__cards-scroll-label {
	display: none !important;
}

@media (min-width: 981px) {
	.haven-header__nav .haven-dropdown {
		background:
			linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(246, 241, 232, 0.74)),
			rgba(246, 241, 232, 0.72) !important;
		backdrop-filter: blur(22px) saturate(1.25);
		-webkit-backdrop-filter: blur(22px) saturate(1.25);
		border-color: rgba(196, 160, 120, 0.22) !important;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.62),
			0 20px 44px rgba(30, 26, 20, 0.13) !important;
	}

	.haven-header__nav .haven-dropdown .haven-nav__item--parent > .haven-nav__item-shell {
		position: relative;
		display: block;
	}

	.haven-header__nav .haven-dropdown .haven-nav__item--parent > .haven-nav__item-shell > [data-haven-submenu-panel="submenu"] {
		top: -0.9rem;
		left: calc(100% + 0.85rem);
		z-index: calc(var(--haven-z-header, 1000) + 4);
	}

	.haven-header__nav .haven-dropdown .haven-nav__item--parent > .haven-nav__item-shell > .haven-nav__link {
		padding-right: 1.25rem;
	}

	.haven-header__nav .haven-dropdown .haven-nav__item--parent > .haven-nav__item-shell > .haven-nav__link::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0.15rem;
		width: 0.42rem;
		height: 0.42rem;
		border-top: 1px solid currentColor;
		border-right: 1px solid currentColor;
		opacity: 0.62;
		transform: translateY(-50%) rotate(45deg);
	}
}


/* ==========================================================================
   MOBILE & TABLET HEADER IMPROVEMENTS
   Luxury-grade responsive navigation — 980 px and below
   ========================================================================== */

/* ── 0. Desktop: hide mobile-only elements ───────────────────────────────── */
.haven-logo-picture {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	max-inline-size: 100%;
}

.haven-header__mobile-end {
	display: none;
}

.haven-header--luxury-centered.haven-header--adaptive-drawer .haven-header__inner {
	display: grid !important;
	grid-template-columns: minmax(5.15rem, auto) minmax(0, 1fr) minmax(5.95rem, auto);
	align-items: center;
	gap: 0;
	padding-inline: 0;
}

.haven-header--luxury-centered.haven-header--adaptive-drawer .haven-header__mobile-toggle {
	grid-column: 1;
	justify-self: start;
}

.haven-header--luxury-centered.haven-header--adaptive-drawer .haven-header__center-band {
	grid-column: 2;
	justify-self: center;
	margin-inline: 0;
}

.haven-header--luxury-centered.haven-header--adaptive-drawer .haven-header__logo--centered {
	inline-size: clamp(8.2rem, 24vw, 13rem);
	max-inline-size: min(13rem, 100%);
	margin-inline: 0;
}

.haven-header--luxury-centered.haven-header--adaptive-drawer .haven-header__mobile-end {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 0;
}

/* ── 1. Three-column grid: hamburger | logo | action ─────────────────────── */
@media (max-width: 980px) {

	.haven-header__inner {
		display: grid;
		grid-template-columns: minmax(5.15rem, auto) minmax(0, 1fr) minmax(5.95rem, auto);
		align-items: center;
		gap: 0;
		padding-inline: 0;
	}

	.haven-header--luxury-centered > .haven-container--wide {
		width: calc(100% - clamp(0.35rem, 1.3vw, 0.65rem));
		padding-inline: 0;
	}

	/* Hamburger stays grid column 1 (auto-placed) */
	.haven-header__mobile-toggle {
		grid-column: 1;
		justify-self: start;
		align-items: center;
		justify-content: center;
		min-width: 4.95rem;
		min-height: 2.55rem;
		padding: 0.62rem 0.72rem;
		gap: 0.48rem;
		line-height: 1;
		border: 1px solid rgba(196, 160, 120, 0.26);
		border-radius: 999px;
		background:
			linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(246, 241, 232, 0.42)),
			rgba(246, 241, 232, 0.64);
		backdrop-filter: blur(18px) saturate(1.35);
		-webkit-backdrop-filter: blur(18px) saturate(1.35);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.72),
			0 12px 28px rgba(30, 26, 20, 0.12);
		color: #1E1A14;
	}

	.haven-header__mobile-toggle:hover,
	.haven-header__mobile-toggle:focus-visible {
		background:
			linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(196, 160, 120, 0.18)),
			rgba(246, 241, 232, 0.72);
		border-color: rgba(196, 160, 120, 0.48);
		outline: none;
	}

	.haven-menu-toggle-icon {
		align-items: center;
		justify-content: center;
		width: 1.15rem;
		flex: 0 0 1.15rem;
	}

	.haven-menu-toggle-text {
		display: inline-flex;
		align-items: center;
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		line-height: 1;
	}

	/* Logo truly centered in column 2 */
	.haven-header__logo--centered {
		grid-column: 2;
		justify-self: center;
		inline-size: clamp(9.5rem, 40vw, 15.25rem);
		max-inline-size: min(16rem, 100%);
		margin-inline: 0;
		position: static;
		left: auto;
		transform: none;
	}

	.haven-header__logo--centered a {
		inline-size: 100%;
	}

	.haven-header__logo--centered .haven-logo-picture {
		inline-size: 100%;
	}

	.haven-header__logo--centered .haven-logo {
		max-width: 100%;
		max-height: 42px;
		filter: contrast(1.08) saturate(1.04) drop-shadow(0 1px 8px rgba(30, 26, 20, 0.08));
	}

	.haven-header__logo--centered .haven-logo-wordmark__line1,
	.haven-header__logo--centered .haven-logo-wordmark__line2 {
		font-weight: 500;
		letter-spacing: 0.16em;
	}

	/* Right-side action element in column 3 */
	.haven-header__mobile-end {
		grid-column: 3;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 0;
	}

	/* Drawer is position:fixed — remove from grid flow */
	.haven-header__drawer {
		grid-column: 1 / -1;
	}

	/* ── 2. Phone link ─────────────────────────────────────────────────────── */
	.haven-header__mobile-phone {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		color: var(--haven-color-accent, #C4A078);
		text-decoration: none;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		white-space: nowrap;
		transition: color 0.22s ease;
	}

	.haven-header__mobile-phone:hover,
	.haven-header__mobile-phone:focus-visible {
		color: var(--haven-color-accent-dark, #a87f55);
		outline: none;
	}

	.haven-header__mobile-phone-icon {
		width: 1.2rem;
		height: 1.2rem;
		flex-shrink: 0;
	}

	/* Phone number label: hidden by default, shown on wider mobile */
	.haven-header__mobile-phone-label {
		display: none;
	}

	/* ── 3. Homepage: white phone / CTA on transparent hero header ─────────── */
	.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-header__mobile-phone {
		color: rgba(255, 255, 255, 0.9);
	}

	.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-header__mobile-phone:hover {
		color: #ffffff;
	}

	.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-header__mobile-cta {
		background:
			linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
			rgba(255, 255, 255, 0.08);
		color: #ffffff;
		border-color: rgba(255, 255, 255, 0.36);
	}

	/* ── 4. Compact CTA (fallback when no phone is set) ─────────────────────── */
	.haven-header__mobile-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		max-width: min(31vw, 7.25rem);
		min-height: 2.32rem;
		padding: 0 0.58rem;
		background:
			linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(196, 160, 120, 0.32)),
			rgba(246, 241, 232, 0.58);
		color: #1E1A14;
		font-size: clamp(0.56rem, 1.65vw, 0.66rem);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		border-radius: 999px;
		border: 1px solid rgba(196, 160, 120, 0.34);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: clip;
		backdrop-filter: blur(16px) saturate(1.35);
		-webkit-backdrop-filter: blur(16px) saturate(1.35);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.64),
			0 10px 24px rgba(30, 26, 20, 0.10);
		transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
	}

	@media (max-width: 480px) {
		.haven-header__logo--centered {
			inline-size: clamp(8.85rem, 37vw, 9.75rem);
		}

		.haven-header__mobile-cta {
			max-width: min(24vw, 5.6rem);
			min-height: 2.2rem;
			padding-inline: 0.46rem;
			font-size: clamp(0.5rem, 1.45vw, 0.58rem);
			letter-spacing: 0.03em;
		}
	}

	@media (max-width: 370px) {
		.haven-header__mobile-cta {
			max-width: min(23vw, 5.25rem);
			min-height: 2.05rem;
			padding-inline: 0.32rem;
			font-size: clamp(0.48rem, 1.42vw, 0.54rem);
		}
	}

	.haven-header__mobile-cta:hover,
	.haven-header__mobile-cta:focus-visible {
		background:
			linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(196, 160, 120, 0.44)),
			rgba(246, 241, 232, 0.72);
		border-color: rgba(196, 160, 120, 0.56);
		color: #1E1A14;
		transform: translateY(-1px);
		outline: none;
	}

	/* ── 5. Drawer — liquid glass panel, slides from right ───────────────── */
	.haven-header__drawer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		display: flex;
		width: min(88vw, 25rem);
		height: 100dvh;
		transform: translateX(102%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		background:
			linear-gradient(145deg, rgba(30, 26, 20, 0.94) 0%, rgba(58, 48, 38, 0.86) 58%, rgba(196, 160, 120, 0.28) 100%),
			rgba(30, 26, 20, 0.84);
		backdrop-filter: blur(28px) saturate(1.28);
		-webkit-backdrop-filter: blur(28px) saturate(1.28);
		padding-top: max(6.2rem, calc(env(safe-area-inset-top) + 5.25rem));
		padding-inline: 1.1rem;
		padding-bottom: 3rem;
		border-left: 1px solid rgba(255, 255, 255, 0.14);
		box-shadow:
			inset 1px 0 0 rgba(255, 255, 255, 0.08),
			-28px 0 60px rgba(12, 10, 8, 0.34);
		transition:
			transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.24s ease,
			visibility 0.24s ease;
	}

	/* Open state — set by header-script.js adding body.menu-open */
	body.menu-open .haven-header__drawer {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* ── 6. Backdrop — tap-to-close affordance ───────────────────────────── */
	body.menu-open::after {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(30, 26, 20, 0.44);
		backdrop-filter: blur(7px);
		-webkit-backdrop-filter: blur(7px);
		z-index: 999;          /* below header (1000) and drawer, above page */
		animation: havenMobileBackdropIn 0.28s ease forwards;
		pointer-events: none;  /* clicks pass through to drawer's outside-click handler */
	}

	/* ── 7. Navigation typography — white on dark drawer ────────────────── */
	.haven-header__nav .menu-item {
		border-bottom-color: rgba(255, 255, 255, 0.09);
	}

	.haven-header__nav .menu-item > .haven-nav__item-shell > a,
	.haven-header__nav .menu-item > a {
		color: rgba(255, 255, 255, 0.88);
		font-size: 1rem;
		padding-block: 1rem;
		letter-spacing: 0.04em !important;
	}

	.haven-header__nav .menu-item > .haven-nav__item-shell > a:hover,
	.haven-header__nav .menu-item > a:hover {
		color: #C4A078;
	}

	/* Submenu items */
	.haven-header__nav .haven-dropdown .menu-item > .haven-nav__item-shell > a {
		color: rgba(255, 255, 255, 0.78);
		font-size: 0.94rem;
	}

	.haven-header__nav .haven-dropdown .menu-item > .haven-nav__item-shell > a:hover {
		color: #C4A078;
	}

	/* Submenu toggle arrow */
	.haven-header__nav .haven-nav__submenu-toggle {
		color: rgba(255, 255, 255, 0.68);
		border: 1px solid rgba(255, 255, 255, 0.08);
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.haven-header__nav .haven-nav__submenu-toggle:hover {
		color: #C4A078;
		background: rgba(196, 160, 120, 0.14);
		border-color: rgba(196, 160, 120, 0.24);
	}

	.haven-header__nav .menu-item-has-children > .haven-nav__item-shell > [data-haven-submenu-panel],
	.haven-header__nav .haven-nav__item--parent > .haven-nav__item-shell > [data-haven-submenu-panel] {
		grid-column: 1 / -1;
		position: static;
		width: 100%;
		max-height: 0;
		margin: 0;
		overflow: hidden;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		border: 1px solid transparent;
		border-radius: 8px;
		background: transparent;
		backdrop-filter: blur(18px) saturate(1.2);
		-webkit-backdrop-filter: blur(18px) saturate(1.2);
		box-shadow: none;
		transition: max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
	}

	.haven-header__nav .menu-item-has-children.is-mobile-open > .haven-nav__item-shell > [data-haven-submenu-panel],
	.haven-header__nav .haven-nav__item--parent.is-mobile-open > .haven-nav__item-shell > [data-haven-submenu-panel] {
		max-height: 4200px;
		margin: 0.1rem 0 0.85rem;
		border-color: rgba(255, 255, 255, 0.10);
		background:
			linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(196, 160, 120, 0.08)),
			rgba(255, 255, 255, 0.045);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.08),
			0 12px 28px rgba(0, 0, 0, 0.12);
	}

	.haven-header__nav .haven-dropdown,
	.haven-mega-menu__links {
		padding: 0.35rem 0.7rem;
		list-style: none;
	}

	.haven-header__nav .haven-dropdown .haven-dropdown {
		margin-left: 0.45rem;
		background:
			linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(196, 160, 120, 0.10)),
			rgba(255, 255, 255, 0.055);
	}

	/* Mega menu text on dark background */
	.haven-mega-menu__eyebrow {
		color: #C4A078;
	}

	.haven-mega-menu__title {
		color: #ffffff;
	}

	.haven-mega-menu__copy {
		color: rgba(255, 255, 255, 0.65);
	}

	.haven-mega-menu__links > .menu-item {
		border-bottom-color: rgba(255, 255, 255, 0.08);
	}

	.haven-mega-menu__links > .menu-item > .haven-nav__item-shell > a {
		color: rgba(255, 255, 255, 0.78);
	}

	.haven-mega-menu__links > .menu-item > .haven-nav__item-shell > a:hover {
		color: #C4A078;
	}

	.haven-mega-menu__intro {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}

	/* ── 8. CTA button inside drawer — Sand Dune brand treatment ────────── */
	.haven-header__cta {
		background: #C4A078 !important;
		border-color: #C4A078 !important;
		color: #1E1A14 !important;
		font-weight: 700;
		text-align: center;
	}

	.haven-header__cta:hover,
	.haven-header__cta:focus-visible {
		background: #d4b088 !important;
		border-color: #d4b088 !important;
	}

	/* ── 9. Stagger entrance animation for drawer menu items ─────────────── */
	body.menu-open .haven-header__nav--left .menu-item,
	body.menu-open .haven-header__nav--secondary .menu-item {
		opacity: 0;
		animation: havenDrawerItemIn 0.3s ease forwards;
	}

	body.menu-open .haven-header__nav .menu-item:nth-child(1)   { animation-delay: 0.09s; }
	body.menu-open .haven-header__nav .menu-item:nth-child(2)   { animation-delay: 0.14s; }
	body.menu-open .haven-header__nav .menu-item:nth-child(3)   { animation-delay: 0.19s; }
	body.menu-open .haven-header__nav .menu-item:nth-child(4)   { animation-delay: 0.24s; }
	body.menu-open .haven-header__nav .menu-item:nth-child(5)   { animation-delay: 0.29s; }
	body.menu-open .haven-header__nav .menu-item:nth-child(n+6) { animation-delay: 0.34s; }

} /* end @media (max-width: 980px) */


/* ── Tablet: show phone number label from 520 px ────────────────────────── */
@media (min-width: 520px) and (max-width: 980px) {
	.haven-header__mobile-phone-label {
		display: inline;
	}
}


/* ==========================================================================
   MOBILE / TABLET ANIMATION KEYFRAMES
   ========================================================================== */

@keyframes havenMobileBackdropIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes havenDrawerItemIn {
	from {
		opacity: 0;
		transform: translateX(16px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}



/* ==========================================================================
   MOBILE MEGA MENU — Links-only on mobile
   Hides the intro description and feature cards; shows only the link list
   ========================================================================== */

@media (max-width: 980px) {

	/* Hide the intro section (eyebrow / title / copy) — irrelevant on mobile */
	.haven-mega-menu__intro {
		display: none !important;
	}

	/* Hide the entire feature-cards column (destination/VR image boxes) */
	.haven-mega-menu__feature-column {
		display: none !important;
	}

	/* Make the links-column fill the full width */
	.haven-mega-menu__links-column {
		display: block;
		width: 100%;
	}

	/* Remove the mega-menu inner grid entirely — just a plain block */
	.haven-mega-menu__inner {
		display: block;
		padding-top: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Links list — remove the .haven-mega-menu__links class wrapper gap */
	.haven-mega-menu__links-column > .haven-mega-menu__links,
	.haven-mega-menu__links-column > ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Each link item — same style as top-level items (white text, Sand Dune hover) */
	.haven-mega-menu__links > .menu-item > .haven-nav__item-shell > a,
	.haven-mega-menu__links-column > ul > .menu-item > a,
	.haven-dropdown .menu-item > .haven-nav__item-shell > a {
		display: block;
		padding: 0.95rem 0 0.95rem 1rem;
		color: rgba(196, 160, 120, 0.82) !important;
		font-size: 0.98rem;
		font-weight: 600;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
		text-decoration: none;
		transition: color 0.2s ease, padding-left 0.2s ease;
	}

	.haven-mega-menu__links > .menu-item > .haven-nav__item-shell > a:hover,
	.haven-mega-menu__links-column > ul > .menu-item > a:hover,
	.haven-dropdown .menu-item > .haven-nav__item-shell > a:hover {
		color: #C4A078 !important;
		padding-left: 1.35rem;
	}

	/* Remove border on last link */
	.haven-mega-menu__links > .menu-item:last-child > .haven-nav__item-shell > a {
		border-bottom: none;
	}

} /* end @media (max-width: 980px) */


/* ==========================================================================
   HAMBURGER BUTTON — Always visible when mobile menu is open
   ========================================================================== */

/* When the dark drawer is open, ensure the toggle always has white bars */
body.menu-open .haven-header__mobile-toggle {
	color: #ffffff !important;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(196, 160, 120, 0.18)),
		rgba(30, 26, 20, 0.72) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	backdrop-filter: blur(18px) saturate(1.25);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 12px 28px rgba(0, 0, 0, 0.30);
	z-index: 10;      /* above the drawer within the header stacking context */
	position: relative;
}

body.menu-open .haven-menu-toggle-icon .bar {
	background: #ffffff !important;
}

@media (max-width: 980px) {
	body.menu-open .haven-header__nav .menu-item {
		opacity: 1 !important;
		animation: none !important;
	}

	.haven-header__nav .menu-item > .haven-nav__item-shell > a,
	.haven-header__nav .menu-item > a {
		color: rgba(255, 255, 255, 0.88) !important;
		font-size: 1rem !important;
		padding-block: 1rem !important;
		letter-spacing: 0.04em !important;
		border-bottom-color: transparent !important;
		text-shadow: none !important;
	}

	.haven-header__nav .menu-item > .haven-nav__item-shell > a span,
	.haven-header__nav .menu-item > a span {
		color: inherit !important;
	}

	.haven-header__nav .haven-dropdown .menu-item > .haven-nav__item-shell > a,
	.haven-mega-menu__links > .menu-item > .haven-nav__item-shell > a {
		color: rgba(255, 255, 255, 0.78) !important;
		font-size: 0.94rem !important;
		border-bottom-color: transparent !important;
	}

	.haven-header__nav .haven-nav__item--parent > .haven-nav__item-shell > .haven-nav__link::after {
		content: none !important;
	}

	body.menu-open .haven-header__mobile-end {
		opacity: 0;
		pointer-events: none;
	}

	.haven-header__drawer,
	.haven-header__drawer .haven-nav__text,
	.haven-header__drawer .haven-nav__link,
	.haven-header__drawer .haven-nav__submenu-toggle {
		color: rgba(255, 255, 255, 0.9) !important;
	}

	.haven-header--luxury-centered .haven-header__drawer .haven-header__nav .haven-nav__link .haven-nav__text {
		color: rgba(255, 255, 255, 0.9) !important;
	}

	.haven-header__drawer .haven-header__cta {
		color: #1E1A14 !important;
	}
}

/* On homepage transparent header: already white bars — keep them on hover */
.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-header__mobile-toggle:hover {
	background: rgba(196, 160, 120, 0.18) !important;
	border-color: rgba(196, 160, 120, 0.5) !important;
}


/* ==========================================================================
   MARQUEE STRIP — High-contrast solid background, crisp white text
   ========================================================================== */

.haven-header__marquee {
	background: #1E1A14 !important;      /* Warm Earth — always solid, never washes out */
	border-bottom-color: rgba(196, 160, 120, 0.28) !important;
}

.haven-header__marquee-copy,
.haven-header__marquee-link {
	color: rgba(255, 255, 255, 0.95) !important;
	font-size: 0.74rem !important;
	letter-spacing: 0.18em !important;
}

.haven-header__marquee-separator {
	background: #C4A078 !important;
	box-shadow: 0 0 0 3px rgba(196, 160, 120, 0.22) !important;
}

/* Keep the marquee always visible even on the transparent homepage header */
.haven-header--luxury-centered.is-home:not(.is-scrolled) .haven-header__marquee {
	background: rgba(30, 26, 20, 0.92) !important;
	border-bottom-color: rgba(196, 160, 120, 0.22) !important;
}


/* ==========================================================================
   HERO SEARCH FORM — Luxury visual treatment
   Applies to the Streamline plugin shortcode [streamline_search_form style="hero"]
   wrapped inside .haven-hero__search-widget, plus the theme's own haven-search forms
   ========================================================================== */

/* ── Container ─────────────────────────────────────────────────────────────── */
.haven-hero__search-widget {
	background: rgba(30, 26, 20, 0.72) !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	border: 1px solid rgba(196, 160, 120, 0.22) !important;
	border-radius: 16px !important;
	box-shadow:
		0 24px 56px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	padding: 1.5rem !important;
}

/* ── Field containers: clickable card-button appearance ─────────────────── */
.haven-hero__search-widget .hsc-search-field,
.haven-hero__search-widget .haven-search__field-inner {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(196, 160, 120, 0.25) !important;
	border-radius: 10px !important;
	min-height: 68px !important;
	padding: 0.85rem 1rem 0.85rem 1.1rem !important;
	cursor: pointer;
	transition:
		background 0.22s ease,
		border-color 0.22s ease,
		transform 0.22s ease !important;
}

.haven-hero__search-widget .hsc-search-field:hover,
.haven-hero__search-widget .hsc-search-field:focus-within,
.haven-hero__search-widget .haven-search__field-inner:hover,
.haven-hero__search-widget .haven-search__field-inner:focus-within {
	background: rgba(196, 160, 120, 0.12) !important;
	border-color: rgba(196, 160, 120, 0.6) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* ── Field icon area ────────────────────────────────────────────────────── */
.haven-hero__search-widget .hsc-search-field__icon {
	background: rgba(196, 160, 120, 0.15) !important;
	color: #C4A078 !important;
}

/* ── Labels: eyebrow style — small, uppercase, muted ────────────────────── */
.haven-hero__search-widget .hsc-search-field__content label,
.haven-hero__search-widget .haven-search__field label,
.haven-hero__search-widget label {
	display: block !important;
	margin-bottom: 0.3rem !important;
	font-family: var(--haven-font-label, var(--haven-font-body)) !important;
	font-size: 0.65rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	color: rgba(196, 160, 120, 0.9) !important;
}

/* ── Inputs and selects inside the widget ───────────────────────────────── */
.haven-hero__search-widget input[type="text"],
.haven-hero__search-widget input[type="date"],
.haven-hero__search-widget input,
.haven-hero__search-widget select,
.haven-hero__search-widget .hsc-date-input,
.haven-hero__search-widget .hsc-select-input {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	padding: 0 !important;
	cursor: pointer;
	width: 100% !important;
}

/* Placeholder text — replaces "mm/dd/yyyy" appearance */
.haven-hero__search-widget input::placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
	font-weight: 400 !important;
	font-style: italic;
	font-size: 0.88rem !important;
}

/* Select options readable against dark */
.haven-hero__search-widget select option {
	background: #1E1A14;
	color: #ffffff;
}

/* ── Search grid layout — horizontal on desktop ─────────────────────────── */
.haven-hero__search-widget .hsc-search-form,
.haven-hero__search-widget form,
.haven-hero__search-widget .haven-search__fields {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
	gap: 0.75rem !important;
	align-items: end !important;
}

/* ── Submit button — Sand Dune, not teal ────────────────────────────────── */
.haven-hero__search-widget button[type="submit"],
.haven-hero__search-widget input[type="submit"],
.haven-hero__search-widget .hsc-btn--primary,
.haven-hero__search-widget .hsc-topbar-btn--update,
.haven-hero__search-widget .haven-search__submit .btn,
.haven-hero__search-widget .btn--primary {
	background: #C4A078 !important;
	background-image: none !important;
	color: #1E1A14 !important;
	border-color: #C4A078 !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	min-height: 68px !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 24px rgba(196, 160, 120, 0.28) !important;
	transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}

.haven-hero__search-widget button[type="submit"]:hover,
.haven-hero__search-widget input[type="submit"]:hover,
.haven-hero__search-widget .hsc-btn--primary:hover,
.haven-hero__search-widget .btn--primary:hover {
	background: #d4b088 !important;
	color: #1E1A14 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 30px rgba(196, 160, 120, 0.4) !important;
}

/* ── Mobile: one field per row ──────────────────────────────────────────── */
@media (max-width: 767px) {

	.haven-hero__search-widget {
		padding: 1.1rem !important;
		border-radius: 12px !important;
	}

	.haven-hero__search-widget .hsc-search-form,
	.haven-hero__search-widget form,
	.haven-hero__search-widget .haven-search__fields {
		grid-template-columns: 1fr !important;
		gap: 0.6rem !important;
	}

	.haven-hero__search-widget .hsc-search-field,
	.haven-hero__search-widget .haven-search__field-inner {
		min-height: 58px !important;
	}

	.haven-hero__search-widget button[type="submit"],
	.haven-hero__search-widget .hsc-btn--primary,
	.haven-hero__search-widget .btn--primary {
		min-height: 52px !important;
		width: 100%;
	}

}


/* ==========================================================================
   CALENDAR BRANDING — Replace teal with Sand Dune palette
   Applies to booking forms and the hero search date picker popup
   ========================================================================== */

/* ── jQuery UI datepicker (Streamline plugin uses this) ─────────────────────
   2026-05-04 premium pass: legacy dark band retired. Header is now a soft
   liquid-glass strip that lets the calendar paper read through, matching the
   editorial title + tan circle navigation in advanced-search.css.
   ────────────────────────────────────────────────────────────────────────── */
.ui-datepicker .ui-datepicker-header {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(252, 247, 239, 0.18) 100%) !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(196, 160, 120, 0.18) !important;
	color: #1E1A14 !important;
	border-radius: 0 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
	backdrop-filter: blur(6px) saturate(120%) !important;
	-webkit-backdrop-filter: blur(6px) saturate(120%) !important;
}

.ui-datepicker .ui-datepicker-title {
	color: #1E1A14 !important;
	font-weight: 600 !important;
	letter-spacing: 0.005em !important;
}

/* Selected / check-in / check-out dates */
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight,
.ui-datepicker td.hsc-date-available a.ui-state-active,
.ui-datepicker td a.ui-state-active {
	background: #C4A078 !important;
	border-color: #C4A078 !important;
	color: #1E1A14 !important;
	font-weight: 700 !important;
}

/* In-range dates */
.ui-datepicker td.ui-datepicker-current-day a,
.ui-datepicker td.ui-state-highlight a {
	background: rgba(196, 160, 120, 0.18) !important;
	border-color: rgba(196, 160, 120, 0.3) !important;
	color: #1E1A14 !important;
}

/* ── HSC plugin calendar classes ────────────────────────────────────────── */
.hsc-calendar-day--checkin,
.hsc-calendar-day--checkout {
	background: #C4A078 !important;
	border-color: #C4A078 !important;
	color: #1E1A14 !important;
}

.hsc-calendar-day--range {
	background: rgba(196, 160, 120, 0.16) !important;
	border-color: rgba(196, 160, 120, 0.28) !important;
}

/* Property page scoped — override the teal everywhere */
body.haven-streamline-property-page .hsc-calendar-day--checkin,
body.haven-streamline-property-page .hsc-calendar-day--checkout {
	background: #C4A078 !important;
	border-color: #C4A078 !important;
	color: #1E1A14 !important;
}

body.haven-streamline-property-page .hsc-calendar-day--range {
	background: rgba(196, 160, 120, 0.14) !important;
	border-color: rgba(196, 160, 120, 0.26) !important;
}

/* Focus border — replace teal focus ring with Sand Dune */
body.haven-streamline-property-page .hsc-date-input:focus,
body.haven-streamline-property-page .hsc-select-input:focus,
body.haven-streamline-property-page .hsc-text-input:focus,
.hsc-date-input:focus,
.hsc-select-input:focus {
	border-color: rgba(196, 160, 120, 0.65) !important;
	box-shadow: 0 0 0 3px rgba(196, 160, 120, 0.18) !important;
}

/* Booking submit button on property pages — replace teal gradient */
body.haven-streamline-property-page .hsc-booking-submit,
body.haven-streamline-property-page .hsc-btn--block {
	background: #C4A078 !important;
	background-image: none !important;
	color: #1E1A14 !important;
	font-weight: 700 !important;
}

body.haven-streamline-property-page .hsc-booking-submit:hover,
body.haven-streamline-property-page .hsc-btn--block:hover {
	background: #d4b088 !important;
	filter: none !important;
}

/* ── Haven theme's own date picker widget ───────────────────────────────── */
.haven-datepicker__day--selected {
	background: #C4A078 !important;
	border-color: #C4A078 !important;
	color: #1E1A14 !important;
}

.haven-datepicker__day--in-range {
	background: rgba(196, 160, 120, 0.15) !important;
	border-color: rgba(196, 160, 120, 0.28) !important;
}

.haven-datepicker__day--today {
	border-color: #C4A078 !important;
	color: #C4A078 !important;
}

/* ==========================================================================
   HOMEPAGE PREMIUM REFINEMENTS — March 2026
   Tighten the homepage around the newer ELV brand layer and make the
   hero datepicker fully legible over motion video.
   ========================================================================== */

:root {
	--elv-warm-earth:     #1E1A14;
	--elv-sand-dune:      #C4A078;
	--elv-sand-dune-dark: #A8855A;
	--elv-terracotta:     #B05B4A;
	--elv-warm-linen:     #FAF7F1;
	--elv-coastal-sage:   #6B8C7A;
	--elv-font-display:   'Cormorant Garamond', 'Garamond', Georgia, serif;
	--elv-font-ui:        'Avenir Next', 'Avenir', Arial, sans-serif;
}

body.home .haven-hp-hero__headline,
body.home .haven-whyelv-card__title,
body.home .haven-hp-owner-band__title,
body.home .haven-hp-planning__headline,
body.home .haven-hp-planning-card__title,
body.home .hsc-prop-card__name,
body.home .hsc-testimonials-luxury__quote-title {
	font-family: var(--elv-font-display) !important;
}

body.home .haven-hp-hero__headline {
	letter-spacing: -0.03em;
}

body.home .haven-hp-hero__eyebrow,
body.home .haven-hp-hero__tagline,
body.home .haven-hp-hero__search .hsc-hero-search-field label,
body.home .haven-hp-hero__search .hsc-hero-search-field input,
body.home .haven-hp-hero__search .hsc-hero-search-field select,
body.home .haven-whyelv-card__body,
body.home .haven-whyelv-card__cta,
body.home .haven-hp-owner-band__copy,
body.home .haven-hp-owner-band__cta,
body.home .hsc-prop-card__body,
body.home .hsc-prop-card__location-badge,
body.home .hsc-prop-card__specs,
body.home .hsc-testimonials-luxury__guest-name,
body.home .hsc-testimonials-luxury__review-date,
body.home .hsc-testimonials-luxury__copy {
	font-family: var(--elv-font-ui) !important;
}

body.home .haven-hp-hero__search .hsc-hero-search-form {
	background: linear-gradient(135deg, rgba(30, 26, 20, 0.7) 0%, rgba(46, 36, 28, 0.58) 100%) !important;
	border-color: rgba(196, 160, 120, 0.34) !important;
	box-shadow: 0 26px 56px rgba(6, 12, 18, 0.28) !important;
}

body.home .haven-hp-hero__search .hsc-hero-search-field:hover,
body.home .haven-hp-hero__search .hsc-hero-search-field:focus-within {
	background: rgba(255, 255, 255, 0.08) !important;
}

body.home .haven-hp-hero__search .hsc-hero-search-field label {
	color: rgba(250, 247, 241, 0.7) !important;
}

body.home .haven-hp-hero__search .hsc-hero-search-field input::placeholder {
	color: rgba(250, 247, 241, 0.76) !important;
}

body.home .hsc-hero-search-button,
body.home .wp-block-button.is-style-luxury .wp-block-button__link,
body.home .wp-block-button__link.is-style-luxury {
	background: #C4A078 !important;
	background-image: none !important;
	border-color: #C4A078 !important;
	color: #1E1A14 !important;
	font-family: var(--elv-font-ui) !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	box-shadow: none !important;
}

body.home .haven-hp-hero__search .hsc-hero-search-button {
	background: #C4A078 !important;
	background-color: #C4A078 !important;
	border: none !important;
	color: #1E1A14 !important;
	font-family: var(--elv-font-ui) !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
}

body.home .hsc-hero-search-button:hover,
body.home .wp-block-button.is-style-luxury .wp-block-button__link:hover,
body.home .wp-block-button__link.is-style-luxury:hover,
body.home .wp-block-button.is-style-luxury .wp-block-button__link:focus,
body.home .wp-block-button__link.is-style-luxury:focus {
	background: #A8855A !important;
	background-image: none !important;
	border-color: #A8855A !important;
	color: #1E1A14 !important;
}

body.home .haven-hp-hero__search .hsc-hero-search-button:hover,
body.home .haven-hp-hero__search .hsc-hero-search-button:focus {
	background: #A8855A !important;
	background-color: #A8855A !important;
	color: #1E1A14 !important;
}

/* ==========================================================================
   EL · Hero Search Calendar (flatpickr) · Premium pass 2026-05-04
   Backups + revert notes: haven-theme/_workspace/calendar-premium-pass-2026-05-04/
   ========================================================================== */
body.home .flatpickr-calendar.hsc-hero-search-calendar,
body.home .flatpickr-calendar.hsc-hero-search-calendar.open {
	background:
		linear-gradient(180deg, rgba(255, 253, 248, 0.99) 0%, rgba(247, 240, 228, 0.99) 100%) !important;
	background-color: rgba(252, 246, 238, 0.98) !important;
	border: 1px solid rgba(196, 160, 120, 0.32) !important;
	border-radius: 28px !important;
	padding: 14px 14px 16px !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 2px 6px rgba(30, 26, 20, 0.06),
		0 30px 72px rgba(30, 26, 20, 0.22) !important;
	backdrop-filter: blur(18px) saturate(130%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(130%) !important;
	color: #1E1A14 !important;
	overflow: hidden !important;
	transition: opacity 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-months,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-weekdays,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-innerContainer,
body.home .flatpickr-calendar.hsc-hero-search-calendar .dayContainer {
	background: transparent !important;
}

/* Header block: editorial title with hairline divider */
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-months {
	position: relative;
	padding: 4px 0 14px !important;
	margin-bottom: 6px !important;
	border-bottom: 1px solid rgba(196, 160, 120, 0.18);
}

body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-current-month {
	color: #1E1A14 !important;
	font-family: var(--elv-font-display) !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.005em !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
}

/* EL diamond pendant (matches the destination-page guide mark) left of the month + year */
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-current-month::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none'%3E%3Cpath d='M40 5 L75 40 L40 75 L5 40 Z' stroke='%23C4A078' stroke-width='1' fill='none' opacity='0.6'/%3E%3Cpath d='M40 16 L64 40 L40 64 L16 40 Z' stroke='%23C4A078' stroke-width='0.75' fill='none' opacity='0.4'/%3E%3Ctext x='40' y='45' text-anchor='middle' font-family='Georgia,serif' font-size='14' font-style='italic' fill='%23C4A078' opacity='0.8'%3EEL%3C/text%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex: 0 0 auto;
}

body.home .flatpickr-calendar.hsc-hero-search-calendar .cur-month {
	font-family: var(--elv-font-display) !important;
	font-style: italic !important;
	font-weight: 500 !important;
	color: #1E1A14 !important;
}

body.home .flatpickr-calendar.hsc-hero-search-calendar .numInput.cur-year {
	font-family: var(--elv-font-display) !important;
	font-style: normal !important;
	font-weight: 600 !important;
	color: #1E1A14 !important;
}

/* Stroked chevron nav inside a tan-bordered circle */
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-prev-month,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-next-month {
	width: 32px !important;
	height: 32px !important;
	top: 6px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(196, 160, 120, 0.32);
	border-radius: 50%;
	background: rgba(255, 253, 248, 0.86) !important;
	transition: background 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	padding: 0 !important;
}

body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-prev-month { left: 8px !important; }
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-next-month { right: 8px !important; }

body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-prev-month:hover,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-next-month:hover {
	background: rgba(176, 91, 74, 0.08) !important;
	border-color: rgba(176, 91, 74, 0.36);
	transform: translateY(-1px);
}

body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-prev-month svg,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-next-month svg {
	width: 9px !important;
	height: 9px !important;
	fill: none !important;
	stroke: #B05B4A !important;
	stroke-width: 2 !important;
}

body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-weekday {
	color: rgba(30, 26, 20, 0.5) !important;
	font-family: var(--elv-font-ui) !important;
	font-size: 0.66rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* Day cells: circular, refined hover with lift */
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day {
	border-radius: 50% !important;
	max-width: 44px !important;
	height: 40px !important;
	line-height: 40px !important;
	color: #1E1A14 !important;
	font-family: var(--elv-font-ui) !important;
	font-weight: 600 !important;
	border: 1px solid transparent !important;
	transition: background 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
		color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day:hover,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day:focus {
	background: rgba(196, 160, 120, 0.14) !important;
	border-color: rgba(196, 160, 120, 0.24) !important;
	color: #1E1A14 !important;
	transform: scale(1.04);
	box-shadow: 0 6px 14px rgba(30, 26, 20, 0.08);
}

/* Today: tiny terra dot under the number, no ring */
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.today {
	border-color: transparent !important;
	position: relative;
}
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.today::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #B05B4A;
	transform: translateX(-50%);
}
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.today.selected::after,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.today.startRange::after,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.today.endRange::after {
	background: rgba(255, 253, 248, 0.95);
}

/* Range fill: soft tan with denser caps for the barbell feel */
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.inRange {
	background: rgba(196, 160, 120, 0.12) !important;
	border-color: transparent !important;
	box-shadow: -5px 0 0 rgba(196, 160, 120, 0.12), 5px 0 0 rgba(196, 160, 120, 0.12) !important;
}

body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.selected,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.startRange,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.endRange {
	background: linear-gradient(160deg, #C4A078 0%, #B05B4A 100%) !important;
	border-color: transparent !important;
	color: #FFFDF8 !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		0 8px 18px rgba(176, 91, 74, 0.26) !important;
}
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.selected:hover,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.startRange:hover,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.endRange:hover {
	transform: scale(1.04);
	color: #FFFDF8 !important;
}

/* Disabled: delicate hatch instead of flat grey */
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.flatpickr-disabled,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.flatpickr-disabled:hover {
	color: rgba(58, 53, 48, 0.32) !important;
	background:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 4px,
			rgba(196, 160, 120, 0.16) 4px,
			rgba(196, 160, 120, 0.16) 5px
		) !important;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.prevMonthDay,
body.home .flatpickr-calendar.hsc-hero-search-calendar .flatpickr-day.nextMonthDay {
	color: rgba(58, 53, 48, 0.28) !important;
}

body.home .flatpickr-calendar.hsc-hero-search-calendar.arrowTop::before,
body.home .flatpickr-calendar.hsc-hero-search-calendar.arrowTop::after {
	border-bottom-color: rgba(255, 253, 248, 0.99) !important;
}

body.home .flatpickr-calendar.hsc-hero-search-calendar.arrowBottom::before,
body.home .flatpickr-calendar.hsc-hero-search-calendar.arrowBottom::after {
	border-top-color: rgba(247, 240, 228, 0.99) !important;
}

body.home .haven-whyelv-card__eyebrow,
body.home .haven-hp-owner-band__eyebrow {
	font-family: var(--elv-font-ui) !important;
	font-size: 0.7rem !important;
	font-style: normal !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase;
	color: #B05B4A !important;
}

body.home .haven-whyelv-card__title,
body.home .haven-hp-owner-band__title {
	font-style: italic !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
}

body.home .hsc-prop-card__location-badge {
	background: rgba(176, 91, 74, 0.92) !important;
	color: #FAF7F1 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
}

body.home .hsc-prop-card__name {
	font-size: clamp(1.45rem, 1.9vw, 1.82rem) !important;
	letter-spacing: 0 !important;
	line-height: 1.08 !important;
}

body.home .hsc-testimonials-luxury__guest-name {
	font-family: var(--elv-font-display) !important;
	font-size: clamp(1.25rem, 1.6vw, 1.52rem) !important;
	font-style: italic !important;
	font-weight: 400 !important;
}

body.home .hsc-testimonials-luxury__rating-block,
body.home .hsc-testimonials-luxury__rating-number,
body.home .hsc-testimonials-luxury__rating-stars,
body.home .hsc-testimonials-luxury__rating-stars * {
	color: #C4A078 !important;
}

body.home .haven-hp-planning {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #FAF7F1 0%, #F7F1E8 100%);
}

body.home .haven-hp-planning::before {
	content: "";
	position: absolute;
	top: 9%;
	right: clamp(-3rem, -2vw, -1rem);
	width: min(22rem, 42vw);
	height: min(22rem, 42vw);
	border-radius: 999px;
	background: radial-gradient(circle, rgba(196, 160, 120, 0.18) 0%, rgba(196, 160, 120, 0) 72%);
	pointer-events: none;
}

body.home .haven-hp-planning::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(196, 160, 120, 0.08) 0%, rgba(250, 247, 241, 0) 42%);
	pointer-events: none;
}

body.home .haven-hp-planning__shell {
	position: relative;
	z-index: 1;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

body.home .haven-hp-planning__intro {
	max-width: 38rem;
}

body.home .haven-hp-planning__eyebrow {
	margin: 0 0 0.95rem;
	font-family: var(--elv-font-ui);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #B05B4A;
}

body.home .haven-hp-planning__headline {
	margin: 0;
	font-size: clamp(2.6rem, 5vw, 4.5rem);
	font-style: italic;
	font-weight: 400;
	line-height: 0.96;
	color: #1E1A14;
	max-width: 10ch;
}

body.home .haven-hp-planning .haven-divider {
	margin: 1.25rem 0 1.75rem;
	background: #C4A078;
}

body.home .haven-hp-planning__copy {
	margin: 0 0 1rem;
	font-family: var(--elv-font-ui);
	font-size: clamp(1rem, 1.1vw, 1.08rem);
	line-height: 1.85;
	color: rgba(30, 26, 20, 0.76);
}

body.home .haven-hp-planning__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 1.75rem;
}

body.home .haven-hp-planning__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.95rem 1.5rem;
	border: 1px solid transparent;
	text-decoration: none;
	font-family: var(--elv-font-ui);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: transform 0.24s ease, background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

body.home .haven-hp-planning__button--primary {
	background: #1E1A14;
	color: #FAF7F1;
	border-color: #1E1A14;
}

body.home .haven-hp-planning__button--primary:hover,
body.home .haven-hp-planning__button--primary:focus {
	background: #30271F;
	border-color: #30271F;
	color: #FAF7F1;
	transform: translateY(-1px);
}

body.home .haven-hp-planning__button--secondary {
	background: transparent;
	color: #1E1A14;
	border-color: rgba(30, 26, 20, 0.22);
}

body.home .haven-hp-planning__button--secondary:hover,
body.home .haven-hp-planning__button--secondary:focus {
	background: rgba(196, 160, 120, 0.14);
	border-color: rgba(196, 160, 120, 0.54);
	color: #1E1A14;
	transform: translateY(-1px);
}

body.home .haven-hp-planning__note {
	margin: 1rem 0 0;
	font-family: var(--elv-font-ui);
	font-size: 0.76rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(30, 26, 20, 0.48);
}

body.home .haven-hp-planning__cards {
	display: grid;
	gap: 1rem;
}

body.home .haven-hp-planning-card {
	position: relative;
	padding: 1.35rem 1.4rem 1.5rem;
	background: rgba(255, 255, 255, 0.76);
	border: 1px solid rgba(196, 160, 120, 0.28);
	box-shadow: 0 18px 40px rgba(30, 26, 20, 0.08);
}

body.home .haven-hp-planning-card::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(30, 26, 20, 0.08);
	pointer-events: none;
}

body.home .haven-hp-planning-card__index,
body.home .haven-hp-planning-card__title,
body.home .haven-hp-planning-card__copy {
	position: relative;
	z-index: 1;
}

body.home .haven-hp-planning-card__index {
	margin: 0 0 0.85rem;
	font-family: var(--elv-font-ui);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #C4A078;
}

body.home .haven-hp-planning-card__title {
	margin: 0 0 0.7rem;
	font-size: clamp(1.45rem, 2.4vw, 1.8rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.05;
	color: #1E1A14;
}

body.home .haven-hp-planning-card__copy {
	margin: 0;
	font-family: var(--elv-font-ui);
	font-size: 0.96rem;
	line-height: 1.8;
	color: rgba(30, 26, 20, 0.72);
}

@media (max-width: 960px) {
	body.home .haven-hp-planning__shell {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	body.home .haven-hp-planning__headline {
		max-width: none;
	}
}

@media (max-width: 640px) {
	body.home .haven-hp-planning__actions {
		flex-direction: column;
		align-items: stretch;
	}

	body.home .haven-hp-planning__button {
		width: 100%;
	}

	body.home .haven-hp-planning-card {
		padding: 1.2rem 1.1rem 1.3rem;
	}

	body.home .haven-hp-planning-card::before {
		inset: 12px;
	}
}

body.home .haven-hp-seasonal {
	position: relative;
	overflow: hidden;
	padding-top: clamp(3.4rem, 5vw, 5rem);
	padding-bottom: clamp(3.4rem, 5vw, 5rem);
	background:
		radial-gradient(circle at top left, rgba(196, 160, 120, 0.14), transparent 34%),
		radial-gradient(circle at bottom right, rgba(176, 91, 74, 0.08), transparent 30%),
		linear-gradient(180deg, #faf7f1 0%, #f7f1ea 100%);
}

body.home .haven-hp-seasonal__intro {
	max-width: 46rem;
	margin: 1rem auto 0;
	font-family: var(--elv-font-ui);
	font-size: 1rem;
	line-height: 1.8;
	color: rgba(30, 26, 20, 0.72);
}

body.home .haven-hp-seasonal__grid {
	max-width: 1320px;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.15rem;
}

body.home .haven-hp-seasonal-card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(196, 160, 120, 0.24);
	border-radius: 26px;
	box-shadow: 0 22px 46px rgba(30, 26, 20, 0.08);
	overflow: hidden;
}

body.home .haven-hp-seasonal-card__media {
	aspect-ratio: 4 / 4.8;
	overflow: hidden;
	background: rgba(30, 26, 20, 0.08);
}

body.home .haven-hp-seasonal-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.home .haven-hp-seasonal-card:hover .haven-hp-seasonal-card__media img,
body.home .haven-hp-seasonal-card:focus-within .haven-hp-seasonal-card__media img {
	transform: scale(1.045);
}

body.home .haven-hp-seasonal-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.35rem 1.35rem 1.45rem;
}

body.home .haven-hp-seasonal-card__eyebrow {
	margin: 0;
	font-family: var(--elv-font-ui);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #B05B4A;
}

body.home .haven-hp-seasonal-card__title {
	margin: 0;
	font-family: var(--elv-font-display);
	font-size: clamp(1.5rem, 2.2vw, 1.95rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.02;
	color: #1E1A14;
}

body.home .haven-hp-seasonal-card__copy {
	margin: 0;
	font-family: var(--elv-font-ui);
	font-size: 0.95rem;
	line-height: 1.76;
	color: rgba(30, 26, 20, 0.74);
}

body.home .haven-hp-seasonal-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: auto;
	font-family: var(--elv-font-ui);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: #1E1A14;
}

body.home .haven-hp-seasonal-card__link::after {
	content: "\2192";
}

body.home .haven-hp-seasonal-card__link:hover,
body.home .haven-hp-seasonal-card__link:focus {
	color: #A8855A;
}

body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards {
	margin: 22px auto 0;
	padding: 6px 0 14px;
}

body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards .hsc-testimonials-luxury__stage::before {
	width: min(calc(var(--hsc-tx-slider-card-width) + 108px), calc(100% - 18px));
	height: calc(var(--hsc-tx-slider-card-height) + 70px);
	background:
		radial-gradient(circle at 50% 50%, rgba(196, 160, 120, 0.18), rgba(196, 160, 120, 0.08) 56%, transparent 72%),
		radial-gradient(circle at 18% 24%, rgba(250, 247, 241, 0.44), transparent 28%);
	filter: blur(16px);
	opacity: 0.92;
}

body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards .hsc-testimonials-luxury__review-title {
	font-family: var(--elv-font-display);
	font-style: italic;
}

body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards .hsc-testimonials-luxury__guest-name,
body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards .hsc-testimonials-luxury__date,
body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards .hsc-testimonials-luxury__review-text,
body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards .hsc-testimonials-luxury__property-link {
	font-family: var(--elv-font-ui);
}

body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards .hsc-testimonials-luxury__property-link {
	background: #C4A078;
	border-color: #C4A078;
	color: #1E1A14;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards .hsc-testimonials-luxury__property-link:hover,
body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards .hsc-testimonials-luxury__property-link:focus {
	background: #A8855A;
	border-color: #A8855A;
	color: #1E1A14;
	box-shadow: 0 14px 26px rgba(168, 133, 90, 0.22);
}

body.home .haven-hp-testimonials-curated.hsc-testimonials-luxury--variant-regal.hsc-testimonials-luxury--mode-slider.hsc-testimonials-luxury--experience-cards .hsc-testimonials-luxury__nav {
	border-color: rgba(196, 160, 120, 0.28);
	background: rgba(250, 247, 241, 0.94);
	color: #8f8578;
}

@media (max-width: 1100px) {
	body.home .haven-hp-seasonal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	body.home .haven-hp-seasonal__grid {
		grid-template-columns: 1fr;
	}

	body.home .haven-hp-seasonal-card__body {
		padding: 1.2rem 1.15rem 1.3rem;
	}
}

/* True Full Bleed overrides for the new template */
.haven-full-bleed-page .entry-content > *:not(.alignwide):not(.alignfull),
.haven-full-bleed-page .page-content-wrapper > *:not(.alignwide):not(.alignfull) {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}