/* sprint 28 — the referral page, rebuilt on the redesign's own language and on BRAND.md.
 *
 * Scoped under .obc-mv like the rest of the redesign, so loading it cannot touch the accepted
 * replica pages. Everything here is either a class the homepage already defines (mv-section,
 * mv-inner, mv-kicker, mv-lede, mv-body, mv-hero, mv-cta) or a mv-ref-* class of its own.
 *
 * Colour is assigned by what each section is doing, which is the rule the palette reference asks
 * for rather than one this file invented:
 *
 *   the two ways in     Milk Teal      a family choosing between two goals
 *   what to have ready  Warm Gold      readiness, carried as a rule and a card edge, never as text
 *   the numbered steps  Clinical Teal  active clinical steps
 *   once it is with us  Soft Sage      follow-up and progress, with Deep Green over it
 *   the close           Deep Green     the dark ground the whole site uses
 *
 * Two contrast decisions worth keeping, both measured rather than eyeballed:
 *
 * - Nothing light sits on Milk Teal or Soft Sage. White on Milk Teal is 2.6:1 and the homepage does
 *   it anyway; repeating it here would spread the one accessibility fault the redesign already has.
 *   Body copy on both bands is Ink (5.5:1 and 6.8:1) and headings are Deep Navy or Deep Green.
 * - Buttons on light ground are Deep Green rather than Clinical Teal. Teal reads as the action
 *   colour, but white on it is 3.7:1, which is under the 4.5 button text needs. Teal keeps the step
 *   numerals instead, where the type is large enough for 3:1 to be the bar it has to clear.
 */

.obc-mv .mv-ref-hero.wp-block-cover {
  min-height: min(54vh, 520px);
}

.obc-mv .mv-ref-hero .mv-hero-title {
  max-width: 16ch;
}

/* ---------- the two ways in ---------- */

.obc-mv .mv-ref-ways .mv-body {
  max-width: 56ch;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.obc-mv .mv-ref-cards.wp-block-columns {
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
}

/* the gap above only separates cards within a row. Pages that stack two rows of them, like the
   naturopathic bookings, had the rows touching. */
.obc-mv .mv-ref-cards.wp-block-columns + .mv-ref-cards.wp-block-columns {
  margin-top: clamp(20px, 2.4vw, 32px);
}

/* and whatever follows the last row needs the same air, or the address sits on the cards */
.obc-mv .mv-ref-cards.wp-block-columns + :not(.wp-block-columns) {
  margin-top: clamp(22px, 2.6vw, 34px);
}

.obc-mv .mv-ref-cards .wp-block-column {
  display: flex;
}

.obc-mv .mv-ref-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(28px, 3.2vw, 44px);
  border-radius: 20px;
  background: var(--mv-paper);
  box-shadow: 0 18px 44px rgba(24, 62, 73, 0.16);
}

.obc-mv .mv-ref-card-title {
  margin: 0 0 6px;
  color: var(--mv-deep);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
}

.obc-mv .mv-ref-card-note {
  margin: 0 0 24px;
  color: var(--mv-muted);
  font-size: 15px;
}

.obc-mv .mv-ref-steps {
  margin: 0 0 28px;
  padding-left: 1.4em;
  color: var(--mv-ink);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
}

.obc-mv .mv-ref-steps li {
  margin: 0 0 14px;
  padding-left: 6px;
}

.obc-mv .mv-ref-steps li:last-child {
  margin-bottom: 0;
}

/* the one place Clinical Teal appears: the steps themselves, large enough to carry it */
.obc-mv .mv-ref-steps li::marker {
  color: #4f8f8b;
  font-size: 1.25em;
  font-weight: 600;
}

.obc-mv .mv-ref-actions.wp-block-buttons {
  margin-top: auto;
}

/* 5 September 2026 — colostrum, at Amanda's word: "let's make the colostrum gold buttons a theme on
 * the site. Instead of cold buttons I want colostrum."
 *
 * This is thirty-nine buttons across twelve pages and it is one rule, which is the point of them
 * having been one class all along. Deep Navy was the cold one she means.
 *
 * The dark bands were already gold: --mv-gold has been #E9C471 since it was named, so the rule below
 * that turned these over on a dark ground was turning them to the same colour this now is. That pair
 * is gone rather than left agreeing with its parent.
 *
 * Ink on the gold at 8.61:1, where the ivory this carried is 1.50:1 on it. */
.obc-mv .mv-ref-action .wp-block-button__link {
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--mv-gold);
  color: var(--mv-ink);
  font-family: var(--mv-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease;
}

/* Milk Teal, which is what a gold button answers with everywhere on this site: a button already gold
   cannot answer by going gold, and buttons.css is excluded from these by name for that reason. */
/* 18 September 2026 — and its facts sit on ivory in white cards, at Amanda's word: the band was white
   and the cards were ivory, so the cards were the darker thing and read as the ground rather than as
   what is on it. Scoped to this page; the mission page's cards keep the pairing they were drawn in. */
.obc-mv.mv-club .mv-club-facts .mv-mission-card {
  background: #fff;
}

/* 18 September 2026 — Clinical rounds takes the hero's navy, at Amanda's word: "make the button pills
   and the ivory 'While you're here' section that clinical navy like the hero."

   Scoped to .mv-club, which is this page's own wrapper, because mv-ref-action is the gold pill on
   fifteen pages and she was looking at one of them.

   On the page's light bands the pill is Deep Navy with ivory on it. Inside the navy band the same
   pill inverts to ivory with navy on it — a navy pill on a navy band is a rectangle of nothing, and
   the point of the pill is to be found. */
