/* The Beautox Nurse — palette sampled from the brand's own photography.
   #dbaa8e / #d6956d nude+terracotta, #dddedf studio greige, #502918 umber. */

:root{
  --ink:#1b1813;
  --ink-70:rgba(27,24,19,.70);
  --ink-45:rgba(27,24,19,.46);
  --bone:#fcfbf9;
  --shell:#f5f0ea;
  --sand:#eadfd2;
  --nude:#dbaa8e;
  /* sampled clay was #a86b4d but that reads 4.17:1 on bone — too low for the
     11px uppercase eyebrows. Darkened to clear 4.5:1 on bone, shell AND sand. */
  --clay:#8f5438;
  --umber:#502918;
  --line:rgba(23,21,15,.13);
  --white:#fff;

  --serif:"Cormorant Garamond",Cormorant,Georgia,"Times New Roman",serif;
  --sans:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(64px,9vw,140px);
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font:300 17px/1.72 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* the tint is a load placeholder for photographs only — anything vector or
   transparent must stay transparent, or it shows as a slab against the page */
img{max-width:100%;height:auto;display:block;background:var(--tint,var(--shell))}
img[src$=".svg"],img[src$=".png"],svg{background:none}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0 0 1.05em}
ul{margin:0;padding:0;list-style:none}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.narrow{max-width:66ch}
.center{text-align:center}
.center .narrow,.narrow.center{margin-inline:auto}
.mt{margin-top:1.6em}
.sec{padding-block:var(--sec)}
.sec.alt{background:var(--shell)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}

/* ---------------------------------------------------------------- type */
.display{
  font-family:var(--serif);font-weight:300;line-height:1.06;
  letter-spacing:-.012em;font-size:clamp(2.35rem,5.4vw,4.6rem);
}
.display em{font-style:italic;color:var(--clay)}
.display.xl{font-size:clamp(2.7rem,7.2vw,6.4rem)}
.h2{font-family:var(--serif);font-weight:300;line-height:1.14;
  font-size:clamp(1.85rem,3.4vw,3rem);letter-spacing:-.01em}
.h3{font-family:var(--serif);font-weight:400;line-height:1.2;
  font-size:clamp(1.3rem,1.9vw,1.7rem)}
.eyebrow{
  font:400 11px/1 var(--sans);letter-spacing:.19em;text-transform:uppercase;
  color:var(--clay);margin:0 0 1.15em;
}
.eyebrow.light{color:rgba(255,255,255,.86)}
.lede{font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.62;color:var(--ink-70)}
.lede.light{color:rgba(255,255,255,.9)}
.muted{color:var(--ink-70)}
.fine{font-size:.83rem;line-height:1.6;color:var(--ink-45)}
.prose h2{margin:1.9em 0 .5em}

.link{
  display:inline-block;font-size:.86rem;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;padding-bottom:3px;border-bottom:1px solid var(--nude);
  transition:border-color .3s,color .3s;
}
.link:hover{border-color:var(--ink);color:var(--clay)}
.link.alt{margin-left:1.4em;color:var(--ink-45)}
.big-link{font-family:var(--serif);font-size:1.45rem;text-decoration:none;
  border-bottom:1px solid var(--nude);line-height:2}

/* --------------------------------------------------------------- button */
.btn{
  display:inline-block;font:400 12px/1 var(--sans);letter-spacing:.17em;
  text-transform:uppercase;text-decoration:none;
  padding:17px 34px;background:var(--ink);color:#fff;border:1px solid var(--ink);
  border-radius:var(--r);cursor:pointer;position:relative;overflow:hidden;
  transition:background .35s,color .35s,border-color .35s;
}
.btn:hover{background:var(--umber);border-color:var(--umber)}
.btn-lg{padding:20px 44px}
.btn-sm{padding:12px 22px;font-size:11px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-ghost.light{color:#fff;border-color:rgba(255,255,255,.75)}
.btn-ghost.light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn + .btn{margin-left:.7em}
@media (max-width:520px){.btn+.btn{margin:12px 0 0;display:block}.btn{width:100%;text-align:center}}

/* ------------------------------------------------------------------ nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s,box-shadow .4s}
.nav-in{
  width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;
  display:flex;align-items:center;gap:28px;padding:18px 0;transition:padding .4s;
}
.brand{flex:0 0 auto;line-height:0}
/* The header uses crest-sm.svg: the crest with its hairline FRAME and
   flourishes stroked (3 units) so they survive small sizes, while the
   lettering stays pure fill — stroking the letters too was what made
   "BEAUTOX" look blurry. Sized by height, because it's a badge. */
.brand-mark{height:84px;width:auto;display:block;color:var(--ink);
  transition:color .4s,height .4s}
.nav.stuck .brand-mark{height:60px}
@media (max-width:860px){.brand-mark{height:68px}}
@media (max-width:560px){.brand-mark{height:56px}}
.links{display:flex;gap:30px;margin-left:auto}
.links a{
  font:400 12px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;padding:6px 0;position:relative;
}
.links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right .35s cubic-bezier(.2,.7,.2,1);
}
.links a:hover::after,.links a.cur::after{right:0}
.nav-cta{display:flex;align-items:center;gap:20px}
.tel{font:400 12px/1 var(--sans);letter-spacing:.1em;text-decoration:none;white-space:nowrap}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:26px;height:1px;background:currentColor;transition:transform .3s}
.burger span+span{margin-top:7px}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* over the hero photo, before scroll */
.nav.over{color:var(--ink)}
.nav.over .brand-mark{color:var(--ink)}
.nav.over .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav.stuck{background:rgba(250,248,245,.93);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line)}
.nav.stuck .nav-in{padding:11px 0}
.nav.hide{transform:translateY(-102%)}
.nav{transition:background .4s,box-shadow .4s,transform .45s cubic-bezier(.3,.8,.3,1)}

