/* ==========================================================================
   DEMO 1 — "The Townhouse"
   Warm ivory paper, a high-contrast serif, and gold used only as punctuation:
   1px rules and micro-labels, never a fill. The private practice feel.

   Contrast, measured: ink on ivory 16.3:1, body 10.2:1, captions 6.1:1,
   gold micro-labels 5.7:1. All comfortably past AA, most past AAA.
   ========================================================================== */

.demo1{
  --ink:        #201B16;
  --ink-2:      #262019;
  --ink-soft:   #4A4034;
  --mute:       #6E6153;

  --gold:       #A8834F;
  --gold-deep:  #7A5A2C;
  --gold-lite:  #D2B487;

  --cream:      #FAF7F2;
  --paper:      #FEFCF8;
  --sand:       #EBE5DA;
  --nude:       #DED3C2;

  --line:       rgba(32,27,22,.15);
  --line-soft:  rgba(32,27,22,.08);
  --line-gold:  rgba(176,142,93,.45);

  --serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --caps:  'Jost', 'Helvetica Neue', Arial, sans-serif;
  --body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --shell: 1180px;
  background:var(--cream);
}

/* Playfair carries the page. Kept to 400/500 — the bold cuts read as a
   discount headline, not a private practice. */
.demo1 h1,.demo1 h2,.demo1 h3,.demo1 h4{font-weight:400;letter-spacing:-.012em}
.demo1 h1{line-height:1.02}

/* the signature: every section label sits on its own hairline */
.demo1 .eyebrow{position:relative;padding-top:16px;display:inline-block}
.demo1 .eyebrow::before{content:"";position:absolute;left:0;top:0;width:52px;height:1px;background:var(--gold)}

.demo1 .hdr{background:color-mix(in srgb, var(--cream) 66%, transparent);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
.demo1 .brand-mark{height:clamp(40px,3.9vw,60px)}
.demo1 .hdr.is-stuck .brand-mark{height:clamp(34px,3vw,46px)}

/* ---------- hero: the cinematic morning room ---------- */
.demo1 .hero--cine{position:relative;min-height:min(84vh,820px);min-height:min(84svh,820px);display:flex;align-items:center;
  overflow:hidden;padding-block:clamp(72px,9vw,140px)}
.demo1 .hero-bg{position:absolute;inset:0}
.demo1 .hero-bgimg{width:100%;height:100%;object-fit:cover;object-position:74% 62%;
  animation:d1kb 26s ease-in-out infinite alternate;transform-origin:62% 56%;will-change:transform}
/* a real push, not a drift: the client asked for a heavier zoom */
@keyframes d1kb{from{transform:scale(1.20)}to{transform:scale(1.005)}}
/* the type sits in the plain plaster wall on the left, so the wash only has
   to hold the first quarter of the frame — the photograph keeps its light */
.demo1 .hero-bg::after{content:"";position:absolute;inset:0;
  /* A short steep falloff. The old wash ran flat cream across the
     first quarter of the frame and simply deleted the photograph. */
  background:linear-gradient(99deg, rgba(251,248,243,.97) 0 17%, rgba(251,248,243,.9) 29%,
    rgba(251,248,243,.58) 41%, rgba(251,248,243,.18) 52%, rgba(251,248,243,0) 62%)}
.demo1 .hero-in{position:relative;grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.demo1 .hero h1 .h1-a{display:block;font-style:italic;color:var(--gold-deep)}
.demo1 .hero h1 .h1-b{display:block;margin-top:.06em}
.demo1 .hero-sub{max-width:40ch}
@media (prefers-reduced-motion: reduce){.demo1 .hero-bgimg{animation:none}}

/* ---------- ribbon ---------- */
.demo1 .ribbon{border-block:1px solid var(--line)}
.demo1 .ribbon-grid{background:transparent;gap:0}
.demo1 .ribbon-item{padding-inline:clamp(14px,2vw,30px);border-left:1px solid var(--line)}
.demo1 .ribbon-item:first-child{border-left:0;padding-left:0}

/* ---------- looking for ---------- */
.demo1 .lf-card{background:var(--paper);border-radius:0}
.demo1 .lf-card::after{content:"";position:absolute}
.demo1 .lf-card{position:relative;overflow:hidden}
.demo1 .lf-card::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.demo1 .lf-card:hover::before{transform:scaleX(1)}

/* ---------- face map ---------- */
.demo1 .fm-stage{background:var(--sand);border:1px solid var(--line)}
.demo1 .fm-panel h3{font-size:clamp(30px,3.2vw,44px)}

/* ---------- treatments: the ruled index ---------- */
.demo1 .ti-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,88px);
  border-top:1px solid var(--line);margin-top:clamp(28px,3vw,44px)}
.demo1 .ti-row{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;
  padding:clamp(20px,2.2vw,30px) 0;border-bottom:1px solid var(--line-soft);position:relative}
.demo1 .ti-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.demo1 .ti-row:hover::after{transform:scaleX(1)}
.demo1 .ti-n{grid-row:1 / 3;font-family:var(--caps);font-size:13px;letter-spacing:.18em;
  color:var(--gold-deep);padding-top:7px}
.demo1 .ti-main h3{font-size:clamp(21px,1.9vw,26px);margin-bottom:6px}
.demo1 .ti-main p{font-size:15.5px;line-height:1.55;color:var(--mute);max-width:52ch;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.demo1 .ti-meta{grid-column:2;display:flex;gap:22px;margin:10px 0 0}
.demo1 .ti-meta span{font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.demo1 .ti-meta span:first-child{color:var(--gold-deep)}

/* ---------- practitioner ---------- */
.demo1 .prac-media{position:relative}
.demo1 .prac-img{border:1px solid var(--line)}

/* ---------- PRP, now in daylight on sand ---------- */
.demo1 .prp-honest{background:rgba(176,142,93,.1);border-left:1px solid var(--gold)}
.demo1 .prp-n{color:var(--gold-deep)}
.demo1 .prp-use h3{margin-top:6px}

/* ---------- quotes ---------- */
.demo1 .tq-quote{font-style:italic}

/* ---------- footer ---------- */
.demo1 .foot.g-ink{background:var(--ink)}
.demo1 .contact{border-top:1px solid var(--line)}

@media (max-width:900px){
  .demo1 .hero-in{grid-template-columns:1fr}
  .demo1 .hero--cine{align-items:flex-end;min-height:min(78vh,700px);min-height:min(78svh,700px)}
  .demo1 .hero-bg::after{background:linear-gradient(180deg, rgba(251,248,243,.06) 0 24%,
    rgba(251,248,243,.88) 48%, var(--cream) 80%)}
  .demo1 .hero--cine{padding-block:clamp(280px,66vw,360px) clamp(48px,8vw,80px)}
  .demo1 .ti-grid{grid-template-columns:1fr}
}


/* v2 — the double-rule draw. Every section opens with two hairlines that
   draw themselves from the left, the gold one 90ms behind. */
.demo1 .sec-head{position:relative;padding-top:20px}
.demo1 .sec-head::before,
.demo1 .sec-head::after{content:"";position:absolute;left:0;top:0;height:1px;
  transform:scaleX(0);transform-origin:left}
.demo1 .sec-head::before{display:none}
.demo1 .sec-head::after{width:88px;top:0;background:var(--gold);background-image:var(--foil);
  transition:transform 700ms var(--ease) 90ms}
.demo1 .sec-head.in::before,.demo1 .sec-head.in::after{transform:none}
.demo1 .sec-head .eyebrow::before{display:none}


/* ---------- motion signature: the long rise ----------
   Demo 1 keeps the classic lift, but travels further and settles slower than
   the shared default, so it reads as deliberate rather than generic. */
/* The long rise was reading as a delay rather than as polish: a heading was
   not fully on screen for 1.15s and the sheen kept moving until 2.4s. Same
   language, roughly half the time. */
.demo1 .rv{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity 420ms linear, transform 620ms var(--ease);
}
.demo1 .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .demo1 .rv{opacity:1;transform:none;transition:none}
}


@media (max-width:900px){
  /* measured on the composited hero pixels at 390px, not on the token */
  .demo1 .hero .eyebrow{color:#6E5228}
}


@media (max-width:479px){
  /* measured: the pair sets on one line each from 480px up, and only starts
     wrapping below about 455px */
  .demo1 .ti-meta{flex-direction:column;gap:2px;margin-top:8px}
}


@media (max-width:1080px){
  /* the vertical rule only reads while the four facts are in one line */
  .demo1 .ribbon-item{border-left:0;padding-inline:0}
}
@media (max-width:640px){
  .demo1 .ti-meta{flex-direction:column;gap:4px}
}
@media (max-width:900px) and (min-width:701px){
  /* one column on an iPad, but the rows kept their desktop measure and left a
     quarter of the page bare beside every one of the eight */
  .demo1 .ti-grid{grid-template-columns:repeat(2,1fr)}
}
.demo1 .eyebrow{text-wrap:balance}

/* ==========================================================================
   SITE — what a homepage demo never needed
   Real navigation across pages, a treatments panel, a footer that is a sitemap.
   ========================================================================== */

/* ---------- navigation ---------- */
.navitem{position:relative;display:inline-flex;align-items:center}
.navlink.is-here{color:var(--gold-deep)}
.navlink.is-here::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:1px;background:var(--gold)}
.navitem--has .nav-caret{width:9px;height:6px;margin-left:7px;transition:transform .35s var(--ease)}
.navitem--has:hover .nav-caret,.navitem--has:focus-within .nav-caret{transform:rotate(180deg)}

.navdrop{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  padding-top:18px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;
}
.navitem--has:hover .navdrop,.navitem--has:focus-within .navdrop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.navdrop-in{
  display:grid;gap:2px;min-width:290px;padding:14px;
  background:color-mix(in srgb, var(--white) 92%, transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);box-shadow:0 28px 64px rgba(46,36,24,.16);
}
.navdrop-in a{
  display:block;padding:11px 14px;font-size:15.5px;color:var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease),padding-left .3s var(--ease)}
