/* ==========================================================================
   Emerald Connection - Style Guide & Mockup Stylesheet
   ========================================================================== */

/* Design Tokens & Theme Variables */
:root {
  /* Colors - Light Theme Default */
  --color-primary: #1f4832;       /* Deep Forest Emerald Green */
  --color-primary-light: #2d6a4f; /* Sage Emerald */
  --color-primary-xlight: #eef3ef;/* Ultra-soft sage tint */
  --color-accent: #d9a795;        /* Warm Terracotta / Clay Rose */
  --color-accent-dark: #b57170;   /* Muted Dusk Rose */
  --color-accent-light: #f6ebe7;  /* Soft Peach/Clay */
  --color-bg: #f8faf8;            /* Alabaster Sage */
  --color-bg-card: #ffffff;       /* Pure White Card */
  --color-text: #222824;          /* Slate Charcoal */
  --color-text-muted: #5c625e;    /* Muted Slate */
  --color-border: #e2ece5;        /* Soft sage border */
  --color-shadow: rgba(31, 72, 50, 0.05);
  --color-shadow-hover: rgba(31, 72, 50, 0.12);

  /* Fonts */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-4xl: 3.5rem;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  /* Layout */
  --max-width: 1200px;
  --header-height: 80px;

  /* Effects & Transitions */
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 28px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Glassmorphism Defaults */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: 16px;
}

/* Reset and Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header instead of hiding beneath it */
  scroll-padding-top: calc(var(--header-height) + var(--space-sm));
}

/* Screen-reader-only label text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.65;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  overflow-x: hidden;
}

/* Typography Selection Styling */
::selection {
  background-color: var(--color-accent);
  color: var(--color-primary-xlight);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  transition: color var(--transition-normal);
}

h1 {
  font-size: clamp(2rem, 5vw, var(--text-4xl));
}

h2 {
  font-size: clamp(1.75rem, 4vw, var(--text-3xl));
  margin-bottom: var(--space-md);
}

h3 {
  font-size: var(--text-xl);
}

p {
  margin-bottom: var(--space-md);
}

p.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.8;
}

a {
  color: var(--color-primary-light);
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

a:hover {
  color: var(--color-primary);
}

/* Reusable Components & Layout Utility Classes */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

/* Any section that is an anchor target gets extra breathing room up top so
   its heading clears the sticky header after a jump or smooth scroll. */
.section[id] {
  padding-top: calc(var(--space-2xl) + var(--header-height) * 0.5);
  scroll-margin-top: calc(var(--header-height) + var(--space-sm));
}

.section-alt {
  background-color: var(--color-primary-xlight);
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 900px) {
  .grid-cols-2, .grid-cols-3 {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2rem;
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--border-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 10px var(--color-shadow);
}

.btn-primary {
  background-color: var(--color-accent);
  color: #1a1e1b;
}

.btn-primary:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px var(--color-shadow-hover);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-link {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  color: var(--color-primary-light);
  text-transform: none;
  font-weight: 600;
}

.btn-link:hover {
  color: var(--color-primary);
  transform: none;
  box-shadow: none;
}

/* Cards (Glassmorphism & Standard) */
.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--space-lg);
  box-shadow: 0 10px 30px var(--color-shadow);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px var(--color-shadow-hover);
  border-color: var(--color-primary-light);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px var(--color-shadow);
}

/* Header & Navigation */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background: var(--glass-bg);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

/* The frosted effect lives on a pseudo-element rather than the header itself:
   backdrop-filter would make .site-header a containing block for fixed
   descendants, which collapses the fixed mobile menu to the header's height. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  pointer-events: none;
}

.header-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo lockup: vector emblem + live text, so it stays sharp at any density
   and the gap between mark and wordmark is controlled here rather than baked
   into a bitmap. */
.logo-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.logo-mark {
  height: 42px;
  width: 42px;
  flex-shrink: 0;
  display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.logo-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}

