/* ==========================================================================
   Fearless Living Retreat — landing page styles
   A restrained, editorial hospitality palette (deep espresso ink, warm
   paper ivory, a single antique-gold accent) instead of bright "template"
   colors — design tokens live at the top so a palette change happens once.
   ========================================================================== */

:root {
	/* Brand palette. Accent colors are also overridden live from the
	   Customizer (see inc/customizer.php) — keep those two names in sync. */
	--rft-ink: #17130f;
	--rft-ink-soft: #5c5346;
	--rft-ivory: #f6f1e7;
	--rft-ivory-2: #fbf8f2;
	--rft-line: #e1d6bd;
	--rft-white: #ffffff;
	--rft-accent: #8a6a35;
	--rft-accent-2: #c9a961;
	--rft-accent-contrast: #ffffff;

	/* aliases kept for any legacy reference */
	--rft-cream: var(--rft-ivory);
	--rft-cream-2: var(--rft-ivory-2);
	--rft-sand: var(--rft-line);

	/* Type */
	--rft-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--rft-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Scale — sharp-ish rectangular buttons, softer-rounded photos/cards
	   (the mixed-radius pairing common to premium hospitality sites: crisp
	   CTAs, warm inviting imagery). */
	--rft-radius-sm: 6px;
	--rft-radius: 10px;
	--rft-radius-lg: 16px;
	--rft-shadow: 0 30px 60px -30px rgba(15, 12, 8, 0.45), 0 10px 24px -12px rgba(15, 12, 8, 0.22);
	--rft-shadow-sm: 0 10px 24px -14px rgba(15, 12, 8, 0.4);
	--rft-container: 1240px;
	/* The header and hero sit on top of a full-bleed edge-to-edge photo, so
	   unlike the rest of the page (which reads fine inside a centered,
	   fixed-width column) their content is anchored proportionally to the
	   actual viewport edge instead — otherwise, on a very wide monitor, the
	   text ends up stranded ~600px+ from the edge while the photo runs
	   edge-to-edge, which reads as randomly off-center rather than composed. */
	--rft-edge-pad: clamp(24px, 5vw, 100px);
	--rft-header-h: 92px;
	--rft-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rft-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--rft-ivory);
	color: var(--rft-ink);
	font-family: var(--rft-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, blockquote, p { margin: 0; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--rft-accent); outline-offset: 3px; }

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

.rft-container { max-width: var(--rft-container); margin: 0 auto; padding: 0 32px; }

/* ---------- Type helpers ---------- */
.rft-eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--rft-font-body); font-weight: 600; font-size: 12px;
	letter-spacing: 0.2em; text-transform: uppercase; color: var(--rft-accent);
	margin: 0 0 20px;
}
.rft-eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.6; }
.rft-eyebrow svg { width: 14px; height: 14px; }
.rft-h2 {
	font-family: var(--rft-font-display); font-weight: 400; font-size: clamp(30px, 3.8vw, 48px);
	line-height: 1.16; letter-spacing: -0.01em; color: var(--rft-ink); margin: 0 0 22px;
}
.rft-h2-invert { color: var(--rft-white); }
/* The italic-accent word an editor can trigger from any heading field by
   wrapping a word in *asterisks* — see rft_heading() in inc/template-tags.php. */
.rft-accent-word { font-style: italic; font-weight: 400; color: var(--rft-accent); }
.rft-h2-invert .rft-accent-word { color: var(--rft-accent-2); }
.rft-hero-heading .rft-accent-word { color: var(--rft-accent-2); }

.rft-link-arrow {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
	font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rft-accent);
	border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.rft-link-arrow svg { width: 13px; height: 13px; transition: transform 0.3s var(--rft-ease); }
.rft-link-arrow:hover svg { transform: translateX(4px); }
.rft-lede { font-size: clamp(16.5px, 1.4vw, 19px); color: var(--rft-ink-soft); max-width: 600px; line-height: 1.65; font-weight: 400; }
.rft-lede-invert { color: rgba(255,255,255,0.78); }
.rft-lede-center { max-width: 620px; margin: 0 auto; }
.rft-prose p { margin: 0 0 18px; color: var(--rft-ink-soft); font-size: 16.5px; }
.rft-prose p:last-child { margin-bottom: 0; }
.rft-pullquote {
	font-family: var(--rft-font-display); font-style: italic; font-weight: 400;
	font-size: clamp(19px, 1.8vw, 24px); line-height: 1.5; color: var(--rft-ink);
	border-left: 1.5px solid var(--rft-accent); padding-left: 24px; margin-top: 30px;
}
.rft-pullquote cite { display: block; margin-top: 14px; font-family: var(--rft-font-body); font-style: normal; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rft-ink-soft); }

