/* ═══════════════════════════════════════════════════════════════════
   Service page template — editorial layout matching the homepage palette
   (navy section eyebrows, gold accents, dusty-rose primary).

   Used for /prenatal-massage-singapore/ and (planned) other service
   pages: postnatal, lactation, baby massage, chiropractic, etc.

   Scoped to .service-preview so styles don't leak. Sections covered:
   hero, intro, benefits grid, target areas, prep+technique callouts,
   oils, related services, testimonials (with locked H1), FAQ accordion,
   final CTA.
   ═══════════════════════════════════════════════════════════════════ */

main:has(.service-preview){
  background:var(--bg);
  max-width:none;
  padding:0;
  width:100%;
}
.service-preview{
  --service-max: 1400px;
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.65;
  overflow-x:clip;
}
.service-preview > section{
  padding:5rem max(2rem, calc((100vw - var(--service-max)) / 2));
  position:relative;
  margin:0;
}
@media (max-width:720px){
  .service-preview > section{padding:3rem 1rem}
}

/* Section heads */
.service-preview .bmb-section-head{
  text-align:center;
  margin-bottom:3rem;
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}
.service-preview .bmb-section-head .bmb-eyebrow{
  display:flex;
  justify-content:center;
  width:fit-content;
  margin:0 auto 1.25rem;
  font-family:var(--sans);
  font-size:clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight:700;
  letter-spacing:.22em;
  color:var(--navy);
  text-transform:uppercase;
}
.service-preview .bmb-section-head h1,
.service-preview .bmb-section-head h2{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.15;
  margin:0;
}
.service-preview .service-section-lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.55;
  color:var(--muted);
  margin:.8rem auto 0;
  max-width:54ch;
}

/* Shared CTA pill */
.service-preview .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 2rem;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:600;
  letter-spacing:.015em;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.service-preview .bmb-cta--primary{
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-dk) 100%);
  color:#fff;
  box-shadow:0 8px 24px -6px rgba(170, 127, 134, 0.55);
}
.service-preview .bmb-cta--primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 32px -6px rgba(170, 127, 134, 0.75);
}
.service-preview .bmb-cta--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid rgba(170, 127, 134, 0.4);
}
.service-preview .bmb-cta--ghost:hover{
  background:rgba(170, 127, 134, 0.08);
  color:var(--brand-dk);
  border-color:var(--brand);
}

/* ═══ HERO ═══════════════════════════════════════════════════════ */
.service-preview .service-hero{
  padding-top:6rem;
  padding-bottom:4rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.service-preview .service-hero::before{
  content:"";
  position:absolute;
  top:-25%;
  left:-10%;
  width:55%;
  height:120%;
  background:radial-gradient(circle, rgba(170, 127, 134, 0.28) 0%, rgba(170, 127, 134, 0) 65%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  animation:serviceAmbientA 24s ease-in-out infinite;
}
.service-preview .service-hero::after{
  content:"";
  position:absolute;
  bottom:-30%;
  right:-15%;
  width:55%;
  height:120%;
  background:radial-gradient(circle, rgba(179, 149, 85, 0.28) 0%, rgba(179, 149, 85, 0) 65%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  animation:serviceAmbientB 28s ease-in-out infinite;
}
@keyframes serviceAmbientA{
  0%, 100% {transform:translate(0,0) scale(1)}
  50%      {transform:translate(40px,20px) scale(1.05)}
}
@keyframes serviceAmbientB{
  0%, 100% {transform:translate(0,0) scale(1)}
  50%      {transform:translate(-40px,-30px) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .service-preview .service-hero::before,
  .service-preview .service-hero::after{animation:none}
}
.service-preview .service-hero-inner{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
}
.service-preview .service-hero-eyebrow{
  display:inline-flex;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  gap:14px;
  align-items:center;
  margin:0 auto 1.5rem;
  justify-content:center;
}
.service-preview .service-hero-eyebrow::before,
.service-preview .service-hero-eyebrow::after{
  content:"";
  width:38px;
  height:1px;
  background:var(--gold);
}
.service-preview .service-hero-display{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 auto 1.5rem;
  max-width:20ch;
}
.service-preview .service-hero-display em{
  font-style:italic;
  color:var(--brand);
  font-weight:500;
}
.service-preview .service-hero-lead{
  font-size:1.08rem;
  line-height:1.7;
  color:var(--ink-2);
  max-width:60ch;
  margin:0 auto 2.5rem;
}
.service-preview .service-hero-meta{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
  max-width:760px;
  margin:0 auto 2.5rem;
}
.service-preview .service-hero-meta > div{
  padding:1.1rem 1.2rem;
  background:rgba(255, 250, 248, 0.65);
  border:1px solid rgba(179, 149, 85, 0.18);
  border-radius:14px;
  text-align:left;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.service-preview .service-hero-meta > div span{
  display:block;
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.4rem;
}
.service-preview .service-hero-ctas{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
@media (max-width:720px){
  .service-preview .service-hero-meta{grid-template-columns:1fr;gap:.8rem}
}

/* Split hero — copy on the left, image on the right. The image is
   tall, rounded, and shadowed so the page opens with a clear "what
   this looks like" companion to the text. Collapses to single
   column on mobile (image stacks above copy for visual hook). */
.service-preview .service-hero--split{
  text-align:left;
}
.service-preview .service-hero--split .service-hero-inner{
  margin:0;
  max-width:none;
}
.service-preview .service-hero--split .service-hero-eyebrow{
  margin:0 0 1.5rem;
  justify-content:flex-start;
}
.service-preview .service-hero--split .service-hero-display{
  margin:0 0 1.5rem;
}
.service-preview .service-hero--split .service-hero-lead{
  margin:0 0 2.5rem;
}
.service-preview .service-hero--split .service-hero-meta{
  margin:0 0 2.5rem;
}
.service-preview .service-hero--split .service-hero-ctas{
  justify-content:flex-start;
}
.service-preview .service-hero-figure{
  margin:0;
  position:relative;
  z-index:1;
  border-radius:24px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:linear-gradient(135deg, rgba(170, 127, 134, 0.10), rgba(179, 149, 85, 0.10));
  box-shadow:0 24px 60px -20px rgba(50, 30, 25, 0.22);
}
.service-preview .service-hero-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Make the hero a 2-col grid only when the split variant is used. */
.service-preview section.service-hero.service-hero--split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3.2rem;
  align-items:center;
}
@media (max-width:900px){
  .service-preview section.service-hero.service-hero--split{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .service-preview .service-hero-figure{
    aspect-ratio:5/4;
    order:-1;
  }
  .service-preview .service-hero--split{text-align:center}
  .service-preview .service-hero--split .service-hero-eyebrow,
  .service-preview .service-hero--split .service-hero-ctas{justify-content:center}
}

/* ═══ INTRO (centred editorial copy) ═════════════════════════════ */
.service-preview .service-intro-body{
  max-width:68ch;
  margin:0 auto;
}
.service-preview .service-intro-body p{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 1.4rem;
}
.service-preview .service-intro-body p:last-child{margin-bottom:0}

/* ═══ BENEFITS GRID (8 numbered tiles) ═══════════════════════════ */
.service-preview .service-benefits{
  background:linear-gradient(180deg, rgba(244, 232, 218, 0.30) 0%, rgba(247, 240, 240, 0.30) 100%);
}
.service-preview .service-benefits-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--service-max);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.2rem;
}
.service-preview .service-benefits-grid li{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  padding:1.8rem 1.5rem;
  background:rgba(255, 252, 250, 0.85);
  border:1px solid rgba(179, 149, 85, 0.18);
  border-radius:18px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.service-preview .service-benefits-grid li:hover{
  transform:translateY(-3px);
  border-color:rgba(179, 149, 85, 0.40);
  box-shadow:0 12px 30px -14px rgba(179, 149, 85, 0.22);
}
.service-preview .service-benefit-num{
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:500;
  line-height:1;
  color:var(--gold);
  letter-spacing:.02em;
}
.service-preview .service-benefits-grid p{
  font-size:.97rem;
  line-height:1.55;
  color:var(--ink-2);
  margin:0;
}
.service-preview .service-benefits-grid p strong{
  color:var(--navy);
  font-weight:600;
}
@media (max-width:1024px){
  .service-preview .service-benefits-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:560px){
  .service-preview .service-benefits-grid{grid-template-columns:1fr}
}

/* ═══ TARGET AREAS (chips) ═══════════════════════════════════════ */
/* Read as an editorial inline list, not as buttons. Items separated by
   thin gold dot dividers so it's clear they're labels, not actions. */
.service-preview .service-areas-list{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:740px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.55rem 1rem;
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.25rem, 2vw, 1.55rem);
  font-weight:600;
  color:var(--navy);
  letter-spacing:-.005em;
}
.service-preview .service-areas-list li{
  padding:0;
  background:none;
  border:none;
  border-radius:0;
  position:relative;
  display:inline-flex;
  align-items:center;
}
.service-preview .service-areas-list li + li::before{
  content:"·";
  margin-right:1rem;
  margin-left:-.4rem;
  color:var(--gold, #b39555);
  font-weight:700;
}

/* ═══ PREPARATION + TECHNIQUE (two-column callouts) ═══════════════ */
.service-preview .service-prep-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  max-width:var(--service-max);
  margin:0 auto;
}
.service-preview .service-prep-card{
  padding:2.4rem 2rem;
  background:rgba(255, 252, 250, 0.85);
  border:1px solid rgba(179, 149, 85, 0.22);
  border-radius:22px;
  position:relative;
  overflow:hidden;
}
.service-preview .service-prep-card::before{
  content:"";
  position:absolute;
  top:-30%;
  right:-30%;
  width:60%;
  height:60%;
  background:radial-gradient(circle, rgba(179, 149, 85, 0.18) 0%, transparent 60%);
  filter:blur(40px);
  pointer-events:none;
}
.service-preview .service-card-eyebrow{
  display:inline-flex;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  gap:10px;
  align-items:center;
  margin:0 0 .8rem;
  position:relative;
  z-index:1;
}
.service-preview .service-card-eyebrow::before{
  content:"";
  width:30px;
  height:1px;
  background:var(--gold);
}
.service-preview .service-prep-card h2{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.1;
  color:var(--ink);
  margin:0 0 1.1rem;
  position:relative;
  z-index:1;
}
.service-preview .service-prep-card p{
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 1rem;
  position:relative;
  z-index:1;
}
.service-preview .service-prep-card p strong{
  color:var(--navy);
  font-weight:600;
}
.service-preview .service-prep-note{
  margin-top:1.4rem !important;
  padding:1rem 1.2rem;
  background:rgba(91, 194, 231, 0.10);
  border-left:3px solid var(--accent);
  border-radius:8px;
  font-family:var(--sans);
  font-size:.92rem;
  font-style:italic;
  color:var(--navy-dk, var(--navy)) !important;
}
@media (max-width:900px){
  .service-preview .service-prep-grid{grid-template-columns:1fr}
}

/* ═══ OILS (centered copy) ═══════════════════════════════════════ */
.service-preview .service-oils{
  background:linear-gradient(180deg, rgba(247, 240, 240, 0.40) 0%, rgba(244, 232, 218, 0.30) 100%);
}
.service-preview .service-oils-body{
  max-width:68ch;
  margin:0 auto;
}
.service-preview .service-oils-body p{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 1.4rem;
}
.service-preview .service-oils-body p:last-child{margin-bottom:0}
.service-preview .service-oils-body p strong{
  color:var(--navy);
  font-weight:600;
}

/* ═══ RELATED SERVICES (mini cards) ══════════════════════════════ */
.service-preview .service-related-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--service-max);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
}
.service-preview .service-related-grid li{
  padding:0;
  background:rgba(255, 252, 250, 0.85);
  border:1px solid rgba(179, 149, 85, 0.22);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.service-preview .service-related-grid li:hover{
  transform:translateY(-3px);
  border-color:rgba(179, 149, 85, 0.45);
  box-shadow:0 12px 30px -14px rgba(179, 149, 85, 0.22);
}
.service-preview .service-related-figure{
  margin:0;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(170, 127, 134, 0.10), rgba(179, 149, 85, 0.10));
}
.service-preview .service-related-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}

/* Global override for EVERY img inside one of the service-* figure
   classes — style.css:430 sets `.wp-content img { margin: 1rem 0;
   border-radius: 8px; height: auto }` which leaks in and produces a
   visible cream gap + stray rounding on every card image.
   Killing it once here covers hero-figure, intro-figure, card-figure,
   areas-figure, banner-figure, related-figure, and the archive post
   cards. */
.service-preview .service-hero-figure img,
.service-preview .service-intro-figure img,
.service-preview .service-card-figure img,
.service-preview .service-areas-figure img,
.service-preview .service-banner-figure img,
.service-preview .service-related-figure img,
.service-preview--archive .post-grid--archive .bmb-post-card-img img{
  margin:0 !important;
  border-radius:0 !important;
  max-width:none !important;
}
.service-preview .service-related-grid li:hover .service-related-figure img{
  transform:scale(1.04);
}
.service-preview .service-related-body{
  display:flex;
  flex-direction:column;
  padding:2rem 1.8rem;
  flex-grow:1;
}
.service-preview .service-related-grid h3{
  font-family:var(--font-display, var(--serif));
  font-size:1.5rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
  margin:0 0 .8rem;
}
.service-preview .service-related-grid p{
  font-size:.97rem;
  line-height:1.6;
  color:var(--ink-2);
  margin:0 0 1.2rem;
  flex-grow:1;
}
.service-preview .service-related-cta{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-dk);
  text-decoration:none;
  margin-top:auto;
  transition:color .25s ease, transform .25s ease;
}
.service-preview .service-related-cta:hover{
  color:var(--brand);
  transform:translateX(2px);
}
@media (max-width:720px){
  .service-preview .service-related-grid{grid-template-columns:1fr}
}
/* 3-column variant for pages with three related services (postnatal). */
.service-preview .service-related-grid--3{
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:980px){
  .service-preview .service-related-grid--3{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:680px){
  .service-preview .service-related-grid--3{grid-template-columns:1fr}
}

/* Focus areas alt — copy paragraph + chips beneath. */
.service-preview .service-areas--alt .service-areas-copy{
  max-width:68ch;
  margin:0 auto 2rem;
  text-align:center;
}
.service-preview .service-areas--alt .service-areas-copy p{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
}
.service-preview .service-areas--alt .service-areas-copy strong{
  color:var(--navy);
  font-weight:600;
}

/* ═══ TESTIMONIALS (LOCKED H1 here) ═══════════════════════════════ */
.service-preview .service-testimonials{
  background:linear-gradient(180deg, rgba(13, 44, 84, 0.97), rgba(13, 44, 84, 0.93));
  position:relative;
  overflow:hidden;
}
.service-preview .service-testimonials::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:80%;
  height:120%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(179, 149, 85, 0.10) 0%, transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}
