@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/55fdb229a642.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/3b5a0a3a6138.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bebas Neue';font-weight:300;font-display:swap;src:url(/assets/e345b9ba67a7.woff2) format('woff2')}@font-face{font-family:'Bebas Neue';font-weight:400;font-display:swap;src:url(/assets/7f2fc4abaf7e.woff2) format('woff2')}@font-face{font-family:'Bebas Neue';font-weight:500;font-display:swap;src:url(/assets/2d19ba29ae67.woff2) format('woff2')}@font-face{font-family:'Jost';font-weight:300;font-display:swap;src:url(/assets/604877565695.woff2) format('woff2')}@font-face{font-family:'Jost';font-weight:400;font-display:swap;src:url(/assets/cf7d38e27152.woff2) format('woff2')}@font-face{font-family:'Jost';font-weight:500;font-display:swap;src:url(/assets/6b8b3a1c504f.woff2) format('woff2')}
/* ==================================================================
   ALLARA-SHAPED OUTLINE.

   The page is WHITE. Colour appears only where a section is meant to
   lift off it. Two section types, alternating:

     .sec          FLAT     — straight on the white page, full width
     .sec .card    FLOATING — a rounded panel lifted off the white
     .strip        FULL-BLEED accent rule between chapters

   ⚠️ COLOURS ARE PROVISIONAL. Every value that is not a neutral lives
   in the token block below and nowhere else, so re-colouring the site
   is editing this one list.
   ================================================================== */
:root{
  /* ---- WHITE + LIGHT PINKS AND CORAL ----------------------------
     Structure borrowed from Barefaced, hues from the warm end of
     Embody's set. Still their four moves: white page, ONE deep ink
     doing every job, two pale grounds, one bright pop used once.
     And no grey — secondary text is the ink at lower opacity.

     ⚠️ EVERY pink and coral here carries INK text, never white.
     White on the lightest blush is 1.1:1 and on coral 2.6:1. There
     is no shade of pink on this page that white can sit on.
     ---------------------------------------------------------------- */
  --white:#FFFFFF;
  --ink:#1F1809;              /* 17.6:1 on white */
  --ink-2:rgba(31,24,9,.74);  /* secondary text */
  --ink-3:rgba(31,24,9,.52);  /* kickers and captions */
  --rule:rgba(31,24,9,.14);
  --cream:#FDF6F4;
  --off:#FBFBF9;             /* cooler neutral, added 29 Aug */            /* barely-there blush — flat tinted sections */
  --tint:#F7E7E3;             /* soft blush — the floating panel */
  --pop:#EF8367;              /* coral — the one loud moment, ink text only */
  --pop2:#E1BCB8;             /* dusty rose (Embody's own) — held for accents */
  --foot:#F7E7E3;             /* blush footer. INK type on it, 14.7:1. The page
                                 never goes dark; it fades out instead. */

  /* aliases kept so the rest of the sheet did not need rewriting */
  --bone:var(--cream); --paper:var(--cream); --mist:var(--rule);
  --stone:var(--ink-3); --r4:var(--ink-3); --r5:var(--ink-3);
  --r6:var(--ink-2); --charcoal:var(--ink); --deep:var(--ink);
  --accent:var(--tint); --accent-soft:var(--cream); --accent-ink:var(--ink);

  --radius:1.75rem;
  --radius-sm:.9rem;
  --title:'Bebas Neue',Impact,sans-serif;
  --body:'Jost',-apple-system,Helvetica,Arial,sans-serif;
  --gutter:clamp(1.5rem,5vw,4rem);
  --measure:70rem;
}
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--deep);font-family:var(--body);
  font-weight:300;-webkit-font-smoothing:antialiased}
.t{font-family:var(--title);font-weight:400;letter-spacing:.234em;
  text-transform:uppercase;line-height:1}
.inner{max-width:var(--measure);margin:0 auto}

.sign__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sign__consent{display:flex;gap:.6rem;align-items:flex-start;margin:.85rem 0 0;
  font-size:.74rem;line-height:1.55;color:var(--ink-3);cursor:pointer;max-width:26rem}
/* [type=checkbox] is load-bearing. `.sign input` (the email field, 100% wide)
   and `.sign__consent input` are both (0,1,1), so source order decided and the
   checkbox rendered 102px wide. The attribute selector breaks the tie. Second
   time this exact specificity tie has bitten on this site. */
.sign__consent input[type=checkbox]{flex:none;width:.95rem;height:.95rem;
  min-width:0;margin:.2rem 0 0;padding:0;accent-color:var(--ink);cursor:pointer}
.sign__consent a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

/* ---- ANNOUNCEMENT BAR ------------------------------------------
   Sits above the sticky nav, so it scrolls away and the nav still
   pins to the top. Coral ground, 30 Aug, at Lily's request: "make that
   strip a diff color like pink or coral to stand out".
   INK type on the coral, 6.80:1 — passes AA. White would be 2.59:1
   and fails, which is the standing rule on every pink here. ----- */
.bar{display:block;background:var(--pop);color:var(--ink);
  text-decoration:none;text-align:center;padding:.7rem var(--gutter);
  font-size:.78rem;line-height:1.5;letter-spacing:.01em}
.bar b{font-weight:400;text-decoration:underline;text-underline-offset:3px}
.bar:hover b{text-decoration-thickness:2px}
.bar:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}

/* ---- NAV ------------------------------------------------------- */
.nav{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.6rem);
  padding:.6rem .6rem .6rem 1.5rem;position:sticky;top:.85rem;z-index:50;
  width:calc(100% - 2rem);max-width:82rem;margin:.85rem auto 0;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:0;border-radius:14px;
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.75),
             inset -1px -1px 1px rgba(255,255,255,.35),
             0 0 26px -1px rgba(31,24,9,.15)}