.rft-section-head { max-width: 720px; margin-bottom: 60px; }
.rft-section-head-center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.rft-section-head-center .rft-eyebrow { justify-content: center; }
.rft-section-head-center .rft-eyebrow::before { display: none; }

/* ---------- Buttons ---------- */
/* Rectangular, tracked, uppercase small labels — a deliberate departure
   from full "pill" buttons, which read as generic SaaS-template chrome.
   This shape is the same idiom boutique hospitality sites use. */
.rft-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 16px 30px; border-radius: var(--rft-radius-sm);
	font-family: var(--rft-font-body); font-weight: 600; font-size: 12.5px; letter-spacing: 0.11em; text-transform: uppercase;
	white-space: nowrap; transition: transform 0.3s var(--rft-ease), box-shadow 0.3s var(--rft-ease), background-color 0.3s var(--rft-ease), border-color 0.3s var(--rft-ease), color 0.3s var(--rft-ease);
	touch-action: manipulation;
}
.rft-btn svg { width: 14px; height: 14px; transition: transform 0.3s var(--rft-ease); }
.rft-btn-primary { background: var(--rft-accent); color: var(--rft-accent-contrast); box-shadow: var(--rft-shadow-sm); }
.rft-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--rft-shadow); filter: brightness(1.08); }
.rft-btn-ghost { color: var(--rft-ink); border: 1px solid var(--rft-line); }
.rft-btn-ghost:hover { background: rgba(23,19,15,0.04); }
.rft-btn-ghost:hover svg { transform: translateX(3px); }
.rft-hero .rft-btn-ghost { color: var(--rft-white); border-color: rgba(255,255,255,0.4); }
.rft-hero .rft-btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); }
.rft-btn-lg { padding: 19px 38px; font-size: 13px; }

/* ---------- Progress bar ---------- */
.rft-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 210; background: transparent; }
.rft-progress span { display: block; height: 100%; width: 0%; background: var(--rft-accent); transition: width 0.1s linear; }

/* ---------- Header ---------- */
/* Default: a solid, readable header from the very first pixel — correct
   for every page except the ones with a full-bleed dark hero photo behind
   the header (the front page / one-page landing template), where a
   transparent-over-photo start makes sense. Those opt in via the
   .rft-has-hero body class (see rft_body_classes() in functions.php);
   everything else — including this Reserve/Sign-Up page, and any plain
   WordPress page — never renders near-invisible white-on-light nav text. */
.rft-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 200;
	background: rgba(246, 241, 231, 0.94); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--rft-line);
	transition: background-color 0.4s var(--rft-ease), box-shadow 0.4s var(--rft-ease), padding 0.4s var(--rft-ease), top 0s;
	padding: 8px 0;
}
body.rft-has-hero .rft-header:not(.is-scrolled) {
	background: transparent; backdrop-filter: none; box-shadow: none; padding: 14px 0;
}

/* WordPress's admin toolbar (visible to logged-in editors previewing the
   live site) is itself fixed to the viewport top, so it doesn't push our
   own fixed-position elements down the way it pushes normal page content —
   without this, the header/progress bar/mobile menu sit underneath it. */
body.admin-bar .rft-header,
body.admin-bar .rft-progress { top: 32px; }
body.admin-bar .rft-mobile-menu { top: calc(32px + var(--rft-header-h)); }
@media screen and (max-width: 782px) {
	body.admin-bar .rft-header,
	body.admin-bar .rft-progress { top: 46px; }
	body.admin-bar .rft-mobile-menu { top: calc(46px + var(--rft-header-h)); }
}
.rft-header-inner {
	width: 100%; padding: 0 var(--rft-edge-pad);
	min-height: 60px; display: flex; flex-wrap: nowrap; align-items: center; gap: 24px;
}
/* min-width:0 lets a flex child shrink/truncate below its content size —
   without it, a long site name (e.g. "Fearless Living Retreat" used as a
   text logo when no logo image is uploaded) refuses to shrink and forces
   the nav links to wrap mid-word instead. */
