/* The Heritage Aesthetics Clinic
   Palette and type are placeholders until the clinic's brand guide arrives: change the tokens below. */
:root{
  --navy:#152359;--section:var(--navy);--navy-hover:#24398a;--navy-deep:#0f1a45;
  --cream:#f5f0e8;--paper:#ede7dd;--card:#faf8f3;--ground:#f5f0e8;
  /* A navy section's top and bottom edges fade from the cream ground: linear-gradient(180deg,var(--ground-fade)) */
  /* …and a cream section's edges fade from the navy around it: linear-gradient(180deg,var(--navy-fade)) */
  --navy-fade:#152359 0,rgba(21,35,89,.9) 16%,rgba(21,35,89,.64) 38%,rgba(21,35,89,.32) 62%,rgba(21,35,89,.1) 84%,rgba(21,35,89,0) 100%;
  --ground-fade:#f5f0e8 0,rgba(245,240,232,.9) 16%,rgba(245,240,232,.64) 38%,rgba(245,240,232,.32) 62%,rgba(245,240,232,.1) 84%,rgba(245,240,232,0) 100%;
  --ink:#1b2b3e;--muted:#56606e;--label:#7a6546;
  --gold:#a89371;--gold-light:#c9b48f;--cream-dim:#d9cdb6;
  --line:rgba(21,35,89,.16);--line-light:rgba(245,240,232,.2);
  --serif:'Ibarra Real Nova',Georgia,'Times New Roman',serif;
  --display:Cormorant,'Ibarra Real Nova',Georgia,serif;
  --caps:'Cinzel','Trajan Pro',Georgia,serif;
  --sans:Manrope,'Segoe UI',system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-ui:cubic-bezier(.4,0,.2,1);--ease-even:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(20px,5.2vw,88px);--header-h:116px;--header-h-scrolled:100px
}
*,*::before,*::after{box-sizing:border-box}
/* Navy behind the page, so overscrolling past the footer (or above the hero) never shows a pale strip */
html{background:var(--navy);scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.menu-open{overflow:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul,fieldset{margin:0}
ol,ul{padding:0;list-style:none}
/* Headings: Cormorant, as in the design. It sets smaller than the body serif, so sizes run a step larger. */
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(38px,4.8vw,66px);line-height:1.02}
em{font-style:italic;font-weight:400}
cite{font-style:italic}
.page-gutter{padding-inline:var(--gutter)}
.keep{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{border-radius:6px;position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:var(--cream);padding:10px 16px;font-size:14px;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

/* Section labels: capitals from the wordmark's family */
.label{font-family:var(--caps);font-size:13px;font-weight:500;letter-spacing:.14em;line-height:1.4;color:var(--label)}
.label--light{color:var(--gold-light)}

/* Buttons: sentence case for legibility, a fill wipes in from the left, the arrow nudges forward */
.button{border-radius:6px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 28px;border:1px solid transparent;text-decoration:none;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;transition:color .35s var(--ease-ui),border-color .35s var(--ease-ui),transform .18s var(--ease-ui)}
.button::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.button:hover::before{transform:scaleX(1)}
.button:active{transform:scale(.98)}
.button__arrow{font-size:17px;font-weight:400;transition:transform .35s var(--ease-out)}
.button:hover .button__arrow{transform:translateX(4px)}
.button--solid{background:var(--navy);color:var(--cream)}
.button--solid::before{background:var(--navy-hover)}
.button--light{background:var(--cream);color:var(--navy)}
.button--light::before{background:#fff}
.button--header{min-height:46px;padding:0 22px;font-size:14px;background:var(--cream);color:var(--navy)}
.button--header::before{background:#fff}

/* Text links: an underline that redraws from the left */
.text-link,.link-draw{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;padding-bottom:3px;transition:color .25s}
.text-link:hover,.link-draw:hover{animation:redraw .6s var(--ease-out)}
@keyframes redraw{0%{background-size:100% 1px;background-position:right bottom}45%{background-size:0 1px;background-position:right bottom}46%{background-position:left bottom}100%{background-size:100% 1px;background-position:left bottom}}
.text-link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--navy)}
.text-link .arrow{font-size:17px;font-weight:400;transition:transform .35s var(--ease-out)}
.text-link:hover .arrow{transform:translateX(4px)}
.text-link--light{color:var(--cream)}

/* Header: navy marks throughout, a cream bar once scrolled */
.site-header{position:fixed;inset:0 0 auto;z-index:50;color:var(--cream);transition:background-color .4s var(--ease-ui),box-shadow .4s var(--ease-ui)}
.site-header__bar{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;transition:height .4s var(--ease-out)}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand__crest,.brand__wordmark{position:relative;display:block}
.brand__crest{width:50px;aspect-ratio:370/481}
.brand__wordmark{width:clamp(210px,17vw,244px);aspect-ratio:625/188}
.brand img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .4s var(--ease-ui)}
.brand__dark{opacity:0}
.site-nav{display:flex;gap:clamp(18px,2.2vw,34px)}
.site-nav a{font-size:15px;font-weight:500;text-decoration:none;position:relative;padding:6px 0;white-space:nowrap}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.site-header__actions{display:flex;align-items:center;gap:22px}
.site-header__phone{font-size:15px;font-weight:500;white-space:nowrap}
.menu-toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;font-size:15px;font-weight:600}
.menu-toggle__lines{width:20px;height:9px;border-block:1.5px solid currentColor}
.site-header.is-scrolled{background:rgba(245,240,232,.97);color:var(--navy);box-shadow:0 1px 0 var(--line)}
.site-header.is-scrolled .site-header__bar{height:var(--header-h-scrolled)}
.site-header.is-scrolled .brand__light{opacity:0}
.site-header.is-scrolled .brand__dark{opacity:1}
.site-header.is-scrolled .button--header{background:var(--navy);color:var(--cream)}
.site-header.is-scrolled .button--header::before{background:var(--navy-hover)}

/* Masthead (home page): the offer strip, then the links split either side of the centred wordmark. Clear over the
   video; once the page moves the strip folds away and the bar turns solid navy. */
.masthead{position:fixed;inset:0 0 auto;z-index:50;color:var(--cream);transition:background-color .4s var(--ease-ui),box-shadow .4s var(--ease-ui)}
.masthead__bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;height:102px;padding-inline:clamp(20px,3.5vw,50px);transition:height .4s var(--ease-out)}
.masthead.is-scrolled{background:rgba(15,26,69,.97);box-shadow:0 1px 0 var(--line-light)}
.masthead.is-scrolled .masthead__bar{height:84px}
.masthead__side{display:flex;align-items:center;gap:28px}
.masthead__side--end{justify-content:flex-end;gap:24px}
.masthead__nav{display:flex;gap:clamp(20px,2vw,28px)}
.masthead__side--end .masthead__nav{margin-right:4px}
.masthead__nav a,.masthead__drop{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 0;border:0;background:none;color:inherit;font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:20px;text-decoration:none;white-space:nowrap;transition:color .3s var(--ease-ui)}
.masthead__nav a::after,.masthead__drop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.masthead__nav a:hover::after,.masthead__drop:hover::after,.masthead__drop[aria-expanded=true]::after{transform:scaleX(1);transform-origin:left}
.masthead__drop .chev{flex:none;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.4;transition:rotate .35s var(--ease-out)}
.masthead__drop[aria-expanded=true] .chev{rotate:180deg}
/* While a menu is open the other links step back */
.masthead.has-drop .masthead__nav>:not([aria-expanded=true]){color:rgba(245,240,232,.65)}
.masthead.has-drop{background:var(--navy);box-shadow:0 1px 0 var(--line-light)}

/* Treatments menu: concerns on the left, the chosen concern's overview, then its treatments */
/* Both menus unfurl down from the bar (a clip that opens past the sides and bottom so the shadow shows), then their
   contents rise in turn. Closing folds back up inside the 300ms the script waits before hiding the panel. */
.mega,.drop{position:absolute;top:100%;z-index:2;background:#fff;color:var(--ink);border-radius:0 0 6px 6px;opacity:0;clip-path:inset(0 -80px 100% -80px);transition:clip-path .26s var(--ease-ui),opacity .2s var(--ease-ui) .06s}
.mega[hidden],.drop[hidden],.drop-backdrop[hidden]{display:none}
.mega.is-open,.drop.is-open{opacity:1;clip-path:inset(0 -80px -100px -80px);transition:clip-path .6s var(--ease-out),opacity .2s var(--ease-ui)}
.mega.is-open .mega__concerns>.mega__label,.mega.is-open .mega__concerns li,.mega.is-open .mega__view-all,.mega.is-open .mega__panel:not(.is-entering),.mega.is-open .mega__cta,.drop.is-open>*{animation:menu-in .5s var(--ease-out) both}
.mega.is-open .mega__concerns li:nth-child(1){animation-delay:.08s}
.mega.is-open .mega__concerns li:nth-child(2){animation-delay:.11s}
.mega.is-open .mega__concerns li:nth-child(3){animation-delay:.14s}
.mega.is-open .mega__concerns li:nth-child(4){animation-delay:.17s}
.mega.is-open .mega__concerns li:nth-child(5){animation-delay:.2s}
.mega.is-open .mega__concerns li:nth-child(6){animation-delay:.23s}
.mega.is-open .mega__concerns li:nth-child(7){animation-delay:.26s}
.mega.is-open .mega__concerns li:nth-child(8){animation-delay:.29s}
.mega.is-open .mega__concerns li:nth-child(9){animation-delay:.32s}
.mega.is-open .mega__view-all{animation-delay:.36s}
.mega.is-open .mega__panel:not(.is-entering){animation-delay:.16s}
.mega.is-open .mega__cta{animation-delay:.3s}
.drop.is-open>:nth-child(2){animation-delay:.07s}
.drop.is-open>:nth-child(3){animation-delay:.12s}
.drop.is-open>:nth-child(4){animation-delay:.17s}
.drop.is-open>:nth-child(5){animation-delay:.24s}
@keyframes menu-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .mega,.drop,.mega.is-open,.drop.is-open{clip-path:none;transition:opacity .2s var(--ease-ui)}
}
.mega{left:0;right:0;border-top:1px solid var(--line-light);box-shadow:0 30px 60px -30px rgba(10,16,48,.45)}
.mega__inner{display:grid;grid-template-columns:400px 400px minmax(0,1fr);grid-template-rows:auto 1fr;max-width:1440px;margin:0 auto;min-height:560px}
.mega__label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;line-height:14px;text-transform:uppercase;color:var(--label)}
.mega__concerns{grid-row:1/3;display:flex;flex-direction:column;gap:18px;padding:48px 36px 44px 50px;border-right:1px solid var(--line)}
.mega__concerns ul{display:grid;gap:2px;margin-inline:-14px}
.mega__concern{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 14px;border:0;border-radius:6px;background:none;color:var(--muted);font-family:var(--display);font-size:26px;line-height:32px;letter-spacing:-.01em;text-align:left;transition:background-color .25s var(--ease-ui),color .25s var(--ease-ui)}
.mega__concern svg{flex:none;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.4;opacity:0;transition:opacity .25s}
.mega__concern:hover,.mega__concern.is-active{color:var(--navy)}
.mega__concern.is-active{background:var(--cream)}
.mega__concern.is-active svg{opacity:1}
.mega__view-all,.mega__all{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-bottom:4px;color:var(--navy);font-size:15px;font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat}
.mega__view-all svg,.mega__all svg,.mega__cta a svg,.drop__item svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .35s var(--ease-out)}
.mega__view-all:hover svg,.mega__all:hover svg,.mega__cta a:hover svg{transform:translateX(4px)}
.mega__panel{grid-column:2/4;grid-row:1;display:grid;grid-template-columns:400px minmax(0,1fr)}
.mega__panel[hidden]{display:none}
.mega__panel.is-entering{animation:rise .45s var(--ease-out) both}
.mega__overview{display:flex;flex-direction:column;gap:14px;padding:48px 40px 36px}
.mega__overview img{width:100%;aspect-ratio:320/210;object-fit:cover;border-radius:6px;margin-top:6px}
.mega__overview h3{margin-top:12px;font-family:var(--display);font-size:36px;font-weight:400;line-height:38px;letter-spacing:-.01em;color:var(--navy)}
.mega__overview p:not(.mega__label){font-size:15px;line-height:23px;color:var(--muted)}
.mega__overview .mega__all{margin-top:8px}
.mega__treatments{padding:48px 50px 24px 24px}
.mega__treatments ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px;margin-top:22px}
.mega__treatment h4{font-family:var(--display);font-size:28px;font-weight:400;line-height:32px;letter-spacing:-.01em}
.mega__treatment h4 a{color:var(--navy);text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .45s var(--ease-out)}
.mega__treatment h4 a:hover{background-size:100% 1px}
.mega__treatment p{margin-top:8px;font-size:15px;line-height:23px;color:var(--muted)}
.mega__tag{display:inline-block;margin-top:12px;padding:4px 8px;border-radius:4px;background:var(--cream);font-size:12px;font-weight:600;line-height:16px;color:var(--navy)}
.mega__cta{grid-column:3;grid-row:2;align-self:end;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 50px 44px 24px;padding:26px 28px;border-radius:6px;background:var(--navy);color:var(--cream-dim)}
.mega__cta-title{font-family:var(--display);font-size:28px;line-height:32px;color:var(--cream)}
.mega__cta p:not(.mega__cta-title){margin-top:6px;font-size:14px;line-height:21px}
.mega__cta a{flex:none;display:inline-flex;align-items:center;gap:10px;padding-bottom:4px;color:var(--cream);font-size:16px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
/* Our Story menu: a compact panel under its link */
.drop{left:clamp(200px,16.4vw,236px);width:440px;padding:24px 14px 22px;box-shadow:0 18px 40px rgba(10,16,48,.22)}
.drop>.mega__label{padding:0 14px 10px}
.drop__item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border-radius:6px;color:var(--navy);text-decoration:none;transition:background-color .25s var(--ease-ui)}
.drop__item+.drop__item{box-shadow:0 -1px 0 var(--line)}
.drop__item:hover{background:var(--cream);box-shadow:none}
.drop__item:hover+.drop__item{box-shadow:none}
.drop__item>span{display:grid;gap:4px}
.drop__item strong{font-family:var(--display);font-size:25px;font-weight:400;line-height:28px;letter-spacing:-.01em}
.drop__item>span>span{font-size:14px;line-height:20px;color:var(--muted)}
.drop__item svg{width:10px;height:10px;opacity:.5}
.drop__item:hover svg{opacity:1;transform:translateX(3px)}
.drop__visit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 14px 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:18px;color:var(--muted)}
.drop__visit a{color:var(--navy);font-weight:600;white-space:nowrap}
/* The page dims behind an open menu */
.drop-backdrop{position:fixed;inset:0;z-index:49;background:rgba(10,16,48,.45);opacity:0;transition:opacity .3s var(--ease-ui)}
.drop-backdrop.is-open{opacity:1}
.masthead__brand{display:block}
.masthead__brand img{width:218px;transition:width .4s var(--ease-out)}
.masthead.is-scrolled .masthead__brand img{width:190px}
.masthead__book{display:inline-flex;align-items:center;gap:10px;padding-bottom:6px;border-bottom:1px solid currentColor;font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:20px;text-decoration:none;white-space:nowrap}
.masthead__book svg,.intro__explore svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .35s var(--ease-out)}
.masthead__book:hover svg,.intro__explore:hover svg{transform:translateX(4px)}
.masthead__call{flex:none;width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(245,240,232,.85);border-radius:50%;transition:background-color .3s var(--ease-ui),color .3s var(--ease-ui)}
.masthead__call:hover{background:var(--cream);color:var(--navy)}
.masthead__call svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}

