/* =====================================================================
   FACE CODE AESTHETIC
   Design system. Monochrome editorial, taken off the brand mark.
   Type follows the reference layout: Aboreto display, EB Garamond body,
   Lato for UI. Custom properties map 1:1 onto WordPress Customizer keys.
   ===================================================================== */

:root{
  --ink:#1C1E21;
  --ink-soft:#4A4F55;
  --ink-faint:#8B9096;
  --rule:#DCD8D2;
  --rule-soft:#EBE8E3;
  --paper:#FBFAF8;
  --surface:#FFFFFF;
  --surface-alt:#F4F2EE;
  --blush:#F0E2DC;
  --accent:#A08B6F;

  --display:"Aboreto",Georgia,serif;
  --serif:"EB Garamond",Georgia,serif;
  --ui:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --logo:"Cormorant Garamond",Georgia,serif;

  --wrap:1200px;
  --wrap-narrow:760px;
  --gap:clamp(28px,4vw,52px);
  --band:clamp(72px,9vw,132px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- rhythm ---------- */
.wrap{width:min(100% - 2*clamp(20px,5vw,56px),var(--wrap));margin-inline:auto}
.wrap--narrow{max-width:var(--wrap-narrow)}
.band{padding-block:var(--band)}
.band--alt{background:var(--surface-alt)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--ink .lede,.band--ink p{color:#CFCCC7}
.center{text-align:center}
.stack>*+*{margin-top:1.05em}

/* ---------- type ---------- */
/* break-word is a safety net rather than a style choice. A heading holding one
   long unbreakable string, such as a handle or a URL, otherwise widens the page
   past the viewport and gives the whole site a sideways scroll on a phone. */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:400;margin:0;line-height:1.14;
  letter-spacing:.055em;overflow-wrap:break-word
}
/* The Instagram handle is 29 characters with no spaces. Rather than let it
   break mid-word, it is set smaller and allowed to break at the dots. */
.handle{font-size:clamp(19px,5.2vw,34px);letter-spacing:.02em;overflow-wrap:anywhere}

h1{font-size:clamp(32px,5.2vw,60px)}
h2{font-size:clamp(27px,3.9vw,46px)}
h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:.10em}
h4{font-size:16px;letter-spacing:.14em;text-transform:uppercase}
p{margin:0;color:var(--ink-soft)}
.lede{font-size:clamp(19px,1.55vw,22px);line-height:1.66;color:var(--ink-soft)}
.eyebrow{
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 18px
}
.band--ink .eyebrow{color:#9A958E}
.prose p+p{margin-top:1.05em}
.prose h2{margin:2.1em 0 .6em}
.prose h3{margin:1.9em 0 .5em}
.prose ul{margin:1.1em 0;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:.62em;color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:2px;top:.66em;width:11px;height:1px;background:var(--accent)}
.prose strong{font-weight:500;color:var(--ink)}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.prose a:hover{text-decoration-color:var(--ink)}
/* A button inside prose is still a button. The rule above is a element+class
   selector, so it outranks the single-class .btn and was repainting the label
   the same colour as the black fill, leaving an underlined black box. */
.prose a.btn{text-decoration:none;color:#fff}
.prose a.btn:hover{color:var(--ink)}
.prose a.btn--ghost{color:var(--ink)}
.prose a.btn--ghost:hover{color:#fff}
.prose a.btn--light{color:var(--ink)}
.prose a.btn--light:hover{color:var(--paper)}
.prose a.btn--wa{color:#1FA855}
.prose a.btn--wa:hover{color:#fff}

/* the hairline rule the brand mark is built on */
.rule{display:flex;align-items:center;gap:20px;margin:0}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:var(--rule)}
.rule--short::before,.rule--short::after{flex:0 0 46px}
.rule__text{font-family:var(--ui);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- buttons: square, black, Lato, per the reference ---------- */
.btn{
  display:inline-block;font-family:var(--ui);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:17px 36px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease)
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn--light:hover{background:transparent;color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.center .btn-row{justify-content:center}

/* ---------- brand lockup ---------- */
.lockup{display:inline-flex;align-items:center;gap:clamp(16px,2vw,30px);text-decoration:none;color:currentColor}
.lockup__mark{width:var(--mark,52px);height:auto;flex:none}
.lockup__bar{width:1px;align-self:stretch;background:currentColor;opacity:.45}
.lockup__word{font-family:var(--logo);font-weight:400;line-height:1}
.lockup__name{font-size:var(--word,26px);letter-spacing:.30em;padding-left:.30em;white-space:nowrap}
.lockup__sub{display:flex;align-items:center;gap:12px;margin-top:7px}
.lockup__sub::before,.lockup__sub::after{content:"";height:1px;flex:1;background:currentColor;opacity:.4}
.lockup__subtext{font-size:calc(var(--word,26px)*.355);letter-spacing:.42em;padding-left:.42em;white-space:nowrap}
.lockup--lg{--mark:86px;--word:46px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(251,250,248,.94);
  backdrop-filter:saturate(140%) blur(9px);border-bottom:1px solid var(--rule-soft)
}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}
/* The lockup sets its wordmark to nowrap, which is right - FACE CODE must not
   break across two lines. The consequence is that it cannot shrink to fit, so
   on a 320 or 360px phone it pushed the burger out and took the page with it.
   Scaling the lockup down below 420px keeps it on one line inside the gutter. */
/* Sized here rather than inline on the element. An inline style beats every
   stylesheet rule, so while these lived in the markup the breakpoints below
   could not shrink the logo, and on a narrow phone it pushed the burger out
   and gave the whole page a sideways scroll. */
.site-header .lockup{--mark:48px;--word:24px}
.lockup--footer{--mark:42px;--word:21px}
@media (max-width:420px){
  .site-header__in{gap:12px}
  .site-header .lockup{--mark:38px;--word:18px;gap:11px}
  .site-header .lockup__sub{gap:7px;margin-top:5px}
}
@media (max-width:360px){
  .site-header .lockup{--mark:31px;--word:14px;gap:8px}
  .site-header .lockup__sub{gap:5px;margin-top:4px}
}

.nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.nav a{
  font-family:var(--ui);font-size:11.5px;font-weight:400;letter-spacing:.17em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 0;position:relative
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink);transition:width .38s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav__drop{position:relative}
/* The panel sits below the trigger with a visual gap. Without a bridge across
   that gap the pointer leaves the hover area on the way down and the menu
   closes before you reach it, so the gap is padding on the panel rather than
   empty space, and a pseudo-element covers the header underline too. */
.nav__panel{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  padding-top:18px;min-width:290px;
  display:grid;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s
}
.nav__panel::before{
  content:"";position:absolute;top:18px;left:0;right:0;bottom:0;
  background:var(--surface);border:1px solid var(--rule-soft);box-shadow:0 24px 60px rgba(28,30,33,.10)
}
.nav__panel a{position:relative;padding:11px 26px}
.nav__panel a:first-of-type{padding-top:22px}
.nav__panel a:last-of-type{padding-bottom:22px}
.nav__drop:hover .nav__panel,.nav__drop:focus-within .nav__panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* keeps the trigger "hovered" while the pointer travels into the panel */
.nav__drop::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:20px}
.nav__panel a{font-size:11px;letter-spacing:.13em;white-space:nowrap}
/* Special Offers sits at the top of the dropdown and is set apart from the
   treatment list below it */
.nav__panel-feature{color:var(--accent)}
.nav__panel-feature::after{background:var(--accent)}
.nav__panel a.nav__panel-feature{padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--rule-soft)}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:1px;background:var(--ink);margin:6px 0;transition:.3s var(--ease)}

@media (max-width:1150px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:64px 0 auto;background:var(--paper);flex-direction:column;align-items:flex-start;
    gap:0;padding:20px clamp(20px,5vw,56px) 34px;border-bottom:1px solid var(--rule);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.32s var(--ease);
    max-height:calc(100dvh - 64px);overflow:auto
  }
  .nav[data-open="true"]{transform:none;opacity:1;visibility:visible}
  .nav>*{width:100%;border-bottom:1px solid var(--rule-soft)}
  .nav a{display:block;padding:15px 0;font-size:12px}
  /* Collapsed by default. Expanded inline the treatments list is 12 items,
     which pushes Packages, Price List, Gallery and Contact off the bottom of
     a phone screen where nobody finds them. */
  .nav__panel{
    position:static;transform:none;box-shadow:none;border:0;min-width:0;
    opacity:1;visibility:visible;display:none;padding:0 0 10px 16px
  }
  .nav__panel::before{display:none}
  /* The desktop rule that opens the floating panel also re-applies its
     translateX(-50%) centring, and it carries two classes to this block's one,
     so it wins on specificity. On a phone the tapped Treatments link keeps
     focus, :focus-within matches, and the whole submenu shifts half its width
     off the left of the screen. Neutralise the transform for both states. */
  .nav__drop:hover .nav__panel,
  .nav__drop:focus-within .nav__panel{transform:none}
  .nav__drop[data-open="true"] .nav__panel{display:grid}
  .nav__panel a{padding:12px 0;font-size:11px;white-space:normal}
  .nav__panel a:first-of-type,.nav__panel a:last-of-type{padding:12px 0}
  /* caret on the Treatments row so it reads as expandable */
  .nav__drop>a{position:relative}
  .nav__drop>a::before{
    content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);opacity:.65
  }
  .nav__drop[data-open="true"]>a::before{transform:translateY(-30%) rotate(225deg)}
}

/* ---------- touch tap targets ----------
   Small type is fine to look at and awkward to hit. Below the burger
   breakpoint these links get a padded hit area rather than a bigger font,
   so nothing about the design changes, only how easy it is to tap. */
@media (max-width:1150px){
  /* The desktop hover bridge sits 20px below the Treatments link. On desktop
     it covers the gap to a floating panel. In the mobile menu the panel is in
     normal flow directly underneath, so the bridge would lie on top of the
     first treatment link and swallow the tap. It is desktop-only. */
  .nav__drop::after{display:none}
  .nav__panel a{padding:14px 0}
  .crumbs{margin-bottom:12px;line-height:2.4}
  .crumbs a{display:inline-block;padding:10px 3px;margin:-10px 0}
  .footer__list{gap:4px}
  .footer__list a{display:inline-block;padding:9px 0}
  .footer__bar a{display:inline-block;padding:10px 2px}
  /* the phone and email in the footer are the two most likely taps on a phone */
  .site-footer p a{display:inline-block;padding:9px 0}
  .info a{display:inline-block;padding:7px 0}
  .card__more{padding:8px 0}
  /* the review dots stay 7px visually, the hit area is expanded around them */
  .quotes__dots{gap:10px}
  .quotes__dots button{position:relative}
  .quotes__dots button::after{content:"";position:absolute;inset:-18px -10px}
}

/* ---------- hero ---------- */
/* The hero photograph is a wide banner (roughly 3.2:1). Forcing it into a tall
   viewport-height hero cropped about half the width away, so on desktop the
   image runs at its natural ratio, full width, and the copy sits over it.
   Narrow screens fall back to a cropped fill, where a 3.2:1 band would be
   only a few centimetres tall. */
.hero{position:relative;overflow:hidden;background:var(--ink)}
.hero__media{position:relative;width:100%;line-height:0}
.hero__media img,.hero__media video{width:100%;height:auto;display:block}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,24,.46),rgba(20,22,24,.34) 42%,rgba(20,22,24,.58))}
.hero__in{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:clamp(20px,3vw,44px);
  /* nudged down so the lockup clears the face in the centre panel */
  padding-top:clamp(56px,9vw,140px)
}
@media (max-width:900px){
  /* Cropped to a phone the banner shows its centre panel, which puts Natalja's
     face in the top third. Centred copy landed the lockup across it, so the
     block is anchored to the bottom instead and the hero is a little taller to
     give it room. The gradient is at its darkest down there anyway. */
  .hero{min-height:min(88vh,680px);display:grid;place-items:end center}
  .hero__media{position:absolute;inset:0}
  .hero__media img,.hero__media video{height:100%;object-fit:cover}
  .hero__in{position:relative;inset:auto;padding:0 0 clamp(30px,6vw,48px);justify-content:flex-end}
}
.hero__in .lockup{color:#fff}
.hero__tag{
  font-family:var(--ui);font-size:11px;font-weight:400;letter-spacing:.30em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin:clamp(16px,2.2vw,30px) 0 0
}
.hero__sub{
  font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:rgba(255,255,255,.9);
  max-width:52ch;margin:clamp(12px,1.6vw,20px) auto 0
}
/* the lockup scales down with the shorter hero so everything still fits */
.hero__in .lockup--lg{--mark:clamp(52px,5.4vw,80px);--word:clamp(26px,3vw,42px)}
.hero__in .btn-row{margin-top:clamp(18px,2.4vw,32px)}

/* ---------- treatment hero: photo bleeding off the left ---------- */
.t-hero{
  display:grid;grid-template-columns:minmax(200px,26%) 1fr;
  background:var(--blush);align-items:stretch;min-height:clamp(300px,34vw,400px)
}
.t-hero__media{overflow:hidden}
.t-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.t-hero__media--flip img{transform:scaleX(-1)}
/* Cutouts are cropped tight to the subject and padded with the same blush as
   the band, so contain keeps the whole subject in frame at any column width.
   Cover was slicing the subject at the right-hand edge. */
.t-hero__media--contain{display:flex;align-items:stretch;justify-content:center}
.t-hero__media--contain img{object-fit:contain;object-position:center bottom;width:100%;height:100%}
.t-hero__body{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(38px,5vw,64px) clamp(24px,5vw,76px)
}
.t-hero__body .crumbs{margin-bottom:18px}
.t-hero__body h1{max-width:20ch}
.t-hero__body .lede{max-width:56ch;margin-top:18px}
.t-hero__body .btn-row{margin-top:30px;justify-content:center}
@media (max-width:820px){
  .t-hero{grid-template-columns:1fr;min-height:0}
  .t-hero__media{height:clamp(180px,42vw,260px)}
  .t-hero__body{padding:clamp(32px,7vw,48px) clamp(20px,5vw,40px)}
}

/* ---------- map ---------- */
.mapband{margin-top:clamp(34px,4vw,52px);line-height:0}
.mapband iframe{width:100%;height:clamp(300px,38vw,440px);border:0;display:block;filter:grayscale(1) contrast(1.05)}
.mapband iframe:hover{filter:none}

/* page hero for inner pages */
.page-hero{padding:clamp(56px,7vw,96px) 0 clamp(38px,4.5vw,58px);text-align:center;border-bottom:1px solid var(--rule-soft)}
.page-hero .lede{max-width:64ch;margin-inline:auto;margin-top:20px}
/* Contact leads with the gilt frame. It is a cutout with a real alpha shadow,
   so it needs the blush behind it to read the way the treatment heroes do -
   on paper the shadow has nothing to fall on. */
.page-hero--frame{background:var(--blush);border-bottom-color:transparent;padding-top:clamp(34px,4vw,52px)}
.page-hero--frame .frame{max-width:clamp(300px,38vw,430px);margin-bottom:clamp(20px,2.5vw,34px)}
.page-hero--frame h1{margin-top:0}
/* A square portrait at the head of a prose page pushed the first paragraph
   almost a full screen down. Tighten the join and crop the dead headroom out
   of the image, so the reader reaches the copy without a long scroll. */
.page-hero + .band:has(> .wrap > .fig:first-child){padding-top:clamp(30px,3.4vw,48px)}
.prose>.fig:first-child{margin-top:0}
.prose>.fig:first-child img{width:100%;height:min(58vh,500px);object-fit:cover}
.crumbs{font-family:var(--ui);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:22px}
.crumbs a{text-decoration:none;color:var(--ink-faint)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 9px;opacity:.55}

/* ---------- image strip ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:760px){.strip{grid-template-columns:1fr 1fr}.strip>*:last-child{display:none}}

/* ---------- treatment card grid ---------- */
.grid{display:grid;gap:var(--gap)}
.grid--3{grid-template-columns:repeat(3,1fr)}
/* A trailing single card would otherwise sit alone against the left edge.
   Centring it keeps the grid looking deliberate whatever the count.

   This has to be fenced inside the three column breakpoint. Unscoped, it still
   fired at the one and two column widths, where asking for column 2 in a single
   column grid makes the browser invent a second column - which doubles the page
   width and gives the whole site a horizontal scroll on a phone. */
@media (min-width:941px){
  .grid--3>:last-child:nth-child(3n-2){grid-column:2}
}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:940px){.grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
/* 16/9 suits the treatment photography, which is shot wide with the subject
   off-centre. A narrower crop cuts faces out of frame. */
.card__media{position:relative;overflow:hidden;background:var(--blush);aspect-ratio:16/9}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card__media img{transform:scale(1.045)}
.card__title{
  font-family:var(--display);font-size:clamp(18px,1.75vw,23px);letter-spacing:.10em;
  text-transform:uppercase;margin:22px 0 12px;line-height:1.3;color:var(--ink)
}
/* the text-only cards, such as the child treatments under a hub, carry the
   whole weight of the card, so they need a heavier, larger title */
.card:not(:has(.card__media)) .card__title{
  font-size:clamp(19px,1.95vw,25px);letter-spacing:.06em;
  border-bottom:1px solid var(--rule);padding-bottom:14px
}
.card__text{font-size:16.5px;line-height:1.62;color:var(--ink-soft);margin:0}
.card__more{
  font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-top:16px;color:var(--ink);display:inline-flex;align-items:center;gap:9px
}
.card__more::after{content:"";width:20px;height:1px;background:var(--ink);transition:width .35s var(--ease)}
.card:hover .card__more::after{width:34px}
.card--center{text-align:center}
.card--center .card__more{justify-content:center}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.split--flip .split__media{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr}.split--flip .split__media{order:0}}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ---------- price table ---------- */
.price-group{margin-bottom:clamp(38px,5vw,64px)}
.price-group__head{border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:6px}
.price-group__head h3{margin:0}
.price-group__note{font-size:16px;color:var(--ink-faint);margin-top:8px;font-style:italic}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:17px 0;border-bottom:1px solid var(--rule-soft)}
.price-row__name{margin:0;color:var(--ink);flex:1}
.price-row__name small{display:block;font-size:15px;color:var(--ink-faint);margin-top:4px;line-height:1.5}
.price-row__val{font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:.06em;white-space:nowrap;color:var(--ink);text-align:right}
.price-row__val s{color:var(--ink-faint);font-weight:400;margin-right:8px}

