/* ==========================================================================
   THE GINGER INJECTOR — design system
   --------------------------------------------------------------------------
   Palette and type sampled from her own Instagram graphics: warm cream,
   blush rose, deep rose structure, thin letterspaced serif wordmark.
   Structure and rhythm borrowed from matheus-portfolio (cream canvas, warm
   ink, generous clamp scale, pill controls) and thewavemarketingwebsite
   (section contrast, soft elevation).
   Zero JS required for anything to be visible. Nothing depends on scroll.
   ========================================================================== */

/* self-hosted only — no third-party font CDN on the critical path */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight:300 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-italic.woff2") format("woff2");
  font-weight:300 600;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Switzer";src:url("/assets/fonts/switzer-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("/assets/fonts/switzer-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("/assets/fonts/switzer-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* metric-matched fallback so the swap causes no layout shift */
@font-face{font-family:"Switzer-fb";src:local("Helvetica Neue"),local("Arial");
  size-adjust:97%;ascent-override:96%;descent-override:24%;line-gap-override:0%}

:root{
  /* --- surfaces ---
     ALL ROSE, 2026-08-29. Pink is her brand colour, so the green structure colour was
     retired and --brand is now a deep rose chosen to MATCH THE GREEN'S LUMINANCE
     (0.0797 against 0.0779), which is what keeps every contrast ratio documented below
     true. Peace Love Med one mile away still owns deep-forest-on-cream, so leaving that
     lane is a gain rather than a cost. */
  --paper:#FCF8F6;          /* warm cream canvas */
  --paper-2:#F7EDE9;        /* section alt, rosier than a neutral off-white */
  --blush:#F7D0DD;          /* her brand pink, the rose field */
  --blush-2:#EFC0D0;
  --brand:#7E3A4B;          /* deep rose — structure, not decoration */
  --brand-deep:#5F2A38;
  --brand-soft:#A85F6E;

  /* --- ink ---
     The alphas below are not taste, they are WCAG 2.1 AA arithmetic. --ink-50 and
     --on-dark-40 carry real 11.5–14.5px text (table notes, captions, crumbs, footer
     headings), so both have to clear 4.5:1 against the *worst* surface they land on:
     ink over --blush needs .64, light over --ink needs .55. Anything below those and the
     text technically fails, on a site that tells people it is accessible. The two
     genuinely decorative tokens (--ink-12, --on-dark-16) are rules and borders and are
     exempt. Do not soften these back for looks without rerunning the numbers. */
  --ink:#231D1B;
  --ink-70:rgba(35,29,27,.72);
  --ink-50:rgba(35,29,27,.66);   /* 5.27:1 on paper, 4.63:1 on blush */
  --ink-30:rgba(35,29,27,.3);    /* non-text only */
  --ink-12:rgba(35,29,27,.13);
  --ink-06:rgba(35,29,27,.06);
  /* Control boundaries, not decoration. WCAG 1.4.11 wants 3:1 on the visible edge of an
     interactive element; --ink-12 sits at 1.28:1 and is fine for a rule between table
     rows but not for the thing that tells you a button is a button. .48 is the minimum
     that clears 3:1 on the cream. The rose field is fractionally lighter than the green
     was, where .48 falls to 2.93, so --edge-on-dark is .52 (3.16:1). Measured, not taste. */
  --edge:rgba(35,29,27,.48);
  --edge-on-dark:rgba(246,241,236,.52);
  --on-dark:#F6F1EC;
  --on-dark-70:rgba(246,241,236,.74);
  --on-dark-40:rgba(246,241,236,.62);  /* 6.44:1 on --ink, 3.90:1 on --brand (rules only) */
  --on-dark-16:rgba(246,241,236,.17);

  /* --- accent --- */
  --rose:#B26A72;           /* deeper rose for links + emphasis */
  --rose-deep:#8E4E56;

  /* --- type ---
     Fraunces + Switzer deliberately avoids the two local stacks: Cormorant Garamond +
     Outfit (Skin Place Institute, under a mile) and the Montserrat/Playfair med-spa default. */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Switzer","Switzer-fb",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;

  /* --- shape --- */
  --r:20px;
  --r-lg:28px;
  --r-pill:100px;
  --gut:clamp(20px,5vw,80px);
  --maxw:1240px;
  --shadow:0 24px 60px -34px rgba(35,29,27,.34);
  --shadow-lg:0 40px 90px -44px rgba(35,29,27,.42);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
/* Prose links were invisible. The reset above makes every <a> inherit the body colour
   with no underline, so all 98 in-prose internal links across the site were
   indistinguishable from the text around them: nothing to see, nothing to click.
   Scoped to unclassed anchors inside prose, so buttons, nav, chips, tiles and the
   footer keep their own treatment. --brand on paper is 7.7:1, well past AA. */
.sec p a:not([class]),.sec li a:not([class]),.phead p a:not([class]),
.faq p a:not([class]),.wlbox p a:not([class]),.notfor li a:not([class]),
.svc-qs a:not([class]),.note p a:not([class]){
  color:var(--brand);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(126,58,75,.42);
  transition:text-decoration-color .16s ease;
}
.sec p a:not([class]):hover,.sec li a:not([class]):hover,.phead p a:not([class]):hover,
.faq p a:not([class]):hover,.wlbox p a:not([class]):hover,.notfor li a:not([class]):hover,
.svc-qs a:not([class]):hover,.note p a:not([class]):hover{text-decoration-color:var(--brand)}
.blk p a:not([class]),.band p a:not([class]){color:var(--on-dark);
  text-decoration-color:rgba(246,241,236,.5)}
button{font:inherit;cursor:pointer;border:0;background:none}
::selection{background:var(--brand);color:var(--on-dark)}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.018em}
h1{font-size:clamp(38px,6.2vw,78px)}
h2{font-size:clamp(29px,4vw,52px)}
h3{font-size:clamp(21px,2.2vw,29px);line-height:1.22}
p{max-width:68ch}
strong{font-weight:600}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(64px,9vw,132px)}
.sec-tight{padding-block:clamp(44px,6vw,86px)}

