/* ==========================================================================
   Advanced Health Chiropractic - service page template
   Loaded after site.css on the five service pages. Plan: service-page-template.md.
   Every section here animates only with the shared reveal pieces in site.css
   (.rv, .rv-img, .rv-h, .rule-anim, .mask, .fade). Nothing adds a new motion.
   ========================================================================== */

/* ---------- theming ------------------------------------------------------
   One attribute on <html> picks the service's field colour. on-field holds on
   all three in both themes, so copy on a field is always on-field. */
html[data-service]{--field:var(--line-strong)}
html[data-service="pregnancy"],html[data-service="postnatal"]{--field:var(--blush)}
html[data-service="children"],html[data-service="teens"]{--field:var(--sky)}
html[data-service="adults"],html[data-service="start"]{--field:var(--lime)}

/* Images carry width and height for layout stability; the CSS aspect-ratio
   and width win, so the height attribute must not pin the box. */
img[height]{height:auto}

.display-l{font-family:var(--font-sans);font-weight:300;font-size:38px;line-height:41px;letter-spacing:-.025em}
.display-s{font-family:var(--font-sans);font-weight:300;font-size:26px;line-height:32px;letter-spacing:-.015em}
@media (min-width:768px){
  .display-l{font-size:56px;line-height:58px}
  .display-s{font-size:32px;line-height:38px}
}

/* ---------- 1. opener ------------------------------------------------------
   A split hero. The photograph fills the right half from under the solid
   header to the foot of the first screen; the left half is the service's field
   carrying the homepage hero's pieces - the title rising line by line, a
   one-line lede, Book Now with a quiet text link, and the stars line. One
   headline, and Book Now inside the first screen on every device. On phones
   the photo leads as a short band above the field. */
.opener{display:grid;grid-template-areas:"media" "copy";
  padding-top:calc(var(--promo-h) + var(--nav-h) + env(safe-area-inset-top,0px))}
.opener__copy{grid-area:copy;background:var(--field);color:var(--on-field);padding:var(--s6) var(--gutter) var(--s7)}
.opener__copy .overline{opacity:.75}
.opener__title{margin-top:var(--s4);font-weight:300;font-size:clamp(40px,4.4vw,64px);line-height:1.03;letter-spacing:-.03em}
.opener__lede{margin-top:var(--s5);max-width:40ch}
.opener__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s6)}
/* the homepage hero's underlined text link, in ink for the field */
.opener__anchor{color:var(--on-field);text-decoration:none;font-size:16px;letter-spacing:-.02em;position:relative;
  border-bottom:1px solid rgba(38,41,31,.4);padding-bottom:3px;transition:border-color var(--t)}
.opener__anchor::after{content:"";position:absolute;inset:-8px 0}
.opener__anchor:hover{border-color:var(--on-field)}
/* two set lines, so no fact is ever left alone on a line of its own */
.opener__trust{margin-top:var(--s5);font-size:14px;line-height:20px}
.opener__trust p:first-child{display:flex;align-items:center;gap:10px}
.opener__trust p+p{margin-top:var(--s1)}
.opener__trust .stars{letter-spacing:2px;font-weight:400;font-size:13px}
/* Dot-separated rows that wrap cleanly: every item carries its dot in front,
   and the row is pulled left by one dot's width inside a clipping parent, so
   whichever item starts a line has its dot cut off. No line ever starts or
   ends on a stray separator, at any width. */
.dots{overflow:hidden}
.dots>span{display:flex;flex-wrap:wrap;row-gap:4px;margin-left:-22px}
.dots>span>span::before{content:"\00B7";display:inline-block;width:22px;text-align:center;opacity:.6}
.opener__media{grid-area:media;margin:0;position:relative}
.opener__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:62% 28%}

@media (max-width:767px){ .opener__actions .btn{width:100%} }
@media (min-width:600px) and (max-width:1023px){ .opener__media img{aspect-ratio:16/9;object-position:60% 30%} }
@media (min-width:1024px){
  .opener{grid-template-columns:1fr 1fr;grid-template-areas:"copy media";min-height:max(100svh,640px)}
  /* the copy's left edge stays on the 1160px measure the rest of the page uses */
  .opener__copy{display:flex;flex-direction:column;justify-content:center;
    padding:var(--s8) var(--s8) var(--s8) max(var(--gutter),calc((100vw - 1160px) / 2 + var(--gutter)))}
  .opener__media img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:58% 30%}
}