.rft-logo { display: flex; align-items: center; margin-right: auto; min-width: 0; flex-shrink: 1; }
.rft-logo img { max-height: 40px; width: auto; }
.rft-logo span {
	font-family: var(--rft-font-display); font-size: 20px; font-weight: 400; letter-spacing: 0.01em; color: var(--rft-ink);
	display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.rft-has-hero .rft-header:not(.is-scrolled) .rft-logo span { color: var(--rft-white); }

.rft-nav-list { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.rft-nav-list a {
	font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rft-ink); opacity: 0.78;
	white-space: nowrap; transition: opacity 0.2s var(--rft-ease), color 0.2s var(--rft-ease);
}
body.rft-has-hero .rft-header:not(.is-scrolled) .rft-nav-list a { color: var(--rft-white); }
.rft-nav-list a:hover, .rft-nav-list a.is-active { opacity: 1; color: var(--rft-accent); }
body.rft-has-hero .rft-header:not(.is-scrolled) .rft-nav-list a.is-active,
body.rft-has-hero .rft-header:not(.is-scrolled) .rft-nav-list a:hover { color: var(--rft-accent-2); }

.rft-nav-cta { flex-shrink: 0; padding: 13px 24px; }
.rft-menu-toggle { display: none; padding: 8px; color: var(--rft-ink); position: relative; width: 40px; height: 40px; }
body.rft-has-hero .rft-header:not(.is-scrolled) .rft-menu-toggle { color: var(--rft-white); }
.rft-menu-toggle svg { width: 20px; height: 20px; position: absolute; top: 10px; left: 10px; transition: opacity 0.2s, transform 0.2s; }
.rft-icon-close { opacity: 0; transform: scale(0.7); }
.rft-menu-toggle[aria-expanded="true"] .rft-icon-menu { opacity: 0; transform: scale(0.7); }
.rft-menu-toggle[aria-expanded="true"] .rft-icon-close { opacity: 1; transform: scale(1); }

.rft-mobile-menu {
	display: none; position: fixed; inset: var(--rft-header-h) 0 0 0; z-index: 199;
	background: var(--rft-ivory); padding: 28px 28px; overflow-y: auto;
	transform: translateY(-12px); opacity: 0; pointer-events: none;
	transition: opacity 0.3s var(--rft-ease), transform 0.3s var(--rft-ease);
}
.rft-mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rft-mobile-menu ul { display: flex; flex-direction: column; gap: 2px; margin-bottom: 26px; }
.rft-mobile-menu a { display: block; padding: 16px 2px; font-size: 20px; font-family: var(--rft-font-display); font-weight: 400; border-bottom: 1px solid var(--rft-line); }
.rft-mobile-menu .rft-btn { width: 100%; }

/* ---------- Reveal-on-scroll ---------- */
.rft-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--rft-ease), transform 0.8s var(--rft-ease); }
.rft-reveal.is-visible { opacity: 1; transform: translateY(0); }
/* No-JS visitors and print always see full content — the reveal is a
   progressive enhancement only, never a requirement for reading the page.
   (See the <noscript> override in header.php for the no-JS case.) */
@media print { .rft-reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- Background media ---------- */
.rft-bg-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.rft-bg-video, .rft-bg-photo { width: 100%; height: 100%; object-fit: cover; }
.rft-bg-placeholder {
	width: 100%; height: 100%;
	background:
		radial-gradient(120% 90% at 15% 0%, rgba(201,169,97,0.22), transparent 55%),
		linear-gradient(155deg, #241d16 0%, #17130f 48%, #0f0c09 100%);
	position: relative;
}
.rft-bg-placeholder::after {
	content: ''; position: absolute; inset: 0; background-image: var(--rft-noise);
	opacity: 0.05; mix-blend-mode: overlay; pointer-events: none;
}
/* Strong enough to keep white text readable over ANY uploaded photo —
   a bright daytime aerial shot needs just as much scrim as a moody dusk
   one, so this errs dark rather than assuming the photo will cooperate.
   text-shadow on the text itself (below) is a second, independent layer
   of insurance for photos with a lot of detail right behind the copy. */
.rft-bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,6,0.6) 0%, rgba(10,8,6,0.48) 45%, rgba(10,8,6,0.85) 100%); }
/* Hero text is left-anchored (see --rft-edge-pad), so it also gets an
   extra scrim concentrated on the left/bottom where the copy actually
   sits, fading out toward the right so more of the photo still shows. */
