/* ==========================================================================
   Skin Belief — Your skin, understood.
   Implementation of "Skin Belief v2.dc.html".
   Palette, type scale and spacing are transcribed from that design file.
   ========================================================================== */

:root{
  /* Surfaces */
  --mineral:#F5F4F1;
  --mineral-card:#FBFAF8;
  --blush:#E7CFD2;
  --plum:#352B31;

  /* Accents.
     --rose / --rose-deep are the design file's values and are used for display
     type, rules and ornament. The -text variants are the same hues darkened to
     clear WCAG AA (4.5:1) where the accent carries small copy — the rendered
     contrast check drafts/creative-direction.md asks for. */
  --rose:#AF7480;
  --rose-text:#A05C6A;
  --rose-deep:#8E5563;
  --rose-deep-text:#814D5A;

  /* Text */
  --ink:#352B31;
  --ink-soft:#4E4247;
  --ink-softer:#6A5B61;
  --ink-muted:#7A6B71;
  --ink-faint:#7B6C72;
  --ink-placeholder:#7C6C71;
  --on-blush-body:#5E4B52;
  --on-blush-muted:#6F565D;
  --on-dark-body:#D9CDD1;

  /* Rules */
  --line:#DDD3D5;
  --line-card:#E6E0DC;
  --line-field:#9B898E;
  --line-blush:#C9A9AF;
  --line-dark:rgba(245,244,241,.18);

  /* Type */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* Layout */
  --shell:1440px;
  --gutter:clamp(20px,4vw,56px);
  --radius-arch:999px 999px 2px 2px;
  --radius-sheet:clamp(24px,4vw,64px) clamp(24px,4vw,64px) 0 0;

  --ease-rise:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

html,body{
  margin:0;
  padding:0;
  background:var(--mineral);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:clip;
}

a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--rose-text);}

img{max-width:100%;}
[hidden]{display:none !important;}
h1,h2,h3{font-weight:300;margin:0;}
p{margin:0;}

input,textarea,button{font-family:inherit;}
input::placeholder,textarea::placeholder{color:var(--ink-placeholder);}

:focus-visible{
  outline:2px solid var(--rose);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--plum);
  color:var(--mineral);
  padding:12px 20px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.skip-link:focus{left:12px;top:12px;color:var(--mineral);}

/* ---------- Animation ----------------------------------------------------- */

@keyframes sbRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes sbFade{from{opacity:0}to{opacity:1}}
@keyframes sbMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Shared primitives --------------------------------------------- */

.shell{max-width:var(--shell);margin:0 auto;}

.eyebrow{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose-text);
  font-weight:600;
}
.eyebrow--deep{color:var(--rose-deep-text);}
.eyebrow--blush{color:var(--blush);}
.eyebrow--rule{display:flex;gap:14px;align-items:center;}
.eyebrow__rule{width:40px;height:1px;background:var(--rose);display:inline-block;flex:none;}

.section-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(48px,6vw,104px);
  line-height:.95;
  letter-spacing:-.02em;
  margin:20px 0 0;
  text-wrap:balance;
}
.section-title em{color:var(--rose);}

.section-head{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:clamp(40px,5vw,80px);
}
.section-head__note{
  font-size:16px;
  color:var(--ink-soft);
  max-width:38ch;
  text-wrap:pretty;
}
.section-head__note--tight{max-width:40ch;}
.section-head__note--light{color:var(--on-dark-body);max-width:36ch;}

/* Media frames */
.media{position:relative;overflow:hidden;border-radius:2px;}
.media--arch{border-radius:var(--radius-arch);}
.media > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media__caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mineral);
  background:linear-gradient(to top,rgba(53,43,49,.55),rgba(53,43,49,0));
}

/* Buttons and rule links */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:999px;
  padding:12px 22px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn--lg{padding:17px 30px;letter-spacing:.12em;}
.btn--dark{background:var(--plum);color:var(--mineral);}
/* The design file hovers to #AF7480, which puts 12px mineral text at 3.4:1.
   The darkened rose reaches 4.5:1 and keeps the same hover read. */