/* ---------- 1a. why us -----------------------------------------------------
   The homepage's proof band, set the way the FAQ is: the claim held in a
   narrow column, the four facts as a 2x2 beside it. Cream ground and the
   heavy ink rule over each fact, as on the homepage. The figures are plain
   text apart from the years, which count up as on the homepage; the fee
   never ticks. */
.why{display:grid;gap:var(--s7)}
@media (min-width:1024px){ .why{grid-template-columns:4fr 8fr;gap:var(--s8);align-items:start} }
.why .overline{color:var(--lime-text)}
.why .h2{margin-top:var(--s3);max-width:16ch}
.why .proof li{border-top:3px solid var(--ink)}
@media (min-width:1024px){
  .why .proof{grid-template-columns:1fr 1fr}
  .why .proof li:nth-child(odd){border-left:0}
}
/* Birthcare as a credibility line under the facts: the logo and one sentence,
   no link, so it adds trust high on the page without leading anyone away. The
   full row with its link stays in Keep exploring. Hidden with the rest of the
   Birthcare feature (data-feature). */
.why__bc{display:flex;align-items:center;gap:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line-strong)}
.why__bc img{width:112px;height:auto;flex:none}
@media (min-width:1024px){ .why__bc{grid-column:2;margin-top:calc(-1 * var(--s7) + var(--s2))} }

/* ---------- 1b. statement ---------------------------------------------------
   The homepage's first statement band, as it stood before it became an
   editorial spread: one line in `statement` type, centred, the reasoning under
   it and a single link on. Cream, so it parts the opener from the white list. */
.statement-c{background:var(--surface-cream);padding-block:var(--s8);text-align:center}
@media (min-width:768px){ .statement-c{padding-block:var(--s10)} }
.statement-c .statement{max-width:19ch;margin-inline:auto}
.statement-c p{max-width:52ch;margin:var(--s5) auto 0}
.statement-c .dot-link{margin-top:var(--s5)}
/* On a sky field where the band before it is also cream (adult care), so the
   statement reads as its own section; muted grey is too faint on sky, so the
   text takes the field's ink */
.statement-c--sky{background:var(--sky);color:var(--on-field)}
.statement-c--sky p.muted{color:var(--on-field)}

/* a section's two-line setup under its heading, at the homepage's intro
   measure (What we look at, Stages) */
.sec-intro{margin-top:var(--s5);max-width:64ch}

/* ---------- 2. annotated photo ---------------------------------------------
   One photograph with numbered markers on it, beside a hairline list. Each
   row's note is always open - the homepage condition list folds its notes, this
   one does not, so it reads as a list rather than a menu. A row and its marker
   light each other (site.js). The markers are aria-hidden: the list is the
   content and the photograph is the illustration. */
.annot{display:grid;gap:var(--s7);margin-top:var(--s7)}
@media (min-width:1024px){
  .annot{grid-template-columns:5fr 7fr;gap:var(--s8);align-items:start}
}
.annot__frame{position:relative}
.annot__frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* Row links sit under their note as plain underlined text: the koru is kept
   for section-level links, so a list of them does not read as a column of
   bullets (client review, October 2026). */
.annot__list .dot-link::before{display:none}
.annot__list .dot-link span{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.annot__list .dot-link span::after{display:none}
/* Side by side, a 4:5 photo beside a longer list. Stretching it to the list made
   a strip, a second photo under it was too busy, so it stays 4:5 and, as the
   page's one pinned photo (.pin), holds still beside the list as it scrolls,
   stopping at the end of the column. Rows are a little tighter than on phones
   to keep the list short. */
@media (min-width:1024px){
  .annot__media.pin{position:sticky;top:calc(var(--promo-h) + var(--nav-h) + env(safe-area-inset-top,0px) + var(--s6))}
  .annot .annot__list li{padding-block:var(--s4)}
}
.annot__pin{position:absolute;left:var(--x);top:var(--y);width:28px;height:28px;margin:-14px 0 0 -14px;
  display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--ink-inverse);
  border:2px solid var(--surface);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;
  transition:background-color var(--t),color var(--t),opacity var(--t),transform var(--t),border-color var(--t)}