.rft-hero .rft-bg-overlay {
	background:
		linear-gradient(115deg, rgba(8,6,4,0.72) 0%, rgba(8,6,4,0.42) 38%, rgba(8,6,4,0.08) 68%, rgba(8,6,4,0.3) 100%),
		linear-gradient(180deg, rgba(10,8,6,0.3) 0%, rgba(10,8,6,0.2) 40%, rgba(10,8,6,0.78) 100%);
}

/* ---------- Placeholder photo ---------- */
/* A quiet, art-directed gradient panel with a single line icon — not an
   "empty upload slot" — so the page reads as finished before real photos
   are added. The label whispers in on hover instead of shouting always-on. */
.rft-photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rft-radius); }
.rft-placeholder {
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(130% 100% at 20% 0%, rgba(138,106,53,0.16), transparent 60%),
		linear-gradient(155deg, #efe7d4 0%, #e3d7ba 100%);
	color: var(--rft-ink-soft); min-height: 220px; position: relative; overflow: hidden;
}
.rft-placeholder::after {
	content: ''; position: absolute; inset: 0; background-image: var(--rft-noise);
	opacity: 0.045; mix-blend-mode: multiply; pointer-events: none;
}
.rft-placeholder-icon {
	position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(23,19,15,0.16);
	color: var(--rft-ink-soft); opacity: 0.55; transition: opacity 0.3s var(--rft-ease), transform 0.3s var(--rft-ease);
}
.rft-placeholder-icon svg { width: 20px; height: 20px; }
.rft-placeholder-label {
	position: absolute; z-index: 1; left: 50%; bottom: 20px; transform: translate(-50%, 4px);
	font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rft-ink-soft);
	opacity: 0; transition: opacity 0.3s var(--rft-ease), transform 0.3s var(--rft-ease); white-space: nowrap;
}
.rft-placeholder:hover .rft-placeholder-icon { opacity: 0.85; transform: scale(1.06); }
.rft-placeholder:hover .rft-placeholder-label { opacity: 0.65; transform: translate(-50%, 0); }
/* Dark-section variant (journey ritual cards) */
.rft-ritual-media .rft-placeholder {
	background: radial-gradient(130% 100% at 20% 0%, rgba(201,169,97,0.14), transparent 60%), linear-gradient(155deg, #2a231a 0%, #1a1510 100%);
}
.rft-ritual-media .rft-placeholder::after { mix-blend-mode: overlay; opacity: 0.06; }
.rft-ritual-media .rft-placeholder-icon { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.18); }
.rft-ritual-media .rft-placeholder-label { color: rgba(255,255,255,0.55); }

/* ---------- Sections (shared rhythm) ---------- */
.rft-section { padding: 128px 0; position: relative; }
@media (max-width: 768px) { .rft-section { padding: 80px 0; } }

/* ---------- Hero ---------- */
.rft-hero {
	/* Content sits in the lower-middle third rather than dead-center —
	   true geometric centering looks unbalanced here because the CTA row
	   adds visual weight toward the bottom of the text block. Anchoring
	   to the bottom with generous padding is the classic editorial/movie-
	   poster convention and reads far more deliberate. */
	position: relative; min-height: 100dvh; display: flex; align-items: flex-end;
	padding-top: calc(var(--rft-header-h) + 20px); padding-bottom: 110px; overflow: hidden;
}
.rft-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 960px; padding: 0 var(--rft-edge-pad); }
.rft-hero .rft-eyebrow { color: rgba(255,255,255,0.82); text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.rft-hero .rft-eyebrow::before { background: var(--rft-accent-2); opacity: 1; }
.rft-hero-heading {
	font-family: var(--rft-font-display); font-weight: 300; color: var(--rft-white);
	font-size: clamp(44px, 7.4vw, 84px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 26px;
	/* Independent of the overlay's darkness — a soft shadow directly under
	   the glyphs so the headline stays legible even if a client's photo has
	   a bright, busy patch land right behind it. */
	text-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
.rft-hero-sub { font-size: clamp(16.5px, 1.7vw, 20px); color: rgba(255,255,255,0.85); max-width: 540px; margin-bottom: 36px; font-weight: 300; line-height: 1.6; text-shadow: 0 2px 16px rgba(0,0,0,0.45); }
.rft-hero-meta { display: flex; align-items: center; gap: 18px; margin-bottom: 42px; flex-wrap: wrap; }
.rft-hero-meta span { display: flex; align-items: center; gap: 9px; color: var(--rft-white); font-weight: 500; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.rft-hero-meta svg { width: 15px; height: 15px; color: var(--rft-accent-2); flex-shrink: 0; }
.rft-hero-meta-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.3); }
.rft-hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.rft-scroll-cue {
	position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4);
	display: flex; align-items: center; justify-content: center; color: var(--rft-white);
	animation: rft-bob 2.6s ease-in-out infinite; z-index: 1;
}
.rft-scroll-cue svg { width: 14px; height: 14px; }
@keyframes rft-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ---------- Quick facts strip ---------- */
.rft-facts { background: var(--rft-ivory-2); border-bottom: 1px solid var(--rft-line); }
.rft-facts-inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.rft-fact {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 44px 24px; text-align: center; border-left: 1px solid var(--rft-line);
}
.rft-fact:first-child { border-left: 0; }
.rft-fact-num { font-family: var(--rft-font-display); font-weight: 400; font-size: clamp(34px, 4vw, 46px); color: var(--rft-accent); line-height: 1; }
.rft-fact-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rft-ink-soft); }

