html { scroll-behavior: smooth; }
body { background: #faf7f1; }

/* Subtle tactile grain — restrained, just enough to keep the black/gold from feeling flat/digital */
.grain::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
opacity: 0.05;
pointer-events: none;
mix-blend-mode: overlay;
}

/* Gold foil CTA — the signature material of the piece */
.foil-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 20px -8px rgba(197,154,64,0.55);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, border-color 0.4s ease;
  will-change: transform, box-shadow;
}
.foil-btn::after {
  content: '';
  position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-140%) skewX(-12deg);
}
.foil-btn:hover::after { animation: shimmer 1.1s ease-in-out; }
.foil-btn:hover {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 14px 30px -8px rgba(197,154,64,0.75), 0 0 15px 1px rgba(227, 200, 135, 0.3);
  color: #f0e9e9;
  background: #222;
}
.foil-btn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 6px 12px -4px rgba(197,154,64,0.5);
  transition: transform 0.1s, box-shadow 0.1s;
}

/* Arrow micro-animation inside buttons */
.foil-btn i.fa-arrow-right,
.hero-outline-btn i.fa-arrow-right {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.foil-btn:hover i.fa-arrow-right,
.hero-outline-btn:hover i.fa-arrow-right {
  transform: translateX(4px);
}

.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
    background: #c59a40;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.25s ease;
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }

.marquee-track { display: flex; width: max-content; }

.foot-link { transition: color .2s ease, padding-left .2s ease; }
.foot-link:hover { color: #e3c887; padding-left: 4px; }

.social-ring {
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}
.social-ring:hover {
  background: #c59a40;
  border-color: #e3c887;
  color: #14110d;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 16px -4px rgba(197, 154, 64, 0.45);
}

@media (prefers-reduced-motion: reduce) {
.animate-marquee { animation: none; }
* { scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════
   NAVBAR — THIN GOLD BORDER LINES (top + bottom)
   ══════════════════════════════════════════════════ */
.navbar-gold-borders {
  /* pseudo-elements sit outside the normal flow so they
     don't push content and stay full-width */
  position: relative;
}

/* Top gold line */
.navbar-gold-borders::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent       0%,
    #8f6f2c          8%,
    #e3c887          35%,
    #c59a40          50%,
    #e3c887          65%,
    #8f6f2c          92%,
    transparent      100%
  );
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
}

/* Bottom gold line */
.navbar-gold-borders::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent       0%,
    #8f6f2c          8%,
    #e3c887          35%,
    #c59a40          50%,
    #e3c887          65%,
    #8f6f2c          92%,
    transparent      100%
  );
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════
   HEADER — WARM DARK GRADIENT (non-scrolled state)
   ══════════════════════════════════════════════════ */
#site-header:not(.is-scrolled) {
  /* Replaces flat bg-ink/95 with a richer, warmer gradient */
  background: linear-gradient(
    175deg,
    #0a0806 0%,
    #141009 45%,
    #1b1712 100%
  ) !important;
}

/* ═══════════════════════════════════════════════════
   LOGO HOVER GLOW + GOLD UNDERLINE
   ══════════════════════════════════════════════════ */
.logo-link {
  position: relative;
  /* gives ::after a positioning context */
}

.logo-link img {
  transition: filter 0.4s ease;
}

.logo-link:hover img,
.logo-link:focus-visible img {
  filter:
    drop-shadow(0 0 6px rgba(197, 154, 64, 0.55))
    drop-shadow(0 0 18px rgba(197, 154, 64, 0.22));
}

/* Animated gold underline that fans out from centre */
.logo-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 72%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #c59a40 40%,
    #e3c887 50%,
    #c59a40 60%,
    transparent
  );
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.logo-link:hover::after,
.logo-link:focus-visible::after {
  transform: translateX(-50%) scaleX(1);
}

/* ═══════════════════════════════════════════════════
   FOOTER GOLD GRADIENT DIVIDER
   ══════════════════════════════════════════════════ */
.gold-gradient-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent       0%,
    #8f6f2c          10%,
    #e3c887          50%,
    #8f6f2c          90%,
    transparent      100%
  );
  opacity: 0.7;
}

/* Soft warm glow layer beneath the line */
.gold-gradient-divider-glow {
  height: 6px;
  margin-top: -1px;
  background: linear-gradient(
    90deg,
    transparent       0%,
    rgba(197, 154, 64, 0.12) 30%,
    rgba(227, 200, 135, 0.18) 50%,
    rgba(197, 154, 64, 0.12) 70%,
    transparent       100%
  );
  filter: blur(4px);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   SCROLLED HEADER — polished glass refinement
   ══════════════════════════════════════════════════ */
#site-header.is-scrolled {
  border-bottom: 1px solid rgba(197, 154, 64, 0.13);
}

/* Header state, toggled by JS on scroll */
#site-header.is-scrolled {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    background: rgba(17,17,17,0.88);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 30px -18px rgba(0,0,0,0.6);
}