.annot.has-active .annot__pin{opacity:.4}
.annot .annot__pin.is-on{opacity:1;background:var(--field);color:var(--on-field);
  border-color:var(--ink);transform:scale(1.15)}
.annot__list li{position:relative;display:grid;grid-template-columns:28px 1fr;gap:var(--s4);
  padding-block:var(--s5);border-top:1px solid var(--line-strong);cursor:default}
.annot__list li:last-child{border-bottom:1px solid var(--line-strong)}
/* the active row takes the field colour on its own rule, the same device as the
   homepage condition list and the category bars */
.annot__list li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;
  background:var(--field);opacity:0;transition:opacity var(--t)}
.annot__list li.is-on::before{opacity:1}
.annot__n{font-size:13px;color:var(--ink-muted);padding-top:5px;font-variant-numeric:tabular-nums}
.annot__list p{margin-top:var(--s2);max-width:52ch}
.annot__close{margin-top:var(--s6);max-width:52ch}
.annot__more{margin-top:var(--s4)}

/* ---------- first visit, wide ---------------------------------------------
   On the service pages the first visit is the one section per page with a wide
   photo: heading, rule and price line, the photo, the four steps side by side,
   then a closing group (note, link, booking) under a hairline. Everything that
   is read sits on the left edge, top to bottom; only the photo and the steps run
   full width (client review, October 2026: the split heading and booking row
   felt scattered). Phones stack the steps and crop the photo a little taller. */
.fvw__head p{max-width:64ch}
.fvw__head .rule-anim{width:100%}
.fvw__media{margin-top:var(--s6)}
.fvw__media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.fvw .steps{margin-top:var(--s6)}
.fvw .steps li:last-child{border-bottom:0}
.fvw__foot{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line-strong)}
.fvw__foot .fv-next{margin-top:0;max-width:64ch}
@media (min-width:768px){
  .fvw__media img{aspect-ratio:2/1}
  /* each step spans three shared rows (number, heading, note), so when one
     heading wraps every note still starts on the same line */
  .fvw .steps{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6);row-gap:0}
  .fvw .steps li{display:grid;grid-template-columns:none;grid-template-rows:subgrid;grid-row:span 3;
    row-gap:var(--s3);border-bottom:0;padding-block:var(--s4) var(--s5)}
  .fvw .steps li>div{display:contents}
  .fvw .steps .n{padding-top:0}
  .fvw .steps h3{margin:0;align-self:start}
  .fvw .steps h3+p{margin-top:0}
  .fvw__foot{margin-top:var(--s5)}
}
@media (min-width:1024px){
  .fvw .steps{grid-template-columns:repeat(4,1fr)}
}

/* ---------- 3. spotlight ---------------------------------------------------
   The homepage's ink band, mirrored: photo left, argument right, opening on a
   one heading and a body-lg opening line, with room for a cited source under a hairline. */
.spot__grid{display:grid;gap:var(--s7)}
@media (min-width:1024px){ .spot__grid{grid-template-columns:5fr 7fr;column-gap:var(--s8);align-items:center} }
.spot__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* Beside longer text the photo grows to the text's height (caption still under
   it), up to 5:8 so it never becomes a strip; beside shorter text it keeps 4:5
   and the text sits centred as before. */
@media (min-width:1024px){
  .spot__grid{align-items:stretch}
  .spot__text{align-self:center}
  .spot__fig{display:flex;flex-direction:column;container-type:inline-size}
  .spot__fig img{flex:1 0 auto;max-height:160cqw}
}
.spot__fig figcaption{margin-top:var(--s3);font-size:15px;line-height:23px;color:rgba(247,246,240,.66)}
.spot__text .overline{color:var(--lime)}
/* one heading only: the opening line is the first sentence of the body at
   body-lg, not a display-size pull line that reads as a second heading */
.spot__text .spot__lede{margin-top:var(--s5);max-width:52ch}
.spot__text .spot__lede+p.body{margin-top:var(--s4)}
.spot__text p.body{margin-top:var(--s5);max-width:56ch}
.spot__text p.body+p.body{margin-top:var(--s4)}
.spot__note{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgba(247,246,240,.34);
  font-size:14px;line-height:21px;color:rgba(247,246,240,.78);max-width:62ch}
