/* ============================================================
   MISTRESS TANTRA — Custom Stylesheet
   Aman-Vibe Aesthetic · Earthy · Sensual · Holistic
   ============================================================ */

/* --- FONT IMPORTS --- */
/* Allonges Regular — self-hosted (hero title only) */
@font-face {
  font-family: 'Allonges';
  src: url('../fonts/Allonges.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block; /* hold invisible — eliminates FOUT flash */
}
/* Cormorant Garamond + Montserrat only — Playfair Display removed per style guide */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Montserrat:wght@200;300;400;500;600&display=swap');

/* --- CSS CUSTOM PROPERTIES --- */
:root {
  /* Primary Greens — DARKENED */
  --deep-forest: #0f1f0f;
  --sage: #5a7a5a;
  --misty-sage: #8fa88f;
  --olive-grove: #4a5c3a;

  /* Earthy Browns & Beiges */
  --warm-earth: #3d3428;
  --raw-umber: #6b5d4f;
  --warm-sand: #c4a882;

  /* Neutrals */
  --charcoal: #2c2c2c;
  --stone: #8a8278;
  --linen: #ede8df;
  --ivory-mist: #faf7f2;

  /* Accents */
  --aman-gold: #c9a96e;
  --aman-gold-light: #d4b87e;

  /* Overlays — BLACK with same transparency */
  --veil: rgba(0, 0, 0, 0.7);
  --veil-light: rgba(0, 0, 0, 0.4);
  --veil-warm: rgba(0, 0, 0, 0.6);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-xxl: 10rem;

  /* Transitions */
  --transition-smooth: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: #000000;
  background-color: var(--linen);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive picture elements — ensure proper sizing */
picture {
  display: block;
  width: 100%;
  height: 100%;
}
picture img {
  width: 100%;
  height: auto;
}
/* About overlap image — picture element needs specific handling */
.about-overlap-image picture {
  width: 100%;
  height: auto;
}
.about-overlap-image picture img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.about-overlap-image picture img.visible {
  opacity: 1;
  transform: translateY(0);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

ul, ol {
  list-style: none;
}

::selection {
  background: var(--aman-gold);
  color: var(--deep-forest);
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--deep-forest);
}

h1 {
  font-size: clamp(2.8rem, 4.5vw, 5rem); /* Style Guide: 44.8px–80px */
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: #000000;
}

h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #000000;
}

h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  color: #000000;
}

h4 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 500;
}

p {
  margin-bottom: 1.2em;
  font-size: 1rem;
  line-height: 1.8;
}

.font-accent {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--aman-gold);
}

.text-gold {
  color: var(--aman-gold);
}

.text-sage {
  color: var(--sage);
}

.subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: var(--space-sm);
}

.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: var(--space-md) 0;
  width: 100%;
  max-width: 320px;
  background: none;
  height: auto;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--aman-gold) 100%
  );
}

.divider::after {
  background: linear-gradient(
    to left,
    transparent 0%,
    var(--aman-gold) 100%
  );
}

/* Insert ornamental symbol between the two gradient lines */
.divider-ornament {
  color: var(--aman-gold);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.85;
  flex-shrink: 0;
}

.divider-center {
  margin-left: auto;
  margin-right: auto;
}

/* --- Ornamental Script Divider --- */
.divider-ornamental {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: var(--space-md) 0;
}

.divider-ornamental-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to var(--dir, right),
    transparent 0%,
    var(--aman-gold) 100%
  );
}

.divider-ornamental-line:last-child {
  --dir: left;
}

.divider-ornamental-symbol {
  color: var(--aman-gold);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.85;
}

/* --- LAYOUT --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

section {
  padding: var(--space-xl) 0;
}

.section-dark {
  background: var(--deep-forest);
  color: var(--linen);
  position: relative;
  overflow: hidden;
}

.section-dark > .container {
  position: relative;
  z-index: 1;
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #ffffff;
}

.section-dark p {
  color: rgba(255, 255, 255, 0.75);
}

.section-ivory {
  background: var(--ivory-mist);
}

.section-linen {
  background: var(--linen);
}

/* --- NAVIGATION --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: var(--transition-smooth);
  padding: 0.8rem 0;
  /* Glassmorphism - always on */
  background: rgba(15, 31, 15, 0.3);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(201, 169, 110, 0.08);
}

.navbar.scrolled {
  background: linear-gradient(135deg, #0d0a04 0%, #3a2c10 25%, #6b5530 50%, #3a2c10 75%, #0d0a04 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Minimal sticky logo - text only on scroll */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: var(--transition-smooth);
}

.nav-logo img {
  height: 66px;
  width: auto;
  transition: var(--transition-smooth);
  opacity: 1;
}

.navbar.scrolled .nav-logo img {
  height: 60px;
  width: auto;
}

.nav-logo-text {
  display: none;
}

/* Minimal nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  position: relative;
  padding: 0.3rem 0;
  transition: var(--transition-smooth);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--aman-gold);
  transition: var(--transition-smooth);
}

.nav-links a:hover {
  color: rgba(255, 255, 255, 0.95);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a.active {
  color: var(--aman-gold);
}

/* Active section dot indicator */
.nav-links a .nav-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--aman-gold);
  margin-left: 6px;
  opacity: 0;
  transform: scale(0);
  transition: var(--transition-smooth);
  vertical-align: middle;
}

.nav-links a.active .nav-dot {
  opacity: 1;
  transform: scale(1);
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
  z-index: 1001;
}

.nav-toggle span {
  width: 22px;
  height: 1.5px;
  background: var(--aman-gold);
  transition: var(--transition-smooth);
}

.nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 5px);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -5px);
}

/* Mobile Navigation */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .navbar {
    padding: 0.6rem 0;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(15, 31, 15, 0.92);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transition: var(--transition-smooth);
  }

  .nav-links.open {
    right: 0;
  }

  .nav-links a {
    font-size: 0.9rem;
    letter-spacing: 0.3em;
  }
}

