/* HOVER ACCENT */
/* Five bright accents were tried and each one failed the same way: the palette
   has no vacancy. Coral already holds the one bright warm accent slot, so a new
   colour either reads as a faded copy of coral (apricot, melon) or arrives from
   outside the brand (marigold, pink). Blush had no chroma left to register.
   So the hover uses coral itself. Nothing new enters the palette, and a button
   turning brand coral reads as ours rather than as a borrowed effect.
   Ink text on coral is 4.9:1, clear of AA for the .64rem label.
   One token. Change --hov to restyle every hover on the site. */
:root{--hov:#EF8367}
.nav .book:hover,.nav .book:focus-visible,
.drop .drop__cta:hover,.drop .drop__cta:focus-visible,
.btn--f:hover,.btn--f:focus-visible,
.btn--o:hover,.btn--o:focus-visible,
.hero--full .btn--f:hover,.hero--full .btn--f:focus-visible,
.nav .ret a:hover,.nav .ret a:focus-visible,
.drop .da .drop__ret:hover,.drop .da .drop__ret:focus-visible,
.drop__ret:hover,.drop__ret:focus-visible,
.route:hover,.route:focus-visible,
.sheet__box .sdoor:hover,.sheet__box .sdoor:focus-visible,
.pml a:hover,
.sbtn:hover,.sbtn:focus-visible{
  background:var(--hov)!important;
  border-color:var(--hov)!important;
  color:var(--ink)!important}
/* the outlined variants keep their edge visible on light grounds */
.btn--o:hover,.btn--o:focus-visible,
.drop .da .drop__ret:hover,.drop .da .drop__ret:focus-visible{
  border-color:var(--ink)!important}


/* ---- NAV: FULL-WIDTH BAR (was menu-only, 30 Sep 2026) ------------
   The old nav hid every link behind the burger at EVERY width, on
   purpose. That reads as a boutique studio. A women's healthcare
   practice wants its care areas visible without a click, so this is
   a flat bar with the links exposed on desktop.

   Type is sentence case at .86rem, not .66rem uppercase tracked to
   .2em. Tiny spaced caps read as fashion; sentence case reads as
   healthcare, and it is the bigger half of this change.
   ------------------------------------------------------------- */
.nav--bar{position:sticky;top:0;z-index:60;width:100%;max-width:none;margin:0;
  border-radius:0;box-shadow:none;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.2rem);
  padding:.9rem clamp(1.1rem,3vw,2.2rem)}
.nav--bar .nav__wm{flex:none;display:block}
.nav--bar .wm{height:14px;width:113px}

.nav--bar .nav__l{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.9rem);
  flex:1;margin:0}
.nav--bar .nav__l a{font-family:var(--body);font-weight:400;font-size:.86rem;
  letter-spacing:.005em;text-transform:none;color:var(--ink);white-space:nowrap;
  padding:.35rem 0;border-bottom:1px solid transparent}
.nav--bar .nav__l > a:hover,.nav--bar .nv > a:hover{border-bottom-color:var(--pop)}

.nav--bar .nav__r{display:flex;align-items:center;gap:1rem;flex:none;margin-left:auto}
.nav__tel{font-family:var(--body);font-size:.84rem;color:var(--ink-2);
  text-decoration:none;white-space:nowrap}
.nav__tel:hover{color:var(--ink)}
.nav--bar .book{background:var(--ink);color:var(--white);border-radius:999px;
  padding:.62rem 1.25rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap}
.nav--bar .book:hover{background:#2b2110}

/* ---- CARE DROPDOWN ----------------------------------------------- */
.nav--bar .nv{position:relative}
/* Anchored to the link's left edge, not centred on it: centring a
   46rem panel on a link 190px from the viewport edge pushed the
   first column off-screen. */
.ndrop{position:absolute;left:0;transform:translateY(6px);
  top:calc(100% + .9rem);width:min(46rem,calc(100vw - 3rem));background:var(--white);
  border:1px solid var(--rule);border-radius:14px;padding:1.2rem;
  box-shadow:0 24px 60px -28px rgba(31,24,9,.4);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nv:hover .ndrop,.nv:focus-within .ndrop{opacity:1;visibility:visible;
  pointer-events:auto;transform:translateY(0)}
.nd__g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.2rem}
.nd__i{display:block;padding:.65rem .7rem;border-radius:9px;text-decoration:none;
  color:var(--ink)}
.nd__i:hover{background:var(--cream)}
.nd__i b{display:block;font-weight:400;font-size:.88rem;line-height:1.3}
.nd__i span{display:block;font-size:.74rem;line-height:1.45;color:var(--ink-3);
  margin-top:.18rem}
.nd__i--lead{background:var(--tint)}
.nd__i--lead b{color:var(--ink)}
.nd__f{display:block;margin:.9rem .7rem 0;padding-top:.9rem;
  border-top:1px solid var(--rule);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);text-decoration:none}
.nd__f:after{content:" \2192"}

/* ---- BELOW 1040px: burger takes over ----------------------------- */
.nav--bar .burger{display:none}
@media(max-width:1040px){
  .nav--bar .nav__l{display:none}
  .nav--bar .nav__tel{display:none}
  .nav--bar .burger{display:block;order:3;margin-left:.6rem}
  .nav--bar .nav__r{order:2}
}
@media(prefers-reduced-motion:reduce){.ndrop{transition:none}}

/* ---- SQUARED BUTTONS (was pills, 30 Sep 2026) --------------------
   Pills read wellness-app. Squared reads editorial and clinical,
   which is where the serif hero and the flat nav bar already point.
   Appended last so it wins on source order without touching the
   original .btn rule.

   The LEARN category chips are squared with them: buttons as
   rectangles next to chips as pills on the same page looks like an
   oversight rather than a decision.

   If 0 feels too hard, 2px is the one number to change. Panels and
   cards keep their generous radii, so the contrast is deliberate:
   soft containers, sharp actions. --------------------------------- */
.btn,
.nav--bar .book,
.lcats a{border-radius:0}

/* squared edges make the same padding feel tighter, so a touch more
   horizontal room */
.btn{padding:.95rem 2.2rem}
.nav--bar .book{padding:.68rem 1.4rem}

/* ---- FOOTER: FOUR LABELLED COLUMNS (30 Sep 2026) -----------------
   Was one undifferentiated list of fourteen links. Fourteen links
   with no headings is a sitemap, not a footer: nobody scans it, so
   the ones that matter get the same weight as /terms.

   Kept blush, NOT dark. Oula's footer is dark; this site's own rule
   is that the page never goes dark, it fades out instead, and that
   is a brand decision rather than an oversight. Say the word if you
   want it inverted.

   The signup form markup is untouched: the honeypot and the
   unchecked consent box are compliance-critical and are not
   restyling material. ------------------------------------------- */
.foot--cols{padding-top:clamp(2.5rem,5vw,4rem)}
.foot--cols .foot__top{display:none}

.ft__sign{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)
  clamp(2rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.2rem,4vw,3rem);align-items:center;
  border-bottom:1px solid rgba(31,24,9,.16)}
.ft__k{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .5rem}
.ft__sign__h{font-family:var(--title);font-weight:400;text-transform:uppercase;
  letter-spacing:.12em;font-size:clamp(1.05rem,2.2vw,1.4rem);line-height:1.2;margin:0}
.ft__sign .sign{margin:0}
@media(max-width:760px){.ft__sign{grid-template-columns:1fr}}

.ft__cols{max-width:var(--measure);margin:0 auto;padding:clamp(2rem,4vw,3rem)
  var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.4rem,3vw,2.4rem)}
@media(max-width:860px){.ft__cols{grid-template-columns:repeat(2,1fr);
  gap:2rem clamp(1.4rem,4vw,2.4rem)}}
@media(max-width:460px){.ft__cols{grid-template-columns:1fr}}
.ft__h{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .9rem}
.ft__c a{display:block;font-size:.88rem;line-height:1.45;color:var(--ink);
  text-decoration:none;padding:.32rem 0}
.ft__c a:hover{text-decoration:underline;text-underline-offset:3px}
.ft__addr{font-style:normal}
.ft__addr a{padding:.32rem 0}
.ft__fax,.ft__st{display:block;font-size:.84rem;line-height:1.55;color:var(--ink-2);
  padding:.32rem 0}
.ft__st{margin-top:.4rem}
/* the footer grid made this block-level, so it stretched the whole
   column; keep it sized to its own label */
.foot--cols .appdl{margin-top:1rem;display:inline-flex;align-items:center;
  width:auto;align-self:start}

/* ---- SQUARED: the signup field and button were still pills ------- */
.sign input,
.sign button,
.appdl,
.nd__i{border-radius:0}

/* ---- NAV LOGO: bigger, and set apart ----------------------------
   Was 14px tall, which left the wordmark visually smaller than the
   nav links beside it, so it read as another menu item rather than
   the brand. Now 19px with real separation before the links. ----- */
.nav--bar .wm{height:19px;width:153.5px}
.nav--bar .nav__wm{margin-right:clamp(1rem,3vw,2.4rem)}
@media(max-width:1040px){.nav--bar .wm{height:16px;width:129.3px}}

/* ==================================================================
   HOMEPAGE v4 — "healthcare first, movement later"   30 Sep 2026
   Lily's 12-section rhythm and copy, and her 6-item IA.

   The thesis of this layout: the first 60–70% of the page is
   unmistakably healthcare. Movement arrives at section 6 as a
   reveal, not as a second business offered alongside the first.

   THREE RULES THIS SHEET FOLLOWS, all hers:
   1. Every pink and coral carries INK text, never white.
   2. The page never goes dark; it fades out instead.
   3. Almost no icons. Where a medical site would put an icon grid,
      this puts type and photography.
   ================================================================== */

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

/* ---- PHOTO WELL ---------------------------------------------------
   An honest, designed slot rather than a grey box or the same five
   photos used eighteen times. It states its own crop so the shoot
   list writes itself. Deleting .well and dropping an <img> in its
   place is the whole handoff. -------------------------------------- */
.well{display:grid;place-items:center;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#F7E7E3 0%,#EFD6CF 55%,#E6C4BA 100%)}
.well:after{content:"";position:absolute;inset:.6rem;
  border:1px solid rgba(31,24,9,.16)}
.well__l{position:relative;z-index:1;font-family:var(--body);font-size:.58rem;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(31,24,9,.5);
  text-align:center;line-height:1.7;padding:0 1rem}
.well img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- 1 · HERO ----------------------------------------------------
   Full-bleed image, type over a gradient scrim. Sized to what it
   holds rather than to the viewport, so the credibility strip is
   already in the first frame. ------------------------------------ */
.lede{position:relative;display:grid;place-items:end center;
  min-height:min(78vh,42rem);overflow:hidden;
  margin-top:calc(-1 * (59.8px + 13.6px))}
.lede__bg{position:absolute;inset:0}
.lede__bg img{width:100%;height:100%;object-fit:cover;display:block}
.lede:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,24,9,.30) 0%,rgba(31,24,9,.22) 42%,
    rgba(31,24,9,.66) 100%)}
.lede__c{position:relative;z-index:2;text-align:center;color:#FFFFFF;
  max-width:52rem;margin:0 auto;
  padding:clamp(9rem,16vw,12rem) clamp(1.2rem,5vw,3rem) clamp(3rem,6vw,4.2rem)}
.lede__k{font-family:var(--body);font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.86);margin:0 0 1.4rem;
  line-height:1.9}
.lede__h{color:#FFFFFF;font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:400;text-transform:none;
  font-size:clamp(2.4rem,6.2vw,4.3rem);letter-spacing:-.015em;
  line-height:1.12;margin:0;text-wrap:balance}
.lede__p{color:rgba(255,255,255,.93);font-size:clamp(1rem,1.85vw,1.14rem);
  line-height:1.75;margin:1.5rem auto 0;max-width:40rem}
.lede .acts{margin-top:2.1rem}
.lede .btn--f{background:#FFFFFF;color:var(--ink)}
.lede .btn--f:hover{background:var(--tint);color:var(--ink)}
.lede .btn--o{border-color:rgba(255,255,255,.82);color:#FFFFFF;background:transparent}
.lede .btn--o:hover{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}

@media(max-width:760px){
  /* Type moves onto a quiet ground rather than sitting over a face,
     the same move the old lede made and the one thing about it that
     was right. */
  .lede{min-height:auto;margin-top:calc(-1 * (56px + 9.6px));
    place-items:stretch;
    background:linear-gradient(168deg,#FDF6F4 0%,#F8E4DE 34%,#EFCEC5 68%,#E3B4A8 100%)}
  .lede:after{display:none}
  .lede__bg{position:relative;inset:auto;height:32vh;order:2}
  .lede__c{color:var(--ink);padding:6.5rem 1.2rem 2.4rem;order:1}
  .lede__h,.lede__k{color:var(--ink)}
  .lede__p{color:var(--ink-2)}
  .lede__k{color:var(--ink-3)}
  .lede .btn--f{background:var(--ink);color:var(--cream)}
  .lede .btn--o{border-color:var(--ink);color:var(--ink)}
}

/* ---- credibility strip ------------------------------------------
   One line that answers "what kind of healthcare is this". A
   marquee on small screens because eight terms will not fit and
   wrapping them to four lines destroys the thinness that makes the
   strip work. ---------------------------------------------------- */
.cred{background:var(--ink);color:var(--cream);overflow:hidden;
  padding:.95rem 0;position:relative;z-index:3}
.cred__in{display:flex;justify-content:center;flex-wrap:wrap;
  gap:.2rem 1.5rem;padding:0 var(--gutter);
  font-family:var(--body);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(253,246,244,.9)}
.cred__in span{white-space:nowrap}
@media(max-width:900px){
  .cred__in{flex-wrap:nowrap;justify-content:flex-start;padding:0;
    width:max-content;animation:credslide 34s linear infinite}
  .cred:hover .cred__in{animation-play-state:paused}
}
@keyframes credslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .cred__in{animation:none;flex-wrap:wrap;width:auto;padding:0 var(--gutter)}
}

/* ---- 2 · POSITIONING STATEMENT -----------------------------------
   Almost manifesto-like, so almost nothing on the page but type.
   The middle paragraph is deliberately set smaller than the two
   statements that bracket it: it is evidence, not thesis. -------- */
.mani{padding:clamp(4.5rem,11vw,9rem) var(--gutter)}
.mani__in{max-width:44rem;margin:0 auto;text-align:center}
.mani__h{font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;letter-spacing:-.015em;
  font-size:clamp(1.8rem,4.4vw,3.05rem);line-height:1.2;margin:0;
  text-wrap:balance}
.mani__p{font-size:1.02rem;line-height:1.95;color:var(--ink-2);
  margin:2rem auto 0;max-width:38rem}
.mani__cl{font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;letter-spacing:-.01em;
  margin:2.2rem 0 0;color:var(--ink)}
.mani__go{display:inline-block;margin:2.4rem 0 0;font-family:var(--body);
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--pop);padding-bottom:.3rem}
.mani__go:after{content:" →"}
.mani__go:hover{border-bottom-color:var(--ink)}

/* ---- section furniture ------------------------------------------- */
.shead{max-width:var(--measure);margin:0 auto clamp(2.4rem,5vw,3.6rem)}
.shead--c{text-align:center;max-width:44rem}
.shead__k{font-family:var(--body);font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 1.1rem}
.shead__h{font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;letter-spacing:-.012em;
  font-size:clamp(1.7rem,3.9vw,2.7rem);line-height:1.2;margin:0;
  text-wrap:balance}
.shead__p{font-size:1rem;line-height:1.8;color:var(--ink-2);margin:1.1rem 0 0;
  max-width:38rem}
.shead--c .shead__p{margin-left:auto;margin-right:auto}

/* ---- 3 · FIND YOUR CARE -----------------------------------------
   Editorial cards, not service boxes. Six of them in a 3-up grid:
   six divides cleanly by three and by two, so no row ever orphans.
   Pinned to a track count rather than auto-fit for that reason. -- */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.3rem,2.6vw,2.2rem);max-width:var(--measure);margin:0 auto}
@media(max-width:940px){.ccards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ccards{grid-template-columns:1fr}}
.cc{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:transparent}
.cc__img,.cc .well{aspect-ratio:4/5}
.cc__img{overflow:hidden}
.cc__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cc:hover .cc__img img{transform:scale(1.035)}
.cc__h{font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:1.2rem;line-height:1.25;letter-spacing:-.01em;margin:1.2rem 0 0}
.cc__p{font-size:.92rem;line-height:1.7;color:var(--ink-2);margin:.55rem 0 0}
.cc__go{margin-top:.9rem;font-family:var(--body);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  display:inline-block;border-bottom:1px solid transparent;padding-bottom:.25rem}
.cc__go:after{content:" →"}
.cc:hover .cc__go{color:var(--ink);border-bottom-color:var(--pop)}
.ccards__end{text-align:center;margin:clamp(2.4rem,4.5vw,3.4rem) 0 0}

/* ---- 4 · FOR EVERY SEASON ---------------------------------------
   Horizontally scrollable, as she asked. A rail rather than a grid
   because the five seasons are a sequence through a life, and a
   grid would present them as five unrelated options. The last card
   gets a right-hand spacer so the rail does not end flush against
   the viewport edge, which reads as clipped rather than scrollable.
   ---------------------------------------------------------------- */