.obc-mv.mv-club .mv-section:not(.mv-dark) .mv-ref-action .wp-block-button__link,
.obc-mv.mv-club .mv-section:not(.mv-dark) .su-go {
  background: var(--wp--preset--color--deep-navy, #183e49);
  color: var(--mv-paper, #f6efe6);
}

.obc-mv.mv-club .mv-section:not(.mv-dark) .mv-ref-action .wp-block-button__link:hover,
.obc-mv.mv-club .mv-section:not(.mv-dark) .su-go:hover {
  background: #102c34;
}

.obc-mv.mv-club .mv-dark .mv-ref-form-card .wp-block-button__link,
.obc-mv.mv-club .mv-dark .mv-ref-form-card .wp-block-file__button,
.obc-mv.mv-club .mv-dark .mv-ref-action .wp-block-button__link,
.obc-mv.mv-club .mv-dark .su-go {
  background: var(--mv-paper, #f6efe6);
  color: var(--wp--preset--color--deep-navy, #183e49);
}

/* 18 September 2026 — and it answers a press the way the Download button beside it does. Amanda: "the
   open the form button doesnt click to colour, make it match download." It did not: my rule above put
   white on hover, which is the colour it already was, so the press landed on nothing. Milk Teal is
   what a pill on this site answers with. */
.obc-mv.mv-club .mv-dark .mv-ref-action .wp-block-button__link:hover,
.obc-mv.mv-club .mv-dark .mv-ref-action .wp-block-button__link:focus-visible,
.obc-mv.mv-club .mv-dark .mv-ref-action .wp-block-button__link:active,
.obc-mv.mv-club .mv-dark .su-go:hover,
.obc-mv.mv-club .mv-dark .su-go:focus-visible,
.obc-mv.mv-club .mv-dark .su-go:active {
  background: #75aab0;
  color: var(--mv-ink);
}

.obc-mv .mv-ref-action .wp-block-button__link:hover,
.obc-mv .mv-ref-action .wp-block-button__link:focus-visible,
.obc-mv .mv-ref-action .wp-block-button__link:active {
  background: #75aab0;
  color: var(--mv-ink);
}

/* sprint 36 — the referral hero folds the send-to line and the two form cards into the head band.
   On the dark band the cream cards keep their own light look, and three things the band would
   otherwise do to them are held off: it must not underline their links, its dark-button rule must not
   turn their buttons to paper (they stay the green pill they are elsewhere), and the cards and the
   note need room to breathe so the hero reads in steps. */
.obc-mv .mv-prov-head .mv-ref-form-cards {
  margin: 32px 0;
}

.obc-mv .mv-dark .mv-ref-form-card a {
  text-decoration: none;
}

/* 5 September 2026 — colostrum here too. These two are the referral download cards, and their own
   rule outranked the family's, so they were the last cold buttons left on the site after Amanda
   asked for the theme. Found by reading the matched rules on the button rather than by looking for
   them. */
.obc-mv .mv-dark .mv-ref-form-card .wp-block-button__link,
.obc-mv .mv-dark .mv-ref-form-card .wp-block-file__button {
  background: var(--mv-gold);
  color: var(--mv-ink);
}

.obc-mv .mv-dark .mv-ref-form-card .wp-block-button__link:hover,
.obc-mv .mv-dark .mv-ref-form-card .wp-block-button__link:focus-visible,
.obc-mv .mv-dark .mv-ref-form-card .wp-block-file__button:hover,
.obc-mv .mv-dark .mv-ref-form-card .wp-block-file__button:focus-visible {
  background: #75aab0;
  color: var(--mv-ink);
}

.obc-mv .mv-dark .mv-ref-file > a:first-child {
  color: var(--mv-ink);
  text-decoration: underline;
}

.obc-mv .mv-prov-head .mv-ref-form-cards + .mv-prov-lede {
  margin-top: 8px;
}

.obc-mv .mv-prov-head .mv-prov-lede + .mv-prov-lede {
  margin-top: 16px;
}

.obc-mv .mv-prov-head .mv-prov-lede + .mv-prov-foot {
  margin-top: 26px;
}

/* ---------- what to have ready ---------- */

.obc-mv .mv-ref-check .mv-inner {
  max-width: 900px;
}

/* Warm Gold as a line, which is the use the brand file allows it. Not as text: gold on ivory is
   under 2:1 and a family would be reading it. */
.obc-mv .mv-ref-check .mv-kicker {
  padding-top: 22px;
  border-top: 3px solid var(--mv-highlight);
}

.obc-mv .mv-ref-list {
  margin: 0;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  border-left: 3px solid var(--mv-highlight);
  border-radius: 0 16px 16px 0;
  background: var(--mv-paper);
  list-style: none;
  color: var(--mv-ink);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
}

.obc-mv .mv-ref-list li {
  position: relative;
  margin: 0 0 16px;
  padding-left: 26px;
}

.obc-mv .mv-ref-list li:last-child {
  margin-bottom: 0;
}

/* sprint 33 — numbered where the list is an ordered one, at the editor's request. The four things
   that make a referral valid are items to check off one at a time, and a dash beside each says they
   are interchangeable.

   Scoped to ol on purpose: the same card is a plain list on three other pages, and turning the marker
   into a counter globally would number those too. The dash rule below still owns the ul. */
.obc-mv ol.mv-ref-list {
  counter-reset: mv-ref;
}

.obc-mv ol.mv-ref-list li {
  padding-left: 34px;
  counter-increment: mv-ref;
}

.obc-mv ol.mv-ref-list li::before {
  content: counter(mv-ref) ".";
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--mv-dark);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.obc-mv .mv-ref-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 12px;
  height: 2px;
  background: var(--mv-dark);
}

.obc-mv .mv-ref-note {
  margin: 20px 0 0;
  color: var(--mv-muted);
  font-size: 15px;
}

/* ---------- the forms ---------- */

.obc-mv .mv-ref-form-cards.wp-block-columns {
  gap: clamp(20px, 2.4vw, 28px);
  align-items: stretch;
}

.obc-mv .mv-ref-form-cards .wp-block-column {
  display: flex;
}

.obc-mv .mv-ref-form-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid rgba(31, 44, 49, 0.12);
  border-radius: 18px;
  background: var(--mv-cream);
}

.obc-mv .mv-ref-form-title {
  margin: 0 0 10px;
  color: var(--mv-deep);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.2;
}

.obc-mv .mv-ref-form-note {
  margin: 0 0 26px;
  color: var(--mv-muted);
  font-size: 15px;
  line-height: 1.55;
}

/* the file block ships its own layout; this only makes it look like the buttons beside it */
.obc-mv .mv-ref-file {
  margin-top: auto;
  font-size: 15px;
}

.obc-mv .mv-ref-file > a:first-child {
  display: block;
  margin-bottom: 12px;
  color: var(--mv-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.obc-mv .mv-ref-file .wp-block-file__button {
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--mv-dark);
  color: var(--mv-paper);
  font-size: 15px;
  font-weight: 600;
  opacity: 1;
}

.obc-mv .mv-ref-file .wp-block-file__button:hover,
.obc-mv .mv-ref-file .wp-block-file__button:focus-visible {
  background: var(--mv-deep);
  color: var(--mv-paper);
}

/* ---------- once it is with us ---------- */

.obc-mv .mv-ref-next .mv-lede {
  max-width: 16ch;
}

.obc-mv .mv-ref-next .mv-body {
  max-width: 58ch;
}

.obc-mv .mv-ref-next a {
  color: var(--mv-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.obc-mv .mv-ref-contact {
  margin: 26px 0 0;
  font-size: clamp(16px, 1.25vw, 18px);
}

/* ---------- the close ---------- */

.obc-mv .mv-ref-close {
  text-align: center;
}

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

.obc-mv .mv-ref-close .mv-body {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.obc-mv .mv-ref-close .wp-block-buttons {
  justify-content: center;
}

@media (max-width: 781px) {
  .obc-mv .mv-ref-cards.wp-block-columns,
  .obc-mv .mv-ref-form-cards.wp-block-columns {
    gap: 18px;
  }
}

/* ==========================================================================
   sprint 28 — the same page for the other reader: /referral-forms/, which is not
   for a family at all. It is for a midwife or a physician, and mostly for their admin, who has a
   form in one hand and wants to know where it goes. So the page is built around that job in the
   order it happens: send it here, put these four things on it, here is what comes back, here is
   what we are not, and only then the money and the policy.

   Two things it does that the family pages do not:

   - It prints. A referral desk works off a pinned sheet and a fax machine, so there is a print
     stylesheet: the site chrome, the poster and newsletter cards and the closing band all come off,
     the colour comes off the bands, and every link that matters prints its own address beside it, so
     the sheet on the wall is still usable a month later.
   - Nothing about fees or the cancellation policy is rewritten. That text is what a patient agrees
     to, so it is reproduced exactly as the source page has it, and it lives at the bottom under a
     heading that says whose it is.

   Colour, on the same rule as the rest: Deep Navy for the head, because a referral page is
   structure and authority; Clinical Teal on the send card, which is literally transfer; Warm Gold
   on what to have ready; Soft Sage on what comes back; Muted Berry on the scope limits, with the
   heading saying "what this referral isn't" so the colour is never the thing carrying it.
   ========================================================================== */

.obc-mv .mv-prov-head.mv-section {
  padding: clamp(48px, 7vw, 96px) 0;
}

.obc-mv .mv-prov-title {
  max-width: 18ch;
  margin: 0 0 20px;
  color: var(--mv-paper);
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.04;
}

.obc-mv .mv-prov-lede {
  max-width: 60ch;
  margin: 0;
  /* was rgba(255,255,255,0.82). Same call as the homepage's own lede: the 18% bought a softness
     nobody asked for and cost most of a contrast point on a paragraph with facts in it. */
  color: #fff;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
}

/* sprint 28 — the source page's own availability line, kept in the source's words at the owner's
   instruction while she checks with the clinic whether it is too much to promise. Warm Gold as the
   rule beside it rather than as the type, because this is a sentence somebody has to read. */
.obc-mv .mv-prov-flag {
  max-width: 46ch;
  margin: 28px 0 14px;
  padding-left: 16px;
  border-left: 3px solid var(--mv-highlight);
  color: var(--mv-paper);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.45;
}

.obc-mv .mv-prov-foot {
  max-width: 72ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.55;
}

/* when it follows the lede rather than the availability line it needs its own air */
.obc-mv .mv-prov-lede + .mv-prov-foot {
  margin-top: 22px;
}

.obc-mv .mv-prov-head a {
  color: var(--mv-highlight);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- send it here ---------- */

.obc-mv .mv-prov-send.mv-section {
  padding: clamp(40px, 5vw, 72px) 0;
}

.obc-mv .mv-ref-send {
  padding: clamp(28px, 3.4vw, 48px);
  border-left: 4px solid #4f8f8b;
  border-radius: 0 20px 20px 0;
  background: var(--mv-paper);
  box-shadow: 0 18px 44px rgba(24, 62, 73, 0.14);
}

.obc-mv .mv-ref-channels.wp-block-columns {
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: 8px;
}

.obc-mv .mv-ref-channel-label {
  margin: 0 0 4px;
  color: var(--mv-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.obc-mv .mv-ref-channel {
  margin: 0;
  font-size: clamp(19px, 2.1vw, 28px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.obc-mv .mv-ref-channel a {
  color: var(--mv-deep);
  text-decoration: none;
  border-bottom: 2px solid rgba(79, 143, 139, 0.5);
}

.obc-mv .mv-ref-channel a:hover,
.obc-mv .mv-ref-channel a:focus-visible {
  border-bottom-color: #4f8f8b;
}

.obc-mv .mv-ref-send .mv-ref-note {
  max-width: 64ch;
  margin: 18px 0 26px;
}

/* On a dark band the action button was Deep Green on Deep Green, which is not a button, and the quiet
   one carried Ink text on it. The solid one's turn-over is gone from here: it said gold on ink, which
   is what the family says everywhere now. The quiet one still turns, below. */

/* 5 September 2026 — a little louder, at Amanda's word: "we love these buttons that blend into their
   background, so they're more subtle. Make them a little bit more noticeable, but keep it tasteful."
   The rim goes from half to sixty per cent, and the inside stops being empty. A faint wash is what
   does most of the work: an outline with nothing in it is a shape the eye has to assemble, and a
   pill with a body is a thing. Neither number is loud enough to make this the button on the page,
   which is the whole point of it being the quiet one. */
.obc-mv .mv-dark .mv-ref-action.is-quiet .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.07);
  color: var(--mv-paper);
}

.obc-mv .mv-dark .mv-ref-action.is-quiet .wp-block-button__link:hover,
.obc-mv .mv-dark .mv-ref-action.is-quiet .wp-block-button__link:focus-visible {
  border-color: var(--mv-paper);
  background: rgba(255, 255, 255, 0.12);
  color: var(--mv-paper);
}

/* the second button on a pair, for the route that is not the one most people take */
/* 5 September 2026 — the same lift as the dark one above. The rim goes 0.28 to 0.38, which is
   1.59:1 to 1.93:1 against the sage it sits on and 1.74 to 2.17 against ivory, and a five per cent
   wash gives it a body. Still under the 3:1 a boundary wants, and deliberately: she asked for a
   little more, not for it to compete with the gold pill beside it. */
.obc-mv .mv-ref-action.is-quiet .wp-block-button__link {
  border: 1px solid rgba(31, 44, 49, 0.38);
  background: rgba(31, 44, 49, 0.05);
  color: var(--mv-ink);
}

.obc-mv .mv-ref-action.is-quiet .wp-block-button__link:hover,
.obc-mv .mv-ref-action.is-quiet .wp-block-button__link:focus-visible {
  border-color: var(--mv-dark);
  /* the wash deepens rather than clearing, or reaching for it would make the button emptier */
  background: rgba(31, 44, 49, 0.11);
  color: var(--mv-dark);
}

/* a list that is prose rather than a checklist: same marks, no card under them */
.obc-mv .mv-ref-list.is-plain {
  padding: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  max-width: 68ch;
}

/* sprint 36 — a plain (transparent) list sitting on a dark band must take the band's light text.
   Without this the co-pay line on the navy pays section read dark on dark. Site-wide, so it holds
   wherever a plain list lands on a dark section. */
.obc-mv .mv-dark .mv-ref-list.is-plain,
.obc-mv .mv-dark .mv-ref-list.is-plain li {
  color: var(--mv-paper);
}

.obc-mv .mv-prov-pays .mv-body {
  margin-top: 26px;
}

/* ---------- what comes back, and what we are not ---------- */

.obc-mv .mv-prov-back .mv-lede {
  max-width: 14ch;
}

.obc-mv .mv-prov-split.wp-block-columns {
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-start;
}

/* tight only when the heading is the whole column, which it is on the provider page and is not on
   the page that explains what the subsidized rate actually requires */
.obc-mv .mv-prov-scope .mv-lede:last-child {
  margin-bottom: 0;
}

.obc-mv .mv-prov-caution {
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  border-left: 4px solid #4f8f8b;
  border-radius: 0 16px 16px 0;
  background: var(--mv-cream);
}

.obc-mv .mv-prov-caution-line {
  margin: 0 0 16px;
  color: var(--mv-ink);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

.obc-mv .mv-prov-caution-line:last-child {
  margin-bottom: 0;
}

/* An ivory card on an ivory band is not a card, it is a hairline. Every tinted card in this file
   defaults to cream because it usually sits on white; on an ivory band they all turn over to paper,
   stated once here rather than remembered per page. */
.obc-mv .has-ivory-background-color .mv-ref-form-card,
.obc-mv .has-ivory-background-color .mv-prov-caution,
.obc-mv .has-ivory-background-color .mv-ah-course {
  background: var(--mv-paper);
}

/* ==========================================================================
   sprint 28 — /for-allied-health-pros/, which is a third reader again: a chiropractor, an
   osteopath, an RMT, a doula, somebody who cannot write an OHIP referral and whose client still
   needs to be seen. The source page never says that out loud, so the redesign leads with it and
   then gives the three things they can actually do.

   It reuses the provider page's furniture on purpose, including the print sheet, because these two
   pages are read by the same kind of person on the same kind of afternoon.
   ========================================================================== */

.obc-mv .mv-ref-card-line {
  margin: 0 0 14px;
  color: var(--mv-ink);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
}

.obc-mv .mv-ref-card-line:last-of-type {
  margin-bottom: 26px;
}

/* the light-ground twin of the head band's flag, for the page that carries it further down */
.obc-mv .mv-prov-flag.is-light {
  color: var(--mv-ink);
}

.obc-mv .mv-prov-foot.is-light {
  color: var(--mv-muted);
}

/* Clinical Teal, which the palette gives to skill-building, on the one section that is training */
.obc-mv .mv-ah-course {
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  border-left: 4px solid #4f8f8b;
  border-radius: 0 16px 16px 0;
  background: var(--mv-cream);
}

.obc-mv .mv-ah-course-line {
  margin: 0 0 16px;
  color: var(--mv-ink);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.62;
}

.obc-mv .mv-ah-course-line:last-of-type {
  margin-bottom: 26px;
}

.obc-mv .mv-ah-program .mv-lede {
  max-width: 15ch;
  margin-bottom: 0;
}

/* ==========================================================================
   sprint 28 — /prepare-for-your-consult/, read by somebody who has already booked and is now
   holding a baby and a phone.

   The source page mixes two different questions together: how do I get ready, and what will
   actually happen in the hour. The rebuild separates them, because they are answered at different
   times. Getting ready is done the night before and only differs if the visit is virtual or at
   home; what happens in the hour is read once, out of curiosity, and does not need a checklist.

   Warm Gold on the four things to do, which is the palette's readiness. Milk Teal on choosing your
   kind of visit. Clinical Teal on the hour itself, which is the clinical work. Muted Berry on the
   three subsidized-rate conditions, with the heading carrying the meaning.
   ========================================================================== */

/* sprint 28 — the same card as Emma's five, and here it is properly pressable: each one already
   led somewhere, so the whole card is the target rather than the small link at the bottom of it. */
.obc-mv .mv-prep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(26px, 3vw, 40px);
  counter-reset: obc-five;
}

@media (min-width: 900px) {
  .obc-mv .mv-prep-grid {
    grid-template-columns: 1fr 1fr;
  }

  .obc-mv .mv-prep-grid > .mv-prep-item:first-child {
    grid-column: 1 / -1;
  }
}

.obc-mv .mv-prep-item {
  position: relative;
  counter-increment: obc-five;
  max-width: none;
  padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 36px);
  border: 0;
  border-radius: 18px;
  background: var(--mv-paper);
  box-shadow: 0 12px 30px rgba(24, 62, 73, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.obc-mv .mv-prep-item::before {
  content: counter(obc-five);
  position: absolute;
  top: clamp(16px, 1.8vw, 22px);
  right: clamp(20px, 2.2vw, 28px);
  color: rgba(79, 143, 139, 0.34);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1;
}

.obc-mv .mv-prep-item:hover,
.obc-mv .mv-prep-item:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(24, 62, 73, 0.22);
}

.obc-mv .mv-prep-item:focus-within {
  outline: 2px solid var(--mv-deep);
  outline-offset: 3px;
}

.obc-mv .mv-prep-item-title {
  margin: 0 0 12px;
  padding-right: 2.4em;
  color: var(--mv-deep);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.18;
}

.obc-mv .mv-prep-item-text {
  margin: 0 0 14px;
  color: var(--mv-ink);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
}

.obc-mv .mv-prep-item-link {
  margin: 0;
  font-size: 15px;
}

.obc-mv .mv-prep-item-link a {
  color: #3f7a76;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(79, 143, 139, 0.4);
}

/* the whole card, not the six words at the bottom of it */
.obc-mv .mv-prep-item-link a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

.obc-mv .mv-prep-item-link a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.34em;
  transition: transform 0.2s ease;
}

.obc-mv .mv-prep-item:hover .mv-prep-item-link a,
.obc-mv .mv-prep-item:focus-within .mv-prep-item-link a {
  color: var(--mv-deep);
  border-bottom-color: var(--mv-deep);
}

.obc-mv .mv-prep-item:hover .mv-prep-item-link a::after {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .obc-mv .mv-prep-item,
  .obc-mv .mv-prep-item-link a::after {
    transition: none;
  }

  .obc-mv .mv-prep-item:hover,
  .obc-mv .mv-prep-item:focus-within {
    transform: none;
  }
}

/* the caution card carries a link on this page, which it does not on the provider one */
.obc-mv .mv-prov-caution-line a {
  color: var(--mv-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   sprint 28 — /contact-us/, which is Emma's page and is mostly a page about not needing to email
   her. The source has it right and buries it: her own "top 5 shares" are the five answers that
   would otherwise arrive in her inbox tomorrow morning. So the five come first, as five things you
   can act on now, and the way to reach a person sits under them rather than at the top.

   The source's "Send a note" form was GoDaddy's and does not survive the migration. Rather than
   leave a hole or ship a form whose delivery nobody has proved, the page opens a pre-addressed
   email with the subject already filled in, which works today, needs no infrastructure, and sorts
   her inbox for her. The real replacement form is story 13 and this is where it lands.
   ========================================================================== */

/* Cards rather than the hairline rows this started as. Five ruled rows read as a table of contents
   somebody scrolls past; five cards on the teal read as five things to press, which is what they
   are. The first spans the width because booking is the answer to most of what arrives in her
   inbox, and the other four sit two by two under it. */
.obc-mv .mv-contact-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(28px, 3.4vw, 44px);
  counter-reset: obc-five;
}

@media (min-width: 900px) {
  .obc-mv .mv-contact-rows {
    grid-template-columns: 1fr 1fr;
  }

  .obc-mv .mv-contact-row:first-child {
    grid-column: 1 / -1;
  }
}

/* sprint 28 — the owner liked this card enough to ask for it elsewhere, so the look is written once
   and the pages that use it say so. Emma's five are pressable; the profile's where-they-work cards
   are not, because all three of them would lead to the same place and a card that looks like a
   button should go somewhere of its own. */
.obc-mv .mv-contact-row,
.obc-mv .mv-who-card {
  position: relative;
  counter-increment: obc-five;
  padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 36px);
  border-radius: 18px;
  background: var(--mv-paper);
  box-shadow: 0 12px 30px rgba(24, 62, 73, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 10 September 2026 — the copy button beside an address. Quiet on purpose: a family reading this
   card wants the address, not a control, and the one person who presses it presses it often enough
   to find a small one. It is a pill because every other pressable thing on this site is. */
.obc-mv .mv-who-copy {
  /* 11 September 2026 — above the card's own click target, or the button is unreachable.
   *
   * Michael: "the copy buttons take him to the finder but doesn't give him the address on his
   * clipboard." The whole card books an appointment: .mv-who-go a carries an ::before at inset 0,
   * which covers the card because the card is position: relative. Every click on the button was
   * landing on that instead, so it navigated and copied nothing.
   *
   * Positioned with a z-index so it sits over the overlay. Two pixels of stacking rather than
   * pointer-events: none on the overlay, because the overlay is the feature: tapping the card is
   * how a family books, and the copy button is the one small hole in it. */
  position: relative;
  z-index: 2;
  margin-left: 8px;
  padding: 3px 11px;
  border: 1px solid rgba(31, 44, 49, 0.3);
  border-radius: 999px;
  background: rgba(31, 44, 49, 0.05);
  color: var(--mv-ink);
  font-family: inherit;
  font-size: 0.78em;
  line-height: 1.5;
  letter-spacing: 0.01em;
  cursor: pointer;
  vertical-align: baseline;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.obc-mv .mv-who-copy:hover,
.obc-mv .mv-who-copy:focus-visible {
  border-color: rgba(31, 44, 49, 0.5);
  background: rgba(31, 44, 49, 0.1);
}

/* her own numbering, from the source page, kept in CSS so reordering the blocks renumbers them */
.obc-mv .mv-contact-row::before,
.obc-mv .mv-who-card::before {
  content: counter(obc-five);
  position: absolute;
  top: clamp(16px, 1.8vw, 22px);
  right: clamp(20px, 2.2vw, 28px);
  color: rgba(79, 143, 139, 0.34);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1;
}

.obc-mv .mv-contact-row-title {
  margin: 0 0 8px;
  padding-right: 2.5em;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.2;
}

.obc-mv .mv-contact-row-title a {
  color: var(--mv-deep);
  text-decoration: none;
}

/* the whole card is the target, not the four words at the top of it. The overlay is on the link so
   the card needs no markup of its own and stays five plain blocks in the editor. */
.obc-mv .mv-contact-row-title a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

.obc-mv .mv-contact-row-title a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.34em;
  font-family: var(--mv-display);
  transition: transform 0.2s ease;
}

.obc-mv .mv-contact-row:hover,
.obc-mv .mv-contact-row:focus-within,
.obc-mv .mv-who-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(24, 62, 73, 0.22);
}

.obc-mv .mv-contact-row:hover .mv-contact-row-title a::after,
.obc-mv .mv-contact-row:focus-within .mv-contact-row-title a::after {
  transform: translateX(5px);
}

.obc-mv .mv-contact-row:focus-within {
  outline: 2px solid var(--mv-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .obc-mv .mv-contact-row,
  .obc-mv .mv-who-card,
  .obc-mv .mv-contact-row-title a::after {
    transition: none;
  }

  .obc-mv .mv-contact-row:hover,
  .obc-mv .mv-contact-row:focus-within,
  .obc-mv .mv-who-card:hover {
    transform: none;
  }
}

.obc-mv .mv-contact-row-note {
  max-width: 62ch;
  margin: 0;
  color: var(--mv-ink);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

/* the wide card would otherwise hold a narrow column of text and a lot of nothing beside it */
@media (min-width: 900px) {
  .obc-mv .mv-contact-row:first-child .mv-contact-row-note {
    max-width: 82ch;
  }
}

.obc-mv .mv-contact-start {
  margin: 26px 0 14px;
  color: var(--mv-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ==========================================================================
   sprint 28 — /faq/, built on core's own details block rather than an accordion script.

   Three reasons that matters here. It works with JavaScript off, which a page of answers should.
   It is one block per question in the editor, so adding the tenth question is adding a block and
   typing, with no list to keep in step. And the browser handles the open and closed state, the
   keyboard, and find-on-page, which no script we write is going to do better.
   ========================================================================== */

.obc-mv .mv-faq-group .mv-inner {
  max-width: 940px;
}

.obc-mv .mv-faq-group.mv-section {
  padding: clamp(48px, 6vw, 88px) 0;
}

.obc-mv .mv-faq-group .mv-lede {
  max-width: 22ch;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

.obc-mv .mv-faq-item.wp-block-details {
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid rgba(31, 44, 49, 0.14);
  border-radius: 16px;
  background: var(--mv-paper);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.obc-mv .mv-faq-item.wp-block-details[open] {
  border-color: rgba(79, 143, 139, 0.5);
  box-shadow: 0 14px 34px rgba(24, 62, 73, 0.12);
}

/* sprint 36 — the release question is the one FAQ item that leads to a booking, so its card is
   Clinical Teal (#4F8F8B, BRAND.md) to draw the click. Closed, the card is just its summary bar, so
   the teal lives on the summary; the body stays Ivory so the opened answer reads. overflow clips the
   teal bar to the card's rounded edge. Centred in the answer with auto side margins. */
.obc-mv .mv-faq-item.is-optin.wp-block-details {
  background: var(--wp--preset--color--ivory, #F6EFE6);
  margin-inline: auto;
  overflow: hidden;
}

.obc-mv .mv-faq-item.is-optin > summary {
  background: #4F8F8B;
  color: var(--mv-paper);
}

.obc-mv .mv-faq-item.is-optin > summary::after {
  border-color: var(--mv-paper);
}

.obc-mv .mv-faq-item > summary {
  position: relative;
  padding: clamp(18px, 2vw, 24px) clamp(52px, 5vw, 64px) clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
  color: var(--mv-deep);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

/* Safari draws its own triangle unless this is said, and it is drawn below rather than removed */
.obc-mv .mv-faq-item > summary::-webkit-details-marker {
  display: none;
}

.obc-mv .mv-faq-item > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(22px, 2.4vw, 30px);
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-right: 2px solid #4f8f8b;
  border-bottom: 2px solid #4f8f8b;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform 0.2s ease;
}

.obc-mv .mv-faq-item[open] > summary::after {
  transform: rotate(-135deg);
}

.obc-mv .mv-faq-item > summary:focus-visible {
  outline: 2px solid var(--mv-deep);
  outline-offset: -2px;
  border-radius: 16px;
}

.obc-mv .mv-faq-item > :not(summary) {
  max-width: 68ch;
  margin: 0 clamp(20px, 2.2vw, 28px) 16px;
  color: var(--mv-ink);
  /* sprint 37 — the answer read small next to the question, italics especially. */
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.66;
}

.obc-mv .mv-faq-item > :not(summary):first-of-type {
  margin-top: 4px;
}

.obc-mv .mv-faq-item > :not(summary):last-child {
  margin-bottom: clamp(20px, 2.2vw, 28px);
}

.obc-mv .mv-faq-item a {
  color: var(--mv-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.obc-mv .mv-faq-policy-name {
  color: var(--mv-muted) !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .obc-mv .mv-faq-item.wp-block-details,
  .obc-mv .mv-faq-item > summary::after {
    transition: none;
  }
}

/* every answer opens on paper, because a printed accordion is a page of questions with the answers
   missing. display: block cannot do this: a closed details element skips its contents whatever the
   children are told, so the state has to be reached through ::details-content. Browsers without it
   print the questions alone, which is what they did before and is no worse for having tried. */
@media print {
  .obc-mv.mv-prov .mv-faq-item::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }

  .obc-mv.mv-prov .mv-faq-item > summary::after {
    display: none;
  }
}

/* ==========================================================================
   sprint 28 — /our-mission/. A mission page is usually a wall of abstract nouns, and this one is
   saved by having a specific mission underneath the abstractions: care where there is none, for
   families kept out by money or distance. So the specific thing is the headline and the abstract
   words come after it.

   The vision gets a statement of its own, with its own class rather than the homepage's .mv-quote,
   because that one is driven by milk.js: it is hidden until the script surfaces it, and the single
   most important line on this page is not going to depend on a script running.
   ========================================================================== */

.obc-mv .mv-mission-vision .mv-inner {
  max-width: 940px;
  text-align: center;
}

.obc-mv .mv-mission-quote {
  max-width: 20ch;
  margin: 0 auto 20px;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.08;
}

.obc-mv .mv-mission-quote-note {
  margin: 0;
  color: var(--mv-muted);
  font-size: clamp(15px, 1.2vw, 17px);
}

.obc-mv .mv-mission-grid.wp-block-columns {
  gap: clamp(16px, 2vw, 26px);
  margin-bottom: clamp(16px, 2vw, 26px);
  align-items: stretch;
}

.obc-mv .mv-mission-grid .wp-block-column {
  display: flex;
}

/* the hairline is what keeps this a card on a white section as well as on an ivory one. Without it
   a white card on white is just indented text. */
.obc-mv .mv-mission-card {
  width: 100%;
  padding: clamp(24px, 2.8vw, 36px);
  border: 1px solid rgba(31, 44, 49, 0.12);
  border-radius: 18px;
  background: var(--mv-paper);
}

.obc-mv .mv-mission-card-title {
  margin: 0 0 10px;
  color: var(--mv-deep);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.2;
}

.obc-mv .mv-mission-card-text {
  margin: 0;
  color: var(--mv-ink);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.62;
}

.obc-mv .mv-mission-money .mv-body {
  max-width: 60ch;
}

.obc-mv .mv-mission-call .mv-body {
  max-width: 62ch;
}

/* ==========================================================================
   sprint 28 — /locations/, generated by src/build-locations-page.js from the Finder's own area
   list. Three sections in the order somebody cares about them: where there is a room, where we
   travel to you, and everywhere else, which is all of it, virtually.
   ========================================================================== */

.obc-mv .mv-loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(26px, 3vw, 38px);
}

.obc-mv .mv-loc-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(31, 44, 49, 0.13);
  border-radius: 18px;
  background: var(--mv-paper);
}

.obc-mv .mv-loc-name {
  margin: 0 0 6px;
  color: var(--mv-deep);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
}

.obc-mv .mv-loc-covers {
  margin: 0 0 16px;
  color: var(--mv-ink);
  font-size: 15px;
  line-height: 1.5;
}

/* the address is the answer on this page, so it is the one thing set apart from the prose */
.obc-mv .mv-loc-office {
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 3px solid #4f8f8b;
  color: var(--mv-ink);
  font-size: 15px;
  line-height: 1.5;
}

.obc-mv .mv-loc-offers {
  margin: 4px 0 12px;
  color: var(--mv-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.obc-mv .mv-loc-who,
.obc-mv .mv-loc-note {
  margin: 0 0 10px;
  color: var(--mv-muted);
  font-size: 14px;
  line-height: 1.55;
}

.obc-mv .mv-loc-actions.wp-block-buttons {
  margin-top: auto;
  padding-top: 8px;
}

.obc-mv .mv-loc-card .mv-ref-action .wp-block-button__link {
  padding: 11px 20px;
  font-size: 14px;
}

.obc-mv .mv-loc-home,
.obc-mv .mv-loc-virtual {
  background: var(--mv-cream);
}

.obc-mv .mv-loc-offices .mv-body,
.obc-mv .mv-loc-home .mv-body,
.obc-mv .mv-loc-virtual .mv-body {
  max-width: 66ch;
}

/* ==========================================================================
   sprint 28 — /meet-the-team/, generated by src/build-team-page.js from the accepted roster.
   ========================================================================== */

/* sprint 28 — the consultant card is the carousel's, unchanged, laid out in a grid instead of a
   scrolling row. The owner asked for exactly that: it already looks the way a consultant should look,
   and a second version of it would drift apart the first time either one changed. Everything about
   the card itself lives in redesign.css beside the carousel.

   Booking is not on the card. It belongs on the consultant's own page, where the appointment types
   and the addresses are. */
.obc-mv .mv-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(26px, 3vw, 40px);
}

/* the carousel sizes each card to the width of the scrolling row and snaps it; in a grid the track
   decides the width and there is nothing to snap to */
.obc-mv .mv-team-grid .mv-lc-card {
  position: relative;
  flex: initial;
  min-height: clamp(330px, 33vw, 410px);
  scroll-snap-align: none;
  /* three layers held at zero so the glow interpolates rather than appearing. The shadow takes
     longer than the lift on purpose: the card moves, and then it warms. */
  box-shadow: 0 0 0 0 rgba(24, 62, 73, 0), 0 0 0 0 rgba(215, 180, 122, 0),
              0 0 0 0 rgba(215, 180, 122, 0);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.28, 1),
              box-shadow 0.75s cubic-bezier(0.33, 0.62, 0.29, 1);
}

/* sprint 30 — on a phone the grid falls to one column, the card fills the width, and a min-height of
   330px makes it landscape. The photographs are all portrait, so the card showed the top of each one
   and the name pane landed across everybody's mouth: Kristi's lower lip, Hillary's chin. It reads as
   a cropping accident on nineteen faces at once, on the screen most families are actually holding.

   4 by 5 rather than a taller box on purpose. It is the shape almost every one of these photographs
   already is, so at one column the card and the picture agree and there is no crop left to get
   wrong. It is also the shape the desktop card and the profile hero use, which is why a portrait
   framed for one of them now works in all three. */
@media (max-width: 600px) {
  .obc-mv .mv-team-grid .mv-lc-card {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
}

/* the whole card is the target, so the hover is telling the truth about what is clickable. The
   overlay sits on the link rather than the card, which keeps the markup sixteen plain blocks.
   Only in the grid: the carousel's cards live in a row people drag, and a full-card link fights it. */
.obc-mv .mv-team-grid .mv-lc-link .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 4px;
}

.obc-mv .mv-team-grid .mv-lc-photo img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.28, 1);
  transform-origin: center top;
}

.obc-mv .mv-team-grid .mv-lc-body {
  transition: background-color 0.45s ease, border-color 0.45s ease;
}

/* slow and small on the way in. A face is not a thing to make jump. */
/* a rim, a close warmth and a wide one. The wide layer is what reads as a glow; the other two keep
   it from looking like a sticker with a light behind it. Well under half opacity throughout: on a
   page of sixteen faces this happens once, under the pointer, and should be felt more than seen. */
.obc-mv .mv-team-grid .mv-lc-card:hover,
.obc-mv .mv-team-grid .mv-lc-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(215, 180, 122, 0.5),
              0 14px 26px rgba(24, 62, 73, 0.2),
              0 6px 40px rgba(215, 180, 122, 0.45);
}

.obc-mv .mv-team-grid .mv-lc-card:hover .mv-lc-photo img,
.obc-mv .mv-team-grid .mv-lc-card:focus-within .mv-lc-photo img {
  transform: scale(1.045);
}

/* the pane turns gold. It is the warmest thing the palette has and it is what the accents on the
   dark grounds are already made of, so the card lights up rather than just getting darker.

   Everything on the pane turns with it. White on Warm Gold is about 2 to 1 and unreadable; Ink on
   it is 7.2, so the words go dark the moment the ground goes light. */
.obc-mv .mv-team-grid .mv-lc-card:hover .mv-lc-body,
.obc-mv .mv-team-grid .mv-lc-card:focus-within .mv-lc-body {
  border-top-color: rgba(31, 44, 49, 0.22);
  background: rgba(215, 180, 122, 0.93);
}

.obc-mv .mv-team-grid .mv-lc-name,
.obc-mv .mv-team-grid .mv-lc-creds,
.obc-mv .mv-team-grid .mv-lc-note,
.obc-mv .mv-team-grid .mv-lc-link .wp-block-button__link {
  transition: color 0.45s ease, border-color 0.45s ease;
}

.obc-mv .mv-team-grid .mv-lc-card:hover .mv-lc-name,
.obc-mv .mv-team-grid .mv-lc-card:focus-within .mv-lc-name,
.obc-mv .mv-team-grid .mv-lc-card:hover .mv-lc-note,
.obc-mv .mv-team-grid .mv-lc-card:focus-within .mv-lc-note {
  color: var(--mv-ink);
}

.obc-mv .mv-team-grid .mv-lc-card:hover .mv-lc-creds,
.obc-mv .mv-team-grid .mv-lc-card:focus-within .mv-lc-creds {
  color: rgba(31, 44, 49, 0.76);
}

.obc-mv .mv-team-grid .mv-lc-card:hover .mv-lc-link .wp-block-button__link,
.obc-mv .mv-team-grid .mv-lc-card:focus-within .mv-lc-link .wp-block-button__link {
  border-bottom-color: var(--mv-ink);
  color: var(--mv-ink);
}

/* deep green, because a gold ring around a gold pane is not a ring */
.obc-mv .mv-team-grid .mv-lc-card:focus-within {
  outline: 2px solid var(--mv-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .obc-mv .mv-team-grid .mv-lc-card,
  .obc-mv .mv-team-grid .mv-lc-photo img,
  .obc-mv .mv-team-grid .mv-lc-body {
    transition: none;
  }

  .obc-mv .mv-team-grid .mv-lc-card:hover,
  .obc-mv .mv-team-grid .mv-lc-card:focus-within {
    transform: none;
  }

  .obc-mv .mv-team-grid .mv-lc-card:hover .mv-lc-photo img,
  .obc-mv .mv-team-grid .mv-lc-card:focus-within .mv-lc-photo img {
    transform: none;
  }
}

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

/* sprint 28 — the mission, on white, where the org chart used to be. It sits on the page's own left
   edge like every other section rather than in a centred column of its own, so the kicker lines up
   with the one under it. */

.obc-mv .mv-team-mission-lede {
  max-width: 18ch;
  margin: 0 0 20px;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.obc-mv .mv-team-mission-body {
  max-width: 60ch;
  margin: 0;
  color: var(--mv-ink);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.66;
}

.obc-mv .mv-team-study {
  margin-top: clamp(30px, 4vw, 48px);
  padding-left: clamp(18px, 2.2vw, 28px);
  border-left: 3px solid var(--mv-highlight);
}

.obc-mv .mv-team-quote {
  max-width: 30ch;
  margin: 0 0 14px;
  color: var(--mv-deep);
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 300;
  line-height: 1.32;
}

.obc-mv .mv-team-source {
  max-width: 62ch;
  margin: 0;
  color: var(--mv-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* the four who are not booked directly sit after the twelve who are, and read as a footnote to them */
.obc-mv .mv-team-featured {
  background: var(--mv-paper);
}

.obc-mv .mv-team-featured .mv-team-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* sprint 28 — one consultant card on the MotherBaby page, so the six appointments have a face
   attached to them. It is the carousel's card again, in a grid of one, capped so it stays a card
   rather than stretching to the column. */
.obc-mv .mv-face-split.wp-block-columns {
  gap: clamp(26px, 3.4vw, 52px);
  align-items: center;
}

.obc-mv .mv-face-cell.wp-block-column {
  flex-basis: 300px !important;
  flex-grow: 0;
}

.obc-mv .mv-face-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.obc-mv .mv-face .mv-lede {
  max-width: 18ch;
}

.obc-mv .mv-face .mv-body {
  max-width: 58ch;
}

@media (max-width: 781px) {
  .obc-mv .mv-face-cell.wp-block-column {
    flex-basis: 100% !important;
  }

  /* 8 September 2026 — one column, said with enough specificity to survive the two-column rule that
     Meet the Team adds to .mv-team-grid further down this file. This grid holds one consultant and
     carries both classes, so on a phone it was being split in two: a 300px cap divided into two
     144px tracks, one of them empty. The card came out half the width it was drawn for, and the
     name panel is a fixed height, so it covered everything below Ashley's and Kristi's nose.

     Beth called it a stained glass window over the picture, which is what a 64%-tall panel on a
     144px card looks like. A face is the reason the card is there. */
  .obc-mv .mv-face-grid.mv-team-grid {
    max-width: 300px;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- the policy, reproduced rather than rewritten ---------- */

.obc-mv .mv-prov-fine.mv-section {
  padding: clamp(48px, 6vw, 88px) 0;
}

.obc-mv .mv-prov-fine .mv-inner {
  max-width: 860px;
}

.obc-mv .mv-prov-fine-title {
  margin: 0 0 16px;
  color: var(--mv-deep);
  font-size: clamp(19px, 1.7vw, 23px);
}

.obc-mv .mv-prov-fine-text {
  margin: 0 0 14px;
  color: var(--mv-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* ---------- the closing band ---------- */

.obc-mv .mv-prov-contact.mv-section {
  padding: clamp(48px, 6vw, 88px) 0;
}

.obc-mv .mv-prov-contact .mv-lede {
  max-width: 22ch;
}

.obc-mv .mv-prov-contact a {
  color: var(--mv-highlight);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 30 August 2026 — Amanda: this blurb is hard to read. It was, three ways at once.
 *
 * The section was Clinical Teal while everything laid on it had been tuned for the Deep Green
 * bands: white headings, gold links, and this line at 60% white. Against Deep Green those are
 * 9.1:1, 4.6:1 and 4.4:1. Against Clinical Teal they were 3.7:1, **1.9:1** and 2.4:1 — the phone
 * number and the email address were the least readable things in a block whose only job is to give
 * somebody the phone number and the email address.
 *
 * The section moved to the band colour, which fixes the headings and the links by itself. This line
 * goes to 72% because 60 lands at 4.4:1 even there, and 14px needs 4.5. */
.obc-mv .mv-prov-sign {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

/* ---------- print: the sheet that ends up beside the fax machine ---------- */

@media print {
  /* only this page, so printing anything else is unaffected */
  body:has(.mv-prov) header.wp-block-template-part,
  body:has(.mv-prov) footer.wp-block-template-part,
  .mv-prov .mv-prov-extras,
  .mv-prov .mv-prov-contact {
    display: none !important;
  }

  .obc-mv.mv-prov {
    font-size: 10.5pt;
    background: #fff;
    color: #000;
  }

  .obc-mv.mv-prov .mv-section {
    padding: 10pt 0 !important;
    background: #fff !important;
    break-inside: avoid;
  }

  .obc-mv.mv-prov .mv-inner {
    max-width: none;
    padding: 0;
  }

  .obc-mv.mv-prov :where(h1, h2, h3) {
    color: #000;
    break-after: avoid;
  }

  .obc-mv.mv-prov .mv-prov-title {
    font-size: 20pt;
  }

  .obc-mv.mv-prov .mv-lede {
    font-size: 14pt;
    max-width: none;
  }

  .obc-mv.mv-prov .mv-prov-lede,
  .obc-mv.mv-prov .mv-prov-flag,
  .obc-mv.mv-prov .mv-prov-foot,
  .obc-mv.mv-prov .mv-body,
  .obc-mv.mv-prov .mv-kicker,
  .obc-mv.mv-prov .mv-ref-note,
  .obc-mv.mv-prov .mv-prov-fine-text {
    color: #000;
  }

  .obc-mv.mv-prov .mv-ref-send,
  .obc-mv.mv-prov .mv-ref-list:not(.is-plain),
  .obc-mv.mv-prov .mv-prov-caution,
  .obc-mv.mv-prov .mv-ah-course,
  .obc-mv.mv-prov .mv-ref-card,
  .obc-mv.mv-prov .mv-ref-form-card {
    border: 0.5pt solid #666;
    border-left-width: 2pt;
    border-radius: 0;
    background: #fff !important;
    box-shadow: none;
  }

  .obc-mv.mv-prov .mv-ref-list {
    margin-bottom: 10pt;
  }

  .obc-mv.mv-prov .mv-ref-channel a {
    border: 0;
    color: #000;
  }

  /* the preset colour classes carry !important of their own, so print has to say it too or a gold
     kicker and a sage heading go to paper at the contrast they have on screen, which is none */
  .obc-mv.mv-prov .mv-kicker,
  .obc-mv.mv-prov :where(h1, h2, h3) {
    color: #000 !important;
  }

  /* a printed button is a dead end, so it prints as the address it would have gone to */
  .obc-mv.mv-prov .wp-block-button__link,
  .obc-mv.mv-prov .wp-block-file__button {
    padding: 0;
    border: 0 !important;
    background: none !important;
    color: #000 !important;
    font-weight: 600;
    text-decoration: underline;
  }

  /* two buttons stripped of their padding run into one another and print as one word */
  .obc-mv.mv-prov .wp-block-buttons {
    gap: 0;
  }

  .obc-mv.mv-prov .wp-block-buttons > .wp-block-button {
    margin-right: 18pt;
  }

  /* every address that leaves the page, not just the ones in the cards it was first written for */
  .obc-mv.mv-prov a[href^="http"]::after {
    content: " " attr(href);
    font-size: 8.5pt;
    font-weight: 400;
    word-break: break-all;
  }

  /* an internal link prints as a path, which is no use to somebody holding the paper, so it prints
     the address they would actually type. The domain is the one this site is being built to become. */
  .obc-mv.mv-prov a[href^="/"]:not([href$=".pdf"])::after {
    content: " ontariobreastfeedingclinic.ca" attr(href);
    font-size: 8.5pt;
    font-weight: 400;
    word-break: break-all;
  }

  /* side by side is a screen idea. On paper a column that ends early leaves half a page blank. */
  .obc-mv.mv-prov .mv-ref-form-cards.wp-block-columns,
  .obc-mv.mv-prov .mv-ref-cards.wp-block-columns,
  .obc-mv.mv-prov .mv-prov-split.wp-block-columns {
    display: block;
  }

  .obc-mv.mv-prov .mv-ref-form-card,
  .obc-mv.mv-prov .mv-ref-card,
  .obc-mv.mv-prov .mv-ah-course {
    margin-bottom: 8pt;
  }
}

/* ---------- sprint 29: a signup form on an ordinary page ---------- */

/* Journal club registration. It replaces a mailto, so it has to look like part of the page rather
   than like a plugin dropped into it: same card vocabulary as the referral cards above, one column,
   and quiet enough that it does not outshout the reason somebody came to the page. */
/* sprint 29 — the card states its own text colour, because it is now used on a dark band.
   On the promo page this sits inside mv-dark, which paints its descendants white, and a white card
   inheriting white text hid the offer and the three benefit lines completely: they were in the DOM
   and legible to a screen reader while being invisible to everybody else. Every element that happened
   to carry an explicit colour survived, which is what made it look like a partial render rather than
   a contrast bug. The same mistake as the ivory card on the ivory band in sprint 28. */
/* 5 September 2026 — a form belongs to the band it is on, at Amanda's word: "go check every form and
 * apply this beautification to it so they all feel like premium experiences."
 *
 * Every one of the five had the same fault in a different direction, and measuring them was what
 * showed it. The card was #fff wherever it stood. On Contact Us and Journal Club the section is also
 * white, so a white card on white with white fields inside it was three whites and no form. On the
 * FAQ the section is Ivory, which put the card 1.03:1 from its own ground. On the promo page the
 * section is Deep Green, so it was a bright white slab, which is the same fault the folded contact
 * form had and the one she called out by name.
 *
 * So the panel takes a rim and a wash from its own ground instead of a colour of its own, which is
 * the drawer language from the fold. The fields keep their white, and that is the point: on any of
 * the five grounds they are now the lightest thing in the panel, so the eye lands on the places you
 * type rather than on the box around them. */
.obc-mv .su-box {
  color: var(--mv-ink);
  max-width: 34rem;
  margin: 24px 0 0;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(31, 44, 49, 0.2);
  border-radius: 18px;
  background: rgba(31, 44, 49, 0.04);
}

/* on a dark band the panel is drawn in the band's own paper rather than in its ink.
 *
 * `.mv-dark` and nothing else. Milk Teal bands were in this list for ten minutes and should not have
 * been: the panel over #75AAB0 computes to #7FB0B6, where Ivory is 2.09:1 and Ink is 6.01:1. It is a
 * mid-tone carrying Ink text everywhere else on its page, so it takes the light treatment above.
 * "Not white" is not the same question as "dark". */
.obc-mv .mv-dark .su-box {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
  color: var(--mv-paper);
}

.obc-mv .mv-dark .su-box .su-title,
.obc-mv .mv-dark .su-box .su-agree {
  color: var(--mv-paper);
}

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

/* 5 September 2026 — and the state after the message has gone, at Amanda's word: "make sure the text
   colour in the sent state is readable on the background used."
   It is the same card with different words in it — "That is with Emma", the line under it, and the
   button offering another — so every one of those has to answer to the ground as well. The Send
   another message button was an Ink label inside a rim of Deep Navy at 24 per cent, which on a dark
   band is dark on dark twice over. */
.obc-mv .mv-dark .su-box .su-win-title {
  color: var(--mv-paper);
}

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

.obc-mv .mv-dark .su-again:hover,
.obc-mv .mv-dark .su-again:focus-visible {
  border-color: var(--mv-paper);
  background: rgba(255, 255, 255, 0.14);
  color: var(--mv-paper);
}

/* the failure line too. #8a3324 is a dark red chosen for a white card and is 1.5:1 on Deep Green,
   which is a message about something having gone wrong that cannot be read. */
.obc-mv .mv-dark .su-oops {
  color: #f0b4a6;
}

.obc-mv .su-title {
  margin: 0 0 8px;
  color: var(--mv-deep);
  font-size: 20px;
  font-weight: 500;
}

.obc-mv .su-blurb,
.obc-mv .su-note {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.55;
}

.obc-mv .su-note {
  margin: 14px 0 0;
  color: rgba(31, 44, 49, 0.72);
  font-size: 14px;
}

.obc-mv .su-form { display: block; }
.obc-mv .su-ask { margin: 0 0 12px; }

.obc-mv .su-field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(31, 44, 49, 0.24);
  border-radius: 6px;
  background: #fff;
  color: var(--mv-ink);
  font: inherit;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
}

.obc-mv .su-field:focus-visible {
  outline: 2px solid var(--mv-deep);
  outline-offset: 1px;
}

/* the honeypot: off-screen rather than display:none, which some fillers skip */
.obc-mv .su-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.obc-mv .su-agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 16px;
  font-size: 14.5px;
  line-height: 1.45;
}

.obc-mv .su-agree input { margin-top: 3px; }

.obc-mv .su-go {
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--mv-deep);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.obc-mv .su-go:hover { background: #12313a; }
/* 17 September 2026 — the press was gold first, and Amanda read it on the ivory card: "it's too light gold
   on greyed out ivory, should it turn a daker colour like clinical teal when you hover/click?" It does.
   Clinical teal (#4F8F8B, BRAND.md) with the words in white, held through the send, so the button says the
   press landed before the wording changes to "Sending…". */
.obc-mv .su-go:active,
.obc-mv .su-go:disabled {
  background: #4f8f8b;
  color: #fff;
  opacity: 1;
  cursor: default;
}
.obc-mv .su-go:focus-visible { outline: 3px solid var(--mv-gold); outline-offset: 2px; }

/* sprint 36 — the tongue-tie FAQ section runs on milk teal (#75aab0), at Amanda's request. The band
   is milk teal, the FAQ cards float on it in ivory, and the signup button inside the release card
   takes the teal back up. Text on the band is navy so it reads. Scoped to #tongue-tie so no other FAQ
   section is touched. */
.obc-mv #tongue-tie .mv-kicker,
.obc-mv #tongue-tie .mv-lede,
.obc-mv #tongue-tie .mv-prov-lede { color: var(--mv-deep); }

.obc-mv #tongue-tie .mv-faq-item.wp-block-details { background: var(--wp--preset--color--ivory, #F6EFE6); }

/* the release card is a clinical-teal bar elsewhere; on this band it reads as an ivory card like its
   siblings, so the section is one colour with cards on it. */
/* 19 September 2026 — off the teal, at Amanda's word: "the 'How do I book a tongue tie release
   here?' button should be white not teal." Transparent was the bug behind that: sprint 36 took the
   teal off this bar because the band it sits on is Milk Teal, and transparent let the band show
   through, so the one card that leads to a booking was the one card with no card under its title.
   20 September 2026 — ivory rather than white, again at her word: "should be on ivory too." It now
   matches the two cards above it exactly, which is the point — three cards of one colour on one
   band, and the booking it leads to is what makes it different, not its bar. */
.obc-mv #tongue-tie .mv-faq-item.is-optin > summary { background: var(--wp--preset--color--ivory, #F6EFE6); color: var(--mv-deep); }
.obc-mv #tongue-tie .mv-faq-item.is-optin > summary::after { border-color: #4f8f8b; }

.obc-mv #tongue-tie .su-go { background: #75aab0; color: var(--mv-deep); }
/* the release button starts on milk teal, and both answers below it are clinical teal: dark enough to read
   as pressed against the ivory card the button sits on. */
.obc-mv #tongue-tie .su-go:hover { background: #4f8f8b; color: #fff; }
.obc-mv #tongue-tie .su-go:active,
.obc-mv #tongue-tie .su-go:disabled { background: #4f8f8b; color: #fff; }

/* sprint 36 — the money FAQ section on Soft Sage (#A7B9A2, BRAND.md), cards in ivory on it, at
   Amanda's request. Band text is navy for contrast (BRAND pairs sage with a dark colour). Scoped to
   #money so no other FAQ section is touched. */
.obc-mv #money .mv-kicker,
.obc-mv #money .mv-lede,
.obc-mv #money .mv-prov-lede { color: var(--mv-deep); }

.obc-mv #money .mv-faq-item.wp-block-details { background: var(--wp--preset--color--ivory, #F6EFE6); }

/* sprint 36 — the two coloured FAQ bands live in CSS rather than in the page's block markup, so an
   editor save (which republishes everything the page was loaded with) can never revert them. The
   ivory cards and, for tongue-tie, the teal signup button are already handled above. */
.obc-mv #money.mv-faq-group { background: #A7B9A2; }
.obc-mv #tongue-tie.mv-faq-group { background: #75aab0; }

.obc-mv .su-oops {
  margin: 12px 0 0;
  color: #8a3324;
  font-size: 14.5px;
}

/* sprint 29 — both card titles turn on a single word, sooner or later, and the owner asked for that
   word to carry. The serif italic on its own was too quiet at this size against the same colour.
   Clinical Teal is the accent these cards already use, on the step numbers directly underneath, so
   the word joins something rather than introducing a colour.
   The 1.1em is doing contrast work, not decoration. #4f8f8b reads 3.73:1 on the white card, which
   clears the 3:1 WCAG asks of large text and falls short of the 4.5:1 it would need below 24px. The
   title is clamp(22px, 2.2vw, 28px), so at the small end the word would have been 22px and under the
   line. At 1.1em it is 24.2px at its smallest and stays large text at every width. */
.obc-mv .mv-ref-card-title em {
  color: #4f8f8b;
  font-size: 1.1em;
}

/* ---------- sprint 29: the promo landing page ---------- */

/* Reached from the Flodesk email that carries somebody's code, three days after their first consult.
   It borrows the profile head's proportions rather than inventing its own: one offer, one button,
   and the owner's joke kept at the size a joke should be. */
.obc-mv .mv-promo-title {
  margin: 0 0 14px;
  color: var(--mv-paper);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.obc-mv .mv-promo-lede {
  max-width: 46ch;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
}

/* the asterisk is the punchline, so it sits where a footnote sits rather than competing with the offer */
.obc-mv .mv-promo-joke {
  max-width: 54ch;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.5;
}

.obc-mv .mv-promo-code .obc-signup { margin-top: 8px; }

.obc-mv .mv-promo-close {
  background: var(--mv-dark);
}

/* ---------- sprint 29: the promo win state ---------- */

.obc-mv .su-box.is-won {
  position: relative;
  overflow: hidden;
  border-color: var(--mv-highlight);
}

.obc-mv .su-win-title {
  margin: 0 0 10px;
  color: var(--mv-deep);
  font-family: var(--mv-accent);
  font-size: clamp(30px, 3.6vw, 44px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
}

.obc-mv .su-win-offer {
  margin: 0 0 6px;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.45;
}

.obc-mv .su-win-offer strong { font-weight: 600; }

/* the clock only appears when the email passed a date, so it never counts down to a guess */
.obc-mv .su-win-clock {
  margin: 0 0 18px;
  color: #4f8f8b;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.obc-mv .su-win-list {
  margin: 0 0 22px;
  padding: 0 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
}

.obc-mv .su-win-list li { margin: 0 0 8px; }
.obc-mv .su-win-list li::marker { color: var(--mv-highlight); }

.obc-mv .su-win-go {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  background: #e9c471;
  color: var(--mv-ink);
  font-weight: 600;
  text-decoration: none;
}

.obc-mv .su-win-go:hover,
.obc-mv .su-win-go:focus-visible { background: #f2d79a; color: var(--mv-ink); }

.obc-mv .su-win-note {
  margin: 16px 0 0;
  color: rgba(31, 44, 49, 0.72);
  font-size: 14px;
  line-height: 1.5;
}

/* the burst. Gold and Clinical Teal, the clinic's own two, rather than a rainbow that belongs to
   somebody else's brand. It is removed from the DOM after it finishes, and it is never built at all
   for a reader who has asked for reduced motion, which signup.js checks before calling this. */
.obc-mv .su-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.obc-mv .su-bit {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #e9c471;
  opacity: 0;
  animation: su-fall 2200ms cubic-bezier(0.25, 0.6, 0.35, 1) forwards;
}

.obc-mv .su-bit.is-teal { background: #4f8f8b; }

@keyframes su-fall {
  0% { transform: translate3d(0, -10px, 0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate3d(var(--x, 0), 320px, 0) rotate(420deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .obc-mv .su-burst { display: none; }
  .obc-mv .su-bit { animation: none; }
}

/* ---------- sprint 29: CLC Ontario, the sister site ---------- */

/* Same palette, same components, different purpose. The only new rules are the two head sizes, which
   mirror the promo head rather than inventing a third scale. Everything else on these drafts is the
   clinic's existing vocabulary, which is the point: a sister site should not need a second design. */
.obc-mv.mv-clc .mv-clc-title {
  margin: 0 0 16px;
  max-width: 20ch;
  color: var(--mv-paper);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.02em;
}

/* the head CTA takes the same gold the clinic's dark bands use, so a sister site reads as a sister
   rather than as a different organisation borrowing a layout */
.obc-mv.mv-clc .mv-pro-cta .wp-block-button__link {
  padding: 16px 32px;
  border: 0;
  border-radius: 999px;
  background: #e9c471;
  color: var(--mv-ink);
  font-weight: 600;
  text-transform: none;
}

.obc-mv.mv-clc .mv-pro-cta .wp-block-button__link:hover,
.obc-mv.mv-clc .mv-pro-cta .wp-block-button__link:focus-visible { background: #f2d79a; color: var(--mv-ink); }

.obc-mv.mv-clc .mv-clc-lede {
  max-width: 52ch;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
}

/* ---------- the privacy page ---------- */

/* sprint 35 — /privacy/ went out in sprint 32 carrying mv-hero-title and mv-hero-sub, which are
   white, on a band that had no background. The heading and the lede were white on white and the
   page read as an empty screen with some bullets a long way down it. Nobody had looked at it: the
   two tests that touch the page read its words, never its colours.

   The band is deep navy now, set on the block the way every other page's top band sets it, so the
   white type is on the ground it was written for. What is left is the short answer, which lives
   inside that band on purpose — "here's the short answer first, and the detail underneath it" — and
   was inheriting Ink.

   It is the most important list on the site's most easily distrusted page. A parent deciding
   whether it is safe to tell a website her baby will not latch reads these five lines or none of
   it, so they are set larger than body copy rather than smaller. */
.obc-mv .mv-privacy-short {
  margin: clamp(22px, 3vw, 32px) 0 0;
  max-width: 66ch;
  padding-left: 1.7em;
  list-style: none;
  color: rgb(246 239 230 / 92%);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.62;
}

.obc-mv .mv-privacy-short li {
  position: relative;
  margin-bottom: 0.7em;
}

.obc-mv .mv-privacy-short li::before {
  position: absolute;
  left: -1.7em;
  content: "—";
  color: var(--mv-highlight, #d7b47a);
}

.obc-mv .mv-privacy-short li:last-child {
  margin-bottom: 0;
}

/* 5 September 2026 — the sage panel inside the ivory card is gone, at Amanda's word: "remove the
   sage colour block inside the money questions cards, leave the text on the ivory card."
   sprint 36 nested a sage panel in the ivory card so it framed something the way the tongue-tie card
   frames its signup. The difference is what is being framed: that one holds a form, which is a thing
   you act on, and these hold an answer, which is a thing you read. A second colour around prose is a
   border around a paragraph.

   THE SAME DAY, AND MY FAULT: taking the panel out took the inset with it. The wrapper carried
   `margin: 2px <gutter> <gutter>` and I replaced it with `margin: 2px 0`, which zeroed the sides, and
   the rule under it zeroed the paragraphs' side margins as well because the panel's own padding used
   to supply them. Two insets removed and none put back, so every answer in this section ran to the
   card's edge and past it. Amanda: "these cards are glitching hard."

   The wrapper now takes nothing of its own. `.mv-faq-item > :not(summary)` already gives every
   direct child of a card the gutter and the measure, and the wrapper is a direct child, so it gets
   exactly what a bare paragraph in any other FAQ card gets. The only rule left is the vertical
   rhythm between the paragraphs inside it, which is the one thing that wrapper is for. */
.obc-mv #money .mv-faq-inner > :not(summary) {
  max-width: none;
  margin: 0 0 12px;
}

.obc-mv #money .mv-faq-inner > :not(summary):last-child {
  margin-bottom: 0;
}

/* sprint 37 — naturopathic photos, Amanda's picks.
   The stethoscope hero is mirrored so the mother and baby sit to the open
   side, away from the heading. The daisy-and-baby-hand photo is a soft
   full-width band before the booking cards, kept to a strip so it breathes. */
.obc-mv .mv-flip .wp-block-cover__image-background { transform: scaleX(-1); }
.obc-mv .mv-nd-flower { margin: 0; }
.obc-mv .mv-nd-flower img { display: block; width: 100%; height: clamp(220px, 34vh, 420px); object-fit: cover; object-position: center 60%; }

/* sprint 38 — one hero treatment, Amanda's on 31 August 2026: no shadow, and bright like the
 * homepage.
 *
 * The shadow existed for a reason worth writing down, because it was not decoration. On 29 August
 * she asked for the photographs to stay bright, and that shipped as opacity 0.34 on the scrim with
 * a text shadow to compensate. But only seven of the fifteen heroes carry mv-hero, and the gradient
 * scrim is written against that class, so the other eight never had a gradient at all: their scrim
 * was WordPress's flat 60% dim, cut to a fifth. Bright photographs, and copy at 2.60:1.
 *
 * A text shadow cannot fix that. It helps a reader and counts for nothing in a contrast ratio,
 * which is computed against the background, and a blurred halo is not a background.
 *
 * So every photo hero now uses the homepage's own gradient, defined once in redesign.css and
 * pointed at all three classes. The dark sits on the left where the words are and lets go before
 * the middle of the frame, which is what "keep the image bright" was asking for, arrived at through
 * the background rather than around the letters.
 */
/* 31 August 2026 — body copy on a tinted band takes ink rather than slate.
 *
 * .mv-body, .mv-kicker and the card text all resolve to --mv-muted, which is Slate #758287. On
 * paper that is quiet and readable. On Milk Teal it is 1.3:1 and on Soft Sage 1.9:1, which is not
 * quiet, it is gone: the mentor meetups section published a whole paragraph nobody could read.
 *
 * Keyed off the inline background rather than off a list of section classes, because the owner
 * tints a section in the editor and would have no way of knowing a stylesheet needed the new class
 * adding to it. Ink is 5.6:1 on Milk Teal and 6.9:1 on Soft Sage, so both clear AA.
 */
.obc-mv .mv-section[style*="#75aab0"] :is(.mv-body, .mv-kicker, .mv-ref-note, .mv-mission-card-text, .mv-ref-contact),
.obc-mv .mv-section[style*="#a7b9a2"] :is(.mv-body, .mv-kicker, .mv-ref-note, .mv-mission-card-text, .mv-ref-contact) {
  color: var(--mv-ink);
}


/* 31 August 2026, revised sprint 38 — a photograph beside the words, not under them.
 *
 * It went in as a picture at 58% of the row with an empty column beside it, which is how it looked:
 * a rectangle stranded in the middle of the section with dead space to its right and the cards
 * almost touching its bottom edge. Amanda, 31 August: it looks weird.
 *
 * So the words take the left column and the picture takes the right one, centred against them. The
 * column that was empty is doing the work now, and the section reads as one thing.
 *
 * The photographs in this library are a mix of shapes and several are nearly white, so the frame is
 * fixed at 3:2 and cropped, and it carries a hairline as well as a shadow. Without the line, the
 * pale ones dissolve into an ivory section and read as a fragment rather than a picture.
 */
.obc-mv .mv-sec-with-photo.wp-block-columns {
  margin: 0;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.obc-mv .mv-sec-photo {
  margin: 0;
}

.obc-mv .mv-sec-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(31, 44, 49, 0.1);
  box-shadow: 0 1px 2px rgba(31, 44, 49, .07), 0 18px 40px rgba(31, 44, 49, .13);
}

/* stacked on a phone the picture belongs under the words it illustrates, with room on both sides of
   it. Without the lower half its bottom edge sits flat against the first card. */
@media (max-width: 781px) {
  .obc-mv .mv-sec-with-photo .mv-sec-photo {
    margin: 24px 0 28px;
  }
}

/* sprint 38, squint pass — the four cards under it. A card title at weight 300 is the same weight
   as the sentence beneath it, so there is nothing to scan the grid by and every card has to be read
   to be sorted. */
.obc-mv .mv-mission-card-title,
.obc-mv .mv-mission-grid h3 {
  font-weight: 600;
}


/* sprint 38, squint pass on /students/ — the price, at the size a price is read at.
 *
 * The heading beside this card says "What tuition costs, before you book" at 40px, and the number
 * it promises was 15px, in the same weight as the four notes under it. Squint at that section and
 * what survives is a heading and a grey block: the one figure a student decides on does not.
 *
 * Only the opening line moves, and only its bolded half. The instalments, the extension fee, the
 * refund rule and how acceptance works are conditions on the number and stay where they were, which
 * is what makes the number readable.
 */
.obc-mv .mv-prov-caution .mv-prov-caution-line:first-child {
  margin-bottom: 16px;
  font-size: 1.02rem;
  line-height: 1.5;
}

.obc-mv .mv-prov-caution .mv-prov-caution-line:first-child strong {
  display: block;
  margin-bottom: 4px;
  color: var(--mv-deep, #4f8f8b);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* 2 September 2026, Michael: the third card in the referral row is not a third action. It says
   where to send a form and what comes back, and it sat beside a download and a form under a button
   that looked like a peer of both. A link says what it is: more reading, not a thing to do. */
.obc-mv .mv-ref-form-link {
  margin: 18px 0 0;
  font-weight: 600;
}
.obc-mv .mv-ref-form-link a {
  color: var(--mv-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.obc-mv .mv-ref-form-link a:hover,
.obc-mv .mv-ref-form-link a:focus-visible { color: var(--mv-brand); }
.obc-mv .mv-dark .mv-ref-form-link a { color: var(--mv-paper); }

/* 3 September 2026 — the contact form's two fields the other signup forms do not have.
 *
 * Both inherit .su-field, so they take its border, radius and the 16px that stops iOS zooming the
 * page on focus. Only what differs is here: a select needs its own appearance reset or Safari draws
 * a rounded grey pill in place of the box beside it, and a textarea needs a floor and the right
 * resize handle. */
.obc-mv .su-message {
  min-height: 7.5em;
  resize: vertical;
  line-height: 1.5;
}

.obc-mv .su-about {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--mv-ink) 50%),
                    linear-gradient(135deg, var(--mv-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* 3 September 2026 — the way back to an empty form, after a message has gone.
 *
 * Quieter than Send it, because it is an offer rather than the thing she came to do. */
.obc-mv .su-again {
  margin: 12px 0 0;
  padding: 10px 20px;
  border: 1px solid rgba(24, 62, 73, 0.24);
  border-radius: 999px;
  background: transparent;
  color: var(--mv-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.obc-mv .su-again:hover,
.obc-mv .su-again:focus-visible {
  border-color: transparent;
  background: var(--mv-gold, #D7B47A);
}

/* and the address underneath, which is one unbreakable word longer than a phone is wide. Amanda:
   "the email overflows its container". Broken anywhere rather than hidden or shrunk: a family who
   wants to type it needs to read all of it. */
.obc-mv .su-note,
.obc-mv .su-c-note,
.obc-mv .su-box a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 3 September 2026 — no italic serif on /referral-forms/. Amanda: "this is a professional page.
 * Please remove the italics."
 *
 * Five were the page's own headings and came out of the markup. The sixth is inside the referral
 * policy, which is a synced pattern shared with the FAQ and with pages a family reads, where the
 * italic belongs. So it is turned off here rather than taken out of something four other pages
 * render.
 *
 * A referring midwife or physician is reading to find out what we take and what it costs. The
 * signature is for the pages that are trying to sound like somebody. */
.obc-mv.mv-forms em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}

/* 3 September 2026 — two of them across on a phone.
 *
 * Amanda: "right now in mobile view it is a lot of scrolling and I feel like vertical scrolling now
 * people want to do, they want more of a slideshow experience."
 *
 * The scrolling is real: seventeen people on a phone is 9,715px, eleven and a half screens. But the
 * cause is not that the list is vertical. Each card was 350 by 438 to hold a portrait, a name, two
 * words of credentials and a link, because the track's minimum is 236px and only one of those fits
 * a 390px screen. The card is a desktop card being shown one at a time.
 *
 * Two across is the answer that costs nobody anything. A carousel would hide fifteen of them behind
 * a swipe, and the clinic already reached that conclusion about its own numbers in sprint 38: a
 * carousel is among the least touched things on a page, so what is not first is effectively
 * unpublished. Doing that to numbers loses two figures. Doing it to colleagues means a family never
 * sees most of the people she could book.
 *
 * The slideshow feeling is upstairs instead: every hero turns its pictures over now.
 */
@media (max-width: 781px) {
  .obc-mv .mv-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .obc-mv .mv-team-grid .mv-lc-name {
    font-size: 15.5px;
    line-height: 1.25;
  }

  .obc-mv .mv-team-grid .mv-lc-creds {
    font-size: 11.5px;
    letter-spacing: 0.02em;
  }

  .obc-mv .mv-team-grid .mv-lc-body { padding: 10px 10px 12px; }

  /* the link is the whole card on a phone, where a small button is a small target */
  .obc-mv .mv-team-grid .mv-lc-actions { margin-top: 6px; }
  .obc-mv .mv-team-grid .mv-lc-link .wp-block-button__link {
    padding: 7px 12px;
    font-size: 12.5px;
  }
}

/* 10 October 2026 — the four reasons OBC can run the pilot, each one its own card.

   Amanda: "those four points need borders, this is too hard to make out." They were four
   paragraphs in two columns on the deep navy, and on a dark band the only thing separating one
   from the next was a line of space — a reader skimming for "what can they already do" met a wall
   of ivory text and had to read it all to find the four.

   The hairline is gold rather than ivory because an ivory line on navy at this weight reads as a
   seam in the background; gold is the band's own accent and says the edge is deliberate. The lead
   goes on its own line in gold for the same reason it is bold in the markup: it is the heading of
   its point, and four headings is what makes this scannable in a second. */
.obc-mv .mv-pilot-cards.wp-block-columns {
  gap: clamp(16px, 2vw, 26px);
  margin-bottom: clamp(20px, 2.4vw, 30px);
  align-items: stretch;
}

.obc-mv .mv-pilot-cards .wp-block-column {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
}

/* flex: 1 so the two cards in a column split it evenly and the four line up across. Without it
   each card is as tall as its own words and the second row starts at two different heights, which
   is the staggered look this band already had once. */
.obc-mv .mv-pilot-cards .mv-body {
  flex: 1 1 0;
  margin: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(233, 196, 113, 0.42);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.obc-mv .mv-pilot-cards .mv-body strong {
  display: block;
  margin-bottom: 6px;
  color: var(--mv-gold);
  font-weight: 600;
}