.nav a{color:inherit;text-decoration:none}
.wm{height:13px;width:105.1px;color:var(--deep);display:block;flex:none}
.nav__l{display:flex;gap:clamp(1rem,2.4vw,2rem);flex:1}
.nav__l a{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--r6);white-space:nowrap;padding:.2rem 0;border-bottom:1px solid transparent}
.nav__l a:hover{color:var(--deep);border-bottom-color:var(--deep)}
.nav .book{background:var(--ink);color:var(--white);padding:.8rem 1.5rem;border:0;cursor:pointer;font-family:inherit;
  border-radius:999px;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;flex:none}
.burger{display:none;background:none;border:0;padding:.4rem;cursor:pointer;
  color:var(--deep);line-height:0}
.burger span{display:block;width:20px;height:1px;background:currentColor;margin:4px 0;
  transition:transform .22s ease,opacity .18s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.drop{position:absolute;left:0;right:0;top:100%;background:var(--white);display:none;
  flex-direction:column;border-bottom:1px solid var(--mist)}
.drop[data-open]{display:flex}
.drop a{padding:1rem var(--gutter);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--r6);border-top:1px solid var(--mist)}
.drop .drop__cta{background:var(--ink);color:var(--white);border:0;cursor:pointer;font-family:inherit;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:1rem var(--gutter);
  margin:.9rem var(--gutter) 1.1rem;border-radius:999px;text-align:center}

/* ---- BOOKING CHOOSER ------------------------------------------
   Square, at Lily's direction. Note this is the one element on the
   site with hard corners — every panel, chip and button elsewhere is
   rounded or a pill — so it reads as deliberately different rather
   than as part of the page furniture. Route cards keep the blush
   ground so it still belongs to this palette. -------------------- */
.sheet{position:fixed;inset:0;z-index:200;display:none;
  align-items:stretch;justify-content:flex-end;padding:0}
.sheet[data-open]{display:flex}
.sheet__veil{position:absolute;inset:0;background:rgba(31,24,9,.4)}
.sheet__box{position:relative;background:var(--white);border-radius:0;
  width:min(50vw,40rem);min-width:min(100%,26rem);height:100%;max-height:none;overflow:auto;
  padding:clamp(2.4rem,5vw,4rem) clamp(1.8rem,4vw,3.2rem);
  box-shadow:-24px 0 60px rgba(31,24,9,.18);display:flex;flex-direction:column;justify-content:flex-start}
@media (max-width:640px){.sheet__box{width:100%;min-width:0;justify-content:flex-start}}
@media (prefers-reduced-motion:no-preference){.sheet[data-open] .sheet__box{animation:sheetIn .28s ease-out}@keyframes sheetIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}}
.sheet__h{font-family:var(--title);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.1;margin:0 0 1.5rem;padding-right:2rem;color:var(--ink-2)}
.sheet__x{position:absolute;top:1.6rem;right:1.8rem;background:none;border:0;
  cursor:pointer;font-size:2rem;line-height:1;color:var(--ink-3);padding:.2rem}
.sheet__x:hover{color:var(--ink)}
.route{display:block;text-decoration:none;color:var(--ink);
  background:var(--cream);border:1px solid transparent;border-radius:0;
  padding:1.5rem 1.7rem;margin:0 0 1rem;transition:background .18s,border-color .18s}
.route:last-child{margin-bottom:0}
.route:hover,.route:focus-visible{background:var(--tint);border-color:var(--ink);outline:0}
.route[aria-disabled]{opacity:.45;pointer-events:none}
.route__h{display:block;font-size:1.05rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;margin:0 0 .45rem}
.route__p{display:block;font-size:1.02rem;line-height:1.6;color:var(--ink-2)}

/* ---- HERO — text one half, photo the other --------------------- */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border-bottom:1px solid var(--rule);height:min(78vh,42rem)}
/* HEIGHT, not min-height. object-fit:cover only crops when the box has a size
   of its own — with min-height the 1200x1500 photo set the row and the hero
   came out 1500px tall. */
.hero__text{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.5rem,6vw,5rem) clamp(1.5rem,5vw,4.5rem);min-width:0}
.hero__h{margin:0;font-size:clamp(2.4rem,5vw,4.2rem);letter-spacing:.06em;max-width:22ch}
/* The H1 carries explicit <br class="hb"> so it breaks
      Comprehensive / women's healthcare, / for every season.
   rather than wherever the measure happens to land. At 14ch natural wrapping
   put "healthcare," alone on line 3 and split "for every season" across two
   more. Below 400px there is not room for "women's healthcare," on one line,
   so the breaks switch off and normal wrapping takes over. */
.hero__h .hb{display:inline}
@media(max-width:400px){ .hero__h .hb{display:none} }
/* Generic line-break utility for display headings, same idea: choose the break
   above the fold-width, hand it back to the browser on narrow screens. */
.brk{display:inline}
@media(max-width:560px){ .brk{display:none} }
.hero__sub{font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.75;color:var(--ink-2);
  margin:1.4rem 0 0;max-width:32rem}