/* ---------- packages ----------
   Follows the printed card: the photo bleeds off the right of the card, the
   copy sits over the blush on the left, and the price sits in a chip on the
   photo. Grid rather than flex so the copy column and the photo can overlap
   in the same cell and the type stays readable over the image. */
.pkg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px)}
.pkg{
  position:relative;overflow:hidden;background:var(--blush);
  border:1px solid rgba(28,30,33,.06);min-height:270px;display:flex
}
.pkg__media{position:absolute;inset:0 0 0 42%;z-index:0}
.pkg__media img{width:100%;height:100%;object-fit:cover;display:block}
/* the photo is faded into the blush rather than butted against it, so the
   card reads as one surface the way the printed version does */
.pkg__media::after{
  content:"";position:absolute;inset:0;
  /* A fade only where the copy actually sits, so the photograph itself stays
     clear. The text column ends at 64% of the card and the photo starts at
     42%, so the wash has to be gone by roughly halfway across the image. */
  background:linear-gradient(90deg,var(--blush) 0%,rgba(240,226,220,.9) 20%,rgba(240,226,220,0) 50%)

}
.pkg__body{position:relative;z-index:1;padding:clamp(22px,2.4vw,32px);max-width:64%}
.pkg__body h3{
  margin:0;font-size:clamp(20px,2.1vw,26px);letter-spacing:.04em;
  -webkit-text-stroke:.4px currentColor
}
.pkg__tag{
  font-family:var(--ui);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-faint);margin:8px 0 0
}
.pkg__list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.pkg__list li{position:relative;padding-left:18px;font-size:16.5px;color:var(--ink)}
.pkg__list li::before{
  content:"";position:absolute;left:0;top:.52em;
  border-left:5px solid var(--accent);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent
}
.pkg__text{margin-top:14px;font-size:16.5px;line-height:1.62;color:var(--ink-soft)}
.pkg__book{
  display:inline-block;margin-top:16px;font-family:var(--ui);font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:5px
}
.pkg__book:hover{border-bottom-color:var(--ink)}
/* The whole card is clickable, but only this one link carries the destination.
   Stretching it beats wrapping the card in an anchor, which would hand a screen
   reader the entire card as one unreadable link name. */