/* eyebrow ------------------------------------------------------------- */
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand);display:flex;align-items:center;gap:11px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--brand);flex:none}
.on-dark .eyebrow,.dark .eyebrow{color:var(--on-dark-70)}
.on-dark .eyebrow::before,.dark .eyebrow::before{background:var(--on-dark-40)}

.lede{font-size:clamp(17px,1.5vw,21px);color:var(--ink-70);max-width:60ch;line-height:1.6}

/* buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  background:var(--brand);color:var(--on-dark);
  transition:background .25s ease,transform .25s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.btn:hover{background:var(--brand-deep);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge)}
.btn--ghost:hover{background:var(--ink);color:var(--on-dark);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--light{background:var(--on-dark);color:var(--brand-deep)}
.btn--light:hover{background:#fff;color:var(--brand-deep)}
.btn--rose{background:var(--rose);color:#fff}
.btn--rose:hover{background:var(--rose-deep)}
.btn .arw{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.btn:hover .arw{transform:translateX(4px)}

/* header --------------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(251,247,244,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-06);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:15px}
.mark{display:flex;flex-direction:column;line-height:1;gap:5px}
.mark b{
  font-family:var(--serif);font-weight:400;font-size:19px;
  letter-spacing:.19em;text-transform:uppercase;
}
.mark small{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  font-size:14.5px;font-weight:500;color:var(--ink-70);
  padding:9px 14px;border-radius:var(--r-pill);transition:color .2s,background .2s;
}
.nav a:hover{color:var(--ink);background:var(--ink-06)}
.nav a[aria-current="page"]{color:var(--brand);font-weight:600}
.hdr .btn{padding:12px 22px;font-size:14px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px}
.burger span{display:block;width:20px;height:1.6px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.6px;background:var(--ink);transition:transform .2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media(max-width:1000px){
  .nav{display:none}
  .burger{display:flex}
  .hdr-in .btn{display:none}
}
/* Mobile nav: a <details> whose <summary> IS the burger, so the native toggle
   does the work and it functions with JS fully off. The old version hid the
   summary and pointed an anchor at the details, which can scroll to a details
   element but can never open one, so the menu was unopenable. */
.mnav{display:none}
.mnav summary{list-style:none;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
@media(max-width:1000px){
  .mnav{display:block}
  .mnav .burger{display:flex}
  .mnav-body{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:70;
    background:var(--paper);border-bottom:1px solid var(--ink-12);
    box-shadow:0 24px 50px -30px rgba(35,29,27,.35);
    grid-template-columns:1fr 1fr;gap:2px;padding:14px var(--gut) 22px;
  }
  .mnav[open] .mnav-body{display:grid}
  .mnav[open] .burger span{background:transparent}
  .mnav[open] .burger span::before{transform:translateY(6px) rotate(45deg)}
  .mnav[open] .burger span::after{transform:translateY(-6px) rotate(-45deg)}
  .mnav-body a{padding:13px 4px;font-size:15px;font-weight:500;border-bottom:1px solid var(--ink-06)}
  .mnav-body .btn{grid-column:1/-1;margin-top:14px;justify-content:center}
}

/* hero ----------------------------------------------------------------- */
.hero{position:relative;padding-block:clamp(52px,8vw,104px) clamp(56px,8vw,110px);overflow:hidden}
.hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(74vw,860px);aspect-ratio:1;right:-19%;top:-30%;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,var(--blush) 0%,rgba(243,225,225,.5) 46%,transparent 71%);
}
.hero>*{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,74px);align-items:center}
.hero h1{margin-bottom:26px}
.hero h1 em{font-style:italic;color:var(--brand)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:clamp(34px,4.5vw,52px);
  padding-top:24px;border-top:1px solid var(--ink-12);
}
.hero-proof div{display:flex;flex-direction:column;gap:3px}
.hero-proof b{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.02em}
.hero-proof span{font-size:12.5px;font-weight:500;color:var(--ink-50);letter-spacing:.01em}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-media{order:-1}
}

/* photo slot — reads as a designed object, never as a broken image ------ */
.pslot{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--blush);
  box-shadow:var(--shadow);isolation:isolate;
}
.pslot::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(255,255,255,.5),transparent 56%),
    linear-gradient(206deg,rgba(126,58,75,.09) 0%,transparent 42%);
}
.pslot img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
/* a filled slot drops the empty-state tint — see pslot() in build.py */
.pslot--img::after{display:none}
.pslot--img{background:var(--cream)}
.pslot--portrait{aspect-ratio:4/5}
.pslot--wide{aspect-ratio:16/10}
.pslot--square{aspect-ratio:1}
.pslot-ph{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:26px;
  background:
    linear-gradient(148deg,var(--blush) 0%,var(--blush-2) 52%,#E7D6CE 100%);
}
.pslot-ph i{
  display:block;width:54px;height:54px;margin:0 auto 15px;border-radius:50%;
  border:1.5px solid rgba(126,58,75,.34);position:relative;
}
.pslot-ph i::after{
  content:"";position:absolute;inset:11px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,rgba(255,255,255,.9),rgba(126,58,75,.16));
}
.pslot-ph span{
  display:block;font-family:var(--serif);font-size:15px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(126,58,75,.62);
}
.pslot-cap{
  position:absolute;left:16px;bottom:16px;z-index:2;
  background:rgba(35,29,27,.62);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  color:var(--on-dark);font-size:12.5px;font-weight:500;
  border-radius:var(--r-pill);padding:8px 15px;
}

