/*
Theme Name: Dominique Bellemare — Energetic Vitality Coach
Theme URI: https://dominiquebellemare.com
Author: Blessing
Author URI: https://dominiquebellemare.com
Description: A custom WordPress theme for Dominique Bellemare — Energetic Vitality Coach. Features a beautiful nature-inspired design with forest green and gold accents, custom post types for services and testimonials, and full Customizer support for editing all content.
Version: 5.3.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dominique
Tags: custom-theme, custom-colors, custom-logo, featured-images, custom-post-types, translation-ready
*/

/* ===================================================================
   ROOT VARIABLES — Editable via Customizer (Appearance → Customize)
   =================================================================== */
:root {
  --forest: #2D4A2A;
  --forest-mid: #3D6138;
  --sage: #7A9E6F;
  --sage-light: #B5CEAA;
  --earth: #5C3D1E;
  --earth-mid: #7A5230;
  --earth-light: #C4956A;
  --gold: #C8963A;
  --gold-light: #E4BC72;
  --gold-pale: #F5E6C4;
  --cream: #FAF6EE;
  --cream-dark: #F0E8D5;
  --text-dark: #2A1F0E;
  --text-mid: #5C4A2A;
  --text-light: #8B7355;
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;
}

/* ===================================================================
   RESET & BASE
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
ul { list-style: none; }

/* ===================================================================
   TYPOGRAPHY
   =================================================================== */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; }

.section-label {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--forest);
  margin-bottom: 1.25rem;
}
.section-title em { color: var(--earth-mid); font-style: italic; }

.gold-rule {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  margin-bottom: 2rem;
}

p { color: var(--text-mid); font-size: 16px; line-height: 1.9; margin-bottom: 1.25rem; }

/* ===================================================================
   NAVIGATION
   =================================================================== */
nav, .site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(250, 246, 238, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-pale);
  padding: 0;
  height: 64px;
}

.nav-inner {
  max-width: 1300px; margin: 0 auto; width: 100%;
  padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
  position: relative;
}

.nav-logo, .site-logo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--forest);
  letter-spacing: 0.04em;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo span, .site-logo span { color: var(--gold); font-style: italic; }

.nav-links, .site-nav ul {
  display: flex; gap: 2rem; list-style: none;
  margin: 0; padding: 0;
}
.nav-links a, .site-nav ul a {
  font-size: 13px; font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  color: var(--text-mid); transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active, .site-nav ul a:hover, .site-nav ul a.active {
  color: var(--gold);
}

/* Hamburger toggle button */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 30px; height: 22px;
  position: relative;
  padding: 0;
}
.nav-toggle span {
  display: block; position: absolute;
  height: 2px; width: 100%;
  background: var(--forest);
  border-radius: 2px;
  transition: all 0.3s ease;
  left: 0;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 10px; }
.nav-toggle span:nth-child(3) { top: 20px; }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg); top: 10px; }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg); top: 10px; }

/* Mobile responsive nav */
@media (max-width: 900px) {
  .nav-links, .site-nav ul {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--cream); flex-direction: column;
    padding: 1.5rem 2rem; gap: 0.75rem;
    border-bottom: 1px solid var(--gold-pale);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .nav-links.open, .site-nav ul.open { display: flex; }
  .nav-toggle { display: block; }
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn-primary, .btn-dark, .btn-gold, .btn-outline {
  display: inline-block; padding: 14px 40px;
  font-family: var(--font-body); font-size: 13px;
  letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none; transition: all 0.3s;
  cursor: pointer; border: none;
}

.btn-primary {
  background: transparent; border: 1px solid var(--gold);
  color: var(--gold-light);
}
.btn-primary:hover { background: var(--gold); color: var(--text-dark); }

.btn-dark {
  background: var(--forest); border: 1px solid var(--forest);
  color: var(--cream);
}
.btn-dark:hover { background: var(--forest-mid); }

.btn-gold {
  background: var(--gold); color: var(--text-dark);
  font-weight: 500;
}
.btn-gold:hover { background: var(--gold-light); }

.btn-outline {
  background: transparent; border: 1px solid rgba(250, 246, 238, 0.35);
  color: rgba(250, 246, 238, 0.65);
}
.btn-outline:hover { border-color: var(--cream); color: var(--cream); }

/* ===================================================================
   SECTIONS (generic)
   =================================================================== */
section, .section { padding: 5rem 2rem; }
.section-inner { max-width: 1300px; margin: 0 auto; }

/* ===================================================================
   HERO (Homepage)
   =================================================================== */
.hero {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-mid) 45%, var(--earth) 100%);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding-top: 64px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(200, 150, 58, 0.18) 0%, transparent 65%);
}
.hero-ornament {
  width: 120px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto 2rem;
}
.hero-tag {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 400; margin-bottom: 1.5rem;
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 300; color: var(--cream);
  line-height: 1.1; letter-spacing: 0.02em; margin-bottom: 1.5rem;
}
.hero h1 em { color: var(--gold-light); font-style: italic; }
.hero-sub {
  font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-light); font-weight: 300; margin-bottom: 2.5rem;
}
.hero-divider { width: 60px; height: 1px; background: var(--gold); margin: 0 auto 2.5rem; }
.hero-desc {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 300; font-style: italic;
  color: rgba(250, 246, 238, 0.8); max-width: 520px;
  margin: 0 auto 3rem; line-height: 1.8;
}
.hero-content { position: relative; z-index: 1; padding: 2rem; }

/* Hero with background image */
.hero.has-bg-image {
  background-size: cover; background-position: center;
}
.hero.has-bg-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(45, 74, 42, 0.85) 0%, rgba(61, 97, 56, 0.8) 45%, rgba(92, 61, 30, 0.85) 100%);
  z-index: 0;
}
.hero.has-bg-image .hero-content { z-index: 2; }

/* ===================================================================
   HERO (Interior pages)
   =================================================================== */
.hero-interior {
  min-height: 60vh;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-mid) 50%, var(--earth) 100%);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 120px 2rem 70px;
  position: relative; overflow: hidden;
}
.hero-interior::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(200, 150, 58, 0.2) 0%, transparent 65%);
}
.hero-interior .hero-content { position: relative; z-index: 1; max-width: 700px; }
.breadcrumb {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sage-light); margin-bottom: 2rem;
}
.breadcrumb a { color: var(--sage-light); text-decoration: none; }
.hero-ornament-v {
  width: 1px; height: 50px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  margin: 0 auto 1.5rem;
}
.hero-interior h1 {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 300; color: var(--cream);
  line-height: 1.1; margin-bottom: 1rem;
}
.hero-interior h1 em { color: var(--gold-light); font-style: italic; }
.hero-intro {
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 300; font-style: italic;
  color: rgba(250, 246, 238, 0.82); line-height: 1.9;
}
.hero-meta {
  font-size: 14px; letter-spacing: 0.1em; color: var(--gold-light);
  margin-bottom: 1rem;
}

/* ===================================================================
   ABOUT (Homepage)
   =================================================================== */
.about { background: var(--cream); }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: start;
}
.about-text p { color: var(--text-mid); font-size: 16px; line-height: 1.9; margin-bottom: 1.25rem; }
.about-text .opener {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-style: italic; font-weight: 300;
  color: var(--earth-mid); margin-bottom: 1.5rem; line-height: 1.8;
}
.about-quote {
  background: var(--forest); padding: 3rem;
  position: relative; margin-bottom: 1.5rem;
}
.about-quote::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 8rem; line-height: 0.6;
  color: var(--gold); opacity: 0.3;
  position: absolute; top: 1.5rem; left: 1.5rem;
}
.about-quote p {
  font-family: var(--font-heading);
  font-size: 1.35rem; font-style: italic; font-weight: 300;
  color: var(--cream); line-height: 1.7; position: relative; z-index: 1;
}
.about-quote cite {
  display: block; margin-top: 1rem;
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold-light); font-style: normal;
}
.about-aside {
  background: var(--cream-dark); padding: 2rem;
  border-left: 3px solid var(--gold);
}
.about-aside p {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-style: italic;
  color: var(--earth-mid); line-height: 1.8;
}

/* About photo */
.about-photo {
  margin-bottom: 2rem; overflow: hidden; border-radius: 2px;
}
.about-photo img { width: 100%; object-fit: cover; }

/* ===================================================================
   OFFERINGS / SERVICES
   =================================================================== */
.offerings-section { background: var(--cream-dark); }
.offerings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem; margin-top: 3rem;
}
.offering-card {
  background: var(--cream);
  border-top: 3px solid var(--gold);
  padding: 2.5rem 2rem;
  transition: transform 0.2s;
  display: flex; flex-direction: column;
}
.offering-card:hover { transform: translateY(-4px); }
.offering-name {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.4rem;
}
.offering-card h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem; font-weight: 400;
  color: var(--forest); margin-bottom: 0.25rem; line-height: 1.2;
}
.offering-subtitle {
  font-family: var(--font-heading);
  font-size: 1rem; font-style: italic;
  color: var(--earth-mid); margin-bottom: 1.25rem;
}
.service-duration {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-light); margin-bottom: 1.25rem;
}
.offering-includes { list-style: none; margin-bottom: 1.5rem; flex-grow: 1; }
.offering-includes li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 14px; color: var(--text-mid); line-height: 1.7;
  padding: 0.35rem 0; border-bottom: 1px solid var(--cream-dark);
}
.offering-includes li:last-child { border-bottom: none; }
.offering-includes li span { color: var(--gold); flex-shrink: 0; }
.offering-card p.offering-desc {
  font-size: 14px; color: var(--text-light); line-height: 1.8; margin-bottom: 1.5rem;
}
.offering-pricing {
  margin-top: auto; padding-top: 1.5rem;
  border-top: 1px solid var(--cream-dark);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.price-regular {
  font-size: 14px; color: var(--text-light); text-decoration: line-through;
}
.price-promo {
  font-family: var(--font-heading);
  font-size: 1.8rem; font-weight: 400; color: var(--forest);
}
.price-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-pale); padding: 3px 10px;
}
.offering-link {
  display: inline-block; margin-top: 1.5rem;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid var(--gold-pale); padding-bottom: 2px;
  transition: border-color 0.2s;
}
.offering-link:hover { border-color: var(--gold); }

/* Offering media (image) */
.offering-media {
  margin: -2.5rem -2rem 1.5rem; overflow: hidden; height: 200px;
}
.offering-media img { width: 100%; height: 100%; object-fit: cover; }

/* ===================================================================
   OFFERINGS INFO BOXES
   =================================================================== */
.offerings-info-boxes {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin-top: 1.5rem; margin-bottom: 0.5rem;
}
.offerings-info-box {
  background: var(--cream); border-left: 3px solid var(--gold);
  padding: 1.25rem 1.5rem;
}
.offerings-info-box .box-label {
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.4rem;
}
.offerings-info-box p {
  font-size: 14px; color: var(--text-mid); line-height: 1.8;
}

.offerings-signature {
  background: var(--forest); padding: 2rem 2.5rem;
  margin-bottom: 2.5rem; border-left: 3px solid var(--gold);
}
.offerings-signature p {
  font-family: var(--font-heading);
  font-size: 1.2rem; font-style: italic; font-weight: 300;
  color: rgba(250, 246, 238, 0.9); line-height: 1.9;
}

/* ===================================================================
   WHY / WHO THIS IS FOR
   =================================================================== */