.mobnav{display:none;flex-direction:column;gap:2px;padding:8px var(--gut) 26px;
  background:rgba(250,248,245,.98);backdrop-filter:blur(14px)}
.mobnav a{font:400 13px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line)}
.mobnav .btn{margin-top:18px;text-align:center;border-bottom:0}
@media (max-width:960px){
  .links,.nav-cta{display:none}
  .burger{display:block}
  .mobnav[hidden]{display:none}
  .mobnav{display:flex}
  .nav.open{background:rgba(250,248,245,.98);color:var(--ink)}
  .nav.open .brand-mark{color:var(--ink)}
}

/* ----------------------------------------------------------------- hero */
/* White-ground hero, as her original site opened. The subject stands right
   against a white wall, so the type sits in the empty left third as dark ink —
   no scrim, no shadow, and no fighting a face for legibility. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  color:var(--ink);background:var(--bone);overflow:hidden}
.hero-img{position:absolute;inset:0}
/* Crop and copy-offset chosen by rendering the real headline over the real
   photo: this is the only combination that keeps the whole block on her cheek
   and clear of the nose and lips. Don't change one without re-checking. */
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:60% 42%;
  animation:slowzoom 22s ease-out both}
/* On a phone the hero is taller than the photo's aspect, so cover scales by
   HEIGHT and the X value drives the crop (Y does nothing). 78% pushes the nose
   and lips out of frame and leaves the cheek behind the type. */
@media (max-width:859px){.hero-img img{object-position:64% 24%}}
@keyframes slowzoom{from{transform:scale(1.075)}to{transform:scale(1)}}
/* only the faintest wash on the left, so type never sits on a hot highlight */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(252,251,249,.72) 0%,rgba(252,251,249,.28) 38%,
              rgba(252,251,249,0) 62%);
}
@media (max-width:859px){
  .hero::after{background:linear-gradient(180deg,rgba(252,251,249,.55) 0%,
    rgba(252,251,249,.12) 40%,rgba(252,251,249,.86) 100%)}
}
/* Push the copy off the nose and onto the flat of the cheek. The breakpoint is
   860px — NOT 1100 — because the full nav appears at 860 and anything above
   that is a wide crop where the face sits centre-left. */
.hero-copy{position:relative;z-index:2;padding-block:0 clamp(76px,12vh,150px)}
@media (min-width:860px){
  .hero-copy{padding-right:52%;padding-bottom:0}   /* keep the measure off her */
}
/* clay on warm skin is unreadable — the hero accent goes warm off-white, and the
   whole headline gets a soft shadow so it holds over any part of the photo */
.hero .display{text-shadow:none}
.hero .display em{color:var(--clay)}
.hero-sub{text-shadow:none}
.hero-sub{max-width:40ch;margin-top:1.5em;color:var(--ink-70);font-size:1.06rem}
.hero-cta{margin-top:2.3em}
.scrollcue{position:absolute;left:50%;bottom:26px;z-index:2;width:1px;height:52px;
  background:rgba(27,24,19,.18);overflow:hidden}
.scrollcue span{display:block;width:1px;height:22px;background:var(--ink);
  animation:cue 2.4s cubic-bezier(.7,0,.3,1) infinite}
@keyframes cue{0%{transform:translateY(-24px)}60%,100%{transform:translateY(54px)}}

/* page header (non-home) */
.phead{padding:clamp(140px,17vh,210px) 0 clamp(46px,7vw,84px);background:var(--shell)}
.phead.tall{padding-block:clamp(170px,22vh,260px) clamp(90px,12vw,150px)}
.phead .lede{margin-top:1.1em}

/* ------------------------------------------------------------ home bits */
.welcome{padding-block:clamp(72px,10vw,150px)}
.welcome .display{font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.24}

