/* ==========================================================================
   Home page — page-specific styles only.
   Reuses tokens/classes from style.css (do not redefine brand tokens here).
   ========================================================================== */

/* Utilities --------------------------------------------------------------- */
.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;
}
.section-sub {
  max-width: 620px; margin: 0 auto 8px; color: var(--muted); font-size: 1.08rem;
}

/* ==========================================================================
   Flowing gradient backdrop
   A fixed, full-viewport layer that sits behind all page content. Soft
   brand-toned blobs drift continuously (the "flowing water" feel) while their
   whole layer also slides vertically with scroll — home.js writes the scroll
   fraction (0→1) into --sy. The home sections below are made transparent so
   this backdrop reads as one continuous, living surface; the dark accent bands
   (strip, review card, final CTA) and the white/blush cards float on top of it.
   ========================================================================== */
.flow-bg {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background: var(--warm-cream);
  --sy: 0;
}
/* Each layer carries the scroll-driven parallax; its inner <span> carries the
   independent, continuous drift so the two motions compose cleanly. */
.flow-bg__layer {
  /* Heavily oversized so the large drift + rotation never expose a bare edge. */
  position: absolute; left: -80%; right: -80%; top: -80%; height: 280%;
  will-change: transform;
}
/* The two layers travel in opposing directions as you scroll so the currents
   cross like water: A drifts up-and-left and rotates one way, B drifts
   down-and-right and rotates the other. */
.flow-bg__layer--a {
  transform:
    translate3d(calc(var(--sy) * -12%), calc(var(--sy) * -16%), 0)
    rotate(calc(var(--sy) * 10deg));
}
.flow-bg__layer--b {
  transform:
    translate3d(calc(var(--sy) * 13%), calc(var(--sy) * 20%), 0)
    rotate(calc(var(--sy) * -12deg));
}
.flow-bg__layer > span {
  position: absolute; inset: 0; display: block;
  background-repeat: no-repeat;
  will-change: transform;
}
.flow-bg__layer--a > span {
  background-image:
    radial-gradient(38% 32% at 18% 20%, rgba(201, 125, 138, 0.48), transparent 70%),
    radial-gradient(42% 34% at 82% 40%, rgba(176,  96, 112, 0.38), transparent 72%),
    radial-gradient(48% 40% at 32% 74%, rgba(249, 225, 232, 0.92), transparent 72%),
    radial-gradient(40% 34% at 76% 90%, rgba(201, 125, 138, 0.36), transparent 72%);
  animation: flowA 11s ease-in-out infinite alternate;
}
.flow-bg__layer--b > span {
  background-image:
    radial-gradient(40% 34% at 70% 12%, rgba(249, 241, 243, 0.88), transparent 72%),
    radial-gradient(44% 36% at 20% 48%, rgba(201, 125, 138, 0.34), transparent 74%),
    radial-gradient(38% 32% at 86% 68%, rgba(176,  96, 112, 0.32), transparent 72%);
  animation: flowB 14s ease-in-out infinite alternate;
}
/* A sweeps diagonally down-and-right; B sweeps up-and-left. With `alternate`
   they ping-pong along opposite axes, so the two colour currents always cross. */
@keyframes flowA {
  0%   { transform: translate3d(-16%, -10%, 0) rotate(-9deg) scale(1.12); }
  50%  { transform: translate3d(  6%,  12%, 0) rotate(5deg)  scale(1.22); }
  100% { transform: translate3d( 16%,  -6%, 0) rotate(9deg)  scale(1.14); }
}
@keyframes flowB {
  0%   { transform: translate3d( 17%,   8%, 0) rotate(11deg)  scale(1.18); }
  50%  { transform: translate3d( -6%, -12%, 0) rotate(-6deg)  scale(1.12); }
  100% { transform: translate3d(-17%,   4%, 0) rotate(-11deg) scale(1.20); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-bg__layer { transform: none; }
  .flow-bg__layer > span { animation: none; }
}

/* Reveal-on-scroll (driven by main.js adding .is-visible) ------------------ */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   2. Hero
   ========================================================================== */
.hero {
  position: relative;
  /* Pull the hero up behind the transparent header so the top-right blob's
     clipped edge (from overflow:hidden) lands at the very top of the viewport,
     hidden behind the header — no hard "break line" below the header. */
  margin-top: -100px;
  padding: 120px 0 96px;
  /* Backdrop (.flow-bg) shows through; hero blobs add local depth on top. */
  background: transparent;
  overflow: hidden;
}
.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(60px);
  opacity: .45; z-index: 0; pointer-events: none;
}
.hero-blob--1 { width: 420px; height: 420px; background: var(--dusty-rose); top: -120px; right: -80px; }
.hero-blob--2 { width: 360px; height: 360px; background: var(--blush); bottom: -140px; left: -120px; opacity: .7; }

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero-copy h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 18px; }
.hero-sub { font-size: 1.14rem; color: var(--body); max-width: 520px; margin-bottom: 28px; }