/* Mobile menu */
/* Mobile menu: navy, like the header it opens from. A pinned top bar and booking band, the links scrolling between.
   Treatments and About open in place; the panel height animates through a 0fr to 1fr grid row. */
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--navy);color:var(--cream);opacity:0;transition:opacity .35s var(--ease-ui)}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu__top{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;padding-inline:var(--gutter);border-bottom:1px solid rgba(245,240,232,.12)}
.menu__close{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;color:var(--cream);font-size:16px;font-weight:500;letter-spacing:-.02em}
.menu__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.menu__crest{display:block;width:48px}
.menu__crest img{display:block;width:100%;height:auto}
.menu__call{justify-self:end;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(245,240,232,.85);border-radius:50%;color:var(--cream)}
.menu__call svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.menu__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 0 32px}
.menu__nav{display:flex;flex-direction:column;padding-inline:var(--gutter)}
.menu .menu__nav>*+*{border-top:1px solid rgba(201,180,143,.28)}
.menu .menu__nav>:last-child{border-bottom:1px solid rgba(201,180,143,.28)}
.menu__row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:72px;padding:0;border:0;background:none;color:var(--cream);font-family:var(--display);font-size:38px;font-weight:400;line-height:42px;letter-spacing:-.01em;text-align:left;text-decoration:none;transition:color .3s var(--ease-ui)}
.menu__arrow{flex:none;width:16px;height:16px;margin-right:10px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.menu__toggle{flex:none;display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(245,240,232,.3);border-radius:50%;transition:background-color .3s var(--ease-ui),border-color .3s var(--ease-ui),color .3s var(--ease-ui)}
.menu__toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.menu__toggle-v{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease-out)}
.menu__row[aria-expanded=true]{color:#e3c998}
.menu__row[aria-expanded=true] .menu__toggle{background:var(--cream);border-color:var(--cream);color:var(--navy)}
.menu__row[aria-expanded=true] .menu__toggle-v{transform:scaleY(0)}
.menu__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.menu__panel-inner{min-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .3s var(--ease-ui),visibility 0s .45s}
.menu__group.is-open .menu__panel{grid-template-rows:1fr}
.menu__group.is-open .menu__panel-inner{opacity:1;visibility:visible;transition:opacity .35s var(--ease-ui) .08s,visibility 0s}
.menu__label{font-size:12px;font-weight:600;letter-spacing:.18em;line-height:16px;text-transform:uppercase;color:var(--gold-light)}
.menu__panel .menu__label{padding:2px 0 8px}
.menu__concern{display:flex;align-items:center;gap:14px;min-height:56px;border-top:1px solid rgba(245,240,232,.08);color:var(--cream);font-size:16px;font-weight:500;letter-spacing:-.01em;text-decoration:none}
.menu__concern img{flex:none;width:38px;height:38px;border:1px solid rgba(201,180,143,.45);border-radius:50%;object-fit:cover}
.menu__concern span{flex:1}
.menu__chev{flex:none;width:10px;height:10px;fill:none;stroke:var(--gold-light);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.menu__all{display:inline-flex;align-items:center;gap:10px;margin:14px 0 22px;padding-bottom:4px;border-bottom:1px solid currentColor;color:var(--cream);font-size:15px;font-weight:600;text-decoration:none}
.menu__all svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.menu__pages{padding-bottom:18px}
.menu__pages a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:14px 0;border-top:1px solid rgba(245,240,232,.08);color:var(--cream);text-decoration:none}
.menu__pages strong{font-family:var(--display);font-size:25px;font-weight:400;line-height:28px}
.menu__pages span{grid-column:1;font-size:14px;line-height:20px;color:var(--cream-dim)}
.menu__pages .menu__chev{grid-column:2;grid-row:1/3}
/* Concern shortcuts: a row you swipe, hidden while Treatments is open (its full list is showing) */
.menu__shortcuts{padding-top:40px}
.menu__shortcuts .menu__label{padding-inline:var(--gutter)}
.menu.has-treatments .menu__shortcuts{display:none}
.menu__rail{display:flex;gap:14px;margin-top:16px;padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.menu__rail::-webkit-scrollbar{display:none}
.menu__short{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:72px;scroll-snap-align:start;color:var(--cream-dim);font-size:12px;font-weight:500;line-height:15px;text-align:center;text-decoration:none}
.menu__short img{width:64px;height:64px;border:1px solid rgba(201,180,143,.5);border-radius:50%;object-fit:cover}
/* The booking band */
.menu__foot{flex:none;display:grid;gap:14px;padding:22px var(--gutter) calc(26px + env(safe-area-inset-bottom));background:#0f1a45;border-top:1px solid rgba(201,180,143,.22)}
.menu__status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;font-size:14px;line-height:20px;color:var(--cream-dim)}
.menu__status p:first-child{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--cream)}
.menu__dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 0 4px rgba(201,180,143,.18)}
.menu__book{display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 22px 0 24px;border-radius:6px;background:var(--cream);color:var(--navy);font-size:15px;font-weight:600;text-decoration:none}
.menu__book svg,.menu__actions svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.menu__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu__actions a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border:1px solid rgba(245,240,232,.35);border-radius:6px;color:var(--cream);font-size:14px;font-weight:600;text-decoration:none}
.menu__actions svg{width:11px;height:11px}
/* Opening: the rows, shortcuts and band rise in turn */
.menu__nav>*,.menu__shortcuts,.menu__foot{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.menu.is-open .menu__nav>*,.menu.is-open .menu__shortcuts,.menu.is-open .menu__foot{opacity:1;transform:none}
.menu.is-open .menu__nav>:nth-child(2){transition-delay:.05s}
.menu.is-open .menu__nav>:nth-child(3){transition-delay:.1s}
.menu.is-open .menu__nav>:nth-child(4){transition-delay:.15s}
.menu.is-open .menu__shortcuts{transition-delay:.2s}
.menu.is-open .menu__foot{transition-delay:.12s}

/* Hero: the consultation footage running to the edges under a navy shade, the crest centred over it */
.hero{position:relative;height:max(100svh,560px);overflow:hidden;background:var(--section)}
.hero__media{position:absolute;inset:0;overflow:hidden;background:var(--section)}
.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* Dark under the masthead, easing to a light veil over the rest of the frame */
.hero__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--navy-deep) 4.5%,rgba(15,26,69,.81) 15%,rgba(15,26,69,.38) 42%)}
/* The foot of the video melts into the navy of the section below */
.hero__media::after{content:"";position:absolute;inset:auto 0 0;height:clamp(140px,24%,240px);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(21,35,89,0) 0%,rgba(21,35,89,.35) 35%,rgba(21,35,89,.77) 57%,var(--navy) 86%)}
.hero__logo{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 16px 60px;pointer-events:none}
/* No drop-shadow on the crest: Safari on iPhone paints a blurred, shadowed image as a white box. The gold light
   behind it does the job. */
.hero__crest{position:relative;width:clamp(160px,20vw,300px);height:auto}
/* A soft gold light behind the crest, which flares as it arrives and then settles */
.hero__logo::before{content:"";position:absolute;left:50%;top:calc(50% - 30px);width:min(70vmin,720px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,180,143,.32),rgba(201,180,143,.1) 45%,rgba(201,180,143,0));opacity:.5}
/* No drop-shadow on the crest: Safari on iPhone paints a blurred, shadowed image as a white box. The gold light
   behind it does the job. */
/* A soft gold light behind the crest, which flares as it arrives and then settles */

/* Welcome: the four promises and the headline over the textured navy frame (as behind Treatments), faded out under
   the hero, behind the headline and at the foot so it never competes with the type */
.welcome{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:var(--cream)}
.welcome::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/assets/treatments-bg.webp) center/100% 100% no-repeat}
.welcome::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--navy) 0,rgba(21,35,89,.6) 50px,rgba(21,35,89,0) 170px),linear-gradient(0deg,var(--navy) 0,rgba(21,35,89,0) 162px)}
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1080px;margin:0 auto;padding:32px clamp(20px,8.3vw,120px) 0}
.benefits li{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;font-size:20px;font-weight:500;line-height:27px}
.benefits svg{width:42px;height:42px;fill:none;stroke:var(--gold-light);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.intro{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:100px}
/* A soft pool of navy behind the headline */
.intro::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:min(1000px,100%);height:520px;translate:-50% -50%;pointer-events:none;opacity:.75;background:radial-gradient(closest-side,var(--navy) 0%,rgba(21,35,89,.9) 45%,rgba(21,35,89,.4) 70%,rgba(21,35,89,0) 100%)}
.intro h1{max-width:22ch;font-size:clamp(30px,3.6vw,52px);font-weight:400;line-height:1.15;letter-spacing:-.02em;color:var(--cream)}
.intro h1 em{font-style:normal;color:var(--gold-light)}
.intro__actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 28px;margin-top:44px}
.intro__book{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 22px 0 26px;border-radius:6px;background:#fff;color:var(--navy);font-size:15px;font-weight:600;line-height:18px;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease-ui),transform .18s var(--ease-ui)}
.intro__book:hover{background:var(--cream)}
.intro__book:active{transform:scale(.98)}
.intro__book svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .35s var(--ease-out)}
.intro__book:hover svg{transform:translate(3px,-3px)}
.intro__explore{display:inline-flex;align-items:center;gap:10px;padding-bottom:6px;border-bottom:1px solid currentColor;color:var(--cream);font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:20px;text-decoration:none;white-space:nowrap}
/* "or call" beside the other consultation buttons */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.cta-row--center{justify-content:center}
.or-call{font-size:15px;font-weight:600;color:var(--navy);white-space:nowrap}
.or-call--light{color:var(--cream)}
.form-panel__call{margin-top:14px;text-align:center}
.footer__cta:has(+.footer__call){border-bottom:0;padding-bottom:0}
.footer__call{padding-top:16px;padding-bottom:clamp(40px,5vw,56px);border-bottom:1px solid var(--line-light);margin-inline:var(--gutter);padding-inline:0}