.hero__acts{display:flex;gap:.7rem;flex-wrap:wrap;margin:2.2rem 0 0}
.hero__acts .btn{border:0;cursor:pointer;font-family:inherit}
.hero__acts .btn--o{border:1px solid var(--ink)}
.hero__img{background:var(--tint);overflow:hidden;min-height:0}
.hero__img--two{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.hero--mark{grid-template-columns:1fr;position:relative;overflow:hidden;
  background:var(--off);align-items:center}
.hero--mark .hero__text{max-width:var(--measure);width:100%;margin:0 auto;
  text-align:center;align-items:center;
  padding-left:clamp(1.5rem,5vw,4.5rem);padding-right:clamp(1.5rem,5vw,4.5rem)}
.hero--mark .hero__h{max-width:none}
.hero--mark .hero__sub{margin-left:auto;margin-right:auto}
.hero--mark .hero__acts{justify-content:center}
/* Contained, not bled. The framed mark carries a rectangle, and letting a
   rectangle run off the edge reads as a stray rule crossing the hero rather
   than as part of the mark — the bare spiral could bleed, this cannot. */
.hero__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(52vw,38rem);pointer-events:none}
.hero__mark svg{width:100%;height:auto;display:block}
.hero__mark svg *{fill:var(--pop2)}
@media(max-width:820px){ .hero__mark{width:86vw;opacity:.45} }

.hero__img--inset{background:var(--cream);display:flex;align-items:center;
  justify-content:center;padding:clamp(1.5rem,3vw,2.5rem)}
.hero__img--inset img{width:100%;max-width:370px;height:auto;max-height:100%;
  object-fit:contain;border-radius:var(--radius-sm)}
.hero__img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- SECTION types --------------------------------------------- */
.sec{padding:clamp(3rem,6vw,5rem) var(--gutter)}
.sec--tint{background:var(--accent-soft)}
.sec__lead{max-width:38rem;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center}
.sec__k{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--r5);margin:0 0 1rem}
.sec h2{margin:0;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:.08em}
.sec__p{font-size:1.02rem;line-height:1.75;color:var(--r6);margin:1.2rem 0 0}

.btn{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.95rem 2rem;text-decoration:none;display:inline-block;border-radius:999px}
.btn--f{background:var(--ink);color:var(--white)}
.btn--o{border:1px solid var(--ink);color:var(--ink)}
.acts{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin:2rem 0 0}

/* ---- FLOATING: the accent panel with chips (Allara's move) ------ */
.card{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);
  padding:clamp(2.2rem,5vw,3.5rem);max-width:var(--measure);margin:0 auto}
.card--square{border-radius:0}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.chip{background:var(--white);border-radius:999px;padding:.7rem 1.3rem;
  font-size:.9rem;color:var(--ink);white-space:nowrap}
/* offer chips sit on white, so they need an outline instead of a fill */
.chips--o{max-width:var(--measure);margin:0 auto}
.chip--o{background:transparent;border:1px solid var(--rule)}

/* ---- FULL-BLEED strip between chapters ------------------------- */
.strip{background:var(--pop);color:var(--ink);
  padding:1.5rem var(--gutter);text-align:center;font-size:.98rem}
.strip a{color:inherit;font-weight:400}

/* ---- insurance carriers ---------------------------------------
   A centred wrap, NOT a grid. Seven carriers in a four-column grid
   leaves an empty cell in the last row — the same hole the Movement
   card grid fell into. A flex wrap centres the short last row and
   stays right whatever number of carriers this becomes.

   Bare marks, no boxes: this is how Allara and Barefaced show
   carriers, and it is what real logos want. Text now, images later —
   swap the <span> for
     <img src="..." alt="Aetna" class="carrier__img">
   Real logos need MAX-HEIGHT, never a fixed width: carrier marks vary
   wildly in aspect ratio and a fixed width squashes half of them. */
.carriers{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.2rem,2.5vw,1.8rem) clamp(1rem,2.5vw,2rem);
  max-width:66rem;margin:0 auto}
.carrier{display:flex;align-items:center;justify-content:center;min-height:2.8rem}
.carrier span{font-size:1.02rem;line-height:1.4;color:var(--ink-2);text-align:center}
.carrier__img{height:2.4rem;width:auto;max-width:11rem;object-fit:contain}
/* height is EXPLICIT on purpose. Most real logo SVGs ship with a viewBox and no
   width/height, and with height:auto those collapse to nothing — the slot looks
   empty and you spend an hour wondering why. A fixed height plus width:auto
   scales any viewBox correctly and keeps every mark on one optical baseline. */
.ins__note{max-width:42rem;margin:2.6rem auto 0;text-align:center;
  font-size:.92rem;line-height:1.75;color:var(--ink-2)}

/* ---- pricing cards (Allara's self-pay block) ------------------ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  max-width:var(--measure);margin:0 auto;align-items:stretch}
.plan li sup{color:var(--ink-3);font-size:.7em}
.plan{background:var(--white);border:1px solid var(--rule);
  padding:clamp(1.6rem,3.5vw,2.4rem);display:flex;flex-direction:column;gap:1rem}
.plan__tag{align-self:flex-start;background:var(--pop);color:var(--ink);
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:999px}
.plan__n{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.plan__price{font-family:var(--title);font-weight:400;letter-spacing:.04em;
  font-size:clamp(2rem,4vw,2.8rem);margin:0}
.plan ul{margin:0;padding:0 0 0 1.1rem;flex:1}
.plan li{font-size:.92rem;line-height:1.7;color:var(--ink-2);margin:0 0 .4rem}

/* ---- self-pay rate table ---------------------------------------
   Row headers are <th scope="row">, so a screen reader reads "Pelvic
   floor therapy, new patient, $210" rather than three loose numbers.
   The table scrolls inside its own box on a narrow screen instead of
   pushing the page sideways. ------------------------------------- */
