@font-face{font-family:'BSerif';src:url(serif.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:swap;}
/* 'BSans' is an internal alias meaning "this site's sans". Cheryl asked for a
   more elegant sans on 2026-08-25 and named Montserrat, so the alias now points
   at Montserrat rather than Source Sans 3. Latin subset only, variable 100-900,
   self-hosted like the other three faces so the standalone builder can inline it. */
@font-face{font-family:'BSans';src:url(sans.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'BSans';src:url(sans-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap;}

:root{
  /* Client-supplied palette, corrected and extended */
  --oxblood:#40110D;   /* client #40110D */
  --burgundy:#591F12;  /* client #591F12 */
  --rose:#8C5D5D;      /* client 3rd swatch, malformed as #85C5D5D */
  --dusty:#BF8F8F;     /* client #BF8F8F */
  --blush:#D9C1BF;     /* client #D9C1BF */
  --logo-red:#7F0200;  /* sampled from the supplied logo art */

  --ivory:#FBF7F3;
  --ivory-deep:#F4EBE5;
  --ink:#2A0B08;       /* near-black, biased oxblood */
  --ink-soft:#6B4A44;
  --rule:#E2D2CC;

  --serif:'BSerif',Georgia,'Times New Roman',serif;
  --sans:'BSans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;

  --gut:clamp(20px,5vw,72px);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* keep anchor targets clear of the sticky header */
section[id],[id]{scroll-margin-top:124px;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--logo-red);outline-offset:3px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--rose);margin:0;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--burgundy);text-wrap:balance;margin:0;line-height:1.08;letter-spacing:-.012em;}
h2{font-size:clamp(30px,4.4vw,52px);}
h3{font-size:clamp(21px,2.2vw,27px);line-height:1.2;}
p{margin:0;}
.lede{font-size:clamp(17px,1.55vw,20px);line-height:1.6;color:var(--ink-soft);max-width:60ch;}

.btn{
  display:inline-block;font-family:var(--sans);
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 30px;text-decoration:none;border:1px solid transparent;
  transition:background .28s ease,color .28s ease,border-color .28s ease;
}
.btn-solid{background:var(--oxblood);color:var(--ivory);}
.btn-solid:hover{background:var(--logo-red);}
.btn-line{border-color:var(--dusty);color:var(--burgundy);}
.btn-line:hover{border-color:var(--oxblood);background:var(--oxblood);color:var(--ivory);}

.link-arrow{
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--burgundy);
  text-decoration:none;border-bottom:1px solid var(--dusty);
  padding-bottom:3px;transition:border-color .25s ease,color .25s ease;
}
.link-arrow:hover{color:var(--logo-red);border-color:var(--logo-red);}

/* ---------- announcement + header ---------- */
.announce{
  background:var(--oxblood);color:var(--blush);
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;
  text-align:center;padding:11px 20px;
}
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,243,.94);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.hdr-in{
  max-width:var(--maxw);margin:0 auto;
  padding:16px var(--gut);
  display:flex;align-items:center;gap:36px;
}
/* size the stacked lockup by HEIGHT so the sticky bar stays shallow.
   aspect-ratio is pinned to the source artwork's own 824x551 because the logo is
   no longer served at its native size. A downscaled variant rounds to whole
   pixels, and a 440w attempt landed on 440x294, 0.07% off the original ratio,
   which was enough to change the header logo's width and the footer logo's height
   and move the whole document by 4px. The shipping file is logo-640.png and there
   is no candidate set on the logo, but the pin stays: it makes the layout independent of
   whatever the logo is re-exported at next. */
.hdr-logo{height:clamp(48px,5.2vw,70px);width:auto;aspect-ratio:824/551;flex:none;}
/* seven items since Hair Removal was added on 2026-08-26. Without nowrap the
   two-word labels break in half and the bar grows to two lines. */
.nav{display:flex;gap:clamp(14px,1.6vw,28px);margin-left:auto;align-items:center;}
.nav a{white-space:nowrap;}
.nav a{
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent;transition:border-color .25s ease,color .25s ease;
}
.nav a:hover{color:var(--logo-red);border-color:var(--logo-red);}
.hdr-cta{padding:12px 22px;font-size:12px;white-space:nowrap;}

/* mobile menu */
.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  padding:11px 14px;cursor:pointer;color:var(--burgundy);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.burger:hover{border-color:var(--oxblood);}
.mnav{display:none;border-top:1px solid var(--rule);background:var(--ivory);}
.mnav.open{display:block;}
.mnav a{
  display:block;padding:15px var(--gut);border-bottom:1px solid var(--rule);
  font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.mnav a:last-child{border-bottom:0;}
/* 1180, not 940. A seventh nav item was added on 2026-08-26 and the row stopped
   fitting alongside the logo and the call to action: measured, the header
   overflowed the viewport at 960, 1024 and 1100. The burger now takes over
   before that happens rather than after. */
@media(max-width:1180px){
  .nav,.hdr-cta{display:none;}
  .burger{display:block;}
}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:stretch;border-bottom:1px solid var(--rule);
}
.hero-copy{
  padding:clamp(56px,7vw,104px) clamp(24px,4.5vw,72px) clamp(56px,7vw,104px) var(--gut);
  display:flex;flex-direction:column;justify-content:center;gap:26px;
  max-width:760px;margin-left:auto;width:100%;
}
.hero h1{
  font-size:clamp(46px,6.6vw,88px);
  font-weight:600;line-height:.98;letter-spacing:-.028em;
  color:var(--oxblood);
}
.hero h1 em{
  font-family:var(--script);font-style:normal;font-weight:400;
  color:var(--logo-red);
  /* Ballet sits small and low against a 600-weight serif, so it is scaled up
     and nudged onto the same optical baseline rather than the metric one. */
  font-size:1.32em;line-height:.86;letter-spacing:.005em;
  display:inline-block;padding-right:.06em;
  font-variation-settings:'opsz' 72;
}
/* the descending swash needs about .5em of the h1's size beneath the line */
.hero h1{margin-bottom:.5em;}
/* Cheryl, 2026-08-26: the hero paragraph read larger than the body copy she
   pointed at as the reference ("Id like it all to look like the At Berenice,
   every plan begins..."). Matched to .lede exactly rather than approximately. */
.hero-sub{font-size:inherit;line-height:1.6;color:var(--ink-soft);max-width:46ch;}
.hero-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;}
.hero-since{
  display:flex;align-items:center;gap:14px;
  font-family:var(--serif);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose);
}
.hero-since::before{content:"";width:52px;height:1px;background:var(--dusty);flex:none;}

.hero-art{position:relative;overflow:hidden;background:var(--ivory-deep);min-height:520px;}
.hero-art img{
  position:absolute;inset:0;width:100%;height:100%;
  /* tuned to the reception photograph MJ supplied 2026-08-26. It is a 2:3
     full-length portrait in a near-square box, so most of the crop comes off
     the vertical. 22% keeps clear headroom above her; the old 42% was set for
     a face close-up and cuts into her hair here. */
  object-fit:cover;object-position:52% 22%;
  /* `both` on a keyframe that starts at opacity 0 is the construct the scroll
     reveal is forbidden from using. It is safe HERE and only here: this runs
     unconditionally from CSS with no JS gate, no delay and no observer, so there
     is no failure path that leaves it stuck at 0. Do not copy the pattern into
     anything JavaScript triggers. */
  animation:heroIn 1.5s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes heroIn{from{transform:scale(1.07);opacity:0;}to{transform:scale(1);opacity:1;}}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(251,247,243,.86) 0%,rgba(251,247,243,.28) 26%,rgba(64,17,13,.06) 62%,rgba(64,17,13,.14) 100%);
}
.hero-cap{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--oxblood);color:var(--blush);
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:500;
  padding:9px 18px;
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .hero-copy{order:2;padding:clamp(40px,8vw,64px) var(--gut);max-width:none;}
  .hero-art{order:1;min-height:340px;}
  /* Below 900px the box is a short landscape band and the source is a 2:3
     portrait, so the vertical crop is severe: about 264px of a 585px render. At
     the old 14% it took the top of her head off. 0% pins the crop to the top of
     the frame, which is where she is. */
  .hero-art img{object-position:52% 0%;}
  .hero-art::after{background:linear-gradient(180deg,rgba(64,17,13,.10) 0%,rgba(251,247,243,.30) 100%);}
}