/* Interactive ask bar */
.ask-bar {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid rgba(92, 61, 78, 0.12);
  border-radius: 999px; padding: 8px 8px 8px 22px;
  box-shadow: var(--shadow); max-width: 560px;
}
.ask-bar input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-family: var(--font-body); font-size: 1rem; color: var(--body);
  padding: 10px 0;
}
.ask-bar input:focus { outline: none; }
.ask-bar input::placeholder { color: var(--muted); transition: opacity .25s ease; }
.ask-bar__btn { white-space: nowrap; flex-shrink: 0; padding: 12px 24px; }

.hero-actions { margin-top: 22px; }

/* Relocated impact indicators (below the ask bar) */
.hero-stats {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px 26px; margin-top: 22px;
}
.hero-stat {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid rgba(92, 61, 78, 0.10);
  border-radius: 16px; padding: 12px 20px;
  box-shadow: var(--shadow);
}
.hero-stat__text { display: inline-flex; flex-direction: column; line-height: 1.1; }
.hero-stat__text strong {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.5rem; color: var(--dusty-rose); line-height: 1;
}
.hero-stat__text span { color: var(--muted); font-weight: 500; font-size: .92rem; }

/* Explore button: lifted white pill so it reads as solid, not a flat outline,
   balancing the primary "Ask a Free Question" button. */
.btn-explore {
  background: #fff; border-color: var(--dusty-rose);
  color: var(--deep-plum); font-weight: 700; box-shadow: var(--shadow);
}
.btn-explore:hover {
  background: var(--dusty-rose); color: #fff; border-color: var(--dusty-rose);
  transform: translateY(-2px);
}

/* Hero media + floating chips */
.hero-media { position: relative; }
.hero-photo {
  position: relative; z-index: 1;
  /* Cap the portrait so the hero fits within the first viewport (no scroll). */
  max-width: 420px; margin: 0 auto;
}
.hero-photo img { width: 100%; height: auto; object-fit: contain; display: block; }

.float-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 14px; padding: 11px 16px;
  box-shadow: var(--shadow);
  font-family: var(--font-heading); font-weight: 600;
  font-size: .88rem; line-height: 1.2; color: var(--deep-plum);
  animation: floaty 4.5s ease-in-out infinite;
}
.float-chip .dot {
  width: 9px; height: 9px; border-radius: 50%; background: #4caf7d; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(76, 175, 125, 0.18);
}
.float-chip--1 { top: 5%;   left: -20px;  animation-delay: 0s;   }
.float-chip--2 { top: 17%;  right: -12px; animation-delay: 1.2s; }
.float-chip--3 { top: 50%;  left: -26px;  animation-delay: .6s;  }
.float-chip--4 { bottom: 20%; right: -14px; text-align: center; animation-delay: 1.8s; }

/* Credential badge for the lead specialist */
.hero-cred {
  position: absolute; z-index: 3; left: 50%; bottom: 5%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 3px; max-width: none; white-space: nowrap;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 16px; padding: 12px 26px; box-shadow: var(--shadow-lg);
}
.hero-cred strong {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.05rem; color: var(--deep-plum); line-height: 1.1;
}
/* Post-nominals: small, uppercase, letter-spaced — reads as a credential line */
.hero-cred .hero-cred__quals {
  font-family: var(--font-heading); font-weight: 600;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mid-grey);
}
.hero-cred span { font-size: .82rem; color: var(--dusty-rose); font-weight: 600; line-height: 1.25; }

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

