/* ============================================================
   HOME — page-specific styles
   Path: /wp-content/themes/millennia-village/assets/css/pages/home.css
   Loaded conditionally on the homepage via functions.php.
   Source: MV_Desktop_v35.html prototype.
   Nav, footer, Mylo, base typography, fonts, newsletter base form —
   handled by shared stylesheets. This file only contains home-section
   styles (hero, paths, featured-stays band, feature grid, origin,
   location, press, testimonials, happening, bottom CTA) plus the
   site-wide promo banner used only on the homepage.
   ============================================================ */

/* ── APP-NAV VIEWPORT LAYOUT (mobile) ────────────────────────
   The mobile hero is sized to the visible viewport so the path
   strip at the bottom appears as app-style nav buttons, sitting
   just above the browser URL bar.

   Approach: --banner-height defaults to 0. When a visible
   .promo-banner is in the DOM (no inline display:none from the
   dismiss script), :has() bumps it to 44px. The mobile hero
   subtracts both the sticky nav (64px) and this variable from
   100dvh, which excludes the URL bar zone and resizes when the
   URL bar shows/hides.
   ──────────────────────────────────────────────────────────── */
:root{
	--banner-height:0px;
}
body:has(.promo-banner:not([style*="display: none"])){
	--banner-height:44px;
}


/* ── PROMO BANNER (homepage only, ACF-driven) ────────────────
   Renders above the hero, full-width. Dismissible state lives in
   localStorage keyed on a hash of the message, so changing the
   copy resets the dismissed state for returning visitors.
   ──────────────────────────────────────────────────────────── */
.promo-banner{
	background:#DAEEDF; /* Serene Green */
	color:#142F1D;       /* Dark Green */
	border-bottom:1px solid rgba(20,47,29,.08);
	font-family:var(--font-body,inherit);
}
.promo-banner-inner{
	max-width:1152px;
	margin:0 auto;
	padding:12px 56px 12px 24px;
	display:flex;align-items:center;justify-content:center;
	gap:12px;
	position:relative;
	min-height:44px;
}
.promo-banner-message{
	font-size:14px;line-height:1.5;
	margin:0;text-align:center;
	text-wrap:pretty;
}
.promo-banner-link{
	color:inherit;
	font-weight:500;
	text-decoration:underline;
	text-underline-offset:3px;
	margin-left:6px;
	transition:opacity .2s;
	-webkit-tap-highlight-color:transparent;
}
.promo-banner-link:hover,
.promo-banner-link:focus-visible{opacity:.65;outline:none;}
.promo-banner-dismiss{
	position:absolute;
	right:12px;top:50%;
	transform:translateY(-50%);
	background:none;border:0;padding:8px;
	cursor:pointer;color:inherit;
	opacity:.55;
	width:32px;height:32px;
	display:flex;align-items:center;justify-content:center;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
	transition:opacity .2s;
	-webkit-appearance:none;
}
.promo-banner-dismiss:hover,
.promo-banner-dismiss:focus-visible{opacity:1;outline:none;}
.promo-banner-dismiss svg{width:14px;height:14px;}


/* ── HERO ────────────────────────────────────────────────────
   Background priority chain (handled in PHP):
   1. External video URL (hero_video_url) → iframe or native video
   2. Uploaded video file (hero_video) → native video
   3. Image (hero_image) → background-image with focal point
   4. Gradient fallback below (this rule)
   ──────────────────────────────────────────────────────────── */
.hero{
	min-height:calc(100vh - 80px);
	min-height:calc(100dvh - 80px);
	background:linear-gradient(160deg,var(--surface-forest,#1B3A2D) 0%,#2D5C45 55%,#3A6B52 100%);
	background-size:cover;background-position:center;
	display:flex;flex-direction:column;
	align-items:center;justify-content:flex-end;
	padding:0 64px 112px;text-align:center;
	position:relative;overflow:hidden;
}
.hero::before{
	content:'';position:absolute;inset:0;
	background:radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.32),transparent 60%);
	pointer-events:none;z-index:1;
}
.hero-video-wrap{
	position:absolute;inset:0;
	z-index:0;
	overflow:hidden;
}
.hero-video{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;
	display:block;
}
.hero-video-native{}
.hero-video-embed{
	border:0;
	pointer-events:none; /* the iframe should not eat clicks on hero content */
}
/* YouTube-only scale-and-crop override.
   object-fit:cover (set on .hero-video) is a no-op on <iframe>, so YouTube's
   player ends up with a non-16:9 box and letterboxes the video internally with
   black bars top/bottom. Those bars show through .hero-video-tint as dark green
   bands. The "iframe cover" technique below sizes the iframe to always be at
   least 16:9 (so YouTube doesn't letterbox), then scales it 15% past the
   visible area to crop the persistent YouTube watermark in the bottom-right
   corner. Vimeo embeds (background=1) are unbranded already and keep the
   simpler 100%×100% sizing. */