/* ---------- proof strip ---------- */
.proof{background:var(--ivory-deep);border-bottom:1px solid var(--rule);}
.proof-in{
  max-width:var(--maxw);margin:0 auto;padding:22px var(--gut);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 34px;
}
.proof span{
  font-size:11.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--burgundy);
}

/* ---------- generic section ---------- */
section{padding:clamp(64px,8vw,116px) 0;}
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:62ch;}

/* ---------- intro ---------- */
/* Cheryl, 2026-08-25: "Make this Unwanted... on 3 lines."
   Measured rather than estimated: at 52px the heading needs 560px to hold three
   lines and it had 525px, capped BOTH by this 50/50 grid and by .sec-head's 62ch,
   which happen to land on the same number. So both have to move, and only just.
   1.15fr gives the heading about 604px, comfortably inside the 560-640 band that
   yields three lines rather than sitting on its edge. */
.intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:clamp(32px,6vw,88px);align-items:start;}
.intro-grid .sec-head{max-width:none;}
.intro-body{display:flex;flex-direction:column;gap:20px;}
.intro-body p{color:var(--ink-soft);}
.intro-acts{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin-top:8px;}
@media(max-width:860px){.intro-grid{grid-template-columns:1fr;gap:32px;}}

/* ---------- treatments ---------- */
.treats{border-top:1px solid var(--rule);background:var(--ivory);}
.treat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule);
}
.treat{
  padding:clamp(30px,3.4vw,46px) clamp(22px,2.6vw,38px) clamp(34px,3.6vw,50px);
  border-right:1px solid var(--rule);
  display:flex;flex-direction:column;gap:16px;
  transition:background .3s ease;
}
.treat:last-child{border-right:0;}
.treat:hover{background:var(--ivory-deep);}
.treat-no{
  font-family:var(--serif);font-size:12px;letter-spacing:.2em;
  color:var(--rose);text-transform:uppercase;
}
.treat p{color:var(--ink-soft);font-size:16px;}
.treat .link-arrow{margin-top:auto;align-self:flex-start;}
@media(max-width:860px){
  .treat-grid{grid-template-columns:1fr;}
  .treat{border-right:0;border-bottom:1px solid var(--rule);}
  .treat:last-child{border-bottom:0;}
}

/* ---------- press (the centrepiece) ---------- */
.press{background:var(--oxblood);color:var(--blush);border-top:1px solid var(--oxblood);}
.press h2{color:var(--ivory);}
/* Cheryl, 2026-08-26: "Make the NEW YORK BEAUTY AUTHORITY AND THE TEXT UNDER IT
   IN WHITE." Both were set in the muted blush palette against the oxblood. */
.press .eyebrow{color:#fff;}
.press-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,72px);align-items:end;
}
.press-head p{color:#fff;opacity:1;font-size:17px;line-height:1.6;}
@media(max-width:860px){.press-head{grid-template-columns:1fr;gap:24px;}}

.press-grid{
  margin-top:clamp(34px,4.4vw,56px);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,20px);
}
/* the press-wall grid Cheryl's covers replaced on 2026-08-20; kept so the
   swap back is one revert. No markup references .pf right now. */
.pf{overflow:hidden;background:#1d0705;}
.pf img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.25,1);}
.pf:hover img{transform:scale(1.045);}
.pf.a{grid-column:span 7;aspect-ratio:4/3;}
.pf.b{grid-column:span 5;aspect-ratio:1/1;}
.pf.c{grid-column:span 5;aspect-ratio:1/1;}
.pf.d{grid-column:span 7;aspect-ratio:4/3;}
/* .pf.reveal-in used `forwards` on a keyframe starting at opacity 0, at a higher
   specificity than the safe .reveal-in rule. Dead today, but .pf is still in the
   JS selector, so restoring the press-wall markup would have re-armed exactly the
   construct the house rule forbids. Deleted; a restored .pf now picks up the safe
   animation like everything else. */
@media(max-width:760px){
  .pf.a,.pf.b,.pf.c,.pf.d{grid-column:span 12;aspect-ratio:4/3;}
}
.press-foot{
  margin-top:clamp(30px,3.6vw,46px);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;
}
.press-foot .btn-line{border-color:rgba(217,193,191,.5);color:var(--ivory);}
.press-foot .btn-line:hover{background:var(--ivory);color:var(--oxblood);border-color:var(--ivory);}
.press-note{font-size:13px;color:var(--dusty);letter-spacing:.04em;max-width:44ch;}

/* ---------- quote ---------- */
.quote{background:var(--ivory-deep);text-align:center;}
/* Cheryl, 2026-08-20: put the quote on one line. It is one line at EVERY width.

   The size is driven off the viewport because the sentence has to fit the line,
   not the other way round. Re-measured for MonteCarlo, 2026-08-26: its advance
   widths are much narrower than Ballet's, so the largest size holding one line
   is 0.0582 of viewport width at 320px, easing to 0.0598 above that. Ballet's
   figure was 0.070, and leaving 6.4vw in place ran the sentence off the right
   edge of a phone. 5.5vw sits under the worst case, capped at 62px.

   The narrower face also pays for itself on a phone: 21.5px at 390px, where
   Ballet needed 27px to say the same thing on one line.

   An earlier version of this got it badly wrong. It read the viewport formula's
   OUTPUT at 390px, 15.8px, as though that were the size needed to fit, concluded
   one line on a phone meant hairline type, and let the quote wrap on every phone
   instead. The size that actually fits at 390px is 27px, comfortably larger than
   the 12px credit line beneath it. Measure the fit, never infer it.

   padding-block with an equal negative margin keeps the geometry unchanged while
   giving the scroller room: overflow-x:auto computes overflow-y to auto too, so
   this is a clipping box whose top edge is the blockquote's top edge, and the
   script's ascenders are drawn above that line. Without the padding the tall
   strokes on b, d, t, h and f are silently sheared off, and ink overflow does not
   add to scrollHeight so nothing hints that it happened. Descenders likewise.

   The scroller itself is the escape hatch for a forced browser minimum font size
   pushing the line past the viewport, which body{overflow-x:hidden} would
   otherwise clip mid-word with no way to read the end of the sentence. */
.quote .wrap{overflow-x:auto;padding-block:30px;margin-block:-30px;}
.quote blockquote{
  margin:0 auto;max-width:none;white-space:nowrap;width:max-content;
  font-family:var(--script);font-style:normal;font-weight:400;
  font-size:min(5.5vw,62px);line-height:1.34;
  font-variation-settings:'opsz' 72;
  color:var(--burgundy);letter-spacing:-.015em;
}
.quote cite{
  display:block;margin-top:52px;font-style:normal;
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);
}