/* Brushstroke highlight under a hero word (kamleshyadav healthcare demo9 ref) */
.brush { position: relative; white-space: nowrap; }
.brush::before {
  content: ""; position: absolute; z-index: -1;
  left: -6px; right: -6px; bottom: 4%; height: 40%;
  background: var(--dusty-rose); opacity: .3;
  border-radius: 45% 55% 52% 48% / 60% 55% 45% 40%;
  transform: rotate(-1.5deg);
}

/* Avatar stack on the families indicator */
.chip-avatars { display: inline-flex; }
.chip-avatars .ava {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff; margin-left: -10px;
  overflow: hidden; background: var(--blush);
}
.chip-avatars .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-avatars .ava:first-child { margin-left: 0; }

/* ==========================================================================
   3. Animated strip
   ========================================================================== */
.strip {
  background: var(--deep-plum);
  padding: 40px 0;
  text-align: center;
}
.strip-line {
  margin: 0;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  color: #f4e9ee;
}
.strip .rotator {
  color: var(--dusty-rose);
  display: inline-block; min-width: 4ch; text-align: left;
  transition: opacity .25s ease;
}

/* ==========================================================================
   4. The Questions Every Parent Has
   — the section pins to the viewport while the question chips zoom in one by
     one with scroll, then zoom back out and release to the next section.
     LM stays large and in focus at the centre. (Scrubbing lives in home.js.)
   ========================================================================== */
.questions { background: transparent; overflow: clip; padding: 0; }

/* Tall wrapper = the scroll runway; inner .q-pin sticks while it plays. */
.q-pin-wrap { position: relative; height: 380vh; }
.q-pin {
  position: sticky; top: 0;
  height: 100vh; min-height: 640px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0;
}
.q-pin .container { position: relative; z-index: 4; }

.questions-orbit {
  position: relative;
  max-width: 1060px; width: 100%; margin: 28px auto 0;
  height: min(66vh, 580px);
}

/* Soft radial glow behind the core */
.orbit-glow {
  position: absolute; top: 50%; left: 50%;
  width: 460px; height: 460px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,125,138,0.26) 0%, rgba(201,125,138,0) 68%);
  z-index: 0;
  animation: glowPulse 5s ease-in-out infinite;
}

/* Big, in-focus LM logo at the centre */
.orbit-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 220px; height: 220px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 2;
  animation: corePulse 4s ease-in-out infinite;
}
.orbit-core__logo { width: 76%; height: 76%; object-fit: contain; display: block; }

.q-chip {
  position: absolute; z-index: 3;   /* above the logo core (z-index 2) */
  background: #fff; color: var(--deep-plum);
  border: 1px solid rgba(92, 61, 78, 0.1);
  border-radius: 999px; padding: 9px 17px;
  font-size: .92rem; font-family: var(--font-heading); font-weight: 500;
  box-shadow: var(--shadow); white-space: nowrap;
  /* home.js scrubs opacity + scale on scroll. */
  opacity: 0; transform: scale(.35);
  will-change: transform, opacity;
}
/* Longer questions ride a touch smaller so the ring stays uncluttered */
.q-chip--sm { font-size: .8rem; padding: 7px 14px; }
/* Accent chips in the brand rose, spread around the ring for rhythm */
.q-chip--expand { background: var(--dusty-rose); color: #fff; border-color: transparent; }

/* Positions are assigned by home.js: 8 fixed slots around the core that the
   22 questions rotate through (fade in / hold / fade out) as you scroll, so
   only ~7-8 chips are ever visible at once. */

@keyframes glowPulse {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1);    }
  50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes corePulse {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(201,125,138,0.35); }
  50%      { box-shadow: var(--shadow-lg), 0 0 0 22px rgba(201,125,138,0); }
}

/* Reduced motion, or no-JS: no pin, just show everything calmly. */
@media (prefers-reduced-motion: reduce) {
  .q-pin-wrap { height: auto; }
  .q-pin { position: static; height: auto; min-height: 0; }
  .orbit-glow, .orbit-core { animation: none; }
  .q-chip { opacity: 1; transform: none; }
}

/* ==========================================================================
   5. What We Offer  —  light section, hover-to-expand panels
   ========================================================================== */
.offer--light { background: transparent; padding: 56px 0; }
.offer-head { margin-bottom: 32px; }
.offer-head .eyebrow { color: var(--dusty-rose); }
.offer--light .offer-head h2 {
  color: var(--deep-plum); margin: 0;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 700; letter-spacing: -0.01em;
}