.btn--dark:hover{background:var(--rose-text);color:var(--mineral);}
.btn--light{background:var(--mineral);color:var(--plum);padding:15px 26px;letter-spacing:.12em;}
.btn--light:hover{background:var(--blush);color:var(--plum);}
.btn--outline{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--plum);
  padding:14px 24px;
  letter-spacing:.12em;
}
.btn--outline:hover{border-color:var(--rose-text);color:var(--rose-text);}

.link-rule{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:1px solid var(--plum);
  padding-bottom:3px;
  transition:color .25s ease,border-color .25s ease;
}
.link-rule:hover{color:var(--rose-text);border-bottom-color:var(--rose-text);}
.link-rule--deep:hover{color:var(--rose-deep-text);border-bottom-color:var(--rose-deep-text);}
.link-rule--light{color:var(--mineral);border-bottom-color:var(--mineral);}
.link-rule--light:hover{color:var(--blush);border-bottom-color:var(--blush);}

/* ---------- Header -------------------------------------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:30;
  transition:background .3s ease,box-shadow .3s ease;
}
/* Addition to the design file: once the page scrolls, the bar picks up the same
   frosted mineral treatment as the nav pill, so the rose logo and the dark
   "Enquire" pill stay legible over the dark Locations section. */
.site-header.is-scrolled{
  background:rgba(245,244,241,.82);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
}
.site-header__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:22px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-header__logo{display:flex;align-items:center;}
.site-header__logo img{height:30px;width:auto;display:block;}
.site-nav{
  display:flex;
  gap:26px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  flex-wrap:wrap;
  justify-content:center;
  background:rgba(245,244,241,.7);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  padding:12px 22px;
  border-radius:999px;
}
.site-header.is-scrolled .site-nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;}

/* Mobile menu trigger — the design file has no mobile navigation spec, and
   letting the four links wrap makes the sticky bar ~115px tall on a phone. */
.site-nav-toggle{display:none;}

/* ---------- Hero ---------------------------------------------------------- */

.hero{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(24px,4vw,64px) var(--gutter) 0;
  position:relative;
}
.hero__meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-muted);
  font-weight:600;
  animation:sbFade 1.2s ease both;
}
.hero__title{
  position:relative;
  z-index:2;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(64px,12.5vw,210px);
  line-height:.86;
  letter-spacing:-.025em;
  margin:clamp(24px,4vw,56px) 0 0;
  animation:sbRise 1.1s var(--ease-rise) both;
}
.hero__title span{display:block;}
.hero__title-accent{
  padding-left:clamp(40px,22vw,420px);
  font-style:italic;
  color:var(--rose);
  font-weight:300;
}
.hero__body{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px,4vw,64px);
  align-items:flex-end;
  /* The design file writes clamp(-40px,-4vw,-96px); an inverted clamp always
     resolves to its first value, so the rendered result is -40px. */
  margin-top:-40px;
  position:relative;
}
.hero__portrait{
  flex:0 1 220px;
  min-width:180px;
  aspect-ratio:3/4;
  z-index:3;
  animation:sbRise 1.2s .25s var(--ease-rise) both;
}
.hero__copy{
  flex:1 1 300px;
  max-width:46ch;
  padding-bottom:clamp(8px,2vw,32px);
  animation:sbRise 1.2s .35s var(--ease-rise) both;
}
.hero__lede{
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.5;
  margin:0 0 30px;
  color:var(--ink-soft);
  text-wrap:pretty;
}
.hero__actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.hero__wide{
  margin:0;
  flex:1.4 1 340px;
  z-index:1;
  aspect-ratio:16/11;
  min-height:280px;
  animation:sbFade 1.6s .2s ease both;
}

/* ---------- Marquee ------------------------------------------------------- */

.marquee{
  margin:clamp(56px,7vw,110px) 0 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  overflow:hidden;
}
.marquee__track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:sbMarquee 40s linear infinite;
}
.marquee__word{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(28px,3vw,48px);
  line-height:1;
  padding:0 28px;
  white-space:nowrap;
  color:var(--plum);
}
.marquee__word--alt{font-style:italic;color:var(--rose);}
.marquee__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blush);
  display:inline-block;
  flex:none;
}

/* ---------- Statement ----------------------------------------------------- */