/* ---------- Split (image + copy) ---------- */
.rft-split-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 88px; align-items: center; }
.rft-split-reverse .rft-split-inner { grid-template-columns: 1.15fr 0.85fr; }
.rft-split-reverse .rft-split-copy { order: 1; }
.rft-split-reverse .rft-split-media { order: 2; }
.rft-photo-tall { aspect-ratio: 4 / 5; }
.rft-split-media .rft-photo,
.rft-split-media .rft-placeholder { box-shadow: var(--rft-shadow); }
.rft-split-media { position: relative; }
.rft-split-media::before {
	content: ''; position: absolute; top: 20px; left: -20px; right: 20px; bottom: -20px;
	border: 1px solid var(--rft-line); border-radius: var(--rft-radius); z-index: -1;
}
.rft-split-reverse .rft-split-media::before { left: 20px; right: -20px; }

/* ---------- Different (icon pillars, editorial ghost numerals) ---------- */
.rft-different { background: var(--rft-ivory-2); border-top: 1px solid var(--rft-line); border-bottom: 1px solid var(--rft-line); }
.rft-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rft-line); border: 1px solid var(--rft-line); }
.rft-pillar { background: var(--rft-ivory-2); padding: 48px 40px; position: relative; overflow: hidden; text-align: center; }
.rft-pillar-num {
	position: absolute; top: -8px; right: 4px; font-family: var(--rft-font-display); font-weight: 300;
	font-size: 96px; line-height: 1; color: var(--rft-ink); opacity: 0.05; pointer-events: none;
}
.rft-pillar-icon {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--rft-line); color: var(--rft-accent); margin-bottom: 26px;
}
.rft-pillar-icon svg { width: 22px; height: 22px; }
.rft-pillar h3 { font-family: var(--rft-font-display); font-size: 21px; font-weight: 400; margin: 0 0 12px; position: relative; }
.rft-pillar p { color: var(--rft-ink-soft); font-size: 15.5px; line-height: 1.6; position: relative; max-width: 32ch; margin: 0 auto; }

/* ---------- Journey ---------- */
.rft-journey { background: var(--rft-ink); color: var(--rft-white); position: relative; }
.rft-journey::before { content: ''; position: absolute; inset: 0; background-image: var(--rft-noise); opacity: 0.035; mix-blend-mode: overlay; pointer-events: none; }
.rft-journey .rft-eyebrow { color: var(--rft-accent-2); }
.rft-journey .rft-eyebrow::before { background: var(--rft-accent-2); opacity: 1; }
.rft-ritual-track {
	position: relative; z-index: 1;
	display: flex; gap: 24px; overflow-x: auto; padding: 8px 32px 20px;
	scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--rft-accent) transparent;
}
.rft-ritual-track::-webkit-scrollbar { height: 4px; }
.rft-ritual-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 4px; }
.rft-ritual-card {
	flex: 0 0 auto; width: 300px; scroll-snap-align: start;
	background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--rft-radius); overflow: hidden; transition: transform 0.4s var(--rft-ease), border-color 0.4s var(--rft-ease);
}
.rft-ritual-card:hover { transform: translateY(-6px); border-color: rgba(201,169,97,0.5); }
.rft-ritual-media { height: 200px; position: relative; }
.rft-ritual-media .rft-photo { border-radius: 0; height: 100%; }
.rft-ritual-num {
	position: absolute; top: 14px; left: 16px; z-index: 2;
	font-family: var(--rft-font-display); font-weight: 400; font-size: 13px; letter-spacing: 0.04em;
	color: rgba(255,255,255,0.75); background: rgba(15,12,9,0.4); backdrop-filter: blur(4px);
	padding: 4px 9px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.14);
}
.rft-ritual-copy { padding: 24px 24px 28px; position: relative; z-index: 1; }
.rft-ritual-icon { display: inline-flex; color: var(--rft-accent-2); margin-bottom: 16px; }
.rft-ritual-icon svg { width: 20px; height: 20px; }
.rft-ritual-copy h3 { font-family: var(--rft-font-display); font-size: 19px; font-weight: 400; margin-bottom: 10px; }
.rft-ritual-copy p { color: rgba(255,255,255,0.65); font-size: 14.5px; line-height: 1.6; }

