/* ============================================================
   EVARA DESIGN TOKENS, Pass 20
   Confident restraint. Aman Resorts × Stripe aesthetic.
   ============================================================ */

:root {
  /* Easing curves */
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration tokens */
  --dur-instant: 100ms;
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 480ms;
  --dur-leisurely: 800ms;

  /* Shadows (warm undertone) */
  --shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.4);
  --shadow-md: 0 4px 12px rgba(20, 16, 12, 0.5), 0 1px 3px rgba(20, 16, 12, 0.4);
  --shadow-lg: 0 12px 32px rgba(20, 16, 12, 0.55), 0 4px 8px rgba(20, 16, 12, 0.4);
  --shadow-xl: 0 24px 64px rgba(20, 16, 12, 0.6), 0 8px 16px rgba(20, 16, 12, 0.4);

  /* Gold palette */
  --gold-primary: #E5BF73;
  --gold-hover: #F0CD8A;
  --gold-pressed: #D4AD60;
  --gold-soft: rgba(229, 191, 115, 0.12);

  /* Semantic colors */
  --success: #6FA88B;
  --warning: #D4A565;
  --error: #C97A7A;
  --info: #7AA0C9;

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Tap highlight */
  -webkit-tap-highlight-color: rgba(229, 191, 115, 0.2);
}

/* Font rendering + mobile overscroll */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overscroll-behavior-y removed, caused scroll rejection on Safari */
}

/* Mobile overflow guard, prevent inline grid/flex from breaking viewport */
@media (max-width: 767px) {
  body > div, main, article, section, .page-content {
    overflow-x: clip;
    max-width: 100vw;
  }
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    overflow-x: clip;
  }
  [style*="display:grid"][style*="gap:110px"],
  [style*="display:grid"][style*="gap:80px"],
  [style*="display:grid"][style*="gap:60px"] {
    gap: 32px !important;
    grid-template-columns: 1fr !important;
  }
}