.navdrop-in a:hover,.navdrop-in a.is-here{background:var(--sand);color:var(--gold-deep);padding-left:19px}

.navpanel-sub{padding-left:22px;font-size:.72em;color:var(--mute)}

/* ---------- footer as a sitemap ---------- */







@media (max-width:900px){
  
  .foot-col--contact{grid-column:1 / -1}
}
@media (max-width:560px){
  
  
}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

/* ---------- page hero ---------- */
.pagehero{position:relative;min-height:min(72svh,660px);display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;
  padding-block:clamp(150px,15vw,210px) 0}
.pagehero-bg{position:absolute;inset:0}
.pagehero-img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;
  animation:phkb 30s ease-in-out infinite alternate;transform-origin:50% 40%;will-change:transform}
@keyframes phkb{from{transform:scale(1.03)}to{transform:scale(1.13)}}
/* the photograph stays a photograph at the top, and the words sit on ground
   that is actually solid — the same call as the homepage hero */
.pagehero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(250,247,242,.05) 0 26%,
    rgba(250,247,242,.9) 54%, var(--cream) 82%)}
.pagehero .eyebrow{color:#6E5228}
.pagehero-body{position:relative;z-index:1;max-width:40ch}
.pagehero h1{text-wrap:balance}
.pagehero h1{font-size:clamp(44px,6vw,86px);line-height:1.02;margin:10px 0 18px}
.pagehero .lede{max-width:46ch}
.pagehero .hero-btns{margin-top:clamp(26px,3vw,38px);display:flex;gap:clamp(16px,2vw,28px);
  align-items:center;flex-wrap:wrap}

.ph-facts{position:relative;z-index:1;margin-top:clamp(44px,5vw,72px)}
.ph-facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line)}
.ph-fact{padding:clamp(20px,2.2vw,30px) clamp(16px,2vw,28px) clamp(24px,2.6vw,34px);
  border-right:1px solid var(--line)}
.ph-fact:last-child{border-right:0}
.ph-fact dt{font-family:var(--caps);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:8px}
.ph-fact dd{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);line-height:1.3;color:var(--ink)}
@media (max-width:900px){
  .ph-facts-in{grid-template-columns:1fr 1fr}
  .ph-fact:nth-child(2n){border-right:0}
  .ph-fact:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .ph-facts-in{grid-template-columns:1fr}
  .ph-fact{border-right:0}
  .ph-fact+.ph-fact{border-top:1px solid var(--line)}
}

/* ---------- concern chips ---------- */
.sec{padding-block:var(--sec-y)}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,40px)}
.chip{
  font-family:var(--caps);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 22px;min-height:48px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip-panels{margin-top:clamp(26px,3vw,38px);min-height:9em}
.chip-panel p{font-family:var(--serif);font-size:clamp(21px,2.2vw,30px);line-height:1.4;
  color:var(--ink);max-width:44ch}
.chip-panel{animation:chipIn .5s var(--ease) both}
@keyframes chipIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* ---------- prose split ---------- */
.prose-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(34px,5vw,80px);align-items:start}
.prose-media{position:sticky;top:calc(var(--hdr-h,88px) + 28px);margin:0}
.prose-img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.prose-body h2{font-size:clamp(28px,3.2vw,42px);margin:0 0 18px;max-width:20ch}
.prose-body h2+p{margin-top:0}
.prose-body h3{font-size:clamp(20px,1.9vw,25px);margin:clamp(30px,3.4vw,46px) 0 12px}
.prose-body p{margin-bottom:18px;max-width:62ch}
.prose-body h2:not(:first-child){margin-top:clamp(38px,4.4vw,64px)}
.prose-list{margin:0 0 18px;padding-left:0;list-style:none;max-width:62ch}
.prose-list li{position:relative;padding-left:22px;margin-bottom:9px}
.prose-list li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;
  background:var(--gold)}
@media (max-width:900px){
  .prose-in{grid-template-columns:1fr}
  .prose-media{position:static;max-width:520px}
}

/* ---------- timeline ---------- */
.tlx-track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin-top:clamp(32px,3.6vw,50px);padding-top:26px}
.tlx-rail{position:absolute;left:6%;right:6%;top:32px;height:1px;background:var(--line)}
.tlx-rail i{display:block;height:100%;background:var(--gold);transform-origin:left;
  transform:scaleX(0);transition:transform .6s var(--ease)}
.tlx-mark{position:relative;background:transparent;border:0;padding:0 8px 4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:14px;min-height:56px}
.tlx-dot{width:13px;height:13px;border-radius:50%;background:var(--cream);
  border:1px solid var(--line);position:relative;z-index:1;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.tlx-mark:hover .tlx-dot{border-color:var(--gold)}
.tlx-mark[aria-pressed="true"] .tlx-dot{background:var(--gold);border-color:var(--gold);
  transform:scale(1.35)}
.tlx-when{font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);transition:color .35s var(--ease);text-align:center}
.tlx-mark[aria-pressed="true"] .tlx-when{color:var(--ink)}
.tlx-panels{margin-top:clamp(30px,3.4vw,44px);min-height:11em}
.tlx-panel{animation:chipIn .5s var(--ease) both;max-width:56ch}
.tlx-panel h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);margin:0 0 12px}
@media (max-width:640px){
  .tlx-track{grid-auto-flow:row;grid-auto-columns:auto;gap:0;padding-top:0}
  .tlx-rail{display:none}
  .tlx-mark{flex-direction:row;justify-content:flex-start;gap:14px;
    padding:16px 0;border-bottom:1px solid var(--line);width:100%}
  .tlx-when{text-align:left}
}