.split-in{display:grid;gap:clamp(34px,5vw,84px);align-items:center;
  grid-template-columns:1fr}
@media (min-width:900px){.split-in{grid-template-columns:1.02fr .98fr}}
.split.first{padding-top:clamp(130px,16vh,200px)}
.split-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split-copy p{color:var(--ink-70)}

.gcards{display:grid;gap:clamp(28px,3.4vw,44px);grid-template-columns:1fr;margin-top:clamp(38px,5vw,64px)}
@media (min-width:760px){.gcards{grid-template-columns:repeat(3,1fr)}}
.gcard-img img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gcard-img{overflow:hidden}
.gcard:hover .gcard-img img{transform:scale(1.045)}
.gcard .h3{margin:1.1em 0 .35em}
.tlist{margin-top:1.1em;border-top:1px solid var(--line)}
.tlist a{display:flex;justify-content:space-between;gap:12px;text-decoration:none;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem;
  transition:padding-left .3s,color .3s}
.tlist a:hover{padding-left:8px;color:var(--clay)}
.tlist span{opacity:.4;transition:opacity .3s,transform .3s}
.tlist a:hover span{opacity:1;transform:translateX(4px)}

.quotes{background:var(--ink);color:#fff}
.quotes .eyebrow{color:var(--nude)}
.quote-grid{display:grid;gap:clamp(30px,4vw,60px);margin-top:clamp(38px,5vw,64px);
  grid-template-columns:1fr}
@media (min-width:820px){.quote-grid{grid-template-columns:1fr 1fr}}
.quote{margin:0;padding:clamp(28px,3vw,44px);border:1px solid rgba(255,255,255,.16)}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.55rem);
  line-height:1.46;font-style:italic}
.quote blockquote::before{content:"\201C";display:block;font-size:3.4rem;line-height:.6;
  color:var(--nude);margin-bottom:.22em}
.quote figcaption{margin-top:1.5em;font-size:.78rem;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}

.visit-in{display:grid;gap:clamp(38px,5vw,80px);grid-template-columns:1fr}
@media (min-width:900px){.visit-in{grid-template-columns:1.35fr .8fr}}
.locs{display:grid;gap:24px;margin-top:2em;grid-template-columns:1fr}
@media (min-width:620px){.locs{grid-template-columns:1fr 1fr}}
.loc{padding:24px;background:var(--shell)}
.loc h3{font-family:var(--serif);font-size:1.2rem;margin-bottom:.4em}
.loc p{font-size:.94rem;color:var(--ink-70);margin-bottom:.9em}
.hours{border-top:1px solid var(--line);margin-top:1.2em}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:.94rem}
.hours li span:last-child{color:var(--ink-70)}
.hours-card{background:var(--shell);padding:clamp(26px,3vw,40px);align-self:start}

/* this had no padding-block at all — it never got the .sec class */
.band{background:var(--sand);text-align:center;
  padding-block:clamp(78px,10vw,150px);position:relative}
.band::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1px;height:clamp(30px,4vw,54px);background:var(--clay);opacity:.4}
.band .display{font-size:clamp(1.75rem,3.4vw,2.9rem);margin-top:.25em}
.band .lede{margin:1.2em auto 2.4em;max-width:52ch}

/* -------------------------------------------------------- treatments idx */
.tgroup + .tgroup{margin-top:clamp(60px,8vw,110px)}
.grouphead{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem);
  padding-bottom:.5em;border-bottom:1px solid var(--line);margin-bottom:clamp(30px,4vw,54px)}
.tcards{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr}
@media (min-width:820px){.tcards{grid-template-columns:1fr 1fr}}
.tcard-img{display:block;overflow:hidden}
.tcard-img img{width:100%;aspect-ratio:16/11;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tcard:hover .tcard-img img{transform:scale(1.05)}
.tcard-body{padding-top:1.5em}
.tcard-body .h3 a{text-decoration:none}
.tcard-body p{color:var(--ink-70);font-size:.98rem;margin:.7em 0 1.3em}

/* ------------------------------------------------------- treatment page */
.tp-hero{position:relative;min-height:clamp(430px,62svh,640px);display:flex;
  align-items:flex-end;color:#fff;overflow:hidden}
.tp-hero-img{position:absolute;inset:0}
.tp-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.tp-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,21,15,.5),rgba(23,21,15,.12) 42%,rgba(23,21,15,.72))}
.tp-hero-copy{position:relative;z-index:2;padding-bottom:clamp(44px,7vh,80px)}
.crumbs{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:1.5em}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{margin:0 .6em;opacity:.5}
.tp-hero-copy .lede{margin-top:.9em}
.tp-grid{display:grid;gap:clamp(34px,5vw,72px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.tp-grid{grid-template-columns:1.15fr .85fr}}
.tp-copy p{color:var(--ink-70)}
.tp-copy p:first-child{font-size:1.14rem;color:var(--ink)}
.tp-aside img{width:100%;aspect-ratio:4/5;object-fit:cover}

.cmp-grid{display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:1fr;margin-top:2.4em}
@media (min-width:820px){.cmp-grid{grid-template-columns:1fr 1fr}}
.bullets{margin-top:1em}
.bullets li{position:relative;padding-left:22px;margin-bottom:.85em;color:var(--ink-70)}
.bullets li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;
  background:var(--clay)}

