/* sprint 13 — Maven-method redesign, scoped entirely under .obc-mv so it cannot touch the accepted
   replica pages. Method borrowed from mavenclinic.com; identity kept from OBC.

   What is borrowed: one deep saturated ground doing most of the work, a warm cream second surface,
   display type set very large at weight 300 with leading at 1.0, an italic serif for a single
   emphasised word, full-bleed photography with text laid over it, a band of very large numbers with
   very small captions, and a great deal of air.

   What is kept: OBC's teal. Maven's forest green is deepened from OBC's own #75aab0 hue rather than
   replaced, so the site still looks like this clinic. */

/* sprint 25 — the Google Fonts import that used to be here has gone. Both faces are served by this
   site now, from assets/css/fonts.css. Nothing about how the page looks changes; what changes is
   that a clinic's website no longer tells Google who is reading it, on every page, before a single
   word is shown. */

/* sprint 27 — every colour below is now one of the twelve in the OBC Project Palette, confirmed by
   the owner on 15 August 2026. The shades that used to sit here were eyeballed during the redesign
   rather than taken from the palette, and each one is recorded in BRAND.md with what replaced it. */
.obc-mv {
  /* sprint 27 — text and small marks. Was #072e2d, a near-black green with no palette equivalent.
     Split from the dark surfaces below, which used to share this one token: a colour that is both
     the body text and the background behind it can only stay legible by accident. */
  --mv-ink: #1f2c31;
  /* sprint 27 — the dark ground: bands, jar cards, dark buttons. Deep Green rather than the old
     #072e2d, so the bands lift and keep their green character. Chosen by the owner over Deep Navy. */
  --mv-dark: #294f4b;
  /* hover beneath the dark ground */
  --mv-deep: #183e49;
  --mv-brand: #75aab0;
  /* sprint 27 — the light accent on dark ground: eyebrows, kickers, the hero link, hairlines. Was
     mint #8fe3cd, which has no relative in the palette. Warm Gold is the only approved colour that
     clears 4.5:1 against the dark bands, which this text needs at 12px uppercase. */
  --mv-highlight: #d7b47a;
  --mv-cream: #f6efe6;
  --mv-paper: #fff;
  /* sprint 38 — body copy is Ink, Amanda's call on 31 August 2026 after the site was measured.
   *
   * This was Slate #758287, which is an approved brand colour and a poor one to read a paragraph
   * in: 3.96:1 on white and 3.47:1 on ivory, against the 4.5 normal text needs. It failed on 32 of
   * the 37 pages the site publishes, which made it the single biggest readability fault we had, and
   * one variable.
   *
   * Slate is still the brand's grey. It is no longer what a tired parent reads a paragraph in. */
  --mv-muted: #1f2c31;
  /* sprint 26 — what milk is, stated once, and it is the white the jars have always poured rather
     than the cream the spheres mix. Named separately from --mv-paper even though they are the same
     value, because one of them is the colour of the page and the other is the colour of a liquid,
     and a day will come when one of those moves. */
  --mv-milk: #fff;
  /* sprint 27 — colostrum, the first days' milk. Sprint 26 asked what should happen if the palette
     ever won, and the answer came back that it does not win here: colostrum is an approved material
     in its own right, and #e9c471 is allowed inside it by name. See BRAND.md.

     So this is not a stray gold that escaped the palette. It is one defined substance, the same one
     the seventeen thousand is poured from and the same one the spheres hold, and its stops belong
     together. Mixing any of them from Warm Gold instead makes the material read as metal rather than
     as milk, which is the whole point of it. The flat form, for where a gradient will not do, is
     --mv-gold itself. */
  --mv-gold: #e9c471;
  --mv-gold-deep: #dcb45f;
  --mv-gold-pale: #f6e2b0;
  /* sprint 27 — the fourth stop. It was only ever written inline in stats.js; named here because the
     jars now pour the same four-stop ramp and a recipe with one ingredient kept somewhere else is a
     recipe that drifts. */
  --mv-gold-deepest: #b8842c;

  --mv-display: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --mv-accent: "Instrument Serif", Georgia, serif;

  --mv-gutter: clamp(20px, 5vw, 72px);
  --mv-measure: 1240px;

  margin: 0;
  padding: 0;
  background: var(--mv-paper);
  color: var(--mv-ink);
  font-family: var(--mv-display);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}