.seasons{background:var(--tint)}
.rail{display:flex;gap:clamp(1rem,2vw,1.5rem);overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:.4rem var(--gutter) 1.6rem;margin:0 calc(-1 * var(--gutter));
  scrollbar-width:thin}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-track{background:rgba(31,24,9,.1)}
.rail::-webkit-scrollbar-thumb{background:rgba(31,24,9,.34)}
.rail:after{content:"";flex:0 0 1px}
.sn{flex:0 0 min(20rem,74vw);scroll-snap-align:start;
  display:flex;flex-direction:column;background:var(--white);
  text-decoration:none;color:var(--ink);
  transition:box-shadow .22s ease}
.sn:hover{box-shadow:0 14px 34px -20px rgba(31,24,9,.42)}
.sn__img,.sn .well{aspect-ratio:3/4}
.sn__t{padding:1.5rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.sn__h{font-family:var(--title);font-weight:400;text-transform:uppercase;
  letter-spacing:.13em;font-size:1rem;line-height:1.2;margin:0}
/* The chain is the point of the section: it shows that a season is
   an assembly of clinical services, not a single appointment. */
.sn__ch{margin:1rem 0 0;font-size:.85rem;line-height:1.85;color:var(--ink-2)}
.sn__ch b{font-weight:400;color:var(--ink)}
.sn__ch i{font-style:normal;color:var(--pop);padding:0 .3rem}
.sn__go{margin-top:auto;padding-top:1.3rem;font-family:var(--body);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.sn__go:after{content:" →"}
.sn:hover .sn__go{color:var(--ink)}
.rail__note{max-width:var(--measure);margin:0 auto;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding-top:.4rem}
.seasons__end{text-align:center;margin:clamp(2rem,4vw,2.8rem) 0 0}

/* ---- 5 · THE EMBODY MODEL ---------------------------------------
   Four oversized statements, no icons, as she asked. Numbered
   because the four are a sequence of claims rather than a set of
   features, and the numbers let the eye find its place in a block
   of large type. -------------------------------------------------- */
.model{}
.m4{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(2rem,4.5vw,3.6rem) clamp(2.2rem,5vw,4.5rem);
  max-width:var(--measure);margin:0 auto}
@media(max-width:800px){.m4{grid-template-columns:1fr}}
.m4 > div{border-top:1px solid var(--rule);padding-top:1.6rem}
.m4__n{display:block;font-family:var(--title);font-size:.76rem;
  letter-spacing:.2em;color:var(--pop);margin:0 0 1rem;
  font-variant-numeric:tabular-nums}
.m4__h{font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:clamp(1.3rem,2.7vw,1.75rem);line-height:1.22;letter-spacing:-.012em;
  margin:0}
.m4__p{font-size:.95rem;line-height:1.8;color:var(--ink-2);margin:.85rem 0 0}
.model__end{margin:clamp(2.6rem,5vw,3.8rem) auto 0;max-width:var(--measure)}

/* ---- 6 · MOVEMENT REVEAL ----------------------------------------
   Deliberately unlike every other section: full-bleed photograph,
   type inside it. This is the "wait, their clinic has a studio?"
   moment, and it only lands if the section looks like it belongs to
   a different kind of company for a second. --------------------- */
.reveal{position:relative;overflow:hidden;display:grid;place-items:center;
  min-height:min(70vh,38rem)}
.reveal__bg{position:absolute;inset:0}
.reveal__bg img{width:100%;height:100%;object-fit:cover;display:block}
.reveal:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,24,9,.52),rgba(31,24,9,.62))}
.reveal__c{position:relative;z-index:2;max-width:46rem;text-align:center;
  color:#FFFFFF;padding:clamp(4rem,9vw,7rem) clamp(1.2rem,5vw,3rem)}
.reveal__k{font-family:var(--body);font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 1.3rem}
.reveal__h{color:#FFFFFF;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.18;
  letter-spacing:-.015em;margin:0;text-wrap:balance}
.reveal__p{color:rgba(255,255,255,.92);font-size:1rem;line-height:1.8;
  margin:1.4rem auto 0;max-width:36rem}
.reveal__d{margin:1.8rem 0 0;font-family:var(--body);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);
  line-height:2}
.reveal .btn--f{background:#FFFFFF;color:var(--ink)}
.reveal .btn--f:hover{background:var(--tint)}
.reveal .btn--o{border-color:rgba(255,255,255,.82);color:#FFFFFF;background:transparent}
.reveal .btn--o:hover{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}

/* ---- 7 · CARE TEAM ---------------------------------------------- */
.team4{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.5vw,2rem);max-width:var(--measure);margin:0 auto}
@media(max-width:800px){.team4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team4{grid-template-columns:1fr}}
.tm{display:flex;flex-direction:column}
.tm__img,.tm .well{aspect-ratio:1/1}
.tm__n{font-family:var(--title);font-weight:400;text-transform:uppercase;
  letter-spacing:.12em;font-size:.98rem;line-height:1.25;margin:1.1rem 0 0}
.tm__r{font-size:.88rem;line-height:1.7;color:var(--ink-2);margin:.4rem 0 0}
.team__end{text-align:center;margin:clamp(2.4rem,4.5vw,3.2rem) 0 0}

/* ---- 8 · IN PERSON + VIRTUAL -----------------------------------
   A true duo, edge to edge. Two halves with equal weight because
   neither is the lesser option. --------------------------------- */
.duo{display:grid;grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.dh{position:relative;display:grid;align-content:end;min-height:min(58vh,30rem);
  overflow:hidden}
.dh__bg{position:absolute;inset:0}
.dh__bg img{width:100%;height:100%;object-fit:cover;display:block}
.dh:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,24,9,.12) 40%,rgba(31,24,9,.68) 100%)}
.dh__c{position:relative;z-index:2;color:#FFFFFF;
  padding:clamp(2.4rem,5vw,3.6rem) clamp(1.5rem,4vw,3rem)}
.dh__k{font-family:var(--body);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 .9rem}
.dh__h{color:#FFFFFF;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.18;
  letter-spacing:-.012em;margin:0}
.dh__p{color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.75;
  margin:.9rem 0 0;max-width:26rem}
.dh .btn{margin-top:1.6rem}
.dh .btn--o{border-color:rgba(255,255,255,.85);color:#FFFFFF;background:transparent}
.dh .btn--o:hover{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}

/* ---- 9 · LEARN --------------------------------------------------
   Editorial, not a blog widget. The category sits above the
   headline and the headline is the question a person actually
   typed into Google. ---------------------------------------------- */
.arts{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.3rem,2.6vw,2.2rem);max-width:var(--measure);margin:0 auto}
@media(max-width:860px){.arts{grid-template-columns:1fr}}
.art{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.art__img,.art .well{aspect-ratio:3/2}
.art__img{overflow:hidden}
.art__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.art:hover .art__img img{transform:scale(1.035)}
.art__cat{font-family:var(--body);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pop);margin:1.2rem 0 0}
.art__h{font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:1.18rem;line-height:1.32;letter-spacing:-.008em;margin:.6rem 0 0}
.art:hover .art__h{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:var(--rule)}
.learn__end{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem;
  justify-content:center;margin:clamp(2.4rem,4.5vw,3.2rem) 0 0}
.learn__sub{font-family:var(--body);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:.3rem}
.learn__sub:after{content:" →"}
.learn__sub:hover{color:var(--ink);border-bottom-color:var(--pop)}

/* ---- 10 · COMMUNITY --------------------------------------------- */
.comm__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.6rem);align-items:center;
  max-width:var(--measure);margin:0 auto}
@media(max-width:820px){.comm__in{grid-template-columns:1fr}}
.comm__img,.comm .well{aspect-ratio:16/11}
/* The lone button in this band was the only centered thing on the
   homepage; everything else in the column is left aligned. */
.comm .acts--l{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-start;
  margin-top:1.8rem}

/* ---- 11 · ACCESS ------------------------------------------------- */
.acc3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);
  max-width:var(--measure);margin:0 auto}
@media(max-width:760px){.acc3{grid-template-columns:1fr}}
.ac{background:var(--white);padding:1.7rem 1.6rem 1.8rem}
.ac b{display:block;font-family:var(--title);font-weight:400;
  text-transform:uppercase;letter-spacing:.13em;font-size:.94rem;line-height:1.2}
.ac span{display:block;font-size:.9rem;line-height:1.72;color:var(--ink-2);
  margin-top:.65rem}
.acc__end{max-width:var(--measure);margin:clamp(2.2rem,4vw,3rem) auto 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
  justify-content:space-between;
  border-top:1px solid var(--rule);padding-top:clamp(1.6rem,3vw,2.2rem)}
.acc__ask{font-size:1rem;line-height:1.7;color:var(--ink);margin:0;max-width:30rem}
.acc__ask em{font-style:normal;display:block;color:var(--ink-2);font-size:.92rem;
  margin-top:.3rem}

/* ---- 12 · FINAL CTA ---------------------------------------------
   Full-width, and the page's one deliberate flood of blush. It
   fades out rather than going dark, per her standing rule. ------ */
.endcta{background:linear-gradient(170deg,#FDF6F4 0%,#F7E7E3 48%,#EFD3CB 100%);
  padding:clamp(4.5rem,10vw,8rem) var(--gutter);text-align:center}
.endcta__in{max-width:40rem;margin:0 auto}
.endcta__h{font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;letter-spacing:-.018em;
  font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.08;margin:0}
.endcta__p{font-size:1.02rem;line-height:1.85;color:var(--ink-2);
  margin:1.4rem auto 0;max-width:34rem}
.endcta .acts{margin-top:2.1rem}
.endcta__alt{margin:1.8rem 0 0;font-size:.9rem;color:var(--ink-2)}
.endcta__alt a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--pop);padding-bottom:.18rem}

/* ==================================================================
   NAVIGATION — her 6-item IA
   Care | For Every Season | Movement | Learn | About | Book a Visit
   ================================================================== */

/* Care is a mega-menu: nine services in one column would be a
   scroll, and a person who already knows she needs pelvic floor
   therapy should see it without one. Three columns of three. */
.ndrop--mega{width:min(56rem,calc(100vw - 3rem))}
.ndrop--mega .nd__g{grid-template-columns:repeat(3,1fr)}
.ndrop--mid{width:min(42rem,calc(100vw - 3rem))}
.ndrop--mid .nd__g{grid-template-columns:repeat(2,1fr)}
.ndrop--sm{width:min(25rem,calc(100vw - 3rem))}
.ndrop--sm .nd__g{grid-template-columns:1fr}
/* A dropdown on a right-hand link would run off the screen if it
   opened leftward from its own edge, so About opens rightward. */
/* About used to open rightward to clear the viewport edge. With six
   nav items instead of nine it sits far enough from the right that a
   25rem panel fits, so it opens left like every other menu. */
.nd__ov{display:block;padding:.85rem 1rem;text-decoration:none;
  background:var(--cream);margin-bottom:.4rem}
.nd__ov b{display:block;font-family:var(--title);font-weight:400;
  text-transform:uppercase;letter-spacing:.12em;font-size:.86rem;color:var(--ink)}
.nd__ov span{display:block;font-size:.8rem;line-height:1.6;color:var(--ink-2);
  margin-top:.25rem}
.nd__ov:hover{background:var(--tint)}

/* ---- MOBILE DRAWER ---------------------------------------------
   Not a shrunken mega-menu. Built around what a person on a phone
   is most likely to be doing. ----------------------------------- */
.drop--ia{padding:0}
.dia{max-height:min(74vh,42rem);overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:1.1rem var(--gutter) 1.4rem}
.dsec{border-top:1px solid var(--rule);padding:1.1rem 0}
.dsec:first-child{border-top:0;padding-top:.2rem}
.dsec__h{font-family:var(--title);font-weight:400;text-transform:uppercase;
  letter-spacing:.2em;font-size:.72rem;color:var(--ink-3);margin:0 0 .5rem}
.dsec__ov{display:block;font-family:var(--body);font-size:.92rem;
  color:var(--ink);text-decoration:none;padding:.5rem 0;
  border-bottom:1px solid var(--rule);margin-bottom:.35rem}
.dsec__ov:after{content:" →"}
.dsec a:not(.dsec__ov){display:block;padding:.46rem 0;font-size:.95rem;
  color:var(--ink-2);text-decoration:none}
.dsec a:not(.dsec__ov):hover{color:var(--ink)}
.dia__acts{border-top:1px solid var(--rule);padding-top:1.2rem;margin-top:.4rem;
  display:grid;gap:.6rem}
.dia__acts .btn{width:100%;text-align:center}
.dia__tel{display:block;text-align:center;padding-top:1rem;font-size:.86rem;
  color:var(--ink-2);text-decoration:none}

/* ---- MOBILE STICKY BOTTOM BAR ----------------------------------
   Care | For Every Season | Movement | Book. Her spec said
   Care | Movement | Learn | Book; Learn is swapped for Season
   because Season is the page most likely to convert a reader who
   arrived on an article, and Learn is where she already is. Four
   equal taps, Book emphasised. ---------------------------------- */
.tabbar{display:none}
/* OUTSIDE the media query on purpose. This is the <defs> sprite the
   tab bar's icons reference, and it is in the markup at every width.
   Styled only inside the bar's breakpoint, it reverts to an inline
   svg's default 300x150 box above that breakpoint and drops a blank
   gap into every desktop page. */
.tabi__sprite{position:absolute;width:0;height:0;overflow:hidden}
/* 760, not 1180. It used to run to the burger breakpoint, which meant
   a half-screen laptop window got a phone's bottom bar: five big taps
   eating 66px of a window that already has the full header, with a
   Book button sitting right there in it. A thumb bar is for thumbs.

   The styling still lives inside the same query that reveals it, so
   the bar can never appear unstyled at a width the rules do not
   reach, which is what the old 1180 was guarding against. */
/* 760 on the web, ANY width in the installed app.

   On the web this used to run to the burger breakpoint, which meant a
   half-screen laptop window got a phone's bottom bar: five big taps
   eating 66px of a window that already has the full header, with a
   Book button sitting right there in it. A thumb bar is for thumbs.

   Inside the installed app there is no browser chrome and no address
   bar, so this bar is the only navigation there is. It shows at every
   width in standalone, including an iPad or a desktop install.

   STRUCTURE. Everything below is unconditional styling on a bar that
   is display:none by default; only the two reveals at the end turn it
   on. The styling used to sit inside the width query, which meant any
   second way of revealing the bar would have shown it completely
   unstyled, as blue underlined links in the corner. That exact bug
   has already happened once on this site. */
  /* ---- Bleeding into the page, 3 Oct ---------------------------
     This used to be an opaque slab with a 1px rule across the top and
     a 1px rule between every cell. Five boxed cells in a row is the
     shape of a toolbar, and the hard top edge cut the page off rather
     than ending it, so the bar read as something bolted onto the site
     rather than the bottom of it.

     Three changes, in order of how much they mattered:

     1. THE CELL DIVIDERS ARE GONE. They were doing no work: the icons
        and labels already separate the taps, and the lines were the
        single thing making it look like a table.

     2. THE TOP EDGE IS A FADE, NOT A RULE. The ::before below is a
        28px gradient sitting directly above the bar, running from
        transparent to the bar's own colour, so the page dissolves
        into the bar instead of being cropped by it. The hairline
        stays but at roughly a third of its old weight, as a hint of
        an edge rather than a border.

     3. IT IS TRANSLUCENT, BUT ONLY JUST. The first pass ran .82 alpha
        with an 18px blur, the iOS recipe. It failed here: this site's
        headings are 2rem serif, so they stayed legible straight
        through the bar and turned the labels to mud. The blending now
        comes from the fade above rather than from see-through, and
        the ground sits at .94, which still moves with the page behind
        it without costing the labels their contrast. Where the blur
        is unsupported it goes fully opaque. */
  .tabbar{grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(253,246,244,.98);
    padding-bottom:env(safe-area-inset-bottom,0)}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .tabbar{background:rgba(253,246,244,.94);
      -webkit-backdrop-filter:blur(20px) saturate(150%);
      backdrop-filter:blur(20px) saturate(150%)}
  }
  /* The fade. pointer-events:none so it never eats a tap meant for
     the content just above the bar. */
  .tabbar::before{content:"";position:absolute;left:0;right:0;
    bottom:100%;height:40px;pointer-events:none;
    background:linear-gradient(to top,rgba(253,246,244,.94) 12%,
      rgba(253,246,244,.55) 48%,rgba(253,246,244,0))}
  .tabbar::after{content:"";position:absolute;left:0;right:0;top:0;
    height:1px;background:rgba(31,24,9,.05)}
  .tabbar a{display:grid;place-items:center;gap:0;padding:.85rem .3rem;
    font-family:var(--body);font-size:.6rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-2);text-decoration:none;
    line-height:1.3;text-align:center;
    -webkit-tap-highlight-color:transparent}
  /* The pressed state is a soft tint behind the whole tap rather than
     a colour change on the text, so a thumb gets feedback the size of
     the thing it actually hit. */
  .tabbar a:active{background:rgba(239,131,103,.09)}
  .tabbar a.on{color:var(--ink)}
  .tabbar__b{background:var(--pop);color:var(--ink)!important;font-weight:500}

  /* ---- Five taps with icons, 3 Oct ------------------------------
     Icons above the words, not instead of them. An icon alone makes
     people guess, and the two studio taps (Movement, Classes) are
     exactly the pair that guessing gets wrong.

     Strokes, not fills, at 1.6 so they hold up next to Jost's weight
     at this size. vector-effect keeps that stroke at 1.6 whatever the
     viewBox scales to. */
  .tabbar a{grid-template-rows:auto auto;gap:.3rem;padding:.6rem .2rem .55rem;
    align-content:center}
  .tabi{width:23px;height:23px;display:block;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
    vector-effect:non-scaling-stroke;color:var(--ink-2)}
  .tabbar a.on .tabi{color:var(--ink)}
  .tabbar a span{display:block}

  /* ---- The centre tap: the brand swirl ---------------------------
     The real mark, from Embody - brand mark 1.svg in the Brand Marks
     folder on Drive. Two things had to change to make it usable here.

     It is drawn as a FILLED OUTLINE of a hairline: the artwork is a
     closed ribbon about 1.1 units wide on a 178-unit canvas, which is
     0.6% of its width. At the 40px it gets in this bar that is a tenth
     of a pixel, so the mark rendered as nothing at all. The path here
     is the ribbon's centreline, recovered by pairing each point on the
     outline with its partner on the opposite edge, and it is STROKED,
     so the weight is ours to set and survives any size.

     It sits in a coral disc that breaks the top edge of the bar, which
     is what makes a five-tap bar read as having a centre rather than
     as five equal things. The strip behind it is cream, not white, so
     the disc sits on the brand's own ground. */
  .tabbar__home{position:relative}
  /* FLUSH, not lifted. The disc used to break the top edge of the bar
     on a translateY(-13px). It read as a floating button stuck on top
     of the nav rather than part of it, so the lift and the drop shadow
     that sold it are both gone and the disc sits inside the strip. */
  /* Specificity: .tabbar a span above is (0,1,2) and beat a bare
     .tabbar__mark at (0,1,0), forcing display:block back on and
     stranding the mark in the top-left of the disc. Qualified here so
     it wins. */
  .tabbar a span.tabbar__mark{display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;background:var(--pop)}
  /* Explicit height as well as width: with height:auto the inline svg
     takes a taller intrinsic box than its artwork and the mark floats
     out of the top of the disc. viewBox 184 x 116, so height is
     width / 1.586. */
  .tabi--mark{width:27px;height:17px;display:block;fill:none;
    stroke:currentColor;stroke-width:10;stroke-linecap:round;
    color:var(--cream)}
  .tabbar__home:hover .tabbar__mark{background:#E8714F}

/* ---- The two reveals ------------------------------------------
   Phone-width browsers, and the installed app at any width.
   display-mode:fullscreen rides along because Android reports it for
   some install paths. */
@media(max-width:760px){
  .tabbar{display:grid}
  /* The bar covers the bottom of the page, so the page gets that
     height back as padding or the footer's last line is unreachable. */
  body{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom,0px))}
}
@media all and (display-mode:standalone),all and (display-mode:fullscreen){
  .tabbar{display:grid}
  body{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom,0px))}
}
/* A wide install: an iPad, or the app on a desktop. Stretched across a
   1200px window the five taps would be 240px each and nowhere near a
   thumb, so the row is capped and centred, and reads as a dock. The
   fade is dropped there because it only makes sense on a bar that
   spans the full width. */