/* statement ------------------------------------------------------------ */
.stmt{background:var(--paper-2)}
.stmt p{
  font-family:var(--serif);font-size:clamp(24px,3.5vw,46px);line-height:1.24;
  letter-spacing:-.022em;max-width:22ch;
}
.stmt p em{font-style:italic;color:var(--brand)}
.stmt .sig{margin-top:30px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-50);letter-spacing:.02em}

/* cards ---------------------------------------------------------------- */
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:#fff;border-radius:var(--r);padding:clamp(22px,2.4vw,32px);
  box-shadow:0 2px 4px -2px rgba(35,29,27,.07),0 16px 40px -30px rgba(35,29,27,.26);
  display:flex;flex-direction:column;gap:11px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3 a{color:inherit}
.card .price{
  font-family:var(--serif);font-size:24px;color:var(--brand);letter-spacing:-.015em;
}
.card .price small{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-50);letter-spacing:.02em}
.card p{font-size:15.5px;color:var(--ink-70);max-width:none}
.card .more{
  margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:600;color:var(--brand);
  display:inline-flex;align-items:center;gap:7px;
}
.card--blush{background:var(--blush)}
.card--brand{background:var(--brand);color:var(--on-dark)}
.card--brand p{color:var(--on-dark-70)}
.card--brand .price{color:var(--on-dark)}

/* price table ---------------------------------------------------------- */
.ptable{width:100%;border-collapse:collapse;font-size:16px}
.ptable caption{
  text-align:left;font-family:var(--serif);font-size:clamp(20px,2vw,27px);
  padding-bottom:14px;letter-spacing:-.015em;
}
.ptable th{
  text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-50);padding:0 0 11px;border-bottom:1.5px solid var(--ink-12);
}
.ptable td{padding:15px 0;border-bottom:1px solid var(--ink-06);vertical-align:top}
.ptable td:first-child{font-weight:500;padding-right:18px}
/* Price-column styling ONLY when a second column exists. With SHOW_PRICES off the
   treatment name is the last child, and unguarded these rules right-aligned it,
   set it in green serif, and nowrap forced the table wider than a phone. */
.ptable th:last-child:not(:first-child),.ptable td:last-child:not(:first-child){text-align:right}
.ptable td:last-child:not(:first-child){
  font-family:var(--serif);font-size:19px;color:var(--brand);white-space:nowrap;padding-left:14px;
}
.ptable td small{display:block;font-family:var(--sans);font-size:13.5px;font-weight:400;color:var(--ink-50);margin-top:3px;max-width:52ch}
.ptable tr:last-child td{border-bottom:0}

/* dark band ------------------------------------------------------------ */
.band{background:var(--brand);color:var(--on-dark)}
.band h2,.band h3{color:var(--on-dark)}
.band p{color:var(--on-dark-70)}
.band .lede{color:var(--on-dark-70)}
.band-blush{background:var(--blush)}

/* review / proof ------------------------------------------------------- */
.stars{display:flex;gap:3px;color:var(--rose);font-size:15px;letter-spacing:.08em}
.band .stars{color:#E6BFC2}
.quote{
  background:#fff;border-radius:var(--r);padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;gap:13px;
  box-shadow:0 2px 4px -2px rgba(35,29,27,.07),0 16px 40px -30px rgba(35,29,27,.26);
}
.quote blockquote{font-family:var(--serif);font-size:19px;line-height:1.42;letter-spacing:-.012em}
.quote cite{font-style:normal;font-size:13px;font-weight:600;color:var(--ink-50);margin-top:auto}

/* list ----------------------------------------------------------------- */
.ticks{list-style:none;display:grid;gap:13px}
.ticks li{position:relative;padding-left:30px;font-size:16px;color:var(--ink-70)}
.ticks li::before{
  content:"";position:absolute;left:0;top:9px;width:13px;height:8px;
  border-left:1.8px solid var(--brand);border-bottom:1.8px solid var(--brand);
  transform:rotate(-45deg);
}
/* Exclusions. Deliberately NOT .ticks — a check mark beside "pregnant or
   breastfeeding" reads as an instruction to go ahead. */
.nolist{list-style:none;display:grid;gap:17px}
.nolist li{position:relative;padding-left:30px;font-size:16px;color:var(--ink-70)}
.nolist li::before{
  content:"";position:absolute;left:0;top:12px;width:14px;height:2px;
  background:var(--brand);opacity:.55;border-radius:2px;
}
.band .ticks li{color:var(--on-dark-70)}
.band .ticks li::before{border-color:#EFC7D3}

/* steps ---------------------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:clamp(18px,2vw,26px)}
.step{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--serif);font-size:26px;color:var(--brand);line-height:1;
  padding-top:3px;min-width:44px;
}
/* The five steps are the top-level sections of /consultation/, so they are h2 in the
   document outline and a screen reader hears them in order under the h1. They just
   don't want to be 52px on screen, hence the size override rather than an h3. */
.step-h{font-size:clamp(21px,2.2vw,29px);line-height:1.22;margin-bottom:6px}
.step h3{margin-bottom:6px}
.step p{font-size:15.5px;color:var(--ink-70)}

/* faq — plain details, zero JS ----------------------------------------- */
.faq{display:grid;gap:0}
.faq details{border-bottom:1px solid var(--ink-12);padding:7px 0}
.faq summary{
  list-style:none;cursor:pointer;padding:25px 44px 25px 0;position:relative;
  font-family:var(--serif);font-size:clamp(18px,1.7vw,21px);letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--brand);border-bottom:1.6px solid var(--brand);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:2px 0 27px;color:var(--ink-70);font-size:16px;max-width:68ch}

/* cta ------------------------------------------------------------------ */
.cta-band{background:var(--brand);color:var(--on-dark);border-radius:var(--r-lg);padding:clamp(38px,5.5vw,76px);text-align:center}
.cta-band h2{margin-bottom:16px}
.cta-band p{margin-inline:auto;color:var(--on-dark-70)}
.cta-band .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* footer --------------------------------------------------------------- */
.ftr{background:var(--ink);color:var(--on-dark);padding-block:clamp(52px,7vw,88px) 34px}
.ftr h2{color:var(--on-dark)}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,44px)}
@media(max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}
.ftr .mark b{color:var(--on-dark)}
.ftr .mark small{color:var(--on-dark-40)}
.ftr h4,.ftr .ftr-h{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-40);margin-bottom:15px}
.ftr ul{list-style:none;display:grid;gap:9px}
.ftr a{color:var(--on-dark-70);font-size:15px;transition:color .2s}
.ftr a:hover{color:var(--on-dark)}
.ftr address{font-style:normal;color:var(--on-dark-70);font-size:15px;line-height:1.75}
.ftr-base{
  margin-top:clamp(36px,5vw,60px);padding-top:24px;border-top:1px solid var(--on-dark-16);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--on-dark-40);
}