/* Mobile drawer */
#mobile-drawer { transform: translateX(100%); transition: transform .45s cubic-bezier(.65,0,.35,1); }
#mobile-drawer.open { transform: translateX(0); }
#drawer-backdrop { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
#drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* Programs desktop dropdown */
#programs-panel {
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.programs-group:hover #programs-panel,
.programs-group:focus-within #programs-panel {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* ==========================================================================
   HERO IMAGE COLLAGE HOVER EFFECT
   ========================================================================== */
.hero-image-left,
.hero-image-center,
.hero-image-right {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}

.hero-image-left:hover,
.hero-image-center:hover,
.hero-image-right:hover {
  z-index: 30 !important;
}

.hero-image-left:hover {
  transform: rotate(0deg) scale(1.08) translateY(-8px) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3) !important;
}

.hero-image-center:hover {
  transform: scale(1.08) translateY(-8px) !important;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4) !important;
}

.hero-image-right:hover {
  transform: rotate(0deg) scale(1.08) translateY(-8px) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3) !important;
}

/* Increase collage width & height by 20% when screen width is less than 500px */
@media (max-width: 499px) {
  .hero-image-left {
    width: 34.8% !important;
  }
  .hero-image-center {
    width: 43.2% !important;
  }
  .hero-image-right {
    width: 34.8% !important;
  }
}

/* ==========================================================================
   HERO DARK BACKGROUND THEME
   ========================================================================== */

/* Hero section dark background — rich warm near-black with a subtle gold gradient */
.hero-dark {
  background: linear-gradient(
    180deg,
    #0d0b08  0%,
    #1b1712  55%,
    #16130f  100%
  );
  isolation: isolate;
}

/* Thin gold top-edge accent line where header meets hero */
.hero-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent  0%,
    #8f6f2c     10%,
    #e3c887     50%,
    #8f6f2c     90%,
    transparent 100%
  );
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

/* Image card glow on dark — gold-tinted shadow instead of plain black */
.hero-dark .hero-image-left,
.hero-dark .hero-image-center,
.hero-dark .hero-image-right {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(197, 154, 64, 0.08);
}

.hero-dark .hero-image-left:hover {
  box-shadow: 0 28px 55px -12px rgba(0, 0, 0, 0.65),
              0 0 24px -6px rgba(197, 154, 64, 0.18) !important;
}

.hero-dark .hero-image-center:hover {
  box-shadow: 0 34px 65px -15px rgba(0, 0, 0, 0.75),
              0 0 30px -6px rgba(197, 154, 64, 0.22) !important;
}

.hero-dark .hero-image-right:hover {
  box-shadow: 0 28px 55px -12px rgba(0, 0, 0, 0.65),
              0 0 24px -6px rgba(197, 154, 64, 0.18) !important;
}

/* Outline secondary CTA styled for dark background */
.hero-outline-btn {
  background: transparent;
  color: #faf7f1;
  border: 1px solid rgba(197, 154, 64, 0.4);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              background-color 0.4s ease,
              color 0.4s ease;
  will-change: transform, box-shadow;
}
.hero-outline-btn:hover {
  transform: translateY(-3px) scale(1.025);
  background: rgba(197, 154, 64, 0.08);
  border-color: #c59a40;
  color: #e3c887;
  box-shadow: 0 10px 20px -8px rgba(197,154,64,0.25),
              0 0 15px -3px rgba(197,154,64,0.1);
}
.hero-outline-btn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 4px 8px -4px rgba(197,154,64,0.1);
  transition: transform 0.1s, box-shadow 0.1s;
}