.ba-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:2.6em 0 1.4em}
.ba-shot{margin:0}
.ba-shot .zoom{display:block;padding:0;border:0;background:none;cursor:zoom-in;width:100%}
.ba-shot img{width:100%;object-fit:cover;transition:opacity .3s}
.ba-shot:hover img{opacity:.9}

.faq{border-top:1px solid var(--line);margin-top:1.4em}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 34px 22px 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.12rem,1.6vw,1.35rem)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:4px;top:50%;width:11px;height:1px;
  background:var(--ink);box-shadow:0 0 0 0 transparent;transition:transform .3s}
.faq-item summary::before{content:"";position:absolute;right:9px;top:50%;width:1px;height:11px;
  margin-top:-5px;background:var(--ink);transition:opacity .3s,transform .3s}
.faq-item[open] summary::before{opacity:0;transform:rotate(90deg)}
.faq-a{padding:0 0 22px;color:var(--ink-70);max-width:70ch}

.minis{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:1.6em}
.mini{text-decoration:none;display:block;overflow:hidden}
.mini img{aspect-ratio:4/3;object-fit:cover;width:100%;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mini:hover img{transform:scale(1.05)}
.mini span{display:block;margin-top:.9em;font-size:.9rem;letter-spacing:.06em}

/* ---------------------------------------------------------------- about */
.cred-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:700px){.cred-grid{grid-template-columns:1fr 1fr}}
.cred-grid li{background:var(--bone);padding:26px 28px}
.cred-grid b{display:block;font-family:var(--serif);font-weight:400;font-size:1.25rem}
.cred-grid span{font-size:.9rem;color:var(--ink-70)}
.wide-img img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ----------------------------------------------------------- mentorship */
.ments{display:grid;gap:clamp(48px,7vw,110px)}
.ment{display:grid;gap:clamp(26px,4vw,60px);align-items:center;grid-template-columns:1fr}
@media (min-width:860px){
  .ment{grid-template-columns:1fr 1fr}
  .ment:nth-child(even) .ment-img{order:2}
}
.ment-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ment p{color:var(--ink-70)}

/* -------------------------------------------------------------- contact */
.contact-grid{display:grid;gap:clamp(38px,5vw,80px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.contact-grid{grid-template-columns:1.15fr .85fr}}
.form{background:var(--shell);padding:clamp(26px,3.4vw,46px)}
.form label{display:block;margin-bottom:18px;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-70)}
.form .row{display:grid;gap:0 18px;grid-template-columns:1fr}
@media (min-width:560px){.form .row{grid-template-columns:1fr 1fr}}
.form input,.form select,.form textarea{
  display:block;width:100%;margin-top:7px;padding:13px 14px;
  font:300 16px/1.4 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;
  background:var(--bone);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .25s,background .25s;
}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--clay);background:#fff;outline:none}
.form textarea{resize:vertical}
.form .h3{margin-bottom:1.1em}
.form .fine{margin-top:1.4em}
.hp{position:absolute;left:-9999px}
.contact-side .locs{grid-template-columns:1fr}
.contact-side .loc{background:var(--shell)}