.service-preview .service-testimonials .bmb-section-head .bmb-eyebrow{
  color:var(--gold);
}
.service-preview .service-testimonials .bmb-section-head h1,
.service-preview .service-testimonials .bmb-section-head h2{
  color:#fdfaf8;
}
.service-preview .service-testimonials .service-section-lead{
  color:rgba(244, 229, 184, 0.75);
}
.service-preview .service-stories-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:var(--service-max);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
  position:relative;
  z-index:1;
}
.service-preview .service-story{
  display:flex;
  flex-direction:column;
  padding:2rem 1.8rem;
  background:rgba(255, 250, 248, 0.05);
  border:1px solid rgba(179, 149, 85, 0.30);
  border-radius:20px;
  position:relative;
  transition:transform .35s ease, border-color .35s ease, background .35s ease;
}
.service-preview .service-story::before{
  content:"\201C";
  position:absolute;
  top:.6rem;
  right:1.4rem;
  font-family:var(--serif);
  font-size:5rem;
  line-height:1;
  color:var(--gold);
  opacity:.25;
  pointer-events:none;
}
.service-preview .service-story:hover{
  transform:translateY(-3px);
  border-color:rgba(179, 149, 85, 0.55);
  background:rgba(255, 250, 248, 0.08);
}
.service-preview .service-story-meta{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:1.1rem;
  position:relative;
  z-index:1;
}
.service-preview .service-story-stars{
  font-size:.85rem;
  letter-spacing:.18em;
  color:var(--gold);
  line-height:1;
}
.service-preview .service-story-tag{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f4e5b8;
  padding:.25rem .65rem;
  background:rgba(179, 149, 85, 0.18);
  border-radius:999px;
}
.service-preview .service-story blockquote{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  color:rgba(255, 250, 248, 0.92);
  margin:0 0 1.5rem;
  padding:0;
  border:0;
  flex-grow:1;
  position:relative;
  z-index:1;
}
.service-preview .service-story footer{
  border-top:1px solid rgba(179, 149, 85, 0.25);
  padding-top:1rem;
  position:relative;
  z-index:1;
}
.service-preview .service-story-name{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  color:#fdfaf8;
  margin:0 0 .25rem;
}
.service-preview .service-story-role{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.08em;
  color:rgba(244, 229, 184, 0.7);
  margin:0;
  text-transform:uppercase;
}
@media (max-width:980px){
  .service-preview .service-stories-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:680px){
  .service-preview .service-stories-grid{grid-template-columns:1fr}
}

/* ═══ FAQ (native accordion via <details>) ═══════════════════════ */
.service-preview .service-faq-list{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:820px;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.service-preview .service-faq-list details{
  background:rgba(255, 252, 250, 0.85);
  border:1px solid rgba(179, 149, 85, 0.22);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.service-preview .service-faq-list details[open]{
  border-color:rgba(179, 149, 85, 0.45);
  box-shadow:0 12px 30px -16px rgba(179, 149, 85, 0.22);
}
.service-preview .service-faq-list summary{
  cursor:pointer;
  list-style:none;
  padding:1.3rem 1.6rem;
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.05rem, 1.6vw, 1.22rem);
  font-weight:500;
  color:var(--ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.4rem;
  letter-spacing:-.005em;
  line-height:1.3;
  transition:color .2s ease;
}
.service-preview .service-faq-list summary::-webkit-details-marker{display:none}
.service-preview .service-faq-list summary::after{
  content:"";
  width:14px;
  height:14px;
  flex-shrink:0;
  border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:rotate(45deg);
  transform-origin:50% 50%;
  transition:transform .3s ease;
  margin-bottom:4px;
}
.service-preview .service-faq-list details[open] summary::after{
  transform:rotate(-135deg);
  margin-bottom:-4px;
}
.service-preview .service-faq-list summary:hover{
  color:var(--brand-dk);
}
.service-preview .service-faq-answer{
  padding:0 1.6rem 1.6rem;
  border-top:1px solid rgba(179, 149, 85, 0.14);
  padding-top:1.2rem;
}
.service-preview .service-faq-answer p{
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 1rem;
}
.service-preview .service-faq-answer p:last-child{margin-bottom:0}
.service-preview .service-faq-answer p strong{
  color:var(--navy);
  font-weight:600;
}
.service-preview .service-faq-answer ul{
  margin:.6rem 0 1rem 1.2rem;
  padding:0;
  list-style:disc;
  color:var(--ink-2);
}
.service-preview .service-faq-answer li{
  margin-bottom:.4rem;
  padding-left:.3rem;
  line-height:1.55;
}

/* ═══ FINAL CTA ══════════════════════════════════════════════════ */
.service-preview .service-cta{
  text-align:center;
  padding-top:6rem;
  padding-bottom:6rem;
  background:linear-gradient(180deg, rgba(244, 232, 218, 0.50), rgba(247, 240, 240, 0.85));
  position:relative;
  overflow:hidden;
}
.service-preview .service-cta::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:65vw;
  height:65vw;
  max-width:900px;
  max-height:900px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(179, 149, 85, 0.20) 0%, rgba(179, 149, 85, 0) 60%);
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
}
.service-preview .service-cta-inner{
  position:relative;
  z-index:1;
  max-width:60ch;
  margin:0 auto;
}
.service-preview .service-cta .bmb-eyebrow{
  display:inline-flex;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  gap:14px;
  align-items:center;
  margin:0 auto 1.5rem;
  justify-content:center;
}
.service-preview .service-cta .bmb-eyebrow::before,
.service-preview .service-cta .bmb-eyebrow::after{
  content:"";
  width:36px;
  height:1px;
  background:var(--gold);
}
.service-preview .service-cta h2{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.1;
  margin:0 0 1.2rem;
}
.service-preview .service-cta p{
  font-size:1.05rem;
  line-height:1.65;
  color:var(--ink-2);
  margin:0 0 2rem;
}
.service-preview .service-cta-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.service-preview .service-cta .bmb-cta{
  padding:.95rem 2.2rem;
  font-size:1.02rem;
}