.pkg__book::after{content:"";position:absolute;inset:0;z-index:3}
.pkg:hover .pkg__book{border-bottom-color:var(--ink)}
/* confirmation that the click landed, shown only once a package is picked */
.pkg-chosen{
  background:var(--blush);border-left:2px solid var(--accent);
  padding:14px 18px;margin:0 0 24px;font-size:16px;color:var(--ink)
}

.pkg__price{
  position:absolute;right:0;bottom:clamp(18px,2vw,26px);z-index:2;
  background:var(--blush);padding:11px 22px 11px 26px;
  font-family:var(--ui);font-size:19px;font-weight:700;letter-spacing:.03em;white-space:nowrap
}
@media (max-width:820px){
  .pkg-grid{grid-template-columns:1fr}
}
/* Below this the copy cannot share the card with the photo and stay legible,
   so the photo becomes a band across the top and the text sits under it. */
@media (max-width:560px){
  .pkg{flex-direction:column;min-height:0}
  .pkg__media{position:relative;inset:auto;height:190px}
  .pkg__media::after{background:linear-gradient(180deg,rgba(240,226,220,0) 55%,var(--blush) 100%)}
  .pkg__body{max-width:none;padding-top:14px}
  .pkg__price{position:static;align-self:flex-start;margin:0 0 clamp(18px,4vw,24px) clamp(22px,5vw,32px);padding:8px 20px}
}
.pkg-strap{
  font-family:var(--ui);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin:14px 0 0
}
.pkg-values{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,40px);max-width:1040px;margin-inline:auto
}
.pkg-values li{
  font-family:var(--ui);font-size:13px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.8;display:grid;justify-items:center;gap:16px
}
/* The ring is drawn in the accent rather than the hairline rule, because at
   2px the pale grey started to read as a box round the icon instead of part
   of it. Same weight, warmer, and it sits with the mark inside. */