/* ---------- difference ---------- */
.diff-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0;margin-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.diff{
  padding:clamp(26px,3vw,42px);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:12px;
}
.diff h3{font-size:clamp(19px,1.9vw,23px);}
.diff p{color:var(--ink-soft);font-size:16px;}
@media(max-width:760px){.diff-grid{grid-template-columns:1fr;}}

/* ---------- founder ---------- */
.founder{border-top:1px solid var(--rule);}
.founder-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,80px);align-items:center;}
.founder-art{position:relative;background:var(--ivory-deep);overflow:hidden;aspect-ratio:4/5;}
.founder-art img{width:100%;height:100%;object-fit:cover;object-position:12% 50%;}
.founder-cap{
  position:absolute;left:0;bottom:0;
  background:var(--oxblood);color:var(--blush);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:9px 16px;
}
.founder-body{display:flex;flex-direction:column;gap:22px;}
.founder-body p{color:var(--ink-soft);}
.founder-meta{
  display:flex;flex-wrap:wrap;gap:0;margin-top:6px;
  border-top:1px solid var(--rule);
}
.fm{flex:1 1 160px;padding:18px 22px 18px 0;border-bottom:1px solid var(--rule);}
.fm dt{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin:0 0 6px;}
.fm dd{margin:0;font-family:var(--serif);font-size:19px;color:var(--burgundy);line-height:1.25;}
@media(max-width:860px){.founder-grid{grid-template-columns:1fr;}}

/* ---------- products ---------- */
.prod{background:var(--ivory-deep);border-top:1px solid var(--rule);}
.prod-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;}
.prod-lines{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--dusty);}
.pl{padding:22px 0;border-bottom:1px solid var(--dusty);display:flex;flex-direction:column;gap:6px;}
.pl h3{font-size:22px;}
.pl p{font-size:15.5px;color:var(--ink-soft);}
@media(max-width:860px){.prod-grid{grid-template-columns:1fr;}}

/* ---------- final cta ---------- */
.final{background:var(--ivory);border-top:1px solid var(--rule);text-align:center;}
.final-in{display:flex;flex-direction:column;align-items:center;gap:24px;}
/* Cheryl asked for "Ready to leave temporary fixes behind?" on two lines,
   2026-08-25. The 18ch cap was breaking it into three at every width. 26ch
   holds two from 377px up, measured by bisection. Below 377 it runs to three,
   which is a 320-360px phone and nothing wider. */
.final h2{font-size:clamp(32px,5vw,62px);max-width:26ch;color:var(--oxblood);}
.final .lede{text-align:center;margin:0 auto;}
.final-acts{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:6px;}

/* ---------- footer ---------- */
.ftr{background:var(--oxblood);color:var(--blush);padding:clamp(52px,6vw,84px) 0 0;}
.ftr-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);padding-bottom:clamp(40px,5vw,64px);
}
.ftr-addr{text-wrap:balance;}
.ftr-addr .nb{white-space:nowrap;}
.ftr-logo{width:210px;filter:brightness(0) invert(1);opacity:.94;aspect-ratio:824/551;}
.ftr p,.ftr a{font-size:15px;line-height:1.75;color:var(--blush);text-decoration:none;}
.ftr a:hover{color:var(--ivory);text-decoration:underline;text-underline-offset:3px;}
.ftr h3{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dusty);margin:0 0 14px;line-height:1.4;
}
.ftr-col{display:flex;flex-direction:column;gap:4px;}
.ftr-desc{max-width:38ch;margin-top:20px;opacity:.85;}
.ftr-legal{
  border-top:1px solid rgba(217,193,191,.22);
  padding:24px 0 34px;font-size:12.5px;color:var(--dusty);
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
}
@media(max-width:860px){.ftr-grid{grid-template-columns:1fr;}}

/* ---------- sticky mobile cta ---------- */
.sticky{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--oxblood);border-top:1px solid rgba(217,193,191,.3);
}
.sticky a{
  flex:1;text-align:center;padding:15px 8px;text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);
}
.sticky a+a{border-left:1px solid rgba(217,193,191,.3);}
@media(max-width:940px){.sticky{display:flex;}body{padding-bottom:52px;}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .pf{opacity:1;transform:none;}
  .reveal-in{animation:none;}
}

/* ============================================================================
   ADDED 2026-08-19
   Ballet script, team, testimonials, editorial archive, treatment pages,
   contact form + map, social. Everything below is additive; nothing above
   was rewritten except the italic rules, which now point at --script.
   ========================================================================== */

/* ---------- MonteCarlo, the client-chosen script ----------
   Cheryl chose Ballet on 2026-08-16, went off it on 2026-08-25 ("I do not like
   this font at all in this location"), floated a commercial face, and settled on
   MonteCarlo on 2026-08-26: "Change script font on all areas to Montecarlo".
   It is a Google font, so there is no licence to buy and nothing to wait for.

   Everything routes through --script, so this file swap moves all seven places
   at once: the four page titles, "three jobs." on skin care, the hero
   "Perfected." and the pull quote.

   size-adjust is re-measured for MonteCarlo below. The 112% here was Ballet's. */
@font-face{
  font-family:'BScript';
  src:url(script.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  /* No size-adjust. The 112% that lived here was a correction for how light
     Ballet was drawn. MonteCarlo is a heavier face, and carrying that number
     over would be copying the fix for a problem this font does not have. */
}
:root{--script:'BScript','Snell Roundhand','Apple Chancery',cursive;}

/* Ballet has a small x-height and thin strokes, so anywhere it replaces an
   italic it needs to come up in size and get air around it, or it reads as a
   rendering fault rather than a choice. */
.script{
  font-family:var(--script);
  font-style:normal;font-weight:400;
  letter-spacing:.005em;
  font-variation-settings:'opsz' 60;
}

/* ---------- interior page hero ---------- */
.phero{
  background:var(--ivory-deep);border-bottom:1px solid var(--rule);
  padding:clamp(44px,5.5vw,84px) 0 clamp(40px,5vw,72px);
}
.phero-in{display:flex;flex-direction:column;gap:18px;}
/* constrain the lines, not the container: .phero-in is also .wrap, and a
   max-width here overrides .wrap's and centres the whole block. */
.phero-in > *{max-width:70ch;}
/* ⛔ NO max-width ON THE H1. Cheryl asked for the script "on the same line" on
   2026-08-26 and again on 2026-08-28 ("make the first sentence on one line"),
   and only contact.html ever complied, by accident: "Come and see us." is short
   enough that a 16ch cap did not bite. Measured 2026-08-28, the longest title,
   "Hair removal, every method.", needs 813px of the 1280px available at 1440
   and 632px of 1024px at 1024. The type was never too big. The cap was the
   whole problem, so it is gone rather than compensated for with a smaller face.
   Below roughly 430px it wraps again, which is correct: one line there would
   mean 20px display type. */
/* Cheryl, 2026-08-25, asked to "expand the smaller text under the heading" and
   this was taken as size: clamp(18px,1.85vw,24px). She reversed it on
   2026-08-26 ("The text in the paragraph needs to be smaller on all pages")
   and named the reference herself: the homepage intro, "At Berenice, every plan
   begins...". That paragraph is .lede at clamp(17px,1.55vw,20px), so the page
   heroes now inherit .lede unchanged rather than overriding it. One size for
   body copy across all six pages, which is what "consistent throughout" means.

   max-width is in ch, so smaller type makes a NARROWER box. 65ch at 24px was
   about 1030px; at 20px it would fall to roughly 858px and leave the block
   looking thin under a 74px title. 76ch holds the measured width at about
   1004px, so the column keeps its footprint while the type comes down. */
.phero .lede{max-width:76ch;}
.phero h1{
  font-size:clamp(38px,5.6vw,74px);color:var(--oxblood);
  font-weight:600;line-height:1.02;letter-spacing:-.024em;
}
.phero h1 .script{
  font-size:1.34em;line-height:.9;color:var(--logo-red);display:inline-block;
  font-variation-settings:'opsz' 72;
}
/* room for the swash tail, which inks well outside its layout box */
.phero h1{margin-bottom:.6em;}

/* The accent treatment existed only inside .phero h1, so an accent used in a
   section heading rendered at body size in ink black and read as a mistake.
   Cheryl asked for "three jobs" to match the others, 2026-08-25, so the same
   scale and red now apply wherever .script sits inside a section heading. */
.sec-head h2 .script{
  font-size:1.3em;line-height:.9;color:var(--logo-red);
  display:inline-block;font-variation-settings:'opsz' 72;
}
.sec-head h2:has(.script){margin-bottom:.34em;}

/* ---------- long-form treatment blocks ---------- */
.tblock{border-top:1px solid var(--rule);}
.tblock:first-of-type{border-top:0;}
.tgrid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,76px);align-items:center;
}
.tblock:nth-of-type(even) .tgrid-art{order:2;}
.tgrid-body{display:flex;flex-direction:column;gap:18px;}
.tgrid-body p{color:var(--ink-soft);}
.tgrid-body h2{font-size:clamp(27px,3.4vw,42px);}
.tgrid-art{position:relative;background:var(--ivory-deep);overflow:hidden;aspect-ratio:3/2;}
.tgrid-art img{width:100%;height:100%;object-fit:cover;}
@media(max-width:860px){
  .tgrid{grid-template-columns:1fr;gap:26px;}
  .tblock:nth-of-type(even) .tgrid-art{order:0;}
}

