/* ═══════════════════════════════════════════════════════════════
   Simply | Desktop — CSS Module
   All values confirmed from Figma Phase 1 inspection, node 1965:104924
   Design tokens:
     --blue:   #335d88   (primary)
     --navy:   #0b2e56   (deep)
     --sky:    #95b4d3   (Premium accent)
     --cream:  #fffdf8
     --sand:   #ece8dd
     --sandL:  #ece7db
     --body:   #676767
     --dark:   #1a1712
     --card:   #f6f3ec
═══════════════════════════════════════════════════════════════ */

/* Page wrapper — Figma: Simply | Desktop, fill #ece8dd */
.main {
  background: #ece8dd;
  min-height: 100vh;
}

/* ── 1. HERO ──────────────────────────────────────────────────────
   Figma: Secondary header 3, 1920×700
   Hero E (no nav) = 1920×640. Fixed <Header> floats over top.
   Background: spa woman photo (imageRef 87d02e62a1f6b0e4).
   Left content panel [539×640]: BW wordmark + desc + CTA.
──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
  background: #2a211a;
}
.heroBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Dark-to-transparent gradient so left-panel text is legible */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(15, 12, 10, 0.80) 0%,
    rgba(15, 12, 10, 0.55) 35%,
    rgba(15, 12, 10, 0.10) 65%,
    rgba(15, 12, 10, 0.00) 100%
  );
  pointer-events: none;
}
/* Content panel — Figma: Frame 2147203886, 539×640, pad 80 120 */
.heroPanel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 120px;
  max-width: 660px;
  gap: 32px;
}
/* BW Simply wordmark — Figma: node I1965:104925;2126:103099, 302×86 */
.heroWordmark {
  width: 302px;
  height: auto;
  max-height: 86px;
  object-fit: contain;
  object-position: left;
  /* Convert dark-grey SVG text → cream/white on dark background */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
/* Description — Barlow 20px wt=400, #fffdf8 */
.heroDesc {
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #fffdf8;
  max-width: 400px;
}
/* "Explore Memberships" — Barlow 16px 600 uppercase, pill stroke #fffdf8 */
.heroBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: 100px;
  border: 1px solid rgba(255, 253, 248, 0.75);
  background: transparent;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  color: #fffdf8;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.2s, border-color 0.2s;
}
.heroBtn:hover {
  background: rgba(255, 253, 248, 0.12);
  border-color: #fffdf8;
}

/* ── 2. IMPACT ────────────────────────────────────────────────────
   Figma: Impact, 1920×629, fill #fffdf8
   Content Left [652×404] + decorative Vector [815×604] fill #ece8dd
──────────────────────────────────────────────────────────────── */
.impact {
  background: #fffdf8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 100px 120px;
  min-height: 629px;
  box-sizing: border-box;
}
.impactLeft {
  display: flex;
  flex-direction: column;
  gap: 57px;
  max-width: 652px;
  flex-shrink: 0;
}
/* "Why Come to Simply" — Teodor TRIAL 60px wt=350, #335d88 */
.impactHeading {
  font-family: 'Teodor TRIAL', serif;
  font-size: 60px;
  font-weight: 350;
  line-height: 72px;
  letter-spacing: 0;
  color: #335d88;
  margin: 0;
}
/* Body — Barlow 24px wt=400, #676767, lh=28.8 */
.impactBody {
  font-family: 'Barlow', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 28.8px;
  color: #676767;
  margin: 0;
}
/* "Book Now" — outline button, stroke #335d88, radius 100px */
.impactBtn {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  border-radius: 100px;
  border: 1px solid #335d88;
  background: transparent;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: #335d88;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.2s;
}
.impactBtn:hover { background: rgba(51,93,136,0.06); }
/* Decorative right side — Figma has a Vector [815×604] #ece8dd shape here;
   pending export from Figma, right side is left as natural section background */