.posts{border-top:1px solid var(--line)}
.post{padding:26px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
@media (min-width:640px){.post{grid-template-columns:130px 1fr;gap:26px;align-items:baseline}}
.post time{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}

/* --------------------------------------------------------------- footer */
.foot{background:var(--ink);color:rgba(255,255,255,.78);padding-block:clamp(58px,7vw,96px) 0;
  font-size:.93rem}
.foot a{text-decoration:none;transition:color .25s}
.foot a:hover{color:#fff}
.foot h3{font-family:var(--serif);font-size:1.05rem;color:#fff;margin-bottom:1.1em;
  letter-spacing:.02em}
.foot h3.mt{margin-top:2em}
.foot-grid{display:grid;gap:clamp(34px,4vw,56px);grid-template-columns:1fr}
@media (min-width:700px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr .8fr}}
/* Inline SVG inheriting currentColor — no invert filter, and no <img> box to
   pick up the placeholder background (which showed as a lighter slab in dark
   mode). Run it large: at 132px the hairline frame drops below a device pixel. */
.foot-crest{width:206px;height:auto;display:block;color:rgba(255,255,255,.92)}
.foot .tag{font-family:var(--serif);font-style:italic;font-size:1.1rem;
  color:rgba(255,255,255,.72);margin:1.2em 0;max-width:30ch}
.socials{display:flex;flex-wrap:wrap;gap:18px;font-size:.79rem;letter-spacing:.15em;
  text-transform:uppercase}
.plain li{margin-bottom:.85em;line-height:1.55}
.foot .hours{border-color:rgba(255,255,255,.15)}
.foot .hours li{border-color:rgba(255,255,255,.15)}
.foot .hours li span:last-child{color:rgba(255,255,255,.6)}
.foot-fine{margin-top:clamp(44px,5vw,70px);padding-block:26px 30px;
  border-top:1px solid rgba(255,255,255,.15);font-size:.8rem;color:rgba(255,255,255,.5)}
.foot-fine p{margin:0 0 .5em}
.disclaimer{max-width:78ch}

/* ------------------------------------------------ sticky mobile bookbar */
.bookbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  transform:translateY(105%);transition:transform .4s cubic-bezier(.3,.8,.3,1);
  box-shadow:0 -1px 26px rgba(23,21,15,.16);
}
.bookbar.show{transform:none}
.bookbar a{flex:1;text-align:center;padding:17px 10px;text-decoration:none;
  font:400 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.bb-call{background:var(--shell);color:var(--ink);flex:0 0 34%!important}
.bb-book{background:var(--ink);color:#fff}
@media (max-width:860px){
  .bookbar{display:flex}
  body{padding-bottom:0}
  .foot-fine{padding-bottom:78px}
}

/* ------------------------------------------------------------ lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(23,21,15,.94);display:grid;
  place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:min(1100px,94vw);max-height:88vh;width:auto;object-fit:contain}
.lb button{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;
  font-size:30px;line-height:1;cursor:pointer;padding:10px}

/* ==================================================================
   v2 — contemporary pass. Per EXHIBITA (Health & Wellbeing, 2026-08-14):
   motion narrates, every effect answers cursor or scroll, ship light,
   both colour schemes from the start. Light + spacious stays the brief.
   ================================================================== */

/* scroll progress hairline, sits under the nav */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:55;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--nude),var(--clay));pointer-events:none}

/* very fine paper grain — keeps big flat bone areas from looking plasticky */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  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='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}

/* ---- hero: line-masked headline + scroll parallax ------------------ */
.ln{display:block;overflow:hidden}
.ln > span{display:block;transform:translateY(105%);
  transition:transform 1.15s cubic-bezier(.16,.84,.28,1)}
.lit .ln > span{transform:none}
.lit .ln:nth-child(2) > span{transition-delay:.09s}
.lit .ln:nth-child(3) > span{transition-delay:.18s}

.hero-meta{
  position:absolute;top:clamp(96px,13vh,130px);left:0;right:0;z-index:2;
  display:flex;gap:clamp(18px,4vw,52px);flex-wrap:wrap;
  font:400 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.74);
}
.hero-meta span{display:flex;align-items:center;gap:9px}
.hero-meta span::before{content:"";width:16px;height:1px;background:currentColor;opacity:.55}
.hero-copy{opacity:0;transition:opacity .7s .1s}
.lit .hero-copy{opacity:1}
.hero-sub,.hero-cta{opacity:0;transform:translateY(16px);
  transition:opacity .9s .5s cubic-bezier(.2,.7,.2,1),transform .9s .5s cubic-bezier(.2,.7,.2,1)}
.lit .hero-sub,.lit .hero-cta{opacity:1;transform:none}
.lit .hero-cta{transition-delay:.62s}

/* ---- scroll-velocity marquee --------------------------------------- */
.mq{overflow:hidden;padding:clamp(26px,3.4vw,46px) 0;
  border-block:1px solid var(--line);background:var(--bone)}
.mq-track{display:flex;gap:0;width:max-content;will-change:transform}
.mq-track span{
  display:flex;align-items:center;gap:clamp(26px,3vw,50px);padding-right:clamp(26px,3vw,50px);
  font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.1vw,2.6rem);
  color:var(--ink-45);white-space:nowrap;
}
.mq-track span::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--nude);flex:0 0 auto}

/* ---- numbered editorial index + cursor-following preview ----------- */
.index{border-top:1px solid var(--line);margin-top:clamp(34px,4.5vw,58px)}
.index li{border-bottom:1px solid var(--line)}
.index a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(14px,3vw,38px);padding:clamp(20px,2.6vw,34px) 0;text-decoration:none;
  position:relative;isolation:isolate;
}
.index a::before{
  content:"";position:absolute;inset:0 -18px;z-index:-1;background:var(--shell);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.16,.84,.28,1);
}
.index a:hover::before{transform:scaleY(1);transform-origin:50% 0}
.index .num{font:400 11px/1 var(--sans);letter-spacing:.16em;color:var(--clay);
  width:2.4em;transition:transform .45s cubic-bezier(.16,.84,.28,1)}