/* Header and Mobile Drawer Menu Toggles */
#drawer-open,
#drawer-close {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}
#drawer-open:hover {
  transform: scale(1.08);
  border-color: #c59a40;
  background-color: rgba(197, 154, 64, 0.1);
  color: #e3c887;
  box-shadow: 0 0 12px rgba(197, 154, 64, 0.15);
}
#drawer-close:hover {
  transform: rotate(90deg) scale(1.08);
  border-color: #c59a40;
  background-color: rgba(197, 154, 64, 0.1);
  color: #e3c887;
  box-shadow: 0 0 12px rgba(197, 154, 64, 0.15);
}

 /* ==========================================================================
     ABOUT SECTION — asymmetric photo pair + floating gold "foil badge"
     ========================================================================== */
  .about-photos-grid {
    grid-template-columns: 1fr 1.2fr;
  }
  .about-photo-a,
  .about-photo-b {
    transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s cubic-bezier(.16,1,.3,1);
    will-change: transform;
  }
  .about-photo-a:hover,
  .about-photo-b:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 28px 55px -15px rgba(0, 0, 0, 0.65), 
                0 0 20px -4px rgba(197, 154, 64, 0.22),
                0 0 0 1px rgba(197, 154, 64, 0.25);
  }
 
  /* Floating quote badge — same foil material as the site's signature CTA,
     repurposed as an emblem rather than a button */
  .about-foil-badge {
    background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
    color: #14110d;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 18px 34px -12px rgba(20,17,13,0.45);
    animation: about-badge-float 5.5s ease-in-out infinite;
  }
  @keyframes about-badge-float {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%      { transform: rotate(-4deg) translateY(-10px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .about-foil-badge { animation: none; }
  }
 
/* SUCCESS STORIES SECTION */
.story-dark {
  background: linear-gradient(180deg, #0d0b08 0%, #1b1712 55%, #16130f 100%);
  isolation: isolate;
}
.story-card {
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.story-card:hover { transform: translateY(-6px); }

.story-after {
  box-shadow: 0 20px 45px -15px rgba(0,0,0,0.6), 0 0 0 1px rgba(197,154,64,0.1);
  transition: box-shadow .5s ease;
}
.story-card:hover .story-after {
  box-shadow: 0 26px 55px -14px rgba(0,0,0,0.65), 0 0 26px -6px rgba(197,154,64,0.2);
}

.story-before-frame {
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.55);
  transform: rotate(-10deg);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.story-card:hover .story-before-frame {
  transform: rotate(-5deg) translateY(-10px);
  transition-delay: ease 0.1s;
}

.stat-divider { width: 1px; background: rgba(197,154,64,0.25); }

/* Reveal-on-scroll base state (GSAP swaps these in via .js-reveal) */
.js-reveal { opacity: 0; }

@media (max-width: 500px) {
  .about-foil-badge {
    display: none;
  }
}

/* ==========================================================================
   HOW IT WORKS SECTION — append to main.css
   ========================================================================== */

.how-card {
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              border-color .4s ease,
              box-shadow .5s ease;
  will-change: transform;
}
.how-card:hover {
  transform: translateY(-6px);
  border-color: rgba(197, 154, 64, 0.35);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,0.55), 0 0 22px -8px rgba(197,154,64,0.18);
}

/* Final step is the "payoff" card — gets the foil treatment */
.how-card-highlight {
  border-color: rgba(197, 154, 64, 0.45) !important;
  background: linear-gradient(160deg, rgba(197,154,64,0.10) 0%, rgba(27,23,18,0.4) 60%) !important;
  box-shadow: 0 0 0 1px rgba(197,154,64,0.18), 0 22px 48px -16px rgba(0,0,0,0.6);
}
.how-card-highlight .how-icon {
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
  border-color: transparent;
}
.how-card-highlight .how-index {
  color: rgba(227, 200, 135, 0.55);
}

.how-icon {
  transition: transform .4s cubic-bezier(.16,1,.3,1), background-color .4s ease, color .4s ease, border-color .4s ease;
}
.how-card:hover .how-icon {
  transform: scale(1.08) rotate(-4deg);
}

/* Connector arrows between steps — horizontal on desktop, vertical on mobile */
.how-arrow i {
  animation: how-pulse 2.2s ease-in-out infinite;
}
@keyframes how-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* Fold into the existing prefers-reduced-motion block in main.css */
@media (prefers-reduced-motion: reduce) {
  .how-arrow i { animation: none; }
  .how-card, .how-icon { transition: none; }
}

/* ==========================================================================
   PROGRAMS SECTION — append to main.css
   ========================================================================== */

/* Card lift + shadow on hover/focus, matching .story-card / .how-card */
.program-card {
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.7), 
              0 0 0 1px rgba(197, 154, 64, 0.12);
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.program-card:hover,
.program-card:focus-visible,
.program-card.is-active {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.8), 
              0 0 25px -6px rgba(197, 154, 64, 0.25),
              0 0 0 1px rgba(197, 154, 64, 0.3);
}

/* Two stacked images cross-fade + soft zoom */
.program-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.program-img-default { opacity: 1; transform: scale(1); }
.program-img-hover { opacity: 0; transform: scale(1.08); transition: ease-in-out 1s; }

.program-card:hover .program-img-default,
.program-card:focus-visible .program-img-default,
.program-card.is-active .program-img-default {
  opacity: 0;
  transform: scale(1.04);
}
.program-card:hover .program-img-hover,
.program-card:focus-visible .program-img-hover,
.program-card.is-active .program-img-hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Overlay base — gradient for legibility over photography */
.program-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  transition: opacity .45s cubic-bezier(.16,1,.3,1);
}

/* Default state — title only, soft gradient */
.program-overlay-default {
  opacity: 1;
  background: linear-gradient(to top, rgba(11,9,7,0.85) 0%, rgba(11,9,7,0.15) 55%, transparent 100%);
}
.program-card:hover .program-overlay-default,
.program-card:focus-visible .program-overlay-default,
.program-card.is-active .program-overlay-default {
  opacity: 0;
}

/* Hover state — darker overlay, title + description + CTA */
.program-overlay-hover {
  opacity: 0;
  background: linear-gradient(to top, rgba(11,9,7,0.92) 0%, rgba(11,9,7,0.55) 60%, rgba(11,9,7,0.15) 100%);
}
.program-card:hover .program-overlay-hover,
.program-card:focus-visible .program-overlay-hover,
.program-card.is-active .program-overlay-hover {
  opacity: 1;
}

/* Description + CTA slide up into place */
.program-overlay-hover .program-desc,
.program-overlay-hover .program-cta {
  transform: translateY(14px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.program-card:hover .program-overlay-hover .program-desc,
.program-card:focus-visible .program-overlay-hover .program-desc,
.program-card.is-active .program-overlay-hover .program-desc {
  transform: translateY(0);
  opacity: 1;
  transition-delay: .05s;
}
.program-card:hover .program-overlay-hover .program-cta,
.program-card:focus-visible .program-overlay-hover .program-cta,
.program-card.is-active .program-overlay-hover .program-cta {
  transform: translateY(0);
  opacity: 1;
  transition-delay: .12s;
}

/* Arrow nudges right on hover, matching .foil-btn arrow micro-animation */
.program-cta i {
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.program-card:hover .program-cta i,
.program-card:focus-visible .program-cta i,
.program-card.is-active .program-cta i {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .program-card,
  .program-img,
  .program-overlay,
  .program-overlay-hover .program-desc,
  .program-overlay-hover .program-cta,
  .program-cta i {
    transition: none !important;
  }
}

/* ==========================================================================
   ABOUT HER MOM BODY PAGE — append to main.css
   Prefixed with "apg-" (About Page) to avoid collisions with the homepage's
   existing .about-* classes (about-photo-a, about-copy, etc).
   ========================================================================== */

/* ---- Floating decorative shapes (hero + vision + final CTA) ---- */
.apg-float-shape {
  animation: apg-float 9s ease-in-out infinite;
  will-change: transform;
}
.apg-float-shape-b { animation-duration: 11s; animation-delay: -3s; }
.apg-float-shape-c { animation-duration: 10s; animation-delay: -5s; }
.apg-float-shape-d { animation-duration: 12s; animation-delay: -2s; }

@keyframes apg-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-18px) translateX(8px); }
}

/* ---- Welcome section: content card ---- */
.apg-welcome-card {
  background: rgba(17, 17, 17, 0.6);
  border: 1px solid rgba(197, 154, 64, 0.15);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.55);
  transition: transform .5s cubic-bezier(.16, 1, 0.3, 1), box-shadow .5s ease, border-color .4s ease, background-color .4s ease;
}
.apg-welcome-card:hover {
  transform: translateY(-4px);
  background: rgba(17, 17, 17, 0.85);
  border-color: rgba(197, 154, 64, 0.35);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 20px -5px rgba(197, 154, 64, 0.15);
}
.apg-welcome-image img {
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.apg-welcome-image:hover img {
  transform: scale(1.04);
}

/* ---- Our Approach: icon cards ---- */
.apg-approach-card {
  position: relative;
  background: rgba(250, 247, 241, 0.04);
  border: 1px solid rgba(197, 154, 64, 0.15);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  text-align: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              border-color .4s ease,
              box-shadow .5s ease,
              background-color .4s ease;
  will-change: transform;
}
.apg-approach-card:hover,
.apg-approach-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(197, 154, 64, 0.4);
  background: rgba(250, 247, 241, 0.06);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,0.55), 0 0 22px -8px rgba(197,154,64,0.2);
}
.apg-approach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(227,200,135,0.18) 0%, rgba(143,111,44,0.18) 100%);
  border: 1px solid rgba(197, 154, 64, 0.3);
  color: #e3c887;
  font-size: 1rem;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .4s ease;
}
.apg-approach-card:hover .apg-approach-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
}