/* ---------- Location gallery ---------- */
.rft-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; gap: 4px; }
.rft-gallery-item { overflow: hidden; }
.rft-gallery-lg { grid-column: span 2; grid-row: span 3; }
.rft-gallery-item:nth-child(2) { grid-row: span 3; }
.rft-gallery-item:nth-child(3) { grid-row: span 3; }
.rft-gallery-wide { grid-column: span 4; grid-row: span 2; }
.rft-gallery-item .rft-photo, .rft-gallery-item .rft-placeholder { border-radius: 0; height: 100%; }
.rft-gallery-item { position: relative; }
.rft-gallery-item .rft-photo { transition: transform 0.6s var(--rft-ease); }
.rft-gallery-item:hover .rft-photo { transform: scale(1.04); }

/* ---------- Leave-with (centered, no image) ---------- */
.rft-leave { background: var(--rft-ivory-2); }
.rft-leave-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.rft-checklist { display: flex; flex-direction: column; gap: 14px; margin: 30px 0; }
.rft-checklist-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; text-align: left;
	max-width: 720px; margin-left: auto; margin-right: auto;
}
.rft-checklist li { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; }
.rft-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rft-accent); color: var(--rft-accent); display: flex; align-items: center; justify-content: center; }
.rft-check svg { width: 12px; height: 12px; }
.rft-closing-line { font-family: var(--rft-font-display); font-style: italic; font-weight: 400; font-size: 19px; color: var(--rft-ink-soft); margin-top: 22px; max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---------- Host ---------- */
.rft-host { background: var(--rft-ivory); }
.rft-host-inner { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 88px; align-items: center; }
.rft-host-media { position: relative; }
.rft-host-media .rft-photo,
.rft-host-media .rft-placeholder { box-shadow: var(--rft-shadow); }
.rft-host-media::before {
	content: ''; position: absolute; top: 20px; left: -20px; right: 20px; bottom: -20px;
	border: 1px solid var(--rft-line); border-radius: var(--rft-radius); z-index: -1;
}
.rft-host-credentials { font-weight: 600; color: var(--rft-accent); margin-bottom: 22px; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Reserve / Final CTA (full-bleed dark) ---------- */
.rft-reserve, .rft-final { position: relative; overflow: hidden; text-align: center; }
.rft-reserve-inner, .rft-final-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.rft-reserve .rft-eyebrow, .rft-final .rft-eyebrow { justify-content: center; }
/* Same legibility insurance as the hero — these two sections also accept
   a client-uploaded background photo via the Customizer. */
.rft-reserve-inner .rft-h2-invert, .rft-final-inner .rft-h2-invert,
.rft-reserve-inner .rft-lede-invert, .rft-final-inner .rft-lede-invert,
.rft-reserve-dates { text-shadow: 0 3px 18px rgba(0,0,0,0.5); }
.rft-reserve-dates { color: var(--rft-accent-2); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 6px 0 32px; font-size: 13px; }
.rft-reserve-note { color: rgba(255,255,255,0.58); font-size: 13.5px; margin-top: 20px; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.rft-final .rft-lede-invert { margin: 20px auto 36px; }

/* ---------- Lead-capture embed (AWeber, etc.) ---------- */
/* A light card so a pasted third-party form reads as intentional against
   these sections' dark backgrounds. We can't fully control a provider's
   own inline styles, so this gives generic form elements sane, on-brand
   defaults as a best-effort baseline — the provider's own CSS may still
   override specific pieces, which is fine. */
.rft-lead-form {
	width: 100%; max-width: 440px; margin: 8px auto 0;
	background: var(--rft-white); border-radius: var(--rft-radius);
	padding: 32px 30px; box-shadow: var(--rft-shadow); color: var(--rft-ink);
	text-align: left;
}
.rft-lead-form form { margin: 0; }
.rft-lead-form input[type="text"],
.rft-lead-form input[type="email"],
.rft-lead-form input[type="tel"] {
	width: 100%; box-sizing: border-box; padding: 13px 16px; margin: 0 0 12px;
	border: 1px solid var(--rft-line); border-radius: var(--rft-radius-sm);
	font-family: var(--rft-font-body); font-size: 15px; color: var(--rft-ink);
	background: var(--rft-ivory-2);
}
.rft-lead-form input[type="text"]:focus,
.rft-lead-form input[type="email"]:focus,
.rft-lead-form input[type="tel"]:focus { outline: 2px solid var(--rft-accent); outline-offset: 1px; }
.rft-lead-form label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 6px; color: var(--rft-ink-soft); }
.rft-lead-form input[type="submit"],
.rft-lead-form button[type="submit"] {
	width: 100%; padding: 15px 20px; margin-top: 4px; border: 0; border-radius: var(--rft-radius-sm);
	background: var(--rft-accent); color: var(--rft-accent-contrast);
	font-family: var(--rft-font-body); font-weight: 600; font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer;
	transition: transform 0.3s var(--rft-ease), filter 0.3s var(--rft-ease);
}
.rft-lead-form input[type="submit"]:hover,
.rft-lead-form button[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.08); }
.rft-lead-form p { color: var(--rft-ink-soft); }
.rft-lead-form small, .rft-lead-form .privacy-link { display: block; margin-top: 10px; font-size: 12px; color: var(--rft-ink-soft); text-align: center; }

/* ---------- FAQ ---------- */
.rft-faq-inner { max-width: 780px; }
.rft-accordion { margin-top: 44px; border-top: 1px solid var(--rft-line); }
.rft-accordion-item { border-bottom: 1px solid var(--rft-line); }
.rft-accordion-trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 26px 2px; text-align: left; font-family: var(--rft-font-display); font-size: 19px; font-weight: 400;
}
.rft-accordion-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rft-line); display: flex; align-items: center; justify-content: center; transition: transform 0.3s var(--rft-ease), background-color 0.3s var(--rft-ease), border-color 0.3s var(--rft-ease); color: var(--rft-ink-soft); }
.rft-accordion-icon svg { width: 13px; height: 13px; }
.rft-accordion-trigger[aria-expanded="true"] .rft-accordion-icon { transform: rotate(180deg); background: var(--rft-accent); color: var(--rft-white); border-color: var(--rft-accent); }
.rft-accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--rft-ease); }
.rft-accordion-panel p { padding: 0 2px 26px; color: var(--rft-ink-soft); font-size: 15.5px; line-height: 1.65; max-width: 60ch; }

