/* =============================================
   Fitzone Ramya - Complete Stylesheet

   THE OFFICIAL PALETTE (Ramya's four, + four we had to derive).
   Nobody eyeballs a new brown. If you need a colour, it is below.

   Her four:            Derived (she gave none, all verified >= WCAG AA):
     text    #3a2e28      accent-light  #D08E68  (her accent is 1.78:1 on
     accent  #7a4a32                             dark - unusable. This is 4.84:1)
     beige   #e9dfd0      muted         #6B5C51  (5.52 cream / 4.86 beige)
     cream   #f4ede3      dark band     #3a2e28  (her text brown, reused)
                          savings green #2F6B45  (money-saved ONLY)
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* --- Surfaces (Ramya's) --- */
  --cream: #f4ede3;        /* page ground */
  --bone: #e9dfd0;         /* alt section ground (her "beige") */
  --paper: #FDFAF5;        /* cards — text 12.60:1 */
  --sand: #DCCFBC;         /* decorative hairline only */
  --sand-strong: #8A7B6B;  /* form-field border — a real boundary, 3.52:1 */

  /* --- Ink --- */
  --ink: #3a2e28;          /* HER body text — 11.28:1 on cream */
  --ink-soft: #4E4038;
  --oak: #6B5C51;          /* muted text — 5.52 cream / 4.86 beige */

  /* --- Accent --- */
  --clay: #7a4a32;         /* HER accent — 6.33:1 on cream, white label 7.36:1 */
  --clay-dark: #653C28;    /* hover — white label 9.42:1 */
  --clay-light: #D08E68;   /* THE 5th COLOUR: accent on dark — 4.84:1 */
  --clay-tint: #EFE0D6;    /* icon chips — accent on it 5.71:1 */
  --sage: #2F6B45;         /* savings green ONLY ("save ₹7,000") — 5.46:1 on cream */
  --sage-light: #6FBF8E;   /* the same green for dark grounds — 5.94:1 (her green
                              is 2.07:1 on dark: the identical trap as her accent) */
  --gold: #B8873B;         /* stars */

  /* --- Dark band: her text brown, reused. Cream on it = 11.28:1 --- */
  --deep: #3a2e28;
  --deep-2: #2E241F;

  --white: #FFFFFF;
  --green-wa: #25D366;     /* WhatsApp — universal, the one exception */

  /* --- Legacy token names, remapped so inline styles keep working --- */
  --navy: var(--deep);
  --navy-light: var(--deep-2);
  --navy-accent: var(--oak);
  --orange: var(--clay);
  --orange-dark: var(--clay-dark);
  --orange-light: var(--clay-tint);
  --light-bg: var(--bone);
  --text-dark: var(--ink);
  --text-muted: var(--oak);
  --border: var(--sand);

  --focus: var(--clay);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --pill: 999px;

  --shadow: 0 4px 30px rgba(58, 52, 45, 0.05);
  --shadow-hover: 0 14px 44px rgba(58, 52, 45, 0.11);
  --shadow-glow: 0 0 22px rgba(140, 74, 50, 0.18);
  --t: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Built from HER browns, not the old theme's. The dark band is her text
     colour (#3a2e28) deepened; the accent gradient is her accent (#7a4a32). */
  --gradient-dark: linear-gradient(135deg, #3a2e28 0%, #2E241F 100%);
  --gradient-orange: linear-gradient(135deg, #7a4a32 0%, #653C28 100%);
}

/* Inside every dark surface, re-point the accent + muted tokens so that
   inline `var(--orange)` / `var(--text-muted)` stay legible on espresso.
   A single accent cannot clear 4.5:1 on both cream and espresso. */
.bg-navy,
.page-hero,
.prog-hero,
.price-card,
.prog-card-header,
.footer,
.video-placeholder {
  --orange: var(--clay-light);
  --sage: var(--sage-light);   /* so var(--sage) is legible on BOTH grounds */
  --text-muted: var(--sand);
  --text-dark: var(--cream);
  --border: rgba(255, 255, 255, 0.14);
  --focus: var(--cream);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Jost', sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Cormorant Garamond is a display face — it disintegrates below ~24px.
   Only h1/h2 use it. Smaller headings fall back to Jost. */
h1, h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h3, h4, h5 {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
input, button, textarea, select { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- THE ONE ANIMATION ON THIS SITE: fade-up ----
   Per Ramya: start at 40% opacity (never 0), 250-300ms, trigger 20% into view.
   Starting from 0 is what made her scroll through "screens of blank/ghost
   content" on a slow phone — content must always be legible, even mid-reveal.
   Gated on .js-reveal so content stays visible if JS never runs. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal { opacity: 0.4; transform: translateY(14px); }
  .js-reveal .reveal.visible { opacity: 1; transform: none; }
  .js-reveal .reveal { transition: opacity 0.28s ease-out, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- UTILS ---- */
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
/* Ramya's spacing rule: 96px desktop / 56px mobile, every section, no exceptions.
   (Was 120/76 — she read the old rhythm as "too airy, the page never settles".) */
.section { padding: 96px 0; }
.text-center { text-align: center; }
/* Uses the scoped --orange so it flips to clay-light inside dark surfaces.
   Hardcoding --clay here would render 1.84:1 on espresso. */
.text-orange { color: var(--orange); }
.bg-light { background: var(--bone); }
.bg-navy { background: var(--deep); color: var(--cream); }

.section-label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 16px;
}
.bg-navy .section-label,
.page-hero .section-label,
.prog-hero .section-label { color: var(--clay-light); }

.section-title {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  margin-bottom: 18px;
  color: var(--ink);
}
.bg-navy .section-title { color: var(--cream); }

.section-subtitle {
  font-size: 1.02rem;
  color: var(--oak);
  max-width: 62ch;
  margin: 0 auto 56px;
}

/* Ramya: "no line of text should run the full width of the page."
   Direct children of .container are the full-bleed prose paragraphs -- card and
   grid text nests deeper, so this caps the long lines without touching them. */
.container > p { max-width: 65ch; }
.container.text-center > p, .text-center > p { margin-left: auto; margin-right: auto; }
.bg-navy .section-subtitle { color: var(--sand); }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: var(--pill);
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.84rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; border: 1px solid transparent;
  transition: var(--t); white-space: nowrap; text-decoration: none;
}
/* Primary: clay on light grounds. 6.69:1 label, 6.05:1 vs page. */
.btn-primary { background: var(--clay); color: var(--white); border-color: var(--clay); }
.btn-primary:hover { background: var(--clay-dark); border-color: var(--clay-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(140,74,50,0.26); }

/* Outline: ink on light grounds. */
.btn-outline { background: transparent; color: var(--ink); border-color: var(--sand-strong); }
.btn-outline:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-2px); }

.btn-outline-orange { background: transparent; color: var(--clay); border-color: var(--clay); }
.btn-outline-orange:hover { background: var(--clay); color: var(--white); transform: translateY(-2px); }

.btn-lg { padding: 17px 38px; font-size: 0.88rem; }
.btn-sm { padding: 10px 22px; font-size: 0.76rem; }

/* On dark surfaces a clay button drops to 1.84:1 — invisible.
   Swap to a cream button with an ink label (11.11:1 / 12.85:1). */
.bg-navy .btn-primary,
.price-card .btn-primary,
.page-hero .btn-primary,
.prog-hero .btn-primary,
.footer .btn-primary {
  background: var(--cream); color: var(--ink); border-color: var(--cream);
}
.bg-navy .btn-primary:hover,
.price-card .btn-primary:hover,
.page-hero .btn-primary:hover,
.prog-hero .btn-primary:hover,
.footer .btn-primary:hover {
  background: var(--white); border-color: var(--white); box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}
.bg-navy .btn-outline,
.price-card .btn-outline,
.page-hero .btn-outline,
.prog-hero .btn-outline,
.footer .btn-outline {
  color: var(--cream); border-color: rgba(255,255,255,0.42);
}
.bg-navy .btn-outline:hover,
.price-card .btn-outline:hover,
.page-hero .btn-outline:hover,
.prog-hero .btn-outline:hover,
.footer .btn-outline:hover {
  background: var(--cream); color: var(--ink); border-color: var(--cream);
}

/* ---- ANNOUNCEMENT BAR (the rolling strip above the navbar) ----
   Messages come from the admin Announcement tab. It sits ABOVE the sticky navbar in the document,
   so it scrolls away with the page and never permanently eats height on a phone.

   Built on var(--clay): lib/theme.js rewrites that token from the admin Colors panel, so changing
   the accent recolours this strip too. White on clay is 7.36:1 (AA). */
.ann-bar {
  background: linear-gradient(90deg, var(--clay), var(--clay-dark));
  overflow: hidden;
  padding: 12px 0;
}
.ann-track {
  display: flex;
  width: max-content;
  animation-name: annScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
/* Duration and distance scale with how many messages the owner added, so they arrive as inline
   style from views/partials/announcement-bar.ejs (animation-duration + --ann-shift). */
@keyframes annScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--ann-shift, -33.333%)); }
}
/* The messages can be links, and you cannot reliably tap a moving target — so a hover (mouse) or
   a press-and-hold (touch) stops the strip. */
.ann-bar:hover .ann-track,
.ann-bar:active .ann-track { animation-play-state: paused; }

.ann-item {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 30px;
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
a.ann-item { text-decoration: none; transition: opacity 0.2s; }
a.ann-item:hover { opacity: 0.82; text-decoration: underline; text-underline-offset: 3px; }
a.ann-item:focus-visible { outline: 2px solid var(--white); outline-offset: -3px; border-radius: 3px; }
.ann-arrow { opacity: 0.6; }

@media (max-width: 768px) {
  .ann-bar { padding: 9px 0; }
  .ann-item { font-size: 0.82rem; padding: 0 22px; gap: 7px; }
}

/* Reduced motion: the global rule near the top already kills the animation. Left at that the track
   would freeze with every message past the first screen unreachable, so allow it to be swiped. */
@media (prefers-reduced-motion: reduce) {
  .ann-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ann-bar::-webkit-scrollbar { display: none; }
}

/* ---- NAVBAR (light) ---- */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(247, 243, 236, 0.86); padding: 18px 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sand);
  transition: padding var(--t), background var(--t), box-shadow var(--t);
}
.navbar.scrolled {
  padding: 12px 0;
  background: rgba(247, 243, 236, 0.96);
  box-shadow: 0 8px 30px rgba(58, 52, 45, 0.08);
}
.navbar-inner { display: flex; align-items: center; justify-content: space-between; }
.navbar-logo { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 1.3rem; color: var(--ink); }
.navbar-logo span { color: var(--clay); }
.navbar-links { display: flex; align-items: center; gap: 28px; }
.navbar-links a { color: var(--ink-soft); font-size: 0.9rem; font-weight: 400; transition: color 0.2s; }
.navbar-links a:hover, .navbar-links a.active { color: var(--clay); }
.navbar-cta { display: flex; align-items: center; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; }
.hamburger span, .bar { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: var(--t); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.mobile-menu { display: none; background: var(--bone); flex-direction: column; gap: 4px; padding: 16px 24px; border-bottom: 1px solid var(--sand); }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: var(--ink-soft); font-weight: 400; padding: 12px 0; border-bottom: 1px solid var(--sand); font-size: 0.95rem; }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--clay); }