.why { background: var(--earth); text-align: center; }
.why .section-title { color: var(--cream); }
.why .section-label { color: var(--gold-light); }
.why .gold-rule { margin: 0 auto 2rem; }
.why-text {
  max-width: 680px; margin: 0 auto;
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 300; font-style: italic;
  color: rgba(250, 246, 238, 0.85); line-height: 1.9;
}
.pillars {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1rem; margin-top: 3rem;
}
.pillar {
  padding: 8px 24px; border: 1px solid rgba(200, 150, 58, 0.4);
  color: var(--gold-light); font-size: 12px;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.why-portrait { margin: 0 auto 2rem; max-width: 300px; }
.why-portrait img { width: 100%; border-radius: 2px; }

/* ===================================================================
   TESTIMONIALS
   =================================================================== */
.testimonials { background: var(--forest); }
.testimonials .section-title { color: var(--cream); }
.testimonials .section-label { color: var(--gold-light); }
.testimonials .gold-rule { background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; margin-top: 3rem;
}
.testi-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(200, 150, 58, 0.2);
  padding: 2rem;
  display: flex; flex-direction: column;
}
.testi-quote {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-style: italic;
  color: rgba(250, 246, 238, 0.85); line-height: 1.9;
  flex-grow: 1; margin-bottom: 1.5rem;
  position: relative; padding-top: 1.5rem;
}
.testi-quote::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 4rem; color: var(--gold); opacity: 0.4;
  position: absolute; top: -1rem; left: -0.5rem; line-height: 1;
}
.testi-author {
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold-light);
  border-top: 1px solid rgba(200, 150, 58, 0.2); padding-top: 1rem;
}

/* ===================================================================
   BOOKING
   =================================================================== */
.booking { background: var(--cream); text-align: center; }
.booking .section-inner { max-width: 640px; }
.booking .section-title { color: var(--forest); }
.booking .gold-rule { margin: 0 auto 2rem; }
.booking p { color: var(--text-mid); max-width: 520px; margin-left: auto; margin-right: auto; }

/* ===================================================================
   CONTACT
   =================================================================== */
.contact { background: var(--forest); }
.contact .section-title { color: var(--cream); }
.contact .section-label { color: var(--gold-light); }
.contact .gold-rule { background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; margin-top: 2rem;
}
.contact-info p { color: rgba(250, 246, 238, 0.75); }
.contact-detail {
  font-size: 14px; color: var(--gold-light);
  margin-bottom: 0.75rem; letter-spacing: 0.04em;
}
.contact-photo { margin-top: 1.5rem; overflow: hidden; }
.contact-photo img { width: 100%; max-height: 300px; object-fit: cover; }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.contact-form input,
.contact-form textarea {
  background: rgba(250, 246, 238, 0.08);
  border: 1px solid rgba(200, 150, 58, 0.3);
  color: var(--cream);
  font-family: var(--font-body); font-size: 14px;
  padding: 14px 18px; outline: none; transition: border-color 0.2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(250, 246, 238, 0.4); }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--gold); }
.contact-form textarea { min-height: 120px; resize: vertical; }

/* ===================================================================
   EVENTS
   =================================================================== */
.events-section { background: var(--cream-dark); }
.events-section .section-inner { text-align: center; max-width: 700px; }
.events-buttons {
  display: flex; gap: 1rem; justify-content: center;
  flex-wrap: wrap; margin-bottom: 3rem;
}
.events-buttons a {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 14px 32px; background: var(--forest); color: var(--cream);
  font-family: var(--font-body); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transition: all 0.3s;
}
.events-buttons a:hover { background: var(--forest-mid); }

.mailing-list { border-top: 1px solid var(--cream); padding-top: 3rem; }
.mailing-list h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem; font-weight: 300;
  color: var(--forest); margin-bottom: 0.75rem;
}
.mailing-list-form {
  display: flex; gap: 0; max-width: 480px; margin: 0 auto;
}
.mailing-list-form input {
  flex: 1; background: var(--cream);
  border: 1px solid var(--cream-dark); border-right: none;
  color: var(--text-dark); font-family: var(--font-body);
  font-size: 14px; padding: 14px 18px; outline: none;
}
.mailing-list-form button {
  background: var(--gold); border: none;
  color: var(--text-dark); font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 14px 24px; cursor: pointer; font-weight: 500; white-space: nowrap;
}
.mailing-list-form button:hover { background: var(--gold-light); }

/* ===================================================================
   FOOTER
   =================================================================== */
footer, .site-footer {
  background: var(--text-dark);
  padding: 1.5rem 2rem; text-align: center;
}
.footer-inner {
  max-width: 1300px; margin: 0 auto; width: 100%;
}
footer p, .site-footer p {
  font-size: 12px; letter-spacing: 0.08em;
  color: rgba(250, 246, 238, 0.35);
}
footer span, .site-footer .footer-name { color: var(--gold); }

/* ===================================================================
   SERVICE DETAIL PAGE
   =================================================================== */
.service-detail .two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: start;
}
.service-detail .dark-box {
  background: var(--forest); padding: 2.5rem;
  border-left: 3px solid var(--gold);
}
.service-detail .dark-box p {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-style: italic;
  color: rgba(250, 246, 238, 0.85); line-height: 1.9;
}
.pull-quote {
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 300; font-style: italic;
  color: var(--forest); line-height: 1.7;
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem; margin: 1.75rem 0;
}

.elements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.element {
  background: var(--cream); padding: 2rem;
  border-top: 2px solid var(--gold);
}
.element-label {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.5rem;
}
.element h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 400;
  color: var(--forest); margin-bottom: 0.75rem;
}
.element p { font-size: 14px; color: var(--text-mid); line-height: 1.8; }

.for-you { background: var(--forest); }
.for-you .section-title { color: var(--cream); }
.for-you .section-label { color: var(--gold-light); }
.for-you .gold-rule { background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.signs-list { list-style: none; margin-top: 1.5rem; }
.signs-list li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.15rem; font-style: italic; font-weight: 300;
  color: rgba(250, 246, 238, 0.85); line-height: 1.8;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(200, 150, 58, 0.15);
}
.signs-list li:last-child { border-bottom: none; }
.signs-list li span { color: var(--gold); flex-shrink: 0; }

/* Service detail booking section */
.service-booking {
  background: var(--cream); text-align: center;
}
.service-booking .section-inner { max-width: 640px; }
.price-block {
  background: var(--cream-dark); padding: 2rem;
  margin: 2rem auto; max-width: 320px;
  border-left: 3px solid var(--gold);
}
.price-block .duration {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-light); margin-bottom: 0.5rem;
}
.price-block .price-promo {
  font-family: var(--font-heading);
  font-size: 3rem; font-weight: 300; color: var(--forest);
  margin-bottom: 0.25rem;
}
.price-block .price-regular {
  font-size: 14px; color: var(--text-light); text-decoration: line-through;
  margin-bottom: 0.5rem;
}
.includes-list {
  list-style: none; max-width: 400px; margin: 1.5rem auto;
  text-align: left;
}
.includes-list li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 14px; color: var(--text-mid); line-height: 1.7;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--cream-dark);
}
.includes-list li:last-child { border-bottom: none; }
.includes-list li span { color: var(--gold); flex-shrink: 0; }

/* Other offerings grid on service page */
.other { background: var(--cream-dark); }
.other-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.other-card {
  background: var(--cream); padding: 2rem;
  border-top: 2px solid var(--gold);
  display: block; text-decoration: none; transition: transform 0.2s;
}
.other-card:hover { transform: translateY(-4px); }
.other-card .tag {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.4rem;
}
.other-card h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 400;
  color: var(--forest); margin-bottom: 0.5rem;
}
.other-card p { font-size: 14px; color: var(--text-mid); line-height: 1.8; }
.other-card .arrow {
  display: inline-block; margin-top: 1rem;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
}

/* ===================================================================
   ABOUT PAGE
   =================================================================== */
.story { background: var(--cream); }
.credentials { background: var(--cream-dark); }
.credentials-intro { max-width: 640px; margin-bottom: 1rem; }
.cred-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1.25rem; margin-top: 2.5rem;
}
.cred-card {
  background: var(--cream); border-left: 3px solid var(--gold);
  padding: 2rem 2.25rem;
  display: grid; grid-template-columns: 100px 1fr;
  gap: 1.5rem; align-items: start;
}
.cred-badge {
  font-family: var(--font-heading);
  font-size: 2.5rem; color: var(--gold);
  font-weight: 300; line-height: 1; text-align: center;
}
.cred-content h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 400;
  color: var(--forest); margin-bottom: 0.4rem;
}
.cred-content .cred-org {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.6rem;
}
.cred-content p {
  font-size: 14px; color: var(--text-mid); line-height: 1.8; margin-bottom: 0;
}

.why-it-matters { background: var(--forest); }
.why-it-matters .section-title { color: var(--cream); }
.why-it-matters .section-label { color: var(--gold-light); }
.why-it-matters .gold-rule { background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.why-it-matters p { color: rgba(250, 246, 238, 0.82); }
.why-it-matters .pull-quote {
  color: var(--gold-light); border-left-color: var(--gold-light);
}

.cta { background: var(--earth); text-align: center; padding: 4rem 2rem; }
.cta .section-title { color: var(--cream); }
.cta .section-label { color: var(--gold-light); }
.cta .gold-rule { margin: 0 auto 1.5rem; background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.cta p {
  color: rgba(250, 246, 238, 0.78);
  max-width: 500px; margin: 0 auto 1.5rem;
}

/* ===================================================================
   CREDENTIALS (Custom Post Type display)
   =================================================================== */
.credentials-list { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.credential-item {
  background: var(--cream); border-left: 3px solid var(--gold);
  padding: 2rem 2.25rem;
  display: grid; grid-template-columns: 100px 1fr;
  gap: 1.5rem; align-items: start;
}

/* ===================================================================
   WORDPRESS CORE OVERRIDES
   =================================================================== */
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--text-light); font-style: italic; margin-top: 0.5rem; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
}
.sticky { display: block; }
.bypostauthor { display: block; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 700px) {
  .section-title { font-size: 1.5rem; }
  .hero h1 { font-size: 2.5rem; }
  .hero-interior h1 { font-size: 2.2rem; }
  .cred-card { grid-template-columns: 60px 1fr; gap: 1rem; padding: 1.5rem; }
  .cred-badge { font-size: 1.8rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .offerings-info-boxes { grid-template-columns: 1fr; }
  .service-detail .two-col { grid-template-columns: 1fr; gap: 2rem; }
  .mailing-list-form { flex-direction: column; }
  .mailing-list-form input { border-right: 1px solid var(--cream-dark); }
  .mailing-list-form button { margin-top: 0.5rem; }
  section, .section { padding: 3rem 1.5rem; }
  .hero-sub { font-size: 16px; }
  .hero-desc { font-size: 1.1rem; }
  .offerings-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .other-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .btn-primary, .btn-dark, .btn-gold, .btn-outline { padding: 12px 28px; font-size: 12px; }
  .offering-card { padding: 2rem 1.5rem; }
}

/* ===================================================================
   ADMIN BAR ADJUSTMENT
   =================================================================== */
.admin-bar nav, .admin-bar .site-nav { top: 32px; }
.admin-bar .nav-inner { height: 64px; }
@media (max-width: 782px) {
  .admin-bar nav, .admin-bar .site-nav { top: 46px; }
}

/* ===================================================================
   FAQ ACCORDION
   =================================================================== */
.faq-item { transition: all 0.2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold) !important; }
.faq-item[open] summary span { transform: rotate(45deg); display: inline-block; }
.faq-item[open] summary { color: var(--gold) !important; }

/* ===================================================================
   BLOG CONTENT STYLES
   =================================================================== */
.blog-content p { margin-bottom: 1.5rem; line-height: 1.9; }
.blog-content h2, .blog-content h3 { color: var(--forest); margin: 2rem 0 1rem; font-family: var(--font-heading); }
.blog-content h2 { font-size: 1.8rem; }
.blog-content h3 { font-size: 1.4rem; }
.blog-content blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--earth-mid);
}
.blog-content ul, .blog-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.blog-content ul li, .blog-content ol li { color: var(--text-mid); font-size: 16px; line-height: 1.9; margin-bottom: 0.5rem; }
.blog-content a { color: var(--gold); text-decoration: underline; }
.blog-content img { border-radius: 2px; margin-bottom: 1.5rem; }

/* ===================================================================
   PAGINATION
   =================================================================== */
