/* ══════════════════════════════════════════════════════════════════
   SERVICE PAGE — CREAM THEME  (matches the homepage concept palette)
   First applied to /prenatal-massage-singapore/ for review. Flips the
   purple service theme to cream: paper surface, dark text, plum/purple
   accents, white cards. The immersive hero (dark photo) and the final
   CTA band are kept as accents — same rhythm as the homepage.
   Scoped to body.svc-cream · loaded AFTER service.css · fully reversible.

   Palette (same as the homepage): paper #fbf8f4 · card #fff · ink #2a2540 ·
   body #4a4553 · muted #8b7f92 · plum #5a1f63 · purple #8d319b · line #e7ded0
   ══════════════════════════════════════════════════════════════════ */
body.svc-cream{
  --c-paper:#fbf8f4; --c-card:#ffffff; --c-soft:#f4efe6; --c-ink:#2a2540;
  --c-body:#4a4553; --c-muted:#8b7f92; --c-plum:#5a1f63; --c-purple:#8d319b;
  --c-line:#e7ded0;
  background: var(--c-paper);
}

/* ── surfaces: wrapper + content sections → paper, one card block → white ── */
body.svc-cream .service-preview,
body.svc-cream .service-preview--immersive{ background: var(--c-paper) !important; }
body.svc-cream :is(.service-intro,.service-oils,.service-areas,.service-prep,
                   .service-testimonials,.service-related,.service-banner){ background: var(--c-paper) !important; }
body.svc-cream :is(.service-benefits,.service-process){ background: var(--c-paper) !important; }

/* ── text: dark body · ink headings · purple eyebrows/emphasis · plum strong ── */
body.svc-cream .service-preview :is(p,li,dd,dt,span,summary,small,td,th,figcaption,blockquote){ color: var(--c-body) !important; }
body.svc-cream .service-preview :is(h1,h2,h3,h4){ color: var(--c-ink) !important; }
body.svc-cream .service-preview :is(h1,h2,h3) em{ color: var(--c-purple) !important; }
body.svc-cream .service-preview .bmb-eyebrow{ color: var(--c-purple) !important; }
body.svc-cream .service-preview strong{ color: var(--c-plum) !important; }
body.svc-cream .service-preview a{ color: var(--c-purple); }

/* ── cards / tiles → soft cream with a hairline ── */
body.svc-cream :is(.service-benefit-card, .service-prep-card, .service-story,
                   .service-related-figure, .service-card-figure){
  background: var(--c-soft) !important;
  border-color: var(--c-line) !important;
}
/* Testimonial cards are the grid <li> items (the .service-testimonial-quote
   is just the italic text and has no background). */
body.svc-cream .service-testimonials-grid > li{
  background: var(--c-soft) !important;
  border-color: var(--c-line) !important;
}
/* decorative quote-mark (on the li ::before) → soft greige · attribution → muted */
body.svc-cream .service-testimonials-grid > li::before{ color: var(--c-line) !important; }
body.svc-cream .service-testimonial-attr{ color: var(--c-muted) !important; }

/* "Focus Areas" figure — the purple frame is padding over a purple bg. Keep
   the purple, but make the frame THINNER and the corners ROUNDED. */
body.svc-cream :is(.service-areas-figure, .service-banner-figure){
  padding: .35rem !important;
  border-radius: 16px !important;
}
body.svc-cream :is(.service-areas-figure, .service-banner-figure) img{ border-radius: 12px !important; }
/* Caption sits on the figure's purple frame → keep it LIGHT (service.css set
   it cream; our dark-text rule had overridden it). */
body.svc-cream :is(.service-banner-figure, .service-course-gallery) figcaption{ color:#f4e6f7 !important; }

/* ── FAQ ── The FAQ section (.service-faq / .service-faqs) is transparent
   BY DESIGN and reveals the fixed full-viewport hero photo behind it, so its
   header must stay LIGHT to read on the image (service.css sets it cream;
   our general dark-heading rule had overridden it). The accordion pills
   below are light cards → dark text (from the general text rule). */
body.svc-cream .service-preview section.service-faq > .bmb-section-head h2,
body.svc-cream .service-preview section.service-faqs > .bmb-section-head h2{ color:#ffffff !important; }
body.svc-cream .service-preview section.service-faq > .bmb-section-head .bmb-eyebrow,
body.svc-cream .service-preview section.service-faqs > .bmb-section-head .bmb-eyebrow{ color:#f0cdf6 !important; }
body.svc-cream .service-faq-answer{ color: var(--c-body) !important; }

/* accents tuned for purple (stars, pillar numbers) → readable on cream */
body.svc-cream .service-story-stars{ color: var(--accent-ink) !important; }
body.svc-cream .service-benefit-num{ color: var(--c-purple) !important; }

/* ══ ACCENTS KEPT (like the homepage's hero + final CTA) ══ */
/* Immersive hero — restore its light text over the photo. */
body.svc-cream .service-hero--immersive :is(h1,h2,h3,p,span,dt,dd,li){ color:#f4e6f7 !important; }
body.svc-cream .service-hero--immersive .service-hero-title{ color:#ffffff !important; }
body.svc-cream .service-hero--immersive .bmb-eyebrow{ color:#f0cdf6 !important; }
/* Final CTA → plum band with light text. */
body.svc-cream .service-cta{ background: var(--c-plum) !important; }
body.svc-cream .service-cta :is(h1,h2,h3,p,li,span,dt,dd){ color:#fdf9ff !important; }
body.svc-cream .service-cta .bmb-eyebrow{ color:#e6b8ef !important; }
/* Emphasis (e.g. the phone number) inside the plum CTA must be light — the
   general "strong → plum" rule made it invisible on the plum band. */
body.svc-cream .service-cta strong{ color:#ffffff !important; }