.logo-tagline {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-top: 3px;
  white-space: nowrap;
}

.logo-link:hover .logo-name {
  color: var(--color-primary-light);
}

@media (max-width: 600px) {
  .logo-link {
    gap: 10px;
  }
  .logo-mark {
    height: 34px;
    width: 34px;
  }
  .logo-name {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
  }
  .logo-tagline {
    font-size: 0.55rem;
    letter-spacing: 0.12em;
  }
}

/* The wordmark is dark green on transparent; lift it on dark backgrounds */
@media (max-width: 600px) {
  .logo-img {
    height: 32px;
  }
}

.nav-menu {
  display: flex;
  list-style: none;
  align-items: center;
  gap: var(--space-lg);
}

.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
}

.nav-link:hover, .nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

/* ==========================================================================
   Grouped Navigation Submenus
   ========================================================================== */
.has-submenu {
  position: relative;
}

.submenu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  cursor: pointer;
}

.submenu-caret {
  width: 13px;
  height: 13px;
  transition: transform var(--transition-fast);
}

.has-submenu.open .submenu-caret {
  transform: rotate(180deg);
}

.submenu {
  list-style: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 250px;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  box-shadow: 0 12px 32px var(--color-shadow-hover);
  padding: var(--space-xs);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 1200;
}

/* Bridges the gap so the menu doesn't close while the pointer travels to it */
.submenu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.has-submenu.open .submenu,
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.submenu-link {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: var(--border-radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.submenu-link:hover,
.submenu-link:focus-visible {
  background-color: var(--color-primary-xlight);
  color: var(--color-primary);
}

.nav-cta {
  padding: 0.6rem 1.4rem;
  font-size: var(--text-xs);
  box-shadow: none;
}

.nav-cta:hover {
  transform: none;
}

/* Hamburger toggle for mobile */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--color-primary);
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: block;
  }
  
  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    /* Sits above page content and below the header itself */
    z-index: 999;
    background-color: var(--color-bg);
    flex-direction: column;
    /* Items align to the start so each row spans the panel width */
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-xl) var(--space-lg);
    gap: var(--space-md);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
    overflow-y: auto;
    border-top: 1px solid var(--color-border);
  }

  .nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  
  .nav-link {
    font-size: var(--text-md);
  }

  /* Submenus become inline accordions rather than floating dropdowns */
  .nav-menu > li {
    width: 100%;
  }

  .submenu-toggle {
    width: 100%;
    justify-content: space-between;
    font-size: var(--text-md);
  }

  .submenu {
    position: static;
    transform: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0 0 0 var(--space-sm);
    margin-top: var(--space-xs);
    display: none;
  }

  .has-submenu.open .submenu {
    display: block;
    transform: none;
  }

  /* Hover must not open panels on touch; only the explicit toggle does */
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu {
    transform: none;
  }

  .has-submenu:not(.open):hover .submenu,
  .has-submenu:not(.open):focus-within .submenu {
    display: none;
  }

  .submenu-link {
    padding: var(--space-xs) 0;
    font-size: var(--text-base);
  }

  .nav-cta {
    width: 100%;
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
  }
}

/* Hero Section */
.hero {
  position: relative;
  padding: var(--space-3xl) 0 var(--space-2xl);
  overflow: hidden;
}

.hero-content {
  max-width: 800px;
}

.hero h1 {
  margin-bottom: var(--space-md);
  line-height: 1.15;
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-sm);
  display: block;
}

.hero-cta-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

/* Background Organic Shapes */
.shape-blob {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 500px;
  height: 500px;
  background-color: var(--color-primary-xlight);
  filter: blur(80px);
  opacity: 0.6;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  animation: float-blob 12s infinite alternate;
}

@keyframes float-blob {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-30px, 50px) scale(1.15); }
}

/* The blob is purely decorative and sits outside the container bounds; keep it
   from widening the page on narrow screens. */