/* ---- NAVBAR BRAND ---- */
.navbar-brand { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 1.3rem; color: var(--ink); display: inline-flex; align-items: center; gap: 11px; }
.brand-text { white-space: nowrap; letter-spacing: 0.01em; }
.brand-logo { height: 52px; width: auto; display: block; }
.brand-fit { color: var(--clay); }
.brand-zone { color: var(--ink); }
.brand-by { color: var(--oak); font-size: 0.8em; font-weight: 300; margin-left: 6px; }

/* ---- NAV MENU (desktop) ---- */
.nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-item { position: relative; }
.nav-link { color: var(--ink-soft); font-size: 0.88rem; font-weight: 400; padding: 9px 15px; border-radius: var(--pill); transition: var(--t); display: block; }
.nav-link:hover, .nav-link.active { color: var(--clay); background: var(--clay-tint); }
.has-dropdown .dropdown { display: none; position: absolute; top: calc(100% + 10px); left: 0; background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); box-shadow: var(--shadow-hover); min-width: 214px; padding: 8px 0; z-index: 100; }
/* Transparent bridge across the 10px gap. Without it, a real mouse moving from
   "Programmes" down toward the menu passes through 10px of un-hovered space, so
   :hover drops and the menu closes before you can click Kickstarter etc. */
.has-dropdown .dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.dropdown li a { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: var(--ink-soft); font-size: 0.88rem; transition: var(--t); }
.dropdown li a:hover { background: var(--bone); color: var(--clay); }
.dropdown li a i { color: var(--clay); width: 16px; }
.nav-cta { margin-left: 10px; }

/* ---- HERO (light) ---- */
.hero {
  background: linear-gradient(168deg, var(--cream) 0%, var(--bone) 100%);
  padding: 96px 0 88px; position: relative; overflow: hidden; min-height: 85vh; display: flex; align-items: center;
}
.hero::before {
  content: ''; position: absolute; top: -120px; right: -120px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(140, 74, 50, 0.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.hero-content { position: relative; z-index: 1; }
.hero-badge {
  display: inline-block; background: var(--clay-tint);
  border: 1px solid rgba(140, 74, 50, 0.2); color: var(--clay);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 7px 18px; border-radius: var(--pill); margin-bottom: 28px;
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); color: var(--ink); margin-bottom: 24px; font-weight: 400; }
.hero h1 .accent { color: var(--clay); font-style: italic; }

/* The rotating word cycle was REMOVED. It measured word widths before the
   webfont finished loading, so on a slow/cold load it sized the box with the
   fallback font's metrics and the words collided — which is why it "looked
   broken" to Ramya on mobile data and fine to us on fast wifi. The headline
   is now a static line. */
.hero-sub { font-size: 1.08rem; color: var(--oak); margin-bottom: 40px; max-width: 520px; line-height: 1.8; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
/* Hero buttons carry a full and a short label; the short one only appears below 480px, where
   they sit side by side and the full wording would wrap to three lines. */
.btn-lbl-short { display: none; }
/* ---- PROOF NUMBERS BAND ----
   Was the hero's stats row; moved down into the slot the Client Transformations section left
   behind. Cream (inherits the body) so it sits between the beige problem section and the beige
   video testimonials, keeping the page's cream/beige alternation intact.

   Compact on purpose: four short numbers should read as a divider between two big sections, not
   as a third section competing with them. No border — the beige→cream→beige change already
   separates it, and a hairline just below that edge would read as an orphaned rule. */
.stats-band { padding: 60px 0; }
.sb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.sb-item { text-align: center; }
.sb-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.6rem; font-weight: 500; color: var(--clay); display: inline-block; line-height: 1; }
.sb-plus { color: var(--clay); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.2rem; font-weight: 500; margin-left: 1px; line-height: 1; }
/* Was an inline font-size in the markup; a class so it scales with the number. */
.sb-star { font-size: 1.3rem; margin-left: 5px; }
/* No white-space:nowrap here (the hero row had it). In a quarter-width column
   "Clients Transformed" would force the page to scroll sideways on a phone. */
.sb-label { display: block; margin-top: 10px; font-size: 0.68rem; color: var(--oak); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; }
/* Four across stops being readable well before phone width - go 2x2. */
@media (max-width: 700px) {
  .stats-band { padding: 44px 0; }
  .sb-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .sb-num { font-size: 2.2rem; }
  .sb-plus { font-size: 1.9rem; }
  .sb-star { font-size: 1.15rem; }
  .sb-label { font-size: 0.62rem; letter-spacing: 0.1em; }
}

.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-image-wrapper { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1 / 1.15; display: flex; justify-content: center; align-items: flex-end; }
.hero-glow-blob {
  position: absolute; top: 15%; left: 15%; width: 70%; height: 70%;
  background: rgba(140, 74, 50, 0.16);
  filter: blur(80px); border-radius: 50%; z-index: 0;
  /* pulse-glow animation removed — one animation site-wide (fade-up). */
}
.hero-canvas {
  position: relative; width: 100%; height: 100%; aspect-ratio: 1; max-width: 420px;
  background: radial-gradient(circle at center, rgba(140, 74, 50, 0.08) 0%, rgba(220, 209, 199, 0.32) 60%, transparent 100%);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(140, 74, 50, 0.08), 0 0 60px rgba(58, 52, 45, 0.05);
  border: 1px solid rgba(140, 74, 50, 0.16);
  display: block; z-index: 1;
}

/* Arched photo frame — the elliptical framing convention of this aesthetic */
.hero-photo-frame {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px; aspect-ratio: 4 / 5;
  border-radius: 190px 190px var(--radius) var(--radius);
  overflow: hidden;
  border: 1px solid var(--sand);
  box-shadow: 0 24px 60px rgba(58, 52, 45, 0.14);
  background: var(--bone);
}
.hero-photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}

/* Floating Badges (now light chips on a light hero) */
.floating-badge {
  position: absolute;
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--sand);
  box-shadow: 0 12px 34px rgba(58, 52, 45, 0.1);
  border-radius: var(--radius);
  padding: 11px 17px; display: flex; align-items: center; gap: 12px; z-index: 2;
}
.badge-top-left { top: 12%; left: -40px; }
.badge-bottom-right { bottom: 22%; right: -40px; }
.badge-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--clay); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0;
}
.badge-text { display: flex; flex-direction: column; }
.badge-title { color: var(--ink); font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.badge-sub { color: var(--oak); font-size: 0.66rem; }

/* pulse-glow and float-badge keyframes removed — one animation site-wide. */

/* ---- THE PROBLEM ---- */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.problem-lede { color: var(--oak); font-size: 0.98rem; line-height: 1.85; margin-bottom: 16px; max-width: 46ch; }
.problem-punch { color: var(--ink); font-weight: 600; font-size: 1.02rem; margin-top: 8px; }
.problem-punch em { color: var(--clay); font-style: italic; }
.problem-list {
  list-style: none; background: var(--paper); border: 1px solid var(--sand);
  border-radius: var(--radius); padding: 12px 30px; box-shadow: var(--shadow);
}
.problem-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--sand);
  font-size: 0.93rem; color: var(--ink); line-height: 1.6;
}
.problem-list li:last-child { border-bottom: none; }
.problem-x { color: #9C3B28; flex-shrink: 0; margin-top: 3px; display: flex; }

/* Static cross. The draw-in and hover strike-through were removed — one
   animation site-wide. The inline SVG stays because it is sharper and lighter
   than the icon font it replaced. */
.problem-x .px {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

@media (max-width: 900px) {
  .problem-grid { grid-template-columns: 1fr; gap: 40px; }
  .problem-lede { max-width: none; }
}

/* ---- THE METHOD (five pillars) ---- */
.method-section { background: var(--bone); }  /* beige — keeps tiers(cream) → how-it-works alternating */
.pillar-grid { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 56px; }
.pillar {
  position: relative;
  background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius);
  padding: 40px 22px 34px; text-align: center; transition: var(--t);
  display: flex; flex-direction: column; align-items: center;
}
/* The steps are a real sequence, so they are numbered. */
.pillar-step {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--clay); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 600;
  border: 3px solid var(--cream);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(140, 74, 50, 0.32); }
.pillar-icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--clay-tint); color: var(--clay);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: 20px; transition: var(--t);
}
.pillar:hover .pillar-icon { background: var(--clay); color: var(--white); }
.pillar h3 { font-size: 0.96rem; margin-bottom: 10px; color: var(--ink); }
.pillar p { font-size: 0.82rem; color: var(--oak); line-height: 1.65; }

/* ---- METHOD ICONS (static) ----
   The steam / dumbbell-lift / floating-z / check-draw / breathing animations
   were all REMOVED. They were five separate animation types, and Ramya read
   the floating z's as a bug ("remove stray zz"). The icons stay as clean
   static line-art, inheriting the chip's colour so they still invert on hover. */
.pillar-icon .pi {
  width: 28px; height: 28px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pi-steam line { opacity: 0.55; }   /* steam reads fine standing still */

@media (max-width: 1024px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pillar-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 420px)  { .pillar-grid { grid-template-columns: 1fr; } }

/* ---- GOAL-BASED PROGRAMME CARDS ---- */
.goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.goal-card {
  background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius);
  padding: 34px 30px; transition: var(--t);
  display: flex; flex-direction: column;
}
.goal-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(140, 74, 50, 0.32); }
.goal-icon {
  width: 54px; height: 54px; border-radius: var(--radius-sm);
  background: var(--clay-tint); color: var(--clay);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 22px;
}
.goal-card h3 { font-size: 1.06rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.goal-tagline { color: var(--clay); font-size: 0.9rem; margin-bottom: 24px; }
.goal-label {
  font-family: 'Jost', sans-serif; font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--oak);
  margin-bottom: 12px;
}
.goal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.goal-chips li {
  background: var(--bone); border: 1px solid var(--sand);
  border-radius: var(--pill); padding: 5px 13px;
  font-size: 0.76rem; color: var(--ink-soft);
}
.goal-gets { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }
.goal-gets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.86rem; color: var(--ink); line-height: 1.55;
}
.goal-gets li::before {
  content: '\2713'; color: var(--clay); font-weight: 700;
  font-size: 0.82rem; flex-shrink: 0; margin-top: 2px;
}
.goal-cta { margin-top: auto; align-self: stretch; justify-content: center; }