/* a plain bulleted list in the practice's voice */
.tlist{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
.tlist li{position:relative;padding-left:22px;color:var(--ink-soft);font-size:16px;}
.tlist li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--dusty);
}

/* LED colour cards and similar small three-ups */
.mini-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(30px,3.6vw,46px);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.mini{
  padding:clamp(22px,2.6vw,34px);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:10px;
}
.mini h3{font-size:19px;}
.mini p{font-size:15.5px;color:var(--ink-soft);}
.swatch{width:26px;height:26px;border-radius:50%;border:1px solid var(--rule);}
@media(max-width:760px){.mini-grid{grid-template-columns:1fr;}}

/* ---------- team ---------- */
.team{border-top:1px solid var(--rule);background:var(--ivory-deep);}
/* Cheryl removed Rosula on 2026-08-28 and asked to "make the 2 other women
   horizontal since we are removing the one person". Two portrait cards in a
   three-column grid would have sat left with a hole beside them, so the card
   itself turns horizontal: portrait left, bio right, one card per row.

   ⛔ The image column is a fixed fraction rather than a fixed width. The two
   photographs are 800px wide originals at 3/2, and letting a percentage run
   wide enough on a 1280px row would upscale them. 38% caps the rendered width
   at about 470px on the widest row this site allows. */
.team-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(20px,2.6vw,36px);margin-top:clamp(38px,4.6vw,60px);
}
.tm{
  display:grid;grid-template-columns:38% 1fr;align-items:stretch;
  gap:0;background:var(--ivory);border:1px solid var(--rule);
}
.tm-body{justify-content:center;}
/* Below 720 the row is too narrow to carry a photograph and a bio side by side,
   so it goes back to the stacked card it was. */
@media(max-width:720px){
  .tm{grid-template-columns:1fr;}
  .tm-body{justify-content:flex-start;}
}
.tm-art{aspect-ratio:3/2;overflow:hidden;background:var(--ivory-deep);}
.tm-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.25,1);}
.tm:hover .tm-art img{transform:scale(1.04);}
.tm-body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:9px;}
.tm-name{font-family:var(--serif);font-size:23px;color:var(--burgundy);line-height:1.15;margin:0;}
/* Cheryl asked for the tracking on the professional titles to be tightened,
   2026-08-20. .18em was pushing two of the three onto a second line.
   NOTE the font-size and color here have never rendered: .tm-body p below is
   (0,1,1) and outranks this (0,1,0), so these titles have always drawn at
   15.5px in --ink-soft, not 11px rose. letter-spacing is the one property
   .tm-body p does not set, which is why the tracking change lands. Left alone
   deliberately: fixing the specificity would resize and recolor the titles,
   which is not what was asked for. Raise it with Cheryl. */
.tm-role{font-size:11px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:var(--rose);}
.tm-body p{font-size:15.5px;color:var(--ink-soft);}
@media(max-width:860px){.team-grid{grid-template-columns:1fr;max-width:520px;}}

/* ---------- testimonials ---------- */
.testi{border-top:1px solid var(--rule);}
.testi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:0;margin-top:clamp(38px,4.6vw,60px);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.ts{
  padding:clamp(26px,3vw,40px);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:16px;
  /* Cheryl, 2026-08-26 and again 2026-08-28: "COMMENTS FROM CLIENTS: CAN YOU
     MAKE THESE ROLOVERS?" The site already has one rollover idiom for a card
     that is not a link, .treat:hover, which warms the ground to ivory-deep.
     Same idiom here so the page reads as one system.
     position/z-index: the cards are separated by their own right and bottom
     rules, so the hovered card has to sit above its neighbours or the inset
     ring is clipped along two edges. */
  position:relative;
  transition:background .28s ease,box-shadow .28s ease;
}
/* Gated on hover:hover rather than undone under hover:none. On a phone :hover
   fires as a sticky post-tap style that then has to be tapped away, and undoing
   it with background:inherit would inherit the grid's ground, not the card's.
   Never declaring it on touch is the only version with no wrong state. */
@media(hover:hover){
  .ts:hover{
    background:var(--ivory-deep);
    /* an inset ring rather than a border, so nothing reflows on hover */
    box-shadow:inset 0 0 0 1px var(--blush);
    z-index:1;
  }
  .ts:hover .ts-svc{color:var(--logo-red);}
}
@media(prefers-reduced-motion:reduce){.ts{transition:none;}}
.ts-svc{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);}
.ts blockquote{
  margin:0;font-family:var(--serif);font-size:19px;line-height:1.42;
  color:var(--burgundy);letter-spacing:-.008em;
}
.ts cite{
  margin-top:auto;font-style:normal;font-size:13px;line-height:1.5;color:var(--ink-soft);
  display:flex;flex-direction:column;gap:1px;
}
.ts cite b{font-weight:600;color:var(--ink);}
.ts cite span{font-size:12px;color:var(--rose);letter-spacing:.06em;}

/* ---------- editorial archive ---------- */
.ed-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:clamp(18px,2.2vw,32px);margin-top:clamp(36px,4.4vw,58px);
}
/* the rights banner above it was removed on 2026-08-20; without it the grid's
   own top margin stacked on the section padding and left a hole */