.pagination, .page-links {
  text-align: center;
  margin-top: 3rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.pagination a, .pagination span, .page-links a, .page-links span {
  padding: 8px 16px;
  background: var(--cream-dark);
  color: var(--text-mid);
  text-decoration: none;
  font-size: 14px;
  border: 1px solid var(--cream-dark);
  transition: all 0.2s;
}
.pagination a:hover, .page-links a:hover {
  background: var(--gold);
  color: var(--text-dark);
  border-color: var(--gold);
}
.pagination .current, .page-links .current {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}

/* ===================================================================
   LUXURY REDESIGN LAYER (v2.0.0)
   Matches the approved "luxury" homepage design. Applied site-wide via
   the body class `luxury-redesign` added in functions.php.
   =================================================================== */
body.luxury-redesign { background: var(--cream); overflow-x: hidden; }

/* ---- Navigation: dark glass bar with stacked serif logo ---- */
body.luxury-redesign nav,
body.luxury-redesign .site-nav {
  height: 82px;
  background: rgba(18, 33, 21, 0.86);
  border-bottom: 1px solid rgba(214, 175, 98, 0.24);
  backdrop-filter: blur(14px);
}
body.luxury-redesign .nav-inner {
  height: 82px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  max-width: none;
}
body.luxury-redesign .nav-logo,
body.luxury-redesign .site-logo {
  font-size: 24px; line-height: 1; color: #fff; letter-spacing: 0.08em;
}
body.luxury-redesign .nav-logo span,
body.luxury-redesign .site-logo span {
  display: block; color: var(--gold-light); font-style: normal;
  font-size: 17px; margin-top: 5px; letter-spacing: 0.18em;
}
body.luxury-redesign .nav-links,
body.luxury-redesign .site-nav ul { gap: clamp(1rem, 2.1vw, 2.2rem); align-items: center; }
body.luxury-redesign .nav-links a,
body.luxury-redesign .site-nav ul a {
  color: rgba(255, 255, 255, 0.82); font-size: 11px; letter-spacing: 0.17em;
}
body.luxury-redesign .nav-links a:hover,
body.luxury-redesign .nav-links a.active,
body.luxury-redesign .site-nav ul a:hover { color: var(--gold-light); }
body.luxury-redesign .nav-toggle span { background: #fff; }

/* ---- Hero: full-bleed editorial photo, left-aligned ---- */
body.luxury-redesign .hero {
  min-height: 100vh;
  justify-content: flex-start; text-align: left;
  padding: 130px clamp(1.5rem, 7vw, 8rem) 70px;
}
body.luxury-redesign .hero::before {
  background: linear-gradient(90deg, transparent 0 48%, rgba(184, 138, 53, 0.14));
}
/* the layered gradient stack is applied inline with the customizer image */
body.luxury-redesign .hero.has-bg-image { background-size: auto; background-position: initial; }
body.luxury-redesign .hero.has-bg-image::after { content: none; }
body.luxury-redesign .hero-content { max-width: 660px; padding: 0; }
body.luxury-redesign .hero-tag {
  color: var(--gold-light); font-size: 13px; letter-spacing: 0.3em; margin-bottom: 1rem;
}
body.luxury-redesign .hero-ornament { margin: 0 0 2.2rem; width: 130px; }
body.luxury-redesign .hero h1 {
  font-size: clamp(4rem, 8vw, 7.5rem); line-height: 0.82; margin-bottom: 2rem;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}
body.luxury-redesign .hero h1 em {
  display: inline-block; margin-left: clamp(1rem, 4vw, 4rem); color: var(--gold-light);
}
body.luxury-redesign .hero-sub {
  text-align: left; font-size: 15px; letter-spacing: 0.28em;
  margin-bottom: 1.2rem; color: #d8e2d2;
}
body.luxury-redesign .hero-divider { margin: 0 0 1.8rem; }
body.luxury-redesign .hero-desc {
  margin: 0 0 2.5rem; font-size: clamp(1.2rem, 2vw, 1.55rem);
  color: rgba(255, 255, 255, 0.88); max-width: 560px;
}
body.luxury-redesign .btn-primary,
body.luxury-redesign .btn-dark { padding: 15px 30px; border-radius: 0; letter-spacing: 0.17em; }
body.luxury-redesign .hero .btn-primary {
  background: var(--gold); border: 1px solid var(--gold); color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
body.luxury-redesign .hero .btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--text-dark); }

/* ---- Section rhythm ---- */
body.luxury-redesign section,
body.luxury-redesign .section { padding: clamp(4.5rem, 8vw, 8rem) clamp(1.4rem, 5vw, 5rem); }
body.luxury-redesign .section-inner { max-width: 1180px; }
body.luxury-redesign .section-label { font-size: 11px; letter-spacing: 0.32em; }
body.luxury-redesign .section-title {
  font-size: clamp(2.7rem, 5vw, 4.7rem); line-height: 1.02; max-width: 760px;
}
body.luxury-redesign .gold-rule { width: 96px; }
body.luxury-redesign .hero-interior h1 { font-size: clamp(3.5rem, 8vw, 6rem); }

/* ---- About: editorial photo + overlapping quote ---- */
body.luxury-redesign .about { background: linear-gradient(135deg, #fbf7f0, #eee2cf); }
body.luxury-redesign .about-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: clamp(3rem, 7vw, 7rem); align-items: center;
}
body.luxury-redesign .about-text p { font-size: 16px; line-height: 1.95; }
.editorial-photo {
  margin: 0 0 1.4rem; overflow: hidden; position: relative;
  box-shadow: 0 22px 60px rgba(51, 36, 18, 0.2);
}
.editorial-photo::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(214, 175, 98, 0.55); margin: 14px; pointer-events: none;
}
.editorial-photo img { width: 100%; height: 440px; object-fit: cover; display: block; transform: scale(1.02); }
body.luxury-redesign .about-quote {
  margin: -65px 24px 1.4rem -24px; padding: 3rem;
  background: rgba(21, 39, 24, 0.97);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}
body.luxury-redesign .about-aside { background: rgba(255, 255, 255, 0.65); }

/* ---- Offerings: photo cards ---- */
body.luxury-redesign .offerings-section { background: #ece1d0; position: relative; }
body.luxury-redesign .offerings-section::before {
  content: ''; position: absolute; inset: 0; opacity: 0.23; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(184, 138, 53, 0.25), transparent 22%),
    radial-gradient(circle at 90% 80%, rgba(34, 57, 37, 0.18), transparent 28%);
}
body.luxury-redesign .offerings-section .section-inner { position: relative; }
body.luxury-redesign .offerings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
body.luxury-redesign .offering-card {
  padding: 0 0 2rem; border-top: 0;
  border: 1px solid rgba(184, 138, 53, 0.24); background: #faf6ef;
  overflow: hidden; box-shadow: 0 15px 38px rgba(61, 43, 21, 0.09);
}
body.luxury-redesign .offering-card:hover {
  transform: translateY(-8px); box-shadow: 0 25px 55px rgba(42, 31, 17, 0.14);
}
body.luxury-redesign .offering-media {
  margin: 0 0 2rem; height: 265px; overflow: hidden; position: relative;
}
body.luxury-redesign .offering-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20, 36, 23, 0.55));
}
body.luxury-redesign .offering-media img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease;
}
body.luxury-redesign .offering-card:hover .offering-media img { transform: scale(1.045); }
body.luxury-redesign .offering-card > *:not(.offering-media) { margin-left: 2rem; margin-right: 2rem; }
body.luxury-redesign .offering-card h3 { font-size: 2.55rem; }
body.luxury-redesign .offering-subtitle { font-size: 1.15rem; }
body.luxury-redesign .offering-card p.offering-desc { font-size: 15px; color: var(--text-light); }

/* ---- Who I Work With: portrait + copy grid on deep green ---- */
body.luxury-redesign .why {
  background: linear-gradient(90deg, rgba(15, 29, 18, 0.97), rgba(15, 29, 18, 0.89)), var(--forest);
  text-align: left;
}
body.luxury-redesign .why .section-inner {
  display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: 4rem; align-items: center; text-align: left !important;
}
body.luxury-redesign .why-portrait {
  max-width: none; margin: 0; height: 520px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); border: 1px solid rgba(214, 175, 98, 0.35);
  grid-row: 1 / span 5;
}
body.luxury-redesign .why-portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0;
}
body.luxury-redesign .why .section-label,
body.luxury-redesign .why .section-title,
body.luxury-redesign .why .gold-rule,
body.luxury-redesign .why .why-text,
body.luxury-redesign .why .pillars { grid-column: 2; }
body.luxury-redesign .why .gold-rule { margin: 0 0 2rem !important; }
body.luxury-redesign .why-text { font-size: 1.45rem; margin: 0; max-width: none; }
body.luxury-redesign .pillars { justify-content: flex-start; }

