/* ==========================================================================
SKIN+ — v2, built to the Lumière Skin Clinic layout in the SKIN+ blue-white
palette. Section order, composition and component shapes follow the
reference; every colour, type and motion decision is SKIN+'s own.
No build step, no framework, no runtime dependency. Motion is CSS where it
can be and rAF where it must be.
========================================================================== */
/* ------------------------------------------------------------- tokens */
:root{
/* ground — the approved SKIN+ blue-white */
--cream: #EDF3FA; /* page ground (reference used a warm cream) */
--cream-2: #E3ECF8; /* recessed band */
--card: #FFFFFF;
--card-2: #F6FAFE;
--tint: #DFE9F7; /* testimonial panel, chips */
/* ink */
--ink: #16233F;
--ink-2: #24365C;
--ink-dim: rgba(22,35,63,.76);
/* Alphas solved numerically, not by eye. Composited over the darkest surface
v2 puts muted text on (the testimonial panel's #D7E4F6), .655 is the floor
that clears WCAG AA 4.5:1; .62 measured 4.09 and failed. .68 leaves headroom. */
--ink-faint: rgba(22,35,63,.68);
--on-dark: #FFFFFF;
--on-dark-dim:rgba(255,255,255,.74);
/* accents */
--blue: #2F5FE0;
--blue-deep: #1B3FA8;
--blue-soft: #7B9BEE;
--sky: #B9D2F5;
--deep: #16233F; /* the dark panel — reference used near-black brown */
--deep-2: #1E2F52;
--gold: #C9A961;
/* lines */
--line: rgba(22,35,63,.12);
--line-2: rgba(22,35,63,.22);
--line-inv: rgba(255,255,255,.22);
/* type */
--dsp: "Newsreader", "Iowan Old Style", Georgia, serif;
--ui: "Montserrat", "Segoe UI", system-ui, sans-serif;
/* geometry */
--pad: clamp(20px, 5vw, 76px);
--maxw: 1240px;
--r: 18px;
--r-lg: 26px;
--r-xl: 34px;
/* rhythm */
--sec: clamp(68px, 7.2vw, 124px);
/* motion */
--e: cubic-bezier(.22,1,.36,1);
--e-io: cubic-bezier(.65,0,.35,1);
--t: .5s;
}
/* -------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
background:var(--cream);
color:var(--ink);
font:400 16px/1.6 var(--ui);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ list-style:none; padding:0; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
.skip{
position:fixed; top:10px; left:10px; z-index:999; transform:translateY(-160%);
background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px;
font-size:.8rem; transition:transform .25s var(--e);
}
.skip:focus{ transform:none; }
/* Read by screen readers, painted for nobody. The hero's h1 uses it: the
banners carry the visible wordmark, but the document still needs a title. */
.sr{
position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Flags an invented figure — see the footer note. */
.uv{ position:relative; }
.uv::after{
content:""; display:inline-block; vertical-align:super;
width:4px; height:4px; margin-left:3px; border-radius:50%;
background:var(--gold);
}
/* =========================================================== TYPE SCALE */
.dsp{
font-family:var(--dsp);
font-weight:400;
font-size:clamp(2.1rem, 4.6vw, 3.7rem);
line-height:1.12;
letter-spacing:-.012em;
font-variation-settings:"opsz" 40;
text-wrap:balance;
}
.dsp--l{ text-align:left; }
.dsp--inv{ color:var(--on-dark); }
.eyebrow{
font-size:.72rem; font-weight:500; letter-spacing:.11em;
color:var(--ink-faint); text-transform:none;
font-family:var(--dsp); font-style:italic;
}
.lede{
max-width:52ch; margin-inline:auto;
font-size:.95rem; line-height:1.72; color:var(--ink-dim);
text-wrap:pretty;
}
/* ============================================================== BUTTONS */
.btn{
position:relative; display:inline-flex; align-items:center; gap:16px;
padding:7px 7px 7px 24px; border-radius:999px;
font-size:.83rem; font-weight:500; letter-spacing:.005em;
isolation:isolate; overflow:hidden;
transition:transform .35s var(--e), box-shadow .35s var(--e);
will-change:transform;
}
.btn > span{ position:relative; z-index:2; white-space:nowrap; }
.btn--lg{ padding:9px 9px 9px 30px; font-size:.9rem; gap:20px; }
/* the sweep sits behind the label and wipes up on hover */
.btn::before{
content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
transform:translateY(101%); transition:transform .5s var(--e);
}
.btn:hover::before{ transform:translateY(0); }
.btn__arw{
position:relative; z-index:2; flex:none;
width:34px; height:34px; border-radius:50%;
display:grid; place-items:center;
transition:background .45s var(--e), color .45s var(--e), transform .45s var(--e);
}
.btn--lg .btn__arw{ width:38px; height:38px; }
.btn__arw::before,.btn__arw::after{
content:""; position:absolute; transition:transform .45s var(--e);
}
.btn__arw::before{ width:12px; height:1.4px; background:currentColor; }
.btn__arw::after{
width:7px; height:7px; border-top:1.4px solid currentColor; border-right:1.4px solid currentColor;
transform:translateX(3px) rotate(45deg);
}
.btn:hover .btn__arw::before{ transform:translateX(3px); }
.btn:hover .btn__arw::after{ transform:translateX(6px) rotate(45deg); }
.btn__arw--rev::after{ transform:translateX(-3px) rotate(-135deg); }
.btn__arw--sm{ width:16px; height:16px; }
.btn__arw--sm::before{ width:11px; }
/* dark (primary) */
.btn--dark{ background:var(--deep); color:var(--on-dark); }
.btn--dark::before{ background:var(--blue); }
.btn--dark .btn__arw{ background:#fff; color:var(--deep); }
.btn--dark:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(22,35,63,.55); }
.btn--dark:hover .btn__arw{ transform:rotate(45deg); }
/* light on dark */
.btn--light{ background:#fff; color:var(--deep); }
.btn--light::before{ background:var(--sky); }
.btn--light .btn__arw{ background:var(--deep); color:#fff; }
.btn--light:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(0,0,0,.4); }
.btn--light:hover .btn__arw{ transform:rotate(45deg); }
/* outlined on dark */
.btn--outline{ color:var(--on-dark); box-shadow:inset 0 0 0 1px var(--line-inv); }
.btn--outline::before{ background:rgba(255,255,255,.1); }
.btn--outline .btn__arw{ background:#fff; color:var(--deep); }
.btn--outline:hover{ transform:translateY(-2px); }
.btn--outline:hover .btn__arw{ transform:rotate(45deg); }
/* circular nav arrows */
.arw{
width:46px; height:46px; border-radius:50%; flex:none;
display:grid; place-items:center; position:relative;
box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink);
transition:background .35s var(--e), color .35s var(--e), transform .35s var(--e), box-shadow .35s var(--e);
}
.arw .btn__arw{ width:auto; height:auto; background:none; }
.arw:hover{ background:var(--deep); color:#fff; box-shadow:none; transform:scale(1.07); }
.arw--fill{ background:var(--deep); color:#fff; box-shadow:none; }
.arw--fill:hover{ background:var(--blue); }
.arw--ghost{ background:rgba(255,255,255,.7); }
.arws{ display:flex; gap:10px; }
/* ============================================================== LANGUAGE
The toggle lives beside Book Now and reads as a pair — the live language
solid, the other one dimmed — so it is obvious it switches rather than
opens a menu. */
.mast__end{ display:flex; align-items:center; gap:10px; }
.lang{
display:inline-flex; align-items:center; gap:3px;
padding:9px 13px; border-radius:999px;
font-size:.72rem; font-weight:700; letter-spacing:.05em;
background:rgba(255,255,255,.55); color:var(--ink);
backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 26px -18px rgba(22,35,63,.55);
transition:background .4s var(--e), box-shadow .4s var(--e), transform .3s var(--e);
}
.lang:hover{ transform:translateY(-1px); background:rgba(255,255,255,.8); }
.lang__sep{ opacity:.35; font-weight:400; }
.lang__alt{ opacity:.45; }
.lang:hover .lang__alt{ opacity:.8; }
.mast.is-solid .lang{
background:rgba(255,255,255,.86);
box-shadow:inset 0 0 0 1px var(--line), 0 10px 30px -20px rgba(22,35,63,.5);
}
/* the first-visit chooser */
.langpick{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; }
.langpick__scrim{
position:absolute; inset:0; background:rgba(12,22,44,.55);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
animation:scrimIn .5s var(--e) both;
}
.langpick__box{
position:relative; width:min(460px, 100%);
padding:clamp(30px,4vw,46px) clamp(24px,3.4vw,40px);
border-radius:var(--r-lg); background:var(--cream);
box-shadow:0 50px 100px -40px rgba(12,22,44,.7);
text-align:center;
animation:pickIn .6s var(--e) both;
}
@keyframes pickIn{ from{ opacity:0; transform:translateY(18px) scale(.96); } }
.langpick.is-out .langpick__box{ animation:pickIn .3s var(--e) reverse both; }
.langpick.is-out .langpick__scrim{ animation:scrimIn .3s var(--e) reverse both; }
.langpick__glyph{ display:block; width:30px; margin:0 auto 18px; color:var(--blue-deep); }
.langpick__glyph svg{ width:100%; height:auto; }
.langpick__t{
font-family:var(--dsp); font-weight:400; font-size:1.6rem; line-height:1.2;
margin-bottom:24px;
}
.langpick__t span{ display:block; font-size:1.02rem; color:var(--ink-faint); margin-top:5px; }
.langpick__btns{ display:grid; gap:10px; }
.langpick__b{
display:grid; gap:2px; padding:15px 20px; border-radius:14px; text-align:left;
background:#fff; box-shadow:inset 0 0 0 1px var(--line);
transition:background .35s var(--e), color .35s var(--e), transform .35s var(--e), box-shadow .35s var(--e);
}
.langpick__b b{ font-size:.95rem; font-weight:600; }
.langpick__b span{ font-size:.76rem; color:var(--ink-faint); transition:color .35s var(--e); }
.langpick__b:hover{
background:var(--deep); color:#fff; transform:translateY(-2px);
box-shadow:0 16px 34px -18px rgba(22,35,63,.7);
}
.langpick__b:hover span{ color:rgba(255,255,255,.72); }
.langpick__n{ margin-top:20px; font-size:.7rem; line-height:1.6; color:var(--ink-faint); }
/* ======================================================== TREATMENT PAGE */
body.is-tx{ padding-top:0; }
.tx{
max-width:calc(var(--maxw) + var(--pad) * 2); margin-inline:auto;
padding:clamp(104px,11vw,168px) var(--pad) 0;
}
.crumb{ font-size:.76rem; color:var(--ink-faint); margin-bottom:clamp(20px,2.4vw,34px); }
.crumb a{ color:var(--ink-dim); }
.crumb a:hover{ color:var(--blue-deep); }
.crumb span[aria-hidden]{ margin:0 7px; opacity:.5; }
.tx__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,4.4vw,68px); align-items:start; }
.tx__tags{ display:flex; align-items:center; gap:9px; margin-bottom:14px; flex-wrap:wrap; }
.tx__cat{ font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--blue-deep); }
.tx__name{
font-family:var(--dsp); font-weight:400;
font-size:clamp(2rem,4vw,3.1rem); line-height:1.1; letter-spacing:-.012em;
margin-bottom:12px; text-wrap:balance;
}
.tx__rate{ display:flex; align-items:center; gap:9px; font-size:.8rem; color:var(--ink-dim); margin-bottom:18px; }
.tx__rate .grc__stars{ font-size:.8rem; }
.tx__price{ font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums; }
.tx__price b{ font-weight:700; }
.tx__quick{ font-size:.8rem; color:var(--ink-faint); margin-top:5px; }
.tx__desc{ font-size:.93rem; line-height:1.75; color:var(--ink-dim); margin:18px 0; text-wrap:pretty; }
.tx__meter{ margin-bottom:6px; }
.tx__h{
font-family:var(--dsp); font-size:1.16rem; font-weight:400;
margin-top:clamp(22px,2.4vw,34px); margin-bottom:12px;
}
.tx__cta{ width:100%; justify-content:space-between; margin-top:clamp(20px,2.4vw,30px); }
.tx__trust{ display:grid; gap:7px; margin-top:14px; }
.tx__trust li{ position:relative; padding-left:20px; font-size:.76rem; color:var(--ink-faint); }
.tx__trust li::before{
content:""; position:absolute; left:0; top:.42em;
width:5px; height:9px; border:solid var(--blue); border-width:0 1.6px 1.6px 0; rotate:42deg;
}
.fit{ display:grid; gap:9px; }
.fit li{ position:relative; padding-left:26px; font-size:.85rem; line-height:1.6; color:var(--ink-dim); }
.fit li::before{
content:""; position:absolute; left:0; top:.3em;
width:16px; height:16px; border-radius:50%; background:var(--blue);
}
.fit li::after{
content:""; position:absolute; left:5px; top:.62em;
width:4px; height:8px; border:solid #fff; border-width:0 1.6px 1.6px 0; rotate:42deg;
}
.fit--no li::before{ background:var(--line-2); }
.fit--no li::after{
left:4.6px; top:.72em; width:7px; height:0; border-width:0 0 1.6px 0; border-color:var(--ink); rotate:0deg;
}
.tx__hero{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--tint); }
.tx__hero img{ width:100%; height:100%; object-fit:cover; }
.bas--one{ grid-template-columns:1fr; margin-bottom:0; }
/* the treatment page draws on the portrait results-gallery plates, so its
single slider overrides the 4/3 the homepage 2-up pair uses */
.bas--one .ba{ aspect-ratio:9/10; }
.tx__note{ font-size:.72rem; line-height:1.6; color:var(--ink-faint); margin-top:12px; }
/* .sec sets text-align:center and is defined later in this file, so these
need the extra class to win rather than relying on source order. */
.sec.tx__how, .sec.tx__how .tx__side, .sec.sec--rel{ text-align:left; }
.sec.sec--rel > .eyebrow, .sec.sec--rel > .dsp, .sec.sec--rel > .rv{ text-align:center; }
.tx__cols{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4.4vw,64px); align-items:start; }
.tx__actives{ font-size:.86rem; line-height:1.7; color:var(--ink-dim); margin:16px 0 clamp(24px,3vw,38px); }
.tx__actives b{ font-weight:600; color:var(--ink); }
.steps--tx{ padding-left:0; }
.steps--tx::before, .steps--tx::after{ display:none; }
.steps--tx .step{ padding-left:62px; opacity:1; }
.steps--tx .step__ic{
background:var(--deep); color:#fff; box-shadow:none;
font-family:var(--dsp); font-size:.86rem; font-weight:400; font-variant-numeric:tabular-nums;
}
.tx__side{
padding:clamp(22px,2.6vw,32px); border-radius:var(--r);
background:#fff; box-shadow:inset 0 0 0 1px var(--line);
position:sticky; top:96px;
}
.tx__side .tx__h:first-child{ margin-top:0; }
.spec{ display:grid; gap:0; }
.spec div{
display:flex; align-items:baseline; justify-content:space-between; gap:14px;
padding:10px 0; border-bottom:1px solid var(--line);
}
.spec dt{ font-size:.76rem; color:var(--ink-faint); flex:none; }
.spec dd{ font-size:.82rem; font-weight:500; text-align:right; }
.expect{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:left; margin-top:clamp(28px,4vw,46px); }
.exp{
display:grid; gap:9px; align-content:start;
padding:clamp(22px,2.6vw,30px); border-radius:var(--r);
background:#fff; box-shadow:inset 0 0 0 1px var(--line), 0 18px 40px -34px rgba(22,35,63,.5);
}
.exp__n{ font-family:var(--dsp); font-size:1.6rem; font-weight:300; color:var(--blue-soft); line-height:1; }
.exp h3{ font-family:var(--dsp); font-size:1.14rem; font-weight:400; }
.exp p{ font-size:.84rem; line-height:1.72; color:var(--ink-dim); }
.sec--txfaq{ text-align:center; }
.acc-wrap{ max-width:760px; margin:clamp(28px,4vw,46px) auto 0; text-align:left; }
.rel{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:left;
margin:clamp(28px,4vw,46px) 0 clamp(26px,3.4vw,40px); }
.relc{
display:grid; gap:8px; align-content:start;
padding:20px; border-radius:var(--r); background:#fff;
box-shadow:inset 0 0 0 1px var(--line);
transition:transform .45s var(--e), box-shadow .45s var(--e);
}
.relc:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--line-2), 0 22px 44px -26px rgba(22,35,63,.5); }
.relc__cat{ font-size:.64rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }
.relc__n{ font-family:var(--dsp); font-size:1.06rem; font-weight:400; line-height:1.3; }
.relc__p{
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-top:4px; padding-top:12px; border-top:1px solid var(--line);
font-size:.86rem; font-weight:600; font-variant-numeric:tabular-nums;
}
.relc:hover .relc__p .btn__arw::before{ transform:translateX(3px); }
.relc:hover .relc__p .btn__arw::after{ transform:translateX(6px) rotate(45deg); }
/* the results link rides alongside the Before & after heading rather than
under the note: the bloom seam carries a negative margin and z-index 5, so
anything at the very bottom of .tx gets painted over by the cloud art. */
/* a before/after supplied as a grid of panels rather than a single pair */
.bafull{
border-radius:var(--r); overflow:hidden;
box-shadow:0 24px 50px -34px rgba(22,35,63,.6);
animation:baIn .7s var(--e) both;
}
.bafull img{ display:block; width:100%; height:auto; }
.tx__bahead{
display:flex; align-items:baseline; justify-content:space-between;
gap:14px; flex-wrap:wrap;
}
.tx__bahead .tx__h{ margin-bottom:0; }
.tx__more{
display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
font-size:.76rem; font-weight:500; color:var(--blue-deep);
}
.tx__more span{
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
transition:background-size .45s var(--e);
}
.tx__more:hover span{ background-size:100% 1px; }
.tx__more .btn__arw{ width:22px; height:22px; background:var(--tint); color:var(--deep); }
.tx__more:hover .btn__arw{ background:var(--deep); color:#fff; }
.tx__missing{ text-align:center; padding-top:clamp(140px,16vw,220px); }
/* the treatment name in a tray row now opens the detail page */
.tr__link{
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
transition:background-size .45s var(--e);
}
.tr:hover .tr__link{ background-size:100% 1px; }
.tr__more{
display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
padding:7px 12px; border-radius:999px; font-size:.72rem; font-weight:500;
color:var(--ink-dim); box-shadow:inset 0 0 0 1px var(--line);
transition:background .35s var(--e), color .35s var(--e), box-shadow .35s var(--e);
}
.tr__more:hover{ background:var(--tint); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
/* ============================================================= MASTHEAD */
.mast{
position:fixed; inset:14px 0 auto; z-index:60;
display:flex; align-items:center; justify-content:space-between; gap:18px;
padding-inline:var(--pad);
transition:transform .5s var(--e);
}
.mast.is-hidden{ transform:translateY(-160%); }
.mark{
display:inline-flex; align-items:center; gap:10px; color:var(--ink);
padding:9px 18px 9px 14px; border-radius:999px;
background:rgba(255,255,255,.55);
backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 26px -18px rgba(22,35,63,.55);
transition:background .5s var(--e), box-shadow .5s var(--e);
}
/* The official 2022 mark, supplied by the client. It is lock-up artwork -
"SKIN+" over "by EUROMEDICA" - so it is placed as one image rather than
rebuilt from type, and the pill's padding tightens to suit it. */
.mark{ padding:7px 16px; }
.mark__img{
display:block; width:auto; height:34px;
transition:transform .5s var(--e);
}
.mark:hover .mark__img{ transform:scale(1.03); }
.mast.is-solid .mark{
background:rgba(255,255,255,.86);
box-shadow:inset 0 0 0 1px var(--line), 0 10px 30px -20px rgba(22,35,63,.5);
}
/* The reference floats a translucent nav over a dark photograph and lets it
carry white type. Our photography is high-key blue-white, so the same
component is inverted — white glass, navy ink — which keeps the shape and
the float while staying legible against a bright frame. */
.pillnav{
position:relative; display:flex; align-items:center; gap:2px;
padding:5px; border-radius:999px;
background:rgba(255,255,255,.55);
backdrop-filter:blur(14px) saturate(150%);
-webkit-backdrop-filter:blur(14px) saturate(150%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 26px -18px rgba(22,35,63,.55);
transition:background .5s var(--e), box-shadow .5s var(--e);
}
.mast.is-solid .pillnav{
background:rgba(255,255,255,.86);
box-shadow:inset 0 0 0 1px var(--line), 0 10px 30px -20px rgba(22,35,63,.5);
}
.pillnav__a{
position:relative; z-index:2; padding:9px 17px; border-radius:999px;
font-size:.79rem; font-weight:500; color:var(--ink-dim);
transition:color .4s var(--e);
white-space:nowrap;
}
.pillnav__a:hover{ color:var(--ink); }
.pillnav__a.is-on,
.pillnav__a.is-on:hover{ color:#fff; }
.pillnav__ink{
position:absolute; z-index:1; top:5px; bottom:5px; left:0; width:0;
border-radius:999px; background:var(--deep);
transition:transform .55s var(--e), width .55s var(--e), opacity .3s;
opacity:0;
}
.pillnav.is-ready .pillnav__ink{ opacity:1; }
.mast__cta{ box-shadow:0 12px 30px -16px rgba(22,35,63,.6); }
.burger{ display:none; width:44px; height:44px; border-radius:50%;
background:var(--deep); place-items:center; gap:5px; flex-direction:column; }
.burger span{ display:block; width:17px; height:1.6px; background:#fff; transition:transform .4s var(--e), opacity .3s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }
.mobnav{
position:fixed; inset:74px 12px auto; z-index:59;
background:rgba(255,255,255,.92);
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
border-radius:var(--r-lg); padding:18px; display:grid; gap:2px;
box-shadow:0 30px 70px -30px rgba(22,35,63,.5), inset 0 0 0 1px var(--line);
animation:mobIn .45s var(--e) both;
}
@keyframes mobIn{ from{ opacity:0; transform:translateY(-12px) scale(.98); } }
.mobnav a:not(.btn){ padding:13px 14px; border-radius:12px; font-size:.95rem; font-weight:500; }
.mobnav a:not(.btn):hover{ background:var(--cream); }
.mobnav .btn{ margin-top:10px; justify-content:space-between; }
/* ================================================================= HERO
An auto-advancing two-slide stage. The slides are finished marketing
banners with their own typography baked in, which drives every decision
below: nothing may crop them, and nothing may sit on top of them.
Each slide is built from the same asset twice —
.hs__amb cover, blown up and blurred, fills the viewport
.hs__stage contain, centred, the banner whole and legible
— so a 2.1:1 banner and a 16:9 banner can share one full-height hero
without letterboxing into dead black bars. The ambient layer reads as a
colour wash pulled from the artwork itself.
*/
.hero{
position:relative; min-height:100svh;
overflow:hidden; isolation:isolate;
background:var(--cream);
}
.heroslides{ position:absolute; inset:0; z-index:0; }
/* Crossfade, not slide: the banners are different shapes, and anything that
translates them draws the eye to the mismatch. visibility is delayed off
the back of the fade so an outgoing slide cannot swallow a click. */
.hs{
position:absolute; inset:0;
opacity:0; visibility:hidden;
transition:opacity 1.05s var(--e-io), visibility 0s linear 1.05s;
}
.hs.is-on{
opacity:1; visibility:visible;
transition:opacity 1.05s var(--e-io), visibility 0s;
}
/* ---- the ambient wash -------------------------------------------------- */
/* The source here is a 64px-wide plate (img/hero-slide-N-amb.jpg), not the
banner. Upscaling 64px to a 2560px viewport IS the blur, and it costs
nothing; asking the compositor to blur a 2560px image by 54px every frame
of a 24-second animation costs a great deal. The small filter below only
smooths the bilinear steps. */
.hs__amb{ position:absolute; inset:-8%; z-index:0; }
.hs__amb img{
width:100%; height:100%; object-fit:cover;
filter:blur(16px) saturate(138%) brightness(.95);
transform:scale(1.16);
will-change:transform;
}
.hs.is-on .hs__amb img{ animation:ambDrift 20s var(--e-io) infinite alternate; }
@keyframes ambDrift{
from{ transform:scale(1.16) translate3d(0,0,0); }
to { transform:scale(1.24) translate3d(-1.6%,-1.2%,0); }
}
/* A vignette keeps the blurred wash from reading as a flat blur and stops the
banner's white edges dissolving into it. */
.hs__amb::after{
content:""; position:absolute; inset:0;
background:
radial-gradient(120% 88% at 50% 46%, transparent 38%, rgba(10,20,42,.22) 100%),
linear-gradient(to bottom, rgba(10,20,42,.16) 0%, transparent 22%, transparent 76%, rgba(10,20,42,.14) 100%);
}
/* ---- the banner itself ------------------------------------------------- */
.hs__stage{
/* The pad is held in custom properties because the plate has to subtract it
from the viewport — see below. */
--pad-t:clamp(74px,8vw,108px);
--pad-b:clamp(68px,6.6vw,94px);
--pad-x:clamp(12px,2.6vw,46px);
position:absolute; inset:0; z-index:1;
display:grid; place-items:center;
padding:var(--pad-t) var(--pad-x) var(--pad-b);
}
.hs__plate{
display:block;
max-width:min(100%, 1680px);
/* NOT max-height:100%. The stage's grid row is auto-sized, which makes a
percentage height cyclic, so browsers drop it — the plate then renders at
its natural height and the bottom of the banner is cut off the screen.
Against the viewport the value is always definite, and the hero is
exactly 100svh, so this is the same number the percentage was meant to
produce. */
max-height:calc(100svh - var(--pad-t) - var(--pad-b));
width:auto; height:auto;
object-fit:contain;
border-radius:clamp(8px,1vw,16px);
box-shadow:
0 2px 5px rgba(10,20,42,.10),
0 34px 90px -34px rgba(10,20,42,.58);
will-change:transform, opacity;
background:#fff;
}
/* The entry settles the plate; the float is deliberately tiny — 2.2% over 24
seconds — because the banners carry set type and anything more makes it
swim. */
.hs.is-on .hs__plate{
animation:
plateIn 1.2s var(--e) both,
plateFloat 20s var(--e-io) 1.2s infinite alternate;
}
/* Transform only — deliberately no opacity. The slide's own crossfade already
carries the fade, and tying the banner's visibility to an entry animation
means anything that stops that animation ticking leaves the single most
important element on the page stranded at opacity 0. If this never runs,
the banner is simply there without the settle. */
@keyframes plateIn{
from{ transform:scale(1.045) translateY(10px); }
to { transform:none; }
}
@keyframes plateFloat{
from{ transform:scale(1); }
to { transform:scale(1.022); }
}
/* a whisper of grain, so the blurred wash never bands */
.hero__grain{
position:absolute; inset:0; z-index:2; opacity:.13; mix-blend-mode:overlay;
pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
}
/* ---- the timer rail ---------------------------------------------------- */
/* Glass, because it has to sit legibly over whichever banner is showing and
they are not the same key. */
.heronav{
position:absolute; z-index:3;
left:50%; translate:-50% 0; bottom:clamp(20px,3.2vw,38px);
display:flex; align-items:center; gap:9px;
padding:9px 13px; border-radius:999px;
background:rgba(14,26,52,.34);
backdrop-filter:blur(18px) saturate(150%);
-webkit-backdrop-filter:blur(18px) saturate(150%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), 0 18px 44px -22px rgba(10,20,42,.6);
}
.heronav__d{
position:relative; display:block;
width:46px; height:4px; border-radius:999px;
background:rgba(255,255,255,.30);
overflow:hidden; cursor:pointer;
transition:width .5s var(--e), background .4s var(--e);
}
.heronav__d:hover{ background:rgba(255,255,255,.48); }
.heronav__d i{
position:absolute; inset:0; display:block;
background:#fff; border-radius:inherit;
transform:scaleX(0); transform-origin:left;
}
/* The fill is the clock — it runs for exactly as long as the slide holds, so
the advance is never a surprise. */
.heronav__d[aria-selected="true"] i{ animation:dotFill var(--dur,7s) linear both; }
.heronav__d[aria-selected="true"]{ width:74px; }
@keyframes dotFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
/* paused while the tab is hidden or the hero is scrolled away */
.heroslides.is-held ~ .heronav .heronav__d[aria-selected="true"] i{ animation-play-state:paused; }
[data-load]{ animation:fadeUp .95s var(--e) both; }
[data-load="1"]{ animation-delay:.2s; }
[data-load="2"]{ animation:none; }
[data-load="3"]{ animation-delay:.95s; }
[data-load="4"]{ animation-delay:1.2s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } }
/* ============================================================= SECTIONS */
.sec{
position:relative;
padding:var(--sec) var(--pad);
max-width:calc(var(--maxw) + var(--pad) * 2);
margin-inline:auto;
text-align:center;
}
.sec > .eyebrow{ margin-bottom:18px; }
.sec > .dsp{ margin-bottom:22px; }
.sec > .lede{ margin-bottom:38px; }
.sec > .dsp + .btn,
.sec > div > .btn{ margin-top:6px; }
/* colour zones — the ground shifts as you descend */
.sec--core{ padding-top:clamp(70px,8vw,130px); }
.sec--svc{ background:linear-gradient(180deg, transparent, var(--cream-2) 22%, var(--cream-2) 78%, transparent);
max-width:none; }
.sec--svc > *{ max-width:var(--maxw); margin-inline:auto; }
.sec--proc{ background:var(--card-2); max-width:none; border-radius:var(--r-xl); }
.sec--proc > *{ max-width:var(--maxw); margin-inline:auto; }
/* ---------------------------------------------------------- reveal core */
.rv{ opacity:0; transition:opacity .85s var(--e), transform .95s var(--e), clip-path 1.05s var(--e);
transition-delay:calc(var(--d,0) * .09s); will-change:opacity, transform; }
.rv[data-rv="up"]{ transform:translateY(30px); }
.rv[data-rv="left"]{ transform:translateX(-46px); }
.rv[data-rv="right"]{ transform:translateX(46px); }
.rv[data-rv="scale"]{ transform:scale(.945); }
/* Never clip the observed element itself: a box clipped to nothing reports an
empty intersection rect, the observer never fires, and it can never unclip.
The child carries the wipe; the observed box keeps its real geometry. */
.rv[data-rv="clip"]{ opacity:1; transform:none; }
.rv[data-rv="clip"] > img{
clip-path:inset(0 0 100% 0); transform:scale(1.06);
transition:clip-path 1.1s var(--e), transform 1.4s var(--e);
transition-delay:calc(var(--d,0) * .09s);
}
.rv[data-rv="clip"].is-in > img{ clip-path:inset(0 0 0 0); transform:none; }
.rv.is-in{ opacity:1; transform:none; }
/* ======================================================== CORE BENEFITS */
.core{
display:grid; grid-template-columns:.72fr 1.35fr .72fr; gap:clamp(14px,2vw,26px);
align-items:center; margin-top:clamp(34px,5vw,62px);
}
.core__shot{ border-radius:var(--r); overflow:hidden; aspect-ratio:3/4; }
.core__shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e); }
.core__shot:hover img{ transform:scale(1.06); }
.core__shot--l{ transform-origin:right; }
.core__shot--r{ transform-origin:left; }
.statcard{
border-radius:var(--r); padding:clamp(26px,3.4vw,44px) clamp(20px,3vw,36px);
box-shadow:inset 0 0 0 1px var(--line);
display:grid; gap:6px; align-content:center;
background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.4));
box-shadow:inset 0 0 0 1px var(--line), 0 30px 60px -50px rgba(22,35,63,.7);
}
.statcard__n{
font-family:var(--dsp); font-weight:300;
font-size:clamp(3.4rem,7vw,5.4rem); line-height:1; letter-spacing:-.02em;
font-variation-settings:"opsz" 72;
}
.statcard__l{ font-size:.82rem; color:var(--ink-faint); margin-bottom:20px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip{
display:inline-flex; align-items:center; gap:7px;
padding:8px 14px; border-radius:999px; background:var(--tint);
font-size:.71rem; font-weight:500; color:var(--ink-2);
transition:background .35s var(--e), transform .35s var(--e);
}
.chip:hover{ background:var(--sky); transform:translateY(-2px); }
.chip i{
width:14px; height:14px; flex:none; border-radius:50%;
background:var(--blue); position:relative;
}
.chip i::after{
content:""; position:absolute; left:4px; top:3.4px;
width:4px; height:7px; border:solid #fff; border-width:0 1.5px 1.5px 0;
transform:rotate(42deg);
}
/* ============================================================ CREDIBILITY
Sits directly under the hero, so it is the first thing read after the
wordmark. Four numbers, a hairline between each, counting up on entry. */
.cred{
position:relative; z-index:2;
max-width:calc(var(--maxw) + var(--pad) * 2);
margin-inline:auto;
padding:clamp(30px, 4vw, 56px) var(--pad) 0;
}
.cred__grid{
display:grid; grid-template-columns:repeat(4, 1fr);
gap:clamp(14px, 2.4vw, 34px);
}
.cred__i{ position:relative; padding-left:clamp(14px, 2.4vw, 34px); }
.cred__i:first-child{ padding-left:0; }
.cred__i:not(:first-child)::before{
content:""; position:absolute; left:0; top:6%; bottom:6%;
width:1px; background:var(--line);
}
.cred__n{
font-size:clamp(1.9rem, 3.6vw, 3.05rem);
font-weight:700; line-height:1; letter-spacing:-.03em;
color:var(--ink); font-variant-numeric:tabular-nums;
margin-bottom:.42em;
}
.cred__l{
font-size:.82rem; line-height:1.5; color:var(--ink-faint);
max-width:22ch; text-wrap:pretty;
}
/* ============================================================== LOCATIONS */
.loc{
display:grid; grid-template-columns:repeat(3, 1fr);
gap:22px; text-align:left;
margin:clamp(28px, 4vw, 48px) 0 clamp(26px, 3.4vw, 40px);
}
.locc{
position:relative;
display:grid; gap:5px; align-content:start;
padding:clamp(20px, 2.4vw, 28px);
border-radius:var(--r);
background:#fff;
box-shadow:inset 0 0 0 1px var(--line), 0 18px 40px -34px rgba(22,35,63,.5);
transition:transform .5s var(--e), box-shadow .5s var(--e);
}
.locc:hover{ transform:translateY(-5px); box-shadow:inset 0 0 0 1px var(--line-2), 0 28px 56px -30px rgba(22,35,63,.55); }
.locc__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.locc__pin{
width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
background:var(--tint); color:var(--blue-deep);
}
.locc__pin svg{ width:19px; height:19px; }
.locc__flag{
font-size:.58rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
padding:5px 10px; border-radius:999px; background:var(--deep); color:#fff;
}
.locc__n{ font-family:var(--dsp); font-size:1.24rem; font-weight:400; line-height:1.25; }
.locc__c{ font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--blue-deep); }
.locc__a{ font-size:.82rem; line-height:1.6; color:var(--ink-faint); margin-top:6px; min-height:3.2em; }
.locc__btns{ display:flex; gap:9px; margin-top:14px; }
/* the two clinic actions — one filled, one outlined, both full-height taps */
.locb{
flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:11px 14px; border-radius:999px;
font-size:.78rem; font-weight:600; white-space:nowrap;
transition:background .35s var(--e), color .35s var(--e), transform .35s var(--e), box-shadow .35s var(--e);
}
.locb svg{ width:16px; height:16px; flex:none; }
.locb--wa{ background:var(--deep); color:#fff; }
.locb--wa:hover{ background:var(--blue); transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(22,35,63,.6); }
.locb--map{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.locb--map:hover{ background:var(--tint); transform:translateY(-2px); }
.loc__foot{ display:grid; gap:14px; justify-items:center; }
.loc__hint{ font-size:.76rem; color:var(--ink-faint); text-align:center; }
/* rows inside the clinic finder */
.clist{ display:grid; }
.cr{
display:grid; grid-template-columns:minmax(0,1fr) auto;
gap:10px 18px; align-items:center;
padding:16px 0; border-bottom:1px solid var(--line);
opacity:0; transform:translateY(12px);
animation:trIn .55s var(--e) forwards; animation-delay:calc(var(--i) * .035s);
}
.cr__n{ font-size:.93rem; font-weight:600; line-height:1.35; }
.cr__flag{
font-size:.55rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
padding:3px 7px; border-radius:999px; background:var(--deep); color:#fff;
vertical-align:2px;
}
.cr__a{ font-size:.78rem; line-height:1.55; color:var(--ink-faint); margin-top:4px; }
.cr__btns{ display:flex; gap:8px; }
.cr__btns .locb{ flex:none; padding:9px 14px; font-size:.74rem; }
/* ========================================================= GOOGLE REVIEWS */
.sec--gr{ text-align:left; }
.gr__head{
display:flex; align-items:flex-end; justify-content:space-between;
gap:24px; flex-wrap:wrap; margin-bottom:clamp(26px, 3.4vw, 44px);
}
.gr__head .eyebrow{ margin-bottom:14px; }
.gr__head .dsp{ font-variant-numeric:tabular-nums; }
.btn--ghost{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn--ghost::before{ background:var(--deep); }
.btn--ghost:hover{ color:#fff; transform:translateY(-2px); }
.btn--ghost .btn__arw{ background:var(--deep); color:#fff; }
.btn--ghost:hover .btn__arw{ background:#fff; color:var(--deep); transform:rotate(45deg); }
.gr{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.grc{
display:grid; gap:14px; align-content:start;
padding:clamp(22px, 2.6vw, 30px);
border-radius:var(--r); background:#fff;
box-shadow:inset 0 0 0 1px var(--line), 0 18px 40px -34px rgba(22,35,63,.5);
transition:transform .5s var(--e), box-shadow .5s var(--e);
}
.grc:hover{ transform:translateY(-5px); box-shadow:inset 0 0 0 1px var(--line-2), 0 28px 56px -30px rgba(22,35,63,.55); }
.grc__stars{ font-size:.94rem; letter-spacing:.14em; color:var(--blue); line-height:1; }
.grc__stars i{ font-style:normal; color:var(--line-2); }
.grc__t{ font-size:.9rem; line-height:1.72; color:var(--ink-dim); text-wrap:pretty; }
.grc__m{
display:grid; gap:3px; padding-top:14px; border-top:1px solid var(--line);
font-size:.78rem;
}
.grc__m b{ font-weight:600; }
.grc__m span{ color:var(--ink-faint); font-size:.74rem; }
/* ============================================================== SERVICES */
/* .svc / .svc__rail live in the SERVICES RAIL block at the end of this file */
.svcc{
position:relative; display:block; width:100%; text-align:left;
border-radius:var(--r); overflow:hidden; aspect-ratio:4/5;
isolation:isolate; color:#fff;
transition:transform .6s var(--e), box-shadow .6s var(--e);
}
.svcc:hover{ transform:translateY(-8px); box-shadow:0 34px 64px -30px rgba(22,35,63,.6); }
.svcc__img{ position:absolute; inset:0; z-index:-2; }
.svcc__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e); }
.svcc:hover .svcc__img img{ transform:scale(1.08); }
.svcc__veil{
position:absolute; inset:0; z-index:-1;
/* our plates are high-key enough that a card's top third dissolved into the
page; a faint cool wash gives the card an edge without dulling it */
background:
linear-gradient(to top, rgba(12,22,44,.86) 4%, rgba(12,22,44,.42) 38%, rgba(12,22,44,.06) 70%),
linear-gradient(to bottom, rgba(43,78,150,.16), transparent 46%);
transition:background .6s var(--e);
}
.svcc:hover .svcc__veil{
background:
linear-gradient(to top, rgba(15,34,86,.9) 4%, rgba(15,34,86,.5) 42%, rgba(12,22,44,.1) 74%),
linear-gradient(to bottom, rgba(43,78,150,.22), transparent 50%);
}
.svcc__in{ position:absolute; inset:auto 0 0; padding:20px; display:grid; gap:8px; }
.svcc__ic{
width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
margin-bottom:6px;
transition:transform .5s var(--e), background .5s var(--e);
}
.svcc:hover .svcc__ic{ transform:translateY(-4px); background:rgba(255,255,255,.24); }
.svcc__ic svg{ width:21px; height:21px; }
.svcc__t{ font-family:var(--dsp); font-size:1.32rem; font-weight:400; line-height:1.2; }
.svcc__d{ font-size:.76rem; line-height:1.55; color:rgba(255,255,255,.78); }
.svcc__bar{
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-top:8px; padding-top:12px;
border-top:1px solid rgba(255,255,255,.2);
}
.svcc__from{ font-size:.72rem; color:rgba(255,255,255,.78); }
.svcc__from b{ font-weight:600; color:#fff; font-size:.86rem; }
.svcc__go{
display:inline-flex; align-items:center; gap:8px; flex:none;
font-size:.7rem; font-weight:500; letter-spacing:.02em;
padding:7px 8px 7px 14px; border-radius:999px;
background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
transition:background .45s var(--e), color .45s var(--e);
}
.svcc:hover .svcc__go{ background:#fff; color:var(--deep); }
.svcc__go .btn__arw{ width:20px; height:20px; }
.svc__foot{ display:grid; gap:18px; justify-items:center; margin-top:30px; }
.svc__hint{ font-size:.8rem; color:var(--ink-faint); }
.svc__hint a{ color:var(--blue-deep); font-weight:500; box-shadow:0 1px 0 currentColor; }
.dots{ display:flex; gap:7px; align-items:center; justify-content:center; }
.dot{
width:7px; height:7px; border-radius:999px; background:var(--line-2);
transition:width .5s var(--e), background .5s var(--e);
}
.dot.is-on{ width:26px; background:var(--deep); }
/* ========================================================= BEFORE/AFTER */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:34px; }
.tab{
padding:10px 20px; border-radius:999px; font-size:.78rem; font-weight:500;
background:var(--tint); color:var(--ink-dim);
transition:background .4s var(--e), color .4s var(--e), transform .4s var(--e);
}
.tab:hover{ transform:translateY(-2px); }
.tab.is-on{ background:var(--deep); color:#fff; }
.bas{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:42px; }
.ba{
position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3;
user-select:none;
box-shadow:0 24px 50px -34px rgba(22,35,63,.6);
animation:baIn .7s var(--e) both;
}
@keyframes baIn{ from{ opacity:0; transform:translateY(16px); } }
.ba img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
/* the plates must never become a native drag-image */
-webkit-user-drag:none; user-select:none; pointer-events:none;
}
.ba__after{ clip-path:inset(0 0 0 var(--x,50%)); }
/* The whole divider is the grab target — a 36px full-height strip centred on
the wipe — so the line itself can be picked up. Nothing outside it drags. */
.ba__handle{
position:absolute; top:0; bottom:0; left:var(--x,50%); width:48px;
translate:-50% 0; cursor:grab; touch-action:none;
display:grid; place-items:center;
}
.ba.is-drag .ba__handle{ cursor:grabbing; }
.ba__grip{ cursor:inherit; }
.ba__line{
position:absolute; top:0; bottom:0; left:50%; width:2px; translate:-1px 0;
background:rgba(255,255,255,.92);
box-shadow:0 0 18px rgba(12,22,44,.45);
transition:width .25s var(--e), background .25s var(--e);
}
.ba__handle:hover .ba__line,
.ba.is-drag .ba__line{ width:3px; background:#fff; }
.ba__grip{
position:relative; width:44px; height:44px; border-radius:50%;
background:rgba(255,255,255,.95); color:var(--deep);
display:grid; place-items:center; padding:0; border:0;
box-shadow:0 8px 22px -8px rgba(12,22,44,.6);
transition:transform .3s var(--e), box-shadow .3s var(--e);
}
.ba__handle:hover .ba__grip{ transform:scale(1.1); box-shadow:0 12px 28px -8px rgba(12,22,44,.7); }
.ba.is-drag .ba__grip{ transform:scale(.94); box-shadow:0 6px 16px -6px rgba(12,22,44,.7); }
.ba__grip::before,.ba__grip::after{
content:""; position:absolute; width:5px; height:5px;
border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
transition:transform .3s var(--e);
}
.ba__grip::before{ transform:translateX(-4px) rotate(-135deg); }
.ba__grip::after{ transform:translateX(4px) rotate(45deg); }
.ba__handle:hover .ba__grip::before{ transform:translateX(-6px) rotate(-135deg); }
.ba__handle:hover .ba__grip::after{ transform:translateX(6px) rotate(45deg); }
/* a soft halo while held, so the interaction reads as grabbed */
.ba.is-drag .ba__grip{ box-shadow:0 6px 16px -6px rgba(12,22,44,.7), 0 0 0 8px rgba(255,255,255,.22); }
.ba.is-drag{ box-shadow:0 30px 60px -34px rgba(22,35,63,.75); }
.ba__tag{
position:absolute; top:12px; padding:5px 12px; border-radius:999px;
font-size:.63rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
background:rgba(12,22,44,.62); color:#fff;
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ba__tag--b{ left:12px; }
.ba__tag--a{ right:12px; }
/* The plates are real clinical photography and often end on a bright wall or
a white gown, so the caption carries its own scrim rather than trusting a
text-shadow to hold white type over an unknown ground. */
.ba__cap{
position:absolute; left:0; right:0; bottom:0; z-index:3;
padding:34px 14px 12px;
font-size:.7rem; color:#fff; text-align:left;
background:linear-gradient(to top, rgba(9,16,32,.88) 0%, rgba(9,16,32,.62) 45%, transparent 100%);
pointer-events:none;
}
.ba__cap a{
display:inline-flex; align-items:center; gap:7px; color:#fff;
pointer-events:auto;
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
transition:background-size .45s var(--e);
}
.ba:hover .ba__cap a{ background-size:100% 1px; }
.ba__cap .btn__arw{ background:rgba(255,255,255,.2); color:#fff; }
/* ======================================================== BLOOM BORDERS
The seam between two sections: a cloud bank behind, a blossom band in front,
petals falling through both.
It HOVERS. The element reserves only a thin strip of layout (--seam) while
the artwork is a much taller box (--art) centred on it and allowed to spill
over the sections above and below. z-index lifts the whole thing above the
page, so a seam overlaps its neighbours instead of pushing them apart.
Four things animate and none share a property:
.bloom__in the reveal, wiping open from the centre -> clip-path
.bloom__sky / __flora scroll parallax, one rate each -> translate
the plates inside idle drift and sway -> rotate / transform
.bloom__glow the breath behind it -> opacity/scale */
.bloom{
--seam: clamp(28px, 3vw, 46px);
--art: clamp(96px, 10.5vw, 152px);
position:relative; z-index:5;
width:100%;
height:var(--seam);
/* clip sideways only — the artwork must stay free to spill vertically */
overflow-x:clip;
pointer-events:none; user-select:none;
margin-block:calc(var(--sec) * -0.30);
}
.bloom__in{
position:absolute; left:0; right:0; top:50%;
height:var(--art); translate:0 -50%;
/* Negative top/bottom insets expand the clip beyond the box, so the reveal
wipes horizontally only. Clipping vertically cut the cloud bank off before
its soft mask had a chance to fade, which left a hard edge. */
clip-path:inset(-70% 50% -70% 50%);
transition:clip-path 1.6s var(--e);
}
.bloom.is-in .bloom__in{ clip-path:inset(-70% 0 -70% 0); }
/* the two parallax layers — the wrapper carries the travel, the plate inside
carries its own idle motion, so neither overwrites the other */
.bloom__sky,
.bloom__flora{
position:absolute; inset:0;
display:flex; justify-content:center;
translate:var(--px, 0px) 0;
}
.bloom__sky{ align-items:center; }
.bloom__flora{ align-items:flex-end; }
/* Clouds run wider than the flowers and are masked top and bottom, so the bank
dissolves into the page instead of ending on a cut edge. That soft fade is
what makes the seam read as hovering rather than pasted in. */
.bloom__sky img{
width:min(1120px, 88%); height:auto; max-width:none;
opacity:.5;
filter:blur(.3px);
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, #000 26%, #000 58%, transparent 92%),
linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(to bottom, transparent 0%, #000 26%, #000 58%, transparent 92%),
linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
mask-composite:intersect;
animation:cloudDrift 42s ease-in-out infinite alternate;
}
@keyframes cloudDrift{
from{ transform:translate3d(-1.6%,1.5%,0) scale(1.02); }
to { transform:translate3d( 1.6%,-1%,0) scale(1.07); }
}
.bloom__flora img{
height:62%; width:auto; max-width:none;
animation:bloomSway 17s ease-in-out infinite;
}
@keyframes bloomSway{ 0%,100%{ rotate:-.32deg; } 50%{ rotate:.32deg; } }
/* a soft light behind it all, so the seam reads as lit rather than pasted on */
.bloom__glow{
position:absolute; left:50%; top:50%; translate:-50% -50%;
width:min(880px, 82%); height:150%;
background:radial-gradient(46% 44% at 50% 52%, rgba(123,155,238,.18), transparent 72%);
animation:bloomBreath 11s var(--e-io) infinite;
}
@keyframes bloomBreath{ 0%,100%{ opacity:.55; scale:.94; } 50%{ opacity:1; scale:1.06; } }
/* the faintest prismatic glint, borrowed from the reference sky */
.bloom__prism{
position:absolute; left:50%; top:24%; translate:-50% 0;
width:min(360px, 34%); height:26%;
background:linear-gradient(96deg,
rgba(255,214,214,0) 0%, rgba(255,222,186,.5) 22%, rgba(214,240,196,.5) 45%,
rgba(186,224,255,.5) 68%, rgba(214,200,255,0) 100%);
filter:blur(14px);
opacity:.22;
border-radius:50%;
animation:prismDrift 19s var(--e-io) infinite alternate;
}
@keyframes prismDrift{
from{ transform:translateX(-7%) rotate(-4deg); opacity:.14; }
to { transform:translateX(7%) rotate(3deg); opacity:.3; }
}
/* variants — weight and mirroring, so eight seams never read as eight copies */
.bloom--soft { --seam:clamp(22px, 2.4vw, 36px); --art:clamp(76px, 8.2vw, 118px); }
.bloom--soft .bloom__flora img{ opacity:.78; }
.bloom--soft .bloom__sky img{ opacity:.4; }
.bloom--grand { --seam:clamp(34px, 3.8vw, 58px); --art:clamp(120px, 12.8vw, 188px); }
.bloom--grand .bloom__flora img{ height:58%; }
/* The hero has no bottom padding to borrow, so the shared negative margin would
drag the artwork up across the video's hard bottom edge. */
.bloom--top{ margin-top:clamp(46px, 6vw, 96px); }
.bloom--flip .bloom__flora img{ scale:1 -1; }
.bloom--rev .bloom__flora img{ scale:-1 1; }
.bloom--rev.bloom--flip .bloom__flora img{ scale:-1 -1; }
/* petals shed from the band and drift on into the section below */
.bloom__petals{ position:absolute; inset:0; }
/* Drawn, not rendered. Two of the generated petal plates came back on a
textured rather than flat magenta ground, so the chroma key failed and they
painted as grey blocks. At 10-14px a CSS shape is indistinguishable from a
render, costs no request, and cannot fail to key. */
.bloom__petals i{
position:absolute; top:42%; left:var(--l);
width:var(--w,12px); aspect-ratio:1 / 1.18;
background:linear-gradient(148deg, #FFFFFF 8%, #DDE9FA 52%, #B6CBEC 100%);
border-radius:62% 62% 58% 58% / 74% 74% 38% 38%;
box-shadow:inset 0 -1px 2px rgba(27,63,168,.16);
opacity:0;
animation:petalFall var(--dur,13s) linear var(--delay,0s) infinite;
}
.bloom__petals i:nth-child(2n){
background:linear-gradient(200deg, #FFFFFF 10%, #E6EFFB 58%, #C6D8F1 100%);
border-radius:58% 58% 64% 64% / 40% 40% 72% 72%;
}
@keyframes petalFall{
0% { translate:0 -14px; rotate:0deg; opacity:0; }
12% { opacity:.9; }
80% { opacity:.5; }
100% { translate:var(--dx,22px) 120px; rotate:300deg; opacity:0; }
}
/* a single sprig, used as a corner accent rather than a full seam */
.sprig{
position:absolute; width:clamp(120px, 15vw, 230px);
pointer-events:none; user-select:none; z-index:0;
opacity:.5;
translate:var(--px,0px) var(--py,0px);
}
.sec--faq{ overflow-x:clip; }
.sprig--faq{ right:-2%; bottom:-4%; rotate:6deg; }
.sprig--cta{ left:-3%; top:-6%; scale:-1 1; opacity:.14; }
/* ============================================================= PARALLAX
One rAF pass writes --py (and --px) onto anything carrying data-par. The
images opt in with .px, which adds the overscan the travel needs so a
translated plate never uncovers the edge of its frame. */
.px{ scale:1.14; will-change:translate; }
[data-par]{ translate:var(--px, 0px) var(--py, 0px); }
/* =============================================================== PROCESS */
.proc{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px);
align-items:center; text-align:left; margin-top:clamp(34px,5vw,58px);
}
.proc__art{ position:relative; padding-bottom:16%; }
.proc__a,.proc__b{ border-radius:var(--r); overflow:hidden; box-shadow:0 30px 60px -34px rgba(22,35,63,.55); }
.proc__a{ width:78%; aspect-ratio:4/3; }
.proc__a img,.proc__b img{ width:100%; height:100%; object-fit:cover; }
.proc__b{
position:absolute; right:0; bottom:0; width:62%; aspect-ratio:3/4;
box-shadow:0 34px 70px -30px rgba(22,35,63,.6), 0 0 0 8px var(--card-2);
}
.steps{ position:relative; display:grid; gap:2px; padding-left:30px; }
.steps::before{
content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px;
background:var(--line);
}
.steps::after{
content:""; position:absolute; left:0; top:8px; width:2px;
height:var(--fill,0%); background:var(--deep);
transition:height .7s var(--e);
}
.step{ position:relative; padding:16px 0 16px 60px; transition:opacity .5s var(--e); opacity:.5; }
.step.is-on{ opacity:1; }
.step__ic{
position:absolute; left:0; top:14px;
width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
background:var(--cream); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink);
transition:background .5s var(--e), color .5s var(--e), box-shadow .5s var(--e), transform .5s var(--e);
}
.step.is-on .step__ic{ background:var(--deep); color:#fff; box-shadow:none; transform:scale(1.06); }
.step__ic svg{ width:19px; height:19px; }
.step h3{ font-family:var(--dsp); font-size:1.3rem; font-weight:400; margin-bottom:6px; }
.step p{ font-size:.83rem; line-height:1.66; color:var(--ink-dim); max-width:40ch; }
/* =============================================================== DOCTORS */
.sec--dr{ text-align:left; }
.dr{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,74px); align-items:center; }
.dr__shot{
border-radius:var(--r); overflow:hidden; aspect-ratio:4/5;
background:var(--tint);
box-shadow:0 40px 80px -44px rgba(22,35,63,.55);
}
.dr__shot img{ width:100%; height:100%; object-fit:cover; transition:opacity .45s var(--e), transform 1.2s var(--e); }
.dr__shot img.is-swap{ opacity:0; transform:scale(1.04); }
.dr__copy{ display:grid; gap:0; }
.dr__copy .eyebrow{ margin-bottom:16px; }
.dr__copy .dsp{ margin-bottom:22px; }
.dr__body{ font-size:.93rem; line-height:1.75; color:var(--ink-dim); max-width:46ch; margin-bottom:26px; }
.dr__name{ font-family:var(--dsp); font-size:1.55rem; line-height:1.25; margin-bottom:5px; }
.dr__role{ font-size:.8rem; color:var(--ink-faint); margin-bottom:26px; }
.dr__nav{
display:flex; align-items:center; gap:22px; flex-wrap:wrap;
padding-top:22px; border-top:1px solid var(--line);
}
.idx{ display:flex; gap:14px; overflow:hidden; flex:1; min-width:0; }
.idx button{
font-size:.76rem; font-variant-numeric:tabular-nums; color:var(--ink-faint);
transition:color .35s var(--e), transform .35s var(--e);
}
.idx button:hover{ color:var(--ink); }
.idx button.is-on{ color:var(--blue-deep); font-weight:600; transform:scale(1.14); }
/* ========================================================== TESTIMONIALS */
.sec--rev{ max-width:none; padding-inline:var(--pad); }
.revp{
position:relative; max-width:var(--maxw); margin-inline:auto;
border-radius:var(--r-xl); padding:clamp(40px,6vw,86px) clamp(56px,8vw,120px);
background:linear-gradient(180deg, #D7E4F6, #E6EEFA);
box-shadow:0 40px 80px -60px rgba(22,35,63,.7);
overflow:hidden;
}
.revp::before{
content:""; position:absolute; inset:-30% -10% auto; height:120%;
background:radial-gradient(62% 58% at 50% 0%, rgba(123,155,238,.42), transparent 72%);
pointer-events:none;
}
.revp__q{
position:relative;
font-family:var(--dsp); font-weight:300;
font-size:clamp(1.28rem, 2.9vw, 2.28rem); line-height:1.36; letter-spacing:-.01em;
text-wrap:balance; margin-bottom:26px; min-height:3.1em;
display:grid; align-items:center;
font-variation-settings:"opsz" 40;
}
.revp__q, .revp__n, .revp__r{ transition:opacity .4s var(--e), transform .5s var(--e); }
.revp.is-swap .revp__q,
.revp.is-swap .revp__n,
.revp.is-swap .revp__r{ opacity:0; transform:translateY(10px); }
.revp__n{ position:relative; font-weight:600; font-size:.9rem; margin-bottom:3px; }
.revp__r{ position:relative; font-size:.76rem; color:var(--ink-faint); margin-bottom:30px; }
.revp__prev{ position:absolute; left:clamp(12px,2vw,28px); top:50%; translate:0 -50%; }
.revp__next{ position:absolute; right:clamp(12px,2vw,28px); top:50%; translate:0 -50%; }
.avs{ display:flex; gap:10px; justify-content:center; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.avs button{
width:52px; height:52px; border-radius:14px; overflow:hidden; flex:none;
box-shadow:0 0 0 1px rgba(22,35,63,.1);
opacity:.72; filter:saturate(.85);
transition:transform .5s var(--e), opacity .5s var(--e), filter .5s var(--e), box-shadow .5s var(--e);
}
.avs button img{ width:100%; height:100%; object-fit:cover; }
.avs button:hover{ opacity:.85; transform:translateY(-3px); }
.avs button.is-on{
opacity:1; filter:none; transform:scale(1.28) translateY(-2px);
box-shadow:0 10px 24px -10px rgba(22,35,63,.6), 0 0 0 2px #fff;
}
/* =================================================================== FAQ */
.faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,74px); text-align:left; align-items:start; }
.faq__l .eyebrow{ margin-bottom:16px; }
.faq__l .dsp{ margin-bottom:30px; }
.faqcard{
position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:16/10;
}
.faqcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.faqcard__in{
position:absolute; inset:0; padding:22px;
display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
background:linear-gradient(105deg, rgba(12,22,44,.72), rgba(12,22,44,.18) 72%);
color:#fff;
}
.faqcard__t{ font-family:var(--dsp); font-size:1.28rem; margin-bottom:5px; }
.faqcard__s{ font-size:.78rem; color:rgba(255,255,255,.8); max-width:26ch; }
.ac{
border-radius:16px; margin-bottom:10px; overflow:hidden;
background:var(--tint);
transition:background .5s var(--e), color .5s var(--e), box-shadow .5s var(--e);
}
.ac:hover{ background:#DAE6F6; }
.ac.is-open{ background:var(--deep); color:#fff; box-shadow:0 22px 44px -26px rgba(22,35,63,.7); }
.ac__q{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
padding:19px 22px; text-align:left; font-size:.88rem; font-weight:500; line-height:1.45;
}
.ac__ic{ position:relative; width:16px; height:16px; flex:none; }
.ac__ic::before,.ac__ic::after{
content:""; position:absolute; inset:0; margin:auto; background:currentColor;
transition:transform .45s var(--e), opacity .3s;
}
.ac__ic::before{ width:14px; height:1.5px; }
.ac__ic::after{ width:1.5px; height:14px; }
.ac.is-open .ac__ic::after{ transform:scaleY(0); opacity:0; }
.ac__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--e); }
.ac.is-open .ac__a{ grid-template-rows:1fr; }
.ac__a > p{ overflow:hidden; padding:0 22px; font-size:.83rem; line-height:1.7;
color:var(--ink-dim); transition:padding .55s var(--e), color .5s var(--e); }
.ac.is-open .ac__a > p{ padding:0 22px 21px; color:rgba(255,255,255,.8); }
/* =================================================================== CTA */
.sec--cta{ max-width:none; padding-inline:var(--pad); padding-bottom:clamp(60px,7vw,110px); }
.cta{
position:relative; max-width:var(--maxw); margin-inline:auto;
border-radius:var(--r-xl); overflow:hidden;
padding:clamp(52px,7vw,110px) clamp(28px,5vw,80px);
background:radial-gradient(120% 130% at 50% -10%, var(--deep-2), var(--deep) 62%);
color:#fff;
}
.cta__pat{
position:absolute; inset:0; opacity:.5;
background-image:
radial-gradient(120% 90% at 12% 108%, rgba(123,155,238,.34), transparent 60%),
radial-gradient(90% 80% at 92% -12%, rgba(47,95,224,.36), transparent 62%);
}
.cta__pat::after{
content:""; position:absolute; inset:-60% -20%;
background:repeating-radial-gradient(circle at 50% 120%,
transparent 0 58px, rgba(255,255,255,.05) 58px 60px);
animation:breathe 26s var(--e-io) infinite;
}
@keyframes breathe{ 50%{ transform:scale(1.08); } }
.cta .dsp{ position:relative; margin-bottom:18px; }
.cta__s{ position:relative; max-width:48ch; margin:0 auto 34px; font-size:.9rem; line-height:1.72; color:var(--on-dark-dim); }
.cta__btns{ position:relative; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
/* ================================================================ FOOTER */
.ft{ position:relative; padding:0 var(--pad) 0; isolation:isolate; overflow:hidden; }
.ft__bg{ position:absolute; inset:0; z-index:-2; }
.ft__bg img{ width:100%; height:100%; object-fit:cover; }
.ft__bg::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg,
rgba(237,243,250,.42) 0%, rgba(20,33,60,.5) 34%, rgba(20,33,60,.74) 70%, rgba(20,33,60,.86) 100%);
}
.ft__panel{
max-width:var(--maxw); margin:clamp(40px,5vw,72px) auto 0;
padding:clamp(30px,4vw,54px) clamp(24px,3.4vw,50px);
border-radius:var(--r-lg) var(--r-lg) 0 0;
background:rgba(17,29,54,.34);
backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
color:#fff; text-align:left;
}
.ft__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.ft__col{ display:grid; gap:11px; align-content:start; }
.ft__col h3{ font-family:var(--dsp); font-size:1.14rem; font-weight:400; margin-bottom:7px; }
.ft__col a{
font-size:.82rem; color:rgba(255,255,255,.88); width:max-content;
transition:color .3s var(--e), transform .35s var(--e);
}
.ft__col a:hover{ color:#fff; transform:translateX(4px); }
.ft__col--c p{ font-size:.82rem; line-height:1.62; color:rgba(255,255,255,.88); }
.ft__rule{ height:1px; background:rgba(255,255,255,.24); margin:clamp(26px,3vw,40px) 0 18px; }
.ft__base{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
font-size:.75rem; color:rgba(255,255,255,.82); }
.ft__base a:hover{ color:#fff; }
.proto{
margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.16);
font-size:.68rem; line-height:1.6; color:rgba(255,255,255,.72); max-width:82ch;
}
.ft__word{
position:relative; z-index:-1;
display:grid; place-items:center;
margin-top:-.06em; translate:0 .14em;
user-select:none;
}
.ft__word img{
display:block; width:min(74vw, 940px); height:auto;
opacity:.94;
}
/* ============================================================ SCROLL BAR */
.prog{ position:fixed; inset:0 0 auto; height:2px; z-index:70; pointer-events:none; }
.prog span{ display:block; height:100%; width:0; background:var(--blue);
box-shadow:0 0 12px rgba(47,95,224,.7); }
/* ========================================================= TREATMENT TRAY */
.tray{ position:fixed; inset:0; z-index:100; }
.tray__scrim{
position:absolute; inset:0; background:rgba(12,22,44,.42);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
animation:scrimIn .5s var(--e) both;
}
.tray.is-out .tray__scrim{ animation:scrimIn .35s var(--e) reverse both; }
@keyframes scrimIn{ from{ opacity:0; } }
.tray__panel{
position:absolute; inset:0 0 0 auto; width:min(720px, 100%);
background:var(--cream); display:grid; grid-template-rows:auto auto 1fr auto;
box-shadow:-40px 0 90px -40px rgba(12,22,44,.6);
animation:trayIn .6s var(--e) both;
}
.tray.is-out .tray__panel{ animation:trayIn .38s var(--e) reverse both; }
@keyframes trayIn{ from{ transform:translateX(100%); } }
.tray__head{
display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
padding:26px 26px 18px; border-bottom:1px solid var(--line);
}
.tray__eyebrow{ font-family:var(--dsp); font-style:italic; font-size:.72rem;
letter-spacing:.11em; color:var(--ink-faint); margin-bottom:8px; }
.tray__title{ font-family:var(--dsp); font-size:1.85rem; font-weight:400; line-height:1.14; letter-spacing:-.01em; }
.tray__sub{ font-size:.76rem; color:var(--ink-faint); margin-top:7px; }
.tray__x{
width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
box-shadow:inset 0 0 0 1px var(--line-2);
transition:background .35s var(--e), color .35s var(--e), transform .35s var(--e);
}
.tray__x svg{ width:17px; height:17px; }
.tray__x:hover{ background:var(--deep); color:#fff; transform:rotate(90deg); }
.tray__tools{ display:flex; gap:10px; padding:16px 26px; align-items:center; flex-wrap:wrap;
border-bottom:1px solid var(--line); background:var(--card-2); }
.srch{ position:relative; flex:1; min-width:190px; display:flex; align-items:center; }
.srch svg{ position:absolute; left:14px; width:16px; height:16px; color:var(--ink-faint); pointer-events:none; }
.srch input{
width:100%; font:inherit; font-size:.82rem; padding:11px 14px 11px 38px;
border-radius:999px; border:0; background:#fff; color:var(--ink);
box-shadow:inset 0 0 0 1px var(--line);
transition:box-shadow .35s var(--e);
}
.srch input::placeholder{ color:var(--ink-faint); }
.srch input:focus{ outline:0; box-shadow:inset 0 0 0 1.5px var(--blue); }
.segs{ display:flex; gap:3px; padding:3px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.seg{ padding:8px 14px; border-radius:999px; font-size:.73rem; font-weight:500; color:var(--ink-faint);
transition:background .35s var(--e), color .35s var(--e); }
.seg:hover{ color:var(--ink); }
.seg.is-on{ background:var(--deep); color:#fff; }
.tray__body{ overflow-y:auto; overscroll-behavior:contain; padding:8px 26px 20px; }
.tlist{ display:grid; }
/* Every cell is placed explicitly: leaving the price block to auto-placement
let it claim column one and push the treatment name across the row. */
.tr{
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 18px; align-items:center;
padding:14px 0; border-bottom:1px solid var(--line);
opacity:0; transform:translateY(12px);
animation:trIn .55s var(--e) forwards; animation-delay:calc(var(--i) * .035s);
}
@keyframes trIn{ to{ opacity:1; transform:none; } }
.tr__n{ grid-column:1; grid-row:1; font-size:.93rem; font-weight:500; line-height:1.35; }
.tr__meta{ grid-column:1; grid-row:2; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tr__tier{
font-size:.6rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
padding:4px 9px; border-radius:999px; color:#fff;
}
.tr__cat{ font-size:.72rem; color:var(--ink-faint); }
.tr__right{
grid-column:2; grid-row:1 / span 2;
display:flex; align-items:center; justify-content:flex-end; gap:10px;
}
.tr__p{ font-size:1rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tr__book{
display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
padding:7px 8px 7px 15px; border-radius:999px; font-size:.72rem; font-weight:500;
background:var(--tint); color:var(--ink);
transition:background .4s var(--e), color .4s var(--e), transform .4s var(--e);
}
.tr__book .btn__arw{ width:20px; height:20px; background:#fff; }
.tr__book:hover{ background:var(--deep); color:#fff; transform:translateX(-3px); }
.tr__book:hover .btn__arw{ background:var(--blue); color:#fff; }
/* A ranked shelf numbers its rows. The badge sits inline with the name rather
than in its own column so a long treatment name still wraps cleanly. */
.tr__rank{
display:inline-grid; place-items:center;
min-width:1.85em; height:1.85em; margin-right:9px;
border-radius:7px; background:var(--tint); color:var(--blue-deep);
font-size:.68rem; font-weight:700; font-variant-numeric:tabular-nums;
vertical-align:1px;
}
.tr--ranked:nth-child(-n+3) .tr__rank{ background:var(--deep); color:#fff; }
/* the depth meter — kept from the approved prototype, it is the most
ownable idea in the project */
.meter{ display:inline-flex; align-items:center; gap:6px; }
.meter__bars{ display:inline-flex; gap:2.5px; }
.meter__bars i{
display:block; width:13px; height:4px; border-radius:2px;
background:var(--line-2); transition:background .45s var(--e), transform .45s var(--e);
transition-delay:calc(var(--b) * .07s);
}
.meter__bars i.on{ background:var(--blue); transform:scaleY(1.5); }
.meter__l{ font-size:.65rem; letter-spacing:.06em; color:var(--ink-faint); text-transform:uppercase; }
.tray__empty{ padding:44px 0; text-align:center; color:var(--ink-faint); font-size:.86rem; }
.tray__foot{ padding:18px 26px 22px; border-top:1px solid var(--line); background:var(--card-2);
display:grid; gap:14px; justify-items:start; }
.tray__note{ font-size:.7rem; line-height:1.6; color:var(--ink-faint); }
.tray__foot .btn{ width:100%; justify-content:space-between; }
body.is-locked{ overflow:hidden; }
/* ========================================================== RESPONSIVE */
@media (max-width: 1080px){
.pillnav{ display:none; }
.burger{ display:grid; }
.mast__cta{ display:none; }
.core{ grid-template-columns:1fr; }
.core__shot{ aspect-ratio:16/9; }
.core__shot--l{ order:2; } .statcard{ order:1; } .core__shot--r{ order:3; }
.proc,.dr,.faq{ grid-template-columns:1fr; }
.dr__shot{ max-width:420px; }
.loc, .gr{ grid-template-columns:1fr 1fr; }
.tx__grid, .tx__cols{ grid-template-columns:1fr; }
.tx__side{ position:static; }
.expect{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
.rel{ grid-template-columns:1fr 1fr; }
.cred__grid{ grid-template-columns:1fr 1fr; row-gap:clamp(22px,3vw,34px); }
.cred__i:nth-child(3){ padding-left:0; }
.cred__i:nth-child(3)::before{ display:none; }
.svc__track{ grid-auto-columns:calc((100% - 22px) / 2); }
}
@media (max-width: 760px){
.hero{ min-height:82svh; }
.hs__plate{ max-height:calc(82svh - var(--pad-t) - var(--pad-b)); }
.hs__stage{ --pad-t:clamp(56px,11vw,74px); --pad-b:clamp(60px,12vw,80px); --pad-x:10px; }
.hs__amb img{ filter:blur(38px) saturate(132%) brightness(.94); }
.heronav__d{ width:34px; }
.heronav__d[aria-selected="true"]{ width:56px; }
.bas{ grid-template-columns:1fr; }
.svc__track{ grid-auto-columns:min(86%, 340px); }
.ft__cols{ grid-template-columns:1fr 1fr; }
.rel{ grid-template-columns:1fr; }
.lang{ display:none; }
.tx__name{ font-size:clamp(1.7rem,7vw,2.3rem); }
.loc, .gr{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
.loc__hint{ max-width:34ch; }
.gr__head{ align-items:flex-start; }
.cr{ grid-template-columns:1fr; }
.cr__btns{ grid-column:1; }
.revp{ padding-inline:clamp(20px,5vw,34px); }
.revp__prev,.revp__next{ position:static; translate:none; }
.revp{ padding-bottom:32px; }
.tray__panel{ width:100%; }
.tr{ grid-template-columns:1fr; }
.tr__right{ grid-row:auto; grid-column:1;
display:flex; align-items:center; justify-content:flex-start; gap:14px; margin-top:4px; }
}
/* ======================================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important; scroll-behavior:auto !important;
}
.rv{ opacity:1 !important; transform:none !important; clip-path:none !important; }
.bloom__in{ clip-path:none !important; }
.bloom__petals{ display:none; }
.bloom__prism{ display:none; }
.bloom__sky img, .bloom__flora img{ animation:none !important; }
[data-par]{ translate:none !important; }
.px{ scale:1 !important; }
.hs__amb img, .hs__plate{ animation:none !important; }
.heronav__d[aria-selected="true"] i{ animation:none !important; transform:scaleX(1); }
}
/* ==========================================================================
RESULTS GALLERY (testimonials.html)
========================================================================== */
/* On a subpage there is no scroll-spy driving .pillnav__ink, so the current
page paints its own pill rather than borrowing an element that is still
opacity:0. */
.pillnav__a.is-here{ color:#fff; }
.pillnav__a.is-here::before{
content:""; position:absolute; inset:0; z-index:-1;
border-radius:999px; background:var(--deep);
}
/* a centred pair of buttons closing a section */
.btnrow{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
/* the best-seller row borrows the tray row's underline-on-hover */
.bs:hover .tr__link{ background-size:100% 1px; }
/* ------------------------------------------------------------------ hero */
.tshero{
position:relative; isolation:isolate;
max-width:calc(var(--maxw) + var(--pad) * 2); margin-inline:auto;
padding:clamp(104px,11vw,168px) var(--pad) clamp(20px,3vw,40px);
text-align:left;
}
.tshero__glow{
position:absolute; z-index:-1; top:-14%; left:-8%; width:56%; aspect-ratio:1;
border-radius:50%; pointer-events:none;
background:radial-gradient(circle, rgba(123,155,238,.30), rgba(123,155,238,0) 68%);
filter:blur(18px);
}
.tshero__sprig{
position:absolute; z-index:-1; top:clamp(40px,7vw,96px); right:calc(var(--pad) - 2vw);
width:clamp(150px,20vw,300px); opacity:.5;
translate:0 var(--py,0px);
-webkit-user-drag:none;
}
.tshero .lede{ max-width:62ch; margin-inline:0; }
.tsstats{
display:flex; flex-wrap:wrap; gap:12px;
margin-top:clamp(26px,3.4vw,42px);
}
.tsstats li{
flex:1 1 200px; display:grid; gap:4px; align-content:start;
padding:18px 22px; border-radius:var(--r);
background:var(--card);
box-shadow:inset 0 0 0 1px var(--line), 0 18px 40px -34px rgba(22,35,63,.5);
}
.tsstats b{
font-family:var(--dsp); font-weight:300; font-size:clamp(1.9rem,3.2vw,2.5rem);
line-height:1; color:var(--blue-deep); font-variant-numeric:tabular-nums;
}
/* direct child only — the third stat wraps two .count spans inside its ,
and a bare .tsstats span would shrink those back to label size. */
.tsstats li > span{ font-size:.76rem; line-height:1.5; color:var(--ink-faint); }
/* ------------------------------------------------------------ filter bar */
.sec--gal{ text-align:left; padding-top:clamp(30px,3.6vw,48px); }
.tsbar{
/* the masthead is fixed at inset-top 14px and measures 51px, so it ends at
65px — the bar parks 15px clear of it rather than under it. */
position:sticky; top:80px; z-index:30;
display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px;
padding:14px 18px; margin-bottom:clamp(24px,3vw,38px);
border-radius:var(--r-lg);
background:rgba(255,255,255,.78);
backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
box-shadow:inset 0 0 0 1px var(--line), 0 16px 40px -30px rgba(22,35,63,.55);
}
.tsbar__h{
font-size:.64rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink-faint); flex:none;
}
.tsbar__n{
margin-left:auto; font-size:.74rem; color:var(--ink-faint);
font-variant-numeric:tabular-nums; white-space:nowrap;
}
.chipset{ display:flex; flex-wrap:wrap; gap:6px; }
.chipf{
display:inline-flex; align-items:center; gap:7px;
padding:8px 14px; border-radius:999px;
font-size:.75rem; font-weight:500; color:var(--ink-dim);
box-shadow:inset 0 0 0 1px var(--line);
transition:background .38s var(--e), color .38s var(--e),
box-shadow .38s var(--e), transform .38s var(--e);
}
.chipf:hover{ color:var(--ink); background:var(--tint); transform:translateY(-1px); }
.chipf__n{
font-size:.62rem; font-weight:600; font-variant-numeric:tabular-nums;
padding:2px 6px; border-radius:999px;
background:var(--tint); color:var(--ink-faint);
transition:background .38s var(--e), color .38s var(--e);
}
.chipf.is-on{ background:var(--deep); color:#fff; box-shadow:none; }
.chipf.is-on .chipf__n{ background:rgba(255,255,255,.2); color:#fff; }
/* --------------------------------------------------------------- the grid */
/* Masonry, not a grid. The plates are the clinic's own and every one was shot
at a different framing, so equal-height rows left a band of dead space under
the shorter cards. Columns let each card keep its true aspect and still pack
tightly. Reading order runs down each column, which is fine for a gallery. */
.gal{
columns:3; column-gap:clamp(16px,1.8vw,24px);
}
.galc{ break-inside:avoid; margin-bottom:clamp(16px,1.8vw,24px); }
.gal__empty{ padding:60px 0; text-align:center; color:var(--ink-faint); }
.galc{
display:block;
border-radius:var(--r-lg); overflow:hidden;
background:var(--card);
box-shadow:inset 0 0 0 1px var(--line), 0 22px 50px -38px rgba(22,35,63,.55);
opacity:0; transform:translateY(18px);
animation:galIn .62s var(--e) forwards;
animation-delay:calc(var(--i) * .055s);
transition:box-shadow .5s var(--e), transform .5s var(--e);
}
@keyframes galIn{ to{ opacity:1; transform:none; } }
.galc:hover{
transform:translateY(-4px);
box-shadow:inset 0 0 0 1px var(--line-2), 0 34px 64px -34px rgba(22,35,63,.6);
}
/* The plates are portrait (900x1013 after the split), so the card overrides
the 4/3 the homepage sliders use — a 4/3 crop would cut the forehead and
chin off every face on the page. */
.galc__ba{
aspect-ratio:9/10; border-radius:0;
box-shadow:none; animation:none;
}
.galc__drag{
position:absolute; left:50%; bottom:12px; translate:-50% 0;
padding:6px 13px; border-radius:999px; white-space:nowrap;
font-size:.63rem; font-weight:500; letter-spacing:.04em;
background:rgba(12,22,44,.62); color:#fff;
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
transition:opacity .4s var(--e), translate .4s var(--e);
pointer-events:none;
}
.galc__ba:hover .galc__drag,
.galc__ba.is-drag .galc__drag,
.galc__ba:focus-visible .galc__drag{ opacity:0; translate:-50% 6px; }
/* a case documented as a grid of panels rather than a single pair */
.galc__full{ position:relative; overflow:hidden; background:var(--tint); }
.galc__full img{ display:block; width:100%; height:100%; object-fit:cover; }
.galc__in{ display:grid; gap:10px; align-content:start; padding:clamp(18px,1.9vw,24px); }
.galc__tag{
font-size:.62rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
color:var(--blue-deep);
}
.galc__who{ font-size:.72rem; color:var(--ink-faint); margin-top:-6px; }
.galc__q{
font-family:var(--dsp); font-size:1rem; font-weight:300; line-height:1.55;
color:var(--ink-2); font-style:italic;
}
.galc__q::before{ content:"\201C"; }
.galc__q::after{ content:"\201D"; }
.galc__facts{ display:grid; gap:0; margin-top:2px; }
.galc__facts div{
display:flex; align-items:baseline; justify-content:space-between; gap:12px;
padding:8px 0; border-bottom:1px solid var(--line);
}
.galc__facts dt{ font-size:.71rem; color:var(--ink-faint); flex:none; }
.galc__facts dd{ font-size:.78rem; font-weight:500; text-align:right; }
.galc__facts dd a{
color:var(--blue-deep);
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
transition:background-size .45s var(--e);
}
.galc:hover .galc__facts dd a{ background-size:100% 1px; }
.galc__go{
display:inline-flex; align-items:center; gap:8px; justify-self:start;
margin-top:6px; padding:9px 9px 9px 16px; border-radius:999px;
font-size:.74rem; font-weight:500;
background:var(--tint); color:var(--ink);
transition:background .4s var(--e), color .4s var(--e), transform .4s var(--e);
}
.galc__go .btn__arw{ width:22px; height:22px; background:#fff; }
.galc__go:hover{ background:var(--deep); color:#fff; transform:translateX(3px); }
.galc__go:hover .btn__arw{ background:var(--blue); color:#fff; }
/* ------------------------------------------------------- written reviews */
.sec--words{ text-align:center; }
.words{
display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,22px);
margin-top:clamp(30px,4vw,48px); text-align:left;
}
.wordc{
/* mark / quote / caption — the quote row absorbs the slack so every caption
rule in a row lines up, however long the quote is. */
position:relative; display:grid; gap:14px; grid-template-rows:auto 1fr auto;
padding:clamp(24px,2.6vw,32px); border-radius:var(--r-lg);
background:var(--card);
box-shadow:inset 0 0 0 1px var(--line), 0 20px 46px -38px rgba(22,35,63,.5);
transition:transform .5s var(--e), box-shadow .5s var(--e);
}
.wordc:hover{
transform:translateY(-4px);
box-shadow:inset 0 0 0 1px var(--line-2), 0 32px 60px -34px rgba(22,35,63,.55);
}
.wordc__m{
font-family:var(--dsp); font-size:3.4rem; line-height:.7; color:var(--sky);
height:.5em;
}
.wordc blockquote{ font-size:.87rem; line-height:1.74; color:var(--ink-dim); }
.wordc figcaption{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
padding-top:14px; border-top:1px solid var(--line);
font-size:.75rem; color:var(--ink-faint);
}
.wordc figcaption b{ font-weight:600; color:var(--ink); }
.wordc__s{ margin-left:auto; color:var(--blue); letter-spacing:.06em; }
/* ------------------------------------------------------------ disclaimer */
.sec--disc{ padding-top:0; text-align:left; }
.disc{
display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
padding:clamp(24px,2.8vw,34px); border-radius:var(--r-lg);
background:var(--tint);
box-shadow:inset 0 0 0 1px var(--line);
}
.disc__ic{ width:26px; height:26px; color:var(--blue-deep); flex:none; }
.disc__ic svg{ width:100%; height:100%; }
.disc__h{
font-family:var(--dsp); font-size:1.14rem; font-weight:400; margin-bottom:7px;
}
.disc__b{ font-size:.83rem; line-height:1.75; color:var(--ink-faint); max-width:88ch; }
/* ----------------------------------------------------------- responsive */
@media (max-width: 1080px){
.gal{ columns:2; }
.words{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px){
.gal{ columns:1; }
.words{ grid-template-columns:1fr; }
.tsstats li{ flex:1 1 100%; }
.tsbar{ position:static; }
.tsbar__n{ margin-left:0; }
.tshero__sprig{ display:none; }
.disc{ grid-template-columns:1fr; }
}
/* ==========================================================================
AWARDS, THE AWARD LIGHTBOX, AND THE WHATSAPP BUTTON
========================================================================== */
/* ------------------------------------------------------------- the band
The trophies are all shot on dark grounds, so the section inverts. It also
gives the page one deliberate change of key between two light stretches. */
.aw{
position:relative; isolation:isolate; overflow:hidden;
padding:clamp(64px,7vw,110px) var(--pad);
background:
radial-gradient(120% 90% at 12% 0%, #22355C 0%, rgba(34,53,92,0) 60%),
linear-gradient(180deg, #16233F 0%, #101B33 100%);
color:var(--on-dark);
}
.aw__glow{
position:absolute; z-index:-1; inset:auto -10% -55% 30%; height:90%;
background:radial-gradient(closest-side, rgba(0,149,218,.30), rgba(0,149,218,0) 70%);
filter:blur(10px); pointer-events:none;
}
.aw__head{
display:grid; grid-template-columns:minmax(0,1.35fr) auto;
gap:clamp(22px,4vw,64px); align-items:end;
max-width:var(--maxw); margin:0 auto clamp(30px,4vw,52px);
}
.eyebrow--inv{ color:var(--sky); }
.aw__s{
margin-top:16px; max-width:62ch;
font-size:.92rem; line-height:1.78; color:var(--on-dark-dim);
}
.aw__stats{ display:flex; gap:clamp(18px,2.6vw,38px); }
.aw__stats li{ display:grid; gap:2px; }
.aw__stats b{
font-family:var(--dsp); font-weight:300; font-size:clamp(2rem,3.4vw,2.9rem);
line-height:1; color:#fff; font-variant-numeric:tabular-nums;
}
.aw__stats span{ font-size:.72rem; color:var(--on-dark-dim); white-space:nowrap; }
/* --------------------------------------------------------------- the rail */
.aw__railwrap{ position:relative; max-width:var(--maxw); margin-inline:auto; }
.aw__rail{
display:grid; grid-auto-flow:column; grid-auto-columns:minmax(238px,1fr);
gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
padding:6px 2px 18px;
scrollbar-width:none;
}
.aw__rail::-webkit-scrollbar{ display:none; }
.awc{
scroll-snap-align:start; text-align:left; padding:0;
display:grid; grid-template-rows:auto 1fr; gap:0;
border-radius:var(--r-lg); overflow:hidden;
background:rgba(255,255,255,.055);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
transition:transform .5s var(--e), box-shadow .5s var(--e), background .5s var(--e);
cursor:pointer;
}
.awc:hover{
transform:translateY(-6px);
background:rgba(255,255,255,.09);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 30px 60px -30px rgba(0,0,0,.75);
}
.awc:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }
.awc__shot{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; }
.awc__shot img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .8s var(--e);
}
.awc:hover .awc__shot img{ transform:scale(1.05); }
/* a slow specular sweep - these are glass and acrylic trophies, so a highlight
travelling across them is the one effect that actually reads as the object */
.awc__gloss{
position:absolute; inset:0; pointer-events:none;
background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.20) 48%,
rgba(255,255,255,.05) 56%, transparent 66%);
translate:-120% 0;
transition:translate 1.1s var(--e);
}
.awc:hover .awc__gloss{ translate:120% 0; }
.awc__in{ display:grid; gap:6px; align-content:start; padding:16px 18px 20px; }
.awc__p{
font-size:.63rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
color:var(--sky);
}
.awc__t{ font-family:var(--dsp); font-size:1rem; font-weight:400; line-height:1.35; color:#fff; }
.awc__to{ font-size:.72rem; color:var(--on-dark-dim); }
.aw__nav{
position:absolute; top:34%; z-index:3; width:46px; height:46px; border-radius:50%;
background:rgba(255,255,255,.94); color:var(--deep);
box-shadow:0 14px 34px -14px rgba(0,0,0,.8);
transition:opacity .35s var(--e), transform .35s var(--e), background .35s var(--e);
}
.aw__nav::before{
content:""; position:absolute; inset:0; margin:auto; width:8px; height:8px;
border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
}
.aw__nav--p{ left:-14px; }
.aw__nav--p::before{ transform:translateX(2px) rotate(-135deg); }
.aw__nav--n{ right:-14px; }
.aw__nav--n::before{ transform:translateX(-2px) rotate(45deg); }
.aw__nav:hover{ transform:scale(1.07); }
.aw__nav[disabled]{ opacity:0; pointer-events:none; }
.aw__foot{
display:flex; align-items:center; gap:18px 26px; flex-wrap:wrap;
max-width:var(--maxw); margin:clamp(18px,2.4vw,30px) auto 0;
}
.aw__note{ font-size:.74rem; color:var(--on-dark-dim); }
/* ------------------------------------------------------- the awards page */
.awall{
display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px);
max-width:var(--maxw); margin-inline:auto;
}
.awc--wall{ background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.awc--wall:hover{ background:#fff; box-shadow:inset 0 0 0 1px var(--line-2), 0 30px 60px -34px rgba(22,35,63,.5); }
.awc--wall .awc__t{ color:var(--ink); }
.awc--wall .awc__p{ color:var(--blue-deep); }
.awc--wall .awc__to{ color:var(--ink-faint); }
.awshots{
display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px);
max-width:var(--maxw); margin:clamp(28px,4vw,46px) auto 0;
}
.awp{ border-radius:var(--r-lg); overflow:hidden; box-shadow:0 24px 50px -34px rgba(22,35,63,.6); }
.awp img{ display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
transition:transform .8s var(--e); }
.awp:hover img{ transform:scale(1.04); }
/* ---------------------------------------------------------- the lightbox */
.awbox{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:var(--pad); }
.awbox__scrim{
position:absolute; inset:0; background:rgba(8,14,28,.72);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
animation:fadeIn .3s var(--e) both;
}
.awbox__panel{
position:relative; z-index:2;
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
gap:clamp(18px,2.6vw,36px); align-items:center;
width:min(920px,100%); max-height:86vh; overflow:auto;
padding:clamp(18px,2.4vw,30px);
border-radius:var(--r-xl); background:var(--card);
box-shadow:0 50px 100px -40px rgba(0,0,0,.7);
animation:awIn .5s var(--e) both;
}
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes awIn{ from{ opacity:0; transform:translateY(20px) scale(.97); } }
.awbox.is-out .awbox__panel{ animation:awOut .22s var(--e) both; }
.awbox.is-out .awbox__scrim{ animation:fadeIn .22s var(--e) reverse both; }
@keyframes awOut{ to{ opacity:0; transform:translateY(10px) scale(.98); } }
.awbox__shot{ border-radius:var(--r-lg); overflow:hidden; background:var(--deep); }
.awbox__shot img{ display:block; width:100%; height:auto; }
.awbox__in{ display:grid; gap:10px; align-content:center; }
.awbox__p{ font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-deep); }
.awbox__t{ font-family:var(--dsp); font-size:clamp(1.25rem,2.2vw,1.7rem); font-weight:400; line-height:1.3; }
.awbox__to{ font-size:.86rem; color:var(--ink-faint); }
.awbox__nav{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.awbox__n{ font-size:.76rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.awbox__arw{
width:40px; height:40px; border-radius:50%; position:relative;
box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink);
transition:background .35s var(--e), color .35s var(--e);
}
.awbox__arw:hover{ background:var(--deep); color:#fff; }
.awbox__arw::before{
content:""; position:absolute; inset:0; margin:auto; width:7px; height:7px;
border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
}
.awbox__arw--p::before{ transform:translateX(2px) rotate(-135deg); }
.awbox__arw--n::before{ transform:translateX(-2px) rotate(45deg); }
.awbox__x{
position:absolute; top:12px; right:12px; z-index:3; width:40px; height:40px;
border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink);
box-shadow:inset 0 0 0 1px var(--line);
transition:background .35s var(--e), color .35s var(--e), transform .35s var(--e);
}
.awbox__x:hover{ background:var(--deep); color:#fff; transform:rotate(90deg); }
.awbox__x::before,.awbox__x::after{
content:""; position:absolute; inset:0; margin:auto; width:13px; height:1.6px;
background:currentColor;
}
.awbox__x::before{ transform:rotate(45deg); }
.awbox__x::after{ transform:rotate(-45deg); }
/* ------------------------------------------------------- whatsapp button */
.wa{ position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:90; }
.wa__btn{
position:relative; display:grid; place-items:center;
width:58px; height:58px; border-radius:50%;
background:#25D366; color:#fff;
box-shadow:0 16px 34px -12px rgba(14,26,20,.6), inset 0 0 0 1px rgba(255,255,255,.22);
transition:transform .45s var(--e), box-shadow .45s var(--e);
}
.wa__btn:hover{ transform:scale(1.07) translateY(-2px); box-shadow:0 22px 44px -14px rgba(14,26,20,.7); }
.wa__btn:active{ transform:scale(.97); }
.wa__ic{ width:31px; height:31px; position:relative; z-index:2; }
/* a slow double ring, stopped once the panel has been opened or the visitor
has scrolled past the hero - a permanent pulse reads as an advert */
.wa__pulse{
position:absolute; inset:0; border-radius:50%; background:#25D366;
animation:waPulse 2.8s ease-out infinite;
}
.wa__pulse::after{
content:""; position:absolute; inset:0; border-radius:50%; background:#25D366;
animation:waPulse 2.8s ease-out infinite 1.4s;
}
@keyframes waPulse{
0%{ transform:scale(1); opacity:.5; }
70%{ transform:scale(1.7); opacity:0; }
100%{ transform:scale(1.7); opacity:0; }
}
.wa.is-seen .wa__pulse,
.wa.is-open .wa__pulse{ animation:none; opacity:0; }
/* the glyph is a logo, so it settles back rather than spinning - a rotated
WhatsApp mark reads as a rendering fault, not as a state change */
.wa.is-open .wa__btn{ transform:scale(.88); box-shadow:0 10px 22px -10px rgba(14,26,20,.6); }
.wa__card{
position:absolute; right:0; bottom:72px; width:min(330px, calc(100vw - 32px));
border-radius:var(--r-lg); overflow:hidden; background:var(--card);
box-shadow:0 34px 70px -28px rgba(12,22,44,.6), inset 0 0 0 1px var(--line);
transform-origin:100% 100%;
animation:waIn .42s var(--e) both;
}
@keyframes waIn{ from{ opacity:0; transform:translateY(14px) scale(.94); } }
.wa.is-closing .wa__card{ animation:waOut .24s var(--e) both; }
@keyframes waOut{ to{ opacity:0; transform:translateY(10px) scale(.96); } }
.wa__head{
display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
padding:13px 14px; background:#075E54; color:#fff;
}
.wa__av{
display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
background:#fff; overflow:hidden;
}
.wa__av img{ width:28px; height:auto; }
.wa__name{ font-size:.84rem; font-weight:600; }
.wa__name em{ font-style:normal; }
.wa__status{ display:flex; align-items:center; gap:6px; font-size:.68rem; color:rgba(255,255,255,.8); }
.wa__status i{ width:6px; height:6px; border-radius:50%; background:#4ADE80; flex:none; }
.wa__x{
position:relative; width:28px; height:28px; border-radius:50%; color:#fff;
transition:background .3s var(--e);
}
.wa__x:hover{ background:rgba(255,255,255,.16); }
.wa__x::before,.wa__x::after{
content:""; position:absolute; inset:0; margin:auto; width:11px; height:1.5px; background:currentColor;
}
.wa__x::before{ transform:rotate(45deg); }
.wa__x::after{ transform:rotate(-45deg); }
/* the faint chat wallpaper WhatsApp uses, at a whisper */
.wa__body{
padding:16px 14px 10px;
background:
radial-gradient(circle at 20% 30%, rgba(22,35,63,.05) 0 2px, transparent 2px),
radial-gradient(circle at 70% 70%, rgba(22,35,63,.05) 0 2px, transparent 2px),
var(--card-2);
background-size:44px 44px, 60px 60px, auto;
}
.wa__bubble{
position:relative; padding:11px 13px; border-radius:12px 12px 12px 3px;
background:#fff; box-shadow:0 2px 8px -3px rgba(12,22,44,.28);
font-size:.8rem; line-height:1.62; color:var(--ink-dim);
animation:waBub .5s var(--e) both .12s;
}
@keyframes waBub{ from{ opacity:0; transform:translateY(8px); } }
.wa__time{ margin-top:5px; font-size:.62rem; color:var(--ink-faint); text-align:right; }
.wa__quick{ display:grid; gap:7px; padding:4px 14px 12px; background:var(--card-2); }
.wa__q{
text-align:left; padding:9px 12px; border-radius:999px;
font-size:.75rem; font-weight:500; color:var(--blue-deep);
background:#fff; box-shadow:inset 0 0 0 1px var(--line);
transition:background .3s var(--e), color .3s var(--e), transform .3s var(--e);
}
.wa__q:hover{ background:var(--deep); color:#fff; transform:translateX(3px); }
.wa__foot{ padding:12px 14px 14px; display:grid; gap:8px; }
.wa__go{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:10px 10px 10px 15px; border-radius:999px;
font-size:.79rem; font-weight:600; color:#fff; background:#25D366;
transition:background .35s var(--e), transform .35s var(--e);
}
.wa__go .btn__arw{ background:#fff; color:#0F5132; }
.wa__go:hover{ background:#1FB855; transform:translateY(-1px); }
.wa__note{ font-size:.64rem; line-height:1.5; color:var(--ink-faint); }
/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px){
.aw__head{ grid-template-columns:1fr; align-items:start; }
.awall{ grid-template-columns:repeat(3,1fr); }
.awshots{ grid-template-columns:repeat(2,1fr); }
.awbox__panel{ grid-template-columns:1fr; }
.awbox__shot{ max-height:44vh; }
.awbox__shot img{ height:100%; object-fit:contain; }
}
@media (max-width: 760px){
.awall{ grid-template-columns:repeat(2,1fr); }
.awshots{ grid-template-columns:1fr; }
.aw__nav{ display:none; }
.aw__stats{ flex-wrap:wrap; gap:16px 24px; }
.wa__btn{ width:52px; height:52px; }
.wa__ic{ width:28px; height:28px; }
}
/* ==========================================================================
THE BOOKING FLOW (book.html)
========================================================================== */
.bk{
position:relative; isolation:isolate;
max-width:calc(var(--maxw) + var(--pad) * 2); margin-inline:auto;
padding:clamp(104px,11vw,168px) var(--pad) clamp(60px,7vw,110px);
text-align:left;
}
.bk__grid{
display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.85fr);
gap:clamp(26px,4vw,64px); align-items:start;
}
.bk .lede{ margin-inline:0; max-width:56ch; }
/* ------------------------------------------------------------ the stepper */
.bkbar{
position:relative; display:flex; justify-content:space-between;
margin:clamp(30px,4vw,46px) 0 clamp(24px,3vw,36px);
}
.bkbar__s{
position:relative; z-index:2; display:grid; gap:8px; justify-items:center;
flex:1; text-align:center;
}
.bkbar__s span{
display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
font-size:.78rem; font-weight:600;
background:var(--card); color:var(--ink-faint);
box-shadow:inset 0 0 0 1px var(--line);
transition:background .45s var(--e), color .45s var(--e),
box-shadow .45s var(--e), transform .45s var(--e);
}
.bkbar__s b{ font-size:.71rem; font-weight:500; color:var(--ink-faint); transition:color .45s var(--e); }
.bkbar__s.is-on span{ background:var(--deep); color:#fff; transform:scale(1.08); box-shadow:none; }
.bkbar__s.is-on b{ color:var(--ink); font-weight:600; }
.bkbar__s.is-done span{ background:var(--blue); color:#fff; box-shadow:none; }
.bkbar__s.is-done span::after{
content:""; position:absolute; width:11px; height:6px; margin-top:-2px;
border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}
.bkbar__s.is-done span{ font-size:0; }
.bkbar__line{
position:absolute; z-index:1; left:6%; right:6%; top:17px; height:2px;
background:var(--line); border-radius:2px;
}
.bkbar__line i{
display:block; height:100%; width:0; border-radius:2px; background:var(--blue);
transition:width .55s var(--e);
}
/* --------------------------------------------------------------- the form */
.bkstep{ border:0; padding:0; margin:0; animation:bkIn .5s var(--e) both; }
@keyframes bkIn{ from{ opacity:0; transform:translateY(14px); } }
.bkstep__h{
font-family:var(--dsp); font-size:clamp(1.2rem,2vw,1.55rem); font-weight:400;
padding:0; margin-bottom:6px;
}
.bkstep__s{ font-size:.84rem; line-height:1.7; color:var(--ink-faint); margin-bottom:20px; max-width:56ch; }
.bkopts{ display:grid; gap:10px; }
.bkopts--concern{ grid-template-columns:repeat(2,1fr); }
.bkopts--clinic{ grid-template-columns:repeat(2,1fr); margin-top:12px; }
.bkopts__none{ padding:22px 0; font-size:.84rem; color:var(--ink-faint); }
.bkopt{
position:relative; display:flex; align-items:center; gap:12px; text-align:left;
padding:15px 16px; border-radius:var(--r);
background:var(--card); color:var(--ink);
box-shadow:inset 0 0 0 1px var(--line);
transition:background .35s var(--e), box-shadow .35s var(--e), transform .35s var(--e);
}
.bkopt:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--line-2), 0 16px 34px -26px rgba(22,35,63,.6); }
.bkopt.is-on{ box-shadow:inset 0 0 0 1.6px var(--blue), 0 16px 34px -26px rgba(47,95,224,.6); }
.bkopt.is-on::after{
content:""; position:absolute; top:12px; right:12px; width:16px; height:16px;
border-radius:50%; background:var(--blue);
box-shadow:inset 0 0 0 3px #fff;
}
.bkopt__ic{
display:grid; place-items:center; width:38px; height:38px; flex:none;
border-radius:11px; background:var(--tint); color:var(--blue-deep);
transition:background .35s var(--e), color .35s var(--e);
}
.bkopt__ic svg{ width:20px; height:20px; }
.bkopt.is-on .bkopt__ic{ background:var(--blue); color:#fff; }
.bkopt__t{ font-size:.86rem; font-weight:500; line-height:1.35; }
.bkopt--row{ flex-direction:column; align-items:flex-start; gap:3px; padding-right:38px; }
.bkopt__sub{ font-size:.74rem; color:var(--ink-faint); }
.bkf__srch{ margin-bottom:2px; }
/* ------------------------------------------------------------ day + slots */
.bkdays{
display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px;
scrollbar-width:none;
}
.bkdays::-webkit-scrollbar{ display:none; }
.bkday{
flex:none; display:grid; gap:1px; justify-items:center; width:66px;
padding:11px 6px; border-radius:14px;
background:var(--card); box-shadow:inset 0 0 0 1px var(--line);
transition:background .3s var(--e), box-shadow .3s var(--e), transform .3s var(--e);
animation:bkIn .45s var(--e) both; animation-delay:calc(var(--i) * .028s);
}
.bkday:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--line-2); }
.bkday.is-on{ background:var(--deep); box-shadow:none; }
.bkday__d{ font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.bkday__n{ font-family:var(--dsp); font-size:1.3rem; line-height:1.1; }
.bkday__m{ font-size:.64rem; color:var(--ink-faint); }
.bkday.is-on .bkday__d,.bkday.is-on .bkday__m{ color:rgba(255,255,255,.72); }
.bkday.is-on .bkday__n{ color:#fff; }
.bkslots__h{
font-size:.64rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
color:var(--ink-faint); margin:14px 0 10px;
}
.bkslots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.bkslot{
position:relative; padding:11px 8px; border-radius:999px;
font-size:.82rem; font-weight:500; font-variant-numeric:tabular-nums;
background:var(--card); color:var(--ink);
box-shadow:inset 0 0 0 1px var(--line);
transition:background .3s var(--e), color .3s var(--e), box-shadow .3s var(--e), transform .3s var(--e);
animation:bkIn .4s var(--e) both; animation-delay:calc(var(--i) * .03s);
}
.bkslot:hover:not([disabled]){ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--line-2); }
.bkslot.is-on{ background:var(--deep); color:#fff; box-shadow:none; }
.bkslot[disabled]{ opacity:.42; cursor:not-allowed; text-decoration:line-through; }
.bkslot em{
display:block; font-style:normal; font-size:.56rem; letter-spacing:.06em;
text-transform:uppercase; color:var(--ink-faint); text-decoration:none;
}
/* ----------------------------------------------------------- the fields */
.bkfields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bkfield{ display:grid; gap:6px; }
.bkfield--wide{ grid-column:1 / -1; }
.bkfield > span{ font-size:.76rem; font-weight:500; color:var(--ink-dim); }
.bkfield > span i{ font-style:normal; color:var(--ink-faint); font-weight:400; }
.bkfield input,.bkfield textarea{
font:inherit; font-size:.86rem; padding:12px 14px; border:0; border-radius:12px;
background:var(--card); color:var(--ink); width:100%;
box-shadow:inset 0 0 0 1px var(--line);
transition:box-shadow .3s var(--e);
}
.bkfield textarea{ resize:vertical; line-height:1.6; }
.bkfield input:focus,.bkfield textarea:focus{ outline:0; box-shadow:inset 0 0 0 1.6px var(--blue); }
.bkfield input::placeholder,.bkfield textarea::placeholder{ color:var(--ink-faint); }
.bkfield__err{ display:none; font-style:normal; font-size:.72rem; color:#B3261E; }
.bkfield input:not(:placeholder-shown):invalid ~ .bkfield__err{ display:block; }
.bkcheck{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; font-size:.8rem; color:var(--ink-dim); }
.bkcheck input{ width:18px; height:18px; margin-top:1px; accent-color:var(--blue); flex:none; }
.bkf__nav{ display:flex; align-items:center; gap:12px; margin-top:clamp(24px,3vw,36px); }
.bkf__next[disabled]{ opacity:.4; pointer-events:none; }
.btn__arw--back::before{ transform:rotate(180deg); }
.bkf__back .btn__arw{ margin-right:2px; }
/* ------------------------------------------------------------- the rail */
.bksum{ position:sticky; top:96px; }
.bksum__in{
display:grid; gap:16px;
padding:clamp(22px,2.6vw,30px); border-radius:var(--r-lg);
background:var(--card); box-shadow:inset 0 0 0 1px var(--line), 0 26px 56px -40px rgba(22,35,63,.55);
}
.bksum__e{
font-size:.64rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink-faint);
}
.bksum__list{ display:grid; gap:0; }
.bksum__list div{
display:flex; align-items:baseline; justify-content:space-between; gap:12px;
padding:10px 0; border-bottom:1px solid var(--line);
}
.bksum__list dt{ font-size:.73rem; color:var(--ink-faint); flex:none; }
.bksum__list dd{ font-size:.8rem; font-weight:500; text-align:right; }
.bksum__list .is-empty dd{ color:var(--ink-faint); font-weight:400; }
.bksum__price{
display:flex; align-items:baseline; justify-content:space-between; gap:12px;
padding:14px 16px; border-radius:12px; background:var(--tint);
}
.bksum__price span{ font-size:.78rem; color:var(--ink-dim); }
.bksum__price b{ font-family:var(--dsp); font-size:1.3rem; font-weight:400; color:var(--blue-deep); }
.bksum__trust{ display:grid; gap:9px; }
.bksum__trust li{
position:relative; padding-left:22px; font-size:.76rem; line-height:1.55; color:var(--ink-faint);
}
.bksum__trust li::before{
content:""; position:absolute; left:0; top:.42em; width:11px; height:6px;
border-left:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue);
transform:rotate(-45deg);
}
.bksum__note{ font-size:.68rem; line-height:1.55; color:var(--ink-faint); }
/* ---------------------------------------------------------- confirmation */
.bkdone{
display:grid; place-items:center;
min-height:100svh; padding:clamp(104px,11vw,168px) var(--pad) clamp(60px,7vw,110px);
}
.bkdone__card{
width:min(680px,100%); text-align:center; display:grid; gap:14px; justify-items:center;
animation:bkDone .7s var(--e) both;
}
@keyframes bkDone{ from{ opacity:0; transform:translateY(22px) scale(.98); } }
.bkdone__tick{
display:grid; place-items:center; width:66px; height:66px; border-radius:50%;
background:var(--blue); color:#fff; margin-bottom:6px;
box-shadow:0 20px 44px -18px rgba(47,95,224,.8);
animation:tickPop .6s var(--e) both .12s;
}
@keyframes tickPop{ from{ transform:scale(.5); opacity:0; } }
.bkdone__tick svg{ width:30px; height:30px; }
.bkdone__tick path{ stroke-dasharray:26; stroke-dashoffset:26; animation:tickDraw .5s var(--e) forwards .42s; }
@keyframes tickDraw{ to{ stroke-dashoffset:0; } }
.bkdone .lede{ margin-inline:auto; }
.bkdone__list{
display:grid; gap:0; width:min(420px,100%); text-align:left;
margin:8px 0; padding:6px 18px; border-radius:var(--r);
background:var(--card); box-shadow:inset 0 0 0 1px var(--line);
}
.bkdone__list div{
display:flex; align-items:baseline; justify-content:space-between; gap:12px;
padding:11px 0; border-bottom:1px solid var(--line);
}
.bkdone__list div:last-child{ border-bottom:0; }
.bkdone__list dt{ font-size:.73rem; color:var(--ink-faint); }
.bkdone__list dd{ font-size:.81rem; font-weight:500; text-align:right; }
.bkdone__ref{ font-size:.78rem; color:var(--ink-faint); }
.bkdone__ref b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.bkdone__proto{ margin-top:8px; font-size:.7rem; color:var(--ink-faint); max-width:46ch; }
.aw__note--light{ color:var(--ink-faint); margin-top:20px; }
/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px){
.bk__grid{ grid-template-columns:1fr; }
.bksum{ position:static; order:-1; }
.bksum__trust{ display:none; }
}
@media (max-width: 620px){
.bkopts--concern,.bkopts--clinic,.bkfields{ grid-template-columns:1fr; }
.bkbar__s b{ display:none; }
.bkbar__line{ top:17px; }
}
/* ==========================================================================
THE TREATMENT CART
========================================================================== */
/* ------------------------------------------------------- masthead button */
.cartb{
position:relative; display:grid; place-items:center;
width:42px; height:42px; border-radius:50%; flex:none;
background:rgba(255,255,255,.55); color:var(--ink);
backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 26px -18px rgba(22,35,63,.55);
transition:background .4s var(--e), transform .4s var(--e), box-shadow .4s var(--e);
}
.mast.is-solid .cartb{
background:rgba(255,255,255,.86);
box-shadow:inset 0 0 0 1px var(--line), 0 10px 30px -20px rgba(22,35,63,.5);
}
.cartb:hover{ transform:translateY(-2px); background:#fff; }
.cartb__ic{ width:19px; height:19px; }
/* The badge only exists once something is in the plan — an always-visible
zero invites the reader to wonder what they were meant to have added. */
.cartb__n{
position:absolute; top:-3px; right:-3px;
min-width:19px; height:19px; padding:0 5px; border-radius:999px;
display:grid; place-items:center;
font-size:.62rem; font-weight:700; font-variant-numeric:tabular-nums;
background:var(--blue); color:#fff;
box-shadow:0 0 0 2px var(--cream);
transform:scale(0); transition:transform .4s var(--e);
}
.cartb.has-items .cartb__n{ transform:scale(1); }
.cartb.has-items{ box-shadow:inset 0 0 0 1px var(--blue), 0 8px 26px -18px rgba(47,95,224,.6); }
/* --------------------------------------------------------- the add button */
.addb{
display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
padding:7px 13px 7px 10px; border-radius:999px;
font-size:.72rem; font-weight:500; color:var(--blue-deep);
box-shadow:inset 0 0 0 1px var(--line);
transition:background .35s var(--e), color .35s var(--e),
box-shadow .35s var(--e), transform .35s var(--e);
}
.addb__ic{
position:relative; width:15px; height:15px; flex:none; border-radius:50%;
background:var(--tint);
transition:background .35s var(--e), transform .45s var(--e);
}
.addb__ic::before,.addb__ic::after{
content:""; position:absolute; inset:0; margin:auto; background:currentColor;
transition:opacity .3s var(--e), transform .3s var(--e);
}
.addb__ic::before{ width:7px; height:1.5px; }
.addb__ic::after{ width:1.5px; height:7px; }
.addb:hover{ background:var(--tint); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
/* already in the plan: the plus becomes a tick and the pill fills */
.addb.is-in{ background:var(--blue); color:#fff; box-shadow:none; }
.addb.is-in .addb__ic{ background:rgba(255,255,255,.24); }
.addb.is-in .addb__ic::after{ opacity:0; }
.addb.is-in .addb__ic::before{
width:8px; height:4px; background:transparent;
border-left:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
transform:translateY(-1px) rotate(-45deg);
}
.addb.is-pop{ animation:addPop .42s var(--e); }
@keyframes addPop{ 40%{ transform:scale(1.09); } }
/* -------------------------------------------------- treatment page buy row */
.tx__buyrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:clamp(20px,2.4vw,28px); }
.tx__buyrow .tx__cta{ margin-top:0; flex:1 1 auto; }
.tx__addbtn{ flex:0 0 auto; }
.tx__addbtn.is-in{ background:var(--blue); color:#fff; box-shadow:none; }
.tx__addbtn.is-in .btn__arw{ background:#fff; color:var(--blue); }
.tx__addnote{ margin-top:12px; font-size:.72rem; line-height:1.6; color:var(--ink-faint); max-width:52ch; }
/* --------------------------------------------------------- the drawer */
.cart{ position:fixed; inset:0; z-index:110; }
.cart__scrim{
position:absolute; inset:0; background:rgba(12,22,44,.42);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
animation:scrimIn .5s var(--e) both;
}
.cart.is-out .cart__scrim{ animation:scrimIn .35s var(--e) reverse both; }
.cart__panel{
position:absolute; inset:0 0 0 auto; width:min(480px, 100%);
background:var(--cream); display:grid; grid-template-rows:auto 1fr auto;
box-shadow:-40px 0 90px -40px rgba(12,22,44,.6);
animation:trayIn .6s var(--e) both;
}
.cart.is-out .cart__panel{ animation:trayIn .38s var(--e) reverse both; }
.cart__head{
display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
padding:26px 26px 18px; border-bottom:1px solid var(--line);
}
.cart__body{ overflow-y:auto; overscroll-behavior:contain; padding:8px 26px 20px; }
/* ------------------------------------------------------------- the lines */
.clist{ display:grid; }
.cline{
display:grid; gap:8px; padding:16px 0; border-bottom:1px solid var(--line);
opacity:0; transform:translateY(10px);
animation:trIn .5s var(--e) forwards; animation-delay:calc(var(--i) * .035s);
}
.cline__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cline__n{
font-size:.92rem; font-weight:500; line-height:1.35; color:var(--ink);
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
transition:background-size .45s var(--e);
}
.cline:hover .cline__n{ background-size:100% 1px; }
.cline__x{
position:relative; width:26px; height:26px; border-radius:50%; flex:none;
color:var(--ink-faint);
transition:background .3s var(--e), color .3s var(--e), transform .3s var(--e);
}
.cline__x:hover{ background:var(--tint); color:var(--ink); transform:rotate(90deg); }
.cline__x::before,.cline__x::after{
content:""; position:absolute; inset:0; margin:auto; width:11px; height:1.5px; background:currentColor;
}
.cline__x::before{ transform:rotate(45deg); }
.cline__x::after{ transform:rotate(-45deg); }
.cline__cat{ font-size:.72rem; color:var(--ink-faint); }
.cline__cat span{ opacity:.75; }
.cline__bot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:2px; }
.cline__sum{ font-size:.98rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* the session stepper — a course, not a quantity of items */
.qty{
display:inline-flex; align-items:center; gap:2px; padding:3px;
border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--line);
}
.qty__b{
width:28px; height:28px; border-radius:50%; font-size:1rem; line-height:1;
color:var(--ink); display:grid; place-items:center;
transition:background .3s var(--e), color .3s var(--e);
}
.qty__b:hover:not([disabled]){ background:var(--deep); color:#fff; }
.qty__b[disabled]{ opacity:.32; cursor:not-allowed; }
.qty__n{ padding:0 8px; font-size:.74rem; color:var(--ink-faint); white-space:nowrap; }
.qty__n b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
/* -------------------------------------------------------------- empty */
.cart__empty{ display:grid; gap:10px; justify-items:center; text-align:center; padding:clamp(40px,8vw,70px) 10px; }
.cart__emptyic{
display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
background:var(--tint); color:var(--blue-deep); margin-bottom:4px;
}
.cart__emptyic svg{ width:26px; height:26px; }
.cart__emptyh{ font-family:var(--dsp); font-size:1.2rem; font-weight:400; }
.cart__emptys{ font-size:.82rem; line-height:1.7; color:var(--ink-faint); max-width:34ch; margin-bottom:6px; }
/* ------------------------------------------------------------- the foot */
.cart__foot{ padding:18px 26px 22px; border-top:1px solid var(--line); background:var(--card-2); display:grid; gap:12px; }
.cart__sum{ display:grid; gap:6px; }
.cart__sumrow{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.cart__sumrow span{ font-size:.84rem; color:var(--ink-dim); }
.cart__sumrow b{
font-family:var(--dsp); font-size:1.5rem; font-weight:400;
font-variant-numeric:tabular-nums; color:var(--ink);
}
.cart__sumrow--sub span{ font-size:.76rem; color:var(--ink-faint); }
.cart__sumrow--sub b{ font-size:.9rem; font-family:var(--ui); font-weight:600; color:var(--blue-deep); }
.cart__note{ font-size:.68rem; line-height:1.6; color:var(--ink-faint); }
.cart__go{ justify-content:space-between; }
.cart__clear{
justify-self:center; font-size:.72rem; color:var(--ink-faint);
padding:6px 12px; border-radius:999px;
transition:background .3s var(--e), color .3s var(--e);
}
.cart__clear:hover{ background:var(--tint); color:var(--ink); }
/* -------------------------------------------------------------- the toast
Sits above the WhatsApp button rather than beside it: the two are the only
fixed controls on the page and they must not overlap on a phone. */
.ctoast{
position:fixed; z-index:95;
right:clamp(14px,2vw,26px); bottom:calc(clamp(14px,2vw,26px) + 74px);
display:flex; align-items:center; gap:11px;
max-width:min(340px, calc(100vw - 32px));
padding:11px 11px 11px 14px; border-radius:999px;
background:var(--deep); color:#fff;
box-shadow:0 22px 50px -20px rgba(12,22,44,.7);
opacity:0; transform:translateY(10px) scale(.96);
transition:opacity .32s var(--e), transform .32s var(--e);
}
.ctoast.is-in{ opacity:1; transform:none; }
.ctoast__ic{
display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
background:#25D366; color:#0B2417; flex:none;
}
.ctoast__ic svg{ width:13px; height:13px; }
.ctoast__t{ display:grid; min-width:0; font-size:.76rem; line-height:1.35; }
.ctoast__t b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctoast__t em{ font-style:normal; font-size:.68rem; color:rgba(255,255,255,.7); }
.ctoast__go{
flex:none; padding:7px 13px; border-radius:999px; font-size:.72rem; font-weight:600;
background:rgba(255,255,255,.16); color:#fff;
transition:background .3s var(--e);
}
.ctoast__go:hover{ background:#fff; color:var(--deep); }
/* ------------------------------------------------- the plan on book.html */
.bkplan{ display:grid; gap:8px; padding:14px 16px; border-radius:12px; background:var(--tint); }
.bkplan__h{
display:flex; align-items:baseline; justify-content:space-between; gap:10px;
font-size:.64rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
color:var(--ink-faint);
}
.bkplan__h a{ font-size:.68rem; letter-spacing:0; text-transform:none; color:var(--blue-deep); font-weight:500; }
.bkplan__h a:hover{ text-decoration:underline; }
.bkplan__list{ display:grid; gap:7px; }
.bkplan__list li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.bkplan__n{ font-size:.79rem; font-weight:500; line-height:1.35; }
.bkplan__n em{ display:block; font-style:normal; font-size:.68rem; color:var(--ink-faint); font-weight:400; }
.bkplan__p{ font-size:.79rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bkplan__tot{
display:flex; align-items:baseline; justify-content:space-between; gap:12px;
padding-top:9px; margin-top:2px; border-top:1px solid var(--line-2);
}
.bkplan__tot span{ font-size:.76rem; color:var(--ink-dim); }
.bkplan__tot b{ font-family:var(--dsp); font-size:1.2rem; font-weight:400; font-variant-numeric:tabular-nums; }
.bkplan--done{ width:min(420px,100%); text-align:left; margin-inline:auto; }
.bkplan__pay{ margin-top:4px; font-size:.68rem; line-height:1.6; color:var(--ink-faint); }
/* ------------------------------------------------------------ responsive */
@media (max-width: 760px){
.cartb{ width:38px; height:38px; }
.cartb__ic{ width:17px; height:17px; }
.tx__buyrow{ flex-direction:column; align-items:stretch; }
.cline__bot{ flex-wrap:wrap; }
.ctoast{ left:clamp(14px,2vw,26px); right:clamp(14px,2vw,26px); max-width:none; }
}
/* ==========================================================================
SERVICES RAIL — the affordances that say "there is more sideways"
========================================================================== */
.svc{ position:relative; margin-top:clamp(30px,4vw,52px); }
/* A native scroller, so a trackpad swipe, a touch flick and shift+wheel all
work without a line of JavaScript. Columns are sized to leave --peek of the
next card showing: a half-visible card is the single clearest signal that
the row continues, and it costs no chrome. */
.svc__rail{
--peek: 66px;
display:grid; grid-auto-flow:column;
grid-auto-columns:calc((100% - 3 * 22px - var(--peek)) / 3);
gap:22px;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scroll-padding-left:0;
padding-block:4px; /* room for the cards' hover lift */
scrollbar-width:none;
}
.svc__rail::-webkit-scrollbar{ display:none; }
.svc__rail:focus-visible{ outline:2px solid var(--blue); outline-offset:6px; border-radius:var(--r); }
.svcc{ scroll-snap-align:start; }
/* Edge fades. Each one is hidden on the side that has nothing behind it, so
the fade itself reports which direction has more. */
.svc__fade{
position:absolute; top:0; bottom:0; width:clamp(34px,5vw,64px);
pointer-events:none; z-index:2;
transition:opacity .45s var(--e);
}
.svc__fade--l{
left:-1px;
background:linear-gradient(to right, var(--cream) 12%, rgba(237,243,250,0));
}
.svc__fade--r{
right:-1px;
background:linear-gradient(to left, var(--cream) 12%, rgba(237,243,250,0));
}
.svc.at-start .svc__fade--l,
.svc.at-end .svc__fade--r{ opacity:0; }
/* Arrows, matched to the awards rail so the two behave alike. They sit over
the card artwork rather than outside the column, which keeps the grid on
the page's measure. */
.svc__nav{
position:absolute; top:38%; z-index:3;
width:48px; height:48px; border-radius:50%;
background:rgba(255,255,255,.94); color:var(--deep);
box-shadow:0 16px 36px -14px rgba(22,35,63,.7), inset 0 0 0 1px var(--line);
transition:opacity .35s var(--e), transform .35s var(--e), background .35s var(--e);
}
.svc__nav::before{
content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px;
border-top:1.7px solid currentColor; border-right:1.7px solid currentColor;
}
.svc__nav--p{ left:-10px; }
.svc__nav--p::before{ transform:translateX(2px) rotate(-135deg); }
.svc__nav--n{ right:-10px; }
.svc__nav--n::before{ transform:translateX(-2px) rotate(45deg); }
.svc__nav:hover{ background:var(--deep); color:#fff; transform:scale(1.08); }
.svc__nav[disabled]{ opacity:0; pointer-events:none; transform:scale(.9); }
/* ------------------------------------------------------------- the footer */
.svc__foot{
display:flex; align-items:center; justify-content:space-between;
gap:16px 26px; flex-wrap:wrap;
margin-top:clamp(16px,2vw,24px);
}
.svcprog{ display:flex; align-items:center; gap:13px; }
/* A scrollbar, effectively: the thumb's width is the share of the set on
screen and its position is the real scroll offset. Paged dots could not say
"you are between two cards", which free scrolling makes possible. */
.svcprog__bar{
position:relative; display:block; width:clamp(90px,14vw,150px); height:4px;
border-radius:999px; background:var(--line); overflow:hidden;
}
.svcprog__bar i{
position:absolute; inset:0 auto 0 0; display:block; width:40%;
border-radius:999px; background:var(--deep);
transition:transform .3s var(--e), width .3s var(--e);
}
.svcprog__n{
font-size:.74rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;
white-space:nowrap;
}
/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px){
.svc__rail{ grid-auto-columns:calc((100% - 2 * 22px - var(--peek)) / 2); }
}
@media (max-width: 760px){
.svc__rail{ --peek: 48px; grid-auto-columns:calc(100% - 22px - var(--peek)); }
.svc__nav{ display:none; } /* a thumb is the control on a phone */
.svc__foot{ justify-content:flex-start; }
}
@media (prefers-reduced-motion: reduce){
.svc__rail{ scroll-behavior:auto; }
}