/* ============================================================
   Calmyra · Pastel Light Green Wellness Overrides
   Loaded last to enforce a unified premium light theme across
   every page, navbar, hero, sections, cards, and footer.
   ============================================================ */

/* ─── 1. PAGE BASE ──────────────────────────────────────── */
html, body {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

body {
  background-image:
    radial-gradient(circle at 8% 6%, rgba(94, 134, 118, 0.10) 0%, transparent 38%),
    radial-gradient(circle at 92% 84%, rgba(239, 231, 218, 0.45) 0%, transparent 50%),
    linear-gradient(180deg, var(--cream) 0%, var(--off-white) 100%) !important;
  background-attachment: fixed !important;
  font-family: var(--font-body);
}

/* Make sure default heading & paragraph text are visible on white */
h1, h2, h3, h4, h5, h6 { color: var(--ink-dark) !important; }
h1 em, h2 em, h3 em, h4 em { color: var(--mint-700) !important; }
p, li, dd, dt, span, blockquote { color: var(--ink-soft); }
.muted, .text-secondary, .subtle { color: var(--ink-mute) !important; }

/* ─── 2. NAVBAR — Light glass with pastel green ─────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(253, 251, 247, 0.85) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(94, 134, 118, 0.18) !important;
  box-shadow: 0 1px 0 rgba(31, 42, 37, 0.02);
  transition: background var(--dur-mid) var(--ease-flow),
              box-shadow var(--dur-mid) var(--ease-flow);
}

#navbar.scrolled {
  background: rgba(253, 251, 247, 0.96) !important;
  box-shadow: 0 8px 28px rgba(31, 42, 37, 0.06);
  border-bottom-color: rgba(94, 134, 118, 0.24) !important;
}

.nav-container { height: 88px; max-width: 1200px; }
.nav-brand img { height: clamp(40px, 6vw, 48px) !important; max-height: 48px !important; }

.nav-menu a,
.nav-menu .nav-link,
.nav-mega-btn,
.nav-ns-btn {
  color: var(--ink-dark) !important;
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: color var(--dur-fast) var(--ease-flow), background var(--dur-fast) var(--ease-flow);
}

.nav-menu a:hover,
.nav-menu .nav-link:hover,
.nav-mega-btn:hover,
.nav-ns-btn:hover {
  color: var(--sage-teal-dark) !important;
  background: var(--sage-light);
}

.nav-menu a[aria-current="page"],
.nav-menu .nav-link[aria-current="page"] {
  color: var(--warm-gold-dark) !important;
  background: rgba(189, 154, 85, 0.08);
}

.nav-toggle span { background: var(--ink-dark) !important; }

.nav-actions .btn-primary {
  font-size: 0.85rem;
  padding: 11px 22px;
}

/* Mobile nav overlay */
@media (max-width: 900px) {
  .nav-menu {
    position: fixed;
    top: 88px; left: 0; right: 0;
    background: var(--cream) !important;
    border-top: 1px solid var(--mint-100);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 2rem;
    gap: 0.5rem;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-mid) var(--ease-silk), opacity var(--dur-mid) var(--ease-silk);
    box-shadow: 0 16px 32px rgba(31, 42, 37, 0.06);
    z-index: 1001;
  }
  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-menu-primary { flex-direction: column; align-items: flex-start; width: 100%; gap: 0.4rem; }
  .nav-menu-primary a,
  .nav-mega-btn, .nav-ns-btn {
    width: 100%; text-align: left;
    padding: 0.75rem 0.5rem !important;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .nav-actions { width: 100%; margin-top: 1rem; }
  .nav-actions .btn { width: 100%; justify-content: center; }
  .nav-toggle { display: inline-flex !important; }
  /* Dropdowns go full-width on mobile */
  .mega-panel, .ns-dropdown {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--line-soft) !important;
  }
  .ns-dropdown--personas { min-width: 0 !important; }
  .ns-dropdown-cols { grid-template-columns: 1fr; }
  .ns-dropdown-col + .ns-dropdown-col { border-left: none; border-top: 1px solid var(--line-soft); }
  .mega-panel-inner.mega-layout-grouped { padding: 0.75rem 0; }
  .mega-group { margin-bottom: 0.5rem; }
}

/* Mega menu & dropdowns — light pastel cards */
.mega-panel, .ns-dropdown {
  background: var(--white) !important;
  border: 1px solid var(--mint-100) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(31, 42, 37, 0.10) !important;
}

.mega-panel-inner.mega-layout-grouped,
.mega-panel-inner.mega-layout {
  background: transparent !important;
  padding: 1.5rem 1.75rem;
}

.mega-group-title,
.ns-dropdown-heading {
  color: var(--mint-700) !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.mega-group-link,
.ns-dropdown-link,
.mega-l3-set a,
.mega-leaf-link {
  color: var(--ink-soft) !important;
  font-size: 0.93rem;
  padding: 0.55rem 0.85rem !important;
  border-bottom: none !important;
  border-radius: 8px;
  display: block;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.mega-group-link:hover,
.ns-dropdown-link:hover,
.mega-l3-set a:hover,
.mega-leaf-link:hover {
  color: var(--mint-800) !important;
  background: var(--mint-50) !important;
}

.mega-group-link--cta,
.ns-dropdown-link--cta {
  color: var(--warm-gold-dark) !important;
  font-weight: 600;
}

/* ─── Dubai Persona Dropdown — two-column layout ─── */
.ns-dropdown--personas {
  min-width: 540px !important;
  padding: 0 !important;
}
.ns-dropdown--personas .ns-market-header {
  padding: 12px 20px;
  margin-bottom: 0;
  border-radius: 16px 16px 0 0;
}
.ns-dropdown-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ns-dropdown-col {
  padding: 1rem 1.25rem 1.25rem;
}
.ns-dropdown-col + .ns-dropdown-col {
  border-left: 1px solid var(--line-soft);
}
.ns-dropdown-col .ns-dropdown-heading {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.ns-dropdown-col .ns-dropdown-link {
  padding: 0.45rem 0.75rem !important;
}

/* ─── 3. HERO ───────────────────────────────────────────── */
.hero-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(94, 134, 118, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(94, 134, 118, 0.10) 0%, transparent 45%),
    linear-gradient(180deg, var(--mint-50) 0%, var(--cream) 100%) !important;
  padding-top: 110px !important;
  min-height: calc(100vh - 110px);
  position: relative;
  overflow: hidden;
}

.hero-section::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.hero-panel { position: relative; z-index: 1; }

/* Override: premium 60/40 hero layout and visual treatments */
.hero-section .hero-panel {
  display: grid;
  grid-template-columns: 3fr 2fr; /* 60 / 40 split */
  gap: 4rem;
  align-items: center;
  padding: 2.5rem 0 0;
}

.hero-section .hero-copy {
  max-width: 600px; /* narrow measure for readability */
  padding-right: 0.5rem;
}

.hero-section .hero-copy h1 {
  font-size: clamp(3.75rem, 6.2vw, 5.25rem); /* ~60-84px on large screens */
  line-height: 1.02;
  margin-bottom: 1rem;
  font-weight: 400;
  color: var(--ink-dark) !important;
}

.hero-section .hero-text {
  max-width: 600px;
  margin-bottom: 40px; /* increased spacing */
  font-size: 1.075rem;
}

/* subtle entrance animation for hero content */
.hero-section .hero-copy,
.hero-section .hero-visual { opacity: 0; transform: translateY(18px); animation: heroIn 640ms cubic-bezier(.2,.9,.3,1) forwards; }
.hero-section .hero-visual { animation-delay: 120ms; }
.hero-section .hero-copy { animation-delay: 40ms; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* Ensure label/eyebrow retains small uppercase style and spacing */
.hero-section .hero-tag { display:inline-block; margin-bottom: 18px; font-size: 0.95rem; letter-spacing: 0.08em; }

/* Ensure hero actions keep layout on small screens */
@media (max-width: 900px) {
  .hero-section .hero-panel { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero-section .hero-copy h1 { font-size: clamp(2.6rem, 6.6vw, 3.4rem); }
  .hero-section .hero-visual { order: -1; }
}

.hero-copy h1 {
  font-family: var(--font-display);
  color: var(--ink-dark) !important;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hero-text {
  color: var(--ink-soft) !important;
  font-size: 1.075rem;
  line-height: 1.75;
}

.hero-location-line {
  color: var(--mint-700) !important;
  font-weight: 500;
}

.hero-trust-micro {
  color: var(--ink-mute) !important;
}

.hero-trust-strip {
  color: var(--mint-700) !important;
  font-weight: 600;
}

.hero-visual .hero-image,
.hero-stage img {
  border-radius: 28px !important;
  box-shadow: 0 30px 70px rgba(189, 154, 85, 0.18) !important;
  filter: none !important;
}

.hero-ring, .hero-ring-2 {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed var(--mint-300);
  opacity: 0.5;
  pointer-events: none;
}
.hero-ring { width: 105%; height: 105%; top: -2.5%; left: -2.5%; }
.hero-ring-2 { width: 120%; height: 120%; top: -10%; left: -10%; border-color: var(--mint-200); }

.hero-badge {
  color: var(--mint-800) !important;
  background: var(--mint-100) !important;
  border: 1px solid var(--mint-200);
}

/* ─── 4. TRUST BAR ───────────────────────────────────────── */
.trust-bar { background: transparent !important; padding: 1.5rem 0 3rem !important; }
.trust-bar-grid {
  background: linear-gradient(135deg, var(--mint-100) 0%, var(--sage-soft) 100%) !important;
  border: 1px solid rgba(94, 134, 118, 0.28) !important;
  box-shadow: 0 16px 40px rgba(189, 154, 85, 0.10) !important;
  border-radius: 24px !important;
}
.trust-stat-num { color: var(--mint-800) !important; font-family: var(--font-display); }
.trust-stat-label { color: var(--mint-700) !important; }

/* ─── 5. SECTIONS — backgrounds & spacing ────────────────── */
.light-section,
.section-intro,
.section-wellness-intro { background: var(--cream) !important; }

.section-blue {
  background: linear-gradient(180deg, var(--mint-50) 0%, var(--sage-soft) 100%) !important;
}

.section-services { background: var(--off-white) !important; }
/* #testimonials background handled in index.html <style> block */
.section-activate { background: linear-gradient(135deg, var(--mint-700) 0%, var(--mint-500) 100%) !important; }
.section-get-started { background: var(--mint-50) !important; }
.section-faq { background: var(--cream) !important; }
.section-specialized-services,
.section-specialized-reference { background: linear-gradient(180deg, var(--sage-soft) 0%, var(--cream) 100%) !important; }

#cta { background: var(--mint-700) !important; padding: var(--section-y) 0; text-align: center; }
#cta h2, #cta p { color: var(--cream) !important; }
#cta .btn-primary {
  background: var(--cream) !important; color: var(--mint-800) !important; border-color: var(--cream);
}
#cta .btn-primary:hover { background: var(--white) !important; }

/* Trust strip headline & body in light sections */
.section-blue h2, .section-blue h3, .section-blue p, .section-blue strong,
.section-services h2, .section-services h3, .section-services p, .section-services strong,
.section-faq h2, .section-faq h3, .section-faq p,
.section-get-started h2, .section-get-started h3, .section-get-started p,
.section-specialized-services h2, .section-specialized-services h3, .section-specialized-services p,
.section-specialized-reference h2, .section-specialized-reference h3, .section-specialized-reference p {
  color: var(--ink-dark) !important;
}
.section-blue p, .section-services p,
.section-faq p, .section-get-started p,
.section-specialized-services p, .section-specialized-reference p {
  color: var(--ink-soft) !important;
}

/* ─── 6. CARDS (service tile, feature, etc.) ─────────────── */
.service-tile,
.feature-card {
  background: var(--white) !important;
  border: 1px solid var(--mint-100) !important;
  border-radius: 18px !important;
  padding: 1.75rem !important;
  box-shadow: 0 6px 18px rgba(31, 42, 37, 0.04) !important;
  transition: transform var(--dur-mid) var(--ease-silk),
              box-shadow var(--dur-mid) var(--ease-silk),
              border-color var(--dur-mid) var(--ease-silk);
  position: relative;
  overflow: hidden;
}

.service-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--mint-500), var(--mint-300));
  transition: width var(--dur-mid) var(--ease-silk);
}
.service-tile:hover::before { width: 100%; }

.service-tile:hover,
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(189, 154, 85, 0.14) !important;
  border-color: var(--mint-300) !important;
}

.service-tile h3,
.feature-card h3 {
  color: var(--ink-dark) !important;
  font-family: var(--font-display);
  font-weight: 500;
  margin-bottom: 0.85rem;
  display: block;
  font-size: 1.35rem;
}

.service-tile p,
.feature-card p {
  color: var(--ink-soft) !important;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.service-tile a {
  color: var(--mint-700) !important;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.service-tile a:hover { color: var(--mint-800) !important; }

.service-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 960px) {
  .service-tiles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .service-tiles-grid { grid-template-columns: 1fr; }
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.service-intro,
.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.service-intro h2,
.section-header h2 { margin-bottom: 1rem; }
.section-header .eyebrow { justify-content: center; }

/* ─── 7. ABOUT / WELLNESS COLLAGE ──────────────────────── */
.section-wellness-intro {
  background: var(--cream) !important;
  padding-top: 5rem !important;
}
.intro-grid-wellness {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 900px) {
  .intro-grid-wellness { grid-template-columns: 1fr; gap: 2.5rem; }
}
.wellness-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint-700);
  margin-bottom: 1rem;
}
/* Give photo figures an explicit height now that they contain CSS illustration divs, not <img> */
.wellness-photo-primary {
  width: 50%;
  max-width: 228px;
}
.wellness-photo-secondary {
  width: 48%;
  max-width: 232px;
}
.wellness-photo img {
  border-radius: 22px;
  box-shadow: 0 24px 50px rgba(31, 42, 37, 0.10);
}
.wellness-card-dark {
  background: linear-gradient(135deg, var(--mint-700), var(--mint-500)) !important;
  color: var(--cream) !important;
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: 0 12px 28px rgba(44, 53, 49, 0.20);
}
.wellness-card-dark p { color: var(--cream) !important; max-width: none; margin: 0; }

.wellness-photo-badge {
  background: var(--white) !important;
  color: var(--ink-dark) !important;
  border: 1px solid var(--mint-100);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 18px rgba(31, 42, 37, 0.06);
}

/* ─── 8. SPECIALIZED REF CARDS (relationship section) ──── */
.specialized-ref-card {
  background: var(--white) !important;
  border: 1px solid var(--mint-100) !important;
  box-shadow: 0 16px 36px rgba(31, 42, 37, 0.07) !important;
  color: var(--ink-dark) !important;
}
.specialized-ref-card h3 { color: var(--ink-dark) !important; }
.specialized-ref-card p, .specialized-list li { color: var(--ink-soft) !important; }
.specialized-tagline { color: var(--mint-700) !important; font-weight: 500; }
.specialized-chip-row span {
  background: var(--mint-50) !important;
  color: var(--mint-800) !important;
  border: 1px solid var(--mint-200);
}
.specialized-ref-label {
  background: var(--white) !important;
  border: 1px solid var(--mint-200) !important;
  color: var(--ink-dark) !important;
}
.specialized-ref-label.is-active,
.specialized-ref-label[aria-selected="true"] {
  background: var(--mint-600) !important;
  color: var(--white) !important;
  border-color: var(--mint-600) !important;
}
.specialized-cta {
  background: var(--mint-600) !important;
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-block;
  margin-top: 0.5rem;
}
.specialized-cta:hover { background: var(--mint-700) !important; }

/* ─── 9. TESTIMONIALS — styles live in index.html <style> block ── */

/* ─── 10. ACTIVATE BLOCK ───────────────────────────────── */
.section-activate .activate-panel {
  text-align: center; max-width: 720px; margin: 0 auto;
}
.section-activate h2,
.section-activate p { color: var(--cream) !important; }
.section-activate h2 { color: var(--white) !important; }
.section-activate .btn-primary {
  background: var(--cream) !important;
  color: var(--mint-800) !important;
}
.section-activate .btn-primary:hover { background: var(--white) !important; color: var(--mint-800) !important; }

/* ─── 11. GET STARTED FORM ─────────────────────────────── */
.get-started-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 900px) { .get-started-grid { grid-template-columns: 1fr; gap: 2rem; } }

.get-started-form-wrap {
  background: var(--white);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 16px 40px rgba(31, 42, 37, 0.06);
  border: 1px solid var(--mint-100);
}
.get-started-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.gs-field-full { grid-column: 1 / -1; }

.gs-input {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--mint-200);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.95rem;
  color: var(--ink-dark);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.gs-input::placeholder { color: var(--ink-mute); }
.gs-input:focus {
  outline: none;
  border-color: var(--mint-500);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(94, 134, 118, 0.18);
}

.btn-get-started-send {
  width: 100%;
  background: var(--grad-gold);
  color: var(--white);
  border: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform var(--dur-mid), box-shadow var(--dur-mid);
  box-shadow: var(--shadow-gold);
}
.btn-get-started-send:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(189, 154, 85, 0.30); }

.get-started-confidential {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--mint-700);
}

