/* The Heritage Aesthetics Clinic
   Palette and type are placeholders until the clinic's brand guide arrives: change the tokens below. */
/* Fonts, served from the site (24 Oct 2026; they came from Google Fonts, whose stylesheet held back the first paint
   on phones by about a second). Google's own latin variable files and unicode range, at the weights the pages used,
   so the type looks the same. All four are under the SIL Open Font Licence (assets/fonts/LICENSE.txt). Manrope 700
   is only on the Treatments page (treatments.css). */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/cinzel.woff2?v=e7ed1ab7) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400 500;font-display:swap;src:url(assets/fonts/cormorant.woff2?v=356e67f0) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400 500;font-display:swap;src:url(assets/fonts/cormorant-italic.woff2?v=0b465a71) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Ibarra Real Nova';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/ibarra-real-nova.woff2?v=ddeef6d6) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/manrope.woff2?v=938c6e80) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --damask:url(/wp-content/uploads/simplyweb-builder/kits/heritage/assets/home/damask-cream-wide.webp?v=0d005bde); /* wide panel on larger screens; the portrait original on phones */
  --damask-wash:.6; /* cream laid over the damask on cream sections: higher is fainter */
  --panel-bg:url(/wp-content/uploads/simplyweb-builder/kits/heritage/assets/treatments-bg.webp?v=6e1e2c10); /* the navy panels, stretched over a section; a 1600px copy on phones and wherever it's tiled */
  --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:var(--gutter);transition:height .4s var(--ease-out)}
.masthead.is-scrolled{background:rgba(21,35,89,.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}
/* Five items since FAQs joined the bar (20 Oct 2026): tighter just above the phone-menu breakpoint so it clears the wordmark */
@media (max-width:1320px){.masthead__nav{gap:16px}.masthead__nav a,.masthead__drop{font-size:15px}}
.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 .42s var(--ease-out),opacity .16s var(--ease-ui)}
.mega.is-switching,.drop.is-switching{transition:opacity .16s 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 .36s var(--ease-out) both}
.mega.is-open .mega__concerns li:nth-child(1){animation-delay:0.06s}
.mega.is-open .mega__concerns li:nth-child(2){animation-delay:0.072s}
.mega.is-open .mega__concerns li:nth-child(3){animation-delay:0.084s}
.mega.is-open .mega__concerns li:nth-child(4){animation-delay:0.096s}
.mega.is-open .mega__concerns li:nth-child(5){animation-delay:0.108s}
.mega.is-open .mega__concerns li:nth-child(6){animation-delay:0.120s}
.mega.is-open .mega__concerns li:nth-child(7){animation-delay:0.132s}
.mega.is-open .mega__concerns li:nth-child(8){animation-delay:0.144s}
.mega.is-open .mega__concerns li:nth-child(9){animation-delay:0.156s}
.mega.is-open .mega__concerns li:nth-child(10){animation-delay:0.168s}
.mega.is-open .mega__concerns li:nth-child(11){animation-delay:0.180s}
.mega.is-open .mega__concerns li:nth-child(12){animation-delay:0.192s}
.mega.is-open .mega__concerns li:nth-child(13){animation-delay:0.204s}
.mega.is-open .mega__concerns li:nth-child(14){animation-delay:0.216s}
.mega.is-open .mega__view-all{animation-delay:.24s}
.mega.is-open .mega__panel:not(.is-entering){animation-delay:.08s}
.mega.is-open .mega__cta{animation-delay:.16s}
.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(6px)}to{opacity:1;transform:none}}
.mega.is-switching *,.drop.is-switching>*{animation:none!important}
@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)}
/* Design A (Paper page "Mega Menu Redesign"): the five categories with the consultation block under them, the picked
   category's treatments in one column (a short line and a tag each), and its photo on the right. Fits 1280x800. */
/* One fixed height for every category, so pointing at another never makes the menu grow or shrink. If a list is
   ever taller than that, only the treatments column scrolls. */
.mega__inner{display:grid;grid-template-columns:calc(var(--gutter) + 320px) minmax(0,1fr) clamp(240px,calc(75vw - 660px),420px);grid-template-rows:minmax(0,1fr);height:min(680px,calc(100vh - 110px))}
.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;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:16px;padding:34px 32px 30px var(--gutter);border-right:1px solid var(--line)}
.mega__concerns ul{display:grid;gap:0}
.mega__concern{width:100%;display:flex;align-items:center;padding:5px 0 5px 18px;cursor:pointer;border:0;border-left:2px solid transparent;background:none;color:var(--muted);font-family:var(--display);font-size:clamp(18px,1.4vw,20px);font-weight:500;line-height:1.25;letter-spacing:-.01em;text-align:left;transition:color .25s var(--ease-ui),border-color .25s var(--ease-ui)}
.mega__concern:hover,.mega__concern.is-active{color:var(--navy)}
.mega__concern.is-active{border-left-color:var(--gold)}
.mega__view-all,.mega__all{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding-bottom:3px;color:var(--navy);font-size:14px;font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat}
.mega__view-all{margin-left:20px}
.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)}
/* The navy block, so booking a consultation is the one thing that stands out */
.mega__cta{flex:none;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:16px 24px;border-radius:4px;background:var(--navy)}
.mega__cta p{font-size:14px;line-height:22px;color:rgba(245,240,232,.9)}
.mega__cta a{display:inline-flex;align-items:center;gap:10px;padding-bottom:3px;color:var(--cream);font-size:15px;font-weight:600;white-space:nowrap;text-decoration:none;border-bottom:1px solid currentColor}
.mega__panel{grid-column:2/4;grid-row:1;min-height:0;display:grid;grid-template-columns:subgrid}
.mega__panel[hidden]{display:none}
/* WordPress draws the panels inside one wrapper (Simplyweb Builder list); it mustn't change the grid. */
.mega__panels{display:contents}
.mega__panel.is-entering{animation:panel-swap .22s var(--ease-ui) both}
@keyframes panel-swap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mega__treatments{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:40px clamp(28px,3.6vw,56px) 36px}
.mega__head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mega__treatment{display:flex;align-items:center;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.mega__treatment>div{flex:1;min-width:0}
.mega__name{display:block;font-family:var(--display);font-size:23px;font-weight:500;line-height:30px;letter-spacing:-.01em}
.mega__name 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__name a:hover{background-size:100% 1px}
.mega__treatments ul{margin-bottom:24px}
.mega__treatment p{margin-top:2px;font-size:14px;line-height:21px;color:var(--muted)}
/* The menu never shows a scrollbar (Unity, 22 Oct 2026): the lists are spaced to fit, and on a very short window they
   still scroll with the wheel or trackpad, just without a bar */
.mega__concerns::-webkit-scrollbar,.mega__treatments::-webkit-scrollbar{display:none}
@media (max-height:820px){.mega__concerns{gap:12px;padding-block:26px 22px}.mega__concern{padding-block:3px}.mega__treatments{padding-block:26px 22px}.mega__treatment{padding-block:8px}.mega__treatments ul{margin-bottom:16px}}
@media (max-height:720px){.mega__concerns{gap:8px;padding-block:20px 18px}.mega__concern{padding-block:2px;font-size:17px}.mega__treatments{padding-block:20px 18px}}
.mega__tag-slot{flex:none;width:150px;display:flex;justify-content:flex-end}
.mega__tag{padding:4px 10px;border-radius:999px;background:#f3ebdd;font-size:12px;font-weight:600;line-height:16px;color:#6e5430;white-space:nowrap}
.mega__tag--line{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-weight:500}
.mega__photo{position:relative;overflow:hidden;border-bottom-right-radius:6px;background:var(--navy)}
.mega__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mega__photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,22,56,0) 40%,rgba(14,22,56,.9))}
.mega__caption{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;gap:10px;padding:32px}
.mega__caption .mega__title{font-family:var(--display);font-size:34px;font-style:italic;font-weight:400;line-height:1.1;color:var(--cream)}
.mega__caption p{font-size:14px;line-height:22px;color:rgba(245,240,232,.9)}
/* 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:12px;margin-top:16px;padding-inline:calc(var(--gutter) - 12px) var(--gutter);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:calc(var(--gutter) - 12px);scrollbar-width:none}
.menu__rail::-webkit-scrollbar{display:none}
.menu__short{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:88px;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__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)}
/* Opening: the rows, shortcuts and band rise in turn */
.menu__nav>*,.menu__shortcuts{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{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}

/* 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 */
/* The foot of the hero fades into the cream of the welcome section below (Nik, 20 Oct 2026) */
.hero__media::after{content:"";position:absolute;inset:auto 0 0;height:clamp(160px,28%,280px);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(245,240,232,0) 0%,rgba(245,240,232,.3) 32%,rgba(245,240,232,.75) 60%,var(--ground) 92%)}
.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:var(--panel-bg) 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%)}
/* The tagline was the H1 until 24 Oct 2026 (SEO): now a p, so it carries the h1 look itself. The H1 is the small
   label above it, in the section label style. */
.intro__kicker{margin-bottom:18px}
.intro__title{max-width:22ch;font-family:var(--display);font-size:clamp(30px,3.6vw,52px);font-weight:400;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;color:var(--cream)}
.intro__title 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))),var(--panel-bg) 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}
/* Larger circles (Nik, 20 Oct 2026): four clear across the middle, then two more each side fading out. --slot is one
   circle plus its gap, so the fade is measured in circles at any width. */
.concerns{--tile:clamp(140px,12.5vw,200px);--gap:clamp(28px,3vw,48px);--slot:calc(var(--tile) + var(--gap));--arrow:52px;margin-top:clamp(48px,5vw,64px)}
.concerns__rail-wrap{position:relative}
.concerns__rail{--fade:linear-gradient(90deg,transparent calc(50% - var(--slot) * 4),rgba(0,0,0,.35) calc(50% - var(--slot) * 3),#000 calc(50% - var(--slot) * 2),#000 calc(50% + var(--slot) * 2),rgba(0,0,0,.35) calc(50% + var(--slot) * 3),transparent calc(50% + var(--slot) * 4));position:relative;display:flex;gap:var(--gap);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:var(--fade);mask-image:var(--fade)}
.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{width:calc(var(--tile) + var(--gap) - 12px);margin-inline:calc((var(--gap) - 12px) / -2);font-size:15px;font-weight:600;line-height:19px;text-align:center;text-wrap:balance}
.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}
.treatment-card:nth-child(n+4){--i:4}
@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. */
/* Cream sections carry the old site's cream damask (damask-cream.webp, 20 Oct 2026), faded into plain cream at the top and
   bottom so they blend into the sections either side. */
.real,.clinic{position:relative;isolation:isolate}
.real::before,.clinic::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--ground-fade)) top/100% 140px no-repeat,linear-gradient(0deg,var(--ground-fade)) bottom/100% 140px no-repeat,linear-gradient(rgba(245,240,232,var(--damask-wash)),rgba(245,240,232,var(--damask-wash))),var(--damask) center/cover}
.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" "ahpra ahpra" "dots nav" "reviews reviews";align-items:end}
  .real__ahpra{grid-area:ahpra}
  .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)}
/* position:relative keeps the cards' screen-reader-only words (absolutely placed) inside the clip. Without it they
   widened the page to 3,000px on phones until script.js ran, and every fixed element (the Ask our nurses button)
   jumped when it did: a layout shift (24 Oct 2026). */
.reviews__marquee{position:relative;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:var(--navy);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-128.webp?v=682ee5aa) 0 0/128px 128px repeat}
.how__inner{padding-block:200px;padding-inline:var(--gutter)}
.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 in a level row, each a third of the width (Unity, 20 Oct 2026). The arch radius is half
   the step's width (cqw), so the arch stays round at any size. */
.how__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:clamp(24px,3vw,48px)}
.how-step{display:flex;flex-direction:column;min-width:0;container-type:inline-size}
/* 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/440;border:1px solid rgba(201,180,143,.6);border-radius:50cqw 50cqw 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:calc(50cqw - var(--inset)) calc(50cqw - var(--inset)) 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:380px;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}
}

/* Step inside (Paper "Home — Clinic Environment", B): rooms listed on navy damask, the chosen room's photo filling
   the right. Phones: heading, photo, then the list. */