@media (max-width: 900px) {
  .shape-blob {
    width: 280px;
    height: 280px;
    right: -20%;
  }
}

/* Split content layouts */
.split-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.split-text {
  grid-column: span 7;
}

.split-image {
  grid-column: span 5;
  position: relative;
}

@media (max-width: 900px) {
  /* Collapse to a single column so 12-col children can't force the page wider
     than the viewport (each span-12 child would otherwise keep the full
     desktop track width and cause horizontal overflow). */
  .split-layout {
    grid-template-columns: 1fr;
  }
  .split-text, .split-image {
    grid-column: auto;
  }
  .split-image {
    order: -1; /* Image leads on mobile for content sections */
  }

  /* In the hero the message must land first; the portrait follows it. */
  .hero .split-text {
    order: 0;
  }
  .hero .split-image {
    order: 1;
  }
}

/* Image placeholders */
.photo-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  background-color: var(--color-primary-xlight);
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  border: 1px dashed var(--color-primary-light);
  text-align: center;
  color: var(--color-primary-light);
}

.photo-placeholder svg {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-xs);
  opacity: 0.6;
}

.photo-placeholder span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/* Perfectly YOU Framework Infographic Styling */
.framework-steps {
  margin-top: var(--space-xl);
}

.step-row {
  display: flex;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
}

.step-num {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-accent);
  flex-shrink: 0;
  line-height: 1;
}

.step-body h4 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-2xs);
}

/* Accreditations Footer */
.credentials-row {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.credential-badge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 12px var(--color-shadow);
  transition: transform var(--transition-fast);
  width: 100%;
  max-width: 320px;
}

.credential-badge:hover {
  transform: translateY(-2px);
}

/* Constrain the badge artwork so it can never overflow its card and run
   underneath the accreditation label sitting beside it. */
.credential-badge svg,
.credential-badge img {
  height: 44px;
  width: 44px;
  flex: 0 0 44px;
  object-fit: contain;
}

.credential-text {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: left;
  line-height: 1.45;
  min-width: 0;
  flex: 1 1 auto;
}

/* Testimonials Widget */
.testimonial-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-content {
  font-style: italic;
  margin-bottom: var(--space-md);
}

.testimonial-author {
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.testimonial-stars {
  color: var(--color-accent);
  margin-top: var(--space-2xs);
}

/* FAQs - Details & Summary Accordion */
/* Two balanced columns so a long list reads at a glance instead of as one
   tall stack. Items are laid out as independent cards to avoid an accordion
   opening in one column shifting the other. */
/* Two fixed columns as explicit grid tracks.
   NOTE: this deliberately does NOT use CSS `column-count`. With CSS columns
   the browser rebalances content whenever an answer expands, which moved
   questions between columns mid-read and made them appear to vanish. Each
   column is its own container here, so an item never changes column. */
.faq-list {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: start;
}

.faq-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (max-width: 900px) {
  .faq-list {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 800px;
  }
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) 0;
}

.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-family: var(--font-sans);
  color: var(--color-accent-dark);
  transition: transform var(--transition-fast);
}

.faq-item[open] summary::after {
  content: '−';
}

/* Answers sit on a white card so they read as distinct from the question
   list rather than blending into the section background. */
.faq-content {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 14px var(--color-shadow);
  color: var(--color-text-muted);
}

.faq-content > p:last-child {
  margin-bottom: 0;
}

/* Forms & Inputs */
.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-2xs);
  color: var(--color-text);
}

.form-control {
  width: 100%;
  padding: 0.75rem var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-bg-card);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15);
}

/* Blog layouts */
.blog-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
  display: flex;
  gap: var(--space-sm);
}

.blog-title {
  margin-bottom: var(--space-xs);
  font-size: var(--text-lg);
}

/* Booking Calendar Widget Mockup */
/* Booking funnel: calendar beside the intake form. Without a max-width the
   calendar stretches the full container on desktop and the day cells become
   huge, so the whole funnel is capped and centred. */