.spot__note a{color:var(--ink-inverse)}
.spot__text .dot-link{margin-top:var(--s5)}

/* steps inside the ink spotlight (postnatal's newborn check) and a short
   hairline fact list (adult ACC): the homepage's .steps rhythm, on ink */
.spot__steps{margin-top:var(--s6);border-top:1px solid rgba(247,246,240,.34)}
.spot__steps li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);padding-block:var(--s4);
  border-bottom:1px solid rgba(247,246,240,.34)}
.spot__steps .n{font-size:13px;color:rgba(247,246,240,.66);padding-top:4px;font-variant-numeric:tabular-nums}
.spot__steps h3{font-size:20px;line-height:26px}
.spot__steps p{margin-top:var(--s1);color:rgba(247,246,240,.78);max-width:52ch}
.spot__facts{margin-top:var(--s6);border-top:1px solid rgba(247,246,240,.34)}
.spot__facts li{padding-block:var(--s3);border-bottom:1px solid rgba(247,246,240,.34);font-size:15px;line-height:22px;
  color:rgba(247,246,240,.86)}
/* an article link under an annotated row's note */
.annot__list .dot-link{margin-top:var(--s3)}

/* ---------- 4. stages: the timeline ----------------------------------------
   Each stage is a plain dot on one hairline. The koru stays for the logo, the
   spine and the links, so the timeline doesn't repeat it. On a phone the line
   runs down the left edge; from 1024px it runs across. The line draws in on
   .rule-anim's timing as each stage reveals, staggered by the shared --i, so
   it reads as one line drawing through the stages rather than a new motion. */
.stages{margin-top:var(--s7);display:grid}
.stage{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:var(--s4);padding-bottom:var(--s6)}
.stage:last-child{padding-bottom:0}
.stage>*{grid-column:2}
.stage__node{grid-column:1;grid-row:1/span 4;height:28px;display:flex;align-items:center;justify-content:center}
.stage__node b{display:block;width:7px;height:7px;border-radius:50%;background:var(--ink);position:relative;z-index:1}
.stage::before{content:"";position:absolute;left:22px;top:14px;bottom:-14px;width:1px;background:var(--line-strong);
  transform-origin:50% 0;transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.stage:last-child::before{display:none}
.anim .stage.rv::before{transform:scaleY(0)}
.stage.rv.in::before{transform:none}
.stage .overline{color:var(--ink-muted);padding-top:6px}
.stage h3{margin-top:var(--s2)}
.stage p{margin-top:var(--s2);max-width:34ch}
.stage .dot-link{margin-top:var(--s3)}
@media (min-width:1024px){
  .stages{grid-template-columns:repeat(var(--n,5),1fr);column-gap:var(--s5)}
  .stage{display:block;padding-bottom:0}
  .stage__node{justify-content:flex-start;height:44px}
  .stage::before{left:0;right:calc(-1 * var(--s5));top:22px;bottom:auto;width:auto;height:1px;
    transform-origin:0 50%}
  .anim .stage.rv::before{transform:scaleX(0)}
  .stage.rv.in::before{transform:none}
  .stage .overline{padding-top:var(--s3)}
}

/* ---------- 4b. Birthcare (postnatal) ----------------------------------------
   The page's second field band. Lydia's paragraph on the left under the
   colour wordmark, the facts as label and value rows on the right, then the
   Birthcare-only booking link - labelled so nobody books Glen Eden by mistake. */
.bc-band{background:var(--field);color:var(--on-field)}
.bc-band__grid{display:grid;gap:var(--s7)}
@media (min-width:1024px){ .bc-band__grid{grid-template-columns:6fr 6fr;gap:var(--s8);align-items:start} }
.bc-band__logo{width:200px;height:auto;margin-bottom:var(--s6)}
.bc-band .overline{opacity:.75}
.bc-band .h2{margin-top:var(--s3)}
.bc-band .body-lg{margin-top:var(--s5);max-width:48ch}
.bc-band__facts{border-top:1px solid rgba(38,41,31,.3)}
.bc-band__facts>div{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);padding-block:var(--s4);
  border-bottom:1px solid rgba(38,41,31,.3)}
.bc-band__facts dt{padding-top:3px;opacity:.75}
.bc-band__facts dd{margin:0}
.bc-band__side .btn{margin-top:var(--s6)}
.bc-band__side .dot-link{display:flex;width:max-content;margin-top:var(--s4);--dotc:var(--on-field)}
@media (max-width:767px){ .bc-band__side .btn{width:100%} }