.rooms{position:relative;isolation:isolate;display:grid;grid-template-columns:calc(var(--gutter) + 525px) minmax(0,1fr);min-height:min(900px,100vh);background:var(--navy);color:var(--cream)}
/* Our process and Step inside: one navy ground under both (Nik, 22 Oct 2026). The process section's texture and
   grain are painted once across the pair, so they run on without a seam into the rooms list. */
.navy-run{position:relative;isolation:isolate;background:var(--navy)}
.navy-run::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background:url(assets/home/grain-128.webp?v=682ee5aa) 0 0/128px 128px repeat}
.navy-run::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(rgba(21,35,89,.25),rgba(21,35,89,.25)),var(--panel-bg) center top/cover}
.navy-run .how,.navy-run .rooms{background:none}
.navy-run .how::before,.navy-run .how::after{display:none}
.navy-run .how__inner{padding-bottom:64px}
@media (max-width:900px){.navy-run .how__inner{padding-bottom:24px}}
.rooms__index{display:flex;flex-direction:column;justify-content:space-between;gap:56px;padding:112px 64px 96px var(--gutter)}
.rooms__head h2{font-size:64px;line-height:66px;letter-spacing:-.01em;color:var(--cream)}
.rooms__head p{max-width:420px;margin-top:18px;color:rgba(245,240,232,.78);font-size:16px;line-height:26px}
.rooms__list{border-top:1px solid var(--line-light)}
.rooms__list li{border-bottom:1px solid var(--line-light)}
.rooms__room{width:100%;display:flex;align-items:center;padding:16px 0;border:0;background:none;color:rgba(245,240,232,.74);font:inherit;text-align:left;cursor:pointer;transition:color .25s var(--ease-ui),padding .45s var(--ease-out)}
.rooms__num{flex:none;width:56px;font-family:var(--caps);font-size:13px;letter-spacing:.1em;line-height:20px;color:rgba(245,240,232,.6);transition:color .25s var(--ease-ui)}
.rooms__name{flex:1;font-family:var(--display);font-size:26px;font-weight:500;line-height:32px;transition:font-size .35s var(--ease-out)}
.rooms__room svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--gold-light);stroke-width:1.4;opacity:0;transform:translateX(-6px);transition:opacity .25s var(--ease-ui),transform .35s var(--ease-out)}
.rooms__room:hover{color:var(--cream)}
.rooms__room:hover svg{opacity:.6;transform:none}
.rooms__room:focus-visible{outline:1px solid var(--gold-light);outline-offset:4px}
.rooms__room.is-active{padding:18px 0 8px;color:var(--cream)}
.rooms__room.is-active .rooms__num{color:var(--gold-light)}
.rooms__room.is-active .rooms__name{font-size:30px;line-height:36px}
.rooms__room.is-active svg{opacity:1;transform:none}
.rooms__line{max-height:0;overflow:hidden;padding-left:56px;color:rgba(245,240,232,.78);font-size:14px;line-height:22px;opacity:0;transition:max-height .45s var(--ease-out),opacity .3s var(--ease-ui),padding .45s var(--ease-out)}
.rooms__room.is-active+.rooms__line{max-height:66px;padding-bottom:20px;opacity:1}
/* A room with more than one photo: a gold dash per photo under its line (added by script.js) */
.rooms__dots{display:flex;gap:6px;max-height:0;overflow:hidden;padding-left:56px;opacity:0;transition:max-height .45s var(--ease-out),opacity .3s var(--ease-ui),padding .45s var(--ease-out)}
.rooms__room.is-active~.rooms__dots{max-height:40px;padding-bottom:18px;opacity:1}
.rooms__room.is-active+.rooms__line:has(+.rooms__dots){padding-bottom:12px}
.rooms__dots button{width:28px;height:18px;padding:0;border:0;background:none;cursor:pointer}
.rooms__dots button::before{content:"";display:block;height:2px;border-radius:1px;background:rgba(245,240,232,.3);transition:background-color .25s var(--ease-ui)}
.rooms__dots button:hover::before{background:rgba(245,240,232,.6)}
.rooms__dots button.is-active::before{background:var(--gold-light)}
.rooms__dots button:focus-visible{outline:1px solid var(--gold-light);outline-offset:2px}
.rooms__photo{position:relative;overflow:hidden;min-height:100%;border-top-left-radius:6px}
.rooms__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .7s var(--ease-ui),transform 1.4s var(--ease-out)}
.rooms__photo img.is-active{opacity:1;transform:none}
.rooms__photo::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:300px;pointer-events:none;background:linear-gradient(180deg,rgba(15,26,69,0),rgba(15,26,69,.85))}
.rooms__bar{position:absolute;left:48px;right:48px;bottom:40px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px}
.rooms__caption{font-family:var(--caps);font-size:13px;font-weight:500;letter-spacing:.12em;line-height:18px;text-transform:uppercase;color:var(--cream)}
.rooms__nav{flex:none;display:flex;align-items:center;gap:20px}
.rooms__count{font-size:13px;font-weight:600;letter-spacing:.08em;line-height:18px;color:rgba(245,240,232,.8);font-variant-numeric:tabular-nums}
.rooms__arrow{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(245,240,232,.5);border-radius:50%;background:none;color:var(--cream);cursor:pointer;transition:background-color .3s var(--ease-ui),border-color .3s var(--ease-ui),transform .2s var(--ease-ui)}
.rooms__arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.rooms__arrow:hover{border-color:var(--cream)}
.rooms__arrow:active{transform:scale(.95)}
.rooms__arrow--next{border-color:var(--cream);background:var(--cream);color:var(--navy)}
.rooms__arrow--next:hover{background:#fff}
@media (prefers-reduced-motion:reduce){.rooms__photo img{transform:none;transition:opacity .2s linear}}
@media (max-width:1180px){
  .rooms{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rooms__index{padding-right:40px}
}
@media (max-width:900px){
  .rooms{display:flex;flex-direction:column;min-height:0}
  .rooms__index{display:contents}
  .rooms__head{order:1;padding:88px var(--gutter) 32px}
  .rooms__head h2{font-size:44px;line-height:46px}
  .rooms__photo{order:2;min-height:0;aspect-ratio:4/5;border-radius:0}
  .rooms__list{order:3;margin:28px var(--gutter) 88px}
  .rooms__name{font-size:22px;line-height:28px}
  .rooms__room.is-active .rooms__name{font-size:25px;line-height:30px}
  .rooms__num{width:44px}
  .rooms__line,.rooms__dots{padding-left:44px}
  .rooms__photo::after{height:180px}
  .rooms__bar{left:20px;right:20px;bottom:18px;gap:12px}
  .rooms__caption{font-size:11px;line-height:15px}
  .rooms__nav{gap:10px}
  .rooms__count{display:none}
  .rooms__arrow{width:42px;height:42px}
}

/* 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 0 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:linear-gradient(rgba(245,240,232,var(--damask-wash)),rgba(245,240,232,var(--damask-wash))),var(--damask) center/cover}
.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:600px minmax(0,580px);justify-content:start;align-items:center;gap:clamp(56px,7vw,120px);padding-block:140px;padding-left:var(--gutter);padding-right:var(--gutter)}
.about__collage{position:relative;height:790px}
.about__main{position:absolute;left:0;top:20px;width:600px;aspect-ratio:1122/1402;margin:0}
.about__team{position:absolute;left:17%;top:16.9%;width:67.3%;height:67.4%;object-fit:cover;object-position:48% 50%}
.about__frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.about__copy h2{font-size:64px;line-height:66px;color:var(--ink)}
.about__copy h2 em{display:block;color:var(--gold)}
.about__copy p{margin-top:24px;font-size:18px;line-height:29px;color:var(--ink)}
.about__copy p.team__label{margin:0 0 14px;font-size:13px;line-height:1.4;color:var(--gold)}
.about__copy h2+p{margin-top:28px}
/* Unity's own line */
.about__quote{margin:36px 0 0}
.about__copy .about__quote p{margin:0;font-family:var(--display);font-size:29px;line-height:37px;letter-spacing:-.01em;color:var(--navy)}
.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-720.webp?v=ebe7e29b) 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}
/* The engraving is far down the page: it loads once the FAQ comes near (script.js adds is-near, 24 Oct 2026) */
.js .faq__engraving:not(.is-near){background-image:none}
.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{inset:0;width:100%;height:100%}
/* The soft cast shadow is baked into sconce-shadowed.webp: a CSS filter here stopped iPhone Safari drawing the flames.
   The flames sit on their own layer above the sconce. */
.sconce__flame{z-index:2}
/* One soft circle of candlelight per flame, centred on it (flame centres at x 67 and 222, y -30) and fading to nothing
   well inside its box, so it never meets an edge */
.sconce__wash{top:-210px;width:360px;height:360px;background:radial-gradient(closest-side,rgba(255,190,115,.32) 0%,rgba(255,182,108,.16) 30%,rgba(255,180,105,.06) 58%,rgba(255,180,105,.015) 80%,rgba(255,180,105,0) 100%)}
.sconce__wash--left{left:-113px}
.sconce__wash--right{left:42px}
/* 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;padding-block:304px 140px;padding-left:316px;padding-right:var(--gutter)}
.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,.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)}
/* Treatment choices grouped under the four group names from CONTENT-MAP.md (Contact) */
.choices__groups{display:grid;gap:18px}
.choices__group-label{margin-bottom:8px;font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;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)}
/* All posts on one line (Nik, 20 Oct 2026); they used to step down every other one */
.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)}
/* "Registered nurses" and its divider came off the booking bar (Nik, 28 Oct 2026). Hidden here until every copy of the
   bar's markup (the WordPress part) has lost them too. */
.book-bar__trust,.book-bar__rule{display:none}
.book-bar__stars{width:72px;height:12px;fill:#c9a24a}
.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}
/* Page heads (data-load) rise into place from the first paint (24 Oct 2026). They used to be hidden until the
   script marked the page ready, which held back the largest paint by 1.3 to 4.6 seconds on phones. Only the
   position moves now, so they're on screen at once. */
.js [data-load]{animation:load-rise 1s var(--ease-out) var(--d,0ms) both}
@keyframes load-rise{from{transform:translateY(16px)}}
/* Entrance: the crest arrives out of focus and close, then settles with a flare of gold light, over navy. The
   video stays hidden until it is playing (script.js marks the hero is-unveiled), then the navy lifts off it as it
   settles from a slight zoom, so a paused frame never shows first (27 Oct 2026). The header and (on phones) the
   headline follow. */
.js .hero__crest{opacity:0}
.js .hero__logo::before{opacity:0}
/* First the navy fades in over the cream (1.5s), then the crest, then the video (Nik, 28 Oct 2026): the order holds
   even when the video is already loaded (script.js waits for the crest before it marks the hero is-unveiled). The
   header waits for the navy too. */