/* page head ------------------------------------------------------------ */
.phead{padding-block:clamp(44px,6vw,86px) clamp(30px,4vw,54px);position:relative;overflow:hidden}
.phead::before{
  content:"";position:absolute;width:min(64vw,660px);aspect-ratio:1;right:-16%;top:-46%;border-radius:50%;
  background:radial-gradient(circle at 42% 42%,var(--blush) 0%,rgba(243,225,225,.42) 48%,transparent 72%);
  pointer-events:none;
}
.phead>*{position:relative}
.phead h1{max-width:19ch;margin-bottom:20px}
.crumb{font-size:13px;color:var(--ink-50);margin-bottom:20px}
.crumb a{color:var(--ink-50)}
.crumb a:hover{color:var(--brand)}

/* misc ----------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.split--narrow{grid-template-columns:.9fr 1.1fr}
@media(max-width:900px){.split,.split--narrow{grid-template-columns:1fr;gap:30px}}
.note{
  background:var(--blush);border-radius:var(--r);padding:clamp(20px,2.2vw,28px);
  font-size:15.5px;color:var(--ink-70);
}
.note strong{color:var(--ink)}
.hr{height:1px;background:var(--ink-12);border:0;margin-block:clamp(38px,5vw,64px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:13px;font-weight:500;padding:8px 15px;border-radius:var(--r-pill);
  background:var(--ink-06);color:var(--ink-70);
}
.band .chip{background:var(--on-dark-16);color:var(--on-dark)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* print ---------------------------------------------------------------- */
@media print{
  .hdr,.mnav,.cta-band,.btn{display:none!important}
  body{background:#fff}
  .pslot{display:none}
}

/* byline — backs MedicalWebPage.reviewedBy with something a human can actually see */
.byline{
  margin-top:clamp(38px,5vw,58px);padding-top:20px;border-top:1px solid var(--ink-12);
  font-size:13.5px;color:var(--ink-50);max-width:none;
}
.byline a{color:var(--brand);font-weight:600}

/* non-candidacy block — on every treatment page, by rule */
.notfor{
  margin-top:clamp(38px,5vw,58px);background:var(--paper-2);
  border-left:3px solid var(--brand);border-radius:0 var(--r) var(--r) 0;
  padding:clamp(24px,3vw,38px);
}
.notfor h2{margin-bottom:18px}

/* treatment page rhythm */
.sec h2{margin-top:clamp(34px,4vw,52px);margin-bottom:14px}
.sec h2:first-child,.phead h2{margin-top:0}
/* Treatment-page question blocks. The rule above zeroes the top margin on every
   section heading, because each one is the first child of its own .rv wrapper.
   The separation therefore has to live on the wrappers. */
.svc-qs>*+*{margin-top:clamp(42px,5.5vw,68px)}
.svc-qs>*>h2{margin-bottom:12px}
.svc-qs>*>p+p{margin-top:14px}
.sec p+p{margin-top:14px}
.notfor h2{margin-top:0}
.ptable+h2{margin-top:0}

/* ==========================================================================
   VISUAL LAYER
   Every animation here is ADDITIVE. Nothing sets opacity:0 in a base rule and
   waits for JavaScript — that is how a page arrives blank on a stranger's
   device. Scroll effects use animation-timeline behind @supports, so where it
   is unsupported the element simply renders normally.
   ========================================================================== */

/* film grain — kills the flat-vector look ---------------------------------- */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.hdr,.mnav{z-index:60}

/* living gradient field in the hero ---------------------------------------- */
.hero::before{
  animation:drift 26s ease-in-out infinite alternate;
  will-change:transform;
}
.hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(52vw,600px);aspect-ratio:1;left:-16%;bottom:-42%;border-radius:50%;
  background:radial-gradient(circle at 55% 45%,rgba(126,58,75,.13) 0%,rgba(126,58,75,.05) 45%,transparent 70%);
  animation:drift2 32s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-5%,4%,0) scale(1.13)}
}
@keyframes drift2{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(7%,-6%,0) scale(1.18)}
}

/* entrance — runs on load, safe because the base state is visible ---------- */
/* entrance keyframes. `rise` may fully fade because it only ever runs on load,
   where the element is guaranteed to reach `to`. `settle` is the scroll-driven
   one and NEVER goes below .55 opacity, so an element parked at the start of its
   range on a non-scrolling renderer is still readable rather than invisible. */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:.55;transform:translateY(18px)}to{opacity:1;transform:none}}