/* ---------- suitability ---------- */
.suit-in{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.suit-col{background:var(--ground,var(--cream));padding:clamp(28px,3.4vw,48px)}
.suit-col h3{font-size:clamp(20px,2vw,26px);margin:0 0 20px;max-width:22ch}
.suit-col ul{list-style:none;padding:0;margin:0}
.suit-col li{position:relative;padding-left:26px;margin-bottom:13px;line-height:1.6;
  color:var(--ink-soft)}
.suit-m{position:absolute;left:0;top:0;color:var(--gold)}
.suit-col--n .suit-m{color:var(--mute)}
@media (max-width:760px){.suit-in{grid-template-columns:1fr}}

/* ---------- prices ---------- */
.pr-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(30px,4vw,72px);align-items:start}
.pr-head h2{margin:10px 0 16px}
.pr-list{border-top:1px solid var(--line)}
.pr-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:19px 0;border-bottom:1px solid var(--line)}
.pr-n{font-family:var(--serif);font-size:clamp(19px,1.8vw,23px);color:var(--ink)}
.pr-v{font-family:var(--caps);font-size:14.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-deep);white-space:nowrap}
@media (max-width:900px){.pr-in{grid-template-columns:1fr}}

/* ---------- related ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(26px,3vw,40px)}
.rel-card{position:relative;display:flex;flex-direction:column;gap:8px;
  padding:clamp(24px,2.4vw,34px);border:1px solid var(--line);background:var(--white);
  transition:border-color .4s var(--ease),transform .5s var(--ease)}
.rel-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.rel-n{font-family:var(--serif);font-size:clamp(21px,2vw,26px);color:var(--ink)}
.rel-b{font-size:16px;color:var(--mute);flex:1}
.rel-go{display:inline-flex;margin-top:12px;color:var(--gold-deep)}
.rel-go svg{width:19px;height:19px;transition:transform .4s var(--ease)}
.rel-card:hover .rel-go svg{transform:translateX(6px)}
@media (max-width:900px){.rel-grid{grid-template-columns:1fr}}
.pr-prose p{margin-bottom:16px;max-width:60ch;color:var(--ink-soft);line-height:1.72}
.pr-prose p:first-child{font-family:var(--serif);font-size:clamp(21px,2.1vw,28px);
  line-height:1.4;color:var(--ink)}

/* ---------- long-form pages ---------- */
.rt-in{max-width:74ch;margin-inline:auto}
.rt-in h2{font-size:clamp(27px,3vw,38px);margin:clamp(38px,4.4vw,62px) 0 16px;max-width:22ch}
.rt-in h2:first-child{margin-top:0}
.rt-in h3{font-size:clamp(19px,1.8vw,24px);margin:clamp(28px,3vw,40px) 0 10px}
.rt-in p{margin:0 0 17px}
.rt-note{margin:22px 0;padding:20px 24px;background:var(--sand);border-left:2px solid var(--gold)}
.rt-note p{margin:0;font-family:var(--serif);font-size:clamp(19px,1.8vw,23px);line-height:1.45;
  color:var(--ink)}
.rt-warn{margin:26px 0;padding:24px 26px;border:1px solid var(--gold);background:var(--white)}
.rt-warn-h{margin:0 0 12px;font-family:var(--caps);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep)}
.rt-warn ul{margin:0;padding-left:20px}
.rt-warn li{margin-bottom:8px}
.rt-fig{margin:clamp(28px,3.4vw,46px) 0}
.rt-img{width:100%;height:auto;display:block}

/* ---------- treatments index ---------- */
.ix-list{margin-top:clamp(30px,3.4vw,46px);border-top:1px solid var(--line)}
.ix-card{
  position:relative;display:grid;
  grid-template-columns:56px minmax(0,4fr) minmax(0,6fr) auto 34px;
  align-items:baseline;gap:clamp(14px,2vw,30px);
  padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  transition:background .4s var(--ease),padding-left .4s var(--ease)}
.ix-card:hover{background:var(--white);padding-left:16px}
.ix-n{font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;color:var(--gold-deep);
  font-variant-numeric:tabular-nums}
.ix-t{font-family:var(--serif);font-size:clamp(21px,2.1vw,28px);line-height:1.2;color:var(--ink)}
.ix-b{font-size:16.5px;line-height:1.6;color:var(--mute)}
.ix-p{font-family:var(--caps);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap}
.ix-go{color:var(--gold-deep);justify-self:end}
.ix-go svg{width:19px;height:19px;transition:transform .4s var(--ease)}
.ix-card:hover .ix-go svg{transform:translateX(6px)}
@media (max-width:900px){
  .ix-card{grid-template-columns:44px 1fr;gap:6px 14px;padding-block:22px}
  .ix-t{grid-column:2}
  .ix-b,.ix-p{grid-column:2}
  .ix-p{margin-top:6px}
  .ix-go{display:none}
  .ix-card:hover{padding-left:0}
}

/* ---------- enquiry ---------- */
.enq-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,4.4vw,74px);align-items:start}
.enq-form h2{margin:0 0 14px}
.frm{display:flex;flex-direction:column;gap:18px;margin-top:26px;max-width:52ch}
.frm-f{display:flex;flex-direction:column;gap:7px}
.frm-f span{font-family:var(--caps);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep)}
.frm input,.frm textarea{
  font-family:var(--body);font-size:17px;color:var(--ink);
  padding:14px 16px;min-height:52px;background:var(--white);
  border:1px solid var(--line);border-radius:0;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.frm input:focus,.frm textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(168,131,79,.14)}
.frm textarea{resize:vertical;min-height:130px}
.frm-note{margin:0;font-size:14.5px;color:var(--mute)}
.frm .btn{align-self:flex-start;margin-top:4px}
.enq-side h3{font-family:var(--serif);font-size:clamp(20px,1.9vw,24px);margin:0 0 16px}
.enq-side h3+*{margin-bottom:34px}
.enq-rows>div,.enq-hours>div{display:flex;justify-content:space-between;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.enq-rows dt,.enq-hours dt{font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
.enq-rows dd,.enq-hours dd{margin:0;text-align:right;color:var(--ink)}
@media (max-width:900px){.enq-in{grid-template-columns:1fr}}

/* ==========================================================================
   THE CONCERN MAP ON A PHONE
   The earlier build turned the face into a still below 768px, because ten
   labelled 44px targets cannot sit on a 350px-wide face without colliding.
   They still cannot — so the labels go, not the interaction: the dashed
   outlines stay visible, every tap resolves to the nearest concern, and the
   panel moves directly under the face so the answer appears where you looked.
   ========================================================================== */
.fm-near{fill:transparent;pointer-events:all;cursor:pointer}

@media (max-width:768px){
  .fm-layout{grid-template-columns:1fr;gap:0}
  .fm-col-face{display:contents}
  .fm-switch{order:1;margin-bottom:16px;justify-self:start}
  /* `margin-inline:auto` fills its container inside a block, but shrink-wraps
     a grid item — which display:contents has just made this. */
  .fm-stage{order:2;margin-inline:0;max-width:none;justify-self:stretch;width:100%}
  .fm-col-panel{order:3;position:static;margin-top:20px}
  .model-note{order:4;margin-top:18px}
  .fm-hintline{order:5}
  .fm-list{order:6}

  /* the leader lines and labels are what could not fit — the shapes can */
  .fm-svg .fm-tag,.fm-svg .fm-lead,.fm-svg .fm-dot{display:none}
  .fm-svg .fm-dash{stroke-width:1.6;opacity:.62}
  .fm-zone[aria-pressed="true"] .fm-dash{stroke-width:3.4;opacity:1}

  /* the chosen area needs to read at arm's length, so it fills as well */
  .fm-zone .fm-fill{display:block}

  /* the panel is the answer: give it a ground so it reads as one thing */
  .fm-panel{background:var(--white);border:1px solid var(--line);
    padding:clamp(22px,5vw,30px);scroll-margin-top:96px}
  .on-ink .fm-panel{background:rgba(245,240,236,.05);border-color:rgba(245,240,236,.2)}
  .fm-panel .eyebrow,.fm-panel h3{padding-right:0}
  .fm-hintline{font-weight:500;color:var(--ink);margin-top:20px}
}
.fm-fill{fill:var(--gold);opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease)}
.fm-zone[aria-pressed="true"] .fm-fill{opacity:.16}
@media (max-width:768px){.fm-zone[aria-pressed="true"] .fm-fill{opacity:.24}}

/* ==========================================================================
   ONE PIECE PER PAGE
   ========================================================================== */

/* ---- how long it lasts (dermal filler) ---- */
.lst-chart{margin-top:clamp(30px,3.4vw,46px);border-top:1px solid var(--line)}
.lst-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;
  align-items:center;gap:clamp(14px,2.2vw,32px);padding:clamp(15px,1.7vw,21px) 0;
  border-bottom:1px solid var(--line)}