.rates__wrap{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem);max-width:52rem;margin:0 auto}
.rates{width:100%;border-collapse:collapse;margin:0 0 1rem}
.rates th,.rates td{text-align:left;padding:.7rem 0;font-weight:400;
  border-bottom:1px solid var(--rule)}
.rates thead th{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);padding-top:0;border-bottom:1px solid var(--ink)}
.rates td,.rates thead th:not(:first-child){text-align:right;
  font-variant-numeric:tabular-nums}
.rates tbody th{font-size:.95rem;color:var(--ink-2)}
.rates tbody td{font-size:1.05rem;color:var(--ink)}
.rates tbody tr:last-child th,.rates tbody tr:last-child td{border-bottom:0}
.rates__note{margin:0;font-size:.85rem;line-height:1.65;color:var(--ink-3)}
@media (max-width:720px){.rates__wrap{grid-template-columns:1fr}}

/* ---- legal pages. Long-form text, so the measure is tighter than the
   rest of the site and the vertical rhythm is looser: nobody reads a
   privacy policy, but the ones who do are looking for one clause and
   need the headings to be findable at a glance. ------------------- */
.legal{max-width:44rem;margin:0 auto}
.legal h2{font-family:var(--title);font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;font-size:1.35rem;line-height:1.25;
  margin:3.2rem 0 1rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:2.2rem 0 .8rem;font-weight:400}
.legal p{font-size:.98rem;line-height:1.85;color:var(--ink-2);margin:0 0 1.15rem}
.legal ul{margin:0 0 1.5rem;padding:0 0 0 1.15rem}
.legal li{font-size:.98rem;line-height:1.8;color:var(--ink-2);margin:0 0 .5rem}
.legal strong{color:var(--ink);font-weight:400}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal__eff{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);margin:1.4rem 0 0}

/* a plain prose block, for the carrier detail */

/* ---- /get-care — the routing quiz --------------------------------
   Marketing lead capture, NOT a medical form. It asks which service line
   someone wants and which state they are in; it must never grow a symptom,
   medication or history field. Those belong in Carepatron, behind the BAA.
   The step machine is plain JS on a hidden/shown fieldset — no framework, and
   it degrades to a single scrollable form if JS is off. */
.quiz{max-width:44rem;margin:0 auto}
.quiz__bar{height:3px;background:var(--rule);border-radius:2px;overflow:hidden;
  margin:0 0 clamp(2rem,4vw,3rem)}
.quiz__fill{display:block;height:100%;background:var(--ink);width:25%;
  transition:width .35s ease}
.quiz__step{display:none}
.quiz__step[data-on]{display:block}
.quiz__q{font-family:var(--title);font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.1rem);
  margin:0 0 .6rem;color:var(--ink)}
.quiz__hint{margin:0 0 1.8rem;font-size:.94rem;line-height:1.7;color:var(--ink-2)}
.quiz__opts{display:grid;gap:.6rem}
.quiz__opt{display:block;width:100%;text-align:left;background:var(--white);
  border:1px solid var(--rule);border-radius:999px;padding:1rem 1.5rem;
  font-family:inherit;font-size:.98rem;color:var(--ink);cursor:pointer;
  transition:background .15s,border-color .15s}
.quiz__opt:hover,.quiz__opt:focus-visible{background:var(--tint);
  border-color:var(--ink);outline:0}
.quiz__back{background:none;border:0;font-family:inherit;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  cursor:pointer;padding:.6rem 0;margin-top:1.6rem}
.quiz__back:hover{color:var(--ink)}
.quiz label{display:block;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .5rem}
.quiz input[type=text],.quiz input[type=email]{width:100%;box-sizing:border-box;
  padding:.95rem 1.2rem;border:1px solid var(--rule);border-radius:999px;
  font-family:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  margin:0 0 1.2rem}
.quiz input:focus{outline:2px solid var(--ink);outline-offset:-2px}
.quiz__note{font-size:.78rem;line-height:1.6;color:var(--ink-3);
  margin:1.4rem 0 0}
.quiz__result{background:var(--tint);border-radius:var(--radius);
  padding:clamp(2rem,4vw,3rem);text-align:center}

/* ---- /about ------------------------------------------------------
   phero  full-bleed photo with type over it. The scrim is not decoration:
          every photo in the library is a daylight shot with light areas, and
          cream type on an unscrimmed one drops under 3:1 in places. The
          gradient guarantees the contrast whatever image is swapped in.
   split  half photo, half text. Photo first in source so it reads first on
          a phone, where the column collapses.
   svc    service cards, photo above label.
   ppl    people grid — names and roles only, no bios, per Lily's intake. */
.phero{position:relative;min-height:min(72vh,36rem);display:grid;
  align-items:end;overflow:hidden;background:var(--ink)}
.phero__img{position:absolute;inset:0}
.phero__img img{width:100%;height:100%;object-fit:cover;display:block}
.phero__img--split{display:grid;grid-template-columns:1fr 1fr;gap:2px}
@media(max-width:720px){
  .phero__img--split{grid-template-columns:1fr}
  .phero__b{display:none}
}
/* The foot of the scrim is .88, not the .72 that suited a single dark photo.
   The right-hand crop is a white building at the bottom, and cream type over
   a .72 scrim on white measures about 3:1 — a fail. Measured, not guessed. */
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,24,9,.14) 0%,rgba(31,24,9,.34) 45%,
    rgba(31,24,9,.72) 78%,rgba(31,24,9,.88) 100%)}
.phero__in{position:relative;z-index:1;padding:clamp(2.5rem,7vw,5rem) var(--gutter);
  max-width:var(--measure);margin:0 auto;width:100%;box-sizing:border-box}