/* ---------- 5. first visit -------------------------------------------------
   The homepage's first-visit split as built (site.css: .split, .steps,
   .fv-next, .fv-cta), mirrored: the steps on the left and the photo on the
   right, so the service page reads as a cousin of the homepage, not a copy. On
   phones the photo still leads, as it does on the homepage. */
@media (min-width:1024px){ .split--flip>div:first-child{order:2} }

/* ---------- 6. who you'll see, the statement and reviews --------------------
   The team is the homepage's section with a second face (.team--bio): the
   same heading, intro, headshots and four chiropractors in the page's own
   order, with a line from each one's own bio and a link to their profile, so
   the section says more than the homepage's names and titles. Phones get rows
   (photo beside words), tablets two columns, desktop four. The centred
   statement (1b above) and the reviews band (.revband) follow as built.
   Every review card's top band takes the page's field, where the homepage's
   are all blush. */
.team--bio{grid-template-columns:1fr;gap:var(--s6)}
.team--bio li{overflow:visible;display:flex}
.team--bio .team__card{flex:1;display:grid;grid-template-columns:112px 1fr;column-gap:var(--s4);align-content:start}
.team--bio .team__card>*{grid-column:2}
/* as specific as the rule above, and after it, or the photo joins the words in column 2 */
.team--bio .team__card>figure{grid-column:1;grid-row:1/span 3;align-self:start}
.team--bio h3{margin-top:0}
.team--bio blockquote{margin:var(--s2) 0 0}
.team--bio blockquote p{font-size:15px;line-height:23px;color:var(--ink);text-wrap:pretty}
/* a quiet text link, not a dot-link: the koru is kept for the logo, the
   spine and the section links */
.team__more{margin-top:var(--s3);justify-self:start;font-size:15px;line-height:22px;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:5px;
  transition:text-decoration-color var(--t),color var(--t)}
.team__card:hover .team__more,.team__card:focus-visible .team__more{color:var(--lime-text);text-decoration-color:currentColor}
@media (min-width:600px){
  .team--bio{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s5)}
  .team--bio .team__card{display:flex;flex-direction:column;align-items:flex-start}
  .team--bio figure{width:100%}
  .team--bio h3{margin-top:var(--s4)}
  .team--bio blockquote{margin-bottom:var(--s4)}
  .team--bio .team__more{margin-top:auto}
}
@media (min-width:1024px){ .team--bio{grid-template-columns:repeat(4,1fr)} }
html[data-service] .revtrack .review::before{background:var(--field)}

/* ---------- 7. questions ---------------------------------------------------
   Two columns: the heading and the third Book Now hold their place while the
   answers open beside them. */
/* The FAQ sits on a cream panel held to the content width, with white either
   side, rather than a full-bleed band: it reads as a block set under the
   booking band. Phones, where the measure is the screen, get it edge to edge. */
.faq-band .qa{background:var(--surface-cream)}
.qa{display:grid;gap:var(--s6)}
@media (min-width:1024px){ .qa{grid-template-columns:4fr 8fr;gap:var(--s8);align-items:start} }
@media (min-width:1024px) and (min-height:640px){
  .qa__side{position:sticky;top:calc(var(--promo-h) + var(--nav-h) + var(--s6))}
}
.qa__side p{margin-top:var(--s4);max-width:30ch}
.qa__side .dot-link{display:flex;width:max-content;margin-top:var(--s5)}
.qa__side .btn{margin-top:var(--s5)}
.qa .faq{margin-top:0}
.faq .a .dot-link{margin:-8px 0 var(--s5)}
@media (max-width:1023px){
  .qa__side .qa__act{display:none}
  .qa__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s6)}
}
@media (min-width:1024px){ .qa__foot{display:none} }

/* ---------- 8. keep exploring -----------------------------------------------
   The two related services as cards, three articles as a hairline list, and
   (on pregnancy and child) one Birthcare row under both. */