.lst-n{font-family:var(--serif);font-size:clamp(18px,1.8vw,22px);color:var(--ink)}
.lst-bar{position:relative;height:7px;background:var(--sand);overflow:hidden}
.lst-bar i{position:absolute;top:0;bottom:0;left:0;width:var(--w);
  background:linear-gradient(90deg,var(--gold-lite),var(--gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.22,.75,.2,1) var(--d,0ms)}
.lst-bar i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--lo);
  background:var(--gold-deep);opacity:.55}
.is-drawn .lst-bar i{transform:scaleX(1)}
.lst-v{font-family:var(--caps);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .lst-row{grid-template-columns:1fr auto;gap:8px 14px}
  .lst-bar{grid-column:1 / -1;order:3}
}

/* ---- the dial (lips) ---- */
.dl-rail{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin-top:clamp(30px,3.4vw,48px);padding-top:24px}
.dl-line{position:absolute;left:8%;right:8%;top:30px;height:2px;background:var(--line)}
.dl-line i{display:block;height:100%;background:var(--gold);transform:scaleX(0);
  transform-origin:left;transition:transform .6s var(--ease)}
.dl-tick{background:transparent;border:0;padding:0 6px 4px;cursor:pointer;min-height:56px;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.dl-dot{width:15px;height:15px;border-radius:50%;background:var(--cream);
  border:1px solid var(--line);position:relative;z-index:1;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.dl-tick[aria-pressed="true"] .dl-dot{background:var(--gold);border-color:var(--gold);
  transform:scale(1.4)}
.dl-lab{font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);text-align:center;transition:color .35s var(--ease)}
.dl-tick[aria-pressed="true"] .dl-lab{color:var(--ink)}
.dl-panels{margin-top:clamp(28px,3.2vw,42px);min-height:10em}
.dl-panel{animation:chipIn .5s var(--ease) both;max-width:56ch}
.dl-panel h3{font-family:var(--serif);font-size:clamp(23px,2.5vw,32px);margin:0 0 12px}
@media (max-width:600px){
  .dl-rail{grid-auto-flow:row;padding-top:0}
  .dl-line{display:none}
  .dl-tick{flex-direction:row;justify-content:flex-start;gap:14px;width:100%;
    padding:15px 0;border-bottom:1px solid var(--line)}
  .dl-lab{text-align:left}
}

/* ---- regions (lines and wrinkles) ---- */
.rg-tabs{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(26px,3vw,40px);
  border-bottom:1px solid var(--line)}
.rg-tab{background:transparent;border:0;border-bottom:2px solid transparent;
  padding:15px clamp(14px,2vw,26px);min-height:52px;cursor:pointer;
  font-family:var(--caps);font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);transition:color .35s var(--ease),border-color .35s var(--ease)}
.rg-tab:hover{color:var(--ink)}
.rg-tab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.rg-panels{margin-top:clamp(26px,3vw,38px)}
.rg-panel{animation:chipIn .5s var(--ease) both}
.rg-lead{font-family:var(--serif);font-size:clamp(20px,2vw,26px);line-height:1.4;
  color:var(--ink);max-width:48ch;margin:0 0 26px}
.rg-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.rg-list li{background:var(--ground,var(--cream));padding:clamp(18px,2vw,26px);
  display:flex;flex-direction:column;gap:6px}
/* an odd count never leaves a hole in the last row */
.rg-list li:last-child:nth-child(odd){grid-column:1/-1}
.rg-list b{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.8vw,22px);
  color:var(--ink)}
.rg-list span{font-size:16px;line-height:1.6;color:var(--mute)}
@media (max-width:700px){.rg-list{grid-template-columns:1fr}}

/* ---- peel strength ---- */
.st-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  margin-top:clamp(26px,3vw,40px);border:1px solid var(--line)}
.st-tab{background:var(--ground,var(--cream));border:0;cursor:pointer;text-align:left;
  padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:7px;min-height:96px;
  transition:background .35s var(--ease)}
.st-tab[aria-pressed="true"]{background:var(--ink)}
.st-name{font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);color:var(--ink);
  transition:color .35s var(--ease)}
.st-down{font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);transition:color .35s var(--ease)}
.st-tab[aria-pressed="true"] .st-name{color:var(--cream)}
.st-tab[aria-pressed="true"] .st-down{color:var(--gold-lite)}
.st-panels{margin-top:clamp(24px,2.8vw,36px)}
.st-panel{animation:chipIn .5s var(--ease) both;max-width:64ch}
.st-panel p{margin:0 0 14px}
.st-panel b{display:block;font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px}
@media (max-width:700px){.st-tabs{grid-template-columns:1fr}}

/* ---- course planner ---- */
.pl-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,40px)}
.pl-opt{font-family:var(--caps);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 22px;min-height:50px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.pl-opt:hover{border-color:var(--gold)}
.pl-opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.pl-panels{margin-top:clamp(28px,3.2vw,44px);min-height:11em}
.pl-panel{animation:chipIn .5s var(--ease) both;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3.4vw,54px);align-items:start}
.pl-fig{display:flex;flex-direction:column;gap:6px;padding-right:clamp(20px,2.6vw,40px);
  border-right:1px solid var(--line)}
.pl-num{font-family:var(--serif);font-size:clamp(46px,6vw,78px);line-height:1;color:var(--gold-deep);
  font-variant-numeric:tabular-nums}
.pl-cap{font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute)}
.pl-panel p{margin:0;max-width:52ch;font-size:17.5px;line-height:1.7}
@media (max-width:640px){
  .pl-panel{grid-template-columns:1fr;gap:20px}
  .pl-fig{border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px;
    flex-direction:row;align-items:baseline;gap:14px}
}

/* ---- the story spine (the clinic) ---- */
.sy-list{list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:0;position:relative}
.sy-list::before{content:"";position:absolute;left:calc(var(--sy-w, 150px) + 7px);top:10px;bottom:10px;
  width:1px;background:var(--line)}
.sy-beat{position:relative;display:grid;
  grid-template-columns:var(--sy-w, 150px) 15px minmax(0,1fr);
  gap:clamp(16px,2.4vw,34px);align-items:start;
  padding-bottom:clamp(28px,3.4vw,46px)}
.sy-when{font-family:var(--caps);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);padding-top:3px;text-align:right}
.sy-dot{width:15px;height:15px;border-radius:50%;background:var(--cream);
  border:1px solid var(--gold);position:relative;z-index:1;margin-top:3px;
  transition:background .5s var(--ease) var(--d,0ms)}
.sy-beat.in .sy-dot{background:var(--gold)}
.sy-body h3{font-family:var(--serif);font-size:clamp(21px,2.1vw,27px);margin:0 0 8px}
.sy-body p{margin:0;max-width:56ch}
@media (max-width:700px){
  .sy-list::before{left:7px}
  .sy-beat{grid-template-columns:15px minmax(0,1fr);gap:16px}
  .sy-when{grid-column:2;text-align:left;order:-1;padding-top:0;margin-bottom:6px}
  .sy-dot{grid-row:1;grid-column:1}
  .sy-body{grid-column:2}
}