.ed-grid:first-child{margin-top:0;}
.ed{
  display:flex;flex-direction:column;gap:12px;
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.ed-art{
  position:relative;overflow:hidden;background:var(--ivory-deep);
  aspect-ratio:3/4;border:1px solid var(--rule);
}
.ed-art img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.25,1);}
.ed:hover .ed-art img,.ed:focus-visible .ed-art img{transform:scale(1.05);}
.ed-art::after{
  content:"Read";
  position:absolute;left:0;right:0;bottom:0;
  background:var(--oxblood);color:var(--ivory);
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 12px;text-align:center;
  transform:translateY(100%);transition:transform .3s ease;
}
.ed:hover .ed-art::after,.ed:focus-visible .ed-art::after{transform:translateY(0);}
.ed-pub{font-family:var(--serif);font-size:15px;line-height:1.24;color:var(--burgundy);}
.ed-date{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-top:-8px;}
.ed-cover-note{font-size:12.5px;color:var(--ink-soft);line-height:1.4;margin-top:-6px;}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(26,6,4,.93);
  padding:clamp(14px,3vw,44px);
  overflow:auto;
}
.lb[open],.lb.on{display:block;}
.lb-in{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.lb-bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  position:sticky;top:0;padding:4px 0 10px;
}
.lb-title{color:var(--ivory);font-family:var(--serif);font-size:clamp(17px,2vw,23px);line-height:1.25;}
.lb-title small{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dusty);margin-top:6px;}
.lb-x{
  flex:none;background:none;border:1px solid rgba(217,193,191,.45);color:var(--ivory);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 16px;cursor:pointer;
}
.lb-x:hover{background:var(--ivory);color:var(--oxblood);}
.lb-img{width:100%;background:#1d0705;}
.lb-nav{display:flex;justify-content:space-between;gap:12px;padding-bottom:20px;}
.lb-nav button{
  background:none;border:1px solid rgba(217,193,191,.45);color:var(--ivory);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:12px 20px;cursor:pointer;
}
.lb-nav button:hover:not(:disabled){background:var(--ivory);color:var(--oxblood);}
.lb-nav button:disabled{opacity:.3;cursor:default;}
body.lb-open{overflow:hidden;}

/* ---------- contact ---------- */
.ct-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(34px,5vw,80px);align-items:start;
}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr;}}
.ct-info{display:flex;flex-direction:column;gap:26px;}
.ct-row{display:flex;flex-direction:column;gap:5px;padding-bottom:22px;border-bottom:1px solid var(--rule);}
.ct-row:last-child{border-bottom:0;}
.ct-row dt,.ct-lbl{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);}
.ct-row dd{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink);}
.ct-row a{color:var(--burgundy);text-decoration:none;border-bottom:1px solid var(--dusty);}
.ct-row a:hover{color:var(--logo-red);border-color:var(--logo-red);}
.ct-big{font-family:var(--serif);font-size:clamp(24px,2.6vw,31px);color:var(--burgundy);line-height:1.2;}

.form{display:flex;flex-direction:column;gap:20px;background:var(--ivory-deep);padding:clamp(26px,3.4vw,44px);border:1px solid var(--rule);}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:560px){.f2{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);}
.field label .req{color:var(--logo-red);}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--ivory);border:1px solid var(--rule);border-radius:0;
  padding:13px 14px;width:100%;
  transition:border-color .22s ease,box-shadow .22s ease;
  -webkit-appearance:none;appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--rose) 50%),linear-gradient(135deg,var(--rose) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(1em + 3px),calc(100% - 14px) calc(1em + 3px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:40px;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.55;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--oxblood);box-shadow:0 0 0 3px rgba(127,2,0,.11);
}
.field .hint{font-size:12.5px;color:var(--ink-soft);}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;}
.form button[type=submit]{border:0;cursor:pointer;font-family:var(--sans);}
.form-note{font-size:12.5px;color:var(--ink-soft);max-width:40ch;line-height:1.5;}
.demo-note{
  background:var(--blush);color:var(--oxblood);
  font-size:12.5px;line-height:1.5;padding:12px 15px;border-left:3px solid var(--logo-red);
}

.map{border:1px solid var(--rule);background:var(--ivory-deep);margin-top:clamp(40px,5vw,70px);}
.map iframe{display:block;width:100%;height:clamp(320px,42vw,480px);border:0;}

/* ---------- social ---------- */
.social{display:flex;gap:12px;margin-top:20px;}
.social a{
  width:40px;height:40px;flex:none;
  display:grid;place-items:center;
  border:1px solid rgba(217,193,191,.42);
  transition:background .25s ease,border-color .25s ease;
}
.social a:hover{background:var(--blush);border-color:var(--blush);}
.social svg{width:17px;height:17px;fill:var(--blush);transition:fill .25s ease;}
.social a:hover svg{fill:var(--oxblood);}

/* ---------- unlicensed-asset flag (demo only) ---------- */
.flag{
  position:absolute;left:0;top:0;z-index:3;
  background:rgba(127,2,0,.92);color:#fff;
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;
}

/* treatment cards carry an image now that the client has supplied photography */
.treat-art{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ivory-deep);margin:0 0 4px;}
.treat-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.25,1);}
.treat:hover .treat-art img{transform:scale(1.045);}
.treat{padding-top:0;}
.treat > .treat-no{margin-top:clamp(22px,2.4vw,30px);}

/* the fifth testimonial leaves a hole in a three-up grid, so the sixth cell
   carries the press link rather than sitting empty */
.ts-more{background:var(--ivory-deep);justify-content:center;gap:14px;}
.ts-more h3{font-size:21px;}
.ts-more p{font-size:15.5px;color:var(--ink-soft);}

/* the mobile action bar sits below the lightbox but still ghosts through it */
body.lb-open .sticky{display:none;}
/* a magazine spread is unreadable at phone width, so offer the raw scan */
.lb-full{
  display:inline-block;margin:10px 0 22px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dusty);text-decoration:none;border-bottom:1px solid rgba(217,193,191,.45);
  padding-bottom:3px;
}
.lb-full:hover{color:var(--ivory);border-color:var(--ivory);}


/* ============================================================================
   ADDED 2026-08-20 - Cheryl's edit round
   Site-wide scroll reveal, the home-page cover row, the skin-care callout.
   ========================================================================= */

/* ---------- scroll reveal ----------
   NOTHING HERE MAY HIDE CONTENT. There is no hidden resting state and no fill
   mode: .reveal-in only plays an animation that ends where the element already
   was. If site.js never runs, or the observer never fires, the page loses the
   animation and keeps every section. That is the only acceptable failure. */
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.reveal-in{animation:rise .8s cubic-bezier(.2,.7,.25,1);}

/* ---------- home-page press covers ----------
   Cheryl's five approval placeholders, on the oxblood press ground, so the
   captions run ivory/dusty rather than the burgundy used on the light
   editorials page. */
.press-covers{
  margin-top:clamp(34px,4.4vw,56px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,28px);
}
.press-covers .pc{
  display:flex;flex-direction:column;gap:11px;text-decoration:none;color:inherit;
}
.pc-art{
  position:relative;overflow:hidden;display:block;
  aspect-ratio:3/4;background:#1d0705;border:1px solid rgba(217,193,191,.28);
}
.pc-art img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.25,1);}
.pc:hover .pc-art img,.pc:focus-visible .pc-art img{transform:scale(1.05);}
.pc-art::after{
  content:"Editorials";
  position:absolute;left:0;right:0;bottom:0;
  background:var(--ivory);color:var(--oxblood);
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 12px;text-align:center;
  transform:translateY(100%);transition:transform .3s ease;
}
.pc:hover .pc-art::after,.pc:focus-visible .pc-art::after{transform:translateY(0);}
/* the global focus ring is --logo-red, about 1.5:1 on this oxblood ground. These
   five links are new keyboard stops, so they get a ring that can actually be seen. */