@media all and (display-mode:standalone) and (min-width:761px),
       all and (display-mode:fullscreen) and (min-width:761px){
  /* width, not just max-width. Fixed + left:50% + right:auto makes the
     box shrink-wrap to its content, which gave a 301px bar with five
     60px taps rather than the intended 544px dock. */
  .tabbar{width:34rem;max-width:calc(100% - 2rem);
    left:50%;right:auto;transform:translateX(-50%);
    border-radius:16px 16px 0 0;overflow:hidden;
    box-shadow:0 -2px 24px -14px rgba(31,24,9,.5)}
  .tabbar::before{display:none}
}

/* ---- FOOTER: four utility columns ------------------------------- */
.ft__cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.ft__cols--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ft__cols--4{grid-template-columns:1fr}}
/* Five since Movement got a column of its own. */
.ft__cols--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.ft__cols--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.ft__cols--5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ft__cols--5{grid-template-columns:1fr}}
.ft__loc{max-width:var(--measure);margin:0 auto;
  border-top:1px solid rgba(31,24,9,.14);
  padding:clamp(1.6rem,3vw,2.2rem) 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.2rem clamp(1.5rem,3vw,2.5rem)}
.ft__loc p{margin:0;font-size:.86rem;line-height:1.75;color:var(--ink-2)}
.ft__loc b{display:block;font-family:var(--title);font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  color:var(--ink-3);margin-bottom:.4rem}
.ft__loc a{color:var(--ink-2);text-decoration:none}
.ft__loc a:hover{color:var(--ink)}

/* ---- fixes found on assembly ------------------------------------- */
/* A .well inside an absolutely positioned bleed needs to be told to
   fill it; as an inline-grid span it would collapse to its label. */
.dh__bg .well{position:absolute;inset:0}
.comm__img{overflow:hidden}
.comm__img img{width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:16/11}
/* Rectangles, per her call. The nav panels were the last rounded
   things left on the page. */
.ndrop,.drop,.nd__ov,.well:after{border-radius:0}
.drop--ia{width:min(24rem,calc(100vw - 2rem))}
/* Section 8 bleeds edge to edge, so it must not inherit .sec padding
   from anything, and the two halves must not show the page ground
   between them. */
.duo{margin:0}

/* ---- section 8, second pass -------------------------------------
   The virtual half had a photo well under a dark scrim, which made
   the well's own label bleed through the headline and turned the
   blush to mud. Virtual care does not need a stock photo of a woman
   on a laptop anyway, so this half becomes a designed panel: blush
   ground, INK type, per the standing rule that no pink on this site
   carries white text. It also gives the pair a real contrast,
   photograph against surface, instead of two photographs. -------- */
.dh--tint{background:linear-gradient(158deg,#FDF6F4 0%,#F7E7E3 46%,#EFD3CB 100%)}
.dh--tint:after{display:none}
.dh--tint .dh__k{color:var(--ink-3)}
.dh--tint .dh__h{color:var(--ink)}
.dh--tint .dh__p{color:var(--ink-2)}
.dh--tint .btn--o{border-color:var(--ink);color:var(--ink);background:transparent}
.dh--tint .btn--o:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
/* The photographed half needs a deeper scrim than a bottom fade:
   band-4 is light at the top, so white type was sitting on near-
   white until the gradient caught up. */
.dh:not(.dh--tint):after{background:linear-gradient(180deg,rgba(31,24,9,.30) 0%,rgba(31,24,9,.34) 38%,rgba(31,24,9,.74) 100%)}
/* The rail now mixes photographs with one honest empty frame for
   the season nobody has shot yet. Both need the same crop or the
   cards stop lining up. */
.sn__img{overflow:hidden;aspect-ratio:3/4}
.sn__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.sn:hover .sn__img img{transform:scale(1.04)}

/* ==================================================================
   NO BLACK BUTTONS                                   30 Sep 2026
   Her call. Every filled button was ink with cream type, which on a
   women's health site reads corporate and, next to Fraunces, a bit
   funereal. Coral is already the brand's one accent, so the primary
   button becomes coral carrying INK type, which is the standing rule
   for every pink and coral on this site. #EF8367 against #1F1809 is
   about 6:1, so it passes on body-size type, not only on large.

   This block is last in the sheet so it wins without !important,
   except where an older hover rule already used !important, and
   those all resolve to blush-with-ink, which is a fine hover for a
   coral button.
   ================================================================== */
.btn--f,
.lede .btn--f,
.reveal .btn--f,
.endcta .btn--f,
.dia__acts .btn--f,
.book,
.nav--bar .book,
.drop__cta,
.sign button{background:var(--pop);color:var(--ink);border-color:var(--pop)}

.btn--f:hover,.btn--f:focus-visible,
.lede .btn--f:hover,
.reveal .btn--f:hover,
.endcta .btn--f:hover,
.book:hover,.nav--bar .book:hover,
.drop__cta:hover,
.sign button:hover{background:#E0684A;color:var(--ink);border-color:#E0684A}

/* The two buttons that sit on photographs keep an outline in white,
   because a coral primary next to a coral outline would flatten the
   pair into one shape. */
.lede .btn--o,.reveal .btn--o,.dh:not(.dh--tint) .btn--o{
  border-color:rgba(255,255,255,.85);color:#FFFFFF;background:transparent}
.lede .btn--o:hover,.reveal .btn--o:hover,.dh:not(.dh--tint) .btn--o:hover{
  background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}

/* ==================================================================
   TIGHTEN THE TRACKING                               30 Sep 2026
   Her call: the spaced-out headings had to go. The sheet inherited
   .22em to .28em letter-spacing on every uppercase label, which is a
   2015 boutique-fitness mannerism. Next to Fraunces, which is set at
   negative tracking, it also read as two unrelated typographic
   systems on one page.

   Uppercase stays, because it is doing structural work, but it comes
   down to about .08em to .1em: enough to keep caps legible, not
   enough to look stretched. Nothing else about the type changes.
   ================================================================== */
.shead__k,.lede__k,.reveal__k,.dh__k,.mani__go,
.cc__go,.sn__go,.col__go,.learn__sub,.art__cat,
.well__l{letter-spacing:.1em}
.btn,.book,.nav--bar .book,.drop__cta,.sign button,
.tabbar a{letter-spacing:.09em}
.sn__h,.tm__n,.ac b,.ft__h,.ft__loc b,.cg b,.nd__ov b{letter-spacing:.05em}
.cred__in{letter-spacing:.08em}
.reveal__d{letter-spacing:.1em}
.m4__n{letter-spacing:.1em}
.dsec__h{letter-spacing:.1em}
.nd__f{letter-spacing:.1em}
.foot__end,.ft__k{letter-spacing:.08em}
/* The strip carries a second, aria-hidden copy of the eight terms so
   the small-screen marquee can loop seamlessly. Above 900px there is
   no marquee, so that copy has to be hidden or the terms simply
   print twice and wrap to two lines. */
@media(min-width:901px){.cred__in span[aria-hidden]{display:none}}
/* Nav set larger, her call. .86rem was sized for a nine-item bar;
   this one has six, so there is room. The gap comes down a little at
   the same time, because six longer labels at 1rem plus the old
   2.2rem gap runs into the phone number just above the breakpoint. */
.nav--bar .nav__l a{font-size:1rem}
.nav--bar{gap:clamp(.9rem,1.9vw,1.7rem)}
.nav--bar .nav__tel{font-size:.86rem}
.nav--bar .book{font-size:.72rem;padding:.75rem 1.5rem}
/* With the links at 1rem the bar overflows between 1040 and about
   1100, which is exactly where a small laptop sits. The whole
   desktop/mobile switch moves up to 1100 so the bar never overflows:
   nav links, phone number, burger and the sticky tab bar all have to
   move together or the page ends up with two navigations at once. */
@media(max-width:1100px){
  .nav--bar .nav__l{display:none}
  .nav--bar .nav__tel{display:none}
  .nav--bar .burger{display:block;order:3;margin-left:.6rem}
  .nav--bar .wm{height:16px;width:129.3px}
}
/* 1100 was still not enough: the bar overflows up to about 1160.
   Rather than keep guessing, the links get a fluid size so they ease
   down between 1180 and 1440 instead of hitting a wall, and the
   switch to the burger moves to 1180. */
.nav--bar .nav__l a{font-size:clamp(.88rem,.55vw + .58rem,1rem)}
@media(max-width:1180px){
  .nav--bar .nav__l{display:none}
  .nav--bar .nav__tel{display:none}
  .nav--bar .burger{display:block;order:3;margin-left:.6rem}
  .nav--bar .wm{height:16px;width:129.3px}
}
/* At 360px the wordmark, the Book button and the burger no longer
   fit on one line. The button loses its padding and the word
   "Visit", since the sticky bar at the bottom already carries a
   full-width Book. */
@media(max-width:400px){
  .nav--bar{gap:.5rem;padding:.8rem 1rem}
  .nav--bar .wm{height:14px;width:113.1px}
  .nav--bar .book{font-size:.62rem;padding:.6rem .85rem;letter-spacing:.06em}
  .nav--bar .nav__wm{margin-right:.4rem}
}
/* The section eyebrows are gone, so the headings now sit directly on
   the section's top padding. Without the eyebrow's 1.1rem of bottom
   margin the whole page reads about 7rem tighter, which is fine, but
   the heading block needs a touch more air under it. */
.shead{margin-bottom:clamp(2.6rem,5.2vw,3.8rem)}
/* The discipline list was inheriting the same size as a caption,
   10.9px, which is too small for the one line on the page that names
   what the studio actually offers. It comes up to about 13px. The
   tracking stays modest: this is a list, not a heading, and the
   general tightening still applies. */
.reveal__d{font-size:.81rem;letter-spacing:.11em;margin-top:2rem}
/* The new copy broke to leave "it." alone on a third line. A
   narrower measure plus pretty wrapping keeps the last line from
   orphaning, and three balanced lines read better here than two
   long ones and a stub. */
.reveal__p{max-width:33rem;text-wrap:pretty}

/* ==================================================================
   TRACKING, SECOND PASS                              30 Sep 2026
   The first pass missed most of what she was seeing, because those
   rules were single-class selectors and the base sheet beats them.

   THE REAL BUG: .shead__h declares -.012em but renders at +.080em.
   A base rule of the shape ".sec h2" (0,1,1) outranks ".shead__h"
   (0,1,0), so the SEVEN largest headings on the page, at 54px, were
   the only Fraunces headings on the site with positive tracking.
   Every other headline was already negative. That is why it read as
   "some of the headings" rather than all of them.

   Fix is doubled class names, which raises specificity to (0,2,0)
   without spraying !important through the sheet and without my
   having to guess at each base selector.

   The footer and drawer links were also sitting at .20em uppercase,
   which is a link list set like a luxury lookbook.
   ================================================================== */

/* The headings. This is the one that was actually wrong. */
.shead__h.shead__h{letter-spacing:-.012em}
.ft__sign__h.ft__sign__h{letter-spacing:.02em}

/* Buttons: the first pass set .09em on .btn and lost to the base. */
.btn.btn,.book.book,.drop__cta.drop__cta,
.sign button,.dia__tel.dia__tel{letter-spacing:.09em}

/* Link lists. 29 footer links and 28 drawer links at .20em. */
.ft__c a,.dsec a,.dsec__ov.dsec__ov,.tabbar a,
.endcta__alt a,.foot__end a{letter-spacing:.04em}

/* The remaining small uppercase labels come down together. */
.dsec__h.dsec__h,.lede__k.lede__k,.dh__k.dh__k,.art__cat.art__cat,
.cc__go.cc__go,.sn__go.sn__go,.learn__sub.learn__sub,
.mani__go.mani__go,.rail__note.rail__note,.well__l.well__l,
.ft__k.ft__k,.m4__n.m4__n{letter-spacing:.06em}

/* ==================================================================
   NEWSLETTER: FOUR FIELDS                            30 Sep 2026
   Name, name, email, zip. Labels sit above the inputs rather than
   inside them as placeholders: placeholder-only fields disappear the
   moment someone starts typing, which is exactly when a person
   checking their own work needs them.
   ================================================================== */
.sign__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem 1rem}
@media(max-width:520px){.sign__grid{grid-template-columns:1fr}}
.sf{display:flex;flex-direction:column;gap:.35rem}
.sf--wide{grid-column:1 / -1}
.sf__l{font-family:var(--body);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.sign--4 input[type=text],.sign--4 input[type=email]{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:.95rem;
  color:var(--ink);background:var(--white);
  border:1px solid rgba(31,24,9,.22);border-radius:0;
  padding:.7rem .8rem}
.sign--4 input:focus-visible{outline:2px solid var(--pop);outline-offset:1px;
  border-color:var(--pop)}
.sign--4 .sign__consent{margin-top:1rem}
.sign__go{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.1rem}
.sign--4 .sign__go button{flex:none;width:auto}
.sign--4 .sign__note{margin:0}
/* The base sheet carries `.sign input{flex:1}` from the old
   single-row email form. Inside these new flex-column labels that
   makes every input grow to fill, which is how a zip code field
   ended up 176px tall. Inputs size to their own content now. */
.sign--4 .sf input{flex:0 0 auto;height:auto;min-height:0;align-self:stretch}
.sign--4 .sign__grid{align-items:start}
/* The two halves lost their eyebrows, so the heading now sits
   directly above its paragraph with nothing between. It needs a
   little air under it that the eyebrow used to provide above. */
.dh__c .dh__h{margin-bottom:.2rem}
/* The care cards now carry photographs rather than wells, and the
   two share a crop so the grid stays aligned either way. */
.cc__img{overflow:hidden;aspect-ratio:4/5}
/* Article leads now carry photographs; same crop as the wells did. */
.art__img{overflow:hidden;aspect-ratio:3/2}
@media(max-width:760px){}

/* ---- SECTION 8, third pass ---------------------------------------
   The in-person half loses its photograph, her call. With no picture
   on either side the two halves are told apart by tone instead:
   cream against blush, ink type on both, and a hairline where they
   meet so they do not read as one wide block. The page still never
   goes dark. ------------------------------------------------------ */
.dh--cream{background:linear-gradient(200deg,#FFFFFF 0%,#FDF6F4 55%,#F9EDE9 100%);
  border-right:1px solid var(--rule)}
.dh--cream:after{display:none}
.dh--cream .dh__h{color:var(--ink)}
.dh--cream .dh__p{color:var(--ink-2)}
.dh--cream .btn--o{border-color:var(--ink);color:var(--ink);background:transparent}
.dh--cream .btn--o:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
@media(max-width:820px){.dh--cream{border-right:0;border-bottom:1px solid var(--rule)}}
/* With no photograph behind it the half no longer needs to be tall
   enough to hold one; it sizes to its own content. */
.dh--cream,.dh--tint{min-height:auto;align-content:center;
  padding-block:clamp(2.6rem,6vw,4.5rem)}

/* ---- HERO CROP ---------------------------------------------------
   Her direction: cut the eyes, leave the nose. The top edge of the
   band lands just below the brow line, so the frame reads as a person
   without being a portrait. ---------------------------------------- */
@media(max-width:760px){}

/* ==================================================================
   FOOTER, third pass                                 30 Sep 2026
   Two of her calls.

   1. The wordmark was set full-bleed across the bottom, which is a
      2021 move and made the footer end on a shout. It moves to the
      top-left at reading size, the way Oula does it, so the footer
      opens with the mark and closes on the legal line.
   2. The column headings take Fraunces. They were Bebas at .26em,
      which is the one place in the footer still set like a lookbook.
   ================================================================== */
.foot--cols .foot__mark{margin:0 0 clamp(2rem,4vw,3rem);
  display:block;width:auto;max-width:var(--measure);
  margin-inline:auto}
.foot--cols .foot__mark svg{width:132px;height:16px;display:block}
@media(max-width:560px){.foot--cols .foot__mark svg{width:112px;height:13.6px}}

.ft__h,.ft__h.ft__h{font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:400;text-transform:none;
  font-size:1.02rem;letter-spacing:-.005em;line-height:1.2;
  color:var(--ink);margin:0 0 .9rem}
.ft__loc b,.ft__loc b.ft__loc b{font-family:'Fraunces',Georgia,serif;
  font-weight:400;text-transform:none;
  font-size:.94rem;letter-spacing:-.005em;color:var(--ink);margin-bottom:.5rem}
.ft__sign__h{font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;letter-spacing:-.01em;
  font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.25}

/* ---- HERO CROP, single source of truth ---------------------------
   Her direction: cut the eyes, leave the nose. Four earlier attempts
   had stacked up in this sheet, each overriding the last, which made
   the setting impossible to reason about. They are gone; this pair is
   the only object-position on the hero now.

   30% puts the top edge just below the brow. Above about 32% the nose
   goes too and the frame stops reading as a person at all. ------- */
.lede__bg img{object-position:58% 30%}
@media(max-width:760px){.lede__bg img{object-position:58% 32%}}

/* ==================================================================
   HERO AND HORMONES: CROP IN THE FILE, NOT IN CSS      30 Sep 2026
   object-position was the wrong tool for "don't show her face". The
   share of the photo a viewer sees depends on the hero band's height,
   which is min(78vh,42rem) — so the same percentage clears the eyes
   on one window and shows them on another. That is why it looked
   fixed here and not on her screen.

   Both files are now cropped above the brow, so no viewport can
   reveal the eyes at any size. object-position goes back to a plain
   top anchor, which is now the only sensible value.
   ================================================================== */
/* 3 Oct: the hero photo is now the robe shot, which is composed with
   the subject centred and already cropped to the band's ratio, so it
   is centred rather than top-anchored. The previous file was cropped
   above the brow and needed the top anchor; this one does not. */
/* Anchored low on purpose. Centred, the crop lands on her mouth and
   chin with the eyes cut off at the nav, which is the half-face
   framing Lily has rejected everywhere else. At 68% the band holds
   the robe, the hands and the mask, and no face at any width. */
.lede__bg img{object-position:50% 68%}
@media(max-width:760px){.lede__bg img{object-position:52% 66%}}

/* ---- CREDIBILITY STRIP: no marquee -------------------------------
   She asked what the scrolling text was, which is the answer: a
   moving strip on a clinical page reads as a promo banner and pulls
   the eye away from the headline. It wraps and sits still now, and
   the duplicated terms that fed the loop are hidden at every width
   rather than only above 900px. ---------------------------------- */
.cred__in{animation:none!important;width:auto;flex-wrap:wrap;
  justify-content:center;padding:0 var(--gutter)}
.cred__in span[aria-hidden]{display:none}
@media(max-width:900px){
  .cred__in{flex-wrap:wrap;justify-content:center;width:auto;
    gap:.35rem 1.1rem;font-size:.66rem}
}

/* ==================================================================
   VERTICAL RHYTHM AND PHOTO RATIOS                    1 Oct 2026
   The audit that prompted this found the page had no system in
   either dimension.

   SPACING, before: .sec sat at 80px top and bottom, the manifesto at
   144 and the final CTA at 128, with no relationship between them.
   Three arbitrary values read as "the spacing is off" because the
   eye registers the inconsistency without being able to name it.
   Now one token drives everything, and the two sections that are
   meant to breathe get exactly 1.5x of it. Nothing else is special.

   RATIOS, before: five of them, 0.75 / 0.80 / 1.00 / 1.45 / 1.50,
   one per section, each chosen on its own. Now three, each with a
   job:
     1:1  a door you walk through   (care cards, care team)
     4:5  a card in a journey       (season rail)
     3:2  something you read        (articles, community)
   The care cards drop from 437px tall to 350 at this width, which
   is the single biggest reason that section felt oversized.
   ================================================================== */
:root{--vrhythm:clamp(3.5rem,6.6vw,6rem)}

.sec{padding-block:var(--vrhythm)}
.mani,.endcta{padding-block:calc(var(--vrhythm) * 1.5)}
.shead{margin-bottom:clamp(2.2rem,4vw,3.25rem)}

/* --- the three ratios ------------------------------------------- */
.cc__img,.cc .well{aspect-ratio:1/1}
.tm__img,.tm .well{aspect-ratio:1/1}
.sn__img,.sn .well{aspect-ratio:4/5}
.art__img,.art .well{aspect-ratio:3/2}
.comm__img,.comm .well{aspect-ratio:3/2}

/* --- consistent gaps between the things inside a section -------- */
.ccards{gap:clamp(1.1rem,2.2vw,1.8rem)}
.arts{gap:clamp(1.1rem,2.2vw,1.8rem)}
.team4{gap:clamp(1.1rem,2.2vw,1.8rem)}
.ccards__end,.seasons__end,.team__end,.learn__end,.model__end{
  margin-top:clamp(2rem,3.6vw,2.8rem)}
.acc__end{margin-top:clamp(1.8rem,3.2vw,2.5rem);
  padding-top:clamp(1.4rem,2.6vw,2rem)}

/* The two full-bleed sections sit between padded ones, so they need
   their own internal breathing rather than inheriting none. */
.reveal__c{padding-block:clamp(3.5rem,7vw,5.5rem)}

/* ==================================================================
   INSURANCE BAND                                      1 Oct 2026
   "Do you take my insurance" is the question that decides whether a
   visitor keeps reading, and it was answered only in section 11, six
   screens down. The logos now sit just under the hero; the pricing
   detail stays at the bottom where it belongs.

   The row scrolls, Oula-style. Two rules keep that from becoming the
   banner-ad problem the old credibility marquee had: it only moves
   when the logos actually overflow their container, and it stops
   dead for anyone who has asked their system to reduce motion.
   ================================================================== */
.ins{background:var(--off);border-bottom:1px solid var(--rule);
  padding:clamp(1.6rem,3vw,2.4rem) 0 clamp(1.3rem,2.4vw,1.9rem);
  overflow:hidden}
/* The carrier logos are a claim, and a claim about insurance needs
   its limit next to it, not two clicks away on the pricing page.
   Lily's own wording from /become-a-patient, reused verbatim so
   the sentence is identical everywhere it appears. */
.ins__dis{text-align:center;margin:.9rem auto 0;padding:0 var(--gutter);
  max-width:44rem;font-family:var(--body);font-size:.78rem;line-height:1.6;
  color:var(--ink-3)}
.ins__k{text-align:center;margin:0 0 1.1rem;padding:0 var(--gutter);
  font-family:var(--body);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}

/* The window clips; the track moves. Masking both edges stops logos
   appearing and vanishing at a hard line. */
.ins__win{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ins__track{display:flex;align-items:center;width:max-content;
  gap:clamp(2rem,4.5vw,3.5rem);padding:0 clamp(1rem,2vw,1.75rem)}
.ins__track.is-rolling{animation:insroll 34s linear infinite}
@keyframes insroll{from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - clamp(1rem,2vw,1.75rem)))}}

/* These logos arrive at wildly different intrinsic sizes, so they are
   normalised by height and desaturated a touch: a row of competing
   brand colours under the hero would out-shout the headline. */
.ins .carrier{flex:none;min-height:0}
.ins .carrier__img{height:clamp(1.5rem,2.6vw,1.95rem);width:auto;max-width:none;
  object-fit:contain;filter:grayscale(1) opacity(.62);
  transition:filter .2s ease}

.ins__go{text-align:center;margin:1.1rem 0 0;padding:0 var(--gutter)}
.ins__go a{font-family:var(--body);font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--pop);padding-bottom:.28rem}
.ins__go a:after{content:" →"}
.ins__go a:hover{border-bottom-color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .ins__track,.ins__track.is-rolling{animation:none!important;
    flex-wrap:wrap;justify-content:center;width:auto;
    gap:1rem clamp(1.2rem,3vw,2.2rem)}
  .ins__win{-webkit-mask-image:none;mask-image:none}
  .ins .carrier__img{filter:grayscale(1) opacity(.7)}
}
/* The band rolls at every width now, her call. Distance and duration
   both come from the measured width of one logo set, so the loop is
   seamless and the speed is constant rather than depending on how
   many logos happen to fit. */
.ins__track.is-rolling{animation:insroll var(--insdur,30s) linear infinite}
@keyframes insroll{from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--insw,50%)))}}
.ins__track{justify-content:flex-start}