.index .nm{font-family:var(--serif);font-weight:300;line-height:1.1;
  font-size:clamp(1.45rem,3.5vw,2.6rem);letter-spacing:-.012em;
  transition:transform .5s cubic-bezier(.16,.84,.28,1)}
.index .grp{font:400 10.5px/1 var(--sans);letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-45);white-space:nowrap}
.index a:hover .nm,.index a:hover .num{transform:translateX(clamp(6px,1.1vw,16px))}
.index .thumb{display:none}
@media (max-width:760px){
  .index a{grid-template-columns:auto 1fr;gap:14px 16px}
  .index .grp{grid-column:2;font-size:9.5px;margin-top:2px}
  .index .thumb{display:block;grid-column:1/-1;margin-top:14px}
  .index .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
}
.idx-prev{
  position:fixed;top:0;left:0;z-index:40;width:clamp(210px,17vw,300px);
  aspect-ratio:4/5;pointer-events:none;opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.94);
  transition:opacity .4s,transform .5s cubic-bezier(.16,.84,.28,1);
  overflow:hidden;box-shadow:0 24px 60px rgba(27,24,19,.18);
}
.idx-prev.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.idx-prev img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px),(hover:none){.idx-prev{display:none}}

/* ---- image wipe on scroll (replaces plain fade for photography) ---- */
.wipe{overflow:hidden}
.wipe img{clip-path:inset(0 0 100% 0);transform:scale(1.08);
  transition:clip-path 1.15s cubic-bezier(.16,.84,.28,1),
             transform 1.5s cubic-bezier(.16,.84,.28,1)}
.wipe.in img{clip-path:inset(0 0 0 0);transform:none}

/* ---- instagram / follow -------------------------------------------- */
.ig{background:var(--shell)}
.ig-head{display:grid;gap:20px;align-items:end;margin-bottom:clamp(28px,3.4vw,46px)}
@media (min-width:820px){.ig-head{grid-template-columns:1fr auto}}
.ig-head .muted{max-width:46ch;margin:.7em 0 0}
.ig-cta{margin:0}
/* video wall — her real YouTube Shorts / cross-posted Reels */
.vid-grid{display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.vid-grid{grid-template-columns:repeat(4,1fr)}}
.vid{text-decoration:none;display:block;group:vid}
.vid-thumb{position:relative;display:block;overflow:hidden;background:var(--sand);
  aspect-ratio:9/16}
.vid-thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}
.vid:hover .vid-thumb img{transform:scale(1.06);filter:brightness(.74)}
.vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(252,251,249,.92);color:var(--ink);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s}
.vid-play svg{width:22px;height:22px;margin-left:2px}
.vid:hover .vid-play{transform:translate(-50%,-50%) scale(1.06);background:#fff}
.vid-meta{display:block;padding-top:.85em}
.vid-meta time{display:block;font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-45);margin-bottom:.45em}
.vid-title{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.92rem;line-height:1.45;color:var(--ink-70)}
.vid:hover .vid-title{color:var(--ink)}
.socials-row{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,38px);
  margin-top:clamp(26px,3vw,40px);padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.19em;text-transform:uppercase}
.socials-row a{text-decoration:none;color:var(--ink-70);transition:color .3s}
.socials-row a:hover{color:var(--clay)}

/* ---- her own words ------------------------------------------------- */
.ethos{background:var(--sand)}
.ethos-q{margin:0;padding:0;border:0}
.ethos-q .display{font-size:clamp(1.7rem,3.4vw,2.75rem);line-height:1.14;
  margin-bottom:.85em;text-wrap:balance}
.ethos-q p:not(.display){color:var(--ink-70);max-width:60ch;
  font-size:clamp(1rem,1.3vw,1.12rem)}
.ethos-q cite{display:block;margin-top:1.6em;font-style:normal;font-size:11px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--clay)}
.ethos-q cite::before{content:"";display:inline-block;width:24px;height:1px;
  background:var(--clay);vertical-align:middle;margin-right:12px;opacity:.6}

/* ---- credential strip ---------------------------------------------- */
.strip{background:var(--ink);color:rgba(255,255,255,.8);padding-block:clamp(30px,3.6vw,48px)}
.strip-in{display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:repeat(2,1fr);
  text-align:center}
@media (min-width:820px){.strip-in{grid-template-columns:repeat(4,1fr)}}
.strip b{display:block;font-family:var(--serif);font-weight:300;color:#fff;
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1}
.strip span{display:block;margin-top:.7em;font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(255,255,255,.56)}

/* ================================================================
   Journal, aftercare, locations, pricing, mentorship application
   ================================================================ */

.pmeta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  font:400 10.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-45);margin:0 0 .9em}
.pmeta span,.pmeta time{display:flex;align-items:center;gap:16px}
.pmeta > *+ *::before{content:"";width:14px;height:1px;background:currentColor;opacity:.5}