.phero__h{margin:0;color:var(--cream);font-size:clamp(2.4rem,6vw,4.4rem);
  letter-spacing:.06em}
.phero__p{margin:1rem 0 0;color:var(--cream);opacity:.92;max-width:34rem;
  font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.7}

/* band: full-bleed photo with copy over it. Same construction as .phero, but
   centred and shorter — used once, so it stays an event rather than a pattern. */
.band{position:relative;min-height:min(58vh,28rem);display:grid;place-items:center;
  overflow:hidden;background:var(--ink)}
.band__img{position:absolute;inset:0}
.band__img img{width:100%;height:100%;object-fit:cover;display:block}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,24,9,.55) 0%,rgba(31,24,9,.70) 100%)}
.band__in{position:relative;z-index:1;text-align:center;max-width:44rem;
  padding:clamp(3rem,7vw,5rem) var(--gutter)}
.band__in h2{color:var(--cream)}
.band__in p{color:var(--cream);opacity:.92}
/* Buttons have to invert here. The site's filled button is an INK pill and the
   outline button is an ink hairline — on a dark band the first vanishes into
   the background and the second is a ghost. Both were invisible in the first
   render. */
.band .btn--f{background:var(--cream);color:var(--ink)}
.band .btn--o{border:1px solid var(--cream);color:var(--cream)}
.band .btn--o:hover{background:var(--cream);color:var(--ink)}

.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,5vw,4.5rem);max-width:var(--measure);margin:0 auto}
.split__img img{width:100%;height:100%;max-height:34rem;object-fit:cover;
  display:block;border-radius:var(--radius-sm)}
@media(max-width:820px){ .split{grid-template-columns:1fr} }

.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.2rem);
  max-width:var(--measure);margin:0 auto}
.svc a{display:block;text-decoration:none;color:var(--ink)}
.svc img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:var(--radius-sm);margin:0 0 1rem}
.svc h3{font-family:var(--title);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;font-size:1.02rem;margin:0 0 .45rem}
.svc p{margin:0;font-size:.92rem;line-height:1.7;color:var(--ink-2)}
.svc--text a{border-top:1px solid var(--rule);padding-top:1.4rem}
.svc__n{display:block;font-size:.7rem;letter-spacing:.24em;color:var(--ink-3);
  margin:0 0 .9rem}
@media(max-width:820px){ .svc{grid-template-columns:1fr} }

.strip4{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;
  max-width:var(--measure);margin:0 auto}
.strip4 img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  display:block;border-radius:var(--radius-sm)}
@media(max-width:820px){ .strip4{grid-template-columns:repeat(2,1fr)} }

.ppl{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2rem);
  max-width:var(--measure);margin:0 auto}
.ppl figure{margin:0;border-top:1px solid var(--rule);padding-top:1.1rem}
.ppl img,.ppl .ph{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:var(--radius-sm);background:var(--tint)}
.ppl figcaption{margin:0}
.ppl b{display:block;font-weight:400;font-size:1rem;color:var(--ink)}
.ppl em{display:block;font-style:normal;font-size:.82rem;color:var(--ink-2);
  margin-top:.2rem}
.ppl span{display:block;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.3rem}
.ppl--3{grid-template-columns:repeat(3,1fr);max-width:52rem}
@media(max-width:820px){ .ppl,.ppl--3{grid-template-columns:repeat(2,1fr)} }

/* ---- THREE-UP, used by /about ---------------------------------- */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.6rem);
  max-width:var(--measure);margin:0 auto}
.tri h3{font-family:var(--title);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;font-size:1rem;margin:0 0 .7rem;color:var(--ink)}
.tri p{margin:0;font-size:.96rem;line-height:1.8;color:var(--ink-2)}
@media(max-width:820px){ .tri{grid-template-columns:1fr} }

.prose{max-width:42rem;margin:0 auto}
.prose p{font-size:.98rem;line-height:1.8;color:var(--ink-2);margin:0 0 1.1rem}
.prose ul{margin:0 0 1.4rem;padding:0 0 0 1.2rem}
.prose li{font-size:.98rem;line-height:1.8;color:var(--ink-2)}
.prose b{color:var(--ink);font-weight:400}
.sign-off{display:flex;align-items:center;gap:1rem;margin:2.2rem 0 0}
.sign-off img{width:92px;height:92px;flex:none;border-radius:50%;
  object-fit:cover;object-position:50% 30%;display:block}
.sign-off p{margin:0;font-size:.9rem;color:var(--ink-2)}
.prose__small{font-size:.86rem;color:var(--ink-3)}

/* ---- visit pricing (Midi model). Membership card CSS removed 29 Aug
   with the cards themselves. ----------------------------------- */
.visits{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);
  max-width:52rem;margin:0 auto}
.visit{border-top:1px solid var(--ink);padding:1.3rem 0 0}
.visit__h{font-family:var(--title);font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;font-size:1.25rem;margin:0 0 .8rem}
.visit__p{margin:0;font-size:.95rem;line-height:1.8;color:var(--ink-2)}
.visit__p b{color:var(--ink);font-weight:400;font-size:1.15rem}

/* ---- class formats -------------------------------------------- */
.fmts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);max-width:var(--measure);margin:0 auto}
.fmt{background:var(--white);padding:clamp(1.5rem,3vw,2.2rem)}
/* An odd number of formats in a 2-col grid leaves an empty cell. Span the last
   one instead — third time this grid-hole has bitten on this site. */