/* ── 3. IMAGE GALLERY ─────────────────────────────────────────────
   Figma: Frame 2147203986, 4014×560, fill #fffdf8
   6 Hero E images, 649×460, radius 10, gap 24
   Slide arrows: stroke #335d88 wt=1.5
──────────────────────────────────────────────────────────────── */
.gallery {
  background: #fffdf8;
  padding: 60px 120px 40px;
  overflow: hidden;
}
.galleryViewport {
  width: 100%;
  overflow: hidden;
  height: 460px;
}
.galleryTrack {
  display: flex;
  gap: 24px;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
  height: 100%;
}
/* Hero E image — 649×460, radius already baked into PNG by Figma */
.galleryImg {
  flex-shrink: 0;
  width: 649px;
  height: 460px;
  object-fit: cover;
}
/* Controls row — arrows + dots */
.galleryControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 4px;
}
.galleryArrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.galleryDots {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Dots — Figma: 8×8 ELLIPSE, #335d88, inactive at 0.2 opacity */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #335d88;
  opacity: 0.2;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s;
}
.dotActive { opacity: 1; }

/* ── 4. MEMBERSHIP BENEFITS ──────────────────────────────────────
   Figma: Body B, 1920×637, fill #fffdf8
   VERTICAL gap=10, pad=100/120/100/120 align=MAX/CENTER
   TAG (Barlow 18px 600 upper, stroke #676767)
   Heading (Teodor 60px wt=350, #335d88)
   4 columns, gap=140
──────────────────────────────────────────────────────────────── */
.benefits {
  background: #fffdf8;
  padding: 100px 120px;
  box-sizing: border-box;
}
.benefitsWrap {
  display: flex;
  flex-direction: column;
  gap: 58px;
  max-width: 1680px;
  margin: 0 auto;
}
.benefitsTop {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
/* TAG — Barlow 18px 600 uppercase, stroke #676767, pad 10, radius implied */
.benefitsTag {
  display: inline-block;
  border: 1px solid #676767;
  padding: 10px 16px;
  border-radius: 4px;
  font-family: 'Barlow', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #676767;
}
/* "Simply Massage Membership Benefits" — Teodor TRIAL 60px #335d88 */
.benefitsHeading {
  font-family: 'Teodor TRIAL', serif;
  font-size: 60px;
  font-weight: 350;
  line-height: 72px;
  color: #335d88;
  margin: 0;
}
/* 4 columns — gap 140 */
.benefitsRow {
  display: flex;
  gap: 140px;
  justify-content: center;
}
.benefitCol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 313px;
  padding: 24px;
  box-sizing: border-box;
}
.benefitIcon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.benefitTitle {
  font-family: 'Barlow', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #335d88;
  margin: 0;
}
.benefitDesc {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #676767;
  margin: 0;
}