.offer-grid {
  display: flex; gap: 22px;
  /* Whole section sits around 3/4 of the viewport height */
  min-height: clamp(300px, 46vh, 460px);
}

/* Each panel grows in width when hovered/focused while the siblings shrink.
   One panel is active by default so the row never looks empty at rest. */
.offer-panel {
  position: relative; z-index: 0;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 32px 34px;
  border: 1px solid rgba(92, 61, 78, 0.10);
  border-radius: 10px;
  background: var(--blush);
  cursor: pointer;
  transition: flex-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              border-color var(--transition), box-shadow var(--transition);
}
/* Equal thirds at rest; only the hovered/focused card expands */
.offer-panel:hover,
.offer-panel:focus-visible { flex-grow: 2.6; outline: none; }

/* Illustration fills the card; a scrim keeps the lower text area readable */
.offer-panel__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Photos are pre-cropped 30% off the top; keep faces in the clear zone. */
  object-position: center 35%;
  transition: transform 0.6s ease;
}
.offer-panel:hover .offer-panel__img { transform: scale(1.04); }
/* Dark fade rising from the base so the image reads clearly up top and the
   text sits on a rich, legible gradient — not a washed-out white. */
.offer-panel__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 10, 15, 0) 32%,
    rgba(20, 10, 15, 0.34) 62%,
    rgba(20, 10, 15, 0.74) 100%);
}

/* Brand-rose glow on the active panel (sweeps up from bottom-left) */
.offer-panel__glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 0.55s ease;
  background:
    radial-gradient(115% 90% at 16% 116%, rgba(201, 125, 138, 0.30) 0%,
                    rgba(201, 125, 138, 0.16) 36%, rgba(249, 241, 243, 0.05) 58%, transparent 74%);
}
.offer-panel:hover,
.offer-panel:focus-visible {
  border-color: var(--dusty-rose);
  box-shadow: var(--shadow-lg);
}
.offer-panel:hover .offer-panel__glow,
.offer-panel:focus-visible .offer-panel__glow { opacity: 1; }

/* Plan tag pill (replaces the old S1/S2/S3 step numbers) */
.offer-panel__tag {
  position: absolute; top: 20px; left: 22px; z-index: 3;
  font-family: var(--font-heading); font-weight: 700; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--dusty-rose);
  padding: 7px 15px; border-radius: 999px;
  box-shadow: var(--shadow);
}

.offer-panel__logo {
  position: absolute; top: 18px; right: 20px; z-index: 3;
  width: 42px; height: auto; opacity: .9; pointer-events: none;
}

/* Content is pinned to the bottom of the panel and never shifts vertically as
   the panel expands — only the description reveals as the card widens. */
.offer-panel__content { position: relative; z-index: 3; margin-top: auto; display: flex; flex-direction: column; }
.offer-panel__title {
  font-size: 1.5rem; line-height: 1.28; font-weight: 600;
  color: #fff; margin: 0 0 22px;
  /* Dark halo keeps the white title crisp over lighter parts of the photo */
  text-shadow: 0 1px 8px rgba(20, 10, 15, 0.55);
}

/* Description reveals as the panel expands. The foot keeps a fixed height so the
   divider line and every title stay on the same baseline across panels. */
.offer-panel__foot {
  display: flex; align-items: flex-end; gap: 22px;
  min-height: 56px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.offer-panel__desc {
  margin: 0 0 6px; font-size: .92rem; line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 6px rgba(20, 10, 15, 0.5);
  /* Fixed width + single clipped line when collapsed so it never wraps into a
     tall column. Only opacity animates — the text stays put, no sliding. */
  max-width: 440px; min-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: opacity 0.35s ease;
}
.offer-panel:hover .offer-panel__desc,
.offer-panel:focus-visible .offer-panel__desc {
  opacity: 1; white-space: normal;
}

.offer-cta { margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  .offer-panel, .offer-panel__desc, .offer-panel__glow { transition: none; }
}

/* Stack on small screens; every panel shows its content fully */
@media (max-width: 860px) {
  .offer-grid { flex-direction: column; min-height: 0; }
  .offer-panel { flex: 0 0 auto; min-height: 300px; }
  .offer-panel__foot { min-height: 0; }
  .offer-panel__desc,
  .offer-panel:hover .offer-panel__desc { max-width: 100%; opacity: 1; white-space: normal; }
}

/* ==========================================================================
   6. Impact numbers
   ========================================================================== */
.impact { background: transparent; }
.impact h2 { margin-bottom: 48px; }
.impact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.impact-stat { text-align: center; }
.impact-num {
  display: block;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4rem);
  color: var(--dusty-rose); line-height: 1;
}
.impact-label {
  display: block; margin-top: 10px;
  font-family: var(--font-heading); font-weight: 500;
  color: var(--deep-plum); font-size: 1.05rem;
}