/* ---- aftercare picker ---- */
.pk-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,2.8vw,38px)}
.pk-btn{display:inline-flex;align-items:center;min-height:50px;padding:13px 22px;
  border:1px solid var(--line);border-radius:999px;
  font-family:var(--caps);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.pk-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ==========================================================================
   TOUCH SIZING BY INPUT, NOT BY WIDTH
   The earlier rule keyed off max-width:900px, so an iPad Pro at 1024 and an
   iPad in landscape at 1180 — both touch devices, both likely to be how the
   client opens this — got desktop-sized 32px targets. Pointer type is the
   right question to ask.
   ========================================================================== */
/* stated before the coarse-pointer block on purpose: a later rule of equal
   specificity wins, and this one was quietly cancelling the 44px below */
.enq-rows dd a,.enq-hours dd a{display:inline-flex;align-items:center;min-height:34px}

@media (pointer:coarse){
  .link-u{min-height:44px;padding-bottom:6px}
  .ct-rows dd a,.foot-col a,.foot-legal a,.enq-rows dd a,.enq-hours dd a,
  .navdrop-in a,.rel-card,.pk-btn{
    display:inline-flex;align-items:center;min-height:44px}
  .foot-col a,.foot-legal a{align-items:center}
  .pr-row{padding-block:15px}
}
/* 11.5px tracked capitals are small on any screen, not just a phone */
.foot-h,.prp-sn,.men-n{font-size:12.5px}

/* ==========================================================================
   ROUND TWO — the client's notes, 14 September
   ========================================================================== */

/* ---------- inner heroes: copy on solid ground, photograph clear ----------
   The top-down wash printed the For Men headline straight across the man's
   face, and on the contact page hid the photograph altogether. This is the
   homepage's own arrangement: cream at the left, the picture at the right. */
.pagehero{min-height:min(80svh,760px)}
.pagehero-bg::after{background:
  linear-gradient(90deg, var(--cream) 0 26%, rgba(250,247,242,.9) 44%,
    rgba(250,247,242,.14) 64%, rgba(250,247,242,0) 78%),
  linear-gradient(180deg, rgba(250,247,242,0) 58%, var(--cream) 100%)}
.pagehero-img{object-position:66% 32%}
@media (max-width:900px){
  .pagehero-bg::after{background:linear-gradient(180deg, rgba(250,247,242,.05) 0 26%,
    rgba(250,247,242,.9) 54%, var(--cream) 82%)}
  .pagehero{padding-block:clamp(280px,66vw,360px) 0}
}

/* ---------- freeze screens: the timeline and the dial ----------------------
   A runway as tall as one screen per step; the panel sticks at the top of
   the viewport and the step changes with your progress down the runway. */
.tlx--pin,.dl--pin{padding-block:0}
.tlx-run{position:relative;height:calc(var(--n) * 100vh);height:calc(var(--n) * 100svh)}
.tlx-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;
  overflow:hidden}
.tlx-pin .shell{width:100%}
.tlx-pin .sec-head{margin-bottom:0}
.tlx-pin .sec-head h2{margin-bottom:0}
.tlx--pin .tlx-track,.dl--pin .dl-rail{margin-top:clamp(28px,4vh,48px)}
.tlx--pin .tlx-panels,.dl--pin .dl-panels{margin-top:clamp(24px,3.4vh,40px);min-height:0}
.tlx-n{font-family:var(--caps);font-size:12.5px;letter-spacing:.22em;color:var(--gold-deep);
  margin:0 0 10px;font-variant-numeric:tabular-nums}
.tlx-panel p:last-child,.dl-panel p:last-child{max-width:54ch;font-size:clamp(17px,1.5vw,19px)}
/* a scroll-driven step must not also fade in on scroll */
.tlx--pin .rv,.dl--pin .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .tlx-run{height:auto}
  .tlx-pin{position:static;height:auto;padding-block:var(--sec-y)}
}
@media (max-height:640px){
  .tlx-pin .sec-head h2{font-size:clamp(24px,3vw,32px)}
  .tlx-pin .lede{display:none}
}

/* ---------- suitability, neatened -----------------------------------------
   The grid used to sit on the shell, so the shell's own padding painted as
   grey bars; a one-line and a two-line heading threw the lists out of level.
   Now: one framed panel, a kicker + heading of reserved height, ruled rows. */
.suit .sec-head{margin-bottom:0}
.suit-in{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(28px,3.2vw,44px);
  border:1px solid var(--line);background:var(--white)}
.suit-col{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;gap:0}
.suit-col+.suit-col{border-left:1px solid var(--line)}
.suit-k{margin:0 0 14px;font-family:var(--caps);font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep)}
.suit-col--n .suit-k{color:var(--mute)}
.suit-col h3{font-size:clamp(21px,2vw,26px);line-height:1.22;margin:0 0 22px;
  min-height:2.44em;display:flex;align-items:flex-end;max-width:22ch}
.suit-col ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.suit-col li{padding:15px 0 15px 22px;border-bottom:1px solid var(--line);position:relative;
  line-height:1.55;color:var(--ink-soft)}
.suit-col li::before{content:"";position:absolute;left:0;top:1.35em;width:10px;height:1px;
  background:var(--gold)}
.suit-col--n li::before{background:var(--mute)}
.suit-m{display:none}
@media (max-width:760px){
  .suit-in{grid-template-columns:1fr}
  .suit-col+.suit-col{border-left:0;border-top:1px solid var(--line)}
  .suit-col h3{min-height:0}
}

/* ---------- related treatments, tidied -----------------------------------
   Three white boxes with a floating arrow read as unfinished. Ruled columns,
   the title and the arrow on one line, the description under it. */