/* Hero content responsive padding — clears fixed navbar on all devices */
@media (max-width: 1024px) {
  .hero-content {
    padding-top: 100px;
  }
}

@media (max-width: 768px) {
  .hero-content {
    padding-top: 90px;
    padding-left: 4%;
    padding-right: 4%;
    max-width: 100%;
    grid-column: 1 / -1;
  }
  .hero-content h1 {
    line-height: 1.05;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding-top: 85px;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
  .hero-content h1 {
    line-height: 1.0;
    font-size: clamp(2rem, 7vw, 3rem);
  }
  .video-hero .hero-content h1 {
    line-height: 1.0;
    font-size: clamp(2rem, 7vw, 3rem);
  }
  .about-hero-gradient .hero-content h1 {
    line-height: 1.0;
    font-size: clamp(2rem, 7vw, 3rem);
  }
}

/* --- HERO SECTIONS (Universal) --- */
.hero,
.page-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
}

/* Fixed background image — content slides up over it */
.hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

/* Home hero — show subject's face, position from bottom */
.hero .hero-bg {
  object-position: center 30%;
}

/* Home hero — flipped horizontally so subject is on the right */
.hero-bg-flipped {
  transform: scaleX(-1);
}

/* Home hero — no overlay, text needs readability */
#home .hero-content h1,
#home .hero-content .tagline,
#home .hero-content p,
#home .hero-content .subtitle {
  text-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 4px 40px rgba(0,0,0,0.3);
}

/* About hero — center the subject */
#about .hero-bg {
  object-position: center top;
}

/* Offerings hero — show full body, center */
#offerings .hero-bg {
  object-position: center center;
}

/* Connect hero — show face and upper body */
#connect .hero-bg {
  object-position: center 30%;
}

/* Blog hero — show upper portion */
#blog .hero-bg {
  object-position: center 35%;
}

/* Blog hero — stronger text shadow for readability without heavy overlay */
#blog .hero-content h1,
#blog .hero-content .tagline,
#blog .hero-content p,
#blog .hero-content .subtitle {
  text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
}

/* Hero overlays — BLACK with transparency */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.hero-overlay.dark {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.72) 35%,
    rgba(0, 0, 0, 0.35) 65%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.hero-overlay.warm {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.68) 35%,
    rgba(0, 0, 0, 0.3) 65%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

/* Blog hero — minimal overlay so images aren't compromised */
.hero-overlay.blog-subtle {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.22) 30%,
    transparent 60%,
    transparent 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  color: #ffffff;
  max-width: 540px;
  padding-left: 6%;
  padding-right: 2rem;
  padding-top: 110px;
  grid-column: 1;
  grid-row: 1;
}

.hero-content h1 {
  color: #ffffff;
  font-weight: 300;
  margin-bottom: var(--space-sm);
  text-shadow: 0 2px 40px rgba(0,0,0,0.3);
}

.hero-content .tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--warm-sand);
  margin-bottom: var(--space-md);
  opacity: 0.9;
}

.hero-content p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px;
  margin: 0 0 var(--space-lg);
  line-height: 1.9;
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: float 3s ease-in-out infinite;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: end;
}

.hero-scroll .scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--aman-gold), transparent);
}

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

/* Hero subtitle left-aligned */
.hero-content .subtitle {
  text-align: left;
}

/* Hero buttons left-aligned */
.hero-content .btn {
  margin-left: 0;
}

/* --- PAGE HERO (section heroes — same full-height treatment) --- */
.page-hero {
  align-items: flex-end;
}

.page-hero .hero-bg {
  transition: none;
}

.page-hero:hover .hero-bg {
  transform: none;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}

.page-hero-content h1 {
  color: #ffffff;
  margin-bottom: var(--space-xs);
}

.page-hero-content .subtitle {
  color: var(--aman-gold);
}

/* When a section-hero scrolls out of view, hide its fixed bg */
.section-hero-wrapper {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.section-hero-wrapper + .section-content {
  position: relative;
  z-index: 5;
  background: var(--linen);
  margin-top: -1px;
}

/* --- FAST SCROLL TRANSITION TO WHITE --- */
/* Content sections immediately transition to solid background */
.section-content {
  position: relative;
  z-index: 5;
  background: var(--linen);
}

.section-content.section-linen {
  background: var(--linen);
}

.section-content.section-ivory {
  background: var(--ivory-mist);
}

.section-content.section-dark {
  background: var(--deep-forest);
}

/* Ensure first content section after hero has no gap and immediate background */
.hero + section,
.hero + .section-linen,
.hero + .section-ivory {
  margin-top: 0;
  position: relative;
  z-index: 5;
}

/* Force immediate solid background on all content sections — no slow fade */
.section-linen,
.section-ivory,
.section-dark {
  -webkit-font-smoothing: antialiased;
}

/* Section that sits over the fading hero — mostly transparent to show hero behind */
.section-over-hero {
  background: rgba(245, 240, 232, 0.80) !important;
  position: relative;
  z-index: 5;
}



/* --- BUTTONS --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border: 1px solid;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

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

.btn-primary:hover {
  background: var(--aman-gold);
  color: var(--deep-forest);
}

.btn-filled {
  border-color: var(--aman-gold);
  color: var(--deep-forest);
  background: var(--aman-gold);
}

.btn-filled:hover {
  background: var(--aman-gold-light);
  border-color: var(--aman-gold-light);
  color: var(--deep-forest);
}

.btn-light {
  border-color: rgba(255,255,255,0.4);
  color: #ffffff;
  background: transparent;
}

.btn-light:hover {
  border-color: var(--aman-gold);
  color: var(--aman-gold);
}

.btn-dark {
  border-color: var(--deep-forest);
  color: var(--deep-forest);
  background: transparent;
}

.btn-dark:hover {
  background: var(--deep-forest);
  color: var(--aman-gold);
}

/* --- CARDS --- */
.card {
  background: var(--ivory-mist);
  border: 1px solid rgba(196, 168, 130, 0.2);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(15, 31, 15, 0.1);
}

.card-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: var(--transition-slow);
}