/* ---------- Footer ---------- */
.rft-footer { background: var(--rft-ink); color: rgba(255,255,255,0.85); padding: 80px 0 0; position: relative; }
.rft-footer::before { content: ''; position: absolute; inset: 0; background-image: var(--rft-noise); opacity: 0.03; mix-blend-mode: overlay; pointer-events: none; }
.rft-footer-inner { position: relative; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-bottom: 54px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.rft-footer-brand .rft-footer-name { font-family: var(--rft-font-display); font-size: 21px; font-weight: 400; color: var(--rft-white); }
.rft-footer-brand img { max-height: 38px; margin-bottom: 16px; }
.rft-footer-address { margin-top: 16px; font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.65; }
.rft-footer-nav { display: flex; flex-direction: column; gap: 13px; }
.rft-footer-nav a { font-size: 13px; letter-spacing: 0.03em; color: rgba(255,255,255,0.7); transition: color 0.2s; }
.rft-footer-nav a:hover { color: var(--rft-accent-2); }
.rft-footer-contact { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.rft-footer-contact a { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255,255,255,0.82); }
.rft-footer-contact a svg { width: 15px; height: 15px; color: var(--rft-accent-2); }
.rft-social { display: flex; gap: 10px; margin-top: 4px; }
.rft-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, border-color 0.2s; }
.rft-social a:hover { background: var(--rft-accent); border-color: var(--rft-accent); }
.rft-social svg { width: 15px; height: 15px; }
.rft-footer-bottom { position: relative; text-align: center; padding: 26px; font-size: 12px; letter-spacing: 0.02em; color: rgba(255,255,255,0.4); }

