/* ==========================================================================
   TRINAYA CSS MASTER ARCHITECTURE INDEX & QUICK LOOKUP TABLE
   ==========================================================================
   * SECTION 1: DESIGN TOKENS & ROOT VARIABLES        -> Line ~25
   * SECTION 2: BASE RESET & GLOBAL HTML/BODY         -> Line ~105
   * SECTION 3: TYPOGRAPHY HIERARCHY (H1-H4, BODY)    -> Line ~180
   * SECTION 4: GLOBAL BUTTONS & PILL CONTROLS        -> Line ~270
   * SECTION 5: HEADER NOTCH & NAVIGATION ARCHITECTURE-> Line ~380
   * SECTION 6: HERO BANNER & 5-DOT CAROUSEL          -> Line ~550
   * SECTION 7: WHY TRINAYA & VIDEO LIGHTBOX CARD     -> Line ~730
   * SECTION 8: HEALING MANIFESTO & HERITAGE CARD     -> Line ~820
   * SECTION 9: FEATURED THERAPIES 3-COLUMN GRID      -> Line ~950
   * SECTION 10: CLINICS SECTION & GPU DRAGGABLE TAPE -> Line ~1045
   * SECTION 11: FRANCHISE OPPORTUNITY & BROCHURE     -> Line ~1260
   * SECTION 12: FAQ ACCORDION SYSTEM                 -> Line ~1520
   * SECTION 13: GLOBAL FOOTER & BACK-TO-TOP          -> Line ~1680
   * SECTION 14: MODALS & LIGHTBOX OVERLAYS           -> Line ~1890
   * SECTION 15: LENIS SMOOTH SCROLL & STICKY HEADER  -> Line ~2180
   ========================================================================== */

/* ==========================================================================
   TRINAYA - KOTTAKKAL ARYA VAIDYA SALA
   Ultra-High Performance, Zero-Bloat, 100/100 PageSpeed Theme Stylesheet
   Pixel-Perfect Implementation of Figma Design
   ========================================================================== */

/* Google Fonts Import: Inter (Sole Global Font) */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ==========================================================================
     EXACT FIGMA CONTAINER TOKENS (from canvas_desktop.fig / Trinaya_desktop.fig)
     ========================================================================== */
  --container-banner: 119rem; /* 1904px */
  --container-wide: 113rem;   /* 1808px */
  --container-core: 94rem;    /* 1504px */
  --container-narrow: 60rem;  /* 960px */

  /* ==========================================================================
     EXACT FIGMA TYPOGRAPHY TOKENS (from canvas_desktop.fig / Trinaya_desktop.fig)
     ========================================================================== */
  --fs-hero: 5rem;             /* 80px - Desktop/Hero */
  --fs-h1: 4rem;               /* 64px - Desktop/H1 */
  --fs-h2: 3.5rem;             /* 56px - Desktop/H2 */
  --fs-stat: 2.5rem;           /* 40px - Desktop/Body 1 */
  --fs-h3: 2rem;               /* 32px - Desktop/H3 & Desktop/Body 2 */
  --fs-card-title: 1.5rem;     /* 24px - Desktop/L2 & Desktop/Body 3 */
  --fs-lead: 1.125rem;         /* 18px - Desktop/L3 & Desktop/Body 4 */
  --fs-body: 1rem;             /* 16px - Desktop/body 5 & Subtitle */
  --fs-caption: 0.875rem;      /* 14px - Desktop/Caption */
  --fs-label: 0.8125rem;       /* 13px - Label token */
  --fs-help: 0.75rem;          /* 12px - Help/Status token */
  --fs-micro: 0.625rem;        /* 10px - Micro location token */

  /* Exact Figma Line Heights */
  --lh-hero: 1.04;             /* 104% */
  --lh-h1: 1.12;               /* 112% */
  --lh-h2: 1.04;               /* 104% */
  --lh-h3: 1;                  /* 100% */
  --lh-heading: 1.34;          /* 134% */
  --lh-body: 1.5;              /* 150% */
  --lh-caption: 1.12;          /* 112% */

  /* Proportional Letter Spacings (relaxed from -0.06em base to -0.03em) */
  --ls-hero: -0.03em;          /* -3% */
  --ls-h1: -0.03em;            /* -3% */
  --ls-h2: -0.03em;            /* -3% */
  --ls-h3: -0.02em;            /* -2% */
  --ls-card: -0.02em;          /* -2% */
  --ls-quote: -0.027em;        /* -2.7% */
  --ls-lead: -0.02em;          /* -2% */
  --ls-body: -0.023em;         /* -2.3% */
  --ls-caption: -0.02em;       /* -2% */

  /* Figma Design Tokens */
  --color-brand-green: #0c3830;
  --color-brand-green-dark: #07251f;
  --color-brand-green-hover: #134e44;
  --color-accent-chestnut: #a2533c;
  --color-accent-chestnut-dark: #823d29;

  --color-bg-sand: #f5e9d8;
  --color-bg-sand-light: #fbf8f4;
  --color-bg-sand-card: #ebdccb;
  --color-bg-sand-alt: #eddcca;
  --color-bg-dark: #04221b;
  --color-bg-terracotta: #9d4e38;

  --color-text-dark: #1b241e;
  --color-text-body: #3c4741;
  --color-text-muted: #6b7770;
  --color-text-light: #f4ede4;

  --color-border: #e3d9ce;
  --color-border-light: #ece3d8;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-2xl: 2.5rem;
  --radius-full: 9999px;

  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   [GLOBAL 2: RESPONSIVE SCALING]
   ========================================================================== */
@media (min-width: 1024px) {
  html {
    font-size: calc(100vw / 1920 * 16);
  }
  .mobile-only { display: none !important; }
}

@media (max-width: 1023px) {
  html {
    font-size: 16px;
  }
  .desktop-only { display: none !important; }
}

html {
  scrollbar-gutter: stable;
}

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

body {
  font-family: var(--font-body);
  color: var(--color-text-body);
  background-color: var(--color-bg-sand);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-dark);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: var(--ls-h2);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-card-title); line-height: var(--lh-heading); letter-spacing: var(--ls-card); font-weight: 500; }
h5 { font-size: var(--fs-lead); line-height: var(--lh-heading); letter-spacing: var(--ls-lead); font-weight: 500; }
h6 { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); font-weight: 500; }

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

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

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Layout Containers - Exact Figma Container Hierarchy */
.container {
  width: 100%;
  max-width: var(--container-core); /* 1504px - Core Content Grid */
  margin-inline: auto;
  padding-inline: 0;
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide); /* 1808px - Wide Card Sections */
  margin-inline: auto;
  padding-inline: 0;
}

.container-banner {
  width: 100%;
  max-width: var(--container-banner); /* 1904px - Full-Bleed Banners */
  margin-inline: auto;
  padding-inline: 0;
}

@media (max-width: 1023px) {
  .container,
  .container-wide,
  .container-banner {
    padding-inline: 1.25rem;
    max-width: 100%;
  }
}

/* Button Components - All Primary & Secondary CTAs */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1.75rem;
  border-radius: 0.75rem; /* 12px exact Figma corner radius */
  font-family: var(--font-body);
  font-size: var(--fs-caption); /* 14px */
  letter-spacing: -0.01em;
  font-weight: 500;
  cursor: default;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

.btn-pill {
  border-radius: 0.75rem; /* Standardized to 12px rounded rectangle */
}

.btn-sm {
  height: 2.375rem;
  min-height: 2.375rem;
  padding: 0 1.4rem;
  font-size: 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid transparent;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background-color: var(--color-brand-green);
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  box-sizing: border-box;
}
/* hover effect removed */

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-dark);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
}
/* hover effect removed */

.btn-accent {
  background-color: var(--color-accent-chestnut);
  color: #ffffff;
  border-radius: 0.75rem;
}
/* hover effect removed */

.btn-outline-dark {
  background: transparent;
  border: 1px solid #bbaea0;
  color: var(--color-text-dark);
  padding: 0.65rem 1.75rem;
  font-size: 0.9375rem;
  border-radius: 0.75rem;
}
/* hover effect removed */

.btn-hero-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #1a1a1a;
  font-family: var(--font-body);
  font-weight: 400; /* Regular Inter */
  padding: 0 1.5rem; /* 24px */
  min-width: 11rem; /* 176px - Exact Figma width */
  height: 3rem; /* 48px - Exact Figma height */
  font-size: 0.9375rem; /* 15px */
  border-radius: 0.75rem; /* 12px exact Figma radius */
  border: 1px solid transparent;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
  transition: all var(--transition-fast);
}
/* hover effect removed */

.btn-hero-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; /* Clean transparent per screenshot */
  border: 1px solid rgba(255, 255, 255, 0.28); /* 1px stroke from Figma Component 11 */
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 400; /* Regular Inter */
  padding: 0 1.5rem; /* 24px */
  min-width: 11rem; /* 176px - Exact Figma width */
  height: 3rem; /* 48px - Exact Figma height */
  font-size: 0.9375rem; /* 15px */
  border-radius: 0.75rem; /* 12px exact Figma radius */
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: default;
  transition: all var(--transition-fast);
}
/* hover effect removed */

.btn-outline-white {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  padding: 0 1.5rem;
  min-width: 11rem;
  height: 3rem;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 0.9375rem;
  font-weight: 400;
  border-radius: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}
/* hover effect removed */

.btn-outline-tan {
  background: transparent;
  border: 1px solid #c7b7a4;
  color: var(--color-text-dark);
  padding: 0 1.4rem;
  height: 2.375rem;
  min-height: 2.375rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.625rem;
}
/* hover effect removed */

/* ==========================================================================
   GLOBAL HEADER NOTCH & HERO SECTION (EXACT FIGMA RECTANGLES & INVERTED FILLETS)
   ========================================================================== */

/* Hero Container: 8px padding on 1920px canvas, matching Figma Rect(8, 8, 1912, 960) */
.hero-container {
  width: 100%;
  max-width: 120rem; /* 1920px at 16px rem */
  margin-inline: auto;
  padding: 0.5rem; /* 8px */
  position: relative;
}

@media (max-width: 1023px) {
  .hero-container {
    padding: 0;
  }
}

/* ==========================================================================
   [GLOBAL 3: HEADER NOTCH & LOGO]
   ========================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  pointer-events: none;
}

.header-container {
  padding-bottom: 0;
}

@media (max-width: 1023px) {
  .site-header {
    position: relative;
    pointer-events: auto;
    background-color: var(--color-bg-sand);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
}

.header-floating-bar {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  width: 46.5rem; /* 744px in 1920 base */
  height: 5.0625rem; /* 81px in 1920 base */
  background-color: var(--color-bg-sand);
  border-bottom-right-radius: 2rem; /* 32px corner radius */
  border-bottom-left-radius: 0;
  padding: 0 1rem 0 1.5rem;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-right-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
  transition: gap 0.35s ease;
}

.nav-item-home {
  display: block;
}

body.home .nav-item-home,
.front-page .nav-item-home {
  display: none !important;
}



/* Top-Right Inverted Fillet (Drawing 10 in Figma: Rect(752, 8, 784, 40) r=32px) */
.header-floating-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 2rem;
  height: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath d='M32 0C14.3269 0 0 14.3269 0 32L0 0Z' fill='%23f5e9d8'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Bottom-Left Inverted Fillet (Drawing 9 in Figma: Rect(8, 88, 40, 120) r=32px) */
.header-floating-bar::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 2rem;
  height: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath d='M32 0C14.3269 0 0 14.3269 0 32L0 0Z' fill='%23f5e9d8'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

@media (max-width: 1023px) {
  .header-floating-bar {
    width: 100%;
    height: 4.5rem;
    border-radius: 0;
    padding: 0 1.25rem;
    justify-content: space-between;
  }
  .header-floating-bar::after,
  .header-floating-bar::before {
    display: none !important;
  }
}

.brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: 3rem;
  flex-shrink: 0;
}

.brand-logo-img {
  height: 1.9375rem; /* 31px */
  width: auto;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-caption); /* 14px */
  letter-spacing: var(--ls-caption);
  font-weight: 400; /* Regular */
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.nav-link:hover, .nav-link.active {
  color: var(--color-brand-green);
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Header CTA: Enquire Now terracotta outline (Drawing 51 in Figma: Rect(607, 23, 736, 73) r=13px) */
.btn-enquire-pill,
.btn-enquire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.125rem; /* 50px */
  min-width: 8.0625rem; /* 129px */
  padding: 0 1.25rem;
  border: 1.5px solid #d69476;
  border-radius: 0.8125rem; /* 13px exact Figma corner radius */
  background-color: transparent;
  color: #1a1a1a;
  font-family: var(--font-body);
  font-size: 0.9375rem; /* 15px */
  font-weight: 400; /* Regular */
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* hover effect removed */

/* ==========================================================================
   [PAGE: HOME ONLY - SECTION 1: HERO & SLIDER]
   ========================================================================== */
.hero-section {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
}

.hero-banner-card {
  position: relative;
  width: 100%;
  height: 32.5rem; /* 520px - Exact Figma Inner Page Hero Height */
  border-radius: 2rem; /* 32px corner radius */
  overflow: hidden;
  background-color: #031f1a;
  display: flex;
  align-items: flex-end;
}

/* Home & About Page Heroes: 952px (2:1 aspect ratio) */
body.home .hero-banner-card,
.front-page .hero-banner-card,
.home-hero .hero-banner-card,
body.page-template-page-about .hero-banner-card {
  height: 59.5rem; /* 952px */
  border-radius: 0 2rem 2rem 2rem;
}

@media (max-width: 1023px) {
  .hero-banner-card,
  body.home .hero-banner-card,
  body.page-template-page-about .hero-banner-card {
    height: 32rem;
    border-radius: var(--radius-lg);
  }
}

.hero-slider-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity;
}