/* Safe area insets (notch / home bar) */
@supports (padding: env(safe-area-inset-bottom)) {
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
  .safe-top { padding-top: env(safe-area-inset-top); }
  footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* Guard hover-only styles on touch devices */
@media (hover: hover) {
  .card-lift:hover {
    transform: translateY(-2px);
  }
}
@media (hover: none) {
  .card-lift:hover {
    transform: none;
  }
}

/* Prevent iOS zoom on input focus (font-size >= 16px) */
@media (pointer: coarse) {
  input, select, textarea {
    font-size: 16px;
  }
}

/* Scroll: auto to preserve iOS touch-flick momentum (smooth via JS for anchor clicks) */
html {
  scroll-behavior: auto;
}

/* Touch targets, minimum 44x44 (Apple HIG) */
@media (pointer: coarse) {
  a, button, [role="button"], input, select, textarea {
    min-height: 44px;
  }
}

/* Tabular numbers for stats */
.stat-num, .snum, .pnum, [data-n], [data-count] {
  font-variant-numeric: tabular-nums;
}

/* Logo theme switching, ensures only one logo shows per theme */
.logo-for-dark, .logo-for-light { display: none; }
html[data-theme="dark"] .logo-for-dark { display: block; }
html[data-theme="light"] .logo-for-light { display: block; }
html[data-theme="light"] .logo-for-light {
  filter: brightness(0) sepia(1) hue-rotate(230deg) saturate(5) brightness(0.15);
}

/* === Pass 25 Components === */

/* Heritage band (footer) */
.heritage-band {
  background: var(--bg-canvas, #0A0A0F);
  border-top: 1px solid rgba(229,191,115,0.18);
  text-align: center;
  padding: 14px 16px;
}
.heritage-text {
  color: var(--gold-soft, #C7A66E);
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sales final note */
.sales-final-note {
  font-size: 11px;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.04em;
  margin-top: 12px;
  text-align: center;
}
.sales-final-note a {
  color: rgba(255,255,255,0.62);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Testimonials grid */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .testimonials-grid { grid-template-columns: repeat(4, 1fr); }
}
.testimonial-card {
  background: rgba(253,252,248,0.04);
  border: 1px solid rgba(229,191,115,0.18);
  border-radius: 12px;
  padding: 28px 24px;
  transition: transform 280ms var(--ease-out-quart), border-color 280ms ease;
}
@media (hover: hover) {
  .testimonial-card:hover {
    transform: translateY(-2px);
    border-color: rgba(229,191,115,0.42);
  }
}
.testimonial-photo img {
  border-radius: 50%;
  width: 56px;
  height: 56px;
  object-fit: cover;
  margin-bottom: 16px;
}
.testimonial-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(253,252,248,0.92);
  margin: 0 0 16px;
  font-style: italic;
}
.testimonial-footer { display: flex; flex-direction: column; gap: 2px; }
.testimonial-name {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 14px;
  font-style: normal;
  color: var(--gold-primary, #E5BF73);
  letter-spacing: 0.02em;
}
.testimonial-context {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(253,252,248,0.6);
}
.testimonial-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  background: rgba(229,191,115,0.12);
  color: var(--gold-soft, #C7A66E);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  align-self: flex-start;
}

/* How it works */
.how-it-works {
  background: rgba(253,252,248,0.03);
  padding: 80px 24px;
  margin: 0;
}
.how-container { max-width: 1100px; margin: 0 auto; text-align: center; }
.how-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--gold-primary, #E5BF73);
  margin: 0 0 12px;
  font-weight: 500;
}
.how-subtitle {
  color: rgba(253,252,248,0.7);
  font-size: 16px;
  margin: 0 0 48px;
  letter-spacing: 0.02em;
}
.how-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: left;
}
@media (min-width: 768px) {
  .how-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.how-step {
  background: rgba(10,10,15,0.4);
  border: 1px solid rgba(229,191,115,0.18);
  border-radius: 12px;
  padding: 32px 24px;
  transition: border-color 280ms ease, transform 280ms var(--ease-out-quart);
}
@media (hover: hover) {
  .how-step:hover { border-color: rgba(229,191,115,0.5); transform: translateY(-2px); }
}
.how-step-num {
  width: 40px; height: 40px;
  background: var(--gold-primary, #E5BF73);
  color: var(--bg-canvas, #0A0A0F);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 600;
  margin-bottom: 20px;
}
.how-step h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: rgba(253,252,248,0.94);
  margin: 0 0 12px;
  font-weight: 500;
}
.how-step p {
  color: rgba(253,252,248,0.7);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Waitlist */
.waitlist-section {
  background: linear-gradient(180deg, rgba(229,191,115,0.06) 0%, rgba(10,10,15,1) 100%);
  padding: 80px 24px;
  text-align: center;
}
.waitlist-container { max-width: 600px; margin: 0 auto; }
.waitlist-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 5vw, 40px);
  color: var(--gold-primary, #E5BF73);
  margin: 0 0 12px;
  font-weight: 500;
}
.waitlist-subtitle {
  color: rgba(253,252,248,0.78);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 32px;
}
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}
@media (min-width: 540px) {
  .waitlist-form { flex-direction: row; }
}
.waitlist-input {
  flex: 1;
  background: rgba(253,252,248,0.06);
  border: 1px solid rgba(229,191,115,0.3);
  border-radius: 8px;
  padding: 14px 18px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 16px;
  color: white;
  min-height: 48px;
}
.waitlist-input:focus {
  outline: none;
  border-color: var(--gold-primary, #E5BF73);
  box-shadow: 0 0 0 3px rgba(229,191,115,0.15);
}
.waitlist-button {
  background: var(--gold-primary, #E5BF73);
  color: var(--bg-canvas, #0A0A0F);
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
  transition: transform 220ms var(--ease-out-quart);
}
.waitlist-button:hover { transform: scale(1.02); }
.waitlist-button:active { transform: scale(0.97); }
.waitlist-success { color: var(--gold-primary, #E5BF73); margin-top: 20px; font-size: 15px; }
.waitlist-error { color: #f87171; margin-top: 20px; font-size: 14px; }

/* WhatsApp FAB (new) */
.evara-wa-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.24);
  transition: transform 220ms var(--ease-out-quart);
  text-decoration: none;
}
.evara-wa-fab:hover { transform: scale(1.08); }
.evara-wa-fab:active { transform: scale(0.95); }
@supports (padding: env(safe-area-inset-bottom)) {
  .evara-wa-fab { bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .evara-wa-fab { width: 52px; height: 52px; }
}
/* P1-10 fix: on pages with the mobile sticky CTA bar (z 998, ~53px tall),
   lift the FAB clear of it so BOTH stay fully tappable. The class is added
   by assets/whatsapp-button.js when .mobile-sticky-cta exists. Placed after
   the @supports rule above so it wins the cascade at equal+higher specificity. */
@media (max-width: 768px) {
  .evara-wa-fab.evara-wa-fab--lifted {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
}

/* === Pass 26-B: Accessibility === */

/* Skip-to-content link, sr-only pattern (overridden in index.html final block) */

/* Focus-visible ring, all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-primary, #E5BF73);
  outline-offset: 3px;
}

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

/* Contrast fixes, boost low-opacity text for WCAG AA */
.sales-final-note {
  color: rgba(255,255,255,0.62);
}
.testimonial-context {
  color: rgba(253,252,248,0.72);
}
/* Boost muted text for 4.5:1 contrast ratio on dark backgrounds */
.heritage-text {
  color: #B8A67C;
}
.how-subtitle,
.comparison-subtitle,
.comparison-disclaimer {
  color: rgba(253,252,248,0.78);
}
/* Form placeholder contrast */
.fi::placeholder, .ft2::placeholder {
  color: #958CA4;
}

/* Concierge SLA footer badge (Part E) */
.sla-badge {
  text-align: center;
  padding: 10px 16px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gold-primary, #E5BF73);
  border-top: 1px solid rgba(229,191,115,0.1);
}

/* Comparison table (Part D) */
.comparison-section { padding: 80px 24px; background: linear-gradient(180deg, rgba(229,191,115,0.04) 0%, transparent 100%); }
.comparison-container { max-width: 1100px; margin: 0 auto; }
.comparison-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 5vw, 44px); color: var(--gold-primary, #E5BF73); margin: 0 0 12px; text-align: center; font-weight: 500; }
.comparison-subtitle { color: rgba(253,252,248,0.7); font-size: 16px; text-align: center; margin: 0 0 48px; }
.comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table { width: 100%; border-collapse: collapse; min-width: 700px; background: rgba(10,10,15,0.4); border: 1px solid rgba(229,191,115,0.18); border-radius: 12px; overflow: hidden; }
.comparison-table th { background: rgba(229,191,115,0.08); color: rgba(253,252,248,0.92); font-family: 'DM Sans', 'Inter', sans-serif; font-size: 14px; font-weight: 500; padding: 16px 20px; text-align: left; letter-spacing: 0.02em; }
.comparison-table th.evara-col { color: var(--gold-primary, #E5BF73); border-left: 1px solid rgba(229,191,115,0.3); border-right: 1px solid rgba(229,191,115,0.3); background: rgba(229,191,115,0.14); }
.comparison-table td { padding: 14px 20px; border-top: 1px solid rgba(229,191,115,0.08); color: rgba(253,252,248,0.82); font-size: 14px; line-height: 1.5; }
.comparison-table td.evara-col { border-left: 1px solid rgba(229,191,115,0.3); border-right: 1px solid rgba(229,191,115,0.3); background: rgba(229,191,115,0.04); color: rgba(253,252,248,0.94); font-weight: 500; }
.comparison-table tbody tr:hover { background: rgba(253,252,248,0.02); }
.comparison-disclaimer { color: rgba(253,252,248,0.5); font-size: 11px; text-align: center; margin-top: 16px; }
@media (max-width: 720px) {
  .comparison-table-wrap::before { content: "Swipe to compare"; display: block; text-align: center; color: rgba(253,252,248,0.5); font-size: 11px; padding: 8px 0; }
}

/* SLA tag on pricing tiers (Part E) */
.sla-tag { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(253,252,248,0.72); margin-top: 8px; padding: 6px 0; border-top: 1px solid rgba(229,191,115,0.08); }
.sla-tag::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-primary, #E5BF73); flex-shrink: 0; }

/* === V2 DESIGN POLISH === */

/* Gold section divider, elegant editorial line between sections */
.section-divider,
section + section::before {
  display: block;
  content: '';
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold, #C9A96E), transparent);
  margin: 0 auto;
}
section + section::before {
  content: none; /* only use .section-divider explicitly */
}
.section-divider {
  margin: 0 auto;
  opacity: 0.6;
}
.section-divider--wide {
  width: min(200px, 40%);
}
.section-divider--full {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(201,169,110,0.18) 30%, rgba(201,169,110,0.18) 70%, transparent 95%);
  opacity: 1;
}

/* Enhanced card depth, richer shadows on hover */
.gc,
.pkg, .pkg2,
.testimonial-card,
.how-step,
.wc,
.tc,
.ss-card,
.story {
  border: 1px solid rgba(201,169,110,0.06);
  transition: transform 0.4s var(--ease-out-quart, cubic-bezier(0.16,1,0.3,1)),
              box-shadow 0.4s var(--ease-out-quart),
              border-color 0.4s ease,
              background 0.4s ease;
}
@media (hover: hover) {
  .gc:hover,
  .pkg:hover, .pkg2:hover,
  .testimonial-card:hover,
  .how-step:hover,
  .wc:hover,
  .tc:hover,
  .ss-card:hover,
  .story:hover {
    border-color: rgba(201,169,110,0.15);
    box-shadow: 0 8px 32px rgba(7,5,10,0.5), 0 0 0 1px rgba(201,169,110,0.08);
  }
}

/* Featured card glow */
.pkg.feat,
.pkg2.feat {
  border-color: rgba(201,169,110,0.2);
}
@media (hover: hover) {
  .pkg.feat:hover,
  .pkg2.feat:hover {
    border-color: rgba(201,169,110,0.35);
    box-shadow: 0 12px 48px rgba(201,169,110,0.12), 0 0 0 1px rgba(201,169,110,0.15);
  }
}

/* Typography rhythm, editorial spacing */
.h2 + .bt,
.how-title + .how-subtitle,
.comparison-title + .comparison-subtitle,
.waitlist-title + .waitlist-subtitle {
  margin-top: 8px;
}

/* Decorative SVG corner flourish, used on hero, founder, CTA sections */
.flourish-corner {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
  opacity: 0.12;
  z-index: 0;
}
.flourish-corner svg {
  width: 100%;
  height: 100%;
}
.flourish-corner--tl { top: 20px; left: 20px; }
.flourish-corner--tr { top: 20px; right: 20px; transform: scaleX(-1); }
.flourish-corner--bl { bottom: 20px; left: 20px; transform: scaleY(-1); }
.flourish-corner--br { bottom: 20px; right: 20px; transform: scale(-1); }
@media (max-width: 767px) {
  .flourish-corner { display: none; }
}

/* Testimonial cards, quotation mark accent */
.tc::after,
.testimonial-card::after {
  content: none; /* override only if not already set */
}

/* Hero section text shadow for depth */
.htitle {
  text-shadow: 0 2px 40px rgba(7,5,10,0.3);
}

/* Stats band, enhanced number presentation */
.stat-num, .snum {
  text-shadow: 0 0 40px rgba(201,169,110,0.15);
}

/* Button press feedback, micro-interaction */
.bg:active, .ba:active, .bo:active, .nb:active, .fsub:active {
  transition-duration: 80ms;
}

/* Mobile sticky CTA, refined (backdrop-filter removed for iOS scroll perf) */

/* Pricing GST note, subtle emphasis */
.pgst {
  font-style: italic;
}

/* Section heading eyebrow, refined */
.ey::before, .h-ey::before {
  background: linear-gradient(90deg, var(--am-l, #7B4FA6), var(--gold, #C9A96E));
}

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

/* ==========================================================
   LIGHT-MODE CONTRAST FIXES, WCAG AA sitewide sweep
   All hardcoded rgba(253,252,248,...) and gold-on-cream text
   ========================================================== */

/* --- Testimonials --- */
[data-theme="light"] .testimonial-quote {
  color: var(--cream);
}
[data-theme="light"] .testimonial-name {
  color: #6B4F1D;
}
[data-theme="light"] .testimonial-context {
  color: var(--body);
}
[data-theme="light"] .testimonial-badge {
  color: #5C4A20;
  background: rgba(93, 45, 138, 0.08);
}
[data-theme="light"] .testimonial-card {
  background: rgba(93, 45, 138, 0.04);
  border-color: rgba(93, 45, 138, 0.18);
}

/* --- How It Works --- */
[data-theme="light"] .how-title {
  color: #6B4F1D;
}
[data-theme="light"] .how-subtitle {
  color: var(--body);
}
[data-theme="light"] .how-it-works {
  background: rgba(93, 45, 138, 0.03);
}
[data-theme="light"] .how-step {
  background: rgba(250, 246, 237, 0.5);
  border-color: rgba(93, 45, 138, 0.15);
}
[data-theme="light"] .how-step h3 {
  color: var(--cream);
}
[data-theme="light"] .how-step p {
  color: var(--body);
}
[data-theme="light"] .how-step-num {
  color: #fff;
}

/* --- Comparison table --- */
[data-theme="light"] .comparison-title {
  color: #6B4F1D;
}
[data-theme="light"] .comparison-subtitle {
  color: var(--body);
}
[data-theme="light"] .comparison-section {
  background: linear-gradient(180deg, rgba(93,45,138,0.03) 0%, transparent 100%);
}
[data-theme="light"] .comparison-table {
  background: rgba(250, 246, 237, 0.5);
  border-color: rgba(93, 45, 138, 0.15);
}
[data-theme="light"] .comparison-table th {
  color: var(--cream);
  background: rgba(93, 45, 138, 0.06);
}
[data-theme="light"] .comparison-table th.evara-col {
  color: #6B4F1D;
  background: rgba(93, 45, 138, 0.1);
  border-color: rgba(93, 45, 138, 0.2);
}
[data-theme="light"] .comparison-table td {
  color: var(--body);
  border-top-color: rgba(93, 45, 138, 0.08);
}
[data-theme="light"] .comparison-table td.evara-col {
  color: var(--cream);
  background: rgba(93, 45, 138, 0.04);
  border-color: rgba(93, 45, 138, 0.2);
}
[data-theme="light"] .comparison-table tbody tr:hover {
  background: rgba(93, 45, 138, 0.03);
}
[data-theme="light"] .comparison-disclaimer {
  color: var(--muted);
}

/* --- Waitlist --- */
[data-theme="light"] .waitlist-title {
  color: #6B4F1D;
}
[data-theme="light"] .waitlist-subtitle {
  color: var(--body);
}
[data-theme="light"] .waitlist-section {
  background: linear-gradient(180deg, rgba(93,45,138,0.04) 0%, var(--dark) 100%);
}
[data-theme="light"] .waitlist-input {
  background: #fff;
  border-color: rgba(93, 45, 138, 0.2);
  color: var(--cream);
}
[data-theme="light"] .waitlist-button {
  color: #fff;
}
[data-theme="light"] .waitlist-success {
  color: #6B4F1D;
}

/* --- Sales / SLA / Heritage --- */
[data-theme="light"] .sales-final-note {
  color: var(--muted);
}
[data-theme="light"] .sales-final-note a {
  color: var(--body);
}
[data-theme="light"] .sla-tag {
  color: var(--body);
}
[data-theme="light"] .sla-badge {
  color: #6B4F1D;
  border-top-color: rgba(93, 45, 138, 0.1);
}
[data-theme="light"] .heritage-band {
  background: var(--d2);
  border-top-color: rgba(93, 45, 138, 0.12);
}
[data-theme="light"] .heritage-text {
  color: var(--muted);
}

/* --- Gold primary as heading color: too low contrast on light bg --- */
[data-theme="light"] .gold-heading,
[data-theme="light"] [style*="color:var(--gold-primary)"],
[data-theme="light"] [style*="color: var(--gold-primary)"] {
  color: #6B4F1D !important;
}

/* --- Cookie banner light mode --- */
[data-theme="light"] .cc-banner {
  background: #FDFBF7;
  border-color: rgba(93, 45, 138, 0.15);
  color: var(--body);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
[data-theme="light"] .cc-title {
  color: var(--cream);
}
[data-theme="light"] .cc-desc {
  color: var(--body);
}
[data-theme="light"] .cc-toggle-label {
  color: var(--cream);
}
[data-theme="light"] .cc-slider {
  background: var(--d4);
}
[data-theme="light"] .cc-btn--save {
  background: var(--d4);
  color: var(--cream);
}
[data-theme="light"] .cc-btn--reject {
  color: var(--muted);
  border-color: rgba(93, 45, 138, 0.2);
}

/* ==========================================================
   NAV / HEADER RESPONSIVE LAYOUT — MOVED OUT.
   The desktop nav-overflow rules that used to live here (and a near-identical
   duplicate in mobile-fixes.css) were the source of a three-file !important war
   and a mid-width dead zone. They now live in ONE authoritative place:
   assets/site-header.css (loaded last on every page). Do not re-add nav layout
   rules here — edit site-header.css instead.
   ========================================================== */

/* ==========================================================
   THEME TOGGLE CSS, injected via shared design-tokens
   ========================================================== */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: transparent;       /* minimal: no heavy pill */
  border: 1px solid var(--brd);  /* subtle hairline */
  border-radius: 999px;
  padding: 2px;
  margin-left: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 6; /* sit above sibling nav links so the toggle is always clickable */
}
.theme-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  flex: 0 0 30px;
  align-self: center;
  box-sizing: border-box;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.25s, background 0.25s;
  padding: 0;
}
.theme-btn:hover { color: var(--body); }
.theme-btn.active {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  flex: 0 0 30px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(201,169,110,0.20); /* refined gold fill, perfect circle */
  color: var(--gold);
}
.theme-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  transform: scale(0);
}
@media (max-width: 1023px) {
  /* Top-right via flex: margin-left:auto clusters toggle + hamburger on the right,
     no absolute positioning, no overlap with logo. */
  .theme-toggle { position: relative !important; top: auto !important; right: auto !important; margin-left: auto; margin-right: 8px; }
}

/* ==========================================================
   LOGO THEME CONTRAST, ensure visibility in both modes
   ========================================================== */
.logo-for-dark, .logo-for-light { display: none; }
html[data-theme="dark"] .logo-for-dark { display: block; }
html[data-theme="light"] .logo-for-light { display: block; }
html[data-theme="light"] .logo-for-light {
  filter: brightness(0) sepia(1) hue-rotate(230deg) saturate(5) brightness(0.15);
}
/* Text-based logo fallback (when SVG not used) */
html[data-theme="light"] .logo-e {
  color: var(--cream);
}
html[data-theme="light"] .logo-m {
  color: var(--am-l);
}

/* Light-mode scrolled nav background */
[data-theme="light"] nav.s {
  background: rgba(250, 246, 237, 0.97) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Light-mode mobile menu */
[data-theme="light"] .mm {
  background: linear-gradient(135deg, var(--dark), var(--d3));
}

/* Light-mode gold button text */
[data-theme="light"] .bg {
  color: #fff;
}

/* Light-mode scroll progress bar */
[data-theme="light"] #sp {
  background: linear-gradient(90deg, var(--am), var(--am-l), var(--gold), var(--am-ll));
  background-size: 300%;
}

/* Light-mode form inputs */
[data-theme="light"] .fi,
[data-theme="light"] .fs,
[data-theme="light"] .ft2 {
  background: #fff;
  border-color: var(--brdp);
  color: var(--cream);
}

/* Light-mode image brightness */
[data-theme="light"] .story-img,
[data-theme="light"] .ss-img,
[data-theme="light"] .gallery-img,
[data-theme="light"] .fimg,
[data-theme="light"] .about-fimg,
[data-theme="light"] .himg {
  filter: brightness(var(--img-brightness)) saturate(var(--img-sat));
}

/* Light-mode card hover */
[data-theme="light"] .gc:hover,
[data-theme="light"] .pkg2.feat {
  background: var(--d3);
}

/* Light-mode WhatsApp button */
[data-theme="light"] .wa,
[data-theme="light"] .evara-wa-fab {
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.25);
}

/* Light-mode amethyst-fill text safety net */
html[data-theme="light"] .nb:hover,
html[data-theme="light"] .nb:hover span,
html[data-theme="light"] .nb:focus,
html[data-theme="light"] .nb:focus span,
html[data-theme="light"] .fsub,
html[data-theme="light"] .fsub span,
html[data-theme="light"] .ba:hover,
html[data-theme="light"] .ba:hover span,
html[data-theme="light"] .msc-consult {
  color: #FDFCF8 !important;
}

/* Light-mode mobile sticky CTA */
[data-theme="light"] .mobile-sticky-cta {
  background-color: rgba(250, 246, 237, 1);
}

/* Canonical mobile sticky CTA (class fix): the markup ships on 72 pages but the
   styles used to live per-page, and several pages never carried them — leaving
   bare UA-blue links, visible even on desktop. One shared source of truth here. */
@media (max-width: 768px) {
  .mobile-sticky-cta{position:fixed;bottom:0;left:0;right:0;background-color:rgba(7,5,10,1);border-top:1px solid var(--brdp,rgba(61,26,92,0.35));display:flex;z-index:998;transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);padding-bottom:env(safe-area-inset-bottom);}
  .mobile-sticky-cta.msc-visible{transform:translateY(0);}
  .mobile-sticky-cta a{flex:1;padding:16px;text-align:center;text-decoration:none;font-size:13px;letter-spacing:0.05em;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px;}
  .msc-call{color:var(--gold,#C9A96E);border-right:1px solid var(--brdp,rgba(61,26,92,0.35));}
  .msc-call:active{background:rgba(201,169,110,0.1);}
  .msc-consult{color:#FAF7F1;background:var(--am,#3D1A5C);}
  .msc-consult:active{opacity:0.85;}
}
@media (min-width: 769px){.mobile-sticky-cta{display:none!important;}}

/* Prose links (class fix): anchors without a class in body copy used to fall
   back to UA default blue — invisible on the dark canvas. Route through gold. */
main a:not([class]), article a:not([class]) { color: var(--gold-l, #E2C99A); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="light"] main a:not([class]), [data-theme="light"] article a:not([class]) { color: var(--gold-d, #705930); }

/* Luxe page light-mode fixes */
[data-theme="light"] .lx-hero {
  background: linear-gradient(170deg, var(--dark) 0%, var(--d2) 40%, var(--d3) 100%);
}
[data-theme="light"] .lx-eyebrow {
  color: var(--gold-d, #8A6D3B);
}
[data-theme="light"] .lx-h1 {
  color: var(--cream);
}
[data-theme="light"] .lx-sub {
  color: var(--body);
}
[data-theme="light"] .lx-section-dark {
  background: var(--d2);
}
[data-theme="light"] .lx-step-text {
  color: var(--body);
}
[data-theme="light"] .lx-card {
  background: var(--d2);
}
[data-theme="light"] .lx-card:hover {
  background: var(--d3);
}
[data-theme="light"] .lx-card-title {
  color: var(--cream);
}
[data-theme="light"] .lx-card-desc {
  color: var(--body);
}

/* ==========================================================
   STAT-STRIP / TRUST-BAND CONTRAST - WCAG AA fixes (audit 2026-06-13)
   Copy is UNCHANGED; colours only. The lighter light palette
   (#FDFCF8/#FAF7F1/#F3EEE5) left several strip foregrounds below AA.
   ========================================================== */

/* Trust strips (small uppercase on var(--d3)) failed AA in BOTH themes.
   Dark #16121F -> #8D84A0 (~5.2:1). Light #F3EEE5 -> #5C4F6E (~6.5:1). */
.trust-strip { color: #8D84A0 !important; }
.trust-strip span { color: inherit !important; }
[data-theme="light"] .trust-strip { color: #5C4F6E !important; }

/* Light theme: hero eyebrow + stat descriptions used --am-ll (#9B7DBF ~3.36:1). */
[data-theme="light"] .h-ey,
[data-theme="light"] .stat-desc { color: #6E4F94 !important; }

/* Light theme: gold stat NUMBERS read washed (#A8854A 2.97-3.34:1).
   Darker brand gold #8A6D3B (= --gold-d) for confident, AA-clear emphasis. */
[data-theme="light"] .stat-num,
[data-theme="light"] .fact .num,
[data-theme="light"] .f5-heritage-num,
[data-theme="light"] .h2 em,
[data-theme="light"] [style*="font-size:52px"][style*="color:var(--gold)"],
[data-theme="light"] [style*="font-size: 52px"][style*="color:var(--gold)"] { color: #8A6D3B !important; }

/* Light theme: small stat labels below AA (.fact .lbl 4.23:1). */
[data-theme="light"] .fact .lbl { color: #5C4F6E !important; }

/* ============================================================
   READING LEGIBILITY (Pass 11, 2026-06-15)
   One authoritative layer. design-tokens.css loads AFTER every
   page's inline <style> block #1, so these win without !important
   (specificity is matched or raised vs the inline rules).
   Brand display headings (Cormorant Garamond) set their own
   font-weight and are intentionally untouched.
   ============================================================ */

/* Core fix: body was font-weight:300 (thin) sitewide — the main reason
   text reads washed-out / hard to read on Mac Retina. 400 is DM Sans'
   true reading weight. html body (0,0,2) beats inline body (0,0,1). */
html body { font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Reading text: lift the small-screen floor 14->15px, keep a generous
   1.7 rhythm. body p / body li (0,0,2) beat the inline p,li floor;
   more specific hero rules (.ph p) still win and are already >=16px. */
body p, body li,
.bt, .story-quote, .ss-quote, .tt, .fbio, .about-fbio, .std, .wd,
.tp-d, .cdesc, .ftci, .faq-a p, .psub, .pnote, .pgst {
  font-size: clamp(15px, 1.5vw, 16px);
  line-height: 1.7;
}

/* Paragraph spacing: comfortable separation between reading blocks. */
.bt + .bt, .faq-a p + p, .art-body p + p, .about-fbio + .about-fbio { margin-top: 1em; }

/* Form fields were font-weight:300 — 400 so typed + placeholder text is crisp. */
.fi, .fs, .ft2, .ss-input, .ss-input-mob { font-weight: 400; }

/* Small tracked all-caps labels read faint at weight 300/400. 500 makes the
   spaced caps legible while preserving the brand letter-spacing untouched. */
.ey, .h-ey, .fl, .slbl, .stat-lbl, .ptag, .fth, .td, .tf-label, .frole,
.story-meta, .ss-meta { font-weight: 500; }

/* ==========================================================
   CIRCLE BACKSTOP (iOS Safari) — any element meant to be round keeps equal
   axes so it can never render as an oval on iPhone. These already carry
   explicit equal width/height; aspect-ratio is the fallback and flex:0 0 auto
   stops a flex parent from stretching or shrinking the box. (The header theme
   toggle is hardened separately in site-header.css, which loads last.)
   ========================================================== */
.how-step-v2-num, .evara-wa-fab, .wa, .testimonial-photo img {
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.testimonial-photo img { object-fit: cover; }

/* ==========================================================
   SECTION PHOTO BAND — shared editorial image break that adds visual
   rhythm to text-heavy pages (about, packages, communities, services).
   Real wedding/couple imagery, lazy-loaded, CLS-safe (fixed ratio).
   ========================================================== */
.section-photo { display: block; max-width: 940px; margin: clamp(28px,5vw,60px) auto; padding: 0 clamp(20px,5vw,48px); }
.section-photo > picture { display: block; }
.section-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 28%; border: 1px solid var(--brd, rgba(201,169,110,0.12)); box-shadow: 0 24px 60px rgba(10,8,15,0.22); }
[data-theme="light"] .section-photo img { box-shadow: 0 24px 60px rgba(26,13,8,0.14); }
.section-photo figcaption { text-align: center; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #7A7088); margin-top: 12px; }
@media (max-width: 600px) { .section-photo img { aspect-ratio: 4 / 3; } }

/* ============================================================
   FROSTED-GLASS BUTTONS  (layered on the restored warm design)
   The primary (.bg) + secondary (.ba/.bo) CTAs get the same premium
   glass idiom as the portal front door: backdrop blur + saturate,
   a subtle warm tint, a 1px top edge-highlight, and a soft shadow.
   Progressive enhancement: a SOLID fill ships first, glass is added
   only under @supports(backdrop-filter), and it is reverted to solid
   under @supports not(...) and prefers-reduced-transparency: reduce.
   Both -webkit- and unprefixed properties are shipped. Only the
   buttons get glass; nothing else on the warm design changes.
   Loaded after each page's inline .bg/.ba/.bo, so these win by order.
   ============================================================ */
:root {
  --btn-glass-blur: 10px;
  --btn-glass-sat: 1.5;
  /* Primary gold glass (dark): high-tint gold so it reads as frosted
     gold (never a washed-out chip) while near-black ink stays legible. */
  --btn-primary-glass: rgba(201, 169, 110, 0.82);   /* --gold @ .82 */
  --btn-primary-glass-hi: rgba(226, 201, 154, 0.94);/* --gold-l edge  */
  --btn-primary-edge: rgba(255, 245, 224, 0.45);    /* warm top highlight */
  --btn-primary-shadow: 0 10px 30px rgba(201, 169, 110, 0.28), 0 2px 8px rgba(20, 16, 12, 0.45);
  --btn-primary-shadow-hover: 0 16px 42px rgba(201, 169, 110, 0.34), 0 4px 10px rgba(20, 16, 12, 0.45);
  /* Secondary frosted pane (dark): faint warm-light tint + whisper of
     amethyst so the blur reads as real glass; border + highlight edge it. */
  --btn-ghost-glass: rgba(250, 247, 241, 0.07);
  --btn-ghost-edge: rgba(255, 255, 255, 0.16);
  --btn-ghost-shadow: 0 8px 24px rgba(20, 16, 12, 0.40);
}
[data-theme="light"] {
  --btn-primary-glass: rgba(130, 103, 56, 0.92);    /* light --gold-d @ .92 — deep enough for AA white label */
  --btn-primary-glass-hi: rgba(138, 109, 59, 0.96); /* hover stays >= 4.5 with #fff */
  --btn-primary-edge: rgba(255, 252, 245, 0.65);
  --btn-primary-shadow: 0 10px 28px rgba(93, 45, 138, 0.16), 0 2px 8px rgba(93, 45, 138, 0.12);
  --btn-primary-shadow-hover: 0 16px 40px rgba(93, 45, 138, 0.20), 0 4px 10px rgba(93, 45, 138, 0.14);
  --btn-ghost-glass: rgba(255, 253, 248, 0.55);     /* frosted paper */
  --btn-ghost-edge: rgba(255, 255, 255, 0.70);
  --btn-ghost-shadow: 0 8px 22px rgba(93, 45, 138, 0.12);
}

/* Explicit SOLID fallback when backdrop-filter is unsupported. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bg { background: var(--gold); box-shadow: var(--btn-primary-shadow); }
  .ba, .bo { background: var(--am-s); box-shadow: var(--btn-ghost-shadow); }
}

/* GLASS — progressive enhancement (only where backdrop-filter is supported). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bg {
    background: var(--btn-primary-glass);
    border: 1px solid var(--btn-primary-glass-hi);
    -webkit-backdrop-filter: blur(var(--btn-glass-blur)) saturate(var(--btn-glass-sat));
    backdrop-filter: blur(var(--btn-glass-blur)) saturate(var(--btn-glass-sat));
    box-shadow: var(--btn-primary-shadow), inset 0 1px 0 var(--btn-primary-edge);
  }
  .bg:hover {
    background: var(--btn-primary-glass-hi);
    box-shadow: var(--btn-primary-shadow-hover), inset 0 1px 0 var(--btn-primary-edge);
  }
  .ba, .bo {
    background: var(--btn-ghost-glass);
    -webkit-backdrop-filter: blur(var(--btn-glass-blur)) saturate(var(--btn-glass-sat));
    backdrop-filter: blur(var(--btn-glass-blur)) saturate(var(--btn-glass-sat));
    box-shadow: var(--btn-ghost-shadow), inset 0 1px 0 var(--btn-ghost-edge);
  }
}

/* Accessibility: reduced-transparency -> solid, no blur. */
@media (prefers-reduced-transparency: reduce) {
  .bg {
    background: var(--gold);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--btn-primary-shadow);
  }
  .ba, .bo {
    background: var(--am-s);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--btn-ghost-shadow);
  }
}