.rel-grid{grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rel-card{padding:clamp(26px,2.8vw,38px) clamp(20px,2.2vw,30px);border:0;background:transparent;
  gap:10px;transform:none}
/* every card the same width, because the photographs have to line up */
.rel-card:first-child{padding-left:clamp(20px,2.2vw,30px)}
.rel-card+.rel-card{border-left:1px solid var(--line)}
.rel-card:hover{border-color:var(--line);background:var(--white);transform:none}
.rel-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.rel-n{font-size:clamp(20px,1.9vw,25px)}
.rel-go{margin-top:0;flex:none;transform:translateY(2px)}
.rel-b{font-size:16px;color:var(--mute);flex:none}
@media (max-width:900px){
  .rel-grid{grid-template-columns:1fr}
  .rel-card{padding-inline:0}
  .rel-card+.rel-card{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- prices on a dark ground ---------------------------------------
   The homepage changes ground to keep a long page from reading as one long
   cream sheet. The inner pages did not, and it showed. */
.pr.g-ink{color:var(--cream)}
.pr.g-ink .eyebrow{color:var(--gold-lite)}
.pr.g-ink h2,.pr.g-ink .pr-n{color:var(--cream)}
.pr.g-ink .measure,.pr.g-ink .pr-prose p{color:rgba(245,240,236,.72)}
.pr.g-ink .pr-prose p:first-child{color:var(--cream)}
.pr.g-ink .pr-list,.pr.g-ink .pr-row{border-color:rgba(245,240,236,.18)}
.pr.g-ink .pr-v{color:var(--gold-lite)}

/* ---------- the journey: three taps, then your details ------------------- */
.jn-in{max-width:880px;margin-inline:auto}
.jn-head{text-align:center}
.jn-head .lede{margin-inline:auto}
.jn-form{position:relative;margin-top:clamp(30px,3.6vw,50px);padding:clamp(28px,3.6vw,52px);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(46,36,24,.08)}
.jn--compact .jn-form{background:var(--cream)}
.jn-bar{display:flex;gap:6px;justify-content:center;margin-bottom:clamp(26px,3vw,38px)}
.jn-bar i{display:block;width:34px;height:2px;background:var(--line);
  transition:background .4s var(--ease)}
.jn-bar i.on{background:var(--gold)}
.jn-step{animation:chipIn .5s var(--ease) both}
.jn-q{font-family:var(--serif);font-size:clamp(26px,3vw,40px);line-height:1.12;margin:0 0 10px;
  text-align:center;color:var(--ink)}
.jn-sub{margin:0 auto clamp(22px,2.6vw,32px);text-align:center;color:var(--mute);max-width:46ch}
.jn-tiles{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:10px}
.jn-tile{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;
  padding:18px 20px;min-height:84px;background:var(--cream);border:1px solid var(--line);
  cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease),
  transform .4s var(--ease),box-shadow .4s var(--ease)}
.jn--compact .jn-tile{background:var(--white)}
.jn-tile:hover{border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(46,36,24,.08)}
.jn-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jn-tile[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.jn-t{font-family:var(--serif);font-size:19px;color:var(--ink);transition:color .3s var(--ease)}
.jn-s{font-size:14px;color:var(--mute);transition:color .3s var(--ease)}
.jn-tile[aria-pressed="true"] .jn-t{color:var(--cream)}
.jn-tile[aria-pressed="true"] .jn-s{color:rgba(245,240,236,.7)}
.jn-summary{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 24px}
.jn-summary span{font-family:var(--caps);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--line);color:var(--ink-soft)}
.jn-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jn-fields .frm-f--wide{grid-column:1 / -1}
.jn-fields .frm-f span em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--mute)}
.jn-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.jn-actions{display:flex;justify-content:center;margin-top:22px}
.jn-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--line)}
.jn-back{background:transparent;border:0;padding:8px 0;cursor:pointer;
  font-family:var(--caps);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.jn-back:hover{color:var(--gold-deep)}
.jn-count{font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;color:var(--mute);
  margin-left:auto;font-variant-numeric:tabular-nums}
.jn-done{text-align:center;padding:clamp(20px,3vw,40px) 0;animation:chipIn .5s var(--ease) both}
.jn-form.is-sending{opacity:.6;pointer-events:none}
.jn-err{margin:0 0 16px;text-align:center;color:#8A3A2A;font-size:15px}
@media (max-width:640px){
  .jn-form{padding:22px 18px}
  .jn-fields{grid-template-columns:1fr}
  .jn-tiles{grid-template-columns:1fr 1fr;gap:8px}
  .jn-tiles[style="--cols:3"]{grid-template-columns:1fr}
  .jn-tile{min-height:76px;padding:14px 14px}
  .jn-bar i{width:22px}
}

/* ---------- where the clinic is (contact) -------------------------------- */
.wh.on-ink{color:var(--cream)}
.wh-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(34px,5vw,80px);
  align-items:start}
.wh.on-ink .eyebrow{color:var(--gold-lite)}
.wh.on-ink h2{color:var(--cream)}
.wh.on-ink .lede,.wh.on-ink p{color:rgba(245,240,236,.78)}
.wh-copy p{max-width:56ch}
.wh-panel{padding:clamp(24px,2.8vw,36px);border:1px solid rgba(245,240,236,.22)}
.wh-panel .enq-rows,.wh-panel .enq-hours{margin:0}
.wh-panel .enq-rows{margin-bottom:18px}
.wh.on-ink .enq-rows>div,.wh.on-ink .enq-hours>div{border-color:rgba(245,240,236,.16)}
.wh.on-ink .enq-rows dt,.wh.on-ink .enq-hours dt{color:var(--gold-lite)}
.wh.on-ink .enq-rows dd,.wh.on-ink .enq-hours dd,.wh.on-ink .enq-rows a{color:var(--cream)}
.wh-age{margin:18px 0 0;font-size:14px;color:rgba(245,240,236,.6)}
@media (max-width:900px){.wh-in{grid-template-columns:1fr}}
/* 1fr cannot shrink below its content, and a long email address in a flex row
   is content — so the panel ran 12px past a 375px screen */
.wh-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
@media (max-width:900px){.wh-in{grid-template-columns:minmax(0,1fr)}}
.wh-panel,.wh-copy{min-width:0}
.enq-rows dd,.enq-hours dd{min-width:0;overflow-wrap:anywhere}
@media (max-width:480px){
  .enq-rows>div{flex-direction:column;align-items:flex-start;gap:4px}
  .enq-rows dd{text-align:left}
}

/* ==========================================================================
   LUX — the finishing layer
   ========================================================================== */

/* ---- moving between pages: a soft settle rather than a cut ---------------
   Cross-document view transitions. Where the browser has them the old page
   fades and lifts away and the new one settles in; elsewhere it is simply a
   normal navigation. */
@view-transition { navigation: auto; }
@keyframes vt-out{to{opacity:0;transform:translate3d(0,-12px,0)}}
@keyframes vt-in{from{opacity:0;transform:translate3d(0,18px,0)}}
::view-transition-old(root){animation:vt-out .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .62s cubic-bezier(.2,.75,.2,1) both}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---- the cursor ---------------------------------------------------------- */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;
  border-radius:50%;opacity:0;transition:opacity .4s var(--ease),width .35s var(--ease),
  height .35s var(--ease),margin .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
  will-change:transform}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold)}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(168,131,79,.55)}
.has-cursor .cur-dot,.has-cursor .cur-ring{opacity:1}
.cur-hot .cur-ring{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--gold);
  background:rgba(168,131,79,.08)}
.cur-hot .cur-dot{width:4px;height:4px;margin:-2px 0 0 -2px}
.cur-text .cur-ring{width:22px;height:22px;margin:-11px 0 0 -11px;border-color:rgba(168,131,79,.35)}

/* ---- magnetic actions ---------------------------------------------------- */
.btn,.hdr-btn,.link-u{transition:transform .5s cubic-bezier(.2,.75,.2,1),background .35s var(--ease),
  color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.btn.is-mag{box-shadow:0 18px 40px rgba(46,36,24,.18)}

/* ---- staggered arrivals -------------------------------------------------- */
.chip-row>*,.jn-tiles>*,.pl-opts>*,.rg-tabs>*,.st-tabs>*,.rel-grid>*,.ix-list>*,
.ph-facts-in>*,.lf-grid>*,.tr-grid>*{transition-delay:calc(var(--i,0) * 55ms)}
.rv.in .chip,.rv.in .jn-tile,.rv.in .pl-opt{animation:tileIn .6s var(--ease) both;
  animation-delay:calc(var(--i,0) * 55ms)}
@keyframes tileIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* ---- a light passes across every headline as it arrives -----------------
   The text stays ink. For a moment on arrival a soft gold highlight moves
   across it and is gone. background-clip:text, so no text-shadow anywhere
   near it — a shadow prints straight through clipped glyphs. */
.pagehero h1,.hero h1,.sec-head h2,.prose-body h2,.rt-in h2{
  background-image:linear-gradient(105deg, var(--ink) 0 42%, var(--gold-lite) 50%, var(--ink) 58% 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none}
.pagehero h1.in,.hero h1.in,.sec-head h2.in,.prose-body h2.in,.rt-in h2.in,
.pagehero h1.split,.hero h1.split{animation:sheen .95s cubic-bezier(.4,.1,.2,1) .12s both}
@keyframes sheen{from{background-position:100% 0}to{background-position:0% 0}}
/* the homepage's gold italic opener keeps its own colour */
.hero h1 em,.hero h1 .gold,.hero h1 .h1-a{-webkit-text-fill-color:var(--gold-deep);background:none}
.on-ink h2,.g-ink h2,.wh h2,.pr.g-ink h2{-webkit-text-fill-color:var(--cream);background:none;animation:none}
@supports not (-webkit-background-clip:text){
  .pagehero h1,.hero h1,.sec-head h2,.prose-body h2,.rt-in h2{background:none;-webkit-text-fill-color:currentColor}
}
@media (prefers-reduced-motion:reduce){
  /* !important on purpose: the .in / .split rules outrank this by a class */
  .pagehero h1,.hero h1,.sec-head h2,.prose-body h2,.rt-in h2{animation:none!important;background-position:0 0}
}

/* ---- photography, framed ------------------------------------------------- */
.prose-media,.wt-media,.prac-media,.rt-fig{position:relative}
.prose-media::after,.rt-fig::after{content:"";position:absolute;inset:14px;
  border:1px solid rgba(168,131,79,.45);pointer-events:none;
  transition:inset .6s var(--ease),border-color .6s var(--ease)}
.prose-media:hover::after,.rt-fig:hover::after{inset:20px;border-color:var(--gold)}
.prose-img{transition:transform 1.6s var(--ease)}
.prose-media:hover .prose-img{transform:scale(1.03)}

/* ---- depth on scroll: heroes and bands drift slower than the page -------- */
@supports (animation-timeline: view()){
  .pagehero-img{animation:phkb 30s ease-in-out infinite alternate, drift linear both;
    animation-timeline:auto, view();animation-range:normal, entry 0% exit 100%}
  .band-img{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes drift{from{translate:0 -6%}to{translate:0 6%}}
  .band-img,.pagehero-img{scale:1.14}
}
@media (prefers-reduced-motion:reduce){.pagehero-img,.band-img{animation:none!important}}

/* ---- dark sections: a hairline of gold along the top edge --------------- */
.g-ink{position:relative}
.g-ink::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,174,132,.7) 30%, rgba(201,174,132,.7) 70%, transparent);
  pointer-events:none;z-index:1}