.js .hero{opacity:0}
.js .is-ready .hero{animation:hero-navy-in 1.5s cubic-bezier(.45,0,.25,1) both}
@keyframes hero-navy-in{from{opacity:0}to{opacity:1}}
.js .is-ready:has(.hero__crest) .site-header{transition-delay:1.5s,1.5s,0s,0s,0s}
.js .is-ready .hero__crest{animation:crest-in 2.4s var(--ease-out) 1.5s both}
.js .is-ready .hero__logo::before{animation:crest-glow 3s var(--ease-out) 1.7s 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;scale:1.08;transition:opacity .8s cubic-bezier(.45,0,.25,1),scale 2.4s var(--ease-out)}
.js .is-unveiled .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}
/* The masthead is on screen from the first paint on every page: no entrance, so it never pops in late */
.masthead{transition:background-color .4s var(--ease-ui),box-shadow .4s var(--ease-ui)}
.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 the whole first screen (Unity, 4 Nov 2026) and a
     slight scroll brings up the headline, which rises over the video's foot (--hero-overlap). The script fades the
     video out as the page scrolls. */
  :root{--hero-overlap:64px}
  .benefits{display:none}
  .hero{height:max(420px,100svh)}
  .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__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:124px;--gap:24px;--arrow:44px}
  .concerns__rail{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:112px;--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__title{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{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,.js .hero{animation:none!important;opacity:1}
  .js .hero__media video{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:60px}
  .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:632px;margin-bottom:-158px}
  .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))),var(--panel-bg) 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}
  /* The Gallery heading matches the Concerns heading on phones (it was 27px, the smallest on the page) */
  .real 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 min(310px,calc(100vw - 72px));scroll-snap-align:start}
  .how-step__arch{--inset:7px;aspect-ratio:264/320;margin-bottom:20px}
  .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:430px;margin:0;width:390px;max-width:100%;align-self:center}
  .about__main{left:50%;top:6px;width:330px;translate:-50% 0}
  .about__copy{padding-inline:var(--gutter)}
  .about__copy h2{font-size:46px;line-height:48px}
  .about__copy p{margin-top:18px;font-size:17px;line-height:27px}
  .about__copy h2+p{margin-top:22px}
  .about__quote{margin-top:28px}
  .about__copy .about__quote p{font-size:25px;line-height:32px}
  .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__wash{top:-105px;width:180px;height:180px}
  .sconce__wash--left{left:-55px}
  .sconce__wash--right{left:26px}
  .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))),var(--panel-bg) 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:-105px;width:180px;height:180px}
  .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}

/* ===== Shared by the inner pages (Treatments, Rejuran, Results, Our Story, FAQ, Contact, Privacy) ===== */
/* Breadcrumb over a navy hero: gold links, the current page in cream */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--sans);font-size:13px;letter-spacing:.03em;line-height:16px;text-transform:uppercase;color:var(--gold-light)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--cream)}
.crumbs [aria-hidden]{font-family:var(--caps);letter-spacing:.12em;color:rgba(201,180,143,.5)}
.crumbs [aria-current]{color:var(--cream)}
/* Page title in a navy hero */
.page-title{font-family:var(--display);font-size:clamp(46px,5.2vw,74px);line-height:1;letter-spacing:-.02em;color:var(--cream)}
.page-title em{font-style:italic;color:var(--gold-light)}
.page-lede{max-width:560px;font-size:clamp(16px,1.25vw,18px);line-height:1.67;color:var(--cream-dim)}