/* ---- Testimonials ---- */
body.luxury-redesign .testimonials { background: #132217; position: relative; }
body.luxury-redesign .testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.luxury-redesign .testi-card {
  padding: 2.5rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border-color: rgba(214, 175, 98, 0.25);
}
body.luxury-redesign .testi-quote { font-size: 1.2rem; }

/* ---- Booking ---- */
body.luxury-redesign .booking {
  background: linear-gradient(135deg, #f7efe3, #e6d6be); text-align: center;
}
body.luxury-redesign .booking .section-inner { max-width: 760px; }
body.luxury-redesign .booking .section-title { margin-left: auto; margin-right: auto; }

/* ---- Contact ---- */
body.luxury-redesign .contact { background: #1a2d1d; }
body.luxury-redesign .contact-grid { gap: 4rem; align-items: start; }
body.luxury-redesign .contact-photo {
  margin: 0 0 2rem; height: 260px; overflow: hidden;
  border: 1px solid rgba(214, 175, 98, 0.3);
}
body.luxury-redesign .contact-photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
body.luxury-redesign .contact-form {
  background: rgba(255, 255, 255, 0.055); padding: 2rem;
  border: 1px solid rgba(214, 175, 98, 0.18);
}
body.luxury-redesign .contact-form input,
body.luxury-redesign .contact-form textarea {
  background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: #fff;
}
body.luxury-redesign .contact-form input:focus,
body.luxury-redesign .contact-form textarea:focus { border-color: var(--gold); }

/* ---- Events ---- */
body.luxury-redesign .events-section,
body.luxury-redesign #events { background: linear-gradient(135deg, #f9f4eb, #eadcca); }

/* ---- Footer ---- */
body.luxury-redesign footer,
body.luxury-redesign .site-footer { padding: 2.2rem; background: #0e1b11; }

/* ---- Admin bar offset for the taller nav ---- */
body.luxury-redesign.admin-bar .site-nav { top: 32px; }
body.luxury-redesign.admin-bar .nav-inner { height: 82px; }

/* ---- Responsive: tablet ---- */
@media (max-width: 900px) {
  body.luxury-redesign .nav-links,
  body.luxury-redesign .site-nav ul {
    top: 82px; background: #142417; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem 1.5rem 2rem; gap: 0; align-items: stretch;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
  }
  body.luxury-redesign .nav-links li a,
  body.luxury-redesign .site-nav ul li a {
    display: block; padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  body.luxury-redesign .hero { background-position: 62% center; }
  body.luxury-redesign .about-grid,
  body.luxury-redesign .why .section-inner { grid-template-columns: 1fr; }
  body.luxury-redesign .why-portrait { height: 420px; grid-row: auto; }
  body.luxury-redesign .why .section-label,
  body.luxury-redesign .why .section-title,
  body.luxury-redesign .why .gold-rule,
  body.luxury-redesign .why .why-text,
  body.luxury-redesign .why .pillars { grid-column: 1; }
}

/* ---- Responsive: phone ---- */
@media (max-width: 700px) {
  body.luxury-redesign nav,
  body.luxury-redesign .site-nav { height: 72px; }
  body.luxury-redesign .nav-inner { height: 72px; }
  body.luxury-redesign .nav-links,
  body.luxury-redesign .site-nav ul { top: 72px; }
  body.luxury-redesign .hero {
    min-height: 92vh; padding: 115px 1.4rem 55px; background-position: 68% center;
  }
  body.luxury-redesign .hero.has-bg-image::after {
    content: ''; position: absolute; inset: 0; background: rgba(5, 12, 7, 0.22); z-index: 0;
  }
  body.luxury-redesign .hero-content { position: relative; z-index: 2; }
  body.luxury-redesign .hero h1 { font-size: 4rem; }
  body.luxury-redesign .hero h1 em { margin-left: 0.7rem; }
  body.luxury-redesign .about-quote { margin: -35px 12px 1.4rem; }
  body.luxury-redesign .offerings-grid,
  body.luxury-redesign .testi-grid { grid-template-columns: 1fr; }
  body.luxury-redesign .offering-media { height: 220px; }
  body.luxury-redesign .why-portrait { height: 330px; }
  body.luxury-redesign .booking .btn-dark,
  body.luxury-redesign .booking .btn-primary {
    display: block; margin: 0 0 1rem !important; width: 100%;
  }
}

/* ===================================================================
   v2 REFINEMENTS (client feedback)
   =================================================================== */
/* "Who I Work With": larger, easier-to-read text */
body.luxury-redesign .why-text { font-size: 1.6rem; line-height: 1.85; }
body.luxury-redesign .why .section-label { font-size: 13px; }

/* Booking section photo */
.booking-photo {
  max-width: 720px; margin: 0 auto 2.5rem; overflow: hidden;
  border: 1px solid rgba(214, 175, 98, 0.35);
  box-shadow: 0 20px 50px rgba(51, 36, 18, 0.18);
}
.booking-photo img { width: 100%; height: 340px; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .booking-photo img { height: 220px; }
}

/* ===================================================================
   v2.1 UI REFINEMENTS (client feedback round 2)
   =================================================================== */
/* One shared 1300px content container: nav, hero and all sections align */
body.luxury-redesign .nav-inner { max-width: 1300px; margin: 0 auto; padding: 0 2rem; }
body.luxury-redesign section,
body.luxury-redesign .section { padding-left: 2rem; padding-right: 2rem; }
body.luxury-redesign .section-inner { max-width: 1300px; }
body.luxury-redesign .hero { padding-left: 2rem; padding-right: 2rem; }
body.luxury-redesign .hero-content { max-width: 1300px; width: 100%; margin: 0 auto; }

/* Hero: "Bellemare" flush left under "Dominique", italic gold */
body.luxury-redesign .hero h1 em { color: var(--gold-light); font-style: italic; margin-left: 0; }

/* Bigger, easier-to-read type across the site */
body.luxury-redesign p { font-size: 18px; text-wrap: pretty; }
body.luxury-redesign .nav-links a,
body.luxury-redesign .site-nav ul a { font-size: 13px; }
body.luxury-redesign .section-label { font-size: 12px; }
body.luxury-redesign .about-text p { font-size: 18px; }
body.luxury-redesign .offering-card p.offering-desc { font-size: 17px; }
body.luxury-redesign .offerings-info-box p { font-size: 16px; }
body.luxury-redesign .offering-includes li,
body.luxury-redesign .includes-list li { font-size: 16px; }
body.luxury-redesign .why-text { font-size: 1.7rem; }
body.luxury-redesign .signs-list li { font-size: 1.25rem; color: rgba(255, 255, 255, 0.95); }
body.luxury-redesign .contact-info p { font-size: 17px; color: rgba(255, 255, 255, 0.92); }
body.luxury-redesign .contact-detail { font-size: 16px; }
body.luxury-redesign .contact-form input,
body.luxury-redesign .contact-form textarea { font-size: 16px; }
body.luxury-redesign .element p { font-size: 16px; }
body.luxury-redesign .other-card p { font-size: 15px; }
body.luxury-redesign .cred-content p { font-size: 16px; }
body.luxury-redesign footer p,
body.luxury-redesign .site-footer p { font-size: 13px; }
body.luxury-redesign .hero-desc { font-size: clamp(1.35rem, 2vw, 1.6rem); }

/* Testimonials: clearly readable on the deep green */
body.luxury-redesign .testi-quote { font-size: 1.3rem; color: rgba(255, 255, 255, 0.96); }
body.luxury-redesign .testi-author { font-size: 13px; color: var(--gold-light); }

/* Headlines stay on one line on desktop — no mid-title breaks */
body.luxury-redesign .section-title { font-size: clamp(2.5rem, 4vw, 4rem); max-width: none; }
@media (min-width: 901px) {
  body.luxury-redesign .section-title { white-space: nowrap; }
}
@media (max-width: 700px) {
  body.luxury-redesign .hero h1 em { margin-left: 0; }
}

/* ===================================================================
   v2.3 EXACT CANVAS PARITY — fixed spacing values from the approved
   design instead of viewport-scaled ones
   =================================================================== */
/* Portrait fills exactly the rows that exist (no phantom row now that
   the pillar chips are gone) */
body.luxury-redesign .why-portrait { grid-row: 1 / -1; }

body.luxury-redesign .section-title { font-size: clamp(2.5rem, 4.3vw, 3.875rem); }

@media (min-width: 901px) {
  body.luxury-redesign section,
  body.luxury-redesign .section { padding: 110px 2rem; }
  body.luxury-redesign.dominique-service-page section,
  body.luxury-redesign.dominique-service-page .section { padding: 90px 2rem; }
  body.luxury-redesign .hero { min-height: 900px; padding-top: 130px; padding-bottom: 70px; }
  body.luxury-redesign .about-grid { gap: 90px; }
}

/* ===================================================================
   v2.4 STRUCTURE FIXES
   =================================================================== */
/* Who I Work With: two clean grid cells (portrait | content box) —
   no row-spanning, so nothing stretches apart */
body.luxury-redesign .why .section-inner {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: 64px; align-items: center; text-align: left !important;
}
body.luxury-redesign .why-portrait { grid-row: auto; grid-column: 1; }
body.luxury-redesign .why-content { grid-column: 2; min-width: 0; }
body.luxury-redesign .why-content .gold-rule { margin: 0 0 2rem !important; }

/* Testimonial quotes: inner paragraphs inherit the quote styling */
.testi-quote p {
  color: inherit; font-family: inherit; font-size: inherit;
  font-style: inherit; line-height: inherit;
  margin: 0 0 1em;
}
.testi-quote p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  body.luxury-redesign .why .section-inner { grid-template-columns: 1fr; }
  body.luxury-redesign .why-portrait,
  body.luxury-redesign .why-content { grid-column: 1; }
}


/* ===================================================================
   v2.5 — header aligned to the content edge
   The nav's side padding sits inside its max-width, which pushed the
   logo 32px right of where sections start. Widen the box by exactly
   that padding so the logo and menu land on the same 1300px edge as
   every section.
   =================================================================== */
body.luxury-redesign .nav-inner { max-width: 1364px; }

/* ===================================================================
   v2.6 — EVERY HEADLINE HARD-LEFT
   All section headlines sit flush on the content edge, and the
   booking / events / newsletter blocks align left with them. The
   !important guards make sure no other stylesheet (or browser
   extension) can re-center them.
   =================================================================== */
body.luxury-redesign .section-title,
body.luxury-redesign h2.section-title,
body.luxury-redesign h1 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
}
body.luxury-redesign .section-label { text-align: left !important; }
body.luxury-redesign .gold-rule { margin-left: 0 !important; margin-right: 0 !important; }

/* Booking + Events sections: fully left-aligned */
body.luxury-redesign .booking,
body.luxury-redesign .events-section { text-align: left; }
body.luxury-redesign .booking .section-inner,
body.luxury-redesign .events-section .section-inner {
  max-width: 1300px; text-align: left;
}
body.luxury-redesign .booking p,
body.luxury-redesign .events-section .section-inner p { margin-left: 0; margin-right: 0; }
body.luxury-redesign .events-buttons { justify-content: flex-start; margin-left: 0; }
body.luxury-redesign .mailing-list-form { margin-left: 0; }
body.luxury-redesign .booking-photo { margin-left: 0; }

/* Service page booking block: left-aligned too */
body.luxury-redesign .service-booking { text-align: left; }
body.luxury-redesign .service-booking .section-inner { max-width: 1300px; }
body.luxury-redesign .service-booking .price-block { margin-left: 0; margin-right: 0; }
body.luxury-redesign .service-booking .includes-list { margin-left: 0; margin-right: 0; }

/* Interior page heroes keep their centered composition */
body.luxury-redesign .hero-interior h1 { text-align: center !important; }

/* ===================================================================
   v2.7 — EVENTS + NEWSLETTER: one combined, centered block
   (This section is the deliberate centered exception; everything else
   stays hard-left per v2.6.)
   =================================================================== */
body.luxury-redesign .events-section { text-align: center; }
body.luxury-redesign .events-section .section-inner { max-width: 820px; text-align: center; }
body.luxury-redesign .events-section .section-label { text-align: center !important; }
body.luxury-redesign .events-section .section-title {
  text-align: center !important;
  margin-left: auto !important; margin-right: auto !important;
}
body.luxury-redesign .events-section .gold-rule { margin: 0 auto 2rem !important; }
body.luxury-redesign .events-section .section-inner p { margin-left: auto; margin-right: auto; }
body.luxury-redesign .events-section .mailing-list {
  border-top: none; padding-top: 0; margin: 1rem 0 2.5rem;
}
body.luxury-redesign .mailing-list-form { margin: 0 auto; }
body.luxury-redesign .events-buttons { justify-content: center; margin: 0 0 1rem; }

/* ===================================================================
   v2.8 — EVENTS (custom post type)
   =================================================================== */
.events-grid { display: grid; gap: 2rem; margin-top: 2.5rem; }
.event-card {
  display: grid; grid-template-columns: 110px 1fr; gap: 2rem;
  background: var(--cream); border: 1px solid rgba(184, 138, 53, 0.24);
  box-shadow: 0 15px 38px rgba(61, 43, 21, 0.09);
  padding: 2rem 2.25rem; align-items: start;
}
.event-date-badge {
  background: var(--forest); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1rem 0.5rem; border-top: 3px solid var(--gold);
}
.event-month {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-light);
}
.event-day {
  font-family: var(--font-heading); font-size: 2.6rem; font-weight: 300; line-height: 1.1;
}
.event-body { min-width: 0; }
.event-media { display: block; margin-bottom: 1.25rem; max-height: 260px; overflow: hidden; }
.event-media img { width: 100%; height: 260px; object-fit: cover; }
.event-card h3 {
  font-family: var(--font-heading); font-size: 1.9rem; font-weight: 400;
  color: var(--forest); margin-bottom: 0.4rem; line-height: 1.2;
}
.event-card h3 a { color: inherit; }
.event-card h3 a:hover { color: var(--gold); }
.event-meta {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.event-excerpt { font-size: 17px; color: var(--text-mid); line-height: 1.8; margin-bottom: 1rem; }
.event-details { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.event-price {
  font-family: var(--font-heading); font-size: 1.5rem; color: var(--forest);
}
.event-spots {
  align-self: center; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-pale); padding: 3px 10px;
}
.event-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.event-actions .offering-link { margin-top: 0; }
.event-book { padding: 12px 28px; }

/* Single event page */
.event-detail-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap: 3.5rem; align-items: start;
}
.event-detail-aside {
  background: var(--forest); border-top: 3px solid var(--gold); padding: 2.25rem;
}
.event-aside-label {
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 1.25rem;
}
.event-aside-row {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.85rem 0; border-bottom: 1px solid rgba(200, 150, 58, 0.2);
}
.event-aside-key {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold);
}
.event-aside-value {
  font-family: var(--font-heading); font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.94); line-height: 1.6;
}
.event-aside-button { display: block; text-align: center; margin-top: 1.75rem; }
.event-aside-ask {
  display: block; text-align: center; margin-top: 0.9rem;
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(250, 246, 238, 0.7);
}
.event-aside-ask:hover { color: var(--gold-light); }