/* Four-card variant (Ramya's programme list) */
.goal-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ---- PROGRAMME TIERS (homepage: 3 coached levels — "Three levels. One system.") ---- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; margin-top: 48px; }
.tier-card {
  background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius);
  padding: 28px 24px; display: flex; flex-direction: column; transition: var(--t);
}
.tier-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(140,74,50,0.3); }
/* The "most popular" middle card — dark shade so it reads as the hero choice (Ramya's request).
   Text/accents are re-scoped to light values so everything stays legible on the dark ground. */
.tier-featured { border: 2px solid var(--clay); background: var(--deep); }
.tier-featured .tier-step { color: var(--clay-light); }
.tier-featured .tier-name { color: #fff; }
.tier-featured .tier-feats li { color: rgba(255,255,255,0.92); }
.tier-featured .tier-feats li::before { color: var(--clay-light); }
.tier-featured .tier-amount { color: #fff; }
.tier-featured .tier-per, .tier-featured .tier-sub { color: rgba(255,255,255,0.75); }
.tier-featured .tier-save { color: #8fce9b; }
.tier-featured .tier-badge { background: var(--clay-light); color: #2b211c; }
.tier-featured .btn-primary { background: var(--cream); border-color: var(--cream); color: var(--deep); }
.tier-featured .btn-primary:hover { background: #fff; border-color: #fff; color: var(--deep); }
.tier-badge { align-self: flex-start; background: var(--clay); color: var(--white); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--pill); margin-bottom: 12px; }
.tier-step { font-family: 'Jost', sans-serif; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oak); }
.tier-name { font-size: 1.2rem; margin: 6px 0 16px; color: var(--ink); }
.tier-feats { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; flex: 1; }
.tier-feats li { position: relative; padding-left: 24px; font-size: 0.88rem; color: var(--ink); line-height: 1.5; }
.tier-feats li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--clay); font-weight: 700; }
.tier-feats li strong { font-weight: 600; }
.tier-price { display: flex; align-items: baseline; gap: 3px; }
.tier-amount { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.2rem; font-weight: 500; color: var(--ink); line-height: 1; }
.tier-per { font-size: 0.8rem; color: var(--oak); }
.tier-sub { font-size: 0.8rem; color: var(--oak); margin: 5px 0 18px; }
.tier-save { color: var(--sage); font-weight: 500; }
.tier-cta { width: 100%; justify-content: center; margin-top: auto; }
.tier-note-line { text-align: center; font-size: 0.86rem; color: var(--oak); margin-top: 24px; font-style: italic; }
.selfguided-note {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  background: var(--bone); border: 1px solid var(--sand); border-radius: var(--radius);
  padding: 20px 26px; margin-top: 28px; font-size: 0.92rem; color: var(--ink); text-align: center;
}
.selfguided-note strong { color: var(--clay); font-weight: 600; }
.selfguided-note .btn { flex-shrink: 0; }

@media (max-width: 900px) {
  .tier-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* Quiz nudge bar (programmes page, under the tiers) */
.quiz-nudge {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  background: var(--clay-tint); border: 1px solid var(--sand); border-radius: var(--radius);
  padding: 18px 26px; margin-top: 26px; font-size: 0.92rem; color: var(--ink); text-align: center;
}
.quiz-nudge .btn { flex-shrink: 0; }

/* ---- SELF-GUIDED ADD-ON CARDS (programmes page) ---- */
.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.addon-card {
  background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius);
  padding: 26px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: var(--t);
}
.addon-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(140,74,50,0.3); }
.addon-badge { background: var(--clay-tint); color: var(--clay); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 12px; border-radius: var(--pill); margin-bottom: 14px; }
.addon-name { font-size: 1.08rem; color: var(--ink); margin-bottom: 6px; }
.addon-tag { font-size: 0.85rem; color: var(--oak); margin-bottom: 18px; }
.addon-price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 22px; }
.addon-amount { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.9rem; font-weight: 500; color: var(--ink); line-height: 1; }
.addon-cta { width: 100%; justify-content: center; margin-top: auto; }
@media (max-width: 800px) { .addon-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; } }

/* "This is a self-guided add-on" note on the 3 add-on detail pages */
.addon-link-note {
  margin-top: 28px; padding: 14px 18px; background: var(--clay-tint); border-radius: var(--radius);
  font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6;
}
.addon-link-note i { color: var(--clay); margin-right: 6px; }
.addon-link-note a { color: var(--clay); font-weight: 500; text-decoration: none; white-space: nowrap; }
.addon-link-note a:hover { text-decoration: underline; }

/* ---- COMPARISON TABLE (all 6 plans; premium, horizontal-scroll + sticky feature column on mobile) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.compare-hint { display: none; text-align: center; color: var(--oak); font-size: 0.8rem; margin: 0 0 14px; }
.compare-hint i { color: var(--clay); margin-right: 6px; }
.compare-wrap {
  max-width: 940px; margin: 44px auto 0; background: var(--paper);
  border: 1px solid var(--sand); border-radius: var(--radius);
  overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow);
}
.compare-table { width: 100%; min-width: 700px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 15px 12px; text-align: center; border-bottom: 1px solid var(--sand); }
.compare-table tbody tr:last-child td { border-bottom: none; }

/* header — plan name + small price, featured column gets the clay cap + badge */
.compare-table thead th { vertical-align: bottom; padding: 16px 12px 15px; }
.compare-plan { display: block; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 0.86rem; color: var(--ink); line-height: 1.25; }
.compare-plan-price { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; color: var(--clay); margin-top: 3px; }
.compare-poplabel { display: inline-block; background: var(--white); color: var(--clay); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--pill); margin-bottom: 8px; }
.compare-table thead th.compare-pop { background: var(--clay); border-radius: 12px 12px 0 0; }
.compare-table thead th.compare-pop .compare-plan { color: var(--white); }
.compare-table thead th.compare-pop .compare-plan-price { color: #F4E3D6; }

/* feature label column — sticky so it stays visible while scrolling */
.compare-feat { position: sticky; left: 0; z-index: 2; text-align: left !important; background: var(--paper); font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.86rem; color: var(--ink); min-width: 162px; }

/* yes = a clean clay checkmark (no heavy disc); no = quiet dash */
.compare-yes { color: var(--clay); font-size: 1.02rem; }
.compare-no { color: #756658; font-size: 1.1rem; line-height: 1; }  /* AA on cream + tint (4.76/4.67), still quiet vs the clay ticks */

/* featured Transformation column — tinted, hairline-bordered, rounded foot */
.compare-pop { background: #F5EADF; box-shadow: inset 1px 0 0 rgba(122,74,50,0.16), inset -1px 0 0 rgba(122,74,50,0.16); }
.compare-cta-row .compare-pop { border-radius: 0 0 12px 12px; box-shadow: inset 1px -1px 0 rgba(122,74,50,0.16), inset -1px 0 0 rgba(122,74,50,0.16); }

/* row hover (feature cell kept opaque for the sticky overlap) */
.compare-table tbody tr:hover .compare-c:not(.compare-pop) { background: rgba(58,46,40,0.025); }
.compare-table tbody tr:hover .compare-feat { background: #F3ECE1; }

.compare-cta-row td { padding-top: 8px; padding-bottom: 18px; }
.compare-view { display: inline-block; border: 1px solid var(--clay); color: var(--clay); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--pill); transition: var(--t); }
.compare-view:hover { background: var(--clay); color: var(--white); }
.compare-view-pop { background: var(--clay); color: var(--white); }
.compare-view-pop:hover { background: var(--clay-dark); border-color: var(--clay-dark); }

@media (max-width: 640px) {
  .compare-hint { display: block; }
  .compare-table { min-width: 580px; }
  .compare-table th, .compare-table td { padding: 13px 9px; }
  .compare-plan { font-size: 0.8rem; }
  .compare-feat { min-width: 124px; font-size: 0.8rem; }
  .compare-yes { font-size: 0.95rem; }
}

@media (max-width: 1024px) {
  .goal-grid { grid-template-columns: repeat(2, 1fr); }
  .goal-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px)  {
  .goal-grid { grid-template-columns: 1fr; }
  .goal-grid-4 { grid-template-columns: 1fr; }
}

/* Client-supplied intro paragraphs (How It Works + Which Programme) */
.method-intro, .program-intro {
  max-width: 760px; margin: 28px auto 0; text-align: center;
}
.method-intro p, .program-intro p {
  color: var(--oak); font-size: 1rem; line-height: 1.85; margin-bottom: 16px;
}
.method-intro p:last-child, .program-intro p:last-child { margin-bottom: 0; }
.method-intro strong { color: var(--clay); font-weight: 600; }
.method-intro + .pillar-grid { margin-top: 52px; }
.program-intro + .goal-grid { margin-top: 52px; }


/* ---- WHY FITZONE FEATURE CARDS (on the espresso band) ---- */
.why-lede { color: rgba(255,255,255,0.72); font-size: 0.96rem; line-height: 1.85; margin-bottom: 16px; max-width: 48ch; }
.why-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.why-feature {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius); padding: 28px 24px; transition: var(--t);
}
.why-feature:hover { background: rgba(255,255,255,0.07); border-color: rgba(217,138,99,0.42); transform: translateY(-4px); }
.why-feature h4 { color: var(--cream); font-size: 0.98rem; margin-bottom: 10px; }
.why-feature p { color: var(--sand); font-size: 0.84rem; line-height: 1.7; }

@media (max-width: 560px) { .why-feature-grid { grid-template-columns: 1fr; } }

/* ---- PROGRAMME CARDS ---- */
.programme-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 48px; }
.programme-card {
  grid-column: span 2;
  background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius);
  padding: 40px 30px; text-align: center; transition: var(--t);
  display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden;
}
.programme-card.featured { border: 1px solid var(--clay); box-shadow: 0 10px 32px rgba(140, 74, 50, 0.09); }
.programme-card.featured::after {
  content: 'MOST POPULAR'; position: absolute; top: 15px; right: -34px;
  background: var(--clay); color: var(--white);
  font-size: 0.58rem; font-weight: 600; padding: 5px 34px;
  transform: rotate(45deg); letter-spacing: 0.1em;
}
.programme-card:nth-child(4), .programme-card:nth-child(5) { grid-column: span 3; }
.programme-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: rgba(140, 74, 50, 0.32); }
.programme-card-icon {
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--clay-tint); color: var(--clay);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 24px; transition: var(--t);
}
.programme-card-icon i { font-size: 1.6rem; }
.programme-card:hover .programme-card-icon { background: var(--clay); color: var(--white); transform: scale(1.06); }
.programme-card h3 { font-size: 1.1rem; margin-bottom: 12px; color: var(--ink); }
.programme-card p { font-size: 0.88rem; color: var(--oak); margin-bottom: 26px; line-height: 1.7; flex-grow: 1; }