/* Caption and pause control shared by the two videos */
.media-caption{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:64px clamp(18px,2.4vw,32px) clamp(18px,2.4vw,28px);background:linear-gradient(0deg,rgba(21,35,89,.55),rgba(21,35,89,0));color:var(--cream)}
.media-caption p{font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.12em}
/* The videos have no controls: hide the play button some phones draw over a video that hasn't started */
video::-webkit-media-controls,video::-webkit-media-controls-start-playback-button,video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}

/* Treatments: a row of concerns runs edge to edge and fades out at both ends; the arrows step through it, and the
   chosen concern moves to the middle. Its treatments sit below as cards. Phones: smaller circles, and the cards
   become a row you swipe. */
/* The top fades in from the navy above it, and the foot fades out into the cream of Real Patients below, in the
   extra space under the cards. --bg-wash lays navy over the textured image to quieten it: raise it to soften further. */
.treatments{--fade-top:380px;--fade-foot:240px;--bg-wash:.25;position:relative;padding-block:clamp(80px,8vw,120px) calc(clamp(80px,8vw,120px) + 150px);color:var(--cream);overflow:hidden;background:linear-gradient(180deg,var(--navy) 0,var(--navy) 12%,rgba(21,35,89,.86) 30%,rgba(21,35,89,.62) 50%,rgba(21,35,89,.34) 70%,rgba(21,35,89,.12) 87%,rgba(21,35,89,0) 100%) top/100% var(--fade-top) no-repeat,linear-gradient(0deg,var(--ground-fade)) bottom/100% var(--fade-foot) no-repeat,linear-gradient(rgba(21,35,89,var(--bg-wash)),rgba(21,35,89,var(--bg-wash))),url(/assets/treatments-bg.webp) center/100% 100% no-repeat,var(--section)}
.treatments__head{display:grid;justify-items:center;gap:clamp(26px,2.8vw,38px);text-align:center}
.treatments__head h2{font-size:clamp(46px,5.6vw,80px);line-height:.98;letter-spacing:-.03em}
.concerns{--tile:140px;--arrow:52px;margin-top:clamp(48px,5vw,64px)}
.concerns__rail-wrap{position:relative}
.concerns__rail{position:relative;display:flex;gap:44px;padding:6px calc(50% - var(--tile) / 2) 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 7%,#000 26%,#000 74%,transparent 93%,transparent);mask-image:linear-gradient(90deg,transparent 0,transparent 7%,#000 26%,#000 74%,transparent 93%,transparent)}
.concerns__rail::-webkit-scrollbar{display:none}
.concern{flex:none;width:var(--tile);display:grid;justify-items:center;gap:14px;padding:0;border:0;background:none;color:var(--cream-dim);scroll-snap-align:center;transition:color .3s var(--ease-ui)}
.concern__photo{width:var(--tile);height:var(--tile);border-radius:50%;object-fit:cover;transition:box-shadow .35s var(--ease-ui),transform .5s var(--ease-out)}
.concern__name{font-size:14px;font-weight:600;line-height:18px;white-space:nowrap}
.concern:hover{color:var(--cream)}
.concern:hover .concern__photo{transform:scale(1.04)}
.concern.is-active{color:var(--cream)}
.concern.is-active .concern__name{font-weight:700}
.concern.is-active .concern__photo{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--cream)}
.concern:focus-visible{outline:none}
.concern:focus-visible .concern__photo{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--gold-light)}
.concerns__arrow{position:absolute;top:calc(6px + var(--tile) / 2 - var(--arrow) / 2);z-index:1;display:grid;place-items:center;width:var(--arrow);height:var(--arrow);padding:0;border:1px solid rgba(245,240,232,.55);border-radius:50%;background:transparent;color:var(--cream);transition:background-color .3s var(--ease-ui),border-color .3s var(--ease-ui)}
.concerns__arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .35s var(--ease-out)}
.concerns__arrow--prev{left:var(--gutter)}
.concerns__arrow--prev:hover{background:rgba(245,240,232,.1);border-color:var(--cream)}
.concerns__arrow--prev:hover svg{transform:translateX(-3px)}
.concerns__arrow--next{right:var(--gutter);background:var(--cream);border-color:var(--cream);color:var(--navy)}
.concerns__arrow--next:hover{background:#fff}
.concerns__arrow--next:hover svg{transform:translateX(3px)}
.concerns__arrow:active{scale:.94}
html:not(.js) .concerns__arrow{display:none}
.concerns__panels{margin-top:clamp(40px,4vw,56px)}
.concern-panel{padding-top:44px;border-top:1px solid rgba(245,240,232,.18);outline:none}
.concern-panel+.concern-panel{margin-top:56px}
.js .concern-panel+.concern-panel{margin-top:0}
.js .concern-panel:not(.is-active){display:none}
.concern-panel__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 48px;margin-bottom:40px}
.concern-panel__title{font-family:var(--display);font-size:clamp(40px,3.9vw,56px);font-weight:400;line-height:1;letter-spacing:-.02em}
.concern-panel__head .text-link{margin-bottom:8px}
.concern-panel__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.treatment-card{display:flex;flex-direction:column;overflow:hidden;border-radius:6px;background:var(--cream);color:var(--ink);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.treatment-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px rgba(6,12,38,.35)}
.treatment-card__photo{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}
.treatment-card__body{display:flex;flex:1;flex-direction:column;gap:12px;padding:26px 28px 28px}
.treatment-card h4{font-size:22px;font-weight:600;line-height:28px;letter-spacing:-.02em;color:var(--navy)}
.treatment-card p{flex:1;font-size:15px;line-height:24px;color:var(--muted)}
.treatment-card p a{color:var(--navy);font-weight:600}
.treatment-card__link{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding-bottom:4px;color:var(--navy);text-decoration:none;font-size:15px;font-weight:600;line-height:20px;background:linear-gradient(currentColor,currentColor) left bottom/calc(100% - 24px) 1px no-repeat}
.treatment-card__link svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .35s var(--ease-out)}
.treatment-card__link .button__arrow{width:14px;line-height:1}
.treatment-card__link:hover svg{transform:translate(3px,-3px)}
.treatment-card__link:hover .button__arrow{transform:translateX(4px)}
.treatment-card__links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:8px}
.treatment-card__links .treatment-card__link{margin-top:0}
.treatment-card__more{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;color:var(--navy);text-decoration:none;font-size:15px;font-weight:500;line-height:20px;background:linear-gradient(rgba(21,35,89,.35),rgba(21,35,89,.35)) left bottom/calc(100% - 22px) 1px no-repeat}
.treatment-card__more svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .35s var(--ease-out)}
.treatment-card__more:hover svg{transform:translateX(4px)}
.concern-panel.is-entering .concern-panel__head,.concern-panel.is-entering .treatment-card{animation:rise .6s var(--ease-out) both}
.concern-panel.is-entering .treatment-card{animation-delay:calc(var(--i,1) * 90ms)}
.treatment-card:nth-child(2){--i:2}
.treatment-card:nth-child(3){--i:3}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes line{from{transform:scaleX(0)}}

/* Real Patients: the heading and buttons over a row of tall photographs that runs off the right edge. The arrows
   page through it, the dashes follow along, and phones swipe it. */
.real{background:var(--ground);padding-block:clamp(72px,7vw,100px);overflow:hidden}
.real h2{font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.04em;color:var(--navy)}
.real__actions{grid-area:actions;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px}
.real__book{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 22px 0 26px;border-radius:6px;background:var(--navy);color:#fff;font-size:15px;font-weight:600;line-height:18px;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease-ui),transform .18s var(--ease-ui)}
.real__book:hover{background:var(--navy-hover)}
.real__book:active{transform:scale(.98)}
.real__book svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .35s var(--ease-out)}
.real__book:hover svg{transform:translate(3px,-3px)}
.intro__explore.real__explore{color:var(--navy)}
.real__track{display:flex;gap:20px;margin-top:48px;padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
.real__track::-webkit-scrollbar{display:none}
/* The row fades out at both edges of the screen */
.real__track{--fade:var(--gutter);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
.real__card{position:relative;flex:0 0 300px;aspect-ratio:300/460;overflow:hidden;border-radius:6px;background:var(--cream-dim);scroll-snap-align:start}
.real__card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.real__card:hover img{transform:scale(1.03)}
.real__card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,26,60,.15) 0%,rgba(14,26,60,0) 30%,rgba(14,26,60,0) 60%,rgba(14,26,60,.35) 100%)}
/* Under the row: the dashes and arrows, then the two buttons centred. Desktop (below) moves the buttons up beside
   the heading, as in the design. */