/* Homepage upcoming-event cards (inside the centered events block) */
.home-events-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem; width: 100%; margin: 0 0 2.5rem; text-align: left;
}
.home-event-card {
  background: var(--cream); border-top: 2px solid var(--gold);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem;
  transition: transform 0.2s;
}
.home-event-card:hover { transform: translateY(-3px); }
.home-event-date {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.home-event-card h4 {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400;
  color: var(--forest); line-height: 1.25;
}
.home-event-meta { font-size: 13px; color: var(--text-light); line-height: 1.6; }
.home-event-link {
  margin-top: 0.5rem; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}

@media (max-width: 900px) {
  .event-detail-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 700px) {
  .event-card { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem; }
  .event-date-badge { flex-direction: row; gap: 0.6rem; padding: 0.6rem 1rem; }
  .event-day { font-size: 1.8rem; }
  .event-media img { height: 200px; }
}

/* ===================================================================
   v2.9 — INNER-PAGE CTA BLOCKS CENTERED
   These closing call-to-action blocks only appear on inner pages, so
   centering them here does not affect the homepage (which stays
   hard-left per v2.6).
   =================================================================== */
body.luxury-redesign .cta,
body.luxury-redesign .service-booking { text-align: center; }
body.luxury-redesign .cta .section-inner,
body.luxury-redesign .service-booking .section-inner { max-width: 820px; }
body.luxury-redesign .cta .section-label,
body.luxury-redesign .service-booking .section-label { text-align: center !important; }
body.luxury-redesign .cta .section-title,
body.luxury-redesign .service-booking .section-title {
  text-align: center !important;
  margin-left: auto !important; margin-right: auto !important;
}
body.luxury-redesign .cta .gold-rule,
body.luxury-redesign .service-booking .gold-rule { margin: 0 auto 2rem !important; }
body.luxury-redesign .cta p,
body.luxury-redesign .service-booking > .section-inner > p { margin-left: auto; margin-right: auto; }
body.luxury-redesign .service-booking .price-block { margin-left: auto; margin-right: auto; }
body.luxury-redesign .service-booking .includes-list { margin-left: auto; margin-right: auto; }

/* ===================================================================
   v2.9 — WORDPRESS MENU SUPPORT
   The header renders the menu assigned to "Primary Menu" under
   Appearance -> Menus. These rules cover what WordPress adds: list
   items, current-page state and one level of dropdowns.
   =================================================================== */
body.luxury-redesign .nav-links li { position: relative; }
body.luxury-redesign .nav-links .current-menu-item > a,
body.luxury-redesign .nav-links .current_page_item > a,
body.luxury-redesign .nav-links .current-menu-ancestor > a { color: var(--gold-light); }

/* Dropdowns for menu items with children */
body.luxury-redesign .nav-links .sub-menu {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 220px; margin: 0; padding: 0.5rem 0;
  background: #142417; border: 1px solid rgba(214, 175, 98, 0.24);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32); z-index: 120;
  flex-direction: column; gap: 0;
}
body.luxury-redesign .nav-links li:hover > .sub-menu,
body.luxury-redesign .nav-links li:focus-within > .sub-menu { display: flex; }
body.luxury-redesign .nav-links .sub-menu a {
  display: block; padding: 0.65rem 1.25rem; font-size: 11px;
  letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.82);
}
body.luxury-redesign .nav-links .sub-menu a:hover { color: var(--gold-light); }

@media (max-width: 900px) {
  body.luxury-redesign .nav-links .sub-menu {
    display: flex; position: static; min-width: 0;
    background: transparent; border: none; box-shadow: none;
    padding: 0 0 0 1rem;
  }
  body.luxury-redesign .nav-links .sub-menu a { padding: 0.75rem 1rem; }
}

/* ===================================================================
   v3.0 — HOMEPAGE CTA CENTERED + EVENTS SECTION REDESIGN
   =================================================================== */
/* "Let's Begin" booking block centered, matching the inner-page CTAs */
body.luxury-redesign .booking { text-align: center; }
body.luxury-redesign .booking .section-inner { max-width: 820px; text-align: center !important; }
/* symmetric margins so the button pair sits on the true centre line
   (overrides the inline margin-right on the first button) */
body.luxury-redesign .booking .btn-dark,
body.luxury-redesign .booking .btn-primary { margin: 0 0.5rem 0.75rem !important; }
body.luxury-redesign .booking .section-label { text-align: center !important; }
body.luxury-redesign .booking .section-title {
  text-align: center !important;
  margin-left: auto !important; margin-right: auto !important;
}
body.luxury-redesign .booking .gold-rule { margin: 0 auto 2rem !important; }
body.luxury-redesign .booking p { margin-left: auto; margin-right: auto; }
body.luxury-redesign .booking .btn-dark,
body.luxury-redesign .booking .btn-primary { margin-bottom: 0.75rem; }

/* ---- Events section ---- */
body.luxury-redesign .events-section .section-inner { max-width: 1040px; }
.events-lead {
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 300; font-style: italic;
  color: var(--earth-mid); line-height: 1.8;
  max-width: 720px; margin: 0 auto 3rem;
}

/* Upcoming event cards */
body.luxury-redesign .home-events-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem; margin-bottom: 1.5rem;
}
.home-event-card {
  border: 1px solid rgba(184, 138, 53, 0.24); border-top: 3px solid var(--gold);
  background: var(--cream); padding: 1.75rem;
  box-shadow: 0 12px 30px rgba(61, 43, 21, 0.07);
  transition: transform 0.2s, box-shadow 0.2s;
}
.home-event-card:hover {
  transform: translateY(-4px); box-shadow: 0 20px 44px rgba(42, 31, 17, 0.12);
}
.home-event-card h4 { margin-bottom: 0.15rem; }
.home-event-link { margin-top: auto; padding-top: 0.75rem; }
.events-see-all {
  display: inline-block; margin-bottom: 3rem;
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid var(--gold-pale); padding-bottom: 2px;
}
.events-see-all:hover { border-color: var(--gold); }

/* Connect panels: mailing list + Facebook, side by side */
.events-connect {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem; margin-top: 1rem; text-align: left;
}
.connect-panel {
  display: flex; flex-direction: column;
  background: var(--cream); border: 1px solid rgba(184, 138, 53, 0.28);
  padding: 2.25rem; box-shadow: 0 14px 34px rgba(61, 43, 21, 0.08);
}
.connect-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 1.1rem;
  border: 1px solid rgba(184, 138, 53, 0.45); color: var(--gold);
  border-radius: 50%;
}
.connect-panel h3 {
  font-family: var(--font-heading); font-size: 1.7rem; font-weight: 400;
  color: var(--forest); margin-bottom: 0.6rem; line-height: 1.25;
}
.connect-panel p {
  font-size: 16px; color: var(--text-mid); line-height: 1.85;
  margin-bottom: 1.5rem; flex-grow: 1;
}
.connect-note {
  font-size: 13px !important; color: var(--text-light) !important;
  margin: 0.85rem 0 0 !important; flex-grow: 0 !important;
}
.connect-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  align-self: flex-start; padding: 14px 30px;
}
.mailing-list-embed { margin-top: 0.25rem; }

/* Mailing form inside the panel */
.connect-panel .mailing-list-form { margin: 0; max-width: none; }
.connect-panel .mailing-list-form input {
  font-size: 15px; padding: 15px 18px;
  border: 1px solid rgba(184, 138, 53, 0.4); background: #fff;
  transition: border-color 0.2s;
}
.connect-panel .mailing-list-form input:focus {
  border-color: var(--gold); outline: 2px solid rgba(200, 150, 58, 0.18); outline-offset: 1px;
}
.connect-panel .mailing-list-form button {
  padding: 15px 26px; transition: background 0.2s;
}
.connect-panel .mailing-list-form button:hover { background: var(--gold-light); }

@media (max-width: 820px) {
  .events-connect { grid-template-columns: 1fr; }
  .connect-panel { padding: 1.75rem; }
  .events-lead { font-size: 1.2rem; }
}

/* ===================================================================
   v3.1 — READABLE ITALIC HEADLINES ON DARK SECTIONS + LARGER TYPE
   =================================================================== */
/* The italic half of a headline defaults to dark brown, which is
   unreadable on the dark sections. Force the gold accent there,
   whatever colour the Customizer text does or doesn't carry. */
body.luxury-redesign .why .section-title em,
body.luxury-redesign .why-it-matters .section-title em,
body.luxury-redesign .testimonials .section-title em,
body.luxury-redesign .contact .section-title em,
body.luxury-redesign .for-you .section-title em,
body.luxury-redesign .cta .section-title em,
body.luxury-redesign .hero-interior h1 em { color: var(--gold-light) !important; }

/* Larger, easier-to-read type */
body.luxury-redesign p { font-size: 19px; }
body.luxury-redesign .about-text p { font-size: 19px; }
body.luxury-redesign .section-label { font-size: 13px; }
body.luxury-redesign .offering-card p.offering-desc { font-size: 18px; }
body.luxury-redesign .offerings-info-box p { font-size: 17px; }
body.luxury-redesign .signs-list li { font-size: 1.35rem; }
body.luxury-redesign .contact-info p { font-size: 18px; }
body.luxury-redesign .contact-detail { font-size: 17px; }
body.luxury-redesign .element p { font-size: 17px; }
body.luxury-redesign .cred-content p { font-size: 17px; }
body.luxury-redesign .other-card p { font-size: 16px; }
body.luxury-redesign .event-excerpt { font-size: 18px; }
body.luxury-redesign .testi-quote { font-size: 1.35rem; }

/* Events / connect panels */
.events-lead { font-size: 1.55rem; }
.connect-panel h3 { font-size: 1.95rem; }
.connect-panel p { font-size: 17px; }
.connect-note { font-size: 14px !important; }
.connect-panel .mailing-list-form input { font-size: 16px; }
.connect-panel .mailing-list-form button { font-size: 13px; }
.connect-button { font-size: 14px; }
.home-event-card h4 { font-size: 1.55rem; }
.home-event-date { font-size: 12px; }
.home-event-meta { font-size: 14px; }
.events-see-all { font-size: 13px; }

@media (max-width: 820px) {
  .events-lead { font-size: 1.3rem; }
  .connect-panel h3 { font-size: 1.7rem; }
}

/* ===================================================================
   v3.2 — CONTACT PAGE READABILITY + LABEL CONTRAST
   The Contact page reuses .contact-info / .contact-form on LIGHT
   panels, but those classes are styled for the dark homepage section —
   so its paragraph rendered near-white on cream and the form's
   placeholders were invisible. Restate them for the light context.
   =================================================================== */