/* ---- Our Vision: quote card (static foil material, not a button) ---- */
.foil-btn-static {
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 18px 34px -12px rgba(20,17,13,0.35);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
.foil-btn-static:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 26px 46px -14px rgba(20,17,13,0.4);
}

/* ---- Why "Her Mom Body": storytelling section ---- */
.apg-story-quote-mark {
  font-size: 7rem;
  line-height: 1;
  color: rgba(197, 154, 64, 0.22);
  margin-bottom: -2rem;
}
.apg-story-line {
  opacity: 0;
  transform: translateX(-14px);
}
.apg-story-rule {
  transform: scaleY(0);
  transform-origin: top;
}

/* ---- Meet the Founder ---- */
.apg-founder-frame {
  box-shadow: 0 24px 48px -18px rgba(0,0,0,0.35), 0 0 0 1px rgba(197,154,64,0.12);
  transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease;
}
.apg-founder-frame:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 60px -18px rgba(0, 0, 0, 0.65), 0 0 24px -6px rgba(197, 154, 64, 0.22);
}
.apg-founder-blob {
  animation: apg-float 10s ease-in-out infinite;
}
.apg-founder-signature {
  transform: rotate(-2deg);
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .apg-float-shape,
  .apg-founder-blob {
    animation: none !important;
  }
  .apg-approach-card,
  .apg-approach-icon,
  .apg-welcome-card,
  .apg-welcome-image img,
  .apg-founder-frame,
  .foil-btn-static {
    transition: none !important;
  }
}


/* CONTACT PAGE */

/* ---- Breadcrumb ---- */
.con-hero-breadcrumb a { transition: color .3s ease; }