/* ─── 12. FAQ ──────────────────────────────────────────── */
.faq-container { max-width: 820px; margin: 0 auto; }
.faq-heading { text-align: center; margin-bottom: 2.5rem; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--mint-100);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.faq-item:hover { border-color: var(--mint-300); }
.faq-item.is-open { border-color: var(--mint-400); box-shadow: 0 12px 28px rgba(31, 42, 37, 0.06); }
.faq-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.35rem;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.025rem;
  font-weight: 500;
  color: var(--ink-dark);
  text-align: left;
}
.faq-question { color: var(--ink-dark); flex: 1; }
.faq-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mint-100);
  position: relative; flex-shrink: 0;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  background: var(--mint-700);
  transition: transform var(--dur-fast);
}
.faq-icon::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 10px; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-icon { background: var(--mint-600); }
.faq-item.is-open .faq-icon::before, .faq-item.is-open .faq-icon::after { background: var(--cream); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-panel {
  padding: 0 1.35rem 1.25rem;
  color: var(--ink-soft);
}
.faq-panel .faq-answer { color: var(--ink-soft); margin: 0; }

/* ─── 13. FOOTER — Forest pastel ───────────────────────── */
.site-footer {
  background: linear-gradient(180deg, #1c3127 0%, #14241c 100%) !important;
  color: rgba(253, 251, 247, 0.88) !important;
  padding: 3.25rem 0 0 !important;
  margin-top: 3rem;
}

.site-footer .container { max-width: 1140px; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 2.25rem 2.5rem;
  padding-bottom: 2.5rem;
}

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-col-title {
  color: var(--mint-300) !important;
  font-family: var(--font-body);
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 1.1rem;
}

.footer-brand .footer-logo-link {
  background: var(--cream) !important;
  border-radius: 14px;
  padding: 0.5rem 0.75rem;
  display: inline-flex;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.footer-brand .footer-logo-link img {
  height: 56px !important;
  max-height: 56px !important;
  width: auto !important;
}

.footer-tagline {
  color: rgba(253, 251, 247, 0.78) !important;
  line-height: 1.65;
  max-width: 36ch;
  font-size: 0.92rem;
}

.footer-address-label {
  display: inline-block;
  background: var(--mint-700);
  color: var(--cream) !important;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.footer-address,
.footer-brand p {
  color: rgba(253, 251, 247, 0.72) !important;
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0 0 0.6rem;
}

.footer-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
}
.footer-contact-links a {
  color: var(--mint-300) !important;
  font-weight: 500;
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur-fast);
}
.footer-contact-links a:hover { color: var(--cream) !important; text-decoration: underline; }
.footer-contact-icon { flex-shrink: 0; opacity: 0.8; }

.footer-cta {
  display: inline-flex;
  margin: 0.25rem 0 0;
}

/* ── Visit Us: two compact clinic cards below the main grid ── */
.footer-visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(253, 251, 247, 0.10);
}
.footer-visit-card { min-width: 0; }
@media (max-width: 640px) {
  .footer-visit { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ── Emergency helplines: horizontal highlighted strip ── */
.footer-helplines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.75rem;
  background: rgba(201, 90, 90, 0.12);
  border: 1px solid rgba(201, 90, 90, 0.22);
  border-radius: 14px;
}
.footer-helplines-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #E8A5A5;
  flex-shrink: 0;
}
.footer-helpline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-helpline-list li {
  font-size: 0.82rem;
  color: rgba(253, 251, 247, 0.8);
  white-space: nowrap;
}
.footer-helpline-list li span {
  color: var(--cream);
  font-weight: 600;
  margin-left: 4px;
}
@media (max-width: 720px) {
  .footer-helplines { padding: 1rem; }
  .footer-helpline-list { gap: 6px 14px; }
}

.footer-col-list { list-style: none; padding: 0; margin: 0; }
.footer-col-list li { margin-bottom: 0.55rem; }
.footer-col-list a {
  color: rgba(253, 251, 247, 0.72) !important;
  font-size: 0.9rem;
  font-weight: 400;
  transition: color var(--dur-fast);
}
.footer-col-list a:hover { color: var(--mint-300) !important; }
.footer-link-cta { color: var(--mint-300) !important; font-weight: 600 !important; }

.footer-bottom-bar {
  border-top: 1px solid rgba(253, 251, 247, 0.10) !important;
  padding: 1.5rem 0 2rem !important;
  text-align: center;
}
.footer-copyright {
  color: rgba(253, 251, 247, 0.55) !important;
  font-size: 0.8rem;
  line-height: 1.7;
  margin: 0;
}

/* ─── 14. UTILITY ROW: pills, eyebrows, lists ───────────── */
.pill, .pill-blue, .pill-pink, .pill-green, .pill-yellow,
.pill-violet, .pill-peach, .pill-red {
  background: var(--mint-50) !important;
  color: var(--mint-800) !important;
  border: 1px solid var(--mint-200);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-block;
}
.pill-blue   { background: var(--pastel-sky) !important;      color: #2d556a !important; border-color: #c2dde9; }
.pill-pink   { background: var(--pastel-rose) !important;     color: #7d3a4b !important; border-color: #efc8c8; }
.pill-yellow { background: var(--pastel-butter) !important;   color: #6b5b22 !important; border-color: #f0dfa6; }
.pill-violet { background: var(--pastel-lavender) !important; color: #5a4878 !important; border-color: #d4caea; }
.pill-peach  { background: var(--pastel-peach) !important;    color: #6e4a37 !important; border-color: #f0d2b1; }
.pill-red    { background: var(--pastel-blush) !important;    color: #803535 !important; border-color: #f0c7bf; }

/* Generic clean section spacing */
section { padding-top: clamp(4rem, 6vw, 6rem); padding-bottom: clamp(4rem, 6vw, 6rem); }

/* ─── 15. RESPONSIVE TWEAKS ───────────────────────────── */
@media (max-width: 900px) {
  .hero-panel { grid-template-columns: 1fr !important; gap: 2.5rem !important; padding: 2rem 0 4rem !important; min-height: auto !important; }
  .trust-bar-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-brand .footer-logo-link img { height: 48px !important; }
}
@media (max-width: 540px) {
  .hero-actions { flex-direction: column; gap: 0.75rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .get-started-fields { grid-template-columns: 1fr; }
  .service-tiles-grid, .feature-grid { grid-template-columns: 1fr; }
}

/* ─── 16. LEGACY DARK OVERRIDES (catch-all) ───────────── */
/* In case any stray dark background was hardcoded in service pages */
[style*="background: #0a"],
[style*="background: #111"],
[style*="background:#0a"],
[style*="background:#111"] { background: var(--cream) !important; }

.dark-section, .mid-section { color: var(--ink) !important; }
.dark-section h1, .dark-section h2, .dark-section h3,
.mid-section h1, .mid-section h2, .mid-section h3 { color: var(--ink-dark) !important; }
.dark-section p, .mid-section p { color: var(--ink-soft) !important; }

/* Ensure all links are visible */
a { color: var(--mint-700); }
a:hover { color: var(--mint-800); }
.site-footer a:not(.footer-logo-link) { color: rgba(253, 251, 247, 0.72); }
.site-footer a:not(.footer-logo-link):hover { color: var(--mint-300) !important; }

/* ─── 17. NEUTRALIZE LEGACY DARK-THEME OVERRIDES (in styles.css end) ─── */

/* Get Started — headline & body must be dark on light pastel */
.get-started-copy h2,
.get-started-headline-text,
.get-started-headline { color: var(--ink-dark) !important; }
.get-started-body,
.get-started-copy p { color: var(--ink-soft) !important; }
.get-started-form-wrap,
.get-started-form {
  background: var(--white) !important;
  border: 1px solid var(--mint-100) !important;
  box-shadow: 0 16px 40px rgba(31, 42, 37, 0.06) !important;
  padding: 2rem !important;
}
.gs-input,
.gs-select {
  background: var(--cream) !important;
  border: 1px solid var(--mint-200) !important;
  color: var(--ink-dark) !important;
  font-size: 16px !important;
}
.gs-input::placeholder { color: var(--ink-mute) !important; }
.gs-input:focus,
.gs-select:focus {
  border-color: var(--mint-500) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 4px rgba(94, 134, 118, 0.18) !important;
}
.get-started-confidential { color: var(--mint-700) !important; font-size: 0.85rem !important; }

/* FAQ — light theme overrides */
.section-faq { background: var(--cream) !important; }
.faq-item {
  background: var(--white) !important;
  border: 1px solid var(--mint-100) !important;
}
.faq-item.is-open,
.faq-item:hover { border-color: var(--mint-400) !important; }
.faq-trigger,
.faq-question { color: var(--ink-dark) !important; }
.faq-item.is-open .faq-trigger,
.faq-item.is-open .faq-question { color: var(--ink-dark) !important; }
.faq-item.is-open { background: var(--mint-50) !important; }
.faq-answer,
.faq-panel p { color: var(--ink-soft) !important; font-size: 0.95rem !important; }

/* Footer — neutralize the dark-theme footer rules at end of styles.css */
.site-footer .footer-tagline {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  color: rgba(253, 251, 247, 0.78) !important;
  background: none !important;
  -webkit-text-fill-color: rgba(253, 251, 247, 0.78) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  line-height: 1.65;
}
.site-footer .footer-col-title {
  color: var(--mint-300) !important;
  font-size: 0.78rem !important;
  font-family: var(--font-body) !important;
}
.site-footer .footer-col-list a,
.site-footer .footer-address,
.site-footer .footer-contact-links a,
.site-footer .footer-brand p {
  color: rgba(253, 251, 247, 0.75) !important;
  font-size: 0.9rem !important;
}
.site-footer .footer-col-list a:hover,
.site-footer .footer-contact-links a:hover { color: var(--mint-300) !important; }
.site-footer .footer-address-label {
  color: var(--cream) !important;
  background: var(--mint-700) !important;
}
.site-footer .footer-copyright,
.site-footer .footer-copyright--wide {
  color: rgba(253, 251, 247, 0.55) !important;
  font-size: 0.8rem !important;
}
.site-footer .footer-helpline-list {
  color: rgba(253, 251, 247, 0.70) !important;
  font-size: 0.85rem !important;
}

/* Buttons — re-establish the pastel green identity */
.btn-primary,
.btn-get-started-send,
.btn-activate,
.btn-know-more,
.specialized-cta {
  background: var(--color-btn-primary-bg) !important;
  color: var(--color-btn-primary-text) !important;
  border: none !important;
  box-shadow: 0 8px 22px -8px rgba(104, 96, 44, 0.45) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.btn-primary:hover,
.btn-get-started-send:hover,
.btn-activate:hover,
.btn-know-more:hover,
.specialized-cta:hover {
  background: var(--olive-gold-dark) !important;
  box-shadow: 0 12px 32px -10px rgba(104, 96, 44, 0.55) !important;
  transform: translateY(-2px);
  color: var(--color-btn-primary-text) !important;
}

.btn-secondary {
  background: var(--color-btn-secondary-bg) !important;
  color: var(--color-btn-secondary-text) !important;
  border: 1.5px solid var(--color-btn-secondary-border) !important;
  box-shadow: none !important;
}
.btn-secondary:hover {
  border-color: var(--olive-gold-dark) !important;
  color: var(--olive-gold-dark) !important;
  background: var(--color-bg-sage-tint) !important;
}

/* Specialized reference labels (visible) */
.section-specialized-reference .specialized-ref-label {
  background: var(--white) !important;
  color: var(--ink-dark) !important;
  border: 1px solid var(--mint-300) !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(31, 42, 37, 0.04);
}
.section-specialized-reference .specialized-ref-label.is-active,
.section-specialized-reference .specialized-ref-label[aria-selected="true"] {
  background: var(--mint-600) !important;
  color: var(--white) !important;
  border-color: var(--mint-600) !important;
}

.section-specialized-reference .specialized-ref-card { background: var(--white) !important; }
.section-specialized-reference .specialized-ref-card h3 { color: var(--ink-dark) !important; }
.section-specialized-reference .specialized-ref-card p,
.section-specialized-reference .specialized-list li { color: var(--ink-soft) !important; }
.section-specialized-reference .specialized-tagline { color: var(--mint-700) !important; }
.section-specialized-reference .specialized-subtitle { color: var(--ink-dark) !important; font-weight: 600; }
.section-specialized-reference .specialized-chip-row span {
  background: var(--mint-50) !important;
  color: var(--mint-800) !important;
  border: 1px solid var(--mint-200) !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 500;
}
.section-specialized-reference .specialized-list li::before { background: var(--mint-500) !important; }

/* Inner service / coaching / legal / team pages — light surface */
body.relationship-service-page,
body.coaching-page,
body.legal-page,
body.assessment-page,
body.team-page,
body.career-page,
body.disorders-page,
body.geriatrics-page,
body.life-crises-page,
body.specific-disorders-page,
body.teen-page,
body.group-therapy-page {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

.couple-hero,
.page-hero {
  background: linear-gradient(180deg, var(--mint-50) 0%, var(--cream) 100%) !important;
  border-bottom: 1px solid var(--mint-100) !important;
  color: var(--ink-dark) !important;
}
.couple-hero h1, .couple-hero h2,
.page-hero h1, .page-hero h2 { color: var(--ink-dark) !important; }
.couple-hero p, .page-hero p { color: var(--ink-soft) !important; }

.coaching-section--alt { background: var(--mint-50) !important; }
.coaching-area-card,
.coaching-cta-band {
  background: var(--white) !important;
  border: 1px solid var(--mint-100) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm);
  border-radius: 18px !important;
}
.coaching-area-card h3, .coaching-area-card h4,
.coaching-cta-band h2, .coaching-cta-band h3 { color: var(--ink-dark) !important; }
.coaching-area-card p, .coaching-cta-band p { color: var(--ink-soft) !important; }

.legal-content h1, .legal-content h2, .legal-content h3 {
  color: var(--ink-dark) !important;
  font-family: var(--font-display);
}
.legal-content p, .legal-content li { color: var(--ink-soft) !important; }
.legal-content { background: var(--cream) !important; padding: 3rem 0; }

/* Section wellness photo wave & bars — visible pastel */
.wellness-video-bar {
  background: var(--mint-100);
  border-radius: 14px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wellness-play {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mint-600);
  position: relative;
  display: inline-block;
}
.wellness-play::after {
  content: '';
  position: absolute;
  left: 53%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 6px solid var(--white);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.wellness-video-wave {
  display: inline-block;
  flex: 1;
  height: 14px;
  background:
    linear-gradient(var(--mint-500), var(--mint-500)) center/100% 2px no-repeat;
}
.wellness-peach-bars span {
  background: var(--pastel-peach);
}

/* Generic chip rows */
.specialized-chip-row--green span {
  background: var(--mint-100) !important;
  color: var(--mint-800) !important;
  border-color: var(--mint-300) !important;
}

/* Activate emoji visibility (just hide if empty) */
.activate-emoji { display: inline-block; }

/* Section: get-started copy column on light bg shouldn't sit on the green gradient */
.section-get-started {
  background: linear-gradient(135deg, var(--mint-50) 0%, var(--sage-soft) 100%) !important;
}
.section-get-started .get-started-copy h2,
.section-get-started .get-started-copy p { color: var(--ink-dark) !important; }
.section-get-started .get-started-body { color: var(--ink-soft) !important; }


/* ─── 18. NEUTRALIZE "SILENT LUXURY" REDEFINITIONS ─── */
/* styles.css line ~3540 redefines :root with gold/sage palette and re-skins
   specialized labels/cards in beige tones. Restore pastel mint green. */

:root {
  --primary:        var(--mint-600) !important;
  --secondary:      var(--sage) !important;
  --accent:         var(--mint-700) !important;
  --background:     var(--cream) !important;
  --alt-background: var(--mint-50) !important;
  --text-primary:   var(--ink) !important;
  --text-secondary: var(--ink-soft) !important;
  --border-radius:  var(--r-lg) !important;
}

/* Nav brand: tame the giant logo */
.nav-brand::before { display: none !important; }
.nav-brand img {
  height: clamp(40px, 6vw, 52px) !important;
  max-height: 52px !important;
  filter: none !important;
}
@media (max-width: 1024px) { .nav-brand img { height: 44px !important; } }
@media (max-width: 768px)  { .nav-brand img { height: 40px !important; } }

/* Specialized reference labels (left rail) */
.section-specialized-reference .specialized-ref-label {
  background: var(--white) !important;
  color: var(--ink-dark) !important;
  border: 1px solid var(--mint-300) !important;
  width: auto !important;
  max-width: 160px !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(31, 42, 37, 0.05) !important;
  transition: all var(--dur-mid) var(--ease-silk) !important;
}
.section-specialized-reference .specialized-ref-label:hover {
  border-color: var(--mint-500) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(189, 154, 85, 0.12) !important;
}
.section-specialized-reference .specialized-ref-label.active,
.section-specialized-reference .specialized-ref-label.is-active,
.section-specialized-reference .specialized-ref-label[aria-selected="true"] {
  background: var(--mint-600) !important;
  color: var(--white) !important;
  border-color: var(--mint-600) !important;
}

/* Specialized reference cards (sticky stack) */
.section-specialized-reference .specialized-ref-card {
  background: var(--white) !important;
  border: 1px solid var(--mint-100) !important;
  border-radius: 18px !important;
  padding: 1.5rem 1.75rem !important;
  box-shadow: 0 16px 36px rgba(31, 42, 37, 0.07) !important;
}
.section-specialized-reference .specialized-ref-card h3 {
  color: var(--ink-dark) !important;
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}
.section-specialized-reference .specialized-ref-card p,
.section-specialized-reference .specialized-list li {
  color: var(--ink-soft) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
}
.section-specialized-reference .specialized-tagline {
  color: var(--mint-700) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  font-style: italic;
}
.section-specialized-reference .specialized-subtitle {
  color: var(--ink-dark) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.section-specialized-reference .specialized-chip-row span {
  background: var(--mint-50) !important;
  color: var(--mint-800) !important;
  border: 1px solid var(--mint-200) !important;
  font-size: 0.78rem !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-weight: 500;
}
.section-specialized-reference .specialized-cta {
  background: var(--grad-gold) !important;
  color: var(--white) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-gold) !important;
  display: inline-block;
  margin-top: 0.5rem;
}
.section-specialized-reference .specialized-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(189, 154, 85, 0.28) !important;
  color: var(--white) !important;
}
.section-specialized-reference {
  background: linear-gradient(180deg, var(--mint-50) 0%, var(--cream) 100%) !important;
}

/* ─── 19. ACTIVATE PANEL — white card on green section ─── */
.section-activate { background: linear-gradient(135deg, var(--mint-700) 0%, var(--mint-500) 100%) !important; }
.section-activate .activate-panel {
  background: var(--white) !important;
  box-shadow: 0 24px 60px rgba(15, 38, 26, 0.18) !important;
  border-radius: 28px !important;
}
.section-activate .activate-panel h2 { color: var(--ink-dark) !important; }
.section-activate .activate-panel p  { color: var(--ink-soft) !important; }
.section-activate .activate-panel .btn-primary,
.section-activate .activate-panel .btn-activate {
  background: var(--grad-gold) !important;
  color: var(--white) !important;
}

/* ─── 20. #cta band — restore proper contrast ─── */
#cta {
  background: linear-gradient(135deg, var(--mint-700) 0%, var(--mint-500) 100%) !important;
  color: var(--cream) !important;
  padding: 4rem 0 !important;
  text-align: center;
}
#cta h2 { color: var(--white) !important; font-family: var(--font-display); }
#cta p  { color: rgba(253, 251, 247, 0.92) !important; }
#cta .btn-primary {
  background: var(--cream) !important;
  color: var(--mint-800) !important;
  border: none !important;
}
#cta .btn-primary:hover { background: var(--white) !important; color: var(--mint-800) !important; }

/* ─── 21. Wellness collage — peach bars & wave ─── */
.wellness-peach-bars { display: flex; gap: 4px; margin-top: 0.5rem; }
.wellness-peach-bars span {
  display: inline-block;
  height: 4px; flex: 1;
  background: var(--pastel-peach) !important;
  border-radius: 999px;
  opacity: 0.85;
}
.wellness-peach-bars span:nth-child(2) { background: var(--pastel-blush) !important; }
.wellness-peach-bars span:nth-child(3) { background: var(--mint-200) !important; }

/* ─── 22. Mega menu image (if used) — soft pastel frame ─── */
.mega-promo {
  background: linear-gradient(145deg, var(--mint-50) 0%, var(--sage-soft) 100%) !important;
  border-radius: 14px;
}
.mega-overline { color: var(--mint-700) !important; }

/* ─── 23. Trust bar safety ─── */
.trust-bar { background: transparent !important; }
.trust-bar-grid { background: linear-gradient(135deg, var(--mint-100) 0%, var(--sage-soft) 100%) !important; }

/* ─── 24. Generic dropdown link visibility on light nav ─── */
.ns-dropdown-link { color: var(--ink-soft) !important; border-bottom: none !important; }
.ns-dropdown-link:hover { color: var(--mint-800) !important; background: var(--mint-50) !important; }
.ns-dropdown-link--cta { color: var(--mint-700) !important; font-weight: 600 !important; }

/* Hide leftover orphan elements that may cause empty boxes */
#coaching:empty, #blog:empty { display: none; }

/* ============================================================
   ─── 25. CALMYRA · UNIFIED HEADER + PREMIUM POLISH (v2)
   Layered on top of existing styles, never replacing them.
   ============================================================ */

/* Header polish — refine the existing fixed #navbar (do NOT make .page-header sticky,
   because on the home page .page-header wraps the entire hero section). */
#navbar { background: rgba(250, 250, 246, 0.78) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-bottom: 1px solid rgba(31, 42, 37, 0.06) !important; transition: background .35s ease, box-shadow .35s ease, border-color .35s ease !important; }
#navbar.scrolled { background: rgba(250, 250, 246, 0.94) !important; box-shadow: 0 1px 0 rgba(31, 42, 37, 0.06), 0 18px 40px -28px rgba(31, 42, 37, 0.18) !important; border-bottom-color: rgba(31, 42, 37, 0.08) !important; }

/* Logo: guaranteed visibility on any background */
.nav-brand img { height: 44px !important; width: auto !important; display: block; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.nav-brand:hover img { transform: translateY(-1px) scale(1.03); }

/* Nav link micro-interaction (underline grow) */
.nav-menu-primary > a,
.nav-mega-btn,
.nav-ns-btn { position: relative; transition: color .25s ease; }
.nav-menu-primary > a::after,
.nav-mega-btn::after,
.nav-ns-btn::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; background: var(--mint-600, #4A6D5F); transform: scaleX(0); transform-origin: center; transition: transform .35s cubic-bezier(.2,.7,.2,1); border-radius: 2px; }
.nav-menu-primary > a:hover::after,
.nav-mega-btn:hover::after,
.nav-ns-btn:hover::after,
.nav-menu-primary > a.is-current::after { transform: scaleX(1); }

/* Premium CTA — refined hover & focus */
.btn.btn-primary { position: relative; isolation: isolate; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease; }
.btn.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -16px rgba(94, 134, 118, 0.5); }
.btn.btn-primary:active { transform: translateY(0); }
.btn.btn-secondary { transition: transform .35s ease, background .35s ease, border-color .35s ease, color .35s ease; }
.btn.btn-secondary:hover { transform: translateY(-2px); background: var(--mint-50, #DFE9E3); border-color: var(--mint-600, #4A6D5F); }

/* Focus rings — accessible + branded */
.btn:focus-visible, .nav-menu a:focus-visible, .nav-mega-btn:focus-visible, .nav-ns-btn:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid var(--mint-600, #4A6D5F);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Scroll-reveal animations (opt-in via .reveal / .reveal-stagger; safe default = no anim) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.55s}

/* Auto-reveal common section headings & cards on inner pages */
.team-hero, .team-hero-inner, .team-credentials, .team-stats,
.assessment-hero-card, .ass-q,
.svc-row, .legal-section, .legal-content > *,
.pf-row, .pf-side, .insight-card, .relationship-hero,
.hero-section .hero-copy, .hero-section .hero-visual,
.section-eyebrow, .section-title, .footer-grid > * { will-change: opacity, transform; }

/* Premium card hover */
.team-card, .insight-card, .new-service-card,
.pf-row, .legal-section,
[class*="-card"]:not([class*="float"]) {
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.team-card:hover, .insight-card:hover, .new-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px -28px rgba(31, 42, 37, 0.32) !important;
}

/* Pastel light-green background tint on body for cohesion */
body { background: var(--cream, #FAFAF6); }

/* Smooth global scroll */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* Responsive: shrink logo + tighten nav at smaller widths to avoid wrap */
@media (max-width: 1100px) {
  .nav-brand img { height: 38px !important; }
  .nav-menu-primary > a, .nav-mega-btn, .nav-ns-btn { padding-left: 12px; padding-right: 12px; }
}

/* Mobile: ensure logo & CTA stay visible, menu becomes drawer */
@media (max-width: 768px) {
  .nav-menu { background: var(--cream, #FAFAF6) !important; }
  .nav-menu.active { padding-top: 32px; }
  .nav-menu-primary > a { font-size: 1.1rem; padding: 14px 18px; }
}

/* Selection styling */
::selection { background: var(--mint-200, #CCDAD4); color: var(--mint-900, #1F2A26); }


/* ============================================================
   ─── 26. HOME · Specialized Services — premium polish
   Enhances the EXISTING approved layout (left buttons + right cards).
   ============================================================ */

/* SECTION shell */
.section-specialized-services {
  position: relative;
  background:
    radial-gradient(70% 60% at 92% 6%, rgba(94, 134, 118, 0.45) 0%, transparent 60%),
    radial-gradient(60% 50% at 4% 96%, rgba(239, 231, 218, 0.55) 0%, transparent 60%),
    var(--cream, #FAFAF6) !important;
  padding: clamp(72px, 9vw, 130px) 0 !important;
  isolation: isolate;
  overflow: clip;  /* overflow: clip preserves nested sticky; overflow: hidden breaks it */
}
.section-specialized-services .ss-blob {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px); z-index: 0;
}
.section-specialized-services .ss-blob--tl { width: 360px; height: 360px; background: rgba(94, 134, 118, 0.55); top: -120px; left: -120px; }
.section-specialized-services .ss-blob--br { width: 420px; height: 420px; background: rgba(201, 160, 160, 0.4); bottom: -160px; right: -160px; }

.section-specialized-services .container { position: relative; z-index: 2; }

/* HEADER */
.section-specialized-services .specialized-services-header {
  max-width: 880px;
  margin: 0 auto clamp(48px, 6vw, 80px) !important;
  text-align: center !important;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.ss-eyebrow {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--mint-700, #4A6D5F);
}
.section-specialized-services .specialized-services-header h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.2rem, 4.8vw, 4rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink, #1F2A26) !important;
  margin: 0 !important;
}
.section-specialized-services .specialized-services-header h2 em {
  font-style: italic;
  color: var(--mint-700, #4A6D5F) !important;
  font-weight: 400;
}
.ss-lede {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  color: var(--ink-soft, #4a5650);
  line-height: 1.6; max-width: 62ch; margin: 0;
}

/* LAYOUT */
.section-specialized-services .specialized-ref-layout {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: clamp(32px, 5vw, 72px) !important;
  align-items: start !important;
}
.section-specialized-services .specialized-ref-spacer { display: none !important; }

/* LEFT ASIDE — sticky on scroll */
.section-specialized-services .specialized-ref-left {
  position: sticky;
  top: 110px;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.section-specialized-services .specialized-ref-label {
  all: unset;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 18px 22px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(31, 42, 37, 0.08) !important;
  border-radius: 18px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink, #1F2A26) !important;
  position: relative;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), background .4s ease, border-color .4s ease, box-shadow .4s ease, color .4s ease;
  overflow: hidden;
}
.section-specialized-services .specialized-ref-label::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--mint-700, #4A6D5F);
  transform: scaleY(0); transform-origin: center;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.section-specialized-services .specialized-ref-label:hover {
  transform: translateX(4px);
  border-color: rgba(94, 134, 118, 0.3);
  box-shadow: 0 18px 36px -22px rgba(31, 42, 37, 0.22);
}
.ss-label-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--mint-700, #4A6D5F);
  min-width: 30px;
  transition: color .4s ease;
}
.ss-label-text { line-height: 1.2; color: inherit; }

.section-specialized-services .specialized-ref-label.is-active,
.section-specialized-services .specialized-ref-label.active,
.section-specialized-services .specialized-ref-label[aria-current="true"],
.section-specialized-services .specialized-ref-label[aria-pressed="true"] {
  background: var(--mint-800, #3A5549) !important;
  border-color: var(--mint-800, #3A5549) !important;
  color: #FFFFFF !important;
  transform: translateX(6px);
  box-shadow: 0 22px 44px -22px rgba(44, 53, 49, 0.55);
}
.section-specialized-services .specialized-ref-label.is-active::before,
.section-specialized-services .specialized-ref-label.active::before,
.section-specialized-services .specialized-ref-label[aria-current="true"]::before,
.section-specialized-services .specialized-ref-label[aria-pressed="true"]::before { transform: scaleY(1); background: var(--mint-200, #CCDAD4); }
.section-specialized-services .specialized-ref-label.is-active .ss-label-text,
.section-specialized-services .specialized-ref-label.active .ss-label-text,
.section-specialized-services .specialized-ref-label[aria-current="true"] .ss-label-text,
.section-specialized-services .specialized-ref-label[aria-pressed="true"] .ss-label-text { color: #FFFFFF !important; }
.section-specialized-services .specialized-ref-label.is-active .ss-label-num,
.section-specialized-services .specialized-ref-label.active .ss-label-num,
.section-specialized-services .specialized-ref-label[aria-current="true"] .ss-label-num,
.section-specialized-services .specialized-ref-label[aria-pressed="true"] .ss-label-num { color: var(--mint-200, #CCDAD4) !important; }

.ss-aside-note {
  margin-top: 8px;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px;
  background: rgba(94, 134, 118, 0.25);
  border: 1px dashed rgba(94, 134, 118, 0.3);
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.5;
  color: var(--mint-800, #3A5549);
}
.ss-aside-note svg { color: var(--mint-700, #4A6D5F); flex-shrink: 0; margin-top: 2px; }
.ss-aside-note span { display: block; }

/* RIGHT CARDS */
.section-specialized-services .specialized-ref-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 36px !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;       /* override original 320vh stack scroll */
  position: static !important;
}

.section-specialized-services .specialized-ref-card {
  position: static !important;     /* kill original sticky card-stack behaviour */
  top: auto !important;
  z-index: auto !important;
  margin-top: 0 !important;
}
.section-specialized-services .specialized-ref-card + .specialized-ref-card { margin-top: 0 !important; }

.section-specialized-services .specialized-ref-card {
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid rgba(31, 42, 37, 0.06) !important;
  border-radius: 28px !important;
  padding: 0 !important;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  box-shadow: 0 1px 0 rgba(31, 42, 37, 0.02);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease, border-color .55s ease;
}
.section-specialized-services .specialized-ref-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 72px -34px rgba(31, 42, 37, 0.3);
  border-color: rgba(94, 134, 118, 0.22);
}

/* MEDIA */
.ss-card-media {
  position: relative;
  aspect-ratio: 21/9;
  overflow: hidden;
  background: var(--sage-light, #DFE9E3);
}
.ss-card-media--sage {
  background: linear-gradient(135deg, #DFE9E3 0%, #C8D8CF 100%);
}
.ss-card-media--champagne {
  background: linear-gradient(135deg, #EFE7DA 0%, #E0D0BE 100%);
}
.ss-card-media--rose {
  background: linear-gradient(135deg, #EDE0E0 0%, #D4C3C3 100%);
}
.ss-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(44,53,49,0) 40%, rgba(44,53,49,0.12));
  pointer-events: none;
}
.ss-card-num {
  position: absolute; top: 22px; left: 28px; z-index: 2;
  font-family: var(--font-display);
  font-style: italic; font-size: 28px;
  color: #FFF; opacity: .9;
  text-shadow: 0 2px 14px rgba(31,42,37,0.45);
}

/* CARD CONTENT */
.ss-card-content {
  padding: clamp(32px, 3.4vw, 48px);
  display: flex; flex-direction: column; gap: 16px;
}
.ss-card-kicker {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mint-700, #4A6D5F);
}
.section-specialized-services .specialized-ref-card h3 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink, #1F2A26) !important;
  margin: 0 !important;
}
.section-specialized-services .specialized-ref-card .specialized-tagline {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem) !important;
  color: var(--mint-700, #4A6D5F) !important;
  margin: 0 !important;
}
.section-specialized-services .specialized-ref-card p {
  font-family: var(--font-body) !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: var(--ink, #1F2A26) !important;
  margin: 0 !important;
}
.section-specialized-services .specialized-ref-card .specialized-subtitle {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--mint-700, #4A6D5F) !important;
  margin: 6px 0 0 !important;
  font-weight: 500 !important;
}

/* CHIPS */
.section-specialized-services .specialized-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}
.section-specialized-services .specialized-chip-row span {
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--mint-800, #3A5549) !important;
  background: rgba(94, 134, 118, 0.32) !important;
  border: 1px solid rgba(94, 134, 118, 0.18) !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  transition: background .3s ease, transform .3s ease;
}
.section-specialized-services .specialized-chip-row span:hover {
  background: rgba(94, 134, 118, 0.5) !important;
  transform: translateY(-1px);
}
.section-specialized-services .specialized-chip-row--green span {
  background: rgba(94, 134, 118, 0.42) !important;
}

/* LIST */
.section-specialized-services .specialized-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  display: grid !important;
  gap: 10px !important;
}
.section-specialized-services .specialized-list li {
  position: relative;
  padding-left: 30px !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--ink, #1F2A26) !important;
  margin: 0 !important;
}
.section-specialized-services .specialized-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0; top: 7px;
  width: 16px; height: 16px;
  background: var(--mint-200, #CCDAD4);
  border: 1.5px solid var(--mint-600, #4A6D5F);
  border-radius: 50%;
  background-image: radial-gradient(circle at 35% 35%, rgba(255,255,255,.7) 0 30%, transparent 32%);
}

/* CTA */
.section-specialized-services .specialized-cta {
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 24px !important;
  margin-top: 12px !important;
  background: var(--mint-700, #4A6D5F) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  border-radius: 999px !important;
  text-decoration: none !important;
  border: none !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.section-specialized-services .specialized-cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--mint-800, #3A5549), var(--mint-700, #4A6D5F));
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  z-index: -1;
}
.section-specialized-services .specialized-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -18px rgba(44, 53, 49, 0.5);
  color: #FFFFFF !important;
}
.section-specialized-services .specialized-cta:hover::before { transform: translateY(0); }
.section-specialized-services .specialized-cta svg {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.section-specialized-services .specialized-cta:hover svg { transform: translateX(4px); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .section-specialized-services .specialized-ref-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .section-specialized-services .specialized-ref-left {
    position: static;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }
  .section-specialized-services .specialized-ref-label {
    flex: 1 1 auto;
    min-width: 220px;
    padding: 14px 18px !important;
  }
  .ss-aside-note { flex: 1 1 100%; }
  .ss-card-media { aspect-ratio: 16/9; }
}
@media (max-width: 720px) {
  .section-specialized-services { padding: 56px 0 72px !important; }
  .section-specialized-services .specialized-ref-right { gap: 24px !important; }
  .ss-card-content { padding: 28px 24px !important; gap: 14px; }
  .section-specialized-services .specialized-ref-label { min-width: 100%; padding: 14px 16px !important; }
  .ss-label-num { font-size: 18px; min-width: 26px; }
  .ss-card-media { aspect-ratio: 4/3; }
  .ss-card-num { font-size: 22px; top: 18px; left: 22px; }
  .section-specialized-services .specialized-ref-card h3 { font-size: 1.6rem !important; }
  .section-specialized-services .specialized-cta { padding: 12px 20px !important; font-size: 13.5px !important; }
}

/* ============================================================
   ─── 27. LOGO visibility boost — header & footer
   ============================================================ */
.nav-brand img {
  height: 72px !important;
  max-height: 72px !important;
  width: auto !important;
  mix-blend-mode: multiply;
}
.nav-brand { display: inline-flex !important; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 12px; transition: background .3s ease; }
.nav-brand:hover { background: rgba(223, 233, 227, 0.40); }
.nav-container { padding-top: 6px; padding-bottom: 6px; }

#navbar.scrolled .nav-brand img {
  height: 62px !important;
  max-height: 62px !important;
  transition: height .35s ease, max-height .35s ease;
}

/* Footer logo */
.site-footer .footer-logo-link img,
.site-footer .nav-brand img {
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
  filter: brightness(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
  margin-bottom: 16px;
}

@media (max-width: 1100px) {
  .nav-brand img { height: 62px !important; max-height: 62px !important; }
}
@media (max-width: 768px) {
  .nav-brand img { height: 52px !important; max-height: 52px !important; }
  #navbar.scrolled .nav-brand img { height: 48px !important; max-height: 48px !important; }
  .site-footer .footer-logo-link img { height: 56px !important; max-height: 56px !important; }
}

/* End ss-section + logo polish */

/* ============================================================
   ─── 28. HERO v2 · editorial premium layout
   ============================================================ */
.hero-v2 {
  position: relative !important;
  padding: clamp(140px, 14vw, 200px) 0 clamp(80px, 8vw, 120px) !important;
  background:
    radial-gradient(60% 50% at 90% 18%, rgba(94, 134, 118, 0.10) 0%, transparent 60%),
    radial-gradient(50% 50% at 6% 92%, rgba(189, 154, 85, 0.06) 0%, transparent 60%),
    var(--cream, #FAF7F1) !important;
  isolation: isolate;
  overflow: clip;
}
.hero-v2 .hero-bg-blob {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px);
  z-index: 0;
}
.hero-v2 .hero-bg-blob--1 { width: 460px; height: 460px; background: rgba(94, 134, 118, 0.58); top: -160px; right: 12%; }
.hero-v2 .hero-bg-blob--2 { width: 380px; height: 380px; background: rgba(201, 160, 160, 0.32); bottom: -120px; left: -120px; }
.hero-v2 .hero-bg-blob--3 { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px); z-index: 0; width: 420px; height: 420px; background: rgba(189, 154, 85, 0.4); top: 30%; right: -80px; }

.hero-v2 .hero-bg-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .035;
  background-image: radial-gradient(rgba(31,42,37,.6) 0.6px, transparent 0.7px); background-size: 4px 4px; }

.hero-v2 .hero-panel-v2 {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: clamp(40px, 6vw, 80px) !important;
  align-items: center !important;
}

/* ── LEFT COPY ── */
.hero-v2 .hero-copy-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(94, 134, 118, 0.22);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--mint-800, #3A5549);
  letter-spacing: 0.01em;
}
.hero-tag em { font-style: normal; color: var(--mint-700, #4A6D5F); font-weight: 600; }
.hero-tag-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint-700, #4A6D5F);
  position: relative;
}
.hero-tag-dot::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: var(--mint-700, #4A6D5F);
  opacity: .35;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: .35; }
  50%     { transform: scale(2.2); opacity: 0; }
}

.hero-title-v2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(3rem, 7.2vw, 6rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink, #1F2A26) !important;
  margin: 0 !important;
}
.hero-title-v2 em {
  font-style: italic;
  color: var(--mint-700, #4A6D5F);
  font-weight: 400;
}
.hero-title-v2 .word-mask {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.05em 0.12em;
  vertical-align: bottom;
  margin-right: 0.15em;
}
.hero-title-v2 .word {
  display: inline-block;
  transform: translateY(110%);
  animation: word-rise 0.9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-title-v2 .word-mask:nth-child(1) .word { animation-delay: .05s; }
.hero-title-v2 .word-mask:nth-child(2) .word { animation-delay: .15s; }
.hero-title-v2 .word-mask:nth-child(3) .word { animation-delay: .25s; }
.hero-title-v2 .hero-underline-wrap .word { animation-delay: .35s; }
@keyframes word-rise { to { transform: translateY(0); } }

.hero-underline-wrap { display: inline-block; position: relative; }
.hero-underline {
  position: absolute;
  left: 6%; right: 6%; bottom: -12px;
  width: 88%; height: 18px;
  color: var(--mint-700, #4A6D5F);
  opacity: 0;
  animation: draw-underline 1.1s cubic-bezier(.2,.7,.2,1) 0.85s forwards;
  stroke-dasharray: 400; stroke-dashoffset: 400;
}
@keyframes draw-underline {
  to { opacity: 1; stroke-dashoffset: 0; }
}

.hero-text-v2 {
  font-family: var(--font-body) !important;
  font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
  line-height: 1.6 !important;
  color: var(--ink-soft, #4a5650) !important;
  max-width: 56ch !important;
  margin: 14px 0 0 !important;
}

.hero-actions-v2 { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; margin-top: 14px !important; }
.hero-cta-primary, .hero-cta-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 26px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease, background .4s ease, border-color .4s ease !important;
  border: 1px solid transparent !important;
}
.hero-cta-primary {
  background: var(--mint-800, #3A5549) !important;
  color: #FFFFFF !important;
}
.hero-cta-primary span,
.hero-cta-primary > * { color: #FFFFFF !important; }
.hero-cta-primary svg { color: #FFFFFF !important; }
.hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -18px rgba(44, 53, 49, 0.55);
  background: var(--mint-700, #4A6D5F) !important;
}
.hero-cta-primary svg { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.hero-cta-primary:hover svg { transform: translateX(4px); }
.hero-cta-secondary {
  background: rgba(255,255,255,0.9) !important;
  color: var(--mint-800, #3A5549) !important;
  border: 1px solid rgba(94, 134, 118, 0.28) !important;
}
.hero-cta-secondary span,
.hero-cta-secondary > * { color: var(--mint-800, #3A5549) !important; }
.hero-cta-secondary:hover {
  transform: translateY(-2px);
  background: var(--sage-soft, #DFE9E3) !important;
  border-color: var(--mint-700, #4A6D5F) !important;
}
.hero-cta-secondary svg { transition: transform .4s cubic-bezier(.34,1.56,.64,1); color: var(--mint-700, #4A6D5F) !important; }
.hero-cta-secondary:hover svg { transform: translateX(4px); }

.hero-credibility {
  display: flex; align-items: center; gap: 24px;
  margin-top: 22px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(31, 42, 37, 0.08);
}
.hero-cred-item { display: flex; flex-direction: column; gap: 4px; }
.hero-cred-item strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.9vw, 1.8rem);
  color: var(--mint-800, #3A5549);
  letter-spacing: -0.01em;
  line-height: 1;
}
.hero-cred-item span {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #4a5650);
  text-transform: uppercase;
}
.hero-cred-divider { width: 1px; height: 36px; background: rgba(31, 42, 37, 0.12); }

.hero-trust-strip-v2 {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  color: var(--mint-700, #4A6D5F) !important;
  margin: 10px 0 0 !important;
  font-weight: 500 !important;
}

/* ── RIGHT VISUAL ── */
.hero-v2 .hero-visual-v2 {
  position: relative;
  display: block !important;
  min-height: 600px;
  padding: 0 !important;
}

.hero-photo {
  margin: 0;
  position: absolute;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 36px 80px -28px rgba(31, 42, 37, 0.28);
  background: var(--sage-soft, #DFE9E3);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hero-photo:hover img { transform: scale(1.04); }

.hero-photo--main {
  top: 0; right: 0;
  width: 76%; aspect-ratio: 4/5;
  border-radius: 200px 22px 22px 22px;
  animation: float-y 7s ease-in-out infinite alternate;
}
.hero-photo--main::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,42,37,0) 60%, rgba(31,42,37,0.18));
  pointer-events: none;
}
.hero-photo-tag {
  position: absolute; bottom: 22px; left: 24px; z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(31,42,37,0.4);
}
.hero-photo--secondary {
  bottom: 6%; left: 0;
  width: 48%; aspect-ratio: 5/4;
  border-radius: 22px 22px 22px 200px;
  z-index: 2;
  animation: float-y 8s ease-in-out infinite alternate-reverse;
}

@keyframes float-y { to { transform: translateY(-14px); } }

.hero-float-card {
  position: absolute;
  z-index: 4;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 22px 50px -22px rgba(31, 42, 37, 0.3);
  animation: bob 6s ease-in-out infinite alternate;
}
@keyframes bob { to { transform: translateY(-10px); } }

.hero-float-card--top { top: 12%; left: -4%; animation-delay: .4s; }
.hero-float-card--bottom { bottom: 18%; right: -2%; animation-delay: 1.6s; }
.hero-float-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--sage-soft, #DFE9E3);
  border-radius: 12px;
  color: var(--mint-800, #3A5549);
  flex-shrink: 0;
}
.hero-float-text { display: flex; flex-direction: column; line-height: 1.25; }
.hero-float-text strong {
  font-family: var(--font-body);
  font-weight: 600; font-size: 13.5px;
  color: var(--mint-800, #3A5549);
}
.hero-float-text span {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--ink-soft, #4a5650);
}
.hero-avatar-stack { display: flex; flex-shrink: 0; }
.hero-avatar-stack img {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  margin-left: -10px;
}
.hero-avatar-stack img:first-child { margin-left: 0; }

.hero-loc-pill {
  position: absolute;
  bottom: -16px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mint-800, #3A5549);
  color: #FFFFFF;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 20px 40px -18px rgba(44, 53, 49, 0.5);
}
.hero-loc-globe { color: var(--mint-200, #CCDAD4); display: inline-flex; }

/* RESPONSIVE */
@media (max-width: 1080px) {
  .hero-v2 .hero-panel-v2 { grid-template-columns: 1fr !important; gap: 60px !important; }
  .hero-v2 .hero-visual-v2 { min-height: 560px; max-width: 600px; margin: 0 auto; }
  .hero-photo--main { width: 70%; }
  .hero-float-card--top { left: 2%; }
  .hero-float-card--bottom { right: 2%; }
}
@media (max-width: 720px) {
  .hero-v2 { padding: 120px 0 80px !important; }
  .hero-title-v2 { font-size: clamp(2.4rem, 11vw, 3.6rem) !important; }
  .hero-v2 .hero-visual-v2 { min-height: 460px; }
  .hero-photo--main { width: 72%; border-radius: 140px 18px 18px 18px; }
  .hero-photo--secondary { width: 52%; border-radius: 18px 18px 18px 140px; }
  .hero-photo-tag { font-size: 13px; bottom: 16px; left: 18px; }
  .hero-float-card { padding: 11px 14px; }
  .hero-float-card--top { left: -8px; }
  .hero-float-card--bottom { right: -8px; }
  .hero-credibility { gap: 16px; }
  .hero-cred-item strong { font-size: 1.3rem; }
  .hero-cred-divider { height: 28px; }
  .hero-loc-pill { font-size: 12px; padding: 10px 18px; }
  .hero-actions-v2 .hero-cta-primary,
  .hero-actions-v2 .hero-cta-secondary { flex: 1 1 auto; justify-content: center; padding: 14px 20px !important; font-size: 14px !important; }
}
@media (max-width: 480px) {
  .hero-v2 .hero-visual-v2 { min-height: 420px; }
  .hero-tag { font-size: 12px; padding: 7px 14px; }
  .hero-credibility { flex-wrap: wrap; }
  .hero-cred-divider:nth-of-type(2) { display: none; }
}

/* =====================================================
   MARKET SPLIT — Two-path section (India | Dubai)
   ===================================================== */

.section-market-paths {
  padding: 120px 0 120px;
  background: #F8F6F2;
  position: relative;
  overflow: hidden;
}
.section-market-paths::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  width: 640px;
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(94,134,118,0.12), transparent 50%);
  opacity: 0.25;
  pointer-events: none;
}
.section-market-paths::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: 4%;
  width: 320px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(189,154,85,0.16), transparent 55%);
  opacity: 0.35;
  pointer-events: none;
}

/* ── Intro block ──────────────────────────────────────────── */
.market-paths-intro {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 64px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.market-paths-eyebrow {
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #5E8676;
  margin-bottom: 18px;
}
.market-paths-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4vw, 3.8rem);
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 24px;
  line-height: 1.05;
}
.market-paths-intro p {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  max-width: 680px;
  margin: 0 auto;
}
.market-paths-intro-rule {
  width: 128px;
  height: 1.5px;
  margin: 28px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(94,134,118,0.85), rgba(189,154,85,0.85));
  box-shadow: 0 6px 18px rgba(94,134,118,0.08);
}

/* ── Grid ─────────────────────────────────────────────────── */
.market-paths-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Cards ────────────────────────────────────────────────── */
.market-path-card {
  position: relative;
  display: grid;
  grid-template-columns: 38% 62%;
  min-height: 520px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(44,53,49,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), #fff);
  box-shadow: 0 30px 80px rgba(44,53,49,0.08);
  transition: transform 320ms cubic-bezier(.22,.88,.35,1), box-shadow 320ms cubic-bezier(.22,.88,.35,1);
  opacity: 0;
  transform: translateY(24px);
}
.market-path-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 100px rgba(44,53,49,0.14);
}
.market-path-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.45), transparent 45%);
}
.market-path-card--india,
.market-path-card--dubai {
  border-top: none;
}
.market-path-card-inner {
  padding: 44px 44px 42px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: transparent;
}

/* Icon at top of each card */
.market-path-card-inner::before {
  content: '\2713'; /* checkmark */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.market-path-card--india .market-path-card-inner::before { background: var(--sage-500, #5E8676); background: var(--mint-500); }
.market-path-card--dubai .market-path-card-inner::before { background: var(--warm-gold); }

/* Ensure CTA group sits at bottom of card */
.market-path-cta-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(44,53,49,0.08);
}

/* Hierarchy updates */
.market-path-location {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a7a74;
  margin-bottom: 0;
}
.market-path-name {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 2.7vw, 2.6rem);
  font-weight: 400;
  line-height: 1.05;
  color: #1a1a1a;
  margin: 0;
}
.market-path-position {
  font-family: var(--font-body);
  font-size: 0.94rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666;
  margin: 0;
}
.market-path-card--india .market-path-name { color: #2B4F3B; }
.market-path-card--dubai .market-path-name { color: #68602C; }
.market-path-services {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.market-path-services li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.85;
  color: #494945;
}
.market-path-services li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}
.market-path-card--india .market-path-services li::before { color: #5E8676; }
.market-path-card--dubai .market-path-services li::before { color: #B78A48; }
.market-path-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(44,53,49,0.1);
  background: rgba(255,255,255,0.92);
  color: #4a4a4a;
  margin-top: auto;
}
.market-path-card--india .market-path-badge { border-color: rgba(94,134,118,0.24); }
.market-path-card--dubai .market-path-badge { border-color: rgba(189,154,85,0.24); }

/* Primary button */
.market-path-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.market-path-card--india .market-path-cta-primary { background: #3D6B54; color: #fff !important; }
.market-path-card--dubai .market-path-cta-primary { background: #C8965A; color: #fff !important; }
.market-path-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(44,53,49,0.12); }

/* Secondary ghost link */
.market-path-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
}
.market-path-cta-secondary:hover { opacity: 1; }

/* Card entrance */
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
.market-path-card:nth-child(1) { animation: cardIn 520ms ease forwards 120ms; }
.market-path-card:nth-child(2) { animation: cardIn 520ms ease forwards 220ms; }
.market-path-card:nth-child(3) { animation: cardIn 520ms ease forwards 320ms; }
.market-path-card:nth-child(4) { animation: cardIn 520ms ease forwards 420ms; }

/* Image stripe */
.market-path-visual {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background: #E9E2D9;
}
.market-path-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.35), transparent 25%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,0.18), transparent 26%);
  pointer-events: none;
}
.market-path-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(.2,.9,.3,1);
}
.market-path-card:hover .market-path-img { transform: scale(1.03); }
.market-path-card--india .market-path-visual { background: linear-gradient(180deg, #E9E7E1 0%, #F8F6F2 100%); }
.market-path-card--dubai .market-path-visual { background: linear-gradient(180deg, #F4E9D6 0%, #F8F6F2 100%); }
.market-path-card--india .market-path-img { object-position: left center; }
.market-path-card--dubai .market-path-img { object-position: right center; }
.market-path-card--india .market-path-visual::after,
.market-path-card--dubai .market-path-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(248,246,242,0.7) 68%, rgba(248,246,242,0.96) 100%);
  pointer-events: none;
}
.market-path-visual .market-path-overlay-label {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.5);
}
.market-path-card--india .market-path-overlay-label { background: rgba(61, 107, 84, 0.75); color: #fff; }
.market-path-card--dubai .market-path-overlay-label { background: rgba(139, 92, 42, 0.72); color: #fff; }
.market-path-card--india .market-path-badge { border-radius: 12px; padding: 10px 14px; line-height: 1.45; white-space: normal; }
.market-path-location-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.market-path-flag { display: inline-block; width: 26px; height: 17px; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 5px rgba(0,0,0,0.18); flex-shrink: 0; }
@media (max-width: 720px) {
  .market-paths-grid { grid-template-columns: 1fr; }
  .market-path-card-inner { padding: 28px 22px 24px; }
  .market-path-card { grid-template-columns: 1fr; }
}

/* Upgrade intro subheadline weight */
.market-paths-intro p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #4a4a4a;
  max-width: 700px;
  margin: 0 auto;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* =====================================================
   FOOTER — Dubai scope-of-service notice
   Only shown on pages with body.coaching-page class
   ===================================================== */

.footer-scope-notice {
  display: block;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.footer-scope-notice p {
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 10px;
}
.footer-scope-notice p:last-child { margin-bottom: 0; }
.footer-scope-notice strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

/* =====================================================
   NAV — Market context banners inside dropdowns
   ===================================================== */

.mega-market-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  margin-bottom: 8px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.mega-market-banner--india {
  background: #EAF2EC;
}
.mega-market-banner-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2B5C3F;
}
.mega-market-banner-sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: #3D6B54;
}
.ns-market-header {
  padding: 10px 16px;
  margin-bottom: 8px;
  border-radius: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.ns-market-header--dubai {
  /* Deeper than the brand gold so white text clears WCAG AA (4.5:1) */
  background: linear-gradient(135deg, #524B22 0%, #68602C 100%);
}
.ns-market-name {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warm-gold-dark);
}
.ns-market-header--dubai .ns-market-name {
  color: var(--white);
}
.ns-market-sub {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--ink-mute);
}
.ns-market-header--dubai .ns-market-sub {
  color: rgba(255, 255, 255, 0.92);
}

/* =====================================================
   SERVICES — Market block groupings on homepage
   ===================================================== */

.service-market-block {
  margin-bottom: 56px;
}
.service-market-heading {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(0,0,0,0.07);
}
.service-market-heading--india {
  border-bottom-color: #3D6B54;
}
.service-market-heading--dubai {
  border-bottom-color: #C8965A;
}
.service-market-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.service-market-heading--india .service-market-label { color: #3D6B54; }
.service-market-heading--dubai .service-market-label { color: #C8965A; }
.service-market-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.service-market-sub {
  font-size: 14px;
  color: #666;
  margin: 0;
  max-width: 560px;
}

.service-matrix-section {
  padding: 78px 0 72px;
}
.service-matrix-section .matrix-intro {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.service-matrix-section .matrix-intro .eyebrow,
.service-matrix-section .matrix-intro span.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.82rem;
  color: #7B7B7B;
}
.service-matrix-section .matrix-intro h2 {
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.05;
  margin: 0 0 18px;
  color: #111;
}
.service-matrix-section .matrix-intro p {
  max-width: 680px;
  margin: 0 auto;
  color: #4d4d4d;
  font-size: 1rem;
  line-height: 1.75;
}
.service-matrix-section .regional-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0 auto 44px;
  max-width: 840px;
  font-size: 0.95rem;
  color: #6b6b6b;
}
.service-matrix-section .regional-divider::before,
.service-matrix-section .regional-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}
.service-matrix-section .matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}
.service-matrix-section .matrix-card {
  position: relative;
  min-height: 220px;
  padding: 36px 32px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(119, 112, 103, 0.12);
  box-shadow: 0 28px 66px rgba(22, 35, 55, 0.08);
}
.service-matrix-section .matrix-card h3 {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 18px;
  color: #171717;
}
.service-matrix-section .matrix-card p {
  margin: 0;
  color: #4d4d4d;
  line-height: 1.78;
  font-size: 0.98rem;
}
.service-matrix-section .matrix-card:hover {
  transform: translateY(-2px);
}
.service-matrix-section .matrix-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.service-matrix-section .matrix-card:hover {
  box-shadow: 0 32px 72px rgba(22, 35, 55, 0.12);
}

@media (max-width: 1080px) {
  .service-matrix-section .matrix-grid {
    grid-template-columns: 1fr;
    grid-template-rows: unset;
  }
  .service-matrix-section .matrix-card:nth-child(1),
  .service-matrix-section .matrix-card:nth-child(4),
  .service-matrix-section .matrix-card:nth-child(5),
  .service-matrix-section .matrix-card:nth-child(6) {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 720px) {
  .service-matrix-section {
    padding: 52px 0 50px;
  }
  .service-matrix-section .matrix-grid {
    gap: 20px;
  }
  .service-matrix-section .matrix-intro h2 {
    font-size: 2.2rem;
  }
  .service-matrix-section .regional-divider {
    flex-direction: column;
    text-align: center;
  }
}

/* ─── Hero: CSS Consultation-Space Illustrations ─────────────────────────── */
.hero-space {
  width: 100%;
  height: 100%;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg,
    #FAF2E6 0%,
    #F0E4CF 40%,
    #E6D3B8 75%,
    #DAC7A8 100%);
  border-radius: inherit;
}

/* Warm window-light shaft from upper left */
.hero-space__light {
  position: absolute;
  top: 0; left: 0;
  width: 55%; height: 80%;
  background: linear-gradient(158deg,
    rgba(255, 252, 240, 0.85) 0%,
    rgba(255, 247, 228, 0.55) 40%,
    transparent 72%);
  clip-path: polygon(0 0, 72% 0, 52% 100%, 0 85%);
}

/* Window frame – vertical mullion */
.hero-space__light::before {
  content: '';
  position: absolute;
  top: 0; left: 38%;
  width: 1px; height: 100%;
  background: linear-gradient(180deg,
    rgba(200, 175, 130, 0.45) 0%,
    rgba(200, 175, 130, 0.2) 80%,
    transparent 100%);
}

/* Floor plane (lower 28%) */
.hero-space__floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28%;
  background: linear-gradient(180deg,
    rgba(210, 185, 155, 0.35) 0%,
    rgba(200, 170, 135, 0.55) 100%);
}

/* Wall / floor junction line */
.hero-space__floor::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(189, 154, 85, 0.28) 20%,
    rgba(189, 154, 85, 0.38) 60%,
    rgba(189, 154, 85, 0.18) 85%,
    transparent 100%);
}

/* Architectural wall panel (right) */
.hero-space__panel {
  position: absolute;
  right: 10%; top: 10%;
  width: 32%; height: 62%;
  border: 1px solid rgba(189, 154, 85, 0.13);
  border-radius: 1px;
  background: rgba(255, 250, 240, 0.07);
}

/* Minimal plant silhouette */
.hero-space__plant {
  position: absolute;
  bottom: 28%; right: 22%;
  width: 2px; height: 18%;
  background: rgba(74, 109, 95, 0.38);
}
.hero-space__plant::before,
.hero-space__plant::after {
  content: '';
  position: absolute;
  background: linear-gradient(135deg, #5E8676, #4A6D5F);
  border-radius: 50% 5% 50% 5%;
}
.hero-space__plant::before {
  width: 20px; height: 30px;
  bottom: 60%; right: 0;
  opacity: 0.48;
  transform: rotate(-20deg);
}
.hero-space__plant::after {
  width: 15px; height: 22px;
  bottom: 45%; left: 0;
  opacity: 0.38;
  transform: rotate(28deg) scaleX(-1);
}

/* Secondary figure — calm sage composition */
.hero-space--calm {
  background: linear-gradient(145deg,
    #DFE9E3 0%,
    #CDD8D2 45%,
    #BBC8C2 100%);
}
.hero-space--calm::before {
  content: '';
  position: absolute;
  top: 15%; left: 15%;
  right: 25%; bottom: 28%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
}
.hero-space--calm::after {
  content: '';
  position: absolute;
  bottom: 27%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.28), transparent);
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ─── Who We Are: Consultation Room Illustration ─────────────────────────── */
.wellness-consult-room {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  min-height: 260px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(155deg,
    #FAF3E6 0%, #F0E4CE 38%, #E4D2B6 72%, #D7C5A4 100%);
}

/* Window light shaft */
.wcr-light {
  position: absolute;
  top: 0; left: 0;
  width: 54%; height: 80%;
  background: linear-gradient(155deg,
    rgba(255, 253, 248, 0.88) 0%,
    rgba(255, 248, 232, 0.52) 40%,
    transparent 70%);
  clip-path: polygon(0 0, 76% 0, 56% 100%, 0 88%);
}
/* Window mullion */
.wcr-light::before {
  content: '';
  position: absolute;
  top: 0; left: 38%;
  width: 1px; height: 100%;
  background: linear-gradient(180deg,
    rgba(200, 175, 130, 0.4) 0%,
    rgba(200, 175, 130, 0.18) 80%,
    transparent 100%);
}

/* Floor plane */
.wcr-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 26%;
  background: linear-gradient(180deg,
    rgba(208, 182, 148, 0.3) 0%,
    rgba(196, 168, 132, 0.5) 100%);
}
.wcr-floor::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(189, 154, 85, 0.26) 22%,
    rgba(189, 154, 85, 0.36) 60%,
    rgba(189, 154, 85, 0.16) 84%,
    transparent);
}

/* Architectural wall panel */
.wcr-panel {
  position: absolute;
  right: 9%; top: 8%;
  width: 30%; height: 64%;
  border: 1px solid rgba(189, 154, 85, 0.14);
  border-radius: 1px;
  background: rgba(255, 250, 240, 0.07);
}

/* Plant silhouette */
.wcr-plant {
  position: absolute;
  bottom: 26%; right: 20%;
  width: 2px; height: 20%;
  background: rgba(74, 109, 95, 0.35);
}
.wcr-plant::before,
.wcr-plant::after {
  content: '';
  position: absolute;
  background: linear-gradient(135deg, #5E8676, #4A6D5F);
  border-radius: 50% 5% 50% 5%;
}
.wcr-plant::before {
  width: 22px; height: 32px;
  bottom: 55%; right: 0;
  opacity: 0.46;
  transform: rotate(-18deg);
}
.wcr-plant::after {
  width: 16px; height: 24px;
  bottom: 40%; left: 0;
  opacity: 0.36;
  transform: rotate(26deg) scaleX(-1);
}

/* Secondary figure: override hero-space sizing for portrait proportion */
.wc-secondary-space {
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  min-height: 280px !important;
  width: 100% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* ─── Who We Are: Credential Strip ───────────────────────────────────────── */
.who-we-are-creds {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.25rem;
}
.who-we-are-creds li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.who-we-are-creds li svg {
  flex-shrink: 0;
  color: var(--sage-teal);
  opacity: 0.85;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ─── Section 7: Specialist Programmes Tabs ──────────────────────────────── */
.section-specialist-programmes {
  padding: 80px 0 64px;
  background: #F9F7F4;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.sp-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 48px;
}
.sp-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-gold-dark);
  margin-bottom: 14px;
}
.sp-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight: 400;
  color: var(--forest-ink);
  margin-bottom: 14px;
  line-height: 1.25;
}
.sp-subheading {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

/* Tab bar */
.sp-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.09);
  margin-bottom: 44px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }

.sp-tab {
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.sp-tab:hover { color: var(--forest-ink); }
.sp-tab.is-active {
  color: var(--forest-ink);
  border-bottom-color: var(--warm-gold);
  font-weight: 600;
}

/* Panels */
.sp-panel { display: none; }
.sp-panel.is-active { display: block; }

.sp-panel-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 44px;
  align-items: start;
}
@media (max-width: 900px) {
  .sp-panel-inner { grid-template-columns: 1fr; gap: 32px; }
}

.sp-panel-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sage-teal);
  margin-bottom: 12px;
}
.sp-panel-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 400;
  color: var(--forest-ink);
  margin: 0 0 10px;
  line-height: 1.3;
}
.sp-panel-subtitle {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 28px;
  line-height: 1.5;
}
.sp-panel-copy p {
  font-size: 15px;
  line-height: 1.75;
  color: #4a4a4a;
  margin-bottom: 16px;
}

/* India / Dubai market split */
.sp-market-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0 28px;
}
@media (max-width: 640px) { .sp-market-split { grid-template-columns: 1fr; } }

.sp-market {
  padding: 18px 20px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: #4a4a4a;
}
.sp-market p { font-size: 14px; margin: 0; }
.sp-market--india {
  background: rgba(94, 134, 118, 0.07);
  border: 1px solid rgba(94, 134, 118, 0.2);
}
.sp-market--dubai {
  background: rgba(189, 154, 85, 0.07);
  border: 1px solid rgba(189, 154, 85, 0.2);
}
.sp-market-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sp-market--india .sp-market-label { color: #3D6B54; }
.sp-market--dubai .sp-market-label { color: var(--warm-gold-dark); }

/* Pill tags */
.sp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.sp-pills span {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #555;
  letter-spacing: 0.01em;
}

/* Non-clinical disclaimer */
.sp-disclaimer {
  margin: 8px 0 20px;
  padding: 12px 16px;
  border-left: 3px solid rgba(189, 154, 85, 0.45);
  background: rgba(189, 154, 85, 0.05);
  font-size: 12.5px;
  color: #666;
  line-height: 1.55;
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

/* Proof card (sticky aside) */
.sp-proof-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.055);
  position: sticky;
  top: 96px;
}
.sp-proof-heading {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 16px;
}
.sp-proof-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-proof-list li {
  font-size: 13.5px;
  color: #444;
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}
.sp-proof-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--sage-teal);
  font-size: 12px;
  font-weight: 700;
}

/* Proof card CTA */
.sp-panel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  background: var(--warm-gold);
  color: #fff;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.sp-panel-cta:hover {
  background: var(--warm-gold-dark);
  box-shadow: 0 6px 20px rgba(189, 154, 85, 0.28);
  color: #fff;
}

/* Footer prompt strip */
.sp-footer-prompt {
  margin-top: 56px;
  padding: 36px 40px;
  background: linear-gradient(135deg,
    rgba(94, 134, 118, 0.06) 0%,
    rgba(189, 154, 85, 0.05) 100%);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sp-footer-question {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--forest-ink);
  margin: 0;
  line-height: 1.35;
}
.sp-footer-sub {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px;
  line-height: 1.6;
}
.sp-footer-cta {
  font-size: 14px !important;
  padding: 12px 28px !important;
}

/* ─── Specialist Programmes: Horizontal Card Carousel ────────────────────── */

/* Section override — allow overflow for the full-width carousel */
.section-specialist-programmes {
  padding: 68px 0 60px;
  overflow: hidden;
}
.sp-header { margin-bottom: 36px; }

/* Carousel wrapper — sits outside .container to go edge-to-edge */
.sp-carousel-wrapper {
  position: relative;
  padding: 0 52px;
}

/* Scrollable track */
.sp-carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px max(24px, calc((100vw - 1120px) / 2)) 32px;
}
.sp-carousel::-webkit-scrollbar { display: none; }

/* ── Card ─────────────────────────────────────────────────── */
.sp-card {
  flex: 0 0 358px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 8px 36px -14px rgba(31,42,37,0.10);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}
.sp-card:hover {
  box-shadow: 0 24px 64px -16px rgba(31,42,37,0.18);
  transform: translateY(-5px);
}

/* ── Card image strip ─────────────────────────────────────── */
.sp-card-img {
  position: relative;
  height: 215px;
  overflow: hidden;
  background: #DFE9E3;
}
.sp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.65s cubic-bezier(.2,.7,.2,1);
}
.sp-card:hover .sp-card-img img { transform: scale(1.06); }
.sp-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    transparent 42%,
    rgba(255,255,255,0.14) 72%,
    rgba(255,255,255,0.48) 100%);
  pointer-events: none;
}

/* Tag pill on image */
.sp-card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.55);
  color: #3D6B54;
  white-space: nowrap;
}
.sp-card--mindset .sp-card-tag { color: #68602C; }

/* ── Card body ────────────────────────────────────────────── */
.sp-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.sp-card-title-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sp-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: #1C2D26;
  margin: 0;
  line-height: 1.38;
}
.sp-card-subtitle {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: #999;
  line-height: 1.5;
}
.sp-card-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.65;
  color: #555;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Pill tags ────────────────────────────────────────────── */
.sp-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sp-card-pills span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(94,134,118,0.08);
  color: #3D6B54;
  border: 1px solid rgba(94,134,118,0.2);
}
.sp-card--mindset .sp-card-pills span {
  background: rgba(200,150,90,0.08);
  color: #68602C;
  border-color: rgba(200,150,90,0.22);
}

/* ── CTA button ───────────────────────────────────────────── */
.sp-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 20px;
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: #3D6B54;
  color: #fff !important;
  box-shadow: 0 5px 16px -4px rgba(61,107,84,0.32);
  transition: background 0.18s, box-shadow 0.18s, transform 0.15s;
}
.sp-card-cta svg { flex-shrink: 0; transition: transform 0.18s; }
.sp-card-cta:hover {
  background: #2B4F3B;
  box-shadow: 0 10px 24px -4px rgba(61,107,84,0.42);
  transform: translateY(-1px);
}
.sp-card-cta:hover svg { transform: translateX(3px); }
.sp-card--mindset .sp-card-cta {
  background: #C8965A;
  box-shadow: 0 5px 16px -4px rgba(200,150,90,0.30);
}
.sp-card--mindset .sp-card-cta:hover {
  background: #B07840;
  box-shadow: 0 10px 24px -4px rgba(200,150,90,0.42);
}

/* ── Navigation arrows ────────────────────────────────────── */
.sp-nav {
  position: absolute;
  top: calc(50% - 18px);
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.09);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.09);
  color: #3D6B54;
  line-height: 0;
  transition: background 0.18s, color 0.18s, border-color 0.18s,
              transform 0.18s, box-shadow 0.18s;
}
.sp-nav:hover {
  background: #3D6B54;
  color: #fff;
  border-color: #3D6B54;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 24px rgba(61,107,84,0.28);
}
.sp-nav:disabled { opacity: 0.3; pointer-events: none; }
.sp-nav--prev { left: 4px; }
.sp-nav--next { right: 4px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .sp-carousel-wrapper { padding: 0 44px; }
}
@media (max-width: 640px) {
  .sp-card { flex: 0 0 82vw; }
  .sp-carousel-wrapper { padding: 0; }
  .sp-nav { display: none; }
  .sp-card-img { height: 185px; }
}
/* ─────────────────────────────────────────────────────────── */

/* ─── Hero: Concentric Rings Visual ──────────────────────────────────────── */
.hero-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.hero-rings-svg {
  width: 88%;
  max-width: 420px;
  height: auto;
  display: block;
}
@media (max-width: 1080px) {
  .hero-rings-svg { width: 78%; max-width: 360px; }
}
@media (max-width: 720px) {
  .hero-rings-svg { width: 70%; max-width: 300px; }
}
.hero-photo--main .hero-space,
.hero-photo--secondary .hero-space { display: none; }

/* ─── Hero: Main image (centered in rings) ───────────────────────────────── */
.hero-img-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56%;
  max-width: 268px;
  aspect-ratio: 3/4;
  border-radius: 160px 160px 28px 28px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -24px rgba(31,42,37,0.30),
    0 0 0 4px rgba(239,231,218,0.55),
    -22px -14px 44px -18px rgba(94, 134, 118, 0.35),
    22px 18px 44px -18px rgba(189, 154, 85, 0.32);
  z-index: 2;
}
.hero-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.hero-img-main:hover img { transform: scale(1.04); }
.hero-img-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(31,42,37,0.14));
  pointer-events: none;
}

/* ─── Hero: Floating portrait bubbles ───────────────────────────────────── */
.hero-img-bubble {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(250,247,241,0.92);
  box-shadow: 0 10px 28px rgba(31,42,37,0.18);
  z-index: 3;
  background: #EFE7DA;
}
.hero-img-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Top-right bubble — calm eyes-closed portrait */
.hero-img-bubble--a {
  width: 92px;
  height: 92px;
  top: 9%;
  right: 5%;
  animation: bob 7s ease-in-out 1.2s infinite alternate;
}

/* Bottom-left bubble — namaste pose */
.hero-img-bubble--b {
  width: 78px;
  height: 78px;
  bottom: 24%;
  left: 4%;
  animation: bob 8s ease-in-out 2.8s infinite alternate;
}

@media (max-width: 1080px) {
  .hero-img-main { width: 60%; max-width: 240px; }
  .hero-img-bubble--a { width: 80px; height: 80px; right: 4%; }
  .hero-img-bubble--b { width: 68px; height: 68px; left: 3%; }
}
@media (max-width: 720px) {
  .hero-img-main { width: 52%; max-width: 200px; }
  .hero-img-bubble--a { width: 68px; height: 68px; top: 7%; right: 5%; }
  .hero-img-bubble--b { width: 58px; height: 58px; bottom: 22%; left: 4%; }
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ============================================================
   HOMEPAGE REDESIGN — PASS 2
   Bringing trust bar, wellness intro, Dubai services,
   why/feature grid, get-started and FAQ up to the same
   premium, editorial standard set by the hero, market-paths
   and India services sections above. Same palette, same
   type system — just more considered spacing, hover states
   and a few decorative accents.
   ============================================================ */

/* ─── Trust bar: 3 stats, not 5 — fix the grid + add dividers ─── */
.trust-bar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 780px;
  margin: 0 auto;
  gap: 0 !important;
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem) !important;
}
.trust-stat {
  position: relative;
  padding: 0.35rem 1rem !important;
  transition: transform var(--dur-mid) var(--ease-silk);
}
.trust-stat:hover { transform: translateY(-2px); }
.trust-stat + .trust-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 12%;
  width: 1px; height: 76%;
  background: linear-gradient(180deg, transparent, rgba(94,134,118,0.28), transparent);
}
@media (max-width: 540px) {
  .trust-bar-grid { grid-template-columns: 1fr !important; gap: 1.1rem 0 !important; }
  .trust-stat + .trust-stat::before { display: none; }
  .trust-stat + .trust-stat { border-top: 1px solid rgba(94,134,118,0.18); padding-top: 1.1rem !important; }
}

/* ─── About / Wellness intro: more air, a decorative blob, softer photos ─── */
#about.section-wellness-intro {
  position: relative;
  padding: 108px 0 112px !important;
  overflow: hidden;
}
#about.section-wellness-intro::before {
  content: '';
  position: absolute;
  top: 6%;
  left: -8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle at 50% 50%, rgba(94,134,118,0.10), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
#about .intro-grid-wellness { position: relative; z-index: 1; }

#about .wellness-photo { transition: transform var(--dur-slow) var(--ease-silk), box-shadow var(--dur-slow) var(--ease-silk); }
#about .wellness-photo-primary:hover { transform: translateY(-6px); }
#about .wellness-photo-secondary:hover { transform: translateY(-6px); }
#about .wellness-card-dark {
  border-radius: 20px;
  box-shadow: 0 26px 56px rgba(31,42,37,0.22);
}

#about .intro-right h2 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  margin-bottom: 1.1rem;
}
#about .intro-right p { line-height: 1.8; }

/* Credential strip → soft pill badges instead of a plain checklist */
#about .who-we-are-creds {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.85rem;
}
#about .who-we-are-creds li {
  padding: 0.55rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(31,42,37,0.04);
  transition: border-color var(--dur-fast), transform var(--dur-mid) var(--ease-silk), opacity var(--dur-mid) var(--ease-silk);
}
#about .who-we-are-creds li:hover {
  border-color: var(--mint-300);
  transform: translateY(-1px);
}
@media (max-width: 560px) {
  #about .who-we-are-creds { grid-template-columns: 1fr; }
}