/* minmax(0,1fr): an auto column grows to the photos' natural width and widens the page on phones */
.more{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);margin-top:var(--s7)}
@media (min-width:1024px){ .more{grid-template-columns:8fr 4fr;gap:var(--s8);align-items:start} }
.more__cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
@media (min-width:600px){ .more__cards{grid-template-columns:1fr 1fr;gap:var(--s5)} }
.more__cards a{display:block;text-decoration:none}
.more__cards figure{overflow:hidden}
.more__cards img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease)}
.more__cards a:hover img{transform:scale(1.03)}
.more__cards h3{margin-top:var(--s4);transition:color var(--t)}
.more__cards a:hover h3{color:var(--lime-text)}
.more__cards p{margin-top:var(--s2)}
/* Beside the reading list the two cards ran shorter, leaving a block of white
   under them (client review, October 2026). The list is now three articles, and
   on a desktop the cards stretch the small remaining difference, roughly square
   at most; 4:3 stays the minimum.
   min-height as well as height: Chrome ignores height:100% on these images. */
@media (min-width:1024px){
  .more{align-items:stretch}
  .more__cards a{display:flex;flex-direction:column}
  .more__cards figure{position:relative;flex:1 0 auto;aspect-ratio:4/3}
  .more__cards img{position:absolute;inset:0;height:100%;min-height:100%;aspect-ratio:auto}
  /* taller than 4:3, this photo would cut the mum off the edge: centre on her and the baby */
  .more__cards [data-cat="postnatal"] img{object-position:72% 50%}
}
.reading .overline{color:var(--ink-muted)}
.reading ul{margin-top:var(--s4)}
.reading li{border-top:1px solid var(--line-strong)}
.reading li:last-child{border-bottom:1px solid var(--line-strong)}
.reading li a{display:block;text-decoration:none;padding-block:var(--s4)}
.reading li a span{display:block;font-size:18px;line-height:24px;letter-spacing:-.015em;margin-top:var(--s1);
  transition:color var(--t)}
.reading li a:hover span{color:var(--lime-text)}
/* the two listing links under the list, as plain dot-links rather than list rows */
.reading>.dot-link{display:flex;width:max-content;max-width:100%;margin-top:var(--s4)}
@media (min-width:1024px){ .reading li a{padding-block:var(--s3)} .reading li a span{font-size:17px;line-height:23px} }
.bc-row{display:grid;gap:var(--s4);align-items:center;margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--line)}
@media (min-width:768px){ .bc-row{grid-template-columns:150px 1fr auto;gap:var(--s6)} }
.bc-row img{width:150px;height:auto}

@media (prefers-reduced-motion:reduce){
  .stage::before{transform:none!important}
}

/* ---------- pregnancy and baby video series ---------------------------------
   The sign-up on the pregnancy and postnatal pages, its own page and the videos. */
.vs-signup{background:var(--surface-cream);padding:var(--s5);scroll-margin-top:88px}
.vs-form__send{width:100%;margin-top:var(--s4)}
.vs-form .ask__note{margin-top:var(--s4)}
.vs-intro{display:grid;gap:var(--s6);margin-top:var(--s7)}
@media (min-width:1024px){ .vs-intro{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:start} }
.vs-intro img{width:100%;aspect-ratio:4/3;object-fit:cover}
.vs-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4);margin-top:var(--s6);padding:0;list-style:none}
@media (min-width:768px){ .vs-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s5)} .vs-thumbs--four{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1024px){ .vs-thumbs:not(.vs-thumbs--four){grid-template-columns:repeat(5,minmax(0,1fr))} }
.vs-thumb{display:block;color:inherit;text-decoration:none}
.vs-thumb__img{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-ink)}
.vs-thumb__img img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .7s var(--ease),opacity var(--t)}
.vs-thumb:hover .vs-thumb__img img{transform:scale(1.03);opacity:1}
.vs-thumb__play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(50,53,44,.82)}
.vs-thumb__play::after{content:"";position:absolute;left:17px;top:14px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.vs-thumb__t{display:block;margin-top:var(--s3);font-size:15px;line-height:21px;transition:color var(--t)}
.vs-thumb:hover .vs-thumb__t{color:var(--lime-text)}
.vs-share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s5)}
.vs-videos{display:grid;gap:var(--s7);margin-top:var(--s7)}
@media (min-width:768px){ .vs-videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s6)} }
.vs-video{scroll-margin-top:88px}
.vs-video .yt{margin-block:0}
.vs-video .h3{margin-top:var(--s3)}