.hero-bg-slide.active {
  opacity: 1;
  visibility: visible;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

/* Hero overlay gradient disabled per user request (NO green gradient) */
.hero-overlay-gradient {
  display: none !important;
}

.hero-content {
  position: relative;
  z-index: 10;
  padding-left: 5.5rem; /* 88px - Exact Figma Inset */
  padding-bottom: 4rem;
  padding-right: 2rem;
  max-width: 54rem;
  color: #ffffff;
}

body.home .hero-content,
.front-page .hero-content,
.home-hero .hero-content,
body.page-template-page-about .hero-content {
  padding-bottom: 6.5rem; /* ~104px */
}

@media (max-width: 1023px) {
  .hero-content {
    padding: 2.5rem 1.5rem;
    max-width: 100%;
  }
}

.hero-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1); /* 64px - Default for Inner Page Heroes */
  font-weight: 400; /* Inter Regular */
  line-height: var(--lh-h1); /* 1.12 */
  letter-spacing: var(--ls-h1); /* -0.06em */
  color: #ffffff;
  margin-bottom: 1.5rem;
  text-shadow: none !important;
}

/* Home Page Specific Hero: 80px */
body.home .hero-title,
.front-page .hero-title,
.home-hero .hero-title {
  font-size: var(--fs-hero); /* 80px */
  line-height: var(--lh-hero); /* 1.04 */
  letter-spacing: var(--ls-hero); /* -0.06em */
}

@media (max-width: 1023px) {
  .hero-title {
    font-size: 2.75rem;
  }
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-lead); /* 18px - Exact Figma font size */
  line-height: 1.34; /* 24px line-height (48px / 2 lines) */
  letter-spacing: var(--ls-lead); /* -0.04em */
  color: rgba(255, 255, 255, 0.95);
  font-weight: 300;
  max-width: 29.5rem; /* ~472px - accommodates relaxed letter-spacing so 'authentic,' stays on line 1 */
  margin-bottom: 2.25rem;
  text-shadow: none !important;
}

@media (max-width: 1023px) {
  .hero-subtitle {
    font-size: 1rem;
    max-width: 100%;
    margin-bottom: 2rem;
  }
}

.hero-buttons {
  display: flex;
  gap: 0.5rem; /* 8px - Exact Figma gap in Frame 46 */
  align-items: center;
  flex-wrap: wrap;
}

/* Slider Dots Indicator - Exact Figma Frame 469345 (104x8 at x=1752, y=888) */
.hero-dots {
  position: absolute;
  right: 3rem; /* 48px from right */
  bottom: 3.5rem; /* 56px from bottom */
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem; /* 16px gap = 24px center-to-center */
}

.hero-dot {
  width: 0.5rem; /* 8px exact Figma diameter */
  height: 0.5rem; /* 8px exact Figma diameter */
  border-radius: 50%;
  background-color: #ffffff;
  display: inline-block;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero-dot.active {
  opacity: 1 !important;
  transform: scale(1.25);
  filter: none !important;
}


/* ==========================================================================
   GRADIENT ZONE: FROM BELOW HERO TILL LET THERE BE WELLBEING SECTION
   ========================================================================== */
.home-sand-gradient-zone {
  background: linear-gradient(180deg, #F5E9D8 0%, #FFFBF7 100%);
}

/* ==========================================================================
   [PAGE: HOME ONLY - SECTION 2: WHY TRINAYA & VIDEO]
   ========================================================================== */
.section-why {
  padding-top: 10rem; /* 160px top padding */
  padding-bottom: 0; /* bottom padding removed */
  text-align: left;
}

.eyebrow {
  font-size: var(--fs-lead); /* 18px */
  line-height: var(--lh-heading); /* 1.34 */
  letter-spacing: var(--ls-lead); /* -0.04em */
  color: var(--color-accent-chestnut);
  font-weight: 400;
  margin-bottom: 1.25rem;
  display: block;
}

.eyebrow-sub {
  font-size: var(--fs-lead); /* 18px */
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-lead);
  color: var(--color-accent-chestnut);
  font-weight: 400;
  display: block;
  margin-top: 1rem;
}

.why-lead-text {
  font-size: var(--fs-stat); /* 40px - Desktop/Body 1 */
  font-weight: 300; /* Light */
  color: var(--color-text-dark);
  line-height: 1.5;
  max-width: 66.5rem; /* ~1064px at 16px base - breaks cleanly so 'and' and 'more' wrap to next lines */
  margin-inline: 0;
  letter-spacing: -0.03em;
  text-align: left;
}

@media (max-width: 1023px) {
  .why-lead-text {
    font-size: 1.5rem;
  }
}

.video-preview-card {
  position: relative;
  width: 100%;
  height: 50rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-top: 0;
  cursor: default;
}

@media (max-width: 1023px) {
  .video-preview-card {
    height: 22rem;
    border-radius: var(--radius-md);
  }
}

.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

/* hover effect removed */

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem; /* 64px at 16px rem base */
  height: 4rem; /* 64px at 16px rem base */
  background: #ffffff;
  border-radius: 1.5rem; /* 24px corner radius */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-fast);
}

/* hover effect removed */

/* ==========================================================================
   [PAGE: HOME ONLY - SECTION 3: HEALING & HERITAGE CARD]
   ========================================================================== */
.section-split {
  padding-top: 15rem; /* 240px top padding */
  padding-bottom: 3.5rem; /* 56px bottom padding */
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
  margin-bottom: 15rem; /* 240px bottom padding below about trinaya paragraph */
}

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

.split-title {
  font-size: var(--fs-h2); /* 56px - Desktop/H2 */
  font-weight: 400;
  line-height: var(--lh-h2); /* 1.04 */
  letter-spacing: var(--ls-h2); /* -0.06em */
  color: var(--color-text-dark);
}

@media (max-width: 1023px) {
  .split-title {
    font-size: 2.25rem;
  }
}

.split-desc {
  font-size: var(--fs-card-title); /* 24px (1.5rem) */
  color: var(--color-text-body);
  line-height: var(--lh-body); /* 1.5 */
  letter-spacing: var(--ls-card); /* -0.02em */
  font-weight: 300;
}

@media (max-width: 1023px) {
  .split-desc {
    font-size: 1.1rem;
  }
}

/* Kottakkal Legacy Card */
.heritage-card {
  background-color: #04251e;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50:50 equal split */
  align-items: center;
  height: 38rem; /* 608px exact height */
  padding: 5rem; /* 80px padding around the whole section */
  gap: 3rem;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .heritage-card {
    grid-template-columns: 1fr;
    height: auto;
    padding: 2rem 1.5rem;
  }
}

.heritage-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

@media (max-width: 1023px) {
  .heritage-content {
    padding: 0;
  }
}

.heritage-title {
  font-size: var(--fs-h2); /* 56px - Desktop/H2 */
  font-weight: 400;
  line-height: var(--lh-h2); /* 1.04 */
  letter-spacing: var(--ls-h2); /* -0.06em */
  color: #f1e2cf;
  margin-bottom: 0.75rem;
}

@media (max-width: 1023px) {
  .heritage-title {
    font-size: 2rem;
  }
}

.heritage-subhead {
  font-size: var(--fs-lead); /* 18px */
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-lead);
  color: #a1cfbe;
  font-weight: 400;
  display: block;
  margin-bottom: 2rem;
}

.heritage-text {
  font-size: var(--fs-body); /* 16px */
  color: rgba(255, 255, 255, 0.88);
  line-height: var(--lh-body); /* 1.5 */
  letter-spacing: var(--ls-body); /* -0.046em */
  font-weight: 300;
  margin-bottom: 2.5rem;
}

.heritage-image-wrap {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (max-width: 1023px) {
  .heritage-image-wrap {
    height: 20rem;
  }
}

.heritage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   [HOME 4: FEATURED THERAPIES GRID]
   ========================================================================== */
.section-therapies {
  padding-top: 10rem; /* Top: 160px */
  padding-bottom: 0;
  position: relative;
  z-index: 10;
}

.therapies-header-wrap {
  margin-bottom: 3.5rem;
}

.section-headline {
  font-size: var(--fs-h2); /* 56px - Desktop/H2 */
  font-weight: 400;
  line-height: var(--lh-h2); /* 1.04 */
  color: var(--color-text-dark);
  letter-spacing: var(--ls-h2); /* -0.06em */
}

@media (max-width: 1023px) {
  .section-headline {
    font-size: 2.25rem;
  }
}

/* Sub-section headings (Explore Therapies, What Our Patrons Say, FAQs) */
.section-headline-sm,
.sub-headline {
  font-size: var(--fs-h3); /* 32px - Desktop/H3 */
  font-weight: 400;
  line-height: var(--lh-h3); /* 1.0 */
  letter-spacing: var(--ls-h3); /* -0.04em */
}

.therapies-grid {
  display: grid;
  grid-template-columns: repeat(3, 488px); /* Exact Figma 488px card width */
  gap: 16px; /* Exact Figma 16px gap */
  justify-content: center;
  margin-bottom: -18rem; /* Overlaps into middle of therapy card */
  position: relative;
  z-index: 20;
}

@media (max-width: 1536px) {
  .therapies-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .therapies-grid {
    grid-template-columns: 1fr;
    margin-bottom: 2rem;
  }
}

.therapy-card {
  background-color: #F1E2CF; /* Exact Figma fill: #f1e2cf */
  border-radius: 40px; /* Exact Figma radius: 40px */
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

body.home .therapy-card,
.front-page .therapy-card {
  background-color: #F1E2CF !important;
  border-radius: 40px !important;
}

.therapy-card-img-wrap {
  width: 100%;
  height: 320px; /* Exact Figma 320px height */
  border-radius: 40px !important; /* Exact Figma cover radius: 40px all around */
  overflow: hidden !important;
  position: relative;
  background-color: transparent !important;
  box-sizing: border-box;
}

body.home .therapy-card-img-wrap,
.front-page .therapy-card-img-wrap {
  border: 6px solid #F1E2CF !important; /* Exact Figma cover inside stroke: 6px #f1e2cf */
  border-radius: 40px !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  overflow: hidden !important;
}

.therapy-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 34px !important; /* 40px outer radius minus 6px border */
  display: block;
}

.therapy-card-body {
  padding: 24px 32px 40px 40px; /* Exact Figma pad:[24, 32, 40, 40] */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  min-height: 244px;
}

.therapy-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 24px; /* Exact Figma 24px */
  font-weight: 400; /* Regular */
  line-height: 36px; /* Exact Figma 36px */
  letter-spacing: -0.03em;
  color: #1F1B17; /* Exact Figma #1f1b17 */
  margin-top: 0;
  margin-bottom: 8px; /* Exact Figma gap: 8px */
}

.therapy-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* Exact Figma 16px */
  color: #302D28; /* Exact Figma #302d28 */
  line-height: 24px; /* Exact Figma 24px */
  letter-spacing: -0.04em;
  font-weight: 300; /* Light */
  margin-bottom: 40px; /* Exact Figma gap: 40px */
  flex-grow: 1;
}

.therapy-card-ctas {
  display: flex;
  align-items: center;
  gap: 8px; /* Exact Figma 8px gap */
}