/* ---- Info cards (Contact Information) ---- */
.con-info-card {
  position: relative;
  background: rgba(250, 247, 241, 0.04);
  border: 1px solid rgba(197, 154, 64, 0.15);
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  text-align: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              border-color .4s ease,
              box-shadow .5s ease,
              background-color .4s ease;
  will-change: transform;
}
.con-info-card:hover,
.con-info-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(197, 154, 64, 0.4);
  background: rgba(250, 247, 241, 0.07);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,0.55), 0 0 22px -8px rgba(197,154,64,0.22);
}
.con-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, rgba(227,200,135,0.18) 0%, rgba(143,111,44,0.18) 100%);
  border: 1px solid rgba(197, 154, 64, 0.3);
  color: #e3c887;
  font-size: 1.1rem;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .4s ease, color .4s ease;
}
.con-info-card:hover .con-info-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
}

/* ---- Form card (glassmorphism, matches .apg-welcome-card material) ---- */
.con-form-card {
  background: rgba(17, 17, 17, 0.6);
  border: 1px solid rgba(197, 154, 64, 0.15);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.55);
  transition: border-color .4s ease, box-shadow .5s ease;
}
.con-form-card:focus-within {
  border-color: rgba(197, 154, 64, 0.3);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 20px -5px rgba(197, 154, 64, 0.12);
}

/* ---- Floating-label fields ---- */
.con-field { position: relative; }

.con-input,
.con-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(197, 154, 64, 0.22);
  border-radius: 0.85rem;
  padding: 1.35rem 1.1rem 0.55rem;
  color: #faf7f1;
  font-family: '"Plus Jakarta Sans"', sans-serif;
  font-size: 0.95rem;
  transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
}
.con-textarea { padding-top: 1.5rem; min-height: 10rem; resize: vertical; }

.con-input:hover,
.con-textarea:hover { border-color: rgba(197, 154, 64, 0.35); }

.con-input:focus,
.con-textarea:focus {
  outline: none;
  border-color: #c59a40;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(197, 154, 64, 0.12);
}

.con-label {
  position: absolute;
  left: 1.1rem;
  top: 1.05rem;
  font-size: 0.95rem;
  color: #b7a98c;
  pointer-events: none;
  transform-origin: left top;
  transition: transform .25s cubic-bezier(.16,1,.3,1), color .25s ease, top .25s ease;
}

/* Float the label up when focused OR when the field has a value
   (":placeholder-shown" requires inputs to carry placeholder=" ") */
.con-input:focus + .con-label,
.con-input:not(:placeholder-shown) + .con-label,
.con-textarea:focus + .con-label,
.con-textarea:not(:placeholder-shown) + .con-label {
  top: 0.5rem;
  transform: scale(0.72);
  color: #e3c887;
}

/* Required-field asterisk */
.con-label .con-required { color: #c59a40; margin-left: 2px; }

/* Inline validation message */
.con-error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #e3a887;
  margin-top: 0.45rem;
  font-family: '"Plus Jakarta Sans"', sans-serif;
}
.con-field.has-error .con-input,
.con-field.has-error .con-textarea {
  border-color: rgba(227, 120, 120, 0.55);
}
.con-field.has-error .con-error { display: flex; }

/* ---- Submit button loading state ---- */
.con-submit-btn { position: relative; }
.con-submit-btn .con-btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(20, 17, 13, 0.25);
  border-top-color: #14110d;
  border-radius: 50%;
  animation: con-spin 0.7s linear infinite;
}
.con-submit-btn.is-loading .con-btn-label,
.con-submit-btn.is-loading .fa-arrow-right { opacity: 0; }
.con-submit-btn.is-loading .con-btn-spinner {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.con-submit-btn.is-loading { pointer-events: none; opacity: 0.85; }
@keyframes con-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Success state after submit */
.con-form-success {
  display: none;
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.con-form-success.is-visible { display: block; }
.con-form-success i {
  font-size: 2.5rem;
  color: #e3c887;
  margin-bottom: 1.25rem;
}

/* ---- Right column: "Get in Touch" info panel ---- */
.con-panel-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.con-panel-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(227,200,135,0.18) 0%, rgba(143,111,44,0.18) 100%);
  border: 1px solid rgba(197, 154, 64, 0.3);
  color: #e3c887;
  font-size: 0.95rem;
}

/* ---- FAQ accordion ---- */
.con-faq-item {
  border: 1px solid rgba(197, 154, 64, 0.15);
  border-radius: 1rem;
  background: rgba(250, 247, 241, 0.03);
  overflow: hidden;
  transition: border-color .4s ease, background-color .4s ease;
}
.con-faq-item:hover { border-color: rgba(197, 154, 64, 0.3); }

.con-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.4rem 1.6rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #faf7f1;
  font-family: '"Fraunces"', serif;
}
.con-faq-icon-wrap {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(197, 154, 64, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c59a40;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background-color .4s ease, color .4s ease;
}
.con-faq-item.is-open .con-faq-icon-wrap {
  transform: rotate(135deg);
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
}

.con-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.16,1,.3,1);
}
.con-faq-item.is-open .con-faq-panel { grid-template-rows: 1fr; }
.con-faq-panel-inner { overflow: hidden; }
.con-faq-answer {
  padding: 0 1.6rem 1.6rem;
  color: #b7a98c;
  font-family: '"Plus Jakarta Sans"', sans-serif;
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .con-faq-panel { transition: none; }
  .con-faq-icon-wrap { transition: none; }
}