:root { --gold-text: #946521; } /* darker gold for small text on light backgrounds */

.page-template-template-contact .contact-info p,
.page-template-template-contact .contact-info .contact-detail {
  color: var(--text-mid) !important;
  font-size: 18px !important;
  line-height: 1.9;
}
.page-template-template-contact .contact-detail {
  color: var(--earth-mid) !important; font-size: 17px !important;
}
.page-template-template-contact .contact-form input,
.page-template-template-contact .contact-form textarea {
  background: #fff !important;
  border: 1px solid rgba(184, 138, 53, 0.4) !important;
  color: var(--text-dark) !important;
  font-size: 16px !important;
}
.page-template-template-contact .contact-form input::placeholder,
.page-template-template-contact .contact-form textarea::placeholder {
  color: var(--text-light) !important; opacity: 1;
}
.page-template-template-contact .contact-form input:focus,
.page-template-template-contact .contact-form textarea:focus {
  border-color: var(--gold) !important;
  outline: 2px solid rgba(200, 150, 58, 0.18); outline-offset: 1px;
}
.page-template-template-contact .contact-form h3,
.page-template-template-contact .contact-info h2 { color: var(--forest) !important; }

/* Small uppercase labels on light backgrounds: deeper gold so they are
   actually legible (the bright gold sat around 2.4:1 on cream). Gold
   rules, borders, icons and buttons keep the original brand tone. */
body.luxury-redesign .about .section-label,
body.luxury-redesign .offerings-section .section-label,
body.luxury-redesign .booking .section-label,
body.luxury-redesign .events-section .section-label,
body.luxury-redesign .story .section-label,
body.luxury-redesign .credentials .section-label,
body.luxury-redesign .other .section-label,
body.luxury-redesign .service-detail .section-label,
body.luxury-redesign .offerings-info-box .box-label,
body.luxury-redesign .connect-panel .connect-note,
body.luxury-redesign .home-event-date,
body.luxury-redesign .events-see-all,
body.luxury-redesign .offering-name,
body.luxury-redesign .offering-link,
body.luxury-redesign .element-label,
body.luxury-redesign .cred-org,
body.luxury-redesign .other-card .tag,
body.luxury-redesign .event-meta,
body.luxury-redesign .page-template-template-contact .section-label {
  color: var(--gold-text) !important;
}
body.luxury-redesign .connect-panel .connect-note { color: var(--text-light) !important; }

/* ===================================================================
   v3.3 — CONTACT PHOTO SLOT (homepage + contact page)
   =================================================================== */
.framed-photo { position: relative; overflow: hidden; margin: 0 0 2rem; }
.framed-photo::after {
  content: ''; position: absolute; inset: 0; margin: 12px;
  border: 1px solid rgba(214, 175, 98, 0.55); pointer-events: none;
}
.framed-photo img { width: 100%; display: block; }

/* Homepage: dark section */
body.luxury-redesign .contact .contact-photo {
  height: 300px; border: 1px solid rgba(214, 175, 98, 0.3);
}
body.luxury-redesign .contact .contact-photo img {
  height: 100%; max-height: none; object-fit: cover;
}

/* Contact page: light panel, sits above the details */
.page-template-template-contact .contact-photo {
  height: 280px; margin: -1rem 0 2rem;
  box-shadow: 0 16px 40px rgba(51, 36, 18, 0.14);
}
.page-template-template-contact .contact-photo img {
  height: 100%; max-height: none; object-fit: cover;
}

@media (max-width: 700px) {
  body.luxury-redesign .contact .contact-photo,
  .page-template-template-contact .contact-photo { height: 220px; }
}

/* FAQ: comfortable answer measure and open-state emphasis (v3.3.1) */
body.luxury-redesign .faq-item summary { line-height: 1.35; }
body.luxury-redesign .faq-item p { max-width: 900px; }

/* ===================================================================
   v3.4 — OUTLINE BUTTON LEGIBILITY + CENTRED BOOKING PAIR
   .btn-outline was built for dark sections (cream border and text), so
   on the service page's cream booking block "Ask a Question" rendered
   invisible — which also made the gold Book button look off-centre,
   because the invisible button was still taking up half the row.
   =================================================================== */
body.luxury-redesign .btn-outline {
  border-color: var(--forest); color: var(--forest);
}
body.luxury-redesign .btn-outline:hover {
  background: var(--forest); border-color: var(--forest); color: var(--cream);
}

/* Dark sections keep the original cream outline */
body.luxury-redesign .cta .btn-outline,
body.luxury-redesign .for-you .btn-outline,
body.luxury-redesign .why .btn-outline,
body.luxury-redesign .why-it-matters .btn-outline,
body.luxury-redesign .testimonials .btn-outline,
body.luxury-redesign .contact .btn-outline,
body.luxury-redesign .hero .btn-outline,
body.luxury-redesign .hero-interior .btn-outline {
  border-color: rgba(250, 246, 238, 0.5); color: rgba(250, 246, 238, 0.88);
}
body.luxury-redesign .cta .btn-outline:hover,
body.luxury-redesign .for-you .btn-outline:hover,
body.luxury-redesign .why .btn-outline:hover,
body.luxury-redesign .why-it-matters .btn-outline:hover,
body.luxury-redesign .testimonials .btn-outline:hover,
body.luxury-redesign .contact .btn-outline:hover,
body.luxury-redesign .hero .btn-outline:hover,
body.luxury-redesign .hero-interior .btn-outline:hover {
  background: transparent; border-color: var(--cream); color: var(--cream);
}

/* Symmetric margins so button pairs sit on the true centre line */
body.luxury-redesign .service-booking .btn-gold,
body.luxury-redesign .service-booking .btn-outline,
body.luxury-redesign .cta .btn-gold,
body.luxury-redesign .cta .btn-outline {
  margin: 0 0.5rem 0.75rem !important;
}

/* ===================================================================
   v3.5 — FORMINATOR FORMS STYLED TO THE THEME
   Cream fields with dark text, gold focus, branded submit button, in
   both the dark homepage section and the light Contact page panel.
   =================================================================== */
.contact-form .forminator-input,
.contact-form .forminator-textarea,
.contact-form select.forminator-select2,
.contact-form .forminator-input-with-icon input,
.mailing-list-embed .forminator-input,
.connect-panel .forminator-input {
  background: var(--cream) !important;
  border: 1px solid rgba(184, 138, 53, 0.45) !important;
  border-radius: 0 !important;
  color: var(--text-dark) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  min-height: 52px;
  box-shadow: none !important;
  transition: border-color 0.2s;
}
.contact-form .forminator-textarea { min-height: 150px; }

.contact-form .forminator-input::placeholder,
.contact-form .forminator-textarea::placeholder,
.mailing-list-embed .forminator-input::placeholder,
.connect-panel .forminator-input::placeholder {
  color: var(--text-light) !important; opacity: 1;
}

.contact-form .forminator-input:focus,
.contact-form .forminator-textarea:focus,
.mailing-list-embed .forminator-input:focus,
.connect-panel .forminator-input:focus {
  border-color: var(--gold) !important;
  outline: 2px solid rgba(200, 150, 58, 0.22) !important;
  outline-offset: 1px;
  background: #fff !important;
}

/* Labels + helper text — dark section (homepage) */
body.luxury-redesign .contact .contact-form .forminator-label,
body.luxury-redesign .contact .contact-form .forminator-label span {
  color: var(--gold-light) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.5rem !important;
}
body.luxury-redesign .contact .contact-form .forminator-required,
body.luxury-redesign .contact .contact-form .forminator-description {
  color: rgba(250, 246, 238, 0.6) !important;
}

/* Labels + helper text — light panel (Contact page) */
.page-template-template-contact .contact-form .forminator-label,
.page-template-template-contact .contact-form .forminator-label span {
  color: var(--earth-mid) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.5rem !important;
}
.page-template-template-contact .contact-form .forminator-required { color: var(--gold-text) !important; }
.page-template-template-contact .contact-form .forminator-description { color: var(--text-light) !important; }

/* Submit button in the theme's voice */
.contact-form .forminator-button-submit,
.mailing-list-embed .forminator-button-submit,
.connect-panel .forminator-button-submit {
  background: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  color: var(--text-dark) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 15px 38px !important;
  min-height: 0 !important;
  transition: background 0.2s;
}
.contact-form .forminator-button-submit:hover,
.mailing-list-embed .forminator-button-submit:hover,
.connect-panel .forminator-button-submit:hover {
  background: var(--gold-light) !important; border-color: var(--gold-light) !important;
}

/* Validation + success messages */
.contact-form .forminator-error-message { color: #C0532F !important; font-size: 13px !important; }
body.luxury-redesign .contact .contact-form .forminator-response-message {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--cream) !important;
  border-left: 3px solid var(--gold) !important;
}
.page-template-template-contact .contact-form .forminator-response-message {
  background: var(--cream) !important; color: var(--text-dark) !important;
  border-left: 3px solid var(--gold) !important;
}

/* Hide the front-end "Edit form" link for logged-in admins on the page */
.contact-form .forminator-edit-module { opacity: 0.35; font-size: 11px !important; }

/* Footer credit line (v3.6) */
.footer-credit {
  margin-top: 0.5rem !important;
  font-size: 12px !important;
  letter-spacing: 0.08em;
  color: rgba(250, 246, 238, 0.3) !important;
}
.footer-credit a { color: rgba(250, 246, 238, 0.55); transition: color 0.2s; }
.footer-credit a:hover { color: var(--gold-light); }

/* Embedded newsletter form fits its panel (v3.7) */
.mailing-list-embed { width: 100%; }
.mailing-list-embed .forminator-row { margin-bottom: 0 !important; }
.mailing-list-embed .forminator-col { padding: 0 !important; }
.mailing-list-embed .forminator-field { margin-bottom: 0.75rem; }
.mailing-list-embed .forminator-button-submit { width: auto; }
.events-section .mailing-list-embed { max-width: 520px; margin: 0 auto; }
.connect-panel .mailing-list-embed { max-width: none; }

/* ===================================================================
   v3.8 — CONNECT PANELS: BALANCE + FORM POLISH
   The Facebook panel's paragraph was stretching to fill the taller
   form panel, stranding its button at the bottom behind a large gap.
   Content now sits centred in each panel, so both read as one pair.
   =================================================================== */
.events-connect { align-items: stretch; }
.connect-panel { justify-content: center; padding: 2.5rem; }
.connect-panel p { flex-grow: 0; }
.connect-panel h3 { margin-bottom: 0.75rem; }
.connect-panel .connect-button { margin-top: 0.5rem; }

/* Newsletter form inside the panel */
.connect-panel .mailing-list-embed { margin-top: 0.5rem; }
.connect-panel .forminator-label,
.connect-panel .forminator-label span {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-text) !important;
  margin-bottom: 0.4rem !important;
}
.connect-panel .forminator-required { color: var(--gold-text) !important; }
.connect-panel .forminator-field { margin-bottom: 0.9rem !important; }
.connect-panel .forminator-input { min-height: 48px; }
.connect-panel .mailing-list-embed .forminator-button-submit,
.events-section .mailing-list-embed .forminator-button-submit {
  width: 100%; justify-content: center;
}
.connect-panel .connect-note { margin-top: 1rem !important; flex-grow: 0 !important; }

/* The admin-only "Edit form" link sits inside the embed and breaks the
   layout for logged-in editors; forms stay editable from the dashboard. */
.connect-panel .forminator-edit-module,
.contact-form .forminator-edit-module,
.mailing-list-embed .forminator-edit-module { display: none !important; }

/* Gentle lift so the panels feel interactive alongside the event cards */
.connect-panel { transition: box-shadow 0.2s, transform 0.2s; }
.connect-panel:hover { box-shadow: 0 20px 44px rgba(42, 31, 17, 0.12); }

@media (max-width: 820px) {
  .connect-panel { padding: 2rem; }
}

/* Credentials without a badge span the full card (v3.9) */
.cred-card--no-badge { grid-template-columns: 1fr; }

/* Hero eyebrow: larger and easier to read (v3.9.1) */
body.luxury-redesign .hero-tag {
  font-size: 17px;
  letter-spacing: 0.26em;
  color: var(--gold-light);
  margin-bottom: 1.25rem;
}
@media (max-width: 700px) {
  body.luxury-redesign .hero-tag { font-size: 14px; letter-spacing: 0.2em; }
}

/* Booking photo sits above the copy, framed like the other portraits (v4.0) */
body.luxury-redesign .booking-photo {
  max-width: 760px; margin: 0 auto 2.5rem; position: relative;
}
body.luxury-redesign .booking-photo::after {
  content: ''; position: absolute; inset: 0; margin: 12px;
  border: 1px solid rgba(214, 175, 98, 0.55); pointer-events: none;
}
body.luxury-redesign .booking-photo img { height: 380px; object-fit: cover; }
@media (max-width: 700px) {
  body.luxury-redesign .booking-photo img { height: 240px; }
}

