/* 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;
}

.obc-mv .mv-ref-action .wp-block-button__link {
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--mv-dark);
  color: var(--mv-paper);
  font-family: var(--mv-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease;
}

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

/* ---------- 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;
  color: rgba(255, 255, 255, 0.82);
  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. Both turn over: the solid one becomes paper with ink on it, the
   quiet one keeps its outline in paper. Stated here rather than per page so it cannot happen again. */
.obc-mv .mv-dark .mv-ref-action .wp-block-button__link {
  background: var(--mv-paper);
  color: var(--mv-ink);
}

.obc-mv .mv-dark .mv-ref-action .wp-block-button__link:hover,
.obc-mv .mv-dark .mv-ref-action .wp-block-button__link:focus-visible {
  background: var(--mv-cream);
  color: var(--mv-ink);
}

.obc-mv .mv-dark .mv-ref-action.is-quiet .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
  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 */
.obc-mv .mv-ref-action.is-quiet .wp-block-button__link {
  border: 1px solid rgba(31, 44, 49, 0.28);
  background: transparent;
  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);
  background: transparent;
  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;
}

.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 #6e4a5a;
  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;
}

/* 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);
}

.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);
  font-size: clamp(15px, 1.2vw, 17px);
  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;
  }

  .obc-mv .mv-face-grid {
    max-width: 300px;
  }
}

/* ---------- 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;
}

.obc-mv .mv-prov-sign {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.6);
  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. */
.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.14);
  border-radius: 10px;
  background: #fff;
}

.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; }
.obc-mv .su-go:disabled { opacity: 0.6; cursor: default; }

.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;
}