.card:hover .card-image {
  transform: scale(1.05);
}

.card-image-wrapper {
  overflow: hidden;
}

.card-body {
  padding: var(--space-md);
}

.card-body h3 {
  margin-bottom: var(--space-xs);
}

.card-body p {
  color: var(--raw-umber);
  font-size: 0.95rem;
}

/* --- GRID LAYOUTS --- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  align-items: center;
}

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

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ---- GLOBAL 1024px STACK: all multi-col layouts collapse to 100% ---- */
@media (max-width: 1024px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .split-section {
    grid-template-columns: 1fr;
  }
  .split-section.reverse {
    direction: ltr;
  }
  .blog-card {
    grid-template-columns: 1fr;
  }
  .feature-row {
    flex-direction: column;
  }
  .feature-item {
    min-width: 100%;
  }
}

/* ---- GLOBAL 5px SIDE PADDING on mobile ---- */
@media (max-width: 1024px) {
  .container,
  .container-narrow,
  .container-wide {
    padding-left: 5px;
    padding-right: 5px;
  }
  .hero-content {
    padding-left: 5px;
    padding-right: 5px;
    max-width: 100%;
    grid-column: 1 / -1;
  }
  .split-text {
    padding: var(--space-md) 5px;
  }
  .blog-card-content {
    padding: var(--space-md) 5px;
  }
}

/* ---- RELATIVE UNITS: images scale to screen ---- */
img {
  max-width: 100%;
  height: auto;
}
.card-image {
  width: 100%;
  height: auto;
  min-height: 220px;
  object-fit: cover;
}
@media (max-width: 1024px) {
  /* inline fixed-height images → fluid */
  .hero-about-img,
  [style*="height: 600px"],
  [style*="height: 550px"] {
    height: 55vw !important;
    min-height: 260px !important;
    max-height: 520px !important;
  }
  .split-image {
    min-height: 280px;
    height: 50vw;
    max-height: 480px;
  }
  .offering-card-image {
    height: 55vw;
    max-height: 400px;
  }
}

/* --- IMAGE + TEXT SPLIT --- */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.split-section.reverse {
  direction: rtl;
}

.split-section.reverse > * {
  direction: ltr;
}

.split-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 500px;
}

.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl);
}

@media (max-width: 768px) {
  .split-section {
    grid-template-columns: 1fr;
  }
  .split-section.reverse {
    direction: ltr;
  }
  .split-image {
    min-height: 350px;
  }
}

/* --- OFFERINGS CARDS --- */
.offering-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  group: true;
}

.offering-card-image {
  width: 100%;
  height: 450px;
  object-fit: cover;
  transition: var(--transition-slow);
}

.offering-card:hover .offering-card-image {
  transform: scale(1.08);
}

.offering-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
  transition: var(--transition-smooth);
}

.offering-card:hover .offering-card-overlay {
  padding-bottom: var(--space-lg);
}

.offering-card-overlay h3 {
  color: #ffffff;
  margin-bottom: 0.3rem;
}

.offering-card-overlay p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  max-height: 0;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.offering-card:hover .offering-card-overlay p {
  max-height: 200px;
  margin-top: 0.5rem;
}

/* --- TESTIMONIAL / QUOTE --- */
.quote-block {
  position: relative;
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
}

.quote-block::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 8rem;
  color: var(--aman-gold);
  opacity: 0.15;
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
}

.quote-block blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-style: italic;
  color: var(--deep-forest);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto var(--space-md);
}

.section-dark .quote-block blockquote {
  color: #ffffff;
}

.quote-block cite {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}

/* --- FORM STYLES --- */
.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.5rem;
  text-align: center;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: #000000;
  background: var(--ivory-mist);
  border: 1px solid rgba(196, 168, 130, 0.3);
  transition: var(--transition-smooth);
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--aman-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.1);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

/* --- BLOG POST CARDS --- */
.blog-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ivory-mist);
  border: 1px solid rgba(196, 168, 130, 0.15);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.blog-card:hover {
  box-shadow: 0 15px 50px rgba(15, 31, 15, 0.08);
}

.blog-card-image {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

.blog-card-content {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-card-content .blog-date {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--space-xs);
}

.blog-card-content h3 {
  margin-bottom: var(--space-sm);
}

.blog-card-content p {
  color: var(--raw-umber);
  font-size: 0.95rem;
}

.blog-card-content .read-more {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--aman-gold);
  margin-top: var(--space-sm);
  display: inline-block;
}

.blog-card-content .read-more:hover {
  color: var(--deep-forest);
}

@media (max-width: 768px) {
  .blog-card {
    grid-template-columns: 1fr;
  }
  .blog-card-image {
    min-height: 250px;
  }
}

/* --- FOOTER --- */
.footer {
  position: relative;
  background: #0d0a04;
  color: #ffffff;
  padding: var(--space-xl) 0 var(--space-md);
  overflow: hidden;
}

/* Background overlay image — very subtle rug texture */
.footer-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/footer-bg.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

/* Gradient overlay sits on top of rug image */
.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d0a04 0%, #3a2c10 25%, #6b5530 50%, #3a2c10 75%, #0d0a04 100%);
  pointer-events: none;
  z-index: 1;
}

.footer > .container {
  position: relative;
  z-index: 2;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-logo {
  height: auto;
  width: 100%;
  max-width: 220px;
  object-fit: contain;
  opacity: 0.9;
}

.footer-brand p {
  font-size: 0.8rem;
  line-height: 1.7;
  color: #ffffff;
  max-width: 400px;
}

/* Right column: button + social icons stacked */
.footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-md);
  justify-self: end;
  margin-top: var(--space-sm);
}

.footer-cta {
  align-self: flex-end;
}

/* Decorative divider between nav and copyright */
.footer-divider {
  margin: 0 auto;
  padding: 0;
}