/* ===================================================================
   v4.1 — MOBILE EXPERIENCE
   On phones the hero photo was a cover background on a tall, narrow
   box, so it cropped hard and looked stretched. Below 780px the hero
   becomes a stacked layout instead: the photo on top at its natural
   proportions, the words underneath on the dark ground.
   =================================================================== */
.hero-mobile-media { display: none; }

@media (max-width: 780px) {
  body.luxury-redesign .hero,
  body.luxury-redesign .hero.has-bg-image {
    background: linear-gradient(180deg, #16281a 0%, var(--forest) 55%, var(--earth) 100%) !important;
    display: block;
    min-height: 0;
    padding: 72px 0 3rem;     /* clears the fixed nav */
    text-align: left;
  }
  body.luxury-redesign .hero::before,
  body.luxury-redesign .hero::after { content: none; }

  .hero-mobile-media {
    display: block; position: relative;
    width: 100%; height: 58vw; max-height: 340px; min-height: 240px;
  }
  .hero-mobile-media img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: 50% 22%;          /* keeps her face in frame */
    display: block;
  }
  .hero-mobile-media::after {          /* blends the photo into the section */
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
    background: linear-gradient(180deg, rgba(22, 40, 26, 0), #16281a);
    pointer-events: none;
  }

  body.luxury-redesign .hero-content {
    position: relative; z-index: 2;
    max-width: none; width: 100%;
    padding: 1.75rem 1.4rem 0;
    display: flex; flex-direction: column; align-items: flex-start;
  }
  body.luxury-redesign .hero h1 { font-size: 3.4rem; line-height: 0.95; margin-bottom: 1.25rem; }
  body.luxury-redesign .hero h1 em { margin-left: 0; }
  body.luxury-redesign .hero-ornament { margin-bottom: 1.5rem; }
  body.luxury-redesign .hero-desc { font-size: 1.2rem; margin-bottom: 2rem; max-width: none; }
  body.luxury-redesign .hero .btn-primary { width: 100%; text-align: center; }

  /* Comfortable tap targets and no side-to-side scrolling */
  body.luxury-redesign .btn-primary,
  body.luxury-redesign .btn-dark,
  body.luxury-redesign .btn-gold,
  body.luxury-redesign .btn-outline { min-height: 48px; line-height: 1.4; }
  body.luxury-redesign .booking .btn-dark,
  body.luxury-redesign .booking .btn-primary,
  body.luxury-redesign .cta .btn-gold,
  body.luxury-redesign .cta .btn-outline,
  body.luxury-redesign .service-booking .btn-gold,
  body.luxury-redesign .service-booking .btn-outline {
    display: block; width: 100%; margin: 0 0 0.75rem !important;
  }
  body.luxury-redesign .nav-toggle { width: 34px; height: 26px; }

  /* Sections: keep the rhythm without the desktop-sized air */
  body.luxury-redesign section,
  body.luxury-redesign .section { padding: 3.5rem 1.4rem; }
  body.luxury-redesign .about-grid { gap: 2rem; }
  body.luxury-redesign .about-quote { margin: -28px 0 1.25rem !important; padding: 2rem; }
  body.luxury-redesign .offering-card > *:not(.offering-media) { margin-left: 1.5rem; margin-right: 1.5rem; }
  body.luxury-redesign .offering-card h3 { font-size: 2rem; }
  body.luxury-redesign .why .section-inner { gap: 2rem; }
  body.luxury-redesign .testi-card { padding: 1.75rem; }
  body.luxury-redesign .contact-form { padding: 1.5rem; }
  body.luxury-redesign .events-connect { gap: 1.25rem; }

  /* Nothing should overflow the viewport */
  body.luxury-redesign .section-inner { overflow-x: hidden; }
  body.luxury-redesign .editorial-photo img { height: 320px; }
}

@media (max-width: 420px) {
  body.luxury-redesign .hero h1 { font-size: 2.9rem; }
  body.luxury-redesign .hero-tag { font-size: 13px; letter-spacing: 0.18em; }
  .hero-mobile-media { height: 62vw; min-height: 220px; }
}

/* ===================================================================
   v4.2 — OFFERINGS INFO CARDS
   Both cards used to stretch to the tallest one, so the short Group
   card carried a lot of dead space. They now size to their own content,
   lead with the essential line, and keep the logistics one tap away.
   =================================================================== */
body.luxury-redesign .offerings-info-boxes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; align-items: start;
  margin: 1.75rem 0 2rem;
}
body.luxury-redesign .offerings-info-box {
  background: var(--cream); border: 1px solid rgba(184, 138, 53, 0.24);
  border-left: 3px solid var(--gold);
  padding: 1.6rem 1.75rem;
  box-shadow: 0 10px 26px rgba(61, 43, 21, 0.06);
}
.offerings-info-box .box-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 0.75rem;
  border: 1px solid rgba(184, 138, 53, 0.45);
  border-radius: 50%; color: var(--gold);
}
body.luxury-redesign .offerings-info-box .box-label {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 0.4rem;
}
body.luxury-redesign .offerings-info-box .box-lead {
  font-size: 16px; color: var(--text-mid); line-height: 1.8; margin: 0;
}

/* Disclosure for the longer logistics copy */
.box-more { margin-top: 0.85rem; }
.box-more summary {
  cursor: pointer; list-style: none;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-text); display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.15rem 0;
}
.box-more summary::-webkit-details-marker { display: none; }
.box-more summary::after { content: '+'; font-size: 15px; line-height: 1; }
.box-more[open] summary::after { content: '–'; }
.box-more summary:hover { color: var(--gold); }
.box-more summary:focus-visible { outline: 2px solid rgba(200, 150, 58, 0.4); outline-offset: 3px; }
.box-more p {
  font-size: 16px !important; color: var(--text-mid); line-height: 1.8;
  margin: 0.75rem 0 0 !important;
}

@media (max-width: 780px) {
  body.luxury-redesign .offerings-info-boxes { grid-template-columns: 1fr; gap: 1rem; }
  body.luxury-redesign .offerings-info-box { padding: 1.4rem 1.5rem; }
}

/* What to Expect steps: two roomy columns instead of four narrow ones (v4.3) */
body.luxury-redesign .steps-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}
body.luxury-redesign .step-card { padding: 2.25rem; }
body.luxury-redesign .step-card h3 { font-size: 1.6rem; margin-bottom: 1rem; }
body.luxury-redesign .step-card p { margin-bottom: 1rem; }
body.luxury-redesign .step-card p:last-child { margin-bottom: 0; }
@media (max-width: 780px) {
  body.luxury-redesign .steps-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  body.luxury-redesign .step-card { padding: 1.75rem; }
}

/* ===================================================================
   v4.4 — INTERIOR HEROES MATCH THE HOMEPAGE
   Copy on the left over a dark wash, photo showing through on the
   right, inside the same 1300px content column. Pages without a hero
   image keep the centred gradient banner.
   =================================================================== */
body.luxury-redesign .hero-interior.has-hero-image {
  min-height: 480px;
  justify-content: flex-start;
  text-align: left;
  padding: 130px 2rem 70px;
}
body.luxury-redesign .hero-interior.has-hero-image::before {
  background: linear-gradient(90deg, transparent 0 48%, rgba(184, 138, 53, 0.12));
}
body.luxury-redesign .hero-interior.has-hero-image .hero-content {
  max-width: 1300px; width: 100%; margin: 0 auto;
}
body.luxury-redesign .hero-interior.has-hero-image .breadcrumb,
body.luxury-redesign .hero-interior.has-hero-image h1,
body.luxury-redesign .hero-interior.has-hero-image .hero-meta,
body.luxury-redesign .hero-interior.has-hero-image .hero-intro { max-width: 660px; }
body.luxury-redesign .hero-interior.has-hero-image .hero-ornament-v { margin: 0 0 1.5rem; }
body.luxury-redesign .hero-interior.has-hero-image h1 {
  text-align: left !important;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}
body.luxury-redesign .hero-interior.has-hero-image .hero-intro { color: rgba(255, 255, 255, 0.9); }

/* Phones: stack the photo above the words, as the homepage does */
@media (max-width: 780px) {
  body.luxury-redesign .hero-interior.has-hero-image {
    background: linear-gradient(180deg, #16281a 0%, var(--forest) 60%, var(--earth) 100%) !important;
    display: block; min-height: 0; padding: 72px 0 2.75rem;
  }
  body.luxury-redesign .hero-interior.has-hero-image::before {
    content: ''; display: block; position: static;
    width: 100%; height: 52vw; max-height: 300px; min-height: 210px;
    background-image: var(--hero-img);
    background-size: cover; background-position: 50% 25%;
  }
  body.luxury-redesign .hero-interior.has-hero-image .hero-content {
    padding: 1.75rem 1.4rem 0; max-width: none;
  }
  body.luxury-redesign .hero-interior.has-hero-image h1 { font-size: 2.9rem; }
}

/* ===================================================================
   v4.5 — HERO HEIGHTS
   Desktop interior heroes hold a 500px band so a hero photo has room
   to breathe; phones stack the photo above the words instead.
   =================================================================== */
body.luxury-redesign .hero-interior {
  min-height: 500px;
  padding: 122px 2rem 62px;
}
body.luxury-redesign .hero-interior.has-hero-image {
  min-height: clamp(700px, 76vh, 800px);
  padding: 180px 2rem 110px;
}
body.luxury-redesign .hero-interior h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  margin-bottom: 0.75rem;
}
body.luxury-redesign .hero-interior .hero-intro { font-size: 1.2rem; }
body.luxury-redesign .hero-interior .breadcrumb { margin-bottom: 1.25rem; }
body.luxury-redesign .hero-interior .hero-ornament-v { height: 38px; margin-bottom: 1.1rem; }

/* Phones: image on top, then the words — no tall empty band */
@media (max-width: 780px) {
  body.luxury-redesign .hero-interior {
    min-height: 0; padding: 92px 1.4rem 2.5rem;
  }
  body.luxury-redesign .hero-interior.has-hero-image {
    min-height: 0; padding: 72px 0 2.5rem;
  }
  body.luxury-redesign .hero-interior h1 { font-size: 2.6rem; }
  body.luxury-redesign .hero-interior.has-hero-image::before {
    height: 82vw; min-height: 320px; max-height: 420px;
  }
  .hero-mobile-media { height: 82vw; min-height: 320px; max-height: 420px; }
}

/* ===================================================================
   v4.7 — LARGER PULL-QUOTE TYPE
   The About story quote and the Offerings signature line are display
   copy, not captions; both were reading smaller than the body text
   around them. Also stops the About-page quote from riding up over
   the paragraph above it — the panel is 97% opaque, so the covered
   line showed through as a ghost.
   =================================================================== */
body.luxury-redesign .about-quote p {
  font-size: clamp(1.5rem, 1.9vw, 1.75rem);
  line-height: 1.65;
}
body.luxury-redesign .about-quote cite { font-size: 14px; }
body.luxury-redesign .about-quote::before { font-size: 9rem; }

body.luxury-redesign .offerings-signature p {
  font-size: clamp(1.35rem, 1.7vw, 1.55rem);
  line-height: 1.75;
}
body.luxury-redesign .offerings-signature { padding: 2.4rem 2.8rem; }

/* About page: the quote sits in a text column, so no overlap pull */
body.luxury-redesign.page-template-template-about .about-quote {
  margin: 2.5rem 0 1.75rem;
  background: var(--forest);
}

@media (max-width: 780px) {
  body.luxury-redesign .about-quote p { font-size: 1.35rem; }
  body.luxury-redesign .offerings-signature p { font-size: 1.2rem; }
  body.luxury-redesign .offerings-signature { padding: 1.75rem 1.5rem; }
}