/* ---- STATS (inside dark band) ---- */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 48px; }
.stat-box {
  padding: 44px 20px; text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius); transition: var(--t);
}
.stat-box:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(217, 138, 99, 0.42); transform: translateY(-5px); }
.stat-number { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.4rem,4vw,3.4rem); font-weight: 500; color: var(--clay-light); display: block; margin-bottom: 10px; line-height: 1; }
.stat-label { font-size: 0.8rem; color: var(--sand); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- FOLLOW US CARDS (replaced the Instagram post feed) ----
   Rendered from lib/social.js, so the card count changes as platforms are added. The layout has
   to hold up at 2 cards AND at 5 — hence auto-fit plus a max-width cap: without the cap, two
   cards in the 1140px container stretch to ~560px each and read as empty billboards. */
.social-grid {
  display: grid;
  /* Cap the TRACK, do not let it stretch. With 1fr, two cards in the container blew out to 440px
     each and read as empty billboards. minmax(190px, 220px) + centring keeps a card card-sized
     whether there are two platforms or five; 960px fits four across on one row.  */
  grid-template-columns: repeat(auto-fit, minmax(190px, 220px));
  justify-content: center;
  gap: 20px;
  max-width: 960px;
  margin: 48px auto 0;
}
.social-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 32px 20px 26px;
  background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius);
  box-shadow: var(--shadow); text-decoration: none; transition: var(--t);
}
.social-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: rgba(140,74,50,0.3); }
.social-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sc-icon { font-size: 2.3rem; line-height: 1; margin-bottom: 8px; }
.sc-name { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.sc-handle { font-size: 0.84rem; color: var(--oak); word-break: break-word; }
.sc-cta {
  margin-top: 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay);
}
.social-card:hover .sc-cta { color: var(--clay-dark); }

/* Brand colours on the LOGO ONLY — that is what makes a platform recognisable at a glance.
   Card text stays on --ink / --oak, so nothing brand-coloured is ever load-bearing for contrast.
   Precedent: --green-wa is already documented in the palette as the one brand-colour exception. */
.sc-instagram .sc-icon { color: #C13584; }
.sc-youtube   .sc-icon { color: #C4302B; }   /* darkened from #FF0000 to sit on cream */
.sc-facebook  .sc-icon { color: #1877F2; }
.sc-whatsapp  .sc-icon { color: #128C4A; }   /* darker than --green-wa, which is a dark-bg token */

/* Phone: 2-up, so four platforms read as a neat 2x2 instead of a long column. */
@media (max-width: 600px) {
  .social-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 34px; }
  .social-card { padding: 24px 12px 20px; gap: 4px; }
  .sc-icon { font-size: 1.9rem; margin-bottom: 6px; }
  .sc-name { font-size: 0.94rem; }
  .sc-handle { font-size: 0.76rem; }
  .sc-cta { margin-top: 9px; font-size: 0.68rem; }
}

/* ---- TRANSFORMATIONS ---- */
.transform-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 48px; }
.transform-card { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--sand); transition: var(--t); }
.transform-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: rgba(140, 74, 50, 0.3); }
.transform-images { display: grid; grid-template-columns: 1fr 1fr; height: 220px; }
.transform-img-box { background: var(--bone); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.transform-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.transform-card:hover .transform-img-box img { transform: scale(1.05); }
.transform-img-label {
  position: absolute; top: 12px; left: 12px; background: rgba(43, 38, 32, 0.82); backdrop-filter: blur(4px); color: var(--cream);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 4px; z-index: 1;
}
.transform-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--sand) 0%, #C3B5A6 100%); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: rgba(58, 52, 45, 0.22); border-right: 1px solid rgba(58,52,45,0.06); }
.transform-img-placeholder i { font-size: 3rem; color: rgba(58, 52, 45, 0.22); }
/* Single before→after composite (Ramya's real photos). `contain` guarantees the
   baked-in "65 Kgs / 60 Kgs" labels are never cropped; the bone frame turns the
   letterbox into an intentional matte. No hover zoom -- these are proof, not decor. */
.transform-photo { aspect-ratio: 3 / 2; background: var(--bone); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.transform-photo img { width: 100%; height: 100%; object-fit: contain; }

.transform-info { padding: 22px 24px; background: var(--paper); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.transform-info h4 { font-size: 1.02rem; margin: 0; color: var(--ink); }
.transform-info p, .transform-result { font-size: 0.85rem; color: var(--oak); line-height: 1.6; margin: 0; }
.transform-result { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; color: var(--ink); }
.transform-badge { display: inline-block; background: var(--clay-tint); color: var(--clay); font-size: 0.72rem; font-weight: 500; padding: 5px 14px; border-radius: var(--pill); margin: 0; letter-spacing: 0.04em; }

/* Real member VIDEO cards mixed into the transformations grid */
.video-card .tv-media { aspect-ratio: 3 / 2; background: #17110d; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.video-card .tv-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.tv-cap { color: var(--oak); }

/* Full-width CTA bar dropped into the middle of the grid */
.transform-cta-bar {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  background: var(--bone); border: 1px solid var(--sand); border-radius: var(--radius);
  padding: 22px 28px; text-align: center; color: var(--ink); font-size: 1rem;
}
.transform-cta-bar strong { color: var(--clay); }
.transform-cta-bar .btn { flex-shrink: 0; }

/* ---- COOKIE CONSENT BANNER ---- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000; background: var(--deep); color: var(--cream); border-top: 1px solid rgba(255,255,255,0.12); box-shadow: 0 -6px 24px rgba(0,0,0,0.20); }
.consent-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 14px 24px; flex-wrap: wrap; }
.consent-text { flex: 1; min-width: 240px; margin: 0; font-size: 0.86rem; line-height: 1.55; color: rgba(255,255,255,0.86); }
.consent-text a { color: var(--clay-light); text-decoration: underline; }
.consent-btns { display: flex; gap: 10px; flex-shrink: 0; }
.consent-decline { background: transparent; border: 1px solid rgba(255,255,255,0.4); color: var(--cream); }
.consent-decline:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.6); }
@media (max-width: 560px) {
  .consent-inner { padding: 13px 16px; gap: 12px; }
  .consent-btns { width: 100%; }
  .consent-btns .btn { flex: 1; justify-content: center; }
}

/* ---- TRANSFORMATIONS: framing, stat band, woven quotes, closing ---- */
.proof-band { background: var(--bone); padding: 30px 0; border-bottom: 1px solid var(--sand); }
.proof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.proof-stat { padding: 6px; }
.proof-num { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 500; color: var(--clay); line-height: 1; }
.proof-lbl { display: block; margin-top: 7px; font-family: 'Jost', sans-serif; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--oak); }
@media (max-width: 560px) { .proof-stats { grid-template-columns: 1fr 1fr; gap: 24px 12px; } }

.proof-quote { grid-column: 1 / -1; text-align: center; background: var(--deep); color: var(--cream); border-radius: var(--radius); padding: 34px 40px; margin: 6px 0; }
.proof-quote > i { color: var(--clay-light); font-size: 1.35rem; margin-bottom: 12px; display: block; }
.proof-quote p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-style: italic; line-height: 1.45; max-width: 60ch; margin: 0 auto 14px; color: #fff; }
.proof-quote-author { font-family: 'Jost', sans-serif; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--clay-light); }

.proof-close { text-align: center; max-width: 620px; margin: 64px auto 0; }
.proof-close h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--ink); margin-bottom: 14px; }
.proof-close p { color: var(--oak); line-height: 1.7; margin-bottom: 26px; }
.proof-close-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) { .proof-close-btns { flex-direction: column; } .proof-close-btns .btn { width: 100%; justify-content: center; } }

/* ---- FAQ ACCORDION (native <details>, zero-JS) ---- */
.faq-list { max-width: 760px; margin: 48px auto 0; }
.faq-item { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; transition: border-color var(--t); }
.faq-item[open] { border-color: rgba(140, 74, 50, 0.3); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.98rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }   /* hide default triangle (Safari) */
.faq-item summary:hover, .faq-item[open] summary { color: var(--clay); }
.faq-chevron { color: var(--clay); font-size: 0.8rem; flex-shrink: 0; transition: transform 0.25s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 22px 20px; }
.faq-answer p { color: var(--oak); font-size: 0.92rem; line-height: 1.7; margin: 0; max-width: none; }

/* Full /faq page: centered filter + category groups */
.faq-filter { justify-content: center; }
.faq-page-list { max-width: 760px; margin: 0 auto; }
.faq-group { margin-bottom: 40px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title { font-family: 'Jost', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--clay); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--sand); letter-spacing: 0.02em; }

/* ---- LEGAL PAGES (/policies, /privacy) — plain, footer-only ---- */
.legal-head { padding: 64px 0 4px; text-align: center; }
.legal-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--ink); font-weight: 400; }
.legal-updated { color: var(--oak); font-size: 0.85rem; margin-top: 10px; }
.legal-page { max-width: 760px; margin: 0 auto; }
.legal-banner { background: var(--clay-tint); border-left: 3px solid var(--clay); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 18px; color: var(--ink); font-size: 0.95rem; line-height: 1.6; margin-bottom: 26px; }
.legal-intro { color: var(--oak); font-size: 0.98rem; line-height: 1.75; margin-bottom: 28px; }
.legal-jump { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 40px; font-size: 0.85rem; line-height: 1.9; }
.legal-jump-label { color: var(--oak); font-weight: 500; margin-right: 6px; }
.legal-jump a { color: var(--clay); }
.legal-jump a:not(:last-child)::after { content: ' · '; color: var(--sand-strong); }
.legal-section { margin-bottom: 30px; scroll-margin-top: 100px; }
.legal-section h2 { font-family: 'Jost', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--clay); margin-bottom: 12px; }
.legal-section ul { padding-left: 0; list-style: none; margin: 0; }
.legal-section li { position: relative; padding-left: 20px; margin-bottom: 10px; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.65; }
.legal-section li::before { content: '\2014'; position: absolute; left: 0; color: var(--sand-strong); }
.legal-help { margin-top: 44px; padding: 18px 22px; background: var(--bone); border-radius: var(--radius); text-align: center; font-size: 0.92rem; color: var(--oak); }
.legal-help a { color: var(--clay); font-weight: 500; }