.real__controls{display:grid;grid-template-columns:1fr auto;grid-template-areas:"dots nav" "actions actions";align-items:center;gap:32px 16px;margin-top:48px}
.real__dots{grid-area:dots;display:flex;gap:8px}
.real__nav{grid-area:nav;justify-self:end;gap:10px}
.real__nav .rail-nav__arrow{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.real__nav .rail-nav__arrow:hover:not(:disabled){background:var(--navy-hover);border-color:var(--navy-hover)}
.real__nav .rail-nav__arrow:disabled{opacity:1;background:none;border-color:rgba(21,35,89,.2);color:rgba(21,35,89,.4)}
.real__nav .rail-nav__arrow svg{width:16px;height:16px;stroke-width:1.5}
@media (min-width:901px){
  .real{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title actions" "track track" "dots nav" "reviews reviews";align-items:end}
  .reviews{grid-area:reviews}
  .real__title{grid-area:title;padding-right:0}
  .real__track{grid-area:track}
  .real__controls{display:contents}
  .real__actions{padding:0 var(--gutter) 8px 40px}
  .real__dots,.real__nav{align-self:center;margin-top:48px}
  .real__dots{padding-left:var(--gutter)}
  .real__nav{padding-right:var(--gutter)}
}
/* Google reviews: under the photographs, a strip of review cards that drifts left on a loop, edge to edge. It
   pauses on hover or keyboard focus and while it's off screen. The script repeats the cards so the loop has no seam; with reduced motion it stays still and swipes instead. */
.reviews{margin-top:clamp(28px,3vw,44px)}
.reviews__head{display:flex;justify-content:flex-end}
.reviews__summary{display:inline-flex;align-items:center;gap:12px;color:var(--navy);text-decoration:none;font-size:14px;font-weight:600}
.reviews__score{font-family:var(--display);font-size:30px;font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.reviews__stars svg,.review-card__stars svg{display:block;width:88px;height:15px;fill:var(--gold)}
.review-card__stars svg{fill:var(--gold-light)}
.reviews__count{color:var(--muted);font-weight:500;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .45s var(--ease-out)}
.reviews__summary:hover .reviews__count{background-size:100% 1px}
.reviews__arrow{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .35s var(--ease-out)}
.reviews__summary:hover .reviews__arrow{transform:translate(3px,-3px)}
.reviews__marquee{margin-top:14px;overflow:hidden}
/* Each card carries its own right margin, so two copies of the list are exactly twice one copy's width */
.reviews__track{display:flex;width:max-content;padding-block:4px}
.reviews__marquee.is-looping .reviews__track{animation:reviews-loop var(--loop,90s) linear infinite}
.reviews__marquee.is-looping:hover .reviews__track,.reviews__marquee.is-looping:focus-within .reviews__track,.reviews__marquee.is-paused .reviews__track{animation-play-state:paused}
@keyframes reviews-loop{to{transform:translateX(-50%)}}
/* Cards follow the treatment cards (the name as the title, quieter copy, an underlined link out), in navy */
.review-card{flex:none;display:flex;flex-direction:column;gap:12px;width:clamp(290px,27vw,380px);margin:14px 20px 26px 0;padding:26px 28px 28px;border-radius:6px;background:var(--navy);color:var(--cream);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.review-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(21,35,89,.28)}
.review-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.review-card__g{flex:none;width:18px;height:18px}
.review-card__body{display:flex;flex:1;flex-direction:column;gap:12px;margin:0}
.review-card__name{font-size:22px;font-weight:600;line-height:28px;letter-spacing:-.02em;color:var(--cream)}
.review-card__quote{flex:1;margin:0}
.review-card__quote p{font-size:15px;line-height:24px;color:rgba(245,240,232,.78);text-wrap:pretty}
.review-card__link{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding-bottom:4px;color:var(--cream);text-decoration:none;font-size:15px;font-weight:600;line-height:20px;background:linear-gradient(currentColor,currentColor) left bottom/calc(100% - 24px) 1px no-repeat}
.review-card__link svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .35s var(--ease-out)}
.review-card__link:hover svg{transform:translate(3px,-3px)}
@media (prefers-reduced-motion:reduce){
  .reviews__marquee{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .reviews__marquee::-webkit-scrollbar{display:none}
  .reviews__track{padding-inline:var(--gutter);animation:none!important}
  .review-card{scroll-snap-align:center}
}
@media (max-width:600px){
  .reviews{margin-top:64px}
  .reviews__head{justify-content:center}
  .reviews__score{font-size:26px}
  .review-card{width:min(300px,78vw);padding:22px 22px 24px}
  .review-card:hover{transform:none;box-shadow:none}
  .review-card__name{font-size:20px;line-height:26px}
}
.rail-nav__arrow:active:not(:disabled){transform:scale(.92)}

/* How it works: a gold line fills as you scroll, each step lights up, and a pinned scene plays for it */
/* Navy, like the other dark sections, fading into the cream sections above and below it */
.how{--fade:150px;--how-ground:#102561;color:var(--cream);background:linear-gradient(180deg,var(--ground-fade)) top/100% var(--fade) no-repeat,linear-gradient(0deg,var(--ground-fade)) bottom/100% var(--fade) no-repeat,var(--how-ground)}
.how{position:relative;isolation:isolate}
/* The embossed leaf frame fills the solid navy between the fades. Its corners keep their shape at any size; only
   the straight edges and the texture stretch to fit. */
/* A fine grain over the navy, between the fades */
.how::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background:url(/assets/home/grain.webp) 0 0/256px 256px repeat}
.how__inner{max-width:1440px;margin:0 auto;padding-block:200px;padding-inline:max(var(--gutter),calc((100% - 1200px) / 2))}
.how__head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:80px}
.how__head h2{font-size:64px;line-height:1;color:var(--cream)}
.how__book{display:inline-flex;align-items:center;gap:22px;height:54px;padding:0 24px 0 29px;border-radius:6px;background:var(--cream);color:var(--navy);font-size:15px;font-weight:600;line-height:18px;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease-ui),transform .18s var(--ease-ui)}
.how__book:hover{background:#fff}
.how__book:active{transform:scale(.98)}
.how__book svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .35s var(--ease-out)}
.how__book:hover svg{transform:translateX(4px)}
.how__book--phone,.how__dots{display:none}
/* Three arched photographs, the middle one set lower */
.how__steps{display:grid;grid-template-columns:repeat(3,minmax(0,352px));justify-content:space-between;align-items:start;gap:24px}
.how-step{display:flex;flex-direction:column;min-width:0}
.how-step:nth-child(2){padding-top:64px}
/* The photo is placed absolutely inside the arch. As a normal child, Safari took its natural 1084px height as the
   arch's minimum and, through the aspect ratio, made the card about 840px wide on phones. */
.how-step__arch{--inset:9px;position:relative;aspect-ratio:352/488;border:1px solid rgba(201,180,143,.6);border-radius:176px 176px 6px 6px;margin-bottom:32px}
/* Same guard for the other swiped cards: the card's own width wins, never its photograph's */
.real__card,.treatment-card,.insta-post{min-width:0}
.how-step__arch img{position:absolute;inset:var(--inset);width:calc(100% - var(--inset) * 2);height:calc(100% - var(--inset) * 2);object-fit:cover;border-radius:167px 167px 2px 2px}
.how-step__num{padding-left:4px;font-family:var(--display);font-size:40px;font-style:italic;line-height:44px;color:var(--gold-light)}
.how-step h3{margin-top:12px;padding-left:4px;font-family:var(--display);font-size:26px;font-weight:500;line-height:30px;color:var(--cream)}
.how-step p:not(.how-step__num){max-width:300px;margin-top:12px;padding-left:4px;color:var(--cream-dim);font-size:16px;line-height:26px}
@keyframes fade-in{to{opacity:1}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}

/* Offer card: a small, non-modal card in the bottom-right corner. Global fonts only. */
.offer:focus{outline:none}
.offer-link{padding:0 0 3px;border:0;background-color:transparent;font:inherit;color:inherit;text-align:inherit}
.offer{--offer-gold:#dbb05f;position:fixed;inset:auto 24px 24px auto;z-index:45;width:min(360px,calc(100% - 32px));max-width:none;margin:0;padding:0;border:0;background:none;color:var(--ink);overflow:visible}
.offer__card{position:relative;padding:26px 24px 20px;border-radius:8px;background:#fff;border:1px solid rgba(21,35,89,.1);box-shadow:0 24px 60px -20px rgba(10,15,40,.45),0 2px 6px rgba(14,22,56,.1);opacity:0;transform:translateY(24px);transition:opacity .45s var(--ease-ui),transform .6s var(--ease-out)}
.offer.is-open .offer__card{opacity:1;transform:none}
.offer__close{position:absolute;top:14px;right:14px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid rgba(21,35,89,.18);border-radius:6px;background:none;color:var(--navy);transition:background-color .25s,border-color .25s}
.offer__close:hover{background:rgba(21,35,89,.05);border-color:rgba(21,35,89,.35)}
.offer__close svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5}
.offer__title{padding:0 40px 0 0;font-family:var(--sans);font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--navy)}
.offer__big{display:block;margin-bottom:6px;font-family:var(--display);font-size:76px;font-weight:500;line-height:.9;letter-spacing:-.02em}
.offer__text{padding-top:10px;font-size:14px;font-weight:500;line-height:21px;color:var(--muted)}
.offer__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-top:18px}
.offer__claim{flex:none;height:50px;display:flex;align-items:center;gap:16px;padding:0 6px 0 20px;border-radius:6px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;line-height:18px;text-decoration:none;transition:background-color .35s var(--ease-ui)}
.offer__claim:hover{background:var(--navy-hover)}
.offer__claim-arrow{width:38px;height:38px;display:grid;place-items:center;border-radius:4px;background:var(--offer-gold)}
.offer__claim-arrow svg{width:13px;height:13px;fill:none;stroke:var(--navy);stroke-width:1.7;transition:transform .35s var(--ease-out)}
.offer__claim:hover .offer__claim-arrow svg{transform:translate(2px,-2px)}
.offer__decline{padding:0 0 2px;border:0;border-bottom:1px solid rgba(21,35,89,.35);background:none;font-size:13px;font-weight:600;line-height:18px;color:var(--navy);transition:border-color .25s}
.offer__decline:hover{border-color:var(--navy)}
.offer__terms{margin-top:16px;padding-top:14px;border-top:1px solid rgba(21,35,89,.1);font-size:11px;font-weight:500;line-height:16px;color:#6b717b}
.offer-tab{position:fixed;right:24px;bottom:24px;z-index:41;display:flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 14px;border:1px solid rgba(21,35,89,.1);border-radius:8px;background:#fff;box-shadow:0 16px 40px rgba(14,22,56,.16),0 2px 6px rgba(14,22,56,.1);font-size:13px;font-weight:500;line-height:18px;color:var(--navy);animation:offer-tab-in .5s var(--ease-out) both;transition:transform .25s var(--ease-ui)}
.offer-tab:hover{transform:translateY(-2px)}
.offer-tab strong{font-weight:600}
.offer-tab[hidden],.book-bar__offer[hidden]{display:none}
.offer-tab__tag,.book-bar__offer-tag{flex:none;width:16px;height:16px;fill:none;stroke:#b8913f;stroke-width:1.4;stroke-linejoin:round}
.book-bar__offer{display:none}
@keyframes offer-tab-in{from{opacity:0;transform:translateY(16px)}}
/* Below 1180px the corner tab would crowd the centred booking bar, so the offer moves into the bar */
@media (max-width:1180px){
  .offer-tab{display:none}
  .book-bar__offer:not([hidden]){position:absolute;left:0;right:0;bottom:calc(100% - 12px);z-index:-2;display:flex;align-items:center;gap:8px;height:56px;padding:0 18px 12px;border:1px solid rgba(21,35,89,.1);border-radius:10px;background:#fff;box-shadow:0 10px 30px rgba(14,22,56,.12);font-size:12px;font-weight:500;line-height:1;color:var(--navy);white-space:nowrap;animation:offer-tab-in .5s var(--ease-out) both}
  .book-bar__offer strong{font-weight:700}
  .book-bar__offer-cta{margin-left:auto;padding-bottom:2px;border-bottom:1px solid rgba(21,35,89,.35);font-weight:600}
}
@media (max-width:860px){
  .offer{inset:auto 16px calc(84px + env(safe-area-inset-bottom)) 16px;width:auto}
  .offer__card{padding:20px 18px 16px}
  .offer__title{font-size:16px}
  .offer__big{font-size:60px}
  .offer__claim{flex:1;justify-content:space-between}
}

/* The clinic */
.clinic{display:grid;grid-template-columns:1fr 1fr;min-height:min(92vh,900px);background:var(--ground)}
/* The video sits flush to the left edge of the page, rounded on its right corners */
.clinic__media{position:relative;overflow:hidden;background:var(--navy);min-height:420px;border-radius:0 6px 6px 0}
.clinic__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clinic .media-caption{padding-top:120px;padding-bottom:92px;background:linear-gradient(0deg,rgba(21,35,89,.5) 40%,rgba(21,35,89,0))}

/* About us: the team photograph in a gold frame with two smaller photographs around it, the copy beside them, all
   on the cream paper texture */
.about{position:relative;isolation:isolate;overflow:hidden;background:var(--ground)}
.about::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/assets/home/pattern-cream.webp) center/100% 100% no-repeat}
.about::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--ground) 0,rgba(245,240,232,.6) 56px,rgba(245,240,232,0) 140px),linear-gradient(0deg,var(--ground) 0,rgba(245,240,232,.6) 56px,rgba(245,240,232,0) 140px)}
.about__inner{display:grid;grid-template-columns:720px minmax(0,440px);justify-content:space-between;align-items:center;gap:40px;max-width:1440px;margin:0 auto;padding-block:140px;padding-left:88px;padding-right:120px}
.about__collage{position:relative;height:860px}
.about__main{position:absolute;left:214px;top:20px;width:506px;aspect-ratio:1122/1402;margin:0}
.about__team{position:absolute;left:19.6%;top:16.6%;width:60.4%;height:66.6%;object-fit:cover;object-position:48% 50%}
.about__frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.about__small{position:absolute;object-fit:cover;border-radius:6px;box-shadow:0 14px 30px rgba(21,35,89,.16)}
.about__small--a{left:0;top:210px;width:196px;height:252px;object-position:50% 30%}
.about__small--b{left:40px;top:690px;width:340px;height:170px;object-position:50% 40%}
.about__copy h2{font-size:56px;line-height:58px;color:var(--ink)}
.about__copy h2 em{display:block;color:var(--gold)}
.about__copy p{margin-top:28px;font-size:17px;line-height:28px;color:var(--muted)}
.about__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:36px}
[data-parallax]{will-change:transform}
[data-blur]{will-change:transform,filter,opacity}
.clinic__story{align-self:center;padding-block:clamp(72px,8vw,120px);max-width:680px}
.clinic__story h2{margin:0 0 26px}
.clinic__story>p:not(.label){font-size:17px;color:var(--muted);max-width:46ch;margin-bottom:16px}
.clinic__engraving{margin-top:34px;max-width:420px}
.clinic__engraving img{width:100%;border-radius:6px;mix-blend-mode:multiply}
.clinic__engraving figcaption{margin-top:10px;font-size:13px;color:var(--muted)}

/* Questions */
/* FAQ: navy, lit by a candle sconce on the wall to the left. The 1892 engraving of the bank sits faintly behind the
   questions, clearest near the candles. The section fades in from the cream above. */