/* ==================================================================
   SECTION 11 — EXCEPTIONAL CARE, COVERED BY INSURANCE   1 Oct 2026
   Logos in rows rather than a moving track: the band under the hero
   is the glance, this is the one you stop and read, and a second
   marquee on one page would be two things competing for the same
   kind of attention.
   ================================================================== */
.insbig__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.4rem,3vw,2.6rem) clamp(1.8rem,4vw,3.4rem);
  max-width:var(--measure);margin:0 auto}
.insbig__logos .carrier{flex:none;min-height:0}
.insbig__logos .carrier__img{height:clamp(1.7rem,2.8vw,2.15rem);width:auto;max-width:none;
  object-fit:contain;filter:grayscale(1) opacity(.72)}
.insbig__acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem 1.8rem;margin:clamp(2rem,3.6vw,2.8rem) 0 0}
.insbig__tel{font-family:var(--body);font-size:.92rem;color:var(--ink-2);
  text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.22rem}
.insbig__tel:hover{color:var(--ink);border-bottom-color:var(--pop)}
.insbig .acc3{margin-top:clamp(2.6rem,5vw,3.8rem)}

/* ==================================================================
   FOOTER: FULL-WIDTH RULES, OWN GROUND, EVEN SPACING   1 Oct 2026

   THE LINES PROBLEM: every rule was a border on a block that is
   max-width:var(--measure) and centred, so each line stopped where
   the content column stopped and left two gaps at the page edges.
   The borders come off, and the dividers are now their own elements
   pulled out to the full viewport width.

   THE SPACING PROBLEM: the five blocks carried padding and margin in
   whatever combination each had been written with, so the gaps above
   and below a rule were never the same. One value now sets the space
   on both sides of every divider.

   THE GROUND: the footer was the same blush as the closing CTA
   directly above it, so the two ran together as one long pink block.
   It takes --off instead, which is already in the token set.
   ================================================================== */
.foot--cols{background:var(--off);
  padding-inline:var(--gutter);
  padding-top:clamp(2.5rem,5vw,3.75rem);
  padding-bottom:clamp(1.5rem,3vw,2.2rem)}

/* --fgap sets the air on BOTH sides of every rule, so the rhythm is
   even all the way down. */
.foot--cols{--fgap:clamp(1.8rem,3.4vw,2.75rem)}

.ft__hr{height:1px;background:rgba(31,24,9,.16);
  margin-inline:calc(-1 * var(--gutter));
  margin-block:var(--fgap)}

/* Borders off; the dividers do that job now. */
.foot--cols .ft__sign,
.foot--cols .ft__loc,
.foot--cols .foot__end{border-top:0;border-bottom:0}

.foot--cols .ft__sign{padding:0;margin:0 auto;align-items:start}
.foot--cols .foot__mark{margin:0 auto var(--fgap);max-width:var(--measure)}
.foot--cols .ft__cols{padding:0;margin:0 auto}
.foot--cols .ft__loc{padding:0;margin:0 auto}
.foot--cols .foot__end{padding:0;margin:0 auto;max-width:var(--measure)}

/* The signup heading was floating against the middle of a tall form
   column; both sides start at the same line now. */
.foot--cols .ft__sign__t{padding-top:.1rem}
/* The row does not stop or change on hover, her call. */
.ins__win:hover .ins__track.is-rolling{animation-play-state:running}
.ins__win:hover .carrier__img{filter:grayscale(1) opacity(.62)}
.ins .carrier__img{transition:none}
/* Logos up about 28%, her call. The marquee measures its own track
   on load, so the scroll distance and duration recalculate from the
   new width on their own and the loop stays seamless. */
.ins .carrier__img{height:clamp(1.9rem,3.2vw,2.5rem)}
.ins{padding-top:clamp(1.8rem,3.2vw,2.7rem);
  padding-bottom:clamp(1.5rem,2.6vw,2.1rem)}

/* ==================================================================
   MOBILE PASS                                          1 Oct 2026
   An audit at 390, 360 and 430 found two real problems. No overflow
   and nothing wider than the viewport, but:

   TAP TARGETS. Apple and WCAG both put the floor around 44px. The
   nav Book button was 34, the burger 32, footer links 31, inline
   text links 17 to 24, and the consent checkbox 14. On a phone those
   are mis-taps, and the consent box is the one that stops a sign-up
   from completing.

   TEXT SIZE. Button labels, the hero eyebrow and the card go-links
   were all rendering under 11px, which is below comfortable reading
   on a handset regardless of how it looks on a monitor.

   Everything below only applies at phone widths; the desktop sizing
   is untouched.
   ================================================================== */
@media(max-width:760px){

  /* --- buttons and the nav ------------------------------------- */
  .btn{font-size:.72rem;padding:1rem 1.7rem;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}
  .nav--bar .book{font-size:.68rem;padding:.9rem 1.2rem;min-height:44px;
    display:inline-flex;align-items:center}
  .burger{min-width:44px;min-height:44px;display:flex;flex-direction:column;
    align-items:center;justify-content:center}

  /* --- sticky bar: 48px of target, and bigger labels ----------- */
  .tabbar a{padding:.6rem .2rem .55rem;font-size:.63rem;min-height:56px}
  body{padding-bottom:4rem}

  /* --- inline text links were the worst offenders -------------- */
  .mani__go,.learn__sub,.cc__go,.sn__go,.ins__go a,.insbig__tel,
  .endcta__alt a,.rail__note,.h3c a{display:inline-block;padding-block:.6rem}

  /* --- list links in the footer and the drawer ----------------- */
  .ft__c a{display:block;padding-block:.5rem}
  .ft__loc a{display:inline-block;padding-block:.35rem}
  .dsec a:not(.dsec__ov){padding:.68rem 0}
  .dsec__ov{padding:.68rem 0}
  .foot__end a{display:inline-block;padding-block:.45rem}

  /* --- the consent checkbox, at 14px, was the real bug ---------- */
  .sign__consent input[type=checkbox]{width:22px;height:22px;flex:none}
  .sign__consent{align-items:flex-start;gap:.7rem}
  .sign--4 .sign__go button{min-height:48px;width:100%}

  /* --- type that was under 11px -------------------------------- */
  .lede__k{font-size:.68rem;line-height:1.8}
  .ins__k{font-size:.7rem}
  .cc__go,.sn__go,.art__cat,.well__l{font-size:.68rem}
  .shead__k,.dh__k{font-size:.68rem}
  .reveal__d{font-size:.78rem}
  .foot__end{font-size:.78rem}
}
/* Mobile pass, second round. The first got the worst offenders but
   left list links at 36px and several labels at 10.88px, which is
   just under both thresholds. Pushed clear of them rather than left
   sitting on the line. */
@media(max-width:760px){
  .ft__c a{padding-block:.72rem}
  .ft__loc a{padding-block:.5rem}
  .mani__go,.learn__sub,.cc__go,.sn__go,.ins__go a,.insbig__tel,
  .endcta__alt a,.rail__note,.h3c a{padding-block:.82rem}
  .lede__k,.ins__k,.cc__go,.sn__go,.art__cat,.well__l,.shead__k,.dh__k,
  .learn__sub,.mani__go,.sf__l,.dsec__h{font-size:.74rem}
  .nav--bar .book,.tabbar a{font-size:.72rem}
  .m4__n{font-size:.8rem}
}
/* Last two from the audit: footer links were landing on 43px, a pixel
   under the floor, and the insurance band's link was still 10.24px
   because it is styled by its own selector rather than the group. */