.pc:focus-visible{outline:2px solid var(--ivory);outline-offset:3px;}
/* min-height is the fallback: two lines' worth, so a wrapping title does not
   push its own date out of step with the other four. It only covers titles up to
   two lines, which is why subgrid below does the real work where it is supported
   and switches the min-height back off. */
.pc-pub{font-family:var(--serif);font-size:15px;line-height:1.24;color:var(--ivory);min-height:2.48em;}
.pc-date{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dusty);}
.pc-cover{font-size:12.5px;line-height:1.4;color:var(--blush);opacity:.82;}
/* Each cover is a four-row subgrid of the row it sits in, so art, title, date
   and cover-note line up across all five whatever the titles do. "Martha Stewart
   Weddings Ultimate Planner" runs to three lines at 1024 and on phones, which the
   two-line min-height above could not cover. */
@supports (grid-template-rows: subgrid){
  .press-covers .pc{display:grid;grid-template-rows:subgrid;grid-row:span 4;}
  .press-covers .pc-pub{min-height:0;}
}
@media(max-width:900px){.press-covers{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.press-covers{grid-template-columns:repeat(2,1fr);gap:16px;}}

/* ---------- callout ----------
   A summary line that has to carry more weight than body copy. Cheryl asked
   for the LED paragraph to read as prominent, 2026-08-20. */
/* Cheryl, 2026-08-25: "remove the cream box on top of the cream, and make this
   3 lines and not 4 with the widow at the bottom line."

   The fill was --ivory-deep sitting on the page's --ivory, which is cream on
   cream and reads as a box that failed to load rather than a deliberate panel.
   The fill goes; the short red rule stays, because her 2026-08-20 note asked for
   this line to be MORE prominent and the rule is what carries that now.

   72ch instead of 56ch is what takes it from four lines to three and takes
   "detail." off a line of its own. */
.callout{
  margin:clamp(34px,4vw,52px) auto 0;max-width:72ch;
  padding:clamp(20px,2.4vw,26px) clamp(24px,3vw,40px) 0;
  border-top:2px solid var(--logo-red);
  font-family:var(--serif);font-size:clamp(19px,1.85vw,24px);line-height:1.45;
  color:var(--burgundy);text-align:center;
}
.callout a{color:var(--logo-red);text-decoration:none;border-bottom:1px solid rgba(127,2,0,.35);}
.callout a:hover{border-bottom-color:var(--logo-red);}

/* A heading that carries its own line break needs room to honour it. The 62ch
   cap on .sec-head was breaking "What four decades of practice" in two, giving
   three lines where Cheryl asked for two, 2026-08-20.
   Measured by bisection: 428px is three lines, 429px is two. Below 429 the
   first half alone needs more width than the viewport has at this type size, and
   the only way to force two would be to shrink this one heading out of the type
   scale. Left at three on the narrowest phones and flagged, rather than faked. */
.sec-head-wide{max-width:none;}
/* Cheryl asked for two lines. At the page's normal h2 size the first half alone
   is wider than a phone, so below 430px this one heading steps down to a size
   that fits. Measured: two lines needs 21.3px at 320 and 29.9px at 428, and
   6.4vw sits under both. Above 429px the normal scale already gives two lines
   and this rule is not used. */
@media(max-width:429px){.sec-head-wide h2{font-size:min(6.4vw,30px);}}
/* With "Four decades on the wall." removed on Cheryl's instruction, 2026-08-20,
   the two-column press head had an empty left column. One column, eyebrow over
   the paragraph, so the section still opens on something. */
.press-head-solo{grid-template-columns:1fr;gap:18px;max-width:74ch;}
.press-head-solo .sec-head{gap:0;}


/* ============================================================================
   ADDED 2026-08-20 - scroll motion, and a mobile-first pass
   Desktop layout at rest is untouched: every rule below is either inside a
   max-width query, inside a (hover:none) query, or a transition. The one thing
   that DOES change on desktop is deliberate and is the requested feature: once
   you scroll past the threshold, .hdr-tight takes 32px out of the sticky header,
   so the document is 32px shorter while scrolled. At rest, at the top of the
   page, every pixel outside an image box is identical to before.
   ========================================================================= */

/* ---------- smooth scrolling ----------
   scroll-behavior:smooth is already on <html> and already turned off under
   prefers-reduced-motion at the top of this file. */

/* The sticky header condenses once you are past the hero. Nothing appears or
   disappears, so a failure to add .hdr-tight costs the transition and not the
   header. */
.hdr{transition:box-shadow .4s ease,background-color .4s ease;}
.hdr-in{transition:padding .4s cubic-bezier(.2,.7,.25,1);}
.hdr-logo{transition:height .4s cubic-bezier(.2,.7,.25,1);}
.hdr.hdr-tight{box-shadow:0 1px 18px rgba(64,17,13,.07);background:rgba(251,247,243,.97);}
.hdr.hdr-tight .hdr-in{padding-top:9px;padding-bottom:9px;}
.hdr.hdr-tight .hdr-logo{height:clamp(38px,3.9vw,52px);}

/* A hero parallax was built here and then removed, 2026-08-20. Recording why,
   because it looks like an obvious thing to add back.

   1. It could never have worked. `heroIn` on .hero-art img is declared with
      fill-mode `both`, so after it finishes it goes on applying transform:scale(1)
      from the CSS-ANIMATIONS cascade origin, which outranks any normal author
      declaration. A parallax transform on that element is silently ignored. It
      shipped inert: --px updated on every frame and moved nothing.
   2. Making it work means removing `both`, and then the overscan the parallax
      needs to translate into DOES change the hero's resting crop. That crop is
      client-approved artwork. Any vertical parallax over an object-fit:cover
      image needs overscan, so this is inherent, not an implementation detail.

   The scroll motion on this site is the reveal and the condensing header, both of
   which are additive and change no composition. */

/* ---------- mobile-first pass ---------- */

@media(max-width:640px){
  /* the announcement wraps to two lines on every phone. It cannot be made to fit
     one line at a readable size, so it is made to cost less height instead. */
  .announce{font-size:11px;letter-spacing:.06em;padding:8px 18px;line-height:1.45;}

  /* the hero art was taking 340px of an 844px screen and pushing the headline,
     the sub and both buttons to the edge of the fold. 38vh leaves the headline
     and the first call to action on the first screen. */
  /* gated on WIDTH but setting HEIGHT, so a landscape phone (wide enough to still
     match 640px, but only ~360px tall) was collapsing the hero to 137px and cutting
     the subject off at the forehead. The floor covers that; portrait phones are
     tall enough that 38vh always wins. */
  .hero-art{min-height:200px;height:38vh;max-height:330px;}

  /* two buttons of different widths stacked on top of each other reads as a
     mistake. Full width, equal, thumb-sized. */
  .hero-acts{gap:12px;}
  .hero-acts .btn{width:100%;text-align:center;}

  /* four proof items were wrapping into three ragged rows */
  .proof-in{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;padding:18px var(--gut);}
  .proof span{font-size:10.5px;letter-spacing:.13em;line-height:1.35;}
}

/* Touch targets. Phones and tablets only, so the desktop pointer UI keeps its
   tighter rhythm. Padding is used rather than height so nothing moves visually
   more than the few pixels needed to clear 44px. */
@media(hover:none){
  .link-arrow{padding:11px 0;}
  .burger{padding:14px 16px;}
  /* the real class names, checked against the rendered pages rather than guessed:
     footer links are anchors inside .ftr-col, and the breadcrumb is nav.crumb */
  /* min-height rather than padding arithmetic: padding has to be guessed against
     each link's line-height and a stray padding-bottom elsewhere left one of them
     3px short twice. This is exact. */
  .ftr-col a,.ftr-legal a,.crumb a{min-height:44px;display:inline-flex;align-items:center;}
  .social a{width:44px;height:44px;}
  /* Phone numbers set inline INSIDE a sentence (.callout, .ct-big, body copy) are
     deliberately left alone. Padding them to 44px would push the lines of the
     paragraph apart, and an inline link in a block of text is the documented
     exception to the target-size rule. The tappable block versions of the same
     number are in the footer and the sticky bar. */
}


/* ---------- social icons in the top strip ----------
   Cheryl, 2026-08-26: "Add social icons to the top and bottom." The header row
   already carries the logo, six nav links, a call to action and the burger, so
   four more targets there would crowd it. The announcement strip has the room. */
/* ⛔ Three-column grid, NOT flex-plus-absolute. The icons were briefly pinned
   with position:absolute to keep the sentence centred, and taking them out of
   flow meant the sentence no longer reserved room for them: at 768px "CENTRAL
   PARK" ran underneath the Facebook and X marks. Caught by looking at the
   render, not by reading the rule. An empty 1fr on the left balances the icons
   on the right, so the sentence is centred against the viewport AND in flow,
   and nothing can overlap at any width. */
.announce-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
}
.announce-in > span{grid-column:2;text-align:center;}
/* Cheryl asked for social icons at the top on 2026-08-26 and they went into
   this strip the same day. She asked again on 2026-08-28, "All social icons
   should be at the top as well as stated in my previous email", which is not a
   report that they are missing but that they are not reading as present: 14px
   of blush at 85% opacity, hard right on a 44px bar, is close to invisible next
   to a full-width sentence. Size and full opacity, not a new location. */