.therapy-card-ctas .btn {
  height: 48px !important; /* Exact Figma 48px height */
  min-height: 48px !important;
  border-radius: 12px !important; /* Exact Figma 12px radius */
  padding: 14px 24px !important; /* Exact Figma pad:[14, 24, 14, 24] */
  font-size: 14px !important; /* Exact Figma 14px */
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: -0.035em !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.therapy-card-ctas .btn-primary {
  background-color: #033F34 !important; /* Exact Figma #033f34 */
  color: #FFFBF7 !important;
  border: none !important;
}

.therapy-card-ctas .btn-outline-tan {
  background: transparent !important;
  color: #1F1B17 !important;
  border: 1px solid #D69476 !important; /* Exact Figma stroke: #d69476 */
}


/* ==========================================================================
   5. FIND A TRINAYA CLINIC NEAR YOU (TERRACOTTA SECTION)
   ========================================================================== */
.section-clinics {
  background-color: var(--color-bg-terracotta);
  color: #ffffff;
  border-radius: 2rem; /* 32px border radius */
  padding-top: 22rem; /* Balanced spacing for 18rem card overlap */
  padding-bottom: 11.5rem; /* 184px bottom padding */
  position: relative;
  z-index: 5;
  width: 1888px;
  max-width: 1888px;
  margin-inline: auto;
  overflow: hidden; /* Clips carousel to the rounded brown container */
}

@media (max-width: 1023px) {
  .section-clinics {
    width: 100%;
    max-width: 100%;
    padding-top: 4rem;
    padding-bottom: 4rem;
    border-radius: var(--radius-lg);
  }
}

.therapies-explore-cta {
  margin-bottom: 12.5rem; /* 200px space above divider line */
}

.clinics-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin-bottom: 12.5rem; /* 200px space below divider line */
}

.clinics-layout-flex {
  display: grid;
  grid-template-columns: 27.5rem minmax(0, 1fr);
  gap: 5rem;
  align-items: center;
}

@media (max-width: 1023px) {
  .clinics-layout-flex {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.clinics-intro {
  position: relative;
  z-index: 10;
  width: 27.5rem;
  max-width: 100%;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.clinics-title {
  font-size: var(--fs-h2); /* 56px - Desktop/H2 */
  font-weight: 400;
  line-height: var(--lh-h2); /* 1.04 */
  letter-spacing: var(--ls-h2); /* -0.06em */
  color: #F1E2CF;
  margin-bottom: 0.75rem;
}

@media (max-width: 1023px) {
  .clinics-intro {
    max-width: 100%;
  }
  .clinics-title {
    font-size: 2.25rem;
  }
}

.clinics-subhead {
  font-size: var(--fs-caption); /* 14px */
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-caption);
  color: #F2C5AE;
  font-weight: 400;
  display: block;
  margin-bottom: 1.75rem;
}

.clinics-subtitle {
  font-size: var(--fs-lead); /* 18px */
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--lh-body); /* 1.5 */
  letter-spacing: var(--ls-lead);
  font-weight: 300;
  max-width: 21.5rem; /* ~344px - comfortable width with 'Visit' starting on line 2 */
  width: 100%;
}

.clinics-carousel-container {
  position: relative;
  z-index: 1;
  overflow: visible;
  min-width: 0;
  width: 100%;
  cursor: default;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.clinics-slider-viewport {
  position: relative;
  overflow: visible;
  width: 100%;
}

.clinics-slider-track {
  display: flex;
  gap: 1.75rem;
  width: max-content;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  padding-bottom: 2rem;
  cursor: none; /* Keep cursor hidden in gaps between cards so custom drag badge stays active */
}

.clinic-card {
  background: #F5E5DC; /* Exact requested background */
  color: var(--color-text-dark);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  width: 22.5rem; /* Exactly 360px at 16px rem base */
  min-width: 22.5rem;
  max-width: 22.5rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-select: none;
  cursor: none; /* Hide default cursor so custom drag SVG acts as cursor */
}

.clinic-card a,
.clinic-card button {
  cursor: pointer;
}

.clinic-card img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.clinic-branch-name {
  font-size: var(--fs-card-title); /* 24px - Desktop/L2 */
  font-weight: 500;
  line-height: var(--lh-heading); /* 32px / 1.34 */
  letter-spacing: var(--ls-card); /* -0.04em */
  margin-bottom: 1rem;
}

.clinic-address {
  font-size: var(--fs-body); /* 16px */
  color: #302D28; /* Exact requested color */
  line-height: var(--lh-body); /* 1.5 */
  letter-spacing: var(--ls-body); /* -0.046em */
  font-weight: 300;
  margin-bottom: 1.5rem;
  min-height: 4.8rem;
}

.clinic-map-link {
  font-size: 1rem; /* 16px */
  letter-spacing: var(--ls-caption);
  color: #033f34;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.25rem; /* 4px bottom padding for underline */
  margin-bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
}

.clinic-map-arrow {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: middle;
}

.clinic-card-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
}

/* Drag Badge Overlay - SVG Frame 469387 (72px height), Fixed Cursor Following on Hover (No Shadow) */
.carousel-drag-badge {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  filter: none !important;
  box-shadow: none !important;
  will-change: transform, opacity;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-drag-badge-svg {
  height: 72px !important;
  max-height: 72px !important;
  width: auto;
  display: block;
  overflow: visible;
}

.carousel-drag-badge-svg .arrow-left,
.carousel-drag-badge-svg .arrow-right {
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* By default or moving left: show left arrow, hide right arrow */
.carousel-drag-badge .arrow-left {
  opacity: 1;
  transform: translateX(0);
}
.carousel-drag-badge .arrow-right {
  opacity: 0;
  transform: translateX(-4px);
}

/* Moving right: hide left arrow, show right arrow */
.carousel-drag-badge.is-moving-right .arrow-left {
  opacity: 0;
  transform: translateX(4px);
}
.carousel-drag-badge.is-moving-right .arrow-right {
  opacity: 1;
  transform: translateX(0);
}

/* Moving left: show left arrow, hide right arrow */
.carousel-drag-badge.is-moving-left .arrow-left {
  opacity: 1;
  transform: translateX(0);
}
.carousel-drag-badge.is-moving-left .arrow-right {
  opacity: 0;
  transform: translateX(-4px);
}

.carousel-drag-badge.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.carousel-indicator-track {
  position: relative;
  width: 100%;
  max-width: 16rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  margin-top: 1.75rem;
  margin-bottom: 0;
  overflow: visible;
}

.indicator-pill-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3rem; /* 48px pill width */
  height: 6px;
  background: #FFFFFF; /* Pure white requested */
  border-radius: 9999px;
  transform: translateY(-50%);
  transition: transform 0.05s linear;
  will-change: transform;
}

/* ==========================================================================
   6. FRANCHISE OPPORTUNITY (DOUBLE NESTED DARK GREEN CARD)
   ========================================================================== */
.section-franchise {
  padding-top: 160px !important;
  padding-bottom: 56px !important;
  padding-inline: 0;
}

.franchise-outer-card {
  background-color: #04221b;
  border-radius: 24px;
  padding: 200px 4rem !important;
  max-width: 1808px;
  margin-inline: auto;
  width: 100%;
}

@media (max-width: 1023px) {
  .franchise-outer-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }
}

.franchise-inner-card {
  background-color: #021612;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
}

@media (max-width: 1023px) {
  .franchise-inner-card {
  background-color: #021612;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
}
}

.franchise-image-col {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  overflow: hidden;
  border-radius: 24px 0 0 24px;
  background: transparent;
  border: none;
  outline: none;
}

.franchise-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  background: transparent;
  border-radius: 24px 0 0 24px;
  border: none;
  outline: none;
  display: block;
}

.franchise-content-col {
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 1023px) {
  .franchise-content-col {
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
}

.franchise-headline {
  font-size: 32px;
  font-weight: 400;
  color: #F1E2CF;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
}

@media (max-width: 1023px) {
  .franchise-headline {
  font-size: 32px;
  font-weight: 400;
  color: #F1E2CF;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
}
}

.franchise-subhead {
  font-size: 14px;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-lead);
  color: #A1CFBE;
  font-weight: 400;
  display: block;
  margin-bottom: 1.5rem;
}

.franchise-desc {
  font-size: var(--fs-body); /* 16px */
  color: rgba(255, 255, 255, 0.88);
  line-height: var(--lh-body); /* 1.5 */
  letter-spacing: var(--ls-body); /* -0.046em */
  margin-bottom: 2.5rem;
  font-weight: 300;
}

.franchise-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
}

.franchise-actions .btn-hero-white,
.franchise-actions .btn {
  min-width: auto;
  padding: 0 1.75rem;
  flex-shrink: 0;
}

/* ==========================================================================
   [HOME 7: TESTIMONIALS CAROUSEL]
   ========================================================================== */
.section-testimonials {
  padding-top: 8rem;
  padding-bottom: 8rem;
  overflow: visible;
}

.testimonials-headline {
  font-size: 32px !important;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--color-text-dark);
  margin-bottom: 3.5rem;
}

.testimonials-carousel-wrap {
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 440px;
}

.testimonials-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  height: 440px;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

.testimonials-track.is-dragging {
  cursor: grabbing;
}

/* Card Widths & Base Inactive Style: White/Cream 512px (390px text + 122px author), Height: 240px, Radius: 32px */
.testimonial-card {
  width: 512px;
  flex: 0 0 512px;
  height: 240px;
  min-height: 240px;
  background-color: #fdfbf8;
  color: var(--color-text-dark);
  border-radius: 32px;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: flex-basis 0.22s cubic-bezier(0.16, 1, 0.3, 1), width 0.22s cubic-bezier(0.16, 1, 0.3, 1), height 0.22s cubic-bezier(0.16, 1, 0.3, 1), min-height 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.22s ease, background-color 0.22s ease, color 0.22s ease, opacity 0.2s ease;
}

/* 342px Left Column: Text + Quote Icon, 40px Left and Top Padding, No Right Padding */
.testimonial-card .testimonial-text-col {
  flex: 0 0 342px;
  width: 342px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40px 0 40px 40px;
  box-sizing: border-box;
}

/* Quote Icon Dynamically Positioned Top-Left Behind/At Top of Text - Exactly 22px Width */
.testimonial-card .testimonial-quote-icon {
  position: absolute;
  top: 38px;
  left: 40px;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  margin: 0;
  display: flex;
  align-items: center;
}

.testimonial-card .testimonial-quote-svg {
  width: 22px;
  height: auto;
  display: block;
  filter: none;
  transition: filter 0.5s ease;
}

.testimonial-card .testimonial-quote {
  position: relative;
  z-index: 2;
  color: var(--color-text-dark);
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-weight: 300;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.5s ease, font-size 0.22s ease;
}

/* 170px Right Column: Author Details, 40px Right and Bottom Padding */
.testimonial-card .testimonial-author-flex {
  flex: 0 0 170px;
  width: 170px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 40px 40px 40px 1rem;
  box-sizing: border-box;
  gap: 0.75rem;
  text-align: left;
}

.testimonial-card .author-avatar-wrap {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), height 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-card .author-avatar {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover !important;
  display: block;
  transition: border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-card .author-name {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #072f28;
  line-height: 1.25;
  white-space: nowrap;
  transition: color 0.5s ease;
}

.testimonial-card .author-location {
  font-size: 10px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.25;
  margin-top: 0.25rem;
  white-space: nowrap;
  transition: color 0.5s ease;
}

/* Active Left-Aligned Card: 40px Radius, Turns Green, 592px width, 416px height */
.testimonial-card.is-active {
  width: 592px;
  flex: 0 0 592px;
  height: 416px;
  min-height: 416px;
  border-radius: 40px;
  padding: 0;
  background-color: #072f28 !important;
  color: #ffffff !important;
  gap: 0;
}

.testimonial-card.is-active .testimonial-text-col {
  flex: 0 0 422px;
  width: 422px;
  padding: 40px 0 40px 40px;
}

.testimonial-card.is-active .testimonial-author-flex {
  flex: 0 0 170px;
  width: 170px;
  padding: 40px 40px 40px 1rem;
}

.testimonial-card.is-active .testimonial-quote-icon {
  top: 38px;
  left: 40px;
  opacity: 0.32;
}

.testimonial-card.is-active .testimonial-quote-svg {
  width: 22px;
  filter: brightness(0) invert(90%) sepia(15%) saturate(300%) hue-rotate(345deg) brightness(98%) !important;
}

.testimonial-card.is-active .testimonial-quote {
  color: #ffffff !important;
  font-size: var(--fs-card-title); /* 24px */
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-quote);
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.testimonial-card.is-active .author-avatar-wrap {
  width: 88px;
  height: 88px;
  border-radius: 24px;
}

.testimonial-card.is-active .author-avatar {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover !important;
}

.testimonial-card.is-active .author-name {
  color: #F5E9D8 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.testimonial-card.is-active .author-location {
  color: #D3BE73 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Green indicator line and green pill thumb */
.testimonials-indicator-track {
  background-color: rgba(7, 47, 40, 0.15) !important;
  margin-top: 2rem;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 18rem;
  height: 2px !important;
}

.testimonials-indicator-thumb {
  background-color: #072f28 !important;
  height: 4px !important;
  border-radius: 9999px !important;
  top: 50% !important;
}

/* ==========================================================================
   [HOME 8: BLOGS GRID]
   ========================================================================== */
.section-blogs {
  padding-block: 6rem;
}

.section-blogs .section-headline {
  font-size: 32px !important;
}

.blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 30rem));
  gap: 16px;
  justify-content: center;
}

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