@media(max-width:760px){
  .ft__c a{padding-block:.78rem}
  .ins__go a{font-size:.74rem;display:inline-block;padding-block:.82rem}
}

/* ==================================================================
   MOBILE HERO: ONE THING, NOT TWO                      1 Oct 2026
   The phone layout had been a blush panel with ink type, then the
   photograph as a separate strip underneath. That is a defensible
   pattern, and it is what the old site did, but it reads as two
   stacked sections rather than one hero, which is exactly what she
   saw. It also pushed the credibility of the photograph below the
   fold while the opening screen carried no image at all.

   The phone now gets the same hero as the desktop: full-bleed
   photograph, scrim, white type over it. The scrim is heavier here
   than on desktop because the type sits over a much tighter crop of
   a daylight street scene, and because phones get read outdoors.
   ================================================================== */
@media(max-width:760px){
  .lede{min-height:min(84vh,40rem);
    display:grid;place-items:center;
    background:none;
    margin-top:calc(-1 * (56px + 9.6px))}

  .lede__bg{position:absolute;inset:0;height:100%;width:100%;order:0}
  .lede__bg img{width:100%;height:100%;object-fit:cover;
    object-position:58% 0%}

  .lede:after{content:"";display:block;position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(31,24,9,.42) 0%,
      rgba(31,24,9,.34) 38%,rgba(31,24,9,.72) 100%)}

  .lede__c{position:relative;z-index:2;order:0;text-align:center;
    padding:7rem 1.3rem 3rem}
  .lede__h,.lede__k{color:#FFFFFF}
  .lede__k{color:rgba(255,255,255,.88)}
  .lede__p{color:rgba(255,255,255,.93)}

  /* Coral primary reads clearly on the scrim; the secondary stays an
     outline so the two do not compete. */
  .lede .btn--f{background:var(--pop);color:var(--ink);border-color:var(--pop)}
  .lede .btn--o{border-color:rgba(255,255,255,.85);color:#FFFFFF;background:transparent}
}

/* ==================================================================
   MOBILE: CARDS TWO UP                                 1 Oct 2026
   One card per row turned "What can we help with?" into six full-
   width tiles and about three screens of scrolling before a reader
   could see the range of care on offer. Two up shows four of the six
   on one screen, which is the point of that section.

   Six divides by two cleanly, so no row is ever orphaned. The care
   team is three, so its last card spans the full width rather than
   sitting alone in a half.

   The Learn cards stay stacked on purpose: their images are 3:2
   landscape, and at half of a 390px screen that is a 170px-wide
   photograph with a headline under it, which is unreadable rather
   than compact.
   ================================================================== */
@media(max-width:600px){
  .ccards{grid-template-columns:repeat(2,1fr);
    gap:clamp(.9rem,3vw,1.3rem)}
  .team4{grid-template-columns:repeat(2,1fr);
    gap:clamp(.9rem,3vw,1.3rem)}
  .team4 .tm:last-child{grid-column:1 / -1}

  /* Type comes down to suit a half-width column, and the go-link
     keeps its 44px target without pushing the cards apart. */
  .cc__h{font-size:1rem;line-height:1.22;margin-top:.85rem}
  .cc__p{font-size:.82rem;line-height:1.55;margin-top:.4rem}
  .cc__go{font-size:.66rem;padding-block:.7rem;margin-top:.5rem}
  .tm__n{font-size:.9rem;margin-top:.8rem}
  .tm__r{font-size:.82rem;line-height:1.6}
}

/* ==================================================================
   MOBILE TOP NAV                                       1 Oct 2026
   The bar was three oversized things fighting for 390px: a full
   wordmark, a BOOK A VISIT button wide enough to be the widest
   element on the screen, and a burger pushed against the edge.

   Two changes. The button says "Book" on a phone, because the label
   was carrying four words of which three are implied by context and
   repeated in the sticky bar at the bottom of the screen anyway. And
   the three elements get real spacing instead of being packed edge
   to edge.

   The button keeps its 44px target and 11px+ label; it is the width
   that comes down, not the legibility.
   ================================================================== */
@media(max-width:760px){
  .book__x{display:none}

  .nav--bar{gap:.55rem;padding:.75rem 1.1rem;
    justify-content:space-between}
  .nav--bar .nav__wm{margin-right:0}
  .nav--bar .wm{height:15px;width:121.2px}

  .nav--bar .book{font-size:.72rem;letter-spacing:.06em;
    padding:.8rem 1.15rem;min-height:44px;margin-left:auto;margin-right:0;
    order:2}
  .nav--bar .burger{order:3;margin-left:.15rem;min-width:44px;min-height:44px}
}
@media(max-width:400px){
  .nav--bar{padding:.7rem .9rem;gap:.4rem}
  .nav--bar .wm{height:14px;width:113.1px}
  .nav--bar .book{padding:.8rem .95rem;font-size:.7rem}
}

/* ==================================================================
   CARE TEAM: PEOPLE, NOT DISCIPLINES                   1 Oct 2026
   The cards carried discipline names because the roster came off the
   site on 28 Sep. They are built for named clinicians now: photo,
   name, credentials, what they look after, bio link.

   Credentials sit on their own line in a smaller, quieter setting
   rather than trailing the name. On a clinical site the letters
   after a name are doing real work, and running them into the name
   makes a long string nobody reads to the end of.
   ================================================================== */
.tm__n{font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:400;text-transform:none;letter-spacing:-.008em;
  font-size:1.12rem;line-height:1.25;margin:1.1rem 0 0;color:var(--ink)}
.tm__cr{font-family:var(--body);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:.4rem 0 0;line-height:1.6}
.tm__r{font-size:.9rem;line-height:1.7;color:var(--ink-2);margin:.65rem 0 0}
.tm__go{display:inline-block;margin-top:.8rem;font-family:var(--body);
  font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--pop);padding-bottom:.25rem}
.tm__go:after{content:" →"}
.tm__go:hover{border-bottom-color:var(--ink)}
@media(max-width:600px){
  .tm__n{font-size:1rem;margin-top:.85rem}
  .tm__cr{font-size:.66rem}
  .tm__r{font-size:.82rem;line-height:1.6}
  .tm__go{font-size:.66rem;padding-block:.7rem}
}

/* ==================================================================
   PROVIDER CARDS: CAP THE HEADSHOT                     1 Oct 2026
   The bug she spotted: card width was not monotonic. At 1100px the
   cards were 314px, then at 800px the grid dropped to two columns
   and they jumped back UP to 351 — bigger on a smaller screen. The
   1:1 headshots followed, so a portrait was 351px tall on a tablet.

   A headshot does not need half a screen. The image is capped and
   centred, the text centres with it, and the card no longer grows
   when the column count falls.
   ================================================================== */
.tm{text-align:center}
.tm__img,.tm .well{width:min(100%,13.5rem);margin-inline:auto}
.tm__r{max-width:21rem;margin-inline:auto}
.tm__cr{max-width:21rem;margin-inline:auto}
/* The phone block used to force the image back to 100%, which put a
   261px headshot back on screen at exactly 600px. The single capped
   rule above now applies at every width, so the size only ever falls
   as the screen narrows. */
@media(max-width:600px){
  .tm{text-align:left}
  .tm__img,.tm .well{margin-inline:0}
  .tm__r,.tm__cr{margin-inline:0}
}

/* ==================================================================
   MOBILE DRAWER: DROP THE "EXPLORE ALL" ROWS           1 Oct 2026
   Her call, and she is right: three extra rows, each one restating
   the group heading directly above it, added a third of a screen of
   scrolling and read as clutter. The heading itself is the link to
   that overview now, so nothing is lost but the rows.
   ================================================================== */
.dsec__h--link{display:block;text-decoration:none;
  color:var(--ink);margin:0 0 .55rem;padding:.3rem 0}
.dsec__h--link:after{content:" →";color:var(--ink-3);font-size:.9em}
.dsec__h--link:hover{color:var(--ink)}
.dsec__h--link:hover:after{color:var(--pop)}

/* ==================================================================
   MOBILE DRAWER: TAKE IT BACK FROM THE OLD NAV STYLES  1 Oct 2026
   The drawer markup is new but it sits inside .drop, which the base
   sheet styles for the previous two-column mega-menu: every anchor
   got uppercase display type, wide tracking and a full-width rule
   under it. The result was 33 giant bordered rows, which is most of
   what "the explore all under everything feels too much" was
   actually reacting to.

   These selectors are scoped to .drop--ia so the old nav is left
   alone, and they are specific enough to win without !important.
   ================================================================== */
.drop.drop--ia{width:min(25rem,calc(100vw - 1.25rem))}

.drop--ia .dsec{border-top:1px solid var(--rule);padding:1rem 0 .6rem}
.drop--ia .dsec:first-child{border-top:0;padding-top:.4rem}

.drop--ia .dsec__h,
.drop--ia a.dsec__h--link{font-family:var(--title);font-weight:400;
  text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  color:var(--ink-3);margin:0 0 .35rem;padding:.35rem 0;
  border:0;background:none;display:block;text-decoration:none}
.drop--ia a.dsec__h--link{color:var(--ink)}

/* Mobile drawer section headings in the serif, not the Bebas label face.
   Doubled class names rather than !important: the small-uppercase-label
   group rule and the <=560px font-size rule both target .dsec__h on one
   class, so this needs the extra specificity to win from anywhere in
   the sheet. Uppercase and the tracking come off with it, otherwise
   Fraunces reads as a shouted label rather than a heading. */
.drop--ia .dsec__h.dsec__h,
.drop--ia a.dsec__h--link.dsec__h--link{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:400;text-transform:none;letter-spacing:-.01em;
  font-size:1.08rem;line-height:1.25;color:var(--ink);
  margin:0 0 .5rem;padding:.3rem 0}

.drop--ia .dsec a:not(.dsec__h--link){display:block;
  font-family:var(--body);font-weight:400;
  font-size:.95rem;letter-spacing:.005em;text-transform:none;
  color:var(--ink-2);text-decoration:none;
  border:0;background:none;
  padding:.62rem 0;line-height:1.35}
.drop--ia .dsec a:not(.dsec__h--link):hover{color:var(--ink)}

.drop--ia .dia{padding:1rem 1.15rem 1.2rem}
.drop--ia .dia__acts{border-top:1px solid var(--rule);
  padding-top:1rem;margin-top:.6rem;gap:.55rem}
.drop--ia .dia__acts .btn{width:100%;text-align:center}
/* "Booka Visit": .book is display:inline-flex, so "Book" and the
   span became two flex items and the whitespace between them was
   dropped, which is what flex does to inter-item whitespace. The
   space now lives inside the span as a non-breaking space, which
   survives regardless of how the box is laid out. */
.book{white-space:nowrap}

/* ==================================================================
   LEARN CARDS: SPACING                                 1 Oct 2026
   Three 3:2 images at 354px wide with 28px between them and the text
   jammed 19px under each one. The row read as a single continuous
   band of photography rather than three separate things to read, and
   the headlines ran straight into the pictures.

   Three changes, all spacing:
   1. The column gap goes to about 44px, so the cards separate.
   2. A hairline opens each text block. It gives the ragged headline
      lengths (two lines, two lines, one) a common top edge to hang
      from, so the raggedness reads as typography rather than error.
   3. Real air between image, category and headline, and the headline
      comes up a touch since it is the thing being chosen.
   ================================================================== */
.arts{gap:clamp(1.6rem,3.2vw,2.75rem)}

.art__cat{margin-top:1.5rem;padding-top:1.1rem;
  border-top:1px solid var(--rule)}
.art__h{margin-top:.8rem;font-size:1.22rem;line-height:1.3}
.art{padding-bottom:.2rem}

@media(max-width:860px){
  /* Stacked, the hairline does the separating that the gap did. */
  .arts{gap:clamp(2rem,5vw,2.75rem)}
  .art__cat{margin-top:1.25rem;padding-top:.95rem}
  .art__h{font-size:1.14rem}
}
/* No arrows on the drawer's group headings, her call. They still link
   to their overview pages; the arrow was the only thing marking them
   as links, so the colour difference from the items below now carries
   that on its own. */
.dsec__h--link:after{content:none}
/* The service chain was breaking two-word terms across lines, so a
   card read "Annual / Care" and "Pelvic / Health". Each term holds
   together now and the line breaks fall between terms instead. */
.sn__ch b{white-space:nowrap}

/* ==================================================================
   SEASON RAIL AS POLAROIDS                             2 Oct 2026
   The cards had the photograph bleeding to all four edges with the
   text sitting underneath, which reads as a web card. A polaroid is
   defined by two things: an even white border on three sides, and a
   deeper one at the bottom where you'd write on it. The text block
   already sits where that deep border goes, so it does that job
   without anything being added.

   The tilt is deliberately small and only on hover. A permanent
   scattered-photos effect is charming for about a day and then it is
   a clinical website where the cards look crooked.
   ================================================================== */
.sn{background:var(--white);
  padding:.8rem .8rem 0;
  box-shadow:0 1px 2px rgba(31,24,9,.08),
             0 16px 34px -20px rgba(31,24,9,.45);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),
             box-shadow .28s ease}
.sn:hover{transform:translateY(-5px) rotate(-.55deg);
  box-shadow:0 2px 4px rgba(31,24,9,.09),
             0 26px 48px -22px rgba(31,24,9,.5)}
/* Alternating lean, so a row of them is not uniformly crooked. */
.sn:nth-child(even):hover{transform:translateY(-5px) rotate(.55deg)}

/* The text block is the polaroid's writing strip: deeper than the
   three borders around the photograph, and optically centred against
   them rather than flush left. */
.sn__t{padding:1.15rem .35rem 1.35rem}

/* The rail needs room for the lift and the shadow, or both clip. */
.rail{padding-top:1rem;padding-bottom:2.4rem}

@media(prefers-reduced-motion:reduce){
  .sn,.sn:hover{transition:none;transform:none}
}
@media(max-width:600px){
  .sn{padding:.6rem .6rem 0}
  .sn__t{padding:1rem .25rem 1.15rem}
}
/* The go-link had margin-top:auto, which pinned it to the bottom of
   equal-height cards and left 53 to 80px of dead space above it. That
   reads as a web card stretching to fill a grid row; a polaroid's
   writing strip is compact and sized to what is written on it.

   The link now sits directly under the chain, and the cards take
   their natural height. The bottoms end up slightly uneven, which is
   correct for a row of photographs and wrong for a row of tiles. */
.rail{align-items:flex-start}
.sn__go{margin-top:0;padding-top:1.1rem}

/* ==================================================================
   POLAROID TITLES AND THE SEASON LINK                  2 Oct 2026

   TITLES move from Bebas to Fraunces. The season cards were the only
   card titles on the page still set in the display face; the care
   cards, the article cards and every section heading are Fraunces.
   Sentence case rather than caps, to match them.

   THE LINK goes coral, her call, but not the brand coral. #EF8367 on
   white measures 2.59:1, and small text needs 4.5:1 — at 10px uppercase
   it would be genuinely hard to read, not just technically failing.
   #C44F32 is the same hue carried darker: 4.65:1, reads as coral, and
   is legible. The brand coral stays on the arrow and the underline,
   where it is decoration rather than the text itself.
   ================================================================== */
.sn__h{font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:400;text-transform:none;
  letter-spacing:-.008em;font-size:1.14rem;line-height:1.25}

/* Third pass on the link colour. Plum worked but added a fourth
   brand colour; espresso is a deepened neutral rather than a new
   accent, so it reads as considered without committing the brand to
   anything it has to repeat on the /care pages later. 9.01:1 on
   white, 7.51:1 on the blush ground. The coral arrow still carries
   the brand colour. */