/* ── 5. MEMBERSHIP TABLE ─────────────────────────────────────────
   Figma: Frame 2147203932, 1920×1335, fill #fffdf8
   Membership table instance [1680×763]
──────────────────────────────────────────────────────────────── */
.tableSection {
  background: #fffdf8;
  padding: 60px 120px 100px;
  box-sizing: border-box;
}
.tableWrap {
  max-width: 1680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 58px;
}
.tableIntro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}
.tableHeading {
  font-family: 'Teodor TRIAL', serif;
  font-size: 60px;
  font-weight: 350;
  line-height: 72px;
  color: #335d88;
  margin: 0;
}
.tableSub {
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #676767;
  margin: 0;
}
/* Table — full width, gap 3 between cells */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
}
/* Header cells */
.thBenefit {
  background: #ece7db;
  font-family: 'Teodor TRIAL', serif;
  font-size: 32px;
  font-weight: 350;
  line-height: 38.4px;
  color: #1a1712;
  text-align: center;
  padding: 20px 32px;
  width: 57.6%;
}
.thClassic {
  background: #335d88;
  font-family: 'Teodor TRIAL', serif;
  font-size: 32px;
  font-weight: 350;
  line-height: 38.4px;
  color: #fffdf8;
  text-align: center;
  padding: 20px;
  width: 21.2%;
}
.thPremium {
  background: #95b4d3;
  font-family: 'Teodor TRIAL', serif;
  font-size: 32px;
  font-weight: 350;
  line-height: 38.4px;
  color: #0b2e56;
  text-align: center;
  padding: 20px;
  width: 21.2%;
}
/* Feature label cell — #f6f3ec, Barlow 24px wt=500, #4a4a48 */
.tdLabel {
  background: #f6f3ec;
  padding: 26px 32px;
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28.8px;
  color: #4a4a48;
  vertical-align: middle;
}
/* Check cells — centered, contains CheckMark + optional note */
.tdCheck {
  text-align: center;
  vertical-align: middle;
  padding: 20px 12px;
}
.cellNote {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #335d88;
  margin-top: 8px;
}
/* Price row */
.priceRow td {
  padding: 32px;
  vertical-align: middle;
}
.tdPriceNote {
  background: transparent;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #676767;
  vertical-align: middle;
}
.priceNote2 {
  display: block;
  font-size: 14px;
  margin-top: 8px;
  color: #9a9a9a;
}
.tdPriceClassic {
  background: #335d88;
  text-align: center;
  vertical-align: middle;
}
.tdPricePremium {
  background: #95b4d3;
  text-align: center;
  vertical-align: middle;
}
/* Price numbers — Teodor TRIAL 60px wt=350 */
.price {
  font-family: 'Teodor TRIAL', serif;
  font-size: 60px;
  font-weight: 350;
  line-height: 72px;
  color: #fffdf8;
  display: block;
}
.perMonth {
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #fffdf8;
}
.pricePremium {
  font-family: 'Teodor TRIAL', serif;
  font-size: 60px;
  font-weight: 350;
  line-height: 72px;
  color: #0b2e56;
  display: block;
}
.perMonthPremium {
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #0b2e56;
}