/* ---- Map section ---- */
.con-map-frame {
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 28px 55px -18px rgba(0,0,0,0.6), 0 0 0 1px rgba(197,154,64,0.15);
}
.con-map-frame iframe { display: block; filter: grayscale(0.3) contrast(1.05); }

.con-map-card {
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(197, 154, 64, 0.25);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.6);
}

/* ---- Community invitation floating shapes reuse .apg-float-shape ---- */

@media (prefers-reduced-motion: reduce) {
  .con-info-card, .con-info-icon, .con-form-card, .con-input, .con-textarea, .con-label {
    transition: none !important;
  }
}


/* ==========================================================================
   MEMBERSHIP PAGE — append to main.css
   Prefixed with "mem-" to avoid collisions with existing page classes
   (apg-*, con-*, story-*, program-*, how-*).
   ========================================================================== */

/* ---- Breadcrumb ---- */
.mem-breadcrumb a { transition: color .3s ease; }
.mem-breadcrumb a:hover { color: #e3c887; }
.mem-breadcrumb .mem-crumb-sep { color: rgba(197, 154, 64, 0.4); }

/* ---- Intro: pillar strip (replaces numeric stat blocks — these are
   qualities, not counts, so no digits or "01/02" ordering) ---- */
.mem-pillar {
  opacity: 0;
  transform: translateY(16px);
}
.mem-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(227,200,135,0.18) 0%, rgba(143,111,44,0.18) 100%);
  border: 1px solid rgba(197, 154, 64, 0.3);
  color: #e3c887;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* ---- Benefit cards (Why Become a Member) — mirrors .apg-approach-card
   proportions but slightly deeper padding for an 8-up grid ---- */
.mem-benefit-card {
  position: relative;
  background: rgba(250, 247, 241, 0.04);
  border: 1px solid rgba(197, 154, 64, 0.15);
  border-radius: 1rem;
  padding: 2rem 1.6rem;
  text-align: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              border-color .4s ease,
              box-shadow .5s ease,
              background-color .4s ease;
  will-change: transform;
}
.mem-benefit-card:hover,
.mem-benefit-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(197, 154, 64, 0.4);
  background: rgba(250, 247, 241, 0.06);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,0.55), 0 0 22px -8px rgba(197,154,64,0.2);
}
.mem-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(227,200,135,0.18) 0%, rgba(143,111,44,0.18) 100%);
  border: 1px solid rgba(197, 154, 64, 0.3);
  color: #e3c887;
  font-size: 1rem;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .4s ease, color .4s ease;
}
.mem-benefit-card:hover .mem-benefit-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
}

/* ---- Experience: alternating image/copy rows ---- */
.mem-experience-image img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.mem-experience-image:hover img { transform: scale(1.04); }
.mem-experience-row:nth-child(even) .mem-experience-image { order: 2; }
.mem-experience-row:nth-child(even) .mem-experience-copy { order: 1; }

/* ---- Includes grid — reuses .con-info-card visual language ---- */
.mem-include-card {
  position: relative;
  background: rgba(250, 247, 241, 0.04);
  border: 1px solid rgba(197, 154, 64, 0.15);
  border-radius: 1rem;
  padding: 1.85rem 1.6rem;
  text-align: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              border-color .4s ease,
              box-shadow .5s ease,
              background-color .4s ease;
  will-change: transform;
}
.mem-include-card:hover,
.mem-include-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(197, 154, 64, 0.4);
  background: rgba(250, 247, 241, 0.07);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,0.55), 0 0 22px -8px rgba(197,154,64,0.22);
}
.mem-include-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(227,200,135,0.18) 0%, rgba(143,111,44,0.18) 100%);
  border: 1px solid rgba(197, 154, 64, 0.3);
  color: #e3c887;
  font-size: 1rem;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .4s ease, color .4s ease;
}
.mem-include-card:hover .mem-include-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
}

/* ---- Success Journey Timeline (signature element) ----
   Desktop: horizontal line, nodes light up left-to-right as the section
   scrolls into view. Mobile: the same line rotates to vertical. */