.g-ink::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.04), transparent 60%)}

/* ---- the story spine draws itself --------------------------------------- */
.sy-list::before{transform:scaleY(var(--drawn,0));transform-origin:top;
  background:var(--gold);opacity:.7;transition:transform 1.2s cubic-bezier(.2,.75,.2,1)}

/* ---- the footer carries the monogram as a watermark ----------------------
   Behind the columns rather than in a band of its own: no extra height, and
   nothing to clip. A faint gold line drawing that catches on the way past. */
.foot{position:relative;overflow:hidden}
.fx-mark-old{position:absolute;right:clamp(-40px,-2vw,0px);top:50%;transform:translateY(-52%);
  width:clamp(260px,34vw,520px);pointer-events:none;z-index:0;
  opacity:.055;color:var(--gold-lite);transition:opacity 1.4s var(--ease)}
.foot:hover .foot-mark{opacity:.09}
.foot-mark-svg{width:100%;height:auto;display:block}


/* ---- after weight loss, as a freeze screen ------------------------------ */
.wt--pin{padding-block:0}
.wt--pin .wt-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(36px,5vw,80px);align-items:center}
.wt--pin .wt-media{position:static;margin:0;max-width:none}
.wt--pin .wt-img{width:100%;height:auto;max-height:76vh;max-height:76svh;object-fit:cover;
  aspect-ratio:4/5;display:block}
.wt--pin .wt-body h2{margin:14px 0 6px;font-size:clamp(28px,3vw,42px);max-width:16ch}
.wt--pin .tlx-track{margin-top:clamp(20px,3vh,34px)}
.wt--pin .tlx-panels{margin-top:clamp(20px,3vh,32px);min-height:0}
.wt--pin .wt-panel h3{font-family:var(--serif);font-size:clamp(22px,2.3vw,30px);margin:0 0 10px}
.wt--pin .wt-panel p{max-width:52ch;margin:0 0 12px}
.wt--pin .wt-panel .wt-punch{margin-top:14px}
.wt--pin .rv{opacity:1;transform:none}
@media (max-width:900px){
  /* a phone reads it as a page: the picture, then every step in order */
  .wt--pin .tlx-run{height:auto}
  .wt--pin .tlx-pin{position:static;height:auto;padding-block:var(--sec-y);display:block;overflow:visible}
  .wt--pin .wt-in{grid-template-columns:1fr;gap:28px}
  .wt--pin .wt-media{max-width:420px}
  .wt--pin .tlx-track{display:none}
  .wt--pin .tlx-panel[hidden]{display:block}
  .wt--pin .tlx-panel{animation:none;padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
  .wt--pin .tlx-panel:first-child{border-top:0;padding-top:0;margin-top:0}
}
@media (max-height:700px) and (min-width:901px){
  .wt--pin .wt-img{max-height:62svh}
  .wt--pin .wt-body h2{font-size:clamp(24px,2.6vw,32px)}
}

/* ---- the concern list: ruled rows, not pills ------------------------------
   The circles were the one thing on the page not speaking the site's language.
   Every other list here is a numeral, a name and a hairline. Now this is too. */
.fm-list,.demo1 .fm-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,44px);
  border-top:1px solid var(--line);margin-top:18px}
.fm-list button,.demo1 .fm-list button{
  display:grid;grid-template-columns:34px minmax(0,1fr) 22px;align-items:center;gap:12px;
  width:100%;min-height:54px;padding:13px 0;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  box-shadow:none;transform:none;color:var(--ink);
  font-family:var(--body);font-size:16.5px;letter-spacing:0;text-transform:none;
  transition:color .35s var(--ease),padding-left .4s var(--ease)}
.fm-list button:hover,.demo1 .fm-list button:hover{color:var(--gold-deep);transform:none;
  box-shadow:none;border-color:var(--line);padding-left:6px;background:transparent}
.fm-li-n{font-family:var(--caps);font-size:12px;letter-spacing:.2em;color:var(--gold-deep);
  font-variant-numeric:tabular-nums}