.obc-mv :where(h1, h2, h3, h4) {
  color: var(--mv-ink);
  font-family: var(--mv-display);
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* the base theme sets a heading colour, which beats inheriting from the dark section — so state it */
.obc-mv .mv-dark :where(h1, h2, h3, h4),
.obc-mv .mv-hero :where(h1, h2, h3, h4) {
  color: var(--mv-paper);
}

/* 18 September 2026 — the mission page moved its World Bank section onto Deep Green, and these two
   state their own colour, so they stayed ink on a dark band. Headings are covered by the rule above;
   a paragraph that names a colour has to be told again. */
.obc-mv .mv-dark .mv-team-mission-body { color: var(--mv-paper); }
.obc-mv .mv-dark .mv-team-source { color: rgba(246, 239, 230, 0.76); }
.obc-mv .mv-dark .mv-team-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* the single borrowed gesture that carries the whole design: one word, set in an italic serif */
.obc-mv em {
  font-family: var(--mv-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.obc-mv .mv-inner {
  width: 100%;
  max-width: var(--mv-measure);
  margin: 0 auto;
  padding: 0 var(--mv-gutter);
}

/* ---------- hero ---------- */
.obc-mv .mv-hero.wp-block-cover {
  min-height: min(88vh, 760px);
  padding: clamp(64px, 10vw, 128px) var(--mv-gutter);
  align-items: flex-end;
  color: var(--mv-paper);
}

/* sprint 38, squint pass — the scrim reaches the end of the text column now.
 *
 * The hero turns over seven photographs and the copy sits on all of them, so its contrast is not one
 * number. Measured against each in turn, the paragraph failed AA on three: 3.81, 3.84 and 4.15
 * against the 4.5 that normal-size text needs. The heading is large text and clears 3.0 on every
 * one of them, so this is about the paragraph, which is the line carrying the OHIP rates and the
 * offer to help with a referral. BRAND.md does not allow that one to be hard to read.
 *
 * The strong end of the gradient used to run out at 38% and the paragraph runs to 48%, so its last
 * third sat over the part of the photograph the scrim had already let through. */
.obc-mv .mv-hero .wp-block-cover__background,
.obc-mv .wp-block-cover.mv-prov-head > .wp-block-cover__background,
.obc-mv .wp-block-cover.mv-ref-hero > .wp-block-cover__background {
  /* sprint 38 — black rather than Deep Navy, Amanda on 31 August 2026: the same neutral dim the
     practicum band uses, so the photographs keep their own colour instead of being tinted green.
     The shape stays: strong where the words are, letting go before the middle of the frame. */
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.72) 52%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.obc-mv .mv-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--mv-measure);
  margin: 0 auto;
}

.obc-mv .mv-eyebrow {
  margin: 0 0 clamp(20px, 3vw, 32px);
  color: var(--mv-highlight);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.obc-mv .mv-hero-title {
  max-width: 17ch;
  margin: 0 0 clamp(20px, 3vw, 28px);
  color: var(--mv-paper);
  font-size: clamp(40px, 7.2vw, 84px);
  line-height: 1;
}

.obc-mv .mv-hero-sub {
  max-width: 46ch;
  margin: 0 0 clamp(28px, 4vw, 40px);
  /* was rgba(255,255,255,0.86). The 14% cost about 0.7 of a contrast point and bought a softness
     nobody asked for on the one paragraph in the hero that has facts in it. */
  color: #fff;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
}

/* ---------- buttons ----------
   sprint 26 — a call to action is a small glass of milk.

   The jars pour and the spheres fill, so a flat coloured pill between them was the last thing on the
   page still speaking the old language. These fill from the bottom the way everything else does and
   carry the same bubble, which is what makes it a theme rather than an effect used twice.

   Two things this is built around, both of which decide the markup.

   The milk is drawn at z-index -1 inside a link that isolates itself. That is not a trick for its own
   sake: a negative child paints above its parent's own background but below the parent's text, which
   is the only way to get liquid behind a label whose text node cannot be wrapped without adding raw
   HTML to a block the owner edits. The colour WordPress writes onto the button as an inline style
   stays where it is and becomes the empty glass behind the milk, so a page whose script never runs
   still shows exactly the button that is there today.

   Nothing here is clipped by the border, because overflow cuts at the padding box: the ghost keeps
   its rim above the milk, which is what stops the second button dissolving into the first. */
/* ---------- sprint 33: the locations page ---------- */
/* The map is a frame of somebody else's page, so it is held in a box of ours: a fixed shape the
   layout can rely on before it loads, and a border so the seam between our page and Google's is a
   line rather than a surprise. */
.obc-mv .mv-map {
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(41, 79, 75, 0.16);
  border-radius: 10px;
  background: var(--mv-paper, #fff);
}

.obc-mv .mv-map-frame {
  display: block;
  width: 100%;
  height: clamp(360px, 60vh, 620px);
  margin: 0 0 14px;
  border: 0;
  border-radius: 6px;
}

.obc-mv .mv-map-note {
  margin: 0 0 12px;
  color: var(--mv-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* the button the script adds. Colostrum, because on this page the map is the way forward. */
.obc-mv .mv-map-show {
  min-height: 46px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--mv-gold, #e9c471);
  color: var(--mv-ink, #1f2c31);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
}

.obc-mv .mv-map-show:hover { background: var(--mv-gold-deep, #d7b47a); }

.obc-mv .mv-map-open { margin: 12px 0 0; font-size: 14.5px; }

/* 18 September 2026 — the faces above the offices. Round, small, and wrapped rather than a row that
   runs off the edge: this is "here is the team", a fact about the clinic, not a carousel to be
   explored — the homepage already has that. Overlapping them by a few pixels reads as a group
   photograph instead of a grid of stamps. */
.obc-mv .loc-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin: 0 0 clamp(20px, 2.6vw, 30px);
}

.obc-mv .loc-face {
  margin: 0 -6px 0 0;
}

.obc-mv .loc-face img {
  display: block;
  width: clamp(48px, 5vw, 62px);
  height: clamp(48px, 5vw, 62px);
  border: 2px solid var(--mv-paper, #fff);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

/* sprint 33 — ten offices, laid out rather than stacked.
   A single column ten deep was a page of scrolling with two thirds of the width unused, and every
   card the same shape, so nothing could be found by looking. auto-fill rather than a fixed count:
   the number of columns follows the width, and the towns keep their reading order down the page. */
.obc-mv .loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 36px);
}

/* a card now, because a grid cell needs an edge to be a thing. On the white band a hairline is
   enough: ten filled boxes would be a wall. */
.obc-mv .loc-office {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid rgba(41, 79, 75, 0.16);
  border-radius: 10px;
  background: var(--mv-paper);
}

.obc-mv .loc-town {
  margin: 0 0 8px;
  color: var(--mv-dark, #294f4b);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.2;
}

.obc-mv .loc-address { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; }
.obc-mv .loc-who,
.obc-mv .loc-when { margin: 0 0 6px; color: var(--mv-muted); font-size: 14.5px; line-height: 1.5; }

/* the same shape the Finder's directions button uses, so the two pages agree about what it is.
   margin-top auto so it sits on the floor of every card whatever is above it: a row of buttons at
   different heights reads as a row of different things. */
.obc-mv .loc-directions { margin: auto 0 0; padding-top: 14px; }

.obc-mv .loc-directions a {
  display: inline-block;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid var(--mv-dark, #294f4b);
  border-radius: 999px;
  color: var(--mv-dark, #294f4b);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.obc-mv .loc-directions a:hover,
.obc-mv .loc-directions a:focus-visible { background: var(--mv-mist, #f6efe6); }

/* sprint 32 — air between the two buttons, which had none.

   theme.json sets blockGap to 0, so every wp:buttons row on the redesign sits flush: on the homepage
   hero the gold pill's edge is against the ghost's rim with nothing between them. At rest the white
   rim passes for a divider. Filled, it turns dark and the pair reads as one wide object with a line
   down the middle of it, which is what Beth is seeing. The same 0 reaches fifteen rows on ten other
   pages, so it is answered once here rather than on the hero.

   Row gap as well as column: wrapped onto two lines on a phone they were touching the other way. */
.obc-mv .wp-block-buttons {
  gap: clamp(14px, 1.8vw, 22px);
}

.obc-mv .mv-cta .wp-block-button__link,
.obc-mv .mv-cta-ghost .wp-block-button__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  font-family: var(--mv-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* the label turns a beat after the pour starts, not with it: the milk reaches the words about
     120ms in, and a label that darkens before then is dark type on a photograph */
  transition: transform 0.25s ease, color 0.36s ease 0.14s, border-color 0.36s ease 0.14s;
}

/* sprint 26 — the first button is colostrum, and it is the one thing in the family that holds still.
   Everything else on this page is liquid doing something, and a page where every surface moves has
   no emphasis left to give: the button you are most meant to press earns its weight by being the
   solid one. The colour is set on the block itself so she can see and change it in the editor. */
.obc-mv .mv-cta .wp-block-button__link {
  padding: 17px 34px;
  border: 0;
  color: var(--mv-ink);
  font-weight: 500;
}

/* the second button is the same milk poured thinner, in a glass you can see. Hierarchy has to come
   from somewhere once both are the same liquid, and it comes from the rim and the weight rather than
   from one of them being a different colour. */
.obc-mv .mv-cta-ghost .wp-block-button__link {
  padding: 17px 30px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: var(--mv-paper);
  font-weight: 400;
}

/* the label goes dark once there is milk behind it, and not a moment before: white on milk is 1.1.
   The rim turns with it, and for the same reason. A white rim is what an empty glass looks like
   against a photograph and it is what nothing looks like against cream: filled, the edge of a glass
   is the darker line where you are looking through more of it, which is also the only thing keeping
   these two buttons apart now that they hold the same liquid. */
/* 5 September 2026 — the same ghost, standing on a light band.
 *
 * Amanda put the hero's pair on the FAQ's closing section, which is Milk Teal. The ghost is drawn in
 * white because the hero it was made for is a darkened photograph; on #75AAB0 that white is 2.58:1
 * and the Ink it becomes is 5.56:1. This is the same observation the is-milky rule below already
 * makes about the moment milk arrives behind the label, applied to a band that was always that
 * colour. Written as a rule rather than as a fix to one page, so the next ghost that lands on a
 * light section is right the first time. */
.obc-mv .mv-section:not(.mv-dark) .mv-cta-ghost .wp-block-button__link {
  border-color: rgba(31, 44, 49, 0.34);
  color: var(--mv-ink);
}

.obc-mv .mv-cta-ghost .wp-block-button__link.is-milky {
  border-color: rgba(41, 79, 75, 0.34);
  color: var(--mv-ink);
}

@media (hover: hover) {
  .obc-mv .mv-cta .wp-block-button__link:hover,
  .obc-mv .mv-cta-ghost .wp-block-button__link:hover {
    transform: translateY(-2px);
  }

  /* the gold one has no liquid to answer with, so it warms instead: the same colostrum a shade
     richer, which is the bottom of the gradient the spheres are drawn with */
  /* 2 September 2026 — was --mv-gold-deep, its own shade. Gold on hover is one rule for the site
     now and one rule means one gold, so this defers to assets/css/buttons.css. */
  /* 5 September 2026 — and now it does not, because Amanda made every one of these pills colostrum
     gold and a button already gold cannot answer by going gold. Milk Teal, which is the same answer
     the header's own gold button reached: Ink on it is 5.56:1 and gold to teal is a change of hue
     rather than of brightness, which is the kind the eye is quickest at.
     It is excluded from buttons.css by name rather than fought with there. */
  .obc-mv .mv-cta .wp-block-button__link:hover,
  .obc-mv .mv-cta .wp-block-button__link:focus-visible {
    background-color: var(--mv-teal, #75aab0);
    color: var(--mv-ink, #1f2c31);
  }

  /* and the second tops up from a thinner pour to a full one */
  .obc-mv .mv-cta-ghost .wp-block-button__link:hover .mv-milk { background: var(--mv-milk); }
}

/* taller than the glass so that at rest the surface has already gone out through the top: a pill is
   52px of room and a line sitting on its top edge reads as a border, not as milk */
.obc-mv .mv-milk {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 150%;
  background: var(--mv-milk);
  transform: translateY(100%);
  transition: transform 1.05s cubic-bezier(0.32, 0.02, 0.2, 1), background-color 0.25s ease;
}

/* thin enough to read as a thinner pour, thick enough that a busy photograph does not come through
   it and sit behind the words. 0.82 let a hard diagonal in one of the hero pictures show across the
   label; this does not, and still reads as glass. */
.obc-mv .mv-cta-ghost .mv-milk { background: rgba(255, 255, 255, 0.88); }

/* the surface, the same mint line the spheres carry, and visible only while the pour is running */
.obc-mv .mv-milk::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1.5px;
  background: var(--mv-highlight);
  opacity: 0.55;
  content: "";
}

.obc-mv .wp-block-button__link.is-milky .mv-milk { transform: translateY(0); }

/* the bubbles ride inside the milk rather than inside the button, so none of them can be seen in the
   air above the surface while it is still climbing */
.obc-mv .mv-milk-bubbles {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.obc-mv .mv-milk-bubble {
  position: absolute;
  bottom: -12px;
  border: 1.1px solid rgba(41, 79, 75, 0.42);
  border-radius: 50%;
  background: rgba(41, 79, 75, 0.1);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .obc-mv .mv-milk { transition: none; }
}

.obc-mv .mv-cta-dark .wp-block-button__link {
  background: var(--mv-dark);
  color: var(--mv-paper);
}

.obc-mv .mv-cta-dark .wp-block-button__link:hover {
  background: var(--mv-deep);
}

/* ---------- section furniture ---------- */
.obc-mv .mv-section {
  padding: clamp(72px, 11vw, 148px) 0;
}

.obc-mv .mv-cream {
  background: var(--mv-cream);
}

.obc-mv .mv-dark {
  background: var(--mv-dark);
  color: var(--mv-paper);
}

.obc-mv .mv-kicker {
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: var(--mv-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.obc-mv .mv-dark .mv-kicker {
  color: var(--mv-gold);
}

.obc-mv .mv-lede {
  max-width: 20ch;
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.06;
}

.obc-mv .mv-body {
  max-width: 62ch;
  margin: 0 0 20px;
  color: var(--mv-muted);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
}

.obc-mv .mv-dark .mv-body {
  color: rgba(255, 255, 255, 0.76);
}

/* ---------- the statistics band ---------- */
/* sprint 26 — a grid, not a flex row, and the reason is worth keeping.
 *
 * This is the first thing after the hero and the clinic's strongest claim, so the spheres get room
 * to make it. Reaching that through flex failed three times: columns in a flex row stretch to a
 * common height, so a square one is impossible and the shape came out a wide oval; told not to
 * stretch, their aspect ratio drove their width instead and four of them overflowed the row; and a
 * breakpoint adding flex-wrap lost to WordPress's own column rules. A grid asks for none of it. The
 * cell is as wide as its track and as tall as it is wide, and auto-fit decides how many fit in a row
 * without a single breakpoint to keep in step.
 *
 * It steps out of the 1240 measure the prose sits in, because four spheres inside that are badges. */
.obc-mv .mv-stats.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
  align-items: start;
  gap: clamp(14px, 2vw, 32px);
  margin: clamp(52px, 7vw, 96px) calc(50% - 50vw + var(--mv-gutter)) clamp(40px, 5vw, 64px);
}

/* the dividing lines went with the ring layout: a rule between two circles reads as a cage around
   them, and the shapes separate themselves */
.obc-mv .mv-stat.wp-block-column {
  position: relative;
  display: flex;
  flex-direction: column;
  /* centred on both axes by the flex container rather than by auto margins on each child: the
     margins were not winning and the number sat up to 57px left of the sphere's middle */
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  /* the type inside is sized from THIS box rather than from the window. The grid decides how many
     spheres are in a row, so the window and the sphere size stop tracking each other: at 768px the
     grid gave 338px spheres while the window-based scale gave them a 34px number, and at 540px an
     486px sphere got the same. A percentage of the sphere is right at every width and needs no
     breakpoints at all. */
  container-type: inline-size;
  padding: 13% 17%;
  text-align: center;
  /* these are tapped, and a tap that drifts a pixel selects a word */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}

/* sprint 25 — a ring around each research figure, drawn to that figure's own value. The figure
   becomes a square the number sits in the middle of, and the ring is laid over that square on a
   layer beneath the number, the way everything else that glows on this page is. */
/* the sphere is sized from the cell and centred in it. See assets/js/stats.js for the liquid. */
.obc-mv .mv-stat-orb {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.74);
  opacity: 0;
  transition: transform 0.72s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.42s ease;
  pointer-events: none;
}

.obc-mv .mv-stat.is-filled .mv-stat-orb {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.obc-mv .mv-stat-figure,
.obc-mv .mv-stat-caption {
  position: relative;
  z-index: 1;
  /* the box hugs the glyphs rather than spanning the cell. A heading is a block, so its box was the
     full width of the sphere while the number sat centred and narrow inside it, which made every
     measurement of whether the words fit read as an overflow that was not there. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  transition: color 0.5s ease;
}

/* the words go dark once the liquid is behind them, held until it has passed */
.obc-mv .mv-stat.is-filled .mv-stat-figure,
.obc-mv .mv-stat.is-filled .mv-stat-caption {
  color: #1f2c31;
}

@media (prefers-reduced-motion: reduce) {
  .obc-mv .mv-stat-orb,
  .obc-mv .mv-stat-figure,
  .obc-mv .mv-stat-caption {
    transition: none;
  }
}

.obc-mv .mv-stat-figure {
  margin: 0 0 5cqw;
  color: var(--mv-paper);
  /* every digit the same width, so nothing shifts as the number counts up */
  font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 31cqw, 104px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}

.obc-mv .mv-stat-figure .mv-unit {
  font-size: 0.52em;
  vertical-align: baseline;
}

.obc-mv .mv-stat-caption {
  max-width: 18ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(12px, 8.4cqw, 24px);
  line-height: 1.38;
}

.obc-mv .mv-source {
  max-width: 78ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.6;
}

.obc-mv .mv-source a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* sprint 25 — the hero is a slideshow rather than one photograph.

   The pictures after the first live in the page as a gallery, so they can be added to, reordered or
   swapped in the WordPress editor like any other block. This hides that gallery: the script reads
   the addresses out of it and does the showing itself. */
.obc-mv .mv-hero-slides {
  display: none;
}

/* the layers the script builds, stacked between the cover's own photograph and its scrim */
.obc-mv .mv-hero .mv-slide {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* long enough to be a dissolve rather than a cut, short enough not to spend the whole hold in it */
  transition: opacity 1.0s ease;
}

.obc-mv .mv-hero .mv-slide.is-showing {
  opacity: 1;
}

/* a slow push in, so a still photograph is not simply sitting there for six seconds. It runs the
   whole time the picture is up and resets when the picture is next shown. */
@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-hero .mv-slide.is-showing {
    animation: mv-hero-press 9s ease-out both;
  }
}

@keyframes mv-hero-press {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* the cover's own parts, given explicit layers. Without them the scrim can end up under the slides,
   and every word in the hero would be sitting on an undimmed photograph. */
.obc-mv .mv-hero > img.wp-block-cover__image-background { z-index: 0; }
.obc-mv .mv-hero > .wp-block-cover__background { z-index: 2; }
.obc-mv .mv-hero > .wp-block-cover__inner-container { z-index: 3; }

/* ---------- three ways in ---------- */
/* sprint 25 — the pathway cards are jars that fill with milk, chosen in the button lab over the
   photograph cards that were here before. The photographs carried no information and were the
   reason the cards needed a scrim at all.

   Ink cards on a light band, not the other way round: the milk is the page's own cream, so it needs
   the darkest card we have behind it or the surface has nothing to show against. */
.obc-mv .mv-paths.wp-block-columns {
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(32px, 5vw, 56px);
}

/* the jar has to fill its column, or three cards of different copy lengths hold different levels */
.obc-mv .mv-paths .wp-block-column {
  display: flex;
}

.obc-mv .mv-jar {
  --milk-level: 0px;
  --jar-x: 0px;
  --row-w: 100%;
  /* wavelengths, named because the drift has to travel exactly one tile or the loop shows a seam */
  --tile-back: 760px;
  --tile-front: 420px;

  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: clamp(300px, 30vw, 350px);
  /* deep top padding on purpose: the milk stops at the title, so this gap is the air above the
     surface. Without it the crests reach the ceiling and the wave flattens against it. */
  padding: clamp(66px, 7vw, 88px) clamp(24px, 2.4vw, 32px) clamp(24px, 2.4vw, 32px);
  overflow: hidden;
  border-radius: 2px;
  background: var(--mv-dark);
  color: var(--mv-cream);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* one body of milk, not three. The fill is as wide as the whole row and shifted left by the card's
   own offset within it, so the surface drawn in every card is the same surface: each card is a
   window onto one liquid rather than a jar of its own. */
.obc-mv .mv-jar-fill {
  position: absolute;
  bottom: 0;
  left: calc(-1 * var(--jar-x));
  width: var(--row-w);
  height: 132%;
  /* white, not cream: on this sand band a cream body dissolves into the page and the card loses its
     own edge below the surface. White also happens to be what milk is. */
  background: var(--mv-paper);
  transform: translateY(100%);
  /* slow: this is a pour, not a state change */
  transition: transform 2.6s cubic-bezier(0.32, 0.02, 0.2, 1);
}

/* The surface: two waves travelling sideways, rather than a curved top edge. A curve drawn on the
   box always peaks in the middle of that box, which gives every card its own hill; a repeating
   profile sliding past has no middle. Each strip straddles the milk line, so its crests rise above
   the level and its troughs cut below it. */
/* sprint 26 — each strip is one wavelength wider than the card and is slid by exactly that much,
   rather than having its background-position animated underneath it.
   background-position cannot be composited: every frame of it is a repaint of a strip as wide as the
   whole row, on the main thread, forever, whether or not anybody is looking at the card. Sliding the
   element instead is the same picture moving the same distance, handed to the compositor. The extra
   wavelength is what stops the far edge showing as it travels, and the jar clips it. */
.obc-mv .mv-jar-fill::before,
.obc-mv .mv-jar-fill::after {
  position: absolute;
  background-repeat: repeat-x;
  content: "";
}

/* the long, slow swell behind, translucent so it reads as depth rather than a second edge */
.obc-mv .mv-jar-fill::before {
  right: 0;
  bottom: calc(100% - 27px);
  /* one wavelength of runway on the side it travels away from */
  left: calc(-1 * var(--tile-back));
  height: 54px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C40,0 80,40 120,20 C160,0 200,40 240,20 L240,40 L0,40 Z' fill='%23ffffff' fill-opacity='.5'/%3E%3C/svg%3E");
  background-size: var(--tile-back) 100%;
  animation: milk-drift-back 23s linear infinite, milk-heave 9s ease-in-out infinite;
}

/* the smaller, quicker wave in front, in the same cream as the body so its trough is the visible
   edge. The two wavelengths never divide evenly, so the crests meet somewhere different every pass
   and the line never settles into a loop you can spot. */
.obc-mv .mv-jar-fill::after {
  right: calc(-1 * var(--tile-front));
  bottom: calc(100% - 17px);
  left: 0;
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C40,0 80,40 120,20 C160,0 200,40 240,20 L240,40 L0,40 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: var(--tile-front) 100%;
  animation: milk-drift-front 13s linear infinite, milk-heave 6.5s ease-in-out -2.2s infinite;
}

/* hover sends bubbles up through the milk. They live in a box that is exactly the milk in this
   card, so they can never be seen in the air above the surface. */
.obc-mv .mv-jar-bubbles {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: var(--milk-level);
  overflow: hidden;
  pointer-events: none;
}

/* sprint 26 — a bubble is a rim with almost nothing in it.
   It was a white disc at 0.62 with a rim at 0.2, on white milk: the body was invisible by definition
   and the rim was doing the whole job at a fifth of the strength it needed. Inverted here, and the
   same numbers the spheres use, so the site has one bubble rather than two. */
.obc-mv .mv-bubble {
  position: absolute;
  bottom: -18px;
  border: 1.1px solid rgba(41, 79, 75, 0.42);
  border-radius: 50%;
  background: rgba(41, 79, 75, 0.1);
  opacity: 0;
}

/* ---------- sprint 26 — the two jars hold two liquids ----------
 *
 * Her idea, and the best one on this page: the card for the family still waiting holds colostrum,
 * and the card for the family whose baby has arrived holds colostrum turning into milk. The change
 * on the second one is the same five seconds the spheres take, so the page says the same thing twice
 * in two places rather than doing a trick in one of them.
 *
 * The turn is built the way the spheres build it, with a second body of liquid laid over the first
 * and faded up, rather than by animating a colour: the surface is a repeating image and there is no
 * way to interpolate one of those. It also means the pour and the turn stay independent — the milk
 * arrives on a card that is already full, which is what turning is.
 *
 * The waves are duplicated per liquid because a data URI cannot take a variable. That is the price
 * of drawing the surface as an image, and the alternative — masking a shape and colouring it — is a
 * larger change to the one part of this file that has never given trouble.
 *
 * One honest note. The fill spans the whole row so the two cards read as one body of liquid seen
 * through two windows, and two different liquids at one level is not a thing that happens in a jar.
 * The meaning is worth more than the physics here, but it is a real seam and it is deliberate. */
/* sprint 27 — the four-stop ramp from the statistics spheres, not the flat gold. Flat, over an area
   this size, reads as brown; the ramp is what makes it colostrum. Same stops and same direction as
   stats.js, palest at the surface and deepening with depth, which is how the real thing looks in a
   jar.

   Sized to `--milk-level` rather than to the element. The fill is 132% of the card and spends most of
   its life below it, so a gradient measured against the element would spend its whole range off
   screen and only ever show the palest third — the deep end would never arrive. `--milk-level` is the
   distance from the card's foot to the surface, which is exactly the liquid you can see, so the ramp
   lands whole inside it at any card height and on a phone as well as a desk. The flat colour behind
   is what fills the element below the card, where nothing is ever looked at. */
.obc-mv .mv-jar-colostrum .mv-jar-fill,
.obc-mv .mv-jar-turns .mv-jar-fill {
  background:
    linear-gradient(
      180deg,
      /* sprint 27 — the surface layer, held at one colour for the first 28px. This is not a styling
         flourish, it is what stops the banding under the title.

         The two wave strips are painted a single flat colour and their solid halves hang below the
         line: the front one 17px down, the back one 27px. Against the old flat body that was
         invisible, a colour over itself. Against a ramp it is not: the body darkens with depth while
         the strips stay pale, so their footprints showed as two pale steps with hard edges, and the
         lower one moved, because both strips heave 5px up and down as they travel. That is the band
         reported under "Waiting for baby".

         Holding the body at the strips' own colour for slightly deeper than the deepest strip makes
         them a colour over itself again, exactly as before, so both edges vanish. The ramp then
         starts below anything the strips can reach, even at the top of their heave. It also happens
         to be how the real thing looks: the lit surface of a liquid is flatter than its depth.

         28px against a 178px pour on the smallest card, so the ramp keeps almost all of its run. */
      var(--mv-gold-pale) 0,
      var(--mv-gold-pale) 28px,
      var(--mv-gold) 34%,
      var(--mv-gold-deep) 68%,
      var(--mv-gold-deepest) 100%) top / 100% var(--milk-level) no-repeat,
    var(--mv-gold-deepest);
}

/* The swell behind, in colostrum — and it has to be the body colour AT THE SURFACE, not a paler one
   and no longer the flat gold.
   Both surface strips are rectangles that hang below the milk line: the front one covers the top
   17px of the liquid and the back one the top 27px, so there is a 10px band where only the back one
   is drawn. In white that band is white at half strength over white and cannot be seen. Painted a
   paler gold it became a lighter stripe with a hard edge top and bottom, sitting just under the
   waves and rising with the pour — which is exactly what it was reported as.

   sprint 27 — the body is a ramp now, so "the body colour" is no longer one value: at the top of the
   liquid, which is the only place these strips touch, it is the palest stop. Painting them #e9c471 as
   they were would put the old stripe back the other way up, a darker band across the surface. They
   move to the palest stop for the same reason they were the body colour before: invisible below the
   line, a translucent crest above it. If the first stop of the ramp changes, these change with it. */
.obc-mv .mv-jar-colostrum .mv-jar-fill::before,
.obc-mv .mv-jar-turns .mv-jar-fill::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C40,0 80,40 120,20 C160,0 200,40 240,20 L240,40 L0,40 Z' fill='%23f6e2b0' fill-opacity='.5'/%3E%3C/svg%3E");
}

.obc-mv .mv-jar-colostrum .mv-jar-fill::after,
.obc-mv .mv-jar-turns .mv-jar-fill::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C40,0 80,40 120,20 C160,0 200,40 240,20 L240,40 L0,40 Z' fill='%23f6e2b0'/%3E%3C/svg%3E");
}

/* The milk that arrives on top of it. It carries mv-jar-fill too, so it pours and sits exactly where
   the colostrum does and needs nothing said about its geometry; these rules come after the colostrum
   ones on purpose, since the two selectors weigh the same and the later one has to win. */
.obc-mv .mv-jar-turns .mv-jar-later {
  background: var(--mv-milk);
  opacity: 0;
  transition: opacity 5s ease-in-out, transform 2.6s cubic-bezier(0.32, 0.02, 0.2, 1);
}

.obc-mv .mv-jar-turns .mv-jar-later::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C40,0 80,40 120,20 C160,0 200,40 240,20 L240,40 L0,40 Z' fill='%23ffffff' fill-opacity='.5'/%3E%3C/svg%3E");
}

.obc-mv .mv-jar-turns .mv-jar-later::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C40,0 80,40 120,20 C160,0 200,40 240,20 L240,40 L0,40 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.obc-mv .mv-jar-turns.is-turning .mv-jar-later { opacity: 1; }

/* a bubble takes the colour of what it is floating in. White on gold, as the spheres do, and back
   to the dark rim once the milk has arrived — held on a transition so the few still climbing at the
   moment of the change cross over with the liquid rather than snapping. */
.obc-mv .mv-jar-colostrum .mv-bubble,
.obc-mv .mv-jar-turns .mv-bubble {
  border-color: rgba(163, 116, 31, 0.5);
  background: rgba(255, 250, 240, 0.82);
  transition: background-color 1.2s ease, border-color 1.2s ease;
}

.obc-mv .mv-jar-turns.is-turned .mv-bubble {
  border-color: rgba(41, 79, 75, 0.42);
  background: rgba(41, 79, 75, 0.1);
}

/* the copy, and only the copy: the fill and the bubbles are the liquid and place themselves */
.obc-mv .mv-jar > *:not(.mv-jar-fill):not(.mv-jar-bubbles) {
  position: relative;
  z-index: 2;
}

.obc-mv .mv-jar-title {
  margin: 0 0 10px;
  color: inherit;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.12;
  transition: color 0.9s ease 1.5s;
}

.obc-mv .mv-jar-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.82;
  transition: color 0.9s ease 1.1s;
}

.obc-mv .mv-jar .wp-block-buttons {
  margin-top: auto;
  padding-top: 22px;
}

.obc-mv .mv-jar .wp-block-button {
  width: 100%;
}

/* a core button so the owner can edit the label and the link, dressed as the lab's foot label:
   a solid bar would be swallowed by the milk rising past it */
.obc-mv .mv-jar-link .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* sprint 27 — colostrum, at the owner's request. These two labels are the entrances to the Finder,
     and they were milk, which made them the same colour as every other piece of text on the card.
     In colostrum they read as the way in, and they match the liquid the card is filled with.
     Approved by name in BRAND.md: this is the material's flat form, not a loose gold.
     5.44:1 against the card's dark green, so it still clears the 4.5 the standard asks for. */
  color: var(--mv-gold);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 0.9s ease 0.5s;
}

/* Once the jar has poured, the card behind this label IS colostrum, and a colostrum label on it
   would disappear into its own liquid. The card already turns its text to ink at that moment and
   the label used to follow by inheritance; now that it states a colour of its own, it has to be
   told the same thing explicitly. Declared before the hover rule below so hover still wins. */
.obc-mv .mv-jar.is-poured .mv-jar-link .wp-block-button__link {
  color: var(--mv-ink);
}

.obc-mv .mv-jar-link .wp-block-button__link::after {
  content: "\2192";
  transition: transform 0.3s ease;
}

/* sprint 38, squint pass — 302px wide and 19px tall is a target you can miss vertically on a
   phone. ::after is the arrow, so the padding goes on ::before, and nothing moves. */
.obc-mv .mv-jar-link .wp-block-button__link {
  position: relative;
}

.obc-mv .mv-jar-link .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

/* poured: settles at the top of the title. The surface keeps travelling on its own, so nothing here
   needs to animate afterwards. */
.obc-mv .mv-jar.is-poured .mv-jar-fill {
  transform: translateY(calc(100% - var(--milk-level)));
}

.obc-mv .mv-jar.is-poured {
  color: var(--mv-ink);
}

/* the card takes the click, so it has to look like it does. The class is added by the script: the
   pointer would be lying about a card that nothing is listening to. */
.obc-mv .mv-jar.is-clickable {
  cursor: pointer;
}

/* the fill no longer answers the pointer, so hover has to say "clickable" some other way */
@media (hover: hover) {
  .obc-mv .mv-jar:hover { transform: translateY(-4px); }
  .obc-mv .mv-jar:hover .wp-block-button__link::after { transform: translateX(5px); }

  /* the label is the card's own hover state now, so it has to move with the rest of it */
  .obc-mv .mv-jar:hover .mv-jar-link .wp-block-button__link {
    color: var(--mv-deep);
  }
}

/* one tile exactly, so the loop has no seam. Opposite directions, so the two never lock together. */
@keyframes milk-drift-back {
  from { translate: 0 0; }
  to { translate: var(--tile-back) 0; }
}

@keyframes milk-drift-front {
  from { translate: 0 0; }
  to { translate: calc(-1 * var(--tile-front)) 0; }
}

/* the whole surface rising and falling, which a sideways drift alone cannot do */
@keyframes milk-heave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* rising, drifting off true, and swelling on the way up as the pressure drops. It fades before it
   reaches the line rather than popping through it, because the surface above is already busy. */
@keyframes milk-bubble {
  0% { opacity: 0; transform: translate(0, 0) scale(0.55); }
  14% { opacity: 0.9; }
  50% { transform: translate(var(--drift), calc(var(--rise) * -0.5)) scale(1); }
  78% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(calc(var(--drift) * -0.6), calc(var(--rise) * -1)) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .obc-mv .mv-bubble,
  .obc-mv .mv-jar-fill,
  .obc-mv .mv-jar-fill::before,
  .obc-mv .mv-jar-fill::after,
  .obc-mv .mv-jar.is-poured .mv-jar-fill {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 781px) {
  /* a phone card is a narrower window, so the same wavelength would show barely half a crest */
  .obc-mv .mv-jar {
    --tile-back: 400px;
    --tile-front: 240px;

    min-height: 236px;
    padding: 58px 24px 24px;
  }
}

/* ---------- split feature ---------- */
.obc-mv .mv-split.wp-block-columns {
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.obc-mv .mv-split figure {
  margin: 0;
}

.obc-mv .mv-split img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.obc-mv .mv-points {
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
}

.obc-mv .mv-points li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 26px;
  color: var(--mv-muted);
  font-size: 16px;
  line-height: 1.6;
}

.obc-mv .mv-points li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--mv-brand);
  content: "";
}

/* sprint 25 — the sentence takes the gold the number gave up. Not a copy of it: the fireflies carry
   it across and this is where they put it down.

   The cross-fade is done on the text fill rather than by stacking a second copy of the sentence on
   top. The gold sits behind the letters from the moment the class lands, hidden by a fill that is
   still the mist colour, and the fill is what animates to transparent — so the gold rises through
   the words themselves. A duplicate would have had to reproduce the italic inside the sentence, and
   would have drifted the moment anybody edited it. */
.obc-mv .mv-lede.is-gilded {
  background-image:
    linear-gradient(104deg, rgba(255, 255, 255, 0) 40%, rgba(255, 252, 238, 0.92) 49%, rgba(255, 255, 255, 0) 59%),
    linear-gradient(
      177deg,
      #7a5312 0%,
      #b8842c 14%,
      #e9c471 30%,
      #fff4d2 46%,
      #f0d18d 52%,
      #b07f28 58%,
      #8a5f18 66%,
      #dcb45f 80%,
      #f6e2b0 90%,
      #a3741f 100%);
  background-repeat: no-repeat;
  background-size: 240% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: -webkit-text-fill-color 1.2s ease 0.15s;
}

/* sprint 39 — "full consult" is a link into the Finder, and the gilding above is a text fill rather
   than a colour: a child carrying its own fill would print solid ivory through the gold. It inherits
   the fill and keeps the underline, which stays ivory because a decoration follows currentColor. */
.obc-mv .mv-lede a {
  color: inherit;
  -webkit-text-fill-color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(233, 196, 113, 0.55);
}

.obc-mv .mv-lede a:hover,
.obc-mv .mv-lede a:focus-visible {
  text-decoration-color: rgba(233, 196, 113, 0.95);
}

/* the same travelling highlight the number had, so what arrived is recognisably what left */
@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-lede.is-gilded {
    animation: mv-sheen 9s ease-in-out infinite;
  }
}

/* sprint 25 — a firefly sits on every point, from the moment the page loads rather than only once
   the number has been clicked. Almost nobody clicks, and these are the best thing in the column: a
   soft gold bloom breathing on its own slow period, the way the drifting forms in the motion lab do,
   each on a different one so the list never pulses in step.

   The fireflies that fly down from the number still arrive here. They now join lights that are
   already burning instead of switching them on. */
.obc-mv .mv-points li::before {
  top: calc(0.62em - 4px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6e4 0%, #e8c68d 45%, rgba(226, 178, 110, 0.6) 100%);
  box-shadow: 0 0 10px 2px rgba(232, 198, 141, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-points li::before {
    animation: mv-settled 9s ease-in-out infinite;
  }

  /* periods that share no common factor, so the column never falls into step with itself */
  .obc-mv .mv-points li:nth-child(2)::before { animation-duration: 13s; }
  .obc-mv .mv-points li:nth-child(3)::before { animation-duration: 17s; }
  .obc-mv .mv-points li:nth-child(4)::before { animation-duration: 23s; }
  .obc-mv .mv-points li:nth-child(5)::before { animation-duration: 11s; }
  .obc-mv .mv-points li:nth-child(6)::before { animation-duration: 19s; }
}

/* landed, not switched on: it keeps breathing, and never goes fully dark */
@keyframes mv-settled {
  0%, 100% {
    opacity: 0.62;
    box-shadow: 0 0 8px 1px rgba(232, 198, 141, 0.3);
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 18px 5px rgba(232, 198, 141, 0.55);
    transform: scale(1.08);
  }
}

/* ---------- quote ---------- */
/* sprint 25 — the quote is read looking down at a pool of milk. The band it sits on is that surface,
   the words rise up through it the first time anybody scrolls this far, and the rings spread from
   where they broke it.

   Rings sit on a layer beneath the words for the same reason the fireflies do: a ripple that passes
   over a letter is a decal, and one that passes under it is a surface. */
.obc-mv .mv-section.is-pool {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* barely a colour. Left pure white this reads as a page; warmed by this much it reads as milk,
     and the rings have something to be rings in. */
  background: radial-gradient(130% 90% at 50% 38%, #ffffff 0%, #f6efe6 100%);
  /* the whole band answers a click, and clicking the same words repeatedly is how a browser is told
     to select them */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* sprint 26 — quieter, and taking its time about it.
   The band was reading as a splash: three broad doughnuts crossing the whole width inside two
   seconds, over words that arrived from 18px of blur. It is a pool being rested on, not something
   dropped into. The geometry is unchanged and only the strength is down, because a wide soft band
   at low opacity is what milk moving looks like; a narrow one at the same weight is a drawn circle. */
.obc-mv .mv-drop {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  /* a band rather than a border: a hard outline reads as a circle drawn on milk, and a soft one
     reads as milk moving */
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0) 52%,
    rgba(206, 190, 160, 0.26) 63%,
    rgba(224, 212, 188, 0.14) 71%,
    rgba(255, 255, 255, 0) 78%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.04);
}

@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-drop {
    animation: mv-spread var(--spread, 2.4s) cubic-bezier(0.17, 0.72, 0.28, 1) var(--after, 0s) both;
  }
}

/* out and gone. It slows as it widens, the way a ring on water loses its push. It also comes up
   more gradually than it did: a ring at full strength by 12% arrives as a flash. */
@keyframes mv-spread {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.04); }
  22% { opacity: calc(0.44 * var(--strength, 1)); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* under the surface, then through it: out of focus and low before it breaks, sharp once it is up */
@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-quote.is-below,
  .obc-mv .mv-quote-source.is-below {
    opacity: 0;
  }

  /* sprint 26 — 1.9s with a spring on the end of it, from 18px of blur, was a reveal. This is the
     same idea at half the amplitude over nearly twice the time, on an easing curve with no snap in
     it: the words settle rather than land. */
  .obc-mv .mv-quote.is-surfacing,
  .obc-mv .mv-quote-source.is-surfacing {
    animation: mv-surface 3.4s cubic-bezier(0.25, 0.55, 0.3, 1) both;
  }

  .obc-mv .mv-quote-source.is-surfacing {
    animation-delay: 1s;
  }
}

@keyframes mv-surface {
  0% { opacity: 0; filter: blur(7px); transform: translateY(9px) scale(0.99); }
  55% { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: none; }
}

.obc-mv .mv-quote {
  max-width: 24ch;
  margin: 0 auto;
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 300;
  line-height: 1.16;
  text-align: center;
  text-wrap: balance;
}

.obc-mv .mv-quote-source {
  margin: clamp(20px, 3vw, 28px) 0 0;
  color: var(--mv-muted);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- closing ---------- */
.obc-mv .mv-close {
  text-align: center;
}

.obc-mv .mv-close .mv-lede {
  max-width: 26ch;
  margin-right: auto;
  margin-left: auto;
}

.obc-mv .mv-close .mv-body {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

/* ---------- entrance, one orchestrated load ---------- */
@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-hero .mv-eyebrow,
  .obc-mv .mv-hero .mv-hero-title,
  .obc-mv .mv-hero .mv-hero-sub,
  .obc-mv .mv-hero .wp-block-buttons {
    animation: mv-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .obc-mv .mv-hero .mv-eyebrow { animation-delay: 0.05s; }
  .obc-mv .mv-hero .mv-hero-title { animation-delay: 0.16s; }
  .obc-mv .mv-hero .mv-hero-sub { animation-delay: 0.28s; }
  .obc-mv .mv-hero .wp-block-buttons { animation-delay: 0.34s; }
}

@keyframes mv-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* sprint 26 — the rules that ruled a line between each stacked figure went with the ring layout: a
   line between two spheres reads as a cage around them, and they separate themselves.

   The type below is keyed to how many spheres are in a row, not to the window. The grid drops to one
   across at about 540px, and only there is a sphere nearly the width of the screen and able to carry
   a 70px number. Keyed to the window instead, a 600px screen kept the one-across sizes while the
   grid had already gone to two, and a 92px number was dropped into a 263px sphere. */
@media (max-width: 781px) {
  .obc-mv .mv-hero-title {
    max-width: none;
  }
}

/* sprint 14 — centring for the closing call to action, previously carried by a layout attribute */
.obc-mv .mv-close .wp-block-buttons {
  justify-content: center;
}

/* sprint 15 — additions for the Emma-voice version, which reuses this first-pass look exactly:
   a hero text link beside the two buttons, a lead-in above the pull quote, and the approved logo. */
.obc-mv .mv-logo {
  margin: 0 0 clamp(18px, 3vw, 26px);
}

/* width only, so the browser keeps the file's 1:1 ratio; no filter, recolour or crop */
.obc-mv .mv-logo img {
  width: clamp(116px, 12vw, 164px);
  height: auto;
}

.obc-mv .mv-hero-link {
  margin: clamp(18px, 2.5vw, 24px) 0 0;
  font-size: 14px;
}

.obc-mv .mv-hero-link a {
  color: var(--mv-highlight);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.obc-mv .mv-hero-link a:hover {
  color: var(--mv-paper);
}

.obc-mv .mv-quote-lead {
  margin: 0 0 clamp(14px, 2vw, 20px);
  color: var(--mv-muted);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

.obc-mv .mv-secondary-link {
  margin: clamp(22px, 3vw, 32px) 0 0;
  color: var(--mv-muted);
  font-size: 14px;
}

.obc-mv .mv-secondary-link a {
  color: var(--mv-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* a card with no photograph behind it, for the Finder pathway */
.obc-mv .mv-tile-plain {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(360px, 40vw, 460px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--mv-brand);
  border-radius: 2px;
  background: var(--mv-cream);
}

.obc-mv .mv-tile-plain .mv-path-title {
  color: var(--mv-ink);
}

.obc-mv .mv-tile-plain .mv-path-note {
  color: var(--mv-muted);
}

.obc-mv .mv-tile-plain .mv-path-link .wp-block-button__link {
  border-bottom-color: var(--mv-ink);
  color: var(--mv-ink);
}

.obc-mv .mv-tile-plain .mv-path-link .wp-block-button__link:hover {
  border-bottom-color: var(--mv-brand);
  color: var(--mv-brand);
}

/* sprint 16 — the lactation consultant carousel.

   Built on scroll-snap rather than a transform track, so swiping on a phone, two-finger scrolling
   on a trackpad, and tabbing between the profile links all work without any script. The arrows and
   the progress rail are enhancement only and stay hidden until the script wires them up. */
.obc-mv .mv-lc-section {
  overflow: hidden;
}

/* sprint 25 — this section's own heading is centred over the row. Scoped to the carousel: every
   other band on the page still reads from the left margin, and that difference is the point. The
   auto margins matter as much as the alignment, because the lede and the body are both narrower
   than the column and would otherwise sit centred text in a left-hand block. */
.obc-mv .mv-lc-section .mv-kicker,
.obc-mv .mv-lc-section .mv-lede,
.obc-mv .mv-lc-section .mv-body {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.obc-mv .mv-lc-track {
  /* sprint 25 — the row is as wide as the window and runs off the right edge, rather than stopping
     at the measure the rest of the page keeps to. A row that ends where the text ends looks like a
     list of everyone there is; a row that leaves the screen says there is more, which for sixteen
     consultants is the truer thing to say.

     Cards come to rest in the middle of the window rather than against the left margin. The side
     padding is what makes that possible at all: a card can only reach the centre if there is half a
     screen of empty track either side of the row for it to sit in. It is worked out from the track's
     own width rather than from the viewport, because a vw unit counts the scrollbar and would push
     the whole page sideways by its width. */
  --lc-card: clamp(232px, 24vw, 288px);
  --lc-inset: calc((100% - var(--lc-card)) / 2);

  display: flex;
  gap: 24px;
  width: 100%;
  max-width: none;
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 4px var(--lc-inset) 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* none: with centre alignment the snap point is the middle of the scrollport, and any scroll
     padding would shift that middle off the middle of the window */
  scroll-padding: 0;
  /* sprint 16 — hide the native scrollbar. The thin rail below the cards is the progress indicator;
     a styled scrollbar sitting directly under it read as a second, competing progress bar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.obc-mv .mv-lc-track::-webkit-scrollbar {
  display: none;
}

.obc-mv .mv-lc-card {
  position: relative;
  display: flex;
  flex: 0 0 var(--lc-card);
  flex-direction: column;
  justify-content: flex-end;
  /* 3 October 2026 — taller, which is the only lever left for the tightest-framed photograph in the
     set. Hillary's is 1107 by 1421 with her face 36% of the width: the framing pass cannot widen a
     crop past the file it came from, so her face stays larger than everybody's and her chin sits
     lower than everybody's. Growing the card moves the pane down the picture rather than moving the
     picture, which is the part we can still choose. */
  min-height: clamp(436px, 44vw, 500px);
  overflow: hidden;
  border-radius: 4px;
  background: var(--mv-cream);
  scroll-snap-align: center;
  /* sprint 25 — one card per gesture, however hard the row is thrown. This is the speed limit: a
     flick that would otherwise sail past a dozen cards, faster than they can be painted, is stopped
     at the very next one. It is also the calmer way to read a row of people. */
  scroll-snap-stop: always;
}

/* 3 October 2026, and back again the same day. The photograph runs the full height of the card and
   the name pane lies over it, which is where the stained-glass reading comes from: Deep Green at
   half strength over a blurred photograph is a different colour on every card, and over cream it is
   flat sage.
   It was moved off the picture that morning because Hillary's and Elizabeth's chins were landing
   under the pane. What actually fixed that was measuring every photograph — FACE and TARGET in
   src/build-portraits.js — so that a face is a third of the frame wide with the eyes at 36% down it
   on all twenty. A chin now sits near 58% and the pane starts around 75%, so the glass can go back
   over the picture where it belongs. A new headshot that has not been measured is the case to watch:
   it is left at its own framing, and that is the one that can put a chin under the pane again. */
.obc-mv .mv-lc-photo {
  position: absolute;
  inset: 0;
  margin: 0;
}

.obc-mv .mv-lc-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* sprint 25 — a grid rather than a stack, so the languages can sit beside the profile link instead
   of on a line of their own. Only three of the sixteen carry them, and the track stretches every
   card to the tallest, so one extra line anywhere would have raised the whole row. */
.obc-mv .mv-lc-body {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  /* 3 October 2026 — tighter, so the glass starts lower. On a phone this pane was 36% of the card,
     which put its top edge at 64% and left a chin four points of clearance on the longest faces. The
     words inside it are a name, a credentials line and a link; the padding was the part that could
     give. */
  padding: 12px 20px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  /* sprint 28 — Deep Green at the same weight. This was rgba(7, 46, 45), the near-black green the
     palette sweep retired everywhere else, and it was left behind here because an rgba is easy to
     miss. It also has to match the team page, which uses the same pane. */
  background: rgba(41, 79, 75, 0.78);
  color: #fff;
}

/* without a backdrop filter the panel has to carry the legibility on its own */
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .obc-mv .mv-lc-body {
    /* measured against all sixteen portraits: at half strength the palest of them still puts white
       type at 5.6:1 and the small credentials line at 4.9:1, both clear of the 4.5:1 floor. Any
       lighter and the credentials fail on one card. */
    background: rgba(7, 46, 45, 0.5);
    -webkit-backdrop-filter: blur(60px) saturate(150%);
    backdrop-filter: blur(60px) saturate(150%);
  }
}

.obc-mv .mv-lc-name {
  grid-area: 1 / 1 / 2 / 3;
  margin: 0 0 4px;
  color: #fff;
  font-size: 19px;
  line-height: 1.25;
  text-align: left;
}

/* 14 September 2026 — two lines are always reserved here, whether the credentials need them or not.
   Amanda: "Shahnaz's card is taller than the rest ... you will have to size up the rest to match."
   Her four credentials wrap, which made her name pane 142px against everybody else's 123px; the card
   box was never uneven, the pane over the photograph was.
   In em rather than pixels because the face tiles on /motherbaby-health/ and /naturopathic-medicine/
   set this line at 11.5px on a phone, and line-height is 1.6 in both variants, so 3.2em is two lines
   of whatever size is in force. A fixed 38px would have reserved two and a bit lines there.
   The cost is deliberate and hers: the pane now covers 19px more of every other photograph. */
.obc-mv .mv-lc-creds {
  grid-area: 2 / 1 / 3 / 3;
  margin: 0 0 10px;
  min-height: 3.2em;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the last row, to the right of the link and hard against the edge. It must not wrap: a second line
   here is a second line on all sixteen cards. */
.obc-mv .mv-lc-note {
  grid-area: 3 / 2 / 4 / 3;
  align-self: center;
  justify-self: end;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  letter-spacing: 0.01em;
  text-align: right;
  white-space: nowrap;
}

.obc-mv .mv-lc-actions.wp-block-buttons {
  grid-area: 3 / 1 / 4 / 2;
  margin: 0;
  justify-content: flex-start;
}

.obc-mv .mv-lc-link .wp-block-button__link {
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.obc-mv .mv-lc-link .wp-block-button__link:hover {
  border-bottom-color: #fff;
  color: #fff;
}

/* sprint 38, squint pass — a fingertip's worth of target under an 11px link.
 *
 * "View profile" renders 84x19 on a phone. On Meet the Team that does not matter, because the whole
 * card carries a ::before overlay and is the real target. On the homepage carousel it is the only
 * way in, deliberately: a full-card link fights the drag. So the target grows without the link
 * moving — an invisible pad around it, which is what a thumb aims at and an eye never sees.
 */
.obc-mv .mv-lc-link .wp-block-button__link {
  position: relative;
}

.obc-mv .mv-lc-link .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: -14px -12px;
}

/* the newsletter tick renders 13x13 on a phone, which is smaller than the thing pressing it */
.obc-mv input[type="checkbox"] {
  /* flex-basis as well as width: in a flex row the tick was being squeezed to 15px wide and 22
     tall, which is a target shaped like nothing anybody's thumb is */
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  accent-color: var(--mv-deep, #4f8f8b);
}

.obc-mv .mv-lc-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 8px;
}

.obc-mv .mv-lc-controls[hidden] {
  display: none;
}

.obc-mv .mv-lc-rail {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(31, 44, 49, 0.15);
}

.obc-mv .mv-lc-rail-fill {
  position: absolute;
  inset: 0;
  background: var(--mv-ink);
  transform: scaleX(0.08);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.obc-mv .mv-lc-arrows {
  display: flex;
  gap: 10px;
}

.obc-mv .mv-lc-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid var(--mv-ink);
  border-radius: 50%;
  background: transparent;
  color: var(--mv-ink);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.obc-mv .mv-lc-arrow:hover:not(:disabled) {
  background: var(--mv-ink);
  color: var(--mv-paper);
}

.obc-mv .mv-lc-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.obc-mv .mv-lc-all.wp-block-buttons {
  justify-content: center;
  margin-top: clamp(28px, 4vw, 40px);
}

@media (max-width: 600px) {
  /* a phone shows one card, and the inset above centres it from the same formula */
  .obc-mv .mv-lc-track {
    --lc-card: 78vw;
  }

  .obc-mv .mv-lc-arrows {
    display: none;
  }
}

/* sprint 17 — a single very large figure in place of the low-information photograph. Deliberately
   ink on cream rather than gold on navy, so it does not read as a repeat of the research band above:
   that one is evidence from a study, this one is the clinic's own count. */
.obc-mv .mv-bignum {
  padding: clamp(8px, 2vw, 24px) 0;
}

/* sprint 25 — solid gold, chosen from three readings in the assets lab. The metal is a fixed ramp
   with the abrupt steps real gold has, because a smooth blend reads as plastic; only a single
   specular band travels across it, out and back, while the warmth around the letters rises and falls
   on a different period so the two never line up twice.

   It is painted onto the letterforms, not behind them, so the number is still text: retypable in
   WordPress, readable by a screen reader, findable by search — and the mist colour set on the block
   in the editor is what shows if a browser cannot clip a background to text. */
.obc-mv .mv-bignum-figure {
  margin: 0 0 12px;
  font-size: clamp(76px, 11vw, 152px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-align: left;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .obc-mv .mv-bignum-figure {
    background-image:
      linear-gradient(104deg, rgba(255, 255, 255, 0) 40%, rgba(255, 252, 238, 0.92) 49%, rgba(255, 255, 255, 0) 59%),
      linear-gradient(
        177deg,
        #7a5312 0%,
        #b8842c 14%,
        #e9c471 30%,
        #fff4d2 46%,
        #f0d18d 52%,
        #b07f28 58%,
        #8a5f18 66%,
        #dcb45f 80%,
        #f6e2b0 90%,
        #a3741f 100%);
    background-repeat: no-repeat;
    background-size: 240% 100%, 100% 100%;
    background-position: 0% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-bignum-figure {
    animation: mv-sheen 9s ease-in-out infinite;
  }
}

/* only the highlight moves; the metal underneath is fixed, because a polished face does not dim */
@keyframes mv-sheen {
  0%, 100% { background-position: 0% 0, 0 0; }
  50% { background-position: 100% 0, 0 0; }
}

.obc-mv .mv-bignum-label {
  max-width: 16ch;
  margin: 0 0 20px;
  padding-bottom: 20px;
  /* follows the text colour, so the rule stays visible whichever background is chosen */
  border-bottom: 1px solid rgba(128, 128, 128, 0.35);
  border-bottom-color: color-mix(in srgb, currentColor 28%, transparent);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.35;
}

/* visible while the figure is unverified, and meant to be deleted once it is confirmed */
.obc-mv .mv-bignum-note {
  max-width: 34ch;
  margin: 0;
  opacity: 0.62;
  font-size: 12px;
  font-style: italic;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .obc-mv .mv-bignum-figure {
    text-align: center;
  }

  .obc-mv .mv-bignum-label,
  .obc-mv .mv-bignum-note {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}


/* sprint 21 — fireflies leaving the figure.

   Moved off the hero and onto the statistic, where the motion has a job: it carries the eye from the
   number on the left across to the paragraph on the right, which is the order the section wants to
   be read in. Decoration at the top of the page was only ever decoration.

   Each firefly is a pseudo-element on the figure or its label, so they leave from the number itself.
   No markup at all: nothing added for the owner to trip over in the editor, and nothing she can
   delete by accident.

   Two rhythms per firefly on different periods, one moving it and one breathing light into it, so
   none is ever the same brightness at the same point of its crossing twice. None goes fully dark,
   because a light that blinks out reads as a fault rather than as a firefly. */
.obc-mv .mv-bignum-figure,
.obc-mv .mv-bignum-label {
  position: relative;
}

/* 4 September 2026 — the canvas the four fly on, once the script is drawing them.
 *
 * Amanda chose "they bounce off the letters" off /firefly-lab/. Over the block rather than behind
 * it, which is the whole point: a light passing behind a glyph was what she asked to be rid of.
 * It takes no clicks, so the figure underneath is still shakeable. */
.obc-mv .mv-bignum-flight {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

/* and the drift it replaces, which stays as the fallback: `is-flying` is added by fireflies.js only
   once a canvas exists, so a reader whose JavaScript never arrives keeps what sprint 22 built. */
.obc-mv .mv-bignum.is-flying .mv-bignum-figure::before,
.obc-mv .mv-bignum.is-flying .mv-bignum-figure::after,
.obc-mv .mv-bignum.is-flying .mv-bignum-label::before,
.obc-mv .mv-bignum.is-flying .mv-bignum-label::after {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-bignum-figure::before,
  .obc-mv .mv-bignum-figure::after,
  .obc-mv .mv-bignum-label::before,
  .obc-mv .mv-bignum-label::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6e4 0%, #e8c68d 45%, rgba(226, 178, 110, 0.6) 100%);
    content: "";
    pointer-events: none;
  }

  /* they set off from around the figure, not from a single point, so it reads as a drift rather
     than as something being emitted */
  .obc-mv .mv-bignum-figure::before {
    top: 22%; right: 8%; width: 9px; height: 9px;
    animation: mv-carry 21s ease-in-out infinite, mv-glow 3.1s ease-in-out infinite;
  }

  .obc-mv .mv-bignum-figure::after {
    top: 64%; right: 22%; width: 7px; height: 7px;
    animation: mv-carry 29s ease-in-out 5s infinite, mv-glow 4.3s ease-in-out infinite;
  }

  .obc-mv .mv-bignum-label::before {
    top: 8%; right: 14%; width: 6px; height: 6px;
    animation: mv-carry 37s ease-in-out 9s infinite, mv-glow 3.7s ease-in-out infinite;
  }

  .obc-mv .mv-bignum-label::after {
    top: 72%; right: 30%; width: 10px; height: 10px;
    animation: mv-carry 43s ease-in-out 14s infinite, mv-glow 5.1s ease-in-out infinite;
  }
}

/* across the gap and into the paragraph, lifting and stalling on the way, then gone before it
   reaches the far edge so it never distracts from the words it delivered the eye to */
/* the envelope uses filter rather than opacity, because the flicker below owns opacity and the last
   animation to declare a property wins. Filter and opacity multiply, so the two compose instead of
   one cancelling the other. */
@keyframes mv-carry {
  0% { filter: opacity(0); transform: translate(0, 0); }
  10% { filter: opacity(1); }
  32% { transform: translate(12vw, -30px); }
  58% { transform: translate(24vw, 16px); }
  84% { filter: opacity(0.55); transform: translate(35vw, -18px); }
  100% { filter: opacity(0); transform: translate(44vw, 6px); }
}

/* the glow, not the position; never fully dark */
@keyframes mv-glow {
  0%, 100% { opacity: 0.34; box-shadow: 0 0 8px 2px rgba(232, 198, 141, 0.34); }
  50% { opacity: 1; box-shadow: 0 0 26px 8px rgba(232, 198, 141, 0.72); }
}

/* sprint 22 — on a narrow screen the two columns stack, so the figure sits above the paragraph
   rather than beside it. Carrying the eye rightward there would point at nothing. Below the column
   breakpoint the fireflies fall instead, swaying as they go, and land where the words now are. */
@media (prefers-reduced-motion: no-preference) and (max-width: 781px) {
  .obc-mv .mv-bignum-figure::before,
  .obc-mv .mv-bignum-figure::after,
  .obc-mv .mv-bignum-label::before,
  .obc-mv .mv-bignum-label::after {
    animation-name: mv-fall, mv-glow;
  }
}

/* sprint 25 — shake the number and more come out of it. The four above drift on their own; these
   arrive a swarm at a time, when the figure is clicked, and are built by script because an element
   only has two pseudo-elements to give and fourteen were wanted. */
.obc-mv .mv-bignum {
  position: relative;
}

/* The flight crosses from the number to the list in the other column, so its canvas belongs to the
   band rather than to the number.

   isolation is what makes the depth work. A negative layer looks for the nearest element that is a
   layer of its own, and without this that is the page itself — so the fireflies would have gone
   behind the band's own background and vanished rather than behind its words. */
.obc-mv .mv-lc-section,
.obc-mv .mv-section {
  position: relative;
  isolation: isolate;
}

/* 4 September 2026 — over the words, not behind them.
 *
 * It was z-index -1, and PRODUCTION.md said why: a firefly passing behind a letter and out the other
 * side gives the sentence a depth it cannot have on its own. That was true and Amanda has chosen
 * against it — "the fireflies should bounce off the letters instead of going behind and distracting
 * the eye" — so the gold crosses the band in front of everything now, the way the four do. It still
 * crosses rather than bouncing: this one is the gold going somewhere, and a light that bounced would
 * never arrive at the sentence it is carrying the colour to. */
.obc-mv .mv-dissolve {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

/* spent: the gold has gone with the fireflies and the mist underneath is what is left. The figure
   keeps the colour the block was given in the editor, which is why nothing here sets one. */
.obc-mv .mv-bignum.is-spent .mv-bignum-figure {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

/* It does not simply change colour. For the first moment there is no number at all — only the
   fireflies standing in its shape — and the mist rises as they leave, so the white is uncovered by
   their going rather than swapped in behind them.

   On a class of its own, taken off again once it has played. Left on `is-spent` it held the figure's
   animation property for good, and every later shake was silently overruled by it. */
@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-bignum.is-revealing .mv-bignum-figure {
    animation: mv-reveal 1.8s ease-out both;
  }
}

@keyframes mv-reveal {
  0%, 16% { opacity: 0; }
  100% { opacity: 1; }
}

/* only once the script has wired it up: a pointer over something nothing is listening to is a lie.
   Selection is turned off with it, because shaking something means tapping it in quick succession
   and two taps in quick succession is how a browser is told to select a word. */
.obc-mv .mv-bignum.is-shakeable .mv-bignum-figure {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* They fly the same path as the four that drift on their own, on the same long periods and with the
   same flicker, so a shaken one is indistinguishable from one that was always there: it crosses to
   the paragraph on a wide screen, and falls to it on a narrow one, exactly as they do. The script
   sets only the timings, never the animation itself, or an inline style would win over the media
   query below and the swarm would still drift sideways on a phone.

   They belong to the band rather than to the number, and sit behind its words: a firefly that passes
   behind a letter and out the other side gives the sentence a depth it cannot have on its own. */
.obc-mv .mv-spark {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6e4 0%, #e8c68d 45%, rgba(226, 178, 110, 0.6) 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-spark {
    animation:
      mv-carry var(--travel, 27s) ease-in-out var(--wait, 0s) 1 both,
      mv-glow var(--flicker, 3.4s) ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 781px) {
  .obc-mv .mv-spark {
    animation-name: mv-fall, mv-glow;
  }
}

/* the branch, not the fireflies: a short judder that settles, so the number reads as the thing that
   was shaken rather than as something animating on its own.

   Matched through .mv-bignum on purpose. The spent figure sets `animation: none`, at a weight this
   could not reach without it, and a white number that refuses to shake is exactly what that cost. */
@media (prefers-reduced-motion: no-preference) {
  .obc-mv .mv-bignum .mv-bignum-figure.is-shaken {
    animation: mv-judder 0.52s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
}

@keyframes mv-judder {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-4px, 1px) rotate(-0.7deg); }
  35% { transform: translate(4px, -2px) rotate(0.6deg); }
  55% { transform: translate(-3px, 1px) rotate(-0.4deg); }
  78% { transform: translate(2px, 0) rotate(0.2deg); }
}

/* a fall is not a drop: it sways across itself on the way down */
@keyframes mv-fall {
  0% { filter: opacity(0); transform: translate(0, 0); }
  10% { filter: opacity(1); }
  30% { transform: translate(26px, 84px); }
  56% { transform: translate(-20px, 178px); }
  82% { filter: opacity(0.55); transform: translate(18px, 266px); }
  100% { filter: opacity(0); transform: translate(-6px, 340px); }
}

/* sprint 26 — the bottom of the homepage is the Finder's first question.
   Whoever reaches here has scrolled past both booking buttons, so they are, by definition, the
   people who did not know what to book. A single "Book support" was the wrong thing to hand them. */
.obc-mv .mv-start {
  gap: clamp(12px, 2vw, 20px);
  margin: clamp(24px, 3vw, 34px) 0 clamp(20px, 2.6vw, 28px);
}

.obc-mv .mv-start-card {
  height: 100%;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(246, 246, 246, 0.28);
  border-radius: 4px;
}

.obc-mv .mv-start-title {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
}

.obc-mv .mv-start-note {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.82;
}

/* these are the primary action here, so they are filled while Book Now beside them is not */
.obc-mv .mv-start-link .wp-block-button__link {
  padding: 11px 22px;
  border-radius: 999px;
  background: #f6efe6;
  color: #294f4b;
  font-size: 15px;
}

.obc-mv .mv-start-link .wp-block-button__link:hover { background: #fff; }

/* the way out for somebody who already knows, deliberately quieter than the two cards */
.obc-mv .mv-start-aside {
  max-width: 62ch;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.72;
}

@media (max-width: 600px) {
  .obc-mv .mv-start { gap: 12px; }
}

/* ============================================================================
   sprint 26 — holding still
   ============================================================================
   Two things live here: the rule that stops a band animating while it is off screen, and the snap
   points that let the page arrive on one band at a time. They are together because they are the same
   complaint — the page felt jittery, and it felt jittery for two different reasons.

   The first is measurable. Parked and untouched on a processor six times slower than this one, the
   page was burning 35% of the main thread on its own animations, 57ms of every second of it in style
   recalculation, against 3.9% with every animation cancelled. Almost none of that was on screen. The
   cost is not really paid by the animation; it is paid by the scroll, because the thread resolving
   those styles is the thread that has to answer the wheel. */

.obc-mv .is-resting,
.obc-mv .is-resting *,
.obc-mv .is-resting *::before,
.obc-mv .is-resting *::after,
.is-away .obc-mv *,
.is-away .obc-mv *::before,
.is-away .obc-mv *::after {
  /* !important, and not lightly. Every animation on this page is declared with the `animation`
     shorthand, which resets play-state to running as part of itself, and several of those selectors
     weigh exactly what this one weighs. A tie broken by source order would work today and break the
     first time somebody adds a rule underneath. */
  animation-play-state: paused !important;
}

/* ---------- one band at a time: removed ----------
   sprint 27 — the page used to carry `scroll-snap-type: y mandatory`, so it arrived on one band at a
   time. Taken out at the owner's request: she did not like how it felt, and a page that decides where
   your scroll stops is a page arguing with the reader. It now scrolls like an ordinary document.

   The idea may come back in a different form, so what was here is worth keeping a note of rather than
   only a diff. It was `scroll-snap-type: y mandatory` on `html:has(.obc-mv)`, with
   `scroll-snap-align: start` and `scroll-snap-stop: normal` on `.mv-hero` and `.mv-section`, plus a
   `scroll-padding-top` hook for the day the header becomes sticky. Two things were already known
   about it: `scroll-snap-align: end` markers at the foot of each band were tried and are wrong, and
   `proximity` is the softer setting if a lock is ever wanted again.

   The consultant carousel keeps its own horizontal snap. That one is a control being swiped through,
   not the page deciding where the reader stops, and it is a different thing entirely. */

/* sprint 38, squint pass — a measure for the prose that never got one.
 *
 * The site already has a convention and keeps to it in about forty places: prose runs to 62ch or
 * 66ch. What it had no rule for is a paragraph with no class of its own, and those ran the full
 * 990px of the content column — 127 characters a line on /privacy/, measured against the rendered
 * text rather than estimated. Past about ninety the eye loses the start of the next line on the way
 * back, which is a tiredness fault rather than a legibility one, and so exactly the kind this site
 * cares about most.
 *
 * Scoped to paragraphs and list items with no mv- class, so every measure already chosen by hand
 * stays chosen. Card text is capped separately below: those only run long at 1440, where the cards
 * themselves get wide.
 */
.obc-mv .mv-inner > p:not([class*="mv-"]),
.obc-mv .mv-inner > ul > li,
.obc-mv .mv-inner > ol > li,
.obc-mv .mv-inner > .wp-block-list > li {
  max-width: 66ch;
}

.obc-mv .mv-mission-card-text,
.obc-mv .mv-ref-card-line,
.obc-mv .mv-prov-fine-text,
.obc-mv .mv-prep-item-text,
.obc-mv .mv-prov-sign {
  max-width: 62ch;
}

/* sprint 38 — one more stop of dim, for a photograph with bright things running through the words.
 *
 * The Students hero is an open book: dark wood, and white pages fanning across exactly where the
 * heading sits. Averaged it is one of the darkest heroes on the site, 9.9:1 behind the heading and
 * 11.7 behind the paragraph, and it still reads badly, because an average is the wrong measure for
 * this fault. The brightest patch under the same words is 3.5:1, and under the gold kicker 1.8:1.
 * Variance, not level.
 *
 * A modifier rather than a rule about this page, so the next busy photograph is one class rather
 * than another selector.
 */
.obc-mv .wp-block-cover.mv-hero-dim > .wp-block-cover__background {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.85) 52%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

/* --- the shorter homepage, /home-shorter/ ------------------------------------------------------
 *
 * 2 September 2026 — Amanda: put the stats on a swipe so the booking buttons and the people are not
 * at the bottom of a long scroll. Measured first: the homepage is 6.9 screens on desktop and 8.2 on
 * a phone, and Meet your lactation consultant does not start until 4.7 phone screens in.
 *
 * Two changes, and the free one is the reorder in home-shorter.html: the people and the way in come
 * before the proof. A family who already trusts us should not scroll past the evidence to book.
 *
 * The other is this. On a phone the four stats stack and eat two screens on their own. Here they are
 * one horizontal strip that snaps, so all four are still published and the section is one screen.
 *
 * Deliberately not a slideshow. A carousel is among the least used things on a page, roughly one
 * visitor in a hundred touching one and most of those never leaving the first slide, so two of these
 * four would effectively be unpublished. Nothing auto-advances either: the site's own motion rule is
 * that nothing loops, and a timer here would need a pause control to pass WCAG 2.2.2.
 *
 * Scoped to .mv-home-shorter so the live homepage is untouched and the two can be compared.
 * Desktop is unchanged: four columns, as now.
 */
@media (max-width: 781px) {
  .obc-mv.mv-home-shorter .mv-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* out to the edges, so the card clipped at the right reads as "there is more this way" */
    margin-inline: calc(var(--mv-gutter, 22px) * -1);
    padding: 0 var(--mv-gutter, 22px) 6px;
    /* 3 September 2026 — a snapped card stops at the gutter rather than flush against the edge of
       the screen. Without this the snap point and the padding disagree, and every step the script
       makes is corrected by the browser a moment later, which is what read as jank. */
    scroll-padding-inline: var(--mv-gutter, 22px);
  }
  .obc-mv.mv-home-shorter .mv-stats::-webkit-scrollbar { display: none; }
  .obc-mv.mv-home-shorter .mv-stats > .mv-stat {
    flex: 0 0 72%;
    scroll-snap-align: start;
    margin: 0;
  }
}

/* the bar under the strip. Drawn by assets/js/strip.js, hidden until there is something to scroll,
   so above 781px it never appears. Warm Gold on a hairline of itself, which is the site's own way of
   saying "this is a measure" rather than "this is a control". */
.obc-mv.mv-home-shorter .mv-strip-rail {
  position: relative;
  height: 3px;
  margin: 18px auto 0;
  max-width: 220px;
  border-radius: 999px;
  background: rgba(246, 239, 230, 0.22);
  overflow: hidden;
}
.obc-mv.mv-home-shorter .mv-strip-rail[hidden] { display: none; }
.obc-mv.mv-home-shorter .mv-strip-rail-on {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--mv-highlight);
  transition: left 0.28s ease;
}
@media (prefers-reduced-motion: reduce) {
  .obc-mv.mv-home-shorter .mv-strip-rail-on { transition: none; }
}

/* 3 September 2026 — the line that says where she was.
 *
 * Quiet, and above the page rather than over it. A parent coming back to a long page has already
 * been interrupted once; a modal or a floating bar would be a second interruption in the same
 * minute. It is one sentence, one button and a way to dismiss it, and it goes when either is
 * pressed.
 */
/* 3 September 2026 — edge to edge, at Amanda's word: it sat in a 68rem box with white either side
   of it, which reads as a card that failed to load rather than as a band across the top. Full width
   with the site's own gutter inside it, so the sentence starts where every other line on the page
   starts. */
.obc-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding: 12px var(--mv-gutter, 22px);
  border-bottom: 1px solid rgba(24, 62, 73, 0.14);
  background: var(--mv-ivory, #F6EFE6);
  font-size: 0.95rem;
}

.obc-resume-line {
  margin: 0;
  flex: 1 1 16rem;
  color: var(--mv-ink, #1F2C31);
}

.obc-resume-go,
.obc-resume-no {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 7px 16px;
}

.obc-resume-go {
  border: 0;
  background: var(--mv-brand, #75AAB0);
  color: var(--mv-ink, #1F2C31);
  font-weight: 600;
}

.obc-resume-go:hover,
.obc-resume-go:focus-visible {
  background: var(--mv-gold, #D7B47A);
}

.obc-resume-no {
  border: 1px solid rgba(24, 62, 73, 0.24);
  background: transparent;
  color: var(--mv-slate, #758287);
}

.obc-resume-no:hover,
.obc-resume-no:focus-visible {
  border-color: var(--mv-ink, #1F2C31);
  color: var(--mv-ink, #1F2C31);
}

/* 4 September 2026 — a form that says what it is in one line and waits to be asked.
 *
 * Amanda: "use the discretion philosophy when designing so that they do not take up too much
 * vertical space unless they're interacted with." The fold's own shape is in assets/js/signup.js;
 * this is only what it looks like. Nothing here hides anything: the region carries the `hidden`
 * attribute the script writes, so a reader whose JavaScript never arrives sees the plain paragraphs
 * the block editor holds rather than a heading that opens nothing.
 */
.obc-mv .su-fold-head {
  margin: 0;
}

/* 5 September 2026 — it has to look like something you can press.
 *
 * Amanda: "this fold out card is the same colour as the background. It's hidden from the user."
 * She is right and this was mine. It had `background: none`, no border but a hairline on top, and
 * that hairline was Ink at 14% — which on the Deep Green and Deep Navy bands where five of the six
 * of these actually live is invisible. What was left was a line of text and a small plus, and a line
 * of text is not a control however carefully the aria is written.
 *
 * The fix is the shape this site already uses for a button that should not shout: the quiet pill,
 * a rim and a wash, tuned with her the same afternoon. It is deliberately the same shape, because
 * two ways of saying "press me, gently" is one more than a page needs.
 *
 * Written light-first with a dark override rather than in currentColor, which is the pattern
 * .mv-ref-action.is-quiet already follows in redesign-referral.css. */
.obc-mv .su-fold-open {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 13px 22px;
  border: 1px solid rgba(31, 44, 49, 0.38);
  border-radius: 999px;
  background: rgba(31, 44, 49, 0.05);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* the dark bands, which is where most of these are: five of the six sit on Deep Green or Deep Navy */
.obc-mv .mv-dark .su-fold-open{
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.07);
}

.obc-mv .su-fold-open:hover,
.obc-mv .su-fold-open:focus-visible {
  border-color: currentColor;
  background: rgba(31, 44, 49, 0.11);
}

.obc-mv .mv-dark .su-fold-open:hover,
.obc-mv .mv-dark .su-fold-open:focus-visible{
  background: rgba(255, 255, 255, 0.14);
}

/* the chevron is the only thing that moves, and it says which way this goes */
/* the plus sits in a ring of its own, so the thing that says "this opens" is a mark rather than a
   character of text that happens to be at the end of a sentence */
.obc-mv .su-fold-open::after {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--mv-gold, #d7b47a);
  content: "+";
  font-size: 15px;
  line-height: 1;
}

.obc-mv .su-fold-open[aria-expanded="true"]::after {
  content: "–";
}

.obc-mv .su-fold-open:hover,
.obc-mv .su-fold-open:focus-visible {
  color: var(--mv-gold, #d7b47a);
}

/* 18 September 2026 — the marker on a light band. Amanda, of the contact card on Soft Sage: "the gold
   doesn't stand out enough on the send us a message disclaimer."

   It could not. The `+` is Warm Gold and the band is #A7B9A2, which measures 1.06:1 — the two colours
   are the same weight and the glyph disappeared into it. Five of the six folds on this site sit on
   Deep Green, where the same gold is 4.62:1 and right, so the fix belongs to the light bands rather
   than to the marker.

   Here the disc is filled with colostrum and rimmed and lettered in Deep Green, which is 4.37:1
   against the sage: the gold is the thing you see, and the edge is what makes it legible rather than
   the gold itself. And the hover no longer turns the row's words gold — pale gold text on sage is the
   same 1.06:1, so the label vanished at the moment somebody pointed at it. */
.obc-mv .mv-section:not(.mv-dark) .su-fold-open::after {
  border-color: #294f4b;
  background: #e9c471;
  color: #294f4b;
}

.obc-mv .mv-section:not(.mv-dark) .su-fold-open:hover,
.obc-mv .mv-section:not(.mv-dark) .su-fold-open:focus-visible {
  color: inherit;
  border-color: #294f4b;
}

.obc-mv .mv-section:not(.mv-dark) .su-fold-open:hover::after,
.obc-mv .mv-section:not(.mv-dark) .su-fold-open:focus-visible::after {
  background: #dcb45f;
}

/* 5 September 2026 — opened, it is one container rather than a pill with a card under it.
 *
 * Amanda: "it looks a little weird when you fold it out. It feels a little wrong." What it was: a
 * full-width pill, and then a white card two-thirds as wide starting under its left edge and ending
 * nowhere near its right. Two shapes that shared one edge by accident. The card was also plain white
 * on a dark green band, which is the loudest thing a discreet control could possibly open into.
 *
 * So the header keeps its rim and its wash and squares off along the bottom when it is open, and the
 * panel continues the same rim and the same wash and rounds off at the bottom. One outline around
 * the whole of it, the way a real drawer looks.
 *
 * The card inside gives up its own white, border, radius and width: it was carrying all of those to
 * be a card on a page, and inside this it is the contents of a drawer. The input fields keep their
 * light grounds, which is what a form needs to be usable, and they now read as the only light things
 * in it rather than as white on white. */
.obc-mv .su-fold-open[aria-expanded="true"] {
  /* the bottom edge goes rather than turning transparent: a transparent border is still a pixel
     wide, and that pixel showed the band through as a seam across the middle of the drawer */
  padding-bottom: 14px;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.obc-mv .su-fold-body {
  padding: 0;
  border: 1px solid rgba(31, 44, 49, 0.38);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(31, 44, 49, 0.05);
}

.obc-mv .mv-dark .su-fold-body{
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.07);
}

.obc-mv .su-fold-body > .su-box {
  max-width: none;
  margin: 0;
  padding: 4px clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 24px);
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* on a dark band the words in it are the band's words, not a card's */
.obc-mv .mv-dark .su-fold-body .su-box{
  color: var(--mv-paper);
}

.obc-mv .mv-dark .su-fold-body .su-blurb{
  color: rgba(246, 239, 230, 0.86);
}