.blog-card {
  background-color: #F1E2CF;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

.blog-card-img-wrap {
  width: 100%;
  height: 18rem;
  overflow: hidden;
  padding: 6px;
  background-color: #F1E2CF;
  box-sizing: border-box;
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-xl) - 6px);
}

.blog-card-body {
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card-title {
  font-size: var(--fs-card-title); /* 24px - Desktop/L2 */
  font-weight: 500;
  margin-bottom: 0.85rem;
  line-height: var(--lh-heading); /* 32px / 1.34 */
  letter-spacing: var(--ls-card); /* -0.04em */
  color: var(--color-text-dark);
}

.blog-card-excerpt {
  font-size: var(--fs-body); /* 16px */
  color: #525c56;
  line-height: var(--lh-body); /* 1.5 */
  letter-spacing: var(--ls-body); /* -0.046em */
  margin-bottom: 1.75rem;
  flex-grow: 1;
  font-weight: 300;
}

.blog-read-more {
  font-size: 1rem; /* 16px */
  letter-spacing: var(--ls-caption);
  color: #033f34;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.25rem; /* 4px bottom padding for underline */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
}

.blog-read-more .blog-read-more-arrow {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: middle;
}

.blog-view-more {
  font-size: 0.9375rem !important; /* 15px */
  padding: 0 1.75rem !important;
  height: 3rem !important;
  min-height: 3rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ==========================================================================
   9. FAQS ACCORDION (STAGE-CHOREOGRAPHED SMOOTH TRANSITION)
   ========================================================================== */
.section-faqs {
  padding-top: 10rem; /* 160px */
  padding-bottom: 160px !important; /* 160px bottom padding after the last question */
}

.section-faqs .section-headline {
  font-size: 32px !important;
}

.faqs-layout {
  display: grid;
  grid-template-columns: 37rem 56rem;
  gap: 1rem;
  justify-content: space-between;
  align-items: start;
}

@media (max-width: 1023px) {
  .faqs-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.faqs-intro-desc {
  font-size: var(--fs-body);
  color: var(--color-text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  margin-top: 1.5rem;
  max-width: 28rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Base FAQ card */
.faq-item {
  background-color: #f5ede5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active {
  background-color: #072f28;
}

/* ==========================================================================
   1. COLLAPSED VIEW (DEFAULT)
   ========================================================================== */
.faq-collapsed-row {
  width: 100%;
  padding: 1.75rem 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  opacity: 1;
  max-height: 120px;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease;
}

.faq-collapsed-q {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: var(--ls-card);
  color: var(--color-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  margin-right: 1.5rem;
}

/* When active: collapsed row smoothly vanishes */
.faq-item.active .faq-collapsed-row {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* ==========================================================================
   2. EXPANDED VIEW (BUTTERY SMOOTH GRID EXPANSION)
   ========================================================================== */
.faq-expanded-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active .faq-expanded-wrapper {
  grid-template-rows: 1fr;
}

.faq-expanded-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-expanded-row {
  display: flex;
  align-items: flex-start;
  padding: 2.25rem;
  gap: 2.5rem;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.faq-item.active .faq-expanded-row {
  opacity: 1;
  transform: translateY(0);
}

.faq-expanded-left {
  width: 325px;
  flex: 0 0 325px;
  box-sizing: border-box;
}

.faq-expanded-title {
  color: #D3BE73;
  font-size: 24px;
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-card);
  display: block;
}

.faq-expanded-right {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.faq-expanded-desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 300;
  color: #ffffff;
  margin: 0;
  flex: 1 1 auto;
}

/* ==========================================================================
   ICONS
   ========================================================================== */
.faq-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-icon-circle {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-text-dark);
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.faq-expanded-right .faq-icon-circle {
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

@media (max-width: 767px) {
  .faq-expanded-row {
    flex-direction: column;
    padding: 1.75rem;
    gap: 1.25rem;
  }
  .faq-expanded-left {
    width: 100%;
    flex: none;
  }
  .faq-expanded-right {
    width: 100%;
  }
}

/* ==========================================================================
   10. STAY CONNECTED TO BETTER HEALTH (NEWSLETTER BANNER)
   ========================================================================== */
.section-newsletter {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

.newsletter-card {
  background-color: #eddcca;
  border-radius: var(--radius-2xl);
  max-width: var(--container-narrow); /* 960px */
  width: 100%;
  min-height: 11rem; /* 176px */
  padding: 3.5rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.5rem;
}

@media (max-width: 1023px) {
  .newsletter-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem 1.75rem;
    gap: 2rem;
  }
}

.newsletter-headline {
  font-size: var(--fs-h3); /* 32px - Desktop/H3 */
  font-weight: 400;
  color: var(--color-brand-green);
  line-height: var(--lh-h3); /* 1.0 */
  letter-spacing: var(--ls-h3); /* -0.04em */
}

@media (max-width: 1023px) {
  .newsletter-headline {
    font-size: 2rem;
  }
}

.newsletter-form {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 38rem;
  flex-grow: 1;
}

@media (max-width: 767px) {
  .newsletter-form {
    flex-direction: column;
    width: 100%;
  }
}

.newsletter-input {
  flex-grow: 1;
  padding: 1.1rem 2rem;
  border-radius: 9999px;
  border: none;
  background-color: #f7efe7;
  outline: none;
  font-size: var(--fs-caption); /* 14px */
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--color-text-dark);
}

.btn-submit {
  padding: 1.1rem 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-brand-green);
  color: #ffffff;
  font-weight: 500;
  font-size: var(--fs-caption); /* 14px */
  letter-spacing: -0.01em;
  border: none;
  cursor: default;
}

/* ==========================================================================
   GLOBAL FOOTER
   ========================================================================== */
.site-footer {
  background-color: #04221b;
  color: #ffffff;
  max-width: 1888px;
  margin: 0 auto;
  border-radius: 40px;
  padding: 56px;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .site-footer {
    width: 100%;
    border-radius: 24px;
    padding: 2rem 1.5rem;
  }
}

.footer-grid-top {
  display: grid;
  grid-template-columns: 1.8fr repeat(5, 1fr) 0.5fr;
  gap: 2rem;
  align-items: start;
  padding-bottom: 5rem;
}

@media (max-width: 1023px) {
  .footer-grid-top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .footer-logo-wrap {
    grid-column: 1 / -1;
  }
}

.footer-logo-img {
  width: 83px !important;
  max-width: 83px !important;
  height: auto !important;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-links a {
  color: #ABA39A;
  font-size: 14px !important;
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 300;
  transition: color 0.2s ease;
}

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

.footer-back-to-top-wrap {
  display: flex;
  justify-content: flex-end;
}

.footer-back-top-btn {
  width: 56px;
  height: 56px;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.footer-back-top-img {
  width: 56px;
  height: 56px;
  display: block;
}

/* hover effect removed */

.footer-grid-middle {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-caption); /* 14px */
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 300;
}

@media (max-width: 1023px) {
  .footer-grid-middle {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
}

.footer-address {
  max-width: 25rem;
  font-size: var(--fs-caption);
  line-height: 1.5;
  letter-spacing: -0.03em;
  font-weight: 300;
}

.footer-contact-details a {
  color: #ABA39A;
  font-size: 14px !important;
  letter-spacing: -0.03em;
  font-weight: 300;
}

.footer-social-links {
  display: flex;
  gap: 1.75rem;
}

.footer-social-links a {
  color: #ABA39A;
  font-size: 14px !important;
  letter-spacing: -0.03em;
  font-weight: 300;
}

.footer-social-links a:hover {
  color: #ffffff;
}

.footer-bottom-legal {
  background-color: var(--color-bg-sand);
  padding-block: 16px;
  padding-inline: 56px;
  box-sizing: border-box;
}

.footer-bottom-legal .container {
  max-width: 100%;
  padding-inline: 0;
}

.footer-legal-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-caption); /* 14px */
  letter-spacing: -0.015em;
  font-weight: 300;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .footer-legal-flex {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

.legal-links {
  display: flex;
  gap: 2rem;
}

.legal-links a {
  font-size: 14px !important;
  color: #ABA39A;
}

/* Floating Back to Top Trigger */
.back-to-top { display: none !important; }

/* Modal Lightbox */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content-box {
  background: #ffffff;
  border-radius: var(--radius-xl);
  max-width: 68rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(0,0,0,0.06);
  border: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all var(--transition-fast);
}

.therapy-modal-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
}

@media (max-width: 900px) {
  .therapy-modal-grid {
    grid-template-columns: 1fr;
  }
}

.therapy-modal-img {
  width: 100%;
  height: 100%;
  min-height: 25rem;
  object-fit: cover;
}

.therapy-modal-details {
  padding: 4rem;
}

@media (max-width: 900px) {
  .therapy-modal-details {
    padding: 2rem;
  }
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-block: 2rem;
}

.benefit-card {
  background-color: var(--color-bg-sand);
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text-dark);
}


/* Desktop / Mobile Visibility Utilities */
@media (min-width: 1024px) {
  .mobile-only {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .desktop-only {
    display: none !important;
  }
}

/* Mobile Component Menu (Figma Node 591:4561: 360x384 card expanding from top-right) */
.mobile-drawer {
  position: fixed;
  top: 8px;
  right: 8px;
  left: 8px;
  width: calc(100% - 16px);
  max-width: 360px;
  margin: 0 auto;
  height: auto;
  max-height: 90vh;
  background-color: #033F34; /* Exact Figma solid brand green: #033f34 */
  color: #f1e2cf; /* Exact Figma menu text color: #f1e2cf */
  z-index: 10000;
  border-radius: 0 0 0 16px; /* Exact Figma container corners: [0, 0, 0, 16] */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  transform-origin: top right;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              visibility 0.36s;
  overflow: hidden;
}

.mobile-drawer.open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.mobile-menu-container {
  width: 100%;
  padding: 16px 24px 36px 32px; /* Pad inside container */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.mobile-menu-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 48px;
  margin-bottom: 24px;
}

.mobile-drawer-close {
  background: transparent;
  border: none;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
}

.mobile-drawer-close .close-bar {
  display: block;
  width: 18px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 1px;
}

.mobile-drawer-close .close-bar:nth-child(1) {
  transform: rotate(45deg) translate(2px, 2px);
}

.mobile-drawer-close .close-bar:nth-child(2) {
  transform: rotate(-45deg) translate(2px, -2px);
}

.mobile-drawer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px; /* Figma item gap in 256px menu_list */
  margin: 0;
  padding: 0;
}

.mobile-drawer-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 32px; /* Exact Figma 32px text */
  font-weight: 300; /* Inter Light (300 weight) */
  line-height: 1;
  letter-spacing: -0.04em;
  color: #F1E2CF !important; /* Exact Figma text fill: #f1e2cf */
  display: block;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.mobile-drawer-link:hover,
.mobile-drawer-link:active {
  color: #ffffff !important;
  transform: translateX(4px);
}

.mobile-drawer-backdrop {
  display: none !important;
}

.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  flex-direction: column;
  justify-content: space-between;
  width: 2.25rem;
  height: 1.5rem;
  cursor: default;
  padding: 0;
}

.mobile-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-brand-green);
  border-radius: 2px;
  transition: all 0.25s ease;
}

@media (max-width: 1023px) {
  .mobile-nav-toggle {
    display: flex;
  }
}

/* ==========================================================================
   SPA ROUTER & INSTANT NAVIGATION ENGINE
   Ultra-High Performance 0ms Perceived Latency Transitions
   ========================================================================== */
#spa-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #d69476 0%, #a2533c 50%, #0c3830 100%);
  box-shadow: 0 1px 6px rgba(214, 148, 118, 0.7);
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
}

#spa-progress-bar.loading {
  opacity: 1;
}

#spa-progress-bar.finished {
  width: 100% !important;
  opacity: 0;
  transition: width 0.12s ease, opacity 0.25s ease 0.1s;
}

/* Smooth micro-fade for page content swapping */
#primary.site-main {
  transition: opacity 0.1s ease, transform 0.1s ease;
  will-change: opacity, transform;
}

#primary.site-main.spa-fade-out {
  opacity: 0;
  transform: translateY(3px);
}

#primary.site-main.spa-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   LENIS SMOOTH SCROLL ARCHITECTURE
   Hardware-accelerated, inertia-based cinematic momentum scrolling
   ========================================================================== */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ==========================================================================
   [GLOBAL: FULL-WIDTH STICKY HEADER]
   ========================================================================== */
.fullwidth-sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
  padding: 0 0.5rem; /* 8px side margin to match hero banner */
}