.section-inner {
  width: 100%;
}

.unified-booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  max-width: 940px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .unified-booking-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: 480px;
  }
}

.booking-widget {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 8px 30px var(--color-shadow);
}

.booking-header {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: var(--space-md);
  text-align: center;
}

.booking-header h3 {
  color: #ffffff;
  margin-bottom: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: var(--space-md);
  gap: var(--space-2xs);
  text-align: center;
}

.calendar-day-header {
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-bottom: var(--space-xs);
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.calendar-day:hover:not(.empty):not(.disabled) {
  background-color: var(--color-accent-light);
  color: var(--color-primary);
}

.calendar-day.active {
  background-color: var(--color-accent);
  color: #1a1e1b;
  font-weight: 600;
}

.calendar-day.disabled {
  color: var(--color-border);
  cursor: not-allowed;
}

.time-slots {
  padding: 0 var(--space-md) var(--space-md);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}

.time-slot {
  border: 1px solid var(--color-border);
  padding: var(--space-xs);
  text-align: center;
  border-radius: var(--border-radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.time-slot:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-xlight);
}

.time-slot.selected {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

/* Footer layout */
.site-footer {
  background-color: var(--color-primary-xlight);
  padding: var(--space-2xl) 0 var(--space-md);
  border-top: 1px solid var(--color-border);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.footer-columns {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: var(--space-xl);
}

@media (max-width: 900px) {
  .footer-columns {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.footer-brand h4 {
  color: var(--color-primary);
}

.footer-nav {
  list-style: none;
}

.footer-nav li {
  margin-bottom: var(--space-xs);
}

.footer-nav a {
  color: var(--color-text-muted);
}

.footer-nav a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  margin-top: var(--space-xl);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.footer-socials {
  display: flex;
  gap: var(--space-sm);
}

.footer-socials a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.footer-socials a:hover {
  color: var(--color-accent-dark);
}

/* Cookie Policy Banner */
.cookie-banner {
  position: fixed;
  bottom: var(--space-md);
  left: var(--space-md);
  right: var(--space-md);
  max-width: 500px;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--space-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transform: translateY(150%);
  opacity: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.cookie-banner.show {
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.cookie-banner-actions {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
}

.cookie-banner-actions .btn {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
}

/* Back to Top with Scroll Progress */
.back-to-top-container {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 48px;
  height: 48px;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
  transition: visibility var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.back-to-top-container.show {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.back-to-top-btn {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 40px;
  height: 40px;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--color-shadow);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.back-to-top-btn:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

.back-to-top-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.scroll-progress-circle {
  width: 48px;
  height: 48px;
  transform: rotate(-90deg);
}

.scroll-progress-circle circle {
  fill: none;
  stroke-width: 2.5;
}

.scroll-bg {
  stroke: var(--color-border);
}

.scroll-bar {
  stroke: var(--color-accent);
  stroke-dasharray: 138.2; /* 2 * PI * r (r=22) */
  stroke-dashoffset: 138.2;
  transition: stroke-dashoffset 0.1s linear;
}

/* ==========================================================================
   Conversion & Sales Optimizations
   ========================================================================== */

/* Comparative Pain / Pleasure Grid */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.comp-card-pain {
  background-color: var(--color-accent-light);
  border-left: 5px solid var(--color-accent-dark);
  border-radius: var(--border-radius-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 4px 15px rgba(181, 113, 112, 0.05);
}

.comp-card-pleasure {
  background-color: var(--color-primary-xlight);
  border-left: 5px solid var(--color-primary-light);
  border-radius: var(--border-radius-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 4px 15px rgba(45, 106, 79, 0.05);
}

.comp-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.comp-card-pain .comp-title {
  color: var(--color-accent-dark);
}

.comp-card-pleasure .comp-title {
  color: var(--color-primary-light);
}

@media (max-width: 768px) {
  .comp-grid {
    grid-template-columns: 1fr;
  }
}

/* Recommended Offer Card Styling */
.card-recommended {
  border: 2px solid var(--color-accent) !important;
  transform: scale(1.03);
  position: relative;
  box-shadow: 0 15px 35px var(--color-shadow-hover) !important;
}

/* Inside an offer row the 1.03 scale would push this card's pinned button off
   the shared baseline, so emphasise it with elevation instead of scale. Border
   width must match its neighbours or it offsets the button by the difference;
   the badge, accent colour and deeper shadow carry the emphasis. */
.grid > .card-recommended.offer-card {
  transform: none;
  border-width: 1px !important;
}

.card-recommended::before {
  content: "SIGNATURE JOURNEY";
  position: absolute;
  top: -12px;
  right: 24px;
  background-color: var(--color-accent);
  color: #1a1e1b;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: 0.1em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 900px) {
  .card-recommended {
    transform: none;
    margin: var(--space-md) 0;
  }
}

/* Outcome Tag Badges */
.outcome-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary-light);
  background-color: var(--color-primary-xlight);
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: var(--space-2xs);
  border: 1px solid rgba(45, 106, 79, 0.1);
}

/* Floating Action Badge */
.floating-badge {
  position: fixed;
  bottom: var(--space-md);
  left: var(--space-md);
  background-color: var(--color-primary);
  color: #ffffff;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 40px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 1999;
  font-size: var(--text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-fast);
}

.floating-badge:hover {
  transform: translateY(-2px) scale(1.02);
  color: var(--color-accent);
}

@media (max-width: 600px) {
  .floating-badge {
    display: none; /* Hide on mobile to prevent clutter */
  }
}

/* Custom Booking Panel */
.inline-booking-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--space-md);
  box-shadow: 0 8px 24px var(--color-shadow);
}

/* Background image overlay for hero */
/* Flowy Vibe Animations & Layout Additions */

/* Morphing Profile Image Frame */
.profile-flow-frame {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%;
  animation: flowy-morph 8s ease-in-out infinite alternate;
  box-shadow: 0 15px 35px var(--color-shadow);
  border: 2px solid var(--color-accent);
  transition: border-color var(--transition-normal);
}

.profile-flow-frame:hover {
  border-color: var(--color-primary-light);
}

@keyframes flowy-morph {
  0% {
    border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%;
  }
  100% {
    border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
  }
}

/* Wave Section Dividers */
.wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 10;
}

.wave-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 48px;
  fill: var(--color-bg);
  transition: fill var(--transition-normal);
}

/* Wave for section-alt backgrounds */
.wave-divider-alt svg {
  fill: var(--color-primary-xlight);
}

/* Organic Flowy Header Lines */
.flowy-underline {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

.flowy-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,5 Q25,9 50,5 T100,5' fill='none' stroke='%23d9a795' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}

/* Background image overlay for hero using original mountain road */
.hero-bg {
  background-image: linear-gradient(to right, rgba(248, 250, 248, 0.95) 40%, rgba(248, 250, 248, 0.65) 75%, rgba(248, 250, 248, 0.2) 100%), url('mountain-road.jpg');
  background-size: cover;
  background-position: center right 25%;
}

@media (max-width: 900px) {
  .hero-bg {
    background-image: linear-gradient(rgba(248, 250, 248, 0.85), rgba(248, 250, 248, 0.92)), url('mountain-road.jpg') !important;
  }
}

/* Watercolor Card Backgrounds */
.card-bg-frangipane {
  background-image: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)), url('card-frangipane.png') !important;
  background-size: cover;
  background-position: center;
}
.card-bg-orchids {
  background-image: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)), url('card-orchids.png') !important;
  background-size: cover;
  background-position: center;
}
.card-bg-sunflowers {
  background-image: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)), url('card-sunflowers.png') !important;
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   Portrait-Safe Framing
   ========================================================================== */

/* Source portraits are tall (2:3). Squeezing them into a landscape frame with
   object-fit: cover crops the subject's head, so keep the natural ratio and
   bias the crop toward the top where the face sits. */
.profile-flow-frame.portrait-safe {
  aspect-ratio: 3/4;
  object-position: center 15%;
  max-width: 380px;
}

/* ==========================================================================
   Flowy Background Pattern (organic section texture)
   ========================================================================== */
.flowy-pattern-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.flowy-pattern-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 700px auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 400'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-40,90 C110,20 240,170 350,90 C460,10 590,170 740,90' stroke='%232d6a4f' stroke-opacity='0.30' stroke-width='2.5'/%3E%3Cpath d='M-40,170 C110,100 240,250 350,170 C460,90 590,250 740,170' stroke='%23d9a795' stroke-opacity='0.45' stroke-width='2.5'/%3E%3Cpath d='M-40,250 C110,180 240,330 350,250 C460,170 590,330 740,250' stroke='%232d6a4f' stroke-opacity='0.24' stroke-width='2.5'/%3E%3Cpath d='M-40,330 C110,260 240,410 350,330 C460,250 590,410 740,330' stroke='%23d9a795' stroke-opacity='0.36' stroke-width='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Gentle vertical fade at the section edges so the pattern blends into the
   neighbouring sections without washing out the middle of the band. */
.flowy-pattern-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--color-bg) 0%, rgba(248, 250, 248, 0) 18%, rgba(248, 250, 248, 0) 82%, var(--color-bg) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .flowy-pattern-bg::before {
    animation: flowy-drift 40s linear infinite;
  }
}