.pkg-values svg{
  width:62px;height:62px;padding:15px;box-sizing:border-box;
  border:2px solid var(--accent);border-radius:50%;color:var(--accent);
  stroke-width:1.8
}
@media (max-width:700px){.pkg-values{grid-template-columns:1fr 1fr;gap:26px}}

/* ---------- gallery ---------- */
/* uniform tiles: the source photos are a mix of portrait and landscape, and
   varying the ratio leaves holes in the grid rather than reading as masonry */


/* ---------- before and after grid ---------- */
/* Four across, because each row is one client's appointment start to finish
   and the row has to stay readable as a row. The column gap is deliberately
   tighter than the row gap so the four frames group together rather than
   dissolving into a wall of twenty faces. The per-appointment wrapper is
   transparent here and does the grouping on narrow screens instead. */
.results{
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:clamp(6px,.9vw,12px);row-gap:clamp(20px,2.6vw,38px);
  margin-top:clamp(32px,4vw,52px)
}
.results__set{display:contents}
.results img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--blush)}
/* Below 760px four tiles across are too small to read a face in, so each
   appointment becomes its own 2x2 block. Without the wrapper the twenty
   would run on as ten anonymous pairs and the rows would stop meaning
   anything. */
@media (max-width:760px){
  .results{display:block}
  .results__set{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,1.6vw,10px);
    margin-bottom:clamp(22px,5vw,34px)
  }
  .results__set:last-child{margin-bottom:0}
}
.results__note{
  max-width:60ch;margin:clamp(26px,3vw,38px) auto 0;text-align:center;
  font-size:14.5px;line-height:1.7;color:var(--ink-faint)
}