/* ─── Dubai services: bring up to the same tier as the India matrix ───
   India moved to `.service-matrix-section` (centered intro, eyebrow,
   regional divider, 3-col card grid). Dubai still used the older
   left-aligned `.service-market-heading` + plain `.service-tile` grid.
   `.service-tile` / `.service-market-heading--dubai` are Dubai-only on
   this page now, so we can safely restyle them in place. ─── */
#dubai-services.service-market-block {
  position: relative;
  padding: 96px 0 30px;
  margin-bottom: 0;
  overflow: hidden;
}
#dubai-services::before {
  content: '';
  position: absolute;
  top: -12%;
  right: -8%;
  width: 560px;
  height: 480px;
  background: radial-gradient(circle at 50% 50%, rgba(189,154,85,0.14), transparent 55%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
#dubai-services .container { position: relative; z-index: 1; }

#dubai-services .service-market-heading--dubai {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
  padding-bottom: 0;
  border-bottom: none;
}
#dubai-services .service-market-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  letter-spacing: 0.25em;
}
#dubai-services .service-market-label::before,
#dubai-services .service-market-label::after {
  content: '';
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.45;
}
#dubai-services .service-market-title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  margin: 0.65rem 0 16px;
  line-height: 1.08;
}
#dubai-services .service-market-sub {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.8;
}