.statement{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(80px,10vw,160px) var(--gutter);
  display:grid;
  /* Reproduces the design's 1 : 2-of-3 column split without the single-column
     overflow that `grid-column:span 2` causes on narrow screens. */
  grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(32px,5vw,80px);
  align-items:end;
}
.statement__text{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(34px,4vw,66px);
  line-height:1.08;
  letter-spacing:-.01em;
  text-wrap:balance;
  max-width:24ch;
}
.statement__text em{color:var(--rose);}

/* ---------- Approach ------------------------------------------------------ */

.approach{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter) clamp(90px,10vw,170px);
}
.approach__grid{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(32px,5vw,96px);
  align-items:flex-start;
}
.approach__aside{
  flex:1 1 320px;
  position:sticky;
  top:110px;
  display:flex;
  gap:18px;
  align-items:flex-end;
}
.approach__portrait{flex:1 1 200px;aspect-ratio:3/4;}
.approach__vertical{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-muted);
  font-weight:600;
  padding-bottom:8px;
}
.approach__main{flex:1.3 1 380px;}
.approach__main .section-title{margin:20px 0 28px;}
.approach__lede{
  font-size:18px;
  color:var(--ink-soft);
  max-width:52ch;
  margin:0 0 clamp(40px,5vw,72px);
  text-wrap:pretty;
}
.pillars{display:grid;gap:clamp(28px,3vw,44px);}
.pillar{
  display:grid;
  grid-template-columns:minmax(80px,120px) minmax(0,1fr);
  gap:20px;
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:24px;
}
/* Ornamental blush numerals (here, the first-visit steps and the quote glyphs)
   are deliberately near-invisible watermarks, not copy. Each one duplicates
   information already carried semantically — the pillars have titles, the
   steps are an <ol>, and the quote glyphs are aria-hidden — so the low
   contrast is the intended effect rather than an accessibility failure. */
.pillar__numeral{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(56px,6vw,96px);
  line-height:.8;
  color:var(--blush);
}
.pillar__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:30px;
  line-height:1.1;
  margin-bottom:10px;
}
.pillar__body{font-size:16px;color:var(--ink-softer);max-width:44ch;}

/* ---------- Concerns ------------------------------------------------------ */

.concerns{
  background:var(--blush);
  color:var(--ink);
  border-radius:var(--radius-sheet);
}
.concerns__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(80px,10vw,150px) var(--gutter);
}
.concerns .section-head__note{color:var(--on-blush-body);}
.concerns__body{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(28px,4vw,72px);
  align-items:stretch;
}
.concerns__list{
  flex:1.2 1 360px;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line-blush);
}
.concerns__buttons{display:flex;flex-direction:column;}
.concern{
  display:flex;
  align-items:center;
  gap:18px;
  text-align:left;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-blush);
  padding:clamp(18px,2.2vw,30px) 0;
  cursor:pointer;
  color:var(--ink);
  opacity:.7;
  transition:color .35s ease,opacity .35s ease,transform .35s ease;
  transform:translateX(0);
}
.concern.is-active{color:var(--rose-deep-text);opacity:1;transform:translateX(12px);}
.concern__num{font-size:12px;letter-spacing:.16em;font-weight:600;min-width:34px;}
.concern__title{
  font-family:var(--serif);
  font-size:clamp(30px,3.6vw,58px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.01em;
  flex:1;
}
.concern__arrow{
  font-family:var(--serif);
  font-size:36px;
  line-height:1;
  font-style:italic;
  visibility:hidden;
}
.concern.is-active .concern__arrow{visibility:visible;}
.concerns__hint{
  margin-top:auto;
  padding-top:28px;
  font-size:13px;
  color:var(--on-blush-muted);
}
.concerns__panel{flex:1 1 320px;display:flex;flex-direction:column;gap:22px;}
.concerns__stage{
  aspect-ratio:4/5;
  max-height:560px;
  background:var(--blush);
}
.concerns__stage img{opacity:0;transition:opacity .6s ease;}
.concerns__stage img.is-showing{opacity:1;}
.concerns__detail{display:grid;gap:12px;}
.concerns__lead{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(24px,2.2vw,32px);
  line-height:1.2;
  text-wrap:pretty;
}
.concerns__text{font-size:15px;color:var(--on-blush-body);max-width:48ch;text-wrap:pretty;}
.concerns__foot{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line-blush);
  padding-top:16px;
  margin-top:6px;
}
.concerns__treatment{font-size:13px;color:var(--on-blush-muted);}
.concerns__treatment strong{color:var(--ink);font-weight:600;}