/* ─── Intro body with side figure (chiropractic-care, etc.) ───── */
.service-preview .service-intro-body--with-figure{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
  gap:3rem;
  align-items:start;
  max-width:none;
}
.service-preview .service-intro-body--with-figure > div{
  max-width:60ch;
}
.service-preview .service-intro-figure{
  margin:0;
  border:1px solid color-mix(in oklch, var(--navy) 12%, transparent);
  background:var(--cream, #f7f0f0);
  padding:1rem 1rem 1.4rem;
  border-radius:2px;
}
.service-preview .service-intro-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:1px;
}
.service-preview .service-intro-figure figcaption{
  margin:1rem .25rem 0;
  font-family:var(--sans);
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--navy);
  text-transform:uppercase;
  font-weight:600;
  line-height:1.5;
}
@media (max-width:880px){
  .service-preview .service-intro-body--with-figure{
    grid-template-columns:1fr;
    gap:2rem;
  }
}

/* ─── Inline benefits list (sentence-style with bullet markers) ── */
.service-preview .service-benefits-inline{
  list-style:none;
  margin:1.6rem 0;
  padding:0;
  display:grid;
  gap:.7rem;
}
.service-preview .service-benefits-inline li{
  position:relative;
  padding-left:1.6rem;
  font-size:1.02rem;
  line-height:1.6;
  color:var(--ink);
}
.service-preview .service-benefits-inline li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:.7rem;
  height:1px;
  background:var(--gold);
}