.service-tiles-grid--dubai {
  counter-reset: dubai-tile;
  gap: 28px;
  margin-top: 3.5rem !important;
}
.service-tiles-grid--dubai .service-tile {
  counter-increment: dubai-tile;
  border-radius: 26px !important;
  padding: 42px 34px 34px !important;
  border: 1px solid rgba(189,154,85,0.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), #fff) !important;
  box-shadow: 0 24px 60px rgba(44,53,49,0.07) !important;
}
.service-tiles-grid--dubai .service-tile::before {
  background: linear-gradient(90deg, var(--warm-gold-dark), var(--warm-gold-light)) !important;
}
.service-tiles-grid--dubai .service-tile::after {
  content: counter(dubai-tile, decimal-leading-zero);
  position: absolute;
  top: 30px; right: 32px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(189,154,85,0.5);
  letter-spacing: 0.03em;
}
.service-tiles-grid--dubai .service-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 76px rgba(189,154,85,0.18) !important;
  border-color: rgba(189,154,85,0.36) !important;
}
.service-tiles-grid--dubai .service-tile h3 {
  color: #68602C !important;
  padding-right: 2.5rem;
}
.service-tiles-grid--dubai .service-tile a {
  color: var(--warm-gold-dark) !important;
}
@media (max-width: 720px) {
  #dubai-services.service-market-block { padding: 60px 0 12px; }
  .service-tiles-grid--dubai .service-tile { padding: 32px 26px 28px !important; }
}