/* ---------- First visit --------------------------------------------------- */

.first-visit{
  background:var(--blush);
  padding-bottom:clamp(60px,7vw,120px);
}
.first-visit__sheet{
  background:var(--mineral);
  border-radius:var(--radius-sheet);
}
.first-visit__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(80px,10vw,150px) var(--gutter) 0;
}
.first-visit .section-head{margin-bottom:clamp(40px,5vw,72px);}

.steps{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:0;
  border-top:1px solid var(--line);
  scrollbar-width:none;
  list-style:none;
  margin:0;
  padding:0;
}
.steps::-webkit-scrollbar{display:none;}
.step{
  flex:1 0 clamp(200px,20%,320px);
  scroll-snap-align:start;
  padding:28px clamp(12px,1.6vw,24px) 36px 0;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:clamp(40px,5vw,90px);
  min-height:260px;
}
.step__num{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(64px,7vw,120px);
  line-height:.8;
  color:var(--blush);
}
.step__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:26px;
  line-height:1.1;
  margin-bottom:10px;
  text-wrap:balance;
}
.step__body{font-size:14px;color:var(--ink-softer);text-wrap:pretty;}

.offer{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(40px,5vw,80px) var(--gutter) 0;
  transform:translateY(clamp(40px,5vw,90px));
}
.offer__card{
  background:var(--plum);
  color:var(--mineral);
  border-radius:2px;
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  overflow:hidden;
}
.offer__media{flex:1 1 320px;position:relative;min-height:320px;}
.offer__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.offer__copy{
  flex:1.4 1 380px;
  padding:clamp(32px,4vw,64px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:32px;
}
.offer__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(44px,5vw,84px);
  line-height:.95;
  letter-spacing:-.02em;
  margin:18px 0 16px;
}
.offer__title em{color:var(--blush);}
.offer__body{color:var(--on-dark-body);font-size:16px;max-width:46ch;}
.offer__foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  border-top:1px solid var(--line-dark);
  padding-top:24px;
}
.offer__line{font-size:14px;color:var(--blush);}

/* ---------- Gallery ------------------------------------------------------- */

.gallery{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(90px,10vw,160px) var(--gutter) clamp(80px,10vw,150px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(16px,2vw,28px);
  align-items:start;
}
.gallery__item{margin:0;}
.gallery__item--drop-1{padding-top:clamp(0px,4vw,80px);}
.gallery__item--drop-2{padding-top:clamp(0px,8vw,160px);}
.gallery__item--drop-3{padding-top:clamp(0px,2vw,40px);}
.gallery__item .media{aspect-ratio:3/4;}
.gallery__item figcaption{
  margin-top:12px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

/* ---------- Reviews ------------------------------------------------------- */

.reviews{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter) clamp(90px,10vw,170px);
}
.reviews__title{margin:20px 0 clamp(40px,5vw,80px);}
.reviews__body{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px,3vw,40px);
  align-items:stretch;
}
.reviews__feature{flex:1 1 300px;min-height:420px;}
.reviews__feature-caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:22px 24px;
  background:linear-gradient(to top,rgba(53,43,49,.6),rgba(53,43,49,0));
  color:var(--mineral);
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(22px,2vw,30px);
  line-height:1.15;
}
.reviews__cards{
  flex:2 1 460px;
  display:grid;
  /* The design file's auto-fit track sizing resolves to three columns here,
     which leaves the fourth theme orphaned on its own row. These are four
     equal themes, so they are pinned to a 2x2 block. */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-content:stretch;
}
@media (max-width:519px){
  .reviews__cards{grid-template-columns:1fr;}
}
.theme{
  background:var(--mineral-card);
  border:1px solid var(--line-card);
  border-radius:2px;
  padding:clamp(24px,2.6vw,36px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:36px;
  min-height:200px;
}
.theme__quote{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(48px,5vw,80px);
  line-height:.8;
  color:var(--blush);
}
.theme__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(24px,2.2vw,32px);
  line-height:1.1;
  margin-bottom:10px;
  text-wrap:balance;
}
.theme__body{font-size:14px;color:var(--ink-softer);}
.theme--blush{background:var(--blush);border-color:transparent;}
.theme--blush .theme__quote{color:var(--rose);}
.theme--blush .theme__body{color:var(--on-blush-body);}
.theme--dark{background:var(--plum);color:var(--mineral);border-color:transparent;}
.theme--dark .theme__quote{color:var(--rose);}
.theme--dark .theme__body{color:var(--on-dark-body);}