@keyframes flowy-drift {
  from { background-position: 0 0; }
  to   { background-position: 700px 0; } /* one full tile, so the loop is seamless */
}

/* ==========================================================================
   Click-to-Expand Lightbox
   ========================================================================== */
.zoomable-img {
  cursor: zoom-in;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.zoomable-img:hover {
  transform: scale(1.01);
  box-shadow: 0 16px 40px var(--color-shadow-hover);
}

.zoomable-img:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.zoom-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background-color: rgba(13, 17, 14, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.lightbox-overlay.show {
  opacity: 1;
  visibility: visible;
}

.lightbox-img {
  max-width: min(1100px, 95vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--border-radius-md);
  background-color: #ffffff;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform var(--transition-normal);
}

.lightbox-overlay.show .lightbox-img {
  transform: scale(1);
}

.lightbox-caption {
  color: #ebf0ec;
  font-size: var(--text-sm);
  text-align: center;
  max-width: 620px;
  margin-bottom: 0;
}

.lightbox-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.lightbox-close:hover {
  background-color: var(--color-accent);
  color: #1a1e1b;
  transform: rotate(90deg);
}

.lightbox-close svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   Multi-Currency Pricing Display
   ========================================================================== */
.price-primary {
  font-weight: 700;
  color: var(--color-accent-dark);
  font-size: var(--text-md);
  margin-bottom: 2px;
}

.price-converted {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-2xs);
}

/* Populated by the currency selector; stays out of the flow until it has text */
.price-converted:empty {
  display: none;
}

.price-converted .currency-sep {
  opacity: 0.5;
  margin: 0 4px;
}

.price-note {
  display: block;
  font-size: 0.68rem;
  color: var(--color-text-muted);
  opacity: 0.85;
  font-style: italic;
  margin-top: 2px;
}

/* ==========================================================================
   Service Offering Blocks
   ========================================================================== */
.service-block {
  margin-bottom: var(--space-2xl);
}

.service-block:last-child {
  margin-bottom: 0;
}

.service-category {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-dark);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-accent);
  display: block;
}