/* ─── "Why Calmyra" — feature grid with numbered marks ─── */
#why.section-blue {
  position: relative;
  padding: 100px 0 108px !important;
  overflow: hidden;
}
#why.section-blue::before {
  content: '';
  position: absolute;
  bottom: -14%;
  left: -6%;
  width: 460px;
  height: 420px;
  background: radial-gradient(circle at 50% 50%, rgba(94,134,118,0.14), transparent 55%);
  pointer-events: none;
}
#why .container { position: relative; z-index: 1; }
#why .section-header { max-width: 680px; margin-bottom: 0.5rem; }
#why .section-header h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.12; }

#why .feature-grid {
  counter-reset: why-card;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}
@media (max-width: 1080px) { #why .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { #why .feature-grid { grid-template-columns: 1fr; } }

#why .feature-card {
  counter-increment: why-card;
  border-radius: 24px !important;
  padding: 2.25rem 1.85rem 2rem !important;
  border-color: var(--line) !important;
}
#why .feature-card::before {
  content: counter(why-card, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--warm-gold-dark);
  opacity: 0.55;
  margin-bottom: 0.9rem;
}
#why .feature-card h3 { font-size: 1.2rem; }
#why .feature-card:hover {
  border-color: var(--mint-300) !important;
}

/* ─── Get Started: decorative accents around the lead form ─── */
#get-started.section-get-started {
  position: relative;
  padding: 108px 0 112px !important;
  overflow: hidden;
}
#get-started.section-get-started::before {
  content: '';
  position: absolute;
  top: -18%;
  right: -10%;
  width: 520px;
  height: 460px;
  background: radial-gradient(circle at 50% 50%, rgba(189,154,85,0.12), transparent 55%);
  pointer-events: none;
}
#get-started .container { position: relative; z-index: 1; }

#get-started .get-started-copy::before {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 1.25rem;
  background: linear-gradient(90deg, var(--sage-teal), var(--warm-gold));
}
#get-started .get-started-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  line-height: 1.14;
}

#get-started .get-started-form-wrap {
  position: relative;
  border-radius: 28px !important;
  padding: 2.5rem !important;
  box-shadow: 0 30px 70px rgba(31,42,37,0.09) !important;
}
#get-started .get-started-form-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 2.5rem; right: 2.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--sage-teal), var(--warm-gold-light));
}
#get-started .gs-input,
#get-started .gs-select {
  border-radius: 10px !important;
}
#get-started .btn-get-started-send {
  border-radius: 12px;
  padding: 1rem 2.4rem;
  letter-spacing: 0.01em;
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk);
}
@media (max-width: 720px) {
  #get-started.section-get-started { padding: 68px 0 72px !important; }
  #get-started .get-started-form-wrap { padding: 1.75rem !important; }
}

/* ─── FAQ: a touch more air + an accent bar on the open item ─── */
.section-faq {
  padding: 100px 0 108px !important;
}
.faq-item {
  border-radius: 20px !important;
  position: relative;
}
.faq-item.is-open::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--sage-teal), var(--warm-gold));
}
.faq-heading { font-size: clamp(2rem, 3.2vw, 2.75rem); }

/* ─── Footer: a thin brand-gradient seam where it meets the page ─── */
.site-footer {
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sage-teal) 0%, var(--warm-gold) 50%, var(--sage-teal) 100%);
  opacity: 0.85;
}

/* ============================================================
   HOMEPAGE REDESIGN — PASS 3
   Compact premium header, a much bigger logo, dual header CTAs,
   a site-wide pill button system, and a whitespace dial-back
   pass on the homepage sections added in Pass 2 (they read too
   airy once the rest of the page is this considered).
   ============================================================ */

/* ─── Header: shorter box, much bigger logo ───
   Old: fixed 88px box, 44px logo. New: auto height driven by
   padding (shrinks the box) + a 60px logo (up ~35%) so the
   header reads shorter overall while the brand mark is far
   more prominent. */
#navbar { padding: 0; }
.nav-container {
  height: auto !important;
  padding: 13px clamp(1rem, 2.4vw, 1.5rem) !important;
  gap: 1.25rem;
}
.nav-brand img {
  height: clamp(46px, 4.6vw, 60px) !important;
  max-height: 60px !important;
  width: auto !important;
}
.nav-menu { gap: 1.35rem; }
.nav-menu-primary { gap: 0.35rem; }
.nav-menu-primary > a,
.nav-mega-btn,
.nav-ns-btn { padding: 0.5rem 0.65rem; font-size: 0.92rem; }

@media (max-width: 1100px) {
  .nav-brand img { height: 44px !important; }
}
@media (max-width: 768px) {
  .nav-container { padding: 11px clamp(0.85rem, 3vw, 1.25rem) !important; }
  .nav-brand img { height: 40px !important; }
}
@media (max-width: 420px) {
  .nav-brand img { height: 36px !important; }
}

/* Hero sits directly under the header — track the shorter box so
   there isn't a dead gap (was tuned for a fixed 88px+ header). */
.hero-section { padding-top: clamp(74px, 8.6vw, 90px) !important; }

/* ─── Header CTAs: Book Appointment + Download Free Workbook ───
   Two premium, evenly weighted pill buttons. Workbook is the
   stronger (gold, filled) mark; Book Appointment is a confident
   outlined second action — both share sizing and motion. */
.nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.btn-nav {
  border-radius: 999px !important;
  padding: 0.62rem 1.15rem !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-nav--book {
  background: transparent !important;
  color: var(--mint-800) !important;
  border: 1.5px solid var(--mint-400) !important;
  box-shadow: none !important;
}
.btn-nav--book:hover {
  background: var(--mint-50) !important;
  border-color: var(--mint-600) !important;
  color: var(--mint-900, #1F2A26) !important;
}
.btn-nav--workbook {
  box-shadow: 0 8px 22px -8px rgba(189, 154, 85, 0.55) !important;
}
.btn-nav--workbook:hover {
  box-shadow: 0 14px 30px -10px rgba(189, 154, 85, 0.6) !important;
}
.btn-nav-icon { flex-shrink: 0; transition: transform var(--dur-mid) var(--ease-silk); }
.btn-nav--workbook:hover .btn-nav-icon { transform: translateY(2px); }

@media (max-width: 1180px) {
  .btn-nav--book span, .btn-nav--book { font-size: 0.82rem !important; padding: 0.58rem 0.9rem !important; }
  .btn-nav--workbook { font-size: 0.82rem !important; padding: 0.58rem 0.95rem !important; }
}
@media (max-width: 1060px) and (min-width: 901px) {
  .btn-nav--book { display: none; }
}
@media (max-width: 900px) {
  .nav-actions { width: 100%; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
  .btn-nav--book { display: inline-flex; }
  .nav-actions .btn-nav { width: 100%; justify-content: center; padding: 1rem 1.25rem !important; font-size: 0.95rem !important; min-height: 48px; }
}

/* ─── Global CTA system: rounded pill, lift + scale, consistent sizing ─── */
.btn,
.btn-primary,
.btn-secondary,
.btn-get-started-send,
.btn-know-more,
.btn-activate {
  border-radius: 999px !important;
}
.btn.btn-primary:hover,
.btn-primary:hover,
.btn-get-started-send:hover,
.btn-activate:hover {
  transform: translateY(-2px) scale(1.015);
}
.btn.btn-secondary:hover,
.btn-secondary:hover {
  transform: translateY(-2px) scale(1.015);
}
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-get-started-send:active { transform: translateY(0) scale(0.99); }
.btn, .btn-primary, .btn-secondary, .btn-get-started-send, .btn-know-more, .btn-activate {
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk), background var(--dur-mid) var(--ease-silk), border-color var(--dur-mid) var(--ease-silk), color var(--dur-mid) var(--ease-silk);
}

/* ─── Whitespace dial-back: Pass 2 sections were tuned in isolation
   and read too spacious once stacked against each other. Trim the
   top/bottom air while keeping internal rhythm intact. ─── */
.section-market-paths { padding: 76px 0 80px !important; }
#about.section-wellness-intro { padding: 72px 0 76px !important; }
.service-matrix-section { padding: 64px 0 56px !important; }
#dubai-services.service-market-block { padding: 68px 0 24px !important; }
#why.section-blue { padding: 72px 0 80px !important; }
#get-started.section-get-started { padding: 76px 0 80px !important; }
.section-faq { padding: 72px 0 80px !important; }
.market-paths-intro { margin: 0 auto 44px !important; }
.service-matrix-section .matrix-intro { margin: 0 auto 32px !important; }
@media (max-width: 720px) {
  .section-market-paths { padding: 52px 0 56px !important; }
  #about.section-wellness-intro { padding: 52px 0 56px !important; }
  #why.section-blue { padding: 52px 0 56px !important; }
  #get-started.section-get-started { padding: 52px 0 56px !important; }
  .section-faq { padding: 52px 0 60px !important; }
}

/* ─── Testimonials: vanilla CSS replacement for the old Tailwind markup ───
   The homepage no longer loads the Tailwind CDN, so this section is now
   plain custom classes reproducing the same cream/amber editorial look. */
.testimonials-section {
  background: #F9F7F3;
  padding: 76px 0 84px;
  overflow: hidden;
  position: relative;
}
.testimonials-header { max-width: 1080px; margin: 0 auto 40px; }
.testimonials-eyebrow {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(180, 131, 52, 0.65); margin: 0 0 12px;
}
.testimonials-heading-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.testimonials-title {
  font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 400;
  color: var(--ink-dark); line-height: 1.15; margin: 0;
}
.testimonials-subtitle { margin: 12px 0 0; color: var(--ink-faint); font-size: 0.9rem; line-height: 1.6; max-width: 40ch; }
.testimonials-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.testimonials-nav-btn {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 0.9rem; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-silk), color var(--dur-fast) var(--ease-silk), transform var(--dur-fast) var(--ease-silk);
}
.testimonials-nav-btn:hover { border-color: var(--ink-mute); color: var(--ink-dark); transform: translateY(-2px); }
.testimonials-progress { margin-top: 32px; width: 100%; height: 1px; background: var(--line); position: relative; }
.testimonials-progress-bar { position: absolute; inset: 0 auto 0 0; background: rgba(189, 154, 85, 0.55); transition: width 0.3s ease-out; }

.testimonials-track {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 4px max(1.5rem, calc((100vw - 72rem) / 2 + 1.5rem)) 24px max(1.5rem, calc((100vw - 72rem) / 2 + 1.5rem));
}
.testimonials-track::-webkit-scrollbar { display: none; }

.testimonial-card {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 85vw;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2rem;
  display: flex; flex-direction: column;
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk);
}
.testimonial-category-tag {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-gold-dark);
  background: var(--champagne);
  padding: 4px 10px;
  border-radius: 999px;
}
.testimonial-category-tag--sage { color: var(--sage-teal-deep); background: var(--mint-50, #DFE9E3); }
.testimonial-rating {
  color: var(--warm-gold-dark);
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin: -0.4rem 0 0.6rem;
}
.testimonial-card--tint { background: #FDFCF8; }
.testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 26px 58px rgba(31, 42, 37, 0.09); }
@media (min-width: 640px) { .testimonial-card { flex: 0 0 420px; } }
@media (min-width: 1024px) { .testimonial-card { flex: 0 0 450px; } }

.testimonial-quote-mark {
  font-family: var(--font-display); font-size: 5.5rem; line-height: 0.7;
  color: rgba(189, 154, 85, 0.15); user-select: none; margin-bottom: 0.75rem; display: block;
}
.testimonial-quote {
  font-family: var(--font-display); font-style: italic; color: var(--ink-soft);
  font-size: 1rem; line-height: 1.85; flex: 1; margin: 0;
}
.testimonial-footer {
  margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.testimonial-avatar {
  width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em;
}
.testimonial-avatar--sage { background: var(--sage-teal-deep); }
.testimonial-avatar--gold { background: var(--warm-gold-dark); }
.testimonial-name { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink-dark); line-height: 1.3; }
.testimonial-context { margin: 2px 0 0; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.testimonials-privacy-note {
  text-align: center; color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.06em;
  margin: 24px 24px 0;
}
@media (max-width: 640px) {
  .testimonials-heading-row { align-items: flex-start; }
}

/* ── Category filter tabs ── */
.testimonials-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.testimonials-tab {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-silk), color var(--dur-fast) var(--ease-silk), border-color var(--dur-fast) var(--ease-silk);
}
.testimonials-tab:hover { border-color: var(--mint-300); color: var(--ink-dark); }
.testimonials-tab.is-active {
  background: var(--sage-teal-dark);
  border-color: var(--sage-teal-dark);
  color: var(--white);
}
.testimonials-empty {
  text-align: center;
  color: var(--ink-mute);
  font-size: 0.9rem;
  padding: 40px 24px;
}

/* ============================================================
   "CHOOSE YOUR PATH" — full rebuild
   Two full-bleed photo panels with the copy glassed directly
   onto the image (no image-strip-then-white-card), separated
   by a floating "or" seam badge that overlaps both halves.
   Replaces the old .market-path-card grid entirely — those
   rules are left in place elsewhere but are no longer used by
   any page, so nothing else depends on them.
   ============================================================ */

.mp-section {
  position: relative;
  overflow: hidden;
  padding: 76px 0 84px;
  isolation: isolate;
}
.mp-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.mp-shape--sage { width: 420px; height: 420px; top: -140px; left: -120px; background: rgba(94, 134, 118, 0.22); }
.mp-shape--gold { width: 460px; height: 460px; bottom: -160px; right: -140px; background: rgba(189, 154, 85, 0.18); }
.mp-dotgrid {
  position: absolute;
  top: 6%; right: 4%;
  width: 160px; height: 160px;
  background-image: radial-gradient(rgba(44, 53, 49, 0.14) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) { .mp-dotgrid { display: none; } }

.mp-intro {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}
.mp-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sage-teal-dark);
  margin-bottom: 16px;
}
.mp-eyebrow-strong {
  font-size: 1.05em;
  font-weight: 800;
  color: var(--warm-gold-dark);
  letter-spacing: 0.26em;
  border-bottom: 2px solid var(--warm-gold);
  padding-bottom: 2px;
}
.mp-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.1;
  color: var(--ink-dark);
  margin: 0 0 16px;
}
.mp-sub {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
}

/* ── The split ─────────────────────────────────────────────── */
.mp-split {
  position: relative;
  z-index: 1;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.75rem);
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: stretch;
}

.mp-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(480px, 44vw, 600px);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(31, 42, 37, 0.14);
  transition: box-shadow var(--dur-slow) var(--ease-silk);
}
.mp-panel:hover { box-shadow: 0 40px 90px rgba(31, 42, 37, 0.2); }
.mp-split .mp-panel--dubai.reveal { transition-delay: 0.12s; }

.mp-panel-media { position: absolute; inset: 0; }
.mp-panel-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.mp-panel:hover .mp-panel-media img { transform: scale(1.06); }

.mp-panel-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.mp-panel--india .mp-panel-scrim {
  background: linear-gradient(180deg, rgba(20, 32, 26, 0) 32%, rgba(15, 28, 22, 0.62) 66%, rgba(10, 22, 17, 0.86) 100%);
}
.mp-panel--dubai .mp-panel-scrim {
  background: linear-gradient(180deg, rgba(36, 26, 12, 0) 32%, rgba(32, 22, 10, 0.62) 66%, rgba(26, 18, 8, 0.86) 100%);
}

.mp-flag-chip {
  position: absolute;
  z-index: 2;
  top: 24px; left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mp-flag-chip img,
.mp-flag-chip svg.flag-icon { width: 20px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.4); }

.mp-panel-content {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4vw, 40px);
  color: var(--white);
}
.mp-panel-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.mp-panel--india .mp-panel-kicker { color: #BFE0D2; }
.mp-panel--dubai .mp-panel-kicker { color: #F0D9A8; }
.mp-panel-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  line-height: 1.06;
  color: var(--white);
  margin: 0 0 18px;
}
.mp-chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px;
}
.mp-chip {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--white);
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease-silk), transform var(--dur-fast) var(--ease-silk);
}
.mp-panel:hover .mp-chip { background: rgba(255, 255, 255, 0.2); }
.mp-panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 9px 15px;
  border-radius: 999px;
  margin: 0 0 22px;
}
.mp-panel-badge svg { flex-shrink: 0; }
.mp-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.mp-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white) !important;
  background: linear-gradient(135deg, var(--sage-teal) 0%, var(--sage-teal-dark) 100%);
  box-shadow: 0 14px 32px -10px rgba(94, 134, 118, 0.6);
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk);
}
.mp-cta-primary:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 20px 40px -10px rgba(94, 134, 118, 0.7); }
.mp-cta-primary svg { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-silk); }
.mp-cta-primary:hover svg { transform: translateX(3px); }
.mp-cta-primary--gold {
  background: linear-gradient(135deg, var(--warm-gold) 0%, var(--warm-gold-dark) 100%);
  box-shadow: 0 14px 32px -10px rgba(189, 154, 85, 0.65);
}
.mp-cta-primary--gold:hover { box-shadow: 0 20px 40px -10px rgba(189, 154, 85, 0.75); }
.mp-cta-secondary {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86) !important;
  transition: color var(--dur-fast) var(--ease-silk);
}
.mp-cta-secondary:hover { color: var(--white) !important; text-decoration: underline; text-underline-offset: 3px; }