/* ---- ABOUT: MEET THE TEAM ---- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.team-card { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); padding: 28px 24px; text-align: center; transition: var(--t); }
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(140,74,50,0.3); }
.team-card-lead { border: 2px solid var(--clay); }
.team-photo { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; background: var(--bone); }
/* Team shots are full/half-body portraits, so a centred crop lands on the torso.
   Bias the crop toward the top so the FACE fills the circle. */
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.team-photo-placeholder { display: flex; align-items: center; justify-content: center; color: var(--sand-strong); font-size: 1.6rem; }
.team-card h4 { font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; }
.team-role { display: block; font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); margin-bottom: 8px; }
.team-bio { font-size: 0.85rem; color: var(--oak); line-height: 1.55; margin: 0; }
.team-group-photo { margin-top: 26px; aspect-ratio: 24 / 7; border-radius: var(--radius); background: var(--bone); border: 1px dashed var(--sand-strong); flex-direction: column; gap: 10px; font-size: 1.8rem; }
.team-group-photo span { font-size: 0.82rem; color: var(--oak); }

/* ---- ABOUT: WHAT MEMBERS SAY ---- */
.about-quote-block { display: flex; gap: 36px; align-items: center; max-width: 960px; margin: 0 auto; }
.about-quote-photo { flex: 0 0 240px; }
.about-quote-photo img { width: 100%; border-radius: var(--radius); display: block; }
.about-quote-body h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink); margin: 8px 0 18px; font-weight: 400; }
.about-quote { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--clay); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.4rem; font-style: italic; color: var(--ink); line-height: 1.5; }
.about-quote cite { display: block; margin-top: 12px; font-family: 'Jost', sans-serif; font-size: 0.85rem; font-style: normal; color: var(--oak); }
@media (max-width: 820px) {
  .team-grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
  .team-group-photo { aspect-ratio: 16 / 9; }
  .about-quote-block { flex-direction: column; text-align: center; }
  .about-quote-photo { flex-basis: auto; max-width: 260px; }
  .about-quote { border-left: none; padding-left: 0; }
}

/* ---- "A DAY WITH FITZONE" TIMELINE ---- */
.day-timeline { list-style: none; display: flex; justify-content: space-between; gap: 12px; margin: 52px auto 0; max-width: 980px; position: relative; padding: 0; }
.day-timeline::before { content: ''; position: absolute; top: 50px; left: 8%; right: 8%; height: 2px; background: var(--sand-strong); z-index: 0; }
.day-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
.day-time { font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--clay); margin-bottom: 12px; }
.day-dot { width: 48px; height: 48px; border-radius: 50%; background: var(--clay); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: 12px; box-shadow: 0 0 0 5px var(--bone); }
.day-label { font-size: 0.82rem; color: var(--ink); line-height: 1.4; max-width: 130px; }
@media (max-width: 760px) {
  .day-timeline { flex-direction: column; gap: 20px; max-width: 320px; }
  .day-timeline::before { display: none; }
  .day-step { flex-direction: row; text-align: left; gap: 14px; align-items: center; }
  .day-time { margin: 0; min-width: 64px; }
  .day-dot { margin: 0; flex-shrink: 0; box-shadow: none; }
  .day-label { max-width: none; }
}

/* ---- 12-WEEK JOURNEY MILESTONES ---- */
.journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; }
.journey-step { text-align: center; padding: 0 8px; }
.journey-week { display: inline-block; font-family: 'Jost', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); background: var(--clay-tint); padding: 4px 13px; border-radius: var(--pill); margin-bottom: 16px; }
.journey-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--paper); border: 1px solid var(--sand); color: var(--clay); font-size: 1.3rem; margin: 0 auto 14px; }
.journey-text { font-size: 0.88rem; color: var(--oak); line-height: 1.55; max-width: 200px; margin: 0 auto; }
@media (max-width: 760px) { .journey-grid { grid-template-columns: 1fr 1fr; gap: 30px 12px; } }
@media (max-width: 420px) { .journey-grid { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; } }

/* ---- BLOG LISTING ---- */
.blog-filter { justify-content: center; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); overflow: hidden; transition: var(--t); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(140,74,50,0.3); }
.blog-card-link { display: block; height: 100%; }
.blog-cover { aspect-ratio: 3 / 1; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: rgba(255,255,255,0.9); }
.blog-cover-nutrition { background: linear-gradient(135deg, #7a4a32, #653C28); }
.blog-cover-workouts { background: linear-gradient(135deg, #5A4237, #3E2C24); }
.blog-cover-pcos { background: linear-gradient(135deg, #9E573C, #713B28); }
.blog-card-body { padding: 22px 24px 26px; }
.blog-cat-badge { display: inline-block; background: var(--clay-tint); color: var(--clay); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--pill); margin-bottom: 12px; }
.blog-card-body h3 { font-size: 1.1rem; color: var(--ink); line-height: 1.35; margin-bottom: 10px; }
.blog-excerpt { font-size: 0.88rem; color: var(--oak); line-height: 1.6; margin-bottom: 16px; }
.blog-read { font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; color: var(--clay); letter-spacing: 0.03em; }
.blog-read i { font-size: 0.72rem; margin-left: 4px; transition: transform var(--t); }
.blog-card:hover .blog-read i { transform: translateX(4px); }

/* ---- BLOG ARTICLE ---- */
.article-hero h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.article-meta { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-top: 14px; }
.article-body { max-width: 65ch; margin: 0 auto; }
.article-body p { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.8; margin-bottom: 22px; }
.article-body h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; font-weight: 500; color: var(--ink); margin: 36px 0 14px; }
.article-body blockquote { margin: 30px 0; padding: 18px 24px; background: var(--clay-tint); border-left: 3px solid var(--clay); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; font-style: italic; color: var(--ink); line-height: 1.5; }
.article-body em { font-style: italic; }
.article-cta { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); padding: 26px 30px; }
.article-cta-line { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; color: var(--ink); margin: 0; }
.article-cta .btn { flex-shrink: 0; }
.blog-back { color: var(--oak); font-size: 0.9rem; }
.blog-back:hover { color: var(--clay); }

@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .article-cta { flex-direction: column; text-align: center; } }

/* ---- PROCESS TIMELINE ---- */
.timeline-v2 { position: relative; max-width: 900px; margin: 56px auto 0; padding: 20px 0; }
.timeline-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--sand); transform: translateX(-50%); z-index: 0; }
.timeline-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 64px; position: relative; z-index: 1; width: 100%; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
.timeline-img { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; }
.timeline-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--clay); color: var(--white);
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(140, 74, 50, 0.3);
  border: 4px solid var(--bone); transition: var(--t);
}
.timeline-item:hover .timeline-num { transform: scale(1.08); box-shadow: var(--shadow-glow); }
.timeline-content { width: 44%; background: var(--paper); padding: 34px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--sand); transition: var(--t); }
.timeline-item:hover .timeline-content { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: rgba(140, 74, 50, 0.3); }
.timeline-content h3 { font-size: 1.1rem; margin-bottom: 12px; color: var(--ink); }
.timeline-content p { font-size: 0.88rem; color: var(--oak); line-height: 1.7; }
.timeline-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clay); transition: gap 0.2s; }
.timeline-link:hover { gap: 11px; }

@media (max-width: 768px) {
  .timeline-line { left: 28px; }
  .timeline-item { flex-direction: row !important; margin-bottom: 40px; padding-left: 60px; }
  .timeline-img { left: 28px; transform: translateX(-50%); }
  .timeline-content { width: 100%; padding: 24px; }
  .timeline-num { width: 44px; height: 44px; font-size: 1.2rem; border-width: 3px; }
}

/* ---- TESTIMONIALS ---- */
.testimonial-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-top: 48px; }
/* The section container is .text-center; long quotes must not inherit that. */
.testimonial-card { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); padding: 38px; transition: var(--t); position: relative; overflow: hidden; text-align: left; }
/* Watermark quote glyph — sits above the stars, cropped by overflow:hidden. */
.testimonial-card::before {
  content: '\201C'; position: absolute; top: -30px; left: 22px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 7rem;
  color: rgba(140, 74, 50, 0.09); line-height: 1; font-weight: 600;
  pointer-events: none;
}
.testimonial-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-5px); border-color: rgba(140, 74, 50, 0.3); }
.stars { color: var(--gold); font-size: 0.92rem; margin-bottom: 18px; letter-spacing: 2px; }
.testimonial-text { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.24rem; color: var(--ink); line-height: 1.62; margin-bottom: 24px; position: relative; z-index: 1; }
.testimonial-author { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.author-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--clay); display: flex; align-items: center; justify-content: center; font-family: 'Jost',sans-serif; font-weight: 500; font-size: 1rem; color: var(--white); flex-shrink: 0; }
.author-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.author-result { font-size: 0.74rem; color: var(--clay); font-weight: 400; margin-top: 2px; }
/* The fifth testimonial runs the full width rather than leaving a hole in the grid. */
.testimonial-card.featured { grid-column: 1 / -1; text-align: center; padding: 44px 38px; }
.testimonial-card.featured .testimonial-text { font-size: 1.34rem; max-width: 62ch; margin-left: auto; margin-right: auto; }
.testimonial-card.featured .testimonial-author { justify-content: center; }
.testimonial-card.featured::before { left: 50%; transform: translateX(-50%); }

/* ---- CTA BANNER (clay ground, white text 6.69:1) ---- */
/* The dark band in Ramya's rhythm (cream -> beige -> cream -> DARK -> cream).
   It cannot be the accent band: the re-scoped accent lands at 2.72:1 on
   #7a4a32, so the highlight word would go mushy. On dark it gets 4.84:1. */