/* ---------- Mobile sticky CTA ---------- */
.rft-mobile-sticky-cta {
	display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 180;
	background: var(--rft-accent); color: var(--rft-white); text-align: center;
	padding: 17px; border-radius: var(--rft-radius-sm); font-weight: 600; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
	box-shadow: var(--rft-shadow);
}

/* ---------- Basic page fallback ---------- */
.rft-basic-page { padding: calc(var(--rft-header-h) + 60px) 24px 100px; max-width: 800px; }
.rft-basic-thumb { margin: 24px 0; border-radius: var(--rft-radius); overflow: hidden; }

/* ---------- Reserve / Sign-up page ---------- */
.rft-signup { padding-top: calc(var(--rft-header-h) + 70px); padding-bottom: 120px; }
.rft-signup-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.rft-signup-inner .rft-lead-form { text-align: left; }
.rft-signup-empty {
	margin: 8px auto 0; max-width: 460px; padding: 40px 32px;
	border: 1px dashed var(--rft-line); border-radius: var(--rft-radius);
	background: var(--rft-ivory-2); color: var(--rft-ink-soft);
}
.rft-signup-empty svg { width: 26px; height: 26px; color: var(--rft-accent); margin-bottom: 16px; }
.rft-signup-empty p { margin: 0; font-size: 15px; line-height: 1.6; }
.rft-signup-empty a { color: var(--rft-accent); text-decoration: underline; text-underline-offset: 3px; }
.rft-signup-note { margin-top: 26px; font-size: 14px; color: var(--rft-ink-soft); }
.rft-signup-email { display: inline-flex; margin-top: 16px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
	.rft-split-inner, .rft-host-inner { grid-template-columns: 1fr; gap: 44px; }
	.rft-split-reverse .rft-split-copy, .rft-split-reverse .rft-split-media { order: initial; }
	.rft-split-media::before, .rft-host-media::before { display: none; }
	.rft-photo-tall { aspect-ratio: 16 / 10; }
	.rft-pillars { grid-template-columns: 1fr; }
	.rft-gallery { grid-template-columns: repeat(2, 1fr); }
	.rft-gallery-lg { grid-column: span 2; grid-row: span 2; }
	.rft-gallery-item:nth-child(2), .rft-gallery-item:nth-child(3) { grid-column: span 1; grid-row: span 2; }
	.rft-gallery-wide { grid-column: span 2; }
	.rft-footer-inner { grid-template-columns: 1fr 1fr; }
	.rft-footer-brand { grid-column: span 2; }
}

/* Nav / header — switch to the hamburger well before 6 links + a long
   business-name logo + a CTA button could ever get cramped into one row,
   rather than trying to survive right up to the edge. */
@media (max-width: 1180px) {
	.rft-nav, .rft-nav-cta { display: none; }
	.rft-menu-toggle { display: block; }
	.rft-mobile-menu { display: block; }
}

@media (max-width: 900px) {
	.rft-mobile-sticky-cta { display: block; }
	.rft-footer { padding-bottom: 96px; }
}

/* Mobile */
@media (max-width: 640px) {
	:root { --rft-header-h: 68px; }
	.rft-header-inner { min-height: 52px; padding: 0 20px; }
	.rft-section { padding: 68px 0; }
	.rft-fact { padding: 28px 10px; }
	.rft-fact-label { font-size: 10.5px; letter-spacing: 0.08em; }
	.rft-container { padding: 0 20px; }
	.rft-hero { padding-bottom: 64px; }
	.rft-hero-ctas { flex-direction: column; align-items: stretch; }
	.rft-hero-ctas .rft-btn { justify-content: center; }
	.rft-split-inner, .rft-host-inner { gap: 32px; }
	.rft-checklist-grid { grid-template-columns: 1fr; }
	.rft-pillar { padding: 40px 26px; }
	.rft-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
	.rft-gallery-lg { grid-column: span 2; grid-row: span 2; }
	.rft-gallery-item:nth-child(2), .rft-gallery-item:nth-child(3) { grid-row: span 2; }
	.rft-gallery-wide { grid-column: span 2; grid-row: span 2; }
	.rft-ritual-card { width: 80vw; }
	.rft-footer-inner { grid-template-columns: 1fr; }
	.rft-footer-brand { grid-column: span 1; }
	.rft-accordion-trigger { font-size: 17px; }
}