.footer-divider .divider-ornament {
  opacity: 0.6;
}

/* Nav wrapper — holds hamburger + nav */
.footer-nav-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) 0;
}

/* Horizontal nav, above decorative divider */
.footer-nav {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
}

.footer-nav a {
  font-size: 0.8rem;
  color: #ffffff;
  padding: 0.25rem 0;
  transition: color 0.3s ease;
}

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

/* Footer hamburger — hidden on desktop, shown on mobile */
.footer-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  margin-bottom: var(--space-sm);
}

.footer-hamburger span {
  width: 22px;
  height: 1.5px;
  background: var(--aman-gold);
  transition: var(--transition-smooth);
}

.footer-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 5px);
}

.footer-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.footer-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -5px);
}

.footer-sep {
  color: var(--aman-gold);
  font-size: 0.5rem;
  margin: 0 0.3rem;
  opacity: 0.7;
}

.footer-bottom p a {
  color: var(--aman-gold);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-bottom p a:hover {
  color: #ffffff;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: var(--space-sm);
  font-size: 0.4rem;
  text-align: center;
}

/* --- SOCIAL ICONS --- */
.footer-social {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.85rem;
  transition: var(--transition-smooth);
}

.footer-social a:hover {
  color: var(--aman-gold);
  border-color: var(--aman-gold);
}

@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-brand {
    align-items: center;
    text-align: center;
  }
  .footer-brand p {
    max-width: 100%;
  }
  .footer-actions {
    align-items: center;
    justify-self: center;
  }
  .footer-cta {
    align-self: center;
  }
  .footer-nav {
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .footer-hamburger {
    display: flex;
  }
  .footer-nav {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: var(--space-sm) 0;
  }
  .footer-nav.open {
    display: flex;
  }
  .footer-nav a {
    font-size: 0.9rem;
    letter-spacing: 0.15em;
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
    font-size: 0.35rem;
  }
}

/* --- ANIMATIONS --- */

/* === ENTRANCE ANIMATION SYSTEM ===
   Tantra is about movement and flow.
   All sections animate into view with noticeable, elegant motion.
   Three animation types: fade-up, fade-left, fade-right
   Plus scale variant for emphasis elements.
*/

/* Base: hidden state */
.fade-in,
.fade-in-left,
.fade-in-right,
.fade-in-up,
.fade-in-scale {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade UP — stronger, more dramatic vertical motion */
.fade-in,
.fade-in-up {
  transform: translateY(60px);
}

/* Fade LEFT — from left with subtle scale */
.fade-in-left {
  transform: translateX(-60px) scale(0.97);
}

/* Fade RIGHT — from right with subtle scale */
.fade-in-right {
  transform: translateX(60px) scale(0.97);
}

/* Fade SCALE — center emphasis with zoom */
.fade-in-scale {
  transform: scale(0.88);
}

/* Visible state — all animation types converge */
.fade-in.visible,
.fade-in-left.visible,
.fade-in-right.visible,
.fade-in-up.visible,
.fade-in-scale.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Staggered children — cards, features animate in sequence */
.stagger-children .fade-in:nth-child(1) { transition-delay: 0.05s; }
.stagger-children .fade-in:nth-child(2) { transition-delay: 0.18s; }
.stagger-children .fade-in:nth-child(3) { transition-delay: 0.31s; }
.stagger-children .fade-in:nth-child(4) { transition-delay: 0.44s; }
.stagger-children .fade-in:nth-child(5) { transition-delay: 0.57s; }
.stagger-children .fade-in:nth-child(6) { transition-delay: 0.70s; }

/* Section entrance — subtle full-section breathe-in */
.section-entrance {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section-entrance.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: slightly faster but still noticeable */
@media (max-width: 768px) {
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .fade-in-up,
  .fade-in-scale {
    transition-duration: 0.8s;
  }

  .fade-in,
  .fade-in-up {
    transform: translateY(40px);
  }

  .fade-in-left {
    transform: translateX(-40px) scale(0.97);
  }

  .fade-in-right {
    transform: translateX(40px) scale(0.97);
  }

  .stagger-children .fade-in:nth-child(1) { transition-delay: 0.03s; }
  .stagger-children .fade-in:nth-child(2) { transition-delay: 0.12s; }
  .stagger-children .fade-in:nth-child(3) { transition-delay: 0.21s; }
  .stagger-children .fade-in:nth-child(4) { transition-delay: 0.30s; }
  .stagger-children .fade-in:nth-child(5) { transition-delay: 0.39s; }
  .stagger-children .fade-in:nth-child(6) { transition-delay: 0.48s; }
}

/* Parallax subtle effect */
.parallax-slow {
  will-change: transform;
}

/* --- FEATURE ICONS / DETAILS --- */
.feature-row {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.feature-item {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: var(--space-md);
}

.feature-item .feature-icon {
  font-size: 2rem;
  color: var(--aman-gold);
  margin-bottom: var(--space-sm);
}

.feature-item h4 {
  margin-bottom: 0.5rem;
  text-align: center;
}

.feature-item p {
  font-size: 0.9rem;
  color: var(--raw-umber);
}

/* --- FULLWIDTH IMAGE BREAK --- */
.fullwidth-image {
  width: 100%;
  height: 50vh;
  min-height: 350px;
  object-fit: cover;
}

/* --- MARQUEE / RUNNING TEXT --- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: var(--space-sm) 0;
  border-top: 1px solid rgba(196, 168, 130, 0.2);
  border-bottom: 1px solid rgba(196, 168, 130, 0.2);
}

.marquee-inner {
  display: inline-block;
  animation: marquee 30s linear infinite;
}

.marquee-inner span {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--sage);
  padding: 0 3rem;
  opacity: 0.6;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- UTILITY --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.pt-md { padding-top: var(--space-md); }
.pb-md { padding-bottom: var(--space-md); }

/* --- PAGE TRANSITION OVERLAY (disabled) --- */

/* --- SCROLL PROGRESS BAR --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--aman-gold);
  z-index: 10001;
  width: 0%;
  transition: width 0.1s linear;
}

/* --- BACK TO TOP --- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 45px;
  height: 45px;
  border: 1px solid var(--aman-gold);
  color: var(--aman-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-smooth);
  z-index: 100;
  background: rgba(15, 31, 15, 0.9);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--aman-gold);
  color: var(--deep-forest);
}

/* --- CURSOR EFFECT (desktop only) --- */
@media (hover: hover) {
  .custom-cursor {
    width: 20px;
    height: 20px;
    border: 1px solid var(--aman-gold);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    transition: transform 0.15s ease, opacity 0.15s ease;
    opacity: 0;
  }

  .custom-cursor.visible {
    opacity: 1;
  }

  .custom-cursor.hover {
    transform: scale(2);
    background: rgba(201, 169, 110, 0.1);
  }
}
/* ============================================================
   UNIVERSAL DECORATIVE IMAGE FRAMES + BUTTONS
   Inspired by Indian teak / rosewood carving, original treatment.
   Applies to reusable site cards and standard buttons.
   ============================================================ */

/* --- Decorative image/card frame --- */
.card {
  border-radius: 10px;
  overflow: visible;
  background: linear-gradient(180deg, rgba(250,247,242,0.98), rgba(245,240,232,0.98));
  border: 1px solid rgba(107, 79, 42, 0.22);
  box-shadow: 0 14px 38px rgba(31, 18, 9, 0.08);
}

.card-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: 10px;
  background: #24170d;
  border: 7px solid transparent;
  background-image:
    linear-gradient(#24170d, #24170d),
    linear-gradient(135deg,
      #4f2f16 0%,
      #7a4a22 18%,
      #b8893f 36%,
      #5a3518 52%,
      #c9a96e 70%,
      #6b3f1e 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 181, 0.22),
    inset 0 0 0 4px rgba(55, 29, 11, 0.36),
    0 10px 24px rgba(31, 18, 9, 0.12);
}

/* Subtle carved-corner detail */
.card-image-wrapper::before,
.card-image-wrapper::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(circle at 0 0, transparent 0 18px, rgba(224, 200, 138, 0.50) 19px 20px, transparent 21px),
    linear-gradient(45deg, transparent 45%, rgba(224, 200, 138, 0.45) 46% 54%, transparent 55%);
}

.card-image-wrapper::before {
  top: 6px;
  left: 6px;
}

.card-image-wrapper::after {
  right: 6px;
  bottom: 6px;
  transform: rotate(180deg);
}

.card-image {
  display: block;
  width: 100%;
  height: 340px;
  min-height: 340px;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 1.2s ease, filter 0.8s ease;
}

.card:hover .card-image {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}

/* Home page offering preview: same size as right card, no distortion */
.card-image-offering {
  height: 340px !important;
  min-height: 340px !important;
  object-fit: cover;
}

/* Left + middle: show full body more intentionally */
.card-image-offering-ritual {
  object-position: center 18%;
}

.card-image-offering-intimacy {
  object-position: center 22%;
}

.card-image-offering-breathwork {
  object-position: center 35%;
}

/* --- Universal decorative buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  min-height: 48px;
  border: 1px solid rgba(201, 169, 110, 0.46);
  background:
    linear-gradient(135deg, rgba(160, 120, 40, 0.30), rgba(107, 79, 42, 0.18)),
    rgba(160, 120, 40, 0.14);
  color: var(--deep-forest);
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 181, 0.14),
    0 8px 22px rgba(31, 18, 9, 0.08);
  isolation: isolate;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 28%,
    rgba(255,255,255,0.24) 42%,
    transparent 56%,
    transparent 100%);
  transform: translateX(-130%);
  transition: transform 0.85s ease;
}

.btn::after {
  content: "✦";
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  font-size: 0.55rem;
  color: rgba(201, 169, 110, 0.70);
  opacity: 0.55;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.btn:hover::before {
  transform: translateX(130%);
}

.btn:hover::after {
  transform: translateY(-50%) scale(1.05) rotate(90deg);
  opacity: 1;
}

.btn:hover {
  border-color: rgba(201, 169, 110, 0.72);
  background:
    linear-gradient(135deg, rgba(160, 120, 40, 0.40), rgba(107, 79, 42, 0.24)),
    rgba(160, 120, 40, 0.20);
  color: var(--deep-forest);
  transform: translateY(-2px);
}

.btn-dark,
.btn-primary,
.btn-filled,
.btn-light {
  border-color: rgba(201, 169, 110, 0.52);
}

.btn-dark:hover,
.btn-primary:hover,
.btn-filled:hover,
.btn-light:hover {
  color: var(--deep-forest);
}

@media (max-width: 768px) {
  .card-image,
  .card-image-offering {
    height: 300px !important;
    min-height: 300px !important;
  }

  .card-image-wrapper {
    margin: 8px;
    border-width: 6px;
  }
}

/* Home offering preview: preserve full body for left + middle images */
.card-image-offering-ritual,
.card-image-offering-intimacy {
  object-fit: contain !important;
  object-position: center center;
  background: #24170d;
}

.card:hover .card-image-offering-ritual,
.card:hover .card-image-offering-intimacy {
  transform: scale(1.015);
}

/* ============================================================
   FINAL HOME OFFERING IMAGE CORRECTION
   All three preview images are square, fill the frame, and match.
   No contain letterboxing, no symbolic corner ornaments, no color background.
   ============================================================ */
.home-offerings-preview .card-image-wrapper,
section:has(.card-image-offering) .card-image-wrapper {
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  margin: 10px;
  overflow: hidden;
  border-radius: 10px;
  background: transparent !important;
}

section:has(.card-image-offering) .card-image-wrapper::before,
section:has(.card-image-offering) .card-image-wrapper::after {
  content: none !important;
  display: none !important;
}

.card-image-offering,
.card-image-offering-ritual,
.card-image-offering-intimacy,
.card-image-offering-breathwork {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
  display: block;
}

.card:hover .card-image-offering,
.card:hover .card-image-offering-ritual,
.card:hover .card-image-offering-intimacy,
.card:hover .card-image-offering-breathwork {
  transform: scale(1.035);
}

@media (max-width: 768px) {
  .card-image-offering,
  .card-image-offering-ritual,
  .card-image-offering-intimacy,
  .card-image-offering-breathwork {
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* ============================================================
   RESTORE HOME OFFERING BROWN FRAMES + RESPONSIVE SQUARE BOXES
   Keeps all three home offering images identical, square, and full-frame.
   ============================================================ */
section:has(.card-image-offering) .card-image-wrapper {
  width: calc(100% - 20px);
  aspect-ratio: 1 / 1;
  height: auto !important;
  max-height: none !important;
  margin: 10px;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px;
  border: 7px solid transparent;
  background-image:
    linear-gradient(#24170d, #24170d),
    linear-gradient(135deg,
      #4f2f16 0%,
      #7a4a22 18%,
      #b8893f 36%,
      #5a3518 52%,
      #c9a96e 70%,
      #6b3f1e 100%) !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 181, 0.22),
    inset 0 0 0 4px rgba(55, 29, 11, 0.36),
    0 10px 24px rgba(31, 18, 9, 0.12);
}

section:has(.card-image-offering) .card-image-wrapper::before,
section:has(.card-image-offering) .card-image-wrapper::after {
  content: none !important;
  display: none !important;
}

section:has(.card-image-offering) .card-image-offering {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  border-radius: 4px;
  background: transparent !important;
}

@media (max-width: 1024px) {
  section:has(.card-image-offering) .card-image-wrapper {
    width: calc(100% - 18px);
    margin: 9px;
    border-width: 6px;
  }
}

@media (max-width: 768px) {
  section:has(.card-image-offering) .card-image-wrapper {
    width: calc(100% - 16px);
    margin: 8px;
    border-width: 6px;
  }
}

@media (max-width: 480px) {
  section:has(.card-image-offering) .card-image-wrapper {
    width: calc(100% - 12px);
    margin: 6px;
    border-width: 5px;
    border-radius: 8px;
  }

  section:has(.card-image-offering) .card-image-offering {
    border-radius: 3px;
  }
}

/* ============================================================
   FINAL RESTORE: ORIGINAL BROWN/GOLD OFFERING FRAMES
   Restores the exact original teak/rosewood + gold frame palette.
   ============================================================ */
section:has(.card-image-offering) .card-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: 10px;
  padding: 0;
  width: calc(100% - 20px);
  aspect-ratio: 1 / 1;
  height: auto !important;
  border: 7px solid transparent;
  background: #24170d;
  background-image:
    linear-gradient(#24170d, #24170d),
    linear-gradient(135deg,
      #4f2f16 0%,
      #7a4a22 18%,
      #b8893f 36%,
      #5a3518 52%,
      #c9a96e 70%,
      #6b3f1e 100%) !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 181, 0.22),
    inset 0 0 0 4px rgba(55, 29, 11, 0.36),
    0 10px 24px rgba(31, 18, 9, 0.12);
}

section:has(.card-image-offering) .card-image-wrapper::before,
section:has(.card-image-offering) .card-image-wrapper::after {
  content: none !important;
  display: none !important;
}

section:has(.card-image-offering) .card-image-offering {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  border-radius: 4px;
  background: transparent !important;
}

@media (max-width: 1024px) {
  section:has(.card-image-offering) .card-image-wrapper {
    width: calc(100% - 18px);
    margin: 9px;
    border-width: 6px;
  }
}

@media (max-width: 768px) {
  section:has(.card-image-offering) .card-image-wrapper {
    width: calc(100% - 16px);
    margin: 8px;
    border-width: 6px;
  }
}

@media (max-width: 480px) {
  section:has(.card-image-offering) .card-image-wrapper {
    width: calc(100% - 12px);
    margin: 6px;
    border-width: 5px;
    border-radius: 8px;
  }

  section:has(.card-image-offering) .card-image-offering {
    border-radius: 3px;
  }
}

/* ============================================================
   FINAL BUTTON COLOR GRADIENT MATCH
   Changes color only; preserves existing hover animation mechanics.
   ============================================================ */
.btn {
  background:
    linear-gradient(90deg, #6f552f 0%, #8f764d 34%, #b69d73 68%, #d8cfbd 100%) !important;
}

.btn:hover {
  background:
    linear-gradient(90deg, #6f552f 0%, #8f764d 34%, #b69d73 68%, #d8cfbd 100%) !important;
}

/* ============================================================
   BOOK A TANTRIC SESSION IMAGE OVERLAY
   Low-opacity responsive overlay; keeps head visible on all devices.
   ============================================================ */
.book-session-overlay-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.book-session-overlay-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(31, 42, 36, 0.58), rgba(31, 42, 36, 0.70)), url('../images/background-meditating.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 18%;
  opacity: 0.24;
}

.book-session-overlay-section > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .book-session-overlay-section::before {
    background-size: cover;
    background-position: center 14%;
    opacity: 0.22;
  }
}

@media (max-width: 768px) {
  .book-session-overlay-section::before {
    background-size: auto 115%;
    background-position: center top;
    opacity: 0.20;
  }
}

@media (max-width: 480px) {
  .book-session-overlay-section::before {
    background-size: auto 108%;
    background-position: center top;
    opacity: 0.18;
  }
}

/* ============================================================
   RESPONSIVE IMAGE HEIGHTS — replaces inline fixed-height styles
   ============================================================ */
.img-hero-tall {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 2px;
}
.img-hero-medium {
  width: 100%;
  height: 550px;
  object-fit: cover;
  border-radius: 2px;
}
@media (max-width: 1024px) {
  .img-hero-tall { height: 450px; }
  .img-hero-medium { height: 400px; }
}
@media (max-width: 768px) {
  .img-hero-tall { height: 380px; }
  .img-hero-medium { height: 340px; }
}
@media (max-width: 480px) {
  .img-hero-tall { height: 300px; }
  .img-hero-medium { height: 260px; }
}

/* --- Intro section: meditation image full-width on mobile --- */
@media (max-width: 768px) {
  .section-over-hero .grid-2 .fade-in-right {
    grid-column: 1 / -1;
    margin-left: -10px;
    margin-right: -10px;
    width: calc(100% + 20px);
  }
  .section-over-hero .grid-2 .fade-in-right .img-hero-tall {
    width: 100%;
    height: 300px;
    border-radius: 0;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .section-over-hero .grid-2 .fade-in-right {
    margin-left: -10px;
    margin-right: -10px;
    width: calc(100% + 20px);
  }
  .section-over-hero .grid-2 .fade-in-right .img-hero-tall {
    height: 240px;
  }
}

/* ─────── GLOBAL MOBILE: 5px side-padding + responsive fixes ─────── */
@media (max-width: 768px) {
  .container,
  .container-narrow,
  .container-wide {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* Buttons — 50% less padding on mobile */
  .btn {
    padding: 0.5rem 1.25rem !important;
    font-size: 0.68rem;
    min-height: 38px;
  }

  /* Prevent horizontal sliding — contain all sections except video heroes */
  section:not(.home-hero):not(.video-hero),
  .section-linen,
  .section-ivory,
  .section-dark,
  .hero,
  .page-hero,
  .split-section,
  .card,
  .blog-card {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Contain absolute-positioned mandalas within sections */
  .section-intro-sacred,
  .section-pillars-sacred,
  .offerings-mandala-section,
  .training-mandala-section {
    overflow: hidden !important;
  }
}

@media (max-width: 480px) {
  .container,
  .container-narrow,
  .container-wide {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  section {
    padding-left: 5px;
    padding-right: 5px;
  }
  .hero-content {
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
  .split-text {
    padding-left: 5px;
    padding-right: 5px;
  }
  .footer-top {
    padding-left: 5px;
    padding-right: 5px;
  }
  .about-overlap-image {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  /* Blog subscribe form stacks on mobile */
  .blog-subscribe-form {
    flex-direction: column !important;
  }
  .blog-subscribe-form input,
  .blog-subscribe-form button {
    width: 100% !important;
  }
}

/* ============================================================
   ABOUT PAGE HERO GRADIENT ANIMATION
   Slow-moving horizontal gradient using deep-forest + aman-gold
   ============================================================ */
.about-hero-gradient {
  position: relative;
  overflow: hidden;
  padding: 180px 0 140px;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(
    -45deg,
    #3d3428 0%,
    #5a4a30 15%,
    #7a6a3a 30%,
    #c9a96e 45%,
    #8a7a48 60%,
    #5a4a30 75%,
    #3d3428 100%);
  background-size: 400% 400%;
  animation: aboutHeroGradient 40s linear infinite;
}

@keyframes aboutHeroGradient {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}
@supports (background: paint(something)) {
  .about-hero-gradient { will-change: background-position; }
}

.about-hero-gradient .hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.about-hero-gradient .hero-content h1 {
  font-family: 'Allonges', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  color: var(--linen);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  text-align: center;
}

.about-hero-gradient .hero-content .about-subheader {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--aman-gold);
  font-weight: 400;
  margin: 0.5rem auto 0;
  text-align: center !important;
  opacity: 0.85;
  width: 100%;
}

/* Overlay image with negative top margin */
.about-overlap-image {
  position: relative;
  z-index: 3;
  margin-top: -160px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
}

.about-overlap-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.about-overlap-image img.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Offerings page: overlap image shows immediately on load, no fade-in */
.about-overlap-image.overlap-immediate img {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 1024px) {
  .about-hero-gradient { padding: 160px 0 120px; min-height: 440px; }
  .about-overlap-image { margin-top: -60px; }
  .about-overlap-image img { height: 420px; }
}

@media (max-width: 768px) {
  .about-hero-gradient { padding: 140px 0 100px; min-height: 380px; }
  .about-overlap-image { margin-top: -50px; padding: 0 1.5rem; }
  .about-overlap-image img { height: 360px; }
}

@media (max-width: 480px) {
  .about-hero-gradient { padding: 120px 0 80px; min-height: 320px; }
  .about-overlap-image { margin-top: -40px; padding: 0 24px; }
  .about-overlap-image img { height: 300px; }
}

/* Reduce top padding on Origin Story section after overlap image */
.about-overlap-image + .section-linen {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 1024px) {
  .about-overlap-image + .section-linen { padding-top: 0 !important; }
}
@media (max-width: 768px) {
  .about-overlap-image + .section-linen { padding-top: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Connect Page — Video Hero (based on .about-hero-gradient)
   ═══════════════════════════════════════════════════════════════ */
.video-hero {
  position: relative;
  overflow: hidden;
  padding: 180px 0 140px;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #1a1510; /* fallback */
}

.video-hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.video-hero .hero-overlay-dark {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 21, 16, 0.55) 0%,
    rgba(26, 21, 16, 0.35) 40%,
    rgba(26, 21, 16, 0.45) 70%,
    rgba(26, 21, 16, 0.70) 100%
  );
  z-index: 1;
}

.video-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.video-hero .hero-content h1 {
  font-family: 'Allonges', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  color: var(--linen);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  text-align: center;
}

.video-hero .hero-content .about-subheader {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--aman-gold);
  font-weight: 400;
  margin: 0.5rem auto 0;
  text-align: center !important;
  opacity: 0.85;
  width: 100%;
}

.video-hero .hero-content .location-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--aman-gold);
  opacity: 0.65;
  margin-top: 1.2rem;
  text-align: center;
}

@media (max-width: 1024px) {
  .video-hero { padding: 160px 0 120px; min-height: 440px; }
}

@media (max-width: 768px) {
  .video-hero { padding: 140px 0 100px; min-height: 380px; }
}

@media (max-width: 480px) {
  .video-hero { padding: 120px 0 80px; min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-hero video { display: none; }
  .video-hero {
    background: linear-gradient(-45deg, #3d3428 0%, #5a4a30 15%, #7a6a3a 30%, #c9a96e 45%, #8a7a48 60%, #5a4a30 75%, #3d3428 100%);
    background-size: 400% 400%;
  }
}

/* ─── Offerings Page — Taller Hero (30% more) ─── */
.video-hero-tall {
  padding: 234px 0 182px;
  min-height: 676px;
}

@media (max-width: 1024px) {
  .video-hero-tall { padding: 208px 0 156px; min-height: 572px; }
}

@media (max-width: 768px) {
  .video-hero-tall { padding: 182px 0 130px; min-height: 494px; }
}

@media (max-width: 480px) {
  .video-hero-tall { padding: 156px 0 104px; min-height: 416px; }
}

/* ─── About Page — Overlap image: small overlap, full image visible ─── */
#aboutOverlapImage {
  margin-top: -40px !important;
}
#aboutOverlapImage img {
  height: 500px !important;
  object-position: center top !important;
}
@media (max-width: 1024px) {
  #aboutOverlapImage img { height: 420px !important; }
}
@media (max-width: 768px) {
  #aboutOverlapImage img { height: 360px !important; }
}
@media (max-width: 480px) {
  #aboutOverlapImage img { height: 300px !important; }
}

/* ─── Connect Page — Sacred Path video overlay (dual crossfade) ─── */
.sacred-path-section {
  position: relative;
  overflow: hidden;
}
.sacred-path-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
/* Active (visible) video */
.sacred-path-video.crossfade-active {
  opacity: 0.25;
}
/* Fading-out video stays visible during transition */
.sacred-path-video.crossfade-out {
  opacity: 0.25;
  transition: opacity 1.5s ease-in-out;
}
.sacred-path-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(15, 32, 19, 0.6) 0%,
    rgba(15, 32, 19, 0.3) 50%,
    rgba(15, 32, 19, 0.6) 100%
  );
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .sacred-path-video.crossfade-active,
  .sacred-path-video.crossfade-out {
    opacity: 0.15;
  }
}

/* ─── Connect Page — responsive details padding ─── */
@media (max-width: 1024px) {
  .connect-details {
    padding-left: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Connect Page — Full-Bleed Form Column with Shower Background Image
   ══════════════════════════════════════════════════════════════════════════════ */

/* Section overrides — remove padding so columns are flush */
.connect-section {
  padding: 0 !important;
}

/* Full-width two-column grid */
.connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 1200px; height: auto;
}

/* Left column — image fills full width, NO CROPPING */
.connect-form-col {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.connect-form-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

/* Content positioned over the full-width image — boxed inside the column */
.connect-form-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 48px);
}

/* Form content box — solid background for readability over image */
.connect-form-glass {
  background: rgba(255, 255, 255, 0.88);
  border: none;
  border-radius: 12px;
  padding: clamp(16px, 2.5vw, 28px);
  width: 90%;
  max-width: 90%;
  margin: 0 auto;
}

/* Title — black, no subtitle, no divider */
.connect-form-title {
  color: #000000;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  text-shadow: none;
  margin-bottom: clamp(16px, 2vw, 24px);
  line-height: 1.2;
}

/* Sleek form groups */
.connect-form-glass .form-group {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.connect-form-glass .form-group label {
  color: #000000;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: none;
  margin-bottom: 2px;
}

.connect-form-glass .form-group input,
.connect-form-glass .form-group textarea {
  background: transparent;
  border: none;
  color: #000000;
  text-shadow: none;
  padding: 2px 0;
  font-size: 0.9rem;
}

.connect-form-glass .form-group input::placeholder,
.connect-form-glass .form-group textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.85rem;
}

/* Select dropdown — consistent with other form fields */
.connect-form-glass .form-group select {
  background: transparent;
  border: none;
  color: #000000;
  text-shadow: none;
  padding: 2px 0;
  font-size: 0.9rem;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px;
}

.connect-form-glass .form-group select option {
  background: #ffffff;
  color: #000000;
  padding: 8px;
}

.connect-form-glass .form-group input:focus,
.connect-form-glass .form-group select:focus,
.connect-form-glass .form-group textarea:focus {
  outline: 1px solid var(--aman-gold);
  outline-offset: -1px;
}

/* Submit button — clean, not full width, black text */
.connect-form-glass .btn-dark {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000000;
  text-shadow: none;
  margin-top: 6px;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 10px 16px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.connect-form-glass .btn-dark:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.3);
}

/* Right column — details, content boxed */
.connect-details-col {
  display: flex;
  align-items: center;
  background: var(--ivory-mist);
}

.connect-details-inner {
  padding: clamp(40px, 6vw, 80px);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Boxed content card within right column — no border */
.connect-details-box {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  border-radius: 12px;
  padding: clamp(28px, 4vw, 48px);
  width: 100%;
}

/* Center divider in connect details */
.connect-details-box .divider {
  margin-left: auto;
  margin-right: auto;
}

/* Responsive: stack on mobile */
@media (max-width: 1024px) {
  .connect-grid {
    grid-template-columns: 1fr;
  }
  .connect-form-col {
    min-height: 700px;
  }
  .connect-details-col {
    background: var(--ivory-mist);
  }
}

@media (max-width: 768px) {
  .connect-form-col {
    min-height: 850px;
  }
  .connect-form-inner {
    padding: 32px 20px;
  }
  .connect-form-glass {
    padding: 22px 16px;
  }
  .connect-details-inner {
    padding: 24px;
  }
  .connect-details-box {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .connect-form-col {
    min-height: 950px;
  }
  .connect-form-inner {
    padding: 28px 14px;
  }
  .connect-form-glass {
    padding: 18px 14px;
  }
}