/* CTA is the BEIGE band, per Ramya's mockup (#E9DFD0 with brown text). Dark text
   on beige; the italic highlight is clay (6.33:1 on cream/beige). Buttons revert
   to their default light-ground styling (clay filled + outline) since .cta-banner
   is no longer in the dark-surface re-scope list above. */
.cta-banner { background: var(--bone); padding: 96px 0; text-align: center; position: relative; overflow: hidden; }
.cta-banner::before {
  content: ''; position: absolute; top: -50%; left: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(122,74,50,0.06) 0%, transparent 60%);
  pointer-events: none; transform: rotate(-30deg);
}
.cta-banner h2 { font-size: clamp(2.1rem,5vw,3.2rem); color: var(--ink); margin-bottom: 18px; font-weight: 400; position: relative; z-index: 1; }
.cta-banner p { color: var(--oak); font-size: 1.02rem; margin-bottom: 14px; max-width: 620px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.cta-banner .section-label { color: var(--clay); position: relative; z-index: 1; }
.cta-banner .cta-accent { color: var(--clay); font-style: italic; }
.cta-banner .cta-punch { color: var(--ink); font-weight: 600; margin-bottom: 40px; }

/* ---- PAGE HERO (inner pages, espresso) ---- */
.page-hero { background: var(--gradient-dark); padding: 96px 0; color: var(--cream); text-align: center; }
.page-hero h1 { font-size: clamp(2.4rem,4.6vw,3.6rem); margin-bottom: 14px; color: var(--cream); font-weight: 400; }
.page-hero h1 .text-orange { color: var(--clay-light); }
.page-hero p { color: rgba(255,255,255,0.72); max-width: 520px; margin: 0 auto; }

/* ---- PROGRAMME DETAIL PAGES ---- */
.prog-hero { background: var(--gradient-dark); padding: 96px 0 80px; color: var(--cream); }
/* Cream text, not accent. The chip's own accent fill lightens the ground under
   it, which drags the accent down to 3.86:1 -- and no tint level fixes that
   (the accent only has 4.84:1 of headroom on dark to begin with). The accent
   fill + border still carry the brand; the label just has to be cream. 8.99:1. */
.prog-hero .badge { display: inline-block; background: rgba(208,142,104,0.16); color: var(--cream); border: 1px solid rgba(208,142,104,0.42); padding: 6px 18px; border-radius: var(--pill); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 20px; }
.prog-hero h1 { font-size: clamp(2.2rem,5vw,3.4rem); margin-bottom: 16px; color: var(--cream); font-weight: 400; }
.prog-hero h1 .text-orange { color: var(--clay-light); }
.prog-hero p { font-size: 1.04rem; color: rgba(255,255,255,0.74); max-width: 560px; }
.prog-hero .prog-tagline { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; font-style: italic; color: rgba(255,255,255,0.9); max-width: 620px; }
/* Outcome callout + cross-sell line on programme detail pages */
.prog-outcome { margin-top: 24px; padding: 14px 18px; background: var(--clay-tint); border-radius: var(--radius-sm); font-size: 0.92rem; color: var(--ink); line-height: 1.55; }
.prog-outcome-label { font-weight: 600; color: var(--clay); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; margin-right: 8px; }
.prog-crosssell-wrap { padding: 8px 0 44px; text-align: center; }
.prog-crosssell { font-size: 0.92rem; color: var(--oak); margin: 0; }
.prog-crosssell a { color: var(--clay); font-weight: 500; }
.prog-crosssell a:hover { text-decoration: underline; }
.prog-layout { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
.includes-list { list-style: none; }
.includes-list li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--sand); font-size: 0.94rem; }
.includes-list li:last-child { border-bottom: none; }
.check-icon { color: var(--clay); font-size: 1rem; flex-shrink: 0; margin-top: 3px; }
.price-card { background: var(--deep); color: var(--cream); border-radius: var(--radius); padding: 40px 30px; text-align: center; position: sticky; top: 104px; }
.price-card .price-label { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 10px; }
.price-card .price { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 3.2rem; font-weight: 500; color: var(--clay-light); line-height: 1.1; }
.price-card .price-period { font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.price-card .price-value-note { font-size: 0.78rem; color: var(--sage); margin-top: 4px; }
.price-tiers { list-style: none; margin: 20px 0; text-align: left; }
.price-tiers li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.72); font-size: 0.88rem; }
.price-tiers li:last-child { border-bottom: none; }
.price-tiers li i { color: var(--orange); margin-right: 8px; }
.price-save { color: var(--sage); }
.price-card .guarantee { font-size: 0.74rem; color: rgba(255,255,255,0.48); margin-top: 16px; }
.urgency-badge { background: #F3E7D2; border: 1px solid #E2CFAF; color: #6B4A1F; border-radius: var(--radius-sm); padding: 13px 17px; font-size: 0.86rem; font-weight: 500; margin-bottom: 24px; display: flex; align-items: center; gap: 9px; }

/* ---- ABOUT ---- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.about-photo { border-radius: var(--radius-lg); overflow: hidden; max-width: 340px; margin: 0 auto; }
.about-text h2 { font-size: clamp(2rem,3.4vw,2.8rem); margin-bottom: 24px; color: var(--ink); }
.about-text p { color: var(--oak); margin-bottom: 18px; line-height: 1.85; }
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.cert-item { background: var(--bone); border: 1px solid var(--sand); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.83rem; font-weight: 400; color: var(--ink); display: flex; align-items: center; gap: 10px; }

/* ---- WHY ICON ---- */
/* Appears on both the dark band (home) and white cards (about) — use scoped token. */
.why-icon { font-size: 1.6rem; color: var(--orange); margin-bottom: 16px; }

/* ---- FILTER TABS ---- */
.filter-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; }
.filter-tab { padding: 9px 22px; border: 1px solid var(--sand-strong); border-radius: var(--pill); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: var(--t); background: transparent; color: var(--ink); }
.filter-tab:hover, .filter-tab.active { background: var(--clay); border-color: var(--clay); color: var(--white); }

/* ---- BLOG ---- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 28px; }
.blog-card { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--t); }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: rgba(140,74,50,0.28); }
.blog-img { height: 200px; background: linear-gradient(135deg, var(--sand) 0%, #C3B5A6 100%); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; overflow: hidden; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-img i { font-size: 3rem; color: rgba(58, 52, 45, 0.24); }
.blog-body { padding: 24px; }
.blog-tag { display: inline-block; background: var(--clay-tint); color: var(--clay); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 11px; border-radius: 4px; margin-bottom: 12px; }
.blog-card h3 { font-size: 1.02rem; margin-bottom: 10px; line-height: 1.45; color: var(--ink); }
.blog-card p { font-size: 0.85rem; color: var(--oak); margin-bottom: 16px; line-height: 1.7; }
.read-more { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); display: inline-flex; align-items: center; gap: 5px; transition: gap 0.2s; }
.read-more:hover { gap: 10px; }

/* ---- QUIZ ---- */
.quiz-wrapper { max-width: 680px; margin: 0 auto; }

/* ?plan= banner + privacy note + rotating engagement panel */
.quiz-plan-banner { background: var(--clay-tint); border-left: 3px solid var(--clay); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 22px; font-size: 0.9rem; color: var(--ink); }
.quiz-plan-banner strong { color: var(--clay); font-weight: 600; }
.quiz-privacy { font-size: 0.8rem; color: var(--oak); margin: 20px 0 4px; line-height: 1.6; }
.quiz-privacy i { color: var(--clay); margin-right: 5px; }
.quiz-privacy a { color: var(--clay); font-weight: 500; }

.quiz-engage { max-width: 680px; margin: 26px auto 0; }
.quiz-engage-item { display: none; }
.quiz-engage-item.active { display: block; animation: fadeIn 0.4s ease; }
.qe-card { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); padding: 20px 22px; text-align: center; }
.qe-review .qe-stars { color: var(--gold); font-size: 0.82rem; margin-bottom: 10px; letter-spacing: 2px; }
.qe-review p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; color: var(--ink); line-height: 1.5; margin: 0 0 8px; max-width: none; }
.qe-by { font-size: 0.78rem; color: var(--oak); letter-spacing: 0.03em; }
.qe-image { padding: 12px; }
.qe-image img { width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--radius-sm); background: var(--bone); }
.qe-cap { display: block; font-size: 0.82rem; color: var(--oak); margin-top: 10px; }
.qe-cap strong { color: var(--clay); }
.qe-video { padding: 12px; }
.qe-video video { width: 100%; max-height: 300px; border-radius: var(--radius-sm); background: #000; display: block; }
.qe-stats { display: flex; justify-content: space-around; gap: 12px; flex-wrap: wrap; }
.qe-stat { display: flex; flex-direction: column; }
.qe-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; color: var(--clay); line-height: 1; }
.qe-lbl { font-size: 0.72rem; color: var(--oak); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
/* method strip */
.qe-method { display: flex; justify-content: space-around; gap: 10px; flex-wrap: wrap; }
.qe-method-item { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink); max-width: 120px; }
.qe-method-item i { color: var(--clay); font-size: 1.15rem; }
/* instagram card */
.qe-insta { display: flex; align-items: center; gap: 14px; text-align: left; text-decoration: none; transition: var(--t); }
.qe-insta:hover { border-color: rgba(140,74,50,0.3); box-shadow: var(--shadow); }
.qe-insta-icon { font-size: 2rem; color: var(--clay); flex-shrink: 0; }
.qe-insta-handle { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.qe-insta-sub { font-size: 0.82rem; color: var(--oak); margin-top: 2px; }
/* reassurance */
.qe-reassure { display: flex; align-items: center; gap: 14px; text-align: left; }
.qe-reassure i { font-size: 1.8rem; color: var(--clay); flex-shrink: 0; }
.qe-reassure p { font-size: 0.9rem; color: var(--ink); line-height: 1.55; margin: 0; }
.qe-reassure strong { color: var(--clay); }

.quiz-progress { background: var(--sand); border-radius: var(--pill); height: 5px; margin-bottom: 48px; overflow: hidden; }
.quiz-progress-bar { height: 100%; background: var(--clay); border-radius: var(--pill); transition: width 0.4s ease; }
.quiz-step { display: none; animation: fadeIn 0.35s ease; }
.quiz-step.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } }
.quiz-step-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); margin-bottom: 10px; }
.quiz-step h2 { font-size: clamp(1.7rem,3.5vw,2.4rem); margin-bottom: 8px; color: var(--ink); }
.quiz-step .hint { font-size: 0.88rem; color: var(--oak); margin-bottom: 30px; }
.quiz-options { display: grid; gap: 12px; }
.quiz-options.cols-2 { grid-template-columns: 1fr 1fr; }
.quiz-options.cols-3 { grid-template-columns: repeat(3,1fr); }
.quiz-option { display: flex; align-items: center; gap: 15px; padding: 16px 21px; border: 1px solid var(--sand-strong); border-radius: var(--radius-sm); cursor: pointer; transition: var(--t); background: var(--paper); user-select: none; }
.quiz-option:hover { border-color: var(--clay); background: var(--bone); }
/* Selected: filled clay ground + white text + check, unmistakable vs hover */
.quiz-option.selected { border-color: var(--clay); background: var(--clay); box-shadow: 0 6px 16px rgba(140,74,50,0.25); }
.quiz-option.selected .quiz-option-text { color: var(--white); font-weight: 600; }
.quiz-option.selected .quiz-option-sub { color: rgba(255,255,255,0.82); }
.quiz-option.selected .quiz-option-emoji { color: var(--white); }
.quiz-option.selected::after { content: '\2713'; margin-left: auto; color: var(--white); font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.quiz-option.large.selected::after { position: absolute; top: 12px; right: 14px; margin: 0; }
.quiz-option.large { position: relative; }
.quiz-option input[type="checkbox"], .quiz-option input[type="radio"] { display: none; }
.quiz-option-emoji { font-size: 1.4rem; flex-shrink: 0; color: var(--clay); }
.quiz-option-text { font-weight: 400; font-size: 0.92rem; color: var(--ink); }
.quiz-option-sub { font-size: 0.77rem; color: var(--oak); margin-top: 2px; }
.quiz-option.large { flex-direction: column; text-align: center; padding: 30px 20px; justify-content: center; }
.quiz-option.large .quiz-option-emoji { font-size: 2.6rem; margin-bottom: 10px; }
.quiz-option.large .quiz-option-text { font-size: 1.02rem; }
.quiz-age-input { width: 100%; padding: 20px; border: 1px solid var(--sand-strong); border-radius: var(--radius-sm); font-size: 2.2rem; font-family: 'Cormorant Garamond',Georgia,serif; font-weight: 500; text-align: center; color: var(--ink); background: var(--paper); transition: var(--t); outline: none; }
.quiz-age-input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(140,74,50,0.12); }
.quiz-form-group { margin-bottom: 18px; }
.quiz-form-group label { display: block; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.quiz-form-group input { width: 100%; padding: 14px 17px; border: 1px solid var(--sand-strong); border-radius: var(--radius-sm); font-size: 1rem; color: var(--ink); background: var(--paper); transition: var(--t); outline: none; }
.quiz-form-group input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(140,74,50,0.12); }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }
.quiz-step-counter { font-size: 0.82rem; color: var(--oak); }