.fmt:last-child:nth-child(odd){grid-column:1 / -1}
.fmt__n{font-family:var(--title);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;font-size:1.5rem;margin:0 0 .6rem}
.fmt__m{display:flex;flex-wrap:wrap;gap:.4rem .6rem;margin:0 0 .9rem}
.fmt__m span{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--rule);border-radius:999px;
  padding:.3rem .7rem}
.fmt__d{margin:0;font-size:.93rem;line-height:1.75;color:var(--ink-2)}

/* ---- the Mariana Tek mount ------------------------------------- */
.mt{max-width:var(--measure);margin:0 auto;min-height:26rem;
  border:1px solid var(--rule);background:var(--white)}

/* ---- FAQ accordion. <details>/<summary>, so it opens without JS,
   is keyboard operable and is announced correctly by screen readers.
   A div full of click handlers would be none of those. ---------- */
.faqs{max-width:46rem;margin:0 auto 2.6rem;border-top:1px solid var(--rule)}
.faqs:last-child{margin-bottom:0}
.faq__g{max-width:46rem;margin:0 auto .9rem;font-size:.62rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3)}
.faq__g:not(:first-child){margin-top:2.4rem}
.faq{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:1.3rem 2rem 1.3rem 0;
  font-size:1.02rem;line-height:1.5;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:.2rem;top:1.15rem;
  font-size:1.3rem;color:var(--ink-3);transition:transform .2s}
.faq[open] summary::after{content:'–'}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.faq div{padding:0 2rem 1.4rem 0;font-size:.95rem;line-height:1.8;color:var(--ink-2)}
.faq b{color:var(--ink);font-weight:400}
.faq b.q{display:block;margin-top:1rem;color:var(--pop2);font-weight:400}

/* ---- placeholder marker ---------------------------------------- */
.ph{border:1px dashed var(--ink-3);border-radius:var(--radius-sm);
  padding:clamp(2rem,5vw,3.5rem);text-align:center;color:var(--r5);
  max-width:var(--measure);margin:0 auto}
.ph b{display:block;font-family:var(--title);font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;font-size:1.05rem;color:var(--charcoal);margin:0 0 .5rem}
.ph span{font-size:.9rem;line-height:1.7}

/* ---- FOOTER ----------------------------------------------------
   Blush, not a dark bar. The whole page stays light and simply fades
   out, which is the point of choosing this one — a heavy ink block
   under an airy page fights it.

   Consequence: every value in here is INK on blush, never white on
   dark. White on this blush is 1.2:1 and completely unreadable, so
   nothing in this block may inherit a light colour. --------------- */
.foot{background:var(--foot);color:var(--ink);
  border-top:1px solid var(--rule);
  padding:clamp(3.5rem,8vw,6rem) var(--gutter) clamp(1.5rem,3vw,2.2rem)}
.foot__top{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:clamp(2rem,5vw,4rem);
  max-width:var(--measure);margin:0 auto}
.foot__where{font-size:.95rem;line-height:1.95;margin:0;color:var(--ink);font-style:normal}
.foot__where a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(31,24,9,.3)}
.foot__where a:hover{border-bottom-color:var(--ink)}
.foot__where .fax,.foot__where .addr{color:var(--ink-2)}
.foot__where .addr{display:block;margin-top:1.1rem}
.foot__nav{display:flex;flex-direction:column;gap:.5rem}
.foot__nav a{color:var(--ink-2);text-decoration:none;font-size:.95rem;line-height:1.6}
.foot__nav a:hover{color:var(--ink)}
.sign p{margin:0 0 .9rem;font-size:.95rem;line-height:1.7;color:var(--ink-2);max-width:24rem}
.sign__row{display:flex;gap:.5rem;flex-wrap:wrap;max-width:24rem}
.sign input{flex:1 1 11rem;min-width:0;background:transparent;color:var(--ink);
  border:1px solid rgba(31,24,9,.3);padding:.8rem 1.2rem;font:inherit;
  font-size:.9rem;border-radius:999px}
.sign input::placeholder{color:var(--ink-3)}
.sign input:focus{outline:0;border-color:var(--ink)}
.sign button{background:var(--ink);color:var(--white);border:0;cursor:pointer;
  font-family:inherit;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.8rem 1.5rem;border-radius:999px}
.sign__note{margin:.8rem 0 0;font-size:.8rem;color:var(--ink-2);min-height:1.2em}
.foot__mark{margin:clamp(3rem,7vw,5.5rem) 0 0;display:block}
.foot__mark svg{width:100%;height:auto;color:var(--ink);display:block}
.foot__end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  margin:clamp(1.4rem,3vw,2rem) 0 0;padding-top:1.1rem;
  border-top:1px solid rgba(31,24,9,.18);font-size:.8rem;color:var(--ink-2)}
.foot__end a{color:var(--ink-2);text-decoration:none}
.foot__end a:hover{color:var(--ink)}
.foot__end p{margin:0}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;height:auto}
  .hero__img{aspect-ratio:4/3;order:-1}
}
@media(max-width:1080px){ .nav__l{display:none} .burger{display:block;margin-left:auto}
  .nav{gap:1rem} .cards{grid-template-columns:1fr} .steps{grid-template-columns:1fr} }
@media(max-width:700px){
  .foot__top{grid-template-columns:1fr}
  .sign__row,.sign p{max-width:none} .nav .book{display:none}
  :root{--radius:1.25rem}
}