/* Offer titles carry the card, so they sit well above the body copy.
   (The old .service-block wrapper was replaced by the tabbed layout, which
   left these headings at the browser default size.) */
.offer-card h4,
.service-block .card h4 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.service-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.service-date {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-light);
  background-color: var(--color-primary-xlight);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: var(--space-sm);
}

.service-lede {
  font-weight: 600;
  color: var(--color-primary);
}

.service-sense {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.service-sense strong {
  color: var(--color-accent-dark);
}

/* ==========================================================================
   Offer Cards: body grows, footer (price + button) pins to the bottom so
   every button in a row lines up regardless of copy length.
   ========================================================================== */
.offer-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  height: 100%;
}

.offer-body {
  flex: 1 1 auto;
}

.offer-foot {
  margin-top: auto;
  padding-top: var(--space-md);
}

.offer-foot .btn {
  width: 100%;
}

/* Grid items must stretch for height:100% on the card to resolve */
.grid > .offer-card {
  align-self: stretch;
}

/* ==========================================================================
   Currency Selector
   ========================================================================== */
.currency-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.currency-select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d6a4f' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 16px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.currency-select:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15);
}

/* ==========================================================================
   Tabbed Offerings (vertical nav on the left, panels on the right)
   ========================================================================== */
.tabs {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.tab-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  position: sticky;
  top: calc(var(--header-height) + var(--space-sm));
}