.feature{display:grid;gap:clamp(26px,4vw,60px);text-decoration:none;
  grid-template-columns:1fr;align-items:center;margin-bottom:clamp(52px,7vw,96px)}
@media (min-width:900px){.feature{grid-template-columns:1.15fr .85fr}}
.feature-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feature .display{font-size:clamp(1.8rem,3.4vw,2.9rem);margin:.25em 0 .5em}
.feature:hover .display{color:var(--clay)}
.feature .display,.feature .lede{transition:color .3s}

.pcards{display:grid;gap:clamp(30px,4vw,52px);grid-template-columns:1fr}
@media (min-width:640px){.pcards{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.pcards{grid-template-columns:repeat(3,1fr)}}
.pcard-img{display:block;overflow:hidden;margin-bottom:1.2em}
.pcard-img img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard .h3{margin-bottom:.5em}
.pcard .h3 a{text-decoration:none}
.pcard .h3 a:hover{color:var(--clay)}
.pcard .muted{font-size:.94rem;margin-bottom:1em}

.post-head{background:var(--shell)}
.crumbs.dark{color:var(--ink-45)}
.crumbs.dark a{text-decoration:none}
.crumbs.dark a:hover{color:var(--clay)}
.post-cover{margin-block:clamp(-28px,-3vw,-18px) 0;overflow:hidden}
.post-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-body{padding-top:clamp(40px,5vw,70px)}
.prose p,.post-body p{color:var(--ink-70);font-size:1.05rem}
.post-body .h3{margin:1.9em 0 .55em;color:var(--ink)}
.post-body blockquote{margin:1.8em 0;padding-left:26px;border-left:2px solid var(--nude);
  font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.45;color:var(--ink)}
.plain-link{text-decoration:none}
.plain-link:hover{color:var(--clay)}

.acards,.lcards{display:grid;gap:clamp(20px,2.6vw,32px);grid-template-columns:1fr}
@media (min-width:680px){.acards,.lcards{grid-template-columns:1fr 1fr}}
.acard{display:block;text-decoration:none;background:var(--shell);
  padding:clamp(26px,3vw,40px);transition:transform .5s cubic-bezier(.16,.84,.28,1),
  background .35s}
.acard:hover{transform:translateY(-4px);background:var(--sand)}
.acard .h3{margin-bottom:.5em}
.acard .muted{font-size:.95rem;margin-bottom:1.3em}

.lcard{display:block;text-decoration:none}
.lcard-img{overflow:hidden;margin-bottom:1.2em}
.lcard-img img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.lcard:hover .lcard-img img{transform:scale(1.05)}
.lcard .h3{margin-bottom:.25em}
.lcard .muted{font-size:.94rem;margin-bottom:.9em}
.addr{font-size:.98rem;line-height:1.7;color:var(--ink-70);margin:1.4em 0}

.ac-block{margin-bottom:clamp(44px,5.5vw,76px)}
.checks li{position:relative;padding-left:34px;margin-bottom:.95em;color:var(--ink-70)}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:9px;
  border-left:1.5px solid var(--clay);border-bottom:1.5px solid var(--clay);
  transform:rotate(-45deg)}
.checks.warn li::before{border-color:#b0483a;transform:none;top:.62em;height:0;width:16px;
  border-left:0;border-bottom:1.5px solid #b0483a}
.xps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.4em}
@media (min-width:640px){.xps{grid-template-columns:1fr 1fr}}
.xp{background:var(--bone);padding:22px 24px}
.xp b{display:block;font-family:var(--serif);font-weight:400;font-size:1.15rem;
  margin-bottom:.3em}
.xp span{font-size:.93rem;color:var(--ink-70)}
.timeline{margin-top:1.4em;border-left:1px solid var(--line);padding-left:26px}
.timeline li{position:relative;padding-bottom:1.5em}
.timeline li::before{content:"";position:absolute;left:-31px;top:.5em;width:9px;height:9px;
  border-radius:50%;background:var(--nude);box-shadow:0 0 0 4px var(--bone)}
.timeline b{display:block;font:400 11px/1 var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--clay);margin-bottom:.4em}
.timeline span{color:var(--ink-70)}
.alarm{border:1px solid rgba(176,72,58,.3);background:rgba(176,72,58,.05);
  padding:clamp(24px,3vw,38px)}
.eyebrow.warn{color:#b0483a}

.ptable{border-top:1px solid var(--line);margin-top:1.4em}
.prow{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:baseline;
  padding:19px 0;border-bottom:1px solid var(--line)}
.pname{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.32rem)}
.punit{grid-column:1;font:400 10.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45)}
.pval{grid-row:1/3;align-self:center;font-family:var(--serif);font-size:1.2rem;
  color:var(--clay);white-space:nowrap}