/* ---------- trust row ---------- */
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(30px,5vw,72px);margin-top:38px}
.trust img{height:clamp(36px,4vw,52px);width:auto;opacity:.62;filter:grayscale(1);transition:opacity .4s var(--ease)}
.trust img:hover{opacity:1}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(16px,1.5vw,19px);letter-spacing:.045em;color:var(--ink);line-height:1.4
}
.faq__q::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1px;background:var(--ink);transition:.3s var(--ease)}
.faq__q::before{content:"";position:absolute;right:12px;top:50%;width:1px;height:13px;background:var(--ink);transform:translateY(-50%);transition:.3s var(--ease)}
.faq__q[aria-expanded="true"]::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq__a{overflow:hidden;max-height:0;transition:max-height .42s var(--ease)}
.faq__a>div{padding:0 8% 26px 0}

/* ---------- testimonials ---------- */
.quotes{position:relative}
.quote{display:none;text-align:center;max-width:70ch;margin-inline:auto}
.quote[data-active="true"]{display:block;animation:fade .6s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quote__stars{letter-spacing:.34em;color:var(--accent);font-size:13px;margin-bottom:22px}
.quote__text{font-family:var(--serif);font-size:clamp(19px,2.1vw,26px);line-height:1.56;color:var(--ink);font-style:italic;margin:0}
.quote__who{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-top:26px;color:var(--ink)}
.quotes__dots{display:flex;gap:9px;justify-content:center;margin-top:38px}
.quotes__dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:var(--rule);cursor:pointer;transition:.35s var(--ease)}
.quotes__dots button[aria-current="true"]{width:26px;background:var(--ink)}