.tab-btn {
  text-align: left;
  font-family: var(--font-sans);
  background-color: transparent;
  border: 1px solid transparent;
  border-left: 3px solid var(--color-border);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.tab-btn:hover {
  background-color: var(--color-bg-card);
  border-left-color: var(--color-accent);
  color: var(--color-primary);
}

.tab-btn[aria-selected="true"] {
  background-color: var(--color-bg-card);
  border-left-color: var(--color-accent-dark);
  color: var(--color-primary);
  box-shadow: 0 4px 12px var(--color-shadow);
}

.tab-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.tab-btn-title {
  display: block;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
}

.tab-btn-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.tab-panel:focus-visible {
  outline: none;
}

@media (max-width: 900px) {
  /* Stack the nav above the panels; scroll it horizontally on narrow screens */
  .tabs {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .tab-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-2xs);
    padding-bottom: var(--space-2xs);
  }

  .tab-btn {
    flex: 1 0 auto;
    border-left: none;
    border-bottom: 3px solid var(--color-border);
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    padding: var(--space-xs) var(--space-sm);
  }

  .tab-btn:hover {
    border-left-color: transparent;
    border-bottom-color: var(--color-accent);
  }

  .tab-btn[aria-selected="true"] {
    border-left-color: transparent;
    border-bottom-color: var(--color-accent-dark);
  }

  .tab-btn-sub {
    display: none;
  }
}

/* ==========================================================================
   Testimonial Slider (one testimonial per slide)
   ========================================================================== */
.slider {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.slider-viewport {
  overflow: hidden;
  border-radius: var(--border-radius-md);
  /* Allows the viewport to shrink inside a height-constrained section */
  min-height: 0;
}

/* ==========================================================================
   Client Appreciation: fits the viewport, with the quote itself scrolling
   if a testimonial runs long rather than pushing the section taller.
   ========================================================================== */
#testimonials {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Override the generous default anchor padding; the flex centring below
     already keeps the heading clear of the sticky header. */
  padding-top: calc(var(--header-height) + var(--space-md));
  padding-bottom: var(--space-lg);
}

/* Tighter intro block so heading + disclaimer + slider fit one screen */
#testimonials .testimonial-intro {
  margin-bottom: var(--space-md);
}

#testimonials .testimonial-intro h2 {
  margin-bottom: var(--space-xs);
}

#testimonials .testimonial-intro .lead {
  margin-bottom: var(--space-xs);
}

#testimonials .testimonial-disclaimer {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
}

#testimonials .slider-controls {
  margin-top: var(--space-md);
}

/* CTA rides alongside the arrows so it costs no extra vertical space */
.slider-cta {
  padding: 0.6rem 1.4rem;
  font-size: var(--text-xs);
  margin-left: var(--space-xs);
}

@media (max-width: 600px) {
  .slider-cta {
    margin-left: 0;
    width: 100%;
    order: 3;
  }
}