.h-copy>*{animation:rise .9s cubic-bezier(.22,1,.36,1) backwards}
.h-copy>*:nth-child(1){animation-delay:.05s}
.h-copy>*:nth-child(2){animation-delay:.13s}
.h-copy>*:nth-child(3){animation-delay:.23s}
.h-copy>*:nth-child(4){animation-delay:.33s}
.h-copy>*:nth-child(5){animation-delay:.43s}
.hero-media{animation:rise 1.1s cubic-bezier(.22,1,.36,1) .2s backwards}

/* scroll reveal — progressive enhancement only ----------------------------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:settle .8s linear both;animation-timeline:view();animation-range:entry 0% entry 62%}
    .rv-l>*{animation:settle .8s linear both;animation-timeline:view();animation-range:entry 0% entry 58%}
    .rv-l>*:nth-child(2){animation-range:entry 6% entry 64%}
    .rv-l>*:nth-child(3){animation-range:entry 12% entry 70%}
    .rv-l>*:nth-child(4){animation-range:entry 4% entry 62%}
    .rv-l>*:nth-child(5){animation-range:entry 10% entry 68%}
    .rv-l>*:nth-child(6){animation-range:entry 16% entry 74%}
    .stmt p{animation:settle 1s linear both;animation-timeline:view();animation-range:entry 10% cover 34%}
  }
}

/* hero headline — the italic clause gets its own weight -------------------- */
.hero h1 em{
  font-style:italic;color:var(--brand);display:inline-block;
  background:linear-gradient(180deg,transparent 62%,rgba(242,222,220,.9) 62%);
  padding-inline:.06em;
}

/* price marquee ------------------------------------------------------------ */
.marq{
  overflow:hidden;border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);
  padding-block:20px;background:var(--paper);position:relative;
}
.marq::before,.marq::after{
  content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none;
}
.marq::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.marq::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.marq-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-track span{
  display:inline-flex;align-items:center;gap:12px;padding-inline:26px;white-space:nowrap;
  font-family:var(--serif);font-size:clamp(17px,1.7vw,22px);color:var(--ink-70);
}
.marq-track span b{color:var(--brand);font-weight:400}
.marq-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--blush-2)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq-track{animation:none}}

/* big editorial numbers ---------------------------------------------------- */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
@media(max-width:760px){.figs{grid-template-columns:1fr;gap:26px}}
.fig{border-top:1.5px solid var(--ink-12);padding-top:20px}
.fig b{
  display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(52px,7.4vw,104px);line-height:.92;letter-spacing:-.045em;color:var(--brand);
}
.fig span{display:block;margin-top:12px;font-size:15px;color:var(--ink-70);max-width:26ch}

/* cards — depth and a moving edge ------------------------------------------ */
.card{position:relative;overflow:hidden}
.card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--brand),var(--rose));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.22,1,.36,1);
}
a.card:hover::after{transform:scaleX(1)}
a.card:hover .more{color:var(--rose-deep)}
.card h3{transition:color .3s}
a.card:hover h3{color:var(--brand)}

/* photo slots — layered, framed, less "empty box" -------------------------- */
.pslot{position:relative}
.pslot--portrait::before,.pslot--square::before{
  content:"";position:absolute;inset:14px;z-index:2;pointer-events:none;
  border:1px solid rgba(252,248,246,.42);border-radius:calc(var(--r-lg) - 12px);
}
.pslot-ph i{animation:pulse 4.5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.09);opacity:1}}
.pframe{position:relative}
.pframe::before{
  content:"";position:absolute;inset:auto -18px -18px 18px;height:100%;z-index:-1;
  border:1.5px solid var(--brand);border-radius:var(--r-lg);opacity:.28;
}

/* pull quote --------------------------------------------------------------- */
.pull{
  position:relative;padding-left:clamp(24px,4vw,64px);
  border-left:2px solid var(--brand);
}
.pull p{
  font-family:var(--serif);font-size:clamp(21px,2.5vw,33px);line-height:1.3;
  letter-spacing:-.02em;color:var(--ink);max-width:26ch;
}

/* section label that sticks while its content scrolls ---------------------- */
.sticky-l{position:sticky;top:104px;align-self:start}

/* dark band gets its own light ------------------------------------------- */
.band{position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;width:min(60vw,700px);aspect-ratio:1;
  right:-14%;top:-38%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(178,106,114,.34) 0%,transparent 66%);
}
.band>*{position:relative}

/* blush band gets a soft arc --------------------------------------------- */
.band-blush{position:relative;overflow:hidden}
.band-blush::before{
  content:"";position:absolute;left:50%;top:-58%;width:150vw;aspect-ratio:2/1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(252,248,246,.72) 0%,transparent 58%);
}
.band-blush>*{position:relative}

/* quote cards get a mark -------------------------------------------------- */
.quote{position:relative;overflow:hidden}
.quote::before{
  content:"\201C";position:absolute;right:14px;top:-14px;
  font-family:var(--serif);font-size:110px;line-height:1;color:var(--blush);pointer-events:none;
}
.quote blockquote{position:relative}

/* the CTA band, less flat ------------------------------------------------- */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 90% at 12% 0%,rgba(178,106,114,.32),transparent 62%),
    radial-gradient(50% 80% at 92% 100%,rgba(239,199,211,.2),transparent 62%);
}
.cta-band>*{position:relative}

/* steps get a spine ------------------------------------------------------- */
.steps{position:relative}
.step{position:relative;padding-bottom:8px}
.step::after{
  content:"";position:absolute;left:21px;top:40px;bottom:-14px;width:1px;background:var(--ink-12);
}
.step:last-child::after{display:none}