/* ===================================================================
   v4.8 — SITE-WIDE BOOK NOW BUTTON
   A solid gold button in the fixed header, so it is on screen on every
   page at every scroll position. On phones it stays in the header bar
   next to the menu toggle rather than hiding inside the menu.
   =================================================================== */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-left: clamp(0.75rem, 2vw, 1.75rem);
  padding: 0.85rem 1.9rem;
  background: var(--gold);
  color: #16281a;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--gold);
  box-shadow: 0 8px 22px rgba(184, 138, 53, 0.32);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #16281a;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(184, 138, 53, 0.42);
}
.nav-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The nav row is space-between; keep the menu next to the button */
body.luxury-redesign .nav-inner { justify-content: flex-start; }
body.luxury-redesign .nav-links,
body.luxury-redesign .site-nav ul { margin-left: auto; }

@media (max-width: 900px) {
  /* Menu collapses into the drawer; the button stays visible in the bar */
  body.luxury-redesign .nav-links,
  body.luxury-redesign .site-nav ul { margin-left: 0; }
  .nav-cta {
    margin-left: auto; margin-right: 1rem;
    padding: 0.7rem 1.15rem;
    font-size: 11px; letter-spacing: 0.12em;
    min-height: 42px;
  }
}
@media (max-width: 380px) {
  .nav-cta { padding: 0.6rem 0.85rem; font-size: 10px; letter-spacing: 0.08em; }
}

/* ===================================================================
   v5.0 — BOOK NOW EVERYWHERE
   Three buttons per page: the header, the page banner, and a full-width
   band above the footer. All read one destination, so pointing them at
   a scheduling app is a single Customizer change.
   =================================================================== */

/* --- Banner button --- */
body.luxury-redesign .hero-book-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1.9rem;
  padding: 1.05rem 2.6rem;
  background: var(--gold); color: #16281a;
  border: 1px solid var(--gold);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 28px rgba(184, 138, 53, 0.34);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.luxury-redesign .hero-book-btn:hover,
body.luxury-redesign .hero-book-btn:focus-visible {
  background: var(--gold-light); border-color: var(--gold-light); color: #16281a;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(184, 138, 53, 0.44);
}
/* Homepage hero already carries a button, so this one sits beside it */
body.luxury-redesign .hero .hero-book-btn { margin-left: 1rem; }

/* --- Pre-footer band --- */
body.luxury-redesign .book-band {
  background: linear-gradient(135deg, #16281a 0%, var(--forest) 55%, #1d3522 100%);
  border-top: 1px solid rgba(214, 175, 98, 0.3);
  padding: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  text-align: center;
}
body.luxury-redesign .book-band-inner {
  max-width: 780px; margin: 0 auto;
}
body.luxury-redesign .book-band h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  font-weight: 300; color: #fff;
  line-height: 1.2; margin: 0 0 1rem;
}
body.luxury-redesign .book-band h2 em {
  color: var(--gold-light); font-style: italic;
}
body.luxury-redesign .book-band p {
  font-size: 1.15rem; line-height: 1.75;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 auto 2.2rem; max-width: 620px;
}
body.luxury-redesign .book-band-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.25rem 3.4rem;
  background: var(--gold); color: #16281a;
  border: 1px solid var(--gold);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.luxury-redesign .book-band-btn:hover,
body.luxury-redesign .book-band-btn:focus-visible {
  background: var(--gold-light); border-color: var(--gold-light); color: #16281a;
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38);
}

/* --- Service page booking button --- */
body.luxury-redesign .service-book-btn { margin-right: 1rem; }

@media (max-width: 780px) {
  body.luxury-redesign .hero-book-btn {
    width: 100%; margin-top: 1.6rem; margin-left: 0;
    padding: 1.05rem 1.5rem; font-size: 13px;
  }
  body.luxury-redesign .hero .hero-book-btn { margin-left: 0; }
  body.luxury-redesign .book-band { padding: 3rem 1.4rem; }
  body.luxury-redesign .book-band p { font-size: 1.05rem; }
  body.luxury-redesign .book-band-btn { width: 100%; padding: 1.15rem 1.5rem; font-size: 14px; }
  body.luxury-redesign .service-book-btn { margin-right: 0; }
}

/* ===================================================================
   v5.0.1 — "WOMEN - BOOK NOW"
   The label is twice as long as before, so the header pill wraps to two
   centred lines rather than crowding the menu on narrow screens.
   =================================================================== */
.nav-cta {
  white-space: normal; text-align: center; line-height: 1.2;
  letter-spacing: 0.12em;
  padding: 0.7rem 1.5rem;
}
@media (max-width: 1250px) {
  body.luxury-redesign .nav-links,
  body.luxury-redesign .site-nav ul { gap: clamp(0.7rem, 1.5vw, 1.4rem); }
  .nav-cta { font-size: 12px; padding: 0.65rem 1.15rem; max-width: 150px; }
}
@media (max-width: 900px) {
  .nav-cta {
    max-width: 132px; padding: 0.55rem 0.85rem;
    font-size: 10.5px; letter-spacing: 0.08em; line-height: 1.25;
  }
}
@media (max-width: 380px) {
  .nav-cta { max-width: 112px; padding: 0.5rem 0.6rem; font-size: 9.5px; letter-spacing: 0.05em; }
}

/* The banner and band buttons have room, so they stay on one line */
body.luxury-redesign .hero-book-btn,
body.luxury-redesign .book-band-btn { white-space: nowrap; }
@media (max-width: 420px) {
  body.luxury-redesign .hero-book-btn { font-size: 12px; letter-spacing: 0.1em; }
  body.luxury-redesign .book-band-btn { font-size: 12.5px; letter-spacing: 0.11em; padding: 1.1rem 1rem; }
}

/* ===================================================================
   v5.1 — BOOKING PAGE
   The scheduler sits in a framed panel on the cream ground, inside the
   same content column as the rest of the site.
   =================================================================== */
body.luxury-redesign .booking-embed-section { background: var(--cream); }
body.luxury-redesign .booking-embed-section .section-inner { text-align: center; }
body.luxury-redesign .booking-embed {
  background: #fff;
  border: 1px solid rgba(184, 138, 53, 0.3);
  box-shadow: 0 18px 46px rgba(61, 43, 21, 0.1);
  padding: clamp(0.5rem, 1.5vw, 1.25rem);
  margin: 0 auto;
  max-width: 1100px;
  overflow: hidden;
}
body.luxury-redesign .booking-embed iframe {
  display: block; width: 100%; border: 0;
}
body.luxury-redesign .booking-embed-note {
  max-width: 700px; margin: 2.25rem auto 0;
  font-size: 1.05rem; line-height: 1.8; color: var(--text-mid);
}
body.luxury-redesign .booking-embed-note a {
  color: var(--gold-deep, #8a6a20); text-decoration: underline;
}
body.luxury-redesign .booking-embed-empty {
  padding: 4rem 2rem; text-align: center;
  border: 1px dashed rgba(184, 138, 53, 0.5);
  color: var(--text-mid);
}

@media (max-width: 780px) {
  body.luxury-redesign .booking-embed { padding: 0.35rem; }
  body.luxury-redesign .booking-embed-note { font-size: 1rem; }
}

/* ===================================================================
   v5.2 — MOBILE AUDIT FIXES
   Findings from measuring every page at 320/375/390px:
   - the Contact form sat entirely off-screen (fixed in the template,
     which carried an inline two-column grid that outranked the CSS)
   - the menu button was a 34x26 target, collapsing to 3px at 320px
   - buttons, labels and card links sat at 12-13px on phones
   =================================================================== */

/* Menu button: never squeezed, and a full 44px touch target around the
   bars without moving them */
.nav-toggle { flex-shrink: 0; }
.nav-toggle::after {
  content: ''; position: absolute;
  top: -11px; right: -8px; bottom: -11px; left: -8px;
}

/* The contact grid stacks from the CSS now, so keep its desktop gap here */
.contact-grid { gap: 3rem; }

@media (max-width: 780px) {
  /* --- Readable type --- */
  body.luxury-redesign .section-label,
  body.luxury-redesign .hero-tag { font-size: 14px; letter-spacing: 0.16em; }
  body.luxury-redesign .btn,
  body.luxury-redesign .btn-gold,
  body.luxury-redesign .btn-dark,
  body.luxury-redesign .btn-primary,
  body.luxury-redesign .btn-outline,
  body.luxury-redesign .connect-button { font-size: 14px; }
  body.luxury-redesign .site-footer p,
  body.luxury-redesign .footer-credit,
  body.luxury-redesign .footer-credit a { font-size: 14px; }
  body.luxury-redesign .box-label,
  body.luxury-redesign .price-block .duration { font-size: 13px; }
  .nav-cta { font-size: 11px; }

  /* --- Tap targets --- */
  body.luxury-redesign .offering-link {
    display: inline-flex; align-items: center;
    min-height: 44px; font-size: 14px;
  }
  body.luxury-redesign .box-more > summary {
    min-height: 44px; display: flex; align-items: center;
    font-size: 14px;
  }
  body.luxury-redesign .contact-facebook-link {
    min-height: 44px; font-size: 14px;
  }

  /* These carry their own more specific rules, so restate them here */
  body.luxury-redesign .offerings-info-box .box-label,
  body.luxury-redesign .why .section-label,
  body.luxury-redesign .testi-author,
  body.luxury-redesign .price-block .duration { font-size: 14px; }
}

/* Contact panels: styling lifted out of inline attributes so the mobile
   rules below can actually reach them */
.contact-panel { background: var(--cream-dark); padding: 3rem; }
.contact-panel--info { border-left: 3px solid var(--gold); }

/* Grid tracks must be allowed to shrink below their content's min-width,
   or a long line (an email address, the form) pushes the column wider
   than the phone and the panel runs off the screen. */
.contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .contact-panel { padding: 1.75rem 1.4rem; }
  body.luxury-redesign .contact-detail,
  body.luxury-redesign .contact-info p { word-break: break-word; }
}

/* Header button: readable rather than shrunk to fit. It wraps to two
   lines beside the menu icon instead of dropping below 12px. */
@media (max-width: 900px) {
  .nav-cta { font-size: 12px; max-width: 128px; padding: 0.5rem 0.7rem; letter-spacing: 0.06em; }
}
@media (max-width: 380px) {
  .nav-cta { font-size: 12px; max-width: 104px; padding: 0.45rem 0.5rem; letter-spacing: 0.02em; }
}

/* Very narrow phones: give the logo and the button breathing room */
@media (max-width: 345px) {
  body.luxury-redesign .site-logo { font-size: 20px; }
  body.luxury-redesign .site-logo span { font-size: 13px; letter-spacing: 0.14em; }
  .nav-cta { max-width: 98px; margin-left: 0.75rem; }
}

/* ===================================================================
   v5.2.1 — MOBILE HERO IMAGE FRAMING
   Phones now frame the hero photo center right, matching how the
   desktop hero crops it, instead of pulling toward the top-centre.
   =================================================================== */
@media (max-width: 780px) {
  .hero-mobile-media img { object-position: center right; }
  body.luxury-redesign .hero-interior.has-hero-image::before {
    background-position: center right;
  }
}

/* ===================================================================
   v5.3 — PRACTICE LOCATION LINE
   Sits under the Book Now button in the banner on the homepage,
   Offerings and About. Sized to be read at a glance, not as fine
   print — it is the answer to "where are you?".
   =================================================================== */
body.luxury-redesign .hero-location {
  display: block;
  margin: 1.6rem 0 0;
  max-width: 640px;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.45vw, 1.35rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.015em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
body.luxury-redesign .hero-location-mark {
  color: var(--gold-light);
  margin-right: 0.5rem;
  font-size: 0.95em;
}

/* Interior banners centre their copy, so centre the line with them */
body.luxury-redesign .hero-interior .hero-location {
  margin-left: auto; margin-right: auto;
}
body.luxury-redesign .hero-interior.has-hero-image .hero-location {
  margin-left: 0; margin-right: 0;
}

@media (max-width: 780px) {
  body.luxury-redesign .hero-location {
    margin-top: 1.25rem;
    font-size: 1.1rem;
    max-width: none;
  }
}