.fullwidth-sticky-header.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sticky-header-inner {
  width: 100%;
  max-width: var(--container-banner); /* 1904px */
  height: 4rem; /* 64px exact */
  margin-inline: auto;
  padding-inline: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fffbf7;
  border-bottom-left-radius: 2rem; /* 32px */
  border-bottom-right-radius: 2rem; /* 32px */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.sticky-header-inner .brand-logo-img {
  height: 1.9375rem; /* 31px */
  width: auto;
  display: block;
}

.sticky-header-inner .btn-enquire-pill {
  height: auto;
  min-width: auto;
  padding: 0.5rem 0.875rem; /* 8px top/bottom, 14px left/right */
  border-radius: 0.5rem; /* 8px border radius */
  border: 1px solid #d69476;
  font-size: 0.875rem; /* 14px */
  font-weight: 400; /* Regular */
}

.sticky-right-group {
  display: flex;
  align-items: center;
  gap: 2rem; /* 32px gap between nav items and Enquire Now button */
  margin-left: auto;
}

.sticky-header-inner .nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sticky-header-inner .nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-caption); /* 14px */
  font-weight: 400; /* Regular */
  color: #1a1a1a;
  text-decoration: none;
  letter-spacing: var(--ls-caption);
  transition: color var(--transition-fast);
}

.sticky-header-inner .nav-link:hover,
.sticky-header-inner .nav-link.active {
  color: var(--color-brand-green);
}

.sticky-header-inner .header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

@media (max-width: 1023px) {
  .fullwidth-sticky-header {
    height: 4rem;
  }
  .sticky-header-inner {
    padding-inline: 1.25rem;
  }
  .sticky-header-inner .nav-menu {
    display: none;
  }
}


/* ==========================================================================
   ABOUT PAGE CUSTOM SECTIONS (FOOTPRINT, LEGACY & TIMELINE)
   ========================================================================== */

/* Manifesto section */
.about-manifesto-section {
  padding-top: 5rem;
  padding-bottom: 0;
  height: auto;
}

.about-manifesto-section .split-grid {
  margin-bottom: 0 !important;
}

/* Footprint 3-Column Grid without background */
.about-footprint-section {
  padding-top: 200px !important;
  padding-bottom: 5rem;
  background-color: transparent;
}

.footprint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.05fr;
  gap: 2rem;
  align-items: stretch;
}

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

.footprint-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 1.5rem;
}

.footprint-intro {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 300;
  color: var(--color-text-body);
  margin-top: 1.5rem;
}

.footprint-card {
  border-radius: 24px;
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.vision-card {
  background-color: #ffffff;
  color: var(--color-text-dark);
}

.vision-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: var(--ls-card);
  margin-bottom: 1.5rem;
  color: #072f28;
}

.vision-list {
  list-style: disc;
  padding-left: 1.5rem;
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: var(--ls-body);
  font-weight: 300;
  color: #4b5563;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mission-card {
  background-color: #072f28; /* Trinaya Green */
  color: #ffffff;
}

.mission-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: var(--ls-card);
  margin-bottom: 1.5rem;
  color: #ffffff;
}

.mission-list {
  list-style: disc;
  padding-left: 1.5rem;
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: var(--ls-body);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Video section */

/* About Page Video: 888px height */
.about-video-preview {
  height: 888px !important;
  max-height: 888px !important;
  border-radius: var(--radius-2xl);
}

@media (max-width: 1023px) {
  .about-video-preview {
    height: 36rem !important;
  }
}

.about-video-section {
  padding-block: 5rem;
}

/* 5. The Legacy of Kottakkal Section */
.about-legacy-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.legacy-content-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 1023px) {
  .legacy-content-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.legacy-super-title {
  font-size: 24px;
  font-weight: 400;
  color: #072f28;
  display: block;
  line-height: 1.2;
}

.legacy-main-title {
  font-size: 40px;
  font-weight: 400;
  color: #072f28;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin-top: 0.25rem;
  margin-bottom: 2rem;
}

.legacy-lead-text {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #a85438; /* Exact Terracotta accent from image */
  max-width: 44rem;
  margin: 0;
}

.legacy-right-col {
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
}

@media (max-width: 767px) {
  .legacy-right-col {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.legacy-desc-p {
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: -0.02em;
  color: #4b5563;
  font-weight: 300;
  flex: 1 1 50%;
  margin: 0;
}

/* 6. Years of Unwavering Excellence Section (Card matching uploaded image) */
.about-years-section {
  padding-bottom: 6rem;
}

.timeline-featured-card {
  background-color: #02332A; /* Exact Figma Frame 3673 fill */
  border-radius: 48px; /* Exact Figma radius */
  padding: 80px 0 0 80px; /* Exact Figma: pad:[80, 0, 0, 80] - no right or bottom padding */
  display: grid;
  grid-template-columns: 1.3fr auto 1.75fr;
  gap: 32px;
  align-items: stretch;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .timeline-featured-card {
    grid-template-columns: 1fr;
    padding: 3rem 2rem;
    gap: 2.5rem;
    border-radius: 24px;
  }
}

.timeline-heading {
  font-size: 48px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 1.25rem;
}

.timeline-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: -0.02em;
  font-weight: 300;
  margin: 0;
}

/* Year pills stack */
.timeline-pills-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  height: 380px;
  max-height: 380px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 16px 8px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  /* Top and bottom subtle fade mask so pills smoothly fade in and out of view */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.timeline-pills-col.is-dragging {
  cursor: grabbing;
}

.timeline-pills-col::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.year-pill {
  width: 104px;
  min-height: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: transparent;
  color: #ffffff;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              background-color 0.4s ease, 
              color 0.4s ease, 
              border-color 0.4s ease, 
              transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-sizing: border-box;
}

.year-pill:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.year-pill.active {
  background-color: #ffffff !important;
  color: #04221b !important;
  font-weight: 500;
  border-color: #ffffff !important;
  opacity: 1 !important;
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Milestone detail card */
.timeline-detail-col {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.timeline-detail-box {
  background-color: #022620; /* Exact Figma Frame 3689 fill */
  border-radius: 32px 0 0 0; /* Exact Figma top-left only radius */
  padding: 48px !important; /* Exact Figma 48px padding */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 400px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.timeline-text-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  will-change: transform, opacity;
}

.timeline-detail-title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.timeline-detail-desc {
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ==========================================================================
   PAGE: THERAPIES HUB (EXACT FIGMA NODE 503:1348 SPECIFICATIONS)
   ========================================================================== */
.page-therapies-section {
  padding-top: 5rem;
  padding-bottom: 8rem;
}

.therapies-hub-container {
  max-width: 1536px !important;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

.explore-therapies-heading {
  font-size: 32px;
  font-weight: 400; /* Regular weight */
  line-height: 1.15;
  color: var(--color-text-dark);
  letter-spacing: -0.03em;
  margin: 0 0 2.5rem 0;
}

.page-therapies-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px 16px !important; /* 32px row-gap, 16px column-gap */
  margin-bottom: 0 !important;
  width: 100%;
}

@media (max-width: 1200px) {
  .page-therapies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .page-therapies-grid {
    grid-template-columns: 1fr !important;
  }
}

.figma-therapy-card {
  background-color: #FFFBF7 !important; /* Exact Figma fill: #fffbf7 */
  border-radius: 40px !important; /* Exact Figma radius: 40px */
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.figma-therapy-img-wrap {
  width: 100%;
  height: 320px !important; /* Exact Figma height: 320px */
  border-radius: 40px !important; /* Exact Figma cover radius: 40px all around */
  border: 6px solid #FFFBF7 !important; /* Exact Figma cover inside stroke: 6px #fffbf7 */
  box-sizing: border-box !important;
  overflow: hidden !important;
  background-color: transparent !important;
  position: relative;
}

.figma-therapy-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 34px !important; /* 40px outer radius minus 6px stroke */
  display: block;
}

.figma-therapy-body {
  padding: 24px 32px 40px 40px !important; /* Exact Figma pad:[24, 32, 40, 40] */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  min-height: 252px;
}

.therapy-text-group {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Exact Figma vertical gap: 8px */
}

.figma-therapy-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important; /* Regular weight */
  line-height: 36px !important;
  color: #1F1B17 !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
}

.figma-therapy-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important; /* Light weight */
  line-height: 24px !important;
  color: #302D28 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 40px 0 !important; /* Exact Figma gap: 40px */
}

.figma-therapy-ctas {
  display: flex;
  align-items: center;
  gap: 8px !important; /* Exact Figma button gap: 8px */
  margin-top: auto;
}

.figma-btn-primary {
  height: 48px !important; /* Exact Figma 48px height */
  background-color: #033F34 !important; /* Exact Figma Deep emerald */
  color: #FFFBF7 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: -0.035em !important;
  border-radius: 12px !important; /* Exact Figma radius: 12px */
  padding: 14px 24px !important; /* Exact Figma pad:[14, 24, 14, 24] */
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.figma-btn-secondary {
  height: 48px !important; /* Exact Figma 48px height */
  background: transparent !important;
  color: #1F1B17 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: -0.035em !important;
  border-radius: 12px !important;
  padding: 14px 24px !important; /* Exact Figma pad:[14, 24, 14, 24] */
  border: 1px solid #D69476 !important; /* Exact Figma stroke: #d69476 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ==========================================================================
   PAGE: CLINICS HUB (1:1 FIGMA NODE 508:2589 SPECIFICATIONS)
   ========================================================================== */
.page-clinics-main {
  background-color: var(--color-bg-ivory);
}

/* Section 2: Clinics Listing (Frame 3, pad: 160px top/bottom, 208px left/right) */
.clinics-listing-section {
  padding: 160px 0;
}

.clinics-listing-section .container-core,
.clinics-listing-section .container {
  width: 1504px !important;
  max-width: 1504px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

.clinics-listing-header {
  margin-bottom: 48px;
}

.clinics-listing-title {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #1F1B17;
  margin: 0;
}

.clinics-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 16px; /* Row gap 32px, col gap 16px */
  width: 100%;
}

@media (max-width: 1400px) {
  .clinics-hub-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023px) {
  .clinics-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .clinics-hub-grid {
    grid-template-columns: 1fr;
  }
}

/* Clinic Card (Frame 47: 364x328, radius: 40px, fill: #FFFBF7, pad: 40px) */
.clinic-hub-card {
  background-color: #FFFBF7; /* Exact Figma fill: #fffbf7 */
  border-radius: 40px; /* Exact Figma radius: 40px */
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 328px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.clinic-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(2, 38, 32, 0.06);
}

.clinic-hub-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Exact Figma Frame 54 gap: 16px */
}

.clinic-hub-title {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.03em;
  color: #1F1B17;
  margin: 0;
}

.clinic-hub-address {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.035em;
  color: #302D28;
  margin: 0;
}

.clinic-hub-map-link {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #033F34;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px; /* Exact Figma Frame 50 gap: 4px */
  margin-top: 8px;
  transition: opacity 0.2s ease;
}

.clinic-hub-map-link:hover {
  opacity: 0.75;
}

/* Clinic Card Buttons (Frame 54 & buttons: 48px height, 12px radius) */
.clinic-hub-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px; /* Exact Figma gap: 40px between content and buttons */
}

.btn-clinic-primary {
  height: 48px;
  background-color: #033F34; /* Exact Figma fill: #033f34 */
  color: #FFFBF7;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.035em;
  border-radius: 12px;
  padding: 14px 24px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
  transition: background-color 0.2s ease;
}

.btn-clinic-primary:hover {
  background-color: #022620;
}

.btn-clinic-secondary {
  height: 48px;
  background: transparent;
  color: #1F1B17;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.035em;
  border-radius: 12px;
  padding: 14px 24px;
  border: 1px solid #D69476; /* Exact Figma stroke: #d69476 */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-clinic-secondary:hover {
  background-color: rgba(214, 148, 118, 0.08);
}

/* Section 3: Own a Franchise Banner (Frame 469367, 1920x936, fill: #02332A, radius: 48px) */
.clinics-franchise-section {
  padding: 56px 0;
}

.clinics-franchise-card {
  background-color: #02332A; /* Exact Figma fill: #02332a */
  border-radius: 48px; /* Exact Figma radius: 48px */
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .clinics-franchise-card {
    grid-template-columns: 1fr;
    padding: 40px 24px;
    gap: 32px;
    border-radius: 32px;
  }
}

.clinics-franchise-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clinics-franchise-images-wrap {
  width: 100%;
  max-width: 680px;
  height: 424px;
  border-radius: 24px;
  overflow: hidden;
}

.franchise-img-front {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clinics-franchise-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.eyebrow-cream {
  color: #D3BE73 !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.clinics-franchise-title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: #FFFBF7;
  margin: 0;
}

.clinics-franchise-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.035em;
  color: #FFFBF7;
  opacity: 0.9;
  margin: 0;
  max-width: 480px;
}

.clinics-franchise-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.btn-franchise-primary {
  height: 48px;
  background-color: #FFFBF7;
  color: #02332A;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.035em;
  border-radius: 12px;
  padding: 14px 24px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.btn-franchise-primary:hover {
  background-color: #F1E2CF;
}

.btn-franchise-secondary {
  height: 48px;
  background: transparent;
  color: #FFFBF7;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.035em;
  border-radius: 12px;
  padding: 14px 24px;
  border: 1px solid #FFFBF7;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.btn-franchise-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   CLINIC DETAIL PAGE (Node 517:4819 - 1:1 Figma Match)
   ========================================================================== */

/* Universal Core Container: Exactly 1504px centered */
.container-core {
  width: 1504px !important;
  max-width: 1504px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 1540px) {
  .container-core {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 24px !important;
  }
}

/* Section 2: Intro & Facade (Frame 3, 1920x1584, pad: 160px top/bottom) */
.clinic-detail-intro-section {
  padding: 160px 0;
}

.clinic-detail-intro-split {
  width: 1504px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 712px 712px; /* Exact Figma Frame 3635 columns: 712px each */
  gap: 80px; /* Exact Figma Frame 3635 gap: 80px */
  align-items: start;
  margin-bottom: 160px;
}

@media (max-width: 1023px) {
  .clinic-detail-intro-split {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 80px;
  }
}

.clinic-detail-intro-heading {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 48px;
  letter-spacing: -0.06em;
  color: #A05034; /* Exact Figma Frame 3 text color: rgb(160,80,52) */
  margin: 0;
}

.clinic-detail-intro-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.clinic-detail-intro-text {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 24.12px;
  letter-spacing: -0.046em;
  color: #302D28;
  margin: 0;
}

.btn-clinic-detail-cta {
  height: 48px;
  background-color: #033F34;
  color: #FFFBF7;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.035em;
  border-radius: 9999px;
  padding: 14px 24px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.btn-clinic-detail-cta:hover {
  background-color: #022620;
}

.clinic-detail-media-wrap {
  width: 100%;
  height: 888px;
  border-radius: 48px;
  overflow: hidden;
  position: relative;
  background-color: #1F1B17;
}

@media (max-width: 1023px) {
  .clinic-detail-media-wrap {
    height: 480px;
    border-radius: 32px;
  }
}

@media (max-width: 640px) {
  .clinic-detail-media-wrap {
    height: 320px;
    border-radius: 24px;
  }
}

.clinic-detail-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clinic-detail-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 24px; /* Exact Figma Frame 3654 cornerRadius: 24px */
  background-color: #FFFBF7; /* Exact Figma fill: #fffbf7 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.clinic-detail-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background-color: #F1E2CF;
}

/* Section 3: Available Therapies Grid */
.clinic-detail-therapies-section {
  padding: 160px 0;
}

.clinic-detail-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: #1F1B17;
  margin: 0 0 32px 0;
}

.clinic-detail-therapies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 16px;
}

@media (max-width: 1023px) {
  .clinic-detail-therapies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .clinic-detail-therapies-grid {
    grid-template-columns: 1fr;
  }
}

/* Section 4: Image Gallery Grid */
.clinic-detail-gallery-section {
  padding: 160px 0;
}

.clinic-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1023px) {
  .clinic-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .clinic-gallery-grid {
    grid-template-columns: 1fr;
  }
}

.clinic-gallery-item {
  width: 100%;
  height: 320px;
  border-radius: 40px;
  overflow: hidden;
  box-sizing: border-box;
}

.clinic-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* ==========================================================================
   FRANCHISE PAGE (Node 520:7255 - 1:1 Figma Match)
   ========================================================================== */

/* Section 2: Franchise Philosophy Split (Frame 3) */
.franchise-philosophy-section {
  padding: 160px 0;
}

.franchise-philosophy-split {
  width: 1504px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 712px 712px; /* Exact Figma Frame 3635 */
  gap: 80px;
  align-items: start;
}

@media (max-width: 1023px) {
  .franchise-philosophy-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.franchise-philosophy-heading {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 48px;
  letter-spacing: -0.06em;
  color: #A05034; /* Exact Figma Frame 3 text: rgb(160,80,52) */
  margin: 0;
}

.franchise-philosophy-body {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 24.12px;
  letter-spacing: -0.046em;
  color: #302D28;
  margin: 0;
}

/* Section 3: Who Can Partner with Trinaya? (Frame 469364) */
.franchise-partner-section {
  padding: 60px 0;
}

.franchise-partner-outer-card {
  background-color: #02332A; /* Exact Figma fill: #02332a */
  border-radius: 48px;
  padding: 80px;
  display: grid;
  grid-template-columns: 364px 1fr;
  gap: 48px;
  align-items: start;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .franchise-partner-outer-card {
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }
}

.franchise-partner-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.franchise-partner-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: #A1CFBE;
  margin: 0;
}

.franchise-partner-title {
  font-family: 'Inter', sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: -0.06em;
  color: #F1E2CF;
  margin: 0;
}

.franchise-partner-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.046em;
  color: #FFFBF7;
  opacity: 0.9;
  margin-top: 8px;
}

.franchise-partner-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .franchise-partner-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .franchise-partner-cards-grid {
    grid-template-columns: 1fr;
  }
}