/* price table, warmer ------------------------------------------------------ */
.ptable tbody tr{transition:background .25s}
.ptable tbody tr:hover{background:var(--paper-2)}
.ptable td:last-child{font-variant-numeric:tabular-nums}

/* section rule with a diamond --------------------------------------------- */
.rule{display:flex;align-items:center;gap:16px;margin-block:clamp(40px,5vw,64px)}
.rule::before,.rule::after{content:"";height:1px;background:var(--ink-12);flex:1}
.rule i{width:7px;height:7px;background:var(--brand);transform:rotate(45deg);flex:none}

/* mobile hero — copy first. An empty photo slot must never be the first thing
   a phone visitor sees, and the placeholder must not eat a whole screen. */
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-media{order:2}
  .h-copy{order:1}
  .hero-media .pslot--portrait{aspect-ratio:4/3;max-height:52svh}
  .pframe::before{inset:auto -12px -12px 12px}
}
@media(max-width:520px){
  .mark b{font-size:16px;letter-spacing:.14em}
  .mark small{font-size:9.5px;letter-spacing:.1em}
  .hero{padding-block:36px 52px}
  .hero-proof{gap:8px 22px}
  .hero-proof b{font-size:22px}
  .figs .fig b{font-size:clamp(46px,16vw,64px)}
  .quote::before{font-size:78px}
}

/* ==========================================================================
   COMPOSITION LAYER v2
   The first build was well-typeset and boring for one reason: every section was
   heading + paragraph + list, at the same weight, on the same cream. Fixed with
   scale contrast (one huge thing per screen), full-bleed colour blocks so
   scrolling moves through rooms, asymmetry, and art-directed image slots.
   ========================================================================== */