/* ---- MOBILE TYPE BUMP (Sept 2026) ---- */
@media (max-width:640px){
  .sp-door__p,.sp-steps span,.sp-rail p,.sp-start__sub,.sp-pay,.sp-line__note,.route__p,.prose__small,.visit__p,.faq__a,.faq__a p{font-size:1rem;line-height:1.6}
  .sp-steps li,.sp-line__who,.chip,.sp-ask{font-size:1.02rem}
  .sp-group h3,.sp-rail__box h3,.sec__k,.faq__g,.sp-tag{font-size:.78rem;letter-spacing:.2em}
  .sp-door__h{font-size:1.05rem}
  .hero__sub,.prose p,.sec p{font-size:1.08rem;line-height:1.7}
  .faq summary{font-size:1.08rem}
  .foot__nav a,.foot__where,.foot address{font-size:1rem}
}

/* ---- BOOKING SHEET, two-step (Sept 2026) ---- */
.sheet__box .sheet__wm{display:block;width:121px;height:15px;color:var(--ink);
  margin:0 0 1.7rem;align-self:flex-start;flex:none}

.sheet__box .sdoor{display:block;position:relative;text-decoration:none;color:var(--ink);
  background:var(--cream);padding:1.25rem 2.7rem 1.25rem 1.25rem;margin:0 0 .6rem;
  border:1px solid transparent;transition:border-color .16s,background .16s}
.sheet__box .sdoor:hover,.sheet__box .sdoor:focus-visible{border-color:var(--ink);background:var(--tint);outline:0}
.sheet__box .sdoor__h{display:block;font-family:var(--title);font-weight:400;font-size:1.5rem;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.05;margin:0 0 .18rem}
.sheet__box .sdoor__p{display:block;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.sheet__box .sdoor:after{content:"\2192";position:absolute;right:1.15rem;top:50%;
  transform:translateY(-50%);color:var(--pop);font-size:1.15rem;line-height:1}
.sheet__box p.sfoot{margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule);
  font-size:.86rem;line-height:1.75;color:var(--ink-2)}
.sheet__box p.sfoot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--pop2)}
.sheet__box p.sfoot a:hover{border-bottom-color:var(--ink)}
.sheet__box .sback{align-self:flex-start;text-align:left;background:none;border:0;padding:0 0 .1rem;cursor:pointer;font-family:var(--body);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pop);
  margin:0 0 .85rem;display:inline-block}
.sheet__box .sback:hover{color:var(--ink)}
.sheet__box .sback[hidden]{display:none}
@media(max-width:430px){
  .hero__acts{gap:.55rem}
  .hero__acts .btn{padding:.8rem 1.15rem;font-size:.62rem;letter-spacing:.1em}
}

/* ==================================================================
   HOMEPAGE, repositioned                            30 Sep 2026
   Lily's structure and copy. Clinical care is the core; movement,
   education and community are parts of the model that support it.

   The whole point of this layout: a visitor should read "women's
   healthcare company" within five seconds. So the clinical grid
   comes second, before anything about the studio, and the studio
   arrives as something the model includes rather than a second
   business to explain.
   ================================================================== */

.draftbar{background:#1F1809;color:#FDF6F4;padding:.8rem var(--gutter);
  font-size:.76rem;line-height:1.6;text-align:center}
.draftbar b{color:var(--pop);letter-spacing:.18em;margin-right:.6rem}
.draftbar code{font-size:.72rem;background:rgba(253,246,244,.14);
  padding:.1rem .35rem;border-radius:3px}

/* ---- HERO -------------------------------------------------------- */
.hp-hero{position:relative;min-height:min(84vh,44rem);display:grid;
  place-items:center;overflow:hidden;
  margin-top:calc(-1 * (59.8px + 13.6px))}
.hp-hero .pband--hero{position:absolute;inset:0;height:100%;width:100%}
.hp-hero:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,24,9,.34),rgba(31,24,9,.56))}
.hp-hero__c{position:relative;z-index:2;text-align:center;color:#FFFFFF;
  max-width:54rem;margin:0 auto;
  padding:clamp(8rem,14vw,10.5rem) clamp(1.2rem,5vw,3rem) clamp(3rem,7vw,4.5rem)}
/* ---- HERO TYPEFACE ------------------------------------------------
   Fraunces on hero headlines ONLY. Bebas still runs every section
   heading, where short uppercase labels are what it is good at.
   Two consequences of the switch worth knowing:
     1. sentence case. Bebas forced all caps; a serif does not, and
        "Women's health, for every season." now reads as a sentence
        rather than as signage. That is the bigger change.
     2. tighter tracking. Bebas wanted .05em to breathe. Fraunces
        is proportional and wants slightly negative.
   Rolling this to the other page heroes is a find/replace on
   .hero__h, once Lily decides she wants it everywhere. ---------- */
.hp-hero__h{color:#FFFFFF;font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:400;text-transform:none;
  font-size:clamp(2.3rem,6vw,4.1rem);letter-spacing:-.015em;
  line-height:1.06;margin:0}
.hp-hero__p{color:rgba(255,255,255,.92);font-size:clamp(1rem,1.9vw,1.15rem);
  line-height:1.75;margin:1.4rem auto 0;max-width:42rem}