.fm-li-t{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.25}
.fm-li-a{color:var(--gold-deep);opacity:0;transform:translateX(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.fm-li-a svg{width:18px;height:18px;display:block}
.fm-list button:hover .fm-li-a{opacity:1;transform:none}
.fm-list button[aria-pressed="true"],.demo1 .fm-list button[aria-pressed="true"]{
  background:transparent;border-color:var(--gold);color:var(--ink);box-shadow:none}
.fm-list button[aria-pressed="true"] .fm-li-t{color:var(--ink);font-style:italic}
.fm-list button[aria-pressed="true"] .fm-li-a{opacity:1;transform:none}
.fm-list button[aria-pressed="true"] .fm-li-n{color:var(--ink)}
.on-ink .fm-list button,.on-ink .fm-list button[aria-pressed="true"]{background:transparent;color:var(--cream)}
@media (max-width:768px){
  .fm-list,.demo1 .fm-list{grid-template-columns:1fr;gap:0;flex-direction:column}
  .fm-list button,.demo1 .fm-list button{min-height:56px;font-size:16.5px;letter-spacing:0;
    justify-content:start;background:transparent;border:0;border-bottom:1px solid var(--line)}
  .fm-list button[aria-pressed="true"],.demo1 .fm-list button[aria-pressed="true"]{
    background:transparent;color:var(--ink);border-color:var(--gold)}
}

/* ---- the long-form section, as a freeze screen -------------------------- */
.prose--pin{padding-block:0}
.prose--pin .prose-in{align-items:center;gap:clamp(36px,5vw,80px)}
.prose--pin .prose-media{position:static;max-width:none}
.prose--pin .prose-img{aspect-ratio:4/5;max-height:78vh;max-height:78svh;width:100%;object-fit:cover}
.prose--pin .tlx-track--num{grid-auto-columns:max-content;justify-content:start;gap:clamp(18px,2.4vw,34px);
  margin-top:0;padding-top:0}
.prose--pin .tlx-track--num .tlx-rail{display:none}
.prose--pin .tlx-track--num .tlx-mark{flex-direction:row;gap:10px;min-height:44px;padding:0}
.prose--pin .tlx-track--num .tlx-when{font-variant-numeric:tabular-nums}
.prose--pin .tlx-panels{margin-top:clamp(22px,3vh,36px);min-height:0}
.prose--pin .pr-panel h3{font-family:var(--serif);font-size:clamp(26px,2.8vw,38px);line-height:1.1;
  margin:0 0 14px;max-width:18ch}
.prose--pin .pr-panel p{max-width:56ch;margin:0 0 14px;font-size:clamp(16.5px,1.3vw,18px)}
.prose--pin .pr-panel .prose-list{margin:0 0 14px}
.prose--pin .rv{opacity:1;transform:none}
@media (max-width:900px){
  .prose--pin .tlx-run{height:auto}
  .prose--pin .tlx-pin{position:static;height:auto;padding-block:var(--sec-y);display:block;overflow:visible}
  .prose--pin .prose-in{grid-template-columns:1fr;gap:28px}
  .prose--pin .prose-media{max-width:520px}
  .prose--pin .tlx-track--num{display:none}
  .prose--pin .tlx-panel[hidden]{display:block}
  .prose--pin .tlx-panel{animation:none;padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
  .prose--pin .tlx-panel:first-child{border-top:0;padding-top:0;margin-top:0}
  .prose--pin .tlx-n{display:none}
}
@media (max-height:700px) and (min-width:901px){
  .prose--pin .prose-img{max-height:62svh}
  .prose--pin .pr-panel h3{font-size:clamp(22px,2.4vw,30px)}
  .prose--pin .pr-panel p{font-size:16px;margin-bottom:10px}
}

/* ---- what it is asked for, as a freeze screen ---------------------------
   The pills are gone. Concerns run down the left as a ruled, numbered list;
   the explanation for the one in hand sits on the right. */
.cn--pin{padding-block:0}
.cn-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(36px,6vw,110px);align-items:center}
.cn-list h2{margin:12px 0 22px;font-size:clamp(26px,2.8vw,38px);max-width:16ch}
.cn-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cn-item{display:grid;grid-template-columns:36px minmax(0,1fr) 22px;align-items:center;gap:12px;
  min-height:0;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;
  cursor:pointer;text-align:left;flex-direction:row;transition:padding-left .4s var(--ease)}
.cn-item:hover{padding-left:6px}
.cn-n{font-family:var(--caps);font-size:12px;letter-spacing:.2em;color:var(--mute);
  font-variant-numeric:tabular-nums;transition:color .35s var(--ease)}
.cn-t{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.25;color:var(--ink);
  transition:color .35s var(--ease),font-style .35s var(--ease)}
.cn-a{color:var(--gold-deep);opacity:0;transform:translateX(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cn-a svg{width:18px;height:18px;display:block}
.cn-item[aria-pressed="true"]{border-bottom-color:var(--gold)}
.cn-item[aria-pressed="true"] .cn-n{color:var(--gold-deep)}
.cn-item[aria-pressed="true"] .cn-t{font-style:italic}
.cn-item[aria-pressed="true"] .cn-a{opacity:1;transform:none}
.cn-item .tlx-dot,.cn-item .tlx-when{display:none}
.cn-panels{margin-top:0;min-height:0}
.cn-panel h3{font-family:var(--serif);font-size:clamp(28px,3.2vw,46px);line-height:1.08;
  margin:0 0 16px;max-width:16ch}
.cn-panel p:last-child{font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:44ch;color:var(--ink-soft)}
.cn--pin .rv{opacity:1;transform:none}
@media (max-width:900px){
  .cn--pin .tlx-run{height:auto}
  .cn--pin .tlx-pin{position:static;height:auto;padding-block:var(--sec-y);display:block;overflow:visible}
  .cn-in{grid-template-columns:1fr;gap:26px}
  .cn-rows{display:none}
  .cn--pin .tlx-panel[hidden]{display:block}
  .cn--pin .tlx-panel{animation:none;padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
  .cn--pin .tlx-panel:first-child{border-top:0;padding-top:0;margin-top:0}
}
@media (max-height:760px) and (min-width:901px){
  .cn-item{padding:8px 0}
  .cn-t{font-size:17px}
  .cn-panel h3{font-size:clamp(24px,2.6vw,34px)}
}

/* ---- the prices page on the dark ground --------------------------------- */
.ix.g-ink .eyebrow{color:var(--gold-lite)}
.ix.g-ink h2,.ix.g-ink .ix-t{color:var(--cream)}
.ix.g-ink .lede{color:rgba(245,240,236,.72)}
.ix.g-ink .ix-list{border-top-color:rgba(201,174,132,.28)}
.ix.g-ink .ix-card{border-bottom-color:rgba(201,174,132,.22)}
.ix.g-ink .ix-card:hover{background:rgba(245,240,236,.04)}
.ix.g-ink .ix-n,.ix.g-ink .ix-go{color:var(--gold-lite)}
.ix.g-ink .ix-b{color:rgba(245,240,236,.62)}
.ix.g-ink .ix-p{font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);letter-spacing:0;
  text-transform:none;color:var(--cream)}
.ix.g-ink .ix-card:first-child .ix-p{color:var(--gold-lite);font-style:italic}

/* ---- freeze screens: 70vh of travel per step, a full screen for the first */
.tlx-run{height:calc(var(--n) * 70vh + 30vh);height:calc(var(--n) * 70svh + 30svh)}

/* ---- the consultation, given room --------------------------------------- */
.consult{padding-block:var(--sec-y)}
.cs-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,84px);
  align-items:center}
.cs-main h2{margin:14px 0 18px}
.cs-main p{max-width:58ch}
.cs-media{margin:0;position:relative}
.cs-img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.cs-media::after{content:"";position:absolute;inset:14px;border:1px solid rgba(168,131,79,.45);
  pointer-events:none}
@media (max-width:900px){
  .cs-in{grid-template-columns:1fr;gap:28px}
  .cs-media{max-width:480px}
}

/* the practical part: three answers, one checklist, on the dark ground */
.cq{padding-block:var(--sec-y-lg,var(--sec-y))}
.cq .eyebrow{color:var(--gold-lite)}
.cq h2{color:var(--cream)}
.cq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(201,174,132,.22);
  margin-top:clamp(28px,3.4vw,46px);border:1px solid rgba(201,174,132,.22)}
.cq-item{background:var(--ink);padding:clamp(24px,2.8vw,40px)}
.cq-n{margin:0 0 16px;font-family:var(--caps);font-size:12px;letter-spacing:.24em;color:var(--gold-lite);
  font-variant-numeric:tabular-nums}
.cq-item h3{font-family:var(--serif);font-size:clamp(20px,1.9vw,25px);line-height:1.2;color:var(--cream);
  margin:0 0 12px}
.cq-item p:last-child{margin:0;color:rgba(245,240,236,.72);line-height:1.6}
.cq-prep{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);
  align-items:start;margin-top:clamp(40px,4.6vw,64px);padding-top:clamp(30px,3.4vw,46px);
  border-top:1px solid rgba(201,174,132,.22)}
.cq-prep-head h3{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);color:var(--cream);margin:0 0 10px}
.cq-prep-head p{margin:0;color:rgba(245,240,236,.62);max-width:30ch}
.cq-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,44px)}
.cq-list li{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid rgba(201,174,132,.18);
  color:rgba(245,240,236,.86);line-height:1.5}
.cq-list li::before{content:"";position:absolute;left:0;top:1.35em;width:12px;height:1px;background:var(--gold-lite)}
.cq-btn{grid-column:1 / -1;justify-self:start;margin-top:26px}
@media (max-width:900px){
  .cq-grid{grid-template-columns:1fr}
  .cq-prep{grid-template-columns:1fr}
  .cq-list{grid-template-columns:1fr}
}

/* ---- a portrait blended into the banner (the clinic page) ----------------
   Her photograph is 765px wide, so it sits at its own size on the right of
   the banner rather than being stretched across all of it, and its edges
   dissolve into the cream so it reads as part of the page rather than a
   picture placed on it. */
.pagehero--blend .pagehero-img{
  position:absolute;top:0;right:0;bottom:0;left:auto;width:min(48%,720px);height:100%;object-position:50% 18%;
  animation:none;scale:1;translate:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 34%, #000 100%),
                     linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0, #000 34%, #000 100%),
             linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
  mask-composite:intersect}
.pagehero--blend .pagehero-bg{background:var(--cream)}
.pagehero--blend .pagehero-bg::after{background:
  linear-gradient(90deg, var(--cream) 0 30%, rgba(250,247,242,.6) 46%, rgba(250,247,242,0) 62%),
  linear-gradient(180deg, rgba(250,247,242,0) 70%, var(--cream) 100%)}
.pagehero--blend .pagehero-body{max-width:44ch}
@media (max-width:900px){
  .pagehero--blend .pagehero-img{width:100%;left:0;object-position:50% 12%;
    -webkit-mask-image:linear-gradient(180deg, #000 0, #000 40%, transparent 78%);
    mask-image:linear-gradient(180deg, #000 0, #000 40%, transparent 78%)}
}

/* reduced motion: a freeze screen becomes a plain sequence, every step shown */
@media (prefers-reduced-motion:reduce){
  [data-pin] .tlx-panel[hidden],[data-pin] .dl-panel[hidden]{display:block}
  [data-pin] .tlx-track,[data-pin] .dl-rail,[data-pin] .cn-rows{display:none}
  [data-pin] .tlx-panel,[data-pin] .dl-panel{animation:none;padding-top:22px;margin-top:22px;
    border-top:1px solid var(--line)}
  [data-pin] .tlx-panel:first-child,[data-pin] .dl-panel:first-child{border-top:0;padding-top:0;margin-top:0}
  [data-pin] .tlx-pin{display:block;padding-block:var(--sec-y)}
  [data-pin] .tlx-pin .shell{align-items:start}
}