/* ── Floating "or" seam ───────────────────────────────────── */
.mp-seam { position: relative; align-self: stretch; }
.mp-seam-line {
  position: absolute;
  left: 50%; top: 6%; bottom: 6%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(94, 134, 118, 0.4) 30%, rgba(189, 154, 85, 0.4) 70%, transparent);
}
.mp-seam-badge {
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-dark);
  box-shadow: 0 20px 48px rgba(31, 42, 37, 0.2), 0 0 0 6px var(--cream);
  z-index: 3;
  animation: mpSeamFloat 4.5s ease-in-out infinite;
}
@keyframes mpSeamFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -58%); }
}

@media (max-width: 900px) {
  .mp-split {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mp-panel { min-height: 420px; border-radius: 24px; }
  .mp-seam { width: 100%; height: 64px; }
  .mp-seam-line {
    left: 8%; right: 8%; top: 50%; bottom: auto;
    width: auto; height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(94, 134, 118, 0.4) 30%, rgba(189, 154, 85, 0.4) 70%, transparent);
  }
  .mp-seam-badge { top: 50%; left: 50%; }
}
@media (max-width: 480px) {
  .mp-heading-break { display: none; }
  .mp-panel { min-height: 400px; }
  .mp-panel-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mp-cta-primary { width: 100%; justify-content: center; }
}

/* ============================================================
   PSYCHOLOGICAL ASSESSMENTS — homepage preview
   ============================================================ */
.hp-assess-section {
  position: relative;
  overflow: hidden;
  padding: 72px 0 80px;
  background: var(--off-white);
}
.hp-assess-shape {
  position: absolute;
  top: -10%; right: -8%;
  width: 480px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(94, 134, 118, 0.12), transparent 55%);
  pointer-events: none;
}
.hp-assess-intro {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 44px;
}
.hp-assess-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-teal-dark);
  margin-bottom: 14px;
}
.hp-assess-intro h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  margin: 0 0 14px;
}
.hp-assess-intro p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.hp-assess-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1000px) { .hp-assess-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .hp-assess-grid { grid-template-columns: 1fr; } }

.hp-assess-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 2rem 1.75rem;
  box-shadow: 0 16px 40px rgba(31, 42, 37, 0.05);
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk), border-color var(--dur-mid) var(--ease-silk);
}
.hp-assess-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 64px rgba(31, 42, 37, 0.12);
  border-color: var(--mint-300);
}
.hp-assess-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--mint-50, #DFE9E3);
  color: var(--sage-teal-dark);
  margin-bottom: 1.1rem;
  transition: transform var(--dur-mid) var(--ease-silk), background var(--dur-mid) var(--ease-silk);
}
.hp-assess-card:hover .hp-assess-icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--warm-gold-dark);
  color: var(--white);
}
.hp-assess-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink-dark);
  margin: 0 0 0.6rem;
}
.hp-assess-card p {
  font-size: 0.92rem;
  line-height: 1.68;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.hp-assess-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sage-teal-dark) !important;
  transition: color var(--dur-fast) var(--ease-silk);
}
.hp-assess-link:hover { color: var(--warm-gold-dark) !important; }

.hp-assess-cta {
  position: relative; z-index: 1;
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hp-assess-cta-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft) !important;
  transition: color var(--dur-fast) var(--ease-silk);
}
.hp-assess-cta-link:hover { color: var(--sage-teal-dark) !important; }
@media (max-width: 480px) {
  .hp-assess-section { padding: 52px 0 56px; }
  .hp-assess-cta { flex-direction: column; gap: 14px; }
}

/* ─── Science-Backed Care — icon cards replacing the paragraph wall ─── */
.sbc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: 1.75rem 0 1.75rem;
}
@media (max-width: 480px) { .sbc-grid { grid-template-columns: 1fr; } }
.sbc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.25rem 1.35rem;
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk), border-color var(--dur-mid) var(--ease-silk);
}
.sbc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(31, 42, 37, 0.08);
  border-color: var(--mint-300);
}
.sbc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--mint-50, #DFE9E3);
  color: var(--sage-teal-dark);
  margin-bottom: 0.7rem;
  transition: transform var(--dur-mid) var(--ease-silk), background var(--dur-mid) var(--ease-silk), color var(--dur-mid) var(--ease-silk);
}
.sbc-card:hover .sbc-icon { transform: scale(1.08); background: var(--sage-teal-dark); color: var(--white); }
.sbc-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-dark);
  margin: 0 0 0.4rem;
}
.sbc-card p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.sbc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.sbc-actions .btn { margin: 0; }

/* ─── Confidentiality / Professional Expertise — icon cards ─── */
.conf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: 0 0 1.75rem;
}
@media (max-width: 480px) { .conf-row { grid-template-columns: 1fr; } }
.conf-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 1.1rem 1.15rem;
  background: linear-gradient(160deg, var(--champagne) 0%, var(--cream) 100%);
  border: 1px solid var(--line-gold);
  border-radius: 16px;
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk);
}
.conf-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(189, 154, 85, 0.16);
}
.conf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--white);
  color: var(--warm-gold-dark);
  box-shadow: 0 4px 12px rgba(189, 154, 85, 0.18);
  transition: transform var(--dur-mid) var(--ease-silk);
}
.conf-card:hover .conf-icon { transform: scale(1.1) rotate(-4deg); }
.conf-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-dark);
  margin: 0 0 0.25rem;
}
.conf-card p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   BREATHING EXERCISES
   ============================================================ */
.breathing-section {
  position: relative;
  overflow: hidden;
  padding: 76px 0 84px;
  background: linear-gradient(180deg, var(--mint-50) 0%, var(--cream) 100%);
}
.breathing-shape {
  position: absolute;
  top: -14%; left: -10%;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(94, 134, 118, 0.16), transparent 55%);
  pointer-events: none;
}
.breathing-intro {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 44px;
}
.breathing-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-gold-dark);
  background: var(--champagne);
  border: 1px solid var(--line-gold);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.breathing-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-teal-dark);
  margin-bottom: 14px;
}
.breathing-intro h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  margin: 0 0 14px;
}
.breathing-intro p { font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }

.breathing-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 22px;
}
.breathing-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.breathing-trust-item svg { flex-shrink: 0; color: var(--sage-teal-dark); }
@media (max-width: 560px) {
  .breathing-free-badge { margin-bottom: 12px; }
  .breathing-trust-row { flex-direction: column; align-items: center; gap: 8px; }
}

.breathing-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 820px) { .breathing-grid { grid-template-columns: 1fr; } }
.breathing-grid--single {
  grid-template-columns: 1fr;
  max-width: 460px;
}

/* ── Deep Breathing: floating hero element, not a card ── */
.breathing-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 460px;
  margin: 0 auto 56px;
  padding: 12px 0 0;
}
.breathing-hero-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(94, 134, 118, 0.32), transparent 68%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}
.breath-circle.breath-circle--hero {
  width: 208px;
  height: 208px;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 0 22px rgba(94, 134, 118, 0.08), 0 30px 64px rgba(94, 134, 118, 0.32);
  animation: heroFloat 4.5s ease-in-out infinite;
}
.breath-circle--hero .breath-circle-label { font-size: 1rem; }
.breath-circle.breath-circle--hero.is-running { animation: breathPulse 11s ease-in-out infinite; }
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.breathing-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--ink-dark);
  margin: 0 0 4px;
}
.breathing-hero-sub {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.breathing-toggle.breathing-toggle--hero {
  padding: 1rem 2rem;
  font-size: 0.92rem;
}
@media (max-width: 480px) {
  .breathing-hero { margin-bottom: 44px; }
  .breath-circle--hero { width: 172px; height: 172px; }
  .breathing-hero-glow { width: 280px; height: 280px; top: -28px; }
}

.breathing-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 2rem;
  box-shadow: 0 20px 48px rgba(31, 42, 37, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.breathing-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  margin-bottom: 1.5rem;
}
.breathing-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--mint-50, #DFE9E3);
  color: var(--sage-teal-dark);
}
.breathing-card--box .breathing-card-icon { background: var(--champagne); color: var(--warm-gold-dark); }
.breathing-card-head h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin: 0 0 2px; color: var(--ink-dark); }
.breathing-card-head p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

/* ── Deep breathing circle ── */
.breath-circle-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin-bottom: 1.5rem;
}
.breath-circle {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sage-light), var(--sage-teal) 85%);
  box-shadow: 0 0 0 14px rgba(94, 134, 118, 0.10), 0 20px 44px rgba(94, 134, 118, 0.28);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.6s ease;
}
.breath-circle.is-running { animation: breathPulse 11s ease-in-out infinite; }
@keyframes breathPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.breath-circle-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.02em;
}

.breathing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white) !important;
  background: linear-gradient(135deg, var(--sage-teal-dark) 0%, var(--sage-teal-deep) 100%);
  box-shadow: 0 12px 28px -10px rgba(94, 134, 118, 0.55);
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk);
}
.breathing-toggle span,
.breathing-toggle .breathing-toggle-icon { color: var(--white) !important; }
.breathing-card--box .breathing-toggle {
  /* Deeper than the brand gold so white text clears WCAG AA (4.5:1) */
  background: linear-gradient(135deg, #68602C 0%, #524B22 100%);
  box-shadow: 0 12px 28px -10px rgba(189, 154, 85, 0.55);
}
.breathing-toggle:hover { transform: translateY(-2px) scale(1.02); }
.breathing-toggle[aria-pressed="true"] { background: var(--ink-dark); box-shadow: 0 12px 28px -10px rgba(31, 42, 37, 0.4); }
.breathing-toggle-icon { flex-shrink: 0; }

.breathing-note { margin: 1rem 0 0; font-size: 0.8rem; color: var(--ink-mute); }

/* ── Box breathing ── */
.box-breath-wrap {
  position: relative;
  width: 170px; height: 170px;
  margin-bottom: 1.5rem;
}
.box-breath-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.box-breath-track { fill: none; stroke: var(--champagne-deep); stroke-width: 4; }
.box-breath-progress {
  fill: none;
  stroke: var(--warm-gold-dark);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 610;
  stroke-dashoffset: 610;
}
.box-breath-wrap.is-running .box-breath-progress {
  animation: boxDraw 16s linear infinite;
}
@keyframes boxDraw { to { stroke-dashoffset: 0; } }
.box-breath-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.box-breath-phase { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-dark); }
.box-breath-count { font-size: 2rem; font-weight: 700; color: var(--warm-gold-dark); line-height: 1; }

.box-breath-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 1rem;
}
.box-breath-steps span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--warm-gold-dark);
  background: var(--champagne);
  padding: 5px 11px;
  border-radius: 999px;
}

.breathing-cta {
  position: relative; z-index: 1;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px 36px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(31, 42, 37, 0.06);
  transition: box-shadow var(--dur-slow) var(--ease-silk), border-color var(--dur-slow) var(--ease-silk);
}
.breathing-cta-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--ink-dark);
  margin: 0;
}
.breathing-cta-note { font-size: 0.9rem; line-height: 1.65; color: var(--ink-mute); max-width: 46ch; margin: 6px 0 0; }
.breathing-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
}
.breathing-cta-secondary {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sage-teal-dark) !important;
  transition: color var(--dur-fast) var(--ease-silk);
}
.breathing-cta-secondary:hover { color: var(--warm-gold-dark) !important; }

/* One-time highlight when a visitor completes a full breathing cycle */
.breathing-cta.is-highlighted {
  border-color: var(--warm-gold);
  box-shadow: 0 0 0 5px rgba(189, 154, 85, 0.16), 0 24px 56px rgba(31, 42, 37, 0.1);
  animation: breathingCtaPulse 1.4s var(--ease-silk);
}
@keyframes breathingCtaPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

@media (max-width: 480px) {
  .breathing-section { padding: 52px 0 56px; }
  .breathing-card { padding: 1.5rem; }
}

/* ─── Inline CTA strip — reused after service grids / testimonials ─── */
.inline-cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  padding: 24px 32px;
  background: linear-gradient(135deg, var(--mint-50, #DFE9E3) 0%, var(--cream) 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.inline-cta-strip span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-dark);
}
.inline-cta-strip .btn { flex-shrink: 0; margin: 0; }
.inline-cta-strip--center {
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
@media (max-width: 560px) {
  .inline-cta-strip { flex-direction: column; text-align: center; padding: 20px; }
}

/* ============================================================
   TRUST & CREDIBILITY
   ============================================================ */
.trust-section {
  padding: 72px 0 80px;
  background: var(--cream);
}
.trust-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}
.trust-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-teal-dark);
  margin-bottom: 14px;
}
.trust-intro h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  margin: 0 0 14px;
}
.trust-intro p { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }

.trust-founder-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: center;
  max-width: 920px;
  margin: 0 auto 48px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 28px;
  box-shadow: 0 24px 56px rgba(31, 42, 37, 0.06);
}
@media (max-width: 700px) {
  .trust-founder-card { grid-template-columns: 1fr; text-align: center; }
}
.trust-founder-photo {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.trust-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease-silk); }
.trust-founder-card:hover .trust-founder-photo img { transform: scale(1.04); }
.trust-founder-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-gold-dark);
  margin-bottom: 6px;
}
.trust-founder-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--ink-dark);
  margin: 0 0 6px;
}
.trust-founder-role { font-size: 0.9rem; color: var(--sage-teal-dark); font-weight: 600; margin: 0 0 12px; }
.trust-founder-bio { font-size: 0.92rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
.trust-founder-creds {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
  justify-content: flex-start;
}
@media (max-width: 700px) { .trust-founder-creds { justify-content: center; } }
.trust-founder-creds span {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--sage-teal-deep);
  background: var(--mint-50, #DFE9E3);
  padding: 5px 12px;
  border-radius: 999px;
}

.trust-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 780px) { .trust-badges { grid-template-columns: 1fr; } }
.trust-badge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk);
}
.trust-badge:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(31, 42, 37, 0.07); }
.trust-badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--mint-50, #DFE9E3);
  color: var(--sage-teal-dark);
}
.trust-badge h3 { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; color: var(--ink-dark); margin: 0 0 3px; }
.trust-badge p { font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }

@media (max-width: 480px) {
  .trust-section { padding: 52px 0 56px; }
  .trust-founder-card { padding: 20px; }
}

/* ============================================================
   FLOATING BREATHING WIDGETS
   Persistent, always-visible attraction points — small pulsing
   FABs stacked in the corner that each expand into a breathing
   exercise. Fixed, so they stay put through scroll.
   ============================================================ */
.breathe-widgets {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 260;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.breathe-widget { position: relative; }

/* ── Launcher row: always-visible label + FAB, side by side ── */
.breathe-widget-launcher {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breathe-widget-label {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-dark);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(31, 42, 37, 0.14);
  white-space: nowrap;
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk), background var(--dur-mid) var(--ease-silk);
}
.breathe-widget-label--gold { color: #524B22; }
.breathe-widget-launcher:hover .breathe-widget-label,
.breathe-widget-launcher:focus-within .breathe-widget-label {
  transform: translateX(-2px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 32px rgba(31, 42, 37, 0.2);
}
.breathe-widget.is-open .breathe-widget-label { opacity: 0; pointer-events: none; transform: translateX(6px); }

/* ── The floating action button ── */
.breathe-widget-fab {
  position: relative;
  width: 68px; height: 68px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  background: linear-gradient(135deg, var(--sage-teal-dark) 0%, var(--sage-teal-deep) 100%);
  box-shadow: 0 14px 32px -6px rgba(31, 42, 37, 0.4);
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk);
}
.breathe-widget-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 18px 38px -6px rgba(31, 42, 37, 0.48); }
.breathe-widget-fab:focus-visible {
  outline: 3px solid var(--warm-gold);
  outline-offset: 3px;
}
.breathe-widget-fab svg { position: relative; z-index: 1; }
.breathe-widget-fab--gold {
  background: linear-gradient(135deg, #68602C 0%, #524B22 100%);
}
.breathe-widget-fab--gold .breathe-widget-fab-pulse { background: var(--warm-gold); }
.breathe-widget-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sage-teal);
  animation: breatheFabPulse 2.6s ease-out infinite;
}
@keyframes breatheFabPulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
.breathe-widget.is-open .breathe-widget-fab-pulse { animation-play-state: paused; opacity: 0; }

/* ── The expandable panel ── */
.breathe-widget-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 16px);
  width: 270px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 30px 70px rgba(31, 42, 37, 0.22);
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.breathe-widget-panel[hidden] { display: none; }
.breathe-widget-panel:not([hidden]) {
  display: flex;
  animation: widgetPanelIn 0.3s var(--ease-silk);
}
@keyframes widgetPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.breathe-widget-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--mint-50, #DFE9E3);
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-silk), color var(--dur-fast) var(--ease-silk);
}
.breathe-widget-close:hover { background: var(--sage-teal-dark); color: var(--white); }
.breathe-widget-badge {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-gold-dark);
  background: var(--champagne);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
.breathe-widget-glow {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(94, 134, 118, 0.28), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.breath-circle.breath-circle--widget {
  position: relative;
  z-index: 1;
  width: 128px;
  height: 128px;
  margin-bottom: 1.1rem;
}
.breath-circle--widget .breath-circle-label { font-size: 0.78rem; }
.breathe-widget-title {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink-dark);
  margin: 0 0 4px;
}
.breathe-widget-sub {
  position: relative; z-index: 1;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
.breathe-widget-panel .breathing-toggle {
  position: relative; z-index: 1;
  padding: 0.75rem 1.4rem;
  font-size: 0.85rem;
}
.breathe-widget-panel .breathing-note {
  position: relative; z-index: 1;
  font-size: 0.74rem;
  margin-top: 0.85rem;
}

@media (max-width: 480px) {
  .breathe-widget-panel { width: calc(100vw - 40px); max-width: 300px; }
  .breathe-widget-fab { width: 58px; height: 58px; }
  .breathe-widgets { right: 12px; bottom: 12px; gap: 10px; }
  .breathe-widget-launcher { gap: 7px; }
  .breathe-widget-label { font-size: 0.74rem; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .breathe-widget-fab-pulse { display: none; }
}

/* ============================================================
   LOGO — final authoritative size (supersedes every earlier
   .nav-brand img rule above; several passes added conflicting
   sizes over time and this is the one that should win).
   ============================================================ */
.nav-brand img {
  height: 72px !important;
  max-height: 72px !important;
  width: auto !important;
}
.nav-container { padding-top: 12px !important; padding-bottom: 12px !important; }
@media (max-width: 1100px) {
  .nav-brand img { height: 60px !important; max-height: 60px !important; }
}
@media (max-width: 768px) {
  .nav-brand img { height: 52px !important; max-height: 52px !important; }
}
@media (max-width: 420px) {
  .nav-brand img { height: 44px !important; max-height: 44px !important; }
}
.site-footer .footer-logo-link img {
  height: 60px !important;
  max-height: 60px !important;
  width: auto !important;
}

/* ─── Trust bar: gentle floating numbers ─── */
.trust-stat--float .trust-stat-num {
  display: inline-block;
  animation: trustStatFloat 3.6s ease-in-out infinite;
}
.trust-stat--float:nth-child(1) .trust-stat-num { animation-delay: 0s; }
.trust-stat--float:nth-child(2) .trust-stat-num { animation-delay: 0.5s; }
.trust-stat--float:nth-child(3) .trust-stat-num { animation-delay: 1s; }
@keyframes trustStatFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-stat--float .trust-stat-num { animation: none; }
}

/* ============================================================
   PAGE BACKGROUND — final authoritative wash (supersedes the
   plainer cream background set near the top of this file).
   A soft, extremely light sage/mint tint throughout, with a
   gentle warm gold accent low on the page for balance.
   ============================================================ */
html, body { background: #F2F8F4 !important; }
body {
  background-image:
    radial-gradient(circle at 6% 4%, rgba(94, 134, 118, 0.17) 0%, transparent 42%),
    radial-gradient(circle at 97% 14%, rgba(94, 134, 118, 0.11) 0%, transparent 40%),
    radial-gradient(circle at 92% 92%, rgba(189, 154, 85, 0.09) 0%, transparent 45%),
    linear-gradient(180deg, #F2F8F4 0%, #EDF5EF 45%, #F6F1E6 100%) !important;
  background-attachment: fixed !important;
}
@media (max-width: 900px) {
  /* fixed backgrounds can jank on mobile scroll; use normal attachment there */
  body { background-attachment: scroll !important; }
}

/* ============================================================
   WELCOME BREATHING POPUP — shown once per session, ~5s in
   ============================================================ */
.breathe-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 30, 25, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-silk);
}
.breathe-popup-overlay[hidden] { display: none; }
.breathe-popup-overlay:not([hidden]) { display: flex; }
.breathe-popup-overlay.is-open { opacity: 1; }

.breathe-popup {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 28px;
  padding: 3rem 2.25rem 2.25rem;
  box-shadow: 0 40px 100px rgba(20, 30, 25, 0.35);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform 0.4s var(--ease-silk), opacity 0.4s var(--ease-silk);
}
.breathe-popup-overlay.is-open .breathe-popup {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.breathe-popup-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--mint-50, #DFE9E3);
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-silk), color var(--dur-fast) var(--ease-silk);
}
.breathe-popup-close:hover { background: var(--sage-teal-dark); color: var(--white); }

.breathe-popup-glow {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(94, 134, 118, 0.28), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.breathe-popup-circle {
  position: relative;
  z-index: 1;
  width: 92px; height: 92px;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, var(--sage-light), var(--sage-teal) 85%);
  box-shadow: 0 0 0 14px rgba(94, 134, 118, 0.10), 0 20px 44px rgba(94, 134, 118, 0.3);
  animation: breathePopupPulse 6s ease-in-out infinite;
}
.breathe-popup-circle-core {
  width: 30%; height: 30%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
@keyframes breathePopupPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}

.breathe-popup-eyebrow {
  position: relative; z-index: 1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-teal-dark);
  margin-bottom: 0.6rem;
}
.breathe-popup h2 {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  color: var(--ink-dark);
  margin: 0 0 0.75rem;
}
.breathe-popup-quote {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--sage-teal-deep);
  margin: 0 0 1.1rem;
  padding: 0 0.25rem;
  max-width: 32ch;
}
.breathe-popup p {
  position: relative; z-index: 1;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  max-width: 34ch;
}
.breathe-popup-start {
  position: relative; z-index: 1;
  padding: 1rem 2rem !important;
  font-size: 0.95rem !important;
  width: 100%;
  justify-content: center;
}
.breathe-popup-skip {
  position: relative; z-index: 1;
  margin-top: 1rem;
  border: none;
  background: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-silk);
}
.breathe-popup-skip:hover { color: var(--ink-dark); text-decoration: underline; }