.faq{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:var(--cream)}
.faq::after{content:"";position:absolute;inset:0 0 auto;height:300px;z-index:0;pointer-events:none;background:linear-gradient(180deg,#f5f0e8 0,rgba(245,240,232,.94) 10%,rgba(245,240,232,.82) 20%,rgba(245,240,232,.66) 30%,rgba(245,240,232,.5) 40%,rgba(245,240,232,.35) 50%,rgba(245,240,232,.22) 60%,rgba(245,240,232,.12) 70%,rgba(245,240,232,.05) 80%,rgba(245,240,232,.015) 90%,rgba(245,240,232,0) 100%)}
.faq__scene{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--navy)}
/* The candlelight, engraving and sconce fade into the plain navy of the booking section below */
.faq__scene::after{content:"";position:absolute;inset:auto 0 0;height:260px;background:linear-gradient(0deg,var(--navy) 0,rgba(21,35,89,.94) 12%,rgba(21,35,89,.8) 26%,rgba(21,35,89,.58) 42%,rgba(21,35,89,.34) 60%,rgba(21,35,89,.14) 78%,rgba(21,35,89,0) 100%)}
.faq__engraving{position:absolute;left:30%;top:215px;width:1000px;max-width:70%;aspect-ratio:900/572;opacity:.08;background:url(/assets/home/engraving-cream.webp) center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.25) 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 52%,transparent 86%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.25) 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 52%,transparent 86%);-webkit-mask-composite:source-in;mask-composite:intersect}
.faq__wash{position:absolute;left:-720px;top:-63px;width:2000px;height:1100px;background:radial-gradient(ellipse at 40% 33%,rgba(255,186,105,.19) 0%,rgba(255,186,105,.1) 22%,rgba(255,186,105,.04) 42%,rgba(255,186,105,0) 62%);-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 12%,rgba(0,0,0,.35) 24%,#000 40%);mask-image:linear-gradient(180deg,transparent 0,transparent 12%,rgba(0,0,0,.35) 24%,#000 40%)}
.sconce{position:absolute;left:-14px;top:330px;width:288px;aspect-ratio:600/908}
.sconce>*{position:absolute}
.sconce__body,.sconce__shadow{inset:0;width:100%;height:100%}
.sconce__shadow{translate:9px 26px}
.sconce__wash{top:-270px;width:220px;height:380px;background:radial-gradient(ellipse 50% 50% at 50% 66%,rgba(255,190,115,.34) 0%,rgba(255,180,105,.14) 35%,rgba(255,180,105,.04) 62%,rgba(255,180,105,0) 100%)}
.sconce__wash--left{left:-42px}
.sconce__wash--right{left:113px}
/* The flame clips: black backgrounds, screened so only the light shows. The still frame sits under each one. */
.sconce__flame{top:-80px;width:31px;height:101px;object-fit:cover;mix-blend-mode:screen}
.sconce__flame--left{left:52px}
.sconce__flame--right{left:207px}
.sconce__flame--right{transform:scaleX(-1)}
.sconce__flame--still{mix-blend-mode:normal;transition:opacity .6s var(--ease-ui)}
.sconce:has(video.is-playing) .sconce__flame--still{opacity:0}
video.sconce__flame{-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent);opacity:0;transition:opacity .6s var(--ease-ui)}
video.sconce__flame.is-playing{opacity:1}
[data-flicker]{transition:opacity .12s linear}
.faq__body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,683px);gap:40px;max-width:1440px;margin:0 auto;padding-block:304px 140px;padding-left:316px;padding-right:75px}
.faq__intro{align-self:start}
.faq__intro h2{margin:0 0 18px;color:#f6e6cb}
.faq__intro p{max-width:30ch;font-size:17px;color:#e3d3b8}
.faq__intro a{color:var(--cream)}
.faq__all{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:16px;font-weight:600;text-decoration:none}
.faq__all svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .35s var(--ease-out)}
.faq__all:hover svg{transform:translateX(4px)}
.faq__all--phone{display:none}
.accordion summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer}
.accordion summary::-webkit-details-marker{display:none}
.accordion__icon{position:relative;flex:none;width:18px;height:18px}
.accordion__icon::before,.accordion__icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .42s var(--ease-even)}
.accordion__icon::after{transform:rotate(90deg)}
.accordion[open]>summary .accordion__icon::after{transform:rotate(0)}
.accordion__body{overflow:hidden}
.faq-item{border-top:1px solid var(--line-light)}
.faq-item:last-child{border-bottom:1px solid var(--line-light)}
.faq-item summary{padding:22px 0;font-family:var(--serif);font-size:clamp(20px,1.6vw,23px);line-height:1.3;color:var(--cream)}
.faq-item:first-child summary{color:#f7ebd8}
.faq-item .accordion__icon{color:var(--gold-light)}
.faq-item summary>span:first-child{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .45s var(--ease-out)}
/* Hover only: on phones a tap leaves :hover stuck, which drew a stray underline under the question */
@media (hover:hover){.faq-item summary:hover>span:first-child{background-size:100% 1px}}
/* Phone numbers never break across lines */
a[href^="tel:"]{white-space:nowrap}
.faq-item .accordion__body p{color:var(--cream-dim);font-size:17px;max-width:60ch;margin-bottom:14px}
.faq-item .accordion__body p:last-child{margin-bottom:24px}
.faq-item .accordion__body a{color:var(--cream);font-weight:600}

/* Book: the form panel rises over a photograph of the consultation room */
/* Book: runs straight on from the navy FAQ above. A faint crest drifts behind the left column. */
.book{position:relative;isolation:isolate;overflow:hidden;background:var(--section);color:var(--cream)}
.book__crest{position:absolute;left:-30px;top:330px;z-index:-1;width:640px;opacity:.045;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 62%,transparent 92%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 62%,transparent 92%)}
.book__body{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,120px);align-items:start;padding-block:136px clamp(88px,9vw,140px)}
.book__intro h2{margin:0 0 30px}
.book .label{color:var(--gold-light)}
.book__intro>p:not(.label){color:var(--cream-dim);font-size:17px;max-width:40ch;margin-bottom:16px}
.service-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;border-block:1px solid var(--line-light);padding:18px 0;margin-bottom:28px}
.service-row__name{font-family:var(--serif);font-size:23px;color:var(--cream);margin-right:auto}
.service-row__meta{font-size:15px;font-weight:500;color:var(--cream-dim)}
.service-row__meta+.service-row__meta{padding-left:20px;border-left:1px solid var(--line-light)}
.book__today:empty{display:none}
.book__intro .book__today{font-family:var(--caps);font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--gold-light)}
.book__call a{color:var(--cream)}
.form-panel{border-radius:6px;position:relative;background:var(--card);color:var(--ink);padding:clamp(24px,3.6vw,52px);box-shadow:0 30px 70px rgba(0,0,0,.25)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:20px}
.field>label,.choices legend{display:block;font-size:15px;font-weight:600;margin-bottom:9px;color:var(--ink)}
.field input,.field textarea{display:block;width:100%;border:1px solid #cfc9bd;border-radius:6px;background:#fff;padding:13px 15px;font-size:16px;outline:none;transition:border-color .25s,box-shadow .25s}
.field input{height:52px}
.field textarea{resize:vertical;min-height:112px}
.field input::placeholder,.field textarea::placeholder{color:#6b7176}
.field input:focus,.field textarea:focus{border-color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.field [aria-invalid=true]{border-color:#9a3b3b}
.choices{border:0;padding:0;min-width:0}
.choices legend{padding:0;margin-bottom:12px}
.choices__hint{margin-left:6px;font-weight:400;color:var(--muted)}
.choices__list{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative}
.choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.choice span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid #cfc9bd;border-radius:6px;background:#fff;font-size:15px;line-height:1.2;transition:background-color .25s,color .25s,border-color .25s,transform .2s var(--ease-out)}
.choice:hover span{border-color:var(--navy)}
.choice input:checked+span{background:var(--navy);border-color:var(--navy);color:var(--cream);animation:pop .3s var(--ease-out)}
.choice input:checked+span::before{content:"\2713";margin-right:7px;font-size:13px}
.choice input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.choices[aria-invalid=true] .choice span{border-color:#9a3b3b}
@keyframes pop{50%{transform:scale(1.05)}}
.note-toggle{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:4px 0;margin:0 0 18px;font-size:15px;font-weight:600;color:var(--navy)}
.note-toggle span{display:inline-block;font-size:18px;font-weight:400;transition:transform .35s var(--ease-out)}
.note-toggle[aria-expanded=true] span{transform:rotate(45deg)}
.note[hidden]{display:none}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{color:#9a3b3b;font-size:14px;line-height:1.5;margin:0}
.form-status:not(:empty){margin:0 0 16px}
.button--submit{width:100%}
.button--submit:disabled{opacity:.7;cursor:wait;transform:none}
.form-panel__note{font-size:14px;color:var(--muted);margin-top:14px;text-align:center}
.form-success{display:flex;min-height:420px;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.form-success[hidden]{display:none}
.form-success__crest{width:48px;margin-bottom:20px}
.form-success__label{display:inline-flex;align-items:center;gap:10px;font-family:var(--caps);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--label)}
.form-success__tick{flex:none;width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.form-success__tick path{stroke-width:1.8}
.form-success h3{font-family:var(--display);font-size:36px;font-weight:500;color:var(--navy);margin:12px 0 8px;outline:none}
.form-success p:not(.form-success__label){color:var(--muted)}

/* Visit: the facade behind the details */
/* Overlaps the booking section by a pixel, so fractional screen scaling never opens a cream hairline between them */
.visit{position:relative;margin-top:-1px;background:var(--section);color:var(--cream);text-align:center;overflow:hidden}
.visit__photo{position:absolute;inset:0}
/* The photograph fades in from nothing at the top and out again at the foot, so the navy runs on unbroken into the
   sections either side */
.visit__photo img{width:100%;height:100%;object-fit:cover;opacity:.2;--fade:clamp(160px,18vw,280px);--mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) calc(var(--fade) * .25),rgba(0,0,0,.5) calc(var(--fade) * .45),rgba(0,0,0,.85) calc(var(--fade) * .75),#000 var(--fade),#000 calc(100% - var(--fade)),rgba(0,0,0,.85) calc(100% - var(--fade) * .75),rgba(0,0,0,.5) calc(100% - var(--fade) * .45),rgba(0,0,0,.15) calc(100% - var(--fade) * .25),transparent 100%);-webkit-mask-image:var(--mask);mask-image:var(--mask)}
.visit__inner{position:relative;padding-block:clamp(88px,10vw,140px)}
.visit h2{margin-bottom:clamp(44px,5vw,72px)}
.visit__columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1080px;margin:0 auto}
.visit__columns>div{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:16px}
.visit__columns h3{margin-bottom:10px}
.visit__columns a{color:var(--cream);overflow-wrap:anywhere}
.hours{width:100%;max-width:250px;font-size:15px;line-height:2}
.hours div{display:flex;justify-content:space-between;gap:16px;padding:0 10px}
.hours dt{color:var(--cream-dim)}
.hours .is-today{border-radius:6px;background:rgba(245,240,232,.1);color:#fff}
.hours .is-today dt{color:var(--gold-light)}

/* Instagram: a row of recent posts that scrolls sideways, filled from the Behold feed */
/* Instagram: cream between two navy sections, so the navy fades in at the top and back out at the foot. It overlaps
   the section above by a pixel, and the footer below drops its top line, so no seam shows at either edge. */
.insta{--fade:clamp(140px,16vw,240px);position:relative;margin-top:-1px;background:linear-gradient(180deg,var(--navy-fade)) top/100% var(--fade) no-repeat,linear-gradient(0deg,var(--navy-fade)) bottom/100% var(--fade) no-repeat,var(--ground);padding-block:calc(var(--fade) + clamp(40px,4vw,72px));overflow:hidden}
main:has(> .insta:last-child) + .footer{position:relative;margin-top:-1px;border-top:0}
.insta__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;padding-bottom:clamp(26px,3vw,40px);background:linear-gradient(var(--line),var(--line)) center bottom/calc(100% - 2 * var(--gutter)) 1px no-repeat}
.insta__head h2{font-size:clamp(34px,3.8vw,54px);overflow-wrap:anywhere}
.insta__head h2 a{color:var(--navy);text-decoration:none}
.insta__actions{display:flex;align-items:center;gap:28px}
.rail-nav{display:flex;gap:8px}
.rail-nav[hidden],.insta__track[hidden]{display:none}
.rail-nav__arrow{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:none;color:var(--navy);transition:background-color .3s,color .3s,border-color .3s,opacity .3s}
.rail-nav__arrow:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:var(--cream)}
.rail-nav__arrow:disabled{opacity:.35;cursor:default}
.rail-nav__arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.insta__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,21vw,300px);align-items:start;gap:clamp(12px,1.4vw,20px);margin-top:clamp(32px,4vw,52px);padding-bottom:clamp(28px,3vw,48px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
.insta__track::-webkit-scrollbar{display:none}
.insta-post{scroll-snap-align:start;opacity:0;transform:translateY(16px);animation:rise .7s var(--ease-out) forwards;animation-delay:calc(var(--n,0) * 70ms)}
.insta-post:nth-child(even){margin-top:clamp(28px,3vw,48px)}
.insta-post a{border-radius:6px;position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.insta-post img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.insta-post a:hover img{transform:scale(1.04)}
.insta-post__caption{position:absolute;inset:auto 0 0;padding:48px 16px 14px;background:linear-gradient(0deg,rgba(21,35,89,.88),rgba(21,35,89,0));color:var(--cream);font-size:13px;line-height:1.45;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease-ui),transform .45s var(--ease-out)}
.insta-post__caption span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.insta-post a:hover .insta-post__caption,.insta-post a:focus-visible .insta-post__caption{opacity:1;transform:none}
.insta-post__type{position:absolute;top:12px;right:12px;width:20px;height:20px;fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}

/* Footer */
.footer{background:var(--navy);color:var(--cream-dim);border-top:1px solid var(--line-light)}
.footer__cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:clamp(40px,5vw,64px);border-bottom:1px solid var(--line-light);text-decoration:none;color:var(--cream)}
.footer__cta-text{font-family:var(--serif);font-size:clamp(20px,2vw,30px);line-height:1.3;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .7s var(--ease-out)}
.footer__cta:hover .footer__cta-text{background-size:100% 1px}
.footer__cta-arrow{flex:none;width:clamp(44px,3.6vw,56px);aspect-ratio:1;border:1px solid var(--line-light);border-radius:50%;display:grid;place-items:center;font-size:20px;transition:transform .5s var(--ease-out),background-color .35s,color .35s}
.footer__cta:hover .footer__cta-arrow{transform:translateX(8px);background:var(--cream);color:var(--navy)}
.footer__main{display:flex;justify-content:space-between;gap:48px;padding-block:56px 52px;border-bottom:1px solid var(--line-light)}
.footer__brand{display:flex;flex-direction:column;gap:22px;max-width:400px}
.footer__wordmark{width:220px}
.footer__brand address{font-style:normal;font-size:15px;line-height:25px;color:var(--cream-dim)}
.footer__brand address a{color:inherit;text-decoration:none}
.footer__brand address a:hover{color:var(--cream)}
.footer__br{display:none}
.footer__columns{display:flex;gap:clamp(40px,6.6vw,96px)}
.footer__columns>div{width:170px}
.footer__label{margin-bottom:18px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;line-height:16px;text-transform:uppercase;color:var(--gold-light)}
.footer__columns ul{display:grid;gap:14px}
.footer__columns a,.footer__legal a{color:var(--cream);font-size:15px;line-height:22px;text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .45s var(--ease-out)}
.footer__columns a:hover{background-size:100% 1px}
.footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:28px 36px;font-size:14px}
.footer__legal ul{display:flex;flex-wrap:wrap;gap:12px 24px}
.footer__legal a{font-size:14px;background-size:100% 1px;background-image:linear-gradient(rgba(245,240,232,.5),rgba(245,240,232,.5));padding-bottom:2px}

/* Enquiry sent: a cream card, like the clinic's stationery, over the dimmed page for six seconds */
.sent{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(21,35,89,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;opacity:0}
.sent[hidden]{display:none}
.sent.is-playing{animation:sent-show .5s var(--ease-ui) forwards}
.sent.is-leaving{animation:sent-hide .6s var(--ease-even) forwards}
.sent__card{border-radius:6px;position:relative;width:min(520px,100%);padding:54px clamp(28px,6vw,60px) 42px;background:var(--cream);color:var(--ink);text-align:center;box-shadow:0 40px 90px rgba(0,0,0,.45);opacity:0;transform:translateY(28px) scale(.98)}
.sent__card::before{content:"";position:absolute;inset:11px;border:1px solid rgba(168,147,113,.6);pointer-events:none;clip-path:inset(50% 50%)}
.sent__crest{width:54px;margin:0 auto 22px;opacity:0;transform:scale(.9)}
.sent__label{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font-family:var(--caps);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--label);opacity:0}
.sent__tick{flex:none;width:22px;height:22px;fill:none;stroke:var(--gold);stroke-linecap:round;stroke-linejoin:round}
.sent__tick circle{stroke-width:1.3;stroke-dasharray:70;stroke-dashoffset:70;transform:rotate(-90deg);transform-origin:center}
.sent__tick path{stroke-width:1.8;stroke-dasharray:16;stroke-dashoffset:16}
.sent__title{font-family:var(--display);font-size:clamp(38px,5.6vw,52px);font-weight:500;line-height:1.1;color:var(--navy);margin-bottom:14px;opacity:0;transform:translateY(12px)}
.sent__title em{color:var(--label)}
.sent__text{max-width:34ch;margin:0 auto;font-size:16px;line-height:1.6;color:var(--muted);opacity:0}
.sent__flourish{width:170px;margin:28px auto 14px;clip-path:inset(0 50%)}
.sent__sign{font-family:var(--caps);font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--label);opacity:0}
.sent.is-playing .sent__card{animation:sent-card .9s var(--ease-out) .12s forwards}
.sent.is-playing .sent__card::before{animation:unfold-box 1.1s var(--ease-even) .45s forwards}
.sent.is-playing .sent__crest{animation:sent-crest .8s var(--ease-out) .4s forwards}
.sent.is-playing .sent__label{animation:fade-in .6s var(--ease-ui) .7s forwards}
.sent.is-playing .sent__tick circle{animation:tick .7s var(--ease-even) .75s forwards}
.sent.is-playing .sent__tick path{animation:tick .4s var(--ease-out) 1.3s forwards}
.sent.is-playing .sent__title{animation:sent-rise .8s var(--ease-out) .85s forwards}
.sent.is-playing .sent__text{animation:fade-in .8s var(--ease-ui) 1.05s forwards}
.sent.is-playing .sent__flourish{animation:unfold .9s var(--ease-out) 1.25s forwards}
.sent.is-playing .sent__sign{animation:fade-in .6s var(--ease-ui) 1.55s forwards}
.sent.is-leaving .sent__card{opacity:1;transform:none;animation:sent-card-out .6s var(--ease-even) forwards}
@keyframes sent-show{to{opacity:1}}
@keyframes sent-hide{from{opacity:1}to{opacity:0}}
@keyframes sent-card{to{opacity:1;transform:none}}
@keyframes sent-card-out{to{opacity:0;transform:translateY(-18px)}}
@keyframes sent-crest{to{opacity:1;transform:none}}
@keyframes sent-rise{to{opacity:1;transform:none}}
@keyframes unfold{to{clip-path:inset(0)}}
@keyframes unfold-box{to{clip-path:inset(0)}}

/* Booking bar. A white card rises into the bottom centre after the hero: the review count, the phone number and
   the treatment booking button. Phones (below): the review count drops out and the card spans the screen. */
.book-bar{position:fixed;left:0;right:0;bottom:24px;z-index:40;width:max-content;margin-inline:auto;display:flex;align-items:center;gap:22px;padding:8px 8px 8px 24px;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .4s var(--ease-ui),transform .55s var(--ease-out),visibility 0s .55s}
/* The bar's panel is a layer, so the promo panel can sit behind it and stack above */
.book-bar::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1px solid rgba(21,35,89,.1);border-radius:10px;box-shadow:0 16px 40px rgba(14,22,56,.16),0 2px 6px rgba(14,22,56,.1)}
.book-bar.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease-ui),transform .55s var(--ease-out)}
.book-bar__trust{display:grid;gap:4px;font-size:13px;font-weight:600;line-height:16px;color:var(--muted);white-space:nowrap}
.book-bar__stars{width:72px;height:12px;fill:#c9a24a}
.book-bar__rule{flex:none;width:1px;height:36px;background:rgba(21,35,89,.1)}
.book-bar__call{display:flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:20px;white-space:nowrap}
.book-bar__phone{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.book-bar__number,.book-bar__call-short{padding-bottom:4px;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat}
.book-bar__call:hover .book-bar__number,.book-bar__call:hover .book-bar__call-short{animation:redraw .6s var(--ease-out)}
.book-bar__call-short{display:none}
.book-bar__book{display:flex;align-items:center;gap:12px;height:56px;padding:0 22px 0 26px;border-radius:6px;background:var(--navy);color:#fff;text-decoration:none;font-size:15px;font-weight:600;line-height:18px;white-space:nowrap;transition:background-color .3s var(--ease-ui),transform .18s var(--ease-ui)}
.book-bar__book:hover{background:var(--navy-hover)}
.book-bar__book:active{transform:scale(.98)}
.book-bar__arrow{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .35s var(--ease-out)}
.book-bar__book:hover .book-bar__arrow{transform:translate(3px,-3px)}

/* Motion. Content is only hidden once the script has marked the page as ready to animate it. */
.js [data-reveal]:not([data-reveal=curtain]):not([data-reveal=draw]):not([data-reveal=split]){opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out) var(--d,0ms),transform .9s var(--ease-out) var(--d,0ms)}
.js [data-reveal].is-in:not([data-reveal=curtain]):not([data-reveal=draw]):not([data-reveal=split]){opacity:1;transform:none}
.js [data-reveal=curtain]{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease-out)}
.js [data-reveal=curtain] img,.js [data-reveal=curtain] video{scale:1.08;transition:scale 1.6s var(--ease-out)}
.js [data-reveal=curtain].is-in{clip-path:inset(0)}
.js [data-reveal=curtain].is-in img,.js [data-reveal=curtain].is-in video{scale:1}
.js [data-load]{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.js .is-ready [data-load]{opacity:1;transform:none}
/* Entrance: the crest arrives alone on navy, out of focus and close, then settles with a flare of gold light.
   The video, header and (on phones) the headline follow once it has landed. */
.js .hero__crest{opacity:0}
.js .hero__logo::before{opacity:0}
.js .is-ready .hero__crest{animation:crest-in 2.4s var(--ease-out) both}
.js .is-ready .hero__logo::before{animation:crest-glow 3s var(--ease-out) .2s both}
@keyframes crest-in{0%{opacity:0;transform:scale(1.45);filter:blur(22px)}45%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes crest-glow{0%{opacity:0;scale:.4}40%{opacity:1;scale:1.15}100%{opacity:.5;scale:1}}
.js .hero__media video{opacity:0;transition:opacity 1.6s var(--ease-ui) 1.4s,scale 2.4s var(--ease-out) 1.4s}
.js .hero__media video{scale:1.08}
.js .is-ready .hero__media video{opacity:1;scale:1}
.js .site-header{opacity:0;transform:translateY(-8px);transition:opacity .6s var(--ease-out) .6s,transform .6s var(--ease-out) .6s,background-color .4s var(--ease-ui),color .4s var(--ease-ui),box-shadow .4s var(--ease-ui)}
.js .is-ready .site-header{opacity:1;transform:none}
.js .masthead{opacity:0;transform:translateY(-8px);transition:opacity .8s var(--ease-out) 2s,transform .8s var(--ease-out) 2s,background-color .4s var(--ease-ui),box-shadow .4s var(--ease-ui)}
.js .is-ready .masthead{opacity:1;transform:none}
.split-word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .1em;margin:0 -.06em -.1em}
.split-word>span{display:inline-block}
.js [data-split] .split-word>span{transform:translateY(108%);transition:transform 1s var(--ease-out) calc(var(--i) * 45ms + 100ms)}
.js [data-split].is-in .split-word>span{transform:none}

/* Responsive */
/* Seven links either side of the wordmark: below this width they fold into the menu */
@media (max-width:1180px){.masthead__nav{display:none}.menu-toggle{display:inline-flex}}
@media (max-width:1060px){
}
@media (max-width:900px){
  .button--header{display:none}
  /* Phones: the four promises are desktop only. The video fills whatever the intro leaves of
     the first screen (--intro-h, set by the script), so the headline and both buttons show on load; the headline
     rises over the video's navy foot (--hero-overlap). The script fades the video out as the page scrolls. */
  :root{--hero-overlap:64px;--browser-ui:calc(env(safe-area-inset-bottom, 0px) + 56px);--intro-tail:92px}
  .benefits{display:none}
  /* Safari's floating toolbar sits over the foot of the screen, inside 100svh, so the video also gives up the
     home-indicator area and room for the toolbar (--browser-ui). The last of the intro's bottom padding
     (--intro-tail) runs below the fold, so the buttons sit just above the toolbar. */
  .hero{height:max(300px,calc(100svh - var(--intro-h,380px) + var(--hero-overlap) - var(--browser-ui) + var(--intro-tail) + 80px))}
  .hero__logo{bottom:var(--hero-overlap);padding:76px 16px 0}
  .hero__crest{width:clamp(132px,40vw,168px);max-height:calc(100% - 24px);object-fit:contain}
  /* The navy starts a few pixels inside the hero's navy foot, so a fractional hero height can't leave a light seam */
  .welcome{z-index:3;margin-top:calc(var(--hero-overlap) * -1);background:linear-gradient(transparent calc(var(--hero-overlap) - 4px),var(--navy) calc(var(--hero-overlap) - 4px))}
  .welcome::before,.welcome::after{top:var(--hero-overlap)}
  .intro{padding-block:98px 64px}
  .intro::before{display:none}
  .intro__actions{margin-top:26px}
  .how__steps{grid-template-columns:1fr;gap:40px}
  /* Phones: no fade at the foot; the navy runs straight into the clinic video */
  .how{background:linear-gradient(180deg,var(--ground-fade)) top/100% var(--fade) no-repeat,var(--how-ground)}
  .how__inner{padding-bottom:clamp(56px,6vw,104px)}
  .how::before{inset:var(--fade) 0 0}
  .how__steps::before{display:none}
  .clinic{grid-template-columns:1fr}
  .clinic__media{min-height:60vh;border-radius:0}
  .clinic__media .media-caption{background:none}
  .faq,.book__body{grid-template-columns:minmax(0,1fr)}
  .faq__intro{position:static}
  .form-row{grid-template-columns:1fr;gap:0}
  .book-bar{left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;justify-content:space-between;gap:16px;padding:6px 6px 6px 18px}
  .book-bar__trust,.book-bar__rule{display:none}
  .book-bar__book{height:52px;padding:0 18px 0 20px}
  /* Phones: the buttons stack under the heading and the cards narrow so the next one peeks in */
  .real__track{gap:12px;margin-top:36px}
  .real__card{flex-basis:min(68vw,300px)}
  .real__controls{margin-top:28px}
  .real__dots>*{width:40px}
  .insta__track{grid-auto-columns:min(64vw,280px)}
  .insta-post__caption{display:none}
  .footer{padding-bottom:56px}
}
@media (max-width:720px){
  :root{--header-h:88px;--header-h-scrolled:84px}
  .brand{gap:12px}
  .brand__crest{width:42px}
  /* Phones: just the crest in the header; the full wordmark sits in the hero */
  .brand__wordmark{display:none}
  /* Phones: the menu, the wordmark and the call button; booking lives in the bar at the foot of the screen */
  .masthead__bar{height:76px;gap:12px}
  .masthead.is-scrolled .masthead__bar{height:68px}
  .masthead__brand img,.masthead.is-scrolled .masthead__brand img{width:clamp(130px,40vw,160px)}
  .masthead__book{display:none}
  .masthead__call{width:42px;height:42px}
  .visit__columns{grid-template-columns:1fr;gap:44px}
  .footer__base{flex-direction:column;align-items:flex-start}
  .footer__meta{text-align:left}
  .footer__cta-arrow{width:44px;font-size:18px}
  .service-row__meta+.service-row__meta{padding-left:0;border-left:0}
  .service-row__name{flex-basis:100%}
}
@media (max-width:900px){
  .treatments{--fade-top:240px;--fade-foot:200px;padding-bottom:210px;background-size:100% var(--fade-top),100% var(--fade-foot),auto,auto 130%}
  .concerns{--tile:108px;--arrow:44px}
  .concerns__rail{gap:26px;scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent)}
  .concern{gap:12px}
  .concern__name{width:calc(var(--tile) + 18px);margin-inline:-9px;font-size:13px;line-height:17px;white-space:normal;text-align:center;text-wrap:balance}
  .concern-panel__title{font-size:clamp(23px,5.6vw,30px);text-wrap:balance}
  /* Phones: every section heading is the same size */
  h2,.treatments__head h2,.real h2,.insta__head h2{font-size:7vw;line-height:1.1}
  .how-step h3{font-size:21px}
  .concern-panel{padding-top:34px}
  .concern-panel__head{flex-direction:column;align-items:flex-start;margin-bottom:28px}
  .concern-panel__head .text-link{margin-bottom:0}
  .concern-panel__cards{display:flex;gap:12px;margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .concern-panel__cards::-webkit-scrollbar{display:none}
  .treatment-card{flex:0 0 min(84%,340px);scroll-snap-align:start}
  .treatment-card:only-child{flex-basis:100%;max-width:440px}
  .treatment-card:hover{transform:none;box-shadow:none}
  .treatment-card__body{padding:22px 22px 24px}
  .treatment-card h4{font-size:20px;line-height:26px}
}
@media (max-width:460px){
  .concerns{--tile:96px}
  .concerns__rail{gap:20px}
}
/* The narrowest phones: tighter header so the menu, wordmark and call button fit side by side */
@media (max-width:380px){
  .masthead__bar{gap:8px;padding-inline:16px}
  .masthead__brand img,.masthead.is-scrolled .masthead__brand img{width:116px}
  .menu-toggle{gap:8px;padding:0}
  /* The larger headings no longer fit a kept-together phrase on one line */
  h2 .keep{white-space:normal}
}
@media (max-width:374px){.book-bar__offer-cta{display:none}.book-bar__number{display:none}.book-bar__call-short{display:inline}}
@media (max-width:460px){
  .intro h1{font-size:7vw}
  .intro__actions{flex-direction:column;align-items:stretch;gap:16px}
  .intro__book{justify-content:center}
  .intro__explore{align-self:center}
}

/* Privacy policy page: a static cream header, a navy title band, then the policy beside its contents */
.site-header--page{position:sticky;top:0}
.site-header--page.is-scrolled{background:var(--ground)}
.site-header--page .site-header__bar{height:var(--header-h-scrolled)}
.site-header__back{font-size:15px;font-weight:600;white-space:nowrap}
.legal-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(40px,6vw,96px);background:var(--section);color:var(--cream);padding-block:clamp(36px,4.4vw,64px)}
.legal-hero__ornament{width:min(160px,40vw);margin-bottom:18px}
.legal-hero__sep{white-space:pre}
.legal-hero__abn{white-space:nowrap}
.legal-hero__crest{width:clamp(96px,9vw,140px);opacity:.9}
.legal-hero h1{font-size:clamp(42px,4.7vw,66px);line-height:1.05;margin:12px 0 16px}
.legal-hero__lead{font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:var(--cream);max-width:62ch}
.legal-hero__note{margin-top:12px;font-size:16px;color:var(--cream-dim);max-width:62ch}
.legal{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:clamp(40px,7vw,120px);padding-block:clamp(40px,5vw,72px) clamp(64px,8vw,120px)}
.legal__toc{align-self:start;position:sticky;top:calc(var(--header-h-scrolled) + 32px)}
.legal__toc ol{margin-top:16px;border-left:1px solid var(--line)}
.legal__toc a{display:block;padding:6px 0 6px 18px;margin-left:-1px;border-left:1px solid transparent;font-size:15px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .25s,border-color .25s}
.legal__toc a:hover{color:var(--navy);border-color:var(--gold)}
.legal__section{padding-top:36px}
.legal__section:first-child{padding-top:0}
.legal__section+.legal__section{margin-top:36px;border-top:1px solid var(--line)}
.legal__body h2{font-size:clamp(30px,2.7vw,38px);line-height:1.15;color:var(--navy);margin-bottom:18px}
.legal__body p{font-size:17px;color:var(--muted);max-width:62ch;margin-bottom:14px}
.legal__body p:last-child{margin-bottom:0}
.legal__body a{color:var(--navy)}
.legal__body ul{margin:4px 0 20px;max-width:62ch}
.legal__body li{position:relative;padding:6px 0 6px 28px;font-size:17px;line-height:1.55;color:var(--ink)}
.legal__body li::before{content:"";position:absolute;left:0;top:1.05em;width:14px;height:1px;background:var(--gold)}
.legal__body p+.legal__contact{margin-top:22px}
.legal__contact{border-radius:6px;background:var(--paper);padding:clamp(24px,3.4vw,44px);max-width:620px}
.legal__body .legal__contact-name{font-family:var(--serif);font-size:clamp(22px,2vw,27px);line-height:1.25;color:var(--navy);margin-bottom:6px}
.legal__contact dl{margin-top:22px;border-top:1px solid var(--line)}
.legal__contact dl div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.legal__contact dt{font-weight:600;color:var(--ink)}
.legal__contact dd{color:var(--muted);overflow-wrap:anywhere}
.footer__meta a[aria-current=page]{text-decoration:none}
@media (max-width:900px){
  .site-header--page .button--header{display:none}
  .legal-hero{grid-template-columns:1fr}
  .legal-hero__crest,.legal-hero__ornament{display:none}
  .legal-hero__sep{display:none}
  .legal-hero__abn{display:block;margin-top:4px}
  .legal{grid-template-columns:1fr}
  .legal__toc{position:static}
}
@media (max-width:720px){
  .site-header__back-more{display:none}
  .legal__contact dl div{grid-template-columns:1fr;gap:2px}
}

/* Reduced motion: content appears in place, nothing moves */
@media (prefers-reduced-motion:reduce){
  .sent__card,.sent__crest,.sent__title{transform:none!important}
  html{scroll-behavior:auto}
  :not(.sent,.sent *),:not(.sent,.sent *)::before,:not(.sent,.sent *)::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .js [data-reveal],.js [data-load],.js .site-header,.js .masthead{transform:none!important;transition:opacity .2s linear!important}
  .js [data-reveal=curtain]{clip-path:none!important}
  .js [data-reveal=curtain] img,.js [data-reveal=curtain] video,.js .hero__media video{scale:1!important}
  .js .hero__media video,.js .masthead{transition-delay:0s!important}
  .js .hero__crest,.js .hero__logo::before{animation:none!important;opacity:1}
  .js .hero__logo::before{opacity:.5}
  .js [data-split] .split-word>span{transform:none!important;transition:none!important}
  .concern__photo,.treatment-card{transition:none!important}
  .insta-post{animation-delay:0s!important}
  /* The booking bar is left out of this list on purpose: it still slides in and out, so it's clear where it went */
  .insta-post img{transition:none!important}
  .button::before,.button__arrow,.text-link .arrow{transition:none!important}
  .offer__card,.offer::backdrop{transform:none!important;transition:opacity .2s linear!important}
}

/* Desktop: the headings sit 20px under their base sizes above. The Our Process step titles stay 10px under, as
   20px would take them below the body text. */
@media (min-width:901px){
  h2{font-size:calc(clamp(38px,4.8vw,66px) - 20px)}
  .treatments__head h2{font-size:calc(clamp(46px,5.6vw,80px) - 20px)}
  .real h2{font-size:calc(clamp(40px,5vw,72px) - 20px)}
  .insta__head h2{font-size:calc(clamp(34px,3.8vw,54px) - 20px)}
  .concern-panel__title{font-size:calc(clamp(40px,3.9vw,56px) - 20px)}
  .how-step h3{font-size:calc(clamp(28px,2.4vw,34px) - 10px)}
  .offer__title{font-size:26px;line-height:30px}
  .form-success h3{font-size:30px}
  .sent__title{font-size:calc(clamp(38px,5.6vw,52px) - 20px)}
  .legal-hero h1{font-size:calc(clamp(42px,4.7vw,66px) - 20px)}
  .legal__body h2{font-size:calc(clamp(30px,2.7vw,38px) - 20px)}
}

/* Footer rules sit inside the gutter, like the hairline under the consultation band */
.footer__main,.footer__legal{margin-inline:var(--gutter);padding-inline:0}

/* Between the full desktop and phones: the menus need the room, so they give way to the Menu button with the links */
@media (max-width:1180px){
  .mega,.drop,.drop-backdrop{display:none!important}
  .about__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-inline:var(--gutter)}
  .about__collage{transform-origin:left top;scale:.8;height:688px;margin-bottom:-120px}
  .faq__body{padding-left:clamp(260px,24vw,316px)}
}