/* ---------- compact treatment list, used on the area pages ---------- */
.treatment-list{
  list-style:none;margin:0 0 var(--gap);padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,44px)
}
@media (max-width:860px){.treatment-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.treatment-list{grid-template-columns:1fr}}
.treatment-list a{
  display:block;padding:15px 0;border-bottom:1px solid var(--rule);
  font-family:var(--display);font-size:clamp(15px,1.5vw,18px);letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  transition:padding-left .3s var(--ease)
}
.treatment-list a:hover{padding-left:10px}

/* ---------- ornate frame with the lockup set into it ----------
   The old lettering was painted out of the artwork and the real lockup is
   laid over the panel instead, so it stays crisp at any size, is selectable
   text, and follows the brand if it ever changes. Container query units tie
   the lockup size to the frame width rather than the viewport. */
.frame{position:relative;max-width:560px;margin-inline:auto;container-type:inline-size}
.frame>img{width:100%;height:auto;display:block}
.frame__inner{
  position:absolute;left:22.66%;top:23.01%;width:54.53%;height:43.18%;
  display:flex;align-items:center;justify-content:center;padding:1.5%
}
.frame__inner .lockup{--mark:38px;--word:19px;color:var(--ink);gap:14px}
@container (min-width: 1px){
  .frame__inner .lockup{--mark:8.6cqw;--word:4.3cqw;gap:2.6cqw}
}