/* Cheryl, 2026-08-28: "justified right and closer together. They are too
   prominent right now." The 18px full-opacity size was an overcorrection: the
   reason she could not see them before was the black-fill bug, not the size, and
   once fill:currentColor landed they were legible at any size. Back down, and
   pinned to the right edge rather than trailing the sentence.

   Absolutely positioned so the sentence stays truly centred in the bar rather
   than being shoved left by the icons' width. Scoped to the single-row layout:
   below 720px the strip stacks and the icons go back in flow. */
.announce-social{display:flex;gap:6px;flex:none;}
.announce-social a{
  display:grid;place-items:center;width:22px;height:22px;
  color:var(--blush);transition:color .25s ease;
}
.announce-social a:hover{color:#fff;}
@media(min-width:721px){
  .announce-social{grid-column:3;justify-self:end;}
}
/* ⛔ The reason she could not see them. Only the Instagram path carries a
   fill="currentColor" attribute; Facebook, X and Yelp carry none, so they fell
   back to the SVG default of black and rendered black-on-oxblood, about 1.5:1.
   colour on the anchor was never reaching the glyphs. Measured on the live page
   2026-08-28: three of four resolved to rgb(0,0,0). The footer set never had
   this bug because .social svg sets fill explicitly. */
.announce-social svg{width:14px;height:14px;fill:currentColor;}
/* below 720px the strip already wraps to two lines; the icons go under the line
   rather than fighting it for width */
@media(max-width:720px){
  .announce-in{grid-template-columns:1fr;justify-items:center;gap:8px;}
  .announce-in > span{grid-column:1;}
  .announce-social a{width:30px;height:30px;}
  .announce-social svg{width:16px;height:16px;}
}
@media(hover:none){.announce-social a{width:38px;height:38px;}}


/* ============================================================================
   ADDED 2026-09-17 - Cheryl's round after Berenice's review
   ========================================================================= */

/* ---------- header lockup ----------
   "They feel like they can't see the logo in the menu." The logo goes up about
   a third, and "Established in 1982" sits under it on every page. The condensed
   size goes up with it so scrolling does not shrink it back to what they
   could not read. */
.hdr-brand{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;line-height:1;}
.hdr-logo{height:clamp(60px,6.6vw,94px);}
.hdr.hdr-tight .hdr-logo{height:clamp(48px,4.8vw,66px);}
/* "Make the Established in the menu smaller like this one below" (Cheryl,
   2026-09-18, with a mock-up). In her mock-up the line is exactly as wide as the
   logo's "PERSONAL BEAUTY CENTER" line (x 49-629 of the 640 art) and starts
   under it, with no tracking. The size follows the logo height (0.1258 x height
   fills that width at letter-spacing 0); 10px is the floor where the logo is at
   its 60px minimum, so on a phone it runs a little wider than the wordmark
   rather than going unreadable. translateX moves it under the wordmark, which
   sits 3% right of the art's centre. */
.hdr-est{
  font-family:var(--serif);font-size:clamp(10px,.83vw,11.8px);font-weight:700;
  letter-spacing:0;text-transform:uppercase;color:var(--logo-red);white-space:nowrap;
  transform:translateX(3.3%);
}
.hdr.hdr-tight .hdr-est{font-size:10px;}
.hdr-in{gap:clamp(18px,2.2vw,32px);}

/* ---------- current page ----------
   Desktop: the current item carries the hover treatment permanently. Mobile:
   the open drop-down was one flat colour, so the current row is filled. */
.nav a[aria-current="page"]{color:var(--logo-red);border-color:var(--logo-red);font-weight:600;}
.mnav a[aria-current="page"]{
  background:var(--oxblood);color:var(--ivory);font-weight:600;
  box-shadow:inset 4px 0 0 var(--dusty);
}

/* ---------- language switch ----------
   In the top bar beside the social icons. It was in the header row first and
   pushed past the right edge at 1440: "Complimentary Consultation" is a long
   button and the row had no room left. The bar has room at every width. */
.announce-social{align-items:center;}
.lang{display:flex;flex:none;border:1px solid rgba(217,193,191,.45);margin-right:10px;}
.lang button{
  background:none;border:0;cursor:pointer;padding:3px 8px;line-height:1.3;
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--blush);
}
.lang button + button{border-left:1px solid rgba(217,193,191,.45);}
.lang button[aria-pressed="true"]{background:var(--blush);color:var(--oxblood);}
.lang button:hover:not([aria-pressed="true"]){color:#fff;}
@media(max-width:720px){.lang button{padding:6px 11px;font-size:11.5px;}}
@media(hover:none){.lang button{padding:9px 13px;}}

/* ---------- home hero: logo, tagline, established ---------- */
.hero-logo{width:min(100%,440px);height:auto;aspect-ratio:824/551;}
.hero h1.hero-tag{font-size:clamp(34px,4.3vw,58px);}
/* Cheryl's 2026-09-18 mock-up: bold, logo red, no tracking, about 93% of the
   width of the logo's "PERSONAL BEAUTY CENTER" line above it. */
.hero-est{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(27px,3.45vw,37px);line-height:1.1;letter-spacing:0;
  text-transform:uppercase;color:var(--logo-red);margin:0;
}
@media(max-width:900px){.hero-logo{width:min(100%,340px);}}

/* ---------- team: names, titles and years only ---------- */
.tm-body .tm-years{font-family:var(--serif);font-size:20px;color:var(--logo-red);margin:0;}

/* ---------- difference grid with three cards ---------- */
@media(min-width:761px){.diff-grid-3{grid-template-columns:repeat(3,1fr);}}

/* ---------- editorials: the article over its cover ----------
   Cheryl: "It is more about the article ... a static image of the Cover,
   covered partially by the articles." The cover stays as the ground; the
   article's first page sits over its lower right. Height-bound so spreads and
   single pages both fit, whatever their ratio. */
.ed-art img.art-page,.pc-art img.art-page{
  position:absolute;z-index:1;right:7%;bottom:12%;
  width:auto;height:66%;max-width:70%;object-fit:contain;
  border:1px solid rgba(255,255,255,.7);background:#fff;
  box-shadow:0 10px 26px rgba(26,6,4,.38);
  transform:rotate(2.5deg);
}
.ed:hover .ed-art img.art-page,.ed:focus-visible .ed-art img.art-page,
.pc:hover .pc-art img.art-page,.pc:focus-visible .pc-art img.art-page{transform:rotate(0) scale(1.06);}
.ed-art::after,.pc-art::after{z-index:2;}
/* "Click to Read", and always shown: a hover-only label never appears on a phone */
.ed-art::after{content:"Click to Read";transform:none;}
html[lang="es"] .ed-art::after{content:"Haga clic para leer";}
html[lang="es"] .pc-art::after{content:"Editoriales";}
/* the covers now carry art and a date only */
@supports (grid-template-rows: subgrid){
  .press-covers .pc{grid-row:span 2;}
}

/* ---------- editorial pop-up: a window, not a takeover ----------
   "When you open the article, you lose the website." The overlay is lighter
   and the article sits in a framed window, so the page stays visible around it. */
.lb{background:rgba(26,6,4,.52);padding:clamp(14px,5vh,56px) clamp(12px,4vw,48px);}
.lb-window{
  max-width:860px;background:var(--oxblood);
  border:1px solid rgba(217,193,191,.35);box-shadow:0 30px 90px rgba(0,0,0,.5);
  padding:0 clamp(14px,2.4vw,28px);
}
.lb-window .lb-bar{background:var(--oxblood);padding-top:clamp(14px,2vw,22px);z-index:1;}

/* The header button wraps to two lines. "Complimentary Consultation" on one
   line pushed the row about 100px past the viewport between 1181 and 1440. */
.hdr-cta{white-space:normal;max-width:190px;text-align:center;line-height:1.3;padding:9px 18px;}
/* Spanish nav labels run about 100px longer than English ("Servicios de
   Belleza"), so in Spanish the row tightens and hands over to the menu button
   earlier. Measured overflow before this: 48px at 1181, 12px at 1440. */
html[lang="es"] .nav{gap:clamp(12px,1.25vw,22px);}
html[lang="es"] .nav a{letter-spacing:.05em;}
html[lang="es"] .hdr-cta{max-width:220px;}
@media(min-width:1181px) and (max-width:1320px){
  html[lang="es"] .nav,html[lang="es"] .hdr-cta{display:none;}
  html[lang="es"] .burger{display:block;margin-left:auto;}
}
/* With the bios gone the name is the headline of each card. .tm-body p had
   always overridden .tm-name's size (see the note at .tm-role), which only
   showed once the years line sat directly under it. */
.tm-body .tm-name{font-size:clamp(26px,2.4vw,32px);color:var(--burgundy);}
.tm-body .tm-years{font-size:19px;}
/* scrolled, the logo stays readable rather than shrinking back */
.hdr.hdr-tight .hdr-logo{height:clamp(54px,5.4vw,76px);}
/* lower and smaller: at 66% the page covered the face on the covers that
   show Berenice herself (Park Avenue 2022/2023, Resident 2018). Faces sit in
   the top third; the page now starts below it and clears the label band. */
.ed-art img.art-page,.pc-art img.art-page{height:50%;bottom:15%;right:6%;}
/* the phone bar keeps one line: "Complimentary Consultation" is twice the
   length of "Book a Consultation", so Call gives up width and the tracking
   comes in. body's 52px bottom padding assumes one line. */
.sticky a{white-space:nowrap;}
.sticky a:first-child{flex:0 0 30%;}
.sticky a+a{letter-spacing:.06em;font-size:11.5px;}
/* the flex row was squeezing the button below its natural two lines, so the
   Spanish label broke into three ("Consulta / de / Cortesía") */
.hdr-cta{flex:none;}
/* With the button no longer shrinking, the Spanish row needs its own room:
   the label sits on two lines ("Consulta de / Cortesía") and the nav tightens. */
html[lang="es"] .hdr-cta{max-width:150px;}
html[lang="es"] .nav{gap:clamp(10px,1vw,16px);}
html[lang="es"] .nav a{font-size:12.5px;letter-spacing:.04em;}
/* "ESTABLISHED in 1982 IN A LARGE FONT UNDER HER LOGO and throughout" (Cheryl,
   2026-09-17). Large under the logo on the home page; this is the "throughout"
   half, under the headline on the five interior pages. */
/* Same treatment as the home hero after her 2026-09-18 mock-up: bold, logo red,
   no tracking. */
.phero-est{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(19px,2.1vw,27px);line-height:1.1;letter-spacing:0;
  text-transform:uppercase;color:var(--logo-red);margin:0;
}
/* "Can you put the ESTABLISHED IN 1982 in the dark mini header? You can say NYC
   instead of Manhattan." (Cheryl, 2026-09-17). NYC buys back the width the
   date costs, so the bar still holds one line on a laptop. */
.announce-est{font-weight:700;letter-spacing:.14em;}
.announce-sep{font-style:normal;opacity:.55;margin:0 .6em;}
/* The date pushed the phone bar to three ragged lines (102px at 360). Tightened
   rather than shortened, because the copy is hers: 81px at 360, 390 and 430,
   and it no longer reflows between those widths. */
@media(max-width:640px){
  .announce{font-size:10.5px;letter-spacing:.03em;line-height:1.4;padding:7px 14px;}
  .announce-sep{margin:0 .4em;}
}

/* ---------- 2026-10-06 round: the practice's own photographs ----------
   Their marked-up PDF ("New Website Berenice Electrolysis.pdf", sent via Cheryl
   2026-10-06) adds a before/after pair under the laser photo, two waxing
   photos, a photo beside the LED heading and one beside "Come and see us." */
.tgrid-media{display:flex;flex-direction:column;gap:12px;min-width:0;}
.tblock:nth-of-type(even) .tgrid-media{order:2;}
.tgrid-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tblock .tgrid-media .tgrid-art{order:0;}
.tgrid-pair-tall .tgrid-art{aspect-ratio:1/1;}
.led-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,5vw,76px);align-items:center;}
.led-head .sec-head{max-width:none;}
.phero-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,5vw,76px);align-items:center;}
@media(max-width:860px){
  .tblock:nth-of-type(even) .tgrid-media{order:0;}
  .led-head,.phero-split{grid-template-columns:1fr;gap:26px;}
}
/* "Add gift certificate image to the site with photo small in the footer"
   (Cheryl, 2026-10-06). */
.ftr-gift{margin-top:18px !important;max-width:200px;}
.ftr-gift img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(217,193,191,.35);}
.ftr-gift figcaption{font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:8px;color:var(--blush);}
/* The practice's 16:9 photographs carry burned-in titles and captions at the
   edges ("Photo Rejuvenation", the LED caption), which the 3:2 crop cut off. */
.tgrid-art.tgrid-art-wide{aspect-ratio:16/9;}