@media (max-width: 480px) {
  .breathe-popup { padding: 2.5rem 1.5rem 1.75rem; border-radius: 22px; }
  .breathe-popup h2 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .breathe-popup-circle { animation: none; }
}

/* ============================================================
   TRUST BAR — full-width floating statistics banner
   (final authoritative rules; supersedes the boxed pill-grid
   version set earlier in this file)
   ============================================================ */
.trust-bar.trust-bar--full {
  width: 100%;
  max-width: none;
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem) !important;
  background: linear-gradient(120deg, #E3F0E8 0%, #EFF8F2 45%, #E9F3EC 100%) !important;
}
.trust-bar-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.trust-bar-glow--a { top: -60px; left: 6%; width: 260px; height: 260px; background: rgba(94, 134, 118, 0.22); }
.trust-bar-glow--b { bottom: -70px; right: 8%; width: 300px; height: 300px; background: rgba(189, 154, 85, 0.16); }

.trust-bar-track {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  animation: trustBarDrift 12s ease-in-out infinite alternate;
  will-change: transform;
}
.trust-bar.trust-bar--full:hover .trust-bar-track,
.trust-bar.trust-bar--full:focus-within .trust-bar-track {
  animation-play-state: paused;
}
@keyframes trustBarDrift {
  0%   { transform: translateX(-28px); }
  100% { transform: translateX(28px); }
}

.trust-bar.trust-bar--full .trust-bar-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  max-width: 1100px;
  margin: 0 auto;
  width: auto;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.trust-bar.trust-bar--full .trust-stat {
  flex: 1 1 220px;
  max-width: 280px;
  padding: clamp(1.5rem, 3vw, 2.25rem) 1.5rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(31, 42, 37, 0.08);
  transition: transform var(--dur-mid) var(--ease-silk), box-shadow var(--dur-mid) var(--ease-silk), background var(--dur-mid) var(--ease-silk);
}
.trust-bar.trust-bar--full .trust-stat:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 26px 56px rgba(31, 42, 37, 0.14), 0 0 0 4px rgba(94, 134, 118, 0.10);
}
.trust-bar.trust-bar--full .trust-stat + .trust-stat::before { display: none; }

.trust-bar.trust-bar--full .trust-stat-num {
  display: block;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--sage-teal-deep) !important;
  margin-bottom: 0.4rem;
}
.trust-bar.trust-bar--full .trust-stat-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft) !important;
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .trust-bar.trust-bar--full .trust-stat { flex: 1 1 100%; max-width: 320px; }
  @keyframes trustBarDrift {
    0%   { transform: translateX(-12px); }
    100% { transform: translateX(12px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .trust-bar-track { animation: none; }
}

/* ============================================================
   STATISTICS BAND — bold editorial rebuild
   Full-width, no cards: hero-scale serif numbers in a single
   row, separated by thin low-opacity dividers, on a soft
   sage/cream textured field. Replaces the floating-card
   .trust-bar--full version entirely.
   ============================================================ */
.stats-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3rem);
  background:
    linear-gradient(135deg, #EAF3EC 0%, #F6F2E7 100%);
}

/* Ensure form fields in the get-started section are legible on light backgrounds */
#get-started .get-started-form-wrap .gs-input,
#get-started .get-started-form-wrap .gs-select {
  color: #1a1a1a !important;
  background: #ffffff !important;
  border-color: #e3ded6 !important;
}
#get-started .get-started-form-wrap .gs-input::placeholder {
  color: #9a9a9a !important;
}
#get-started .get-started-form-wrap .gs-select option[disabled] {
  color: #9a9a9a !important;
}
.stats-band-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(58, 85, 73, 0.06) 0px, rgba(58, 85, 73, 0.06) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(58, 85, 73, 0.06) 0px, rgba(58, 85, 73, 0.06) 1px, transparent 1px, transparent 64px);
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 50%, #000 45%, transparent 92%);
  mask-image: radial-gradient(ellipse 85% 90% at 50% 50%, #000 45%, transparent 92%);
}

/* ── Continuous left-to-right marquee ──
   Two identical rows placed back to back inside a track twice
   as wide; the track glides from -50% to 0% so the seam between
   the real row and its duplicate is invisible, giving a
   seamless, infinite left-to-right drift. ── */
.stats-band-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  /* Clip overflowing items at the container edge so no statistic is
     ever partially visible when entering/leaving the viewport. The
     previous soft-fade caused the appearance of cropped numbers. */
  -webkit-mask-image: none;
  mask-image: none;
}
.stats-band-track {
  display: flex;
  width: max-content;
  animation: statsBandMarquee 30s linear infinite;
  will-change: transform;
}
.stats-band-marquee:hover .stats-band-track,
.stats-band-marquee:focus-within .stats-band-track {
  animation-play-state: paused;
}
@keyframes statsBandMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}

.stats-band-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  width: max-content; /* ensure each duplicated row has the exact intrinsic width */
}

.stats-band-item {
  flex: 0 0 auto; /* size to content so duplicate row widths match exactly */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(0.75rem, 2.5vw, 1.75rem);
  transition: transform var(--dur-mid) var(--ease-silk), opacity 0.8s cubic-bezier(.2, .7, .2, 1);
}
.stats-band-item:hover { transform: scale(1.035); }
.stats-band-item + .stats-band-item {
  border-left: 1px solid rgba(58, 85, 73, 0.16);
}

.stats-band-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--sage-teal-deep);
  margin-bottom: clamp(0.5rem, 1vw, 0.85rem);
}
.stats-band-label {
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .stats-band-num { font-size: clamp(2rem, 6vw, 3rem); }
  .stats-band-item { padding: 0 0.85rem; }
}

@media (max-width: 640px) {
  /* Keep the marquee running (rather than freezing/stacking it) —
     just tighten padding/size so three items comfortably fit the
     scrolling row on narrow screens. */
  .stats-band-track { animation-duration: 20s; }
  .stats-band-item { padding: 0 0.6rem; }
  .stats-band-item + .stats-band-item { border-left-color: rgba(58, 85, 73, 0.14); }
  .stats-band-num { font-size: clamp(1.6rem, 8vw, 2.25rem); }
  .stats-band-label { font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-band-item { transition: none; }
  .stats-band-track { animation: none; transform: translateX(0); }
}

/* ============================================================
   HERO IMAGES — soften so the copy stays the primary focus
   (final authoritative rules; supersedes earlier hero image
   filters/overlays set elsewhere in this file)
   ============================================================ */
.hero-img-main img {
  filter: brightness(0.93) saturate(0.94) blur(0.4px);
}
.hero-img-main::after {
  background:
    linear-gradient(180deg, rgba(94, 134, 118, 0.05) 0%, transparent 38%, rgba(31, 42, 37, 0.26) 100%) !important;
}
.hero-img-bubble img {
  filter: brightness(0.9) saturate(0.92) blur(0.3px);
}
.hero-img-bubble {
  position: relative;
}
.hero-img-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 30%, transparent 35%, rgba(31, 42, 37, 0.2) 100%);
  pointer-events: none;
}

/* ============================================================
   TYPOGRAPHY UNIFICATION — section eyebrow/kicker labels
   These were scattered across many components with different
   sizes (11px–12.8px), weights (600–700) and letter-spacing
   (0.1em–0.24em). One consistent scale now (final authoritative
   rules; supersedes every earlier eyebrow-style rule above).
   Colour is left untouched per component — the sage/gold
   market colour-coding is intentional and stays.
   ============================================================ */
.wellness-eyebrow,
.eyebrow,
.mp-eyebrow,
.hp-assess-eyebrow,
.sp-eyebrow,
.testimonials-eyebrow,
.service-market-label,
#dubai-services .service-market-label {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.25rem !important;
}

/* CALMYRA INDIA — a stronger focal point than the general eyebrow scale */
#india-services .matrix-intro .eyebrow {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  margin-bottom: 1.5rem !important;
}

@media (max-width: 640px) {
  .wellness-eyebrow,
  .eyebrow,
  .mp-eyebrow,
  .hp-assess-eyebrow,
  .sp-eyebrow,
  .testimonials-eyebrow,
  .service-market-label {
    font-size: 0.85rem !important;
    letter-spacing: 0.16em !important;
  }
  #india-services .matrix-intro .eyebrow {
    font-size: 1rem !important;
  }
}

/* ============================================================
   "WHO WE ARE" (#about) — compact rebuild
   Final authoritative rules: cuts the section padding decisively,
   flips the column ratio so the text side (not the photo collage)
   is the wider one, tightens the grid gap, and pulls the internal
   rhythm (eyebrow → heading → paragraph → cards → actions) in
   tight so nothing reads as dead space.
   ============================================================ */
#about.section-wellness-intro {
  padding: 40px 0 48px !important;
}

.intro-grid-wellness {
  grid-template-columns: 0.82fr 1fr !important;
  gap: 2.25rem !important;
  align-items: center !important;
}
@media (max-width: 900px) and (min-width: 641px) {
  .intro-grid-wellness { grid-template-columns: 0.9fr 1fr !important; gap: 1.75rem !important; }
}
@media (max-width: 640px) {
  .intro-grid-wellness { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}

/* Let the (now narrower) collage column fill its space instead of
   floating a fixed-width composition inside extra margin. */
.wellness-collage-inner { max-width: 100%; }
.wellness-collage { min-height: 400px; }

#about .wellness-eyebrow { margin-bottom: 0.6rem !important; }
#about .intro-right h2 { margin-bottom: 0.75rem !important; }
#about .intro-copy-wellness p,
#about .intro-copy-wellness p:last-of-type {
  margin-bottom: 1.1rem !important;
}
#about .sbc-grid { margin: 1.1rem 0 !important; }
#about .conf-row { margin: 0 0 1.1rem !important; }

@media (max-width: 640px) {
  #about.section-wellness-intro { padding: 32px 0 40px !important; }
}

/* ============================================================
   MATRIX HERO — branded photography beside the India/Dubai
   section intros (replaces the empty space in those sections
   with a real photo, ~50/50 with the copy).
   ============================================================ */
.matrix-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: center;
  margin: 0 auto 48px;
  max-width: 1180px;
}
.matrix-hero-media {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(31, 42, 37, 0.16);
}
.matrix-hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 781;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-silk);
}
.matrix-hero-media:hover img { transform: scale(1.045); }

/* The intro copy no longer needs to be centered/capped once it
   sits beside a photo instead of floating alone. */
.matrix-hero .matrix-intro,
.matrix-hero .service-market-heading--dubai {
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 900px) and (min-width: 641px) {
  .matrix-hero { gap: 1.75rem; margin-bottom: 40px; }
}
@media (max-width: 640px) {
  .matrix-hero { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 32px; }
  .matrix-hero-media { order: -1; }
}


/* ============================================================
   CHOOSE YOUR PATH — hero panel legibility + framing fix (v27)
   Fixes: title illegible over bright image zones, source photos
   (1400x781, ~1.79:1) over-cropped inside a taller panel shape,
   subjects hidden behind overlay. Final authority — appended at
   true EOF so it wins over earlier .mp-panel rules above.
   ============================================================ */
.mp-panel {
  min-height: clamp(560px, 50vw, 700px) !important;
}

.mp-panel-media img {
  object-position: center 32% !important;
}

/* Earlier + stronger darkening so the whole text zone (title
   through actions) sits on a legible surface, not just the CTA row. */
.mp-panel--india .mp-panel-scrim {
  background: linear-gradient(
    180deg,
    rgba(14, 24, 19, 0) 0%,
    rgba(14, 24, 19, 0.1) 30%,
    rgba(12, 22, 17, 0.62) 50%,
    rgba(9, 18, 14, 0.85) 68%,
    rgba(6, 13, 10, 0.95) 100%
  ) !important;
}
.mp-panel--dubai .mp-panel-scrim {
  background: linear-gradient(
    180deg,
    rgba(34, 24, 10, 0) 0%,
    rgba(34, 24, 10, 0.1) 30%,
    rgba(30, 21, 9, 0.62) 50%,
    rgba(25, 17, 7, 0.85) 68%,
    rgba(18, 12, 5, 0.95) 100%
  ) !important;
}

/* Prominence + guaranteed contrast for the market title regardless
   of what part of the photo sits behind it. */
.mp-panel-title {
  color: var(--white) !important;
  font-size: clamp(2.3rem, 3.6vw, 3.35rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 20px !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

.mp-panel-kicker {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.mp-chip {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.mp-panel-content {
  padding: clamp(32px, 4.2vw, 44px) !important;
}

@media (max-width: 900px) and (min-width: 641px) {
  .mp-panel { min-height: 620px !important; }
}
@media (max-width: 900px) {
  .mp-panel { min-height: 520px !important; }
}
@media (max-width: 480px) {
  .mp-panel { min-height: 480px !important; }
  .mp-panel-title { font-size: clamp(2rem, 7vw, 2.5rem) !important; }
}

/* ── Footer licensing note (Section C) ───────────────────────── */
.footer-licensing {
  color: rgba(253, 251, 247, 0.55) !important;
  font-size: 0.78rem !important;
  line-height: 1.6;
  margin: 0 0 10px !important;
  text-align: center;
  width: 100%;
}

/* ── Header CTA hierarchy swap: Book = primary (filled), Workbook = secondary (outlined) ── */
.btn-nav--book.btn-primary {
  /* Solid dark olive rather than --grad-gold: that gradient runs into
     a light tan at its far end, and on a wide button like this one the
     white label text spans into that light zone and loses contrast. */
  background: linear-gradient(135deg, var(--olive-gold) 0%, var(--olive-gold-dark) 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 8px 22px -8px rgba(189, 154, 85, 0.55) !important;
}
.btn-nav--book.btn-primary svg,
.btn-nav--book.btn-primary span { color: #FFFFFF !important; }
.btn-nav--book.btn-primary:hover {
  background: linear-gradient(135deg, var(--mint-600) 0%, var(--mint-400) 55%, var(--mint-500) 100%) !important;
  box-shadow: 0 14px 30px -10px rgba(189, 154, 85, 0.6) !important;
  color: var(--white) !important;
}
.btn-nav--workbook.btn-secondary {
  background: var(--white) !important;
  color: var(--ink-dark) !important;
  border: 1.5px solid var(--mint-400) !important;
  box-shadow: none !important;
}
.btn-nav--workbook.btn-secondary:hover {
  background: var(--mint-50) !important;
  border-color: var(--mint-600) !important;
  color: var(--mint-900, #1F2A26) !important;
}

/* ── Crisis helpline numbers as tappable tel: links ── */
.footer-helpline-list a {
  color: inherit;
  text-decoration: none;
}
.footer-helpline-list a:hover,
.footer-helpline-list a:focus-visible {
  text-decoration: underline;
}

/* ============================================================
   BRAND REBRAND — typography scale, spacing, button padding,
   utility classes (Cormorant Garamond / Public Sans / olive-gold)
   Baseline defaults only — bespoke component rules elsewhere in
   this file (higher specificity and/or !important) still win.
   ============================================================ */
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3rem) !important; line-height: 1.1 !important; }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem) !important; line-height: 1.15 !important; }
h3 { font-size: 1.5rem !important; line-height: 1.25 !important; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
}
body {
  font-size: 1.0625rem;
  line-height: 1.7;
}
small, .text-small { font-size: 0.875rem; line-height: 1.5; }
.eyebrow, .wellness-eyebrow, .testimonials-eyebrow, .mp-eyebrow,
.hp-assess-eyebrow, .breathing-eyebrow, .trust-eyebrow,
.trust-founder-eyebrow, .breathe-popup-eyebrow, .sp-card-tag, .ss-eyebrow {
  font-size: 0.75rem;
  line-height: 1.4;
}
@media (max-width: 640px) {
  h3 { font-size: 1.25rem !important; }
  body { font-size: 1rem; }
  small, .text-small { font-size: 0.8125rem; }
  .eyebrow, .wellness-eyebrow, .testimonials-eyebrow, .mp-eyebrow,
  .hp-assess-eyebrow, .breathing-eyebrow, .trust-eyebrow,
  .trust-founder-eyebrow, .breathe-popup-eyebrow, .sp-card-tag, .ss-eyebrow {
    font-size: 0.6875rem;
  }
}

/* Site-wide heading scale enforcement: every h1/h2/h3 across every
   page — including the bespoke marketing-size headings in team.css,
   coaching.css, legal.css, assessment.css, relationship.css, and
   bridge.css — now conforms to the scale above, no per-page
   exceptions. The !important on the h1/h2/h3 rules above beats
   those files' class-scoped selectors regardless of specificity,
   since none of them use !important themselves. Component-level
   overrides on the homepage (e.g. .mp-panel-title) still win
   because they combine a class selector with !important, which
   out-specifies a bare-element !important rule. */

/* Headings never go full bold — Cormorant Garamond loses its
   high-contrast delicacy above 500/600. */
h1, h2, h3, h4, h5, h6 { font-weight: 500 !important; }

.accent-italic {
  font-family: var(--font-display);
  font-style: italic;
}
.hero-title-v2 em,
.mp-eyebrow em,
.hero-kicker em,
.sp-card-subtitle {
  font-family: var(--font-display);
  font-style: italic;
}

.eyebrow,
.wellness-eyebrow,
.testimonials-eyebrow,
.mp-eyebrow,
.hp-assess-eyebrow,
.breathing-eyebrow,
.trust-eyebrow,
.trust-founder-eyebrow,
.breathe-popup-eyebrow {
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-olive-gold) !important;
}

.btn { padding: 14px 28px !important; }

/* ── Card/body/paragraph spacing retrofit (8px scale) ── */
.sp-card-body { gap: var(--space-2) !important; }
.sp-card-desc { margin: 0 !important; }

/* ── Footer social links ── */
.footer-social {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(253, 251, 247, 0.08);
  color: rgba(253, 251, 247, 0.75);
  transition: background var(--dur-fast) var(--ease-silk), color var(--dur-fast) var(--ease-silk), transform var(--dur-fast) var(--ease-silk);
}
.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--color-olive-gold);
  color: var(--white);
  transform: translateY(-2px);
}

/* ── Responsive hardening ──────────────────────────────────
   Defensive safety net: no rule anywhere in this file relied on
   this previously, but 6,000+ lines of iteratively-added CSS is
   exactly the situation where one future absolute/negative-margin
   element could silently cause horizontal scroll on mobile. */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Who We Are — real photo replacing the abstract placeholder ── */
.wellness-photo-primary img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
}

/* ── Who We Are collage — single photo only (secondary placeholder removed) ── */
.wellness-photo-solo {
  width: 78% !important;
  max-width: 340px !important;
}
.wellness-photo-solo img {
  min-height: 340px;
}

/* ── Who We Are collage — fix: stack photo + card, no overlap ──
   (Previous fix enlarged the solo photo without moving the card,
   which still used its old absolute position tuned for a smaller
   photo + a second image for balance — they now collide.) */