#testimonials > .container {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

#testimonials .slider-track {
  align-items: stretch;
}

#testimonials .testimonial-slide {
  /* Cap the card so the whole section stays within one screen. The vh unit
     keeps this proportional on shorter laptops where a fixed cap overflows. */
  height: min(56vh, 560px);
  max-height: min(56vh, 560px);
}

#testimonials .testimonial-body {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  /* Subtle scrollbar so long quotes stay readable without dominating */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

#testimonials .testimonial-body::-webkit-scrollbar {
  width: 6px;
}

#testimonials .testimonial-body::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 3px;
}

/* On shorter screens the intro is the block that pushes the section past one
   viewport, so tighten it there rather than squeezing the testimonial. */
@media (max-height: 1000px) {
  #testimonials {
    padding-top: calc(var(--header-height) + var(--space-xs));
  }
  #testimonials .testimonial-intro .lead {
    font-size: var(--text-base);
  }
  #testimonials .testimonial-disclaimer {
    font-size: 0.7rem;
    line-height: 1.5;
  }
  #testimonials .testimonial-slide {
    height: min(46vh, 470px);
    max-height: min(46vh, 470px);
  }
}

/* Very short viewports: let the section grow rather than squash the card */
@media (max-height: 700px) {
  #testimonials {
    min-height: 0;
  }
  #testimonials .testimonial-slide {
    height: auto;
    max-height: none;
  }
}

.slider-track {
  display: flex;
  transition: transform var(--transition-slow);
  will-change: transform;
}

.slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 4px;
}

.testimonial-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: var(--space-xl);
  background-image: linear-gradient(160deg, var(--color-primary-xlight) 0%, var(--color-bg-card) 42%);
}

/* The card lifts on hover; without this the slide viewport clipped the top
   edge and the quote glyph sitting above it. */
.testimonial-slide:hover {
  transform: none;
}

/* Oversized closing quote as a soft flourish. It sits on the right, so it is
   a closing mark (”) — an opening mark would read backwards there. */
.quote-mark {
  position: absolute;
  top: 10px;
  right: 22px;
  font-family: var(--font-serif);
  font-size: 7rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
}

.testimonial-slide .testimonial-stars {
  color: var(--color-accent);
  letter-spacing: 0.2em;
  font-size: var(--text-lg);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.testimonial-slide h4 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

.testimonial-body {
  position: relative;
  z-index: 1;
}

.testimonial-slide p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.75;
}

/* Attribution row: initial badge + name and location */
.testimonial-attrib {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.testimonial-avatar {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px var(--color-shadow);
}

.testimonial-who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.testimonial-name {
  font-style: normal;
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.testimonial-place {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.testimonial-disclaimer {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  background-color: var(--color-accent-light);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  margin-top: var(--space-md);
}

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.slider-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-card);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--color-shadow);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.slider-btn:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

.slider-btn svg {
  width: 20px;
  height: 20px;
}

.slider-dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 340px;
}

.slider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background-color: var(--color-border);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.slider-dot:hover {
  background-color: var(--color-accent);
}

.slider-dot.active {
  background-color: var(--color-accent-dark);
  transform: scale(1.35);
}

/* ==========================================================================
   FAQ & Invitation List Extras
   ========================================================================== */
.faq-steps {
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
}

.faq-steps li {
  margin-bottom: var(--space-xs);
}

.faq-cta-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.faq-cta-row .btn {
  font-size: var(--text-xs);
  padding: 0.6rem 1.1rem;
}

.mt-xs { margin-top: var(--space-xs); }

/* ==========================================================================
   Closing Invitation: copy on the left, "what the call looks like" on right
   ========================================================================== */
.closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  max-width: 1080px;
}

@media (max-width: 900px) {
  .closing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: 640px;
  }
}

.closing-card-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.invite-list {
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
}

.invite-list li {
  margin-bottom: var(--space-xs);
}