/**
 * FAQ section — ported from the approved standalone mockup
 * (faq-inspire-wellness.html) essentially unchanged: same colors, fonts,
 * structure, and every animation. Intentionally its OWN pink/rose palette
 * and Noto Serif Thai/Cormorant Garamond pairing, separate from the rest
 * of the site's --gold/--ink CI tokens — that's a confirmed decision, not
 * an oversight, so don't "fix" it to match the theme.
 *
 * Two things could NOT be ported byte-for-byte because the source file
 * was a full standalone page, not a section living inside a longer one:
 *
 * 1. `.blob{position:fixed}` — in the standalone file this pinned the
 *    ambient blobs to the browser viewport (the whole page WAS this
 *    section). Kept as-is here, they'd float over every other section on
 *    scroll instead of staying inside this one. Changed to
 *    `position:absolute` against this section's own `position:relative`
 *    box, so the blobs drift within the FAQ section exactly like before,
 *    just scoped to it instead of the viewport.
 * 2. The original `body{...}` rule (background gradient, centering via
 *    flex, `min-height:100vh`) — can't touch `body` here, the theme
 *    already styles it for the whole site. The background gradient moved
 *    onto `.faq-standalone-section` itself (same visual result). The
 *    flex-centering + min-height:100vh existed only to center the
 *    "stage" card on an otherwise-empty page; replaced with a plain
 *    `margin:0 auto` on `.stage`, since this section now sits mid-page
 *    among others and must not force a full viewport height.
 *
 * Class collision check against the rest of style.css: every selector
 * below is scoped under `.faq-standalone-section` so nothing here can
 * leak out or get overridden. The one real name collision found was
 * `.eyebrow` (the sitewide eyebrow-label class, totally different
 * styling) — renamed to `.faq-eyebrow` in both this file and the markup.
 * `.badge`/`.dots`/etc. the brief flagged as risks turned out fine on
 * inspection (no such exact class names exist elsewhere in the theme,
 * only different compound names like `.philo-badge`), but everything
 * is scoped regardless as belt-and-suspenders.
 */