.wellness-collage-inner {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
.wellness-photo-solo {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  top: auto !important;
}
.wellness-photo-solo img {
  min-height: 0;
  aspect-ratio: 16 / 11;
}
.wellness-card-dark {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 1.1rem;
}

/* ============================================================
   HERO — floating wellness service tags
   Replaces the old floating avatar-stack card with premium
   glass pills naming Calmyra's service categories. Positioned
   around the hero photo/rings, never over the face/copy/CTAs.
   ============================================================ */
.hero-wtags { pointer-events: none; }

.hero-wtag {
  --tag-rot: 0deg;
  --tag-float: 5px;
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 9px 16px 9px 12px;
  border-radius: 16px;
  background: rgba(250, 247, 241, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(173, 145, 100, 0.35);
  box-shadow: 0 12px 28px -10px rgba(58, 56, 32, 0.22);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-dark);
  letter-spacing: 0.01em;
  pointer-events: auto;
  transform: rotate(var(--tag-rot));
  transition: transform 300ms var(--ease-silk), box-shadow 300ms var(--ease-silk), border-color 300ms var(--ease-silk);
  animation: heroTagFloat 5s ease-in-out infinite;
}
.hero-wtag-icon { flex-shrink: 0; color: var(--color-sage); }

/* Speech-bubble tail — small rotated square peeking out from the edge
   nearest the photo, so each tag reads as a message pointing at it. */
.hero-wtag::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  top: 50%;
  margin-top: -5.5px;
  background: rgba(250, 247, 241, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(173, 145, 100, 0.35);
  transform: rotate(45deg);
  z-index: -1;
}
/* Left-side tags: tail points right, into the photo */
.hero-wtag--1::after,
.hero-wtag--3::after,
.hero-wtag--5::after { right: -5px; border-left: none; border-bottom: none; }
/* Right-side tags: tail points left, into the photo */
.hero-wtag--2::after,
.hero-wtag--4::after,
.hero-wtag--6::after { left: -5px; border-right: none; border-top: none; }

.hero-wtag:hover {
  transform: translateY(calc(-1 * var(--tag-float))) scale(1.03);
  box-shadow: 0 18px 36px -12px rgba(58, 56, 32, 0.3);
  border-color: var(--color-olive-gold);
  animation-play-state: paused;
}

@keyframes heroTagFloat {
  0%, 100% { transform: rotate(var(--tag-rot)) translateY(0); }
  50%      { transform: rotate(var(--tag-rot)) translateY(calc(-1 * var(--tag-float))); }
}

/* Two accent groups — colour variety pulled from the existing palette,
   no new hues. Sage for the clinical-leaning tags, gold for the
   coaching/performance-leaning ones. */
.hero-wtag--1, .hero-wtag--2, .hero-wtag--5 {
  background: rgba(228, 233, 225, 0.78);
  border-color: rgba(94, 134, 118, 0.38);
}
.hero-wtag--1 .hero-wtag-icon,
.hero-wtag--2 .hero-wtag-icon,
.hero-wtag--5 .hero-wtag-icon { color: var(--sage-teal-dark); }
.hero-wtag--1::after, .hero-wtag--2::after, .hero-wtag--5::after {
  background: rgba(228, 233, 225, 0.78);
  border-color: rgba(94, 134, 118, 0.38);
}

.hero-wtag--3, .hero-wtag--4, .hero-wtag--6 {
  background: rgba(239, 231, 218, 0.8);
  border-color: rgba(173, 145, 100, 0.42);
}
.hero-wtag--3 .hero-wtag-icon,
.hero-wtag--4 .hero-wtag-icon,
.hero-wtag--6 .hero-wtag-icon { color: var(--color-olive-gold); }
.hero-wtag--3::after, .hero-wtag--4::after, .hero-wtag--6::after {
  background: rgba(239, 231, 218, 0.8);
  border-color: rgba(173, 145, 100, 0.42);
}

/* Positions — anchored with calc() to the image's actual known geometry
   (fixed 268px wide, centered, ~357px tall in a 600px-tall stage) rather
   than percentages of the much wider surrounding container, so the tags
   sit a small, predictable distance from the photo's edges regardless
   of how wide .hero-visual-v2 itself renders. */
.hero-wtag--1 { top: 90px;  left: calc(50% - 304px); right: auto; --tag-rot: -2deg;   --tag-float: 5px; animation-duration: 5.4s; animation-delay: 0s; }
.hero-wtag--2 { top: 60px;  left: calc(50% + 154px); right: auto; --tag-rot: 1.5deg;  --tag-float: 4px; animation-duration: 6.2s; animation-delay: .8s; }
.hero-wtag--3 { top: 260px; left: calc(50% - 314px); right: auto; --tag-rot: 1deg;    --tag-float: 6px; animation-duration: 5.8s; animation-delay: 1.6s; }
.hero-wtag--4 { top: 240px; left: calc(50% + 149px); right: auto; --tag-rot: -1.5deg; --tag-float: 5px; animation-duration: 5s;   animation-delay: 2.3s; }
.hero-wtag--5 { top: 430px; left: calc(50% - 309px); right: auto; bottom: auto; --tag-rot: -2.5deg; --tag-float: 4px; animation-duration: 6.5s; animation-delay: .4s; }
.hero-wtag--6 { top: 470px; left: calc(50% + 159px); right: auto; bottom: auto; --tag-rot: 2deg;    --tag-float: 6px; animation-duration: 5.6s; animation-delay: 1.1s; }

/* Tablet — trim to 5; image shrinks to 240px wide here, so the anchor
   half-width drops from 134px to 120px accordingly. */
@media (max-width: 900px) {
  .hero-wtag { font-size: 0.75rem; padding: 8px 14px 8px 11px; }
  .hero-wtag--1 { left: calc(50% - 270px); }
  .hero-wtag--2 { left: calc(50% + 140px); }
  .hero-wtag--3 { left: calc(50% - 280px); }
  .hero-wtag--4 { left: calc(50% + 135px); }
  .hero-wtag--5 { left: calc(50% - 275px); }
  .hero-wtag--6 { display: none; }
}

/* ============================================================
   HERO — MOBILE REDESIGN (≤767px)
   Purpose-built mobile layout, not a scaled desktop grid.
   Order: nav → image → location badge → tagline → heading →
   description → primary CTA → secondary CTA.
   Final authority — overrides every earlier hero mobile rule.
   ============================================================ */
@media (max-width: 767px) {

  /* ── Section shell ── */
  .hero-v2 {
    padding: 120px 0 32px !important; /* 88px fixed navbar + 32px breathing room */
  }
  .hero-v2 .hero-panel-v2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── Visual block: image + location badge, normal flow ── */
  .hero-v2 .hero-visual-v2 {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .hero-rings { display: none !important; }

  /* Hero image — the primary visual, not a floating arch card */
  .hero-img-main {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(320px, 42vw, 380px) !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 44px -18px rgba(31,42,37,0.28) !important;
  }
  .hero-img-main img { width: 100%; height: 100%; object-fit: cover; }

  /* Floating wellness tags — limit to 2, anchored to the image corners
     using fixed offsets (the image is now the first flex child, so its
     top-left corner coincides with hero-visual-v2's own top-left). */
  .hero-wtags { position: absolute; top: 0; left: 0; right: 0; height: 0; }
  .hero-wtag { font-size: 0.68rem; padding: 6px 11px 6px 9px; gap: 5px; }
  .hero-wtag-icon svg { width: 12px; height: 12px; }
  .hero-wtag--1 { top: 14px; left: 10px; right: auto; bottom: auto; }
  .hero-wtag--3 { top: auto; bottom: 14px; right: 10px; left: auto; }
  /* --3 sits at the image's right edge on mobile (unlike its desktop
     mid-left spot), so its tail needs to flip to point left, not right. */
  .hero-wtag--3::after { right: auto; left: -5px; border-left: 1px solid rgba(173, 145, 100, 0.35); border-bottom: 1px solid rgba(173, 145, 100, 0.35); border-right: none; border-top: none; }
  .hero-wtag--2, .hero-wtag--4, .hero-wtag--5, .hero-wtag--6 { display: none !important; }

  /* Location badge — centered, in normal flow below the image */
  .hero-loc-pill {
    position: relative !important;
    bottom: auto !important; left: auto !important;
    transform: none !important;
    margin: 0 !important;
    font-size: 12px !important;
    padding: 9px 18px !important;
  }

  /* ── Copy block: tagline → heading → description → CTAs ── */
  .hero-v2 .hero-panel-v2 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .hero-v2 .hero-copy-v2 {
    order: 2 !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-tag {
    align-self: center !important;
    font-size: 12px;
    padding: 7px 14px;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
    flex-wrap: wrap;
    text-align: center;
    row-gap: 4px;
  }

  .hero-title-v2 {
    font-size: clamp(2rem, 6vw, 2.8rem) !important;
    text-align: center !important;
    text-wrap: balance;
    max-width: 100% !important;
  }
  .hero-title-v2 .word-mask { white-space: normal; }
  .hero-text-v2 {
    max-width: 95% !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  /* CTAs — stacked, equal width, centered, 16px gap, 24px above (16+8 spacing step) */
  .hero-actions-v2 {
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    gap: 16px !important;
    margin-top: 24px !important;
  }
  .hero-cta-primary, .hero-cta-secondary {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    padding: 16px 24px !important;
  }

  /* ── Floating breathing widgets — smaller, safely in the corner ── */
  .breathe-widgets { right: 16px !important; bottom: 16px !important; gap: 8px !important; }
  .breathe-widget-fab { width: 50px !important; height: 50px !important; }
  .breathe-widget-label { font-size: 0.68rem !important; padding: 6px 10px !important; }

  /* Background blobs were sized for a wide desktop hero — at mobile
     width they dominate the whole section instead of sitting behind
     the content, so shrink and dim them substantially. */
  .hero-v2 .hero-bg-blob--1 { width: 220px !important; height: 220px !important; opacity: 0.5; top: -80px !important; right: -60px !important; }
  .hero-v2 .hero-bg-blob--2 { width: 180px !important; height: 180px !important; opacity: 0.4; bottom: -60px !important; left: -60px !important; }
  .hero-v2 .hero-bg-blob--3 { display: none !important; }
}

/* ── Who We Are — calm music banner (wave art + circular play button) ── */
.wellness-audio-banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 84px;
  margin-top: 16px;
  padding: 0;
  border: none;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background:
    linear-gradient(115deg, rgba(58, 85, 73, 0.35) 0%, transparent 45%),
    linear-gradient(135deg, var(--sage-teal-deep) 0%, var(--sage-teal) 45%, var(--sage-teal-dark) 100%);
  box-shadow: 0 16px 34px -14px rgba(31, 42, 37, 0.45);
  transition: transform var(--dur-fast) var(--ease-silk), box-shadow var(--dur-fast) var(--ease-silk);
}
.wellness-audio-banner:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(31, 42, 37, 0.5); }
.wellness-audio-banner:focus-visible { outline: 2px solid var(--color-olive-gold); outline-offset: 3px; }

/* Abstract wave field — layered soft blobs standing in for a waveform */
.wellness-audio-wave {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 140% at 30% 110%, rgba(148, 172, 158, 0.65) 0%, transparent 60%),
    radial-gradient(ellipse 55% 130% at 55% -10%, rgba(212, 224, 210, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse 50% 120% at 78% 100%, rgba(58, 85, 73, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 45% 110% at 95% 0%, rgba(173, 145, 100, 0.35) 0%, transparent 55%);
  filter: blur(2px);
  animation: wellnessWaveDrift 9s ease-in-out infinite alternate;
}
@keyframes wellnessWaveDrift {
  0%   { transform: translateX(0) scale(1); }
  100% { transform: translateX(-3%) scale(1.06); }
}

.wellness-audio-circle {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-left: 18px;
  border-radius: 50%;
  background: rgba(20, 30, 25, 0.3);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: var(--white);
  backdrop-filter: blur(4px);
  transition: background var(--dur-fast) var(--ease-silk), transform var(--dur-fast) var(--ease-silk);
}
.wellness-audio-banner:hover .wellness-audio-circle { transform: scale(1.06); background: rgba(20, 30, 25, 0.45); }
.wellness-audio-circle svg { display: block; }
.wellness-audio-icon-play { margin-left: 2px; }

/* Soft expanding glow ring — invites the click until music is playing */
.wellness-audio-circle::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  animation: wellnessAudioPulse 2.2s ease-out infinite;
}
.wellness-audio-banner.is-playing .wellness-audio-circle::before { animation: none; opacity: 0; }
@keyframes wellnessAudioPulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Equalizer bars — appear to the right of the play circle once playing */
.wellness-audio-bars {
  position: relative;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 4px;
  height: 22px;
  margin-left: 16px;
}
.wellness-audio-bars span {
  width: 3.5px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  animation: wellnessAudioBar 1s ease-in-out infinite;
}
.wellness-audio-bars span:nth-child(1) { height: 8px;  animation-delay: 0s; }
.wellness-audio-bars span:nth-child(2) { height: 20px; animation-delay: 0.15s; }
.wellness-audio-bars span:nth-child(3) { height: 13px; animation-delay: 0.3s; }
.wellness-audio-bars span:nth-child(4) { height: 17px; animation-delay: 0.45s; }
@keyframes wellnessAudioBar {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}
.wellness-audio-banner.is-playing .wellness-audio-bars { display: inline-flex; }

@media (max-width: 640px) {
  .wellness-audio-banner { height: 68px; border-radius: 16px; }
  .wellness-audio-circle { width: 38px; height: 38px; margin-left: 14px; }
  .wellness-audio-bars { height: 18px; margin-left: 12px; }
}

/* ── Header/footer "Call us" icon buttons + Book-an-Appointment → WhatsApp ── */
.btn-nav-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--mint-400);
  color: var(--mint-800);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-silk), border-color var(--dur-fast) var(--ease-silk), transform var(--dur-fast) var(--ease-silk);
}
.btn-nav-call:hover {
  background: var(--mint-50);
  border-color: var(--mint-600);
  transform: translateY(-2px);
}
.btn-nav-call:focus-visible { outline: 2px solid var(--mint-600); outline-offset: 2px; }

.footer-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}
.footer-cta-row .footer-cta { margin: 0; }
.footer-cta-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(253, 251, 247, 0.08);
  border: 1.5px solid rgba(253, 251, 247, 0.3);
  color: rgba(253, 251, 247, 0.9);
  transition: background var(--dur-fast) var(--ease-silk), border-color var(--dur-fast) var(--ease-silk), transform var(--dur-fast) var(--ease-silk);
}
.footer-cta-call:hover {
  background: var(--color-olive-gold);
  border-color: var(--color-olive-gold);
  color: var(--white);
  transform: translateY(-2px);
}
.footer-cta-call:focus-visible { outline: 2px solid var(--color-olive-gold); outline-offset: 2px; }

@media (max-width: 1180px) {
  .btn-nav-call { width: 36px; height: 36px; }
}
@media (max-width: 900px) {
  .nav-actions { flex-wrap: wrap; }
  .btn-nav-call { order: -1; }
}

/* ============================================================
   BOX BREATHING WIDGET — full visual rebuild to match reference
   (circular gradient ring, leafy badge, 2x2 phase cards, dark
   forest CTA, Deep Breathing cross-link). Final authority.
   ============================================================ */
.breathe-widget-panel--box {
  width: 320px;
  padding: 1.75rem 1.5rem 1.25rem;
}

.breathe-widget-panel--box .breathe-widget-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--olive-gold-dark);
  background: var(--sage-light);
}

/* ── Circular progress ring ── */
.breathe-widget-panel--box .box-breath-wrap {
  width: 188px;
  height: 188px;
  margin: 4px auto 1.5rem;
}
.breathe-widget-panel--box .box-breath-svg { transform: rotate(-90deg); }
.breathe-widget-panel--box .box-breath-track {
  fill: none;
  stroke: rgba(58, 56, 32, 0.1);
  stroke-width: 4;
}
.breathe-widget-panel--box .box-breath-progress {
  fill: none;
  stroke: url(#boxBreathGradient);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
}
.breathe-widget-panel--box .box-breath-wrap.is-running .box-breath-progress {
  animation: boxDraw 16s linear infinite;
}

/* Small marker dot riding the top of the ring, plus faint wave
   decoration either side — purely atmospheric, like the reference. */
.box-breath-dot {
  position: absolute;
  top: 6px; left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--warm-gold);
  box-shadow: 0 0 0 3px var(--white);
}
.box-breath-decor {
  position: absolute;
  top: 50%;
  width: 60px; height: 46px;
  opacity: 0.35;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(transparent 47%, rgba(148, 172, 158, 0.7) 47%, rgba(148, 172, 158, 0.7) 53%, transparent 53%),
    linear-gradient(transparent 47%, rgba(173, 145, 100, 0.5) 47%, rgba(173, 145, 100, 0.5) 53%, transparent 53%);
  background-size: 60% 100%, 100% 100%;
  background-position: left center, right center;
  mask-image: radial-gradient(ellipse 100% 60% at center, black 40%, transparent 90%);
}
.box-breath-decor--a { left: -46px; transform: translateY(-50%) rotate(-8deg); }
.box-breath-decor--b { right: -46px; transform: translateY(-50%) scaleX(-1) rotate(-8deg); }

.box-breath-center { gap: 3px; }
.box-breath-leaf { color: var(--color-sage); margin-top: 2px; }

/* ── 2x2 phase cards (replaces the old pill row) ── */
.box-breath-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 1.1rem;
}
.box-breath-steps span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-dark);
  background: transparent;
  border: 1px solid var(--line);
  padding: 9px 8px;
  border-radius: 12px;
}
.box-breath-steps span svg { flex-shrink: 0; color: var(--color-sage); }
.box-breath-steps .box-breath-step--hold svg { color: var(--warm-gold-dark); }

/* ── Dark forest CTA (this panel only — brand gold elsewhere is unchanged) ── */
.breathe-widget-panel--box .breathing-toggle {
  width: 100%;
  justify-content: center;
  padding: 1rem 1.4rem;
  font-size: 0.92rem;
  background: linear-gradient(135deg, #1F3D2E 0%, #14251C 100%);
  box-shadow: 0 14px 30px -12px rgba(20, 37, 28, 0.55);
}

/* ── Deep Breathing cross-link footer ── */
.breathe-widget-crosslink-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1.1rem 0 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--warm-gold);
}
.breathe-widget-crosslink {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px 10px 8px;
  border: none;
  background: transparent;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-silk);
}
.breathe-widget-crosslink:hover { background: var(--sage-light); }
.breathe-widget-crosslink-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--sage-light);
  color: var(--sage-teal-dark);
}
.breathe-widget-crosslink-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.breathe-widget-crosslink-text strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-dark);
}
.breathe-widget-crosslink-text small { font-size: 0.75rem; color: var(--ink-soft); }
.breathe-widget-crosslink-chevron { flex-shrink: 0; color: var(--ink-mute); transition: transform var(--dur-fast) var(--ease-silk); }
.breathe-widget-crosslink:hover .breathe-widget-crosslink-chevron { transform: translateX(3px); }

@media (max-width: 480px) {
  .breathe-widget-panel--box { width: calc(100vw - 40px); max-width: 320px; }
}

/* ============================================================
   DEEP BREATHING WIDGET — full visual rebuild to match reference
   (scenic landscape circle, ripple ring + wave decor, 3-step
   process row, dark forest CTA). Final authority.
   ============================================================ */
.breathe-widget-panel--deep {
  width: 320px;
  padding: 1.75rem 1.5rem 1.5rem;
}
.breathe-widget-panel--deep .breathe-widget-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--olive-gold-dark);
  background: var(--champagne);
}

/* ── Stage: wave decor + ripple ring + scenic circle, centered ── */
.breath-circle-stage {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.breath-circle-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 210px; height: 210px;
  margin: -105px 0 0 -105px;
  border-radius: 50%;
  border: 1px solid rgba(148, 172, 158, 0.3);
}

.breath-circle.breath-circle--scenic {
  position: relative;
  z-index: 1;
  width: 168px;
  height: 168px;
  margin-bottom: 0;
  border-radius: 50%;
  overflow: hidden;
  background: none;
  box-shadow: 0 0 0 6px var(--white), 0 20px 44px rgba(31, 42, 37, 0.22);
}
.breath-circle-scene { position: absolute; inset: 0; overflow: hidden; }
.breath-circle-scene::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #E9E5DA 0%, #DAD6C9 40%, #C3C9BD 62%, #9FAA9C 100%);
}
.breath-circle-sun {
  position: absolute;
  left: 50%; top: 54%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 246, 0.95) 0%, rgba(255, 253, 246, 0.45) 45%, transparent 72%);
  filter: blur(1.5px);
}
.breath-circle-mountains {
  position: absolute;
  left: -12%; right: -12%;
  bottom: 36%;
  height: 52%;
}
.breath-circle-mountains--back {
  background: #97A594;
  opacity: 0.55;
  clip-path: polygon(0% 100%, 0% 58%, 18% 32%, 34% 50%, 50% 22%, 68% 46%, 84% 26%, 100% 52%, 100% 100%);
}
.breath-circle-mountains--front {
  bottom: 32%;
  height: 44%;
  background: #63715F;
  opacity: 0.8;
  clip-path: polygon(0% 100%, 0% 62%, 20% 38%, 38% 58%, 55% 30%, 72% 56%, 88% 36%, 100% 60%, 100% 100%);
}
.breath-circle-water {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  background: linear-gradient(180deg, #9BA598 0%, #7C8878 100%);
}
.breath-circle-water::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 40%; height: 100%;
  margin-left: -20%;
  background: linear-gradient(180deg, rgba(255, 253, 246, 0.55), transparent);
}

.breath-circle--scenic .breath-circle-label {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 30, 25, 0.32);
  backdrop-filter: blur(3px);
}
.breath-circle--scenic.is-running { animation: breathPulse 11s ease-in-out infinite; }

/* Faint wave lines drifting behind the circle — shared with Box Breathing */
.breathe-widget-decor {
  position: absolute;
  top: 50%;
  width: 70px; height: 50px;
  opacity: 0.3;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(transparent 47%, rgba(148, 172, 158, 0.7) 47%, rgba(148, 172, 158, 0.7) 53%, transparent 53%),
    linear-gradient(transparent 47%, rgba(173, 145, 100, 0.45) 47%, rgba(173, 145, 100, 0.45) 53%, transparent 53%);
  background-size: 60% 100%, 100% 100%;
  background-position: left center, right center;
  mask-image: radial-gradient(ellipse 100% 60% at center, black 40%, transparent 90%);
}
.breathe-widget-decor--a { left: -50px; transform: translateY(-50%) rotate(-6deg); }
.breathe-widget-decor--b { right: -50px; transform: translateY(-50%) scaleX(-1) rotate(-6deg); }

/* ── 3-step process row ── */
.breath-process-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 0.25rem;
}
.breath-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.breath-process-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
}
.breath-process-icon--sage { background: var(--sage-light); color: var(--sage-teal-dark); }
.breath-process-icon--peach { background: var(--pastel-peach); color: var(--warm-gold-dark); }
.breath-process-step strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-dark);
}
.breath-process-step small { font-size: 0.72rem; color: var(--ink-soft); }
.breath-process-arrow {
  flex-shrink: 0;
  color: var(--line-gold);
  margin-top: 18px;
}

/* ── Dark forest CTA, matching Box Breathing ── */
.breathe-widget-panel--deep .breathing-toggle {
  width: 100%;
  justify-content: center;
  padding: 1rem 1.4rem;
  font-size: 0.92rem;
  margin-top: 0.4rem;
  background: linear-gradient(135deg, #1F3D2E 0%, #14251C 100%);
  box-shadow: 0 14px 30px -12px rgba(20, 37, 28, 0.55);
}
.breathe-widget-panel--deep .breathe-widget-crosslink-divider {
  margin: 1.1rem 0 0.9rem;
  padding-top: 0;
  border-top: none;
  color: var(--ink-faint);
}

@media (max-width: 480px) {
  .breathe-widget-panel--deep { width: calc(100vw - 40px); max-width: 320px; }
}

/* ── Why Calmyra cards — force equal height regardless of content length ── */
#why .feature-grid {
  align-items: stretch !important;
}
#why .feature-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ============================================================
   WHO WE ARE — single left-alignment guide (final authority)
   One flex column, one shared left edge for eyebrow, heading,
   paragraph, and everything below. No per-element margin-left
   or padding-left, no font-size/colour changes.
   ============================================================ */
#about .intro-copy-wellness {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
#about .intro-copy-wellness > * {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  align-self: stretch;
}
#about .intro-copy-wellness .wellness-eyebrow {
  align-self: flex-start;
  margin: 0 0 16px !important;
}
#about .intro-copy-wellness h2 {
  margin: 0 0 24px !important;
}
#about .intro-copy-wellness > p {
  margin: 0 0 24px !important;
  line-height: 1.7 !important;
  max-width: 62ch;
}

/* ── "Who We Are" dark card — two balanced lines instead of an
   awkward 3-line wrap. Each practice + location stays on its own
   line, vertically centered, consistent spacing between them. ── */
.wellness-card-dark {
  display: flex;
  align-items: center;
  min-height: 84px;
}
.wellness-card-dark p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.wellness-card-line {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}

/* Back link used on founder/team pages */
.back-to-team {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--sage-teal-deep);
  font-weight: 600;
  text-decoration: none;
  background: rgba(255,255,255,0.0);
}
.back-to-team:hover { text-decoration: underline; }

/* Ensure the two-line wellness card copy is always white for legibility */
#about .wellness-card-line,
.wellness-collage .wellness-card-line {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}


/* ── Header alignment fix — nav-container must match .container's
   own max-width (1200px) and horizontal padding (2rem) exactly, so
   the logo/nav/CTAs line up perfectly with the page content below
   on every page. Previously used a wider 1320px container. ── */
.nav-container {
  max-width: 1200px !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
@media (max-width: 640px) {
  .nav-container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* ── Fix: "Book an Appointment" text was compressing/clipping in the
   header — the button was allowed to shrink below its content's
   natural width once the call-icon button was added alongside it. ── */
.nav-actions .btn-nav,
.nav-actions .btn-nav-call {
  flex-shrink: 0;
}
.btn-nav--book {
  padding: 0.62rem 1.05rem !important;
}
@media (max-width: 1300px) and (min-width: 1061px) {
  .nav-actions { gap: 0.45rem; }
  .btn-nav { padding: 0.58rem 0.95rem !important; font-size: 0.82rem !important; }
}