.ratings{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:clamp(32px,4vw,56px);
}
.rating{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px clamp(16px,2vw,32px);
  border-right:1px solid var(--line);
}
.rating:first-child{padding-left:0;}
.rating:last-child{padding-right:0;border-right:0;}
.rating__name{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-muted);
  font-weight:600;
}
.rating:hover .rating__name{color:var(--rose-text);}
.rating__count{font-size:13px;color:var(--ink-faint);margin-top:4px;}
.rating__score{display:flex;align-items:baseline;gap:6px;}
.rating__score span{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(44px,4vw,64px);
  line-height:.8;
  letter-spacing:-.02em;
}
.rating__score em{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--rose-text);}
.reviews__note{font-size:12px;color:var(--ink-faint);margin-top:18px;}

/* ---------- Locations ----------------------------------------------------- */

.locations{
  background:var(--plum);
  color:var(--mineral);
  border-radius:var(--radius-sheet);
}
.locations__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(80px,10vw,150px) var(--gutter);
}
.locations .section-head{margin-bottom:clamp(40px,5vw,72px);}
.outlets{display:grid;border-top:1px solid var(--line-dark);}
.outlet{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:20px;
  align-items:center;
  padding:clamp(24px,3vw,40px) 0;
  border-bottom:1px solid var(--line-dark);
}
.outlet__name{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(40px,4.6vw,76px);
  line-height:.9;
  letter-spacing:-.02em;
}
.outlet__address,.outlet__contact{font-size:14px;color:var(--on-dark-body);line-height:1.6;}
.outlet__contact span{color:var(--mineral);}
.outlet__contact a{color:inherit;}
.outlet__contact a:hover{color:var(--blush);}
.outlet__actions{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  justify-content:flex-end;
}
.outlet__actions .link-rule{font-size:11px;letter-spacing:.14em;}

/* ---------- Enquiry ------------------------------------------------------- */

.enquire{background:var(--plum);padding-bottom:0;}
.enquire__sheet{background:var(--mineral);border-radius:var(--radius-sheet);}
.enquire__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(80px,10vw,150px) var(--gutter);
  display:flex;
  flex-wrap:wrap;
  gap:clamp(32px,5vw,96px);
}
.enquire__intro{flex:1 1 320px;}
.enquire__intro .section-title{margin:20px 0 28px;}
.enquire__lede{
  font-size:17px;
  color:var(--ink-soft);
  max-width:40ch;
  margin:0 0 32px;
  text-wrap:pretty;
}
.enquire__form-col{flex:1.2 1 380px;}

.form{display:grid;gap:28px;}
.field{display:grid;gap:8px;}
.field__label{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-muted);
  font-weight:600;
}
.field:has(.chips){gap:10px;}
.field__optional{font-weight:400;text-transform:none;letter-spacing:0;}
.field-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:24px;
}
.form input,.form textarea{
  border:0;
  border-bottom:1px solid var(--line-field);
  background:transparent;
  padding:12px 0;
  font-size:18px;
  font-family:var(--serif);
  color:var(--ink);
  outline:none;
  letter-spacing:0;
  text-transform:none;
  width:100%;
  transition:border-color .25s ease;
}
.form textarea{resize:vertical;line-height:1.4;}
.form input:focus,.form textarea:focus{border-bottom-color:var(--rose);}
.form input:focus-visible,.form textarea:focus-visible{outline:none;}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-bottom-color:#B4404F;}

.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{
  border-radius:999px;
  padding:10px 18px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  cursor:pointer;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-field);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.chip:hover{border-color:var(--plum);}