/* ---- THANK YOU ---- */
.thankyou-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bone); padding: 60px 24px; }
.thankyou-card { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius-lg); padding: 60px 44px; text-align: center; max-width: 560px; width: 100%; box-shadow: var(--shadow-hover); }
/* scaleIn pop removed — one animation site-wide. */
.checkmark-circle { width: 80px; height: 80px; border-radius: 50%; background: var(--clay); display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; }
.checkmark-circle svg { width: 40px; height: 40px; stroke: var(--white); }
.thankyou-card h1 { font-size: 2.2rem; margin-bottom: 12px; color: var(--ink); }
.thankyou-card .subtitle { color: var(--oak); margin-bottom: 32px; }

/* thank-you: 3-step "what happens next" */
.ty-steps { display: flex; gap: 12px; margin-bottom: 30px; }
.ty-step { flex: 1; background: var(--bone); border-radius: var(--radius); padding: 18px 12px; }
.ty-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--clay); color: var(--white); font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; }
.ty-step p { font-size: 0.82rem; color: var(--ink); line-height: 1.45; margin: 0; }
.ty-cant-wait { color: var(--oak); font-size: 0.9rem; margin-bottom: 12px; }
.ty-while { margin-top: 20px; font-size: 0.85rem; color: var(--oak); }
.ty-while a { color: var(--clay); font-weight: 500; }
.ty-legal { margin-top: 16px; font-size: 0.76rem; color: var(--oak); }
.ty-legal a { color: var(--clay); }
.ty-back { display: inline-block; margin-top: 18px; color: var(--oak); font-size: 0.86rem; }
.ty-back:hover { color: var(--clay); }
@media (max-width: 480px) { .ty-steps { flex-direction: column; } }
.video-placeholder { background: var(--deep); border-radius: var(--radius); aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin-bottom: 28px; color: var(--cream); cursor: pointer; }
.play-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--clay); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(140,74,50,0.45); transition: var(--t); color: var(--white); }
.play-btn:hover { transform: scale(1.1); }
.video-placeholder span { font-size: 0.86rem; color: rgba(255,255,255,0.7); }
.thankyou-notify { background: var(--bone); border: 1px solid var(--sand); border-radius: var(--radius-sm); padding: 18px; margin-bottom: 28px; font-size: 0.89rem; color: var(--oak); }

/* ---- FOOTER (espresso) ---- */
/* --deep-2, not --deep: the CTA band sits directly above it, so the footer
   steps one shade deeper instead of merging into one big dark blob. */
.footer { background: var(--deep-2); color: rgba(255,255,255,0.7); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand .logo { font-family: 'Jost',sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--cream); margin-bottom: 12px; }
.footer-brand .logo span { color: var(--clay-light); }
.footer-logo { margin-bottom: 20px; display: inline-block; background: var(--cream); border-radius: 50%; padding: 10px; line-height: 0; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.footer-logo img { width: 80px; height: 80px; display: block; }
.footer-brand p { font-size: 0.87rem; line-height: 1.8; max-width: 268px; color: rgba(255,255,255,0.62); }
.footer h4 { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); margin-bottom: 20px; }
.footer ul { display: flex; flex-direction: column; gap: 12px; }
.footer ul li a { font-size: 0.87rem; color: rgba(255,255,255,0.62); transition: color 0.2s; }
.footer ul li a:hover { color: var(--clay-light); }
.footer-contact p { font-size: 0.87rem; margin-bottom: 10px; color: rgba(255,255,255,0.62); }
.footer-contact a { color: rgba(255,255,255,0.62); }
.footer-contact a:hover { color: var(--clay-light); }
.social-links { display: flex; gap: 10px; margin-top: 18px; }
.social-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.12); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: var(--t); }
.social-btn:hover { background: var(--clay); border-color: var(--clay); color: var(--white); }
/* 0.38 alpha was 3.44:1 on --deep-2 -- the copyright and the Privacy/Terms links
   failed AA. 0.55 lands at 5.60:1 and still reads as quiet legal text. */
.footer-bottom { padding: 26px 0; text-align: center; font-size: 0.76rem; color: rgba(255,255,255,0.55); }

/* ---- WHATSAPP FLOAT (brand green, unchanged) ---- */
.wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green-wa);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  transition: var(--t); text-decoration: none;
}
.wa-float:hover { transform: scale(1.12); box-shadow: 0 8px 28px rgba(37,211,102,0.55); }
.wa-float svg { width: 28px; height: 28px; fill: var(--white); }

/* ---- MOBILE STICKY ACTION BAR ----
   Desktop keeps the floating WhatsApp bubble. On phones that bubble is replaced
   by this bar, so the primary CTA is always one thumb-reach away. Both are never
   on screen at once -- they would stack in the same corner. */
.sticky-cta { display: none; }

@media (max-width: 700px) {
  .sticky-cta {
    display: flex; gap: 10px; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(244, 237, 227, 0.94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--sand);
  }
  .sticky-cta-main { flex: 1; justify-content: center; min-height: 46px; }
  .sticky-cta-wa {
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: var(--radius-sm);
    background: var(--green-wa); color: var(--white); font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
  }
  .wa-float { display: none; }          /* the bar carries WhatsApp now */
  .footer { padding-bottom: 76px; }     /* clear the bar; nothing hides behind it */

  /* ...except on the quiz page, where the bar is suppressed (below). Without
     this the float would be hidden too and the quiz would have NO WhatsApp
     route at all on a phone. */
  body:has(.quiz-wrapper) .wa-float { display: flex; }
  body:has(.quiz-wrapper) .footer { padding-bottom: 0; }
}

/* On the quiz itself the bar is noise -- the form IS the CTA, and on a short
   screen it would sit on top of the Next button. */
body:has(.quiz-wrapper) .sticky-cta { display: none; }