.faq-standalone-section{
  --cream-0:#fffbfc;
  --cream-1:#ffeef2;
  --cream-2:#ffd9e2;
  --ink:#3a2c33;
  --ink-soft:#6e5058;
  --muted:#b99aa2;
  --gold:#eaa8bb;
  --gold-deep:#dd7f9c;
  --gold-pale:#ffdbe6;
  --line:#f6d9e1;
  --white-glass: rgba(255,255,255,.32);

  position:relative;
  overflow:hidden; /* contains the blobs, see note above */
  background:
    radial-gradient(1100px 600px at 82% -10%, #fff8ec 0%, transparent 60%),
    linear-gradient(180deg, var(--cream-0), #ffe4ec 120%);
  font-family:'IBM Plex Sans Thai', sans-serif;
  color:var(--ink);
  padding:48px 20px;
  /* Bug fix: was relying on .stage's own margin:0 auto alone to
     center it (the original mockup centered via body's flex layout,
     dropped when porting this to a section — see note above). That
     should center it in theory, but real mobile/tablet testing showed
     the whole section leaning to one side. Adding flex centering here
     too is a second, independent centering mechanism layered on top —
     doesn't rely on margin/max-width auto-centering working in
     isolation. flex-wrap so nothing is forced onto one line if .stage
     is ever wider than the section (it isn't normally, but this keeps
     it safe). */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

/* ambient floating blobs */
.faq-standalone-section .blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; z-index:0; pointer-events:none;}
.faq-standalone-section .blob-a{width:380px;height:380px; background:radial-gradient(circle, var(--gold-pale), transparent 70%); top:-120px; left:-120px; animation:faqDriftA 22s ease-in-out infinite;}
.faq-standalone-section .blob-b{width:460px;height:460px; background:radial-gradient(circle, #ffc4d6, transparent 70%); bottom:-160px; right:-120px; animation:faqDriftB 26s ease-in-out infinite;}
@keyframes faqDriftA{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,50px);}}
@keyframes faqDriftB{0%,100%{transform:translate(0,0);}50%{transform:translate(-50px,-30px);}}

.faq-standalone-section .stage{
  position:relative;
  width:100%;
  max-width:1240px;
  margin:0 auto; /* was centered by body's flex layout in the standalone file */
  background:linear-gradient(160deg, #fffdfd 0%, #fff1f4 55%, #ffe2ea 100%);
  border-radius:28px;
  overflow:hidden;
  box-shadow: 0 40px 90px -40px rgba(220,120,150,.28), 0 2px 0 rgba(255,255,255,.6) inset;
  z-index:1;
}

.faq-standalone-section .grid{
  display:grid;
  grid-template-columns: 1.02fr 1fr;
  min-height:740px;
  position:relative;
}

/* ---------- LEFT ---------- */
.faq-standalone-section .copy{
  position:relative;
  padding:76px 56px 190px 64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  z-index:2;
}

/* v20 heading treatment (Aug 2026) — same eyebrow+h1 style as Hero/
   Philosophy/Services/Our Space (see the "HEADING TREATMENT v20"
   block in style.css for the shared rationale), ported here directly
   since faq-section.css is a separate stylesheet. Replaces the old
   rule-line + italic Cormorant Garamond eyebrow and the ink→gold
   shimmer-with-underline h1 accent. Everything else about FAQ (pink
   palette, background blobs, badge, sparkle, tilt parallax) is
   untouched — only the heading changed, per instruction. Uses
   var(--font-th-display)/--heading-rose/--heading-rose-mid/
   --heading-gold/--font-script from style.css's :root — those custom
   properties inherit through the DOM regardless of which stylesheet
   declared them, so no need to redeclare them here. */
.faq-standalone-section .faq-eyebrow{
  font-family:var(--font-script);font-size:26px;font-weight:400;color:var(--heading-rose-mid);
  display:flex;align-items:center;gap:12px;margin-bottom:14px;line-height:1;width:100%;
  opacity:0;transform:translateY(8px);animation:faqEyebrowRise .7s .05s cubic-bezier(.2,.7,.2,1) forwards;
}
.faq-standalone-section .faq-eyebrow::after{
  content:'';flex:1;height:1px;margin-top:6px;
  background:linear-gradient(90deg, rgba(201,164,106,0.55) 0%, rgba(201,164,106,0.16) 55%, transparent 100%);
}
.faq-standalone-section .faq-eyebrow svg{
  width:16px;height:16px;flex-shrink:0;color:var(--heading-gold);position:relative;top:1px;
  transform-origin:50% 85%;animation:faqEyebrowSway 2.8s ease-in-out infinite;
}
@keyframes faqEyebrowSway{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
@keyframes faqEyebrowRise{to{opacity:1;transform:translateY(0);}}

.faq-standalone-section h1{
  font-family:var(--font-th-display);
  font-weight:300;
  font-size:clamp(30px, 3.4vw, 44px);
  line-height:1.62;
  margin:0 0 22px;
  color:var(--heading-rose);
  opacity:0;
  transform:translateY(18px);
  animation:faqRiseIn .85s .3s cubic-bezier(.2,.7,.2,1) forwards;
}
.faq-standalone-section h1 .accent-word{
  font-family:var(--font-th-display);font-weight:500;
  background:linear-gradient(100deg,
    #C77E63 18%, #F0B99A 42%, #FFE9DE 50%, #F0A8B8 58%, #C77E63 82%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;padding:0 .04em;position:relative;
  opacity:0;transform:translateY(10px);
  animation:faqAccentShimmer 3.2s ease-in-out infinite, faqAccentRise .8s .3s cubic-bezier(.2,.7,.2,1) forwards, faqAccentGlow 3.2s ease-in-out infinite;
}
@keyframes faqAccentShimmer{
  0%{background-position:120% 0;}
  100%{background-position:-120% 0;}
}
@keyframes faqAccentRise{to{opacity:1;transform:translateY(0);}}
@keyframes faqAccentGlow{
  0%,100%{filter:drop-shadow(0 0 0px rgba(217,140,168,0));}
  50%{filter:drop-shadow(0 0 7px rgba(217,140,168,0.5));}
}

.faq-standalone-section p.desc{
  font-size:15px;
  line-height:2;
  color:var(--muted);
  max-width:420px;
  margin:0 0 26px;
  font-weight:300;
  opacity:0;
  transform:translateY(16px);
  animation:faqRiseIn .85s .45s cubic-bezier(.2,.7,.2,1) forwards;
}

.faq-standalone-section .dots{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:0;
  animation:faqRiseIn .8s .6s cubic-bezier(.2,.7,.2,1) forwards;
}
.faq-standalone-section .dots i{
  display:block;
  width:6px;height:6px;border-radius:50%;
  background:var(--line);
}
.faq-standalone-section .dots .bar{
  width:34px;height:6px;border-radius:4px;
  background:linear-gradient(90deg, var(--gold), var(--gold-deep));
  position:relative;
  overflow:hidden;
}
.faq-standalone-section .dots .bar::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,.55);
  transform:translateX(-100%);
  animation:faqShimmer 2.6s ease-in-out infinite;
}
@keyframes faqShimmer{ to{ transform:translateX(100%);} }

@keyframes faqRiseIn{ to{ opacity:1; transform:translateY(0); } }

/* ---------- RIGHT : PORTRAIT ---------- */
.faq-standalone-section .portrait-wrap{
  position:relative;
  overflow:hidden;
  perspective:1200px;
}
.faq-standalone-section .tilt-layer{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.faq-standalone-section .tilt-layer img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Retuned (Aug 2026) for the new photo: was 58% 8% for the old
     736x1104 portrait crop (tall photo, subject near the very top).
     New source is a square 900x900 photo. Measured against this
     section's actual box ratios (desktop ~600x740, mobile ~335x420 —
     both ~0.8 aspect, taller than the square source) object-fit:cover
     ends up scaling to match the box HEIGHT, which lands almost exactly
     on the image's own height too — so there's effectively no vertical
     crop at all, only a modest ~13-20% trimmed off the sides. The
     subject's face sits close to horizontal center in the source (~52%),
     so plain center keeps her in frame with room either side; no need
     for the old near-top Y bias since nothing gets cropped vertically
     here (the ≤940px tablet rule below already switches to
     object-fit:contain, so this box's own ratio never comes into it). */
  object-position:center;
  transform:scale(1);
  filter:saturate(1.02);
  animation:faqImgSettle 1.4s .1s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes faqImgSettle{
  from{ transform:scale(1.06) translateX(14px); opacity:0;}
  to{ transform:scale(1) translateX(0); opacity:1;}
}

.faq-standalone-section .badge{
  position:absolute;
  right:28px;
  top:28px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  padding:11px 20px 11px 16px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:9px;
  box-shadow:0 18px 30px -14px rgba(90,60,20,.35);
  z-index:3;
  animation:faqBadgeFloat 4.5s ease-in-out infinite, faqRiseIn .8s .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes faqBadgeFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
.faq-standalone-section .badge svg{ width:15px; height:15px; color:var(--gold-deep); animation:faqHeartBeat 1.8s ease-in-out infinite; }
@keyframes faqHeartBeat{ 0%,100%{ transform:scale(1);} 15%{ transform:scale(1.25);} 30%{ transform:scale(1);} 45%{ transform:scale(1.18);} 60%{ transform:scale(1);} }
.faq-standalone-section .badge span{
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--gold-deep);
  text-transform:uppercase;
  font-family:'IBM Plex Sans Thai', sans-serif;
}

/* ---------- FAQ STRIP ---------- */
.faq-standalone-section .faq-panel{
  position:absolute;
  left:40px; right:40px; bottom:36px;
  background:var(--white-glass);
  backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid rgba(255,255,255,.5);
  border-radius:22px;
  padding:26px 30px 22px;
  z-index:4;
  box-shadow:0 24px 50px -30px rgba(220,120,150,.25);
  opacity:0;
  transform:translateY(24px);
  animation:faqRiseIn .9s .75s cubic-bezier(.2,.7,.2,1) forwards;
}

.faq-standalone-section .faq-row{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:6px;
}

.faq-standalone-section .faq-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:9px;
  cursor:pointer;
  padding:6px 4px;
  border-radius:14px;
  transition:background .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.faq-standalone-section .faq-item:hover{ background:rgba(255,255,255,.5); }

.faq-standalone-section .icon-ring{
  position:relative;
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#fff0f4,#ffd9e2);
  box-shadow:0 8px 16px -8px rgba(214,120,150,.4), inset 0 0 0 1px rgba(255,255,255,.7);
  transition:transform .45s cubic-bezier(.2,.8,.3,1), background .45s ease, box-shadow .45s ease;
  animation:faqIdleBob 3.6s ease-in-out infinite;
}
.faq-standalone-section .faq-item:nth-child(1) .icon-ring{ animation-delay:0s; }
.faq-standalone-section .faq-item:nth-child(2) .icon-ring{ animation-delay:.2s; }
.faq-standalone-section .faq-item:nth-child(3) .icon-ring{ animation-delay:.4s; }
.faq-standalone-section .faq-item:nth-child(4) .icon-ring{ animation-delay:.6s; }
.faq-standalone-section .faq-item:nth-child(5) .icon-ring{ animation-delay:.8s; }
.faq-standalone-section .faq-item:nth-child(6) .icon-ring{ animation-delay:1s; }
@keyframes faqIdleBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.faq-standalone-section .icon-ring svg{
  width:19px;height:19px;
  stroke:var(--ink-soft);
  fill:none;
  stroke-width:1.6;
  transition:stroke .35s ease, transform .35s ease;
}
.faq-standalone-section .icon-ring::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1.4px solid var(--gold);
  opacity:0;
  transform:scale(.8);
  transition:all .4s ease;
}
.faq-standalone-section .icon-ring::before{
  content:"";
  position:absolute; inset:-10px;
  border-radius:50%;
  border:1.4px dashed var(--gold);
  opacity:0;
  transition:opacity .4s ease;
}
.faq-standalone-section .faq-item:hover .icon-ring{ animation-play-state:paused; transform:translateY(-5px); }
.faq-standalone-section .faq-item.active .icon-ring{
  animation-play-state:paused;
  background:linear-gradient(160deg, var(--gold), var(--gold-deep));
  box-shadow:0 12px 22px -8px rgba(221,127,156,.45);
}
.faq-standalone-section .faq-item.active .icon-ring svg{ stroke:#fff; }
.faq-standalone-section .faq-item.active .icon-ring::after{ opacity:1; transform:scale(1); animation:faqPulseRing 1.8s ease-out infinite; }
.faq-standalone-section .faq-item.active .icon-ring::before{ opacity:.7; animation:faqSpinSlow 7s linear infinite; }
@keyframes faqPulseRing{ 0%{ box-shadow:0 0 0 0 rgba(234,168,187,.55);} 100%{ box-shadow:0 0 0 10px rgba(234,168,187,0);} }
@keyframes faqSpinSlow{ to{ transform:rotate(360deg); } }

.faq-standalone-section .sparkle{
  position:absolute;
  top:50%; left:50%;
  width:5px; height:5px;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:faqSparkleFly .75s ease-out forwards;
  z-index:5;
}
@keyframes faqSparkleFly{
  to{
    transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
    opacity:0;
  }
}

.faq-standalone-section .faq-num{
  font-size:10px;
  letter-spacing:.12em;
  color:var(--gold-deep);
  font-weight:600;
  opacity:.85;
  text-shadow:0 1px 6px rgba(255,255,255,.8);
}
.faq-standalone-section .faq-label{
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.4;
  font-weight:400;
  max-width:98px;
  text-shadow:0 1px 8px rgba(255,255,255,.7);
}
.faq-standalone-section .faq-item.active .faq-label{ color:var(--ink); font-weight:500; }

.faq-standalone-section .answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease, margin .4s ease;
  opacity:0;
  margin-top:0;
}
.faq-standalone-section .answer.open{
  /* Bug fix: 120px was tuned for the widest (desktop) .faq-panel width,
     where the label + answer sentence wraps to only ~2-3 lines. At
     narrower widths (mobile grid, tablet, and especially the ≤520px
     carousel card) the SAME text wraps to more lines since there's
     less horizontal room, needing more height — but max-height was a
     fixed 120px regardless of screen size, so overflow:hidden above
     silently clipped the last line(s) of longer answers on mobile/
     tablet. No parent container turned out to have its own fixed
     height forcing this — .faq-panel/.grid/.stage all size to content
     normally, this rule was the actual source. Raised to a value with
     generous headroom past what any of the 6 real answers need even
     at the narrowest card width, instead of trying to precisely
     compute exact height per breakpoint. */
  max-height:500px;
  opacity:1;
  margin-top:18px;
}
.faq-standalone-section .answer-inner{
  display:flex;
  gap:14px;
  align-items:flex-start;
  border-top:1px dashed var(--line);
  padding-top:16px;
}
.faq-standalone-section .answer-inner .q-icon{
  flex:0 0 auto;
  width:30px;height:30px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--gold), var(--gold-deep));
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:13px; font-weight:600; font-family:'IBM Plex Sans Thai';
}
.faq-standalone-section .answer-inner .a-text{ font-size:13px; line-height:1.85; color:var(--ink-soft); font-weight:300;}
.faq-standalone-section .answer-inner .a-text b{ display:block; font-size:14px; color:var(--ink); font-weight:600; margin-bottom:3px;}
.faq-standalone-section .close-x{
  margin-left:auto; flex:0 0 auto;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted); cursor:pointer; font-size:15px;
  transition:background .25s, color .25s;
}
.faq-standalone-section .close-x:hover{ background:rgba(0,0,0,.05); color:var(--ink);}