/* a cutout on a transparent background sits on the page rather than in a box */
.split__media--cutout img{aspect-ratio:auto;object-fit:contain;background:none}

/* ---------- inline call to action ---------- */
.cta-inline{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  margin:2.6em 0;padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,38px);
  background:var(--blush);border:1px solid var(--rule)
}
.cta-inline p{margin:0;font-size:18px;line-height:1.5;color:var(--ink);max-width:46ch}
.cta-inline .btn{flex:none}
@media (max-width:560px){.cta-inline{flex-direction:column;align-items:flex-start}}

/* ---------- before and after ---------- */
.ba{margin:2.4em 0}
.ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba__one{position:relative}
.ba__one img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;display:block}
.ba__tag{
  position:absolute;left:12px;bottom:12px;background:rgba(28,30,33,.82);color:#fff;
  font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:7px 12px
}
.ba figcaption{font-size:15px;font-style:italic;color:var(--ink-faint);text-align:center;margin-top:14px;line-height:1.55}
@media (max-width:520px){.ba__pair{grid-template-columns:1fr}}

/* ---------- forms ---------- */
/* keyline so the form reads as one enclosed thing rather than loose fields */
.form{
  display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;margin-top:26px;
  border:1px solid var(--rule);background:var(--surface);
  padding:clamp(26px,3.4vw,44px)
}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;grid-column:1 / -1}
.field--half{grid-column:span 1}
@media (max-width:640px){.field--half{grid-column:1 / -1}}
.field label{
  font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px
}
.field label span[aria-hidden]{color:var(--accent)}
.field input,.field select,.field textarea{
  font-family:var(--serif);font-size:17px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);padding:14px 16px;width:100%;border-radius:0;
  transition:border-color .25s var(--ease)
}
.field textarea{resize:vertical;min-height:130px;font-family:var(--serif)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field__hint{font-size:14.5px;font-style:italic;color:var(--ink-faint);margin-top:9px;line-height:1.5}
.field--check label{
  flex-direction:row;align-items:flex-start;gap:12px;text-transform:none;letter-spacing:normal;
  font-family:var(--serif);font-size:16px;font-weight:400;color:var(--ink-soft);margin:0
}
.field--check input{width:19px;height:19px;flex:none;margin-top:3px;accent-color:var(--ink)}
.field--check a{color:var(--ink)}
.form button[type="submit"]{grid-column:1 / -1;justify-self:start}
/* honeypot: hidden from people, visible to bots */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- whatsapp ---------- */
.btn--wa{border-color:#1FA855;color:#1FA855}
.btn--wa:hover{background:#1FA855;border-color:#1FA855;color:#fff}
.wa-float{
  position:fixed;right:clamp(16px,2.5vw,28px);bottom:clamp(16px,2.5vw,28px);z-index:80;
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:#1FA855;color:#fff;padding:13px 20px 13px 16px;border-radius:999px;
  box-shadow:0 10px 30px rgba(31,168,85,.32);
  font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.wa-float svg{width:22px;height:22px;flex:none}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(31,168,85,.42);color:#fff}
@media (max-width:620px){
  .wa-float{padding:14px;border-radius:999px}
  .wa-float span{display:none}
  .wa-float svg{width:26px;height:26px}
}
@media print{.wa-float{display:none}}

/* ---------- google reviews ---------- */
.greviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
@media (max-width:900px){.greviews{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.greviews{grid-template-columns:1fr}}
.greview{margin:0;background:var(--surface);border:1px solid var(--rule-soft);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.greview__stars{color:var(--accent);letter-spacing:.16em;font-size:14px;margin-bottom:16px}
.greview blockquote{margin:0;font-size:17px;line-height:1.62;color:var(--ink-soft);font-style:italic}
.greview figcaption{
  margin-top:20px;font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink)
}
.greview figcaption span{display:block;font-weight:400;letter-spacing:.1em;color:var(--ink-faint);margin-top:5px}

/* ---------- treatment spec strip ----------
   The at-a-glance facts under a treatment hero. Given its own weight and rules
   so it reads as a spec panel rather than as another paragraph of the page. */
.spec-band{padding-block:clamp(30px,3.4vw,46px)}
.spec{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,2.4vw,34px);margin:0
}
.spec>div{padding-left:16px;border-left:1px solid var(--rule)}
.spec dt{
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);margin:0
}
.spec dd{
  margin:8px 0 0;font-family:var(--serif);font-size:clamp(17px,1.6vw,19.5px);
  line-height:1.34;color:var(--ink-soft)
}
@media (max-width:620px){
  .spec{grid-template-columns:1fr 1fr;gap:20px}
}

/* ---------- contact / info list ---------- */
.info dt{font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-top:22px}
.info dd{margin:6px 0 0;color:var(--ink)}
.info a{text-decoration:none;border-bottom:1px solid var(--rule)}
.info a:hover{border-color:var(--ink)}
.hours{width:100%;border-collapse:collapse;font-size:17px}
.hours td{padding:11px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-soft)}
.hours td:last-child{text-align:right;font-family:var(--ui);font-size:14px;color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#CFCCC7;padding-block:clamp(56px,7vw,90px) 0}
.site-footer a{color:#CFCCC7;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px)}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer__grid h4{color:#fff;margin-bottom:18px;font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.22em}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:16.5px}
.footer__bar{
  margin-top:clamp(46px,6vw,72px);border-top:1px solid rgba(255,255,255,.13);padding:26px 0;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--ui);font-size:11px;letter-spacing:.1em;color:#8B8681
}

/* ---------- utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:200;font-family:var(--ui);font-size:12px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fig{margin:2em 0}
/* For photographs whose backdrop has been faded to the band colour, so the
   subject reads as cut out onto the blush rather than sitting in a box. */
.fig--band{background:var(--blush)}
/* Some supplied photographs are narrower than the prose column. They are left
   at their own size rather than upscaled into a soft, blocky mess, which means
   they need centring, since a block image defaults to the left edge. */
.fig img{margin-inline:auto}
.fig--band img{display:block;width:100%}

.fig figcaption{font-size:15px;font-style:italic;color:var(--ink-faint);text-align:center;margin-top:12px}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}