.franchise-partner-card {
  background-color: #033F34;
  border-radius: 24px;
  padding: 32px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row; /* Horizontal layout: number on left, text on right */
  align-items: center;
  gap: 16px;
  min-height: 160px;
}

.franchise-partner-num {
  font-family: 'Inter', sans-serif;
  font-size: 80px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #D3BE73;
  margin-bottom: 0;
  flex-shrink: 0;
  min-width: 48px;
}

.franchise-partner-text {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.046em;
  color: #FFFBF7;
  margin: 0;
}

/* Section 4: Franchise Enquiry Form Card (Frame 3659) */
.franchise-form-section {
  padding: 160px 0;
}

.franchise-form-card {
  background-color: #FFFBF7; /* Exact Figma fill: #fffbf7 */
  border-radius: 48px;
  padding: 80px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 1023px) {
  .franchise-form-card {
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }
}

.franchise-form-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.franchise-form-title {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.04em;
  color: #022620;
  margin: 0;
}

.franchise-form-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.046em;
  color: #1F1B17;
  margin: 0;
}

.franchise-form-subnote {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.046em;
  color: #ABA39A;
  margin-top: 16px;
}

.franchise-form-fields-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.franchise-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .franchise-form-row-2 {
    grid-template-columns: 1fr;
  }
}

.franchise-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.franchise-field-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #1F1B17;
  display: flex;
  align-items: center;
  gap: 4px;
}

.franchise-field-req {
  color: #E5573A;
  font-size: 12px;
}

.franchise-input {
  width: 100%;
  height: 48px;
  border-radius: 8px; /* Exact Figma radius: 8px */
  border: 1px solid #D6CFCE;
  background-color: #FFFBF7;
  padding: 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #1F1B17;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

.franchise-input:focus {
  border-color: #033F34;
}

.franchise-input-phone-wrap {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #D6CFCE;
  overflow: hidden;
  height: 48px;
  background-color: #FFFBF7;
  transition: border-color 0.2s ease;
}

.franchise-input-phone-wrap:focus-within {
  border-color: #033F34;
}

.franchise-phone-prefix {
  background-color: #EBE2D8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  height: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #1F1B17;
  border-right: 1px solid #D6CFCE;
  flex-shrink: 0;
  box-sizing: border-box;
}

.franchise-phone-input {
  flex: 1;
  width: 100%;
  border: none;
  background-color: transparent;
  padding: 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #1F1B17;
  outline: none;
  box-sizing: border-box;
}

.franchise-textarea {
  width: 100%;
  height: 80px; /* Exact Figma height: 80px */
  border-radius: 8px;
  border: 1px solid #D6CFCE;
  background-color: #FFFBF7;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #1F1B17;
  box-sizing: border-box;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}

.franchise-textarea:focus {
  border-color: #033F34;
}

.franchise-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Left-aligned per user request */
  gap: 16px;
  margin-top: 8px;
}

.btn-franchise-clear {
  height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  border: 1px solid #D69476; /* Exact Figma stroke: #d69476 */
  background: transparent;
  color: #1F1B17;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-franchise-clear:hover {
  background-color: rgba(214, 148, 118, 0.1);
}

.btn-franchise-submit {
  height: 48px;
  padding: 0 28px;
  border-radius: 12px;
  background-color: #033F34; /* Exact Figma fill: #033f34 */
  border: none;
  color: #FFFBF7;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-franchise-submit:hover {
  background-color: #022620;
}

/* ==========================================================================
   CONTACT PAGE (Node 533:2224 - 1:1 Figma Match)
   ========================================================================== */

/* Section 2: Contact Form Card (Frame 469364) */
.contact-form-section {
  padding: 120px 0;
}

.contact-form-card {
  background-color: #FFFBF7; /* Exact Figma fill: #fffbf7 */
  border-radius: 48px;
  padding: 80px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 1023px) {
  .contact-form-card {
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }
}

.contact-form-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form-title {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.04em;
  color: #022620;
  margin: 0;
}

.contact-form-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.046em;
  color: #1F1B17;
  margin: 0;
}

.contact-form-fields-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 896px;
}

.contact-form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 288px);
  gap: 16px;
}

@media (max-width: 1400px) {
  .contact-form-row-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .contact-form-row-3 {
    grid-template-columns: 1fr;
  }
}

.contact-form-row-2 {
  display: grid;
  grid-template-columns: 288px 288px;
  gap: 16px;
}

@media (max-width: 900px) {
  .contact-form-row-2 {
    grid-template-columns: 1fr;
  }
}

.contact-form-row-full {
  max-width: 592px;
}

.contact-select-wrap {
  position: relative;
  width: 100%;
}

.contact-select {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #D6CFCE;
  background-color: #FFFBF7;
  padding: 0 40px 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #1F1B17;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('../images/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  transition: border-color 0.2s ease;
}

.contact-select:focus {
  border-color: #033F34;
}

.franchise-phone-prefix .chevron-svg,
.contact-phone-prefix .chevron-svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Section 4: Step Into Wellness (Frame 3690) */
.contact-info-section {
  padding: 160px 0;
}

.contact-info-header {
  margin-bottom: 40px;
}

.contact-info-title {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.04em;
  color: #022620;
  margin: 0 0 8px 0;
}

.contact-info-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: #B36E51; /* Exact Figma Frame 469347: #b36e51 */
  margin: 0;
}

.contact-cards-grid {
  display: grid;
  grid-template-columns: 288px 288px 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .contact-cards-grid {
    grid-template-columns: 1fr;
  }
}

.contact-info-card {
  background-color: #FFFBF7; /* Exact Figma fill: #fffbf7 */
  border-radius: 32px; /* Exact Figma Frame 3701 radius: 32px */
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  min-height: 168px;
}

.contact-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: #033F34;
  margin: 0;
}

.contact-card-value {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.04em;
  color: #1F1B17;
  margin: 0;
}

.contact-card-value a {
  color: #1F1B17;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-card-value a:hover {
  color: #033F34;
}

.hero-section, .hero-section *, .hero-title, .hero-content, .hero-content *, .hero-banner-card *, .eyebrow, h1.hero-title {
  text-shadow: none !important;
  filter: none !important;
}

/* ==========================================================================
   FIGMA 1:1 HOME PAGE MOBILE SYSTEM (Figma Node 591:4461, 360px Canvas)
   ========================================================================== */