@media (max-width: 940px){
  /* ROOT CAUSE of the FAQ mobile overflow (badge cut off the right
     edge of the photo) that survived a prior "fix" round which added
     .faq-standalone-section{display:flex;justify-content:center;} as
     a second centering mechanism — that never had a chance to work,
     because the section it was centering was already the wrong width.
     Verified via real headless-Chrome layout at 375px, not just
     reasoning: bare `1fr` on a CSS Grid track carries an implicit
     *automatic minimum size* equal to the largest min-content width of
     its items — NOT 0. Measured before this fix: this .grid's single
     column computed to 484px wide at a 375px viewport
     (getComputedStyle(...).gridTemplateColumns), even though .grid
     itself correctly measured 335px (375px viewport − 40px section
     padding) — the TRACK was blown out internally, dragging .copy/
     .portrait-wrap (and the badge on it) out to 484px with it. No
     amount of centering the outer .stage/.faq-standalone-section could
     have fixed content that was internally 149px too wide for its own
     column. `minmax(0,1fr)` overrides the automatic minimum to 0.
     Verified after this fix: .copy/.portrait-wrap both measure exactly
     335px, and the badge's right edge lands at 335px too (flush with
     the photo's own edge, not past it) — no overflow. */
  .faq-standalone-section .grid{ grid-template-columns:minmax(0,1fr); min-height:auto; }
  .faq-standalone-section .portrait-wrap{ height:420px; order:-1; }
  .faq-standalone-section .copy{ padding:36px 26px 28px; }
  .faq-standalone-section .faq-panel{ position:static; left:auto; right:auto; margin:0 18px 28px; padding:20px 16px 16px; }
  .faq-standalone-section .faq-row{ grid-template-columns:repeat(3,1fr); row-gap:16px; }
  .faq-standalone-section .faq-label{ max-width:none; }
  .faq-standalone-section .badge{ right:20px; left:auto; top:20px; bottom:auto; }
}
@media (min-width:641px) and (max-width:940px){
  /* Tablet-only fix — portrait crops out the chin/mouth (real
     headless-Chrome measurement, not eyeballing): the 940px rule
     above gives .portrait-wrap a flat height:420px regardless of its
     own width, but that width keeps growing with the viewport in this
     single-column layout. At 768/810/834px the container ends up
     ~728-794px wide × still only 420px tall (aspect ~1.73-1.89 — much
     wider-than-tall) against a portrait photo (736×1104, aspect
     0.667) — object-fit:cover has to zoom in hard to fill that wide
     short box, cropping ~57-60% off the BOTTOM of the image (measured:
     only the top ~40% of the photo — forehead through roughly the
     nose — was visible; chin/mouth cropped out entirely). ≤640px
     (real phones, 375-428px tested) isn't affected — narrower
     viewports keep the container closer to portrait-shaped, cropping
     only ~15-33% and staying comfortably below the chin. >940px is
     already the desktop 2-column layout with a naturally tall
     column (measured ~0% crop at 1024/1280px) — not touched either.

     A taller fixed height alone can't fully fix this without an
     impractically tall panel — even bumping to 600px still measured
     ~41% cropped off the bottom at 768px width, because the container
     is still much wider than the photo's own ratio allows without
     cropping. Switching to object-fit:contain (like the earlier Hero
     Slider tablet fix) guarantees the full photo is visible — letting
     height grow to a more proportionate 640px (up from 420px) just
     makes the now-letterboxed photo render at a reasonable size
     instead of shrinking to fit the old short box. The empty side
     margins this creates aren't stark white/black — .portrait-wrap
     has no background of its own, so .stage's existing soft pink
     gradient (#fffdfd → #fff1f4 → #ffe2ea) shows through, already
     matching the section's palette with no extra CSS needed. */
  .faq-standalone-section .portrait-wrap{ height:640px; }
  .faq-standalone-section .tilt-layer img{ object-fit:contain; object-position:center; }
}
/* faq-dots: hidden by default (desktop grid + the 940px 3-col / former
   520px 2-col grid tiers all display fine, nothing to scroll), shown
   only once the carousel below kicks in */
