/* ================= Dermal Fillers page (shares the laser, lip, Botox face map + Morpheus8 blocks) ================= */

/* brand cards: brand name in place of the step number */
.fill-brands span{font-size:24px;font-style:normal;font-family:var(--serif)}
.fill-brands h3{margin-top:4px}


/* "How it works" uses a silent treatment video in the photo frame */
.lp-vid video{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.12);background:#000}

/* "Why choose us" and "Treatment areas" share a background: don't stack both paddings */
.why-trust{padding-bottom:60px}
.why-trust+.fmap-sec{padding-top:60px}
@media(max-width:860px){.why-trust{padding-bottom:36px}.why-trust+.fmap-sec{padding-top:44px}}

/* before & after: portrait sliders, 4 per row on desktop (watermark comes from .lip-ba) */
/* square like the other before & after sliders (was 4:5) */
.fill-ba>div{flex:0 0 calc((100% - 90px)/4)}
@media(max-width:1024px){.fill-ba>div{flex-basis:calc((100% - 30px)/2)}}
@media(max-width:860px){.fill-ba>div{flex-basis:100%}.fill-ba .ba{max-width:420px;margin:0 auto}}

/* headings that sit on one line on desktop but break onto two lines on phones */
@media(max-width:860px){.split-m em{display:block}}
/* phones: longer banner headline scales down so it never overflows */
@media(max-width:600px){.lp-hero h1.fl-h1{font-size:min(40px,calc((100vw - 40px) * .088))}}
/* desktop: keep "Refined contours" clear of the photo */
@media(min-width:601px){.lp-hero h1.fl-h1{font-size:clamp(36px,4.4vw,62px)}}