.checks-field{border:0;padding:0;margin:0 0 18px}
.checks-field legend{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-70);margin-bottom:12px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{margin:0!important;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:block;padding:9px 16px;border:1px solid var(--line);border-radius:99px;
  font:300 13px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-70);
  background:var(--bone);transition:background .25s,border-color .25s,color .25s}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.chip input:focus-visible + span{outline:2px solid var(--clay);outline-offset:2px}

/* ==================================================================
   Phone. Most of her traffic arrives from Instagram, so this is the
   primary case, not an afterthought. Every touch target >= 44px.
   ================================================================== */
@media (max-width:860px){
  /* 44px minimum on everything tappable (Apple HIG / Android a11y) */
  .link,.big-link,.socials a,.socials-row a,.crumbs a,.tlist a,
  .foot a,.plain a,.posts a,.mini,.index a{
    min-height:44px;display:inline-flex;align-items:center}
  .tlist a,.index a{display:flex}
  .socials,.socials-row{gap:4px 22px}
  .socials a,.socials-row a{padding:11px 0}
  .foot .plain li{margin-bottom:0}
  .foot h3{margin-bottom:.6em}

  .burger{width:46px;height:46px;display:grid;place-content:center;margin-right:-10px}

  /* the sticky bar is the main conversion path — keep it clear of the
     home indicator, and make both halves a comfortable thumb target */
  .bookbar{padding-bottom:env(safe-area-inset-bottom,0)}
  .bookbar a{padding:19px 10px;min-height:56px;display:flex;
    align-items:center;justify-content:center}

  /* hero: shorter than 100svh so the first section peeks and invites scroll */
  .hero{min-height:92svh}
  .hero-meta{gap:6px 18px;font-size:9.5px;top:auto;bottom:auto;
    position:static;padding-top:0}
  .hero-copy{padding-bottom:clamp(60px,9vh,110px)}
  .hero-sub{font-size:.98rem;max-width:34ch}
  .hero-cta .btn{width:100%;text-align:center}
  .hero-cta .btn+.btn{margin:10px 0 0}

  /* stop the numbered index from feeling like a wall of text */
  .index .nm{font-size:1.35rem}
  .index a{padding:18px 0}

  /* comfortable reading measure and rhythm */
  .sec{padding-block:clamp(56px,13vw,88px)}
  .quote{padding:26px 22px}
  .faq-item summary{padding:20px 30px 20px 0}
}

@media (max-width:560px){
  .hero-meta{display:none}          /* three metadata rows crowd a small screen */
  .strip-in{gap:22px}
  .ig-grid{gap:6px}
}

/* honour the notch on landscape phones */
@media (max-width:860px) and (orientation:landscape){
  .wrap{width:min(var(--wrap),100% - max(var(--gut),env(safe-area-inset-left)) * 2)}
}

/* ------------------------------------------------------------- reveals */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-img img{animation:none}
  .scrollcue,.grain{display:none}
  .ln > span{transform:none}
  .hero-copy,.hero-sub,.hero-cta{opacity:1;transform:none}
  .wipe img{clip-path:none;transform:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==================================================================
   Dark scheme. The brand is deliberately bright, so this is a warm,
   low-contrast night version — not an inversion. Same spaciousness.
   ================================================================== */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#f3ece4;
    --ink-70:rgba(243,236,228,.72);
    --ink-45:rgba(243,236,228,.50);
    --bone:#16130f;
    --shell:#1f1b16;
    --sand:#241f19;
    --nude:#e0b499;
    --clay:#d6a082;
    --line:rgba(243,236,228,.15);
  }
  img{background:var(--shell)}
  .grain{mix-blend-mode:screen;opacity:.28}
  .nav.stuck{background:rgba(22,19,15,.9);box-shadow:0 1px 0 var(--line)}
  .mobnav,.nav.open{background:rgba(22,19,15,.98)}
  .brand-mark,.nav.over .brand-mark{color:var(--ink)}
  .btn{background:var(--ink);color:#16130f;border-color:var(--ink)}
  .btn:hover{background:var(--nude);border-color:var(--nude);color:#16130f}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:#16130f}
  .quotes,.strip{background:#100e0b}
  .foot{background:#100e0b;color:rgba(243,236,228,.74)}
  .foot h3,.foot a:hover{color:#fff}
  .bb-book{background:var(--nude);color:#16130f}
  .bb-call{background:var(--shell);color:var(--ink)}
  .form input,.form select,.form textarea{background:#16130f;color:var(--ink)}
  .form input:focus,.form select:focus,.form textarea:focus{background:#0e0c09}
  .cred-grid li{background:var(--bone)}
  .hero::after{background:linear-gradient(180deg,rgba(8,7,5,.5) 0%,rgba(8,7,5,.12) 34%,
                rgba(8,7,5,.38) 62%,rgba(8,7,5,.8) 100%)}
}