.faq-standalone-section .faq-dots{display:none;}
@media (max-width:520px){
  /* Follow-up round: was a 2-col icon grid at this tier (6 items → 3
     rows of scrolling), replaced with the same single-row scroll-snap
     carousel technique already used for the stat-band/why-us/
     philosophy carousels elsewhere on the page — .faq-row itself
     becomes the scrolling track, .faq-item becomes the "slide". Click-
     to-open-answer behavior on each item is unchanged (attached in
     faq-section.js at creation time, independent of layout). Scoped to
     ≤520px only — the 940px 3-col tablet grid above this is untouched. */
  .faq-standalone-section .faq-row{
    display:flex;flex-wrap:nowrap;
    grid-template-columns:none;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:6%;
    padding:4px 2px 6px;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .faq-standalone-section .faq-row::-webkit-scrollbar{display:none;}
  .faq-standalone-section .faq-item{
    scroll-snap-align:center;
    scroll-snap-stop:always;
    flex:0 0 62%; /* ~1.5 cards visible: one full + a peek of the next */
    min-width:0;
  }
  .faq-standalone-section .faq-dots{
    display:flex;justify-content:center;gap:8px;margin-top:14px;
  }
  .faq-standalone-section .faq-dots .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--line);cursor:pointer;transition:.3s;
  }
  .faq-standalone-section .faq-dots .dot.active{background:var(--gold-deep);width:18px;border-radius:4px;}
}

@media (prefers-reduced-motion: reduce){
  .faq-standalone-section *{ animation:none !important; transition:none !important; }
  /* Bug fix found while editing the heading treatment above: this
     blanket animation:none was disabling the entrance animations on
     .faq-eyebrow/h1/.accent-word/p.desc/.dots/.faq-panel — but those
     elements' RESTING state (before their "forwards" entrance
     animation runs) is opacity:0, which is also the ANIMATION's job
     to correct. With the animation disabled and nothing else setting
     opacity back to 1, reduced-motion users would see this whole
     section's text permanently invisible instead of just not
     animated. Forcing the end state directly here fixes that —
     pre-existing gap for p.desc/.dots/.faq-panel, not something the
     heading changes introduced, but caught and fixed while in this
     file. (.icon-ring::before/::after opacity:0 is intentionally left
     alone — that's the resting "off" state of the active/hover
     indicator ring, not a page-load entrance effect.) */
  .faq-standalone-section .faq-eyebrow,
  .faq-standalone-section h1,
  .faq-standalone-section h1 .accent-word,
  .faq-standalone-section p.desc,
  .faq-standalone-section .dots,
  .faq-standalone-section .faq-panel{
    opacity:1 !important;
    transform:none !important;
  }
}