@media (max-width: 768px) {
  /* Prevent horizontal scroll and viewport spillover */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
  }

  /* 0. Mobile Containers & Layout Insets */
  body.home .container,
  body.home .container-wide,
  body.home .container-core {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Hide fullwidth sticky header completely on mobile: menu toggle stays sticky alone */
  .fullwidth-sticky-header {
    display: none !important;
  }

  body.home section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 1. Header Notch on Mobile (Figma Group 26: 148.5 x 41.5px, seamlessly cuts hero image) */
  body.home .site-header {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 50 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  body.home .header-container {
    padding: 0 0 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  body.home .header-floating-bar {
    pointer-events: auto !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 132.5px !important;
    height: 41.5px !important;
    background-color: #f5e9d8 !important;
    border-top-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding: 0 0 0 12.5px !important;
    margin: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Right Inverted Fillet (Concave corner joining horizontal notch bottom to hero image top) */
  body.home .header-floating-bar::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M0 0 L16 0 C7.16344 0 0 7.16344 0 16 Z' fill='%23f5e9d8'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
  }

  /* Bottom Inverted Fillet (Concave corner joining vertical notch edge to hero image left) */
  body.home .header-floating-bar::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M0 0 L0 16 C0 7.16344 7.16344 0 16 0 Z' fill='%23f5e9d8'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
  }

  body.home .brand-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: 100% !important;
  }

  body.home .brand-logo-img {
    height: 16.5px !important;
    width: 106.7px !important;
    max-width: 106.7px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .header-right-group {
    display: none !important;
  }

  body.home .desktop-only {
    display: none !important;
  }

  /* Mobile Hamburger Toggle & Scaling Menu Component (Ultra-Smooth Hardware-Accelerated) */
  body.home .mobile-nav-toggle {
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 440px !important;
    margin: 0 !important;
    background-color: #033F34 !important;
    border-radius: 0 0 20px 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    clip-path: inset(0 0 calc(100% - 52px) calc(100% - 52px) round 0 0 0 16px) !important;
    -webkit-clip-path: inset(0 0 calc(100% - 52px) calc(100% - 52px) round 0 0 0 16px) !important;
    will-change: clip-path, -webkit-clip-path !important;
    /* Closing: text fades out first, clip-path scales back up smoothly */
    transition: clip-path 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
                -webkit-clip-path 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
                background-color 0.3s ease !important;
    z-index: 10000 !important;
  }

  /* Expanded state: Unclips to full width & height smoothly */
  body.home .mobile-nav-toggle.open {
    clip-path: inset(0 0 0 0 round 0 0 20px 20px) !important;
    -webkit-clip-path: inset(0 0 0 0 round 0 0 20px 20px) !important;
    padding: 0 !important;
    /* Opening: expands immediately with fluid Apple-like ease-out */
    transition: clip-path 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0s,
                -webkit-clip-path 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0s,
                background-color 0.3s ease !important;
  }

  body.home .mobile-toggle-btn-bar {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 10002 !important;
    cursor: pointer !important;
  }

  body.home .mobile-toggle-btn-bar .hamburger-line {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background-color: #ffffff !important;
    border-radius: 1px !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.25s ease !important;
    transform-origin: center !important;
  }

  /* Morphing hamburger lines into 'X' when open */
  body.home .mobile-nav-toggle.open .mobile-toggle-btn-bar .line-1 {
    transform: translateY(3.5px) rotate(45deg) !important;
  }

  body.home .mobile-nav-toggle.open .mobile-toggle-btn-bar .line-2 {
    transform: translateY(-3.5px) rotate(-45deg) !important;
  }

  body.home .mobile-menu-dropdown {
    width: 100% !important;
    height: 100% !important;
    padding: 80px 28px 36px 28px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    will-change: opacity, transform !important;
    /* Closing: text fades out cleanly in 120ms with 0 delay */
    transition: opacity 0.12s ease 0s,
                transform 0.12s ease 0s,
                visibility 0.12s !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* Opening: text glides in gracefully as the card finishes expanding */
  body.home .mobile-nav-toggle.open .mobile-menu-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                visibility 0.3s !important;
  }

  body.home .mobile-menu-dropdown .mobile-drawer-nav {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .mobile-menu-dropdown .mobile-drawer-link {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 30px !important;
    font-weight: 300 !important; /* Inter Light */
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
    color: #F1E2CF !important; /* Exact Figma #f1e2cf */
    text-decoration: none !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
  }

  body.home .mobile-menu-dropdown .mobile-drawer-link:hover,
  body.home .mobile-menu-dropdown .mobile-drawer-link:active {
    color: #ffffff !important;
    transform: translateX(4px) !important;
  }

  /* 2. Section 1: Hero Banner (Figma Frame 469358, 360x760) */
  body.home .hero-section {
    padding: 8px 8px 64px 8px !important;
    background-color: transparent !important;
    position: relative !important;
  }

  body.home .hero-container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  body.home .hero-banner-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Top Card: Image Banner (344x358, Radius: 0 16px 16px 16px - cut by the header notch in top-left) */
  body.home .hero-slider-bg {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 358px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background-color: #033F34 !important;
    margin-bottom: 32px !important;
  }

  body.home .hero-slider-bg img,
  body.home .hero-bg-slide,
  body.home .hero-bg-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 16px !important;
  }

  /* Bottom Block: Text Content (328px width, below the image) */
  body.home .hero-content {
    position: relative !important;
    z-index: 10 !important;
    padding: 0 8px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #022620 !important;
  }

  body.home .hero-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.04 !important; /* 33.28px */
    letter-spacing: -0.045em !important;
    color: #022620 !important; /* Exact Figma solid #022620 */
    margin: 0 0 16px 0 !important;
    text-shadow: none !important;
  }

  body.home .hero-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important; /* 24px */
    letter-spacing: -0.046em !important;
    color: #302D28 !important; /* Exact Figma fill: #302d28 */
    margin: 0 0 24px 0 !important;
    max-width: none !important;
    text-shadow: none !important;
  }

  /* Full-width Stacked Action Buttons */
  body.home .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.home .hero-buttons a.btn-hero-white {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    background-color: #033F34 !important; /* Primary Brand Green button */
    color: #FFFBF7 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }

  body.home .hero-buttons a.btn-hero-glass {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    background-color: transparent !important;
    color: #A05034 !important; /* Tan/Terracotta accent outline */
    border: 1px solid #D69476 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Mobile Hero Carousel Dots (Figma Frame 469345: 52x4px, centered at bottom of hero card) */
  body.home .hero-dots {
    display: flex !important;
    position: absolute !important;
    top: 340px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 25 !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.home .hero-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    opacity: 0.4 !important;
    transition: all 0.3s ease !important;
  }

  body.home .hero-dot.active {
    opacity: 1 !important;
    transform: scale(1.3) !important;
  }

  /* 3. Section 2: Why Trinaya? & Video (Figma Frame 469357: Padding 80px 0, Gap 88px) */
  body.home .section-why {
    padding: 80px 0 0 0 !important;
  }

  body.home .section-why .eyebrow {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important; /* 24px */
    letter-spacing: -0.04em !important;
    color: #B36E51 !important; /* Exact Figma fill: #b36e51 */
    margin: 0 0 16px 0 !important;
    display: block !important;
  }

  body.home .why-lead-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important; /* 36px */
    letter-spacing: -0.06em !important;
    color: #1F1B17 !important; /* Exact Figma fill: #1f1b17 */
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .section-why .container-wide {
    margin-top: 88px !important; /* Exact Figma itemSpacing gap: 88px between text and video */
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Full container width: 100% of parent container (328px on 360px viewport), Height: 208px, Radius: 16px */
  body.home .video-preview-card {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 208px !important;
    border-radius: 16px !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  body.home .video-thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 16px !important;
    display: block !important;
  }

  /* Exact Figma Frame 3653 (828:7081): 32px x 32px, Radius: 12px, Background: #FFFBF7 */
  body.home .video-play-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 32px !important;
    height: 32px !important;
    background-color: #FFFBF7 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
  }

  /* Exact Figma Rectangle 11 (828:7082): 10px x 14px play arrow, fill: #092424 */
  body.home .video-play-btn svg {
    width: 10px !important;
    height: 14px !important;
    fill: #092424 !important;
    margin-left: 2px !important; /* Visual optical center for play triangle */
  }

  /* 4. Section 3: Healing That Puts You First & Heritage Card (Figma Frame 3638 & Frame 5: 344x747, Radius 16px) */
  body.home .section-split {
    padding: 80px 0 80px !important;
  }

  body.home .split-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 88px !important; /* Exact Figma gap: 88px between text block and heritage card */
    padding: 0 !important;
  }

  /* Exact Figma 591:4628: Inter Regular 32px, lh: 33.28px (1.04), ls: -1.44px (-0.045em), fill: #022620 */
  body.home .split-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
    color: #022620 !important;
    margin-bottom: 8px !important;
  }

  /* Exact Figma 591:4633: Inter Regular 14px, lh: 15.68px, ls: -0.56px, fill: #B36E51 */
  body.home .split-grid .eyebrow-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
    color: #B36E51 !important;
    display: block !important;
    margin-top: 8px !important;
  }

  /* Exact Figma 591:4629: Inter Light 18px, lh: 24.12px (1.34), ls: -0.97px (-0.054em), fill: #1F1B17 */
  body.home .split-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.34 !important;
    letter-spacing: -0.054em !important;
    color: #1F1B17 !important;
    margin: 0 !important;
  }

  /* Exact Figma 778:5567 "Let there be well-being in the whole world" Heritage Card */
  /* Dimensions: 344px x 747px, Radius: 16px, Padding: 24px all sides, Gap: 56px, Bg: #02332A (rgb(2,51,42)) */
  body.home .heritage-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 344px !important;
    margin-inline: auto !important;
    padding: 24px !important;
    border-radius: 16px !important;
    background-color: #02332A !important;
    gap: 56px !important; /* Exact Figma gap between text group and image: 56px */
    box-sizing: border-box !important;
    box-shadow: none !important;
  }

  body.home .heritage-content {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Exact Figma 778:5571: Inter Regular 32px, line-height: 33.28px (1.04), letter-spacing: -1.44px (-0.045em), color: #F1E2CF */
  body.home .heritage-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.04 !important; /* 33.28px */
    letter-spacing: -0.045em !important;
    color: #F1E2CF !important;
    margin: 0 0 8px 0 !important; /* Spacing between heading and subheading: 8px */
    padding: 0 !important;
  }

  /* Exact Figma 778:5572: Inter Regular 14px, line-height: 15.68px (1.12), letter-spacing: -0.56px (-0.04em), color: #A1CFC1 */
  body.home .heritage-subhead {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
    color: #A1CFC1 !important; /* Exact Figma color: rgb(161, 207, 193) */
    display: block !important;
    margin: 0 0 32px 0 !important; /* Spacing between subhead and paragraph: 32px */
  }

  /* Body: 14px font size, color: #A1CFBE */
  body.home .heritage-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.046em !important;
    color: #A1CFBE !important;
    margin: 0 0 40px 0 !important; /* Spacing between paragraph and button: 40px */
    padding: 0 !important;
  }

  /* Exact Figma 778:5574: Button 296px x 48px, Radius: 12px, Border: 1px solid rgba(255,251,247,0.24), Text: 14px #FFFBF7 */
  body.home .heritage-content .btn {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 251, 247, 0.24) !important;
    background: transparent !important;
    color: #FFFBF7 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: -0.035em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Exact Figma 778:5575: 296px x 232px, Radius: 6px */
  body.home .heritage-image-wrap {
    width: 100% !important;
    height: 232px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: #033F34 !important;
  }

  body.home .heritage-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
  }

  /* 5. Section 4: Ayurvedic Therapies & Wellness Programs (Figma Frame 52 / 778:5632) */
  body.home .section-therapies {
    background: transparent !important;
    background-color: transparent !important;
    padding: 80px 0 0 0 !important;
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
  }

  body.home .section-therapies .container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: visible !important;
  }

  body.home .therapies-header-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-bottom: 40px !important;
  }

  /* Exact Figma 778:5634: Inter Regular 32px, lh: 33.28px (1.04), ls: -1.44px (-0.045em), color: #022620 */
  body.home .therapies-header-wrap .section-headline {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.04 !important; /* 33.28px */
    letter-spacing: -0.045em !important;
    color: #022620 !important;
    margin: 0 !important;
  }

  /* Exact Figma 778:5635: Inter Regular 14px, lh: 15.68px (1.12), ls: -0.56px (-0.04em), color: #B36E51 */
  body.home .therapies-header-wrap .eyebrow-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
    color: #B36E51 !important;
    margin: 0 !important;
  }

  /* Figma 825:3719 Horizontal Snap Scroll: Card 296x464px, Radius 16px, Bg: #F1E2CF */
  /* Starts exactly 16px away from the left viewport edge */
  body.home .therapies-grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 0 0 16px !important; /* Entire track offset 16px from screen edge */
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    position: relative !important;
    z-index: 30 !important;
    box-sizing: border-box !important;
  }

  body.home .therapies-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.home .therapy-card {
    flex: 0 0 296px !important;
    width: 296px !important;
    min-width: 296px !important;
    border-radius: 16px !important;
    background-color: #F1E2CF !important;
    scroll-snap-align: start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  }

  /* Figma 825:3721 cover: 296px x 196px, Radius: 16px top */
  body.home .therapy-card-img-wrap {
    width: 100% !important;
    height: 196px !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    background-color: transparent !important;
    border: none !important;
  }

  body.home .therapy-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* Figma 825:3723 content: padding 24px, gap: 24px */
  body.home .therapy-card-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    box-sizing: border-box !important;
  }

  /* Figma 825:3725 title: Inter Regular 18px, lh: 24.12px, ls: -0.54px, color: #1F1B17 */
  body.home .therapy-card-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.34 !important;
    letter-spacing: -0.03em !important;
    color: #1F1B17 !important;
    margin: 0 0 8px 0 !important;
  }

  /* Figma 825:3726 desc: Inter Light 14px, lh: 20px, ls: -0.56px, color: #1F1B17 */
  body.home .therapy-card-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.43 !important; /* 20px */
    letter-spacing: -0.04em !important;
    color: #1F1B17 !important;
    margin: 0 !important;
  }

  /* Figma 825:5413 btns: column, gap: 8px */
  body.home .therapy-card-ctas {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  /* Figma buttons (825:5414): 48px height, 12px radius, fill #1E5745, text 14px #FFFBF7 */
  body.home .therapy-card-ctas a.btn-primary {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    background-color: #1E5745 !important;
    color: #FFFBF7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border: none !important;
    text-align: center !important;
    padding: 14px 24px !important;
    box-sizing: border-box !important;
  }

  /* Figma Component 11 (825:5415): 48px height, 12px radius, transparent with border, text 14px #1F1B17 */
  body.home .therapy-card-ctas a:not(.btn-primary) {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #1F1B17 !important;
    border: 1px solid rgba(31, 27, 23, 0.24) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    padding: 14px 24px !important;
    box-sizing: border-box !important;
  }

  /* 6. Section 5: Find a Clinic Near You (Terracotta Brown Section behind therapy cards, Frame 778:5678: Radius 16px) */
  body.home .section-clinics {
    background-color: #A05034 !important; /* Exact Figma Frame 778:5678 fill: rgb(160,80,52) */
    border-radius: 16px !important;
    margin-left: 0 !important; /* Removed outside left margin/spacing */
    margin-right: 8px !important;
    margin-top: -232px !important; /* Pulls brown container behind the cards up to their midpoint */
    padding-top: 272px !important; /* 232px card overlap + 40px top clearance inside the brown container */
    padding-bottom: 56px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  body.home .section-clinics .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Explore All Therapies Button sitting inside the brown section under cards: 80px top and bottom padding */
  body.home .therapies-explore-cta {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  body.home .therapies-explore-cta a {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 251, 247, 0.24) !important;
    background: transparent !important;
    color: #FFFBF7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    box-sizing: border-box !important;
  }

  /* Divider line: Exact Figma Vector 11 (778:5681) */
  body.home .clinics-divider {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    border: none !important;
    background-color: #D69476 !important; /* Exact Figma stroke rgb(214, 148, 118) */
    opacity: 0.5 !important;
    margin: 0 0 56px 0 !important; /* Exact Figma gap: 56px below divider to clinics text */
  }

  body.home .clinics-layout-flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  body.home .clinics-intro {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Exact Figma 778:5686: Font Color: #FFFBF7 */
  body.home .clinics-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.04 !important; /* 33.28px */
    letter-spacing: -0.045em !important;
    color: #FFFBF7 !important; /* Exact requested & Figma color: #FFFBF7 */
    margin: 0 0 8px 0 !important;
  }

  body.home .clinics-subhead {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
    color: #F2C5AF !important; /* Exact Figma rgb(242, 197, 175) */
    display: block !important;
    margin-bottom: 32px !important;
  }

  body.home .clinics-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.34 !important;
    letter-spacing: -0.054em !important;
    color: #FFFBF7 !important;
    margin: 0 0 40px 0 !important; /* Spacing above View All Clinics button: 40px */
  }

  /* View All Clinics button container and button styling */
  body.home .clinics-intro div:has(> a[href*="clinics"]) {
    margin-top: 0 !important;
    margin-bottom: 56px !important; /* Exact Figma gap between View All Clinics button and cards slider: 56px */
    width: 100% !important;
  }

  body.home .clinics-intro a.btn-outline-white {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 251, 247, 0.24) !important;
    background: transparent !important;
    color: #FFFBF7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    box-sizing: border-box !important;
  }

  body.home .clinics-carousel-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .clinics-slider-viewport {
    width: 100% !important;
    overflow: visible !important;
  }

  /* Figma Frame 3640: Horizontal snap scroll with 16px gap */
  body.home .clinics-slider-track {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding-bottom: 8px !important;
    margin: 0 !important;
  }

  body.home .clinics-slider-track::-webkit-scrollbar {
    display: none !important;
  }

  /* Figma Frame 42 (788:9584): 312px x 276px, Radius: 16px, Bg: #F5E5DC */
  body.home .clinic-card {
    flex: 0 0 312px !important;
    width: 312px !important;
    min-width: 312px !important;
    border-radius: 16px !important;
    background-color: #F5E5DC !important;
    scroll-snap-align: start !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  body.home .clinic-branch-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #1F1B17 !important;
    margin: 0 0 8px 0 !important;
  }

  body.home .clinic-address {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.43 !important;
    color: #302D28 !important;
    margin: 0 0 16px 0 !important;
  }

  body.home .clinic-map-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #033F34 !important;
    text-decoration: none !important;
    margin-bottom: 16px !important;
  }

  body.home .clinic-card-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.home .clinic-card-actions .btn-primary {
    flex: 1 !important;
    height: 48px !important;
    border-radius: 12px !important;
    background-color: #033F34 !important;
    color: #FFFBF7 !important;
    font-size: 14px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.home .clinic-card-actions .btn-outline-tan {
    flex: 1 !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #1F1B17 !important;
    border: 1px solid rgba(31, 27, 23, 0.24) !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.home .carousel-indicator-track {
    display: none !important;
  }

  /* 7. Section 6: Franchise Banner ("Bring Trinaya to Your City", Figma Frame 3687: 344px wide container, image top, text bottom) */
  body.home .section-franchise {
    padding: 60px 0 !important;
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
    clear: both !important;
  }

  body.home .section-franchise .container-wide {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.home .franchise-outer-card {
    border-radius: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  body.home .franchise-inner-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    border-radius: 16px !important;
    padding: 24px !important;
    gap: 32px !important;
    background-color: #010F0D !important;
    background: #010F0D !important;
    color: #FFFBF7 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Image on Top: full width within padding, 240px height, centered */
  body.home .franchise-image-col {
    order: 1 !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.home .franchise-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Content on Bottom: "Bring Trinaya to Your City" */
  body.home .franchise-content-col {
    order: 2 !important; /* Forces text content below image */
    width: 100% !important;
    padding: 0 !important;
  }

  body.home .franchise-headline {
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.04em !important;
    color: #FFFBF7 !important;
    margin: 0 0 16px 0 !important;
  }

  body.home .franchise-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: rgba(255, 251, 247, 0.85) !important;
    margin: 0 0 32px 0 !important;
  }

  body.home .franchise-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  body.home .franchise-actions a {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  /* 8. Section 7: What Our Patrons Say (Testimonials) */
  body.home .section-testimonials {
    padding: 64px 0 60px 0 !important;
    overflow: hidden !important;
  }

  body.home .section-testimonials .container {
    padding: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.home .testimonials-headline {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
    color: #022620 !important;
    margin: 0 0 32px 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.home .testimonials-carousel-wrap {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Horizontal snap track starting at 16px to match heading left padding */
  body.home .testimonials-track {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pinch-zoom !important;
    gap: 16px !important;
    padding: 0 16px 24px 16px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    cursor: grab !important;
    box-sizing: border-box !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  body.home .testimonials-track.is-dragging,
  body.home .testimonials-track:active {
    cursor: grabbing !important;
    scroll-snap-type: none !important;
    user-select: none !important;
  }

  body.home .testimonials-track::-webkit-scrollbar {
    display: none !important;
  }

  /* Card Container: 312px wide, relative for absolute quote icon */
  body.home .testimonials-track .testimonial-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex: 0 0 312px !important;
    width: 312px !important;
    min-width: 312px !important;
    height: auto !important;
    min-height: 296px !important;
    border-radius: 16px !important;
    background-color: #F1E2CF !important;
    color: #1F1B17 !important;
    border: none !important;
    scroll-snap-align: start !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    position: relative !important;
    overflow: visible !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* First card default active: Dark green with white text */
  body.home .testimonial-card:first-child,
  body.home .testimonial-card.is-active {
    background-color: #072F28 !important;
    color: #FFFBF7 !important;
  }

  body.home .testimonial-card:first-child .testimonial-quote,
  body.home .testimonial-card.is-active .testimonial-quote {
    color: #FFFBF7 !important;
  }

  body.home .testimonial-card:first-child .author-name,
  body.home .testimonial-card.is-active .author-name {
    color: #FFFBF7 !important;
  }

  body.home .testimonial-card:first-child .author-location,
  body.home .testimonial-card:first-child .author-role,
  body.home .testimonial-card.is-active .author-location,
  body.home .testimonial-card.is-active .author-role {
    color: rgba(255, 251, 247, 0.7) !important;
  }

  /* Position quote icon BEHIND the first word (top: 20px, left: 20px, behind text) */
  body.home .testimonial-text-col {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.home .testimonial-quote-icon {
    position: absolute !important;
    top: -6px !important;
    left: -4px !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 0 !important;
    opacity: 0.18 !important;
    pointer-events: none !important;
    display: block !important;
    margin: 0 !important;
  }

  body.home .testimonial-quote-svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    filter: none !important;
  }

  body.home .testimonial-card:first-child .testimonial-quote-svg,
  body.home .testimonial-card.is-active .testimonial-quote-svg {
    filter: brightness(0) invert(1) !important;
  }

  body.home .testimonial-quote {
    position: relative !important;
    z-index: 1 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.55 !important;
    color: #1F1B17 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Author row: visible image and name/location directly below */
  body.home .testimonial-card .testimonial-author-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin-top: 24px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.home .author-avatar-wrap {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: block !important;
    visibility: visible !important;
  }

  body.home .author-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
  }

  body.home .author-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #022620 !important;
    line-height: 1.2 !important;
    display: block !important;
  }

  body.home .author-location,
  body.home .author-role {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: rgba(31, 27, 23, 0.7) !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    display: block !important;
  }

  body.home .carousel-drag-badge,
  body.home .testimonials-indicator-track {
    display: none !important;
  }

  body.home .carousel-drag-badge,
  body.home .testimonials-indicator-track {
    display: none !important;
  }

  /* 9. Section 8: Blogs Section (Figma Frame 3690 / 778:6262) */
  body.home .section-blogs {
    padding: 40px 0 60px !important;
  }

  body.home .section-blogs .section-headline {
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    color: #022620 !important;
    margin-bottom: 24px !important;
  }

  body.home .blogs-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
  }

  body.home .blogs-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.home .blog-card {
    flex: 0 0 296px !important;
    width: 296px !important;
    min-width: 296px !important;
    border-radius: 16px !important;
    background-color: #F1E2CF !important;
    scroll-snap-align: start !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  body.home .blog-card-img-wrap {
    height: 196px !important;
  }

  body.home .blog-card-body {
    padding: 20px 20px 24px !important;
  }

  /* 10. Section 9: FAQs Section (Figma Frame 3689 / 778:6460) */
  body.home .section-faqs {
    padding: 60px 0 !important;
  }

  body.home .faqs-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.home .faqs-layout .section-headline {
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    color: #022620 !important;
  }

  /* Exact Figma 778:6465: Radius 16px, Bg: #F7EEE3, Padding: 24px */
  body.home .faq-collapsed-row {
    padding: 24px !important;
    border-radius: 16px !important;
    background-color: #F7EEE3 !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
  }

  /* Exact Figma 778:6470 Expanded: Radius 16px, Bg: #02332A, Color: #FFFBF7 */
  body.home .faq-expanded-row {
    padding: 24px !important;
    border-radius: 16px !important;
    background-color: #02332A !important;
    color: #FFFBF7 !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
  }

  body.home .faq-collapsed-q {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #022620 !important;
    line-height: 1.35 !important;
  }

  body.home .faq-expanded-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #FFFBF7 !important;
    line-height: 1.35 !important;
  }

  body.home .faq-expanded-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: rgba(255, 251, 247, 0.9) !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
  }

  /* 11. Section 10: Newsletter (Figma sec-7 / 778:6528: 328x242 Card, Radius 16px, Bg: #F1E2CF) */
  body.home .section-newsletter {
    padding: 40px 0 80px !important;
  }

  body.home .newsletter-card {
    width: 100% !important;
    max-width: 328px !important;
    margin-inline: auto !important;
    border-radius: 16px !important;
    padding: 24px !important;
    background-color: #F1E2CF !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }

  body.home .newsletter-headline {
    font-family: 'Inter', sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    color: #022620 !important;
  }

  body.home .newsletter-form {
    width: 100% !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Figma 778:6534: Height 56px, Radius 12px, Bg: #F5EED6 */
  body.home .newsletter-input {
    width: 100% !important;
    height: 56px !important;
    border-radius: 12px !important;
    background-color: #F5EED6 !important;
    border: none !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    color: #1F1B17 !important;
  }

  /* Figma 786:7773: Height 48px, Radius 12px, Bg: #033F34 */
  body.home .newsletter-form .btn-submit {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    background-color: #033F34 !important;
    color: #FFFBF7 !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  /* 12. Footer (Figma 834:3893: 344x452 Container, Radius 16px, Bg: #022620) */
  body.home .site-footer {
    padding: 0 8px 32px !important;
    background-color: #FFFBF7 !important;
  }

  body.home .footer-inner-card,
  body.home .footer-top-wrap {
    width: 100% !important;
    max-width: 344px !important;
    margin-inline: auto !important;
    border-radius: 16px !important;
    background-color: #022620 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }

  body.home .footer-bottom-bar {
    width: 100% !important;
    max-width: 344px !important;
    margin-inline: auto !important;
    padding: 16px 24px !important;
    box-sizing: border-box !important;
    color: #1F1B17 !important;
  }
}