/* Book band: the clinic interior, faded in from the section above, with a navy card on the left */
.book-band{position:relative;overflow:clip;background:var(--navy);min-height:820px;display:flex;align-items:flex-start;padding-top:170px;padding-bottom:120px}
.book-band__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.book-band::before{content:"";position:absolute;inset:0 0 auto;height:260px;z-index:1;background:linear-gradient(180deg,var(--ground-fade));pointer-events:none}
.book-band--from-navy::before{background:linear-gradient(180deg,var(--navy-fade))}
.book-band__card{position:relative;z-index:2;width:min(520px,100%);display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:56px 52px 52px;border-radius:6px;background:var(--navy);box-shadow:0 30px 60px -24px rgba(10,18,56,.3)}
.book-band__card h2{font-size:56px;line-height:58px;letter-spacing:-.02em;color:var(--cream)}
.book-band__card p{font-size:17px;line-height:28px;color:var(--cream-dim)}
.book-band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;padding-top:14px}
.button--cream{background:var(--cream);color:var(--navy)}
.button--cream::before{background:#fff}
.button__icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.book-band .or-call{color:var(--cream);font-weight:500;background-image:linear-gradient(rgba(245,240,232,.6),rgba(245,240,232,.6))}
@media (max-width:900px){
  .book-band{display:block;min-height:0;padding:0}
  .book-band__photo{position:relative;height:300px}
  .book-band::before{height:130px}
  .book-band>.page-gutter{padding-inline:0}
  .book-band__card{width:auto;gap:16px;padding:34px var(--gutter) 36px;border-radius:0;box-shadow:none}
  .book-band__card h2{font-size:42px;line-height:44px}
  .book-band__card p{font-size:16px;line-height:26px}
  .book-band__actions{width:100%;flex-direction:column;align-items:stretch;gap:16px;padding-top:6px}
  .book-band__actions .button{width:100%}
  .book-band__actions .or-call{align-self:center}
}

/* Footer: the crest, contact lines with icons, the link columns, then the payment marks */
.footer__crest{display:block;width:110px}
.footer__crest img{width:100%;height:auto}
.footer__contact{display:flex;flex-direction:column;gap:10px;font-style:normal}
.footer__name{padding-bottom:2px;font-size:15px;line-height:25px;color:#fff}
.footer__contact a{display:flex;align-items:center;gap:12px;font-size:15px;line-height:22px;color:#a9afc4;text-decoration:none;transition:color .25s}
.footer__contact a:hover{color:var(--cream)}
.footer__contact svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.footer__pay{display:flex;align-items:center;gap:16px 40px;padding-block:28px;border-bottom:1px solid var(--line-light);margin-inline:var(--gutter);padding-inline:0}
.footer__pay .footer__label{margin:0;flex:none}
.footer__pay ul{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.footer__pay img{display:block;height:auto}
.footer__legal p{color:var(--cream-dim)}
@media (max-width:900px){
  .footer__crest{width:92px}
  .footer__columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 14px}
  .footer__columns a{font-size:15px;line-height:20px}
  .footer__pay{flex-direction:column;align-items:flex-start;gap:16px;padding-block:28px}
  .footer__pay ul{gap:16px 24px}
  .footer__legal ul{gap:12px 18px}
}
/* Between phones and the full desktop the three link columns share what's left beside the contact block */
@media (min-width:901px) and (max-width:1180px){
  .footer__main{gap:40px}
  .footer__columns{min-width:0;gap:32px}
  .footer__columns>div{width:auto;min-width:0;flex:1 1 0}
}

/* Moving between pages (cross-document view transitions; browsers without them simply load the page).
   The masthead is its own layer and never animates, so it stays put and the new page's header is there at once.
   The page underneath settles into the navy like a candle dimming, then the next one rises out of it. */
@view-transition{navigation:auto}
.masthead{view-transition-name:masthead}
::view-transition-group(masthead){animation:none}
::view-transition-old(masthead){display:none}
::view-transition-new(masthead){animation:none}
::view-transition-old(root){animation:page-out .42s var(--ease-even) both}
::view-transition-new(root){animation:page-in .9s var(--ease-out) .18s both}
@keyframes page-out{to{opacity:0;filter:blur(6px);transform:scale(.985)}}
@keyframes page-in{from{opacity:0;filter:blur(8px);transform:translateY(22px)}}
/* Navy shows between the two pages, never white */
::view-transition{background:var(--navy)}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}
/* Tablets: the centred wordmark needs the room, so the header keeps the call button and drops the Book link */
@media (max-width:1060px){.masthead__book{display:none}}
/* Home benefits strip in Cormorant, like the headings. It sets smaller than Manrope, so sizes run a step larger. */
.benefits li{font-family:var(--display);font-size:26px;font-weight:500;line-height:30px;letter-spacing:-.01em}
@media (max-width:900px){.benefits li{font-size:17px;font-weight:500;line-height:20px;letter-spacing:0}}
/* Treatment names on the concern cards in Cormorant, like the headings */
.treatment-card h4{font-family:var(--display);font-size:30px;font-weight:500;line-height:32px;letter-spacing:-.01em}
@media (max-width:900px){.treatment-card h4{font-size:26px;line-height:28px}}

/* Welcome on cream (Unity, 20 Oct 2026): the promises and headline under the hero sit on the cream damask instead of
   navy. The hero video fades into it at the top and it fades into the navy of "Your concerns" below. */
.welcome{background:var(--ground);color:var(--navy)}
.welcome::before{background:linear-gradient(rgba(245,240,232,var(--damask-wash)),rgba(245,240,232,var(--damask-wash))),var(--damask) center/cover}
.welcome::after{background:linear-gradient(180deg,var(--ground-fade)) top/100% 120px no-repeat,linear-gradient(0deg,var(--navy-fade)) bottom/100% 150px no-repeat}
.intro::before{display:none}
.intro__title{color:var(--navy)}
.intro__title em{color:var(--label)}
.welcome .intro__book{background:var(--navy);color:var(--cream)}
.welcome .intro__book:hover{background:var(--navy-hover);color:var(--cream)}
.welcome .intro__explore{color:var(--navy)}
.benefits li{color:var(--navy)}
.benefits svg{stroke:var(--gold)}
/* Room under the buttons before the fade into the navy below */
.intro{padding-bottom:180px}
@media (max-width:900px){
  /* Phones: the three benefits sit close under the buttons, with a little room below before the navy fade */
  .intro{padding-bottom:36px}
  .welcome .benefits{padding-bottom:130px}
  /* Phones: a shorter run from the navy treatments into Real Patients, and room under its buttons */
  .treatments{padding-bottom:210px}
  .real{padding-top:40px}
  .real__actions{padding-bottom:40px}
  /* Phones: Our process stays navy at its foot and the navy runs a short way into the clinic video below */
  .how{background:linear-gradient(180deg,var(--ground-fade)) top/100% 120px no-repeat,var(--how-ground)}
  .clinic__media::before{content:"";position:absolute;inset:0 0 auto;z-index:1;height:110px;pointer-events:none;background:linear-gradient(180deg,var(--navy-fade))}
  /* Phones: the framed team photo runs the full content width */
  .about__collage{width:auto;max-width:none;height:auto;margin-inline:var(--gutter);align-self:stretch}
  .about__main{position:relative;left:auto;top:auto;width:100%;translate:none}
  .welcome{background:linear-gradient(transparent calc(var(--hero-overlap) - 4px),var(--ground) calc(var(--hero-overlap) - 4px))}
  /* The script fades the hero video out as the page scrolls; what shows behind it runs from navy under the header
     into the cream, so there is no hard edge above the welcome */
  .hero{background:linear-gradient(180deg,var(--navy) 0,var(--navy) 30%,rgba(245,240,232,.55) 72%,var(--ground) 100%)}
  .welcome::after{background:linear-gradient(180deg,var(--ground-fade)) top/100% 90px no-repeat,linear-gradient(0deg,var(--navy-fade)) bottom/100% 110px no-repeat}
  .benefits li{color:var(--navy)}
  .benefits svg{stroke:var(--gold)}
}
/* Phones get a 960px copy of the portrait damask (24 Oct 2026): the 1440px original was 500 KB, and under the cream
   wash at phone width the two look the same. --damask-tall is the portrait damask at every width (.cream-run). The
   navy panels (--panel-bg) drop from the 3840px original to the 1600px copy. */
:root{--damask-tall:url(/wp-content/uploads/simplyweb-builder/kits/heritage/assets/home/damask-cream.webp?v=2b37dfd5)}
@media (max-width:900px){:root{--damask:url(/wp-content/uploads/simplyweb-builder/kits/heritage/assets/home/damask-cream-800.webp?v=ac636499);--damask-tall:var(--damask);--panel-bg:url(/wp-content/uploads/simplyweb-builder/kits/heritage/assets/treatments-bg-1600.webp?v=c0ee742e)}}

/* Sticky concern bar (Nik, 20 Oct 2026, like the FAQ page's bar): once the row of circles has scrolled away, every
   concern stays in reach above the treatment cards. Built by script.js from the row itself. */
.concern-bar{position:fixed;inset:0 0 auto;z-index:45;background:rgba(21,35,89,.97);border-bottom:1px solid rgba(201,180,143,.6);box-shadow:0 14px 34px -14px rgba(5,10,34,.4);color:var(--cream);visibility:hidden;translate:0 -110%;transition:translate .45s var(--ease-out),visibility 0s linear .45s}
.concern-bar.is-on{visibility:visible;translate:0 0;transition:translate .45s var(--ease-out),visibility 0s}
.concern-bar__row{display:flex;align-items:center;gap:28px;height:74px;padding-inline:var(--gutter)}
.concern-bar__label{flex:none;font-family:var(--display);font-size:26px;line-height:28px;color:var(--cream)}
.concern-bar__list{display:flex;gap:8px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.concern-bar__list::-webkit-scrollbar{display:none}
.concern-bar__chip{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 6px;border:1px solid rgba(245,240,232,.22);border-radius:999px;background:none;color:rgba(245,240,232,.78);font-size:14px;font-weight:500;line-height:18px;white-space:nowrap;cursor:pointer;transition:color .25s var(--ease-ui),border-color .25s var(--ease-ui),background-color .25s var(--ease-ui)}
.concern-bar__chip img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.concern-bar__chip:hover{color:var(--cream);border-color:rgba(245,240,232,.55)}
.concern-bar__chip.is-active{background:var(--cream);border-color:var(--cream);color:var(--navy);font-weight:600}
.concern-bar__chip:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.js body.concern-bar-seen .masthead{transition:opacity .3s var(--ease-ui),translate .45s var(--ease-out),visibility 0s,background-color .4s var(--ease-ui),box-shadow .4s var(--ease-ui)}
.js body.concern-bar-on .masthead{opacity:0;visibility:hidden;translate:0 -100%;transition:opacity .3s var(--ease-ui),translate .45s var(--ease-out),visibility 0s linear .45s,background-color .4s var(--ease-ui),box-shadow .4s var(--ease-ui)}
@media (max-width:900px){
  .concern-bar__row{height:64px;gap:0;padding-inline:0}
  .concern-bar__label{display:none}
  .concern-bar__list{padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);-webkit-mask-image:none;mask-image:none}
  .concern-bar__chip{height:40px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.concern-bar,.concern-bar.is-on{transition:none}}

/* Your concerns, larger screens (20 Oct 2026): four circles clear across the middle, and a little of the next one on
   each side fading out, to show there are more. --peek is the width of each faded edge; the arrows sit over it. */
@media (min-width:901px){
  .concerns{--tile:clamp(150px,14vw,220px);--gap:clamp(28px,3vw,48px)}
  .concerns__rail-wrap{--peek:calc(50% - var(--slot) * 2);width:min(calc(var(--slot) * 5.5),100%);margin-inline:auto}
  .concerns__rail{--fade:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) calc((50% - var(--slot) * 2) * .6),#000 calc(50% - var(--slot) * 2),#000 calc(50% + var(--slot) * 2),rgba(0,0,0,.4) calc(100% - (50% - var(--slot) * 2) * .6),transparent 100%);scroll-padding-inline:calc(50% - var(--slot) * 2 + var(--gap) / 2)}
  .concern{scroll-snap-align:start}
  .concerns__arrow--prev{left:max(0px,calc(var(--peek) / 2 - var(--arrow) / 2))}
  .concerns__arrow--next{right:max(0px,calc(var(--peek) / 2 - var(--arrow) / 2))}
}

/* Our process: the navy damask of "Your concerns" behind it, under the blends at its edges (20 Oct 2026) */
.how::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(rgba(21,35,89,.25),rgba(21,35,89,.25)),var(--panel-bg) center/cover;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
@media (max-width:900px){.how::after{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px);mask-image:linear-gradient(180deg,transparent 0,#000 120px)}}

/* Unity's review, 21 Oct 2026 (Siteproof comments) */
/* Your concerns: the circles already show each concern, so its treatments are a plain list with no photos */
.concern-panel__cards{display:block;border-top:1px solid rgba(245,240,232,.22)}
.concern-panel .treatment-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 330px;align-items:center;gap:12px 48px;padding:30px 0;border-bottom:1px solid rgba(245,240,232,.22);border-radius:0;background:none;color:var(--cream);overflow:visible}
.concern-panel .treatment-card:hover{transform:none;box-shadow:none}
.concern-panel .treatment-card__body{display:contents}
.concern-panel .treatment-card h4{font-family:var(--display);font-size:clamp(28px,2.4vw,36px);font-weight:400;line-height:1.1;letter-spacing:-.01em;color:var(--cream)}
.concern-panel .treatment-card p{color:var(--cream-dim);font-size:16px;line-height:26px}
.concern-panel .treatment-card__links{flex-wrap:nowrap;justify-content:flex-end;gap:10px 24px;margin-top:0;white-space:nowrap}
.concern-panel .treatment-card__link,.concern-panel .treatment-card__more{color:var(--cream)}
.concern-panel .treatment-card__more{background-image:linear-gradient(rgba(245,240,232,.45),rgba(245,240,232,.45))}
@media (max-width:900px){
  .concern-panel__cards{margin-inline:0;padding:0;overflow:visible}
  .concern-panel .treatment-card{grid-template-columns:minmax(0,1fr);gap:8px;padding:24px 0}
  .concern-panel .treatment-card h4{font-size:28px;line-height:32px}
  .concern-panel .treatment-card p{font-size:15px;line-height:24px}
  .concern-panel .treatment-card__links{flex-wrap:wrap;justify-content:flex-start;margin-top:8px}
}
/* "Not sure yet" is words in the circle, not a photo */
.concern__photo--text{display:grid;place-items:center;border:1px solid rgba(201,180,143,.7);font-family:var(--display);font-size:clamp(24px,2.1vw,32px);font-style:italic;line-height:1.1;text-align:center;color:var(--cream)}
.concern--text .concern__name{visibility:hidden}

/* Our process: hard edges, so the navy band stands out against the cream either side (like the old site) */
.how{background:var(--how-ground)}
.how::after{-webkit-mask-image:none;mask-image:none}
.how__inner{padding-block:136px}
@media (max-width:900px){
  .how{background:var(--how-ground)}
  .how::before{inset:0}
  .how__inner{padding-block:88px 96px}
  .clinic__media::before{display:none}
}

/* The clinic: a link on to the full story, and less empty room under the engraving on phones */
.clinic__more{margin-top:6px}
@media (max-width:900px){
  .clinic__story{padding-bottom:48px}
  .about__inner{padding-top:64px}
}

/* FAQ: a Call us button instead of the number; on phones the candle stands on the left, the words on the right */
.faq__call{display:flex;align-items:center;gap:12px;width:fit-content;height:52px;margin-top:28px;padding:0 24px 0 20px;border-radius:6px;background:var(--cream);color:var(--navy)!important;font-size:15px;font-weight:600;text-decoration:none;transition:background-color .3s var(--ease-ui),transform .18s var(--ease-ui)}
.faq__call:hover{background:#fff}
.faq__call:active{transform:scale(.98)}
.faq__call svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
@media (max-width:900px){
  .faq__intro{padding-right:0;padding-left:142px}
  .sconce{left:-10px;right:auto}
  .faq__call{margin-top:22px;height:48px;padding:0 20px 0 18px}
}

/* Enquiry form: one centred card with the old site's fields */
.book--enquiry .book__body{grid-template-columns:minmax(0,1fr);justify-items:center;gap:40px}
.book--enquiry .book__intro{text-align:center}
.book--enquiry .book__intro h2{margin-bottom:16px}
.book--enquiry .book__intro>p:not(.label){margin-inline:auto}
.book--enquiry .form-panel{width:100%;max-width:760px}
.field__hint{margin-left:6px;font-weight:400;color:var(--muted)}
.field select{display:block;width:100%;height:52px;border:1px solid #cfc9bd;border-radius:6px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23152359' stroke-width='1.5'/%3E%3C/svg%3E") right 16px center/12px no-repeat;padding:0 44px 0 15px;font-size:16px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .25s,box-shadow .25s}
.field select:invalid,.field input[type=date]:invalid:not(:focus){color:#6b7176}
.field select:focus{border-color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.field input[type=date]{-webkit-appearance:none;appearance:none;min-width:0}
@media (max-width:720px){.book--enquiry .form-row{grid-template-columns:minmax(0,1fr);gap:0}}
.concern-bar__chip--text{padding-left:16px}

/* The clinic and About us (Nik, 21 Oct 2026): one cream damask runs behind both, with no blend between them; only
   the outer edges still fade. The portrait damask (1440 x 2580) covers both at its own motif size. */
.cream-run{position:relative;isolation:isolate;background:var(--ground)}
.cream-run::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--ground-fade)) top/100% 140px no-repeat,linear-gradient(0deg,var(--ground-fade)) bottom/100% 140px no-repeat,linear-gradient(rgba(245,240,232,var(--damask-wash)),rgba(245,240,232,var(--damask-wash))),var(--damask-tall) center top/cover}
.cream-run .clinic,.cream-run .about{background:none}
.cream-run .clinic::before,.cream-run .about::before,.cream-run .about::after{display:none}

/* Dropdowns (Nik, 21 Oct 2026): a button styled like the fields, opening a cream-edged list. The real select sits
   invisible underneath, so the form still reads and checks it. */
.pick{position:relative}
.pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.pick__button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:52px;padding:0 16px 0 15px;border:1px solid #cfc9bd;border-radius:6px;background:#fff;color:var(--ink);font-size:16px;text-align:left;cursor:pointer;transition:border-color .25s,box-shadow .25s}
.pick__button.is-empty{color:#6b7176}
.pick__button:hover{border-color:var(--navy)}
.pick__button:focus-visible,.pick.is-open .pick__button{outline:none;border-color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.pick__button[aria-invalid=true]{border-color:#9a3b3b}
.pick__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick__chev{flex:none;width:12px;height:12px;fill:none;stroke:var(--navy);stroke-width:1.5;transition:rotate .3s var(--ease-out)}
.pick.is-open .pick__chev{rotate:180deg}
.pick__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;max-height:264px;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:6px;list-style:none;border:1px solid rgba(201,180,143,.55);border-radius:8px;background:#fff;box-shadow:0 18px 40px rgba(14,22,56,.16),0 2px 6px rgba(14,22,56,.08);outline:none;animation:pick-in .22s var(--ease-out) both;scrollbar-width:thin}
.pick__list[hidden]{display:none}
.pick__list [role=option]{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:0 12px;border-radius:5px;font-size:15px;color:var(--ink);cursor:pointer}
.pick__list [role=option].is-active{background:var(--cream)}
.pick__list [role=option][aria-selected=true]{color:var(--navy);font-weight:600}
.pick__list [role=option][aria-selected=true]::after{content:"";flex:none;width:10px;height:6px;margin-top:-3px;border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);rotate:-45deg}
.pick__list [role=option][aria-disabled=true]{color:#b7b2a8;cursor:default}
@keyframes pick-in{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.pick__list{animation:none}.pick__chev{transition:none}}
/* Date of birth: day, month, year side by side; email above it on its own row */
.form-row--stack{grid-template-columns:minmax(0,1fr);gap:0}
.dob{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1fr);gap:10px}

/* About us: the team under the framed group photo (Unity, 21 Oct 2026). Round gold-ringed portraits, an initial
   until each photo arrives. */
.team{margin-top:36px;padding-top:28px;border-top:1px solid rgba(168,147,113,.35)}
.team__label{font-family:var(--caps);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.team__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:20px 0 0;padding:0;list-style:none}
.team__member{display:flex;flex-direction:column;align-items:center;text-align:center}
.team__photo{display:grid;place-items:center;width:100%;max-width:104px;aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--card);border:1.5px solid var(--gold);box-shadow:0 0 0 4px var(--ground),0 0 0 5px rgba(168,147,113,.45);font-family:var(--display);font-size:40px;font-style:italic;line-height:1;color:var(--navy)}
.team__photo--empty::before{content:"";width:30%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(168,147,113,.6)}
.team__name{margin-top:16px;font-family:var(--display);font-size:21px;line-height:24px;color:var(--ink)}
.team__role{margin-top:4px;font-size:13px;line-height:18px;color:var(--muted)}
@media (max-width:900px){
  .team{margin-top:28px;padding-top:24px}
  .team__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .team__photo{max-width:96px}
}

.about__copy .team__label{margin-top:0}
.cream-run .about__inner{padding-top:96px}
@media (max-width:900px){.cream-run .about__inner{padding-top:56px}}
/* The clinic and About us run fainter than the other cream sections (Nik, 21 Oct 2026) */
.cream-run{--damask-wash:.8}
/* More room above "Built as a bank in 1890." (Nik, 21 Oct 2026) */
.cream-run .clinic__story{padding-top:clamp(140px,12vw,180px)}
@media (max-width:900px){.cream-run .clinic__story{padding-top:128px}}
/* Each portrait sits in a thin round gold frame: the old site's round frame, slimmed and colour-matched to the main
   frame (pictures/team-frame/). The photo or initial fills the opening. */
.team__portrait{position:relative;display:block;width:100%;max-width:112px;aspect-ratio:1}
.team__portrait .team__photo{position:absolute;inset:6.4%;width:auto;max-width:none;border:0;box-shadow:inset 0 2px 8px rgba(60,40,10,.18)}
.team__frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (max-width:900px){.team__portrait{max-width:104px}}


/* Ask a question (Unity, 21 Oct 2026; partials/chat.html): a round button in the bottom-right corner, a note that
   pops up beside it once per visit, and a short question form. On larger screens the 20% offer moves to the
   bottom-left corner to make room. Phones: the button sits above the booking bar and the form opens as a sheet. */
@media (min-width:901px){.offer{inset:auto auto 24px 24px}.offer-tab{right:auto;left:24px}}
.chat{position:fixed;right:24px;bottom:24px;z-index:42;display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none}
.chat>*{pointer-events:auto}
.chat__button{position:relative;display:grid;place-items:center;width:60px;height:60px;padding:0;border:1px solid rgba(201,180,143,.75);border-radius:50%;background:var(--cream);color:var(--navy);box-shadow:0 14px 34px -10px rgba(10,15,40,.45),0 2px 6px rgba(14,22,56,.12);cursor:pointer;transition:transform .25s var(--ease-out),background-color .25s var(--ease-ui)}
.chat__button:hover{background:#fff;transform:translateY(-2px)}
.chat__button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.chat__icon{position:absolute;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s var(--ease-ui),transform .35s var(--ease-out)}
.chat__icon--talk{width:26px;height:26px;stroke-width:1.5}
.chat__icon--close{width:16px;height:16px;stroke-width:1.6;opacity:0;transform:rotate(-45deg)}
.chat.is-open .chat__icon--talk{opacity:0;transform:scale(.6)}
.chat.is-open .chat__icon--close{opacity:1;transform:none}
/* The note. It sits above the button out of the flow, so showing, filling and hiding it never moves the button
   or changes the corner's box (that counted as a layout shift on phones, 24 Oct 2026). */
.chat__note{position:absolute;right:0;bottom:calc(100% + 14px);display:flex;align-items:flex-start;gap:4px;width:min(330px,calc(100vw - 48px));padding:14px 10px 14px 14px;border:1px solid rgba(21,35,89,.08);border-radius:10px;background:#fff;box-shadow:0 22px 50px -18px rgba(10,15,40,.45),0 2px 6px rgba(14,22,56,.1);opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease-ui),transform .45s var(--ease-out)}
.chat__note.is-in{opacity:1;transform:none}
.chat__note[hidden]{display:none}
.chat__note:not(.is-in){pointer-events:none}
.chat__note::after{content:"";position:absolute;right:22px;bottom:-7px;width:14px;height:14px;background:#fff;border-right:1px solid rgba(21,35,89,.08);border-bottom:1px solid rgba(21,35,89,.08);rotate:45deg}
.chat__note-open{display:flex;align-items:center;gap:14px;padding:0;border:0;background:none;color:var(--ink);font-size:15px;line-height:21px;text-align:left;cursor:pointer}
.chat__note-open strong{display:block;font-weight:600;color:var(--navy)}
.chat__avatar{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(168,147,113,.6)}
.chat__note-close,.chat__close{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:6px;background:none;color:var(--navy);cursor:pointer}
.chat__note-close:hover,.chat__close:hover{background:var(--cream)}
.chat__note-close svg,.chat__close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
/* The form */
.chat__panel{width:380px;max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(21,35,89,.08);border-radius:12px;background:var(--card);color:var(--ink);box-shadow:0 30px 70px -20px rgba(10,15,40,.5),0 2px 6px rgba(14,22,56,.1);opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;transition:opacity .3s var(--ease-ui),transform .45s var(--ease-out)}
.chat__panel[hidden]{display:none}
.chat.is-open .chat__panel{opacity:1;transform:none}
.chat__head{display:flex;align-items:center;gap:14px;padding:18px 16px 18px 20px;border-radius:12px 12px 0 0;background:var(--navy);color:var(--cream)}
.chat__head>div{flex:1;min-width:0}
.chat__title{font-family:var(--display);font-size:24px;font-weight:400;line-height:26px;color:var(--cream)}
.chat__sub{margin-top:2px;font-size:13px;line-height:18px;color:var(--cream-dim)}
.chat__head .chat__avatar{box-shadow:0 0 0 2px var(--navy),0 0 0 3px rgba(201,180,143,.7)}
.chat__head .chat__close{align-self:flex-start;color:var(--cream)}
.chat__head .chat__close:hover{background:rgba(245,240,232,.12)}
.chat__form{padding:20px 20px 18px}
.chat__form .field{margin-bottom:14px}
.chat__form .field>label{font-size:14px;margin-bottom:7px}
.chat__form .field input{height:46px}
.chat__form .field textarea{min-height:92px}
.chat__done{padding:30px 24px 34px;text-align:center}
.chat__done-title{font-family:var(--display);font-size:30px;line-height:34px;color:var(--navy)}
.chat__done p:not(.chat__done-title){margin-top:10px;font-size:15px;line-height:23px;color:var(--muted)}
@media (max-width:900px){
  /* The corner of the screen (Unity, 4 Nov 2026). Twice the inset on iPhones, so it clears Safari's floating toolbar
     (42px above the 34px inset). Only the booking bar and the treatment pages' dock lift it. */
  .chat{right:16px;bottom:calc(16px + env(safe-area-inset-bottom) * 2)}
  body:has(.book-bar.is-visible) .chat:not(.is-open),body.rj-bar-on .chat:not(.is-open){bottom:calc(84px + env(safe-area-inset-bottom))}
  .chat__button{width:54px;height:54px}
  .chat.is-open{inset:auto 0 0 0;align-items:stretch;padding:0 12px calc(12px + env(safe-area-inset-bottom));z-index:61}
  .chat.is-open .chat__button{display:none}
  .chat__panel{width:auto;max-height:calc(100dvh - 90px)}
}
@media (prefers-reduced-motion:reduce){.chat__note,.chat__panel,.chat__icon,.chat__button{transition:none}}
/* Phones: the 20% offer card sits where the chat button is, so the button steps out while the offer is open */
@media (max-width:900px){body:has(.offer[open]) .chat:not(.is-open){opacity:0;visibility:hidden}}

/* Ask our nurses: motion (Nik, 21 Oct 2026). The button springs in after load, lifts and wiggles its icon on hover,
   squeezes on press and sends a gold ripple out. The note grows out of the button, "types" for a moment, then the
   words rise in. The form opens from the corner with its fields arriving one after another, and the thank-you tick
   draws itself. Reduced motion keeps only the fades. */
:root{--spring:cubic-bezier(.34,1.56,.64,1)}
.chat__button{opacity:0;transform:scale(.4) translateY(16px);transition:opacity .35s var(--ease-ui),transform .6s var(--spring),background-color .25s var(--ease-ui),box-shadow .3s var(--ease-ui)}
.chat.is-ready .chat__button{opacity:1;transform:none}
.chat.is-ready .chat__button:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(10,15,40,.5),0 2px 6px rgba(14,22,56,.12)}
.chat.is-ready .chat__button:active{transform:scale(.9);transition-duration:.12s}
.chat__button:hover .chat__icon--talk{animation:chat-wiggle .7s var(--ease-out)}
@keyframes chat-wiggle{20%{transform:rotate(-12deg)}45%{transform:rotate(9deg)}70%{transform:rotate(-4deg)}100%{transform:none}}
.chat.is-open .chat__button:hover .chat__icon--talk{animation:none}
.chat__icon--talk{transition:opacity .25s var(--ease-ui),transform .45s var(--spring)}
.chat__icon--close{transition:opacity .25s var(--ease-ui),transform .45s var(--spring)}
.chat.is-open .chat__icon--talk{transform:scale(.4) rotate(45deg)}
/* The ripple: a gold ring that leaves the button on press and when the note appears */
.chat__ring{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--gold);opacity:0;pointer-events:none}
.chat__button.is-burst .chat__ring{animation:chat-burst .9s var(--ease-out)}
@keyframes chat-burst{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
/* The note grows out of the button's corner */
.chat__note{transform-origin:calc(100% - 30px) calc(100% + 20px);transform:translateY(14px) scale(.6);transition:opacity .3s var(--ease-ui),transform .6s var(--spring)}
.chat__note.is-in{transform:none}
.chat__note .chat__avatar{transform:scale(.4);opacity:0;transition:transform .55s var(--spring) .12s,opacity .3s var(--ease-ui) .12s}
.chat__note.is-in .chat__avatar{transform:none;opacity:1}
.chat__note-open:hover .chat__avatar{transform:scale(1.06)}
.chat__note-open strong{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;width:max-content;transition:background-size .45s var(--ease-out)}
.chat__note-open:hover strong{background-size:100% 1px}
.chat__words{display:block;transition:opacity .35s var(--ease-ui),transform .5s var(--ease-out)}
/* The dots sit over the (still invisible) words beside the avatar, so the note is its full size from the start */
.chat__note-open{position:relative}
.chat__typing{display:none;position:absolute;left:66px;top:50%;translate:0 -50%;align-items:center;gap:5px;height:21px;padding:0 4px}
.chat__typing i{width:7px;height:7px;border-radius:50%;background:rgba(21,35,89,.35);animation:chat-dot 1s ease-in-out infinite}
.chat__typing i:nth-child(2){animation-delay:.15s}
.chat__typing i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat__note.is-typing .chat__typing{display:inline-flex}
.chat__note.is-typing .chat__words{opacity:0;transform:translateY(6px);pointer-events:none}
.chat__note.is-typing .chat__note-close{opacity:0}
.chat__note-close{transition:opacity .3s var(--ease-ui),background-color .2s,transform .3s var(--spring)}
.chat__note-close:hover{transform:rotate(90deg)}
.chat__close{transition:background-color .2s,transform .3s var(--spring)}
.chat__close:hover{transform:rotate(90deg)}
/* The form opens from the corner, then its parts arrive in turn */
.chat__panel{transform:translateY(18px) scale(.85);transition:opacity .28s var(--ease-ui),transform .55s var(--spring)}
.chat__head,.chat__form>*{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease-ui),transform .5s var(--ease-out)}
.chat.is-open .chat__head,.chat.is-open .chat__form>*{opacity:1;transform:none}
.chat.is-open .chat__head{transition-delay:.06s}
.chat.is-open .chat__form>:nth-child(2){transition-delay:.12s}
.chat.is-open .chat__form>:nth-child(3){transition-delay:.17s}
.chat.is-open .chat__form>:nth-child(4){transition-delay:.22s}
.chat.is-open .chat__form>:nth-child(5){transition-delay:.27s}
.chat.is-open .chat__form>:nth-child(n+6){transition-delay:.32s}
.chat__head .chat__avatar{transform:scale(.5);transition:transform .6s var(--spring) .15s}
.chat.is-open .chat__head .chat__avatar{transform:none}
.chat__form .button--submit .button__arrow{transition:transform .35s var(--ease-out)}
.chat__form .button--submit:hover .button__arrow{transform:translateX(4px)}
/* Thank you: the tick draws itself, then the words rise */
.chat__tick{display:block;width:56px;height:56px;margin:0 auto 16px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat__tick circle{stroke-dasharray:139;stroke-dashoffset:139;animation:chat-draw .7s var(--ease-out) forwards}
.chat__tick path{stroke:var(--navy);stroke-dasharray:32;stroke-dashoffset:32;animation:chat-draw .45s var(--ease-out) .55s forwards}
@keyframes chat-draw{to{stroke-dashoffset:0}}
.chat__done>p{animation:rise .6s var(--ease-out) both}
.chat__done>p:nth-of-type(1){animation-delay:.5s}
.chat__done>p:nth-of-type(2){animation-delay:.62s}
@media (prefers-reduced-motion:reduce){
  .chat__button,.chat__note,.chat__panel,.chat__head,.chat__form>*,.chat__note .chat__avatar,.chat__head .chat__avatar{transform:none!important;transition:opacity .2s linear!important}
  .chat__icon--talk,.chat__ring,.chat__typing i,.chat__done>p{animation:none!important}
  .chat__tick circle,.chat__tick path{animation:none;stroke-dashoffset:0}
}

/* Trust strip (Home, Unity 21 Oct 2026, simplified from the four promises): three items, each an icon in a soft
   gold circle with a bold line and a quiet line beside it, hairline dividers between. Phones: three narrow columns,
   icon over the bold line only. */
.trust{display:flex;justify-content:center;max-width:1180px;margin:0 auto;padding-top:44px}
.trust li{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:16px;padding:4px clamp(16px,2.6vw,40px)}
.trust li+li{border-left:1px solid rgba(168,147,113,.35)}
.trust__icon{flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:rgba(168,147,113,.14)}
.trust__icon svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trust__text{display:grid;gap:2px}
.trust strong{font-size:17px;font-weight:600;line-height:1.3;color:var(--navy)}
.trust__text>span{font-size:14px;font-weight:500;line-height:1.4;color:var(--muted)}
@media (max-width:900px){
  .trust{order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin:0;padding:28px var(--gutter) 130px}
  .trust li{flex-direction:column;justify-content:flex-start;gap:10px;padding:0 6px;text-align:center}
  .trust li+li{border-left-color:rgba(168,147,113,.3)}
  .trust__icon{width:44px;height:44px}
  .trust__icon svg{width:18px;height:18px}
  .trust strong{font-size:13px;line-height:17px}
  .trust__text>span{display:none}
}

/* Before you go (partials/exit.html): a centred card over a dimmed page. A gold rule, the heading, one line, the
   booking button and a quiet link to the question form. */
.exit{width:min(540px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);margin:auto;padding:0;border:0;border-radius:8px;background:none;color:var(--ink);overflow:visible}
.exit::backdrop{background:rgba(10,16,44,.55);opacity:0;transition:opacity .35s var(--ease-ui)}
.exit.is-open::backdrop{opacity:1}
.exit:focus{outline:none}
.exit__card{position:relative;display:flex;flex-direction:column;align-items:center;padding:52px clamp(22px,5vw,48px) 36px;border-radius:8px;background:var(--card);box-shadow:0 30px 80px -24px rgba(10,15,40,.55);text-align:center;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .35s var(--ease-ui),transform .5s var(--ease-out)}
.exit.is-open .exit__card{opacity:1;transform:none}
.exit__close{position:absolute;top:16px;right:16px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid rgba(168,147,113,.55);border-radius:6px;background:none;color:var(--navy);transition:background-color .25s,border-color .25s}
.exit__close:hover{background:rgba(168,147,113,.1);border-color:var(--gold)}
.exit__close svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}
.exit__rule{width:64px;height:1px;background:var(--gold)}
.exit__title{margin-top:26px;font-family:var(--display);font-size:clamp(38px,5vw,52px);font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.exit__text{max-width:36ch;margin-top:18px;font-size:17px;font-weight:500;line-height:1.6;color:var(--muted)}
.exit__book{align-self:stretch;margin-top:30px}
.exit__ask{margin-top:20px;padding:0 0 2px;border:0;border-bottom:1px solid rgba(21,35,89,.35);background:none;font-size:14px;font-weight:600;line-height:18px;color:var(--navy);transition:border-color .25s}
.exit__ask:hover{border-color:var(--navy)}
.exit__ask[hidden]{display:none}
@media (max-width:600px){
  .exit__card{padding-top:48px}
  .exit__text{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .exit__card{transform:none;transition:opacity .15s linear}
}
/* The form opens above the button, not below it */
.chat__button{order:2}
/* Phones: when the booking bar carries its 20% strip, the button rises above that too (48px, moved with translate
   rather than bottom so it never counts as a layout shift) */
@media (max-width:900px){
  .chat{transition:translate .45s var(--ease-out),bottom .45s var(--ease-out)}
  body:has(.book-bar.is-visible .book-bar__offer:not([hidden])) .chat:not(.is-open){translate:0 -48px}
}

/* Footer on navy damask (Nik, 21 Oct 2026): the cream damask recoloured to navy (assets/home/damask-navy*.webp,
   made from damask-cream*.webp), with brand navy laid over it. It fades in from plain navy over the footer's first
   220px, so it never starts with an edge under the navy blend at the foot of the section above.
   --footer-wash: higher is fainter. */
:root{--damask-navy:url(/wp-content/uploads/simplyweb-builder/kits/heritage/assets/home/damask-navy-wide.webp?v=eabacac3);--footer-wash:.85}
/* Phones: a 720px copy (24 Oct 2026; the 1440px original was 500 KB), which looks the same under the navy wash */
@media (max-width:900px){:root{--damask-navy:url(/wp-content/uploads/simplyweb-builder/kits/heritage/assets/home/damask-navy-720.webp?v=c0291987)}}
.footer{position:relative;isolation:isolate;background:var(--navy)}
.footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(21,35,89,var(--footer-wash)),rgba(21,35,89,var(--footer-wash))),var(--damask-navy) center top/cover;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 220px);mask-image:linear-gradient(180deg,transparent 0,#000 220px)}

/* Our process, home page (Nik, 21 Oct 2026): a centred heading, and each step's photo in the ornate gold frame (the
   About photo's frame, same opening). The Rejuran ad page keeps its arches. */
.how--framed .how__head{flex-direction:column;justify-content:center;gap:28px;text-align:center}
.how--framed .how__head h2 em{display:block;font-style:italic;color:#d8c29a}
.how--framed .how-step__arch{aspect-ratio:1122/1402;border:0;border-radius:0;margin-bottom:24px}
.how--framed .how-step__arch .how-step__photo{inset:16.9% auto auto 17%;width:67.3%;height:67.4%;border-radius:0}
.how--framed .how-step__arch .how-step__frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:0;pointer-events:none}
.how--framed .how-step{text-align:center}
.how--framed .how-step p:not(.how-step__num){margin-inline:auto}
@media (max-width:900px){
  .how--framed .how__head{gap:0}
  .how--framed .how-step__arch{aspect-ratio:1122/1402;margin-bottom:14px}
}


/* Question note, tidied (Nik, 21 Oct 2026): it fits its words instead of a fixed width, reads as a small line and a
   clear call to action, and the close button sits on its top-left corner, out of the text. */
.chat__note{width:auto;min-width:244px;max-width:calc(100vw - 48px);padding:12px 22px 12px 12px;border-radius:14px}
.chat__note-open{gap:14px}
.chat__words{display:grid;gap:2px}
.chat__kicker{font-size:13px;font-weight:500;line-height:18px;color:var(--muted)}
.chat__note-open strong{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600;line-height:22px;letter-spacing:-.01em}
.chat__note-open strong svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .35s var(--ease-out)}
.chat__note-open:hover strong svg{transform:translateX(3px)}
.chat__note-close{position:absolute;top:-10px;left:-10px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 4px 12px -2px rgba(10,15,40,.25),0 0 0 1px rgba(21,35,89,.1)}
.chat__note-close:hover{background:var(--cream)}
.chat__note-close svg{width:9px;height:9px;stroke-width:1.8}
/* …in the round gold frame (Nik, 21 Oct 2026): the old site's round frame at full thickness, colour-matched */
.how--framed .how-step__arch{aspect-ratio:1;max-width:380px;width:100%;margin-inline:auto}
.how--framed .how-step__arch .how-step__photo{inset:10.6% auto auto 10.6%;width:78.8%;height:78.8%;border-radius:50%;object-position:50% 40%}
@media (max-width:900px){.how--framed .how-step__arch{aspect-ratio:1;max-width:300px}}
/* Your cosmetic journey on phones (Nik, 28 Oct 2026): each step snaps to the centre with narrow text, the row only
   moves sideways, and the dashes share a row with arrows on the right like the Gallery's (built by script.js) */
.how__controls{display:none}
@media (max-width:900px){
  .how__steps{padding-inline:calc(50vw - min(155px,50vw - 36px));scroll-padding-inline:0;overflow-y:hidden}
  .how-step{scroll-snap-align:center}
  .how--framed .how-step h3,.how--framed .how-step p:not(.how-step__num){max-width:240px;margin-inline:auto}
  .how__controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-inline:var(--gutter)}
  .how__controls .how__dots{margin-top:0;padding-inline:0}
  .how__nav{gap:10px}
  .how__nav .rail-nav__arrow{background:var(--cream);border-color:var(--cream);color:var(--navy)}
  .how__nav .rail-nav__arrow:disabled{opacity:1;background:none;border-color:rgba(245,240,232,.25);color:rgba(245,240,232,.45)}
  .how__nav .rail-nav__arrow svg{width:16px;height:16px;stroke-width:1.5}
}

/* home: offer + not-sure (29 Oct 2026) */
.concerns__unsure{margin-top:clamp(36px,3.6vw,52px);text-align:center;font-size:clamp(16px,1.3vw,19px);font-weight:500;line-height:1.4;color:var(--cream)}
.concerns__unsure .text-link{margin-left:6px;font-size:inherit}

/* wrinkle education section (29 Oct 2026) */
/* How lines form, on an anatomy face: a drawing in the arch, four hotspots, the concern names below it, three steps under both.
   Built on the .rj-skin / .rj-arch / .rj-concern rules in rejuran.css (this file loads first, so every rule here carries an extra
   class). Reusable: only the text and the hotspot set change from page to page (see the comment above the section in
   wrinkle-reduction/index.html). The script is "Education section" in script.js. */
.rj-skin.edu .rj-skin__inner{grid-template-areas:"copy arch" "list arch" "how how";grid-template-rows:auto 1fr auto;min-height:0;padding-bottom:90px}
.rj-skin.edu .rj-arch__photo{background:radial-gradient(ellipse 70% 56% at 50% 40%,#24398a 0,var(--navy) 72%)}
.rj-skin.edu .rj-arch__caption{z-index:2}
.edu__stage{position:absolute;z-index:1;pointer-events:none;left:0;right:0;top:50%;aspect-ratio:400/520;translate:0 -50%}
.edu__face{display:block;width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 99%);mask-image:linear-gradient(180deg,#000 80%,transparent 99%)}
.edu__face *{vector-effect:non-scaling-stroke}
.edu__face path,.edu__face ellipse,.edu__face circle{fill:none;stroke-linecap:round;stroke-linejoin:round}
.edu__base path,.edu__base circle{stroke:rgba(245,240,232,.5);stroke-width:1.2}
.edu__base .edu__outline{fill:rgba(245,240,232,.05)}
.edu__base .edu__features path,.edu__base .edu__features circle{stroke:rgba(245,240,232,.36)}
.edu__muscle>*{fill:rgba(201,180,143,.05);stroke:rgba(201,180,143,.42);stroke-width:1;transition:fill .45s var(--ease-ui),stroke .45s var(--ease-ui)}
.edu__fibres{stroke:rgba(201,180,143,.24);stroke-width:1;transition:stroke .45s var(--ease-ui)}
.edu__lines,.edu__edge{opacity:0;transition:opacity .5s var(--ease-ui)}
.edu__lines{stroke:var(--cream);stroke-width:1.4;stroke-dasharray:5 5}
.edu__edge{stroke:var(--gold-light);stroke-width:1.6}
.edu__zone.is-on .edu__muscle>*{fill:rgba(201,180,143,.27);stroke:var(--gold-light);stroke-width:1.5}
.edu__zone.is-on .edu__fibres{stroke:rgba(232,214,178,.85)}
.edu__zone.is-on .edu__lines,.edu__zone.is-on .edu__edge{opacity:1}

.edu__spot{position:absolute;pointer-events:auto;left:var(--x);top:var(--y);translate:-50% -50%;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--cream);cursor:pointer;-webkit-tap-highlight-color:transparent}
.edu__spot::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 0 3px rgba(21,35,89,.75);transition:background-color .3s var(--ease-ui),box-shadow .3s var(--ease-ui)}
.edu__spot::after{content:"";position:absolute;inset:7px;border:1px solid var(--gold-light);border-radius:50%;opacity:.75;transition:inset .3s var(--ease-ui),opacity .3s var(--ease-ui)}
.edu__spot.is-active::before{background:var(--cream);box-shadow:0 0 0 3px var(--gold-light)}
.edu__spot.is-active::after{inset:4px;border-width:1.5px;opacity:1}
.edu__spot:focus-visible{outline:2px solid var(--cream);outline-offset:1px}
.edu__spot-label{position:absolute;left:50%;bottom:100%;translate:-50% 0;margin-bottom:-4px;padding:5px 11px;border-radius:999px;background:var(--cream);color:var(--navy);font-family:var(--sans);font-size:12px;font-weight:600;line-height:16px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease-ui)}
.edu__spot:focus-visible .edu__spot-label{opacity:1}
@media (hover:hover){.edu__spot:hover .edu__spot-label{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .edu__spot:not(.is-active)::after{animation:edu-pulse 2.6s var(--ease-out) infinite}
  @keyframes edu-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.2);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .edu__muscle>*,.edu__fibres,.edu__lines,.edu__edge,.edu__spot::before,.edu__spot::after,.edu__spot-label{transition:none}
}

.rj-skin.edu .rj-concern button{font-size:36px;line-height:44px}
.rj-skin.edu .rj-concern.is-active p{max-width:470px}
.edu__list button:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

.edu__how{grid-area:how;margin-top:72px;padding-top:44px;border-top:1px solid rgba(21,35,89,.133)}
.edu__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:0;padding:0;list-style:none}
.edu__num{display:block;font-family:var(--display);font-size:44px;line-height:44px;color:#9a7f4e}
.edu__steps h3{margin:10px 0 0;font-family:var(--sans);font-size:20px;font-weight:500;line-height:28px;letter-spacing:-.01em;color:var(--navy)}
.edu__steps p{max-width:340px;margin:8px 0 0;font-size:15px;line-height:24px;color:var(--muted)}
.edu__note{max-width:640px;margin:40px 0 0;font-size:13px;line-height:21px;color:var(--muted)}
@media (max-width:1240px){
  .edu__steps{gap:32px}
}
@media (max-width:900px){
  .rj-skin.edu .rj-skin__inner{padding-bottom:56px}
  .rj-skin.edu .rj-concern button{font-size:28px;line-height:34px}
  .edu__spot-label{font-size:11px;padding:4px 9px}
  .edu__how{margin-top:40px;padding-top:32px}
  .edu__steps{grid-template-columns:minmax(0,1fr);gap:28px}
  .edu__num{font-size:36px;line-height:36px}
  .edu__note{margin-top:28px}
}

/* wrinkle education art (29 Oct 2026) */
/* The illustration (a face aged about 30 on the left, about 70 on the right) replaces the navy drawing. It sits on cream in the
   gold arch line. The picture's ivory is transparent, so the section's cream and grain show through. Spots and zone shapes are
   placed in % of the picture, so they stay on the face at every size. Overrides the rules of the section block above. */
.rj-skin.edu .rj-arch.edu__arch{height:auto;aspect-ratio:auto;padding:13px 13px 0;border-radius:50% 50% 4px 4px / 35% 35% 4px 4px}
.rj-skin.edu .rj-arch__photo{position:relative;inset:auto;overflow:visible;border-radius:0;background:none}
.rj-skin.edu .rj-arch__photo::after{content:none}
.edu__stage{position:relative;left:auto;right:auto;top:auto;translate:none;aspect-ratio:1744/2336;pointer-events:auto}
.edu__art{display:block;width:100%;height:100%}
.edu__zones{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.edu__zones *{vector-effect:non-scaling-stroke}
.edu__zone{opacity:0;transition:opacity .45s var(--ease-ui);filter:drop-shadow(0 0 7px rgba(154,127,78,.45))}
.edu__zone.is-on{opacity:1}
.edu__zone path,.edu__zone ellipse{fill:rgba(255,251,240,.26);stroke:#9a7f4e;stroke-width:1.5;stroke-linejoin:round}
.edu__ages{display:grid;grid-template-columns:1fr 1fr;margin:6px 0 0;font-family:var(--sans);font-size:10px;font-weight:600;line-height:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--label);text-align:center}
.rj-skin.edu .rj-arch__caption{position:static;margin:4px 0 0;padding:14px 14px 18px;border-top:1px solid rgba(201,180,143,.6)}
.rj-skin.edu .rj-arch__name{color:var(--navy)}
.rj-skin.edu .rj-arch__arrow{border-color:rgba(21,35,89,.35);color:var(--navy)}
.rj-skin.edu .rj-arch__arrow--next,.rj-skin.edu .rj-arch__arrow:hover{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.rj-skin.edu .rj-arch__arrow:focus-visible{outline-color:var(--navy)}
.edu__spot::before{background:var(--navy);box-shadow:0 0 0 2px var(--cream),0 1px 6px rgba(21,35,89,.35)}
.edu__spot::after{border-color:var(--navy);opacity:.8}
.edu__spot.is-active::before{background:var(--cream);box-shadow:0 0 0 3px var(--navy),0 1px 8px rgba(21,35,89,.4)}
.edu__spot.is-active::after{border-color:var(--navy)}
.edu__spot:focus-visible{outline-color:var(--navy);outline-offset:0}
.edu__spot-label{background:var(--navy);color:var(--cream);box-shadow:0 6px 16px -6px rgba(10,18,56,.5)}
@media (prefers-reduced-motion:reduce){
  .edu__zone{transition:none}
}
@media (max-width:1060px){
  .rj-skin.edu .rj-arch.edu__arch{max-width:460px;margin-top:40px}
}
@media (max-width:900px){
  .edu__ages{font-size:9px;letter-spacing:.16em}
  .rj-skin.edu .rj-arch__caption{padding:12px 10px 14px}
}
.rj-skin.edu .rj-arch__photo .edu__art{position:static;inset:auto;opacity:1;object-fit:fill;transition:none}
/* volumising education (29 Oct 2026) */
.page--volumising-treatments .edu__stage{aspect-ratio:880/1168}
.page--volumising-treatments .edu__note+.edu__note{margin-top:12px}

/* exosomes education (29 Oct 2026) */
.page--exosomes .edu__stage{aspect-ratio:776/915}
.edu__option{max-width:640px;margin:32px 0 0;font-size:17px;line-height:27px;color:var(--navy)}
.edu__option+.edu__note{margin-top:14px}
.page--exosomes .rj-skin.edu .rj-arch.edu__arch{border-radius:28px}
/* The exosomes picture is a rectangle, not a cut-out, so in the guide it sits in a rounded frame like this, not the arch (its top corners stuck out past the arch line, 30 Oct 2026). */
.page--exosomes .edu-guide__arch{padding:22px;border-radius:28px}
.page--exosomes .edu-guide__stage{aspect-ratio:776/915}
.page--exosomes .edu-guide__art{border-radius:14px}
/* ZO page (30 Oct 2026): the guide's picture is the concern's product photo, not a drawing. The five photos stack in the stage and the
   chosen concern's fades in (script.js adds .is-on to the matching [data-zone]). The stage is cut to the arch, so the square photo stays inside the gold line. */
.page--zo-skin-health .edu-guide__stage{aspect-ratio:900/1182;overflow:hidden;border-radius:999px 999px 8px 8px;background:var(--navy)}
.edu-guide__photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%;opacity:0;transition:opacity .6s var(--ease-ui)}
.edu-guide__photo.is-on{opacity:1}
.page--zo-skin-health .edu-guide__rj::before{content:"How a ZO routine is designed to help"}
.page--zo-skin-health .edu-guide__how{margin-top:56px}
@media (prefers-reduced-motion:reduce){.edu-guide__photo{transition:none}}
@media (max-width:900px){.page--exosomes .edu-guide__arch{padding:14px;border-radius:22px}}

/* sylfirm education (29 Oct 2026) */
/* The skin block is 880 by 1168, not the face's 1744 by 2336. Blood vessels are outlined along their branches. A cube sits in a rounded frame, not the arch. */
.page--sylfirm-rf-needling .edu__stage{aspect-ratio:880/1168}
.page--sylfirm-rf-needling .edu__zone.edu__zone--line path{fill:rgba(255,251,240,.18)}
.page--sylfirm-rf-needling .rj-skin.edu .rj-arch.edu__arch{border-radius:28px}
/* cellulite education (29 Oct 2026) */
.edu--cellulite .edu__option{max-width:640px;margin-top:36px;font-size:15px;line-height:24px;color:var(--navy)}
.edu--cellulite .edu__option + .edu__note{margin-top:14px}

/* wrinkle education guide (30 Oct 2026) */
/* Paper, "B + Steps v2 — Picture cards": a numbered accordion beside the face in a gold arch, numbered spots on the face (the
   active one opens into a navy pill with its name), then three picture cards. Wrinkle page only (.edu--guide); the other education
   sections keep the .edu__* rules above. .rj-skin gives the ground, grain and h2 sizes. Script: "Education section" in script.js. */
.edu-guide{display:grid;grid-template-columns:minmax(0,600px) minmax(0,620px);grid-template-rows:auto 1fr;grid-template-areas:"copy figure" "list figure" "how how";justify-content:space-between;column-gap:48px;padding-top:110px;padding-bottom:100px}
.edu-guide__copy{grid-area:copy;display:flex;flex-direction:column;gap:28px;padding-top:20px}
.rj-skin.edu--guide h2{line-height:70px;letter-spacing:-.01em}
.rj-skin.edu--guide h2 em{line-height:70px}
/* Cream damask on the guide (Nik, 30 Oct 2026), as .cream-run does on Home, fainter (.86 against .8) because long reading
   text sits on it. Any page with .edu--guide gets this; there are two layouts:
   1. guide then What to expect (Wrinkle, Volumising, Microneedling, Cellulite, Exosomes): one damask runs on through What to
      expect. They are separate Builder sections, so nothing can wrap them: the guide's ground reaches down past its own foot
      by about What to expect's height (only sideways is clipped) and What to expect lets it show through. One damask covers
      the lot, as the image doesn't tile; anything past What to expect sits under the navy questions, which paint over it.
   2. guide, the navy result, then What to expect (Rejuran, Sylfirm): each cream section carries its own damask and fades. */
.rj-skin.edu--guide{--damask-wash:.86;overflow:visible;overflow-x:clip;background:none}
.rj-skin.edu--guide::before{inset:0;opacity:1;background:linear-gradient(180deg,var(--ground-fade)) top/100% 140px no-repeat,linear-gradient(0deg,var(--ground-fade)) bottom/100% 140px no-repeat,linear-gradient(rgba(245,240,232,var(--damask-wash)),rgba(245,240,232,var(--damask-wash))),var(--damask-tall) center top/cover,var(--ground)}
.rj-skin.edu--guide:has(+ .rj-expect)::before{bottom:-1000px;background:linear-gradient(180deg,var(--ground-fade)) top/100% 140px no-repeat,linear-gradient(rgba(245,240,232,var(--damask-wash)),rgba(245,240,232,var(--damask-wash))),var(--damask-tall) center top/cover,var(--ground)}
@media (max-width:900px){.rj-skin.edu--guide:has(+ .rj-expect)::before{bottom:-1400px}}
.rj-skin.edu--guide + .rj-expect{position:relative;isolation:isolate;background:none}
/* The damask fades back to plain cream at the foot of What to expect, before the navy */
.rj-skin.edu--guide + .rj-expect::before{content:"";position:absolute;inset:auto 0 0;height:140px;z-index:-1;pointer-events:none;background:linear-gradient(0deg,var(--ground-fade))}
/* Layout 2: What to expect after the navy result gets its own damask, faded at both edges */
body:has(.edu--guide) .rj-result + .rj-expect{--damask-wash:.86;position:relative;isolation:isolate;background:var(--ground)}
body:has(.edu--guide) .rj-result + .rj-expect::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--ground-fade)) top/100% 140px no-repeat,linear-gradient(0deg,var(--ground-fade)) bottom/100% 140px no-repeat,linear-gradient(rgba(245,240,232,var(--damask-wash)),rgba(245,240,232,var(--damask-wash))),var(--damask-tall) center top/cover}
/* The navy around these cream sections meets them through the site's eased fade over 180px (120px on phones), not the
   template's straight 80px one, which showed a hard start line and a band (Nik, 30 Oct 2026). */
.rj-hero:has(+ .edu--guide)::after{background:linear-gradient(0deg,var(--ground-fade)) bottom/100% 180px no-repeat,rgba(21,35,89,.35)}
.edu--guide + .rj-result::after{background:linear-gradient(180deg,var(--ground-fade)) top/100% 180px no-repeat,linear-gradient(0deg,var(--ground-fade)) bottom/100% 180px no-repeat,rgba(21,35,89,.35)}
body:has(.edu--guide) .rj-expect + .rj-faq::after{background:linear-gradient(180deg,var(--ground-fade)) top/100% 180px no-repeat,linear-gradient(180deg,rgba(21,35,89,0) 0,rgba(245,240,232,.6) 65%,var(--ground) 100%) bottom/100% 80px no-repeat,rgba(21,35,89,.35)}
@media (max-width:900px){
  .rj-hero:has(+ .edu--guide)::after{background-size:100% 120px,auto}
  .edu--guide + .rj-result::after{background-size:100% 120px,100% 120px,auto}
  body:has(.edu--guide) .rj-expect + .rj-faq::after{background-size:100% 120px,100% 80px,auto}
}
/* Content stays clear of those fades: the fade's height plus 60px of plain navy (Nik, 30 Oct 2026) */
.rj-hero:has(+ .edu--guide) .rj-hero__inner{padding-bottom:240px}
.edu--guide + .rj-result .rj-result__inner{padding-top:240px;padding-bottom:240px}
body:has(.edu--guide) .rj-expect + .rj-faq .rj-faq__inner{padding-top:240px}
@media (max-width:900px){
  .rj-hero:has(+ .edu--guide) .rj-hero__inner{padding-bottom:180px}
  .edu--guide + .rj-result .rj-result__inner{padding-top:180px;padding-bottom:180px}
  body:has(.edu--guide) .rj-expect + .rj-faq .rj-faq__inner{padding-top:180px}
}
.edu-guide__copy p{font-size:17px;line-height:28px;color:var(--muted)}

.edu-guide__figure{grid-area:figure;display:flex;justify-content:flex-end;align-items:flex-start}
.edu-guide__arch{container-type:inline-size;width:min(100%,560px);padding:50px 20px 32px;border:1px solid var(--gold-light);border-radius:50cqw 50cqw 10px 10px}
.edu-guide__stage{position:relative;aspect-ratio:1744/2336}
.edu-guide__art{display:block;width:100%;height:100%}
.edu-guide__ages{display:grid;grid-template-columns:1fr 1fr;margin:24px 0 0;padding-top:14px;border-top:1px solid var(--cream-dim);font-size:11px;font-weight:600;line-height:14px;letter-spacing:.18em;text-transform:uppercase;text-align:center;color:var(--label)}

.edu-guide__spot{position:absolute;left:var(--x);top:var(--y);translate:-20px -50%;display:flex;align-items:center;gap:10px;height:40px;padding:4px;border:0;border-radius:20px;background:transparent;font-family:var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .3s var(--ease-ui)}
.edu-guide__dot{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--navy);border-radius:50%;background:var(--cream);font-size:13px;font-weight:700;line-height:16px;color:var(--navy);box-shadow:0 2px 8px -2px rgba(21,35,89,.25);transition:border-color .3s var(--ease-ui),box-shadow .3s var(--ease-ui)}
.edu-guide__tag{display:none;font-size:14px;font-weight:600;line-height:18px;white-space:nowrap;color:var(--cream)}
.edu-guide__spot.is-active{z-index:1;padding-right:16px;background:var(--navy);box-shadow:0 8px 20px -8px rgba(10,18,56,.55)}
.edu-guide__spot.is-active .edu-guide__dot{border-color:var(--cream);box-shadow:none}
.edu-guide__spot.is-active .edu-guide__tag{display:block}
.edu-guide__spot:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (hover:hover){.edu-guide__spot:not(.is-active):hover .edu-guide__dot{background:#fff}}

.edu-guide__list{grid-area:list;align-self:start;margin:44px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--cream-dim)}
.edu-guide__item{border-top:1px solid var(--cream-dim);transition:border-color .3s var(--ease-ui)}
.edu-guide__item.is-active{border-top-color:var(--navy)}
.edu-guide__item button{display:flex;align-items:center;gap:20px;width:100%;padding:20px 0;border:0;background:none;text-align:left;font-family:var(--sans);cursor:pointer;transition:padding .4s var(--ease-ui)}
.edu-guide__num{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;font-size:14px;font-weight:600;line-height:18px;color:var(--navy);transition:background-color .3s var(--ease-ui),border-color .3s var(--ease-ui),color .3s var(--ease-ui)}
.edu-guide__name{flex:1;font-size:22px;font-weight:500;line-height:30px;color:var(--muted);transition:color .3s var(--ease-ui)}
.edu-guide__sign{position:relative;flex:none;width:16px;height:16px}
.edu-guide__sign::before,.edu-guide__sign::after{content:"";position:absolute;left:3px;top:7.3px;width:10px;height:1.4px;background:var(--gold);transition:transform .3s var(--ease-ui),background-color .3s var(--ease-ui)}
.edu-guide__sign::after{transform:rotate(90deg)}
.edu-guide__item.is-active .edu-guide__num{border-color:var(--navy);background:var(--navy);color:var(--cream)}
.edu-guide__item.is-active .edu-guide__name{font-weight:600;color:var(--navy)}
.edu-guide__item.is-active .edu-guide__sign::before,.edu-guide__item.is-active .edu-guide__sign::after{background:var(--navy)}
.edu-guide__item.is-active .edu-guide__sign::after{transform:rotate(0)}
.edu-guide__item.is-active button{padding-bottom:14px}
@media (hover:hover){.edu-guide__item:not(.is-active) button:hover .edu-guide__name{color:var(--navy)}}
.edu-guide__item button:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.edu-guide__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-ui)}
.edu-guide__body p{min-height:0;overflow:hidden;margin:0;padding-left:54px;font-size:16px;line-height:27px;color:var(--muted);visibility:hidden;transition:visibility 0s .4s,padding .4s var(--ease-ui)}
.edu-guide__item.is-active .edu-guide__body{grid-template-rows:1fr}
.edu-guide__item.is-active .edu-guide__body p{padding-bottom:26px;visibility:visible;transition:padding .4s var(--ease-ui)}
/* Rejuran page: each concern has its education paragraph, then a second one under a small gold label (the label is CSS, so it is not an editable field). */
.edu-guide__inner{min-height:0;overflow:hidden}
.edu-guide__item.is-active .edu-guide__inner p:not(:last-child){padding-bottom:14px}
.edu-guide__rj{padding-top:0;color:var(--navy)}
.edu-guide__rj::before{content:"How Rejuran is designed to help";display:block;margin-bottom:4px;font-size:11px;font-weight:600;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

.edu-guide__how{grid-area:how;display:flex;flex-direction:column;align-items:center;gap:48px;margin-top:104px}
.edu-guide__how-head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.edu-guide__how h3{margin:0;font-family:var(--display);font-size:54px;font-weight:400;line-height:58px;letter-spacing:-.01em;color:var(--navy)}
.edu-guide__how h3 em{color:#9a7f4e}
.edu-guide__how-head p{margin:0;font-size:16px;line-height:26px;color:var(--muted)}
.edu-guide__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;width:100%;margin:0;padding:0;list-style:none}
.edu-guide__card{display:flex;flex-direction:column;overflow:clip;border:1px solid var(--cream-dim);border-radius:12px;background:var(--card)}
.edu-guide__pic{position:relative;aspect-ratio:5/3}
.edu-guide__pic img{display:block;width:100%;height:100%;object-fit:cover}
.edu-guide__age{position:absolute;left:16px;top:16px;padding:6px 12px;border-radius:999px;background:rgba(250,248,243,.92);font-size:11px;font-weight:600;line-height:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.edu-guide__text{display:flex;flex-direction:column;gap:12px;padding:28px 30px 32px}
.edu-guide__step{font-family:var(--display);font-size:36px;line-height:38px;color:#9a7f4e}
.edu-guide__text h4{margin:0;font-family:var(--sans);font-size:19px;font-weight:600;line-height:26px;letter-spacing:0;color:var(--navy)}
.edu-guide__text p{margin:0;font-size:15px;line-height:25px;color:var(--muted)}
.edu-guide__note{max-width:640px;margin:0;font-size:13px;line-height:21px;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .edu-guide__spot,.edu-guide__dot,.edu-guide__item,.edu-guide__item button,.edu-guide__num,.edu-guide__name,.edu-guide__sign::before,.edu-guide__sign::after,.edu-guide__body,.edu-guide__body p,.edu-guide__item.is-active .edu-guide__body p{transition:none}
}
@media (max-width:1240px){
  .rj-skin.edu--guide h2,.rj-skin.edu--guide h2 em{line-height:58px}
  .edu-guide__name{font-size:20px;line-height:28px}
  .edu-guide__steps{gap:24px}
  .edu-guide__text{padding:24px 24px 28px}
}
@media (max-width:900px){
  .edu-guide{display:flex;flex-direction:column;padding-top:56px;padding-bottom:56px}
  .edu-guide__copy{gap:16px;padding-top:0}
  .rj-skin.edu--guide h2,.rj-skin.edu--guide h2 em{line-height:46px}
  .edu-guide__copy p{font-size:16px;line-height:26px}
  .edu-guide__figure{justify-content:center;margin-top:36px}
  .edu-guide__arch{width:min(100%,460px);padding:36px 14px 22px}
  .edu-guide__ages{margin-top:16px;padding-top:12px;font-size:10px;letter-spacing:.16em}
  /* No room for the pill beside the face on a phone: the active spot is a filled navy dot and the list names it. */
  .edu-guide__spot,.edu-guide__spot.is-active{translate:-50% -50%;padding:4px;background:transparent;box-shadow:none}
  .edu-guide__spot.is-active .edu-guide__tag{display:none}
  .edu-guide__spot.is-active .edu-guide__dot{border-color:var(--navy);background:var(--navy);color:var(--cream);box-shadow:0 0 0 3px var(--cream),0 4px 12px -2px rgba(21,35,89,.45)}
  .edu-guide__list{margin-top:32px}
  .edu-guide__item button{gap:16px;padding:16px 0}
  .edu-guide__item.is-active button{padding-bottom:10px}
  .edu-guide__name{font-size:18px;line-height:26px}
  .edu-guide__body p{padding-left:50px;font-size:15px;line-height:25px}
  .edu-guide__item.is-active .edu-guide__body p{padding-bottom:20px}
  .edu-guide__item.is-active .edu-guide__inner p:not(:last-child){padding-bottom:12px}
  .edu-guide__how{gap:32px;margin-top:64px}
  .edu-guide__how h3{font-size:40px;line-height:44px}
  .edu-guide__steps{grid-template-columns:minmax(0,1fr);gap:20px}
}