/* full-bleed blocks ------------------------------------------------------- */
.blk{position:relative;overflow:hidden}
.blk--blush{background:linear-gradient(168deg,var(--blush) 0%,#EFD3D0 58%,#E7C6C6 100%)}
.blk--brand{background:var(--brand);color:var(--on-dark)}
.blk--brand h1,.blk--brand h2,.blk--brand h3{color:var(--on-dark)}
.blk--brand p{color:var(--on-dark-70)}
.blk--ink{background:var(--ink);color:var(--on-dark)}
.blk--ink h2{color:var(--on-dark)}
.blk--ink p{color:var(--on-dark-70)}

/* giant display type as a graphic element --------------------------------- */
.mega{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(52px,10.5vw,146px);line-height:.9;letter-spacing:-.05em;
  margin:0;
}
.mega em{font-style:italic;color:var(--brand)}
.blk--brand .mega em,.blk--ink .mega em{color:#C9A9AC}
.mega-sub{
  font-family:var(--sans);font-size:clamp(15px,1.3vw,18px);font-weight:500;
  letter-spacing:.02em;color:var(--ink-50);max-width:44ch;
}
.blk--brand .mega-sub{color:var(--on-dark-70)}

/* HERO v2 — type-led, portrait offset and overlapping ---------------------- */
.hero2{position:relative;padding-block:clamp(40px,6vw,86px) 0;overflow:visible}
.hero2-type{position:relative;z-index:2}
.hero2 h1{
  font-size:clamp(46px,9.6vw,132px);line-height:.92;letter-spacing:-.052em;
  font-weight:300;max-width:15ch;
}
.hero2 h1 em{
  font-style:italic;color:var(--brand);
  background:linear-gradient(180deg,transparent 66%,rgba(233,203,201,.85) 66%);
  padding-inline:.05em;
}
.hero2-grid{
  display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(24px,3.4vw,56px);
  align-items:end;margin-top:clamp(26px,3.6vw,52px);
}
.hero2-lede{font-size:clamp(16px,1.35vw,19.5px);color:var(--ink-70);max-width:44ch;line-height:1.58}
.hero2-media{position:relative;margin-bottom:-70px;z-index:3}
@media(max-width:940px){
  .hero2-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .hero2-media{margin-bottom:0;max-width:420px}
  .hero2 h1{max-width:none}
}
.hero2-strip{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,54px);
  margin-top:clamp(26px,3vw,40px);padding-top:22px;border-top:1px solid var(--ink-12);
}
.hero2-strip div{display:flex;flex-direction:column;gap:2px}
.hero2-strip b{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em}
.hero2-strip span{font-size:12.5px;font-weight:500;color:var(--ink-50)}

/* art-directed image slot — reads as art direction, not a broken image ----- */
.art{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(152deg,#F6E3E0 0%,#EBCBC8 46%,#DDB6B6 100%);
  box-shadow:var(--shadow-lg);isolation:isolate;
}
.art img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
/* a filled art slot drops the gradient field and the line-art arcs — see art() in home.py */
.art--img::before,.art--img::after{display:none}
.art--img{background:var(--cream)}
.art--portrait{aspect-ratio:4/5}
.art--wide{aspect-ratio:16/9}
.art--square{aspect-ratio:1}
.art--tall{aspect-ratio:3/4}
.art::before{                       /* organic light */
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(74% 58% at 74% 12%,rgba(255,255,255,.66),transparent 62%),
    radial-gradient(56% 46% at 12% 92%,rgba(126,58,75,.22),transparent 66%);
}
.art::after{                        /* line-art arcs */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' fill='none' stroke='%237E3A4B' stroke-width='.9' opacity='.55'%3E%3Ccircle cx='200' cy='250' r='150'/%3E%3Ccircle cx='200' cy='250' r='108'/%3E%3Ccircle cx='200' cy='250' r='66'/%3E%3Cpath d='M50 250h300M200 100v300'/%3E%3C/svg%3E");
  background-size:cover;background-position:center;
}
.art-lbl{
  position:absolute;left:0;right:0;bottom:0;z-index:4;padding:20px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  background:linear-gradient(0deg,rgba(35,29,27,.42),transparent);
}
.art-lbl b{font-family:var(--serif);font-weight:300;font-size:17px;color:#fff;letter-spacing:-.01em}
.art-lbl span{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* numbered index — replaces yet another bullet list ------------------------ */
.idx{border-top:1px solid var(--ink-12)}
.blk--brand .idx,.blk--ink .idx{border-color:var(--on-dark-16)}
.idx-row{
  display:grid;grid-template-columns:64px 1fr auto;gap:clamp(14px,2.4vw,34px);
  align-items:baseline;padding:clamp(20px,2.6vw,32px) 0;
  border-bottom:1px solid var(--ink-12);
  transition:padding-left .4s cubic-bezier(.22,1,.36,1),background .4s;
}
.blk--brand .idx-row,.blk--ink .idx-row{border-color:var(--on-dark-16)}
a.idx-row:hover{padding-left:14px}
.idx-n{font-family:var(--serif);font-size:15px;color:var(--brand);letter-spacing:.06em}
.blk--brand .idx-n,.blk--ink .idx-n{color:#EFC7D3}
.idx-t{font-family:var(--serif);font-size:clamp(22px,3vw,40px);font-weight:300;letter-spacing:-.028em;line-height:1.1}
.idx-d{font-size:14.5px;color:var(--ink-50);margin-top:8px;max-width:52ch;font-family:var(--sans)}
.blk--brand .idx-d,.blk--ink .idx-d{color:var(--on-dark-70)}
.idx-p{font-family:var(--serif);font-size:clamp(18px,2vw,26px);color:var(--brand);white-space:nowrap}
.blk--brand .idx-p,.blk--ink .idx-p{color:#E6BFC2}
@media(max-width:680px){
  .idx-row{grid-template-columns:38px 1fr;gap:12px}
  .idx-p{grid-column:2;margin-top:6px}
}

/* menu card — the price list should look like a menu, not a table --------- */
.menu{
  background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:clamp(26px,4vw,62px);position:relative;
}
.menu::before{
  content:"";position:absolute;inset:12px;border:1px solid var(--ink-12);
  border-radius:calc(var(--r-lg) - 8px);pointer-events:none;
}
.menu h3{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--sans);color:var(--brand);margin:clamp(26px,3vw,40px) 0 14px;
}
.menu h3:first-child{margin-top:0}
.menu-row{
  display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px dotted var(--ink-12);
}
.menu-row:last-child{border-bottom:0}
.menu-row b{font-weight:500;font-size:16px}
.menu-row i{flex:1;height:1px;background:transparent}
.menu-row span{font-family:var(--serif);font-size:19px;color:var(--brand);white-space:nowrap}

/* overlap utility --------------------------------------------------------- */
.lift{margin-top:clamp(-140px,-9vw,-60px);position:relative;z-index:5}

/* quote, oversized -------------------------------------------------------- */
.bigquote{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(26px,4.6vw,64px);line-height:1.12;letter-spacing:-.035em;max-width:17ch;
}

/* stat row, edge to edge -------------------------------------------------- */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--on-dark-16)}
@media(max-width:760px){.statrow{grid-template-columns:1fr}}
.statrow>div{background:var(--brand);padding:clamp(26px,4vw,52px) clamp(20px,2.6vw,38px)}
.statrow b{
  display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(44px,6.4vw,88px);line-height:.94;letter-spacing:-.045em;color:var(--on-dark);
}
.statrow span{display:block;margin-top:14px;font-size:14.5px;color:var(--on-dark-70);max-width:28ch}

/* botanical rule ---------------------------------------------------------- */
.bot{display:flex;justify-content:center;padding-block:clamp(30px,4vw,56px)}
.bot svg{width:52px;height:auto;opacity:.5}

/* --- hero type fixes -----------------------------------------------------
   At 130px a highlighter sweep fragments across line breaks into disconnected
   bars. The italic green carries the emphasis on its own at that scale. */
.hero2 h1 em{background:none;padding-inline:0}
.hero2 h1{max-width:18ch}
.hero2 h1 em::after{
  content:"";display:block;height:2px;margin-top:.06em;
  background:linear-gradient(90deg,var(--brand),rgba(178,106,114,.6));
  transform-origin:0 50%;animation:sweep 1.1s cubic-bezier(.22,1,.36,1) .5s backwards;
}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- art slot: organic, not a crosshair ---------------------------------- */
.art::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' fill='none' stroke='%237E3A4B' stroke-width='.7'%3E%3Cpath d='M-40 380C60 300 120 250 200 250s150 60 250 -30'/%3E%3Cpath d='M-40 330C70 250 130 200 210 205s140 55 240 -35'/%3E%3Cpath d='M-40 430C50 355 130 300 200 300s160 55 250 -25'/%3E%3Cellipse cx='210' cy='150' rx='86' ry='118' transform='rotate(-14 210 150)'/%3E%3Cellipse cx='210' cy='150' rx='52' ry='86' transform='rotate(-14 210 150)'/%3E%3Cpath d='M210 32v236'/%3E%3C/svg%3E");
  opacity:.42;
}

/* --- results gallery ------------------------------------------------------
   The credit line is not fine print. It is the reason the page is publishable,
   so it is sized and coloured to be read rather than to be technically present. */
.ba{margin:0 0 clamp(34px,4.5vw,60px)}
.ba img{width:100%;height:auto;display:block;border-radius:var(--r);background:var(--ink-06)}
.ba figcaption{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--ink-70);max-width:68ch}
.ba figcaption strong{color:var(--ink)}
.ba-credit{
  display:block;margin-top:8px;font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.01em;color:var(--ink-50);
  padding-left:12px;border-left:2px solid var(--ink-12);
}

/* --- google reviews page --------------------------------------------------
   Verbatim quotes carry the page, so the cards stay quiet: rating row, the
   words, then the attribution. Masonry-ish columns via CSS columns keeps
   different lengths from stretch-matching. */
.grev-grid{columns:2 340px;column-gap:16px}
.grev{break-inside:avoid;background:var(--card);border:1px solid var(--ink-12);border-radius:var(--r);padding:22px 24px;margin:0 0 16px}
.grev-stars{color:var(--rose);font-size:15px;letter-spacing:.12em;margin-bottom:10px}
.grev blockquote{font-family:var(--serif);font-size:17.5px;line-height:1.5;letter-spacing:-.01em}
.grev figcaption{margin-top:14px;font-size:13px}
.grev figcaption b{font-weight:600}
.grev figcaption span{display:block;color:var(--ink-50);font-size:12px;margin-top:2px}

/* --- mobile book/call bar -------------------------------------------------
   On phones the header Book button is hidden; this is the always-there path
   to the two actions that matter. Only ours lands on a real scheduler. */
.bookbar{display:none}
@media(max-width:1000px){
  .bookbar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;bottom:0;inset-inline:0;z-index:60;
    padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background:rgba(252,248,246,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--ink-12);
  }
  .bookbar .btn{justify-content:center}
  body{padding-bottom:76px}
}
@media print{.bookbar{display:none}}

/* CTA band: proper class for the outline button + the financing line */
.btn--outline-light{background:transparent;color:#F6F1EC;box-shadow:inset 0 0 0 1.5px var(--edge-on-dark)}
.btn--outline-light:hover{background:rgba(246,241,236,.12)}
.cta-fin{margin-top:18px;font-size:13px;color:var(--on-dark-70);max-width:52ch;margin-inline:auto}

/* no-price service list (replaces the stripped table) */
.svcl-h{font-size:clamp(20px,2vw,27px);margin-bottom:14px}
.svcl-list li strong{font-weight:500}
.svcl-list li small{display:block;font-size:13.5px;color:var(--ink-50);margin-top:2px;max-width:52ch}

/* start-here chooser leaves */
.sh details{margin-bottom:10px}
.sh-leaf{background:var(--card);border:1px solid var(--ink-12);border-radius:var(--r-sm);padding:18px 20px;margin-top:12px}
.sh-leaf b{font-size:16px}
.sh-leaf p{font-size:14px;color:var(--ink-70);margin:6px 0 14px}

/* homepage review cards: verbatim Google reviews, three up */
.rvws{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px}
.rvw{background:var(--cream-2,#FBF9F4);border:1px solid rgba(20,30,24,.1);border-radius:18px;
padding:26px 28px;margin:0;display:flex;flex-direction:column;gap:16px}
.rvw p{font-family:var(--serif);font-size:clamp(17px,1.9vw,20px);line-height:1.45;margin:0}
.rvw cite{font-style:normal;font-family:var(--sans);font-size:13px;font-weight:600;
letter-spacing:.02em;color:var(--ink-70,rgba(20,30,24,.7));margin-top:auto}
.rvw cite span{display:block;font-weight:400;font-size:12px;color:var(--ink-50,rgba(20,30,24,.5));margin-top:3px}

/* treatment-area diagram ------------------------------------------------- */
.areas{margin:8px 0 46px}
.areas-h{margin:0 0 10px}
.areas-p{color:var(--ink-70);max-width:60ch;margin-bottom:26px}
.areas-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.area{background:var(--paper-2);border:1px solid var(--ink-12);border-radius:var(--r);
  padding:14px 14px 20px;margin:0;text-align:center}
.area img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:calc(var(--r) - 8px);margin-bottom:15px;background:var(--blush)}
.area figcaption b{display:block;font-family:var(--serif);font-size:19px;font-weight:400;
  letter-spacing:-.012em;margin-bottom:5px}
.area figcaption span{display:block;font-size:14px;line-height:1.55;color:var(--ink-50)}
@media(max-width:720px){.areas-g{grid-template-columns:1fr;gap:10px}
  .area{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center;text-align:left;padding:14px}
  .area img{margin:0}}

.areas-note{margin-top:16px;font-size:13px;color:var(--ink-50);max-width:62ch}

/* the weight-loss case inside the loose-skin section ---------------------- */
.wlbox{background:var(--paper-2);border:1px solid var(--ink-12);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);max-width:74ch}
.wlbox h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,24px);
  letter-spacing:-.014em;margin-bottom:12px}
.wlbox p{color:var(--ink-70)}

/* own-patient result pairs: two separate frames, never a composite -------- */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ba-pair img{width:100%;height:auto;border-radius:calc(var(--r) - 10px);display:block}
@media(max-width:560px){.ba-pair{gap:4px}}

/* two-up licensed result frames in the homepage loose-skin section --------- */
.ba-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.ba-duo{grid-template-columns:1fr;gap:22px}}

/* on-domain booking pages (Vagaro widget) --------------------------------- */
/* Deliberately NO min-height and no height on the frame. Vagaro's loader
   injects its own iframe carrying height="880" and then auto-resizes it, so a
   height here would either fight that or, if the loader never runs, leave a tall
   empty box above the fallback link. The blank-widget reports in Vagaro's
   support thread come from percentage heights and short fixed heights, and this
   container sets neither. */
.gi-widget{margin-block:6px}
.gi-widget .vagaro{font-size:13.5px;color:var(--ink-70);text-align:center}
.book-alt{margin-top:24px;font-size:15px;color:var(--ink-70);max-width:62ch}