/* ---- VIDEO TESTIMONIALS (infinite marquee, hover-to-play) ---- */
.vmarquee {
  width: 100vw; max-width: 100%;
  position: relative; left: 50%; transform: translateX(-50%);
  margin-top: 56px;
  padding: 40px 0;                 /* clearance for the 1.12x hover zoom */
  overflow-x: auto; overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.vmarquee::-webkit-scrollbar { display: none; }
.vmarquee:active { cursor: grabbing; }

.vmarquee-track { display: flex; align-items: center; gap: 20px; width: max-content; padding: 0 10px; }

/* The spotlight (dim-all / zoom-the-hovered-one) was removed — another
   animation variety. The marquee keeps only its scroll and hover-to-play,
   which Ramya called the strongest trust asset on the site. */
.vcard {
  flex: 0 0 clamp(230px, 26vw, 270px);
  transition: transform 0.28s ease-out;
}
.vmarquee .vcard:hover { transform: translateY(-4px); z-index: 5; }

.vcard-inner {
  position: relative; aspect-ratio: 9/16;
  border-radius: 22px; overflow: hidden;
  background: #000;
  box-shadow: 0 12px 34px rgba(58,52,45,0.16);
  border: 1px solid var(--sand);
}
.vcard-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20,17,13,0.88) 0%, rgba(20,17,13,0.28) 34%, rgba(20,17,13,0.05) 100%);
}
.vcard-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.45);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.vcard-play svg { margin-left: 3px; }
.vcard.playing .vcard-play,
.vcard.playing .vcard-overlay { opacity: 0; }
.vcard-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 18px; pointer-events: none;
  transition: opacity 0.3s ease;
}
.vcard-meta h3 { color: var(--white); font-family: 'Jost',sans-serif; font-weight: 600; font-size: 1.05rem; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.vcard-meta p { color: rgba(255,255,255,0.82); font-size: 0.8rem; margin-top: 3px; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.vcard.playing .vcard-meta { opacity: 0; }

@media (max-width: 640px) {
  .vmarquee { padding: 24px 0; -webkit-mask-image: none; mask-image: none; }
  .vcard { flex: 0 0 210px; }
  .vmarquee .vcard:hover { transform: none; }  /* no hover on touch */
}

/* ---- INSTAGRAM FEED ---- */

/* ---- PROGRAMMES OVERVIEW CARDS ---- */
.prog-card-overview { background: var(--paper); border: 1px solid var(--sand); border-radius: var(--radius); overflow: hidden; transition: var(--t); }
.prog-card-overview:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: rgba(140,74,50,0.3); }
.prog-card-header { padding: 38px 26px; text-align: center; color: var(--cream); }
.prog-card-icon-box { font-size: 2.4rem; margin-bottom: 14px; color: rgba(255,255,255,0.9); }
.prog-card-header h3 { font-size: 1.24rem; margin-bottom: 8px; color: var(--cream); }
/* 0.72 alpha only reached 3.64:1 on the lightest card header. 0.88 -> 4.60:1. */
.prog-card-header p { font-size: 0.84rem; color: rgba(255,255,255,0.88); }
.prog-card-body { padding: 28px 30px; }
.prog-card-body ul { list-style: none; margin-bottom: 0; }
.prog-card-body ul li { padding: 10px 0; border-bottom: 1px solid var(--sand); font-size: 0.88rem; color: var(--ink); display: flex; align-items: center; gap: 11px; }
.prog-card-body ul li:last-child { border-bottom: none; }
.prog-card-body ul li i { color: var(--clay); font-size: 0.78rem; flex-shrink: 0; }
/* Ramya: "cards in a row must be the same height, buttons on one line."
   The grid equalises the heights; this column + margin-top:auto drops every
   button onto the same baseline no matter how many bullets a card has. */
.prog-card-overview { display: flex; flex-direction: column; }
.prog-card-body { display: flex; flex-direction: column; flex: 1; }
.prog-card-cta { width: 100%; justify-content: center; margin-top: auto; }
.prog-card-body ul { margin-bottom: 20px; }

/* ---- WHY FITZONE GRID ---- */
.why-fitzone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  /* Once stacked, the desktop breathing room just becomes scrolling. */
  .hero h1 { margin-bottom: 16px; }
  .hero-sub { margin-bottom: 22px; }
  .hero-content { display: flex; flex-direction: column; align-items: center; }
  .hero-btns { justify-content: center; }
  .programme-cards { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .prog-layout { grid-template-columns: 1fr; }
  .price-card { position: static; }
  .transform-grid { grid-template-columns: 1fr 1fr; }
  .why-fitzone-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .navbar-links, .navbar-cta { display: none; }
  .hamburger { display: flex; }

  /* Mobile dropdown menu (revealed by the hamburger's .open toggle) */
  .nav-menu {
    display: flex;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-top: 1px solid var(--sand);
    border-bottom: 1px solid var(--sand);
    box-shadow: 0 14px 30px rgba(58,52,45,0.12);
    padding: 8px 0 14px;
    max-height: calc(100vh - 64px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .nav-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-item { width: 100%; }
  .nav-link { padding: 13px 26px; border-radius: 0; }
  .nav-link:hover, .nav-link.active { background: var(--clay-tint); }
  .has-dropdown .dropdown {
    position: static; display: block;
    box-shadow: none; border: none; background: var(--bone);
    min-width: 0; padding: 4px 0; margin: 4px 14px; border-radius: var(--radius-sm);
  }
  .has-dropdown .dropdown::before { content: none; }  /* no gap on the mobile accordion */
  .nav-cta { padding: 14px 26px 4px; }
  .nav-cta .btn { width: 100%; justify-content: center; }

  .hero { padding: 36px 0 40px; min-height: auto; }
  .hero-photo-frame { max-width: 250px; }
  /* The wrapper keeps a 1/1.15 ratio at full container width, so at phone size it reserved ~64px
     of empty space ABOVE a photo that is aligned to its bottom. Hug the photo instead. */
  .hero-image-wrapper { max-width: 250px; aspect-ratio: auto; }
  .floating-badge { padding: 8px 12px; }
  .badge-top-left { left: -10px; top: 8%; }
  .badge-bottom-right { right: -10px; bottom: 12%; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photo { max-width: 280px; margin: 0 auto; }
  .testimonial-grid { grid-template-columns: 1fr; gap: 20px; }
  .quiz-options.cols-2 { grid-template-columns: 1fr; }
  .quiz-options.cols-3 { grid-template-columns: 1fr 1fr; }
  /* Two-column footer on mobile: brand + contact full width, link lists side by side */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; }
  .transform-grid { grid-template-columns: 1fr; gap: 24px; }
  .programme-cards { grid-template-columns: 1fr 1fr; gap: 16px; }
  .page-hero, .prog-hero { padding: 56px 0; }
  .cta-banner { padding: 56px 0; }
}

/* ---- CARD MARQUEE (auto right-to-left scroll) ----
   .mq-scroll  = marquee at ALL widths (homepage reviews).
   .mq-mobile  = marquee only on phones (programmes-page transformations +
                 programme-page results). The /transformations tab is NOT tagged.
   Shared track look for both: */
.mq-scroll, .mq-mobile.mq-on {
  display: flex; flex-wrap: nowrap; grid-template-columns: none;
  align-items: stretch;
  gap: 22px;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 14px 24px 20px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.mq-scroll::-webkit-scrollbar, .mq-mobile.mq-on::-webkit-scrollbar { display: none; }
.mq-scroll > *, .mq-mobile.mq-on > * { flex: 0 0 auto; }
.mq-scroll > .testimonial-card, .mq-mobile.mq-on > .testimonial-card { display: flex; flex-direction: column; }

/* Reviews marquee (all widths) — fixed-width cards, equal height */
.testimonial-grid.mq-scroll { margin-top: 48px; }
.testimonial-grid.mq-scroll > .testimonial-card { width: 400px; max-width: 86vw; }
.testimonial-grid.mq-scroll > .testimonial-card.featured { grid-column: auto; text-align: left; padding: 38px; }
.testimonial-grid.mq-scroll > .testimonial-card.featured .testimonial-text { font-size: 1.05rem; max-width: none; }
.testimonial-grid.mq-scroll > .testimonial-card.featured .testimonial-author { justify-content: flex-start; }
.testimonial-grid.mq-scroll > .testimonial-card.featured::before { left: 38px; transform: none; }
.mq-scroll > .testimonial-card:hover { transform: none; }

@media (max-width: 768px) {
  /* Phone card sizes */
  .transform-grid.mq-mobile.mq-on > .transform-card { width: 76vw; max-width: 300px; }
  .mq-scroll, .mq-mobile.mq-on { gap: 14px; padding: 8px 16px 14px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
  .testimonial-grid.mq-scroll > .testimonial-card { width: 84vw; max-width: 340px; }
  .testimonial-grid.mq-scroll > .testimonial-card.featured { padding: 32px 28px; }
  .testimonial-grid.mq-scroll > .testimonial-card.featured .testimonial-text { font-size: 1rem; }
  .testimonial-grid.mq-scroll > .testimonial-card.featured::before { left: 28px; }
  .mq-mobile.mq-on > .transform-card:hover { transform: none; }
}

/* ---- SWIPE ROW (phone/tablet horizontal card track, NO auto-motion) ----
   For cards people READ and TAP. The .mq-* marquees above drift on their own, which suits
   decorative proof (photos, reviews) but fights a decision: a price you are reading slides
   away and the button moves under your thumb. This one only moves when a finger moves it,
   and snaps card to card.

   900px, not the marquees' 768px, because that is where .tier-grid starts stacking one card
   per row — the exact problem this replaces. */
@media (max-width: 900px) {
  .swipe-row {
    display: flex; flex-wrap: nowrap; grid-template-columns: none;
    align-items: stretch; gap: 14px;
    /* Break out of the container so the track runs edge to edge, as the marquees do. */
    max-width: none;                 /* undoes .tier-grid's 420px cap at this width */
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    padding: 8px 16px 18px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .swipe-row::-webkit-scrollbar { display: none; }
  /* 82vw leaves the next card peeking — that peek is what says "swipe me". The cap stops
     cards becoming absurdly wide as the viewport approaches 900px. */
  .swipe-row > * { flex: 0 0 auto; width: 82vw; max-width: 330px; scroll-snap-align: center; }
  /* Hover lift is meaningless on touch and can stick after a tap. */
  .swipe-row > .tier-card:hover { transform: none; box-shadow: var(--shadow); }
  /* Cards 2 and 3 start outside the viewport horizontally, so reveal-on-scroll would leave
     them dimmed and fade them in mid-swipe. The marquees strip .reveal in JS; this has no JS. */
  .js-reveal .swipe-row > .reveal { opacity: 1; transform: none; }
}

/* ---- HERO BUTTONS: side by side once they stop fitting ----
   The two full-label buttons need 586px. The container only reaches that at roughly a 680px
   viewport, so below it they wrapped into a stack - which is what made the hero long on every
   phone AND on small tablets. Scoping this to 480px was wrong: it left 481-680px still stacked. */
@media (max-width: 680px) {
  .hero-btns { flex-direction: row; width: 100%; gap: 10px; flex-wrap: nowrap; }
  .hero-btns .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 10px; padding-right: 10px; font-size: 0.74rem; letter-spacing: 0.06em; white-space: nowrap; }
  .hero-btns .btn-lbl-full { display: none; }
  .hero-btns .btn-lbl-short { display: inline; }
  /* 1.08rem/1.8 is a desktop reading measure; on a narrow column it becomes five tall lines. */
  .hero-sub { font-size: 1rem; line-height: 1.65; }
}
@media (max-width: 480px) {
  .programme-cards { grid-template-columns: 1fr; }
  .programme-card { grid-column: span 1 !important; }
  .thankyou-card { padding: 40px 24px; }
  .quiz-options.cols-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  /* Was: hide both. That quietly stripped the rating and the certification from phones, which
     is where most of the traffic is. Keep the rating (the stronger proof) over the photo as it
     is on desktop; the second badge is what would not fit beside it. */
  .badge-bottom-right { display: none; }
  .badge-top-left { left: 0; top: 6%; padding: 6px 10px; gap: 7px; }
  .badge-top-left .badge-title { font-size: 0.72rem; }
  .badge-top-left .badge-sub { font-size: 0.62rem; }
  .badge-top-left .badge-icon { width: 26px; height: 26px; font-size: 0.72rem; }
}