/* Phones, following the mobile design */
@media (max-width:900px){
  /* The three promises become a cream band straight after the hero, between fine gold rules */
  .welcome{display:flex;flex-direction:column}
  .intro{order:1}
  .benefits{order:2;display:grid;position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;max-width:none;padding:44px 16px 34px;background:var(--ground);color:var(--navy)}
  .benefits::before{content:"";position:absolute;inset:0 0 auto;height:36px;background:linear-gradient(180deg,var(--navy),rgba(21,35,89,.55) 40%,rgba(245,240,232,0))}
  .benefits::after{content:"";position:absolute;left:16px;right:16px;top:44px;bottom:34px;border-block:1px solid rgba(168,147,113,.45);pointer-events:none}
  .benefits li{gap:8px;padding:22px 0 20px;font-size:13.5px;font-weight:600;line-height:18px}
  .benefits svg{width:26px;height:26px;stroke:var(--gold)}
  .welcome::after{background:linear-gradient(180deg,var(--navy) 0,rgba(21,35,89,.6) 50px,rgba(21,35,89,0) 170px)}
  /* Concerns: a short cream-to-navy blend, the heading on one line and the circles straight under it */
  .treatments{--fade-top:110px;padding-top:122px;background:linear-gradient(180deg,var(--ground-fade)) top/100% var(--fade-top) no-repeat,linear-gradient(0deg,var(--ground-fade)) bottom/100% var(--fade-foot) no-repeat,linear-gradient(rgba(21,35,89,var(--bg-wash)),rgba(21,35,89,var(--bg-wash))),url(/assets/treatments-bg.webp) center/auto 130% no-repeat,var(--section)}
  /* The heading keeps its two lines on phones, with room before the All treatments link */
  .treatments__head{gap:22px}
  .treatments__head h2{font-size:34px;line-height:38px}
  .treatments__head .text-link{order:2;margin-top:0}
  .treatments__head{display:flex;flex-direction:column;align-items:center}
  .concerns{margin-top:36px}
  /* Our process: the arched cards become a row you swipe, with dashes and a full-width button below */
  .how__inner{padding-block:140px 150px;padding-inline:0}
  .how__head{margin-bottom:28px;padding-inline:var(--gutter)}
  .how__head h2{font-size:36px}
  .how__head .how__book{display:none}
  .how__steps{display:flex;gap:16px;padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
  .how__steps::-webkit-scrollbar{display:none}
  .how-step{flex:0 0 264px;scroll-snap-align:start}
  .how-step:nth-child(2){padding-top:0}
  .how-step__arch{--inset:7px;aspect-ratio:264/340;border-radius:132px 132px 6px 6px;margin-bottom:20px}
  .how-step__arch img{border-radius:125px 125px 2px 2px}
  .how-step__num{font-size:30px;line-height:34px}
  .how-step h3{margin-top:8px;font-size:23px;line-height:27px}
  .how-step p:not(.how-step__num){margin-top:8px;font-size:15px;line-height:23px}
  .how__dots{display:flex;gap:8px;margin-top:18px;padding-inline:var(--gutter)}
  .how__dots>*{width:40px}
  .how__book--phone{display:flex;justify-content:center;margin:28px var(--gutter) 0}
  .how{background:linear-gradient(180deg,var(--ground-fade)) top/100% 120px no-repeat,linear-gradient(0deg,var(--ground-fade)) bottom/100% 120px no-repeat,var(--how-ground)}
  .clinic .media-caption{padding-bottom:70px}
  /* About us: the framed team photograph with the two smaller photographs tucked at its corners, then the copy */
  .about__inner{display:flex;flex-direction:column;align-items:stretch;gap:36px;padding:72px 0 80px}
  .about__collage{scale:1;height:410px;margin:0;width:390px;max-width:100%;align-self:center}
  .about__main{left:45px;top:16px;width:300px}
  .about__small--a{left:12px;top:258px;width:104px;height:134px;border-radius:4px}
  .about__small--b{left:262px;top:0;width:116px;height:84px;border-radius:4px}
  .about__copy{padding-inline:var(--gutter)}
  .about__copy h2{font-size:38px;line-height:40px}
  .about__copy p{margin-top:20px;font-size:16px;line-height:26px}
  .about__actions{flex-direction:column;align-items:stretch;gap:18px;margin-top:26px}
  .about__actions .real__book{justify-content:center}
  .about__actions .real__explore{align-self:center}
  /* FAQ: the sconce hangs top right, beside the heading, with still flames */
  .faq::after{height:120px}
  .faq__body{grid-template-columns:minmax(0,1fr);gap:30px;padding:150px var(--gutter) 72px}
  .faq__intro{min-height:244px;padding-right:150px}
  .faq__intro p{max-width:none;font-size:15px;line-height:24px}
  .faq__all{order:3}
  .faq__body{display:flex;flex-direction:column}
  .faq__intro .faq__all{display:none}
  .faq__all--phone{display:inline-flex;align-self:flex-start;margin-top:0}
  .faq-item summary{font-size:19px;line-height:25px;padding:20px 0}
  .sconce{left:auto;right:-10px;top:176px;width:150px}
  .sconce__shadow{translate:5px 14px}
  .sconce__wash{top:-50px;width:115px;height:150px;background:radial-gradient(ellipse 50% 50% at 50% 40%,rgba(255,190,115,.32) 0%,rgba(255,180,105,.12) 40%,rgba(255,180,105,0) 100%)}
  .sconce__wash--left{left:-22px}
  .sconce__wash--right{left:58px}
  .sconce__flame{top:-42px;width:16px;height:53px}
  .sconce__flame--left{left:27px}
  .sconce__flame--right{left:108px}
  video.sconce__flame{display:none}
  /* Phones: the still flames flicker on their own, out of step with each other. Individual scale and rotate
     properties, so the right flame keeps its mirror transform. */
  .sconce__flame--still{transform-origin:50% 92%;animation:flame-flicker 3.8s ease-in-out infinite}
  .sconce__flame--still.sconce__flame--right{animation-duration:4.9s;animation-delay:-1.9s}
  .faq__wash{left:-40px;top:60px;width:520px;height:520px;background:radial-gradient(circle at 72% 32%,rgba(255,186,105,.18) 0%,rgba(255,186,105,.08) 28%,rgba(255,186,105,0) 60%);-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 12%,#000 26%);mask-image:linear-gradient(180deg,transparent 0,transparent 12%,#000 26%)}
  .faq__engraving{left:-60px;top:330px;width:520px;max-width:none;opacity:.07}
  /* Book: no fade, the content closer to the top, a smaller crest */
  .book__body{padding-top:56px}
  .book__crest{left:-60px;top:170px;width:400px}
  /* Footer: stacked, the three columns side by side */
  .footer__main{flex-direction:column;gap:32px;padding-block:40px 36px}
  .footer__brand{gap:18px}
  .footer__wordmark{width:200px}
  .footer__sep{display:none}
  .footer__br{display:inline}
  /* Two columns, so longer links ("Sylfirm RF Needling", "Risks & Complications") stay on one line */
  .footer__columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .footer__columns>div{width:auto;min-width:0}
  .footer__label{font-size:12px;margin-bottom:14px}
  .footer__columns ul{gap:14px}
  .footer__columns a{font-size:15px;line-height:20px}
  .footer__legal{flex-direction:column;align-items:flex-start;padding-block:24px 36px}
  .footer__legal p{font-size:13px}
  /* Concerns: the rail is a swipe on phones, and the arrows sat on top of the neighbouring photos */
  .concerns__arrow{display:none}
  /* Form topics: tighter chips, so most rows hold two or three instead of one */
  .choices__list{gap:8px 6px}
  .choice span{min-height:40px;padding:0 12px;font-size:14px}
  /* Offer card: compact, so the headline and buttons under it still show on first load */
  .offer__card{padding:16px 16px 14px}
  .offer__big{font-size:44px;margin-bottom:2px}
  .offer__title{font-size:15px;padding-right:44px}
  .offer__text{padding-top:6px;font-size:13px;line-height:19px}
  .offer__actions{padding-top:12px}
  .offer__claim{height:46px}
  .offer__claim-arrow{width:34px;height:34px}
  .offer__terms{margin-top:12px;padding-top:10px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  video.sconce__flame{display:none}
  [data-parallax]{transform:none!important}
}

/* Lazy photographs fade in once loaded (the script marks the ones still loading) */
.js img[loading=lazy]{transition:opacity .6s var(--ease-ui)}
.js img.is-loading{opacity:0}

/* Rise: cards, photos and form rows that come in one by one. A keyframe animation that only holds its start
   before it runs, so hover lifts and the About drift still work afterwards. */
.js [data-rise]:not(.is-in){opacity:0}
.js [data-rise].is-in{animation:rise-in .85s var(--ease-out) var(--d,0ms) backwards}
@keyframes rise-in{from{opacity:0;transform:translateY(30px)}}

/* Phones: spacing, the benefits strip and the candlelight */
@media (max-width:900px){
  /* Benefits: navy, straight on from the headline. A fine gold rule above, hairline dividers between the three,
     smaller gold icons and cream type. The damask of the welcome section shows through. */
  .benefits{background:none;color:var(--cream);gap:0;padding:0 var(--gutter) 56px}
  .benefits::before{display:none}
  .benefits::after{inset:0 var(--gutter) auto;height:1px;border:0;background:linear-gradient(90deg,rgba(201,180,143,0),rgba(201,180,143,.55) 20%,rgba(201,180,143,.55) 80%,rgba(201,180,143,0))}
  .benefits li{position:relative;gap:10px;padding:30px 8px 0;color:var(--cream);font-size:13px;font-weight:500;line-height:18px}
  .benefits li+li::before{content:"";position:absolute;left:0;top:34px;bottom:2px;width:1px;background:rgba(201,180,143,.28)}
  .benefits svg{width:22px;height:22px;stroke:var(--gold-light);stroke-width:1.3}
  .intro{padding-bottom:48px}
  /* The damask frame's bottom edge used to hide under the cream band; it now fades into the navy */
  .welcome::after{background:linear-gradient(180deg,var(--navy) 0,rgba(21,35,89,.6) 50px,rgba(21,35,89,0) 170px),linear-gradient(0deg,var(--navy) 0,var(--navy) 56px,rgba(21,35,89,0) 220px)}
  /* Treatments now follow navy, so no cream fade at the top; more room above the heading and below the cards */
  .treatments{padding-top:72px;padding-bottom:270px;background:linear-gradient(180deg,var(--navy) 0,rgba(21,35,89,.88) 22%,rgba(21,35,89,.55) 52%,rgba(21,35,89,.2) 80%,rgba(21,35,89,0) 100%) top/100% 180px no-repeat,linear-gradient(0deg,var(--ground-fade)) bottom/100% var(--fade-foot) no-repeat,linear-gradient(rgba(21,35,89,var(--bg-wash)),rgba(21,35,89,var(--bg-wash))),url(/assets/treatments-bg.webp) center/auto 130% no-repeat,var(--section)}
  /* Every section gets clear room between its content and the fades at its edges */
  .real{padding-block:112px 104px}
  .how__inner{padding-block:200px 210px}
  .clinic__story{padding-block:96px 104px}
  .about__inner{padding:104px 0 112px}
  .faq__body{padding:196px var(--gutter) 112px}
  .book__body{padding-top:104px;padding-bottom:112px}
  .visit__inner{padding-block:112px}
  .insta{padding-block:calc(var(--fade) + 72px)}
  /* FAQ: the sconce and engraving move down with the heading. The candlelight is one soft circle centred on the
     flames, drawn well inside its box, so it never meets a hard edge. */
  .sconce{top:222px}
  .faq__engraving{top:376px}
  /* The small glow behind each flame: centred in its box (it sat above centre before, so its top was cut flat) */
  .sconce__wash{top:-110px;height:190px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,190,115,.3) 0%,rgba(255,180,105,.12) 40%,rgba(255,180,105,0) 100%)}
  .benefits li{padding-inline:4px}
  .faq__wash{left:0;top:0;width:100%;height:820px;background:radial-gradient(circle 320px at calc(100% - 70px) 240px,rgba(255,186,105,.2) 0%,rgba(255,186,105,.1) 28%,rgba(255,186,105,.035) 58%,rgba(255,186,105,0) 100%);-webkit-mask-image:none;mask-image:none}
  /* Footer: the booking bar hides over the footer, so no extra room is needed under the copyright line */
  .footer{padding-bottom:env(safe-area-inset-bottom)}
  .footer__legal{padding-block:24px 32px}
}

/* Instagram posts wait for the row to come on screen before they rise in */
.insta__track:not(.is-in) .insta-post{animation-play-state:paused}
@media (max-width:900px){
  /* The clinic video wipes in from the top, the way the page scrolls, so the movement is on screen */
  .js [data-reveal=curtain]{clip-path:inset(0 0 100% 0);transition-duration:1.5s}
}

@keyframes flame-flicker{
  0%,100%{scale:1 1;rotate:0deg;filter:brightness(1)}
  14%{scale:.95 1.06;rotate:-1.6deg;filter:brightness(1.1)}
  29%{scale:1.03 .96;rotate:1deg;filter:brightness(.94)}
  47%{scale:.97 1.08;rotate:-.7deg;filter:brightness(1.12)}
  63%{scale:1.02 .97;rotate:1.5deg;filter:brightness(.96)}
  81%{scale:.96 1.04;rotate:-1deg;filter:brightness(1.06)}
}

/* Progress dashes (Real Patients, Our process): buttons with a 24px tap area. A faint 3px track runs through the
   middle, with a fill that follows the swipe (--fill, set by the script). Tapping one moves the row there. */
.real__dots>*,.how__dots>*{position:relative;height:24px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.real__dots>*{width:56px}
.real__dots>*::before,.how__dots>*::before,.real__dots>*::after,.how__dots>*::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px}
.real__dots>*::before{background:rgba(21,35,89,.18)}
.how__dots>*::before{background:rgba(245,240,232,.28)}
.real__dots>*::after,.how__dots>*::after{transform-origin:left center;transform:scaleX(var(--fill,0));transition:transform .12s linear}
.real__dots>*::after{background:var(--navy)}
.how__dots>*::after{background:var(--cream)}
.real__dots>:first-child,.how__dots>:first-child{--fill:1}