.mem-timeline-track {
  position: relative;
}
.mem-timeline-line-bg {
  background: rgba(197, 154, 64, 0.18);
}
.mem-timeline-line-fill {
  background: linear-gradient(90deg, #8f6f2c 0%, #e3c887 50%, #c59a40 100%);
  transform: scaleX(0);
  transform-origin: left;
}
@media (max-width: 767px) {
  .mem-timeline-line-fill { transform: scaleY(0); transform-origin: top; }
}
.mem-timeline-node {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background: #1b1712;
  border: 1px solid rgba(197, 154, 64, 0.3);
  color: #b7a98c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background .5s ease, border-color .5s ease, color .5s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
  position: relative;
  z-index: 2;
}
.mem-timeline-node.is-active {
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  border-color: #e3c887;
  color: #14110d;
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(197,154,64,0.12), 0 10px 24px -8px rgba(0,0,0,0.5);
}
.mem-timeline-label {
  opacity: 0.55;
  transition: opacity .5s ease, color .5s ease;
}
.mem-timeline-node.is-active + .mem-timeline-label,
.mem-timeline-step.is-active .mem-timeline-label {
  opacity: 1;
}

/* ---- Community section ---- */
.mem-community-frame {
  box-shadow: 0 24px 48px -18px rgba(0,0,0,0.5), 0 0 0 1px rgba(197,154,64,0.12);
}

/* ---- Shared reveal base state ---- */
.mem-reveal { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .mem-timeline-line-fill { transition: none; }
  .mem-testi-track { transition: none; }
}


/* ---- Hero breadcrumb ---- */
.ss-hero-breadcrumb a { transition: color .3s ease; }
.ss-crumb-sep { color: rgba(197,154,64,0.5); }

/* ---- Intro quote card ---- */
.ss-quote-card {
  position: relative;
  background: rgba(17, 17, 17, 0.6);
  border: 1px solid rgba(197, 154, 64, 0.2);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,0.55);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .4s ease;
}
.ss-quote-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197,154,64,0.4);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7), 0 0 20px -5px rgba(197,154,64,0.18);
}
.ss-quote-mark {
  font-family: '"Fraunces"', serif;
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(197,154,64,0.35);
}
.ss-intro-image img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.ss-intro-image:hover img { transform: scale(1.04); }