.chip.is-active{background:var(--plum);color:var(--mineral);border-color:var(--plum);}

.form__error{
  font-size:13px;
  color:#B4404F;
  letter-spacing:0;
  text-transform:none;
}
.form__foot{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:space-between;
}
.form__privacy{font-size:12px;color:var(--ink-faint);max-width:34ch;}
.form__foot .btn[disabled]{opacity:.55;cursor:progress;}

.confirm{
  background:var(--blush);
  border-radius:2px;
  padding:clamp(28px,3vw,48px);
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  animation:sbRise .6s ease both;
}
.confirm__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(34px,3.6vw,56px);
  line-height:1;
  letter-spacing:-.01em;
}
.confirm__body{color:var(--on-blush-body);font-size:16px;max-width:46ch;}
.confirm__reset{
  align-self:flex-start;
  background:transparent;
  border:0;
  padding:0 0 3px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--plum);
  cursor:pointer;
  margin-top:8px;
}
.confirm__reset:hover{color:var(--rose-deep-text);border-bottom-color:var(--rose-deep-text);}

/* ---------- Footer -------------------------------------------------------- */

.site-footer{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter) 40px;
}
.site-footer__top{
  border-top:1px solid var(--line);
  padding-top:clamp(40px,5vw,72px);
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  justify-content:space-between;
  align-items:flex-end;
}
.site-footer__wordmark{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(56px,9vw,150px);
  line-height:.85;
  letter-spacing:-.03em;
  color:var(--rose);
}
.site-footer__nav{
  display:flex;
  gap:22px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  flex-wrap:wrap;
}
.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:space-between;
  margin-top:28px;
  font-size:12px;
  color:var(--ink-faint);
}

/* ---------- Responsive corrections ---------------------------------------- */

/* Below two statement columns, stop the headline sharing a row with the kicker. */
@media (max-width:700px){
  .statement{grid-template-columns:1fr;}
}

/* The hero's second line is indented by 22vw; on a phone that pushes
   "understood." past the viewport, so the indent tightens. */
@media (max-width:640px){
  .hero__title-accent{padding-left:clamp(16px,8vw,48px);}
}
@media (max-width:374px){
  .hero__title{font-size:clamp(46px,15vw,64px);}
}

/* Stacked rating rows read as rows, not columns. */
@media (max-width:719px){
  .rating{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-left:0;
    padding-right:0;
  }
  .rating:last-child{border-bottom:0;}
}

/* Stacked outlet rows left-align their actions. */
@media (max-width:719px){
  .outlet__actions{justify-content:flex-start;}
}

/* Once the hero columns stack, the design's -40px overlap would drop the
   portrait on top of the headline. */
@media (max-width:899px){
  .hero__body{margin-top:24px;}
}

@media (max-width:767px){
  .site-header{background:rgba(245,244,241,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
  .site-header__inner{padding:12px var(--gutter);gap:12px;flex-wrap:wrap;}
  .site-header__logo img{height:24px;}
  .site-header__cta{padding:11px 18px;}

  .site-nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-left:auto;
    background:transparent;
    border:0;
    padding:8px 0;
    cursor:pointer;
    color:var(--ink);
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .site-nav-toggle__bars{
    width:18px;
    height:9px;
    border-top:1px solid currentColor;
    border-bottom:1px solid currentColor;
  }
  .site-header.is-nav-open .site-nav-toggle__bars{border-bottom-color:transparent;}

  .site-nav{
    order:3;
    width:100%;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:4px 0 8px;
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border-top:1px solid var(--line);
    border-radius:0;
  }
  .site-header.is-nav-open .site-nav{display:flex;}
  .site-nav a{width:100%;padding:13px 0;}

  .approach__aside{position:static;}
  .approach__vertical{display:none;}
}

/* Narrow phones: the bars alone carry the menu, keeping the bar one row. */
@media (max-width:379px){
  .site-nav-toggle__text{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .site-header__cta{padding:11px 15px;letter-spacing:.06em;}
  .site-header__inner{gap:10px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .marquee__track{animation:none;}
  .concerns__stage img{transition:none;}
}

@media print{
  .site-header,.marquee,.concerns__stage,.form{display:none;}
}