.hero-video-youtube{
	inset:auto;
	top:50%; left:50%;
	width:max(115vw, calc(115vh * 16 / 9));
	height:max(115vh, calc(115vw * 9 / 16));
	transform:translate(-50%, -50%);
}
.hero-video-tint{
	position:absolute;inset:0;
	background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 40%,rgba(0,0,0,.28) 72%,rgba(0,0,0,.60) 100%);
	pointer-events:none;
}
.hero-watermark{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	font-size:11px;letter-spacing:.18em;color:rgba(200,216,192,.15);
	pointer-events:none;white-space:nowrap;line-height:1.8;text-align:center;
	z-index:1;
}
.hero-content{position:relative;z-index:2;}

/* ────────────────────────────────────────────────────────────────
   HERO ENTRANCE ANIMATION
   Staggered fade-up on page load. The headline lifts first, then
   the sub at +200ms, then the scroll-line at +400ms. Uses the same
   cubic-bezier curve as modal transitions for tonal consistency.
   prefers-reduced-motion is honoured below.
   ──────────────────────────────────────────────────────────────── */
@keyframes mv-hero-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}
.hero-h,
.hero-sub,
.scroll-line {
	animation: mv-hero-rise 1100ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.hero-h    { animation-delay: 200ms; }
.hero-sub  { animation-delay: 400ms; }
.scroll-line { animation-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
	.hero-h, .hero-sub, .scroll-line { animation: none; }
}

.hero-h{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:clamp(40px,7vw,80px);font-weight:500;line-height:1.08;
	color:#fff;letter-spacing:-.02em;margin-bottom:24px;
	text-wrap:balance;
	text-shadow:0 2px 24px rgba(0,0,0,.38);
}
.hero-sub{
	font-size:18px;font-weight:400;
	color:rgba(200,216,192,.85);
	max-width:400px;margin:0 auto 56px;line-height:1.75;
	text-wrap:pretty;
	text-shadow:0 1px 16px rgba(0,0,0,.34);
	transition:opacity .35s ease;
}
.scroll-line{
	width:1px;height:48px;margin:0 auto;
	background:linear-gradient(to bottom,rgba(200,216,192,.35),transparent);
}

/* ── HERO STRIP — mobile only ────────────────────────────────
   Three-tab CTA strip pinned to the bottom of the hero on mobile.
   Hidden on desktop (where path cards do the same job).
   ──────────────────────────────────────────────────────────── */
.hero-strip{display:none;}


/* ── PATH CARDS ──────────────────────────────────────────────
   Three hub cards: Short Stays / Events & Retreats / Residency.
   When an ACF image is uploaded, its inline background-image
   wins over the fallback gradient (specificity: inline > class).
   ──────────────────────────────────────────────────────────── */
.paths{background:#fff;padding:112px 64px;}
.paths-grid{
	display:grid;grid-template-columns:1fr 1fr 1fr;
	gap:28px;max-width:1152px;margin:0 auto;
}
.card{
	border:1px solid rgba(27,58,45,.1);border-radius:12px;
	overflow:hidden;display:flex;flex-direction:column;
	transition:transform 500ms cubic-bezier(0.32, 0.72, 0, 1),
	           box-shadow 500ms cubic-bezier(0.32, 0.72, 0, 1);
	background:#fff;
}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 48px rgba(27,58,45,.1);}
.card-img{
	height:248px;position:relative;
	background-size:cover;background-position:center;
}
@media (prefers-reduced-motion: reduce) {
	.card { transition: none; }
	.card:hover { transform: none; }
}
.card-img::after{
	content:attr(data-label);
	position:absolute;bottom:14px;left:18px;
	font-size:11px;letter-spacing:.07em;
	color:rgba(255,255,255,.25);font-style:italic;
}
/* Hide overlay caption once a real image is uploaded */
.card-img[style*="background-image"]::after{display:none;}
/* Fallback gradients when no ACF image is uploaded */
.img-stay{background:linear-gradient(145deg,#2D5C45 0%,#3A6B52 55%,#243F30 100%);}
.img-host{background:linear-gradient(145deg,#1B3A2D 0%,#243F30 55%,#152E23 100%);}
.img-live{background:linear-gradient(145deg,#243F30 0%,#2D5C45 55%,#3A6B52 100%);}

.card-body{padding:40px;display:flex;flex-direction:column;flex:1;}
.card-bar{width:28px;height:3px;border-radius:2px;margin-bottom:18px;}
.card-h{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:32px;font-weight:500;
	color:var(--on-light-h,#1B3A2D);margin-bottom:14px;line-height:1.15;
}
.card-p{
	font-size:16px;font-weight:400;line-height:1.8;
	color:var(--on-light-body,#3A5947);flex:1;text-wrap:pretty;
}
.card-cta{
	margin-top:28px;
	display:flex;align-items:center;justify-content:space-between;
	width:100%;
	padding:16px 0;
	border-top:1.5px solid currentColor;
	font-size:16px;font-weight:500;
	letter-spacing:.03em;
	min-height:52px;
	text-decoration:none;
	transition:opacity .2s;
}
.card-cta:hover{opacity:.7;}
.card-cta::after{content:'\2192';font-size:20px;font-weight:400;}


/* ── FEATURED STAYS BAND ─────────────────────────────────────
   Wood-grains accent band between path cards and the feature grid.
   Heading + sub on the left, single CTA button on the right.
   ──────────────────────────────────────────────────────────── */
.fs-band{
	background:var(--surface-cream,#F5F0E8);
	padding:80px 64px;
	position:relative;
}
.fs-inner{
	max-width:1152px;margin:0 auto;
	display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:center;
	background:var(--surface-forest,#1B3A2D);
	border-radius:16px;
	padding:52px 56px;
	box-shadow:0 18px 50px rgba(27,58,45,.20);
}
.fs-brow{
	font-size:12px;font-weight:500;letter-spacing:.14em;
	text-transform:uppercase;color:#C9A24B;
	margin-bottom:14px;
}
.fs-h{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:clamp(28px,3.4vw,40px);font-weight:500;
	color:#fff;line-height:1.15;
	letter-spacing:-.01em;margin-bottom:18px;
	text-wrap:balance;
}
.fs-sub{
	font-size:16px;color:var(--on-dark-body,#C8D8C0);
	line-height:1.6;
}
.fs-cta{
	display:flex;align-items:center;justify-content:space-between;
	background:var(--cta-stay,#A48930);color:#fff;
	padding:18px 22px;border-radius:4px;
	text-decoration:none;font-size:15px;font-weight:500;
	transition:opacity .2s;
	min-height:52px;
}
.fs-cta:hover{opacity:.85;}
.fs-cta-arrow{font-size:18px;line-height:1;}


/* Shared brow utility — used in origin and elsewhere */
.brow{
	display:block;font-size:13px;font-weight:500;
	letter-spacing:.12em;text-transform:uppercase;
	color:var(--on-light-body,#3A5947);
	margin-bottom:18px;
}


/* ── FEATURE — 3×2 CARD GRID ─────────────────────────────────
   Intro card (forest) as first cell + 5 image cards. Same card
   primitive as Residency units and Events venues. 24px gap.
   Warm cream section background.
   ──────────────────────────────────────────────────────────── */
.feature{background:var(--warm,#F9F6F0);border-top:1px solid rgba(27,58,45,.07);padding:96px 64px;}
.feat-inner{max-width:1152px;margin:0 auto;}
.feat-grid{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	gap:24px;
}
.feat-card{
	background:#fff;border:1px solid rgba(27,58,45,.08);border-radius:12px;
	overflow:hidden;display:flex;flex-direction:column;
}
.feat-card-img{
	height:220px;position:relative;flex-shrink:0;
	background-size:cover;background-position:center;
}
.feat-card-img::after{
	content:attr(data-label);
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	font-size:10px;letter-spacing:.12em;text-transform:uppercase;
	color:rgba(27,58,45,.45);white-space:nowrap;text-align:center;
}
/* Hide overlay caption once a real image is uploaded */
.feat-card-img[style*="background-image"]::after{display:none;}
/* Fallback gradients when no ACF image uploaded */
.fi-active{background:linear-gradient(150deg,#C8D8B8,#B0C39D);}
.fi-community{background:linear-gradient(150deg,#C8D8B8,#B8CCA4);}
.fi-events{background:linear-gradient(150deg,#BCCFA8,#A7BE92);}
.fi-dining{background:linear-gradient(150deg,#C2D3B0,#AEC29A);}
.fi-leisure{background:linear-gradient(150deg,#B5C8A0,#A0B68A);}

.feat-card-body{padding:28px;display:flex;flex-direction:column;flex:1;}
.feat-card-brow{
	font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
	color:var(--on-light-body,#3A5947);margin-bottom:10px;
}
.feat-card-h{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:24px;font-weight:500;
	color:var(--on-light-h,#1B3A2D);line-height:1.2;margin-bottom:12px;text-wrap:balance;
}
.feat-card-p{
	font-size:15px;font-weight:400;line-height:1.75;
	color:var(--on-light-body,#3A5947);text-wrap:pretty;flex:1;
}
.feat-card-tags{
	font-size:12px;color:rgba(27,58,45,.55);letter-spacing:.02em;
	margin-top:16px;padding-top:14px;border-top:1px solid rgba(27,58,45,.06);
}
.feat-card-link{
	font-size:14px;font-weight:500;
	display:inline-flex;align-items:center;gap:6px;
	margin-top:16px;padding-top:16px;border-top:1px solid rgba(27,58,45,.08);
	min-height:44px;text-decoration:none;transition:opacity .2s;
}
.feat-card-link:hover{opacity:.7;}
.feat-card-link::after{content:'\2192';font-size:15px;}

/* Intro card — forest green, copy only, sits as first cell */
.feat-card-intro{
	background:var(--surface-forest,#1B3A2D);color:rgba(200,216,192,.85);
	border:none;
	padding:36px 32px;
	display:flex;flex-direction:column;justify-content:center;
}
.feat-card-intro .feat-card-brow{
	color:rgba(200,216,192,.6);margin-bottom:20px;
}
.feat-card-h-intro{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:32px;font-weight:500;color:#fff;
	line-height:1.15;margin-bottom:18px;text-wrap:balance;
}
.feat-card-p-intro{
	font-size:15px;font-weight:400;line-height:1.75;
	color:rgba(200,216,192,.8);text-wrap:pretty;
}


/* ── ORIGIN / SUSTAINABILITY ─────────────────────────────────
   Two-column grid: pull quote + body on the left, image on the right.
   On mobile, copy stays first; image moves below.
   ──────────────────────────────────────────────────────────── */
.origin{background:var(--warm,#F9F6F0);padding:96px 64px;border-top:1px solid rgba(27,58,45,.07);}
.origin-inner{
	max-width:1152px;margin:0 auto;
	display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.origin-img{
	height:440px;border-radius:4px;
	background:linear-gradient(145deg,#243F30 0%,#2D5C45 50%,#1B3A2D 100%);
	background-size:cover;background-position:center;
	position:relative;
}
.origin-img::after{
	content:attr(data-label);
	position:absolute;bottom:18px;left:22px;
	font-size:11px;letter-spacing:.07em;
	color:rgba(255,255,255,.18);font-style:italic;
}
.origin-img[style*="background-image"]::after{display:none;}
.origin-pull{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:34px;font-weight:500;
	color:var(--on-light-h,#1B3A2D);
	line-height:1.2;margin-bottom:28px;
	text-wrap:balance;
}
.origin-body{
	font-size:17px;font-weight:400;line-height:1.85;
	color:var(--on-light-body,#3A5947);margin-bottom:32px;
	text-wrap:pretty;
}
.origin-link{
	font-size:15px;font-weight:500;letter-spacing:.04em;
	color:var(--cta-stay,#A48930);
	display:inline-flex;align-items:center;gap:8px;
	min-height:44px;text-decoration:none;
	transition:opacity .2s;
}
.origin-link:hover{opacity:.7;}
.origin-link::after{content:'\2192';font-size:16px;}


/* ── LOCATION ────────────────────────────────────────────────
   Four distance cards in a row on desktop, two-up on tablet, one-up on phone.
   ──────────────────────────────────────────────────────────── */
.location{background:var(--surface-cream,#F5F0E8);padding:96px 64px;}
.loc-inner{max-width:1152px;margin:0 auto;}
.loc-brow{
	font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
	color:var(--on-cream-label,#5C3E15);
	margin-bottom:12px;
}
.loc-h{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:40px;font-weight:500;
	color:var(--on-cream-h,#1B3A2D);margin-bottom:52px;line-height:1.2;
	text-wrap:balance;
}
.loc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.loc-card{
	background:#fff;border:1px solid rgba(92,62,21,.15);
	border-radius:8px;padding:30px 28px;
}
.loc-label{
	font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
	color:var(--on-cream-label,#5C3E15);margin-bottom:12px;
}
.loc-p{
	font-size:16px;font-weight:400;line-height:1.75;
	color:var(--on-cream-h,#1B3A2D);text-wrap:pretty;
}


/* ── PRESS ───────────────────────────────────────────────────
   "As seen in" strip. Repeater with optional logos.
   ──────────────────────────────────────────────────────────── */
.press{
	background:#fff;padding:40px 64px;
	border-top:1px solid rgba(27,58,45,.06);
	border-bottom:1px solid rgba(27,58,45,.06);
}
.press-inner{
	max-width:1152px;margin:0 auto;
	display:flex;flex-direction:column;align-items:center;gap:20px;
}
.press-as{
	font-size:11px;font-weight:500;
	letter-spacing:.14em;text-transform:uppercase;
	color:rgba(27,58,45,.55);
}
.press-names{
	display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
	gap:12px 28px;
	font-size:15px;font-weight:500;letter-spacing:.01em;
	list-style:none;padding:0;margin:0;
}
.press-names li{
	color:var(--on-light-body,#3A5947);
	white-space:nowrap;
	position:relative;
}
.press-names li:not(:last-child)::after{
	content:'\00b7';
	position:absolute;
	right:-18px;top:50%;transform:translateY(-50%);
	color:rgba(27,58,45,.25);font-weight:400;
}
.press-names a{
	display:inline-flex;align-items:center;
	min-height:44px;padding:4px 6px;
	color:inherit;text-decoration:none;transition:opacity .2s;
}
.press-names a:hover{opacity:.65;}
.press-names img{
	height:40px;width:auto;display:block;
	opacity:.8;transition:opacity .2s;
}
.press-names a:hover img{opacity:1;}


/* ── TESTIMONIALS ────────────────────────────────────────────
   Horizontal scroll-snap carousel. Up to 6 cards (enforced in ACF).
   JS in home.js auto-detects card count; ≤3 cards centres the track
   and hides dots, >3 cards aligns to start and shows one dot per card.
   ──────────────────────────────────────────────────────────── */
.testimonials{background:var(--surface-cream,#F5F0E8);padding:80px 64px;}
.testi-inner{max-width:1152px;margin:0 auto;}
.testi-header{
	display:flex;align-items:center;justify-content:space-between;
	margin-bottom:32px;
}
.testi-h{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:36px;font-weight:500;color:var(--on-cream-h,#1B3A2D);
	text-wrap:balance;
}
.testi-track{
	display:flex;gap:20px;
	overflow-x:auto;scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
	scrollbar-width:none;padding-bottom:4px;
}
.testi-track::-webkit-scrollbar{display:none;}
.testi-card{
	min-width:340px;max-width:340px;
	border-radius:12px;overflow:hidden;
	border:1px solid rgba(27,58,45,.1);
	flex-shrink:0;display:flex;flex-direction:column;
	background:#fff;scroll-snap-align:start;
}
.testi-img{
	height:180px;flex-shrink:0;
	position:relative;
	background-size:cover;background-position:center;
	display:flex;align-items:center;justify-content:center;
}
.testi-play{
	width:48px;height:48px;
	background:rgba(255,255,255,.92);border-radius:50%;
	display:flex;align-items:center;justify-content:center;
}
.play-tri{
	width:0;height:0;
	border-left:15px solid #1B3A2D;
	border-top:9px solid transparent;
	border-bottom:9px solid transparent;
	margin-left:3px;
}
.testi-img--highlight{background:#B0BFA1;}
.testi-pull{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:18px;font-weight:400;
	color:#1B3A2D;
	line-height:1.5;text-align:center;
	padding:0 28px;text-wrap:balance;
}
.testi-body{padding:24px;display:flex;flex-direction:column;flex:1;}
.testi-bar{width:24px;height:2px;border-radius:1px;margin-bottom:14px;flex-shrink:0;}
.testi-quote{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:15px;font-weight:400;
	color:var(--on-light-h,#1B3A2D);
	line-height:1.7;flex:1;margin-bottom:14px;
	text-wrap:pretty;
}
.testi-name{font-size:13px;font-weight:500;color:var(--on-light-h,#1B3A2D);}
.testi-attr{font-size:12px;color:var(--on-cream-label,#5C3E15);margin-top:2px;}
.testi-dots{display:flex;gap:7px;margin-top:24px;justify-content:center;}
.testi-dot{
	cursor:pointer;background:none;border:none;padding:4px;
	-webkit-tap-highlight-color:transparent;
	width:7px;height:7px;border-radius:50%;
	background:rgba(27,58,45,.2);transition:background .2s;
}
.testi-dot.active{background:var(--on-light-h,#1B3A2D);}
/* Desktop ≥861px: ≤3 testimonials → track centres; >3 → JS adds .has-overflow
   to align flex-start so the carousel scrolls naturally. */
@media(min-width:861px){
	.testi-track{justify-content:safe center;}
	.testi-track.has-overflow{justify-content:flex-start;}
}


/* ── HAPPENING AT THE VILLAGE ────────────────────────────────
   Forest-green section. Two layouts:
   - .hap-single: 1fr/2fr copy + image (used on homepage as teaser)
   - .hap-two:   1fr 1fr two-up cards (used on Events page)
   ──────────────────────────────────────────────────────────── */
.happening{background:var(--surface-forest,#1B3A2D);padding:80px 64px;}
.happening-inner{max-width:1152px;margin:0 auto;}
.hap-brow{
	font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
	color:#9FE1CB;margin-bottom:28px;
}
.hap-single{display:grid;grid-template-columns:1fr 2fr;gap:56px;align-items:center;}
.hap-copy{display:flex;flex-direction:column;}
.hap-type{
	font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
	color:#9FE1CB;
}
.hap-h{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:28px;font-weight:500;color:#fff;
	line-height:1.2;margin:10px 0 8px;text-wrap:balance;
}
.hap-meta{font-size:13px;color:rgba(200,216,192,.45);margin-bottom:14px;}
.hap-desc{
	font-size:15px;color:rgba(200,216,192,.7);
	line-height:1.85;text-wrap:pretty;
}
.hap-cobrand{
	display:flex;align-items:center;gap:12px;
	padding:16px 0;border-top:1px solid rgba(200,216,192,.15);
	margin-top:20px;
}
.hap-cobrand-label{
	font-size:11px;font-weight:500;color:var(--on-dark-body,#C8D8C0);
	letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.hap-cobrand-logo{height:24px;display:flex;align-items:center;}
.hap-cobrand-logo img{
	height:24px;width:auto;opacity:.85;
	filter:brightness(0) invert(1);
}
.hap-cta{
	font-size:15px;font-weight:500;color:#9FE1CB;
	display:inline-flex;align-items:center;gap:8px;
	min-height:44px;text-decoration:none;
	transition:opacity .2s;margin-top:auto;
	background:none;border:0;cursor:pointer;font-family:inherit;
	-webkit-tap-highlight-color:transparent;touch-action:manipulation;
	-webkit-appearance:none;
}
.hap-cta:hover{opacity:.7;}
.hap-cta::after{content:'\2192';font-size:16px;}
.hap-img{
	border-radius:12px;
	background:linear-gradient(145deg,#2D5C45,#1B3A2D);
	background-size:cover;background-position:center;
	min-height:280px;
	display:flex;align-items:center;justify-content:center;
}
.hap-img-ph{font-size:10px;letter-spacing:.07em;color:rgba(200,216,192,.15);}
.hap-img[style*="background-image"] .hap-img-ph{display:none;}


/* ── NEWSLETTER ──────────────────────────────────────────────
   Serene-green section. Two columns: heading+sub on left, form on right.
   Form posts to Mailchimp; action URL editable via Site Settings ACF.
   Country dropdown rendered server-side via mv_render_country_select().
   ──────────────────────────────────────────────────────────── */
.newsletter{
	background:#DAEEDF; /* Serene Green */
	padding:88px 64px;
	border-top:1px solid rgba(27,58,45,.08);
	position:relative;
	overflow:hidden;
}
.newsletter-inner{
	max-width:1152px;margin:0 auto;
	display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.nl-copy{}
.newsletter-h{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:clamp(28px,3.2vw,36px);
	font-weight:500;color:var(--surface-forest,#1B3A2D);
	margin-bottom:12px;text-wrap:balance;line-height:1.15;
}
.newsletter-sub{
	font-size:17px;color:var(--on-light-body,#3A5947);
	line-height:1.7;text-wrap:pretty;
}
.newsletter-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.newsletter-input{
	height:52px;
	border:1px solid rgba(27,58,45,.15);
	border-radius:6px;padding:0 16px;
	font-size:15px;font-family:inherit;color:var(--on-light-h,#1B3A2D);
	background:#fff;outline:none;transition:border-color .2s;
	width:100%;box-sizing:border-box;
}
.newsletter-input:focus{border-color:var(--surface-forest,#1B3A2D);}
.newsletter-input::placeholder{color:rgba(27,58,45,.35);}
.newsletter-select{
	appearance:none;-webkit-appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B3A2D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 16px center;
	padding-right:40px;cursor:pointer;
}
.newsletter-actions{
	grid-column:1 / -1;
	display:flex;align-items:center;gap:20px;margin-top:4px;
}
.newsletter-btn{
	height:52px;padding:0 32px;
	background:var(--surface-forest,#1B3A2D);color:#fff;
	border:none;border-radius:6px;
	font-size:15px;font-weight:500;font-family:inherit;
	cursor:pointer;white-space:nowrap;transition:opacity .2s;
	-webkit-appearance:none;
	min-height:52px;
	-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.newsletter-btn:hover{opacity:.85;}
.newsletter-note{
	font-size:13px;color:rgba(27,58,45,.55);
	margin:0;
}


/* ── BOTTOM CTA — cream, minimal ─────────────────────────────
   Three columns: Short Stays / Events & Retreats / Residency.
   ──────────────────────────────────────────────────────────── */
.bottom-cta{background:var(--surface-cream,#F5F0E8);padding:96px 64px;}
.bcta-inner{max-width:1152px;margin:0 auto;}
.bcta-head{max-width:680px;margin:0 auto 48px;text-align:center;}
.bcta-h{
	font-family:var(--font-heading,'CooperBT',serif);
	font-size:clamp(28px,3.2vw,40px);font-weight:500;
	color:var(--on-cream-h,#1B3A2D);line-height:1.15;
	letter-spacing:-.01em;text-wrap:balance;margin-bottom:12px;
}
.bcta-sub{font-size:16px;color:var(--on-light-body,#3A5947);line-height:1.6;}
.bcta-grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.bcta-col{
	position:relative;overflow:hidden;
	background:#fff;
	border:1px solid rgba(27,58,45,.1);
	border-radius:14px;
	padding:38px 32px 28px;
	display:flex;flex-direction:column;
	transition:transform 500ms cubic-bezier(0.32,0.72,0,1),
	           box-shadow 500ms cubic-bezier(0.32,0.72,0,1);
}
.bcta-col::before{
	content:'';position:absolute;top:0;left:0;right:0;height:4px;
	background:var(--bcta-accent,#A48930);
}
.bcta-col:hover{
	transform:translateY(-4px);
	box-shadow:0 18px 40px rgba(27,58,45,.12);
}
.bcta-label{
	font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
	margin-bottom:12px;
}
.bcta-p{
	font-size:16px;font-weight:400;line-height:1.7;
	color:var(--on-cream-h,#1B3A2D);flex:1;text-wrap:pretty;
}
.bcta-cta{
	margin-top:28px;width:100%;
	display:flex;align-items:center;justify-content:space-between;
	padding:16px 0 4px;border-top:1.5px solid currentColor;
	font-size:16px;font-weight:500;letter-spacing:.03em;
	min-height:52px;text-decoration:none;transition:opacity .2s;
}
.bcta-cta:hover{opacity:.7;}
.bcta-cta::after{content:'\2192';font-size:18px;}


/* ============================================================
   MOBILE — ≤860px
   ============================================================ */
@media(max-width:860px){
	/* HERO */
	.hero{
		/* Fill visible viewport minus sticky nav and (if shown) promo banner.
		   --nav-height / --banner-height are measured live in home.js so the
		   strip sits exactly above the URL bar on every device. 100dvh tracks
		   the URL bar as it shows/hides. */
		min-height:calc(100vh  - var(--nav-height,64px) - var(--banner-height,0px));    /* fallback */
		min-height:calc(100dvh - var(--nav-height,64px) - var(--banner-height,0px));   /* modern browsers */
		/* JS measures the true visible height (Safari's dvh is unreliable at
		   load, especially with the bottom toolbar). --hero-vh wins when set. */
		min-height:calc(var(--hero-vh, 100dvh) - var(--nav-height,64px) - var(--banner-height,0px));
		padding:0;
		align-items:stretch;
		justify-content:flex-start;
		flex-direction:column;
		text-align:center;
	}
	.hero-content{
		padding:48px 28px 0;
		flex:1;
		display:flex;flex-direction:column;
		align-items:center;justify-content:center;
	}
	/* When a path button is expanded, fade the subheading so the
	   panel has room without the copy feeling cramped. */
	.hero.strip-open .hero-sub{opacity:0;}
	.hero-h{font-size:clamp(36px,9vw,52px);letter-spacing:-.01em;}
	.hero-sub{font-size:16px;max-width:280px;margin-bottom:0;}
	.scroll-line{display:none;}

	/* HERO STRIP — mobile only */
	.hero-strip{display:block;position:relative;z-index:2;width:100%;
		transition:opacity .55s cubic-bezier(0.32,0.72,0,1),
		           transform .55s cubic-bezier(0.32,0.72,0,1);
		will-change:opacity,transform;}
	.hero-strip.strip-hidden{opacity:0;transform:translateY(16px);pointer-events:none;}
	.strip-gradient{
		background:linear-gradient(to bottom,transparent,rgba(12,30,18,.98) 40%);
		padding:20px 0 max(0px,env(safe-area-inset-bottom));width:100%;
	}
	.strip-expanded{padding:0 24px 14px;display:none;}
	.strip-expanded.open{display:block;}
	.strip-exp-desc{
		font-size:15px;color:rgba(200,216,192,.85);
		line-height:1.75;margin-bottom:14px;text-wrap:pretty;
	}
	.strip-exp-cta{
		font-size:15px;font-weight:500;
		display:inline-flex;align-items:center;gap:6px;
		min-height:48px;text-decoration:none;
	}
	.strip-exp-cta::after{content:'\2192';}
	.strip-tabs{
		display:grid;grid-template-columns:1fr 1fr 1fr;
		border-top:1px solid rgba(200,216,192,.15);
	}
	.strip-tab{
		padding:14px 6px 20px;
		display:flex;flex-direction:column;align-items:center;gap:6px;
		cursor:pointer;
		border-right:1px solid rgba(200,216,192,.1);
		min-height:60px;
		background:none;border-top:none;border-bottom:none;border-left:none;
		font-family:inherit;
		-webkit-appearance:none;
		-webkit-tap-highlight-color:transparent;touch-action:manipulation;
	}
	.strip-tab:last-child{border-right:none;}
	.strip-tab.active{background:rgba(255,255,255,.07);}
	.strip-tab-bar{width:24px;height:3px;border-radius:2px;}
	.strip-tab-label{
		color:#fff;font-size:12px;font-weight:500;
		letter-spacing:.02em;text-align:center;line-height:1.3;
	}

	/* PATHS */
	.paths{padding:64px 24px;}
	.paths-grid{grid-template-columns:1fr;gap:20px;}
	.card-img{height:180px;}
	.card-h{font-size:clamp(22px,5vw,28px);}

	/* FEATURED STAYS BAND */
	.fs-band{padding:56px 24px;}
	.fs-inner{grid-template-columns:1fr;gap:26px;padding:40px 32px;}

	/* FEATURE GRID */
	.feature{padding:64px 24px;}
	.feat-grid{grid-template-columns:1fr 1fr;}
	.feat-card-img{height:180px;}
	.feat-card-h{font-size:22px;}
	.feat-card-h-intro{font-size:26px;}
	.feat-card-intro{padding:28px 24px;}
	.feat-card-body{padding:24px;}

	/* ORIGIN */
	.origin{padding:64px 24px;}
	.origin-inner{grid-template-columns:1fr;gap:40px;}
	.origin-img{order:2;height:220px;}
	.origin-copy{order:1;}
	.origin-pull{font-size:30px;}

	/* LOCATION */
	.location{padding:64px 24px;}
	.loc-grid{grid-template-columns:1fr 1fr;}
	.loc-h{font-size:clamp(26px,6vw,36px);}

	/* PRESS */
	.press{padding:32px 24px;}
	.press-names{font-size:14px;gap:10px 22px;}
	.press-names img{height:34px;}

	/* TESTIMONIALS */
	.testimonials{padding:64px 24px;}
	.testi-header{flex-direction:column;align-items:flex-start;gap:16px;}
	.testi-track{margin:0;padding:0 0 4px;}
	.testi-card{min-width:280px;max-width:280px;}
	.testi-img{height:180px;}

	/* HAPPENING */
	.happening{padding:64px 24px;}
	.hap-single{grid-template-columns:1fr;gap:32px;}
	.hap-img{order:2;min-height:200px;}
	.hap-copy{order:1;}

	/* NEWSLETTER */
	.newsletter{padding:56px 24px;}
	.newsletter-inner{grid-template-columns:1fr;gap:32px;}
	.newsletter-actions{flex-direction:column;align-items:stretch;gap:12px;}
	.newsletter-btn{width:100%;}
	.newsletter-note{text-align:center;}

	/* BOTTOM CTA */
	.bottom-cta{padding:64px 24px;}
	.bcta-head{margin-bottom:32px;}
	.bcta-grid{grid-template-columns:1fr;gap:16px;}
	.bcta-col{padding:28px 24px 22px;}

	/* PROMO BANNER */
	.promo-banner-inner{
		padding:10px 48px 10px 20px;
		justify-content:flex-start;
	}
	.promo-banner-message{font-size:13px;text-align:left;}
	.promo-banner-link{display:inline-block;margin-top:2px;}
	.promo-banner-dismiss{right:6px;width:44px;height:44px;}
}


/* ============================================================
   MOBILE — ≤480px
   ============================================================ */
@media(max-width:480px){
	.paths{padding:48px 20px;}
	.fs-band{padding:44px 20px;}
	.fs-inner{padding:32px 24px;}
	.fs-cta{padding:16px 20px;font-size:14px;}
	.feature{padding:48px 20px;}
	.feat-grid{grid-template-columns:1fr;gap:20px;}
	.feat-card-h-intro{font-size:24px;}
	.origin{padding:48px 20px;}
	.location{padding:48px 20px;}
	.loc-grid{grid-template-columns:1fr;}
	.press{padding:24px 20px;}
	.testimonials{padding:48px 20px;}
	.testi-track{margin:0;padding:0 0 4px;}
	.happening{padding:48px 20px;}
	.newsletter{padding:48px 20px;}
	.newsletter-form{grid-template-columns:1fr;gap:10px;}
	.bottom-cta{padding:48px 20px;}
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
	.card,
	.card-cta,
	.fs-cta,
	.feat-card-link,
	.origin-link,
	.testi-track,
	.testi-dot,
	.hap-cta,
	.bcta-cta,
	.newsletter-input,
	.newsletter-btn,
	.promo-banner-link,
	.promo-banner-dismiss{
		transition:none !important;
	}
	.testi-track{scroll-behavior:auto;}
}