.hp-acts{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin:2rem 0 0}
.hp-acts--l{justify-content:flex-start}
.hp-hero .btn--f{background:#FFFFFF;color:var(--ink)}
.hp-hero .btn--f:hover{background:var(--tint)}
.hp-hero .btn--o{border-color:rgba(255,255,255,.8);color:#FFFFFF;background:transparent}
.hp-hero .btn--o:hover{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}
.hp-hero__loc{color:rgba(255,255,255,.82);font-size:.82rem;letter-spacing:.06em;
  margin:1.6rem 0 0}
@media(max-width:760px){
  /* type on a quiet ground rather than over a face, same move the
     current hero makes */
  .hp-hero{min-height:82vh;margin-top:calc(-1 * (56px + 9.6px));align-content:start;
    background:linear-gradient(168deg,#FDF6F4 0%,#F8E4DE 30%,#EFCEC5 62%,#E3B4A8 100%)}
  .hp-hero:after{display:none}
  .hp-hero .pband--hero{inset:auto 0 0 0;height:30vh}
  .hp-hero__c{color:var(--ink);padding-top:7rem;padding-bottom:2rem}
  .hp-hero__h,.hp-hero__p,.hp-hero__loc{color:var(--ink)}
  .hp-hero__p{color:var(--ink-2)}
  .hp-hero .btn--f{background:var(--ink);color:var(--cream)}
  .hp-hero .btn--o{border-color:var(--ink);color:var(--ink)}
}

.riser{position:relative;z-index:1;background:var(--white);
  border-radius:8px 8px 0 0;margin-top:-8px;
  box-shadow:0 -18px 40px -22px rgba(31,24,9,.35)}

/* ---- SHARED LEAD ------------------------------------------------- */
.hp-lead{max-width:46rem;margin:0 auto clamp(2.2rem,4.5vw,3.4rem);text-align:center}
.hp-lead h2{margin:0;font-size:clamp(1.7rem,4vw,2.8rem);letter-spacing:.06em;
  line-height:1.12}
.hp-lead p{font-size:1.02rem;line-height:1.8;color:var(--ink-2);margin:1.2rem 0 0}
.hp-lead__b{color:var(--ink);font-size:1.1rem}
.hp-k{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1rem}

/* ---- CARE GRID ---------------------------------------------------
   Eight doors on a hairline grid. Not cards: eight shadowed panels
   would read as eight products competing, and this is one practice
   with eight ways in. ------------------------------------------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  max-width:var(--measure);margin:0 auto}
.cg{display:block;background:var(--white);padding:1.6rem 1.5rem 1.7rem;
  text-decoration:none;color:var(--ink);transition:background .18s ease}
.cg:hover,.cg:focus-visible{background:var(--cream)}
.cg b{display:block;font-family:var(--title);font-weight:400;text-transform:uppercase;
  letter-spacing:.13em;font-size:.98rem;line-height:1.2}
.cg span{display:block;font-size:.88rem;line-height:1.7;color:var(--ink-2);
  margin-top:.6rem}

/* ---- FOUR PILLARS ------------------------------------------------ */
.pill4{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.4rem,3vw,2.4rem);max-width:var(--measure);margin:0 auto}
.pl__n{display:block;font-family:var(--title);font-size:.8rem;letter-spacing:.2em;
  color:var(--pop);margin-bottom:.9rem;font-variant-numeric:tabular-nums}
.pl b{display:block;font-weight:400;font-size:1.05rem;line-height:1.3}
.pl span:last-child{display:block;font-size:.9rem;line-height:1.75;color:var(--ink-2);
  margin-top:.5rem}

/* ---- HOW IT WORKS ------------------------------------------------ */
.how3{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.4rem,3vw,2.4rem);max-width:var(--measure);margin:0 auto}
.h3c b{display:block;font-weight:400;font-size:1.05rem;line-height:1.3}
.h3c span{display:block;font-size:.9rem;line-height:1.75;color:var(--ink-2);
  margin-top:.5rem}
.h3c a{display:inline-block;margin-top:.9rem;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--pop);padding-bottom:.22rem}
.h3c a:after{content:" \2192"}

/* ---- MOVEMENT ---------------------------------------------------- */
.hp-move__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.5rem);align-items:center;max-width:var(--measure);margin:0 auto}
.hp-move__p{font-size:1rem;line-height:1.8;color:var(--ink-2);margin:1.2rem 0 0}
.hp-move__in h2{margin:0;font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:.06em;
  line-height:1.15}
.hp-move__img{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.hp-move__img img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){.hp-move__in{grid-template-columns:1fr}
  .hp-move__img{aspect-ratio:16/10}}

/* ---- LEARN CATEGORIES -------------------------------------------- */
.lcats{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;
  max-width:52rem;margin:0 auto}
.lcats a{background:var(--white);border:1px solid var(--rule);border-radius:999px;
  padding:.6rem 1.15rem;font-size:.86rem;color:var(--ink);text-decoration:none;
  transition:border-color .16s ease,background .16s ease}
.lcats a:hover{border-color:var(--ink-2);background:var(--cream)}

/* ---- CARRIERS on the how section --------------------------------- */
.hp-carriers{max-width:var(--measure);margin:clamp(2rem,4vw,3rem) auto 0}
.cpret{font-family:var(--body);font-size:.92rem;color:var(--ink-2);text-align:center;margin:1.1rem 0 0}
.cpret a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--pop)}
.cpret a:hover{color:var(--pop)}
/* cpret-on-photo-hero */
.lede .cpret{color:rgba(255,255,255,.9)}
.lede .cpret b{color:#FFFFFF}
.lede .cpret a{color:#FFFFFF;border-bottom-color:rgba(255,255,255,.65)}
.lede .cpret a:hover{color:var(--pop2);border-bottom-color:var(--pop2)}
.lede--grad .cpret{color:var(--ink-2)}
.lede--grad .cpret b{color:var(--ink)}
.lede--grad .cpret a{color:var(--ink);border-bottom-color:var(--pop)}
.lede--grad .cpret a:hover{color:var(--pop);border-bottom-color:var(--pop)}