/* ==========================================================================
   7. Reviews  —  fixed spotlight card; arrows/dots only swap the content
   ========================================================================== */
.reviews { background: transparent; }
.reviews-head { max-width: 640px; margin: 0 auto; }
.reviews-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--deep-plum); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: .8rem;
  letter-spacing: .04em; padding: 8px 18px; border-radius: 999px;
  margin-bottom: 18px;
}
.reviews h2 { color: var(--deep-plum); }

.reviews-stage { position: relative; max-width: 780px; margin: 48px auto 0; }

/* Prev/next reviews peek faintly on the sides, mostly hidden behind the main
   card — same plum card, blurred and very dim so they read as "just barely
   there" like the reference. */
.review-side {
  position: absolute; top: 26px; bottom: 42px; width: 62%;
  border-radius: 24px; padding: 34px 40px; overflow: hidden;
  background: linear-gradient(160deg, var(--deep-plum), #472f3c);
  filter: blur(3px); opacity: .18; z-index: 0;
}
.review-side--prev { left: -30%; }
.review-side--next { right: -30%; }
.review-side p {
  margin: 0; font-family: var(--font-display);
  font-size: 1.3rem; line-height: 1.5; color: #fff;
}

/* The card keeps a fixed min-height so swapping quotes never resizes/moves it */
.review-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  min-height: 240px;
  background: linear-gradient(160deg, var(--deep-plum), #472f3c);
  border-radius: 24px; padding: 40px 44px;
  box-shadow: var(--shadow-lg);
}
.review-stars { color: var(--dusty-rose); letter-spacing: 3px; margin-bottom: 18px; }
.review-quote {
  margin: 0 0 28px; font-family: var(--font-display);
  font-size: 1.4rem; line-height: 1.55; color: #fff;
}
.review-author { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.review-avatar {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--dusty-rose), var(--deep-rose));
  color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem;
}
.review-meta { display: flex; flex-direction: column; line-height: 1.35; }
.review-meta strong { color: #fff; font-family: var(--font-heading); }
.review-meta span { color: #e7d4dd; font-size: .9rem; }

/* Cross-fade only the content, not the box */
.review-quote, .review-author { transition: opacity .18s ease; }
.review-card.is-swapping .review-quote,
.review-card.is-swapping .review-author { opacity: 0; }

/* Navigation: arrows either side of a segmented progress indicator */
.reviews-nav {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 28px;
}
.review-arrow {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1px solid rgba(92,61,78,0.14); color: var(--deep-plum);
  font-size: 1.4rem; line-height: 1; box-shadow: var(--shadow);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.review-arrow:hover { background: var(--dusty-rose); color: #fff; transform: translateY(-1px); }
.review-dots { display: flex; align-items: center; gap: 8px; }
.review-dot {
  width: 9px; height: 9px; border-radius: 999px; cursor: pointer; padding: 0;
  background: rgba(92,61,78,0.22); border: 0; transition: all var(--transition);
}
.review-dot.is-active { background: var(--dusty-rose); width: 28px; }

@media (prefers-reduced-motion: reduce) {
  .review-quote, .review-author { transition: none; }
}
@media (max-width: 720px) {
  .review-side { display: none; }
  .review-card { padding: 32px 26px; min-height: 260px; }
  .review-quote { font-size: 1.2rem; }
}

/* ==========================================================================
   8. FAQ (native <details> accordion)
   ========================================================================== */
.faq { background: transparent; }
.faq-inner { max-width: 780px; }
.faq-list { margin-top: 48px; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--card-bg);
  border: 1px solid rgba(92, 61, 78, 0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.faq-item[open] { box-shadow: var(--shadow); background: #fff; }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-heading); font-weight: 600; color: var(--deep-plum);
  font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  position: relative; flex-shrink: 0; width: 18px; height: 18px;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--dusty-rose); transition: transform var(--transition);
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a { padding: 0 24px 22px; }
.faq-a p { margin: 0; color: var(--body); }

/* Chat-style FAQ (framer chatfaq ref): question = left bubble, answer = right accent bubble */
.faq-chat { gap: 18px; }
.faq-chat .faq-item {
  background: transparent; border: 0; border-radius: 0; overflow: visible;
  display: flex; flex-direction: column; gap: 12px;
}
.faq-chat .faq-item[open] { box-shadow: none; background: transparent; }
.faq-chat .faq-item summary {
  align-self: flex-start; max-width: 82%;
  background: #fff; border: 1px solid rgba(92,61,78,0.1);
  border-radius: 20px 20px 20px 4px;   /* speech-bubble tail bottom-left */
  padding: 16px 20px; box-shadow: var(--shadow);
  font-size: 1rem;
}
.faq-chat .faq-a {
  align-self: stretch; max-width: 92%;
  padding: 0; margin: 0 0 0 44px;      /* left spacing → indented chat reply */
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease;
}
.faq-chat .faq-item[open] .faq-a { max-height: 320px; }
.faq-chat .faq-a p {
  background: var(--dusty-rose); color: #fff;
  border-radius: 4px 20px 20px 20px;   /* tail top-left (reply from above) */
  padding: 16px 20px; box-shadow: var(--shadow);
}

/* ==========================================================================
   9. Final CTA
   ========================================================================== */
.final-cta { background: transparent; }
.final-cta__card {
  text-align: center;
  background: linear-gradient(160deg, var(--deep-plum), #472f3c);
  border-radius: var(--radius); padding: 72px 32px;
  box-shadow: var(--shadow-lg);
}
.final-cta__card h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.final-cta__card p { color: #e7d4dd; font-size: 1.1rem; max-width: 560px; margin: 0 auto 28px; text-wrap: balance; }
.final-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.final-cta__card .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.6); }
.final-cta__card .btn-secondary:hover { background: #fff; color: var(--deep-plum); border-color: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-media { max-width: 480px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .hero { padding: 140px 0 72px; }
  .ask-bar { flex-direction: column; align-items: stretch; border-radius: var(--radius); padding: 16px; gap: 12px; }
  .ask-bar input { padding: 8px 4px; text-align: center; }
  .ask-bar__btn { width: 100%; justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-actions .btn-explore { width: 100%; justify-content: center; }

  .impact-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .testimonial-grid { grid-template-columns: 1fr; }

  .hero-stats { flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .hero-stat {
    flex: 1 1 0; min-width: 0; padding: 10px 10px;
    gap: 8px; align-items: center;
  }
  .hero-stat--people { flex: 1.25 1 0; }
  .hero-stat--people .chip-avatars { flex-shrink: 0; }
  .hero-stat--people .chip-avatars .ava { width: 22px; height: 22px; margin-left: -7px; }
  .hero-stat__text { min-width: 0; }
  .hero-stat__text strong { font-size: 1.05rem; }
  .hero-stat__text span {
    font-size: .66rem; white-space: nowrap; line-height: 1.2;
  }

  /* No scroll-pinning on mobile: show a simple centred logo + wrapped chips */
  .q-pin-wrap { height: auto; }
  .q-pin { position: static; height: auto; min-height: 0; padding: 64px 0; }
  .questions-orbit {
    height: auto; width: auto; max-width: none;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;
    gap: 12px; padding: 0 16px;
  }
  .orbit-glow { display: none; }
  .orbit-core {
    position: static; transform: none; margin: 0 auto 20px;
    width: 108px; height: 108px;
  }
  .q-chip, .q-chip--expand {
    position: static; opacity: 1; transform: none;
    top: auto; bottom: auto; left: auto; right: auto;
    max-width: 100%; width: fit-content;
    white-space: normal; word-break: break-word;
    text-align: center; line-height: 1.35;
    font-size: .92rem; padding: 11px 18px;
  }
}

@media (max-width: 420px) {
  .q-chip, .q-chip--expand { font-size: .86rem; padding: 10px 16px; }
}