.sn__go{color:#5C4433}
.sn__go:after{color:var(--pop)}
.sn:hover .sn__go{color:#42301F}
.sn:hover .sn__go:after{color:#5C4433}

@media(max-width:600px){
  .sn__h{font-size:1.02rem}
}

/* --- Duo: the cream panel's button was invisible -------------------
   .dh:not(.dh--tint) .btn--o is (0,3,0) because :not() carries its
   argument's weight, so it outranked .dh--cream .btn--o (0,2,0) and
   painted the "Visit Embody" outline white on a near-white ground.
   That guard was written when the only light half was .dh--tint.
   Rather than add specificity, name both light panels in the guard
   so the white-on-photograph rule applies only to photo halves. */
.dh--cream .btn--o.btn--o{border-color:var(--ink);color:var(--ink);background:transparent}
.dh--cream .btn--o.btn--o:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* --- Season rail: the polaroids were not the same size -------------
   .sn sets flex:0 0 min(20rem,74vw), but a flex item's default
   min-width:auto means content can still push it wider, and
   .sn__ch b{white-space:nowrap} makes the chain unbreakable. The
   longest chain (Perimenopause & Menopause) therefore widened its
   card to 359px against 294px for Trying to Conceive, and since the
   frame is a fixed 4:5 ratio, a wider card is a taller one: 597px
   against 516px. min-width:0 lets the basis actually hold, and the
   chain wraps between labels instead of stretching the frame.
   The chain then sets its own min-height so the captions - and so
   the bottom edge of every polaroid - still line up. */
.sn{min-width:0}
.sn__ch{min-height:calc(.85rem * 1.85 * 2)}

/* The chain still ran past the right edge of the longest cards: the
   terms are nowrap and the arrows between them carry side padding, so
   the line could not always find a break point inside the card. Laying
   the chain out as a wrapping flex row makes every gap a legal break,
   so "Strength" drops to the next line instead of hanging 46px off the
   photograph. The arrows lose their padding to the gap. */
.sn__ch{display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:.3rem;row-gap:0}
/* The arrow moves onto the front of the term it points at, so the two
   wrap as one unit. Left as its own flex item it could start a line,
   which left Perimenopause reading "Hormones / -> Strength". */
.sn__ch i{display:none}
.sn__ch i+b:before{content:"\2192";color:var(--pop);padding-right:.3rem}

/* ---- The polaroid, made of paper ---------------------------------
   Her note, 3 Oct: the frame should feel more real. Four changes, all
   small, which is the whole point:
     * the stock is warm off-white, not #FFF. Photographic paper never
       was pure white and pure white reads as a div.
     * the print sits very slightly recessed, with a hairline shade
       around it, the way a print sits inside its border.
     * two shadows instead of one: a tight contact shadow where the
       paper meets the surface, and a wide ambient one. A single soft
       shadow floats.
     * a 2px corner radius and a faint top highlight, because a cut
       sheet of paper has neither a razor corner nor a flat face. */
.sn{background:#FDFBF6;border-radius:2px;
  box-shadow:
    0 1px 1px rgba(31,24,9,.13),
    0 2px 3px -1px rgba(31,24,9,.10),
    0 18px 36px -22px rgba(31,24,9,.42)}
.sn:before{content:"";position:absolute;inset:0;border-radius:2px;
  pointer-events:none;z-index:2;
  background:linear-gradient(176deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 18%);
  box-shadow:0 0 0 1px rgba(31,24,9,.045) inset}
.sn{position:relative}
.sn__img{position:relative;box-shadow:0 0 0 1px rgba(31,24,9,.07),
  0 1px 3px rgba(31,24,9,.13) inset}
.sn:hover{box-shadow:
    0 1px 1px rgba(31,24,9,.14),
    0 3px 5px -1px rgba(31,24,9,.11),
    0 28px 50px -24px rgba(31,24,9,.48)}

/* --- 8 · WHERE TO SEE US ------------------------------------------
   Replaces the full-bleed In person / Virtual duo with the Oula
   locations pattern: heading and booking button on one line, then a
   row of place cards. Two cards instead of five, so they are wide
   enough to carry a 3:2 frame and a full address without crowding.
   The card is a link all the way through, the way each Oula location
   name is, and the whole surface lifts rather than just the arrow. */
.loc{background:var(--off)}
.loc__top{max-width:var(--measure);margin:0 auto 2.6rem;padding-inline:var(--gutter);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.loc__top .shead__h{margin:0;max-width:30ch}
.loc__top .btn{flex:0 0 auto;margin:0}

/* ------------------------------------------------------------------
   ANCHOR JUMPS CLEAR THE STICKY NAV                    3 Oct 2026
   The bar is position:sticky and about 70px tall, and nothing set
   scroll-padding-top, so every in-page jump put the target's first
   line underneath it: #grid on the shop, #memberships on the studio
   pages, #schedule, #treatments, #npp from the consent checkbox.
   The section looked like it had scrolled to the wrong place.
   One rule fixes all of them.
   ------------------------------------------------------------------ */
html{scroll-padding-top:5.5rem}
@media(max-width:760px){html{scroll-padding-top:4.6rem}}

.locg{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.6vw,2.2rem)}
/* One location, so the card holds its own column rather than sitting
   in half a two-column grid with dead space beside it. */
.locg--one{grid-template-columns:minmax(0,34rem)}

.lc{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--rule);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease}
.lc:hover{transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(31,24,9,.07), 0 20px 40px -24px rgba(31,24,9,.42)}
.lc__img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--tint);
  display:grid;place-items:center;text-align:center}
.lc__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.lc:hover .lc__img img{transform:scale(1.04)}