/* ─── Process section (SpinalSync 5-step etc.) ─────────────────── */
.service-preview .service-process{
  background:color-mix(in oklch, var(--navy) 4%, var(--bg));
}
.service-preview .service-process-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.25rem;
  counter-reset:none;
}
.service-preview .service-process-grid > li{
  background:var(--bg);
  border:1px solid color-mix(in oklch, var(--navy) 10%, transparent);
  padding:2rem 1.6rem 1.8rem;
  border-radius:2px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.service-preview .service-process-num{
  display:inline-block;
  font-family:var(--font-display, var(--serif));
  font-size:1.05rem;
  font-weight:500;
  color:var(--gold);
  letter-spacing:.04em;
  margin-bottom:.2rem;
}
.service-preview .service-process-grid h3{
  font-family:var(--font-display, var(--serif));
  font-size:1.25rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.25;
  margin:0;
}
.service-preview .service-process-grid p{
  font-size:.98rem;
  line-height:1.6;
  color:var(--ink-2);
  margin:0;
}

/* ─── FAQs accordion (native <details>) ─────────────────────────── */
.service-preview .service-faqs-list{
  max-width:840px;
  margin:0 auto;
  display:grid;
  gap:.6rem;
}
.service-preview .service-faq{
  border:1px solid color-mix(in oklch, var(--navy) 12%, transparent);
  background:var(--bg);
  border-radius:2px;
  overflow:hidden;
}
.service-preview .service-faq[open]{
  background:color-mix(in oklch, var(--cream, #f7f0f0) 60%, var(--bg));
}
.service-preview .service-faq > summary{
  list-style:none;
  cursor:pointer;
  padding:1.2rem 1.4rem;
  font-family:var(--font-display, var(--serif));
  font-size:1.08rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.35;
  position:relative;
  padding-right:3rem;
  transition:color .25s ease;
}
.service-preview .service-faq > summary::-webkit-details-marker{display:none}
.service-preview .service-faq > summary::after{
  content:"+";
  position:absolute;
  right:1.4rem;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--sans);
  font-size:1.4rem;
  font-weight:300;
  color:var(--gold);
  line-height:1;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.service-preview .service-faq[open] > summary::after{
  content:"\2013";
}
.service-preview .service-faq > summary:hover{color:var(--navy)}
.service-preview .service-faq-body{
  padding:0 1.4rem 1.3rem;
}
.service-preview .service-faq-body p{
  margin:0 0 .7rem;
  font-size:1rem;
  line-height:1.65;
  color:var(--ink-2);
}
.service-preview .service-faq-body p:last-child{margin-bottom:0}
.service-preview .service-faq-body ul{
  margin:.3rem 0 .9rem;
  padding-left:1.1rem;
  display:grid;
  gap:.25rem;
}
.service-preview .service-faq-body li{
  font-size:.98rem;
  line-height:1.6;
  color:var(--ink-2);
}

/* ─── Pull quote (in-body emphasis line) ───────────────────────── */
.service-preview p.service-pullquote{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.4rem, 2.4vw, 1.85rem);
  line-height:1.3;
  color:var(--navy);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  margin:2.2rem auto;
  padding:1.6rem 0;
  border-top:1px solid color-mix(in oklch, var(--gold) 50%, transparent);
  border-bottom:1px solid color-mix(in oklch, var(--gold) 50%, transparent);
  max-width:60ch;
  text-align:center;
}
/* On phones the 60ch quote fills the whole width; add side padding so it
   reads as a tighter, deliberately-centred column. */
@media (max-width: 640px){
  .service-preview p.service-pullquote{
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
}

/* ─── Compact benefits grid (12-cell suitability list) ─────────── */
.service-preview .service-benefits-grid--compact{
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  /* Every implicit row sizes to the tallest cell across all rows so
     a single long-text card (e.g. "Postpartum mothers after natural
     or caesarean section delivery") doesn't leave the second-row cards
     visibly shorter. 1fr distributes the grid's intrinsic row space
     equally, which collapses to "everyone matches the tallest". */
  grid-auto-rows:1fr;
  gap:.8rem;
}
.service-preview .service-benefits-grid--compact > li{
  padding:1.1rem 1.1rem 1.1rem 3rem;
}
.service-preview .service-benefits-grid--compact .service-benefit-num{
  /* Pump contrast — the default --gold at .85rem on cream washes out
     to the point of being barely legible. Bigger + heavier + the
     darker gold ramp variant makes the index numerals scannable
     without overpowering the body text. */
  font-size:1.1rem;
  font-weight:600;
  color:var(--gold-dk, #8d7341);
  top:1.1rem;
  left:1rem;
}
.service-preview .service-benefits-grid--compact p{
  font-size:.95rem;
  line-height:1.45;
  margin:0;
}

/* ─── Prep card supporting list (Proionic indicators) ──────────── */
.service-preview .service-prep-list{
  margin:.4rem 0 0;
  padding-left:1.1rem;
  display:grid;
  gap:.3rem;
}
.service-preview .service-prep-list li{
  font-size:.94rem;
  line-height:1.55;
  color:var(--ink-2);
}

/* ─── Section footer note (under a benefits grid, etc.) ────────── */
.service-preview .service-section-footer{
  max-width:60ch;
  margin:2.4rem auto 0;
  text-align:center;
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-2);
  font-style:italic;
}

/* ─── Course meta dl (date / time / fee row) ───────────────────── */
.service-preview .service-course-meta{
  margin:1rem 0 1.2rem;
  display:grid;
  gap:.55rem;
}
.service-preview .service-course-meta > div{
  display:grid;
  grid-template-columns:140px 1fr;
  align-items:baseline;
  gap:1rem;
  padding:.55rem 0;
  border-bottom:1px solid color-mix(in oklch, var(--navy) 8%, transparent);
}
.service-preview .service-course-meta > div:last-child{border-bottom:0}
.service-preview .service-course-meta dt{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:600;
  margin:0;
}
.service-preview .service-course-meta dd{
  margin:0;
  font-size:1rem;
  line-height:1.4;
  color:var(--ink);
  font-weight:500;
}

/* ─── 6-up process grid (Bump to Birth curriculum) ─────────────── */
.service-preview .service-process-grid--6{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.service-preview .service-process-list{
  list-style:none;
  margin:.5rem 0 0;
  padding:0;
  display:grid;
  gap:.4rem;
}
.service-preview .service-process-list li{
  position:relative;
  padding-left:1.1rem;
  font-size:.94rem;
  line-height:1.5;
  color:var(--ink-2);
}
.service-preview .service-process-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:.5rem;
  height:1px;
  background:var(--gold);
}

/* ─── FAQ alt band (visual separator between categories) ───────── */
.service-preview .service-faqs--alt{
  background:color-mix(in oklch, var(--cream, #f7f0f0) 45%, var(--bg));
}

/* ─── Inline icon on a prep-card fineprint paragraph ───────────── */
.service-preview .service-prep-fineprint{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:1.2rem 0 0;
  padding-top:1rem;
  border-top:1px solid color-mix(in oklch, var(--navy) 10%, transparent);
  font-size:.9rem;
  line-height:1.5;
  color:var(--ink-2);
  font-style:italic;
}
.service-preview .service-prep-icon{
  width:36px;
  height:36px;
  object-fit:contain;
  flex-shrink:0;
}

/* ─── Diagram figure under an areas list (postnatal target map) ── */
.service-preview .service-areas-figure{
  margin:2rem auto 0;
  max-width:780px;
  border:1px solid color-mix(in oklch, var(--navy) 10%, transparent);
  border-radius:2px;
  overflow:hidden;
  background:color-mix(in oklch, var(--cream, #f7f0f0) 35%, var(--bg));
  padding:.8rem;
}
.service-preview .service-areas-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:1px;
}

/* ─── Prep card with supporting figure (consultation/treatment) ── */
.service-preview .service-prep-card--with-figure{
  display:flex;
  flex-direction:column;
}
.service-preview .service-card-figure{
  margin:1.4rem 0 0;
  border-radius:2px;
  overflow:hidden;
  background:color-mix(in oklch, var(--cream, #f7f0f0) 50%, var(--bg));
}
.service-preview .service-card-figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
}

/* ─── Banner figures (wide marketing flyer rows) ───────────────── */
.service-preview .service-banner{
  padding-top:1.5rem;
  padding-bottom:1.5rem;
}
.service-preview .service-banner-figure{
  margin:0;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  background:color-mix(in oklch, var(--cream, #f7f0f0) 35%, var(--bg));
  border:1px solid color-mix(in oklch, var(--navy) 8%, transparent);
  padding:.8rem;
  border-radius:2px;
}
.service-preview .service-banner-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:1px;
}
.service-preview .service-banner-figure--card{
  max-width:520px;
  padding:1rem;
}

/* ─── Course gallery (paired flyer/marketing images) ───────────── */
.service-preview .service-course-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.6rem;
  margin-top:2rem;
}
.service-preview .service-course-gallery .service-banner-figure{
  max-width:none;
  margin:0;
}
.service-preview .service-course-gallery figcaption{
  margin:.8rem .25rem 0;
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.12em;
  color:var(--navy);
  text-transform:uppercase;
  font-weight:600;
  line-height:1.5;
  text-align:center;
}

/* ─── Trust marks (award badges row) ───────────────────────────── */
.service-preview .service-trust-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:2rem 3rem;
  margin:2rem 0 0;
  padding:1.6rem 1rem;
  border-top:1px solid color-mix(in oklch, var(--gold) 35%, transparent);
  border-bottom:1px solid color-mix(in oklch, var(--gold) 35%, transparent);
}
.service-preview .service-trust-row figure{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}
.service-preview .service-trust-row img{
  display:block;
  height:80px;
  width:auto;
  object-fit:contain;
}
.service-preview .service-trust-row figcaption{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:600;
}

/* ─── Photo strip (4-up marketing photos) ──────────────────────── */
.service-preview .service-photo-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:.9rem;
  margin-top:2rem;
}
.service-preview .service-photo-strip figure{
  margin:0;
  overflow:hidden;
  border-radius:2px;
}
.service-preview .service-photo-strip img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.service-preview .service-photo-strip figure:hover img{
  transform:scale(1.04);
}

/* ─── Immersive hero (full-bleed background image) ─────────────── */
.service-preview .service-hero--immersive{
  position:relative;
  width:100%;
  /* Always fits within the user's first paint (viewport minus the
     114px sticky header) so the scroll-down cue is visible without
     scrolling. Image inside uses object-fit:cover, so any crop is
     biased via object-position to preserve the empty-wall LEFT side
     (where the text sits) and the subjects on the RIGHT. */
  height:calc(100svh - 114px);
  min-height:520px;
  max-height:900px;
  padding:0 !important;
  overflow:hidden;
  isolation:isolate;
  margin:0;
  background-color:#1c1612;
}
/* Older browsers without svh support */
@supports not (height: 100svh){
  .service-preview .service-hero--immersive{
    height:calc(100vh - 114px);
  }
}
/* PARALLAX: image is anchored to the viewport, NOT the hero element.
   While the user scrolls, the image stays fixed in place; everything
   else (eyebrow, title, stats, CTA, downstream sections) flows over
   it. Downstream sections that have an opaque cream background cover
   the image; sections we deliberately mark translucent let it peek
   through for a "second look" beat. */
.service-preview .service-hero-bg{
  position:fixed !important;
  top:0 !important;          /* fill entire viewport — sticky header
                                covers the top 114px, pill floats
                                over the image when scrolled. */
  left:0 !important;
  width:100vw !important;
  height:100svh !important;
  object-fit:cover !important;
  object-position:35% center !important;
  z-index:-2;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  max-width:none !important;
  pointer-events:none;
}
@supports not (height: 100svh){
  .service-preview .service-hero-bg{
    height:100vh !important;
  }
}
.service-preview .service-hero-bg-scrim{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100vw !important;
  height:100svh !important;
  z-index:-1 !important;
  pointer-events:none;
}
/* Downstream service sections need a solid cream background to OPACK
   the fixed image. Without this, the image would bleed through all
   content. We selectively mark certain sections translucent (below)
   for the deliberate parallax peek. */
.service-preview .service-intro,
.service-preview .service-benefits,
.service-preview .service-prep,
.service-preview .service-related,
.service-preview .service-testimonials,
.service-preview .service-faqs,
.service-preview .service-cta,
.service-preview .service-areas,
.service-preview .service-oils,
.service-preview .service-process,
.service-preview .service-banner{
  background-color:#fdfaf8;
  position:relative;
  z-index:1;
}
/* TRANSLUCENT BEATS — let the fixed image peek through with a soft
   cream wash on top. Applied to a couple of strategically-placed
   sections so the parallax effect is felt without overusing it. */
.service-preview .service-areas{
  background-color:rgba(253, 250, 248, 0.72);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
/* The global site footer lives OUTSIDE .service-preview, so the
   "opaque cream cover" rule above doesn't include it. Without an
   explicit positive z-index the fixed parallax image (z-index:-2)
   can bleed through under Chromium's stacking-context quirks. Lift
   the footer into its own positioned layer so it cleanly covers. */
body.is-immersive-page .site-footer{
  position:relative;
  z-index:2;
  background-color:#f7efec;
}
.service-preview .service-testimonials{
  background-color:rgba(253, 250, 248, 0.78);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
/* Suppress the global header's hairline white border-bottom on pages
   that use the immersive hero — the 1px rgba(255,255,255,0.08) reads
   as a subtle separator strip when the page is photo-dominant. */
body:has(.service-hero--immersive) .site-header{
  border-bottom:0;
}
/* Scrim: two layers, top-edge stays clean (no top dark band).
   (1) Left → right column scrim: dark on the LEFT where text lives,
       fading to transparent on the right where photo subjects breathe.
   (2) Bottom-only fade: keeps the scroll-down cue legible over photo. */
.service-preview .service-hero-bg-scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(20, 14, 12, 0.72) 0%,
      rgba(20, 14, 12, 0.55) 28%,
      rgba(20, 14, 12, 0.25) 55%,
      rgba(20, 14, 12, 0.05) 85%,
      rgba(20, 14, 12, 0.10) 100%
    ),
    linear-gradient(180deg,
      rgba(20, 14, 12, 0.00) 0%,
      rgba(20, 14, 12, 0.00) 70%,
      rgba(20, 14, 12, 0.45) 100%
    );
}
/* Copy column: ABSOLUTELY positioned over the empty-wall LEFT third of
   the photo. Vertically centred via 50% + translateY. Width tuned so
   the "Prenatal Massage" title fits on a SINGLE line at typical
   desktop viewports, and the column doesn't crowd the right-shifted
   subjects in the photo. */
.service-preview .service-hero-immersive-inner{
  position:absolute !important;
  left:max(3rem, calc((100vw - var(--service-max)) / 2 + 1rem)) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  padding:0 !important;
  width:min(640px, calc(100vw - 4rem)) !important;
  max-width:640px !important;
  color:#fbf6f3 !important;
  text-align:left !important;
  z-index:2;
  display:block !important;
}
.service-preview .service-hero-immersive-inner > *{
  max-width:none !important;
  width:auto !important;
}
@media (max-width:720px){
  .service-preview .service-hero--immersive{
    min-height:92vh;
  }
  /* On mobile, anchor the copy in the upper-third of the photo —
     user wants it a touch higher than 33%. */
  .service-preview .service-hero-immersive-inner{
    left:1.4rem !important;
    right:1.4rem !important;
    top:22% !important;
    bottom:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
  }
  .service-preview .service-hero-bg-scrim{
    /* Mobile hero scrim — heavier baseline (40% across the top half)
       so the eyebrow + title + stats all read against a consistent
       dark backdrop instead of competing with bright image areas.
       Deeper still at the bottom for the CTA + scroll affordance. */
    background:
      linear-gradient(180deg,
        rgba(20, 14, 12, 0.40) 0%,
        rgba(20, 14, 12, 0.40) 40%,
        rgba(20, 14, 12, 0.75) 75%,
        rgba(20, 14, 12, 0.92) 100%
      );
  }
  /* Postnatal hero (only) — the new image has the model in the lower-
     middle of the frame. With object-fit:cover and a mobile hero that
     height-fits the image exactly, vertical object-position has no
     effect (no vertical room to slide). Solution: scale the image up
     from the TOP edge so the bottom 8% overflows past the viewport,
     pushing the model another notch down in the visible window while
     keeping the wall context above the eyebrow intact. The Ken Burns
     animation still drifts (1.08 -> 1.14), just from a higher base
     and anchored to the top — same 6% camera move, repositioned. */
  .service-preview--hero-anchor-top .service-hero-bg{
    transform-origin: top center !important;
    animation: heroKenBurnsTop 24s ease-out forwards !important;
  }
  @keyframes heroKenBurnsTop{
    from { transform: scale(1.08); }
    to   { transform: scale(1.14); }
  }
}
.service-preview .service-hero-eyebrow--light{
  color:rgba(251, 246, 243, 0.85);
  letter-spacing:.28em;
  font-size:.78rem;
  font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,0.45);
  /* CRITICAL: override the base .service-hero-eyebrow `margin: 0 auto`
     which would otherwise auto-centre this eyebrow inside the flex
     parent (auto margins beat align-items:flex-start). */
  margin:0 0 1rem;
  justify-content:flex-start;
}
/* Immersive eyebrow gets only a leading gold bar, not trailing — the
   symmetric ::after made the eyebrow visually centred even when the
   layout was left-anchored. Drop the trailing bar. */
.service-preview .service-hero-eyebrow--light::after{
  display:none;
}
.service-preview .service-hero-eyebrow--light::before{
  background:rgba(251, 246, 243, 0.7);
  width:28px;
}
.service-preview .service-hero-title{
  font-family:var(--font-display, var(--serif));
  /* Slightly smaller max so the full "Prenatal Massage" string fits
     on ONE line at the new 640px column width on desktop. */
  font-size:clamp(2.6rem, 5.6vw, 5.2rem);
  font-weight:500;
  line-height:0.98;
  letter-spacing:-0.03em;
  margin:0 0 1.4rem;
  color:#fbf6f3;
  text-shadow:
    0 2px 30px rgba(0,0,0,0.55),
    0 1px 8px rgba(0,0,0,0.4);
  max-width:none;
}
.service-preview .service-hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem 2.6rem;
  margin:0 0 1.6rem;
  padding:.9rem 0;
  border-top:1px solid rgba(251, 246, 243, 0.35);
  border-bottom:1px solid rgba(251, 246, 243, 0.35);
  max-width:480px;
}
.service-preview .service-hero-stats > div{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.service-preview .service-hero-stats dt{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:rgba(251, 246, 243, 0.7);
  margin:0;
}
.service-preview .service-hero-stats dd{
  margin:0;
  font-family:var(--font-display, var(--serif));
  font-size:clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight:500;
  color:#fbf6f3;
  line-height:1.1;
  letter-spacing:-.01em;
  text-shadow:0 1px 12px rgba(0,0,0,0.45);
}
.service-preview .service-hero-ctas--immersive{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  /* Override base .service-hero-ctas { justify-content: center } so
     the Book button aligns left with the eyebrow, title and stats. */
  justify-content:flex-start;
}
.service-preview .service-hero-ctas--immersive .bmb-cta--primary{
  /* Thinner CTA — was 1.05rem y / 2.4rem x. */
  padding:.62rem 1.8rem !important;
  font-size:.95rem !important;
  font-weight:600;
  background:#fbf6f3;
  color:var(--navy, #0d2c54);
  border:none;
  border-radius:999px !important;
  letter-spacing:.01em;
  box-shadow:
    0 6px 18px -6px rgba(0,0,0,0.4),
    0 1px 4px -1px rgba(0,0,0,0.25);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.service-preview .service-hero-ctas--immersive .bmb-cta--primary:hover{
  transform:translateY(-2px);
  background:#fff;
  box-shadow:
    0 16px 36px -8px rgba(0,0,0,0.55),
    0 4px 10px -2px rgba(0,0,0,0.35);
}

/* Scroll-down indicator anchored bottom-centre */
.service-preview .service-hero-scroll{
  position:absolute;
  bottom:1.4rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  text-decoration:none;
  color:rgba(251, 246, 243, 0.85);
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,0.5);
  transition:color .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.service-preview .service-hero-scroll:hover{
  color:#fff;
}
.service-preview .service-hero-scroll-label{
  opacity:.92;
}
.service-preview .service-hero-scroll-arrow{
  font-size:1.4rem;
  line-height:1;
  animation:scrollHint 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes scrollHint{
  0%, 100% { transform:translateY(0); opacity:.7; }
  50%      { transform:translateY(6px); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .service-preview .service-hero-scroll-arrow{ animation:none; }
}

/* When the page is in immersive mode, the global header should stay
   readable over a dark photo. Lift the eyebrow + nav to light tones. */
.service-preview--immersive{ background:#fbf6f3; }

/* ─── Right-aligned immersive hero (per-page opt-in) ─────────────
   Pages whose hero image has its subject on the LEFT (e.g. prenatal,
   where the therapist + mum sit in the lower-left of the frame) want
   their headline stack on the RIGHT so the copy doesn't overlap the
   subject. Opt in by adding service-preview--hero-right to the wrapper
   div. Desktop only — the mobile rule (≤720px) anchors the copy with
   left/right gutters so it's already centred regardless. */
@media (min-width: 721px) {
  .service-preview--hero-right .service-hero-immersive-inner{
    left:auto !important;
    right:max(3rem, calc((100vw - var(--service-max)) / 2 + 1rem)) !important;
    text-align:right !important;
  }
  /* The eyebrow's leading dash moves to the trailing side so it reads as
     a right-aligned label, mirroring the title alignment. */
  .service-preview--hero-right .service-hero-eyebrow--light{
    justify-content:flex-end !important;
  }
  .service-preview--hero-right .service-hero-eyebrow--light::before{
    display:none !important;
  }
  .service-preview--hero-right .service-hero-eyebrow--light::after{
    display:inline-block !important;
    content:"";
    background:rgba(251, 246, 243, 0.7);
    width:28px;
    height:1px;
    margin-left:.7rem;
  }
  /* Stats row aligns to the right edge of the column; keep the two
     stat groups in their natural order (Recommended weeks · Session
     length) but anchor the row right. */
  .service-preview--hero-right .service-hero-stats{
    justify-content:flex-end;
    margin-left:auto;
  }
  .service-preview--hero-right .service-hero-stats > div{
    align-items:flex-end;
    text-align:right;
  }
  /* CTA pushes against the right edge of the column. */
  .service-preview--hero-right .service-hero-ctas--immersive{
    justify-content:flex-end !important;
  }
  /* Chiropractic-care page — desktop only. The new SpinalSync image
     has a fair bit of empty wall above the chiropractor's head; the
     focal action (activator tool + patient's shoulder) sits in the
     lower-middle. Pull the vertical anchor down so on wide-but-short
     viewports the crop shows more of the action and less wall above. */
  .service-preview--hero-anchor-low .service-hero-bg{
    object-position:35% 65% !important;
  }
}

/* ─── Floating pill header (immersive-hero pages only) ─────────── */
/* On any page that uses the immersive hero, the global site header
   starts as a full-width dark bar pinned to the top of the viewport,
   then morphs into a centred pill-shaped floating element once the
   user scrolls past the hero. Animates via the .is-floating class
   that the bottom-of-page script toggles. */
/* Use a body class added by the page's inline JS instead of :has() —
   Chromium has a quirk where some !important declarations on a rule
   guarded by :has() are mysteriously skipped while others apply on
   the same rule. A regular body-class selector dodges the issue. */
body.is-immersive-page .site-header{
  position:sticky;
  top:0;
  z-index:50;
  /* SOLID OPAQUE CREAM — matches the global default and home.css.
     Earlier translucent warm-taupe absorbed the cyan brand logo on
     light pages; switched to solid cream so logo + nav text are
     guaranteed readable on every page regardless of what's behind.
     The .is-floating pill state below still overrides with its own
     dark pill chrome. */
  background:#fdfaf8 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid rgba(120, 80, 90, 0.10) !important;
  box-shadow:0 4px 20px -10px rgba(120, 80, 90, 0.18) !important;
  will-change:opacity;
}
/* Pill appearance / disappearance is a soft opacity FADE rather than
   a geometry morph (which read as "zoom out" to the user). The shape
   change is instant under the hood; only opacity is animated. */
@keyframes pillFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes barFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.is-immersive-page .site-header.is-floating{
  animation:pillFadeIn .32s ease-out;
}
body.is-immersive-page .site-header:not(.is-floating){
  animation:barFadeIn .25s ease-out;
}
@media (prefers-reduced-motion:reduce){
  body.is-immersive-page .site-header.is-floating,
  body.is-immersive-page .site-header:not(.is-floating){
    animation:none;
  }
}
/* Floating pill state — toggled when the user scrolls past the hero. */
body.is-immersive-page .site-header.is-floating{
  position:fixed;
  top:1rem;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 2rem);
  /* 1520 for desktop — user wanted the pill noticeably longer. */
  max-width:1520px;
  margin:0 auto;
  border-radius:999px;
  background:rgba(28, 22, 18, 0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:
    0 10px 32px -10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding:.55rem 1.4rem;
  border:1px solid rgba(255, 255, 255, 0.10);
  border-bottom:1px solid rgba(255, 255, 255, 0.10);
  gap:.6rem 1.2rem;            /* tighter than base 1rem 2rem */
  flex-wrap:nowrap;
}
@media (max-width:720px){
  body.is-immersive-page .site-header.is-floating{
    width:calc(100% - 1rem);
    top:.5rem;
    padding:.3rem .8rem;
  }
}
/* Logo + nav links shrink in the floating state so the pill stays
   compact. Logo: 80px → 40px (height), nav: .98rem → .88rem. */
body.is-immersive-page .site-header.is-floating .brand img{
  height:40px !important;
  transition:height .35s cubic-bezier(.22,1,.36,1);
}
@media (max-width:640px){
  body.is-immersive-page .site-header.is-floating .brand img{
    height:32px !important;
  }
}
body.is-immersive-page .site-header.is-floating .brand-logo{
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
body.is-immersive-page .site-header.is-floating .primary-nav .nav-root{
  font-size:.88rem;
}
body.is-immersive-page .site-header.is-floating .primary-nav .nav-root > li > a{
  padding:.35rem 0;
}
/* Animate the logo size on the base state too, so the transition is
   smooth in both directions. */
body.is-immersive-page .site-header .brand img{
  transition:height .35s cubic-bezier(.22,1,.36,1);
}

/* ─── Lean hero (no figure column, single centred copy block) ──── */
.service-preview .service-hero--lean{
  padding-top:5rem;
  padding-bottom:3rem;
  display:block;
}
.service-preview .service-hero-inner--centred{
  max-width:780px;
  margin:0 auto;
  text-align:center;
}
.service-preview .service-hero-inner--centred .bmb-eyebrow{
  margin-left:auto;
  margin-right:auto;
}

/* ─── Archive / journal layout (/blogs/) ───────────────────────── */
.service-preview--archive .service-archive-section{
  padding:4rem max(2rem, calc((100vw - var(--service-max)) / 2)) 4rem;
  border-top:1px solid color-mix(in oklch, var(--navy) 8%, transparent);
}
.service-preview--archive .service-archive-section:nth-of-type(even){
  background:color-mix(in oklch, var(--cream, #f7f0f0) 40%, var(--bg));
}
.service-preview--archive .bmb-section-head--left{
  text-align:left;
  margin-left:0;
  margin-right:0;
  max-width:none;
}
.service-preview--archive .bmb-section-head--left .bmb-eyebrow{
  margin:0 0 1.25rem;
  justify-content:flex-start;
}
.service-preview--archive .bmb-section-head--left h2{
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  text-align:left;
}
.service-preview--archive .bmb-section-head--left .service-section-lead{
  margin:1rem 0 0;
  max-width:72ch;
  text-align:left;
  font-size:1.02rem;
  line-height:1.65;
  color:var(--ink-2);
}
/* Blog archive cards — restyled 2026-06-11 to match the dedicated
   category ("See all in …") page cards: elevated white cards with
   rounded corners + soft shadow, 3-up centered grid, image-scale +
   lift on hover. Mirrors the .categories-preview .bmb-post-card design
   in categories.css so the blogs index and the topic pages read as one
   system. Markup is identical (post_card() in build.py), so the only
   change needed is here in the CSS. */
.service-preview--archive .post-grid--archive{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 360px));
  justify-content:center;
  gap:1.2rem;
  margin-top:2rem;
}
/* Sections with exactly two articles (e.g. Postnatal Massage, Baby
   Massage) — let the pair grow wider to span the same width as the
   three-up rows, instead of sitting as two narrow cards with large
   empty margins. */
.service-preview--archive .post-grid--archive:has(.bmb-post-card:nth-child(2):last-child){
  grid-template-columns:repeat(2, minmax(0, 1fr));
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}
/* On phones the wide two-up pair would become two cramped columns —
   collapse it back to a single centered column. */
@media (max-width: 720px){
  .service-preview--archive .post-grid--archive:has(.bmb-post-card:nth-child(2):last-child){
    grid-template-columns:minmax(0, 360px);
    max-width:360px;
  }
}
.service-preview--archive .post-grid--archive .bmb-post-card{
  position:relative;
  background:var(--surface);
  border:none;
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.service-preview--archive .post-grid--archive .bmb-post-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 26px rgba(120,80,90,.10), 0 30px 60px rgba(120,80,90,.08);
}
.service-preview--archive .post-grid--archive .bmb-post-card-img{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  background:linear-gradient(135deg, var(--brand-50), var(--brand-100));
  overflow:hidden;
}
.service-preview--archive .post-grid--archive .bmb-post-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.service-preview--archive .post-grid--archive .bmb-post-card:hover .bmb-post-card-img img{
  transform:scale(1.05);
}
.service-preview--archive .post-grid--archive .bmb-post-card-img--empty{
  background:linear-gradient(135deg, var(--brand-50), var(--brand-100));
}
.service-preview--archive .post-grid--archive .bmb-post-card-date{
  margin:1.4rem 1.4rem 0;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}
.service-preview--archive .post-grid--archive h3{
  margin:.6rem 1.4rem;
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.005em;
  color:var(--ink);
}
.service-preview--archive .post-grid--archive h3 a{
  color:inherit;
  text-decoration:none;
}
.service-preview--archive .post-grid--archive h3 a:hover{color:var(--brand-dk)}
.service-preview--archive .post-grid--archive .bmb-post-card-excerpt{
  margin:0 1.4rem 1rem;
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-2);
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.service-preview--archive .post-grid--archive .bmb-post-card-cta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin:auto 1.4rem 1.5rem;
  font-family:var(--sans);
  font-size:.88rem;
  letter-spacing:.005em;
  font-weight:500;
  color:var(--brand-dk);
  text-decoration:none;
  align-self:flex-start;
}
.service-preview--archive .post-grid--archive .bmb-post-card-cta span{
  display:inline-block;
  transition:transform .25s ease;
}
.service-preview--archive .post-grid--archive .bmb-post-card:hover .bmb-post-card-cta span{
  transform:translateX(4px);
}
.service-preview--archive .service-archive-more{
  margin:1.8rem 0 0;
  text-align:right;
}
.service-preview--archive .service-archive-more a{
  font-family:var(--sans);
  font-size:.86rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
  border-bottom:1px solid var(--gold);
  padding-bottom:.2rem;
  transition:color .25s ease;
}
.service-preview--archive .service-archive-more a:hover{color:var(--gold)}
@media (max-width:720px){
  .service-preview--archive .service-archive-section{padding:3rem 1rem}
  .service-preview--archive .service-archive-more{text-align:left}
}

/* ─── Trial landing page (prenatal-massage-first-trials) ───────── */
.service-preview .service-trial-badges{
  list-style:none;
  margin:1.4rem 0 1.8rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:1.6rem 2.2rem;
  border-top:1px solid color-mix(in oklch, var(--gold) 35%, transparent);
  border-bottom:1px solid color-mix(in oklch, var(--gold) 35%, transparent);
  padding:1.1rem 0;
}
.service-preview .service-trial-badges li{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.service-preview .service-trial-badges strong{
  font-family:var(--font-display, var(--serif));
  font-size:1.5rem;
  font-weight:500;
  color:var(--gold);
  letter-spacing:-.01em;
  line-height:1;
}
.service-preview .service-trial-badges span{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:600;
}
.service-preview .service-trial-fineprint{
  margin:1.2rem 0 0;
  font-size:.82rem;
  line-height:1.5;
  color:var(--ink-2);
  font-style:italic;
  letter-spacing:.01em;
}
.service-preview .service-trial-trimesters{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:.9rem;
  margin-top:1.6rem;
}
.service-preview .service-cta--trial .bmb-cta{
  padding:1rem 1.5rem;
  font-size:.95rem;
  text-align:center;
}

/* ─── Testimonials grid (used by trial + other landing surfaces) ── */
.service-preview .service-testimonials-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.4rem;
}
.service-preview .service-testimonials-grid > li{
  background:var(--bg);
  border:1px solid color-mix(in oklch, var(--navy) 10%, transparent);
  padding:1.8rem 1.6rem;
  border-radius:2px;
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
}
.service-preview .service-testimonials-grid > li::before{
  content:"\201C";
  position:absolute;
  top:.3rem;
  left:.9rem;
  font-family:var(--font-display, var(--serif));
  font-size:3rem;
  line-height:1;
  color:color-mix(in oklch, var(--gold) 55%, transparent);
}
.service-preview .service-testimonial-quote{
  margin:1.4rem 0 0;
  font-family:var(--font-display, var(--serif));
  font-size:1.08rem;
  line-height:1.5;
  color:var(--ink);
  font-style:italic;
  font-weight:400;
}
.service-preview .service-testimonial-attr{
  margin:0;
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:600;
}
.service-preview .service-testimonial-attr strong{
  font-weight:700;
  color:var(--ink);
}

/* ─── Sticky bottom CTA (appears after scrolling past the hero) ─ */
/* When the hero Book button has scrolled off-screen, this pill
   FADES IN at its final position — no slide, no scale. Toggled by
   the same JS scroll listener that flips the floating header pill. */
.service-floating-cta{
  position:fixed !important;
  left:50% !important;
  bottom:1.1rem !important;
  transform:translateX(-50%) !important;
  z-index:55;
  background:#fbf6f3 !important;
  color:var(--navy, #0d2c54) !important;
  padding:.85rem 1.7rem !important;
  border:none !important;
  border-radius:999px !important;
  font-family:var(--sans, inherit);
  font-size:.98rem !important;
  font-weight:600 !important;
  letter-spacing:.01em;
  text-decoration:none !important;
  box-shadow:
    0 14px 36px -10px rgba(0,0,0,0.5),
    0 4px 10px -3px rgba(0,0,0,0.3) !important;
  opacity:0;
  pointer-events:none;
  /* Fade only — no transform animation, so the pill simply appears
     and disappears without moving. */
  transition:opacity .35s ease;
  white-space:nowrap;
}
.service-floating-cta.is-visible{
  opacity:1;
  pointer-events:auto;
}
.service-floating-cta:hover{
  background:#fff !important;
  /* Subtle lift on hover (only after the pill is visible). */
  transform:translateX(-50%) translateY(-2px) !important;
  box-shadow:
    0 18px 44px -8px rgba(0,0,0,0.55),
    0 5px 12px -2px rgba(0,0,0,0.35) !important;
}
@media (max-width:720px){
  .service-floating-cta{
    bottom:.8rem !important;
    padding:.7rem 1.4rem !important;
    font-size:.92rem !important;
  }
}

/* ─── Anchor-scroll offset for the floating pill header ───────── */
/* When the user clicks the in-page "Scroll for benefits" arrow (or
   any in-page anchor that targets a section), the browser scrolls
   the target to the top of the viewport — which then sits BEHIND
   the floating pill (~80–100px tall). scroll-margin-top pushes the
   landing position down so the section's heading is fully visible. */
.service-preview > section[id]{
  scroll-margin-top:5.5rem;
}
@media (max-width:720px){
  .service-preview > section[id]{
    scroll-margin-top:4.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE OPTIMISATIONS — placed at end-of-file so they override all
   the earlier media-query blocks via order-of-cascade. Targeting
   ≤720px (tablet-portrait + phones), with extra tightening at ≤480px.
   ═════════════════════════════════════════════════════════════════ */

@media (max-width:720px){
  /* — Hero image anchor — horizontal anchor at 45% centres the
     heart-shape the mum's hands form (which sits ~44% across the
     photo) within the narrow mobile crop. (Was 66%, tuned for the
     previous hero image.) Vertical value is inert here: a landscape
     image scaled to cover a portrait phone frame overflows only
     horizontally, so the second number has no visible effect. — */
  .service-preview .service-hero-bg{
    object-position:45% 15% !important;
  }
  /* Prenatal page — the new hero image places the therapist and mum on
     the LEFT half of the frame (orchid + curtain take the right). Shift
     the mobile anchor left so the humans are inside the portrait crop
     instead of the orchid-and-curtain backdrop. Higher specificity than
     the rule above so the other 13 service pages keep 66% 15%. */
  .service-preview--hero-right .service-hero-bg{
    object-position:30% 50% !important;
  }
  /* Lactation-massage page — the breastfeeding image has the mother's
     blurry hair on the left and the baby's face + eye-contact in the
     centre-left. The default 66% anchor crops it to just the baby's
     right side (ear + onesie). Shift the anchor left so the baby's
     full face + the mother's hair frame the composition. Lighter shift
     than the prenatal --hero-right since text still centres here. */
  .service-preview--hero-anchor-left .service-hero-bg{
    object-position:35% 50% !important;
  }
  /* Baby-massage page — softer mid-frame anchor. The default 66% pushes
     the composition far right (just the hands + baby's foot). 50% pulls
     it back to centre — same vertical anchor as the default so the
     image's vertical positioning is unchanged, only horizontal shifts. */
  .service-preview--hero-anchor-center .service-hero-bg{
    object-position:50% 15% !important;
  }
  /* Burger bars stay DARK on the new solid-cream header (the global
     default already paints them var(--ink) which is correct for the
     light bar). Earlier this override forced cream burger bars when
     the header was warm-taupe; with solid cream that becomes
     invisible. Now an explicit dark colour to match the rest of the
     bar-state nav chrome. */
  body.is-immersive-page .bmb-nav-toggle-bar{
    background:var(--ink) !important;
  }
  /* — Clip horizontal overflow without creating a scroll container.
       `overflow-x: clip` (vs hidden) does NOT promote the body into
       a scroll container, so `position: sticky` on the header keeps
       working. Necessary because the floating CTA can briefly bleed
       past the viewport edge during its enter animation, and the
       fixed parallax img is 100vw across (no overflow but defensive). */
  html, body{
    overflow-x:clip !important;
  }
  /* Fallback for browsers that don't support overflow-x: clip — use
     hidden on html only (not body) so body sticky-position still
     anchors against the viewport. */
  @supports not (overflow-x: clip){
    html{overflow-x:hidden !important}
  }
  /* — When the header reaches its floating pill state on mobile,
       give it a translucent taupe surface (NOT the dark pill colour
       the desktop pill uses) so it matches the rest of the immersive
       header palette. — */
  body.is-immersive-page .site-header.is-floating{
    background:rgba(60, 50, 44, 0.62) !important;
  }
  /* — Hero inner column: centred at mobile widths so the text +
     button sit in a tidy stack regardless of the photo composition. — */
  .service-preview .service-hero-immersive-inner{
    text-align:center !important;
    align-items:center !important;
  }
  /* — Hero title: bigger min for impact on phones — */
  .service-preview .service-hero-title{
    font-size:clamp(2.8rem, 12vw, 4rem);
    line-height:0.96;
    letter-spacing:-.025em;
    margin:0 0 1.2rem;
    max-width:100%;
  }
  /* Hero eyebrow: centred + dot-aligned, tighter spacing */
  .service-preview .service-hero-eyebrow--light{
    font-size:.7rem;
    letter-spacing:.22em;
    margin:0 auto .9rem !important;
    justify-content:center !important;
  }
  /* Drop the leading gold bar at mobile — it nudges the eyebrow off
     the centre line. */
  .service-preview .service-hero-eyebrow--light::before{
    display:none !important;
  }
  /* Hero stats: centred horizontally on mobile */
  .service-preview .service-hero-stats{
    gap:.7rem 1.6rem;
    padding:.75rem 0;
    margin:0 auto 1.2rem !important;
    justify-content:center;
    max-width:100%;
  }
  .service-preview .service-hero-stats > div{align-items:center;text-align:center}
  .service-preview .service-hero-stats dt{font-size:.68rem;letter-spacing:.16em}
  .service-preview .service-hero-stats dd{font-size:1.2rem}
  /* Hero CTA wrapper centres the Book button */
  .service-preview .service-hero-ctas--immersive{
    justify-content:center !important;
    width:100%;
  }
  /* Hero CTA: thinner button on phones */
  .service-preview .service-hero-ctas--immersive .bmb-cta--primary{
    padding:.55rem 1.5rem !important;
    font-size:.9rem !important;
  }

  /* — Section padding — slightly tighter than the base mobile rule — */
  .service-preview > section{padding:2.4rem 1rem}
  .service-preview .bmb-section-head{margin-bottom:1.8rem}
  .service-preview .bmb-section-head h2{
    font-size:clamp(1.5rem,5.5vw,2.1rem);
    line-height:1.15;
  }
  .service-preview .bmb-section-head .bmb-eyebrow{
    font-size:1.05rem;
    letter-spacing:.18em;
    margin-bottom:.8rem;
  }
  .service-preview .service-section-lead{
    font-size:.98rem;
    line-height:1.55;
  }

  /* — Intro body paragraphs — */
  .service-preview .service-intro-body p{
    font-size:1rem;
    line-height:1.65;
    margin:0 0 1.1rem;
  }

  /* — Benefits cards (immersive prototype only) — compress to a 2×4
       grid so all 8 cards + the section header fit a single phone
       viewport instead of stacking ~880px tall. Overrides the global
       ≤560px 1-col fallback via the body.is-immersive-page prefix. — */
  body.is-immersive-page .service-preview .service-benefits-grid{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:.45rem !important;
  }
  body.is-immersive-page .service-preview .service-benefits-grid > li{
    padding:.65rem .7rem .7rem .75rem !important;
    gap:.2rem !important;
    border-radius:12px !important;
    min-height:auto !important;
  }
  body.is-immersive-page .service-preview .service-benefit-num{
    font-size:.9rem !important;
    line-height:1 !important;
    margin:0 0 .1rem !important;
  }
  body.is-immersive-page .service-preview .service-benefits-grid p{
    font-size:.78rem !important;
    line-height:1.35 !important;
  }
  body.is-immersive-page .service-preview .service-benefits{
    padding-top:1.8rem !important;
    padding-bottom:1.8rem !important;
  }
  body.is-immersive-page .service-preview .service-benefits .bmb-section-head{
    margin-bottom:1rem !important;
  }
  body.is-immersive-page .service-preview .service-benefits .bmb-section-head h2{
    font-size:1.35rem !important;
    margin-bottom:.45rem !important;
  }
  body.is-immersive-page .service-preview .service-benefits .service-section-lead{
    font-size:.83rem !important;
    line-height:1.45 !important;
    margin:0 !important;
  }
  body.is-immersive-page .service-preview .service-benefits .bmb-eyebrow{
    font-size:.92rem !important;
    letter-spacing:.16em !important;
    margin-bottom:.55rem !important;
  }
  /* Fallback for the very-narrow legacy mobile rule (kept for other
     service pages) — leave the non-immersive rules untouched. */
  .service-preview .service-benefits-grid{gap:.7rem}
  .service-preview .service-benefits-grid > li{
    padding:1.3rem 1.1rem 1.3rem 1.1rem;
    min-height:auto;
  }
  .service-preview .service-benefit-num{
    font-size:1.05rem;
  }
  .service-preview .service-benefits-grid p{font-size:.95rem;line-height:1.5}

  /* — Prep cards (2-up "Preparation + Technique") — */
  .service-preview .service-prep-grid{
    grid-template-columns:1fr;
    gap:1.1rem;
  }
  .service-preview .service-prep-card{
    padding:1.8rem 1.3rem;
  }
  .service-preview .service-prep-card h2,
  .service-preview .service-prep-card h3{
    font-size:1.35rem;
    margin-bottom:.8rem;
  }
  .service-preview .service-prep-card p{font-size:.98rem;line-height:1.6}
  .service-preview .service-prep-note{font-size:.9rem;margin-top:.7rem}
  /* — Prep cards — immersive prototype compression. Drops the body
       text + heading down to the same scale as the new benefits grid
       so the page reads as one continuous rhythm instead of jumping
       up to a heavier typography on the prep cards. Also tightens
       the card padding, prep-note callout, eyebrow, figure margin,
       and section vertical padding. Scoped to body.is-immersive-page
       so non-prototype service pages keep their existing scale. — */
  body.is-immersive-page .service-preview .service-prep{
    padding-top:1.6rem !important;
    padding-bottom:1.6rem !important;
  }
  body.is-immersive-page .service-preview .service-prep-grid{
    gap:.8rem !important;
  }
  body.is-immersive-page .service-preview .service-prep-card{
    padding:1.1rem 1.1rem 1.2rem !important;
  }
  body.is-immersive-page .service-preview .service-prep-card h2,
  body.is-immersive-page .service-preview .service-prep-card h3{
    font-size:1.15rem !important;
    line-height:1.2 !important;
    margin:.15rem 0 .5rem !important;
  }
  body.is-immersive-page .service-preview .service-prep-card p{
    font-size:.82rem !important;
    line-height:1.5 !important;
    margin:0 0 .55rem !important;
  }
  body.is-immersive-page .service-preview .service-prep-card .service-card-eyebrow,
  body.is-immersive-page .service-preview .service-prep-card .bmb-eyebrow{
    font-size:.72rem !important;
    letter-spacing:.18em !important;
    margin:0 0 .45rem !important;
  }
  /* Note callout — specificity bumped (`p.service-prep-note` + the
     parent .service-prep-card) so it beats the card-p body rule above
     and reads slightly smaller, matching the note's secondary role. */
  body.is-immersive-page .service-preview .service-prep-card p.service-prep-note{
    font-size:.75rem !important;
    line-height:1.45 !important;
    margin-top:.45rem !important;
    padding:.6rem .75rem !important;
  }
  body.is-immersive-page .service-preview .service-card-figure{
    margin-top:.85rem !important;
  }
  body.is-immersive-page .service-preview .service-card-figure img{
    aspect-ratio:16/9 !important;
  }

  /* — Related-service cards — */
  .service-preview .service-related-grid{gap:1.1rem}
  .service-preview .service-related-body{padding:1.5rem 1.3rem}
  .service-preview .service-related-grid h3{font-size:1.25rem;margin-bottom:.5rem}
  .service-preview .service-related-grid p{font-size:.95rem;line-height:1.55}

  /* — Testimonial story cards (left-aligned content cards) — */
  .service-preview .service-stories-grid{gap:1.1rem}
  .service-preview .service-story{padding:1.6rem 1.3rem}
  .service-preview .service-story blockquote{
    font-size:.98rem;
    line-height:1.55;
    margin:.6rem 0 1rem;
  }
  .service-preview .service-story-name{font-size:.95rem}
  .service-preview .service-story-role{font-size:.78rem}

  /* — Areas list (Neck · Shoulder ·…) — */
  .service-preview .service-areas-list{
    font-size:1.1rem;
    gap:.3rem .55rem;
    max-width:none;
  }

  /* — FAQ accordion summaries — */
  .service-preview .service-faq-list summary,
  .service-preview .service-faqs > .service-faqs-list summary,
  .service-preview .service-faq > summary{
    padding:1rem 1.2rem;
    padding-right:2.4rem;
    font-size:1rem;
  }

  /* — Final CTA section — the base rule pins padding-top/bottom to
     6rem, which is huge on mobile. Compress to 3rem. — */
  .service-preview .service-cta{
    padding-top:3rem !important;
    padding-bottom:3rem !important;
  }
  .service-preview .service-cta h2{font-size:1.6rem;margin-bottom:.8rem}
  .service-preview .service-cta p{font-size:.98rem;margin-bottom:1.4rem}
  .service-preview .service-cta-actions{gap:.7rem}
  .service-preview .service-cta .bmb-cta{padding:.8rem 1.4rem;font-size:.95rem}

  /* — Floating pill on mobile: ultra-compact pill, just logo + hamburger — */
  body.is-immersive-page .site-header.is-floating{
    padding:.25rem .7rem !important;
    border-radius:999px !important;
    gap:.4rem !important;
  }
  body.is-immersive-page .site-header.is-floating .brand img{
    height:30px !important;
  }
  /* — Mobile nav fix — when the burger opens the menu we MUST drop
       backdrop-filter from the header. backdrop-filter (CSS spec)
       creates a containing block for position:fixed descendants,
       which traps the full-screen .primary-nav inside the header's
       ~50px height — only the first menu item shows. Stripping
       backdrop-filter releases the nav back to the viewport.
       Also paint the header opaque cream + dark burger bars so the
       header reads cleanly above the open menu instead of disappearing
       into the translucent wash. — */
  body.is-immersive-page.mobile-nav-open .site-header{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:var(--bg) !important;
    border-bottom:1px solid var(--line) !important;
    box-shadow:none !important;
  }
  body.is-immersive-page.mobile-nav-open .bmb-nav-toggle-bar{
    background:#2a2a2a !important;
  }
  /* Belt-and-braces: the .primary-nav overlay already has its own
     dark-on-cream burger via the global style.css mobile rules. We
     additionally pin a high z-index so it sits above any leftover
     parallax bleed. */
  body.is-immersive-page.mobile-nav-open .primary-nav{
    z-index:95 !important;
    background:var(--bg) !important;
  }
}

/* Even tighter at <=480px (single-handed phones) */
@media (max-width:480px){
  .service-preview .service-hero-title{
    font-size:clamp(2.5rem, 11.5vw, 3.4rem);
  }
  .service-preview .bmb-section-head h2{
    font-size:clamp(1.4rem, 5.2vw, 1.9rem);
  }
  .service-preview > section{padding:2.2rem .9rem}
}


/* ═══════════════════════════════════════════════════════════════════
   MOTION — service pages
   Hero on load: slow Ken Burns drift on the bg image + staggered
   fade-up on the copy stack + gentle bounce on the scroll affordance.
   On scroll: IntersectionObserver toggles .is-revealed on a curated
   list of section elements; each fades up into place, with grids
   staggered child-by-child and the prep card figures swiping in
   via clip-path. Reduced motion is honoured at the bottom.
   ═════════════════════════════════════════════════════════════════ */

/* —— Hero load animations —— */
.service-preview .service-hero-bg{
  animation: heroKenBurns 24s ease-out forwards;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes heroKenBurns{
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.service-preview .service-hero-immersive-inner > *{
  opacity: 0;
  animation: heroFadeUp .85s cubic-bezier(.22, 1, .36, 1) forwards;
}
.service-preview .service-hero-immersive-inner > :nth-child(1){ animation-delay: .15s; }
.service-preview .service-hero-immersive-inner > :nth-child(2){ animation-delay: .32s; }
.service-preview .service-hero-immersive-inner > :nth-child(3){ animation-delay: .52s; }
.service-preview .service-hero-immersive-inner > :nth-child(4){ animation-delay: .72s; }
@keyframes heroFadeUp{
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.service-preview .service-hero-scroll{
  opacity: 0;
  /* Dedicated keyframes that carry the translateX(-50%) centering
     through the transform — the generic heroFadeUp uses translateY
     only, which would wipe out the X centering and briefly flash the
     affordance at the left edge of the hero before scrollBounce takes
     over. Including translate(-50%, ...) here keeps it centred the
     whole way. */
  animation:
    heroScrollFadeUp .6s cubic-bezier(.22, 1, .36, 1) 1s forwards,
    scrollBounce 2.4s ease-in-out 1.7s infinite;
}
@keyframes heroScrollFadeUp{
  from { opacity: 0; transform: translate(-50%, 22px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes scrollBounce{
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* —— Scroll-reveal infra ——
   Baseline state (opacity 0, lift, transition) is applied to the
   reveal target selectors DIRECTLY (not via a runtime .reveal class)
   so first paint already shows them hidden — no opacity 1→0 flash
   when JS runs at the end of body. Gated on `html.js` so users with
   JavaScript disabled see everything at the default opacity 1, never
   stuck behind a class that never gets toggled. The IIFE only adds
   `.is-revealed` to elements as they cross the viewport. */
html.js .service-preview .bmb-section-head,
html.js .service-preview .service-intro-body,
html.js .service-preview .service-benefits-grid > li,
html.js .service-preview .service-areas-list li,
html.js .service-preview .service-prep-card,
html.js .service-preview .service-stories-grid > .service-story,
html.js .service-preview .service-related-grid > a,
html.js .service-preview .service-faq,
html.js .service-preview .service-faqs-list > details,
html.js .service-preview .service-cta{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .85s cubic-bezier(.22, 1, .36, 1),
    transform .85s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
html.js .service-preview .bmb-section-head.is-revealed,
html.js .service-preview .service-intro-body.is-revealed,
html.js .service-preview .service-benefits-grid > li.is-revealed,
html.js .service-preview .service-areas-list li.is-revealed,
html.js .service-preview .service-prep-card.is-revealed,
html.js .service-preview .service-stories-grid > .service-story.is-revealed,
html.js .service-preview .service-related-grid > a.is-revealed,
html.js .service-preview .service-faq.is-revealed,
html.js .service-preview .service-faqs-list > details.is-revealed,
html.js .service-preview .service-cta.is-revealed{
  opacity: 1;
  transform: translateY(0);
}

/* Benefit cards — fade-up + scale-in for a touch of playfulness, with
   a row-aware stagger (60ms apart, 8 slots = the longest list). */
html.js .service-preview .service-benefits-grid > li{
  transform: translateY(28px) scale(.96);
}
html.js .service-preview .service-benefits-grid > li.is-revealed{
  transform: translateY(0) scale(1);
}
html.js .service-preview .service-benefits-grid > li:nth-child(1){ transition-delay: 0ms; }
html.js .service-preview .service-benefits-grid > li:nth-child(2){ transition-delay: 60ms; }
html.js .service-preview .service-benefits-grid > li:nth-child(3){ transition-delay: 120ms; }
html.js .service-preview .service-benefits-grid > li:nth-child(4){ transition-delay: 180ms; }
html.js .service-preview .service-benefits-grid > li:nth-child(5){ transition-delay: 240ms; }
html.js .service-preview .service-benefits-grid > li:nth-child(6){ transition-delay: 300ms; }
html.js .service-preview .service-benefits-grid > li:nth-child(7){ transition-delay: 360ms; }
html.js .service-preview .service-benefits-grid > li:nth-child(8){ transition-delay: 420ms; }

/* Target-area chips — quick cascade, 35ms apart, 12 slots = longest. */
html.js .service-preview .service-areas-list li{
  transform: translateY(14px);
  transition-duration: .55s;
}
html.js .service-preview .service-areas-list li:nth-child(1){ transition-delay: 0ms; }
html.js .service-preview .service-areas-list li:nth-child(2){ transition-delay: 35ms; }
html.js .service-preview .service-areas-list li:nth-child(3){ transition-delay: 70ms; }
html.js .service-preview .service-areas-list li:nth-child(4){ transition-delay: 105ms; }
html.js .service-preview .service-areas-list li:nth-child(5){ transition-delay: 140ms; }
html.js .service-preview .service-areas-list li:nth-child(6){ transition-delay: 175ms; }
html.js .service-preview .service-areas-list li:nth-child(7){ transition-delay: 210ms; }
html.js .service-preview .service-areas-list li:nth-child(8){ transition-delay: 245ms; }
html.js .service-preview .service-areas-list li:nth-child(9){ transition-delay: 280ms; }
html.js .service-preview .service-areas-list li:nth-child(10){ transition-delay: 315ms; }
html.js .service-preview .service-areas-list li:nth-child(11){ transition-delay: 350ms; }
html.js .service-preview .service-areas-list li:nth-child(12){ transition-delay: 385ms; }

/* Testimonial stories — drift in with extra lift, stagger 110ms (3 cards). */
html.js .service-preview .service-stories-grid > .service-story{
  transform: translateY(36px);
  transition-duration: .9s;
}
html.js .service-preview .service-stories-grid > .service-story:nth-child(1){ transition-delay: 0ms; }
html.js .service-preview .service-stories-grid > .service-story:nth-child(2){ transition-delay: 110ms; }
html.js .service-preview .service-stories-grid > .service-story:nth-child(3){ transition-delay: 220ms; }

/* Related service cards — stagger 90ms apart (typically 3). */
html.js .service-preview .service-related-grid > a:nth-child(1){ transition-delay: 0ms; }
html.js .service-preview .service-related-grid > a:nth-child(2){ transition-delay: 90ms; }
html.js .service-preview .service-related-grid > a:nth-child(3){ transition-delay: 180ms; }

/* Prep card figures — swipe reveal from left to right via clip-path,
   tied to the PARENT card's `.is-revealed` state (instead of observing
   the figure independently). Observing nested figures separately was
   unreliable in production — they could end up stuck at the clipped
   baseline if the IntersectionObserver threshold never fired on them,
   leaving an invisible image inside an otherwise-revealed card. */
html.js .service-preview .service-card-figure{
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s cubic-bezier(.7, 0, .25, 1) .15s;
  will-change: clip-path;
}
html.js .service-preview .service-prep-card.is-revealed .service-card-figure{
  clip-path: inset(0 0 0 0);
}

/* Reduced motion — kill every animation and transition above.
   Elements stay in their final state (opacity 1, no transform,
   clip-path none) so nothing is ever hidden. */
@media (prefers-reduced-motion: reduce){
  html.js .service-preview .service-hero-bg,
  html.js .service-preview .service-hero-immersive-inner > *,
  html.js .service-preview .service-hero-scroll,
  html.js .service-preview .bmb-section-head,
  html.js .service-preview .service-intro-body,
  html.js .service-preview .service-benefits-grid > li,
  html.js .service-preview .service-areas-list li,
  html.js .service-preview .service-prep-card,
  html.js .service-preview .service-card-figure,
  html.js .service-preview .service-stories-grid > .service-story,
  html.js .service-preview .service-related-grid > a,
  html.js .service-preview .service-faq,
  html.js .service-preview .service-faqs-list > details,
  html.js .service-preview .service-cta{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}