/* ── 6. LOCATION SECTION ─────────────────────────────────────────
   Figma: Location section, 1920×730, fill #ece8dd
   HORIZONTAL gap=169, pad=0/120/0/120, align=CENTER
   Hero E [883×450] + Location card [672×484]
──────────────────────────────────────────────────────────────── */
.location {
  background: #ece8dd;
  display: flex;
  align-items: center;
  gap: 169px;
  padding: 140px 120px;
  box-sizing: border-box;
  min-height: 730px;
}
.locationImg {
  width: 883px;
  height: 450px;
  object-fit: contain; /* oval PNG — don't crop; contain preserves the baked ellipse shape */
  flex-shrink: 0;
}
.locationCard {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 672px;
  flex-shrink: 0;
}
/* "Marina del Rey" — La Belle Aurore 80px wt=400, #335d88 */
.locationName {
  font-family: 'La Belle Aurore', cursive;
  font-size: 80px;
  font-weight: 400;
  line-height: 81.6px;
  color: #335d88;
  text-transform: capitalize;
  margin: 0 0 18px;
}
/* Description — Barlow 20px wt=400, #676767 */
.locationDesc {
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #676767;
  margin: 0;
}
/* Dividers — stroke #b3b3b3 */
.locationHr {
  border: none;
  border-top: 1px solid #b3b3b3;
  margin: 30px 0;
}
.locationRow {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
/* "Address:" / "Phone:" — Barlow 20px wt=500, #335d88 */
.locationLabel {
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #335d88;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}
/* Values — Barlow 20px wt=400, #676767 */
.locationVal {
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #676767;
}
.locationBtns {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 4px;
}
/* "Call Now" — filled #335d88, Barlow 16px 600, #fffcf6 */
.btnFilled {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  border-radius: 100px;
  background: #335d88;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: #fffcf6;
  text-decoration: none;
  transition: background 0.2s;
}
.btnFilled:hover { background: #264d72; }
/* "Learn more" — outline #335d88, Barlow 16px 600 */
.btnOutline {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  border-radius: 100px;
  border: 1px solid #335d88;
  background: transparent;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: #335d88;
  text-decoration: none;
  transition: background 0.2s;
}
.btnOutline:hover { background: rgba(51,93,136,0.06); }

/* ── 7. TESTIMONIALS ─────────────────────────────────────────────
   Figma: Testimonials, 1920×755, fill #fffdf8
   VERTICAL gap=64, pad=100/240/100/120
   3 cards visible (HORIZONTAL gap=24)
──────────────────────────────────────────────────────────────── */
.testimonials {
  background: #fffdf8;
  padding: 100px 120px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  box-sizing: border-box;
}
.testimonialsHeader {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ratingRow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stars { display: inline-flex; gap: 2px; }
.ratingNum {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #335d88;
  line-height: 16px;
}
.ratingLabel {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #335d88;
  line-height: 16px;
}
/* "Member reviews" — Teodor TRIAL 40px wt=350, #335d88 */
.testimonialsHeading {
  font-family: 'Teodor TRIAL', serif;
  font-size: 40px;
  font-weight: 350;
  line-height: 48px;
  color: #335d88;
  margin: 0;
}
/* 3 testimonial cards in a row */
.testimonialCards {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
/* Testimonial Card — fill #fffdf8, stroke #b3b3b3, radius 10, pad 24, VERTICAL gap=20 */
.testimonialCard {
  flex: 1;
  background: #fffdf8;
  border: 1px solid #b3b3b3;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 304px;
}
/* Card text — Barlow 20px wt=400, lh=30, #202023 */
.testimonialText {
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #202023;
  margin: 0;
  flex: 1;
}
/* Profile row — HORIZONTAL gap=12 */
.testimonialProfile {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Reviewer name — Barlow 16px wt=500, #202023 */
.testimonialName {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #202023;
}
/* Prev / Next — SPACE_BETWEEN */
.testimonialNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tNavBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: 100px;
  background: none;
  border: none;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: #335d88;
  cursor: pointer;
  transition: opacity 0.2s;
}
.tNavBtnDisabled { opacity: 0.35; cursor: default; }

/* ── 8. BECOME A MEMBER ──────────────────────────────────────────
   Figma: become a member, 1920×630, fill #fffdf8
   VERTICAL gap=32, pad=100/120/100/124
   Contact container [1676×430], radius 10
   HORIZONTAL: Details [663×230] + Form [720×228]
──────────────────────────────────────────────────────────────── */
.memberSection {
  background: #fffdf8;
  padding: 100px 124px 100px 120px;
  box-sizing: border-box;
}
.memberInner {
  display: flex;
  gap: 293px;
  align-items: flex-start;
  max-width: 1676px;
  margin: 0 auto;
  background: transparent;
  border-radius: 10px;
  padding: 100px 120px 100px 0;
}
.memberDetails {
  display: flex;
  flex-direction: column;
  gap: 57px;
  width: 663px;
  flex-shrink: 0;
}
/* "Become a Member" — Teodor TRIAL 60px wt=350, #335d88 */
.memberHeading {
  font-family: 'Teodor TRIAL', serif;
  font-size: 60px;
  font-weight: 350;
  line-height: 72px;
  color: #335d88;
  margin: 0;
}
/* Desc — Barlow 16px wt=400, lh=19.2, #6c6c6c */
.memberDesc {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: 0.16px;
  color: #6c6c6c;
  margin: 0;
}
.memberPhone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* "Phone" label — Barlow 16px wt=400, #676767 */
.memberPhoneLabel {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  color: #676767;
}
/* Phone number link */
.memberPhoneVal {
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #335d88;
  text-decoration: none;
}
/* Form — [720×228] VERTICAL gap=32 */
.memberForm {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 720px;
  flex-shrink: 0;
}
.formRow {
  display: flex;
  gap: 16px;
}
/* Input/Field [352×76] VERTICAL gap=4 */
.formField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.fieldLabel {
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.2px;
  color: #676767;
}
.fieldInput {
  height: 44px;
  padding: 10px 16px;
  border: 1px solid #b3b3b3;
  border-radius: 4px;
  background: #fffdf8;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #1a1712;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}
.fieldInput:focus { border-color: #335d88; }
/* Submit — filled #345d89, stroke #335d88, radius 50px */
.submitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border-radius: 50px;
  background: #345d89;
  border: 1px solid #335d88;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: #fffdf8;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.2s;
}
.submitBtn:hover { background: #264d72; }

/* ── 9. FAQ ───────────────────────────────────────────────────────
   Figma: FAQ Section, 1920×740, fill #fffdf8
   HORIZONTAL gap=643, pad=100/120/100/120
   Left: "Membership FAQs" [318×48]
   Right: 4 accordion cards [721×540] gap=12
──────────────────────────────────────────────────────────────── */
.faq {
  background: #fffdf8;
  position: relative;
  display: flex;
  gap: 643px;
  padding: 100px 120px;
  box-sizing: border-box;
  min-height: 740px;
  overflow: hidden;
}
/* Background vector — Figma: large #ece8dd vector shape;
   pending export from Figma, removed CSS placeholder blob */
.faqLeft {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 318px;
}
/* "Membership FAQs" — Teodor TRIAL 40px wt=350, #335d88 */
.faqHeading {
  font-family: 'Teodor TRIAL', serif;
  font-size: 40px;
  font-weight: 350;
  line-height: 48px;
  color: #335d88;
  margin: 0;
}
.faqList {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  max-width: 721px;
}
/* Accordion card — stroke #b3b3b3, pad=12, VERTICAL gap=20 */
.faqCard {
  border: 1px solid #b3b3b3;
  border-radius: 4px;
  overflow: hidden;
}
/* Question row — HORIZONTAL SPACE_BETWEEN/CENTER */
.faqQ {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 12px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Teodor TRIAL', serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 26.9px;
  color: #335d88;
}
.faqToggle { flex-shrink: 0; }
/* Answer — Barlow 16px wt=500, lh=21.6, #6b6b6e */
.faqA {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: 0.16px;
  color: #6b6b6e;
  margin: 0;
  padding: 0 12px 20px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .heroPanel { padding: 60px 60px; max-width: 580px; }
  .impact { padding: 80px 60px; }
  .gallery { padding: 60px 60px 40px; }
  .benefits { padding: 80px 60px; }
  .benefitsRow { gap: 40px; flex-wrap: wrap; }
  .benefitCol { max-width: 240px; }
  .tableSection { padding: 60px; }
  .location { gap: 60px; padding: 80px 60px; }
  .locationImg { width: 480px; height: 360px; }
  .locationCard { width: auto; }
  .testimonials { padding: 80px 60px; }
  .memberSection { padding: 80px 60px; }
  .memberInner { gap: 60px; padding: 60px 0; }
  .memberForm { width: auto; }
  .faq { gap: 60px; padding: 80px 60px; }
}
@media (max-width: 768px) {
  .hero { height: 500px; }
  .heroPanel { padding: 40px 24px; max-width: 100%; }
  .heroAbout, .heroBW { font-size: 40px; line-height: 52px; }
  .impact { flex-direction: column; padding: 60px 24px; }
  .impactHeading { font-size: 40px; line-height: 52px; }
  .gallery { padding: 40px 24px 24px; }
  .galleryImg { width: 90vw; height: 60vw; }
  .benefits { padding: 60px 24px; }
  .benefitsHeading { font-size: 36px; line-height: 44px; }
  .benefitsRow { flex-direction: column; gap: 24px; }
  .benefitCol { max-width: 100%; }
  .tableSection { padding: 40px 24px; overflow-x: auto; }
  .table { font-size: 14px; }
  .thBenefit, .thClassic, .thPremium { font-size: 20px; padding: 12px; }
  .tableHeading { font-size: 36px; line-height: 44px; }
  .location { flex-direction: column; padding: 60px 24px; gap: 40px; }
  .locationImg { width: 100%; height: auto; }
  .locationName { font-size: 52px; line-height: 60px; }
  .testimonials { padding: 60px 24px; }
  .testimonialCards { flex-direction: column; }
  .memberSection { padding: 60px 24px; }
  .memberInner { flex-direction: column; gap: 40px; padding: 0; }
  .memberDetails { width: 100%; }
  .memberForm { width: 100%; }
  .faq { flex-direction: column; gap: 40px; padding: 60px 24px; min-height: auto; }
  .faqLeft { width: 100%; }
}