.lc__b{display:block;padding:1.5rem 1.6rem 1.7rem}
.lc__k{display:block;font-family:var(--body);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.lc__h{display:block;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.15;letter-spacing:-.012em;
  color:var(--ink);text-transform:none}
.lc__a{display:block;margin-top:.7rem;font-size:.92rem;line-height:1.7;color:var(--ink-2)}
/* Both cards carry two lines here, so the links sit on one baseline. */
.lc__a{min-height:calc(.92rem * 1.7 * 2)}
.lc__go{display:block;margin-top:1.2rem;font-family:var(--body);font-size:.68rem;
  letter-spacing:.17em;text-transform:uppercase;color:#5C4433}
.lc__go:after{content:" \2192";color:var(--pop)}
.lc:hover .lc__go{color:#42301F}
.lc:hover .lc__go:after{color:#5C4433}

@media(max-width:760px){
  .locg{grid-template-columns:1fr}
  .loc__top{display:block}
  .loc__top .btn{margin-top:1.4rem}
}

/* 2 Oct: the two location cards run without photographs until the
   clinic and video-visit frames exist. Without the 3:2 frame the
   cards are pure type, so they need their own breathing room and a
   blush ground to keep the section from reading as a bare list. */
.lc{background:linear-gradient(162deg,#FFFFFF 0%,#FDF6F4 62%,#FAF0ED 100%)}
.lc__b{padding:2.2rem 2rem 2.1rem}
.lc__h{font-size:clamp(1.6rem,2.6vw,2.1rem)}

/* --- Newsletter band wrapper --------------------------------------
   The signup is wrapped in .ft__signband so a page could give it its
   own colour, but nothing does: the band is white on every page, her
   call on 2 Oct. The wrapper sets width and centring only. */
.foot--cols .ft__signband .ft__sign{max-width:var(--measure);margin:0 auto}

/* ------------------------------------------------------------------
   SKIN & AESTHETICS BAND (homepage)
   A quiet band, on purpose. It introduces a second service line
   without competing with the women's health sections above it, so it
   gets type and a link rather than cards, photography or a button.
   ------------------------------------------------------------------ */
.skin{background:var(--off)}
/* Two columns once there is a photograph: copy on the left, picture
   on the right, stacking copy-first on a phone so the sentence that
   explains the service still comes before the image. */
.skn{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.8rem,4.5vw,3.5rem);align-items:center}
.skn__img{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--tint)}
.skn__img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
@media(max-width:760px){
  .skn{grid-template-columns:1fr}
  .skn__img{aspect-ratio:3/2;order:2}
  .skn__t{order:1}
}
.skn__k{margin:0 0 1rem;font-family:var(--body);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.skn__h.skn__h{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.16;
  letter-spacing:-.016em;color:var(--ink)}
.skn__l{margin:1rem 0 0;max-width:44ch;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.5;color:var(--ink)}
.skn__p{margin:1rem 0 0;max-width:56ch;font-size:1rem;line-height:1.75;color:var(--ink-2)}
/* Button and link together: the button books the consultation, the
   link goes to the page. They sit on one baseline and wrap to two
   rows on a narrow column. */
.skn__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.6rem}
.skn__acts .btn{margin:0}
.skn__go{display:inline-block;font-family:var(--body);font-size:.68rem;
  letter-spacing:.17em;text-transform:uppercase;color:#5C4433;text-decoration:none}
.skn__go:after{content:" \2192";color:var(--pop)}
.skn__go:hover{color:#42301F}

/* ==================================================================
   MOBILE PASS                                          3 Oct 2026
   Three things Lily flagged on a phone.
   ================================================================== */

/* 1 · THE DRAWER SAT OFF-CENTRE AND RAN UNDER THE TAB BAR.
   .drop carries left:20px from the base shell and .drop--ia set a
   width, so on a 390px screen the panel started 20px in and ended at
   the right edge: a strip of page showing down the left, nothing down
   the right. Its inner scroller also ended underneath the fixed tab
   bar, so the last group could not be reached. Pinned to both sides
   with equal gutters, and the scroller now clears the bar. */
@media(max-width:760px){
  .drop.drop--ia{left:.75rem;right:.75rem;width:auto;max-width:none}
  .drop--ia .dia{max-height:min(70vh,38rem);padding-bottom:4.75rem}
}

/* 2 · THE SKIN BAND PHOTO WAS CROPPED TO 3:2 ON A PHONE, which slices
   a portrait photograph across the mouth. Square keeps the face. */
@media(max-width:820px){
  .skn__img{aspect-ratio:1/1}
}

/* 3 · THE FOOTER WAS A 2,850px SINGLE COLUMN on a 390px screen: five
   groups, thirty links, stacked. Two columns halve the scroll and the
   groups still read as groups. Care is the long one, so it spans both
   columns and keeps its own single list rather than being broken
   across a column boundary mid-service. */
@media(max-width:560px){
  .ft__cols--5{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1.1rem;row-gap:1.8rem}
  .ft__cols--5 .ft__c:first-child{grid-column:1/-1}
  .ft__cols--5 .ft__c:first-child a{display:inline-block;width:calc(50% - .6rem)}
  .ft__c a{padding-block:.42rem}
}

/* ---- Things that make no sense inside the installed app ---------
   Both are install prompts. Once someone is in the app they have
   already done it, and a live "Add to Home Screen" link in there
   reads as though the install did not take. */
.appnow{display:none}
@media all and (display-mode:standalone),all and (display-mode:fullscreen){
  .ft__c a.ft__install{display:none}
  .appnow{display:block;margin:0 0 1.5rem;padding:.85rem 1.1rem;
    background:var(--tint);color:var(--ink);
    font-size:.95rem;line-height:1.6;text-align:left}
}

/* ---- FOLLOW ALONG, 4 Oct ---------------------------------------
   Sits above the footer. Three parts: the heading, a slot the
   Instagram widget drops into, and two real destinations.

   The slot is sized by its contents, not by a fixed height. A
   min-height reserving space for a widget that is not installed yet
   leaves a hole on the page; letting it collapse means the section
   reads as finished either way, and the widget simply makes it
   taller when it arrives. */
.soc__t{max-width:var(--measure);margin:0 auto 2.2rem;
  padding-inline:var(--gutter)}
.soc__h.soc__h{font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.14;
  letter-spacing:-.014em;margin:0 0 .6rem;color:var(--ink)}
.soc__lede{margin:0 0 .9rem;max-width:40ch;font-family:var(--body);
  font-weight:400;font-size:1.16rem;line-height:1.6;color:var(--ink)}
.soc__p{margin:0;max-width:52ch;font-family:var(--body);font-size:1.02rem;
  line-height:1.75;color:var(--ink-2)}
/* A label, not an eyebrow: it sits above the two cards to introduce
   them, never stacked over the section heading. */
.soc__lab{max-width:var(--measure);margin:2.6rem auto 0;
  padding-inline:var(--gutter);font-family:var(--body);font-size:.68rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}

.soc__feed{max-width:var(--measure);margin:0 auto;
  padding-inline:var(--gutter)}
/* The standing link, which is what the slot shows until the widget is
   installed and remains useful underneath it afterwards. */
.soc__seed{display:inline-block;font-family:var(--body);font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--pop);
  padding-bottom:.3rem}
.soc__seed:hover{color:var(--pop)}

.soc__links{max-width:var(--measure);margin:1.1rem auto 0;
  padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,34rem);gap:1.4rem}/* one card while the Facebook group is on hold */
.soc__card{display:grid;align-content:start;gap:.35rem;
  padding:1.6rem 1.7rem;background:var(--off);
  border:1px solid var(--rule);text-decoration:none;
  transition:border-color .18s ease,background .18s ease}
.soc__card:hover{border-color:var(--pop);background:#fff}
.soc__k{font-family:var(--body);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.soc__n{font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:1.14rem;line-height:1.3;color:var(--ink)}
.soc__d{font-family:var(--body);font-size:.93rem;line-height:1.7;
  color:var(--ink-2);margin-top:.2rem}

@media(max-width:760px){
  .soc__links{grid-template-columns:1fr;gap:1rem;margin-top:1rem}
  .soc__card{padding:1.35rem 1.4rem}
}

/* ---- CARE CARDS ON BLUSH -----------------------------------------
   Added 4 Oct. Her call, after looking at washes, duotones and a
   coloured blob: the photographs stay untouched and the colour frames
   them instead.

   WHY THIS ONE. It is the only treatment of the six that does nothing
   to the pictures themselves, so nothing here depends on the licence
   terms of six separately sourced photographs. It also costs one
   background and one padding; there is no blend mode, no filter, and
   nothing to re-tune if a card is swapped for a new image.

   The padding is uneven on purpose: equal on three sides, deeper at
   the bottom, so the block of copy is optically centred in the card
   rather than measured into it. Equal padding all round makes a card
   look bottom-light every time.

   The card is the colour, so .cc loses its transparent background and
   the type keeps its own ink. .cc__h, .cc__p and .cc__go are nudged in
   by a hair past the image edge: type that lines up exactly with a
   photograph's edge reads as if it has fallen out of the card.     -- */
.cc{background:var(--tint);padding:.85rem .85rem 1.6rem}
.cc__h,.cc__p,.cc__go{padding-inline:.45rem}
.cc__h{margin-top:1.05rem}
/* The hairline keeps the photograph from bleeding into the blush when
   an image happens to have a pale edge, which two of these six do. */
.cc__img{box-shadow:inset 0 0 0 1px rgba(31,24,9,.06)}
/* Section ground. Six blush cards on the same blush would disappear;
   on bone they read as cards. */
.ccards{--card-ground:var(--off)}
@media(max-width:600px){
  .cc{padding:.6rem .6rem 1.2rem}
  .cc__h,.cc__p,.cc__go{padding-inline:.3rem}
  .cc__h{margin-top:.85rem}
}


/* ==================================================================
   /every-season/*  hub pages

   Rewritten clean on 2 Oct. Successive appends had left three copies
   of the hero block and two of the FAQ block in this file, with the
   stalest one winning on the cascade, which is why the mobile photo
   kept coming back at 38% after being set to half. One definition
   per thing from here on.

   Everything reuses the homepage tokens, type scale and rhythm. The
   chips, cards and buttons are existing site patterns; the only new
   structures are the key-visits timeline and the FAQ list.
   ================================================================== */

.snw,.snc,.snk,.snf,.sne,.snch{
  max-width:var(--measure);margin-left:auto;margin-right:auto;
  padding-inline:var(--gutter)}

/* ------------------------------------------------------------------
   HERO
   None. These pages use the homepage .lede hero verbatim: same
   full-bleed photo, same gradient, same white type, same button
   pair, all defined once in the shared sheet. The only thing set
   here is the crop, because a 4:5 portrait filling a 78vh band
   needs telling where the subject is.

   The insurance band that follows inherits its homepage styling for
   the same reason, so nothing is overridden for it either.
   ------------------------------------------------------------------ */
/* The homepage hero is 78vh because it is the first thing on the
   site. An interior hero does not need to own the screen, and these
   sources are 4:5 portraits, so a 78vh band crops them to about a
   2:1 slice and loses the subject. A shorter band keeps the same
   treatment with far less zoom. */
.lede--sn{min-height:min(58vh,32rem)}
.lede--sn .lede__c{padding-top:clamp(7rem,12vw,9rem);
  padding-bottom:clamp(2.6rem,5vw,3.6rem)}

/* Crop per photo: a blanket object-position cannot serve a flower,
   a belly, a baby's hand and two portraits at once. */
.lede--ttc       .lede__bg img{object-position:50% 46%}
.lede--pregnancy .lede__bg img{object-position:50% 38%}
.lede--postpartum.lede__bg img,
.lede--postpartum .lede__bg img{object-position:52% 30%}
.lede--everyday  .lede__bg img{object-position:50% 44%}
.lede--menopause .lede__bg img{object-position:50% 18%}

/* ------------------------------------------------------------------
   WHAT WE HELP WITH
   ------------------------------------------------------------------ */
.snp__what{background:var(--off);padding-top:calc(var(--vrhythm) * .8)}
.snw__h.snw__h{font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;letter-spacing:-.014em;
  color:var(--ink);margin:0}
.snw__list{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.snw__list li{font-family:var(--body);font-size:.9rem;line-height:1;color:var(--ink);
  background:var(--white);border:1px solid var(--rule);padding:.72rem .95rem}
.snw__say{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--rule);max-width:62ch}
.snw__say p{margin:0;font-size:1rem;line-height:1.8;color:var(--ink-2)}
.snw__go{display:inline-block;margin-top:1rem;font-family:var(--body);font-size:.68rem;
  letter-spacing:.17em;text-transform:uppercase;color:#5C4433;text-decoration:none}
.snw__go:after{content:" \2192";color:var(--pop)}
.snw__go:hover{color:#42301F}

/* ------------------------------------------------------------------
   SECTION HEADINGS
   .shead carries its own max-width, which pushed one heading 36px
   left of every other block. This container keeps the left edge a
   single line all the way down the page.
   ------------------------------------------------------------------ */
.snch{margin-bottom:1.8rem}
.snch__h.snch__h{font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;letter-spacing:-.014em;
  color:var(--ink);margin:0}

/* ------------------------------------------------------------------
   THE CARE INVOLVED
   ------------------------------------------------------------------ */
.snc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.snc__i{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--rule);padding:1.6rem 1.5rem 1.5rem;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease}
.snc__i:hover{transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(31,24,9,.07), 0 20px 40px -24px rgba(31,24,9,.42)}
.snc__t{font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:1.2rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.snc__p{margin-top:.7rem;font-size:.93rem;line-height:1.7;color:var(--ink-2);flex:1 1 auto}
.snc__go{margin-top:1.3rem;font-family:var(--body);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:#5C4433}
.snc__go:after{content:" \2192";color:var(--pop)}
.snc__i:hover .snc__go{color:#42301F}
@media(max-width:880px){ .snc{grid-template-columns:1fr} }

/* ------------------------------------------------------------------
   KEY VISITS
   A timeline rather than cards: the rule down the left says these
   happen in an order, which is the point of the section.
   ------------------------------------------------------------------ */
.snk{list-style:none;display:grid;gap:0}
.snk__i{position:relative;padding:0 0 1.8rem 10.5rem}
.snk__i:last-child{padding-bottom:0}
/* The connector stops at the last marker instead of running past it. */
.snk__i:not(:last-child):before{content:"";position:absolute;left:9.1rem;top:.75rem;
  bottom:-.35rem;width:1px;background:var(--rule)}
.snk__i:after{content:"";position:absolute;left:8.85rem;top:.5rem;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--pop)}
.snk__w{position:absolute;left:0;top:.18rem;width:8rem;text-align:right;
  font-family:var(--body);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.5}
.snk__h{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:1.14rem;line-height:1.3;letter-spacing:-.008em;color:var(--ink)}
.snk__p{margin:.5rem 0 0;font-size:.95rem;line-height:1.7;color:var(--ink-2);max-width:58ch}

/* On a phone the right-aligned stage label has nowhere to sit, so it
   moves above its heading and the rule moves to the far left. */
@media(max-width:700px){
  .snk__i{padding:0 0 1.7rem 1.6rem}
  .snk__i:not(:last-child):before{left:.2rem;top:1.5rem;bottom:-.3rem}
  .snk__i:after{left:0;top:1.25rem}
  .snk__w{position:static;width:auto;text-align:left;display:block;margin-bottom:.4rem}
}

/* ------------------------------------------------------------------
   FAQ
   <details> rather than a scripted accordion: it opens without
   JavaScript, it is keyboard operable for free, and find-in-page can
   reach closed answers.
   ------------------------------------------------------------------ */
.snp__faq{background:var(--off)}
.snf{border-top:1px solid var(--rule)}
.snf__i{border-bottom:1px solid var(--rule)}
.snf__q{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1rem;
  padding:1.15rem 0;min-height:44px;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:1.06rem;line-height:1.4;letter-spacing:-.006em;
  color:var(--ink)}
.snf__q::-webkit-details-marker{display:none}
.snf__q:after{content:"+";margin-left:auto;font-family:var(--body);font-size:1.1rem;
  line-height:1.2;color:var(--pop);flex:0 0 auto}
.snf__i[open] .snf__q:after{content:"\2212"}
.snf__q:focus-visible{outline:2px solid var(--pop);outline-offset:2px}
.snf__a{padding:0 2rem 1.3rem 0;max-width:68ch}
.snf__a p{margin:0;font-size:.97rem;line-height:1.75;color:var(--ink-2)}

/* ------------------------------------------------------------------
   CLOSING
   ------------------------------------------------------------------ */
.snp__end{background:linear-gradient(168deg,#FDF6F4 0%,#F7E7E3 58%,#F2DCD6 100%)}
.sne__h.sne__h{font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.16;letter-spacing:-.016em;
  color:var(--ink);margin:0}
.sne__p{margin:1rem 0 1.8rem;max-width:52ch;font-size:1rem;line-height:1.75;color:var(--ink-2)}
.sne__acts{display:flex;gap:1rem;flex-wrap:wrap}
.sne__acts .btn{margin:0}

/* The homepage hero sits on a mid-tone photograph, so its overlay can
   be light. Three of these five are pale (a backlit flower, a grey
   studio wall, blown-out daylight) and white body copy was washing
   out on them. A stronger scrim, applied only to these heroes, keeps
   the same look and gets the sub-line back over 4.5:1. */
.lede--sn:after{background:linear-gradient(180deg,
  rgba(31,24,9,.46) 0%, rgba(31,24,9,.40) 45%, rgba(31,24,9,.74) 100%)}

/* The season pages' condition list had no room for an opening line.
   Fertility gained one, so the list now reads as the answer to a
   sentence rather than as a bare grid of terms. */
.snw__lede{margin:1.1rem 0 0;max-width:58ch;font-size:1.02rem;line-height:1.75;
  color:var(--ink-2)}
.snw__lede + .snw__list{margin-top:1.7rem}

/* The standing line about lifestyle factors, added 3 Oct. Set quieter
   than the paragraph above it: it is true of every season and belongs
   as a footnote to the approach rather than as another claim. */
.snw__also{margin:.9rem 0 0;font-size:.95rem;line-height:1.7;color:var(--ink-3)}


/* ==================================================================
   The remaining seven pages
   /about/approach  /learn  /learn/articles  /learn/programs
   /shop  /events  /careers

   One sheet for all of them. They share a shape: the .lede hero from
   the homepage where a photo exists, a stated-position block, a grid
   of cards, and a close. Nothing new is invented; .snch, .snk, .snf
   and .sne come from the hub pages, which these load alongside.
   ================================================================== */

.gp,.gpg,.gpsay,.gp__end .sne{max-width:var(--measure);margin-inline:auto;
  padding-inline:var(--gutter)}

/* --- plain page head, for pages with no hero photograph ----------- */
.gp__top{padding-bottom:calc(var(--vrhythm) * .5)}
.gp__h1{font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.14;letter-spacing:-.02em;
  color:var(--ink);margin:0;max-width:20ch;text-wrap:balance}
.gp__p{margin:1.2rem 0 0;max-width:56ch;font-size:1.06rem;line-height:1.75;color:var(--ink-2)}
.gp__acts{margin-top:1.9rem;display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
.gp__acts .btn{margin:0}
.gp__tel{font-family:var(--body);font-size:.9rem;color:var(--ink-2);text-decoration:none}
.gp__tel:hover{color:var(--ink)}

/* --- a stated position, set larger than body copy ------------------
   Used on /about/approach for the lines Lily has settled on. They are
   the argument, not decoration, so they get display type and air. */
/* The measure belongs on the <p>, not on .gpsay. A ch unit resolves
   against the element's OWN font, and .gpsay inherits 16px Jost while
   the statement inside it is 36.8px Fraunces, so 46ch came out at
   299px and broke a 52-character line into four cramped ones. On the
   <p> the unit measures the type it is actually setting. */
.gpsay{max-width:var(--measure);margin-inline:auto;text-align:center}
.gpsay p{margin:0 auto;max-width:28ch;font-family:'Fraunces',Georgia,serif;
  font-weight:400;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.3;
  letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.gpsay p + p{margin-top:1.1rem}

/* --- card grid ----------------------------------------------------- */
.gpg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.2vw,1.7rem)}
.gpg--2{grid-template-columns:repeat(2,1fr)}
.gpc{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--rule);padding:1.6rem 1.5rem 1.5rem;text-decoration:none;color:inherit}
a.gpc{transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease}
a.gpc:hover{transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(31,24,9,.07), 0 20px 40px -24px rgba(31,24,9,.42)}
.gpc__t{font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:1.18rem;line-height:1.28;letter-spacing:-.01em;color:var(--ink)}
.gpc__p{margin-top:.7rem;font-size:.93rem;line-height:1.7;color:var(--ink-2);flex:1 1 auto}
.gpc__go{margin-top:1.3rem;font-family:var(--body);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:#5C4433}
.gpc__go:after{content:" \2192";color:var(--pop)}
a.gpc:hover .gpc__go{color:#42301F}
/* A card that is not yet a link should not pretend to be one. */
.gpc--soon{background:transparent}
.gpc--soon .gpc__go{color:var(--ink-3)}
.gpc--soon .gpc__go:after{content:""}

/* --- topic list, for the LEARN library ----------------------------- */
.gptop{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);
  list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
.gptop li{font-family:var(--body);font-size:.9rem;line-height:1;color:var(--ink);
  background:var(--white);border:1px solid var(--rule);padding:.72rem .95rem}

/* --- an honest empty state ------------------------------------------
   Better than a grid of placeholder cards: it says what is coming and
   gives the one action that is actually available. */
.gpsoon{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.gpsoon__in{border:1px solid var(--rule);background:var(--white);
  padding:clamp(1.6rem,3.4vw,2.4rem);max-width:62ch}
.gpsoon__h{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:1.2rem;line-height:1.3;color:var(--ink)}
.gpsoon__p{margin:.7rem 0 0;font-size:.95rem;line-height:1.75;color:var(--ink-2)}
.gpsoon__p a{color:var(--ink)}

.gp__alt{background:var(--off)}
.gp__end{background:linear-gradient(168deg,#FDF6F4 0%,#F7E7E3 58%,#F2DCD6 100%)}
.gp__end .sne__h.sne__h{font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.16;
  letter-spacing:-.016em;color:var(--ink);margin:0}
.gp__end .sne__p{margin:1rem 0 1.8rem;max-width:56ch;font-size:1rem;line-height:1.75;
  color:var(--ink-2)}
.gp__end .sne__p a{color:var(--ink)}
.gp__end .sne__acts{display:flex;gap:1rem;flex-wrap:wrap}
.gp__end .sne__acts .btn{margin:0}

@media(max-width:980px){ .gpg{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .gpg,.gpg--2{grid-template-columns:1fr} }

/* /about/approach runs the plain .lede, so it inherits the homepage
   height, scrim and crop with nothing overridden. Nothing to add. */

/* ==================================================================
   PORTED PAGES
   Components the old design used that the new one did not have yet:
   grouped condition chips, prose blocks, and the /what-we-treat
   service lines with their anchor ids.
   ================================================================== */

/* grouped condition chips */
.cgrp{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.cgrp + .cgrp{margin-top:2rem}
.cgrp__h{margin:0 0 .9rem;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:1.1rem;line-height:1.3;letter-spacing:-.008em;color:var(--ink)}
.cgrp__l{padding-inline:0;max-width:none}

/* prose blocks: one measure, generous leading, nothing clever */
.gp__prose{padding-block:calc(var(--vrhythm) * .9)}
.pr{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.pr + .pr{margin-top:2.6rem}
.pr__h.pr__h{margin:0 0 .8rem;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:clamp(1.35rem,2.3vw,1.8rem);line-height:1.2;
  letter-spacing:-.014em;color:var(--ink)}
.pr__p{margin:0;max-width:66ch;font-size:1rem;line-height:1.8;color:var(--ink-2)}
.pr__p + .pr__p{margin-top:.9rem}

/* /what-we-treat service lines. scroll-margin so an anchor arriving
   from the Care menu does not land under the fixed header. */
.line{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  scroll-margin-top:6rem}
.line + .line{margin-top:2.8rem;padding-top:2.4rem;border-top:1px solid var(--rule)}
.line__h.line__h{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;
  letter-spacing:-.014em;color:var(--ink)}
.line__p{margin:.7rem 0 0;max-width:64ch;font-size:1rem;line-height:1.75;color:var(--ink-2)}
.line__l{padding-inline:0;max-width:none;margin-top:1.1rem}
.line__go{display:inline-block;margin-top:1.2rem;font-family:var(--body);font-size:.68rem;
  letter-spacing:.17em;text-transform:uppercase;color:#5C4433;text-decoration:none}
.line__go:after{content:" \2192";color:var(--pop)}
.line__go:hover{color:#42301F}

/* ==================================================================
   MOVEMENT STUDIO
   /classes, /first-class, /partner-memberships and the live
   schedule. Everything reuses the care pages' components; what is
   defined here is the handful of things a studio page needs that a
   clinical page does not: an offer block, the vendor booking frame,
   and a "coming soon" state for a card that is not a link yet.
   ================================================================== */

.sec--off{background:var(--off)}
/* The booking widget is the content, so the band around it gives it
   the page gutter and nothing else. */
.sec--flush{padding-block:0}

/* studio hero: the source is a wide room shot, so it needs far less
   crop than the 4:5 portraits the season pages use. */
.lede--studio .lede__bg img{object-position:50% 42%}

.gp__top--tight{padding-bottom:calc(var(--vrhythm) * .45)}

/* studio amenities, under the two location cards */
.loc__l{margin-top:1.6rem}

/* A card that is not a link yet: same frame, no hover lift, and the
   call to action reads as a status rather than an invitation. */
.lc--soon{cursor:default}
.lc--soon:hover{transform:none;box-shadow:none}
.lc__go--flat,.snc__go--flat{color:var(--ink-3)}
.lc__go--flat:after,.snc__go--flat:after{content:none}

.cgrp__p{margin:0 0 .9rem;max-width:62ch;font-size:.97rem;line-height:1.7;color:var(--ink-2)}

/* Program and partner cards carry a meta line under the title:
   duration, level, who it is for. Small, uppercase, and above the
   body copy, which is where a reader looks for it. */
.snc__m{display:block;margin-top:.5rem;font-family:var(--body);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.snc__i--flat{cursor:default}
.snc__i--flat:hover{transform:none;box-shadow:none}

/* ------------------------------------------------------------------
   OFFER BLOCK
   One price, large, with its terms beside it. Two columns on a
   desktop so the number anchors the left edge; stacked on a phone.
   ------------------------------------------------------------------ */
.offr{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
.offr__price{display:flex;flex-direction:column;gap:.5rem}
.offr__n{font-family:'Fraunces',Georgia,serif;font-weight:400;line-height:.9;
  font-size:clamp(3.4rem,8vw,5.5rem);letter-spacing:-.03em;color:var(--ink)}
.offr__k{font-family:var(--body);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.6}
.offr__was{font-family:var(--body);font-size:.9rem;color:var(--ink-2);line-height:1.6}
.offr__l{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.offr__l li{padding:1rem 0;border-bottom:1px solid var(--rule);
  font-size:1rem;line-height:1.7;color:var(--ink-2);max-width:62ch}
@media(max-width:760px){
  .offr{grid-template-columns:1fr}
  .offr__l{border-top:0}
}

/* ------------------------------------------------------------------
   MARIANA TEK MOUNT
   The vendor injects an iframe that sizes itself, so the only job
   here is to give it the page measure and a minimum height, so the
   band does not collapse to nothing while the bundle loads.
   ------------------------------------------------------------------ */
.mtk{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.mtk .mariana-tek-mount{min-height:30rem}
.mtk iframe{display:block;width:100%;border:0}
.mtk__note{margin-top:1.4rem}

/* ==================================================================
   LEGAL DOCUMENTS
   /privacy and /terms. One column, one measure, and a type scale
   that makes a numbered clause findable without turning a legal
   document into a marketing page. Headings carry ids so a clause
   can be linked to; #npp is linked from the consent checkbox on
   /book, so it gets scroll-margin like the rest.
   ================================================================== */

.lgl{max-width:52rem;margin:0 auto;padding-inline:var(--gutter)}
.lgl__eff{margin:1.4rem 0 0;font-family:var(--body);font-size:.62rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.lgl__h2.lgl__h2{margin:2.8rem 0 .9rem;padding-top:1.8rem;border-top:1px solid var(--rule);
  font-family:'Fraunces',Georgia,serif;font-weight:400;text-transform:none;
  font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.2;letter-spacing:-.012em;
  color:var(--ink);scroll-margin-top:6rem}
.lgl > .lgl__h2:first-child{margin-top:0;padding-top:0;border-top:0}
.lgl__h3.lgl__h3{margin:1.8rem 0 .7rem;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:1.08rem;line-height:1.3;letter-spacing:-.006em;
  color:var(--ink);scroll-margin-top:6rem}
.lgl__p{margin:0 0 .9rem;font-size:.97rem;line-height:1.8;color:var(--ink-2)}
.lgl__l,.lgl__o{margin:0 0 1.1rem;padding-left:1.2rem}
.lgl__l li,.lgl__o li{margin:0 0 .45rem;font-size:.97rem;line-height:1.8;color:var(--ink-2)}
.lgl strong,.lgl b{color:var(--ink);font-weight:400}
.lgl a{color:#5C4433;text-decoration:underline;text-underline-offset:3px}
.lgl a:hover{color:#42301F}

/* ------------------------------------------------------------------
   RATE TABLE
   A real <table>, because it is one: three columns of figures with
   row and column headers, which a screen reader can then announce.
   Scrolls in its own container on a narrow screen rather than
   pushing the page sideways.
   ------------------------------------------------------------------ */
.rate{max-width:var(--measure);margin:0 auto 2rem;padding-inline:var(--gutter);
  overflow-x:auto}
.rate__t{width:100%;border-collapse:collapse;min-width:26rem;
  font-variant-numeric:tabular-nums}
.rate__t th,.rate__t td{text-align:left;padding:.95rem 1rem;
  border-bottom:1px solid var(--rule);font-weight:400}
.rate__t thead th{font-family:var(--body);font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--ink-3)}
.rate__t tbody th{font-family:'Fraunces',Georgia,serif;font-size:1.02rem;
  letter-spacing:-.006em;color:var(--ink)}
.rate__t tbody td{font-size:1rem;color:var(--ink-2)}

/* A section heading followed by one line of context. Not an eyebrow:
   it sits under the heading, not stacked above it. */
.snch__p{margin:.7rem 0 0;max-width:60ch;font-size:1rem;line-height:1.7;color:var(--ink-2)}

/* ==================================================================
   INLINE LINKS IN PROSE
   The new prose components had no rule for a link inside a sentence,
   so a mailto, a phone number or a cross-reference fell back to the
   browser default: blue and underlined. Espresso at 9:1 on white,
   underlined with an offset so descenders stay readable, which is the
   same treatment the legal pages use.
   ================================================================== */
.pr__p a, .line__p a, .cgrp__p a, .snk__p a, .snch__p a,
.snf__a p a, .snw__say a, .sne__p a, .gp__p a, .offr__l a,
.lgl__p a, .lgl__l a{
  color:#5C4433;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.pr__p a:hover, .line__p a:hover, .cgrp__p a:hover, .snk__p a:hover,
.snch__p a:hover, .snf__a p a:hover, .snw__say a:hover, .sne__p a:hover,
.gp__p a:hover, .offr__l a:hover, .lgl__p a:hover, .lgl__l a:hover{
  color:#42301F;text-decoration-color:var(--pop)}

/* ------------------------------------------------------------------
   RATE TABLE ON A PHONE
   At 390px the three columns needed 416px inside a 342px container, so
   the Follow-up figure was cut off at the right edge. Horizontal scroll
   technically reached it, but a price nobody can see is a price nobody
   reads. Below 560px each row becomes its own block with the service
   as the heading and the two figures named underneath, so nothing is
   clipped and nothing scrolls sideways. Still one <table>, so the
   header cells keep announcing the figures to a screen reader.
   ------------------------------------------------------------------ */
@media(max-width:560px){
  .rate{overflow-x:visible}
  .rate__t{min-width:0;display:block}
  .rate__t thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .rate__t tbody,.rate__t tr,.rate__t th,.rate__t td{display:block;width:auto}
  .rate__t tr{padding:1rem 0;border-bottom:1px solid var(--rule)}
  .rate__t tr:last-child{border-bottom:0}
  .rate__t tbody th{padding:0 0 .6rem;border-bottom:0;font-size:1.08rem}
  .rate__t tbody td{display:flex;justify-content:space-between;align-items:baseline;
    gap:1rem;padding:.35rem 0;border-bottom:0}
  .rate__t tbody td:before{content:attr(data-l);font-family:var(--body);
    font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
}

/* A closing band whose copy is the invitation to join the email list
   drops the blush, so the list sits on white the way it does
   everywhere else on the site. */
.gp__end--flat,.snp__end--flat{background:none}

/* ==================================================================
   SKIN & AESTHETICS
   A secondary service line, so it borrows the shared page components
   rather than getting a look of its own. Two additions only: the
   location kicker above the h1 and the lede line under it, both of
   which Lily's copy for this page calls for.
   ================================================================== */
.gp__k{margin:0 0 1rem;font-family:var(--body);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.gp__lede{margin:.9rem 0 0;max-width:46ch;font-family:'Fraunces',Georgia,serif;
  font-weight:400;font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.45;
  letter-spacing:-.008em;color:var(--ink)}
.gp__lede + .gp__p{margin-top:1rem}

/* ------------------------------------------------------------------
   MORE AT EMBODY
   One module, used at the foot of the pages where another service
   line is genuinely relevant. Links only, no explanation: the point
   is discovery, not a second pitch.
   ------------------------------------------------------------------ */
.mae{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.mae__k{margin:0 0 1rem;font-family:var(--body);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.mae__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:.6rem 1.6rem;align-items:baseline}
.mae__l a{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:1.05rem;
  line-height:1.4;letter-spacing:-.006em;color:#5C4433;text-decoration:none}
.mae__l a:after{content:" \2192";color:var(--pop)}
.mae__l a:hover{color:#42301F}

/* A cross-sell block: one card's worth of copy, not a whole section. */
.xsell{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.xsell__k{margin:0 0 .9rem;font-family:var(--body);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.xsell__h.xsell__h{margin:0 0 .6rem;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.2;
  letter-spacing:-.012em;color:var(--ink)}
.xsell__p{margin:0 0 1rem;max-width:58ch;font-size:1rem;line-height:1.75;color:var(--ink-2)}


/* ------------------------------------------------------------------
   CARE PAGE HEROES
   The care pages opened with a text head and ran straight into prose.
   They now use the season pages' hero verbatim, so the only thing set
   here is the crop: a blanket object-position cannot serve a portrait,
   a stretch, a resistance band and a feeding baby at once.
   ------------------------------------------------------------------ */
.lede--pf .lede__bg img{object-position:50% 50%}
.lede--pm .lede__bg img{object-position:52% 26%}
.lede--mh .lede__bg img{object-position:50% 12%}
.lede--lc .lede__bg img{object-position:50% 40%}
.lede--wt .lede__bg img{object-position:50% 20%}

/* ------------------------------------------------------------------
   SKIN & AESTHETICS IMAGERY
   The hero band shows a horizontal slice of a portrait, so its crop
   sits on the treatment rather than the whole face, which is what
   Lily asked for there. The pair by the consultation is the opposite:
   faces showing, her call on 3 Oct.
   ------------------------------------------------------------------ */
.lede--skin .lede__bg img{object-position:50% 30%}
.lede__k{margin:0 0 .9rem;font-family:var(--body);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.82)}

.skinduo{padding-block:0}
.duo{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.8vw,1.4rem)}
.duo__i{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--tint)}
.duo__i img{width:100%;height:100%;object-fit:cover;display:block}
.duo__i:first-child img{object-position:50% 18%}
.duo__i:last-child img{object-position:50% 12%}
@media(max-width:640px){
  .duo{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------
   PHOTO AND TEXT PAIR
   One picture beside one short block of copy. Used for Mom & Me
   Pilates, where the photograph says what the class is faster than
   the sentence does. Stacks photo-first on a phone.
   ------------------------------------------------------------------ */
.pair{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3rem);align-items:center}
.pair__img{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--tint)}
.pair__img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.pair__h.pair__h{margin:0 0 .8rem;font-family:'Fraunces',Georgia,serif;font-weight:400;
  text-transform:none;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;
  letter-spacing:-.014em;color:var(--ink)}
.pair__p{margin:0 0 1.2rem;max-width:52ch;font-size:1rem;line-height:1.75;color:var(--ink-2)}
@media(max-width:760px){
  .pair{grid-template-columns:1fr}
  .pair__img{aspect-ratio:3/2}
}


/* Wellness Shop: a still life, so the band crops to the centre of the
   arrangement rather than to a subject. */
.lede--shop .lede__bg img{object-position:50% 16%}

/* ------------------------------------------------------------------
   GRADIENT HERO
   For pages with no photograph worth running yet. Blush at the top
   easing into a lighter coral, the same family as the closing bands
   so it reads as part of the system rather than a gap. The type turns
   to ink, since white on a pale ground is unreadable, and the buttons
   switch back to their on-light treatment.
   ------------------------------------------------------------------ */
.lede--grad{background:linear-gradient(168deg,
  #FDF6F4 0%, #FBEBE5 42%, #F8D3C6 76%, #F5C0AE 100%)}
.lede--grad:after{content:none}
.lede--grad .lede__c{color:var(--ink)}
.lede--grad .lede__h{color:var(--ink)}
.lede--grad .lede__p{color:var(--ink-2)}
.lede--grad .lede__k{color:var(--ink-3)}
.lede--grad .btn--f.btn--f{background:var(--pop);color:var(--ink)}
.lede--grad .btn--f.btn--f:hover{background:#E8714F;color:var(--ink)}
.lede--grad .btn--o.btn--o{border-color:var(--ink);color:var(--ink);background:transparent}
.lede--grad .btn--o.btn--o:hover{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}

/* ==================================================================
   /classes  ·  class-type layouts, 3 Oct
   Three variants live side by side while Lily picks one. They share
   .ccg as the grid wrapper and differ only in the card shape, so
   whichever she keeps, the other two blocks get deleted and nothing
   else on the page has to change.
   ================================================================== */

/* The address, now that there is one location and no card. */
.loca{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.loca__a{margin:0 0 1.4rem;max-width:46ch;font-family:var(--body);font-size:1rem;
  line-height:1.75;color:var(--ink-2)}
.loca__l{margin:0}

/* ---- A: photo card, image above the text, two per row ---------- */
.ccg{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,3vw,2.6rem)}
.cc2{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--rule)}
.cc2__i{margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--tint)}
.cc2__i img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.cc2__t{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.cc2__h{margin:0 0 .6rem;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:1.35rem;line-height:1.2;letter-spacing:-.012em;color:var(--ink)}
.cc2__p{margin:0 0 1.1rem;font-family:var(--body);font-size:.95rem;line-height:1.7;
  color:var(--ink-2)}
/* .gptop carries the page gutter and a max-width for full-bleed use;
   inside a card both have to come off or the chips sit inset. */
.cc2__l,.ccr__i .gptop,.cct__l{max-width:none;margin-inline:0;padding-inline:0}
.cc2__l{margin-top:auto;margin-bottom:0}
.ccr__i .gptop{margin:0}

/* ---- B: editorial row, photo and text side by side, alternating -- */
.ccr{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;gap:clamp(2.4rem,5vw,4rem)}
.ccr__i{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(1.6rem,4vw,3.4rem)}
.ccr__i:nth-child(even) .ccr__f{order:2}
.ccr__f{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--tint)}
.ccr__f img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.ccr__h{margin:0 0 .7rem;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.15;letter-spacing:-.015em;
  color:var(--ink)}
.ccr__p{margin:0 0 1.2rem;max-width:44ch;font-family:var(--body);font-size:1rem;
  line-height:1.75;color:var(--ink-2)}

/* ---- C: compact tile menu, name over the photo, four across ----- */
.cct{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem)}
.cct__i{display:flex;flex-direction:column}
.cct__f{position:relative;margin:0 0 .9rem;overflow:hidden;aspect-ratio:3/4;
  background:var(--tint)}
.cct__f img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.cct__f:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(31,24,9,.72) 0%,rgba(31,24,9,.12) 52%,transparent 78%)}
.cct__h{position:absolute;left:1rem;right:1rem;bottom:.85rem;z-index:1;margin:0;
  font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:1.22rem;
  line-height:1.15;letter-spacing:-.012em;color:#fff}
.cct__p{margin:0 0 .8rem;font-family:var(--body);font-size:.9rem;line-height:1.65;
  color:var(--ink-2)}
.cct__l{margin:0}

@media(max-width:900px){
  .ccg{grid-template-columns:1fr}
  .ccr__i{grid-template-columns:1fr}
  .ccr__i:nth-child(even) .ccr__f{order:0}
  .cct{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .cct{grid-template-columns:1fr}
}

/* ---- class cards with no photography yet ------------------------
   Pink blocks rather than four stock images that are not the class
   they sit on. The shape, spacing and rhythm are the real layout's,
   so dropping the photos back in later changes nothing else. */
.cc2--flat{background:var(--tint);border-color:transparent}
.cc2--flat .cc2__t{padding:1.9rem 1.7rem 2rem;min-height:15rem}
.ccr--placeholder{}
.ccr__i--flat{grid-template-columns:minmax(0,1fr)}
.ccr__i--flat>div{background:var(--tint);padding:2rem 2.2rem 2.2rem}
.cct__f--flat{position:relative;margin:0 0 .9rem;aspect-ratio:3/4;
  background:var(--tint);display:flex;align-items:flex-end}
.cct__f--flat:after{content:none}
.cct__f--flat .cct__h{position:static;color:var(--ink);padding:0 1.1rem 1.1rem}

/* Card that ends in a button rather than a text link. */
.snc__i--act{display:flex;flex-direction:column}
.snc__i--act .snc__p{margin-bottom:1.3rem}
.snc__i--act .btn{margin-top:auto;align-self:flex-start}

/* Schedule page hero: shorter than the rest, so the booking widget
   stays near the top where someone arriving to book expects it. */
.lede--sched{min-height:min(42vh,23rem)}
.lede--sched .lede__c{padding-top:clamp(5rem,8vw,6.4rem);
  padding-bottom:clamp(2.2rem,4vw,3rem)}
.lede--sched .lede__h{font-size:clamp(2.1rem,4.6vw,3.2rem)}
.lede--sched .lede__bg img{object-position:50% 42%}

/* ==================================================================
   /shop  ·  STOREFRONT
   Laid out like Perelel's shop, in Embody's palette: a filter rail on
   the left, a two-up product grid on the right, each card a tinted
   image panel over a left-aligned block of type and one coral button.

   The product "pack" is drawn in CSS until Shopify holds the real
   product photography. It is a label on a tinted ground, not an
   attempt at a photograph, so nothing here pretends to be a product
   shot that does not exist.
   ================================================================== */
.shopw{padding-top:clamp(2.4rem,5vw,3.6rem)}
.shopw__in{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start}

/* ---- filter rail ---- */
.filt{position:sticky;top:5.5rem}
.filt__h{margin:0 0 .9rem;font-family:var(--body);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.filt__g{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  border-top:1px solid var(--rule)}
.filt__b{appearance:none;background:none;border:0;border-bottom:1px solid var(--rule);
  width:100%;text-align:left;padding:.78rem .2rem;cursor:pointer;
  font-family:var(--body);font-size:.95rem;line-height:1.4;color:var(--ink-2)}
.filt__b:hover{color:var(--ink)}
.filt__b.is-on{color:var(--ink);box-shadow:inset 2px 0 0 var(--pop);padding-left:.7rem}
.filt__b:focus-visible{outline:2px solid var(--pop);outline-offset:-2px}

/* ---- product grid ---- */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,3vw,2.6rem)}
.pgrid__empty{max-width:var(--measure);margin:2rem auto 0;padding-inline:var(--gutter);
  font-family:var(--body);color:var(--ink-2)}
.pcard{display:flex;flex-direction:column}
.pcard[hidden]{display:none}
.pcard__art{aspect-ratio:1/1;background:var(--tint,#EFE4C9);display:grid;place-items:center;
  margin-bottom:1.1rem;overflow:hidden}
.pcard__sub{margin:0 0 .25rem;font-family:var(--body);font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.pcard__h{margin:0 0 .5rem;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:1.14rem;line-height:1.22;letter-spacing:-.01em;color:var(--ink)}
.pcard__p{margin:0 0 1.2rem;font-family:var(--body);font-size:.9rem;line-height:1.65;
  color:var(--ink-2)}
.pcard__buy{margin-top:auto}
.pcard__btn{margin:0}

/* The stand-in pack: a carton face on the tinted ground. */
.pk{width:52%;aspect-ratio:3/4;background:rgba(255,255,255,.86);
  border-radius:.22rem;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;padding:1.2rem .9rem;text-align:center;
  box-shadow:0 10px 18px -12px rgba(31,24,9,.5)}
.pk__brand{font-family:var(--body);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.pk__name{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:.9rem;
  line-height:1.25;color:var(--ink)}

@media(max-width:860px){
  .shopw__in{grid-template-columns:1fr}
  .filt{position:static}
  .filt__g{flex-direction:row;flex-wrap:wrap;border-top:0;gap:.5rem}
  .filt__b{width:auto;border:1px solid var(--rule);padding:.6rem .9rem;font-size:.86rem}
  .filt__b.is-on{padding-left:.9rem;box-shadow:none;border-color:var(--pop);color:var(--ink)}
}
@media(max-width:520px){
  .pgrid{grid-template-columns:1fr}
  .pk{width:46%}
}

/* One photo left in the pair, so it holds a single wide frame rather
   than half a two-column grid. */
.duo--one{grid-template-columns:minmax(0,1fr)}
.duo--one .duo__i{aspect-ratio:16/9}


/* /skin-aesthetics · the treatment menu.
   Five services in a three-up card grid left a hole in the second row.
   A ruled list carries an odd number evenly, gives each description
   room, and matches how the rest of the site lists services. */
.trtl{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter);
  border-top:1px solid var(--rule)}
.trt{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);
  gap:.4rem clamp(1.4rem,4vw,3rem);padding:1.5rem 0;
  border-bottom:1px solid var(--rule)}
.trt__h{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:1.18rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.trt__p{margin:0;max-width:58ch;font-family:var(--body);font-size:.96rem;
  line-height:1.75;color:var(--ink-2)}
@media(max-width:700px){
  .trt{grid-template-columns:1fr;gap:.45rem;padding:1.25rem 0}
}

/* A button pair inside the prose column, left aligned with the text. */
.pr .acts--l{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-start;margin:0}

/* A Book button on each treatment row. It sits in a third column on
   a wide screen so the rows stay a clean menu, and drops under the
   description when the row stacks. */
.trt{grid-template-columns:minmax(0,16rem) minmax(0,1fr) auto}
.trt__b{margin:0;align-self:start;white-space:nowrap}
@media(max-width:700px){
  .trt{grid-template-columns:1fr}
  .trt__b{justify-self:start;margin-top:.9rem}
}