/* ---- Featured member story cards ---- */
.ss-member-card {
  background: rgba(250, 247, 241, 0.03);
  border: 1px solid rgba(197, 154, 64, 0.15);
  border-radius: 1.25rem;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .5s ease, background-color .4s ease;
}
.ss-member-card:hover {
  transform: translateY(-6px);
  border-color: rgba(197,154,64,0.35);
  background: rgba(250, 247, 241, 0.05);
  box-shadow: 0 26px 55px -18px rgba(0,0,0,0.6), 0 0 24px -8px rgba(197,154,64,0.18);
}
.ss-member-card:hover .story-before-frame {
  transform: rotate(-5deg) translateY(-10px);
}
.ss-member-card:hover .story-after {
  box-shadow: 0 26px 55px -14px rgba(0,0,0,0.65), 0 0 26px -6px rgba(197,154,64,0.2);
}
.ss-member-avatar {
  box-shadow: 0 0 0 3px rgba(197,154,64,0.35), 0 8px 16px -6px rgba(0,0,0,0.5);
}
.ss-member-tag {
  background: rgba(197,154,64,0.12);
  border: 1px solid rgba(197,154,64,0.3);
  color: #e3c887;
}
.ss-achievement-chip {
  background: rgba(250,247,241,0.05);
  border: 1px solid rgba(197,154,64,0.18);
  color: #b7a98c;
}
.ss-story-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.16,1,.3,1);
}
.ss-member-card.is-open .ss-story-panel { grid-template-rows: 1fr; }
.ss-story-panel-inner { overflow: hidden; }
.ss-read-more-icon { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.ss-member-card.is-open .ss-read-more-icon { transform: rotate(180deg); }

/* ---- Video gallery ---- */
.ss-video-card {
  background: rgba(250, 247, 241, 0.03);
  border: 1px solid rgba(197, 154, 64, 0.15);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .5s ease;
}
.ss-video-card:hover {
  transform: translateY(-6px);
  border-color: rgba(197,154,64,0.35);
  box-shadow: 0 26px 55px -18px rgba(0,0,0,0.6), 0 0 24px -8px rgba(197,154,64,0.18);
}
.ss-video-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; cursor: pointer; }
.ss-video-frame img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.ss-video-card:hover .ss-video-frame img { transform: scale(1.06); }
.ss-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(11,10,8,0.15) 0%, rgba(11,10,8,0.55) 100%);
  transition: background .4s ease;
}
.ss-video-card:hover .ss-play-overlay { background: linear-gradient(180deg, rgba(11,10,8,0.05) 0%, rgba(11,10,8,0.4) 100%); }
.ss-play-btn {
  width: 4rem; height: 4rem; border-radius: 9999px;
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 14px 30px -8px rgba(197,154,64,0.55);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.ss-video-card:hover .ss-play-btn { transform: scale(1.12); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 18px 36px -8px rgba(197,154,64,0.7); }

/* ---- Lightbox modal (local video playback) ---- */
#ss-video-modal { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
#ss-video-modal.open { opacity: 1; pointer-events: auto; }
#ss-video-modal .ss-modal-inner { transform: scale(0.94); transition: transform .35s cubic-bezier(.16,1,.3,1); }
#ss-video-modal.open .ss-modal-inner { transform: scale(1); }

/* ---- Testimonial carousel (Swiper) ---- */
.ss-testi-slide {
  background: rgba(17, 17, 17, 0.55);
  border: 1px solid rgba(197, 154, 64, 0.18);
  border-radius: 1.5rem;
  box-shadow: 0 22px 50px -18px rgba(0,0,0,0.55);
}
.ss-testi-quote-mark {
  position: absolute; top: 1.25rem; right: 1.75rem;
  font-family: '"Fraunces"', serif;
  font-size: 5rem; line-height: 1;
  color: rgba(197,154,64,0.15);
  pointer-events: none;
}
.ss-testi-avatar { box-shadow: 0 0 0 3px rgba(197,154,64,0.35); }
.ss-testi-swiper .swiper-pagination-bullet {
  background: rgba(197,154,64,0.35);
  opacity: 1;
  width: 8px; height: 8px;
}
.ss-testi-swiper .swiper-pagination-bullet-active {
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 100%);
  width: 22px; border-radius: 9999px;
}
.ss-testi-nav {
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  border: 1px solid rgba(197,154,64,0.3);
  color: #e3c887;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .4s ease, color .4s ease, transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  cursor: pointer;
}
.ss-testi-nav:hover {
  background: linear-gradient(135deg, #e3c887 0%, #c59a40 45%, #8f6f2c 100%);
  color: #14110d;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(197,154,64,0.45);
}
.ss-testi-nav.swiper-button-disabled { opacity: 0.35; pointer-events: none; }

/* ---- Why their stories matter (alternating rows) ---- */
.ss-why-image img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.ss-why-image:hover img { transform: scale(1.04); }
.ss-why-number {
  font-family: '"Fraunces"', serif;
  font-style: italic;
  color: rgba(197,154,64,0.3);
}

/* ---- Reveal base state (used by GSAP ScrollTrigger below) ---- */
.ss-reveal { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #ss-video-modal, #ss-video-modal .ss-modal-inner,
  .ss-story-panel, .ss-read-more-icon { transition: none; }
}

/* ---- Breadcrumb ---- */
.wt-breadcrumb a { transition: color .3s ease; }
.wt-breadcrumb a:hover { color: #e3c887; }
.wt-crumb-sep { color: rgba(197, 154, 64, 0.4); }

/* ---- Featured article ---- */
.wt-featured-card {
  position: relative;
  background: rgba(250, 247, 241, 0.03);
  border: 1px solid rgba(197, 154, 64, 0.18);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .5s ease;
}
.wt-featured-card:hover {
  border-color: rgba(197, 154, 64, 0.35);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6), 0 0 26px -10px rgba(197,154,64,0.2);
}
.wt-featured-image { overflow: hidden; }
.wt-featured-image img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.wt-featured-card:hover .wt-featured-image img { transform: scale(1.045); }

/* ---- Category / meta badges (shared by featured + article cards) ---- */
.wt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(20, 17, 13, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(197, 154, 64, 0.3);
  color: #e3c887;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
}
.wt-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #6e6558;
  font-size: 0.8rem;
}
.wt-meta i { color: #c59a40; font-size: 0.7rem; }

/* ---- Article grid cards ---- */
.wt-article-card {
  position: relative;
  background: rgba(250, 247, 241, 0.03);
  border: 1px solid rgba(197, 154, 64, 0.15);
  border-radius: 1.15rem;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .5s ease;
  will-change: transform;
}
.wt-article-card:hover,
.wt-article-card:focus-within {
  transform: translateY(-7px);
  border-color: rgba(197, 154, 64, 0.4);
  box-shadow: 0 24px 48px -18px rgba(0,0,0,0.55), 0 0 22px -8px rgba(197,154,64,0.22);
}
.wt-article-image { overflow: hidden; aspect-ratio: 4 / 3; }
.wt-article-image img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.wt-article-card:hover .wt-article-image img { transform: scale(1.06); }
.wt-share-btn {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: rgba(20,17,13,0.7);
  border: 1px solid rgba(197,154,64,0.3);
  color: #e3c887;
  font-size: 0.7rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease, background-color .3s ease, color .3s ease;
}
.wt-article-card:hover .wt-share-btn,
.wt-article-card:focus-within .wt-share-btn {
  opacity: 1;
  transform: translateY(0);
}
.wt-share-btn:hover { background: #c59a40; color: #14110d; }
.wt-read-more {
  color: #e3c887;
  transition: gap .3s ease, color .3s ease;
}
.wt-read-more i { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.wt-read-more:hover i { transform: translateX(4px); }

/* ---- Popular articles row ---- */
.wt-popular-item {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  padding: 0.9rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.wt-popular-item:hover {
  background: rgba(250, 247, 241, 0.04);
  border-color: rgba(197, 154, 64, 0.2);
  transform: translateX(4px);
}
.wt-popular-thumb { overflow: hidden; flex-shrink: 0; }
.wt-popular-thumb img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.wt-popular-item:hover .wt-popular-thumb img { transform: scale(1.08); }

/* ---- Wellness quote ---- */
.wt-quote-mark {
  font-size: 7rem;
  line-height: 1;
  color: rgba(197, 154, 64, 0.22);
  margin-bottom: -2rem;
}

@media (prefers-reduced-motion: reduce) {
  .wt-chip, .wt-article-card, .wt-resource-card, .wt-featured-image img,
  .wt-article-image img, .wt-popular-thumb img, .wt-popular-item, .wt-share-btn {
    transition: none !important;
  }
}